主页

src/components/areaZz.vue

@@ -16,7 +16,7 @@ export default {
   name: "areaZz",
   data() {
     return {
-      selectedOptions: [],
+      selectedOptions: ['330000'],
       options: [
         {
           value: '330000',
@@ -463,8 +463,6 @@ export default {
   },
   methods: {
     handleChange(value) {
-      console.log(value);
-      console.log(this.$ref.area);
       this.$emit('getCityCode', value);
     }
   }

src/views/collectData/charts/hisChart.vue

@@ -7,13 +7,27 @@
 export default {
   data() {
     return {
-      data: [22, 23, 24, 25, 22, 23, 23, 24],
-      dates: ['杭州牧场', '宁波牧场', '温州牧场', '绍兴牧场', '嘉兴牧场', '台州牧场', '金华牧场', '湖州牧场']
+      myCharts: null
+    }
+  },
+  props: {
+    hisList: {
+      type: Array
+    }
+  },
+  watch: {
+    hisList: {
+      handler(newVal) {
+        if(newVal) {
+          this.myCharts.clear();
+          this.drawLine();
+        }
+      },
+      deep: true
     }
   },
   methods: {
     drawLine () {
-      const hisChart = this.$echarts.init(document.getElementById('his'))
       const option = {
         xAxis: {
           type: 'category',
@@ -30,7 +44,7 @@ export default {
           axisTick: { // 刻度线
             show: false
           },
-          data: this.dates
+          data: []
         },
         yAxis: {
           name: '百头', // 坐标轴单位
@@ -61,7 +75,7 @@ export default {
         },
         series: [
           {
-            data: this.data,
+            data: [],
             type: 'bar',
             barWidth: 20, // 柱宽
             itemStyle: {
@@ -88,10 +102,13 @@ export default {
           }
         ]
       }
-      hisChart.setOption(option)
+      option.xAxis.data = this.hisList[0];
+      option.series[0].data = this.hisList[1];
+      this.myCharts.setOption(option)
     }
   },
   mounted () {
+    this.myCharts =  this.$echarts.init(document.getElementById('his'))
     this.drawLine()
   }
 }
@@ -104,4 +121,4 @@ export default {
 .his {
   min-height: 250px;
 }
-</style>
+</style>

src/views/collectData/charts/lineChart.vue

@@ -7,13 +7,27 @@
 export default {
   data() {
     return {
-      data: [22, 23, 24, 25, 22, 23, 23, 24, 25, 23],
-      dates: ['07-10', '07-11', '07-12', '07-13', '07-14', '07-15', '07-16', '07-17', '07-18', '07-19']
+      myCharts: null
+    }
+  },
+  props: {
+    lineList: {
+      type: Array
+    }
+  },
+  watch: {
+    lineList: {
+      handler(newVal) {
+        if(newVal) {
+          this.myCharts.clear();
+          this.drawLine();
+        }
+      },
+      deep: true
     }
   },
   methods: {
     drawLine () {
-      const lineChart = this.$echarts.init(document.getElementById('line'))
       const option = {
         xAxis: {
           type: 'category',
@@ -30,10 +44,10 @@ export default {
           axisTick: { // 刻度线
             show: false
           },
-          data: this.dates
+          data: []
         },
         yAxis: {
-          name: '千头', // 坐标轴单位
+          name: '头', // 坐标轴单位
           nameTextStyle: { // 坐标轴单位
             padding: [0, 30, 0, 0], // 位置设定
             color: '#000000'
@@ -61,7 +75,7 @@ export default {
         },
         series: [
           {
-            data: this.data,
+            data: [],
             type: 'line',
             itemStyle: {
               normal: {
@@ -78,11 +92,17 @@ export default {
           }
         ]
       }
-      lineChart.setOption(option)
+      option.xAxis.data = this.lineList[0];
+      option.series[0].data = this.lineList[1];
+      this.myCharts.setOption(option)
     }
   },
   mounted () {
+    this.myCharts = this.$echarts.init(document.getElementById('line'))
     this.drawLine()
+    window.onresize = () => {
+      this.myCharts.resize();
+    }
   }
 }
 </script>
@@ -94,4 +114,4 @@ export default {
 .line {
   min-height: 250px;
 }
-</style>
+</style>

src/views/collectData/collectData.vue

@@ -2,7 +2,7 @@
   <div class="collectData">
     <!-- 汇总数据的 nav -->
     <div class="box">
-      <label for="area">区域选择：</label>
+      <label>区域选择：</label>
       <area-zz @getCityCode="getCityCode"></area-zz>
       <div class="box_item" v-for="item in boxList" :key="item.id">
         <p>{{item.name}}</p>
@@ -18,12 +18,46 @@
           <div class="right">
             <el-date-picker
               v-model="timeSelected"
+              v-show="daySelected === 1"
               type="daterange"
               range-separator="—"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
+              @change="onChange"
+              value-format="yyyy-MM-dd"
               size="mini">
             </el-date-picker>
+            <el-date-picker
+                v-model="monthSelected"
+                v-show="daySelected === 2"
+                type="monthrange"
+                range-separator="至"
+                start-placeholder="开始月份"
+                end-placeholder="结束月份"
+                @change="onChange"
+                size="mini"
+                value-format="yyyy-MM">
+            </el-date-picker>
+            <div v-show="daySelected === 3">
+              <el-date-picker
+                  v-model="startYear"
+                  type="year"
+                  placeholder="选择年"
+                  size="mini"
+                  style="width: 100px;"
+                  value-format="yyyy">
+              </el-date-picker>
+              -
+              <el-date-picker
+                  v-model="endYear"
+                  type="year"
+                  placeholder="选择年"
+                  size="mini"
+                  @change="onChange"
+                  style="width: 100px;"
+                  value-format="yyyy">
+              </el-date-picker>
+            </div>
           </div>
           <div class="right">
             <span :class="{'scopeEle': true, 'ifScoped': daySelected === 1, 'borderLeft': true}" @click="scopeDay(1)">日</span>
@@ -31,13 +65,13 @@
             <span :class="{'scopeEle': true, 'ifScoped': daySelected === 3, 'borderRight': true}" @click="scopeDay(3)">年</span>
           </div>
         </div>
-        <line-chart></line-chart>
+        <line-chart :lineList="lineList"></line-chart>
       </div>
       <div class="chartDiv">
         <div class="title">
           <span>各牧场母猪存栏比较</span>
         </div>
-        <his-chart></his-chart>
+        <his-chart :hisList="hisList"></his-chart>
       </div>
       <div class="chartDiv">
         <div class="title">
@@ -58,29 +92,7 @@ export default {
   name: "collectData",
   data () {
     return {
-      // areas: [ // 区域选择 select 的 option
-      //   {
-      //     value: 1,
-      //     label: '浙江省'
-      //   },
-      //   {
-      //     value: 2,
-      //     label: '杭州市'
-      //   },
-      //   {
-      //     value: 3,
-      //     label: '宁波市'
-      //   },
-      //   {
-      //     value: 4,
-      //     label: '温州市'
-      //   },
-      //   {
-      //     value: 5,
-      //     label: '绍兴市'
-      //   }
-      // ],
-      areaSelected: '',
+      areaSelected: '330000',
       boxList: [
         {
           id: 1,
@@ -103,8 +115,15 @@ export default {
           value: 800000
         }
       ],
-      daySelected: 2, // 年月日选中值，默认月
-      timeSelected: '' // 时间选择器选中的时间
+      daySelected: 1, // 年月日选中值，默认月
+      timeSelected: '', // 时间选择器选中的时间
+      monthSelected: '', // 月份选择
+      startYear: '',
+      endYear: '',
+      // 母猪总存栏走势
+      lineList: [],
+      // 母猪存栏比较
+      hisList: [],
     }
   },
   components: {
@@ -135,17 +154,37 @@ export default {
     },
     // echarts 图的数据
     initEchart () {
+      let data = {}
+      if(this.daySelected === 1) {
+        data = {
+          regionCode: this.areaSelected,
+          start: this.timeSelected[0] ? this.timeSelected[0]: '',
+          end: this.timeSelected[1] ? this.timeSelected[1]: '',
+          type: this.daySelected
+        }
+      } else if(this.daySelected === 2) {
+        data = {
+          regionCode: this.areaSelected,
+          start: this.monthSelected[0] ? this.monthSelected[0] : '',
+          end: this.monthSelected[1] ? this.monthSelected[1] : '',
+          type: this.daySelected
+        }
+      } else {
+        data = {
+          regionCode: this.areaSelected,
+          start: this.startYear ? this.startYear : '',
+          end: this.endYear ? this.endYear : '',
+          type: this.daySelected
+        }
+      }
       this.$http({
-        url: this.$http.adornUrl(`http://192.168.1.57:8220/dataAnalysis/getPigStockByRegionCode`),
+        url: this.$http.adornUrl(`http://192.168.1.57:9000/dataAnalysis/getPigStockByRegionCode`),
         method: 'post',
-        data: this.$http.adornData({
-          'regionCode': "330000",
-          'start': "2021-07-20",
-          'end': "2021-07-29",
-          'type': 1
-        })
-      }).then(({data}) => {
-        console.log(data);
+        data: this.$http.adornData(data)
+      }).then(res => {
+        if(res.data.code === 0) {
+          this.lineList = [res.data.dateList, res.data.stockList];
+        }
       })
     },
     init () {
@@ -162,12 +201,47 @@ export default {
     },
     // 省市县
     getCityCode (val) {
+      console.log(val);
       let len = val.length
       this.areaSelected = val[len-1]
+      this.initCom();
+    },
+    onChange() {
+      if(this.daySelected === 3) {
+        if(this.startYear > this.endYear) {
+          this.$message.error('起始年份不能大于终止年份')
+          this.startYear = '';
+          this.endYear = '';
+          return false;
+        } else {
+          this.initEchart()
+        }
+      } else {
+        this.initEchart()
+      }
+    },
+    // 存栏比较
+    initCom() {
+      let params = {
+        regionCode: this.areaSelected
+      }
+      this.$http({
+        url: this.$http.adornUrl('http://192.168.1.57:9000/dataAnalysis/childPigStock'),
+        method: 'get',
+        params: this.$http.adornParams(params)
+      })
+      .then(res => {
+        if(res.data.code === 0) {
+          this.hisList = [res.data.regionList, res.data.regionStockList];
+        } else {
+          this.hisList = [];
+        }
+      })
     },
   },
   mounted() {
-    this.initEchart()
+    this.initEchart();
+    this.initCom();
   },
 }
 </script>

src/views/pastureData/Home.vue

@@ -58,7 +58,6 @@ export default {
     },
     // 去牧场
     goFarm(data) {
-      console.log(data);
       this.type = data.type;
       this.typeList.push(this.type);
       this.farmCode = data.farmCode;