Add - 哨兵 弹窗详情完善

src/assets/styles/sb_body.css

@@ -253,7 +253,7 @@ width: 154px;
   position: relative;
   margin-right: 20px!important;
 }
-.tk1::after{
+/* .tk1::after{
   display: block;
   content: '';
   background: url("../../assets/images/sentinel/hz_down.png") no-repeat left;
@@ -263,7 +263,7 @@ width: 154px;
   bottom:-40px;
   left: 50%;
   transform: translateX(-50%);
-}
+} */
 .red_div .tk_bor{
   border: 3px solid rgba(255, 50, 50, 0.36);
   box-shadow: 0px 0px 24px rgba(255, 38, 0, 0.71);

src/views/SenEquipmentCenter.vue

@@ -63,18 +63,21 @@
 			<!-- <img src="../assets/images/sentinel/hz_qy.png" class="qydw1"/>
 			<img src="../assets/images/sentinel/hz_qy.png" class="qydw2"/>
 			<img src="../assets/images/sentinel/hz_qy.png" class="qydw3"/> -->
-			<div class="tk_div">
-				<div class="tk1 tk_bor" style="height: 72%;">
-					<h1>GGB19329<i>使用中</i></h1>
-					<p>设备名称：GGB19329</p>
-					<p>设备类型：燃气哨兵</p>
-					<p>设备建设时间：2005年1月15日</p>
-					<p>设备监测指标：震动、温度、可燃气体浓度</p>
-					<p>所在街道：紫气大路</p>
-					<p>安装位置：XXX大路于XXX大街交汇南100米</p>
+			<div class="tk_div" v-show="isDetailVisible">
+				<div class="tk1 tk_bor" style="width: 371px;height: 290px;">
+					<h1>
+						<span :title="detailInfo.deviceName || '--'" style="display: inline-block;overflow: hidden;width: 62%;text-overflow: ellipsis;">{{ detailInfo.deviceName || '--' }}</span>
+						<i class="el-icon el-icon-close" style="margin-left: 5%;cursor: pointer;" @click="closeDetail"></i>
+						<i>{{ detailInfo.workingStatus == '0' ? '在线' : '离线' }}</i>
+					</h1>
+					<p>设备名称：{{ detailInfo.deviceName || '--' }}</p>
+					<p>设备类型：{{ detailInfo.deviceTypeText || '--' }}</p>
+					<p>设备监测指标：{{ detailInfo.threshold || '--' }}</p>
+					<p>品牌：{{ detailInfo.brand || '--' }}</p>
+					<p>所在街道：{{ detailInfo.address || '--' }}</p>
 					<p>历史数值：<a  @click="toggleDisplay">详情</a></p>
 				</div>
-				<div class="tk2 tk_bor"  v-if="isVisible" style="width: 54%;">
+				<div class="tk2 tk_bor"  v-if="isVisible" style="position: absolute;width: 466px;height: 455px;left: 98%;">
 					<h1>哨兵详情</h1>
 					<div id="sbxqChart" ref="MyChart"></div>
 				</div>
@@ -83,7 +86,7 @@
 
 
 			<!-- 地图 -->
-			<supermap ref="supermap" style="width: 100%;height: 100vh;">
+			<supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview">
 			</supermap>
 		</div>
 	</div>
@@ -139,20 +142,6 @@
 					this.options = brandoptions
 				}
 			})
-			selectByDeviceId({id:'05cb0481a4e441028f1a219c961176c8'}).then(res => {
-				// 品牌：brand
-				// 工作状态：workingStatusText
-				// 所属区域：address
-				// 设备名称：deviceName
-				// 设备类型：deviceTypeText
-				this.deviceDetailInfo = {
-					deviceName:res.data.deviceName,
-				}
-
-			})
-			selectDailyThreshold().then(res => {
-				
-			})
 		},
 		mounted() {
 			// 初始化地图数据
@@ -160,7 +149,6 @@
 			setTimeout(() => {
 				this.title = '四平市智慧哨兵监管平台'
 			}, 1000);
-			this.initChart();
 		},
 		data() {
 			return {
@@ -177,10 +165,16 @@
         			pageSize: 10,
 				},								// 设备列表条件检索
 				options: [],
-				value: ''
+				value: '',
+				isDetailVisible:false,          // 设备弹窗显隐flag
+				detailInfo:{},                  // 设备详情信息
 			}
 		},
 		methods: {
+			closeDetail(){
+				this.isDetailVisible = false
+				this.isVisible = false
+			},
 			dropLocation(lat, lng) {
 				this.$refs.supermap.dropLocation(lat*1, lng*1)
 			},
@@ -196,13 +190,16 @@
 					// hz_qy
 					if (res.rows != null && res.rows.length > 0) {
 						for (let i = 0; i < res.rows.length; i++) {
+							console.log('设备信息',res.rows[i])
 							let markersMap = {
 							lng: 124.59,
 							lat: 43.02,
 							icon: "hzqy",
 							bindPopupHtml: "",
 							click: "preview",
-							parameter: "",
+							parameter: {
+								id:res.rows[i].id || '',
+							},
 							keepBindPopup: false,
 							isAggregation: false,
 							};
@@ -223,6 +220,13 @@
 					}
 				})
 			},
+			preview(e){
+				selectByDeviceId({id:e.id}).then(res => {
+					this.detailInfo = res.data
+					console.log('this.detailInfo',this.detailInfo)
+					this.isDetailVisible = true
+				})
+			},
 			brandHasChanged(e){
 				this.getListDeviceAll()
 			},
@@ -266,43 +270,22 @@
 			},
 			toggleDisplay() {
 				this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
+				if(this.isVisible){
+					selectDailyThreshold().then(res => {
+						this.initChart(res.data)
+					})
+				}
 			},
-			initChart(){
+			initChart(data){
 				// 基于准备好的dom，初始化echarts实例
-				const myChart = echarts.init(this.$refs.myChart)
-				let xdata = [
-					"B4",
-					"B3",
-					"C4",
-					"A1",
-					"E2",
-					"C1",
-					"D1",
-					"A3",
-					"E3",
-					"A2",
-					"D2",
-					"C2",
-					"D3",
-					"D4",
-					"B2",
-					"A4",
-					"C3",
-					"E1",
-					"B1",
-				]; //x轴
-				let dataArr = [
-					4000, 4200, 3800, 3500, 4100, 4150, 4800, 4000, 3200, 3600, 3200, 3100, 4700,
-					3500, 4600, 4500, 3900, 4700, 3400,
-				]; //value
-				let dashedArr = [
-					4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000,
-					4000, 4000, 4000, 4000, 4000, 4000,
-				];
-				let titleName = "预期值";
-				let titleNames = "各馆实际承载力";
+				const myChart = echarts.init(document.getElementById('sbxqChart'))
+				let xdata = data.time //x轴
+				let dataArr = data.value //value
+				let dashedArr = data.threshold
+				let titleName = "阈值";
+				let titleNames = "实际值";
 				let option = {
-					backgroundColor: "#11183c",
+					backgroundColor: "rgba(25,44,59,.4)",
 					grid: {
 						left: "5%",
 						bottom: "10%",
@@ -318,7 +301,7 @@
 					legend: {
 						show: true,
 						x: "center",
-						y: 60,
+						y: 20,
 						textStyle: {
 							color: "#fff", // 图例文字颜色
 							fontSize: 16,
@@ -341,15 +324,41 @@
 							},
 						},
 					},
+					"dataZoom": [
+						{
+							"show": true,
+							"height": 12,
+							"xAxisIndex": [
+							0
+							],
+							"bottom": "8%",
+							"start": 0,
+							"end": 50,
+							"handleIcon": "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+							"handleSize": "110%",
+							"handleStyle": {
+							"color": "#d3dee5"
+							},
+							"textStyle": {
+							"color": "#fff"
+							},
+							"borderColor": "#90979c"
+						},
+						{
+							"type": "inside",
+							"show": true,
+							"height": 15,
+							"start": 1,
+							"end": 35
+						}
+					],
 					yAxis: [
 						{
 							type: "value",
-							name: "立方米",
+							name: "(%vol)",
 							nameTextStyle: {
 								color: "#fff",
 							},
-							min: 0,
-							max: 6000,
 							axisLabel: {
 								formatter: "{value}",
 								textStyle: {
@@ -481,8 +490,8 @@
 	}
 
 	.tk_div{
-		width: 45%;
-		height: 50%;
+		width: 21%;
+		height: 36%;
 		position: absolute;
 		top: 24%;
 		left: 32.2%;
@@ -562,8 +571,8 @@
 	// 	transform: translateX(-50%);
 	//  }
 	#sbxqChart{
-		width: 250px;
-		height: 200px;
+		width: 100%;
+		height: 91%;
 	}