|
|
@@ -1,17 +1,19 @@
|
|
|
<!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"/>
|
|
|
+ <link rel="stylesheet" href="static/index.css" media="all" />
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
<div class="positon">
|
|
|
<span>
|
|
|
- 底图：<select id="mapName">
|
|
|
+ 底图：<select id="mapName">
|
|
|
</select>
|
|
|
</span>
|
|
|
<span></span><span>水平位置: </span><input id="x"></input><span>,垂直位置: </span><input id="y"></input>
|
|
|
@@ -20,7 +22,7 @@
|
|
|
<div class="point">
|
|
|
</div>
|
|
|
<div id="echart" class="echart"></div>
|
|
|
- <div class="data">
|
|
|
+ <!-- <div class="data">
|
|
|
<div>
|
|
|
<span id="monthNum">暂无</span>
|
|
|
</div>
|
|
|
@@ -34,104 +36,99 @@
|
|
|
<span>保养任务</span>
|
|
|
<span>报修时间</span>
|
|
|
</div>
|
|
|
-<!-- <div class="item">
|
|
|
- <span>设备名称</span>
|
|
|
- <span>正常</span>
|
|
|
- <span>2021/03/21</span>
|
|
|
- </div>-->
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</body>
|
|
|
|
|
|
<script>
|
|
|
const ACCESS_TOKEN = 'Access-Token'
|
|
|
const VUE_STORE_BASE = 'pro__'
|
|
|
- let mapList=[]
|
|
|
+ let mapList = []
|
|
|
var id = window.location.search.split("id=")[1]
|
|
|
id = filterUrlData(id);
|
|
|
|
|
|
- var xx = window.location.search.split("zjm=")[1];
|
|
|
+ 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) {
|
|
|
+ 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)
|
|
|
+ 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
|
|
|
+ if (!mapName) {
|
|
|
+ mapName = mapList[0].targetId
|
|
|
}
|
|
|
- img.src = mapList.find(item => item.targetId == mapName).url
|
|
|
- $('#mapName').val(mapName);
|
|
|
+ img.src = mapList.find(item => item.targetId == mapName).url
|
|
|
+ $('#mapName').val(mapName);
|
|
|
}
|
|
|
- })
|
|
|
-}
|
|
|
- getMapList()
|
|
|
- // 初始化设备位置
|
|
|
- $(function(){
|
|
|
+ })
|
|
|
+ }
|
|
|
+ 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) {
|
|
|
+ $('#echart').click(function (e) {
|
|
|
xx = e.pageX || 0;
|
|
|
yy = e.pageY || 0;
|
|
|
- console.log(xx+' '+yy);
|
|
|
+ console.log(xx + ' ' + yy);
|
|
|
$('#x').val(xx);
|
|
|
$('#y').val(yy);
|
|
|
- $('.point').css('left',xx).css('top',yy);
|
|
|
+ $('.point').css('left', xx).css('top', yy);
|
|
|
})
|
|
|
|
|
|
- $('#x').on('input',function(e){
|
|
|
+ $('#x').on('input', function (e) {
|
|
|
xx = e.delegateTarget.value
|
|
|
$('.point').attr("style", 'left: ' + xx + 'px;top: ' + yy + 'px')
|
|
|
});
|
|
|
|
|
|
- $('#y').on('input',function(e){
|
|
|
+ $('#y').on('input', function (e) {
|
|
|
yy = e.delegateTarget.value
|
|
|
$('.point').attr("style", 'left: ' + xx + 'px;top: ' + yy + 'px')
|
|
|
});
|
|
|
- $('#mapName').on('change',function(e){
|
|
|
+ $('#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){
|
|
|
+ $('.ahref').click(function (e) {
|
|
|
+ if (id == null) {
|
|
|
alert('请设置设备')
|
|
|
return
|
|
|
}
|
|
|
- if(xx==null || yy==null || xx == 0 || yy==0){
|
|
|
+ if (xx == null || yy == null || xx == 0 || yy == 0) {
|
|
|
alert('请点击位置，该位置将作为设备的显示位置')
|
|
|
return
|
|
|
}
|
|
|
- var data = {id: id, zjm:xx, jbdh: yy}
|
|
|
+ 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) {
|
|
|
+ success: function (response) {
|
|
|
const data = response.data;
|
|
|
alert("保存成功。")
|
|
|
},
|
|
|
- error: function(xhr, textStatus, errorThrown) {
|
|
|
+ error: function (xhr, textStatus, errorThrown) {
|
|
|
error(xhr, textStatus, errorThrown);
|
|
|
}
|
|
|
});
|
|
|
@@ -145,11 +142,11 @@
|
|
|
* @param Boolean {data}
|
|
|
* Created by preference on 2020/08/01
|
|
|
*/
|
|
|
- function filterUrlData (data) {
|
|
|
+ function filterUrlData(data) {
|
|
|
if (data) {
|
|
|
var dataArr = data.split('');
|
|
|
var tempArr = [];
|
|
|
- for(var i = 0; i <= dataArr.length; i++){
|
|
|
+ for (var i = 0; i <= dataArr.length; i++) {
|
|
|
if (dataArr[i] != '&') {
|
|
|
tempArr.push(dataArr[i]);
|
|
|
} else {
|
|
|
@@ -160,175 +157,179 @@
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-// 基于准备好的dom，初始化echarts实例
|
|
|
-var myChart = echarts.init(document.getElementById('echart'))
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ var myChart = echarts.init(document.getElementById('echart'))
|
|
|
|
|
|
-var img = new Image()
|
|
|
-var canvas = document.createElement('canvas')
|
|
|
-var ctx = canvas.getContext('2d')
|
|
|
+ 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
|
|
|
+ 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 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'
|
|
|
- }
|
|
|
+ var option = {
|
|
|
+ // 背景
|
|
|
+ backgroundColor: {
|
|
|
+ repeat: 'no-repeat',
|
|
|
+ image: fullImage
|
|
|
},
|
|
|
- zlevel: 1
|
|
|
- }, {
|
|
|
- name: '异常点',
|
|
|
- type: 'scatter',
|
|
|
- coordinateSystem: 'geo',
|
|
|
- symbol: 'pin', // 气泡
|
|
|
- symbolSize: 50,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- formatter: '{@value}',
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 11
|
|
|
+ // 地图
|
|
|
+ geo: {
|
|
|
+ map: 'world',
|
|
|
+ silent: true,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ opacity: 0.8,
|
|
|
+ borderWidth: 0,
|
|
|
+ color: '#a53d13'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: 'red'
|
|
|
- }
|
|
|
- },
|
|
|
- zlevel: 6,
|
|
|
- data: [
|
|
|
- ]
|
|
|
- }, {
|
|
|
- name: '异常图片和名称',
|
|
|
- type: 'effectScatter',
|
|
|
- coordinateSystem: 'geo',
|
|
|
- data: [
|
|
|
- ],
|
|
|
- showEffectOn: 'render',
|
|
|
- rippleEffect: {
|
|
|
- brushType: 'stroke'
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
},
|
|
|
- hoverAnimation: true,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- formatter: '{@value}',
|
|
|
- position: 'left',
|
|
|
- show: false
|
|
|
- }
|
|
|
+ // 开启工具栏
|
|
|
+ tooltip: {
|
|
|
+ "trigger": "item",
|
|
|
+ "confine": true
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: 'yellow',
|
|
|
- shadowBlur: 200,
|
|
|
- shadowColor: 'yellow'
|
|
|
- }
|
|
|
- },
|
|
|
- zlevel: 1
|
|
|
- }]
|
|
|
-}
|
|
|
+ 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);
|
|
|
+ // 使用刚指定的配置项和数据显示图表
|
|
|
+ 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 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
|
|
|
-}
|
|
|
+ function getToken() {
|
|
|
+ const storeTokenJson = JSON.parse(localStorage.getItem(VUE_STORE_BASE + ACCESS_TOKEN))
|
|
|
+ return 'Bearer ' + storeTokenJson.value
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
- .positon{
|
|
|
+ .positon {
|
|
|
position: absolute;
|
|
|
top: 20px;
|
|
|
left: 30%;
|
|
|
z-index: 1000;
|
|
|
}
|
|
|
- .point{
|
|
|
+
|
|
|
+ .point {
|
|
|
position: absolute;
|
|
|
padding: 5px;
|
|
|
background: blue;
|
|
|
border-radius: 5px;
|
|
|
z-index: 1000;
|
|
|
}
|
|
|
- #mapName{
|
|
|
+
|
|
|
+ #mapName {
|
|
|
width: 120px;
|
|
|
}
|
|
|
- .ahref{
|
|
|
+
|
|
|
+ .ahref {
|
|
|
background: blue;
|
|
|
padding: 8px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
</style>
|
|
|
-</html>
|
|
|
+
|
|
|
+</html>
|
