Skip to content

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

feature:隐患整改

parent 9fe6da05
Expand all 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> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8"> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="UTF-8">
<meta name="viewport" <meta name="viewport" content="width=device-width, initial-scale=1.0">
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> <meta charset="UTF-8">
<script type="text/javascript" src="./sdk/includeHead.js"></script> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<style> <meta name="viewport"
.wrapper .item { content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
width: 7.5rem; <title>高区安全“码”上查监管平台-首页</title>
margin-top: 0.2rem; <link rel="stylesheet" href="index.css" />
box-sizing: border-box; <script type="text/javascript" src="./sdk/includeHead.js"></script>
}
.wrapper .item .bgImg { </head>
float: left;
margin-left: 0.25rem; <body>
margin-top: 0.1rem; <!-- 获取授权用户信息 本地token等操作 -->
} <!-- <script type="text/javascript" src="sdk/jssdk2/index.js"></script> -->
.wrapper .item .bgImg img{ <div id="app" class="page_wrapper">
width: 3.4rem; <!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
} <div class="second-layer second-layer-zf" v-if="pageType=='ZF'">
</style> <img class="merchant-icon" src="image/code/zhengfu_logo.png" alt="">
</head> <div class="merchant-info welcome">
<body> <p>欢迎您，<br>进入安全“码”上查 </p>
<!-- 获取授权用户信息 本地token等操作 --> <div class="user_tag">
<script type="text/javascript" src="sdk/jssdk2/index.js"></script> <img src="image/code/user.png" alt="">
<div id="app"> <span>日常检查</span>
</div>
<div class="wrapper"> </div>
<div class="item"> </div>
<div class="bgImg" @click="nav('yh-list')">
<img src="image/yh-list.png" alt="" srcset="" />
</div> <!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
<div class="bgImg" @click="nav('dw-list')"> <div class="second-layer-sj" v-show="pageType=='SJ'">
<img src="image/dw-list.png" alt="" srcset="" /> <div class="header">
</div> <span>商家信息</span>
<div class="bgImg" @click="nav('law-lv1')"> <div class="user_tag">
<img src="image/law-list.png" alt="" srcset="" /> <img src="image/code/user.png" alt="">
</div> <span>商家</span>
<div class="bgImg" @click="nav('notice-list')"> </div>
<img src="image/notice-list.png" alt="" srcset="" /> </div>
</div> <div class="bottom">
<div class="bgImg" @click="nav('emergency')"> <div class="left">
<img src="image/emergency.png" alt="" srcset="" /> <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>
</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> </html>
\ No newline at end of file
index.js
View file @ 4a30a90a
/** window.onload = function () {
* author: dabao // 在页面加载完成后执行
*/ // 执行你的代码
window.addEventListener("load", function() { const currentDate = gemhoUtil.getTargetDateYM();
var VUE = new Vue({ new Vue({
el: '#app', el: '#app',
data() { data() {
return { return {
} pageType: 'ZF',
}, showPopup4completionDate: false,
mounted() { // 控制日期选择器弹窗的显示与隐藏
// http2.post({ showPicker: false,
// serviceId: 'gqyjglptthHiddenDanger', // 存储选择的日期
// interfacePublicKey: "041a0802713d674bfc3db46293d83e2b3ebe99cd0ee9b5ae507a0aa07f41cd8bf1407d8c16fab3ceb28bfa233452417373ac0c7864e085895a27b4ebf14b2eb3b1", selectedDate: currentDate, // '', // gemhoUtil.formatDate(new Date(value)),
// interfacePrivateKey: "73ae80b0f34740ce795821bf4354f1621e4ab7d01d9f3f7fc7c05e52c527c528", // 日期选择的最小范围，这里设置为当前日期的前 10 年
// reqParams: {id: '4234234'} minDate: new Date(new Date().getFullYear() - 10, 0),
// }, function(res){ // 日期选择的最大范围，这里设置为当前日期的后 10 年
// if(res){ maxDate: new Date(new Date().getFullYear() + 10, 11),
// console.log('接口回调数据', JSON.parse(res)) checkModules: [{
// } intro: '提交检查反馈'
// }) },
}, {
methods: { intro: '查看检查历史记录'
nav(type){ },
if(gemhoUtil.getCookie('token')){ // 登录成功后才可以点击跳转 {
gemhoUtil.navigatePage('./src/'+ type +'.html') intro: '提交检查反馈'
}else{ },
vant.Dialog.alert({ {
title: '信息提示', intro: '下载检查报告'
message: '请联系公司管理员在平台添加相应的账号以及绑定的手机号!', },
}) {
} intro: '查看隐患详情'
}, },
}, {
}); intro: '设置检查提醒'
}); }
\ No newline at end of file ]
};
},
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
This diff is collapsed.
src/_yh-check.html
View file @ 4a30a90a
...@@ -9,10 +9,11 @@ ...@@ -9,10 +9,11 @@
<title>高区“码”上</title> <title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script> <script type="text/javascript" src="../sdk/includeHead.js"></script>
<style> <style>
html,body{
background: #F5F6FA;
}
.wrapper { .wrapper {
padding: 0.2rem; padding: 0.2rem;
background-color: #fff;
background: #F5F6FA;
} }
/* 条件查询样式 */ /* 条件查询样式 */
...@@ -27,7 +28,9 @@ ...@@ -27,7 +28,9 @@
padding-left: 0.24rem; padding-left: 0.24rem;
} }
.list-item{
margin-bottom: .2rem;
}
.tag { .tag {
...@@ -55,7 +58,7 @@ ...@@ -55,7 +58,7 @@
} }
.van-list { .van-list {
background: #fff; /* background: #fff; */
border-radius: 8px; border-radius: 8px;
margin: 0 0.1rem; margin: 0 0.1rem;
} }
...@@ -110,12 +113,12 @@ ...@@ -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-tab title="已整改"></van-tab>
<!-- <van-tab title="整改逾期"></van-tab> --> <van-tab title="整改逾期"></van-tab>
</van-tabs> </van-tabs>
<!-- 隐患列表 --> <!-- 隐患列表 -->
<van-list> <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="width: 100%;">
<!-- 第一行：隐患描述 --> <!-- 第一行：隐患描述 -->
<div style=" <div style="
......
src/_home.html → src/test/_home.html
View file @ 4a30a90a
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" <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"> 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> <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