<template>
|
<!-- 新增右侧按钮-->
|
<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" width="300"></el-table-column>
|
<el-table-column align="center" label="类型" prop="codeType">
|
<template slot-scope="{ row }">
|
<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-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 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>
|
|
<script>
|
import lineChart from "../../components/StatisticsComponent/lineChart"
|
import pieChart from "../../components/StatisticsComponent/pieChart"
|
import ColumnarChart from "../../components/StatisticsComponent/ColumnarChart"
|
import mixCart from "../../components/StatisticsComponent/mixCart"
|
import {getStatisticAnalysis, getBtmAndChart, saveStatisticAnalysis, deleteChartId} from "@/api/statistic/chart"
|
import {getList} from "@/api/system/statistic";
|
|
export default {
|
components: {
|
lineChart,
|
pieChart,
|
ColumnarChart,
|
mixCart
|
},
|
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: [],
|
pieList: [],
|
columnarList: [],
|
mixList: [],
|
selectData: [],
|
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();
|
this.ResponseData = await getBtmAndChart();
|
this.loading = false;
|
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 = [];
|
return;
|
}
|
for (const value of btmValue) {
|
if (value.includes('0')) {
|
await this.handleStatisticAnalysis('lineList', btmNames, firstResponse);
|
} else {
|
this.lineList = [];
|
}
|
if (value.includes('1')) {
|
await this.handleStatisticAnalysis('pieList', btmNames, firstResponse);
|
} else {
|
this.pieList = [];
|
}
|
if (value.includes('2')) {
|
await this.handleStatisticAnalysis('columnarList', btmNames, firstResponse);
|
} else {
|
this.columnarList = [];
|
}
|
if (value.includes('3')) {
|
await this.handleStatisticAnalysis('mixList', btmNames, firstResponse);
|
} else {
|
this.mixList = [];
|
}
|
}
|
} catch (error) {
|
this.loading = false;
|
console.error('Error:', error);
|
}
|
},
|
async handleStatisticAnalysis(type, btmNames, firstResponse) {
|
const secondResponse = await getStatisticAnalysis({btmNames});
|
const secondData = secondResponse.data.data;
|
const typeList = {
|
"0": "lineList",
|
"1": "pieList",
|
"2": "columnarList",
|
"3": "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[listType] = [];
|
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;
|
},
|
//保存
|
async addSaveHandler() {
|
if (this.selectData.length <= 0) {
|
this.$message.warning('请至少选择一条数据！');
|
return;
|
}
|
let codeStatus = this.selectData.every(key => key.codeType)
|
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",
|
"2": "columnarList",
|
"3": "mixList"
|
};
|
|
let hasValidData = false; // 添加一个标志来记录是否有有效的选择数据
|
|
this.selectData.forEach((item, index) => {
|
item.menuData = this.menuList[index].menuData;
|
const dataKey = typeList[item.codeType];
|
if (dataKey) {
|
this[dataKey].push(item);
|
hasValidData = true;
|
}
|
});
|
|
if (hasValidData) {
|
// this.$refs.table.clearSelection();
|
this.addVisible = false;
|
}
|
},
|
//表格多选
|
selectChange(selection) {
|
console.log('selection', selection)
|
this.selectData = selection;
|
},
|
}
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
