epmet-oper-gov/src/views/modules/visual/basicinfo/cpts/incident-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.eventContent }}</div>
          <div class="info-pics">
            <img :src="src" :key="src" v-for="src in info.eventImgs" />
          </div>
          <div class="info-prop">
            <span>提交时间：</span>
            <span>{{ info.eventTime }}</span>
          </div>
          <div class="info-prop">
            <span>报事人：</span>
            <span>{{ info.eventPeopleName }}</span>
          </div>
          <div class="info-prop">
            <span>所属网格：</span>
            <span>{{ info.gridName }}</span>
          </div>
          <div class="info-prop">
            <span>提报给：</span>
            <span>{{ info.eventPerson.join("、") || "--" }}</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-tb" v-if="groupIndex == 1">
            <cpt-tb
              :col-list="comment.colList"
              :loading="comment.loading"
              :header="comment.header"
              :list="comment.list"
            ></cpt-tb>
          </div>

          <div class="m-row" v-if="groupIndex == 2">
            <div class="m-info">
              <div class="info-prop">
                <span>项目标题：</span>
                <span>{{ projectInfo.projectTitle }}</span>
              </div>
              <div class="info-prop">
                <span>项目方案：</span>
                <span>{{ projectInfo.projectTitle }}</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">
                <span>分类：</span>
                <div>
                  <div :key="item" v-for="item in projectCate">
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div class="info-prop">
                <span>标签：</span>
                <div>
                  <div :key="item" v-for="item in projectTag">
                    {{ item.name }}
                  </div>
                </div>
              </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>
      </cpt-card>
    </div>
  </div>
</template>

<script>
import cptCard from "@/views/modules/visual/cpts/card";
import { requestPost } from "@/js/dai/request";
import cptTb from "@/views/modules/visual/cpts/tb";
import dateFormat from "dai-js/tools/dateFormat";

export default {
  name: "demandInfo",
  props: {
    resiEventId: {
      type: String,
      default: "",
    },
  },

  components: {
    cptCard,
    cptTb,
  },

  data() {
    return {
      groupList: [
        { label: "研判分析" },
        { label: "查看回复" },
        { label: "查看项目" },
      ],
      groupIndex: 0,
      startGroupIndex: 0,

      info: {
        eventTime: "",
        eventContent: "",
        eventAddress: "",
        gridName: "",
        isClosed: true,
        isResolve: true,
        isRollback: true,
        eventImgs: [],
        eventPerson: [],
        eventOrg: [],
        eventPeopleName: "",
        projectInfo: {
          projectId: "",
          operationName: "",
          operationTime: "",
          projectDeclare: "",
        },
      },

      comment: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "20%",
          },
          {
            align: "center",
            width: "30%",
          },
          {
            align: "left",
            width: "50%",
          },
        ],
        header: ["回复者", "回复时间", "回复内容"],
        list: [],
      },

      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: [],
    };
  },

  computed: {},

  watch: {
    resiEventId() {
      this.getApiData();
    },
  },

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

  methods: {
    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();
      this.getProjectProcess();
      this.getProjectInfo();
      this.getProjectCate();
    },

    //加载组织数据
    async getInfo() {
      const url = "/gov/project/resievent/eventdetail-icdata";

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

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

    //加载组织数据
    async getComment() {
      const url = "/gov/project/resieventreply/list";

      const { data, code, msg } = await requestPost(url, {
        resiEventId: this.resiEventId,
      });
      this.comment.loading = false;

      if (code === 0) {
        this.comment.list = data.map((item) => {
          return [item.replyName, item.replyTime, item.replyContent];
        });
      } else {
        this.$message.error(msg);
      }
    },

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

      const { data, code, msg } = await requestPost(url, {
        projectId: projectInfo.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 {
        info: { projectInfo },
      } = this;
      if (!projectInfo || !projectInfo.projectId) return;
      const url = "/gov/project/trace/projectdetail";

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

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

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

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

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

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