1456 lines
41 KiB
Vue
1456 lines
41 KiB
Vue
<template>
|
||
<div id="content">
|
||
<div id="map" ref="map" style="width: 100vw; height: 100vh"/>
|
||
<div id="overlay-box"/>
|
||
|
||
<div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
|
||
<div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</div>
|
||
</div>
|
||
<div class="mobileHomePageExpandBtn" v-if="page=='mobileHomePage'">
|
||
<van-icon name="expand-o" color="white" @click="switchFullScreen"/>
|
||
</div>
|
||
|
||
<!-- '#FF4D36':'#ffa502'-->
|
||
|
||
<div class="iconColorList">
|
||
<div class="iconColorListItem" style="color: #ffa502"><span style="background-color: #ffa502"></span>计划路线</div>
|
||
<div class="iconColorListItem" style="color: #FF4D36"><span style="background-color: #FF4D36"></span>实际路线</div>
|
||
</div>
|
||
<van-overlay :show="alarmDetailsOverlay" @click="alarmDetailsOverlay = false" z-index="20">
|
||
<div class="alarmDetailsOverlayWrapper" @click.stop>
|
||
<div class="alarmDetailsBox">
|
||
<div class="title">{{ alarmDetailsData.title }}</div>
|
||
<div class="alarmDetailsBoxItem"><span>报警类型:</span><span>{{ alarmDetailsData.alarmCategory_dictText }}</span>
|
||
</div>
|
||
<div class="alarmDetailsBoxItem"><span>报警时间:</span><span>{{ alarmDetailsData.createTime }}</span></div>
|
||
<div class="alarmDetailsBoxItem"><span>警情内容:</span><span>{{ alarmDetailsData.msgContent }}</span></div>
|
||
<div class="alarmDetailsBoxItem"><span>发布人:</span><span>{{ alarmDetailsData.sender }}</span></div>
|
||
<div class="alarmDetailsBoxItem"><span>关联设备:</span><span>内容</span></div>
|
||
</div>
|
||
<div class="btnList">
|
||
<div class="btnItem" @click="alarmClickAction(1)">确认</div>
|
||
<div class="btnItem" @click="alarmClickAction(2)">导航</div>
|
||
</div>
|
||
</div>
|
||
</van-overlay>
|
||
|
||
|
||
<!--
|
||
<div class="pcPlanningPath" v-if="page=='pcPlanningPath'">
|
||
<div class="pcPlanningPathNext" @click="clearPcPlanningPath">清空重新绘制</div>
|
||
</div>
|
||
-->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import "ol/ol.css";
|
||
import TileLayer from "ol/layer/Tile";
|
||
import VectorLayer from "ol/layer/Vector";
|
||
import VectorSource from "ol/source/Vector";
|
||
import XYZ from "ol/source/XYZ";
|
||
import {Map, View, Feature} from "ol";
|
||
import {Icon, Fill, Stroke, Style, Circle, Text} from "ol/style";
|
||
import Overlay from "ol/Overlay";
|
||
import {Point, LineString, Polygon} from "ol/geom.js";
|
||
import {getVectorContext} from "ol/render";
|
||
import axios from "axios";
|
||
import TileWMS from "ol/source/TileWMS"
|
||
import WMTS from "ol/source/WMTS"
|
||
import TileGrid from "ol/tilegrid/TileGrid"
|
||
import {Notify, Dialog} from 'vant';
|
||
import * as interaction from 'ol/interaction'; // 交互
|
||
import {OL as ol} from "plot-ol/plottingol";
|
||
import GeoJSON from 'ol/format/GeoJSON'
|
||
import service from "@/utils/service";
|
||
import {appInit, getStatisFileUrl,GetQueryString,getUrlParam} from "../utils/publicFun";
|
||
import dayjs from "dayjs"
|
||
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
|
||
import {get as getProjection} from 'ol/proj.js';
|
||
import {getTopLeft, getWidth} from 'ol/extent.js';
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
showstartDate: false,
|
||
showendDate: false,
|
||
startDate: dayjs().subtract(1, 'hour').toDate(),
|
||
endDate: dayjs().toDate(),
|
||
map: {},
|
||
pointLayer: {},
|
||
canAddPoints: false,
|
||
coordinate: [],
|
||
routeOriginList: [],
|
||
route: new LineString([[12496610.1929, 2476571.7426], [12496623.829, 2476586.2505]]),
|
||
route1: new LineString([[113.95113841271974, 22.568523240293505], [113.94452944970705, 22.563351941312792], [113.95188943124391, 22.559317898954394], [113.94467965341188, 22.555326771940233]]),
|
||
geometryMove: {},
|
||
featureMove: {},
|
||
styles: {
|
||
route: new Style({
|
||
stroke: new Stroke({
|
||
width: 6,
|
||
color: "rgb(255, 77, 54)",
|
||
}),
|
||
}),
|
||
icon: new Style({
|
||
image: new Icon({
|
||
anchor: [0.5, 1],
|
||
src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
|
||
scale: 1, //设置大小
|
||
}),
|
||
}),
|
||
startPoint: new Style({
|
||
text: new Text({
|
||
testAlign: 'center',
|
||
text: "起点",
|
||
font: 'bold 20px 微软雅黑',
|
||
fill: new Fill({
|
||
color: '#ffa502',
|
||
})
|
||
})
|
||
}),
|
||
endPoint: new Style({
|
||
image: new Circle({
|
||
radius: 7,
|
||
fill: new Fill({color: "red"}),
|
||
stroke: new Stroke({
|
||
color: "white",
|
||
width: 2,
|
||
}),
|
||
}),
|
||
text: new Text({
|
||
testAlign: 'center',
|
||
text: "当前位置",
|
||
font: 'bold 20px 微软雅黑',
|
||
fill: new Fill({
|
||
color: '#ffa502',
|
||
}),
|
||
offsetY: -20
|
||
})
|
||
}),
|
||
featureMove: new Style({
|
||
image: new Circle({
|
||
radius: 7,
|
||
fill: new Fill({color: "black"}),
|
||
stroke: new Stroke({
|
||
color: "white",
|
||
width: 2,
|
||
}),
|
||
}),
|
||
text: new Text({
|
||
font: '16px Arial',
|
||
testAlign: 'left',
|
||
offsetX: 90,
|
||
offsetY: 1,
|
||
})
|
||
}),
|
||
},
|
||
vectorLayer: {},
|
||
distance: 0,
|
||
onceDistance:5,
|
||
lastTime: 0,
|
||
speed: 0.1,
|
||
page: null,
|
||
selectPoint: [],
|
||
drawPlanningPathLayer: null,
|
||
draw: null,
|
||
snap: null,
|
||
pcDrawType: "",
|
||
equipmentLayer: {},
|
||
alarmLayer: {},
|
||
alarmAnimation: null,
|
||
planningTargetPoint: [],
|
||
alarmDetailsOverlay: false,
|
||
alarmDetailsData: {
|
||
alarmCategory_dictText: ""
|
||
},
|
||
navigationStartPoint: [],
|
||
navigationEndPoint: [],
|
||
hd_gps_location: [],
|
||
pageType: "",
|
||
planningVectorLayer: {},
|
||
parentPostMessageData: [],
|
||
isCanDraw: true,
|
||
moveUserId: "",
|
||
patrolInstanceId: "",
|
||
moveIndex: 0,
|
||
pointMoveTimer:null,
|
||
mapZoom:15
|
||
};
|
||
},
|
||
mounted() {
|
||
console.log(location.href)
|
||
|
||
this.page = this.$route.query.page||getUrlParam("page");
|
||
this.pageType = this.$route.query.type||getUrlParam("type");
|
||
this.patrolInstanceId = this.$route.query.patrolInstanceId||getUrlParam("patrolInstanceId");
|
||
this.equipmentId = this.$route.query.equipmentId||getUrlParam("equipmentId");
|
||
this.moveUserId = this.$route.query.uerId||getUrlParam("uerId");
|
||
this.busId = this.$route.query.busId||getUrlParam("busId");
|
||
|
||
this.token = getUrlParam("token")
|
||
|
||
if(this.token!=null){
|
||
if (this.token.length > 16) {
|
||
console.log("获取到token")
|
||
localStorage.setItem("hd_token", this.token)
|
||
}else {
|
||
console.log("未获取到token")
|
||
}
|
||
}
|
||
|
||
|
||
setInterval(() => {
|
||
let hd_gps_location = localStorage.getItem("hd_gps_location")
|
||
if (hd_gps_location) {
|
||
hd_gps_location = hd_gps_location.split(",")
|
||
this.hd_gps_location = hd_gps_location
|
||
this.navigationStartPoint = this.hd_gps_location
|
||
}
|
||
}, 2000)
|
||
|
||
this.initMap();
|
||
|
||
this.pcDrawType = "LineString";
|
||
// this.pcPlanningPath()
|
||
|
||
|
||
switch (this.page) {
|
||
case "addAlarmPoint":
|
||
console.log("新增报警点");
|
||
//处理ok
|
||
this.PageAddAlarmPoint()
|
||
break
|
||
case "pcPlanningPath":
|
||
this.pcDrawType = "LineString";
|
||
window.addEventListener('message', (event) => {
|
||
this.isCanDraw = false
|
||
if (this.parentPostMessageData.length == 0) {
|
||
this.map.removeLayer(this.drawPlanningPathLayer);
|
||
this.parentPostMessageData = event.data;
|
||
this.drawPcPostMessageDataLayer()
|
||
}
|
||
});
|
||
//处理ok
|
||
this.pcPlanningPath()
|
||
break
|
||
case "pcDrawArea":
|
||
this.pcDrawType = "Polygon"
|
||
window.addEventListener('message', (event) => {
|
||
this.isCanDraw = false
|
||
if (this.parentPostMessageData.length == 0) {
|
||
this.map.removeLayer(this.drawPlanningPathLayer);
|
||
this.parentPostMessageData = event.data;
|
||
this.drawPcPostMessageDataLayer()
|
||
}
|
||
});
|
||
//处理ok
|
||
this.pcPlanningPath();
|
||
break
|
||
case "planningPath":
|
||
// http://localhost:8080/hd-glasses-app/#/hd_map?page=planningPath&alarmId=1714938284919808002
|
||
if (this.$route.query.alarmId == null) {
|
||
console.error("告警id不可为空")
|
||
}
|
||
this.getAlarmDetails(this.$route.query.alarmId)
|
||
// this.planningPath()
|
||
break
|
||
case "mobileHomePage":
|
||
// http://localhost:8080/hd-glasses-app/#/hd_map?page=mobileHomePage
|
||
appInit(500).then((e) => {
|
||
console.log("获取到token，开始执行后续")
|
||
console.log(e)
|
||
this.queryAlarmList();
|
||
this.queryAllEquipment();
|
||
this.getAreaList()
|
||
setInterval(() => {
|
||
this.queryAlarmList();
|
||
}, 3500)
|
||
setInterval(() => {
|
||
this.queryAllEquipment();
|
||
}, 5000)
|
||
|
||
}).then((e) => {
|
||
console.error(e)
|
||
})
|
||
break
|
||
default:
|
||
console.log("未匹配到page参数")
|
||
this.getPatrolInstanceDetailsById()
|
||
|
||
// this.planningPath()
|
||
// this.queryAlarmList()
|
||
// this.queryAllEquipment()
|
||
}
|
||
|
||
|
||
},
|
||
methods: {
|
||
PageAddAlarmPoint() {
|
||
this.canAddPoints = true;
|
||
this.clickMap();
|
||
},
|
||
|
||
showHistory() {
|
||
var _list = [[113.94755498147583, 22.565597285534384], [113.9468468782959, 22.563151110912802], [113.9487566111145, 22.56018995216036], [113.95017281747437, 22.55748628547335]]
|
||
|
||
},
|
||
clearPointsLayers() {
|
||
this.coordinate = []
|
||
this.map.removeLayer(this.pointLayer);
|
||
this.pointLayer = {};
|
||
if (Object.keys(this.pointLayer).length == 0) {
|
||
// 创建图层
|
||
this.pointLayer = new VectorLayer({
|
||
source: new VectorSource(),
|
||
});
|
||
// 图层添加到地图上
|
||
this.map.addLayer(this.pointLayer);
|
||
}
|
||
},
|
||
initMap() {
|
||
|
||
const wmsLayer_0 = new TileLayer({
|
||
source: new TileWMS({
|
||
// 设置 Geoserver 服务的 URL
|
||
url: process.env.VUE_APP_MAP_URL + "/wms",
|
||
params: {
|
||
LAYERS: "china:yangjianghedian",
|
||
TILED: true
|
||
}
|
||
})
|
||
});
|
||
|
||
|
||
// 切片方案（0-18级
|
||
const projection = getProjection('EPSG:3857');
|
||
const projectionExtent = projection.getExtent();
|
||
const size = getWidth(projectionExtent) / 256;
|
||
const resolutions = new Array(19);
|
||
const matrixIds = new Array(19);
|
||
for (let z = 0; z < 19; ++z) {
|
||
resolutions[z] = size / Math.pow(2, z);
|
||
matrixIds[z] = "EPSG:3857:" + z;
|
||
}
|
||
|
||
|
||
var style = '';
|
||
var format = 'image/png';
|
||
var layerName = 'china:yangjianghedian_dt';
|
||
let baseParams = ['VERSION', 'LAYER', 'STYLE', 'TILEMATRIX', 'TILEMATRIXSET', 'SERVICE', 'FORMAT'];
|
||
|
||
let params = {
|
||
'VERSION': '1.0.0',
|
||
'LAYER': layerName,
|
||
'STYLE': style,
|
||
'TILEMATRIX': matrixIds,
|
||
'TILEMATRIXSET': projection,
|
||
'SERVICE': 'WMTS',
|
||
'FORMAT': format
|
||
};
|
||
var url = process.env.VUE_APP_MAP_URL + "/gwc/service/wmts?authkey=" + process.env.VUE_APP_MAP_AUTHKEY+"&"
|
||
for (var param in params) {
|
||
if (baseParams.indexOf(param.toUpperCase()) < 0) {
|
||
url = url + param + '=' + params[param] + '&';
|
||
}
|
||
}
|
||
url = url.slice(0, -1);
|
||
|
||
|
||
const wmtsLayer_1 = new TileLayer({
|
||
opacity: 1, //图层透明度
|
||
source: new WMTS({
|
||
url: url,
|
||
layer: "china:yangjianghedian_dt",
|
||
matrixSet: 'EPSG:3857',
|
||
format: 'image/png', // 默认：'image/jpeg'
|
||
projection: projection,
|
||
tileGrid: new WMTSTileGrid({
|
||
origin: getTopLeft(projectionExtent),
|
||
resolutions: resolutions,
|
||
matrixIds: matrixIds,
|
||
}),
|
||
style: '',
|
||
wrapX: true
|
||
})
|
||
});
|
||
|
||
|
||
this.map = new Map({
|
||
target: "map",
|
||
layers: [
|
||
// new TileLayer({
|
||
// source: new XYZ({
|
||
// url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
|
||
// }),
|
||
// }),
|
||
wmtsLayer_1,
|
||
wmsLayer_0,
|
||
],
|
||
view: new View({
|
||
resolutions: resolutions,
|
||
projection: projection,
|
||
center: [12497018.585823221, 2476783.2447665134],
|
||
zoom: 16,
|
||
}),
|
||
});
|
||
this.map.on('singleclick', e => {
|
||
this.map.forEachFeatureAtPixel(
|
||
e.pixel,
|
||
(feature) => {
|
||
console.log("Feature被点击了")
|
||
console.log(feature)
|
||
if (feature.values_.type == 'alarm') {
|
||
this.alarmDetailsData = feature.values_.data;
|
||
this.alarmDetailsOverlay = true;
|
||
}
|
||
},
|
||
{
|
||
hitTolerance: 30
|
||
}
|
||
);
|
||
});
|
||
|
||
},
|
||
/**
|
||
* 点击地图添加摄像头要素
|
||
*/
|
||
clickMap() {
|
||
|
||
this.map.on("click", (e) => {
|
||
if (this.canAddPoints) {
|
||
this.addPoints(e.coordinate);
|
||
}
|
||
});
|
||
},
|
||
planningPath() {
|
||
|
||
const startPoint = ol.proj.transform(this.navigationStartPoint, 'EPSG:4326', 'EPSG:3857');
|
||
const endPoint = ol.proj.transform(this.navigationEndPoint, 'EPSG:4326', 'EPSG:3857');
|
||
console.log(startPoint)
|
||
console.log(endPoint)
|
||
|
||
const _points = `${startPoint[0]}#${startPoint[1]}@${endPoint[0]}#${endPoint[1]}`
|
||
|
||
axios({
|
||
method: "post",
|
||
url: process.env.VUE_APP_MAP_URL + "/wfs?authkey=" + process.env.VUE_APP_MAP_AUTHKEY,
|
||
headers: {
|
||
'Content-Type': 'text/xml'
|
||
},
|
||
data: `<GetFeature xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
|
||
outputFormat="application/json"
|
||
viewParams="points:${_points}"
|
||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
|
||
<Query typeName="china:planning-path" xmlns:china="www.shgis.com"/>
|
||
</GetFeature>`,
|
||
}).then(res => {
|
||
// console.log("================================获取到了导航结果")
|
||
|
||
let pathList = [];
|
||
res.data.features.map((item, index) => {
|
||
pathList.push(item.geometry.coordinates[0])
|
||
pathList.push(item.geometry.coordinates[1])
|
||
// console.log(item.geometry.coordinates[0])
|
||
// console.log(item.geometry.coordinates[0])
|
||
})
|
||
const route = new LineString(pathList)
|
||
|
||
const geometryMove = new Point(route.getFirstCoordinate());
|
||
|
||
const featureMove = new Feature({
|
||
type: "featureMove",
|
||
geometry: geometryMove,
|
||
});
|
||
this.planningVectorLayer.set('id', 'planningVectorLayer');
|
||
//先清空 再清除
|
||
this.map.removeLayer(this.planningVectorLayer)
|
||
this.planningVectorLayer = new VectorLayer({
|
||
source: new VectorSource({
|
||
features: [
|
||
new Feature({
|
||
type: "route",
|
||
geometry: route,
|
||
}),
|
||
featureMove,
|
||
new Feature({
|
||
type: "icon",
|
||
geometry: new Point(route.getFirstCoordinate()),
|
||
}),
|
||
new Feature({
|
||
type: "icon",
|
||
geometry: new Point(route.getLastCoordinate()),
|
||
}),
|
||
],
|
||
}),
|
||
style: (feature) => {
|
||
return this.styles[feature.get("type")];
|
||
},
|
||
});
|
||
|
||
this.map.addLayer(this.planningVectorLayer)
|
||
})
|
||
},
|
||
/**
|
||
* 根据经纬度坐标添加摄像头要素
|
||
*/
|
||
addPoints(coordinate) {
|
||
|
||
if (this.selectPoint.length > 0) {
|
||
this.coordinate = []
|
||
this.map.removeLayer(this.pointLayer);
|
||
this.pointLayer = {};
|
||
if (Object.keys(this.pointLayer).length == 0) {
|
||
// 创建图层
|
||
this.pointLayer = new VectorLayer({
|
||
source: new VectorSource(),
|
||
});
|
||
// 图层添加到地图上
|
||
this.map.addLayer(this.pointLayer);
|
||
}
|
||
} else {
|
||
// 创建图层
|
||
this.pointLayer = new VectorLayer({
|
||
source: new VectorSource(),
|
||
});
|
||
// 图层添加到地图上
|
||
this.map.addLayer(this.pointLayer);
|
||
}
|
||
|
||
this.selectPoint = coordinate;
|
||
this.coordinate = coordinate;
|
||
|
||
// 创建feature要素，一个feature就是一个点坐标信息
|
||
const feature = new Feature({
|
||
geometry: new Point(coordinate),
|
||
});
|
||
// 设置要素的图标
|
||
feature.setStyle(
|
||
new Style({
|
||
// 设置图片效果
|
||
image: new Icon({
|
||
src: getStatisFileUrl("/map/icon_paishuibeng_h_2.png"),
|
||
// anchor: [0.5, 0.5],
|
||
scale: 0.4,
|
||
}),
|
||
})
|
||
);
|
||
// 要素添加到地图图层上
|
||
|
||
this.pointLayer.getSource().addFeature(feature);
|
||
|
||
// 设置文字信息
|
||
// this.addText(coordinate);
|
||
},
|
||
addText(coordinate) {
|
||
const overlayBox = document.getElementById("overlay-box"); //获取一个div
|
||
const oSpan = document.createElement("span"); //创建一个span
|
||
oSpan.contentEditable = true; //设置文字是否可编辑
|
||
oSpan.id = coordinate[0]; //创建一个id
|
||
let pText = document.createTextNode("摄像头" + coordinate[0].toFixed(2)); //创建span的文本信息
|
||
oSpan.appendChild(pText); //将文本信息添加到span
|
||
overlayBox.appendChild(oSpan); //将span添加到div中
|
||
let textInfo = new Overlay({
|
||
position: coordinate, //设置位置
|
||
element: document.getElementById(coordinate[0]),
|
||
offset: [-25, 30], //设置偏移
|
||
});
|
||
this.map.addOverlay(textInfo);
|
||
},
|
||
|
||
moveFeature(e) {
|
||
let time = e.frameState.time;
|
||
this.distance =
|
||
(this.distance + (this.speed * (time - this.lastTime)) / 1000) % 1; //%2表示：起止止起；%1表示：起止起止
|
||
|
||
this.lastTime = time;
|
||
|
||
const currentCoordinate = this.route.getCoordinateAt(
|
||
this.distance > 1 ? 2 - this.distance : this.distance
|
||
);
|
||
this.geometryMove.setCoordinates(currentCoordinate);
|
||
const vectorContext = getVectorContext(e);
|
||
vectorContext.setStyle(this.styles.featureMove);
|
||
vectorContext.drawGeometry(this.geometryMove);
|
||
this.map.render();
|
||
},
|
||
startAnimation() {
|
||
this.pointMoveTimer=setInterval(()=>{
|
||
|
||
console.log("Start animation 2s 一次")
|
||
|
||
console.log("this.routeOriginList.length:",this.routeOriginList.length)
|
||
|
||
|
||
this.moveIndex = this.moveIndex + this.onceDistance
|
||
|
||
console.log("this.moveIndex:"+this.moveIndex)
|
||
|
||
if(this.moveIndex>=this.routeOriginList.length){
|
||
this.moveIndex=this.routeOriginList.length-1;
|
||
}
|
||
|
||
const currentCoordinate = this.routeOriginList[this.moveIndex]
|
||
|
||
|
||
console.log(currentCoordinate);
|
||
|
||
this.geometryMove.setCoordinates(currentCoordinate.location);
|
||
|
||
this.styles.featureMove.getText().setText(currentCoordinate.createTime)
|
||
this.featureMove.setStyle(this.styles.featureMove)
|
||
// this.featureMove.drawGeometry(this.geometryMove);
|
||
|
||
this.map.render();
|
||
|
||
// 如果跳到最后一个点下标就重置为 0
|
||
if(this.moveIndex==this.routeOriginList.length-1){
|
||
this.moveIndex=0;
|
||
}
|
||
|
||
|
||
},2000)
|
||
|
||
|
||
|
||
},
|
||
stopAnimation() {
|
||
this.featureMove.setGeometry(this.geometryMove);
|
||
this.vectorLayer.un("postrender", this.moveFeatureByCoordinate);
|
||
},
|
||
addAlarmPointNextAction() {
|
||
if (this.selectPoint.length == 0) {
|
||
Dialog({message: '请先选择点位'});
|
||
}
|
||
// 上传之前将3857转4326
|
||
const center = ol.proj.transform(this.selectPoint, 'EPSG:3857', 'EPSG:4326');
|
||
console.log("================center: " + JSON.stringify(center))
|
||
const result = JSON.stringify(center)
|
||
location.href = "uniwebview://action?function=addAlarmPoint¶ms1=" + result;
|
||
},
|
||
pcPlanningPath() {
|
||
//https://blog.csdn.net/Raccon_/article/details/127491268
|
||
|
||
// const interaction = this.map
|
||
// .getInteractions()
|
||
// .getArray()
|
||
// .find(interaction => {
|
||
// return interaction instanceof ol.interaction.DoubleClickZoom;
|
||
// });
|
||
// // 移除原始地图双击事件
|
||
// this.map.removeInteraction(interaction);
|
||
|
||
|
||
// 矢量地图源
|
||
let vectorSource = new VectorSource();
|
||
// 矢量地图
|
||
this.drawPlanningPathLayer = new VectorLayer({
|
||
source: vectorSource,
|
||
style: new Style({
|
||
stroke: new Stroke({
|
||
width: 6,
|
||
color: [237, 212, 0, 0.8],
|
||
}),
|
||
})
|
||
});
|
||
|
||
let modify = new interaction.Modify({
|
||
source: vectorSource
|
||
});
|
||
|
||
this.map.addInteraction(modify);
|
||
|
||
// 绘制图形类型
|
||
// Point 点
|
||
// LineString 线
|
||
// Polygon 多边形
|
||
// Circle 圆
|
||
|
||
this.draw = new interaction.Draw({
|
||
source: vectorSource,
|
||
type: this.pcDrawType
|
||
});
|
||
|
||
this.map.addInteraction(this.draw);
|
||
|
||
// 创建一个Snap控件，并加入到Map对象中
|
||
this.snap = new interaction.Snap({
|
||
source: vectorSource
|
||
});
|
||
this.map.addLayer(this.drawPlanningPathLayer);
|
||
|
||
this.map.addInteraction(this.snap);
|
||
|
||
this.draw.on('drawend', (e) => {
|
||
if (!this.isCanDraw) {
|
||
return;
|
||
}
|
||
|
||
Dialog.confirm({
|
||
title: '绘制完成',
|
||
message: '取消则会重新绘制',
|
||
})
|
||
.then(() => {
|
||
|
||
// on confirm
|
||
const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
|
||
|
||
let pointList = []
|
||
|
||
featureGeoJson.geometry.coordinates.map(item => {
|
||
const _item = ol.proj.transform(item, 'EPSG:3857', 'EPSG:4326');
|
||
pointList.push(_item)
|
||
})
|
||
console.log(pointList)
|
||
|
||
window.parent.postMessage(JSON.stringify(pointList), "*");
|
||
|
||
})
|
||
.catch(() => {
|
||
// on cancel
|
||
this.drawPlanningPathLayer.getSource().clear();
|
||
// this.map.removeLayer(this.drawPlanningPathLayer)
|
||
// this.map.addLayer(this.drawPlanningPathLayer)
|
||
});
|
||
// this.map.removeInteraction(draw); // 在此处清除交互会触发地图默认的双击放大
|
||
});
|
||
|
||
},
|
||
clearPcPlanningPath() {
|
||
|
||
},
|
||
queryAllEquipment() {
|
||
service.get(`/sys/equipment/pageList`, {
|
||
params: {
|
||
pageNo: 1,
|
||
pageSize: 50
|
||
}
|
||
}).then((res) => {
|
||
if (res.status == 200) {
|
||
this.map.removeLayer(this.equipmentLayer)
|
||
this.equipmentLayer = {};
|
||
res.data.result.records.map(record => {
|
||
try {
|
||
if (record.leastLocation != null) {
|
||
this.addPointWidthCoordinate(record.leastLocation, "equipment", record)
|
||
}
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
queryAlarmList() {
|
||
|
||
service.get(`/api/alarm/list`, {
|
||
params: {
|
||
sendStatus: 1,
|
||
pageNo: 1,
|
||
pageSize: 50
|
||
}
|
||
}).then((res) => {
|
||
if (res.status == 200) {
|
||
clearInterval(this.alarmAnimation)
|
||
this.alarmAnimation = null
|
||
this.map.removeLayer(this.alarmLayer)
|
||
this.alarmLayer = {};
|
||
res.data.result.records.map(record => {
|
||
|
||
try {
|
||
if (record.location != null) {
|
||
this.addPointWidthCoordinate(record.location, "alarm", record)
|
||
}
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
})
|
||
}
|
||
|
||
})
|
||
},
|
||
switchFullScreen() {
|
||
location.href = "uniwebview://action?function=switchBigScreen"
|
||
},
|
||
addPointWidthCoordinate(coordinate, type, record) {
|
||
|
||
coordinate = coordinate.split(",")
|
||
|
||
coordinate = ol.proj.transform(coordinate, 'EPSG:4326', 'EPSG:3857');
|
||
|
||
// console.log("================addPointWidthCoordinate",coordinate)
|
||
|
||
if (type == 'alarm') {
|
||
if (Object.keys(this.alarmLayer).length == 0) {
|
||
// 创建图层
|
||
this.alarmLayer = new VectorLayer({
|
||
source: new VectorSource(),
|
||
});
|
||
// 图层添加到地图上
|
||
this.map.addLayer(this.alarmLayer);
|
||
var flag = true
|
||
this.alarmAnimation = setInterval(() => {
|
||
flag = !flag
|
||
this.alarmLayer.setVisible(flag)
|
||
}, 900);
|
||
}
|
||
|
||
const feature = new Feature({
|
||
geometry: new Point(coordinate),
|
||
data: record,
|
||
type: 'alarm'
|
||
});
|
||
// 设置要素的图标
|
||
feature.setStyle(
|
||
new Style({
|
||
// 设置图片效果
|
||
image: new Icon({
|
||
src: getStatisFileUrl("/map/icon_paishuibeng_h.png"),
|
||
// anchor: [0.5, 0.5],
|
||
scale: 0.4,
|
||
}),
|
||
})
|
||
);
|
||
// 要素添加到地图图层上
|
||
this.alarmLayer.getSource().addFeature(feature);
|
||
|
||
}
|
||
if (type == 'equipment') {
|
||
if (Object.keys(this.equipmentLayer).length == 0) {
|
||
// 创建图层
|
||
this.equipmentLayer = new VectorLayer({
|
||
source: new VectorSource(),
|
||
});
|
||
// 图层添加到地图上
|
||
this.map.addLayer(this.equipmentLayer);
|
||
}
|
||
if (record.isOnline == "true") {
|
||
const feature = new Feature({
|
||
geometry: new Point(coordinate),
|
||
data: record,
|
||
type: 'equipment'
|
||
});
|
||
// 设置要素的图标
|
||
feature.setStyle(
|
||
new Style({
|
||
// 设置图片效果
|
||
image: new Icon({
|
||
src: getStatisFileUrl("/map/Group_29@2x.png"),
|
||
// anchor: [0.5, 0.5],
|
||
scale: 0.4,
|
||
}),
|
||
})
|
||
);
|
||
// 要素添加到地图图层上
|
||
this.equipmentLayer.getSource().addFeature(feature);
|
||
}
|
||
if (record.isOnline == "false") {
|
||
const feature = new Feature({
|
||
geometry: new Point(coordinate),
|
||
data: record,
|
||
type: 'equipment'
|
||
});
|
||
// 设置要素的图标
|
||
feature.setStyle(
|
||
new Style({
|
||
// 设置图片效果
|
||
image: new Icon({
|
||
src: getStatisFileUrl("/map/Group_30@2x.png"),
|
||
// anchor: [0.5, 0.5],
|
||
scale: 0.4,
|
||
}),
|
||
})
|
||
);
|
||
// 要素添加到地图图层上
|
||
this.equipmentLayer.getSource().addFeature(feature);
|
||
}
|
||
if (record.isAlarm == false) {
|
||
const feature = new Feature({
|
||
geometry: new Point(coordinate),
|
||
data: record,
|
||
type: 'equipment'
|
||
});
|
||
// 设置要素的图标
|
||
feature.setStyle(
|
||
new Style({
|
||
// 设置图片效果
|
||
image: new Icon({
|
||
src: getStatisFileUrl("/map/Group_190514@2x.png"),
|
||
// anchor: [0.5, 0.5],
|
||
scale: 0.4,
|
||
}),
|
||
})
|
||
);
|
||
feature.on("click", (event) => {
|
||
console.log("告警图标被点击")
|
||
console.log(event)
|
||
})
|
||
// 要素添加到地图图层上
|
||
this.equipmentLayer.getSource().addFeature(feature);
|
||
}
|
||
}
|
||
|
||
|
||
},
|
||
alarmClickAction(index) {
|
||
if (index == 1) {
|
||
location.href = "uniwebview://action?function=alarmConfirmAction¶ms1=" + this.alarmDetailsData.id;
|
||
}
|
||
if (index == 2) {
|
||
location.href = "uniwebview://action?function=alarmPlanningAction¶ms1=" + this.alarmDetailsData.id + "¶ms2=" + this.alarmDetailsData.location;
|
||
}
|
||
},
|
||
getAlarmDetails(id) {
|
||
service.get(`/api/alarm/queryById`, {
|
||
params: {
|
||
id: id
|
||
}
|
||
}).then((res) => {
|
||
if (res.status == 200) {
|
||
console.log(res.data.result)
|
||
this.navigationEndPoint = res.data.result.location.split(",")
|
||
this.addPointWidthCoordinate(res.data.result.location, "alarm", res.data.result)
|
||
setInterval(() => {
|
||
this.planningPath()
|
||
}, 2000)
|
||
|
||
}
|
||
|
||
})
|
||
|
||
},
|
||
drawPcPostMessageDataLayer(_list=[],type="") {
|
||
this.map.removeLayer(this.drawPlanningPathLayer);
|
||
this.pcDrawType = "LineString";
|
||
const tempGeometryList = []
|
||
|
||
this.parentPostMessageData.map(item => {
|
||
tempGeometryList.push(ol.proj.transform(item,'EPSG:4326','EPSG:3857'))
|
||
})
|
||
|
||
if(_list.length!=0){
|
||
_list.map(item => {
|
||
tempGeometryList.push(ol.proj.transform(item,'EPSG:4326','EPSG:3857'))
|
||
})
|
||
}
|
||
|
||
console.log(tempGeometryList)
|
||
|
||
const polygonGeometry = new LineString(tempGeometryList)
|
||
const polygonFeature = new Feature({
|
||
geometry: polygonGeometry
|
||
})
|
||
polygonFeature.setStyle(new Style({
|
||
stroke: new Stroke({
|
||
color:type=="realyPathLine"?'#FF4D36':'#ffa502',
|
||
width: 5
|
||
}),
|
||
fill: new Fill({
|
||
color: '#ffffff00'
|
||
})
|
||
}))
|
||
this.drawPlanningPathLayer.getSource().addFeature(polygonFeature)
|
||
this.map.addLayer(this.drawPlanningPathLayer)
|
||
},
|
||
removeMapLayerById(id) {
|
||
this.map.getLayers().forEach(function (layer) {
|
||
if (layer instanceof ol.layer.Tile && layer.get('id') === id) {
|
||
this.map.removeLayer(layer);
|
||
}
|
||
});
|
||
},
|
||
getAreaList() {
|
||
let vectorSource = new VectorSource();
|
||
// 矢量地图
|
||
this.drawPlanningPathLayer = new VectorLayer({
|
||
source: vectorSource,
|
||
style: new Style({
|
||
stroke: new Stroke({
|
||
width: 6,
|
||
color: [237, 212, 0, 0.8],
|
||
})
|
||
})
|
||
});
|
||
|
||
this.map.addLayer(this.drawPlanningPathLayer);
|
||
|
||
service.get(`/api/patrol/area/list`, {}).then((res) => {
|
||
if (res.status == 200) {
|
||
console.log(res.data.result.records)
|
||
res.data.result.records.map((record) => {
|
||
console.log(record)
|
||
this.drawAreaLayer(record.areaName, JSON.parse(record.area))
|
||
})
|
||
}
|
||
|
||
})
|
||
|
||
},
|
||
drawAreaLayer(title, areaList) {
|
||
console.log(title)
|
||
areaList = areaList[0]
|
||
console.log(areaList)
|
||
|
||
const tempGeometryList = []
|
||
|
||
areaList.map(item => {
|
||
tempGeometryList.push(ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857'))
|
||
})
|
||
|
||
tempGeometryList.push(tempGeometryList[0])
|
||
|
||
const _list = [tempGeometryList]
|
||
|
||
console.log(_list)
|
||
|
||
const polygonGeometry = new Polygon(_list)
|
||
|
||
console.log(polygonGeometry)
|
||
|
||
const polygonFeature = new Feature({
|
||
geometry: polygonGeometry,
|
||
name: title
|
||
})
|
||
|
||
polygonFeature.setStyle(new Style({
|
||
stroke: new Stroke({
|
||
color: '#ffa502',
|
||
width: 2
|
||
}),
|
||
fill: new Fill({
|
||
color: 'rgba(255,255,0,0.1)'
|
||
}),
|
||
text: new Text({
|
||
testAlign: 'center',
|
||
text: title,
|
||
font: 'bold 20px 微软雅黑',
|
||
fill: new Fill({
|
||
color: '#ffa502',
|
||
})
|
||
})
|
||
}))
|
||
this.drawPlanningPathLayer.getSource().addFeature(polygonFeature)
|
||
},
|
||
showMoveHistory() {
|
||
// 矢量地图源
|
||
let vectorSource = new VectorSource();
|
||
// 矢量地图
|
||
this.drawPlanningPathLayer = new VectorLayer({
|
||
source: vectorSource,
|
||
style: new Style({
|
||
stroke: new Stroke({
|
||
width: 6,
|
||
color: [237, 212, 0, 0.8],
|
||
}),
|
||
})
|
||
});
|
||
|
||
|
||
service.get(`/sys/equipment/trajectory`, {
|
||
params: {
|
||
uerId: this.moveUserId,
|
||
startTime:dayjs(this.startDate).format('YYYY-MM-DD HH:mm'),
|
||
endTime:dayjs(this.endDate).format('YYYY-MM-DD HH:mm'),
|
||
pageSize:1000
|
||
}
|
||
}).then((res) => {
|
||
if (res.status == 200) {
|
||
this.showendDate=false
|
||
this.showstartDate=false
|
||
const _list=[]
|
||
res.data.result.records.map((record,index) => {
|
||
if(index==0){
|
||
const startPoint = ol.proj.transform(record.location.split(","),'EPSG:4326','EPSG:3857')
|
||
this.map.getView().animate({
|
||
center:startPoint,
|
||
duration:1000,
|
||
})
|
||
}
|
||
_list.push(record.location.split(","))
|
||
})
|
||
this.parentPostMessageData=_list
|
||
this.drawPcPostMessageDataLayer()
|
||
|
||
this.map.removeInteraction(this.draw)
|
||
this.map.removeInteraction(this.snap)
|
||
}
|
||
|
||
})
|
||
},
|
||
endDateConfirm(value) {
|
||
console.log(dayjs(value))
|
||
console.log(value)
|
||
console.log(this.startDate)
|
||
if (dayjs(value).isBefore(dayjs(this.startDate))) {
|
||
console.log("结束时间早于开始时间")
|
||
Notify({ type: 'warning', message: '结束时间不可早于开始时间' });
|
||
} else {
|
||
console.log("开始时间早于结束时间")
|
||
this.endDate = dayjs(value).toDate()
|
||
console.log("打印结束时间")
|
||
console.log(this.endDate)
|
||
setTimeout(()=>{
|
||
this.showMoveHistory()
|
||
},1000)
|
||
|
||
}
|
||
},
|
||
startDateConfirm(value) {
|
||
console.log(dayjs(value))
|
||
console.log(value)
|
||
console.log(this.endDate)
|
||
if (dayjs(value).isBefore(dayjs(this.endDate))) {
|
||
this.startDate = dayjs(value).toDate()
|
||
setTimeout(()=>{
|
||
this.showMoveHistory()
|
||
},1000)
|
||
console.log("开始时间早于结束时间")
|
||
} else {
|
||
Notify({ type: 'warning', message: '开始时间不可晚于结束时间' });
|
||
console.log("结束时间早于开始时间")
|
||
}
|
||
},
|
||
getPatrolInstanceDetailsById(){
|
||
// 矢量地图源
|
||
let vectorSource = new VectorSource();
|
||
// 矢量地图
|
||
this.drawPlanningPathLayer = new VectorLayer({
|
||
source: vectorSource,
|
||
style: new Style({
|
||
stroke: new Stroke({
|
||
width: 6,
|
||
color: [237, 212, 0, 0.8],
|
||
}),
|
||
})
|
||
});
|
||
|
||
service.get(`/middlegroundPeriodicWorkOrderInstance/queryById`, {
|
||
params: {
|
||
id: this.busId
|
||
}
|
||
}).then((res) => {
|
||
if (res.status == 200) {
|
||
this.showendDate=false
|
||
this.showstartDate=false
|
||
let longitudeLatitude=res.data.result.location;
|
||
longitudeLatitude=JSON.parse(longitudeLatitude)
|
||
|
||
const startPoint = ol.proj.transform(longitudeLatitude[0],'EPSG:4326','EPSG:3857')
|
||
this.map.getView().animate({
|
||
center:startPoint,
|
||
duration:1000,
|
||
zoom:this.mapZoom
|
||
})
|
||
|
||
this.drawPcPostMessageDataLayer(longitudeLatitude,"planPathLine")
|
||
|
||
this.map.removeInteraction(this.draw)
|
||
this.map.removeInteraction(this.snap)
|
||
this.getPatrolInstanceRealyPath(res.data.result.actualStartTime,res.data.result.actualEndTime);
|
||
setInterval(()=>{
|
||
this.getPatrolInstanceRealyPath(res.data.result.actualStartTime,res.data.result.actualEndTime);
|
||
},2000)
|
||
}
|
||
|
||
})
|
||
},
|
||
getPatrolInstanceRealyPath(startTime,endTime){
|
||
|
||
|
||
if(this.pointMoveTimer!=null){
|
||
clearTimeout(this.pointMoveTimer)
|
||
this.pointMoveTimer=null;
|
||
}
|
||
|
||
//TODO 如果开始时间和结束时间都相等，则不进行任何查询
|
||
if(startTime==endTime){
|
||
return false;
|
||
}
|
||
|
||
if(endTime==null){
|
||
endTime=dayjs().format('YYYY-MM-DD HH:mm')
|
||
}
|
||
|
||
service.get(`/sys/equipment/trajectory`, {
|
||
params: {
|
||
pageSize:1000,
|
||
uerId: this.moveUserId,
|
||
startTime:dayjs().startOf('day').format('YYYY-MM-DD HH:mm'),
|
||
endTime:dayjs().endOf('day').format('YYYY-MM-DD HH:mm'),
|
||
busId:this.busId
|
||
}
|
||
}).then((res) => {
|
||
if (res.status == 200) {
|
||
this.showendDate=false
|
||
this.showstartDate=false
|
||
const _list=[]
|
||
|
||
let records = res.data.result.records;
|
||
records.reverse();
|
||
|
||
records.map((record,index) => {
|
||
if(index==0){
|
||
// const startPoint = ol.proj.transform(record.location.split(","),'EPSG:4326','EPSG:3857')
|
||
// this.map.getView().animate({
|
||
// center:startPoint,
|
||
// duration:1000,
|
||
// zoom:this.mapZoom
|
||
// })
|
||
}
|
||
let _location = record.location.split(",");
|
||
_location = ol.proj.transform(_location, 'EPSG:4326', 'EPSG:3857')
|
||
_list.push(_location)
|
||
record.location = _location;
|
||
})
|
||
|
||
this.onceDistance=Math.ceil(records.length/15)
|
||
|
||
this.routeOriginList = records;
|
||
|
||
this.route = new LineString(_list)
|
||
|
||
setTimeout(() => {
|
||
this.moveFromStartToEnd()
|
||
}, 1000)
|
||
|
||
|
||
|
||
// this.drawPcPostMessageDataLayer(_list,"realyPathLine")
|
||
|
||
this.map.removeInteraction(this.draw)
|
||
this.map.removeInteraction(this.snap)
|
||
}
|
||
|
||
})
|
||
},
|
||
moveFromStartToEnd() {
|
||
if (Object.keys(this.vectorLayer).length > 0) {
|
||
this.map.removeLayer(this.vectorLayer);
|
||
this.geometryMove={}
|
||
this.vectorLayer={}
|
||
}
|
||
|
||
this.geometryMove = new Point(this.route.getFirstCoordinate());
|
||
|
||
this.featureMove = new Feature({
|
||
type: "featureMove",
|
||
geometry: this.geometryMove,
|
||
});
|
||
|
||
|
||
this.vectorLayer = new VectorLayer({
|
||
source: new VectorSource({
|
||
features: [
|
||
new Feature({
|
||
type: "route",
|
||
geometry: this.route,
|
||
}),
|
||
// this.featureMove,
|
||
new Feature({
|
||
type: "startPoint",
|
||
geometry: new Point(this.route.getFirstCoordinate()),
|
||
}),
|
||
new Feature({
|
||
type: "endPoint",
|
||
geometry: new Point(this.route.getLastCoordinate()),
|
||
}),
|
||
],
|
||
}),
|
||
style: (feature) => {
|
||
return this.styles[feature.get("type")];
|
||
},
|
||
});
|
||
|
||
|
||
this.map.addLayer(this.vectorLayer);
|
||
|
||
|
||
// this.startAnimation();
|
||
|
||
}
|
||
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
// 非核心已删除
|
||
#content {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
#map {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.ol-touch .ol-control button {
|
||
font-size: 26px;
|
||
}
|
||
|
||
.actionList {
|
||
position: fixed;
|
||
bottom: 0px;
|
||
left: 0px;
|
||
height: 200px;
|
||
width: 100%;
|
||
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
|
||
}
|
||
|
||
|
||
.addAlarmPoint {
|
||
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
z-index: 100;
|
||
|
||
.addAlarmPointNext {
|
||
width: 80%;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
background-color: #369FFF;
|
||
border-radius: 20px;
|
||
font-size: 26px;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.pcPlanningPath {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 30px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
z-index: 100;
|
||
|
||
.pcPlanningPathNext {
|
||
width: 80%;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background-color: #369FFF;
|
||
border-radius: 20px;
|
||
font-size: 16px;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.mobileHomePageExpandBtn {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 30px;
|
||
z-index: 100;
|
||
}
|
||
|
||
.iconColorList {
|
||
position: fixed;
|
||
bottom: 0px;
|
||
left: 0px;
|
||
z-index: 2;
|
||
text-align: left;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
padding: 10px;
|
||
|
||
background-color: rgba(0,0,0,0.4);
|
||
|
||
.iconColorListItem {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: start;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
span {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 20px;
|
||
margin-right: 20px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.alarmDetailsOverlayWrapper {
|
||
background-color: white;
|
||
position: fixed;
|
||
bottom: 0px;
|
||
left: 0px;
|
||
width: 100%;
|
||
z-index: 999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
font-size: 14px;
|
||
padding-top: 50px;
|
||
|
||
.alarmDetailsBox {
|
||
margin-left: 20px;
|
||
|
||
.title {
|
||
width: 100%;
|
||
font-weight: 900;
|
||
font-size: 10px;
|
||
text-align: left;
|
||
}
|
||
|
||
.alarmDetailsBoxItem {
|
||
font-weight: 700;
|
||
width: 100%;
|
||
text-align: left;
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
|
||
.btnList {
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
|
||
.btnItem {
|
||
background-color: #369FFF;
|
||
border-radius: 10px;
|
||
width: 40%;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.timeSelectBox {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
z-index: 100;
|
||
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
}
|
||
</style>
|