提交0904

lishifeng

2020-09-04 a89226fed0ec98e52e65dedbefbaa43fdfd14fd5

提交0904

 src/assets/js/api.js

@@ -124,8 +124,6 @@
}




/**
 * 查询地图机房信息（结果中有机房的位置信息）
 * 参数：json = {"StationName1":"北京市","StationName2":"市辖区","StationName5":"海淀区"}
@@ -165,11 +163,7 @@
    })
}

//查询已添加到地图的机房
/*     const data = await searchMap({
      adata: { alm_cleared_type: 0, alm_id: 1 },
      bplan: { discharge_reason: 3 }
    }); */

//----------------------------
/**
 * 查询已添加到地图的机房
@@ -192,10 +186,11 @@
    return axios({
        method: "post",
        url: "/yckj/zijing_sx/BattInfAction!serchByIdLow",
        data: "json=" + JSON.stringify(params)
        data: "result=" + JSON.stringify(params)
    })
}


/**
 * 删除地图上的机房
 * 参数：json={"num":141,"StationId":"42070545",

 src/components/PageMenu.vue

@@ -62,6 +62,39 @@
                            closable: true, 
                        },
                    ]
                },
                  {
                    label: '数据管理',
                    name: 'dataMager',
                    src: '',
                    icon: 'el-icon-s-help',
                    closable: false,
                    childrens: [
                        {
                            label: '电池充放电数据管理',
                            name: 'dataAdmian',
                            src: '#/dataAdmian',
                            closable: true, 
                        },
                        {
                           label: '内组测试',
                            name: 'internalTest',
                            src: '#/internalTest',
                            closable: true, 
                        },
                           {
                            label: '电池放电测试',
                            name: 'dischargeTest',
                            src: '#/dischargeTest',
                            closable: true, 
                        },
                        {
                           label: '电池关注管理',
                            name: 'batteryMager',
                            src: '#/batteryMager',
                            closable: true, 
                        },
                    ]
                }
            ],
        }

 src/pages/dataMager/batteryMager.vue

New file
@@ -0,0 +1,24 @@
<template>
  <div  style="color:#ffffff">
11111
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  created () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
</style>

 src/pages/dataMager/dataAdmian.vue

New file
@@ -0,0 +1,24 @@
<template>
  <div  style="color:#ffffff">
11111
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  created () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
</style>

 src/pages/dataMager/dischargeTest.vue

New file
@@ -0,0 +1,24 @@
<template>
  <div  style="color:#ffffff">
11111
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  created () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
</style>

 src/pages/dataMager/internalTest.vue

New file
@@ -0,0 +1,24 @@
<template>
  <div  style="color:#ffffff">
11111
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  created () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
</style>

 src/pages/index.vue

@@ -1,8 +1,17 @@
<template>
  <flex-layout direction="row" class="page-index">
    <content-box title="站点列表" slot="header" toggle style="width:320px">
      <!-- <my-el-tree @node-click="nodeClick" :data="data"></my-el-tree> -->
      <div slot="box-tools"></div>
      <div class="box-tools" slot="box-tools">
        <el-tooltip class="item" effect="dark" content="站点信息" placement="bottom">
          <i class="iconfont el-icon-xinxi"></i>
        </el-tooltip>
        <el-tooltip class="item2" effect="dark" content="站点搜索" placement="bottom">
          <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"
        :load="loadNode"
@@ -29,17 +38,31 @@
          <pie-chart ref="chart4" id="chart4"></pie-chart>
        </div>
      </div>
      <el-dialog title="机房查询" :visible.sync="dialogVisible" width="30%">
        <div class="rooms">机房名称:/机房id</div>
        <el-input class="inputSeach" clearable v-model="inputSeach"></el-input>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 右键菜单搜索框 -->
      <!--  <div style="margin-top: 15px;">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
      </div>-->
    </content-box>
  </flex-layout>
</template>

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

import {
  searchBattState,
@@ -53,9 +76,17 @@
  searchBattInfo,
  searchAlarm,
  addMapStation,
  // searchMap,
  addMapSetdian
  searchDeletRoom,
  searchMap,
  addMapSetdian,
  searchRooms,
  searchCoordinate,
  searchCoordinateMove,
  searchRoomLocation
} from "@/assets/js/api";
import { log } from "util";
import { async, Promise } from "q";
import { json } from "body-parser";

let chart1, chart2, chart3, chart4;
let infoWindowTest = Vue.extend(InfoWindowTest);
@@ -64,10 +95,16 @@
  components: {
    ContentBox,
    /*   MyElTree, */
    PieChart,
    PieChart
  },
  data() {
    return {
      medatas: {},
      inputSeach: "",
      dialogVisible: false,
      input1: "",
      input2: "",
      input3: "",
      lat: 0, //维度
      lng: 0, //经度
      cityName: "", //城市
@@ -77,6 +114,8 @@
      panTo: null,
      point: null,
      obj: null,
      opts: null,
      addSeachroom: [], //地图上所有机房
      defaultProps: {
        label: "label",
        isLeaf: (data, node) => {
@@ -93,26 +132,50 @@
     // 向父级发送同步页面的指令
    syncPage() {
      let batt = this.batt;
      let search="?province="+batt.StationName1
      +"&city="+batt.StationName2+"&county="+batt.StationName5
      +"&home="+batt.StationName3+"&batt="+batt.BattGroupId;
      window.parent.postMessage({
      let search =
        "?province=" +
        batt.StationName1 +
        "&city=" +
        batt.StationName2 +
        "&county=" +
        batt.StationName5 +
        "&home=" +
        batt.StationName3 +
        "&batt=" +
        batt.BattGroupId;
      window.parent.postMessage(
        {
        cmd: "syncPage",
        params: {
          pageInfo: {
            label: '实时监测',
            name: 'realTime',
            src: '#/real-time'+search,
            closable: true,
              label: "实时监测",
              name: "realTime",
              src: "#/real-time" + search,
              closable: true
            }
          }
        },
      }, "*");
        "*"
      );
    },
    /* 根据机房的id查询机房的经纬度 */
    async getCityrom() {
      /*   const searchAddress = await searchRoomLocation({
        StationName1: "湖北省",
        StationName2: "武汉市",
        StationName5: "东西区",
        StationName3: "GDXG演示"
      });
      console.log("searchAddress", searchAddress); */
    },
    handleClose(done) {
      done();
    },
    initMap() {
      const that = this;
      // 按住鼠标右键，修改倾斜角和角度
      this.map = new BMapGL.Map("allmap"); // 创建Map实例
      this.point = new BMapGL.Point(this.lng, this.lat); // 创建点坐标
      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); // 开启鼠标滚轮缩放
@@ -121,32 +184,36 @@
      this.marker = new BMapGL.Marker(this.point); // 创建点
      this.map.addOverlay(this.marker); // 将标注添加到地图中

      var opts = {
      //添加地图机房
      this.addseRoomlist.forEach(item => {
        this.marker = new BMapGL.Marker(
          new BMapGL.Point(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;">湖北省-武汉市-东西湖区-武汉源畅模拟机房 </p>', // 信息窗口标题
        title: `<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 20px;">湖北省-武汉市-东西湖区-武汉源畅模拟机房 </p>`, // 信息窗口标题
        message: "地址信息"
      };

      this.infoWindow = new BMapGL.InfoWindow( // 创建信息窗口对象
        `<p style="font-size: 16px;color: black;margin:2px;margin-top: 10px; ">蓄电池组告警数目：50 详情>> <br> 蓄电池组落后数目：0 详情>> <br> 蓄电池组延时数目：0 详情>>
         <br> <span style="color:blue" ><a href="syncPage()">实时数据</a> 历史数据</span> <br>地址：湖北省-武汉市-东西湖区-武汉源畅模拟机房</p>`,
        opts
        `<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">地址：</div></div>` /* 湖北省武汉市武昌区和平大道472号 */,
        this.opts
      );

      that.map.openInfoWindow(this.infoWindow, this.point);
      this.marker.addEventListener("click", e => {
        console.log("this.point", this.point);

        that.map.openInfoWindow(this.infoWindow, this.point); //开启信息窗口
      });

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

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

@@ -154,81 +221,106 @@
      var menu = new BMapGL.ContextMenu();
      var txtMenuItem = [
        {
          text: "搜索地址",
          callback() {}
        },
        {
          text: "放大",
          callback: function() {
            this.map.zoomIn();
            that.map.zoomIn();
          }
        },
        {
          text: "缩小",
          callback: function() {
            this.map.zoomOut();
            that.map.zoomOut();
          }
        },
        {
          text: "设置中心点",
          callback: function() {
            this.map.zoomCentral();
          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() {
            this.map.setZoom(18);
            that.map.setZoom(5);
          }
        },
        {
          text: "设置机房",
          async callback(node) {

          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;
            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>', // 信息窗口标题
              width: "auto", // 信息窗口宽度
              height: "auto", // 信息窗口高度
              title:
                '<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 10px;">设置站点位置  </p>', // 信息窗口标题
              message: "地址信息"
            };
            var geoc = new BMapGL.Geocoder();
            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);
            this.infoWindow = new BMapGL.InfoWindow(
              showInfoWindowTest.$el,
              opts
            );
            
            that.map.openInfoWindow(this.infoWindow, point);
            marke.addEventListener("click", e => {
              //左击标注
              that.map.openInfoWindow(this.infoWindow, point);
            });

            //添加地图上的机房
            // const res = await addMapStation({
            //   StationName1: node.StationName1,
            //   StationName2: node.StationName2,
            //   StationName5: node.StationName5,
            //   StationName3: node.StationName3,
            //   Address: this.address,
            //   longitude: node.lng,
            //   latitude: node.lat,
            //   information: ""
            // });
            // console.log("res", res);
          }
        }
      ];
@@ -245,7 +337,7 @@

    /* loadNode 加载子树数据的方法*/
    async loadNode(node, resolve) {
      console.log("node", node);
      /*   console.log("node", node); */
      if (node.level === 0) {
        /* * 查询省 */
        const { data: province } = await searchProvince();
@@ -300,7 +392,7 @@
          StationName2: node.parent.data.label,
          StationName5: node.data.label
        });
        //console.log(' room', room);
        console.log(" room", room);
        if (room.data.result && JSON.parse(room.data.result).code == 0) {
          return this.$message.error(JSON.parse(room.data.result).msg);
        }
@@ -317,6 +409,7 @@
    },

    async handleInterface(node) {
      const that = this;
      const [areaRoom, batteryList] = await Promise.all([
        /* 查询地图机房信息 （结果中有机房的位置信息） */
        searchMapStation({
@@ -337,8 +430,8 @@
      if (areaRoom.data.result && JSON.parse(areaRoom.data.result).code == 0) {
        return this.$message.error(JSON.parse(areaRoom.data.result).msg);
      }
      console.log("areaRoom", areaRoom);
      console.log("batteryList", batteryList);
      /*     console.log("areaRoom", areaRoom); */
      /*  console.log("batteryList", batteryList); */
      if (
        batteryList.data.result &&
        JSON.parse(batteryList.data.result).code == 0
@@ -349,20 +442,87 @@
      this.obj = list.find(item => item.StationName3 == node.data.label);
      console.log("obj", this.obj); //机房坐标
      if (this.obj.longitude == 0 && this.obj.latitude == 0) {
        this.$message.warning("机房未定位");
        this.$message.error("机房未定位");
      } else {
        this.batteryList = JSON.parse(batteryList.data.result).data; //电池组数目
        console.log(" this.batteryList", this.batteryList);
        /* 图标移动位置 */
        this.marker.setPosition(
          new BMapGL.Point(this.obj.longitude, this.obj.latitude)
        );
        /* 地图移动位置 */
        this.map.panTo(new BMapGL.Point(this.obj.longitude, this.obj.latitude));
        /* 信息框移动位置 */
        this.map.openInfoWindow(
          this.infoWindow,
          new BMapGL.Point(this.obj.longitude, this.obj.latitude)
        );
      }

      /* 信息框中的告警数延时数 接口 */
      /* const roomWarning = await searchRooms({
        StationId: this.batteryList[0].StationId
      });
      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 => {
        const select = that.addseRoomlist.find(
          item => this.batteryList[0].StationId === item.data.StationId
        );
        this.$confirm(
          '确认从地图上删除"武汉市-东西湖-设备1的位置信息"',
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(async () => {
            if (select) {
              /* 右击删除当前标注 */
              const deleteMarker = await searchDeletRoom({
                num: select.data.num,
                StationId: select.data.StationId,
                StationName: select.data.StationName,
                StationName3: select.data.StationName3,
                Address: select.data.Address,
                longitude: select.data.longitude,
                latitude: select.data.latitude,
                information: select.data.information,
                FBSDeviceId: select.data.FBSDeviceId
              });
              //右击删除标注
              console.log("deleteMarker", deleteMarker);

              this.map.removeOverlay(select);
            }
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      });
    },
    //树形控件点击事件
    async nodeClick(current, value) {
      console.log(value.level, value);
      /*  console.log(value.level, value); */
      if (value.level > 3) {
        this.handleInterface(value);
      }
@@ -370,15 +530,26 @@
    // 通过IP获取当前经纬度
    async getLocationByIp() {
      // 获取到经纬度坐标后
      const ipRes = await this.$jsonp("http://api.map.baidu.com/location/ip", {
      // const ipRes = await this.$jsonp("http://api.map.baidu.com/location/ip", {
      //   ak: "AWqwD701uOy6kaLIxBY2NDjATvE6x5IG",
      //   coor: "bd09ll",
      //   output: "jsonp"
      // });
      const [ipRes, addSeachroom] = await Promise.all([
        this.$jsonp("http://api.map.baidu.com/location/ip", {
        ak: "AWqwD701uOy6kaLIxBY2NDjATvE6x5IG",
        coor: "bd09ll",
        output: "jsonp"
      });
        }),
        searchMap({
          adata: { alm_cleared_type: 0, alm_id: 1 },
          bplan: { discharge_reason: 3 }
        })
      ]);
      this.address = ipRes.address; //地址
      this.lng = ipRes.content.point.x; //经度
      this.lat = ipRes.content.point.y; //纬度
      console.log("ipRes", ipRes);
      this.addseRoomlist = JSON.parse(addSeachroom.data.result);
      // 创建地图
      this.$nextTick(() => {
        this.initMap();
@@ -388,7 +559,7 @@
    onCLickMap() {
      const that = this;
      this.map.addEventListener("rightclick", function(e) {
        console.log("e", e);
        /*   console.log("e", e); */
        that.lng = e.latlng.lng;
        that.lat = e.latlng.lat;
        that.cityName = e.currentTarget.cityName;
@@ -532,23 +703,100 @@
      this.Alarm = JSON.parse(Alarm.data.result);
      /* console.log('this.Alarm ',this.Alarm ) */
      /* console.log('this.battState',this.battState); */

      this.initChart();
    },

    /* 添加机房接口 */
    meData() {
      // 添加面板点击事件
      showInfoWindowTest.$on("set-home-info", function(data) {
        console.log("data", data);

        this.$confirm("确认将武汉-东西湖区设置到该位置吗?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            //添加地图上的机房接口
            const res = await addMapStation({
              StationName1: data.info.StationName1,
              StationName2: data.info.StationName2,
              StationName5: data.info.StationName5,
              StationName3: data.info.StationName3,
              Address: data.address,
              longitude: data.point.lng,
              latitude: data.point.lat,
              information: ""
            });

            this.$message({
              type: "success",
              message: "设置站点位置成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消设置站点位置!"
            });
          });
      });
    }
  },
  mounted() {
    this.getLocationByIp(); // 通过IP获取当前经纬度
    this.getLocationByIp(); // 通过IP获取当前经纬度  查询已添加到地图的机房
    this.getBatteryData(); // 初始化饼状图

    // 添加面板点击事件
    showInfoWindowTest.$on('set-home-info', function(data) {
      console.log(data); 
    });
    this.meData(); //添加机房接口
    this.getCityrom(); //根据机房的id查询机房的经纬度
  }
};
</script>

<style scoped  lang="less">
.box-tools {
  position: relative;
  line-height: 32px;
  .item {
    margin-right: 30px;
  }
  .item2 {
    margin-right: -20px;
    position: absolute;
    top: 4px;
    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;
}
.box-tools .iconfont:hover {
  cursor: pointer;
  color: #cfcfcf;
}
.box-tools .iconfont:active {
  color: #ff0000;
}
.filter-tree {
  -webkit-user-select: none;
  -moz-user-select: none;
@@ -576,6 +824,13 @@
.pie-item {
  flex: 1;
}
/*搜索框 */
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>



 src/pages/login.vue

@@ -52,8 +52,8 @@
    /* 初始化连接池  检测后台session*/
  async woData(){
       const [pool,sessions] =await Promise.all([initDBPool,checkLoginSession ])
            console.log('pool',pool);
               console.log('sessions',sessions);
          /*   console.log('pool',pool);
               console.log('sessions',sessions); */
   },
    onSubmit() {
      this.$refs.loginFormRef.validate(async valid => {

 src/router/routes.js

@@ -36,6 +36,26 @@
        component: (resolve)=>require(['../pages/dataTest/CircuitDiagram.vue'], resolve)
    },
    {
        path: '/dataAdmian',
        meta: {},
        component: (resolve)=>require(['../pages/dataMager/dataAdmian.vue'], resolve)
    },
    {
        path: '/internalTest',
        meta: {},
        component: (resolve)=>require(['../pages/dataMager/internalTest.vue'], resolve)
    },
    {
        path: '/dischargeTest',
        meta: {},
        component: (resolve)=>require(['../pages/dataMager/dischargeTest.vue'], resolve)
    },
    {
        path: '/batteryMager',
        meta: {},
        component: (resolve)=>require(['../pages/dataMager/batteryMager.vue'], resolve)
    },
    {
        path: '*',
        name: '',
        meta: {