优化大屏加载速度和打包大小

src/api/index.js

@@ -69,12 +69,12 @@ export function login(data) {
     })
   }
   // 污染治理效果折线图
-  export function getIndexSummry(stationCode) {
+  export function getIndexSummry(data) {
     return requests({
-      url: '/zh-applet-admin/appmana/bigScreen/getIndexSummry?stationCode='+stationCode,
+      url: '/zh-applet-admin/appmana/bigScreen/getIndexSummry',
       method: 'post',
-      headers: {},
+      headers: { 'content-type': 'application/json; charset=UTF-8' },
-      stationCode
+      data: data? data : {}
     })
   }
 

src/assets/css/index.css

@@ -556,6 +556,49 @@
 	margin-left: 3%;
 	font-family: douyuFont;
 }
+.dataTypeEchart{
+	width: 53px;
+	height: 31px;
+	color: #fff;
+	margin-top: 15px;
+	line-height: 32px;
+	background: rgb(14 44 63);
+	border-radius: 0.4vw;
+	border: 1px solid #4b677c;
+	cursor: pointer;
+	float: left;
+	margin-left: 15px;
+	padding: 0px;
+	text-align: center;
+	z-index: 500;
+	position: absolute;
+}
+.dataTypeEchart2{
+	width: 66px;
+	height: 32px;
+	color: #fff;
+	margin-top: 15px;
+	line-height: 32px;
+	background: rgb(14 44 63);
+	border-radius: 0.4vw;
+	border: 1px solid #4b677c;
+	cursor: pointer;
+	float: left;
+	margin-left: 15px;
+	padding: 0px;
+	text-align: center;
+	z-index: 500;
+	position: absolute;
+	left: 13px;
+	top: 30px;
+	.el-input__inner{
+		height:30px;
+		background: #0e2e4f;
+	}
+	.el-input__icon{
+		height:36px;
+	}
+}
 .zywr_titrt{
 	width: 25%;
 	height: 3vw;
@@ -608,48 +651,17 @@
 }
 #chart1{height:12vw;}
 .scdlist{
-	width: 9vw;
+	width: 7vw;
 	height: 2vw;
+	margin-top: 0.4vw;
 	line-height: 2vw;
 	background: rgba(0,0,0,0.8);
 	border-radius: 0.4vw;
 	border: 1px solid #4b677c;
-	position: absolute;
+	/*position: absolute;*/
 	bottom: 16vw;
 	left: 24%;
-}
+	cursor: pointer;
-.scdlist2{
-	width: 9vw;
-	height: 2vw;
-	line-height: 2vw;
-	background: rgba(0,0,0,0.8);
-	border-radius: 0.4vw;
-	border: 1px solid #4b677c;
-	position: absolute;
-	bottom: 19vw;
-	left: 24%;
-}
-.scdlist3{
-	width: 9vw;
-	height: 2vw;
-	line-height: 2vw;
-	background: rgba(0,0,0,0.8);
-	border-radius: 0.4vw;
-	border: 1px solid #4b677c;
-	position: absolute;
-	bottom: 22vw;
-	left: 24%;
-}
-.scdlist4{
-	width: 9vw;
-	height: 2vw;
-	line-height: 2vw;
-	background: rgba(0,0,0,0.8);
-	border-radius: 0.4vw;
-	border: 1px solid #4b677c;
-	position: absolute;
-	bottom: 25vw;
-	left: 24%;
 }
 .scdlistpos{
 	width: 9vw;
@@ -697,13 +709,7 @@
 }
 .xcdimg{
 	width: 0.9vw;
-	/* margin-top: 0.4vw; */
+	margin-top: 0.4vw;
-	margin-left: 0.4vw;
-	margin-right: 0.4vw;
-}
-.xcd2img{
-	width: 0.7vw;
-	/* margin-top: 0.1vw; */
 	margin-left: 0.4vw;
 	margin-right: 0.4vw;
 }

src/pages/Home/index_map.vue11123

@@ -208,27 +208,27 @@
 <!--					</div>-->
 					<div class="scdlist2">
 						<img src="@/assets/image/xcd2.png" class="xcd2img" alt="">
-						<span class="scdlist_tit">畜禽养殖污染监测站</span>
+						<span class="scdlist_tit">对竹河监测站</span>
 					</div>
 					<div class="scdlist3">
 						<img src="@/assets/image/xcd3.png" class="xcdimg" alt="">
-						<span class="scdlist_tit">畜禽养殖污染监测站</span>
+						<span class="scdlist_tit">团百河监测站</span>
 					</div>
 				</div>
-				<div v-else>
+<!--				<div v-else>-->
-<!--					<div class="scdlistpos" @click="sbdscdBtn" style="cursor: pointer;">-->
+<!--&lt;!&ndash;					<div class="scdlistpos" @click="sbdscdBtn" style="cursor: pointer;">&ndash;&gt;-->
-<!--						<img src="@/assets/image/xcd.png" class="xcdimg" alt="">-->
+<!--&lt;!&ndash;						<img src="@/assets/image/xcd.png" class="xcdimg" alt="">&ndash;&gt;-->
-<!--						<span class="scdlist_tit">联网式太阳能杀虫灯</span>-->
+<!--&lt;!&ndash;						<span class="scdlist_tit">联网式太阳能杀虫灯</span>&ndash;&gt;-->
+<!--&lt;!&ndash;					</div>&ndash;&gt;-->
+<!--					<div class="scdlist2pos">-->
+<!--						<img src="@/assets/image/xcd2.png" class="xcd2img" alt="">-->
+<!--						<span class="scdlist_tit">畜禽养殖污染监测站</span>-->
 <!--					</div>-->
-					<div class="scdlist2pos">
+<!--					<div class="scdlist3pos">-->
-						<img src="@/assets/image/xcd2.png" class="xcd2img" alt="">
+<!--						<img src="@/assets/image/xcd3.png" class="xcdimg" alt="">-->
-						<span class="scdlist_tit">畜禽养殖污染监测站</span>
+<!--						<span class="scdlist_tit">畜禽养殖污染监测站</span>-->
-					</div>
+<!--					</div>-->
-					<div class="scdlist3pos">
+<!--				</div>-->
-						<img src="@/assets/image/xcd3.png" class="xcdimg" alt="">
-						<span class="scdlist_tit">畜禽养殖污染监测站</span>
-					</div>
-				</div>
 				<transition enter-active-class="animate__animated animate__backInUp" leave-active-class="animate__animated animate__backOutDown">
 					<template v-if="isShow">
 						<div class="zlxg_btm">
@@ -242,7 +242,7 @@
 								<span class="zywr_titshow">重要污染物治理效果</span>
 								<el-tabs v-model="activeName" type="card" @tab-click="handleClick" >
 									<el-tab-pane v-for="item in stationInfoList" :key="item.id" :label="item.stationName" :name="item.name" lazy >
-										<div id="myChart"  style="height:12vw;width:100%;" v-if="activeName == item.name"></div>
+										<div id="myChart2222"  style="height:12vw;width:100%;" v-if="activeName == item.name"></div>
 									</el-tab-pane>
 								</el-tabs>
 							<!-- <ul class="layui-tab-title" style="width:70%;" >
@@ -958,7 +958,7 @@ export default {
 	},
 	// 折线图数据
 	zxong(){
-		var myChartLine = this.$echarts.init(document.getElementById('myChart'));
+		var myChartLine = this.$echarts.init(document.getElementById('myChart2222'));
 		var optionLine = {
 		tooltip: {
 			trigger: 'axis'