szw123456
/
xianmen-antd


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
							<!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 class="item">
        <span>设备名称</span>
        <span>正常</span>
        <span>2021/03/21</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>