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

<template>
    <Dialog v-model="visibleModel" 
    title="疲劳唤醒弹窗" width="470px" style="z-index:3000" >
      <div class="FatigueWakesUp">
        <Video class="video-stream" :camId="camId" img="激光疲劳唤醒" />
        <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
          <ElTabPane label="基本信息" name="first">
            <Descriptions  :list="list" :data="data" style="gap: 18px" />
          </ElTabPane>
          <!-- <ElTabPane label="设备参数" name="second">设备参数</ElTabPane> -->
          <ElTabPane label="在线率统计" name="third">
            <LineChart v-if="activeName === 'third'" :productId="data.id" style="height: 180px" />
          </ElTabPane>
        </ElTabs>
      </div>
      <template #footer v-if="check(['business:home:laserFatigueAwakening'])">
        <Button  @click.native="onControlClick" disabled :style="(data.deviceState==='1' && data.iotDeviceId)?'':'background-color:#A9AEB8'">设备操作</Button>
      </template>
      <!-- 设备操作弹窗 -->
      <DeviceControlDialog v-model="deviceControlVisible" :deviceId="data.iotDeviceId" :productId="data.id"
        :deviceType="data.deviceType"  />
    </Dialog>
  </template>
  
  <script>
  import Dialog from "@screen/components/Dialog/index.vue";
  import Descriptions from "@screen/components/Descriptions.vue";
  import Button from "@screen/components/Buttons/Button.vue";
  import {
    getRoadInfoByStakeMark,
    getProduct,
  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
  import Video from "@screen/components/Video";
  import DeviceControlDialog from "../Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue";
  import { checkPermi } from "@/utils/permission.js";
  import request from "@/utils/request";
  import { dialogDelayVisible } from "../Dialogs/mixin.js";
  import LineChart from "../LineChart/index.vue";

  
  // 疲劳唤醒弹窗
  export default {
    name: "DialogFatigueWakesUp",
    components: {
      Dialog,
      Descriptions,
      Video,
      DeviceControlDialog,
      Button,
      LineChart,
    },
    
  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 {
        camId: null ,
        activeName: "first",
        deviceControlVisible: false,
        list: [
          {
            label: "设备名称",
            key: "deviceName",
          },
          {
            label: "设备桩号",
            key: "stakeMark",
          },
          {
            label: "道路名称",
            key: "roadName",
          },
          {
            label: "设备方向",
            key: "direction",
            enum: "CameraDirectionEnum",
          },
          {
            label: "设备状态",
            key: "deviceState",
            enum: "DeviceTypeEnum",
          },
          {
            label: "设备厂商",
            key: "manufacturer",
          },
        ],
      };
    },
    async mounted() {
      // 修改camid
      if(typeof this.data.otherConfig === 'string'){
        const oConfig = JSON.parse(this.data.otherConfig)
        if(oConfig && oConfig.camId){
          this.camId = oConfig.camId
        }
      }
      console.log("8888888888",this.data)
      this.data = { ...this.data, roadName: '济菏高速' };
  
 
      getProduct(this.data.productId).then((data) => {
        this.data.brand = data.brand;
      });

   
  
      // const roadInfo = await getRoadInfoByStakeMark(this.data.stakeMark);
  
      // if (roadInfo) this.$set(this.data, "roadName", roadInfo.roadName);
    },
    methods: {
      check(arr){
        return checkPermi(arr);
      },
      
    getData() {
     
    },
      onControlClick(){
        if(this.data.deviceState==='1' && this.data.iotDeviceId){
          this.deviceControlVisible = true
        }
      },
      handleClickTabs() { },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .fatigue-wakes-up {
    position: absolute; /* 或 fixed，取决于你的需求 */
    z-index: 3000; /* 确保这个值足够高 */
    /* 其他样式 */
    }
  .FatigueWakesUp {
    width: 420px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
    // padding-bottom: 24px;
  
    .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>