与产量与工作量图表

src/api/home.js

@@ -1,18 +1,10 @@
 import request from '@/utils/request'
 import constant from '@/constant'
 
-function countByAdvisory(formData) {
-  return request.post(constant.serverUrl + "/home/countByAdvisory", formData);
-}
-
-function countByReport(formData) {
-  return request.post(constant.serverUrl + "/home/countByReport", formData);
-}
-
-function trendDataForMonth(formData) {
-  return request.post(constant.serverUrl + "/home/trendDataForMonth", formData);
+function monthlyData(formData) {
+  return request.post(constant.serverUrl + "/home/monthlyData", formData);
 }
 
 export default {
-  countByAdvisory, countByReport, trendDataForMonth
+  monthlyData
 }

src/views/Home.vue

@@ -8,38 +8,12 @@
     </el-breadcrumb>
     <el-divider></el-divider>
     <div class="card">
-      <!-- <div class="floor-one">
-        <h5 class="tit">基本情况</h5>
-        <el-row :gutter="20">
-           <el-col :span="6">
-            <div class="grid-content bgorange">
-              <i class="iconfont iconfasfa-cog1"></i>
-              <h4><p>今日报案登记数</p>{{item1}}</h4>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="grid-content bgpink">
-              <i class="iconfont iconmd-av_timer1"></i>
-              <h4><p>昨日报案登记数</p>{{item2}}</h4>
-            </div>
-          </el-col>
-           <el-col :span="6">
-            <div class="grid-content bgblue">
-              <i class="iconfont iconfasfa-cog1"></i>
-              <h4><p>今日咨询登记数</p>{{item3}}</h4>
-            </div>
-          </el-col>
-           <el-col :span="6">
-            <div class="grid-content bggreen">
-              <i class="iconfont iconmd-av_timer1"></i>
-              <h4><p>昨日咨询登记数</p>{{item4}}</h4>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
       <el-card class="diagram">
-        <div id="everyDayMeasuringDiv" style="width:100%;height: 280px;"></div>
-      </el-card> -->
+        <div id="monthlyProductionDiv" style="width:100%;height: 280px;"></div>
+      </el-card>
+      <el-card class="diagram">
+        <div id="monthlyClothRollDiv" style="width:100%;height: 280px;"></div>
+      </el-card>
     </div>
   </div>
 </template>
@@ -53,55 +27,96 @@ export default {
   name: "Home",
   data() {
     return {
-      item1: "0",
-      item2: "0",
-      item3: "0",
-      item4: "0",
-      advisoryNumList: [],
-      reportNumList: [],
-      day: [],
+      monthlyProduction: [],
+      monthlyClothRoll: [],
     };
   },
   methods: {
-    // everyDayMeasuringView() {
-    //   var self = this;
-    //   var formData = new FormData();
-    //   homeApi.countByReport(formData).then(function (response) {
-    //     var jsonData = response.data;
+    monthlyData() {
+      var self = this;
+
+      homeApi.monthlyData().then(response => {
+        var jsonData = response.data;
+        if (jsonData.result) {
+          self.monthlyProduction = jsonData.data.listVolume;
+          self.monthlyClothRoll = jsonData.data.listNumber;
 
-    //     self.item1 = jsonData.item1;
-    //     self.item2 = jsonData.item2;
-    //   })
-    //   .catch((error) => {
-    //     console.log(error);
-    //   });
+          self.monthlyProductionView();
+          self.monthlyClothRollView();
+        }
+      });
+    },
+    monthlyProductionView() {
+      let myChart = this.$echarts.init(document.getElementById("monthlyProductionDiv"));
 
-    //   homeApi.countByAdvisory(formData).then(function (response) {
-    //     var jsonData = response.data;
+      myChart.setOption({
+        title: {
+          text: "月度产量"
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        grid: {
+          left: "3%",
+          right: "3%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          name: "米"
+        },
+        series: [
+          {
+            data: this.monthlyProduction,
+            type: 'line'
+          }
+        ]
+      });
+    },
+    monthlyClothRollView() {
+      let myChart = this.$echarts.init(document.getElementById("monthlyClothRollDiv"));
 
-    //     self.item3 = jsonData.item3;
-    //     self.item4 = jsonData.item4;
-    //   })
-    //   .catch((error) => {
-    //     console.log(error);
-    //   });
-    // },
+      myChart.setOption({
+        title: {
+          text: "月度工作量"
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        grid: {
+          left: "3%",
+          right: "3%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          name: "卷"
+        },
+        series: [
+          {
+            data: this.monthlyClothRoll,
+            type: 'line'
+          }
+        ]
+      });
+    },
   },
   async mounted() {
-    var self = this;
-
-    // var formData = new FormData();
-    // await homeApi.trendDataForMonth(formData).then(function(response) {
-    //   var jsonData = response.data;
-    //   if (jsonData.result) {
-    //     console.log(jsonData);
-    //     self.advisoryNumList = jsonData.data.advisoryNumList;
-    //     self.reportNumList = jsonData.data.reportNumList;
-    //     self.day = jsonData.data.day;
-    //   }
-    // });
-  
-    // this.everyDayMeasuringView();
+    this.monthlyData();
   },
 };
 </script>