gasInjection-project/src/views/vent/monitorManager/fanLocalMonitor/index.vue

<template>
  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
    <a-spin :spinning="loading" >
    </a-spin>
    <div id="fanLocal3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
    <div v-if="globalConfig?.simulatedPassword" id="fanLocal3DCSS" class="threejs-Object-CSS" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none;">
      <div style="z-index: -1; position: relative">
        <div class="elementTag" id="inputBox">
          <div class="elementContent">
            <p>风筒入口风速：{{ selectData.windSpeed1 ? selectData.windSpeed1 : '-' }}</p>
            <p>风筒入口瓦斯浓度 {{ selectData.gas1 ? selectData.gas1 : '-' }}</p>
          </div>
        </div>
        <div class="elementTag" id="outBox">
          <div class="elementContent elementContent-r">
            <p>迎头供风量：{{ selectData.windQuantity1 ? selectData.windQuantity2 : '-' }}</p>
            <p>迎头瓦斯浓度：{{ selectData.gas1 ? selectData.gas1 : '-' }}</p>
          </div>
        </div>
        <div class="elementTag" id="returnBox">
          <div class="elementContent">
            <p>回风流瓦斯浓度：{{ selectData.gas3 ? selectData.gas3 : '-' }}</p>
          </div>
        </div>
        <!-- <div class="elementTag" id="gateBox">
          <div class="elementContent">
            <p>风门状态：关</p>
            <p>风门过风面积：{{ selectData.gas1 ? selectData.gas1 : '-' }}</p>
          </div>
        </div>
        <div  class="elementTag" id="windownBox">
          <div class="elementContent">
            <p>风窗全风压回风流：0</p>
          </div>
        </div> -->
      </div>
    </div>
  </div>
  
  <div class="scene-box">
    <div class="top-box" v-if="!loading">
      <div class="top-center row">
        <div class="vent-flex-row" id="fanLocalSelectDom" v-if="getDictItemsByCode('fanlocaltype') && !globalConfig?.simulatedPassword">
          <span style="color: #00f5fe; margin-left: 5px;">风机类型：</span>
          <JDictSelectTag v-model:value="devicekide" dictCode="fanlocaltype" :showChooseOption="false" :getPopupContainer="getPopupContainer" @change="changeDeviceKind" />
        </div>
        <!-- fanlocal_systeml_zj 模拟局部风机，不显示操作按钮 -->
        <div v-if="selectData.deviceType != 'fanlocal_systeml_zj'" class="button-box" v-for="(item, index) in modalTypeArr.leftBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div>
      </div>
      <div class="top-right row">
        <div class="button-box" v-for="(item, index) in modalTypeArr.rightBtnArr" :key="index" @click="showModal(item)">{{ item.value }}</div>
      </div>
    </div>
    <div class="title-text">
      {{ selectData.stationname }}
    </div>
    <div class="data-show-box" v-if="!loading">
      <div class="data-item" v-if="leftColumns.length > 0">
        <div class="item-header">环境监测</div>
        <div class="item-container">
          <div class="tab">
            <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"
              >1#风机</div
            >
            <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }" @click="selectDevice('dataMonitorRowIndex', 1)"
              >2#风机</div
            >
          </div>
          <div class="container-group container-group-l" >
            <template v-if="!loading">
              <div class="container-item" v-for="(data, index) in leftColumns" :key="index">
                <div class="item-icon">
                  <SvgIcon class="icon-style" size="18" name="temperature" />
                </div>
                <div class="item-name">{{ data.title }}</div>
                <div v-if="data.dataIndex.startsWith('Fan')">
                  <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
                    selectData[data.dataIndex.replace('Fan', 'Fan1')] ? selectData[data.dataIndex.replace('Fan', 'Fan1')] : '-'
                  }}</div>
                  <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
                    selectData[data.dataIndex.replace('Fan', 'Fan2')] ? selectData[data.dataIndex.replace('Fan', 'Fan2')] : '-'
                  }}</div>
                </div>
                <div v-else>
                  <div class="item-value">{{ selectData[data.dataIndex] ? selectData[data.dataIndex] : '-' }}</div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="data-item" v-if="rightColumns.length > 0">
        <div class="item-header">设备状态</div>
        <div class="item-container">
          <div class="tab">
            <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
              >1#风机</div
            >
            <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 1 }" @click="selectDevice('warningMonitorRowIndex', 1)"
              >2#风机</div
            >
          </div>
          <div class="container-group">
            <div class="warning-header">
              <div class="header-item">
                <div class="header-title">报警总数</div>
                <div class="header-value">0</div>
              </div>
              <div class="header-item">
                <div class="header-title"> 未处理数</div>
                <div class="header-value">0</div>
              </div>
            </div>
            <div class="warning-group">
              <template v-if="selectData.deviceType">
                <div class="warning-item" v-for="(state, index) in rightColumns" :key="index">
                  <div class="item-name"><div class="icon"></div> {{ state.title }}</div>
                  <div v-if="state.dataIndex.startsWith('Fan')">
                    <div class="signal-item" v-if="warningMonitorRowIndex == 0">
                      <div
                        class="signal-round"
                        :class="{
                          'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan1')],
                          'signal-round-warning':
                            selectData[state.dataIndex.replace('Fan', 'Fan1')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan1')],
                          'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined,
                        }"
                      ></div>
                      <div class="vent-margin-l-8">{{
                        selectData[state.dataIndex.replace('Fan', 'Fan1')] === undefined
                        ? '无状态'
                        : selectData[state.dataIndex.replace('Fan', 'Fan1')]
                          ? '正常'
                          : '异常'
                      }}</div>
                    </div>
                    <div class="signal-item" v-if="warningMonitorRowIndex == 1">
                      <div
                        class="signal-round"
                        :class="{
                          'signal-round-run': selectData[state.dataIndex.replace('Fan', 'Fan2')],
                          'signal-round-warning':
                            selectData[state.dataIndex.replace('Fan', 'Fan2')] !== undefined && !selectData[state.dataIndex.replace('Fan', 'Fan2')],
                          'signal-round-gry': selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined,
                        }"
                      ></div>
                      <div class="vent-margin-l-8">{{
                        selectData[state.dataIndex.replace('Fan', 'Fan2')] === undefined
                        ? '无状态'
                        : selectData[state.dataIndex.replace('Fan', 'Fan2')]
                          ? '正常'
                          : '异常'
                      }}</div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="signal-item">
                      <div
                        class="signal-round vent-margin-l-8"
                        :class="{
                                'signal-round-run': selectData[state.dataIndex],
                                'signal-round-warning': selectData[state.dataIndex] !== undefined && !selectData[state.dataIndex],
                                'signal-round-gry': selectData[state.dataIndex] === undefined,
                              }"
                      ></div>
                      <div class="vent-margin-l-8">{{ selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] ? '正常' : '异常' }}</div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 170, scroll, 180)">
      <dv-border-box8 :dur="5" class="dv_border_8"  :style="`bottom: 20px; padding: 5px; height: ${scroll.y + 140}px`" >
        <!-- <div class="enter-detail" @click="goDetail()">
          <send-outlined class=""/>风机运行详情
        </div> -->
        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="1" tab="实时监测">
            <GroupMonitorTable  v-if="activeKey === '1'" ref="MonitorDataTable" :dataSource="dataSource" :columnsType="`${selectData.deviceType}_monitor`" @selectRow="getSelectRow" :scroll="scroll"/>
          </a-tab-pane>
          <a-tab-pane key="2" tab="实时曲线图" force-render>
            <div class="tab-item" v-if="activeKey === '2'">
              <div class="vent-flex-row-between" style="height: 100%">
                <BarSingle
                  :xAxisData="[
                    { key: 'T1', valueKey: 'gas1' },
                    { key: 'T2', valueKey: 'gas2' },
                    { key: 'T3', valueKey: 'gas3' },
                    { key: 'T4', valueKey: 'gas4' },
                  ]"
                  :dataSource="dataSource[selectRowIndex]"
                  height="100%"
                  :chartsColumns="chartsColumns"
                  style="flex: 3"
                />
                <BarSingle
                  :xAxisData="[
                    { key: 'F1', valueKey: 'windQuantity1' },
                    { key: 'F2', valueKey: 'windQuantity2' },
                  ]"
                  :dataSource="dataSource[selectRowIndex]"
                  height="100%"
                  :chartsColumns="chartsColumns1"
                  style="flex: 2"
                />
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="历史数据">
            <div class="tab-item" v-if="activeKey === '3'">
              <HistoryTable :columns-type="`${selectData.deviceType}`" :device-type="`${devicekide}`" :device-list-api="baseList" designScope="fanlocal-history" :scroll="scroll" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="报警历史">
            <div class="tab-item" v-if="activeKey === '4'">
              <AlarmHistoryTable columns-type="alarm" :device-type="`${devicekide}`" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="5" tab="操作历史">
            <div class="tab-item" v-if="activeKey === '5'">
              <HandlerHistoryTable columns-type="operator_history" :device-type="`${devicekide}`" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
            </div>
          </a-tab-pane>
        </a-tabs>
      </dv-border-box8>
    </div>
  </div>
  <div style="z-index: -1; position: absolute; top: 50px; right: 10px; width: 300px; height: 280px; margin: auto" class="player1">
    <LivePlayer id="jb-player1" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
  </div>
  <a-modal v-model:visible="modalIsShow" :title="modalTitle" @ok="handleOk">
    <div class="modal-container">
      <div class="vent-flex-row">
        <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
        <div class="warning-text">您是否要进行{{ modalTitle }}操作？</div>
      </div>
      <div class="" v-if="modalType == 'startSmoke'">
        <div class="startSmoke-select">
          <div class="label">1#风机：</div>
          <a-radio-group v-model:value="mainWindIsShow1" @change="changeMotor" name="localWind1">
            <a-radio value="open">开启</a-radio>
            <a-radio value="stop">停止</a-radio>
          </a-radio-group>
        </div>
        <div class="startSmoke-select">
          <div class="label">2#风机：</div>
          <a-radio-group v-model:value="mainWindIsShow2" @change="changeMotor" name="localWind2">
            <a-radio value="open">开启</a-radio>
            <a-radio value="stop">停止</a-radio>
          </a-radio-group>
        </div>
      </div>
      <!-- 调频 -->
      <!-- <div class="vent-flex-row input-box" v-if="modalType == 'Fan1Frequency'">
        <div class="label">主风机运行频率（Hz）：</div>
        <a-input-number size="small" v-model:value="fan1FrequencyVal" :min="30" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="modalType == 'Fan2Frequency'">
        <div class="label">备风机运行频率（Hz）：</div>
        <a-input-number size="small" v-model:value="fan2FrequencyVal" :min="30" :max="50" :step="0.1" />
      </div> -->
      <!-- <div class="vent-flex-row input-box" v-if="modalType == 'needAir'">
        <div class="label">需风量（单位）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="30" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="modalType == 'disAirAlarm'">
        <div class="label">漏风率（%）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="modalType == 'diameter'">
        <div class="label">风筒直径（m）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="modalType == 'len'">
        <div class="label">风筒长度（m）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="modalType == 'windPowerLimit'">
        <div class="label">风电闭锁限值（m³/min）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <div class="vent-flex-row input-box" v-if="modalType == 'gasPowerLimit'">
        <div class="label">瓦斯电闭锁限值（m³/min）：</div>
        <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
      </div>
      <div v-if="modalType == 'gasAlarm'">
        <div class="vent-flex-row input-box">
          <div class="label">传感器名称：</div>
          <a-select placeholder="传感器" @change="handleChangeSensor" :options="sensorList" v-model:value="modalSensor" />
        </div>
        <div class="vent-flex-row input-box">
          <div class="label">传感器值：</div>
          <a-input-number size="small" v-model:value="frequencyVal" :min="0" :max="50" :step="0.1" />
        </div>
      </div>
      <div v-if="modalType == 'airVolumeAlarm'">
        <div class="vent-flex-row input-box">
          <div class="label">风量上限（m³/min）：</div>
          <a-input-number size="small" v-model:value="modalTypeArr.rightBtnArr[3].min" :min="0" :max="50" :step="0.1" />
        </div>
        <div class="vent-flex-row input-box">
          <div class="label">风量下限（m³/min）：</div>
          <a-input-number size="small" v-model:value="modalTypeArr.rightBtnArr[3].max" :min="0" :max="50" :step="0.1" />
        </div>
      </div> -->
      <!-- 启动或停止 -->
      <div class="" v-if="modalType == 'startSmoke'"> </div>
      <div v-if="!globalConfig?.simulatedPassword" class="vent-flex-row input-box">
        <div class="label">操作密码：</div>
        <a-input size="small" type="password" v-model:value="passWord" />
      </div>
    </div>
  </a-modal>
  <!-- <DetailModal @register="registerModal"/> -->
</template>

<script setup lang="ts">
  import { ExclamationCircleFilled } from '@ant-design/icons-vue';
  import { onBeforeMount, ref, watch, onMounted, nextTick, toRaw, reactive, onUnmounted, inject } from 'vue';
  import BarSingle from '../../../../components/chart/BarSingle.vue';
  import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
  import HistoryTable from '../comment/HistoryTable.vue';
  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  // import DetailModal from './components/DetailModal.vue';
  import { mountedThree, setModelType, destroy, addCssText, addText, playSmoke } from './fanLocal.three';
  import lodash from 'lodash';
  import { getTableList, list } from '/@/views/vent/monitorManager/fanLocalMonitor/fanLocal.api';
  import { list as baseList } from '../../deviceManager/fanTabel/fan.api';
  import { chartsColumns, chartsColumns1 } from './fanLocal.data';
  import { deviceControlApi } from '/@/api/vent/index';
  import LivePlayer from '@liveqing/liveplayer-v3';
  import { setDivHeight } from '/@/utils/event';
  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { SvgIcon } from '/@/components/Icon';
  import { useRouter } from 'vue-router';
  import { useModal } from '/@/components/Modal';
  import type { BasicColumn } from '/@/components/Table/src/types/table';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import { getPopupContainer } from '/@/utils';
  import { getDictItemsByCode } from '/@/utils/dict';
  import { message } from 'ant-design-vue';

  const globalConfig = inject('globalConfig');

  const [registerModal, { openModal, closeModal }] = useModal();
  const { currentRoute } = useRouter();

  const modalTypeArr = reactive(
    VENT_PARAM['simulatedPassword'] ? 
    {
      leftBtnArr: [
        {
          key: 'startSmoke',
          value: '启动风机',
        },
        {
          key: 'changeSmoke',
          value: '一键倒机',
        },
        // {
        //   key: 'Fan1Frequency',
        //   value: '主机调频',
        // },
        // {
        //   key: 'Fan2Frequency',
        //   value: '备机调频',
        // },
        {
          key: 'windPower',
          value: '风电闭锁',
        },
        {
          key: 'gasPower',
          value: '瓦斯电闭锁',
        },
        {
          key: 'needAir',
          value: '需风量',
        },
        {
          key: 'diameter',
          value: '风筒直径',
        },
        {
          key: 'len',
          value: '风筒长度',
        },
      ],
      rightBtnArr: [
        // {
        //   key: 'fanlocal',
        //   value: '变频风机',
        // },
        // {
        //   key: 'fanlocaldp',
        //   value: '定频风机',
        // },
        {
          key: 'frequency',
          value: '调频',
        },
        {
          key: 'windPowerLimit',
          value: '风电闭锁限值',
        },
        {
          key: 'gasPowerLimit',
          value: '瓦斯电闭锁限值',
        },
        {
          key: 'airVolumeAlarm',
          value: '风量报警',
          min: 0,
          max: 100,
        },
        {
          key: 'disAirAlarm',
          value: '漏风率报警',
        },
        {
          key: 'gasAlarm',
          value: '瓦斯报警',
        },
      ],
    }: {
      leftBtnArr: [
        {
          key: 'startSmoke',
          value: '启动风机',
        },
        {
          key: 'changeSmoke',
          value: '一键倒机',
        },
      ],
      rightBtnArr: [
      ],
    });
  const sensorList = ref<any[]>([
    {
      value: '1',
      label: 'T1',
    },
    {
      value: '2',
      label: 'T2',
    },
    {
      value: '3',
      label: 'T3',
    },
  ]);

  const scroll = reactive({
    y: 180
  })
  const MonitorDataTable = ref()
  const modalSensor = ref(null);
  const loading = ref(false);
  const activeKey = ref('1');
  const player1 = ref();
  const modalIsShow = ref<boolean>(false); // 是否显示模态框
  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
  const fan1FrequencyVal = ref(40); //主机频率
  const fan2FrequencyVal = ref(40); //备机频率
  const mainWindIsShow1 = ref('open'); // 1#风机默认启动leftColumns
  const mainWindIsShow2 = ref('stop'); // 2#风机默认不启动
  const passWord = ref('');
  // 默认初始是第一行
  const selectRowIndex = ref(-1);
  const dataMonitorRowIndex = ref(0);
  // 默认数据右边监测的是1#风机
  const warningMonitorRowIndex = ref(0);


  // 设备数据
  const controlType = ref(1);
  const modalType = ref('fm');
  // 监测数据
  const initData = {
    deviceID: '',
    deviceType: '',
    strname: '',
    dataDh: '-', //压差
    dataDtestq: '-', //测试风量
    sourcePressure: '-', //气源压力
    dataDequivalarea: '-',
    netStatus: '0', //通信状态
    warnLevel_str: '',
    stationname: ''
  };
  const dataSource = ref([]);
  // 监测数据
  let selectData = reactive(lodash.cloneDeep(initData));
  const rightColumns = ref<BasicColumn[]>([])
  const leftColumns = ref<BasicColumn[]>([])
  const devicekide = ref('fanlocal')
  const deviceType = ref(selectData.deviceType)


  watch(deviceType , (type) => {
    rightColumns.value = getTableHeaderColumns(type + '_monitor_right') as []
    if(rightColumns.value && rightColumns.value.length < 1){
      rightColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_right') as []
    }
    leftColumns.value = getTableHeaderColumns(type + '_monitor_left') as []
    if (leftColumns.value && leftColumns.value.length < 1) {
      leftColumns.value = getTableHeaderColumns(type.split('_')[0] + '_monitor_left') as []
    }
  })

  const flvURL1 = () => {
    // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
    return ''
  };
   
  const changeDeviceKind = (e) => {
    devicekide.value = e
    loading.value = true
    selectRowIndex.value = -1
    nextTick( () => {
      // selectRowIndex.value = 0
      selectData = lodash.cloneDeep(initData)
      loading.value = false
      if(selectData.deviceID)MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
    })
  }

  const tabChange = (activeKeyVal) => {
    activeKey.value = activeKeyVal;
    // if (activeKeyVal == 1) {
    //   nextTick(() => {
    //     MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
    //   })
    // }
  };

  const selectDevice = (key, val) => {
    if (key === 'dataMonitorRowIndex') {
      dataMonitorRowIndex.value = val;
    } else {
      warningMonitorRowIndex.value = val;
    }
  };

  //详情
  function goDetail() {
    openModal()
  }
  //
  async function getDataSource(){
    const res = await list({ devicetype: devicekide.value, pagetype: 'normal' });
    if(res.msgTxt && res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist.length > 0){
      const dataArr = res.msgTxt[0].datalist || [];
      dataSource.value = [];
      dataArr.forEach((data) => {
        const readData = data.readData;
        data = Object.assign(data, readData);
        dataSource.value.push(data);
      });
      if (MonitorDataTable.value && selectRowIndex.value == -1) {
        MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']])
      }
      const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
      return data;
    }else{
      return dataSource.value = []
    }
  };

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  async function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = await setTimeout(async () => {
        await getDataSource();
        if (dataSource.value.length > 0 && selectRowIndex.value == -1 && MonitorDataTable.value) {
          // 初始打开页面
          if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
            MonitorDataTable.value.setSelectedRowKeys(currentRoute.value['query']['id'])
          }else{
            MonitorDataTable.value.setSelectedRowKeys(dataSource.value[0]['deviceID'])
          }
        }
        selectData = Object.assign(deviceBaseList.value, lodash.cloneDeep(initData)) 
    
        if(dataSource.value.length > 0 && dataSource.value[selectRowIndex.value] ){
          Object.assign(selectData, dataSource.value[selectRowIndex.value])
          deviceType.value = selectData['deviceType']
          addText(selectData);
          // playAnimation(data, selectData.maxarea);
          playSmoke(selectData)
        }else{
          // lodash.omit(selectData, lodash.keys(selectData))
          Object.assign(selectData, initData)
          deviceType.value = ''
        }
        
        if (timer) {
          timer = null;
        }
        getMonitor();
      }, flag ? 0 :1000);
    }
  };

  // 获取设备基本信息列表
  const deviceBaseList = ref([]);
  function getDeviceBaseList() {
    getTableList({ pageSize: 1000 }).then((res) => {
      deviceBaseList.value = res.records;
    });
  };

  // 切换检测数据
  function getSelectRow(id) {
    console.log('选中的设备id------->', id)

    if (!id) return;
    loading.value = true;
    const baseDataIndex: any = dataSource.value.findIndex((baseData: any) => baseData.deviceID == id);
    selectRowIndex.value = baseDataIndex;
    modalType.value = baseDataIndex > 0 ? 'fm' : 'fc';
    nextTick(() => {
      setModelType(modalType.value).then(() => {
        loading.value = false;
      });
      const data = dataSource.value[baseDataIndex];
      if (data['Fan1StartStatus'] == 1) {
        mainWindIsShow1.value = 'open';
        mainWindIsShow2.value = 'stop';
      } else if (data['Fan2StartStatus'] == 1) {
        mainWindIsShow2.value = 'open';
        mainWindIsShow1.value = 'stop';
      }
    })
    
    // addCssText();
    return;
  };

  // 打开并设置modal的标题
  function showModal(obj) {
    modalType.value = obj.key;
    modalTitle.value = obj.value;
    passWord.value = '';
    modalIsShow.value = true;
  };

  function changeMotor(e){
    const target = e.target;
    if (target.name === 'localWind1') {
      if (target.value === 'open') {
        mainWindIsShow2.value = 'stop';
      }
    } else if (target.name === 'localWind2') {
      if (target.value === 'open') {
        mainWindIsShow1.value = 'stop';
      }
    }
  };

  function handleOk(e: MouseEvent) {
    const handType = modalType.value;
    const data = {
      deviceid: selectData.deviceID,
      devicetype: selectData.deviceType,
      paramcode: '',
      password: passWord.value,
      value: null,
    };
    if (handType === 'startSmoke') {
      // 启动风机
      if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
        // playSmoke(handType, 'top', frequency, 'open');
        data.paramcode = 'CtrlFan1Start';
        deviceControlApi(data).then(() => {
          if (globalConfig.History_Type == 'remote') {
            message.success('指令已下发至生产管控平台成功！')
          } else {
            message.success('指令已下发成功！')
          }
          modalTitle.value = '';
          modalIsShow.value = false;
        }).catch((err) => {

        });
      } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
        // playSmoke(handType, 'down', frequency, 'open');
        data.paramcode = 'CtrlFan2Start';
        deviceControlApi(data).then(() => {
          if (globalConfig.History_Type == 'remote') {
            message.success('指令已下发至生产管控平台成功！')
          } else {
            message.success('指令已下发成功！')
          }
          modalTitle.value = '';
          modalIsShow.value = false;
        }).catch((err) => {

        });
      } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
        // playSmoke(handType, '', frequency, 'stop');
      }
    } else if (handType === 'Fan1Frequency' || handType === 'Fan2Frequency') {
      // 调频
      if (handType === 'Fan1Frequency') {
        data.paramcode = 'Fan1FreqHz';
        data.value = fan1FrequencyVal.value;
      } else if (handType === 'Fan2Frequency') {
        data.paramcode = 'Fan2FreqHz';
        data.value = fan2FrequencyVal.value;
      }
      
      deviceControlApi(data).then((res) => {
        if (globalConfig.History_Type == 'remote') {
          message.success('指令已下发至生产管控平台成功！')
        } else {
          message.success('指令已下发成功！')
        }
        modalTitle.value = '';
        modalIsShow.value = false;
      }).catch((err) => {
   
      });
    } else if (handType === 'changeSmoke') {
      if(selectData['Fan1StartStatus'] == 0 || !selectData['Fan1StartStatus']){
        data.paramcode = 'CtrlFan1Start';
        deviceControlApi(data).then((res) => {
          if (globalConfig.History_Type == 'remote') {
            message.success('指令已下发至生产管控平台成功！')
          } else {
            message.success('指令已下发成功！')
          }
          modalTitle.value = '';
          modalIsShow.value = false;
          mainWindIsShow1.value = 'stop';
          mainWindIsShow2.value = 'open';
        }).catch((err) => {

        });
        
      }else if(selectData['Fan2StartStatus'] == 0 || !selectData['Fan2StartStatus']){
        data.paramcode = 'CtrlFan2Start';
        deviceControlApi(data).then((res) => {
          if (globalConfig.History_Type == 'remote') {
            message.success('指令已下发至生产管控平台成功！')
          } else {
            message.success('指令已下发成功！')
          }
          modalTitle.value = '';
          modalIsShow.value = false;
          mainWindIsShow1.value = 'open';
          mainWindIsShow2.value = 'stop';
        }).catch((err) => {

        });
        
      }
      // // 一键倒机
      // if (mainWindIsShow1.value === 'open' && mainWindIsShow2.value === 'stop') {
      //   // playSmoke('startSmoke', 'down', frequency, 'open');
      //   data.paramcode = 'CtrlFan2Start';
      //   deviceControlApi(data).then((res) => {
      //     console.log('设备操作结果', res);
      //     modalTitle.value = '';
      //     modalIsShow.value = false;
      //   }).catch((err) => {

      //   });
      //   mainWindIsShow1.value = 'stop';
      //   mainWindIsShow2.value = 'open';
      // } else if (mainWindIsShow2.value === 'open' && mainWindIsShow1.value === 'stop') {
      //   // playSmoke('startSmoke', 'top', frequency, 'open');
      //   data.paramcode = 'CtrlFan1Start';
      //   deviceControlApi(data).then((res) => {
      //     console.log('设备操作结果', res);
      //     modalTitle.value = '';
      //     modalIsShow.value = false;
      //   }).catch((err) => {

      //   });
      //   mainWindIsShow1.value = 'open';
      //   mainWindIsShow2.value = 'stop';
      // } else if (mainWindIsShow1.value === 'stop' && mainWindIsShow2.value === 'stop') {
      //   // playSmoke(handType, '', frequency, 'stop');
      // }
    }
    
  };

  function handleChangeSensor(value: string){
    console.log(value);
  };

  function addPlayVideo() {
    if (player1.value && player1.value.play) {
      if (!player1.value.paused()) player1.value.play();
      document.body.removeEventListener('mousedown', addPlayVideo);
    }
  };


  onBeforeMount(() => {
    getDeviceBaseList();
  });

  onMounted(() => {
    
    mountedThree(player1.value).then(() => {
      nextTick(async() => {
        await getMonitor(true);
        
        addCssText();
        // playSmoke('startSmoke', 'top', frequencyVal.value, 'open');
      });
    });
    document.body.addEventListener('mousedown', addPlayVideo, false);
  });

  onUnmounted(() => {
    destroy();
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style scoped lang="less">
  @import '/@/design/vent/modal.less';
  :deep(.@{ventSpace}-tabs-tabpane-active) {
    height: 100%;
  }
  .scene-box {
    .title-text{
      height: 32px;
    }
    .bottom-tabs-box{
      height: 280px;
      .tabs-box{
        position: relative !important;
      }
    }
  }
 
  .data-show-box {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 5px;
    color: #ffffff;
    z-index: 999;
    top: 60px;
    .data-item {
      pointer-events: auto;
      .item-header {
        width: 374px;
        background: url('/@/assets/images/vent/lr-top-bg.png') no-repeat;
        background-size: auto;
        height: 32px;
        text-align: center;
        line-height: 34px;
        font-size: 15px;
        font-weight: 600;
        color: #fafafa;
      }
      .item-container {
        width: 346px;
        margin: 0 14px;
        padding: 10px;
        background: #00377c33;
        backdrop-filter: blur(2px);
        .tab {
          width: 323px;
          background: url('/@/assets/images/vent/lr-tab-bg.png') no-repeat;
          display: flex;
          .tab-item {
            flex: 1;
            text-align: center;
            padding-top: 2px;
            color: #ffffff99;
            cursor: pointer;
            &:hover {
              color: #ffffff;
            }
          }
          .tab-item-active-l {
            color: #ffffff;
            background-image: url('/@/assets/images/vent/l-tab-active.png');
            background-repeat: no-repeat;
            background-size: auto;
            background-position: 6px 3px;
          }
          .tab-item-active-r {
            color: #ffffff;
            background-image: url('/@/assets/images/vent/r-tab-active.png');
            background-repeat: no-repeat;
            background-position: 0 3px;
          }
        }
        .container-group {
          width: 314px;
          margin: 0px 4px;
          padding: 10px 0;
          min-height: 432px;
          background: linear-gradient(to right, #00deff22, #2081ff05);
          max-height: 440px;
          overflow-y: auto;
        }
        .container-group-l {
          .container-item {
            width: 100%;
            height: 60px;
            display: flex;
            padding: 10px 0 0 20px;
            margin-bottom: 5px;
            position: relative;
            background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
            background-size: auto;
            background-position: bottom;
            &::before {
              content: '';
              display: block;
              width: 100%;
              height: 5px;
              position: absolute;
              top: 62px;
              left: 0;
              background-color: #73f4ff66;
              backdrop-filter: blur(5px);
            }
            .item-icon {
              width: 54px;
              height: 45px;
              background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
              background-size: cover;
              .icon-style {
                margin: 10px 0 0 18px;
              }
            }
            .item-name {
              width: 180px;
              line-height: 60px;
            }
            .item-value {
              position: relative;
              height: 26px;
              line-height: 24px;
              margin: 15px 0;
              text-align: center;
              width: 80px;
              border: 1px solid #00f5fe;
              border-radius: 13px;
              background: linear-gradient(to right, #00f5fe44, #0090ff44);
              &::before {
                width: 6px;
                height: 6px;
                content: '';
                position: absolute;
                left: -3px;
                top: 8px;
                background: #ffa500;
                border-radius: 3px;
              }
            }
          }
        }
        .warning-header {
          display: flex;
          font-size: 14px;
          .header-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin: 5px 10px;
            justify-content: center;
            align-items: center;
            .header-title {
              color: #39e7fe;
            }
            .header-value {
              width: 133px;
              height: 56px;
              font-weight: 600;
              font-family: 'douyuFont';
              font-size: 16px;
              color: #ffa500;
              display: flex;
              justify-content: center;
              align-items: center;
              background: url('/@/assets/images/vent/count-header-bg.png') no-repeat;
            }
          }
        }
        .warning-group {
          padding: 0 10px;
          position: relative;
          &::before {
            content: '';
            display: block;
            width: 1px;
            height: 100%;
            position: absolute;
            left: 12px;
            background-color: #00f5fe;
          }
          .warning-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 38px;
            .item-name {
              .icon {
                width: 6px;
                height: 6px;
                display: inline-block;
                background-color: #1cd5ff;
                border-radius: 3px;
                position: relative;
                margin-right: 5px;
                &::before {
                  content: '';
                  width: 10px;
                  height: 10px;
                  display: block;
                  border: 1px solid #34edff99;
                  border-radius: 5px;
                  position: absolute;
                  top: -2px;
                  left: -2px;
                }
              }
            }
          }
        }
      }
    }
  }
  .input-box {
    display: flex;
    align-items: center;
    .input-title {
      color: #73e8fe;
      width: auto;
    }
    margin-right: 10px;
  }
  .label {
    max-width: 220px;
  }
  #fanLocalSelectDom{
    :deep(.@{ventSpace}-select-dropdown){
      left: 0px !important;
      top: 35px !important;
    }
  }
  .@{ventSpace}-input {
    width: 150px;
  }
</style>