epmet-work-pc-chengyang/src/views/dataBoard/overview/components/jdjs.vue

<template>
  <div class="m-jdjs">
    <div class="m-jdjs-js">
      <div class="m-jdjs-js-img">
        <img src="../linshi/jiedaotu.jpg" />
      </div>
      <div class="m-jdjs-js-txt">
        {{ overview }}
      </div>
    </div>
    <title-small text="重点关注人群" />
    <div class="event-statistics">
      <div
        id="zdgz"
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0,0,0,0.5)"
        style="height: 135px;margin-top: 12px"
      />
    </div>
    <title-small text="不满意风险人员">
    <template v-slot:time>
      <el-select v-model.trim="typeCondition" popper-class="selectPopClass" placeholder="请选择" class="select" @change="timeChange">
        <el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </template>
    </title-small>
    <div class="f-flex white f-mean">
      <div class="f-hflex"  @click="
        $router.push(
          `/dataBoard/overview/potentialPeople?orgId=${currentLevelData.orgId}&level=${currentLevelData.orgLevel}`
        )
      ">
        <div><span class="f-pingfang">12345热线<br/>投诉人数</span></div>
        <div class="f-darkGray" ><b class="f-font34 f-yellow">{{event12345Num}}</b>人</div>
      </div>
      <div class="f-hflex"  @click="
        $router.push(
          `/dataBoard/overview/potentialPeople?orgId=${currentLevelData.orgId}&level=${currentLevelData.orgLevel}`
        )
      ">
        <div><span class="f-pingfang">满意度调查<br/>不满意人数</span></div>
        <div class="f-darkGray"><b class="f-font34 f-green">{{provinceSatisfactionNum}}</b>人</div>
      </div>
      <div class="f-hflex"  @click="
        $router.push(
          `/dataBoard/overview/potentialPeople?orgId=${currentLevelData.orgId}&level=${currentLevelData.orgLevel}`
        )
      ">
        <div><span class="f-pingfang">社区自评<br/>不满意人数</span></div>
        <div class="f-darkGray"><b class="f-font34 f-skyBlue">{{selfInspectNum}}</b>人</div>
      </div>
    </div>
  </div>
</template>
<script>
import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
import * as echarts from "echarts";
import resiCategoryMap from "@/views/business/resi-category-map.js";
export default {
  name: "jdjs",
  props: {
    currentLevelData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      orgId: this.$store.state.chooseArea.chooseName,
      report: "",
      overview: "",
      loading: false,
      rffxDate:'',
      event12345Num:"",
      provinceSatisfactionNum:"",
      selfInspectNum:"",
      typeConditionList: [
        {
          label: "本月",
          value: 1,
        },
        {
          label: "上月",
          value: 2,
        },
        {
          label: "近三月",
          value: 3,
        },
        {
          label: "近半年",
          value: 4,
        },
        {
          label: "近一年",
          value: 5,
        },
      ],
      typeCondition:5,
      endTime:"",
       startTime:"",
    };
  },
  watch: {
    currentLevelData(val) {
      if (val.orgId) {
        this.getReport(val);
        this.getData();
        this.getChartData(val);
      }
    },
  },
  mounted() {
    if (this.currentLevelData.orgId) {
      this.getReport(this.currentLevelData);
      this.getChartData();
      this.getData()
    }
  },
  components: {
    titleSmall,
  },
  methods: {
    getReport({ orgId, orgLevel }) {
      this.$http
        .get(
          "/actual/base/streetOverview/communityOverview?orgId=" +
            orgId +
            "&level=" +
            orgLevel
        )
        .then(({ data: { data } }) => {
          this.overview = data;
        });
      this.$http
        .get(
          "/actual/base/streetOverview/summaryReport?orgId=" +
            orgId +
            "&level=" +
            orgLevel
        )
        .then(({ data: { data } }) => {
          this.report = data;
        });
    },
    getChartData({ orgId, orgLevel }) {
      this.loading = true
      this.$http.get('/actual/base/resiCategory/categoryCountList?orgId=' +
            orgId +
            "&level=" +
            orgLevel
        ).then(({data: {data}}) => {
        this.initCharts(data)
      })
    },
    initCharts(data) {
      let div = document.getElementById('zdgz');
      this.myChart = echarts.init(div);
     let chartData =  data.categoryList.map((item) => {
            return {
              name: resiCategoryMap[item.categoryName] || "",
              count: item.categoryCount,
            };
      }).slice(0,8);
      let xData = chartData.map(item=>item.name);
      let yData = chartData.map(item=>item.count)
      let color = [[
        {
          offset: 0,
          color: 'rgba(0, 84, 255, 0)' // 0% 处的颜色
        },
        {
          offset: 1,
          color: 'rgba(38, 244, 248, 1)' // 100% 处的颜色
        }
      ]]
      let num = yData
      const max = Math.max(...num)
      let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100)
      var option = {
        title: {
          show: false,
          text: '',
          x: 'center',
          top: '18px',
          textStyle: {
            color: '#333333',
            fontWeight: 500,
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(13,33,71,0.5)',
          borderColor: 'rgba(143,174,252,0.6)',
          padding: 8,
          textStyle: {
            color: '#fff',
          },
          formatter: function (params) {
            var res = '<div"><p>' + params[0].name + '：'+params[0].value + '</p></div>'
            return res;
          },
        },
/*        dataZoom: [
          {
            "type": "slider",
            "start": 0,
            "end": parseInt((5 / xData.length) * 10) / 10 * 100,
            "height": 10,
            "bottom": 0,
            "showDetail": false,
            "showDataShadow": false,
            "borderColor": "transparent"
          }
        ],*/
        grid: {
          top: '18%',
          left: '2%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#323c41'
              }
            },
            axisLabel: {
              align: 'center',
              interval: 0,
              textStyle: {
                fontSize: 10,
                color: '#A3B9DA',
              },
              formatter: function (value) {
                  return value.length > 4 ? value.slice(0, 4) + '\n' + value.slice(4) : value;
              }
            },
            boundaryGap: true,
            data: xData,
          }, {
            type: 'category',
            data: xData,
            axisLine: {show: false},
            axisLabel: {
              show: false,
            },
            boundaryGap: true,
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：人',
            nameLocation: 'end',
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(4,187,255,0.18)',
                type: 'dashed'
              },
            },
            nameTextStyle: {
              color: '#A3B9DA',
              textStyle: {
                fontSize: 12
              },
              align: 'right',
              padding: [0, 5, -5, 5],
            },
            axisLabel: {
              show: true,
              color: '#A3B9DA',
              textStyle: {
                fontSize: 12
              },
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
        {
          name: "",
          type: 'bar',
          barWidth: 20,
          itemStyle: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                color[0],
                false
            )
          },
          data: yData,
        },
          {
            name: '',
            type: 'bar',
            barWidth: 40,
            barGap: '-60%',
            data: barArray,
            itemStyle: {
              normal: {
                color: 'rgba(22,153,152, 0.1)'
              }
            },
            zlevel: -1,
            xAxisIndex: 1,
          }
        ],
      };
      this.myChart.setOption(option);
      window.addEventListener("resize", () => this.myChart.resize());
      this.loading = false
    },
    getData() {
      this.loading = true;
      let {startTime,endTime } = this
      let params = {
        level: this.currentLevelData.orgLevel,
        orgId: this.currentLevelData.orgId,
        startTime,
        endTime,
      };
      this.$http
        .get(
          "/governance/satisfactionOverview/satisfactionFollowGroup?" +
            this.$paramsFormat(params)
        )
        .then(({ data: { data } }) => {
          this.event12345Num = data.event12345Num;
          this.provinceSatisfactionNum = data.provinceSatisfactionNum;
          this.selfInspectNum = data.selfInspectNum;
          this.loading = false;
        });
    },
    timeChange() {
      let startTime = "",
        endTime = "";
      if (this.typeCondition === 1) {
        startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
      }
      if (this.typeCondition === 2) {
        startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
      }
      if (this.typeCondition === 3) {
        startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
      }
      if (this.typeCondition === 4) {
        startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
      }
      if (this.typeCondition === 5) {
        startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
      }
      if (this.typeCondition === 2) {
        endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
      } else {
        endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
      }
      this.startTime = startTime;
      this.endTime = endTime;
      this.getData();
    },
  },
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped />
<style lang="scss" scoped>
/deep/ .el-input__inner {
    width: 90px !important;
    height: 24px !important;
    background: #021c49 !important;
    border: 1px solid #125aaa !important;
    border-radius: 12px !important;
    color: #a0cdff;
  }
  /deep/ .el-input__icon {
    line-height: 24px !important;
    color: #a0cdff;
  }
.f-hflex{
  width: 100px;
}
.f-flex{
  margin-top: 20px;
}
.f-darkGray{
  margin-top: 10px;
}
.event-statistics {
  margin-bottom: 27px;
}
</style>