hsq-pro/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 v-if="deviceType.startsWith('gasDay_normal') && activeKey == 'monitor'" class="inspect-info-xj">
      <gasInspectDialog :gasSearch="gasSearch"></gasInspectDialog>
    </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"
      :class="{ 'table-hide': !tableShow, 'table-show': tableShow }"
      style="height: 290px"
      @mousedown="setDivHeight($event, 230, scroll, 0)"
      id="monitorBox"
    >
      <div :style="`padding: 5px; height: ${scroll.y + 100}px`">
        <div class="to-small">
          <div class="to-home" @click="toHome"></div>
          <FullscreenOutlined v-if="!tableShow" class="table-show-icon" @click="toHide" />
        </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.stop="goDetail()">
            <send-outlined />
            {{ treeNodeTitle }}详情
          </div>
        </div>
        <!-- 进入瓦斯人工巡检历史详情 -->
        <div v-if="deviceType == 'gasDay_normal'">
          <div class="device-button-group">
            <div v-if="deviceType.startsWith('gasDay_normal')" class="enter-detail" @click.stop="goDetail()">
              <send-outlined />
              瓦斯人工巡检历史详情
            </div>
          </div>
        </div>
        <!-- 进入瓦斯日报历史详情 -->
        <div v-if="deviceType == 'gasDayReport'">
          <div class="device-button-group">
            <div v-if="deviceType.startsWith('gasDayReport')" class="enter-detail" @click.stop="goDetail()">
              <send-outlined />
              瓦斯日报历史详情
            </div>
          </div>
        </div>
        <!-- 进入粉尘报表分析详情 -->
        <div v-if="deviceType == 'dustDayReport'">
          <div class="device-button-group">
            <div v-if="deviceType.startsWith('dustDayReport')" class="enter-detail" @click.stop="goDetail()">
              <send-outlined />
              粉尘报表分析
            </div>
          </div>
        </div>
        <div v-if="deviceType == 'bundleDayReport'">
          <div class="device-button-group">
            <div v-if="deviceType.startsWith('bundleDayReport')" class="enter-detail" @click.stop="goDetail()">
              <send-outlined />
              束管日报分析
            </div>
          </div>
        </div>
        <div v-if="deviceType == 'bundleSpyDayReport'">
          <div class="device-button-group">
            <div v-if="deviceType.startsWith('bundleSpyDayReport')" class="enter-detail" @click.stop="goDetail()">
              <send-outlined />
              色谱仪报表分析
            </div>
          </div>
        </div>

        <div v-if="deviceType == 'gaspatrol'">
          <div class="device-button-group">
            <div class="enter-detail" @click="exportXls()">
              <send-outlined />
              导出
            </div>
          </div>
        </div>
        <div class="table-hide-icon" @click="toHide">
          <FullscreenExitOutlined style="font-size: 18px" />
        </div>
        <!-- 是人员定位表单代码，由于放在tab中，表格对已知刷新，导致表单数据也在刷寻，造成输入一半的中文时会清空输入框的内容，导致的输入不上数据 -->
        <div
          v-if="(deviceType.startsWith('location') || deviceType.startsWith('vehicle')) && activeKey == 'monitor'"
          class="location-form"
          style="position: absolute; z-index: 9999; top: 50px"
        >
          <div class="location-form-item">
            <span class="location-form-label">{{ deviceType.startsWith('location') ? '人员名称:' : '车辆名称' }}</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="/monitor/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>
        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox">
          <a-tab-pane
            key="monitor"
            :tab="
              deviceType.startsWith('gasDay_normal')
                ? '当日巡检监测'
                : deviceType.startsWith('dustDayReport') ||
                  deviceType.startsWith('bundleDayReport') ||
                  deviceType.startsWith('bundleSpyDayReport') ||
                  deviceType.startsWith('bundleReport') ||
                  deviceType.startsWith('bundleSpyReport') ||
                  deviceType.startsWith('dustReport')
                ? '最新监测报表'
                : '实时监测'
            "
          >
            <template v-if="(deviceType.startsWith('fanlocal') || deviceType.startsWith('fanmain')) && activeKey == 'monitor'">
              <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 == 'monitor'">
              <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 == 'monitor'">
              <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 == 'monitor'">
              <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 v-if="!noLocationList.includes('location')" #action="{ record }">
                  <TableAction
                    :actions="[
                      {
                        label: '定位',
                        onClick: goLocation.bind(null, record),
                      },
                    ]"
                  />
                </template>
              </MonitorTable>
            </template>
            <template v-else-if="deviceType.startsWith('vehicle') && activeKey == 'monitor'">
              <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 v-if="!noLocationList.includes('location')" #action="{ record }">
                  <TableAction
                    :actions="[
                      {
                        label: '定位',
                        onClick: goLocation.bind(null, record),
                      },
                    ]"
                  />
                </template>
              </MonitorTable>
            </template>
            <!-- <template v-else-if="deviceType.startsWith('gasmonitor') && activeKey == 'monitor'">
              <MonitorTable
                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="[
                      {
                        label: '故障诊断分析',
                        onClick: goDetail.bind(null, record),
                      },
                      {
                        label: '定位',
                        onClick: goLocation.bind(null, record),
                      },
                    ]"
                  />
                </template>
                <template #filterCell="{ column, record }">
                  <template v-if="column.dataIndex === 'isLeakage'">
                    {{ record.isLeakage === '1' ? '是' : '否' }}
                  </template>
                  <template v-if="column.dataIndex === 'leakagePoint' && record.pipFaultDiag && record.pipFaultDiag.isLeakage">
                    {{ record.pipFaultDiag.ld_x }}
                  </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>
                  <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('gasDay_normal') && activeKey == 'monitor'">
              <gaspatrolTable ref="gaspatrol" @getSearch="getSearch" @locate="goLocation"> </gaspatrolTable>
            </template>
            <!-- 瓦斯日报 -->
            <template v-else-if="deviceType.startsWith('gasDayReport') && activeKey == 'monitor' && glob.sysOrgCode != 'sdmtjtbetmk'">
              <gasReport ref="gasreport" @locate="goLocation"> </gasReport>
            </template>
            <template v-else-if="deviceType.startsWith('gasDayReport') && activeKey == 'monitor' && glob.sysOrgCode == 'sdmtjtbetmk'">
              <gasReportCount ref="gasreportcount" @locate="goLocation"> </gasReportCount>
            </template>
            <!-- 粉尘监测报表-->
            <template v-else-if="deviceType.startsWith('dustDayReport') && activeKey == 'monitor'">
              <dustMonitorTable @locate="goLocation" :isShowAction="true"></dustMonitorTable>
            </template>
            <template v-else-if="deviceType.startsWith('bundleDayReport') && activeKey == 'monitor'">
              <bundleMonitorTable @locate="goLocation" :isShowAction="true"></bundleMonitorTable>
            </template>
            <template v-else-if="deviceType.startsWith('bundleSpyDayReport') && activeKey == 'monitor'">
              <bundleSpyMonitorTable @locate="goLocation" :isShowAction="true"></bundleSpyMonitorTable>
            </template>
            <template v-else-if="deviceType.startsWith('dusting') && activeKey == 'monitor'">
              <DustingTable :dataSource="dataSource" :deviceType="deviceType" :scroll="scroll" @locate="goLocation" />
            </template>
            <!-- 设备分站 -->
            <template v-else-if="deviceType.startsWith('substation_normal') && activeKey == 'monitor'">
              <stationTable ref="station" @locate="goLocation" @stationDetail="stationDetail"> </stationTable>
            </template>
            <!-- 瓦斯管网 -->
            <template v-else-if="deviceType.startsWith('gaspipe') && activeKey == 'monitor'">
              <GasPipeTable :showDetailButton="true" :scroll="scroll" @detail="goDetail($event)" @locate="goLocation" />
            </template>
            <template v-else>
              <!-- 工作面echarts图标 -->
              <BarAndLine
                v-if="activeKey == 'monitor' && deviceType == 'surface_history'"
                class="echarts-line"
                xAxisPropType="time"
                :dataSource="surfaceEchartsData"
                height="300px"
                :chartsColumns="surfaceChartsColumns"
                :option="echatsOption"
              />
              <MonitorTable
                v-else-if="activeKey == 'monitor'"
                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') || deviceType.startsWith('door')">
                    <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="#46C66F"
                      >打开</a-tag
                    >
                    <a-tag
                      v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '1'"
                      color="#FF0000"
                      >点位异常</a-tag
                    >
                    <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="#46C66F"
                      >打开</a-tag
                    >
                    <a-tag
                      v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '1'"
                      color="#FF0000"
                      >点位异常</a-tag
                    >
                    <a-tag v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'" color="red"
                      >正在运行</a-tag
                    >
                    <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1" color="default"
                      >关闭</a-tag
                    >
                    <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'" color="#46C66F"
                      >打开</a-tag
                    >
                    <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'" color="#FF0000"
                      >点位异常</a-tag
                    >
                    <template v-if="column.dataIndex === 'ndoortype'">
                      <span>{{ render.renderDictText(record.ndoortype, 'ndoortype') }}</span>
                    </template>
                    <template v-if="column.dataIndex === 'doorUse'">
                      <span>{{ render.renderDictText(record.doorUse, 'doorUse') }}</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>
                  <template v-else-if="deviceType.startsWith('gaspatrol')">
                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('正常')" color="green">{{
                      record.deviceConnect_str
                    }}</a-tag>
                    <a-tag v-if="column.dataIndex === 'deviceConnect_str' && record.deviceConnect_str.endsWith('断开')" color="red">{{
                      record.deviceConnect_str
                    }}</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="history" tab="历史数据" v-if="!noHistoryArr().find((item) => deviceType.startsWith(item))">
            <div class="tab-item" v-if="activeKey == 'history'">
              <template v-if="deviceType.startsWith('firemon_normal')">
                <HistoryBall :dataSource="dataSource"></HistoryBall>
              </template>
              <template v-else-if="deviceType.startsWith('fanmain')">
                <HistoryTableNew class="w-100% h-100%" :device-code="`${deviceType}`" :scroll="scroll" dict-code="fan_dict" />
              </template>
              <template v-else-if="deviceType.startsWith('fanlocal')">
                <HistoryTableNew class="w-100% h-100%" :device-code="`${deviceType}`" :scroll="scroll" dict-code="fanlocal_dict" />s
              </template>
              <template v-else>
                <HistoryTable
                  ref="historyTable"
                  :sysId="systemID"
                  :columns-type="`${deviceType}`"
                  :device-type="deviceType"
                  designScope="device-history"
                  :scroll="scroll"
                />
              </template>
            </div>
          </a-tab-pane>
          <a-tab-pane
            key="5"
            :tab="deviceType.startsWith('gasmonitor') ? '曲线监测' : '历史曲线'"
            v-if="haveHistoryEcharts.find((item) => deviceType.startsWith(item))"
          >
            <div class="tab-item">
              <HistoryTableMajorPath
                v-if="deviceType.startsWith('majorpath')"
                class="w-100% h-100%"
                :sysId="`${systemID}`"
                :scroll="scroll"
                columnsType="sys_majorpath"
                type="chart"
              />
              <DeviceEcharts
                chartsColumnsType="gasmonitor_chart"
                xAxisPropType="strname"
                height="300px"
                :dataSource="dataSource"
                :device-list-api="list.bind(null, { devicetype: 'gasmonitor', pagetype: 'normal' })"
                device-type="gasmonitor"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane
            key="alarm"
            tab="报警历史"
            v-if="!noWarningArr.find((item) => deviceType.startsWith(item)) || !hasPermission('safety:hideWarning')"
          >
            <div class="tab-item">
              <AlarmHistoryTable
                ref="alarmHistoryTable"
                v-if="activeKey == 'alarm'"
                :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>
      </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, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
  import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo, getExportUrl, getRegulation } from './device.api';
  import AlarmHistoryTable from '../../../comment/AlarmHistoryTable.vue';
  import HistoryTable from '../../../comment/HistoryTable.vue';
  import HistoryTableNew from '/@/views/vent/comment/history/HistoryTable.vue';
  import HandlerHistoryTable from '../../../comment/HandlerHistoryTable.vue';
  import MonitorTable from '../../../comment/MonitorTable.vue';
  import GroupMonitorTable from '../../../comment/GroupMonitorTable.vue';
  import stationTable from '../../../comment/stationTable.vue';
  import gaspatrolTable from '../../../comment/gaspatrolTable.vue';
  import gasReport from '../../../comment/gasReport.vue';
  import gasReportCount from '../../../comment/gasReportCount.vue';
  import dustMonitorTable from '../../../comment/dustMonitorTable.vue';
  import bundleMonitorTable from '../../../comment/bundleMonitorTable.vue';
  import gasInspectDialog from '../../../comment/gasInspectDialog.vue';
  import DustingTable from '../../../comment/DustingTable.vue';
  import bundleSpyMonitorTable from '../../../comment/bundleSpyMonitorTable.vue';
  import GasPipeTable from '../../../comment/GasPipeTable.vue';
  import HistoryTableMajorPath from './modal/HistoryTableMajorPath.vue';
  import HistoryBall from './modal/history-ball.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, useRoute } from 'vue-router';
  import { setDivHeight } from '/@/utils/event';
  import { render } from '/@/utils/common/renderUtils';
  import {
    majorColumns,
    haveSysDetailArr,
    haveDetailArr,
    haveHandlerArr,
    noWarningArr,
    surfaceChartsColumns,
    noHistoryArr,
    getMonitorComponent,
    noLocationArr,
    haveHistoryEcharts,
  } 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 { useGo } from '/@/hooks/web/usePage';
  import { useGlobSetting } from '/@/hooks/setting';
  import { usePermission } from '/@/hooks/web/usePermission';

  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
  const glob = useGlobSetting();
  // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';

  const { FiberModal, BundleModal, DustModal, BallvalveModal, AtomizingModal, GaspatrolModal, WisdomBallModal } = getMonitorComponent();

  const props = defineProps({
    pageData: {
      type: Object,
      default: () => {},
    },
  });

  const { hasPermission } = usePermission();
  const { handleExportXls } = useMethods();
  const go = useGo();
  const echatsOption = {
    grid: {
      top: '35',
      left: '30',
      right: '45',
      bottom: '25',
      containLabel: true,
    },
    toolbox: {
      feature: {},
    },
  };
  const router = useRouter();
  const route = useRoute();
  const actions = getActions();
  const locationForm = reactive({
    strname: '',
    department: '',
    stationname: '',
  });
  const noLocationList = noLocationArr();
  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 tableShow = ref(true); //是否显示树形菜单
  const locationSettingShow = ref(false); //是否显示树形菜单
  const treeNodeTitle = ref(''); // 选中的树形标题

  const locationList = ref([]); //巷道定位图标显示列表
  const deviceList = ref<DeviceType[]>([]); //关联设备列表
  const deviceActive = ref('');
  const activeKey = ref('monitor'); // 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;
  let gaspatrol = ref(null);
  let gasreport = ref(null);
  let gasreportcount = ref(null);
  let station = ref(null);
  let gasSearch = reactive({
    address: '',
    userName: '',
    insType: '2',
    class: 'night',
  });
  //树形菜单选择事件
  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信息,用于定位
      go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=${systemID.value}`);
    } else {
      systemType.value = e.node.type;
      if (deviceType.value != e.node.type) deviceType.value = e.node.type;
      go(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=${deviceType.value}&deviceid=`);
    }
    clearTimeout(timer);
    timer = undefined;
    if (startMonitorTimer) {
      clearTimeout(startMonitorTimer);
    }
    dataSource.value = [];
    monitorTable.value.resetPagination();
    if (!startMonitorTimer) {
      startMonitorTimer = setTimeout(() => {
        expandedKeys.value = keys;
        selectedKeys.value = keys;
        treeNodeTitle.value = e.node.title;

        if (e.node.children?.length < 1 && timer) {
          getMonitor(true);
        }
      }, 1000);
    }
    // activeKey.value = '1';
  };

  function tabChange(activeKeyVal) {
    activeKey.value = activeKeyVal;
    router.push({ path: route.path, query: { ...route.query, tabtype: activeKey.value } });
  }

  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 () => {
            if (deviceType.value.startsWith('gasDay_normal') && gaspatrol.value) {
              gaspatrol.value.queryNowGasInsInfoList(); //人工瓦斯巡检
            } else if (deviceType.value.startsWith('gasDayReport')) {
              if (glob.sysOrgCode == 'sdmtjtbetmk') {
                gasreportcount.value.getSearchReport();
              } else {
                gasreport.value.getSearchReport(); //瓦斯日报
              }
            } else if (deviceType.value.startsWith('substation') && station.value) {
              //分站
              station.value.getStationList();
            } else {
              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);
        });

        // 如果查出的所有设备里，设备类型是sys的，标识其是系统总体，不应显示在设备列表中
        if (item.type == 'sys') return;

        // majorpath关键线路需要显示图表
        if (item.type === 'majorpath') {
          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'], datalist: item['datalist'][0]['paths'] });
          return (majorPathEchartsData.value = item['datalist'][0]);
        }
        // 工作面历史数据需要显示图表
        if (item.type.startsWith('surface_history')) {
          surfaceEchartsData.value = item['datalist'][0];
          return deviceArr.unshift({
            deviceType: item.type,
            deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
            datalist: data,
          });
        }
        // 其余的存在 subtype 的（一般为报表）仅需显示报表表格，同时它们一版都排在后面
        if (item.subtype) {
          return deviceArr.push({
            deviceType: item.subtype,
            deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
            datalist: data,
          });
        }

        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;
                }
                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 allRegulations: any[] | null = null;
              let tableData: any[] = [];
              let noNetData: any[] = [];
              data.filter((el) => {
                if (el.netStatus == 1) {
                  tableData.push(el);
                } else {
                  noNetData.push(el);
                }
              });
              const rawData = [...tableData, ...noNetData] || [];
              const processedData = [...rawData];

              // 首次请求获取去所有regulation数据
              if (allRegulations === null) {
                const regulationRes = await getRegulation({
                  deviceKind: deviceType.value,
                });
                allRegulations = regulationRes || [];
              }
              // 根据id创建一个映射表
              const regulationMap = new Map();
              allRegulations.forEach((reg) => {
                regulationMap.set(reg.id, reg);
              });
              // 对regulation字段进行替换
              processedData.forEach((data) => {
                if (data.regulation) {
                  const reg = regulationMap.get(data.regulation);
                  if (reg) {
                    data.regulation = reg; // 替换为完整对象
                    data.fmin = reg.fmin;
                    data.fmax = reg.fmax;
                  }
                }
              });
              dataSource.value = processedData;
              if (dataSource.value.length > 0) {
                await processReadData(processedData);
              }
            }
          } else {
            dataSource.value = [];
          }
        } else {
          dataSource.value = [];
        }
      }
    }
  }

  async function processReadData(data: any[]) {
    const promises = data
      .filter((item) => item.readData)
      .map(async (item) => {
        item.readData && Object.assign(item, item.readData);
      });
    await Promise.all(promises);
  }
  //设备分站详情跳转
  function stationDetail() {
    const newPage = router.resolve({ path: '/safety/list/detail/home' });
    window.open(newPage.href, '_blank');
  }

  function goLocation(record) {
    // debugger;
    if (record['deviceType'] == 'person_bd' || record['deviceType'] == 'car_bd') {
      actions.setGlobalState({ locationId: record.devNum, locationObj: null, pageObj: null, type: record['deviceType'].split('_')[0] });
    } else if (deviceType.value == 'bundleSpyDayReport' || deviceType.value == 'dustDayReport' || deviceType.value == 'bundleDayReport') {
      actions.setGlobalState({ locationName: record.jcdd, locationObj: null, pageObj: null, type: record['deviceType'] });
    } else if (deviceType.value.startsWith('gasDay')) {
      actions.setGlobalState({ locationName: record.strInstallPos, locationObj: null, pageObj: null, type: record['deviceType'] });
    } else if (deviceType.value == 'gasDayReport') {
      actions.setGlobalState({ locationName: record.jcdd, locationObj: null, pageObj: null, type: record['deviceType'] });
    } else if (deviceType.value.startsWith('substation')) {
      actions.setGlobalState({ locationId: record.id, locationObj: null, pageObj: null, type: record['deviceType'] });
    } else {
      if (deviceType.value.startsWith('location')) {
        actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null, type: 'person' });
      } else if (deviceType.value.startsWith('vehicle')) {
        actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null, type: 'car' });
      } else {
        actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
      }
    }
  }
  function getSearch(param) {
    (gasSearch.address = param.address), (gasSearch.userName = param.userName), (gasSearch.insType = param.insType), (gasSearch.class = param.class);
  }
  // 详情跳转
  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;
        modalVisible.value = true;
      } else if (deviceType.value.startsWith('firemon_normal')) {
        // currentModal.value = BundleModal;
        currentModal.value = WisdomBallModal;
        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.startsWith('door')) {
        const newPage = router.resolve({ path: '/monitorChannel/monitor-firedoor', query: { id: activeID.value, deviceType: deviceType.value } });
        window.open(newPage.href, '_blank');
      } else if (deviceType.value.indexOf('gate') != -1) {
        const newPage = router.resolve({ path: '/monitorChannel/monitor-gate', query: { id: activeID.value, deviceType: deviceType.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, deviceType: deviceType.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, deviceType: deviceType.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, deviceType: deviceType.value } });
        window.open(newPage.href, '_blank');
      } else if (deviceType.value.indexOf('fanlocal') != -1 && glob.sysOrgCode !== 'ymdnymdn') {
        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('fanlocal') != -1 && glob.sysOrgCode == 'ymdnymdn') {
        const newPage = router.resolve({ path: '/monitorChannel/monitor-fanlocal1', query: { id: activeID.value, deviceType: record.deviceType } });
        window.open(newPage.href, '_blank');
      } else if (deviceType.value.indexOf('pulping') != -1) {
        // const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
        const newPage = router.resolve({ path: '/grout-home' });
        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 if (deviceType.value.indexOf('forcFan') != -1) {
        const newPage = router.resolve({ path: '/forcFan/home', query: { id: activeID.value } });
        window.open(newPage.href, '_blank');
      } else if (deviceType.value.indexOf('pulping') != -1) {
        // const newPage = router.resolve({ path: '/grout-home', query: { id: activeID.value } });
        const newPage = router.resolve({ path: '/grout-home' });
        window.open(newPage.href, '_blank');
      } else if (deviceType.value.indexOf('gasmonitor') != -1) {
        const newPage = router.resolve({ path: '/gas/warn/home' });
        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 if (deviceType.value.indexOf('pulping') != -1) {
        // const newPage = router.resolve({ path: '/grout-home', query: { id: systemID.value } });
        const newPage = router.resolve({ path: '/grout-home' });
        window.open(newPage.href, '_blank');
      } else if (deviceType.value.indexOf('gasDay_normal') != -1) {
        const newPage = router.resolve({ path: '/gas/gas-report-inspect/home' });
        window.open(newPage.href, '_blank');
      } else if (deviceType.value.indexOf('gasDayReport') != -1) {
        const newPage = router.resolve({ path: '/gas/gasDayReport/home' });
        window.open(newPage.href, '_blank');
      } else if (deviceType.value.indexOf('dustDayReport') != -1) {
        const newPage = router.resolve({ path: '/dustDayReport/home' });
        window.open(newPage.href, '_blank');
      } else if (deviceType.value.indexOf('bundleDayReport') != -1) {
        const newPage = router.resolve({ path: '/bundleDayReport/home' });
        window.open(newPage.href, '_blank');
      } else if (deviceType.value.indexOf('bundleSpyDayReport') != -1) {
        const newPage = router.resolve({ path: '/bundleSpyDayReport/home' });
        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 = '';
    go(glob.homePath);
  }

  function toHide() {
    tableShow.value = !tableShow.value;
    document.getElementById('monitorBox').addEventListener('animationend', () => {
      if (!tableShow.value) {
        document.getElementById('monitorBox').style.height = '0px';
      } else {
        document.getElementById('monitorBox').style.height = '290';
      }
    });
  }

  async function findTreeDataValue(obj) {
    const findDeviceType = (data: any[], obj, flag = true) => {
      return data.find((item: any) => {
        if (item.children.length > 0) {
          findDeviceType(item.children, obj);
        }
        // debugger;
        if (obj.deviceType && obj.deviceType.startsWith('sys_')) {
          // debugger;
          if (item.type == obj.deviceid) {
            deviceType.value = 'sys';
            systemID.value = obj.deviceid;
            selectedKeys.value = [item.key];
            expandedKeys.value = [item.key];
            treeNodeTitle.value = item.title;
          }
        } else {
          if (!flag) {
            if (obj.deviceType && item.type.startsWith(obj.deviceType)) {
              deviceType.value = item.type;
              selectedKeys.value = [item.key];
              expandedKeys.value = [item.key];
              treeNodeTitle.value = item.title;
              return true;
            }
            return false;
          } else {
            if (obj.deviceType && item.type == obj.deviceType) {
              deviceType.value = item.type;
              selectedKeys.value = [item.key];
              expandedKeys.value = [item.key];
              treeNodeTitle.value = item.title;
              return true;
            }
            return false;
          }
        }
        return false;
      });
    };
    const flag = findDeviceType(treeData.value, obj);
    if (!flag) {
      findDeviceType(treeData.value, obj, false);
    }
    // 无类型时
    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 == 'monitor' && monitorTable.value) {
      monitorTable.value.setLoading(true);
      dataSource.value = deviceList.value[index].datalist;
    }
    if (activeKey.value == 'history' && historyTable.value) {
      historyTable.value.setLoading(true);
    }
    if (activeKey.value == 'alarm' && 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 && pageObj.pageType && pageObj.pageType.startsWith('sys_')) {
        //   findTreeDataValue({ deviceid: systemID.value });
        // } else {
        //   findTreeDataValue({ deviceType: pageObj.pageType });
        // }
        findTreeDataValue(pageObj);
      });
    },
    { immediate: true }
  );

  onMounted(async () => {
    const pageObj = props.pageData;
    if (!pageObj) return;
    if (pageObj && pageObj.pageType) {
      if (pageObj.pageType.startsWith('sys_')) {
        await getDeviceType(pageObj.pageType);
        findTreeDataValue({ deviceType: pageObj.pageType, deviceid: pageObj.deviceid });
      } else {
        await getDeviceType();
        findTreeDataValue({ deviceType: pageObj.pageType });
      }
    } else {
      await getDeviceType();
      findTreeDataValue({ deviceid: pageObj.deviceid });
    }
    // 定位
    const posShowData = pageObj.locationPlane;
    if (posShowData) {
      locationList.value = posShowData;
    } else {
      locationList.value = await devPosition({});
    }

    router.push({ path: route.path, query: { ...route.query, tabtype: activeKey.value } });
    // safetyOption.value = await safetyDeviceList(null, { devicetype: 'safetymonitor', code: 'dataTypeName' })
  });

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

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

  @{theme-deepblue} {
    .scene-box {
      // --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
      // --image-tree-icon-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-bg.png');
      // --image-tree-icon-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-hover-bg.png');
      // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
      // --image-tree-expansion-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-bg.png');
      // --image-tree-expansion-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-expansion-hover-bg.png');
      // --image-location-bg: url('/@/assets/images/themify/deepblue/vent/home/location-bg.png');
      // --image-location-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/location-hover-bg.png');
      // --image-tree-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-bg.png');
      // --image-turn-location-top-bg: url('/@/assets/images/themify/deepblue/vent/home/turn-location-top-bg.png');
      // --image-tree-icon-cover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-bg.png');
      // --image-tree-icon-cover-hover-bg: url('/@/assets/images/themify/deepblue/vent/home/tree-icon-cover-hover-bg.png');
      // --image-tohome: url('/@/assets/images/themify/deepblue/vent/home/tohome.png');
      // --tree-node-select: #0963c1;
      // --tree-node-hover: #0f376ccc;
      // --location-bottom-bg: #21324855;
      // --location-bottom-border: #aed1ff4d;
    }
  }

  .scene-box {
    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
    --image-tree-icon-bg: url('/@/assets/images/vent/home/tree-icon-bg.png');
    --image-tree-icon-hover-bg: url('/@/assets/images/vent/home/tree-icon-hover-bg.png');
    --image-tree-bg: url('/@/assets/images/vent/home/tree-bg.png');
    --image-tree-expansion-bg: url('/@/assets/images/vent/home/tree-expansion-bg.png');
    --image-tree-expansion-hover-bg: url('/@/assets/images/vent/home/tree-expansion-hover-bg.png');
    --image-location-bg: url('/@/assets/images/vent/home/location-bg.png');
    --image-location-hover-bg: url('/@/assets/images/vent/home/location-hover-bg.png');
    --image-turn-location-top-bg: url('/@/assets/images/vent/home/turn-location-top-bg.png');
    --image-tree-icon-cover-bg: url('/@/assets/images/vent/home/tree-icon-cover-bg.png');
    --image-tree-icon-cover-hover-bg: url('/@/assets/images/vent/home/tree-icon-cover-hover-bg.png');
    --image-tohome: url('/@/assets/images/vent/home/tohome.png');
    --tree-node-select: #00b1c8;
    --tree-node-hover: #00b1c855;
    --location-bottom-bg: #00709955;
    --location-bottom-border: #aef3ff4d;
  }

  .top-header {
    position: fixed;
    width: 100%;
    height: 56px;
    background: var(--image-modal-top);
    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: var(--vent-font-color);
    display: flex;
    justify-content: center;
    font-size: 22px;

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

  .expansion-icon {
    background: var(--image-tree-icon-bg) no-repeat;
    background-size: contain;
    position: absolute;
    left: 190px;
    top: 25px;

    &:hover {
      background: var(--image-tree-icon-hover-bg) no-repeat;
      background-size: contain;
    }
  }

  .device-select {
    width: 250px;
    height: 500px;
    background: var(--image-tree-bg) no-repeat;
    position: fixed;
    top: 100px;
    left: 10px;
    background-size: contain;
    pointer-events: auto;
    padding: 20px 10px 30px 10px;
  }

  .inspect-info-xj {
    position: fixed;
    top: 100px;
    left: 250px;
    width: 320px;
    height: 272px;
    padding: 20px;
    background: url('@/assets/images/inspect-bg.png') no-repeat center;
    background-size: 100% 100%;
    box-sizing: border-box;
  }

  .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) 0.5s;
  }

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

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

    &:hover {
      background: var(--image-tree-expansion-hover-bg) 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) 0.5s;
  }

  .device-select-box {
    width: 208px;
    height: 450px;
    overflow-y: auto;
    color: var(--vent-font-color);

    :deep(.zxm-tree) {
      background: transparent !important;
      color: var(--vent-font-color) !important;

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

      .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
        background-color: var(--tree-node-select);
      }

      .zxm-tree-node-content-wrapper:hover {
        background-color: var(--tree-node-hover);
      }

      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;
    background: var(--image-location-bg) no-repeat;
    background-size: contain;
    writing-mode: vertical-lr;
    line-height: 46px;
    color: var(--vent-font-color);
    padding-top: 10px;
    pointer-events: auto;
    cursor: pointer;

    &:hover {
      background: var(--image-location-hover-bg) no-repeat;
    }

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

  .location-select {
    position: fixed;
    top: 100px;
    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: var(--image-tree-bg) no-repeat;
        background-size: contain;
        transform: rotateY(180deg);
        z-index: -1;
      }

      .location-top-title {
        color: var(--vent-font-color);
        position: absolute;
        width: 225px;
        height: 68px;
        background: var(--image-turn-location-top-bg) 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: var(--image-tree-icon-cover-bg) no-repeat;
        background-size: contain;
        position: relative;
        left: 10px;
        top: -15px;
        padding: 5px;

        &:hover {
          background: var(--image-tree-icon-cover-hover-bg) 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: var(--vent-font-color);
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        // background-image: var(--vent-gas-list-item-bg-img);
        background-image: linear-gradient(to left, #39f5ff05, #39f5ff10);
        margin: 3px 0;

        .item-title {
          width: 80px;
          text-align: right;
          color: var(--vent-table-action-link);
        }
      }

      .location-bottom-btn {
        width: 100%;
        color: var(--vent-font-color);
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;

        span {
          display: inline-block;
          width: 100%;
          background: var(--location-bottom-bg);
          border-radius: 3px;
          border: 1px solid var(--location-bottom-border);
          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) 0.5s;
  }

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

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

  .location-btn-hide {
    right: -240px;
    animation-name: locationBtnHide;
    /* 持续时间 */
    animation-duration: 1s;
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  }

  .tabs-box {
    height: 290px;
  }

  .bottom-tabs-box {
    position: relative;

    .tabs-box {
      width: calc(100% - 12px) !important;
      bottom: 3px !important;
      background-color: red;
    }

    .to-small {
      position: absolute;
      top: -65px;
      right: 36px;
      display: flex;
      align-items: center;
      justify-content: center;

      .to-home {
        width: 60px;
        height: 60px;
        background: var(--image-tohome) no-repeat center;
        background-size: auto;
        padding: 8px;

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

      .table-show-icon {
        width: 30px;
        height: 30px;
        font-size: 30px;
        color: var(--vent-font-color);
        margin-left: 10px;
      }
    }

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

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

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

    .table-hide-icon {
      color: var(--vent-font-color);
      cursor: pointer;
      position: absolute;
      right: 20px;
      top: 10px;
      z-index: 9999;
    }

    .enter-detail {
      color: var(--vent-font-color);
      cursor: pointer;
      position: absolute;
      right: 35px;
      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: var(--vent-font-color);
      padding: 5px 15px 5px 15px;
      z-index: 999;
      cursor: pointer;

      &:hover {
        background: var(--vent-device-manager-control-btn-hover);
      }

      &::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: var(--vent-device-manager-control-btn);
      }
    }
  }

  .table-hide {
    height: 0px;
    animation-name: tableHide;
    /* 持续时间 */
    animation-duration: 1s;
    transition: all 1s;
  }

  .table-show {
    height: 290px;
    animation-name: tableShow;
    /* 持续时间 */
    animation-duration: 1s;
    transition: all 1s;
  }

  .location-form {
    display: flex;
    margin: 8px;

    .location-form-item {
      width: 400px;

      .location-form-label {
        width: 100px;
        display: inline-block;
        color: var(--vent-font-color);
      }

      input {
        background: transparent !important;
        color: var(--vent-font-color);
        border: 1px solid var(--vent-form-item-border) !important;
      }
    }

    .zxm-select-selector {
      width: 200px !important;
    }
  }

  @keyframes tableShow {
    0% {
      height: 0px;
      opacity: 0;
    }

    100% {
      height: 290px;
      opacity: 1;
    }
  }

  @keyframes tableHide {
    0% {
      opacity: 1;
    }

    100% {
      height: 0px;
      opacity: 0;
    }
  }

  @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}-picker-datetime-panel) {
    height: 200px !important;
    overflow-y: auto !important;
  }

  :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;
    }
  }

  .device-button {
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--vent-font-color);
    position: relative;
    cursor: pointer;
    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);

    &: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);
    // }
  }

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