提交5

lishifeng

2020-09-15 ce10677f47a14879424e7f562f78442cc03cfda1

 src/pages/index.vue

@@ -10,7 +10,7 @@
          <i class="iconfont el-icon-chazhao" @click="dialogVisible = true"></i>
        </el-tooltip>
      </div>

 
      <!-- <my-el-tree @node-click="nodeClick" :data="data"></my-el-tree> -->
      <el-tree
        @node-click="nodeClick"
@@ -55,15 +55,15 @@
    </content-box>
  </flex-layout>
</template>

 
<script>
import Vue from "vue";
import BMapGL from "BMapGL";
import BMapGL from "BMap";
import ContentBox from "../components/ContentBox";
/* import MyElTree from "../components/MyElTree"; */
import PieChart from "../components/chart/PieChart";
import InfoWindowTest from "../components/InfoWindowTest";

 
import {
  searchBattState,
  searchPowerOff,
@@ -87,7 +87,7 @@
import { log } from "util";
import { async, Promise } from "q";
import { json } from "body-parser";

 
let chart1, chart2, chart3, chart4;
let infoWindowTest = Vue.extend(InfoWindowTest);
let showInfoWindowTest = new infoWindowTest().$mount();
@@ -127,7 +127,7 @@
      }
    };
  },

 
  methods: {
    // 向父级发送同步页面的指令
    syncPage() {
@@ -172,171 +172,14 @@
      done();
    },
    initMap() {
      const that = this;
      // 按住鼠标右键，修改倾斜角和角度
      this.map = new BMapGL.Map("allmap"); // 创建Map实例
      this.point = new BMapGL.Point(this.lng, this.lat); // 创建点坐标this.lng, this.lat 113.971,30.605
      this.map.centerAndZoom(this.point, 15); // 初始化地图,设置中心点坐标和地图级别

      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      this.map.setHeading(64.5);
      this.map.setTilt(73);
      this.marker = new BMapGL.Marker(this.point); // 创建点
      this.map.addOverlay(this.marker); // 将标注添加到地图中

      //添加地图机房
      this.addseRoomlist.forEach(item => {
        this.marker = new BMapGL.Marker(
          new BMapGL.Point(item.data.longitude, item.data.latitude)
        );
         /* console.log('item.data.longitude, item.data.latitude',item.data.longitude, item.data.latitude); */

        this.map.addOverlay(this.marker);
        this.marker.addEventListener("click", e => {
          /*    console.log("this.point", this.point); */

          that.map.openInfoWindow(
            this.infoWindow,
            new BMapGL.Point(item.data.longitude, item.data.latitude)
          ); //开启信息窗口
        });
      });
      this.opts = {
        width: 350, // 信息窗口宽度
        height: 150, // 信息窗口高度
        title: `<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 20px;">湖北省-武汉市-测试机房1</p>`, // 信息窗口标题* ${this.medatas.info.label}
        message: "地址信息"
      };

      this.infoWindow = new BMapGL.InfoWindow( // 创建信息窗口对象
        `<div style="color: black;padding:8px" ><div >蓄电池组告警数目：50 <a href>详情>></a></div><div style="margin-top:5px"> 蓄电池组落后数目：0 &nbsp <a href>详情>><a></div> <div style="margin-top:5px">蓄电池组延时数目：0&nbsp <a href>详情>><a></div>
          <div style="margin-top:5px"><a href="syncPage()">实时数据</a> 历史数据</div> <div style="margin-top:5px">地址： ${
            this.medatas.address
          }</div></div>` /*  */,
        this.opts
      );

      /* that.map.openInfoWindow(this.infoWindow, this.point); */

      this.onCLickMap(); //点击事件获取坐标

      /* map地图右键菜单 */
      var menu = new BMapGL.ContextMenu();
      var txtMenuItem = [
        {
          text: "搜索地址",
          callback() {}
        },
        {
          text: "放大",
          callback: function() {
            that.map.zoomIn();
          }
        },
        {
          text: "缩小",
          callback: function() {
            that.map.zoomOut();
          }
        },
        {
          text: "设置中心点",
          async callback() {
            /*  that.map.zoomCentral(); */
            /*获取地图的中心坐标并将地图移动该坐标 */
            const centerMove = await searchCoordinateMove();
            const newcenterMove = JSON.parse(centerMove.data.result).data;
            console.log("newcenterMove", newcenterMove);

            /* 设置地图默认中心坐标接口 */
            const center = await searchCoordinate({
              map_longitude: newcenterMove[0].map_longitude,
              map_latitude: newcenterMove[0].map_latitude,
              map_level: newcenterMove[0].map_level
            });
            /*      console.log("center", center); */
          }
        },
        {
          text: "查看全国",
          callback: function() {
            that.map.setZoom(5);
          }
        },
        {
          text: "设置机房",
          async callback() {
            //获取站点名
            const addSetdian = await addMapSetdian();
            const addSetmap = JSON.parse(addSetdian.data.result).data.map(
              item => {
                item.label =
                  item.StationName1 +
                  "-" +
                  item.StationName2 +
                  "-" +
                  item.StationName5 +
                  "-" +
                  item.StationName3;
                return item;
              }
            );
            // console.log("addSetdian", addSetdian);
            // console.log("addSetmap", addSetmap);
            const point = new BMapGL.Point(that.lng, that.lat);
            const marke = new BMapGL.Marker(point);
            that.map.addOverlay(marke);

            /* 可托拽的标注 */
            /*    that.marker.enableDragging();
             that.marker.addEventListener("dragend", function(e) {
              console.log("当前位置：" + e.point.lng + ", " + e.point.lat);
            }); */

            /* 设置站点窗口 */
            var opts = {
              width: "auto", // 信息窗口宽度
              height: "auto", // 信息窗口高度
              title:
                '<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 10px;">设置站点位置  </p>', // 信息窗口标题
              message: "地址信息"
            };
            var geoc = new BMapGL.Geocoder(); //坐标与路名的转换

            showInfoWindowTest.homeList = addSetmap;

            // 逆地址解析，通过经纬度获取地址信息
            geoc.getLocation(marke.getPosition(), function(rs) {
              /*   console.log("rs", rs); */

              showInfoWindowTest.address = rs.address;
              showInfoWindowTest.point = marke.getPosition();
            });
            // 设置面板
            this.infoWindow = new BMapGL.InfoWindow(
              showInfoWindowTest.$el,
              opts
            );

            that.map.openInfoWindow(this.infoWindow, point);
            marke.addEventListener("click", e => {
              //左击标注
              that.map.openInfoWindow(this.infoWindow, point);
            });
          }
        }
      ];
      for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(
          new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, {
            width: 100, // 指定菜单项的宽度
            id: "menu" + i // 指定菜单项dom的id
          })
        );
      }
      this.map.addContextMenu(menu);
      this.map.centerAndZoom(this.point, 1); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom();
         this.map.disableDoubleClickZoom();
    },

 
    /* loadNode 加载子树数据的方法*/
    async loadNode(node, resolve) {
      /*   console.log("node", node); */
@@ -358,11 +201,11 @@
        /* 查询市 */
        const city = await searchCity({ StationName1: node.data.label });
        //console.log('city.data.result',city.data.result);

 
        if (city.data.result && JSON.parse(city.data.result).code == 0) {
          return this.$message.error(JSON.parse(city.data.result).msg);
        }

 
        const citys = JSON.parse(city.data.result).data;
        const cityList = citys.map(item => {
          return { label: item };
@@ -376,16 +219,16 @@
          StationName2: node.data.label
        });
        //console.log(' county', county);

 
        if (county.data.result && JSON.parse(county.data.result).code == 0) {
          return this.$message.error(JSON.parse(county.data.result).msg);
        }

 
        const countys = JSON.parse(county.data.result).data;
        const countyList = countys.map(item => {
          return { label: item };
        });

 
        return resolve(countyList);
      } else if (node.level === 3) {
        /* room 机房信息  */
@@ -409,7 +252,7 @@
        return resolve([]);
      }
    },

 
    async handleInterface(node) {
      const that = this;
      const [areaRoom, batteryList] = await Promise.all([
@@ -419,6 +262,7 @@
          StationName2: node.parent.parent.data.label,
          StationName5: node.parent.data.label
        }),
 
        /*  查询电池组信息 */
        searchBattInfo({
          StationName1: node.parent.parent.parent.data.label,
@@ -427,7 +271,7 @@
          StationName3: node.data.label
        })
      ]);

 
      if (areaRoom.data.result && JSON.parse(areaRoom.data.result).code == 0) {
        return this.$message.error(JSON.parse(areaRoom.data.result).msg);
      }
@@ -461,7 +305,7 @@
          new BMapGL.Point(this.obj.longitude, this.obj.latitude)
        );
      }

 
      /* 信息框中的告警数延时数 接口 */
      /* const roomWarning = await searchRooms({
        StationId: this.batteryList[0].StationId
@@ -469,14 +313,14 @@
      console.log("roomWarning", roomWarning);
      const newRoomWarning = JSON.parse(roomWarning.data.result).data;
      console.log("newRoomWarning", newRoomWarning); */

 
      this.marker.addEventListener("click", e => {
        this.map.openInfoWindow(
          this.infoWindow,
          new BMapGL.Point(this.obj.longitude, this.obj.latitude)
        ); //开启信息窗口
      });

 
      //右击删除marker 菜单
      this.marker.addEventListener("rightclick", e => {
        /*   console.log('e...............',e) */
@@ -508,9 +352,9 @@
              });
              //右击删除标注
              /*  console.log("deleteMarker", deleteMarker); */

 
              this.map.removeOverlay(select);

 
              this.initMap();
            }
            this.$message({
@@ -585,7 +429,7 @@
            name: "电池信息",
            data: [
              { value: this.powerOff.sum, name: "机房停电" },

 
              {
                value: this.powerOff.newsum - this.powerOff.sum,
                name: "机房未停电"
@@ -594,7 +438,7 @@
          }
        ]
      };

 
      // 饼状图2
      chart2 = {
        // 红,黄，绿，蓝
@@ -619,7 +463,7 @@
          }
        ]
      };

 
      // 饼状图3
      chart3 = {
        // 红, 黄，绿，紫色
@@ -639,7 +483,7 @@
          }
        ]
      };

 
      // 饼状图4
      chart4 = {
        // 红, 深蓝色, 蓝，浅红，绿, 黄
@@ -671,7 +515,7 @@
          }
        ]
      };

 
      // 设置图表
      this.setChart();
    },
@@ -712,7 +556,7 @@
      /* console.log('this.battState',this.battState); */
      this.initChart();
    },

 
    /* 添加机房接口 */
    meData() {
      const that = this;
@@ -721,7 +565,7 @@
        console.log("data", data);
        that.medatas = data;
        console.log("that.medatas", that.medatas);

 
        this.$confirm("确认将武汉-东西湖区设置到该位置吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
@@ -739,7 +583,7 @@
              latitude: data.point.lat,
              information: ""
            });

 
            this.$message({
              type: "success",
              message: "设置站点位置成功!"
@@ -763,7 +607,7 @@
  }
};
</script>

 
<style scoped  lang="less">
.box-tools {
  position: relative;
@@ -778,26 +622,26 @@
    right: 20px;
  }
}

 
.rooms {
  margin-bottom: 10px !important;
}

 
.inputSeach {
  margin-bottom: 15px !important;
}

 
/deep/ .el-science-blue .el-input.is-disabled .el-input__inner,
.el-science-blue .el-input__inner {
  background-color: #fff !important;
  border-color: #3ebdc9;
  z-index: 999;
}

 
.dialog-footer {
  margin-left: 375px;
}

 
.box-tools .iconfont {
  font-size: 20px;
}
@@ -842,6 +686,4 @@
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>


</style>