首页元改万元、项目成本对比加折线图

src/views/module_kzks/dashboard/Analysis.vue

@@ -389,6 +389,7 @@
         const endDate = `${year}-${monthBetter}`
         this.dateValue = [beginDate, endDate]
         var sType = this.searchType ? this.searchType : type
+        
         if(sType === 'month'){
           this.searchParams = {
             time: 'month',
@@ -398,7 +399,7 @@
         } else if (sType === 'year') {
           this.searchParams = {
             time: 'year',
-            beginDate: year - 1,
+            beginDate: year,
             endDate: year,
           }
         }
@@ -473,25 +474,26 @@
             })
             break;
           case 'chb':
-            getdataByChb(this.searchParams).then(res => {
-              console.log(res)
-              var chartsData = res.result[0].chartInfoList[0]
-              var chbRankingData = res.result[0].eightCostPaiHang
+            getdataByChb(this.searchParams).then(response => {
+              console.log(response)
+              var chartsData = response.result[0].chartInfoList[0]
+              var chbRankingData = response.result[0].eightCostPaiHang
               this.rankList = chbRankingData.map(res => {
                 var findItem = chb8Names.find(item => item.value === res.name)
                 return{
                   name: findItem.name + ' ' + res.proportion + '%',
-                  total: res.value
+                  total: (Number(res.value) / 10000).toFixed(2)+'万元'
                 }
               })
-              if(res){
+              if(response){
                 this.chbXAxisData = chartsData.xaxisData
-                this.chbSeriesData = [
-                  {
-                    name: '成本额',
-                    data: chartsData.seriesData,
+                this.chbSeriesData = chartsData.seriesData.map(res => {
+                  var findItem = chb8Names.find(item => item.value === res.name)
+                  return{
+                    name: findItem.name,
+                    data: res.values
                   }
-                ]
+                })
               }
             }).finally(() => {
               // this.loading = false

src/views/module_kzks/dashboard/components/lineBarChartChb.vue

@@ -60,7 +60,16 @@ export default {
         // },
         color: color,
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
+          formatter: function (params) {
+            console.log(params)
+            let str = params[0].name + "<br />";
+            params.forEach((item) => {
+              str +=
+                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+item.color+'"></span>' + item.seriesName + " : " + (Number(item.value) / 10000).toFixed(2) +'万元' + "<br />";
+            });
+            return str;
+          },
         },
         grid: {
           left: '5%',
@@ -109,7 +118,30 @@ export default {
           type: 'value',
           axisLabel: {
             // 可以动态设置是数量还是金额
-            formatter: '{value} '
+            // formatter: '{value} 万元'
+            // 设置动态单位转换
+            formatter: function (value, index) {
+              // if (value >= 100000000) {
+              //   return value / 100000000 + "亿";
+              // } else if (value >= 10000000) {
+              //   return value / 10000000 + "千万";
+              // } else if (value >= 1000000) {
+              //   return value / 1000000 + "百万";
+              // } else if (value >= 100000) {
+              //   return value / 100000 + "十万";
+              // } else if (value >= 10000) {
+              //   return value / 10000 + "万";
+              // } else if (value >= 1000) {
+              //   return value / 1000 + "千";
+              // } else {
+              //   return value;
+              // }
+              if(value > 0){
+                return (Number(value) / 10000).toFixed(1) + "万"
+              } else {
+                return value;
+              }
+            }
           }
         },
         series: [

src/views/module_kzks/projectContrastList/allList.vue

@@ -1,14 +1,21 @@
 <template>
-  <!-- <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 4750 }" :pagination="ipagination" rowKey="id"> -->
-  <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 4750 }" :pagination="false" rowKey="id">
-  </a-table>
+  <div>
+    <!-- <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 4750 }" :pagination="ipagination" rowKey="id"> -->
+    <a-table :columns="columns" :data-source="tableData" bordered :scroll="{ x: 4750 }" :pagination="false" rowKey="id">
+    </a-table>
+    <div>单选/多选</div>
+    <lineBarChart :xAxisData="xAxisData" :seriesData="seriesData" style="height: 300px;"></lineBarChart>
+  </div>
+  
 </template>
 <script>
+import lineBarChart from './components/lineBarChart.vue'
+
 const columns = [
           {
             title:'任务号',
             fixed:"left",
-            dataIndex: 'taskno',
+            dataIndex: 'taskno'
           },
           {
             title:'任务名称',
@@ -44,97 +51,116 @@ const columns = [
           {
             title:'研制数量',
             align:"center",
-            dataIndex: 'yzsl'
+            dataIndex: 'yzsl',
+            isEcharts: true,
           },
           {
             title:'单台收入',
             align:"center",
-            dataIndex: 'oneIncome'
+            dataIndex: 'oneIncome',
+            isEcharts: true,
           },
           {
             title:'单台成本',
             align:"center",
-            dataIndex: 'oneCost'
+            dataIndex: 'oneCost',
+            isEcharts: true,
           },
           {
             title:'单台利润',
             align:"center",
-            dataIndex: 'oneProfit'
+            dataIndex: 'oneProfit',
+            isEcharts: true,
           },
           {
             title:'利润额',
             align:"center",
-            dataIndex: 'lre'
+            dataIndex: 'lre',
+            isEcharts: true,
           },
           {
             title:'利润率',
             align:"center",
-            dataIndex: 'lrl'
+            dataIndex: 'lrl',
+            isEcharts: true,
           },
           {
             title:'预估价',
             align:"center",
-            dataIndex: 'estimationcoat'
+            dataIndex: 'estimationcoat',
+            isEcharts: true,
           },
           {
             title:'合同额',
             align:"center",
             dataIndex: 'contractfpe',
+            isEcharts: true,
           },
           {
             title:'已收款',
             align:"center",
             dataIndex: 'taskmoney',
+            isEcharts: true,
           },
           {
             title:'总成本',
             align:"center",
-            dataIndex: 'zcb'
+            dataIndex: 'zcb',
+            isEcharts: true,
           },
           {
             title:'材料费',
             align:"center",
             dataIndex: 'clf',
+            isEcharts: true,
           },
           {
             title:'专用费',
             align:"center",
             dataIndex: 'zyf',
+            isEcharts: true,
           },
           {
             title:'事务费',
             align:"center",
             dataIndex: 'swf',
+            isEcharts: true,
           },
           {
             title:'外协费',
             align:"center",
             dataIndex: 'wxf',
+            isEcharts: true,
           },
           {
             title:'燃料动力费',
             align:"center",
-            dataIndex: 'rldlf'
+            dataIndex: 'rldlf',
+            isEcharts: true,
           },
           {
             title:'固定资产折旧',
             align:"center",
-            dataIndex: 'gdzczj'
+            dataIndex: 'gdzczj',
+            isEcharts: true,
           },
           {
             title:'工资及劳务费',
             align:"center",
-            dataIndex: 'gzjlwf'
+            dataIndex: 'gzjlwf',
+            isEcharts: true,
           },
           {
             title:'管理费',
             align:"center",
-            dataIndex: 'glf'
+            dataIndex: 'glf',
+            isEcharts: true,
           },
           {
             title:'装机成本',
             align:"center",
             dataIndex: 'zjcb',
+            isEcharts: true,
           },
           {
             title:'内部试验',
@@ -144,7 +170,8 @@ const columns = [
           {
             title:'工时(h)',
             align:"center",
-            dataIndex: 'workhour'
+            dataIndex: 'workhour',
+            isEcharts: true,
           },
           {
             title:'责任部门',
@@ -209,47 +236,90 @@ const columns = [
           {
             title:'设计工时',
             align:"center",
-            dataIndex: 'sjgs'
+            dataIndex: 'sjgs',
+            isEcharts: true,
           },
           {
             title:'生产工时',
             align:"center",
-            dataIndex: 'scgs'
+            dataIndex: 'scgs',
+            isEcharts: true,
           },
         ];
 
-const data = [];
+const tableData = [];
 
 export default {
-    props: {
-      // 对比表格数据
-      duibiList: {
-        type: Array,
-        default: ()=>{},
-        required: false
-      }
+  components: { lineBarChart },
+  props: {
+    // 对比表格数据
+    duibiList: {
+      type: Array,
+      default: ()=>{},
+      required: false
+    }
+  },
+  data() {
+    return {
+      tableData,
+      columns,
+      /* 分页参数 */
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + "-" + range[1] + " 共" + total + "条"
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      // 
+      // xAxisData: [],
+      // seriesData: [
+      //   {
+      //     name: '合同数量',
+      //     data: [10, 11, 13, 11, 12, 12, 9],
+      //   },
+      //   {
+      //     name: '开票数量',
+      //     data: [112, 58, 69, 78, 99, 102],
+      //   },
+      //   {
+      //     name: '金额',
+      //     data: [33, 23, 56, 48, 46, 55],
+      //   }
+      // ]
+    };
+  },
+  computed: {
+    xAxisData(){
+      var data = this.tableData.map(res => {
+        return res.taskno
+      })
+      console.log(data)
+      return data
     },
-    data() {
+    seriesData(){
+      var arr = columns.filter(cur => cur.isEcharts)
+      var data = arr.map(res => {
+        var liData = this.tableData.map((item) => {
+          return item[res.dataIndex]
+        })
+        console.log(liData)
         return {
-        data,
-        columns,
-        /* 分页参数 */
-        ipagination:{
-            current: 1,
-            pageSize: 10,
-            pageSizeOptions: ['10', '20', '30'],
-            showTotal: (total, range) => {
-            return range[0] + "-" + range[1] + " 共" + total + "条"
-            },
-            showQuickJumper: true,
-            showSizeChanger: true,
-            total: 0
-        },
-        };
+          name: res.title,
+          data: liData
+        }
+      })
+      console.log(data)
+      return data
     },
-    created(){
-        console.log(this.duibiList)
-        this.data = this.duibiList
-    }
+  },
+  created(){
+    console.log(this.duibiList)
+    this.tableData = this.duibiList
+  }
 };
 </script>

src/views/module_kzks/projectContrastList/components/lineBarChart.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="lineBarCharts" ref="lineBarCharts" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: '',
+  props: {
+    xAxisData: {
+      type: Array,
+      default: []
+    },
+    seriesData: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {
+      uEcharts: null,
+      uOption: null,
+    }
+  },
+  watch: {
+    seriesData: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+        if(newValue){
+          this.setSeriesData(newValue)
+        }
+      },
+      // immediate: true
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+      this.setSeriesData()
+    })
+  },
+  methods: {
+    initChart(){
+      this.uEcharts = echarts.init(this.$refs.lineBarCharts)
+
+      this.uOption = {
+        // title: {
+        //   text: '测试展示'
+        // },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          selectedMode: 'single', // 单个显示
+          type: 'scroll', // 翻页显示
+          width: '60%',
+          // orient: 'vertical',
+          // right: 90,
+          // left: 20,
+          top: 0,
+          // bottom: 20,
+          // selectedMode: 'single',
+          padding: [
+              5,  // 上
+              150, // 右
+              0,  // 下
+              20, // 左
+          ],
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            // dataView: { readOnly: false }, // 展示数据--不过没用
+            magicType: { type: ['bar', 'line',] },
+            // restore: {}, // 还原
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          // boundaryGap: true, // 解决数据溢出X轴的问题
+          data: this.xAxisData
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            // 可以动态设置是数量还是金额
+            formatter: '{value} '
+          }
+        },
+        series: [
+          // {
+          //   name: 'Highest',
+          //   type: 'line',
+          //   data: [10, 11, 13, 11, 12, 12, 9],
+          //   markPoint: {
+          //     data: [
+          //       { type: 'max', name: 'Max' },
+          //       { type: 'min', name: 'Min' }
+          //     ]
+          //   },
+          //   // markLine: {
+          //   //   data: [{ type: 'average', name: 'Avg' }]
+          //   // }
+          // },
+        ]
+      };
+
+      this.uOption && this.uEcharts.setOption(this.uOption);
+    },
+    setSeriesData(data){
+      var seriesData = data ? data : this.seriesData
+      var option = {}
+      option.series = seriesData.map(res => {
+        return {
+          name: res.name,
+          type: 'bar',
+          data: res.data,
+        }
+      })
+      this.uEcharts.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.lineBarCharts{
+  width: 100%;
+  height: 100%;
+}
+</style>