Skip to content

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

Merge branch 'zhenggai' into gaoqucodecheck

parents 4301acf2 8457349d
Hide whitespace changes
Inline Side-by-side
Showing with 787 additions and 14 deletions
src/_check_info.css
View file @ 271dd0e5
...@@ -256,9 +256,11 @@ body { ...@@ -256,9 +256,11 @@ body {
} }
.bottom_bar > div { .bottom_bar > div {
display: grid; /* display: grid;
grid-template-columns: auto auto 0.6fr; grid-template-columns: auto auto 0.6fr;*/
padding-left: 0.2rem; display: flex;
justify-content: space-around;
padding-left: 0.2rem;
align-items: center; align-items: center;
gap: 0.2rem; gap: 0.2rem;
width: 100vw; width: 100vw;
...@@ -302,3 +304,152 @@ body { ...@@ -302,3 +304,152 @@ body {
padding-left: 0.2rem; padding-left: 0.2rem;
background-color: #fff; background-color: #fff;
} }
.textareaEle{
border: 0.01rem solid #d8d8d8;
border-radius: 2px;
font-size: .28rem;
width: 95%;
padding: .15rem;
}
.content h5{
margin-top: 0.3rem;
margin-bottom: 0.3rem;
font-family: PingFang SC;
}
.footer-bar{
display: flex; justify-content: space-around;
margin-top: .5rem;
}
.footer-bar .van-button--info{
width:2rem;
}
/* 隐患整改模块 */
.rectification-module {
padding: 0.3rem; /* 上下左右内边距30px */
background: #fff;
margin-bottom: 0.2rem; /* 底部边距20px */
}
.module-header {
display: flex;
align-items: center;
gap: 0.15rem; /* 图标与标题间距15px */
margin-bottom: 0.3rem; /* 模块标题与内容间距30px */
}
.module-icon {
width: 0.4rem; /* 图标宽度40px */
height: 0.4rem; /* 图标高度40px */
}
.module-title {
font-size: 0.32rem; /* 标题字体32px */
font-weight: bold;
color: #333;
}
.timeline-list {
padding-left: 0.3rem; /* 时间线左侧内边距30px */
}
.timeline-item {
display: flex;
margin-bottom: 0.4rem; /* 时间线项间距40px */
}
.timeline-marker {
position: relative;
width: 0.4rem; /* 左侧标记区域宽度40px */
margin-right: 0.2rem; /* 标记与内容间距20px */
}
.marker-dot {
width: 0.2rem; /* 时间点直径20px */
height: 0.2rem;
background: #1989fa;
border-radius: 50%;
position: absolute;
left: 0;
top: 0.05rem; /* 时间点垂直偏移5px */
}
.marker-line {
width: 0.02rem; /* 时间线宽度2px */
height: 100%;
background: #e5e7eb;
margin-left: 0.09rem; /* 时间线水平居中 */
margin-top: 0.25rem; /* 时间线顶部偏移25px */
}
.timeline-content {
flex: 1;
}
.rectification-date {
color: #666;
font-size: 0.28rem; /* 日期字体28px */
margin-bottom: 0.15rem; /* 日期与图片间距15px */
}
.rectification-images {
display: flex;
gap: 0.2rem; /* 图片间距20px */
margin-bottom: 0.2rem; /* 图片与状态容器间距20px */
}
.rect-image {
width: 1.2rem; /* 图片宽度120px */
height: 1.2rem; /* 图片高度120px */
object-fit: cover;
border-radius: 0.08rem; /* 图片圆角8px */
}
.status-container {
border-radius: 0.08rem; /* 状态容器圆角8px */
padding: 0.2rem; /* 状态容器内边距20px */
}
/* 审批拒绝状态 */
.reject-status {
background: #fef2f2;
border: 0.02rem solid #fee2e2; /* 边框宽度2px */
}
.reject-status .status-tag {
background: #ef4444;
color: #fff;
font-size: 0.24rem; /* 标签字体24px */
padding: 0.04rem 0.12rem; /* 标签内边距4px 12px */
border-radius: 0.04rem; /* 标签圆角4px */
}
/* 待审批状态 */
.pending-status {
border: 0.02rem solid #fcd34d; /* 边框宽度2px */
background: #fffbeb;
display: flex;
justify-content: flex-end;
}
.pending-status .status-tag {
color: #f59e0b;
font-size: 0.24rem; /* 标签字体24px */
}
/* 审批通过状态 */
.approve-status {
display: flex;
justify-content: space-between;
align-items: center;
background: #f0f9ff;
border: 0.02rem solid #e0f2fe; /* 边框宽度2px */
}
.approve-status .status-tag {
color: #0ea5e9;
font-size: 0.24rem; /* 标签字体24px */
font-weight: bold;
}
\ No newline at end of file
src/_check_info.html
View file @ 271dd0e5
...@@ -244,13 +244,208 @@ ...@@ -244,13 +244,208 @@
</div> </div>
</van-form> </van-form>
<!-- 新增隐患整改模块 -->
<div class="rectification-module">
<!-- 模块标题 -->
<div class="module-header">
<img src="../assets/rectification-icon.png" alt="整改图标" class="module-icon">
<h4 class="module-title">隐患整改</h4>
</div>
<!-- 时间线进度列表 -->
<div class="timeline-list">
<!-- 遍历整改记录 -->
<div
v-for="(record, index) in rectificationRecords"
:key="index"
class="timeline-item"
>
<!-- 时间线左侧标记（点+线） -->
<div class="timeline-marker">
<div class="marker-dot"></div>
<div class="marker-line" v-if="index !== rectificationRecords.length - 1"></div>
</div>
<!-- 时间线内容 -->
<div class="timeline-content">
<!-- 整改日期 -->
<p class="rectification-date">{{ record.rectificationDate }}</p>
<!-- 整改图片 -->
<div class="rectification-images">
<img
v-for="(img, i) in record.images"
:key="i"
:src="img"
alt="整改图"
@click="showImage(record.images, i)"
class="rect-image"
>
</div>
<!-- 状态容器（三种类型） -->
<div :class="['status-container', record.status]">
<!-- 审批拒绝 -->
<div v-if="record.status === 'reject'" class="reject-status">
<span class="status-tag">审批拒绝</span>
<div class="status-content">
<p>审批日期：{{ record.approveDate }}</p>
<p>拒绝原因：{{ record.rejectReason }}</p>
</div>
</div>
<!-- 待审批 -->
<div v-if="record.status === 'pending'" class="pending-status">
<span class="status-tag">待审批</span>
</div>
<!-- 审批通过 -->
<div v-if="record.status === 'approve'" class="approve-status">
<div class="status-content">
<p>审批日期：{{ record.approveDate }}</p>
</div>
<span class="status-tag">审批通过</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 拒绝弹窗 -->
<van-action-sheet v-model="show4jujue" title=" ">
<div class="content" style="padding:0.5rem 0.4rem 0.5rem; text-align: center;">
<h5 style="text-align: left;font-size: .3rem;">拒绝原因</h5>
<textarea class="textareaEle" v-model="refuseContent" name="" id="" cols="24" rows="3" style="resize: none;"></textarea>
<h5 style="text-align: left;font-size: .3rem;">上报相关部门</h5>
<van-checkbox-group v-model="dept4resuse">
<div v-for="(item, index) in 3" style="overflow: hidden;">
<h5 style="text-align: left;font-size: .3rem;color: #1081E3;font-weight: 500;">标题{{index}}</h5>
<van-checkbox
:key="subIndex"
:name="item"
shape="square"
v-for="(item, subIndex) in 2"
>
{{ '社会事业局'+subIndex }}
</van-checkbox>
</div>
</van-checkbox-group>
<div class="footer-bar">
<van-button type="info" plain size="small" @click="show4jujue=false" >取消</van-button>
<van-button type="info" size="small" @click="show4jujue=false" >确定</van-button>
</div>
</div>
</van-action-sheet>
<!-- 延期操作确认弹窗 -->
<van-action-sheet v-model="show4yanqi" title=" ">
<div class="content" style="padding: 1rem 1rem 0.5rem; text-align: center;">
<span style="font-size: 0.3rem;
color: rgb(0, 0, 0);
text-align: left;
display: inline-block;
line-height: 1.5;
margin-bottom: 1rem;">对该商家提醒限期 3 天整改，整改截止日期 为 2025-3-25</span> <br>
<van-button type="info" size="small" @click="shangbao" >&nbsp;&nbsp;确定&nbsp;&nbsp;</van-button>
</div>
</van-action-sheet>
<!-- 上报弹窗 -->
<van-action-sheet v-model="show4shangbao" title=" ">
<div class="content" style="padding: 0rem 1rem 0.5rem; text-align: center;">
<h4 style="text-align: left;font-size: .32rem;">选择行业主管部门</h4>
<div v-for="(item, subIndex) in 4" style="overflow: hidden;">
<van-checkbox
:key="subIndex"
v-model="item"
shape="square"
>
{{ '社会事业局' }}
</van-checkbox>
</div>
<van-button type="info" size="small" @click="shangbao" >上报行业主管部门</van-button>
</div>
</van-action-sheet>
<!-- 新增隐患整改模块 -->
<div class="rectification-module">
<!-- 模块标题 -->
<div class="module-header">
<img src="../assets/rectification-icon.png" alt="整改图标" class="module-icon">
<h4 class="module-title">隐患整改</h4>
</div>
<!-- 时间线进度列表 -->
<div class="timeline-list">
<!-- 遍历整改记录 -->
<div
v-for="(record, index) in rectificationRecords"
:key="index"
class="timeline-item"
>
<!-- 时间线左侧标记（点+线） -->
<div class="timeline-marker">
<div class="marker-dot"></div>
<div class="marker-line" v-if="index !== rectificationRecords.length - 1"></div>
</div>
<!-- 时间线内容 -->
<div class="timeline-content">
<!-- 整改日期 -->
<p class="rectification-date">{{ record.rectificationDate }}</p>
<!-- 整改图片 -->
<div class="rectification-images">
<img
v-for="(img, i) in record.images"
:key="i"
:src="img"
alt="整改图"
@click="showImage(record.images, i)"
class="rect-image"
>
</div>
<!-- 状态容器（三种类型） -->
<div :class="['status-container', record.status]">
<!-- 审批拒绝 -->
<div v-if="record.status === 'reject'" class="reject-status">
<span class="status-tag">审批拒绝</span>
<div class="status-content">
<p>审批日期：{{ record.approveDate }}</p>
<p>拒绝原因：{{ record.rejectReason }}</p>
</div>
</div>
<!-- 待审批 -->
<div v-if="record.status === 'pending'" class="pending-status">
<span class="status-tag">待审批</span>
</div>
<!-- 审批通过 -->
<div v-if="record.status === 'approve'" class="approve-status">
<div class="status-content">
<p>审批日期：{{ record.approveDate }}</p>
</div>
<span class="status-tag">审批通过</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 隐患详情底部栏 --> <!-- 隐患详情底部栏 -->
<!-- <div class="bottom_bar" v-if="flag=='3'"> <div class="bottom_bar" v-if="flag=='3' && ['admin', 'common', 'industry', 'street', 'wgy'].includes(userType)">
<div> <div>
<van-button type="primary" size="small" @click="navTo1" >上报行业主管部门</van-button> <van-button type="primary" size="small" @click="show4shangbao=true" >上报行业主管部门</van-button>
<van-button type="info" size="small" @click="navTo1" >限期3天整改</van-button> <van-button type="info" size="small" @click="show4yanqi=true" >限期3天整改</van-button>
</div> </div>
</div> --> </div>
<div <div
class="bottom_bar" class="bottom_bar"
...@@ -297,13 +492,15 @@ ...@@ -297,13 +492,15 @@
<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" <van-button
size="small" v-show="checkPageIndex>0"
@click="add4JC_XQ" type="info"
v-show="checkPageIndex===3&&flag=='ADD'" plain
>完成检查</van-button size="small"
> @click="prevPage"
>上一项</van-button
>
<van-button <van-button
v-show="checkPageIndex<3" v-show="checkPageIndex<3"
type="info" type="info"
...@@ -311,6 +508,13 @@ ...@@ -311,6 +508,13 @@
@click="validRequired" @click="validRequired"
>下一项</van-button >下一项</van-button
> >
<van-button
type="info"
size="small"
@click="add4JC_XQ"
v-show="checkPageIndex===3&&flag=='ADD'"
>完成检查</van-button
>
</div> </div>
</div> </div>
</div> </div>
......
src/_check_info.js
View file @ 271dd0e5
...@@ -72,6 +72,37 @@ window.onload = function () { ...@@ -72,6 +72,37 @@ window.onload = function () {
rectificationDeadline: '', // 整改截止日期 rectificationDeadline: '', // 整改截止日期
reviewDate: '', // 隐患审核日期 reviewDate: '', // 隐患审核日期
reviewRecord: '', reviewRecord: '',
show4yanqi:false,
show4shangbao:false,
show4jujue :true,
refuseContent: '', // 拒绝原因
dept4resuse:[], // 拒绝部门
rectificationRecords: [
/* 示例数据结构，实际从接口获取 */
{
rectificationDate: '2024-03-15', // 整改日期
images: ['/images/rectify-20240315-01.jpg', '/images/rectify-20240315-02.jpg'], // 整改图片路径
status: 'reject', // 状态：拒绝
approveDate: '2024-03-16', // 审批日期
rejectReason: '消防通道堵塞未清理，灭火器过期未更换' // 拒绝原因
},
// 待审批记录（仅基础信息）
{
rectificationDate: '2024-03-20', // 整改日期
images: ['/images/rectify-20240320-01.jpg'], // 整改图片路径（单张）
status: 'pending', // 状态：待审批
// 待审批状态无需审批日期和拒绝原因
},
// 审批通过记录（含审批信息）
{
rectificationDate: '2024-03-25', // 整改日期
images: ['/images/rectify-20240325-01.jpg', '/images/rectify-20240325-02.jpg', '/images/rectify-20240325-03.jpg'], // 三张图片
status: 'approve', // 状态：通过
approveDate: '2024-03-26' // 审批日期
}
]
}, },
mounted() { mounted() {
/** /**
...@@ -116,6 +147,15 @@ window.onload = function () { ...@@ -116,6 +147,15 @@ window.onload = function () {
} }
}, },
methods: { methods: {
shangbao(){
},
yanqi(){
},
prevPage(){
this.checkPageIndex--
},
validRequired() { validRequired() {
if (this.flag == 'JC_XQ') { // 检查详情，不参与下一页校验 if (this.flag == 'JC_XQ') { // 检查详情，不参与下一页校验
this.checkPageIndex++; this.checkPageIndex++;
......
src/_shangbao-list.css 0 → 100644
View file @ 271dd0e5
html,
body {
letter-spacing: .01rem;
background: #F5F6FA;
}
.wrapper {}
.header {
background-color: #fff;
}
.header .title {
font-weight: bold;
font-size: 0.32rem;
color: #000000;
display: flex;
justify-content: start;
align-items: center;
gap: 0.2rem;
padding: 0.3rem 0.3rem;
}
.header .title img {
width: 0.51rem;
height: 0.52rem;
}
.detail {
width: 6.5rem;
background: #F5F6FA;
border-radius: 0.01rem;
margin: 0 auto;
padding: 0.2rem;
margin-bottom: 0.2rem;
display: flex;
align-items: start;
flex-direction: column;
justify-content: space-around;
}
.detail .van-col {
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
.detail span {
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #F5F6FA;
border-radius: 8px;
margin: 0.2rem 0.2rem;
}
.van-list .van-cell {
margin-bottom: .2rem;
}
.van-tab {
color: #000;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
/* color: #000; */
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
.tab1-row1{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 8px;
}
.bold{
color: #333;
font-size: 0.3rem;
font-weight: bold;
}
.tab1-row2{
display: flex; justify-content: space-between; color: #666; font-size: 0.28rem; margin-bottom: 8px;
}
.tab1-row2 span{
display: inline-block; width: 50%;
}
.reminder-badge {
position: absolute;
top: 0.15rem;
right: 0.1rem;
min-width: .8rem;
text-align: left;
text-indent: .16rem;
height: 0.36rem;
line-height: 0.36rem;
font-size: 0.2rem;
color: #FFFFFF;
background-image: url(../image/code/home/tip.png);
background-size: contain;
background-repeat: no-repeat;
}
\ No newline at end of file
src/_shangbao-list.html 0 → 100644
View file @ 271dd0e5
<!DOCTYPE html>
<html>
<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>
</head>
<div id="app">
<div class="wrapper" v-cloak>
<!-- 商户头部信息 -->
<div class="header">
<van-search v-model="merName" show-action placeholder="请输入商家关键词" @search="onSearch">
<template #action>
<div @click="onSearch"></div>
</template>
</van-search>
<!-- Tab栏 -->
<van-tabs v-model:active="activeTab" @click="tabChange" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;">
<van-tab title="隐患整改" name="1"></van-tab>
<van-tab title="整改逾期" name="2"></van-tab>
</van-tabs>
</div>
<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
<van-cell v-for="item in hazardList" :key="item.id" @click="viewDetail(item.id)">
<div style="width: 100%;position: relative;" v-if="activeTab=='1'">
<!-- 第一行：商户名称 -->
<div class="tab1-row1 bold">{{ item.merName }}</div>
<!-- 第二行：场所类型 + 检查单位（两列） -->
<div class="tab1-row1">
<span>{{ item.placeType }}</span>
</div>
<!-- 第三行：监察人 + 检查日期（两列） -->
<div class="tab1-row2">
<span>上报日期：{{ item.checkDate && item.checkDate.split(' ')[0] }}</span>
<span>上报人：{{ item.checkPeopleName }}</span>
</div>
<div class="tab1-row1">
<span>整改截止日期：{{ item.checkUnit }}</span>
</div>
</div>
<div style="width: 100%;" v-if="activeTab=='2'">
<!-- 第一行：商户名称 -->
<div class="tab1-row1 bold">{{ item.merName }}</div>
<!-- 第二行：场所类型 + 检查单位（两列） -->
<div class="tab1-row1">
<span>{{ item.placeType }}</span>
</div>
<!-- 第三行：监察人 + 检查日期（两列） -->
<div class="tab1-row2">
<span>上报日期：{{ item.checkDate && item.checkDate.split(' ')[0] }}</span>
<span>上报人：{{ item.checkPeopleName }}</span>
</div>
<div class="tab1-row1">
<span>整改次数：{{ item.checkUnit }}</span>
</div>
</div>
</van-cell>
</van-list>
</div>
</body>
</html>
\ No newline at end of file
src/_shangbao-list.js 0 → 100644
View file @ 271dd0e5
var VUE = null
window.addEventListener('load', function () {
VUE = new Vue({
el: '#app',
data() {
return {
merName: '',
// 新增子Tab数据
activeTab: '1',
hazardList: [
{
id: 1,
merchantName: '福源便利店', // 商户名称
smallPlaceTypeName: '零售店铺', // 场所类型
checkUnit: '高区消防救援大队', // 检查单位
checkPeopleName: '王建军', // 监察人
checkDate: '2024-07-12', // 检查日期
notRectifiedCount: 3, // 未整改数
hiddenCount: 7 // 隐患数
},
{
id: 2,
merchantName: '美味家火锅店',
smallPlaceTypeName: '餐饮场所',
checkUnit: '高区市场监督管理局',
checkPeopleName: '李雪晴',
checkDate: '2024-07-14',
notRectifiedCount: 0,
hiddenCount: 2
},
{
id: 3,
merchantName: '阳光网吧',
smallPlaceTypeName: '娱乐场所',
checkUnit: '高区应急管理局',
checkPeopleName: '张卫国',
checkDate: '2024-07-15',
notRectifiedCount: 1,
hiddenCount: 5
},
{
id: 4,
merchantName: '康旭药店',
smallPlaceTypeName: '医疗场所',
checkUnit: '高区消防救援大队',
checkPeopleName: '陈雨桐',
checkDate: '2024-07-16',
notRectifiedCount: 4,
hiddenCount: 9
}
],
// 新增以下数据
userInfo: {},
userData: {
checkCount: 0, //检查数
checkSelfCount: 0, //自查数
hiddenCount: 0, //隐患数
hiddenNoReCount: 0, //未整改数
},
loading: false,
finished: false,
page: 1,
size: 10,
total: 0,
merId: null, // 商户id
unitName: '', // 单位名称
smallPlaceTypeName: '', // 场所类型
}
},
created() {
let urlParams = gemhoUtil.getUrlParams()
this.merId = urlParams.merId
this.unitName = urlParams.unitName
this.smallPlaceTypeName = urlParams.smallPlaceTypeName
this.init()
},
computed: {},
methods: {
reset() {
this.page = 1
this.size = 10
this.total = 0
this.hazardList = []
},
onSearch() {
console.log('xxxx', this.merName)
this.init()
},
//初始化页面
init() {
this.reset()
this.getList()
},
tabChange() {
this.init()
},
getList() {
// 更多示例数据...
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['page']['id'],
interfacePublicKey: API_KEY_MAP['page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['page']['privateKey'],
reqParams: {
sign: 1,
type: this.activeTab,
merId: this.merId,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
sort: 'lawId,desc',
merName: this.merName,
},
},
(res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => {
this.getList()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
console.log('接口信息', result)
if (result.code !== 200 && result.data == null) {
return
}
this.hazardList.push(...result.rows)
this.total = result.total
if (this.page * this.size >= this.total) {
this.finished = true // 下滑不在刷新数据
}
}
this.loading = false
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0)
this.$nextTick(() => {
// 滚动条跳转位置
window.scrollTo(0, gemhoUtil.getCookie('scrollPosition'))
})
}
)
}, 0)
},
viewDetail(id) {
let urlParams = gemhoUtil.getUrlParams()
let param = {
...urlParams,
id: id,
flag: 'JC_XQ',
pageName: '_checkrecord-all',
}
let url = gemhoUtil.setParameter('_check_info.html', param)
gemhoUtil.navigatePage(url, '跳转中...')
// 这里添加跳转逻辑
},
},
})
})
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