syy

zhsq_qk-ui/src/assets/images/qkq_sprh.css

@@ -129,7 +129,7 @@
   -webkit-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   transition: all 0.4s ease;
-  padding-left: 30px;
+  padding-left: 42px;
   text-shadow: 0px 0px 5px #6affff;
 }
 
@@ -743,13 +743,12 @@ padding: 0px 10px;
 .yjcs li::after{
 	content: " ";
 	   display: block;
-	   width: 12px;
-	   height: 14px;
+	   width: 32px;
+	   height: 35px;
 	   position: absolute;
-	   top:13px;
+	   top:2px;
 	   left: 10px;
-	background: url("aqyj_yjcs1.png") no-repeat center;
-	box-shadow: 0px 0px 5px #2da92a;
+	background: url("qkq_sxticon.png") no-repeat center;
 }
 .csnld li::after{
 	content: " ";
@@ -874,8 +873,78 @@ border-radius: 2px;
   background: #0fd3ff;
   border-radius: 2px;
 
+}
+.qkq_aqcn{
+	display: flex;
+	flex-direction: row;
+}
+#qkq_aqcn_chart{
+	width: 160px;
+	height: 120px;
+}
+.qkq_aqcn_txt{
+	margin-top: 10px;
+	width: 150px;
+}
+.qkq_aqcn_txt p{
+	height: 40px;
+	line-height: 40px;
+	border-bottom: 1px dashed #ccc;
+	font-size: 16px;
+	color: #fff;
+}
+.qkq_aqcn_txt p span{
+	float:right;
+	color: #0095ff;
+}
+.qkq_aqcn_col{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	padding: 15px 10px;
+	margin-top: 15px;
+	background: rgba(0, 102, 197, 0.2);
+	border-radius: 4px;
+	box-shadow: inset 0px 0px 8px rgba(0, 102, 197, 0.9);
+}
+.qkq_aqcn_col p{
+	text-align: center;
+	font-size: 14px;
+	color: #fff;
+}
+.qkq_aqcn_col p b{
+	text-align: center;
+	font-size: 14px;
+	color: #ff0000;
+	display: block;
+	padding: 5px 0px 0px 0px;
+}
+.qkq_csnl{
+	height: 360px;
+	overflow-y: scroll;
+}
+.qkq_csnl li{
+	padding: 8px 0px;
+	cursor: pointer;
+}
+.qkq_csnl li:hover{
+	background: rgba(0, 102, 197, 0.2);
+}
+.qkq_csnl li h4{
+	font-size: 16px;
+	color: #fff;
+	line-height: 25px;
+}
+.qkq_csnl li p{
+	font-size: 14px;
+	color: #c4dce8;
+	line-height: 25px;
+	padding-left: 8px;
+}
+.qkq_csnl li h4 span.blue{
+	font-weight: 900;
+	color: #0055ff;
 }
-
 
 /* fwyq */
 .nav_min{

zhsq_qk-ui/src/views/fusion/aqyj.vue

@@ -28,8 +28,8 @@
       <div class="facility_tab facility_tab2">
 
         <div class="qkq_tdzy">
-          <div class="qkq_tit ">应急场所</div>
-          <div class="scrollbar" style="height: 300px;">
+          <div class="qkq_tit ">摄像头</div>
+          <div class="scrollbar" style="height: 660px;">
             <ul id="accordion" class="accordion yjcs">
               <!-- li上加on类名是点击选中后效果 -->
               <li v-for="(item, index) in shelter" :class="{ on: item.id == shelterCurrent }" :key="index"
@@ -40,25 +40,7 @@
           </div>
 
         </div>
-        <div class="qkq_tdzy">
-          <div class="qkq_tit">城市内涝点</div>
-          <div class="scrollbar" style="height: 300px;">
-            <ul id="accordion" class="accordion csnld">
-              <li class="on">
-                <div class="link">易涝隐患区域加快整治。</div>
-              </li>
-              <li>
-                <div class="link">行洪排涝能力不断提升。</div>
-              </li>
-              <li>
-                <div class="link">设施运维管理持续完善。</div>
-              </li>
-              <li>
-                <div class="link">海绵城市建设稳步推进。</div>
-              </li>
-            </ul>
-          </div>
-        </div>
+     
 
       </div>
       <!-- 设备tab结束-->
@@ -74,28 +56,73 @@
       <div class="facility_tab facility_tab2">
 
         <div class="qkq_tdzy">
-          <div class="qkq_tit ">抢险救援队</div>
-          <div class="scrollbar" style="height: 300px;">
-            <ul id="accordion" class="accordion nlsb">
-              <!-- li上加on类名是点击选中后效果 -->
-              <li v-for="(item, index) in team" :class="{ on: item.id == teamCurrent }" :key="index"
-                  @click="onTeamlick(item)">
-                <div class="link">{{ item.dept }}</div>
-              </li>
-            </ul>
-          </div>
-
+          <div class="qkq_tit ">今日安全承诺</div>
+          <div class="qkq_aqcn">
+			  <div id="qkq_aqcn_chart"></div>
+			  <div class="qkq_aqcn_txt">
+				  <p>应承诺数<span>162家</span></p>
+				  <p>已承诺数<span>162家</span></p>
+				  <p>未承诺数<span>0家</span></p>
+			  </div>
+		  </div>
+		<div class="qkq_aqcn_col">
+			<p>
+				<span>高风险</span>
+				<b>0</b>
+			</p>
+			<p>
+				<span>较大风险</span>
+				<b>1</b>
+			</p>
+			<p>
+				<span>一般风险</span>
+				<b>31</b>
+			</p>
+			<p>
+				<span>低风险</span>
+				<b>129</b>
+			</p>
+		</div>
         </div>
         <div class="qkq_tdzy">
-          <div class="qkq_tit">防汛物资</div>
-          <div class="scrollbar" style="height: 300px;">
-            <ul id="accordion" class="accordion yjcssb">
-              <li v-for="(item, index) in supplies" :class="{ on: item.id == suppliesCurrent }" :key="index"
-                  @click="onSuppliesclick(item)">
-                <div class="link">{{ item.dept }}</div>
-              </li>
-            </ul>
-          </div>
+          <div class="qkq_tit">监测预警</div>
+          <ul class="qkq_csnl scrollbar">
+			  <li>
+				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+				  <p>预警事件：内涝点积水</p>
+				  <p>预警时间：2024年8月2日09:51:53</p>
+			  </li>
+			  <li>
+			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+			  				  <p>预警事件：内涝点积水</p>
+			  				  <p>预警时间：2024年8月2日09:51:53</p>
+			  </li>
+			  <li>
+			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+			  				  <p>预警事件：内涝点积水</p>
+			  				  <p>预警时间：2024年8月2日09:51:53</p>
+			  </li>
+			  <li>
+			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+			  				  <p>预警事件：内涝点积水</p>
+			  				  <p>预警时间：2024年8月2日09:51:53</p>
+			  </li>
+			  <li>
+			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+			  				  <p>预警事件：内涝点积水</p>
+			  				  <p>预警时间：2024年8月2日09:51:53</p>
+			  </li>
+			  <li>
+			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+			  				  <p>预警事件：内涝点积水</p>
+			  				  <p>预警时间：2024年8月2日09:51:53</p>
+			  </li>
+			  <li>
+			  				  <h4><span class="blue">【城市内涝点】</span>飞跃路与越野街交汇</h4>
+			  				  <p>预警事件：内涝点积水</p>
+			  				  <p>预警时间：2024年8月2日09:51:53</p>
+			  </li>
+		  </ul>
         </div>
 
       </div>
@@ -210,6 +237,7 @@ export default {
     this.deviceOffline();
     this.cameraList();
     this.regionTop();
+	this.qkq_aqcn_chart();
     // 每秒刷新时间
     setInterval(() => {
       this.getCurrentTime();
@@ -1201,7 +1229,179 @@ export default {
       myChart.setOption(option);
     }
     ,
-
+   qkq_aqcn_chart(){
+	  var myChart = echarts.init(document.getElementById('qkq_aqcn_chart'));
+	 // mock数据
+ const obj = {
+    startAngle: 220,
+    endAngle: -40,
+    pointer: {
+        // 指针
+        show: false,
+    },
+    axisLabel: {
+        // 刻度值
+        show:false,
+    },
+    axisTick: {
+        show:false,
+    },
+};
+var option = {
+    series: [
+        {
+            type: 'gauge',
+            splitNumber: 95,
+            splitLine: {
+                // 分割线
+                distance: -50,
+                length: 20,
+                lineStyle: {
+                    width: 10,
+                    color: '#3ff0a3'
+                }
+            },
+            axisLine: {
+                // 轴线
+                    lineStyle:{
+                       width:4,
+                       color: [[1, '#3300ee11']],
+                   }
+            },
+            itemStyle: {
+                show:false,
+                color: '#FFAB91'
+            },
+            axisLabel: {
+                // 刻度值
+                show:false,
+            },
+            ...obj,
+        },
+        // {
+        //     type: 'gauge',
+        //     startAngle: 220,
+        //     endAngle: -40,
+        //     splitNumber: 45,
+        //     splitLine: {
+        //         length: 30,
+        //         lineStyle: {
+        //             width: 14,
+        //             color: {
+        //               type: 'linear',
+        //                 x: 0,
+        //                 y: 0.25,
+        //                 // r: 0.5,
+        //                 x2: 0,
+        //                 y2: 0,
+        //                 colorStops: [{
+        //                     offset: 0, color: 'gray' // 0% 处的颜色
+        //                 }, {
+        //                     // offset: 1, color: '#52D5F2' // 100% 处的颜色
+        //                     offset: 1, color: 'red' // 100% 处的颜色
+        //                 }],
+        //                 global: false 
+        //             }
+        //         }
+        //     },
+        //     pointer: {
+        //         // 指针
+        //         show: false,
+        //     },
+        //     axisLabel: {
+        //         // 刻度值
+        //         show:false,
+        //     },
+        //     axisTick: {
+        //         show:false,
+        //     },
+        //     axisLine: {
+        //       lineStyle:{
+        //           width:4,
+        //           color: [[1, '#153839']],
+        //       }
+        //     }
+        // },
+        {
+            type:'pie',
+            radius: ['62%', '70%'],
+            startAngle: 220,
+            endAngle: -40,
+            color:['cyan','blue','transparent'],
+            label: {
+                show: false
+            },
+            data:[
+                {value: 120, name: '搜索引擎'},
+                {value: 140, name: '直接访问'},
+                {value: 100, name: '邮件营销'},
+            ],
+        },
+        {
+            type: 'gauge',
+            radius: '58%',
+            startAngle: 220,
+            endAngle: -40,
+            splitNumber: 25,
+            splitLine: {
+                length: 5,
+                lineStyle: {
+                    width: 5,
+                    color: '#4dcbe78f',
+                    type:'dotted',
+                }
+            },
+            pointer: {
+                // 指针
+                show: false,
+            },
+            axisLabel: {
+                // 刻度值
+                show:false,
+            },
+            axisTick: {
+                show:false,
+            },
+            axisLine: {
+               lineStyle:{
+                   width:4,
+                   color:[[1,'#3300ee11']],
+               }
+            },
+            detail: {
+                valueAnimation: true,
+                borderRadius: 8,
+                formatter: function(name) {
+                    return `{a|在线率} \n\n {b|${name}} \n\n %`
+                },
+                rich:{
+                    a: {
+                        color:'#49C3DF',
+                        fontSize: 50,
+                        lineHeight: 20,
+                        padding:[0,0,200,0],
+                    },
+                    b: {
+                        color: '#49C3DF',
+                        height: 40,
+                        fontSize: 130,
+                        padding:[0,0,30,0],
+                        fontWeight: 'bolder',
+                    },
+                }
+            },
+            data: [{
+                // name:'在线率',
+                value: 86
+            }]
+        },
+    ],
+};
+  
+	if(option){
+	myChart.setOption(option);
+	}
+},
     getCurrentTime() {
       const now = new Date();
       const year = now.getFullYear();