Project_yhfu/src/views/eventdetailsdialog.vue

<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <button @click="showEventDialog"
              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">
              <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>
                </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">
                              <h5>{{ item.resourceName }}</h5>
                            </div>
                          </div>
                        </div>
                      </div>
                    </dv-border-box-7>
                  </div>
                </div>
                <!-- 左侧资源end -->
                <!-- 底部工具栏 -->
                <!--   <div class="dia-left-btm-tool">
                   </div> -->
                <!-- 底部工具栏end -->
                <!-- 地图 -->
                <supermapDialog ref="supermapDialog"
                                style="position: absolute; top:0;left: 0;"
                                :mapDiv="'forestWarmSuperMap'"
                                :mapSite="{zoom:16,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}"
                                :codes="['9fa5']"
                                :isSideBySide="false"
                                :isdynamicPlotting="true"/>
                <!-- 地图end -->
              </div>
            </el-col>
            <!-- 左侧end -->
            <!-- 右侧 -->
            <el-col :span="6" class="dia-right">
              <div class="e-right">
                <div class="forthis">
                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']"
                                   style="padding-bottom:1rem ;">
                    <div class="i-list-con">
                      <div class="this-con h-45">
                        <div class="z-info-list" style="margin-top: 0;">
                          <el-timeline>
                            <el-timeline-item color="#2bacf7" :timestamp="item.createTime"
                                              placement="top" v-for="(item,index) in eventlog">
                              <el-card>
                                <div class="z-info-list-con">
                                  <div class="user-and-time flex-d">
                                    <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"
                                                :preview-src-list="srcList"
                                                style="width:3rem; height:3rem;margin: 2px;"
                                                v-for="(item,index) in 10">
                                      </el-image>
                                    </div>
                                  </div>
                                </div>
                              </el-card>
                            </el-timeline-item>
                          </el-timeline>
                        </div>
                      </div>
                    </div>
                  </dv-border-box-7>
                </div>
                <div class="forthis">
                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
                    <div class="i-list-con">
                      <div class="this-con h-25 no-padding">
                        <div class="z-info-list" style="margin-top: 0;">
                          <div class="z-info-btm-grp">
                            <div class="z-info-btm-grp-top">
                              <div class="z-info-btm-grp-left">
                                <el-button size="small" icon="el-icon-s-flag">责任制
                                </el-button>
                                <el-button size="small" icon="el-icon-upload">上传
                                </el-button>
                                <el-button size="small" icon="el-icon-download" @click="toImage()">保存
                                </el-button>
                              </div>
                              <div class="z-info-btm-grp-right">
                                <el-button size="small" icon="el-icon-mic">会议
                                </el-button>
                              </div>
                            </div>
                            <div class="z-info-btm-input">
                              <el-input type="textarea" v-model="feedback"
                                        :autosize="{ minRows: 7, maxRows: 7}" placeholder="请输入反馈信息">
                              </el-input>
                              <div class="z-info-btm-input-btn">
                                <el-button size="small" icon="el-icon-chat-dot-square">发送
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </dv-border-box-7>
                </div>
              </div>

            </el-col>
            <!-- 左侧end -->
          </el-row>
        </div>
      </el-dialog>
    </div>
    <vBottomMenu ref="bottomMenu"></vBottomMenu>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'//截图组件
import supermapDialog from '@/components/supermap' //超图
import vheader from '@/components/v-header.vue' //一体化共用头部
import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
import {
  getEventDetail
} from '@/api/forest'

export default {
  components: {
    vheader,
    vBottomMenu,
    supermapDialog
  },
  data() {
    return {
      eventlog: [],
      eventDialog: false,
      resourcesList: [{
        resourceName: '取水口',
        count: '1',
        icon: 'sj-icon-waterintake'
      },
        {
          resourceName: '水鹤',
          count: '1',
          icon: 'sj-icon-watercrane'
        },
        {
          resourceName: '消防栓',
          count: '1',
          icon: 'sj-icon-firehydrant'
        },
        {
          resourceName: '起降点',
          count: '1',
          icon: 'sj-icon-landing'
        },
        {
          resourceName: '检查站',
          count: '1',
          icon: 'sj-icon-checkpoint'
        },
        {
          resourceName: '防火队',
          count: '1',
          icon: 'sj-icon-fireteam'
        },
        {
          resourceName: '重点区域',
          count: '1',
          icon: 'sj-icon-tcqh'
        },
        {
          resourceName: '摄像头',
          count: '1',
          icon: 'sj-icon-jkzx'
        }
      ],
      //图片虚拟
      url: require('@/assets/images/visual/img-sample.png'),
      srcList: [
        require('@/assets/images/visual/img-sample.png'),
        require('@/assets/images/visual/img-sample2.png')
      ],
      //文本域
      feedback: ''

    }
  },
  methods: {
    cancelEventShow() {
      console.log('关闭事件弹窗')
      this.eventlog = []
    },
    showEventDialog(eventCode) {
      let that = this
      //获取事件详情
      getEventDetail({ eventCode: eventCode }).then(res => {
        this.eventDialog = true
        this.eventlog = res.data.eventlog
        console.log(this.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.dynamicPlotting()//弹出动态绘制窗口，防止截图位置改变
            that.$refs.supermapDialog.clearM(false)
            that.$refs.supermapDialog.setMarkersRadius([markersMap])
            that.$refs.supermapDialog.dropLocation(res.data.catalogue[0].latitude, res.data.catalogue[0].longitude)
          }, 1000)
        }
      })
    },
    // 页面元素转图片
    toImage() {
      // 手动创建一个 canvas 标签
      const canvas = document.createElement('canvas')
      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
      // imageTofile是给截图范围内的父级元素自定义的ref名称
      // let canvasBox = this.$refs.imageTofile
      let canvasBox = document.getElementById('forestWarmSuperMap')
      let toolbar=document.getElementById('toolbar');
      canvasBox.removeChild(toolbar);
      // 获取父级的宽高
      const width = parseInt(window.getComputedStyle(canvasBox).width)
      const height = parseInt(window.getComputedStyle(canvasBox).height)

      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2
      canvas.height = height * 2
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      const context = canvas.getContext('2d')
      context.scale(2, 2)
      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true
      }
      html2canvas(canvasBox, options).then((canvas) => {
        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL('image/png')
        console.log(dataURL)
        this.downloadImage(dataURL)
      })
      canvasBox.appendChild(toolbar)
    },
    //下载图片
    downloadImage(url) {
      // 如果是在网页中可以直接创建一个 a 标签直接下载
      let a = document.createElement('a')
      a.href = url
      a.download = '首页截图'
      a.click()
    }
  }
}
</script>

<style>
</style>