田源
2023-12-12 2171e52259e2b6e64178f77d14eda487f45ed8d6
统计分析模块更改
已修改4个文件
129 ■■■■ 文件已修改
Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue 19 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue 100 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
Source/UBCS-WEB/src/views/flow/manager.vue 4 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue
@@ -331,7 +331,7 @@
        datetime: "datetime",
      },
      tableData: [],
      tableHeight: 'calc(100vh - 300px)',
      tableHeight: 'calc(100vh - 350px)',
      DataVisible: false,
      tableHeadData: [],
      items: {},
@@ -513,7 +513,7 @@
        this.tableHeight = 'calc(100vh - 630px)';
        this.$refs.dataTable.doLayout()
      } else {
        this.tableHeight = 'calc(100vh - 310px)';
        this.tableHeight = 'calc(100vh - 350px)';
        this.$refs.dataTable.doLayout()
      }
    },
@@ -1091,7 +1091,7 @@
<style lang="scss" scoped>
//固定列高度
/deep/ .el-table__fixed {
  height: calc(100vh - 370px) !important;
  height: calc(100vh - 365px) !important;
}
// 滚动条样式修改
Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue
@@ -31,15 +31,14 @@
      handler(newval, oldval) {
        if (newval) {
          const series = newval.map((data, index) => ({
            name: index === 0 ? "总量" : "新增",
            type: "line",
            name: index === 0 ? '总量' : '新增',
            type: 'line',
            smooth: true,
            stack: "Total",
            stack: index === 0 ? 'Total' : 'total2', // 根据 index 区分总量和新增的堆叠情况
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: 14 // 调整字体大小
                fontSize: 14
              }
            },
            data: data.map(value => ({value}))
@@ -49,14 +48,14 @@
        }
      }
    },
    chartName:{
      handler(newval,oldval){
        if(newval){
    chartName: {
      handler(newval, oldval) {
        if (newval) {
          this.chartOptions.title.text = newval + "数据统计"
        }
      },
      immediate:true,
      deep:true
      immediate: true,
      deep: true
    }
  },
  data() {
Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
@@ -6,11 +6,11 @@
<script>
import 'echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar' // 导入柱状图组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
export default {
  name: "pieChart",
  name: "polarBarChart",
  props:{
    pieData:{
      type:Array,
@@ -19,97 +19,89 @@
    chartName:{
      type:String,
      default: ""
    },
    monthData:{
      type:Array,
      default: () => ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    }
  },
  watch:{
    pieData:{
      immediate:true,
      handler(newval,oldval){
      handler(newval, oldval){
        if (newval) {
          // console.log(newval)
          const series=[
          const series = [
            {
              name: '',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap:false,
              label: {
                formatter: '{b}\n{d}%',
                fontSize:14
              type: 'bar',
              name: '新增',
              data: newval[1],
              coordinateSystem: 'polar',
              stack: 'a',
              emphasis: {
                focus: 'series'
              },
              itemStyle: {
                color: function(params) {
                  // 根据具体需求设置颜色
                  const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
                  return colorList[params.dataIndex % colorList.length];
                }
                color: '#91cc75' // 新增的颜色
              }
            },
            {
              type: 'bar',
              name: '总量',
              data: newval[0],
              coordinateSystem: 'polar',
              stack: 'a',
              emphasis: {
                focus: 'series'
              },
              data:newval[0].map((value, index) => {
                return {
                  value: value,
                  name: this.getMonthName(index),
                  newValue: newval[1][index]
                };
              }),
              itemStyle: {
                color: '#5470c6' // 总量的颜色
              }
            }
          ]
          ];
          this.chartOptions.series = series;
        }
      }
    },
    chartName:{
      handler(newval,oldval){
      handler(newval, oldval){
        if(newval){
          this.chartOptions.title.text = newval + "数据统计"
        }
      },
      immediate:true,
      deep:true
      immediate:true
    }
  },
  data() {
    return {
      chartOptions: {
        title: {
          text: '供应商主数据统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let result = '';
            if (params.componentType === 'series') {
              result += params.name + '<br/>';
              result += '新增:' + params.data.newValue + '<br/>';
              result += '总量:' + params.data.value + '<br/>';
              result += '百分比:' + params.percent + '%';
            }
            return result;
          }
          text: '',
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'middle',
          data: ['总量', '新增'],
        },
        polar: {},
        angleAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        radiusAxis: {},
        tooltip: {
          trigger: 'axis'
        },
        series: []
      },
      }
    }
  },
  methods:{
    getMonthName(index){
      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
      return monthNames[index];
    }
  created(){
    this.chartOptions.color = ['#5470c6', '#91cc75', '#fac858', '#ca8622', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
  }
}
</script>
<style scoped lang="scss">
#chart {
  width: 90%;
  width: 97%;
  height: 530px;
}
</style>
Source/UBCS-WEB/src/views/flow/manager.vue
@@ -25,8 +25,10 @@
        <el-button type="text"
                   size="small"
                   icon="el-icon-refresh"
                   :style="{color: scope.row.suspensionState === 1 ? '#67C23A' : '#F56C6C'}"
                   v-if="permissionList.state"
                   @click.stop="handleDoState(scope.row,scope.index)">{{scope.row.suspensionState===1?'激活':'挂起'}}
                   @click.stop="handleDoState(scope.row, scope.index)">
          {{ scope.row.suspensionState === 1 ? '激活' : '挂起' }}
        </el-button>
        <el-button type="text"
                   size="small"