From 2655f16a2f6a977d0e378947d0865b02ec4121e1 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期四, 23 十一月 2023 16:56:50 +0800
Subject: [PATCH] 主数据申请接口变更+统计图表整合
---
Source/UBCS-WEB/src/views/statistic/statisticPage.vue | 15 +
Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue | 29 +++
Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue | 105 +++++---------
Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue | 121 +++++++++++++++++
Source/UBCS-WEB/src/api/GetItem.js | 16 ++
Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue | 84 ++++++++++++
6 files changed, 297 insertions(+), 73 deletions(-)
diff --git a/Source/UBCS-WEB/src/api/GetItem.js b/Source/UBCS-WEB/src/api/GetItem.js
index 2ba7b96..f8c50ce 100644
--- a/Source/UBCS-WEB/src/api/GetItem.js
+++ b/Source/UBCS-WEB/src/api/GetItem.js
@@ -45,6 +45,22 @@
data
})
}
+//鐢宠
+export function applySaveCode(data) {
+ return request({
+ url: 'api/ubcs-code/mdmEngineController/addSaveBZ',
+ method: 'post',
+ data
+ })
+}
+//淇
+export function amendEditCode(data) {
+ return request({
+ url: 'api/ubcs-code/mdmEngineController/addSaveBZ',
+ method: 'post',
+ data
+ })
+}
//宸插彂甯冩暟鎹洿鏀�
export function upSaveCode(data) {
return request({
diff --git a/Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue b/Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue
index 5025b4b..483d080 100644
--- a/Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue
+++ b/Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue
@@ -72,7 +72,7 @@
align="center">
</el-table-column>
<!-- 鍙傜収鏁版嵁-->
- <el-table-column v-for="(item,index) in referArray" key="index" v-if="Object.keys(item.referConfig).length > 0 && !item.hidden" :label="item.title" prop="jiliangdw"
+ <el-table-column v-for="(item,index) in referArray" :key="index" v-if="item.referConfig && Object.keys(item.referConfig).length > 0 && !item.hidden" :label="item.title" prop="jiliangdw"
:show-overflow-tooltip="true" :sortable="item.sortable" :width="item.width"
align="center">
<template slot-scope="scope">
@@ -176,7 +176,8 @@
deleteCode,
upSaveCode,
applyGroupCode,
- receiveEditApply
+ receiveEditApply,
+ applySaveCode
} from "@/api/GetItem";
import {processTS, changeStatus} from "@/api/template/setPersonnel"
import {listCodeAttributeByClassId} from "@/api/integration/integration.js";
@@ -553,10 +554,28 @@
this.applyvisible = true;
});
},
- applySumbit(){
-
+ applySumbit(val){
+ // console.log('val',val)
+ if(func.notEmpty(val.ts)) {
+ val.ts = func.formattedDateTime(val.ts);
+ //console.log(val.ts);
+ }
+ applySaveCode(val).then(res => {
+ this.$nextTick(() => {
+ this.applyvisible = false;
+ this.$message.success("淇濆瓨鎴愬姛");
+ this.onLoad()
+ })
+ })
},
- amendSumbit(){
+ amendSumbit(val){
+ applySaveCode(val).then(res => {
+ this.$nextTick(() => {
+ this.amendvisible = false;
+ this.$message.success("淇濆瓨鎴愬姛");
+ this.onLoad()
+ })
+ })
},
//鏍囧噯淇
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
new file mode 100644
index 0000000..2d84725
--- /dev/null
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
@@ -0,0 +1,121 @@
+<template>
+ <basic-container>
+ <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
+ </basic-container>
+
+</template>
+
+<script>
+import 'echarts'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/legend'
+
+var data = [
+ [120, 132, 101, 134, 90, 230, 210, 130, 0, 122, 100, 80],
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+];
+
+// 鎵惧埌姣忎竴椤规暟鎹腑鐨勬渶澶у�煎苟淇濆瓨鍒版暟缁�
+var maxValues = data[0].map(function (_, i) {
+ return Math.max.apply(null, data.map(function (item) {
+ return item[i];
+ }));
+});
+
+var colors = ['#91CC75', '#5470C6'];
+// 鐢熸垚鏌辩姸鍥剧殑 series 鏁版嵁
+var seriesData = [];
+for (var i = 0; i < data.length; i++) {
+ var curSeriesData = [];
+ // 璁＄畻鏁版嵁涓殑姣忕粍鏁版嵁鐨勬渶澶у��
+ for (var j = 0; j < data[i].length; j++) {
+ var borderRadius = [0, 0, 0, 0]; // 榛樿涓嶈缃渾瑙�
+ if (data[i][j] === maxValues[j]) { // 濡傛灉褰撳墠鏌卞瓙鐨勫�肩瓑浜庡搴斿垪鐨勬渶澶у�硷紝璁剧疆鍦嗚
+ borderRadius = [50, 50, 0, 0]; // 璁剧疆鍥涗釜瑙掗兘涓哄渾瑙�
+ }
+ curSeriesData.push({
+ value: data[i][j],
+ itemStyle: {
+ normal: {
+ barBorderRadius: borderRadius, // 璁剧疆鍦嗚
+ color: colors[i],
+ show: function (params) {
+ // 鏍规嵁鏁版嵁鍊肩殑澶у皬鏉ュ垽鏂槸鍚︽樉绀� label
+ return params.value > 30;
+ }
+ }
+ }
+ });
+ }
+ var seriesName = '';
+ if (i === 0) {
+ seriesName = '鎬婚噺';
+ } else if (i === 1) {
+ seriesName = '鏂板';
+ }
+ seriesData.push({
+ name: seriesName,
+ type: 'bar',
+ stack: '鎬婚噺',
+ data: curSeriesData,
+ label: {
+ show: true,
+ position: 'top'
+ },
+ itemStyle: {
+ color: colors[i] // 璁剧疆鏌卞瓙鐨勯鑹�
+ },
+ emphasis: {
+ focus: 'series'
+ }
+ });
+}
+
+export default {
+ name: "ColumnarChart",
+ data() {
+ return {
+ chartOptions: {
+ title: {
+ text: '浜哄憳涓绘暟鎹粺璁�'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['鎬婚噺', '鏂板'],
+ left: 'center'
+ },
+ xAxis: {
+ type: 'category',
+ data: ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: seriesData,
+ }
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+#chart {
+ width: 1280px;
+ height: 800px;
+}
+</style>
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
index 4427fb6..d51df80 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
@@ -1,103 +1,78 @@
<template>
<div id="main">
<basic-container>
- <v-chart :options="option" ref="chart" style="width: 100%;"></v-chart>
+ <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
</basic-container>
</div>
</template>
<script>
import 'echarts'
-import 'echarts/lib/chart/line';
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
+import 'echarts/lib/chart/line'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/chart/bar'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/legend'
+
export default {
- name: "statisticPage",
+ name: "lineChart",
data() {
return {
- option: {
- color: ['red','black'],
- legend: {
- data: ['鍥句緥1', '鍥句緥2', '鍥句緥3'],
- },
- dataset: [
- {
- id: 'dataset_raw',
- source: [
- { month: 1, total: 1000, newly: 800 },
- { month: 2, total: 5000, newly: 1000 },
- { month: 3, total: 1800, newly: 1400 },
- { month: 4, total: 1500, newly: 1200 },
- { month: 5, total: 1000, newly: 1200 },
- { month: 6, total: 1500, newly: 1200 },
- { month: 7, total: 1500, newly: 1200 },
- { month: 8, total: 1500, newly: 1000 },
- { month: 9, total: 1500, newly: 1200 },
- { month: 10, total: 1500, newly: 1200 },
- { month: 11, total: 1500, newly: 1200 },
- { month: 12, total: 1500, newly: 1200 },
- ],
- },
- ],
+ chartOptions: {
+ color:['#2eadd6 ','#FFA500 '],
title: {
- text: '涓绘暟鎹粺璁″垎鏋�',
- left:'center',
- textAlign:'center'
+ text: '鐗╁搧涓绘暟鎹粺璁�'
},
tooltip: {
- trigger: 'axis',
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['鎬婚噺', '鏂板']
},
xAxis: {
+ boundaryGap: true, // 鎺у埗鍧愭爣杞翠袱渚х暀鐧�
type: 'category',
- nameLocation: 'middle',
- name:'month',
- // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] // 鏈堜唤鏁版嵁
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
},
yAxis: {
- name: 'Number',
- type: 'value',
+ type: 'value'
},
series: [
{
+ name: '鎬婚噺',
type: 'line',
- datasetId: 'dataset_raw',
- showSymbol: false,
- encode: {
- x: 'month',
- y: 'total',
- itemName: 'month',
- tooltip: ['total'],
+ smooth: true,
+ stack: 'Total',
+ label: {
+ show: true,
+ position: 'top'
},
+ data: [5000, 2000, 3600, 1000, 1000, 2000, 500, 2000, 500, 2000, 500, 2000]
},
{
+ name: '鏂板',
type: 'line',
- datasetId: 'dataset_raw',
- showSymbol: false,
- encode: {
- x: 'month',
- y: 'newly',
- itemName: 'month',
- tooltip: ['newly'],
+ smooth: true,
+ stack: 'Total',
+ label: {
+ show: true,
+ position: 'top'
},
- },
- ],
- }
+ data: [1510, 1010, 2610, 2010, 3010, 1010, 1510, 3010, 1010, 1510, 3010, 2000]
+ }
+ ]
+ },
};
},
mounted() {
- import('echarts').then((echarts) => {
- // console.log(echarts)
- this.$nextTick(() => {
- const chartDom = this.$refs.chart.$el;
- const myChart = echarts.init(chartDom);
- myChart.setOption(this.option);
- });
- });
},
}
</script>
-<style scoped>
+<style lang="scss" scoped>
+#chart {
+ width: 1280px;
+}
</style>
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
new file mode 100644
index 0000000..9b757c3
--- /dev/null
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
@@ -0,0 +1,84 @@
+<template>
+ <basic-container>
+ <v-chart :options="chartOptions" :auto-resize="true" id="chart"></v-chart>
+ </basic-container>
+</template>
+
+<script>
+import 'echarts'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/legend'
+export default {
+ name: "pieChart",
+ data() {
+ return {
+ chartOptions: {
+ title: {
+ text: '渚涘簲鍟嗕富鏁版嵁缁熻',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: function (params) {
+ var result = '';
+ if (params.componentType === 'series') {
+ result += params.name + '<br/>';
+ result += '鏂板锛�' + params.data.newValue + '<br/>';
+ result += '鎬婚噺锛�' + params.data.value + '<br/>';
+ result += '鐧惧垎姣旓細' + params.percent + '%';
+ }
+ return result;
+ }
+ },
+ legend: {
+ orient: 'vertical',
+ right: 10,
+ top: 'middle',
+ data: ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�']
+ },
+ series: [
+ {
+ name: '',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap:false,
+ label: {
+ formatter: '{b}\n{d}%',
+ fontSize:14
+ },
+ itemStyle: {
+ color: function(params) {
+ // 鏍规嵁鍏蜂綋闇�姹傝缃鑹�
+ var colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
+ return colorList[params.dataIndex % colorList.length];
+ }
+ },
+ data: [
+ { value: 110, name: '涓�鏈�', newValue: 10, totalValue: 110 },
+ { value: 220, name: '浜屾湀', newValue: 20, totalValue: 220 },
+ { value: 330, name: '涓夋湀', newValue: 30, totalValue: 330 },
+ { value: 440, name: '鍥涙湀', newValue: 40, totalValue: 440 },
+ { value: 550, name: '浜旀湀', newValue: 50, totalValue: 550 },
+ { value: 660, name: '鍏湀', newValue: 60, totalValue: 660 },
+ { value: 770, name: '涓冩湀', newValue: 70, totalValue: 770 },
+ { value: 880, name: '鍏湀', newValue: 80, totalValue: 880 },
+ { value: 990, name: '涔濇湀', newValue: 90, totalValue: 990 },
+ { value: 1100, name: '鍗佹湀', newValue: 100, totalValue: 1100 },
+ { value: 1210, name: '鍗佷竴鏈�', newValue: 110, totalValue: 1210 },
+ { value: 1320, name: '鍗佷簩鏈�', newValue: 120, totalValue: 1320 }
+ ]
+ }
+ ]
+ },
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+#chart {
+ width: 800px;
+ height: 600px;
+}
+</style>
diff --git a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
index 3afb4d8..415865a 100644
--- a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
+++ b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
@@ -6,21 +6,30 @@
</div>
<!-- 鏂板瀵硅瘽妗�-->
<el-dialog
- title="鏂板鏁版嵁缁熻鍒嗘瀽"
:visible.sync="addVisible"
append-to-body
+ title="鏂板鏁版嵁缁熻鍒嗘瀽"
>
</el-dialog>
+ <!-- echarts缁勪欢-->
+ <div>
+ <lineChart></lineChart>
+ <pieChart></pieChart>
+ <ColumnarChart></ColumnarChart>
+ </div>
</div>
-
</template>
<script>
import lineChart from "../../components/StatisticsComponent/lineChart"
+import pieChart from "../../components/StatisticsComponent/pieChart"
+import ColumnarChart from "../../components/StatisticsComponent/ColumnarChart"
export default {
components: {
- lineChart
+ lineChart,
+ pieChart,
+ ColumnarChart
},
name: "statisticPage",
data() {
--
Gitblit v1.9.3