Skip to content

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

add: 检查列表、整改详情、隐患详情

parent f909fe2f
Hide whitespace changes
Inline Side-by-side
Showing with 1360 additions and 592 deletions
src/_check_list.css 0 → 100644
View file @ 6e63946c
/* 基础样式 */
html,
body {
background-color: #fff;
letter-spacing: .01rem;
}
/* 通用工具类 */
.pd-01rem {
padding-bottom: 0.1rem;
}
/* 表单相关 */
.formValue {
float: right;
}
.formSubmitBtnWrapper {
display: flex;
justify-content: center;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
.formSubmitBtnWrapper .van-button {
width: 4rem;
}
/* 框架样式覆盖修改 */
.checklist-container .van-cell__value {
overflow: unset;
background-color: #f5f6fa;
}
.checklist-container .van-cell:after {
border-bottom: none;
}
.checklist-container .van-radio-group--horizontal {
float: left;
}
.checklist-container .van-checkbox {
width: auto;
}
.checklist-container .van-checkbox__label,
.checklist-container .van-radio__label {
font-size: 0.28rem;
}
.checklist-container .van-checkbox__icon,
.checklist-container .van-radio__icon {
font-size: 0.34rem;
background-color: #fff;
}
.checklist-container .van-radio {
margin: .2rem 0 0.2rem 0.8rem;
}
.checklist-container .van-cell {
background: #f5f6fa;
margin-top: 0.2rem;
padding: 0;
}
/* 表单内的表项 背景色覆盖 */
.van-form {
margin-bottom: 1rem;
padding-left: .3rem;
}
.van-form .van-field__label{
width: 1.8rem;
}
.van-form .van-field__control{
text-align: right;
padding-right: .3rem;
}
.van-form .van-cell,
.van-form .van-cell__value {
background: #fff;
}
.yh_desc{
width: 6.2rem;
min-height: 0.68rem;
background: rgb(238, 238, 238);
border-radius: 0.04rem;
border: 0px solid rgb(191, 191, 191);
padding: .2rem;
font-size: 0.28rem;
font-weight: 500;
color: #545454;
}
.checklist-container .van-cell-group {
background-color: #f5f6fa;
}
.checklist-container textarea {
background-color: #fff !important;
}
.checklist-container .van-uploader__upload {
background-color: #fff;
}
.limit_date_wrapper .van-field__label {
width: 1.3rem;
}
.checklist-container .van-icon-apps-o:before,
.checklist-container .van-icon-fire-o:before {
font-size: 0.32rem;
}
/* 检查清单容器 */
.checklist-container {
/* padding: 12px; */
background: #fff;
overflow: hidden;
padding-bottom: 1rem;
}
/* 检查项 */
.check-item {
background: white;
float: left;
}
.item-header {
display: flex;
align-items: center;
margin: .3rem 0px .1rem .3rem;
}
.item-number {}
.item-title {
font-size: 0.28rem;
}
.item_title {
font-size: 0.3rem;
color: #1081E3;
font-weight: bold;
position: relative;
padding-left: 0.2rem;
margin-left: .2rem;
}
.item_title::before {
content: '';
display: block;
width: 0.05rem;
height: 0.32rem;
background-color: #1081E3;
position: absolute;
left: 0;
top: 0;
}
/* 展开部分 */
.expand-section {
width: calc(7.5rem - 0.6rem);
float: left;
background: #f5f6fa;
padding: 0.1rem 0.3rem;
}
/* 子复选框组 */
.sub-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
margin: .2rem 0 .3rem 0;
}
/* 上传器 */
.uploader-wrapper {
--van-uploader-size: 80px;
}
/* 截止日期选择器 */
.deadline-picker {
display: flex;
gap: 12px;
margin: 12px 0;
}
/* 检查清单头部 */
.checklist-header p {
background-color: rgb(25, 137, 250);
color: rgb(255, 255, 255);
font-size: 0.26rem;
padding: 0.2rem 0.3rem 0.2rem;
line-height: 0.39999rem;
margin: 0;
}
.checklist-header h5 {
font-size: 0.32rem;
text-align: center;
}
/* 必填标题 */
.title_require {
position: relative;
padding: 0;
margin: 0;
margin-top: 0.1rem;
padding-left: 0.2rem;
font-size: .28rem;
}
.title_require::before {
position: absolute;
content: '*';
color: #ee0a24;
font-size: inherit;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* 底部栏 */
.bottom_bar {
display: flex;
justify-content: space-between;
position: fixed;
align-items: center;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
width: 88vw;
/* border: 1px solid; */
background: #FFFFFF;
box-shadow: 2px -5px 21px 0px rgba(103, 103, 103, 0.14);
padding-top: 0.2rem;
padding-bottom: 0.2rem;
padding-left: 0.2rem;
padding-right: 0.2rem;
}
.bottom_bar>div {
display: grid;
grid-template-columns: auto auto .6fr;
padding-left: .2rem;
align-items: center;
gap: 0.2rem;
width: 100vw;
}
.bottom_bar>div>span {
font-weight: 500;
font-size: 0.28rem;
color: #545454;
display: inline-block;
/* width: 1.8rem; */
}
.bottom_bar>div>span:before {
display: inline-block;
width: 0.3rem;
height: 0.3rem;
content: '*';
color: #fff;
background-size: cover;
font-weight: 500;
margin-right: 0.1rem;
}
.bottom_bar>div>span:first-child:before {
background-image: url('../image/code/check_num.png');
}
.bottom_bar>div>span:nth-child(2):before {
background-image: url('../image/code/yh_num.png');
}
.bottom_bar button {
color: #fff;
}
.day_select {
border-color: rgb(191, 191, 191);
margin-right: 0.1rem;
width: 1rem;
padding-left: .2rem;
background-color: #fff;
}
\ No newline at end of file
src/_check_list.html
View file @ 6e63946c
...@@ -8,284 +8,14 @@ ...@@ -8,284 +8,14 @@
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover"> content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>消防安全检查清单</title> <title>消防安全检查清单</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script> <script type="text/javascript" src="../sdk/includeHead.js"></script>
<style> <link rel="stylesheet" href="_check_list.css" />
/* 基础样式 */
html,
body {
background-color: #fff;
letter-spacing: .01rem;
}
/* 通用工具类 */
.pd-01rem {
padding-bottom: 0.1rem;
}
/* 表单相关 */
.formValue {
float: right;
}
.formSubmitBtnWrapper {
display: flex;
justify-content: center;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
.formSubmitBtnWrapper .van-button {
width: 4rem;
}
/* 框架样式覆盖修改 */
.checklist-container .van-cell__value {
overflow: unset;
background-color: #f5f6fa;
}
.checklist-container .van-cell:after {
border-bottom: none;
}
.checklist-container .van-radio-group--horizontal {
float: left;
}
.checklist-container .van-checkbox {
width: auto;
}
.checklist-container .van-checkbox__label,
.checklist-container .van-radio__label {
font-size: 0.28rem;
}
.checklist-container .van-checkbox__icon,
.checklist-container .van-radio__icon {
font-size: 0.34rem;
background-color: #fff;
}
.checklist-container .van-radio {
margin: .2rem 0 0.2rem 0.8rem;
}
.checklist-container .van-cell {
background: #f5f6fa;
margin-top: 0.2rem;
padding: 0;
}
/* 表单内的表项 背景色覆盖 */
.van-form{
margin-bottom: 1rem;
padding-left: .3rem;
}
.van-form .van-cell,
.van-form .van-cell__value{
background: #fff;
}
.checklist-container .van-cell-group {
background-color: #f5f6fa;
}
.checklist-container textarea {
background-color: #fff !important;
}
.checklist-container .van-uploader__upload {
background-color: #fff;
}
.limit_date_wrapper .van-field__label {
width: 1.3rem;
}
.checklist-container .van-icon-apps-o:before,
.checklist-container .van-icon-fire-o:before {
font-size: 0.32rem;
}
/* 检查清单容器 */
.checklist-container {
/* padding: 12px; */
background: #fff;
overflow: hidden;
padding-bottom: 1rem;
}
/* 检查项 */
.check-item {
background: white;
float: left;
}
.item-header {
display: flex;
align-items: center;
margin: .3rem 0px .1rem .3rem;
}
.item-number {}
.item-title {
font-size: 0.28rem;
}
.item_title {
font-size: 0.3rem;
color: #1081E3;
font-weight: bold;
position: relative;
padding-left: 0.2rem;
}
.item_title::before {
content: '';
display: block;
width: 0.05rem;
height: 0.32rem;
background-color: #1081E3;
position: absolute;
left: 0;
top: 0;
}
/* 展开部分 */
.expand-section {
width: calc(7.5rem - 0.6rem);
float: left;
background: #f5f6fa;
padding: 0.1rem 0.3rem;
}
/* 子复选框组 */
.sub-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
margin: .2rem 0 .3rem 0;
}
/* 上传器 */
.uploader-wrapper {
--van-uploader-size: 80px;
}
/* 截止日期选择器 */
.deadline-picker {
display: flex;
gap: 12px;
margin: 12px 0;
}
/* 检查清单头部 */
.checklist-header p {
background-color: rgb(25, 137, 250);
color: rgb(255, 255, 255);
font-size: 0.26rem;
padding: 0.2rem 0.3rem 0.2rem;
line-height: 0.39999rem;
margin: 0;
}
.checklist-header h5 {
font-size: 0.32rem;
text-align: center;
}
/* 必填标题 */
.title_require {
position: relative;
padding: 0;
margin: 0;
margin-top: 0.1rem;
padding-left: 0.2rem;
font-size: .28rem;
}
.title_require::before {
position: absolute;
content: '*';
color: #ee0a24;
font-size: inherit;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* 底部栏 */
.bottom_bar {
display: flex;
justify-content: space-between;
position: fixed;
align-items: center;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
width: 88vw;
/* border: 1px solid; */
background: #FFFFFF;
box-shadow: 2px -5px 21px 0px rgba(103, 103, 103, 0.14);
padding-top: 0.2rem;
padding-bottom: 0.2rem;
padding-left: 0.2rem;
padding-right: 0.2rem;
}
.bottom_bar > div{
display: grid;
grid-template-columns: auto auto .6fr;
padding-left: .2rem;
align-items: center;
gap: 0.2rem;
width: 100vw;
}
.bottom_bar > div > span{
font-weight: 500;
font-size: 0.28rem;
color: #545454;
display: inline-block;
/* width: 1.8rem; */
}
.bottom_bar > div > span:before{
display: inline-block;
width: 0.3rem;
height: 0.3rem;
content: '*';
color: #fff;
background-size: cover;
font-weight: 500;
margin-right: 0.1rem;
}
.bottom_bar > div > span:first-child:before{
background-image: url('../image/code/check_num.png');
}
.bottom_bar > div > span:nth-child(2):before{
background-image: url('../image/code/yh_num.png');
}
.bottom_bar button {
color: #fff;
}
.day_select{
border-color: rgb(191, 191, 191);
margin-right: 0.1rem;
width: 1rem;
padding-left: .2rem;
background-color: #fff;
}
</style>
</head> </head>
<body> <body>
<!-- 原 HTML 主体内容保持不变 --> <!-- 原 HTML 主体内容保持不变 -->
<div id="app"> <div id="app">
<div class="checklist-header"> <div class="checklist-header">
<p> <p v-if="flag=='ADD'">
1.不合格或不满足等选择“否”的检查项，需将问题进行拍照上传，并描述问题详情。<br> 1.不合格或不满足等选择“否”的检查项，需将问题进行拍照上传，并描述问题详情。<br>
2.检查人员对管辖范围内企业安全情况负责，需如实上报。 2.检查人员对管辖范围内企业安全情况负责，需如实上报。
</p> </p>
...@@ -303,374 +33,160 @@ ...@@ -303,374 +33,160 @@
<!-- 单选按钮组 --> <!-- 单选按钮组 -->
<van-radio-group v-model="item.selected" @change="handleSelectionChange(item)" <van-radio-group v-model="item.selected" @change="handleSelectionChange(item)"
direction="horizontal"> :disabled="flag!=='ADD'" 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"> <div v-show="item.selected === 'no'" class="expand-section">
<div> <div>
<!-- 子检查项 --> <!-- 子检查项 -->
<div class="sub-checkbox-group"> <div class="sub-checkbox-group" v-if="flag=='ADD'">
<van-checkbox v-for="(subItem, subIndex) in item.subChecks" :key="subIndex" <van-checkbox v-for="(subItem, subIndex) in item.subChecks" :key="subIndex"
v-model="subItem.checked" shape="square"> v-model="subItem.checked" shape="square">
隐患点{{ subIndex + 1 }} 隐患点{{ subIndex + 1 }}
</van-checkbox> </van-checkbox>
</div> </div>
<!-- 隐患描述 -->
<van-cell-group> <!-- 隐患描述-新增情况 -->
<van-cell-group v-if="flag=='ADD'">
<p class="title_require">请输入隐患描述</p> <p class="title_require">请输入隐患描述</p>
<van-field v-model="item.description" type="textarea" rows="1"></van-field> <van-field v-model="item.description" type="textarea" rows="1"></van-field>
</van-cell-group> </van-cell-group>
<!-- 隐患描述-非新增情况 -->
<van-cell-group v-if="flag!=='ADD'">
<p class="title_require">请输入隐患描述</p>
<p class="yh_desc">{{item.description||'未配置安全出口指示标志'}}</p>
</van-cell-group>
<!-- 照片上传 --> <!-- 照片上传 -->
<van-cell-group> <van-cell-group v-if="flag=='ADD'">
<van-cell><span class="title_require">请上传隐患图片:</span><span style="color: red;">(格式png/jpg/jpeg,最多4张)</span> <van-cell><span class="title_require">请上传隐患图片:</span><span
style="color: red;">(格式png/jpg/jpeg,最多4张)</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="4" :after-read="handleFileUpload" class="uploader-wrapper" />
</div>
</van-cell>
</van-cell-group>
<van-cell-group>
<van-cell v-if="flag==='JC_XQ' || flag==='YH_XQ' || flag==='ZG_XQ' ">
<span class="">隐患图片:</span>
<div>
<img src="https://dummyimage.com/90x90 " alt="" srcset="" />
<img src="https://dummyimage.com/90x90 " alt="" srcset="" />
<img src="https://dummyimage.com/90x90 " alt="" srcset="" />
<img src="https://dummyimage.com/90x90 " alt="" srcset="" />
</div> </div>
</van-cell> </van-cell>
<van-cell v-if="flag==='JC_XQ' || flag==='YH_XQ'"><span class="">整改情况:</span>
<div>
<img src="https://dummyimage.com/90x90 " alt="" srcset="" />
<img src="https://dummyimage.com/90x90 " alt="" srcset="" />
<img src="https://dummyimage.com/90x90 " alt="" srcset="" />
<img src="https://dummyimage.com/90x90 " alt="" srcset="" />
</div>
</van-cell>
</van-cell-group>
<van-cell-group v-if="flag=='ZG_XQ'">
<van-cell><span class="title_require">请上传整改图片:</span><span
style="color: red;">(格式png/jpg/jpeg,最多4张)</span>
<!-- <div>
<van-uploader style="width: 80px; height:80px;" v-model="item.photos" multiple
:max-count="4" :after-read="handleFileUpload" class="uploader-wrapper" />
</div> -->
<van-uploader v-model="item.photos" multiple :max-count="2" />
</van-cell>
</van-cell-group> </van-cell-group>
<!-- 整改期限 --> <!-- 整改期限 -->
<van-cell-group> <van-cell-group v-if="flag=='ADD'">
<van-cell> <van-cell>
<div class="limit_date_wrapper"> <div class="limit_date_wrapper">
<span class="title_require">整改期限:</span> <span class="title_require">整改期限:</span>
<select class="day_select" name="" v-model="item.deadlineDays" @change="handleDeadlineConfirm($event, item)"> <select class="day_select" name="" v-model="item.deadlineDays"
@change="handleDeadlineConfirm($event, item)">
<option value="1">1</option> <option value="1">1</option>
<option value="3">3</option> <option value="3">3</option>
<option value="5">5</option> <option value="5">5</option>
<option value="7">7</option> <option value="7">7</option>
</select> </select>
<span> 截止整改日期: <b style="color:#148ef7">{{item.deadlineDate}}</b></span> <span> 截止整改日期: <b style="color:#148ef7">{{item.deadlineDate}}</b></span>
</div>
</van-cell>
</van-cell-group>
<van-cell-group v-if="flag!=='ADD'">
<van-cell>
<div class="limit_date_wrapper">
<span>整改期限: {{checkDate}}</span>
</div> </div>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</div> </div>
</div> </div>
</div> </div>
<van-form > <van-form>
<van-cell> <van-cell>
<van-field <van-field label="检查人员" v-model="checkPerson" readonly />
label="检查人员" </van-cell>
v-model="checkPerson" <van-cell>
readonly <van-field label="检查日期" v-model="checkDate" />
/> </van-cell>
</van-cell> <van-cell v-if="flag==='YH_XQ'||flag==='ZG_XQ'">
<van-cell> <van-field label="整改截止日期" v-model="checkDate" />
<van-field </van-cell>
label="检查日期" <van-cell v-if="flag==='YH_XQ'">
v-model="checkDate" <van-field label="审核日期" v-model="checkDate" />
/> </van-cell>
</van-cell> <van-cell v-if="flag==='YH_XQ'">
</van-form> <van-field label="审核记录" v-model="checkDate" />
<!-- 底部栏 --> </van-cell>
<div class="bottom_bar"> </van-form>
<!-- 隐患详情底部栏 -->
<!-- <div class="bottom_bar">
<div>
<van-button type="primary" size="small" @click="navTo1" >上报行业主管部门</van-button>
<van-button type="info" size="small" @click="navTo1" >限期3天整改</van-button>
</div>
</div> -->
<div class="bottom_bar" v-if="flag=='ZG_XQ'">
<div style="display: flex;justify-content: center;gap: 1rem;">
<van-button type="info" size="small" @click="navTo1" style="width:2rem" >提交整改</van-button>
</div>
</div>
<div class="bottom_bar" v-if="flag=='YH_XQ'">
<div style="display: flex;justify-content: center;gap: 1rem;">
<van-button type="danger" size="small" @click="navTo1" style="width:2rem" >拒绝</van-button>
<van-button type="info" size="small" @click="navTo1" style="width:2rem" >通过</van-button>
</div>
</div>
<!-- 新增底部栏 -->
<div class="bottom_bar" v-if="flag=='ADD' || flag=='JC_XQ'">
<div> <div>
<span class="check_num">{{ notNullCount }}/{{totalItems}}</span> <span class="check_num">{{ notNullCount }}/{{totalItems}}</span>
<span class="yh_num">{{noCount}} 隐患</span> <span class="yh_num">{{noCount}} 隐患</span>
<van-button type="info" size="small" @click="navTo1" v-show="checkPageIndex===3">完成检查</van-button> <van-button type="info" size="small" @click="navTo1"
v-show="checkPageIndex===3&&flag=='ADD'">完成检查</van-button>
<van-button v-show="checkPageIndex<3" type="info" size="small" <van-button v-show="checkPageIndex<3" type="info" size="small"
@click="checkPageIndex++">下一项</van-button> @click="checkPageIndex++">下一项</van-button>
</div> </div>
</div> </div>
<!-- <div class="bottom_bar">
<div style="display: inline-block; margin-bottom: 0.2rem;">
<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> </div>
<script>
window.onload = function() {
// 原 JavaScript 代码保持不变
const checkData = [{
id: 1,
title: '消防安全检查',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}, {
id: 1,
title: '检查项目 2',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
{
id: 2,
title: '用电安全检查',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
{
id: 3,
title: '用电安全检查2',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
{
id: 4,
title: '用电安全检查4',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
];
function countSelectedNo(result) {
// 获取 checkList 中 selected 为 'no' 的对象个数
return result.reduce((total, category) => {
return total + category.checkList.filter(item => item.selected === 'no').length;
}, 0);
}
function getTotalCheckListItems(result) {
// 获取所有 checkList 子元素的总数
return result.reduce((total, category) => {
console.log(category, 'category');
return total + category.checkList.length;
}, 0);
}
function countSelectedNotNull(result) {
// 获取 checkList 中 selected 不为 null 的个数
return result.reduce((total, category) => {
return total + category.checkList.filter(item => item.selected !== null).length;
}, 0);
}
// 统计各个状态数量
const noCount = countSelectedNo(checkData); // selected=no 的个数
const totalItems = getTotalCheckListItems(checkData); // checkList 子元素总数
const notNullCount = countSelectedNotNull(checkData); // selected 不为 null 的个数
// 初始化检查项数据结构
function createCheckItem(id) {
return {
id: id,
title: `检查项目 ${id}`,
selected: null,
subChecks: Array.from({
length: 10
}, (_, i) => ({
id: i + 1,
checked: false
})),
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
};
}
new Vue({
el: '#app',
data: {
checkPerson: 'xxxx李先生',
checkDate: '2025-3-29',
showDeadlinePicker: false,
deadlineOptions: ['1', '3', '5', '7'],
currentEditingItem: null,
checkList: Array.from({
length: 40
}, (_, i) => createCheckItem(i + 1)),
checkData, // 提交给后端，图片使用vant结构，base64，后端处理，不走爱山东中台。（数据量大！）
checkPageIndex: 0,
currentItem: null,
noCount,
totalItems,
notNullCount
},
watch: {
checkData: {
handler(newVal) {
const snapshot = JSON.parse(JSON.stringify(newVal));
console.log('全量变化:', snapshot);
this.noCount = countSelectedNo(newVal); // selected=no 的个数
this.totalItems = getTotalCheckListItems(newVal); // checkList 子元素总数
this.notNullCount = countSelectedNotNull(newVal); // selected 不为 null 的个数
},
deep: true
}
},
methods: {
navTo1() {
lightAppJssdk.navigation.show({
url: '_shanghu_detail.html',
title: '高区应急扫描',
isgoback: '0',
success: function(data) {
// 成功回调
},
fail: function(data) {
// 错误返回
}
});
},
// 处理单选变化
handleSelectionChange(item) {
if (item.selected !== 'no') {
this.$set(item, 'description', '');
this.$set(item, 'photos', []);
this.$set(item, 'deadlineDays', '');
this.$set(item, 'deadlineDate', '');
}
},
// 文件上传处理
handleFileUpload(file) {
console.log('上传文件:', file);
// 此处可添加实际文件上传逻辑
},
// 整改天数确认
handleDeadlineConfirm(event, item) {
console.log('select选择' , event.target.value)
const value = event.target.value;
if (value) {
const days = parseInt(value);
item.deadlineDays = days;
const deadlineDate = new Date();
deadlineDate.setDate(deadlineDate.getDate() + days);
item.deadlineDate = this.formatDate(deadlineDate);
}
// this.showDeadlinePicker = false;
},
// 日期格式化
formatDate(date) {
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}
}
});
}
</script>
</div> </div>
</body> </body>
......
src/_check_list.js 0 → 100644
View file @ 6e63946c
window.onload = function() {
// 原 JavaScript 代码保持不变
const checkData = [{
id: 1,
title: '消防安全检查',
checkList: [{
id: 1,
title: '检查项目 1',
selected: 'no',
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}, {
id: 1,
title: '检查项目 2',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
{
id: 2,
title: '用电安全检查',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
{
id: 3,
title: '用电安全检查2',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
{
id: 4,
title: '用电安全检查4',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
];
function countSelectedNo(result) {
// 获取 checkList 中 selected 为 'no' 的对象个数
return result.reduce((total, category) => {
return total + category.checkList.filter(item => item.selected === 'no').length;
}, 0);
}
function getTotalCheckListItems(result) {
// 获取所有 checkList 子元素的总数
return result.reduce((total, category) => {
console.log(category, 'category');
return total + category.checkList.length;
}, 0);
}
function countSelectedNotNull(result) {
// 获取 checkList 中 selected 不为 null 的个数
return result.reduce((total, category) => {
return total + category.checkList.filter(item => item.selected !== null).length;
}, 0);
}
// 统计各个状态数量
const noCount = countSelectedNo(checkData); // selected=no 的个数
const totalItems = getTotalCheckListItems(checkData); // checkList 子元素总数
const notNullCount = countSelectedNotNull(checkData); // selected 不为 null 的个数
// 初始化检查项数据结构
function createCheckItem(id) {
return {
id: id,
title: `检查项目 ${id}`,
selected: null,
subChecks: Array.from({
length: 10
}, (_, i) => ({
id: i + 1,
checked: false
})),
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
};
}
new Vue({
el: '#app',
data: {
flag: 'ZG_XQ', // 值为ADD新增、JC_XQ检查详情、ZG_XQ整改详情、YH_XQ隐患详情
// flag: 'ADD',
// flag: 'JC_XQ',
// flag: 'YH_XQ',
checkPerson: 'xxxx李先生',
checkDate: '2025-3-29',
showDeadlinePicker: false,
deadlineOptions: ['1', '3', '5', '7'],
currentEditingItem: null,
checkList: Array.from({
length: 40
}, (_, i) => createCheckItem(i + 1)),
checkData, // 提交给后端，图片使用vant结构，base64，后端处理，不走爱山东中台。（数据量大！）
checkPageIndex: 0,
currentItem: null,
noCount,
totalItems,
notNullCount
},
watch: {
checkData: {
handler(newVal) {
const snapshot = JSON.parse(JSON.stringify(newVal));
console.log('全量变化:', snapshot);
this.noCount = countSelectedNo(newVal); // selected=no 的个数
this.totalItems = getTotalCheckListItems(newVal); // checkList 子元素总数
this.notNullCount = countSelectedNotNull(newVal); // selected 不为 null 的个数
},
deep: true
}
},
methods: {
navTo1() {
lightAppJssdk.navigation.show({
url: '_shanghu_detail.html',
title: '高区应急扫描',
isgoback: '0',
success: function(data) {
// 成功回调
},
fail: function(data) {
// 错误返回
}
});
},
// 处理单选变化
handleSelectionChange(item) {
if (item.selected !== 'no') {
this.$set(item, 'description', '');
this.$set(item, 'photos', []);
this.$set(item, 'deadlineDays', '');
this.$set(item, 'deadlineDate', '');
}
},
// 文件上传处理
handleFileUpload(file) {
console.log('上传文件:', file);
// 此处可添加实际文件上传逻辑
},
// 整改天数确认
handleDeadlineConfirm(event, item) {
console.log('select选择', event.target.value)
const value = event.target.value;
if (value) {
const days = parseInt(value);
item.deadlineDays = days;
const deadlineDate = new Date();
deadlineDate.setDate(deadlineDate.getDate() + days);
item.deadlineDate = this.formatDate(deadlineDate);
}
// this.showDeadlinePicker = false;
},
// 日期格式化
formatDate(date) {
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}
}
});
}
\ No newline at end of file
src/_check_list_detail.html 0 → 100644
View file @ 6e63946c
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>消防安全检查清单</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
/* 基础样式 */
html,
body {
background-color: #fff;
letter-spacing: .01rem;
}
/* 通用工具类 */
.pd-01rem {
padding-bottom: 0.1rem;
}
/* 表单相关 */
.formValue {
float: right;
}
.formSubmitBtnWrapper {
display: flex;
justify-content: center;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
.formSubmitBtnWrapper .van-button {
width: 4rem;
}
/* 框架样式覆盖修改 */
.checklist-container .van-cell__value {
overflow: unset;
background-color: #f5f6fa;
}
.checklist-container .van-cell:after {
border-bottom: none;
}
.checklist-container .van-radio-group--horizontal {
float: left;
}
.checklist-container .van-checkbox {
width: auto;
}
.checklist-container .van-checkbox__label,
.checklist-container .van-radio__label {
font-size: 0.28rem;
}
.checklist-container .van-checkbox__icon,
.checklist-container .van-radio__icon {
font-size: 0.34rem;
background-color: #fff;
}
.checklist-container .van-radio {
margin: .2rem 0 0.2rem 0.8rem;
}
.checklist-container .van-cell {
background: #f5f6fa;
margin-top: 0.2rem;
padding: 0;
}
/* 表单内的表项 背景色覆盖 */
.van-form{
margin-bottom: 1rem;
padding-left: .3rem;
}
.van-form .van-cell,
.van-form .van-cell__value{
background: #fff;
}
.checklist-container .van-cell-group {
background-color: #f5f6fa;
}
.checklist-container textarea {
background-color: #fff !important;
}
.checklist-container .van-uploader__upload {
background-color: #fff;
}
.limit_date_wrapper .van-field__label {
width: 1.3rem;
}
.checklist-container .van-icon-apps-o:before,
.checklist-container .van-icon-fire-o:before {
font-size: 0.32rem;
}
/* 检查清单容器 */
.checklist-container {
/* padding: 12px; */
background: #fff;
overflow: hidden;
padding-bottom: 1rem;
}
/* 检查项 */
.check-item {
background: white;
float: left;
}
.item-header {
display: flex;
align-items: center;
margin: .3rem 0px .1rem .3rem;
}
.item-number {}
.item-title {
font-size: 0.28rem;
}
.item_title {
font-size: 0.3rem;
color: #1081E3;
font-weight: bold;
position: relative;
padding-left: 0.2rem;
}
.item_title::before {
content: '';
display: block;
width: 0.05rem;
height: 0.32rem;
background-color: #1081E3;
position: absolute;
left: 0;
top: 0;
}
/* 展开部分 */
.expand-section {
width: calc(7.5rem - 0.6rem);
float: left;
background: #f5f6fa;
padding: 0.1rem 0.3rem;
}
/* 子复选框组 */
.sub-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
margin: .2rem 0 .3rem 0;
}
/* 上传器 */
.uploader-wrapper {
--van-uploader-size: 80px;
}
/* 截止日期选择器 */
.deadline-picker {
display: flex;
gap: 12px;
margin: 12px 0;
}
/* 检查清单头部 */
.checklist-header p {
background-color: rgb(25, 137, 250);
color: rgb(255, 255, 255);
font-size: 0.26rem;
padding: 0.2rem 0.3rem 0.2rem;
line-height: 0.39999rem;
margin: 0;
}
.checklist-header h5 {
font-size: 0.32rem;
text-align: center;
}
/* 必填标题 */
.title_require {
position: relative;
padding: 0;
margin: 0;
margin-top: 0.1rem;
padding-left: 0.2rem;
font-size: .28rem;
}
.title_require::before {
position: absolute;
content: '*';
color: #ee0a24;
font-size: inherit;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* 底部栏 */
.bottom_bar {
display: flex;
justify-content: space-between;
position: fixed;
align-items: center;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
width: 88vw;
/* border: 1px solid; */
background: #FFFFFF;
box-shadow: 2px -5px 21px 0px rgba(103, 103, 103, 0.14);
padding-top: 0.2rem;
padding-bottom: 0.2rem;
padding-left: 0.2rem;
padding-right: 0.2rem;
}
.bottom_bar > div{
display: grid;
grid-template-columns: auto auto .6fr;
padding-left: .2rem;
align-items: center;
gap: 0.2rem;
width: 100vw;
}
.bottom_bar > div > span{
font-weight: 500;
font-size: 0.28rem;
color: #545454;
display: inline-block;
/* width: 1.8rem; */
}
.bottom_bar > div > span:before{
display: inline-block;
width: 0.3rem;
height: 0.3rem;
content: '*';
color: #fff;
background-size: cover;
font-weight: 500;
margin-right: 0.1rem;
}
.bottom_bar > div > span:first-child:before{
background-image: url('../image/code/check_num.png');
}
.bottom_bar > div > span:nth-child(2):before{
background-image: url('../image/code/yh_num.png');
}
.bottom_bar button {
color: #fff;
}
.day_select{
border-color: rgb(191, 191, 191);
margin-right: 0.1rem;
width: 1rem;
padding-left: .2rem;
background-color: #fff;
}
</style>
</head>
<body>
<!-- 原 HTML 主体内容保持不变 -->
<div id="app">
<div class="checklist-header">
<p>
1.不合格或不满足等选择“否”的检查项，需将问题进行拍照上传，并描述问题详情。<br>
2.检查人员对管辖范围内企业安全情况负责，需如实上报。
</p>
<h5>九小场所安全检查清单</h5>
</div>
<div class="checklist-container">
<div class="item_title">
{{ checkData[checkPageIndex].title }}
</div>
<div v-for="(item, index) in checkData[checkPageIndex]['checkList']" :key="item.id" class="check-item">
<div class="item-header">
<!-- <div class="item-number">{{ index + 1 }}</div> -->
<div class="item-title">{{ index + 1 }}.{{ item.title }}</div>
</div>
<!-- 单选按钮组 -->
<van-radio-group v-model="item.selected" @change="handleSelectionChange(item)"
direction="horizontal">
<van-radio name="yes">是</van-radio>
<van-radio name="no">否</van-radio>
<van-radio name="na">不涉及</van-radio>
</van-radio-group>
<!-- 否选项扩展内容 -->
<div v-show="item.selected !== 'no'" class="expand-section">
<div>
<!-- 子检查项 -->
<div class="sub-checkbox-group">
<van-checkbox v-for="(subItem, subIndex) in item.subChecks" :key="subIndex"
v-model="subItem.checked" shape="square">
隐患点{{ subIndex + 1 }}
</van-checkbox>
</div>
<!-- 隐患描述 -->
<van-cell-group>
<p class="title_require">请输入隐患描述</p>
<van-field v-model="item.description" type="textarea" rows="1"></van-field>
</van-cell-group>
<!-- 照片上传 -->
<van-cell-group>
<van-cell><span class="title_require">请上传隐患图片:</span><span style="color: red;">(格式png/jpg/jpeg,最多4张)</span>
<div>
<van-uploader style="width: 80px; height:80px;" v-model="item.photos"
:max-count="3" :after-read="handleFileUpload" class="uploader-wrapper" />
</div>
</van-cell>
</van-cell-group>
<!-- 整改期限 -->
<van-cell-group>
<van-cell>
<div class="limit_date_wrapper">
<span class="title_require">整改期限:</span>
<select class="day_select" name="" v-model="item.deadlineDays" @change="handleDeadlineConfirm($event, item)">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
<span> 截止整改日期: <b style="color:#148ef7">{{item.deadlineDate}}</b></span>
</div>
</van-cell>
</van-cell-group>
</div>
</div>
</div>
<van-form >
<van-cell>
<van-field
label="检查人员"
v-model="checkPerson"
readonly
/>
</van-cell>
<van-cell>
<van-field
label="检查日期"
v-model="checkDate"
/>
</van-cell>
</van-form>
<!-- 底部栏 -->
<div class="bottom_bar">
<div>
<span class="check_num">{{ notNullCount }}/{{totalItems}}</span>
<span class="yh_num">{{noCount}} 隐患</span>
<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>
<!-- <div class="bottom_bar">
<div style="display: inline-block; margin-bottom: 0.2rem;">
<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>
<script>
window.onload = function() {
// 原 JavaScript 代码保持不变
const checkData = [{
id: 1,
title: '消防安全检查',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}, {
id: 1,
title: '检查项目 2',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
{
id: 2,
title: '用电安全检查',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
{
id: 3,
title: '用电安全检查2',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
{
id: 4,
title: '用电安全检查4',
checkList: [{
id: 1,
title: '检查项目 1',
selected: null,
subChecks: [{
id: 1,
checked: false
},
{
id: 2,
checked: false
},
{
id: 3,
checked: false
},
{
id: 4,
checked: false
}
],
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
}],
},
];
function countSelectedNo(result) {
// 获取 checkList 中 selected 为 'no' 的对象个数
return result.reduce((total, category) => {
return total + category.checkList.filter(item => item.selected === 'no').length;
}, 0);
}
function getTotalCheckListItems(result) {
// 获取所有 checkList 子元素的总数
return result.reduce((total, category) => {
console.log(category, 'category');
return total + category.checkList.length;
}, 0);
}
function countSelectedNotNull(result) {
// 获取 checkList 中 selected 不为 null 的个数
return result.reduce((total, category) => {
return total + category.checkList.filter(item => item.selected !== null).length;
}, 0);
}
// 统计各个状态数量
const noCount = countSelectedNo(checkData); // selected=no 的个数
const totalItems = getTotalCheckListItems(checkData); // checkList 子元素总数
const notNullCount = countSelectedNotNull(checkData); // selected 不为 null 的个数
// 初始化检查项数据结构
function createCheckItem(id) {
return {
id: id,
title: `检查项目 ${id}`,
selected: null,
subChecks: Array.from({
length: 10
}, (_, i) => ({
id: i + 1,
checked: false
})),
description: '',
photos: [],
deadlineDays: '',
deadlineDate: ''
};
}
new Vue({
el: '#app',
data: {
checkPerson: 'xxxx李先生',
checkDate: '2025-3-29',
showDeadlinePicker: false,
deadlineOptions: ['1', '3', '5', '7'],
currentEditingItem: null,
checkList: Array.from({
length: 40
}, (_, i) => createCheckItem(i + 1)),
checkData, // 提交给后端，图片使用vant结构，base64，后端处理，不走爱山东中台。（数据量大！）
checkPageIndex: 0,
currentItem: null,
noCount,
totalItems,
notNullCount
},
watch: {
checkData: {
handler(newVal) {
const snapshot = JSON.parse(JSON.stringify(newVal));
console.log('全量变化:', snapshot);
this.noCount = countSelectedNo(newVal); // selected=no 的个数
this.totalItems = getTotalCheckListItems(newVal); // checkList 子元素总数
this.notNullCount = countSelectedNotNull(newVal); // selected 不为 null 的个数
},
deep: true
}
},
methods: {
navTo1() {
lightAppJssdk.navigation.show({
url: '_shanghu_detail.html',
title: '高区应急扫描',
isgoback: '0',
success: function(data) {
// 成功回调
},
fail: function(data) {
// 错误返回
}
});
},
// 处理单选变化
handleSelectionChange(item) {
if (item.selected !== 'no') {
this.$set(item, 'description', '');
this.$set(item, 'photos', []);
this.$set(item, 'deadlineDays', '');
this.$set(item, 'deadlineDate', '');
}
},
// 文件上传处理
handleFileUpload(file) {
console.log('上传文件:', file);
// 此处可添加实际文件上传逻辑
},
// 整改天数确认
handleDeadlineConfirm(event, item) {
console.log('select选择' , event.target.value)
const value = event.target.value;
if (value) {
const days = parseInt(value);
item.deadlineDays = days;
const deadlineDate = new Date();
deadlineDate.setDate(deadlineDate.getDate() + days);
item.deadlineDate = this.formatDate(deadlineDate);
}
// this.showDeadlinePicker = false;
},
// 日期格式化
formatDate(date) {
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}
}
});
}
</script>
</div>
</body>
</html>
\ No newline at end of file
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