gas-injection/src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

<template>
  <div class="scene-box" >
    <!-- <div class="top-header">智能通风管理系统</div> -->
    <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow, }"
      @click="showTree('treeShow', true)">
      <SvgIcon class="is-expansion-icon put-away-icon" size="38" name="expansion" />
      <span class="title">{{ treeNodeTitle }}</span>
    </div>
    <div class="device-select" :class="{ 'device-select-show': treeShow, 'device-select-hide': !treeShow, }">
      <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away"
        @click="showTree('treeShow', false)" />
      <div class="device-select-box">
        <a-tree :show-line="true" :tree-data="treeData" v-model:selectedKeys="selectedKeys" :autoExpandParent="true"
          v-model:expandedKeys="expandedKeys" @select="onSelect">
        </a-tree>
      </div>
    </div>
    <div class="location-icon"
      :class="{ 'location-btn-show': !locationSettingShow, 'location-btn-hide': locationSettingShow, }"
      @click="showTree('location', true)">
      <SvgIcon size="18" name="put-away" />
      <span class="location-text">定位图标显示</span>
    </div>
    <div class="location-select"
      :class="{ 'location-select-show': locationSettingShow, 'location-select-hide': !locationSettingShow, }">
      <div class="location-select-box">
        <div class="location-top-title" @click="showTree('location', false)">
          <SvgIcon class="is-expansion-icon location-expansion-icon" size="28" name="expansion" />
          <div class="title">定位图标显示</div>
        </div>
        <div class="location-container">
          <template v-for="location in locationList" :key="location.deviceType">
            <div class="location-item">
              <div class="item-title">{{ location.title }}&nbsp;:</div>
              <div>
                <a-radio-group v-model:value="location.Visible" :name="location.deviceType">
                  <a-radio :value="1">是</a-radio>
                  <a-radio :value="0">否</a-radio>
                </a-radio-group>
              </div>
            </div>
          </template>
          <div class="location-bottom-btn">
            <span @click="setLocation">提交</span>
          </div>
        </div>
      </div>
    </div>

    <div class="tabs-box bottom-tabs-box " style="height: 290px;" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
      <!-- <dv-border-box8 :dur="5"  :style="`padding: 5px; height: ${scroll.y + 100}px`" > -->
      <div :style="`padding: 5px; height: ${scroll.y + 100}px`">
        <div class="to-small" @click="toHome"></div>
        <div class="device-button-group" v-if="deviceList.length > 0">
          <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }"
            v-for="(device, index) in deviceList" :key="index" @click="monitorChange(index)">{{ device.deviceName }}
          </div>
          <div v-if="haveSysDetailArr.find((item) => deviceType.startsWith(item))" class="enter-detail"
            @click="goDetail()">
            <send-outlined />
            {{ treeNodeTitle }}详情
          </div>
        </div>
        <div v-else-if="deviceType == 'forcFan'">
          <div class="device-button-group">
            <div class="enter-detail" @click="goDetail()">
              <send-outlined />
              {{ treeNodeTitle }}详情
            </div>
          </div>
        </div>
        <div v-if="deviceType == 'gaspatrol'">
          <div class="device-button-group">
            <div class="enter-detail" @click="exportXls()">
              <send-outlined />
              导出
            </div>
          </div>
        </div>
        <!-- 是人员定位表单代码，由于放在tab中，表格对已知刷新，导致表单数据也在刷寻，造成输入一半的中文时会清空输入框的内容，导致的输入不上数据 -->
        <div v-if="deviceType.startsWith('location')" class="location-form" style="position: absolute; z-index: 9999; top: 50px;">
          <div class="location-form-item">
            <span class="location-form-label">人员名称:</span>
            <Input style="width: 200px;" v-model:value="locationForm.strname" />
          </div>
          <div class="location-form-item">
            <span class="location-form-label">所属部门:</span>
            <MTreeSelect style="width: 200px;" v-model:value="locationForm.department" placeholder="请选择所属部门" api="/ventanaly-device/getDepartmentInfo" :virtual="false" :isGetPopupContainer="false"/>
          </div>
          <div class="location-form-item">
            <span class="location-form-label">分站名称:</span>
            <Input style="width: 200px;" v-model:value="locationForm.stationname" />
          </div>
        </div>
        <div style="color: #fff;">{{ deviceType }}</div>
        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox">
          <a-tab-pane key="1" tab="实时监测">
            <template
              v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == '1'">
              <GroupMonitorTable ref="MonitorDataTable" :dataSource="dataSource" :columnsType="`${deviceType}_monitor`"
                :scroll="scroll" :isAction="true" :isShowSelect="false">
                <template #action="{ record }">
                  <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item)) ? [
                    {
                      label: '详情',
                      onClick: goDetail.bind(null, record),
                    },
                    {
                      label: '定位',
                      onClick: goLocation.bind(null, record),
                    },
                  ] : [
                    {
                      label: '定位',
                      onClick: goLocation.bind(null, record),
                    },
                  ]" />
                </template>
              </GroupMonitorTable>
            </template>
            <template v-else-if="deviceType == 'majorpath' && activeKey == '1'">
              <a-table :columns="majorColumns" :data-source="dataSource" bordered :scroll="{ y: scroll.y - 30 }"
                :pagination="false"></a-table>
            </template>
            <template v-else-if="deviceType.startsWith('safetymonitor') && activeKey == '1'">
              <!-- <div class="location-form">
                <div class="location-form-item">
                  <span class="location-form-label">设备类型:</span>
                  <Select style="width: 300px;" v-model:value="safetymonitorForm.dataTypeName" placeholder="请选择设备类型" :option="safetyOption" labelField="name" valueField="code"/>
                </div>
                <div class="location-form-item">
                  <span class="location-form-label">分站名称:</span>
                  <Input style="width: 200px;" v-model:value="safetymonitorForm.strinstallpos" />
                </div>
              </div> -->
              <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
                title="设备监测" :form-config="formConfig" :scroll="{ y: scroll.y - 110 }">
                <template #action="{ record }">
                  <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item)) ? [
                    {
                      label: '详情',
                      onClick: goDetail.bind(null, record),
                    },
                    {
                      label: '定位',
                      onClick: goLocation.bind(null, record),
                    },
                  ] : [
                    {
                      label: '定位',
                      onClick: goLocation.bind(null, record),
                    },
                  ]" />
                </template>
                <template #filterCell="{ column, record }">
                  <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
                  <div v-if="!record.V && column.dataIndex === 'V'">-</div>
                  <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
                  <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
                  <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
                  <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                    record.netStatus == '0' ? '断开' : '连接'
                    }}</a-tag>
                </template>
              </MonitorTable>
            </template>
            <template v-else-if="deviceType.startsWith('location') && activeKey == '1'">
              <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
                title="设备监测" :scroll="{ y: scroll.y - 110 }" style="margin-top: 60px;">
                <template #action="{ record }">
                  <TableAction :actions="[
                    {
                      label: '定位',
                      onClick: goLocation.bind(null, record),
                    },
                  ]" />
                </template>
              </MonitorTable>
            </template>
            <template v-else-if="deviceType.startsWith('vehicle') && activeKey == '1'">
              <MonitorTable ref="monitorTable" :columnsType="`${deviceType}_monitor`" :deviceType="deviceType"
                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
                title="设备监测" :form-config="vehicleFormConfig" :scroll="{ y: scroll.y - 110 }">
                <template #action="{ record }">
                  <TableAction :actions="[
                    {
                      label: '定位',
                      onClick: goLocation.bind(null, record),
                    },
                  ]" />
                </template>
              </MonitorTable>
            </template>
            <template v-else>
              <!-- 工作面echarts图标 -->
              <BarAndLine v-if="activeKey == '1' && deviceType == 'surface_history'" class="echarts-line"
                xAxisPropType="time" :dataSource="surfaceEchartsData" height="300px"
                :chartsColumns="surfaceChartsColumns" :option="echatsOption" chartsType="listMonitor" />
              <MonitorTable v-else-if="activeKey == '1'" ref="monitorTable" :columnsType="`${deviceType}_monitor`"
                :dataSource="dataSource" design-scope="device_monitor" :isShowActionColumn="true" :isShowSelect="false"
                title="设备监测" :scroll="{ y: scroll.y - 30 }">
                <template #action="{ record }">
                  <TableAction :actions="haveDetailArr.find((item) => deviceType.startsWith(item)) ? [
                    {
                      label: '详情',
                      onClick: goDetail.bind(null, record),
                    },
                    {
                      label: '定位',
                      onClick: goLocation.bind(null, record),
                    },
                  ] : [
                    {
                      label: '定位',
                      onClick: goLocation.bind(null, record),
                    },
                  ]" />

                </template>
                <template #filterCell="{ column, record }">
                  <template v-if="deviceType.startsWith('gate')">
                    <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
                      <a-tag
                        v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
                        color="red">正在打开</a-tag>
                      <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
                    </template>
                    <template v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
                      <a-tag
                        v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0"
                        color="red">正在关闭</a-tag>
                      <a-tag
                        v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
                        color="default">关闭</a-tag>
                      <a-tag
                        v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0"
                        color="default">打开</a-tag>
                    </template>
                    <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
                      <a-tag
                        v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
                        color="red">正在打开</a-tag>
                      <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
                    </template>
                    <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
                      <a-tag
                        v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0"
                        color="red">正在关闭</a-tag>
                      <a-tag
                        v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1"
                        color="default">关闭</a-tag>
                      <a-tag
                        v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0"
                        color="default">打开</a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'ndoortype'">
                      <span v-if="record.ndoortype == 0" color="red">行车风门</span>
                      <span v-else color="default">行人风门</span>
                    </template>
                  </template>
                  <template v-else-if="deviceType.startsWith('windrect')">
                    <a-tag v-if="column.dataIndex === 'sign'"
                      :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'"> {{
                        record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位'
                      }}</a-tag>
                    <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
                      <a-tag v-if="record.isRun == -2 || record.isRun == -1"
                        :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
                          record.isRun == -2 ? '空闲' : '等待'
                        }}</a-tag>
                      <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
                      <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
                    </template>
                  </template>
                  <template v-else-if="deviceType.startsWith('safetymonitor')">
                    <div v-if="!record.devicename && column.dataIndex === 'devicename'">-</div>
                    <div v-if="!record.V && column.dataIndex === 'V'">-</div>
                    <div v-if="!record.PointUnit && column.dataIndex === 'PointUnit'">-</div>
                    <div v-if="!record.highRange && column.dataIndex === 'highRange'">-</div>
                    <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
                    <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
                  </template>
                  <template v-else-if="deviceType.startsWith('atomizing')">
                    <a-tag
                        v-if="column.dataIndex === 'stateConn' && record.stateConn == '1'" color="green">连接</a-tag>
                    <a-tag
                        v-if="column.dataIndex === 'stateConn' && record.stateConn == '0'" color="red">断开</a-tag>
                  </template>
                  <a-tag v-if="column.dataIndex === 'warnFlag'"
                    :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'"> {{
                      record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
                    }}</a-tag>
                  <template v-else-if="column.dataIndex === 'warnLevel'">
                    <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '103'" color="#FF5812">较大风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '104'" color="#FF5812">重大风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '201'" color="#FF0000">报警</a-tag>
                    <a-tag v-else-if="record.warnLevel == '10000'" color="#FF5812">数据超限</a-tag>
                    <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
                    <a-tag v-else color="green">正常</a-tag>
                  </template>
                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                    record.netStatus == '0' ? '断开' : '连接'
                  }}</a-tag>
                </template>
              </MonitorTable>
            </template>
          </a-tab-pane>
          <a-tab-pane key="2" tab="历史数据" v-if="!(noHistoryArr()).find((item) => deviceType.startsWith(item))">
            <div class="tab-item">
              <HistoryTable ref="historyTable" v-if="activeKey == '2'" :sysId="systemID" :columns-type="`${deviceType}`"
                :device-type="deviceType" designScope="device-history" :scroll="scroll" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="报警历史" v-if="!noWarningArr.find((item) => deviceType.startsWith(item))">
            <div class="tab-item">
              <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" :sysId="systemID" columns-type="alarm"
                :device-type="deviceType"
                :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID, pageSize: 10000 })"
                :scroll="scroll" designScope="alarm-history" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="操作历史" v-if="haveHandlerArr.find((item) => deviceType.startsWith(item))">
            <div class="tab-item">
              <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID"
                columns-type="operator_history" :device-type="deviceType"
                :device-list-api="getDeviceList.bind(null, { devicekind: deviceType, sysId: systemID })"
                :scroll="scroll" designScope="operator-history" />
            </div>
          </a-tab-pane>
        </a-tabs>
        <!-- </dv-border-box8> -->
      </div>
    </div>
    <mainPath v-if="deviceType == 'majorpath'" :dataSource="majorPathEchartsData"
      style="width: 300px; height: 300px; position: absolute; left: 250px; top: 40px;" />
    <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource"
      :activeID="activeID" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue'
import { SendOutlined } from '@ant-design/icons-vue';
import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo,getExportUrl } from './device.api'
import AlarmHistoryTable from '../../../comment/AlarmHistoryTable.vue';
import HistoryTable from '../../../comment/HistoryTable.vue';
import HandlerHistoryTable from '../../../comment/HandlerHistoryTable.vue';
import MonitorTable from '../../../comment/MonitorTable.vue';
import GroupMonitorTable from '../../../comment/GroupMonitorTable.vue';
import { TreeProps, message, Progress, Input, Select } from 'ant-design-vue';
import { TableAction } from '/@/components/Table';
import { SvgIcon } from '/@/components/Icon';
import { getActions } from '/@/qiankun/state';
import { useRouter } from 'vue-router';
import { setDivHeight } from '/@/utils/event';
import { majorColumns, haveSysDetailArr, haveDetailArr, haveHandlerArr, noWarningArr, surfaceChartsColumns, noHistoryArr, getMonitorComponent, locationFormConfig, vehicleFormConfig } from './device.data'
import mainPath from './modal/mainPath.vue'
import { formConfig } from '../../../safetyMonitor/safety.data'
import { getDictItemsByCode } from '/@/utils/dict';
import BarAndLine from '/@/components/chart/BarAndLine.vue';
import MTreeSelect from '/@/components/Form/src/jeecg/components/MTreeSelect.vue';
// import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
import { nextTick } from 'vue';
import { useMethods } from '/@/hooks/system/useMethods';
// import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';

const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal } = getMonitorComponent()
type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };

const props = defineProps({
  pageData: {
    type: Object,
    default: () => { }
  }
})
const { handleExportXls } = useMethods();
const echatsOption = {
  grid: {
    top: '35',
    left: '30',
    right: '45',
    bottom: '25',
    containLabel: true
  },
  toolbox: {
    feature: {}
  },
}
const router = useRouter()

const actions = getActions();
// actions.setGlobalState({ pageObj: { pageType: 'home' } });
const locationForm = reactive({
  strname:'',
  department: '',
  stationname: ''
})

const safetymonitorForm = reactive({
  dataTypeName:'',
  strinstallpos: '',
})

const monitorTable = ref()
const historyTable = ref()
const alarmHistoryTable = ref()
const handlerHistoryTable = ref()

// const routerParam = ref('home') // 默认进来时首页
const isRefresh = ref(true)
// 模态框
const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
const modalVisible = ref<Boolean>(false); // 模态框是否可见

// const drawerHeight = ref(240) // 监测框最小高度
const treeShow = ref(true) //是否显示树形菜单
const locationSettingShow = ref(false) //是否显示树形菜单
const treeNodeTitle = ref('') // 选中的树形标题

const locationList = ref([]) //巷道定位图标显示列表
const deviceList = ref<DeviceType[]>([]) //关联设备列表
const deviceActive = ref('')
const activeKey = ref('1'); // tab key
const dataSource = shallowRef([]) // 实时监测数据
const majorPathEchartsData = ref({}) // 关键路线echarts数据
const surfaceEchartsData = ref<any[]>() // 工作面历史记录，echarts数据
const activeID = ref('') // 打开详情modal时监测的设备id
const deviceType = ref('') // 监测设备类型
const systemType = ref('')
const systemID = ref('') // 系统监测时，系统id
const selectedKeys = ref<string[]>([]);
const expandedKeys = ref<string[]>([]);
const scroll = reactive({
  y: 180
})
const treeData = ref<TreeProps['treeData']>([]);
let departmentInfo: Null | Object = null
let startMonitorTimer = 0

//树形菜单选择事件
const onSelect: TreeProps['onSelect'] = (keys, e) => {
  deviceType.value = ''
  systemID.value = ''
  deviceList.value = []
  const title = e.node.title; // 在
  if (e.node.parent && (e.node.parent.node.type.toString()).startsWith('sys')) {
    systemType.value = e.node.parent.node.type
    if(deviceType.value != e.node.parent.node.type)deviceType.value = e.node.parent.node.type
    systemID.value = e.node.type
    // 传递工作面id信息,用于定位
    actions.setGlobalState({ locationObj: { pageType: deviceType.value, deviceid: systemID.value }, pageObj: null });
  } else {
    systemType.value = e.node.type
    if(deviceType.value != e.node.type)deviceType.value = e.node.type
    actions.setGlobalState({ locationObj: { pageType: deviceType.value }, pageObj: null });
  }
  clearTimeout(timer)
  timer = undefined
  if (startMonitorTimer) {
    clearTimeout(startMonitorTimer)
  }
  dataSource.value = []
  startMonitorTimer = setTimeout(() => {
    expandedKeys.value = keys
    selectedKeys.value = keys
    treeNodeTitle.value = e.node.title
    activeKey.value = '1'
    timer = null
    if (e.node.children?.length < 1) {
      getMonitor(true)
    }
  }, 1000)
};

function tabChange(activeKeyVal) {
  activeKey.value = activeKeyVal;
};

function showTree(flag, value) {
  if (flag == 'treeShow') treeShow.value = value
  if (flag == 'location') locationSettingShow.value = value
}

async function getDeviceType(sysType?) {
  if (treeData.value?.length > 0) return
  const result = await getDeviceTypeList({})
  if (result.length > 0) {
    const dataSource = <TreeProps['treeData']>[]
    let key = '0'
    const getData = (resultList, dataSourceList, keyVal) => {
      resultList.forEach((item, index) => {
        if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
          const children = getData(item.children, [], `${keyVal}-${index}`)
          // 判断关键阻力路线
          if (item.itemValue.startsWith(sysType) && children[0]) {
            systemID.value = item.children[0]['itemValue']
          }

          dataSourceList.push({
            children: children,
            title: item.itemText,
            key: `${keyVal}-${index}`,
            type: item.itemValue,
            parentKey: `${keyVal}`
          });

        } else {
          dataSourceList.push({
            children: [],
            title: item.itemText,
            key: `${keyVal}-${index}`,
            type: item.itemValue,
            parentKey: `${keyVal}`
          });
        }
      });
      return dataSourceList
    }
    treeData.value = getData(result, dataSource, key)
  }
}

// https获取监测数据
let timer: null | NodeJS.Timeout = undefined;
function getMonitor(flag?) {
  if (deviceType.value) {
    if (timer) timer = null
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = setTimeout(async () => {
        await getDataSource()
        if (timer) {
          getMonitor();
        }
      }, flag ? 0 : 1000);
    }
  }
};

async function getDataSource() {
  if (deviceType.value && deviceType.value.startsWith('sys') && systemID.value) {
    const res = await list({ devicetype: 'sys', systemID: systemID.value });
    const result = res.msgTxt;
    const deviceArr = <DeviceType[]>[]
    result.forEach(item => {
      const data = item['datalist'].filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      })
      if (item.type != 'sys') {
        if (item.type === 'majorpath') {
          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] })
          majorPathEchartsData.value = item['datalist'][0]
        } else if (item.type.startsWith('surface_history')) {
          surfaceEchartsData.value = item['datalist'][0]
          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
        } else {
          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
        }
      }
    })

    deviceList.value = deviceArr
    if (deviceArr.length > 0) {
      // if (deviceArr[1]) {
      //   deviceActive.value = deviceArr[1].deviceType
      //   monitorChange(1)
      // } else {
      //   deviceActive.value = deviceArr[0].deviceType
      //   monitorChange(0)
      // }
      deviceActive.value = deviceArr[0].deviceType
      monitorChange(0)
    }
  } else {
    let res = null
    if (systemID.value) {
      res = await list({ devicetype: 'sys', types: deviceType.value, systemID: systemID.value })
      if (res && res.msgTxt) {
        const result = res.msgTxt;
        result.forEach(item => {
          const data = item['datalist'].filter((data: any) => {
            const readData = data.readData;
            return Object.assign(data, readData);
          })
          if (item.type != 'sys') {
            if (item.type.startsWith('majorpath') && item.type == deviceType.value) {
              dataSource.value = item['datalist'][0]['paths']
              majorPathEchartsData.value = item['datalist'][0]
              return
            } else if (item.type == deviceType.value) {
              if (item.type == 'surface_history') { // 工作面图标数据
                surfaceEchartsData.value = item['datalist'][0]
              } else {
                dataSource.value = data
                console.log('关联设备数据--------------->', data)
              }
              return
            }
          }
        })
      }
    } else {
      let resultData, searchForm;
      if(monitorTable.value){
        const formData = monitorTable.value.getForm()
        searchForm = formData.getFieldsValue()
      }
      
      if (monitorTable.value) {
        if (deviceType.value.startsWith('safetymonitor')) {     
          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { ...searchForm } })
        } else if (deviceType.value.startsWith('location')) {
          if (!departmentInfo) {
            departmentInfo = await getDepartmentInfo({})
          }
          let department = null
          if (departmentInfo && locationForm && locationForm['department']) {
            for (const key in departmentInfo) {
              const item = departmentInfo[key]
              if (item['id'] === locationForm['department']) {
                department = item
                break;
              }
            }
          }
          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '', userName: locationForm['strname'] ? locationForm['strname'] : '', userJson: department && department['name'] ? department['name'] : '' } })
        } else if (deviceType.value.startsWith('vehicle')) {
          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal', filterParams: { strinstallpos: locationForm['stationname'] ? locationForm['stationname'] : '', vehicleName: locationForm['strname'] ? locationForm['strname'] : '' } })
        } else {
          resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' })
        }
      } else {
        // 非安全监控
        resultData = await list({ devicetype: deviceType.value, pagetype: 'normal' })
      }
      if (resultData && resultData.msgTxt) {
        const result = resultData.msgTxt[0];
        if (result) {
          const data = result['datalist'].filter((data: any) => {
            const readData = data.readData;
            return Object.assign(data, readData);
          })
          if (deviceType.value.startsWith('safetymonitor')) {
            const resultData = <any[]>[]
            // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
            const dictCodes = getDictItemsByCode('safetynormal')
            if (searchForm && !searchForm['dataTypeName'] && dictCodes && dictCodes.length) {
              for (let i = 0; i < dictCodes.length; i++) {
                const dict = dictCodes[i]
                data.forEach((item) => {
                  if (dict['value'] == item['dataTypeName']) {
                    resultData.push(item)
                  }
                })
              }
              dataSource.value = resultData
            } else {
              dataSource.value = data
            }
          } else {
            let tableData: any[] = []
            let noNetData: any[] = []
            data.filter(el => {
              if (el.netStatus == 1) {
                tableData.push(el)
              } else {
                noNetData.push(el)
              }
            })
            dataSource.value = [...tableData, ...noNetData]
          }
        } else {
          dataSource.value = []
        }
      } else {
        dataSource.value = []
      }
    }
  }
}

function goLocation(record) {
  actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
}

function goDetail(record?) {
  if (record) {
    activeID.value = record.deviceID
    if (deviceType.value.startsWith('fiber')) {
      currentModal.value = FiberModal
      modalVisible.value = true;
    } else if (deviceType.value.startsWith('dusting')) {
      currentModal.value = DustModal
      modalVisible.value = true;
    } else if (deviceType.value.startsWith('bundletube')) {
      currentModal.value = BundleModal
      // currentModal.value = BallvalveModal
      modalVisible.value = true;
    } else if (deviceType.value.startsWith('ballvalve')) {
      currentModal.value = BallvalveModal
      modalVisible.value = true;
    } else if (deviceType.value.startsWith('atomizing')) {
      currentModal.value = AtomizingModal
      modalVisible.value = true;
    } else if (deviceType.value.startsWith('gaspatrol')) {
      currentModal.value = GaspatrolModal
      modalVisible.value = true;
    } else if (deviceType.value.indexOf("gate") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/monitor-gate', query: { id: activeID.value } })
      window.open(newPage.href, '_blank')
    } else if (deviceType.value.indexOf("window") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/monitor-window', query: { id: activeID.value } })
      window.open(newPage.href, '_blank')
    } else if (deviceType.value.indexOf("windrect") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect', query: { id: activeID.value } })
      window.open(newPage.href, '_blank')
    } else if (deviceType.value.indexOf("fanmain") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/monitor-fanmain', query: { id: activeID.value } })
      window.open(newPage.href, '_blank')
    } else if (deviceType.value.indexOf("fanlocal") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal', query: { id: activeID.value, deviceType: deviceType.value } })
      window.open(newPage.href, '_blank')
    } else if (deviceType.value.indexOf("pulping") != -1) {
      const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } })
      window.open(newPage.href, '_blank')
    } else if (deviceType.value.indexOf("pressurefan") != -1) {
      const newPage = router.resolve({ path: '/nitrogen/home', query: { id: activeID.value } })
      window.open(newPage.href, '_blank')
    } else if (deviceType.value.indexOf("chamber") != -1) {
      const newPage = router.resolve({ path: '/chamber-home', query: { id: activeID.value } })
      window.open(newPage.href, '_blank')
    } else if (deviceType.value.indexOf("safetymonitor") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/device-monitor/safetymonitor', query: { id: activeID.value } })
      window.open(newPage.href, '_blank')
    } else if (deviceType.value.indexOf("pump") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/gasPump-home', query: { id: activeID.value } })
      window.open(newPage.href, '_blank')
    } else if (systemType.value.indexOf("nitrogen") != -1) {
      const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } })
      window.open(newPage.href, '_blank')
    } else {
      message.info('待开发。。。')
    }
  } else {
    if (systemType.value.indexOf("sys_dongshi") != -1) {
      const newPage = router.resolve({ path: '/chamber-home', query: { id: systemID.value } })
      window.open(newPage.href, '_blank')
    } else if (systemType.value.indexOf("sys_obfurage") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/obfurage-home', query: { id: systemID.value } })
      window.open(newPage.href, '_blank')
    } else if (systemType.value.indexOf("sys_surface_caimei") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/wokerFace-home', query: { id: systemID.value } })
      window.open(newPage.href, '_blank')
    } else if (systemType.value.indexOf("sys_surface_juejin") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/tunFace-home', query: { id: systemID.value } })
      window.open(newPage.href, '_blank')
    } else if (systemType.value.indexOf("sys_maintunnel_leather") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/beltTun-home', query: { id: systemID.value } })
      window.open(newPage.href, '_blank')
    } else if (systemType.value.indexOf("sys_surface_junya") != -1) {
      const newPage = router.resolve({ path: '/monitorChannel/balancePress-home', query: { id: systemID.value } })
      window.open(newPage.href, '_blank')
    } else if (systemType.value.indexOf("sys_nitrogen") != -1) {
      const newPage = router.resolve({ path: '/nitrogen-home', query: { id: systemID.value } })
      window.open(newPage.href, '_blank')
    } else if (deviceType.value.indexOf("forcFan") != -1) {
      const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } })
      window.open(newPage.href, '_blank')
    } else {
      message.info('待开发。。。')
    }
  }
}

function exportXls() {
  handleExportXls('瓦斯巡检记录', getExportUrl, { devicetype: deviceType.value })
}

function toHome() {
  deviceList.value = []
  if (timer) clearTimeout(timer)
  timer = undefined
  deviceType.value = ''
  actions.setGlobalState({ pageObj: { pageType: 'home' } });
}

async function findTreeDataValue(obj) {
  ;
  const findDeviceType = (data: [], obj) => {
    let type = ''
    if (obj.deviceid) {
      type = obj.deviceid
    } else {
      type = obj.deviceType
    }
    data.find((item: any) => {
      if (item.children.length > 0) {
        findDeviceType(item.children, obj)
      }

      if (item.type == type) {
        if(obj.deviceid && deviceType.value != 'sys'){
          deviceType.value = 'sys'
        }else if(!obj.deviceid && deviceType.value !== item.type){
          deviceType.value = item.type
        }
        if (type.startsWith('sys_') && item.children[0]) {
          systemID.value = item.children[0]['type']
          selectedKeys.value = [item.children[0]['key']]
          expandedKeys.value = [item.children[0]['key']]
          treeNodeTitle.value = item.children[0]['title']
          if(deviceType.value !== type.substring(4)) deviceType.value = type.substring(4)
        } else {
          if (obj.deviceid) systemID.value = obj.deviceid
          selectedKeys.value = [item.key]
          expandedKeys.value = [item.key]
          treeNodeTitle.value = item.title
        }
        // const setKey = (item) => {
        //   if(item.parentKey){
        //     selectedKeys.value.push(item.parentKey)
        //     expandedKeys.value.push(item.parentKey)
        //   }
        //   selectedKeys.value.push(item.key)
        //   expandedKeys.value.push(item.key)
        // }
        // setKey(item)
        return true
      }
      return false
    })
  }

  findDeviceType(treeData.value, obj)

  // 无类型时
  if (!treeNodeTitle.value && treeData.value && treeData.value[0] && treeData.value[0]['children']) {
    const defaultData = treeData.value[0]['children'][0]
    if(deviceType.value !== defaultData.type)deviceType.value = defaultData.type
    selectedKeys.value = [(defaultData.key as string)]
    expandedKeys.value = [(defaultData.key as string)]
    treeNodeTitle.value = defaultData.title
  }

  if (timer === undefined) {
    timer = null
    await getDataSource()
    getMonitor(true)
  }
}

function monitorChange(index) {
  dataSource.value = []
  deviceActive.value = deviceList.value[index].deviceType
  if(deviceType.value != deviceActive.value) deviceType.value = deviceActive.value
  if (activeKey.value == '1' && monitorTable.value) {
    monitorTable.value.setLoading(true)
    dataSource.value = deviceList.value[index].datalist
  }
  if (activeKey.value == '2' && historyTable.value) {
    historyTable.value.setLoading(true)
  }
  if (activeKey.value == '3' && alarmHistoryTable.value) {
    alarmHistoryTable.value.setLoading(true)
  }
  if (activeKey.value == '4' && handlerHistoryTable.value) {
    handlerHistoryTable.value.setLoading(true)
  }
}
/**
 * 设置巷道设备定位图标的显示与隐藏
 */
function setLocation() {
  let locationStr = ''
  locationList.value.forEach((item: any) => {
    if (item.Visible) {
      locationStr = locationStr ? locationStr + ',' + item.value : item.value
    }
  })
  actions.setGlobalState({ locationId: null, locationObj: null, pageObj: null, locationPlane: locationStr });
  setTimeout(() => {
    message.success('设置成功')
  }, 600)
}

watch(() => props.pageData, async (pageObj) => {
  isRefresh.value = false
  if (!treeData.value || treeData.value?.length < 1) {
    await getDeviceType()
  }
  nextTick(() => {
    isRefresh.value = true
    if (pageObj.deviceid) {
      findTreeDataValue({ deviceid: pageObj.deviceid })
    } else if (pageObj.pageType) {
      findTreeDataValue({ deviceType: pageObj.pageType })
    }
  })
})

onMounted(async () => {
  const pageObj = props.pageData
  if (!pageObj) return
  if (pageObj.deviceid) {
    await getDeviceType()
    findTreeDataValue({ deviceid: pageObj.deviceid })
  } else {
    if (pageObj.pageType.startsWith('sys_')) {
      await getDeviceType(pageObj.pageType)
      findTreeDataValue({ deviceid: systemID.value })

    } else {
      await getDeviceType()
      findTreeDataValue({ deviceType: pageObj.pageType })
    }
  }
  // 定位
  const posShowData = pageObj.locationPlane
  if (posShowData) {
    locationList.value = posShowData
  } else {
    locationList.value = await devPosition({})
  }
  

  // safetyOption.value = await safetyDeviceList(null, { devicetype: 'safetymonitor', code: 'dataTypeName' })
})

onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
  }
  timer = undefined;
})

</script>

<style lang="less" scoped>
@import '/@/design/vent/modal.less';
@ventSpace: zxm;

.top-header {
  position: fixed;
  width: 100%;
  height: 56px;
  background: url('/@/assets/images/vent/home/modal-top.png');
  text-align: center;
  line-height: 56px;
  font-size: 28px;
  color: #ffffffdd;
  font-weight: 600;
  z-index: 1;
  letter-spacing: 2px;
  font-size: 30px;
}

.select-node {
  position: fixed;
  top: 100px;
  left: 10px;
  color: #fff;
  display: flex;
  justify-content: center;
  font-size: 22px;

  .title {
    margin-left: 10px;
  }
}

.expansion-icon {
  background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
  background-size: contain;
  position: absolute;
  left: 190px;
  top: 25px;

  &:hover {
    background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
    background-size: contain;
  }
}

.device-select {
  width: 250px;
  height: 500px;
  background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
  position: fixed;
  top: 100px;
  left: 10px;
  background-size: contain;
  pointer-events: auto;
  padding: 20px 10px 30px 10px;

}

.is-expansion-icon {
  padding: 5px;
  pointer-events: auto;
  z-index: 999;
}

.device-select-show {
  left: 10px;
  animation-name: treeShow;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;

}

.device-select-hide {
  left: -250px;
  animation-name: treeHide;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.node-select-show {
  width: 276px;
  height: 44px;
  background: url('/@/assets/images/vent/home/tree-expansion-bg.png') no-repeat;
  left: 10px;
  animation-name: treeShow;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
  display: flex;
  align-items: center;
  margin-left: 0;
  justify-content: flex-start;
  pointer-events: auto;

  &:hover {
    background: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png') no-repeat;
  }

  .put-away-icon {
    position: relative;
    display: inline-block;
    left: 4px;
  }
}

.node-select-hide {
  left: -400px;
  animation-name: treeHide;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.device-select-box {
  width: 208px;
  height: 450px;
  overflow-y: auto;
  color: #fff;

  :deep(.zxm-tree) {
    background: transparent !important;
    color: #fff !important;

    .zxm-tree-switcher {
      background: transparent !important;
    }

    .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
      background-color: #00b1c8;
    }

    .zxm-tree-node-content-wrapper:hover {
      background-color: #00b1c855;
    }

    input {
      height: 0px !important;
    }
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed22;
    height: 100px;
  }

  &::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #4288A444;
  }
}

.location-icon {
  width: 46px;
  height: 178px;
  position: absolute;
  top: 100px;
  // right: 0;
  background: url('/@/assets/images/vent/home/location-bg.png') no-repeat;
  background-size: contain;
  writing-mode: vertical-lr;
  line-height: 46px;
  color: #fff;
  padding-top: 10px;
  pointer-events: auto;
  cursor: pointer;

  &:hover {
    background: url('/@/assets/images/vent/home/location-hover-bg.png') no-repeat;
  }

  .location-text {
    padding-top: 20px;
    letter-spacing: 3px;
    font-size: 16px;
  }
}

.location-select {
  position: fixed;
  top: 100px;
  // right: 240px;
  pointer-events: auto;

  .location-select-box {
    width: 100%;
    height: 100%;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      width: 230px;
      height: 500px;
      top: 0;
      left: 0;
      background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
      background-size: contain;
      transform: rotateY(180deg);
      z-index: -1;
      // &:hover {
      //   background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
      //   background-size: contain;
      // }
    }

    .location-top-title {
      color: #fff;
      position: absolute;
      width: 225px;
      height: 68px;
      background: url('/@/assets/images/vent/home/turn-location-top-bg.png') no-repeat;
      background-size: contain;
      top: 5px;
      left: 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;

      .title {
        font-size: 18px;
        position: relative;
        top: -14px;
        right: 15px;
      }
    }

    .location-expansion-icon {
      background: url('/@/assets/images/vent/home/tree-icon-cover-bg.png') no-repeat;
      background-size: contain;
      position: relative;
      left: 10px;
      top: -15px;
      padding: 5px;

      &:hover {
        background: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png') no-repeat;
        background-size: contain;
      }
    }
  }

  .location-container {
    width: 200px;
    height: 390px;
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 80px;
    left: 18px;
    overflow-y: auto;

    .location-item {
      color: #fff;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
      margin: 3px 0;

      .item-title {
        width: 80px;
        text-align: right;
        color: #87f1ff;
      }
    }

    .location-bottom-btn {
      width: 100%;
      color: #fff;
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;

      span {
        display: inline-block;
        width: 100%;
        background: #00709955;
        border-radius: 3px;
        border: 1px solid rgba(174, 243, 255, 0.3);
        text-align: center;
        padding: 2px 0;
        cursor: pointer;

        &:hover {
          background: #00557422;
        }
      }
    }
  }
}

.location-select-show {
  right: 240px;
  animation-name: locationShow;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.location-select-hide {
  right: -2px;
  animation-name: locationHide;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.location-btn-show {
  right: -0px;
  animation-name: locationBtnShow;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}

.location-btn-hide {
  right: -240px;
  animation-name: locationBtnHide;
  /* 持续时间 */
  animation-duration: 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
}
.tabs-box{
  height: 290px;
}
.bottom-tabs-box {
  position: relative;
  .tabs-box {
    width: calc(100% - 12px) !important;
    bottom: 3px !important;
  }

  .to-small {
    width: 60px;
    height: 60px;
    background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
    background-size: auto;
    position: absolute;
    top: -65px;
    right: 36px;
    border-radius: 10px;
    padding: 8px;
    backdrop-filter: blur(10px);
    background-color: rgba(45, 86, 137, 0.418);

    &:hover {
      background-color: rgba(79, 104, 134, 0.418);
    }
  }

  .device-button-group {
    position: absolute;
    top: -30px;
    display: flex;
    width: 100%;

    .device-button {
      height: 26px;
      padding: 0 20px;
      background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
      clip-path: polygon(10px 0,
          0 50%,
          10px 100%,
          100% 100%,
          calc(100% - 10px) 50%,
          100% 0);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFF;
      position: relative;
      cursor: pointer;

      &:nth-child(1) {
        left: calc(-6px * 1);
      }

      &:nth-child(2) {
        left: calc(-6px * 2);
      }

      &:nth-child(3) {
        left: calc(-6px * 3);
      }

      &:nth-child(4) {
        left: calc(-6px * 4);
      }

      &:nth-child(5) {
        left: calc(-6px * 5);
      }

      &:nth-child(6) {
        left: calc(-6px * 6);
      }

      &:nth-child(7) {
        left: calc(-6px * 7);
      }

      &:nth-child(8) {
        left: calc(-6px * 8);
      }

      &:nth-child(9) {
        left: calc(-6px * 9);
      }

      &:nth-child(10) {
        left: calc(-6px * 10);
      }

      &:nth-child(11) {
        left: calc(-6px * 11);
      }

      &:nth-child(12) {
        left: calc(-6px * 12);
      }

      &:nth-child(13) {
        left: calc(-6px * 13);
      }

      &:nth-child(14) {
        left: calc(-6px * 14);
      }

      &:nth-child(15) {
        left: calc(-6px * 15);
      }

      &:nth-child(16) {
        left: calc(-6px * 16);
      }

      &:nth-child(17) {
        left: calc(-6px * 17);
      }

      &:nth-child(18) {
        left: calc(-6px * 18);
      }

      &:nth-child(19) {
        left: calc(-6px * 19);
      }

      &:first-child {
        clip-path: polygon(0 0,
            10px 50%,
            0 100%,
            100% 100%,
            calc(100% - 10px) 50%,
            100% 0);
      }

    }

    .device-active {
      background: linear-gradient(45deg, #04e6fb, #0c5cab);

      &::before {
        border-color: #0efcff;
        box-shadow: 1px 1px 3px 1px #0efcff inset;
      }
    }
  }

  .enter-detail {
    color: #fff;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 35px;
    padding: 5px;
    border-radius: 5px;
    margin-left: 8px;
    margin-right: 8px;
    width: auto;
    height: 33px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 5px 15px 5px 15px;
    z-index: 999;
    cursor: pointer;

    &:hover {
      background: linear-gradient(#2cd1ff55, #1eb0ff55);
    }

    &::before {
      width: calc(100% - 6px);
      height: 27px;
      content: '';
      position: absolute;
      top: 3px;
      right: 0;
      left: 3px;
      bottom: 0;
      z-index: -1;
      border-radius: inherit;
      /*important*/
      background: linear-gradient(#1fa6cb, #127cb5);
    }
  }
}

.location-form{
  display: flex;
  margin: 8px;
  .location-form-item{
    width: 400px;
    .location-form-label{
      width: 100px;
      display: inline-block;
      color: #fff;
    }
    input{
      background: transparent !important;
      color: #fff;
      border: 1px solid #3ad8ff77 !important
    }
  }
  .zxm-select-selector{
    width: 200px !important;
  }
}



@keyframes treeShow {
  0% {
    left: -400px;
    opacity: 0;
  }

  100% {
    left: 10px;
    opacity: 1;
  }
}

@keyframes treeHide {
  0% {
    left: 10px;
    opacity: 1;
  }

  100% {
    left: -400px;
    opacity: 0;
  }
}

@keyframes locationShow {
  0% {
    right: 0px;
    opacity: 0;
  }

  100% {
    right: 240px;
    opacity: 1;
  }
}

@keyframes locationHide {
  0% {
    right: 240px;
    opacity: 1;
  }

  100% {
    right: 0;
    opacity: 0;
  }
}

@keyframes locationBtnShow {
  0% {
    right: -240px;
    opacity: 0;
  }

  100% {
    right: -2px;
    opacity: 1;
  }
}

@keyframes locationBtnHide {
  0% {
    right: -2px;
    opacity: 1;
  }

  100% {
    right: -240px;
    opacity: 0;
  }
}

:deep(.@{ventSpace}-tabs-tabpane-active) {
  // overflow: auto;
  height: 100%;
}

:deep(.zxm-select-dropdown) {
  left: 0 !important;
  color: #000000 !important;
}

:deep(.zxm-select-selector) {
  height: 34px !important;
  line-height: 34px !important;
}

:deep(.zxm-input) {
  height: 32px !important;
  line-height: 32px !important;

  .zxm-select-selection-item {
    line-height: 32px !important;
  }
}

// :deep(.@{ventSpace}-pagination){
//   margin-right: 20px !important;
//   margin-top: 5px !important;
//   display: flex;
//   align-items: center;
// }</style>