You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
313 lines
8.1 KiB
313 lines
8.1 KiB
<template>
|
|
<view class="v-page">
|
|
<view class="v-page-bg" style="height: 300rpx;"></view>
|
|
<view class="v-card contain" style="padding-bottom: 130rpx;">
|
|
<view class="v-step-box">
|
|
<view class="status-top align-right">
|
|
<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-steps>
|
|
</view>
|
|
</view>
|
|
<!-- 警情信息 -->
|
|
<view class="v-card-box v-m-t10">
|
|
<common-title :title="'警情信息'"></common-title>
|
|
<view class="content-detail">
|
|
<uni-list>
|
|
<uni-list-item title="上报时间" :rightText="datas.reportTime || '/'" />
|
|
<uni-list-item title="警情分类" :rightText="datas.classificationDataName || '/'" />
|
|
<uni-list-item title="联系人" :rightText="datas.contactUser || '/'" />
|
|
<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>
|
|
<uni-list-item title="描述" :rightText="datas.description" />
|
|
<uni-list-item v-if="datas.pathList">
|
|
<template v-slot:body>
|
|
<text class="slot-box slot-text">现场照片</text>
|
|
</template>
|
|
<template v-slot:footer>
|
|
<view class="v-card-image">
|
|
<image class="" 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>
|
|
</template>
|
|
</uni-list-item>
|
|
</uni-list>
|
|
</view>
|
|
</view>
|
|
<view v-if="datas.status<3">
|
|
<view class="v-card-box v-m-t10 v-card-grid-group">
|
|
<view class="v-card-grid-item" @click.stop="goMonitor">
|
|
<view class="v-card-grid-icon">
|
|
<image src="@/static/images/icons/icon-index-video.svg" mode="widthFix"></image>
|
|
</view>
|
|
<view class="v-card-grid-text">周边监控</view>
|
|
</view>
|
|
<view class="v-card-grid-item" @click.stop="goPlan">
|
|
<view class="v-card-grid-icon">
|
|
<image src="@/static/images/icons/icon-index-plan.svg" mode="widthFix"></image>
|
|
</view>
|
|
<view class="v-card-grid-text">应急预案</view>
|
|
</view>
|
|
<view class="v-card-grid-item" @click.stop="goResource">
|
|
<view class="v-card-grid-icon">
|
|
<image src="@/static/images/icons/icon-index-resources.svg" mode="widthFix"></image>
|
|
</view>
|
|
<view class="v-card-grid-text">应急资源</view>
|
|
</view>
|
|
<view class="v-card-grid-item" @click.stop="goPerson">
|
|
<view class="v-card-grid-icon">
|
|
<image src="@/static/images/icons/icon-index-duty.svg" mode="widthFix"></image>
|
|
</view>
|
|
<view class="v-card-grid-text">人员调度</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="v-page-button contain">
|
|
<button @click="finishEvent" class="v-btn-large">警情归档</button>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
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
|
|
},
|
|
id: 0,
|
|
covers: [],
|
|
processState: [],
|
|
requestUrl: baseUrl,
|
|
videoShow: true, //video组件是否显示
|
|
imgs: ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png',
|
|
'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'
|
|
]
|
|
};
|
|
},
|
|
watch: {
|
|
datas: function(val) {
|
|
console.log(this.datas)
|
|
if (!val.longitude) {
|
|
this.datas.longitude = '/'
|
|
}
|
|
if (!val.latitude) {
|
|
this.datas.latitude = '/'
|
|
}
|
|
},
|
|
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id
|
|
|
|
},
|
|
mounted() {
|
|
// 获取详情
|
|
this.getEventReportDetail(this.id);
|
|
// 获取处理状态
|
|
this.getReportType();
|
|
},
|
|
methods: {
|
|
goList() {
|
|
uni.navigateTo({
|
|
url: '../myReport/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' // 设置背景色为黑色
|
|
});
|
|
|
|
this.videoShow = true;
|
|
},
|
|
// 获取数据详情
|
|
getEventReportDetail(id) {
|
|
getEventReportDetail(id).then((res) => {
|
|
if (res.code === 200) {
|
|
this.datas = res.data;
|
|
console.log(this.datas);
|
|
|
|
let obj = {
|
|
longitude: Number(this.datas.longitude),
|
|
latitude: Number(this.datas.latitude)
|
|
};
|
|
|
|
this.covers.push(obj);
|
|
}
|
|
});
|
|
},
|
|
|
|
// 获取上报分类
|
|
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)
|
|
}
|
|
})
|
|
},
|
|
goMonitor() {
|
|
uni.navigateTo({
|
|
url: 'monitorList?id=' + this.id
|
|
})
|
|
},
|
|
goPerson() {
|
|
uni.navigateTo({
|
|
url: 'personnelScheduling?id=' + this.id
|
|
})
|
|
},
|
|
goPlan() {
|
|
uni.navigateTo({
|
|
url: '/subPackWork/emergencyPlan/emergencyPlan'
|
|
|
|
});
|
|
},
|
|
goResource() {
|
|
uni.navigateTo({
|
|
url: '/subPackWork/emergencyResources/emergencyResources'
|
|
});
|
|
},
|
|
finishEvent() {
|
|
uni.navigateTo({
|
|
url: 'caseFiling/caseFiling'
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</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;
|
|
|
|
.rignt-button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.image-box {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
|
|
.iamges-list {
|
|
width: 120rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.big-btn {
|
|
margin: 20rpx;
|
|
}
|
|
|
|
.step-items:first-child {
|
|
margin-left: 400rpx;
|
|
}
|
|
</style>
|
|
|
|
|