From 45b90df1c734d934f3bba744ceadbf95ca374979 Mon Sep 17 00:00:00 2001
From: 13176889840 <13176889840@163.com>
Date: Fri, 10 Dec 2021 17:50:40 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A0=94=E5=88=A4=E5=88=86=E6=9E=90=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../visual/communityParty/community.vue       |   2 +-
 .../visual/communityParty/dialogInfo.vue      |   2 +-
 src/views/modules/visual/cpts/analyse.vue     | 621 ++++++++++++++++++
 3 files changed, 623 insertions(+), 2 deletions(-)

diff --git a/src/views/modules/visual/communityParty/community.vue b/src/views/modules/visual/communityParty/community.vue
index f04d0a83..7d3ab662 100644
--- a/src/views/modules/visual/communityParty/community.vue
+++ b/src/views/modules/visual/communityParty/community.vue
@@ -126,7 +126,7 @@ export default {
   data () {
     return {
 
-      showedMoreInfo: false,
+      showedMoreInfo: true,
       tableLoading: false,
       warningList: [],
       headerList: [
diff --git a/src/views/modules/visual/communityParty/dialogInfo.vue b/src/views/modules/visual/communityParty/dialogInfo.vue
index 44464f5e..de24cdb1 100644
--- a/src/views/modules/visual/communityParty/dialogInfo.vue
+++ b/src/views/modules/visual/communityParty/dialogInfo.vue
@@ -68,7 +68,7 @@
             <div class="item">
               <span class="item-field">评价：</span>
               <span>
-                <el-rate value="4" disabled></el-rate>
+                <el-rate :value="4" disabled></el-rate>
               </span>
             </div>
           </div>
diff --git a/src/views/modules/visual/cpts/analyse.vue b/src/views/modules/visual/cpts/analyse.vue
index e69de29b..4c3ed117 100644
--- a/src/views/modules/visual/cpts/analyse.vue
+++ b/src/views/modules/visual/cpts/analyse.vue
@@ -0,0 +1,621 @@
+<template>
+  <div class="analyse-container">
+    <div class="analyse-wr list-wr">
+
+      <div class="analys-col">
+        <div class="analys-family">
+          <div class="family-title">(家属)</div>
+          <div v-for="(item, index) in userList" :key="index" class="family-item" @click="handleUser(item)">{{item.icUserName}}</div>
+          <!-- <div class="family-item">王亚男哈</div>
+          <div class="family-item">王亚男</div>
+          <div class="family-item">王亚男哈</div>
+          <div class="family-item">王亚</div> -->
+        </div>
+      </div>
+
+      <div class="analys-col">
+        <img class="analys-arrow" src="../../../../assets/img/shuju/measure/zuo@2x.png" />
+      </div>
+
+      <div class="analys-col">
+        <div class="analys-person">
+          <div class="personal-name">{{userName}}</div>
+          <div class="personal-tips">(案件居民)</div>
+        </div>
+      </div>
+
+      
+      <template v-if="hasEvent">
+        <div class="analys-col analys-col-posi">
+          <img class="analys-up" src="../../../../assets/img/shuju/measure/up-right.png" />
+          <img class="analys-up analys-down" src="../../../../assets/img/shuju/measure/down-right.png" />
+        </div>
+        <div class="analys-col">
+          <div class="cate-list cate-list-more">
+            <div class="cate-row">
+
+              <div class="analys-col">
+                <div class="analys-cate" @click="handleTabs('group')">
+                  <div class="label">楼院小组</div>
+                  <div class="tips">(反应渠道)</div>
+                  <div class="icon">
+                    <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="sourceTab === 'group'" class="analys-col">
+                <img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
+              </div>
+
+            </div>
+
+            <div class="cate-row">
+
+              <div class="analys-col">
+                <div class="analys-cate" @click="handleTabs('event')">
+                  <div class="label">事件上报</div>
+                  <div class="tips">(反应渠道)</div>
+                  <div class="icon">
+                    <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="sourceTab === 'event'" class="analys-col">
+                <img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+
+        <div class="analys-col analys-col-wr list-wr" id="scroll-wr">
+          <div class="cate-list cate-list-child">
+            <div v-for="(item, index) in tempList" :key="index" class="cate-row">
+
+              <div class="cate-col">
+                <div class="analys-cate">
+                  <div class="label">{{item.categoryName}}</div>
+                  <div class="tips">(同类案件)</div>
+                  <div class="icon">
+                    <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
+                  </div>
+                </div>
+              </div>
+
+              <img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
+
+              <div class="cate-col">
+                <div class="list list-wr">
+                  <div v-for="(n, i) in item.projectList" :key="index" class="item" @click="handleProject(n)">
+                    <div class="item-status" :class="'item-status-'+n.status">{{filterStatus(n.status)}}</div>
+                    <div class="item-content">{{n.title}}</div>
+                  </div>
+                  <!-- <div class="item">
+                    <div class="item-status">已结案</div>
+                    <div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
+                  </div> -->
+                  
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="analys-col">
+          <img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
+        </div>
+
+        
+
+        <div class="analys-col">
+          <div class="analys-cate">
+            <div class="label">楼院小组</div>
+            <div class="tips">(反应渠道)</div>
+            <div class="icon">
+              <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
+            </div>
+          </div>
+        </div>
+
+        <div class="analys-col">
+          <img class="analys-up" src="../../../../assets/img/shuju/measure/up-right.png" />
+          <img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
+          <img class="analys-up analys-down" src="../../../../assets/img/shuju/measure/down-right.png" />
+        </div>
+
+        <div class="analys-col analys-col-wr list-wr">
+          <div class="cate-list pad10">
+            <div v-for="(item, index) in tempList" :key="index" class="cate-row">
+
+              <div class="cate-col">
+                <div class="analys-cate">
+                  <div class="label">{{item.categoryName}}</div>
+                  <div class="tips">(同类案件)</div>
+                  <div class="icon">
+                    <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
+                  </div>
+                </div>
+              </div>
+
+              <img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
+
+              <div class="cate-col">
+                <div class="list list-wr">
+                  <div v-for="(n, i) in item.projectList" :key="index" class="item" @click="handleProject(n)">
+                    <div class="item-status" :class="'item-status-'+n.status">{{filterStatus(n.status)}}</div>
+                    <div class="item-content">{{n.title}}</div>
+                  </div>
+                  <!-- <div class="item">
+                    <div class="item-status">已结案</div>
+                    <div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
+                  </div> -->
+                  
+                </div>
+              </div>
+
+            </div>
+            <!-- <div class="cate-row">
+
+              <div class="cate-col">
+                <div class="analys-cate">
+                  <div class="label">楼院小组</div>
+                  <div class="tips">(同类案件)</div>
+                  <div class="icon">
+                    <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
+                  </div>
+                </div>
+              </div>
+
+              <img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
+
+              <div class="cate-col">
+                <div class="list list-wr">
+                  <div class="item">
+                    <div class="item-status">已结案</div>
+                    <div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
+                  </div>
+                  <div class="item">
+                    <div class="item-status">已结案</div>
+                    <div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
+                  </div>
+                  <div class="item">
+                    <div class="item-status">已结案</div>
+                    <div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
+                  </div>
+                  <div class="item">
+                    <div class="item-status">已结案</div>
+                    <div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
+                  </div>
+                  <div class="item">
+                    <div class="item-status">已结案</div>
+                    <div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
+                  </div>
+                </div>
+              </div>
+
+            </div> -->
+
+          </div>
+        </div>
+      </template>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Analyse',
+  props: {
+    hasEvent: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      sourceTab: 'group',
+      userList: [
+        {
+          homeId: '1',
+          icUserId: '1',
+          icUserName: '沾上干'
+        },
+        {
+          homeId: '2',
+          icUserId: '2',
+          icUserName: '李四'
+        },
+        {
+          homeId: '3',
+          icUserId: '3',
+          icUserName: '王五哈哈'
+        }
+      ],
+      userName: '王亚男哈',
+      groupList: [
+        {
+          categoryName: '哈哈哈',
+          categoryCode: '1',
+          projectList: [
+            {
+              title: '我也不知道该谢谢什么啊啊啊',
+              status: 'pending',
+              projectId: '10'
+            }
+          ]
+        },
+        {
+          categoryName: '啊啊啊啊',
+          categoryCode: '2',
+          projectList: [
+            {
+              title: '我也不知道该谢谢什么啊啊啊',
+              status: 'pending',
+              projectId: '12'
+            }
+          ]
+        },
+        {
+          categoryName: '啦啦啦',
+          categoryCode: '3',
+          projectList: [
+            {
+              title: '我也不知道该谢谢什么啊啊啊',
+              status: 'closed',
+              projectId: '13'
+            }
+          ]
+        },
+        {
+          categoryName: '为民服务',
+          categoryCode: '4',
+          projectList: [
+            {
+              title: '我也不知道该谢谢什么啊啊啊',
+              status: 'pending',
+              projectId: '14'
+            }
+          ]
+        }
+      ],
+      eventList: [
+        {
+          categoryName: '辨明服务',
+          categoryCode: '1',
+          projectList: [
+            {
+              title: '不知道写了什么哈哈哈',
+              status: 'closed',
+              projectId: '1'
+            },
+            {
+              title: '罗里吧嗦写了什么哈哈哈',
+              status: 'closed',
+              projectId: '2'
+            },
+            {
+              title: '胡说八道写了什么哈哈哈',
+              status: 'closed',
+              projectId: '1=3'
+            },
+            {
+              title: '费眼飞鱼不知道写了什么哈哈哈',
+              status: 'closed',
+              projectId: '1=4'
+            },
+            {
+              title: '狗屁不通不知道写了什么哈哈哈',
+              status: 'closed',
+              projectId: '5'
+            },
+            {
+              title: '啦啦啦不知道写了什么哈哈哈',
+              status: 'closed',
+              projectId: '6'
+            }
+          ]
+        },
+        {
+          categoryName: '水煮鱼辨明服务辨明服务',
+          categoryCode: '4',
+          projectList: [
+            {
+              title: '熟煮雨不知道写了什么哈哈哈',
+              status: 'pending',
+              projectId: '4'
+            }
+          ]
+        },
+        {
+          categoryName: '开心麻花',
+          categoryCode: '2',
+          projectList: [
+            {
+              title: '不知道开心麻花写了什么哈哈哈',
+              status: 'closed',
+              projectId: '1'
+            }
+          ]
+        },
+        {
+          categoryName: '酸菜鱼',
+          categoryCode: '3',
+          projectList: [
+            {
+              title: '不知道酸菜鱼写了什么哈哈哈',
+              status: 'pending',
+              projectId: '3'
+            }
+          ]
+        }
+      ],
+      tempList: []
+    }
+  },
+  created() {
+    this.tempList = [...this.groupList]
+  },
+  methods: {
+    filterStatus(status) {
+      const statusObj =  {
+        pending: '待处理',
+        closed: '已结案'
+      }
+      return statusObj[status]
+    },
+    handleTabs(type) {
+      if (type === 'group') this.tempList = [ ...this.groupList ]
+      else if (type === 'event') this.tempList = [ ...this.eventList ]
+      this.sourceTab = type
+      const _dom = document.getElementById('scroll-wr')
+      _dom.scrollTop = 0
+    },
+    handleProject(item) {
+      this.$emit('project', item)
+    },
+    handleUser(item) {
+      this.$emit('user', item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  .analyse-wr {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 560px;
+    box-sizing: border-box;
+    overflow: auto;
+
+    .analys-col {
+      position: relative;
+      cursor: pointer;
+      .analys-family {
+        text-align: center;
+        .family-title {
+          margin-bottom: 8px;
+        }
+        .family-item {
+          width: 76px;
+          box-sizing: border-box;
+          margin-bottom: 28px;
+          padding: 8px 0;
+          font-size: 14px;
+          color: #fff;
+          text-align: center;
+          background: rgba(255, 255, 255, 0);
+          border: 1px solid #1257C9;
+          border-radius: 2px;
+          box-shadow: 0 0 5px 2px rgba(18, 87, 201, 1) inset;
+        }
+      }
+      .analys-up {
+        display: block;
+        width: 64px;
+        height: 99px;
+        box-sizing: border-box;
+        margin-bottom: 85px;
+      }
+      .analys-down {
+        margin-top: 85px;
+        margin-bottom: 0;
+      }
+      .analys-arrow {
+        display: block;
+        width: 32px;
+        height: 18px;
+        box-sizing: border-box;
+        margin: 0 6px;
+      }
+
+      .analys-person {
+        width: 154px;
+        height: 152px;
+        box-sizing: border-box;
+        padding-top: 60px;
+        color: #fff;
+        text-align: center;
+        background: url('../../../../assets/img/shuju/measure/zhuhu@2x.png') no-repeat center;
+        background-size: cover;
+        .personal-name {
+          font-size: 18px;
+          font-weight: 500;
+        }
+        .personal-tips {
+          margin-top: 6px;
+          font-size: 14px;
+        }
+      }
+
+      .analys-cate {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 120px;
+        min-height: 64px;
+        box-sizing: border-box;
+        padding: 14px 20px;
+        text-align: center;
+        color: #fff;
+        cursor: pointer;
+        background: rgba(255, 255, 255, 0);
+        border: 1px solid #1257C9;
+        border-radius: 4px;
+        box-shadow: 1px 1px 10px 5px rgba(18, 87, 201, 1) inset;
+        .label {
+          font-size: 18px;
+          font-weight: 500;
+        }
+        .tips {
+          margin-top: 6px;
+          font-size: 14px;
+        }
+        .icon {
+          position: absolute;
+          right: 4px;
+          bottom: 4px;
+          width: 12px;
+          height: 12px;
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      .cate-list {
+        // padding-top: 200px;
+        // display: flex;
+        // flex-direction: column;
+        // justify-content: space-between;
+        .cate-row {
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+          // margin-top: 0;
+        }
+      }
+      .cate-list-more {
+        // padding-top: 300px;
+        .cate-row {
+          margin-bottom: 200px;
+          // margin-top: 0;
+        }
+        .cate-row:last-child {
+          margin-bottom: 0;
+        }
+      }
+      .cate-list-child {
+        padding-top: 60px;
+      }
+
+      .list {
+        width: 230px;
+        height: 165px;
+        box-sizing: border-box;
+        padding: 4px 14px 10px;
+        background: rgba(255, 255, 255, 0);
+        border: 1px solid #1257C9;
+        overflow: auto;
+        border-radius: 4px;
+        box-shadow: 1px 1px 10px 5px rgba(18, 87, 201, 1) inset;
+        .item {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          box-sizing: border-box;
+          padding: 8px 0;
+          border-bottom: 1px dashed rgba(131, 152, 217, 1);
+          .item-status {
+            min-width: 50px;
+            // height: 15px;
+            box-sizing: border-box;
+            margin-right: 8px;
+            padding: 4px 0 2px;
+            font-size: 10px;
+            text-align: center;
+            // line-height: 15px;
+            background: #0C5CFE;
+            border-radius: 2px;
+            &-pending {
+              background: rgba(224, 84, 0, 1);
+            }
+          }
+          .item-content {
+            font-size: 14px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+        }
+      }
+      
+
+    }
+    .analys-col-wr {
+      height: 100%;
+      box-sizing: border-box;
+      padding-right: 30px;
+      overflow: auto;
+    }
+    .analys-col-posi {
+      // .analys-up, .analys-down {
+      //   position: absolute;
+      // }
+      .analys-up {
+        // top: -200px;
+        // left: -30px;
+      //   margin-bottom: 160px;
+      }
+      .analys-down {
+        // margin-top: 160px;
+        // margin-bottom: 0;
+        // top: unset;
+        // bottom: -200px;
+        // left: -30px;
+      }
+    }
+
+  }
+}
+.pad10 {
+  padding-top: 10px;
+}
+.list-wr::-webkit-scrollbar {
+  width: 8px;
+  // background: linear-gradient(270deg, #0063FE, #0095FF);
+}
+
+.list-wr::-webkit-scrollbar-corner,
+  /* 滚动条角落 */
+.list::-webkit-scrollbar-thumb,
+.scroll-container::-webkit-scrollbar-track {      /*滚动条的轨道*/
+  border-radius: 4px;
+}
+
+.list-wr::-webkit-scrollbar-corner,
+.list-wr::-webkit-scrollbar-track {
+  /* 滚动条轨道 */
+  
+  background: rgba(12, 129, 254, .24);
+  // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
+}
+
+.list-wr::-webkit-scrollbar-thumb {
+  /* 滚动条手柄 */
+  background: linear-gradient(270deg, #0063FE, #0095FF);
+}
+</style>