随手拍

2024-03-01 13:46:14 +08:00
parent 45d7f9b699
commit 3a8c561a52
5 changed files with 920 additions and 2 deletions
--- a/src/project/qujing/AppPhotoReport/PhotoDetail.vue
+++ b/src/project/qujing/AppPhotoReport/PhotoDetail.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="photo-detail">
+    <AiGroup noBorder>
+      <h2>{{ info.content }}</h2>
+      <div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
+      <div style="height:20px;"></div>
+    </AiGroup>
+    <AiGroup description noBorder labelColor="#999">
+      <AiItem label="事件类型" :value="info.groupName"/>
+      <AiItem label="所属网格" :value="info.girdName"/>
+      <AiItem label="上报时间" :value="info.createTime"/>
+      <AiItem label="照片" class="not-line">
+        <div class="flex wrap">
+          <image class="fill imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
+        </div>
+        <span v-if="!info.files.length">暂无照片</span>
+      </AiItem>
+    </AiGroup>
+    <u-gap height="24" v-if="result.doExplain && info.groupName != '矛盾调解'" />
+    <AiGroup title="处理详情" v-if="info.eventStatus > 1 && result.doExplain" description noBorder labelColor="#999">
+      <AiItem label="处理结果" top-label :value="result.doExplain"/>
+      <AiItem label="照片" class="not-line">
+        <div class="flex wrap">
+          <image class="fill imageItem" v-for="(item, index) in result.files" @click="preview(item.url)" :key="index" :src="item.url"/>
+        </div>
+        <span v-if="!result.files.length">暂无照片</span>
+      </AiItem>
+    </AiGroup>
+    <u-gap height="24" v-if="info.judgeName"/>
+    <AiGroup description noBorder labelColor="#999" v-if="info.judgeName">
+      <AiItem label="事件研判"><span class="risk-level" :class="`level`+info.judgeRiskLevel">{{ $dict.getLabel('qujingRiskLevel', info.judgeRiskLevel) }}</span></AiItem>
+      <AiItem label="当事人姓名" :value="info.judgeName"/>
+      <AiItem label="性别" :value="$dict.getLabel('sex', info.judgeSex)"/>
+      <AiItem label="联系电话" :value="info.judgePhone"/>
+      <AiItem label="家庭住址" :value="info.judgeAddress"/>
+      <AiItem label="排查内容" class="not-line">
+        <span v-for="(item, index) in info.judgeRiskList" :key="index">
+          <span v-if="index > 0">,</span>{{ $dict.getLabel('qujingRisk', item) }}
+        </span>
+      </AiItem>
+    </AiGroup>
+    <u-gap height="24" v-if="info.mediateAreaName"/>
+    <AiGroup description noBorder labelColor="#999" v-if="info.mediateAreaName">
+      <AiItem label="调解主体" :value="info.mediateAreaName" />
+      <AiItem label="涉及金额" :value="info.mediateAmount"/>
+      <AiItem label="调解员" :value="info.mediatePerson"/>
+      <AiItem label="参加人" :value="info.mediateMember || '无'"/>
+      <AiItem label="调解时间" :value="info.mediateDate"/>
+      <AiItem label="调处思路、措施及主要过程" :value="info.mediateInfo"/>
+      <AiItem label="调处结果" class="not-line" value="调解成功" />
+    </AiGroup>
+    <u-gap height="24" />
+    <u-tabs :list="evaluation && evaluation.id ? [{name:'办理进度'},{name:'我的评价'}] : [{name:'办理进度'}] " :current="currentTab" @change="v=>currentTab=v"/>
+    <u-gap height="24" bg-color="#fff" />
+    <AiGroup noBorder v-if="currentTab=='0'">
+      <AiStep v-for="(item,i) in process" :key="item.id" :index="i">
+        <div class="flex start">
+          <div class="fill stepTitle" v-text="item.systemExplain"/>
+          <div class="color-999 mar-r32 stepTime" v-text="item.doTime"/>
+        </div>
+        <div v-if="item.doExplain" class="stepContent mar-t8" v-text="item.doExplain"/>
+        <u-gap height="48"/>
+      </AiStep>
+    </AiGroup>
+    <AiEvaluation v-if="currentTab=='1'" :bid="info.id" type="show"/>
+    <AiEvaluation v-if="info.eventStatus == 3" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
+      <div class="bottomBtn">去评价</div>
+    </AiEvaluation>
+  </div>
+</template>
+
+<script>
+export default {
+  appName: "随手拍详情",
+  data() {
+    return {
+      info: {},
+      result: {},
+      currentTab: 0,
+      evaluation: {}
+    }
+  },
+  computed: {
+    detailStatus: v => {
+      const status = !v.evaluation.id ? v.info.eventStatus : 'evaluation'
+      return {
+        cls: 'status-' + status,
+        label: !v.evaluation.id ? v.$dict.getLabel('qujingEventStatus', v.info.eventStatus) : "已评价"
+      }
+    },
+    process() {
+      const list = this.info.processList
+      if (this.evaluation.id) {
+        const {id, createUserName, score, createTime: doTime, rateText: doExplain} = this.evaluation
+        list.splice(0, 0, {
+          id, doTime, doExplain,
+          systemExplain: `${createUserName}完成评价 (${score}星评价)`
+        })
+      }
+      return list
+    }
+  },
+  onShow() {
+    this.getInfo()
+  },
+  onLoad(query) {
+    this.id = query.id
+    this.getInfo()
+    this.$dict.load(['qujingEventStatus', 'qujingDoStatus', 'qujingEventType', 'sex', 'qujingRisk', 'qujingRiskLevel'])
+  },
+  methods: {
+    getInfo() {
+      this.$loading()
+      this.$instance.post(`/app/appclapeventinfoqujing/queryDetailById?id=${this.id}`).then(res => {
+        if (res?.data) {
+          this.info = res.data
+          if (res.data.eventStatus > 1) {
+            this.result = res.data.processList[0]
+          }
+          if(this.info.judgeRisk) {
+            this.info.judgeRiskList = this.info.judgeRisk.split(',')
+          }
+        }
+      }).finally(() => this.$hideLoading())
+    },
+    previewResult(url) {
+      uni.previewImage({
+        urls: this.result.files.map(v => v.url),
+        current: url
+      })
+    },
+
+    preview(url) {
+      uni.previewImage({
+        urls: this.info.files.map(v => v.url),
+        current: url
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.photo-detail {
+  padding: 32px 0 160px;
+  margin-bottom: 60px;
+  // background: #fff;
+
+  h2 {
+    line-height: 1.3;
+    margin-bottom: 26px;
+    color: #333333;
+    text-align: justify;
+    font-size: 40px;
+  }
+
+  ::v-deep.stepTitle {
+    min-height: 44px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 32px;
+  }
+
+  .stepTime {
+    line-height: 44px;
+  }
+
+  .stepContent {
+    color: #343D65;
+  }
+
+  .status-name {
+    width: 96px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    // background: #FF883C;
+    color: #fff;
+    font-size: 26px;
+    border-radius: 8px;
+
+    // &.status-1, &.status-evaluation {
+    //   background: #1AAAFF;
+    // }
+
+    // &.status-2 {
+    //   background: #42D784;
+    // }
+
+    // &.status-3 {
+    //   background: #FF4466;
+    // }
+
+    &.status-0 {
+      background: #ff883c;
+    }
+
+    &.status-1, &.status-2, &.status-evaluation{
+      background: #1aaaff;
+    }
+
+    &.status-3 {
+      background: #42d784;
+    }
+
+    &.status-4 {
+      background: #ff4466;
+    }
+  }
+
+  .imageItem {
+    min-width: 30%;
+    height: 30vw;
+    flex-shrink: 0;
+    margin-right: 16px;
+    margin-bottom: 16px;
+
+    &:nth-of-type(3n) {
+      margin-right: 0;
+    }
+  }
+  .not-line {
+    .AiItem {
+      .normal {
+        border: none!important;
+        min-height: 112px!important;
+      }
+    }
+  }
+  ::v-deep .AiGroup {
+    .groupHeader {
+      padding-top: 16px!important;
+    }
+  }
+  .level1 {
+    color: #3D88F5;
+  }
+  .level2 {
+    color: #52C75B;
+  }
+  .level3 {
+    color: #FF883C;
+  }
+  .level4 {
+    color: #FF3C3C;
+  }
+
+}
+</style>