syy

src/router/index.js

@@ -64,6 +64,16 @@ export const constantRoutesNew = [{
 		}
 	},
 	{
+		//哨兵
+		path: '/Sentinel',
+		name: 'Sentinel',
+		component: () => import('@/views/Sentinel'),
+		meta: {
+			// title: '水利云图'
+			title: '哨兵'
+		}
+	},
+	{
 		path: '/login',
 		component: () => import('@/views/system/login'),
 		hidden: true

src/views/Sentinel.vue

@@ -0,0 +1,674 @@
+<!--设备中心-->
+<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="value" placeholder="请选择">
+				<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="input1">
+			</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><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+				</div>
+			</dl>
+			<el-pagination
+					background
+					layout="prev, pager, next"
+					: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 '../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() {
+
+		},
+		mounted() {
+			// 初始化地图数据
+			this.getSuperMapUrl();
+			setTimeout(() => {
+				this.title = '四平市智慧哨兵监管平台'
+			}, 1000);
+			this.initChart();
+		},
+		data() {
+			return {
+				isVisible: false, // 初始时设置为false，不显示内容
+				input:'',
+				input1: '',
+				title:'四平市智慧哨兵监管平台',
+				options: [{
+					value: '选项1',
+					label: '华生1'
+				}, {
+					value: '选项2',
+					label: '华生2'
+				}, {
+					value: '选项3',
+					label: '华生3'
+				}, {
+					value: '选项4',
+					label: '华生4'
+				}, {
+					value: '选项5',
+					label: '华生5'
+				}],
+				value: ''
+			}
+		},
+		methods: {
+			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);
+			}
+		},
+	}
+</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>