<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" 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"
|
: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, getBtmAndChart, saveStatisticAnalysis, deleteChartId} from "@/api/statistic/chart"
|
import {getList} from "@/api/system/statistic";
|
|
export default {
|
components: {
|
lineChart,
|
pieChart,
|
ColumnarChart,
|
mixCart
|
},
|
name: "statisticPage",
|
data() {
|
return {
|
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: []
|
}
|
},
|
created() {
|
this.getMasterList();
|
this.getEcharts();
|
// deleteChartId({btmname:'zxssaac',chartId:'3'}).then(res=>{
|
// console.log('res',res)
|
// })
|
},
|
methods: {
|
getMasterList() {
|
const userId = localStorage.getItem('userId');
|
getList({userId: userId}).then(res => {
|
this.tableData = res.data.data;
|
}).catch(error => {
|
this.$message.error(error)
|
})
|
},
|
getEcharts() {
|
getBtmAndChart().then(firstResponse => {
|
console.log('btm', firstResponse)
|
const btmNames = Object.keys(firstResponse.data.data).join(',');
|
const firstData = firstResponse.data.data;
|
Object.keys(firstData).forEach((item,index) => {
|
let firstIndex = firstData[item].split(',');
|
console.log('firstIndex',firstIndex);
|
});
|
if (btmNames) {
|
getStatisticAnalysis({btmNames}).then(secondResponse => {
|
console.log('getStatisticAnalysis', secondResponse)
|
})
|
}
|
})
|
},
|
//新增
|
addHandler() {
|
this.addVisible = 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.nextSave();
|
this.$message.success('保存成功')
|
}).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);
|
this[dataKey].forEach(res => {
|
})
|
hasValidData = true;
|
}
|
});
|
|
if (hasValidData) {
|
// this.$refs.table.clearSelection();
|
this.addVisible = false;
|
}
|
},
|
//表格多选
|
selectChange(selection) {
|
this.selectData = selection;
|
},
|
}
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
