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 | 242 +++++++++++++++++++++++++++++++++++------------ 1 files changed, 179 insertions(+), 63 deletions(-) diff --git a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue index a823bc9..f896de9 100644 --- a/Source/UBCS-WEB/src/views/statistic/statisticPage.vue +++ b/Source/UBCS-WEB/src/views/statistic/statisticPage.vue @@ -1,43 +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 - ref="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> @@ -47,16 +23,37 @@ <el-button type="primary" @click="addSaveHandler">淇濆瓨</el-button> </span> </el-dialog> - <!-- echarts缁勪欢--> - <div style="margin-top: 15px"> - <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> @@ -66,7 +63,8 @@ import pieChart from "../../components/StatisticsComponent/pieChart" import ColumnarChart from "../../components/StatisticsComponent/ColumnarChart" import mixCart from "../../components/StatisticsComponent/mixCart" -import {getStatisticAnalysis} from "@/api/statistic/chart" +import {getStatisticAnalysis, getBtmAndChart, saveStatisticAnalysis} from "@/api/statistic/chart" +//閰嶇疆琛ㄥ崟涓绘暟鎹垪琛ㄦ帴鍙� import {getList} from "@/api/system/statistic"; export default { @@ -79,7 +77,27 @@ name: "statisticPage", data() { return { - menuList:[], + loading: false, + selectValue: '', + selectList: [ + { + label: '鎶樼嚎鍥�', + value: '0' + }, + { + label: '楗肩姸鍥�', + value: '1' + }, + { + label: '鏌辩姸鍥�', + value: '2' + }, + { + label: '鍫嗗彔鎶樼嚎鍥�', + value: '3' + } + ], + menuList: [], dataKeyList: [], addVisible: false, chartName: "", @@ -88,50 +106,143 @@ columnarList: [], mixList: [], selectData: [], - tableData: [] + tableData: [], + ResponseData: {} } }, created() { - this.getMasterList() + 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) + let codeStatus = this.selectData.every(key => key.codeType.length > 0); + if (!codeStatus) { this.$message.warning("璇锋鏌ュ凡鍕鹃�夋暟鎹被鍨嬫槸鍚︿负绌猴紒"); return; } - - this.dataKeyList = this.selectData.map(obj => obj.code) - const btmName = this.dataKeyList.join(","); - if (btmName) { - getStatisticAnalysis({btmNames: btmName}).then(res => { - this.menuList = res.data.data; - this.nextSave(); - this.$message.success('淇濆瓨鎴愬姛') - }); - }else { - this.$message.warning('璇烽�夋嫨鏁版嵁锛�') - } + 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 = { @@ -161,8 +272,13 @@ selectChange(selection) { this.selectData = selection; }, + rowHandlerClick(row){ + this.selectData = row; + this.$refs.table.toggleRowSelection(row); + } } } + </script> <style lang="scss" scoped> -- Gitblit v1.9.3