epmet-oper-gov/src/views/modules/visual/basicinfo/cpts/topic-info.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="m-info">
          <div class="info-title">话题内容</div>
          <div class="info-content">{{ info.topicContent }}</div>
          <div class="info-pics">
            <img
              :src="src"
              :key="src"
              v-for="src in info.topicImgs"
              @click="watchImg(src)"
            />
          </div>
          <div class="info-prop">
            <span>发布时间：</span>
            <span>{{ info.releaseTime }}</span>
          </div>
          <div class="info-prop">
            <span>话题地址：</span>
            <span>{{ info.releaseAddress }}</span>
          </div>
          <div class="info-prop">
            <span>所属网格：</span>
            <span>{{ info.gridName }}</span>
          </div>
        </div>

        <div class="tabs">
          <div
            class="tab-btn"
            @click="subStartGroupIndex"
            v-if="groupList.length > 9"
          >
            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
          </div>
          <div
            v-show="index >= startGroupIndex && index < startGroupIndex + 9"
            class="tab"
            :class="groupIndex % groupList.length == index ? 'z-on' : ''"
            :key="'tab' + index"
            @click="groupIndex = index"
            v-for="(item, index) in groupList"
          >
            {{ item.label }}
          </div>
          <div
            class="tab-btn"
            @click="addStartGroupIndex"
            v-if="groupList.length > 9"
          >
            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
          </div>
        </div>

        <div class="m-case">
          <div class="m-yanpan" v-if="groupIndex == 0">
            <div v-if="issueInfo.projectId">
              <analyse
                v-if="yanPan.loading"
                singleTitle="楼院小组"
                :userList="yanPan.houseUserList"
                :userName="yanPan.icUserName"
                :singleList="yanPan.categoryList"
                @user="toUserInfo"
                @project="toProjectInfo"
              />
              <screen-loading v-else>加载中</screen-loading>
            </div>
            <div v-else class="m-hint">
              <img
                src="@/assets/img/modules/visual/noData.png"
                class="no-data-img"
              />
            </div>
          </div>
          <div class="m-tb" v-if="groupIndex == 1">
            <cpt-tb
              :col-list="comment.colList"
              :loading="comment.loading"
              :header="comment.header"
              :list="comment.list"
              @operate="checkTopicCommentImg"
            ></cpt-tb>
          </div>

          <div v-if="groupIndex == 2">
            <div class="m-row" v-if="info.issueId">
              <div class="m-info">
                <div class="info-prop">
                  <span>议题标题：</span>
                  <span>{{ issueInfo.issueTitle }}</span>
                </div>
                <div class="info-prop">
                  <span>议题建议：</span>
                  <span>{{ issueInfo.issueSuggestion }}</span>
                </div>
                <div class="info-prop">
                  <span>所属网格：</span>
                  <span>{{ issueInfo.belongsGridName || "--" }}</span>
                </div>
                <div class="info-prop">
                  <span>议题发起人：</span>
                  <span>{{ issueInfo.issueInitiator }}</span>
                </div>
                <div class="info-prop">
                  <span>议题来源：</span>
                  <span>{{ issueInfo.topicInfo.groupName }}</span>
                </div>
                <div class="info-prop">
                  <span>转议题时间：</span>
                  <span>{{ issueInfo.shiftIssueTime }}</span>
                </div>
              </div>

              <div class="m-line">
                <div class="stat">
                  <div class="stat-item">
                    <div>
                      {{ issueTrend.realityVoteCount }}/{{
                        issueTrend.shouldVoteCount
                      }}
                    </div>
                    <div class="z-weak">已表决/应表决</div>
                  </div>
                  <div class="stat-item">
                    <div>{{ issueTrend.supportAmount }}</div>
                    <div class="z-weak">支持</div>
                  </div>
                  <div class="stat-item">
                    <div>{{ issueTrend.oppositionAmount }}</div>
                    <div class="z-weak">反对</div>
                  </div>
                </div>

                <line-chart
                  v-if="issueChartData.length > 0"
                  :list="issueChartData"
                />
              </div>
            </div>
            <div v-else class="m-hint">
              <img
                src="@/assets/img/modules/visual/noData.png"
                class="no-data-img"
              />
            </div>
          </div>

          <div v-if="groupIndex == 3">
            <div class="m-row" v-if="issueInfo.projectId">
              <div class="m-info">
                <div class="info-prop">
                  <span>项目标题：</span>
                  <span>{{ projectInfo.projectTitle }}</span>
                </div>
                <div class="info-prop">
                  <span>项目方案：</span>
                  <span>{{ projectInfo.backGround }}</span>
                </div>
                <div class="info-prop">
                  <span>内部备注：</span>
                  <span>{{ projectInfo.internalRemark || "--" }}</span>
                </div>
                <div class="info-prop">
                  <span>当前处理部门：</span>
                  <span>{{ projectInfo.departmentNameList.join("、") }}</span>
                </div>
                <div class="info-prop" v-if="projectCate.length > 0">
                  <span>分类：</span>
                  <fold-text :row="3">
                    <div :key="item.name" v-for="item in projectCate">
                      {{ item.name }}
                    </div>
                  </fold-text>
                </div>
                <div class="info-prop" v-if="projectTag.length > 0">
                  <span>标签：</span>
                  <fold-text :row="3">
                    <div :key="item.name" v-for="item in projectTag">
                      {{ item.name }}
                    </div>
                  </fold-text>
                </div>
              </div>

              <div class="m-process" v-if="projectProcess.length > 0">
                <div class="process-title">处理进展</div>
                <div class="list">
                  <div
                    class="item"
                    :class="index === 0 ? 'z-on' : ''"
                    :key="item.processId"
                    v-for="(item, index) in projectProcess"
                  >
                    <div class="item-row">
                      <div class="name">{{ item.processName }}</div>
                      <div class="date">
                        {{ item.processTime }}
                      </div>
                    </div>

                    <div class="detail">
                      <div class="detail-field">处理部门：</div>
                      <div class="detail-value">{{ item.departmentName }}</div>
                    </div>

                    <div
                      class="detail"
                      v-if="item.processName != '转项目' && item.publicReply"
                    >
                      <div class="detail-field">说 明：</div>
                      <div class="detail-value">
                        <fold-text :row="3">{{ item.publicReply }}</fold-text>
                      </div>
                    </div>

                    <div
                      class="detail"
                      v-if="item.processName != '转项目' && item.internalRemark"
                    >
                      <div class="detail-field">内部备注：</div>
                      <div class="detail-value">
                        <fold-text :row="3">{{
                          item.internalRemark
                        }}</fold-text>
                      </div>
                    </div>
                    <div class="detail">
                      <div class="attachement-list">
                        <a
                          :href="att.url"
                          target="_blank"
                          :key="att.url"
                          v-for="att in item.internalFile"
                        >
                          <i class="el-icon-folder-opened"></i>
                          {{ att.name }}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="m-hint">
              <img
                src="@/assets/img/modules/visual/noData.png"
                class="no-data-img"
              />
            </div>
          </div>
        </div>
      </cpt-card>
    </div>
  </div>
</template>

<script>
import cptCard from "@/views/modules/visual/cpts/card";
import screenLoading from "@/views/modules/visual/cpts/loading";
import { requestPost } from "@/js/dai/request";
import cptTb from "@/views/modules/visual/cpts/tb";
import lineChart from "@/views/modules/visual/cpts/line-chart";
import analyse from "@/views/modules/visual/cpts/analyse";
import foldText from "@/views/components/foldText";
import dateFormat from "dai-js/tools/dateFormat";

function iniData() {
  return {
    groupList: [
      { label: "研判分析" },
      { label: "话题评论" },
      { label: "查看议题" },
      { label: "查看项目" },
    ],
    groupIndex: 0,
    startGroupIndex: 0,

    info: {
      badgeList: [],
      closeDetail: {
        closeUserName: "",
        closeDateTime: "-1",
        closeReason: "",
        closeUserHeadPhoto: "",
      },
      dimension: "",
      hiddenDetail: null,
      issueId: "",
      longitude: "",
      releaseAddress: "",
      releaseTime: "",
      releaseUserHeadPhoto: "",
      releaseUserName: "",
      shiftIssueFlag: true,
      topicContent: "",
      topicId: "",
      topicImgs: [],
      topicStatus: "discussing",
    },

    comment: {
      loading: true,
      colList: [
        {
          align: "center",
          width: "20%",
        },
        {
          align: "center",
          width: "20%",
        },
        {
          align: "left",
          width: "50%",
        },
        {
          align: "left",
          width: "10%",
        },
      ],
      header: ["评论者", "评论时间", "评论内容", "评论图片"],
      list: [],
    },

    issueInfo: {
      attitude: "",
      belongsGridName: "",
      issueIdea: "",
      issueInitiator: "",
      issueStatus: "",
      issueSuggestion: "",
      issueTitle: "",
      joinVote: true,
      projectId: "",
      projectStatus: false,
      publishIdeaFlag: false,
    },

    issueTrend: {},
    issueChartData: [],

    projectProcess: [],

    projectInfo: {
      backGround: "",
      departmentList: [
        //   { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] },
      ],
      departmentNameList: [],
      internalRemark: "",
      isSend: false,
      locateAddress: "",
      locateDimension: "",
      locateLongitude: "",
      origin: "",
      originId: "",
      platformIds: [],
      processable: false,
      projectId: "",
      projectStatus: "pending",
      projectTitle: "",
      publicReply: "",
      returnable: false,
    },

    projectCate: [],
    projectTag: [],

    yanPan: {
      loading: false,

      icResiUserId: "",
      houseId: "",
      icUserName: "",
      epmetUserIdList: [],
      houseUserList: [
        // {
        //   icResiUserId: '',
        //   icUserName: '',
        // }
      ],
      categoryList: [],
      projectData: [
        // {
        //   firstCategoryCode: '',
        //   firstCategoryName: '',
        //   projectList: [],
        // }
      ],
    },
  };
}

export default {
  name: "demandInfo",
  props: {
    topicId: {
      type: String,
      default: "",
    },
    epmetUserIdList: {
      type: Array,
      default: [],
    },
    icResiUserId: {
      type: String,
      default: "",
    },
  },

  components: {
    cptCard,
    cptTb,
    analyse,
    screenLoading,
    lineChart,
    foldText,
  },

  data: iniData,

  computed: {},

  watch: {
    topicId() {
      let data = iniData();
      Object.keys(data).forEach((k) => {
        this[k] = data[k];
      });
      this.getApiData();
    },
  },

  mounted() {
    this.getApiData();
  },

  methods: {
    watchImg(src) {
      window.open(src);
    },

    addStartGroupIndex() {
      const { startGroupIndex, groupList } = this;
      if (startGroupIndex < groupList.length - 9) {
        this.startGroupIndex = startGroupIndex + 1;
      } else {
        this.startGroupIndex = groupList.length - 9;
      }
    },
    subStartGroupIndex() {
      const { startGroupIndex, groupList } = this;
      if (startGroupIndex > 0) {
        this.startGroupIndex = startGroupIndex - 1;
      } else {
        this.startGroupIndex = 0;
      }
    },
    handleClose() {
      this.$emit("close");
    },

    async getApiData() {
      this.getComment();
      await this.getInfo();
      await this.getIssueInfo();
      this.getIssueTrend();
      this.getProjectProcess();
      this.getProjectInfo();
      this.getProjectCate();
      this.getYanPan();
    },

    //加载组织数据
    async getInfo() {
      const url = "/resi/group/topic/gettopicdetail";

      const { data, code, msg } = await requestPost(url, {
        topicId: this.topicId,
      });

      if (code === 0) {
        this.info = data;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getComment() {
      const url = "/resi/group/comment/getcommentlistoftopic";

      const { data, code, msg } = await requestPost(url, {
        topicId: this.topicId,
        pageNo: 1,
        pageSize: 100,
      });
      this.comment.loading = false;

      if (code === 0) {
        this.comment.list = data.map((item) => {
          return [
            item.commentUserName,
            item.commentTime,
            item.commentContent,
            item.imageList.length > 0
              ? { type: "operate", list: ["查看"] }
              : "",
          ];
        });
        this.comment.srcList = data;
      } else {
        this.$message.error(msg);
      }
    },

    checkTopicCommentImg(index) {
      const {
        comment: { srcList },
      } = this;
      if (srcList[index] && srcList[index].imageList) {
        this.watchImg(srcList[index].imageList[0].url);
      }
    },

    //加载组织数据
    async getIssueInfo() {
      const {
        info: { issueId },
      } = this;
      if (!issueId) return;
      const url = "/resi/hall/issue/detail";

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

      if (code === 0) {
        this.issueInfo = data;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getIssueTrend() {
      const {
        info: { issueId },
      } = this;
      if (!issueId) return;
      const url = "/resi/hall/issue/votingtrend";

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

      if (code === 0) {
        this.issueTrend = data;
        let chartData = [];
        data.polyLine.forEach((item) => {
          let date = dateFormat(new Date(item.voteDate * 1000), "yyyy-MM-dd");
          console.log("date:" + date);
          chartData.push(
            {
              date,
              value: item.supportIncrement,
              type: "支持",
            },
            {
              date,
              value: item.oppositionIncrement,
              type: "反对",
            }
          );
        });
        this.issueChartData = chartData;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getProjectProcess() {
      const { issueInfo } = this;
      if (!issueInfo || !issueInfo.projectId) return;
      const url = "/gov/project/trace/processlist-v2";

      const { data, code, msg } = await requestPost(url, {
        projectId: issueInfo.projectId,
      });

      if (code === 0) {
        this.projectProcess = data.map((item) => {
          item.processTime = dateFormat(
            new Date(item.processTime * 1000),
            "yyyy-MM-dd hh:mm"
          );
          return item;
        });
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getProjectInfo() {
      const { issueInfo } = this;
      if (!issueInfo || !issueInfo.projectId) return;
      const url = "/gov/project/trace/projectdetail";

      const { data, code, msg } = await requestPost(url, {
        projectId: issueInfo.projectId,
      });

      if (code === 0) {
        this.projectInfo = data;
      } else {
        this.$message.error(msg);
      }
    },

    async getProjectCate() {
      const { issueInfo } = this;
      if (!issueInfo || !issueInfo.projectId) return;
      const url = "/gov/project/projectcategory/categorytaglist";

      const { data, code, msg } = await requestPost(url, {
        projectId: issueInfo.projectId,
      });

      if (code === 0) {
        this.projectCate = data.categoryList;
        this.projectTag = data.tagList;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getYanPan() {
      const url = "/gov/project/project/topic-research-analysis";

      if (!this.issueInfo.projectId) return;

      const { data, code, msg } = await requestPost(url, {
        epmetUserIdList: this.epmetUserIdList,
        icResiUserId: this.icResiUserId,
        projectId: this.issueInfo.projectId,
      });

      if (code === 0) {
        data.categoryList = data.projectData.map((item) => {
          return {
            categoryCode: item.firstCategoryCode,
            categoryName: item.firstCategoryName,
            showItem: true,
            projectList: item.projectList.map((subItem) => {
              return {
                title: subItem.projectTitle,
                status: subItem.projectStatus,
                statusName:
                  subItem.projectStatus == "pending" ? "待处理" : "结案",
                projectId: subItem.projectId,
                topicId: subItem.topicId,
              };
            }),
          };
        });
        this.yanPan = { ...this.yanPan, ...data };
        this.yanPan.loading = true;
      } else {
        this.$message.error(msg);
      }
    },

    toUserInfo(item) {
      this.$router.push({
        path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`,
      });
    },

    toProjectInfo(item) {
      console.log(item);
      this.topicId = item.topicId;
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/incident-info.scss"
  scoped
></style>