epmet-work-pc-chengyang/src/views/modules/visual/communityParty/unitInfo.vue

<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 info-scroll">
            <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;
  height: 100%;
}


</style>