提交0831

lishifeng

2020-08-31 6f2a5ff90d3ae82883238ef27446d0b549ac3b4a

提交0831

 src/assets/images/timg.jpg

 src/assets/js/api.js

@@ -21,7 +21,7 @@
export const login = (username, password) => {
    return axios({
        method: "post",
        url: '/yckj/'+`zijing_sx/LoginAction_login?uinf.UName=${username}&uinf.Upassword=${md5(password)}&uinf.UId=0`,
        url: '/yckj/' + `zijing_sx/LoginAction_login?uinf.UName=${username}&uinf.Upassword=${md5(password)}&uinf.UId=0`,
        data: null
    })
}
@@ -151,6 +151,12 @@
    })
}

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

/**
 * 查询电池组信息
 * 参数：json = {"StationName1":"北京市","StationName2":"市辖区","StationName5":"海淀区","StationName3":"紫晶科技机房"}
@@ -257,7 +263,7 @@
 * 查询电池告警率
 * 无参
 */
export const searchAlarm = ()=> {
export const searchAlarm = () => {
    return axios({
        method: "post",
        url: "/yckj/zijing_sx/Battalarm_dataAction!serchAlm",
@@ -269,7 +275,7 @@
 * 查询电池状态
 * 无参
 */
export const searchBattState = ()=> {
export const searchBattState = () => {
    return axios({
        method: "post",
        url: "/yckj/zijing_sx/Batt_rtstateAction!serchBattStateRate",

 src/assets/js/tools/index.js

@@ -1,8 +1,10 @@
import formatSeconds from './formatSeconds';        // 将秒转化成时:分:秒
import getQueryString from './getQueryString';      // 解析地址栏
import getTreeDataByKey from './getTreeDataByKey';
import sethoubeiTime from './sethoubeiTime'  /* 计算续航时长方法 */
export {
    formatSeconds,
    getQueryString,
    getTreeDataByKey
    getTreeDataByKey,
    sethoubeiTime 
}

 src/assets/js/tools/sethoubeiTime.js

New file
@@ -0,0 +1,24 @@
 // 计算续航时长方法  顶部组端
 
 function  sethoubeiTime(value) {
    value = Math.abs(value);
    var str = "";
    if (value > 0) {
      var hour = parseInt(value);
      var min = parseInt((parseFloat(value) - hour) * 60);
    
      if (hour < 10) {
        str = "0";
      }
      str += hour + "H";
      if (min < 10) {
        str += "0";
      }
      str += min + "M";
    } else {
      str = "00H00M";
    }
    return str;
  }

  export default sethoubeiTime

 src/pages/dataTest/realTime.vue

@@ -96,7 +96,8 @@

import { realTimeSearch, realTimeGroup } from "../../assets/js/realTime";
import {
  formatSeconds
  formatSeconds,
  sethoubeiTime 
} from '../../assets/js/tools'
/* import moment from "moment"; */
let vol, res, temp, conduct, curr;
@@ -358,26 +359,7 @@
        this.$refs.temp.setOption(temp);
      });
    },
    // 计算续航时长方法  顶部组端
    sethoubeiTime(value) {
      value = Math.abs(value);
      var str = "";
      if (value > 0) {
        var hour = parseInt(value);
        var min = parseInt((parseFloat(value) - hour) * 60);
        if (hour < 10) {
          str = "0";
        }
        str += hour + "H";
        if (min < 10) {
          str += "0";
        }
        str += min + "M";
      } else {
        str = "00H00M";
      }
      return str;
    },
   
    // 向父级发送同步页面的指令
    syncPage() {
      let batt = this.batt;

 src/pages/index.vue

@@ -2,6 +2,7 @@
  <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> -->

      <el-tree
        @node-click="nodeClick"
        :load="loadNode"
@@ -65,13 +66,22 @@
    return {
      lat: 0, //维度
      lng: 0, //经度
      cityName: "", //城市
      marker: null,
      infoWindow: null,
      map: null,
      panTo: null,
      point: null,
      obj: null,

      txtMenuItem: null,
     options: [{
          StationName1: '湖北省',
          StationName2: '武汉市',
          StationName5:'江汉区',
          StationName3:'丁香站'
           
        }],
 
      defaultProps: {
        label: "label",
        isLeaf: (data, node) => {
@@ -85,53 +95,58 @@
  },

  methods: {
   
    initMap() {
      const that = this;
      // 按住鼠标右键，修改倾斜角和角度
      this.map = new BMapGL.Map("allmap"); // 创建Map实例
      this.point = new BMapGL.Point(this.lng, this.lat); // 创建点坐标
      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); // 将标注添加到地图中

      var opts = {
        width: 350, // 信息窗口宽度
        height: 150, // 信息窗口高度
        title:
          '<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 20px;">贵阳省-贵阳市-南明区-紫晶办事处-设备1  </p>', // 信息窗口标题
        message: "这里是故宫"
        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">实时数据  历史数据</span> <br>地址：贵阳省-贵阳市-南明区-紫晶办事处</p>',
        '<p style="font-size: 16px;color: black;margin:2px;margin-top: 10px; ">蓄电池组告警数目：50 详情>> <br> 蓄电池组落后数目：0 详情>> <br> 蓄电池组延时数目：0 详情>> <br> <span style="color:blue">实时数据 历史数据</span> <br>地址：贵阳省-贵阳市-南明区-紫晶办事处</p>',
        opts
      );

      // 创建信息窗口对象
      this.map.openInfoWindow(this.infoWindow, this.map.getCenter()); // 打开信息窗口
      this.onCLickMap(); //点击事件获取坐标
      this.map.openInfoWindow(this.infoWindow, this.point); // 打开信息窗口
      /*   } */

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

      /*   this.marker.addEventListener("click", function(){
this.map.openInfoWindow(this.infoWindow,114.31899932245216 ,30.58005640282491   )//当点击当前的标注的时候打开创建的信息窗口
}); */
      this.onCLickMap(); //点击事件获取坐标

      /* 右键菜单 */
      /* map地图右键菜单 */
      var menu = new BMapGL.ContextMenu();
      var txtMenuItem = [
      this.txtMenuItem = [
        {
          text: "放大",
          callback: function() {
            this.map.zoomIn();
            this.map.zoomIn(15);
          }
        },
        {
          text: "缩小",
          callback: function() {
            this.map.zoomOut();
            this.map.zoomOut(5);
          }
        },
        {
@@ -141,57 +156,72 @@
          }
        },
        {
          text: "放置到最大级",
          text: "查看全国",
          callback: function() {
            this.map.setZoom(18);
          }
        },
        {
          text: "查看全国",
          callback: function() {
            this.map.setZoom(4);
          }
        },
        {
          text: "设置机房",
          async callback(node) {
            // this.marker = new BMapGL.Marker(point);
            // this.map.pointToPixel(point);
            // this.map.addOverlay(this.marker);
            console.log("node...", node);
             //查询已添加到地图的机房
          /*   const data = await searchMap({
              adata: { alm_cleared_type: 0, alm_id: 1 },
              bplan: { discharge_reason: 3 }
            //获取站点名
            const addSetdian = await addMapSetdian();
            const addSetmap = JSON.parse(addSetdian.data.result).data;
             console.log("addSetdian", addSetdian);
            console.log("addSetmap", addSetmap);
            /* 设置站点窗口 */
            var opts = {
              width: 350, // 信息窗口宽度
              height: 150, // 信息窗口高度
              title:
                '<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 10px;">设置站点位置  </p>', // 信息窗口标题
              message: "地址信息"
            };
            this.infoWindow = new BMapGL.InfoWindow(
              `<p style="font-size: 16px;color: black;margin:2px;margin-top: 5px; ">地址：${
                that.cityName
              }<br> 经度：${that.lng}
              <br> 维度: ${
                that.lat
              }  <br> 设置站点名：<select style="border: 1px solid #ccc; width: 180px"  v-for="item in options"  :key="item.index" :value="item.StationName1" ><option value="${addSetmap[21].StationName1}-${addSetmap[21].StationName2}-${addSetmap[21].StationName5}-${addSetmap[21].StationName3}">${addSetmap[5].StationName1}-${addSetmap[5].StationName2}-${addSetmap[5].StationName5}-${addSetmap[5].StationName3}</option>
              <option value="湖北省-鄂州市-鄂城区-司徒">湖北省-鄂州市-鄂城区-司徒</option>
              </select v-for="addSetmap in "> <br><br><button style="background-color: pink"   >确定</button> </p>`,
              opts
            );
            const point = new BMapGL.Point(that.lng, that.lat);
            const marke = new BMapGL.Marker(point);
            that.map.addOverlay(marke);
            that.map.openInfoWindow(this.infoWindow, point);
            marke.addEventListener("click", e => {
              that.map.openInfoWindow(this.infoWindow, point);
            });
            console.log("data.....", data); */
         const addSetdian = await addMapSetdian(); //设置站点名 
           /*  console.log("addSetdian.....", addSetdian);  */
                 const addSetmap =JSON.parse(addSetdian.data.result).data
                 console.log('addSetmap',addSetmap);

            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: ""
            });
           
       /*  this.marker = new BMapGL.Marker(); // 创建点
       this.map.addOverlay(this.marker); // */ 
       
            console.log("res", res);

            

            //添加地图上的机房
            // 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);
          }
        }
      ];
      for (var i = 0; i < txtMenuItem.length; i++) {
      for (var i = 0; i < this.txtMenuItem.length; i++) {
        menu.addItem(
          new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)
          new BMapGL.MenuItem(
            this.txtMenuItem[i].text,
            this.txtMenuItem[i].callback,
            100
          )
        );
      }
      this.map.addContextMenu(menu);
@@ -321,7 +351,33 @@
        this.handleInterface(value);
      }
    },

    // 通过IP获取当前经纬度
    async getLocationByIp() {
      // 获取到经纬度坐标后
      const ipRes = await this.$jsonp("http://api.map.baidu.com/location/ip", {
        ak: "AWqwD701uOy6kaLIxBY2NDjATvE6x5IG",
        coor: "bd09ll",
        output: "jsonp"
      });
      this.address = ipRes.address; //地址
      this.lng = ipRes.content.point.x; //经度
      this.lat = ipRes.content.point.y; //纬度
      console.log("ipRes", ipRes);
      // 创建地图
      this.$nextTick(() => {
        this.initMap();
      });
    },
    /*点击获取当前坐标 */
    onCLickMap() {
      const that = this;
      this.map.addEventListener("rightclick", function(e) {
        console.log("e", e);
        that.lng = e.latlng.lng;
        that.lat = e.latlng.lat;
        that.cityName = e.currentTarget.cityName;
      });
    },
    initChart() {
      // 饼状图1
      chart1 = {
@@ -462,35 +518,6 @@
      /* console.log('this.battState',this.battState); */

      this.initChart();
    },
    // 通过IP获取当前经纬度
    async getLocationByIp() {
      // 获取到经纬度坐标后
      const ipRes = await this.$jsonp("http://api.map.baidu.com/location/ip", {
        ak: "AWqwD701uOy6kaLIxBY2NDjATvE6x5IG",
        coor: "bd09ll",
        output: "jsonp"
      });
      this.address = ipRes.address; //地址
      this.lng = ipRes.content.point.x; //经度
      this.lat = ipRes.content.point.y; //纬度
      console.log("ipRes", ipRes);
      // 创建地图
      this.$nextTick(() => {
        this.initMap();
      });
    },
    onCLickMap() {
      this.map.addEventListener("click", function(e) {
        console.log(
          "lng",
          e.latlng.lng,
          "lat",
          e.latlng.lat,
          "cityName",
          e.currentTarget.cityName
        );
      });
    }
  },
  mounted() {
@@ -524,6 +551,7 @@
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  
}
.pie-item {
  flex: 1;