增加样式地图切换，添加折线图

ioc_frontweb/index.html

@@ -32,7 +32,6 @@
     <!-- <div class="videoWindows" style="position: absolute;  z-index: 100;  width: 100%;  height: 500px;  bottom: 0;  left: 0;">
   </div> -->
 
-    <div id="bottomBg"></div>
     
     <div id="btmSearch">
       <input type="text" name="title" placeholder="请输入关键字搜索" class="layui-input" id="btnInput" />
@@ -229,21 +228,43 @@
 		<div class="alarm" id="alarm">
 		</div>
 		<div id="" class="leftBar-legend">
-			<div class="echarts categoryAlarmNum" id="categoryAlarmNum" style="width: 430px;height: 260px;padding-left: 5px !important;padding-top: 3px !important;"></div>
-			<div id="">
-				<div class="legenditemout">
-					应急资源分类
-				</div>
-				<ul id="legend">
-				 
-				</ul>
+			<div class="leftlegend">
+				应急资源监控
 			</div>
+			<div class="echarts categoryAlarmNum" id="categoryAlarmNum" style="width: 430px;height: 260px;padding-left: 5px !important;padding-top: 3px !important;"></div>
+			<div style="background:linear-gradient(to left,#FFFFFF,#458dde,#FFFFFF);height:1px;"></div>
+			<ul id="legend">
+			 
+			</ul>
 		</div>
       
     </div>
 	<div id="rightBar">
       <!-- <div class="echarts deviceNumBar" id="deviceNumBar"></div>	 -->
-	  <div class="echarts deviceNumPie" id="deviceNumPie"></div>
+	  <div class="deviceNumPieout">
+	  	<div class="leftlegend">
+	  		事件类型统计
+	  	</div>
+		<div class="echarts deviceNumPie" id="deviceNumPie"></div>
+	  </div>
+	  
+	  
+	  <div class="deviceNumLineout">
+	  	<div class="leftlegend">
+	  		预警数量
+	  	</div>
+		<div class="Linebutton">
+			<button type="button" class="linebtn active">日</button>
+			<button type="button" class="linebtn">月</button>
+		</div>
+	  	<!-- 折线图 -->
+	  	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
+	  	<div class="echarts deviceNumLine deviceNumLineday show" id="deviceNumLineday" style="width: 430px;height: 190px;margin-top: 50px;"></div>
+		<div class="echarts deviceNumLine deviceNumLinemouth" id="deviceNumLinemouth" style="width: 430px;height: 190px;margin-top: 50px;"></div>
+	  </div>
+	  
+	  
+	  
       <div id="alarmList" class="right-alarm">
         <div class="mktit">安全生产实时预警数据</div>
         <div class="listTitle">
@@ -258,7 +279,9 @@
 	  
       <!-- 值班信息 -->
       <div class="msgWrap">
-        <h3>当前值班信息</h3>
+	    <div class="msgWraplegend">
+		   当前值班信息
+	    </div>
         <div class="dutyinfo" id="tbmsg"style="overflow-y: auto;height:130px;">
           <dl>
             <dt>部门</dt>
@@ -352,21 +375,9 @@
     <script src="./js/map.js"></script>
     <script src="./js/app.js"></script>
     <script>
-//       function jietu(){
-//         console.log("000")
-//         html2canvas(document.querySelector("#jietu-div"),{
-//           useCORS: true,
-//           backgroundColor:null,
-//         }).then(canvas => {
-//            document.body.appendChild(canvas)
-//           //  let imgUri = canvas.toDataURL("image/png").replace("image/png","image/octet-stream")
-//           //  console.log(imgUri);
-//         });
-//       
-//       }
 
 
-$(".saveImage").click(function () {
+	 $(".saveImage").click(function () {
         html2canvas(jQuery(".amap-layer")[0], {
             allowTaint: true,
             useCORS: true,
@@ -377,11 +388,39 @@ $(".saveImage").click(function () {
           // $("#moimg").attr("src", amap.toDataURL()); // 生成的图片
         });
       });
-//点击空白处关闭模态框
+    //点击空白处关闭模态框
       var span1 = document.getElementById('mo');
       span1.onclick = function(){
           span1.style.display = "none"
       }
+	  
+	  var linebtn = document.getElementsByClassName("linebtn");
+	  var deviceNumLine = document.getElementsByClassName("deviceNumLine");
+	  for (var i=0; i<linebtn.length;i++){
+		  linebtn[i].index = i;
+		  linebtn[i].onclick = function(){
+　　　　　　　　　　//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
+			  for(var j=0;j<linebtn.length;j++){
+				  linebtn[j].className = linebtn[j].className.replace(' active', '').trim();
+				  deviceNumLine[j].className = deviceNumLine[j].className.replace(' show', '').trim();
+			  }
+			  this.className = this.className + ' active';
+			  deviceNumLine[this.index].className = deviceNumLine[this.index].className + ' show';
+		  };
+	  }
+	  
+	  
+	  // 地图切换点击显示关闭
+	  $(".mapstyleblock").click(function(){
+			$(".mapstyleblock").hide();
+			$(".map-button-out").show();
+			$(".close").show();
+	  });
+	  $(".close").click(function(){
+	  		$(".map-button-out").hide();
+	  		$(".close").hide();
+	  		$(".mapstyleblock").show();
+	  });
     </script>
     <style>
       #mo {
@@ -581,6 +620,31 @@ $(".saveImage").click(function () {
 	    opacity: 0;
 	  }
 	}
+	.Linebutton{
+		width: 50%;
+		float: right;
+	}
+	.linebtn{
+		margin: 10px 5px;
+		width: 80px;   
+		border: none;
+		outline: none;
+		background-color: #126f7599;
+		color: #00F7DE;
+		border-radius: 5px;
+	}
+	.deviceNumLine{
+		margin: 10px auto;
+		display: none;
+	}
+	.linebtn.active{
+		background-color: #00F7DE;
+		color: #000000;
+	}
+	.deviceNumLine.show{
+		display:block;
+		
+	}
     </style>
   </body>
 </html>

ioc_frontweb/js/app.js

@@ -1124,6 +1124,8 @@ $(function () {
     // renderAlarmNum();
     renderEventNum();
     createDeviceNumPieChart('deviceNumPie');
+	createDeviceNumLineChartday('deviceNumLineday');
+	createDeviceNumLineChartmouth('deviceNumLinemouth');
     renderLegendTypeNum('categoryAlarmNum');
     initVideo('videoHandler');
     getAlarmData();

ioc_frontweb/js/map.js

@@ -34,6 +34,18 @@ district.search('河北省', function (status, result) {
   //与态势标绘冲突 map.on('dblclick', () => {
   //   map.clearMap();
   // });
+  
+  //绑定radio点击事件
+    var radios = document.querySelectorAll("#map-styles input");
+	// var radios = document.getElementsByClassName(".input-item");
+    radios.forEach(function(ratio) {
+      ratio.onclick = setMapStyle;
+    });
+
+    function setMapStyle() {
+      var styleName = "amap://styles/" + this.value;
+      map.setMapStyle(styleName);
+    }
 
   //添加高度面
   map.add(object3Dlayer);
@@ -58,7 +70,7 @@ district.search('河北省', function (status, result) {
   }
 
   // 地图控件
-  map.plugin([ 'AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar'], function () {
+  map.plugin(['AMap.OverView', 'AMap.MapType', 'AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar'], function () {
     // map.addControl(
     //   new AMap.OverView({
     //     // isOpen: true,
@@ -69,6 +81,7 @@ district.search('河北省', function (status, result) {
     //     // })
     //   }),
     // );
+	map.addControl(new AMap.MapType({defaultType: 1 ,showroad: true }));
     map.addControl(new AMap.Scale({ visible: true }));
     map.addControl(new AMap.ToolBar({ position: 'LT', ruler: false, direction: false }));
   });

ioc_frontweb/js/utils.js

@@ -52,6 +52,7 @@ var apis = {
   // getEnterpriseDeviceDataByEnterpriseId: apiUrl + '/ioc/frontApi/getEnterpriseDeviceDataByEnterpriseId',
   // getDeviceNum: apiUrl + '/ioc/frontApi/getDeviceNum',
   getEventsNum: apiUrl + '/ioc/frontApi/getEventsNum',
+  getDeviceReportDatasNum: apiUrl + '/ioc/frontApi/getDeviceReportDatasNum',
   getSoldierTrackBySoldierId: apiUrl + '/ioc/frontApi/getSoldierTrackBySoldierId',
   getEventNum: apiUrl + '/ioc/frontApi/getEventNum',
   getLegendTypeNum: apiUrl + '/ioc/frontApi/getLegendTypeNum',
@@ -194,7 +195,6 @@ function createDeviceAlarmNumBarChart(options) {
     eleId: options.eleId,
     opts: {
       title: {
-        text: '应急资源统计',
         left: 'left',
         textStyle: {
           color: '#fff',
@@ -263,7 +263,6 @@ function createPieChart(options) {
     eleId: options.eleId,
     opts: {
       title: {
-        text: '安全生产感知设备统计',
         left: 'left',
         textStyle: {
           color: '#fff',
@@ -311,7 +310,7 @@ function createPieChart(options) {
         {
 		  name: 'Nightingale Chart',
 		  type: 'pie',
-		  radius: [20, 100],
+		  radius: [15, 80],
 		  center: ['50%', '50%'],
 		  roseType: 'area',
 		  itemStyle: {
@@ -336,6 +335,93 @@ function createPieChart(options) {
   createEchart(opts);
 }
 
+// 创建折线chart
+function createLineChartday(options) {
+  var opts = {
+    name: options.name,
+    eleId: options.eleId,
+    opts: {
+		grid:{
+			x:50,
+			y:10,
+			x2:20,
+			y2:60,
+			borderWidth:1,			
+			bottom:'40%'
+		},
+      xAxis: {
+          type: 'category',
+          data: options.xAxisData,
+		  axisLabel: {
+		    textStyle: {
+		      color: '#ddd',
+		    },
+			rotate: 60,
+		  },
+        },
+        yAxis: {
+          type: 'value',
+		  axisLabel: {
+		    textStyle: {
+		      color: '#ddd',
+			  fontSize:'14',
+		    },
+		  },
+        },
+        series: [
+          {
+            data: options.seriesData,
+            type: 'line'
+          }
+        ]
+    },
+  };
+  createEchart(opts);
+}
+// 创建折线chart
+function createLineChartmouth(options) {
+  var opts = {
+    name: options.name,
+    eleId: options.eleId,
+    opts: {
+		grid:{
+			x:50,
+			y:10,
+			x2:20,
+			y2:40,
+			borderWidth:1,
+			bottom:'40%'
+		},
+		xAxis: {
+          type: 'category',
+          data: options.xAxisData,
+		  axisLabel: {
+			textStyle: {
+			  color: '#ddd',
+			  fontSize:'14',
+			},
+			rotate: 60,
+		  },
+        },
+        yAxis: {
+          type: 'value',
+		  axisLabel: {
+		    textStyle: {
+		      color: '#ddd',
+		    },
+		  },
+        },
+        series: [
+          {
+            data: options.seriesData,
+            type: 'line'
+          }
+        ]
+    },
+  };
+  createEchart(opts);
+}
+
 // 创建 chart
 function createEchart(options) {
   // 基于准备好的dom，初始化echarts实例
@@ -778,6 +864,7 @@ function createDeviceNumPieChart(eleId) {
   var opts = {
     url: apis.getEventsNum,
     success: function (res) {
+		console.log("11111111111",res.data)
       if (res.code === 0) {
         var options = {
           eleId: eleId,
@@ -808,6 +895,80 @@ function createDeviceNumPieChart(eleId) {
   jQueryAjax(opts);
 }
 
+
+// 日期折线图接口数据
+function createDeviceNumLineChartday(eleId) {
+  if (!eleId) {
+    layLayer.alert('缺少参数');
+    return;
+  }
+  var opts = {
+    url: apis.getDeviceReportDatasNum,
+    success: function (res) {
+		console.log("2222222",res.data)
+      if (res.code === 0) {
+        var options = {
+          eleId: eleId,
+          name: 'deviceNumLineday',
+          legendData: [],
+		  xAxisData: [],
+          seriesData: [],
+          series: [],
+        };
+        for (var i in res.data.dayList) {
+          options.xAxisData.push(res.data.dayList[i].date);
+          options.seriesData.push(res.data.dayList[i].number);
+          // options.series.push({
+          //   name: res.data[i].key,
+          //   type: 'bar',
+          //   stack: 'all',
+          //   data: [res.data[i].value],
+          // });
+        }
+        createLineChartday(options);
+      }
+    },
+  };
+  jQueryAjax(opts);
+}
+
+// 月份折线图接口数据
+function createDeviceNumLineChartmouth(eleId) {
+  if (!eleId) {
+    layLayer.alert('缺少参数');
+    return;
+  }
+  var opts = {
+    url: apis.getDeviceReportDatasNum,
+    success: function (res) {
+		console.log("2222222",res.data)
+      if (res.code === 0) {
+        var options = {
+          eleId: eleId,
+          name: 'deviceNumLinemouth',
+          legendData: [],
+		  xAxisData: [],
+          seriesData: [],
+          series: [],
+        };
+        for (var i in res.data.monthList) {
+          options.xAxisData.push(res.data.monthList[i].date);
+          options.seriesData.push(res.data.monthList[i].number);
+          // options.series.push({
+          //   name: res.data[i].key,
+          //   type: 'bar',
+          //   stack: 'all',
+          //   data: [res.data[i].value],
+          // });
+        }
+        createLineChartmouth(options);
+      }
+    },
+  };
+  jQueryAjax(opts);
+}
+
+
 // 渲染单兵轨迹
 function renderSoldierTrack(self, id) {
   var soldierId = id ? id : $(self).data('soldierid') ? $(self).data('soldierid') : false;
@@ -852,7 +1013,6 @@ function renderLegendTypeNum(eleId) {
   var opts = {
     url: apis.getLegendTypeNum,
     success: function (res) {
-		console.log("2222222222222222222",res.data)
       if (res.code === 0) {
         var options = {
           eleId: eleId,
@@ -864,7 +1024,6 @@ function renderLegendTypeNum(eleId) {
         for (var i in res.data) {
           options.xAxisData.push(res.data[i].legendName);
           options.seriesData.push(res.data[i].num);
-		  // console.log("res.data[i].legendName",res.data[i].legendName)
           // options.series.push({
           //     name: res.data[i].key,
           //     type: 'bar',

ioc_frontweb/style/style.css

@@ -162,7 +162,7 @@ table.layui-table th {
 .amap-toolbar {
   /* left: 350px !important; */
   left: auto !important;
-  right: 510px !important;
+  right: 465px !important;
   top: 70px !important;
 }
 /* 报警数量 */
@@ -213,9 +213,12 @@ table.layui-table th {
 }
 .alarm .itemh2 {
   width: 100%;
-  height: 35px;
-  font-size: 20px;
-  color: #fff;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+  color: #03ffff;
+  padding-left: 10px;
+  background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
 }
 .alarm .itemTitle {
   color: #d8d8d8;
@@ -269,7 +272,7 @@ table.layui-table th {
 /* 图表样式 */
 .echarts,
 #alarmList {
-  width: 99%;
+  width: 445px;
   height: 240px;
   background-size: 100% 100%;
   position: relative;
@@ -324,24 +327,12 @@ iframe {
   clear: both;
   width: 100%;
 }
-.legenditemout{
-	width: 100%;
-	height: 30px;
-	color: #fff;
-	font-size: 20px;
-	margin-top: 10px;
-	margin-left: 10px;
-}
 .legendItem {
   margin: 3px 0;
-  /* border-radius: 3px; */
-  /* background-image: url('../images/one101.png'); */
   background-size: 100% 100%;
   overflow: hidden;
   border-bottom: 1px solid #33faf7;
   cursor: pointer;
-  /* padding: 10px 10px; */
-  /* margin-top: 10px; */
 }
 .legendItem:last-child{
   border-bottom: 0;
@@ -462,29 +453,28 @@ iframe {
   left: 828px;
   /* top: 7px; */
 }
-#bottomBg {
-  width: 100%;
-  height: 60px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background: url('../images/bbg.png') repeat-x;
-  z-index: 998;
-}
 
 #leftBar,
 #rightBar {
   width: 450px;
   height: 99.9%;
   position: absolute;
-  /* background-color: rgba(0, 0, 0, 0.2); */
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 2;
   background-size: 100%;
 }
-
+.msgWraplegend{
+	width: 100%;
+	height: 30px;
+	font-size: 18px;
+	line-height: 30px;
+	color: #03ffff;
+	padding-left: 10px;
+	margin: 10px 0 0 0px;
+	background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
+}
 #leftBar {
   left: 0;
   width: 450px;
@@ -496,7 +486,7 @@ iframe {
 	width: 100%;
 	height: auto;
 	right: auto;
-	margin-top: 5px;
+	margin-top: 10px;
 	margin-left: 5px;
 	padding-bottom: 10px;
 	background: rgba(21,34,60,0.8);
@@ -508,12 +498,19 @@ iframe {
 	border-image: -moz-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
 	border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
 }
-
-#deviceNumPie{
-	width: 436px;
-	height: 230px;
-	padding-left: 5px;
-	padding-top: 3px;
+.leftlegend{
+	width: 95%;
+	height: 30px;
+	font-size: 18px;
+	line-height: 30px;
+	color: #03ffff;
+	padding-left: 10px;
+	margin: 10px 0 0 10px;
+	background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
+}
+.deviceNumPieout{
+	width: 440px;
+	height: 240px;
 	margin-top: 80px;
 	-webkit-tap-highlight-color: transparent;
 	background: rgba(21,34,60,0.8);
@@ -526,6 +523,25 @@ iframe {
 	border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
 	user-select: none;
 }
+.deviceNumLineout{
+	width: 440px;
+	height: 280px;
+	margin-top: 10px;
+	-webkit-tap-highlight-color: transparent;
+	background: rgba(21,34,60,0.8);
+	border-right: 2px solid;
+	border-left: 2px solid;
+	border-top: 2px solid;
+	border-bottom: 2px solid;
+	border-image: -webkit-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
+	border-image: -moz-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
+	border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
+	user-select: none;
+}
+.deviceNumPie{
+	width: 436px;
+	height: 190px;
+}
 .right-alarm{
 	width: 100%;
 	height: 270px;
@@ -1060,30 +1076,67 @@ iframe {
   outline: none;
 }
 .mktit {
-  color: #fff;
-  font-size: 20px;
+  color: #03ffff;
+  font-size: 18px;
   text-align: left;
   margin-top: 10px;
-  width: 100%;
+  width: 95%;
+  height: 30px;
+  line-height: 30px;
   overflow: hidden;
   position: absolute;
   top: 0;
+  padding-left: 10px;
+  background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
+}
+#map-styles{
+	width: auto;
+	overflow: hidden;
+	position: fixed;
+	top: 143px;
+	right: 465px;
+	z-index: 999;
+}
+.mapstyleblock{
+	background: #fff;
+	width: 50px;
+	height: 50px;
+	text-align: center;
+	outline: none;
+	border-radius: 5px;
+	border: none;
+	cursor: pointer;
+}
+.mapstyleblock i{
+	font-size: 2em;
+	height: 38px;
+	line-height: 38px;
+	color: #2964cf;
+}
+.map-button-out{
+	width: 280px;
+	/* border-radius: 20px; */
+	background: #052145d1;
+	color: #ffffff;
+	float: left;
+	border: 1px solid #a7a5a5;
+	height: 40px;
+	line-height: 40px;
 }
-
 #btmSearch {
   width: auto;
   overflow: hidden;
   position: fixed;
-  top: 143px;
-  right: 512px;
+  top: 135px;
+  right: 465px;
   z-index: 999;
 }
 .clearBtn,
 .mulitVideoBtn,
 .mouseToolBtn {
   position: fixed;
-  top: 200px;
-  right: 512px;
+  top: 195px;
+  right: 465px;
   z-index: 999;
 }
 .mulitVideoBtn {
@@ -1198,6 +1251,20 @@ iframe {
   font-size: 2em;
   font-weight: bold;
 }
+.close {
+  height: 40px;
+  width: 40px;
+  display: block;
+  float: right;
+  text-align: center;
+  line-height: 40px;
+  cursor: pointer;
+}
+.close i {
+  color: #ffffff;
+  font-size: 2em;
+  font-weight: bold;
+}
 #btmSearch > * {
   display: none;
 }
@@ -1515,3 +1582,83 @@ div[lay-id='members'] thead tr:nth-child(1) {
 .iframeHandler .videoHandler {
   display: none;
 }
+
+/* 卫星地图切换 */
+.amap-maptype-wrap {
+    position: absolute;
+    top: 302px !important;
+    right: 452px !important;
+    width: 50px;
+    height: 50px;
+}
+.amap-maptype-con {
+    position: absolute;
+	top: 0;
+	right: 0;
+	width: 51px !important;
+	height: 51px !important;
+	/* background: #fff; */
+	border: solid 0px #ccc !important;
+	border-radius: 5px !important;
+	cursor: pointer;
+}
+.amap-maptype-win {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 50px !important;
+    height: 50px !important;
+    overflow: hidden;
+    background: #ccc;
+    border: solid 0px #ccc !important;
+	border-radius: 5px !important;
+}
+.amap-maptype-title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 50px !important;
+    height: 20px;
+    color: #333;
+    text-align: center;
+    font-size: 12px;
+    line-height: 20px;
+    background: #fff;
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+.amap-maptype-list {
+	width: 50px !important;
+	border-radius: 5px !important;
+	display: block;
+	height: 20px;
+    position: absolute;
+    top: 353px !important;
+    right: 451px !important;
+    width: 100px;
+    background: #fff;
+    border: solid 1px #ccc;
+    overflow: hidden;
+}
+.amap-maptype-list p {
+    width: 50px !important;
+    height: 20px;
+    margin: 0;
+    cursor: pointer;
+    background: #fff;
+}
+.amap-maptype-check {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    margin-left: 1px !important;
+}
+.amap-maptype-label {
+    display: inline-block;
+    width: 30px !important;
+    height: 15px;
+    color: #333;
+    font-size: 12px;
+    line-height: 15px;
+    margin-left: 3px !important;
+}
\ No newline at end of file