Skip to content

G
GaoQuYingJiH5-ASD
Commit d0667754 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

feature:安全检查表

parent c167b82d
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 32 deletions
src/_check_list.html
View file @ d0667754
...@@ -57,14 +57,15 @@ ...@@ -57,14 +57,15 @@
.checklist-container { .checklist-container {
padding: 12px; padding: 12px;
background: #f7f8fa; background: #fff;
overflow: hidden;
padding-bottom: 1rem;
} }
.check-item { .check-item {
margin-bottom: 16px; width: 88vw;
padding: 12px; padding: 12px;
background: white; background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} }
...@@ -75,19 +76,23 @@ ...@@ -75,19 +76,23 @@
} }
.item-number { .item-number {
width: 28px; /* width: 28px;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;
background: #1989fa; background: #1989fa;
color: white; color: white;
border-radius: 50%; border-radius: 50%;
margin-right: 12px; margin-right: 12px; */
} }
.expand-section { .expand-section {
width: 77.5vw;
margin-top: 12px; margin-top: 12px;
border: 2px solid #000; /* border: 2px solid #000; */
float: left;
background: #f5f6fa;
padding: 0.4rem;
} }
.sub-checkbox-group { .sub-checkbox-group {
...@@ -106,30 +111,185 @@ ...@@ -106,30 +111,185 @@
gap: 12px; gap: 12px;
margin: 12px 0; margin: 12px 0;
} }
.check-item {
float: left;
}
.van-radio-group--horizontal {
float: left;
}
/* 样式优化 */
.checklist-container.item_title {}
.checklist-header p {
background-color: rgb(25, 137, 250);
color: rgb(255, 255, 255);
font-size: 0.26rem;
padding: 0.2rem .3rem .2rem;
line-height: .39999rem;
margin: 0;
}
.checklist-header h5 {
font-size: .32rem;
text-align: center;
}
.item_title {
font-size: .3rem;
color: #1081E3;
font-weight: bold;
position: relative;
padding-left: .2rem;
}
.item_title::before {
content: '';
display: block;
width: 0.05rem;
height: 0.32rem;
background-color: #1081E3;
margin-right: 0.2rem;
position: absolute;
left: 0;
top: 0;
}
.van-checkbox {
width: auto;
}
.van-cell {
background: #f5f6fa;
margin-top: 0.2rem;
}
.sub-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: .2rem;
}
.van-cell-group {
background-color: #f5f6fa;
}
.van-radio {
margin-right: 0.8rem;
margin-top: .2rem;
}
.van-radio__label {
font-size: 0.28rem;
}
textarea {
/* background: #f5f6fa !important; */
background-color: #fff !important;
}
.van-cell__value {
background-color: #f5f6fa;
}
.van-uploader__upload {
background-color: #fff;
}
.title_require {
position: relative;
padding: 0;
margin: 0;
margin-top: 0.1rem;
/* padding-top: 0.1rem; */
padding-left: 0.2rem;
}
.title_require::before {
position: absolute;
content: '*';
color: #ee0a24;
font-size: 0.3rem;
left: 0rem;
top: 50%;
transform: translateY(-50%);
}
.van-cell {
padding: 0;
}
.van-checkbox__label {
font-size: 0.28rem;
}
.van-checkbox__icon,
.van-radio__icon {
font-size: 0.34rem;
background-color: #fff;
}
.limit_date_wrapper .van-field__label {
width: 1.3rem;
}
.item-title {
font-size: 0.28rem;
}
.bottom_bar {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 78vw;
border: 1px solid;
}
.bottom_bar button {
float: right;
}
.van-icon-apps-o:before,
.van-icon-fire-o:before {
font-size: .32rem;
}
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="checklist-header">
<p>
1.不合格或不满足等选择“否”的检查项，需将问题进行拍照上传，并描述问题详情。<br>
2.检查人员对管辖范围内企业安全情况负责，需如实上报。
</p>
<h5>九小场所安全检查清单</h5>
</div>
<div class="checklist-container"> <div class="checklist-container">
<div> <div class="item_title">
{{ checkData[checkPageIndex].title }} {{ checkData[checkPageIndex].title }}
</div> </div>
<div v-for="(item, index) in checkData[checkPageIndex]['checkList']" :key="item.id" class="check-item"> <div v-for="(item, index) in checkData[checkPageIndex]['checkList']" :key="item.id" class="check-item">
<div class="item-header"> <div class="item-header">
<div class="item-number">{{ index + 1 }}</div> <!-- <div class="item-number">{{ index + 1 }}</div> -->
<div class="item-title">{{ item.title }}</div> <div class="item-title">{{ index + 1 }}.{{ item.title }}</div>
</div> </div>
<!-- 单选按钮组 --> <!-- 单选按钮组 -->
<van-radio-group v-model="item.selected" @change="handleSelectionChange(item)"> <van-radio-group v-model="item.selected" @change="handleSelectionChange(item)"
direction="horizontal">
<van-radio name="yes">是</van-radio> <van-radio name="yes">是</van-radio>
<van-radio name="no">否</van-radio> <van-radio name="no">否</van-radio>
<van-radio name="na">不涉及</van-radio> <van-radio name="na">不涉及</van-radio>
</van-radio-group> </van-radio-group>
<!-- 否选项扩展内容 --> <!-- 否选项扩展内容 -->
<div v-show="item.selected === 'no'" class="expand-section" style="width: 100vw;"> <div v-show="item.selected !== 'no'" class="expand-section">
<div> <div>
<!-- 子检查项 --> <!-- 子检查项 -->
<div class="sub-checkbox-group"> <div class="sub-checkbox-group">
...@@ -150,17 +310,14 @@ ...@@ -150,17 +310,14 @@
/> --> /> -->
<van-cell-group> <van-cell-group>
<van-cell> <p style="font-size:0.2rem" class="title_require">请输入隐患描述</p>
<div> <van-field v-model="item.description" type="textarea" rows="1"></van-field>
<van-field v-model="item.description" type="textarea" rows="2"
placeholder="请填写具体隐患情况" label="隐患描述"></van-field>
</div>
</van-cell>
</van-cell-group> </van-cell-group>
<!-- 照片上传 --> <!-- 照片上传 -->
<van-cell-group> <van-cell-group>
<van-cell>文件:<span style="color: red;">(格式png/jpg/jpeg)</span> <van-cell>*请上传隐患图片:<span style="color: red;">(格式png/jpg/jpeg)</span>
<div> <div>
<van-uploader style="width: 80px; height:80px;" v-model="item.photos" <van-uploader style="width: 80px; height:80px;" v-model="item.photos"
:max-count="3" :after-read="handleFileUpload" class="uploader-wrapper" /> :max-count="3" :after-read="handleFileUpload" class="uploader-wrapper" />
...@@ -178,8 +335,8 @@ ...@@ -178,8 +335,8 @@
<van-cell-group> <van-cell-group>
<van-cell> <van-cell>
<div> <div class="limit_date_wrapper">
<van-field label-align="right" readonly clickable label="整改期限" <van-field label-align="left" readonly clickable label="整改期限"
:value="`${item.deadlineDays}天 截至整改日期：${item.deadlineDate}`" :value="`${item.deadlineDays}天 截至整改日期：${item.deadlineDate}`"
@click="showDeadlinePicker = true; currentItem=item" /> @click="showDeadlinePicker = true; currentItem=item" />
</div> </div>
...@@ -189,14 +346,26 @@ ...@@ -189,14 +346,26 @@
</div> </div>
</div> </div>
</div> </div>
<div>
<van-button v-show="checkPageIndex<3" type="primary" size="small" <!-- <div>
@click="checkPageIndex++">下一页</van-button> <div><span class="title">检查人员</span><span class="content">xxxxxx</span></div>
<van-button>{{ notNullCount }}/{{totalItems}} {{noCount}}</van-button> <div><span class="title">检查人员</span><span class="content">xxxxxx</span></div>
<van-button type="info" size="small" </div> -->
@click="navTo1">跳转</van-button> <div class="bottom_bar">
<div style="display: inline-block;">
<van-icon name="apps-o" color="blue" />
<span
style="color: #545454;font-size: 0.28rem;margin-right: 1rem;margin-left: 0.2rem;">{{ notNullCount }}/{{totalItems}}</span>
<van-icon name="fire-o" color="#ee0a24" />
<span style="color: #545454;font-size: 0.28rem;margin-left: 0.2rem;">{{noCount}} 隐患</span>
</div>
<van-button type="info" size="small" @click="navTo1" v-show="checkPageIndex===3">完成检查</van-button>
<van-button v-show="checkPageIndex<3" type="info" size="small"
@click="checkPageIndex++">下一项</van-button>
</div> </div>
<!-- 整改天数选择器 --> <!-- 整改天数选择器 -->
<van-popup v-model="showDeadlinePicker" position="bottom"> <van-popup v-model="showDeadlinePicker" position="bottom">
...@@ -209,9 +378,6 @@ ...@@ -209,9 +378,6 @@
<script src="https://cdn.jsdelivr.net/npm/vant@2/lib/vant.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2/lib/vant.min.js"></script>
<script> <script>
const checkData = [{ const checkData = [{
id: 1, id: 1,
title: '消防安全检查', title: '消防安全检查',
...@@ -441,11 +607,11 @@ ...@@ -441,11 +607,11 @@
}, },
}, },
methods: { methods: {
navTo1(){ navTo1() {
lightAppJssdk.navigation.show({ lightAppJssdk.navigation.show({
url: '_shanghu_detail.html', url: '_shanghu_detail.html',
title: '高区应急扫描', title: '高区应急扫描',
isgoback: '0', isgoback: '0',
success: function(data) { success: function(data) {
//成功回调 //成功回调
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment