Skip to content

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

Merge branch 'anquanchangshi' into gaoqucodecheck

parents 5939a762 7d764eab
Show whitespace changes
Inline Side-by-side
Showing with 1009 additions and 468 deletions
src/_anquan_changshi-detail-text.css 0 → 100644
View file @ 2f6b9aa2
/* 全局基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body, #app{
background: #fff;
}
body {
background: #f5f5f5;
font-family: 'PingFang SC', sans-serif;
}
/* 标题与日期区域 */
.info-section {
padding: 0 0.3rem;
margin-bottom: 0.3rem;
margin-top: .3rem;
}
.title-wrapper {
/*
align-items: center;
margin-bottom: 0.15rem; */
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
gap: 0.25rem;
width: 6.92rem;
height: 1.96rem;
background: #EAF5FF;
border-radius: 0.1rem;
padding: .2rem .35rem;
border: .01rem solid #7DC3FF;
}
.title-wrapper h3{
font-weight: bold;
font-size: 0.3rem;
color: #000000;
}
.title-wrapper p{
font-weight: 500;
font-size: 0.28rem;
color: #656565;
}
.title-icon {
width: 0.4rem;
height: 0.4rem;
}
/* 新增：附件区域样式 */
.attachment-section {
padding: 0 0.3rem 0.3rem;
/* background: #fff; */
margin-bottom: 0.2rem;
}
.attachment-title {
font-size: 0.3rem;
color: #333;
font-weight: 500;
margin-bottom: 0.15rem;
}
.attachment-link {
display: flex;
align-items: center;
gap: 0.1rem;
padding: 0.15rem;
/* background: #f8f9fa; */
border-radius: 6px;
color: #1081E3;
font-size: 0.28rem;
text-decoration: none;
}
.attachment-link:hover {
background: #f0f2f5;
}
/* PDF预览模态框 */
.pdf-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
padding: 0.5rem 0;
}
.pdf-container {
position: relative;
width: 98%;
height: 98%;
margin: 0 auto;
background: #fff;
border-radius: 8px;
overflow: auto;
/* 长文档滚动支持 */
}
.pdf-controls {
position: absolute;
bottom: 0.2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.3rem;
color: #fff;
font-size: 0.3rem;
}
.control-btn {
padding: 0;
width: 2rem;
height: .5rem;
line-height: .5rem;
text-align: center;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
cursor: pointer;
}
.close-btn {
position: absolute;
top: 0.4rem;
right: 6px;
color: #211a1a;
font-size: 0.6rem;
cursor: pointer;
width: 1rem;
height: 1rem;
z-index: 99999;
background: #fff;
}
\ No newline at end of file
src/_anquan_changshi-detail-text.html 0 → 100644
View file @ 2f6b9aa2
<!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, viewport-fit:cover">
<title>安全常识</title>
<script src="https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.min.js"></script>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<body>
<div id="app">
<div class="wrapper">
<!-- 标题与日期 -->
<div class="info-section">
<div class="title-wrapper">
<h3 class="video-title">{{detailInfo.name}}</h3>
<p class="video-date">日期：{{detailInfo.uploadsDate}}</p>
</div>
</div>
<!-- 新增：附件链接区域 -->
<div class="attachment-section">
<div class="attachment-list">
<div class="attachment-link" @click="previewFile">
<van-icon name="paperclip" size="0.32rem" />
<span>{{detailInfo.fileName}}</span>
</div>
</div>
</div>
<!-- 两列图文列表 -->
<div style="padding: .2rem .3rem;" v-html="detailInfo.content">
收快递费了时代峰峻
</div>
</div>
<!-- PDF预览模态框 -->
<div class="pdf-modal" id="pdfModal">
<!-- <div class="control-btn" onclick="closePreview()">关闭</div> -->
<div class="pdf-container" style="padding-top: 1rem;">
<div id="pdfViewer"></div> <!-- PDF内容渲染区 -->
<div class="pdf-controls">
<div class="control-btn" onclick="prevPage()">上一页</div>
<span>第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页</span>
<div class="control-btn" onclick="nextPage()">下一页</div>
<!-- 新增缩放按钮 -->
<!-- <div class="control-btn" onclick="zoomIn()">放大</div>
<div class="control-btn" onclick="zoomOut()">缩小</div>
<span>缩放：<span id="currentScale">120%</span></span> -->
</div>
<van-icon name="cross" class="close-btn" onclick="closePreview()" />
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
src/_anquan_changshi-detail-text.js 0 → 100644
View file @ 2f6b9aa2
/**
* author: dabao
* date: 2024-03-15
* description: 商户首页
*/
// pdf.js核心配置（解决Worker跨域问题）
// 修改后
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.worker.min.js';
let pdfDoc = null; // PDF文档实例
let currentPageNum = 1; // 当前页码
let currentScale = 1.2; // 当前缩放比例（初始120%）
const MIN_SCALE = 0.5; // 最小缩放比例
const MAX_SCALE = 2.0; // 最大缩放比例
// 预览PDF主函数
// 渲染指定页码
async function renderPage(pageNum) {
const pdfViewer = document.getElementById('pdfViewer');
pdfViewer.innerHTML = ''; // 清空旧内容
// 获取指定页并渲染到canvas
const page = await pdfDoc.getPage(pageNum);
// 使用currentScale控制缩放
const viewport = page.getViewport({ scale: currentScale });
// 创建canvas并设置尺寸
const canvas = document.createElement('canvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = '100%'; // 自适应容器宽度
// 渲染到canvas
const context = canvas.getContext('2d');
await page.render({ canvasContext: context, viewport: viewport }).promise;
// 添加到DOM
pdfViewer.appendChild(canvas);
// 更新当前页码显示
document.getElementById('currentPage').textContent = pageNum;
// document.getElementById('currentScale').textContent = `${(currentScale * 100).toFixed(0)}%`;
}
// 放大（每次增加0.2倍）
function zoomIn() {
if (currentScale < MAX_SCALE) {
currentScale += 0.2;
renderPage(currentPageNum); // 重新渲染当前页
}
}
// 缩小（每次减少0.2倍）
function zoomOut() {
if (currentScale > MIN_SCALE) {
currentScale -= 0.2;
renderPage(currentPageNum); // 重新渲染当前页
}
}
// 上一页
function prevPage() {
if (pdfDoc && currentPageNum > 1) {
currentPageNum--;
renderPage(currentPageNum);
}
}
// 下一页
function nextPage() {
if (pdfDoc && currentPageNum < pdfDoc.numPages) {
currentPageNum++;
renderPage(currentPageNum);
}
}
// 关闭预览
function closePreview() {
document.getElementById('pdfModal').style.display = 'none';
pdfDoc = null; // 释放资源
currentPageNum = 1;
}
var VUE = null
window.addEventListener("load", function () {
VUE = new Vue({
el: '#app',
data() {
return {
detailInfo:{}
}
},
created() {
let params = gemhoUtil.getUrlParams()
console.log(params);
this.merId = params.merId
},
mounted() {
this.detail()
},
methods: {
detail() { // 隐患详情
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
});
http2.post({
serviceId: API_KEY_MAP["no-page"]['id'],
interfacePublicKey: API_KEY_MAP["no-page"]["publicKey"],
interfacePrivateKey: API_KEY_MAP["no-page"]["privateKey"],
reqParams: {
sign: 17, // 隐患详情
safetyId: gemhoUtil.getParameter('id'),
}
}, (res) => {
if (!res) { // 中台返回为undefined 重新请求
vant.Toast.clear()
setTimeout(() => {
this.detail()
}, 0);
return
}
if (res) {
console.log('接口回调数据', JSON.parse(res))
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0);
this.detailInfo = JSON.parse(res).data
if(this.detailInfo.file){
this.detailInfo.fileName = this.detailInfo.file.split('/')[this.detailInfo.file.split('/').length-1]
}
console.log(this.detailInfo,'sssss')
}
})
},
async previewFile(pdfUrl1) {
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
const pdfUrl = this.detailInfo.file //"http://192.168.2.11:8848/gaoquyingjih5-asd-jpaas/src/test/testPdf.pdf"
try {
// 1. 加载PDF文档（异步）
pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
console.log(pdfDoc, 'pdfjsLib.getDocument')
const totalPages = pdfDoc.numPages;
// 2. 更新总页数显示
document.getElementById('totalPages').textContent = totalPages;
// 3. 渲染第一页
currentPageNum = 1;
await renderPage(currentPageNum);
// 4. 显示模态框
document.getElementById('pdfModal').style.display = 'block';
vant.Toast.clear()
} catch (error) {
console.error('PDF加载失败:', error);
alert('PDF加载失败，请检查文件地址或网络');
vant.Toast.clear()
}
},
}
});
})
\ No newline at end of file
src/_anquan_changshi-detail-video.css 0 → 100644
View file @ 2f6b9aa2
/* 全局基础样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #app { background: #fff; font-family: 'PingFang SC', sans-serif; }
/* 视频播放区域 */
.video-container {
width: 100%;
height: 4rem; /* 固定高度或根据比例计算 */
background: #000;
margin-bottom: 0.2rem;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover; /* 视频填充方式 */
}
/* 标题与日期区域 */
.info-section {
padding: 0 0.3rem;
margin-bottom: 0.3rem;
}
.title-wrapper {
display: flex;
align-items: center;
gap: 0.15rem;
margin-bottom: 0.15rem;
}
.title-icon {
width: 0.4rem;
/* height: 0.4rem; */
}
.video-title {
font-size: 0.32rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
.video-date {
font-size: 0.28rem;
color: #737373;
}
/* 两列图文列表 */
.grid-list {
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
padding: 0 0.3rem;
}
.grid-item {
flex: 0 0 calc(50% - 0.1rem); /* 每行两列，间距0.2rem */
background: #fff;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.grid-item-image {
width: 100%;
height: 2rem;
object-fit: cover;
}
.grid-item-text {
padding: 0.15rem;
font-size: 0.28rem;
color: #333;
line-height: 1.4;
/* 单行溢出省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
\ No newline at end of file
src/_anquan_changshi-detail-video.html 0 → 100644
View file @ 2f6b9aa2
<!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, viewport-fit:cover">
<title>安全常识</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<body>
<div id="app">
<div class="wrapper">
<!-- 视频播放区域 -->
<div class="video-container">
<!-- <video src="http://192.168.2.37:8080/profile/upload/2025/05/20/test_20250520170318A001.mp4"></video> -->
<video id="myVideo" :poster="detailInfo.videoCover" controls>
<!-- <source src="video1.mp4" crossorigin type="video/mp4"> -->
<!-- <source src="test/testVideo.mp4" type="video/mp4"> -->
<!-- <source src="http://192.168.2.37:8080/profile/upload/2025/05/20/test_20250520170318A001.mp4" crossorigin type="video/mp4"> -->
<source :src="detailInfo.videoUrl" type="video/mp4">
您的浏览器不支持HTML5视频播放
</video>
</div>
<!-- 标题与日期 -->
<div class="info-section">
<div class="title-wrapper">
<img class="title-icon" src="../image/code/video.png">
<h3 class="video-title">{{detailInfo.name}}</h3>
</div>
<p class="video-date">日期：{{ detailInfo.uploadsDate }}</p>
</div>
<!-- 两列图文列表 -->
<!-- <div class="grid-list">
<div class="grid-item" v-for="item in 11" :key="item.id">
<img class="grid-item-image" src="https://dummyimage.com/340x206" alt="相关内容封面">
<p class="grid-item-text">{{ item }}</p>
</div>
</div> -->
</div>
</div>
</body>
</html>
\ No newline at end of file
src/_anquan_changshi-detail-video.js 0 → 100644
View file @ 2f6b9aa2
/**
* author: dabao
* date: 2024-03-15
* description: 商户首页
*/
var VUE = null
window.addEventListener("load", function () {
VUE = new Vue({
el: '#app',
data() {
return {
detailInfo:{}
}
},
created() {
},
mounted() {
this.detail()
},
methods: {
handleVideoError(e) {
const error = e.target.error;
console.error("视频播放错误:", {
code: error.code,
message: [
"未知错误",
"网络错误（文件不可达）",
"解码错误（格式/编码不支持）",
"URL无效"
][error.code - 1]
});
},
detail(){
// 这里添加获取数据的逻辑
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['no-page']['id'],
interfacePublicKey: API_KEY_MAP['no-page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['no-page']['privateKey'],
reqParams: {
sign: 17,
safetyId: gemhoUtil.getParameter('id'),
},
},
(res) => {
if (res) {
var result = JSON.parse(res)
this.detailInfo = result.data
// this.detailInfo.videoUrl = './test/testVideo.mp4'
console.log(result, 'detail result')
// 关键新增：视频地址更新后，强制重新加载视频
const videoEl = document.getElementById('myVideo');
if (videoEl) {
videoEl.load(); // 触发浏览器重新加载视频资源
}
console.log('动态视频地址：', this.detailInfo.videoUrl); // 打印验证地址是否正确
}
vant.Toast.clear()
}
)
}, 0)
},
}
});
})
\ No newline at end of file
src/_anquan_changshi.css
View file @ 2f6b9aa2
...@@ -139,8 +139,6 @@ body { ...@@ -139,8 +139,6 @@ body {
} }
.van-field__label { .van-field__label {
font-weight: bold; font-weight: bold;
} }
...@@ -149,59 +147,106 @@ body { ...@@ -149,59 +147,106 @@ body {
color: #737373; color: #737373;
} }
.subNavWrapper {
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
margin-top: -0.3rem;
}
.subNavWrapper .van-tab__text { .navToBtn {
color: #5B5B5B; color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
} }
.subNavWrapper .van-tab--active span { * {
color: #fff; margin: 0;
font-size: 0.28rem; padding: 0;
box-sizing: border-box;
} }
body {
.subNavWrapper .van-tabs__nav--card { font-family: Arial, sans-serif;
border: none !important; background: #f5f5f5;
} }
.subNavWrapper .van-tabs--card { .container {
margin-bottom: 0.3rem; display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
justify-content: center;
gap: .2rem;
/* 卡片间距 */
box-sizing: border-box;
padding-bottom: .2rem;
/* padding: 10px;
*/
} }
.subNavWrapper .van-tabs__nav--card .van-tab { .card {
color: #5B5B5B; /* flex: 0 0 calc(50% - 5px); */
border: none !important; flex: 0 0 46%;
/* 每行两个卡片，减去间距的一半 */
background: white;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
} }
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active { .card:hover {
color: #FFFFFF; transform: translateY(-5px);
background: #58A5E8;
border-radius: 0.4rem;
} }
.subNavWrapper .van-list { .image-wrapper {
background: #F5F6FA; position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 比例 */
overflow: hidden;
} }
.subNavWrapper .van-cell { .image-wrapper img {
margin-bottom: .3rem; position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
} }
.subNavWrapper .van-tabs__nav { .image-info {
background: #F5F6FA; position: absolute;
margin: 0; bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
color: white;
font-size: 14px;
} }
.card-title {
padding: 15px;
font-size: .28rem;
font-weight: bold;
color: #333;
line-height: 1.4;
/* 新增多行溢出省略样式 */
overflow: hidden; /* 隐藏溢出内容 */
display: -webkit-box; /* 弹性盒模型 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 2; /* 限制2行 */
max-height: calc(0.28rem * 1.4 * 2 + 30px); /* 2行高度 + 上下padding（15px*2） */
}
.navToBtn { .list-item {
color: #5B5B5B; margin-bottom: 0.2rem;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
} }
.container .van-cell {
padding: 12px 16px;
height: 1.5rem;
}
\ No newline at end of file
src/_anquan_changshi.html
View file @ 2f6b9aa2
...@@ -7,95 +7,13 @@ ...@@ -7,95 +7,13 @@
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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
justify-content: center;
gap: .2rem;
/* 卡片间距 */
box-sizing: border-box;
padding-bottom: .2rem;
/* padding: 10px;
*/
}
.card {
/* flex: 0 0 calc(50% - 5px); */
flex: 0 0 46%;
/* 每行两个卡片，减去间距的一半 */
background: white;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.image-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 比例 */
overflow: hidden;
}
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
color: white;
font-size: 14px;
}
.card-title {
padding: 15px;
font-size: .28rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
</style>
</head> </head>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="wrapper" v-cloak> <div class="wrapper" v-cloak>
<div class="header"> <div class="header">
<van-search v-model="merName" show-action placeholder="请输入商家关键词" @search="onSearch"> <van-search v-model="name" show-action placeholder="请输入安全常识名称" @search="onSearch">
<template #action> <template #action>
<div @click="onSearch"></div> <div @click="onSearch"></div>
</template> </template>
...@@ -103,31 +21,33 @@ ...@@ -103,31 +21,33 @@
</div> </div>
<!-- Tab栏 --> <!-- Tab栏 -->
<van-tabs v-model:active="activeTab" @click="clickTab" title-active-color="#1989fa" line-height="2px" <van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px" @change="tabChange"
style="margin-bottom: 15px;">
<van-tab :title="item.title" :badge="item.msgNum||null" v-for="item in tabList"></van-tab>
</van-tabs>
<!-- <van-tabs v-model:active="activeTab" @change="tabChange" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;"> 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-tab title="应知应会"></van-tab> <van-tab title="应知应会"></van-tab>
<!-- <van-tab title="培训演练"></van-tab> --> </van-tabs> -->
</van-tabs>
<!-- 隐患列表 --> <!-- 隐患列表 -->
<van-list> <van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
<div class="container"> <div class="container" v-if="activeTab!=2">
<div class="card" v-for="item in 11"> <div class="card" v-for="item in hazardList" @click="viewDetail(item)">
<div class="image-wrapper"> <div class="image-wrapper">
<img src="https://dummyimage.com/340x206" alt="视频封面1"> <img :src="item.videoCover">
</div> </div>
<div class="card-title">这是第一个视频标题，展示基本样式效果</div> <div class="card-title">{{ item.name }}</div>
</div> </div>
</div> </div>
</van-list> <div style="width: 100%; background-color: #f5f6fa;padding-top: .2rem;" v-if="activeTab==2" v-for="item in hazardList">
<!-- <van-list> <van-cell v-for="item in hazardList" :key="item.id" class="list-item" @click="viewDetail(item)">
<van-cell v-for="item in 11" <!-- 第一行：隐患描述 -->
style="position: relative;margin-bottom: 0.25rem;margin-top: 0.25rem;" @click="viewDetail(item)">
<div style="width: 100%;">
<div style=" <div style="
position: relative; position: relative; /* 新增：相对定位容器 */
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -135,17 +55,18 @@ ...@@ -135,17 +55,18 @@
font-size: 0.3rem; font-size: 0.3rem;
font-weight: bold; font-weight: bold;
font-family: PingFang SC; font-family: PingFang SC;
">隐患排查不松懈</div> ">
{{ item.name }}
<div style="position: relative: flex; justify-content: space-between; margin: 8px 0;">
<span
style="color: #737373; font-size: 0.28rem;">{{ '2025/2/12' }}</span>
<van-icon name="arrow" style="position: absolute; right:0;top:.5rem;font-size:.4rem;" @click="viewDetail(item,'YH_XQ')" />
</div> </div>
<div class="date-tag-wrapper">
<spa
style="color: #737373; font-size: 0.28rem;">日期：{{ item.checkDate || '-' }}</spa>
<van-icon name="arrow" class="navToBtn" />
</div> </div>
</van-cell> </van-cell>
</van-list> --> </div>
</van-list>
</div> </div>
</body> </body>
......
src/_anquan_changshi.js
View file @ 2f6b9aa2
...@@ -9,41 +9,29 @@ window.addEventListener("load", function () { ...@@ -9,41 +9,29 @@ window.addEventListener("load", function () {
el: '#app', el: '#app',
data() { data() {
return { return {
merName: '', name:'',
userType: gemhoUtil.getCookie('userType'),
shanghuName: '',
// 新增子Tab数据 // 新增子Tab数据
subActiveTab: 0, hazardList: [
hazardList: [// 更多示例数据... // 更多示例数据...
], ],
activeTab: 0, activeTab: 0,
showTimePicker: false, status: '',
// 新增以下数据
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
},
checkList: [{
id: 1,
date: '2024-03-15',
result: '合格'
},
{
id: 2,
date: '2024-03-14',
result: '不合格'
}
],
merId: '', merId: '',
merInformation: { // 新增商户信息对象 showSearch: false, // 控制搜索框的显示和隐藏
// 整改状态 0：待整改 1：已整改 2：待审核 3：整改逾期
}, tabList: [
jcLisk: [{ // 新增检查列表数据 { name: '1', title: '常识视频', msgNum: 0, },
}], { name: '2', title: '警示视频', msgNum: 0, },
UserPermission: false, // 用户是否具有安全检查权限 { name: '3', title: '应知应会', msgNum: 0, },
],
loading: false,
finished: false,
page: 0,
size: 6,
total: 0,
type: '1' // 常识视频 2，3
} }
}, },
created() { created() {
...@@ -52,209 +40,25 @@ window.addEventListener("load", function () { ...@@ -52,209 +40,25 @@ window.addEventListener("load", function () {
this.merId = params.merId this.merId = params.merId
}, },
mounted() { mounted() {
this.getShopInfo() // 获取商户信息 this.init()
this.getShopDate() // 获取商户统计信息
this.getYhList() // 获取隐患记录
// this.getJcList() // 获取检查列表
this.getUserPermission()//获取用户是否具有安全检查资格
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改', '整改逾期'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.rectificationStatusName === statusMap[this.subActiveTab]
);
}
}, },
methods: { methods: {
onSearch() { init() {
console.log('xxxx', this.merName)
this.getList() this.getList()
},
getList(){
}, },
navTo(url) { onSearch() {
// gemhoUtil.nav2asd(url) console.log('xxxx', this.name)
let params = gemhoUtil.getUrlParams() this.getList()
if (url == 'check_info') {
params = {
...params,
flag: 'ADD',
pageName: '_shanghu_home'
}
}
let strurl = gemhoUtil.setParameter(`_${url}.html`, params)
gemhoUtil.navigatePage(strurl, '跳转中...')
},
clickTab() {
if (this.activeTab > 0) {
this.getJcList() // 获取检查列表
}
}, },
// 新增选择确认方法 reset() {
onConfirmType(value) { this.page = 0
this.formData.type = value; this.size = 6
this.showTypePicker = false; this.total = 0
}, this.hazardList = []
onConfirmTime(time) {
this.formData.businessHours = time;
this.showTimePicker = false;
},
statusTagType(status) {
const types = {
'待审核': 'warning',
'待整改': 'primary',
'已整改': 'success',
'整改逾期': 'danger',
};
return types[status] || '';
},
viewDetail(item, type) {
let params = {
id: item.id,
merId: this.merId,
pageName: '_shanghu_home'
}
// 这里添加跳转逻辑
if (type === 'YH_XQ') {
params = {
...params,
flag: item.rectificationStatus,
}
} else {
params = {
...params,
flag: 'JC_XQ',
}
}
let url = gemhoUtil.setParameter('_check_info.html', params)
gemhoUtil.navigatePage(url, '跳转中...')
}, },
//获取商户统计信息 getList(){
getShopDate() { // 这里添加获取数据的逻辑
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['no-page']['id'],
interfacePublicKey: API_KEY_MAP['no-page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['no-page']['privateKey'],
reqParams: {
sign: 6,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
merId: this.merId,
sort: 'lawId,desc',
},
},
(res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => {
// this.getList()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
this.merInformation = { ...this.merInformation, ...result.data }
}
}
)
}, 0)
},
//获取商户信息
getShopInfo() {
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['no-page']['id'],
interfacePublicKey: API_KEY_MAP['no-page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['no-page']['privateKey'],
reqParams: {
sign: 11,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
merId: this.merId,
sort: 'lawId,desc',
},
},
(res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => {
// this.getList()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
this.merInformation = { ...this.merInformation, ...result.data }
}
}
)
}, 0)
},
//获取隐患记录
getYhList() {
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: 3,
merId: this.merId,
status: '',
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
sort: 'lawId,desc',
},
},
(res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => {
// this.getList()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
this.hazardList = result.rows
console.log(result)
}
}
)
}, 0)
},
//获取检查列表
getJcList() {
// 更多示例数据...
vant.Toast.loading({ vant.Toast.loading({
message: '正在加载...', message: '正在加载...',
forbidClick: true, forbidClick: true,
...@@ -267,12 +71,12 @@ window.addEventListener("load", function () { ...@@ -267,12 +71,12 @@ window.addEventListener("load", function () {
interfacePublicKey: API_KEY_MAP['page']['publicKey'], interfacePublicKey: API_KEY_MAP['page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['page']['privateKey'], interfacePrivateKey: API_KEY_MAP['page']['privateKey'],
reqParams: { reqParams: {
sign: 1, sign: 16,
type: this.activeTab, // merId: this.merId ? this.merId : '',
merId: this.merId, name: this.name,
pageNum: this.page++, // 每次请求增加下一页 pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size, pageSize: this.size,
sort: 'lawId,desc', type: (this.activeTab+1)+''
}, },
}, },
(res) => { (res) => {
...@@ -281,18 +85,19 @@ window.addEventListener("load", function () { ...@@ -281,18 +85,19 @@ window.addEventListener("load", function () {
vant.Toast.clear() vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值 this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => { setTimeout(() => {
// this.getList() this.getList()
}, 0) }, 0)
return return
} }
if (res) { if (res) {
var result = JSON.parse(res) var result = JSON.parse(res)
if (result.code !== 200 && result.data == null) { console.log(result, 'result')
return this.loading = false; // 加载状态结束
} this.hazardList.push(...result.rows);
this.jcLisk = result.rows this.total = result.total
if (this.page * this.size >= this.total) { if (this.page * this.size >= this.total) {
this.finished = true // 下滑不在刷新数据 this.finished = true; // 下滑不在刷新数据
} }
} }
this.loading = false this.loading = false
...@@ -300,67 +105,44 @@ window.addEventListener("load", function () { ...@@ -300,67 +105,44 @@ window.addEventListener("load", function () {
this.$nextTick(() => { this.$nextTick(() => {
vant.Toast.clear() vant.Toast.clear()
}) })
}, 0) }, 0);
this.$nextTick(() => {
// 滚动条跳转位置
window.scrollTo(0, gemhoUtil.getCookie('scrollPosition'))
})
} }
) )
}, 0) }, 0)
}, },
//获取用户是否有安全检查的权限 tabChange(title) {
getUserPermission() { console.log('tab 切换', this.activeTab)
setTimeout(() => {
http2.post( this.reset()
{ this.getList()
serviceId: API_KEY_MAP['no-page']['id'],
interfacePublicKey: API_KEY_MAP['no-page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['no-page']['privateKey'],
reqParams: {
sign: 13,
merId: this.merId,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
sort: 'lawId,desc',
}, },
init() {
this.getList()
}, },
(res) => { onSearch() {
if (!res) { this.reset()
// 中台返回为undefined 重新请求 this.getList()
vant.Toast.clear() },
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值 // 新增选择确认方法
setTimeout(() => {
// this.getList() viewDetail(item, type) {
}, 0) let param = {
return id: item.id,
} pageName: '_anquan_changshi',
if (res) {
var result = JSON.parse(res)
if (result.code !== 200 && result.data == null) {
return
}
console.log(result.data, result, '获取用户是否具有安全检查资格');
this.UserPermission = result.data.length > 0 ? true : false
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'))
})
} }
) let pageName = ''
}, 0) if(item.type === '3'){ // 应知应会 跳转富文本详情
pageName = '_anquan_changshi-detail-text.html'
}else{
pageName = '_anquan_changshi-detail-video.html'
} }
let url = gemhoUtil.setParameter(pageName, param)
console.log(url)
gemhoUtil.navigatePage(url, '跳转中...')
},
} }
}); });
......
src/_pdf_viewer.html 0 → 100644
View file @ 2f6b9aa2
<!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, viewport-fit:cover">
<title>PDF预览Demo</title>
<!-- 引入pdf.js核心库（CDN方式） -->
<script src="https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.min.js"></script>
<style>
/* 全局重置样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'PingFang SC', sans-serif; background: #f5f5f5; }
/* 主内容区 */
.main-content { padding: 0.3rem; }
/* 附件链接样式 */
.attachment-section {
background: #fff;
border-radius: 8px;
padding: 0.3rem;
margin-bottom: 0.3rem;
}
.attachment-title {
font-size: 0.32rem;
color: #333;
font-weight: 600;
margin-bottom: 0.2rem;
}
.attachment-link {
display: flex;
align-items: center;
gap: 0.15rem;
padding: 0.2rem;
background: #f8f9fa;
border-radius: 6px;
color: #1081E3;
font-size: 0.28rem;
cursor: pointer;
transition: background 0.2s;
}
.attachment-link:hover { background: #f0f2f5; }
/* PDF预览模态框 */
.pdf-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
padding: 0.5rem 0;
}
.pdf-container {
position: relative;
width: 90%;
height: 90%;
margin: 0 auto;
background: #fff;
border-radius: 8px;
overflow: auto; /* 长文档滚动支持 */
}
.pdf-controls {
position: absolute;
bottom: 0.2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.3rem;
color: #fff;
font-size: 0.3rem;
}
.control-btn {
padding: 0.1rem 0.3rem;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
cursor: pointer;
}
.close-btn {
/* position: absolute;
top: -0.6rem;
right: 0;
color: #fff;
font-size: 0.6rem;
cursor: pointer; */
position: absolute;
top: 0.4rem;
right: 6px;
color: #211a1a;
font-size: 0.6rem;
cursor: pointer;
width: 1rem;
height: 1rem;
z-index: 99999;
background: #000;
}
</style>
</head>
<body>
<div class="main-content">
<!-- 附件入口 -->
<div class="attachment-section">
<h3 class="attachment-title">相关附件</h3>
<!-- 点击触发PDF预览 -->
<div class="attachment-link" onclick="previewPdf()">
<van-icon name="paperclip" size="0.32rem" />
<span>危险化学品存储规范.pdf</span>
</div>
</div>
</div>
<!-- PDF预览模态框 -->
<div class="pdf-modal" id="pdfModal">
<!-- <div class="control-btn" onclick="closePreview()">关闭</div> -->
<div class="pdf-container" style="padding-top: 1rem;">
<div id="pdfViewer"></div> <!-- PDF内容渲染区 -->
<div class="pdf-controls">
<div class="control-btn" onclick="prevPage()">上一页</div>
<span>第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页</span>
<div class="control-btn" onclick="nextPage()">下一页</div>
</div>
<van-icon name="cross" class="close-btn" onclick="closePreview()" />
</div>
</div>
<script>
// pdf.js核心配置（解决Worker跨域问题）
// 修改后
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.worker.min.js';
let pdfDoc = null; // PDF文档实例
let currentPageNum = 1; // 当前页码
// 预览PDF主函数
async function previewPdf(pdfUrl) {
pdfUrl = "http://192.168.2.11:8848/gaoquyingjih5-asd-jpaas/src/test/testPdf.pdf"
try {
// 1. 加载PDF文档（异步）
pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
console.log(pdfDoc, 'pdfjsLib.getDocument')
const totalPages = pdfDoc.numPages;
// 2. 更新总页数显示
document.getElementById('totalPages').textContent = totalPages;
// 3. 渲染第一页
currentPageNum = 1;
await renderPage(currentPageNum);
// 4. 显示模态框
document.getElementById('pdfModal').style.display = 'block';
} catch (error) {
console.error('PDF加载失败:', error);
alert('PDF加载失败，请检查文件地址或网络');
}
}
// 渲染指定页码
async function renderPage(pageNum) {
const pdfViewer = document.getElementById('pdfViewer');
pdfViewer.innerHTML = ''; // 清空旧内容
// 获取指定页并渲染到canvas
const page = await pdfDoc.getPage(pageNum);
const viewport = page.getViewport({ scale: 1.2 }); // 调整缩放比例控制清晰度
// 创建canvas并设置尺寸
const canvas = document.createElement('canvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = '100%'; // 自适应容器宽度
// 渲染到canvas
const context = canvas.getContext('2d');
await page.render({ canvasContext: context, viewport: viewport }).promise;
// 添加到DOM
pdfViewer.appendChild(canvas);
// 更新当前页码显示
document.getElementById('currentPage').textContent = pageNum;
}
// 上一页
function prevPage() {
if (pdfDoc && currentPageNum > 1) {
currentPageNum--;
renderPage(currentPageNum);
}
}
// 下一页
function nextPage() {
if (pdfDoc && currentPageNum < pdfDoc.numPages) {
currentPageNum++;
renderPage(currentPageNum);
}
}
// 关闭预览
function closePreview() {
alert('关闭')
document.getElementById('pdfModal').style.display = 'none';
pdfDoc = null; // 释放资源
currentPageNum = 1;
}
</script>
</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