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

<template>
  <div class="home-container">
    <div class="wrap" ref="editor">
      <div class="top"></div>
      <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: 1350px; top: 105px"
        v-if="isWavyLine"
        title="各区域移栽面积"
        :area="wavyLineArea"
        :dataArray="wavyLinedataArray"
        smooth="true"
      >
      </wavyLineChart>
      <HorizontalHistogram
        style="left: 1350px; top: 425px"
        v-if="isHorizontal"
        title="移栽情况分析"
        :area="HorizontalArea"
        :dataArray="HorizontalArray"
      ></HorizontalHistogram>
      <wavyLineChart
        id="`移栽趋势分析`"
        style="left: 1350px; top: 750px"
        v-if="isWavyLine"
        title="移栽趋势分析"
        :area="wavyLineArea"
        :dataArray="wavyLinedataArray"
      >
      </wavyLineChart>
    </div>
  </div>
</template>

<script>
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'
export default {
  name: `Home`,
  components: {
    cylindricalHistogram,
    weatherForecast,
    wavyLineChart,
    HorizontalHistogram,
  },
  data() {
    return {
      TransplantdataArray: [],
      Transplantarea: [],
      Weatherarea: [],
      WeatherdataArray: [],
      wavyLineArea: [],
      wavyLinedataArray: {
        LastYear: [],
        thisYear: [],
      },
      HorizontalArea: [],
      HorizontalArray: {
        Done: [],
        Percentage: [],
      },
      isGetData: false,
      isWeather: false,
      isWavyLine: false,
      isHorizontal: false,
    }
  },
  computed: {},
  created() {
    this.getAnalysisOfTransplantYieldInVariousRegions()
    this.getWeatherForecast()
    this.getTransplantAreaInEachRegion()
    this.getAnalysisOfTransplantingSituation()
    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
      })
    },
  },
}
</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>