From eb935ac81cfa4992629efb8494acbe02701e616a Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期三, 13 十二月 2023 18:17:09 +0800
Subject: [PATCH] 堆叠折线图 主数据导出加入Loading
---
Source/UBCS-WEB/src/views/statistic/statisticPage.vue | 2
Source/UBCS-WEB/src/components/Master/MasterTransfer.vue | 30 ++++++++++++--
Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue | 2
Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue | 73 +++++++++++++++++-------------------
4 files changed, 62 insertions(+), 45 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/Master/MasterTransfer.vue b/Source/UBCS-WEB/src/components/Master/MasterTransfer.vue
index 08d4d34..98475f9 100644
--- a/Source/UBCS-WEB/src/components/Master/MasterTransfer.vue
+++ b/Source/UBCS-WEB/src/components/Master/MasterTransfer.vue
@@ -14,7 +14,7 @@
style="width: 150px"></el-input> 锛堣緭鍏ラ〉鐮佹垨鑰呴〉闈㈣寖鍥达紝濡傦細1-10锛�</span>
</div>
</div>
- <div style="text-align: center">
+ <div v-loading="isLoading" style="text-align: center">
<el-transfer
v-model="value"
:data="data"
@@ -44,6 +44,7 @@
pageExport: "",
data: [],
value: [],
+ isLoading: false,
filterMethod(query, item) {
return item.label.indexOf(query) > -1;
},
@@ -156,6 +157,7 @@
if (this.selectRow.length <= 0) {
this.$message.warning('璇烽�夋嫨瑕佸鍑虹殑妯℃澘')
} else {
+ this.isLoading = true;
//宸查�夋嫨澶氶��
const selectList = []
//宸查�夋嫨灞炴��
@@ -178,6 +180,9 @@
}).then(res => {
this.handlerFile(res);
this.escHandler();
+ this.isLoading = false;
+ }).catch(error => {
+ this.isLoading = false;
})
} else {
@@ -188,12 +193,15 @@
// console.log('res',res)
this.handlerFile(res);
this.escHandler();
-
+ this.isLoading = false;
+ }).catch(error => {
+ this.isLoading = false;
})
}
}
} else if (this.radio === 1) {
+ this.isLoading = true;
if (this.value <= 0) {
this.tableHeadData.map(item => item.prop)
.forEach((prop, index) => {
@@ -203,12 +211,18 @@
if (res) {
func.downloadFileByBlobHandler(res);
this.escHandler();
+ this.isLoading = false;
}
+ }).catch(error => {
+ this.isLoading = false;
})
} else {
exportCode({codeClassifyOid: this.codeClassifyOid, ...this.exportArr, limit: -1}).then(res => {
this.handlerFile(res);
this.escHandler();
+ this.isLoading = false;
+ }).catch(error => {
+ this.isLoading = false;
})
}
} else if (this.radio === 2) {
@@ -237,6 +251,7 @@
}
}
if (this.value >= 1) {
+ this.isLoading = true;
exportCode({
codeClassifyOid: this.codeClassifyOid, ...this.exportArr,
limit: this.limit,
@@ -246,9 +261,12 @@
// console.log('res',res)
this.handlerFile(res);
this.escHandler();
-
+ this.isLoading = false;
+ }).catch(error => {
+ this.isLoading = false;
});
} else {
+ this.isLoading = true;
this.tableHeadData.map(item => item.prop)
.forEach((prop, index) => {
this.exportArrTwo[`attrIdIndexMap[${index}]`] = prop;
@@ -259,10 +277,12 @@
page: start,
endPage: end
}).then(res => {
- // console.log('res', res)
+ this.isLoading = false;
this.handlerFile(res);
this.escHandler();
- })
+ }).catch(error => {
+ this.isLoading = false;
+ });
}
}
},
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
index 741b537..0e5a2de 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
@@ -36,7 +36,7 @@
);
});
- let colors = ['#2eadd6', '#FFA500'];
+ let colors = ['#84C9E5', '#F68686'];
const seriesData = [];
for (let i = 0; i < newval.length; i++) {
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue
index 600df00..222f97a 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue
@@ -5,16 +5,14 @@
</template>
<script>
-import 'echarts'
+import echarts from'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'
export default {
- name: "mixCart",
+ name: "stackedAreaChart",
props: {
mixData: {
type: Array,
@@ -28,8 +26,9 @@
data() {
return {
chartOptions: {
+ color: ['#84C9E5', '#F68686'],
title: {
- text: "",
+ text: '',
},
grid: {
left: "3%",
@@ -40,18 +39,15 @@
tooltip: {
trigger: "axis",
axisPointer: {
- type: "shadow",
- },
+ type: "cross"
+ }
},
legend: {
- data: ["鎬婚噺", "鏂板"],
- left: "center",
- textStyle: {
- fontSize: 14 // 璋冩暣瀛椾綋澶у皬
- }
+ data: ['鎬婚噺', '鏂板']
},
xAxis: {
type: "category",
+ boundaryGap: false,
data: [
"涓�鏈�",
"浜屾湀",
@@ -70,8 +66,10 @@
yAxis: {
type: "value",
},
- series: [],
- },
+ series: [
+
+ ]
+ }
};
},
watch: {
@@ -79,40 +77,39 @@
immediate: true,
handler(newval, oldval) {
if (newval) {
- const colors = ["#2eadd6", "#db3c3c"];
-
- const seriesData = newval.map((data, index) => ({
- name: index === 0 ? "鎬婚噺" : "鏂板",
- type: index === 0 ? "bar" : "line",
- stack: index === 0 ? "鎬婚噺" : null,
- data: data.map(value => ({value})),
- barWidth: 68,
- label: {
- show: true,
- position: "top"
- },
- itemStyle: {
- color: colors[index]
+ const series = newval.map((data, index) => ({
+ name: index === 0 ? '鎬婚噺' : '鏂板',
+ type: 'line',
+ showSymbol: false,//鏄惁鏄剧ず鎶樼嚎涓婄殑鏍囪鐐�
+ smooth: true,//骞虫粦搴�
+ areaStyle: {
+ opacity: 1, //閫忔槑搴�
},
emphasis: {
- focus: "series"
- }
+ focus: 'series'
+ },
+ stack: index === 0 ? '鎬婚噺' : '鏂板', // 鏍规嵁 index 鍖哄垎鎬婚噺鍜屾柊澧炵殑鍫嗗彔鎯呭喌
+ data: data.map(value => ({value})),
+ label: {
+ show: true,
+ position: 'top'
+ },
}));
- this.chartOptions.series = seriesData;
+ this.chartOptions.series = series;
}
- },
+ }
},
- chartName:{
- handler(newval,oldval){
- if(newval){
+ chartName: {
+ handler(newval, oldval) {
+ if (newval) {
this.chartOptions.title.text = newval + "鏁版嵁缁熻"
}
},
- immediate:true,
- deep:true
+ immediate: true,
+ deep: true
}
- },
+ }
};
</script>
diff --git a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
index da3bcf1..093ef55 100644
--- a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
+++ b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
@@ -37,7 +37,7 @@
<el-option label="鎶樼嚎鍥�" value="0"></el-option>
<el-option label="楗肩姸鍥�" value="1"></el-option>
<el-option label="鏌辩姸鍥�" value="2"></el-option>
- <el-option label="鏌辩姸鎶樼嚎鍥�" value="3"></el-option>
+ <el-option label="鍫嗗彔鎶樼嚎鍥�" value="3"></el-option>
</el-select>
</template>
</el-table-column>
--
Gitblit v1.9.3