分站管理历史数据

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

@@ -0,0 +1,338 @@
+<template>
+  <div class="history-table" v-if="loading">
+    <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource">
+      <template #form-submitBefore>
+        <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource">查询</a-button>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+//ts语法
+import { watchEffect, ref, watch, defineExpose, inject, nextTick, onMounted, computed } from 'vue';
+import { FormSchema } from '/@/components/Form/index';
+import { BasicTable } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { defHttp } from '/@/utils/http/axios';
+import dayjs from 'dayjs';
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+
+const props = defineProps({
+  columnsType: {
+    type: String,
+  },
+  columns: {
+    type: Array,
+    // required: true,
+    default: () => [],
+  },
+  historyColumns: {
+    type: Array,
+    default: () => [],
+  },
+  id: {
+    type: String,
+  },
+  scroll: {
+    type: Object,
+    default: { y: 0 },
+  },
+  formSchemas: {
+    type: Array<FormSchema>,
+    default: () => [],
+  },
+});
+//获取分站数据
+const getDeviceListApi = (params) => defHttp.get({ url: '/safety/ventanalySubStation/alllist', params });
+const historyTable = ref();
+const loading = ref(false);
+const dataSource = ref([]);
+
+const emit = defineEmits(['change']);
+
+const historyType = ref('');
+const deviceKide = ref('');
+const columns = ref([]);
+const deviceList = ref([]);
+const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
+// let deviceList = ref([]);
+const deviceTypeStr = ref('');
+loading.value = true;
+
+watch(
+  () => {
+    return props.columnsType;
+  },
+  async (newVal) => {
+    debugger;
+    if (!newVal) return;
+    deviceKide.value = newVal;
+    if (historyTable.value) {
+      getForm().resetFields();
+      // getForm().updateSchema();
+      // getForm();
+    }
+    dataSource.value = [];
+    await getDeviceList();
+    nextTick(() => {
+      getDataSource();
+    });
+
+    if (historyTable.value) reload();
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(
+  () => props.scroll.y,
+  (newVal) => {
+    if (newVal) {
+      tableScroll.value = { y: newVal - 100 };
+    } else {
+      tableScroll.value = {};
+    }
+  }
+);
+
+watch(
+  () => props.deviceId,
+  async () => {
+    await getForm().setFieldsValue({});
+    await getDeviceList();
+  }
+);
+
+async function getDeviceList() {
+  let result;
+  const res = await getDeviceListApi({ column: 'createTime', pageNo: 1, pageSize: 10000 });
+  result = res.result;
+  deviceList.value = result;
+}
+
+function resetFormParam() {
+  const formData = getForm().getFieldsValue();
+  const pagination = getPaginationRef();
+  formData['pageNo'] = pagination['current'];
+  formData['pageSize'] = pagination['pageSize'];
+  formData['column'] = 'createTime';
+  const params = {
+    pageNum: pagination['current'],
+    pageSize: pagination['pageSize'],
+    column: pagination['createTime'],
+    starttime_begin: formData['starttime_begin'],
+    starttime_endtime: formData['starttime_endtime'],
+    nsubstationid: formData['gdeviceid'],
+    nwartype: 1001,
+  };
+  return params;
+}
+
+async function getDataSource() {
+  dataSource.value = [];
+  setLoading(true);
+  const params = await resetFormParam();
+  const result = await defHttp.get({ url: '/safety/ventanalyAlarmLog/list', params: params });
+  setPagination({ total: Math.abs(result['datalist']['total']) || 0 });
+  if (result['datalist']['records'].length > 0) {
+    dataSource.value = result['datalist']['records'].map((item: any) => {
+      return Object.assign(item, item['readData']);
+    });
+  } else {
+    dataSource.value = [];
+  }
+
+  setLoading(false);
+}
+
+// 列表页面公共参数、方法
+const { tableContext } = useListPage({
+  tableProps: {
+    // api: list,
+    columns: props.historyColumns ? columns : (props.historyColumns as any[]),
+    canResize: true,
+    showTableSetting: false,
+    showActionColumn: false,
+    bordered: false,
+    size: 'small',
+    scroll: tableScroll,
+    showIndexColumn: true,
+    tableLayout: 'auto',
+    formConfig: {
+      labelAlign: 'left',
+      showAdvancedButton: false,
+      showSubmitButton: false,
+      showResetButton: false,
+      baseColProps: {
+        xs: 24,
+        sm: 24,
+        md: 24,
+        lg: 9,
+        xl: 7,
+        xxl: 4,
+      },
+      schemas:
+        props.formSchemas.length > 0
+          ? props.formSchemas
+          : [
+              {
+                field: 'starttime_begin',
+                label: '开始时间',
+                component: 'DatePicker',
+                defaultValue: dayjs().startOf('date'),
+                required: true,
+                componentProps: {
+                  showTime: true,
+                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                  getPopupContainer: getAutoScrollContainer,
+                },
+                colProps: {
+                  span: 4,
+                },
+              },
+              {
+                field: 'starttime_endtime',
+                label: '结束时间',
+                component: 'DatePicker',
+                defaultValue: dayjs(),
+                required: true,
+                componentProps: {
+                  showTime: true,
+                  valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                  getPopupContainer: getAutoScrollContainer,
+                },
+                colProps: {
+                  span: 4,
+                },
+              },
+              {
+                label: '查询设备',
+                field: 'nsubstationid',
+                component: 'Select',
+                defaultValue: props.id ? props.id : deviceList.value[0] ? deviceList.value[0]['strinstallpos'] : '',
+                required: true,
+                componentProps: {
+                  showSearch: true,
+                  filterOption: (input: string, option: any) => {
+                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+                  },
+                  options: deviceList,
+                  onChange: (e, option) => {
+                    if (option && (option['strinstallpos'] || option['id'])) historyType.value = option['strinstallpos'] || option['id'];
+                  },
+                },
+                colProps: {
+                  span: 4,
+                },
+              },
+              {
+                field: 'nwartype',
+                required: true,
+                componentProps: {
+                  valueFormat: '1001',
+                },
+                colProps: {
+                  span: 4,
+                },
+              },
+            ],
+    },
+    // fetchSetting: {
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      pageSizeOptions: ['10', '30', '50', '100'],
+      showQuickJumper: false,
+    },
+    beforeFetch() {
+      const newParams = { ...resetFormParam() };
+      debugger;
+      return newParams;
+    },
+  },
+});
+
+//注册table数据
+const [registerTable, { reload, setLoading, getForm, setColumns, getPaginationRef, setPagination }] = tableContext;
+
+watchEffect(() => {
+  if (historyTable.value && dataSource) {
+    const data = dataSource.value || [];
+    emit('change', data);
+  }
+});
+
+onMounted(async () => {
+  await getDeviceList();
+  if (deviceList.value[0]) {
+    historyType.value = deviceList.value[0]['strinstallpos'] || deviceList.value[0]['id'];
+    nextTick(async () => {
+      await getDataSource();
+    });
+  }
+  // watch([() => getPaginationRef()['current'], () => getPaginationRef()['pageSize']], async () => {
+  //   if (deviceList.value[0]) {
+  //     if (deviceList.value[0]) {
+  //       await getDataSource();
+  //     }
+  //   }
+  // });
+});
+defineExpose({ setLoading });
+</script>
+
+<style scoped lang="less">
+@import '/@/design/vent/color.less';
+
+:deep(.@{ventSpace}-table-body) {
+  height: auto !important;
+}
+:deep(.zxm-picker) {
+  height: 30px !important;
+}
+.history-table {
+  width: 100%;
+  :deep(.jeecg-basic-table-form-container) {
+    .@{ventSpace}-form {
+      padding: 0 !important;
+      border: none !important;
+      margin-bottom: 0 !important;
+      .@{ventSpace}-picker,
+      .@{ventSpace}-select-selector {
+        width: 100% !important;
+        height: 100%;
+        background: #00000017;
+        border: 1px solid #b7b7b7;
+        input,
+        .@{ventSpace}-select-selection-item,
+        .@{ventSpace}-picker-suffix {
+          color: #fff;
+        }
+        .@{ventSpace}-select-selection-placeholder {
+          color: #ffffffaa;
+        }
+      }
+    }
+    .@{ventSpace}-table-title {
+      min-height: 0 !important;
+    }
+  }
+  .pagination-box {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    .page-num {
+      border: 1px solid #0090d8;
+      padding: 4px 8px;
+      margin-right: 5px;
+      color: #0090d8;
+    }
+    .btn {
+      margin-right: 10px;
+    }
+  }
+}
+</style>

src/views/vent/deviceManager/substationTabel/index.vue

@@ -1,72 +1,216 @@
 <template>
-  <div class="device-manager-box">
-    <NormalTable
-      ref="normalTabel"
-      :columns="columns"
-      :searchFormSchema="searchFormSchema"
-      :list="list"
-      :formSchema="formSchema"
-      :deleteById="deleteById"
-      :batchDelete="batchDeleteById"
-      :saveOrUpdate="saveOrUpdate"
-      designScope="substation-tabel"
-      title="分站列表"
-      :showTab="false"
-    >
-      <template #filterCell="{ column, record }">
-        <a-tag v-if="column.dataIndex === 'linkstatus'" :color="record.linkstatus == 0 ? '#999' : '#87d068'">{{
-          record.linkstatus == 1 ? '链接' : '断开'
-        }}</a-tag>
-      </template>
-      <template #action="{ record }">
-        <a
-          v-if="
-            record['strtype'] == 'http' ||
-            record['strtype'] == 'kafka' ||
-            record['strtype'] == 'ftp' ||
-            record['strtype'] == 'database' ||
-            record['strtype'] == 'txt'
-          "
-          class="table-action-link"
-          @click="addDevices(record)"
-          >同步设备</a
-        >
-      </template>
-    </NormalTable>
+  <div class="safetyList">
+    <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-tabs>
+      <div class="box-content">
+        <div class="now-content" v-if="activeKey == 'device'">
+          <NormalTable
+            ref="normalTabel"
+            :columns="columns"
+            :searchFormSchema="searchFormSchema"
+            :list="list"
+            :formSchema="formSchema"
+            :deleteById="deleteById"
+            :batchDelete="batchDeleteById"
+            :saveOrUpdate="saveOrUpdate"
+            designScope="substation-tabel"
+            title="分站列表"
+            :showTab="false"
+          >
+            <template #filterCell="{ column, record }">
+              <a-tag v-if="column.dataIndex === 'linkstatus'" :color="record.linkstatus == 0 ? '#999' : '#87d068'">{{
+                record.linkstatus == 1 ? '链接' : '断开'
+              }}</a-tag>
+            </template>
+            <template #action="{ record }">
+              <a
+                v-if="
+                  record['strtype'] == 'http' ||
+                  record['strtype'] == 'kafka' ||
+                  record['strtype'] == 'ftp' ||
+                  record['strtype'] == 'database' ||
+                  record['strtype'] == 'txt'
+                "
+                class="table-action-link"
+                @click="addDevices(record)"
+                >同步设备</a
+              >
+            </template>
+          </NormalTable>
+        </div>
+        <div class="history-content tab-item" v-if="activeKey == 'history'">
+          <!-- <a-form class="search-area" :model="formSearch" labelAlign="center" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+            <a-row>
+              <a-col :span="4">
+                <a-form-item label="开始时间：">
+                  <a-date-picker
+                    show-time
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    placeholder="开始时间"
+                    size="small"
+                    v-model:value="formSearch.starttime_begin"
+                    style="width: 220px; color: #ffffff"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="4">
+                <a-form-item label="结束时间：">
+                  <a-date-picker
+                    show-time
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    placeholder="结束时间"
+                    size="small"
+                    v-model:value="formSearch.starttime_endtime"
+                    style="width: 220px"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="4">
+                <a-form-item label="查询设备：">
+                  <a-select v-model:value="formSearch.nsubstationid" style="width: 220px" size="small" placeholder="请选择...">
+                    <a-select-option v-for="item in deviceList" :key="item.deviceID">{{ item.strinstallpos }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="2">
+                <a-button type="primary" style="margin-right: 10px" @click="getSearch">查询</a-button>
+                <a-button type="plain" @click="getReset">重置</a-button>
+              </a-col>
+            </a-row>
+          </a-form>
+          <a-table :columns="historyColumns" :pagination="false" size="small" maxWidth="340" :scroll="{ x: 'max-content', y: 140 }"> </a-table> -->
+          <HistoryTable :scroll="scroll" :historyColumns="historyColumns" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" name="system-user" setup>
-  //ts语法
-  import { ref, onMounted, onUnmounted } from 'vue';
-  import NormalTable from '../comment/NormalTable.vue';
-  import { columns, searchFormSchema, formSchema } from './substation.data';
-  import { list, getImportUrl, getExportUrl, deleteById, batchDeleteById, saveOrUpdate, addDevice } from './substation.api';
-  import { message } from 'ant-design-vue';
-  const normalTabel = ref();
-  let timer = undefined;
-  function reload() {
-    timer = setInterval(() => {
-      if (normalTabel.value) normalTabel.value.reload();
-    }, 30000);
-  }
+//ts语法
+import { ref, onMounted, reactive, onUnmounted } from 'vue';
+import NormalTable from '../comment/NormalTable.vue';
+import HistoryTable from '../comment/HistoryTable.vue';
+import { historyColumns, columns, searchFormSchema, formSchema } from './substation.data';
+import { list, getImportUrl, getExportUrl, deleteById, getHistory, batchDeleteById, saveOrUpdate, addDevice } from './substation.api';
+import { message } from 'ant-design-vue';
+import dayjs from 'dayjs';
+const normalTabel = ref();
+let timer = undefined;
+let activeKey = ref('device');
+let formSearch = reactive({
+  pageNo: 1,
+  pageSize: 1000,
+  starttime_begin: dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'),
+  starttime_endtime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+  nsubstationid: '',
+  nwartype: 1001,
+});
+const scroll = reactive({
+  y: 230,
+});
+let historyList = ref<any[]>([]);
+function reload() {
+  timer = setInterval(() => {
+    if (normalTabel.value) normalTabel.value.reload();
+  }, 30000);
+}
 
-  function addDevices(record) {
-    addDevice({ id: record.id })
-      .then((result) => {
-        // message.success('同步生成')
-      })
-      .catch(() => {
-        message.success('同步失败');
-      });
+function addDevices(record) {
+  addDevice({ id: record.id })
+    .then((result) => {
+      // message.success('同步生成')
+    })
+    .catch(() => {
+      message.success('同步失败');
+    });
+}
+//tab选项切换
+function onChangeTab(tab) {
+  activeKey.value = tab;
+  if (activeKey.value == 'device') {
+    // clearTimeout(timer1);
+  } else {
   }
-  onMounted(() => {
-    reload();
-  });
+}
+async function getSearchList() {
+  formSearch.nsubstationid = formSearch.nsubstationid ? formSearch.nsubstationid : deviceList.value[0].deviceID;
+  let res = await getHistory({ ...formSearch });
+  // console.log(res,'000000=======')
+  let result = res.records;
+  historyList.value = result;
+}
+//查询历史数据
+function getSearch() {
+  getSearchList();
+}
+function getReset() {
+  formSearch.starttime_begin = dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss');
+  formSearch.starttime_endtime = dayjs().format('YYYY-MM-DD HH:mm:ss');
+  formSearch.nsubstationid = deviceList.value[0].deviceID;
+  getSearchList();
+}
+
+onMounted(() => {
+  reload();
+});
 
-  onUnmounted(() => {
-    clearInterval(timer);
-  });
+onUnmounted(() => {
+  clearInterval(timer);
+});
 </script>
 
-<style scoped></style>
+<style lang="less" scoped>
+.content {
+  .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;
+      }
+    }
+  }
+}
+.search-area {
+  padding: 5px;
+  margin: 10px;
+  box-sizing: border-box;
+}
+::v-deep(.zxm-form-item-label > label) {
+  color: #fff !important;
+}
+</style>

src/views/vent/deviceManager/substationTabel/substation.api.ts

@@ -10,6 +10,7 @@ enum Api {
   importExcel = '/sys/user/importExcel',
   exportXls = '/sys/user/exportXls',
   addDevice = '/safety/ventanalySubStation/addDeviceBystation',
+  getHistory = '/safety/ventanalyAlarmLog/list',
 }
 /**
  * 导出api
@@ -25,7 +26,8 @@ export const getImportUrl = Api.importExcel;
  * @param params
  */
 export const list = (params) => defHttp.get({ url: Api.list, params });
-
+// 查询历史数据
+export const getHistory = (params) => defHttp.get({ url: Api.getHistory, params });
 /**
  * 删除用户
  */

src/views/vent/deviceManager/substationTabel/substation.data.ts

@@ -285,3 +285,5 @@ export const formSchema: FormSchema[] = [
     component: 'InputTextArea',
   },
 ];
+
+export const historyColumns: BasicColumn[] = [];

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

@@ -1,343 +1,520 @@
 <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="manageAuto" />
-            </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>
-                        <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">
-                                    <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" />
-                                </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-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 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-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>
+            <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="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 }" :columns="columnsDetail" :data-source="tableData1">
-                        <template #action="{ record }">
-                            <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
-                        </template>
-                        <template #bodyCell="{ column, text }"></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 in cgqList" :key="file.label" :value="file.value">{{
-                                        file.label }}</a-select-option>
-                                </a-select>
-                                <a-button type="success" @click="getMonitor">读取</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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 type="primary" @click="handleClick('四个字节保存密码')">下发</a-button>
-                            </a-form-item>
-                        </a-form>
-
-
-                    </a-modal>
+                <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" />
                 </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-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'">
+          <a-form class="search-area" :model="formSearch" labelAlign="center" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+            <a-row>
+              <a-col :span="4">
+                <a-form-item label="开始时间：">
+                  <a-date-picker
+                    show-time
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    placeholder="开始时间"
+                    size="small"
+                    v-model:value="formSearch.starttime_begin"
+                    style="width: 220px; color: #ffffff"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="4">
+                <a-form-item label="结束时间：">
+                  <a-date-picker
+                    show-time
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    placeholder="结束时间"
+                    size="small"
+                    v-model:value="formSearch.starttime_endtime"
+                    style="width: 220px"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="4">
+                <a-form-item label="查询设备：">
+                  <a-select v-model:value="formSearch.nsubstationid" style="width: 220px" size="small" placeholder="请选择...">
+                    <a-select-option v-for="item in deviceList" :key="item.deviceID">{{ item.strinstallpos }}</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="2">
+                <a-button type="primary" style="margin-right: 10px" @click="getSearch">查询</a-button>
+                <a-button type="plain" @click="getReset">重置</a-button>
+              </a-col>
+            </a-row>
+          </a-form>
+          <a-table :columns="historyColumns" :pagination="false" size="small" maxWidth="340" :scroll="{ x: 'max-content', y: 140 }"> </a-table>
+        </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 }" :columns="columnsDetail" :data-source="tableData1">
+            <template #action="{ record }">
+              <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
+            </template>
+            <template #bodyCell="{ column, text }"></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 in cgqList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
+                </a-select>
+                <a-button type="success" @click="getMonitor">读取</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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 type="primary" @click="handleClick('四个字节保存密码')">下发</a-button>
+              </a-form-item>
+            </a-form>
+          </a-modal>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 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 {
+  subStationList,
+  getList,
+  getEdit,
+  runDeviceMonitor,
+  update158DevName,
+  updateDebugStatus,
+  get158StationData,
+  set158StationData,
+  get158StationDevices,
+  set158StationRead,
+} from '../safetyList.api';
+import { historyColumns } from '../historyLsit.data';
 import customHeader from '/@/components/vent/customHeader.vue';
+import dayjs from 'dayjs';
 
-let activeKey = ref('device')
-let cardList = ref<any[]>()
-let activeIndex = ref(null)
-let isShow = ref(false)
-let stationName = ref('')
-let stationStatus = ref(null)
+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(null)
-let tableData = ref<any[]>([])
-let tableData1 = ref<any[]>([])
+  { value: 0, label: '断开' },
+  { value: 1, label: '连接' },
+]);
+let selectedIndex = ref(0);
+let openNum = ref(0);
+let clsoeNum = ref(0);
+let stationId = ref(null);
+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'], // 可选的每页显示条数
+  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 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: '',
+});
+let formView = reactive({
+  dylfsfx: '',
+  dylbjzt: '',
+  dyl1f2sADz: '',
+  dyl2f1sADz: '',
+  tfl: '',
+  yjbb: '',
+  rjbb: '',
+  zxlxbz: '',
+  rqsj: '',
+});
+let formSearch = reactive({
+  pageNo: 1,
+  pageSize: 1000,
+  starttime_begin: dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'),
+  starttime_endtime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+  nsubstationid: '',
+  nwartype: 1001,
+});
+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();
+  } else {
+    getSubStationList();
+    getStationList();
+    getMonitor1();
+  }
+}
+
+//弹窗关闭
+function cancenModal() {
+  formEdit = {
     id: '',
     cgq: '',
     rs485modbusdz: '',
@@ -363,783 +540,683 @@ let formEdit = reactive({
     bjsn: '',
     dyl485btl: '',
     sgzjbcmm: '',
-})
-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()
-    } 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
+  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------')
+  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
+  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 })
-        })
-    }
+  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;
-    }
+  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 = []
-    }
+  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()
+  selectedIndex.value = index; // 更新选中索引
+  activeIndex.value = item.isNewAccess ? index : null;
+  stationName.value = item.strname;
+  stationStatus.value = item.linkstatus;
+  stationId.value = item.id;
+  isShow.value = true;
+  getStationList1();
 }
 //分站站点名称编辑
 function changeName(val) {
-    getChangeStation()
+  getChangeStation();
 }
 async function getChangeStation() {
-    let res = await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value })
-    getSubStationList()
-    isShow.value = false
+  let res = await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value });
+  getSubStationList();
+  isShow.value = false;
 }
 //站点连接状态修改
 function changeStatus(val) {
-    getChangeStation()
+  getChangeStation();
 }
 //获取详细信息列表
 async function getStationList1() {
-    let res = await getList({ subId: stationId.value, 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
+  let res = await getList({ subId: stationId.value, 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 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;
-    }
+  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()
-        // }
-    }
+  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()
-    }
-    // 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()
-    // }
+  let res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' });
+  if (res) {
+    getStationList1();
+  }
+  // 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()
+  let res = await runDeviceMonitor({ devId: devId.value, devName: startupData.address });
+  visibleModal.value = false;
+  getStationList1();
 }
 function handleCancel() {
-    visibleModal.value = false
-    startupData.address = ''
+  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()
-    } else {
-        let res = await update158DevName({ devId: devId.value, devName: startupDataEdit.address })
-        console.log(res, '设备名称编辑---')
-        visibleModalEdit.value = false
-        getStationList1()
-    }
+  if (paramId.value == 'subId') {
+    let res = await update158DevName({ subId: devId.value, devName: startupDataEdit.address });
+    console.log(res, '设备名称编辑---');
+    visibleModalEdit.value = false;
+    getStationList1();
+  } else {
+    let res = await update158DevName({ devId: devId.value, devName: startupDataEdit.address });
+    console.log(res, '设备名称编辑---');
+    visibleModalEdit.value = false;
+    getStationList1();
+  }
 }
 //取消编辑
 function handleCancelEdit() {
-    visibleModalEdit.value = false
-    startupDataEdit.address = ''
+  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()
-    }
-    // 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()
-    // }
+  let 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') {
+  //     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 = ''
-
+  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()
+  pagination.current = val.current;
+  pagination.pageSize = val.pageSize;
+  getStationList1();
 }
 
 onMounted(() => {
-    getSubStationList()
-    getStationList1()
-})
+  getSubStationList();
+  getStationList1();
+});
 onUnmounted(() => {
-    if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
-    }
-    if (timer1) {
-        clearTimeout(timer1);
-        timer1 = undefined;
-    }
+  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);
+  width: calc(100% - 20px);
+  height: calc(100% - 80px);
+  position: relative;
+  margin: 70px 10px 10px 10px;
 
-            :deep(.zxm-tabs-nav) {
-                margin: 0 !important;
+  .content {
+    position: relative;
+    width: 100%;
+    height: 100%;
 
-                .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;
-                }
+    .tab-box {
+      display: flex;
+      color: #fff;
+      position: relative;
+      background: linear-gradient(#001325, #012e4f);
 
-                .zxm-tabs-tab-active {
-                    width: 180px;
-                    position: relative;
-                    background: url('/@/assets/images/top-btn-select.png') center no-repeat;
-                    background-size: cover;
+      :deep(.zxm-tabs-nav) {
+        margin: 0 !important;
 
-                    .zxm-tabs-tab-btn {
-                        color: #fff !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-ink-bar {
-                    width: 0 !important;
-                }
+        .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+.zxm-tabs-tab {
-                    margin: 0 !important;
-                }
-            }
+          .zxm-tabs-tab-btn {
+            color: #fff !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;
+        .zxm-tabs-ink-bar {
+          width: 0 !important;
+        }
 
-                .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%;
+        .zxm-tabs-tab + .zxm-tabs-tab {
+          margin: 0 !important;
+        }
+      }
+    }
 
-                    .left-title {
-                        display: flex;
-                        height: 30px;
-                        align-items: center;
-                        font-size: 14px;
-                        margin-bottom: 10px;
+    .box-content {
+      height: calc(100% - 50px);
+      padding-top: 10px;
+      box-sizing: border-box;
 
-                        span {
-                            color: #fff;
-                        }
+      .now-content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-                        .zd-open {
-                            color: rgb(0, 242, 255);
-                        }
+        .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%;
 
-                        .zd-close {
-                            color: #ff0000;
-                        }
+          .left-title {
+            display: flex;
+            height: 30px;
+            align-items: center;
+            font-size: 14px;
+            margin-bottom: 10px;
 
-                        .title-fz {
-                            margin-right: 25px;
-                        }
-                    }
+            span {
+              color: #fff;
+            }
 
-                    .left-content {
-                        display: flex;
-                        justify-content: flex-start;
-                        align-items: flex-start;
-                        flex-wrap: wrap;
-                        height: calc(100% - 40px);
-                        overflow-y: auto;
+            .zd-open {
+              color: rgb(0, 242, 255);
+            }
 
-                        .card-box {
-                            position: relative;
-                            // width: 242px;
-                            width: 182px;
-                            height: 110px;
-                            margin-bottom: 15px;
-                            display: flex;
-                            justify-content: center;
+            .zd-close {
+              color: #ff0000;
+            }
 
-                            .card-itemN {
-                                position: relative;
-                                width: 85px;
-                                height: 110px;
-                                background: url('/@/assets/images/zd-2.png') no-repeat center;
-                                background-size: 100% 100%;
-                                cursor: pointer;
+            .title-fz {
+              margin-right: 25px;
+            }
+          }
 
-                                .card-item-label {
-                                    width: 100%;
-                                    position: absolute;
-                                    bottom: 5px;
-                                    font-size: 12px;
-                                    color: #fff;
-                                    text-align: center;
-                                }
-                            }
+          .left-content {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            height: calc(100% - 40px);
+            overflow-y: auto;
 
-                            .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-box {
+              position: relative;
+              // width: 242px;
+              width: 182px;
+              height: 110px;
+              margin-bottom: 15px;
+              display: flex;
+              justify-content: center;
 
-                                .card-item-label {
-                                    width: 100%;
-                                    position: absolute;
-                                    bottom: 5px;
-                                    font-size: 12px;
-                                    color: #fff;
-                                    text-align: 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;
 
-                            .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-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-modal {
-                                width: 86px;
-                                position: absolute;
-                                left: 140px;
-                                color: #FFF;
-                                top: 50%;
-                                transform: translate(0, -50%);
-                                font-size: 12px;
-                            }
+                .card-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
+                }
+              }
 
-                            .card-modal1 {
-                                width: 86px;
-                                position: absolute;
-                                left: -42px;
-                                color: #FFF;
-                                top: 50%;
-                                transform: translate(0, -50%);
-                                font-size: 12px;
-                            }
+              .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;
                 }
+              }
 
-                .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%;
-                height: 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;
+          }
         }
+      }
+
+      .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;
+      }
     }
+  }
 }
 
-
 .zxm-form {
-    width: 50%;
-    height: 100%;
-    padding-top: 20px !important;
-    box-sizing: border-box;
+  width: 50%;
+  height: 100%;
+  padding-top: 20px !important;
+  box-sizing: border-box;
 }
 
-
 ::v-deep(.zxm-radio-wrapper) {
-    font-size: 12px;
+  font-size: 12px;
 }
 
 ::v-deep(.zxm-input) {
-    font-size: 12px;
+  font-size: 12px;
 }
 
 ::v-deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-    border: 1px solid #3ad8ff77 !important;
-    background-color: #ffffff00 !important;
+  border: 1px solid #3ad8ff77 !important;
+  background-color: #ffffffff !important;
 }
 
 ::v-deep(.zxm-select-selection-item) {
-    color: #fff !important;
+  color: #fff !important;
+}
+::v-deep(.zxm-form-item-label > label) {
+  color: #fff !important;
 }
-
-
-
 .zxm-picker,
 .zxm-input {
-    border: 1px solid #3ad8ff77 !important;
-    background-color: #ffffff00 !important;
-    color: #fff !important;
+  border: 1px solid #3ad8ff77 !important;
+  background-color: #ffffff !important;
+  color: #fff !important;
 }
 </style>
 <style>
-div[aria-hidden="true"] {
-    display: none !important
+div[aria-hidden='true'] {
+  display: none !important;
 }
-</style>
+</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>

src/views/vent/safetyList/historyLsit.data.ts

@@ -0,0 +1,72 @@
+import { BasicColumn } from '/@/components/Table';
+
+export const historyColumns: BasicColumn[] = [
+  // {
+  //     title: '序号',
+  //     width: 60,
+  //     align: 'center',
+  //     customRender: ({ index }: { index: number }) => `${index + 1}`
+  // },
+  {
+    title: '安装位置',
+    dataIndex: 'strinstallpos',
+    key: 'strinstallpos',
+    align: 'center',
+  },
+  {
+    title: 'Ip地址',
+    dataIndex: 'stripC',
+    key: 'stripC',
+    width: 90,
+    align: 'center',
+  },
+  {
+    title: '监测值',
+    dataIndex: 'valueJc',
+    key: 'valueJc',
+    align: 'center',
+  },
+  {
+    title: '供电模式',
+    dataIndex: 'gdmsC',
+    key: 'gdmsC',
+    width: 90,
+    align: 'center',
+  },
+  {
+    title: '电池容量(%)',
+    dataIndex: 'dcrl',
+    key: 'dcrl',
+    width: 90,
+    align: 'center',
+  },
+  {
+    title: '启用状态',
+    dataIndex: 'linkIdC',
+    key: 'linkIdC',
+    width: 80,
+    align: 'center',
+  },
+  {
+    title: '通讯状态',
+    dataIndex: 'linkstatusC',
+    key: 'linkstatusC',
+    width: 80,
+    align: 'center',
+  },
+
+  // {
+  //     title: '时间',
+  //     dataIndex: 'updateTime',
+  //     key: 'updateTime',
+  //     width: 120,
+  //     align: 'center',
+  // },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 220,
+    align: 'center',
+    slots: { customRender: 'action' },
+  },
+];