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 v-for="(item, index) in list" :key="item.id" class="left-item" 
            :class="current == index &&'left-item-on'" @click="handleTabs(item, index)">
              <div class="item-title">{{ item.title }}</div>
              <div class="item-time">{{ item.activityTime }}</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>{{ info.target }}</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: {
    list: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "",
    },
    agencyId: {
      type: String,
      default: "",
    },
  },

  components: {
    cptCard,
    analyse
  },

  data() {
    return {
      list: [],
      current: 0,
      info: {}
    };
  },

  
  mounted() {
  },

  methods: {
    handleClose() {
      this.$emit("close");
    },
    handleTabs(item, index) {
      this.current = index
      this.getDetail(item.id)
    },
    async getDetail (id) {
      const _id = this.list[0].id
      const url = "/heart/icpartyactivity/detail"
      let params = {
        id: id || _id
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.info = data
        this.info.serviceMatterNameShow = data.serviceMatterNameList.join(',')
        this.info.unitNameShow = data.unitNameList.join(',')
      } else {
        this.$message.error(msg)
      }
    },
    
  }
};
</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;
    border-bottom: 1px dashed  #1257c9;
    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%;
  overflow: auto;
}


</style>