ShibeiWorkPlatform_Frontend/src/views/modules/visual/measure/dialogInfo.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">
          <div class="list">
            <div class="item-desc">
              <!-- <span class="item-field">所属网格：</span> -->
              <span>{{ info.content }}</span>
            </div>
            <div class="item">
              <span class="item-field">所属网格：</span>
              <span>{{ info.gridName }}</span>
            </div>
            <div class="item">
              <span class="item-field">需求类型：</span>
              <span>{{ info.categoryName }}</span>
            </div>
            <div class="item">
              <span class="item-field">需求状态：</span>
              <span>{{ info.statusName }}</span>
            </div>
            <div class="item">
              <span class="item-field">上报类型：</span>
              <span>{{ info.reportTypeName }}</span>
            </div>
            <div class="item">
              <span class="item-field">上 报 人：</span>
              <span>{{ info.reportUserName }}</span>
            </div>
            <div class="item">
              <span class="item-field">上报人联系方式：</span>
              <span>{{ info.reportUserMobile }}</span>
            </div>
            <div class="item">
              <span class="item-field">上报时间：</span>
              <span>{{ info.reportTime }}</span>
            </div>
            <div class="item">
              <span class="item-field">服务时间：</span>
              <span>{{ info.wantServiceTime }}</span>
            </div>
          </div>
          <div class="list">
            <div class="item" v-if="info.serviceShowFlag">
              <span class="item-field">服务方：</span>
              <span>{{ info.serviceShowName }}</span>
            </div>
            <template v-if="info.status == 'finished'">
              <div class="item">
                <span class="item-field">实际服务时间：</span>
                <span v-if="info.serviceStartTime"
                  >{{ info.serviceStartTime }} 至 <br />
                  {{ info.serviceEndTime }}</span
                >
              </div>
              <div class="item">
                <span class="item-field">完成情况：</span>
                <span
                  >{{ info.finishResult == "resolved" ? "已解决" : "未解决" }}
                  <br />
                  {{ info.finishDesc }}</span
                >
              </div>
              <div class="item">
                <span class="item-field">评价：</span>
                <span>
                  <el-rate :value="info.score" disabled></el-rate>
                </span>
              </div>
            </template>
            
          </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; display: flex; justify-content: center;">
          <analyse
            v-if="!loading"
            :single-list="demandList"
            :single-title="'需求上报'"
            :more-title="'事件上报'"
            :user-list="userLists"
            :user-name="info.demandUserName"
            :has-event="false"
            :more-list="eventList"
            @project="handleToProject"
            @user="handleToUser"
          />
        </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: "",
    },
    demandId: String,
    queryOrigin: String,
    // info: Object,
  },

  components: {
    cptCard,
    analyse,
  },

  data() {
    return {
      loading: false,
      info: {},
      demandList: [
        // {
        //   categoryName: '辨明服务',
        //   categoryCode: '1',
        //   showItem: false,
        //   projectList: [
        //     {
        //       title: '不知道写了什么哈哈哈',
        //       status: 'closed',
        //       projectId: '1'
        //     }
        //    
        //   ]
        // },
        
      ],
      userLists: [
        // {
        //   homeId: "1",
        //   icUserId: "1",
        //   icUserName: "沾上干",
        // }
      ],
      userName: "王亚男哈",
      eventList: [
        // {
        //   categoryName: "辨明服务",
        //   categoryCode: "1",
        //   projectList: [
        //     {
        //       title: "不知道写了什么哈哈哈",
        //       status: "closed",
        //       projectId: "1",
        //     },
            
        //   ],
        // },
        
      ]
    };
  },

  async mounted() {
    await this.getInfo(this.demandId);
  },

  methods: {
    handleClose() {
      this.$emit("close");
    },
    async getInfo(demandId) {
      // const url = "/gov/org/customeragency/staffinagencylist";
      const url = "/heart/userdemand/demandDetail";
      let params = {
        demandRecId: demandId,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        // console.log('data-org----dict', data)
        this.info = data;
        this.getAnalyse(demandId);
      } else {
        this.$message.error(msg);
      }
    },
    async getAnalyse(demandId) {
      // const url = "/gov/org/customeragency/staffinagencylist";
      this.loading = true;
      const url = "/heart/userdemand/demand-research-analysis";
      let params = {
        firstCategoryCode: this.info.firstCategoryCode,
        demandRecId: demandId,
        icResiUserId: this.info.icResiUserId,
        epmetUserIdList: [this.info.epmetUserId],
        queryOrigin: this.queryOrigin,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        console.log("data-org----a", data);
        this.userLists = data.houseUserList.map((item) => {
          return {
            ...item,
            icUserId: item.icResiUserId,
          };
        });
        this.demandList = data.demandData.map((item) => {
          return {
            ...item,
            showItem: true,
            categoryName: item.firstCategoryName,
            categoryCode: item.firstCategoryCode,
            projectList: item.demandList.map((n) => {
              return {
                ...n,
                title: n.content,
                status: n.status,
                statusName: n.statusName,
                projectId: n.demandRecId,
              };
            }),
          };
        });
        console.log("demandList-dd", this.demandList);
      } else {
        this.$message.error(msg);
      }
      this.loading = false;
    },
    handleToProject(val) {
      console.log("val---v", val);
      this.getInfo(val.projectId);
    },
    handleToUser(val) {
      console.log("val-uuu", val);

      this.$router.push({
        path: `/main-shuju/visual-basicinfo-people/${val.icUserId}`,
      });
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/people.scss"
  scoped
></style>
<style lang="scss" scoped>
.m-pop {
  color: #fff;
  .wrap {
    .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 {
          flex-shrink: 0;
        }

      }
      .item-desc {
        font-size: 16px;
        color: #fff;
        margin-bottom: 10px;
        line-height: 24px;
      }
    }
  }
  .list-title {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0 10px 62px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
  }
}
.list-wr {
  display: flex;
  padding: 0 32px;
}
</style>