|
|
|
|
@ -1,15 +1,15 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="v-page"> |
|
|
|
|
<view class="v-page-bg" style="height: 300rpx;"></view> |
|
|
|
|
<view class="v-card contain"> |
|
|
|
|
<view class="v-card-item"> |
|
|
|
|
<view class="status-top"> |
|
|
|
|
<view>当前处理状态：</view> |
|
|
|
|
<button class="rignt-button" size="mini" @click="goList">处理记录</button> |
|
|
|
|
<view class="status-top"> |
|
|
|
|
<button class="v-btn v-btn-primary-b" size="mini" @click="goList">处理记录</button> |
|
|
|
|
</view> |
|
|
|
|
<view class="status-bottom"> |
|
|
|
|
<evan-steps :active="datas.status-1" direction="horizontal"> |
|
|
|
|
<evan-step class="step-items" v-for="item in processState" :title="item.dictLabel"></evan-step> |
|
|
|
|
<!-- <evan-step title="处警"></evan-step> |
|
|
|
|
<!-- <evan-step title="处警"></evan-step> |
|
|
|
|
<evan-step title="结警"></evan-step> |
|
|
|
|
<evan-step title="归档"></evan-step> --> |
|
|
|
|
</evan-steps> |
|
|
|
|
@ -27,16 +27,21 @@ |
|
|
|
|
<uni-list-item title="联系人手机" :rightText="datas.phone || '/'" /> |
|
|
|
|
<uni-list-item title="标题" :rightText="datas.title" /> |
|
|
|
|
<uni-list-item title="事件位置" :rightText="'经度：'+datas.longitude+',纬度：'+datas.latitude " /> |
|
|
|
|
<map class="map" :markers="covers" :longitude="datas.longitude" :latitude="datas.latitude" name="" ></map> |
|
|
|
|
<map class="map" :markers="covers" :longitude="datas.longitude" :latitude="datas.latitude" |
|
|
|
|
name=""></map> |
|
|
|
|
<uni-list-item title="描述" :rightText="datas.description" /> |
|
|
|
|
<uni-list-item> |
|
|
|
|
<template v-slot:body> |
|
|
|
|
<text class="slot-box slot-text">现场照片</text> |
|
|
|
|
</template> |
|
|
|
|
<template v-slot:footer> |
|
|
|
|
<view class="image-box" v-if="datas.pathList"> |
|
|
|
|
<image class="iamges-list" mode="widthFix" v-for="(item, index) in datas.pathList" :key="index" :src="requestUrl+item" @click="preview(item)"></image> |
|
|
|
|
<q-previewImage ref="previewImage" :urls="datas.pathList" @open="open" @close="close"></q-previewImage> |
|
|
|
|
<view class="" v-if="datas.pathList"> |
|
|
|
|
<view class="v-card-image"> |
|
|
|
|
<image :mode="'widthFix'" v-for="(item, index) in datas.pathList" |
|
|
|
|
:key="index" :src="requestUrl+item" @click="preview(item)"></image> |
|
|
|
|
</view> |
|
|
|
|
<q-previewImage ref="previewImage" :urls="datas.pathList" @open="open" |
|
|
|
|
@close="close"></q-previewImage> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
</uni-list-item> |
|
|
|
|
@ -49,182 +54,192 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import EvanSteps from '@/components/evan-steps/evan-steps.vue'; |
|
|
|
|
import EvanStep from '@/components/evan-steps/evan-step.vue'; |
|
|
|
|
import EvanSteps from '@/components/evan-steps/evan-steps.vue'; |
|
|
|
|
import EvanStep from '@/components/evan-steps/evan-step.vue'; |
|
|
|
|
|
|
|
|
|
import UniIcons from '@/components/uni-icons/uni-icons.vue'; |
|
|
|
|
import {getEventReportDetail} from '@/api/word/myReport.js' |
|
|
|
|
import {getDicts} from '@/api/system/dict/data.js' |
|
|
|
|
import config from '@/config.js'; |
|
|
|
|
const baseUrl = config.baseUrl; |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
EvanSteps, |
|
|
|
|
EvanStep, |
|
|
|
|
UniIcons, |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
datas: { |
|
|
|
|
id: 62, |
|
|
|
|
status: '1', |
|
|
|
|
reportTime: '2023-04-17 16:39', |
|
|
|
|
classificationDataName: '咨询', |
|
|
|
|
contactUser: '张三', |
|
|
|
|
phone: '15845978656', |
|
|
|
|
title: '咨询演练', |
|
|
|
|
longitude: '114.465666', |
|
|
|
|
latitude: '38.065909', |
|
|
|
|
description: '应急演练', |
|
|
|
|
pathList: null |
|
|
|
|
}, |
|
|
|
|
processState:[], // 处理状态 |
|
|
|
|
id: 0, |
|
|
|
|
covers: [], |
|
|
|
|
videoShow: true, //video组件是否显示 |
|
|
|
|
requestUrl: baseUrl, |
|
|
|
|
imgs: ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', 'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
onLoad(option) { |
|
|
|
|
this.id = option.id |
|
|
|
|
this.getEventReportDetail(option.id) |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getReportType(); |
|
|
|
|
}, |
|
|
|
|
watch : { |
|
|
|
|
datas:function(val) { |
|
|
|
|
console.log(this.datas ) |
|
|
|
|
if(!val.longitude){ |
|
|
|
|
import UniIcons from '@/components/uni-icons/uni-icons.vue'; |
|
|
|
|
import { |
|
|
|
|
getEventReportDetail |
|
|
|
|
} from '@/api/word/myReport.js' |
|
|
|
|
import { |
|
|
|
|
getDicts |
|
|
|
|
} from '@/api/system/dict/data.js' |
|
|
|
|
import config from '@/config.js'; |
|
|
|
|
const baseUrl = config.baseUrl; |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
EvanSteps, |
|
|
|
|
EvanStep, |
|
|
|
|
UniIcons, |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
datas: { |
|
|
|
|
id: 62, |
|
|
|
|
status: '1', |
|
|
|
|
reportTime: '2023-04-17 16:39', |
|
|
|
|
classificationDataName: '咨询', |
|
|
|
|
contactUser: '张三', |
|
|
|
|
phone: '15845978656', |
|
|
|
|
title: '咨询演练', |
|
|
|
|
longitude: '114.465666', |
|
|
|
|
latitude: '38.065909', |
|
|
|
|
description: '应急演练', |
|
|
|
|
pathList: null |
|
|
|
|
}, |
|
|
|
|
processState: [], // 处理状态 |
|
|
|
|
id: 0, |
|
|
|
|
covers: [], |
|
|
|
|
videoShow: true, //video组件是否显示 |
|
|
|
|
requestUrl: baseUrl, |
|
|
|
|
imgs: ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', |
|
|
|
|
'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png' |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
onLoad(option) { |
|
|
|
|
this.id = option.id |
|
|
|
|
this.getEventReportDetail(option.id) |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getReportType(); |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
datas: function(val) { |
|
|
|
|
console.log(this.datas) |
|
|
|
|
if (!val.longitude) { |
|
|
|
|
this.datas.longitude = '/' |
|
|
|
|
} |
|
|
|
|
if(!val.latitude){ |
|
|
|
|
if (!val.latitude) { |
|
|
|
|
this.datas.latitude = '/' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
goList(){ |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url:'processingRecord?id='+this.id |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
preview(url) { |
|
|
|
|
this.imgs = ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', 'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png']; //设置图片数组 |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.$refs.previewImage.open(url); // 传入当前选中的图片地址 |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
onLongpress(e) { |
|
|
|
|
//长按事件 |
|
|
|
|
console.log('当前长按的图片是' + e); |
|
|
|
|
uni.showActionSheet({ |
|
|
|
|
itemList: ['转发给朋友', '保存到手机'], |
|
|
|
|
success: function (res) { |
|
|
|
|
console.log('选中了第' + (res.tapIndex + 1) + '个按钮'); |
|
|
|
|
}, |
|
|
|
|
fail: function (res) { |
|
|
|
|
console.log(res.errMsg); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
open() { |
|
|
|
|
//监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件） |
|
|
|
|
uni.hideTabBar(); |
|
|
|
|
uni.setNavigationBarColor({ |
|
|
|
|
frontColor: '#000000', // 设置前景色为黑色 |
|
|
|
|
backgroundColor: '#000000' // 设置背景色为黑色 |
|
|
|
|
}); |
|
|
|
|
this.videoShow = false; |
|
|
|
|
}, |
|
|
|
|
close() { |
|
|
|
|
//监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件） |
|
|
|
|
uni.showTabBar(); |
|
|
|
|
methods: { |
|
|
|
|
goList() { |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: 'processingRecord?id=' + this.id |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
preview(url) { |
|
|
|
|
this.imgs = ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', |
|
|
|
|
'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png' |
|
|
|
|
]; //设置图片数组 |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.$refs.previewImage.open(url); // 传入当前选中的图片地址 |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
onLongpress(e) { |
|
|
|
|
//长按事件 |
|
|
|
|
console.log('当前长按的图片是' + e); |
|
|
|
|
uni.showActionSheet({ |
|
|
|
|
itemList: ['转发给朋友', '保存到手机'], |
|
|
|
|
success: function(res) { |
|
|
|
|
console.log('选中了第' + (res.tapIndex + 1) + '个按钮'); |
|
|
|
|
}, |
|
|
|
|
fail: function(res) { |
|
|
|
|
console.log(res.errMsg); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
open() { |
|
|
|
|
//监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件） |
|
|
|
|
uni.hideTabBar(); |
|
|
|
|
uni.setNavigationBarColor({ |
|
|
|
|
frontColor: '#000000', // 设置前景色为黑色 |
|
|
|
|
backgroundColor: '#000000' // 设置背景色为黑色 |
|
|
|
|
}); |
|
|
|
|
this.videoShow = false; |
|
|
|
|
}, |
|
|
|
|
close() { |
|
|
|
|
//监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件） |
|
|
|
|
uni.showTabBar(); |
|
|
|
|
|
|
|
|
|
uni.setNavigationBarColor({ |
|
|
|
|
frontColor: '#000000', // 设置前景色为白色 |
|
|
|
|
backgroundColor: '#ffffff' // 设置背景色为黑色 |
|
|
|
|
}); |
|
|
|
|
uni.setNavigationBarColor({ |
|
|
|
|
frontColor: '#000000', // 设置前景色为白色 |
|
|
|
|
backgroundColor: '#ffffff' // 设置背景色为黑色 |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.videoShow = true; |
|
|
|
|
}, |
|
|
|
|
// 获取上报分类 |
|
|
|
|
getReportType(){ |
|
|
|
|
getDicts("alarm_status").then(res =>{ |
|
|
|
|
if(res.code === 200){ |
|
|
|
|
let arr = [] |
|
|
|
|
res.data.forEach(item =>{ |
|
|
|
|
arr.push(item) |
|
|
|
|
}) |
|
|
|
|
this.videoShow = true; |
|
|
|
|
}, |
|
|
|
|
// 获取上报分类 |
|
|
|
|
getReportType() { |
|
|
|
|
getDicts("alarm_status").then(res => { |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
let arr = [] |
|
|
|
|
res.data.forEach(item => { |
|
|
|
|
arr.push(item) |
|
|
|
|
}) |
|
|
|
|
this.processState = arr |
|
|
|
|
console.log(this.processState) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 获取数据详情 |
|
|
|
|
getEventReportDetail(id){ |
|
|
|
|
getEventReportDetail(id).then(res =>{ |
|
|
|
|
if(res.code === 200){ |
|
|
|
|
this.datas = res.data |
|
|
|
|
let obj = { |
|
|
|
|
longitude: Number(this.datas.longitude), |
|
|
|
|
latitude: Number(this.datas.latitude) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 获取数据详情 |
|
|
|
|
getEventReportDetail(id) { |
|
|
|
|
getEventReportDetail(id).then(res => { |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
this.datas = res.data |
|
|
|
|
let obj = { |
|
|
|
|
longitude: Number(this.datas.longitude), |
|
|
|
|
latitude: Number(this.datas.latitude) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.covers.push(obj); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.covers.push(obj); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.status-top { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin: 0 32rpx 20rpx; |
|
|
|
|
position: relative; |
|
|
|
|
height: fit-content; |
|
|
|
|
padding-top: 20rpx; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
.status-top { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin: 0 32rpx 20rpx; |
|
|
|
|
position: relative; |
|
|
|
|
height: fit-content; |
|
|
|
|
padding-top: 20rpx; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
|
|
.rignt-button { |
|
|
|
|
margin: 0; |
|
|
|
|
.rignt-button { |
|
|
|
|
margin: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.status-bottom { |
|
|
|
|
::v-deep .evan-steps--horizontal { |
|
|
|
|
justify-content: space-evenly; |
|
|
|
|
|
|
|
|
|
.evan-step__content__title { |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
.status-bottom { |
|
|
|
|
::v-deep .evan-steps--horizontal { |
|
|
|
|
justify-content: space-evenly; |
|
|
|
|
|
|
|
|
|
.evan-step__content__title { |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.content-detail { |
|
|
|
|
.map { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::v-deep .slot-text { |
|
|
|
|
width: 35%; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
} |
|
|
|
|
.content-detail { |
|
|
|
|
.map { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.image-box{ |
|
|
|
|
display: flex; |
|
|
|
|
flex: 1; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
::v-deep .slot-text { |
|
|
|
|
width: 35%; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.image-box { |
|
|
|
|
display: flex; |
|
|
|
|
flex: 1; |
|
|
|
|
height: 120rpx; |
|
|
|
|
|
|
|
|
|
.iamges-list{ |
|
|
|
|
width: 120rpx; |
|
|
|
|
.iamges-list { |
|
|
|
|
width: 120rpx; |
|
|
|
|
height: 120rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.step-items:first-child{ |
|
|
|
|
margin-left: 300rpx; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
rose
2 years ago