|
|
<template>
|
|
|
<view>
|
|
|
|
|
|
<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="" :autoBack="true">
|
|
|
|
|
|
</u-navbar>
|
|
|
<!-- <u-sticky bgColor="#fff">
|
|
|
<u-tabs lineWidth="37" gutter="25" :activeStyle="{
|
|
|
color: '#303133',
|
|
|
fontWeight: 'bold',
|
|
|
transform: 'scale(1.25)'
|
|
|
}" :inactiveStyle="{
|
|
|
color: '#999999',
|
|
|
transform: 'scale(1)'
|
|
|
}" :current="tabIndex" :scrollable="true" :list="list1" @click="clicktabs" style="padding-left: 20rpx;"></u-tabs>
|
|
|
</u-sticky> -->
|
|
|
<!-- <swiper :current="tabIndex" @change="tabChange" style="height: calc(100vh - 176rpx);margin-top: 10rpx;">
|
|
|
<swiper-item> -->
|
|
|
<view class="content" style="height: 100%;overflow-y: scroll;">
|
|
|
<!-- 危险源统计 -->
|
|
|
<view class="tongji">
|
|
|
<!-- <view class="head">-->
|
|
|
<!-- <image src="../../../static/images/zdwxy/dept.png"-->
|
|
|
<!-- style="width: 54rpx;height: 54rpx;margin-right: 28rpx;"></image>-->
|
|
|
<!-- <view>采气一厂</view>-->
|
|
|
<!-- </view>-->
|
|
|
<view
|
|
|
style="display: flex;justify-content: space-around; align-items: center;margin-top: 27rpx;">
|
|
|
<view class="bg">
|
|
|
<view>
|
|
|
<image src="../../../static/images/zdwxy/weixianyuan.png"
|
|
|
style="width: 60rpx;height: 60rpx;margin-right: 24rpx;"></image>
|
|
|
</view>
|
|
|
<view class="title">
|
|
|
<view style="font-size: 28rpx;color: #666666;">重大危险源</view>
|
|
|
<view>
|
|
|
<span
|
|
|
style="font-weight: 400;font-size: 28rpx;color: #E65659;line-height: 38rpx;">{{ totalNum }}</span>
|
|
|
个
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="bg">
|
|
|
<view>
|
|
|
<image src="../../../static/images/zdwxy/beian.png"
|
|
|
style="width: 60rpx;height: 60rpx;margin-right: 24rpx;"></image>
|
|
|
</view>
|
|
|
<view class="title">
|
|
|
<view style="font-size: 28rpx;color: #666666;">已备案危险源</view>
|
|
|
<view>
|
|
|
<span
|
|
|
style="font-weight: 400;font-size: 30rpx;color: #2D6DFF;line-height: 38rpx;">{{baNum}}</span>
|
|
|
个
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 卡片 -->
|
|
|
<view v-if="tableData.length === 0"
|
|
|
style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx;">
|
|
|
|
|
|
<image src="../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
|
|
|
<span style="color: #9f9f9f;margin-top: 30rpx;">该场站下暂无危险源信息~</span>
|
|
|
</view>
|
|
|
<view class="card" v-for="(item, index) in tableData" :key="index">
|
|
|
<!-- 重大危险源头部 -->
|
|
|
<view class="head">
|
|
|
<view style="font-weight: bold;font-size: 32rpx;color: #333333;">{{ item.name }}</view>
|
|
|
<view class="leavl">{{ setDict(item.level, levelList) }}</view>
|
|
|
</view>
|
|
|
<!-- 中间 -->
|
|
|
<view class="center" style="display: flex;">
|
|
|
<view style="width: 316rpx;height: 181rpx;overflow: hidden;" v-if="item.pics > 0">
|
|
|
<image :src="item.picList[0]" style="width: 100%;height: 100%;object-fit: cover;flex: 1;">
|
|
|
</image>
|
|
|
</view>
|
|
|
|
|
|
<image src="../../../static/images/zdwxy/danger.png"
|
|
|
style="width: 178rpx;height: 131rpx;margin-right: 18rpx;" v-else></image>
|
|
|
<view style="font-weight: normal;font-size: 28rpx;color: #333333;">
|
|
|
<!-- <view style="color: #333333;">负责人：{{ item.directorName }}</view> -->
|
|
|
<view class="dept" style="margin: 5rpx 0;">{{ item.erDeptName }}/{{ item.deptName }}</view>
|
|
|
<view
|
|
|
style=" color: #333333;width:442rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
|
|
|
负责人：{{ item.userName }}</view>
|
|
|
<view
|
|
|
style="color: #333333;width:442rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
|
|
|
位置：{{ item.address }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 底部 -->
|
|
|
<view style="display: flex;padding: 14rpx 28rpx;justify-content: space-between;">
|
|
|
<view>
|
|
|
<view>
|
|
|
备案状态：
|
|
|
<span style="color: #7D858E;">{{ setDict(item.baStatus, beianStatusList) }}</span>
|
|
|
</view>
|
|
|
<!-- <view>
|
|
|
危险源描述：
|
|
|
<span style="color: #7D858E;">{{ item.text1 }}</span>
|
|
|
</view> -->
|
|
|
<!-- <view
|
|
|
style="margin: 30rpx 0;width: 483rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
|
|
|
有效期：
|
|
|
<span style="color: #7D858E;">{{ item.validityBegin }} 至
|
|
|
{{ item.validityEnd }}</span>
|
|
|
</view> -->
|
|
|
<view v-if="item.baStatus=='1'">备案信息：{{item.baInfo}}</view>
|
|
|
<!-- <view v-if="item.fileList.length > 0">-->
|
|
|
<!-- <view>附件：</view>-->
|
|
|
<!-- <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 v-if="item.isBa == 'Y'">
|
|
|
<image src="../../../static/images/zdwxy/success.png" style="width: 129rpx;height: 129rpx;">
|
|
|
</image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- </swiper-item>
|
|
|
<swiper-item>22</swiper-item>
|
|
|
</swiper> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import {
|
|
|
getDicts
|
|
|
} from '@/api/indexpage/user.js'
|
|
|
// 重大危险源详情
|
|
|
import {
|
|
|
listSource,
|
|
|
listSourceFiling,
|
|
|
getSource,
|
|
|
selectListByFilingId,
|
|
|
getSourceAppTj
|
|
|
} from '@/api/indexpage/zdwxy/index.js'
|
|
|
export default {
|
|
|
onLoad(options) {
|
|
|
this.optionId = options.id
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
optionId: '', //传值id
|
|
|
// tabs内容
|
|
|
list1: [{
|
|
|
name: '危险源场站'
|
|
|
},
|
|
|
{
|
|
|
name: '备案情况'
|
|
|
}
|
|
|
],
|
|
|
|
|
|
|
|
|
totalNum: undefined,
|
|
|
baNum : undefined,
|
|
|
wbaNum: undefined,
|
|
|
tabIndex: 0, //tabs下标
|
|
|
tableData: [], //危险源表格数据
|
|
|
levelList: [], //等级数组
|
|
|
beianList: [], //备案表格数据
|
|
|
beianStatusList: [] //是否备案字典数组
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getDict()
|
|
|
this.getList() //危险源信息
|
|
|
},
|
|
|
|
|
|
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}`);
|
|
|
},
|
|
|
// 字典值
|
|
|
getDict() {
|
|
|
getDicts('source_level').then(res => {
|
|
|
let dataInfo = res.data
|
|
|
this.levelList = dataInfo.map(item => {
|
|
|
return {
|
|
|
key: item.dictLabel,
|
|
|
value: item.dictValue
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
getDicts('source_ba_status').then(res => {
|
|
|
let dataInfo = res.data
|
|
|
this.beianStatusList = dataInfo.map(item => {
|
|
|
return {
|
|
|
key: item.dictLabel,
|
|
|
value: item.dictValue
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
setDict(stauts, list) {
|
|
|
for (let item of list) {
|
|
|
if (item.value === stauts) {
|
|
|
return item.key
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 获取重大危险源数据
|
|
|
getList() {
|
|
|
// selectListByFilingId(this.optionId).then(res => {
|
|
|
// this.tableData = res.data
|
|
|
// console.log(this.tableData, '重大危险源')
|
|
|
// })
|
|
|
getSourceAppTj().then(res => {
|
|
|
console.log(res.data,"sssssssssssssss")
|
|
|
this.totalNum = res.data.totalNum;
|
|
|
this.baNum = res.data.baNum;
|
|
|
this.wbaNum = res.data.wbaNum;
|
|
|
this.tableData = res.data.sourceVoList;
|
|
|
// console.log(this.tableData, '重大危险源')
|
|
|
})
|
|
|
},
|
|
|
getBeiAnList() {
|
|
|
listSourceFiling().then(res => {
|
|
|
this.beianList = res.rows
|
|
|
// console.log(res, "备案信息");
|
|
|
})
|
|
|
},
|
|
|
// tabs点击切换
|
|
|
clicktabs(e) {
|
|
|
this.switchTab(e.index)
|
|
|
},
|
|
|
// 轮播图切换
|
|
|
tabChange(e) {
|
|
|
let index = e.target.current || e.detail.current // 获取到当前移动到第几个
|
|
|
this.switchTab(index)
|
|
|
},
|
|
|
//优化---当index相同时，不执行代码
|
|
|
switchTab(index) {
|
|
|
if (this.tabIndex == index) {
|
|
|
return
|
|
|
} else {
|
|
|
this.tabIndex = index
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
box-sizing: border-box !important;
|
|
|
|
|
|
.content {
|
|
|
padding: 30rpx;
|
|
|
|
|
|
.tongji {
|
|
|
width: 690rpx;
|
|
|
height: 150rpx;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(190, 207, 228, 0.4);
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
.head {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 26rpx 45rpx;
|
|
|
border-bottom: 2rpx solid #eeeeee;
|
|
|
}
|
|
|
|
|
|
.bg {
|
|
|
width: 330rpx;
|
|
|
height: 143rpx;
|
|
|
background: url('@/static/images/zdwxy/bg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding-left: 28rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
width: 705rpx;
|
|
|
height: 502rpx;
|
|
|
background: url('@/static/images/zdwxy/contentbg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
margin-top: 24rpx;
|
|
|
|
|
|
.head {
|
|
|
padding: 28rpx 32rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
border-bottom: 2rpx solid #eeeeee;
|
|
|
|
|
|
.leavl {
|
|
|
width: 97rpx;
|
|
|
height: 41rpx;
|
|
|
background: #ffb911;
|
|
|
border-radius: 17rpx 0rpx 17rpx 0rpx;
|
|
|
font-weight: 500;
|
|
|
font-size: 29rpx;
|
|
|
color: #ffffff;
|
|
|
line-height: 41rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.center {
|
|
|
.dept {
|
|
|
background: #e9f2fd;
|
|
|
border-radius: 10rpx;
|
|
|
border: 1px solid #a5c6eb;
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
font-weight: 400;
|
|
|
font-size: 26rpx;
|
|
|
color: #4c96dc;
|
|
|
padding: 8rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
padding: 26rpx 27rpx;
|
|
|
border-bottom: 2rpx solid #eeeeee;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
