diff --git a/src/api/wel/wel.js b/src/api/wel/wel.js index 82b8f8e..a4006db 100644 --- a/src/api/wel/wel.js +++ b/src/api/wel/wel.js @@ -21,6 +21,13 @@ export const getFlowTakeTime = () => { method: 'get', }) } +// 状态统计 +export const getFlowStatus = () => { + return request({ + url: `${prefix}/flowStatus`, + method: 'get', + }) +} // 类型统计 export const getFlowListType = () => { return request({ diff --git a/src/views/plugin/workflow/process/components/start/grid.vue b/src/views/plugin/workflow/process/components/start/grid.vue index 5d564b6..afc4158 100644 --- a/src/views/plugin/workflow/process/components/start/grid.vue +++ b/src/views/plugin/workflow/process/components/start/grid.vue @@ -128,4 +128,4 @@ export default { } } } - + \ No newline at end of file diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue index 4a14fe2..ea5c231 100644 --- a/src/views/wel/index.vue +++ b/src/views/wel/index.vue @@ -52,6 +52,7 @@ import { getFlowListMonth, getFlowTakeTime, getFlowListType, + getFlowStatus, } from "@/api/wel/wel.js"; export default { name: "wel", @@ -85,6 +86,7 @@ export default { this.onload(); }, methods: { + // 数据统计 lineChart(xData, monthAddNum, monthFinishNum) { var myChart = this.$echarts.init(document.getElementById("lineChart")); //配置图表 @@ -203,18 +205,11 @@ export default { }, 100); }); }, + // 类型统计 pieOneChart(data) { var myChart = this.$echarts.init(document.getElementById("pieItemOne")); //配置图表 var option = { - color: [ - "#2689FF", - "#6F33FF", - "#2356F7", - "#00C374", - "#00CFDC", - "#FD4D66", - ], title: { text: "业务类型统计", textStyle: { @@ -270,7 +265,8 @@ export default { }, 100); }); }, - pieTwoChart() { + // 完成状态 + pieTwoChart(data) { var myChart = this.$echarts.init(document.getElementById("pieItemTwo")); //配置图表 var option = { @@ -302,13 +298,10 @@ export default { name: "状态统计", type: "pie", radius: ["55%", "42%"], - data: [ - { value: 140, name: "审批中" }, - { value: 206, name: "进行中" }, - { value: 75, name: "已完成" }, - ], - + data, hoverAnimation: false, + minAngle: 15, //最小角度 + startAngle: 270, //起始角度 label: { normal: { color: "#000", @@ -320,15 +313,13 @@ export default { }, labelLine: { length: 30, - length2: 20, - show: true, }, }, { center: ["36%", "48%"], name: "", type: "pie", - radius: "30%", + radius: "28%", itemStyle: { color: "#ccc", }, @@ -337,6 +328,9 @@ export default { labelLine: { show: false, }, + tooltip: { + show: false, + }, }, ], }; @@ -347,6 +341,7 @@ export default { }, 100); }); }, + // 任务耗时 barChart(XData, YData) { var myChart = this.$echarts.init(document.getElementById("barChart")); var option = { @@ -428,11 +423,11 @@ export default { color: "#4CA3FB", }, label: { - show:true, - position: 'top', + show: true, + position: "top", color: "#000", - fontSize: 14 - } + fontSize: 14, + }, }, ], }; @@ -453,6 +448,7 @@ export default { this.headerList[i].num = arr[i]; } }); + // 数据统计 getFlowListMonth().then((res) => { const { xData, monthAddNum, monthFinishNum } = res.data.data; this.lineChart(xData, monthAddNum, monthFinishNum); @@ -461,21 +457,20 @@ export default { getFlowListType().then((res) => { this.pieOneChart(res.data.data); }); + // 完成状态 + getFlowStatus().then((res) => { + this.pieTwoChart(res.data.data); + }); // 任务耗时 getFlowTakeTime().then((res) => { const { XData, YData } = res.data.data; - const data = XData.map(item => { - return item + "天" - }) + const data = XData.map((item) => { + return item + "天"; + }); this.barChart(data, YData); }); }, }, - mounted() { - this.pieOneChart(); - this.pieTwoChart(); - this.barChart(); - }, };