sxyanzhu
/
jhprjv2
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
jhprjv2/ruoyi-wechat/src/main/resources/templates/sspManage/sspChange.html

763 lines
26 KiB
HTML
Raw Normal View History

提交代码
2023-08-10 21:09:49 +08:00
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<link rel="stylesheet" href="../../css/ssp/bootstrap.min.css">
<link rel="stylesheet" href="../../css/ssp/takePicture.css">
<link rel="stylesheet" href="../../css/ssp/date.css">
<link rel="stylesheet" href="../../css/ssp/newTips.css">
<title>质量隐患问题整改</title>
<style>
.menuTree{ margin-left:0px;}
.menuTree div{ padding-left:1px;}
.menuTree div ul{ overflow:hidden; display:none; height:auto; margin:0; padding-left: 25px;}
.menuTree span{color:#88a2ed; display:block; height:40px; line-height:40px; padding:0 15px; margin:1px 0; cursor:pointer; border-bottom:1px solid #445577;}
.menuTree a{ color:#333; text-decoration:none;}
.menuTree a:hover{ color:#06F;}
.arrow{width: 25px;height: 25px;position: relative;border:0;top: 4px;float: right;background: url("http://fileimg.makalu.cc/CORE_9883C8C92A0347398B4A1309E7E03A52.png") no-repeat center/25px;}
.arrow.xz{transform:rotate(90deg)}
.ssp-popup-gx{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #30384b;
z-index: 999;
display: none;
}
.ssp-popup-gx-title{
height: 2.5rem;
border-bottom: 1px solid #445577;
text-align: center;
line-height: 2.5rem;
}
.ssp-popup-gx-con{
max-height:25rem;
overflow-x:hidden;
overflow-y: auto;
}
</style>
</head>
<body>
<header class="hide">
<div class="row">
<div class="col-xs-3" onclick="goBack()">
<img src="../../img/ssp/h_lift.png">
</div>
<div class="col-xs-6">
<p>问题整改</p>
</div>
</div>
</header>
<div id="app">
<div class="ssp-all">
<div class="loading_p">
<img src="../../img/ssp/866000e905ae45a8b79d80de52bb4e9a.gif">
<div>正在提交数据！请稍后...</div>
</div>
<div class="ssp-problem-rectification">
<div class="ssp-block">
<div class="spp-block-title">
拍摄位置
</div>
<div class="ssp-block-position" th:text="${projectName}" id="problemArea"></div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
图片上传
</div>
<div class="row eq-scene-max">
<div>
</div>
<div class="col-xs-4">
<div class="rq-add-to"></div>
<input type="file" accept="image/*" class="rq-file" onchange="xmTanUploadImg(this)">
</div>
</div>
</div>
<div class="ssp-block hide">
<div class="spp-block-title">
视频上传
</div>
<div class="row eq-scene-max">
<div class="ssp-block-video">
<video id="videoSrc" src=""></video>
<div class="rq-delete-video" onclick="deleteVideo(this)">×</div>
</div>
<input type="file" accept="video/*" class="rq-file-video" id="selectFile">
<div class="video-tips">
<div id="tipsHide">视频上传百分比:<span id="percent"></span></div>
</div>
</div>
<input type="hidden" id="bigFile" name="bigFile">
<input type="hidden" id="bigFileName" name="bigFileName">
</div>
<div class="ssp-block">
<div class="spp-block-title">
提交代码
2023-08-13 22:10:35 +08:00
隐患类型
提交代码
2023-08-10 21:09:49 +08:00
</div>
<div class="ssp-block-input">
<input type="text" placeholder="请选择质量隐患类型" readonly id="input0" onclick="inputClick(0)" v-model="form.projectType">
<input type="hidden" id="projectType" >
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
提交代码
2023-08-12 01:05:00 +08:00
隐患描述
提交代码
2023-08-10 21:09:49 +08:00
</div>
提交代码
2023-08-11 22:15:06 +08:00
<div class="ssp-ri-textarea">
提交代码
2023-08-12 01:05:00 +08:00
<textarea placeholder="请输入隐患描述" id="constructionSite"></textarea>
<!-- <input type="text" placeholder="请填写隐患描述" id="constructionSite" >-->
提交代码
2023-08-10 21:09:49 +08:00
<!--onclick="constructionSite()"-->
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
整改要求
</div>
<div class="ssp-ri-textarea">
<textarea placeholder="请输入整改要求" id="changeText"></textarea>
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
整改人
</div>
<div class="ssp-block-input">
<input type="text" placeholder="请选择整改人" id="mainGiver" onclick="structure(1,this)" readonly>
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
复检人
</div>
<div class="ssp-block-input">
<input type="text" placeholder="请选择复检人" id="reinspector" onclick="structure(3,this)" th:value="${recheckSend}" readonly>
</div>
</div>
<div class="ssp-block">
<div class="spp-block-title">
抄送人
</div>
<div class="ssp-block-input">
<input type="text" placeholder="请选择抄送人" id="ccto" readonly onclick="structure(2,this)">
<input type="hidden" id="cctoPhone">
</div>
</div>
</div>
<div class="ssp-btn">
<div class="row">
<div class="col-xs-6">
<button type="button" class="ssp-btn-cancel" @click="cancel()">取消</button>
</div>
<div class="col-xs-6">
<button type="button" class="ssp-btn-confirm" onclick="dataSubmit()">提交</button>
</div>
</div>
</div>
</div>
<!--施工部门下拉框-->
<div class="ssp-select-fixed" id="selectFixed">
<div class="ssp-select-content" id="selectCon">
<ul class="spp-select-ul">
<li v-for="item in projectTypeList" onclick="optionLi(this)" :id="item.id" >{{item.project_type}}</li>
</ul>
</div>
</div>
<!--组织架构-->
<div class="ssp-framework" id="framework">
<div class="ssp-framework-content" id="frameworkCon">
<div class="ssp-framework-top" id="frameworkTop">
<div class="ssp-framework-title" >
<div class="row">
<div class="col-xs-3">
<div class="ssp-framework-img" id="frameworkClose">
<img src="../../img/ssp/left.png">
</div>
</div>
<div class="col-xs-6">
<span id="frameworkTitle">请选择</span>
</div>
</div>
</div>
<div class="ssp-framework-search">
<input type="text" placeholder="搜索" v-model="name">
<button type="button" @click="searchFun()">搜索</button>
</div>
</div>
<div class="app-fold" id="fold">
<div class="app-fold-block" v-for="item in lists">
<div class="app-fold-title" onclick="foldTitle(this)">{{item.dep}}</div>
<ul class="app-fold-ul">
<li class="spp-li" v-for="li in item.people" onclick="foldLi(this)">
<span>{{li.name}}</span>
<span>{{li.phone}}</span>
</li>
</ul>
</div>
</div>
<div class="ssp-framework-btn" id="frameworkBtn">
<div class="row">
<div class="col-xs-8">
<div onclick="rise()">
<div class="spp-choice-number">已选择 <span class="contNumber">0</span> 人</div>
<div class="spp-choice-por" id="porName"></div>
</div>
</div>
<div class="col-xs-4">
<div class="ssp-btn-right">
<button type="button" id="frameworkConfirm">确认</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--蒙版-->
<div class="spp-mask" id="sppMask" onclick="selectedclose()"></div>
<!--已选人员-->
<div class="ssp-selected" id="sspSelected">
<div class="ssp-selected-con">
<div class="spp-selected-number">
已选择 <span class="contNumber">0</span> 人
<label onclick="selectedclose()">确认</label>
</div>
<div class="spp-ry-list" >
<table id="ryListTable">
</table>
</div>
</div>
</div>
</div>
<div class="ssp-popup" id="popupTj">
<div class="ssp-popup-content">
<div class="spp-window-title ssp-popup-title">
<label>消息提示</label>
</div>
<div class="ssp-popup-textarea">
<div class="ssp-popup-div">添加成功</div>
</div>
<div class="spp-popup-btn">
<button type="button" onclick="confirmBtnBack()">确定</button>
</div>
</div>
</div>
<input type="hidden" id="hiddenData">
<input type="hidden" id="posPhone">
<input type="hidden" id="reinspectorPhone" th:value="${recheckSendUser}">
</body>
<script type="text/javascript" src="/js/jquery-3.0.0.min.js"></script>
<script src="/js/vue.min.js"></script>
<script type="text/javascript" src="/js/vue-resource-1.3.4.js"></script>
<script type="text/javascript" src="/js/ssp/qiniu-3.1.2.min.js"></script>
<script type="text/javascript" src="/js/ssp/upload.js"></script>
<script type="text/javascript" src="/js/ssp/jquery.date.js"></script>
<script type="text/javascript" src="../../js/ssp/newTips.js"></script>
<script type="text/javascript" src="/js/tree.js"></script>
<script>
//项目名称
var projectName = '[[${projectName}]]';
//项目id
var projectId = '[[${projectId}]]';
//施工部门数据
var vm1 = new Vue({
el:'#app',
data:{
form: {
marksLocation: projectName,
infoType: 1
},
//施工部门数据
projectTypeList:[],
lists:[],
name:""
},
methods:{
//获取工程类型
getProjectType() {
let _this = this;
$.ajax({
type: "get",
url: "/weixin/sspManage/getProjectType",
async: false,
success: function (data) {
_this.projectTypeList = data;
}
})
},
getAllList() {
let _this = this;
this.$http.post('/weixin/sspManage/queryUserInfo').then(result => {
_this.lists = result.data
})
},
searchFun() {
let _this = this;
$.post('/weixin/sspManage/queryUserInfo', {"name":this.name}, function (result) {
_this.lists = result
})
},
//取消（重置）表单
cancel() {
this.form = {};
window.history.back();
},
},
created() {
//工程隐患类型
this.getProjectType();
this.getAllList();
},
})
//弹窗动态居中
function paddingTop() {
var screenH = window.screen.height;
var selectH = $("#selectCon").height()
var SelectTop = (screenH - selectH - 80) / 2
var selectHpo = $("#selectConPo").height()
var SelectTopPo = (screenH - selectHpo - 80) / 2
$("#selectFixed").css("padding-top",SelectTop)
$("#selectFixedPo").css("padding-top",SelectTopPo)
}
//点击工程类型、工序名称、工程名称显示选项
var num = 0;
function inputClick(n) {
$("body").css("overflow","hidden")
$(".spp-select-ul li").removeClass("li")
$("#selectFixed").fadeIn(500);
$(".spp-select-ul").hide();
if(n==0){
$("#selectCon").children().eq(n).show();
num = n
}else if(n==1){
$("#selectCon").children().eq(n).show();
num = n
}else{
$("#selectCon").children().eq(n).show();
num = n
}
paddingTop();
}
//点击显示下拉框
function optionLi(e) {
$(e).addClass("li")
$("body").css("overflow","auto")
if(num == 0){
$("#input0").val($(e).html())
$("#projectType").val($(e).attr("id"))
}else if(num == 1){
$("#input1").val($(e).html())
$("#processName").val($(e).attr("id"))
}else if(num == 2){
$("#input2").val($(e).html())
//获取code
$("#projectName").val($(e).attr("code"))
}
$("#selectFixed").fadeOut(500);
}
//点击施工部门 显示选项
function constructionSite() {
$("body").css("overflow","hidden")
$(".spp-select-ul li").removeClass("li")
$("#selectFixed").fadeIn(500);
paddingTop();
}
//点击蒙版 关闭 施工部门选项
$(function(){
$("body").bind('click',function(e){
if(e.target.className == 'ssp-select-fixed'){
$("#selectFixed").fadeOut(500);
$("body").css("overflow","auto")
}
})
})
//点击主送人 抄送人 显示组织架构
function structure(num,e) {
$("body").css("overflow","hidden")
$("#framework").fadeIn(500);
var screenH = window.screen.height;
var topH = $("#frameworkTop").innerHeight()
var bottomH = $("#frameworkBtn").innerHeight()
var topH = screenH-topH-bottomH-100
$("#fold").css("max-height",topH);
$(".spp-li").removeClass("ssp-active")
if(num == 1){
$("#frameworkTitle").html("请选择整改人");
$("#frameworkBtn").hide();
if($(e).val() != ""){
var sppLi = $(".spp-li");
for(var i = 0;i<sppLi.length;i++){
if($(sppLi[i]).children().eq(1).html() ==$("#posPhone").val()){
$(sppLi[i]).addClass("ssp-active");
}
}
}
}else if(num == 2){
$("#frameworkTitle").html("请选择抄送人");
$("#frameworkBtn").show();
var sppLi = $(".spp-li");
for(var i=0;i<sppLi.length;i++){
for(var j=0;j<phoneArray.length;j++){
if($(sppLi[i]).children().eq(1).html() == phoneArray[j]){
$(sppLi[i]).addClass("ssp-active");
}
}
}
}else{
$("#frameworkTitle").html("请选择复检人");
$("#frameworkBtn").show();
var sppLi = $(".spp-li");
for(var i=0;i<sppLi.length;i++){
for(var j=0;j<phoneArray.length;j++){
if($(sppLi[i]).children().eq(1).html() ==$("#reinspectorPhone").val()){
$(sppLi[i]).addClass("ssp-active");
}
}
}
}
$("#hiddenData").val(num);
}
//关闭组织架构
$("#frameworkClose").click(function () {
closeStructure()
})
//关闭组织架构方法
function closeStructure(){
$("body").css("overflow","auto")
$("#framework").fadeOut(500);
}
//组织架构折叠
function foldTitle(e) {
if($(e).next().css("display") == "none"){
$(e).next().slideDown();
}else {
$(e).next().slideUp();
}
}
//选人
var cont = 0;
function foldLi(e) {
if($("#hiddenData").val() == 1){
$(".spp-li").removeClass("ssp-active");
$(e).addClass("ssp-active");
$("#mainGiver").val($(e).children().eq(0).html());
$("#posPhone").val($(e).children().eq(1).html());
closeStructure()
}else if($("#hiddenData").val() == 3){
$(".spp-li").removeClass("ssp-active");
$(e).addClass("ssp-active");
$("#reinspector").val($(e).children().eq(0).html());
$("#reinspectorPhone").val($(e).children().eq(1).html());
closeStructure()
}else{
if($(e).attr("class") =="spp-li ssp-active"){
cont --
$(e).removeClass("ssp-active")
for(var i = 0;i<phoneArray.length;i++){
if(phoneArray[i] == $(e).children().eq(1).html()){
nameArray.splice(i,1);
phoneArray.splice(i,1);
}
}
}else{
cont ++
$(e).addClass("ssp-active");
nameArray.push($(e).children().eq(0).html());
phoneArray.push($(e).children().eq(1).html());
}
$(".contNumber").html(cont);
$("#porName").html(nameArray.toString());
}
}
//展开已选人员
function rise() {
$("#ryListTable").empty();
$("#sppMask").fadeIn();
$("#sspSelected").animate({bottom:'0'},200);
var tableTr ='';
for(var i=0;i<nameArray.length;i++){
if(cont != 0){
tableTr += '<tr>' +
'<td><span>'+nameArray[i]+' &nbsp;&nbsp;&nbsp; '+phoneArray[i]+'</span></td>' +
'<td><button type="button" onclick="removeTr(this)">移除</button></td>' +
'</tr>'
}
}
$("#ryListTable").append(tableTr);
}
//移除tr
function removeTr(e) {
cont --;
$(".contNumber").html(cont);
var i = $(e).parents('tr').index();
nameArray.splice(i,1);
phoneArray.splice(i,1);
$("#porName").html(nameArray.toString());
var sppLi = $(".spp-li");
$(".spp-li").removeClass("ssp-active");
for(var i=0;i<sppLi.length;i++){
for(var j=0;j<phoneArray.length;j++){
if($(sppLi[i]).children().eq(1).html() == phoneArray[j]){
$(sppLi[i]).addClass("ssp-active");
}
}
}
$(e).parents('tr').remove()
}
//关闭组织架构 给抄送人 input 赋值
$("#frameworkConfirm").click(function () {
$("#ccto").val(nameArray.toString());
$("#cctoPhone").val(phoneArray.toString());
closeStructure()
for(let i=0;i<nameArray.length;i++){
let obj={};
obj.nameArray=nameArray[i];
obj.phoneArray=phoneArray[i];
options.push(obj);
}
})
//点击确认或蒙版 关闭已选人员
function selectedclose(){
$("#sppMask").fadeOut();
$("#sspSelected").animate({bottom:'-20rem'},200);
}
//返回
$("#backBut").click(function () {
window.history.back();
})
//页面提交
function dataSubmit() {
提交代码
2023-08-11 22:15:06 +08:00
showLoading();
提交代码
2023-08-10 21:09:49 +08:00
var problemArea = $("#problemArea").text();
//图片
var nameSrc = $("[name='imgName']");
//视频
var videoUrl = $("#bigFile").val();
//隐患类型
var projectType = $("#projectType").val();
提交代码
2023-08-12 01:05:00 +08:00
//隐患描述
提交代码
2023-08-10 21:09:49 +08:00
var constructionSite = $("#constructionSite").val();
//整改要求
var changeText = $("#changeText").val();
//整改人
var mainGiver = $("#mainGiver").val();
var posPhone = $("#posPhone").val();
//复检人
var reinspector = $("#reinspector").val();
var reinspectorPhone = $("#reinspectorPhone").val();
//抄送人
var ccto = $("#ccto").val();
var cctoPhone = $("#cctoPhone").val();
if(nameSrc.length <= 0) {
提交代码
2023-08-11 22:15:06 +08:00
hideLoading();
提交代码
2023-08-10 21:09:49 +08:00
toast({
message:"至少上传一张图片",
time:3000
});
return false;
}
var src=[]
for (var i=0;i<nameSrc.length;i++){
src.push(nameSrc[i].src);
}
if(projectType == "" || projectType == null) {
提交代码
2023-08-11 22:15:06 +08:00
hideLoading();
提交代码
2023-08-10 21:09:49 +08:00
toast({
message:"请选择质量隐患类型",
time:3000
});
return false;
}
if(constructionSite == "" || constructionSite == null) {
提交代码
2023-08-11 22:15:06 +08:00
hideLoading();
提交代码
2023-08-10 21:09:49 +08:00
toast({
提交代码
2023-08-12 01:05:00 +08:00
message:"请填写隐患描述",
提交代码
2023-08-10 21:09:49 +08:00
time:3000
});
return false;
}
if(changeText == "" || changeText == null) {
提交代码
2023-08-11 22:15:06 +08:00
hideLoading();
提交代码
2023-08-10 21:09:49 +08:00
toast({
message:"请填写整改要求",
time:3000
});
return false;
}
if(mainGiver == "" || mainGiver == null) {
提交代码
2023-08-11 22:15:06 +08:00
hideLoading();
提交代码
2023-08-10 21:09:49 +08:00
toast({
message:"请选择整改人",
time:3000
});
return false;
}
if(reinspector == "" || reinspector == null) {
提交代码
2023-08-11 22:15:06 +08:00
hideLoading();
提交代码
2023-08-10 21:09:49 +08:00
toast({
message:"请选择复检人",
time:3000
});
return false;
}
if(ccto == "" || ccto == null) {
提交代码
2023-08-11 22:15:06 +08:00
hideLoading();
提交代码
2023-08-10 21:09:49 +08:00
toast({
message:"请选择抄送人",
time:3000
});
return false;
}
//抄送人主送人判断
if(ccto.search(mainGiver) != -1) {
提交代码
2023-08-11 22:15:06 +08:00
hideLoading();
提交代码
2023-08-10 21:09:49 +08:00
toast({
message:"抄送人中不能包含整改人",
time:3000
});
return false;
}
//抄送人复检人判断
if(ccto.search(reinspector) != -1) {
提交代码
2023-08-11 22:15:06 +08:00
hideLoading();
提交代码
2023-08-10 21:09:49 +08:00
toast({
message:"抄送人中不能包含复检人",
time:3000
});
return false;
}
//信息提交
var data = {
"imgSrc":JSON.stringify(src),
"videoUrl":videoUrl,
"problemArea":problemArea,
"workParts":constructionSite,
"changeInfo":changeText,
"lordSent":mainGiver,
"lordSentUser":posPhone,
"copySend":ccto,
"copySendUser":cctoPhone,
"infoType":"0",
"dangerType":projectType,
"recheckSend":reinspector,
"recheckSendUser":reinspectorPhone
}
//请求
showLoading();
$.post("/weixin/sspManage/listSspInfoMyNicked", data, function (result) {
hideLoading();
if(result == "OK") {
$("#popupTj").fadeIn(300);
} else {
toast({
message:"添加失败请联系管理员",
time:3000
});
}
})
}
function goBack() {
window.history.back();
}
function deleteVideo() {
$("#videoSrc").attr("src","");
$("#videoSrc").hide();
$(".rq-delete-video").hide();
$("#selectFile").show();
$("#percent").html("");
}
var nameArray =new Array();
var phoneArray =new Array()
let options = [];
/*上传图片*/
var i = 0;
function xmTanUploadImg(obj) {
i++;
var a = "preview"+i;
var b = "#preview"+i;
var c = "xmTanImg"+i
$(obj).parent().prev().append('<div class="col-xs-4"><div class="eq-scene-img" id="'+a+'"><div class="rq-delete" onclick="deletes(this)">×</div></div></div>')
$(b).prepend("<img id='"+c+"' name='imgName'>");
var file = obj.files[0];
if(file == undefined){
//alert(123);
//$("#image").val("");
}else{
var reader = new FileReader();
//读取文件过程方法
reader.onloadstart = function (e) {
console.log("开始读取....");
}
reader.onprogress = function (e) {
console.log("正在读取中....");
}
reader.onabort = function (e) {
console.log("中断读取....");
}
reader.onerror = function (e) {
console.log("读取异常....");
}
reader.onload = function (e) {
//console.log("成功读取....");
//console.log(e);
var img = document.getElementById(c);
var data = e.target.result;
var image = new Image();
image.src= data;
image.onload=function(){
img.src= data;
};
}
reader.readAsDataURL(file)
}
}
//删除上传的图片
function deletes(de){
$(de).parent().parent().remove();
}
//关闭页面
function confirmBtnBack() {
window.history.go(-1);
}
</script>
</html>