FE-V2-PC/src/views/emergencyManagement/smartLoT/hardware/index.vue

<!--硬件管理-->
<template>
  <div class="app-container hardware">
    <div class="top-max-box">
      <div class="for-max-box" :class="pageType==VIDEO_MONITOR?'for-max-box-one':'for-max-box-two'" @click="pageClick(VIDEO_MONITOR)">
        <div class="for-top-box">
          <img src="@/assets/ZDimages/icon_1.png" v-if="pageType!=VIDEO_MONITOR">
          <img src="@/assets/ZDimages/icon_2.png" v-if="pageType==VIDEO_MONITOR">
          <p>视频监控</p>
        </div>
        <div class="for-bottom-box-one">
          <p>在线：{{newData.videoOnline}}</p>
          <p>离线：{{newData.videoOffline}}</p>
        </div>
      </div>
      <div class="for-max-box" :class="pageType==SWITCH?'for-max-box-one':'for-max-box-two'" @click="pageClick(SWITCH)">
        <div class="for-top-box">
          <img src="@/assets/ZDimages/icon_3.png" v-if="pageType!=SWITCH">
          <img src="@/assets/ZDimages/icon_4.png" v-if="pageType==SWITCH">
          <p>电源控制</p>
        </div>
        <div class="for-bottom-box-two">
          <p>开启：{{newData.powerSupplyOnline}}</p>
          <p>关闭：{{newData.powerSupplyPowerUps}}</p>
          <p>离线：{{newData.powerSupplyOffline}}</p>
        </div>
      </div>
      <div class="for-max-box" :class="pageType==AI_VENTILATION?'for-max-box-one':'for-max-box-two'" @click="pageClick(AI_VENTILATION)">
        <div class="for-top-box">
          <img src="@/assets/ZDimages/icon_5.png" v-if="pageType!=AI_VENTILATION">
          <img src="@/assets/ZDimages/icon_6.png" v-if="pageType==AI_VENTILATION">
          <p>智能通风</p>
        </div>
        <div class="for-bottom-box-two">
          <p>开启：{{newData.ventilationOnline}}</p>
          <p>关闭：{{newData.ventilationPowerUps}}</p>
          <p>离线：{{newData.ventilationOffline}}</p>
        </div>
      </div>
      <div class="for-max-box" :class="pageType==ONE_MACHINE?'for-max-box-one':'for-max-box-two'" @click="pageClick(ONE_MACHINE)">
        <div class="for-top-box">
          <img src="@/assets/ZDimages/icon_7.png" v-if="pageType!=ONE_MACHINE">
          <img src="@/assets/ZDimages/icon_8.png" v-if="pageType==ONE_MACHINE">
          <p>智能一体机</p>
        </div>
        <div class="for-bottom-box-one">
          <p>在线：{{newData.smartMachineOnline}}</p>
          <p>离线：{{newData.smartMachineOffline}}</p>
        </div>
      </div>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" class="form-box" style="height:40px;padding:0 20px;">

      <el-form-item label="学院" prop="deptId">
        <el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable @change="handleNodeClick">
          <el-option
            v-for="dict in deptOptions"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="实验室" prop="subjectId">
        <el-select v-model="queryParams.subjectId" clearable placeholder="请选择实验室">
          <el-option
            v-for="item in subjectOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="operate">
        <el-select v-model="queryParams.operate" placeholder="请选择状态" clearable size="small">
          <el-option label="在线" value="ONLINE" />
          <el-option label="离线" value="OFFLINE" />
          <el-option label="开启" value="OPEN" />
          <el-option label="关闭" value="CLOSE" />
        </el-select>
      </el-form-item>
      <el-form-item style="float: right;">
        <el-col :span="1.5">
          <p class="add-button-one-120"
             @click="handleAdd"
             v-hasPermi="['laboratory:hardware:add']"
          ><i class="el-icon-plus"></i>新增硬件</p>
        </el-col>
      </el-form-item>
      <el-form-item>
        <p class="inquire-button-one" @click="handleQuery">查询</p>
        <p class="reset-button-one" @click="resetQuery">重置</p>
      </el-form-item>
    </el-form>
    <video-surveillance ref="surveillance" v-if="pageType==VIDEO_MONITOR" :pageType="pageType" :queryParams="queryParams"></video-surveillance>
    <power-control ref="power" v-if="pageType==SWITCH" :pageType="pageType" :queryParams="queryParams"></power-control>
    <smart-ventilation ref="smart" v-if="pageType==AI_VENTILATION" :pageType="pageType" :queryParams="queryParams"></smart-ventilation>
    <smart-machine ref="machine" v-if="pageType==ONE_MACHINE" :pageType="pageType" :queryParams="queryParams"></smart-machine>
    <!--<voice-intercom v-if="pageType==5"></voice-intercom>-->
  </div>
</template>

<script>
  import mqtt from 'mqtt'
  import videoSurveillance from "./videoSurveillance.vue";
  import powerControl from "./powerControl.vue";
  import smartVentilation from "./smartVentilation.vue";
  import smartMachine from "./smartMachine.vue";
  // import voiceIntercom from "./voiceIntercom.vue";
  import { statisticsHardware } from "@/api/laboratory/hardware";
  import { listDepartments } from "@/api/system/dept";
  import { getSubjectDictByViolation } from '@/api/laboratory/violation'
  import { subjectDictList } from "@/api/laboratory/group";

/*

videoSurveillance
powerControl
smartVentilation
smartMachine
voiceIntercom

*/
export default {
  components: {
    videoSurveillance,
    powerControl,
    smartVentilation,
    smartMachine,
    // voiceIntercom
  },
  name: "Hardware",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 部门树选项
      deptOptions: [],
      subjectOptions:[],
      pageType:"VIDEO_MONITOR",
      VIDEO_MONITOR:"VIDEO_MONITOR",
      SWITCH:"SWITCH",
      AI_VENTILATION:"AI_VENTILATION",
      ONE_MACHINE:"ONE_MACHINE",
      newData:{},
      msg:"",
      client:{},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        name: null,
        factory: null,
        type: null,
        hardwareNum: null,
        subjectId: null,
        deptId: null,
        deptName: null,
        operate: null,
        userId: null,
        status: null
      },
    };
  },
  created() {
  },
  mounted(){
    this.getStatistics()
    this.getDeptList();
  },
  methods: {
    /** 查询学院列表 */
    getDeptList() {
      listDepartments().then(response => {
        this.$set(this, 'deptOptions', response.data)
      });
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data;
      // console.log("data",data);
      this.getSubjectDictList(data);
      // this.getList();
    },
    /** 查询实验室字典列表 */
    getSubjectDictList (deptId) {
      this.subjectOptions = null;
      this.loading = true;
      // this.queryParams.deptId = deptId;
      let params = {};
      params.deptId = deptId;
      this.queryParams.subjectId = "";
      getSubjectDictByViolation(params).then(response => {
        this.subjectOptions = response.data;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if(this.pageType == 'VIDEO_MONITOR'){
        this.$refs.surveillance.getList();
      }else if(this.pageType == 'SWITCH'){
        this.$refs.power.getList();
      }else if(this.pageType == 'AI_VENTILATION'){
        this.$refs.smart.getList();
      }else if(this.pageType == 'ONE_MACHINE'){
        this.$refs.machine.getList();
      }
      // this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.$set(this,'subjectOptions',[]);
      if(this.pageType == 'VIDEO_MONITOR'){
        this.$refs.surveillance.handleQuery();
      }else if(this.pageType == 'SWITCH'){
        this.$refs.power.handleQuery();
      }else if(this.pageType == 'AI_VENTILATION'){
        this.$refs.smart.handleQuery();
      }else if(this.pageType == 'ONE_MACHINE'){
        this.$refs.machine.handleQuery();
      }
      // this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {

      if(this.pageType == 'VIDEO_MONITOR'){
        this.$refs.surveillance.handleAdd();
      }else if(this.pageType == 'SWITCH'){
        this.$refs.power.handleAdd();
      }else if(this.pageType == 'AI_VENTILATION'){
        this.$refs.smart.handleAdd();
      }else if(this.pageType == 'ONE_MACHINE'){
        this.$refs.machine.handleAdd();
      }
    },
    /** 查询硬件统计 */
    getStatistics() {
      statisticsHardware().then(response => {
        this.newData = response.data;
      });
    },
    pageClick(type){
      if(this.pageType!=type){
        this.queryParams.pageNum = 1;
        this.pageType = type;
      }
    },
  },
};
</script>

<style scoped lang="scss">
  .hardware{
    display: flex!important;
    flex-direction: column;
    .top-max-box{
      display: flex;
      padding-right:20px;
      .for-max-box{
        cursor:pointer;
        /*width:379px;*/flex:1;
        height:130px;
        margin:9px 0 20px 20px;
        .for-top-box{
          display: flex;
          width:139px;
          height:34px;
          margin:19px auto 0;
          img{
            display: inline-block;
            width:34px;
            height:34px;
          }
          p{
            font-size:18px;
            margin: 0;
            line-height:34px;
            width:105px;
            text-align: center;
            color:#333;
          }
        }
        .for-bottom-box-one{
          display: flex;
          margin-top:18px;
          p{
            font-size:14px;
            margin:0;
            text-align: center;
            flex:1;
            line-height:59px;
            color:#666666;
          }
        }
        .for-bottom-box-two{
          display: flex;
          margin-top:18px;
          p{
            font-size:14px;
            margin:0;
            text-align: center;
            flex:1;
            line-height:59px;
            color:#666666;
          }
        }
      }
      .for-max-box-one{
        box-shadow: 0 5px 9px 0 rgba(0, 69, 175, 0.25);
        border-radius: 10px;
      }
      .for-max-box-two{
        box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
      }
    }
    /*display: flex!important;*/
    /*flex-direction: column;*/
    /*box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);*/
    /*padding:20px!important;*/
    /*margin:9px 20px 20px;*/
  }
</style>