智能安全检查移动端
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.
 
 
 
 
 

458 lines
20 KiB

<template>
<view class="custom-content">
<z-paging ref="paging" v-model="dataList" @query="queryList">
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中,如果需要跟着滚动,则不要设置slot="top" -->
<!-- 注意!此处的z-tabs为独立的组件,可替换为第三方的tabs,若需要使用z-tabs,请在插件市场搜索z-tabs并引入,否则会报插件找不到的错误 -->
<template #top>
<uni-nav-bar :fontSizes="17" left-icon="left" @clickLeft="back" :fixed="true" :border="false"
background-color="transparent" status-bar title="隐患库" />
<view class="search-box">
<uni-easyinput :inputBorder="false" :styles="inputStyles" class="search-input"
v-model="hazardDescription" placeholder="隐患描述" @confirm="confirm">
</uni-easyinput>
<view class="drive-block"></view>
<uni-easyinput :inputBorder="false" :styles="inputStyles" class="search-input" v-model="inspectionBasis"
placeholder="检查依据" @confirm="confirm">
</uni-easyinput>
<view class="search-btn-box">
<view class="shaixuan-icon" @click="confirm">
<!-- <image src="https://mp-df79fe8b-b924-41b0-bcb1-960be6b4a619.cdn.bspapp.com/images/common/search@2x.png" /> -->
<image src="https://i.postimg.cc/yNDJ6FwT/search-2x.png" />
</view>
<view class="shaixuan-icon" @click="openPop">
<!-- <image src="https://mp-df79fe8b-b924-41b0-bcb1-960be6b4a619.cdn.bspapp.com/images/common/shaixuan@2x.png" /> -->
<image src="https://i.postimg.cc/qvbhdmZR/shaixuan-2x.png" />
</view>
</view>
</view>
<view class="tags-box">
<view class="tags-item" :class="{ 'active': choseindex == 0 }" @click="choseCommonType(0)"> 推荐隐患库
</view>
<view class="tags-item" :class="{ 'active': choseindex == 1 }" @click="choseCommonType(1)"> 自建隐患库
</view>
</view>
</template>
<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher",此时不用获取refresherStatus,会自动使用z-paging自带的下拉刷新view) -->
<!-- 注意注意注意!!字节跳动小程序中自定义下拉刷新不支持slot-scope,将导致custom-refresher无法显示 -->
<!-- 如果是字节跳动小程序,请参照sticky-demo.vue中的写法,此处使用slot-scope是为了减少data中无关变量声明,降低依赖 -->
<template #refresher="{ refresherStatus }">
<!-- 此处的custom-refresh为demo中自定义的组件,非z-paging的内置组件,请在实际项目中自行创建。这里插入什么view,下拉刷新就显示什么view -->
<custom-refresher :status="refresherStatus" />
</template>
<!-- 自定义没有更多数据view -->
<template #loadingMoreNoMore>
<!-- 此处的custom-nomore为demo中自定义的组件,非z-paging的内置组件,请在实际项目中自行创建。这里插入什么view,没有更多数据就显示什么view -->
<custom-nomore></custom-nomore>
</template>
<!-- 如果希望其他view跟着页面滚动,可以放在z-paging标签内 -->
<view class="list-item" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)">
<view class="list-item-header">
<view class="list-item-header-title">
<view class="header-title-icon danger-icon">
<!-- <image src="https://mp-df79fe8b-b924-41b0-bcb1-960be6b4a619.cdn.bspapp.com/images/common/lawsicon@2x.png"></image> -->
<image src="https://i.postimg.cc/BQGm1RYS/danger.png"></image>
</view>
<text>
{{ getLabelByValue(item.hazardLevel, hazardLevelList) }}
</text>
</view>
<view class="list-item-header-index">#{{ index + 1 }}</view>
</view>
<view class="list-item-body">
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">隐患描述</text>
<text class="list-item-body-desc-value3">{{ item.hazardDescription }}</text>
</view>
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">检查依据</text>
<text class="list-item-body-desc-value3">{{ item.inspectionBasis }}</text>
</view>
<view class="list-item-body-desc">
<text class="list-item-body-desc-label">整改建议</text>
<text class="list-item-body-desc-value3">{{ item.remediationSuggestions }}</text>
</view>
</view>
<view class="list-item-feet border-top" v-if="0 == 1">
<view class="list-item-feet-btn" @click="goFilePage">
<!-- <image src="https://mp-df79fe8b-b924-41b0-bcb1-960be6b4a619.cdn.bspapp.com/images/common/fujian@2x.png"></image> -->
<image src="https://i.postimg.cc/cH6cSgmq/fujian-2x.png"></image>
<text class="list-item-feet-btn-label">查看附件</text>
</view>
</view>
</view>
</z-paging>
<!-- <view class="top-fixed" :style="{ top: autoTop }">
<view class="search-box">
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入搜索内容" @iconClick="iconClick">
</uni-easyinput>
<view class="search-btn-box">
<view class="shaixuan-icon">
<image src="https://mp-df79fe8b-b924-41b0-bcb1-960be6b4a619.cdn.bspapp.com/images/common/shaixuan@2x.png" />
</view>
<text>筛选</text>
</view>
</view>
</view>
<view class=""></view> -->
<uni-popup ref="popup" type="bottom" background-color="#fff">
<view class="popup-box">
<view class="popup-box-content">
<view class="popup-box-content-item">
<text>隐患类型</text>
<view>
<uni-data-checkbox mode="tag" :map="maps" v-model="hazardType"
:localdata="hazardTypeList"></uni-data-checkbox>
</view>
</view>
<view class="popup-box-content-item">
<text>隐患等级</text>
<view>
<uni-data-checkbox mode="tag" :map="maps" v-model="hazardLevel"
:localdata="hazardLevelList"></uni-data-checkbox>
</view>
</view>
</view>
<view class="popup-box-btn-box">
<view class="popup-box-btn-box-item" @click="reset">重置</view>
<view class="popup-box-btn-box-item" @click="confirm">确定</view>
</view>
</view>
</uni-popup>
<uni-popup ref="detailPopup" type="center" background-color="#fff">
<view class="popup-box center">
<view class="popup-box-title">隐患详情</view>
<view class="content-box">
<view class="content">
<view class="content-label">隐患类型</view>
<view class="content-value">{{ getLabelByValue(mockData.hazardType, hazardTypeList) }}</view>
</view>
<view class="content">
<view class="content-label">隐患等级</view>
<view class="content-value">{{ getLabelByValue(mockData.hazardLevel, hazardLevelList) }}</view>
</view>
<view class="content">
<view class="content-label">隐患描述</view>
<view class="content-value">{{ mockData.hazardDescription }}</view>
</view>
<view class="content">
<view class="content-label">检查依据</view>
<view class="content-value">{{ mockData.inspectionBasis }}</view>
</view>
<view class="content">
<view class="content-label">整改建议</view>
<view class="content-value">{{ mockData.remediationSuggestions }}</view>
</view>
<view class="content">
<view class="content-label">创建时间</view>
<view class="content-value">{{ parseTime(mockData.createTime) }}</view>
</view>
</view>
<view class="popup-box-btn-box">
<view class="popup-box-btn-box-item" @click="confirm1">确定</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { getDicts } from '@/api/system/user'
import CustomNomore from '@/components/custom-nomore/custom-nomore'
import CustomRefresher from '@/components/custom-refresher/custom-refresher'
import { parseTime } from '@/utils/ruoyi'
import * as Api from '@/api/index/index'
import { getLabelByValue } from '@/utils/showDictLabel.js' // 导入工具函数
export default {
components: {
CustomNomore,
CustomRefresher
},
data() {
return {
choseindex: 0,
dataList: [],
inputStyles: {
borderRadius: '20rpx',
backgroundColor: '#ffffff',
},
hazardLevelList: [],
hazardTypeList: [],
maps: {
text: 'label',
value: 'value'
},
hazardDescription: '',
inspectionBasis: '',
hazardLevel: '',
hazardType: '',
mockData: {
// "hazardLevel": "1",
// "hazardDescription": "銆愭镆ヤ緷鎹€慭\n- 娉曡钖岖О锛氥€婂缓绛戣璁¢槻鐏锣僄B50016-2014銆嬶纸2018骞寸増锛塡\n- 鏉℃缂栧佛锛<EFBFBD>10.3.5\\n- 铡熸枃鍐呭锛歕\\鐤忔映镦ф槑鐏簲璁剧疆鍦ㄥ嚭鍙g殑椤堕儴銆佸闱㈢殑涓婇儴鎴栭《妫氢笂锛涘鐢ㄧ收鏄庣伅鍏峰簲璁剧疆鍦ㄥ闱㈢殑涓婇儴鎴栭《妫氢笂銆傜枏鏁h蛋阆撶殑鐤忔映鎸囩ず镙囧织鐏叿锛屽簲璁剧疆鍦ㄧ枏鏁h蛋阆揿强鍏惰浆瑙掑璺濆湴闱㈤珮搴<EFBFBD>1.0m浠ヤ笅镄勫笂锛屼笖鐏厜鐤忔映鎸囩ず镙囧织镄勯棿璺濅笉搴斿ぇ浜<EFBFBD>20m\\\\\n\\n- 娉曡钖岖О锛氥€娄腑鍗庝汉姘戝睿鍜屽浗娑堥槻娉曘€媆\n- 鏉℃缂栧佛锛氱鍗佸叚鏉\n- 铡熸枃鍐呭锛歕\\链哄叧銆佸洟浣撱€佷紒涓氥€佷簨涓氱瓑鍗曚綅搴斿綋灞ヨ涓嫔垪娑堥槻瀹夊叏镵岃矗锛泛纸锲涳级淇濋殰鐤忔映阃氶亡銆佸畨鍏ㄥ嚭鍙c€佹秷阒茶溅阃氶亡鐣呴€泛纴淇濊愈阒茬伀阒茬",
// "inspectionBasis": "銆愭镆ヤ緷鎹€慭\n- 娉曡钖岖О锛氥€婂缓绛戣璁¢槻鐏锣僄B50016-2014銆嬶纸2018骞寸増锛塡\n- 鏉℃缂栧佛锛<EFBFBD>10.3.5\\n- 铡熸枃鍐呭锛歕\\鐤忔映镦ф槑鐏簲璁剧疆鍦ㄥ嚭鍙g殑椤堕儴銆佸闱㈢殑涓婇儴鎴栭《妫氢笂锛涘鐢ㄧ收鏄庣伅鍏峰簲璁剧疆鍦ㄥ闱㈢殑涓婇儴鎴栭《妫氢笂銆傜枏鏁h蛋阆撶殑鐤忔映鎸囩ず镙囧织鐏叿锛屽簲璁剧疆鍦ㄧ枏鏁h蛋阆揿强鍏惰浆瑙掑璺濆湴闱㈤珮搴<EFBFBD>1.0m浠ヤ笅镄勫笂锛屼笖鐏厜鐤忔映鎸囩ず镙囧织镄勯棿璺濅笉搴斿ぇ浜<EFBFBD>20m\\\\\n\\n- 娉曡钖岖О锛氥€娄腑鍗庝汉姘戝睿鍜屽浗娑堥槻娉曘€媆\n- 鏉℃缂栧佛锛氱鍗佸叚鏉\n- 铡熸枃鍐呭锛歕\\链哄叧銆佸洟浣撱€佷紒涓氥€佷簨涓氱瓑鍗曚綅搴斿綋灞ヨ涓嫔垪娑堥槻瀹夊叏镵岃矗锛泛纸锲涳级淇濋殰鐤忔映阃氶亡銆佸畨鍏ㄥ嚭鍙c€佹秷阒茶溅阃氶亡鐣呴€泛纴淇濊愈阒茬伀阒茬",
// "remediationSuggestions": "銆愭镆ヤ緷鎹€慭\n- 娉曡钖岖О锛氥€婂缓绛戣璁¢槻鐏锣僄B50016-2014銆嬶纸2018骞寸増锛塡\n- 鏉℃缂栧佛锛<EFBFBD>10.3.5\\n- 铡熸枃鍐呭锛歕\\鐤忔映镦ф槑鐏簲璁剧疆鍦ㄥ嚭鍙g殑椤堕儴銆佸闱㈢殑涓婇儴鎴栭《妫氢笂锛涘鐢ㄧ收鏄庣伅鍏峰簲璁剧疆鍦ㄥ闱㈢殑涓婇儴鎴栭《妫氢笂銆傜枏鏁h蛋阆撶殑鐤忔映鎸囩ず镙囧织鐏叿锛屽簲璁剧疆鍦ㄧ枏鏁h蛋阆揿强鍏惰浆瑙掑璺濆湴闱㈤珮搴<EFBFBD>1.0m浠ヤ笅镄勫笂锛屼笖鐏厜鐤忔映鎸囩ず镙囧织镄勯棿璺濅笉搴斿ぇ浜<EFBFBD>20m\\\\\n\\n- 娉曡钖岖О锛氥€娄腑鍗庝汉姘戝睿鍜屽浗娑堥槻娉曘€媆\n- 鏉℃缂栧佛锛氱鍗佸叚鏉\n- 铡熸枃鍐呭锛歕\\链哄叧銆佸洟浣撱€佷紒涓氥€佷簨涓氱瓑鍗曚綅搴斿綋灞ヨ涓嫔垪娑堥槻瀹夊叏镵岃矗锛泛纸锲涳级淇濋殰鐤忔映阃氶亡銆佸畨鍏ㄥ嚭鍙c€佹秷阒茶溅阃氶亡鐣呴€泛纴淇濊愈阒茬伀阒茬",
// "hazardType": "1",
// "createTime": "2021-08-10 10:10:10"
}
}
},
computed: {
autoTop() {
return this.getVal()
},
},
mounted() {
this.getDicts('hazard_level')
this.getDicts('hazard_type')
},
methods: {
itemClick(item) {
this.mockData = { ...item }
this.$refs.detailPopup.open()
},
choseCommonType(val) {
this.reset()
this.choseindex = val
this.$refs.paging.refresh()
},
reset() {
this.hazardDescription = '',
this.inspectionBasis = '',
this.hazardLevel = '',
this.hazardType = ''
},
confirm() {
this.$refs.paging.refresh()
this.$refs.popup.close()
},
confirm1() {
this.$refs.detailPopup.close()
},
getLabelByValue(){
return getLabelByValue.apply(this, arguments)
},
getDicts(type) {
const params = {
type: type
}
getDicts(params).then(res => {
if (type === 'hazard_level') {
this.hazardLevelList = res.data
} else if (type === 'hazard_type') {
this.hazardTypeList = res.data
}
}).catch(err => {
console.log(err)
})
},
openPop() {
this.$refs.popup.open()
},
goFilePage() {
uni.navigateTo({
url: '/pageIndex/filePage/filePage'
})
},
parseTime(time) {
return parseTime(time)
},
back() {
uni.navigateBack()
},
getVal() {
return uni.getSystemInfoSync().statusBarHeight + 44 + 'px'
},
queryList(pageNo, pageSize) {
//组件加载时会自动触发此方法,因此默认页面加载时会自动触发,无需手动调用
//这里的pageNo和pageSize会自动计算好,直接传给服务器即可
//模拟请求服务器获取分页数据,请替换成自己的网络请求
const params = {
pageNo: pageNo,
pageSize: pageSize,
hazardDescription: this.hazardDescription,
inspectionBasis: this.inspectionBasis,
hazardType: this.hazardType,
hazardLevel: this.hazardLevel,
}
if (this.choseindex == 0) {
Api.getCommonHazardList(params).then(res => {
//将请求的结果数组传递给z-paging
this.$refs.paging.complete(res.data.list);
}).catch(res => {
//如果请求失败写this.$refs.paging.complete(false);
//注意,每次都需要在catch中写这句话很麻烦,z-paging提供了方案可以全局统一处理
//在底层的网络请求抛出异常时,写uni.$emit('z-paging-error-emit');即可
this.$refs.paging.complete(false);
})
}
if (this.choseindex == 1) {
Api.getPrivateHazardList(params).then(res => {
//将请求的结果数组传递给z-paging
this.$refs.paging.complete(res.data.list);
}).catch(res => {
//如果请求失败写this.$refs.paging.complete(false);
//注意,每次都需要在catch中写这句话很麻烦,z-paging提供了方案可以全局统一处理
//在底层的网络请求抛出异常时,写uni.$emit('z-paging-error-emit');即可
this.$refs.paging.complete(false);
})
}
},
}
}
</script>
<style lang="scss">
.uni-easyinput,
.uni-easyinput__content {
border-radius: 20rpx;
}
.drive-block {
width: 30rpx;
height: 10rpx;
}
.tags-box {
display: flex;
align-items: center;
width: 100%;
justify-content: space-around;
height: 100rpx;
.tags-item {
font-family: Alibaba PuHuiTi;
font-weight: 400;
font-size: 30rpx;
color: #666666;
position: relative;
&.active {
color: #1B1B1B;
}
&.active::after {
content: '';
width: 100%;
width: 72rpx;
height: 5rpx;
background: linear-gradient(90deg, #00DAEF 0%, #3E73F5 100%);
border-radius: 3rpx;
position: absolute;
bottom: -10rpx;
left: 50%;
transform: translateX(-50%);
}
}
}
.popup-box {
padding: 30rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
&.center {
width: 80vw;
max-height: 80vh;
.popup-box-title {
font-size: 32rpx;
font-weight: bold;
text-align: center;
margin-bottom: 24rpx;
}
.content-box {
max-height: 60vh;
overflow-y: scroll;
.content {
margin: 24rpx 0;
.content-label {
font-weight: 500;
margin-bottom: 12rpx;
}
.content-value {
color: #656565;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 3;
// overflow: hidden;
}
}
}
}
&-content {
&-item {
margin-bottom: 40rpx;
&:last-child {
margin-bottom: 0;
}
>text {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.uni-data-checkbox {
display: flex;
flex-wrap: wrap;
::v-deep .uni-checkbox-group {
display: flex;
flex-wrap: wrap;
.uni-label {
width: 50%;
margin-bottom: 20rpx;
display: flex;
align-items: center;
.uni-checkbox-input {
transform: scale(0.8);
margin-right: 10rpx;
}
}
}
}
}
}
&-btn-box {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
&-item {
flex: 1;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 10rpx;
font-size: 30rpx;
&:first-child {
background-color: #f5f5f5;
color: #666;
margin-right: 20rpx;
}
&:last-child {
background-color: #007AFF;
color: #fff;
margin-left: 20rpx;
}
}
}
}
</style>