|
|
<template>
|
|
|
<dia-log ref="dialog" width="45%" :title="title" :type="1">
|
|
|
<div class="personage-track">
|
|
|
<div class="track-title">
|
|
|
<div class="titlebg"></div>
|
|
|
<span class="name">{{ person ? personItem.userName : "执法一队1号车" }}</span>
|
|
|
<span>{{ person ? "执法1队队员" : "苏A568974" }}</span>
|
|
|
</div>
|
|
|
<div class="track-content">
|
|
|
<div class="oneList">
|
|
|
<div class="item" :class="person ? 'item-left' : 'car-item'">
|
|
|
<div class="ball"></div>
|
|
|
<div class="content">
|
|
|
{{ person ? "人员编号：" : "车辆编号："
|
|
|
}}<span>{{
|
|
|
person ? personItem.userId : "201128881111100"
|
|
|
}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div class="item car-item" v-if="!person">
|
|
|
<div class="ball"></div>
|
|
|
<div class="content">驾驶员姓名：<span>张三</span></div>
|
|
|
</div> -->
|
|
|
<div class="item">
|
|
|
<div class="ball"></div>
|
|
|
<div class="content">
|
|
|
当前状态：<span>{{ person ? personItem.status == '1' ? '在线' : personItem.status == '0' ? '离线' : '' : "行驶中" }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="twoList">
|
|
|
<div class="item">
|
|
|
<div class="ball"></div>
|
|
|
<div class="content">
|
|
|
时间范围：
|
|
|
<div class="time-query">
|
|
|
<div class="interval-select">
|
|
|
<div class="star-time">
|
|
|
<el-date-picker
|
|
|
v-model="queryTime.fromTime"
|
|
|
type="datetime"
|
|
|
align="right"
|
|
|
:clearable="false"
|
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
placeholder="开始时间"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<div class="symbol"></div>
|
|
|
<div class="end-time">
|
|
|
<el-date-picker
|
|
|
v-model="queryTime.toTime"
|
|
|
type="datetime"
|
|
|
align="right"
|
|
|
:clearable="false"
|
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
placeholder="结束时间"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
<img
|
|
|
class="data_icon"
|
|
|
src="@/assets/images/timeIcon.png"
|
|
|
alt=""
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="btns reset" @click="reset">
|
|
|
<img src="@/assets/images/reset.png" alt="" />
|
|
|
<span>重置</span>
|
|
|
</div>
|
|
|
<div class="btns" @click="query">
|
|
|
<img src="@/assets/images/inquire.png" alt="" />
|
|
|
<span>查询</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="threeList">
|
|
|
<div class="item">
|
|
|
<div class="item-top">
|
|
|
<div class="ball"></div>
|
|
|
<div class="contentTitle">轨迹地图：</div>
|
|
|
</div>
|
|
|
<div class="contentMap">
|
|
|
<!-- <div id="personageTrackMap">
|
|
|
|
|
|
</div> -->
|
|
|
<el-amap
|
|
|
v-loading="loading"
|
|
|
element-loading-background="rgba(16, 49, 92, 0.8)"
|
|
|
ref="personMap"
|
|
|
map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518"
|
|
|
:center="center"
|
|
|
:zoom="zoom"
|
|
|
:zooms="zooms"
|
|
|
@init="init"
|
|
|
view-mode="3D"
|
|
|
:extra-options="{ vectorMapForeign: 'style_zh_cn' }"
|
|
|
class="amap-person"
|
|
|
>
|
|
|
<!-- 江宁GeoJson文件 -->
|
|
|
<!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="jiangningGeojson" :polygon-options="polygonOptions" :visible="true" :draggable="false"></el-amap-geojson> -->
|
|
|
</el-amap>
|
|
|
<!-- <img src="@/assets/images/minMap.png" alt="" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</dia-log>
|
|
|
</template>
|
|
|
<script>
|
|
|
import diaLog from "../../components/dialog/index.vue";
|
|
|
import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
|
|
|
|
|
|
import OneGJ02 from "@/utils/mapJson/1GJ02.json";
|
|
|
import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
|
|
|
import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
|
|
|
import FourGJ02 from "@/utils/mapJson/4GJ02.json";
|
|
|
import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
|
|
|
import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
|
|
|
// import L from "leaflet";
|
|
|
// import "@/utils/lib/leaflet.ChineseTmsProviders.js";
|
|
|
// import "@/utils/lib/leaflet-tilelayer-colorizr.js";
|
|
|
import { getLocInfoByImei } from "@/api/bigScreenApi"
|
|
|
import { getCenter } from "@/utils/amap"
|
|
|
export default {
|
|
|
components: { diaLog },
|
|
|
data() {
|
|
|
return {
|
|
|
title: "人员行程轨迹",
|
|
|
person: false,
|
|
|
personItem: null,
|
|
|
queryTime: {
|
|
|
fromTime: "",
|
|
|
toTime: "",
|
|
|
},
|
|
|
heightStyle: {
|
|
|
height: "500px",
|
|
|
},
|
|
|
zoom: 12,
|
|
|
zooms:[10,18],
|
|
|
center: [118.835418, 31.863971],
|
|
|
map:null,
|
|
|
polygonOptions: {
|
|
|
strokeColor: '#00C5EC', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
|
|
|
fillColor: 'rgba(64,175,255,0.4)' // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
|
|
|
},
|
|
|
jiangninggeo:jiangninggeo,
|
|
|
|
|
|
globalMap: null,
|
|
|
track: null,
|
|
|
mapLayer1: null,
|
|
|
loading: false,
|
|
|
layers:{
|
|
|
layer:null,
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
init(map){
|
|
|
this.map = map;
|
|
|
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
|
|
|
this.layers.layer = new AMap.OverlayGroup();
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
var geojson1 = new AMap.Polygon({
|
|
|
path:OneGJ02.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text1 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(OneGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: OneGJ02.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
var geojson2 = new AMap.Polygon({
|
|
|
path:TwoGJ02.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text2 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(TwoGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: TwoGJ02.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
var geojson3 = new AMap.Polygon({
|
|
|
path:ThreeGJ02.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text3 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(ThreeGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: ThreeGJ02.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
var geojson4 = new AMap.Polygon({
|
|
|
path:FourGJ02.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
|
|
|
var text4 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(FourGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: FourGJ02.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
var geojson5 = new AMap.Polygon({
|
|
|
path:kaifaqu.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text5 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(kaifaqu.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: kaifaqu.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
|
|
|
var geojson6 = new AMap.Polygon({
|
|
|
path:ruanjianyuan.features[0].geometry.coordinates[0][0],
|
|
|
strokeColor: '#00C5EC',
|
|
|
fillColor: '#00AEFF',
|
|
|
fillOpacity: 0.4,
|
|
|
// fillOpacity: 0.3,
|
|
|
editable:false,
|
|
|
visible:true,
|
|
|
})
|
|
|
var text6 = new AMap.Text({
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
position: getCenter(ruanjianyuan.features[0].geometry.coordinates[0][0]),
|
|
|
anchor: 'bottom-center',
|
|
|
text: ruanjianyuan.features[0].properties.NAME,
|
|
|
style:{
|
|
|
'font-size': '16px',
|
|
|
'font-weight': 'bold',
|
|
|
'text-align': 'center',
|
|
|
'color': '#00AEFF',
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
'white-space': 'nowrap',
|
|
|
},
|
|
|
});
|
|
|
|
|
|
|
|
|
this.layers.layer.addOverlay(geojson1);
|
|
|
this.layers.layer.addOverlay(geojson2);
|
|
|
this.layers.layer.addOverlay(geojson3);
|
|
|
this.layers.layer.addOverlay(geojson4);
|
|
|
this.layers.layer.addOverlay(geojson5);
|
|
|
this.layers.layer.addOverlay(geojson6);
|
|
|
this.map.add(this.layers.layer);
|
|
|
map.setFitView();
|
|
|
})
|
|
|
},
|
|
|
initLocation(){
|
|
|
// 获取地图实例
|
|
|
const mapInstance = this.$refs.personMap.$$getInstance();
|
|
|
// 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
|
|
|
mapInstance.setFitView();
|
|
|
},
|
|
|
open(person, item) {
|
|
|
// console.log(person)
|
|
|
// console.log(item);
|
|
|
if (person == "person") {
|
|
|
this.title = "人员行程轨迹";
|
|
|
this.personItem = item;
|
|
|
this.person = true;
|
|
|
this.queryTime.fromTime = this.getCurrentTime();
|
|
|
this.queryTime.toTime = this.getCurrentTime(1);
|
|
|
this.query();
|
|
|
} else {
|
|
|
this.title = "车辆行程轨迹";
|
|
|
this.person = false;
|
|
|
}
|
|
|
this.$refs.dialog.open("1");
|
|
|
// this.$nextTick(()=>{
|
|
|
// this.initMap();
|
|
|
// })
|
|
|
},
|
|
|
Close() {
|
|
|
this.$refs.dialog.Close();
|
|
|
},
|
|
|
// 地图初始化
|
|
|
initMap() {
|
|
|
this.globalMap = L.map("personageTrackMap", {
|
|
|
center: [31.953175, 118.839514], // 地图中心[纬度，经度]
|
|
|
zoom: 18, // 地图层级
|
|
|
zoomControl: false,
|
|
|
attributionControl: false, // 右下角leaflet图标
|
|
|
doubleClickZoom: false, // 双击放大
|
|
|
scrollWheelZoom: true, // 滚轮放大
|
|
|
dragging: true,
|
|
|
renderer: L.svg(),
|
|
|
});
|
|
|
|
|
|
L.tileLayer
|
|
|
.chinaProvider("GaoDe.Normal.Map", {
|
|
|
maxZoom: 18,
|
|
|
minZoom: 5,
|
|
|
color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
|
|
|
})
|
|
|
.addTo(this.globalMap);
|
|
|
|
|
|
this.globalMap.createPane("mapLayer1");
|
|
|
this.globalMap.getPane("mapLayer1").style.zIndex = 501;
|
|
|
this.globalMap.getPane("mapLayer1").style.pointerEvents = "none";
|
|
|
this.addLayer1();
|
|
|
},
|
|
|
addLayer1() {
|
|
|
let geojson = L.geoJSON(
|
|
|
jiangninggeo,
|
|
|
{
|
|
|
style: function (feature) {
|
|
|
return {
|
|
|
color: "#00C5EC",
|
|
|
weight: 1,
|
|
|
fillColor: "rgba(64,175,255,0.4)",
|
|
|
fillOpacity: 1,
|
|
|
};
|
|
|
},
|
|
|
},
|
|
|
{ className: "jack-s" }
|
|
|
).addTo(this.globalMap);
|
|
|
// this.addMark()
|
|
|
// 获取json文件的中心位置
|
|
|
this.mapLayer1 = geojson.getBounds();
|
|
|
// 居中加载json文件
|
|
|
this.globalMap.fitBounds(this.mapLayer1);
|
|
|
},
|
|
|
// 时间重置
|
|
|
reset(){
|
|
|
Object.keys(this.queryTime).forEach(key=>{this.queryTime[key]=''})
|
|
|
if(this.map.getAllOverlays('polyline')) {
|
|
|
this.map.remove(this.map.getAllOverlays('polyline'));
|
|
|
}
|
|
|
const mapInstance = this.$refs.personMap.$$getInstance();
|
|
|
// 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
|
|
|
mapInstance.setFitView();
|
|
|
},
|
|
|
// 查询
|
|
|
query(){
|
|
|
if(!this.queryTime.fromTime) {
|
|
|
this.$modal.msgError("请选择查询的起始时间");
|
|
|
} else if(!this.queryTime.toTime) {
|
|
|
this.$modal.msgError("请选择查询的截止时间");
|
|
|
} else {
|
|
|
this.loading = true;
|
|
|
getLocInfoByImei({...this.queryTime,imei:this.personItem.imei}).then(res=>{
|
|
|
console.log(res,'行动轨迹');
|
|
|
this.loading = false;
|
|
|
if(res.code == 200 && res.data.result == '000') {
|
|
|
let arr = []
|
|
|
res.data.data.forEach(element => {
|
|
|
let arrTwo = [];
|
|
|
arrTwo[1] = element.latitude;
|
|
|
arrTwo[0] = element.longitude;
|
|
|
arr.push(arrTwo);
|
|
|
});
|
|
|
// if(this.track) {
|
|
|
// this.globalMap.removeLayer(this.track);
|
|
|
// }
|
|
|
if(this.map.getAllOverlays('polyline')) {
|
|
|
this.map.remove(this.map.getAllOverlays('polyline'));
|
|
|
}
|
|
|
this.track = new AMap.Polyline({
|
|
|
path: arr,
|
|
|
strokeColor: '#F44444',
|
|
|
strokeOpacity: 1,
|
|
|
})
|
|
|
this.map.add(this.track);
|
|
|
const mapInstance = this.$refs.personMap.$$getInstance();
|
|
|
// 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
|
|
|
mapInstance.setFitView(this.track);
|
|
|
// this.track = L.polyline(arr,{
|
|
|
// pane:'mapLayer1',
|
|
|
// // color: '#F894AF'
|
|
|
// color: 'red'
|
|
|
// }).addTo(this.globalMap)
|
|
|
|
|
|
// this.globalMap.fitBounds(this.track.getBounds());
|
|
|
} else if(res.code == 200 && res.data.msg) {
|
|
|
this.$modal.msgError(res.data.msg);
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
// 获取当前时间
|
|
|
getCurrentTime(id){
|
|
|
// 获取当前时间
|
|
|
const now = new Date();
|
|
|
|
|
|
// 获取年月日时分秒
|
|
|
const year = now.getFullYear();
|
|
|
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1，并且格式化为两位数
|
|
|
const day = String(now.getDate()).padStart(2, '0'); // 格式化为两位数
|
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
|
|
|
|
// 格式化为字符串
|
|
|
const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
const formattedTime = `${year}-${month}-${day} 00:00:00`;
|
|
|
if(id == 1) {
|
|
|
return formattedDateTime;
|
|
|
} else {
|
|
|
return formattedTime;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.personage-track {
|
|
|
.track-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
.titlebg {
|
|
|
position: absolute;
|
|
|
left: -15px;
|
|
|
top: -18px;
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
background-image: url("../../../assets/images/personnel.png");
|
|
|
background-position: center;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Medium";
|
|
|
font-weight: 500;
|
|
|
color: #e9f4ff;
|
|
|
line-height: 14px;
|
|
|
}
|
|
|
.name {
|
|
|
margin: 0 15px 0 30px;
|
|
|
}
|
|
|
}
|
|
|
.track-content {
|
|
|
margin-top: 15px;
|
|
|
padding-left: 20px;
|
|
|
display: grid;
|
|
|
grid-column: 1fr;
|
|
|
grid-row-gap: 15px;
|
|
|
.oneList {
|
|
|
display: flex;
|
|
|
.item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.ball {
|
|
|
width: 4px;
|
|
|
height: 4px;
|
|
|
background: #daebff;
|
|
|
box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
|
|
|
0px 0px 5px 0px rgba(229, 241, 255, 0.25);
|
|
|
border-radius: 20px 20px 20px 20px;
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
.content {
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Medium";
|
|
|
font-weight: 500;
|
|
|
color: #cccccc;
|
|
|
line-height: 20px;
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Medium";
|
|
|
font-weight: 500;
|
|
|
color: #e9f4ff;
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.item-left {
|
|
|
margin-right: 150px;
|
|
|
}
|
|
|
.car-item {
|
|
|
margin-right: 80px;
|
|
|
}
|
|
|
}
|
|
|
.twoList {
|
|
|
.item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.ball {
|
|
|
width: 4px;
|
|
|
height: 4px;
|
|
|
background: #daebff;
|
|
|
box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
|
|
|
0px 0px 5px 0px rgba(229, 241, 255, 0.25);
|
|
|
border-radius: 20px 20px 20px 20px;
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
.content {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Medium";
|
|
|
font-weight: 500;
|
|
|
color: #cccccc;
|
|
|
line-height: 20px;
|
|
|
.time-query {
|
|
|
background-image: url("../../../assets/images/timebg.png");
|
|
|
width: 440px;
|
|
|
height: 35px;
|
|
|
background-size: 100% 100%;
|
|
|
.interval-select {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
::v-deep .el-input__prefix {
|
|
|
display: none;
|
|
|
}
|
|
|
.star-time,
|
|
|
.end-time {
|
|
|
position: relative;
|
|
|
.data_icon {
|
|
|
position: absolute;
|
|
|
right: 5px;
|
|
|
top: 8px;
|
|
|
width: 20px;
|
|
|
}
|
|
|
::v-deep .el-date-editor {
|
|
|
background-color: transparent;
|
|
|
width: 210px;
|
|
|
.el-input__inner {
|
|
|
background-color: transparent;
|
|
|
border: none;
|
|
|
width: 100%;
|
|
|
height: 35px;
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Medium";
|
|
|
font-weight: 500;
|
|
|
color: #e9f4ff;
|
|
|
padding-left: 15px;
|
|
|
}
|
|
|
.el-input__inner::placeholder {
|
|
|
/* 在这里添加你想要修改的 placeholder 样式 */
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Regular";
|
|
|
font-weight: 400;
|
|
|
color: #d3eef2;
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: rgba(211, 238, 242, 0.2);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.symbol {
|
|
|
width: 14px;
|
|
|
height: 6px;
|
|
|
background-image: url("../../../assets/images/routeTime.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.btns {
|
|
|
width: 92px;
|
|
|
height: 35px;
|
|
|
background-image: url("../../../assets/images/inquirebg.png");
|
|
|
background-size: 100% 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
img {
|
|
|
width: 24px;
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Regular";
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
}
|
|
|
.reset {
|
|
|
background-image: url("../../../assets/images/resetbg.png");
|
|
|
margin: 0 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.threeList {
|
|
|
.item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.item-top {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.ball {
|
|
|
width: 4px;
|
|
|
height: 4px;
|
|
|
background: #daebff;
|
|
|
box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
|
|
|
0px 0px 5px 0px rgba(229, 241, 255, 0.25);
|
|
|
border-radius: 20px 20px 20px 20px;
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
.contentTitle {
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Medium";
|
|
|
font-weight: 500;
|
|
|
color: #cccccc;
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
}
|
|
|
.contentMap {
|
|
|
padding: 15px 74px 0 14px;
|
|
|
width: 100%;
|
|
|
height: 400px;
|
|
|
#personageTrackMap {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
.amap-person {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
// img {
|
|
|
// width: 100%;
|
|
|
// height: 100%;
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
