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

2022-08-04 16:36:21 +08:00
parent a01f1cb547 c9e74b7a8c
commit f005576cb6
3 changed files with 192 additions and 47 deletions
--- a/packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue
+++ b/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">
--- a/packages/conv/creditScore/AppGridMemberScore/components/gridScoreDetail.vue
+++ b/packages/conv/creditScore/AppGridMemberScore/components/gridScoreDetail.vue
@@ -148,6 +148,8 @@ export default {
                },
              },
            },
+            barWidth: 20,
+            barGap: '20%',
          }
        ]
      }, true);
--- a/packages/conv/creditScore/AppGridMemberScore/components/gridScoreStatistics.vue
+++ b/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>
-          <el-select size="small" style="width: 200px;margin-left: 16px;" v-model="search.girdId" placeholder="类型" clearable
+          <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
                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 id="chart1" style="height: 300px; width: 100%;"></div>
+        <div class="right_Box">
+          <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() {
-      let chartDom = document.getElementById('chart1');
-      chartDom.style.width = (window.innerWidth - 328) / 2 + "px";
-      this.myChart = echarts.init(chartDom);
-      this.myChart.setOption({
-        dataZoom: [
-          {
-            type: "slider",
-            xAxisIndex: [0],
-            filterMode: "filter",
-          },
-        ],
+    getColEcherts1() {
+      let chartDom1 = document.getElementById('chart1');
+      chartDom1.style.width = (window.innerWidth - 344) / 2 + "px";
+      this.myChart1 = echarts.init(chartDom1);
+      this.myChart1.setOption({
+        
+        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)'
-            },
            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() {
-      this.myChart.resize()
+    getColEcherts2() {
+      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;
-      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 {
+        width: 100%;
      }

-      .bar_Box {
-        width: 100%;
-        #chartDom {
+      .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;
+        #chart1,
+        #chart2 {
          width: 100%;
-          height: 300px;
-          margin-top: 16px;
+          height: 260px;
        }
      }
-      
    }
  }
+  ::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>