Project_yhfu/src/views/monitor.vue

<!--监控中心-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar" :class="indentleft" ref="left">
        <div class="forthis">
          <div class="this-title">
            <span>态势感知</span>
          </div>
          <div class="i-list-con h-73">
            <div class="d-l-con-icon">
            <div class="icon-con w-33 m-btm-no" v-for="(item,index) in visuForestCloudMapDeviceBOList" v-on:click="selectDeviceType()"><!--   -->
                <div class="icon icon-dot"></div>
                <div class="icon-text">
                  <h6>{{item.deviceCount}}</h6>
                  <h5>{{item.deviceName}}</h5>
                </div>
              </div>
            </div>
			<div class="overflow-y" style="height: 33vh;">
            <el-collapse accordion>
              <el-collapse-item v-for="(item,index) in region" :key="index"><!-- deptId -->
                <template slot="title">
                  <div class="d-l-con sj-collapse" v-on:click="selectCameraByDeptId(item.deptId)">
                    <div class="d-l-l-text">
                      <h4 class="collapse-title">{{item.deptName}}</h4>
                    </div>
                    <div class="d-l-l-count">{{item.deptCount}}</div>
                  </div>
                  </template>
              </el-collapse-item>
            </el-collapse>
						</div>

            <!-- 横向柱状 echart -->
			<div class="overflow-y" style="height: 33vh;">
            <div id="camera-chart" style="width: 100%;height:33vh;"></div>
			</div>
          </div>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'"
                :mapSite="{doubleClickZoom:false}"
                :codes="['9fa5']" :isSideBySide="false" @preview="preview"></supermap>
      </button>
      <!-- 右侧 -->
      <div class="rightbar" :class="indentright" ref="right">
        <div class="forthis">
          <div class="this-title">
            <span>列表</span>
          </div>
          <div class="i-list-con h-43">
						<span v-for="(item,index) in visuForestCloudCameraBOList"  v-on:click="dropLocation(item.latitude,item.longitude)">
							<div class="d-l-con" @click="">
								<div class="d-l-l-text">
									<i class="iconfont sj-icon-jkzx icon-sxt"></i>
									<h4>{{item.cameraName}}</h4>
								</div>
							</div>
						</span>
          </div>
        </div>
        <div class="forthis">
          <div class="this-title">
            <span>重点区域</span>
          </div>
          <div class="i-list-con h-25">
            <div class="d-l-con" @click="">
              <div class="d-l-l-text">
                <i class="i-small"></i>
                <h4>三门林场东</h4>
              </div>
            </div>
            <div class="d-l-con" @click="">
              <div class="d-l-l-text">
                <i class="i-small"></i>
                <h4>四家林场西</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <vBottomMenu ref="bottomMenu"></vBottomMenu>
      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
          src="@/assets/images/mascot.png"/></div>
      </el-tooltip>

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

<script>
  import { selectDeviceType, selectCameraByDeptId } from '@/api/monitor'

  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 {getDahuaVideoServer} from "@/api/dahua/dahua";
  import DHWs from '@/dahua/lib/DHWs'

  /** ----------------------------------摄像头预览结束------------------------------------- */
  // import echarts from 'echarts'
  let echarts = require('echarts')

  export default {
    components: {
      supermap,
      vheader,
      vBottomMenu,
      eventLocation
    },
    created() {
      /** ----------------------------------摄像头预览开始------------------------------------- */
      const DHWsInstance = DHWs.getInstance();
      this.ws = DHWsInstance;
      console.log(this.ws);
      /** ----------------------------------摄像头预览结束------------------------------------- */

      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog=this.showDialog
      window.closeChild=this.closeChild
      window.choseLayerSwitching=this.choseLayerSwitching
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
    mounted() {
      this.selectDeviceType()
    },
    data() {
      return {
        /** ----------------------------------摄像头预览开始------------------------------------- */
        activePanel: 'key1',
        isLogin: false,
        cameraParams: [],
        /** ----------------------------------摄像头预览结束------------------------------------- */
        visuForestCloudMapDeviceBOList: [],
        visuForestCloudCameraBOList: [],
        cameraMarkersList: [],
        sourceData:[],
        iframeBoo: true,
        open: false,
        iframeVue: null,
        activeName: 'info',
        radio: '1',
        region: [],
        //左右缩进
        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
        } else if (click == 'editableLayers') {
          this.$refs.bottomMenu.showChild = 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
          if (!this.$refs.bottomMenu.showChild) {
            this.$refs.bottomMenu.showChild = true
          } else {
            this.$refs.bottomMenu.showChild = false
          }
        }
      },
      //点击关闭选择图层
      closeChild() {
        this.$refs.bottomMenu.showChild = false
      },
      //选择图层
      choseLayerSwitching(url) {
        this.$refs.supermap.layerSwitching(url, true);
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
      cameraChat(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('camera-chart'))
        // 绘制图表
        const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
        myChart.setOption({
          dataset: {
            source: this.sourceData
          },
          tooltip: {
            trigger: 'item'

          },
          grid: {
            top: '5%',
            left: '2%',
            // right: "4%",
            bottom: '-15%',
            width: '75%',
            containLabel: true
          },
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: {
            type: 'category', // 不设置类目轴，抽离的dataset数据展示不出来
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#5deaff',
                fontSize: '12'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },

          series: [{

            type: 'bar',
            animationCurve: 'easeOutBack',
            barWidth: 5,
            label: {
              show: true,
              position: 'right',
              offset: [0, 0],
              color: '#88dfd5',
              // fontSize: "12",
              style: {
                fill: '#fff'
              }
            },
            backgroundBar: {
              show: true,
              style: {
                fill: 'rgba(97,152,255,0.20)'
              }
            },
            barStyle: {
              stroke: 'rgba(41,244,236,1)'
            },
            gradient: {
              color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
            },
            itemStyle: {
              label: {
                show: true
              },
              labelLine: {
                show: false
              },
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(41,244,236,0)'
              },
                {
                  offset: 1,
                  color: 'rgba(41,244,236,.5)'
                }
              ]),
              borderColor: '#a2f9f7',
              shadowBlur: 16,
              shadowColor: '#a2f9f7'
            }
          }]
        })
      },
      selectDeviceType() {
        //获取左侧动态感知设备
        let that = this
        selectDeviceType().then(res => {
          that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList


          that.region = res.data.visuForestCloudTodaySjfbBOList

          if (res.data.visuForestCloudTodaySjfbBOList!=null&&res.data.visuForestCloudTodaySjfbBOList.length>0){
            for (let i = 0; i < res.data.visuForestCloudTodaySjfbBOList.length; i++) {
              let aa=[];
              aa.push(res.data.visuForestCloudTodaySjfbBOList[i].deptName)
              aa.push(Number(res.data.visuForestCloudTodaySjfbBOList[i].deptCount))
              this.sourceData.push(aa);
            }
          }

          that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
          this.cameraChat();
          if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList.length > 0) {
            for (let i = 0; i < res.data.visuForestCloudCameraBOList.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'camera',
                bindPopupHtml: '',
                click: 'preview',
                parameter: '',
                keepBindPopup: false,
                isAggregation: false
              }
              if (res.data.visuForestCloudCameraBOList.length > 50) {
                markersMap.isAggregation = true
              }
              if(res.data.visuForestCloudCameraBOList[i].channelCode!=null){
                markersMap.parameter = res.data.visuForestCloudCameraBOList[i].channelCode.split(',')
              }else{
                markersMap.parameter = [];
              }

              markersMap.lng = res.data.visuForestCloudCameraBOList[i].longitude
              markersMap.lat = res.data.visuForestCloudCameraBOList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.visuForestCloudCameraBOList[i].longitude + ',' + res.data.visuForestCloudCameraBOList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>摄像头名称：' + res.data.visuForestCloudCameraBOList[i].cameraName + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>'
              this.cameraMarkersList.push(markersMap)
              //   cameraAccount: "1"
              // cameraCode: "1000010"
              // cameraFactory: "2"
              // cameraIp: "1"
              // cameraName: "2"
              // cameraPasword: "2"
              // cameraPort: 2
              // cameraRadius: 20
              // cameraRegion: "3"
              // dataDeptId: null
              // dataStatus: null
              // eventType: null
              // height: "11"
              // id: "0d165fc362514f79b12a899ea66295fd"
              // latitude: "49.325625"
              // longitude: "125.3333"
            }
            setTimeout(() => {
              that.$refs.supermap.clearM(true)
              that.$refs.supermap.clearM(false)
              that.$refs.supermap.setMarkers(this.cameraMarkersList)
            },1000)
          }
        })
      },
      dropLocation(lat,lng) {
        this.$refs.supermap.dropLocation(lat,lng)
      },
      selectCameraByDeptId(depId) {
        let that=this;
        that.cameraMarkersList=[];
        that.visuForestCloudCameraBOList =[];
        selectCameraByDeptId(depId).then(res => {
          //根据设备类型查看列表
          that.visuForestCloudCameraBOList = res.data

          if (res.data != null && res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'camera',
                bindPopupHtml: '',
                click: 'preview',
                parameter: '',
                keepBindPopup: false,
                isAggregation: false
              }
              if (res.data.length > 50) {
                markersMap.isAggregation = true
              }
              if(res.data[i].channelCode!=null){
                markersMap.parameter = res.data[i].channelCode.split(',')
              }else{
                markersMap.parameter = []
              }

              markersMap.lng = res.data[i].longitude
              markersMap.lat = res.data[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>摄像头名称：' + res.data[i].cameraName + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '</div>'
              this.cameraMarkersList.push(markersMap)
              //   cameraAccount: "1"
              // cameraCode: "1000010"
              // cameraFactory: "2"
              // cameraIp: "1"
              // cameraName: "2"
              // cameraPasword: "2"
              // cameraPort: 2
              // cameraRadius: 20
              // cameraRegion: "3"
              // dataDeptId: null
              // dataStatus: null
              // eventType: null
              // height: "11"
              // id: "0d165fc362514f79b12a899ea66295fd"
              // latitude: "49.325625"
              // longitude: "125.3333"
            }
            setTimeout(() => {
              that.$refs.supermap.clearM(true)
              that.$refs.supermap.clearM(false)
              that.$refs.supermap.setMarkers(this.cameraMarkersList)
            },1000)
          }
        })
      },
      //吉祥物收起左右框
      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 = '收起左右栏'
        }
      },
      /** ----------------------------------摄像头预览开始------------------------------------- */
      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 rel="stylesheet/scss" lang="scss" scoped>
  @import '@/assets/styles/base.scss';


  .header {
    width: 100%;
    background: #a7ec12;
    background: url(../assets/images/visual/v-header.png) repeat-x;
    height: 2.5rem;
    display: flex;
    align-items: center;
    z-index: 1000;
    position: absolute;
    top: 0;

    .title {
      display: flex;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);

      h3 {
        display: flex;
        align-items: center;
        text-align: center;
        color: $white;
        font-size: 1.8rem;
        font-family: $fontFk;
        background: url(../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;

        img {
          margin-right: .5rem;
        }
      }
    }

    .bignav {
      height: 40px;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      top: 2.4rem;
      z-index: 1000;
      border-radius: 5px;
      display: flex;
      justify-content: cetner;
      align-items: center;

      .bignav-list {
        background: url(../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;
        float: left;
        display: flex;
        justify-content: cetner;
        align-items: center;
        color: $white;
        height: 40px;
        font-size: 12px;
        padding: 0 23px;
        cursor: pointer;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        transition: all 0.3s ease-in-out;
      }

      .router-link-active,
      .bignav-list:hover {
        filter: brightness(2.3);
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
        color: $inBlueHover;
        border-bottom: 1px solid $inBlueHover;
        transition: all 0.3s ease-in-out;

      }
    }

  }
</style>