安全监控分站管理界面及功能-提交

src/views/vent/safetyList/index.vue

@@ -1,189 +1,316 @@
 <template>
-    <div class="safetyList">
-      <customHeader>安全监控新增列表</customHeader>
-      <div class="content">
-        <div class="left-box">
-          <!-- 左侧树菜单 -->
-          <!-- <fileSystem :selected="selected" :list="listArr" :draggable="true" @on-click="onClick">
-            <template #icon="{ item }">
-              <template v-if="item.isFolder">
-                <SvgIcon v-if="item.isexpanded" size="18" name="file-open" />
-                <SvgIcon v-else size="18" name="file-close" />
-              </template>
-              <treeIcon class="iconfont" :title="item.title" v-else />
-            </template>
-          </fileSystem> -->
+  <div class="safetyList">
+    <customHeader>安全监控分站管理</customHeader>
+    <div class="content">
+      <div class="left-box">
+        <div class="left-title">
+          <div class="title-fz">
+            <span>分站：</span>
+            <span>
+              [通讯正常]
+              <span class="zd-open">{{ openNum || 0 }}</span>
+            </span>
+            <span>
+              [通讯中断]
+              <span class="zd-close">{{ clsoeNum || 0 }}</span>
+            </span>
+          </div>
+          <!-- <div class="title-cd">
+            <span>测点：</span>
+            <span>
+              [通讯正常]
+              <span class="zd-open">407</span>
+            </span>
+            <span>
+              [通讯中断]
+              <span class="zd-close">0</span>
+            </span>
+          </div> -->
         </div>
-        <div class="right-box">
-          <!-- <NormalTable :key="dataNow" :searchParam="searchParam" :columns="columns" :deleteById="deleteById"
-            :downLoad="downLoad" :list="reportList" designScope="device-tabel" title="报表管理" :showTab="false"
-            @saveAdd="saveAdd" /> -->
+        <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 % 3 == 2 ? '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: 720 }" :columns="columns" :data-source="tableData" :pagination="pagination" @change="pageChange" />
+      </div>
     </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, nextTick, reactive, onMounted } from 'vue';
-  import customHeader from '/@/components/vent/customHeader.vue';
-//   import fileSystem from './comment/common/cameraTree.vue';
-//   import { SvgIcon } from '/@/components/Icon';
-//   import treeIcon from './comment/common/Icon/treeIcon.vue';
-//   import NormalTable from './comment/NormalTable.vue';
-  import { message } from 'ant-design-vue';
-  import { } from './safetyList.data';
-  import { } from './safetyList.api';
-  
- 
-  
-//   //左侧菜单列表
-//   let listArr = reactive<any[]>([
-//     {
-//       pid: 'auto',
-//       isFolder: true,
-//       isexpanded:true,
-//       title: '系统数据报表',
-//       id: '0',
-//       children: []
-//     },
-//     {
-//       pid: 'hand',
-//       isFolder: true,
-//       isexpanded:true,
-//       title: '手动报表',
-//       id: '1',
-//       children: []
-//     },
-//     {
-//       pid: 'temp',
-//       isFolder: true,
-//       isexpanded:true,
-//       title: '报表模板',
-//       id: '2',
-//       children: []
-//     },
-//   ]);
-//   //lxh 当前选中树节点
-//   let selected = reactive<any>({
-//     id: null,
-//     pid: null,
-//     title: '',
-//     isFolder: false,
-//   });
-  
-//   //获取左侧菜单树
-//   async function getTreeList() {
-//     const res = await getQuery()
-//     if (res.length != 0) {
-//       listArr.forEach(el => {
-//         el.children.length = 0
-//         res.forEach(v => {
-//           // v.id=v.itemValue
-//           let childre: any[] = []
-//           if (v.children.length != 0) {
-//             v.children.forEach(m => {
-//               childre.push({ pid: v.itemValue, ppid: el.id, isFolder: false,isexpanded:false, title: m.itemText, id: m.itemValue })
-//             })
-//           }
-//           el.children.push({ pid: el.id, isFolder: true,isexpanded:false, title: v.itemText, id: v.itemValue, children: childre })
-//         })
-//       })
-//       console.log(listArr, 'listArr-----------')
-//     }
-//   }
-//   //点击目录
-//   async function onClick(node) {
-//     console.log(node, 'node--------------')
-//     if (node.pid == 'auto') {
-//       treeClick(node)
-//     } else if (node.pid == 'hand') {
-//       treeClick(node)
-//     } else {
-//       treeClick(node)
-//     }
-//   };
-//   function treeClick(node) {
-//     dataNow.value = new Date().getTime()
-//     selected.id = node.id;
-//     selected.pid = node.pid;
-//     selected.title = node.title;
-//     selected.isFolder = node.isFolder;
-//     selected.ppid=node.ppid
-//     if (node.id == '0' || node.id == '1' || node.id == '2') {
-//       searchParam.busKind = ''
-//       searchParam.modelType = node.id
-//       searchParam.reportType = ''
-//     } else if (node.pid == '0' || node.pid == '1' || node.pid == '2') {
-//       searchParam.busKind = node.id
-//       searchParam.modelType = node.pid
-//       searchParam.reportType = ''
-//     } else {
-//       searchParam.busKind = node.pid
-//       searchParam.modelType = node.ppid
-//       searchParam.reportType = node.id
-//     }
-//   }
-  
-  
-  
-//   async function saveAdd(params) {
-//     let res = await save({ ...params });
-//     if (res.id) {
-//       message.warning('新增成功!');
-//     } else {
-//       message.error('新增失败!')
-//     }
-//     dataNow.value = new Date().getTime()
-//   }
-  
-//   onMounted(() => {
-//     getTreeList()
-//   })
-  </script>
-  
-  <style lang="less" scoped>
-  .safetyList {
-    width: calc(100% - 20px);
-    height: calc(100% - 90px);
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, reactive, onMounted } from 'vue';
+import customHeader from '/@/components/vent/customHeader.vue';
+import { subStationList, getList,getEdit } from './safetyList.api';
+import { columns } from './safetyList.data'
+
+let isShow=ref(false)
+let stationName = ref('')
+let stationStatus = ref(null)
+let stationId=ref(null)
+let ljList = reactive<any[]>([
+  { value: 0, label: '断开' },
+  { value: 1, label: '连接' }
+])
+let activeIndex = ref(null)
+let cardList = ref<any[]>()
+let openNum = ref(0)
+let clsoeNum = ref(0)
+
+//分页参数配置
+let pagination = reactive({
+  current: 1, // 当前页码
+  pageSize: 20, // 每页显示条数
+  total: 0, // 总条目数，后端返回
+  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+  showSizeChanger: true, // 是否可改变每页显示条数
+  pageSizeOptions: ['10', '20', '30', '40', '50', '100'], // 可选的每页显示条数
+});
+let tableData = ref<any[]>([])
+
+
+//获取分站信息
+async function getSubStationList() {
+  let res = await subStationList({})
+  console.log(res, '分站-----------')
+  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) {
+  console.log(item, '站点选项------------')
+  activeIndex.value = item.isNewAccess ? index : null
+  stationName.value = item.strname
+  stationStatus.value=item.linkstatus
+  stationId.value=item.id
+  isShow.value=true
+}
+//站点名称编辑
+function changeName(val){
+  getChangeStation()
+}
+//站点连接状态修改
+function changeStatus(val){
+  getChangeStation()
+}
+async function getChangeStation(){
+  let res=await getEdit({id:stationId.value,strname:stationName.value,linkstatus:stationStatus.value})
+  console.log(res,'站点编辑')
+  getSubStationList()
+  isShow.value=false
+}
+//获取详细信息列表
+async function getStationList() {
+  let res = await getList({ pageNo: pagination.current, pageSize: pagination.pageSize, })
+  console.log(res, '详细信息列表--------')
+  let data = res.records
+  data.forEach(el => {
+    el.linkstatusC = el.linkstatus ? '连接' : '未连接'
+    el.children = el.devInfoList
+    el.children.forEach(v => {
+      v.linkstatus = v.netStatus
+      v.linkstatusC = v.linkstatus ? '连接' : '未连接'
+      v.updateTime = v.time
+    })
+  })
+  tableData.value = data
+  pagination.total = res.total
+}
+//分页切换
+function pageChange(val) {
+  pagination.current = val.current;
+  pagination.pageSize = val.pageSize;
+  getStationList();
+}
+
+onMounted(() => {
+  getSubStationList()
+  getStationList()
+})
+</script>
+
+<style lang="less" scoped>
+.safetyList {
+  width: calc(100% - 20px);
+  height: calc(100% - 90px);
+  position: relative;
+  margin: 80px 10px 10px 10px;
+
+  .content {
     position: relative;
-    margin: 80px 10px 10px 10px;
-  
-    .content {
-      width: 100%;
-      height: calc(100% - 30px);
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: flex-start;
-      position: relative;
-  
-      // z-index: 999;
-      .left-box {
-        width: 15%;
-        height: 100%;
-        padding: 20px;
-        border: 1px solid #99e8ff66;
-        background: #27546e1a;
-        box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-        -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-        -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
-        overflow-y: auto;
-  
-        // lxh
-        .iconfont {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left-box {
+      width: 40%;
+      height: 100%;
+      margin-right: 15px;
+      padding: 10px;
+      box-sizing: border-box;
+      background: url('@/assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .left-title {
+        display: flex;
+        height: 30px;
+        align-items: center;
+        font-size: 14px;
+
+        span {
           color: #fff;
-          font-size: 12px;
-          margin-left: 5px;
+        }
+
+        .zd-open {
+          color: rgb(0, 242, 255);
+        }
+
+        .zd-close {
+          color: #ff0000;
+        }
+
+        .title-fz {
+          margin-right: 25px;
         }
       }
-  
-      .right-box {
-        width: 85%;
-        height: 100%;
-        padding: 0px 0px 0px 15px;
-        box-sizing: border-box;
+
+      .left-content {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        height: calc(100% - 30px);
+        overflow-y: auto;
+
+        .card-box {
+          position: relative;
+          width: 242px;
+          height: 146px;
+          margin-bottom: 20px;
+          display: flex;
+          justify-content: center;
+
+          .card-itemN {
+            position: relative;
+            width: 110px;
+            height: 146px;
+            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: 110px;
+            height: 146px;
+            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: 110px;
+            height: 146px;
+            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: 120px;
+            position: absolute;
+            left: 181px;
+            color: #FFF;
+            top: 50%;
+            transform: translate(0, -50%);
+            font-size: 12px;
+          }
+
+          .card-modal1 {
+            width: 120px;
+            position: absolute;
+            left: -60px;
+            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;
       }
     }
   }
-  </style>
-  
+}
+
+::v-deep(.zxm-radio-wrapper) {
+  font-size: 12px;
+}
+
+::v-deep(.zxm-input) {
+  font-size: 12px;
+}
+</style>

src/views/vent/safetyList/safetyList.api.ts

@@ -0,0 +1,15 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  subStationList = '/safety/ventanalySubStation/alllist',
+  getList='/safety/ventanalySubStation/list',
+  getEdit='/safety/ventanalySubStation/edit'
+}
+
+
+// 分站查询接口
+export const subStationList = (params) => defHttp.get({ url: Api.subStationList, params });
+// 分站详细信息列表
+export const getList = (params) => defHttp.get({ url: Api.getList, params });
+//分站编辑
+export const getEdit = (params) => defHttp.put({ url: Api.getEdit, params });

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

@@ -0,0 +1,41 @@
+import { BasicColumn } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+    {
+        title: '序号',
+        width: 60,
+        align: 'center',
+        customRender: ({ index }: { index: number }) => `${index + 1}`
+    },
+    {
+        title: '安装位置',
+        dataIndex: 'strinstallpos',
+        key: 'strinstallpos',
+        align: 'center',
+    },
+    {
+        title: '名称',
+        dataIndex: 'strname',
+        key: 'strname',
+        align: 'center',
+    },
+    {
+        title: '监测值',
+        dataIndex: 'address',
+        key: 'address',
+        align: 'center',
+    },
+    {
+        title: '连接状态',
+        dataIndex: 'linkstatusC',
+        key: 'linkstatusC',
+        align: 'center',
+    },
+    {
+        title: '时间',
+        dataIndex: 'updateTime',
+        key: 'updateTime',
+        align: 'center',
+    },
+
+];