积分统计

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,7 +4,7 @@
       <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
                     @change="getListInit()">
             <el-option
@@ -31,12 +31,12 @@
           <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>
           <ai-empty v-if="false" style="height: 300px;"></ai-empty>
         </div>
@@ -83,6 +83,12 @@
         </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="handleDelete(row.id)">调整积分</el-button> -->
+              <el-button type="text" @click="toAdd(row.id)">详情</el-button>
+            </template>
+          </el-table-column>
         </ai-table>
       </template>
     </ai-card>
@@ -112,7 +118,8 @@ export default {
       page: {current: 1, size: 10, total: 0},
       girdList: [],
       time: '',
-      timeCheck: ['昨日','近7天','近30天','自定义']
+      timeCheck: ['昨日','近7天','近30天','自定义'],
+      currrntTime: '0'
     }
   },
   computed: {
@@ -125,6 +132,7 @@ export default {
         { prop: "", label: '积分变动', align: "center", },
         { prop: "", label: '剩余积分', align: "center", },
         { prop: "", label: '时间', align: "center", },
+        { slot: "options" }
       ]
     }
   },
@@ -134,37 +142,55 @@ export default {
   methods: {
     getColEcherts() {
       let chartDom = document.getElementById('chart1');
-      chartDom.style.width = (window.innerWidth - 328) / 2 + "px";
+      chartDom.style.width = (window.innerWidth - 344) / 2 + "px";
       this.myChart = echarts.init(chartDom);
       this.myChart.setOption({
-        dataZoom: [
-          {
-            type: "slider",
-            xAxisIndex: [0],
-            filterMode: "filter",
-          },
-        ],
+        
+        title: {
+          text: '个人积分排行'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '16px',
+          right: '28px',
+          bottom: '14px',
+          top: '50px',
+          containLabel: true
+        },
         xAxis: {
-          type: 'category',
-          data: ['每日签到', '事件上报', '特殊人员跟进', '群发任务', '邀请居民进群']
+          type: 'value',
+          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)'
-            },
+            // 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,6 +198,8 @@ export default {
                 },
               },
             },
+            barWidth: 10,
+            barGap: '20%',
           }
         ]
       }, true);
@@ -182,6 +210,9 @@ export default {
     },
     getListInit() {},
     getTableData() {},
+    timeChange(index) {
+      this.currrntTime = index
+    },
   },
   mounted() {
     this.getColEcherts()
@@ -223,9 +254,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,26 +305,25 @@ export default {
     .echertsBox {
       width: 100%;
       margin-top: 20px;
-      background: #F9F9F9;
-      box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
-      border-radius: 4px;
-      padding: 16px;
-      box-sizing: border-box;
-      h4 {
-        color: #222222;
-        font-style: 16px;
-        font-weight: 600;
+      background: #FFF;
+      display: flex;
+      .left_Box {
+        margin-right: 16px;
       }
+      .right_Box {}
 
-      .bar_Box {
-        width: 100%;
+      .left_Box,
+      .right_Box {
+        background: #F9F9F9;
+        box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
+        border-radius: 4px;
+        padding: 16px;
+        box-sizing: border-box;
         #chartDom {
           width: 100%;
-          height: 300px;
-          margin-top: 16px;
+          height: 260px;
         }
       }
-      
     }
   }
  }