|
|
@@ -11,9 +11,61 @@
|
|
|
<el-row>
|
|
|
<!-- 左侧 -->
|
|
|
<el-col :span="18" class="dia-left">
|
|
|
- <div ref="imageTofile" style="height: 75vh;">
|
|
|
+ <div class="sj-map-tool-select">
|
|
|
+ <transition-group
|
|
|
+ appear
|
|
|
+ name="animate__animated animate__bounce"
|
|
|
+ enter-active-class="animate__lightSpeedInRight"
|
|
|
+ leave-active-class="animate__backOutRight"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="sj-map-tool-select-list"
|
|
|
+ v-show="mapToolShow"
|
|
|
+ id="eventMapToolOnly"
|
|
|
+ key="1"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ v-model="mapToolCheckAll"
|
|
|
+ @change="mapToolCheckAllChange"
|
|
|
+ class="sj-map-tool-checkbox-all"
|
|
|
+ >全选</el-checkbox
|
|
|
+ >
|
|
|
+ <el-checkbox-group
|
|
|
+ v-model="mapToolCheckItem"
|
|
|
+ @change="mapToolCheckChange"
|
|
|
+ class="sj-map-tool-checkbox"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ v-for="tools in mapToolCheck"
|
|
|
+ :label="tools"
|
|
|
+ :key="tools"
|
|
|
+ >{{ tools }}</el-checkbox
|
|
|
+ >
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </transition-group>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-s-grid"
|
|
|
+ id="eventMapToolOnlyButton"
|
|
|
+ @click="mapToolShow = !mapToolShow"
|
|
|
+ >地图功能</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div ref="imageTofile" style="height: 75vh">
|
|
|
<!-- 应急预案 -->
|
|
|
- <div class="dia-left-top">
|
|
|
+ <transition-group
|
|
|
+ appear
|
|
|
+ name="animate__animated animate__bounce"
|
|
|
+ enter-active-class="animate__backInDown"
|
|
|
+ leave-active-class="animate__backOutUp"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="dia-left-top"
|
|
|
+ v-show="mapToolCheckItem.includes('应急预案')"
|
|
|
+ key="yingji"
|
|
|
+ >
|
|
|
<div class="dia-left-top-tit">应急预案</div>
|
|
|
<div class="dia-left-top-carousel">
|
|
|
<el-carousel height="30px" direction="vertical" :interval="2000">
|
|
|
@@ -40,9 +92,18 @@
|
|
|
<el-button size="mini" type="primary" class="yatz_button" @click="showUpdateYjYuAn">预案调整
|
|
|
</el-button>
|
|
|
</div>
|
|
|
+ </transition-group>
|
|
|
<!-- 应急预案end -->
|
|
|
<!-- 左侧资源 -->
|
|
|
- <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
|
|
|
+ <transition-group
|
|
|
+ appear
|
|
|
+ name="animate__animated animate__bounce"
|
|
|
+ enter-active-class="animate__backInUp"
|
|
|
+ leave-active-class="animate__backOutDown"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-show="mapToolCheckItem.includes('资源与操作')"
|
|
|
+ key="mapToolziyuan" class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
|
|
|
<div class="forthis" style="width:1320px; display: flex;">
|
|
|
<dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
|
|
|
<div class="i-list-con"
|
|
|
@@ -50,7 +111,7 @@
|
|
|
|
|
|
<div class="d-l-con-icon" style="width: fit-content; flex-direction:row;flex-wrap: nowrap;"
|
|
|
ref="thisWidthWH">
|
|
|
- <leftRightSwiperScroll v-if="isLoading">
|
|
|
+ <leftRightSwiperScroll v-if="mapToolCheckItem.includes('资源与操作')">
|
|
|
<div class="icon-con" style="width: fit-content !important;"
|
|
|
v-for="(item,index) in resourcesList" @click="fireControlViewPoint(item.type)"
|
|
|
:key="index">
|
|
|
@@ -73,16 +134,20 @@
|
|
|
<!-- <div class="dia-left-btm-tool">
|
|
|
</div> -->
|
|
|
<!-- 底部工具栏end -->
|
|
|
- <div class="fire-m" style="bottom:5rem">
|
|
|
+ <div class="fire-m" style="bottom:5rem" v-show="mapToolCheckItem.includes('资源与操作')"
|
|
|
+ key="ziyuan"
|
|
|
+ >
|
|
|
<el-button size="small" icon="el-icon-s-grid" @click="showTVWallDiaLog()" v-show="eventType==1">视频联动</el-button>
|
|
|
<el-button size="small" icon="el-icon-upload" @click="showheatPlotting()" v-show="eventType==1">火灾蔓延
|
|
|
</el-button>
|
|
|
</div>
|
|
|
+ </transition-group>
|
|
|
<!-- 地图 -->
|
|
|
<supermapDialog ref="supermapDialog" style="position: absolute; top:0;left: 0;"
|
|
|
:mapDiv="'forestWarmSuperMap'"
|
|
|
:mapSite="{zoom:12,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}" :codes="['9fa5']"
|
|
|
- :isSideBySide="false" :isdynamicPlotting="true" @preview="preview" />
|
|
|
+ :isSideBySide="false" :isdynamicPlotting="true" @preview="preview" :mapToolShowBH="mapToolShowBH"
|
|
|
+ />/>
|
|
|
<!-- <supermapDialog ref="supermapDialog" -->
|
|
|
<!-- @preview="preview"/> -->
|
|
|
<!-- 地图end -->
|
|
|
@@ -1112,6 +1177,8 @@ import {
|
|
|
} from "@/api/system/config";
|
|
|
import Cookies from 'js-cookie';
|
|
|
import request from "../utils/request";
|
|
|
+import "animate.css"; //动画库
|
|
|
+
|
|
|
export default {
|
|
|
dicts: ['task_source'],
|
|
|
watch: {
|
|
|
@@ -1131,6 +1198,13 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ //地图tool开关
|
|
|
+ mapToolShow: false,
|
|
|
+ mapToolCheckAll: false,
|
|
|
+ mapToolCheck: ["应急预案", "地图标绘", "资源与操作"],
|
|
|
+ mapToolCheckItem: [],
|
|
|
+ mapToolShowBH:false,
|
|
|
+ // isIndeterminate: true,
|
|
|
title:"火灾区域\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000《双击选中区域获取数据》",
|
|
|
isLoading: false,
|
|
|
showFindUserByDept: false, //责任人选择框
|
|
|
@@ -1352,13 +1426,44 @@ export default {
|
|
|
calendarDay: null //首页日历选择
|
|
|
},
|
|
|
created() {
|
|
|
- this.isLoading = true;
|
|
|
+
|
|
|
+ this.closedEventDiaTool()
|
|
|
+ // this.isLoading = true;
|
|
|
/** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
- const DHWsInstance = DHWs.getInstance()
|
|
|
- this.ws = DHWsInstance
|
|
|
+ const DHWsInstance = DHWs.getInstance();
|
|
|
+ this.ws = DHWsInstance;
|
|
|
/** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
},
|
|
|
methods: {
|
|
|
+ closedEventDiaTool() {
|
|
|
+ document.addEventListener("click", (e) => {
|
|
|
+ let b = document.getElementById("eventMapToolOnly");
|
|
|
+ let c = document.getElementById("eventMapToolOnlyButton");
|
|
|
+ if (this.mapToolShow && !b.contains(e.target) && !c.contains(e.target)) {
|
|
|
+ this.mapToolShow = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ // 地图tool显隐
|
|
|
+ mapToolCheckAllChange(val) {
|
|
|
+ this.mapToolCheckItem = [];
|
|
|
+ this.mapToolCheckItem = val ? this.mapToolCheck : [];
|
|
|
+ // this.isIndeterminate = false;
|
|
|
+ this.mapToolCheckChangeBH()
|
|
|
+ },
|
|
|
+ mapToolCheckChangeBH(){
|
|
|
+ if (this.mapToolCheckItem.includes("地图标绘")) {
|
|
|
+ this.mapToolShowBH= true
|
|
|
+ } else {
|
|
|
+ this.mapToolShowBH= false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mapToolCheckChange(value) {
|
|
|
+ let checkedCount = value.length;
|
|
|
+ this.mapToolCheckAll = checkedCount === this.mapToolCheck.length;
|
|
|
+ this.mapToolCheckChangeBH()
|
|
|
+ },
|
|
|
// 获取消防左侧菜单列表
|
|
|
fireControlViewList() {
|
|
|
this.resourcesList = [];
|
|
|
@@ -1547,38 +1652,47 @@ export default {
|
|
|
|
|
|
},
|
|
|
showTVWall(channelCode, channelName) {
|
|
|
- let tvListJson = [{
|
|
|
- "switchTab": "2",
|
|
|
- "treeLabels": [{
|
|
|
- "id": null,
|
|
|
- "labelCode": "999",
|
|
|
- "labelName": "电视墙",
|
|
|
- "cameraType": null,
|
|
|
- "parentLabelCode": ""
|
|
|
+ let tvListJson = [
|
|
|
+ {
|
|
|
+ switchTab: "2",
|
|
|
+ treeLabels: [
|
|
|
+ {
|
|
|
+ id: null,
|
|
|
+ labelCode: "999",
|
|
|
+ labelName: "电视墙",
|
|
|
+ cameraType: null,
|
|
|
+ parentLabelCode: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "spcamera00010",
|
|
|
+ labelCode: channelCode,
|
|
|
+ labelName: channelName,
|
|
|
+ cameraType: "1",
|
|
|
+ parentLabelCode: "999",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ labelChannels: [
|
|
|
+ {
|
|
|
+ labelCode: channelCode,
|
|
|
+ channelDates: [
|
|
|
+ {
|
|
|
+ channelCode: channelCode,
|
|
|
+ channelName: channelName,
|
|
|
+ channelSn: null,
|
|
|
+ cameraType: "1",
|
|
|
+ online: "1",
|
|
|
+ cameraCode: "1",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- {
|
|
|
- "id": "spcamera00010",
|
|
|
- "labelCode": channelCode,
|
|
|
- "labelName": channelName,
|
|
|
- "cameraType": "1",
|
|
|
- "parentLabelCode": "999"
|
|
|
- }
|
|
|
- ],
|
|
|
- "labelChannels": [{
|
|
|
- "labelCode": channelCode,
|
|
|
- "channelDates": [{
|
|
|
- "channelCode": channelCode,
|
|
|
- "channelName": channelName,
|
|
|
- "channelSn": null,
|
|
|
- "cameraType": "1",
|
|
|
- "online": "1",
|
|
|
- "cameraCode": "1"
|
|
|
- }]
|
|
|
- }]
|
|
|
- }]
|
|
|
- this.$refs.TVWall.showTVWall(tvListJson, [{
|
|
|
- "channelId": channelCode
|
|
|
- }]);
|
|
|
+ ];
|
|
|
+ this.$refs.TVWall.showTVWall(tvListJson, [
|
|
|
+ {
|
|
|
+ channelId: channelCode,
|
|
|
+ },
|
|
|
+ ]);
|
|
|
this.$refs.bottomMenu.showMeasure = false;
|
|
|
this.$refs.bottomMenu.showChild = false;
|
|
|
this.$refs.bottomMenu.showBanChild = false;
|
|
|
@@ -2961,6 +3075,45 @@ function cbIntegrationCallBack(oData) {
|
|
|
</script>
|
|
|
|
|
|
|
|
|
+<style lang="scss">
|
|
|
+.sj-map-tool-checkbox-all {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 1rem !important;
|
|
|
+
|
|
|
+ .el-checkbox__input {
|
|
|
+ line-height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox__label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: white;
|
|
|
+ padding-left: 5px;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
+ color: #01d1eb;
|
|
|
+ }
|
|
|
+}
|
|
|
+.sj-map-tool-checkbox {
|
|
|
+ display: flex;
|
|
|
+ .el-checkbox {
|
|
|
+ margin-right: 1rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .el-checkbox__input {
|
|
|
+ line-height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-checkbox__label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: white;
|
|
|
+ padding-left: 5px;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
+ color: #01d1eb;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
@import '@/assets/styles/base.scss';
|
|
|
|
|
|
@@ -3148,6 +3301,31 @@ table tr td input:hover {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.sj-map-tool-select {
|
|
|
+ position: absolute;
|
|
|
+ right: 1rem;
|
|
|
+ top: 1rem;
|
|
|
+ z-index: 1000;
|
|
|
+ display: flex;
|
|
|
+ height: 30px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.sj-map-tool-select-list {
|
|
|
+ position: relative;
|
|
|
+ padding: 0.3rem 1rem;
|
|
|
+ border-radius: 1rem;
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 1000;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ rgba(18, 71, 153, 1),
|
|
|
+ rgba(4, 21, 30, 1)
|
|
|
+ );
|
|
|
+ box-shadow: 0 -0.2rem 0.5rem 0.3rem rgba(13, 192, 219, 0.09) inset;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
// 20220928
|
|
|
.yatz_button {
|
qinhouyu