jhprjv2/ruoyi-wechat/src/main/resources/templates/sspManage/reportWithmarks.html

803 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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">上传格式只能上传JPG/PNG文件, 且不超过500KB</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">上传格式只能上传MP4文件,且文件应大于30秒</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">
问题描述
</div>
<div class="ssp-block-input">
<input type="text" placeholder="请输入问题描述" id="constructionSite" v-model="form.positionPart" autocomplete="off">
</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>
<!--问题描述下拉框-->
<!-- <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后可能产生的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则说明校验码是10身份证号码最后一位应该是X
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>