energy_storage/bin/Release/assets/html/pages/test.js

function addCardPanel(code, name, type, subList) {
  var root = document.getElementById('workspace')

  var card = document.createElement('div')
  card.className = 'mycard'
  card.setAttribute('id', code);
  card.innerHTML =
    `<div class="myrow" style="margin-bottom: 20px">
      <div style="width: 65px;height: 65px; background-color: #2991b6;border-radius: 10px;"></div>
      <div class="mycol" style="margin-left: 10px; font-size:15px;">
        <div> ${code} </div>
        <div style="font-size:15px;"> ${name} </div>
        <div style="color: #08afff; font-size:14px; font-weight: bold;"> ${type} </div>
      </div>
    </div>`

  // '<div class="mycard-param">'
  // '<div class="mycard-param-key">工作状态: </div>'
  // '<div id="id" class="mycard-param-text">运行/空闲</div>'
  // '</div>'
  if (subList && subList.length > 1) {
    card.innerHTML +=
      `<div class="myrow">
        <div id="${code}_${subList[0]}" style="width: calc(50% - 10px); border: solid gray; border-width: 0 1px 0 0;">
          <div class="myrow" style="font-size:14px; margin-left: 10px;">
            <div style="background-color:#00dbd7; width: 5px; height:18px; "></div>
            <div style="margin-left: 10px;">#${subList[0]}</div>
            <div class="status-ok" style="margin: 3px 0 0 30px; "></div>
          </div>
        </div>
        <div id="${code}_${subList[1]}" style="width: calc(50% - 10px); margin-left: 10px;">
          <div class="myrow" style="font-size:14px; margin-left: 10px;">
            <div style="background-color:#00dbd7; width: 5px; height:18px; "></div>
            <div style="margin-left: 10px;">#${subList[1]}</div>
            <div class="status-err" style="margin: 3px 0 0 30px; "></div>
          </div>
        </div>
      </div>`
  }

  root.appendChild(card)
  return card
}

function addCardParam(cardid, subid, key, text) {
  var paramid = cardid + (subid ? ("_" + subid) : "") + "_" + key
  param = document.createElement('div')
  param.className = 'mycard-param'
  param.innerHTML = `<div class="mycard-param-key">${key}: </div>
    <div id="${paramid}" class="mycard-param-text">${text}</div>`

  if (subid) {
    $('#' + cardid + '_' + subid).append(param)
  } else {
    $('#' + cardid).append(param)
  }
}

function setCardParam(cardid, subid, key, text) {
  var paramid = cardid + (subid ? ("_" + subid) : "") + "_" + key
  $("#" + paramid).text(text);
}

addCardPanel('编号1', '名称', '设备类型')
addCardParam('编号1', null, "电压", "220 V");
setCardParam('编号1', null, "电压", "290 V");

addCardPanel('编号2', '名称', '设备类型', ['1', '2'])
addCardParam('编号2', '1', "电压", "200 V");
addCardParam('编号2', '1', "电流", "10 V");
addCardParam('编号2', '2', "电压", "220 V");

setCardParam('编号2', '1', "电压", "210 V");

// var dataTablesOption = {
//   data: [],
//   columns: [],
//   scrollY: "800px",
//   bSort: false,
//   aLengthMenu: [10, 20, 50, 100], //设置每页显示数据条数的下拉选项
//   displayLength: 20, //每页初始显示最大记录数量
//   // 设置：表格（t）、分页数据条数（l）、搜索框（f）、表格信息（i）、分页（p）、加载信息（r）
//   //dom: '<"table-ext"<"item"f><"item"l><"item"i><"item"p>>rt',
//   language: {
//     lengthMenu: '每页显示 _MENU_ 条记录',
//     sZeroRecords: '对不起，查询不到任何相关数据',
//     sInfo: '当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录',
//     sInfoEmtpy: '找不到相关数据',
//     sInfoFiltered: '数据表中共为 _MAX_ 条记录)',
//     processing: '正在加载中...',
//     search: '结果中搜索: ',
//     paginate: { sPrevious: ' 上一页 ', sNext: ' 下一页 ', },
//   },
// }

// var htmlOptEdit = '<button class="btn btn-outline-primary btn-sm" style="width:80px; height: 28px;" id="btnRowEdit">编辑</button>'

// var htmlOptHref = '<a href="javascript:void(0);" class="table-btn-edit">编辑</a>' +
//   //   '<a href="javascript:void(0);" class="table-btn-del">删除</a>' +
//   '<a href="javascript:void(0);" class="">采购</a>' +
//   '<a href="javascript:void(0);" class="">入库</a>' +
//   '<a href="javascript:void(0);" class="">销售</a>' +
//   '<a href="javascript:void(0);" class="">出库</a>'

// dataTablesOption.columns = [
//   { title: '编号', width: '50px' },
//   { title: '产品名称', width: '150px' },
//   { title: '规格型号', width: '150px' },
//   { title: '类别', width: '150px' },
//   { title: '库存量', width: '80px' },
//   { title: '采购总量', width: '80px' },
//   { title: '入库总量', width: '80px' },
//   { title: '销售总量', width: '80px' },
//   { title: '出库总量', width: '80px' },
//   { title: '异常总量', width: '80px' },
//   { title: '异常说明' },
//   {
//     title: '操作',
//     width: '300px',
//     render: function (data, type, row) { return htmlOptEdit },
//   },
// ]
// var table = $('#myTable').DataTable(dataTablesOption)
// var rowid = 0;
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])

// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.row.add([++rowid, '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
// table.draw()