<template>
|
<!-- 新增右侧按钮-->
|
<div>
|
<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">
|
<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 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>
|
</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} from "@/api/statistic/chart"
|
import {getList} from "@/api/system/statistic";
|
|
export default {
|
components: {
|
lineChart,
|
pieChart,
|
ColumnarChart,
|
mixCart
|
},
|
name: "statisticPage",
|
data() {
|
return {
|
menuList: [],
|
dataKeyList: [],
|
addVisible: false,
|
chartName: "",
|
lineList: [],
|
pieList: [],
|
columnarList: [],
|
mixList: [],
|
selectData: [],
|
tableData: []
|
}
|
},
|
created() {
|
this.getMasterList()
|
},
|
methods: {
|
getMasterList() {
|
const userId = localStorage.getItem('userId');
|
getList({userId: userId}).then(res => {
|
this.tableData = res.data.data;
|
})
|
},
|
//新增
|
addHandler() {
|
this.addVisible = true;
|
},
|
//取消
|
escHandler() {
|
this.addVisible = false;
|
},
|
//保存
|
addSaveHandler() {
|
if (this.selectData.length <= 0) {
|
this.$message.warning('请至少选择一条数据！');
|
return;
|
}
|
let codeStatus = this.selectData.every(key => key.codeType)
|
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('请选择数据！')
|
}
|
},
|
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);
|
this[dataKey].forEach(res=>{
|
console.log('this[dataKey]',this[dataKey])
|
console.log('res',res)
|
})
|
hasValidData = true;
|
}
|
});
|
|
if (hasValidData) {
|
// this.$refs.table.clearSelection();
|
this.addVisible = false;
|
}
|
},
|
//表格多选
|
selectChange(selection) {
|
this.selectData = selection;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
