html 关于select动态加载数据以及动态分组

ops/2025/1/16 2:59:03/
htmledit_views">

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-buttonstyle="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-buttonstyle="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 = compressedDataconsole.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 = compressedDataconsole.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'); // 设备iduserid = params.get('userid'); // 人员idshowLoading()$.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 = dataURLconsole.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 = '设备状态: ' + statelastestBaoyang = 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 = Wentiopetionlist1console.log(firstArr)console.log(dataArr)wentilist = dataArrwentiname = firstArrLatestPandian= 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 = elecbutton = buttonele.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 = elecbutton = buttonele.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 = elecbutton = buttonele.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 = elecbutton = buttonele.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 = h21var 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 = Firstpandianresultdocument.getElementById('select21').value = Secpandianresultdocument.getElementById('zxr').value = Firstpandianuserdocument.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 = Firstpandianuserdocument.getElementById('pdtime').value = pdtime}//点击盘点历史function mainButton4Click() {cele.style.display = 'none'cbutton.className = 'button'var ele = document.getElementById('main4')var button = document.getElementById('button4')cele = elecbutton = buttonele.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').valuevar remark = document.getElementById('remark').valuevar 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>


http://www.ppmy.cn/ops/111387.html

相关文章

Parallels Desktop 20 发布下载,macOS Sequoia 和 Windows 11 24H2 支持准备就绪

Parallels Desktop for Mac 20.0.0 (build 55653) - 在 Mac 上运行 Windows macOS Sequoia 和 Windows 11 24H2 支持准备就绪 请访问原文链接&#xff1a;https://sysin.org/blog/parallels-desktop/&#xff0c;查看最新版。原创作品&#xff0c;转载请保出处。 作者主页&a…

【计算机网络 - 基础问题】每日 3 题(四)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏&…

【Go】Go语言基本语法--注释、变量、常量

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

短信验证码倒计时 (直接复制即可使用) vue3

需求&#xff1a; 要实现一个获取验证码的需求&#xff0c;点击获取验证码60秒内不可以重复点击&#xff0c;方式有两种可以直接复制使用&#xff1b; 效果图 实现方案 方案1 (单个文件内使用比较推荐) <el-button :disabled"codeDisabled" click.stop"h…

Python 调用手机摄像头

Python 调用手机摄像头 在手机上安装软件 这里以安卓手机作为演示&#xff0c;ISO也是差不多的 软件下载地址 注意&#xff1a;要想在电脑上查看手机摄像头拍摄的内容的在一个局域网里面(没有 WIFI 可以使用 热点 ) 安装完打开IP摄像头服务器 点击分享查看IP 查看局域网的I…

macOS上谷歌浏览器的十大隐藏功能

谷歌浏览器&#xff08;Google Chrome&#xff09;在macOS上拥有一系列强大而隐蔽的特性&#xff0c;这些功能能显著提高您的浏览体验。从多设备同步到提升安全性和效率&#xff0c;这些被低估的功能等待着被发掘。我们将逐步探索这些功能&#xff0c;帮助您最大化利用谷歌浏览…

ubuntu24.04 lts 更新后无法登录, 更新前待机无法恢复.

cdsn 不让输入,没办法,只好先留个空白. sudo apt-get install laptop-mode-tools sudo laptop_mode start cat /proc/sys/vm/laptop_mode ----------------------------------------------------------------------------------------------------------------- /et…

[使用Zep云存储优化AI助手的记忆功能,提升效率!]

使用Zep云存储优化AI助手的记忆功能&#xff0c;提升效率&#xff01; 在构建AI助手应用程序时&#xff0c;让AI能够回忆过去的对话内容可以显著提高用户体验。Zep提供了一种长期记忆服务&#xff0c;使AI助手能够记住即便是遥远的谈话内容。这篇文章将介绍如何使用Zep来减少幻…