jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/SmartDevice.vue

<template>
    <Dialog v-model="visibleModel"
     title="智能设备箱" width="470px" >
      <Video class="video-stream" :camId="camId" img="设备箱" />
  
      <div class="SmartDevice">
        <ElTabs v-model="activeName" class="tabs">
          <ElTabPane label="基本信息" name="first">
            <!-- {{ dialogData }} -->
            <Descriptions :list="list" :data="data" style="gap: 18px" />
          </ElTabPane>
          <ElTabPane label="设备参数" name="second">
            <DeviceParams disabled :dialogData="dialogData" />
          </ElTabPane>
          <ElTabPane label="在线率统计" name="third">
            <LineChart
              v-if="activeName === 'third'"
              :productId="dialogData.id"
              style="height: 180px"
            />
          </ElTabPane>
        </ElTabs>
      </div>
      <template #footer>
        <Button
          v-if="
            check(['business:home:equipmentBox']) &&
            activeName != 'first' &&
            data.deviceState == '1'
          "
          @click.native="deviceControlVisible = true"
        >
          设备操作
        </Button>
        <Button
          v-else-if="
            check(['business:home:equipmentBox']) && activeName != 'first'
          "
          style="background-color: #bbb"
        >
          设备离线
        </Button>
      </template>
  
      <DeviceControlDialog
        v-model="deviceControlVisible"
        :dialogData="dialogData"
      />
    </Dialog>
  </template>
  
  <script>
  import Dialog from "@screen/components/Dialog/index.vue";
  import Button from "@screen/components/Buttons/Button.vue";
  import Descriptions from "@screen/components/Descriptions.vue";
  import Video from "@screen/components/Video";
  import LineChart from "../LineChart/index.vue";
  import DeviceParams from "../Dialogs/SmartDevice/components/DeviceParams.vue";
  import DeviceControlDialog from "../Dialogs/SmartDevice/components/DeviceControlDialog.vue";
  
  import { checkPermi } from "@/utils/permission.js";
  import request from "@/utils/request";
  
  import {
    getRoadInfoByStakeMark,
    getProduct,
  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
  import { dialogDelayVisible } from "../Dialogs/mixin.js";
  import { resolve } from "@antv/x6/lib/registry/node-anchor/util";
  
  // 广播发布
  export default {
    name: "SmartDevice",
    mixins: [dialogDelayVisible],
    components: {
      Dialog,
      Descriptions,
      LineChart,
      Video,
      Button,
      DeviceParams,
      DeviceControlDialog,
    },
    props: {
    visible: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Object,
      default: null,
    },
  },
  emit: ["close"],
  computed: {
    visibleModel: {
      get() {
        if (this.visible) this.getData();
        return this.visible;
      },
      set(bool) {
        this.$emit("close", bool);
      },
    },
  },
    data() {
      return {
        activeName: "first",
        releaseVisible: false,
        deviceControlVisible: false,
        data: {
          deviceName: "LH24",
          roadName: "济菏高速",
          stakeMark: "k094+079",
          direction: "1",
          organizationName: "山东高速济南发展公司",
          brand: "XXX厂家",
          deviceState: "0",
        },
        list: [
          {
            label: "设备名称",
            key: "deviceName",
          },
          {
            label: "设备桩号",
            key: "stakeMark",
          },
          {
            label: "道路名称",
            key: "roadName",
          },
          {
            label: "设备方向",
            key: "direction",
            enum: "CameraDirectionEnum",
          },
          {
            label: "设备状态",
            key: "deviceState",
             enum: "DeviceTypeEnum",
          },
          {
            label: "设备厂商",
            key: "manufacturer",
          },
        ],
        camId:null
      };
    },
    async created() {
      // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
   
      if(typeof this.data.otherConfig === 'string'){
        const oConfig = JSON.parse(this.data.otherConfig)
        if(oConfig && oConfig.camId){
          this.camId = oConfig.camId
        }
      }
      this.data = { ...this.dialogData, roadName: '济菏高速' };
  
      let deviceInfo;
        if(this.dialogData.iotDeviceId!=null){
         deviceInfo = await this.getDeviceInfo();
        }

      this.data = {
        roadName: '济菏高速' ,
        //deviceStateLiteral: deviceInfo?.data.formatValue.deviceState,
        ...this.data,
         deviceStateName: (this.data.deviceState === '0'?'离线':'在线')
      };
  
      // console.log(
      //   "%c [ dialogData ]-103-「index.vue」",
      //   "font-size:15px; background:#36347c; color:#7a78c0;",
      //   this.dialogData,
      //   "+++========"
      // );
      if(this.dialogData.productId!=null){
       getProduct(this.dialogData.productId).then((data) => {
        this.dialogData.brand = data.brand;
       });
      }
   
  
      // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
  
      // if (roadInfo) this.data.roadName = roadInfo.roadName;
    },
    methods: {
      getData() { },
      check(arr){
          return checkPermi(arr);
      },
      async getDeviceInfo() {
        return request({
          url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883"
            }/3`,
          method: "get",
          params: {},
        });
      },
    },
  };
  </script>
  
  <style lang="scss">
  div.switcher {
    font-size: 12px;
    padding: 2px;
  }
  </style>
  <style lang="scss" scoped>
  .SmartDevice {
    width: 420px;
    // height: 240px;
    color: #fff;
    display: flex;
    flex-direction: column;
  
    .camera-video {
      flex: 1.5;
    }
  
    .tabs {
      flex: 1;
      display: flex;
      flex-direction: column;
  
      ::v-deep {
        .el-tabs__content {
          flex: 1;
  
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  
    .bottom {
      margin-top: 12px;
      display: flex;
      gap: 9px;
      align-items: center;
      justify-content: end;
  
      > div {
        font-size: 16px;
        padding: 6px 12px;
      }
    }
  }
  </style>