| | |
| | | <template> |
| | | <!-- 新增右侧按钮--> |
| | | <div> |
| | | <div v-loading="loading"> |
| | | <div style=" display: flex; justify-content: flex-end;"> |
| | | <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> |
| | |
| | | <el-button type="primary" @click="addSaveHandler">保存</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <!-- echarts组件--> |
| | | <!--echarts组件--> |
| | | <div style="margin-top: 15px;padding-bottom: 35px"> |
| | | <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> |
| | | <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> |
| | |
| | | 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 { |
| | |
| | | name: "statisticPage", |
| | | data() { |
| | | return { |
| | | loading: false, |
| | | selectValue: '', |
| | | selectList: [ |
| | | { |
| | | label: '折线图', |
| | | value: '0' |
| | | }, |
| | | { |
| | | label: '饼状图', |
| | | value: '1' |
| | | }, |
| | | { |
| | | label: '柱状图', |
| | | value: '2' |
| | | }, |
| | | { |
| | | label: '堆叠折线图', |
| | | value: '3' |
| | | } |
| | | ], |
| | | menuList: [], |
| | | dataKeyList: [], |
| | | addVisible: false, |
| | |
| | | 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 = { |
| | |
| | | const dataKey = typeList[item.codeType]; |
| | | if (dataKey) { |
| | | this[dataKey].push(item); |
| | | this[dataKey].forEach(res=>{ |
| | | console.log('this[dataKey]',this[dataKey]) |
| | | console.log('res',res) |
| | | }) |
| | | hasValidData = true; |
| | | } |
| | | }); |
| | |
| | | selectChange(selection) { |
| | | this.selectData = selection; |
| | | }, |
| | | rowHandlerClick(row){ |
| | | this.selectData = row; |
| | | this.$refs.table.toggleRowSelection(row); |
| | | } |
| | | } |
| | | } |
| | | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |