dvcp_v2_wxcp_app/library/project/lulong/AppHandSnapshot/Statistics.vue

<template>
  <div class="statistics">
    <AiTopFixed>
      <div class="select-gird">
        <AiPagePicker type="gird" valueObj nodeKey="id" formType="2" @select="handleSelectGird" class="right-span"
                      action="/app/apppatrolreportinfo/listByInfo">
          <AiMore v-model="selectGird.girdName" icon="arrow-right" placeholder="选择网格"/>
        </AiPagePicker>
      </div>
    </AiTopFixed>
    <div class="statstics-content">
      <div class="info-content">
        <div class="title">概况总览</div>
        <div class="el-row">
          <div class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)">
            <h2>{{ item.value }}</h2>
            <p>{{ item.label }}</p>
          </div>
        </div>
      </div>
      <div class="info-content">
        <div class="title">事件办结率</div>
        <div class="echart-content" id="finish" v-if="showFinish"></div>
        <div class="num" v-if="showFinish">{{ finshNum || 0 }}%</div>
        <AiEmpty v-else></AiEmpty>
      </div>

      <div class="info-content">
        <div class="title">巡查上报趋势图</div>
        <AiEmpty v-if="!trendData.length"></AiEmpty>
        <div class="echart-content" id="trend" v-else></div>
      </div>

      <div class="info-content">
        <div class="title">巡查事件分类
          <!-- <div class="type-select" :style="statusInfo.name ? '' : 'color:#999;'" @click="show=true">{{statusInfo.name || '请选择'}}<u-icon name="arrow-right"></u-icon></div> -->
          <u-select v-model="show" :list="$dict.getDict('clapEventStatusHistory')" value-name="dictValue"
                    label-name="dictName" @confirm="selectStatus"></u-select>
        </div>
        <AiEmpty v-if="!typeData.length"></AiEmpty>
        <div class="echart-content" id="type" v-else></div>
      </div>
      <div class="pad-b120"></div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import echarts from 'echarts'

export default {
  props: {},
  data() {
    return {
      todayList: [],
      selectGird: {id: '', girdName: ''},
      finishChart: null,
      trendChart: null,
      typeChart: null,
      show: false,
      finishData: [],
      showFinish: false,
      finshNum: '',
      trendData: [],
      trendDataX: [],
      typeData: [],
      statusInfo: {name: '', eventStatus: ''},
    }
  },
  computed: {
    ...mapState(['user']),
  },

  created() {
    this.getGirdInfo()
  },
  methods: {
    getStatistics() {
      this.todayList = [], this.finishData = [], this.trendDataX = [], this.trendData = [], this.typeData = [], this.showFinish = false
      this.$http.post(`/app/apppatrolreportinfo/countByGirdId?girdId=${this.selectGird.id}&eventStatus=${this.statusInfo.eventStatus}`).then((res) => {
        if (res.code == 0) {

          Object.keys(res.data.allCountMap).forEach((key) => {
            var info = {
              label: key,
              value: res.data.allCountMap[key]
            }
            this.todayList.push(info)
          })

          Object.keys(res.data.finishCountMap).forEach((key) => {
            var info = {
              name: key,
              value: res.data.finishCountMap[key]
            }
            if (res.data.finishCountMap[key] > 0) {
              this.showFinish = true
            }
            this.finishData.push(info)
          })

          if (this.showFinish) {
            var num = res.data.finishCountMap['累计事件办结'] / res.data.finishCountMap['累计事件上报']
            this.finshNum = Number(num * 100).toFixed(2)
          }


          res.data.dateCountList.map((item) => {
            this.trendData.push(item.ecount)
            this.trendDataX.push(item.ymd)
          })

          res.data.groupList.map((item) => {
            var info = {
              name: item.groupName,
              value: item.totalNum
            }
            this.typeData.push(info)
          })

          this.$nextTick(() => {
            if (this.showFinish) {
              this.finishChartInit()
            }
            if (this.trendData.length) {
              this.trendChartInit()
            }
            if (this.typeData.length) {
              this.typeChartInit()
            }
          })
        }
      })
    },

    getGirdInfo() {
      this.$http.post(`/app/apppatrolreportinfo/getRootByGirdMember`).then((res) => {
        if (res.code == 0) {
          this.selectGird.girdName = res.data.girdName
          this.selectGird.id = res.data.id
          this.$dict.load('clapEventStatusHistory').then(() => {
            this.getStatistics()
          })
        }
      })
    },

    finishChartInit() {
      this.finishChart = echarts.init(document.getElementById('finish'))
      var option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '事件办结率',
            type: 'pie',
            radius: ['30%', '60%'],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#7E94F6', '#85E3D5', '#2891FF'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            data: this.finishData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              }
            }
          }
        ]
      };
      this.finishChart.setOption(option)
    },

    trendChartInit() {
      this.trendChart = echarts.init(document.getElementById('trend'))
      var option2 = {
        grid: {
          left: '5%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#E1E5EF', //x轴的颜色
              width: 1, //轴线的宽度
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666',
            },
          },
          data: this.trendDataX
        },
        yAxis: {
          axisLine: {       //y轴
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666',
            },
          },
          type: 'value',
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            data: this.trendData,
            type: 'line',
            areaStyle: {//覆盖区域的渐变色
              normal: {
                color: {
                  type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                },
              }
            },
            lineStyle: {
              normal: {
                color: '#2891FF'
              }
            },
            itemStyle: {
              normal: {
                color: '#2891FF',
              }
            }
          }
        ]
      };
      this.trendChart.setOption(option2)
    },

    typeChartInit() {
      this.typeChart = echarts.init(document.getElementById('type'))
      var option3 = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '巡查事件分类',
            type: 'pie',
            radius: ['0%', '70%'],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            data: this.typeData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              }
            }
          }
        ]
      };
      this.typeChart.setOption(option3)
    },

    selectStatus(e) {
      this.statusInfo.name = e[0].label
      this.statusInfo.eventStatus = e[0].value
      this.getStatistics()
    },
    handleSelectGird(v) {
      this.selectGird = v || {}
      this.getStatistics()
    },
    toList(row) {
      var searchType = '', typeList = ['', '', '累计上报', '今日上报', '今日办结', '办理中']
      typeList.map((item, index) => {
        if (item == row.label) {
          return searchType = index
        }
      })
      uni.navigateTo({url: `./StatisticsList?title=${row.label}&searchType=${searchType}&girdId=${this.selectGird.id}`})
    }
  },
}
</script>

<style scoped lang="scss">
.statistics {
  background-color: #F3F7F8;

  .statstics-content {
    padding: 30px 30px 0;
  }

  ::v-deep .AiTopFixed {
    .content {
      background-color: #3975C6;
      color: #fff;
    }

    .icon-img {
      width: 48px;
      height: 48px;
    }
  }

  ::v-deep .AiMore {
    span {
      color: #fff;
    }
  }

  .info-content {
    width: 100%;
    background: #FFF;
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 32px;

    .title {
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
      line-height: 48px;
      padding: 24px 16px 24px 24px;

      img {
        float: right;
        width: 40px;
        height: 40px;
      }

      .type-select {
        font-size: 26px;
        position: absolute;
        top: 20px;
        right: 32px;
        width: calc(100% - 250px);
        text-align: right;
        line-height: 48px;
      }
    }

    .el-row {
      display: flex;
      padding: 32px 0 60px 0;

      .item {
        flex: 1;
        text-align: center;

        h2 {
          font-size: 64px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #3B424A;
          line-height: 64px;
          margin-bottom: 8px;
        }

        p {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999;
          line-height: 40px;
        }
      }
    }

    .echart-content {
      width: 100%;
      height: 500px;
    }

    .num {
      position: absolute;
      left: 50%;
      top: 320px;
      margin-left: -100px;
      font-size: 40px;
      font-weight: 600;
      width: 200px;
      text-align: center;
    }
  }

  .pad-b120 {
    background-color: #F3F7F8;
    padding-bottom: 120px;
  }
}
</style>