提交

guoshipeng

2023-07-06 63c0ecf98f3705b4c70e4bafee5f325966a5777b

 src/components/Wind/realTimeLocal/excellentProportion.vue

@@ -1,15 +1,32 @@
<template>
  <div class="excellent_proportion">
    <div class="excellent_top header_excellent">
      <img class="pie_img" :src="require('@/assets/images/regionalOverview/pieChart.png')" alt="">
      <span class="proportion_title"><span v-if="timeArea">优良天数占比({{ timeArea }})</span><span v-else>优良天数占比</span></span>
      <img class="open" :src="require('@/assets/images/regionalOverview/open.png')" alt="" style="cursor:pointer" @click="jumpLevelStatistic">
      <img
        class="pie_img"
        :src="require('@/assets/images/regionalOverview/pieChart.png')"
        alt=""
      />
      <span class="proportion_title"
        ><span v-if="timeArea">优良天数占比({{ timeArea }})</span
        ><span v-else>优良天数占比</span></span
      >
      <img
        class="open"
        :src="require('@/assets/images/regionalOverview/open.png')"
        alt=""
        style="cursor: pointer"
        @click="jumpLevelStatistic"
      />
    </div>
    <div class="proportion_pie" v-if="this.timeArea">
      <pie-chart-new :datas="data" :save="false" />
    </div>
    <div v-else style="width: 100%">
      <el-empty style="width: 100%" :image-size="60" description="无统计数据"></el-empty>
      <el-empty
        style="width: 100%"
        :image-size="60"
        description="无统计数据"
      ></el-empty>
    </div>
  </div>
</template>
@@ -22,14 +39,13 @@
  data() {
    return {
      timeArea: '',
      data: []
      data: [],
    }
  },
  created() {
    this.queryPieChartOfPollutionLevel()
  },
  mounted() {
  },
  mounted() {},
  methods: {
    // 获取天气污染等级比例饼状图数据
    queryPieChartOfPollutionLevel() {
@@ -38,9 +54,9 @@
        method: 'get',
        params: {
          regionCode: this.$store.state.regionCode,
          year: new Date().getFullYear()
        }
      }).then(res => {
          year: new Date().getFullYear(),
        },
      }).then((res) => {
        if (res.code === 0) {
          this.timeArea = res.data.time
          this.data = res.data.values.map((item) => {
@@ -49,17 +65,23 @@
            const levelIndex = item.pollution
            let level = ''
            switch (levelIndex) {
              case '0': level = '优'
              case '0':
                level = '优'
                break
              case '1': level = '良'
              case '1':
                level = '良'
                break
              case '2': level = '轻度污染'
              case '2':
                level = '轻度污染'
                break
              case '3': level = '中度污染'
              case '3':
                level = '中度污染'
                break
              case '4': level = '重度污染'
              case '4':
                level = '重度污染'
                break
              case '5': level = '严重污染'
              case '5':
                level = '严重污染'
            }
            newMap.name = level + ': ' + item.proportion
            return newMap
@@ -70,8 +92,8 @@
    // 跳转页面
    jumpLevelStatistic() {
      this.$router.push({ path: '/analyse/analyse/levelStatistic' })
    }
  }
    },
  },
}
</script>

@@ -94,7 +116,7 @@
.header_excellent {
  position: relative;
  height: 40px;
  background-color: #F8F7F7;
  background-color: #f8f7f7;
  .pie_img {
    position: absolute;
    top: 10px;