epmet-work-pc/src/views/modules/visual/communityGovern/shijianchuli/event-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-top">
          <div class="m-info">
            <div class="info-prop">
              <span>所属网格：</span>
              <span>{{ eventInfo.gridName }}</span>
            </div>
            <div class="info-prop">
              <span>上报时间：</span>
              <span>{{ eventInfo.createdTime }}</span>
            </div>

            <div class="info-prop">
              <span>事件内容：</span>
              <span>{{ eventInfo.eventContent }}</span>
            </div>

            <div v-if="eventInfo.imageList&&eventInfo.imageList.length>0"
                 class="info-prop">
              <span>图片：</span>
              <div class="info-pics">
                <img :src="src"
                     :key="src"
                     style="width:100px;height:100px;padding-right:10px"
                     v-for="src in eventInfo.imageList"
                     @click="watchImg(src)" />

              </div>
            </div>

            <div v-if="eventInfo.voiceList&&eventInfo.voiceList.length>0"
                 class="info-prop">
              <span>音频：</span>
              <div class="info-pics">
                <audio :src="src"
                       :key="src"
                       v-for="src in eventInfo.voiceList" />
              </div>
              <!--               <span><audio  :src="eventInfo.aud" loop="loop">}</span>-->
            </div>
            <div class="info-prop">
              <span>反映渠道：</span>
              <span>{{ eventInfo.sourceTypeName || "--" }}</span>
            </div>
            <div class="info-prop">
              <span>地址：</span>
              <span>{{ eventInfo.address || "--" }}</span>
            </div>
            <div class="info-prop">
              <span>报事人：</span>
              <span>{{ eventInfo.name || "--" }}</span>
            </div>
            <div class="info-prop">
              <span>手机号：</span>
              <span>{{ eventInfo.mobile || "--" }}</span>
            </div>
            <div class="info-prop">
              <span>身份证号：</span>
              <span>{{ eventInfo.idCard || "--" }}</span>
            </div>

          </div>

          <div class="m-process"
               v-if="eventProcess.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 eventProcess">
                <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.wantServiceTime">
                  <div class="detail-field">说 明：</div>
                  <div class="detail-value">
                    <fold-text :row="3">{{ item.wantServiceTime }}</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 class="tabs">

          <div 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>

        <div class="m-case">
          <div class="m-yanpan">
            <div v-if="eventId || true">
              <screen-loading v-if="!yanPan.loading">加载中</screen-loading>
              <analyse v-else-if="yanPan.singleTitle"
                       :singleTitle="yanPan.singleTitle"
                       :userList="yanPan.dependents"
                       :userName="yanPan.reportorName"
                       :userTag="'(报事人)'"
                       :singleList="yanPan.singleList"
                       :hasEvent="yanPan.hasEvent"
                       @user="toUserInfo" />
              <div v-else
                   class="m-hint">
                <img src="@/assets/img/modules/visual/noData.png"
                     class="no-data-img" />
              </div>
            </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: "研判分析" }],
    groupIndex: 0,
    startGroupIndex: 0,

    eventProcess: [],

    eventInfo: {
      gridId: "",
      gridName: '',
      createdTime: [],
      eventContent: "",
      imageUrls: [],
      voiceUrls: [],
      sourceType: '',
      address: '',
      reportUserId: "",
      name: "",
      mobile: "",
      idCard: "",

    },

    yanPan: {
      loading: false,
      reportorName: "",

      dependents: [],
      categoryId: '',
      projectData: [
        // {
        //   firstCategoryCode: '',
        //   firstCategoryName: '',
        //   projectList: [],
        // }
      ],
      hasEvent: false,
      singleTitle: "",

      singleList: [], //楼院小组

    },
  };
}

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


  },

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

  data: iniData,

  computed: {},

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

    // },
  },

  mounted () {
    console.log(this.eventId);
    this.getApiData();
  },

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


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

    async getApiData () {
      await this.getEventInfo();

      this.getEventProcess();
      await this.getYanPan();
      await this.getYanPanList();
      this.yanPan.loading = true;

    },

    //加载组织数据
    async getEventInfo () {
      const url = "/gov/project/icEvent/detail";
      //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/eventDetail/" + this.eventId;

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

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

    //加载处理进展
    async getEventProcess () {
      const url = "/gov/project/icEvent/process";
      //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/processes/" + this.eventId;

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

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

    //加载组织数据
    async getYanPan () {
      const url = "/gov/project/icEvent/processAnalysis/analysis/" + this.eventId;
      //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/analysis/" + this.eventId;

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

      if (code === 0) {

        data.dependents.forEach((item) => {
          item.icResiUserId = item.id;
          item.icUserName = item.name;
        });


        //楼院小组、居民上报都存在是，研判分析显示两个分支
        this.yanPan.singleTitle = "楼院小组";
        this.yanPan.hasEvent = false;


        this.yanPan = { ...this.yanPan, ...data };
        console.log(this.yanPan);

      } else {
        this.$message.error(msg);
      }
    },
    //加载组织数据
    async getYanPanList () {
      //const url = "/gov/project/icEvent/processAnalysis/categoryEventList";
      const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/categoryEventList";

      let param = {

        categoryPids: this.yanPan.categoryId,
        pageNo: 1,
        pageSize: 10
      }
      const { data, code, msg } = await requestPost(url, param);

      this.yanPan.loading = true;
      if (code === 0) {
        let oneData = {
          categoryCode: 111,
          categoryName: 111,
          showItem: true,
          addressList: data.list.map((subItem) => {
            return {

              address: subItem.address,

            };
          }),
          projectList: []
        }

        let aaa = {
          singleList: [oneData]
        }



        this.yanPan = { ...this.yanPan, ...aaa };
        console.log(this.yanPan);

      } else {
        this.$message.error(msg);
      }
    },

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


  },
};
</script>

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