From 104e60913624bad05979d1827334b3b1694353cb Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期二, 23 三月 2021 17:15:30 +0800
Subject: [PATCH] 新模块添加
---
src/components/charts/MonCap.vue | 222 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 150 insertions(+), 72 deletions(-)
diff --git a/src/components/charts/MonCap.vue b/src/components/charts/MonCap.vue
index 9df6197..59f412a 100644
--- a/src/components/charts/MonCap.vue
+++ b/src/components/charts/MonCap.vue
@@ -1,86 +1,164 @@
<template>
- <layout-box title="鍗曚綋瀹归噺">
- <div class="flex-box">
- <div class="flex-box-body">
- <circle-chart id="circleChart" ref="circleChart"></circle-chart>
- </div>
- <div class="flex-box-footer">
- <ul class="list-view">
- <li v-for="item in chart.circle" :key="item.name" class="list-view-item">
- <span class="item-name">{{item.name}}</span>
- :
- <span class="item-value" :style="{'color':item.color}">{{item.value}}</span>
- </li>
- </ul>
- </div>
+ <div class="flex-box">
+ <div class="flex-box-body">
+ <circle-chart id="circleChart" ref="circleChart"></circle-chart>
</div>
- </layout-box>
+ <div class="flex-box-footer">
+ <ul class="list-view">
+ <li v-for="item in chart.circle" :key="item.name" class="list-view-item">
+ <span class="item-name">{{item.name}}</span>
+ :
+ <span class="item-value" :style="{'color':item.color}">{{item.value}}</span>
+ </li>
+ </ul>
+ </div>
+ </div>
</template>
<script>
-import LayoutBox from "@/components/LayoutBox";
-import CircleChart from "@/components/charts/CircleChart";
-export default {
- name: "MonCap",
- components: {CircleChart, LayoutBox},
- data() {
- return {
- chart: {
- circle: [
- {
- name: '浣庡憡璀︽暟閲�',
- value: 380,
- color: '#00DFFC',
- },
- {
- name: '鍛婅鎬绘暟姣斾緥',
- value: 180,
- color: '#FF8B34',
- },
- {
- name: '鍛婅鎬绘暟',
- value: 180,
- color: '#ED4882',
- },
- {
- name: '鍛婅鏈烘埧鎬绘暟',
- value: 280,
- color: '#2EEA9D',
- },
- {
- name: '鍛婅鏈烘埧鏁版瘮渚�',
- value: 70,
- color: '#F3E501',
+ import CircleChart from "@/components/charts/CircleChart";
+ import {
+ batteryAlarmMonCapacity
+ } from '@/assets/js/api'
+ export default {
+ name: "MonCap",
+ components: {
+ CircleChart
+ },
+ data() {
+ return {
+ chart: {
+ circle: [{
+ name: '浣庡憡璀︽暟閲�',
+ value: 0,
+ color: '#00DFFC',
+ },
+ {
+ name: '鍛婅鎬绘暟姣斾緥',
+ value: 0,
+ color: '#FF8B34',
+ },
+ {
+ name: '鍛婅鎬绘暟',
+ value: 0,
+ color: '#ED4882',
+ },
+ {
+ name: '鍛婅鏈烘埧鎬绘暟',
+ value: 0,
+ color: '#2EEA9D',
+ },
+ {
+ name: '鍛婅鏈烘埧鏁版瘮渚�',
+ value: 0,
+ color: '#F3E501',
+ }
+ ]
+ }
+ }
+ },
+ methods: {
+ setData(data) {
+ this.$nextTick(() => {
+ if (data) {
+ this.chart = data;
+ let chart = this.$refs.circleChart;
+ chart.setData(data.circle);
+ chart.resize();
+ } else {
+ this.postData()
+ setInterval(() => {
+ this.postData()
+ }, 3000)
}
- ]
+
+ })
+ },
+ postData() {
+ let userId = localStorage.getItem('userId');
+ let params = {
+ userId: userId
+ }
+ batteryAlarmMonCapacity(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ circle: [{
+ name: '鍛婅鏁�',
+ value: 10,
+ color: '#00DFFC',
+ },
+ {
+ name: '鍛婅鍗犳瘮',
+ value: 10,
+ color: '#FF8B34',
+ },
+ {
+ name: '鍛婅鎬绘暟',
+ value: 10,
+ color: '#ED4882',
+ },
+ {
+ name: '鍛婅鏈烘埧鏁�',
+ value: 10,
+ color: '#2EEA9D',
+ },
+ {
+ name: '鍛婅鏈烘埧鍗犳瘮',
+ value: 10,
+ color: '#F3E501',
+ }
+ ]
+ }
+ let resData = res.data.data;
+ for (let key in resData) {
+ optionData.circle.map(item => {
+ if (item.name == key) {
+ if (typeof resData[key] == 'string') {
+ item.value = Number(resData[key].split('%')[0])
+ } else {
+ item.value = resData[key]
+ }
+ }
+ })
+ }
+ this.chart = optionData;
+ let chart = this.$refs.circleChart;
+ chart.setData(optionData.circle);
+ chart.resize();
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ },
+ resize() {
+ this.$refs.circleChart.resize();
}
}
- },
- mounted() {
- this.$refs.circleChart.setData(this.chart.circle);
}
-}
</script>
<style scoped>
+ .flex-box {
+ display: flex;
+ height: 100%;
+ align-items: center;
+ }
-.flex-box {
- display: flex;
- height: 100%;
- align-items: center;
-}
-.flex-box-body {
- flex:1;
- height: 100%;
-}
-.flex-box-footer {
- padding:0 8px;
-}
-.list-view li {
- list-style: none;
-}
-.list-view-item {
- white-space: nowrap;
- padding: 8px 0;
-}
+ .flex-box-body {
+ flex: 1;
+ height: 100%;
+ }
+
+ .flex-box-footer {
+ padding: 0 8px;
+ }
+
+ .list-view li {
+ list-style: none;
+ }
+
+ .list-view-item {
+ white-space: nowrap;
+ padding: 8px 0;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.1