energy_storage/bin/Release/assets/html/pages/系统管理.html

<div class="mycolumn" style="padding: 10px">
  <div class="myrow" style="height: 40px">
    <button id="userBtn" class="btn btn-success btn-lg" style="width: 120px" onclick="initSubpage('user')">人员管理</button>
    <button id="roleBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
      onclick="initSubpage('role')">角色管理</button>
    <button id="permissionBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
      onclick="initSubpage('permission')">
      权限管理
    </button>
    <button id="deviceBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
      onclick="initSubpage('device')">设备管理</button>
    <button id="priceBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
      onclick="initSubpage('price')">计费管理</button>
    <button id="policyBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
      onclick="initSubpage('policy')">策略管理</button>
    <button id="syslogBtn" class="btn btn-primary" style="width: 120px; margin-left: 10px"
      onclick="initSubpage('syslog')">系统日志</button>
  </div>
  <hr style="margin: 10px 0 10px 0;" />

  <div id="user" style="display: block">
    <button class="btn btn-success" style="width: 90px" onclick="showPop('user')">新增</button>
    <button class="btn btn-success" style="width: 90px; margin-left: 20px" onclick="updateTableUser()">查询</button>
    <!-- 
        cell-border	每个单元格四边的边框
        compact	减小 DataTable 默认样式使用的空白空间，提高屏幕上的信息密度（自 1.10.1 起）
        hover	鼠标经过时的高亮显示
        nowrap	禁用表格中内容的换行，因此单元格中的所有文本都在一行上（自 1.10.1 起）
        order-column	高亮显示当前对表格数据进行排序的列
        row-border	仅为每个单元格的顶部和底部添加边框（即为行）。注意 cell-border 和 row-border 互斥，不能一起使用。
        stripe	行条纹 
        -->
    <table id="userTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
  </div>

  <div id="role" style="display: none">
    <button class="btn btn-success" style="width: 90px" onclick="showPop('role')">新增</button>
    <table id="roleTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
  </div>

  <div id="permission" style="display: none">
    <button class="btn btn-success" style="width: 90px" onclick="showPop('permission')">新增</button>
    <table id="permissionTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
  </div>

  <div id="device" style="display: none">
    <button class="btn btn-success" style="width: 90px" onclick="showPop('device')">新增</button>
    <table id="deviceTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
  </div>

  <div id="price" style="display: none">
    <button class="btn btn-success" style="width: 90px" onclick="showPop('price')">新增</button>
    <table id="priceTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
  </div>

  <div id="policy" style="display: none">
    <button class="btn btn-success" style="width: 90px" onclick="showPop('policy')">新增</button>
    <table id="policyTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
  </div>

  <div id="syslog" style="display: none">
    <table id="syslogTable" class="stripe" style="width: 100%; margin-top: 10px"></table>
  </div>

  <div id="userPop" class="mask">
    <div class="pop" style="height: 600px">
      <p id="userPopTitle" class="pop_title"></p>
      <form id="userForm" class="was-validated" style="margin: 0 80px 0 80px; padding-top: 30px">
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">账户*</span>
          <input id="userForm_account" type="text" class="form-control" required />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">角色*</span>
          <select id="userForm_role_id" class="form-select"></select>
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">姓名*</span>
          <input id="userForm_name" type="text" class="form-control" required />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">性别</span>
          <select id="userForm_gender" class="form-select">
            <option value="1">男</option>
            <option value="0">女</option>
          </select>
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">年龄</span>
          <input id="userForm_age" type="text" class="form-control" />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">手机号</span>
          <input id="userForm_phone" type="text" class="form-control" />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">邮箱</span>
          <input id="userForm_email" type="text" class="form-control" />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
          <div class="btn-group" style="margin-left: 5px">
            <input id="userForm_on" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('userForm_on', 'userForm_off', this.checked)" />
            <label class="btn btn-outline-primary" for="userForm_on">开</label>
            <input id="userForm_off" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('userForm_on', 'userForm_off', !this.checked)" checked />
            <label class="btn btn-outline-danger" for="userForm_off">关</label>
          </div>
        </div>
      </form>
      <div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
        <button id="userFormOk" class="btn btn-success" style="width: 90px; margin-right: 20px" disabled>确定</button>
        <button id="userFormCannel" class="btn btn-danger" style="width: 90px; margin-left: 20px"
          onclick="G.showElement('userPop', false)">取消</button>
      </div>
    </div>
  </div>

  <div id="rolePop" class="mask">
    <div class="pop" style="height: 800px">
      <p id="rolePopTitle" class="pop_title"></p>
      <form id="roleForm" class="was-validated" style="margin: 0 80px 0 80px; padding-top: 30px">
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">名称*</span>
          <input id="roleForm_name" type="text" class="form-control" required />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">描述</span>
          <textarea id="roleForm_describe" class="form-control" style="height: 120px"></textarea>
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">权限</span>
          <div class="form-control" style="height: 320px; display: flex; overflow: auto">
            <ul id="roleForm_permission" style="text-align: left; list-style-type: none; padding-left: 10px">
              <!-- <li><input class="form-check-input" type="checkbox" value="" />系统总览-查看</li> -->
            </ul>
          </div>
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
          <div class="btn-group" style="margin-left: 5px">
            <input id="roleForm_on" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('roleForm_on', 'roleForm_off', this.checked)" />
            <label class="btn btn-outline-primary" for="roleForm_on">开</label>
            <input id="roleForm_off" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('roleForm_on', 'roleForm_off', !this.checked)" checked />
            <label class="btn btn-outline-danger" for="roleForm_off">关</label>
          </div>
        </div>
      </form>
      <div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
        <button id="roleFormOk" class="btn btn-success" style="width: 90px; margin-right: 20px" disabled>确定</button>
        <button class="btn btn-danger" style="width: 90px; margin-left: 20px"
          onclick="G.showElement('rolePop', false)">取消</button>
      </div>
    </div>
  </div>

  <div id="permissionPop" class="mask">
    <div class="pop" style="height: 600px; width: 1000px">
      <p id="permissionPopTitle" class="pop_title"></p>
      <form id="permissionForm" class="was-validated" style="margin: 0 80px 0 80px; padding-top: 30px">
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">名称*</span>
          <input id="permissionForm_name" type="text" class="form-control" required />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">描述</span>
          <textarea id="permissionForm_describe" class="form-control" style="height: 120px"></textarea>
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
          <div class="btn-group" style="margin-left: 5px">
            <input id="permissionForm_on" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('permissionForm_on', 'permissionForm_off', this.checked)" />
            <label class="btn btn-outline-primary" for="permissionForm_on">开</label>
            <input id="permissionForm_off" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('permissionForm_on', 'permissionForm_off', !this.checked)" checked />
            <label class="btn btn-outline-danger" for="permissionForm_off">关</label>
          </div>
        </div>
      </form>
      <div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
        <button id="permissionFormOk" class="btn btn-success" style="width: 90px; margin-right: 20px"
          disabled>确定</button>
        <button class="btn btn-danger" style="width: 90px; margin-left: 20px"
          onclick="G.showElement('permissionPop', false)">取消</button>
      </div>
    </div>
  </div>

  <div id="devicePop" class="mask">
    <div class="pop" style="height: 500px">
      <p id="devicePopTitle" class="pop_title"></p>
      <form id="deviceForm" class="was-validated" style="margin: 0 80px 0 80px; padding-top: 30px">
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">类型*</span>
          <input id="deviceForm_type" type="text" class="form-control" required />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">名称*</span>
          <input id="deviceForm_name" type="text" class="form-control" required />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">编号</span>
          <input id="deviceForm_code" type="text" class="form-control" />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">型号</span>
          <input id="deviceForm_model" type="text" class="form-control" />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">厂家</span>
          <input id="deviceForm_factory" type="text" class="form-control" />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
          <div class="btn-group" style="margin-left: 5px">
            <input id="deviceForm_on" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('deviceForm_on', 'deviceForm_off', this.checked)" />
            <label class="btn btn-outline-primary" for="deviceForm_on">开</label>
            <input id="deviceForm_off" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('deviceForm_on', 'deviceForm_off', !this.checked)" />
            <label class="btn btn-outline-danger" for="deviceForm_off">关</label>
          </div>
        </div>
      </form>
      <div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
        <button id="deviceFormOk" class="btn btn-success" style="width: 90px; margin-right: 20px" disabled>确定</button>
        <button class="btn btn-danger" style="width: 90px; margin-left: 20px"
          onclick="G.showElement('device', false)">取消</button>
      </div>
    </div>
  </div>

  <div id="pricePop" class="mask">
    <div class="pop" style="height: 500px">
      <p id="pricePopTitle" class="pop_title"></p>
      <form id="priceForm" class="was-validated" style="margin: 0px 80px 0 80px; padding-top: 30px">
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">名称*</span>
          <input id="priceForm_name" type="text" class="form-control" required />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">类型*</span>
          <select id="priceForm_type" class="form-select" required></select>
        </div>

        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">描述</span>
          <textarea id="priceForm_describe" class="form-control" style="height: 120px"></textarea>
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
          <div class="btn-group" style="margin-left: 5px">
            <input id="priceForm_on" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('priceForm_on', 'priceForm_off', this.checked)" />
            <label class="btn btn-outline-primary" for="priceForm_on">开</label>
            <input id="priceForm_off" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('priceForm_on', 'priceForm_off', !this.checked)" checked />
            <label class="btn btn-outline-danger" for="priceForm_off">关</label>
          </div>
        </div>
      </form>
      <div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
        <button id="priceFormOk" class="btn btn-success" style="width: 90px; margin-right: 20px" disabled>确定</button>
        <button class="btn btn-danger" style="width: 90px; margin-left: 20px"
          onclick="G.showElement('pricePop', false)">取消</button>
      </div>
    </div>
  </div>

  <div id="policyPop" class="mask">
    <div class="pop" style="height: 600px">
      <p id="policyPopTitle" class="pop_title"></p>
      <form id="policyForm" class="was-validated" style="margin: 0 80px 0 80px; padding-top: 30px">
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">名称*</span>
          <input id="policyForm_name" type="text" class="form-control" required />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">类型*</span>
          <select id="policyForm_type" class="form-select" required></select>
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">参数</span>
          <input id="policyForm_value" type="text" class="form-control" required />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; height: 40px; background-color: #a6c0da">描述</span>
          <textarea id="policyForm_describe" class="form-control" style="height: 120px"></textarea>
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" style="width: 90px; background-color: #a6c0da">是否启用</span>
          <div class="btn-group" style="margin-left: 5px">
            <input id="policyForm_on" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('policyForm_on', 'policyForm_off', this.checked)" />
            <label class="btn btn-outline-primary" for="policyForm_on">开</label>
            <input id="policyForm_off" type="checkbox" class="btn-check" autocomplete="off"
              onclick="G.switchSetStatus('policyForm_on', 'policyForm_off', !this.checked)" checked />
            <label class="btn btn-outline-danger" for="policyForm_off">关</label>
          </div>
        </div>
      </form>
      <div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
        <div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
          <button id="policyFormOk" class="btn btn-success" style="width: 90px; margin-right: 20px" disabled>确定</button>
          <button class="btn btn-danger" style="width: 90px; margin-left: 20px"
            onclick="G.showElement('policyPop', false)">取消</button>
        </div>
      </div>
    </div>
  </div>

  <div id="promptPop" class="mask">
    <div class="pop" style="height: 240px">
      <p id="promptTitle" class="pop_title"></p>
      <p id="promptText" class="pop_content"></p>
      <div style="display: flex; justify-content: center; padding: 20px 20px 20px 20px">
        <button class="btn btn-success" style="width: 90px; margin-right: 20px"
          onclick="G.showElement('promptPop', false)">确定</button>
      </div>
    </div>
  </div>
</div>