Source/UBCS-WEB/src/views/statistic/statisticPage.vue

@@ -1,13 +1,13 @@
<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 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">
@@ -28,23 +28,32 @@
      <lineChart
        v-for="(item,index) in lineList"
        :key="index"
        :btmname="item.btmname"
        :chartName="item.menuName"
        :lineData="item.menuData"></lineChart>
        :lineData="item.menuData"
        @refresh="getEcharts">
      </lineChart>
      <pieChart
        v-for="(item,index) in pieList"
        :key="index"
        :btmname="item.btmname"
        :chartName="item.menuName"
        :pieData="item.menuData"></pieChart>
        :pieData="item.menuData"
        @refresh="getEcharts"></pieChart>
      <ColumnarChart
        v-for="(item,index) in columnarList"
        :key="index"
        :btmname="item.btmname"
        :chartName="item.menuName"
        :columnarData="item.menuData"></ColumnarChart>
        :columnarData="item.menuData"
        @refresh="getEcharts"></ColumnarChart>
      <mixCart
        v-for="(item,index) in mixList"
        :key="index"
        :btmname="item.btmname"
        :chartName="item.menuName"
        :mixData="item.menuData"></mixCart>
        :mixData="item.menuData"
        @refresh="getEcharts"></mixCart>
    </div>
  </div>
</template>
@@ -54,7 +63,8 @@
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 {getStatisticAnalysis, getBtmAndChart, saveStatisticAnalysis} from "@/api/statistic/chart"
//配置表单主数据列表接口
import {getList} from "@/api/system/statistic";

export default {
@@ -67,6 +77,7 @@
  name: "statisticPage",
  data() {
    return {
      loading: false,
      selectValue: '',
      selectList: [
        {
@@ -95,15 +106,16 @@
      columnarList: [],
      mixList: [],
      selectData: [],
      tableData: []
      tableData: [],
      ResponseData: {}
    }
  },
  created() {
    this.getMasterList();
    this.loading = true;
  },
  mounted() {
    this.getEcharts();
    // deleteChartId({btmname:'zxssaac',chartId:'3'}).then(res=>{
    //   console.log('res',res)
    // })
    this.getMasterList();
  },
  methods: {
    getMasterList() {
@@ -114,25 +126,92 @@
        this.$message.error(error)
      })
    },
    getEcharts() {
      getBtmAndChart().then(firstResponse => {
        console.log('btm', firstResponse)
    //列表数据
    async getEcharts() {
      try {
        const firstResponse = await getBtmAndChart();
        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)
          })
        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() {
@@ -144,12 +223,12 @@
        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;
      }

      const newArray = this.selectData.map(item => {
        return {
          btmname: item.code,
@@ -157,9 +236,10 @@
        }
      })
      saveStatisticAnalysis(newArray).then(res => {
        this.menuList = res.data.data;
        this.nextSave();
        // this.menuList = res.data.data;
        this.getEcharts();
        this.$message.success('保存成功')
        this.addVisible = false;
      }).catch(error => {
        this.$message.error(error)
      });
@@ -179,8 +259,6 @@
        const dataKey = typeList[item.codeType];
        if (dataKey) {
          this[dataKey].push(item);
          this[dataKey].forEach(res => {
          })
          hasValidData = true;
        }
      });
@@ -194,6 +272,10 @@
    selectChange(selection) {
      this.selectData = selection;
    },
    rowHandlerClick(row){
      this.selectData = row;
      this.$refs.table.toggleRowSelection(row);
    }
  }
}