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

@@ -1,23 +1,204 @@
<template>
<lineChart></lineChart>
  <!--  新增右侧按钮-->
  <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
    lineChart,
    pieChart,
    ColumnarChart,
    mixCart
  },
  name: "statisticPage",
  data(){
    return{

  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 scoped>
<style lang="scss" scoped>

</style>