联建单位

src/views/modules/visual/communityParty/community.vue

@@ -15,7 +15,7 @@
           </el-cascader>
 
         </div>
-        <div class="second-select">
+        <!-- <div class="second-select">
           <el-select v-model="serviceMatter"
                      placeholder="请选择"
                      @change="handleSelectChange"
@@ -39,27 +39,29 @@
                           :default-time="['00:00:00', '23:59:59']"
                           @change="handleTimeChange">
           </el-date-picker>
-        </div>
+        </div> -->
       </div>
+     
       <div class="second-title">
-        <div class="second-title-label">联建活动分类统计</div>
-
+        <div class="second-title-label">联建单位分布</div>
       </div>
-      <div class="box-wr box-wr-400">
-        <div class="box-left">
-          <div v-for="(item, index) in cateInfo"
+
+      <div class="box-wr calc-h">
+        <div class="box-left flex-column wd50">
+          <!-- <div v-for="(item, index) in partyItem"
                :key="index"
                class="box-left-item">
             <div class="box-label">{{ item.label }}</div>
-            <div class="box-num">{{ item.value }}</div>
-          </div>
-          <!-- <div class="box-left-item">
-            <div class="box-label">组织活动</div>
-            <div class="box-num">1233</div>
+            <div class="box-num"
+                 :style="'color:' + item.color">{{ item.value }}</div>
           </div> -->
-        </div>
-        <div class="box-right">
-          <div class="warning-box-bottom">
+          <div class="echart-wr echart-wr100">
+            <screen-echarts-frame class="echart-org"
+                            @myChartMethod="pieInitOks"
+                            ref="eduChart"></screen-echarts-frame>
+          </div>
+
+          <div class="warning-box-bottom mt0 table-h">
             <screen-table :headerList="headerList"
                           :tableData="tableData"
                           :visibleLoading="visibleLoading"
@@ -76,21 +78,6 @@
               </el-pagination>
             </div>
           </div>
-        </div>
-      </div>
-      <div class="second-title">
-        <div class="second-title-label">联建单位分布</div>
-      </div>
-
-      <div class="box-wr">
-        <div class="box-left box-left-w400">
-          <div v-for="(item, index) in partyItem"
-               :key="index"
-               class="box-left-item">
-            <div class="box-label">{{ item.label }}</div>
-            <div class="box-num"
-                 :style="'color:' + item.color">{{ item.value }}</div>
-          </div>
 
         </div>
         <div class="box-right">
@@ -100,7 +87,7 @@
                         @clickFeature="clickProject"
                         :showIconLayer="true"></screen-map>
           </div>
-          <div class="map-tips">
+          <!-- <div class="map-tips">
             <div v-for="(item, index) in partyItem"
                  :key="index"
                  class="map-tips-item">
@@ -109,6 +96,72 @@
               </div>
               <div class="map-tips-label">{{ item.label }}</div>
             </div>
+          </div> -->
+        </div>
+      </div>
+
+      <div class="card-title mt20">
+        <div class="second-title mt0">
+          <div class="second-title-label">联建活动分类统计</div>
+
+        </div>
+        <div class="second-select">
+          <el-select v-model="serviceMatter"
+                     placeholder="请选择"
+                     @change="handleSelectChange"
+                     @clear="handleSelectChange">
+            <el-option v-for="item in unitList"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="second-select">
+          <el-date-picker v-model="timeRange"
+                          type="daterange"
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期"
+                          prefix-icon="el-icon-caret-bottom"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          :clearable="false"
+                          :default-time="['00:00:00', '23:59:59']"
+                          @change="handleTimeChange">
+          </el-date-picker>
+        </div>
+      </div>
+       
+      <div class="box-wr box-wr-400">
+        <div class="box-left">
+          <div v-for="(item, index) in cateInfo"
+               :key="index"
+               class="box-left-item">
+            <div class="box-label">{{ item.label }}</div>
+            <div class="box-num">{{ item.value }}</div>
+          </div>
+          <!-- <div class="box-left-item">
+            <div class="box-label">组织活动</div>
+            <div class="box-num">1233</div>
+          </div> -->
+        </div>
+        <div class="box-right">
+          <div class="warning-box-bottom">
+            <screen-table :headerList="headerList"
+                          :tableData="tableData"
+                          :visibleLoading="visibleLoading"
+                          :operate="true"
+                          @look="handleLook"></screen-table>
+            <div class="pagination">
+              <el-pagination :current-page="pageNo"
+                             :page-size="pageSize"
+                             background
+                             layout="prev, pager, next"
+                             @size-change="pageSizeChangeHandleNew"
+                             @current-change="pageCurrentChangeHandleNew"
+                             :total="total">
+              </el-pagination>
+            </div>
           </div>
         </div>
       </div>
@@ -128,6 +181,8 @@ import cptCard from "@/views/modules/visual/cpts/card";
 import nextTick from "dai-js/tools/nextTick";
 import dialogInfo from './dialogInfo.vue'
 import screenMap from "@/views/modules/visual/components/screen-map";
+import screenEchartsFrame from "../components/screen-echarts-frame";
+import { pieOption } from './options'
 
 export default {
   name: "warning-box",
@@ -135,7 +190,8 @@ export default {
     cptCard,
     screenTable,
     dialogInfo,
-    screenMap
+    screenMap,
+    screenEchartsFrame
   },
   data () {
     return {
@@ -176,7 +232,13 @@ export default {
       agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
       unitMapList: [],
 
-      detailInfo: {}
+      detailInfo: {},
+      pieEduChartSs: null,
+      pieEduOptions: null,
+      eduList: [],
+      partyCode: '',
+      totalCount: 0,
+      noInit: false
     };
   },
   async mounted () {
@@ -202,6 +264,118 @@ export default {
     }
   },
   methods: {
+    pieInitOks (dom) {
+      console.log('pies准备好了', dom)
+      this.pieEduChartS = dom
+      // this.pieInitState = true
+
+    },
+    initEduCharts() {
+      // const eId = document.getElementById('echartOrg')
+      // let _charts = echarts.init(eId)
+      let option = {
+      
+      }
+      let legend = {
+        show: true,
+        orient: 'vertical',
+        top: '20%',
+        right: 0,
+        textStyle: {
+          width: 90,
+          color: '#fff',
+          rich: {
+            a: {
+              width: 90
+            }
+          }
+        },
+        formatter: name => {
+          for (let a = 0; a < this.partyItem.length; a++) {
+            // this.data  这个数据中有名称和次数
+            if (this.partyItem[a].name === name) {
+              //两个名称进行对比，取出对应的次数
+              let params1 = name + "\n"; //然后return你需要的legend格式即可
+              console.log(params1);
+              let tmp = params1.split("\n");
+              let res = "" + params1;
+              for (let i in tmp) {
+                res = res.replace(tmp[i], "");
+              }
+              return res + params1;
+            }
+          }
+        }
+      }
+      this.pieEduOptions = pieOption(this.pieEduChartS)
+      this.pieEduOptions.legend = { ...legend }
+      // this.pieEduOptions.series[1].width = 400
+      this.clickEduPie(0)
+      let fun = params => {
+        this.clickEduPie(params.dataIndex)
+      }
+      this.$refs.eduChart.handleClick(fun)
+      // this.noInit = true
+      // option && this.$refs.pieChart.setOption(option);
+
+    },
+    clickEduPie (seriesIndex) {
+      let _code = ''
+      let isClick = false
+      this.partyItem.forEach((element, index) => {
+        if (index === seriesIndex) {
+          _code = element.code
+
+          if (!this.noInit) isClick = false
+          else {
+            element.isClick = !element.isClick
+            isClick = element.isClick
+          }
+
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zlcm')
+        } else {
+          element.isClick = false
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.partyCode = isClick && _code || ''
+      this.pieEduOptions.title.text = this.totalCount
+      this.pieEduOptions.series[1].data = this.partyItem
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.eduChart.setOption(this.pieEduOptions)
+      if (this.noInit) {
+        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+        this.pageNo = 1
+        // this.getCateType(_arr[0], isClick && _code || '')
+      }
+      this.noInit = true
+      
+
+    },
     handleTimeChange (time) {
       if (time) {
         const startTimeArray = util.dateFormatter(time[0], 'date').split('-')
@@ -218,6 +392,7 @@ export default {
       this.getList(this.agencyId);
       this.getCateCount(this.agencyId)
     },
+    
     //具体人员列表
     async getList (agencyId) {
       this.visibleLoading = true
@@ -369,9 +544,16 @@ export default {
         this.partyItem = data.map((item, index) => {
           return {
             ...item,
-            ...colorItem[index]
+            ...colorItem[index],
+            name: item.label,
+            isClick: false
           }
         })
+        this.totalCount = 0
+        data.forEach(item => {
+          this.totalCount += Number(item.value)
+        })
+        this.initEduCharts()
       } else {
         this.$message.error(msg)
       }
@@ -767,12 +949,13 @@ export default {
   }
   .box-right {
     flex: 1;
+    height: 100%;
     overflow: hidden;
     .pagination {
       margin-top: 0;
     }
     .box-map {
-      height: 400px;
+      height: 100%;
       // border: 1px solid #2865fa;
 
       .map {
@@ -792,6 +975,9 @@ export default {
     }
   }
 }
+.flex-column {
+  flex-direction: column;
+}
 .box-wr-400 {
   height: 400px;
   .box-left {
@@ -804,7 +990,42 @@ export default {
     }
   }
 }
-
+.echart-wr {
+  position: relative;
+  flex-shrink: 0;
+  width: 90%;
+  height: 320px;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 100%;
+  }
+  .echart-cicle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 240px;
+    height: 240px;
+    box-sizing: border-box;
+    margin-top: -120px;
+    margin-left: -120px;
+    border: 1px dashed rgba(0, 96, 240, 1);
+    border-radius: 50%;
+  }
+  .echart-cicle0 {
+    left: 80px;
+    margin-left: 0;
+  }
+}
+.table-h {
+  height: 360px;
+}
+.calc-h {
+  height: calc(100vh - 240px);
+}
+.wd50 {
+  width: 50%;
+}
 .map-tips {
   width: 100%;
   display: flex;
@@ -836,4 +1057,10 @@ export default {
     }
   }
 }
+.mt0 {
+  margin: 0;
+}
+.mt20 {
+  margin-top: 20px;
+}
 </style>