分站管理历史数据

src/views/vent/deviceManager/comment/HistoryTable.vue

@@ -75,6 +75,19 @@ watch(
       // getForm();
     }
     dataSource.value = [];
+    // const column = getTableHeaderColumns(newVal.includes('_history') ? newVal : newVal + '_history');
+    // if (column && column.length < 1) {
+    //   const arr = newVal.split('_');
+    //   console.log('历史记录列表表头------------>', arr[0] + '_monitor');
+    //   columns.value = getTableHeaderColumns(arr[0] + '_history');
+    //   if (columns.value.length < 1) {
+    //     if (historyType.value) {
+    //       columns.value = getTableHeaderColumns(historyType.value + '_history');
+    //     }
+    //   }
+    // } else {
+    //   columns.value = column;
+    // }
     await getDeviceList();
     nextTick(() => {
       getDataSource();
@@ -87,6 +100,19 @@ watch(
   }
 );
 
+// watch(historyType, (type) => {
+//   if (!type) return;
+//   // if (historyTable.value) getForm().resetFields()
+//   const column = getTableHeaderColumns(type.includes('_history') ? type : type + '_history');
+//   if (column && column.length < 1) {
+//     // const arr = type.split('_');
+//     // columns.value = getTableHeaderColumns(arr[0] + '_history');
+//   } else {
+//     // columns.value = column;
+//   }
+//   setColumns(columns.value);
+// });
+
 watch(
   () => props.scroll.y,
   (newVal) => {
@@ -109,6 +135,7 @@ watch(
 async function getDeviceList() {
   let result;
   const res = await getDeviceListApi({ column: 'createTime', pageNo: 1, pageSize: 10000 });
+  console.log(res, 'ssssssssssssssssssssss');
   result = res.result;
   deviceList.value = result;
 }

src/views/vent/safetyList/common/detail.vue

@@ -38,11 +38,6 @@
                   ]"
                   @click="cardClick(item, index)"
                 >
-              <a-button type="primary" size="small" @click="getAllShow">显示全部</a-button>
-            </div>
-            <div class="left-content">
-              <div class="card-box" v-for="(item, index) in cardList" :key="index">
-                <div :class="item.isNewAccess ? 'card-itemN' : item.linkstatus ? 'card-itemL' : 'card-itemD'" @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">
@@ -520,49 +515,6 @@ function onChangeTab(tab) {
 //弹窗关闭
 function cancenModal() {
   formEdit = {
-  import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
-  import {
-    subStationList,
-    getList,
-    getEdit,
-    runDeviceMonitor,
-    update158DevName,
-    updateDebugStatus,
-    get158StationData,
-    set158StationData,
-    get158StationDevices,
-    set158StationRead,
-  } from '../safetyList.api';
-  import { columnsDetail, columns } from '../safetyList.data';
-  import customHeader from '/@/components/vent/customHeader.vue';
-
-  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 openNum = ref(0);
-  let clsoeNum = ref(0);
-  let stationId = ref('');
-  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: '',
@@ -1122,794 +1074,149 @@ onUnmounted(() => {
                   font-size: 12px;
                   color: #fff;
                   text-align: center;
-  });
-  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: '',
-  });
-  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 timer: null | NodeJS.Timeout = null;
-  function getMonitor(flag = false) {
-    timer = setTimeout(
-      async () => {
-        await getDeviceList();
-        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 : 5000
-    );
-  }
-  async function getDeviceList() {
-    let res = await set158StationRead({ stationId: devStationId.value, deviceId: formEdit.cgq });
-    if (res) {
-      let data = await get158StationData();
-      let list = data.filter((v) => v.stationId == devStationId.value)[0];
-      formView = {
-        dylfsfx: list.dylfsfx,
-        dylbjzt: list.dylbjzt,
-        dyl1f2sADz: list.dyl1f2sADz,
-        dyl2f1sADz: list.dyl2f1sADz,
-        tfl: list.tfl,
-        yjbb: list.yjbb,
-        rjbb: list.rjbb,
-        zxlxbz: list.zxlxbz,
-        rqsj: list.rqsj,
-      };
-    }
-  }
-  //tab选项切换
-  function onChangeTab(tab) {
-    activeKey.value = tab;
-    if (activeKey.value == 'device') {
-      clearTimeout(timer1);
-      getSubStationList();
-      getStationList1({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
-    } else {
-      getSubStationList();
-      getStationList();
-      getMonitor1();
-    }
-  }
-
-  //弹窗关闭
-  function cancenModal() {
-    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: '',
-    };
-  }
-  //获取详细信息列表
-  async function getStationList() {
-    let res = await get158StationData();
-    res.forEach((el) => {
-      el.linkstatusC = el.linkstatus ? '连接' : '断开';
-    });
-    tableData1.value = res;
-  }
-  //传感器选项切换
-  function changeCgq(val) {
-    console.log(val, 'val---------');
-    formEdit.cgq = val;
-    console.log(formEdit.cgq, 'cgq------');
-  }
-  //编辑
-  async function handleEdit(record) {
-    cgqList.length = 0;
-    visibleModalEdit1.value = true;
-    devStationId.value = record.stationId;
-
-    let res = await get158StationDevices({ 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 set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'rs485modbusdz', value: formEdit.rs485modbusdz });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '探头安装距离':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'ttazjl', value: formEdit.ttazjl });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '基线距离':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'jxjl', value: formEdit.jxjl });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '安装角度':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'azjd', value: formEdit.azjd });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '设置时长':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'szsz', value: formEdit.szsz });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '数据平均周期':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'sjpjzq', value: formEdit.sjpjzq });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '第一路一发二收PG值':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylyfesPGz', value: formEdit.dylyfesPGz });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '第一路二发一收PG值':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylefysPGz', value: formEdit.dylefysPGz });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '风道截面积':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'fdjmj', value: formEdit.fdjmj });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '第一路整体系数k':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dylztxsk', value: formEdit.dylztxsk });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '第一路第一段系数':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldydxs1', value: formEdit.dyldydxs1 });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '第一路第二段系数':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldedxs2', value: formEdit.dyldedxs2 });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '第一路第三段系数':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldsdxs3', value: formEdit.dyldsdxs3 });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '第一路第四段系数':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldsdxs4', value: formEdit.dyldsdxs4 });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '第一路第五段系数':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldwdxs5', value: formEdit.dyldwdxs5 });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '第一路第六段系数':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyldldxs6', value: formEdit.dyldldxs6 });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '系数KB':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'xsKB', value: formEdit.xsKB });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '系数KB符号':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'xsKBfh', value: formEdit.xsKBfh });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '高报警阈值':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'gbjyz', value: formEdit.gbjyz });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '低报警阈值':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dbjyz', value: formEdit.dbjyz });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '报警使能':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'bjsn', value: formEdit.bjsn });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '第一路485波特率':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'dyl485btl', value: formEdit.dyl485btl });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-      case '四个字节保存密码':
-        await set158StationData({ stationId: devStationId.value, deviceId: formEdit.cgq, plcCode: 'sgzjbcmm', value: formEdit.sgzjbcmm });
-        visibleModalEdit1.value = false;
-        getStationList();
-        break;
-    }
-  }
-
-  //获取分站实时监测信息
-  async function getSubStationList() {
-    let res = await subStationList({ strtype: 'modbus' });
-    if (res.length != 0) {
-      cardList.value = res;
-      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) {
-    activeIndex.value = item.isNewAccess ? index : null;
-    stationName.value = item.strname;
-    stationStatus.value = item.linkstatus;
-    stationId.value = item.id;
-    isShow.value = true;
-    getStationList1({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
-  }
-  //分站站点名称编辑
-  function changeName(val) {
-    getChangeStation();
-  }
-  async function getChangeStation() {
-    let res = await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value });
-    getSubStationList();
-    isShow.value = false;
-  }
-  //站点连接状态修改
-  function changeStatus(val) {
-    getChangeStation();
-  }
-  //获取详细信息列表
-  async function getStationList1(param) {
-    let res = await getList(param);
-    // let res = await getList({ pageNo: pagination.current, pageSize: pagination.pageSize, })
-    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.debugTitle = '调试'
-      el.children = el.devInfoList;
-      el.children.forEach((v) => {
-        v.key = v.id;
-        v.debugTitle = '调试';
-        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 = '';
-    getStationList1({ pageNo: pagination.current, pageSize: pagination.pageSize });
-  }
-  //启动新设备
-  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;
-    }
-  }
-  //分站，设备调试
-  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 {
-      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() {
-    let res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' });
-    if (res) {
-      getStationList1({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
-    }
-    // if (debugFlag.value == 'station') {
-    //     let res = await updateDebugStatus({ stationId: debugStationId.value, debugFlag: '0' })
-    //     getStationList1()
-    // } else {
-    //     let res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' })
-    //     getStationList1()
-    // }
-  }
-  async function handleOk() {
-    let res = await runDeviceMonitor({ devId: devId.value, devName: startupData.address });
-    visibleModal.value = false;
-    getStationList1({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
-  }
-  function handleCancel() {
-    visibleModal.value = false;
-    startupData.address = '';
-  }
-  //编辑
-  async function handleOkEdit() {
-    if (paramId.value == 'subId') {
-      let res = await update158DevName({ subId: devId.value, devName: startupDataEdit.address });
-      console.log(res, '设备名称编辑---');
-      visibleModalEdit.value = false;
-      getStationList1({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
-    } else {
-      let res = await update158DevName({ devId: devId.value, devName: startupDataEdit.address });
-      console.log(res, '设备名称编辑---');
-      visibleModalEdit.value = false;
-      getStationList1({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
-    }
-  }
-  //取消编辑
-  function handleCancelEdit() {
-    visibleModalEdit.value = false;
-    startupDataEdit.address = '';
-  }
-  //调试确认
-  async function handleOkDebug() {
-    let res = await updateDebugStatus({
-      stationId: debugStationId.value,
-      deviceId: debugDeviceId.value,
-      speed: startupDataDebug.speed,
-      direction: startupDataDebug.direction,
-      debugFlag: '1',
-    });
-    if (res) {
-      visibleModalDebug.value = false;
-      getStationList1({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
-    }
-    // if (debugFlag.value == 'station') {
-    //     let res = await updateDebugStatus({ stationId: debugStationId.value, speed: startupDataDebug.speed, direction: startupDataDebug.direction, debugFlag: '1' })
-    //     visibleModalDebug.value = false
-    //     getStationList1()
-    // } else {
-    //     let 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.debugTitle = '调试'
-      el.devInfoList.forEach((v) => {
-        v.debugTitle = '调试';
-      });
-    });
-    debugFlag.value = '';
-    debugStationId.value = '';
-    debugDeviceId.value = '';
-  }
-  //分页切换
-  function pageChange(val) {
-    pagination.current = val.current;
-    pagination.pageSize = val.pageSize;
-    getStationList1({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
-  }
-
-  onMounted(() => {
-    getSubStationList();
-    getStationList1({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
-  });
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-    if (timer1) {
-      clearTimeout(timer1);
-      timer1 = 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;
-              justify-content: space-between;
-              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 {
+              .card-itemL {
                 position: relative;
-                // width: 242px;
-                width: 182px;
+                width: 85px;
                 height: 110px;
-                margin-bottom: 15px;
-                display: flex;
-                justify-content: center;
-
-                .card-itemN {
-                  position: relative;
-                  width: 85px;
-                  height: 110px;
-                  background: url('/@/assets/images/zd-2.png') no-repeat center;
-                  background-size: 100% 100%;
-                  cursor: pointer;
+                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-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
                 }
               }
 
-                .card-itemL {
-                  position: relative;
-                  width: 85px;
-                  height: 110px;
-                  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: 110px;
-                  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-itemD {
+                position: relative;
+                width: 85px;
+                height: 110px;
+                background: url('/@/assets/images/zd-1.png') no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
 
-                .card-modal {
-                  width: 86px;
+                .card-item-label {
+                  width: 100%;
                   position: absolute;
-                  left: 140px;
-                  color: #fff;
-                  top: 50%;
-                  transform: translate(0, -50%);
+                  bottom: 5px;
                   font-size: 12px;
-                }
-
-                .card-modal1 {
-                  width: 86px;
-                  position: absolute;
-                  left: -42px;
                   color: #fff;
-                  top: 50%;
-                  transform: translate(0, -50%);
-                  font-size: 12px;
+                  text-align: center;
                 }
               }
-            }
-          }
 
-          .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%;
+              .card-modal {
+                width: 86px;
+                position: absolute;
+                left: 140px;
+                color: #fff;
+                top: 50%;
+                transform: translate(0, -50%);
+                font-size: 12px;
+              }
 
-            .right-title {
-              display: flex;
-              height: 30px;
-              align-items: center;
-              font-size: 14px;
-              color: #fff;
-              margin-bottom: 10px;
+              .card-modal1 {
+                width: 86px;
+                position: absolute;
+                left: -42px;
+                color: #fff;
+                top: 50%;
+                transform: translate(0, -50%);
+                font-size: 12px;
+              }
             }
           }
         }
 
-        .detail-content {
-          width: 100%;
+        .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;
+          }
         }
       }
-    }
-  }
 
-  .zxm-form {
-    width: 50%;
-    height: 100%;
-    padding-top: 20px !important;
-    box-sizing: border-box;
+      .detail-content {
+        width: 100%;
+        height: 100%;
+      }
+      .history-content {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
+        color: #fff;
+      }
+    }
   }
+}
 
-  ::v-deep(.zxm-radio-wrapper) {
-    font-size: 12px;
-  }
+.zxm-form {
+  width: 50%;
+  height: 100%;
+  padding-top: 20px !important;
+  box-sizing: border-box;
+}
 
-  ::v-deep(.zxm-input) {
-    font-size: 12px;
-  }
+::v-deep(.zxm-radio-wrapper) {
+  font-size: 12px;
+}
 
-  ::v-deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-    border: 1px solid #3ad8ff77 !important;
-    background-color: #ffffff00 !important;
-  }
+::v-deep(.zxm-input) {
+  font-size: 12px;
+}
 
-  ::v-deep(.zxm-select-selection-item) {
-    color: #fff !important;
-  }
+::v-deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  border: 1px solid #3ad8ff77 !important;
+  background-color: #ffffffff !important;
+}
 
-  .zxm-picker,
-  .zxm-input {
-    border: 1px solid #3ad8ff77 !important;
-    background-color: #ffffff00 !important;
-    color: #fff !important;
-  }
+::v-deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
+::v-deep(.zxm-form-item-label > label) {
+  color: #fff !important;
+}
+.zxm-picker,
+.zxm-input {
+  border: 1px solid #3ad8ff77 !important;
+  background-color: #ffffff !important;
+  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>