E-commerce/src/views/page1/index.vue

<template>
  <bgBox :tabChange="tabChange" class="bgBox" :tabIndex="0">
    <cake
      style="position: absolute; top: 115px; left: 50px"
      title="实时统计"
      :data="statisticsData"
      class="animated fadeInLeft"
      v-if="isCake"
    />
    <cylindricalHistogram
      style="position: absolute; left: 50px; top: 430px"
      class="animated fadeInLeft"
      v-if="isGetData"
      :unit="`公斤/产量`"
      title="各区域移栽产量分析"
      :area="Transplantarea"
      :dataArray="TransplantdataArray"
    />
    <weatherForecast
      :unit="`摄氏度`"
      style="position: absolute; left: 50px; top: 760px"
      class="animated fadeInLeft"
      v-if="isWeather"
      title="天气预报"
      :area="Weatherarea"
      :dataArray="WeatherdataArray"
      :alertValue="30"
    />
    <wavyLineChart
      :unit="`平方米/面积`"
      id="`wavyLineChart`"
      style="position: absolute; right: 50px; top: 115px"
      class="animated fadeInRight"
      v-if="isWavyLine"
      title="各区域移栽面积"
      :area.sync="wavyLineArea"
      :dataArray.sync="wavyLinedataArray"
      smooth="true"
    />
    <HorizontalHistogram
      style="position: absolute; right: 50px; top: 430px"
      class="animated fadeInRight"
      v-if="isHorizontal"
      id="`移栽情况分析`"
      title="移栽情况分析"
      :area="HorizontalArea"
      :dataArray="HorizontalArray"
    />
    <wavyLineChart
      id="`移栽趋势分析`"
      style="position: absolute; right: 50px; top: 760px"
      class="animated fadeInRight"
      v-if="isWavyLine"
      title="移栽趋势分析"
      :area.sync="trendarea"
      :dataArray.sync="trendDataArray"
    />
    <threeMap
      style="
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-55%, 20%);
      "
      v-if="hasGetJson"
      :getJson="getJson"
    ></threeMap>
  </bgBox>
</template>

<script>
import bgBox from '@/components/bgBox/index.vue'
import { screenSize } from '@/assets/js/utils'
import cake from '@/components/Customize/cake'
import cylindricalHistogram from '@/components/Customize/cylindricalHistogram'
import weatherForecast from '@/components/Customize/weatherForecast'
import wavyLineChart from '@/components/Customize/wavyLineChart'
import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
import threeMap from '@/components/Customize/map/index'

export default {
  name: `Home`,
  components: {
    cylindricalHistogram,
    weatherForecast,
    wavyLineChart,
    HorizontalHistogram,
    bgBox,
    threeMap,
    cake,
  },
  data() {
    return {
      autoVueFnInit: false,
      statisticsData: {
        title: `目标完成率`,
        value: 0,
        acrossList: [
          { name: `年移栽数量`, value: undefined },
          { name: `年移栽面积`, value: undefined },
        ],
        verticalList: [
          { name: `移栽区域数`, value: undefined },
          { name: `烟农数量`, value: undefined },
        ],
      },
      TransplantdataArray: [],
      Transplantarea: [],
      Weatherarea: [],
      WeatherdataArray: [],
      wavyLineArea: [],
      wavyLinedataArray: {
        LastYear: [],
        thisYear: [],
      },
      trendarea: [],
      trendDataArray: {
        LastYear: [],
        thisYear: [],
      },
      HorizontalArea: [],
      HorizontalArray: {
        Done: [],
        Percentage: [],
      },
      getJson: {},
      isGetData: false,
      isWeather: false,
      isWavyLine: false,
      isHorizontal: false,
      isTrend: false,
      hasGetJson: false,
      isCake: false,
    }
  },
  computed: {},
  created() {
    this.$util.autoVueFn(
      [
        {
          time: 1000 * 5,
          fn: this.getWeatherForecast,
        },
        {
          time: 1000 * 5,
          fn: this.getAnalysisOfTransplantYieldInVariousRegions,
        },
        {
          time: 1000 * 5,
          fn: this.getTransplantAreaInEachRegion,
        },
        {
          time: 1000 * 5,
          fn: this.getAnalysisOfTransplantingSituation,
        },
        {
          time: 1000 * 5,
          fn: this.getStatistics,
        },
        {
          time: 1000 * 5,
          fn: this.getTrendAnalysis,
        },
      ],
      {
        vm: this,
        batEnd() {
          this.autoVueFnInit = true
        },
      }
    )
    this.getJSON()
    // this.$http.get(`https://httpbin.org/get`)
  },
  mounted() {},
  methods: {
    tabChange(val) {
      if (val === 0) {
        this.$router.push(`/page1`)
      } else if (val === 1) {
        this.$router.push(`/page2`)
      }
      console.log(`val`, val)
    },
    getAnalysisOfTransplantYieldInVariousRegions() {
      return this.$http
        .get(`/api/analysisOfTransplantYieldInVariousRegions`)
        .then((res) => {
          const area = []
          const dataArray = []
          res.forEach((element) => {
            area.push(element.名称.slice(0, 2))
            dataArray.push(element.值)
          })
          this.Transplantarea = area
          this.TransplantdataArray = dataArray
          this.isGetData = true
        })
    },
    getWeatherForecast() {
      return this.$http.get(`/api/weatherForecast`).then((res) => {
        const area = []
        const dataArray = []
        res.forEach((element) => {
          area.push(element.时间)
          dataArray.push(element.温度)
        })
        this.Weatherarea = area
        this.WeatherdataArray = dataArray
        this.isWeather = true
      })
    },
    getTransplantAreaInEachRegion() {
      return this.$http.get(`/api/transplantAreaInEachRegion`).then((res) => {
        const area = []
        const dataArray = {
          LastYear: [],
          thisYear: [],
        }
        res.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
      })
    },
    getAnalysisOfTransplantingSituation() {
      return this.$http
        .get(`/api/analysisOfTransplantingSituation`)
        .then((res) => {
          const area = []
          const dataArray = {
            Done: [],
            Percentage: [],
          }
          const date = res.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
        })
    },
    getStatistics() {
      return 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() {
      return 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(`/api/mapOfTongren`)
      this.hasGetJson = true
    },
  },
}
</script>