Skip to content

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

add：特种作业详情页

parent aeda04b1
Hide whitespace changes
Inline Side-by-side
Showing with 453 additions and 97 deletions
src/_tezhongzuoye.css
View file @ 58975c71
......@@ -158,4 +158,21 @@ body {
}
.tab1-row2 span{
display: inline-block; width: 50%;
}
.reminder-badge {
position: absolute;
top: 0.15rem;
right: 0.1rem;
min-width: .8rem;
text-align: left;
text-indent: .16rem;
height: 0.36rem;
line-height: 0.36rem;
font-size: 0.2rem;
color: #FFFFFF;
background-image: url(../image/code/home/tip.png);
background-size: contain;
background-repeat: no-repeat;
}
\ No newline at end of file
src/_tezhongzuoye.html
View file @ 58975c71
......@@ -12,13 +12,20 @@
<div id="app">
<div class="wrapper" v-cloak>
<!-- 商户头部信息 -->
<div class="header">
<div class="header" v-if="userType=='shop'">
<van-search v-model="title" show-action placeholder="请输入特种作业类型" @search="onSearch">
<template #action>
<div @click="onSearch"></div>
</template>
</van-search>
</div>
<div class="header" v-if="userType!='shop'">
<van-search v-model="merName" show-action placeholder="请输入商家名称关键字" @search="onSearch">
<template #action>
<div @click="onSearch"></div>
</template>
</van-search>
</div>
<!-- 功能 -->
<button v-if="userType!=='shop'" type="info" class="func_btn" @click="viewDetail"><span>+</span>特种作业报备</button>
......@@ -26,6 +33,7 @@
<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
<van-cell v-for="item in hazardList" :key="item.id" @click="viewDetail(item)">
<div style="width: 100%;position: relative;">
<div class="reminder-badge" v-if="item.msgFlag">新</div>
<div class="tab1-row1" v-if="userType=='wgy'||userType=='safety'">
<span>商家名称：{{ item.exerciseDate }}</span>
</div>
......@@ -33,8 +41,11 @@
<span>特种作业类型：{{ item.exerciseDate }}</span>
</div>
<div class="tab1-row1">
<span>作业时间：{{ item.exerciseDate }}</span>
<span>作业时间起始：{{ item.exerciseDate }}</span>
</div>
<div class="tab1-row1">
<span>作业时间结束：{{ item.exerciseDate }}</span>
</div>
<div class="tab1-row1">
<span>作业公司：{{ item.exerciseDate }}</span>
</div>
......
src/_tezhongzuoye.js
View file @ 58975c71
......@@ -16,6 +16,7 @@ window.addEventListener("load", function() {
hazardList: [ // 更多示例数据...
],
merId: '',
merName: '',
loading: false,
finished: false,
page: 1,
......@@ -66,6 +67,7 @@ window.addEventListener("load", function() {
reqParams: {
sign: 30,
title: this.title,
merName: this.merName,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
sort: 'lawId,desc',
......@@ -88,7 +90,6 @@ window.addEventListener("load", function() {
return
}
this.hazardList.push(...result.rows)
this.reMark = result.reMark
this.total = result.total
if (this.page * this.size >= this.total) {
this.finished = true // 下滑不在刷新数据
......
src/_tezhongzuoye_detail-text.css 0 → 100644
View file @ 58975c71
/* 全局基础样式 */
* {
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/_tezhongzuoye_detail-text.html 0 → 100644
View file @ 58975c71
<!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="../sdk/pdf.js"></script>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<link href="../sdk/quilljs/quill.snow.css" rel="stylesheet">
<script src="../sdk/quilljs/quill.js"></script>
</head>
<body>
<div id="app">
<div id="editor-container"></div>
</div>
</body>
</html>
\ No newline at end of file
src/_tezhongzuoye_detail-text.js 0 → 100644
View file @ 58975c71
/**
* author: dabao
* date: 2024-03-15
* description: 商户首页
*/
var VUE = null
var quill = null
window.addEventListener("load", function () {
VUE = new Vue({
el: '#app',
data() {
return {
detailInfo: {},
}
},
created() {
},
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, // 隐患详情
type: gemhoUtil.getParameter('type'),
}
}, (res) => {
if (res) {
console.log('接口回调数据', JSON.parse(res))
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0);
this.detailInfo = JSON.parse(res).data
// 初始化编辑器
quill = new Quill('#editor-container', {
theme: 'snow', readOnly: true, modules: {
toolbar: false // 关键配置：禁用工具栏
},
});
quill.root.innerHTML = this.detailInfo.content || ''
}
})
},
}
});
})
\ No newline at end of file
src/_tezhongzuoye_detail.html
View file @ 58975c71
<!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>
<!-- 在 includeHead.js 之后添加环境判断 -->
<script src="../sdk/includeHead.js"></script>
<script type="text/javascript" src="../sdk/axios_http3.js"></script>
</head>
<body>
<div id="app" class="page_wrapper" v-cloak>
<div class="third-layer">
<!-- form开始 -->
<div class="form-container">
<div class="form-item">
<span class="form-label title_require">单位名称</span>
<div class="form-input-wrap">
{{ formData.xxx || '养大酸奶有限公司' }}
</div>
<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>
<!-- 在 includeHead.js 之后添加环境判断 -->
<script src="../sdk/includeHead.js"></script>
<script type="text/javascript" src="../sdk/axios_http3.js"></script>
</head>
<body>
<div id="app" class="page_wrapper" v-cloak>
<div class="third-layer">
<!-- form开始 -->
<div class="form-container">
<div class="form-item">
<span class="form-label title_require">单位名称</span>
<div class="form-input-wrap" style="font-size: 15px;color: #666;">
{{ formData.xxx || '养大酸奶有限公司' }}
</div>
</div>
<div class="form-item">
<span class="form-label title_require">联系人</span>
<div class="form-input-wrap" style="font-size: 15px;color: #666;">
{{ formData.xxx || '养大酸奶有限公司' }}
</div>
</div>
<div class="form-item">
<span class="form-label title_require">电话</span>
<div class="form-input-wrap" style="font-size: 15px;color: #666;">
{{ formData.xxx || '养大酸奶有限公司' }}
</div>
</div>
<div class="form-item">
<span class="form-label title_require">特种作业类别</span>
<div class="form-input-wrap">
<select class="selector" v-model="formData.safetyTrainingType" :disabled="flag=='XQ'">
<option v-for="(item, i) in tabList4lv2" v-if="item.dictValue!='0'" :key="i"
:label="item.dictLabel" :value="item.dictValue">
</option>
</select>
</div>
<div class="form-item">
<span class="form-label title_require">联系人</span>
<div class="form-input-wrap">
{{ formData.xxx || '养大酸奶有限公司' }}
</div>
</div>
<div class="form-item">
<span class="form-label title_require">作业公司</span>
<div class="form-input-wrap">
<input type="text" v-model="formData.title" :disabled="flag=='XQ'" class="form-input"
placeholder="">
</div>
<div class="form-item">
<span class="form-label title_require">电话</span>
<div class="form-input-wrap">
{{ formData.xxx || '养大酸奶有限公司' }}
</div>
</div>
<div class="form-item">
<span class="form-label title_require">作业人员姓名</span>
<div class="form-input-wrap">
<input type="text" v-model="formData.participantsNum" :disabled="flag=='XQ'" class="form-input"
placeholder="">
</div>
<div class="form-item">
<span class="form-label title_require">特种作业类别</span>
<div class="form-input-wrap">
<select class="selector" v-model="formData.safetyTrainingType" :disabled="flag=='XQ'">
<option v-for="(item, i) in tabList4lv2" v-if="item.dictValue!='0'" :key="i"
:label="item.dictLabel" :value="item.dictValue">
</option>
</select>
</div>
</div>
<!-- 详情模式 -->
<div class="form-label form-label-div" style="width: 4rem;">上传作业证件（最多6张）</div>
<div class="img-wrapper">
<div style="position: relative;" v-for="(imgItem, index) in formData.images">
<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
@click="showImage(formData.images, index)" />
<div v-if="flag=='XG'" class="van-uploader__preview-delete"
@click="handleDeleteFloorPlan(index, 'floorPlan')"><i
class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
</div>
<div class="form-item">
<span class="form-label title_require">作业公司</span>
<div class="form-input-wrap">
<input type="text" v-model="formData.title" :disabled="flag=='XQ'" class="form-input"
placeholder="">
</div>
<div v-if="formData.images.length<6 && flag=='ADD' ">
<van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'floorPlan')"
class="uploader-wrapper" :deletable="false" :preview-image="false">
<img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset="">
</van-uploader>
</div>
</div>
<div class="form-item">
<span class="form-label title_require">作业人员姓名</span>
<div class="form-input-wrap">
<input type="text" v-model="formData.participantsNum" :disabled="flag=='XQ'"
class="form-input" placeholder="">
</div>
<!-- 原作业时间部分替换为 -->
<div class="form-item date-wrapper">
<span class="form-label title_require" style="width: 2rem;">作业时间(起始)</span>
<div class="form-input-wrap" style="display: flex; align-items: center; gap: 0.2rem;">
<van-field readonly v-model="formData.startTime" :disabled="flag=='XQ'" placeholder="选择开始时间"
class="form-input" @click="showStartDatePickerHandler" />
</div>
<!-- 详情模式 -->
<div class="form-label form-label-div">上传作业证件（最多6张）</div>
<div class="img-wrapper">
<div style="position: relative;" v-for="(imgItem, index) in formData.images">
<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
@click="showImage(formData.images, index)" />
<div v-if="flag=='XG'" class="van-uploader__preview-delete"
@click="handleDeleteFloorPlan(index, 'floorPlan')"><i
class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
</div>
<div v-if="formData.images.length<6 && flag=='ADD' ">
<van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'floorPlan')"
class="uploader-wrapper" :deletable="false" :preview-image="false">
<img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt=""
srcset="">
</van-uploader>
</div>
</div>
<div class="form-item date-wrapper">
<span class="form-label title_require" style="width: 2rem;">作业时间(结束)</span>
<div class="form-input-wrap" style="display: flex; align-items: center; gap: 0.2rem;">
<van-field readonly v-model="formData.endTime" :disabled="flag=='XQ'" placeholder="选择结束时间"
class="form-input" @click="showEndDatePickerHandler" />
</div>
<div><van-checkbox v-model="formData.check">
我已阅读
<span style="color:blue; font-size:.2rem;">《提醒事项》</span>
</van-checkbox>
</div>
<!-- 原日期选择器替换为两个 -->
<van-popup v-model="showStartDatePicker" position="bottom">
<van-datetime-picker type="datehour"
:min-date="minDate"
:max-date="maxDate"
@confirm="onStartDateConfirm"
@cancel="showStartDatePicker = false"
/>
</van-popup>
<van-popup v-model="showEndDatePicker" position="bottom">
<van-datetime-picker type="datehour"
:min-date="minDate"
:max-date="maxDate"
@confirm="onEndDateConfirm"
@cancel="showEndDatePicker = false"
/>
</van-popup>
<div style="margin-top: .1rem;"><van-checkbox v-model="formData.check" icon-size="16px" style="color:blue; font-size:.2rem;">
我已阅读
<span style="color:blue; ">《提醒事项》</span>
</van-checkbox>
<!-- form结束 -->
<button class="save-btn" style="margin-left: 50%; transform: translateX(-50%);" v-if="!formData.id"
<button class="save-btn" style="margin-top: .1rem;margin-left: 50%; transform: translateX(-50%);" v-if="!formData.id"
@click="submitForm">提交报备</button>
</div>
</div>
</div>
</body>
</body>
</html>
\ No newline at end of file
src/_tezhongzuoye_detail.js
View file @ 58975c71
......@@ -12,6 +12,8 @@ window.addEventListener("load", function() {
previewUrl: BASE_URL,
flag: 'XQ',
flag: 'ADD',
showStartDatePicker: false, // 开始时间选择器显示控制
showEndDatePicker: false, // 结束时间选择器显示控制
showDatePicker: false, // 控制日期选择器显示
minDate: new Date(gemhoUtil.getTargetDateYMD()), // 最小可选日期
maxDate: new Date(2099, 11, 31), // 最大可选日期
......@@ -22,6 +24,8 @@ window.addEventListener("load", function() {
formData: {
images: [],
exerciseDate: gemhoUtil.getTargetDateYMD(),
startTime: '', // 开始时间字段
endTime: '' // 结束时间字段
},
id: ''
}
......@@ -39,6 +43,48 @@ window.addEventListener("load", function() {
}
},
methods: {
showTipPage(){
let param = {
type: this.formData.type,
pageName: '_tezhongzuoye_detail',
}
let url = gemhoUtil.setParameter('_tezhongzuoye_detail-text.html', param)
console.log(url)
gemhoUtil.navigatePage(url, '跳转中...')
},
getDict4tab1() {
http2.post({
serviceId: API_KEY_MAP["page"]['id'],
interfacePublicKey: API_KEY_MAP["page"]["publicKey"],
interfacePrivateKey: API_KEY_MAP["page"]["privateKey"],
reqParams: {
page: 1,
size: 9999,
sign: 15,
dictType: 'training_exercise_type'
}
}, (res) => {
if (!res) { // 中台返回为undefined 重新请求
vant.Toast.clear()
setTimeout(() => {
this.getDict4businessType()
}, 0);
return
}
if (res) {
console.log('接口回调数据=生产经营类型', JSON.parse(res))
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0);
var result = JSON.parse(res)
this.tabList4lv2 = result.rows
}
})
},
// 处理平面图删除
handleDeleteFloorPlan(index, type) {
this.formData.images.splice(index, 1);
......@@ -107,6 +153,36 @@ window.addEventListener("load", function() {
}
this.showDatePicker = true
},
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
// 确认日期选择
showStartDatePickerHandler() {
if (this.flag === 'XQ') return;
this.showStartDatePicker = true;
},
showEndDatePickerHandler() {
if (this.flag === 'XQ') return;
this.showEndDatePicker = true;
},
onStartDateConfirm(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
this.formData.startTime = `${year}-${month}-${day} ${hours}:00`;
this.showStartDatePicker = false;
},
onEndDateConfirm(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
this.formData.endTime = `${year}-${month}-${day} ${hours}:00`;
this.showEndDatePicker = false;
},
showImage(list, index) {
const images = list.map((item) => {
return this.previewUrl + item
......@@ -122,16 +198,6 @@ window.addEventListener("load", function() {
let url = gemhoUtil.setParameter(`src/_${stringifyUrl}.html`)
gemhoUtil.navigatePage(url, '跳转中...')
},
// 确认日期选择
onDateConfirm(date) {
// 将 Date 对象格式化为 YYYY-MM-DD 字符串
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
this.formData.exerciseDate = `${year}-${month}-${day}`;
this.showDatePicker = false;
},
// 文件上传处理
handleFileUpload(file) {
console.log('上传文件:', file);
......@@ -139,30 +205,32 @@ window.addEventListener("load", function() {
},
submitForm() {
if (!this.formData.title) {
if (!this.formData.type) {
vant.Dialog.alert({
message: '演练标题不可为空',
message: '特种作业类型不可为空',
})
return;
}
if (!this.formData.participantsNum) {
vant.Dialog.alert({
message: '负责人数不可为空',
message: '作业人员姓名不可为空',
})
return;
}
if (!this.formData.responsiblePerson) {
vant.Dialog.alert({
message: '负责人不可为空',
message: '作业时间不可为空',
})
return;
}
if (!this.formData.images.length) {
vant.Dialog.alert({
message: '图片不可为空',
message: '作业证件不可为空',
})
return;
}
vant.Toast.loading({
message: '正在处理...',
forbidClick: true,
......
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