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>
相关推荐
光影少年5 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_6 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189118 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾10 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu12 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym16 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫18 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫22 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat23 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js