visu_lifeline/src/views/Sentinel.vue

<!--设备中心-->
<template>
	<div class="visual-con hz_body">
		<div class="s_header">
			<div class="head_btn">
				<a><i>驾驶舱</i></a>
				<a class="on"><i>设备中心</i></a>
			</div>
			<div class="header_tit"><i>{{title}}</i></div>
			<div class="head_btn">
				<a><i>事件中心</i></a>
				<a><i>用户中心</i></a>
			</div>
			<div class="head_tx">
				<span><img src="../assets/images/sentinel/hz_tx.png"/></span>
			</div>
		</div>
		<!--主体-->
		<div class="con_left">
			<div class="list_tit">设备列表</div>
			<el-select v-model="listParams.brand" placeholder="请选择" @change="brandHasChanged" clearable>
				<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
				</el-option>
			</el-select>
			<el-input
					placeholder="请输入内容"
					suffix-icon="el-icon-search"
					v-model="listParams.deviceName">
			</el-input>
			<dl class="sp_list">
				<dt>
					<span class="dt1">序号</span>
					<span class="dt2">设备名称</span>
					<span class="dt3">定位</span>
				</dt>
				<div class="hei_scroll hei56">
					<dd v-for="(e,idx) in deviceListSearch" :key="idx">
						<span class="dt1">{{ idx + 1 }}</span>
						<span class="dt2">{{ e.deviceName }}</span>
						<span class="dt3">
							<img
								style="cursor: pointer;"
								@click="dropLocation(e.latitude,e.longitude)"
								src="../assets/images/sentinel/hz_list_d.png"
							/>
						</span>
					</dd>
				</div>
			</dl>
			<el-pagination
					background
					layout="prev, pager, next"
					:current-page.sync="listParams.pageNum"
					@current-change="pageNumHasChanged"
					:total="100">
			</el-pagination>
		</div>
		<div class="visual-body">
			<!--弹框演示模板 开始-->
			<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">
					<h1>GGB19329<i>使用中</i></h1>
					<p>设备名称：GGB19329</p>
					<p>设备类型：燃气哨兵</p>
					<p>设备建设时间：2005年1月15日</p>
					<p>设备监测指标：震动、温度、可燃气体浓度</p>
					<p>所在街道：紫气大路</p>
					<p>安装位置：XXX大路于XXX大街交汇南100米</p>
					<p>历史数值：<a  @click="toggleDisplay">详情</a></p>
				</div>
				<div class="tk2 tk_bor"  v-if="isVisible">
					<h1>哨兵详情</h1>
					<div id="sbxqChart" ref="MyChart"></div>
				</div>
			</div>
			<!--弹框演示模板 结束-->


			<!-- 地图 -->
			<supermap ref="supermap" style="width: 100%;height: 100vh;">
			</supermap>
		</div>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	import supermap from '@/components/supermap-2.5d' //超图
	import {getUserProfile} from "@/api/system/user";
	import {
		listDeviceAll,
		selectBrandList,
		selectByDeviceId,
		selectDailyThreshold
	} from "@/api/sentinel"

	import '../assets/styles/hz_body.css';

	import {
		selectConfigKey
	} from "@/api/system/config";
	// import * as echarts from 'echarts'
	let echarts = require("echarts");
	export default {
		name:'MyChart',
		components: {
			supermap,
		},
		metaInfo () {
			return {
				title:'四平市智慧哨兵监管平台',
				meta:[{
					charset: "utf-8"
				},
					{
						name: "viewport",
						content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
					}]
			}
		},
		created() {
			this.getListDeviceAll()
			// 查询品牌
			selectBrandList().then(res => {
				if(res.data){
					let brandoptions = []
					res.data.forEach(e => {
						brandoptions.push({
							value:e,
							label:e
						})
					})
					this.options = brandoptions
				}
			})
			selectByDeviceId({id:'05cb0481a4e441028f1a219c961176c8'}).then(res => {
				// 品牌：brand
				// 工作状态：workingStatusText
				// 所属区域：address
				// 设备名称：deviceName
				// 设备类型：deviceTypeText

			})
			selectDailyThreshold().then(res => {
			})
		},
		mounted() {
			// 初始化地图数据
			this.getSuperMapUrl();
			setTimeout(() => {
				this.title = '四平市智慧哨兵监管平台'
			}, 1000);
			this.initChart();
		},
		data() {
			return {
				isVisible: false, // 初始时设置为false，不显示内容
				input:'',
				input1: '',
				title:'四平市智慧哨兵监管平台',
				deviceList:[],       		 	// 设备列表
				deviceListSearch:[],        	// 设备列表检索
				listParams:{
					brand:'',
					deviceName:'',
					pageNum: 1,
        			pageSize: 10,
				},								// 设备列表条件检索
				options: [],
				value: ''
			}
		},
		methods: {
			dropLocation(lat, lng) {
				this.$refs.supermap.dropLocation(lat*1, lng*1)
			},
			pageNumHasChanged(e){
				this.getListDeviceAll()
			},
			// 查询设备列表
			getListDeviceAll(){
				listDeviceAll(this.listParams).then(res => {
					this.deviceList = res.rows
					this.deviceListSearch = res.rows
					let deviceMarkersList = []
					// hz_qy
					if (res.rows != null && res.rows.length > 0) {
						for (let i = 0; i < res.rows.length; i++) {
							let markersMap = {
							lng: 124.59,
							lat: 43.02,
							icon: "hzqy",
							bindPopupHtml: "",
							click: "preview",
							parameter: "",
							keepBindPopup: false,
							isAggregation: false,
							};
							markersMap.lng = res.rows[i].longitude*1;
							markersMap.lat = res.rows[i].latitude*1;
							markersMap.radius = res.rows[i].cameraRadius || '';
							deviceMarkersList.push(markersMap);
						}
						setTimeout(() => {
							this.$refs.supermap.clearM();
							this.$refs.supermap.clearMRadius();
							this.$refs.supermap.setMarkersRadius(deviceMarkersList);
						}, 1000);
					} else {
						setTimeout(() => {
							this.$refs.supermap.clearM();
							this.$refs.supermap.clearMRadius();
						}, 1000);
					}
				})
			},
			brandHasChanged(e){
				this.getListDeviceAll()
			},
			/**
			 * desc： 设备列表条件检索
			 * @param {string} [val=''] 		// 设备名称
			 * @param {string} [brandName=''] 	// 品牌
			 * */
			searchOptionHasChanged(val='',brandName=''){
				this.deviceListSearch = [];
				// 名称检索
				for (let i in this.deviceList) {
					if (this.deviceList[i].deviceName.indexOf(val) != -1) {
						this.deviceListSearch.push(this.deviceList[i]);
					}
				}
				// 品牌检索
				if(brandName){
					this.deviceListSearch = this.deviceListSearch.filter(v => v.brand == brandName)
				}
			},
			getSuperMapUrl(){
				getUserProfile().then(response => {
					let mapDeptId=response.mapDeptId
					let num = 0;
					if (mapDeptId == "365") {
						num = 0;
					} else if (mapDeptId == "369") {
						num = 1;
					} else if (mapDeptId == "371") {
						num = 2;
					} else if (mapDeptId == "373") {
						num = 3;
					} else if (mapDeptId == "372") {
						num = 4;
					} else if (mapDeptId == "370") {
						num = 5;
					}
					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
				});
			},
			toggleDisplay() {
				this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
			},
			initChart(){
				// 基于准备好的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 = "各馆实际承载力";
				let option = {
					backgroundColor: "#11183c",
					grid: {
						left: "5%",
						bottom: "10%",
						top: "18%",
						containLabel: true,
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "shadow",
						},
					},
					legend: {
						show: true,
						x: "center",
						y: 60,
						textStyle: {
							color: "#fff", // 图例文字颜色
							fontSize: 16,
						},
					},
					xAxis: {
						type: "category",
						boundaryGap: false,
						data: xdata,
						axisLabel: {
							show: true,
							textStyle: {
								color: "#fff",
							},
						},
						axisLine: {
							lineStyle: {
								color: "transparent",
								width: 2, //这里是为了突出显示加上的
							},
						},
					},
					yAxis: [
						{
							type: "value",
							name: "立方米",
							nameTextStyle: {
								color: "#fff",
							},
							min: 0,
							max: 6000,
							axisLabel: {
								formatter: "{value}",
								textStyle: {
									color: "#fff",
								},
							},
							axisLine: {
								lineStyle: {
									color: "transparent",
									width: 2, //这里是为了突出显示加上的
								},
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: "#11366e",
								},
							},
						},
					],
					series: [
						{
							name: titleName,
							type: "line",
							smooth: true,
							symbol: "none",
							itemStyle: {
								normal: {
									lineStyle: {
										type: "dashed",
									},
									color: "#01F699", //拐点的颜色
									borderColor: "#01F699", //拐点边框的颜色
								},
							},
							data: dashedArr,
						},
						{
							name: titleNames,
							type: "line",
							stack: "总量",
							smooth: true, //平滑曲线显示
							symbol: "circle", //标记的图形为实心圆
							symbolSize: 8,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
										{
											offset: 0,
											color: "rgba(3,191,255,1)",
										},
										{
											offset: 1,
											color: "rgba(18,93,236,1)",
										},
									]),
									areaStyle: {
										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
											{
												offset: 0,
												color: "rgba(3,191,255,.3)",
											},
											{
												offset: 1,
												color: "rgba(18,93,236,.3)",
											},
										]),
									},
								},
							},
							data: dataArr,
						},
					],
				};
				myChart.setOption(option);
			}
		},
		watch:{
			['listParams.deviceName'](){
				this.getListDeviceAll()
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss">
	.visual-con .el-input__inner {
		border: 1px solid #3bb8a4;
		background-color: rgba(20, 107, 115, 0.3);
		color: #fff;
	}


	.hz_body{
		position: relative;
	}
	i,b,u{
		font-style: normal;
		text-decoration: none;
	}
	/*//头部通用*/
	.s_header{
		width: 100%;
		height: 110px;
		position: absolute;
		top:0px;
		left: 0px;
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background: url("../assets/images/sentinel/hz_header.png") no-repeat center;
		background-size: contain;
	}
	.s_header .header_tit{
		display: block;
		width: 1000px;
		height: 109px;
		line-height: 65px;
		text-align: center;


	}
	.s_header .header_tit i{
		font-family: 'ysbth';
		font-size: 40px;
		/*text-shadow: 3px 5.196px 0px rgba(17, 20, 22, 0.22);*/
		letter-spacing: 4px;
		background: linear-gradient(180deg, #fff 0%, #b0d3f1 100%);
		-webkit-background-clip: text;
		color: transparent;
		mix-blend-mode: screen;
		/*text-shadow: 3px 5px 0px rgba(17, 20, 22, 0.22);*/
		display: block;
		text-align: center;
	}
	.s_header .head_btn{
		width: 316px;
	}
	.s_header .head_tx{
		display: block;
		position: absolute;
		right:20px;
	}

	.s_header .head_btn a{
		display: inline-block;
		background: url("../assets/images/sentinel/hz_btnbg.png") no-repeat center;
		width: 138px;
		margin: 0px 10px;
		height: 29px;
		line-height: 29px;
		text-align: center;
	}
	.s_header .head_btn a i{
		display: block;
		font-family: 'ysbth';
		font-size: 20px;
		background: linear-gradient(180deg, #95dded 60%, #fff 40%);
		-webkit-background-clip: text;
		color: transparent;
		mix-blend-mode: screen;
		/*text-shadow: 3px 5px 0px rgba(17, 20, 22, 0.22);*/
		display: block;
		text-align: center;
	}
	.s_header .head_btn a.on{
		background: url("../assets/images/sentinel/hz_btnbg_on.png") no-repeat center;
		box-shadow: none;
	}
	.con_left{
		position: absolute;
		z-index: 99;
		left: 30px;
		top:100px;
		width: 320px;
		background: rgba(0,0,0,0.25);
		padding: 0px 10px 20px 10px!important;
	}
	.con_left .list_tit{
		background: url("../assets/images/sentinel/hz_list_tit.png") no-repeat center;
		background-size: 100% 100%;
		height: 44px;
		line-height: 44px;
		padding-left: 20px;
		font-family: 'ysbth';
		font-size: 20px;
		color: #fff;
		margin-bottom: 10px;
	}
	.con_left .el-select{
		width: 100%;
		margin-bottom: 8px;
	}
	.el-select-dropdown {
		border: 1px solid #3bb7a3;
		background-color: #0c3038;
	}
	.el-select-dropdown__item {
		color: #b0d3f1;
	}
	.el-select-dropdown__item.hover,.con_left  .el-select-dropdown__item:hover {
		background-color: #0a4c5c;
	}
	.el-select-dropdown__item.selected {
		color: #3bb7a3;
	}
	.el-input__inner {
		color: #b0d3f1;
		height: 35px;
		line-height: 35px;
	}
	.el-input__icon{
		line-height: 35px;
		color: #5bf9e0;
	}
	.sp_list{
		margin-top: 10px!important;
	}
	.sp_list dt{
		background: linear-gradient(to right, rgba(40, 115, 124, 0.68), rgba(38, 75, 80, 0.68));
		height: 38px;
		line-height: 38px;
		margin-bottom: 5px;
	}
	.sp_list dd{
		display: flex;
		flex-direction: row;
	}
	.sp_list dd:nth-child(odd){
		background: linear-gradient(to right, rgba(40, 115, 124, 0.68), rgba(38, 75, 80, 0.68));
		height: 38px;
		line-height: 38px;
		margin-bottom: 5px;
	}
	.sp_list dd:nth-child(even){
		background: linear-gradient(to right, rgba(40, 115, 124, 0.38), rgba(38, 75, 80, 0.38));
		height: 38px;
		line-height: 38px;
		margin-bottom: 5px;
	}
	.sp_list span{
		display: inline-block;
		text-align: left;
		font-size: 14px;
		color: #acdfe5;
		height: 38px;
		line-height: 38px;
	}
	.sp_list span.dt1{
		width: 60px;
		background: url("../assets/images/sentinel/hz_list_j.png") no-repeat left;
		padding-left: 15px;
	}
	.sp_list span.dt2{
		width: 200px;
		text-align: left;
	}
	.sp_list span.dt3{
		width: 40px;
		text-align: center;
		line-height: 38px;
		position: relative;
	}
	.sp_list span.dt3 img{
		display: inline-block;
		position: absolute;
		top:10px;
		left: 11px;
	}
	.el-pagination{
		width: 100%;
		margin-top: 20px!important;
	}
	.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
		margin: 0 2px;
		background-color:unset!important;
		color: #47c5b0;
		min-width: 26px;
	}
	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #47c5b0!important;
		color: #FFF;
	}
	.el-pagination.is-background .el-pager li:not(.disabled):hover {
		background-color: #47c5b0!important;
		color: #FFF;
	}
	.el-pager li:hover {
		background-color: #47c5b0!important;
		color: #FFF;
	}
	.hei_scroll{
		overflow-y: scroll;
	}
	.hei_scroll::-webkit-scrollbar{
		width: 0px;
		height: 0px;
	}
	.hei56{
		height: 56vh;
	}
	.qydw1{
		position: absolute;
		top: 60%;
		left: 40%;
		display: block;
		width:54px ;
		height: 77px;
	}
	.qydw2{
		position: absolute;
		top: 50%;
		left: 70%;
		display: block;
		width:54px ;
		height: 77px;
	}
	.qydw3{
		position: absolute;
		top: 40%;
		left: 80%;
		display: block;
		width:54px ;
		height: 77px;
	}

	.tk_div{
		position: absolute;
		top: 24%;
		left: 32.2%;
		z-index: 98;
		display: flex;
		flex-direction: row;
	}
	.tk_bor{
		padding: 15px!important;
		border: 3px solid #28727e;
		box-shadow: 0px 0px 24px #28727e;
		background: rgba(0,0,0,0.39);
	}
	.tk_bor h1{
		padding-left: 20px;
		background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
		font-size: 18px;
		color: #e0e5fa;
		font-weight: bold;
		height: 38px;
		line-height: 38px;
	}
	.tk_bor h1 i{
		display: inline-block;
		float: right;
		background: #3bad96;
		padding: 0px 10px;
		color: #fff;
		font-size: 16px;
		height: 30px;
		line-height: 30px;
		position: relative;
		border-radius: 4px;
	}
	.tk_bor h1 i::after{
		display: block;
		content: '';
		border-bottom: 9px solid transparent;
		border-right: 9px solid #3bad96;
		border-top: 9px solid transparent;
		position: absolute;
		left:-8px;
		top:8px;
	}
	.tk_bor p{
		padding-left: 20px;
		background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
		background-size: 12px;
		font-size: 16px;
		color: #fff;
		line-height: 35px;
	}
	.tk_bor p a{
		color: #6bf5f2;
		text-underline-offset: 0.4em;
		text-decoration: underline;
	}
	.tk_bor p a:hover{
		color: #6bf5f2;
		text-underline-offset: 0.4em;
		text-decoration: underline;
		cursor: pointer;
	}
	.tk1{
		position: relative;
		margin-right: 20px!important;
	}
	.tk1::after{
		display: block;
		content: '';
		background: url("../assets/images/sentinel/hz_down.png") no-repeat left;
		width: 46px;
		height: 40px;
		position: absolute;
		bottom:-40px;
		left: 50%;
		transform: translateX(-50%);
	}
	#sbxqChart{
		width: 250px;
		height: 200px;
	}



</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';
</style>