From 81b309fa1ce8210fd5b024d0dc8e3f976eb5892c Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Wed, 3 Aug 2022 15:57:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppGridMemberScore/AppGridMemberScore.vue |   2 +-
 .../components/girdScoreManage.vue            |   8 +-
 .../components/gridScoreDetail.vue            |  26 +++++
 .../components/gridScoreRules.vue             |  24 ++--
 .../components/gridScoreStatistics.vue        | 110 +++++++++++++++++-
 5 files changed, 146 insertions(+), 24 deletions(-)
 create mode 100644 packages/conv/creditScore/AppGridMemberScore/components/gridScoreDetail.vue

diff --git a/packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue b/packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue
index 8fe5a17f..1f07c370 100644
--- a/packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue
+++ b/packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue
@@ -35,7 +35,7 @@ export default {
   data() {
     return {
       activeName: "girdScoreManage",
-      currIndex: "0",
+      currIndex: "2",
       areaId: '',
       oldActiveName: '',
     }
diff --git a/packages/conv/creditScore/AppGridMemberScore/components/girdScoreManage.vue b/packages/conv/creditScore/AppGridMemberScore/components/girdScoreManage.vue
index 114b1292..1ae87fb3 100644
--- a/packages/conv/creditScore/AppGridMemberScore/components/girdScoreManage.vue
+++ b/packages/conv/creditScore/AppGridMemberScore/components/girdScoreManage.vue
@@ -88,9 +88,9 @@ export default {
 <style lang="scss" scoped>
 .girdScoreManage {
   height: 100%;
-  ::v-deep .searchLeftZone,
-  ::v-deep .searchRightZone {
-    display: flex;
-  }
+  // ::v-deep .searchLeftZone,
+  // ::v-deep .searchRightZone {
+  //   display: flex;
+  // }
 }
 </style>
\ No newline at end of file
diff --git a/packages/conv/creditScore/AppGridMemberScore/components/gridScoreDetail.vue b/packages/conv/creditScore/AppGridMemberScore/components/gridScoreDetail.vue
new file mode 100644
index 00000000..9c34d2a4
--- /dev/null
+++ b/packages/conv/creditScore/AppGridMemberScore/components/gridScoreDetail.vue
@@ -0,0 +1,26 @@
+<template>
+  <section class="gridScoreDetail">
+    <!-- <ai-detail>
+      <template #title>
+        <ai-title title="网格员积分详情" isShowBottomBorder isShowBack @onBackClick="cancel(true)"></ai-title>
+      </template>
+    </ai-detail> -->
+  </section>
+</template>
+
+<script>
+export default {
+  name: "gridScoreDetail",
+  label: "网格员积分详情",
+  data() {
+    return {
+
+    }
+  },
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.gridScoreDetail {}
+</style>
\ No newline at end of file
diff --git a/packages/conv/creditScore/AppGridMemberScore/components/gridScoreRules.vue b/packages/conv/creditScore/AppGridMemberScore/components/gridScoreRules.vue
index 4567fb58..91eb5639 100644
--- a/packages/conv/creditScore/AppGridMemberScore/components/gridScoreRules.vue
+++ b/packages/conv/creditScore/AppGridMemberScore/components/gridScoreRules.vue
@@ -3,12 +3,12 @@
   <section class="gridScoreRules">
     <!--  v-if="permissions('app_appvillagerintegralrule_detail')" -->
     <ai-list>
-      <!-- <template slot="title">
-        <ai-title title="积分规则" isShowBottomBorder></ai-title>
-      </template> -->
       <template slot="content">
-        <ai-search-bar bottomBorder>
-          <template slot="left">
+        <ai-search-bar>
+          <template #left>
+            <el-button type="primary" icon="iconfont iconAdd" @click="dialog=true">添加</el-button>
+          </template>
+          <template slot="right">
             <el-cascader size="small" v-model="search.eventType" placeholder="请选择事件/类型" clearable  style="margin-right: 16px;"
                          :props="{...etOps,checkStrictly:true}" @change="handleTypeSearch" ref="eventTypeSearch" />
             <ai-select
@@ -18,13 +18,7 @@
                 :selectList="$dict.getDict('integralRuleStatus')">
             </ai-select>
           </template>
-          <template slot="right">
-          </template>
-        </ai-search-bar>
-        <ai-search-bar style="margin-top: 16px;">
-          <template #left>
-            <el-button type="primary" icon="iconfont iconAdd" @click="dialog=true">添加</el-button>
-          </template>
+          
         </ai-search-bar>
         <ai-table
             :tableData="tableData"
@@ -289,9 +283,9 @@ export default {
     width: 100%;
   }
 
-  ::v-deep .searchLeftZone {
-    display: flex;
-  }
+  // ::v-deep .searchRightZone {
+  //   display: flex;
+  // }
 
   ::v-deep .ai-dialog {
     .el-cascader {
diff --git a/packages/conv/creditScore/AppGridMemberScore/components/gridScoreStatistics.vue b/packages/conv/creditScore/AppGridMemberScore/components/gridScoreStatistics.vue
index 8abf7c0a..9b2b43db 100644
--- a/packages/conv/creditScore/AppGridMemberScore/components/gridScoreStatistics.vue
+++ b/packages/conv/creditScore/AppGridMemberScore/components/gridScoreStatistics.vue
@@ -1,25 +1,127 @@
 <template>
-  <div>积分统计</div>
+  <section class="gridScoreStatistics">
+    <el-row>
+      <div class="card_list">
+        <div class="card">
+          <h2>上报事件</h2>
+          <p class="color1">20</p>
+        </div>
+        <div class="card">
+          <h2>办结事件</h2>
+          <p class="color2">5</p>
+        </div>
+        <div class="card">
+          <h2>待办事件</h2>
+          <p class="color3">0</p>
+        </div>
+      </div>
+    </el-row>
+    <el-row class="echertsBox">
+      <h4>事件汇总</h4>
+      <div class="bar_echerts" id="chartDom"></div>
+    </el-row>
+  </section>
 </template>
 
 <script>
+import * as echarts from 'echarts';
 export default {
   name: "gridScoreStatistics",
   label: "积分统计",
   props: {
     instance: Function,
     dict: Object,
-    permissions: Function
+    permissions: Function,
   },
   data() {
     return {
       name: "积分统计"
     }
   },
-  methods: {},
+  created() {},
+  methods: {
+    getColEcherts() {
+      var chartDom = document.getElementById('chartDom');
+      var myChart = echarts.init(chartDom);
+      myChart.setOption({
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      });
+    }
+  },
+  mounted() {
+    this.getColEcherts()
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-.gridScoreStatistics {}
+.gridScoreStatistics {
+  height: 100%;
+  padding: 0 0 20px 0;
+  box-sizing: border-box;
+  .card_list {
+    display: flex;
+    .card {
+      flex: 1;
+      height: 96px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
+      border-radius: 4px;
+      margin-right: 20px;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      h2 {
+        color: #888888;
+        font-weight: 600;
+        font-size: 16px;
+      }
+      p {
+        margin-top: 8px;
+        font-size: 24px;
+        font-weight: 600;
+      }
+      .color1 {
+        color: #2891FF;
+      }
+      .color2 {
+        color: #22AA99;
+      }
+      .color3 {
+        color: #F8B425;
+      }
+    }
+    .card:last-child {
+      margin-right: 0;
+    }
+  }
+  .echertsBox {
+    margin-top: 20px;
+    background: #FFFFFF;
+    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;
+    }
+  }
+ }
 </style>
\ No newline at end of file