| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | |
| | | import { |
| | | searchPowerOff, |
| | | searchBattGood, |
| | | searchProvince, |
| | | searchBattGood |
| | | /* searchProvince, |
| | | searchCity, |
| | | searchCounty, */ |
| | | } from "@/assets/js/api"; |
| | | |
| | | let map, chart1, chart2, chart3, chart4; |
| | |
| | | }, |
| | | 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), //设置地图中心点坐标 |
| | |
| | | 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: "机房停电" |
| | | }, |
| | |
| | | name: "电池信息", |
| | | data: [ |
| | | { value: this.powerOff.sum, name: "机房停电" }, |
| | | { value: 0, name: "机房掉站" }, |
| | | |
| | | { |
| | | value: this.powerOff.newsum - this.powerOff.sum, |
| | | name: "机房未停电" |
| | |
| | | // 饼状图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: "单体容量告警" } |
| | | ] |
| | | } |
| | | ] |
| | |
| | | } |
| | | 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() { |
| | | // 初始化地图 |