visu_lifeline/src/views/SenEventCenter.vue

<!--设备中心-->
<template>
	<div class="visual-con hz_body">
		<!--主体-->
		<div class="spsb_down">
			<el-date-picker
					v-model="value"
					type="date"
					placeholder="选择日期">
			</el-date-picker>
		</div>
		<div class="con_left">
			<div class="list_tit">预警中心</div>
			<div class="yjzx_div">
				<div class="yjzx_k1">
					<img src="../assets/images/sentinel/sb_icon1.png"/>
					<span>总计</span>
					<b>235</b>
				</div>
				<div class="yjzx_k2">
					<p><span>震动预警</span><b>60</b></p>
					<p><span>水位预警</span><b>70</b></p>
					<p><span>位移预警</span><b>45</b></p>
					<p><span>泄露预警</span><b>60</b></p>
				</div>
			</div>
			<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 hei30">
					<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">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">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">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="con_right">
			<div class="list_tit list_tit2">应急中心<i>发起应急事件</i></div>
			<el-input
					placeholder="请输入事件名称"
					suffix-icon="el-icon-search"
					v-model="input1">
			</el-input>
			<dl class="sp_list yjsj_list">
				<dt><span class="dt1">序号</span><span class="dt2">应急事件名称</span><span class="dt3">发生时间</span></dt>
				<div class="hei_scroll hei64">
					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</span></dd>
					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3">2025/02/06 11:45:11</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_qy4.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 red_div">
				<div class="tk1 tk_bor">
					<h1>事件详情<i>使用中</i></h1>
					<p>事件名称：超级大姐发生燃气事件</p>
					<p>上报设备：燃气哨兵</p>
					<p>上报时间：2025/02/06 11:45:11</p>
					<p>事件类型：燃气事件</p>
					<p>所在街道：紫气大路</p>
					<p>事件坐标：43°43′5% 125°19</p>
					<p>所属部门：燃气</p>
					<p>处理流程：<a  @click="dialogVisible = true">详情</a></p>
				</div>
				<div class="tk2 tk_bor"  v-if="isVisible">
					<h1>哨兵详情</h1>
					<div id="sbxqChart" ref="MyChart"></div>
				</div>
			</div>
			<!--弹框演示模板 结束-->

            <!--弹框 开始-->
            <el-dialog
                    title="事件处理流程"
                    :visible.sync="dialogVisible"
                    width="70%"
                    :before-close="handleClose">

                <div class="sjlc_con">
                    <div class="sjlc_div">
                        <i><img src="../assets/images/sentinel/sb_icon2.png" /></i>
                        <h4>事件上报</h4>
                        <p>事件名称：超级大街燃气爆炸</p>
                        <p>上报时间：2025/02/06 11:56:25</p>
                        <p>上报设备：GBD15</p>
                        <p>预警类型：燃气爆炸</p>
                        <p>事件坐标：43°43′5% 125°19</p>
                    </div>
                    <u></u>
                    <div class="sjlc_div">
                        <i><img src="../assets/images/sentinel/sb_icon3.png" /></i>
                        <h4>事件研判</h4>
                        <p>事件名称：超级大街燃气爆炸</p>
                        <p>上报时间：2025/02/06 11:56:25</p>
                        <p>上报设备：GBD15</p>
                        <p>预警类型：燃气爆炸</p>
                        <p>事件坐标：43°43′5% 125°19</p>
                    </div>
                    <u class="date"></u>
                    <div class="sjlc_div date_div">
                        <i><img src="../assets/images/sentinel/sb_icon4.png" /></i>
                        <h4>事件派发</h4>
                        <p>事件名称：超级大街燃气爆炸</p>
                        <p>上报时间：2025/02/06 11:56:25</p>
                        <p>上报设备：GBD15</p>
                        <p>预警类型：燃气爆炸</p>
                        <p>事件坐标：43°43′5% 125°19</p>
                    </div>
                    <u></u>
                    <div class="sjlc_div">
                        <i><img src="../assets/images/sentinel/sb_icon5.png" /></i>
                        <h4>事件处置</h4>
                        <p>事件名称：超级大街燃气爆炸</p>
                        <p>上报时间：2025/02/06 11:56:25</p>
                        <p>上报设备：GBD15</p>
                        <p>预警类型：燃气爆炸</p>
                        <p>事件坐标：43°43′5% 125°19</p>
                    </div>
                    <u></u>
                    <div class="sjlc_div">
                        <i><img src="../assets/images/sentinel/sb_icon6.png" /></i>
                        <h4>已经办结</h4>
                        <p>事件名称：超级大街燃气爆炸</p>
                        <p>上报时间：2025/02/06 11:56:25</p>
                        <p>上报设备：GBD15</p>
                        <p>预警类型：燃气爆炸</p>
                        <p>事件坐标：43°43′5% 125°19</p>
                    </div>
                </div>
				<div class="sjcl_media_con">
					<div class="sjcl_media">
						<img src="../assets/images/sentinel/sb_img1.png"/>
					</div>
					<div class="sjcl_img">
						<img src="../assets/images/sentinel/sb_img2.png"/>
						<img src="../assets/images/sentinel/sb_img2.png"/>
						<img src="../assets/images/sentinel/sb_img2.png"/>
						<img src="../assets/images/sentinel/sb_img2.png"/>
					</div>
				</div>

            </el-dialog>
            <!--弹框 结束-->

			<!-- 地图 -->
			<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/sb_body.css';

	import {
		selectConfigKey
	} from "@/api/system/config";
	// import * as echarts from 'echarts'
	let echarts = require("echarts");
	export default {
		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);
		},
		data() {
			return {
				title:'四平市智慧哨兵监管平台',
                dialogVisible: false,
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				value: '',
				input:'',
				input1: '',
				title:'四平市智慧哨兵监管平台',
				options: [{
					value: '选项1',
					label: '华生1'
				}, {
					value: '选项2',
					label: '华生2'
				}, {
					value: '选项3',
					label: '华生3'
				}, {
					value: '选项4',
					label: '华生4'
				}, {
					value: '选项5',
					label: '华生5'
				}],

			}
		},
		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);
				});
			},
// 弹框开启
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        }
	}
</script>
<style rel="stylesheet/scss" lang="scss">
	.spsb_down{
		position: absolute;
		top:52px;
		left: 30px;
		z-index: 999;
		.el-input__inner{
			background: linear-gradient(to right, rgb(37,50,54) 0%, rgb(43,140,152) 100%);
			border: 1px solid;
			border-image: linear-gradient(to top, #aafae0, #59f2cc, #4ab2ec) 1;

		}
	}
	.yjzx_div{
		display: flex;
		flex-direction: row;
		text-align: center;
		margin: 15px 0px!important;
		.yjzx_k1{
			background: url("../assets/images/sentinel/sb_btnbg.png") no-repeat center;
			background-size: 100% 100%;
			width: 127px;
			height: 211px;
			img{
				display: block;
				margin: 55px auto 20px auto;
			}

		}
		.yjzx_k2{
			height: 211px;
			width: 260px;
			p{
				display: inline-block;
				background: url("../assets/images/sentinel/sb_btnbg2.png") no-repeat center;
				background-size: 100% 100%;
				width: 88px;
				height: 101px;
			}
			:nth-child(1){
				margin-right: 7px;
				margin-bottom: 7px;
			}
			:nth-child(3){
				margin-right: 7px;
			}
			span{
				padding-top: 20px;
			}
			b{
				padding-top: 10px;
			}
		}
		span{
			display: block;
			font-size: 16px;
			color: #ceebee;
			height: 30px;
			line-height: 30px;
		}
		b{
			display: block;
			font-size: 24px;
			font-family: ysbth;
			color: #fff;
		}
	}
    .qydw1{
        position: absolute;
        top: 63.5%;
        left: 38.2%;
        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;
    }
    .sjlc_con{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .sjlc_div{
            background: rgba(50, 161, 175, 0.2);
            border: 1px solid #1e6a78;
            width: 250px;
            height: 300px;
            padding: 25px;
            i{
                display: block;
                width: 50px;
                height: 50px;
                background:linear-gradient(to bottom,rgba(51,140,161,1),rgba(42,104,135,0.7));
                border-radius: 50%;
                margin: 5px auto;
                text-align: center;
                img{
                    margin: 12px auto!important;
                    display: inline-block;
                }
            }
			h4{
				font-size: 18px;
				font-weight: 900;
				color: #fff;
				text-align: center;
				height: 40px;
				line-height: 40px;
			}
			p{
				font-size: 14px;
				color: #fff;
				line-height: 30px;
			}
        }
		.date_div{
			background: linear-gradient(to top,rgba(170, 250, 224, 0.7),rgba(89, 242, 204, 0.8),rgba(74, 178, 236, 0.7));
			border: 1px solid #26cda0;
			i{
				display: block;
				width: 60px;
				height: 60px;
				background:linear-gradient(to bottom,rgba(38,255,196,1),rgba(0,198,255,0.7));
				border-radius: 50%;
				margin: 5px auto;
				text-align: center;
				img{
					margin: 14px auto!important;
				}
			}
		}
        u{
            background: url("../assets/images/sentinel/sb_icon7.png") no-repeat center;
            display: block;
            width: 10px;
            height: 16px;
            margin: auto auto;
        }
		.date{
			background: url("../assets/images/sentinel/sb_icon8.png") no-repeat center;

		}
    }
	.sjcl_media_con{
		display: flex;
		flex-direction: row;
		margin-top: 20px!important;
		.sjcl_media{
			width: 839px;
			height: 512px;
			margin-right: 15px;
		}
		.sjcl_img{
			width: 527px;
			img{
				display: inline-block;
				width: 255px;
				height: 247px;
			}
			:nth-child(1){
				margin-right: 10px!important;
				margin-bottom: 15px!important;
			}
			:nth-child(2){
				margin-bottom: 15px!important;
			}
			:nth-child(3){
				margin-right: 10px!important;
			}
		}
	}

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