站点列表提交

whychdw

2020-08-26 a0781bbfea57c3c4be2ffed564ddc222cb63745a

站点列表提交

 src/components/chart/LineChart.vue

@@ -121,32 +121,12 @@
            }
            // 设置配置项
            let series = opt.series.map(item=>{
                let max = this.getMax(item.data);
                let min = this.getMin(item.data);
                // 设置类型
                item.type="line";
                item.markLine = {
                    silent: true,
                    data: []
                };

                // 显示数据
                item.label= {
                    show: true,
                    position: 'top',
                    color: '#fff',
                };

                // 设置背景
                item.itemStyle = {
                    color: function(value) {
                        let val = value.value[1];
                        if(val == max) {
                            return 'green';
                        }else if(val == min) {
                            return 'red';
                        }
                    }
                };
                // 设置平滑的线条，关闭圆圈，设置采样点
                item.smooth=true;
                item.symbolSize=0;
                item.sampling='average';
                return item;
            });
            // 返回

 src/pages/dataTest/HomeList.vue

New file
@@ -0,0 +1,143 @@
<template>
    <content-box title="站点列表"
    toggle
    @toggleChange="toggleChange" 
    style="width:320px">
        <my-el-tree
        :data="data"
        @node-click="nodeClick"
        @leaf-click="leafClick"></my-el-tree>
    </content-box>
</template>

<script>
import ContentBox from '../../components/ContentBox'
import MyElTree from '../../components/MyElTree'

import {
   searchStation,
   searchBattInfo,
} from '../../assets/js/api'

export default {
    components: {
        ContentBox,
        MyElTree,
    },
    data() {
        return {
           data: [], 
        }
    },
    methods: {
        toggleChange() {
            this.$emit('toggleChange');
        },
        // 查询机房的信息
        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];
            }
            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.$emit('leaf-click', data);
            }
            
        },
    },
    mounted() {
        // 查询电池组
        this.searchStation();
    }
}
</script>

<style scoped>

</style>



 src/pages/dataTest/history.vue

@@ -1,12 +1,8 @@
<template>
    <flex-layout direction="row" class="page-history">
        <content-box title="站点列表" 
        slot="header" style="width:320px"
        <home-list slot="header"
        @toggleChange="toggleChange" 
        toggle>
            <my-el-tree
            :data="data"></my-el-tree>
        </content-box>
        @leaf-click="leafClick"></home-list>
        <content-box style="margin-left: 4px; margin-right: 4px;" :title="battFullName">
            <flex-layout>
                <div class="content-header" slot="header">
@@ -62,7 +58,7 @@
                    </div>
                    <div class="flex-box-list">
                        <div class="flex-box">
                            <bar-chart ref="groupVol" id="groupVol" unit="V"></bar-chart>
                            <line-chart ref="groupVol" id="groupVol" unit="V"></line-chart>
                        </div>
                        <div class="flex-box">
                            <bar-chart ref="monBar" id="monBar"></bar-chart>
@@ -70,10 +66,10 @@
                    </div>
                    <div class="flex-box-list">
                        <div class="flex-box">
                            <bar-chart ref="groupCurr" id="groupCurr" unit="A"></bar-chart>
                            <line-chart ref="groupCurr" id="groupCurr" unit="A"></line-chart>
                        </div>
                        <div class="flex-box">
                            <bar-chart ref="monInfo" id="monInfo"></bar-chart>
                            <line-chart ref="monInfo" id="monInfo"></line-chart>
                        </div>
                    </div>
                </div>
@@ -84,19 +80,22 @@

<script>
import ContentBox from '../../components/ContentBox'
import MyElTree from '../../components/MyElTree'
import HomeList from './HomeList'
import BarChart from '../../components/chart/BarChart'
import LineChart from '../../components/chart/LineChart'

export default {
    components: {
        ContentBox,
        MyElTree,
        HomeList,
        BarChart,
        LineChart,
    },
    data() {
        return {
            battFullName: '电池组全称',
            data: [],
            batt: {},
            list: [
                {
                    value: 'herongDischarge',
@@ -130,6 +129,10 @@
            this.$G.chartManage.resize('monBar');
            this.$G.chartManage.resize('groupCurr');
            this.$G.chartManage.resize('monInfo');
        },
        leafClick(data) {
            this.batt = data;
            // 查询历史数据
        }
    },
    mounted() {

 src/pages/dataTest/realTime.vue

@@ -1,8 +1,8 @@
<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>
    <home-list slot="header"
    @toggleChange="toggleChange"
    @leaf-click="leafClick"></home-list>
    <content-box style="margin-left: 4px; margin-right: 4px;" :title="battFullName">
      <flex-layout>
        <div class="content-header" slot="header">
@@ -86,9 +86,8 @@

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

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

@@ -96,14 +95,13 @@
export default {
  components: {
    ContentBox,
    MyElTree,
    HomeList,
    BarChart
  },
  data() {
    return {
      battFullName: "电池组全称",
      acTabs: "vol",
      data: [],
      table: {
        headers: [
          {
@@ -262,108 +260,9 @@
      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];
      }
      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;
@@ -411,8 +310,6 @@
  mounted() {
    // 初始化图表
    this.initChart();
    // 查询电池组
    this.searchStation();

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