Skip to content

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

add：应知应会详情富文本 附件预览

parent b818670b
Hide whitespace changes
Inline Side-by-side
Showing with 301 additions and 161 deletions
src/_anquan_changshi-detail-text.css
View file @ d91a4147
...@@ -10,22 +10,6 @@ ...@@ -10,22 +10,6 @@
font-family: 'PingFang SC', sans-serif; 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 { .info-section {
padding: 0 0.3rem; padding: 0 0.3rem;
...@@ -50,53 +34,6 @@ ...@@ -50,53 +34,6 @@
height: 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;
}
/* 新增：附件区域样式 */ /* 新增：附件区域样式 */
.attachment-section { .attachment-section {
...@@ -126,4 +63,64 @@ ...@@ -126,4 +63,64 @@
.attachment-link:hover { .attachment-link:hover {
background: #f0f2f5; 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
View file @ d91a4147
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <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> <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> <script type="text/javascript" src="../sdk/includeHead.js"></script>
</head> </head>
<body> <body>
...@@ -20,23 +21,41 @@ ...@@ -20,23 +21,41 @@
<!-- 新增：附件链接区域 --> <!-- 新增：附件链接区域 -->
<div class="attachment-section"> <div class="attachment-section">
<h4 class="attachment-title">相关附件</h4>
<div class="attachment-list"> <div class="attachment-list">
<!-- 可通过v-for动态渲染多个附件 -->
<div class="attachment-link" @click="previewFile"> <div class="attachment-link" @click="previewFile">
<van-icon name="paperclip" size="0.32rem" /> <van-icon name="paperclip" size="0.32rem" />
<span>危险化学品存储规范.pdf</span> <span>{{detailInfo.file}}</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 两列图文列表 --> <!-- 两列图文列表 -->
<div class="grid-list"> <div class="grid-list" v-html="detailInfo.content">
收快递费了时代峰峻 收快递费了时代峰峻
</div> </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 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> </div>
</body> </body>
</html> </html>
\ No newline at end of file
src/_anquan_changshi-detail-text.js
View file @ d91a4147
...@@ -3,36 +3,94 @@ ...@@ -3,36 +3,94 @@
* date: 2024-03-15 * date: 2024-03-15
* description: 商户首页 * 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 var VUE = null
window.addEventListener("load", function () { window.addEventListener("load", function () {
VUE = new Vue({ VUE = new Vue({
el: '#app', el: '#app',
data() { data() {
return { return {
merName:'', detailInfo:{}
userType: gemhoUtil.getCookie('userType'),
shanghuName: '',
// 新增子Tab数据
hazardList: [
// 更多示例数据...
],
activeTab: '',
status: '',
merId: '',
showSearch: false, // 控制搜索框的显示和隐藏
// 整改状态 0：待整改 1：已整改 2：待审核 3：整改逾期
tabList: [
{ name: '', title: '全部', msgNum: 0, },
{ name: '2', title: '待审核', msgNum: 0, },
{ name: '0', title: '待整改', msgNum: 0, },
{ name: '1', title: '已整改', msgNum: 0, },
{ name: '3', title: '整改逾期', msgNum: 0, },
],
loading: false,
finished: false,
page: 0,
size: 6,
total: 0,
} }
}, },
created() { created() {
...@@ -41,99 +99,165 @@ window.addEventListener("load", function () { ...@@ -41,99 +99,165 @@ window.addEventListener("load", function () {
this.merId = params.merId this.merId = params.merId
}, },
mounted() { mounted() {
this.detail()
}, },
methods: { methods: {
previewFile(){ detail() { // 隐患详情
location.href = "http://192.168.2.11:8848/gaoquyingjih5-asd-jpaas/src/test/testPdf.pdf" 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
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()
}
}, },
// previewFile(){
// // location.href = "http://192.168.2.11:8848/gaoquyingjih5-asd-jpaas/src/test/testPdf.pdf"
// location.href = '_pdf_viewer.html'
// },
onSearch() { onSearch() {
console.log('xxxx', this.merName) console.log('xxxx', this.merName)
this.getList() this.getList()
}, },
reset() { reset() {
this.page = 0 this.page = 0
this.size = 6 this.size = 6
this.total = 0 this.total = 0
this.hazardList = [] this.hazardList = []
}, },
getList(){ getList() {
// 这里添加获取数据的逻辑 // 这里添加获取数据的逻辑
vant.Toast.loading({ vant.Toast.loading({
message: '正在加载...', message: '正在加载...',
forbidClick: true, forbidClick: true,
loadingType: 'spinner', loadingType: 'spinner',
}) })
setTimeout(() => { setTimeout(() => {
http2.post( http2.post(
{ {
serviceId: API_KEY_MAP['page']['id'], serviceId: API_KEY_MAP['page']['id'],
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: 3, sign: 3,
// merId: this.merId ? this.merId : '', // merId: this.merId ? this.merId : '',
merName: this.shanghuName, merName: this.shanghuName,
pageNum: this.page++, // 每次请求增加下一页 pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size, pageSize: this.size,
},
}, },
}, (res) => {
(res) => { if (!res) {
if (!res) { // 中台返回为undefined 重新请求
// 中台返回为undefined 重新请求 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) console.log(result, 'result')
console.log(result, 'result') this.loading = false; // 加载状态结束
this.loading = false; // 加载状态结束 this.hazardList.push(...result.rows);
this.hazardList.push(...result.rows); this.total = result.total
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
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0);
} }
this.loading = false
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0);
}
) )
}, 0) }, 0)
}, },
tabChange(title) { tabChange(title) {
console.log('tab 切换', title) console.log('tab 切换', title)
this.reset() this.reset()
this.getList() this.getList()
}, },
init() { init() {
this.getList() this.getList()
}, },
onSearch() { onSearch() {
this.reset() this.reset()
this.getList() this.getList()
}, },
// 新增选择确认方法 // 新增选择确认方法
viewDetail(item, type) { viewDetail(item, type) {
let param = { let param = {
id: item.id, id: item.id,
pageName: '_anquan_changshi', pageName: '_anquan_changshi',
} }
let url = gemhoUtil.setParameter('_anquan_changshi-detail.html', param) let url = gemhoUtil.setParameter('_anquan_changshi-detail.html', param)
console.log(url) console.log(url)
gemhoUtil.navigatePage(url, '跳转中...') gemhoUtil.navigatePage(url, '跳转中...')
}, },
} }
}); });
......
src/_anquan_changshi.html
View file @ d91a4147
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<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>
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
font-weight: bold; font-weight: bold;
font-family: PingFang SC; font-family: PingFang SC;
"> ">
{{ item.description }} {{ item.name }}
</div> </div>
<div class="date-tag-wrapper"> <div class="date-tag-wrapper">
......
src/_anquan_changshi.js
View file @ d91a4147
...@@ -9,7 +9,7 @@ window.addEventListener("load", function () { ...@@ -9,7 +9,7 @@ window.addEventListener("load", function () {
el: '#app', el: '#app',
data() { data() {
return { return {
merName:'', name:'',
userType: gemhoUtil.getCookie('userType'), userType: gemhoUtil.getCookie('userType'),
shanghuName: '', shanghuName: '',
// 新增子Tab数据 // 新增子Tab数据
...@@ -47,7 +47,7 @@ window.addEventListener("load", function () { ...@@ -47,7 +47,7 @@ window.addEventListener("load", function () {
this.getList() this.getList()
}, },
onSearch() { onSearch() {
console.log('xxxx', this.merName) console.log('xxxx', this.name)
this.getList() this.getList()
}, },
...@@ -73,7 +73,7 @@ window.addEventListener("load", function () { ...@@ -73,7 +73,7 @@ window.addEventListener("load", function () {
reqParams: { reqParams: {
sign: 16, sign: 16,
// merId: this.merId ? this.merId : '', // merId: this.merId ? this.merId : '',
merName: this.shanghuName, name: this.name,
pageNum: this.page++, // 每次请求增加下一页 pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size, pageSize: this.size,
type: (this.activeTab+1)+'' type: (this.activeTab+1)+''
......
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