epmet-work-pc-chengyang/src/views/modules/shequzhili/xiangmu/cpts/event-info.vue

<template>
  <div class="">
    <div class="g-page" v-show="pageType == 'info'">
      <div class="g-left">
        <el-card>
          <h3>议题详情</h3>

          <div class="m-row">
            <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
                v-if="issueInfo.topicInfo && issueInfo.topicInfo.groupName"
                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 class="m-btns" v-if="type == 'info'">
            <el-button size="" @click="handleClose">关闭</el-button>
          </div>
        </el-card>
      </div>
      <div class="g-right">
        <el-card class="m-card" v-if="issueProcess.length > 0">
          <h3>处理进展</h3>
          <div class="m-process">
            <div class="list">
              <div
                class="item"
                :class="index === 0 ? 'z-on' : ''"
                :key="item.processId"
                v-for="(item, index) in issueProcess"
              >
                <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>
        </el-card>
      </div>
    </div>

    <div class="g-page" v-show="pageType == 'issue-info'">
      <div class="g-left">
        <div v-if="projectInfo.origin === 'issue'" 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
            v-if="issueInfo.topicInfo && issueInfo.topicInfo.groupName"
            class="info-prop"
          >
            <span>议题来源：</span>
            <span>{{ issueInfo.topicInfo.groupName }}</span>
          </div>
          <div class="info-prop">
            <span>转议题时间：</span>
            <span>{{ issueInfo.shiftIssueTime }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import foldText from "@/views/components/foldText";
import dateFormat from "dai-js/tools/dateFormat";

function iniData() {
  return {
    pageType: "info",

    issueProcess: [],

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

    issueTrend: {},
    issueChartData: [],
  };
}

export default {
  name: "issueInfo",
  props: {
    issueId: {
      type: String,
      default: "64502a8f1048a7240295527a9b32e513",
    },
    type: {
      type: String,
      default: "info",
    },
  },

  components: {
    foldText,
  },

  data: iniData,

  computed: {},

  watch: {},

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

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

    handleClose() {
      this.$emit("close");
    },

    handleSubmit() {
      this.$emit("afterEdit");
    },

    async getApiData() {
      this.getIssueInfo();
      this.getIssueTrend();
      this.getIssueProcess();
    },

    //加载组织数据
    async getIssueInfo() {
      const url = "/resi/hall/issue/detail";

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

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

    //加载组织数据
    async getIssueTrend() {
      const url = "/resi/hall/issue/votingtrend";

      const { data, code, msg } = await requestPost(url, {
        issueId: this.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 getIssueProcess() {
      const url = "/gov/issue/manage/progress";

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

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

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