xianmen-antd/public/hitch-screen/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!-- 引入 ECharts 文件 -->
  <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
  <script src="static/echarts.min.js"></script>
  <script src="static/plug-in.min.js"></script>
  <script src="static/jquery.liMarquee.js"></script>
  <link rel="stylesheet" href="static/index.css" media="all" />
</head>

<body>
  <div class="positon">
    <!-- <button class="back-btn" onclick="goBack()">&larr; 返回</button> -->
    底图：<select id="mapName">
    </select>
  </div>
  <div class="title-name">设备运行状态一览图</div>
  <div class="title-icon">
    <label class="legend-item legend-normal"><input type="checkbox" id="filterNormal" checked> 正常设备</label>
    <label class="legend-item legend-yellow"><input type="checkbox" id="filterPlanned" checked> 问题设备</label>
    <label class="legend-item legend-red"><input type="checkbox" id="filterStopped" checked> 停机设备</label>
  </div>
  <div style="display:flex;width:1920px;justify-content:space-between;align-items:center;">
    <div id="echart" class="echart"></div>
    <div class="data">
      <!-- 右上：当前问题设备（有进行中报修单的设备） -->
      <div class="panel panel-problem">
        <div class="panel-name">当前问题设备</div>
        <div class="item title">
          <span>设备编号</span>
          <span>设备名称</span>
          <span>维修状态</span>
        </div>
        <div id="problemList" class="scrollDiv str_vertical"></div>
      </div>
      <!-- 右下：近期保养计划 -->
      <div class="panel panel-plan">
        <div class="panel-name">近期保养计划</div>
        <div class="bar-title">本月完成/计划</div>
        <div class="sum-line">
          <span id="monthNum">暂无</span>
          <span id="waitNum">暂无</span>
          <span id="rate">暂无</span>
        </div>
        <div class="item title">
          <span>设备</span>
          <span>周期</span>
          <span>计划日期</span>
        </div>
        <div id="planList" class="scrollDiv str_vertical"></div>
      </div>
    </div>
  </div>
</body>
<style>
  /*Plugin CSS*/
  .str_wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    white-space: nowrap;
  }

  /* 保养计划列表：设备名称列加宽，周期列变窄 */
  .data .panel-plan .item > span:nth-child(1) {
    flex: 4;
  }

  .data .panel-plan .item > span:nth-child(2) {
    flex: 2;
    padding: 0;
  }

  .positon {
    position: absolute;
    top: 20px;
    left: 30%;
    z-index: 1000;
  }


  #mapName {
    width: 120px;
  }

  .str_move {
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
  }

  .str_move_clone {
    display: inline-block;
    vertical-align: top;
    position: absolute;
    left: 100%;
    top: 0;
  }

  .str_vertical .str_move_clone {
    left: 0;
    top: 100%;
  }

  .str_down .str_move_clone {
    left: 0;
    bottom: 100%;
  }

  .title-name {
    position: absolute;
    top: 87px;
    left: 26%;
    font-size: 34px;
    color: black;
    z-index: 10000;
  }

  .title-icon {
    position: absolute;
    top: 130px;
    left: 30%;
    z-index: 10000;
  }

  .title-icon label.legend-item {
    display: inline-flex;
    align-items: center;
    margin-right: 24px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    user-select: none;
  }

  .title-icon label.legend-item::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .title-icon label.legend-normal::before {
    background-color: #174FBF;
    box-shadow: 0 0 6px #174FBF;
  }

  .title-icon label.legend-yellow::before {
    background-color: yellow;
    box-shadow: 0 0 6px yellow;
  }

  .title-icon label.legend-red::before {
    background-color: red;
    box-shadow: 0 0 6px red;
  }

  .title-icon input[type="checkbox"] {
    margin-right: 5px;
    cursor: pointer;
    transform: scale(1.2);
  }
</style>
<script>
  function getBase64(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    // 将canvas的内容转换为base64编码的字符串
    var base64 = canvas.toDataURL("image/png");// 可以根据需要更改为其他格式，如'image/jpeg'等
    return base64;
  }
  const ACCESS_TOKEN = 'Access-Token'
  const VUE_STORE_BASE = 'pro__'
  let mapName, mapList, dataList
  var tooltip_message = ''
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('echart'))

  var img = new Image()
  var canvas = document.createElement('canvas')
  var ctx = canvas.getContext('2d')

  canvas.width = myChart.getWidth() * window.devicePixelRatio
  canvas.height = myChart.getHeight() * window.devicePixelRatio

  var fullImage = new Image()
  img.onload = function () {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    fullImage.src = canvas.toDataURL()
    setTimeout(function () {
      myChart.resize()
    }, 100)
  }
  img.src = './static/03_04.png'


  var option = {
    // 背景
    backgroundColor: {
      repeat: 'no-repeat',
      image: fullImage
    },
    // 地图
    geo: {
      map: 'world',
      silent: true,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      itemStyle: {
        normal: {
          opacity: 0.8,
          borderWidth: 0,
          color: '#a53d13'
        }
      }
    },
    title: {
      text: '',
    },
    // 开启工具栏
    tooltip: {
      "trigger": "item",
      "confine": true,
      "formatter": (params, ticket, callback) => {
        // params.data   [20, 204, "L-012"]，水平位置，垂直位置，设备编号
        let sbNo = params.data[2];
        getSbDetail(sbNo);
        return tooltip_message;
      }
    },
    series: [{
      name: '正常点',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: [
      ],
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
        normal: {
          formatter: '{@value}',
          position: 'left',
          show: false
        }
      },
      itemStyle: {
        normal: {
          color: '#174FBF',
          shadowBlur: 200,
          shadowColor: '#174FBF'
        }
      },
      zlevel: 1
    }, {
      name: '正常点编号',
      type: 'scatter',
      coordinateSystem: 'geo',
      symbol: 'pin', // 气泡
      symbolSize: 50,
      label: {
        normal: {
          show: true,
          formatter: '{@value}',
          textStyle: {
            color: '#000',
            fontSize: 11
          }
        }
      },
      itemStyle: {
        normal: {
          color: '#174FBF'
        }
      },
      zlevel: 6,
      data: [
      ]
    }, {
      name: '红色停机设备异常点',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: [
      ],
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
        normal: {
          formatter: '{@value}',
          position: 'left',
          show: false
        }
      },
      itemStyle: {
        normal: {
          color: 'red',
          shadowBlur: 200,
          shadowColor: 'red'
        }
      },
      zlevel: 1
    }, {
      name: '红色停机设备异常点编号',
      type: 'scatter',
      coordinateSystem: 'geo',
      symbol: 'pin', // 气泡
      symbolSize: 50,
      label: {
        normal: {
          show: true,
          formatter: '{@value}',
          textStyle: {
            color: '#000',
            fontSize: 11
          }
        }
      },
      itemStyle: {
        normal: {
          color: 'red'
        }
      },
      zlevel: 6,
      data: [
      ]
    }, {
      name: '黄色报修中异常点',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: [
      ],
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
        normal: {
          formatter: '{@value}',
          position: 'left',
          show: false
        }
      },
      itemStyle: {
        normal: {
          color: 'yellow',
          shadowBlur: 200,
          shadowColor: 'yellow'
        }
      },
      zlevel: 1
    }, {
      name: '黄色报修中异常点编号',
      type: 'scatter',
      coordinateSystem: 'geo',
      symbol: 'pin', // 气泡
      symbolSize: 50,
      label: {
        normal: {
          show: true,
          formatter: '{@value}',
          textStyle: {
            color: '#000',
            fontSize: 11
          }
        }
      },
      itemStyle: {
        normal: {
          color: 'yellow'
        }
      },
      zlevel: 6,
      data: [
      ]
    }]
  }
  function getMapList() {
    $('#mapName').on('change', function (e) {
      mapName = e.delegateTarget.value
      img.src = mapList.find(item => item.targetId == mapName).url
      init()
    });
    $.ajax({
      type: "GET",
      url: "/api/upms/files?type=56",
      headers: getHeader(),
      success: function (res) {
        var data = res.data
        mapList = data
        for (var i = 0; i < data.length; i++) {
          var option = '<option value="' + data[i].targetId + '">' + data[i].targetId + '</option>'
          $('#mapName').append(option)

        }
        mapName = mapList[0].targetId
        img.src = mapList.find(item => item.targetId == mapName).url
        $('#mapName').val(mapName);
      }
    })
  }
  getMapList()
  //初始化加载数据，定时器只能在定时到了才发生
  getData();
  getScreenJobData();
  getScreenProblemData();

  // 使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
  // 设备详情
  function getSbDetail(sbNo) {
    $.ajax({
      type: "get",
      url: "/api/sb/infos/no/" + sbNo,
      headers: getHeader(),
      success: function (response) {
        tooltip_message = '<div>设备编号：' + response.data.no +
          '<br/>设备名称：' + response.data.name +
          '<br/>设备型号：' + response.data.model +
          '<br/>使用位置：' + response.data.cph +
          '<br/>设备维修员：' + response.data.repairUserName + '</div>';
      },
      error: function (xhr, textStatus, errorThrown) {
        error(xhr, textStatus, errorThrown);
      }
    });
  }

  // 近期保养计划：设备、周期、计划日期
  function getScreenJobData() {
    $.ajax({
      type: "get",
      url: "/api/check/jobs/screen",
      headers: getHeader(),
      success: function (response) {
        let data = response.data || {};
        $('#monthNum').text((data.finishNum || 0) + "/" + (data.monthNum || 0));
        $('#waitNum').text("待完成：" + (data.waitNum || 0));
        $('#rate').text("完成率：" + (data.rate || 0) + "%");
        let planHtml = '';
        (data.planList || []).forEach(item => {
          planHtml += buildRow(item.sbName || item.sbNo, item.periodText || '', item.startTime,
            '设备编号：' + (item.sbNo || '') + '；计划完成：' + (item.endTime || ''));
        })
        renderMarquee('planList', planHtml);
      },
      error: function (xhr, textStatus, errorThrown) {
        error(xhr, textStatus, errorThrown);
      }
    });
  }

  // 当前问题设备：有进行中报修单（待接收/维修中/转派审批中/委外维修中）的设备
  function getScreenProblemData() {
    $.ajax({
      type: "get",
      url: "/api/sb/infos/screen/problem-list",
      headers: getHeader(),
      success: function (response) {
        let problemHtml = '';
        (response.data || []).forEach(item => {
          problemHtml += buildRow(item.no, item.name, item.repairStatusLabel,
            '报修单：' + (item.repairNo || '') + '；报修时间：' + formatTime(item.applyTime));
        })
        renderMarquee('problemList', problemHtml);
      },
      error: function (xhr, textStatus, errorThrown) {
        error(xhr, textStatus, errorThrown);
      }
    });
  }

  // 列表行：三列内容 + 鼠标悬停提示
  function buildRow(col1, col2, col3, tip) {
    return '<div class="item"' + (tip ? ' title="' + tip + '"' : '') + '>' +
      '<span>' + (col1 || '') + '</span>' +
      '<span>' + (col2 || '') + '</span>' +
      '<span>' + (col3 || '') + '</span>' +
      '</div>'
  }

  // 报修时间只展示到分钟，避免提示过长
  function formatTime(time) {
    if (!time) return ''
    return String(time).replace('T', ' ').substring(0, 16)
  }

  // 渲染滚动列表：刷新前先停掉上一轮动画并移除插件生成的节点，避免克隆节点与定时器叠加
  function renderMarquee(id, html) {
    const $box = $('#' + id)
    const moveId = $box.data('moveId')
    if (moveId) {
      clearTimeout(moveId)
      $box.data('moveId', null)
    }
    $box.find('.str_move').stop(true).remove()
    $box.empty().append(html || '')
    $box.liMarquee({
      direction: 'up',//向上滚动
      runshort: false,//内容不足时不滚动
      scrollamount: 20//速度
    })
  }

  // setInterval(mockData(), 10000);
  setInterval(function () { getData() }, 60000);
  // 右侧两个列表变化不频繁，5 分钟刷新一次
  setInterval(function () { getScreenJobData(); getScreenProblemData() }, 300000);

  function mockData() {

    var data = [
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '正常'],
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '正常'],
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '正常'],
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '正常'],
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '正常'],
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '正常']
    ];

    var data2 = [
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '不知道', '不知道'],
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '不知道', '不知道'],
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '不知道', '不知道'],
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '不知道', '不知道'],
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '不知道', '不知道'],
      [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), '不知道', '不知道']
    ];
    option.series[0].data = data;// 正常数据
    option.series[1].data = data2;// 异常的红色内容名称
    option.series[2].data = data2;// 异常黄点
    console.log(data);
    console.log(data2);
    myChart.setOption(option, true)
  }

  function getData() {
    $.ajax({
      type: "get",
      url: "/api/sb/infos/screen",
      headers: getHeader(),
      success: function (response) {
        dataList = response.data;
        init()
      },
      error: function (xhr, textStatus, errorThrown) {
        error(xhr, textStatus, errorThrown);
      }
    });
  }
  function init() {
    data = dataList.find(item => item.mapName === mapName)
    const normalSbInfoList = [];
    const repairSbInfoListRed = [];
    const repairSbInfoListYellow = [];
    if (data.normalSbInfoList != null) {
      for (var i = 0; i < data.normalSbInfoList.length; i++) {
        normalSbInfoList.push([data.normalSbInfoList[i].zjm, data.normalSbInfoList[i].jbdh,
        data.normalSbInfoList[i].no])
      }
    }
    if (data.repairSbInfoListRed != null) {
      for (var i = 0; i < data.repairSbInfoListRed.length; i++) {
        repairSbInfoListRed.push([data.repairSbInfoListRed[i].zjm, data.repairSbInfoListRed[i].jbdh,
        data.repairSbInfoListRed[i].no])
      }
    }
    if (data.repairSbInfoListYellow != null) {
      for (var i = 0; i < data.repairSbInfoListYellow.length; i++) {
        repairSbInfoListYellow.push([data.repairSbInfoListYellow[i].zjm, data.repairSbInfoListYellow[i].jbdh,
        data.repairSbInfoListYellow[i].no])
      }
    }
    // 保存原始数据副本
    option._originalData = {
      normal: normalSbInfoList.slice(),
      red: repairSbInfoListRed.slice(),
      yellow: repairSbInfoListYellow.slice()
    };
    option.series[0].data = normalSbInfoList;// 正常数据：
    option.series[1].data = normalSbInfoList;// 正常数据的编号
    option.series[2].data = repairSbInfoListRed;// 停机设备 红色编号
    option.series[3].data = repairSbInfoListRed;// 停机设备 红色
    option.series[4].data = repairSbInfoListYellow;// 有进行中报修单 黃色编号
    option.series[5].data = repairSbInfoListYellow;// 有进行中报修单 黃色
    applyFilter();
  }

  function applyFilter() {
    const showNormal = $('#filterNormal').is(':checked');
    const showPlanned = $('#filterPlanned').is(':checked');
    const showStopped = $('#filterStopped').is(':checked');
    const orig = option._originalData || { normal: [], red: [], yellow: [] };

    option.series[0].data = showNormal ? orig.normal : [];
    option.series[1].data = showNormal ? orig.normal : [];
    option.series[2].data = showStopped ? orig.red : [];
    option.series[3].data = showStopped ? orig.red : [];
    option.series[4].data = showPlanned ? orig.yellow : [];
    option.series[5].data = showPlanned ? orig.yellow : [];

    myChart.setOption(option, true);
  }

  $('#filterNormal, #filterPlanned, #filterStopped').on('change', function () {
    applyFilter();
  });
  function getHeader() {
    return {
      Authorization: getToken(),
      "Cache-Control": "no-cache",
      accept: "application/json; charset=utf-8",
      'Content-Type': 'application/json;charset=UTF-8'
      // accept: "application/json; charset=utf-8",
      // "Access-Control-Allow-Origin": "http://localhost:5000",
      // "Access-Control-Allow-Headers":"Origin, X-Requested-With, Content-Type, Accept"
    }
  }

  function getToken() {
    const storeTokenJson = JSON.parse(localStorage.getItem(VUE_STORE_BASE + ACCESS_TOKEN))
    return 'Bearer ' + storeTokenJson.value
  }

  function goBack() {
    // 优先尝试让父级 Vue 路由跳转到首页
    try {
      if (window.parent && window.parent !== window) {
        // 通知父级 Vue 跳转首页
        window.parent.postMessage({ action: 'navigateHome' }, '*')
        // 作为兜底：让父级回退
        setTimeout(function () {
          if (window.parent.history.length > 1) {
            window.parent.history.back()
          }
        }, 100)
      } else {
        if (window.history.length > 1) {
          window.history.back()
        }
      }
    } catch (e) {
      if (window.history.length > 1) {
        window.history.back()
      }
    }
  }

</script>

</html>