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.

399 lines
11 KiB

2 months ago
<template>
<view>
<!-- <view class="detailData">
<view class="head">
<svgImage name="zdwxy-paihang" width="30rpx" height="30rpx"></svgImage>
<view class="headTitle">
应急演练列表
</view>
</view>
<view style="padding: 20rpx 10rpx 20rpx 20rpx;">
<u-row>
<u-col span="4">演练名称</u-col>
<u-col span="8">{{tableData.drillName}}</u-col>
</u-row>
<u-row>
<u-col span="4">演练目的</u-col>
<u-col span="8">{{tableData.drillPurpose}}</u-col>
</u-row>
<u-row>
<u-col span="4">二级单位</u-col>
<u-col span="8">{{tableData.secUnitName}}</u-col>
</u-row>
<u-row>
<u-col span="4">演练部门</u-col>
<u-col span="8">{{tableData.drillDutyName}}</u-col>
</u-row>
<u-row>
<u-col span="4">演练名称</u-col>
<u-col span="8">{{tableData.drillName}}</u-col>
</u-row>
<u-row>
<u-col span="4">演练日期</u-col>
<u-col span="8">{{tableData.drillDate}}</u-col>
</u-row>
<u-row>
<u-col span="4">应急预案</u-col>
<u-col span="8">{{tableData.planName}}</u-col>
</u-row>
<u-row>
<u-col span="4">负责人</u-col>
<u-col span="8">{{tableData.fzrName}}</u-col>
</u-row>
<u-row>
<u-col span="4">演练内容</u-col>
<u-col span="8">{{tableData.drillContent}}</u-col>
</u-row>
<u-row>
<u-col span="4">作业地点</u-col>
<u-col span="8">{{tableData.drillAddress}}</u-col>
</u-row>
</view>
</view>
<view class="detailData">
<view class="head">
<svgImage name="zdwxy-paihang" width="30rpx" height="30rpx"></svgImage>
<view class="headTitle">
人员车辆使用情况
</view>
</view>
<view style="padding: 20rpx 10rpx 20rpx 20rpx;">
<u-row>
<u-col span="4">使用车辆</u-col>
<u-col span="8">{{tableData.vehicleNum}}</u-col>
</u-row>
<u-row>
<u-col span="4">演练人数</u-col>
<u-col span="8">{{tableData.peopleNum}}</u-col>
</u-row>
<u-row>
<u-col span="4">耗时</u-col>
<u-col span="8">{{tableData.secUnitName}}小时</u-col>
</u-row>
<u-row>
<u-col span="4">行驶公里数</u-col>
<u-col span="8">{{tableData.travelNum}}千米</u-col>
</u-row>
<u-row>
<u-col span="4">消耗灭火剂-</u-col>
<u-col span="8">{{tableData.xhmhjWater}}</u-col>
</u-row>
<u-row>
<u-col span="4">消耗灭火剂-干粉</u-col>
<u-col span="8">{{tableData.xhmhjGanfen}}</u-col>
</u-row>
<u-row>
<u-col span="4">消耗灭火剂-泡沫</u-col>
<u-col span="8">{{tableData.xhmhjFoam}}</u-col>
</u-row>
</view>
</view>
<view class="detailData">
<view class="head">
<svgImage name="zdwxy-paihang" width="30rpx" height="30rpx"></svgImage>
<view class="headTitle">
完成情况
</view>
</view>
<view style="padding: 20rpx 10rpx 20rpx 20rpx;">
<u-row>
<u-col span="4">附件</u-col>
</u-row>
<u-row>
<u-col span="4">演练完成情况</u-col>
<u-col span="8" style="color: #3ad147;">{{tableData.drillWcqk}}</u-col>
</u-row>
<u-row>
<u-col span="4">管理人员批示</u-col>
<u-col span="8" style="color: #3ad147;">{{tableData.glrps}}</u-col>
</u-row>
</view>
</view> -->
<!-- 头部 -->
<view class="head">
<u-navbar :placeholder="true" :autoBack="true"></u-navbar>
<view class="headtitle">
<view class="headName">{{tableData.drillName}}</view>
<view class="headAddress">
<image src="../../../../static/images/drill/adress.png"
style="width: 24rpx;height: 24rpx;margin-right: 15rpx;" />
{{tableData.drillAddress}}
</view>
<view class="headAddress">
<image src="../../../../static/images/drill/time .png"
style="width: 24rpx;height: 24rpx;margin-right: 15rpx;" />
{{tableData.drillDate}}
</view>
</view>
<!-- 定位图片 -->
<view style="width: 231rpx;height: 193rpx;" class="headpic">
<image src="../../../../static/images/drill/head.png" style="width: 100%;height: 100%;"></image>
</view>
<!-- 详情 -->
<view class="center">
<u-row>
<u-col span="3">二级单位</u-col>
<u-col span="9" style="color: #737980;">{{tableData.secUnitName}}</u-col>
</u-row>
<u-row>
<u-col span="3">演练部门</u-col>
<u-col span="9" style="color: #737980;">{{tableData.drillDutyName}}</u-col>
</u-row>
<u-row>
<u-col span="3">应急预案</u-col>
<u-col span="9" style="color: #737980;">{{tableData.planName}}</u-col>
</u-row>
<u-row>
<u-col span="3">负责人</u-col>
<u-col span="9" style="display: flex;flex-direction: row;align-items: center;color: #737980;">
<image src="../../../../static/images/drill/avtor.png"
style="width: 38rpx ;height: 38rpx;margin-right: 10rpx;" />
<span>{{tableData.fzrName}}</span>
</u-col>
</u-row>
<u-row>
<u-col span="3" class="name">演练内容:</u-col>
</u-row>
<view
style="background: #F5F6FA;border-radius: 10rpx;padding: 26rpx;border: none;max-height: 300rpx;overflow-y: scroll;"
class="content" v-html="tableData.drillContent">
</view>
<!-- <u-read-more :toggle="true">
<rich-text style="background: #F5F6FA;border-radius: 10rpx;padding: 26rpx;border: none; "
class="content" :nodes="tableData.drillContent" </rich-text>
</u-read-more> -->
<u-row>
<u-col span="3" class="name">演练目的:</u-col>
</u-row>
<u-row
style="background: #F5F6FA;border-radius: 10rpx;padding: 26rpx;border: none;max-height: 300rpx;overflow-y: scroll;"
class="content" v-html="tableData.drillPurpose">
</u-row>
<!-- 定位图片 -->
<view class="centerpic">
应急演练详情
</view>
</view>
<!-- 完成情况 -->
<uni-section title="人员、车辆使用情况" type="line" class="person">
<view style="padding: 0 34rpx;">
<u-row>
<u-col span="3">使用车辆</u-col>
<u-col span="9">{{tableData.vehicleNum}}</u-col>
</u-row>
<u-row>
<u-col span="3">演练人数</u-col>
<u-col span="9">{{tableData.peopleNum}}</u-col>
</u-row>
<u-row>
<u-col span="2">耗时</u-col>
<u-col span="10">{{tableData.secUnitName}}小时</u-col>
</u-row>
<u-row>
<u-col span="4">行驶公里数</u-col>
<u-col span="8">{{tableData.travelNum}}千米</u-col>
</u-row>
<u-row>
<u-col span="5">消耗灭火剂-</u-col>
<u-col span="7">{{tableData.xhmhjWater}}</u-col>
</u-row>
<u-row>
<u-col span="5">消耗灭火剂-干粉</u-col>
<u-col span="7">{{tableData.xhmhjGanfen}}</u-col>
</u-row>
<u-row>
<u-col span="5">消耗灭火剂-泡沫</u-col>
<u-col span="7">{{tableData.xhmhjFoam}}</u-col>
</u-row>
</view>
</uni-section>
<uni-section title="完成情况" type="line" class="all">
<view style="padding: 0 34rpx;">
<u-row>
<u-col span="4">附件</u-col>
</u-row>
<view v-if="tableData.fileList !== null">
<view style="color: #3c9cff;font-weight: 400;margin-bottom: 20rpx;"
v-for="(item1,index1) in tableData.fileList" @click="goToPdfSee(item1.showUrl)"
v-if="item1.fileSuffix === 'pdf'">
{{item1.fileActualName}}
</view>
<view style="color: #3c9cff;font-weight: 400;margin-bottom: 20rpx;"
v-for="(item1,index1) in tableData.fileList" @click="prefile(item1.showUrl)" v-else>
{{item1.fileActualName}}
</view>
</view>
<u-row>
<u-col span="4">演练完成情况</u-col>
<!-- <u-col span="8" style="color: #3ad147;"></u-col> -->
</u-row>
<u-row style="background: #F5F6FA;border-radius: 10rpx;padding: 26rpx;border: none;"
class="content">{{tableData.drillWcqk}}
</u-row>
<u-row>
<u-col span="4">管理人员批示</u-col>
<!-- <u-col span="8" style="color: #3ad147;">{{tableData.glrps}}</u-col> -->
</u-row>
<u-row style="background: #F5F6FA;border-radius: 10rpx;padding: 26rpx;border: none;"
class="content">{{tableData.glrps}}
</u-row>
</view>
</uni-section>
</view>
</view>
</template>
<script>
import {
getDicts
} from "@/api/indexpage/user.js"
import {
listDrill,
getDrill
} from "@/api/indexpage/YJDrill/index.js"
export default {
onLoad(option) {
this.optionId = option.id;
},
data() {
return {
tableData: [],
optionId: "",
};
},
mounted() {
this.getList(this.optionId)
},
methods: {
getList(id) {
getDrill(id).then(res => {
this.tableData = res.data;
console.log(this.tableData, "应急演练");
})
},
//文件预览
prefile(e) {
uni.downloadFile({
url: e,
success: function(res) {
var filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function(res) {
console.log('打开文档成功');
}
});
}
});
},
//pdf跳转
goToPdfSee(url) {
this.$tab.navigateTo(`/pages/pdf/filePreview?urlID=${url}`);
},
}
}
</script>
<style lang="scss">
/deep/.u-row {
padding: 15rpx 0;
}
/deep/.uni-section .uni-section-header {
border-bottom: 1rpx solid #EEEEEE;
}
/deep/.u-navbar__content {
background: #E1F2FD !important;
}
page {
box-sizing: border-box;
}
.head {
width: 100vw;
// height: 900rpx;
background: linear-gradient(#E1F2FD, #FFFFFF) !important;
padding: 30rpx;
.headtitle {
padding: 20rpx;
position: relative;
.headName {
font-family: Noto Sans S Chinese;
font-weight: 500;
font-size: 40rpx;
color: #269FE4;
line-height: 40rpx;
margin-bottom: 32rpx;
}
.headAddress {
display: flex;
align-items: center;
margin-bottom: 15rpx;
font-family: Noto Sans S Chinese;
font-weight: 400;
font-size: 26rpx;
color: #666666;
}
}
.headpic {
position: absolute;
right: 0;
top: 160rpx;
}
}
.center {
padding: 61rpx 37rpx;
// height: 677rpx;
background: #FFFFFF;
box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(190, 207, 228, 0.4);
border-radius: 10rpx;
position: relative;
}
.centerpic {
position: absolute;
z-index: 999;
top: -20rpx;
left: 50%;
transform: translate(-50%);
width: 294rpx;
height: 55rpx;
background: url('../../../../static/images/drill/centerbg.png') no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
font-family: Noto Sans S Chinese;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
line-height: 55rpx;
}
.person {
height: 559rpx;
margin-top: 25rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(35, 35, 36, 0.05);
border-radius: 14rpx;
}
.all {
padding-bottom: 20rpx;
margin-top: 25rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(35, 35, 36, 0.05);
border-radius: 14rpx;
}
</style>