<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>现场设备管理</title>
<meta name="viewport"
content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="vue@3.js"></script>
<style>
@font-face{
font-family:"Medium";
src:url("./PingFangMedium.ttf")
}
.loading-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #000;
padding: 20px;
background-color: #fff;
border-radius: 5px;
z-index: 1000;
display: none;
}
.loading-box.active {
display: block;
}
.name {
font-size: 18px;
margin: 5px;
margin-left: 15px;
font-family: Medium;
}
.name1 {
font-size: 16px;
margin: 5px 1px 8px 5px;
font-family: Medium;
width: 40vw;
overflow:hidden; /*内容会被修剪，并且其余内容是不可见的。*/
text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本*/
white-space: nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
}
.name2 {
font-size: 16px;
font-family: Medium;
width: 50vw;
margin: 5px 1px 8px 5px;
overflow:hidden; /*内容会被修剪，并且其余内容是不可见的。*/
text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本*/
white-space: nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
}
.button {
height: 5vh;
line-height: 5vh;
margin-right: 5px;
font-size: 16px;
margin-left:10px;
font-family: Medium;
}
.button1 {
height: 5vh;
line-height: 5vh;
margin-right: 5px;
font-size: 16px;
color: #5b9bd5;
text-decoration: underline;
margin-left:10px;
font-family: Medium;
}
.main4P {
width: 80px;
margin: 0px 20px 3vh 15px;
height: 5vh;
font-size: 16px;
line-height: 5vh;
font-family: Medium;
}
body {
/*overflow: hidden;*/
}
table,table tr th, table tr td { border:1px solid #0094ff; }
table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;}
</style>
</head>
<body>
<div class="loading-box">数据加载中...</div>
<div style="display: flex;height: 14vh;border-bottom: 1px solid #5b9bd5;">
<div>
<img src="device.jpg" alt="" style="margin: 10px;height: 8vh;">
</div>
<div style="display: block;">
<p class="name" id="Equcode">设备编码:</p>
<p class="name" id="Eqfixassetid">资产编号:</p>
<p class="name" id="Equname">设备名称:</p>
</div>
</div>
<div style="border-bottom: 1px solid #5b9bd5;height: 19vh;">
<p style="font-size: 22px;font-weight: bold;margin: 5px;margin-left: 15px;">基本信息</p>
<div style="display: flex;margin-left: 10px;">
<div style="display: block;">
<p class="name1" id="Eqdep">部门:</p>
<p class="name1" id="Eqdomainname">区域:</p>
<p class="name1" id="Eqlocation">位置:</p>
</div>
<div style="display: block;">
<p class="name2" id="Erpdep">资产部门:</p>
<p class="name2" id="Erplocation">资产位置:</p>
<p class="name2" id="Eqstate">设备状态:</p>
</div>
</div>
</div>
<div style="display: flex;height: 5vh;margin-bottom: 2vh;">
<el-button id="button" class="button1" onclick="mainButtonClick()">运行状态</el-button>
<el-button id="button1" class="button" onclick="mainButton1Click()">维修记录</el-button>
<el-button id="button2" class="button" onclick="mainButton2Click()">维保记录</el-button>
<el-button id="button4" class="button" onclick="mainButton4Click()">盘点历史</el-button>
<el-button id="button3" class="button" onclick="mainButton3Click()">盘点</el-button>
</div>
<div id="main" style="width: 100%;height:64vh;margin-top: -4vh;background-color: white;"></div>
<div id="main1" style="width: 100%;height:60vh;display: none;"></div>
<div id="main2" style="width: 100%;height:50vh;display: none;overflow-y: auto;"></div>
<div id="main4" style="width: 100%;height:50vh;display: none;overflow-y: auto;"></div>
<div id="main3" style="width: 100%;height:60vh;display: none;">
<div style="display: flex;">
<p class="main4P">盘点时间</p>
<input type="text" id="pdtime" style="height: 4vh;width: 60%;font-size:16px;font-family: Medium;" readonly="readonly">
</div>
<div style="display: flex;">
<p class="main4P">问题点</p>
<div id="select" style="height: 4vh;width: 60%;"></div>
</div>
<div style="display: flex;">
<p class="main4P">执行人</p>
<input type="text" id="zxr" style="height: 4vh;width: 60%;font-size:16px;font-family: Medium;" readonly="readonly">
</div>
<div style="display: flex;">
<p class="main4P">备注</p>
<input type="text" id="remark" style="height: 4vh;width: 60%;font-size:16px;font-family: Medium;">
</div>
<div id="app" style="display: flex;">
<input ng-disabled="false" ng-show="false" type="file" name="" id="input_img" style="width:200px;display:none" />
<button onclick="buttonClick()" style="background-color: white;border-radius: 10px;height: 40px;width: 120px;line-height: 40px;text-align: center;margin-left: 50px;color:black;font-family: Medium;font-size:18px">选择图片</button>
<input ng-disabled="false" ng-show="false" type="file" name="" id="input_img1" style="width:200px;display:none" />
<button onclick="button1Click()" style="background-color: white;border-radius: 10px;height: 40px;width: 120px;line-height: 40px;text-align: center;margin-left: 40px;color:black;font-family: Medium;font-size:18px">选择图片</button>
</div>
<div id="app" style="display: flex;">
<img ng-show="true" id="show_img" style="margin-left:60px;width: 100px;height: 100px;display: flex;align-items: center;justify-content: center;overflow: hidden;margin-top:10px"></img>
<img ng-show="true" id="show_img1" style="margin-left:60px;width: 100px;height: 100px;display: flex;align-items: center;justify-content: center;overflow: hidden;margin-top:10px"></img>
</div>
<div style="display: flex;align-items: center;justify-content: center;">
<el-button
style="background-color: #5b9bd5;border-radius: 10px;height: 40px;width: 120px;line-height: 40px;text-align: center;margin-top: 30px;color:white;font-family: Medium;"
onclick="main4submit()">盘点提交</el-button>
<el-button
style="background-color: #5b9bd5;border-radius: 10px;height: 40px;width: 120px;line-height: 40px;text-align: center;margin-top: 30px;margin-left:50px;color:white;font-family: Medium;"
onclick="scanDevice()">继续扫码</el-button>
</div>
</div>
<script type="text/javascript">
var userid = ''
/*<div style="display: flex;">
<p class="main4P">复盘问题点</p>
<div id="select2" style="height: 4vh;width: 60%;"></div>
<input type="text" id="select3" style="height: 4vh;width: 60%;font-size:16px;font-family: Medium;" readonly="readonly">
</div>
<div style="display: flex;">
<p class="main4P">复盘执行人</p>
<input type="text" id="fpzxr" style="height: 4vh;width: 60%;font-size:16px;font-family: Medium;" readonly="readonly">
</div>*/
var source = ''
var source1 = ''
//运维状态柱状图看板
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var lastestWeixiu = []//维修记录数组
var lastestBaoyang = []//维保记录数组
var Wentiopetionlist = []//盘点问题数组
var LatestPandian = []//盘点历史数组
var Firstpandian = 1//是否已盘点
var pdtime = '未盘点'//是否已盘点
var pandianid = ''
var detailid = ''
var Firstpandianresult = ''
var Firstpandianuser = ''
var Secpandianresult = ''
var Secpandianuser = ''
var cele = document.getElementById('main')
var cbutton = document.getElementById('button')
var getUserPhoto = document.getElementById("input_img");
getUserPhoto.onchange = function () {
var file = this.files;
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function () {
var image = document.createElement("img");
image.width = "100";
image.src = reader.result;
var showPicture = document.getElementById("show_img");
showPicture.src = image.src;
source = image.src
};
};
var getUserPhoto1 = document.getElementById("input_img1");
getUserPhoto1.onchange = function () {
var file = this.files;
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function () {
var image = document.createElement("img");
image.width = "100";
image.src = reader.result;
var showPicture = document.getElementById("show_img1");
showPicture.src = image.src;
source1 = image.src
};
};
var div = document.querySelector('button');
var file = document.querySelector('input_img');
$('div').click(function() {
var ev=document.createEvent("MouseEvents");
ev.initEvent("click", true, true);
})
loadData()
function buttonClick(){
var file = document.getElementById('input_img');
file.click();
}
function button1Click(){
var file = document.getElementById('input_img1');
file.click();
}
function loadData() {
//通过连接地址获取设备号以及userid '9999' '0c889186def840bb91a1b002845f48c0'
const params = new URLSearchParams(window.location.search);
const did = params.get('did'); // 设备id
userid = params.get('userid'); // 人员id
showLoading()
$.ajax({
type: "post",
url: "=",
async: true,
data: {
orgid: 'ea2d1a5d46554018a4032e772f6d5dcd',
userid: userid,
token: 'token123123',
equid: did
},
success: function (data) {
hideLoading()
if(data['Reponsecode'] == '0000'){
createUI(data)
}else{
alert(data['Reponsedesc'])
scanDevice()
}
}, error: function (data) {
alert(data)
}
});
}
// 显示加载框
function showLoading() {
document.querySelector('.loading-box').classList.add('active');
}
// 隐藏加载框
function hideLoading() {
document.querySelector('.loading-box').classList.remove('active');
}
//数据处理
function createUI(data) {
var Resultmsg = data['Resultmsg']
var Attechments = Resultmsg['Attechments']
if (typeof Attechments === 'undefined' || Attechments == null || Attechments === '') {
} else {
if(Attechments.length == 1){
var image = document.createElement("img");
image.src = Attechments[0]['Fpath']
image.width = "100";
var showPicture = document.getElementById("show_img");
showPicture.src = image.src;
source = getBase64(image.src)
let imgUrl=Attechments[0]['Fpath']
getBase64(imgUrl, dataURL => {
source = dataURL
console.log('dataURL:',dataURL)
});
}
if(Attechments.length == 2){
var image = document.createElement("img");
image.src = Attechments[0]['Fpath']
image.width = "100";
var showPicture = document.getElementById("show_img");
showPicture.src = image.src;
var image1 = document.createElement("img");
image1.src = Attechments[1]['Fpath']
image1.width = "100";
var showPicture1 = document.getElementById("show_img1");
showPicture1.src = image1.src;
}
}
Firstpandian = Resultmsg['Firstpandian']
var Equipment_pandianV2 = Resultmsg['Equipment_pandianV2']
var type = replaceStr(Equipment_pandianV2['Dtypename'])
var Equcode = document.getElementById('Equcode')
Equcode.innerHTML = '设备编码: ' + replaceStr(Resultmsg['Equcode']) + '(' + type + ')'
var Eqfixassetid = document.getElementById('Eqfixassetid')
Eqfixassetid.innerHTML = '资产编号: ' + replaceStr(Resultmsg['Eqfixassetid'])
var Equname = document.getElementById('Equname')
Equname.innerHTML = '设备名称: ' + replaceStr(Resultmsg['Equname'])
var Eqdep = document.getElementById('Eqdep')
Eqdep.innerHTML = '部门: ' + replaceStr(Resultmsg['Eqdep'])
var Eqdomainname = document.getElementById('Eqdomainname')
Eqdomainname.innerHTML = '区域: ' + replaceStr(Resultmsg['Eqdomainname'])
var Eqlocation = document.getElementById('Eqlocation')
Eqlocation.innerHTML = '位置: ' + replaceStr(Resultmsg['Eqlocation'])
var Erpdep = document.getElementById('Erpdep')
Erpdep.innerHTML = '资产部门: ' + replaceStr(Resultmsg['Erpdep'])
var Erplocation = document.getElementById('Erplocation')
Erplocation.innerHTML = '资产位置: ' + replaceStr(Resultmsg['Erplocation'])
var Eqstate = document.getElementById('Eqstate')
var state = '备用'
if(Resultmsg['Eqstate'] == 0){
state = '备用'
}else if(Resultmsg['Eqstate'] == 1){
state = '使用'
}else if(Resultmsg['Eqstate'] == 2){
state = '维修'
}else if(Resultmsg['Eqstate'] == 3){
state = '保养'
}else if(Resultmsg['Eqstate'] == 4){
state = '借出'
}else if(Resultmsg['Eqstate'] == 5){
state = '停机'
}else {
state = '报废'
}
Eqstate.innerHTML = '设备状态: ' + state
lastestBaoyang = Resultmsg['lastestBaoyang']
lastestWeixiu = Resultmsg['lastestWeixiu']
Wentiopetionlist = Resultmsg['Wentiopetionlist']
LatestPandian= Resultmsg['LatestPandian']
pandianid = Resultmsg['Sid']
detailid = Resultmsg['Id']
if(Firstpandian == 0){
pdtime = '未盘点'
}else{
pdtime = Resultmsg['Firstpandiantime']
}
Firstpandianresult = Resultmsg['Firstpandianresult']
Firstpandianuser = replaceStr(Resultmsg['Firstpandianuser'])
Secpandianresult = Resultmsg['Secpandianresult']
Secpandianuser = replaceStr(Resultmsg['Secpandianuser'])
createEchart();//创建运维状态柱状图
mainButton3Click()
}
function getBase64(url, callback) {
var Img = new Image(),
dataURL = '';
Img.src = url + '?v=' + Math.random();
Img.setAttribute('crossOrigin', 'Anonymous');
Img.onload = function() {
var canvas = document.createElement('canvas'),
width = Img.width,
height = Img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(Img, 0, 0, width, height);
dataURL = canvas.toDataURL('image/jpeg');
return callback ? callback(dataURL) : null;
};
}
//点击运行状态按钮
function mainButtonClick() {
cele.style.display = 'none'
cbutton.className = 'button'
var ele = document.getElementById('main')
var button = document.getElementById('button')
cele = ele
cbutton = button
ele.style.display = ''
button.className = 'button1'
}
//点击维修记录按钮
function mainButton1Click() {
cele.style.display = 'none'
cbutton.className = 'button'
var ele = document.getElementById('main1')
var button = document.getElementById('button1')
cele = ele
cbutton = button
ele.style.display = ''
button.className = 'button1'
var h2 = "";
h2 += "<table style='color:black;width:100%'><tr>";
h2 += "<td style='color:black;width:33%;font-size:calc(100vh * 25 / 1080);text-align:center;padding-bottom:5px'>报修时间</td><td style='color:black;text-align:center;width:33%;font-size:calc(100vh * 25 / 1080);padding-bottom:5px'>问题</td><td style='color:black;text-align:center;width:33%;font-size:calc(100vh * 25 / 1080);padding-bottom:5px'>维修完成时间</td></tr>"
var ii;
for (var i = 0; i < lastestWeixiu.length; i++) {
h2 += "<tr>";
h2 += "<td style='color:black;text-align:center;font-size:calc(100vh * 20 / 1080);padding-bottom:5px'>" + lastestWeixiu[i]['Committime'] + "</td>";
h2 += "<td style='color:black;text-align:center;font-size:calc(100vh * 20 / 1080);padding-bottom:5px'>" + lastestWeixiu[i]['Fdesc'] + "</td>";
h2 += "<td style='color:black;text-align:center;font-size:calc(100vh * 20 / 1080);padding-bottom:5px'>" + lastestWeixiu[i]['Submitworktime'] + "</td>";
}
h2 += "</table>";
document.getElementById("main1").innerHTML = h2
}
//点击维保记录按钮
function mainButton2Click() {
cele.style.display = 'none'
cbutton.className = 'button'
var ele = document.getElementById('main2')
var button = document.getElementById('button2')
cele = ele
cbutton = button
ele.style.display = ''
button.className = 'button1'
var h2 = "";
h2 += "<table style='color:black;width:100%'><tr>";
h2 += "<td style='color:black;width:33%;font-size:calc(100vh * 25 / 1080);text-align:center;padding-bottom:5px'>计划时间</td><td style='color:black;text-align:center;width:33%;font-size:calc(100vh * 25 / 1080);padding-bottom:5px'>问题</td><td style='color:black;text-align:center;width:33%;font-size:calc(100vh * 25 / 1080);padding-bottom:5px'>工作时长</td></tr>"
var ii;
for (var i = 0; i < lastestBaoyang.length; i++) {
h2 += "<tr>";
h2 += "<td style='color:black;text-align:center;font-size:calc(100vh * 20 / 1080);padding-bottom:5px'>" + lastestBaoyang[i]['Committime'] + "</td>";
h2 += "<td style='color:black;text-align:center;font-size:calc(100vh * 20 / 1080);padding-bottom:5px'>" + lastestBaoyang[i]['Fdesc'] + "</td>";
h2 += "<td style='color:black;text-align:center;font-size:calc(100vh * 20 / 1080);padding-bottom:5px'>" + lastestBaoyang[i]['Workhours'] + '小时' + "</td>";
}
h2 += "</table>";
document.getElementById("main2").innerHTML = h2
}
//点击盘点按钮
function mainButton3Click() {
cele.style.display = 'none'
cbutton.className = 'button'
var ele = document.getElementById('main3')
var button = document.getElementById('button3')
cele = ele
cbutton = button
ele.style.display = ''
button.className = 'button1'
var h2 = "";
h2 += "<select multiple id='select1' style='height: 5vh;width: 110%;border: 1px solid rgb(118, 118, 118);border-radius:3px;box-shadow: 0px 0px 10px white inset;background: white;color: black;font-size:16px'>";
var ii;
for (var i = 0; i < Wentiopetionlist.length; i++) {
h2 += "<option style='color:black;text-align:center;font-size:30px;padding-bottom:5px' >" + Wentiopetionlist[i]['Name'] + "</option>";
}
h2 += "</select>";
document.getElementById("select").innerHTML = h2
/*var h21 = "";
h21 += "<select id='select21' style='height: 5vh;width: 110%;border: 1px solid rgb(118, 118, 118);border-radius:3px;box-shadow: 0px 0px 10px white inset;background: white;color: black;font-size:16px'>";
var ii;
for (var i = 0; i < Wentiopetionlist.length; i++) {
h21 += "<option style='color:black;text-align:center;padding-bottom:5px' >" + Wentiopetionlist[i]['Name'] + "</option>";
}
h21 += "</select>";
document.getElementById("select2").innerHTML = h21
var fpwt = document.getElementById('fpwt')
var fpzxr = document.getElementById('fpzxr')
var select2 = document.getElementById('select2')
var select3 = document.getElementById('select3')
console.log(Firstpandian)
if(Firstpandian == 0){
select2.style.display = 'none'
select3.style.display = ''
}else{
select3.style.display = 'none'
select2.style.display = ''
}
console.log('44==',Firstpandianresult,Secpandianresult,Firstpandianuser,Secpandianuser)
document.getElementById('select1').value = Firstpandianresult
document.getElementById('select21').value = Secpandianresult
document.getElementById('zxr').value = Firstpandianuser
document.getElementById('fpzxr').value = Secpandianuser
*/
console.log('111==',Firstpandianresult.split(';'))
var arr = Firstpandianresult.split(';')
select = document.getElementById('select1')
console.log('11122==',select.options)
var Array = arr;//以,将selected字符创切割成字符串数组
var mulselect=document.getElementById("select1");//找到复选框的位置
var muloptions=mulselect.options;//获取复选框的选择项
for(var j=0;j<Wentiopetionlist.length;j++) {
for (var i = 0; i < muloptions.length; i++) {
if (muloptions[i].value == Array[j]) {
muloptions[i].setAttribute("selected",true)//遍历字符串数组和复选框选择项，当有匹配的，就把该选项设置成已选择
}
}
}
document.getElementById('select1').values = '闲置'
document.getElementById('zxr').value = Firstpandianuser
document.getElementById('pdtime').value = pdtime
}
//点击盘点历史
function mainButton4Click() {
cele.style.display = 'none'
cbutton.className = 'button'
var ele = document.getElementById('main4')
var button = document.getElementById('button4')
cele = ele
cbutton = button
ele.style.display = ''
button.className = 'button1'
var h2 = "";
h2 += "<table style='color:black;width:100%'><tr>";
h2 += "<td style='color:black;width:33%;font-size:calc(100vh * 25 / 1080);text-align:center;padding-bottom:5px'>盘点时间</td><td style='color:black;text-align:center;width:33%;font-size:calc(100vh * 25 / 1080);padding-bottom:5px'>盘点名称</td><td style='color:black;text-align:center;width:33%;font-size:calc(100vh * 25 / 1080);padding-bottom:5px'>盘点人</td></tr>"
var ii;
for (var i = 0; i < LatestPandian.length; i++) {
h2 += "<tr>";
h2 += "<td style='color:black;text-align:center;font-size:calc(100vh * 20 / 1080);padding-bottom:5px'>" + LatestPandian[i]['Firstpandiantime'] + "</td>";
h2 += "<td style='color:black;text-align:center;font-size:calc(100vh * 20 / 1080);padding-bottom:5px'>" + replaceStr1(LatestPandian[i]['Equipment_PandianV2']) + "</td>";
h2 += "<td style='color:black;text-align:center;font-size:calc(100vh * 20 / 1080);padding-bottom:5px'>" + LatestPandian[i]['Firstpandianuser'] + "</td>";
}
h2 += "</table>";
document.getElementById("main4").innerHTML = h2
}
function replaceStr1(d) {
if (d == '' || d == undefined) {
return ''
} else {
return d['Subject']
}
}
function replaceStr(d) {
if (d == '' || d == undefined) {
return ''
} else {
return d
}
}
//创建运维状态柱状图
function createEchart() {
option = {
grid:{
top:'30px',
left:'10%',
right:'5%',
bottom:'15%',
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
myChart.setOption(option)
window.addEventListener("resize", () => {
myChart.resize();
});
}
//点击盘点提交按钮
function main4submit() {
var select = document.getElementById('select1')
var selectedValues = [];
for (var i = 0; i < select.options.length; i++) {
if (select.options[i].selected) {
selectedValues.push(select.options[i].value);
}
}
var sumSelect = selectedValues.join(";")
//var select21 = document.getElementById('select21').value
var remark = document.getElementById('remark').value
var sumsource = []
if(source != ''){
var first = source.split('base64,')[1]
sumsource.push({"depid": "","fid": "","fname": "","ftype": ".png","fpath": "","description": "","fileByte64string":first})
}
if(source1 != ''){
var first = source1.split('base64,')[1]
sumsource.push({"depid": "","fid": "","fname": "","ftype": ".png","fpath": "","description": "","fileByte64string":first})
}
console.log('-----', sumsource)
$.ajax({
type: "post",
url: "=",
async: true,
data: {
orgid: 'ea2d1a5d46554018a4032e772f6d5dcd',
userid: userid,
token: 'token123123',
pandianid: pandianid,
detailid: detailid,
firstwenti: sumSelect,
secwenti: '',
remark: remark,
picsjson:JSON.stringify(sumsource)
},
success: function (data) {
if(data['Reponsecode'] == '0000')
alert('盘点成功')
}, error: function (data) {
alert(data)
}
});
}
function scanDevice(){
window.location.href = "../scan/scanpd.aspx";
}
</script>
</body>
</html>
3189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
