页面提交

src/api/data.js

@@ -21,3 +21,15 @@ export function getPipeLengthByPressureLevel() {
     method: 'get',
   })
 }
+
+/**
+ * 预警信息
+ * @returns {*}
+ */
+export function countByWarningCategory() {
+  return request({
+    url: '/sooka-digital-construction/ability/countByWarningCategory',
+    method: 'get',
+  })
+}
+

src/api/sentinel.js

@@ -19,7 +19,7 @@ export function selectBrandList() {
 // 查询哨兵设备统计详情
 export function selectDailyThreshold(deviceCode) {
   return request({
-    url: `/sooka-digital-construction/deviceInfo/selectDailyThreshold/${deviceCode}`,
+    url: `/sooka-digital-construction/deviceThreshold/selectDailyThreshold/${deviceCode}`,
     method: 'get'
   })
 }
@@ -27,7 +27,7 @@ export function selectDailyThreshold(deviceCode) {
 // 根据设备id查询设备详情
 export function selectByDeviceId({id}) {
   return request({
-    url: `/sooka-digital-construction/deviceInfo/selectByDeviceId/${id}`,
+    url: `/sooka-digital-construction/deviceInfo/${id}`,
     method: 'get'
   })
 }

src/views/SenEquipmentCenter.vue

@@ -253,7 +253,7 @@
             },
             yAxis: { gridIndex: 0 },
             grid: { top: '55%' },
-            color: ["#6cb956", "#629ab2"],
+            color: ["#28717d", "#629ab2"],
             series: [
               {
                 type: 'bar',

src/views/SenWarningCenter.vue

@@ -7,88 +7,40 @@
 
 <template>
     <div>
-        <div class="warning_left" style="top: 70px;">
-			<h4>可燃气体泄露预警</h4>
-            <h2>3056</h2>
-            <img src="@/assets/images/warningBg.png">
-		</div>
-        <div class="warning_left" style="top: 240px;">
-			<h4>位移预警</h4>
-            <h2>355</h2>
-            <img src="@/assets/images/warningBg.png">
-		</div>
-        <div class="warning_left" style="top: 410px;">
-			<h4>振动预警</h4>
-            <h2>937</h2>
-            <img src="@/assets/images/warningBg.png">
-		</div>
-        <div class="warning_left" style="top: 580px;">
-			<h4>水位预警</h4>
-            <h2>37</h2>
-            <img src="@/assets/images/warningBg.png">
-		</div>
-        <div class="warning_left" style="top: 747px;">
-			<h4>异常流量预警</h4>
-            <h2>86</h2>
-            <img src="@/assets/images/warningBg.png">
-		</div>
-        <div class="con_right con_left_js" style="top: 70px;">
-			<div class="list_tit">可燃气体泄露预警说明</div>
-			<!-- 预警说明内容主体 -->
-            <div class="text_content">
-                <h4>预警名称：可燃性气体泄漏预警</h4>
-                <h4>预警描述：通过安装在燃气管道附近的燃气哨兵设备，实现管道燃气周边可燃性气体（甲烷）含量变化。</h4>
-                <h4>预警阈值：3%</h4>
-            </div>
-		</div>
-        <div class="con_right con_left_js" style="top: 240px;">
-			<div class="list_tit">位移预警说明</div>
-			<!-- 预警说明内容主体 -->
-            <div class="text_content">
-                <h4>预警名称：可燃性气体泄漏预警</h4>
-                <h4>预警描述：通过安装在燃气管道附近的燃气哨兵设备，实现管道燃气周边可燃性气体（甲烷）含量变化。</h4>
-                <h4>预警阈值：3%</h4>
-            </div>
-		</div>
-        <div class="con_right con_left_js" style="top: 410px;">
-			<div class="list_tit">振动预警说明</div>
-			<!-- 预警说明内容主体 -->
-            <div class="text_content">
-                <h4>预警名称：可燃性气体泄漏预警</h4>
-                <h4>预警描述：通过安装在燃气管道附近的燃气哨兵设备，实现管道燃气周边可燃性气体（甲烷）含量变化。</h4>
-                <h4>预警阈值：3%</h4>
-            </div>
-		</div>
-        <div class="con_right con_left_js" style="top: 580px;">
-			<div class="list_tit">水位预警说明</div>
-			<!-- 预警说明内容主体 -->
-            <div class="text_content">
-                <h4>预警名称：可燃性气体泄漏预警</h4>
-                <h4>预警描述：通过安装在燃气管道附近的燃气哨兵设备，实现管道燃气周边可燃性气体（甲烷）含量变化。</h4>
-                <h4>预警阈值：3%</h4>
-            </div>
-		</div>
-        <div class="con_right con_left_js" style="top: 747px;">
-			<div class="list_tit">异常流量预警说明</div>
-			<!-- 预警说明内容主体 -->
-            <div class="text_content">
-                <h4>预警名称：可燃性气体泄漏预警</h4>
-                <h4>预警描述：通过安装在燃气管道附近的燃气哨兵设备，实现管道燃气周边可燃性气体（甲烷）含量变化。</h4>
-                <h4>预警阈值：3%</h4>
-            </div>
-		</div>
+      <div class="warning_left" :class="'warning_'+index" v-for="(item,index) in option" >
+        <h4>{{item.typeName}}</h4>
+        <h2>{{item.count}}</h2>
+        <img src="@/assets/images/warningBg.png">
+      </div>
+      <div class="con_right con_left_js" :class="'warning_'+index" v-for="(item,index) in option" >
+        <div class="list_tit">{{item.typeName}}说明</div>
+        <!-- 预警说明内容主体 -->
+              <div class="text_content">
+                  <h4>预警名称：{{item.typeName}}</h4>
+                  <h4>预警描述：{{item.warningDescription}}</h4>
+                  <h4>告警阈值：{{item.concentrationUp}}；紧急阈值：{{item.urgentUp}}</h4>
+              </div>
+      </div>
     </div>
 </template>
 
 <script>
+import {countByWarningCategory} from "@/api/data";
 export default {
     data(){
-        return {
-        }
+      return {
+        option:[],
+      }
     },
     mounted(){
+      this.countByWarningCategory();
     },
     methods:{
+      countByWarningCategory(){
+        countByWarningCategory().then(req => {
+          this.option = req.data;
+        })
+      }
     }
 }
 </script>
@@ -131,6 +83,22 @@ export default {
 	.con_left_js {
 		width: 400px !important;
 	}
+    .warning_0{
+      top: 70px !important;
+    }
+    .warning_1{
+      top: 240px !important;
+    }
+    .warning_2{
+      top: 410px !important;
+    }
+    .warning_3{
+      top: 580px !important;
+    }
+    .warning_4{
+      top: 747px !important;
+    }
+
 
     .warning_left{
         position: absolute;
@@ -164,4 +132,4 @@ export default {
     }
 
 
-</style>
+</style>

src/views/SentryCockpit.vue

@@ -747,7 +747,7 @@
 						data: data,
 					},
 					tooltip: {
-						formatter: "{a}：<br/>{b}: {c}人",
+						formatter: "{a}：<br/>{b}: {c}户",
 					},
 					series: [
 						// 主要展示层的