szw123456
/
xianmen-antd


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
							<!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="filterUnplanned" 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>
        <span id="monthNum">暂无</span>
      </div>
      <div>
        <span id="waitNum">暂无</span>
        <span id="rate">暂无</span>
      </div>
      <div style="height: 80%;">
        <div id="weekJob" class="item title">
          <span>设备编号</span>
          <span>保养任务</span>
          <span>保养计划时间</span>
        </div>
        <div class="scrollDiv str_wrap str_vertical"></div>
        <!--      <div class="item">
        <span>设备名称</span>
        <span>正常</span>
        <span>2021/03/21</span>
      </div>-->
      </div>
    </div>
  </div>
</body>
<style>
  /*Plugin CSS*/
  .str_wrap {
    overflow: hidden;
    height: 56%;
    width: 100%;
    position: relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    white-space: nowrap;
  }

  .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();

  // 使用刚指定的配置项和数据显示图表
  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() {
    console.log(21);
    $.ajax({
      type: "get",
      url: "/api/check/jobs/screen",
      headers: getHeader(),
      success: function (response) {
        $('#monthNum').text(response.data.finishNum + "/" + response.data.monthNum);
        $('#waitNum').text("待完成：" + response.data.waitNum);
        $('#rate').text("完成率：" + response.data.rate + "%");
        let weekJob = '';
        response.data.weekList.forEach(item => {
          weekJob = weekJob + '  <div class=\'item\'>\n' +
            '          <span>' + item.sbNo + '</span>\n' +
            '          <span>' + (item.requirement || '') + '</span>\n' +
            '          <span>' + item.startTime + '</span>\n' +
            '        </div>'
        })
        $('.scrollDiv').empty().append(weekJob);

        $('.scrollDiv').liMarquee({
          direction: 'up',//身上滚动
          runshort: false,//内容不足时不滚动
          scrollamount: 20//速度
        });
      },
      error: function (xhr, textStatus, errorThrown) {
        error(xhr, textStatus, errorThrown);
      }
    });
  }

  // setInterval(mockData(), 10000);
  setInterval(function () { getData() }, 60000);
  // setInterval(function(){ getScreenJobData() }, 60000);

  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 showUnplanned = $('#filterUnplanned').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 = showUnplanned ? orig.red : [];
    option.series[3].data = showUnplanned ? orig.red : [];
    option.series[4].data = showPlanned ? orig.yellow : [];
    option.series[5].data = showPlanned ? orig.yellow : [];

    myChart.setOption(option, true);
  }

  $('#filterNormal, #filterPlanned, #filterUnplanned').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()
      }
    }
  }

  (function () {
    console.log("滚动")
    $('.scrollDiv').liMarquee({
      direction: 'up',//身上滚动
      runshort: false,//内容不足时不滚动
      scrollamount: 20//速度
    });
  });

</script>

</html>