From 726df452c8749f9f208f67ede9864f223d44ff49 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期五, 24 十一月 2023 17:43:56 +0800
Subject: [PATCH] 统计图表假数据测试
---
Source/UBCS-WEB/src/views/statistic/statisticPage.vue | 190 ++++++++++++++
Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue | 116 ++++----
Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue | 86 +++--
Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue | 187 ++++++++------
Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue | 120 +++++++++
Source/UBCS-WEB/src/components/FormTemplate/FormTemplate.vue | 3
Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue | 21 +
7 files changed, 540 insertions(+), 183 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/FormTemplate/FormTemplate.vue b/Source/UBCS-WEB/src/components/FormTemplate/FormTemplate.vue
index 0c0d40a..1c49669 100644
--- a/Source/UBCS-WEB/src/components/FormTemplate/FormTemplate.vue
+++ b/Source/UBCS-WEB/src/components/FormTemplate/FormTemplate.vue
@@ -201,7 +201,7 @@
let dictKeys = [];
let slotColumnList = [];
formItemList.forEach((formItem) => {
- // console.log('formItem',formItem)
+ console.log('formItem',formItem)
formItem = this.resetFormConfig(formItem);
if (formItem.secType === "codeattrsec") {
this.attrList.push(formItem);
@@ -341,7 +341,6 @@
let that = this;
items.forEach((item) => {
let formItem = this.resetFormConfig(item);
-
if (formItem.field == "lcstatus") {
formItem.field = formItem.field + "_text";
formItem.readOnly = true;
diff --git a/Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue b/Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue
index 483d080..396b601 100644
--- a/Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue
+++ b/Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue
@@ -6,15 +6,15 @@
<div>
</div>
<el-row style="width: 100%;margin-bottom: 10px">
- <div style="margin-bottom: 10px" >
- <el-button v-for="(item, index) in masterVrBtnList"
- v-if="!['PREVIEW', 'DELETEFILE', 'revisefile', 'DOWNLOADFILE', 'UPLOADFILE'].includes(item.uniqueFlag)"
- :key="index" plain size="small"
- type="primary"
- @click="handleBtnClick(item)">{{
- item.name
- }}
- </el-button>
+ <div style="margin-bottom: 10px">
+ <el-button v-for="(item, index) in masterVrBtnList"
+ v-if="!['PREVIEW', 'DELETEFILE', 'revisefile', 'DOWNLOADFILE', 'UPLOADFILE'].includes(item.uniqueFlag)"
+ :key="index" plain size="small"
+ type="primary"
+ @click="handleBtnClick(item)">{{
+ item.name
+ }}
+ </el-button>
<span v-if="tableHeadFindData.length > 0">
<el-select slot="prepend" v-model="keyWordFind" placeholder="璇烽�夋嫨" size="small">
<el-option v-for="item in tableHeadFindData" :key="item.id" :label="item.label"
@@ -36,8 +36,8 @@
</el-select></span>
</div>
<div class="custom-table">
- <el-table class="cus-table" ref="dataTable" v-loading="isLoading" :data="tableData"
- :height="tableHeight" border
+ <el-table ref="dataTable" v-loading="isLoading" :data="tableData" :height="tableHeight"
+ border class="cus-table"
@select="handleSelection" @cell-click="handleCellClick" @row-click="handleRowClick"
@select-all="handleSelectionAll" @selection-change="handleSelectionChange"
@sort-change="sortChange">
@@ -45,24 +45,27 @@
<el-table-column v-if="tableData.length != 0" fixed label="搴忓彿" type="index" width="55">
</el-table-column>
<!-- 鐢熷懡鍛ㄦ湡-->
- <el-table-column v-for="(item,index) in lcstatusArray" key="index" v-if=" lcstatusArray.length !== 0 && !item.hidden" label="鐢熷懡鍛ㄦ湡鍊�" prop="lcstatus"
- :show-overflow-tooltip="true" :sortable="item.sortable" :width="item.width"
- align="center">
+ <el-table-column v-for="(item,index) in lcstatusArray" v-if=" lcstatusArray.length !== 0 && !item.hidden"
+ key="index" :show-overflow-tooltip="true" :sortable="item.sortable"
+ :width="item.width" align="center" label="鐢熷懡鍛ㄦ湡鍊�"
+ prop="lcstatus">
<template slot-scope="scope">
<span>{{ scope.row.lcstatus_text }}</span>
</template>
</el-table-column>
<!-- 缂栧彿-->
- <el-table-column v-for="(item, index) in CodeArray" key="index" v-if="CodeArray.length !== 0 && !item.hidden" :label="item.label" :prop="item.prop"
- :show-overflow-tooltip="true" :sortable="item.sortable" :width="item.width"
- align="center">
+ <el-table-column v-for="(item, index) in CodeArray" v-if="CodeArray.length !== 0 && !item.hidden"
+ key="index" :label="item.label" :prop="item.prop"
+ :show-overflow-tooltip="true" :sortable="item.sortable" :width="item.width"
+ align="center">
<template slot-scope="scope">
<el-link type="primary" @click="CodeLinkHandler(scope.row)">
{{ scope.row[item.prop] }}
</el-link>
</template>
</el-table-column>
- <el-table-column v-for="item in this.tableHeadFindData" v-if="!item.hidden && item.prop !== 'id' && item.prop !== 'lcstatus' && Object.keys(item.referConfig).length <= 0"
+ <el-table-column v-for="item in this.tableHeadFindData"
+ v-if="!item.hidden && item.prop !== 'id' && item.prop !== 'lcstatus' && Object.keys(item.referConfig).length <= 0"
:key="item.id"
:formatter="item.formatter"
:label="item.label" :prop="item.prop"
@@ -72,9 +75,11 @@
align="center">
</el-table-column>
<!-- 鍙傜収鏁版嵁-->
- <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">
+ <el-table-column v-for="(item,index) in referArray" v-if="item.referConfig && Object.keys(item.referConfig).length > 0 && !item.hidden"
+ :key="index"
+ :label="item.title" :show-overflow-tooltip="true"
+ :sortable="item.sortable" :width="item.width" align="center"
+ prop="jiliangdw">
<template slot-scope="scope">
<span>{{ scope.row.jiliangdwname }}</span>
</template>
@@ -107,10 +112,10 @@
:visible.sync="editvisible"
type="edit" @submit="EditSumbit"></FormTemplateDialog>
<!-- 鎵归噺缂栬緫-->
-<!-- <MasterEditBulk :visible.sync="bulkeditvisible" ></MasterEditBulk>-->
+ <!-- <MasterEditBulk :visible.sync="bulkeditvisible" ></MasterEditBulk>-->
<!-- 鏁版嵁璇︽儏-->
<FormTemplateDialog :codeClassifyOid="this.codeClassifyOid" :codeRuleOid="this.codeRuleOid"
- :rowOid="this.LinkObject.oid" :templateOid="templateOid"
+ :rowOid="this.LinkObject.oid" :templateOid="templateOid"
:title="'鏁版嵁璇︽儏'"
:visible.sync="LinkVisible"
type="detail"></FormTemplateDialog>
@@ -142,7 +147,8 @@
:visible.sync="dialogPush"></MasterTransfer>
<!-- 瀵煎叆-->
<BatchImport v-if="batchImportData.visible" v-bind="batchImportData" :resetTable="CrudRend"
- :visible.sync="batchImportData.visible" :tableHeadData="tableHeadFindData" :selectRow="selectRow">
+ :selectRow="selectRow" :tableHeadData="tableHeadFindData"
+ :visible.sync="batchImportData.visible">
</BatchImport>
<!-- 鐩镐技椤�-->
<ResembleQueryDialog :codeClassifyOid="codeClassifyOid" :codeRuleOid="this.codeRuleOid" :rowOid="rowOid"
@@ -247,26 +253,26 @@
Treedata: {
type: Array
},
- nodeClickList:{
- type:Array,
- default:[]
+ nodeClickList: {
+ type: Array,
+ default: []
}
},
data() {
return {
//鎵归噺缂栬緫瀵硅瘽妗�
- bulkeditvisible:false,
+ bulkeditvisible: false,
LinkVisible: false,
LinkObject: {}, // 缂栫爜鏁版嵁
LinkList: [],
isCodeArrayPushed: false, // 缂栫爜鏁扮粍娣诲姞鏍囪瘑鍙橀噺
CodeArray: [],
//鐢熷懡鍛ㄦ湡鏁扮粍
- lcstatusArray:[],
+ lcstatusArray: [],
//鍙傜収鏁版嵁鏁扮粍
- referArray:[],
- islcstatusPushed:false,
- isReferPushed:false,
+ referArray: [],
+ islcstatusPushed: false,
+ isReferPushed: false,
// 鐘舵�佹悳绱�
statusSelect: "all",
// 鍏抽敭瀛楁煡璇�
@@ -305,8 +311,8 @@
label: "name",
},
tableHeadFindDatas: [],
- applyvisible:false,
- amendvisible:false,
+ applyvisible: false,
+ amendvisible: false,
addvisible: false,
editvisible: false,
findvisible: false,
@@ -354,7 +360,7 @@
height: 110
},
result: '',
- elapsedTime:'',
+ elapsedTime: '',
};
},
computed: {
@@ -441,16 +447,16 @@
// console.log('lcstatusArray', this.lcstatusArray);
this.islcstatusPushed = true;
}
- if(!this.isReferPushed){
+ if (!this.isReferPushed) {
if (newval.find(item => Object.keys(item.referConfig).length > 0)) {
this.referArray.push(newval.find(item => Object.keys(item.referConfig).length > 0));
- }else {
+ } else {
this.referArray.push([])
}
}
- this.isReferPushed=true;
- console.log('new',this.referArray)
- console.log('ss',newval.find(item => Object.keys(item.referConfig).length > 0))
+ this.isReferPushed = true;
+ console.log('new', this.referArray)
+ console.log('ss', newval.find(item => Object.keys(item.referConfig).length > 0))
this.WupinFindValue = ''
},
},
@@ -467,7 +473,7 @@
},
tableHeadBtnData: {
handler(newval) {
- this.masterVrBtnList = newval
+ this.masterVrBtnList = newval
},
deep: true
},
@@ -549,14 +555,14 @@
});
},
//鏍囧噯鐢宠
- codeApplyHandler(){
+ codeApplyHandler() {
this.$nextTick(() => {
this.applyvisible = true;
});
},
- applySumbit(val){
+ applySumbit(val) {
// console.log('val',val)
- if(func.notEmpty(val.ts)) {
+ if (func.notEmpty(val.ts)) {
val.ts = func.formattedDateTime(val.ts);
//console.log(val.ts);
}
@@ -568,7 +574,7 @@
})
})
},
- amendSumbit(val){
+ amendSumbit(val) {
applySaveCode(val).then(res => {
this.$nextTick(() => {
this.amendvisible = false;
@@ -579,24 +585,22 @@
},
//鏍囧噯淇
- codeAMENDHandler(){
+ codeAMENDHandler() {
if (this.selectRow.length !== 1) {
this.$message.warning("璇烽�夋嫨涓�鏉℃暟鎹�");
- } else if (this.selectRow[0].lcstatus !== "Editing") {
- this.$message.warning("缂栫爜鐘舵�佷笉鏄�滅紪杈戜腑鈥濓紝涓嶅彲缂栬緫");
} else {
this.amendvisible = true;
this.rowOid = this.selectRow[0].oid;
}
},
//鎵归噺缂栬緫
- bulkEditHandler(type){
+ bulkEditHandler(type) {
console.log(this.nodeClickList)
- if(this.nodeClickList.children.length >= 1){
+ if (this.nodeClickList.children.length >= 1) {
this.$message.warning('褰撳墠閫夋嫨鐨勫垎绫讳笉鏄彾瀛愯妭鐐癸紝涓嶅厑璁告壒閲忕紪杈戯紒')
return;
}
- if(this.selectRow.length <= 0){
+ if (this.selectRow.length <= 0) {
this.$message.warning('璇烽�夋嫨鑷冲皯涓�鏉℃暟鎹紒')
return;
}
@@ -610,7 +614,7 @@
this.$message.warning('閫夋嫨鐨勬暟鎹腑鏈夌紪鐮佺姸鎬佷笉鏄�滅紪杈戜腑鈥濓紝涓嶅彲缂栬緫锛�');
}
},
- addSaveHandler(){
+ addSaveHandler() {
this.$nextTick(() => {
this.addvisible = true;
});
@@ -975,7 +979,7 @@
//澧炲姞淇濆瓨
AddSumbit(val) {
// console.log('val',val)
- if(func.notEmpty(val.ts)) {
+ if (func.notEmpty(val.ts)) {
val.ts = func.formattedDateTime(val.ts);
//console.log(val.ts);
}
@@ -1039,8 +1043,9 @@
<style lang="scss" scoped>
//鍥哄畾鍒楅珮搴�
/deep/ .el-table__fixed {
- height: calc(100vh - 370px)!important;
+ height: calc(100vh - 370px) !important;
}
+
// 婊氬姩鏉℃牱寮忎慨鏀�
// 婊氬姩鏉＄殑瀹藉害
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
@@ -1050,6 +1055,7 @@
width: 10px;
}
+
// 婊氬姩鏉＄殑婊戝潡
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ececec;
@@ -1082,7 +1088,7 @@
margin-top: 10px;
}
- .el-table__body-wrapper{
+.el-table__body-wrapper {
height: calc(100% - 44px) !important;
}
</style>
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
index 2d84725..6176e9c 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue
@@ -2,120 +2,145 @@
<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]; // 璁剧疆鍥涗釜瑙掗兘涓哄渾瑙�
+export default {
+ name: "ColumnarChart",
+ props:{
+ columnarData:{
+ type:Array,
+ default:[]
+ },
+ chartName:{
+ type:String,
+ default: ""
}
- curSeriesData.push({
- value: data[i][j],
- itemStyle: {
- normal: {
- barBorderRadius: borderRadius, // 璁剧疆鍦嗚
- color: colors[i],
- show: function (params) {
- // 鏍规嵁鏁版嵁鍊肩殑澶у皬鏉ュ垽鏂槸鍚︽樉绀� label
- return params.value > 30;
+ },
+ watch:{
+ columnarData:{
+ immediate:true,
+ handler(newval,oldval){
+ if(newval && newval.length > 0){
+ const minValues = newval[0].map(function (_, i) {
+ return Math.min.apply(
+ null,
+ newval.map(function (item) {
+ return item[i];
+ })
+ );
+ });
+
+ let colors = ["#91CC75", "#5470C6"];
+
+ const seriesData = [];
+ for (let i = 0; i < newval.length; i++) {
+ let curSeriesData = [];
+ for (let j = 0; j < newval[i].length; j++) {
+ let borderRadius = [0, 0, 0, 0];
+ if (newval[i][j] === minValues[j]) {
+ borderRadius = [50, 50, 0, 0];
+ }
+ curSeriesData.push({
+ value: newval[i][j],
+ itemStyle: {
+ normal: {
+ barBorderRadius: borderRadius, // 璁剧疆鍦嗚
+ color: colors[i],
+ }
+ },
+ });
+ }
+ let seriesName = (i === 0 ? "鎬婚噺" : "鏂板")
+ seriesData.push({
+ name: seriesName,
+ type: "bar",
+ stack: "鎬婚噺",
+ data: curSeriesData,
+ label: {
+ show: true,
+ position: 'top'
+ },
+ emphasis: {
+ focus: "series",
+ },
+ });
+ this.chartOptions.series=seriesData
}
}
}
- });
- }
- 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'
+ chartName:{
+ handler(newval,oldval){
+ if(newval){
+ console.log(newval)
+ this.chartOptions.title.text = newval + "鏁版嵁缁熻"
+ }
+ },
+ immediate:true,
+ deep:true
}
- });
-}
-
-export default {
- name: "ColumnarChart",
+ },
data() {
return {
chartOptions: {
+ color:["#91CC75", "#5470C6"],
title: {
- text: '浜哄憳涓绘暟鎹粺璁�'
+ text: "",
},
grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'shadow'
- }
+ type: "shadow",
+ },
},
legend: {
- data: ['鎬婚噺', '鏂板'],
- left: 'center'
+ data: ["鎬婚噺", "鏂板"],
+ left: "center",
},
xAxis: {
- type: 'category',
- data: ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�']
+ type: "category",
+ data: [
+ "涓�鏈�",
+ "浜屾湀",
+ "涓夋湀",
+ "鍥涙湀",
+ "浜旀湀",
+ "鍏湀",
+ "涓冩湀",
+ "鍏湀",
+ "涔濇湀",
+ "鍗佹湀",
+ "鍗佷竴鏈�",
+ "鍗佷簩鏈�",
+ ],
},
yAxis: {
- type: 'value'
+ type: "value",
},
- series: seriesData,
- }
- }
- }
-}
+ series: [],
+ },
+ };
+ },
+ created() {
+ },
+};
</script>
<style scoped lang="scss">
#chart {
- width: 1280px;
- height: 800px;
+ width: 100%;
+ height: 560px;
}
</style>
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
index d51df80..fcc9ab9 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
@@ -9,20 +9,59 @@
<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'
export default {
name: "lineChart",
+ props: {
+ lineData: {
+ type: Array,
+ default: []
+ },
+ chartName: {
+ type: String,
+ default: ""
+ }
+ },
+ watch: {
+ lineData: {
+ immediate: true,
+ handler(newval, oldval) {
+ if (newval) {
+ const series = newval.map((data, index) => ({
+ name: index === 0 ? "鎬婚噺" : "鏂板",
+ type: "line",
+ smooth: true,
+ stack: "Total",
+ label: {
+ show: true,
+ position: "top"
+ },
+ data: data.map(value => ({value}))
+ }));
+
+ this.chartOptions.series = series;
+ }
+ }
+ },
+ chartName:{
+ handler(newval,oldval){
+ if(newval){
+ this.chartOptions.title.text = newval + "鏁版嵁缁熻"
+ }
+ },
+ immediate:true,
+ deep:true
+ }
+ },
data() {
return {
chartOptions: {
- color:['#2eadd6 ','#FFA500 '],
+ color: ['#2eadd6', '#FFA500'],
title: {
- text: '鐗╁搧涓绘暟鎹粺璁�'
+ text: ''
},
tooltip: {
trigger: 'axis'
@@ -31,48 +70,25 @@
data: ['鎬婚噺', '鏂板']
},
xAxis: {
- boundaryGap: true, // 鎺у埗鍧愭爣杞翠袱渚х暀鐧�
+ boundaryGap: true,
type: 'category',
data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
},
yAxis: {
type: 'value'
},
- series: [
- {
- name: '鎬婚噺',
- type: 'line',
- 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',
- smooth: true,
- stack: 'Total',
- label: {
- show: true,
- position: 'top'
- },
- data: [1510, 1010, 2610, 2010, 3010, 1010, 1510, 3010, 1010, 1510, 3010, 2000]
- }
- ]
- },
+ series: []
+ }
};
},
- mounted() {
- },
-}
+ created() {
+ }
+};
</script>
<style lang="scss" scoped>
#chart {
- width: 1280px;
+ width: 100%;
+ height: 400px;
}
-
</style>
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue
new file mode 100644
index 0000000..711d091
--- /dev/null
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue
@@ -0,0 +1,120 @@
+<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'
+
+export default {
+ name: "mixCart",
+ props: {
+ mixData: {
+ type: Array,
+ default: []
+ },
+ chartName: {
+ type: String,
+ default: ""
+ }
+ },
+ 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: [],
+ },
+ };
+ },
+ watch: {
+ mixData: {
+ immediate: true,
+ handler(newval, oldval) {
+ if (newval) {
+ const colors = ["#8fef5b", "#db3c3c"];
+
+ const seriesData = newval.map((data, index) => ({
+ name: index === 0 ? "鎬婚噺" : "鏂板",
+ type: index === 0 ? "bar" : "line",
+ stack: index === 0 ? "鎬婚噺" : null,
+ data: data.map(value => ({value})),
+ label: {
+ show: true,
+ position: "top"
+ },
+ itemStyle: {
+ color: colors[index]
+ },
+ emphasis: {
+ focus: "series"
+ }
+ }));
+
+ this.chartOptions.series = seriesData;
+ }
+ },
+ },
+ chartName:{
+ handler(newval,oldval){
+ if(newval){
+ this.chartOptions.title.text = newval + "鏁版嵁缁熻"
+ }
+ },
+ immediate:true,
+ deep:true
+ }
+ },
+};
+</script>
+
+<style scoped lang="scss">
+#chart {
+ width: 100%;
+ height: 560px;
+}
+</style>
diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
index 9b757c3..94d451c 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
@@ -1,5 +1,5 @@
<template>
- <basic-container>
+ <basic-container style="width: 100%">
<v-chart :options="chartOptions" :auto-resize="true" id="chart"></v-chart>
</basic-container>
</template>
@@ -11,6 +11,16 @@
import 'echarts/lib/component/legend'
export default {
name: "pieChart",
+ props:{
+ pieData:{
+ type:Array,
+ default:[]
+ },
+ chartName:{
+ type:String,
+ default: ""
+ }
+ },
data() {
return {
chartOptions: {
@@ -21,7 +31,7 @@
tooltip: {
trigger: 'item',
formatter: function (params) {
- var result = '';
+ let result = '';
if (params.componentType === 'series') {
result += params.name + '<br/>';
result += '鏂板锛�' + params.data.newValue + '<br/>';
@@ -50,7 +60,7 @@
itemStyle: {
color: function(params) {
// 鏍规嵁鍏蜂綋闇�姹傝缃鑹�
- var colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
+ const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
return colorList[params.dataIndex % colorList.length];
}
},
@@ -78,7 +88,8 @@
<style scoped lang="scss">
#chart {
- width: 800px;
- height: 600px;
+ width: 90%;
+ height: 530px;
}
+
</style>
diff --git a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
index 415865a..d5b0556 100644
--- a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
+++ b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
@@ -8,14 +8,53 @@
<el-dialog
:visible.sync="addVisible"
append-to-body
+ class="avue-dialog avue-dialog--top"
title="鏂板鏁版嵁缁熻鍒嗘瀽"
+ top="-50px"
>
+ <el-table
+ :data="tableData"
+ border
+ style="width: 100%"
+ @selection-change="selectChange"
+ >
+ <el-table-column
+ type="selection"
+ width="55">
+ </el-table-column>
+ <el-table-column
+ align="center"
+ label="涓绘暟鎹簱鍚�"
+ prop="menuName">
+ </el-table-column>
+ <el-table-column
+ align="center"
+ label="绫诲瀷"
+ prop="codeType">
+ <template slot-scope="{ row }">
+ <el-select v-model="row.codeType" placeholder="璇烽�夋嫨鍥捐〃绫诲瀷">
+ <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-select>
+ </template>
+ </el-table-column>
+ </el-table>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="escHandler">鍙� 娑�</el-button>
+ <el-button type="primary" @click="addSaveHandler">淇濆瓨</el-button>
+ </span>
</el-dialog>
<!-- echarts缁勪欢-->
<div>
- <lineChart></lineChart>
- <pieChart></pieChart>
- <ColumnarChart></ColumnarChart>
+ <lineChart v-for="(item,index) in lineList" :key="index" :chartName="item.menuName"
+ :lineData="item.menuData"></lineChart>
+ <!-- <pieChart :pieData="pieData" :chartName="chartName"></pieChart>-->
+ <ColumnarChart v-for="(item,index) in columnarList" :key="index" :chartName="item.menuName"
+ :columnarData="item.menuData"></ColumnarChart>
+ <mixCart v-for="(item,index) in mixList" :key="index" :chartName="item.menuName"
+ :mixData="item.menuData"></mixCart>
</div>
</div>
</template>
@@ -24,23 +63,164 @@
import lineChart from "../../components/StatisticsComponent/lineChart"
import pieChart from "../../components/StatisticsComponent/pieChart"
import ColumnarChart from "../../components/StatisticsComponent/ColumnarChart"
+import mixCart from "../../components/StatisticsComponent/mixCart"
export default {
components: {
lineChart,
pieChart,
- ColumnarChart
+ ColumnarChart,
+ mixCart
},
name: "statisticPage",
data() {
return {
addVisible: false,
+ chartName: "",
+ lineList: [],
+ pieList: [],
+ columnarList: [],
+ mixList: [],
+ selectData: [],
+ tableData: [
+ {
+ menuName: "宸ヨ壓鏂囦欢",
+ codeType: "1",
+ menuData: [
+ [222, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ },
+ {
+ menuName: "娴嬭瘯sc",
+ codeType: "2",
+ menuData: [
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ },
+ {
+ menuName: "浜у搧鍨嬪彿",
+ codeType: "0",
+ menuData: [
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ },
+ {
+ menuName: "鍥哄畾璧勪骇",
+ codeType: null,
+ menuData: [
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ },
+ {
+ menuName: "鏉庤埅涓绘暟鎹�",
+ codeType: null,
+ menuData: [
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ },
+ {
+ menuName: "Part",
+ codeType: null,
+ menuData: [
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ },
+ {
+ menuName: "浜哄憳涓绘暟鎹�",
+ codeType: null,
+ menuData: [
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ },
+ {
+ menuName: "浜哄憳",
+ codeType: null,
+ menuData: [
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ },
+ {
+ menuName: "鏍囧噯",
+ codeType: null,
+ menuData: [
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ },
+ {
+ menuName: "鐗╁搧涓绘暟鎹�",
+ codeType: null,
+ menuData: [
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ },
+ {
+ menuName: "鍨嬪彿",
+ codeType: null,
+ menuData: [
+ [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
+ [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
+ ]
+ }
+ ]
}
},
methods: {
+ //鏂板
addHandler() {
this.addVisible = true;
- }
+ },
+ //鍙栨秷
+ escHandler() {
+ this.addVisible = false;
+ },
+ //淇濆瓨
+ addSaveHandler() {
+ debugger
+ if (this.selectData.length <= 0) {
+ this.$message.warning('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹紒');
+ return;
+ }
+
+ const typeList = {
+ "0": "lineList",
+ "1": "pieList",
+ "2": "columnarList",
+ "3": "mixList"
+ };
+
+ let hasValidData = false; // 娣诲姞涓�涓爣蹇楁潵璁板綍鏄惁鏈夋湁鏁堢殑閫夋嫨鏁版嵁
+ let codeStatus = this.selectData.every(key => key.codeType)
+ if (!codeStatus) {
+ this.$message.warning("璇锋鏌ュ凡鍕鹃�夋暟鎹被鍨嬫槸鍚︿负绌猴紒");
+ return;
+ }
+ this.selectData.forEach(item => {
+ const dataKey = typeList[item.codeType];
+ if (dataKey) {
+ this[dataKey].push(item);
+ hasValidData = true; // 鏍囪鏈夋湁鏁堟暟鎹娣诲姞
+ }
+ });
+
+ if (hasValidData) {
+ this.addVisible = false;
+ }
+ },
+ //琛ㄦ牸澶氶��
+ selectChange(selection, row) {
+ // console.log(selection, row)
+ this.selectData = selection;
+ },
}
}
</script>
--
Gitblit v1.9.3