From 414327a34ab7f4c9d9a74be8a09cb07d6aab1455 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Wed, 21 Sep 2022 10:16:09 +0800
Subject: [PATCH] 任务管理添加查看地图详情
---
src/components/OpenLayersMap/index.vue | 7
src/router/views/index.js | 45 +++++++-
src/const/taskinfo/taskinfo.js | 2
src/views/taskinfo/taskinfo.vue | 16 +++
src/views/taskinfo/taskinfoDetail.vue | 188 +++++++++++++++++++++++++++++++++++++
5 files changed, 246 insertions(+), 12 deletions(-)
diff --git a/src/components/OpenLayersMap/index.vue b/src/components/OpenLayersMap/index.vue
index 6657d14..38a3ff3 100644
--- a/src/components/OpenLayersMap/index.vue
+++ b/src/components/OpenLayersMap/index.vue
@@ -1,8 +1,8 @@
<template>
<div>
- <div id='map' style='width: 100%; height: 400px'>
+ <div id='map' :style="{height:isTaskinfoDetail?'85vh':'40vh',width:'100%'}">
<div style="position: absolute;right:40%;top:-1%;z-index: 999999">
- <p style="margin-top: 10px">
+ <p style="margin-top: 10px" v-if="!isTaskinfoDetail">
<el-button type="primary" size="small" @click="point()">绘制路线</el-button>
<el-button type="danger" size="small" @click="clearDraw()">重置</el-button>
</p>
@@ -30,7 +30,7 @@
export default {
name: 'OpenLayersMap',
- props:['routeRange'],
+ props:['routeRange','isTaskinfoDetail'],
data() {
return {
map: null,
@@ -84,7 +84,6 @@
}),
})
_this.map.addLayer(_this.lineVector)
-
_this.addLineDraw(_this.routeRange)
},
// 绘画之后的样式
diff --git a/src/const/taskinfo/taskinfo.js b/src/const/taskinfo/taskinfo.js
index eab9e21..ecdd3d0 100644
--- a/src/const/taskinfo/taskinfo.js
+++ b/src/const/taskinfo/taskinfo.js
@@ -6,7 +6,7 @@
searchMenuSpan: 6,
border: true,
index: true,
- viewBtn: true,
+ viewBtn: false,
selection: true,
dialogClickModal: false,
column: [
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 383242e..84ebe06 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -1,6 +1,7 @@
import Layout from '@/page/index/'
-export default [{
+export default [
+ {
path: '/wel',
component: Layout,
redirect: '/wel/index',
@@ -22,7 +23,8 @@
component: () =>
import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
}]
-}, {
+},
+ {
path: '/test',
component: Layout,
redirect: '/test/index',
@@ -35,7 +37,8 @@
component: () =>
import( /* webpackChunkName: "views" */ '@/views/util/test')
}]
-}, {
+},
+ {
path: '/dict-horizontal',
component: Layout,
redirect: '/dict-horizontal/index',
@@ -48,7 +51,8 @@
component: () =>
import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
}]
-}, {
+},
+ {
path: '/dict-vertical',
component: Layout,
redirect: '/dict-vertical/index',
@@ -61,7 +65,8 @@
component: () =>
import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
}]
-}, {
+},
+ {
path: '/info',
component: Layout,
redirect: '/info/index',
@@ -74,7 +79,8 @@
component: () =>
import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
}]
-}, {
+},
+ {
path: '/work/process/leave',
component: Layout,
redirect: '/work/process/leave/form',
@@ -103,4 +109,29 @@
component: () =>
import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
}]
-}]
+},
+ {
+ path: '/taskinfo',
+ component: Layout,
+ children: [
+ {
+ path: 'index',
+ name: '巡检任务管理',
+ meta: {
+ i18n: 'taskinfo'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/taskinfo/taskinfo')
+ },
+ {
+ path: 'taskinfoDetail',
+ name: '巡检任务详情信息',
+ meta: {
+ i18n: 'detail',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/taskinfo/taskinfoDetail')
+ }
+ ]
+ },
+]
diff --git a/src/views/taskinfo/taskinfo.vue b/src/views/taskinfo/taskinfo.vue
index 75d1311..fbd6efe 100644
--- a/src/views/taskinfo/taskinfo.vue
+++ b/src/views/taskinfo/taskinfo.vue
@@ -12,6 +12,7 @@
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
+ @row-click="rowClick"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@@ -27,6 +28,14 @@
v-if="permission.taskinfo_delete"
@click="handleDelete">删 除
</el-button>
+ </template>
+ <template slot-scope="{ type, size, row }" slot="menu">
+ <el-button
+ icon="el-icon-view"
+ type="text"
+ size="mini"
+ @click="goTaskinfoDetail(row)"
+ >查看</el-button>
</template>
<template slot="routeRangeForm">
<open-layers-map ref="OpenLayersMap" @toData="toData" :routeRange="form.routeRange"></open-layers-map>
@@ -209,6 +218,13 @@
},
toData(toData) {
this.form.routeRange = toData
+ },
+ goTaskinfoDetail(row){
+ this.$router.push({ path: "/taskinfo/taskinfoDetail", query: row });
+ },
+ //点击当前行事件
+ rowClick(val){
+ this.$router.push({ path: "/taskinfo/taskinfoDetail", query: val });
}
}
};
diff --git a/src/views/taskinfo/taskinfoDetail.vue b/src/views/taskinfo/taskinfoDetail.vue
new file mode 100644
index 0000000..fd2b99e
--- /dev/null
+++ b/src/views/taskinfo/taskinfoDetail.vue
@@ -0,0 +1,188 @@
+<template>
+ <div>
+ <el-row>
+ <el-col :span="12">
+ <div>
+ <el-card class="trackClass" style="overflow-y: auto">
+ <!--巡检任务信息-->
+ <div
+ style="margin-top: -10px"
+ role="tab"
+ aria-expanded="true"
+ aria-controls="el-collapse-content-823"
+ aria-describedby="el-collapse-content-823"
+ >
+ <div
+ role="button"
+ tabindex="0"
+ class="el-collapse-item__header focusing is-active"
+ >
+ <div class="avue-group__header avue-group">
+ <i class="el-icon-message-solid avue-group__icon"></i>
+ <h1 class="avue-group__title">巡检任务信息</h1>
+ </div>
+ </div>
+ </div>
+ <!--具体内容-->
+ <el-card>
+ <el-form
+ :model="form"
+ label-position="right"
+ size="mini"
+ class="taskinfoForm"
+ label-width="100px"
+ style="
+ margin-top: 20px;
+ margin-left: 10px;
+ margin-right: 10px;
+ height: calc(100% - 40px);
+ width: calc(100% - 20px);
+ "
+ >
+ <el-row>
+ <el-col span="24">
+ <el-form-item label="标题">
+ <el-input disabled="true" v-model="form.title" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col span="12">
+ <el-form-item label="开始时间">
+ <el-input disabled="true" v-model="form.startTime" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col span="12">
+ <el-form-item label="结束时间">
+ <el-input disabled="true" v-model="form.endTime" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col span="24">
+ <el-form-item label="任务内容">
+ <el-input disabled="true" v-model="form.content" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row>
+ <el-col span="12">
+ <el-form-item label="任务状态">
+ <el-input disabled="true" v-model="form.$state" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col span="12">
+ <el-form-item label="任务来源">
+ <el-input disabled="true" v-model="form.$source" autocomplete="off"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </el-card>
+ <!--巡检人员信息-->
+ <div
+ style="margin-top: 70px"
+ role="tab"
+ aria-expanded="true"
+ aria-controls="el-collapse-content-823"
+ aria-describedby="el-collapse-content-823"
+ >
+ <div
+ role="button"
+ tabindex="0"
+ class="el-collapse-item__header focusing is-active"
+ >
+ <div class="avue-group__header avue-group">
+ <i class="el-icon-s-custom avue-group__icon"></i>
+ <h1 class="avue-group__title">巡检人员信息</h1>
+ </div>
+ </div>
+ </div>
+
+ <el-card>
+ <el-table
+ ref="multipleTable"
+ :data="accepterInfo"
+ tooltip-effect="dark"
+ style="width: 100%"
+ max-height="240"
+ >
+ <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
+ <el-table-column prop="realName" label="真名" width="150" align="center"></el-table-column>
+ <el-table-column prop="phone" label="联系电话" width="170" align="center"></el-table-column>
+ </el-table>
+ </el-card>
+ </el-card>
+ </div>
+ </el-col>
+
+ <el-col :span="12">
+ <open-layers-map ref="OpenLayersMap" @toData="toData" :isTaskinfoDetail="true" :routeRange="form.routeRange"></open-layers-map>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script>
+import OpenLayersMap from "@/components/OpenLayersMap/index";
+import {getUser} from "@/api/system/user"
+export default {
+ name: "taskinfoDetail",
+ components: {OpenLayersMap},
+ data(){
+ return{
+ taskinfo:{},
+ form:{},
+ accepterInfo:[]
+ }
+ },
+ created() {
+ this.form = this.$route.query;
+ this.getUser()
+ },
+ methods:{
+ //获取巡检人员信息
+ getUser(){
+ getUser(this.form.toUserId).then(res=>{
+ if (res.data.code == 200){
+ this.accepterInfo.push(res.data.data)
+ }
+ })
+ },
+ },
+}
+</script>
+
+<style scoped lang="scss">
+
+/deep/ .el-table tbody tr:hover > td {
+ background-color: #f3ec94 !important
+}
+
+.el-col {
+ height: calc(100% - 5px);
+}
+
+.trackClass {
+ height: 85vh;
+ overflow: auto;
+ overflow-x: hidden;
+}
+
+.receiving-alarm-box {
+ line-height: 32px !important;
+ height: 200px;
+ overflow-y: auto;
+
+.el-card__body {
+ padding: 0 10px !important;
+}
+}
+
+#old_video::-webkit-media-controls-timeline {
+ display: block;
+}
+</style>
--
Gitblit v1.9.3