Merge remote-tracking branch 'origin/dev' into dev

packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue

@@ -2,7 +2,9 @@
   <ai-list class="AppGridMemberScore">
     <template slot="title">
       <ai-title title="网格员积分" :isShowBottomBorder="false" :instance="instance" >
-        
+        <template slot="sub">
+          <div>网格员可通过完成某些任务获取一定数量的积分，积分可去兑换相应的奖励。</div>
+        </template>
       </ai-title>
     </template>
     <template slot="tabs">

packages/conv/creditScore/AppGridMemberScore/components/gridScoreDetail.vue

@@ -148,6 +148,8 @@ export default {
                 },
               },
             },
+            barWidth: 20,
+            barGap: '20%',
           }
         ]
       }, true);

packages/conv/creditScore/AppGridMemberScore/components/gridScoreStatistics.vue

@@ -4,8 +4,8 @@
       <div class="title">
         <p>总体统计</p>
         <div class="title_right">
-          <div><span v-for="(item,index) in timeCheck" :key="index">{{item}}</span></div>
+          <div><span v-for="(item,index) in timeCheck" :key="index" :class="currrntTime == index? 'active':''" @click="timeChange(index)">{{item}}</span></div>
-          <el-select size="small" style="width: 200px;margin-left: 16px;" v-model="search.girdId" placeholder="类型" clearable
+          <el-select size="small" style="width: 200px;margin-left: 16px;" v-model="search.girdId" placeholder="所属网格" clearable
                     @change="getListInit()">
             <el-option
                 v-for="(item,i) in girdList"
@@ -31,13 +31,13 @@
           <p class="color1">0</p>
         </div>
       </div>
-      <div class="echertsBox" style="display: flex;">
+      <div class="echertsBox">
         <div class="left_Box">
           <div id="chart1" style="height: 300px; width: 100%;"></div>
           <ai-empty v-if="false" style="height: 300px;"></ai-empty>
         </div>
-        <div class="left_Box">
+        <div class="right_Box">
-          <div id="chart1" style="height: 300px; width: 100%;"></div>
+          <div id="chart2" style="height: 300px; width: 100%;"></div>
           <ai-empty v-if="false" style="height: 300px;"></ai-empty>
         </div>
       </div>
@@ -83,9 +83,33 @@
         </ai-search-bar>
         <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                   @getList="getTableData" :col-configs="colConfigs" :dict="dict">
+          <el-table-column slot="options" label="操作"  align="center">
+            <template slot-scope="{ row }">
+              <el-button type="text" @click="open(row.id)">详情</el-button>
+            </template>
+          </el-table-column>
         </ai-table>
       </template>
     </ai-card>
+
+    <el-dialog title="详情" :visible.sync="dialog" customFooter width="700">
+      <ai-detail>
+        <template #content>
+          <ai-wrapper>
+            <ai-info-item label="户主"/>
+            <ai-info-item label="对象"/>
+            <ai-info-item label="事件" isLine/>
+            <ai-info-item label="时间" isLine/>
+            <ai-info-item label="积分"/>
+            <ai-info-item label="积分余额"/>
+            <ai-info-item label="凭证" isLine></ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-detail>
+      <span slot="footer" class="dialog-footer" center>
+        <el-button @click="dialog = false">关闭</el-button>
+      </span>
+    </el-dialog>
   </section>
 </template>
 
@@ -102,7 +126,8 @@ export default {
   data() {
     return {
       name: "积分统计", 
-      myChart: null,
+      myChart1: null,
+      myChart2: null,
       tableData: [],
       search: {
         current: 1,
@@ -112,7 +137,9 @@ export default {
       page: {current: 1, size: 10, total: 0},
       girdList: [],
       time: '',
-      timeCheck: ['昨日','近7天','近30天','自定义']
+      timeCheck: ['昨日','近7天','近30天','自定义'],
+      currrntTime: '0',
+      dialog: false,
     }
   },
   computed: {
@@ -125,6 +152,7 @@ export default {
         { prop: "", label: '积分变动', align: "center", },
         { prop: "", label: '剩余积分', align: "center", },
         { prop: "", label: '时间', align: "center", },
+        { slot: "options" }
       ]
     }
   },
@@ -132,39 +160,53 @@ export default {
     this.$dict.load('epidemicDangerousAreaLevel')
   },
   methods: {
-    getColEcherts() {
+    getColEcherts1() {
-      let chartDom = document.getElementById('chart1');
+      let chartDom1 = document.getElementById('chart1');
-      chartDom.style.width = (window.innerWidth - 328) / 2 + "px";
+      chartDom1.style.width = (window.innerWidth - 344) / 2 + "px";
-      this.myChart = echarts.init(chartDom);
+      this.myChart1 = echarts.init(chartDom1);
-      this.myChart.setOption({
+      this.myChart1.setOption({
-        dataZoom: [
+        
-          {
+        title: {
-            type: "slider",
+          text: '个人积分排行'
-            xAxisIndex: [0],
+        },
-            filterMode: "filter",
+        tooltip: {
-          },
+          trigger: 'axis',
-        ],
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '16px',
+          right: '28px',
+          bottom: '14px',
+          top: '50px',
+          containLabel: true
+        },
         xAxis: {
-          type: 'category',
+          type: 'value',
-          data: ['每日签到', '事件上报', '特殊人员跟进', '群发任务', '邀请居民进群']
+          boundaryGap: [0, 0.01],
         },
         yAxis: {
-          type: 'value'
+          type: 'category',
+          data: ['Brazil', 'Indonesia', 'India', 'China', 'World'],
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
         },
+
         series: [
           {
             data: [120, 200, 150, 80, 70,],
             type: 'bar',
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(180, 180, 180, 0.2)'
-            },
             itemStyle: {
               normal: {
                 color: "#5087ec",
                 label: {
                   show: true,  //开启显示
-                  position: 'top',    //在上方显示
+                  position: 'right',    //在上方显示
                   textStyle: {
                     fontSize: 13,
                     color: '#666'
@@ -172,23 +214,104 @@ export default {
                 },
               },
             },
+            barWidth: 10,
+            barGap: '20%',
           }
         ]
       }, true);
       window.addEventListener("resize", this.onResize)
     },
-    onResize() {
+    getColEcherts2() {
-      this.myChart.resize()
+      let chartDom2 = document.getElementById('chart2');
+      chartDom2.style.width = (window.innerWidth - 344) / 2 + "px";
+      this.myChart2 = echarts.init(chartDom2);
+      this.myChart2.setOption({
+        title: {
+          text: '网格积分排行'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '16px',
+          right: '28px',
+          bottom: '14px',
+          top: '50px',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Brazil', 'Indonesia', 'India', 'China', 'World'],
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70,],
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: "#5087ec",
+                label: {
+                  show: true,  //开启显示
+                  position: 'right',    //在上方显示
+                  textStyle: {
+                    fontSize: 13,
+                    color: '#666'
+                  }
+                },
+              },
+            },
+            barWidth: 10,
+            barGap: '20%',
+          }
+        ]
+      }, true);
+      window.addEventListener("resize", this.onResize2)
+    },
+    onResize1() {
+      this.myChart1.resize()
+    },
+    onResize2() {
+      this.myChart2.resize()
     },
     getListInit() {},
     getTableData() {},
+    timeChange(index) {
+      this.currrntTime = index
+    },
+    open(id) {
+      this.dialog = true
+      this.getDetail(id)
+    },
+    getDetail(id) {
+
+    }
+
+
+
+
   },
   mounted() {
-    this.getColEcherts()
+    this.getColEcherts1()
+    this.getColEcherts2()
   },
   destroyed () {
-    window.removeEventListener('resize', this.onResize)
+    window.removeEventListener('resize', this.onResize1)
+    window.removeEventListener('resize', this.onResize2)
   },
+  
 }
 </script>
 
@@ -223,9 +346,16 @@ export default {
           display: inline-block;
           width: 70px;
           height: 32px;
+          line-height: 32px;
           border-radius: 2px;
           border: 1px solid #D0D4DC;
           margin-right: 8px;
+          text-align: center;
+          cursor: pointer;
+        }
+        .active {
+          color: #2266FF;
+          border: 1px solid #2266FF;
         }
       }
     }
@@ -267,27 +397,38 @@ export default {
     .echertsBox {
       width: 100%;
       margin-top: 20px;
-      background: #F9F9F9;
+      background: #FFF;
-      box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
+      display: flex;
-      border-radius: 4px;
+      .left_Box {
-      padding: 16px;
+        margin-right: 16px;
-      box-sizing: border-box;
+      }
-      h4 {
+      .right_Box {
-        color: #222222;
+        width: 100%;
-        font-style: 16px;
-        font-weight: 600;
       }
 
-      .bar_Box {
+      .left_Box,
-        width: 100%;
+      .right_Box {
-        #chartDom {
+        background: #F9F9F9;
+        box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
+        border-radius: 4px;
+        padding: 16px;
+        box-sizing: border-box;
+        #chart1,
+        #chart2 {
           width: 100%;
-          height: 300px;
+          height: 260px;
-          margin-top: 16px;
         }
       }
-      
     }
   }
+  ::v-deep .el-dialog__footer {
+    text-align: center;
+  }
+  ::v-deep .el-dialog__header {
+    border-bottom: 1px solid #DDD;
+  }
+  ::v-deep .ai-detail {
+    background: #FFF;
+  }
  }
 </style>