dvcp_v2_webapp/project/qujing/app/AppConflictMediation/components/Detail.vue

<template>
  <ai-detail class="reportAtWillDetail" v-loading="isLoading">
    <template #title>
      <ai-title title="矛盾调解详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
    </template>
    <template #content>
      <div class="detail-content__wrapper">
        <ai-card class="detail-content__wrapper--left" title="基础信息">
          <template #content>
            <ai-wrapper>
              <ai-info-item label="上报人员" :value="detail.name"/>
              <ai-info-item label="当前状态" :value="dict.getLabel('conflictEventStatus', detail.eventStatus)"></ai-info-item>
              <ai-info-item label="上报时间">{{ detail.createTime }}</ai-info-item>
              <ai-info-item label="事件类型">{{ detail.groupName }}</ai-info-item>
              <ai-info-item label="事件描述" isLine>{{ detail.content }}</ai-info-item>
              <ai-info-item label="现场照片" isLine>
                <ai-uploader :instance="instance" disabled v-model="detail.files"></ai-uploader>
              </ai-info-item>
              <ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
              <ai-info-item label="事件位置" isLine>
                <ai-map class="eventMap" :map.sync="map" :lib.sync="AMap"/>
              </ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
        <div class="rightZone">
          <ai-card title="办理进度">
            <template #content>
              <el-steps direction="vertical">
                <el-step v-for="(item, i) in processList" :key="i" :title="item.systemExplain" :description="item.doTime">
                  <template #title>
                    <div flex>
                      <ai-avatar type="circle">{{ item.user }}</ai-avatar>
                      <div class="fill mar-l8">
                        <h2 class="step-title" v-text="item.title"/>
                        <p class="color-999 font-14">{{ item.doTime }}</p>
                      </div>
                    </div>
                  </template>
                  <template #description>
                    <div class="color-444 mar-b10" v-if="item.doExplain" v-text="item.doExplain"/>
                    <ai-uploader :instance="instance" disabled v-model="item.files"/>
                  </template>
                </el-step>
              </el-steps>
            </template>
          </ai-card>
        </div>
      </div>
    </template>
  </ai-detail>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'Detail',
  props: ['dict', 'instance'],
  data() {
    return {
      isLoading: true,
      detail: {},
      processList: [],
      map: null,
      AMap: null
    }
  },

  computed: {
    ...mapState(['user'])
  },

  created() {
    this.dict.load('conflictEventStatus').then(() => this.getDetail())
  },

  methods: {
    getDetail() {
      const {id} = this.$route.query
      this.instance.post('/app/appconflicteventinfo/queryDetailById', null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
          this.processList = res.data.processList.map(item => {
            item.user = item.girdMemberName
            item.title = item.systemExplain.replace(/\$(.+?)\$/g, '')
            this.RenderPosition()
            return item
          })
        }
      }).finally(() => this.isLoading = false)
    },
    cancel() {
      this.$router.push({})
    },
    onChange(e) {
      this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
        if (res.code === 0) {
          this.form.ruleId = ''
          this.eventList = res.data.records
        }
      })
    },
    RenderPosition() {
      const {AMap, map, detail: {lng, lat, address}} = this
      this.$load(map).then(() => {
        const marker = new AMap.Marker({
          position: new AMap.LngLat(lng, lat),
          title: address
        })
        map.add(marker)
        map.setFitView()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.reportAtWillDetail {
  height: 100%;

  .el-steps {
    :deep( .el-step__icon ) {
      font-size: 12px;
      color: #555555;
      border-color: #d0d4dc;
    }

    :deep( .el-step__head.is-finish ) {
      .el-step__icon.is-text {
        border: none;
        color: #fff;
        font-size: 12px;
        background: #2266ff;
      }
    }

    :deep( .el-step__line ) {
      background-color: #d0d4dc;
    }
  }

  :deep( .el-step__head.is-process ) {
    color: #555;
    border-color: #555;
  }

  :deep( .is-finish h2 ) {
    color: #2266ff;
  }

  .step-title {
    color: #555;
    font-size: 14px;
  }

  .detail-content__wrapper {
    display: flex;
    width: 100%;

    .detail-content__wrapper--left {
      flex: 1;
      margin-right: 20px;
    }
  }

  :deep( .ai-detail__content ) {
    background: #f3f6f9;

    .ai-detail__content--wrapper {
      display: flex;
      gap: 16px;
      width: 100%;
      max-width: 100%;
      padding: 16px;
      box-sizing: border-box;

      & > .el-card {
        flex: 1;
        min-width: 0;
      }

      .rightZone {
        width: 400px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
    }
  }

  .eventMap {
    width: 500px;
    height: 300px;
  }

  :deep( .el-card ) {
    .el-card__header {
      padding: 12px 16px;
      font-weight: bold;
    }

    .el-card__body {
      padding: 8px;
    }


    .el-steps {
      margin-left: 8px;
    }

    .imgFormItem > .el-form-item__content {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;

      &:before {
        content: none;
      }

      .el-image__inner {
        width: 82px;
        height: 82px;
      }
    }
  }
}
</style>