大屏开发

src/api/bigscreen/index.js

@@ -10,10 +10,18 @@ export function getWeather(params) {
   })
 }
 
-// 边坡
-export function huanjingList() {
+// 气象、污水、温水
+export function huanjingList(query) {
+  return request({
+    url: '/system/enviData/getByType?monitorType='+query,
+    method: 'get',
+  })
+}
+
+// 边坡沉降监测
+export function bianpoChenJiangList(query) {
   return request({
-    url: '/system/enviData/getByType',
+    url: '/system/data/getNowData',
     method: 'get',
   })
 }

src/views/bigscreen/index.vue

@@ -156,18 +156,17 @@
           <div class="in-box">
             <div class="tit-bg"></div>
             <h3 class="el-icon-s-unfold">环境监测气象站</h3>
-            <div class="cpintro1" >
-            </div>
               <div class="km-thead col02d upop scrollListTitle">
-                  <div>设备名称</div>
-                  <div>报警时间</div>
-                  <div>报警级别</div>
+                  <div>监测项</div>
+                  <div>监测值</div>
+                  <div>监测时间</div>
                 </div>
-              <vue-seamless-scroll :data="listData" class="warp">
+              <vue-seamless-scroll :data="listData4huanjing" class="warp">
                 <ul class="item">
-                  <li v-for="(item, index) in listData" :key="index">
-                    <span class="title" v-text="item.title"></span>
-                    <span class="date" v-text="item.date"></span>
+                  <li v-for="(item, index) in listData4huanjing" :key="index">
+                    <span class="title qixiangspan" v-text="item.items"></span>
+                    <span class="title qixiangspan" v-text="item.evalue"></span>
+                    <span class="date qixiangspan" v-text="item.time"></span>
                   </li>
                 </ul>
               </vue-seamless-scroll>
@@ -178,9 +177,23 @@
         <div class="layerWd1">
           <div class="in-box">
             <div class="tit-bg"></div>
-            <h3 class="el-icon-s-unfold">环境监测</h3>
-            <indexenvi :air="navActv"></indexenvi>
-            <indexwater :air="navActv"></indexwater>
+            <h3 class="el-icon-s-unfold">沉降监测GNSS</h3>
+            <div class="km-thead col02d upop scrollListTitle4Gnss">
+                  <div>边坡监测点</div>
+                  <div>X</div>
+                  <div>Y</div>
+                  <div>Z</div>
+                </div>
+              <vue-seamless-scroll :data="listData4gnss" class="warp">
+                <ul class="item">
+                  <li v-for="(item, index) in listData4gnss" :key="index">
+                    <span class="title gnsspan" v-text="item.sensorname"></span>
+                    <span class="title gnsspan" v-text="item.dispX"></span>
+                    <span class="date gnsspan" v-text="item.dispY"></span>
+                    <span class="date gnsspan" v-text="item.dispH"></span>
+                  </li>
+                </ul>
+              </vue-seamless-scroll>
           </div>
         </div>
       </div>
@@ -188,7 +201,7 @@
         <div class="layerWd1">
           <div class="in-box">
             <div class="tit-bg"></div>
-            <h3 class="el-icon-s-unfold">储量管理</h3>
+            <h3 class="el-icon-s-unfold">排水口污水水质</h3>
             <div class="first-cl first-cl1">
               <div class="cl1bg"></div>
               <div class="cl1left">
@@ -242,7 +255,7 @@
           <div class="layerWd1">
             <div class="in-box">
               <div class="tit-bg"></div>
-              <h3 class="el-icon-s-unfold">气象情况</h3>
+              <h3 class="el-icon-s-unfold">温泉水质</h3>
               <div id="weather1" class="weather">
                 <div class="rt1-info">
                   <p>接口暂停服务</p>
@@ -295,15 +308,15 @@
             </div>
           </div>
         </div>
-        <div class="d0 d-3">
+        <!-- <div class="d0 d-3">
           <div class="layerWd1">
             <div class="in-box">
               <div class="tit-bg"></div>
-              <h3 class="el-icon-s-unfold">视频监控</h3>
+              <h3 class="el-icon-s-unfold">降雨量</h3>
               <div class="indexjiankong" @click="jiankong('all')"></div>
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="d_ d_0" :class="{ actv: navActv === 1 }">
@@ -954,7 +967,9 @@ import {
   indexReserves,
   isNewAlarm,
   newAlarmList,
-  huanjingList
+  huanjingList,
+  bianpoChenJiangList
+
 } from "@/api/bigscreen/index.js";
 import { getComVideo } from "@/api/company.js";
 import "echarts-liquidfill"; // 引入水球图的组件
@@ -980,36 +995,10 @@ export default {
   data() {
     return {
       // 2024-5-25 dabao
-      listData: [{
-          'title': '无缝滚动第一行无缝滚动第一行',
-          'date': '2017-12-16'
-        }, {
-          'title': '无缝滚动第二行无缝滚动第二行',
-          'date': '2017-12-16'
-        }, {
-          'title': '无缝滚动第三行无缝滚动第三行',
-          'date': '2017-12-16'
-        }, {
-          'title': '无缝滚动第四行无缝滚动第四行',
-          'date': '2017-12-16'
-        }, {
-          'title': '无缝滚动第五行无缝滚动第五行',
-          'date': '2017-12-16'
-        }, {
-          'title': '无缝滚动第六行无缝滚动第六行',
-          'date': '2017-12-16'
-        }, {
-          'title': '无缝滚动第七行无缝滚动第七行',
-          'date': '2017-12-16'
-        }, {
-          'title': '无缝滚动第八行无缝滚动第八行',
-          'date': '2017-12-16'
-        }, {
-          'title': '无缝滚动第九行无缝滚动第九行',
-          'date': '2017-12-16'
-        }],
-
-
+      listData4huanjing: [],
+      listData4gnss: [],
+      listData4wushui: [],
+      listData4wenshui: [],
       playUrl: "",
       comIntroShow: false,
       newAlarmListData: [],
@@ -1383,7 +1372,8 @@ export default {
       this.nowWaterData();
       this.indexCl();
 
-      this.getHuanjingList()
+      this.getJianCeList()
+      this.getBianpoChenJiangList()
     });
 
     this.chartConfig = {
@@ -1422,13 +1412,27 @@ export default {
     },
   },
   methods: {
-    getHuanjingList(){
-      debugger
-      huanjingList()
+    getBianpoChenJiangList(){
+      bianpoChenJiangList().then((res) => {
+          this.listData4gnss = res.data || []
+        })
+    },
+    getJianCeList(){
+      // 40322034 气象站
+      // 40281845 污水水质
+      // 40281855 温泉水质
+      // 40306684 自动化运
+      huanjingList('40322034') //
         .then((res) => {
-          console.log(res, "环境监测");
-          if (res.code === 200) {
-          }
+          this.listData4huanjing = res.data || []
+        }) 
+        huanjingList('40281845') //
+        .then((res) => {
+          this.listData4wushui = res.data || []
+        })
+        huanjingList('40281855') //
+        .then((res) => {
+          this.listData4wenshui = res.data || []
         })
     },
 
@@ -6050,10 +6054,33 @@ body .el-dialog__body {
     height: 40px;
     font-size: 18px;
     font-weight: bold;
+    div{
+      width: 30%;
+      text-align: center;
+      &:last-child{
+        width: 40%;
+      }
+    }
+  }
+
+  .scrollListTitle4Gnss{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 40px;
+    font-size: 18px;
+    font-weight: bold;
+    div{
+      width: 20%;
+      text-align: center;
+      &:first-child{
+        width: 40%;
+      }
+    }
   }
 .warp {
     height: 270px;
-    width: 360px;
+    width: 100%;
     margin: 0 auto;
     overflow: hidden;
     ul {
@@ -6070,6 +6097,22 @@ body .el-dialog__body {
         font-size: 15px;
         color: #bff7ff;
       }
+      .qixiangspan{
+        display: inline-block;
+        width: 30%;
+        text-align: center;
+        &:last-child{
+          width: 40%;
+        }
+      }
+      .gnsspan{
+        display: inline-block;
+        text-align: center;
+        width: 20%;
+        &:first-child{
+          width: 40%;
+        }
+      }
     }
   }
 </style>