Skip to content

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

feature:隐患整改

parent 9fe6da05
Hide whitespace changes
Inline Side-by-side
Showing with 860 additions and 426 deletions
index.css 0 → 100644
View file @ 4a30a90a
body {
letter-spacing: .02rem;
}
.page_wrapper {
background-image: url('image/code/home_bg6.png');
background-size: contain;
background-repeat: no-repeat;
}
/* 通用样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #f5f5f5;
}
/* 第一层样式 */
.first-layer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: white;
margin-bottom: 10px;
}
.safety-level {
font-size: 16px;
color: #333;
}
/* 第二层样式 */
.second-layer {
position: relative;
display: flex;
align-items: center;
padding: 15px;
background-color: white;
margin-bottom: 0.1rem;
}
.second-layer-zf {
background-color: transparent;
padding-top: 1rem;
padding-left: .6rem;
}
.second-layer-sj {
background-color: transparent;
width: 92vw;
margin: 0 auto;
}
.second-layer-sj .header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.2rem 0;
}
.second-layer-sj .header span {
font-weight: 500;
font-size: .3rem;
color: #0166BC;
}
.second-layer-sj .header img {
width: 0.25rem;
height: .25rem;
}
.second-layer-sj .bottom {
display: flex;
margin: 0 auto;
border-radius: .2rem;
background-color: #ffffff42;
padding: .24rem;
margin-bottom: -.22rem;
}
.second-layer-sj img {
width: 1rem;
height: 1rem;
}
.second-layer-sj .user_tag {
width: 1.8rem;
height: .48rem;
line-height: .48rem;
background: #CFE8FD;
border-radius: .24rem;
font-weight: bold;
font-size: .26rem;
color: #0166BC;
text-align: center;
}
.second-layer-sj .merchant-name {
font-weight: bold;
font-size: .34rem;
color: #0166BC;
}
.second-layer-sj .name-rank {
display: flex;
justify-content: space-around;
align-items: start;
gap: .2rem;
flex-direction: column;
margin-bottom: 10px;
}
.second-layer-sj .user-rank {
width: 2.4rem;
text-align: center;
height: 0.5rem;
line-height: 0.5rem;
background: #00B55E;
border-radius: 0.22rem;
font-family: PingFang SC;
font-weight: 500;
font-size: 0.26rem;
color: #FFFFFF;
}
.second-layer-sj .type-address p {
font-weight: 500;
font-size: 0.28rem;
color: #1376CA;
margin-bottom: .14rem;
}
.merchant-icon {
width: 1rem;
height: 1rem;
margin-right: 15px;
}
.second-layer-zf .merchant-icon {
width: 1.2rem;
height: 1.2rem;
}
.merchant-info {
width: 68vw;
}
.welcome {
font-weight: bold;
font-size: 0.32rem;
color: #FFFFFF;
line-height: 1.8;
letter-spacing: 0.02rem;
}
.welcome .user_tag {
position: absolute;
right: 0.3rem;
top: 0.3rem;
width: 2rem;
height: .48rem;
background: #CFE8FD;
border-radius: .24rem;
font-weight: bold;
font-size: .26rem;
color: #0166BC;
text-align: center;
}
.welcome .user_tag img {
width: 0.25rem;
height: 0.25rem;
}
.divider {
height: 1px;
background-color: #eee;
margin-bottom: 10px;
}
/* 第三层样式 */
.third-layer {
background-color: white;
width: 92vw;
margin: 0 auto;
border-radius: 0.2rem;
margin-bottom: 0.3rem;
}
.stats-header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: .3rem;
border-bottom: 1px solid #eee;
}
.stats-header .formValue {
font-size: .28rem;
margin-right: .1rem;
}
.stats-header .van-icon:before {
font-size: 0.2rem;
}
.stats-title {
font-size: .36rem;
font-weight: bold;
color: #333;
}
.stats-content {
display: flex;
padding: .3rem 0;
}
.stat-item {
flex: 1;
text-align: center;
}
.stat-value {
font-family: PingFang SC;
font-weight: bold;
font-size: .36rem;
color: #1081E3;
margin-bottom: .15rem;
}
.stat-label {
font-family: PingFang SC;
font-weight: bold;
font-size: .3rem;
color: #5B5B5B;
}
/* 第四层样式 */
.fourth-layer {
background-color: white;
padding: .3rem;
width: 92vw;
margin: 0 auto;
border-radius: .1rem;
}
.fourth-layer h2 {
font-size: .36rem;
color: #000000;
margin-bottom: .4rem;
}
.check-modules {
display: flex;
flex-wrap: wrap;
gap: .3rem;
}
.check-module {
width: 3rem;
height: 1.8rem;
padding: .2rem;
/* border-bottom: 1px solid #eee;
border-right: 1px solid #eee; */
background-image: url('image/code/bg1.png');
background-size: contain;
background-repeat: no-repeat;
}
.check-module p:first-child {
font-weight: bold;
font-size: .32rem;
color: #0C4BA2;
margin-bottom: .2rem;
}
.check-module p:last-child {
font-weight: 500;
font-size: .24rem;
color: #4C81CA;
}
.check-module.saoma {
background-image: url('image/code/bg1.png');
}
.check-module.saoma p:first-child {
color: #0C4BA2;
}
.check-module.saoma p:last-child {
color: #4C81CA;
}
.check-module.jiancha {
background-image: url('image/code/bg2.png');
}
.check-module.jiancha p:first-child {
color: #1E7B61;
}
.check-module.jiancha p:last-child {
color: #5CA691;
}
.check-module.yinhuan {
background-image: url('image/code/bg3.png');
}
.check-module.yinhuan p:first-child {
color: #901A14;
}
.check-module.yinhuan p:last-child {
color: #901A14;
}
.check-module.anquan {
background-image: url('image/code/bg4.png');
}
.check-module.anquan p:first-child {
color: #0063A1;
}
.check-module.anquan p:last-child {
color: #5AA1CE;
}
.check-module.shangjia {
background-image: url('image/code/bg5.png');
}
.check-module.shangjia p:first-child {
color: #9E5D15;
}
.check-module.shangjia p:last-child {
color: #CD995F;
}
.check-module.zicha {
background-image: url('image/code/bg4.png');
}
.check-module:nth-child(2n) {
border-right: none;
}
.module-intro {
font-size: .24rem;
color: #666;
margin-top: .1rem;
}
\ No newline at end of file
index.html
View file @ 4a30a90a
<!DOCTYPE html>
<html lang="en">
<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>
.wrapper .item {
width: 7.5rem;
margin-top: 0.2rem;
box-sizing: border-box;
}
.wrapper .item .bgImg {
float: left;
margin-left: 0.25rem;
margin-top: 0.1rem;
}
.wrapper .item .bgImg img{
width: 3.4rem;
}
</style>
</head>
<body>
<!-- 获取授权用户信息 本地token等操作 -->
<script type="text/javascript" src="sdk/jssdk2/index.js"></script>
<div id="app">
<div class="wrapper">
<div class="item">
<div class="bgImg" @click="nav('yh-list')">
<img src="image/yh-list.png" alt="" srcset="" />
</div>
<div class="bgImg" @click="nav('dw-list')">
<img src="image/dw-list.png" alt="" srcset="" />
</div>
<div class="bgImg" @click="nav('law-lv1')">
<img src="image/law-list.png" alt="" srcset="" />
</div>
<div class="bgImg" @click="nav('notice-list')">
<img src="image/notice-list.png" alt="" srcset="" />
</div>
<div class="bgImg" @click="nav('emergency')">
<img src="image/emergency.png" alt="" srcset="" />
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商户检查页面</title>
<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>
<link rel="stylesheet" href="index.css" />
<script type="text/javascript" src="./sdk/includeHead.js"></script>
</head>
<body>
<!-- 获取授权用户信息 本地token等操作 -->
<!-- <script type="text/javascript" src="sdk/jssdk2/index.js"></script> -->
<div id="app" class="page_wrapper">
<!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
<div class="second-layer second-layer-zf" v-if="pageType=='ZF'">
<img class="merchant-icon" src="image/code/zhengfu_logo.png" alt="">
<div class="merchant-info welcome">
<p>欢迎您，<br>进入安全“码”上查 </p>
<div class="user_tag">
<img src="image/code/user.png" alt="">
<span>日常检查</span>
</div>
</div>
</div>
<!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
<div class="second-layer-sj" v-show="pageType=='SJ'">
<div class="header">
<span>商家信息</span>
<div class="user_tag">
<img src="image/code/user.png" alt="">
<span>商家</span>
</div>
</div>
<div class="bottom">
<div class="left">
<img class="merchant-icon" src="image/code/sj.png" alt="商户图标">
</div>
<div class="right">
<div class="merchant-info">
<div class="name-rank">
<span class="merchant-name">威海市宝威酒店有限公司</span>
<span class="user-rank">安全等级:绿</span>
</div>
<div class="divider"></div>
<div class="type-address">
<p>场所类型：小餐饮</p>
<p>山东省威海市环翠区恒瑞街35-6</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 第三层：统计信息 -->
<div class="third-layer">
<div class="stats-header">
<div class="stats-title">数据统计</div>
<!-- <van-cell-group> -->
<div @click="showPopup('showPopup4completionDate')" style="position: absolute;
top: -.08rem;
right: .4rem;"><span class="formValue">{{formattedDate}}</span><van-icon name="arrow-down" /></div>
<van-popup v-model="showPopup4completionDate" position="bottom">
<van-datetime-picker v-model="selectedDate" :min-date="minDate" type="year-month" title="选择年月"
@confirm="confirm4completionDate" @cancel="showPopup4completionDate=false" />
</van-popup>
<!-- </van-cell-group> -->
</div>
<div class="stats-content">
<div class="stat-item">
<div class="stat-value">75次</div>
<div class="stat-label">检查数</div>
</div>
<div class="stat-item">
<div class="stat-value">50次</div>
<div class="stat-label">自查数</div>
</div>
<div class="stat-item">
<div class="stat-value">10次</div>
<div class="stat-label">隐患数</div>
</div>
<div class="stat-item">
<div class="stat-value">5次</div>
<div class="stat-label">未整改</div>
</div>
</div>
</div>
<!-- 第四层：检查专区 -->
<div class="fourth-layer">
<h2>检查专区</h2>
<div class="check-modules">
<div class="check-module saoma">
<p>扫码检查 <van-icon name="arrow" /></p>
<p class="module-intro">扫码进行企业安全检查</p>
</div>
<div class="check-module jiancha">
<p>检查记录 <van-icon name="arrow" /></p>
<p class="module-intro">查看商家检查自查记录</p>
</div>
<div class="check-module yinhuan">
<p>隐患审核 <van-icon name="arrow" /></p>
<p class="module-intro">对整改隐患进行审核</p>
</div>
<div class="check-module anquan">
<p>安全常识 <van-icon name="arrow" /></p>
<p class="module-intro">查看安全常识培训资料</p>
</div>
<div class="check-module shangjia">
<p>商家信息 <van-icon name="arrow" /></p>
<p class="module-intro">查看商家基础信息</p>
</div>
<div class="check-module zicha">
<p>安全自查 <van-icon name="arrow" /></p>
<p class="module-intro">进行企业安全自查</p>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
index.js
View file @ 4a30a90a
/**
* author: dabao
*/
window.addEventListener("load", function() {
var VUE = new Vue({
el: '#app',
data() {
return {
}
},
mounted() {
// http2.post({
// serviceId: 'gqyjglptthHiddenDanger',
// interfacePublicKey: "041a0802713d674bfc3db46293d83e2b3ebe99cd0ee9b5ae507a0aa07f41cd8bf1407d8c16fab3ceb28bfa233452417373ac0c7864e085895a27b4ebf14b2eb3b1",
// interfacePrivateKey: "73ae80b0f34740ce795821bf4354f1621e4ab7d01d9f3f7fc7c05e52c527c528",
// reqParams: {id: '4234234'}
// }, function(res){
// if(res){
// console.log('接口回调数据', JSON.parse(res))
// }
// })
},
methods: {
nav(type){
if(gemhoUtil.getCookie('token')){ // 登录成功后才可以点击跳转
gemhoUtil.navigatePage('./src/'+ type +'.html')
}else{
vant.Dialog.alert({
title: '信息提示',
message: '请联系公司管理员在平台添加相应的账号以及绑定的手机号!',
})
}
},
},
});
});
\ No newline at end of file
window.onload = function () {
// 在页面加载完成后执行
// 执行你的代码
const currentDate = gemhoUtil.getTargetDateYM();
new Vue({
el: '#app',
data() {
return {
pageType: 'ZF',
showPopup4completionDate: false,
// 控制日期选择器弹窗的显示与隐藏
showPicker: false,
// 存储选择的日期
selectedDate: currentDate, // '', // gemhoUtil.formatDate(new Date(value)),
// 日期选择的最小范围，这里设置为当前日期的前 10 年
minDate: new Date(new Date().getFullYear() - 10, 0),
// 日期选择的最大范围，这里设置为当前日期的后 10 年
maxDate: new Date(new Date().getFullYear() + 10, 11),
checkModules: [{
intro: '提交检查反馈'
},
{
intro: '查看检查历史记录'
},
{
intro: '提交检查反馈'
},
{
intro: '下载检查报告'
},
{
intro: '查看隐患详情'
},
{
intro: '设置检查提醒'
}
]
};
},
computed: {
formattedDate() {
// 检查原始日期是否存在
console.log(this.selectedDate == null)
if (this.selectedDate !== null) {
// 使用 split 方法按 - 分割日期字符串
const [year, month] = this.selectedDate.split('-');
// 拼接成目标格式
return `${year}月${month}日`;
}
return '';
}
},
methods: {
showPopup() {
this['showPopup4completionDate'] = true
},
confirm4completionDate(value) {
console.log('value', value)
this.selectedDate = gemhoUtil.getTargetDateYMByPara(value)
this.showPopup4completionDate = false
},
// 确认选择日期时的回调函数
onConfirm(value) {
// 使用 toLocaleDateString 方法将日期对象格式化为本地日期字符串
this.selectedDate = value.toLocaleDateString();
this.showPicker = false;
},
// 取消选择日期时的回调函数
onCancel() {
this.showPicker = false;
}
},
});
}
src/_home - 副本.html deleted 100644 → 0
View file @ 9fe6da05
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>安全检查管理</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2/lib/index.css">
<style>
/* 自定义样式 */
.section {
padding: 12px;
background: white;
margin-bottom: 8px;
}
.merchant-info {
display: flex;
align-items: center;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 12px;
}
.stat-item {
text-align: center;
padding: 8px;
background: #f7f8fa;
border-radius: 4px;
}
.function-grid {
margin-top: 12px;
}
.function-card {
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px;
background: white;
border-radius: 4px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一层：安全等级和商家类型 -->
<div class="section">
<div style="display: flex; justify-content: space-between;">
<span>安全等级：A级</span>
<van-tag type="primary">餐饮类</van-tag>
</div>
</div>
<!-- 第二层：商户信息 -->
<div class="section">
<div class="merchant-info">
<van-icon name="shop" size="24px"/>
<div style="margin-left: 12px;">
<div style="display: flex; align-items: center;">
<span>XX商户名称</span>
<div style="width:1px;height:12px;background:#eee;margin:0 8px"></div>
<van-tag plain type="primary">VIP商户</van-tag>
</div>
<div style="color:#969799;font-size:12px;">
<div>场所类型：九小场所</div>
<div>地址：XX路XX号</div>
</div>
</div>
</div>
</div>
<!-- 第三层：统计信息 -->
<div class="section">
<div style="display: flex; justify-content: space-between;">
<span>数据统计</span>
<van-field
readonly
clickable
value="2023-07"
placeholder="选择年月"
style="width:120px"/>
</div>
<div class="stats-grid">
<div class="stat-item">
<div style="font-size:18px;color:#1989fa">75</div>
<div style="font-size:12px;color:#969799">检查数</div>
</div>
<!-- 重复3个相同结构的统计项 -->
</div>
</div>
<!-- 第四层：检查专区 -->
<div class="section">
<van-grid :column-num="2" gutter="8" class="function-grid">
<van-grid-item v-for="item in 6" :key="item">
<div class="function-card">
<div style="display:flex;align-items:center">
<van-icon name="scan" size="16px"/>
<span style="margin-left:4px">扫码检查</span>
<van-icon name="arrow" style="margin-left:auto"/>
</div>
<div style="color:#969799;font-size:12px;margin-top:4px">
功能简介描述
</div>
</div>
</van-grid-item>
</van-grid>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2/lib/vant.min.js"></script>
<script>
new Vue({
el: '#app'
});
</script>
</body>
</html>
\ No newline at end of file
src/_shanghu_home.html
View file @ 4a30a90a
......@@ -8,15 +8,22 @@
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
html,
body {
letter-spacing: .01rem;
}
.wrapper {
padding: 0.2rem;
/* padding: 0.2rem; */
background-color: #fff;
}
.header {}
.header {
padding: .2rem;
}
.header .title {
font-weight: 500;
font-weight: bold;
font-size: 0.32rem;
color: #000000;
display: flex;
......@@ -25,40 +32,53 @@
gap: 0.2rem;
padding: 0.3rem 0.3rem;
}
.header .title img {
width: 0.51rem;
height: 0.52rem;
}
.detail {
width: 6.5rem;
/* height: 1.88rem; */
background: #F5F6FA;
border-radius: 0.01rem;
/* padding-left: 0.2rem; */
padding:0.3rem;
padding: 0.3rem;
margin-bottom: 0.2rem;
display: flex;
align-items: start;
flex-direction: column;
justify-content: space-around;
/* padding-bottom: 0.1rem;
/* padding-bottom: 0.1rem;
gap: 0.1rem; */
}
.detail .van-col{
.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;
}
.detail .detail_link {
position: absolute;
right: .3rem;
font-size: .26rem;
color: #1081E3;
}
.func_btn {
width: 6.9rem;
width: 7.12rem;
height: 0.8rem;
background: #1081E3;
border-radius: 0.1rem;
......@@ -68,11 +88,18 @@
color: #FFFFFF;
margin: 0 auto;
border-width: 0;
margin-left: .2rem;
}
.func_btn span {
font-size: 0.5rem;
vertical-align: -0.05rem;
margin-right: .1rem;
}
.tag {
display: inline-block;
width: 1.8rem;
width: 1.9rem;
height: 0.42rem;
line-height: 0.42rem;
text-align: center;
......@@ -82,140 +109,174 @@
font-size: 0.28rem;
color: #FFFFFF;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #fff;
border-radius: 8px;
margin: 0 0.1rem;
}
.van-cell {
padding: 12px 16px;
.subNavWrapper .van-cell {
padding: 12px 10px;
}
.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;
}
.subNavWrapper{
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
.subNavWrapper {
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
margin-top: -0.3rem;
}
.subNavWrapper .van-tab__text {
color: #5B5B5B;
}
.subNavWrapper .van-tab--active span {
color: #fff;
font-size: 0.28rem;
}
.subNavWrapper .van-tabs__nav--card {
border: none !important;
}
.subNavWrapper .van-tabs--card{
.subNavWrapper .van-tabs--card {
margin-bottom: 0.3rem;
}
.subNavWrapper .van-tabs__nav--card .van-tab {
color: #5B5B5B;
border: none !important;
}
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active {
color: #FFFFFF;
background: #58A5E8;
border-radius: 0.4rem;
}
.subNavWrapper .van-list{
.subNavWrapper .van-list {
background: #F5F6FA;
}
.subNavWrapper .van-cell{
.subNavWrapper .van-cell {
margin-bottom: .3rem;
}
.subNavWrapper .van-tabs__nav{
.subNavWrapper .van-tabs__nav {
background: #F5F6FA;
margin: 0;
}
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
}
</style>
</head>
<div id="app">
<div class="wrapper">
<!-- 商户头部信息 -->
<div class="header">
<!-- <div class="level">安全等级</div> -->
<div class="title"><img src="https://dummyimage.com/26x26" alt=""><span>威海市宝威酒店有限公司</span><span
class="tag">安全等级-绿</span>
</div>
<div class="detail">
<!-- <div><span>场所类型: 小餐饮</span> </div>
<div class="wrapper">
<!-- 商户头部信息 -->
<div class="header">
<!-- <div class="level">安全等级</div> -->
<div class="title">
<img src="../image/code/sj.png" alt=""><span>威海市宝威酒店有限公司</span><span class="tag">安全等级-绿</span>
</div>
<div class="detail">
<!-- <div><span>场所类型: 小餐饮</span> </div>
<div><span>自查数:15 </span>
<span>检查数:75</span><span>隐患数:95</span><span>未整改:21: 小餐饮</span>
</div>
<div><span>山东省威海市环翠区和谐街35-6</span>
</div> -->
<van-row>
<van-col span="24">场所类型: 小餐饮</van-col>
<van-row>
<van-col span="24">场所类型: 小餐饮</van-col>
<div class="detail_link">详情<van-icon name="arrow" /></div>
</van-row>
<van-row type="flex" justify="space-around" style="width:100%; margin-top: .3rem; margin-bottom: .3rem;">
<van-row type="flex" justify="space-around"
style="width:100%; margin-top: .3rem; margin-bottom: .3rem;">
<van-col span="6">自查数:75</van-col>
<van-col span="6">检查数:75</van-col>
<van-col span="6">隐患数:75</van-col>
<van-col span="6">未整改:75</van-col>
</van-row>
<van-row>
<van-col span="24">山东省威海市环翠区和谐街35-6</van-col>
<van-col span="24">山东省威海市环翠区和谐街35-6</van-col>
</van-row>
</div>
</div>
<!-- 功能 -->
<button type="info" class="func_btn"><span style="font-size: 0.5rem; vertical-align: -0.05rem;">+</span>安全检查</button>
<!-- Tab栏 -->
<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;">
<van-tab title="隐患整改"></van-tab>
<van-tab title="检查记录"></van-tab>
<van-tab title="自查记录"></van-tab>
<van-tab title="培训演练"></van-tab>
</div>
<!-- 功能 -->
<button type="info" class="func_btn"><span>+</span>安全检查</button>
<!-- Tab栏 -->
<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;">
<van-tab title="隐患整改"></van-tab>
<van-tab title="检查记录"></van-tab>
<van-tab title="自查记录"></van-tab>
<van-tab title="培训演练"></van-tab>
</van-tabs>
<div v-show="activeTab===0" class="subNavWrapper">
<!-- 隐患记录子Tab -->
<van-tabs v-model:active="subActiveTab" type="card">
<van-tab title="全部"></van-tab>
<van-tab title="待审核"></van-tab>
<van-tab title="待整改"></van-tab>
<van-tab title="已整改"></van-tab>
<van-tab title="整改逾期"></van-tab>
</van-tabs>
<div v-show="activeTab===0" class="subNavWrapper">
<!-- 隐患记录子Tab -->
<van-tabs v-model:active="subActiveTab" type="card">
<van-tab title="全部"></van-tab>
<van-tab title="待审核"></van-tab>
<van-tab title="待整改"></van-tab>
<van-tab title="已整改"></van-tab>
<van-tab title="逾期"></van-tab>
</van-tabs>
<!-- 隐患列表 -->
<van-list>
<van-cell v-for="item in filteredHazards" :key="item.id">
<div style="width: 100%;">
<!-- 第一行：隐患描述 -->
<div style="
<!-- 隐患列表 -->
<van-list>
<van-cell v-for="item in filteredHazards" :key="item.id">
<div style="width: 100%;">
<!-- 第一行：隐患描述 -->
<div style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -224,34 +285,36 @@
font-weight: bold;
font-family: PingFang SC;
">{{ item.description }}</div>
<!-- 第二行：状态和时间 -->
<div style="display: flex; justify-content: space-between; margin: 8px 0;">
<van-tag :type="statusTagType(item.status)">
{{ item.status }}
</van-tag>
<span style="color: #737373; font-size: 0.28rem;margin-left: -1.4rem;">检查时间：{{ item.date }}</span>
<van-icon name="arrow" style="color: #1081E3;" @click="viewDetail(item.id)" />
</div>
<!-- 第三行：商家和箭头 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: #666; font-size: 0.28rem;">商家名称：威海市宝威酒店有限公司{{ item.shop }}</span>
</div>
<!-- 第二行：状态和时间 -->
<div style="display: flex; justify-content: start; gap: .34rem; margin: 8px 0;">
<van-tag :type="statusTagType(item.status)">
{{ item.status }}
</van-tag>
<span
style="color: #737373; font-size: 0.28rem;margin-left: -1.6rem;">检查时间：{{ item.date }}</span>
<van-icon name="arrow" class="navToBtn" @click="viewDetail(item.id)" />
</div>
</van-cell>
</van-list>
</div>
<!-- 检查记录 -->
<div v-show="activeTab>0" class="subNavWrapper">
<!-- 隐患列表 -->
<van-list>
<van-cell v-for="item in filteredHazards" :key="item.id">
<div style="width: 100%;">
<!-- 第一行：隐患描述 -->
<div style="
<!-- 第三行：商家和箭头 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="color: #666; font-size: 0.28rem;">商家名称：威海市宝威酒店有限公司{{ item.shop }}</span>
</div>
</div>
</van-cell>
</van-list>
</div>
<!-- 检查记录 -->
<div v-show="activeTab>0" class="subNavWrapper">
<!-- 隐患列表 -->
<van-list>
<van-cell v-for="item in filteredHazards" :key="item.id">
<div style="width: 100%;">
<!-- 第一行：隐患描述 -->
<div style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -260,112 +323,112 @@
font-weight: bold;
font-family: PingFang SC;
">{{ item.description }}</div>
<!-- 第二行：状态和时间 -->
<div style="display: flex; justify-content: space-between; margin: 8px 0;">
<span style="color: #737373; font-size: 0.28rem;">时间：{{ item.date }}</span>
</div>
<!-- 第三行：商家和箭头 -->
<div>
<van-row type="flex" justify="start" style="width:100%; margin-top: .3rem; margin-bottom: .3rem;">
<van-col span="6">检查人:xxx</van-col>
<van-col span="6">隐患数:75</van-col>
<van-col span="6">未整改:75</van-col>
</van-row>
</div>
<!-- 第二行：状态和时间 -->
<div style="display: flex; justify-content: space-between; margin: 8px 0;">
<span style="color: #737373; font-size: 0.28rem;">时间：{{ item.date }}</span>
</div>
</van-cell>
</van-list>
</div>
<!-- 第三行：商家和箭头 -->
<div>
<van-row type="flex" justify="start" style="width:100%;">
<van-col span="8">检查人:xxx</van-col>
<van-col span="8">隐患数:75</van-col>
<van-col span="8">未整改:75</van-col>
</van-row>
</div>
</div>
</van-cell>
</van-list>
</div>
<script>
// 在原有Vue实例中添加
new Vue({
el: '#app',
data() {
return {
// 新增子Tab数据
subActiveTab: 0,
hazardList: [{
id: 1,
description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
status: '待审核',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
{
id: 2,
description: '消防通道被货物堵塞，存在严重安全隐患需要立即整改',
status: '待整改',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
// 更多示例数据...
],
activeTab: 0,
showTimePicker: false,
// 新增以下数据
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
</div>
<script>
// 在原有Vue实例中添加
new Vue({
el: '#app',
data() {
return {
// 新增子Tab数据
subActiveTab: 0,
hazardList: [{
id: 1,
description: '消防通道被货物堵塞，存在严重安全隐患',
status: '待审核',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
{
id: 2,
description: '消防通道被货物堵塞，存在严重安全隐患',
status: '待整改',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
checkList: [{
id: 1,
date: '2024-03-15',
result: '合格'
},
{
id: 2,
date: '2024-03-14',
result: '不合格'
}
]
}
// 更多示例数据...
],
activeTab: 0,
showTimePicker: false,
// 新增以下数据
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
},
checkList: [{
id: 1,
date: '2024-03-15',
result: '合格'
},
{
id: 2,
date: '2024-03-14',
result: '不合格'
}
]
}
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.status === statusMap[this.subActiveTab]
);
}
},
methods: {
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.status === statusMap[this.subActiveTab]
);
}
onConfirmTime(time) {
this.formData.businessHours = time;
this.showTimePicker = false;
},
methods: {
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
onConfirmTime(time) {
this.formData.businessHours = time;
this.showTimePicker = false;
},
statusTagType(status) {
const types = {
'待审核': 'warning',
'待整改': 'primary',
'已整改': 'success',
'整改逾期': 'danger',
};
return types[status] || '';
},
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
}
statusTagType(status) {
const types = {
'待审核': 'warning',
'待整改': 'primary',
'已整改': 'success',
'整改逾期': 'danger',
};
return types[status] || '';
},
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
}
});
</script>
</body>
}
});
</script>
</body>
</html>
\ No newline at end of file
src/_yh-check.html
View file @ 4a30a90a
......@@ -9,10 +9,11 @@
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
html,body{
background: #F5F6FA;
}
.wrapper {
padding: 0.2rem;
background-color: #fff;
background: #F5F6FA;
}
/* 条件查询样式 */
......@@ -27,7 +28,9 @@
padding-left: 0.24rem;
}
.list-item{
margin-bottom: .2rem;
}
.tag {
......@@ -55,7 +58,7 @@
}
.van-list {
background: #fff;
/* background: #fff; */
border-radius: 8px;
margin: 0 0.1rem;
}
......@@ -110,12 +113,12 @@
<van-tab title="待审核"></van-tab>
<van-tab title="待整改"></van-tab>
<van-tab title="已整改"></van-tab>
<!-- <van-tab title="整改逾期"></van-tab> -->
<van-tab title="整改逾期"></van-tab>
</van-tabs>
<!-- 隐患列表 -->
<van-list>
<van-cell v-for="item in filteredHazards" :key="item.id">
<van-cell v-for="item in filteredHazards" :key="item.id" class="list-item">
<div style="width: 100%;">
<!-- 第一行：隐患描述 -->
<div style="
......
src/_home.html → src/test/_home.html
View file @ 4a30a90a
......@@ -9,7 +9,7 @@
<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>
<title>高区安全“码”上查监管平台</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
......
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