单位活动详情

src/main.js

@@ -70,6 +70,22 @@ Vue.use(Element, {
   i18n: (key, value) => i18n.t(key, value),
 });
 
+// 弹窗底部滚动问题 弹窗需配合v-if使用
+Vue.directive('fixed', {
+  inserted() {
+	  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
+	  document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
+	},
+  unbind () {
+	  let body = document.body
+	  body.style.position = ''
+	  let top = body.style.top
+	  document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
+	  body.style.top = ''
+	}
+})
+
+
 // 挂载全局
 Vue.prototype.$http = http;
 // Vue.prototype.$getDictLabel = getDictLabel

src/views/modules/visual/communityParty/community.vue

@@ -62,11 +62,13 @@
           </div>
 
           <div class="warning-box-bottom mt0 table-h">
-            <screen-table :headerList="headerList"
+            <screen-table :headerList="headerTypeList"
                           :tableData="tableData"
+                          :headerStyle="headerStyle"
+                          :tableContentStyle="headerStyle"
                           :visibleLoading="visibleLoading"
                           :operate="true"
-                          @look="handleLook"></screen-table>
+                          @look="handleUnitLook"></screen-table>
             <div class="pagination">
               <el-pagination :current-page="pageNo"
                              :page-size="pageSize"
@@ -170,6 +172,9 @@
     <dialog-info v-show="showedMoreInfo"
                  :info="detailInfo"
                  @close="showedMoreInfo = false" />
+    <unit-info v-if="showedUnitMoreInfo" v-fixed
+                 :info="unitdetailInfo"
+                 @close="showedUnitMoreInfo = false" />
   </div>
 </template>
 
@@ -180,6 +185,7 @@ import screenTable from "../components/screen-table/index";
 import cptCard from "@/views/modules/visual/cpts/card";
 import nextTick from "dai-js/tools/nextTick";
 import dialogInfo from './dialogInfo.vue'
+import unitInfo from './unitInfo.vue'
 import screenMap from "@/views/modules/visual/components/screen-map";
 import screenEchartsFrame from "../components/screen-echarts-frame";
 import { pieOption } from './options'
@@ -190,6 +196,7 @@ export default {
     cptCard,
     screenTable,
     dialogInfo,
+    unitInfo,
     screenMap,
     screenEchartsFrame
   },
@@ -197,8 +204,25 @@ export default {
     return {
 
       showedMoreInfo: false,
+      showedUnitMoreInfo: true,
       tableLoading: false,
       warningList: [],
+      headerTypeList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "单位名称", coulmn: 'unitName' },
+        { title: "单位类型", coulmn: 'address' },
+      ],
+      headerStyle: [
+        {
+          'width': '60px'
+        },
+        {
+          'min-width': '160px'
+        },
+        {
+          'width': '160px'
+        }
+      ],
       headerList: [
         { title: "序号", coulmn: 'index' },
         { title: "活动标题", coulmn: 'title' },
@@ -212,6 +236,7 @@ export default {
         // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
       ],
       detailId: '',
+      unitdetailId: '',
       agencyId: '',
       value2: '',
       timeRange: '',
@@ -233,6 +258,7 @@ export default {
       unitMapList: [],
 
       detailInfo: {},
+      unitdetailInfo: {},
       pieEduChartSs: null,
       pieEduOptions: null,
       eduList: [],
@@ -762,6 +788,11 @@ export default {
       await this.getDetail(val.id)
       this.showedMoreInfo = true
     },
+    handleUnitLook(val) {
+      this.unitdetailId = val.id
+      // await this.getDetail(val.id)
+      this.showedUnitMoreInfo = true
+    },
 
     handleSelectChange (val) {
       this.getList(this.agencyId);

src/views/modules/visual/communityParty/unitInfo.vue

@@ -0,0 +1,467 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <cpt-card>
+        <div class="title">
+          <img src="@/assets/img/shuju/title-tip.png" />
+          <span>单位活动</span>
+        </div>
+
+        <div class="btn-close" @click="handleClose">
+          <img src="@/assets/img/shuju/people/close.png" />
+        </div>
+        <!-- <div class="list-title">需求内容</div> -->
+        <div class="list-wr info-h">
+          <div class="list-left info-scroll">
+            <div class="left-item left-item-on">
+              <div class="item-title">帮扶老人帮扶老人帮扶老人帮扶老人帮扶老人帮扶老人</div>
+              <div class="item-time">2022-05-20 09:09</div>
+            </div>
+            <div class="left-item">
+              <div class="item-title">帮扶老人帮扶老人</div>
+              <div class="item-time">2022-05-20 09:09</div>
+            </div>
+          </div>
+          <div class="list-right list-wr">
+            <div class="list">
+            
+              <!-- <div class="item-desc">
+                <span>市北区同德花园小区物业管理服务，公司的同志每天对该小区 公共部位，喷洒消毒液进行消毒。为杀灭新型冠状病毒，近几 天以来，市北区</span>
+              </div> -->
+              <div class="item">
+                <span class="item-field">服务事项：</span>
+                <span>{{ info.serviceMatterNameShow }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">单位名称：</span>
+                <span>{{ info.unitNameShow }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">活动标题：</span>
+                <span>{{ info.title }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">活动内容：</span>
+                <span class="item-content" v-html="info.content"></span>
+              </div>
+              <div class="item">
+                <span class="item-field">服务人数：</span>
+                <span>{{ info.peopleCount }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">活动时间：</span>
+                <span>{{ info.activityTime }}</span>
+              </div>
+              <!-- <div class="item">
+                <span class="item-field">活动坐标：</span>
+                <span>经度：{{ info.latitude }} <br /> 
+                      纬度：{{ info.longitude }}</span>
+              </div> -->
+              <div class="item">
+                <span class="item-field">活动地址：</span>
+                <span>{{ info.address }}</span>
+              </div>
+            </div>
+            <div class="list">
+              <div class="item">
+                <span class="item-field">活动结果：</span>
+                <span class="item-content info-scroll" v-html="info.result"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- <div class="tabs">
+          <div
+            class="tab-btn"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
+          </div>
+          <div
+            class="tab z-on"
+          >
+            研判分析
+          </div>
+          <div
+            class="tab-btn"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
+          </div>
+        </div>
+
+        <div style="padding: 30px 0;">
+          <analyse :single-list="demandList" :single-title="'需求上报'" :more-title="'事件上报'" :user-list="userLists" 
+            :user-name="userName" :has-event="false" :more-list="eventList" />
+        </div> -->
+        
+        
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import analyse from '../cpts/analyse.vue'
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "dialogInfo",
+  props: {
+    userId: {
+      type: String,
+      default: "",
+    },
+    gridName: {
+      type: String,
+      default: "",
+    },
+    info: Object
+  },
+
+  components: {
+    cptCard,
+    analyse
+  },
+
+  data() {
+    return {
+      fieldList: [],
+      groupList: [],
+      groupIndex: 0,
+      startGroupIndex: 0,
+      // info: {},
+      allInfo: {},
+
+      xiaoquList: [],
+      louList: [],
+      danyuanList: [],
+      homeList: [],
+      demandList: [
+        {
+          categoryName: '辨明服务',
+          categoryCode: '1',
+          showItem: false,
+          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: '1',
+          showItem: false,
+          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: '1',
+          showItem: false,
+          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'
+            }
+          ]
+        }
+      ],
+      userLists: [
+        {
+          homeId: '1',
+          icUserId: '1',
+          icUserName: '沾上干'
+        },
+        {
+          homeId: '2',
+          icUserId: '2',
+          icUserName: '李四'
+        },
+        {
+          homeId: '3',
+          icUserId: '3',
+          icUserName: '王五哈哈'
+        }
+      ],
+      userName: '王亚男哈',
+      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'
+            }
+          ]
+        }
+      ],
+    };
+  },
+
+  
+  mounted() {
+  },
+
+  methods: {
+    handleClose() {
+      this.$emit("close");
+    },
+  }
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
+<style lang="scss" scoped>
+.m-pop {
+  .wrap {
+    margin-bottom: 0;
+    .list {
+      display: block;
+      width: 50%;
+      .item {
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        margin-top: 0;
+        margin-bottom: 15px;
+        font-size: 16px;
+        cursor: pointer;
+        .item-field {
+          // width: 100px;
+          flex-shrink: 0;
+        }
+        .item-content {
+          width: 100%;
+          max-height: 420px;
+          overflow-y: auto;
+          
+        }
+        ::v-deep p {
+          margin: 0;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      .item-desc {
+        font-size: 16px;
+        margin-bottom: 10px;
+        line-height: 24px;
+      }
+    }
+  }
+  .list-title {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 20px 0 10px 62px;
+      font-size: 20px;
+      cursor: pointer;
+    }
+}
+.list-wr {
+  display: flex;
+  padding: 0 32px;
+  
+}
+.list-left {
+  width: 180px;
+  height: 100%;
+  box-sizing: border-box;
+  padding-right: 20px;
+  flex-shrink: 0;
+  border-right: 1px dashed  #1257c9;
+  overflow: auto;
+  .left-item {
+    padding: 10px 0;
+    cursor: pointer;
+    .item-title {
+      font-size: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-bottom: 5px;
+    }
+  }
+  .left-item-on {
+    color: #0095FF;
+  }
+}
+.list-right {
+  flex: 1;
+}
+.info-h {
+  height: calc(100vh - 320px);
+}
+.info-scroll {
+  &::-webkit-scrollbar {
+    width: 8px;
+    // background: linear-gradient(270deg, #0063FE, #0095FF);
+  }
+
+  &::-webkit-scrollbar-corner,
+    /* 滚动条角落 */
+  &::-webkit-scrollbar-thumb,
+  &::-webkit-scrollbar-track {      /*滚动条的轨道*/
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-corner,
+  &::-webkit-scrollbar-track {
+    /* 滚动条轨道 */
+    
+    background: rgba(12, 129, 254, .24);
+    // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    /* 滚动条手柄 */
+    background: linear-gradient(270deg, #0063FE, #0095FF);
+  }
+}
+
+</style>