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>
      <el-cascader class="customer_cascader"
                   ref="myCascader"
                   v-model="agencyIdArray"
                   :key="iscascaderShow"
                   :options="casOptions"
                   :props="optionProps"
                   @change="handleChangeAgency"
                   clearable></el-cascader>

      <div class="customer_select">

        <el-select v-model="status"
                   :popper-append-to-body="false"
                   placeholder="请选择">
          <el-option v-for="(item,index) in stateArray"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                     @click.native="handleChangeState(index)">
          </el-option>
        </el-select>
      </div>

    </div>
    <div class="g-cpt-resi">
      <div class="g-l">
        <screen-echarts-frame class="echart-wr"
                              @myChartMethod="pieInitOk"
                              ref="pieChart"></screen-echarts-frame>

      </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 { pieOption } from './resiPieOption.js'


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

      pieChart: '',
      pieOption: {},
      pieInitState: false,
      pieTotal: 0,
      colorArray: [],
      pieData: [
        { count: 1048, categoryName: '城市管理', color: '#1B51FF', selected: true },
        { count: 735, categoryName: '为民服务', color: '#00E5ED' },
        { count: 580, categoryName: '安全监管', color: '#7800FF' },
        { count: 484, categoryName: '民政', color: '#16D783' },
        { count: 300, categoryName: '环境保护', color: '#FF7800' },
        { count: 1048, categoryName: '建设管理', color: '#FFBA00' },
        { count: 735, categoryName: '街道吹哨部门报到', color: '#FFD685' },
        { count: 580, categoryName: '社会治安综合', color: '#2A00FF' },
        { count: 484, categoryName: '公安交通管理', color: '#C600FF' },
        { count: 300, categoryName: '卫生计生监管执法', color: '#FF2A00' },
        { count: 484, categoryName: '民生', color: '#3DDA83' },
        { count: 300, categoryName: '街道安全', color: '#FAC126' }
      ],
      //voting 已转项目：shift_project 已关闭：closed，全部：all
      stateArray: [
        {
          label: '全部',
          value: 'all'
        },
        {
          label: '表决中',
          value: 'voting'
        },
        {
          label: '已转项目',
          value: 'shift_project'
        },
        {
          label: '已关闭',
          value: 'closed'
        },
      ],

      status: 'all',
      orgId: '',
      demand: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "5%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "20%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "5%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "5%",
          },
          {
            align: "center",
            width: "5%",
          },
          {
            align: "center",
            width: "10%",
          },
        ],
        header: ["序号", "议题标题", "处理意见", "分类", "状态", "创建时间", "发起人", "已表态/应表态", "支持", "反对", "操作"],
        list: [],
        pageSize: 10,
        pageNo: 1,
        total: 0,
        pieChartS: null
      },

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

      optionProps: {
        multiple: false,
        value: 'agencyId',
        label: 'agencyName',
        children: 'subAgencyList',
        checkStrictly: true
      },

    };
  },
  // mixins: [animate]
  beforeDestroy () {
    this.timer && clearInterval(this.timer)
  },

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

  methods: {

    async getApiData () {
      await this.getAgencylist()//获取组织级别
      await this.getPie()
      await this.getTable();
    },

    async getAgencylist () {
      const url = '/gov/org/customeragency/agencylist'
      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'

      const params = {
        customerId: '613cc61a6b8ce4c70d21bd413dac72cc'
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        ++this.iscascaderShow
        this.casOptions = []
        this.agencyIdArray.length = []

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

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

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

      },
      getPie () {
        if (this.pieInitState) {
          this.getPieChart()
        } else {
          setTimeout(() => {
            this.getPie()
          }, 500)
        }
      },
      // 获取饼状图
      async getPieChart () {
        this.$refs.pieChart.clear()
        this.pieTotal = 0
        const _that = this
        // this.$refs.pieChart.showLoading()
        //  const url ="/gov/issue/issue/resibuzz-leftpiechart";
        const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz-leftpiechart";
        let params = {
          orgId: this.orgId,
        };

        const { data, code, msg } = await requestPost(url, params);
        // 获取pieChart配置
        this.pieOption = pieOption(this.pieChartS)
        this.pieOption.title.text = this.pieTotal
        this.pieOption.series[1].data = this.pieData

        if (code === 0) {
          // 获取pieChart配置
          this.pieOption = pieOption()
          if (data && data.length > 0) {
            // this.pieData = data

          } else {
            this.pieData = [{ count: 0, categoryName: '无分类', color: '#00E5ED' }]
          }

          this.pieData.forEach(item => {
            item.name = item.categoryName
            item.value = item.count
            this.colorArray.push(item.color)
            this.pieTotal = this.pieTotal + item.value

          });


          this.pieOption.title.text = this.pieTotal
          this.pieOption.series[1].itemStyle = {
            color: function (params) {
              return _that.colorArray[params.dataIndex]
            }
          }
          this.clickPie(0)

          let fun = function (params) {
            _that.clickPie(params.dataIndex)
          }
          this.$refs.pieChart.handleClick(fun)
        } else {
          this.$message.error(msg);
        }


      },

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

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

            };
            console.log('zhilma')
            // element.labelLayout = (params) => {
            //   const isLeft = params.labelRect.x < this.pieChartS.getWidth() / 2;
            //   const points = params.labelLinePoints;
            //   console.log('isLeft', isLeft, points)
            //   // Update the end point.
            //   points[2][0] = isLeft
            //     ? params.labelRect.x
            //     : params.labelRect.x + params.labelRect.width;
            //   return {
            //     labelLinePoints: points
            //   };
            // }

          } 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)

      },

      handleChangeState (index) {
        this.getTable()
      },

      handleChangeAgency (value) {
        console.log(value)
        this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
        this.orgId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
        console.log(this.agencyIdArray)
      },

      //加载组织数据
      async getTable () {
        // const url = "/gov/issue/issue/resibuzz";
        const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz";
        let params = {
          status: this.status,
          orgId: this.orgId,
          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.issueTitle,
              item.suggestion,
              item.categoryName,
              item.status,
              item.createdTime,
              item.issueOriginator,
              item.voteAccount,
              item.supportCount,
              item.oppositionCount,
              { type: "operate", list: ["查看"] },
            ];
          });
        } else {
          this.$message.error(msg);
        }
      },

      handlePageNoChange_demand (val) {
        this.demand.pageNo = val;
        this.getTable();
      },
      toUserInfo (uid) {
        this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
      },
    },
    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);
      },
    },
  };
</script>

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

<style lang=scss >
.customer_select {
  /* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }
  /deep/ input::-moz-input-placeholder {
    color: #fff;
  }
  /deep/ input::-ms-input-placeholder {
    color: #fff;
  }

  /* 修改的是el-input的样式 */
  /* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */
  /* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    background-color: #08164d00;
    color: #fff;
    border: 0px;
    border-radius: 0px;
    text-align: left;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #ffffff;
    display: flex;
  }

  /* el-input聚焦的时候 外层的border会有一个样式 */
  /deep/ .el-select .el-input.is-focus .el-input__inner {
    border: 0px;
  }

  /* 修改的是el-input上下的小图标的颜色 */
  /deep/ .el-select .el-input .el-select__caret::before {
    color: #fff;
    content: "";
    background: url("../../../../assets/img/xiala.png") center center no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 修改总体选项的样式 最外层 */
  /deep/ .el-select-dropdown {
    background-color: #08164d;
    margin: 0px;
    border: 0px;
    border-radius: 0px;
  }

  /* 修改选项整体的样式 */
  /deep/ .el-select-dropdown__list {
    padding: 6px 0 20px 0;
  }
  /* 修改单个的选项的样式 */
  /deep/ .el-select-dropdown__item {
    background-color: transparent;
    color: #fff;
  }

  /* item选项的hover样式 */
  /deep/ .el-select-dropdown__item.hover,
  /deep/ .el-select-dropdown__item:hover {
    color: #409eff;
  }

  /* 修改的是下拉框选项内容上方的尖角 */
  /deep/ .el-popper .popper__arrow,
  .el-popper .popper__arrow::after {
    display: none;
  }
}