syy

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

@@ -273,7 +273,8 @@ input[type="search"]::-webkit-search-decoration {
 }
 
 body {
-  font-family: 'MyWebFont', sans-serif; /* 使用字体，同时提供一个后备字体 */
+  font-family: 'MyWebFont', sans-serif; /* 使用字体，同时提供一个后备字体 */
+  background-color: #141d29;
 }
 /*
 @font-face{
@@ -324,17 +325,17 @@ body {
 	width: 350px;
 	min-height: 85vh;
 }
-.left_con .top_txt{
-	padding-left: 15px;
+.left_con .top_txt,.nav_min .top_txt{
+	padding-left: 50px;
 	padding-bottom: 10px;
 }
-.left_con .top_txt b{
+.left_con .top_txt b,.nav_min .top_txt b{
 	padding-left: 20px;
 	background:url(qkq_dw.png) no-repeat left center;
 	font-size: 16px;
 	color: #fceec9;
 }
-.left_con .top_txt span{
+.left_con .top_txt span,.nav_min .top_txt span{
 	font-size: 14px;
 	color: #fceec9;
 	margin-left: 6px;
@@ -348,18 +349,20 @@ body {
 	width: 350px;
 	min-height: 85vh;
 }
-.right_con .top_txt{
-	padding-left: 50px;
-	padding-bottom: 10px;
+.right_con .top_txt,.nav_min .top_txt2{
+	padding-right: 50px!important;
+	padding-left: 0px!important;
+	padding-bottom: 10px!important;
 }
-.right_con .top_txt b{
+.right_con .top_txt b,.nav_min .top_txt2 b{
 	font-size: 16px;
-	color: #fceec9;
+	color: #fceec9;
+	background: none!important;
 }
-.right_con .top_txt span{
+.right_con .top_txt span,.nav_min .top_txt2 span{
 	font-size: 14px;
 	color: #fceec9;
-	margin-right: 6px;
+	margin-right: 0px;
 }
 .qkq_tit{
 	background: url(qkq_titbg1.png) no-repeat top left;

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

@@ -176,7 +176,7 @@
 /*经济运行*/
 #jjyx{
 	width: 345px;
-	height: 180px;
+	height: 225px;
 	margin-bottom: 15px;
 }
 /*事件信息*/

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

@@ -685,6 +685,22 @@ padding: 0px 10px;
 	    left: 4px;
 	background: url(sprh_16.png) no-repeat center;
 	background-size: 100%;
+}
+.dwtl .zx{
+	height: 4px;
+	width: 4px;
+	background: #45b43c;
+	box-shadow: 0px 0px 5px #45b43c;
+	display: inline-block;
+	margin: 7px 4px 2px 5px;
+}
+.dwtl .lx{
+	height: 4px;
+	width: 4px;
+	background: #ff0000;
+	box-shadow: 0px 0px 5px #ff0000;
+	display: inline-block;
+	margin: 7px 4px 2px 5px;
 }
 
 .zx_on::after{
@@ -715,3 +731,170 @@ padding: 0px 10px;
 }
 
 
+
+/* aqyj */
+.facility_tab2{
+	height: 72vh;
+}
+.yjcs li::after{
+	content: " ";
+	   display: block;
+	   width: 12px;
+	   height: 14px;
+	   position: absolute;
+	   top:13px;
+	   left: 10px;
+	background: url("aqyj_yjcs1.png") no-repeat center;
+	box-shadow: 0px 0px 5px #2da92a;
+}
+.csnld li::after{
+	content: " ";
+	   display: block;
+	   width: 12px;
+	   height: 14px;
+	   position: absolute;
+	   top:13px;
+	   left: 10px;
+	background: url("aqyj_csnld1.png") no-repeat center;
+	box-shadow: 0px 0px 5px #1c82f5;
+}
+.nlsb li::after{
+	content: " ";
+	   display: block;
+	   width: 12px;
+	   height: 14px;
+	   position: absolute;
+	   top:13px;
+	   left: 10px;
+	background: url("aqyj_nlsb1.png") no-repeat center;
+	box-shadow: 0px 0px 5px #1cf2f5;
+}
+.yjcssb li::after{
+	content: " ";
+	   display: block;
+	   width: 12px;
+	   height: 14px;
+	   position: absolute;
+	   top:13px;
+	   left: 10px;
+	background: url("aqyj_yjcssb1.png") no-repeat center;
+	box-shadow: 0px 0px 5px #1cf2f5;
+}
+.ljclzx li::after{
+	content: " ";
+	   display: block;
+	   width: 12px;
+	   height: 14px;
+	   position: absolute;
+	   top:13px;
+	   left: 10px;
+	background: url("aqyj_ljclzx1.png") no-repeat center;
+	box-shadow: 0px 0px 5px #2da92a;
+}
+.ggcs li::after{
+	content: " ";
+	   display: block;
+	   width: 12px;
+	   height: 14px;
+	   position: absolute;
+	   top:13px;
+	   left: 10px;
+	background: url("aqyj_ggcs1.png") no-repeat center;
+	box-shadow: 0px 0px 5px #1cf2f5;
+}
+.cgyyl li::after{
+	content: " ";
+	   display: block;
+	   width: 12px;
+	   height: 14px;
+	   position: absolute;
+	   top:13px;
+	   left: 10px;
+	background: url("aqyj_cgyyl1.png") no-repeat center;
+	box-shadow: 0px 0px 5px #1c82f5;
+}
+.sgqy li::after{
+	content: " ";
+	   display: block;
+	   width: 12px;
+	   height: 14px;
+	   position: absolute;
+	   top:13px;
+	   left: 10px;
+	background: url("aqyj_sgqy1.png") no-repeat center;
+	box-shadow: 0px 0px 5px #c40000;
+}
+.accordion li.on .link{
+	    background: rgb(8 70 125 / 80%);
+}
+.qkq_dx{
+	position: absolute;
+	right: 405px;
+	top:130px;
+	z-index: 9;
+	background-color: rgb(4 75 145 / 75%);
+	padding: 10px;
+	border: 1px solid #295e93;
+	border-radius: 5px;
+}
+.qkq_dx label{
+	display: block;
+	flex-direction: row;
+	justify-content: left;
+	justify-items: center;
+	height: 30px;
+	line-height: 30px;
+	color: #fff;
+	font-size: 14px;
+	cursor: pointer;
+}
+.qkq_dx label input{
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+	background: none;
+	border: 1px solid #0095ff;
+	box-shadow: 0px 0px 3px #0095ff;
+	margin-right: 5px;
+	-webkit-appearance: none; /* 去除默认外观 */
+	  -moz-appearance: none;
+	  appearance: none;
+border-radius: 2px;
+	  outline: none; /* 去除外部轮廓 */
+	  transition: all 0.3s ease; /* 过渡效果 */
+
+}
+
+
+.qkq_dx label input:checked{
+  background: #0fd3ff;
+  border-radius: 2px;
+ 
+}
+
+
+/* fwyq */
+.nav_min{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	position: fixed;
+	top:40px;
+	left: 0px;
+	width: 100%;
+	height: 40px;
+	z-index: 9;
+}
+.qkq_con{
+	position: fixed;
+	left: 20px;
+	top:80px;
+	z-index: 999;
+}
+.con_left_a{
+	width: 400px;
+}
+.con_col{
+	display: flex;
+	flex-direction: row;
+}

zhsq_qk-ui/src/router/index.js

@@ -77,6 +77,14 @@ export const constantRoutes = [
     path: '/yshj',
     component: () => import('@/views/fusion/yshj'),
     hidden: true
+  },{
+    path: '/fwyq',
+    component: () => import('@/views/fusion/fwyq'),
+    hidden: true
+  },{
+    path: '/csgl',
+    component: () => import('@/views/fusion/csgl'),
+    hidden: true
   },
   {
     path: '/weather',

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

@@ -25,41 +25,49 @@
         <span>9~16℃</span>
       </div>
       <!-- 设备tab开始-->
-      <div class="facility_tab">
-        <div class="div_tab">
-          <a class="on">单屏</a>
-          <a>电视墙</a>
-        </div>
-        <div class="clear"></div>
-        <form class="qkq_ss">
-          <input type="text" placeholder="请输入搜索词" class="inp_ss"/>
-          <input type="button" class="inp_btn" value="搜索"/>
-        </form>
-        <div class="tab_cont">
+      <div class="facility_tab facility_tab2">
+      
           <div class="qkq_tdzy">
-            <div class="qkq_tit ">设备列表</div>
-            <div class="selectDate">
-              <span class="_selectData">锦程街道</span>
-              <a class="icon_more" @click="toggleDropdown($event)"><img src="@/assets/images/down.png"/></a>
-              <div class="_moreMenu" v-if="dropdownVisible">
-
-                <ul>
-                  <li class="change">东风街道</li>
-                  <li>锦程街道</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div class="scrollbar" style="height: 510px;">
-            <ul id="accordion" class="accordion">
-              <!-- lx_on 离线      zx_on在线 -->
-              <li v-for="(camera, index) in cameras" :key="index" class="zx_on">
-                <div class="link">{{ camera.cameraName }}</div>
-              </li>
-            </ul>
-          </div>
+            <div class="qkq_tit ">应急场所</div>
+         <div class="scrollbar" style="height: 300px;">
+           <ul id="accordion" class="accordion yjcs">
+             <!-- li上加on类名是点击选中后效果 -->
+            <li class="on">
+              <div class="link">1111111111111111111</div>
+            </li>
+            <li>
+              <div class="link">2222222222222222</div>
+            </li>
+            <li>
+              <div class="link">3333333333333333</div>
+            </li>
+            <li>
+              <div class="link">4444444444444444</div>
+            </li>
+           </ul>
+         </div>
+           
         </div>
-        <div class="tab_cont"></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">1111111111111111111</div>
+		    </li>
+		    <li>
+		      <div class="link">2222222222222222</div>
+		    </li>
+		    <li>
+		      <div class="link">3333333333333333</div>
+		    </li>
+		    <li>
+		      <div class="link">4444444444444444</div>
+		    </li>
+		   </ul>
+		 </div>
+		  </div>         
+	
       </div>
       <!-- 设备tab结束-->
     </div>
@@ -71,67 +79,67 @@
         <!--        <span>星期六</span>-->
         <!--        <b>11:16:58</b>-->
       </div>
-      <!-- 资源分布-->
-      <div class="qkq_tdzy">
-        <div class="qkq_tit ">资源分布</div>
-        <div class="selectDate">
-          <span class="_selectData">锦程街道</span>
-          <a class="icon_more" @click="toggleDropdown($event)"><img src="@/assets/images/down.png"/></a>
-          <div class="_moreMenu" v-if="dropdownVisible">
-            <ul>
-              <li class="change">东风街道</li>
-              <li>锦程街道</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div id="sprh-zyfb" style="margin:-5px auto 10px auto; width: 350px; height:150px;"></div>
-      <!-- 资源分布-->
-      <div class="qkq_tdzy">
-        <div class="qkq_tit" style="margin-top: -35px">设备实时在线情况</div>
-      </div>
-      <div class="sbzs">
-        <p>设备总数：</p>
-        <span>1</span>
-        <span>6</span>
-        <span>4</span>
-        <span>0</span>
-        <p>个</p>
-      </div>
-      <div class="sb_cont">
-        <div class="sb_in">
-          <div id="sprh-zxfb" style="width:130px; height:140px;margin: 0 auto;"></div>
-          <span class="zxsb">在线设备</span>
-          <h2 class="zxsb_sl">1234<i>个</i></h2>
-        </div>
-        <div class="sb_in">
-          <div id="sprh-lxfb" style="width:130px; height:140px;margin: 0 auto;"></div>
-          <span class="lxsb">离线设备</span>
-          <h2 class="lxsb_sl">234<i>个</i></h2>
-        </div>
-      </div>
-      <div class="qkq_bmfw">
-        <div class="qkq_tit ">摄像头统计</div>
-        <div id="jczl-bmfw" style="margin: 20px auto 0px auto; width: 350px; height: 160px"></div>
-		<div class="sb_cont sb_cont_sxt">
-		  <div class="sb_in">
-			   <span class="lxsb">小区内部</span>
-		    <h2 class="zxsb_sl">1234<i>个</i></h2>
-		  </div>
-		  <div class="sb_in">
-		    <span class="lxsb">街道路面</span>
-		    <h2 class="lxsb_sl">234<i>个</i></h2>
-		  </div>
-		</div>
+    <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 class="on">
+             <div class="link">1111111111111111111</div>
+           </li>
+		   <li>
+		     <div class="link">2222222222222222</div>
+		   </li>
+		   <li>
+		     <div class="link">3333333333333333</div>
+		   </li>
+		   <li>
+		     <div class="link">4444444444444444</div>
+		   </li>
+         </ul>
+       </div>
+         
       </div>
+    		  <div class="qkq_tdzy">
+    		    <div class="qkq_tit">应急场所设备</div>
+    		 <div class="scrollbar" style="height: 300px;">
+    		   <ul id="accordion" class="accordion yjcssb">
+    		    <li class="on">
+    		      <div class="link">1111111111111111111</div>
+    		    </li>
+    		    <li>
+    		      <div class="link">2222222222222222</div>
+    		    </li>
+    		    <li>
+    		      <div class="link">3333333333333333</div>
+    		    </li>
+    		    <li>
+    		      <div class="link">4444444444444444</div>
+    		    </li>
+    		   </ul>
+    		 </div>
+    		  </div>         
+    	
+    </div>
+    
     </div>
     <!--右侧结束-->
-    <!-- 点位图例 开始 -->
+	<!-- 多选按钮  开始 -->
+	<form class="qkq_dx">
+	  <label><input type="checkbox"/>应急场所</label>
+	  <label><input type="checkbox"/>内涝点</label>
+	  <label><input type="checkbox"/>摄像头</label>
+	</form>
+	<!-- 多选按钮  结束 -->
+	
+    <!-- 点位图例 开始 
     <div class="dwtl">
       <p><span class="xqnb"></span>街道路面(在线50个/离线10个)</p>
       <p><span class="jdlm"></span>小区内部(在线50个/离线10个)</p>
     </div>
-    <!-- 点位图例 结束 -->
+     点位图例 结束 -->
     <!--底部开始-->
     <div class="footer">
       <div class="nav-bottom">

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

@@ -29,6 +29,12 @@ export default {
     },{
       path:'/aqyj1',
       redirect:'/aqyj'
+    },{
+      path:'/fwyq1',
+      redirect:'/fwyq'
+    },{
+      path:'/csgl1',
+      redirect:'/csgl'
     }];
     let redirect = '';
     for (let i = 0; i < paths.length; i++) {

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

@@ -129,8 +129,8 @@
     <!--右侧结束-->
     <!-- 点位图例 开始 -->
     <div class="dwtl">
-      <p><span class="xqnb"></span>街道路面(离线10/在线20)</p>
-      <p><span class="jdlm"></span>小区内部(离线10/在线20)</p>
+      <p><span class="xqnb"></span>街道路面(<i class="zx"></i>50个/<i class="lx"></i>10个)</p>
+      <p><span class="jdlm"></span>小区内部(<i class="zx"></i>50个/<i class="lx"></i>10个)</p>
     </div>
     <!-- 点位图例 结束 -->
     <!--底部开始-->

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

@@ -128,8 +128,8 @@
     <!--右侧结束-->
     <!-- 点位图例 开始 -->
     <div class="dwtl">
-      <p><span class="xqnb"></span>街道路面(在线50个/离线10个)</p>
-      <p><span class="jdlm"></span>小区内部(在线50个/离线10个)</p>
+      <p><span class="xqnb"></span>街道路面(<i class="zx"></i>50个/<i class="lx"></i>10个)</p>
+      <p><span class="jdlm"></span>小区内部(<i class="zx"></i>50个/<i class="lx"></i>10个)</p>
     </div>
     <!-- 点位图例 结束 -->
     <!--底部开始-->