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

<template>
  <bgBox :tabChange="tabChange">
    <cylindricalHistogram
      style="left: 50px; top: 425px"
      v-if="isGetData"
      title="各区域移栽产量分析"
      titleEn="Tongren Tobacco Planting Digital Management Platform"
      :area="Transplantarea"
      :dataArray="TransplantdataArray"
    ></cylindricalHistogram>
    <weatherForecast
      style="left: 50px; top: 750px"
      v-if="isWeather"
      title="天气预报"
      titleEn="Tongren Tobacco Planting Digital Management Platform"
      :area="Weatherarea"
      :dataArray="WeatherdataArray"
      :alertValue="30"
    >
    </weatherForecast>
    <wavyLineChart
      id="`wavyLineChart`"
      style="left: 1470px; top: 105px"
      v-if="isWavyLine"
      title="各区域移栽面积"
      :area="wavyLineArea"
      :dataArray="wavyLinedataArray"
      smooth="true"
    >
    </wavyLineChart>
    <HorizontalHistogram
      style="left: 1470px; top: 425px"
      v-if="isHorizontal"
      title="移栽情况分析"
      :area="HorizontalArea"
      :dataArray="HorizontalArray"
    ></HorizontalHistogram>
    <wavyLineChart
      id="`移栽趋势分析`"
      style="left: 1470px; top: 750px"
      v-if="isWavyLine"
      title="移栽趋势分析"
      :area="wavyLineArea"
      :dataArray="wavyLinedataArray"
    >
    </wavyLineChart>
    <threeMap v-if="hasGetJson" :getJson="getJson"></threeMap>
  </bgBox>
</template>

<script>
import bgBox from '@/components/bgBox/index.vue'
import { screenSize } from '@/assets/js/utils'
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,
  },
  data() {
    return {
      TransplantdataArray: [],
      Transplantarea: [],
      Weatherarea: [],
      WeatherdataArray: [],
      wavyLineArea: [],
      wavyLinedataArray: {
        LastYear: [],
        thisYear: [],
      },
      HorizontalArea: [],
      HorizontalArray: {
        Done: [],
        Percentage: [],
      },
      getJson: ``,
      isGetData: false,
      isWeather: false,
      isWavyLine: false,
      isHorizontal: false,
      hasGetJson: false,
    }
  },
  computed: {},
  created() {
    this.getAnalysisOfTransplantYieldInVariousRegions()
    this.getWeatherForecast()
    this.getTransplantAreaInEachRegion()
    this.getAnalysisOfTransplantingSituation()
    this.getJSON()
    this.$http.get(`https://httpbin.org/get`)
  },

  mounted() {
    screenSize(this.$refs.editor)
  },
  methods: {
    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() {
      this.getJson = await this.$http.get(
        `/datav/areas_v3/bound/geojson?code=520600_full`
      )
      this.hasGetJson = true
    },
  },
}
</script>

<style lang="less" scoped>
.home-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  .wrap {
    transform-origin: 0px 0px 0px;
    background: url(../../assets/img/bj.jpg) no-repeat;
    background-size: contain;
    background-position: 50% 0;
    background-color: rgb(0, 0, 0);
    min-width: auto;
    width: 1920px;
    min-height: auto;
    height: 1080px;
    overflow: auto;
    .top {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 80px;
      background-color: transparent;
      background: url(../../assets/img/top_nav.png) no-repeat;
      background-position: 65% 0;
      border: none;
      overflow: hidden;
    }
  }
}
</style>