|
|
<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">张三</span>
|
|
|
<span>外地人口</span>
|
|
|
</div>
|
|
|
<div class="track-content">
|
|
|
<div class="oneList">
|
|
|
<div class="item" :class="person ? 'item-left' : 'car-item'" v-if="person">
|
|
|
<div class="ball"></div>
|
|
|
<div class="content">
|
|
|
<!-- {{ person ? "人员编号：" : "车辆编号："}} -->
|
|
|
联系方式：
|
|
|
<!-- <span>{{ person ? personItem.userId : "201128881111100" }}</span> -->
|
|
|
<span>13611111111</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="ball"></div>
|
|
|
<div class="content">
|
|
|
住址:
|
|
|
<span>临海村</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 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">
|
|
|
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
|
|
|
:path="roadline1.features[0].geometry.coordinates[0]" :zIndex="500" strokeColor="red"
|
|
|
isOutline lineCap="round" :strokeWeight="4"/>
|
|
|
|
|
|
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions"
|
|
|
:draggable="true" />
|
|
|
</el-amap>
|
|
|
<!-- <img src="@/assets/images/minMap.png" alt="" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="guijitu">
|
|
|
<div class="guijitu-item">
|
|
|
<div class="yuan"></div>
|
|
|
<div class="xian"></div>
|
|
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
|
|
<div class="shijian">2024-09-13 09:30:00</div>
|
|
|
</div>
|
|
|
<div class="guijitu-item">
|
|
|
<div class="yuan"></div>
|
|
|
<div class="xian"></div>
|
|
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
|
|
<div class="shijian">2024-09-13 09:30:00</div>
|
|
|
</div>
|
|
|
<div class="guijitu-item">
|
|
|
<div class="yuan"></div>
|
|
|
<div class="xian"></div>
|
|
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
|
|
<div class="shijian">2024-09-13 09:30:00</div>
|
|
|
</div>
|
|
|
<div class="guijitu-item">
|
|
|
<div class="yuan"></div>
|
|
|
<div class="xian"></div>
|
|
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
|
|
<div class="shijian">2024-09-13 09:30:00</div>
|
|
|
</div>
|
|
|
<div class="guijitu-item">
|
|
|
<div class="yuan"></div>
|
|
|
<div class="xian"></div>
|
|
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
|
|
<div class="shijian">2024-09-13 09:30:00</div>
|
|
|
</div>
|
|
|
<div class="guijitu-item">
|
|
|
<div class="yuan"></div>
|
|
|
<div class="xian"></div>
|
|
|
<img src="@/assets/images/jiankong.jpg" alt="">
|
|
|
<div class="shijian">2024-09-13 09:30:00</div>
|
|
|
</div>
|
|
|
<div class="jiantou">
|
|
|
<i class="el-icon-caret-right"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</dia-log>
|
|
|
</template>
|
|
|
<script>
|
|
|
import diaLog from "@/views/components/Eldialog/index.vue";
|
|
|
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
|
|
|
import roadline1 from "@/assets/mapjson/Chaangshazhen/myxiuanlu.geojson"
|
|
|
|
|
|
export default {
|
|
|
components: { diaLog },
|
|
|
data() {
|
|
|
return {
|
|
|
title: "人员行程轨迹",
|
|
|
person: false,
|
|
|
personItem: null,
|
|
|
queryTime: {
|
|
|
fromTime: "",
|
|
|
toTime: "",
|
|
|
},
|
|
|
zoom: 11,
|
|
|
zooms: [3, 20],
|
|
|
center: [121.298563, 32.451807],
|
|
|
map: null,
|
|
|
polygonOptions: {
|
|
|
strokeColor: '#00C5EC', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
|
|
|
fillColor: 'rgba(64,175,255,0.4)' // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
|
|
|
},
|
|
|
polygonOptionsTwo: {
|
|
|
strokeColor: '#ffffff', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
|
|
|
fillColor: 'rgba(64,175,255,1)' // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
|
|
|
},
|
|
|
changshazhen: changshazhen,
|
|
|
roadline1: roadline1,
|
|
|
track: null,
|
|
|
layers: {
|
|
|
layer: null,
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
init(map) {
|
|
|
this.map = map;
|
|
|
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
|
|
|
this.layers.layer = new AMap.OverlayGroup();
|
|
|
},
|
|
|
|
|
|
open(person, item) {
|
|
|
// console.log(person)
|
|
|
// console.log(item);
|
|
|
|
|
|
if (person == "person") {
|
|
|
this.title = "重点人员行程轨迹";
|
|
|
this.person = true;
|
|
|
this.queryTime.fromTime = this.getCurrentTime();
|
|
|
this.queryTime.toTime = this.getCurrentTime(1);
|
|
|
this.query();
|
|
|
} else {
|
|
|
this.queryTime.fromTime = this.getCurrentTime();
|
|
|
this.queryTime.toTime = this.getCurrentTime(1);
|
|
|
this.title = "重点人员行程轨迹";
|
|
|
this.person = false;
|
|
|
}
|
|
|
this.$refs.dialog.open("1");
|
|
|
// this.$nextTick(()=>{
|
|
|
// this.initMap();
|
|
|
// })
|
|
|
},
|
|
|
Close() {
|
|
|
this.$refs.dialog.Close();
|
|
|
},
|
|
|
|
|
|
// 时间重置
|
|
|
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() {
|
|
|
|
|
|
},
|
|
|
// 获取当前时间
|
|
|
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: 350px;
|
|
|
|
|
|
#personageTrackMap {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
.amap-person {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
// img {
|
|
|
// width: 100%;
|
|
|
// height: 100%;
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.guijitu {
|
|
|
width: 90%;
|
|
|
overflow: auto;
|
|
|
display: flex;
|
|
|
color: #fff;
|
|
|
font-size: 14px;
|
|
|
font-family: "Source Han Sans CN-Medium";
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
.jiantou {
|
|
|
margin-top: 3px;
|
|
|
margin-left: -20px;
|
|
|
color: #ffffff;
|
|
|
|
|
|
.el-icon-caret-right {
|
|
|
font-size: 26px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.guijitu-item {
|
|
|
display: flex;
|
|
|
/* 使用 Flexbox 布局 */
|
|
|
flex-direction: column;
|
|
|
/* 垂直排列 */
|
|
|
align-items: center;
|
|
|
/* 水平居中对齐 */
|
|
|
justify-content: center;
|
|
|
/* 垂直居中对齐 */
|
|
|
/* 设置高度以便居中 */
|
|
|
padding: 10px;
|
|
|
position: relative;
|
|
|
|
|
|
.yuan {
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
background: #fff;
|
|
|
border-radius: 50%;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.xian {
|
|
|
position: absolute;
|
|
|
top: 16px;
|
|
|
width: 100%;
|
|
|
height: 1px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
