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.

506 lines
13 KiB

2 months ago
<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);
2 months ago
this.planTypeList = dataInfo.map(item => {
return {
text: item.dictLabel,
value: item.dictValue
};
});
2 months ago
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>