修改整体统计中的合同统计，新增月份选择

oa-ui/src/views/statistics/components/contractStatistics.vue

@@ -3,6 +3,11 @@
     <div class="titles">合同统计</div>
     <div class="warpper">
       <div class="left">
+        <div class="date-range">
+          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="monthrange"
+            range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份" :default-time="['00:00:00', '23:59:59']"
+            @change="queryList"></el-date-picker>
+        </div>
         <!-- 每年合同额柱状图 -->
         <div class="left-top" id="amountBar"></div>
         <div class="left-bottom">
@@ -11,7 +16,6 @@
         </div>
       </div>
       <div class="middle" v-loading="subLoading">
-        <!-- <div class="middle-top" id="subAmountBar"></div> -->
         <div class="middle-top" id="subYearLine"></div>
         <div class="middle-bottom">
           <div class="bottom-left" id="subCwAmountPie"></div>
@@ -45,15 +49,22 @@ export default {
       contractCwAmount: {},
       contractSource: {},
       contractYear: {},
+      paidAmount: {},
+      paidCwAmount: {},
+      paidYear: {},
       subAmount: {},
       subYearNum: {},
       subCwAmount: {},
       subSource: {},
+      subPaidAmount: {},
+      subPaidCwAmount: {},
+      subPaidYear: {},
       subYear: 0,
       sumAomunt: 0,
       sumSubAomunt: 0,
       activeYear: '',
       subLoading: true,
+      dateRange: []
     }
   },
   watch: {
@@ -68,7 +79,7 @@ export default {
     },
     subSource() {
       this.initChartSubCwSource(this.activeYear);
-    }
+    },
   },
   mounted() {
     this.initDatas();
@@ -83,6 +94,9 @@ export default {
         this.contractCwAmount = this.datas.cwAmount[0];
         this.contractSource = this.datas.source[0];
         this.contractYear = this.datas.year[0];
+        this.paidAmount = this.datas.paidAmount[0];
+        this.paidCwAmount = this.datas.paidCwAmount[0];
+        this.paidYear = this.datas.paidYear[0];
         this.loading = false;
         let sum = Object.values(this.contractAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
         this.sumAomunt = (sum / 100000000).toFixed(4) + '亿元';
@@ -93,6 +107,9 @@ export default {
       this.subYearNum = subDatas.data.year[0];
       this.subCwAmount = subDatas.data.cwAmount[0];
       this.subSource = subDatas.data.source[0];
+      this.subPaidAmount = subDatas.data.paidAmount[0];
+      this.subPaidCwAmount = subDatas.data.paidCwAmount[0];
+      this.subPaidYear = subDatas.data.paidYear[0];
       let sum = Object.values(this.subAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
       this.sumSubAomunt = (sum / 100000000).toFixed(4) + '亿元';
       this.initAmountBar();
@@ -101,15 +118,44 @@ export default {
       this.initChartSubCwSource('');
       this.subLoading = false;
     },
+    queryList() {
+      getContractStatistic(this.addDateRange({}, this.dateRange)).then(res => {
+        let datas = res.data;
+        this.contractAmount = datas.amount[0];
+        this.contractCwAmount = datas.cwAmount[0];
+        this.contractSource = datas.source[0];
+        this.contractYear = datas.year[0];
+        this.paidAmount = datas.paidAmount[0];
+        this.paidCwAmount = datas.paidCwAmount[0];
+        this.paidYear = datas.paidYear[0];
+        getSubContractStatistic(this.addDateRange({}, this.dateRange)).then(res => {
+          console.log(res)
+          let datas = res.data;
+          this.subAmount = datas.amount[0];
+          this.subYearNum = datas.year[0];
+          this.subCwAmount = datas.cwAmount[0];
+          this.subSource = datas.source[0];
+          this.subPaidAmount = datas.paidAmount[0];
+          this.subPaidCwAmount = datas.paidCwAmount[0];
+          this.subPaidYear = datas.paidYear[0];
+          this.initAmountBar();
+          this.initChartSubYear();
+        })
+      })
+    },
     initAmountBar() {
       let option = {
         title: {
           text: '各年合同额统计',
-          subtext: '承接合同总额：' + Object.values(this.contractAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '元'
+          
+          subtext: '承接合同总额：' + (Object.values(this.contractAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0)).toFixed(2) + '元'
             + '(约: ' + this.sumAomunt + ')\n' +
-            '分包合同总额：' + Object.values(this.subAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '元'
+            '分包合同总额：' + (Object.values(this.subAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0)).toFixed(2) + '元'
             + '(约: ' + this.sumSubAomunt + ')'
         },
+        legend: {
+          right: 0
+        },
         grid: {
           left: '1%',
           right: '1%',
@@ -117,25 +163,10 @@ export default {
           height: '60%',
           containLabel: true
         },
-        legend: {},
-        graphic: [
-          {
-            type: 'text',
-            name: '',
-            right: '0',
-            top: '20%',
-            style: {
-              text: '全部年份',
-              fill: '#000', // 文本颜色  
-              fontSize: 12, // 文本大小  
-              fontWeight: '' // 文本粗细  
-            }
-          }
-        ],
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'none',
+            type: 'cross',
             label: {
               backgroundColor: '#6a7985'
             }
@@ -154,7 +185,8 @@ export default {
           {
             name: '承接合同',
             data: Object.values(this.contractAmount),
-            type: 'bar',
+            type: 'line',
+            areaStyle: {},
             smooth: true,
             label: {
               show: true,
@@ -166,31 +198,150 @@ export default {
                   return (value / 100000000).toFixed(4) + '亿';
                 } else {
                   // 千万元  
-                  return (value / 10000000).toFixed(4) + '千万元';
+                  return (value / 10000000).toFixed(4) + '千万';
                 }
               }
-            }
+            },
           },
           {
             name: '分包合同',
             data: Object.values(this.subAmount),
-            type: 'bar',
+            type: 'line',
+            areaStyle: {},
             smooth: true,
             label: {
               show: true,
               position: 'top',
               formatter: function (params) {
                 var value = params.value;
-                if (value >= 10000) {
+                if (value >= 100000000) {
                   // 亿  
-                  return (value / 10000000).toFixed(4) + '千万元';
+                  return (value / 100000000).toFixed(4) + '亿';
+                } else {
+                  // 千万元  
+                  return (value / 10000000).toFixed(4) + '千万';
                 }
               }
             },
-            itemStyle: {
-
+          },
+          {
+            name: '已回款',
+            data: Object.values(this.paidAmount),
+            type: 'line',
+            areaStyle: {},
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top',
+            },
+          },
+          {
+            name: '已付款',
+            data: Object.values(this.subPaidAmount),
+            type: 'line',
+            areaStyle: {},
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top',
+            },
+          },
+        ]
+      };
+      ehcartsInit(subYearChart, 'subYearLine', option);
+    },
+    initChartSubYear() {
+      let option = {
+        title: {
+          text: '各年合同数统计',
+          subtext: '承接合同总数：' + Object.values(this.contractYear).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '个' + '\n' +
+            '分包合同总数：' + Object.values(this.subYearNum).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '个'
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '0%',
+          height: '60%',
+          containLabel: true
+        },
+        legend: {},
+        graphic: [
+          {
+            type: 'text',
+            name: '',
+            right: '0',
+            top: '20%',
+            style: {
+              text: '全部年份',
+              fill: '#000', // 文本颜色  
+              fontSize: 12, // 文本大小  
+              fontWeight: '' // 文本粗细  
+            }
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',
+            label: {
+              backgroundColor: '#6a7985'
             }
           }
+        },
+        xAxis: {
+          name: '年',
+          type: 'category',
+          data: Object.keys(this.subYearNum),
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：元'
+        },
+        series: [
+          {
+            name: '承接合同',
+            data: Object.values(this.contractYear),
+            type: 'bar',
+            // stack: 'one',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top',
+            }
+          },
+          {
+            name: '分包合同',
+            data: Object.values(this.subYearNum),
+            type: 'bar',
+            // stack: 'two',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top',
+            }
+          },
+          {
+            name: '已回款',
+            data: Object.values(this.paidYear),
+            type: 'bar',
+            // stack: 'one',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top',
+            }
+          },
+          {
+            name: '已付款',
+            data: Object.values(this.subPaidYear),
+            type: 'bar',
+            // stack: 'two',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top',
+            }
+          },
         ]
       };
       let charts = ehcartsInit(amountChart, 'amountBar', option);
@@ -385,68 +536,7 @@ export default {
       };
       ehcartsInit(subAmountChart, 'subAmountBar', option);
     },
-    initChartSubYear() {
-      let option = {
-        title: {
-          text: '各年合同数统计',
-          subtext: '承接合同总数：' + Object.values(this.contractYear).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '个' + '\n' +
-            '分包合同总数：' + Object.values(this.subYearNum).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '个'
-        },
-        legend: {
-          right: 0
-        },
-        grid: {
-          left: '1%',
-          right: '1%',
-          bottom: '0%',
-          height: '60%',
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#6a7985'
-            }
-          }
-        },
-        xAxis: {
-          name: '年',
-          type: 'category',
-          data: Object.keys(this.subYearNum),
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位：元'
-        },
-        series: [
-          {
-            name: '承接合同',
-            data: Object.values(this.contractYear),
-            type: 'line',
-            areaStyle: {},
-            smooth: true,
-            label: {
-              show: true,
-              position: 'top',
-            },
-          },
-          {
-            name: '分包合同',
-            data: Object.values(this.subYearNum),
-            type: 'line',
-            areaStyle: {},
-            smooth: true,
-            label: {
-              show: true,
-              position: 'top',
-            },
-          }
-        ]
-      };
-      ehcartsInit(subYearChart, 'subYearLine', option);
-    },
+    
     initChartSubCwAomunt(year) {
       let option = {
         title: {
@@ -568,7 +658,15 @@ export default {
 
   .left {
     flex: 1.5;
+    position: relative;
+
 
+    .date-range {
+      position: absolute;
+      right: 66px;
+      top: 54px;
+      z-index: 9999;
+    }
     .left-top {
       width: 100%;
       height: 300px;

oa-ui/src/views/statistics/components/topHead.vue

@@ -31,20 +31,6 @@
           <div id="thisContract"></div>
         </div>
       </div>
-      <div class="three item-box" @click="$emit('handleClick', 'device')">
-        <div class="data-left">
-          <div class="data-title">{{ thisYear }}年设备申领</div>
-          <div class="number">{{ deviceNum.toLocaleString('en-US') }}</div>
-          <div>
-            <span class="text-1">较去年</span>
-            <span class="text-2" :class="{ upColor: isDeviceUp, dowColor: !isDeviceUp }">{{ deviceSubYear }}</span>
-            <img :src="isDeviceUp ? upImg : downImg" alt="">
-          </div>
-        </div>
-        <div class="chart-box">
-          <div id="thisDevice"></div>
-        </div>
-      </div>
       <div class="four item-box" @click="$emit('handleClick', 'borrow')">
         <div class="data-left">
           <div class="data-title">{{ thisYear }}借款次数</div>
@@ -74,6 +60,20 @@
           <div id="thisSettle"></div>
         </div>
       </div>
+      <div class="three item-box" @click="$emit('handleClick', 'device')">
+        <div class="data-left">
+          <div class="data-title">{{ thisYear }}年设备申领</div>
+          <div class="number">{{ deviceNum.toLocaleString('en-US') }}</div>
+          <div>
+            <span class="text-1">较去年</span>
+            <span class="text-2" :class="{ upColor: isDeviceUp, dowColor: !isDeviceUp }">{{ deviceSubYear }}</span>
+            <img :src="isDeviceUp ? upImg : downImg" alt="">
+          </div>
+        </div>
+        <div class="chart-box">
+          <div id="thisDevice"></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>