Project_yhfu/src/views/resources.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" @fatherMethod="fatherMethod" @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>
    <TVWalls ref="TVWalls"></TVWalls>
    <TVWalls2 ref="TVWalls2"></TVWalls2>
  </div>
</template>

<script>
  import {
    fireControlViewList,
    fireControlViewPoint,
    getResourceDetail
  } 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 TVWalls from "@/components/TVWalls.vue"; //电视墙弹窗
  import TVWalls2 from "@/components/TVWalls2.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,
      TVWalls,
      TVWalls2,
    },
    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;
        }
      },
      fatherMethod(dianshiqiang, longitude, latitude, item) {
        this.$refs.TVWalls2.showTVWall(
          dianshiqiang, {
            longitude: longitude,
            latitude: latitude,
          },
          item
        );
      },
      //选择图层
      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("jiaotong").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("jiaotong", "");
        });
      },
      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 = "jiaotong"
        }
        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 == "jiaotong" ? 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("_", "-");
        console.log(icon)
        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) {
        const params = Object.assign({});
        params.longitude = data.longitude;
        params.latitude = data.latitude;
        let data1 = null
        getResourceDetail(data.indexName, data.id).then(res => {
          data1 = res.data
          const treeLabels = [{
            id: null,
            labelCode: "999",
            labelName: "电视墙",
            cameraType: null,
            parentLabelCode: "",
          }, ];
          const labelChannels = [];
          if (0 < data1.cameras.length) {
            for (let i in data1.cameras) {
              treeLabels.push({
                id: null,
                labelCode: data1.cameras[i].cameraCode,
                labelName: data1.cameras[i].cameraName,
                cameraType: data1.cameras[i].cameraType,
                parentLabelCode: "999",
              });
              labelChannels.push({
                labelCode: data1.cameras[i].cameraCode,
                channelDates: [{
                  channelCode: data1.cameras[i].cameraCode,
                  channelName: data1.cameras[i].cameraName,
                  channelSn: null,
                  cameraType: data1.cameras[i].cameraType,
                  online: "1",
                  cameraCode: "1",
                }, ],
              });
            }
            const dianshiqiang = [{
              switchTab: "2",
              treeLabels: treeLabels,
              labelChannels: labelChannels,
            }, ]
            this.$refs.TVWalls.showTVWall1(
              dianshiqiang, {
                longitude: params.longitude,
                latitude: params.latitude
              },
              data1.detail
            );
          }
        })
      },
      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 == "jiaotong" ? 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>