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"
      v-if="isCake"
    ></cake>
    <cylindricalHistogram
      style="position: absolute; left: 50px; top: 430px"
      v-if="isGetData"
      :unit="`公斤/产量`"
      title="各区域移栽产量分析"
      :area="Transplantarea"
      :dataArray="TransplantdataArray"
    ></cylindricalHistogram>
    <weatherForecast
      :unit="`摄氏度`"
      style="position: absolute; left: 50px; top: 760px"
      v-if="isWeather"
      title="天气预报"
      :area="Weatherarea"
      :dataArray="WeatherdataArray"
      :alertValue="30"
    >
    </weatherForecast>
    <wavyLineChart
      :unit="`平方米/面积`"
      id="`wavyLineChart`"
      style="position: absolute; right: 50px; top: 115px"
      v-if="isWavyLine"
      title="各区域移栽面积"
      :area.sync="wavyLineArea"
      :dataArray.sync="wavyLinedataArray"
      smooth="true"
    >
    </wavyLineChart>
    <HorizontalHistogram
      style="position: absolute; right: 50px; top: 430px"
      v-if="isHorizontal"
      title="移栽情况分析"
      :area="HorizontalArea"
      :dataArray="HorizontalArray"
    ></HorizontalHistogram>
    <wavyLineChart
      id="`移栽趋势分析`"
      style="position: absolute; right: 50px; top: 760px"
      v-if="isWavyLine"
      title="移栽趋势分析"
      :area="trendarea"
      :dataArray="trendDataArray"
    >
    </wavyLineChart>
    <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'

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) {
      this.statisticsData = data
      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: {
    cylindricalHistogram,
    weatherForecast,
    wavyLineChart,
    HorizontalHistogram,
    bgBox,
    threeMap,
    cake,
  },
  data() {
    return {
      statisticsData: {},
      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() {
    console.log(`开始`)
    apiLists.forEach((item) => {
      this.$bus.$on(item.key, (data) => {
        item.fn.call(this, data)
      })
    })
    this.getJSON()
    // this.$http.get(`https://httpbin.org/get`)
  },
  mounted() {
    // this.getAnalysisOfTransplantYieldInVariousRegions()
    // this.getWeatherForecast()
    // this.getTransplantAreaInEachRegion()
    // this.getAnalysisOfTransplantingSituation()
    screenSize(this.$refs.editor)
  },
  methods: {
    tabChange(val) {
      if (val === 0) {
        this.$router.push(`/page1`)
      } else if (val === 1) {
        this.$router.push(`/page2`)
      }
      console.log(`val`, val)
    },
    getAnalysisOfTransplantYieldInVariousRegions() {
      this.$http
        .get(`/api/analysisOfTransplantYieldInVariousRegions`)
        .then((res) => {
          res.forEach((element) => {
            this.Transplantarea.push(element.名称.slice(0, 2))
            this.TransplantdataArray.push(element.值)
          })
          this.isGetData = true
        })
    },
    getWeatherForecast() {
      this.$http.get(`/api/weatherForecast`).then((res) => {
        res.forEach((element) => {
          this.Weatherarea.push(element.时间)
          this.WeatherdataArray.push(element.温度)
        })
        this.isWeather = true
      })
    },
    getTransplantAreaInEachRegion() {
      this.$http.get(`/api/transplantAreaInEachRegion`).then((res) => {
        res.forEach((element) => {
          this.wavyLineArea.push(element.名称.slice(0, 2))
          this.wavyLinedataArray.LastYear.push(element.去年)
          this.wavyLinedataArray.thisYear.push(element.今年)
        })
        this.isWavyLine = true
      })
    },
    getAnalysisOfTransplantingSituation() {
      this.$http.get(`/api/analysisOfTransplantingSituation`).then((res) => {
        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))
        })
        this.isHorizontal = true
      })
    },
    async getJSON() {
      console.log(`获取JSOn`)
      this.getJson = await this.$http.get(`/api/mapOfTongren`)
      console.log(this.getJson)
      this.hasGetJson = true
    },
  },
}
</script>