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

<template>
    <Dialog v-model="visibleModel"
     title="护栏碰撞弹窗" width="600px" style="z-index:3000">
      <Video class="video-stream" :camId="camId" img="护栏碰撞预警系统" />
  
      <div class="GuardrailCollision">
        <ElTabs v-model="activeName" class="tabs">
          <ElTabPane label="基本信息" name="first">
            <Descriptions :list="list" :data="data" style="gap: 18px" />
             <div class="jsdcontrol" v-hasPermi="['business:home:guardrailCollision']">
                <span style="
                      color: #3de8ff;
                      font-size: 12px;
                      font-family: PingFang SC, PingFang SC;
                      font-weight: 400;
                      line-height: 25px;
                    ">
                  警示灯:
                </span>
                <Button style="margin-left: 5px" @click.native="controlClick(30)">开</Button>
                <Button style="margin-left: 5px" @click.native="controlClick(31)">关</Button>
                <Button style="margin-left: 5px" @click.native="controlClick(34)">退出</Button>
              </div>
          </ElTabPane>
  
          <ElTabPane label="在线率统计" name="third">
            <LineChart v-if="activeName === 'third'" :productId="dialogData.id" />
          </ElTabPane>
        </ElTabs>
      </div>
    </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 Switcher from "@screen/pages/service/PublishingChannelManagement/components/Switcher.vue";

  import { dialogDelayVisible } from "../Dialogs/mixin.js";
  import request from "@/utils/request";
  
  import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
  
  // 广播发布
  export default {
    name: "GuardrailCollision",
    mixins: [dialogDelayVisible],
    components: {
      Dialog,
      Button,
      Descriptions,
      LineChart,
      Video,
      Switcher,
      RadioGroup,
    },
    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,
        secondLoading: true,
        data: {
          deviceName: "LH24",
          roadName: "济菏高速",
          stakeMark: "k094+079",
          direction: "1",
          organizationName: "山东高速济南发展公司",
          brand: "XXX厂家",
          deviceState: "0",
        },
  
        roadTypeList: [
          { key: "1", label: "菏泽方向" },
          { key: "3", label: "济南方向" },
        ],
        roadType: "1",
        list: [
          {
            label: "设备名称",
            key: "deviceName",
          },
          {
            label: "设备桩号",
            key: "stakeMark",
          },
          {
            label: "道路名称",
            key: "roadName",
          },
          {
            label: "设备方向",
            key: "direction",
            enum: "CameraDirectionEnum",
          },
          {
            label: "设备状态",
            key: "deviceState",
            enum: "DeviceTypeEnum",
          },
          // {
          //   label: '设备厂商',
          //   key: "brand",
          // },
        ],
        activeOption: {
          active: {
            text: "开",
          },
          unActive: {
            text: "关",
          },
        },
        devicesList: [],
        camId:null
      };
    },
    async created() {
      // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
  
        // 修改camid  
        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: '济菏高速' };
      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() {
     
       },
      controlClick(id){
        request({
          url: `/business/device/functions/${this.dialogData.iotDeviceId}/A3`,
          method: "POST",
          data: {
           function:id
          }
        }).then(res=>{
          if (result.code != 200) {
            this.$message.error(result.msg);
            return;
          };
          this.$message.success('设备请求完成')
        })
      }
    }
  };
  </script>
  
  <style lang="scss">
  div.switcher {
    font-size: 12px;
    padding: 2px;
  }
  </style>
  <style lang="scss" scoped>
  .GuardrailCollision {
    width: 510px;
    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%;
          }
        }
      }
    }
  
    .content-second {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      gap: 9px;
    }
  
    .bottom {
      margin-top: 12px;
      display: flex;
      gap: 9px;
      align-items: center;
      justify-content: end;
  
      > div {
        font-size: 16px;
        padding: 6px 12px;
      }
    }
  }
  .jsdcontrol{
    display:flex;
    margin-top:20px;
    align-content: center;
  }
  </style>