fix

src/components/ImagePreview/index.vue

@@ -1,86 +1,87 @@
-<template>
-  <el-image
-    :src="`${realSrc}`"
-    fit="cover"
-    :style="`width:${realWidth};height:${realHeight};`"
-    :preview-src-list="realSrcList"
-    append-to-body="true"
-  >
-    <template #error>
-      <div class="image-slot">
-        <el-icon><picture-filled /></el-icon>
-      </div>
-    </template>
-  </el-image>
-</template>
-
-<script setup>
-import { isExternal } from "@/utils/validate";
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true
-  },
-  width: {
-    type: [Number, String],
-    default: ""
-  },
-  height: {
-    type: [Number, String],
-    default: ""
-  }
-});
-
-const realSrc = computed(() => {
-  let real_src = props.src.split(",")[0];
-  if (isExternal(real_src)) {
-    return real_src;
-  }
-  return import.meta.env.VITE_APP_BASE_API + real_src;
-});
-
-const realSrcList = computed(() => {
-  let real_src_list = props.src.split(",");
-  let srcList = [];
-  real_src_list.forEach(item => {
-    if (isExternal(item)) {
-      return srcList.push(item);
-    }
-    return srcList.push(import.meta.env.VITE_APP_BASE_API + item);
-  });
-  return srcList;
-});
-
-const realWidth = computed(() =>
-  typeof props.width == "string" ? props.width : `${props.width}px`
-);
-
-const realHeight = computed(() =>
-  typeof props.height == "string" ? props.height : `${props.height}px`
-);
-</script>
-
-<style lang="scss" scoped>
-.el-image {
-  border-radius: 5px;
-  background-color: #ebeef5;
-  box-shadow: 0 0 5px 1px #ccc;
-  :deep(.el-image__inner) {
-    transition: all 0.3s;
-    cursor: pointer;
-    &:hover {
-      transform: scale(1.2);
-    }
-  }
-  :deep(.image-slot) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    color: #909399;
-    font-size: 30px;
-  }
-}
-</style>
+<template>
+  <el-image v-for="(item,index) in realSrcList"
+    :src="`${item}`"
+    fit="cover"
+    :initial-index="index"
+    :style="`width:${realWidth};height:${realHeight};margin-right:20px`"
+    :preview-src-list="realSrcList"
+    append-to-body="true"
+  >
+    <template #error>
+      <div class="image-slot">
+        <el-icon><picture-filled /></el-icon>
+      </div>
+    </template>
+  </el-image>
+</template>
+
+<script setup>
+import { isExternal } from "@/utils/validate";
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  width: {
+    type: [Number, String],
+    default: ""
+  },
+  height: {
+    type: [Number, String],
+    default: ""
+  }
+});
+
+const realSrc = computed(() => {
+  let real_src = props.src.split(",")[0];
+  if (isExternal(real_src)) {
+    return real_src;
+  }
+  return import.meta.env.VITE_APP_BASE_API + real_src;
+});
+
+const realSrcList = computed(() => {
+  let real_src_list = props.src.split(",");
+  let srcList = [];
+  real_src_list.forEach(item => {
+    if (isExternal(item)) {
+      return srcList.push(item);
+    }
+    return srcList.push(import.meta.env.VITE_APP_BASE_API + item);
+  });
+  return srcList;
+});
+
+const realWidth = computed(() =>
+  typeof props.width == "string" ? props.width : `${props.width}px`
+);
+
+const realHeight = computed(() =>
+  typeof props.height == "string" ? props.height : `${props.height}px`
+);
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  border-radius: 5px;
+  background-color: #ebeef5;
+  box-shadow: 0 0 5px 1px #ccc;
+  :deep(.el-image__inner) {
+    transition: all 0.3s;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+  :deep(.image-slot) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #909399;
+    font-size: 30px;
+  }
+}
+</style>

src/components/MapSelect/index.jsx

@@ -164,6 +164,7 @@ export default defineComponent({
           var bottom = [];
 
           data.pois.map((item) => {
+            // console.log(item)
             if (top.length < 1) {
               top = [
                 Number(item.location.split(',')[0]),

src/components/Task/Add/index.vue

@@ -85,6 +85,11 @@
                         <el-input v-model="taskinfo.taskOtherId" />
                     </el-form-item>
                 </el-col>
+                 <el-col :span="24">
+                    <el-form-item label="备注">
+                        <el-input type="textarea" v-model="taskinfo.remark" />
+                    </el-form-item>
+                </el-col>
 
                 <el-col :span="12">
                     <el-form-item label="事件地址">
@@ -180,7 +185,7 @@ const fileList = ref([])
 
 
 const taskinfo = ref({
-    name: "",
+
     taskName: null,
     taskContent: null,
     taskAddr: null,
@@ -195,13 +200,15 @@ const taskinfo = ref({
     taskTime: null,
     taskReqCompleteTime: null,
     status: 1,
+    remark:"ss",
     taskCreater: null,
     taskReporter: null,
     taskPics: null,
     taskVideos: null,
     taskComplainConnect: null,
     taskDeptRange: "",
-    taskFacilitieCode: ""
+    taskFacilitieCode: "",
+    remark:""
 })
 </script>
 

src/router/index.js

@@ -74,12 +74,20 @@ export const constantRoutes = [{
         hidden: true,
         redirect: "noredirect",
         children: [{
-            path: "list/:status",
-            component: () =>
-                import ("@/views/task/list/index"),
-            name: "list",
-            meta: { title: "任务列表", icon: "user" },
-        }, ],
+                path: "list/:status",
+                component: () =>
+                    import ("@/views/task/list/index"),
+                name: "list",
+                meta: { title: "任务列表", icon: "user" },
+            },
+            {
+                path: "detail",
+                component: () =>
+                    import ("@/views/task/detail/index"),
+                name: "detail",
+                meta: { title: "任务详情", icon: "user" },
+            },
+        ],
     },
     {
         path: "/user",

src/views/task/detail/index.vue

@@ -0,0 +1,249 @@
+<template>
+    <div style="padding:10px 15px">
+        <div class="taskdetail">
+            <div class="title">{{taskinfo.taskName}} 工单
+                <div class="btngroup">
+                    <el-button type="primary">派 发</el-button>
+                    <el-button type="primary">驳 回</el-button>
+                    <el-button type="primary">处 置</el-button>
+                    <el-button type="primary">审 核</el-button>
+                    <el-button type="primary">跟 踪</el-button>
+                    <el-button type="danger" @click="()=>{router.back()}">返回</el-button>
+                </div>
+            </div>
+            <div class="card">
+                <div class="title">工单信息</div>
+                <div class="body">
+                    <el-row>
+                        <el-col :span="6">事件来源：{{task_type.filter(i=>i.value===taskinfo.taskType)[0]?.label ?? '-'}}</el-col>
+                        <el-col :span="6">班组区域：{{ taskinfo.taskDeptRange.split(",").map(i=>{ return alldept.find(p=>{return (p.deptId+"")===(i+"")})?.deptName ?? '-' } ).join(",") }}</el-col>
+                        <el-col :span="6">来件时间：{{taskinfo.taskTime}}</el-col>
+                        <el-col :span="6">设施编号：{{taskinfo.taskFacilitieCode}}</el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="6">事件分类：{{task_event_type.filter(i=>i.value===taskinfo.taskEventType)[0]?.label ?? '-'}}</el-col>
+                        <el-col :span="6">其他工单号：{{taskinfo.taskOtherId}}</el-col>
+                        <el-col :span="6">要求完成时间：{{taskinfo.taskReqCompleteTime}}</el-col>
+                        <el-col :span="6">事件类型：{{task_event_category.filter(i=>i.value===taskinfo.taskEventCategory)[0]?.label ?? '-'}}</el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="6">来件备注：{{taskinfo.taskFromRemark}}</el-col>
+                        <el-col :span="6">投诉人电话：{{taskinfo.taskComplainConnect}}</el-col>
+                        <el-col :span="6">上报人：{{taskinfo.taskReporter}}</el-col>
+
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">详细地址：{{taskinfo.taskAddr}}</el-col>
+                        <el-col :span="12">备注信息：{{taskinfo.remark}}</el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">现场照片：</el-col>
+                        <el-col :span="12">任务内容：{{taskinfo.taskContent}}</el-col>
+                    </el-row>
+
+                    <el-row>
+                        <el-col :span="24">
+                            <ImagePreview v-model:src="taskinfo.taskPics" :height="'120px'" :width="'120px'"></ImagePreview>
+                        </el-col>
+
+                    </el-row>
+
+
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="title">派发信息</div>
+                <div class="body">
+                    <el-row>
+                        <el-col :span="6">负责人：{{task_type.filter(i=>i.value===taskinfo.taskType)[0]?.label ?? '-'}}</el-col>
+                        <el-col :span="6">联系方式：{{ taskinfo.taskDeptRange.split(",").map(i=>{ return alldept.find(p=>{return (p.deptId+"")===(i+"")})?.deptName ?? '-' } ).join(",") }}</el-col>
+                        <el-col :span="6">处置班组：{{taskinfo.taskTime}}</el-col>
+                        <el-col :span="6">派发时间：{{taskinfo.taskFacilitieCode}}</el-col>
+                    </el-row>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="title">现场驳回</div>
+                <div class="body">
+
+                    <el-row>
+                        <el-col :span="12">原因备注：{{task_type.filter(i=>i.value===taskinfo.taskType)[0]?.label ?? '-'}}</el-col>
+
+                        <el-col :span="12">驳回时间：{{taskinfo.taskTime}}</el-col>
+                        <el-col :span="12">照片：</el-col>
+                        <el-col :span="12">说明报告：<a>sdd</a></el-col>
+
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <ImagePreview v-model:src="taskinfo.taskPics" :height="'120px'" :width="'120px'"></ImagePreview>
+                        </el-col>
+
+                    </el-row>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="title">跟踪信息</div>
+                <div class="body">
+                    <el-row>
+                        <el-col :span="6">是否及时完成：{{task_type.filter(i=>i.value===taskinfo.taskType)[0]?.label ?? '-'}}</el-col>
+                        <el-col :span="6">回访情况：{{ taskinfo.taskDeptRange.split(",").map(i=>{ return alldept.find(p=>{return (p.deptId+"")===(i+"")})?.deptName ?? '-' } ).join(",") }}</el-col>
+                        <el-col :span="6">处置完成日期：{{taskinfo.taskTime}}</el-col>
+                        <el-col :span="6">记录人：{{taskinfo.taskFacilitieCode}}</el-col>
+                    </el-row>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="title">处置信息</div>
+                <div class="body">
+
+                   <div v-for="(item,index1) in processdata">
+                     <div class="titleheader" :style="`${index1==0?'margin-top:0px':''}`">{{item.title}}</div>
+                     <div>
+                        <el-row>
+                        <el-col :span="6" v-for="p in item.content">{{p}}</el-col>
+                    </el-row>
+                     </div>
+                   </div>
+
+                   <div>
+                       <div class="titleheader">现场图片</div>
+                        <el-row>
+                        <el-col :span="24" >
+                          <ImagePreview v-model:src="taskinfo.taskPics" :height="'120px'" :width="'120px'"></ImagePreview>
+                        </el-col>
+                        </el-row>
+
+
+                   </div>
+
+
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="title">核查信息</div>
+                <div class="body">
+
+                    <el-row>
+                        <el-col :span="12">核查人员：{{task_type.filter(i=>i.value===taskinfo.taskType)[0]?.label ?? '-'}}</el-col>
+
+                        <el-col :span="12">核查时间：{{taskinfo.taskTime}}</el-col>
+                        <el-col :span="24">核查备注：{{taskinfo.taskFacilitieCode}}</el-col>
+                    </el-row>
+                </div>
+            </div>
+
+
+
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, ref } from 'vue'
+import { useDict } from '@/utils/dict';
+// 图片预览组件
+import ImagePreview from "@/components/ImagePreview"
+import { cloneDeep } from 'lodash';
+import { listDept, getDept } from "@/api/system/dept";
+import router from '../../../router';
+const { task_status, task_type, task_event_type, task_event_category } = useDict("task_status", "task_type", "task_event_type", "task_event_category");
+
+
+
+const alldept = ref([]);
+listDept().then(response => {
+    alldept.value = cloneDeep(response.data);
+});
+
+const processdata = ref([{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]},{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]},{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]},{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]},{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]},{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]}])
+
+
+const taskinfo = ref({
+    taskName: "测试任务",
+    taskContent: "测试任务测试任务测试任务测试任务测试任务测试任务测试任务测试任务",
+    taskAddr: "-",
+    taskLocation: "-",
+    taskCode: "-",
+    taskType: "1",
+    taskEventType: "1",
+    taskEventCategory: "1",
+    taskFromRemark: "-",
+    taskAddrRoad: "-",
+    taskOtherId: "-",
+    taskTime: "2022-11-11 16:11:11",
+    taskReqCompleteTime: "2022-11-11 16:11:11",
+    status: 1,
+    taskCreater: "-",
+    taskReporter: "-",
+    taskPics: "/profile/upload/2022/06/01/icon128_20220601100554A011.png,/profile/upload/2022/05/31/icon16_20220531155706A001.png",
+    remark: "sss",
+    taskVideos: "-",
+    taskComplainConnect: "-",
+    taskDeptRange: "100,103",
+    taskFacilitieCode: "sdsdfdf"
+})
+</script>
+
+<style lang="scss">
+.taskdetail {
+    background: #fff;
+    padding: 30px 22px;
+    border-radius: 8px;
+    overflow-y: auto;
+    padding-top: 20px;
+    position: relative;
+    .title {
+        color: #2B3551;
+        font-size: 16px;
+        font-weight: 400;
+        .btngroup {
+            position: absolute;
+            top: 13px;
+            right: 20px;
+            .el-button {
+                margin-left: 25px;
+            }
+        }
+    }
+    .card {
+        border: 1px solid #E5E9F2;
+        border-radius: 8px;
+        margin-top: 16px;
+        overflow: hidden;
+        .title {
+            background: rgba(192, 204, 218, 0.2);
+            height: 54px;
+            line-height: 54px;
+            color: #324057;
+            font-size: 14px;
+            font-weight: Bold;
+            padding-left: 22px;
+        }
+        .body {
+            padding: 20px;
+            color: #475669;
+            font-size: 14px;
+            // padding-top: 10px;
+            .el-col {
+                margin-bottom: 20px;
+            }
+            .titleheader{
+              color:#2C7DE3;
+              font-weight: Bold;
+              margin-bottom: 24px;
+              margin-top: 20px;
+            }
+        }
+    }
+}
+</style>

src/views/task/list/index.vue

@@ -46,6 +46,7 @@
         class="eltable"
         height="250"
         style="width: 100%"
+        @row-click="tblrowclick"
       >
         <el-table-column prop="date" label="序号" width="50" />
         <el-table-column prop="name" label="工单号" width="180" />
@@ -90,6 +91,7 @@
 import { defineComponent, ref, reactive,onMounted } from "vue";
 import { useDict } from '@/utils/dict';
 import  TaskAdd  from '@/components/Task/Add'
+import router from "../../../router";
 
 
 const showadd = ref(false);
@@ -139,6 +141,12 @@ const tableData = [
   },
 ];
 
+const tblrowclick=(row)=>{
+  console.log(row);
+   router.push("/task/detail")
+
+}
+
 onMounted(()=>{