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

<template>
  <bgBox :tabChange="tabChange" class="bgBox" :tabIndex="2">
    <evaluationStatistics
        style="position: absolute; left: 20px; top: 98px"
        class="animated fadeInLeft"
        :barHeight="'312px'"
        total="2700"
        :area="Transplantarea"
        :dataArray="TransplantdataArray"
    />
    <wordClouds
        :barHeight="'312px'"
        id="平台订单总交易额趋势(月)"
        style="position: absolute; left: 20px; top: 426px"
        class="animated fadeInLeft"
        title="平台订单总交易额趋势(月)"
    >
    </wordClouds>
    <weatherForecast
        id="平台订单总量趋势（月）"
        :barHeight="'312px'"
        style="position: absolute; left: 20px; top: 750px"
        class="animated fadeInLeft"
        title="平台订单总量趋势(月)"
        :area="trendarea"
        :dataArray="trendDataArray"
    ></weatherForecast>
    <threeMap
        @toView="toView"
        class="animated zoomIn"
        style="
        position: absolute;
        left: 50%;
        transform: translate(-50%,15%);
      "
        v-if="hasGetJson"
        :getJson="getJson"
    ></threeMap>
    <liquidFill
        :barHeight="'312px'"
        id="水球"
        total="3.5"
        style="position: absolute; right: 20px; top: 98px"
        class="animated fadeInRight"
        title="水球"
        :area="trendarea"
        :dataArray="trendDataArray"
    ></liquidFill>
    <slotCake
        :showSlot="false"
        id="`评价类型分布`"
        style="position: absolute; right: 20px; top: 434px"
        title="评价类型分布"
        :data="statisticsData"
        class="animated fadeInRight"
        :barHeight="'312px'"
    />
    <weatherForecast
        id="区域收获评价总量趋势"
        :barHeight="'312px'"
        style="position: absolute; right: 20px; top: 758px"
        class="animated fadeInRight"
        title="区域收获评价总量趋势(月)"
        :area="Weatherarea"
        :dataArray="WeatherdataArray"
    ></weatherForecast>
  </bgBox>
</template>

<script>
import mapOfTongren from '@/http/mapOfTongren.json'
import bgBox from '@/components/bgBox/index.vue'
import cake from '@/components/Customize/cake'
import HybridCharts from '@/components/Customize/HybridCharts'
import liquidFill from '@/components/Customize/liquidfill'
import wordClouds from '@/components/Customize/wordClouds'
import slotCake from '@/components/Customize/slotCake'
import evaluationStatistics from '@/components/Customize/evaluationStatistics/index.vue'
import ComplexHistograms from '@/components/Customize/Complex histograms'
import weatherForecast from '@/components/Customize/weatherForecast'
import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
import statisticsPanel from '@/components/statisticsPanel/index.vue'
import threeMap from '@/components/Customize/map/index'

export default {
  name: `Home`,
  components: {
    evaluationStatistics,
    liquidFill,
    wordClouds,
    HybridCharts,
    slotCake,
    weatherForecast,
    HorizontalHistogram,
    ComplexHistograms,
    statisticsPanel,
    bgBox,
    threeMap,
    cake,
  },
  data() {
    return {
      tabs: {
        index: 0,
        list: [`订单总量`, `订单交易额`],
      },
      max: 100,
      autoVueFnInit: false,
      statisticsData: {
        title: `目标完成率`,
        value: 0,
        acrossList: [
          {name: `年移栽数量`, value: undefined},
          {name: `年移栽面积`, value: undefined},
        ],
        verticalList: [
          {name: `移栽区域数`, value: undefined},
          {name: `烟农数量`, value: undefined},
        ],
      },
      yearName: {
        lastName: `去年`,
        thisName: `今年`,
      },
      TransplantdataArray: [],
      Transplantarea: [],
      Weatherarea: [],
      WeatherdataArray: {
        temperature: [],
        Weather: [],
      },
      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.getJSON()
    // this.$util.autoVueFn(
    //   [
    //     {
    //       time: 1000 * 60,
    //       fn: this.getWeatherForecast,
    //     },
    //     {
    //       time: 1000 * 60,
    //       fn: this.getAnalysisOfTransplantYieldInVariousRegions,
    //     },
    //     {
    //       time: 1000 * 60,
    //       fn: this.getTransplantAreaInEachRegion,
    //     },
    //     {
    //       time: 1000 * 60,
    //       fn: this.getAnalysisOfTransplantingSituation,
    //     },
    //     {
    //       time: 1000 * 60,
    //       fn: this.getStatistics,
    //     },
    //     {
    //       time: 1000 * 60,
    //       fn: this.getTrendAnalysis,
    //     },
    //   ],
    //   {
    //     vm: this,
    //     batEnd() {
    //       this.autoVueFnInit = true
    //     },
    //   }
    // )
  },
  mounted() {
  },
  methods: {
    async toView(code) {
      console.log(code)

      const {id, 区域编码} = (await this.$util.code2base(this, code)) || {}
      this.$router.push({
        path: `/page3`,
        query: {
          id,
          code: 区域编码,
        },
      })
    },
    tabChange(val) {
      if (val === 0) {
        this.$router.push(`/page1`)
      } else if (val === 1) {
        this.$router.push(`/page2`)
      } else if (val === 2) {
        this.$router.push(`/page3`)
      }
      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`, {
            params: {
              districtId: 0,
            },
          })
          .then((res) => {
            const area = []
            const dataArray = {
              temperature: [],
              Weather: [],
            }
            res.forEach((element) => {
              area.push(element.时间)
              dataArray.temperature.push(element.温度)
              dataArray.Weather.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() {
      this.$http.get(`/api/analysisOfTransplantingSituation`).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
      })
    },
    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() {
      this.getJson = mapOfTongren
      this.hasGetJson = true
    },
  },
}
</script>
<style lang="less">
.tabbotton {
  text-align: center;
  display: flex;
  justify-content: space-between;
  background-image: url('~@/assets/img2/综合总览/编组 9.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 460px;

  .tab-item {
    width: 220px;
    height: 40px;
    line-height: 40px;
    font-family: YouSheBiaoTiHei;
    font-size: 22px;
    color: #bababa;
    text-align: center;
    position: relative;
    cursor: pointer;
    background-image: url("~@/assets/img/rectangle.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;


    &.cur {
      color: rgba(77, 255, 251, .9);
      background-image: url("~@/assets/img/rectangleing.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}
</style>