|
@@ -0,0 +1,188 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="event-list-item">
|
|
|
+ <div class="item-content">
|
|
|
+ <div class="item-data">
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="item-data-label">任务类型:</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data-value">{{ get_task_type_text(task_info.task_type) }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data">
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="item-data-label">关键事件:</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data-value">{{ task_info.event_name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data">
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="item-data-label">任务状态:</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data-value">{{ task_info.processing_status }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data">
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="item-data-label">要求完成时间:</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data-value">{{ task_info.expire_time || "-" }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data" v-show="task_info.processing_status == '已完成'">
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="item-data-label">实际完成时间:</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data-value">{{ task_info.update_time }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data">
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="item-data-label">反馈人:</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data-value">{{ task_info.feeback_user || "-" }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data">
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="item-data-label">任务信息:</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data">
|
|
|
+ <div class="item-data-content">{{ task_info.task_description}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item-content"
|
|
|
+ v-for="(item, index) in task_info.feebacks"
|
|
|
+ :key="item.id">
|
|
|
+ <div class="item-data">
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="item-data-label">反馈内容:</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data-value">{{ item.create_time || "-" }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data">
|
|
|
+ <div class="item-data-content">{{ item.content}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data" v-if="item.fileCount > 0">
|
|
|
+ <div class="item-left">
|
|
|
+ <div class="item-data-label">照片/视频:</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-data-image" v-if="item.fileCount > 0">
|
|
|
+ <img
|
|
|
+ v-for="(file, _) in item.fileList"
|
|
|
+ :key="file.id"
|
|
|
+ class="image"
|
|
|
+ :src="get_img_url(file.url)"
|
|
|
+ ></img>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import {reactive, ref, toRefs, onMounted} from 'vue';
|
|
|
+import {useRoute, useRouter} from "vue-router";
|
|
|
+import { getTaskDetail } from '@/api/emergencyCommandMap/JointDuty';
|
|
|
+import { showToast } from 'vant';
|
|
|
+const route = useRoute();
|
|
|
+const task_id = ref('');
|
|
|
+const data = reactive({
|
|
|
+ task_info: {
|
|
|
+ task_type: '',
|
|
|
+ event_name: '',
|
|
|
+ processing_status: '',
|
|
|
+ expire_time: '',
|
|
|
+ update_time: '',
|
|
|
+ feeback_user : '',
|
|
|
+ task_description: '',
|
|
|
+ feebacks: []
|
|
|
+ }
|
|
|
+});
|
|
|
+const { task_info } = toRefs(data);
|
|
|
+
|
|
|
+const opt_task_type = [
|
|
|
+ { text: "全部", value: "" },
|
|
|
+ { text: "事件处置", value: "0" },
|
|
|
+ { text: "防范措施", value: "1" },
|
|
|
+ { text: "险情处理", value: "2" },
|
|
|
+ { text: "督办任务", value: "3" }
|
|
|
+];
|
|
|
+
|
|
|
+const get_task_type_text = (val) => {
|
|
|
+ return opt_task_type.find(item => item.value == val).text
|
|
|
+}
|
|
|
+
|
|
|
+const baseUrl = import.meta.env.VITE_BASE_API;
|
|
|
+const downLoadApi = import.meta.env.VITE_BASE_DOWNLOAD_API;
|
|
|
+
|
|
|
+const get_img_url = (url) => {
|
|
|
+ return baseUrl + downLoadApi + url;
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(()=> {
|
|
|
+ task_id.value = route.query.task_id as string || "";
|
|
|
+ getTaskDetail({task_id: task_id.value}).then((res)=>{
|
|
|
+ task_info.value = res.data;
|
|
|
+ })
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 8px 0 ;
|
|
|
+
|
|
|
+.event-list-item {
|
|
|
+ position: relative;
|
|
|
+ margin: 8px 8px 0;
|
|
|
+ // background: #ffffff;
|
|
|
+ // border-radius: 4px;
|
|
|
+ // border: 0.5px solid #eaedf7;
|
|
|
+ // box-shadow: 0 0 4px 0 #4554661a;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0px;
|
|
|
+ }
|
|
|
+ .item-content {
|
|
|
+ padding: 0 12px 12px;
|
|
|
+ }
|
|
|
+ .item-data {
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 26px;
|
|
|
+ .item-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .item-data-label {
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: #414f64;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-data-value {
|
|
|
+ color: #414f64;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-data-content {
|
|
|
+ background: #f1f1f1;
|
|
|
+ padding:4px 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-data-image {
|
|
|
+ display:flex;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ height:var(--van-uploader-size);;
|
|
|
+ width:var(--van-uploader-size);;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+}
|
|
|
+</style>
|