ShibeiWorkPlatform_Frontend/src/views/modules/visual/communityGovern/resibuzz.vue

<template>
  <cpt-card>
    <div class="title">
      <img src="@/assets/img/shuju/title-tip.png" />
      <span>居民热议</span>
    </div>
    <div class="g-cpt-resi">
      <div class="g-l">
        <screen-echarts-frame class="echart-wr"
                              @myChartMethod="pieInitOk"
                              ref="pieChart"></screen-echarts-frame>

        <!-- <div class="echart-wr">
          <div class="echart-cicle"></div>
          <div id="echartOrg"
               class="echart-org"></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"></cpt-tb>

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

        </div>

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

<script>
import { Loading } from "element-ui"; //引入Loading服务
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 nextTick from "dai-js/tools/nextTick";
import { pieOption } from './resiPieOption.js'


export default {
  name: "HomeMap",
  data () {
    return {
      showNoData: false,
      timer: null,

      pieChart: '',
      pieOption: {},
      pieInitState: false,
      pieTotal: 1000,
      pieData: [
        { value: 1048, name: '城市管理', color: '#1B51FF', selected: true },
        { value: 735, name: '为民服务', color: '#00E5ED' },
        { value: 580, name: '安全监管', color: '#7800FF' },
        { value: 484, name: '民政', color: '#16D783' },
        { value: 300, name: '环境保护', color: '#FF7800' },
        { value: 1048, name: '建设管理', color: '#FFBA00' },
        { value: 735, name: '街道吹哨部门报到', color: '#FFD685' },
        { value: 580, name: '社会治安综合', color: '#2A00FF' },
        { value: 484, name: '公安交通管理', color: '#C600FF' },
        { value: 300, name: '卫生计生监管执法', color: '#FF2A00' },
        { value: 484, name: '民生', color: '#3DDA83' },
        { value: 300, name: '街道安全', color: '#FAC126' }
      ],




      demand: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "40%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "10%",
          },
        ],
        header: ["序号", "服务时间", "需求类型", "需求内容", "状态", "操作"],
        list: [],
        pageSize: 10,
        pageNo: 1,
        total: 0,
      },
    };
  },
  // mixins: [animate]
  beforeDestroy () {
    this.timer && clearInterval(this.timer)
  },
  props: {
    uid: {
      type: String,
      default: "",
      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
    },
  },

  computed: {},

  components: {
    cptCard,
    cptTb,
    screenEchartsFrame,
  },

  watch: {
    uid (id) {
      this.userId = id;
    },
    userId () {
      this.getApiData();
      window.scrollTo(0, 0);
    },
  },

  async mounted () {
    this.userId = this.uid;
    this.getApiData();

    await nextTick(100);
    this.getPie()

  },

  methods: {
    pieInitOk () {
      console.log('pie准备好了')
      this.pieInitState = true

    },
    getPie () {
      if (this.pieInitState) {
        this.getPieChart()
      } else {
        setTimeout(() => {
          this.getPie()
        }, 500)
      }
    },
    // 获取饼状图
    async getPieChart () {
      this.$refs.pieChart.clear()
      // this.$refs.pieChart.showLoading()
      // const res = await getMonthPieChart(this.shibeiAId)

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

      this.clickPie(0)

      this.pieOption.title.text = this.pieTotal
      this.pieOption.series[1].data = this.pieData

      this.$refs.pieChart.setOption(this.pieOption)

      const _that = this
      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)

    },
    getApiData () {

      this.getDemandData();
    },

    toUserInfo (uid) {
      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
    },


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

    //加载组织数据
    async getDemandData () {
      const url =
        "http://yapi.elinkservice.cn/mock/245/heart/userdemand/mydemand";
      let params = {
        userId: this.userId,
        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.demand.list = data.list.map((item) => {
          return [
            { type: "index" },
            item.wantServiceTime,
            item.content,
            item.categoryName,
            item.statusName,
            { type: "operate", list: ["查看"] },
          ];
        });
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

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