mky-vent-base/src/views/vent/safetyList/common/detail-130.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: 8 }" :wrapper-col="{ span: 16 }">
                <a-form-item label="风速">
                  <a-input 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>
            </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-button preIcon="ant-design:sync-outlined" @click="visibleModalEdit1 = true">重置</a-button> -->
          <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 #expandedRowRender>
              <a-table :columns="deviceColumns" :data-source="tableData2" :pagination="false" />
            </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>
          </a-modal>
        </div>
        <!-- 操作记录 -->
        <div class="detail-content" v-if="activeKey == 'operationRecord'">
          <operateRecord :operationData="operationData" @get-search-record="getSearchRecord" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, onUnmounted } from 'vue';
  import { usePermission } from '/@/hooks/web/usePermission';
  import {
    subStationList,
    getList,
    getListAll,
    getEdit,
    runDeviceMonitor,
    update130DevName,
    updateDebugStatus,
    get130StationData,
    set130StationDevicesRead,
    set130StationData,
    get130StationDevices,
    set130StationRead,
    remove130Substation,
    get130SetLog,
    remove130Device,
  } 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';

  const expandedRowKeys = reactive<any[]>([]);
  const { hasPermission } = usePermission();
  const activeKey = ref('device');
  const cardList = ref<any[]>([]);
  const activeIndex = ref(null);
  const isShow = ref(false);
  const stationName = ref('');
  const stationStatus = ref(null);
  const ljList = reactive<any[]>([
    { value: 0, label: '断开' },
    { value: 1, label: '连接' },
  ]);
  const selectedIndex = ref(0);
  const openNum = ref(0);
  const clsoeNum = ref(0);
  const tableData = ref<any[]>([]);
  const tableData1 = ref<any[]>([]);
  const tableData2 = ref<any[]>([]);
  //分页参数配置
  const 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'], // 可选的每页显示条数
  });
  const visibleModalEdit = ref(false);
  const visibleModalEdit1 = ref(false);
  const 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: '',
  });
  const formView = reactive({
    dylfsfx: '',
    dylbjzt: '',
    dyl1f2sADz: '',
    dyl2f1sADz: '',
    tfl: '',
    yjbb: '',
    rjbb: '',
    zxlxbz: '',
    rqsj: '',
  });

  const cgqList = reactive<any[]>([]);
  const devId = ref('');
  const startupDataEdit = reactive({
    address: '',
  });
  //一键启动弹窗
  const visibleModal = ref(false);
  const startupData = reactive({
    address: '',
  });
  const paramId = ref('');
  const startupDataDebug = reactive({
    speed: '',
    direction: '',
  });
  const visibleModalDebug = ref(false);
  const debugFlag = ref('');
  const debugStationId = ref('');
  const debugDeviceId = ref('');
  const derictList = reactive<any[]>([
    { label: '正向', value: '0' },
    { label: '反向', value: '1' },
  ]);
  const devStationId = ref('');
  const stationId = ref('');
  const scroll = reactive({
    y: 680,
  });
  const operationData = ref<any[]>([]); //操作记录列表
  //定时刷新左侧分站数据
  let timer: any = null;
  function getMonitor(flag = false) {
    timer = setTimeout(
      async () => {
        await getSubStationList();
        if (timer) {
          timer = null;
        }
        getMonitor();
      },
      flag ? 0 : 3000
    );
  }
  let timer1: any = null;
  function getMonitor1(flag = false) {
    timer1 = setTimeout(
      async () => {
        await getStationList();
        if (timer1) {
          timer1 = null;
        }
        getMonitor1();
      },
      flag ? 0 : 5000
    );
  }
  let timer2: any = null;
  function getMonitor2(flag = false) {
    timer2 = setTimeout(
      async () => {
        await getShowReadList();
        if (timer2) {
          timer2 = null;
        }
        getMonitor2();
      },
      flag ? 0 : 3000
    );
  }
  async function getDeviceList() {
    const res = await set130StationRead({ stationId: devStationId.value, deviceId: formEdit.cgq });
    if (res) {
      getMonitor2(true);
    }
  }
  async function getShowReadList() {
    const data = await get130StationData();
    if (data && data.length != 0) {
      const list = data.filter((v) => v.stationId == devStationId.value)[0];
      formView.dylfsfx = list.dylfsfx;
      formView.dyl1f2sADz = list.dyl1f2sADz;
      formView.dyl2f1sADz = list.dyl2f1sADz;
      formView.tfl = list.tfl;
      formView.yjbb = list.yjbb;
      formView.rjbb = list.rjbb;
      formView.zxlxbz = list.zxlxbz;
      formView.rqsj = list.rqsj;
    }
  }
  async function tableExpand(expaned, record) {
    const res = await set130StationDevicesRead({ stationId: record.stationId });
    if (res && expaned) {
      expandedRowKeys.length = 0;
      const data = await get130StationData();
      tableData2.value = data.filter((v) => v.stationId == record.stationId)[0].deviceList || [];
      expandedRowKeys.push(record.stationId);
    } else {
      expandedRowKeys.length = 0;
    }
  }

  //tab选项切换
  async function onChangeTab(tab) {
    activeKey.value = tab;
    stationId.value = '';
    clearTimeout(timer1);
    clearTimeout(timer);
    if (activeKey.value == 'device') {
      await getSubStationList();
      await getStationList1();
      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);
    formEdit.id = '';
    formEdit.cgq = '';
    formEdit.rs485modbusdz = '';
    formEdit.ttazjl = '';
    formEdit.jxjl = '';
    formEdit.azjd = '';
    formEdit.szsz = '';
    formEdit.sjpjzq = '';
    formEdit.dylyfesPGz = '';
    formEdit.dylefysPGz = '';
    formEdit.fdjmj = '';
    formEdit.dylztxsk = '';
    formEdit.dyldydxs1 = '';
    formEdit.dyldedxs2 = '';
    formEdit.dyldsdxs3 = '';
    formEdit.dyldsdxs4 = '';
    formEdit.dyldwdxs5 = '';
    formEdit.dyldldxs6 = '';
    formEdit.xsKB = '';
    formEdit.xsKBfh = '';
    formEdit.gbjyz = '';
    formEdit.dbjyz = '';
    formEdit.bjsn = '';
    formEdit.dyl485btl = '';
    formEdit.sgzjbcmm = '';

    formView.dylfsfx = '';
    formView.dylbjzt = '';
    formView.dyl1f2sADz = '';
    formView.dyl2f1sADz = '';
    formView.tfl = '';
    formView.yjbb = '';
    formView.rjbb = '';
    formView.zxlxbz = '';
    formView.rqsj = '';
  }
  //获取详细信息列表
  async function getStationList() {
    const res = await get130StationData();
    res.forEach((el) => {
      el.linkstatusC = el.linkstatus ? '连接' : '断开';
      el.key = el.stationId;
    });
    tableData1.value = res;
  }
  //传感器选项切换
  function changeCgq(val) {
    formEdit.cgq = val;
  }
  //编辑
  async function handleEdit(record) {
    cgqList.length = 0;
    visibleModalEdit1.value = true;
    devStationId.value = record.stationId;
    const res = await get130StationDevices({ stationId: devStationId.value });
    console.log(res, '分站下设备下拉选项-------------');
    if (res.length != 0) {
      res.forEach((el) => {
        cgqList.push({ label: el.strinstallpos, value: el.id });
      });
    }
  }

  //下发
  async function handleClick(data) {
    switch (data) {
      case 'RS485_MODBUS地址':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'rs485modbusdz', value: formEdit.rs485modbusdz });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '探头安装距离':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'ttazjl', value: formEdit.ttazjl });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '基线距离':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'jxjl', value: formEdit.jxjl });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '安装角度':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'azjd', value: formEdit.azjd });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '设置时长':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'szsz', value: formEdit.szsz });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '数据平均周期':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'sjpjzq', value: formEdit.sjpjzq });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '第一路一发二收PG值':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylyfesPGz', value: formEdit.dylyfesPGz });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '第一路二发一收PG值':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylefysPGz', value: formEdit.dylefysPGz });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '风道截面积':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'fdjmj', value: formEdit.fdjmj });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '第一路整体系数k':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylztxsk', value: formEdit.dylztxsk });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '第一路第一段系数':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldydxs1', value: formEdit.dyldydxs1 });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '第一路第二段系数':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldedxs2', value: formEdit.dyldedxs2 });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '第一路第三段系数':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldsdxs3', value: formEdit.dyldsdxs3 });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '第一路第四段系数':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldsdxs4', value: formEdit.dyldsdxs4 });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '第一路第五段系数':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldwdxs5', value: formEdit.dyldwdxs5 });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '第一路第六段系数':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldldxs6', value: formEdit.dyldldxs6 });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '系数KB':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'xsKB', value: formEdit.xsKB });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '系数KB符号':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'xsKBfh', value: formEdit.xsKBfh });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '高报警阈值':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'gbjyz', value: formEdit.gbjyz });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '低报警阈值':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dbjyz', value: formEdit.dbjyz });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '报警使能':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'bjsn', value: formEdit.bjsn });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '第一路485波特率':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyl485btl', value: formEdit.dyl485btl });
        visibleModalEdit1.value = false;
        getStationList();
        break;
      case '四个字节保存密码':
        await set130StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'sgzjbcmm', value: formEdit.sgzjbcmm });
        visibleModalEdit1.value = false;
        getStationList();
        break;
    }
  }

  //获取分站实时监测信息
  async function getSubStationList() {
    const res = await subStationList({ strtype: 'modbus', reqparam: 130 });
    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 = [];
    }
  }
  //分站站点选项点击
  function cardClick(item, index) {
    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();
  }
  //分站站点名称编辑
  function changeName() {
    getChangeStation();
  }
  async function getChangeStation() {
    await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value });
    getSubStationList();
    isShow.value = false;
  }
  //站点连接状态修改
  function changeStatus() {
    getChangeStation();
  }
  //获取详细信息列表
  async function getStationList1() {
    const 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.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.valueJc = `风向:${v.forward || ''},风量:${v.m3 || ''}m³/min,风速:${v.windSpeed || ''}m/s,气压:${v.pa || ''}Pa,压差:${
            v.difPress || ''
          }Pa,温度:${v.temperature || ''}℃,湿度:${v.humidity || ''}%,断面积:${v.area || ''}㎡`;
        });
      });
    }

    tableData.value = res;
    pagination.total = res.total;
  }
  async function getStationListAll() {
    const 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.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.valueJc = `风向:${v.forward || ''},风量:${v.m3 || ''}m³/min,风速:${v.windSpeed || ''}m/s,气压:${v.pa || ''}Pa,压差:${
          v.difPress || ''
        }Pa,温度:${v.temperature || ''}℃,湿度:${v.humidity || ''}%,断面积:${v.area || ''}㎡`;
      });
    });
    tableData.value = res;
    // pagination.total = res.total;
  }
  //显示全部
  function getAllShow() {
    // pagination.current = 1;
    // stationId.value = '';
    getStationListAll();
  }
  //启动新设备
  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 remove130Device({ devId: devId.value });
        getStationList1();
        break;
    }
  }
  //分站，设备调试
  function debugClick(record) {
    if (record.debugTitle == '调试') {
      //正在调试中
      startupDataDebug.speed = '';
      startupDataDebug.direction = '';
      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 = '结束调试';
      // if (record.devInfoList) {
      //     debugFlag.value = 'station'
      //     debugStationId.value = record.id
      //     tableData.value.forEach(el => {
      //         el.debugTitle = '结束调试'
      //         el.devInfoList.forEach(v => {
      //             v.debugTitle = '结束调试'
      //         })
      //     })
      // } else {
      //     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;
      tableData.value.forEach((el) => {
        el.devInfoList.forEach((v) => {
          if (v.id == debugDeviceId.value) {
            debugStationId.value = el.id;
          }
        });
      });
      record.debugTitle = '调试';
      stopDebug();
      // if (record.devInfoList) {
      //     debugFlag.value = 'station'
      //     debugStationId.value = record.id
      //     tableData.value.forEach(el => {
      //         el.debugTitle = '调试'
      //         el.devInfoList.forEach(v => {
      //             v.debugTitle = '调试'
      //         })
      //     })
      //     stopDebug()
      // } else {
      //     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 = '调试'
      //     stopDebug()
      // }
    }
  }
  //停止调试
  async function stopDebug() {
    const res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' });
    if (res) {
      getStationList1();
    }
    // if (debugFlag.value == 'station') {
    //     const res = await updateDebugStatus({ stationId: debugStationId.value, debugFlag: '0' })
    //     getStationList1()
    // } else {
    //     const res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' })
    //     getStationList1()
    // }
  }
  async function handleOk() {
    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') {
      const res = await update130DevName({ subId: devId.value, devName: startupDataEdit.address });
      console.log(res, '设备名称编辑---');
      visibleModalEdit.value = false;
      getStationList1();
    } else {
      const res = await update130DevName({ devId: devId.value, devName: startupDataEdit.address });
      console.log(res, '设备名称编辑---');
      visibleModalEdit.value = false;
      getStationList1();
    }
  }
  //取消编辑
  function handleCancelEdit() {
    visibleModalEdit.value = false;
    startupDataEdit.address = '';
  }
  //调试确认
  async function handleOkDebug() {
    const res = await updateDebugStatus({
      stationId: debugStationId.value,
      deviceId: debugDeviceId.value,
      speed: startupDataDebug.speed,
      direction: startupDataDebug.direction,
      debugFlag: '1',
    });
    if (res) {
      visibleModalDebug.value = false;
      getStationList1();
    }
    // if (debugFlag.value == 'station') {
    //     const res = await updateDebugStatus({ stationId: debugStationId.value, speed: startupDataDebug.speed, direction: startupDataDebug.direction, debugFlag: '1' })
    //     visibleModalDebug.value = false
    //     getStationList1()
    // } else {
    //     const res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, speed: startupDataDebug.speed, direction: startupDataDebug.direction, debugFlag: '1' })
    //     visibleModalDebug.value = false
    //     getStationList1()
    // }
  }
  //调试取消
  function handleCancelDebug() {
    visibleModalDebug.value = false;
    tableData.value.forEach((el) => {
      el.devInfoList.forEach((v) => {
        v.debugTitle = v.deviceType == 'windrect_ds_25x' || v.deviceType == 'windrect_ds_two' ? '调试' : '';
      });
    });
    debugFlag.value = '';
    debugStationId.value = '';
    debugDeviceId.value = '';
  }
  //分页切换
  function pageChange(val) {
    pagination.current = val.current;
    pagination.pageSize = val.pageSize;
    getStationList1();
  }

  //删除左侧分站
  async function handleDelStation() {
    const res = await remove130Substation({ stationId: stationId.value });
    console.log(res, '删除左侧分站');
    if (res) {
      getSubStationList();
      getStationList1();
    }
  }
  //取消删除左侧分站
  function handleCancelDelStation() {}

  //操作记录查询
  async function getSearchRecord(param) {
    const res = await get130SetLog({ ...param });
    if (res && res.length != 0) {
      operationData.value = res.records;
    }
  }
  onMounted(async () => {
    await getSubStationList();
    await getStationList1();
    getMonitor();
  });
  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
    if (timer1) {
      clearTimeout(timer1);
      timer1 = undefined;
    }
  });
</script>

<style lang="less" scoped>
  .safetyList {
    --image-bj1: url('/@/assets/images/fire/bj1.png');
    --image-zd-2: url('/@/assets/images/zd-2.png');
    --image-zd-3: url('/@/assets/images/zd-3.png');
    --image-zd-1: url('/@/assets/images/zd-1.png');
    --image-top-btn: url('/@/assets/images/top-btn.png');
    --image-top-btn-select: url('/@/assets/images/top-btn-select.png');

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

      .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: var(--image-bj1) 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: 182px;
                height: 120px;
                margin-bottom: 15px;
                display: flex;
                justify-content: center;

                .card-itemN {
                  position: relative;
                  width: 85px;
                  height: 120px;
                  background: var(--image-zd-2) 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: var(--image-zd-3) 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: var(--image-zd-1) 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: var(--image-bj1) 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: var(--image-bj1) 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: var(--image-bj1) 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: var(--image-zd-2) 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: var(--image-zd-3) 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: var(--image-zd-1) 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: var(--image-bj1) 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;
  }

  .card-item.selected {
    border: 2px solid #3ad8ff77;
  }

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

    .zxm-tabs-tab {
      width: 180px;
      height: 45px;
      background: var(--image-top-btn) center no-repeat;
      background-size: cover;
      display: flex;
      justify-content: center;
      font-size: 16px;
    }

    .zxm-tabs-tab-active {
      width: 180px;
      position: relative;
      background: var(--image-top-btn-select) 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;
    }
  }
</style>