fix: 动态数据接口更新

src/views/page1/index.vue

@@ -5,7 +5,7 @@
       title="实时统计"
       :data="statisticsData"
       v-if="isCake"
-    ></cake>
+    />
     <cylindricalHistogram
       style="position: absolute; left: 50px; top: 430px"
       v-if="isGetData"
@@ -13,7 +13,7 @@
       title="各区域移栽产量分析"
       :area="Transplantarea"
       :dataArray="TransplantdataArray"
-    ></cylindricalHistogram>
+    />
     <weatherForecast
       :unit="`摄氏度`"
       style="position: absolute; left: 50px; top: 760px"
@@ -22,8 +22,7 @@
       :area="Weatherarea"
       :dataArray="WeatherdataArray"
       :alertValue="30"
-    >
-    </weatherForecast>
+    />
     <wavyLineChart
       :unit="`平方米/面积`"
       id="`wavyLineChart`"
@@ -33,8 +32,7 @@
       :area.sync="wavyLineArea"
       :dataArray.sync="wavyLinedataArray"
       smooth="true"
-    >
-    </wavyLineChart>
+    />
     <HorizontalHistogram
       style="position: absolute; right: 50px; top: 430px"
       v-if="isHorizontal"
@@ -42,16 +40,15 @@
       title="移栽情况分析"
       :area="HorizontalArea"
       :dataArray="HorizontalArray"
-    ></HorizontalHistogram>
+    />
     <wavyLineChart
       id="`移栽趋势分析`"
       style="position: absolute; right: 50px; top: 760px"
       v-if="isWavyLine"
       title="移栽趋势分析"
-      :area="trendarea"
-      :dataArray="trendDataArray"
-    >
-    </wavyLineChart>
+      :area.sync="trendarea"
+      :dataArray.sync="trendDataArray"
+    />
     <threeMap
       style="
         position: absolute;
@@ -75,120 +72,6 @@ import wavyLineChart from '@/components/Customize/wavyLineChart'
 import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
 import threeMap from '@/components/Customize/map/index'
 
-const apiLists = [
-  {
-    key: `weatherForecast`,
-    fn(data, arg) {
-      const area = []
-      const dataArray = []
-      data.forEach((element) => {
-        area.push(element.时间)
-        dataArray.push(element.温度)
-      })
-      this.Weatherarea = area
-      this.WeatherdataArray = dataArray
-      this.isWeather = true
-    },
-  },
-  {
-    key: `eachRegion`,
-    fn(data, arg) {
-      const area = []
-      const dataArray = {
-        LastYear: [],
-        thisYear: [],
-      }
-      data.forEach((element) => {
-        area.push(element.名称.slice(0, 2))
-        dataArray.LastYear.push(element.去年)
-        dataArray.thisYear.push(element.今年)
-      })
-      this.wavyLineArea = area
-      this.wavyLinedataArray = dataArray
-      this.isWavyLine = true
-    },
-  },
-  {
-    key: `variousRegions`,
-    fn(data, arg) {
-      const area = []
-      const dataArray = []
-      data.forEach((element) => {
-        area.push(element.名称.slice(0, 2))
-        dataArray.push(element.值)
-      })
-      this.Transplantarea = area
-      this.TransplantdataArray = dataArray
-      this.isGetData = true
-    },
-  },
-  {
-    key: `situation`,
-    fn(data, arg) {
-      const area = []
-      const dataArray = {
-        Done: [],
-        Percentage: [],
-      }
-      const date = data.sort((a, b) => b.已移载 - a.已移载)
-      date.forEach((element) => {
-        area.push(element.名称.slice(0, 2))
-        dataArray.Done.push(element.已移载)
-        dataArray.Percentage.push(element.比率.toFixed(0))
-      })
-      this.HorizontalArea = area
-      this.HorizontalArray = dataArray
-
-      this.isHorizontal = true
-    },
-  },
-  {
-    key: `statistics`,
-    fn(data, arg) {
-      const obj = this.statisticsData
-      // eslint-disable-next-line no-prototype-builtins
-      if (data.hasOwnProperty(obj.title)) {
-        obj.value = data[obj.title]
-      }
-      const list1 = this.statisticsData.acrossList
-      this.statisticsData.acrossList = list1.map((item) => {
-        // eslint-disable-next-line no-prototype-builtins
-        if (data.hasOwnProperty(item.name)) {
-          return { ...item, value: data[item.name] }
-        }
-        return item
-      })
-      const list2 = this.statisticsData.verticalList
-      this.statisticsData.verticalList = list2.map((item) => {
-        // eslint-disable-next-line no-prototype-builtins
-        if (data.hasOwnProperty(item.name)) {
-          return { ...item, value: data[item.name] }
-        }
-        return item
-      })
-      this.isCake = true
-    },
-  },
-  {
-    key: `trendAnalysis`,
-    fn(data, arg) {
-      const area = []
-      const dataArray = {
-        LastYear: [],
-        thisYear: [],
-      }
-      data.forEach((element) => {
-        area.push(element.时间)
-        dataArray.LastYear.push(element.去年)
-        dataArray.thisYear.push(element.今年)
-      })
-      this.trendarea = area
-      this.trendDataArray = dataArray
-      this.isTrend = true
-    },
-  },
-]
-
 export default {
   name: `Home`,
   components: {
@@ -245,20 +128,39 @@ export default {
   },
   computed: {},
   created() {
-    console.log(`开始`)
-    apiLists.forEach((item) => {
-      this.$bus.$on(item.key, (data) => {
-        item.fn.call(this, data)
-      })
-    })
+    this.$util.autoVueFn(
+      [
+        {
+          time: 1000 * 10,
+          fn: this.getWeatherForecast,
+        },
+        {
+          time: 1000 * 10,
+          fn: this.getAnalysisOfTransplantYieldInVariousRegions,
+        },
+        {
+          time: 1000 * 10,
+          fn: this.getTransplantAreaInEachRegion,
+        },
+        {
+          time: 1000 * 10,
+          fn: this.getAnalysisOfTransplantingSituation,
+        },
+        {
+          time: 300,
+          fn: this.getStatistics,
+        },
+        {
+          time: 1000 * 1,
+          fn: this.getTrendAnalysis,
+        },
+      ],
+      this
+    )
     this.getJSON()
     // this.$http.get(`https://httpbin.org/get`)
   },
   mounted() {
-    // this.getAnalysisOfTransplantYieldInVariousRegions()
-    // this.getWeatherForecast()
-    // this.getTransplantAreaInEachRegion()
-    // this.getAnalysisOfTransplantingSituation()
     screenSize(this.$refs.editor)
   },
   methods: {
@@ -274,43 +176,109 @@ export default {
       this.$http
         .get(`/api/analysisOfTransplantYieldInVariousRegions`)
         .then((res) => {
+          const area = []
+          const dataArray = []
           res.forEach((element) => {
-            this.Transplantarea.push(element.名称.slice(0, 2))
-            this.TransplantdataArray.push(element.值)
+            area.push(element.名称.slice(0, 2))
+            dataArray.push(element.值)
           })
+          this.Transplantarea = area
+          this.TransplantdataArray = dataArray
           this.isGetData = true
         })
     },
     getWeatherForecast() {
       this.$http.get(`/api/weatherForecast`).then((res) => {
+        const area = []
+        const dataArray = []
         res.forEach((element) => {
-          this.Weatherarea.push(element.时间)
-          this.WeatherdataArray.push(element.温度)
+          area.push(element.时间)
+          dataArray.push(element.温度)
         })
+        this.Weatherarea = area
+        this.WeatherdataArray = dataArray
         this.isWeather = true
       })
     },
     getTransplantAreaInEachRegion() {
       this.$http.get(`/api/transplantAreaInEachRegion`).then((res) => {
+        const area = []
+        const dataArray = {
+          LastYear: [],
+          thisYear: [],
+        }
         res.forEach((element) => {
-          this.wavyLineArea.push(element.名称.slice(0, 2))
-          this.wavyLinedataArray.LastYear.push(element.去年)
-          this.wavyLinedataArray.thisYear.push(element.今年)
+          area.push(element.名称.slice(0, 2))
+          dataArray.LastYear.push(element.去年)
+          dataArray.thisYear.push(element.今年)
         })
+        this.wavyLineArea = area
+        this.wavyLinedataArray = dataArray
         this.isWavyLine = true
       })
     },
     getAnalysisOfTransplantingSituation() {
       this.$http.get(`/api/analysisOfTransplantingSituation`).then((res) => {
+        const area = []
+        const dataArray = {
+          Done: [],
+          Percentage: [],
+        }
         const date = res.sort((a, b) => b.已移载 - a.已移载)
         date.forEach((element) => {
-          this.HorizontalArea.push(element.名称.slice(0, 2))
-          this.HorizontalArray.Done.push(element.已移载)
-          this.HorizontalArray.Percentage.push(element.比率.toFixed(0))
+          area.push(element.名称.slice(0, 2))
+          dataArray.Done.push(element.已移载)
+          dataArray.Percentage.push(element.比率.toFixed(0))
         })
+        this.HorizontalArea = area
+        this.HorizontalArray = dataArray
+
         this.isHorizontal = true
       })
     },
+    getStatistics() {
+      this.$http.get(`/api/realTimeStatistics`).then((res) => {
+        const obj = this.statisticsData
+        // eslint-disable-next-line no-prototype-builtins
+        if (res.hasOwnProperty(obj.title)) {
+          obj.value = res[obj.title]
+        }
+        const list1 = this.statisticsData.acrossList
+        this.statisticsData.acrossList = list1.map((item) => {
+          // eslint-disable-next-line no-prototype-builtins
+          if (res.hasOwnProperty(item.name)) {
+            return { ...item, value: res[item.name] }
+          }
+          return item
+        })
+        const list2 = this.statisticsData.verticalList
+        this.statisticsData.verticalList = list2.map((item) => {
+          // eslint-disable-next-line no-prototype-builtins
+          if (res.hasOwnProperty(item.name)) {
+            return { ...item, value: res[item.name] }
+          }
+          return item
+        })
+        this.isCake = true
+      })
+    },
+    getTrendAnalysis() {
+      this.$http.get(`/api/transplantTrendAnalysis`).then((res) => {
+        const area = []
+        const dataArray = {
+          LastYear: [],
+          thisYear: [],
+        }
+        res.forEach((element) => {
+          area.push(element.时间)
+          dataArray.LastYear.push(element.去年)
+          dataArray.thisYear.push(element.今年)
+        })
+        this.trendarea = area
+        this.trendDataArray = dataArray
+        this.isTrend = true
+      })
+    },
     async getJSON() {
       console.log(`获取JSOn`)
       this.getJson = await this.$http.get(