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

<template>
  <bgBox :tabChange="tabChange" class="bgBox" bgType="g-bg3">
    <div class="main">
      <div class="topBar">
        <div class="query">
          <img src="@/assets/img2/种植分析详情/编组 8.png" alt="" />
          <el-radio-group v-model="query.radio" class="radio-group">
            <el-radio class="date" :label="6">近一周</el-radio>
            <el-radio class="date" :label="30">近30天</el-radio>
            <el-radio class="date" :label="90">近90天</el-radio>
          </el-radio-group>
          <el-date-picker
            :pickerOptions="pickerOptions0"
            v-model="query.date[0]"
            type="date"
            placeholder="开始日期"
            class="mr-20px ml-20px date"
          >
          </el-date-picker>
          <el-date-picker
            class="date"
            :pickerOptions="pickerOptions1"
            v-model="query.date[1]"
            type="date"
            placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <img
          @click="backFn"
          src="@/assets/img2/种植分析详情/编组 16备份.png"
          alt=""
        />
      </div>
      <leftBox class="lefBox" />
      <leftBox2 class="lefBox2" />
      <cake
        id="`移栽数据`"
        barWidth="448px"
        style="position: absolute; top: 95px; right: 550px"
        title="移栽数据"
        :data="statisticsData"
        class="animated fadeInRight"
        v-if="isCake"
      />
      <weatherForecast
        :unit="`摄氏度`"
        barWidth="448px"
        style="position: absolute; right: 50px; top: 95px"
        class="animated fadeInRight"
        v-if="isWeather"
        title="实时天气"
        :area="Weatherarea"
        :dataArray="WeatherdataArray"
        :alertValue="30"
      />
      <wavyLineChart
        id="`月度移栽趋势`"
        barWidth="448px"
        style="position: absolute; right: 550px; top: 400px; z-index: 10"
        v-if="isMonthTrend"
        :lineName="monthName"
        title="月度移栽趋势"
        class="animated fadeInRight"
        :area.sync="monthTrendarea"
        :dataArray.sync="monthTrendDataArray"
      />
      <wavyLineChart
        id="`月度移栽面积分析`"
        barWidth="448px"
        style="position: absolute; right: 550px; top: 730px; z-index: 10"
        v-if="isAnalyseMonthTrend"
        :lineName="monthName"
        title="月度移栽面积分析"
        class="animated fadeInRight"
        :area.sync="monthTrendAnalysearea"
        :dataArray.sync="monthTrendAnalyseDataArray"
      />
      <wavyLineChart
        id="`年度移栽趋势`"
        barWidth="448px"
        style="position: absolute; right: 50px; top: 400px; z-index: 10"
        :lineName="yearName"
        title="年度移栽趋势"
        :area.sync="yearTrendarea"
        class="animated fadeInRight"
        :dataArray.sync="yearTrendDataArray"
        v-if="isYearTrend"
      />
      <wavyLineChart
        id="`年度移栽面积分析`"
        barWidth="448px"
        style="position: absolute; right: 50px; top: 730px; z-index: 10"
        :lineName="yearName"
        title="年度移栽面积分析"
        :area.sync="yearTrendAnalysearea"
        class="animated fadeInRight"
        :dataArray.sync="yearTrendAnalyseDataArray"
        v-if="isAnalyseYearTrend"
      />
    </div>
  </bgBox>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css'
import wavyLineChart from '@/components/Customize/wavyLineChart'
import weatherForecast from '@/components/Customize/weatherForecast'
import cake from '@/components/Customize/cake'
import bgBox from '@/components/bgBox/index.vue'
import leftBox from './leftBox.vue'
import leftBox2 from './leftBox2.vue'
import { Button, DatePicker, RadioGroup, Radio } from 'element-ui'
import Vue from 'vue'
import dayjs from 'dayjs'

// 获取近一周的日期范围
function getLastDay(day) {
  const end = dayjs() // 当前日期
  const start = end.subtract(day, `day`) // 前六天
  return { start: start.format(`YYYY-MM-DD`), end: end.format(`YYYY-MM-DD`) }
}

window.getLastDay = getLastDay
window.dayjs = dayjs

Vue.use(Button)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(DatePicker)

export default {
  components: {
    leftBox,
    leftBox2,
    bgBox,
    wavyLineChart,
    weatherForecast,
    cake,
  },
  data() {
    const vm = this
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      pickerOptions1: {
        disabledDate(time) {
          if (vm.query.date[0]) {
            return (
              time.getTime() < vm.query.date[0] || time.getTime() > Date.now()
            )
          } else {
            return time.getTime() > Date.now()
          }
        },
      },
      query: {
        radio: 6,
        date: [],
      },
      trendarea: [],
      trendDataArray: {
        LastYear: [],
        thisYear: [],
      },
      monthTrendarea: [],
      monthTrendDataArray: {
        LastYear: [],
        thisYear: [],
      },
      monthName: {
        lastName: `上月`,
        thisName: `本月`,
      },
      monthTrendAnalysearea: [],
      monthTrendAnalyseDataArray: [],
      yearTrendarea: [],
      yearTrendDataArray: {
        LastYear: [],
        thisYear: [],
      },
      isMonthTrend: false,
      isYearTrend: false,
      isAnalyseMonthTrend: false,
      isAnalyseYearTrend: false,
      yearName: {
        lastName: `去年`,
        thisName: `今年`,
      },
      yearTrendAnalysearea: [],
      yearTrendAnalyseDataArray: [],
      statisticsData: {
        title: `处理率`,
        value: 0,
        acrossList: [{ name: `今日种植数`, value: undefined }],
        verticalList: [
          { name: `目标移栽数`, value: undefined },
          { name: `累计移栽`, value: undefined },
        ],
      },
      Weatherarea: [],
      WeatherdataArray: [],
      isCake: false,
      isWeather: false,
      baseId: this.$route.query.id || 1,
    }
  },
  computed: {},
  async created() {
    this.$util.autoVueFn(
      [
        {
          time: 1000 * 3600,
          fn: this.getTrendOfTransplantQuantityThisMonth,
        },
        {
          time: 1000 * 3600,
          fn: this.getThisYearsTransplantingDataTrend,
        },
        {
          time: 1000 * 3600,
          fn: this.getMonthlyTransplantationAreaAnalysis,
        },
        {
          time: 1000 * 3600,
          fn: this.getAnalysisOfAnnualTransplantArea,
        },
        {
          time: 1000 * 3600,
          fn: this.getStatistics,
        },
        {
          time: 1000 * 3600,
          fn: this.getWeatherForecast,
        },
      ],
      this
    )
  },
  watch: {
    'query.radio': {
      handler(val) {
        if (this.query.radio) {
          this.query.date = []
          const { start, end } = getLastDay(this.query.radio)
          this.getEchartData(start, end)
        }
      },
      immediate: true,
    },
    'query.date'([a, b] = []) {
      if (a && b) {
        this.query.radio = 0
        const start = dayjs(a || Date.now()).format(`YYYY-MM-DD`)
        const end = dayjs(b || Date.now()).format(`YYYY-MM-DD`)
        this.getEchartData(start, end)
      } else if (!a && !b && !this.query.radio) {
        this.query.radio = 6
      }
    },
  },
  mounted() {},
  methods: {
    getEchartData(start, end) {
      console.log(`start, end`, start, end)
    },
    getWeatherForecast() {
      return this.$http
        .get(`/api/weatherForecast`, {
          params: {
            districtId: this.baseId,
          },
        })
        .then((res) => {
          if (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
          }
        })
    },
    getTrendOfTransplantQuantityThisMonth() {
      this.$http
        .get(`/api/transplantTrendAnalysis`, {
          params: {
            districtId: this.baseId,
          },
        })
        .then((res) => {
          if (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
          }
        })
    },
    getMonthlyTransplantationAreaAnalysis() {
      this.$http
        .get(`/api/monthlyTransplantationAreaAnalysis`, {
          params: {
            districtId: this.baseId,
          },
        })
        .then((res) => {
          if (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.monthTrendAnalysearea = area
            this.monthTrendAnalyseDataArray = dataArray
            this.isAnalyseMonthTrend = true
          }
        })
    },
    getThisYearsTransplantingDataTrend() {
      this.$http
        .get(`/api/thisYearsTransplantingDataTrend`, {
          params: {
            districtId: this.baseId,
          },
        })
        .then((res) => {
          if (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
          }
        })
    },
    getAnalysisOfAnnualTransplantArea() {
      this.$http
        .get(`/api/analysisOfAnnualTransplantArea`, {
          params: {
            districtId: this.baseId,
          },
        })
        .then((res) => {
          if (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.yearTrendAnalysearea = area
            this.yearTrendAnalyseDataArray = dataArray
            this.isAnalyseYearTrend = true
          }
        })
    },
    getStatistics() {
      return this.$http
        .get(`/api/transplantData`, {
          params: {
            districtId: this.baseId,
          },
        })
        .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
        })
    },
    backFn() {
      this.$router.back()
    },
    tabChange(val) {
      console.log(`val`, val)
    },
  },
}
</script>

<style lang="less" scoped>
.bgBox {
  .main {
    padding: 50px;
    padding-top: 45px;
    .topBar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .lefBox,
    .lefBox2 {
      position: absolute;
      z-index: 10;
      top: 120px;
    }
    .lefBox {
      left: 458px;
    }
    .lefBox2 {
      left: 47px;
    }
    .query {
      font-size: 14px;
      display: flex;
      align-items: center;
      .radio-group {
        margin-top: -1px;
        margin-left: 20px;
      }
      .date {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
      }
      ::v-deep {
        .el-radio__input.is-checked + .el-radio__label {
          color: rgba(255, 255, 255, 0.8);
        }
        .el-input__suffix {
          right: 0;
        }
        .el-radio {
          background: rgba(255, 255, 255, 0.2);
          box-sizing: border-box;
          height: 27px;
          padding: 0 10px;
          line-height: 27px;
          color: rgba(255, 255, 255, 0.8);
          margin-right: 5px;
        }
        .el-input--prefix .el-input__inner {
          padding: 0;
        }
        .el-input__prefix {
          display: none;
        }
        .el-date-editor.el-input {
          width: 120px;
        }
        .el-input__icon {
          line-height: 27px;
          height: 27px;
        }
        .el-input__inner {
          border-radius: 10px;
          width: 120px;
          height: 27px;
          box-sizing: border-box;
          line-height: 27px;
          color: rgba(255, 255, 255, 0.8);
          text-align: center;
          border-width: 0;
        }
        .el-input__inner,
        .el-radio__inner {
          background-color: transparent;
        }
      }
    }
  }
  ::v-deep {
    .top {
      display: none;
    }
    *[aria-hidden='true'] {
      display: none;
    }
  }
}
</style>