lishifeng
2020-08-21 7ef9e0504428d5730ede1bdf95e374688326edf7
提交3
2个文件已修改
150 ■■■■ 已修改文件
src/components/MyElTree.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/index.vue 146 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/MyElTree.vue
@@ -1,10 +1,10 @@
<template>
    <el-tree
    class="filter-tree"
    :data="data"
    :props="defaultProps"
    node-key="id"
    ref="tree"
    ref="tree"
    :data="data"
    @node-click="nodeClick">
    </el-tree>
</template>
src/pages/index.vue
@@ -1,7 +1,7 @@
<template>
  <flex-layout direction="row" class="page-index">
    <content-box title="站点列表" slot="header" toggle style="width:320px">
      <my-el-tree :data="data" @node-click="nodeClick"></my-el-tree>
      <my-el-tree :data="cityData" @node-click="nodeClick"></my-el-tree>
    </content-box>
    <div class="map-container">
      <div ref="map" class="map-content"></div>
@@ -33,8 +33,10 @@
import {
  searchPowerOff,
  searchBattGood,
  searchProvince,
  searchBattGood
  /* searchProvince,
  searchCity,
  searchCounty, */
} from "@/assets/js/api";
let map, chart1, chart2, chart3, chart4;
@@ -46,57 +48,57 @@
  },
  data() {
    return {
         data: [
      cityData: [
        {
          id: "湖北省",
          label: "湖北省",
          children: [
            {
              id: "湖北省-武汉市",
              label: "武汉市",
              children: [
                {
                    id: '湖北省',
                    label: '湖北省',
                    children: [
                        {
                            id: '湖北省-武汉市',
                            label: '武汉市',
                            children: [
                                {
                                    id: '湖北省-武汉市-东西湖区',
                                    label: '东西湖区',
                                    children: [
                                        {
                                            id: '湖北省-武汉市-东西湖区-测试机房',
                                            label: '测试机房',
                                        }
                                    ]
                                },
                            ]
                        }
                    ]
                },
                {
                    id: '河南省',
                    label: '河南省',
                    children: [
                        {
                            id: '河南省-驻马店市',
                            label: '驻马店市',
                            children: [
                                {
                                    id: '河南省-驻马店市-驿城区',
                                    label: '驿城区',
                                    children: [
                                        {
                                            id: '河南省-驻马店市-驿城区-测试机房',
                                            label: '测试机房',
                                            children: []
                                        }
                                    ]
                                },
                            ]
                        }
                    ]
                  id: "湖北省-武汉市-东西湖区",
                  label: "东西湖区",
                  children: [
                    {
                      id: "湖北省-武汉市-东西湖区-测试机房",
                      label: "测试机房"
                    }
                  ]
                }
            ],
    }
              ]
            }
          ]
        },
        {
          id: "河南省",
          label: "河南省",
          children: [
            {
              id: "河南省-驻马店市",
              label: "驻马店市",
              children: [
                {
                  id: "河南省-驻马店市-驿城区",
                  label: "驿城区",
                  children: [
                    {
                      id: "河南省-驻马店市-驿城区-测试机房",
                      label: "测试机房",
                      children: []
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
  methods: {
    initMap() {
      map = new TMap.Map(this.$refs.map, {
        center: new TMap.LatLng(39.916527, 116.397128), //设置地图中心点坐标
@@ -104,23 +106,17 @@
        viewMode: "3D",
        setPitch: 50
      });
       console.log(map);
      console.log(map);
    },
    /* 城市列表 */
  async  nodeClick(data) {
      console.log(data);
        /* 查询省 */
        const  province = await searchProvince();
         console.log('province',province);
    },
    //动态加载城市列表
    /* loadNode 加载子树数据的方法*/
    async loadNode() {},
    initChart() {
      // 饼状图1
      chart1 = {
        //红,蓝,绿
        color: ["#FF0000", "#1E90FF", "#00FF00"],
        color: ["#FF0000", "#00FF00"],
        title: {
          text: "机房停电"
        },
@@ -129,7 +125,7 @@
            name: "电池信息",
            data: [
              { value: this.powerOff.sum, name: "机房停电" },
              { value: 0, name: "机房掉站" },
              {
                value: this.powerOff.newsum - this.powerOff.sum,
                name: "机房未停电"
@@ -142,18 +138,23 @@
      // 饼状图2
      chart2 = {
        // 红,黄,绿,蓝
        color: ["#FF0000", "#FFD700", "#00FF00", "#1E90FF"],
        color: ["#00FF00", "#FFD700", "#FF0000"],
        title: {
          text: "机房续航能力"
          text: "单体容量健康率"
        },
        series: [
          {
            name: "电池信息",
            data: [
              { value: 0, name: "续航不足1小时" },
              { value: 0, name: "续航不足1~2小时" },
              { value: 0, name: "续航不足2~3小时" },
              { value: 0, name: "续航3小时以上" }
              {
                value:
                  this.battGood.sum -
                  this.battGood.data[1] -
                  this.battGood.data[0],
                name: "单体容量健康"
              },
              { value: this.battGood.data[1], name: "单体容量更换" },
              { value: this.battGood.data[0], name: "单体容量告警" }
            ]
          }
        ]
@@ -231,10 +232,11 @@
      }
      this.battGood = JSON.parse(battGood.data.result);
      this.powerOff = JSON.parse(powerOff.data.result);
      /*   console.log(' this.battGood', this.battGood);
         console.log(' this.powerOff',  this.powerOff); */
      this.initChart();
    }
    },
    //树形控件点击事件
    async nodeClick() {}
  },
  mounted() {
    // 初始化地图