修改资源打开电视墙

src/api/datacenter.js

@@ -14,3 +14,11 @@ export function fireControlViewPoint(type, name,deptId) {
     method: 'get'
   })
 }
+
+//点击左侧菜单列表查询落点+按部门分组 NEW
+export function getResourceDetail(type, id) {
+  return request({
+    url: '/sooka-middleware/visual/getResourceDetail?type='+type+'&id='+id,
+    method: 'get'
+  })
+}

src/assets/styles/base.scss

@@ -93,6 +93,108 @@ $date-state3: #d6333b;
   height: 740px !important;
 }
 
+.TVWallCustomWidth-right {
+  width: 1500px !important;
+  height: 750px !important;
+  background: #04080c !important;
+  box-shadow: $barShadow !important;
+  border: 1px $barBorder !important;
+
+  .el-dialog__header {
+    padding: 15px 20px !important;
+    background-image: -moz-linear-gradient($GradualGreen) !important;
+    background-image: -webkit-linear-gradient($GradualGreen) !important;
+    background-image: linear-gradient($GradualGreen) !important;
+    box-shadow: $shadowTitle !important;
+
+    .el-dialog__title {
+      font-weight: bolder !important;
+      color: #3cd7ef !important;
+    }
+  }
+
+  .leader-info-container {
+    // padding: .5rem;
+    display: flex;
+    height: 650px;
+    width: 28rem;
+    overflow-y: hidden;
+    flex-direction: column;
+    padding: 0 1rem;
+    float: right;
+
+    .leader-info-list-con {
+      width: 100%;
+      padding: 1rem;
+      margin-bottom: .5rem;
+      background-image: -moz-linear-gradient($GradualGreen) !important;
+      background-image: -webkit-linear-gradient($GradualGreen) !important;
+      background-image: linear-gradient($GradualGreen) !important;
+      border: solid 1px #7dc2eb;
+      box-shadow: $shadowListHover !important;
+      border-radius: 5px;
+
+      td {
+        margin: .4rem 0;
+        color: $white;
+        vertical-align: middle;
+      }
+      .td1 {
+        width: 6rem;
+      }
+      .td2 {
+        width: 15rem;
+      }
+      //.td-height-16{
+      //  height: 23px;
+      //}
+      //.td-height-14{
+      //  height: 26px;
+      //}
+      //.td-height-13{
+      //  height: 31px;
+      //}
+      //.td-height-12{
+      //  height: 35px;
+      //}
+      //.td-height-11{
+      //  height: 39px;
+      //}
+      //.td-height-7{
+      //  height: 52px;
+      //}
+      .td-height-16{
+        height: 38px;
+      }
+      .td-height-14{
+        height: 44px;
+      }
+      .td-height-13{
+        height: 47px;
+      }
+      .td-height-12{
+        height: 51px;
+      }
+      .td-height-11{
+        height: 54px;
+      }
+      .td-height-7{
+        height: 88px;
+      }
+      h4 {
+        margin: .4rem 0;
+        color: $white;
+      }
+    }
+
+    .leader-info-list-con:hover {
+      background-image: -moz-linear-gradient($popupBG) !important;
+      background-image: -webkit-linear-gradient($popupBG) !important;
+      background-image: linear-gradient($popupBG) !important;
+    }
+  }
+}
+
 //公共
 body {
   height: 100%;

src/views/resources.vue

@@ -8,37 +8,17 @@
       <!-- 左侧 -->
       <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"
-            />
+          <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"
-              />
+              <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-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>
@@ -50,38 +30,22 @@
         </div>
       </div>
       <!-- 地图 -->
-      <supermap
-        ref="supermap"
-        style="width: 100%; height: 100vh"
-        @sewageOutletClick="sewageOutletClick"
-      ></supermap>
+      <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"
-            />
+          <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"
-              />
+              <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-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>
@@ -100,158 +64,166 @@
     </div>
     <eventLocation ref="eventLocation"></eventLocation>
     <TVWall ref="TVWall"></TVWall>
+    <TVWalls ref="TVWalls"></TVWalls>
   </div>
 </template>
 
 <script>
-import {
-  fireControlViewList,
-  fireControlViewPoint,
-} from "@/api/datacenter";
+  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 { getIconBg } from "@/api/components/sookaMapIcon";
-import {getUserProfile} from "@/api/system/user";
-import { Button } from '@/dahua/TVWalllib/iview' //资源底色控制文件
+  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 {
+    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);
-      });
+  // import echarts from 'echarts'
+  let echarts = require("echarts");
+  export default {
+    components: {
+      Button,
+      supermap,
+      vheader,
+      vBottomMenu,
+      eventLocation,
+      TVWall,
+      TVWalls
     },
-    // 根据名称筛选资源点位
-    searchByName() {
-      this.$modal.msgSuccess("正在查询，请稍后...");
-      this.fireControlViewPoint(this.resourceTable, this.searchName);
+    created() {
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      window.showDialog = this.showDialog;
+      window.choseLayerSwitching = this.choseLayerSwitching;
+      window.choseLayerSwitchingList = this.choseLayerSwitchingList;
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
     },
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    bottomMenuList() {
-      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
-      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
+    mounted() {
+      // 初始化地图数据
+      this.getSuperMapUrl();
+
+      setTimeout(() => {
+        this.fireControlViewList();
+      }, 2000)
+      this.bottomMenuList(); //获取底部公共组件消息和任务
     },
-    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 {
+    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;
-        }
-      } 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: [
-          {
+      },
+      //选择图层
+      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",
@@ -260,43 +232,41 @@ export default {
             start: 0,
             end: this.source.length > 8 ? 8 : 100,
             width: 15,
+          }, ],
+          grid: {
+            top: "5%",
+            left: "12%",
+            // right: "4%",
+            bottom: "-15%",
+            width: "75%",
+            containLabel: true,
           },
-        ],
-        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: {
+          xAxis: {
             show: false,
+            type: "value",
           },
-          axisLine: {
-            show: false,
+          yAxis: {
+            type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
+            inverse: true,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#5deaff",
+                fontSize: "12",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
-        },
 
-        series: [
-          {
+          series: [{
             type: "bar",
             animationCurve: "easeOutBack",
             barWidth: 5,
@@ -329,8 +299,7 @@ export default {
               labelLine: {
                 show: false,
               },
-              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                   offset: 0,
                   color: "rgba(41,244,236,0)",
                 },
@@ -343,66 +312,210 @@ export default {
               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);
+      },
+      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'){
+          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,
@@ -413,170 +526,23 @@ export default {
                 keepBindPopup: false,
                 isAggregation: false,
               };
+              console.log("resourceTable=", that.resourceTable);
+              console.log("res.data[i]=", res.data.pointList[i]);
               that.markersList.push(
-                this.getMarkersMap(
-                  resourceTable == "jiaotong" ? res.data.pointList[i].indexName:resourceTable,
-                  markersMap,
-                  res.data.pointList[i]
-                )
+                that.getMarkersMap(
+                  that.resourceTable == "jiaotong" ? res.data.pointList[i].indexName : that.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) {
-      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",
-            },
-          ],
+          that.$refs.supermap.clearM();
+          that.$refs.supermap.setMarkers(that.markersList);
         });
-      }
-      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 == "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";
+  @import "@/assets/styles/base.scss";
 </style>