html 关于select动态加载数据以及动态分组
1.select动态加载方法
<select id="mySelect1" style="width: 120px;"></select>
通过id获取元素
for (obj of wentiname) {
//js创建optgroup标签
let optgroup=document.createElement("optgroup");
//设置optgroup标签的label和id值
optgroup.label=obj;
optgroup.id="optgroupId"+index;
//把创建optgroup新增到select下
document.getElementById("mySelect1").add(optgroup);
//针对optgroup标签，添加它的option标签
for (var i = 0; i < wentilist[obj].length; i++) {
//js创建option标签
let option=document.createElement("option");
option.value=wentilist[obj][i].Name;
option.innerHTML=wentilist[obj][i].Name;
document.getElementById("optgroupId"+index).appendChild(option);
}
index+=1; //自定义下标放在最后新增，防止添加option时id增加
}
设置默认值
var Array = arr;//以,将selected字符创切割成字符串数组
var mulselect=document.getElementById("mySelect1");//找到复选框的位置
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)//遍历字符串数组和复选框选择项，当有匹配的，就把该选项设置成已选择
}
}
}
<!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>
<script src="ele_source/index.js"></script>
<script src="ele_source/vue.js"></script>
<link rel="stylesheet" href="ele_source/index.js">
<!-- 引入样式 -->
<link rel="stylesheet" href="ele_source/index.css" />
<!-- 引入组件库 -->
<script src="ele_source/vue.js"></script>
<script src="ele_source/index.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: 15px;
margin: 5px;
margin-left: 15px;
font-family: Medium;
}
.name1 {
font-size: 15px;
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: 2px;
font-size: 14px;
margin-left:10px;
font-family: Medium;
}
.button1 {
height: 5vh;
line-height: 5vh;
margin-right: 2px;
font-size: 14px;
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: 8.5vh;">
</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: 19.5vh;">
<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="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="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>
<select id="select" multiple style="height: 4vh;width: 65%;height: 5vh;border: 1px solid rgb(118, 118, 118);border-radius:3px;box-shadow: 0px 0px 10px white inset;background: white;color: black;font-size:16px"></select>
</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:15px">选择图片</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:15px">选择图片</button>
</div>
<div id="app" style="display: flex;">
<canvas id="canvas" style="display: none;"></canvas>
<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 = ''
new Vue({
el: '#demo',
data: function() {
return { visible: false }
}
})
/*<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 wentiname = []//盘点问题数组
var wentilist = []//盘点问题数组
var LatestPandian = []//盘点历史数组
var Firstpandian = 1//是否已盘点
var pdtime = '未盘点'//是否已盘点
var pandianid = ''
var detailid = ''
var Firstpandianresult = ''
var Firstpandianuser = ''
var Secpandianresult = ''
var Secpandianuser = ''
var cele = document.getElementById('main1')
var cbutton = document.getElementById('button1')
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.src = reader.result;
var showPicture = document.getElementById("show_img");
showPicture.src = image.src;
console.log('111===',image.src.length)
image.onload = function () {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const maxWidth = 500; // 设置最大宽度为800像素
let width = image.width;
let height = image.height;
// 判断是否需要缩放
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
// 设置 canvas 的宽高
canvas.width = width;
canvas.height = height;
// 将图片绘制到 canvas 上
ctx.drawImage(image, 0, 0, width, height);
// 获取压缩后的图片数据
const compressedData = canvas.toDataURL('image/jpeg', 0.6); // 可调整质量参数
// 创建一个新的压缩后的 File 对象
const compressedFile = dataURItoBlob(compressedData, file.type);
compressedFile.lastModifiedDate = file.lastModifiedDate;
compressedFile.name = file.name;
source = compressedData
console.log('34333==',compressedData.length)
// 上传压缩后的图片文件
//uploadImage(compressedFile);<optgroup label='Group 1'><option value='option1'>Option 1</option><option value='option2'>Option 2</option></optgroup>
};
};
};
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.src = reader.result;
var showPicture = document.getElementById("show_img1");
showPicture.src = image.src;
image.onload = function () {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const maxWidth = 500; // 设置最大宽度为800像素
let width = image.width;
let height = image.height;
// 判断是否需要缩放
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
// 设置 canvas 的宽高
canvas.width = width;
canvas.height = height;
// 将图片绘制到 canvas 上
ctx.drawImage(image, 0, 0, width, height);
// 获取压缩后的图片数据
const compressedData = canvas.toDataURL('image/jpeg', 0.1); // 可调整质量参数
// 创建一个新的压缩后的 File 对象
const compressedFile = dataURItoBlob(compressedData, file.type);
compressedFile.lastModifiedDate = file.lastModifiedDate;
compressedFile.name = file.name;
source1 = compressedData
console.log('34333==',compressedData.length)
// 上传压缩后的图片文件
//uploadImage(compressedFile);
};
};
};
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 dataURItoBlob(dataURI, mimeType) {
const binary = atob(dataURI.split(',')[1]);
const array = [];
for (let i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], { type: mimeType });
}
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']
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']
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['Erpname'])
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']
var Wentiopetionlist1 = Resultmsg['Wentiopetionlist']
var firstArr = []
var dataArr = {}
for (var i = 0; i < Wentiopetionlist1.length; i++){
var dic = Wentiopetionlist1[i]
if(firstArr.indexOf(dic['Properties']) != -1){
console.log('包含',dataArr)
console.log('包含key',dic['Properties'])
var arr = dataArr[dic['Properties']]
console.log('arr===',arr)
arr.push(dic)
Object.assign(dataArr,{[dic['Properties']]:arr})
}else{
firstArr.push(dic['Properties'])
console.log('不包含')
Object.assign(dataArr,{[dic['Properties']]:[dic]})
}
}
Wentiopetionlist = Wentiopetionlist1
console.log(firstArr)
console.log(dataArr)
wentilist = dataArr
wentiname = firstArr
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'])
lastestDailyduration =Resultmsg['lastestDailyduration']
// 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]['Submitworktime'] + "</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'
let language={
"languageList":[
{
"groupName":"前端",
"optionName":[
{"languageName":"html"},
{"languageName":"CSS"},
{"languageName":"javascript"}
],
},
{
"groupName":"后端",
"optionName":[
{"languageName":"java"},
{"languageName":"JSP"}
]
}
]
};
//language.languageList - 数据位置
let index=0;
for (obj of wentiname) {
//js创建optgroup标签
let optgroup=document.createElement("optgroup");
//设置optgroup标签的label和id值
optgroup.label=obj;
optgroup.id="optgroupId"+index;
//把创建optgroup新增到select下
document.getElementById("select").add(optgroup);
//针对optgroup标签，添加它的option标签
for (var i = 0; i < wentilist[obj].length; i++) {
//js创建option标签
let option=document.createElement("option");
option.value=wentilist[obj][i].Name;
option.innerHTML=wentilist[obj][i].Name;
document.getElementById("optgroupId"+index).appendChild(option);
}
index+=1; //自定义下标放在最后新增，防止添加option时id增加
}
/*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('select')
console.log('11122==',select.options)
var Array = arr;//以,将selected字符创切割成字符串数组
var mulselect=document.getElementById("select");//找到复选框的位置
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('select').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++) {
var str = replaceStr1(LatestPandian[i]['Equipment_PandianV2'])
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'>" + str + "</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) {
console.log('1231231===',d)
if (d == '' || d == undefined) {
return ''
} else {
return d['Subject']
}
}
function replaceStr(d) {
if (d == '' || d == undefined) {
return ''
} else {
return d
}
}
//创建运维状态柱状图
function createEchart() {
var nameArr = []
var valueArr = []
for (let i = 0; i<lastestDailyduration.length; i++) {
//for循环let key是对象里面的键，再通过,[]的形式this.objNum[item]去获取对象的value值
var name = lastestDailyduration[i]['Cdate']
nameArr.push(name.slice(5,10))
valueArr.push(((lastestDailyduration[i]['Worktime']*1)/3600.00).toFixed(1))
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '5%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
data:nameArr.reverse(),
boundaryGap: [0, 0.01]
},
yAxis: {
},
series: [
{
name: '工作时长',
type: 'bar',
data: valueArr.reverse(),
label: {
show: true
}
}
]
};
myChart.setOption(option)
window.addEventListener("resize", () => {
myChart.resize();
});
}
//点击盘点提交按钮
function main4submit() {
var select = document.getElementById('select')
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: "http://cmms.fri-sport.com/CMMSWebServiceV2/EquipmentPandianWebService.asmx/Pandian",
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) {
console.log('111===',data)
if(data['Reponsecode'] == '0000'){
alert('盘点成功')
}else{
alert(data.Reponsedesc)
console.log('111===',data.Reponsedesc)
}
}, error: function (data) {
console.log('112221===',data)
alert(data)
}
});
}
function scanDevice(){
window.location.href = "../scan/scanpd.aspx";
}
</script>
</body>
</html>