From e8a7c0283b4540cded78a90bdf778e99cc4a4396 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Wed, 8 Dec 2021 13:38:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/modules/visual/resibuzz.scss  |  75 +++++---
 .../visual/communityGovern/resiPieOption.js   | 164 ++++++++++++++++
 .../visual/communityGovern/resibuzz.vue       | 176 ++++++++++++++---
 .../components/screen-echarts-frame/index.vue | 177 ++++++++++++++++++
 4 files changed, 541 insertions(+), 51 deletions(-)
 create mode 100644 src/views/modules/visual/communityGovern/resiPieOption.js
 create mode 100644 src/views/modules/visual/components/screen-echarts-frame/index.vue

diff --git a/src/assets/scss/modules/visual/resibuzz.scss b/src/assets/scss/modules/visual/resibuzz.scss
index d7b1bf4b..d4f13bf0 100644
--- a/src/assets/scss/modules/visual/resibuzz.scss
+++ b/src/assets/scss/modules/visual/resibuzz.scss
@@ -2,29 +2,46 @@
 @import '../../c/function';
 @import './c/common';
 
-.g-r {
-  text-align: center;
-  margin: 40px 19px 20px;
-  width: calc(100vw - 60px);
-  height: calc(100vh - 140px);
-
-  .title {
-    padding: 10px;
-    font-size: 22px;
-    font-family: PingFang SC;
-    font-weight: 800;
-    color: #ffffff;
-    display: flex;
-    align-items: center;
-
-    img {
-      display: block;
-      margin-right: 5px;
-    }
-    span {
-      display: block;
-    }
+.title {
+  padding: 10px;
+  font-size: 22px;
+  font-family: PingFang SC;
+  font-weight: 800;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+
+  img {
+    display: block;
+    margin-right: 5px;
+  }
+  span {
+    display: block;
+  }
+}
+
+.g-cpt-resi {
+  display: flex;
+  flex-direction: row;
+  // flex-wrap: wrap;
+  // justify-content: center;
+  height: calc(100vh - 130px);
+
+  .g-l {
+    flex-shrink: 0;
+    width: 600px;
+    height: calc(100vh - 190px);
   }
+
+  .g-r {
+    text-align: center;
+    margin: 40px 19px 20px;
+    width: calc(100vw - 60px - 600px);
+    height: calc(100vh - 140px - 20px);
+  }
+}
+
+.g-r {
   .tb {
     position: relative;
     height: calc(100vh - 220px);
@@ -61,3 +78,17 @@
     }
   }
 }
+
+.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/views/modules/visual/communityGovern/resiPieOption.js b/src/views/modules/visual/communityGovern/resiPieOption.js
new file mode 100644
index 00000000..58d04e13
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/resiPieOption.js
@@ -0,0 +1,164 @@
+
+export function pieOption () {
+const center= ['50%', '250px']
+  return {
+    title: {
+      text: '0',
+      top: 220,
+      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: 500,
+      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: ['55%', '55.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: ['40%', '60%'],
+        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: {
+        //   normal:{
+        //       color:function(params) {
+        //       //自定义颜色
+        //       var colorList = [          
+        //               '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
+        //           ];
+        //           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/resibuzz.vue b/src/views/modules/visual/communityGovern/resibuzz.vue
index 578fb852..c286a396 100644
--- a/src/views/modules/visual/communityGovern/resibuzz.vue
+++ b/src/views/modules/visual/communityGovern/resibuzz.vue
@@ -1,34 +1,47 @@
 <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="g-r">
-    <div class="m-tb">
-      <cpt-card>
-        <div class="title">
-          <img src="@/assets/img/shuju/title-tip.png" />
-          <span>居民需求</span>
-        </div>
+        <!-- <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 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>
-      </cpt-card>
-    </div>
 
-  </div>
+        </div>
 
+      </div>
+    </div>
+  </cpt-card>
 </template>
 
 <script>
@@ -36,13 +49,37 @@ 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' }
+      ],
 
-      userId: "",
 
 
 
@@ -76,13 +113,16 @@ export default {
         ],
         header: ["序号", "服务时间", "需求类型", "需求内容", "状态", "操作"],
         list: [],
-        pageSize: 5,
+        pageSize: 10,
         pageNo: 1,
         total: 0,
       },
     };
   },
-
+  // mixins: [animate]
+  beforeDestroy () {
+    this.timer && clearInterval(this.timer)
+  },
   props: {
     uid: {
       type: String,
@@ -96,6 +136,7 @@ export default {
   components: {
     cptCard,
     cptTb,
+    screenEchartsFrame,
   },
 
   watch: {
@@ -111,11 +152,88 @@ export default {
   async mounted () {
     this.userId = this.uid;
     this.getApiData();
+
+    await nextTick(100);
+    this.getPie()
+
   },
 
   methods: {
-    handleSearch () { },
+    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();
diff --git a/src/views/modules/visual/components/screen-echarts-frame/index.vue b/src/views/modules/visual/components/screen-echarts-frame/index.vue
new file mode 100644
index 00000000..e9503385
--- /dev/null
+++ b/src/views/modules/visual/components/screen-echarts-frame/index.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="screenEchartsFrame"
+       ref="screenEchartsFrame"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'screen-echarts-frame',
+  data () {
+    return {
+      myChart: ''
+    }
+  },
+  props: {
+    chartMethod: {
+      type: Function
+    }
+  },
+  mounted () {
+    this.initChart()
+    window.onresize = () => {
+      this.myChart.resize()
+    }
+  },
+  beforeDestroy () {
+    // 销毁echarts实例对象
+    if (this.myChart) this.myChart.dispose()
+  },
+  watch: {},
+  methods: {
+    initChart () {
+
+      this.$nextTick(() => {
+        const dom = this.$refs.screenEchartsFrame
+        this.myChart = echarts.init(dom)
+
+        // this.myChart.setOption(this.chartMethod());
+        this.$emit('myChartMethod', this.myChart)
+      })
+    },
+    //点击pie事件
+    handleClick (fun) {
+      this.myChart.on('click', fun);
+    },
+
+    //高亮
+    highLight (index) {
+      this.myChart.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 1,
+        dataIndex: index
+      });
+    },
+
+    // 配置option
+    setOption (option) {
+      this.myChart.setOption(option)
+    },
+    // 获取option
+    getOption () {
+      if (this.myChart) {
+        return this.myChart.getOption()
+      } else {
+        return null
+      }
+    },
+    //
+    resize () {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    clear () {
+      if (this.myChart) {
+        this.myChart.clear()
+      }
+    },
+    showLoading () {
+      if (this.myChart) {
+        this.$nextTick(() => {
+          this.myChart.showLoading({
+            text: '',
+            color: '#29cdff',
+            textColor: '#29cdff',
+            maskColor: 'rgba(255, 255, 255, 0)',
+            zlevel: 0
+
+          })
+        })
+      }
+    },
+    hideLoading () {
+
+      if (this.myChart) {
+        this.myChart.hideLoading()
+      }
+    },
+    // 启动动画时使用
+    tooltipAnimate (chart, length) {
+      // 清除上一次动画
+      this.timeTicket && clearInterval(this.timeTicket)
+      const count = 0
+      // 启动动画
+      this._action(chart, count, length)
+      chart && // 移除动画
+        chart.on('mouseover', params => {
+          this._cleanAction(chart, params)
+        })
+      // 重写启动动画
+      chart &&
+        chart.on('mouseout', () => {
+          this._action(chart, count, length)
+        })
+    },
+    // tooltip动画action
+    _action (chart, count, length) {
+      this.timeTicket && clearInterval(this.timeTicket)
+      this.timeTicket = setInterval(() => {
+        if (!chart) {
+          clearInterval(this.timeTicket)
+          return
+        }
+        chart &&
+          chart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0
+          })
+        chart &&
+          chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: count % length
+          })
+        chart &&
+          chart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: count % length
+          })
+        count++
+      }, 1000 * 3)
+    },
+    _cleanAction (chart, params) {
+      this.timeTicket && clearInterval(this.timeTicket)
+      if (!chart) {
+        clearInterval(this.timeTicket)
+        return
+      }
+      chart &&
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0
+        })
+      chart &&
+        chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: params.dataIndex
+        })
+      chart &&
+        chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: params.dataIndex
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screenEchartsFrame {
+  width: 100%;
+  height: 100%;
+}
+</style>