Project_yhfu/src/views/datacenter.vue

<!--信息中心-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar w-10" ref="left" style="width:12rem !important;height: 80vh;overflow-y: hidden;">
        <div class="forthis">
          <dv-border-box-13
            backgroundColor="rgba(12, 19, 38, .90)"
            style="padding-bottom: 1rem;height: 80vh;"
          >
            <img
              src="../assets/images/integrated/light.png"
              style="width: 100%; margin-top: 0.4rem"
            />
            <div class="sj-search">
              <el-input
                v-model="searchName"
                placeholder="请输入名称"
                @keyup.enter.native="searchByName()"
                clearable
                size="small"
                prefix-icon="el-icon-search"
              />
            </div>
            <div class="i-list-con" style="height: 71vh;">
              <div class="d-l-con-icon">
                <div
                  class="icon-con"
                  :class="{ on: iconCurrentIndex == item.resourceTable }"
                  v-for="(item, index) in resourcesList"
                  v-on:click="fireControlViewPoint(item.type, searchName)"
                >
                  <div
                    class="iconfont icon icon-normal"
                    :class="item.icon"
                    :style="'background:' + item.bg"
                  ></div>
                  <div class="icon-text">
                    <h6>{{ item.num }}</h6>
                    <h5>{{ item.name }}</h5>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <supermap
        ref="supermap"
        style="width: 100%; height: 100vh"
        @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="rgba(12, 19, 38, .90)"
            style="padding-bottom: 1rem"
          >
            <img
              src="../assets/images/integrated/light.png"
              style="width: 100%; margin-top: 0.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 {
  fireControlViewList,
  fireControlViewPoint,
} 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 { getIconBg } from "@/api/components/sookaMapIcon";
import {getUserProfile} from "@/api/system/user";
import { Button } from '@/dahua/TVWalllib/iview' //资源底色控制文件

// import echarts from 'echarts'
let echarts = require("echarts");
export default {
  components: {
    Button,
    supermap,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall,
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog;
    window.choseLayerSwitching = this.choseLayerSwitching;
    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    // 初始化地图数据
    this.getSuperMapUrl();

    setTimeout(() => {
      this.fireControlViewList();
    }, 2000)
    this.bottomMenuList(); //获取底部公共组件消息和任务
  },
  data() {
    return {
      // 搜索框
      showSearch: true,
      // 搜索名称
      searchName: "",
      // 搜索类型
      iconCurrentIndex: "",
      listCurrentIndex: "",
      markersList: [],
      iframeBoo: true,
      open: false,
      iframeVue: null,
      activeName: "info",
      radio: "1",
      //类型
      resourceTable: "",
      //左侧资源
      resourcesList: [],
      //右侧资源
      deptGroupList: [],
      source: [],
    };
  },
  watch: {
  },
  methods: {
    //初始化地图数据
    getSuperMapUrl(){
      getUserProfile().then(response => {
        let mapDeptId=response.mapDeptId
        let num = 0;
        if (mapDeptId == "365") {
          num = 0;
        } else if (mapDeptId == "369") {
          num = 1;
        } else if (mapDeptId == "371") {
          num = 2;
        } else if (mapDeptId == "373") {
          num = 3;
        } else if (mapDeptId == "372") {
          num = 4;
        } else if (mapDeptId == "370") {
          num = 5;
        }
        this.$refs.supermap.removeAllviewer(num, -1);
      });
    },
    // 根据名称筛选资源点位
    searchByName() {
      this.$modal.msgSuccess("正在查询，请稍后...");
      this.fireControlViewPoint(this.resourceTable, this.searchName);
    },
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    bottomMenuList() {
      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
    },
    showDialog(click) {
      if (click == "eventLocation") {
        this.$refs.eventLocation.showEventLocation();
        this.$refs.bottomMenu.showMeasure = false;
        this.$refs.bottomMenu.showChild = false;
      } else if (click == "editableLayers") {
        this.$refs.bottomMenu.showChild = false;
        if (!this.$refs.bottomMenu.showMeasure) {
          this.$refs.bottomMenu.showMeasure = true;
        } else {
          this.$refs.bottomMenu.showMeasure = false;
        }
      } else if (click == "layerSwitching") {
        this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = 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: this.source.length > 8 ? true : false,
            // show: true,
            type: "slider",
            yAxisIndex: 0,
            left: 0,
            start: 0,
            end: this.source.length > 8 ? 8 : 100,
            width: 15,
          },
        ],
        grid: {
          top: "5%",
          left: "12%",
          // 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",
            },
          },
        ],
      });
    },
    fireControlViewList() {
      let that = this;
      fireControlViewList("xiaofang").then(function (res) {
        for (let i = 0; i < res.data.length; i++) {
          if(res.data[i].type !='centerdata_t_forest_fireteam'){
            that.resourcesList.push(res.data[i]);
          }
        }
        //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
        that.resourcesList.forEach(function (data, index) {
          let icon =
            "sj" +
            "-" +
            "icon" +
            "-" +
            data.type.replaceAll("_", "-").replaceAll("@", "-");
          console.log("icon_" + (index + 1) + "=", icon);
          that.$set(that.resourcesList[index], "icon", icon);
          //每个图标对应固定颜色
          that.$set(that.resourcesList[index], "bg", getIconBg(icon));
        });
        that.fireControlViewPoint("xiaofang", "");
      });
    },
    fireControlViewPoint(resourceTable, name) {
      // 搜索框
      if (name == "" || name == null || name == undefined) {
        name = "";
      } else {
        this.showSearch = true;
      }
      console.log("name=", name);
      console.log("this.showSearch=", this.showSearch);
      if(resourceTable == this.resourceTable){
        resourceTable = "xiaofang"
      }
      let that = this;
      that.resourceTable = resourceTable;
      that.markersList = [];
      that.source = [];
      fireControlViewPoint(resourceTable, name,"").then((res) => {
        let pointList = res.data.pointList;
        that.deptGroupList = res.data.deptList;
        if (res.data.deptList != null && res.data.deptList.length > 0) {
          for (let i = 0; i < res.data.deptList.length; i++) {
            let aa = [
              res.data.deptList[i].deptName,
              res.data.deptList[i].count,
            ];
            that.source.push(aa);
          }
        }

        if (res.data.pointList != null && res.data.pointList.length > 0) {
          for (let i = 0; i < res.data.pointList.length; i++) {
            if(res.data.pointList[i].indexName != 'centerdata_t_forest_fireteam'){
              let markersMap = {
                lng: res.data.pointList[i].longitude,
                lat: res.data.pointList[i].latitude,
                icon: "marker",
                bindPopupHtml: "",
                click: "",
                name: i,
                keepBindPopup: false,
                isAggregation: false,
              };
              that.markersList.push(
                this.getMarkersMap(
                  resourceTable == "xiaofang" ? res.data.pointList[i].indexName:resourceTable,
                  markersMap,
                  res.data.pointList[i]
                )
              );
            }
          }
        }
        if (this.showSearch == true) {
          this.dataChat();
        }
        that.$refs.supermap.clearM(false);
        that.$refs.supermap.setMarkers(that.markersList);
      });
    },
    getMarkersMap(resourceTable, markersMap, item) {
      let icon = "sj-icon-map-"+resourceTable.replaceAll("_", "-");
      markersMap.lng = item.longitude;
      markersMap.lat = item.latitude;
      markersMap.click = "sewageOutletClick";
      markersMap.parameter = item;
      markersMap.icon = icon;
      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.phone ? item.phone : "") +
        "</h4>" +
        "                </div>" +
        "                </div>" +
        "                </span></div>";
      return markersMap;
    },
    sewageOutletClick(data) {
      console.log(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: data.cameraList[i].cameraType,
          parentLabelCode: "999",
        });
        labelChannels.push({
          labelCode: data.cameraList[i].cameraCode,
          channelDates: [
            {
              channelCode: data.cameraList[i].cameraCode,
              channelName: data.cameraList[i].cameraName,
              channelSn: null,
              cameraType: data.cameraList[i].cameraType,
              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
        );
      }
    },
    indentleftByDeptIdSetMarkers(deptId) {
      this.listCurrentIndex = deptId;
      let that = this;
      //点击左侧地图落点
      fireControlViewPoint(that.resourceTable,that.searchName, deptId).then((res) => {
        that.markersList = [];
        if (res.data != null && res.data.pointList.length>0) {
          for (let i = 0; i < res.data.pointList.length; i++) {
            let markersMap = {
              lng: res.data.pointList[i].longitude,
              lat: res.data.pointList[i].latitude,
              icon: "marker",
              bindPopupHtml: "",
              click: "",
              name: i,
              keepBindPopup: false,
              isAggregation: false,
            };
            console.log("resourceTable=", that.resourceTable);
            console.log("res.data[i]=", res.data.pointList[i]);
            that.markersList.push(
              that.getMarkersMap(
                that.resourceTable == "xiaofang" ? res.data.pointList[i].indexName:that.resourceTable,
                markersMap, res.data.pointList[i])
            );
          }
        }
        that.$refs.supermap.clearM();
        that.$refs.supermap.setMarkers(that.markersList);
      });
    },
  },
};
</script>

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