visu_lifeline/src/views/SentryPage.vue

 <!--
 *@description: 哨兵基础页
 *@author: yh Fu
 *@date: 2025-08-29 11:16:01
 *@version: V1.0.5
 -->


 <template>
    <div class="visual-con hz_body">
		<div class="s_header">
			<div class="head_btn">
                <div @click="jumpTo('/SentryCockpit',0)" :class="routerIdx == 0 ? 'on' : ''">
                    <i>驾驶舱</i>
                </div>
                <div @click="jumpTo('/SenEquipmentCenter',1)" :class="routerIdx == 1 ? 'on' : ''">
                    <i>设备中心</i>
                </div>
            </div>
            <div class="header_tit"><i>{{title}}</i></div>
            <div class="head_btn">
                <div @click="jumpTo('/SenEventCenter',2)" :class="routerIdx == 2 ? 'on' : ''">
                    <i>事件中心</i>
                </div>
                <div @click="jumpTo('/useCenter',3)" :class="routerIdx == 3 ? 'on' : ''">
                    <i>用户中心</i>
                </div>
			</div>
			<div class="head_tx">
				<span><img src="../assets/images/sentinel/hz_tx.png" /></span>
			</div>
		</div>
		<div class="visual-body">
            <!--主体-->
            <router-view>

            </router-view>
            <!-- 哨兵详情弹窗 -->
            <div class="tk_div" v-show="isDetailVisible">
				<div class="tk1 tk_bor" style="width: 371px;height: 310px;">
					<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(detailInfo.deviceCode)">详情</a></p>
				</div>
				<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>
			</div>

			<!-- 地图 -->
			<supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview">
			</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 {
		selectByDeviceId,
        selectDailyThreshold
	} from "@/api/sentinel"
    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"
                    }
                ]
            }
        },
        data() {
			return {
				title: '四平市智慧哨兵监管平台',
                routerIdx:0,                    // 当前导航索引
                detailInfo:{},                  // 设备详情信息
                isVisible: false,               // 初始时设置为false，不显示内容
                isDetailVisible:false,          // 设备弹窗显隐flag
			}
		},
        created() {

        },
        mounted() {
            // 初始定向到驾驶舱
            this.$router.push({
                path:'/SentryCockpit'
            })
			// 初始化地图数据
			this.getSuperMapUrl();
			setTimeout(() => {
				this.title = '四平市智慧哨兵监管平台'
			}, 1000);

		},
        methods:{
            closeDetail(){
				this.isDetailVisible = false
				this.isVisible = false
			},
            preview(e){
				selectByDeviceId({id:e.id}).then(res => {
					this.detailInfo = res.data
					this.isDetailVisible = true
				})
			},
            toggleDisplay(deviceCode) {
				this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
				if(this.isVisible){
					selectDailyThreshold(deviceCode).then(res => {
						this.initChart(res.data)
					})
				}
			},
            jumpTo(path,idx){
                if(this.routerIdx == idx) return;
                // 重置哨兵详情态
                this.isDetailVisible = false
				this.isVisible = false
                // 地图清点
                this.$refs.supermap.clearM();
                this.routerIdx = idx
                this.$router.push({
                    path
                })
            },
            initChart(data){
				// 基于准备好的dom，初始化echarts实例
				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: "rgba(25,44,59,.4)",
					grid: {
						left: "5%",
						bottom: "10%",
						top: "18%",
						containLabel: true,
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "shadow",
						},
					},
					legend: {
						show: true,
						x: "center",
						y: 20,
						textStyle: {
							color: "#fff", // 图例文字颜色
							fontSize: 16,
						},
					},
					xAxis: {
						type: "category",
						boundaryGap: false,
						data: xdata,
						axisLabel: {
							show: true,
							textStyle: {
								color: "#fff",
							},
						},
						axisLine: {
							lineStyle: {
								color: "transparent",
								width: 2, //这里是为了突出显示加上的
							},
						},
					},
					"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: "(%vol)",
							nameTextStyle: {
								color: "#fff",
							},
							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);
			},
            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);
				});
			},
        }
    }
</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 div {
		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;
		transition: all 0.3s;
	}

	.s_header .head_btn div 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 div.on,
	.s_header .head_btn div:hover {
		background: url("../assets/images/sentinel/hz_btnbg_on.png") no-repeat center;
		box-shadow: none;
		filter: brightness(170%);
	}

	.con_left {
		position: absolute;
		z-index: 99;
		left: 30px;
		top: 100px;
		width: 320px;
		background: rgba(0, 0, 0, 0.55);
		padding: 0px 10px 20px 10px !important;
	}

	.con_right {
		position: absolute;
		z-index: 99;
		right: 30px;
		top: 100px;
		width: 320px;
		background: rgba(0, 0, 0, 0.55);
		padding: 0px 10px 20px 10px !important;

		.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_js {
		width: 400px !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;
		cursor: pointer;
		transition: all 0.3s;
	}

	.sp_list dd:hover {
		filter: brightness(170%) hue-rotate(-20deg);
	}

	.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);
	}

	.info-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20px !important;

		p {
			width: 50%;
			padding-left: 20px;
			background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
			background-size: 12px;
			font-size: 14px;
			color: #fff;
			line-height: 60px;
		}
	}

	.tk_bor h1 {
        display: flex;
        align-items: center;
		justify-content: space-between;
		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;
	}
    .tk_bor .icon{
		display: flex;
		align-items: center;
		float: right;

		img{
			margin-left: 10px;
		}
	}
	.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: 100%;
		height: 91%;
	}


	//图表设备分析
	.sb_fx {
		width: 100%;
		height: 300px;
	}

	.yh_fx {
		width: 100%;
		height: 260px;
	}

	.sj_fx {
		width: 100%;
		height: 280px;
	}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';
</style>