|
@@ -3,58 +3,61 @@
|
|
|
<!--头部-->
|
|
|
<vheader></vheader>
|
|
|
<!--主体-->
|
|
|
- <div class="visual-body" >
|
|
|
+ <div class="visual-body">
|
|
|
<button @click="showEventDialog"
|
|
|
- style="position: absolute; left:50%;top: 50vh; transform: translateX(-50%);">触发事件详情</button>
|
|
|
+ style="position: absolute; left:50%;top: 50vh; transform: translateX(-50%);">触发事件详情
|
|
|
+ </button>
|
|
|
<!-- 弹层 -->
|
|
|
<el-dialog title="事件详情" :visible.sync="eventDialog" v-if="eventDialog" width="95%"
|
|
|
@close="cancelEventShow()">
|
|
|
<div class="dia-event-info">
|
|
|
<el-row>
|
|
|
<!-- 左侧 -->
|
|
|
- <el-col :span="18" class="dia-left" >
|
|
|
+ <el-col :span="18" class="dia-left">
|
|
|
<div ref="imageTofile" style="height: 75vh;">
|
|
|
- <!-- 应急预案 -->
|
|
|
- <div class="dia-left-top">
|
|
|
- <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-for="item in 3" :key="item">
|
|
|
- <a href="#">这是一条应急预案</a>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
+ <!-- 应急预案 -->
|
|
|
+ <div class="dia-left-top">
|
|
|
+ <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-for="item in 3" :key="item">
|
|
|
+ <a href="#">这是一条应急预案</a>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 应急预案end -->
|
|
|
- <!-- 左侧资源 -->
|
|
|
- <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
|
|
|
- <div class="forthis">
|
|
|
- <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
|
|
|
- <div class="i-list-con">
|
|
|
- <div class="d-l-con-icon" style="flex-direction:row;flex-wrap: nowrap;">
|
|
|
- <div class="icon-con" style="width: fit-content !important;" v-for="(item,index) in resourcesList">
|
|
|
- <div class="iconfont icon icon-normal" :class="item.icon"></div>
|
|
|
- <div class="icon-text">
|
|
|
- <h6>{{ item.count }}</h6>
|
|
|
- <h5>{{ item.resourceName }}</h5>
|
|
|
+ <!-- 应急预案end -->
|
|
|
+ <!-- 左侧资源 -->
|
|
|
+ <div class="leftbar" style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
|
|
|
+ <div class="forthis">
|
|
|
+ <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
|
|
|
+ <div class="i-list-con">
|
|
|
+ <div class="d-l-con-icon" style="flex-direction:row;flex-wrap: nowrap;">
|
|
|
+ <div class="icon-con" style="width: fit-content !important;"
|
|
|
+ v-for="(item,index) in resourcesList">
|
|
|
+ <div class="iconfont icon icon-normal" :class="item.icon"></div>
|
|
|
+ <div class="icon-text">
|
|
|
+ <h6>{{ item.count }}</h6>
|
|
|
+ <h5>{{ item.resourceName }}</h5>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </dv-border-box-7>
|
|
|
+ </dv-border-box-7>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 左侧资源end -->
|
|
|
- <!-- 底部工具栏 -->
|
|
|
- <!-- <div class="dia-left-btm-tool">
|
|
|
- </div> -->
|
|
|
- <!-- 底部工具栏end -->
|
|
|
- <!-- 地图 -->
|
|
|
- <supermapDialog ref="supermapDialog" :dynamicPlotting="true"
|
|
|
- style="width:100% ;height: 75vh; position: absolute; top:0;left: 0;" :mapDiv="'forestWarmSuperMap'"
|
|
|
- :mapSite="{doubleClickZoom:false}" :codes="['9fa5']"
|
|
|
- :isSideBySide="false"></supermapDialog>
|
|
|
- <!-- 地图end -->
|
|
|
+ <!-- 左侧资源end -->
|
|
|
+ <!-- 底部工具栏 -->
|
|
|
+ <!-- <div class="dia-left-btm-tool">
|
|
|
+ </div> -->
|
|
|
+ <!-- 底部工具栏end -->
|
|
|
+ <!-- 地图 -->
|
|
|
+ <supermapDialog ref="supermapDialog" :dynamicPlotting="true"
|
|
|
+ style="position: absolute; top:0;left: 0;"
|
|
|
+ :mapDiv="'forestWarmSuperMap'"
|
|
|
+ :mapSite="{doubleClickZoom:false}" :codes="['9fa5']"
|
|
|
+ :isSideBySide="false"></supermapDialog>
|
|
|
+ <!-- 地图end -->
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<!-- 左侧end -->
|
|
@@ -69,16 +72,16 @@
|
|
|
<div class="z-info-list" style="margin-top: 0;">
|
|
|
<el-timeline>
|
|
|
<el-timeline-item color="#2bacf7" timestamp="2018/4/12"
|
|
|
- placement="top" v-for="(item,index) in 5">
|
|
|
+ placement="top" v-for="(item,index) in eventlog">
|
|
|
<el-card>
|
|
|
<div class="z-info-list-con">
|
|
|
<div class="user-and-time flex-d">
|
|
|
- <span>中心管理员</span><span><i
|
|
|
+ <span>{{ item.createName }}</span><span><i
|
|
|
class="el-icon-location"></i> 定位</span>
|
|
|
</div>
|
|
|
<div class="z-info">
|
|
|
<div class="this-con-list-info">
|
|
|
- 请处理单位及时处理
|
|
|
+ {{ item.logContent }}
|
|
|
</div>
|
|
|
<div>
|
|
|
<el-image :src="url"
|
|
@@ -145,16 +148,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import html2canvas from "html2canvas";//截图组件
|
|
|
+import html2canvas from 'html2canvas'//截图组件
|
|
|
import supermapDialog from '@/components/supermap' //超图
|
|
|
import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
import {
|
|
|
- getBaseInfo,
|
|
|
- getTodayEvents,
|
|
|
- getDeptEventCount,
|
|
|
- getWeather,
|
|
|
- getEventList
|
|
|
+ getEventDetail
|
|
|
} from '@/api/forest'
|
|
|
|
|
|
export default {
|
|
@@ -165,6 +164,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ eventlog:[],
|
|
|
eventDialog: false,
|
|
|
resourcesList: [{
|
|
|
resourceName: '取水口',
|
|
@@ -219,21 +219,59 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- cancelEventShow(){
|
|
|
- console.log("关闭事件弹窗")
|
|
|
+ cancelEventShow() {
|
|
|
+ console.log('关闭事件弹窗')
|
|
|
+ this.eventlog=[];
|
|
|
},
|
|
|
- showEventDialog(id) {
|
|
|
-
|
|
|
- this.eventDialog = true
|
|
|
+ showEventDialog(eventCode) {
|
|
|
+ let that = this
|
|
|
+ //获取事件详情
|
|
|
+ getEventDetail({ eventCode: eventCode }).then(res => {
|
|
|
+ this.eventDialog = true
|
|
|
+ this.eventlog=res.data.eventlog
|
|
|
+ if(res.data.catalogue!=null&&res.data.catalogue.length>0){
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: 'marker',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: '',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false,
|
|
|
+ radius:0
|
|
|
+ }
|
|
|
+ if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_1' || res.data.catalogue[0].eventStatusValue == 'forest_event_status_2' || res.data.catalogue[0].eventStatusValue == 'forest_event_status_3') {
|
|
|
+ markersMap.icon = 'sj-icon-map-clz'
|
|
|
+ markersMap.isAggregation = false
|
|
|
+ } else if (res.data.catalogue[0].eventStatusValue == 'event_event_status_4') {
|
|
|
+ markersMap.icon = 'sj-icon-map-wcl'
|
|
|
+ }else if (res.data.catalogue[0].eventStatusValue == 'event_event_status_5') {
|
|
|
+ markersMap.icon = 'sj-icon-map-wcl'
|
|
|
+ }else if (res.data.catalogue[0].eventStatusValue == 'event_event_status_6') {
|
|
|
+ markersMap.icon = 'sj-icon-map-wcl'
|
|
|
+ } else {
|
|
|
+ markersMap.icon = 'sj-icon-map-ywc'
|
|
|
+ }
|
|
|
+ markersMap.lng = res.data.catalogue[0].longitude
|
|
|
+ markersMap.lat = res.data.catalogue[0].latitude
|
|
|
+ if(res.data.eventdetail!=null&&res.data.eventdetail.length>0&&res.data.eventdetail[0].fireRadius!=null&&res.data.eventdetail[0].fireRadius!=""&&res.data.eventdetail[0].fireRadius>0){
|
|
|
+ markersMap.radius = res.data.eventdetail[0].fireRadius
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermapDialog.clearM(false)
|
|
|
+ that.$refs.supermapDialog.setMarkersRadius([markersMap])
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
// 页面元素转图片
|
|
|
- toImage () {
|
|
|
+ toImage() {
|
|
|
// 手动创建一个 canvas 标签
|
|
|
- const canvas = document.createElement("canvas")
|
|
|
+ const canvas = document.createElement('canvas')
|
|
|
// 获取父标签,意思是这个标签内的 DOM 元素生成图片
|
|
|
// imageTofile是给截图范围内的父级元素自定义的ref名称
|
|
|
let canvasBox = this.$refs.imageTofile
|
|
|
- debugger
|
|
|
// 获取父级的宽高
|
|
|
const width = parseInt(window.getComputedStyle(canvasBox).width)
|
|
|
const height = parseInt(window.getComputedStyle(canvasBox).height)
|
|
@@ -245,8 +283,8 @@ export default {
|
|
|
canvas.height = height * 2
|
|
|
canvas.style.width = width + 'px'
|
|
|
canvas.style.height = height + 'px'
|
|
|
- const context = canvas.getContext("2d");
|
|
|
- context.scale(2, 2);
|
|
|
+ const context = canvas.getContext('2d')
|
|
|
+ context.scale(2, 2)
|
|
|
const options = {
|
|
|
backgroundColor: null,
|
|
|
canvas: canvas,
|
|
@@ -254,7 +292,7 @@ export default {
|
|
|
}
|
|
|
html2canvas(canvasBox, options).then((canvas) => {
|
|
|
// toDataURL 图片格式转成 base64
|
|
|
- let dataURL = canvas.toDataURL("image/png")
|
|
|
+ let dataURL = canvas.toDataURL('image/png')
|
|
|
console.log(dataURL)
|
|
|
this.downloadImage(dataURL)
|
|
|
})
|
|
@@ -266,7 +304,7 @@ export default {
|
|
|
a.href = url
|
|
|
a.download = '首页截图'
|
|
|
a.click()
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|