提交

lishifeng

2020-08-26 2a2901f9d64d0a1759c0e73e6acec497a5dbb028

提交

 package-lock.json

@@ -11052,6 +11052,11 @@
      "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
      "dev": true
    },
    "vue-jsonp": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/vue-jsonp/-/vue-jsonp-0.1.8.tgz",
      "integrity": "sha512-ebxvjHl5D7bv5Z7SeRzZUAPOSRMx+RiAeej7h6dPpbtk8MVz/b3n9fOZ8AAVmakb1pe36e+qG0J+K49a3LfpKA=="
    },
    "vue-layer": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/vue-layer/-/vue-layer-1.2.0.tgz",

 package.json

@@ -14,6 +14,7 @@
    "element-ui": "^2.13.2",
    "js-md5": "^0.7.3",
    "vue": "^2.6.11",
    "vue-jsonp": "^0.1.8",
    "vue-layer": "^1.2.0",
    "vue-router": "^3.4.3"
  },

 src/assets/js/api.js

@@ -249,7 +249,7 @@
    return axios({
        method: "post",
        url: "/yckj/zijing_sx/Battalarm_dataAction!serchAlm",
        data: "bmd.binf.StationName=''"
        data: "bmd.binf.StationName="
    });
}


 src/components/MyElTree999.vue

File was deleted

 src/main.js

@@ -14,6 +14,10 @@

import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css';

// jsonp请求方式  请求tx地图接口  
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
 
Vue.prototype.$layer = layer(Vue);


 src/pages/dataTest/realTime.vue

@@ -1,14 +1,7 @@
<template>
    <flex-layout direction="row" class="page-real-time">
        <content-box title="站点列表" 
        slot="header"
        toggle
        @toggleChange="toggleChange" 
        style="width:320px">
            <my-el-tree
            :data="data"
            @node-click="nodeClick"
            @leaf-click="leafClick"></my-el-tree>
    <content-box title="站点列表" slot="header" toggle @toggleChange="toggleChange" style="width:320px">
      <my-el-tree :data="data" @node-click="nodeClick" @leaf-click="leafClick"></my-el-tree>
        </content-box>
        <content-box style="margin-left: 4px; margin-right: 4px;" :title="battFullName">
           <flex-layout>
@@ -17,44 +10,43 @@
                        <div class="table-row">
                            <div class="table-cell text-right w80">电池状态:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                <el-input placeholder size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">端电压:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                <el-input placeholder size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">电池电流:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                <el-input placeholder size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">更新日期:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                <el-input placeholder size="small" :disabled="true"></el-input>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell text-right w80">测试时长:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                <el-input placeholder size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">测试容量:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                <el-input placeholder size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">剩余容量:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                <el-input placeholder size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">续航时长:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                <el-input placeholder size="small" :disabled="true"></el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="page-content">
                    <el-tabs v-model="acTabs" type="border-card" class="flex-layout"
                    @tab-click="tabClick">
          <el-tabs v-model="acTabs" type="border-card" class="flex-layout" @tab-click="tabClick">
                        <!-- <el-tab-pane label="电路拓扑图" name="eleLine">
                            电路拓扑图
                        </el-tab-pane> -->
@@ -76,11 +68,13 @@
                        <el-tab-pane label="数据表格" name="tblData">
                            <el-table border size="small" :data="table.data" height="100%">
                                <el-table-column
                                v-for="header in table.headers" :key="header.prop"
                  v-for="header in table.headers"
                  :key="header.prop"
                                :prop="header.prop"
                                :label="header.label"
                                :width="header.width"
                                align="center"></el-table-column>
                  align="center"
                ></el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
@@ -91,71 +85,66 @@
</template>

<script>
import ContentBox from '../../components/ContentBox'
import MyElTree from '../../components/MyElTree'
import BarChart from '../../components/chart/BarChart'
import {
   searchStation,
   searchBattInfo,
} from '../../assets/js/api'
import ContentBox from "../../components/ContentBox";
import MyElTree from "../../components/MyElTree";
import BarChart from "../../components/chart/BarChart";
import { searchStation, searchBattInfo } from "../../assets/js/api";

import {
    realTimeSearch
} from '../../assets/js/realTime'
import { realTimeSearch } from "../../assets/js/realTime";

let vol, res, temp, conduct, curr;
export default {
    components: {
        ContentBox,
        MyElTree,
        BarChart,
    BarChart
    },
    data() {
        return {
            battFullName: '电池组全称',
            acTabs: 'vol',
      battFullName: "电池组全称",
      acTabs: "vol",
            data: [],
            table: {
                headers: [
                    {
                        prop: 'num1',
                        label: '单体编号',
                        width: '',
            prop: "num1",
            label: "单体编号",
            width: ""
                    },
                    {
                        prop: 'vol1',
                        label: '电压(V)',
                        width: '',
            prop: "vol1",
            label: "电压(V)",
            width: ""
                    },
                    {
                        prop: 'res1',
                        label: '内阻(mΩ)',
                        width: '',
            prop: "res1",
            label: "内阻(mΩ)",
            width: ""
                    },
                    {
                        prop: 'temp1',
                        label: '温度(℃)',
                        width: '',
            prop: "temp1",
            label: "温度(℃)",
            width: ""
                    },
                    {
                        prop: 'conduct1',
                        label: '电导',
                        width: '',
            prop: "conduct1",
            label: "电导",
            width: ""
                    },
                    {
                        prop: 'curr1',
                        label: '均衡电流',
                        width: '',
                    },
            prop: "curr1",
            label: "均衡电流",
            width: ""
          }
                ],
                data: [
                    {
                        num1: '#1',
                    },
            num1: "#1"
          }
                ]
            },
            batt:{},
        }
      batt: {}
    };
    },
    methods: {
        tabClick(tab) {
@@ -170,21 +159,20 @@
            this.$G.chartManage.resize(this.acTabs);
        },
        initChart() {

            // 电压
            vol = {
                title: {
                    show: true,
                    text: '最大值=0V;最小值=0V;平均值=0V;累加和=0V',
                    x: 'center',
          text: "最大值=0V;最小值=0V;平均值=0V;累加和=0V",
          x: "center",
                    textStyle: {
                        fontSize: '14',
            fontSize: "14"
                    }
                },
                series: [
                    {
                        name: '电压',
                        type: 'bar',
            name: "电压",
            type: "bar",
                        data: []
                    }
                ]
@@ -194,16 +182,16 @@
            res = {
                title: {
                    show: true,
                    text: '最大值=0mΩ;最小值=mΩ;平均值=0mΩ',
                    x: 'center',
          text: "最大值=0mΩ;最小值=mΩ;平均值=0mΩ",
          x: "center",
                    textStyle: {
                        fontSize: '14',
            fontSize: "14"
                    }
                },
                series: [
                    {
                        name: '内阻',
                        type: 'bar',
            name: "内阻",
            type: "bar",
                        data: []
                    }
                ]
@@ -213,17 +201,17 @@
            temp = {
                title: {
                    show: true,
                    text: '最大值=0℃;最小值=0℃;平均值=0℃',
                    x: 'center',
          text: "最大值=0℃;最小值=0℃;平均值=0℃",
          x: "center",
                    textStyle: {
                        fontSize: '14',
            fontSize: "14"
                    }
                },
                series: [
                    {
                        name: '温度',
                        type: 'bar',
                        data: [],
            name: "温度",
            type: "bar",
            data: []
                    }
                ]
            };
@@ -232,16 +220,16 @@
            conduct = {
                title: {
                    show: true,
                    text: '最大值=0;最小值=0;平均值=0',
                    x: 'center',
          text: "最大值=0;最小值=0;平均值=0",
          x: "center",
                    textStyle: {
                        fontSize: '14',
            fontSize: "14"
                    }
                },
                series: [
                    {
                        name: '电导',
                        type: 'bar',
            name: "电导",
            type: "bar",
                        data: []
                    }
                ]
@@ -250,16 +238,16 @@
            curr = {
                title: {
                    show: true,
                    text: '最大值=0mA;最小值=0mA;平均值=0mA',
                    x: 'center',
          text: "最大值=0mA;最小值=0mA;平均值=0mA",
          x: "center",
                    textStyle: {
                        fontSize: '14',
            fontSize: "14"
                    }
                },
                series: [
                    {
                        name: '均衡电流',
                        type: 'bar',
            name: "均衡电流",
            type: "bar",
                        data: []
                    }
                ]
@@ -279,8 +267,8 @@
            searchStation({
                StationName1:"",
                StationName2:"",
                StationName5:"",
            }).then((res)=>{
        StationName5: ""
      }).then(res => {
                let rs = JSON.parse(res.data.result);
                let data = [];
                if(rs.code == 1) {
@@ -301,11 +289,16 @@
                // 区县
                let county = this.addData(city.children, item.StationName5, city);
                // 机房
                let home = this.addData(county.children, item.StationName3, county, item);
        let home = this.addData(
          county.children,
          item.StationName3,
          county,
          item
        );
                // 添加空白位置占位
                home.children.push({
                    id: home.id+'temp',
                    label: '数据加载中...'
          id: home.id + "temp",
          label: "数据加载中..."
                });
            });
            // 设置树状列表
@@ -314,13 +307,13 @@
        addData(list, val, parent, data) {
            let item;
            let index = this.checkValIsIn(val, list);
            let parentId  = parent?parent.id+'-':"";
      let parentId = parent ? parent.id + "-" : "";
            if(index == -1) {
                item = {
                    id: parentId+val,
                    label: val,
                    children: [],
                    data: data,
          data: data
                };
                list.push(item);
            }else {
@@ -338,23 +331,26 @@
        },
        nodeClick(data, node) {
            if(data.children[0].label == "数据加载中...") {
                this.searchBattInfo(data, node)
        this.searchBattInfo(data, node);
            }
        },

        searchBattInfo(data, node) {
            // 加载等待
            node.loading=true;
            searchBattInfo(data.data).then((res)=>{
      searchBattInfo(data.data).then(res => {
                node.loading=false;
                let rs = JSON.parse(res.data.result);
                let result=[{
        let result = [
          {
                    id: Math.random(),
                    label: '暂无电池组',
                }];
            label: "暂无电池组"
          }
        ];
                // 查询到结果
                if(rs.code == 1) {
                    result = rs.data.map(item=>{
                        item.id = item.StationName+'-'+item.BattGroupName;
            item.id = item.StationName + "-" + item.BattGroupName;
                        item.label = item.BattGroupName;
                        item.leaf = true;
                        return item;
@@ -368,25 +364,47 @@
                this.batt = data;
                this.realTimeSearch();
            }
            
        },
        realTimeSearch() {
            var batt = this.batt;
            realTimeSearch({
                BattGroupId: batt.BattGroupId,
        BattGroupId: batt.BattGroupId
            }).then(res=>{
                let rs = JSON.parse(res.data.result);
        console.log("rs", rs);

                // 电压值
                let volTemp = [];
                if(rs.code == 1) {
                    volTemp= rs.data.map(item=> {
                        return ['#'+item.mon_num, item.mon_vol]
            return ["#" + item.mon_num, item.mon_vol];
                    });
                }
                vol.series[0].data = volTemp;
        // 内阻
        let volTempres = [];
        if (rs.code == 1) {
          volTempres = rs.data.map(item => {
            return ["#" + item.mon_num, item.mon_res];
          });
          console.log("volTempres", volTempres);
        }
        /*  res.series[0].data = volTempres;  */

        // 温度
        let volTempte = [];
        if (rs.code == 1) {
          volTempte = rs.data.map(item => {
            return ["#" + item.mon_num, item.mon_tmp];
          });
          console.log("volTempte", volTempte);
        }
        temp.series[0].data = volTempte;

                // 更新电压图表
                this.$refs.vol.setOption(vol);
        this.$refs.res.setOption(res);
        this.$refs.temp.setOption(temp);
            });
        }
    },
@@ -401,16 +419,16 @@
        });

        // 屏幕缩放时触发
        window.addEventListener('resize', ()=>{
    window.addEventListener("resize", () => {
            this.resize();
        });
    }
}
};
</script>

<style scoped>
.page-real-time {
    color: #FFFFFF;
  color: #ffffff;
}
.table-cell.text-right {
    font-size: 14px;

 src/pages/index.vue

@@ -39,6 +39,7 @@
import PieChart from "../components/chart/PieChart";

import {
  searchBattState,
  searchPowerOff,
  searchBattGood,
  searchProvince,
@@ -46,7 +47,8 @@
  searchCounty,
  searchStation,
  searchMapStation,
  searchBattInfo
  searchBattInfo,
  searchAlarm
} from "@/assets/js/api";

let chart1, chart2, chart3, chart4;
@@ -58,6 +60,12 @@
  },
  data() {
    return {
      lat:null,
      lng:null,
      marker:null,
      infoWindow :null,
      map:null,
      panTo:null,
      /*   data: [
        {
          id: "湖北省",
@@ -120,31 +128,83 @@

  methods: {
    initMap() {
     
      // 按住鼠标右键，修改倾斜角和角度
      var map = new BMapGL.Map("allmap"); // 创建Map实例
      var point = new BMapGL.Point(116.404, 39.925);
      map.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      map.setHeading(64.5);
      map.setTilt(73);
       this.map = new BMapGL.Map("allmap"); // 创建Map实例
      var point = new BMapGL.Point(this.lat,this.lng);
      this.map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      this.map.setHeading(64.5);
      this.map.setTilt(73);

      var marker = new BMapGL.Marker(point); // 创建点
      map.addOverlay(marker); // 将标注添加到地图中
       this.marker = new BMapGL.Marker(point); // 创建点
      this.map.addOverlay(this.marker); // 将标注添加到地图中

      var opts = {
        width: 300, // 信息窗口宽度
        height: 200, // 信息窗口高度
        title: '<p style="font-size: 16px;color: #2ca90e;margin:2px;margin-bottom: 20px;">湖北省-鄂州市-东方世纪城-设备1 </p>', // 信息窗口标题
        width: 350, // 信息窗口宽度
        height: 150, // 信息窗口高度
        title:
          '<p style="font-size: 16px;color: black;margin:2px;margin-bottom: 20px;">湖北省-鄂州市-东方世纪城-设备1  </p>', // 信息窗口标题
        message: "这里是故宫"
      };
      var infoWindow = new BMapGL.InfoWindow(
       '<p style="font-size: 16px;color: #2ca90e;margin:2px;margin-bottom: 20px;">蓄电池组告警数目：50 详情>> <br> 蓄电池组落后数目：0 详情>> <br> 蓄电池组延时数目：0 详情>> <br> 实时数据  历史数据 <br>地址：上海市-上海市-浦东新区-卢东路</p>',
      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>',
      
        opts); // 创建信息窗口对象
      marker.addEventListener("click", function() {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
        opts
      ); // 创建信息窗口对象
      this.marker.addEventListener("click", function() {
        this.map.openInfoWindow(this.infoWindow, point); //开启信息窗口
      });



      /* 右键菜单 */
      var menu = new BMapGL.ContextMenu();
      var txtMenuItem = [
        {
          text: "放大",
          callback: function() {
            this.map.zoomIn();
          }
        },
        {
          text: "缩小",
          callback: function() {
            this.map.zoomOut();
          }
        },
        {
          text: "设置中心点",
          callback: function() {
            this.map.zoomCentral();
          }
        },
        {
          text: "放置到最大级",
          callback: function() {
           this.map.setZoom(18);
          }
        },
        {
          text: "查看全国",
          callback: function() {
            this.map.setZoom(4);
          }
        },
        {
          text: "设置机房",
          callback: function(point) {
            this.marker = new BMapGL.Marker(point); 
             this.map.pointToPixel(point);
            this.map.addOverlay(this.marker);
          }
        }
      ];
      for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(
          new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)
        );
      }
      this.map.addContextMenu(menu);
    },

    /* loadNode 加载子树数据的方法*/
@@ -242,14 +302,22 @@
      if (areaRoom.data.result && JSON.parse(areaRoom.data.result).code == 0)  {
        return this.$message.error(JSON.parse(areaRoom.data.result).msg);
      }
      //console.log('batteryList',batteryList);
      if (batteryList.data.result && JSON.parse(batteryList.data.result).code == 0) {
      console.log('batteryList',batteryList);
      if (
        batteryList.data.result &&
        JSON.parse(batteryList.data.result).code == 0
      ) {
        return this.$message.error(JSON.parse(batteryList.data.result).msg);
      }
      const list = JSON.parse(areaRoom.data.result).data;
      let obj = list.find(item => item.StationName3 == node.data.label);
      console.log('obj',obj);
      if (obj.longitude == 0 && obj.latitude == 0) {
        this.$message.warning("机房未定位");
      }else{
       // this.batteryList = JSON.parse(batteryList.data.result).data; //电池组数目
       this.marker.setPosition(new BMapGL.Point(obj.latitude, obj.longitude))
      /*  this.panTo(this.lat,this.lng) */
      }
    },
    //树形控件点击事件
@@ -319,10 +387,10 @@
          {
            name: "电池信息",
            data: [
              { value: 0, name: "放电" },
              { value: 0, name: "充电" },
              { value: 0, name: "浮充" },
              { value: 0, name: "均充" }
              { value: this.battState.data[2].num, name: "放电" },
              { value: this.battState.data[3].num, name: "充电" },
              { value: this.battState.data[1].num, name: "浮充" },
              { value: this.battState.data[4].num, name: "均充" }
            ]
          }
        ]
@@ -346,12 +414,15 @@
          {
            name: "电池信息",
            data: [
              { value: 0, name: "在线电压" },
              { value: 0, name: "组端电压" },
              { value: 0, name: "充电电流" },
              { value: 0, name: "放电电流" },
              { value: 0, name: "单体电压" },
              { value: 0, name: "容量告警" }
              { value: this.Alarm.data, name: "在线电压" },
              { value: this.Alarm.data.MonNum, name: "组端电压" },
              { value: this.Alarm.data.usr_Id, name: "充电电流" },
              { value: this.Alarm.data.alm_id, name: "放电电流" },
              { value: this.Alarm.data.alm_level, name: "单体电压" },
              {
                value: this.Alarm.data.alm_value + this.Alarm.data.BattGroupId,
                name: "容量告警"
              }
            ]
          }
        ]
@@ -368,29 +439,59 @@
    },
    //获取echarts图表电池数据 /* 电池组健康率  机房停电信息 */
    async getBatteryData() {
      const [battGood, powerOff] = await Promise.all([
      const [battGood, powerOff, battState, Alarm] = await Promise.all([
        searchBattGood(),
        searchPowerOff()
        searchPowerOff(),
        searchBattState(),
        searchAlarm()
      ]);
       console.log('battGood',battGood);
        console.log('powerOff',powerOff);
        
      /*  console.log('battGood',battGood); */
      /*    console.log('battState',battState); */
    /*   console.log("Alarm", Alarm); */
      if (battGood.status !== 200) {
        return this.$message.error(battGood.statusText);
      }
      if (powerOff.status !== 200) {
        return this.$message.error(powerOff.statusText);
      }
      if (
        battState.data.result &&
        JSON.parse(battState.data.result).code == 0
      ) {
        return this.$message.error(JSON.parse(battState.data.result).msg);
      }
      this.battGood = JSON.parse(battGood.data.result);
      this.powerOff = JSON.parse(powerOff.data.result);
      this.battState = JSON.parse(battState.data.result);
      this.Alarm = JSON.parse(Alarm.data.result);
      /* console.log('this.Alarm ',this.Alarm ) */
      /* 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.lat = ipRes.content.point.x;
      this.lng = ipRes.content.point.y;
      console.log('ipRes',ipRes)
       // 创建地图
      this.$nextTick(() => {
        this.initMap();
      });
    },
  },
  mounted() {
    this.initMap();
    // 初始化饼状图
    this.getBatteryData();
    this.getLocationByIp() // 通过IP获取当前经纬度
    this.getBatteryData(); // 初始化饼状图
  }
};
</script>