服务措施分析

src/views/modules/visual/components/screen-table/index.vue

@@ -251,6 +251,9 @@ export default {
           text-align: center;
           width: calc(100% / 5);
           cursor: pointer;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
           .more {
             font-size: 18px;
             font-weight: 400;

src/views/modules/visual/measure/service.vue

@@ -9,7 +9,8 @@
             :options="propTree" 
             :props="{ checkStrictly: true }" 
             :show-all-levels="false"
-            clearable @change="handleCascader">
+            clearable 
+            @change="handleCascader">
           </el-cascader>
         </div>
         <div class="title-time">
@@ -178,6 +179,7 @@ export default {
         { title: "服务方", coulmn: 'serviceName' },
         { title: "服务时间", coulmn: 'wantServiceTime' },
       ],
+      categoryList: {},
       timeRange: '',
       tableData: [
         // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
@@ -193,6 +195,13 @@ export default {
       detailInfo: {}
     };
   },
+  watch: {
+    timeRange(val) {
+      console.log('val-www', val)
+      if (!val) return false
+      this.handleCascader(this.selectAgency)
+    }
+  },
   async mounted() {
     this.initTime()
     await nextTick(100);
@@ -214,6 +223,38 @@ export default {
           axisPointer: {
             // Use axis to trigger tooltip
             type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+          backgroundColor: 'transprant',
+          borderColor: 'transprant',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: params => {
+              let res;
+              let arr = []
+              let total = 0
+              const xName = params[0].axisValue
+              this.categoryList.forEach(item => {
+                if (item.categoryName === xName) {
+                  arr = item.detail
+                  total = item.total
+                }
+              })
+              let title = `<div style='margin-bottom: 10px;'><span>${xName}分类需求</span>${total}个</div>`
+              let desc = ''
+              let unit = '个'
+              arr.forEach(item => {
+                if (item.legendCode == 'volunteer') unit = '名'
+                else unit = '个'
+                if (item.legendCode == 'unfinished') {
+                  desc += `<div><span>尚有 ${item.serviceDemandTotal} 个需求未完成</span></div>`
+                }else {
+                  desc += `<div><span>共 ${item.totalService} ${unit} ${item.legendName} 完成需求 ${item.serviceDemandTotal} 个</span></div>`
+                }
+                
+              })
+              res= title + desc
+              return res
           }
         },
         legend: {
@@ -232,7 +273,11 @@ export default {
         xAxis: {
           type: 'category',
           axisLabel: {
-            color: '#fff'
+            color: '#fff',
+            interval: 0
+          },
+          axisTick: {
+            interval: 0
           },
           data: xData
         },
@@ -247,76 +292,13 @@ export default {
           // axisLine: false
         },
         series: yData
-        // [
-        //   {
-        //     name: '区域化党建单位',
-        //     type: 'bar',
-        //     stack: 'total',
-        //     // barWidth: 20,
-        //     label: {
-        //       show: true
-        //     },
-        //     emphasis: {
-        //       focus: 'series'
-        //     },
-        //     data: [320, 302, 301, 334, 390, 330, 320]
-        //   },
-        //   {
-        //     name: '社会组织',
-        //     type: 'bar',
-        //     stack: 'total',
-        //     // barWidth: 20,
-        //     label: {
-        //       show: true
-        //     },
-        //     emphasis: {
-        //       focus: 'series'
-        //     },
-        //     data: [120, 132, 101, 134, 90, 230, 210]
-        //   },
-        //   {
-        //     name: '社区自组织',
-        //     type: 'bar',
-        //     stack: 'total',
-        //     // barWidth: 20,
-        //     label: {
-        //       show: true
-        //     },
-        //     emphasis: {
-        //       focus: 'series'
-        //     },
-        //     data: [220, 182, 191, 234, 290, 330, 310]
-        //   },
-        //   {
-        //     name: '志愿者',
-        //     type: 'bar',
-        //     stack: 'total',
-        //     // barWidth: 20,
-        //     label: {
-        //       show: true
-        //     },
-        //     emphasis: {
-        //       focus: 'series'
-        //     },
-        //     data: [150, 212, 201, 154, 190, 330, 410]
-        //   },
-        //   {
-        //     name: '未完成',
-        //     type: 'bar',
-        //     stack: 'total',
-        //     // barWidth: 20,
-        //     label: {
-        //       show: true
-        //     },
-        //     emphasis: {
-        //       focus: 'series'
-        //     },
-        //     data: [820, 832, 901, 934, 1290, 1330, 1320]
-        //   }
-        // ]
+        
       };
 
       option && _charts.setOption(option);
+      _charts.on('click', params => {
+        this.clickBar(params)
+      })
 
     },
     async getServicePie(orgId, orgType) {
@@ -331,6 +313,7 @@ export default {
       if (code === 0) {
         console.log('pie-data', data)
         const { categoryList, legend } = data
+        this.categoryList = categoryList
         let xData = categoryList.map(item => item.categoryName)
         let yData = []
         yData = legend.map(item => {
@@ -475,6 +458,18 @@ export default {
 
       return y + '-' + m + '-' + d
     },
+    clickBar(params) {
+      console.log('params---p', params)
+      let code = ''
+      this.categoryList.forEach(item => {
+        if (item.categoryName == params.name) code = item.categoryCode
+      })
+      if (code) {
+        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+        this.getServiceList(_arr[0], orgType, code)
+      }
+    },
     async handleLook(val) {
       
       // this.detailId = val.id
@@ -484,16 +479,21 @@ export default {
     },
     handleCascader(val) {
       console.log('val-vvv', val)
-      const _arr = val[val.length - 1].split('-')
-      const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
-      this.getServiceList(_arr[0], orgType)
+      if (val.length > 0) {
+        const _arr = val[val.length - 1].split('-')
+        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+        this.getServicePie(_arr[0], orgType)
+      }
+      
     },
     pageSizeChangeHandleNew(val) {
       this.pageNo = 1;
       this.pageSize = val;
+      this.handleCascader(this.selectAgency)
     },
     pageCurrentChangeHandleNew(val) {
       this.pageNo = val;
+      this.handleCascader(this.selectAgency)
     },
   },
 };

src/views/modules/visual/measure/volunteer.vue

@@ -596,14 +596,14 @@ export default {
 }
 
 .card-wr-map {
-  height: calc(100vh - 140px);
+  height: calc(100vh - 150px);
   text-align: center;
 
   .card-map {
     margin-top: 10px;
     width: 100%;
-    height: calc(100vh - 285px);
-    // height: calc(100vh - 295px);
+    // height: calc(100vh - 285px);
+    height: calc(100vh - 315px);
 
     .map {
       width: 100%;