From 3b6260fcab5c784691d64b92e6ed9cf5c0b08390 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Wed, 8 Dec 2021 16:41:28 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=86=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scss/modules/visual/processAnalyze.scss   | 184 +++++++
 src/assets/scss/modules/visual/resibuzz.scss  |  22 +
 .../visual/communityGovern/processAnalyze.vue | 477 ++++++++++++++++++
 .../communityGovern/processLineOption.js      |  22 +
 .../communityGovern/processPieOption.js       | 160 ++++++
 .../visual/communityGovern/resiPieOption.js   |  20 +-
 .../visual/communityGovern/resibuzz.vue       | 383 ++++++++++----
 7 files changed, 1172 insertions(+), 96 deletions(-)
 create mode 100644 src/assets/scss/modules/visual/processAnalyze.scss
 create mode 100644 src/views/modules/visual/communityGovern/processLineOption.js
 create mode 100644 src/views/modules/visual/communityGovern/processPieOption.js

diff --git a/src/assets/scss/modules/visual/processAnalyze.scss b/src/assets/scss/modules/visual/processAnalyze.scss
new file mode 100644
index 00000000..6aaea54c
--- /dev/null
+++ b/src/assets/scss/modules/visual/processAnalyze.scss
@@ -0,0 +1,184 @@
+@import '../../c/config';
+@import '../../c/function';
+@import './c/common';
+
+.title {
+  padding: 10px;
+  font-size: 22px;
+  font-family: PingFang SC;
+  font-weight: 800;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  img {
+    display: block;
+    margin-right: 5px;
+  }
+  span {
+    display: block;
+  }
+  .customer_cascader {
+    margin-left: 10px;
+    width: 280px;
+  }
+
+  .customer_select {
+    margin-left: 10px;
+    display: flex;
+    justify-content: flex-start;
+
+    > span {
+      width: auto;
+      font-size: 22px;
+      font-family: PingFang SC;
+      font-weight: 800;
+      color: #ffffff;
+      line-height: 34px;
+    }
+  }
+}
+
+.g-cpt-resi {
+  display: flex;
+  flex-direction: row;
+  // flex-wrap: wrap;
+  // justify-content: center;
+  height: calc(100vh - 170px);
+
+  .g-l {
+    flex-shrink: 0;
+    width: 700px;
+    height: calc(100vh - 230px);
+
+    .l_top {
+      height: 385px;
+      display: flex;
+      .g-count {
+        width: 100px;
+      }
+      .g-pie {
+      }
+    }
+    .l_bottom {
+      height: calc(100vh - 230px - 385px);
+      margin-top: 20px;
+      > span {
+        font-size: 18px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #ffffff;
+      }
+      .echart-line {
+        margin-top: 10px;
+      }
+    }
+  }
+
+  .g-r {
+    text-align: center;
+    margin: 40px 19px 20px;
+    width: calc(100vw - 60px - 800px);
+    height: calc(100vh - 160px - 20px);
+  }
+}
+.g-count {
+  margin-top: 104px;
+  margin-left: 52px;
+  .t_count {
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    opacity: 0.76;
+  }
+  .c_count {
+    font-size: 48px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .t_yestoday {
+    margin-top: 59px;
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    opacity: 0.76;
+    > span {
+      margin-left: 18px;
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #f42800;
+    }
+  }
+  .t_today {
+    margin-top: 12px;
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    opacity: 0.76;
+    > span {
+      margin-left: 18px;
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #3edd7f;
+    }
+  }
+}
+
+.g-r {
+  .tb {
+    position: relative;
+    height: calc(100vh - 220px);
+    overflow-y: auto;
+    @include scrollBar;
+
+    .m-pagination {
+      position: absolute;
+      box-sizing: border-box;
+      right: 0;
+      bottom: 0;
+
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: flex-end;
+
+      /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        background: #0266d1;
+        color: #000d3f;
+      }
+
+      /deep/ .el-pagination .el-pager li {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-prev {
+        background: #002e74;
+      }
+
+      /deep/ .el-pagination .btn-next {
+        background: #002e74;
+      }
+    }
+  }
+}
+
+.echart-wr {
+  margin-left: 30px;
+  // margin-top: 100px;
+  text-align: center;
+  position: relative;
+  width: 500px;
+  height: 100%;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 90%;
+  }
+}
diff --git a/src/assets/scss/modules/visual/resibuzz.scss b/src/assets/scss/modules/visual/resibuzz.scss
index d4f13bf0..a5a03d3e 100644
--- a/src/assets/scss/modules/visual/resibuzz.scss
+++ b/src/assets/scss/modules/visual/resibuzz.scss
@@ -10,6 +10,7 @@
   color: #ffffff;
   display: flex;
   align-items: center;
+  position: relative;
 
   img {
     display: block;
@@ -18,6 +19,27 @@
   span {
     display: block;
   }
+  .customer_cascader {
+    margin-left: 10px;
+    width: 280px;
+  }
+
+  .customer_select {
+    position: absolute;
+    right: 20px;
+    top: 30px;
+    display: flex;
+    justify-content: flex-start;
+
+    > span {
+      width: auto;
+      font-size: 22px;
+      font-family: PingFang SC;
+      font-weight: 800;
+      color: #ffffff;
+      line-height: 34px;
+    }
+  }
 }
 
 .g-cpt-resi {
diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue
index e69de29b..d5f48258 100644
--- a/src/views/modules/visual/communityGovern/processAnalyze.vue
+++ b/src/views/modules/visual/communityGovern/processAnalyze.vue
@@ -0,0 +1,477 @@
+<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">
+        <div class="l_top">
+          <div class="g-count">
+            <div class="t_count">项目总数</div>
+            <div class="c_count">{{projectTotal}}</div>
+            <div class="t_yestoday">昨日
+              <span class="c_yestoday">{{dateIncr}}</span>
+            </div>
+            <div class="t_today">上月
+              <span class="c_today">{{monthIncr}}</span>
+            </div>
+          </div>
+          <div class="g-pie">
+            <screen-echarts-frame class="echart-wr"
+                                  @myChartMethod="pieInitOk"
+                                  ref="pieChart"></screen-echarts-frame>
+          </div>
+        </div>
+        <div class="l_bottom">
+          <span>近12月新增项目数折线图</span>
+          <screen-echarts-frame class="echart-line"
+                                @myChartMethod="lineInitOk"
+                                ref="lineChart"></screen-echarts-frame>
+        </div>
+      </div>
+      <div class="g-r">
+        <div class="m-tb">
+
+          <div class="tb">
+
+          </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 './processPieOption.js'
+import { lineOption } from './processLineOption.js'
+
+
+export default {
+  name: "HomeMap",
+  data () {
+    return {
+      showNoData: false,
+      timer: null,
+
+      projectTotal: 0,
+      dateIncr: 0,
+      monthIncr: 0,
+
+      lineChart: '',
+      lineOption: {},
+      lineInitState: false,
+      lineColorArray: [],
+      lineData: [820, 932, 901, 934, 1290, 1330, 1320],
+
+      pieChart: '',
+      pieOption: {},
+      pieInitState: false,
+      pieTotal: 0,
+      colorArray: [],
+      pieData: [
+        { value: 1048, name: '未结案', color: '#FAC126', selected: true },
+        { value: 735, name: '已结案', color: '#3DDA83' },
+
+      ],
+      //voting 已转项目：shift_project 已关闭：closed，全部：all
+      stateArray: [
+        {
+          label: '全部',
+          value: 'all'
+        },
+        {
+          label: '表决中',
+          value: 'voting'
+        },
+        {
+          label: '已转项目',
+          value: 'shift_project'
+        },
+        {
+          label: '已关闭',
+          value: 'closed'
+        },
+      ],
+
+      status: 'all',
+      agencyId: '',
+
+      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.getProjectTotal()
+      await this.getLine()
+      // 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)
+      }
+    },
+
+    //加载项目
+    async getProjectTotal () {
+      // const url = "/data/aggregator/project/projecttotal";
+      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projecttotal";
+      let params = {
+        agencyId: '',
+        dateId: '',
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+
+      if (code === 0) {
+        this.projectTotal = data.projectTotal
+        this.dateIncr = data.dateIncr
+        this.monthIncr = data.monthIncr
+
+        this.pieData = [
+          {
+            name: "未结案",
+            value: data.pendingTotal,
+            selected: true,
+
+          },
+          {
+            name: "已结案",
+            value: data.pendingTotal
+          }
+        ]
+
+        this.getPie()
+
+
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    pieInitOk () {
+      console.log('pie准备好了')
+      this.pieInitState = true
+
+    },
+    lineInitOk () {
+      console.log('pie准备好了')
+      this.lineInitState = true
+
+    },
+    getLine () {
+      if (this.lineInitState) {
+        this.getLineChart()
+      } else {
+        setTimeout(() => {
+          this.getLine()
+        }, 500)
+      }
+    },
+    // 获取折线图
+    async getLineChart () {
+      this.$refs.lineChart.clear()
+
+      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 = {
+        agencyId: this.agencyId,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        // 获取pieChart配置
+        this.lineOption = lineOption()
+        if (data && data.length > 0) {
+          // this.lineData = data
+
+        } else {
+          this.lineData = [0]
+        }
+
+        debugger
+        this.$refs.lineChart.setOption(this.lineOption)
+      } else {
+        this.$message.error(msg);
+      }
+
+
+    },
+
+    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()
+
+      // 获取pieChart配置
+      this.pieOption = pieOption()
+
+      this.pieData.forEach(item => {
+        this.pieTotal = this.pieTotal + item.value
+
+      });
+
+
+      this.pieOption.title.text = this.pieTotal
+
+      this.clickPie(0)
+
+      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)
+    },
+
+    handleChangeState (index) {
+      // this.getTable()
+    },
+
+    handleChangeAgency (value) {
+      console.log(value)
+      this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
+      this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
+      console.log(this.agencyIdArray)
+    },
+
+
+
+    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/processAnalyze.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;
+  }
+}
diff --git a/src/views/modules/visual/communityGovern/processLineOption.js b/src/views/modules/visual/communityGovern/processLineOption.js
new file mode 100644
index 00000000..0d094b5c
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/processLineOption.js
@@ -0,0 +1,22 @@
+
+export function lineOption () {
+
+  return {
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+        areaStyle: {}
+      }
+    ]
+
+  }
+}
diff --git a/src/views/modules/visual/communityGovern/processPieOption.js b/src/views/modules/visual/communityGovern/processPieOption.js
new file mode 100644
index 00000000..a58528b7
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/processPieOption.js
@@ -0,0 +1,160 @@
+
+export function pieOption () {
+const center= ['50%', '200px']
+  return {
+    title: {
+      text: '0',
+      top: 170,
+      left: 'center',
+      textStyle: {
+        width: '100%',
+        fontSize: 32,
+        color: '#FFFFFF',
+        fontWeight: 400
+      },
+      itemGap: 5,
+      subtext: '总数',
+      subtextStyle: {
+        fontSize: 20,
+        color: '#fff',
+        fontWeight: 400
+      }
+    },
+    tooltip: {
+      show: false
+    },
+    legend: {
+      top: 350,
+      bottom: 0,
+      itemWidth: 20,
+      itemHeight: 10,
+      textStyle: {
+        color: '#D2E7FF',
+        fontSize: 16,
+        lineHeight: 20,
+      },
+    
+    },
+    series: [
+      // 外侧圆环
+      {
+        type: 'pie',
+        // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+        startAngle: 0,
+        hoverAnimation: false,
+        // tooltip: {
+        // },
+        center: center,
+        radius: ['58%', '58.3%'],
+        label: {
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [{
+          value: 360,
+          itemStyle: {
+            normal: {
+              color: 'rgba(40, 101, 250, 0)',
+              width:0,
+              borderColor: 'rgba(40, 101, 250, 0.5)',
+              borderWidth: 1,
+              borderType: 'dotted'
+            }
+          }
+        }
+        ]
+      },
+
+      // 突出的
+      {
+        hoverAnimation: false,
+        // name: 'Access From',
+        type: 'pie',
+        center: center,
+        radius: ['35%', '48%'],
+        avoidLabelOverlap: false,
+        // top: top + '%',
+        // height: '80%',
+        selectedMode: 'single',
+        left: 'center',
+        width: 400,
+        label: {
+           position: 'outer',
+          // alignTo: 'edge',
+          formatter: '{a|{c}}\n\n{name|{b}}',
+          // minMargin: 100,
+          // edgeDistance: 0,
+          // lineHeight: 20,
+          color: '#fff',
+          fontSize: 12,
+           distanceToLabelLine: -60,
+          rich: {
+            a: {
+              fontSize: '30px',
+              color: ' #00F5FE',
+              
+            },
+            b: {
+              lineHeight: 0,
+              fontSize: '20px',
+              color: ' #FFFFFF'
+
+            }
+          }
+        },
+        labelLine: {
+          smooth: 0.2,
+          length: 30,
+          length2: 90
+        },
+        itemStyle: {
+           color:function(params) {
+          //自定义颜色
+          var colorList = [ '#FAC126', '#3DDA83'];
+            return colorList[params.dataIndex]
+          }
+        },
+        data: [],
+
+      },
+         // 中间圆环
+         {
+          type: 'pie',
+          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+          startAngle: 0,
+          hoverAnimation: false,
+          center: center,
+          // tooltip: {
+          // },
+          radius: ['0%', '25%'],
+          label: {
+          
+              show: false
+           
+          },
+          labelLine: {
+           
+              show: false
+          
+          },
+          data: [{
+            value: 360,
+            itemStyle: {
+              normal: {
+                color: 'rgba(8, 37, 134, 1)',
+            
+              }
+            }
+          }
+          ]
+        },
+    ]
+
+  }
+}
diff --git a/src/views/modules/visual/communityGovern/resiPieOption.js b/src/views/modules/visual/communityGovern/resiPieOption.js
index 58d04e13..f9493b84 100644
--- a/src/views/modules/visual/communityGovern/resiPieOption.js
+++ b/src/views/modules/visual/communityGovern/resiPieOption.js
@@ -113,17 +113,15 @@ const center= ['50%', '250px']
           length: 30,
           length2: 90
         },
-        // itemStyle: {
-        //   normal:{
-        //       color:function(params) {
-        //       //自定义颜色
-        //       var colorList = [          
-        //               '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
-        //           ];
-        //           return colorList[params.dataIndex]
-        //        }
-        //   }
-        // },
+        itemStyle: {
+          // color:function(params) {
+          // //自定义颜色
+          // var colorList = [          
+          //       '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
+          //   ];
+          //   return colorList[params.dataIndex]
+          // }
+        },
         data: [],
 
       },
diff --git a/src/views/modules/visual/communityGovern/resibuzz.vue b/src/views/modules/visual/communityGovern/resibuzz.vue
index c286a396..858ecf93 100644
--- a/src/views/modules/visual/communityGovern/resibuzz.vue
+++ b/src/views/modules/visual/communityGovern/resibuzz.vue
@@ -3,6 +3,29 @@
     <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">
@@ -10,12 +33,6 @@
                               @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">
@@ -50,7 +67,7 @@ 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'
 
 
@@ -64,43 +81,66 @@ export default {
       pieChart: '',
       pieOption: {},
       pieInitState: false,
-      pieTotal: 1000,
+      pieTotal: 0,
+      colorArray: [],
       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' }
+        { 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: "15%",
+            width: "20%",
           },
           {
             align: "center",
-            width: "15%",
+            width: "10%",
           },
           {
             align: "center",
-            width: "40%",
+            width: "5%",
           },
           {
             align: "center",
@@ -110,55 +150,85 @@ export default {
             align: "center",
             width: "10%",
           },
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "5%",
+          },
+          {
+            align: "center",
+            width: "5%",
+          },
+          {
+            align: "center",
+            width: "10%",
+          },
         ],
-        header: ["序号", "服务时间", "需求类型", "需求内容", "状态", "操作"],
+        header: ["序号", "议题标题", "处理意见", "分类", "状态", "创建时间", "发起人", "已表态/应表态", "支持", "反对", "操作"],
         list: [],
         pageSize: 10,
         pageNo: 1,
         total: 0,
       },
+
+      casOptions: [],
+      agencyIdArray: [],
+      customerList: [],
+      iscascaderShow: 0,
+
+      optionProps: {
+        multiple: false,
+        value: 'agencyId',
+        label: 'agencyName',
+        children: 'subAgencyList',
+        checkStrictly: true
+      },
+
     };
   },
   // mixins: [animate]
   beforeDestroy () {
     this.timer && clearInterval(this.timer)
   },
-  props: {
-    uid: {
-      type: String,
-      default: "",
-      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
-    },
-  },
 
-  computed: {},
-
-  components: {
-    cptCard,
-    cptTb,
-    screenEchartsFrame,
+  async mounted () {
+    this.userId = this.uid;
+    this.getApiData();
   },
 
-  watch: {
-    uid (id) {
-      this.userId = id;
-    },
-    userId () {
-      this.getApiData();
-      window.scrollTo(0, 0);
+  methods: {
+
+    async getApiData () {
+      await this.getAgencylist()//获取组织级别
+      await this.getPie()
+      await this.getTable();
     },
-  },
 
-  async mounted () {
-    this.userId = this.uid;
-    this.getApiData();
+    async getAgencylist () {
+      const url = '/gov/org/customeragency/agencylist'
+      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'
 
-    await nextTick(100);
-    this.getPie()
+      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 () {
       console.log('pie准备好了')
       this.pieInitState = true
@@ -176,30 +246,57 @@ export default {
     // 获取饼状图
     async getPieChart () {
       this.$refs.pieChart.clear()
+      this.pieTotal = 0
+      const _that = this
       // this.$refs.pieChart.showLoading()
-      // const res = await getMonthPieChart(this.shibeiAId)
+      //  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,
+      };
 
-      // 获取pieChart配置
-      this.pieOption = pieOption()
+      const { data, code, msg } = await requestPost(url, params);
 
-      this.clickPie(0)
+      if (code === 0) {
+        // 获取pieChart配置
+        this.pieOption = pieOption()
+        if (data && data.length > 0) {
+          // this.pieData = data
 
-      this.pieOption.title.text = this.pieTotal
-      this.pieOption.series[1].data = this.pieData
+        } else {
+          this.pieData = [{ count: 0, categoryName: '无分类', color: '#00E5ED' }]
+        }
 
-      this.$refs.pieChart.setOption(this.pieOption)
+        this.pieData.forEach(item => {
+          item.name = item.categoryName
+          item.value = item.count
+          this.colorArray.push(item.color)
+          this.pieTotal = this.pieTotal + item.value
 
-      const _that = this
-      let fun = function (params) {
-        _that.clickPie(params.dataIndex)
+        });
+
+
+        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);
       }
-      this.$refs.pieChart.handleClick(fun)
+
+
     },
 
     clickPie (seriesIndex) {
-
       this.pieData.forEach((element, index) => {
-
         if (index === seriesIndex) {
           element.label = {
             show: true,
@@ -234,27 +331,25 @@ export default {
       this.$refs.pieChart.setOption(this.pieOption)
 
     },
-    getApiData () {
 
-      this.getDemandData();
+    handleChangeState (index) {
+      this.getTable()
     },
 
-    toUserInfo (uid) {
-      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
-    },
-
-
-    handlePageNoChange_demand (val) {
-      this.demand.pageNo = val;
-      this.getDemandData();
+    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 getDemandData () {
-      const url =
-        "http://yapi.elinkservice.cn/mock/245/heart/userdemand/mydemand";
+    async getTable () {
+      // const url = "/gov/issue/issue/resibuzz";
+      const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz";
       let params = {
-        userId: this.userId,
+        status: this.status,
+        orgId: this.orgId,
         pageNo: this.demand.pageNo,
         pageSize: this.demand.pageSize,
       };
@@ -267,10 +362,15 @@ export default {
         this.demand.list = data.list.map((item) => {
           return [
             { type: "index" },
-            item.wantServiceTime,
-            item.content,
+            item.issueTitle,
+            item.suggestion,
             item.categoryName,
-            item.statusName,
+            item.status,
+            item.createdTime,
+            item.issueOriginator,
+            item.voteAccount,
+            item.supportCount,
+            item.oppositionCount,
             { type: "operate", list: ["查看"] },
           ];
         });
@@ -278,6 +378,39 @@ export default {
         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>
@@ -287,3 +420,83 @@ export default {
   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;
+  }
+}