图例鼠标滑入滑出时间点击事件

ioc_frontweb/images/gr.svg

+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="7" fill="url(#paint0_radial_113_233)"/>
+<circle cx="7" cy="7" r="6.85" stroke="#DFB73E" stroke-width="0.3"/>
+<defs>
+<radialGradient id="paint0_radial_113_233" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7 7) rotate(90) scale(7)">
+<stop stop-color="#DFB73E"/>
+<stop offset="1" stop-color="#DFB73E" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

ioc_frontweb/index.html

@@ -182,7 +182,7 @@
           <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tb&skin=pitaya&color=64FEFF" frameborder="0" width="350" height="24" allowtransparency="true"></iframe>
         </div>
         <div style="width: 40%;text-align: center;">
-          <img src="../ioc_frontweb/images/topban.png" alt="" style="width: 80%;margin-top: 10px;">
+          <img src="images/topban.png" alt="" style="width: 80%;margin-top: 10px;">
         </div>
         <div class="righttime" style="width: 30%;padding-right: 50px;text-align: right;">
           <div id="top-right">
@@ -198,7 +198,12 @@
       </div>
       
     </div>
-    <div id="border"></div>
+    <div id="border">
+      <img src="images/borderbantop.png" alt="" class="bordertop">
+      <img src="images/borderbanleft.png" alt="" class="borderleft">
+      <img src="images/borderbanright.png" alt="" class="borderright">
+      <img src="images/borderbanbottom.png" alt="" class="borderbottom">
+    </div>
     <div id="leftBar">
       <!-- <div id="bottomMenu">
         <a href="#" class="btn span1">
@@ -262,7 +267,7 @@
         </div>
         
         
-        <ul id="legend">
+        <ul id="legend" class="legendcss">
         
         </ul>
       </div>
@@ -342,13 +347,13 @@
 	  		预警数量
 	  	</div>
       <div class="Linebutton">
-        <button type="button" class="linebtn active">日统计</button>
-        <button type="button" class="linebtn">月统计</button>
+        <button type="button" class="linebtn">日统计</button>
+        <button type="button" class="linebtn active">月统计</button>
       </div>
 	  	<!-- 折线图 -->
 	  	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
-	  	<div class="echarts deviceNumLine deviceNumLineday show" id="deviceNumLineday" style="width: 370px;height: 200px;margin-top: 50px;"></div>
-		  <div class="echarts deviceNumLine deviceNumLinemouth" id="deviceNumLinemouth" style="width: 370px;height: 200px;margin-top: 50px;"></div>
+	  	<div class="echarts deviceNumLine deviceNumLineday" id="deviceNumLineday" style="width: 380px;height: 200px;margin-top: 50px;"></div>
+		  <div class="echarts deviceNumLine deviceNumLinemouth show" id="deviceNumLinemouth" style="width: 380px;height: 200px;margin-top: 50px;"></div>
 	  </div>
 	  
 	  <div style="background: linear-gradient(to left,#111a2e,#64FEFF,#111a2e);height:1px;margin-bottom: 30px;margin-left: 10px;width: 90%;margin-top: 15px;"></div>
@@ -361,7 +366,7 @@
           <img src="images/vector7.png" alt="" style="width: 14px;margin-left: 10px;">
         当前值班信息
         </div>
-          <div class="dutyinfo" id="tbmsg"style="overflow-y: auto;height:130px;">
+          <div class="dutyinfo" id="tbmsg"style="overflow-y: auto;height:150px;">
             <dl>
               <dt>部门</dt>
               <dt>当班人员</dt>

ioc_frontweb/js/app.js

@@ -177,12 +177,26 @@ $(function () {
   // 监听图例点击事件
   $('#legend').on('click', function (ev) {
     let isJkelected = $('.layui-layer-btn .jkBtn').hasClass('selected');
+
     if (isJkelected) {
       removeMaker('jk');
       $('.layui-layer-btn .jkBtn').removeClass('selected');
     }
+
+    
     if (ev.target.tagName.toLowerCase() !== 'a') {
       $(ev.target).closest('li').find('a').click();
+      if( $(ev.target).closest('li').find(".legendchild").css("display")=="block"){
+        $(ev.target).closest('li').find(".legendchild").css({display:"none"});
+        $(ev.target).closest('li').css({"backgroundImage":"url(images/re.png)"});
+      }else{
+        $("#legend").find("li .legendchild").css({display:"none"});
+        // $("#legend").find("li").css({"backgroundImage":"url(images/re.png)"});
+        $(ev.target).closest('li').find(".legendchild").css({display:"block"});
+
+        $(ev.target).closest('li').css({"backgroundImage":"url(images/vectorbot.png)"})
+      }
+      
     } else {
       if ($(ev.target)[0].classList.toString().indexOf('selected') === -1) {
         removeMaker($(ev.target).data('id'));
@@ -194,6 +208,30 @@ $(function () {
     }
   });
 
+  $('.legendcss').on('mouseover', function (ev) {
+    console.log(ev.target.className);
+    if (ev.target.tagName.toLowerCase() !== 'ul' &&ev.target.tagName.toLowerCase()!=="a"&& ev.target.className !=="legendchild" ) {
+      $("#legend").find("li .legendchild").hide();
+      $(ev.target).closest('li').find(".legendchild").show();
+      $(ev.target).closest('li').css({"backgroundImage":"url(images/vectorbot.png)"})
+    }else{
+
+    }
+    // if(ev.target.tagName.toLowerCase()=="a" || ev.target.className =="legendchild"){
+    //   $(ev.target).closest('li').css({"backgroundImage":"url(images/re.png)"});
+    // }
+  })
+
+  $('.legendcss').on('mouseout', function (ev) {
+    // if (ev.target.tagName.toLowerCase()=="a" || ev.target.className =="legendchild") {
+    //   $("#legend").find("li .legendchild").hide();
+    //   $(e.target).closest('li').find(".legendchild").hide();
+    // }else{
+
+    // }
+
+
+  })
   /*全局变量*/
   var currentEventObj = {}; //点击评估处理时当前事件obj
   (currEventsArr = []), //当前事件Arrary

ioc_frontweb/js/map.js

@@ -64,7 +64,7 @@ district.search('赞皇', function (status, result) {
       path: bounds[i],
       strokeColor: '#3edfe1',
       strokeWeight: 5,
-	  strokeOpacity: 7,
+	    strokeOpacity: 7,
       map: map,
     });
   }

ioc_frontweb/js/utils.js

@@ -346,13 +346,13 @@ function createLineChartday(options) {
 			x2:20,
 			y2:60,
       borderWidth:1,
-      top: '15%',			
-			bottom:'15%'
+      top: '10%',			
+			bottom:'35%'
 		},
       xAxis: {
           type: 'category',
-          // data: options.xAxisData,
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: options.xAxisData,
+          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           axisLabel: {
             textStyle: {
               color: '#ddd',
@@ -371,10 +371,21 @@ function createLineChartday(options) {
         },
         series: [
           {
-            // data: options.seriesData,
-            data: [120, 200, 150, 80, 70, 110, 130],
+            data: options.seriesData,
+            // data: [50, 200, 150, 80, 70, 110, 130],
             type: 'bar',
-            barWidth: 12, //柱图宽度
+            markPoint: {
+              symbol:'image://../ioc_frontweb/images/gr.svg',//url替换成你的图片地址
+              symbolSize:15,//图片大小
+              symbolOffset:[0,'-50%'],//图片相对于柱形图x,y轴偏移量，注意要往上移y要是负的
+              data:[{
+                  coord:[0,40]//需要展示图片的柱型索引，y轴的value
+              }],
+              label:{
+                  show:false,//顶部默认会展示y轴的值，可以设置false,不展示
+              }
+            },
+            barWidth: 8, //柱图宽度
               itemStyle: {
                 normal: {
                   label: {
@@ -414,12 +425,12 @@ function createLineChartmouth(options) {
         y2:60,
         borderWidth:1,
         top: '15%',			
-        bottom:'15%'
+        bottom:'25%'
       },
         xAxis: {
             type: 'category',
-            // data: options.xAxisData,
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            data: options.xAxisData,
+            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
             axisLabel: {
               textStyle: {
                 color: '#ddd',
@@ -438,10 +449,21 @@ function createLineChartmouth(options) {
           },
           series: [
             {
-              // data: options.seriesData,
-              data: [120, 200, 150, 80, 70, 110, 130],
+              data: options.seriesData,
+              // data: [120, 200, 150, 80, 70, 110, 130],
               type: 'bar',
-              barWidth: 12, //柱图宽度
+              markPoint: {
+                symbol:'image://../ioc_frontweb/images/gr.svg',//url替换成你的图片地址
+                symbolSize:15,//图片大小
+                symbolOffset:[0,'-50%'],//图片相对于柱形图x,y轴偏移量，注意要往上移y要是负的
+                data:[{
+                    coord:[0,40]//需要展示图片的柱型索引，y轴的value
+                }],
+                label:{
+                    show:false,//顶部默认会展示y轴的值，可以设置false,不展示
+                }
+              },
+              barWidth: 8, //柱图宽度
                 itemStyle: {
                   normal: {
                     label: {
@@ -605,7 +627,7 @@ function createLegendList() {
             tmpLi +=
               '<li data-id="' +
               items[i].id +
-              '" class="legendItem active"><div><img class="legendPic" style="padding: 7px 0;" src="./images/legend/' +
+              '" class="legendItem"><div><img class="legendPic" style="padding: 7px 0;" src="./images/legend/' +
               items[i].legendCode +
               '.png" alt=""/><span class="legendTitle">' +
               items[i].legendName +
@@ -622,33 +644,15 @@ function createLegendList() {
           var legenditem=document.getElementsByClassName("legendItem");
           var legendchild=document.getElementsByClassName("legendchild");
           for (var i=0; i<legenditem.length;i++){
-            legenditem[i].index = i;
+            // legenditem[i].index = i;
             legenditem[i].onclick = function(){
-              // alert()
-              // var lc = this.lastChild;
-              // this.lastChild.style.display = "none";
-              
-              for(var j=0;j<legenditem.length;j++){
-                legenditem[j].className = legenditem[j].className.replace(' active', '').trim();
-                // deviceNumLine[j].className = deviceNumLine[j].className.replace(' show', '').trim();
-                if(this.lastChild.style.display = "none"){
-                  this.lastChild.style.display = "block";
-                }else{
-                  this.lastChild.style.display = "none";
-                }
+              if(this.lastChild.style.display == "none"){
+                this.style.backgroundImage="url(images/vectorbot.png)";
+                this.lastChild.style.display = "block";
+              }else{
+                this.style.backgroundImage="url(images/re.png)";
+                this.lastChild.style.display = "none";
               }
-              this.className = this.className + ' active';
-              
-
-      　　　　　　　　　　//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
-              // for(var j=0;j<legenditem.length;j++){
-              //   // console.log(legenditem[j],"fasdfdsaffdsfdsfdsafds",legenditem[j].className)
-              //   // legenditem[j].className = legenditem[j].className.replace(' active', '').trim();
-              //   console.log(legenditem[j])
-              //   var aa = 
-              // }
-              // this.className = this.className + ' active';
-              // legendchild[this.index].className = legendchild[this.index].className + ' show';
             };
           }
           // 默认显示视频监控设备

ioc_frontweb/style/style.css

@@ -246,7 +246,7 @@ table.layui-table th {
 }
 
 #alarmList .listContent {
-  height: 150px;
+  height: 200px;
   overflow: hidden;
 }
 
@@ -291,6 +291,14 @@ table.layui-table th {
   color: #ddd;
 }
 
+/* .legendcss li:hover{
+  background-image:url(../images/vectorbot.png);
+} */
+
+/* .legendcss li:hover .legendchild{
+  display: block !important;
+} */
+
 #legend a {
   display: inline-block;
   text-align: center;
@@ -317,10 +325,6 @@ table.layui-table th {
   padding: 0 5px;
   margin-left: 10px;
 }
-.legendItem .active{
-  background: url(../images/vectorbot.png) no-repeat;
-  background-size: 100% 100%;
-}
 .legendchild{
   display: none;
   width: auto;
@@ -449,28 +453,52 @@ table.layui-table th {
   /* top: 7px; */
 }
 #border{
-  width: 100%;
-  height: 100%;
   z-index: 2;
   min-width: 1000px;
-  background: url(../images/borderban.png) no-repeat;
-  background-size: 100% 100%;
+  /* background: url(../images/borderban.png) no-repeat;
+  background-size: 100% 100%; */
   position: absolute;
   top: 0;
 }
+.bordertop{
+  position: fixed;
+  width: 100%;
+  top: 0;
+  height: 90px;
+}
+.borderleft{
+  position: fixed;
+  height: 100%;
+  top: 0;
+  left: 0;
+  width: 60px;
+}
+.borderright{
+  position: fixed;
+  height: 100%;
+  top: 0;
+  right: 0;
+  width: 60px;
+}
+.borderbottom{
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  height: 30px;
+}
 #leftBar{
   /* background: url(../images/mapleft1.png); */
   background-repeat: no-repeat;
   background-size: 100%;
   width: 22%;
-  height: 89%;
+  height: 89.1%;
   position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
   z-index: 2;
   background-size: 100% 100%;
-  margin-top: 4.5%;
+  margin-top: 4.4%;
   margin-left: 1%;
   background: url(../images/mapl.png)no-repeat;
   background-size: 100% 100%;
@@ -480,14 +508,14 @@ table.layui-table th {
   background-repeat: no-repeat;
   background-size: 100%;
   width: 22%;
-  height: 89%;
+  height: 89.1%;
   position: fixed;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 2;
   background-size: 100% 100%;
-  margin-top: 4.5%;
+  margin-top: 4.4%;
   margin-right: 1%;
   background: url(../images/mapr.png)no-repeat;
   background-size: 100% 100%;
@@ -1038,12 +1066,16 @@ table.layui-table th {
   height: 40px;
   width: 100%;
 }
+.dutyinfo dl dl:nth-child(odd){
+  background: rgb(0 0 0 / 50%);
+}
 .msgWrap .dutyinfo dl dt{
   color: #64FEFF;
   box-sizing: border-box;
   width: 33%;
   font-size: 0.9rem;
   border-bottom: 1px solid #fff;
+  background: rgba(255, 255, 255, 0);
   float: left;
 }
 .msgWrap .dutyinfo dl dd {