master
parent
59353d7748
commit
52f8ea1470
@ -0,0 +1,41 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function list(data) {
|
||||
return request({
|
||||
url: '/api/admin/section-boat/index',
|
||||
method: 'get',
|
||||
params:data
|
||||
})
|
||||
}
|
||||
|
||||
export function get(params) {
|
||||
return request({
|
||||
url: '/api/admin/section-boat/show',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function store(data) {
|
||||
return request({
|
||||
url: '/api/admin/section-boat/store',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function save(data) {
|
||||
return request({
|
||||
url: '/api/admin/section-boat/save',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function destroy(id) {
|
||||
return request({
|
||||
url: '/api/admin/section-boat/destroy',
|
||||
method: 'get',
|
||||
params:{ id }
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function getPlayBack(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/gps/get-place',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getLocation(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/gps/actual-time',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
export function getEquipmentList(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/gps/equipment-detail',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export function getStop(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/gps/stop-place',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getHome(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/gps/home',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 506 KiB |
|
After Width: | Height: | Size: 802 KiB |
@ -0,0 +1,55 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div :style="{'height':mapHeight,'width':'100%','position':'relative'}">
|
||||
<div id="maps" class="map" :style="{'height':'100%'}">
|
||||
</div>
|
||||
<slot name="maptime"></slot>
|
||||
<slot name="mapindex"></slot>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import "ol/ol.css";
|
||||
import {
|
||||
Tile as TileLayer,
|
||||
Vector as VectorLayer
|
||||
} from "ol/layer";
|
||||
import XYZ from "ol/source/XYZ";
|
||||
import {
|
||||
TileArcGISRest
|
||||
} from "ol/source"
|
||||
import tilegrid from "ol/tilegrid/TileGrid"
|
||||
import {
|
||||
defaults as defaultControls
|
||||
} from "ol/control";
|
||||
import {
|
||||
get as getprojection
|
||||
} from "ol/proj"
|
||||
import {
|
||||
Projection,
|
||||
addProjection
|
||||
} from "ol/proj"
|
||||
import Map from "ol/Map.js";
|
||||
import View from "ol/View.js";
|
||||
|
||||
// 标注点位
|
||||
import {
|
||||
Vector as VectorSource
|
||||
} from "ol/source";
|
||||
import * as olProj from "ol/proj";
|
||||
import {
|
||||
Feature,
|
||||
Overlay
|
||||
} from "ol"
|
||||
import {
|
||||
Point
|
||||
} from "ol/geom";
|
||||
import {
|
||||
Style,
|
||||
Fill,
|
||||
Stroke,
|
||||
Circle as sCircle
|
||||
} from "ol/style";
|
||||
|
||||
|
||||
import proj4 from 'proj4'
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
projection: "EPSG:4490",
|
||||
mapHeight:"400px",
|
||||
mapConfigs : {
|
||||
Map_Code: "EPSG:4490",//坐标系名
|
||||
// Map_extent: [390000, 3500000, 490000, 3360000], //范围框
|
||||
Map_units: "degrees",//单位 m/degrees等
|
||||
Map_axisOrientation: "neu",//轴
|
||||
Map_global: false, //全球
|
||||
MAP_center: [120.582031, 31.304329],//定义中心点
|
||||
Map_Zooms: [13, 23, 10],//定义地图初始层级、最大层级、最小层级
|
||||
Map_ID: "maps",//地图标识ID
|
||||
}
|
||||
};
|
||||
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// 转换坐标系
|
||||
proj4.defs("EPSG:4490", '+proj=longlat +ellps=GRS80 +no_defs')
|
||||
this.projection = new Projection({
|
||||
code: this.mapConfigs.Map_Code,
|
||||
units: this.mapConfigs.Map_units,
|
||||
axisOrientation: this.mapConfigs.Map_axisOrientation,
|
||||
global: this.mapConfigs.Map_global,
|
||||
});
|
||||
addProjection(this.projection);
|
||||
|
||||
this.initLoad();
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
initLoad() {
|
||||
var that = this;
|
||||
var clientHeight = document.documentElement.clientHeight
|
||||
var topHeight = 50; //页面 头部
|
||||
let tableHeight = clientHeight - topHeight;
|
||||
that.mapHeight = tableHeight + "px";
|
||||
this.showMaps()
|
||||
},
|
||||
showMaps() {
|
||||
this.$nextTick(function() {
|
||||
this.initMap();
|
||||
})
|
||||
},
|
||||
initMap() {
|
||||
let map = new Map({
|
||||
target: "maps",
|
||||
view: new View({
|
||||
center: this.mapConfigs.MAP_center, //中心点经纬度
|
||||
zoom: this.mapConfigs.Map_Zooms[0], //图层缩放大小
|
||||
maxZoom: this.mapConfigs.Map_Zooms[1],
|
||||
minZoom: this.mapConfigs.Map_Zooms[2],
|
||||
projection: this.projection,
|
||||
}),
|
||||
layers: [],
|
||||
// interactions: defaultControls({
|
||||
// doubleClickZoom: false,
|
||||
// }),
|
||||
});
|
||||
this.map = map;
|
||||
// 添加天地图
|
||||
let url = "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}";
|
||||
url = `${url}&T=vec_c&tk=2eecd3d615e01cf6dbe6d4b8b686d264`;
|
||||
let tdtLayer = new TileLayer({
|
||||
title: "天地图",
|
||||
id: "M2",
|
||||
type: "overlay",
|
||||
visible: true,
|
||||
layerType: "TD地图",
|
||||
opacity: 1,
|
||||
source: new XYZ({
|
||||
crossOrigin: 'anonymous',
|
||||
url: url,
|
||||
projection: "EPSG:4326"
|
||||
})
|
||||
});
|
||||
this.map.addLayer(tdtLayer);
|
||||
this.ShowLayers()
|
||||
|
||||
// this.map.layer2.setVisible(false)
|
||||
},
|
||||
|
||||
|
||||
//加载图层
|
||||
ShowLayers() {
|
||||
let layer = new TileLayer({
|
||||
title: "高清影像",
|
||||
id: "M1",
|
||||
type: "overlay",
|
||||
visible: true,
|
||||
layerType: "地图",
|
||||
opacity: 1,
|
||||
source: new TileArcGISRest({
|
||||
url: "http://192.168.60.22:6080/arcgis/rest/services/szhd/xmqyx4490/MapServer",
|
||||
projection: "EPSG:4490"
|
||||
}),
|
||||
});
|
||||
this.map.addLayer(layer);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/deep/ .ol-zoom{
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<div :style="{'height':mapHeight,'width':mapwidth,'position':'relative'}">
|
||||
<div id="maps" :style="{'height':'100%'}">
|
||||
</div>
|
||||
<slot name="maptime"></slot>
|
||||
<slot name="mapbar"></slot>
|
||||
<slot name="mapindex"></slot>
|
||||
|
||||
<showCamera ref="showCamera"></showCamera>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCameraLive
|
||||
} from '@/utils/camera.js'
|
||||
import showCamera from '@/views/monitor/camera/components/showCamera.vue'
|
||||
export default {
|
||||
components: {
|
||||
showCamera
|
||||
},
|
||||
props: {
|
||||
// 轨迹点位数据
|
||||
pointsArr: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
mapwidth: {
|
||||
type: String,
|
||||
default: "100%"
|
||||
},
|
||||
datasArr: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
// clickNumber:{
|
||||
// type: String,
|
||||
// default: ""
|
||||
// },
|
||||
boatInfo: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mapHeight: "400px",
|
||||
map: null,
|
||||
mapcenter: [120.58328, 31.29665],
|
||||
start_icon: require("@/assets/imgs/map-start.png"),
|
||||
end_icon: require("@/assets/imgs/map-end.png"),
|
||||
play_back: require("@/assets/imgs/playback.png"),
|
||||
camera: require("@/assets/imgs/camera.png"),
|
||||
clickNumber: "",
|
||||
// marker:[],
|
||||
// markerInfoWin:[]
|
||||
// points:this.pointsArr,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initMap()
|
||||
window.showPlayBack = this.showPlayBack
|
||||
window.showCamera = this.showCamera
|
||||
},
|
||||
watch: {
|
||||
pointsArr(val, oldval) {
|
||||
if (oldval != val) {
|
||||
this.$nextTick(function() {
|
||||
this.pointsArr = val
|
||||
this.playMap()
|
||||
})
|
||||
}
|
||||
},
|
||||
datasArr(val, oldval) {
|
||||
if (oldval != val) {
|
||||
this.$nextTick(function() {
|
||||
this.datasArr = val
|
||||
this.nowLocationShow()
|
||||
})
|
||||
}
|
||||
}
|
||||
// clickNumber(val){
|
||||
// if(val){
|
||||
// this.clickNumber = val
|
||||
// this.$nextTick(function(){
|
||||
// this.panto()
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
initLoad() {
|
||||
var that = this;
|
||||
var clientHeight = document.documentElement.clientHeight
|
||||
var topHeight = 50; //页面 头部
|
||||
let tableHeight = clientHeight - topHeight;
|
||||
that.mapHeight = tableHeight + "px";
|
||||
this.$emit('mapHeight', that.mapHeight)
|
||||
},
|
||||
playMap() {
|
||||
this.$nextTick(function() {
|
||||
this.playBack()
|
||||
})
|
||||
},
|
||||
nowLocationShow() {
|
||||
this.$nextTick(function() {
|
||||
this.nowLocation()
|
||||
})
|
||||
},
|
||||
// 初始地图
|
||||
initMap() {
|
||||
this.initLoad()
|
||||
this.$nextTick(function() {
|
||||
this.loadTdt()
|
||||
})
|
||||
},
|
||||
loadTdt(elId) {
|
||||
console.log("开始执行")
|
||||
let that = this
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log("开始执行2")
|
||||
let script = document.createElement('script');
|
||||
script.type = 'text/JavaScript';
|
||||
script.src = "http://api.tianditu.gov.cn/api?v=4.0&tk=2eecd3d615e01cf6dbe6d4b8b686d264"
|
||||
console.log("开始执行3")
|
||||
script.onload = function() {
|
||||
console.log("js加载完成")
|
||||
that.map = new T.Map('maps', {
|
||||
projection: 'EPSG:4490'
|
||||
});
|
||||
that.map.centerAndZoom(new T.LngLat(120.582031, 31.304329), 16);
|
||||
that.map.setMinZoom(1);
|
||||
that.map.setMaxZoom(18);
|
||||
that.map.enableDrag();
|
||||
// if(that.datasArr.length>0){
|
||||
// that.nowLocationShow()
|
||||
// }
|
||||
if (that.pointsArr.length > 0) {
|
||||
that.playMap()
|
||||
}
|
||||
// that.nowLocationShow()
|
||||
|
||||
}
|
||||
let head = document.head;
|
||||
head.appendChild(script);
|
||||
})
|
||||
},
|
||||
|
||||
// 轨迹
|
||||
playBack() {
|
||||
// 清除轨迹 market
|
||||
if (this.map) {
|
||||
var a = this.map.getOverlays()
|
||||
for (var i = 0; i < a.length; i++) {
|
||||
this.map.removeOverLay(a[i])
|
||||
}
|
||||
}
|
||||
if (this.pointsArr.length == 0) {
|
||||
this.$message({
|
||||
message: '该时间段暂无点位信息',
|
||||
type: 'warning'
|
||||
});
|
||||
return
|
||||
}
|
||||
// 数据设置中心点
|
||||
this.map.centerAndZoom(new T.LngLat(this.pointsArr[0].longitude, this.pointsArr[0].latitude), 16);
|
||||
let gjPoints = []
|
||||
for (var m of this.pointsArr) {
|
||||
gjPoints.push(
|
||||
new T.LngLat(m.longitude, m.latitude)
|
||||
)
|
||||
}
|
||||
// 创建起始位置
|
||||
var startIcon = new T.Icon({
|
||||
iconUrl: this.start_icon,
|
||||
iconSize: new T.Point(65, 65),
|
||||
iconAnchor: new T.Point(32, 32)
|
||||
});
|
||||
var start_marker = new T.Marker(new T.LngLat(this.pointsArr[0].longitude, this.pointsArr[0].latitude), {
|
||||
icon: startIcon
|
||||
});
|
||||
var endIcon = new T.Icon({
|
||||
iconUrl: this.end_icon,
|
||||
iconSize: new T.Point(65, 65),
|
||||
iconAnchor: new T.Point(32, 32)
|
||||
});
|
||||
var end_marker = new T.Marker(new T.LngLat(this.pointsArr[this.pointsArr.length - 1].longitude, this.pointsArr[
|
||||
this.pointsArr.length - 1].latitude), {
|
||||
icon: endIcon
|
||||
});
|
||||
this.map.addOverLay(start_marker);
|
||||
this.map.addOverLay(end_marker);
|
||||
|
||||
//创建轨迹线条
|
||||
var polygon = new T.Polyline(gjPoints, {
|
||||
color: "blue",
|
||||
weight: 3,
|
||||
opacity: 0.5,
|
||||
fillColor: "#FFFFFF",
|
||||
fillOpacity: 0.5
|
||||
});
|
||||
polygon.id = "lines"
|
||||
this.map.addOverLay(polygon);
|
||||
},
|
||||
// 实时定位
|
||||
nowLocation() {
|
||||
|
||||
// 数据设置中心点
|
||||
this.panto(this.datasArr.location)
|
||||
this.map.centerAndZoom(new T.LngLat(this.datasArr.location.longitude, this.datasArr.location.latitude), 16);
|
||||
var that = this
|
||||
var marker = new T.Marker(new T.LngLat(this.datasArr.location.longitude, this.datasArr.location
|
||||
.latitude)); // 创建标注
|
||||
var eNum = this.datasArr.location.equipment_number
|
||||
var cStatus = this.datasArr.camera ? this.datasArr.camera.state : ""
|
||||
var cNo = this.datasArr.camera ? this.datasArr.camera.idno : "";
|
||||
|
||||
var direction = this.toGetDirection(Number(this.datasArr.location.direction))
|
||||
var warning = this.toGetWarn(this.datasArr.location.alarm_message);
|
||||
var status = this.toGetStatus(this.datasArr.location.status);
|
||||
var content = "<div class='infowindow'>" +
|
||||
"<div class='infoheader'>" +
|
||||
"<span>" + this.datasArr.location.equipment_number + "</span></div>" +
|
||||
"<div class='infowrap'>" +
|
||||
"<table width='100%'>" +
|
||||
"<tr>" +
|
||||
"<td>定位时间</td>" +
|
||||
"<td>" + this.datasArr.location.created_at + "</td>" +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
"<td>行驶速度</td>" +
|
||||
"<td>" + this.datasArr.location.speed + " km/h</td>" +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
"<td>行驶方向</td>" +
|
||||
"<td>" + direction + " </td>" +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
"<td>当前告警</td>" +
|
||||
"<td>" + warning + "</td>" +
|
||||
"</tr>" +
|
||||
"<tr class='bm1'>" +
|
||||
"<td>设备状态</td>" +
|
||||
"<td>" + status + "</td>" +
|
||||
"</tr>" +
|
||||
"<tr class='bm1'>" +
|
||||
"<td>里程</td>" +
|
||||
"<td>" + (this.datasArr.location.mileage / 10) + "km</td>" +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
"<td>地理位置</td>" +
|
||||
"<td>" + this.isEmpty(this.datasArr.location.address) + "</td>" +
|
||||
"</tr>" +
|
||||
"</table>" +
|
||||
"<div class='playback'>" +
|
||||
"<li onClick=showPlayBack('" + eNum + "'," + this.datasArr.location.status + ")>" +
|
||||
"<img src='" + this.play_back + "'/>轨迹</li>" +
|
||||
|
||||
"<li onClick=showCamera('" + cStatus + "','" + cNo + "')>" +
|
||||
"<img src='" + this.camera + "'/>摄像头</li>" +
|
||||
|
||||
"</div>"
|
||||
// "<div class='infotop'></div>"+
|
||||
// "<div class='infocenter'></div>"+
|
||||
// "<div class='infobottom'></div>"+
|
||||
"</div>" +
|
||||
"</div>";
|
||||
// this.markerInfoWin[i] = new T.InfoWindow(content, {
|
||||
// offset: new T.Point(0, -20)
|
||||
// });
|
||||
// that.openInfo(this.markerInfoWin[i], this.marker[i])
|
||||
that.map.addOverLay(marker); // 将标注添加到地图中
|
||||
this.addClickHandler(content, marker);
|
||||
// this.marker[i].click()
|
||||
that.autoOpen(content, marker)
|
||||
},
|
||||
toGetDirection(num) {
|
||||
let name = "未知";
|
||||
if (num >= 0 && num < 90) {
|
||||
name = num == 0 ? "正北" : "东北"
|
||||
} else if (num >= 90 && num < 180) {
|
||||
name = num == 90 ? "正东" : "东南"
|
||||
} else if (num >= 180 && num < 270) {
|
||||
name = num == 180 ? "正南" : "西南"
|
||||
} else if (num >= 270 && num < 360) {
|
||||
name = num == 270 ? "正北" : "西北"
|
||||
}
|
||||
return name;
|
||||
},
|
||||
toGetWarn(str) {
|
||||
if (str.indexOf(1) > -1) {
|
||||
return "有";
|
||||
} else {
|
||||
return "无";
|
||||
}
|
||||
},
|
||||
toGetStatus(str) {
|
||||
console.log("Number(str)", Number(str))
|
||||
if (Number(str) != 11) {
|
||||
return "异常信号";
|
||||
} else {
|
||||
return "正常信号";
|
||||
}
|
||||
},
|
||||
panto(pot) {
|
||||
let that = this
|
||||
var a = this.map.getPanes()
|
||||
console.log("pane", a)
|
||||
this.map.panTo(new T.LngLat(pot.longitude, pot.latitude));
|
||||
|
||||
},
|
||||
removeLocation(data) {
|
||||
if (this.map) {
|
||||
var a = this.map.getOverlays()
|
||||
if (data.isSelect) {
|
||||
this.datasArr = data
|
||||
this.nowLocationShow()
|
||||
} else {
|
||||
for (var i = 0; i < a.length; i++) {
|
||||
a[i].closeInfoWindow()
|
||||
let point = a[i].getLngLat()
|
||||
if (point.lat == data.location.latitude) {
|
||||
this.map.removeOverLay(a[i])
|
||||
}
|
||||
// this.map.removeOverLay(a[i])
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
addClickHandler(content, marker) {
|
||||
var that = this
|
||||
// that.openInfo(content, e)
|
||||
marker.addEventListener("click", function(e) {
|
||||
that.openInfo(content, e)
|
||||
that.$emit('showDataInfo')
|
||||
});
|
||||
},
|
||||
openInfo(content, e) {
|
||||
console.log("e", e)
|
||||
var point = e.lnglat;
|
||||
var marker = new T.Marker(point); // 创建标注
|
||||
var markerInfoWin = new T.InfoWindow(content, {
|
||||
offset: new T.Point(0, -20)
|
||||
}); // 创建信息窗口对象
|
||||
this.map.openInfoWindow(markerInfoWin, point); //开启信息窗口
|
||||
},
|
||||
autoOpen(content, marker) {
|
||||
var point = marker.getLngLat();
|
||||
var marker = new T.Marker(point); // 创建标注
|
||||
var markerInfoWin = new T.InfoWindow(content, {
|
||||
offset: new T.Point(0, -20)
|
||||
}); // 创建信息窗口对象
|
||||
this.map.openInfoWindow(markerInfoWin, point); //开启信息窗口
|
||||
},
|
||||
// 轨迹回放
|
||||
showPlayBack(gps, num) {
|
||||
this.$router.push({
|
||||
path: '/monitor/gps/playback',
|
||||
query: {
|
||||
boatEquipment: gps,
|
||||
boatNum: num
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
isEmpty(val) {
|
||||
if (val) {
|
||||
return val
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
|
||||
},
|
||||
// 摄像头
|
||||
showCamera(deviceSerial) {
|
||||
let that = this
|
||||
let obj = {
|
||||
cStatus: 1,
|
||||
deviceSerial: deviceSerial
|
||||
}
|
||||
if (obj.cStatus == 1) {
|
||||
getCameraLive(obj.deviceSerial, function(res) {
|
||||
let url = res.data.url
|
||||
that.$refs.showCamera.cUrl = url
|
||||
that.$refs.showCamera.mountePlay()
|
||||
that.$refs.showCamera.isShow = true
|
||||
})
|
||||
} else if (obj.cStatus == 2) {
|
||||
this.$message({
|
||||
message: '当前未匹配到设备',
|
||||
type: 'warning'
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: '当前未匹配不在线',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#maps {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .tdt-infowindow-content-wrapper {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
/deep/ .tdt-infowindow-content {
|
||||
margin: 0;
|
||||
width: 350px !important;
|
||||
/* height:200px */
|
||||
}
|
||||
|
||||
/deep/ .tdt-container a.tdt-infowindow-close-button {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.infowindow {}
|
||||
|
||||
/deep/ .infoheader {
|
||||
color: rgb(255, 255, 255);
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
background-color: rgb(64, 150, 209);
|
||||
}
|
||||
|
||||
/deep/ .infowrap {}
|
||||
|
||||
/deep/ .infowrap table {
|
||||
font-size: 0;
|
||||
border: none;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 0px;
|
||||
border-bottom: 1px solid rgb(214, 214, 214);
|
||||
}
|
||||
|
||||
/deep/ .infowrap table tr {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/deep/ .infowrap table tr td {
|
||||
padding: 3px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/deep/ .infowrap table tr td:first-child {
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
color: rgb(44, 120, 191);
|
||||
|
||||
}
|
||||
|
||||
/deep/ .infowrap table tr td:first-child+td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/deep/ .bm1 td {
|
||||
border-bottom: 1px solid rgb(214, 214, 214);
|
||||
border-top: 1px solid rgb(214, 214, 214);
|
||||
}
|
||||
|
||||
/deep/ .playback {
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/deep/ .playback li {
|
||||
display: inline-block;
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
/deep/ .playback li img {
|
||||
width: 20px;
|
||||
vertical-align: sub;
|
||||
margin-right: 5px
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div style="padding: 0px 20px">
|
||||
<div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="泵车管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
|
||||
<div class="selector-item">
|
||||
<Input v-model="paginations.keyword" style="width: 120px;margin-right: 10px;" placeholder="关键词搜索" />
|
||||
</div>
|
||||
<Button type="primary" style="margin-left: 10px;" @click="load">查询</Button>
|
||||
<Button type="primary" style="margin-left: 10px;" @click="edit('','add')">新增</Button>
|
||||
|
||||
</div>
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div>
|
||||
<div ref="lxtable">
|
||||
<xy-table :list="list" :table-item="columns" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange">
|
||||
<template v-slot:btns>
|
||||
<!-- <div></div> -->
|
||||
<el-table-column fixed="right" align="center" label="操作" width="120" header-align="center">
|
||||
<template slot-scope="scope">
|
||||
<Button type="primary" size="small" @click="edit(scope.row.id,'editor')">编辑</Button>
|
||||
<Poptip transfer confirm title="确认要删除吗？" @on-ok="del(scope.row.id)">
|
||||
<Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
|
||||
</Poptip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</xy-table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新增 编辑 -->
|
||||
<editSection ref="editSection" @refresh="load"></editSection>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
list,
|
||||
destroy
|
||||
} from '@/api/car/basic.js'
|
||||
import editSection from './components/editSection.vue'
|
||||
export default {
|
||||
components: {
|
||||
editSection,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
paginations: {
|
||||
page: 1,
|
||||
page_size: 15,
|
||||
total: 0,
|
||||
keyword: ''
|
||||
},
|
||||
list: [], // table数据
|
||||
columns: [{
|
||||
label: '序号',
|
||||
type: 'index',
|
||||
fixed: 'left',
|
||||
width: 80,
|
||||
}, {
|
||||
prop: 'name',
|
||||
label: '车船名称',
|
||||
align: 'left',
|
||||
}, {
|
||||
prop: 'type',
|
||||
label: '设备类型',
|
||||
align: 'left',
|
||||
width: 120,
|
||||
formatter: (row, column, cellValue) => {
|
||||
if (row.type == 1) {
|
||||
return '公务用车'
|
||||
} else if (row.type == 2) {
|
||||
return '船舶'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
prop: 'describe',
|
||||
label: '设备描述',
|
||||
align: 'left',
|
||||
width: 240,
|
||||
}, {
|
||||
prop: 'branch',
|
||||
label: '品牌名称',
|
||||
align: 'center',
|
||||
width: 240,
|
||||
}, {
|
||||
prop: 'model',
|
||||
label: '型号名称',
|
||||
align: 'left',
|
||||
width: 240
|
||||
}, {
|
||||
prop: 'buy_date',
|
||||
label: '购买时间',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
}, {
|
||||
prop: 'gps',
|
||||
label: 'GPS',
|
||||
align: 'left',
|
||||
width: 240,
|
||||
// width: 120,
|
||||
}, {
|
||||
prop: 'plate',
|
||||
label: '车牌/船号',
|
||||
align: 'left',
|
||||
width: 240,
|
||||
// width: 120,
|
||||
}],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
list({
|
||||
page: this.paginations.page,
|
||||
page_size: this.paginations.page_size,
|
||||
...this.searchFileds
|
||||
}).then(res => {
|
||||
this.list = res.data
|
||||
this.paginations.total = res.total
|
||||
})
|
||||
},
|
||||
|
||||
onSearch(val) {
|
||||
this.searchFileds = val
|
||||
this.load()
|
||||
},
|
||||
handleCurrentChange(page) {
|
||||
this.paginations.page = page;
|
||||
this.load();
|
||||
},
|
||||
pageChange(e) {
|
||||
this.paginations.page = e
|
||||
this.load()
|
||||
},
|
||||
pageSizeChange(e) {
|
||||
this.paginations.page_size = e
|
||||
this.load()
|
||||
},
|
||||
edit(id, type) {
|
||||
if (type === 'editor') {
|
||||
this.$refs.editSection.id = id
|
||||
}
|
||||
this.$refs.editSection.type = type
|
||||
this.$refs.editSection.isShow = true
|
||||
},
|
||||
del(id) {
|
||||
var that = this;
|
||||
destroy({
|
||||
id: id,
|
||||
}).then(res => {
|
||||
Message({
|
||||
type: 'success',
|
||||
message: '删除成功'
|
||||
})
|
||||
this.load()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 保洁船只管理 -->
|
||||
<xy-dialog :title="title" :is-show.sync="isShow" @resetform="resetform('form')">
|
||||
<template v-slot:content>
|
||||
<el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="labelwidth">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select class="width100" v-model="form.type" placeholder="请选择类型">
|
||||
<el-option v-for="item in [{id:1,value:'公务用车'},{id:2,value:'船舶'}]" :key="item.id" :label="item.value"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="车船名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请填写车船名称" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="品牌名称" prop="branch">
|
||||
<el-input v-model="form.branch" placeholder="请填写品牌名称" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="型号名称" prop="model">
|
||||
<el-input v-model="form.model" placeholder="请填写型号名称" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="购买时间" prop="buy_date">
|
||||
<el-date-picker style="width:100%" v-model="form.buy_date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="GPS" prop="gps">
|
||||
<el-input v-model="form.gps" placeholder="请填写GPS" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="车牌/船号" prop="plate">
|
||||
<el-input v-model="form.plate" placeholder="请填写车牌/船号" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="设备描述" prop="describe">
|
||||
<el-input v-model="form.describe" type="textarea" placeholder="请填写设备描述" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<template v-slot:footerbtn>
|
||||
<el-button type="primary" v-preventReClick @click="submitForm('form')">保存</el-button>
|
||||
</template>
|
||||
</xy-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
get,
|
||||
store,
|
||||
save
|
||||
} from '@/api/car/basic.js'
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
title: "车船信息",
|
||||
labelwidth: '120px',
|
||||
type:'add',
|
||||
isShow: false,
|
||||
showform: false,
|
||||
infoId: "",
|
||||
form: {
|
||||
type: 1,
|
||||
name:'',
|
||||
describe: '',
|
||||
branch: '',
|
||||
model: '',
|
||||
buy_date: '',
|
||||
gps: '',
|
||||
plate:'',
|
||||
// sort_number: '',
|
||||
// remark: ''
|
||||
|
||||
},
|
||||
rules: {
|
||||
num: [{
|
||||
required: true,
|
||||
message: '请填写船号',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
type: [{
|
||||
required: true,
|
||||
message: '请选择船型',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
river_id: [{
|
||||
required: true,
|
||||
message: '请选择作业河道',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getInfo(id) {
|
||||
|
||||
let that = this
|
||||
if (id) {
|
||||
get(id).then(res => {
|
||||
let result = Object.assign(that.form, res);
|
||||
that.form = result;
|
||||
}).catch(error => {
|
||||
//reject(error)
|
||||
})
|
||||
}
|
||||
},
|
||||
submitForm(formName) {
|
||||
let that = this
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (that.infoId) {
|
||||
|
||||
save(that.form).then(response => {
|
||||
this.$Message.success('操作成功');
|
||||
this.$emit("auditSuccess")
|
||||
that.isShow = false;
|
||||
}).catch(error => {
|
||||
//reject(error)
|
||||
})
|
||||
} else {
|
||||
store(that.form).then(response => {
|
||||
this.$Message.success('操作成功');
|
||||
this.$emit("auditSuccess")
|
||||
that.isShow = false;
|
||||
}).catch(error => {
|
||||
//reject(error)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.$Message.error('数据校验失败');
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetform(formName) {
|
||||
this.infoId = ""
|
||||
this.showform = false
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.width100 {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="demo-split">
|
||||
<Split v-model="split1">
|
||||
<template #right>
|
||||
<div class="demo-split-pane no-padding">
|
||||
<!-- <Split v-model="split2" mode="vertical" @on-moving="toMoveSplit">
|
||||
<template #top> -->
|
||||
<div class="demo-split-pane">
|
||||
<maps ref="maps" @mapHeight="getmapHeight" :locationObj="locationObj"
|
||||
@showDataInfo="showDataInfo">
|
||||
</maps>
|
||||
</div>
|
||||
<!-- </template> -->
|
||||
<!-- <template #bottom>
|
||||
<div class="demo-split-pane">
|
||||
<div class="mapsInfo">
|
||||
<mytable :list="list" style="height:100%" :columns="columns" :optdefault="optdefault"
|
||||
:paginations="tablepaginations">
|
||||
</mytable>
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
<!-- </Split> -->
|
||||
</div>
|
||||
</template>
|
||||
<template #left>
|
||||
<div class="demo-split-pane">
|
||||
<div class="leftMenu" :style="{'height':leftHeight}">
|
||||
<div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
|
||||
<span>实时定位</span>
|
||||
</div>
|
||||
<div class="treewrap">
|
||||
<el-input class="treeInput" placeholder="输入关键字进行查找" v-model="filterText">
|
||||
</el-input>
|
||||
<el-tree ref="boatTree" :filter-node-method="filterNode" node-key="num" :data="data" :props="defaultProps"
|
||||
default-expand-all>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span @click="()=>nodeClick(data)"><i
|
||||
:class="data.isSelect?'isSelect el-icon-check':'el-icon-check'"></i>
|
||||
</span>
|
||||
<span @click="toMove(data)" :class="data.isSelect?'isSelect':''"> {{ data.name }}
|
||||
<span v-if="data.plate">({{data.plate}})</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</Split>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getLocation
|
||||
} from "@/api/monitor/gps"
|
||||
import {
|
||||
list as listSection
|
||||
} from '@/api/car/basic.js'
|
||||
import maps from "@/components/maps/maps"
|
||||
export default {
|
||||
components: {
|
||||
maps
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
split1: 0.2,
|
||||
split2: 0.75,
|
||||
leftHeight: "0",
|
||||
menuHeight: "0",
|
||||
locationObj: {},
|
||||
listUnit: [],
|
||||
isSelect: false,
|
||||
locationArr: [],
|
||||
paginations: {
|
||||
page: 1,
|
||||
page_size: 999,
|
||||
total: 0
|
||||
},
|
||||
tablepaginations: {
|
||||
page: 1,
|
||||
page_size: 5,
|
||||
total: 0,
|
||||
noShow: true
|
||||
},
|
||||
optdefault: {
|
||||
noOpt: true
|
||||
},
|
||||
list: [],
|
||||
filterText: "",
|
||||
data: [],
|
||||
checkedId: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
gps: "gps"
|
||||
},
|
||||
equipmentNumber: [],
|
||||
clickNumber: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
this.$nextTick(function() {
|
||||
// this.getBoat()
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
created() {
|
||||
|
||||
|
||||
// this.getList()
|
||||
this.getmapHeight();
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.boatTree.filter(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查找船只
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.num.indexOf(value) !== -1;
|
||||
},
|
||||
toMoveSplit(e) {
|
||||
console.log(e);
|
||||
|
||||
this.menuHeight = e.y + "px"
|
||||
},
|
||||
toputInSeaction(obj) {
|
||||
if (obj.gps) {
|
||||
var box = this.data[0].children.filter(item => {
|
||||
return item.id == obj.section
|
||||
})[0];
|
||||
box.children.push(obj);
|
||||
}
|
||||
},
|
||||
async getData() {
|
||||
await getLocation({
|
||||
equipment_number: this.equipmentNumber
|
||||
}).then(res => {
|
||||
this.locationArr = res
|
||||
}).catch(error => {
|
||||
//reject(error)
|
||||
})
|
||||
await listSection({
|
||||
page: this.paginations.page,
|
||||
page_size: this.paginations.page_size
|
||||
}).then(res => {
|
||||
let data = res.data;
|
||||
// this.data = res.data
|
||||
for (var m of data) {
|
||||
for (var k of this.locationArr) {
|
||||
if (m.gps == k.equipment_number) {
|
||||
m['location'] = k
|
||||
m.isSelect = false
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// this.toputInSeaction(m);
|
||||
|
||||
}
|
||||
this.data = data
|
||||
this.list.push(...res.data)
|
||||
})
|
||||
},
|
||||
// 获取maps 传递的高度
|
||||
getmapHeight(val) {
|
||||
this.leftHeight = val
|
||||
this.menuHeight = (parseInt(val) - 100) + 'px'
|
||||
},
|
||||
// 点击船号移动到位置
|
||||
toMove(data) {
|
||||
if (data.isSelect) {
|
||||
this.$refs.maps.moveto(data.location.longitude, data.location.latitude)
|
||||
} else {
|
||||
this.nodeClick(data)
|
||||
}
|
||||
},
|
||||
nodeClick(data) {
|
||||
|
||||
if (data.location) {
|
||||
let isSe = false
|
||||
isSe = !data.isSelect
|
||||
console.log("isSe", isSe)
|
||||
if (isSe) {
|
||||
this.list.push(data)
|
||||
console.log("data", data)
|
||||
this.locationObj = data
|
||||
} else {
|
||||
for (var i = 0; i < this.list.length; i++) {
|
||||
if (this.list[i].gps == data.gps) {
|
||||
this.list.splice(i, 1)
|
||||
this.locationObj = data
|
||||
}
|
||||
}
|
||||
// this.$refs.maps.removeLocation(data)
|
||||
}
|
||||
data.isSelect = isSe
|
||||
this.$refs.boatTree.updateKeyChildren(data.num, data)
|
||||
// return data
|
||||
// this.$set(data,'isSelect',isSe)
|
||||
|
||||
} else {
|
||||
this.$message({
|
||||
message: '暂无点位信息',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
},
|
||||
//展示车体数据 table
|
||||
showDataInfo() {
|
||||
console.log("show")
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mapwraper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.leftMenu {
|
||||
background: #fff;
|
||||
|
||||
padding: 10% 5%;
|
||||
/* overflow: auto; */
|
||||
}
|
||||
|
||||
.treewrap {
|
||||
height: 95%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.treeInput {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.treewrap .el-tree {
|
||||
height: calc(100% - 60px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.maptime {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mapsInfo {
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.el-icon-close {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-icon-plus {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popper .el-icon-rank {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.isSelect {
|
||||
color: #409eff
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.demo-split {
|
||||
height: 94vh;
|
||||
border: 1px solid #dcdee2;
|
||||
margin: 0px 5px;
|
||||
}
|
||||
|
||||
.demo-split-pane {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.demo-split-pane.no-padding {
|
||||
height: 94vh;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div style="padding: 0px 20px">
|
||||
<el-image
|
||||
style="width: 100%"
|
||||
:src="require('/src/assets/chart.png')"
|
||||
fit="fill"></el-image>
|
||||
<!-- <div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="数据统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div style="padding: 0px 20px">
|
||||
<el-image
|
||||
style="width: 100%"
|
||||
:src="require('/src/assets/warning.png')"
|
||||
fit="fill"></el-image>
|
||||
<!-- <div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="系统预警" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div style="padding: 0px 20px">
|
||||
<el-image
|
||||
style="width: 100%"
|
||||
:src="require('/src/assets/monitor.png')"
|
||||
fit="fill"></el-image>
|
||||
<!-- <div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="环境监控" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Loading…
Reference in new issue