|
|
@@ -0,0 +1,454 @@
|
|
|
+<template>
|
|
|
+ <div class="dyjg-popup-container" v-if="visible">
|
|
|
+ <div class="dyjg-popup-title">
|
|
|
+ <span class="title-text">{{title}}</span>
|
|
|
+ <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeModal" />
|
|
|
+ </div>
|
|
|
+ <div class="dyjg-popup-content">
|
|
|
+ <el-radio-group v-model="typeVal" size="mini">
|
|
|
+ <el-radio-button label="1">简介</el-radio-button>
|
|
|
+ <el-radio-button label="2">周边监控查询</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <div class="info-container" v-if="typeVal === '1'">
|
|
|
+ <div class="info-content">
|
|
|
+ <div class="info-text">
|
|
|
+ <p v-if="currentInfo.description">{{ currentInfo.description }}</p>
|
|
|
+ <p v-else>暂无堤防加固段简介信息</p>
|
|
|
+ </div>
|
|
|
+ <div class="info-images" v-if="currentInfo.images && currentInfo.images.length > 0">
|
|
|
+ <el-carousel indicator-position="outside" arrow="always">
|
|
|
+ <el-carousel-item v-for="(image, index) in currentInfo.images" :key="index">
|
|
|
+ <img :src="image" alt="堤防加固段图片" class="image-item" />
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ <div class="no-image" v-else>
|
|
|
+ <img src="@/assets/image/comprehensive/noData.png" alt="" />
|
|
|
+ <div class="txt">暂无相关图片</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="monitor-container" v-else>
|
|
|
+ <div class="monitor-search">
|
|
|
+ <span>查询半径</span>
|
|
|
+ <div class="input-bg">
|
|
|
+ <el-input v-model="radius" size="mini" type="number" min="0" placeholder="输入半径"></el-input>
|
|
|
+ </div>
|
|
|
+ <span> km </span>
|
|
|
+ <el-button type="primary" size="mini" @click="search">查询</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="monitor-list">
|
|
|
+ <template v-if="monitorList.length > 0">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in monitorList" :key="index" :class="{ active: activeIndex == index, 'disabled': item.status != '0' }">
|
|
|
+ <span v-if="item.status == '0'" @click="toLoadVideo(item, index)">{{ item.devName }}</span>
|
|
|
+ <span v-else class="disabled">{{ item.devName }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="monitor-video" v-if="artShow">
|
|
|
+ <EasyPlayer
|
|
|
+ ref="playerRef"
|
|
|
+ playerName="测试"
|
|
|
+ :videoUrl="videoOption.url"
|
|
|
+ class="video-player screenshot"
|
|
|
+ live
|
|
|
+ speed
|
|
|
+ :easyStretch="true"
|
|
|
+ :muted="true"
|
|
|
+ :has-audio="false"
|
|
|
+ :reconnection="true"
|
|
|
+ @click.native.stop
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="noData">
|
|
|
+ <img src="@/assets/image/comprehensive/noData.png" alt="" />
|
|
|
+ <div class="txt">暂无摄像头</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { warning } from '@/utils'
|
|
|
+import { getVideoRealtimeUrl } from '@/api/largeScreenApi'
|
|
|
+import { deviceSimpleList } from '@/api/largeScreenApi'
|
|
|
+
|
|
|
+let graphicsLayer = null
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'DyjgPopup',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ typeVal: '1',
|
|
|
+ radius: '',
|
|
|
+ title: '堤防加固段',
|
|
|
+ currentInfo: {
|
|
|
+ description: '',
|
|
|
+ images: []
|
|
|
+ },
|
|
|
+ activeIndex: 0,
|
|
|
+ monitorList: [],
|
|
|
+ stationGraphic: {},
|
|
|
+ videoOption: { url: '' },
|
|
|
+ artShow: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ carouselHeight() {
|
|
|
+ // 计算轮播图高度，确保不超过弹窗内容区域的高度
|
|
|
+ return '150px'; // 设置一个合适的默认高度
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$globalEventBus.$on('clickDyjgModal', (data) => {
|
|
|
+ this.visible = true
|
|
|
+ this.title = data.title || '堤防加固段'
|
|
|
+ this.stationGraphic = data.graphic
|
|
|
+ this.setDyjgInfo(data.id)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ this.$globalEventBus.$off('clickDyjgModal')
|
|
|
+ if (graphicsLayer) {
|
|
|
+ window.map.removeLayer(graphicsLayer)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 设置堤防加固段信息
|
|
|
+ setDyjgInfo(id) {
|
|
|
+ // 根据不同ID设置不同的信息和图片
|
|
|
+ const dyjgInfo = {
|
|
|
+ '1-5-1': {
|
|
|
+ description: '渭河兴平庄头马村--仪空段堤防护基加固工程:2023年10月18日，我市发展和改革局以兴发改[2023]481号文件批复了《渭河兴平庄头马村--仪空段堤防护基加固工程初步设计报告》，批复投资2591.40万元。批复建设规模及内容为：加固堤防长度1.2km，加固护基坝垛16座，新建护岸476m，配套建设其他附属设施',
|
|
|
+ images: [
|
|
|
+ require('@/assets/image/dyjg/1.png'),
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ '1-5-2': {
|
|
|
+ description: '渭河兴平市段家村段堤防加固工程:2025年7月29日我市发改局以兴发改【2025】317号文件批复该工程项目建议书，批复投资1113.47万元，批复建设内容为：干砌石护坡952m，散抛石平台887m，笼石护基952m。',
|
|
|
+ images: [
|
|
|
+ require('@/assets/image/dyjg/2.png'),
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ '1-5-3': {
|
|
|
+ description: '渭河兴平市建坊段堤防加固工程:该项目计划投资1366.76万元，建设内容为：新建坝垛8座；新建连坝路513m；新建进坝路1条，长77m；附属设施及绿化。目前，设计报告正在修订。',
|
|
|
+ images: [
|
|
|
+ require('@/assets/image/dyjg/3.png')
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果当前ID存在信息则使用，否则使用默认信息
|
|
|
+ if (dyjgInfo[id]) {
|
|
|
+ this.currentInfo = dyjgInfo[id]
|
|
|
+ } else {
|
|
|
+ this.currentInfo = {
|
|
|
+ description: '该堤防加固段工程主要用于提升堤防的防洪能力，通过多种工程技术措施确保渭河沿岸的安全。',
|
|
|
+ images: []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ search() {
|
|
|
+ if (this.radius === '') {
|
|
|
+ warning('请输入查询半径')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.addCameraToMap()
|
|
|
+ this.getAroundAnalysisList()
|
|
|
+ },
|
|
|
+
|
|
|
+ getAroundAnalysisList() {
|
|
|
+ let radius = this.radius ? parseFloat(this.radius) * 1000 : 1000
|
|
|
+ window
|
|
|
+ .requestSDK(
|
|
|
+ '/sddnWeiHe/device/aroundAnalysisList',
|
|
|
+ {
|
|
|
+ longitude: this.stationGraphic.coordinate[0],
|
|
|
+ latitude: this.stationGraphic.coordinate[1],
|
|
|
+ radius: radius,
|
|
|
+ type: '1',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ notFilterSameLngLat: true
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ 'post'
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.monitorList = res.data
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ this.toLoadVideo(this.monitorList[0], 0)
|
|
|
+ }
|
|
|
+ this.addCameraIcon()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ toLoadVideo(row, index) {
|
|
|
+ // 检查摄像头状态，只有状态为'0'的摄像头才加载视频
|
|
|
+ if (row.status !== '0') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.activeIndex = index
|
|
|
+ this.artShow = false
|
|
|
+ this.flyToPoint(row)
|
|
|
+ getVideoRealtimeUrl({
|
|
|
+ deviceCode: row.deviceCode,
|
|
|
+ channelCode: row.channelCode,
|
|
|
+ netType: 2,
|
|
|
+ protocolType: 9,
|
|
|
+ streamType: 1
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.artShow = true
|
|
|
+ this.$set(this.videoOption, 'url', res.data.streamUrl)
|
|
|
+ } else if (res.code == 4001) {
|
|
|
+ this.$message.warning(JSON.parse(res.msg).resultMsg)
|
|
|
+ } else if (res.code == 400) {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ addCameraToMap() {
|
|
|
+ if (graphicsLayer) {
|
|
|
+ window.map.removeLayer(graphicsLayer)
|
|
|
+ }
|
|
|
+ graphicsLayer = new this.mars3d.layer.GraphicLayer()
|
|
|
+ window.map.addLayer(graphicsLayer)
|
|
|
+ const graphic = new this.mars3d.graphic.CircleEntity({
|
|
|
+ position: this.stationGraphic.coordinate,
|
|
|
+ style: {
|
|
|
+ radius: this.radius * 1000,
|
|
|
+ color: '#498EE3',
|
|
|
+ opacity: 0.3,
|
|
|
+ outline: true,
|
|
|
+ outlineWidth: 2,
|
|
|
+ outlineColor: '#4D7BFF',
|
|
|
+ clampToGround: true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ graphicsLayer.addGraphic(graphic)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加摄像头图标
|
|
|
+ addCameraIcon() {
|
|
|
+ if (!graphicsLayer) {
|
|
|
+ graphicsLayer = new this.mars3d.layer.GraphicLayer()
|
|
|
+ window.map.addLayer(graphicsLayer)
|
|
|
+ }
|
|
|
+ this.monitorList.forEach((item, index) => {
|
|
|
+ const graphic = new this.mars3d.graphic.BillboardEntity({
|
|
|
+ position: [item.longitude, item.latitude],
|
|
|
+ style: {
|
|
|
+ image: require('@/assets/image/common/camera.png'),
|
|
|
+ scale: 0.8,
|
|
|
+ horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
|
|
|
+ verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //添加可视化区域
|
|
|
+ const sector = new this.mars3d.graphic.CircleEntity({
|
|
|
+ id: 'sector_' + index,
|
|
|
+ positions: [[item.longitude, item.latitude, 0]],
|
|
|
+ style: {
|
|
|
+ radius: 3000,
|
|
|
+ color: '#32edda',
|
|
|
+ opacity: 0.35,
|
|
|
+ outline: true,
|
|
|
+ outlineColor: '#32edda',
|
|
|
+ visibleDepth: false,
|
|
|
+ clampToGround: true
|
|
|
+ },
|
|
|
+ attr: { deviceCode: item.deviceCode, channelCode: item.channelCode, devName: item.devName }
|
|
|
+ })
|
|
|
+ graphicsLayer.addGraphic(sector)
|
|
|
+ graphicsLayer.addGraphic(graphic)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 定位到点
|
|
|
+ flyToPoint(point) {
|
|
|
+ window.map.flyToPoint([point.longitude, point.latitude], {
|
|
|
+ radius: 5000, // 飞行距离目标点的距离
|
|
|
+ duration: 2 // 飞行持续时间（秒）
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ closeModal() {
|
|
|
+ this.visible = false
|
|
|
+ this.radius = ''
|
|
|
+ this.typeVal = '1'
|
|
|
+ this.monitorList = []
|
|
|
+ if (graphicsLayer) {
|
|
|
+ window.map.removeLayer(graphicsLayer)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.dyjg-popup-container {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -80%);
|
|
|
+ width: px-to-rem(600);
|
|
|
+ z-index: 9999;
|
|
|
+ .dyjg-popup-title {
|
|
|
+ background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: px-to-rem(39);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 px-to-rem(20);
|
|
|
+ font-size: px-to-rem(16);
|
|
|
+ color: #fff;
|
|
|
+ .title-text {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: px-to-rem(20);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dyjg-popup-content {
|
|
|
+ height: px-to-rem(354);
|
|
|
+ background: rgba(#233d6c, 0.8);
|
|
|
+ padding: px-to-rem(10);
|
|
|
+ :deep(.el-radio-button__inner) {
|
|
|
+ background: transparent;
|
|
|
+ color: #4f9fff;
|
|
|
+ border-color: #4f9fff;
|
|
|
+ font-size: px-to-rem(14);
|
|
|
+ }
|
|
|
+ :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
|
|
|
+ background-color: #4f9fff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .info-container {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ .info-content {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .info-text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: px-to-rem(14);
|
|
|
+ padding: 0 px-to-rem(10) px-to-rem(10);
|
|
|
+ line-height: 1.6;
|
|
|
+ p {
|
|
|
+ margin: 0 0 px-to-rem(10) 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-images {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ :deep(.el-carousel__container) {
|
|
|
+ height: 150px !important;
|
|
|
+ }
|
|
|
+ .image-item {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ object-fit: cover;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .no-image {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ .txt {
|
|
|
+ font-size: px-to-rem(14);
|
|
|
+ margin-top: px-to-rem(10);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .monitor-container {
|
|
|
+ .monitor-search {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: px-to-rem(10);
|
|
|
+ border-bottom: px-to-rem(1) solid #4d628b;
|
|
|
+ .input-bg {
|
|
|
+ margin: px-to-rem(10) 0;
|
|
|
+ background: url('@/assets/image/safety-inspection/search-bg.png') no-repeat 0 0 / 100% 100%;
|
|
|
+ :deep(.el-input__inner) {
|
|
|
+ background: transparent;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ margin-right: px-to-rem(10);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .monitor-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .monitor-video {
|
|
|
+ width: calc(100% - px-to-rem(180));
|
|
|
+ height: px-to-rem(230);
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ width: px-to-rem(180);
|
|
|
+ height: px-to-rem(230);
|
|
|
+ overflow-y: auto;
|
|
|
+ border-right: px-to-rem(1) solid #4d628b;
|
|
|
+ li {
|
|
|
+ color: #fff;
|
|
|
+ padding: px-to-rem(10);
|
|
|
+ height: px-to-rem(36);
|
|
|
+ line-height: px-to-rem(16);
|
|
|
+ font-size: px-to-rem(16);
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ background-color: #498ee3;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background-color: #498ee3;
|
|
|
+ }
|
|
|
+ &.disabled {
|
|
|
+ color: #999;
|
|
|
+ cursor: not-allowed;
|
|
|
+ background-color: #333 !important;
|
|
|
+ &:hover {
|
|
|
+ background-color: #333 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.noData {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ img {
|
|
|
+ margin-top: px-to-rem(40);
|
|
|
+ margin-bottom: px-to-rem(20);
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ color: #fff;
|
|
|
+ font-size: px-to-rem(14);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
