From 7f53435a842f528c311c9eff5b5f8a0d6bf0aeaa Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Wed, 5 Jan 2022 16:16:45 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=8F=E6=89=8B=E6=8B=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppHandSnapshot/AppHandSnapshot.vue  | 310 +++++------------
 src/apps/AppHandSnapshot/List.vue             | 218 ++++++++++++
 src/apps/AppHandSnapshot/PercentageDetail.vue | 211 +++++++++++
 src/apps/AppHandSnapshot/Set.vue              |  76 ++++
 src/apps/AppHandSnapshot/SetList.vue          | 118 +++++++
 src/apps/AppHandSnapshot/Statistics.vue       | 328 +++++++++++++++---
 .../AppHandSnapshot/components/img/bg-1.png   | Bin 0 -> 3281 bytes
 .../AppHandSnapshot/components/img/bg-2.png   | Bin 0 -> 2775 bytes
 .../AppHandSnapshot/components/img/bg-3.png   | Bin 0 -> 2617 bytes
 .../components/img/down-icon.png              | Bin 0 -> 314 bytes
 .../components/img/gird-icon.png              | Bin 0 -> 1100 bytes
 .../components/img/line-img.png               | Bin 0 -> 1667 bytes
 .../components/img/right-icon.png             | Bin 0 -> 373 bytes
 .../components/img/setting-icon.png           | Bin 0 -> 1328 bytes
 14 files changed, 988 insertions(+), 273 deletions(-)
 create mode 100644 src/apps/AppHandSnapshot/List.vue
 create mode 100644 src/apps/AppHandSnapshot/PercentageDetail.vue
 create mode 100644 src/apps/AppHandSnapshot/Set.vue
 create mode 100644 src/apps/AppHandSnapshot/SetList.vue
 create mode 100644 src/apps/AppHandSnapshot/components/img/bg-1.png
 create mode 100644 src/apps/AppHandSnapshot/components/img/bg-2.png
 create mode 100644 src/apps/AppHandSnapshot/components/img/bg-3.png
 create mode 100644 src/apps/AppHandSnapshot/components/img/down-icon.png
 create mode 100644 src/apps/AppHandSnapshot/components/img/gird-icon.png
 create mode 100644 src/apps/AppHandSnapshot/components/img/line-img.png
 create mode 100644 src/apps/AppHandSnapshot/components/img/right-icon.png
 create mode 100644 src/apps/AppHandSnapshot/components/img/setting-icon.png

diff --git a/src/apps/AppHandSnapshot/AppHandSnapshot.vue b/src/apps/AppHandSnapshot/AppHandSnapshot.vue
index 5fb2ed36..24b0ef0f 100644
--- a/src/apps/AppHandSnapshot/AppHandSnapshot.vue
+++ b/src/apps/AppHandSnapshot/AppHandSnapshot.vue
@@ -1,258 +1,124 @@
 <template>
   <div class="AppHandSnapshot">
-    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
-
-    <div class="select-top">
-      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="所属网格"></AiSelect>
-
-      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="办件状态"></AiSelect>
-    </div>
-
-    <template v-if="datas.length > 0">
-      <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
-        <template #custom>
-          <div class="card-top">
-            <div class="titles">世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多</div>
-
-            <div class="types">
-              <span>事件类型</span>
-              <span class="types-right">矛盾纠纷</span>
-            </div>
-
-            <div class="gards">
-              <span>所属网格</span>
-              <span class="gards-right">04号网格</span>
-            </div>
-          </div>
-
-          <div class="status status0">
-            <span class="icon"></span>
-            <span>待处理</span>
-          </div>
-        </template>
-      </AiCard>
-    </template>
-
-    <AiEmpty v-else></AiEmpty>
-    <div class="pad-b120"></div>
-    <div class="tabs">
-      <div class="item">
-        <img src="./components/img/handle-icon-active.png" alt="">
-        <p class="color-3267F0">办理</p>
-      </div>
-      <div class="item" @click="linkTo('./Statistics')">
-        <img src="./components/img/statistics-icon.png" alt="">
-        <p>统计</p>
-      </div>
-      <div class="item">
-        <img src="./components/img/set-icon.png" alt="">
-        <p>配置</p>
+    <component
+      v-if="refresh"
+      :is="component"
+      @change="onChange"
+      :params="params">
+    </component>
+    <div class="tabs" v-if="isTab">
+      <div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
+        <img :src="tabIndex == index ? item.activeImg : item.img" alt="">
+        <p :class="tabIndex == index ? 'color-3267F0' : ''">{{item.text}}</p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import List from './List.vue'
+import Statistics from './Statistics.vue'
+import Set from './Set.vue'
+
 export default {
-  props: {},
   name: 'AppHandSnapshot',
   appName: '随手拍',
+
   data() {
     return {
-      datas: [],
-      tabList: [
+      component: 'Statistics',
+      params: {},
+      refresh: true,
+      tabIndex: 1,
+      tabs: [
         {
-          name: '全部待办',
+          img: require('./components/img/handle-icon.png'),
+          activeImg: require('./components/img/handle-icon-active.png'),
+          text: '办理',
+          component: 'List'
         },
         {
-          name: '办件历史',
+          img: require('./components/img/statistics-icon.png'),
+          activeImg: require('./components/img/statistics-icon-active.png'),
+          text: '统计',
+          component: 'Statistics'
         },
+        {
+          img: require('./components/img/set-icon.png'),
+          activeImg: require('./components/img/set-icon-active.png'),
+          text: '配置',
+          component: 'Set'
+        }
       ],
-      list: [
-        {
-          value: '1',
-          label: '江',
-        },
-        {
-          value: '2',
-          label: '湖',
-        },
-      ],
-      currentTabs: 0,
-      current: 1,
-      size: 10,
-      pages: 0,
+      isTab: true
     }
   },
-  computed: {
-    loadmore() {
-      return this.pages <= this.current ? 'loading ' : 'nomore'
-    },
+
+  components: {
+    List,
+    Statistics,
+    Set
   },
-  watch: {},
-  onLoad() {
-    this.getList()
-  },
-  onShow() {},
+
   methods: {
-    getList() {
-      this.$http
-        .post('/app/appvisitvondolence/list', null, {
-          params: {
-            size: this.size,
-            current: this.current,
-            createUserId: this.currentTabs == 1 ? this.user.id : '',
-          },
-        })
-        .then((res) => {
-          if (res.code == 0) {
-            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
-            this.pages = res.data.pages
-          }
-        })
+    onChange(e) {
+      this.params = e.params
+      this.component = e.type
     },
-
-    goDetail(item) {
-      uni.navigateTo({ url: `./Detail?id=${item.id}` })
-    },
-
-    change(index) {
-      this.currentTabs = index
-      this.getList()
-    },
-    linkTo(url) {
-      uni.navigateTo({url})
+    tabClick(index, component) {
+      this.tabIndex = index
+      this.component = component
+      this.refresh = false
+      this.$nextTick(() => {
+        this.refresh = true
+      })
     }
   },
+  onShow() {
+    document.title = "随手拍"
+    uni.$on('hideTab', () => {
+      this.isTab = false
+    })
+    uni.$on('showTab', () => {
+      this.isTab = true
+    })
+  },
   onReachBottom() {
-    this.current = this.current + 1
-    this.getList()
-  },
+    uni.$emit('nextList')
+  }
 }
 </script>
 
-<style scoped lang="scss">
-uni-page-body {
+<style lang="scss" scoped>
+.AppHandSnapshot{
   height: 100%;
 }
-.AppHandSnapshot {
-  height: 100%;
-  .select-top {
-    background: #fff;
-    display: flex;
-    justify-content: space-around;
-    .AiSelect {
-      margin: 30px 0;
+.tabs{
+  width: 100%;
+  height: 98px;
+  background: #FFF;
+  border-top: 1px solid #ddd;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  .item{
+    flex: 1;
+    text-align: center;
+    img{
+      width: 56px;
+      height: 56px;
+      margin-top: 8px;
     }
-  }
-  ::v-deep .AiCard {
-    background: #f3f6f9;
-    padding: 24px 40px 0 32px;
-    .start {
-      background: #fff;
-      border-radius: 16px;
-      .card-top {
-        padding: 32px;
-        .titles {
-          margin-bottom: 34px;
-          font-size: 32px;
-          font-weight: 500;
-          color: #333333;
-          line-height: 1.4;
-          word-break: break-all;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-        }
-        .types,
-        .gards {
-          margin-top: 8px;
-          font-size: 26px;
-          .types-right,
-          .gards-right {
-            margin-left: 32px;
-            color: #333333;
-          }
-        }
-      }
-
-      .status {
-        padding: 32px;
-        border-top: 1px solid #dddddd;
-        .icon {
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          vertical-align: middle;
-          margin-right: 8px;
-        }
-      }
-
-      .status0 {
-        color: #ff883c;
-        .icon {
-          background: #ff883c;
-        }
-      }
-
-      .status1 {
-        color: #1aaaff;
-        .icon {
-          background: #1aaaff;
-        }
-      }
-
-      .status2 {
-        color: #42d784;
-        .icon {
-          background: #42d784;
-        }
-      }
-
-      .status3 {
-        color: #ff4466;
-        .icon {
-          background: #ff4466;
-        }
-      }
+    p{
+      font-size: 22px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #C4CAD4;
+      line-height: 8px;
     }
-  }
-  // ::v-deep .AiCard:last-child {
-  //   padding-bottom: 24px;
-  // }
-  .pad-b120{
-    background-color: #f3f6f9;
-    padding-bottom: 120px;
-  }
-  .tabs{
-    width: 100%;
-    height: 98px;
-    background: #FFF;
-    border-top: 1px solid #ddd;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    .item{
-      flex: 1;
-      text-align: center;
-      img{
-        width: 56px;
-        height: 56px;
-        margin-top: 8px;
-      }
-      p{
-        font-size: 22px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #C4CAD4;
-        line-height: 8px;
-      }
-      .color-3267F0{
-        color: #3267F0;
-      }
+    .color-3267F0{
+      color: #3267F0;
     }
   }
 }
diff --git a/src/apps/AppHandSnapshot/List.vue b/src/apps/AppHandSnapshot/List.vue
new file mode 100644
index 00000000..7d848fad
--- /dev/null
+++ b/src/apps/AppHandSnapshot/List.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="list">
+    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+
+    <div class="select-top">
+      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="所属网格"></AiSelect>
+
+      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="办件状态"></AiSelect>
+    </div>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
+        <template #custom>
+          <div class="card-top">
+            <div class="titles">世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多</div>
+
+            <div class="types">
+              <span>事件类型</span>
+              <span class="types-right">矛盾纠纷</span>
+            </div>
+
+            <div class="gards">
+              <span>所属网格</span>
+              <span class="gards-right">04号网格</span>
+            </div>
+          </div>
+
+          <div class="status status0">
+            <span class="icon"></span>
+            <span>待处理</span>
+          </div>
+        </template>
+      </AiCard>
+    </template>
+
+    <AiEmpty v-else></AiEmpty>
+    <div class="pad-b120" v-if="datas.length"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+      datas: [],
+      tabList: [
+        {
+          name: '全部待办',
+        },
+        {
+          name: '办件历史',
+        },
+      ],
+      list: [
+        {
+          value: '1',
+          label: '江',
+        },
+        {
+          value: '2',
+          label: '湖',
+        },
+      ],
+      currentTabs: 0,
+      current: 1,
+      size: 10,
+      pages: 0,
+    }
+  },
+  computed: {
+    loadmore() {
+      return this.pages <= this.current ? 'loading ' : 'nomore'
+    },
+  },
+  mounted() {
+    console.log(12)
+    this.current = 1
+    this.getList()
+    uni.$on('nextList', () => {
+      this.current ++
+      this.getList()
+    })
+  },
+  methods: {
+    getList() {
+      this.$http
+        .post('/app/appvisitvondolence/list', null, {
+          params: {
+            size: 10,
+            current: this.current,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.pages = res.data.pages
+          }
+        })
+    },
+
+    goDetail(item) {
+      uni.navigateTo({ url: `./Detail?id=${item.id}` })
+    },
+
+    change(index) {
+      this.currentTabs = index
+      this.getList()
+    },
+    linkTo(url) {
+      uni.navigateTo({url})
+    }
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.list {
+  height: 100%;
+  .select-top {
+    background: #fff;
+    display: flex;
+    justify-content: space-around;
+    .AiSelect {
+      margin: 30px 0;
+    }
+  }
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    padding: 24px 40px 0 32px;
+    .start {
+      background: #fff;
+      border-radius: 16px;
+      .card-top {
+        padding: 32px;
+        .titles {
+          margin-bottom: 34px;
+          font-size: 32px;
+          font-weight: 500;
+          color: #333333;
+          line-height: 1.4;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .types,
+        .gards {
+          margin-top: 8px;
+          font-size: 26px;
+          .types-right,
+          .gards-right {
+            margin-left: 32px;
+            color: #333333;
+          }
+        }
+      }
+
+      .status {
+        padding: 32px;
+        border-top: 1px solid #dddddd;
+        .icon {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          vertical-align: middle;
+          margin-right: 8px;
+        }
+      }
+
+      .status0 {
+        color: #ff883c;
+        .icon {
+          background: #ff883c;
+        }
+      }
+
+      .status1 {
+        color: #1aaaff;
+        .icon {
+          background: #1aaaff;
+        }
+      }
+
+      .status2 {
+        color: #42d784;
+        .icon {
+          background: #42d784;
+        }
+      }
+
+      .status3 {
+        color: #ff4466;
+        .icon {
+          background: #ff4466;
+        }
+      }
+    }
+  }
+  // ::v-deep .AiCard:last-child {
+  //   padding-bottom: 24px;
+  // }
+  .pad-b120{
+    background-color: #f3f6f9;
+    padding-bottom: 120px;
+  }
+}
+</style>
diff --git a/src/apps/AppHandSnapshot/PercentageDetail.vue b/src/apps/AppHandSnapshot/PercentageDetail.vue
new file mode 100644
index 00000000..b56086fe
--- /dev/null
+++ b/src/apps/AppHandSnapshot/PercentageDetail.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="PercentageDetail">
+    <div class="header">
+      <div class="left">
+        <h2>小区管理</h2>
+        <p>共21条，已办结18条</p>
+      </div>
+      <div class="right">
+        <h4>86%</h4>
+        <p>办结率</p>
+      </div>
+    </div>
+    <div class="info-content">
+      <div class="title">分类统计</div>
+      <div class="percentage">
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg" style="width:50%;"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg" style="width:40%;"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+      contents: [
+        {
+          label: '待受理',
+          num: 5
+        },
+        {
+          label: '办理中',
+          num: 5
+        },
+        {
+          label: '今日上报',
+          num: 5
+        },
+        {
+          label: '今日办结',
+          num: 5
+        }
+      ]
+    }
+  },
+  onLoad() {
+    
+  },
+  onShow() {},
+  methods: {
+    getList() {
+      this.$http
+        .post('/app/appvisitvondolence/list', null, {
+          params: {
+            size: this.size,
+            current: this.current,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.pages = res.data.pages
+          }
+        })
+    },
+
+    goDetail(item) {
+      uni.navigateTo({ url: `./Detail?id=${item.id}` })
+    },
+
+    change(index) {
+      this.currentTabs = index
+      this.getList()
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.PercentageDetail {
+  background-color: #F3F7F8;
+  padding: 32px 30px 0;
+  .header{
+    width: 100%;
+    background: #FFF;
+    border-radius: 16px;
+    margin-bottom: 30px;
+    display: flex;
+    padding: 32px 32px 38px 24px;
+    box-sizing: border-box;
+    .left{
+      width: calc(100% - 112px);
+      h2{
+        font-size: 42px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333;
+        line-height: 48px;
+        margin-bottom: 16px;
+      }
+      p{
+        font-size: 30px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #999;
+        line-height: 42px;
+      }
+    }
+    .right{
+      width: 112px;
+      background: #E6FFF1;
+      border-radius: 8px;
+      text-align: center;
+      color: #42D784;
+      h4{
+        font-size: 36px;
+        font-family: DINAlternate-Bold, DINAlternate;
+        font-weight: bold;
+        line-height: 42px;
+        padding: 8px 0 4px 0;
+      }
+      p{
+        font-size: 24px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        line-height: 34px;
+      }
+    }
+  }
+  .info-content{
+    width: 100%;
+    background: #FFF;
+    border-radius: 16px;
+    margin-bottom: 24px;
+    .title{
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333;
+      line-height: 48px;
+      padding: 24px 16px 24px 24px;
+      img{
+        float: right;
+        width: 40px;
+        height: 40px;
+      }
+    }
+    .percentage{
+      padding: 16px 0 0 26px;
+      .item{
+        width: 100%;
+        padding-bottom: 32px;
+        .mini-title{
+          font-size: 30px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 48px;
+          margin-bottom: 14px;
+        }
+        .info{
+          width: 100%;
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #999;
+          line-height: 48px;
+          .line-bg{
+            display: inline-block;
+            width: 63%;
+            height: 14px;
+            background: #D7D8D9;
+            border-radius: 8px;
+            margin-right: 12px;
+            .active-bg{
+              width: 80%;
+              height: 100%;
+              background: #257FF1;
+              border-radius: 8px;
+            }
+          }
+          img{
+            width: 32px;
+            height: 32px;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/apps/AppHandSnapshot/Set.vue b/src/apps/AppHandSnapshot/Set.vue
new file mode 100644
index 00000000..be5fe84c
--- /dev/null
+++ b/src/apps/AppHandSnapshot/Set.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="set">
+    <div class="info-content" @click="toSetList">
+      <img src="./components/img/setting-icon.png" alt="" class="set-icon">
+      <div class="info">
+        <h2>配置事件类别</h2>
+        <p>提交上报时选择事件类别，有助于管理上报和统计分析</p>
+      </div>
+      <img src="./components/img/right-icon.png" alt="" class="right-icon">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    toSetList() {
+      uni.navigateTo({url: './SetList'})
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.set {
+  height: 100%;
+  padding: 32px 30px 0;
+  box-sizing: border-box;
+  background-color: #F3F7F8;
+  .info-content{
+    width: 100%;
+    background-color: #fff;
+    padding: 40px 8px 34px 40px;
+    box-sizing: border-box;
+    display: flex;
+    .set-icon{
+      width: 40px;
+      height: 40px;
+      margin-right: 44px;
+    }
+    .info{
+      display: inline-block;
+      width: calc(100% - 216px);
+      h2{
+        font-size: 36px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 48px;
+        margin-bottom: 6px;
+      }
+      p{
+        width: 100%;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #999;
+        line-height: 40px;
+        word-break: break-all;
+      }
+    }
+    .right-icon{
+      width: 56px;
+      height: 56px;
+      margin-left: 76px;
+    }
+  }
+}
+</style>
diff --git a/src/apps/AppHandSnapshot/SetList.vue b/src/apps/AppHandSnapshot/SetList.vue
new file mode 100644
index 00000000..2bb895bf
--- /dev/null
+++ b/src/apps/AppHandSnapshot/SetList.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="SetList">
+    <div class="header">
+      <div class="title">事件类别</div>
+      <p>成员上报时需要选择事件类别，上报会按照分类进行统计。</p>
+    </div>
+    <div class="set-list">
+      <div class="item">
+        <div class="title">小区管理</div>
+        <div class="tips-list">
+          <span class="tips">公共部位设置地桩锁</span>
+          <span class="tips">公共部位桩锁</span>
+          <span class="tips">地桩锁</span>
+          <span class="tips">公共部位设置地桩锁</span>
+          <span class="tips">公共部位桩锁</span>
+          <span class="tips">地桩锁</span>
+          <span class="tips">公共部位设置地桩锁</span>
+          <span class="tips">公共部位桩锁</span>
+          <span class="tips">地桩锁</span>
+        </div>
+        <img src="./components/img/right-icon.png" alt="">
+      </div>
+    </div>
+    <div class="btn">新建分类</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SetList',
+  components: {},
+  props: {
+    dict: Object,
+    instance: Function,
+    params: Object,
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.SetList {
+  height: 100%;
+  background-color: #fff;
+  .header{
+    padding: 40px 30px 74px;
+    .title{
+      font-size: 42px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #333;
+      line-height: 48px;
+      margin-bottom: 16px;
+    }
+    p{
+      width: 100%;
+      font-size: 30px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 42px;
+      word-break: break-all;
+    }
+  }
+  .set-list{
+    padding: 0 28px 120px;
+    .item{
+      width: 100%;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #E9EAEB;
+      position: relative;
+      .title{
+        font-size: 34px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 48px;
+        margin-bottom: 22px;
+      }
+      .tips-list{
+        width: calc(100% - 68px);
+      }
+      .tips{
+        display: inline-block;
+        line-height: 64px;
+        background: #F7F8F9;
+        border-radius: 8px;
+        padding: 0 20px;
+        font-size: 30px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #999;
+        margin: 0 16px 24px 0;
+      }
+      img{
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: 50%;
+        right: 20px;
+      }
+    }
+  }
+  .btn{
+    width: 100%;
+    line-height: 112px;
+    background: #3975C6;
+    box-shadow: inset 0px 1px 0px 0px #EEEEEE;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+  }
+}
+</style>
diff --git a/src/apps/AppHandSnapshot/Statistics.vue b/src/apps/AppHandSnapshot/Statistics.vue
index 12be8a40..35fca08e 100644
--- a/src/apps/AppHandSnapshot/Statistics.vue
+++ b/src/apps/AppHandSnapshot/Statistics.vue
@@ -1,21 +1,85 @@
 <template>
-  <div class="Statistics">
-   
-    <div class="pad-b120"></div>
-    <div class="tabs">
-      <div class="item">
-        <img src="./components/img/handle-icon.png" alt="">
-        <p>办理</p>
-      </div>
-      <div class="item">
-        <img src="./components/img/statistics-icon-active.png" alt="">
-        <p class="color-3267F0">统计</p>
-      </div>
-      <div class="item">
-        <img src="./components/img/set-icon.png" alt="">
-        <p>配置</p>
+  <div class="statistics">
+    <div class="gird-select">
+      <img src="./components/img/gird-icon.png" alt="">
+      <span>全部网格</span>
+      <img src="./components/img/down-icon.png" alt="">
+    </div>
+    <div class="info-content">
+      <div class="title">今日概况</div>
+      <div class="el-row">
+        <div class="item" v-for="(item, index) in contents" :key="index">
+          <h2>{{item.num}}</h2>
+          <p>{{item.label}}</p>
+        </div>
       </div>
     </div>
+    <div class="info-content">
+      <div class="title">业务透视</div>
+      <div class="business">
+        <div class="left">
+          <div class="item">
+            <p>受理率</p>
+            <h2>83.3%</h2>
+          </div>
+          <div class="item">
+            <p>办结率</p>
+            <h2>83.3%</h2>
+          </div>
+        </div>
+        <div class="right">
+          <div class="img">
+            <img src="./components/img/line-img.png" alt="">
+            <img src="./components/img/line-img.png" alt="">
+          </div>
+          <div class="num">
+            <div class="item bg1">
+              <h2>累计反馈</h2>
+              <p>30</p>
+            </div>
+            <div class="item bg2">
+              <h2>累计受理</h2>
+              <p>30</p>
+            </div>
+            <div class="item bg3">
+              <h2>累计办理</h2>
+              <p>30</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="info-content">
+      <div class="title" @click="toPercentageDetail">分类统计
+        <img src="./components/img/right-icon.png" alt="">
+      </div>
+      <div class="percentage">
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg" style="width:50%;"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+        <div class="item">
+          <div class="mini-title">小区管理</div>
+          <div class="info">
+            <div class="line-bg" style="width:40%;"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="info-content">
+      <div class="title">成员明细
+        <img src="./components/img/right-icon.png" alt="">
+      </div>
+    </div>
+    <div class="pad-b120"></div>
   </div>
 </template>
 
@@ -24,7 +88,24 @@ export default {
   props: {},
   data() {
     return {
-
+      contents: [
+        {
+          label: '待受理',
+          num: 5
+        },
+        {
+          label: '办理中',
+          num: 5
+        },
+        {
+          label: '今日上报',
+          num: 5
+        },
+        {
+          label: '今日办结',
+          num: 5
+        }
+      ]
     }
   },
   onLoad() {
@@ -57,53 +138,198 @@ export default {
       this.currentTabs = index
       this.getList()
     },
-  },
-  onReachBottom() {
-    this.current = this.current + 1
-    this.getList()
+
+    toPercentageDetail() {
+      uni.navigateTo({url: './PercentageDetail'})
+    }
   },
 }
 </script>
 
 <style scoped lang="scss">
-uni-page-body {
-  height: 100%;
-}
-.Statistics {
-  height: 100%;
-
-  .pad-b120{
-    background-color: #f3f6f9;
-    padding-bottom: 120px;
-  }
-  .tabs{
+.statistics {
+  background-color: #F3F7F8;
+  padding: 30px 30px 0;
+  .gird-select{
     width: 100%;
-    height: 98px;
     background: #FFF;
-    border-top: 1px solid #ddd;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    .item{
-      flex: 1;
-      text-align: center;
+    border-radius: 16px;
+    margin: 0 0 24px;
+    text-align: center;
+    padding: 24px 0;
+    img{
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+    }
+    span{
+      display: inline-block;
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333;
+      line-height: 48px;
+      margin: 0 10px;
+    }
+  }
+  .info-content{
+    width: 100%;
+    background: #FFF;
+    border-radius: 16px;
+    margin-bottom: 24px;
+    .title{
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333;
+      line-height: 48px;
+      padding: 24px 16px 24px 24px;
       img{
-        width: 56px;
-        height: 56px;
-        margin-top: 8px;
+        float: right;
+        width: 40px;
+        height: 40px;
       }
-      p{
-        font-size: 22px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #C4CAD4;
-        line-height: 8px;
+    }
+    .el-row{
+      display: flex;
+      padding: 32px 0 60px 0;
+      .item{
+        flex: 1;
+        text-align: center;
+        h2{
+          font-size: 64px;
+          font-family: DINAlternate-Bold, DINAlternate;
+          font-weight: bold;
+          color: #3B424A;
+          line-height: 64px;
+          margin-bottom: 8px;
+        }
+        p{
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #999;
+          line-height: 40px;
+        }
       }
-      .color-3267F0{
-        color: #3267F0;
+    }
+    .business{
+      display: flex;
+      padding: 40px 0 30px 0;
+      .left{
+        width: 240px;
+        padding: 20px 0 78px 64px;
+        .item{
+          margin-bottom: 58px;
+        }
+        h2{
+          font-size: 58px;
+          font-family: DINAlternate-Bold, DINAlternate;
+          font-weight: bold;
+          color: #3B424A;
+          line-height: 64px;
+        }
+        p{
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #666;
+          line-height: 48px;
+        }
+      }
+      .right{
+        width: calc(100% - 240px);
+        display: flex;
+        .img{
+          width: 140px;
+          margin-top: 42px;
+          img{
+            width: 140px;
+            height: 144px;
+            margin-bottom: 20px;
+          }
+        }
+        .num{
+          width: calc(100% - 140px);
+          text-align: center;
+          .item{
+            height: 130px;
+            border-radius: 6px;
+            background-size: 100% 100%;
+            margin-bottom: 4px;
+            color: #2F7EE5;
+            h2{
+              font-size: 26px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              line-height: 48px;
+              padding-top: 20px;
+            }
+            p{
+              font-size: 40px;
+              font-family: DINAlternate-Bold, DINAlternate;
+              font-weight: bold;
+            }
+          }
+          .bg1{
+            width: 304px;
+            background-image: url('./components/img/bg-1.png');
+          }
+          .bg2{
+            width: 266px;
+            background-image: url('./components/img/bg-2.png');
+            margin-left: 16px;
+          }
+          .bg3{
+            width: 240px;
+            background-image: url('./components/img/bg-3.png');
+            margin-left: 32px;
+          }
+        }
+      }
+    }
+    .percentage{
+      padding: 16px 0 0 26px;
+      .item{
+        width: 100%;
+        padding-bottom: 32px;
+        .mini-title{
+          font-size: 30px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 48px;
+          margin-bottom: 14px;
+        }
+        .info{
+          width: 100%;
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #999;
+          line-height: 48px;
+          .line-bg{
+            display: inline-block;
+            width: 63%;
+            height: 14px;
+            background: #D7D8D9;
+            border-radius: 8px;
+            margin-right: 12px;
+            .active-bg{
+              width: 80%;
+              height: 100%;
+              background: #257FF1;
+              border-radius: 8px;
+            }
+          }
+          img{
+            width: 32px;
+            height: 32px;
+            vertical-align: middle;
+          }
+        }
       }
     }
   }
+  .pad-b120{
+    background-color: #F3F7F8;
+    padding-bottom: 120px;
+  }
 }
 </style>
diff --git a/src/apps/AppHandSnapshot/components/img/bg-1.png b/src/apps/AppHandSnapshot/components/img/bg-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..696022e93806bb48a7bc137a122a269f70275edf
GIT binary patch
literal 3281
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
Ba)kf@

literal 0
HcmV?d00001

diff --git a/src/apps/AppHandSnapshot/components/img/bg-2.png b/src/apps/AppHandSnapshot/components/img/bg-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..98fa31b8a68f48511bf40e63c0858bb078e5db4f
GIT binary patch
literal 2775
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
CmT~$3

literal 0
HcmV?d00001

diff --git a/src/apps/AppHandSnapshot/components/img/bg-3.png b/src/apps/AppHandSnapshot/components/img/bg-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc46956756ef486a989265006f6da9cf4f702c24
GIT binary patch
literal 2617
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
G5&JJfIDJF_

literal 0
HcmV?d00001

diff --git a/src/apps/AppHandSnapshot/components/img/down-icon.png b/src/apps/AppHandSnapshot/components/img/down-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ffcc7a216871735826c211c1adf6f7eeba4cf1f
GIT binary patch
literal 314
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}Up!qLLn7SY
zPT9zJNI{_O|83Kk-ak^>jKa#@%inSwQU9zu>qXr%->j$!Or<Z1)_jnc|NmDe@v*D)
zeSSs(_9Kji3a=buuZJ`63flG<rZdDCZ1KphO@5}_a4o93Gjlpa97EaO2{Yx-Sx)72
z^wM;9`TO*5Rdn|EqYP26t&PnW8welTFXM7WD%tNS14C01XUC<_%)zh3pNO5c6_=RE
zB%!c(-mjS+Z}rp6*%i1hmd;(b>XZ*txYUgl?qy#NdNbNE%5XJX6{}ot4E(~KbmR0N
z)zwB1y8peZ3|Nz}>+CH<zg<%&e~Mncg;l%qu@S_*4l+L&R%*^vT=oCRWT5{UJYD@<
J);T3K0RRLQd{6)Y

literal 0
HcmV?d00001

diff --git a/src/apps/AppHandSnapshot/components/img/gird-icon.png b/src/apps/AppHandSnapshot/components/img/gird-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7f3e61f449cbc813b5f583fce609391bc851077
GIT binary patch
literal 1100
zcmV-S1he~zP)<h;3K|Lk000e1NJLTq001BW001Hg1^@s6KC;{Y00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91AfN*P1ONa40RR91A^-pY0M<q^lK=n%wn;=mR9Fe^R%vKcK@gtV#F(TN
zY4C@jpjc59^pA=NDrgT;@dOVLybn;kikj4>Hq~mI;)#fOA&NgdK=g-7+Z6ExQSgW2
z52=bMC<qnN<fYoYaW?HHFVEz)sS$tZgZFlKu5aG#?93wc;8}2)9IdY+s{wFJhdLeh
z6uM7eS%}}WHHX<KFtF`&OLVCYR0TkTQg!jI0IV(;>O9Ym#8P>gSKV@eh_E=QEdqjS
zo)61xj$?xO5)i6FUe_g_la;LGb?HEHU3d-=?BRD*SH_HdM0mz;WyqIz-AFgjGdfUG
z8!gpAui-x)XI9E)%~5zPK=_-=osH@AesQ3vUYkTQssW<O=@fcQL%fSN^f&Kt-80%q
zI8YJ{kJV#P!<#nED3I$p12za7_?x_WPo!;}ULP&|-mdQ_pt-pQv$BVP*Bo}S&E6K%
zZ}5>CZYBIDc=CrCdxZEC#<Q_0dfUWI8IEj}av>`*JFq*g71f5vaRPGoLuoDmGTK0B
zv<aw4B%xVQ9z$rSy}U=0%)H-PcXbTS#{XI&GCT6uO0m%q*^El-w8c6=pgYZok5-`3
z=epRfW>i!cIY2sb;^CRz`L5%)Hes6)+&GW7<5$sTI?=AQ?HF-)L80@URXbjAjPhH*
zM#~s;B{$0koLU=s!*zdf90>8fU?UU9JI@BDV7n3AIFDaQUPsmd;pPrKI^r4PK4o<w
zS$>wB?>=bj38|b<TE9-b7VJEJ$C)@L0fN}Vj#N$bIxhwgIr2S!0=LP2|50>BJZeM(
zla}y~5VnnpW>g%E%;zq+hik#eq!2tu8&o!X^Rg~fDsT8|w3{P5RN3SL^hBVjQ0+P4
zfE3^i6Ax;mOLQceY(o-C+|xmbie|5~NztsvsdeF595>lnM=Lo7dcp0uGURn%RWv!K
zIG`A7Pf)Lx*2pR(^m9QPpy(`q$1Y%JqtE>?NlVU(g4z_&xrh->P*ncoHz+W`+j$|~
zcBXYeDaRA%qqc#a@FfyQG7)YH=;aTUJD$p=%p)H5@wKg3uI0mqKk%of(BnRJavlEY
zp#J)`bU=yE4pN^mMYjU!Wen0cPUkbk$}*gG{^L1HmT9dZFz9i(j$SE4P0=%rm`xp+
zc91-=Hf;wxv5}+VPBn_(*r!8??gJqoeo5seS2?KzGwP{-o33pK9p-TuVto0&>d1HP
z=OXqg36(ngUk6k?{?`E&2{l?C!+)a=s8Dog%takA<5+HiSy-)mQU{c-dHe}0ayLk=
Sy>wjw0000<MNUMnLSTYw%i_ZT

literal 0
HcmV?d00001

diff --git a/src/apps/AppHandSnapshot/components/img/line-img.png b/src/apps/AppHandSnapshot/components/img/line-img.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d42385526374b0c7892bccdd7c96dac529c31d6
GIT binary patch
literal 1667
zcmeAS@N?(olHy`uVBq!ia0vp^eLy^mgAGX5?<!~oQjEnx?oJHr&dIz4a$Hg)JkxxA
z8MJ_G4hF{dOa>N^5+IfWVg?501&j>LK$;OGwtxvP+qZxj&YlHQsQjz=5Ca42TTd6q
zkP61Px4koBLS>GBEIy~=8y(+W_WsaZ>$^KNU#T=+*|Thdi{o1UfWlzcqwXwIgSPx=
zSRiuuN0+v|?;KC7Of5+^7pJ3+2Yrv0iaTjbuui>D-JhOU-F|XT@q0_b-3H&IHOimW
z|0{n`_v`Vwxu2IiePC~_S5(+u?U%c?&@a1iu|Spo_np_j#c!{#_^~a1clO)sSFdjE
zcIvL(Tl!1C`;WQZtCP;<y!$R^*O=b_p8Nao)_<qxY*sb7{g21*#!RNQVXN(5pSpH!
z-`(x|_W2cTYTydmzHimE=(T%49__vCw2EI_`RUIli-MWAMFQ^rJ)2fsUXqyXnO(d4
z!pAk1d6DnmJuThHx{c-W_x)cvKVPs`X|aiab=y>HX;1gr!&lQeOMqsDOK*3Js!u<(
zY2}h#sYy%z1Yh&KBKYD?;hD9m=L$3wzsf9Bl(1{`E7%fn{LI_*xR}kqcf41*Cg{Mx
z$RYqIcCltHm!7}<f7$hlUWa)OMzYtP&Ob5T*yga_AzglXdE<AEC!7LvY-Fz)v2ysS
z@p4x(v8emEZ}n+>@-Tv{vOJBQn?s?2feAs#F{XveDNNG^QevE~0*q!1&Qo4&WZ~#@
zby9R`c+jG8F_}|9rn|+dgJJV30o5vmQ-G|-7@)SDHab=;GeRu`G=8$)VE7_^@u7f%
z1)qpl9b?mD^F@ah9SUSLru<<#v+9pq$*A3+5E!~)uETgUF2d@v#iFe{cIG?C%4$!q
zKbf_x&p~U#o5wRQ@MN!*-@irj?o7P`7X|+Zr`Q(!v&y{msc%o(H31LSNe?s>XL~w!
zznr=`eZ9Z9rP2h|2`uT49$fhDbfQhH>i@I+db{~oefCN)#fQAMpR?xL{1dxxX~%~;
zO<7Xm=e4r+!r@Bw4ck7mPPwFh#y90$%k!0MR=;IY-}&03^hX=x(PF=8VUDkYCqI_=
zSSe@vurhn$wog5;H%*@ZcpYmNhmOuw`L5(#Czbda>w5Oy)O9M@Wm=KTsS_41*WvPK
zV!)%LGf#fJewi)50F>u1w)V;|y>NfV?d#K5h5WL-6>Jr6S@59$i?hYMoW{vpgTK$-
zyRU!h6n)>&V}0A#Uz49>e71U##jh>XkKNffYihG|^WM_U+_o8c`Mvk7{!VxOx8AOM
z>(t*$vgc<X*ke?i@#pHf!-endOMcY>i-E}a{|9`XPDW1Nyx!-^IZwr%x0g7uT4t&0
zsqWu3_14vWDeq;ME9k|f^&L1=^!J{{rTH8y`_6^9^>2;l^y8E8cA60%)_!(zd!<E~
z{&}CiebZ(M%n4~)thym$t-TEA-+hy^%2pZuaw~8CF1dX7%<D%54dVU#w>T%y%bxd^
z*EhP++OKevK+RHa@8xpc$sgx&p1qv*_<ip6&Xe{1g}MRS>l*r=HmAjvreqbpx%)_~
d;Ayz)19>go4Z^)kqFq20fTydU%Q~loCIAJ6o^SvF

literal 0
HcmV?d00001

diff --git a/src/apps/AppHandSnapshot/components/img/right-icon.png b/src/apps/AppHandSnapshot/components/img/right-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1c626b7c87f84c92030092297eed2f61f7a8eec
GIT binary patch
literal 373
zcmV-*0gC>KP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px$FG)l}RA@u(*f9=*KoAAcnchnP*RnI##yfZbdqe5577pP7#z19^gamf}teZ~_
zv-|$1*sMzBk5=vz0{^{XHpm7GPk_H@;RUU3j}5LyRQL;Qu<(Lbx5oxoBP#p_Hn^vt
zVHj>^b`g=jZQHA=+Man^zIAOdrSuY!!?ZC~?VF}KqmkagyNFB;&QAo=6=-HUj^o43
zPEkl#;Dm}sx&xz;5MU${28=>Nfe}bJ5RD80B9URhC8UTPyRLg~IhOtUhQM4&e$PQ2
z074o>;pX$NS3^s4kvKRIje`Osa4=vL4g!qCxdWqd?!c5%-B%XXUpiHPZHPWZ6nEH0
z1OPv(AyA)d5Qt7Z_j+tFccSQdY!IDz?)BJU?nKe^*dRLb-0QKy+=-&+Ro~zn`K16z
TcgI<d00000NkvXXu0mjfWagc2

literal 0
HcmV?d00001

diff --git a/src/apps/AppHandSnapshot/components/img/setting-icon.png b/src/apps/AppHandSnapshot/components/img/setting-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..29e4b29ff4ae3c5560d77c6b1cbd47029d3a470b
GIT binary patch
literal 1328
zcmV-01<(44P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91D4+uX1ONa40RR91C;$Ke0D9(TtN;K6nn^@KR9Fe^SZ`=sRTRJHHtiO>
zb{InuSyh-*J7*Hc6a{67LvRT5gH$Jj>5?u@1hEWMaA@$8g3^kTrcG-5K^>Or2NC=v
zPGKt|ib>XKME%gMcH%biU$>=s@A$h(^L%|THGN4IKiCV&J@=e*&;7k~?>+b2E5uq^
z^T2=W0jhQQP%_&i3i@GYaR-ca!A=gp_dC3v!NK0{3$@y{_NxhCD3RUAtW5|OEfoxY
z-{x+;JO21BXRNYX+R|yKa3Z@y=-T)axSs^cXC%peM3f>yIty__{=(u1PVKIw@7ROE
z;q(!~{0Nblcdu*rzkXoLFJ<F>!<ol)*2h)bC27}4zyIU1tk&8FFceS!!GbqbGbn|8
zF&Xu}VATu8zn%l{8Y|yvdn_6#Vskvj#z0d4&7e&Lrnw^Dq~eHlS+y}hFA*DyU&rDy
z>kx|=GjG?K9s)5GBht(AaN>kt)3uvan@GOI#K+4rYb{~K%B$2~Hh3ikD=!$&JSv3#
zw&DZ(6c*d_Zuk1Rg+CW|0{j~o_gYBKb$UJBjR-f60RjN^B{Jiv_gldi+eCR6iQSFZ
zAj+QOH3+Zqrki~sDa9es=a+#bnuZs5HVT}w?bw56K(SBQHJ>|qqsDrdlr6c@@YZ>=
z{C`2$<-uA!6iQ@vBhdGvZ#Pb(zXb88Qg)<9!<#FHr=|gnPR?w|pDVnD&9%q+VF+Yr
zS-2h?i)=e)l{wxdRs*YT=g$^WWpIeKUrG{#*kngQUqVFm3ZZ@UMC#;qR(rNUZB=MQ
z``}1=yQcBOC0q1LGU9t$MFZ9D8=VQTR`?9l-f?Mh@vvf*^h*D>DMm8zg;}9q8UrYM
zKf`-5c<a|qJ-)8kJybB;4GpK`kVg>tFM@wU$;Kl7+f;4$AoC6-Xjmco9j?kNdpP=L
zt>Bi%St!=b>rpQo-v&@+DNCIiQt8Y;BB-~kL=j=PCptcJwKbWA==!3RXqK2J6kRU1
zDJ}~dSx4W@cIPi@IRJ5E#~y22*RnT$;MP+r(4YP$Gr%NX#u|i(22xS~ka_H;08|4a
z&wL7b=Afbh1j!Kp0B?E0yRyU+$2+`N?Xo5qO$#&1GbChKZ4`i#2+~`M;INyqqu*&2
z@&PNjCE%)RUMU9b^NaThoi+p88C<(QPaX_>w-SQ7rnni&LQMb_u(@3NNv!MV5WhUe
z*CX9>5gi)o_e~qTItj;X5P<0Px0#f#i&vL{Q$U#SEHEDpC(`%UiOcBj7+`2PyBEOr
zD+^fMQ`FkB^@`5+jZ)Aav}Xabt)Po{2PRLsjZx|#Y*XA9&)knFQ1#LTbkp7azPn=f
zOVd|sm)3h}N=5=7s_(L$BrraS?Bbt$vE}krJP^=P5>J`IDPtr3+tP@4>W!v{S$`Ix
zWW{1!1y|H4W&4h&*s!O|jRtKZ@PQTiCKX4dZHlY){<o)(U_6br$rH-PWqbOl22ed7
z;c`BW*;C6yJs!P=X_(Umt9x;<xc-o0rJ{k`tJzwO+_49h(Plos)da8zvcdx<PT2Q4
mJ)WUTXX<LawWf19Jn%PokklQ(!s5ID0000<MNUMnLSTZT{bRxa

literal 0
HcmV?d00001