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

<template>
  <div>
    <bgBox class="bgBox" bgType="g-bg2" :tabChange="tabChange" :tabIndex="1">
      <leftBox class="lefBox animated fadeInLeft" />
      <cmap />
      <HorizontalHistogram
        style="position: absolute; right: 50px; top: 115px; z-index: 10"
        v-if="isHorizontal"
        id="`各区域移栽面积1`"
        title="各区域移栽面积"
        :area="HorizontalArea"
        :dataArray="HorizontalArray"
        class="animated fadeInRight"
      />
      <wavyLineChart
        id="`本月移栽数量趋势`"
        style="position: absolute; right: 50px; top: 460px; z-index: 10"
        v-if="isMonthTrend"
        title="本月移栽数量趋势"
        :max="max"
        :area.sync="monthTrendarea"
        :dataArray.sync="monthTrendDataArray"
        :lineName="monthName"
        class="animated fadeInRight"
      />
      <wavyLineChart
        id="`本年移栽数量趋势`"
        :lineName="yearName"
        style="position: absolute; right: 50px; top: 760px; z-index: 10"
        title="本年移栽数据趋势"
        :area.sync="yearTrendarea"
        class="animated fadeInRight"
        :dataArray.sync="yearTrendDataArray"
        v-if="isYearTrend"
      />
    </bgBox>
  </div>
</template>

<script>
import bgBox from '@/components/bgBox/index.vue'
import cmap from './cmap.vue'
import leftBox from './leftBox.vue'
import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
import wavyLineChart from '@/components/Customize/wavyLineChart'
window.map = {}
export default {
  components: {
    bgBox,
    leftBox,
    cmap,
    wavyLineChart,
    HorizontalHistogram,
  },
  data() {
    return {
      max: 100,
      HorizontalArea: [],
      HorizontalArray: {
        Done: [],
      },
      yearName: {
        lastName: `去年`,
        thisName: `今年`,
      },
      isHorizontal: true,
      monthTrendarea: [],
      monthTrendDataArray: {
        LastYear: [],
        thisYear: [],
      },
      monthName: {
        lastName: `上月`,
        thisName: `本月`,
      },
      yearTrendarea: [],
      yearTrendDataArray: {
        LastYear: [],
        thisYear: [],
      },
      isMonthTrend: false,
      isYearTrend: false,
    }
  },
  computed: {},
  async created() {
    this.$util.autoVueFn(
      [
        {
          time: 1000 * 60,
          fn: this.getAnalysisOfTransplantingSituation,
        },
        {
          time: 1000 * 60,
          fn: this.getTrendOfTransplantQuantityThisMonth,
        },
        {
          time: 1000 * 60,
          fn: this.getThisYearsTransplantingDataTrend,
        },
      ],
      this
    )
  },
  mounted() {},
  unmounted() {
    window.map.destroy()
  },
  methods: {
    tabChange(val) {
      if (val === 0) {
        this.$router.push(`/page1`)
      }
      console.log(`val`, val)
    },
    getTrendOfTransplantQuantityThisMonth() {
      this.$http.get(`/api/transplantTrendAnalysis`).then((res) => {
        const area = []
        const dataArray = {
          LastYear: [],
          thisYear: [],
          comparisonLastDay: [],
          comparisonLastYear: [],
        }
        res.forEach((element) => {
          area.push(element.时间)
          dataArray.LastYear.push(element.去年)
          dataArray.thisYear.push(element.今年)
          dataArray.comparisonLastDay.push(element.较上日)
          dataArray.comparisonLastYear.push(element.较去年)
        })
        this.monthTrendarea = area
        this.monthTrendDataArray = dataArray
        this.isMonthTrend = true
      })
    },
    getThisYearsTransplantingDataTrend() {
      this.$http.get(`/api/thisYearsTransplantingDataTrend`).then((res) => {
        const area = []
        const dataArray = {
          LastYear: [],
          thisYear: [],
          comparisonLastDay: [],
          comparisonLastYear: [],
        }
        res.forEach((element) => {
          area.push(element.时间)
          dataArray.LastYear.push(element.去年)
          dataArray.thisYear.push(element.今年)
          dataArray.comparisonLastDay.push(element.较上日)
          dataArray.comparisonLastYear.push(element.较去年)
        })
        this.yearTrendarea = area
        this.yearTrendDataArray = dataArray
        this.isYearTrend = true
      })
    },
    getAnalysisOfTransplantingSituation() {
      this.$http.get(`/api/transplantAreaInEachRegion2`).then((res) => {
        const area = []
        const dataArray = {
          Done: [],
          Percentage: [],
        }
        const date = res
        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
      })
    },
  },
}
</script>

<style lang="less" scoped>
.bgBox {
  .lefBox {
    position: absolute;
    z-index: 10;
    left: 47px;
    top: 120px;
  }
  ::v-deep {
    .bg {
      position: absolute;
      z-index: 9;
    }
  }
}
</style>