From 81380b5b765cdbfcbf7153378b79a41aab78b735 Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期五, 02 八月 2024 16:48:27 +0800
Subject: [PATCH] feat：首页统计图
---
src/views/home/data-chart/index.vue | 86 +++++++++------------
src/views/system/check/result/index.vue | 2
src/views/home/work-order/index.vue | 102 +++++++++---------------
src/api/platform/home.js | 27 ++++++
4 files changed, 103 insertions(+), 114 deletions(-)
diff --git a/src/api/platform/home.js b/src/api/platform/home.js
new file mode 100644
index 0000000..92c3128
--- /dev/null
+++ b/src/api/platform/home.js
@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+// 杩愮淮鍏徃涓嬫媺
+export function ywUnitList() {
+ return request({
+ url: '/home/ywUnitList',
+ method: 'get'
+ })
+}
+
+// 杩愮淮鐩戞帶鎶ヨ〃
+export function monitor(data) {
+ return request({
+ url: '/home/monitor',
+ method: 'get',
+ params: data
+ })
+}
+
+// 杩愮淮宸ュ崟鎶ヨ〃
+export function workOrder(data) {
+ return request({
+ url: '/home/workOrder',
+ method: 'get',
+ params: data
+ })
+}
\ No newline at end of file
diff --git a/src/views/home/data-chart/index.vue b/src/views/home/data-chart/index.vue
index 0f0d2b4..7dc8aec 100644
--- a/src/views/home/data-chart/index.vue
+++ b/src/views/home/data-chart/index.vue
@@ -5,14 +5,14 @@
<div class="title-container">
<h1>杩愮淮鐩戞帶鎶ヨ〃</h1>
<div class="select-container">
- <el-select v-model="company" placeholder="璇烽�夋嫨杩愮淮鍏徃" @change="companyChange">
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+ <el-select v-model="params.unitId" placeholder="璇烽�夋嫨杩愮淮鍏徃" @change="showData">
+ <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="date-container">
- <el-date-picker v-model="dateRange" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡">
+ <el-date-picker type="monthrange" v-model="params.dateRange" range-separator="鑷�" start-placeholder="寮�濮嬫湀浠�"
+ end-placeholder="缁撴潫鏈堜唤" @change="showData">
</el-date-picker>
</div>
</div>
@@ -26,47 +26,19 @@
<script>
import * as echarts from 'echarts';
+import { ywUnitList, monitor } from "@/api/platform/home";
let lineChart = null;
let observer = null;
export default {
name: 'DataChart',
data() {
return {
- dateRange: '',
- company: '',
- options: [
- { label: 'XX杩愮淮鍏徃1', value: 'XX杩愮淮鍏徃1' },
- { label: 'XX杩愮淮鍏徃2', value: 'XX杩愮淮鍏徃2' },
- { label: 'XX杩愮淮鍏徃3', value: 'XX杩愮淮鍏徃3' },
- { label: 'XX杩愮淮鍏徃4', value: 'XX杩愮淮鍏徃4' },
- ],
- dataList: [
- {
- name: 'XX杩愮淮鍏徃1',
- state: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 },
- state2: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 }
- },
- {
- name: 'XX杩愮淮鍏徃2',
- state: { '1鏈�': 213, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 },
- state2: { '1鏈�': 123, '2鏈�': 123, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 }
- },
- {
- name: 'XX杩愮淮鍏徃3',
- state: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211, '6鏈�': 1321 },
- state2: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 123, '4鏈�': 23, '5鏈�': 123 }
- },
- {
- name: 'XX杩愮淮鍏徃4',
- state: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 },
- state2: { '1鏈�': 123, '2鏈�': 613, '3鏈�': 1412, '4鏈�': 2336, '5鏈�': 123 }
- },
- {
- name: 'XX杩愮淮鍏徃5',
- state: { '1鏈�': 1000, '2鏈�': 433, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 8886 },
- state2: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 }
- },
- ],
+ params: {
+ dateRange: '',
+ unitId: ''
+ },
+ options: [],
+ dataList: [],
}
},
methods: {
@@ -128,13 +100,20 @@
},
- companyChange() {
- this.acitveData = this.dataList.find((item) => {
- return item.name === this.company;
- });
- if (this.acitveData) {
+ showData() {
+ monitor(this.params).then(res => {
+ this.acitveData = res.data;
+ if (Object.keys(this.acitveData).length === 0) {
+ this.acitveData = {
+ "name": "",
+ "state": {},
+ "state2": {}
+ }
+ }
+ lineChart = echarts.init(this.$refs.chartContent);
this.initChart();
- }
+ this.observe();
+ })
},
// 鐩戝惉鍙樺寲
@@ -155,11 +134,18 @@
},
mounted() {
- this.acitveData = this.dataList[0];
- this.company = this.acitveData.name;
- lineChart = echarts.init(this.$refs.chartContent);
- this.initChart();
- this.observe();
+ ywUnitList().then(res => {
+ this.options = res.data.data.map(item => {
+ return {
+ label: item.value,
+ value: item.id
+ }
+ })
+ if (this.params.unitId === '') {
+ this.params.unitId = this.options[0].value;
+ }
+ this.showData();
+ })
},
beforeDestroy() {
if (lineChart) {
diff --git a/src/views/home/work-order/index.vue b/src/views/home/work-order/index.vue
index a261037..dd29ecf 100644
--- a/src/views/home/work-order/index.vue
+++ b/src/views/home/work-order/index.vue
@@ -5,13 +5,13 @@
<div class="title-container">
<h1>杩愮淮宸ュ崟鎶ヨ〃</h1>
<div class="select-container">
- <el-select v-model="company" placeholder="璇烽�夋嫨杩愮淮鍏徃" @change="companyChange">
+ <el-select v-model="params.unitId" placeholder="璇烽�夋嫨杩愮淮鍏徃" @change="showData">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="date-container">
- <el-select v-model="dateRange" placeholder="璇烽�夋嫨鏃堕棿鑼冨洿">
+ <el-select v-model="params.dateType" placeholder="璇烽�夋嫨鏃堕棿鑼冨洿" @change="showData">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
@@ -27,64 +27,24 @@
<script>
import * as echarts from 'echarts';
+import { ywUnitList, workOrder } from "@/api/platform/home";
let lineChart = null;
let observer = null;
export default {
name: 'DataChart',
data() {
return {
- dateRange: '',
- company: '',
- options: [
- { label: '鍏ㄩ儴', value: '鍏ㄩ儴' },
- { label: 'XX杩愮淮鍏徃1', value: 'XX杩愮淮鍏徃1' },
- { label: 'XX杩愮淮鍏徃2', value: 'XX杩愮淮鍏徃2' },
- { label: 'XX杩愮淮鍏徃3', value: 'XX杩愮淮鍏徃3' },
- { label: 'XX杩愮淮鍏徃4', value: 'XX杩愮淮鍏徃4' },
- ],
+ params: {
+ dateType: '',
+ unitId: ''
+ },
+ options: [],
options2: [
- { label: '鏃ュ伐鍗曟暟', value: '鏃ュ伐鍗曟暟' },
- { label: '鍛ㄥ伐鍗曟暟', value: '鍛ㄥ伐鍗曟暟' },
- { label: '鏈堝伐鍗曟暟', value: '鏈堝伐鍗曟暟' },
+ { label: '鏃ュ伐鍗曟暟', value: 'day' },
+ { label: '鍛ㄥ伐鍗曟暟', value: 'week' },
+ { label: '鏈堝伐鍗曟暟', value: 'month' },
],
- dataList: [
- {
- name: '鍏ㄩ儴',
- complete: { '1鏈�': 10310, '2鏈�': 23200, '3鏈�': 16430, '4鏈�': 24000, '5鏈�': 31700 },
- waiting: { '1鏈�': 1500, '2鏈�': 2310, '3鏈�': 14530, '4鏈�': 231, '5鏈�': 1235 },
- pending: { '1鏈�': 2530, '2鏈�': 2450, '3鏈�': 4000, '4鏈�': 4300, '5鏈�': 3210 }
- },
- {
- name: 'XX杩愮淮鍏徃1',
- complete: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 },
- waiting: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 },
- pending: { '1鏈�': 200, '2鏈�': 235, '3鏈�': 300, '4鏈�': 400, '5鏈�': 500 }
- },
- {
- name: 'XX杩愮淮鍏徃2',
- complete: { '1鏈�': 213, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 },
- waiting: { '1鏈�': 123, '2鏈�': 123, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 },
- pending: { '1鏈�': 135, '2鏈�': 422, '3鏈�': 425, '4鏈�': 323, '5鏈�': 400 }
- },
- {
- name: 'XX杩愮淮鍏徃3',
- complete: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 },
- waiting: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 123, '4鏈�': 23, '5鏈�': 123 },
- pending: { '1鏈�': 534, '2鏈�': 435, '3鏈�': 422, '4鏈�': 121, '5鏈�': 313 }
- },
- {
- name: 'XX杩愮淮鍏徃4',
- complete: { '1鏈�': 1000, '2鏈�': 2131, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 3211 },
- waiting: { '1鏈�': 123, '2鏈�': 613, '3鏈�': 1412, '4鏈�': 2336, '5鏈�': 123 },
- pending: { '1鏈�': 123, '2鏈�': 321, '3鏈�': 131, '4鏈�': 321, '5鏈�': 421 }
- },
- {
- name: 'XX杩愮淮鍏徃5',
- complete: { '1鏈�': 1000, '2鏈�': 433, '3鏈�': 1233, '4鏈�': 2132, '5鏈�': 8886 },
- waiting: { '1鏈�': 123, '2鏈�': 213, '3鏈�': 1412, '4鏈�': 23, '5鏈�': 123 },
- pending: { '1鏈�': 333, '2鏈�': 245, '3鏈�': 233, '4鏈�': 222, '5鏈�': 111 }
- },
- ],
+ dataList: [],
}
},
methods: {
@@ -160,13 +120,21 @@
},
- companyChange() {
- this.acitveData = this.dataList.find((item) => {
- return item.name === this.company;
- });
- if (this.acitveData) {
+ showData() {
+ workOrder(this.params).then(res => {
+ this.acitveData = res.data;
+ if (Object.keys(this.acitveData).length === 0) {
+ this.acitveData = {
+ name: '',
+ complete: {},
+ waiting: {},
+ pending: {}
+ }
+ }
+ lineChart = echarts.init(this.$refs.chartContent);
this.initChart();
- }
+ this.observe();
+ })
},
// 鐩戝惉鍙樺寲
@@ -187,11 +155,19 @@
},
mounted() {
- this.acitveData = this.dataList[0];
- this.company = this.acitveData.name;
- lineChart = echarts.init(this.$refs.chartContent);
- this.initChart();
- this.observe();
+ ywUnitList().then(res => {
+ this.options = res.data.data.map(item => {
+ return {
+ label: item.value,
+ value: item.id
+ }
+ })
+ if (this.params.unitId === '') {
+ this.params.unitId = this.options[0].value;
+ }
+ this.params.dateType = this.options2[0].value;
+ this.showData();
+ })
},
beforeDestroy() {
if (lineChart) {
diff --git a/src/views/system/check/result/index.vue b/src/views/system/check/result/index.vue
index 3b5dfac..b052177 100644
--- a/src/views/system/check/result/index.vue
+++ b/src/views/system/check/result/index.vue
@@ -4,8 +4,8 @@
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
style="margin-bottom: 10px">
<el-menu-item index="0">鐪佸巺鏈堝害</el-menu-item>
- <el-menu-item index="1">甯傚眬鏈堝害</el-menu-item>
<el-menu-item index="2">鐪佸巺瀛ｅ害</el-menu-item>
+ <el-menu-item index="1">甯傚眬鏈堝害</el-menu-item>
<el-menu-item index="3">甯傚眬瀛ｅ害</el-menu-item>
</el-menu>
</div>
--
Gitblit v1.8.0