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 = "ssp-problem-rectification" >
< div class = "ssp-block" >
< div class = "spp-block-title" >
留痕上报
< / div >
< div class = "ssp-block-position" >
{{form.marksLocation}}
< / div >
< / div >
< div class = "ssp-block" >
< div class = "spp-block-title" >
留痕时间
< / div >
< div class = "ssp-block-input" >
< input type = "text" id = "dateTime" data-options = "{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2020}" readonly placeholder = "请选择留痕时间" v-model = "form.marksTime" >
< / 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 >
< p class = "spp-p" > 上传格式： < / p >
< / div >
< div class = "ssp-block" >
< div class = "spp-block-title" >
视频上传
< / div >
< div class = "row eq-scene-max" >
< div class = "ssp-block-video" >
< video id = "videoSrc" controls = "controls" 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" >
< p class = "spp-p" > 上传格式： < / p >
< / div >
< div class = "ssp-block" >
< div class = "spp-block-title" >
质量隐患
< / 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"> -->
<!-- 工序名称 -->
<!-- </div> -->
<!-- <div class="ssp - block - input"> -->
<!-- <input type="text" placeholder="请选择工序名称" readonly id="input1" onclick="workingProcedure(1)" v - model="form.processName"> -->
<!-- <input type="hidden" id="processName" name="processName" > -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="ssp - block"> -->
<!-- <div class="spp - block - title"> -->
<!-- 工程名称 -->
<!-- </div> -->
<!-- <div class="ssp - block - input"> -->
<!-- <input type="text" placeholder="请选择工程名称" readonly id="input2" onclick="inputClick(2)" v - model="form.projectName"> -->
<!-- <input type="hidden" id="projectName" > -->
<!-- </div> -->
<!-- </div> -->
< div class = "ssp-block" >
< div class = "spp-block-title" >
2023-08-11 22:15:06 +08:00
问题描述
2023-08-10 21:09:49 +08:00
< / div >
< div class = "ssp-block-input" >
2023-08-11 22:15:06 +08:00
< input type = "text" placeholder = "请输入问题描述" id = "constructionSite" v-model = "form.positionPart" autocomplete = "off" >
2023-08-10 21:09:49 +08:00
< / div >
< / div >
< div class = "ssp-block" >
< div class = "spp-block-title" >
留痕说明
< / div >
< div class = "ssp-ri-textarea" >
< textarea placeholder = "请输入整改要求" v-model = "form.marksRemark" > < / textarea >
< / div >
< / div >
< div class = "ssp-block" >
< div class = "spp-block-title" >
上报人身份证号码
< / div >
< div class = "ssp-block-input" >
< input type = "text" placeholder = "请输入上报人身份证号码" id = "idcardnum" v-model = "form.idcardnum" autocomplete = "off" >
< / 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(this)" readonly v-model = "form.auditorPerson" >
< / 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" @ click = saveData() > 提交< / 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 >
< ul class = "spp-select-ul" >
< li v-for = "item in workingList" onclick = "optionLi(this)" :id = "item.id" > {{item.name}}< / li >
< / ul >
< ul class = "spp-select-ul" >
< li v-for = "item in projectList" onclick = "optionLi(this)" :code = "item.code" > {{item.name}}< / li >
< / ul >
< / div >
< / div >
2023-08-11 22:15:06 +08:00
<!-- 问题描述下拉框 -->
2023-08-10 21:09:49 +08:00
<!-- <div class="ssp - select - fixed" id="selectFixedPo">
< div class = "ssp-select-content" id = "selectConPo" >
< ul class = "spp-select-ul" >
< li v-for = "item in list" onclick = "optionLiPo(this)" :name = "item.name" :phone = "item.phone" > {{item.value}}< / 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/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 >
< / div >
< input type = "hidden" id = "hiddenData" >
< input type = "hidden" id = "posValue" >
< input type = "hidden" id = "posName" >
< input type = "hidden" id = "posPhone" >
< / 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 >
<!-- 工序弹窗 -->
< div class = "ssp-popup-gx" id = "popupTree" >
< div class = "ssp-popup-gx-title" >
< div class = "row" >
< div class = "col-xs-2" >
< img src = "../../img/ssp/h_lift.png" onclick = "closePopup()" >
< / div >
< div class = "col-xs-8" >
< p > 工序名称< / p >
< / div >
< / div >
< / div >
< div class = "ssp-popup-gx-con" >
< div id = "tree" class = "menuTree" > < / div >
< / div >
< / div >
< / 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 gxList = "";
/**
* 将dom对象交给vue
*/
var vm= new Vue({
el:'#app',
data:{
form: {
marksLocation: projectName,
infoType: 1
},
//施工部门数据
projectTypeList:[],
//工序名称
workingList: [],
//工程列表
projectList: [],
//主审核人
lists:[],
params:{},
name:""
},
created() {
//工程名称、
this.getProjectType();
//工序名称
this.getProcessName();
//主审批人
this.getAllList();
//工程名称
this.getProjectName();
},
methods:{
//新增
saveData() {
//上传图片
var nameSrc = $("[name='imgName']");
if(nameSrc.length < = 0) {
toast({
message:"至少上传一张图片",
time:3000
});
return false;
}
var src=[]
for (var i=0;i< nameSrc.length ; i + + ) {
src.push(nameSrc[i].src);
}
//上传视频
let videoUrl = $("#bigFile").val();
//工程类型, 工序类型,工程名称
this.form.projectType = $("#projectType").val();
//this.form.processName = $("#processName").val();
//this.form.projectName = $("#projectName").val();
//留痕上报时间
this.form.marksTime = $("#dateTime").val()
//主送人和手机号
this.form.marksPicture = JSON.stringify(src);
this.form.marksVideo = videoUrl;
this.form.auditorPerson = $("#mainGiver").val();
this.form.auditorPhone = $("#posPhone").val();
if(isIdCard("身份证号", "idcardnum")) {
this.$http.post('/weixin/sspManage/saveMarksMy', this.form).then(result => {
console.log("result" +"======" + result);
if(result.bodyText == "OK") {
$("#popupTj").fadeIn(300);
} else {
toast({
message:"添加失败请联系管理员",
time:3000
});
}
})
}
},
//取消（重置）表单
cancel() {
this.form = {};
window.history.back();
},
//获取工程类型
getProjectType() {
let _this = this;
$.ajax({
type: "get",
url: "/weixin/sspManage/getProjectType",
async: false,
success: function (data) {
_this.projectTypeList = data;
}
})
},
//工序名称
getProcessName() {
$.ajax({
type: "get",
url: "/weixin/sspManage/treesList",
async: false,
success: function (data) {
gxList = data.children;
}
})
},
//主审批人
getAllList() {
let _this = this;
this.$http.post('/weixin/sspManage/queryUserInfo').then(result => {
_this.lists = result.data
})
},
//工程名称
getProjectName() {
let _this = this;
$.ajax({
type: "get",
url: "/weixin/sspManage/selectCodeFromSmark",
data: {"projectId": projectId},
async: false,
success: function (data) {
_this.projectList = data.ponitCode;
}
})
},
//搜索
searchFun() {
let _this = this;
$.ajax({
type: "get",
url: "/weixin/sspManage/queryUserInfo",
data: {"name": this.name},
async: false,
success: function (data) {
// _this.projectList = data;
_this.lists = data
}
})
}
}
})
//删除视频
function deleteVideo() {
$("#videoSrc").attr("src","");
$("#videoSrc").hide();
$(".rq-delete-video").hide();
$("#selectFile").show();
$("#percent").html("");
}
/*上传图片*/
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 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(){
$("body").bind('click',function(e){
if(e.target.className == 'ssp-select-fixed'){
$("#selectFixed").fadeOut(500);
$("body").css("overflow","auto")
}
})
})
//点击施工部门选项 赋值给施工部门input , 施工部门选项关闭
function optionLiPo(e) {
$(e).addClass("li")
$("body").css("overflow","auto")
$("#constructionSite").val($(e).html());
$("#mainGiver").val($(e).attr('name'));
$("#posValue").val($(e).html());
$("#posName").val($(e).attr('name'));
$("#posPhone").val($(e).attr('phone'));
$("#selectFixedPo").fadeOut(500);
}
//点击施工部门 显示选项
function constructionSite() {
$("body").css("overflow","hidden")
$(".spp-select-ul").show();
$(".spp-select-ul li").removeClass("li")
$("#selectFixedPo").fadeIn(500);
paddingTop();
}
//点击审核人 显示组织架构
function structure(e) {
$("body").css("overflow","hidden")
$("#framework").fadeIn(500);
var screenH = window.screen.height;
var topH = $("#frameworkTop").innerHeight()
var topH = screenH-topH-100
$("#fold").css("max-height",topH);
$(".spp-li").removeClass("ssp-active")
$("#frameworkTitle").html("请选择审核人");
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");
}
}
}
}
//关闭组织架构
$("#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();
}
}
//主审批人
function foldLi(e) {
$(".spp-li").removeClass("ssp-active");
$(e).addClass("ssp-active");
$("#mainGiver").val($(e).children().eq(0).html());
$("#posName").val($(e).children().eq(0).html());
$("#posPhone").val($(e).children().eq(1).html());
closeStructure()
}
/**
* 校验身份证号码
*
* @param mess
* @param idv
* @returns {boolean}
*/
function isIdCard(mess, idv) {
var idCard = $("#" +idv+"").val();
// 15位和18位身份证号码的正则表达式
var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
// 如果通过该验证，说明身份证格式正确，但准确性还需计算
if (regIdCard.test(idCard)) {
if (idCard.length == 18) {
var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10,
5, 8, 4, 2); // 将前17位加权因子保存在数组里
var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); // 这是除以11后， ，
var idCardWiSum = 0; // 用来保存前17位各自乖以加权因子后的总和
for (var i = 0; i < 17 ; i + + ) {
idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
}
var idCardMod = idCardWiSum % 11;// 计算出校验码所在数组的位置
var idCardLast = idCard.substring(17);// 得到最后一位身份证号码
// 如果等于2， ，
if (idCardMod == 2) {
if (idCardLast == "X" || idCardLast == "x") {
//alert("恭喜通过验证啦！");
return true;
} else {
toast({
message:mess + "格式不正确",
time:3000
});
//alert("身份证号码错误！");
return false;
}
} else {
// 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
if (idCardLast == idCardY[idCardMod]) {
//alert("恭喜通过验证啦！");
return true;
} else {
toast({
message:mess + "格式不正确",
time:3000
});
//alert("身份证号码错误！");
return false;
}
}
}else{
return true;
}
} else {
toast({
message:mess + "格式不正确",
time:3000
});
//alert("身份证格式不正确!");
return false;
}
}
//关闭页面
function confirmBtnBack() {
window.history.go(-1);
}
$.date('#dateTime');
//工序弹窗
var jsonGx = [
{
"id": "0001",
"name":"一级",
"type": '1', //代表类型 1 代表工序
"list": [
{
"id": "00010001",
"name":" 二级",
"type": '1',
"list": [
{
"id": "000100010001",
"name":"三级",
"type": '1',
}
]
}
]
},
{
"id": "0002",
"name":"一级",
"type": '1',
"list": [
{
"id": "00020001",
"name":"二级",
"type": '1',
"list": [
{
"id": "000200010001",
"name":"三级",
"type": '1',
"list": [
{
"id": "0002000100010001",
"name":"四级1",
"type": '1',
},
{
"id": "0002000100010002",
"name":"四级2",
"type": '1',
},
{
"id": "0002000100010003",
"name":"四级3",
"type": '1',
},
{
"id": "0002000100010002",
"name":"四级4",
"type": '1',
},
]
}
]
}
]
}
]
//点击获取树的数据
function getData(e,id,type){
var gxName = $(e).children("label").html();
if($(e).children(".arrow").attr("class")=="arrow"){
$(e).children(".arrow").addClass("xz")
}else {
$(e).children(".arrow").removeClass("xz")
}
if($(e).next().children().find(".ul").html() == ''){
$(e).next().children().find(".arrow").hide()
}
if($(e).next().html() == ""){
$("#input1").val(gxName)
$("#processName").val(id);
$("body").css("overflow","auto")
$("#popupTree").fadeOut(300)
}
}
//工序树
function workingProcedure(n){
$("body").css("overflow","hidden")
$("#popupTree").fadeIn(300)
$("#tree").empty();
num=0
$("#tree").html(forTree(gxList));
menuTree("tree");
}
//关闭工序树
function closePopup() {
$("body").css("overflow","auto")
$("#popupTree").fadeOut(300)
}
//后退事件
function goBack() {
window.history.back();
}
< / script >
< / html >
