提交

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,428 +1,446 @@
<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>
        <content-box style="margin-left: 4px; margin-right: 4px;" :title="battFullName">
           <flex-layout>
                <div class="content-header" slot="header">
                    <div class="table-layout">
                        <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>
                            </div>
                            <div class="table-cell text-right w80">端电压:</div>
                            <div class="table-cell">
                                <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>
                            </div>
                            <div class="table-cell text-right w80">更新日期:</div>
                            <div class="table-cell">
                                <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>
                            </div>
                            <div class="table-cell text-right w80">测试容量:</div>
                            <div class="table-cell">
                                <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>
                            </div>
                            <div class="table-cell text-right w80">续航时长:</div>
                            <div class="table-cell">
                                <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-tab-pane label="电路拓扑图" name="eleLine">
  <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>
    <content-box style="margin-left: 4px; margin-right: 4px;" :title="battFullName">
      <flex-layout>
        <div class="content-header" slot="header">
          <div class="table-layout">
            <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>
              </div>
              <div class="table-cell text-right w80">端电压:</div>
              <div class="table-cell">
                <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>
              </div>
              <div class="table-cell text-right w80">更新日期:</div>
              <div class="table-cell">
                <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>
              </div>
              <div class="table-cell text-right w80">测试容量:</div>
              <div class="table-cell">
                <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>
              </div>
              <div class="table-cell text-right w80">续航时长:</div>
              <div class="table-cell">
                <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-tab-pane label="电路拓扑图" name="eleLine">
                            电路拓扑图
                        </el-tab-pane> -->
                        <el-tab-pane label="电压" name="vol">
                            <bar-chart ref="vol" id="vol" unit="V"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="内阻" name="res">
                            <bar-chart ref="res" id="res" unit="mΩ"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="温度" name="temp">
                            <bar-chart ref="temp" id="temp"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="电导" name="conduct">
                            <bar-chart ref="conduct" id="conduct"></bar-chart>
                        </el-tab-pane>
                        <el-tab-pane label="均衡电流" name="curr">
                            <bar-chart ref="curr" id="curr"></bar-chart>
                        </el-tab-pane>
                        <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"
                                :prop="header.prop"
                                :label="header.label"
                                :width="header.width"
                                align="center"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </div>
           </flex-layout>
        </content-box>
    </flex-layout>
            </el-tab-pane>-->
            <el-tab-pane label="电压" name="vol">
              <bar-chart ref="vol" id="vol" unit="V"></bar-chart>
            </el-tab-pane>
            <el-tab-pane label="内阻" name="res">
              <bar-chart ref="res" id="res" unit="mΩ"></bar-chart>
            </el-tab-pane>
            <el-tab-pane label="温度" name="temp">
              <bar-chart ref="temp" id="temp"></bar-chart>
            </el-tab-pane>
            <el-tab-pane label="电导" name="conduct">
              <bar-chart ref="conduct" id="conduct"></bar-chart>
            </el-tab-pane>
            <el-tab-pane label="均衡电流" name="curr">
              <bar-chart ref="curr" id="curr"></bar-chart>
            </el-tab-pane>
            <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"
                  :prop="header.prop"
                  :label="header.label"
                  :width="header.width"
                  align="center"
                ></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </flex-layout>
    </content-box>
  </flex-layout>
</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,
  components: {
    ContentBox,
    MyElTree,
    BarChart
  },
  data() {
    return {
      battFullName: "电池组全称",
      acTabs: "vol",
      data: [],
      table: {
        headers: [
          {
            prop: "num1",
            label: "单体编号",
            width: ""
          },
          {
            prop: "vol1",
            label: "电压(V)",
            width: ""
          },
          {
            prop: "res1",
            label: "内阻(mΩ)",
            width: ""
          },
          {
            prop: "temp1",
            label: "温度(℃)",
            width: ""
          },
          {
            prop: "conduct1",
            label: "电导",
            width: ""
          },
          {
            prop: "curr1",
            label: "均衡电流",
            width: ""
          }
        ],
        data: [
          {
            num1: "#1"
          }
        ]
      },
      batt: {}
    };
  },
  methods: {
    tabClick(tab) {
      this.$nextTick(() => {
        this.$G.chartManage.resize(tab.name);
      });
    },
    data() {
        return {
            battFullName: '电池组全称',
            acTabs: 'vol',
            data: [],
            table: {
                headers: [
                    {
                        prop: 'num1',
                        label: '单体编号',
                        width: '',
                    },
                    {
                        prop: 'vol1',
                        label: '电压(V)',
                        width: '',
                    },
                    {
                        prop: 'res1',
                        label: '内阻(mΩ)',
                        width: '',
                    },
                    {
                        prop: 'temp1',
                        label: '温度(℃)',
                        width: '',
                    },
                    {
                        prop: 'conduct1',
                        label: '电导',
                        width: '',
                    },
                    {
                        prop: 'curr1',
                        label: '均衡电流',
                        width: '',
                    },
                ],
                data: [
                    {
                        num1: '#1',
                    },
                ]
            },
            batt:{},
    toggleChange() {
      this.resize();
    },
    resize() {
      this.$G.chartManage.resize(this.acTabs);
    },
    initChart() {
      // 电压
      vol = {
        title: {
          show: true,
          text: "最大值=0V;最小值=0V;平均值=0V;累加和=0V",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: [
          {
            name: "电压",
            type: "bar",
            data: []
          }
        ]
      };

      // 内阻
      res = {
        title: {
          show: true,
          text: "最大值=0mΩ;最小值=mΩ;平均值=0mΩ",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: [
          {
            name: "内阻",
            type: "bar",
            data: []
          }
        ]
      };

      // 温度
      temp = {
        title: {
          show: true,
          text: "最大值=0℃;最小值=0℃;平均值=0℃",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: [
          {
            name: "温度",
            type: "bar",
            data: []
          }
        ]
      };

      // 电导
      conduct = {
        title: {
          show: true,
          text: "最大值=0;最小值=0;平均值=0",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: [
          {
            name: "电导",
            type: "bar",
            data: []
          }
        ]
      };
      // 均衡电流
      curr = {
        title: {
          show: true,
          text: "最大值=0mA;最小值=0mA;平均值=0mA",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: [
          {
            name: "均衡电流",
            type: "bar",
            data: []
          }
        ]
      };
      // 设置配置项
      this.setChart();
    },
    setChart() {
      this.$refs.vol.setOption(vol);
      this.$refs.res.setOption(res);
      this.$refs.temp.setOption(temp);
      this.$refs.conduct.setOption(conduct);
      this.$refs.curr.setOption(curr);
    },
    // 查询机房的信息
    searchStation() {
      searchStation({
        StationName1: "",
        StationName2: "",
        StationName5: ""
      }).then(res => {
        let rs = JSON.parse(res.data.result);
        let data = [];
        if (rs.code == 1) {
          data = rs.data;
        }
        // 格式化数据
        this.formatData(data);
      });
    },
    methods: {
        tabClick(tab) {
            this.$nextTick(()=>{
                this.$G.chartManage.resize(tab.name);
            });
        },
        toggleChange() {
            this.resize();
        },
        resize() {
            this.$G.chartManage.resize(this.acTabs);
        },
        initChart() {
    formatData(data) {
      let result = [];
      // 遍历数据构造树状
      data.forEach(item => {
        // 省
        let provice = this.addData(result, item.StationName1);
        // 市
        let city = this.addData(provice.children, item.StationName2, provice);
        // 区县
        let county = this.addData(city.children, item.StationName5, city);
        // 机房
        let home = this.addData(
          county.children,
          item.StationName3,
          county,
          item
        );
        // 添加空白位置占位
        home.children.push({
          id: home.id + "temp",
          label: "数据加载中..."
        });
      });
      // 设置树状列表
      this.data = result;
    },
    addData(list, val, parent, data) {
      let item;
      let index = this.checkValIsIn(val, list);
      let parentId = parent ? parent.id + "-" : "";
      if (index == -1) {
        item = {
          id: parentId + val,
          label: val,
          children: [],
          data: data
        };
        list.push(item);
      } else {
        item = list[index];
      }
      return item;
    },
    checkValIsIn(val, arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].label == val) {
          return i;
        }
      }
      return -1;
    },
    nodeClick(data, node) {
      if (data.children[0].label == "数据加载中...") {
        this.searchBattInfo(data, node);
      }
    },

            // 电压
            vol = {
                title: {
                    show: true,
                    text: '最大值=0V;最小值=0V;平均值=0V;累加和=0V',
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                    }
                },
                series: [
                    {
                        name: '电压',
                        type: 'bar',
                        data: []
                    }
                ]
            };

            // 内阻
            res = {
                title: {
                    show: true,
                    text: '最大值=0mΩ;最小值=mΩ;平均值=0mΩ',
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                    }
                },
                series: [
                    {
                        name: '内阻',
                        type: 'bar',
                        data: []
                    }
                ]
            };

            // 温度
            temp = {
                title: {
                    show: true,
                    text: '最大值=0℃;最小值=0℃;平均值=0℃',
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                    }
                },
                series: [
                    {
                        name: '温度',
                        type: 'bar',
                        data: [],
                    }
                ]
            };
            
            // 电导
            conduct = {
                title: {
                    show: true,
                    text: '最大值=0;最小值=0;平均值=0',
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                    }
                },
                series: [
                    {
                        name: '电导',
                        type: 'bar',
                        data: []
                    }
                ]
            };
            // 均衡电流
            curr = {
                title: {
                    show: true,
                    text: '最大值=0mA;最小值=0mA;平均值=0mA',
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                    }
                },
                series: [
                    {
                        name: '均衡电流',
                        type: 'bar',
                        data: []
                    }
                ]
            };
            // 设置配置项
            this.setChart();
        },
        setChart() {
            this.$refs.vol.setOption(vol);
            this.$refs.res.setOption(res);
            this.$refs.temp.setOption(temp);
            this.$refs.conduct.setOption(conduct);
            this.$refs.curr.setOption(curr);
        },
        // 查询机房的信息
        searchStation() {
            searchStation({
                StationName1:"",
                StationName2:"",
                StationName5:"",
            }).then((res)=>{
                let rs = JSON.parse(res.data.result);
                let data = [];
                if(rs.code == 1) {
                    data = rs.data;
                }
                // 格式化数据
                this.formatData(data);
            });
        },
        formatData(data) {
            let result = [];
            // 遍历数据构造树状
            data.forEach(item=>{
                // 省
                let provice = this.addData(result, item.StationName1);
                // 市
                let city = this.addData(provice.children, item.StationName2, provice);
                // 区县
                let county = this.addData(city.children, item.StationName5, city);
                // 机房
                let home = this.addData(county.children, item.StationName3, county, item);
                // 添加空白位置占位
                home.children.push({
                    id: home.id+'temp',
                    label: '数据加载中...'
                });
            });
            // 设置树状列表
            this.data = result;
        },
        addData(list, val, parent, data) {
            let item;
            let index = this.checkValIsIn(val, list);
            let parentId  = parent?parent.id+'-':"";
            if(index == -1) {
                item = {
                    id: parentId+val,
                    label: val,
                    children: [],
                    data: data,
                };
                list.push(item);
            }else {
                item = list[index];
            }
    searchBattInfo(data, node) {
      // 加载等待
      node.loading = true;
      searchBattInfo(data.data).then(res => {
        node.loading = false;
        let rs = JSON.parse(res.data.result);
        let result = [
          {
            id: Math.random(),
            label: "暂无电池组"
          }
        ];
        // 查询到结果
        if (rs.code == 1) {
          result = rs.data.map(item => {
            item.id = item.StationName + "-" + item.BattGroupName;
            item.label = item.BattGroupName;
            item.leaf = true;
            return item;
        },
        checkValIsIn(val, arr) {
            for(let i=0; i<arr.length; i++) {
                if(arr[i].label == val) {
                    return i;
                }
            }
            return -1;
        },
        nodeClick(data, node) {
            if(data.children[0].label == "数据加载中...") {
                this.searchBattInfo(data, node)
            }
        },
        searchBattInfo(data, node) {
            // 加载等待
            node.loading=true;
            searchBattInfo(data.data).then((res)=>{
                node.loading=false;
                let rs = JSON.parse(res.data.result);
                let result=[{
                    id: Math.random(),
                    label: '暂无电池组',
                }];
                // 查询到结果
                if(rs.code == 1) {
                    result = rs.data.map(item=>{
                        item.id = item.StationName+'-'+item.BattGroupName;
                        item.label = item.BattGroupName;
                        item.leaf = true;
                        return item;
                    });
                }
                data.children = result;
            });
        },
        leafClick(data) {
            if(data.leaf) {
                this.batt = data;
                this.realTimeSearch();
            }
            
        },
        realTimeSearch() {
            var batt = this.batt;
            realTimeSearch({
                BattGroupId: batt.BattGroupId,
            }).then(res=>{
                let rs = JSON.parse(res.data.result);
                // 电压值
                let volTemp = [];
                if(rs.code == 1) {
                    volTemp= rs.data.map(item=> {
                        return ['#'+item.mon_num, item.mon_vol]
                    });
                }
                vol.series[0].data = volTemp;

                // 更新电压图表
                this.$refs.vol.setOption(vol);
            });
          });
        }
        data.children = result;
      });
    },
    mounted() {
        // 初始化图表
        this.initChart();
        // 查询电池组
        this.searchStation();
    leafClick(data) {
      if (data.leaf) {
        this.batt = data;
        this.realTimeSearch();
      }
    },
    realTimeSearch() {
      var batt = this.batt;
      realTimeSearch({
        BattGroupId: batt.BattGroupId
      }).then(res => {
        let rs = JSON.parse(res.data.result);
        console.log("rs", rs);

        this.$nextTick(()=>{
            this.$G.chartManage.resize(this.acTabs);
        });
        // 电压值
        let volTemp = [];
        if (rs.code == 1) {
          volTemp = rs.data.map(item => {
            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;  */

        // 屏幕缩放时触发
        window.addEventListener('resize', ()=>{
            this.resize();
        });
        // 温度
        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);
      });
    }
}
  },
  mounted() {
    // 初始化图表
    this.initChart();
    // 查询电池组
    this.searchStation();

    this.$nextTick(() => {
      this.$G.chartManage.resize(this.acTabs);
    });

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

<style scoped>
.page-real-time {
    color: #FFFFFF;
  color: #ffffff;
}
.table-cell.text-right {
    font-size: 14px;
  font-size: 14px;
}
.table-row .table-cell {
    padding-top: 12px;
  padding-top: 12px;
}
.page-content {
    padding-top: 8px;
    padding-bottom: 2px;
    box-sizing: border-box;
    height: 100%;
  padding-top: 8px;
  padding-bottom: 2px;
  box-sizing: border-box;
  height: 100%;
}
</style>


 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>',
      
        opts); // 创建信息窗口对象
      marker.addEventListener("click", function() {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
      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
      ); // 创建信息窗口对象
      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 加载子树数据的方法*/
@@ -186,9 +246,9 @@
          StationName1: node.parent.data.label,
          StationName2: node.data.label
        });
       //console.log(' county', county);
     
       if (county.data.result && JSON.parse(county.data.result).code == 0) {
        //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);
        }

@@ -238,18 +298,26 @@
        })
      ]);
      //console.log('areaRoom',areaRoom);
      
      if (areaRoom.data.result && JSON.parse(areaRoom.data.result).code == 0)  {

      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>