统计分析增删改查

 Source/UBCS-WEB/src/components/StatisticsComponent/ColumnarChart.vue

@@ -1,6 +1,9 @@
<template>
  <basic-container>
    <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
    <div style="display: inline-block;float: right;margin-bottom: 10px;margin-right: 60px">
      <el-button size="small" type="primary" plain @click="delHandler">删除</el-button>
    </div>
  </basic-container>
</template>

@@ -9,6 +12,7 @@
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import {deleteChartId} from "@/api/statistic/chart"

export default {
  name: "ColumnarChart",
@@ -20,6 +24,9 @@
    chartName:{
      type:String,
      default: ""
    },
    btmname :{
      type: String
    }
  },
  watch:{
@@ -141,6 +148,16 @@
  },
  created() {
  },
  methods:{
    delHandler(){
      deleteChartId({btmname:this.btmname,chartId:'2'}).then(res=>{
        this.$message.success('删除成功')
        this.$emit('refresh');
      }).catch(error=>{
        this.$message.error(error)
      })
    }
  }
};
</script>


 Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue

@@ -1,7 +1,10 @@
<template>
  <div id="main">
  <div id="main" style="height: 460px;margin-bottom: 15px">
    <basic-container>
      <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
      <div style="display: inline-block;float: right;margin-bottom: 10px;margin-right: 60px">
        <el-button size="small" type="primary" plain @click="delHandler">删除</el-button>
      </div>
    </basic-container>
  </div>
</template>
@@ -12,6 +15,7 @@
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import {deleteChartId} from "@/api/statistic/chart"

export default {
  name: "lineChart",
@@ -23,6 +27,9 @@
    chartName: {
      type: String,
      default: ""
    },
    btmname :{
      type: String
    }
  },
  watch: {
@@ -56,7 +63,7 @@
      },
      immediate: true,
      deep: true
    }
    },
  },
  data() {
    return {
@@ -86,7 +93,15 @@
      }
    };
  },
  created() {
  methods:{
    delHandler(){
      deleteChartId({btmname:this.btmname,chartId:'0'}).then(res=>{
        this.$message.success('删除成功')
        this.$emit('refresh');
      }).catch(error=>{
        this.$message.error(error)
      })
    }
  }
};
</script>
@@ -96,4 +111,5 @@
  width: 100%;
  height: 400px;
}

</style>

 Source/UBCS-WEB/src/components/StatisticsComponent/mixCart.vue

@@ -1,6 +1,9 @@
<template>
  <basic-container>
    <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
    <div style="display: inline-block;float: right;margin-bottom: 10px;margin-right: 60px">
      <el-button size="small" type="primary" plain @click="delHandler">删除</el-button>
    </div>
  </basic-container>
</template>

@@ -10,6 +13,7 @@
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import {deleteChartId} from "@/api/statistic/chart"

export default {
  name: "stackedAreaChart",
@@ -21,6 +25,9 @@
    chartName: {
      type: String,
      default: ""
    },
    btmname :{
      type: String
    }
  },
  data() {
@@ -109,6 +116,16 @@
      immediate: true,
      deep: true
    }
  },
  methods:{
    delHandler(){
      deleteChartId({btmname:this.btmname,chartId:'3'}).then(res=>{
        this.$message.success('删除成功')
        this.$emit('refresh');
      }).catch(error=>{
        this.$message.error(error)
      })
    }
  }
};
</script>

 Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue

@@ -1,6 +1,9 @@
<template>
  <basic-container style="width: 100%">
    <v-chart :options="chartOptions" :auto-resize="true" id="chart"></v-chart>
    <div style="display: inline-block;float: right;margin-bottom: 10px;margin-right: 60px">
      <el-button size="small" type="primary" plain @click="delHandler">删除</el-button>
    </div>
  </basic-container>
</template>

@@ -9,6 +12,7 @@
import 'echarts/lib/chart/bar' // 导入柱状图组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import {deleteChartId} from "@/api/statistic/chart"
export default {
  name: "polarBarChart",
  props:{
@@ -23,6 +27,9 @@
    monthData:{
      type:Array,
      default: () => ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    btmname :{
      type: String
    }
  },
  watch:{
@@ -95,6 +102,16 @@
  },
  created(){
    this.chartOptions.color = ['#5470c6', '#91cc75', '#fac858', '#ca8622', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
  },
  methods:{
    delHandler(){
      deleteChartId({btmname:this.btmname,chartId:'1'}).then(res=>{
        this.$message.success('删除成功')
        this.$emit('refresh');
      }).catch(error=>{
        this.$message.error(error)
      })
    }
  }
}
</script>

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

@@ -1,6 +1,6 @@
<template>
  <!--  新增右侧按钮-->
  <div>
  <div v-loading="loading">
    <div style=" display: flex; justify-content: flex-end;">
      <el-button plain type="primary" @click="addHandler">配置</el-button>
    </div>
@@ -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>
@@ -67,6 +76,7 @@
  name: "statisticPage",
  data() {
    return {
      loading: false,
      selectValue: '',
      selectList: [
        {
@@ -95,17 +105,16 @@
      columnarList: [],
      mixList: [],
      selectData: [],
      tableData: []
      tableData: [],
      ResponseData: {}
    }
  },
  created() {
    this.getMasterList();
    // deleteChartId({btmname:'zxssaac',chartId:'3'}).then(res=>{
    //   console.log('res',res)
    // })
    this.loading = true;
  },
  mounted() {
    this.getEcharts();
    this.getMasterList();
  },
  methods: {
    getMasterList() {
@@ -116,49 +125,104 @@
        this.$message.error(error)
      })
    },
    //列表数据
    async getEcharts() {
      try {
        const firstResponse = await getBtmAndChart();
        const typeList = {
          "0": "lineList",
          "1": "pieList",
          "2": "columnarList",
          "3": "mixList"
        };

        this.ResponseData = await getBtmAndChart();
        this.loading = false;
        const btmNames = Object.keys(firstResponse.data.data).join(',');
        const firstData = firstResponse.data.data;
        if (btmNames) {
          const secondResponse = await getStatisticAnalysis({btmNames});
          const secondData = secondResponse.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 type = typeList[indexSec];
                const List = secondData.map(record => {
                  return {
                    menuData: record.menuData,
                    menuName: record.menuName
                  }
                })
                List.forEach((i, j) => {
                  if (index === j) {
                    this[type].push(i)
                  }
                })
              }
            }
          })
        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() {
@@ -183,9 +247,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)
      });