From da42dea3ebb81daefad8741d618d5be10d3dcb84 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期三, 27 十二月 2023 09:19:27 +0800
Subject: [PATCH] 主题库定义分类授权样式修改
---
Source/UBCS-WEB/src/views/statistic/statisticPage.vue | 346 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 201 insertions(+), 145 deletions(-)
diff --git a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
index 35e2cb8..f896de9 100644
--- a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
+++ b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue
@@ -1,42 +1,19 @@
<template>
<!-- 鏂板鍙充晶鎸夐挳-->
- <div>
+ <div v-loading="loading">
<div style=" display: flex; justify-content: flex-end;">
- <el-button plain type="primary" @click="addHandler">鏂板</el-button>
+ <el-button plain type="primary" @click="addHandler">閰嶇疆</el-button>
</div>
- <!-- 鏂板瀵硅瘽妗�-->
- <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">
+ <!--鏂板瀵硅瘽妗�-->
+ <el-dialog :visible.sync="addVisible" append-to-body class="avue-dialog avue-dialog--top" title="閰嶇疆鏁版嵁缁熻鍒嗘瀽"
+ top="-50px">
+ <el-table ref="table" :data="tableData" border style="width: 100%" @selection-change="selectChange" @row-click="rowHandlerClick">
+ <el-table-column type="selection" width="55"></el-table-column>
+ <el-table-column align="center" label="涓绘暟鎹簱鍚�" prop="menuName" width="300"></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 v-model="row.codeType" :multiple="true" limit="4" placeholder="璇烽�夋嫨鍥捐〃绫诲瀷" style="width: 400px">
+ <el-option v-for="(item) in selectList" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
</el-table-column>
@@ -46,16 +23,37 @@
<el-button type="primary" @click="addSaveHandler">淇濆瓨</el-button>
</span>
</el-dialog>
- <!-- echarts缁勪欢-->
- <div>
- <lineChart v-for="(item,index) in lineList" :key="index" :chartName="item.menuName"
- :lineData="item.menuData"></lineChart>
- <pieChart v-for="(item,index) in pieList" :key="index" :chartName="item.menuName"
- :pieData="item.menuData"></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>
+ <!--echarts缁勪欢-->
+ <div style="margin-top: 15px;padding-bottom: 35px">
+ <lineChart
+ v-for="(item,index) in lineList"
+ :key="index"
+ :btmname="item.btmname"
+ :chartName="item.menuName"
+ :lineData="item.menuData"
+ @refresh="getEcharts">
+ </lineChart>
+ <pieChart
+ v-for="(item,index) in pieList"
+ :key="index"
+ :btmname="item.btmname"
+ :chartName="item.menuName"
+ :pieData="item.menuData"
+ @refresh="getEcharts"></pieChart>
+ <ColumnarChart
+ v-for="(item,index) in columnarList"
+ :key="index"
+ :btmname="item.btmname"
+ :chartName="item.menuName"
+ :columnarData="item.menuData"
+ @refresh="getEcharts"></ColumnarChart>
+ <mixCart
+ v-for="(item,index) in mixList"
+ :key="index"
+ :btmname="item.btmname"
+ :chartName="item.menuName"
+ :mixData="item.menuData"
+ @refresh="getEcharts"></mixCart>
</div>
</div>
</template>
@@ -65,6 +63,9 @@
import pieChart from "../../components/StatisticsComponent/pieChart"
import ColumnarChart from "../../components/StatisticsComponent/ColumnarChart"
import mixCart from "../../components/StatisticsComponent/mixCart"
+import {getStatisticAnalysis, getBtmAndChart, saveStatisticAnalysis} from "@/api/statistic/chart"
+//閰嶇疆琛ㄥ崟涓绘暟鎹垪琛ㄦ帴鍙�
+import {getList} from "@/api/system/statistic";
export default {
components: {
@@ -76,6 +77,28 @@
name: "statisticPage",
data() {
return {
+ loading: false,
+ selectValue: '',
+ selectList: [
+ {
+ label: '鎶樼嚎鍥�',
+ value: '0'
+ },
+ {
+ label: '楗肩姸鍥�',
+ value: '1'
+ },
+ {
+ label: '鏌辩姸鍥�',
+ value: '2'
+ },
+ {
+ label: '鍫嗗彔鎶樼嚎鍥�',
+ value: '3'
+ }
+ ],
+ menuList: [],
+ dataKeyList: [],
addVisible: false,
chartName: "",
lineList: [],
@@ -83,114 +106,145 @@
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: 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: "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],
- ]
- }
- ]
+ tableData: [],
+ ResponseData: {}
}
},
+ created() {
+ this.loading = true;
+ },
+ mounted() {
+ this.getEcharts();
+ this.getMasterList();
+ },
methods: {
+ getMasterList() {
+ const userId = localStorage.getItem('userId');
+ getList({userId: userId}).then(res => {
+ this.tableData = res.data.data;
+ }).catch(error => {
+ this.$message.error(error)
+ })
+ },
+ //鍒楄〃鏁版嵁
+ async getEcharts() {
+ try {
+ const firstResponse = await getBtmAndChart();
+ const btmNames = Object.keys(firstResponse.data.data).join(',');
+ const btmValue = Object.values(firstResponse.data.data);
+ if (!btmNames) {
+ this.lineList = [];
+ this.pieList = [];
+ this.columnarList = [];
+ this.mixList = [];
+ this.loading = false;
+ return;
+ }
+ const typeList = {
+ '0': 'lineList',
+ '1': 'pieList',
+ '2': 'columnarList',
+ '3': 'mixList'
+ };
+ await this.handleStatisticAnalysis(btmNames, firstResponse);
+ this.loading = false;
+ } catch (error) {
+ this.loading = false;
+ // console.error('Error:', error);
+ }
+ },
+ async handleStatisticAnalysis(btmNames, firstResponse) {
+ const secondResponse = await getStatisticAnalysis({btmNames});
+ const secondData = secondResponse.data.data;
+ const typeList = {
+ "0": "lineList",
+ "1": "pieList",
+ "2": "columnarList",
+ "3": "mixList"
+ };
+ this.lineList = [];
+ this.pieList = [];
+ this.columnarList = [];
+ this.mixList = [];
+ const firstData = firstResponse.data.data;
+ //Object.keys瀵艰嚧瀵硅薄椤哄簭涓嶄竴鑷达紝浣跨敤sort鎺掑簭涓庡悗绔繑鍥炴牸寮忎竴鑷�
+ Object.keys(firstData).sort().forEach((key, index) => {
+ if (firstData[key]) {
+ const indexes = firstData[key].split(',');
+ for (const indexSec of indexes) {
+ const listType = typeList[indexSec];
+ const list = secondData.map(record => {
+ return {
+ menuData: record.menuData,
+ menuName: record.menuName,
+ btmname: key
+ };
+ });
+ this.$nextTick(() => {
+ list.forEach((i, j) => {
+ if (index === j) {
+ this[listType].push(i);
+ }
+ });
+ });
+ }
+ }
+ });
+ },
//鏂板
addHandler() {
this.addVisible = true;
+ // let checkedrow = []
+ // this.tableData.forEach(item => {
+ // // item.codeType = [];
+ // Object.keys(this.ResponseData.data.data).forEach(k => {
+ // if (item.code === k) {
+ // Object.values(this.ResponseData.data.data).forEach(v => {
+ // // item.codeType.push(v);
+ // checkedrow.push(item)
+ // })
+ // }
+ // })
+ // })
+ // this.$nextTick(() => {
+ // checkedrow.forEach(row => {
+ // // console.log(row)
+ // this.$refs.table.toggleRowSelection(row, true) // 鍥炴樉
+ // })
+ // })
},
//鍙栨秷
escHandler() {
this.addVisible = false;
},
//淇濆瓨
- addSaveHandler() {
+ async addSaveHandler() {
if (this.selectData.length <= 0) {
this.$message.warning('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹紒');
return;
}
+ let codeStatus = this.selectData.every(key => key.codeType.length > 0);
+ if (!codeStatus) {
+ this.$message.warning("璇锋鏌ュ凡鍕鹃�夋暟鎹被鍨嬫槸鍚︿负绌猴紒");
+ return;
+ }
+ const newArray = this.selectData.map(item => {
+ return {
+ btmname: item.code,
+ chartIds: item.codeType.join(',')
+ }
+ })
+ saveStatisticAnalysis(newArray).then(res => {
+ // this.menuList = res.data.data;
+ this.getEcharts();
+ this.$message.success('淇濆瓨鎴愬姛')
+ this.addVisible = false;
+ }).catch(error => {
+ this.$message.error(error)
+ });
+ },
+ nextSave() {
const typeList = {
"0": "lineList",
"1": "pieList",
@@ -199,32 +253,34 @@
};
let hasValidData = false; // 娣诲姞涓�涓爣蹇楁潵璁板綍鏄惁鏈夋湁鏁堢殑閫夋嫨鏁版嵁
- let codeStatus = this.selectData.every(key => key.codeType)
- if (!codeStatus) {
- this.$message.warning("璇锋鏌ュ凡鍕鹃�夋暟鎹被鍨嬫槸鍚︿负绌猴紒");
- return;
- }
- this.selectData.forEach(item => {
+
+ this.selectData.forEach((item, index) => {
+ item.menuData = this.menuList[index].menuData;
const dataKey = typeList[item.codeType];
if (dataKey) {
this[dataKey].push(item);
- hasValidData = true; // 鏍囪鏈夋湁鏁堟暟鎹娣诲姞
+ hasValidData = true;
}
});
if (hasValidData) {
+ // this.$refs.table.clearSelection();
this.addVisible = false;
}
},
//琛ㄦ牸澶氶��
- selectChange(selection, row) {
- // console.log(selection, row)
+ selectChange(selection) {
this.selectData = selection;
},
+ rowHandlerClick(row){
+ this.selectData = row;
+ this.$refs.table.toggleRowSelection(row);
+ }
}
}
+
</script>
-<style scoped>
+<style lang="scss" scoped>
</style>
--
Gitblit v1.9.3