Project_yhfu/src/views/afforestation.vue

<!--植树造林-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar" :class="indentleft" ref="left">
        <div class="forthis">
          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
            <div class="this-title" style="margin: 1rem 0; padding-right:1rem">
              <el-date-picker v-model="pickYear" @change="getInit()" type="year" placeholder="选择年">
              </el-date-picker>
            </div>
            <div class="i-list-con h-19">
              <div class="d-l-con" v-if="afforestationList!=null&&afforestationList.length>0" :class="{on:listCurrentIndex1 == item.id}" v-for="(item,index) in afforestationList"
                   @click="getAfforestationArea(item.id)">
                <div class="d-l-l-text">
                  <i class="i-small"></i>
                  <h4>{{ item.planName }}</h4>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
        <div class="forthis">
          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
            <div class="i-list-con h-51">
              <div class="d-l-con" :class="{on:listCurrentIndex2 == item.points}"
                   v-for="(item,index) in AfforestationAreaList" @click="setGraphicsList(item.points)">
                <div class="d-l-l-text">
                  <i class="i-small"></i>
                  <h4>区域{{ index + 1 }}</h4>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'disasterMap'" class="indexSupermapClass"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
      <!--底部 -->
      <vBottomMenu ref="bottomMenu"></vBottomMenu>

    </div>
    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
  </div>
</template>

<script>
import {
  getAfforestation, getAfforestationArea
} from '@/api/afforestation'
/** ----------------------------------摄像头预览开始------------------------------------- */
import {
  getDahuaVideoServer
} from '@/api/dahua/dahua'
import DHWs from '@/dahua/lib/DHWs'

/** ----------------------------------摄像头预览结束------------------------------------- */
import supermap from '@/components/supermap' //超图
import vheader from '@/components/v-header.vue' //一体化共用头部
import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
import TVWall from '@/components/TVWall.vue' //电视墙弹窗

let echarts = require('echarts')
export default {
  dicts: ['event_source'],
  components: {
    supermap,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog
    window.choseLayerSwitching = this.choseLayerSwitching
    window.choseLayerSwitchingList = this.choseLayerSwitchingList
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    this.getInit()
  },
  data() {
    return {
      listCurrentIndex1: '1',
      listCurrentIndex2: '2',
      pickYear: new Date(), //选择年份
      afforestationList: [],
      AfforestationAreaList: [],
      graphicsList: [],//地图区域
      //左右缩进
      indentStyle: '',
      indentleft: '',
      indentright: '',
      indentText: '收起左右栏',
      indentdisabled: false

    }
  },

  methods: {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    showDialog(click) {
      if (click == 'eventLocation') {
        this.$refs.eventLocation.showEventLocation()
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
      } else if (click == 'editableLayers') {
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
        if (!this.$refs.supermap.isEditableLayers) {
          this.$refs.supermap.isEditableLayers = true
        } else {
          this.$refs.supermap.isEditableLayers = false
        }
      } else if (click == 'layerSwitching') {
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
        if (!this.$refs.bottomMenu.showChild) {
          this.$refs.bottomMenu.showChild = true
        } else {
          this.$refs.bottomMenu.showChild = false
        }
      } else if (click == 'TVWall') {
        this.$refs.TVWall.showTVWall()
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
      } else if (click == 'forestban') {
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showChangChild = false
        if (!this.$refs.bottomMenu.showBanChild) {
          this.$refs.bottomMenu.showBanChild = true
        } else {
          this.$refs.bottomMenu.showBanChild = false
        }
      } else if (click == 'forestchang') {
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChild = false
        if (!this.$refs.bottomMenu.showChangChild) {
          this.$refs.bottomMenu.showChangChild = true
        } else {
          this.$refs.bottomMenu.showChangChild = false
        }
      }

    },
    //选择图层
    choseLayerSwitching(url, isClear) {
      this.$refs.supermap.layerSwitching(url, isClear)
    },
    //选择图层(传递数组)
    choseLayerSwitchingList(urlList) {
      this.$refs.supermap.layerSwitchingList(urlList)
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */

    getInit() {
      this.listCurrentIndex1 = '1'
      this.listCurrentIndex2 = '2'
      let that = this
      this.afforestationList = []
      this.AfforestationAreaList = []
      //获取左侧菜单列表
      getAfforestation(this.pickYear.getYear() + 1900).then(res => {
        this.afforestationList = res.data
        setTimeout(() => {
          this.$refs.supermap.clearG()
        }, 1000)
      })
    },
    getAfforestationArea(afforestationId) {
      this.listCurrentIndex1 = afforestationId
      let that = this
      //获取左侧菜单列表
      getAfforestationArea(afforestationId).then(res => {
        this.AfforestationAreaList = res.data
      })
    },
    setGraphicsList(points) {
      this.listCurrentIndex2 = points
      this.graphicsList = []
      if (points != null && points != '') {
        this.graphicsList = JSON.parse(points)
        this.$refs.supermap.clearG()
        this.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
      } else {
        this.$refs.supermap.clearG()
      }
    },

    //吉祥物收起左右框
    indent() {
      let list = document.getElementsByClassName('el-tooltip__popper')
      list[list.length - 1].style.display = 'none'
      if (this.indentStyle == '') {
        this.indentStyle = 'indent-style'
        this.indentleft = 'indent-left'
        this.indentright = 'indent-right'
        this.indentText = '展开左右栏'
      } else if (this.indentText == '展开左右栏') {
        this.indentStyle = ''
        this.indentleft = ''
        this.indentright = ''
        this.indentText = '收起左右栏'
      }
    },
    dropLocation(lat, lng) {
      this.$refs.supermap.dropLocation(lat, lng)
    },
    /** ----------------------------------摄像头预览开始------------------------------------- */
    alertLogin: function() {
      this.$modal.msg('登录中....')
    },
    alertLoginSuccess: function() {
      this.$modal.msgSuccess('登录成功！')
    },
    alertLoginFailed: function() {
      this.$modal.msgError('登陆失败！')
    },
    alertReinstall: function() {
      this.$modal.msgWarning('请重新安装客户端')
    },
    /** 预览按钮操作 */
    preview(channelCode) {
      getDahuaVideoServer().then(newResponse => {
        this.ws.detectConnectQt().then(res => {
          if (res) { // 连接客户端成功
            this.alertLogin()
            this.ws.login({
              loginIp: newResponse.loginIp,
              loginPort: newResponse.loginPort,
              userName: newResponse.userName,
              userPwd: newResponse.userPwd,
              token: '',
              https: 1
            })
            this.ws.on('loginState', (res) => {
              this.isLogin = res
              console.log('---res-----', res)
              if (res) {
                this.alertLoginSuccess()
                this.activePanel = 'key2'
                this.realTimeVideoDialog(channelCode)
              } else {
                this.alertLoginFailed()
              }
            })
          } else { // 连接客户端失败
            this.alertReinstall()
          }
        })
      })
    },
    realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
      if (!this.isLogin) {
        this.$Message.info('正在登陆客户端，请稍等......')
        return false
      }
      this.ws.openVideo(cameraParams)
    }
    /** ----------------------------------摄像头预览结束------------------------------------- */
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/base.scss';

.el-table__header {
  width: auto !important;
}

.d-dialog-con {
  position: absolute;
  left: -19rem;
  top: 0;
}
</style>