<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-08-13 13:15:10
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-08-14 09:30:07
 * @FilePath: \云监测大屏\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>车互换配件点算记录台账</title>
  <link rel="stylesheet" href="./css/style.css">
  <script src=""></script>
  <script src="./lib/echarts.min.js"></script>
  <script src="./lib/jquery-3.6.0.js"></script>
</head>

<body>
  <div class="container">
    <div class="container-title">车互换配件点算记录台账</div>
    <div class="container-slide">
      <div class="container-slide-item">
        <div class="container-slide-item-title">车互换配件数量统计</div>
        <div class="container-slide-item-content">
          <div class="container-slide-chart" id="numberChart"></div>
        </div>
      </div>
      <div class="container-slide-item">
        <div class="container-slide-item-title">车互换配件状态统计</div>
        <div class="container-slide-item-content">
          <div class="container-slide-chart" id="statusChart"></div>
        </div>
      </div>
      <div class="container-slide-item">
        <div class="container-slide-item-title">车互换配件异常信息</div>
        <div class="container-slide-item-content">
          <div class="container-item-warning-info">
            <div class="container-item-warning-item">
              <div class="container-item-warning-number">2</div>
              <div class="container-item-warning-type">运营告警</div>
            </div>
            <div class="container-item-warning-item">
              <div class="container-item-warning-number">5</div>
              <div class="container-item-warning-type">检修告警</div>
            </div>
            <div class="container-item-warning-item">
              <div class="container-item-warning-number">3</div>
              <div class="container-item-warning-type">故障告警</div>
            </div>
          </div>
          <div class="container-item-warning-list">
            <div class="container-item-warning-message">
              <div class="container-item-warning-message-number">1</div>
              <div class="container-item-warning-message-content">TMC1车2架充电接触器卡分故障</div>
              <div class="container-item-warning-message-date">2025-5-15</div>
            </div>
            <div class="container-item-warning-message">
              <div class="container-item-warning-message-number">2</div>
              <div class="container-item-warning-message-content">TMC1车2架充电接触器卡分故障</div>
              <div class="container-item-warning-message-date">2025-5-15</div>
            </div>
            <div class="container-item-warning-message">
              <div class="container-item-warning-message-number">3</div>
              <div class="container-item-warning-message-content">TMC1车2架充电接触器卡分故障</div>
              <div class="container-item-warning-message-date">2025-5-15</div>
            </div>
            <div class="container-item-warning-message">
              <div class="container-item-warning-message-number">4</div>
              <div class="container-item-warning-message-content">TMC1车2架充电接触器卡分故障</div>
              <div class="container-item-warning-message-date">2025-5-15</div>
            </div>
            <div class="container-item-warning-message">
              <div class="container-item-warning-message-number">5</div>
              <div class="container-item-warning-message-content">TMC1车2架充电接触器卡分故障</div>
              <div class="container-item-warning-message-date">2025-5-15</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-center">
      <div class="container-center-schedule-info">
        <div class="container-center-schedule-item container-center-schedule-repair">
            <div class="container-center-schedule-number">013</div>
            <div class="container-center-schedule-status">列检</div>
            <div class="container-center-schedule-text">列检库</div>
            <div class="container-center-schedule-text">11股道</div>
            <div class="container-center-schedule-text">2H</div>
          </div>
          <div class="container-center-schedule-item container-center-schedule-running">
            <div class="container-center-schedule-number">015</div>
            <div class="container-center-schedule-status">运行中</div>
            <div class="container-center-schedule-text">——</div>
            <div class="container-center-schedule-text">——</div>
            <div class="container-center-schedule-text">4.4H</div>
          </div>
          <div class="container-center-schedule-item">
              <div class="container-center-schedule-number">016</div>
              <div class="container-center-schedule-status">空闲</div>
              <div class="container-center-schedule-text">列检库</div>
              <div class="container-center-schedule-text">7股道</div>
              <div class="container-center-schedule-text">1H</div>
          </div>
          <div class="container-center-schedule-item container-center-schedule-repair">
              <div class="container-center-schedule-number">013</div>
              <div class="container-center-schedule-status">列检</div>
              <div class="container-center-schedule-text">列检库</div>
              <div class="container-center-schedule-text">11股道</div>
              <div class="container-center-schedule-text">2H</div>
          </div>
          <div class="container-center-schedule-item container-center-schedule-running">
              <div class="container-center-schedule-number">015</div>
              <div class="container-center-schedule-status">运行中</div>
              <div class="container-center-schedule-text">——</div>
              <div class="container-center-schedule-text">——</div>
              <div class="container-center-schedule-text">4.4H</div>
          </div>
          <div class="container-center-schedule-item">
              <div class="container-center-schedule-number">016</div>
              <div class="container-center-schedule-status">空闲</div>
              <div class="container-center-schedule-text">列检库</div>
              <div class="container-center-schedule-text">7股道</div>
              <div class="container-center-schedule-text">1H</div>
          </div>
          <div class="container-center-schedule-item container-center-schedule-repair">
              <div class="container-center-schedule-number">013</div>
              <div class="container-center-schedule-status">列检</div>
              <div class="container-center-schedule-text">列检库</div>
              <div class="container-center-schedule-text">11股道</div>
              <div class="container-center-schedule-text">2H</div>
          </div>
          <div class="container-center-schedule-item">
              <div class="container-center-schedule-number">015</div>
              <div class="container-center-schedule-status">周检</div>
              <div class="container-center-schedule-text">检修库</div>
              <div class="container-center-schedule-text">6股道</div>
              <div class="container-center-schedule-text">14H</div>
          </div>
          <div class="container-center-schedule-item container-center-schedule-warning">
              <div class="container-center-schedule-number">016</div>
              <div class="container-center-schedule-status">故障</div>
              <div class="container-center-schedule-text">检修库</div>
              <div class="container-center-schedule-text">7股道</div>
              <div class="container-center-schedule-text">1H</div>
          </div>
          <div class="container-center-schedule-item container-center-schedule-repair">
              <div class="container-center-schedule-number">013</div>
              <div class="container-center-schedule-status">列检</div>
              <div class="container-center-schedule-text">列检库</div>
              <div class="container-center-schedule-text">11股道</div>
              <div class="container-center-schedule-text">2H</div>
          </div>
          <div class="container-center-schedule-item">
              <div class="container-center-schedule-number">015</div>
              <div class="container-center-schedule-status">周检</div>
              <div class="container-center-schedule-text">检修库</div>
              <div class="container-center-schedule-text">6股道</div>
              <div class="container-center-schedule-text">14H</div>
          </div>
          <div class="container-center-schedule-item container-center-schedule-warning">
              <div class="container-center-schedule-number">016</div>
              <div class="container-center-schedule-status">故障</div>
              <div class="container-center-schedule-text">检修库</div>
              <div class="container-center-schedule-text">7股道</div>
              <div class="container-center-schedule-text">1H</div>
          </div>
          <div class="container-center-schedule-item">
              <div class="container-center-schedule-number">016</div>
              <div class="container-center-schedule-status">空闲</div>
              <div class="container-center-schedule-text">列检库</div>
              <div class="container-center-schedule-text">7股道</div>
              <div class="container-center-schedule-text">1H</div>
          </div>
          <div class="container-center-schedule-item">
              <div class="container-center-schedule-number">016</div>
              <div class="container-center-schedule-status">空闲</div>
              <div class="container-center-schedule-text">列检库</div>
              <div class="container-center-schedule-text">7股道</div>
              <div class="container-center-schedule-text">1H</div>
          </div>
          <div class="container-center-schedule-item">
              <div class="container-center-schedule-number">016</div>
              <div class="container-center-schedule-status">空闲</div>
              <div class="container-center-schedule-text">列检库</div>
              <div class="container-center-schedule-text">7股道</div>
              <div class="container-center-schedule-text">1H</div>
          </div>
          <div class="container-center-schedule-item">
              <div class="container-center-schedule-number">016</div>
              <div class="container-center-schedule-status">空闲</div>
              <div class="container-center-schedule-text">列检库</div>
              <div class="container-center-schedule-text">7股道</div>
              <div class="container-center-schedule-text">1H</div>
          </div>
                </div>
      <div class="container-center-item">
        <div class="container-center-item-title">车互换配件台账</div>
        <div class="container-center-item-content">
          <div class="container-table" id="centerTable">
            <div class="container-table-row">
              <div class="container-table-head">配件名称</div>
              <div class="container-table-head">规格</div>
              <div class="container-table-head">单位</div>
              <div class="container-table-head">定量数</div>
              <div class="container-table-head">良好</div>
              <div class="container-table-head">待修</div>
              <div class="container-table-head">在修</div>
              <div class="container-table-head">报废</div>
              <div class="container-table-head">备注</div>
              <div class="container-table-head">状态</div>
            </div>
            <div class="container-table-row">
              <div class="container-table-cell">#135</div>
              <div class="container-table-cell">1628</div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
            </div>
            <div class="container-table-row">
              <div class="container-table-cell">#135</div>
              <div class="container-table-cell">1628</div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
            </div>
            <div class="container-table-row">
              <div class="container-table-cell">#135</div>
              <div class="container-table-cell">1628</div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
            </div>
            <div class="container-table-row">
              <div class="container-table-cell">#135</div>
              <div class="container-table-cell">1628</div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
            </div>
            <div class="container-table-row">
              <div class="container-table-cell">#135</div>
              <div class="container-table-cell">1628</div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
            </div>
            <div class="container-table-row">
              <div class="container-table-cell">#135</div>
              <div class="container-table-cell">1628</div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell">2024/07/17 12:12:14</div>
              <div class="container-table-cell">100</div>
              <div class="container-table-cell"></div>
              <div class="container-table-cell"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-slide">
      <div class="container-slide-item">
        <div class="container-slide-item-title">车互换配件任务统计</div>
        <div class="container-slide-item-content">
          <div class="container-slide-chart" id="taskChart"></div>
        </div>
      </div>
      <div class="container-slide-item">
        <div class="container-slide-item-title">配件良好率排名</div>
        <div class="container-slide-item-content">
          <div class="container-data-goodlist" id="goodList">
            <div class="container-data-item">
              <div class="container-data-item-icon">1</div>
              <div class="container-data-item-label">牵引电动机DF11</div>
              <div class="container-data-item-data">良好百分比：40.00%</div>
            </div>
            <div class="container-data-item">
              <div class="container-data-item-icon">2</div>
              <div class="container-data-item-label">牵引电动机电柜(109B)</div>
              <div class="container-data-item-data">良好百分比：44.44%</div>
            </div>
            <div class="container-data-item">
              <div class="container-data-item-icon">3</div>
              <div class="container-data-item-label">奉引电动机120109CJ</div>
              <div class="container-data-item-data">良好百分比：55.00%</div>
            </div>
            <div class="container-data-item">
                <div class="container-data-item-icon">4</div>
                <div class="container-data-item-label">牵引电动机电柜C20BCWV</div>
                <div class="container-data-item-data">良好百分比：75.00%</div>
            </div>
            <div class="container-data-item">
                <div class="container-data-item-icon">5</div>
                <div class="container-data-item-label">牵引发电机JP2D4D</div>
                <div class="container-data-item-data">良好百分比：100.00%</div>
            </div>
            <div class="container-data-item">
              <div class="container-data-item-icon">3</div>
              <div class="container-data-item-label">奉引电动机120109CJ</div>
              <div class="container-data-item-data">良好百分比：55.00%</div>
            </div>
            <div class="container-data-item">
                <div class="container-data-item-icon">4</div>
                <div class="container-data-item-label">牵引电动机电柜C20BCWV</div>
                <div class="container-data-item-data">良好百分比：75.00%</div>
            </div>
            <div class="container-data-item">
                <div class="container-data-item-icon">5</div>
                <div class="container-data-item-label">牵引发电机JP2D4D</div>
                <div class="container-data-item-data">良好百分比：100.00%</div>
            </div>
            <div class="container-data-item">
                <div class="container-data-item-icon">4</div>
                <div class="container-data-item-label">牵引电动机电柜C20BCWV</div>
                <div class="container-data-item-data">良好百分比：75.00%</div>
            </div>
            <div class="container-data-item">
                <div class="container-data-item-icon">5</div>
                <div class="container-data-item-label">牵引发电机JP2D4D</div>
                <div class="container-data-item-data">良好百分比：100.00%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    let ip = "172.15.23.99"
    let port = "18080"
    let frontUrl = "/jeecg-boot/chhpjd/chhpjds/list"
    function getData(){
      var defer = $.Deferred();
      $.ajax({
        url:'http://' + ip + ':' + port + frontUrl,
        type:'get',
        async : true,
        success:function(res){
          defer.resolve(res)
        },
        complete: function (XHR, TS) {
          XHR = null
        },
        error: function(error){
          console.log(error)
        }
      })
      return defer.promise();
    }
    let dataList = []
    var getDataList = getData()
    $.when(getDataList).done(function(getDataList){
      console.log(getDataList)
      dataList=getDataList.result.records
      $('#centerTable').html('')
      $('#goodList').html('')
      $('#centerTable').append("<div class='container-table-row'>"+
              "<div class='container-table-head'>配件名称</div>"+
              "<div class='container-table-head'>规格</div>"+
              "<div class='container-table-head'>单位</div>"+
              "<div class='container-table-head'>定量数</div>"+
              "<div class='container-table-head'>良好</div>"+
              "<div class='container-table-head'>待修</div>"+
              "<div class='container-table-head'>在修</div>"+
              "<div class='container-table-head'>报废</div>"+
              "<div class='container-table-head'>良好百分比</div>"+
              "<div class='container-table-head'>备注</div>"+
              "<div class='container-table-head'>状态</div>"+
            "</div>")
      // 台账表格
      dataList.forEach(element => {
        if(element.accessoryname === null) return
        $('#centerTable').append("<div class='container-table-row'>"+
              "<div class='container-table-cell'>"+ element.accessoryname +"</div>"+
              "<div class='container-table-cell'>"+ element.specification +"</div>"+
              "<div class='container-table-cell'>"+ element.unit +"</div>"+
              "<div class='container-table-cell'>"+ element.quantitativenumbers +"</div>"+
              "<div class='container-table-cell'>"+ element.good +"</div>"+
              "<div class='container-table-cell'>"+ element.good +"</div>"+
              "<div class='container-table-cell'>"+ element.good +"</div>"+
              "<div class='container-table-cell'>"+ element.good +"</div>"+
              "<div class='container-table-cell'>"+ element.goodpercentage +"</div>"+
              "<div class='container-table-cell'>"+ element.remark +"</div>"+
              "<div class='container-table-cell'>"+ element.state +"</div>"+
            "</div>")
      });
      // 良好排序
      let sortList = dataList.sort((a, b) => a.goodpercentage - b.goodpercentage);
      sortList.forEach((element, index) => {
        if(element.accessoryname === null) return
        $('#goodList').append("<div class='container-data-item'>"+
              "<div class='container-data-item-icon'>"+ index +"</div>"+
              "<div class='container-data-item-label'>"+ element.accessoryname +"</div>"+
              "<div class='container-data-item-data'>良好百分比："+ element.goodpercentage +"%</div>"+
            "</div>")
      });
    })
  </script>
  <script src="./js/main_charts.js"></script>
</body>

</html>