|
|
@@ -11,11 +11,61 @@
|
|
|
<el-row>
|
|
|
<!-- 左侧 -->
|
|
|
<el-col :span="18" class="dia-left">
|
|
|
+ <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;">
|
|
|
+ <transition-group
|
|
|
+ appear
|
|
|
+ name="animate__animated animate__bounce"
|
|
|
+ enter-active-class="animate__backInDown"
|
|
|
+ leave-active-class="animate__backOutUp"
|
|
|
+ >
|
|
|
<!-- 应急预案 -->
|
|
|
- <div class="dia-left-top">
|
|
|
+ <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">
|
|
|
<el-carousel-item v-if="visuForestCloudYuAnBo!=null">
|
|
|
<el-tooltip class="item" effect="dark" :content="visuForestCloudYuAnBo.reserveName"
|
|
|
@@ -36,8 +86,16 @@
|
|
|
<el-button size="mini" type="primary" class="yatz_button" @click="showUpdateYjYuAn">预案调整
|
|
|
</el-button>
|
|
|
</div>
|
|
|
+ </transition-group>
|
|
|
<!-- 左侧资源 -->
|
|
|
- <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 class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;" v-show="mapToolCheckItem.includes('资源与操作')"
|
|
|
+ key="mapToolziyuan">
|
|
|
<div class="forthis" style="width:1320px; display: flex;">
|
|
|
<dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
|
|
|
<div class="i-list-con"
|
|
|
@@ -45,7 +103,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 resourcesList1" @click="fireControlViewPoint(item.type)"
|
|
|
:key="index">
|
|
|
@@ -65,15 +123,22 @@
|
|
|
</div>
|
|
|
<!-- 左侧资源end -->
|
|
|
<!-- 应急预案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()"
|
|
|
+ >视频联动</el-button>
|
|
|
<el-button size="small" icon="el-icon-upload" @click="showEventdetailsdialog()">动态标绘</el-button>
|
|
|
<!-- <el-button size="small" icon="el-icon-upload" @click="showheatPlotting()">火灾蔓延</el-button>-->
|
|
|
</div>
|
|
|
+ </transition-group>
|
|
|
<!-- 地图 -->
|
|
|
<supermapDialog1 ref="supermapDialog1" style="position: absolute; top:0;left: 0;"
|
|
|
:mapDiv="'forestWarmSuperMap'"
|
|
|
:mapSite="{doubleClickZoom:true,dragging:true,scrollWheelZoom:true}" :codes="['9fa5']"
|
|
|
- :isSideBySide="false" @preview="preview" />
|
|
|
+ :isSideBySide="false" @preview="preview" :mapToolShowBH="mapToolShowBH"/>
|
|
|
<!-- 地图end -->
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -146,8 +211,8 @@
|
|
|
<div class="z-info-btm-grp-left">
|
|
|
<el-button size="small" icon="el-icon-upload" @click="showEventLogUpload()">上传
|
|
|
</el-button>
|
|
|
- <el-button size="small" icon="el-icon-download" @click="toImage()">截图上传
|
|
|
- </el-button>
|
|
|
+<!-- <el-button size="small" icon="el-icon-download" @click="toImage()">截图上传-->
|
|
|
+<!-- </el-button>-->
|
|
|
<el-button size="small" icon="el-icon-download" @click="showResponsibility()"
|
|
|
v-if="eventStatusValue!='forest_event_status_1'&&eventStatusValue!='forest_event_status_7'">责任制
|
|
|
</el-button>
|
|
|
@@ -1754,6 +1819,12 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ //地图tool开关
|
|
|
+ mapToolShow: false,
|
|
|
+ mapToolCheckAll: false,
|
|
|
+ mapToolCheck: ["应急预案", "资源与操作"],
|
|
|
+ mapToolCheckItem: [],
|
|
|
+ mapToolShowBH:false,
|
|
|
isLoading: false,
|
|
|
//海康
|
|
|
cameraTitle: '',
|
|
|
@@ -2032,6 +2103,91 @@ export default {
|
|
|
this.fireControlViewList();
|
|
|
},
|
|
|
methods: {
|
|
|
+ showTVWallDiaLog() {
|
|
|
+ this.initByCameras();
|
|
|
+ // this.$refs.TVWall.showTVWall();
|
|
|
+ },
|
|
|
+ initByCameras() {
|
|
|
+ // const params = Object.assign({})
|
|
|
+ // params.longitude = this.longitude;
|
|
|
+ // params.latitude = this.latitude;
|
|
|
+ // params.type = '8'
|
|
|
+ // initByCameras(params).then(res => {
|
|
|
+ // this.$refs.TVWall.showTVWall1(this.longitude, this.latitude, res.data);
|
|
|
+ // this.$refs.bottomMenu.showMeasure = false
|
|
|
+ // this.$refs.bottomMenu.showChild = false
|
|
|
+ // this.$refs.bottomMenu.showBanChild = false
|
|
|
+ // this.$refs.bottomMenu.showChangChild = false
|
|
|
+ // })
|
|
|
+ let that = this
|
|
|
+ if(that.centermonitorTCamera == null){
|
|
|
+ this.$message.warning("当前事件无绑定摄像头")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let tvListJson = [{
|
|
|
+ "switchTab": "2",
|
|
|
+ "treeLabels": [{
|
|
|
+ "id": null,
|
|
|
+ "labelCode": "999",
|
|
|
+ "labelName": "电视墙",
|
|
|
+ "cameraType": null,
|
|
|
+ "parentLabelCode": ""
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": "spcamera00010",
|
|
|
+ "labelCode": that.centermonitorTCamera.cameraCode,
|
|
|
+ "labelName": that.centermonitorTCamera.cameraName,
|
|
|
+ "cameraType": that.centermonitorTCamera.cameraType,
|
|
|
+ "parentLabelCode": "999"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "labelChannels": [{
|
|
|
+ "labelCode": that.centermonitorTCamera.cameraCode,
|
|
|
+ "channelDates": [{
|
|
|
+ "channelCode": that.centermonitorTCamera.cameraCode,
|
|
|
+ "channelName": that.centermonitorTCamera.cameraName,
|
|
|
+ "channelSn": null,
|
|
|
+ "cameraType": that.centermonitorTCamera.cameraType,
|
|
|
+ "online": "1",
|
|
|
+ "cameraCode": null
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ this.$refs.TVWall.showTVWall1(this.longitude, this.latitude, tvListJson);
|
|
|
+ this.$refs.bottomMenu.showMeasure = false
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ },
|
|
|
/************************************责任制-开始****************************************/
|
|
|
addLine: function() { //添加负责人行数
|
|
|
var newValue = {
|
|
|
@@ -2345,7 +2501,7 @@ export default {
|
|
|
showEventdetailsdialog() {
|
|
|
this.eventDialog = false;
|
|
|
this.cancelEventShow()
|
|
|
- this.$emit('showEventDialog', this.eventCode);
|
|
|
+ this.$emit('getFirespread', this.eventCode);
|
|
|
},
|
|
|
showheatPlotting() {
|
|
|
this.$refs.supermapDialog1.showheatPlotting(this.latitude, this.longitude, this.windSpeed, this.windDirection)
|
|
|
@@ -2479,7 +2635,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
if (res.data[i].cameraCode != null) {
|
|
|
- markersMap.click = 'preview'
|
|
|
+ // markersMap.click = 'preview'
|
|
|
// markersMap.parameter = res.data[i].cameraCode
|
|
|
markersMap.parameter = {code:res.data[i].cameraCode,
|
|
|
type:res.data[i].cameraFactory?res.data[i].cameraFactory:1,name:res.data[i].cameraName}
|
|
|
@@ -3082,12 +3238,20 @@ export default {
|
|
|
this.$refs.eventLogUpload.eventLogUpload(this.eventCode)
|
|
|
},
|
|
|
cancelEventShow() {
|
|
|
+ this.mapToolShow=false
|
|
|
+ this.mapToolCheckItem = [];
|
|
|
+ this.mapToolCheckAll=false
|
|
|
+ this.mapToolShowBH=false,
|
|
|
this.dataStatus = null
|
|
|
this.deptId = null
|
|
|
console.log('关闭事件弹窗')
|
|
|
this.eventLogList = []
|
|
|
},
|
|
|
showEventDialog(eventCode) {
|
|
|
+ this.mapToolShow=false
|
|
|
+ this.mapToolCheckItem = [];
|
|
|
+ this.mapToolCheckAll=false
|
|
|
+ this.mapToolShowBH=false,
|
|
|
this.getNewDataByDate(this.calendarDay)
|
|
|
this.eventCode = eventCode
|
|
|
let that = this
|
|
|
@@ -3650,9 +3814,47 @@ 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';
|
|
|
+@import "@/assets/styles/base.scss";
|
|
|
|
|
|
//弹层样式
|
|
|
//.customWidthMp4 {
|
|
|
@@ -3662,11 +3864,10 @@ function cbIntegrationCallBack(oData) {
|
|
|
|
|
|
.tree-border {
|
|
|
border: 1px $barBorder;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
- padding: .5rem;
|
|
|
+ padding: 0.5rem;
|
|
|
}
|
|
|
|
|
|
/** 火灾报告**/
|
|
|
@@ -3710,14 +3911,12 @@ table input {
|
|
|
font-family: "微软雅黑";
|
|
|
background: none;
|
|
|
color: $inBlue;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
table th input:hover {
|
|
|
background: $eventBG;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
table thead th {
|
|
|
font-size: 1rem;
|
|
|
font-family: "宋体";
|
|
|
@@ -3734,7 +3933,6 @@ table tr td {
|
|
|
height: 2rem;
|
|
|
border: 1px $searchBorder;
|
|
|
text-align: center;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.font1 {
|
|
|
@@ -3759,22 +3957,21 @@ table tr td input {
|
|
|
color: $inBlue;
|
|
|
background: none;
|
|
|
float: left;
|
|
|
- padding: 0 .5rem;
|
|
|
+ padding: 0 0.5rem;
|
|
|
}
|
|
|
|
|
|
table tr td input:hover {
|
|
|
background: $eventBG;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.int_tr td input {
|
|
|
text-align: center !important;
|
|
|
}
|
|
|
|
|
|
.table2 tr th {
|
|
|
font-size: 1.7rem;
|
|
|
- padding: .5rem 0;
|
|
|
- font-family: 'fontnameRegular';
|
|
|
+ padding: 0.5rem 0;
|
|
|
+ font-family: "fontnameRegular";
|
|
|
}
|
|
|
|
|
|
.table2 tr td {
|
|
|
@@ -3809,12 +4006,11 @@ table tr td input:hover {
|
|
|
border: 0px !important;
|
|
|
outline: 0px;
|
|
|
width: 98%;
|
|
|
- padding: .5rem;
|
|
|
+ padding: 0.5rem;
|
|
|
font-size: 1rem;
|
|
|
resize: none;
|
|
|
background: none;
|
|
|
color: $inBlue;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.table2 tr td textarea:hover {
|
|
|
@@ -3834,23 +4030,47 @@ table tr td input:hover {
|
|
|
display: flex;
|
|
|
|
|
|
button {
|
|
|
- padding: .5rem 2rem;
|
|
|
+ padding: 0.5rem 2rem;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.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 {
|
|
|
padding: 0.5rem 0.5rem;
|
|
|
- color: #409EFF;
|
|
|
+ color: #409eff;
|
|
|
background: none;
|
|
|
- border-color: #409EFF;
|
|
|
+ border-color: #409eff;
|
|
|
}
|
|
|
|
|
|
.yatz_button:hover {
|
|
|
color: #fff;
|
|
|
- background: #409EFF;
|
|
|
- border-color: #409EFF;
|
|
|
+ background: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
}
|
|
|
|
|
|
.fr_button {
|
|
|
@@ -3947,4 +4167,6 @@ table tr td input:hover {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
</style>
|
JX.LI