安全分站历史数据

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

@@ -3,7 +3,7 @@
     <BasicTable ref="historyTable" @register="registerTable" :data-source="dataSource" :columns="historyColumns">
       <template #form-submitBefore>
         <a-button type="primary" preIcon="ant-design:search-outlined" @click="getDataSource">查询</a-button>
-        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn"> 导出</a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsFn">导出</a-button>
       </template>
     </BasicTable>
   </div>
@@ -36,7 +36,7 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  id: {
+  stationId: {
     type: String,
   },
   scroll: {
@@ -58,12 +58,13 @@ const dataSource = ref([]);
 const emit = defineEmits(['change']);
 
 const historyType = ref('');
-const linkStatus = ref('');
 const deviceKide = ref('');
 const columns = ref([]);
-const deviceOptions = ref([]);
 const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
-const deviceTypeStr = ref('');
+const statusMap = new Map([
+  ['1', '连接成功'],
+  ['0', '连接失败'],
+]);
 loading.value = true;
 
 watch(
@@ -80,7 +81,6 @@ watch(
       // getForm();
     }
     dataSource.value = [];
-    await getSubStationList();
     nextTick(() => {
       getDataSource();
     });
@@ -104,33 +104,12 @@ watch(
 );
 
 watch(
-  () => props.id,
+  () => props.stationId,
   async () => {
     await getForm().setFieldsValue({});
-    await getSubStationList();
   }
 );
 
-//获取分站信息
-async function getSubStationList() {
-  let result;
-  let res = await subStationList({ strtype: 'modbus' });
-  result = res;
-  if (result) {
-    deviceOptions.value = [];
-    deviceOptions.value = result['records'].map((item) => {
-      return {
-        label: item['stationName'],
-        value: item['id'],
-        strinstallpos: item['stationName'],
-        status: item['status'],
-      };
-      // return { label: item['strname'], value: item['id']}
-    });
-  }
-  deviceOptions.value.unshift({ label: '--请选择分站--', value: '', stationName: '' });
-}
-
 function resetFormParam() {
   const formData = getForm().getFieldsValue();
   const pagination = getPaginationRef();
@@ -141,7 +120,7 @@ function resetFormParam() {
     pageSize: pagination['pageSize'],
     createTime_begin: formData['starttime_begin'],
     createTime_end: formData['starttime_end'],
-    stationId: formData['stationId'],
+    stationId: props.stationId,
     status: formData['status'],
   };
   return params;
@@ -218,7 +197,7 @@ const { tableContext, onExportXlsPost } = useListPage({
                   getPopupContainer: getAutoScrollContainer,
                 },
                 colProps: {
-                  span: 4,
+                  span: 6,
                 },
               },
               {
@@ -233,47 +212,24 @@ const { tableContext, onExportXlsPost } = useListPage({
                   getPopupContainer: getAutoScrollContainer,
                 },
                 colProps: {
-                  span: 4,
-                },
-              },
-              {
-                label: '查询分站',
-                field: 'stationId',
-                component: 'Select',
-                defaultValue: props.id ? props.id : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : '',
-                componentProps: {
-                  showSearch: true,
-                  filterOption: (input: string, option: any) => {
-                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-                  },
-                  options: deviceOptions,
-                  onChange: (e, option) => {
-                    if (option) {
-                      historyType.value = option.value; // 使用选项的value（即id）更新historyType
-                    }
-                  },
-                },
-                colProps: {
-                  span: 4,
+                  span: 6,
                 },
               },
               {
                 label: '连接状态',
                 field: 'status',
                 component: 'Select',
-                componentProps: {
-                  options: [
-                    { label: '连接成功', value: 1 },
-                    { label: '连接失败', value: 0 },
-                  ],
-                  onChange: (e, option) => {
-                    if (option) {
-                      linkStatus.value = option.value; // 使用选项的value（即id）更新historyType
-                    }
-                  },
+                defaultValue: '连接成功',
+                componentProps: () => {
+                  return {
+                    options: [
+                      { label: '连接成功', value: 1 },
+                      { label: '连接失败', value: 0 },
+                    ],
+                  };
                 },
                 colProps: {
-                  span: 4,
+                  span: 6,
                 },
               },
             ],
@@ -309,11 +265,7 @@ watchEffect(() => {
 });
 
 onMounted(async () => {
-  await getSubStationList();
-  console.log(deviceOptions.value[0], '数据');
-  if (deviceOptions.value[0]) {
-    historyType.value = deviceOptions.value[0]['stationName'] || deviceOptions.value[0]['id'];
-    linkStatus.value = deviceOptions.value[0]['status'];
+  if (props.stationId) {
     nextTick(async () => {
       await getDataSource();
     });
@@ -352,6 +304,9 @@ defineExpose({ setLoading });
         .@{ventSpace}-select-selection-placeholder {
           color: #ffffffaa;
         }
+        .@{ventSpace}-zxm-select-selection-item {
+          color: #00000017 !important;
+        }
       }
     }
     .@{ventSpace}-table-title {

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

@@ -141,7 +141,48 @@
         </div>
         <!-- 历史数据 -->
         <div class="history-content" v-if="activeKey == 'history'">
-          <HistoryTable :scroll="scroll" :historyColumns="historyColumns" />
+          <div class="left-box">
+            <div class="left-title">
+              <div class="title-fz">
+                <span>分站：</span>
+                <span>
+                  [通讯正常]
+                  <span class="zd-open">{{ openNum || 0 }}</span>
+                </span>
+                <span>
+                  [通讯中断]
+                  <span class="zd-close">{{ clsoeNum || 0 }}</span>
+                </span>
+              </div>
+            </div>
+            <div class="left-content">
+              <div class="card-box" v-for="(item, index) in cardList" :key="index">
+                <div
+                  :class="[
+                    'card-item',
+                    {
+                      selected: selectedIndex === index,
+                      'card-itemN': item.isNewAccess,
+                      'card-itemL': !item.isNewAccess && item.linkstatus,
+                      'card-itemD': !item.isNewAccess && !item.linkstatus,
+                    },
+                  ]"
+                  @click="cardClick(item, index)"
+                >
+                  <div class="card-item-label">{{ item.strname }}</div>
+                </div>
+                <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'" v-if="activeIndex == index && isShow">
+                  <div class="modal-name">站点名称：</div>
+                  <a-input v-model:value="stationName" size="small" placeholder="请输入" @blur="changeName" />
+                  <div class="modal-lj">连接状态：</div>
+                  <a-radio-group v-model:value="stationStatus" size="small" :options="ljList" @change="changeStatus" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="right-box">
+            <HistoryTable :scroll="scroll" :historyColumns="historyColumns" :stationId="stationId" />
+          </div>
         </div>
         <!-- 监测详情 -->
         <div class="detail-content" v-if="activeKey == 'manageAuto'">
@@ -313,6 +354,7 @@ import {
   set158StationRead,
 } from '../safetyList.api';
 import { historyColumns } from '../historyLsit.data';
+import { columnsDetail, columns } from '../safetyList.data';
 import HistoryTable from './HistoryTable.vue';
 import customHeader from '/@/components/vent/customHeader.vue';
 import dayjs from 'dayjs';
@@ -1124,12 +1166,159 @@ onUnmounted(() => {
         height: 100%;
       }
       .history-content {
+        position: relative;
         width: 100%;
         height: 100%;
-        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
         background: url('/@/assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         color: #fff;
+        .left-box {
+          width: 40%;
+          height: 100%;
+          margin-right: 15px;
+          padding: 10px;
+          box-sizing: border-box;
+          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .left-title {
+            display: flex;
+            height: 30px;
+            align-items: center;
+            font-size: 14px;
+            margin-bottom: 10px;
+
+            span {
+              color: #fff;
+            }
+
+            .zd-open {
+              color: rgb(0, 242, 255);
+            }
+
+            .zd-close {
+              color: #ff0000;
+            }
+
+            .title-fz {
+              margin-right: 25px;
+            }
+          }
+
+          .left-content {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            height: calc(100% - 40px);
+            overflow-y: auto;
+
+            .card-box {
+              position: relative;
+              // width: 242px;
+              width: 182px;
+              height: 110px;
+              margin-bottom: 15px;
+              display: flex;
+              justify-content: center;
+
+              .card-itemN {
+                position: relative;
+                width: 85px;
+                height: 110px;
+                background: url('/@/assets/images/zd-2.png') no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .card-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
+                }
+              }
+
+              .card-itemL {
+                position: relative;
+                width: 85px;
+                height: 110px;
+                background: url('/@/assets/images/zd-3.png') no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .card-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
+                }
+              }
+
+              .card-itemD {
+                position: relative;
+                width: 85px;
+                height: 110px;
+                background: url('/@/assets/images/zd-1.png') no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .card-item-label {
+                  width: 100%;
+                  position: absolute;
+                  bottom: 5px;
+                  font-size: 12px;
+                  color: #fff;
+                  text-align: center;
+                }
+              }
+
+              .card-modal {
+                width: 86px;
+                position: absolute;
+                left: 140px;
+                color: #fff;
+                top: 50%;
+                transform: translate(0, -50%);
+                font-size: 12px;
+              }
+
+              .card-modal1 {
+                width: 86px;
+                position: absolute;
+                left: -42px;
+                color: #fff;
+                top: 50%;
+                transform: translate(0, -50%);
+                font-size: 12px;
+              }
+            }
+          }
+        }
+
+        .right-box {
+          width: calc(60% - 15px);
+          height: 100%;
+          padding: 10px;
+          box-sizing: border-box;
+          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background-size: 100% 100%;
+
+          .right-title {
+            display: flex;
+            height: 30px;
+            align-items: center;
+            font-size: 14px;
+            color: #fff;
+            margin-bottom: 10px;
+          }
+        }
       }
     }
   }