分站，粉尘首页修改-提交

src/views/vent/home/clique/dustComponents/mine-wind.vue

@@ -7,19 +7,6 @@
         <div :class="activeIndex == '2' ? 'tabs-item1' : 'tabs-item'" @click="getChange('2')">信息统计</div>
       </div>
       <!-- 信息列表 -->
-      <!-- <div class="content-search" v-if="activeIndex == '1'">
-        <div class="risk-select">
-          <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect">
-            <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{ item.orgname }} </a-select-option>
-          </a-select>
-          <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect">
-            <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{ item.orgname }} </a-select-option>
-          </a-select>
-          <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect">
-            <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{ item.orgname }} </a-select-option>
-          </a-select>
-        </div>
-      </div> -->
       <div class="content-table" v-if="activeIndex == '1'">
         <div class="table-head">
           <div class="head-item" v-for="(ite, ind) in headList" :key="ind">{{ ite.label }}</div>
@@ -28,11 +15,9 @@
           <div class="cont-item" v-for="(item, index) in contList" :key="index">
             <div class="item-val">{{ item.id }}</div>
             <div class="item-val">{{ item.name }}</div>
-            <div class="item-val">{{ item.address }}</div>
             <div class="item-val">{{ item.production }}</div>
-            <div class="item-val">{{ item.person }}</div>
             <div class="item-val">{{ item.br }}</div>
-            <div :class="contList.length > 10 ? 'item-val1' : 'item-val'">{{ item.brz }}</div>
+            <div :class="contList.length > 10 ? 'item-val1' : 'item-val'">{{ item.grade }}</div>
           </div>
         </div>
       </div>
@@ -64,32 +49,28 @@ let activeIndex = ref('1');
 let piebox = ref<any>();
 let pieboxall = ref<any>();
 let mineTitle = ref('矿井通风状态监测');
-// let selectVal = ref('');
-// let selectList = ref<any>([]);
 let contList = reactive<any[]>([
-  { id: '1', name: '柳塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '2', name: '寸草塔二矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '3', name: '布尔台矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '4', name: '乌兰木伦矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '5', name: '寸草塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '6', name: '石圪台矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '7', name: '补连塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '8', name: '哈拉沟矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '9', name: '上湾矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '10', name: '活鸡兔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '11', name: '大柳塔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '12', name: '锦界矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '13', name: '榆家梁矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '14', name: '保德矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+  { id: '1', name: '柳塔矿',  production: 800,  br: 1, grade: '一' },
+  { id: '2', name: '寸草塔二矿',  production: 700,  br: 2, grade: '二' },
+  { id: '3', name: '布尔台矿',  production: 900,  br: 1, grade: '一' },
+  { id: '4', name: '乌兰木伦矿',  production: 1800,  br: 1, grade: '三' },
+  { id: '5', name: '寸草塔矿',  production: 1200,  br: 1, grade: '一' },
+  { id: '6', name: '石圪台矿',  production: 2300,  br: 1, grade: '四' },
+  { id: '7', name: '补连塔矿',  production: 300,  br: 1, grade: '一' },
+  { id: '8', name: '哈拉沟矿',  production: 1300,  br: 3, grade: '一'  },
+  { id: '9', name: '上湾矿',  production: 800,  br: 1, grade: '一'  },
+  { id: '10', name: '活鸡兔井',  production: 800,  br: 1, grade: '一'  },
+  { id: '11', name: '大柳塔井',  production: 800,  br: 1, grade: '一'  },
+  { id: '12', name: '锦界矿',  production: 800,  br: 1, grade: '一'  },
+  { id: '13', name: '榆家梁矿',  production: 800,  br: 1, grade: '一'  },
+  { id: '14', name: '保德矿',  production: 800,  br: 1, grade: '一'  },
 ]);
 let headList = reactive<any>([
   { label: '序号' },
   { label: '矿井名称' },
-  { label: '所属地区市/县' },
   { label: '原煤产量/百万吨' },
-  { label: '从业人数/人' },
-  { label: '尘肺病累计病例/人' },
-  { label: '本年度尘肺病病例/人' },
+  { label: '尘肺病例/人' },
+  { label: '发病等级' }
 ]);
 
 //tabs选项切换
@@ -104,8 +85,7 @@ function getChange(active) {
       break;
   }
 }
-//下拉框选项切换
-function changeSelect(val) { }
+
 function getOption() {
   nextTick(() => {
     let myChart = echarts.init(piebox.value);
@@ -136,15 +116,6 @@ function getOption() {
         },
         icon: 'circle',
         data: ['西安市', '宝鸡市', '咸阳市', '铜川市', '渭南市', '延安市', '榆林市', '汉中市', '安康市', '商洛市'],
-        // formatter: function (name) {
-        //     var oa = option.series[0].data;
-        //     var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
-        //     for (var i = 0; i < option.series[0].data.length; i++) {
-        //         if (name == oa[i].name) {
-        //             return name + '     ' + oa[i].value + '     ' + (oa[i].value / num * 100).toFixed(2) + '%';
-        //         }
-        //     }
-        // }
       },
       series: [
         {
@@ -444,47 +415,6 @@ watch(
         margin-right: 10px;
       }
     }
-
-    // .content-search {
-    //   position: relative;
-    //   width: 100%;
-    //   height: 35px;
-    //   margin-bottom: 10px;
-    //   // padding: 0px 30px;
-    //   display: flex;
-    //   align-items: center;
-
-    //   .risk-select {
-    //     position: absolute;
-    //     width: 90%;
-    //     height: 30px;
-    //     left: 50%;
-    //     transform: translate(-50%, 0);
-    //     top: 0px;
-    //     background: url('../../../../../assets/images/company/content-label.png') no-repeat center;
-    //     background-size: 100% 100%;
-    //     z-index: 9999;
-
-    //     .zxm-select {
-    //       position: absolute;
-    //       top: 50%;
-    //       transform: translate(0, -50%);
-
-    //       &:nth-child(1) {
-    //         left: 10px;
-    //       }
-
-    //       &:nth-child(2) {
-    //         left: 135px;
-    //       }
-
-    //       &:nth-child(3) {
-    //         left: 260px;
-    //       }
-    //     }
-    //   }
-    // }
-
     .content-table {
       position: relative;
       width: 90%;
@@ -508,47 +438,37 @@ watch(
           border-right: 1px solid rgba(0, 216, 255, 0.1);
 
           &:nth-child(1) {
-            width: 20px;
+            width: 8%;
             text-align: center;
           }
 
           &:nth-child(2) {
-            width: 38px;
+            width: 31%;
             text-align: center;
           }
 
           &:nth-child(3) {
-            width: 57px;
+            width: 20%;
             text-align: center;
           }
 
           &:nth-child(4) {
-            width: 57px;
+            width: 20%;
             text-align: center;
           }
 
           &:nth-child(5) {
-            width: 57px;
+            width: 20%;
             text-align: center;
           }
 
-          &:nth-child(6) {
-            width: 77px;
-            text-align: center;
-          }
-
-          &:nth-child(7) {
-            width: 77px;
-            text-align: center;
-          }
+          
         }
       }
 
       .table-cont {
         height: calc(100% - 51px);
-
         overflow-y: auto;
-
         .cont-item {
           display: flex;
           justify-content: space-between;
@@ -565,39 +485,28 @@ watch(
             color: #fff;
 
             &:nth-child(1) {
-              width: 20px;
+              width: 8%;
               text-align: center;
             }
 
             &:nth-child(2) {
-              width: 38px;
+              width: 31%;
               text-align: center;
             }
 
             &:nth-child(3) {
-              width: 57px;
+              width: 20%;
               text-align: center;
             }
 
             &:nth-child(4) {
-              width: 57px;
+              width: 20%;
               text-align: center;
             }
 
             &:nth-child(5) {
-              width: 57px;
-              text-align: center;
-            }
-
-            &:nth-child(6) {
-              width: 77px;
-              text-align: center;
-            }
-
-            &:nth-child(7) {
-              width: 77px;
+              width: 20%;
               text-align: center;
-              border-right: none;
             }
           }
 
@@ -608,7 +517,7 @@ watch(
             height: 100%;
             font-size: 12px;
             color: #fff;
-            width: 67px;
+            width: 17.4%;
             text-align: center;
             border-right: none;
           }

src/views/vent/safetyList/index.vue

@@ -33,7 +33,7 @@
               @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="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>
@@ -44,7 +44,17 @@
       </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" />
+        <a-table size="small" :scroll="{ y: 680 }" :columns="columns" :data-source="tableData" :pagination="pagination"
+          @change="pageChange" >
+          <template #bodyCell="{ column, text }">
+                    <template v-if="column.dataIndex === 'valueJc' && text ">
+                        <div v-for="item in text.split(',')" :key="item" >
+                          <span style="display: inline-block;width: 50%;text-align: right; color:rgb(0, 242, 255);margin-right:5px" >{{ item.substring(0,item.indexOf(':')+1) }}</span>
+                          <span style="display: inline-block; width:45%;text-align: left; color:#fff">{{ item.substring(item.indexOf(':')+1) }} </span>
+                        </div>
+                    </template>
+                </template>
+        </a-table>
       </div>
     </div>
   </div>
@@ -53,13 +63,13 @@
 <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 { subStationList, getList, getEdit } from './safetyList.api';
 import { columns } from './safetyList.data'
 
-let isShow=ref(false)
+let isShow = ref(false)
 let stationName = ref('')
 let stationStatus = ref(null)
-let stationId=ref(null)
+let stationId = ref(null)
 let ljList = reactive<any[]>([
   { value: 0, label: '断开' },
   { value: 1, label: '连接' }
@@ -83,7 +93,7 @@ let tableData = ref<any[]>([])
 
 //获取分站信息
 async function getSubStationList() {
-  let res = await subStationList({})
+  let res = await subStationList({strtype:"modbus"})
   console.log(res, '分站-----------')
   if (res.length != 0) {
     cardList.value = res
@@ -98,39 +108,43 @@ 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
+  stationStatus.value = item.linkstatus
+  stationId.value = item.id
+  isShow.value = true
 }
 //站点名称编辑
-function changeName(val){
+function changeName(val) {
   getChangeStation()
 }
 //站点连接状态修改
-function changeStatus(val){
+function changeStatus(val) {
   getChangeStation()
 }
-async function getChangeStation(){
-  let res=await getEdit({id:stationId.value,strname:stationName.value,linkstatus:stationStatus.value})
-  console.log(res,'站点编辑')
+async function getChangeStation() {
+  let res = await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value })
+  console.log(res, '站点编辑')
   getSubStationList()
-  isShow.value=false
+  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 => {
+  
+  res.forEach(el => {
+    el.key=el.id
     el.linkstatusC = el.linkstatus ? '连接' : '未连接'
     el.children = el.devInfoList
     el.children.forEach(v => {
+      v.key=v.id
       v.linkstatus = v.netStatus
       v.linkstatusC = v.linkstatus ? '连接' : '未连接'
       v.updateTime = v.time
+      v.valueJc=`密度:${v.density},气压:${v.pa},温度:${v.temperature},湿度:${v.humidity},风速:${v.windSpeed},压差:${v.difPress}`
+
     })
   })
-  tableData.value = data
+  tableData.value = res
   pagination.total = res.total
 }
 //分页切换

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

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

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

@@ -21,8 +21,8 @@ export const columns: BasicColumn[] = [
     },
     {
         title: '监测值',
-        dataIndex: 'address',
-        key: 'address',
+        dataIndex: 'valueJc',
+        key: 'valueJc',
         align: 'center',
     },
     {