|
|
<template>
|
|
|
<view>
|
|
|
<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="应急预案" :autoBack="true">
|
|
|
|
|
|
</u-navbar>
|
|
|
<!-- 搜索框 -->
|
|
|
<view style="width: 100%;background-color: #fff;padding: 30rpx;">
|
|
|
<u-search placeholder="请输入事故类型" v-model="searchKey" :showAction="false" @change="inputkey"></u-search>
|
|
|
</view>
|
|
|
<!-- 分类 -->
|
|
|
<view style="background-color: #fff;">
|
|
|
<!-- 头部 -->
|
|
|
<view class="sortHead">
|
|
|
<image src="../../../static/images/Yjplan/sort.png"
|
|
|
style="width: 36rpx;height: 36rpx;margin-right: 22rpx;"></image>
|
|
|
<span class="sortTitle">分类</span>
|
|
|
</view>
|
|
|
<!-- 卡片 -->
|
|
|
<view class="sortCard">
|
|
|
<view class="zonghe" @click="changeType('1')">
|
|
|
<view :class="`${changeValue == '1' ? 'title1' : 'title'}`">综合预案</view>
|
|
|
<view class="count">
|
|
|
{{ zh }}
|
|
|
<span style="font-size: 28rpx;">/个</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="zhuanxiang" @click="changeType('2')">
|
|
|
<view :class="`${changeValue == '2' ? 'title1' : 'title'}`">专项预案</view>
|
|
|
<view class="count">
|
|
|
{{ zx }}
|
|
|
<span style="font-size: 28rpx;">/个</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="xianchang" @click="changeType('3')">
|
|
|
<view :class="`${changeValue == '3' ? 'title1' : 'title'}`">现场处置方案</view>
|
|
|
<view class="count">
|
|
|
{{ xccz }}
|
|
|
<span style="font-size: 28rpx;">/个</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="qita" @click="changeType('4')">
|
|
|
<view :class="`${changeValue == '4' ? 'title1' : 'title'}`">其他预案</view>
|
|
|
<view class="count">
|
|
|
{{ qt }}
|
|
|
<span style="font-size: 28rpx;">/个</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!--预案列表 -->
|
|
|
<view style="background-color: #fff;">
|
|
|
<!-- 头部 -->
|
|
|
<view class="contentHead">
|
|
|
<image src="../../../static/images/Yjplan/articel.png"
|
|
|
style="width: 36rpx;height: 37rpx;margin-right: 22rpx;"></image>
|
|
|
<!-- <span class="sortTitle">综合预案</span> -->
|
|
|
<!-- <uni-data-select v-model="changeValue" :localdata="planTypeList" placeholder="综合预案"
|
|
|
@change="changeType"></uni-data-select> -->
|
|
|
<view
|
|
|
style="font-family: Noto Sans S Chinese;font-weight: 500;font-size: 32rpx;color: #333333;line-height: 40rpx;">
|
|
|
{{ setDict(changeValue, planTypeList) }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 内容 -->
|
|
|
<view v-if="tableData.length === 0" class="listName" :style="fullHeight">
|
|
|
<image src="../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
|
|
|
<span style="color: #9f9f9f;margin-top: 30rpx;">该分类下暂无预案信息~</span>
|
|
|
</view>
|
|
|
<view style="padding: 0 40rpx;margin-bottom: 20rpx;" v-for="(item, index) in tableData" :key="index">
|
|
|
<view class="content">
|
|
|
<!-- 预案名称 -->
|
|
|
<view style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
<view style="font-weight: 500;font-size: 28rpx;color: #333333;">
|
|
|
<view>{{ item.planName.substring(0, 10) }}</view>
|
|
|
<view style="margin-top: 10rpx;">{{ item.planName.substring(10) }}</view>
|
|
|
</view>
|
|
|
<image src="../../../static/images/zdwxy/success.png" style="width: 129rpx;height: 129rpx;">
|
|
|
</image>
|
|
|
</view>
|
|
|
<!-- 预案内容 -->
|
|
|
<view class="contentDetail">
|
|
|
<u-row style="margin-bottom: 30rpx;">
|
|
|
<u-col span="4" class="col1">编号：</u-col>
|
|
|
<u-col span="8" class="col2">{{ item.text1 }}</u-col>
|
|
|
</u-row>
|
|
|
<u-row style="margin-bottom: 30rpx;">
|
|
|
<u-col span="4" class="col1">版本号 :</u-col>
|
|
|
<u-col span="8" class="col2">{{item.planVersion}}</u-col>
|
|
|
</u-row>
|
|
|
<u-row style="margin-bottom: 30rpx;">
|
|
|
<u-col span="4" class="col1">预案类型:</u-col>
|
|
|
<u-col span="8" class="col2">{{ setDict(item.planType, planTypeList) }}</u-col>
|
|
|
</u-row>
|
|
|
<u-row style="margin-bottom: 30rpx;">
|
|
|
<u-col span="4" class="col1">应对事故类型:</u-col>
|
|
|
<u-col span="8" class="col2">{{ item.accidentType }}</u-col>
|
|
|
</u-row>
|
|
|
<view class="more" @click="item.zk = !item.zk" v-show="!item.zk">
|
|
|
查看更多
|
|
|
<view class="sanjiao"></view>
|
|
|
</view>
|
|
|
<view v-if="item.zk">
|
|
|
<u-row style="margin-bottom: 30rpx;">
|
|
|
<u-col span="4" class="col1">适用地区:</u-col>
|
|
|
<u-col span="8" class="col2">{{ item.usedDeptName }}</u-col>
|
|
|
</u-row>
|
|
|
<u-row style="margin-bottom: 30rpx;">
|
|
|
<u-col span="4" class="col1">编制单位:</u-col>
|
|
|
<u-col span="8" class="col2">{{ item.preDeptName }}</u-col>
|
|
|
</u-row>
|
|
|
<u-row style="margin-bottom: 30rpx;">
|
|
|
<u-col span="4" class="col1">编制人:</u-col>
|
|
|
<u-col span="8" class="col2">{{ item.preUserName }}</u-col>
|
|
|
</u-row>
|
|
|
<u-row style="margin-bottom: 30rpx;">
|
|
|
<u-col span="4" class="col1">编写日期:</u-col>
|
|
|
<u-col span="8" class="col2">{{ item.preDate }}</u-col>
|
|
|
</u-row>
|
|
|
<u-row style="margin-bottom: 30rpx;">
|
|
|
<u-col span="4" class="col1">附件:</u-col>
|
|
|
</u-row>
|
|
|
<view v-if="item.fileList.length > 0">
|
|
|
<view style="color: #3c9cff;font-weight: 400;margin-bottom: 20rpx;"
|
|
|
v-for="(item1,index1) in item.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 item.fileList" @click="prefile(item1.showUrl)" v-else>
|
|
|
{{item1.fileActualName}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import {
|
|
|
listPlan,
|
|
|
getPlan,
|
|
|
planTjNumByType
|
|
|
} from '@/api/indexpage/plan/index.js';
|
|
|
import {
|
|
|
getDicts
|
|
|
} from '@/api/indexpage/user.js';
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
fullHeight: '',
|
|
|
searchKey: '', //应急预案搜索
|
|
|
ismore: false, //查看更多
|
|
|
tableData: [],
|
|
|
planTypeList: [],
|
|
|
changeValue: '1',
|
|
|
zh: '',
|
|
|
zx: '',
|
|
|
xccz: '',
|
|
|
qt: '',
|
|
|
timer: ""
|
|
|
// countList: undefined, //分类数量
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getDict();
|
|
|
this.getCount();
|
|
|
let height = document.querySelector('.listName').getBoundingClientRect().top;
|
|
|
console.log(height, '高度');
|
|
|
this.fullHeight = 'height:' + 'calc(100vh - ' + height * 2 + 'rpx)';
|
|
|
},
|
|
|
watch: {
|
|
|
searchKey(newdata, olddata) {
|
|
|
let that = this;
|
|
|
//防抖函数
|
|
|
clearTimeout(that.timer);
|
|
|
that.timer = setTimeout(function() {
|
|
|
if (newdata == '' || newdata == undefined) {
|
|
|
//发场库请求
|
|
|
listPlan({
|
|
|
filingStatus: '1'
|
|
|
}).then(res => {
|
|
|
that.tableData = res.rows;
|
|
|
res.rows.forEach(e => {
|
|
|
e.zk = false;
|
|
|
});
|
|
|
});
|
|
|
} else {
|
|
|
listPlan({
|
|
|
accidentType: newdata,
|
|
|
filingStatus: '1'
|
|
|
}).then(res => {
|
|
|
that.tableData = res.rows;
|
|
|
res.rows.forEach(e => {
|
|
|
e.zk = false;
|
|
|
});
|
|
|
console.log(that.tableData);
|
|
|
});
|
|
|
}
|
|
|
}, 600);
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
//文件预览
|
|
|
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}`);
|
|
|
},
|
|
|
getCount() {
|
|
|
planTjNumByType().then(res => {
|
|
|
this.zh = res.data.zh;
|
|
|
this.zx = res.data.zx;
|
|
|
this.xccz = res.data.xccz;
|
|
|
this.qt = res.data.qt;
|
|
|
// console.log(res, "数量");
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 下拉框搜索
|
|
|
changeType(e) {
|
|
|
this.changeValue = e;
|
|
|
console.log(this.changeValue);
|
|
|
listPlan({
|
|
|
planType: e,
|
|
|
filingStatus: '1'
|
|
|
}).then(res => {
|
|
|
this.tableData = res.rows;
|
|
|
});
|
|
|
},
|
|
|
newline(str, n) {
|
|
|
//获取字符的长度
|
|
|
var len = str.length;
|
|
|
var strTemp = '';
|
|
|
if (len > n) {
|
|
|
strTemp = str.substring(0, n);
|
|
|
str = str.substring(n, len);
|
|
|
return strTemp + '\n' + this.newline(str, n);
|
|
|
} else {
|
|
|
return str;
|
|
|
}
|
|
|
},
|
|
|
// 字典值
|
|
|
getDict() {
|
|
|
getDicts('emergency_plan_type').then(res => {
|
|
|
let dataInfo = res.data;
|
|
|
console.log('emergency_plan_type',res.data);
|
|
|
this.planTypeList = dataInfo.map(item => {
|
|
|
return {
|
|
|
text: item.dictLabel,
|
|
|
value: item.dictValue
|
|
|
};
|
|
|
});
|
|
|
|
|
|
console.log(this.planTypeList, 'this.planTypeList');
|
|
|
});
|
|
|
getDicts('filing_status').then(res => {
|
|
|
let dataInfo = res.data;
|
|
|
this.beianStatusList = dataInfo.map(item => {
|
|
|
return {
|
|
|
text: item.dictLabel,
|
|
|
value: item.dictValue
|
|
|
};
|
|
|
});
|
|
|
});
|
|
|
this.getList();
|
|
|
},
|
|
|
setDict(stauts, list) {
|
|
|
for (let item of list) {
|
|
|
if (item.value === stauts) {
|
|
|
return item.text;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
getList() {
|
|
|
listPlan({
|
|
|
planType: '1',
|
|
|
filingStatus: '1'
|
|
|
}).then(res => {
|
|
|
this.tableData = res.rows;
|
|
|
// for (var i = 0; i < this.tableData.length; i++) {
|
|
|
// this.tableData[i].ismore = false;
|
|
|
// }
|
|
|
// console.log(this.tableData, "this.tableData");
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
box-sizing: border-box !important;
|
|
|
|
|
|
/deep/.uni-select {
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
/deep/.uni-select__input-placeholder {
|
|
|
font-weight: 500;
|
|
|
font-size: 32rpx;
|
|
|
color: #333333;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
/deep/.uni-select__input-text {
|
|
|
font-weight: 500;
|
|
|
font-size: 32rpx;
|
|
|
color: #333333;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
/deep/.uni-select__input-text {
|
|
|
// width: none;
|
|
|
}
|
|
|
|
|
|
/deep/.uniui-bottom {
|
|
|
font-size: 32rpx !important;
|
|
|
color: #333333 !important;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
.active {
|
|
|
color: #289318;
|
|
|
}
|
|
|
|
|
|
.sortHead {
|
|
|
margin-top: 20rpx;
|
|
|
background-color: #fff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 36rpx 30rpx;
|
|
|
|
|
|
.sortTitle {
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: 500;
|
|
|
font-size: 32rpx;
|
|
|
color: #333333;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.sortCard {
|
|
|
padding: 0 30rpx;
|
|
|
padding-bottom: 30rpx;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
.zonghe {
|
|
|
width: 336rpx;
|
|
|
height: 140rpx;
|
|
|
background: url('../../../static/images/Yjplan/zonghe.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 19rpx;
|
|
|
}
|
|
|
|
|
|
.zhuanxiang {
|
|
|
width: 336rpx;
|
|
|
height: 140rpx;
|
|
|
background: url('../../../static/images/Yjplan/zhuanxiang.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
.xianchang {
|
|
|
width: 336rpx;
|
|
|
height: 140rpx;
|
|
|
background: url('../../../static/images/Yjplan/xianchang.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 19rpx;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.qita {
|
|
|
width: 336rpx;
|
|
|
height: 140rpx;
|
|
|
background: url('../../../static/images/Yjplan/qita.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: 500;
|
|
|
font-size: 26rpx;
|
|
|
color: #4d4d4d;
|
|
|
line-height: 40rpx;
|
|
|
padding: 18rpx 30rpx;
|
|
|
}
|
|
|
|
|
|
.title1 {
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: 600;
|
|
|
font-size: 28rpx;
|
|
|
color: #289318;
|
|
|
line-height: 40rpx;
|
|
|
padding: 18rpx 30rpx;
|
|
|
}
|
|
|
|
|
|
.count {
|
|
|
font-family: DINPro;
|
|
|
font-weight: 500;
|
|
|
font-size: 50rpx;
|
|
|
color: #353535;
|
|
|
line-height: 40rpx;
|
|
|
padding: 0 55rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.contentHead {
|
|
|
background-color: #fff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 36rpx 30rpx;
|
|
|
|
|
|
.sortTitle {
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: 500;
|
|
|
font-size: 32rpx;
|
|
|
color: #333333;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.listName {
|
|
|
font-weight: bolder;
|
|
|
color: #454545;
|
|
|
font-size: 30rpx;
|
|
|
margin-right: 50rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: c;
|
|
|
margin-top: 100rpx;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
width: 670rpx;
|
|
|
// height: 570rpx;
|
|
|
background: url('../../../static/images/Yjplan/bg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
padding: 23rpx 32rpx;
|
|
|
|
|
|
.contentDetail {
|
|
|
padding: 41rpx;
|
|
|
margin-top: 19rpx;
|
|
|
width: 606rpx;
|
|
|
// height: 396rpx;
|
|
|
background: #ffffff;
|
|
|
opacity: 0.6;
|
|
|
|
|
|
.col1 {
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
line-height: 45rpx;
|
|
|
}
|
|
|
|
|
|
.col2 {
|
|
|
font-size: 28rpx;
|
|
|
color: #737980;
|
|
|
line-height: 45rpx;
|
|
|
}
|
|
|
|
|
|
.more {
|
|
|
width: 550rpx;
|
|
|
height: 50rpx;
|
|
|
background: #eeeeee;
|
|
|
border-radius: 4rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #999999;
|
|
|
line-height: 50rpx;
|
|
|
text-align: center;
|
|
|
font-weight: 400;
|
|
|
|
|
|
.sanjiao {
|
|
|
margin-left: 5rpx;
|
|
|
display: inline-block;
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
border-top: 16rpx solid #999999;
|
|
|
border-right: 16rpx solid transparent;
|
|
|
border-left: 16rpx solid transparent;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
