mky-vent-base/src/views/vent/safetyList/common/detail.vue

<template>
  <div class="safetyList">
    <customHeader>监控分站管理详情</customHeader>
    <div class="content">
      <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
        <a-tab-pane tab="分站监测" key="device" />
        <a-tab-pane tab="历史数据" key="history" />
        <a-tab-pane tab="监测详情" key="manageAuto" />
        <a-tab-pane tab="操作记录" key="operationRecord" />
      </a-tabs>
      <div class="box-content">
        <!-- 分站监测 -->
        <div class="now-content" v-if="activeKey == 'device'">
          <div class="left-box">
            <div class="left-title">
              <div class="title-fz">
                <span>分站：</span>
                <span>
                  [通讯正常]
                  <span class="zd-open">{{ openNum || 0 }}</span>
                </span>
                <span>
                  [通讯中断]
                  <span class="zd-close">{{ clsoeNum || 0 }}</span>
                </span>
              </div>
              <div class="title-btn" style="margin-left: 55%">
                <a-button type="primary" size="small" @click="getAllShow">显示全部</a-button>
              </div>
            </div>
            <div class="left-content">
              <div class="card-box" v-for="(item, index) in cardList" :key="index">
                <div :class="[
                  'card-item',
                  {
                    selected: selectedIndex === index,
                    'card-itemN': item.isNewAccess,
                    'card-itemL': !item.isNewAccess && item.linkstatus,
                    'card-itemD': !item.isNewAccess && !item.linkstatus,
                  },
                ]" @click="cardClick(item, index)">
                  <div class="card-item-label">{{ item.strname }}</div>
                </div>
                <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'" v-if="activeIndex == index && isShow">
                  <div class="modal-name">站点名称：</div>
                  <a-input v-model:value="stationName" size="small" placeholder="请输入" @blur="changeName" />
                  <div class="modal-lj">连接状态：</div>
                  <a-radio-group v-model:value="stationStatus" size="small" :options="ljList" @change="changeStatus" />
                  <a-popconfirm title="删除内容无法恢复，是否删除" ok-text="确定" cancel-text="取消" @confirm="handleDelStation"
                    @cancel="handleCancelDelStation">
                    <a-button type="primary" preIcon="ant-design:delete-outlined" size="mini"
                      class="down-btn">删除</a-button>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="right-title">详细信息：</div>
            <a-table size="small" :scroll="{ y: 680 }" :columns="columns" :data-source="tableData"
              :pagination="pagination" @change="pageChange">
              <template #action="{ record }">
                <a-button v-if="!record.devInfoList" type="primary" :disabled="record.linkId != '0'" size="small"
                  @click="handlerunDeviceMonitor(record, '启动')">启动</a-button>
                <a-button type="success" size="small" style="margin: 0px 10px"
                  @click="handlerunDeviceMonitor(record, '编辑')">编辑</a-button>
                <a-popconfirm title="删除内容无法恢复，是否删除" ok-text="确定" cancel-text="取消"
                  @confirm="handlerunDeviceMonitor(record, '删除')" @cancel="handleCancelDelStation">
                  <a-button v-if="!record.devInfoList" type="success" size="small"
                    style="margin-right:10px">删除</a-button>
                </a-popconfirm>
                <a-button type="primary" v-if="!record.devInfoList" size="small" @click="debugClick(record)">{{
                  record.debugTitle }}</a-button>
              </template>
              <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'valueJc' && text">
                  <div v-for="item in text.split(',')" :key="item">
                    <span
                      v-if="item.substring(item.indexOf(':') + 1) && !isNaN(parseFloat(item.substring(item.indexOf(':') + 1)))"
                      style="display: inline-block; width: 42%; text-align: right; color: rgb(0, 242, 255); margin-right: 5px">{{
                        item.substring(0, item.indexOf(':') + 1) }}</span>
                    <span
                      v-if="item.substring(item.indexOf(':') + 1) && !isNaN(parseFloat(item.substring(item.indexOf(':') + 1)))"
                      style="display: inline-block; width: 52%; text-align: left; color: #fff">{{
                        item.substring(item.indexOf(':') + 1) === '1'
                          ? '正风'
                          : item.substring(item.indexOf(':') + 1) === '2'
                            ? '反风'
                            : item.substring(item.indexOf(':') + 1)
                      }}
                    </span>
                  </div>
                </template>
              </template>
            </a-table>
            <!-- 一键启动弹窗 -->
            <a-modal style="top: 300px; left: 360px" v-model:visible="visibleModal" :width="450" title="一键启动"
              @ok="handleOk" @cancel="handleCancel">
              <a-form :model="startupData" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                <a-form-item label="安装位置">
                  <a-input v-model:value="startupData.address" placeholder="请输入" style="width: 260px" />
                </a-form-item>
              </a-form>
            </a-modal>
            <!-- 编辑弹窗 -->
            <a-modal style="top: 300px; left: 360px" v-model:visible="visibleModalEdit" :width="450" title="编辑信息"
              @ok="handleOkEdit" @cancel="handleCancelEdit">
              <a-form :model="startupDataEdit" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                <a-form-item label="安装位置">
                  <a-input v-model:value="startupDataEdit.address" placeholder="请输入" style="width: 260px" />
                </a-form-item>
              </a-form>
            </a-modal>
            <!-- 调试弹窗 -->
            <a-modal style="top: 300px; left: 360px" v-model:visible="visibleModalDebug" :width="450" title="调试信息"
              @ok="handleOkDebug" @cancel="handleCancelDebug">
              <a-form :model="startupDataDebug" labelAlign="right" :label-col="{ span: 12 }"
                :wrapper-col="{ span: 12 }">
                <a-form-item label="风速">
                  <a-input type="number" v-model:value="startupDataDebug.speed" placeholder="请输入"
                    style="width: 260px" />
                </a-form-item>
                <a-form-item label="风向">
                  <a-select v-model:value="startupDataDebug.direction" style="width: 260px">
                    <a-select-option v-for="file in derictList" :key="file.label" :value="file.value">{{ file.label
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="密码">
                  <a-input type="password" v-model:value="startupDataDebug.pwd" placeholder="请输入"
                    style="width: 260px" />
                </a-form-item>
                <a-form-item label="浮动范围">
                  <a-input type="number" v-model:value="startupDataDebug.range" placeholder="请输入"
                    style="width: 260px" />
                </a-form-item>
              </a-form>
            </a-modal>
            <!-- 结束调试弹窗 -->
            <a-modal style="top: 300px; left: 360px" v-model:visible="visibleModalDebugEnd" :width="450" title="调试信息"
              @ok="handleOkDebugEnd" @cancel="handleCancelDebugEnd">
              <a-form :model="startupDataDebugEnd" labelAlign="right" :label-col="{ span: 12 }"
                :wrapper-col="{ span: 12 }">
                <a-form-item label="密码">
                  <a-input type="password" v-model:value="startupDataDebugEnd.pwd" placeholder="请输入"
                    style="width: 260px" />
                </a-form-item>
              </a-form>
            </a-modal>
          </div>
        </div>
        <!-- 历史数据 -->
        <div class="history-content" v-if="activeKey == 'history'">
          <div class="left-box">
            <div class="left-title">
              <div class="title-fz">
                <span>分站：</span>
                <span>
                  [通讯正常]
                  <span class="zd-open">{{ openNum || 0 }}</span>
                </span>
                <span>
                  [通讯中断]
                  <span class="zd-close">{{ clsoeNum || 0 }}</span>
                </span>
              </div>
            </div>
            <div class="left-content">
              <div class="card-box" v-for="(item, index) in cardList" :key="index">
                <div :class="[
                  'card-item',
                  {
                    selected: selectedIndex === index,
                    'card-itemN': item.isNewAccess,
                    'card-itemL': !item.isNewAccess && item.linkstatus,
                    'card-itemD': !item.isNewAccess && !item.linkstatus,
                  },
                ]" @click="cardClick(item, index)">
                  <div class="card-item-label">{{ item.strname }}</div>
                </div>
                <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'" v-if="activeIndex == index && isShow">
                  <div class="modal-name">站点名称：</div>
                  <a-input v-model:value="stationName" size="small" placeholder="请输入" @blur="changeName" />
                  <div class="modal-lj">连接状态：</div>
                  <a-radio-group v-model:value="stationStatus" size="small" :options="ljList" @change="changeStatus" />
                  <a-popconfirm title="删除内容无法恢复，是否删除" ok-text="确定" cancel-text="取消" @confirm="handleDelStation"
                    @cancel="handleCancelDelStation">
                    <a-button type="primary" preIcon="ant-design:delete-outlined" size="mini"
                      class="down-btn">删除</a-button>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </div>
          <div class="right-box">
            <HistoryTable class="historytable" :scroll="scroll" :historyColumns="historyColumns"
              :stationId="stationId" />
          </div>
        </div>
        <!-- 监测详情 -->
        <div class="detail-content" v-if="activeKey == 'manageAuto'">

          <a-table size="small" :scroll="{ y: 710 }" :row-key="(record) => record.stationId"
            :expandedRowKeys="expandedRowKeys" :columns="columnsDetail" :data-source="tableData1" @expand="tableExpand">
            <template #action="{ record }">
              <a-button v-if="hasPermission('operateRecord:return') && record.deviceList" type="primary" size="small"
                @click="handleEdit(record)">编辑</a-button>
            </template>
            <template #bodyCell="{ column, text }"></template>
            <template #expandedRowRender="{ record }">
              <a-table :columns="deviceColumns" :data-source="record.deviceList" :pagination="false" maxWidth="340"
                :scroll="{ x: 'max-content', y: 200 }">
                <!-- <template #action="{ record }"></template>
    <template #bodyCell="{ column }"></template> -->
              </a-table>
            </template>
          </a-table>
          <!-- 编辑弹窗 -->
          <a-modal v-model:visible="visibleModalEdit1" :width="1100" @cancel="cancenModal"
            :bodyStyle="{ display: 'flex', height: '680px', 'overflow-y': 'auto', 'margin-bottom': '15px' }"
            title="编辑信息" :footer="null">
            <a-form :model="formView" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-form-item label="第一路风速风向：">
                <a-input v-model:value="formView.dylfsfx" placeholder="请输入" disabled
                  style="width: 260px; margin-right: 10px" />
              </a-form-item>
              <a-form-item label="第一路报警状态：">
                <a-input v-model:value="formView.dylbjzt" placeholder="请输入" disabled
                  style="width: 260px; margin-right: 10px" />
              </a-form-item>
              <a-form-item label="第一路1发2收AD值：">
                <a-input v-model:value="formView.dyl1f2sADz" placeholder="请输入" disabled
                  style="width: 260px; margin-right: 10px" />
              </a-form-item>
              <a-form-item label="第一路2发1收AD值：">
                <a-input v-model:value="formView.dyl2f1sADz" placeholder="请输入" disabled
                  style="width: 260px; margin-right: 10px" />
              </a-form-item>
              <a-form-item label="通风量：">
                <a-input v-model:value="formView.tfl" placeholder="请输入" disabled
                  style="width: 260px; margin-right: 10px" />
              </a-form-item>
              <a-form-item label="硬件版本：">
                <a-input v-model:value="formView.yjbb" placeholder="请输入" disabled
                  style="width: 260px; margin-right: 10px" />
              </a-form-item>
              <a-form-item label="软件版本：">
                <a-input v-model:value="formView.rjbb" placeholder="请输入" disabled
                  style="width: 260px; margin-right: 10px" />
              </a-form-item>
              <a-form-item label="在线离线标志：">
                <a-input v-model:value="formView.zxlxbz" placeholder="请输入" disabled
                  style="width: 260px; margin-right: 10px" />
              </a-form-item>
              <a-form-item label="日期和时间：">
                <a-input v-model:value="formView.rqsj" placeholder="请输入" disabled
                  style="width: 260px; margin-right: 10px" />
              </a-form-item>
            </a-form>

            <a-form :model="formEdit" labelAlign="right" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
              <a-form-item label="传感器设备：">
                <a-select v-model:value="formEdit.cgq" @change="changeCgq" style="width: 260px; margin-right: 10px">
                  <a-select-option v-for="(file, index) in cgqList" :key="index" :value="file.value">{{ file.label
                  }}</a-select-option>
                </a-select>
                <a-button type="success" @click="getDeviceList">读取</a-button>
              </a-form-item>
              <a-form-item label="RS485_MODBUS地址：">
                <a-input v-model:value="formEdit.rs485modbusdz" placeholder="请输入"
                  style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('RS485_MODBUS地址')">下发</a-button>
              </a-form-item>
              <a-form-item label="探头安装距离：">
                <a-input v-model:value="formEdit.ttazjl" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('探头安装距离')">下发</a-button>
              </a-form-item>
              <a-form-item label="基线距离：">
                <a-input v-model:value="formEdit.jxjl" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('基线距离')">下发</a-button>
              </a-form-item>
              <a-form-item label="安装角度：">
                <a-input v-model:value="formEdit.azjd" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('安装角度')">下发</a-button>
              </a-form-item>
              <a-form-item label="设置时长：">
                <a-input v-model:value="formEdit.szsz" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('设置时长')">下发</a-button>
              </a-form-item>
              <a-form-item label="数据平均周期：">
                <a-input v-model:value="formEdit.sjpjzq" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('数据平均周期')">下发</a-button>
              </a-form-item>
              <a-form-item label="第一路一发二收PG值：">
                <a-input v-model:value="formEdit.dylyfesPGz" placeholder="请输入"
                  style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('第一路一发二收PG值')">下发</a-button>
              </a-form-item>
              <a-form-item label="第一路二发一收PG值：">
                <a-input v-model:value="formEdit.dylefysPGz" placeholder="请输入"
                  style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('第一路二发一收PG值')">下发</a-button>
              </a-form-item>
              <a-form-item label="风道截面积：">
                <a-input v-model:value="formEdit.fdjmj" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('风道截面积')">下发</a-button>
              </a-form-item>
              <a-form-item label="第一路整体系数k：">
                <a-input v-model:value="formEdit.dylztxsk" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('第一路整体系数k')">下发</a-button>
              </a-form-item>
              <a-form-item label="第一路第一段系数：">
                <a-input v-model:value="formEdit.dyldydxs1" placeholder="请输入"
                  style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('第一路第一段系数')">下发</a-button>
              </a-form-item>
              <a-form-item label="第一路第二段系数：">
                <a-input v-model:value="formEdit.dyldedxs2" placeholder="请输入"
                  style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('第一路第二段系数')">下发</a-button>
              </a-form-item>
              <a-form-item label="第一路第三段系数：">
                <a-input v-model:value="formEdit.dyldsdxs3" placeholder="请输入"
                  style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('第一路第三段系数')">下发</a-button>
              </a-form-item>
              <a-form-item label="第一路第四段系数：">
                <a-input v-model:value="formEdit.dyldsdxs4" placeholder="请输入"
                  style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('第一路第四段系数')">下发</a-button>
              </a-form-item>
              <a-form-item label="第一路第五段系数：">
                <a-input v-model:value="formEdit.dyldwdxs5" placeholder="请输入"
                  style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('第一路第五段系数')">下发</a-button>
              </a-form-item>
              <a-form-item label="第一路第六段系数：">
                <a-input v-model:value="formEdit.dyldldxs6" placeholder="请输入"
                  style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('第一路第六段系数')">下发</a-button>
              </a-form-item>
              <a-form-item label="系数KB：">
                <a-input v-model:value="formEdit.xsKB" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('系数KB')">下发</a-button>
              </a-form-item>
              <a-form-item label="系数KB符号：">
                <a-input v-model:value="formEdit.xsKBfh" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('系数KB符号')">下发</a-button>
              </a-form-item>
              <a-form-item label="高报警阈值：">
                <a-input v-model:value="formEdit.gbjyz" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('高报警阈值')">下发</a-button>
              </a-form-item>
              <a-form-item label="低报警阈值：">
                <a-input v-model:value="formEdit.dbjyz" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('低报警阈值')">下发</a-button>
              </a-form-item>
              <a-form-item label="报警使能：">
                <a-input v-model:value="formEdit.bjsn" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('报警使能')">下发</a-button>
              </a-form-item>
              <a-form-item label="第一路485波特率：">
                <a-input v-model:value="formEdit.dyl485btl" placeholder="请输入"
                  style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('第一路485波特率')">下发</a-button>
              </a-form-item>
              <a-form-item label="四个字节保存密码：">
                <a-input v-model:value="formEdit.sgzjbcmm" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('四个字节保存密码')">下发</a-button>
              </a-form-item>
              <a-form-item label="复位：">
                <a-input v-model:value="formEdit.fw" placeholder="请输入" style="width: 260px; margin-right: 10px" />
                <a-button class="down-btn" type="primary" @click="handleClick('复位')">下发</a-button>
              </a-form-item>
            </a-form>
          </a-modal>
        </div>
        <!-- 操作记录 -->
        <div class="detail-content" v-if="activeKey == 'operationRecord'">
          <operateRecord :operationData="operationData" @getSearchRecord="getSearchRecord"></operateRecord>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive, onMounted, onUnmounted, inject } from 'vue';
import { usePermission } from '/@/hooks/web/usePermission';
import {
  subStationList,
  getList,
  getListAll,
  getEdit,
  runDeviceMonitor,
  update158DevName,
  updateDebugStatus,
  get158StationData,
  set158StationDevicesRead,
  set158StationData,
  get158StationDevices,
  set158StationRead,
  remove158Substation,
  get158SetLog,
  remove158Device
} from '../safetyList.api';
import { historyColumns } from '../historyLsit.data';
import { columnsDetail, columns, deviceColumns } from '../safetyList.data';
import HistoryTable from './HistoryTable.vue';
import customHeader from '/@/components/vent/customHeader.vue';
import operateRecord from './operateRecord.vue'
import { AesEncryption } from '/@/utils/cipher';
import { loginCipher } from '/@/settings/encryptionSetting';
import { message } from 'ant-design-vue';

let expandedRowKeys = reactive<any[]>([])
const { hasPermission } = usePermission();
let activeKey = ref('device');
let cardList = ref<any[]>([]);
let activeIndex = ref(null);
let isShow = ref(false);
let stationName = ref('');
let stationStatus = ref(null);
let ljList = reactive<any[]>([
  { value: 0, label: '断开' },
  { value: 1, label: '连接' },
]);
let selectedIndex = ref(0);
let openNum = ref(0);
let clsoeNum = ref(0);
let tableData = ref<any[]>([]);
let tableData1 = ref<any[]>([]);
//分页参数配置
let pagination = reactive({
  current: 1, // 当前页码
  pageSize: 20, // 每页显示条数
  total: 0, // 总条目数，后端返回
  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
  showSizeChanger: true, // 是否可改变每页显示条数
  pageSizeOptions: ['10', '20', '30', '40', '50', '100'], // 可选的每页显示条数
});
let visibleModalEdit = ref(false);
let visibleModalEdit1 = ref(false);
let formEdit = reactive({
  id: '',
  cgq: '',
  rs485modbusdz: '',
  ttazjl: '',
  jxjl: '',
  azjd: '',
  szsz: '',
  sjpjzq: '',
  dylyfesPGz: '',
  dylefysPGz: '',
  fdjmj: '',
  dylztxsk: '',
  dyldydxs1: '',
  dyldedxs2: '',
  dyldsdxs3: '',
  dyldsdxs4: '',
  dyldwdxs5: '',
  dyldldxs6: '',
  xsKB: '',
  xsKBfh: '',
  gbjyz: '',
  dbjyz: '',
  bjsn: '',
  dyl485btl: '',
  sgzjbcmm: '',
  fw: '',
});
let formView = reactive({
  dylfsfx: '',
  dylbjzt: '',
  dyl1f2sADz: '',
  dyl2f1sADz: '',
  tfl: '',
  yjbb: '',
  rjbb: '',
  zxlxbz: '',
  rqsj: '',
});

let cgqList = reactive<any[]>([]);
let devId = ref('');
let startupDataEdit = reactive({
  address: '',
});
//一键启动弹窗
let visibleModal = ref(false);
let startupData = reactive({
  address: '',
});
let paramId = ref('');
let startupDataDebug = reactive({
  speed: '',
  direction: '',
  pwd: '',
  range: '',
});
let visibleModalDebug = ref(false);
let debugFlag = ref('');
let debugStationId = ref('');
let debugDeviceId = ref('');
let derictList = reactive<any[]>([
  { label: '正向', value: '0' },
  { label: '反向', value: '1' },
]);
let devStationId = ref('');
let stationId = ref('');
const scroll = reactive({
  y: 680,
});
//结束调试弹窗相关信息
let visibleModalDebugEnd = ref(false);
let startupDataDebugEnd = reactive({
  pwd: '',
});

let operationData = ref<any[]>([])//操作记录列表
let timer: null | NodeJS.Timeout = null;
/**
 * 获取监控数据并设置轮询定时器
 * @param flag - 是否立即执行（true为立即执行，false为延迟3秒执行）
 */
function getMonitor(flag = false) {
  timer = setTimeout(
    async () => {
      await getSubStationList();
      if (activeKey.value == 'device') {
        await getStationList1();
      }
      if (timer) {
        timer = null;
      }
      getMonitor();
    },
    flag ? 0 : 3000
  );
}
let timer1: null | NodeJS.Timeout = null;
function getMonitor1(flag = false) {
  timer1 = setTimeout(
    async () => {
      await getStationList();
      if (timer1) {
        timer1 = null;
      }
      getMonitor1();
    },
    flag ? 0 : 3000
  );
}
let timer2: null | NodeJS.Timeout = null;
function getMonitor2(flag = false) {
  timer2 = setTimeout(
    async () => {
      await getShowReadList();
      if (timer2) {
        timer2 = null;
      }
      getMonitor2();
    },
    flag ? 0 : 3000
  );
}
let timer3: null | NodeJS.Timeout = null;
function getMonitor3(flag = false) {
  timer3 = setTimeout(
    async () => {
      await getStationListAll();
      if (timer3) {
        timer3 = null;
      }
      getMonitor3();
    },
    flag ? 0 : 3000
  );
}
/**
 * 获取设备列表数据
 * 调用站点读取接口获取设备信息，成功后刷新监测数据
 */
async function getDeviceList() {
  let res = await set158StationRead({ stationId: devStationId.value, deviceId: formEdit.cgq });
  if (res) {
    getMonitor2(true)
  }
}
/**
 * 获取并显示158站点数据
 * 从158站点数据列表中筛选出当前设备站点对应的数据，
 * 将相关测量值（电压、流量、液位、报警等）赋值到表单视图对象
 */
async function getShowReadList() {
  let data = await get158StationData();
  if (data && data.length) {
    let list = data.find((v) => v.stationId == devStationId.value);
    if (list) {
      const { dylfsfx, dyl1f2sADz, dyl2f1sADz, tfl, yjbb, rjbb, zxlxbz, rqsj } = list;
      Object.assign(formView, { dylfsfx, dyl1f2sADz, dyl2f1sADz, tfl, yjbb, rjbb, zxlxbz, rqsj });
    }
  }
}
/**
 * 表格展开/收起处理函数
 *
 * @param expaned - 是否展开，true为展开，false为收起
 * @param record - 当前行的记录数据，包含stationId字段
 * @returns Promise<void>
 */
async function tableExpand(expaned, record) {
  let res = await set158StationDevicesRead({ stationId: record.stationId })
  if (res && expaned) {
    // expandedRowKeys.length=0
    let data = await get158StationData();
    tableData1.value = data
    expandedRowKeys.push(record.stationId)
  } else {
    expandedRowKeys.length = 0
  }
}


/**
 * 标签页切换处理函数
 *
 * 根据选中的标签页类型执行相应的数据加载操作：
 * - device: 加载设备监控数据
 * - history: 加载子站点列表、站点列表及监控数据
 * - manageAuto: 加载站点列表及监控数据1
 * - operationRecord: 加载操作记录
 *
 * 切换时会清空定时器并重置站点ID
 *
 * @param {string} tab - 切换到的标签页标识
 * @returns {Promise<void>}
 */
async function onChangeTab(tab) {
  activeKey.value = tab;
  stationId.value = '';
  [timer, timer1, timer2, timer3].forEach((t) => t && clearTimeout(t));

  if (activeKey.value === 'device') {
    getMonitor();
  } else if (activeKey.value === 'history') {
    await getSubStationList();
    await getStationList();
    getMonitor();
  } else if (activeKey.value === 'manageAuto') {
    await getStationList();
    getMonitor1(true);
  } else if (activeKey.value === 'operationRecord') {
    await getSearchRecord({ stationId: '', deviceId: '' });
  }
}

/**
 * 取消模态框
 * 清除表单编辑数据和查看数据，重置所有字段为空字符串
 */
function cancenModal() {
  clearTimeout(timer2);
  Object.assign(formEdit, {
    id: '',
    cgq: '',
    rs485modbusdz: '',
    ttazjl: '',
    jxjl: '',
    azjd: '',
    szsz: '',
    sjpjzq: '',
    dylyfesPGz: '',
    dylefysPGz: '',
    fdjmj: '',
    dylztxsk: '',
    dyldydxs1: '',
    dyldedxs2: '',
    dyldsdxs3: '',
    dyldsdxs4: '',
    dyldwdxs5: '',
    dyldldxs6: '',
    xsKB: '',
    xsKBfh: '',
    gbjyz: '',
    dbjyz: '',
    bjsn: '',
    dyl485btl: '',
    sgzjbcmm: '',
    fw: '',
  });
  Object.assign(formView, {
    dylfsfx: '',
    dylbjzt: '',
    dyl1f2sADz: '',
    dyl2f1sADz: '',
    tfl: '',
    yjbb: '',
    rjbb: '',
    zxlxbz: '',
    rqsj: '',
  });
}
/**
 * 获取158协议站点列表数据
 * 调用接口获取站点数据，并对数据进行转换处理：
 * - 将连接状态布尔值转换为中文文本
 * - 设置唯一键值
 */
async function getStationList() {
  let res = await get158StationData();
  tableData1.value = res.map((el) => {
    el.linkstatusC = el.linkstatus ? '连接' : '断开';
    el.key = el.stationId;
    return el;
  });
}
/**
 * 传感器选项切换
 * @param {any} val - 选中的传感器值
 */
function changeCgq(val) {
  formEdit.cgq = val;
}
/**
 * 打开编辑弹窗并加载站点设备列表
 * @param {Object} record - 包含站点信息的记录对象
 * @param {string|number} record.stationId - 站点ID
 */
async function handleEdit(record) {
  cgqList.length = 0;
  visibleModalEdit1.value = true;
  devStationId.value = record.stationId;
  let res = await get158StationDevices({ stationId: devStationId.value });
  if (res.length != 0) {
    res.forEach((el) => {
      cgqList.push({ label: el.strinstallpos, value: el.id });
    });
  }
}

/**
 * 下发配置项数据到站点
 *
 * 根据传入的配置项类型，将对应的配置数据下发给指定站点的设备，
 * 下发成功后关闭弹窗并刷新站点列表
 *
 * @param data - 配置项类型，支持以下类型：
 *   - 'RS485_MODBUS地址'
 *   - '探头安装距离'
 *   - '基线距离'
 *   - '安装角度'
 *   - '设置时长'
 *   - '数据平均周期'
 *   - '第一路一发二收PG值'
 *   - '第一路二发一收PG值'
 *   - '风道截面积'
 *   - '第一路整体系数k'
 *   - '第一路第一段系数'
 *   - '第一路第二段系数'
 *   - '第一路第三段系数'
 *   - '第一路第四段系数'
 *   - '第一路第五段系数'
 *   - '第一路第六段系数'
 *   - '系数KB'
 *   - '系数KB符号'
 *   - '高报警阈值'
 *   - '低报警阈值'
 *   - '报警使能'
 *   - '第一路485波特率'
 *   - '四个字节保存密码'
 *   - '复位'
 * @returns 无返回值
 */
async function handleClick(data) {
  switch (data) {
    case 'RS485_MODBUS地址':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'rs485modbusdz', value: formEdit.rs485modbusdz });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '探头安装距离':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'ttazjl', value: formEdit.ttazjl });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '基线距离':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'jxjl', value: formEdit.jxjl });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '安装角度':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'azjd', value: formEdit.azjd });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '设置时长':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'szsz', value: formEdit.szsz });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '数据平均周期':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'sjpjzq', value: formEdit.sjpjzq });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '第一路一发二收PG值':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylyfesPGz', value: formEdit.dylyfesPGz });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '第一路二发一收PG值':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylefysPGz', value: formEdit.dylefysPGz });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '风道截面积':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'fdjmj', value: formEdit.fdjmj });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '第一路整体系数k':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylztxsk', value: formEdit.dylztxsk });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '第一路第一段系数':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldydxs1', value: formEdit.dyldydxs1 });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '第一路第二段系数':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldedxs2', value: formEdit.dyldedxs2 });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '第一路第三段系数':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldsdxs3', value: formEdit.dyldsdxs3 });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '第一路第四段系数':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldsdxs4', value: formEdit.dyldsdxs4 });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '第一路第五段系数':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldwdxs5', value: formEdit.dyldwdxs5 });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '第一路第六段系数':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldldxs6', value: formEdit.dyldldxs6 });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '系数KB':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'xsKB', value: formEdit.xsKB });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '系数KB符号':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'xsKBfh', value: formEdit.xsKBfh });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '高报警阈值':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'gbjyz', value: formEdit.gbjyz });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '低报警阈值':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dbjyz', value: formEdit.dbjyz });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '报警使能':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'bjsn', value: formEdit.bjsn });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '第一路485波特率':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyl485btl', value: formEdit.dyl485btl });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '四个字节保存密码':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'sgzjbcmm', value: formEdit.sgzjbcmm });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
    case '复位':
      await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'fw', value: formEdit.fw });
      visibleModalEdit1.value = false;
      cancenModal()
      getStationList();
      break;
  }
}

/**
 * 获取子站列表数据
 * 调用modbus类型接口获取子站列表，并更新相关状态
 */
async function getSubStationList() {
  let res = await subStationList({ strtype: 'modbus', reqparam: '158' });
  if (res.length != 0) {
    cardList.value = res;
    stationId.value = stationId.value ? stationId.value : cardList.value[0].id
    openNum.value = cardList.value?.filter((v) => v.linkstatus == 1)['length'];
    clsoeNum.value = cardList.value?.filter((v) => v.linkstatus == 0)['length'];
  } else {
    cardList.value = [];
  }
}
/**
 * 分站站点选项点击事件处理
 * @param item - 站点数据对象
 * @param index - 站点索引
 */
function cardClick(item, index) {
  clearTimeout(timer3)
  clearTimeout(timer)
  selectedIndex.value = index; // 更新选中索引
  activeIndex.value = item.isNewAccess || !item.linkstatus ? index : null;
  stationName.value = item.strname;
  stationStatus.value = item.linkstatus;
  stationId.value = item.id;
  isShow.value = true;
  getStationList1();
  getMonitor()
}
//分站站点名称编辑
function changeName(val) {
  getChangeStation();
}
/**
 * @description 更新站点信息并刷新列表
 */
async function getChangeStation() {
  let res = await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value });
  getSubStationList();
  isShow.value = false;
}
//站点连接状态修改
function changeStatus(val) {
  getChangeStation();
}
/**
 * 获取站点列表数据
 *
 * @returns {Promise<void>}
 */
async function getStationList1() {
  let res = await getList({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
  if (res && res.length != 0) {
    res.forEach((el) => {
      el.key = el.id;
      el.linkIdC = el.linkId || '';
      el.stripC = el.strip || '';
      el.linkstatusC = el.linkstatus ? '连接' : '断开';
      el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : '';
      el.children = el.devInfoList;
      el.children.forEach((v) => {
        v.key = v.id;
        v.debugTitle = v.deviceType == 'windrect_ds_25x' || v.deviceType == 'windrect_ds_two' ? v.status === 1 ? '结束调试' : v.status === 0 ? '调试' : '' : ''
        v.stripC = v.strserno || '';
        v.linkstatusC = v.netStatus ? '连接' : '断开';
        v.linkIdC = v.linkId == '0' ? '未启用' : v.linkId == '1' ? '启用' : v.linkId == '2' ? '设备异常' : '';
        v.updateTime = v.time;
        v.gdmsC = v.gdms == '1' ? '直流供电' : v.gdms == '0' ? '交流供电' : '';
        v.gd5 = `温度:${v.temperature || ''}℃,湿度:${v.humidity || ''}%,绝压:${v.pa || ''}Pa,压差:${v.yacha || ''
          }Pa,密度:${v.density || ''}kg/m³`;
        v.common = `风向:${v.forward || ''},风量:${v.m3 || ''}m³/min,风速:${v.windSpeed || ''}m/s,气压:${v.pa || ''}Pa,压差:${v.difPress || ''
          }Pa,温度:${v.temperature || ''}℃,湿度:${v.humidity || ''}%,断面积:${v.area || ''}㎡`

        v.valueJc = v.deviceType == 'modelsensor_gd5' ? v.gd5 : v.common
      });
    });
  }

  tableData.value = res;
  pagination.total = res.total;
}
/**
 * 获取所有站点列表并进行数据格式化
 * 调用API获取站点数据，对站点及子设备进行中文标签转换，
 * 生成表格展示所需的各类状态文本和传感器数据字符串
 */
async function getStationListAll() {
  let res = await getListAll();
  res.forEach((el) => {
    el.key = el.id;
    el.linkIdC = el.linkId || '';
    el.stripC = el.strip || '';
    el.linkstatusC = el.linkstatus ? '连接' : '断开';
    el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : '';
    el.children = el.devInfoList;
    el.children.forEach((v) => {
      v.key = v.id;
      v.debugTitle = v.deviceType == 'windrect_ds_25x' || v.deviceType == 'windrect_ds_two' ? v.status === 1 ? '结束调试' : v.status === 0 ? '调试' : '' : ''
      v.stripC = v.strserno || '';
      v.linkstatusC = v.netStatus ? '连接' : '断开';
      v.linkIdC = v.linkId == '0' ? '未启用' : v.linkId == '1' ? '启用' : v.linkId == '2' ? '设备异常' : '';
      v.updateTime = v.time;
      v.gdmsC = v.gdms == '1' ? '直流供电' : v.gdms == '0' ? '交流供电' : '';
      v.gd5 = `温度:${v.temperature || ''}℃,湿度:${v.humidity || ''}%,绝压:${v.pa || ''}Pa,压差:${v.yacha || ''
        }Pa,密度:${v.density || ''}kg/m³`;
      v.common = `风向:${v.forward || ''},风量:${v.m3 || ''}m³/min,风速:${v.windSpeed || ''}m/s,气压:${v.pa || ''}Pa,压差:${v.difPress || ''
        }Pa,温度:${v.temperature || ''}℃,湿度:${v.humidity || ''}%,断面积:${v.area || ''}㎡`

      v.valueJc = v.deviceType == 'modelsensor_gd5' ? v.gd5 : v.common
    });
  });
  tableData.value = res;
  // pagination.total = res.total;
}
//显示全部
function getAllShow() {
  clearTimeout(timer)
  clearTimeout(timer3)
  getStationListAll()
  getMonitor3()
}
//启动新设备
async function handlerunDeviceMonitor(record, val) {
  devId.value = record.id;
  switch (val) {
    case '编辑':
      visibleModalEdit.value = true;
      startupDataEdit.address = record.strinstallpos;
      paramId.value = record.devInfoList ? 'subId' : 'devId';
      break;
    case '启动':
      visibleModal.value = true;
      startupData.address = record.strinstallpos;
      break;
    case '删除':
      await remove158Device({ devId: devId.value })
      getStationList1()
      break;
  }
}
//分站，设备调试
function debugClick(record) {
  if (record.debugTitle == '调试') {
    //正在调试中
    startupDataDebug.speed = '';
    startupDataDebug.direction = '';
    startupDataDebug.pwd = ''
    startupDataDebug.range = ''
    visibleModalDebug.value = true;
    debugFlag.value = 'device';
    debugDeviceId.value = record.id;
    tableData.value.forEach((el) => {
      el.devInfoList.forEach((v) => {
        if (v.id == debugDeviceId.value) {
          debugStationId.value = el.id;
        }
      });
    });
    // record.debugTitle = '结束调试';

  } else if (record.debugTitle == '结束调试') {
    debugFlag.value = 'device';
    debugDeviceId.value = record.id;
    visibleModalDebugEnd.value = true
    startupDataDebugEnd.pwd = ''
    tableData.value.forEach((el) => {
      el.devInfoList.forEach((v) => {
        if (v.id == debugDeviceId.value) {
          debugStationId.value = el.id;
        }
      });
    });
    // record.debugTitle = '调试';
  }
}
//确定结束调试
async function handleOkDebugEnd() {
  const encryption = new AesEncryption({ key: loginCipher.key, iv: loginCipher.iv });
  let res = await updateDebugStatus({ pwd: encryption.encryptByAES(startupDataDebugEnd.pwd), stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' });
  if (res.code == 500) {
    message.error(res.message);
  } else {
    visibleModalDebugEnd.value = false;
    getStationList1();
  }
}
//取消结束调试
function handleCancelDebugEnd() {
  visibleModalDebugEnd.value = false;
  debugFlag.value = '';
  debugStationId.value = '';
  debugDeviceId.value = '';
}
async function handleOk() {
  let res = await runDeviceMonitor({ devId: devId.value, devName: startupData.address });
  visibleModal.value = false;
  getStationList1();
}
function handleCancel() {
  visibleModal.value = false;
  startupData.address = '';
}
//编辑
async function handleOkEdit() {
  if (paramId.value == 'subId') {
    let res = await update158DevName({ subId: devId.value, devName: startupDataEdit.address });
    visibleModalEdit.value = false;
    getStationList1();
  } else {
    let res = await update158DevName({ devId: devId.value, devName: startupDataEdit.address });
    visibleModalEdit.value = false;
    getStationList1();
  }
}
//取消编辑
function handleCancelEdit() {
  visibleModalEdit.value = false;
  startupDataEdit.address = '';
}
//调试确认
async function handleOkDebug() {
  const encryption = new AesEncryption({ key: loginCipher.key, iv: loginCipher.iv });
  let res = await updateDebugStatus({
    stationId: debugStationId.value,
    deviceId: debugDeviceId.value,
    speed: startupDataDebug.speed,
    direction: startupDataDebug.direction,
    range: startupDataDebug.range,
    pwd: encryption.encryptByAES(startupDataDebug.pwd),
    debugFlag: '1',
  });
  if (res.code == 500) {
    message.error(res.message);
  } else {
    visibleModalDebug.value = false;
    getStationList1();
  }
}
//调试取消
function handleCancelDebug() {
  visibleModalDebug.value = false;
  debugFlag.value = '';
  debugStationId.value = '';
  debugDeviceId.value = '';
}
//分页切换
function pageChange(val) {
  pagination.current = val.current;
  pagination.pageSize = val.pageSize;
  getStationList1();
}

//删除左侧分站
async function handleDelStation() {
  let res = await remove158Substation({ stationId: stationId.value })
  if (res) {
    getSubStationList();
    getStationList1();
  }
}
//取消删除左侧分站
function handleCancelDelStation() { }

//操作记录查询
async function getSearchRecord(param) {
  let res = await get158SetLog({ stationType: '158', ...param })
  if (res && res.length != 0) {
    operationData.value = res.records
  }
}
onMounted(async () => {
  await getSubStationList();
  await getStationList1();
  getMonitor();
});
onUnmounted(() => {
  [timer, timer1, timer2, timer3].forEach((t) => t && clearTimeout(t));
  timer = timer1 = timer2 = timer3 = undefined;
});
</script>

<style lang="less" scoped>
.safetyList {
  width: calc(100% - 20px);
  height: calc(100% - 80px);
  position: relative;
  margin: 70px 10px 10px 10px;

  .content {
    position: relative;
    width: 100%;
    height: 100%;

    .tab-box {
      display: flex;
      color: #fff;
      position: relative;
      background: linear-gradient(#001325, #012e4f);

      :deep(.zxm-tabs-nav) {
        margin: 0 !important;

        .zxm-tabs-tab {
          width: 180px;
          height: 45px;
          background: url('/@/assets/images/top-btn.png') center no-repeat;
          background-size: cover;
          display: flex;
          justify-content: center;
          font-size: 16px;
        }

        .zxm-tabs-tab-active {
          width: 180px;
          position: relative;
          background: url('/@/assets/images/top-btn-select.png') center no-repeat;
          background-size: cover;

          .zxm-tabs-tab-btn {
            color: #fff !important;
          }
        }

        .zxm-tabs-ink-bar {
          width: 0 !important;
        }

        .zxm-tabs-tab+.zxm-tabs-tab {
          margin: 0 !important;
        }
      }
    }

    .box-content {
      height: calc(100% - 50px);
      padding-top: 10px;
      box-sizing: border-box;

      .now-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-box {
          width: 40%;
          height: 100%;
          margin-right: 15px;
          padding: 10px;
          box-sizing: border-box;
          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
          background-size: 100% 100%;

          .left-title {
            display: flex;
            height: 30px;
            align-items: center;
            font-size: 14px;
            margin-bottom: 10px;

            span {
              color: #fff;
            }

            .zd-open {
              color: rgb(0, 242, 255);
            }

            .zd-close {
              color: #ff0000;
            }

            .title-fz {
              margin-right: 25px;
            }
          }

          .left-content {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            height: calc(100% - 40px);
            overflow-y: auto;

            .card-box {
              position: relative;
              // width: 242px;
              width: 182px;
              height: 120px;
              margin-bottom: 15px;
              display: flex;
              justify-content: center;

              .card-itemN {
                position: relative;
                width: 85px;
                height: 120px;
                background: url('/@/assets/images/zd-2.png') no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;

                .card-item-label {
                  width: 100%;
                  position: absolute;
                  bottom: 5px;
                  font-size: 12px;
                  color: #fff;
                  text-align: center;
                }
              }

              .card-itemL {
                position: relative;
                width: 85px;
                height: 120px;
                background: url('/@/assets/images/zd-3.png') no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;

                .card-item-label {
                  width: 100%;
                  position: absolute;
                  bottom: 5px;
                  font-size: 12px;
                  color: #fff;
                  text-align: center;
                }
              }

              .card-itemD {
                position: relative;
                width: 85px;
                height: 120px;
                background: url('/@/assets/images/zd-1.png') no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;

                .card-item-label {
                  width: 100%;
                  position: absolute;
                  bottom: 5px;
                  font-size: 12px;
                  color: #fff;
                  text-align: center;
                }
              }

              .card-modal {
                width: 86px;
                position: absolute;
                left: 140px;
                color: #fff;
                top: 50%;
                transform: translate(0, -50%);
                font-size: 12px;
              }

              .card-modal1 {
                width: 86px;
                position: absolute;
                left: -42px;
                color: #fff;
                top: 50%;
                transform: translate(0, -50%);
                font-size: 12px;
              }
            }
          }
        }

        .right-box {
          width: calc(60% - 15px);
          height: 100%;
          padding: 10px;
          box-sizing: border-box;
          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
          background-size: 100% 100%;

          .right-title {
            display: flex;
            height: 30px;
            align-items: center;
            font-size: 14px;
            color: #fff;
            margin-bottom: 10px;
          }
        }
      }

      .detail-content {
        width: 100%;
        height: 100%;
      }

      .history-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url('/@/assets/images/fire/bj1.png') no-repeat center;
        background-size: 100% 100%;
        color: #fff;

        .left-box {
          width: 40%;
          height: 100%;
          margin-right: 15px;
          padding: 10px;
          box-sizing: border-box;
          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
          background-size: 100% 100%;

          .left-title {
            display: flex;
            height: 30px;
            align-items: center;
            font-size: 14px;
            margin-bottom: 10px;

            span {
              color: #fff;
            }

            .zd-open {
              color: rgb(0, 242, 255);
            }

            .zd-close {
              color: #ff0000;
            }

            .title-fz {
              margin-right: 25px;
            }
          }

          .left-content {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            height: calc(100% - 40px);
            overflow-y: auto;

            .card-box {
              position: relative;
              // width: 242px;
              width: 182px;
              height: 120px;
              margin-bottom: 15px;
              display: flex;
              justify-content: center;

              .card-itemN {
                position: relative;
                width: 85px;
                height: 120px;
                background: url('/@/assets/images/zd-2.png') no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;

                .card-item-label {
                  width: 100%;
                  position: absolute;
                  bottom: 5px;
                  font-size: 12px;
                  color: #fff;
                  text-align: center;
                }
              }

              .card-itemL {
                position: relative;
                width: 85px;
                height: 120px;
                background: url('/@/assets/images/zd-3.png') no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;

                .card-item-label {
                  width: 100%;
                  position: absolute;
                  bottom: 5px;
                  font-size: 12px;
                  color: #fff;
                  text-align: center;
                }
              }

              .card-itemD {
                position: relative;
                width: 85px;
                height: 120px;
                background: url('/@/assets/images/zd-1.png') no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;

                .card-item-label {
                  width: 100%;
                  position: absolute;
                  bottom: 5px;
                  font-size: 12px;
                  color: #fff;
                  text-align: center;
                }
              }

              .card-modal {
                width: 86px;
                position: absolute;
                left: 140px;
                color: #fff;
                top: 50%;
                transform: translate(0, -50%);
                font-size: 12px;
              }

              .card-modal1 {
                width: 86px;
                position: absolute;
                left: -42px;
                color: #fff;
                top: 50%;
                transform: translate(0, -50%);
                font-size: 12px;
              }
            }
          }
        }

        .right-box {
          width: calc(60% - 15px);
          height: 100%;
          padding: 10px;
          box-sizing: border-box;
          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
          background-size: 100% 100%;

          .historytable {
            height: 100%;
          }

          .right-title {
            display: flex;
            height: 30px;
            align-items: center;
            font-size: 14px;
            color: #fff;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}

.down-btn {
  line-height: 15px;
  height: 20px;
  padding: 0px 17px;
  font-size: 12px;
}

.zxm-form {
  width: 50%;
  height: 100%;
  padding-top: 20px !important;
  box-sizing: border-box;
}

.zxm-picker,
.zxm-input {
  border: 1px solid #3ad8ff77 !important;
  background-color: #ffffff !important;
  color: #fff !important;
}

.card-item.selected {
  border: 2px solid #3ad8ff77;
  /* 选中时的边框颜色 */
}

::v-deep(.zxm-radio-wrapper) {
  font-size: 12px;
}

::v-deep(.zxm-input) {
  font-size: 12px;
}

::v-deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  border: 1px solid #3ad8ff77 !important;
}

// ::v-deep(.zxm-select-selection-item) {
//   color: #fff ;
// }

// ::v-deep(.zxm-form-item-label > label) {
//   color: #fff !important;
// }</style>
<style>
div[aria-hidden='true'] {
  display: none !important;
}
</style>
//
//
<style lang="less" scoped>
// // .search-area {
// //   width: 100%;
// //   padding: 5px;
// //   margin: 10px;
// //   box-sizing: border-box;
// // }

// // .card-item.selected {
// //   border: 2px solid #3ad8ff77;
// //   /* 选中时的边框颜色 */
// // }
// // </style>