Project_yhfu/src/views/datacenter.vue

<!--信息中心-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar w-10" ref="left">
        <div class="forthis">
          <dv-border-box-13    backgroundColor="#09140e" style="padding-bottom: 1rem;">
            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
            <div class="i-list-con h-78">

              <div class="i-list-con h-65" v-show="showSearch == true">
                <div class="head-container">
                  <el-input
                    v-model="searchName"
                    placeholder="请输入名称"
                    @blur="searchByName()"
                    clearable
                    size="small"
                    prefix-icon="el-icon-search"
                    style="margin-bottom: 20px"
                  />
                </div>
              </div>

              <div class="d-l-con-icon">
                <div class="icon-con" :class="{on:iconCurrentIndex==item.resourceTable}"
                     v-for="(item,index) in resourcesList"
                     v-on:click="indentleftSetMarkers(item.type, searchName)">
                     <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
                  <div class="iconfont icon icon-normal" :class="item.icon"></div>
                  <div class="icon-text">
                    <h6>{{ item.num }}</h6>
                    <!--<h6>{{ item.count }}</h6>-->
                    <h5>{{ item.name }}</h5>
                    <!--<h5>{{ item.resourceName }}</h5>-->
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <!--<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
                <!--:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
      <supermap ref="supermap" @sewageOutletClick="sewageOutletClick"></supermap>
      <!--      <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
      <!--      </button>-->
      <!-- 右侧 -->
      <div class="rightbar" ref="right" v-if="showSearch == true">
        <div class="forthis">
          <dv-border-box-13    backgroundColor="#09140e" style="padding-bottom: 1rem;">
            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
            <div class="this-title">
              <span>数据分布</span>
              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
            </div>
            <div class="i-list-con h-73">
              <div class="overflow-y" style="height: 39vh">
                <div class="d-l-con" :class="{on:listCurrentIndex==item.deptId}"
                     v-for="(item,index) in deptGroupList"
                     v-on:click="indentleftByDeptIdSetMarkers(item.deptId)">
                  <div class="d-l-l-text">
                    <i class="i-small"></i>
                    <h4>{{ item.deptName }}</h4>
                  </div>
                  <div class="d-l-l-count">{{ item.count }}</div>
                </div>
              </div>
              <div class="overflow-y" style="height: 34vh;">
                <div id="data-chart" style="width: 100%;height:34vh;"></div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <vBottomMenu ref="bottomMenu"></vBottomMenu>

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

<script>
import {
  getResource,
  getResourcePoint,
  getResourcePointByDeptId
} from '@/api/datacenter'

import supermap from '@/components/supermap-2.5d' //超图
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'
import {initByCameras} from "@/api/forest"; //电视墙弹窗

// import echarts from 'echarts'
let echarts = require('echarts')
export default {
  components: {
    supermap,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog
    window.choseLayerSwitching = this.choseLayerSwitching
    window.choseLayerSwitchingList = this.choseLayerSwitchingList
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    this.getResource()
    this.bottomMenuList() //获取底部公共组件消息和任务
  },
  data() {
    return {
      // 搜索框
      showSearch: false,
      // 搜索名称
      searchName: undefined,
      // 搜索类型
      searchType: undefined,
      iconCurrentIndex: '',
      listCurrentIndex: '',
      markersList: [],
      iframeBoo: true,
      open: false,
      iframeVue: null,
      activeName: 'info',
      radio: '1',
      //类型
      resourceTable: '',
      //左侧资源
      resourcesList: [],
      //右侧资源
      deptGroupList: [],
      source: [],

    }
  },

  methods: {
    // 根据名称筛选资源点位
    searchByName() {
      this.$modal.msgSuccess("正在查询，请稍后...");
      this.indentleftSetMarkers(this.searchType, this.searchName);
    },
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    bottomMenuList() {
      this.$refs.bottomMenu.selectTaskList()//获取任务列表
      this.$refs.bottomMenu.selectMessageList()//获取消息列表
    },
    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
        }
      } else if (click == 'TVWall') {
        this.$refs.TVWall.showTVWall()
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
      }
    },
    //选择图层
    choseLayerSwitching(url, isClear) {
      this.$refs.supermap.layerSwitching(url, isClear)
    },
    //选择图层(传递数组)
    choseLayerSwitchingList(urlList) {
      this.$refs.supermap.layerSwitchingList(urlList)
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    //数据分布chart
    dataChat() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('data-chart'))
      // 绘制图表
      const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
      myChart.setOption({
        dataset: {
          source: this.source
        },
        tooltip: {
          trigger: 'item'

        },
        dataZoom: [{
          show: true,
          type: 'slider',
          yAxisIndex: 0,
          left: 0,
          start: 0,
          end: this.source.length > 8 ? 8 : 100,
          width: 15
        }],
        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'
          }
        }]
      })

    },

    // 弹层方法
    showEventInfo1() {
      this.eventInfoVisible1 = true
    },
    showEventInfo2() {
      this.eventInfoVisible2 = true
    },
    getResource() {
      let that = this
      //获取左侧菜单列表
      getResource().then(res => {
        that.resourcesList = res.data
        console.log("that.resourcesList=", that.resourcesList)
        //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
        res.data.forEach(function(data, index) {
          that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-"));
          if(index < 5){
            // that.fireControlViewPoint(data.type, 'undefined');
            that.indentleftSetMarkers(data.type, '所有');
          }
        })
      })
    },
    indentleftSetMarkers(resourceTable, name) {
      // 搜索框
      // if(name == 'undefined' && this.showSearch == false){
      // if(name == '所有' && this.showSearch == false){
      if(name == '所有'){
        name = undefined;
      }else {
        this.showSearch = true;
      }
      // 搜索类型
      this.searchType = resourceTable;
      this.iconCurrentIndex = resourceTable
      let that = this
      that.resourceTable = resourceTable
      that.markersList = []
      that.source = []
      //点击左侧地图落点
      getResourcePoint(resourceTable, name).then(res => {
        that.deptGroupList = res.data.deptGroupList
        if (res.data.deptGroupList != null && res.data.deptGroupList.length > 0) {
          for (let i = 0; i < res.data.deptGroupList.length; i++) {
            let aa = [res.data.deptGroupList[i].deptName, res.data.deptGroupList[i].count]
            that.source.push(aa)
          }
        }
        if (res.data.resourceList != null && res.data.resourceList.length > 0) {
          for (let i = 0; i < res.data.resourceList.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'marker',
              bindPopupHtml: '',
              parameter:'',
              click: '',
              keepBindPopup: false,
              isAggregation: false
            }
            that.markersList.push(this.getMarkersMap(resourceTable, markersMap, res.data.resourceList[i]));
          }
        }
        if(this.showSearch == true){
          this.dataChat();
        }
        setTimeout(() => {
          that.$refs.supermap.clearM()
          that.$refs.supermap.setMarkers(that.markersList)
        }, 3000)
      })
    },
    indentleftByDeptIdSetMarkers(deptId) {
      this.listCurrentIndex = deptId
      let that = this
      //点击左侧地图落点
      getResourcePointByDeptId(that.resourceTable, deptId).then(res => {
        console.log("1===============dituluodian===============", res.data.resourceList);
        that.markersList = []
        if (res.data.resourceList != null && res.data.resourceList.length > 0) {
          for (let i = 0; i < res.data.resourceList.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'marker',
              bindPopupHtml: '',
              parameter:'',
              click: '',
              keepBindPopup: false,
              isAggregation: false
            }
            that.markersList.push(this.getMarkersMap(that.resourceTable, markersMap, res.data.resourceList[i]));
          }
        }
        setTimeout(() => {
          that.$refs.supermap.clearM()
          that.$refs.supermap.setMarkers(that.markersList)
        }, 3000)
      })
    },
    getMarkersMap(resourceTable, markersMap, item){
      if (resourceTable == 'centerdata_t_environment_key_enterprise') { //重点企业
        markersMap.icon = 'sj-icon-map-centerdata-t-environment-key-enterprise'
        markersMap.lng = (item.longitude?item.longitude:"")
        markersMap.lat = (item.latitude?item.latitude:"")
        markersMap.click = 'sewageOutletClick'
        markersMap.parameter = item
        markersMap.bindPopupHtml = '<div class="map-tip">' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>经纬度：' + (item.longitude?item.longitude:"") + ',' + (item.latitude?item.latitude:"") + '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>企业名称：' + (item.name?item.name:"") +
          '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>地址：' + (item.address?item.address:"") +
          '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>企业联系人：' + (item.contacts?item.contacts:"") +
          '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>联系电话：' + (item.contacts_phone?item.contacts_phone:"") +
          '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span></div>'
      } else if (resourceTable == 'centerdata_t_environment_source_pollution') { //污染源
        markersMap.icon = 'sj-icon-map-centerdata-t-environment-source-pollution'
        markersMap.lng = (item.longitude?item.longitude:"")
        markersMap.lat = (item.latitude?item.latitude:"")
        markersMap.bindPopupHtml = '<div class="map-tip">' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>经纬度：' + (item.longitude?item.longitude:"") + ',' + (item.latitude?item.latitude:"") + '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>污染源名称：' + (item.name?item.name:"") +
          '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>地址：' + (item.address?item.address:"") +
          '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '</div>'
      } else if (resourceTable == 'centerdata_t_environment_sewage_outlet') { //排污口
        markersMap.icon = 'sj-icon-map-centerdata_t_environment_sewage_outlet'
        markersMap.lng = (item.longitude?item.longitude:"")
        markersMap.lat = (item.latitude?item.latitude:"")
        markersMap.click = 'sewageOutletClick'
        markersMap.parameter = item
        markersMap.bindPopupHtml = '<div class="map-tip">' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>经纬度：' + (item.longitude?item.longitude:"") + ',' + (item.latitude?item.latitude:"") + '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>排污口名称：' + (item.name?item.name:"") +
          '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>地址：' + (item.address?item.address:"") +
          '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '</div>'
      }
      return markersMap;
    },
    sewageOutletClick(data) {
      const params = Object.assign({})
      params.longitude = data.longitude;
      params.latitude = data.latitude;

      const treeLabels = [{
        "id": null,
        "labelCode": "999",
        "labelName": "电视墙",
        "cameraType": null,
        "parentLabelCode": ""
      }];
      const labelChannels = [];
      for (let i in data.cameraList){
        treeLabels.push({
          "id": null,
          "labelCode": data.cameraList[i].cameraCode,
          "labelName": data.cameraList[i].cameraName,
          "cameraType": "1",
          "parentLabelCode": "999"
        })
        labelChannels.push({
          "labelCode": data.cameraList[i].cameraCode,
          "channelDates": [
            {
              "channelCode": data.cameraList[i].cameraCode,
              "channelName": data.cameraList[i].cameraName,
              "channelSn": null,
              "cameraType": "1",
              "online": "1",
              "cameraCode": "1"
            }
          ]
        })
      }
      const dianshiqiang = [
        {
          "switchTab": "2",
          "treeLabels": treeLabels,
          "labelChannels": labelChannels
        }
      ]
      if(data.cameraList.length > 0){
        this.$refs.TVWall.showTVWall1(data.longitude, data.latitude, dianshiqiang);
      }
    },
  }
}
</script>

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