szw123456
/
xianmen-antd


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
							<!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>
  <link rel="stylesheet" href="static/index.css" media="all" />
</head>

<body>
  <div class="positon">
    <span>
      底图：<select id="mapName">
      </select>
    </span>
    <span></span><span>水平位置: </span><input id="x"></input><span>,垂直位置: </span><input id="y"></input>
    <span id="y"><a class="ahref">保存位置</a></span>
  </div>
  <div class="point">
  </div>
  <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>
      <div id="weekJob" class="item title">
        <span>设备名称</span>
        <span>保养任务</span>
        <span>报修时间</span>
      </div>
    </div>
  </div> -->
</body>

<script>
  const ACCESS_TOKEN = 'Access-Token'
  const VUE_STORE_BASE = 'pro__'
  let mapList = []
  var id = window.location.search.split("id=")[1]
  id = filterUrlData(id);

  var xx = window.location.search.split("zjm=")[1];
  xx = filterUrlData(xx) || 0;

  var yy = window.location.search.split("jbdh=")[1] || 0;
  yy = filterUrlData(yy);
  var mapName = window.location.search.split("mapName=")[1];
  mapName = decodeURI(filterUrlData(mapName));

  function getMapList() {
    $.ajax({
      type: "GET",
      url: "/api/upms/files?type=56",
      headers: getHeader(),
      success: function (res) {
        var data = res.data
        mapList = data
        console.log(2);
        for (var i = 0; i < data.length; i++) {
          var option = '<option value="' + data[i].targetId + '">' + data[i].targetId + '</option>'
          $('#mapName').append(option)

        }
        if (!mapName) {
          mapName = mapList[0].targetId
        }
        img.src = mapList.find(item => item.targetId == mapName).url
        $('#mapName').val(mapName);
      }
    })
  }
  getMapList()
  // 初始化设备位置
  $(function () {
    $('#x').val(xx);
    $('#y').val(yy);
    console.log($('#mapName').val);

    $('.point').attr("style", 'left: ' + xx + 'px;top: ' + yy + 'px');

    $('#echart').click(function (e) {
      xx = e.pageX || 0;
      yy = e.pageY || 0;
      console.log(xx + '   ' + yy);
      $('#x').val(xx);
      $('#y').val(yy);
      $('.point').css('left', xx).css('top', yy);
    })

    $('#x').on('input', function (e) {
      xx = e.delegateTarget.value
      $('.point').attr("style", 'left: ' + xx + 'px;top: ' + yy + 'px')
    });

    $('#y').on('input', function (e) {
      yy = e.delegateTarget.value
      $('.point').attr("style", 'left: ' + xx + 'px;top: ' + yy + 'px')
    });
    $('#mapName').on('change', function (e) {
      mapName = e.delegateTarget.value
      img.src = mapList.find(item => item.targetId == mapName).url

    });
    $('.ahref').click(function (e) {
      if (id == null) {
        alert('请设置设备')
        return
      }
      if (xx == null || yy == null || xx == 0 || yy == 0) {
        alert('请点击位置，该位置将作为设备的显示位置')
        return
      }
      var data = { id: id, zjm: xx, jbdh: yy }
      $.ajax({
        type: "PUT",
        url: "/api/sb/infos/" + id,
        headers: getHeader(),
        data: JSON.stringify(data),
        success: function (response) {
          const data = response.data;
          alert("保存成功。")
        },
        error: function (xhr, textStatus, errorThrown) {
          error(xhr, textStatus, errorThrown);
        }
      });
    })
  })

  /**
   * filterUrlData 过滤url数据
   * @param  Boolean     {name}
   * @param  Boolean     {value}
   * @param  Boolean     {data}
   * Created by preference on 2020/08/01
   */
  function filterUrlData(data) {
    if (data) {
      var dataArr = data.split('');
      var tempArr = [];
      for (var i = 0; i <= dataArr.length; i++) {
        if (dataArr[i] != '&') {
          tempArr.push(dataArr[i]);
        } else {
          break;
        }
      }
      return tempArr.join('');
    }
  };

  // 基于准备好的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)
  }


  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
    },
    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: '#17bf9e',
          shadowBlur: 200,
          shadowColor: '#17bf9e'
        }
      },
      zlevel: 1
    }, {
      name: '异常点',
      type: 'scatter',
      coordinateSystem: 'geo',
      symbol: 'pin', // 气泡
      symbolSize: 50,
      label: {
        normal: {
          show: true,
          formatter: '{@value}',
          textStyle: {
            color: '#fff',
            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
    }]
  }

  // 使用刚指定的配置项和数据显示图表
  myChart.setOption(option);

  function getHeader() {
    return {
      Authorization: getToken(),
      "Cache-Control": "no-cache",
      accept: "application/json; charset=utf-8",
      'Content-Type': 'application/json;charset=UTF-8'
      // "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
  }
</script>

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

  .point {
    position: absolute;
    padding: 5px;
    background: blue;
    border-radius: 5px;
    z-index: 1000;
  }

  #mapName {
    width: 120px;
  }

  .ahref {
    background: blue;
    padding: 8px;
    cursor: pointer;
  }
</style>

</html>