统计图表假数据测试

 Source/UBCS-WEB/src/components/FormTemplate/FormTemplate.vue

@@ -201,7 +201,7 @@
      let dictKeys = [];
      let slotColumnList = [];
      formItemList.forEach((formItem) => {
        // console.log('formItem',formItem)
        console.log('formItem',formItem)
        formItem = this.resetFormConfig(formItem);
        if (formItem.secType === "codeattrsec") {
          this.attrList.push(formItem);
@@ -341,7 +341,6 @@
      let that = this;
      items.forEach((item) => {
        let formItem = this.resetFormConfig(item);

        if (formItem.field == "lcstatus") {
          formItem.field = formItem.field + "_text";
          formItem.readOnly = true;

 Source/UBCS-WEB/src/components/MasterCrud/VciMasterCrud.vue

@@ -36,8 +36,8 @@
              </el-select></span>
            </div>
            <div class="custom-table">
              <el-table class="cus-table" ref="dataTable" v-loading="isLoading" :data="tableData"
                        :height="tableHeight"  border
              <el-table ref="dataTable" v-loading="isLoading" :data="tableData" :height="tableHeight"
                        border class="cus-table"
                        @select="handleSelection" @cell-click="handleCellClick" @row-click="handleRowClick"
                        @select-all="handleSelectionAll" @selection-change="handleSelectionChange"
                        @sort-change="sortChange">
@@ -45,15 +45,17 @@
                <el-table-column v-if="tableData.length != 0" fixed label="序号" type="index" width="55">
                </el-table-column>
                <!--              ç”Ÿå‘½å‘¨æœŸ-->
                <el-table-column v-for="(item,index) in lcstatusArray" key="index" v-if=" lcstatusArray.length !== 0 && !item.hidden" label="生命周期值" prop="lcstatus"
                                 :show-overflow-tooltip="true" :sortable="item.sortable" :width="item.width"
                                 align="center">
                <el-table-column v-for="(item,index) in lcstatusArray" v-if=" lcstatusArray.length !== 0 && !item.hidden"
                                 key="index" :show-overflow-tooltip="true" :sortable="item.sortable"
                                 :width="item.width" align="center" label="生命周期值"
                                 prop="lcstatus">
                  <template slot-scope="scope">
                    <span>{{ scope.row.lcstatus_text }}</span>
                  </template>
                </el-table-column>
                <!--              ç¼–号-->
                <el-table-column  v-for="(item, index) in CodeArray" key="index" v-if="CodeArray.length !== 0 && !item.hidden" :label="item.label" :prop="item.prop"
                <el-table-column v-for="(item, index) in CodeArray" v-if="CodeArray.length !== 0 && !item.hidden"
                                 key="index" :label="item.label" :prop="item.prop"
                                  :show-overflow-tooltip="true" :sortable="item.sortable" :width="item.width"
                                  align="center">
                  <template slot-scope="scope">
@@ -62,7 +64,8 @@
                    </el-link>
                  </template>
                </el-table-column>
                <el-table-column v-for="item in this.tableHeadFindData" v-if="!item.hidden && item.prop !== 'id' && item.prop !== 'lcstatus' && Object.keys(item.referConfig).length <= 0"
                <el-table-column v-for="item in this.tableHeadFindData"
                                 v-if="!item.hidden && item.prop !== 'id' && item.prop !== 'lcstatus' && Object.keys(item.referConfig).length <= 0"
                                 :key="item.id"
                                 :formatter="item.formatter"
                                 :label="item.label" :prop="item.prop"
@@ -72,9 +75,11 @@
                                 align="center">
                </el-table-column>
                <!--               å‚照数据-->
                <el-table-column v-for="(item,index) in referArray" :key="index" v-if="item.referConfig && Object.keys(item.referConfig).length > 0 && !item.hidden" :label="item.title" prop="jiliangdw"
                                 :show-overflow-tooltip="true" :sortable="item.sortable" :width="item.width"
                                 align="center">
                <el-table-column v-for="(item,index) in referArray" v-if="item.referConfig && Object.keys(item.referConfig).length > 0 && !item.hidden"
                                 :key="index"
                                 :label="item.title" :show-overflow-tooltip="true"
                                 :sortable="item.sortable" :width="item.width" align="center"
                                 prop="jiliangdw">
                  <template slot-scope="scope">
                    <span>{{ scope.row.jiliangdwname }}</span>
                  </template>
@@ -142,7 +147,8 @@
                          :visible.sync="dialogPush"></MasterTransfer>
          <!--        å¯¼å…¥-->
          <BatchImport v-if="batchImportData.visible" v-bind="batchImportData" :resetTable="CrudRend"
                       :visible.sync="batchImportData.visible" :tableHeadData="tableHeadFindData" :selectRow="selectRow">
                       :selectRow="selectRow" :tableHeadData="tableHeadFindData"
                       :visible.sync="batchImportData.visible">
          </BatchImport>
          <!--          ç›¸ä¼¼é¡¹-->
          <ResembleQueryDialog :codeClassifyOid="codeClassifyOid" :codeRuleOid="this.codeRuleOid" :rowOid="rowOid"
@@ -582,8 +588,6 @@
    codeAMENDHandler(){
      if (this.selectRow.length !== 1) {
        this.$message.warning("请选择一条数据");
      } else if (this.selectRow[0].lcstatus !== "Editing") {
        this.$message.warning("编码状态不是“编辑中”，不可编辑");
      } else {
        this.amendvisible = true;
        this.rowOid = this.selectRow[0].oid;
@@ -1041,6 +1045,7 @@
/deep/ .el-table__fixed {
  height: calc(100vh - 370px)!important;
}

// æ»šåŠ¨æ¡æ ·å¼ä¿®æ”¹
// æ»šåŠ¨æ¡çš„宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
@@ -1050,6 +1055,7 @@
  width: 10px;

}

// æ»šåŠ¨æ¡çš„滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ececec;

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

@@ -2,120 +2,145 @@
  <basic-container>
    <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
  </basic-container>

</template>

<script>
import 'echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

var data = [
  [120, 132, 101, 134, 90, 230, 210, 130, 0, 122, 100, 80],
  [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
];

// æ‰¾åˆ°æ¯ä¸€é¡¹æ•°æ®ä¸­çš„最大值并保存到数组
var maxValues = data[0].map(function (_, i) {
  return Math.max.apply(null, data.map(function (item) {
export default {
  name: "ColumnarChart",
  props:{
    columnarData:{
      type:Array,
      default:[]
    },
    chartName:{
      type:String,
      default: ""
    }
  },
  watch:{
    columnarData:{
      immediate:true,
      handler(newval,oldval){
        if(newval && newval.length > 0){
          const minValues = newval[0].map(function (_, i) {
            return Math.min.apply(
              null,
              newval.map(function (item) {
    return item[i];
  }));
              })
            );
});

var colors = ['#91CC75', '#5470C6'];
// ç”ŸæˆæŸ±çŠ¶å›¾çš„ series æ•°æ®
var seriesData = [];
for (var i = 0; i < data.length; i++) {
  var curSeriesData = [];
  // è®¡ç®—数据中的每组数据的最大值
  for (var j = 0; j < data[i].length; j++) {
    var borderRadius = [0, 0, 0, 0];  // é»˜è®¤ä¸è®¾ç½®åœ†è§’
    if (data[i][j] === maxValues[j]) {  // å¦‚果当前柱子的值等于对应列的最大值，设置圆角
      borderRadius = [50, 50, 0, 0];  // è®¾ç½®å››ä¸ªè§’都为圆角
          let colors = ["#91CC75", "#5470C6"];

          const seriesData = [];
          for (let i = 0; i < newval.length; i++) {
            let curSeriesData = [];
            for (let j = 0; j < newval[i].length; j++) {
              let borderRadius = [0, 0, 0, 0];
              if (newval[i][j] === minValues[j]) {
                borderRadius = [50, 50, 0, 0];
    }
    curSeriesData.push({
      value: data[i][j],
                value: newval[i][j],
      itemStyle: {
        normal: {
          barBorderRadius: borderRadius,  // è®¾ç½®åœ†è§’
          color: colors[i],
          show: function (params) {
            // æ ¹æ®æ•°æ®å€¼çš„大小来判断是否显示 label
            return params.value > 30;
          }
        }
      }
                },
    });
  }
  var seriesName = '';
  if (i === 0) {
    seriesName = '总量';
  } else if (i === 1) {
    seriesName = '新增';
  }
            let seriesName = (i === 0 ? "总量" : "新增")
  seriesData.push({
    name: seriesName,
    type: 'bar',
    stack: '总量',
              type: "bar",
              stack: "总量",
    data: curSeriesData,
    label: {
      show: true,
      position: 'top'
    },
    itemStyle: {
      color: colors[i]  // è®¾ç½®æŸ±å­çš„颜色
    },
    emphasis: {
      focus: 'series'
    }
                focus: "series",
              },
  });
            this.chartOptions.series=seriesData
}

export default {
  name: "ColumnarChart",
        }
      }
    },
    chartName:{
      handler(newval,oldval){
        if(newval){
          console.log(newval)
          this.chartOptions.title.text = newval + "数据统计"
        }
      },
      immediate:true,
      deep:true
    }
  },
  data() {
    return {
      chartOptions: {
        color:["#91CC75", "#5470C6"],
        title: {
          text: '人员主数据统计'
          text: "",
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'shadow'
          }
            type: "shadow",
          },
        },
        legend: {
          data: ['总量', '新增'],
          left: 'center'
          data: ["总量", "新增"],
          left: "center",
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: 'value'
          type: "value",
        },
        series: seriesData,
      }
    }
  }
}
        series: [],
      },
    };
  },
  created() {
  },
};
</script>

<style scoped lang="scss">
#chart {
  width: 1280px;
  height: 800px;
  width: 100%;
  height: 560px;
}
</style>

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

@@ -9,20 +9,59 @@
<script>
import 'echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

export default {
  name: "lineChart",
  props: {
    lineData: {
      type: Array,
      default: []
    },
    chartName: {
      type: String,
      default: ""
    }
  },
  watch: {
    lineData: {
      immediate: true,
      handler(newval, oldval) {
        if (newval) {
          const series = newval.map((data, index) => ({
            name: index === 0 ? "总量" : "新增",
            type: "line",
            smooth: true,
            stack: "Total",
            label: {
              show: true,
              position: "top"
            },
            data: data.map(value => ({value}))
          }));

          this.chartOptions.series = series;
        }
      }
    },
    chartName:{
      handler(newval,oldval){
        if(newval){
          this.chartOptions.title.text = newval + "数据统计"
        }
      },
      immediate:true,
      deep:true
    }
  },
  data() {
    return {
      chartOptions: {
        color:['#2eadd6  ','#FFA500 '],
        title: {
          text: '物品主数据统计'
          text: ''
        },
        tooltip: {
          trigger: 'axis'
@@ -31,48 +70,25 @@
          data: ['总量', '新增']
        },
        xAxis: {
          boundaryGap: true, // æŽ§åˆ¶åæ ‡è½´ä¸¤ä¾§ç•™ç™½
          boundaryGap: true,
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总量',
            type: 'line',
            smooth: true,
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            data: [5000, 2000, 3600, 1000, 1000, 2000, 500, 2000, 500, 2000, 500, 2000]
          },
          {
            name: '新增',
            type: 'line',
            smooth: true,
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            data: [1510, 1010, 2610, 2010, 3010, 1010, 1510, 3010, 1010, 1510, 3010, 2000]
        series: []
          }
        ]
      },
    };
  },
  mounted() {
  },
  created() {
}
};
</script>

<style lang="scss" scoped>
#chart {
  width: 1280px;
  width: 100%;
  height: 400px;
}

</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,120 @@
<template>
  <basic-container>
    <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
  </basic-container>
</template>

<script>
import 'echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

export default {
  name: "mixCart",
  props: {
    mixData: {
      type: Array,
      default: []
    },
    chartName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      chartOptions: {
        title: {
          text: "",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["总量", "新增"],
          left: "center",
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      },
    };
  },
  watch: {
    mixData: {
      immediate: true,
      handler(newval, oldval) {
        if (newval) {
          const colors = ["#8fef5b", "#db3c3c"];

          const seriesData = newval.map((data, index) => ({
            name: index === 0 ? "总量" : "新增",
            type: index === 0 ? "bar" : "line",
            stack: index === 0 ? "总量" : null,
            data: data.map(value => ({value})),
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              color: colors[index]
            },
            emphasis: {
              focus: "series"
            }
          }));

          this.chartOptions.series = seriesData;
        }
      },
    },
    chartName:{
      handler(newval,oldval){
        if(newval){
          this.chartOptions.title.text = newval + "数据统计"
        }
      },
      immediate:true,
      deep:true
    }
  },
};
</script>

<style scoped lang="scss">
#chart {
  width: 100%;
  height: 560px;
}
</style>

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

@@ -1,5 +1,5 @@
<template>
  <basic-container>
  <basic-container style="width: 100%">
    <v-chart :options="chartOptions" :auto-resize="true" id="chart"></v-chart>
  </basic-container>
</template>
@@ -11,6 +11,16 @@
import 'echarts/lib/component/legend'
export default {
  name: "pieChart",
  props:{
    pieData:{
      type:Array,
      default:[]
    },
    chartName:{
      type:String,
      default: ""
    }
  },
  data() {
    return {
      chartOptions: {
@@ -21,7 +31,7 @@
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            var result = '';
            let result = '';
            if (params.componentType === 'series') {
              result += params.name + '<br/>';
              result += '新增：' + params.data.newValue + '<br/>';
@@ -50,7 +60,7 @@
            itemStyle: {
              color: function(params) {
                // æ ¹æ®å…·ä½“需求设置颜色
                var colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
                const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
                return colorList[params.dataIndex % colorList.length];
              }
            },
@@ -78,7 +88,8 @@

<style scoped lang="scss">
#chart {
  width: 800px;
  height: 600px;
  width: 90%;
  height: 530px;
}

</style>

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

@@ -8,14 +8,53 @@
    <el-dialog
      :visible.sync="addVisible"
      append-to-body
      class="avue-dialog avue-dialog--top"
      title="新增数据统计分析"
      top="-50px"
    >
      <el-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">
        </el-table-column>
        <el-table-column
          align="center"
          label="类型"
          prop="codeType">
          <template slot-scope="{ row }">
            <el-select v-model="row.codeType" placeholder="请选择图表类型">
              <el-option label="折线图" value="0"></el-option>
              <el-option label="饼状图" value="1"></el-option>
              <el-option label="柱状图" value="2"></el-option>
              <el-option label="柱状折线图" value="3"></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>
            <lineChart></lineChart>
            <pieChart></pieChart>
            <ColumnarChart></ColumnarChart>
      <lineChart v-for="(item,index) in lineList" :key="index" :chartName="item.menuName"
                 :lineData="item.menuData"></lineChart>
      <!--      <pieChart :pieData="pieData" :chartName="chartName"></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>
@@ -24,23 +63,164 @@
import lineChart from "../../components/StatisticsComponent/lineChart"
import pieChart from "../../components/StatisticsComponent/pieChart"
import ColumnarChart from "../../components/StatisticsComponent/ColumnarChart"
import mixCart from "../../components/StatisticsComponent/mixCart"

export default {
  components: {
    lineChart,
    pieChart,
    ColumnarChart
    ColumnarChart,
    mixCart
  },
  name: "statisticPage",
  data() {
    return {
      addVisible: false,
      chartName: "",
      lineList: [],
      pieList: [],
      columnarList: [],
      mixList: [],
      selectData: [],
      tableData: [
        {
          menuName: "工艺文件",
          codeType: "1",
          menuData: [
            [222, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        },
        {
          menuName: "测试sc",
          codeType: "2",
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        },
        {
          menuName: "产品型号",
          codeType: "0",
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        },
        {
          menuName: "固定资产",
          codeType: null,
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        },
        {
          menuName: "李航主数据",
          codeType: null,
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        },
        {
          menuName: "Part",
          codeType: null,
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        },
        {
          menuName: "人员主数据",
          codeType: null,
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        },
        {
          menuName: "人员",
          codeType: null,
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        },
        {
          menuName: "标准",
          codeType: null,
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        },
        {
          menuName: "物品主数据",
          codeType: null,
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        },
        {
          menuName: "型号",
          codeType: null,
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
          ]
        }
      ]
    }
  },
  methods: {
    //新增
    addHandler() {
      this.addVisible = true;
    },
    //取消
    escHandler() {
      this.addVisible = false;
    },
    //保存
    addSaveHandler() {
      debugger
      if (this.selectData.length <= 0) {
        this.$message.warning('请至少选择一条数据！');
        return;
    }

      const typeList = {
        "0": "lineList",
        "1": "pieList",
        "2": "columnarList",
        "3": "mixList"
      };

      let hasValidData = false; // æ·»åŠ ä¸€ä¸ªæ ‡å¿—来记录是否有有效的选择数据
      let codeStatus = this.selectData.every(key => key.codeType)
      if (!codeStatus) {
        this.$message.warning("请检查已勾选数据类型是否为空！");
        return;
      }
      this.selectData.forEach(item => {
        const dataKey = typeList[item.codeType];
        if (dataKey) {
          this[dataKey].push(item);
          hasValidData = true; // æ ‡è®°æœ‰æœ‰æ•ˆæ•°æ®è¢«æ·»åŠ 
        }
      });

      if (hasValidData) {
        this.addVisible = false;
      }
    },
    //表格多选
    selectChange(selection, row) {
      // console.log(selection, row)
      this.selectData = selection;
    },
  }
}
</script>