4.29版本：添加井盖和烟感监控

equipment.html

@@ -61,10 +61,10 @@
     <section class="s3">
       <div class="s-title">
         <h2>设备列表</h2>
-        <span class="tag">丰乐社区</span>
+        <span class="tag">万达广场</span>
       </div>
       <div class="s3-select">
-        <div>烟雾探测器</div>
+        <div>烟感探测器</div>
         <div>
           <select value="0" name="全部" id="select">
               <option value="0">全部</option>
@@ -80,8 +80,6 @@
           <div class="t-header">
             <span>更新时间</span>
             <span>状态</span>
-            <span>温度</span>
-            <span>电量</span>
             <span>详情</span>
           </div>
           <div class="t-main">
@@ -108,12 +106,31 @@
     <script src="https://webapi.amap.com/maps?v=1.4.10&key=e661b00bdf2c44cccf71ef6070ef41b8"></script>
     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=e661b00bdf2c44cccf71ef6070ef41b8"></script>
     <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
+    <script src="js/stomp.min.js"></script>
+    <script src="js/sockjs.min.js"></script>
 
     <script>
       let equipment = [{
         time:"19.03.27 21.23.27",
+        status:'报警',
+        temperature:"137℃",
+        quantity:'88%',
+        id:3,
+        detail:{
+          name:"AGE67ioj-49",
+          lanlat:[113.0842709541, 22.5944937320],
+          xinghao:"AllRange1",
+          status:"报警",
+          color:'#fe2a2a',
+          update:"1分钟前",
+          xinhao:"137℃",
+          quantity:'88%',
+          position:"万达广场T3三层A区域0145商铺"
+        }
+      },{
+        time:"19.03.27 21.23.27",
         status:'正常',
-        temperature:"15℃",
+        temperature:"26℃",
         quantity:'99%',
         id:0,
         detail:{
@@ -121,61 +138,63 @@
           lanlat:[113.0842709541, 22.5944937320],
           xinghao:"AllRange1",
           status:"正常",
+          color:'#04cd0d',
           update:"1分钟前",
-          xinhao:"强",
+          xinhao:"26℃",
           quantity:'99%',
-          position:"丰乐社区沂水街南段东城街路口"
+          position:"万达广场T3三层A区域0145商铺"
         }
       },{
         time:"19.03.27 21.23.27",
         status:'低压',
         temperature:"15℃",
-        quantity:'99%',
+        quantity:'18%',
         id:1,
         detail:{
           name:"AGE67ioj-49",
           lanlat:[113.0842709541, 22.5944937320],
           xinghao:"AllRange1",
+          color:'#fdca3a',
           status:"低压",
           update:"1分钟前",
-          xinhao:"强",
-          quantity:'99%',
-          position:"丰乐社区沂水街南段东城街路口"
+          xinhao:"15℃",
+          quantity:'18%',
+          position:"万达广场T3三层A区域0145商铺"
         }
       },{
         time:"19.03.27 21.23.27",
         status:'故障',
-        temperature:"15℃",
-        quantity:'99%',
+        temperature:"23℃",
+        quantity:'68%',
         id:2,
         detail:{
           name:"AGE67ioj-49",
           lanlat:[113.0842709541, 22.5944937320],
           xinghao:"AllRange1",
           status:"故障",
+          color:'#479eff',
           update:"1分钟前",
-          xinhao:"强",
-          quantity:'99%',
-          position:"丰乐社区沂水街南段东城街路口"
-        }
-      },{
-        time:"19.03.27 21.23.27",
-        status:'报警',
-        temperature:"15℃",
-        quantity:'99%',
-        id:3,
-        detail:{
-          name:"AGE67ioj-49",
-          lanlat:[113.0842709541, 22.5944937320],
-          xinghao:"AllRange1",
-          status:"报警",
-          update:"1分钟前",
-          xinhao:"强",
-          quantity:'99%',
-          position:"丰乐社区沂水街南段东城街路口"
+          xinhao:"23℃",
+          quantity:'68%',
+          position:"万达广场T3三层A区域0145商铺"
         }
       }];
 
+      let fixStatus={
+        0:'正常',
+        1:'报警',
+        2:'低压',
+        3:'故障',
+      }
+
+      let fixColor={
+        0:'#04cd0d',
+        1:'#fe2a2a',
+        2:'#fdca3a',
+        3:'#479eff',
+      }
+      console.log(fixStatus[111]);
+
       (function() {
         let c1 = "#fe2a2a";
         let c2 = "#04cd0d";
@@ -354,7 +373,7 @@
           ]
         };
 
-       let option = {
+        let option = {
             title: {
               textStyle:{
                 color:'#fff'
@@ -435,115 +454,173 @@
         con3Chart.setOption(con3);
         con4Chart.setOption(con4);
         var map = new AMap.Map('map', {
-              resizeEnable: true,
-              zoom:14,
-              center: [113.0842709541, 22.5944937320]
-      });
-    })();
-
-      let htmlTemp = ""
- 
-      equipment.forEach((item,idx)=>{
-        htmlTemp+=`<div class="t-body ${idx===0?'active':''}" data-detail="${item.id}">
-            <span>${item.time}</span>
-            <span>${item.status}</span>
-            <span>${item.temperature}</span>
-            <span>${item.quantity}</span>
-            <span>...</span>
-          </div>`
-      })
-
-      let firstItem = equipment[0].detail
-      
-      let htmlItem = getItemHtml(firstItem)
-        
-      $('.s4-right').html(htmlItem)
-
-      $('.t-main').html(htmlTemp)
-
-      $("#select").change(function(e){
-        htmlTemp = ""
-        let val = $("#select").find("option:selected").text();
-        console.log(val);
-        if (val!=="全部") {
-          equipment.forEach(item=>{
-            if (item.status === val) {
-              htmlTemp+=`<div class="t-body" data-detail="${item.id}">
-                <span>${item.time}</span>
-                <span>${item.status}</span>
-                <span>${item.temperature}</span>
-                <span>${item.quantity}</span>
-                <span>...</span>
-              </div>`
-            }
-          })
-        }
-        else{
-            equipment.forEach(item=>{
-            htmlTemp+=`<div class="t-body" data-detail="${item.id}">
-                  <span>${item.time}</span>
-                  <span>${item.status}</span>
-                  <span>${item.temperature}</span>
-                  <span>${item.quantity}</span>
-                  <span>...</span>
-                </div>`
-          })
-        }
-        $('.t-main').html(htmlTemp)
-      });
+                resizeEnable: true,
+                zoom:14,
+                center: [113.0842709541, 22.5944937320]
+        });
 
-      $('.t-main').on("click",".t-body",function (e) {
-        let that = $(this)
-        let id = that.data('detail')
-        $('.t-main .t-body').removeClass('active')
-        that.addClass('active')
-        equipment.forEach(item=>{
-          if (item.id === id) {
-            let html = getItemHtml(item.detail)
-            $('.s4-right').html(html)
-          }
-        })
-      })
+        let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
+            Array.from(document.querySelectorAll(".s2 .card"))
+        );
+        arr.forEach((dom, index) => {
+          dom.addEventListener("click", e => {
+            console.log("equipmentClickHandle", index);
+            window.equipmentClickHandle && window.equipmentClickHandle(index);
+          });
+        });
+    })();
 
+     
 
       function getItemHtml(item) {
         return `<div class="s4-item">
-            <div class="s4i-l">设备型号</div>
-            <div class="s4i-r">${item.xinghao}</div>
-          </div>
-          <div class="s4-item">
             <div class="s4i-l">设备状态</div>
-            <div class="s4i-r" style="color:#fe2a2a;">${item.status}</div>
+            <div class="s4i-r" style="color:${item.color};">${item.status}</div>
           </div>
           <div class="s4-item">
             <div class="s4i-l">更新时间</div>
             <div class="s4i-r">${item.update}</div>
           </div>
           <div class="s4-item">
-            <div class="s4i-l">信号强度</div>
-            <div class="s4i-r">${item.xinhao}</div>
-          </div>
-          <div class="s4-item">
-            <div class="s4i-l">设备电量</div>
-            <div class="s4i-r">${item.quantity}</div>
-          </div>
-          <div class="s4-item">
             <div class="s4i-l">设备位置</div>
             <div class="s4i-r">${item.position}</div>
           </div>`
+      }
+
+      let arr = []
+      function getDeviceList(fn) {
+        $.ajax({
+          url: "http://139.159.231.141:8182/api/device/list",
+          type: "get",
+          success: function(data) {
+            let callback = JSON.parse(data)
+            fn(callback)
+          }
+        });
+      }
+
+      getDeviceList(function (data) {
+        arr = data.data.filter(item=>item.deviceType === "YG")
+        update(arr)
+      })
+
+      function update(arr) {
+        arr = arr.map(item=>{
+          let status = fixStatus[item.status]
+          let color = fixColor[item.status]
+          console.log(status);
+          return {
+            time:item.updateTime,
+            status:item.status,
+            id:item.id,
+            detail:{
+              name:item.deviceId,
+              lanlat:[item.longitude, item.latitude],
+              color:color,
+              status:status,
+              update:item.updateTime,
+              position:item.address
+            }
+          }
+        })
+        let htmlTemp = ""
+        arr.forEach((item,idx)=>{
+          htmlTemp+=`<div class="t-body ${idx===0?'active':''}" data-detail="${item.id}">
+              <span>${item.time}</span>
+              <span>${fixStatus[item.status]}</span>
+              <span>...</span>
+            </div>`
+        })
+
+        let firstItem = arr[0].detail
+        
+        let htmlItem = getItemHtml(firstItem)
+          
+        $('.s4-right').html(htmlItem)
+
+        $('.t-main').html(htmlTemp)
+
+        $("#select").unbind('change').change(function(e){
+          htmlTemp = ""
+          let val = $("#select").find("option:selected").text();
+          console.log(val);
+          if (val!=="全部") {
+            arr.forEach(item=>{
+              if (fixStatus[item.status] === val) {
+                htmlTemp+=`<div class="t-body" data-detail="${item.id}">
+                  <span>${item.time}</span>
+                  <span>${fixStatus[item.status]}</span>
+                  <span>...</span>
+                </div>`
+              }
+            })
+          }
+          else{
+            arr.forEach(item=>{
+              htmlTemp+=`<div class="t-body" data-detail="${item.id}">
+                    <span>${item.time}</span>
+                    <span>${fixStatus[item.status]}</span>
+                    <span>...</span>
+                  </div>`
+            })
+          }
+          $('.t-main').html(htmlTemp)
+      });
+    
+        $('.t-main').unbind('click').on("click",".t-body",function (e) {
+            let that = $(this)
+            let id = that.data('detail')
+            $('.t-main .t-body').removeClass('active')
+            that.addClass('active')
+            arr.forEach(item=>{
+              if (item.id === id) {
+                let html = getItemHtml(item.detail)
+                $('.s4-right').html(html)
+              }
+            })
+          })
         
       }
 
+      // 建立连接对象（还未发起连接）
+      if (socket) {
+          socket = null
+        }
+      var socket = new SockJS("http://139.159.231.141:8182/webSocketServer");
 
-      let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
-        Array.from(document.querySelectorAll(".s2 .card"))
+      // 获取 STOMP 子协议的客户端对象
+      var stompClient = Stomp.over(socket);
+
+      // 向服务器发起websocket连接并发送CONNECT帧
+      stompClient.connect(
+        {},
+        function connectCallback(frame) {
+          
+          subscribe1()
+          console.log('连接成功');
+
+        },
+        function errorCallBack(error) {
+         
+        }
       );
-      arr.forEach((dom, index) => {
-        dom.addEventListener("click", e => {
-          console.log("equipmentClickHandle", index);
-          window.equipmentClickHandle && window.equipmentClickHandle(index);
+
+      //订阅消息
+      function subscribe1() {
+        stompClient.subscribe("/topic/device", function(response) {
+          // setMessageInnerHTML("已成功订阅/topic/device");
+          var returnData = JSON.parse(response.body);
+          let {id} = returnData
+          arr = arr.map(item=> {
+            if (item.id === id) {
+              item.status = 1
+            }
+            return item
+          })
+          update(arr)
         });
-      });
+      }
+        
     </script>
   </body>
 </html>

images/icon-hj.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 839.1 839.1" style="enable-background:new 0 0 839.1 839.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#3BBBDA;}
+	.st1{clip-path:url(#SVGID_2_);fill:#3BBBDA;}
+	.st2{clip-path:url(#SVGID_4_);fill:#3BBBDA;}
+</style>
+<g>
+	<g>
+		<defs>
+			<rect id="SVGID_1_" x="59.5" y="9.2" width="720" height="820.7"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<path class="st1" d="M393.1,106.7c20.3,83.9,68.7,140.4,107.1,188.9l5.1,5.1l58.6,71.6l31.1-83.9c5.1-18.1,12.3-36.2,17.4-56.4
+			c79.6,81.8,135.3,201.9,97.7,347.4c-13,48.5-41.3,94.1-76.7,119.4c-38.4,33.3-104.9,71.6-209.9,71.6
+			c-135.3,0-206.2-63.7-239.5-102c-10.1-10.1-18.1-20.3-23.2-30.4c-50.7-86.8-58.6-176.6-20.3-252.6c12.3,12.3,25.3,25.3,38.4,35.5
+			c7.2,8,15.2,13,20.3,18.1l110,112.2l-21-155.6C262.8,267.3,326.5,170.3,393.1,106.7L393.1,106.7z M434.4,9.7
+			c-125.2,83.9-227.2,222.2-204.8,393c-27.5-28.2-78.9-60.8-94.1-112.2c-84.7,97-107.1,237.4-23.2,375.6c8,12.3,18.1,27.5,30.4,40.5
+			c36.2,43.4,123,122.3,280.8,122.3c120.1,0,196.8-45.6,245.3-83.9c48.5-35.5,81.8-97,97-148.4C817.2,402.6,717.3,234,582,142.1
+			c0,46.3-20.3,102.8-30.4,133.2C493,206.5,434.4,137.1,434.4,9.7L434.4,9.7z M434.4,9.7"/>
+	</g>
+</g>
+</svg>

images/icon-jg.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 839.1 839.1" style="enable-background:new 0 0 839.1 839.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#3BBBDA;}
+	.st1{clip-path:url(#SVGID_2_);fill:#3BBBDA;}
+	.st2{clip-path:url(#SVGID_4_);fill:#3BBBDA;}
+</style>
+<g>
+	<g>
+		<defs>
+			<rect id="SVGID_3_" x="9.7" y="9.2" width="819.8" height="820.7"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<path class="st1" d="M206.8,458.2l-1.3-8.8h-69.1L139,462c18.8,116.8,114.3,212.3,231.2,231.2l12.6,2.5v-65.3l-8.8-1.3
+			C286,611.5,220.6,544.9,206.8,458.2L206.8,458.2z M208.1,380.3c16.3-85.4,81.7-152,165.8-169.6l8.8-1.3v-65.3l-12.6,2.5
+			C253.3,165.5,157.8,261,139,377.8l-2.5,12.6h69.1L208.1,380.3z M627.7,379.1l1.3,8.8h69.1l-2.5-12.6
+			C676.7,258.5,581.2,163,464.4,144.1l-12.6-2.5v69.1l8.8,1.3C547.3,230.8,612.6,296.2,627.7,379.1L627.7,379.1z M566.2,424.3v-10.1
+			c-5-77.9-66.6-138.2-144.5-138.2c-40.2,0-76.6,15.1-105.5,44c-27.6,27.6-44,66.6-44,105.5c0,80.4,66.6,145.7,149.5,145.7
+			C500.8,568.8,566.2,504.7,566.2,424.3L566.2,424.3z M419.1,502.2c-45.2,0-80.4-35.2-80.4-80.4c0-45.2,35.2-80.4,80.4-80.4
+			c45.2,0,80.4,35.2,80.4,80.4C499.6,467,464.4,502.2,419.1,502.2L419.1,502.2z M631.5,458.2c-17.6,82.9-82.9,149.5-167.1,170.9
+			l-7.5,2.5v64.1l12.6-2.5C586.3,674.3,681.7,578.9,700.6,462l2.5-12.6H634L631.5,458.2z M631.5,458.2"/>
+		<path class="st1" d="M419.1,9.7C193,9.7,9.5,193.1,9.5,419.3c0,226.2,183.4,409.6,409.6,409.6c226.2,0,409.6-183.4,409.6-409.6
+			C828.7,193.1,645.3,9.7,419.1,9.7L419.1,9.7z M72.4,419.3v-2.5V419.3z M448,764.8v-32.7c0-15.1-12.6-27.6-27.6-27.6
+			c-15.1,0-27.6,12.6-27.6,27.6v32.7C223.1,751,87.4,616.6,73.6,446.9h33.9c15.1,0,27.6-12.6,27.6-27.6c0-15.1-12.6-27.6-27.6-27.6
+			H73.6C87.4,222,221.9,86.3,391.5,73.8v32.7c0,15.1,12.6,27.6,27.6,27.6c15.1,0,27.6-12.6,27.6-27.6V73.8
+			c169.6,13.8,304.1,149.5,317.9,317.9h-31.4c-15.1,0-27.6,12.6-27.6,27.6c0,15.1,12.6,27.6,27.6,27.6h31.4
+			C750.8,615.3,616.4,751,448,764.8L448,764.8z M448,764.8"/>
+	</g>
+</g>
+</svg>

images/icon-jk.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 839.1 839.1" style="enable-background:new 0 0 839.1 839.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#3BBBDA;}
+	.st1{clip-path:url(#SVGID_2_);fill:#3BBBDA;}
+	.st2{clip-path:url(#SVGID_4_);fill:#3BBBDA;}
+</style>
+<g>
+	<path class="st0" d="M802.6,462.9l-453-453L61.5,298.1l453,453l85.6-85.6l58.2,58.2l116.4-116.4l-58.2-58.2L802.6,462.9z
+		 M226.2,298.1l123.4-123.4l288.2,288.2L514.4,586.3L226.2,298.1z M140.1,596.2H94.6V392.5H36.4v436.7h58.2V712.7h129.3l9.3-208.4
+		l-85.6-85.6L140.1,596.2z M140.1,596.2"/>
+	<path class="st0" d="M327.5,246.9c0,16.1,13,29.1,29.1,29.1c16.1,0,29.1-13,29.1-29.1c0-10.4-5.6-20-14.6-25.2
+		c-9-5.2-20.1-5.2-29.1,0C333.1,226.9,327.5,236.5,327.5,246.9L327.5,246.9z M327.5,246.9"/>
+</g>
+</svg>

manhole.html

@@ -15,7 +15,7 @@
     <section class="s1">
       <div class="s-title">
         <h2>设备概况</h2>
-        <span class="tag">万达广场</span>
+        <span class="tag">丰乐社区</span>
       </div>
       <div class="s1-title">总计设备数量 <span>200台</span></div>
       <div class="e-con">
@@ -42,16 +42,16 @@
     <section class="s2">
       <div class="s-title">
         <h2>设备趋势</h2>
-        <span class="tag">万达广场</span>
+        <span class="tag">丰乐社区</span>
       </div>
       <div class="s2-con">
         <div class="s2-left">
           <div class="sl-title">设备报警时间</div>
           <div class="sl-sub" style="color:#fe2a2a">1分钟前</div>
           <div class="sl-title">区域负责人值班电话</div>
-          <div class="sl-sub">1341779846</div>
-          <div class="sl-title">蓬江区消防大队值班电话</div>
-          <div class="sl-sub">0750-8699139</div>
+          <div class="sl-sub">13417787373</div>
+          <div class="sl-title">丰乐社区消防大队值班电话</div>
+          <div class="sl-sub">0750-8555199</div>
         </div>
         <div class="s2-right" id="s2-e"</div>
       </div>
@@ -64,7 +64,7 @@
         <span class="tag">丰乐社区</span>
       </div>
       <div class="s3-select">
-        <div>烟雾探测器</div>
+        <div>井盖传感器</div>
         <div>
           <select value="0" name="全部" id="select">
               <option value="0">全部</option>
@@ -80,7 +80,7 @@
           <div class="t-header">
             <span>更新时间</span>
             <span>状态</span>
-            <span>温度</span>
+            <span>信号强度</span>
             <span>电量</span>
             <span>详情</span>
           </div>
@@ -94,7 +94,7 @@
     <section class="s4">
       <div class="s-title">
         <h2>设备详情</h2>
-        <span class="tag">AGE67ioj-49</span>
+        <span class="tag">AGE86ioj-35</span>
       </div>
       <div class="s4-con">
         <div class="s4-left" id="map"></div>
@@ -112,15 +112,16 @@
     <script>
       let equipment = [{
         time:"19.03.27 21.23.27",
-        status:'正常',
-        temperature:"15℃",
+        status:'掀翻',
+        temperature:"强",
         quantity:'99%',
-        id:0,
+        id:1,
         detail:{
           name:"AGE67ioj-49",
           lanlat:[113.0842709541, 22.5944937320],
           xinghao:"AllRange1",
-          status:"正常",
+          status:"掀翻",
+          color:'#fe2a2a',
           update:"1分钟前",
           xinhao:"强",
           quantity:'99%',
@@ -128,15 +129,16 @@
         }
       },{
         time:"19.03.27 21.23.27",
-        status:'掀翻',
-        temperature:"15℃",
+        status:'抬起',
+        temperature:"强",
         quantity:'99%',
-        id:1,
+        id:2,
         detail:{
           name:"AGE67ioj-49",
           lanlat:[113.0842709541, 22.5944937320],
           xinghao:"AllRange1",
-          status:"掀翻",
+          status:"抬起",
+          color:'#04cd0d',
           update:"1分钟前",
           xinhao:"强",
           quantity:'99%',
@@ -144,15 +146,16 @@
         }
       },{
         time:"19.03.27 21.23.27",
-        status:'抬起',
-        temperature:"15℃",
+        status:'水浸',
+        temperature:"强",
         quantity:'99%',
-        id:2,
+        id:3,
         detail:{
           name:"AGE67ioj-49",
           lanlat:[113.0842709541, 22.5944937320],
           xinghao:"AllRange1",
-          status:"抬起",
+          status:"水浸",
+          color:'#fdca3a',
           update:"1分钟前",
           xinhao:"强",
           quantity:'99%',
@@ -160,21 +163,36 @@
         }
       },{
         time:"19.03.27 21.23.27",
-        status:'水浸',
-        temperature:"15℃",
+        status:'正常',
+        temperature:"弱",
         quantity:'99%',
-        id:3,
+        id:0,
         detail:{
           name:"AGE67ioj-49",
           lanlat:[113.0842709541, 22.5944937320],
           xinghao:"AllRange1",
-          status:"水浸",
+          color:'#479eff',
+          status:"正常",
           update:"1分钟前",
-          xinhao:"强",
+          xinhao:"弱",
           quantity:'99%',
           position:"丰乐社区沂水街南段东城街路口"
         }
       }];
+      let fixStatus={
+        0:'正常',
+        1:'掀翻',
+        2:'水浸',
+        3:'抬起',
+      }
+
+      let fixColor={
+        0:'#479eff',
+        1:'#fe2a2a',
+        2:'#fdca3a',
+        3:'#04cd0d',
+      }
+      console.log(fixStatus[111]);
 
       (function() {
         let c1 = "#fe2a2a";
@@ -354,7 +372,7 @@
           ]
         };
 
-       let option = {
+        let option = {
             title: {
               textStyle:{
                 color:'#fff'
@@ -435,115 +453,192 @@
         con3Chart.setOption(con3);
         con4Chart.setOption(con4);
         var map = new AMap.Map('map', {
-              resizeEnable: true,
-              zoom:14,
-              center: [113.0842709541, 22.5944937320]
-      });
-    })();
-
-      let htmlTemp = ""
- 
-      equipment.forEach((item,idx)=>{
-        htmlTemp+=`<div class="t-body ${idx===0?'active':''}" data-detail="${item.id}">
-            <span>${item.time}</span>
-            <span>${item.status}</span>
-            <span>${item.temperature}</span>
-            <span>${item.quantity}</span>
-            <span>...</span>
-          </div>`
-      })
-
-      let firstItem = equipment[0].detail
-      
-      let htmlItem = getItemHtml(firstItem)
-        
-      $('.s4-right').html(htmlItem)
-
-      $('.t-main').html(htmlTemp)
-
-      $("#select").change(function(e){
-        htmlTemp = ""
-        let val = $("#select").find("option:selected").text();
-        console.log(val);
-        if (val!=="全部") {
-          equipment.forEach(item=>{
-            if (item.status === val) {
-              htmlTemp+=`<div class="t-body" data-detail="${item.id}">
-                <span>${item.time}</span>
-                <span>${item.status}</span>
-                <span>${item.temperature}</span>
-                <span>${item.quantity}</span>
-                <span>...</span>
-              </div>`
-            }
-          })
-        }
-        else{
-            equipment.forEach(item=>{
-            htmlTemp+=`<div class="t-body" data-detail="${item.id}">
-                  <span>${item.time}</span>
-                  <span>${item.status}</span>
-                  <span>${item.temperature}</span>
-                  <span>${item.quantity}</span>
-                  <span>...</span>
-                </div>`
-          })
-        }
-        $('.t-main').html(htmlTemp)
-      });
+                resizeEnable: true,
+                zoom:14,
+                center: [113.0842709541, 22.5944937320]
+        });
 
-      $('.t-main').on("click",".t-body",function (e) {
-        let that = $(this)
-        let id = that.data('detail')
-        $('.t-main .t-body').removeClass('active')
-        that.addClass('active')
-        equipment.forEach(item=>{
-          if (item.id === id) {
-            let html = getItemHtml(item.detail)
-            $('.s4-right').html(html)
-          }
-        })
-      })
+        let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
+            Array.from(document.querySelectorAll(".s2 .card"))
+        );
+        arr.forEach((dom, index) => {
+          dom.addEventListener("click", e => {
+            console.log("equipmentClickHandle", index);
+            window.equipmentClickHandle && window.equipmentClickHandle(index);
+          });
+        });
+    })();
 
+     
 
       function getItemHtml(item) {
         return `<div class="s4-item">
-            <div class="s4i-l">设备型号</div>
-            <div class="s4i-r">${item.xinghao}</div>
-          </div>
-          <div class="s4-item">
             <div class="s4i-l">设备状态</div>
-            <div class="s4i-r" style="color:#fe2a2a;">${item.status}</div>
+            <div class="s4i-r" style="color:${item.color};">${item.status}</div>
           </div>
           <div class="s4-item">
             <div class="s4i-l">更新时间</div>
             <div class="s4i-r">${item.update}</div>
           </div>
           <div class="s4-item">
-            <div class="s4i-l">信号强度</div>
-            <div class="s4i-r">${item.xinhao}</div>
-          </div>
-          <div class="s4-item">
-            <div class="s4i-l">设备电量</div>
-            <div class="s4i-r">${item.quantity}</div>
-          </div>
-          <div class="s4-item">
             <div class="s4i-l">设备位置</div>
             <div class="s4i-r">${item.position}</div>
           </div>`
+      }
+
+      let arr = []
+      function getDeviceList(fn) {
+        $.ajax({
+          url: "http://139.159.231.141:8182/api/device/list",
+          type: "get",
+          success: function(data) {
+            let callback = JSON.parse(data)
+            fn(callback)
+          }
+        });
+      }
+
+      getDeviceList(function (data) {
+        arr = data.data.filter(item=>item.deviceType === "JG")
+        update(arr)
+      })
+
+      function update(arr) {
+        arr = arr.map(item=>{
+          let status = fixStatus[item.status]
+          let color = fixColor[item.status]
+          console.log(status);
+          return {
+            time:item.updateTime,
+            status:item.status,
+            id:item.id,
+            detail:{
+              name:item.deviceId,
+              lanlat:[item.longitude, item.latitude],
+              color:color,
+              status:status,
+              update:item.updateTime,
+              position:item.address
+            }
+          }
+        })
+        let htmlTemp = ""
+        arr.forEach((item,idx)=>{
+          htmlTemp+=`<div class="t-body ${idx===0?'active':''}" data-detail="${item.id}">
+              <span>${item.time}</span>
+              <span>${fixStatus[item.status]}</span>
+              <span>强</span>
+              <span>66%</span>
+              <span>...</span>
+            </div>`
+        })
+
+        let firstItem = arr[0].detail
+        
+        let htmlItem = getItemHtml(firstItem)
+          
+        $('.s4-right').html(htmlItem)
+
+        $('.t-main').html(htmlTemp)
+
+        $("#select").unbind('change').change(function(e){
+          htmlTemp = ""
+          let val = $("#select").find("option:selected").text();
+          console.log(val);
+          if (val!=="全部") {
+            arr.forEach(item=>{
+              if (fixStatus[item.status] === val) {
+                htmlTemp+=`<div class="t-body" data-detail="${item.id}">
+                  <span>${item.time}</span>
+                  <span>${fixStatus[item.status]}</span>
+                  <span>强</span>
+                  <span>66%</span>
+                  <span>...</span>
+                </div>`
+              }
+            })
+          }
+          else{
+            arr.forEach(item=>{
+              htmlTemp+=`<div class="t-body" data-detail="${item.id}">
+                    <span>${item.time}</span>
+                    <span>${fixStatus[item.status]}</span>
+                    <span>强</span>
+                    <span>66%</span>
+                    <span>...</span>
+                  </div>`
+            })
+          }
+          $('.t-main').html(htmlTemp)
+      });
+    
+        $('.t-main').unbind('click').on("click",".t-body",function (e) {
+            let that = $(this)
+            let id = that.data('detail')
+            $('.t-main .t-body').removeClass('active')
+            that.addClass('active')
+            arr.forEach(item=>{
+              if (item.id === id) {
+                let html = getItemHtml(item.detail)
+                $('.s4-right').html(html)
+              }
+            })
+          })
         
       }
 
+      // 建立连接对象（还未发起连接）
+      if (socket) {
+          socket = null
+        }
+      var socket = new SockJS("http://139.159.231.141:8182/webSocketServer");
+
+      // 获取 STOMP 子协议的客户端对象
+      var stompClient = Stomp.over(socket);
 
-      let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
-        Array.from(document.querySelectorAll(".s2 .card"))
+      // 向服务器发起websocket连接并发送CONNECT帧
+      stompClient.connect(
+        {},
+        function connectCallback(frame) {
+          
+          subscribe1()
+          console.log('连接成功');
+
+        },
+        function errorCallBack(error) {
+         
+        }
       );
-      arr.forEach((dom, index) => {
-        dom.addEventListener("click", e => {
-          console.log("equipmentClickHandle", index);
-          window.equipmentClickHandle && window.equipmentClickHandle(index);
+
+      //订阅消息
+      function subscribe1() {
+        stompClient.subscribe("/topic/device", function(response) {
+          // setMessageInnerHTML("已成功订阅/topic/device");
+          var returnData = JSON.parse(response.body);
+          let {id,status} = returnData
+          arr = arr.map(item=> {
+            if (item.id === id) {
+              switch (status) {
+                case 'ERC52':
+                  item.status = 2
+                  break;
+                case 'ERC51':
+                  item.status = 1
+                  break;
+                case 'ERC50':
+                  item.status = 3
+
+                  break;
+                default:
+                  item.status = 0
+                  break;
+              }
+            }
+            return item
+          })
+          update(arr)
         });
-      });
+      }
     </script>
   </body>
 </html>

monitor.html

@@ -18,7 +18,7 @@
         <span class="tag">迎宾大道中院士路路口</span>
       </div>
       <div class="tcdPageCode"></div>
-      <main class="video-ctrl">
+      <main class="video-ctrl" id="vctrl1">
         <video
           id="testPlayer"
           poster=""
@@ -30,12 +30,13 @@
           <source
             src="http://gz2play.95787.com/sx/gnFe37Och0oyb12RvJTMumpdG.m3u8"
             type="application/x-mpegURL"
+            id="player"
           />
         </video>
       </main>
       <div class="m-detail">
         <div class="detail-left">
-            <img src="./images/shexiangtou.png" alt="" />
+          <img src="./images/shexiangtou.png" alt="" />
         </div>
         <div class="detail-right">
           <div class="detail-item">
@@ -56,90 +57,134 @@
           </div>
         </div>
       </div>
-      <div class="settting">
+      <!-- <div class="settting">
         <span>取消重点监控</span>
-      </div>
+      </div> -->
     </section>
 
     <div class="line"></div>
 
     <section class="s2">
-        <div class="s-title">
-          <h2>重点监控</h2>
-          <span class="tag">迎宾大道中院士路路口</span>
+      <div class="s-title">
+        <h2>当前监控</h2>
+        <span class="tag" style="color:#00b5ee;border-color:#00b5ee"
+          >迎宾大道中院士路路口</span
+        >
+      </div>
+      <main class="video-ctrl">
+        <video
+          id="testPlayer1"
+          poster
+          controls
+          playsInline
+          webkit-playsinline
+          autoplay="autoplay"
+        >
+          <source src="http://gz2play.95787.com/sx/2Ez0OBvrAvuFIy5vWyz9sWB9W.m3u8" type="application/x-mpegURL" id="player1" />
+        </video>
+      </main>
+      <div class="m-detail">
+        <div class="detail-left">
+          <img src="./images/shexiangtou.png" alt="" />
         </div>
-        <main class="video-ctrl">
-          <video
-            id="testPlayer"
-            poster=""
-            controls
-            playsInline
-            webkit-playsinline
-            autoplay="autoplay"
-          >
-            <source
-              src="http://gz2play.95787.com/sx/gnFe37Och0oyb12RvJTMumpdG.m3u8"
-              type="application/x-mpegURL"
-            />
-          </video>
-        </main>
-        <div class="m-detail">
-          <div class="detail-left">
-              <img src="./images/shexiangtou.png" alt="" />
+        <div class="detail-right">
+          <div class="detail-item">
+            <div class="di-l">设备编号</div>
+            <div class="di-r">5</div>
           </div>
-          <div class="detail-right">
-            <div class="detail-item">
-              <div class="di-l">设备编号</div>
-              <div class="di-r">5</div>
-            </div>
-            <div class="detail-item">
-              <div class="di-l">设备型号</div>
-              <div class="di-r">iDS-2PT7T20BX-D</div>
-            </div>
-            <div class="detail-item">
-              <div class="di-l">设备状态</div>
-              <div class="di-r">正常</div>
-            </div>
-            <div class="detail-item">
-              <div class="di-l">运行时长</div>
-              <div class="di-r">56天18小时01分钟</div>
-            </div>
+          <div class="detail-item">
+            <div class="di-l">设备型号</div>
+            <div class="di-r">iDS-2PT7T20BX-D</div>
+          </div>
+          <div class="detail-item">
+            <div class="di-l">设备状态</div>
+            <div class="di-r">正常</div>
+          </div>
+          <div class="detail-item">
+            <div class="di-l">运行时长</div>
+            <div class="di-r">56天18小时01分钟</div>
           </div>
         </div>
-        <div class="cancel">
-          <span>设置为重点监控</span>
-        </div>
-      </section>
+      </div>
+      <!-- <div class="cancel">
+        <span>设置为重点监控</span>
+      </div> -->
+    </section>
 
     <script src="js/jquery-3.2.1.min.js"></script>
     <script src="js/ezuikit.js"></script>
     <script src="js/page.js"></script>
 
     <script>
-
-      let monitorData = [
-        {
-          
-        },
-      ]
+      let firstVideo = "";
+      let player = "";
+      let player1 = "";
 
 
+      player = new EZUIPlayer("testPlayer");
+      player1 = new EZUIPlayer("testPlayer1");
       $(".tcdPageCode").createPage({
-        pageCount: 20,
+        pageCount: 3,
         current: 1,
         backFn: function(p) {
+          let video = firstVideo;
+          let type = "";
+          switch (p) {
+            case 1:
+              video = firstVideo;
+              type = "application/x-mpegURL";
+              break;
+            case 2:
+              video = "./video/1.Ogg";
+              type = "";
+              break;
+            case 3:
+              video = "./video/2.Ogg";
+              type = "";
+              break;
+            default:
+              break;
+          }
+
+          let videoDom = `
+              <video
+                id="testPlayer"
+                poster
+                controls
+                playsInline
+                webkit-playsinline
+                autoplay="autoplay"
+              ></video>
+              `;
+
+          let sourceDom = `<source
+                src="${video}"
+                type="${type}"
+                id="player1"
+              />`;
+
+          if (p === 1) {
+            player = "";
+            $("#vctrl1").empty();
+            $("#vctrl1").html(videoDom);
+            $("#testPlayer").empty();
+            $("#testPlayer").html(sourceDom);
+            player = new EZUIPlayer("testPlayer");
+            player.play();
+          } else {
+            $("#vctrl1").empty();
+            $("#vctrl1").html(videoDom);
+            $("#testPlayer").empty();
+            $("#testPlayer").html(sourceDom);
+            $("#testPlayer")[0].play();
+          }
         }
       });
-      var player = new EZUIPlayer("testPlayer");
-      player.on("error", function() {
-        console.log("error");
-      });
-      player.on("play", function() {
-        console.log("play");
-      });
-      player.on("pause", function() {
-        console.log("pause");
-      });
+      // var player = new EZUIPlayer("testPlayer");
+      // $.ajax({
+      //   url:''
+      // })
+
       Array.from(document.querySelectorAll(".s1 .video-ctrl")).forEach(
         (dom, index) => {
           dom.addEventListener("click", e => {
@@ -149,18 +194,48 @@
         }
       );
 
-      getMonitorUrl()
+      function checkFull() {
+        var isFull =
+          document.fullscreenEnabled ||
+          window.fullScreen ||
+          document.webkitIsFullScreen ||
+          document.msFullscreenEnabled;
+        if (isFull === undefined) isFull = false;
+        console.log(isFull);
+
+        return isFull;
+      }
+
+      getMonitorUrl();
       function getMonitorUrl() {
         $.ajax({
-          url:"http://95787.com/api/getSessionID.php",
-          type:"post",
-          data:{
-            key:'c1685ef2012c099ec3daa238907577ed'
+          url: "http://139.159.231.141:8182/live/getLiveUrlList",
+          type: "post",
+          data: {
+            key: "c1685ef2012c099ec3daa238907577ed"
           },
-          success:function(data){
+          success: function(data) {
+            let callback = JSON.parse(data).data;
+            firstVideo = callback[0];
+            $("#player").attr("src", callback[0]);
+            $("#player1").attr("src", callback[1]);
+            player=null
+            player1=null
 
+            player = new EZUIPlayer("testPlayer");
+            player1 = new EZUIPlayer("testPlayer1");
+            player1.play()
+            player.on("error", function() {
+              console.log("error");
+            });
+            player.on("play", function() {
+              console.log("play");
+            });
+            player.on("pause", function() {
+              console.log("pause");
+            });
           }
-        })
+        });
       }
     </script>
   </body>

security.html

@@ -164,24 +164,48 @@
       <div class="line"></div>
       <div class="card" id="gdp"></div>
       <div class="card" id="outIn">
-        <div class="s-title f-weight">隐患分类统计 *</div>
-        <div class="yinhuan">
-          <div class="yinhuan-l">火灾（80%）</div>
-          <div class="yinhuan-r">
-            <div class="yinhuan-1">
-              爆炸、中毒和窒息、水害、机械伤害等（10%）
-            </div>
-            <div class="yinhuan-2">交通事故（5%）</div>
-            <div class="yinhuan-3">其他（5%）</div>
-          </div>
+        <div class="s-title f-weight">
+          <img class="icon" src="./images/icon-jg.svg" />
+          <span>井盖传感图层</span>
+        </div>
+        <div class="manhole">
+          <img src="./images/manhole.png" alt="" />
         </div>
       </div>
       <div class="line"></div>
-      <div class="card" id="addVal"></div>
-      <div class="card" id="xiaofei"></div>
+      <div class="card">
+        <div class="s-title f-weight">
+          <img class="icon" src="./images/icon-jk.svg" />
+          <span>重点监控图层</span>
+        </div>
+        <div class="jiankong">
+          <video
+            id="testPlayer"
+            poster=""
+            controls
+            playsInline
+            webkit-playsinline
+            autoplay="autoplay"
+          >
+            <source
+              src="http://gz2play.95787.com/sx/gnFe37Och0oyb12RvJTMumpdG.m3u8"
+              type="application/x-mpegURL"
+            />
+          </video>
+        </div>
+      </div>
+      <div class="card">
+        <div class="s-title f-weight">
+          <img class="icon" src="./images/icon-hj.svg" />
+          <span>火警探测报警</span>
+        </div>
+        <div id="xiaofei"></div>
+      </div>
     </section>
 
     <script src="js/echarts.min.js"></script>
+    <script src="js/ezuikit.js"></script>
+
     <script>
       (function() {
         let gdpOption = {
@@ -191,7 +215,7 @@
               color: "#fff"
             }
           },
-          color: ["#ffffff", "#ffe354", "#ff9a32","#95d94c", "#fd022f",],
+          color: ["#ffffff", "#ffe354", "#ff9a32", "#95d94c", "#fd022f"],
           tooltip: {
             trigger: "axis",
             axisPointer: {
@@ -294,52 +318,85 @@
         };
 
         let xiaofeiOption = {
-          title: {
-            text: "火灾事故成因分类 *",
-            textStyle: {
-              color: "#fff"
-            }
-          },
-          color: ["#ffffff", "#ffe354", "#ff9a32", "#fd022f"],
-          tooltip: {
-            trigger: "axis",
-            axisPointer: {
-              // 坐标轴指示器，坐标轴触发有效
-              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-            }
-          },
-          grid: {
-            left: "3%",
-            right: "4%",
-            bottom: "3%",
-            containLabel: true
-          },
-          series: [
-            {
-              name: "火灾发生数",
-              type: "pie",
-              radius: "50%",
-              center: ["50%", "60%"],
-              data: [
-                { value: 2, name: "重大火灾\n发生数2\n（起）" },
-                { value: 4, name: "较大火灾\n发生数4\n（起）" },
-                { value: 1, name: "特大火灾\n发生数1\n（起）" },
-                { value: 12, name: "一般火灾\n发生数12\n（起）" }
-              ],
-              label: {
-                normal: {
+            series: [
+              {
+                textStyle: {
+                    color: '#fff'
+                },
+                type: "gauge",
+                radius: "100%",
+                center: ["50%", "60%"],
+                splitNumber: 15,
+                min: 0,
+                max: 300,
+                splitNumber: 0, //刻度数量
+                startAngle: 220,
+                endAngle: -40,
+                axisLine: {
                   show: true,
-                  // position: 'center',
-                  fontSize: 12
-                }
-              },
-              labelLine: {
-                normal: {
+                  lineStyle: {
+                    width: 12,
+                    color: [
+                        [0.2, '#e78b28'],
+                        [0.8, '#42b2b4'],
+                        [1.0, '#e8493c']
+                    ],
+                  }
+                },
+                //分隔线样式。
+                splitLine: {
                   show: false
-                }
+                },
+                axisLabel: {
+                  show: false,
+                  textStyle: {
+                      color: '#fff'
+                  },
+                },
+                axisTick: {
+                  show: false
+                },
+                pointer: {
+                    show: true,
+                    width: "8%",
+                    length: '70%'
+                },
+                itemStyle:{
+                  color:'#42b2b4'
+                },
+                title: {
+                  show: true,
+                  offsetCenter: [0, "65%"], // x, y，单位px
+                  textStyle: {
+                    color: "#fff",
+                    fontSize: 12
+                  }
+                },
+                //仪表盘详情，用于显示数据。
+                detail: {
+                  show: false,
+                  offsetCenter: [0, "40%"],
+                  color: "#fff",
+                  formatter: function(params) {
+                    return params;
+                  },
+                  textStyle: {
+                    fontSize: 18,
+                    fontWeight: "bold"
+                  }
+                },
+                data: [
+                  {
+                    name: "【仪表盘】\n报警探测仪温度137℃",
+                    value: 63,
+                    textStyle: {
+                      fontSize: 18,
+                      color:"#fff"
+                    }
+                  }
+                ]
               }
-            }
-          ]
+            ]
         };
 
         let gongshangOption = {
@@ -413,15 +470,27 @@
         };
 
         let gdpChart = echarts.init(document.querySelector("#gdp"));
-        let addValChart = echarts.init(document.querySelector("#addVal"));
+        // let addValChart = echarts.init(document.querySelector("#addVal"));
         let xiaofeiChart = echarts.init(document.querySelector("#xiaofei"));
         let gongshangChart = echarts.init(document.querySelector("#gongshang"));
 
         gdpChart.setOption(gdpOption);
-        addValChart.setOption(addValOption);
+        // addValChart.setOption(addValOption);
         xiaofeiChart.setOption(xiaofeiOption);
         gongshangChart.setOption(gongshangOption);
       })();
+      
+      var player = new EZUIPlayer("testPlayer");
+      player.on("error", function() {
+        console.log("error");
+      });
+      player.on("play", function() {
+        console.log("play");
+      });
+      player.on("pause", function() {
+        console.log("pause");
+      });
+      
       let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
         Array.from(document.querySelectorAll(".s2 .card"))
       );

style/equipment.css

@@ -1,6 +1,6 @@
 body{
   color: var(--text-color);
-  background: #101010;
+  /* background: #101010; */
   padding: 20px;
 }
 
@@ -99,7 +99,7 @@ body{
   width: 100%;
   padding: 10px 0;
   box-sizing: border-box;
-  height: 250px;
+  height: 200px;
 }
 
 .s3 .jiaotong .jiaotong-table{

style/manhole.css

@@ -1,6 +1,6 @@
 body{
   color: var(--text-color);
-  background: #101010;
+  /* background: #101010; */
   padding: 20px;
 }
 
@@ -99,7 +99,7 @@ body{
   width: 100%;
   padding: 10px 0;
   box-sizing: border-box;
-  height: 250px;
+  height: 200px;
 }
 
 .s3 .jiaotong .jiaotong-table{

style/monitor.css

@@ -1,6 +1,6 @@
 body {
   color: var(--text-color);
-  background: #000;
+  /* background: #101010; */
   padding: 20px;
 }
 
@@ -51,7 +51,6 @@ body {
   justify-content: space-between;
   line-height: 2;
   align-items: center;
-  margin-bottom: 5px;
   font-size: 16px;
 }
 
@@ -73,11 +72,11 @@ body {
   color:#fff;
   font-size: 14px;
   padding: 4px 10px;
-  background: var(--sub-text-color);
+  background: #00b5ee;
   cursor: pointer;
 }
 .cancel span{
-  color:var(--sub-text-color);
+  color: #00b5ee;
   font-size: 14px;
   padding: 4px 10px;
   background: #fff;
@@ -91,7 +90,7 @@ a:hover {
   text-decoration: none;
 }
 .tcdPageCode {
-  padding: 0 0 15px 0;
+  padding: 0 0 5px 0;
   color: #ccc;
   text-align: right;
 }
@@ -109,7 +108,7 @@ a:hover {
 }
 .tcdPageCode a:hover {
   text-decoration: none;
-  border: 1px solid #428bca;
+  border: 1px solid #00b5ee;
 }
 .tcdPageCode span.current {
   display: inline-block;
@@ -118,8 +117,8 @@ a:hover {
   padding: 0 8px;
   margin: 0 4px;
   color: #fff;
-  background-color: #428bca;
-  border: 1px solid #428bca;
+  background-color: #00b5ee;
+  border: 1px solid #00b5ee;
   vertical-align: middle;
 }
 .tcdPageCode span.disabled {

style/security.css

@@ -1,6 +1,6 @@
 body{
   color: var(--text-color);
-  background: #000;
+  /* background: #000; */
 }
 .s1{
   margin: 0px auto;
@@ -50,6 +50,10 @@ body{
   box-sizing: border-box;
 }
 
+.s2 .s-title{
+  display: flex;
+  align-items: center;
+}
 
 
 .s2 .jiaotong .jiaotong-table{
@@ -91,53 +95,58 @@ body{
   width: 50%;
 }
 
-.s2 .yinhuan{
-  display: flex;
-  align-items: center;
-  height: 85%;
-  padding:0 5%;
-  margin-top: 3%;
-  box-sizing: border-box;
+.s2 .manhole{
+  width: 90%;
+  height: 90%;
+  margin: 5% 5%;
 }
-.s2 .yinhuan .yinhuan-l{
-  background: #ff9a36;
+.s2 .jiankong{
+  width: 100%;
   height: 100%;
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  text-align: center;
+  position: relative;
 }
-.s2 .yinhuan .yinhuan-r{
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.s2 .jiankong::after{
+  content: "";
+  display: inline-block;
+  width: 100%;
   height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-.s2 .yinhuan .yinhuan-r .yinhuan-1,.s2 .yinhuan .yinhuan-r .yinhuan-2,.s2 .yinhuan .yinhuan-r .yinhuan-3{
-  background: #fddd4e;
-  width: 100%;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
+.s2 #testPlayer{
+  width: 25vw;
+  height: 25vw;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 20px auto;
+  border: 2px solid #00d1f2;
+  box-shadow: 0 1px 20px #00d1f2;
 }
-.yinhuan-1{
-  padding: 0 5px;
+
+.s2 .icon{
+  width: 20px;
+  height: 20px;
+  margin-right: 6px;
 }
-.s2 .yinhuan .yinhuan-r .yinhuan-2{
-  background: #f9032d;
-  
+
+.s2 .card{
+  padding: 10px;
 }
-.s2 .yinhuan .yinhuan-r .yinhuan-3{
-  background: #1b4b8d;
 
+.s2 .manhole img{
+  width: 100%;
+  max-height: 90%;
 }
 
 #gdp,#outIn,#addVal,#xiaofei,#guding{
   /* background: linear-gradient(to right, #0091fe, #00d0f4); */
   padding: 10px;
 }
+
+#xiaofei{
+  width: 100%;
+  height: 90%;
+}

style/tagging.css

@@ -0,0 +1,147 @@
+body{
+  color: var(--text-color);
+  /* background: #101010; */
+  padding: 20px;
+}
+
+.s1{
+  padding-bottom: 10px;
+}
+
+.s1,.s2{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0px auto 10px;
+
+}
+.s-title{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.s-title .tag{
+  color: var(--sub-text-color);
+  font-size: 14px;
+  padding: 2px;
+  border: 1px solid var(--sub-text-color);
+}
+
+.s1 .s1-title{
+  margin-top: 15px;
+  font-size: 16px;
+}
+
+.s1 .s1-title span{
+  color: #fd8f0f;
+  font-weight: bold;
+}
+
+.s1 .tag{
+  width: 100%;
+}
+
+.drow-bar{
+  height: 50px;
+  width: 100%;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  padding: 0 25px;
+  justify-content: space-between;
+  position: relative;
+}
+
+.drow-bar .d-title{
+  font-size: 18px;
+  font-weight: bold;
+  color: #00B5EE;
+  z-index: 999;
+}
+
+.d-arrow{
+  width: 20px;
+  z-index: 999;
+
+}
+
+.d-arrow img{
+  width: 100%;
+}
+
+.drow-bar .d-mask{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 0;
+}
+
+.b1{
+  background: url("../images/b1.jpg") top center no-repeat;
+}
+.b2{
+  background: url("../images/b2.jpg") top center no-repeat;
+}
+.b3{
+  background: url("../images/b3.jpg") top center no-repeat;
+}
+.b4{
+  background: url("../images/b4.jpg") top center no-repeat;
+}
+.b5{
+  background: url("../images/b5.jpg") top center no-repeat;
+}
+.b6{
+  background: url("../images/b6.jpg") top center no-repeat;
+}
+
+.b1,.b2,.b3,.b4,.b5,.b6{
+  background-size: 100% 100%;
+}
+
+.drow-show{
+  /* height: 600px; */
+  /* overflow-y: scroll; */
+  display: flex;
+  flex-wrap: wrap;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.d-show{
+  width: 50%;
+}
+
+.d-show .d-img{
+  width: 100%;
+  padding: 10px;
+}
+
+.d-show .d-img img{
+  width: 100%;
+}
+
+.d-show .d-show-title{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.d-show .d-show-title .d-show-l div:first-child{
+  font-size: 16px;
+  font-weight: bold;
+  margin: 10px 0;
+}
+.d-show .d-show-title .d-show-l div:last-child{
+  font-size: 14px;
+}
+
+.d-show .d-show-title .d-show-r span{
+  background: #00B5EE;
+  font-size: 14px;
+  padding: 5px 20px;
+  border-radius: 4px;
+}

tagging.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style/reset.css" />
+    <link rel="stylesheet" href="style/public.css" />
+    <link rel="stylesheet" href="style/tagging.css" />
+    <link rel="stylesheet" href="font/iconfont.css" />
+    <title>Document</title>
+  </head>
+
+  <body>
+    <section class="s1">
+      <div class="s-title">
+        <h2>重点标注</h2>
+      </div>
+      <div class="tag">
+        <div class="drow-bar b1">
+          <div class="d-mask"></div>
+          <div class="d-title">公共场所</div>
+          <div class="d-arrow">
+            <img src="./images/down.png" alt="" />
+          </div>
+        </div>
+        <div class="drow-bar b2">
+          <div class="d-mask"></div>
+          <div class="d-title">主要道路</div>
+          <div class="d-arrow">
+            <img src="./images/down.png" alt="" />
+          </div>
+        </div>
+        <div class="drow-bar b3">
+          <div class="d-mask"></div>
+          <div class="d-title">旅游景点</div>
+          <div class="d-arrow">
+            <img src="./images/down.png" alt="" />
+          </div>
+        </div>
+        <div class="drow-bar b4">
+          <div class="d-mask"></div>
+          <div class="d-title">购物商圈</div>
+          <div class="d-arrow">
+            <img src="./images/down.png" alt="" />
+          </div>
+        </div>
+        <div class="drow-bar b5">
+          <div class="d-mask"></div>
+          <div class="d-title">公司企业</div>
+          <div class="d-arrow">
+            <img src="./images/down.png" alt="" />
+          </div>
+        </div>
+        <div class="drow-bar b6">
+          <div class="d-mask" id="c-show" style="display:none"></div>
+          <div class="d-title">高校学院</div>
+          <div class="d-arrow">
+            <img id="arr-img" src="./images/down.png" alt="" />
+          </div>
+        </div>
+        <div class="drow-show">
+            <div class="d-show">
+                <div class="d-img">
+                  <img src="./images/b6-img1.jpg" alt="" />
+                  <div class="d-show-title">
+                    <div class="d-show-l">
+                      <div>五邑大学AI视觉科技体验中心</div>
+                      <div>广东省江门市蓬江区东成村22号</div>
+                    </div>
+                    <!-- <div class="d-show-r"><span>点击前往</span></div> -->
+                  </div>
+                </div>
+              </div>
+              <div class="d-show">
+                  <div class="d-img">
+                    <img src="./images/b6-img2.jpg" alt="" />
+                    <div class="d-show-title">
+                      <div class="d-show-l">
+                        <div>五邑大学轨道交通学院实验室</div>
+                        <div>广东省江门市蓬江区东成村22号</div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+              <div class="d-show">
+                  <div class="d-img">
+                    <img src="./images/b6-img3.jpg" alt="" />
+                    <div class="d-show-title">
+                      <div class="d-show-l">
+                        <div>五邑大学侨乡文化研究中心</div>
+                        <div>广东省江门市蓬江区东成村22号</div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+              <div class="d-show">
+                  <div class="d-img">
+                    <img src="./images/b6-img4.jpg" alt="" />
+                    <div class="d-show-title">
+                      <div class="d-show-l">
+                        <div>五邑大学图书馆</div>
+                        <div>广东省江门市蓬江区东成村22号</div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+              <div class="d-show">
+                  <div class="d-img">
+                    <img src="./images/b6-img5.jpg" alt="" />
+                    <div class="d-show-title">
+                      <div class="d-show-l">
+                        <div>五邑大学学生综合服务中心</div>
+                        <div>广东省江门市蓬江区东成村22号</div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+              <div class="d-show">
+                  <div class="d-img">
+                    <img src="./images/b6-img6.jpg" alt="" />
+                    <div class="d-show-title">
+                      <div class="d-show-l">
+                        <div>江门市五邑大学艺术设计馆</div>
+                        <div>广东省江门市蓬江区东成村22号</div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+        </div>
+      </div>
+    </section>
+
+    <script src="js/jquery-3.2.1.min.js"></script>
+    <script>
+      // $('.drow-show').scroll(function (e) {
+      //   e.preventDefault()
+      // })
+      $('.b6').click(function () {
+        let img = $('#arr-img')[0].currentSrc;
+        if (img.indexOf('up.png')>0) {
+          $('#arr-img').attr('src','./images/down.png')
+          $('#c-show').hide()
+        }else{
+          $('#arr-img').attr('src','./images/up.png')
+          $('#c-show').show()
+        }
+        let ds = $('.drow-show')
+        ds.toggle()
+      })
+      let arr = Array.from(document.querySelectorAll(".drow-show .d-show"))
+      arr.forEach((dom, index) => {
+        dom.addEventListener("click", e => {
+          console.log("taggingClickHandle", index);
+          window.taggingClickHandle && window.taggingClickHandle(index);
+        });
+      });
+    </script>
+  </body>
+</html>