gitadmin
/
taauav_app_front_discard_20240715
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

任务列表

master
huxinglu 4 years ago
parent
4153dcb68f
commit
a501d5f79d
15 changed files with 1521 additions and 67 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +10
    -66
      src/api/business/inspect.js
  2. +18
    -0
      src/api/file/inspectfile.js
  3. +15
    -0
      src/api/report/report.js
  4. BIN
      src/assets/img/dir.png
  5. BIN
      src/assets/img/marker-img.png
  6. BIN
      src/assets/img/uva.png
  7. BIN
      src/assets/img/video-def.png
  8. +149
    -0
      src/components/imageList.vue
  9. +83
    -0
      src/components/pcVideo.vue
  10. +447
    -0
      src/components/report.vue
  11. +139
    -0
      src/components/trajectoryDialog.vue
  12. +15
    -1
      src/main.js
  13. +44
    -0
      src/views/business/inspectDriver/index.vue
  14. +192
    -0
      src/views/business/inspectDriver/inspectReport.vue
  15. +409
    -0
      src/views/business/inspectDriver/table.vue

+ 10
- 66
src/api/business/inspect.js View File

@@ -4,71 +4,12 @@ export default {
addTask(params) {
return axios.post('/api/front/inspect/addTask',params)
},
getList(params) {
return axios.post('/api/inspectDriver/index',params)
},
getAssignedList(params) {
return axios.post('/api/inspectDriver/assignedList',params)
},
basicData(params) {
return axios.get('/api/inspectDriver/basicData',params)
},
dropTask(params) {
return axios.post('/api/inspectDriver/dropTask',params)
},
reProcess(params) {
return axios.post('/api/inspectDriver/reProcess',params)
},
assignCancel(params) {
return axios.post('/api/inspectDriver/cancel',params)
},
getInspectDriverList(params) {
return axios.post('/api/inspectDriver/list',params)
},
getDetail(params) {
return axios({
method: "GET",
url: '/api/inspectDriver/detail?id='+params.id,
data: {}
})
},
print(params) {
return axios({
method: "GET",
url: '/api/inspectDriver/print?id='+params.id,
data: {}
})
},
executeTask(params) {
return axios.post('/api/inspectDriver/executeTask',params)
},
getEquipmentList(data) {
return axios({
method: "POST",
url: '/api/equipment/getEquipmentList',
data:data
})
},
getMountEquipmentList(data) {
return axios({
method: "POST",
url: '/api/mountequipment/getMountEquipmentList',
data:data
})
},
getFlyHandList(data) {
return axios({
method: "POST",
url: '/api/admin/getFlyHandList',
data:data
})
},

assignTask(data) {
getInspectDriverList(params) {
return axios({
method: "POST",
url: '/api/inspectDriver/assignTask',
data:data
url: '/api/front/inspectDriver/index',
data: params
})
},

@@ -82,13 +23,16 @@ export default {
})
},

getLiveList(){
getDetail(id) {
return axios({
method: "GET",
url: '/api/equipment/live',
params:{}
url: '/api/front/inspectDriver/detail',
params:{
id
}
})
}
},

}



+ 18
- 0
src/api/file/inspectfile.js View File

@@ -0,0 +1,18 @@
import axios from '../api'

export default {
getDetail(params) {
return axios({
method: "GET",
url: '/api/inspectfile/view',
params: {
...params
}
})
},
getDocument(params) {
return axios.get('/api/inspectfile/document', params)
},
}



+ 15
- 0
src/api/report/report.js View File

@@ -0,0 +1,15 @@
import axios from '../api'

export default {
getDetail(params) {
return axios({
method: "GET",
url: '/api/report/detail',
params: {
...params
}
})
}
}



BIN
src/assets/img/dir.png View File

Before After
Width: 200  |  Height: 200  |  Size: 4.6KB

BIN
src/assets/img/marker-img.png View File

Before After
Width: 32  |  Height: 32  |  Size: 455B

BIN
src/assets/img/uva.png View File

Before After
Width: 32  |  Height: 32  |  Size: 1.2KB

BIN
src/assets/img/video-def.png View File

Before After
Width: 140  |  Height: 128  |  Size: 3.3KB

+ 149
- 0
src/components/imageList.vue View File

@@ -0,0 +1,149 @@
<template>
<div class="image-list">
<el-breadcrumb separator=">">
<el-breadcrumb-item><a @click="mainClick" href="javascript:void(0);">目录</a></el-breadcrumb-item>
<el-breadcrumb-item><a @click="mainClick" href="javascript:void(0);">{{imageDetail.driverName}}</a>
</el-breadcrumb-item>
<el-breadcrumb-item v-if="imageDetail.formatExecutionStartTime"><a @click="mainClick" href="javascript:void(0);">{{imageDetail.formatExecutionStartTime}}</a>
</el-breadcrumb-item>
<el-breadcrumb-item v-if="selectType.key">{{selectType.value}}</el-breadcrumb-item>
</el-breadcrumb>
<div :style="{height:boxHeight+'px'}" class="image-box">
<div v-if="!selectType.key" class="catalog">
<div @click="documentClick(key,value)" v-for="(value,key,index) in documentList">
<img src="@/assets/img/dir.png">
<div>{{value}}<span v-if="imageDetail.imgList">({{imageDetail.imgList.filter(item=>item.file_document==key).length}})</span></div>
</div>
</div>
<viewer v-if="selectType.key&&type=='show'" class="img-list">
<div v-if="item.thumb_img" :key="index" v-for="(item,index) in imageDetail.imgList.filter(child=>child.file_document==selectType.key)" class="item-child">
<img :data-source="item.original_img" v-lazy="item.thumb_img">
<div :title="item.original_img">{{item.original_img.split('/')[item.original_img.split('/').length-1]}}
</div>
</div>
</viewer>
<div v-if="selectType.key&&type=='sign'" class="img-list">
<div @click="sign(item)" v-if="item.thumb_img" :key="index" v-for="(item,index) in imageDetail.imgList.filter(child=>child.file_document==selectType.key)" class="item-child">
<img v-lazy="item.thumb_img">
<div :title="item.original_img">{{item.original_img.split('/')[item.original_img.split('/').length-1]}}
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: "imageList",
data() {
return {
boxHeight: ''
}
},
props: {
selectType: {
type: Object,
default() {
return {};
}
},
documentList: {
type: Object,
default() {
return {};
}
},
type:{
type: String,
default() {
return 'show';
}
},
imageDetail: {
type: Object,
default() {
return {};
}
}
},
created() {
this.boxHeight = document.body.clientHeight - 240
},
mounted() {
console.log(this.documentList)
},
methods: {
mainClick() {
this.selectType = {}
},
documentClick(key, value) {
let selectType = {
key: key,
value: value
}
this.selectType=Object.assign({},selectType)
},
sign(data){
let imageDetail = JSON.parse(JSON.stringify(this.imageDetail))
imageDetail.imgList = imageDetail.imgList.filter(item=>item.file_document==this.selectType.key)
imageDetail.selectTypeName = this.selectType.value
imageDetail.selectType = this.selectType.key
imageDetail.id=data.id
this.$emit('sign',imageDetail)
}
}
}
</script>

<style lang="less">
.image-list {
.image-box {
overflow-x: hidden;
overflow-y: auto;
margin-top: 20px;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);

.catalog {
display: flex;

> div {
cursor: pointer;
margin-left: 50px;
margin-top: 10px;
text-align: center;

> img {
height: 50px;
width: 50px;
}
}
}

.img-list {
display: flex;
flex-wrap: wrap;

.item-child {
width: 120px;
text-align: center;
margin-left: 20px;
margin-top: 15px;

img {
cursor: pointer;
height: 50px;
}

> div {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
}
}
</style>

+ 83
- 0
src/components/pcVideo.vue View File

@@ -0,0 +1,83 @@
<template>
<div class="d-video">
<video-player v-if="playerOptions.sources.length>0" class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>
</div>
</template>

<script>
import {videoPlayer} from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls.js/src/videojs.hlsjs';

export default {
name: "dVideo",
data() {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '13:6', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [],
// width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
}
},
props: {
videoUrl: {
type: String,
default() {
return '';
}
}
},
created(){
let playerOptions=JSON.parse(JSON.stringify(this.playerOptions))
playerOptions.sources.push(
{
src: this.videoUrl,
type: 'video/mp4'
}
)
this.playerOptions = Object.assign({},playerOptions)
},
components: {
videoPlayer
}
}
</script>

<style lang="less">
.d-video{
.video-js .vjs-big-play-button{
top: 22% !important;
left:40% !important;
height: 60px!important;
width: 60px!important;
font-size: inherit;
line-height: 60px!important;
border-radius: 50% !important;
opacity: 0.7!important;
border: 2px solid #fff!important;
background-color: #194672!important;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before{
font-size: 30px!important;
}
}
</style>

+ 447
- 0
src/components/report.vue View File

@@ -0,0 +1,447 @@
<template>
<div id="reportPoint" class="report-list">
<div v-if="typeName=='query'&&!ruleForm.type" style="font-size: 18px;font-weight: bold;text-align: center;margin-bottom: 20px">
南京市河道无人机巡检报告
</div>
<div style="text-align: right">编号：{{ruleForm.reportNo?ruleForm.reportNo:''}}</div>
<div style="border-left: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;margin-top: 15px;">
<table style="table-layout: fixed;width: 100%">
<col style="width: 13.33%"/>
<col style="width: 20%"/>
<col style="width: 13.33%"/>
<col style="width: 20%"/>
<col style="width: 13.33%"/>
<col style="width: 20%"/>
<tbody>
<tr style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
河道名称
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
{{ruleForm.driverName}}
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
区属
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
{{ruleForm.driverArea}}
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
巡检时间
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
{{ruleForm.inspectTime}}
</td>
</tr>
<tr v-if="ruleForm.type" style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
问题分类
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
{{documentList[ruleForm.type]}}
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
问题数量
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
{{ruleForm.questionFileList&&ruleForm.questionFileList.length>0?ruleForm.questionFileList.filter(child=>child.file_document==ruleForm.type).length:0}}
</td>
</tr>
<tr v-if="!ruleForm.type" style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
起点
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
{{ruleForm.driverStart}}
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
终点
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
{{ruleForm.driverEnd}}
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
长度
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
{{ruleForm.inspectLength}}
</td>
</tr>
<tr v-if="!ruleForm.type" style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
巡检视频
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="5">
<span v-if="typeName=='query'">{{ruleForm.videoUrl}}</span>
<el-input v-else clearable v-model="ruleForm.videoUrl" size="small" placeholder="请输入巡检视频"/>
</td>
</tr>
<tr v-if="!ruleForm.type" style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
巡检正摄图
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="5">
<span v-if="typeName=='query'">{{ruleForm.imageUrl}}</span>
<el-input v-else clearable v-model="ruleForm.imageUrl" size="small" placeholder="请输入巡检正摄图"/>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="ruleForm.filterQuestionList&&!ruleForm.type"
style="border-left: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;margin-top: 15px;">
<table style="table-layout: fixed;width: 100%;text-align: center">
<col style="width: 8.33%"/>
<col style="width: 8.33%"/>
<col style="width: 16.66%"/>
<col style="width: 16.66%"/>
<col style="width: 16.66%"/>
<col style="width: 16.66%"/>
<col style="width: 16.66%"/>
<tbody>
<tr style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="2">项目
</td>
<td :colspan="typeName=='query'?2:1" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">巡检内容</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">问题图片数量</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">考核得分</td>
<td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">校核分</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">备注</td>
</tr>
<tr :key="index" v-for="(item,index) in ruleForm.filterQuestionList" style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"
v-if="item.categoryRow" :rowspan="item.categoryRow">{{item.categoryText}}
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"
v-if="item.typeRow" :rowspan="item.typeRow">{{item.typeText}}
</td>
<td :colspan="typeName=='query'?2:1" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">{{item.content}}
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
{{item.questionNum}}
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
{{item.examineScore}}
</td>
<td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<span v-if="typeName=='query'">{{item.checkScore}}</span>
<el-input @blur="checkScoreblur" v-else clearable v-model="item.checkScore" size="small" placeholder=""/>
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<span v-if="typeName=='query'">{{item.remark}}</span>
<el-input v-else clearable v-model="item.remark" size="small" placeholder=""/>
</td>
</tr>
<tr style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="2"
rowspan="2">群众满意度调查
</td>
<td :colspan="typeName=='query'?2:1" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">满意度得分</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"></td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<span v-if="typeName=='query'">{{ruleForm.manyiExamineScore}}</span>
<el-input @blur="examineScoreblur" v-else clearable v-model="ruleForm.manyiExamineScore" size="small"
placeholder=""/>
</td>
<td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<span v-if="typeName=='query'">{{ruleForm.manyiCheckScore}}</span>
<el-input @blur="checkScoreblur" v-else clearable v-model="ruleForm.manyiCheckScore" size="small"
placeholder=""/>
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"></td>
</tr>
<tr style="font-size: 14px;color: #666;">
<td :colspan="typeName=='query'?2:1" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">知晓率得分</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"></td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<span v-if="typeName=='query'">{{ruleForm.awareExamineScore}}</span>
<el-input @blur="examineScoreblur" v-else clearable v-model="ruleForm.awareExamineScore" size="small"
placeholder=""/>
</td>
<td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<span v-if="typeName=='query'">{{ruleForm.awareCheckScore}}</span>
<el-input @blur="checkScoreblur" v-else clearable v-model="ruleForm.awareCheckScore" size="small"
placeholder=""/>
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"></td>
</tr>
<tr style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="2">总分
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" :colspan="typeName=='query'?3:2"></td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<span v-if="typeName=='query'">{{ruleForm.totalExamineScore}}</span>
<el-input v-else clearable v-model="ruleForm.totalExamineScore" size="small" placeholder=""/>
</td>
<td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<span v-if="typeName=='query'">{{ruleForm.totalCheckScore}}</span>
<el-input v-else clearable v-model="ruleForm.totalCheckScore" size="small" placeholder=""/>
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"></td>
</tr>
<tr style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="2">报告描述
</td>
<td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<el-select @change="descChange" filterable clearable v-model="ruleForm.descId"
size="small"
placeholder="请选择评价数据">
<el-option v-for="item in ruleForm.reportDescList" :key="item.id" :label="item.content" :value="item.id"/>
</el-select>
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" :colspan="typeName=='query'?5:4">
<span v-if="typeName=='query'">{{ruleForm.desc}}</span>
<el-input v-else v-model="ruleForm.desc" type="textarea" rows="5" size="small"/>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="ruleForm.questionFileList&&ruleForm.questionFileList.length>0"
style="text-align: center;margin-top: 40px;">
<div style="font-size: 16px;font-weight: bold">问题清单</div>
<div :key="index" v-for="(item,index) in ruleForm.type?ruleForm.questionFileList.filter(child=>child.file_document==ruleForm.type):ruleForm.questionFileList"
style="margin-left:20%;width: 60%;margin-top: 15px;border-left: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6">
<table style="table-layout: fixed;text-align: center;width: 100%">
<col style="width: 20%"/>
<col style="width: 80%"/>
<tbody>
<tr style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">坐标</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"
v-if="item.location">{{item.location}}<span v-if="item.latitude&&item.longitude">({{parseFloat(item.longitude)}},{{parseFloat(item.latitude)}})</span>
</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" v-else></td>
</tr>
<tr style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">问题描述</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<span v-if="typeName=='query'">{{typeName=='index'?item.questionContent:item.description}}</span>
<el-input v-if="typeName=='index'||typeName=='check'" v-model="item.questionContent" type="textarea"
rows="1" size="small"/>
<el-input v-if="typeName!='query'&&typeName!='index'&&typeName!='check'" v-model="item.description" type="textarea" rows="1"
size="small"/>
</td>
</tr>
<tr style="font-size: 14px;color: #666;">
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">问题图片</td>
<td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
<viewer>
<img :title="typeName=='index'&&typeName=='check'?item.questionContent:item.description"
style="width:100%;height:240px;cursor: pointer" :data-source="item.formatOriginalImg"
v-lazy="item.formatSrc"/>
</viewer>
</td>
</tr>
</tbody>
</table>
</div>
<div style="font-size: 16px;font-weight: bold;margin-top: 20px">问题位置信息</div>
<div v-show="!mapImg" style="margin-left:20%;width: 60%;height: 400px;margin-top: 20px" id="reportMap">
</div>
<img v-show="mapImg" style="width: 60%;height: 400px;margin-top: 20px" :src="mapImg">
</div>
<div v-if="typeName=='check'" style="text-align: center;margin-top: 40px;">
<div style="font-size: 16px;font-weight: bold">审核意见</div>
<el-input style="width: 60%;margin-left: 0%;margin-top: 15px" v-model="ruleForm.remark" type="textarea" rows="5"
size="small"/>
</div>
</div>
</template>

<script>
import AMap from 'AMap'
export default {
name: "report",
data() {
return {
}
},
props: {
mapImg:{
type: String,
default() {
return '';
}
},
ruleForm: {
type: Object,
default() {
return {};
}
},
typeName: {
type: String,
default() {
return 'index';
}
},
documentList:{
type:Object,
default(){
return {}
}
}
},
mounted() {
if(this.ruleForm.questionFileList&&this.ruleForm.questionFileList.length>0){
this.initMap()
}
},
methods: {
initMap(){
let me=this
this.map = new AMap.Map('reportMap', {
zooms:[10,18]
})
this.map.setCity('南京市')
this.map.on("complete", function() {
var opts = {
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level: 'district' //查询行政级别为 市
};
let district = new AMap.DistrictSearch(opts);
district.search('南京', function(status, result) {
let polygons = [];
var bounds = result.districtList[0].boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
let polygon = new AMap.Polygon({
strokeWeight: 2,
path: bounds[i],
fillOpacity: 0,
fillColor: '#fff',
strokeColor: '#ff0000'
});
polygons.push(polygon);
}
}
me.polygons = polygons
me.map.add(me.polygons)
});
let centerPoint = null
me.ruleForm.questionFileList.map(item => {
if (item.gaode_longitude && item.gaode_latitude) {
let point = new AMap.LngLat(item.gaode_longitude, item.gaode_latitude)
let filter = me.ruleForm.questionFileList.filter(child => child.gaode_longitude == item.gaode_longitude && child.gaode_latitude == item.gaode_latitude)
if (!centerPoint) {
centerPoint = point
me.addFileMarker(point,item,filter.length,'center')
}else{
me.addFileMarker(point,item,filter.length)
}
}
})
})
},
addFileMarker(point, item, num, center) {
let me=this
let icon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(25,25),
// 图标的取图地址
image: require('../assets/img/marker-img.png'),
// 图标所用图片大小
imageSize: new AMap.Size(25, 25),
});
let marker =new AMap.Marker({
position: point,
icon: icon,
offset: new AMap.Pixel(0, -0)
});
marker.setDraggable(true)
marker.setLabel({
offset: new AMap.Pixel(0, -20), //设置文本标注偏移量
content: "<div class='label-info'>"+(item.location+(num>1?('('+num+'张)'):''))+"</div>", //设置文本标注内容
direction: 'right' //设置文本标注方位
});
marker.setMap(this.map);
console.log(center)
if(center){
me.map.setZoomAndCenter(10,point)
}
},
examineScoreblur() {
let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
let totalExamineScore = 0
ruleForm.filterQuestionList.map(item => {
if (parseInt(item.examineScore)) {
totalExamineScore += parseInt(item.examineScore)
}
})
// if(ruleForm.driverExam!=1){
// if (parseInt(ruleForm.manyiExamineScore)) {
// totalExamineScore += parseInt(ruleForm.manyiExamineScore)
// }
// if (parseInt(ruleForm.awareExamineScore)) {
// totalExamineScore += parseInt(ruleForm.awareExamineScore)
// }
// }
if (parseInt(ruleForm.manyiExamineScore)) {
totalExamineScore += parseInt(ruleForm.manyiExamineScore)
}
if (parseInt(ruleForm.awareExamineScore)) {
totalExamineScore += parseInt(ruleForm.awareExamineScore)
}
ruleForm.totalExamineScore = totalExamineScore
this.ruleForm = Object.assign({}, ruleForm)
},
checkScoreblur() {
let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
let totalCheckScore = 0
ruleForm.filterQuestionList.map(item => {
if (parseInt(item.checkScore)) {
totalCheckScore += parseInt(item.checkScore)
}
})
// if(ruleForm.driverExam!=1){
// if (parseInt(ruleForm.manyiCheckScore)) {
// totalCheckScore += parseInt(ruleForm.manyiCheckScore)
// }
// if (parseInt(ruleForm.awareCheckScore)) {
// totalCheckScore += parseInt(ruleForm.awareCheckScore)
// }
// }
if (parseInt(ruleForm.manyiCheckScore)) {
totalCheckScore += parseInt(ruleForm.manyiCheckScore)
}
if (parseInt(ruleForm.awareCheckScore)) {
totalCheckScore += parseInt(ruleForm.awareCheckScore)
}
ruleForm.totalCheckScore = totalCheckScore
this.ruleForm = Object.assign({}, ruleForm)
},
descChange(val) {
if (val) {
let child = this.ruleForm.reportDescList.find(item => item.id == val)
if (child) {
this.ruleForm.desc = child.content
}
}
}
}
}
</script>

<style lang="less">
.report-list {
.anchorBL {
display: none !important;
}
}
.amap-logo,.amap-copyright {
display: none !important;
}

.amap-marker-label{
color: #fff!important;
font-size: 12px!important;
border-color: #ff6600!important;
height: 20px!important;
line-height: 20px!important;
padding: 0 5px!important;
font-family: "微软雅黑";
background-color: #ff6600!important;
}
</style>

+ 139
- 0
src/components/trajectoryDialog.vue View File

@@ -0,0 +1,139 @@
<template>
<div class="index-map" id="indexMap"></div>
</template>

<script>
import AMap from "AMap";
import inspectApi from '@/api/business/inspect'

export default {
name: "trajectory-dialog",
data() {
return {
map: {},
}
},
props: {
driverId: {
type: Number,
default() {
return 0
}
},
},
components: {},
mounted() {
this.map = new AMap.Map("indexMap", {
zoom: 12,
center: [118.750078, 31.983115],
resizeEnable: true
});
let me = this
this.map.on("complete", function() {
me.point()
});
},
methods: {
handleClose() {
this.$emit('handleClose')
},
initRouters(pathList,list) {
let path = list
let point = new AMap.LngLat(path[0].x, path[0].y)
let me = this
let image = require('../assets/img/uva.png')
let icon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(40, 40),
// 图标的取图地址
image: image,
// 图标所用图片大小
imageSize: new AMap.Size(40, 40),
});
let marker = new AMap.Marker({
map: me.map,
position: point,
icon: icon,
offset: new AMap.Pixel(-20, -20),
autoRotation: true,
angle: -90,
});
// 绘制轨迹
let polyline = new AMap.Polyline({
map: me.map,
path: pathList,
showDir: true,
strokeColor: "#FFEF5D", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});

let passedPolyline = new AMap.Polyline({
map: me.map,
// path: lineArr,
strokeColor: "#AF5", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
})

marker.on('moving', function (e) {
passedPolyline.setPath(e.passedPath);
});

marker.moveAlong(pathList, 6000);
this.map.setCenter(point)
},
point(){
inspectApi.point(this.driverId).then(res => {
let me = this
let polygons = null;
var bounds = res.data;
if (bounds && bounds.length > 0) {
let path = []
for (let i = 0, l = bounds.length; i < l; i++) {
path.push(
new AMap.LngLat(bounds[i].x, bounds[i].y)
)
}
polygons = new AMap.Polygon({
zIndex: 11,
path: path,
strokeColor: "#09EBE0", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
strokeStyle: "solid", //线样式
strokeDasharray: [10, 5], //补充线样式
fillColor: "#17ABA3",
fillOpacity: 1
});
this.map.add(polygons)
this.initRouters(path,bounds)
}
}).catch(e => {
})
}
}
}
</script>

<style lang="less">
.index-map {
width: 100%;
height: 90%;
border: 1px solid #dcdfe6;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

img {
background-color: inherit!important;
}

.amap-marker-label {
padding: 0 !important;
font-size: 14px !important;
line-height: 18px !important;
}
}
</style>


+ 15
- 1
src/main.js View File

@@ -26,6 +26,7 @@ Vue.config.productionTip = false

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import $ from 'jquery'

import VueLazyload from 'vue-lazyload'

@@ -33,7 +34,20 @@ Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999,
url: "data-source",
title: true
title: true,
view: function (e) {
setTimeout(function () {
$('.viewer-canvas img').css('height',(document.body.clientHeight-150)+'px')
},100)
if(e.detail.originalImage.title){
$('.viewer-title').hide()
$('.viewer-new-title').remove()
$('.viewer-footer').prepend('<div class="viewer-new-title">'+e.detail.originalImage.title+'</div>')
setTimeout(function () {
$('.viewer-title').html(e.target.innerText)
},100)
}
},
}
})


+ 44
- 0
src/views/business/inspectDriver/index.vue View File

@@ -0,0 +1,44 @@
<template>
<div class="inspect-driver">
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="全部任务" :name="'0'">
<cTable :status="activeName" v-if="activeName==='0'"></cTable>
</el-tab-pane>
<el-tab-pane label="待执行" :name="'2'">
<cTable :status="activeName" v-if="activeName==='2'"></cTable>
</el-tab-pane>
<el-tab-pane label="执行中" :name="'3'">
<cTable :status="activeName" v-if="activeName==='3'"></cTable>
</el-tab-pane>
<el-tab-pane label="已完成" :name="'4'">
<cTable :status="activeName" v-if="activeName==='4'"></cTable>
</el-tab-pane>
</el-tabs>
</div>
</template>

<script>
import cTable from './table'
export default {
name: "inspect-driver",
data() {
return {
activeName: '0'
}
},
created(){
},
components:{
cTable
}
}
</script>

<style lang="less">
.inspect-driver {
height: fit-content;
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
padding: 15px;
}
</style>

+ 192
- 0
src/views/business/inspectDriver/inspectReport.vue View File

@@ -0,0 +1,192 @@
<template>
<el-drawer
title="任务详情"
:visible.sync="visible"
:direction="direction"
:size="drawerWidth"
:before-close="handleReportClose">
<div id="reportMap">
<h4>基础信息</h4>
<table
style="margin-top:15px;border-collapse:collapse;table-layout: fixed;width: 100% ;font-size: 14px;color: #333333;border-top: 1px solid #999999;border-left: 1px solid #999999">
<col style="width: 25%"/>
<col style="width: 25%"/>
<col style="width: 25%"/>
<col style="width: 25%"/>
<tbody>
<tr>
<td
style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
任务单号
</td>
<td
style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
{{reportData.inspectNo}}
</td>
<td
style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
行号
</td>
<td
style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
{{reportData.num}}
</td>
</tr>
<tr>
<td
style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
河道名称
</td>
<td
style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
{{reportData.driverName}}
</td>
<td
style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
区划
</td>
<td
style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
{{reportData.driverAreaName}}
</td>
</tr>
<tr>
<td
style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
起点
</td>
<td
style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
{{reportData.driverStart}}
</td>
<td
style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
终点
</td>
<td
style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
{{reportData.driverEnd}}
</td>
</tr>
<tr>
<td
style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
长度
</td>
<td
style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
{{reportData.driverLength}}
</td>
<td
style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
航线文件
</td>
<td
style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
<span @click="downLoad(reportData.driverFile)" style="color: #1890ff;cursor: pointer">{{reportData.driverFilename}}</span>
</td>
</tr>
<tr>
<td
style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
巡检时间
</td>
<td
style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
{{reportData.inspectTime}}
</td>
<td
style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
飞手
</td>
<td
style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
{{reportData.inspectHandName}}
</td>
</tr>
</tbody>
</table>
<div v-if="reportData.inspectFileList&&reportData.inspectFileList.length>0&&reportData.status!=2&&reportData.status!=3">
<h4 style="margin-top: 15px">航拍照片(共{{reportData.inspectFileList.length}}张)</h4>
<viewer class="item-list">
<img :title="item.description" :key="index" v-for="(item,index) in reportData.inspectFileList" v-lazy="item.thumbImg" :data-source="item.originalImg">
</viewer>
</div>
<div v-if="reportData.status!=2&&reportData.status!=3" class="video-detail">
<h4 style="margin-top: 15px">航拍视频</h4>
<pcVideo style="margin-top:15px;width: 300px;height: 200px" :videoUrl="reportData.driverVideo"></pcVideo>
</div>
<div style="width: 100%;text-align: center;margin-top: 20px;margin-bottom: 20px">
<el-button size="medium" icon="el-icon-back"
@click="$emit('goBack')">返回
</el-button>
</div>
</div>
</el-drawer>
</template>

<script>
import inspectApi from '@/api/business/inspect'
import pcVideo from '@/components/pcVideo'
export default {
name: "inspectReport",
data(){
return {
drawerWidth: (document.body.clientWidth - 190) + 'px',
direction: 'rtl',
reportData:{}
}
},
props:{
status:{
type:String,
default(){
return ''
}
},
inspectId:{
type:Number,
default(){
return 0
}
},
visible:{
type:Boolean,
default(){
return false
}
},
},
mounted(){
this.getDetail()
},
components:{pcVideo},
methods: {
getDetail(){
inspectApi.getDetail(this.inspectId).then(res => {
this.reportData=res.data?res.data:{}
}).catch(e => {
this.reportData={}
})
},
handleReportClose() {
this.$emit('goBack')
}
}
}
</script>

<style lang="less">
#reportMap{
.item-list{
>img{
width: 250px;
height: 150px;
margin-left: 10px;
margin-top: 10px;
}
}
.video-detail{
}
}
</style>

+ 409
- 0
src/views/business/inspectDriver/table.vue View File

@@ -0,0 +1,409 @@
<template>
<div class="inspect-driver-table">
<el-form :inline="true" :model="searchParam" class="demo-form-inline">
<el-form-item label="任务类型">
<el-select style="width: 150px" filterable clearable v-model="searchParam.type" size="small"
placeholder="请选择任务类型">
<el-option :key="1" label="可见光巡检" :value="1"/>
<el-option :key="2" label="多光谱巡检" :value="2"/>
</el-select>
</el-form-item>
<el-form-item label="区划">
<driverAreaSelect v-model="searchParam.driverArea"></driverAreaSelect>
</el-form-item>
<el-form-item label="河道名称">
<el-input clearable v-model="searchParam.driverName" size="small" placeholder="请输入河道名称" style="width: 200px"/>
</el-form-item>
<el-form-item label="日期">
<el-date-picker
style="width: 220px"
placeholder="日期"
clearable
size="small"
value-format="yyyy-MM-dd"
v-model="searchParam.inspectTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button :loading="tableLoading" icon="el-icon-search" @click="search" size="small" type="primary">搜索
</el-button>
<el-button icon="el-icon-refresh-right" @click="initSearchParam();search()"
type="primary" size="small"
style="background-color: #fff; border: 1px solid #ccc ; color: #666">清空
</el-button>
</el-form-item>
</el-form>
<el-table stripe ref="table" size="medium"
:height="tableHeight" v-loading="tableLoading" :data="dataList" border
row-key="id">
<el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center"/>
<el-table-column width="120" show-overflow-tooltip prop="inspectNo" label="任务单号" align="center">
<template slot-scope="scoped">
<a v-if="btnRule.inspectDriver_detail" href="javascript:void(0);" @click="detailNo(scoped.row)">{{scoped.row.inspectNo}}</a>
<span v-else>{{scoped.row.inspectNo}}</span>
</template>
</el-table-column>
<el-table-column width="60" show-overflow-tooltip prop="num" label="行号" align="center"/>
<el-table-column show-overflow-tooltip prop="driverName" label="河道名称" align="center"/>
<el-table-column show-overflow-tooltip prop="driverAreaText" label="区划" align="center"/>
<el-table-column show-overflow-tooltip prop="inspectTime" label="巡检时间" min-width="120" align="center">
</el-table-column>
<el-table-column width="80" v-if="btnRule.inspectDriver_point" show-overflow-tooltip
prop="driverLength" label="巡检轨迹" align="center">
<template slot-scope="{row}">
<span v-if="row.status==2||row.status==3"></span>
<el-button v-else type="primary" size="mini"
@click="pointClick(row)">查看
</el-button>
</template>
</el-table-column>
<el-table-column width="80" show-overflow-tooltip prop="formatCreateUser" label="申请人" align="center"/>
<el-table-column width="160" show-overflow-tooltip prop="formatCreateTime" label="申请时间" align="center"/>
<el-table-column width="80" show-overflow-tooltip prop="statusText" label="状态" align="center"/>
<el-table-column v-if="btnRule.inspectDriver_view" width="60" show-overflow-tooltip prop=""
label="报告" align="center">
<template slot-scope="{row}">
<el-tooltip v-if="row.reportId" class="item" effect="dark" content="查看报告" placement="bottom">
<el-button @click="getDetail(row.reportId)" type="primary" size="mini" icon="el-icon-document"/>
</el-tooltip>
</template>
</el-table-column>
<el-table-column v-if="btnRule.inspectfile_view" width="80" show-overflow-tooltip prop=""
label="图像资料" align="center">
<template slot-scope="{row}">
<el-tooltip v-if="row.status==4" class="item" effect="dark" content="查看图像" placement="bottom">
<el-button @click="setMark(row)" type="primary" size="mini" icon="el-icon-picture"/>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div class="page-current">
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
prev-text="上一页"
next-text="下一页"
background
layout="total, prev, pager, next, jumper"
style="display: inline-block;"
:total="count"
@current-change="handleCurrentChange"
/>
</div>
<el-drawer
title="巡航轨迹"
:visible.sync="trajectoryVisible"
:direction="direction"
:size="drawerWidth"
:before-close="handleRrajectoryClose">
<trajectory-dialog :driverId="driverId" v-if="trajectoryVisible"></trajectory-dialog>
</el-drawer>
<el-dialog :close-on-press-escape="false" :close-on-click-modal="false" ref="dialogForm" top="5vh" center
class="detail-dialog" :visible.sync="detailVisible">
<pReport :mapImg="mapImg" v-if="detailVisible" typeName="query" :ruleForm="ruleForm"></pReport>
<span slot="footer" class="dialog-footer no-print">
<el-button @click="pointMain('reportPoint')" type="primary" size="medium"
icon="el-icon-printer">打印</el-button>
<el-button size="medium" icon="el-icon-back"
@click="detailVisible = false">返回
</el-button>
</span>
</el-dialog>
<el-dialog :close-on-press-escape="false" :close-on-click-modal="false" class="image-dialog" top="2vh" center
:visible.sync="imageVisible" title="图片">
<image-list selectType="1" ref="imageList" type="show" :imageDetail="imageDetail"
:documentList="documentList"
v-if="imageVisible"></image-list>
<span slot="footer" class="dialog-footer">
<el-button size="medium" icon="el-icon-back"
@click="imageVisible = false">返回
</el-button>
</span>
</el-dialog>
<report :inspectId="inspectId" :visible="reportVisible" :status="status" @goBack="reportVisible=false" v-if="reportVisible"></report>
</div>
</template>

<script>
import inspectApi from '@/api/business/inspect'
import reportApi from '@/api/report/report'
import inspectfileApi from '@/api/file/inspectfile'
import driverAreaSelect from '@/components/driverAreaSelect'
import trajectoryDialog from '@/components/trajectoryDialog'
import imageList from '@/components/imageList'
import pReport from '@/components/report'
import report from './inspectReport'
import html2canvas from 'html2canvas'
import $ from 'jquery'
import {mapGetters} from "vuex";

export default {
name: "inspect-driver-table",
data() {
return {
reportVisible:false,
drawerWidth: (document.body.clientWidth - 190) + 'px',
direction: 'rtl',
dataList: [],
currentPage: 1,
count: 0,
pageSize: parseInt((document.body.clientHeight - 320 - 43) / 45),
tableHeight: document.body.clientHeight - 320,
tableLoading: false,
driverId:'',
documentList: {},
trajectoryVisible:false,
searchParam: {
type: '',
driverName: '',
driverArea: '',
inspectTime: '',
},
detailVisible:false,
mapImg: '',
ruleForm: {
videoUrl: '',
imageUrl: '',
examineScore: [],
manyiExamineScore: '',
manyiCheckScore: '',
totalExamineScore: '',
totalCheckScore: '',
desc: '',
descriptionList: [],
filterQuestionList: []
},
imageDetail:{},
imageVisible:false,
inspectId:''
}
},
props: {
status: {
type: String,
default() {
return '0'
}
}
},
mounted() {
this.getDocument()
this.getAllList()
},
components: {driverAreaSelect,trajectoryDialog,pReport,imageList,report},
computed: {
...mapGetters(["btnRule"])
},
methods: {
getDocument() {
inspectfileApi.getDocument().then(res => {
this.documentList = res.data ? res.data : {}
}).catch(e => {
this.documentList = {}
})
},
setMark(row) {
this.tableLoading = true
let method = 'getDetail'
inspectfileApi[method]({id: row.id}).then(res => {
this.tableLoading = false
let imageDetail = {
taskId: row.id,
driverName: row.driverName,
formatExecutionStartTime: row.formatInspectTime,
imgList: res.data ? res.data : []
}
this.imageDetail = Object.assign({}, imageDetail)
this.imageVisible = true
this.tableLoading = false
}).catch(e => {
this.tableLoading = false
})
},
print(content, w = null, h = null) {
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;

const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
w = +w === 0 ? width : w;
h = +h === 0 ? height : h;
const left = ((width / 2) - (w / 2)) + dualScreenLeft;
const top = ((height / 2) - (h / 2)) + dualScreenTop;
var myWindow = window.open("", "打印", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=" + w + ", height=" + h + ", top=" + top + ", left=" + left);
var style = "<style type='text/css'>table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;}table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #dedede;}table.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;}</style>";
myWindow.document.write(content + style);
myWindow.focus();
myWindow.document.close(); //关闭document的输出流, 显示选定的数据
$(myWindow).ready(function () {
myWindow.print();
myWindow.close()
});
return myWindow;
},
pointMain(name) {
let me = this
if (name == 'reportPoint') {
let reportMap = document.getElementById('reportMap')
if (reportMap) {
html2canvas(reportMap, {
backgroundColor: 'white',
scale: 2,
dpi: 300
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
me.mapImg = dataURL
me.$nextTick(function () {
me.print(document.getElementById('reportPoint').innerHTML);
me.mapImg = ''
})
});
} else {
me.print(document.getElementById('reportPoint').innerHTML);
}
} else {
me.print(document.getElementById(name).innerHTML);
}
},
initRuleForm() {
this.ruleForm = {
videoUrl: '',
imageUrl: '',
examineScore: [],
manyiExamineScore: '',
manyiCheckScore: '',
totalExamineScore: '',
totalCheckScore: '',
desc: '',
descriptionList: [],
filterQuestionList: [],
}
},
getDetail(id) {
this.tableLoading = true
reportApi.getDetail({id: id}).then(res => {
this.tableLoading = false
this.initRuleForm()
let ruleForm = JSON.parse(JSON.stringify(res.data))
let questionList = ruleForm.questionList
let filterQuestionList = []
let categoryList = []
questionList.map(item => {
if (!categoryList.some(category => category == item.category)) {
categoryList.push(item.category)
}
})
categoryList.sort(function (a, b) {
return a - b
})
categoryList.map(category => {
let list = questionList.filter(item => item.category == category)
let typeList = []
list.map(item => {
if (!typeList.some(type => type == item.type)) {
typeList.push(item.type)
}
})
typeList.sort(function (a, b) {
return a - b
})
let filter = []
typeList.map(type => {
let filterType = list.filter(item => item.type == type)
filterType[0].typeRow = filterType.length
filter = filter.concat(filterType)
})
filter[0].categoryRow = list.length
filterQuestionList = filterQuestionList.concat(filter)
})
ruleForm.filterQuestionList = filterQuestionList
this.ruleForm = Object.assign({}, ruleForm)
this.detailVisible = true
}).catch(e => {
this.tableLoading = false
})
},
pointClick(row) {
this.driverId = row.driverId
this.trajectoryVisible = true
},
handleRrajectoryClose(){
this.trajectoryVisible=false
},
detailNo(row) {
this.inspectId=row.id
this.reportVisible=true
},
indexMethod(index) {
return (index + 1) + ((this.currentPage - 1) * this.pageSize);
},
initSearchParam() {
this.searchParam = {
type: '',
driverName: '',
driverArea: '',
inspectTime: '',
}
},
search() {
this.currentPage = 1
this.tableLoading = true
this.$refs.table.bodyWrapper.scrollTop = 0;
this.getAllList()
},
handleCurrentChange(val) {
this.currentPage = val
this.$refs.table.bodyWrapper.scrollTop = 0;
this.getAllList()
},
getAllList() {
this.tableLoading = true
let searchParam = JSON.parse(JSON.stringify(this.searchParam))
if (searchParam.inspectTime && searchParam.inspectTime.length > 0) {
searchParam.inspectTime = searchParam.inspectTime[0] + '~' + searchParam.inspectTime[1]
} else {
searchParam.inspectTime = ''
}
searchParam.status = this.status === '0' ? '' : this.status
searchParam.page = this.currentPage
searchParam.pageSize = this.pageSize
inspectApi.getInspectDriverList(searchParam).then(res => {
console.log(res.data)
this.dataList = res.data.records ? res.data.records : []
this.count = res.data.total
this.tableLoading = false
}).catch(e => {
this.dataList = []
this.tableLoading = false
})
},
}
}
</script>

<style lang="less">
.inspect-driver-table {
.detail-dialog {
.el-dialog {
width: 80% !important;

.el-dialog__header {
padding: 0 !important;

.el-dialog__headerbtn .el-dialog__close {
color: #333333 !important;
}
}
}
}
.image-dialog {
.el-dialog {
width: 600px !important;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save