From 8759438ca3812168f1157d3434931624d14531fd Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 27 九月 2024 17:07:29 +0800
Subject: [PATCH] 图表初始化bug
---
src/views/screen/components/screen-data/index.vue | 142 +++++++++++++++++++++++++++++------------------
1 files changed, 88 insertions(+), 54 deletions(-)
diff --git a/src/views/screen/components/screen-data/index.vue b/src/views/screen/components/screen-data/index.vue
index 741af53..12ce1bc 100644
--- a/src/views/screen/components/screen-data/index.vue
+++ b/src/views/screen/components/screen-data/index.vue
@@ -1,37 +1,48 @@
<template>
<div class="data-container">
- <wrapper-title :title="'宸ュ崟鏁版嵁'" :path="'/work-order-center/maintenance/work-order/work-order'"></wrapper-title>
+ <!-- <wrapper-title
+ :title="'宸ュ崟鏁版嵁'"
+ :path="'/work-order-center/maintenance/work-order/work-order'"
+ ></wrapper-title> -->
<div class="data-content">
<div class="data-panel">
- <div class="panel-title">
+ <div class="panel-title" style="margin-bottom: 30px">
<div class="icon">
- <img src="@/assets/icons/arrow.png" alt="">
+ <img src="@/assets/icons/arrow.png" alt="" />
</div>
- <div class="title">
- 鏁翠綋宸ュ崟鏁�
- </div>
+ <div class="title">鏁翠綋宸ュ崟鏁�</div>
</div>
<div class="panel-container">
<div class="panel-item">
- <data-hola :holaTitle="`宸ュ崟鎬绘暟`" :centerValue="3000" :holaColor="`#4ea8ff`"></data-hola>
+ <data-hola
+ :holaTitle="`宸ュ崟鎬绘暟`"
+ :centerValue="workOrderData.totalNum"
+ :holaColor="`#4ea8ff`"
+ ></data-hola>
</div>
<div class="panel-item">
- <data-hola :holaTitle="`宸插鐞嗗伐鍗曟暟`" :centerValue="1600" :holaColor="`#5dec24`"></data-hola>
+ <data-hola
+ :holaTitle="`宸插鐞嗗伐鍗曟暟`"
+ :centerValue="workOrderData.doneNum"
+ :holaColor="`#5dec24`"
+ ></data-hola>
</div>
<div class="panel-item">
- <data-hola :holaTitle="`鏈鐞嗗伐鍗曟暟`" :centerValue="200" :holaColor="`#dfc639`"></data-hola>
+ <data-hola
+ :holaTitle="`鏈鐞嗗伐鍗曟暟`"
+ :centerValue="workOrderData.todoNum"
+ :holaColor="`#dfc639`"
+ ></data-hola>
</div>
</div>
</div>
<div class="data-panel">
- <div class="panel-title">
+ <div class="panel-title" style="margin: 50px 0 30px 0">
<div class="icon">
- <img src="@/assets/icons/arrow.png" alt="">
+ <img src="@/assets/icons/arrow.png" alt="" />
</div>
- <div class="title">
- 鍒嗗尯宸ュ崟鏁�
- </div>
+ <div class="title">鍒嗗尯宸ュ崟鏁�</div>
</div>
<div class="echart-container">
<div id="barChart" ref="barChart"></div>
@@ -42,83 +53,109 @@
</template>
<script>
-import * as echarts from 'echarts';
-import WrapperTitle from '../wrapper-title/index';
-import DataHola from './components/data-hola';
+import * as echarts from "echarts";
+import WrapperTitle from "../wrapper-title/index";
+import DataHola from "./components/data-hola";
let chart = null;
export default {
- name: 'ScreenData',
+ name: "ScreenData",
components: {
WrapperTitle,
- DataHola
+ DataHola,
+ },
+ props: {
+ workOrderData: {
+ type: Object,
+ default: {},
+ },
+ workOrderRegion: {
+ type: Array,
+ default: null,
+ },
},
data() {
return {
dataList: {
- name: ['瀵岄『鍘�', '鑽ｅ幙', '楂樻柊鍖�', '鑷祦浜曞尯', '璐′簳鍖�', '澶у畨鍖�', '娌挎哗鍖�'],
- data1: [210, 310, 40, 102, 111, 201, 123],
- data2: [20, 30, 10, 10, 11, 21, 5],
+ name: [],
+ data1: [],
+ data2: [],
},
- }
+ };
},
methods: {
initEchart() {
const option = {
grid: {
- top: '10%',
+ top: "10%",
right: 0,
- bottom: '17%',
+ bottom: "17%",
},
legend: {
right: 0,
textStyle: {
- color: '#447ED6'
- }
+ color: "#fff",
+ },
},
tooltip: {},
xAxis: {
- type: 'category',
+ type: "category",
axisLabel: {
- color: '#447ED6',
- rotate: 45
+ color: "#fff",
+ rotate: 45,
},
- data: this.dataList.name
+ data: this.dataList.name,
},
yAxis: {
axisLabel: {
- color: '#4D76B0',
+ color: "#fff",
},
},
series: [
{
- type: 'bar',
- name: '宸插鐞嗗伐鍗曟暟',
- stack: 'total',
+ type: "bar",
+ name: "宸插鐞嗗伐鍗曟暟",
+ stack: "total",
itemStyle: {
- color: '#4ea8ff'
+ color: "#4ea8ff",
},
- data: this.dataList.data1
+ data: this.dataList.data1,
},
{
- type: 'bar',
- name: '鏈鐞嗗伐鍗曟暟',
- stack: 'total',
+ type: "bar",
+ name: "鏈鐞嗗伐鍗曟暟",
+ stack: "total",
itemStyle: {
- color: '#dfc639'
+ color: "#dfc639",
},
- data: this.dataList.data2
+ data: this.dataList.data2,
},
- ]
- }
+ ],
+ };
chart.setOption(option, true);
-
- }
+ },
},
mounted() {
chart = echarts.init(this.$refs.barChart);
this.initEchart();
- }
-}
+ },
+ watch: {
+ workOrderRegion() {
+ let name = [];
+ let data1 = [];
+ let data2 = [];
+ this.workOrderRegion.map((item) => {
+ name.push(item.area);
+ data1.push(item.todoNum);
+ data2.push(item.doneNum);
+ })
+ this.dataList.name = name;
+ this.dataList.data1 = data1;
+ this.dataList.data2 = data2;
+ chart = echarts.init(this.$refs.barChart);
+ this.initEchart();
+ }
+ },
+};
</script>
<style lang="scss" scoped>
@@ -130,10 +167,7 @@
.data-content {
flex: 1;
- background: rgba(67, 102, 155, 0.3);
- border: 1px solid rgba(47, 91, 157, 0.8);
padding: 10px;
- box-sizing: border-box;
}
}
@@ -170,8 +204,8 @@
margin: 10px 0;
.panel-item {
- width: 120px;
- height: 120px;
+ width: 110px;
+ height: 110px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0