epmet-oper-gov/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue

<template>
  <cpt-card>
    <div class="title">
      <img src="@/assets/img/shuju/title-tip.png" />
      <span>事件处理分析</span>

      <div class="search">
        <div class="second-select cascader">
          <el-cascader class="customer_cascader"
                       ref="myCascader"
                       v-model="agencyIdArray"
                       :key="iscascaderShow"
                       :options="casOptions"
                       :props="optionProps"
                       :show-all-levels="false"
                       @change="handleChangeAgency"></el-cascader>
        </div>
        <div class="second-select">
          <el-select v-model="dataType"
                     :popper-append-to-body="false"
                     placeholder="请选择">
            <el-option v-for="(item,index) in dateArray"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
                       @click.native="handleChangeState(index)">
            </el-option>
          </el-select>
        </div>

        <div v-if="dataType==='5'"
             class="second-select range-data">

          <el-date-picker v-model="timeRange"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          prefix-icon="el-icon-caret-bottom"
                          format="yyyy-MM-dd"
                          value-format="yyyyMMdd"
                          @change="handleSelectChange">
          </el-date-picker>
        </div>
      </div>

    </div>
    <div class="g-cpt-resi">
      <div class="g-l">
        <div class="l_top">

          <div v-if="!pieNoData && !dataLoading"
               class="g-pie">
            <screen-echarts-frame class="echart-wr"
                                  @myChartMethod="pieInitOk"
                                  ref="pieChart"></screen-echarts-frame>

            <div class="pie-legend">
              <div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
                   v-for="(item,index) in legendArray"
                   :key="index">
                <div class="item_name">{{item.name}}</div>
                <img :src="item.url" />
                <div class="item_num">
                  <span class="item_count">{{item.count}}</span>
                  <span class="item_percent">{{item.percent}}</span>
                </div>
              </div>
            </div>

          </div>
          <screen-nodata class="nodata"
                         v-if="pieNoData&& !dataLoading"></screen-nodata>
          <div class="table-status"
               v-if="dataLoading">
            <screen-loading>加载中</screen-loading>
          </div>

        </div>
        <div class="l_bottom">
          <div class="bottom_label">月度新增事件统计</div>
          <screen-echarts-frame v-if="!lineNoData&& !dataLoading"
                                class="echart-line"
                                @myChartMethod="lineInitOk"
                                ref="lineChart"></screen-echarts-frame>
          <screen-nodata class="nodata"
                         v-if="lineNoData&& !dataLoading"></screen-nodata>
          <div class="table-status"
               v-if="dataLoading">
            <screen-loading>加载中</screen-loading>
          </div>
        </div>
      </div>
      <div class="g-r">
        <div class="m-tb">

          <div class="tb">
            <cpt-tb :col-list="demand.colList"
                    :loading="demand.loading"
                    :header="demand.header"
                    :list="demand.list"
                    @operate="toIssueInfo"></cpt-tb>

          </div>
          <div class="m-pagination">
            <el-pagination :current-page="demand.pageNo"
                           :page-size="demand.pageSize"
                           :total="demand.total"
                           background
                           layout="prev, pager, next,total"
                           @current-change="handlePageNoChange_demand">
            </el-pagination>
          </div>
        </div>

      </div>
    </div>
  </cpt-card>
</template>

<script>

import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";
import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";

import ScreenLoading from "@/views/modules/visual/components/screen-loading";
import ScreenNodata from "@/views/modules/visual/components/screen-nodata";

import { pieOption } from './processPieOption.js'
import { lineOption } from './processLineOption.js'
import nextTick from 'dai-js/tools/nextTick'


export default {
  name: "shijianchulifenxi",
  data () {
    return {
      dataLoading: true,
      pieNoData: false,
      lineNoData: false,
      isfirstInit: true,//记录地图是否第一次加载

      projectTotal: 0,
      dateIncr: 0,
      monthIncr: 0,

      lineChart: '',
      lineOption: {},
      lineInitState: false,
      lineColorArray: [],
      lineData: [],
      lineXaxis: [],
      lineSeriesData: [],

      pieChartS: null,
      pieChart: '',
      pieOption: {},
      pieInitState: false,
      pieTotal: 0,
      colorArray: [],
      pieData: [],

      legendArray: [
        {
          name: '未结案',
          count: 0,
          percent: '0%',
          url: require('@/assets/img/shuju/measure/huang@2x.png')
        },
        {
          name: '已结案',
          count: 0,
          percent: '0%',
          url: require('@/assets/img/shuju/measure/lv@2x.png')
        }
      ],

      timeRange: [],
      agencyId: '',
      dataType: '5',

      agencyInfo: {},

      casOptions: [],
      agencyIdArray: [],
      customerList: [],
      iscascaderShow: 0,

      optionProps: {
        multiple: false,
        value: 'agencyId',
        label: 'agencyName',
        children: 'subAgencyList',
        checkStrictly: true
      },
      dateArray: [
        {
          label: '近一年',
          value: '1'
        },
        {
          label: '近一个月',
          value: '2'
        },
        {
          label: '近三个月',
          value: '3'
        },
        {
          label: '近半年',
          value: '4'
        },
        {
          label: '不限',
          value: '5'
        },
      ],

      tableList: [],
      demand: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "5%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "25%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "5%",
          },

          {
            align: "center",
            width: "10%",
          },
        ],
        header: ["序号", "所属网格", "事件内容", "上报渠道", "报事人", "手机号", "状态", "操作"],
        list: [],
        pageSize: 10,
        pageNo: 1,
        total: 0,
      },

    };
  },
  // mixins: [animate]
  beforeDestroy () {

  },
  async created () {

  },

  async mounted () {
    this.dataLoading = true
    //初始化时间、各组件
    this.initData()
    await this.getAgencylist()//获取组织级别
    //获取服务器数据
    await this.getProjectTotal()
    await this.getLineChart()
    await this.getTable()
    this.dataLoading = false

    this.assignData()

  },

  methods: {
    async getApiData () {
      await this.getProjectTotal()
      await this.getLineChart()
      await this.getTable();

      this.assignData()

    },

    async handleChangeState (index) {

      await this.getApiData()
      this.assignPieChart()

    },

    assignData () {
      this.getPie()
      this.getLine()
    },

    handleSelectChange (value) {
      console.log(value)
      this.getApiData();
    },

    // 获取当前登录人员信息及组织信息
    async getAgencylist () {
      // const url = "/gov/org/customeragency/agencygridtree";
      const url = '/gov/org/customeragency/agencylist'

      let params = {};

      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {

        this.agencyInfo = data
        this.agencyId = this.agencyInfo.agencyId
        if (!this.agencyInfo.latitude) {
          this.agencyInfo.latitude = 36.072227
        }
        if (!this.agencyInfo.longitude) {
          this.agencyInfo.longitude = 120.389455
        }
        if (!this.agencyInfo.level) {
          this.agencyInfo.level = 'street'
        }

        //组织级联数据
        ++this.iscascaderShow
        this.casOptions = []
        this.agencyIdArray.length = []

        if (data) {
          this.casOptions.push(data)
          this.agencyIdArray.push(this.agencyId)
        }

      } else {
        this.$message.error(msg);
      }

    },

    //加载项目
    async getProjectTotal () {
      if (this.$refs.pieChart) {
        this.$refs.pieChart.showLoading()
        this.$refs.pieChart.clear()
      }

      const url = "/data/aggregator/project/projecttotal";
      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projecttotal";
      let params = {
        agencyId: this.agencyId,
        dateId: this.dateIdShow,
      };

      const { data, code, msg } = await requestPost(url, params);
      if (this.$refs.pieChart) {
        this.$refs.pieChart.hideLoading()
      }
      if (code === 0) {
        this.projectTotal = data.projectTotal
        this.dateIncr = data.dateIncr
        this.monthIncr = data.monthIncr
        this.legendArray = [
          {
            name: '未结案',
            count: data.pendingTotal,
            percent: data.pendingRatio,
            url: require('@/assets/img/shuju/measure/huang@2x.png')
          },
          {
            name: '已结案',
            count: data.closedTotal,
            percent: data.closedRatio,
            url: require('@/assets/img/shuju/measure/lv@2x.png')
          }
        ]

        this.pieData = [
          {
            name: "未结案",
            value: data.pendingTotal,
          },
          {
            name: "已结案",
            value: data.closedTotal,
          }
        ]

      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getTable () {
      const url = "/gov/issue/issue/resibuzz";
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz";
      let params = {
        status: 'pending',
        orgId: this.orgId,
        orgType: this.orgType,
        pageNo: this.demand.pageNo,
        pageSize: this.demand.pageSize,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.demand.loading = false;

      if (code === 0) {

        this.demand.total = data.total;
        this.tableList = data.list
        this.demand.list = data.list.map((item) => {
          return [
            item.sort ? item.sort : '--',
            item.issueTitle ? item.issueTitle : '',
            item.suggestion ? item.suggestion : '',
            item.categoryName.join(','),
            item.status ? item.status : '',
            item.createdTime ? item.createdTime : '',
            item.issueOriginator ? item.issueOriginator : '',
            item.voteAccount ? item.voteAccount : '',
            item.supportCount ? item.supportCount : 0,
            item.oppositionCount ? item.oppositionCount : 0,
            { type: "operate", list: ["查看"] },
          ];
        });
      } else {
        this.$message.error(msg);
      }
    },

    handlePageNoChange_demand (val) {
      this.demand.pageNo = val;
      this.getTable();
    },


    async toIssueInfo (index) {
      const { tableList } = this;
      this.issueId = tableList[index].issueId
      this.showIssue = true

    },

    pieInitOk (dom) {
      this.pieChartS = dom
      this.pieInitState = true
    },
    lineInitOk () {

      this.lineInitState = true

    },
    getLine () {
      if (this.lineInitState) {
        this.assignLineChart()
      } else {
        setTimeout(() => {
          this.getLine()
        }, 500)
      }
    },
    // 获取折线图
    async getLineChart () {
      if (this.$refs.lineChart) {
        this.$refs.lineChart.clear()
        this.$refs.lineChart.showLoading()
      }
      const _that = this
      // this.$refs.pieChart.showLoading()
      const url = "/data/aggregator/project/projectmonthincr";
      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectmonthincr";
      let params = {
        agencyId: this.agencyId,
        dateId: this.dateIdShow,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        // 获取pieChart配置

        this.lineXaxis = []
        this.lineSeriesData = []
        if (data && data.length > 0) {
          this.lineNoData = false
          data.forEach(item => {
            this.lineXaxis.push(item.type)
            this.lineSeriesData.push(item.value)
          });
          this.lineData = data

        } else {
          this.lineNoData = true
        }

        if (this.$refs.lineChart) {
          this.$refs.lineChart.hideLoading()
        }

      } else {
        this.$message.error(msg);
      }


    },

    assignLineChart () {

      this.lineOption = lineOption()
      this.$refs.lineChart.setOption(this.lineOption, true)
      this.$refs.lineChart.setOption({
        xAxis: { data: this.lineXaxis },
        series: [
          { data: this.lineSeriesData },

        ]
      }, true)
    },

    getPie () {
      if (this.pieInitState) {
        this.assignPieChart()
      } else {
        setTimeout(() => {
          this.getPie()
        }, 500)
      }
    },
    // 获取饼状图
    async assignPieChart () {

      this.pieTotal = 0
      let maxIndex = 0
      let maxValue = this.pieData[0].value
      const _that = this

      // 获取pieChart配置
      this.pieOption = pieOption(this.pieChartS)

      this.pieData.forEach((item, index) => {
        this.pieTotal = this.pieTotal + item.value
        if (item.value > maxValue) {
          maxValue = item.value
          maxIndex = index
          item.selected = true
        } else if (index !== 0) {
          item.selected = false
        }
      });

      this.pieOption.title.text = this.pieTotal

      this.clickPie(maxIndex)

      let fun = function (params) {
        _that.clickPie(params.dataIndex)
      }
      this.$refs.pieChart.handleClick(fun)

    },

    clickPie (seriesIndex) {
      this.pieData.forEach((element, index) => {
        if (index === seriesIndex) {
          element.label = {
            show: true,

          };
          element.labelLine = {
            show: true,
            lineStyle: {
              opacity: 1,
            }

          };

        } else {
          element.label = {
            show: false,

          };
          element.labelLine = {
            show: false,
            lineStyle: {
              opacity: 0,
              color: 'rgba(255,255,255,0)'
            }
          };
        }
      });
      this.pieOption.series[1].data = this.pieData
      // this.$refs.pieChart.hideLoading()
      this.$refs.pieChart.setOption(this.pieOption)
    },



    handleChangeAgency (value) {

      let orgArray = []
      let key = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
      if (key) {
        orgArray = key.split('-')
        this.orgId = orgArray[0]
        this.orgType = orgArray[1] === 'grid' ? 'grid' : 'agency'
      } else {
        this.orgId = ''
        this.orgType = ''
      }

      this.getApiData()



      // this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
      // this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
      // this.getApiData()
      // console.log(this.agencyIdArray)
    },

    //初始化时间
    initData () {
      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
      var nowdate = new Date(time); // 获取的是前一天日期
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth() + 1 < 10 ? "0" + (nowdate.getMonth() + 1) : nowdate.getMonth() + 1;
      var d = nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate();
      this.dateIdShow = y + '-' + m + '-' + d;
    },

    toUserInfo (uid) {
      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
    },
  },
  props: {
    uid: {
      type: String,
      default: "",
      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
    },
  },

  computed: {},

  components: {
    cptCard,
    cptTb,
    screenEchartsFrame,

    ScreenLoading,
    ScreenNodata
  },

  watch: {
    dateIdShow () {

      // let dataArray = this.dateIdShow.split('-')
      // this.dateId = dataArray.join('')
    },
    uid (id) {
      this.userId = id;
    },
    userId () {
      this.getApiData();
      window.scrollTo(0, 0);
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/shijianchulifenxi.scss"
  scoped
></style>
<style
  lang="scss"
  src="@/assets/scss/modules/visual/search_1.scss"
  scoped
></style>