This commit is contained in:
parent
e8b3954b8d
commit
c45c747be9
|
@ -45,6 +45,18 @@ const router = new Router({
|
|||
component: Index,
|
||||
children: routes
|
||||
},
|
||||
{
|
||||
name: 'data_v',
|
||||
path: '/data_v',
|
||||
component: resolve => require(['@/views/datav/data_v'], resolve),
|
||||
meta: {model: 'error'},
|
||||
},
|
||||
{
|
||||
name: 'copy_v',
|
||||
path: '/copy_v',
|
||||
component: resolve => require(['@/views/datav/copy_v'], resolve),
|
||||
meta: {model: 'error'},
|
||||
},
|
||||
// {
|
||||
// name: 'login',
|
||||
// path: '/login',
|
||||
|
|
|
@ -0,0 +1,218 @@
|
|||
<template>
|
||||
<div class="datav-index">
|
||||
<div id="container" style="width: 100vw"></div>
|
||||
<div class="btn-box">
|
||||
<a-dropdown :trigger="['click']">
|
||||
<template #overlay>
|
||||
<a-menu @click="handleMenuClick" style="width: 160px">
|
||||
<a-menu-item :key="index" v-for="(item, index) in member_list">
|
||||
<div class="menu-item-d">
|
||||
<a-avatar :src="item.avatar" icon="user" size="small" />
|
||||
<a class="muted name">{{ item.name }}</a>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button style="min-width: 100px">
|
||||
<div class="menu-item-d">
|
||||
<a-avatar :src="now_user.avatar" icon="user" size="small" />
|
||||
<a class="muted name">{{ now_user.name }}</a>
|
||||
</div>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<a-date-picker
|
||||
v-model="now_date"
|
||||
format="MM月DD日"
|
||||
:allowClear="false"
|
||||
@change="changeTime"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from "lodash";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { positioningList, positioningMember } from "@/api/datav";
|
||||
import {
|
||||
del,
|
||||
forbid,
|
||||
list as getMembers,
|
||||
resume,
|
||||
liaisonMan,
|
||||
} from "../../api/user";
|
||||
import { notice } from '../../assets/js/notice';
|
||||
|
||||
export default {
|
||||
name: "datav",
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
Amap: null,
|
||||
visibleTaskCopied: false,
|
||||
now_date: "",
|
||||
now_user: {
|
||||
member_code: "",
|
||||
avatar: "",
|
||||
name: "全部",
|
||||
},
|
||||
member_list: [],
|
||||
markers: [],
|
||||
polyline: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.now_date = "";
|
||||
this.getMembers();
|
||||
},
|
||||
mounted() {
|
||||
this.initMap();
|
||||
},
|
||||
methods: {
|
||||
getMembers() {
|
||||
getMembers().then((res) => {
|
||||
this.member_list = res.data.list;
|
||||
});
|
||||
},
|
||||
formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key,首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
||||
plugins: ["AMap.Geocoder"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
||||
Loca: {
|
||||
version: "2.0.0",
|
||||
},
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("container", {
|
||||
// 设置地图容器id
|
||||
viewMode: "3D", // 是否为3D地图模式
|
||||
zoom: 15, // 初始化地图级别
|
||||
center: [105.433211, 28.913861], // 初始化地图中心点位置
|
||||
mapStyle: "amap://styles/darkblue",
|
||||
});
|
||||
|
||||
this.initMaker();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
handleMenuClick(e) {
|
||||
this.now_user = this.member_list[e.key];
|
||||
this.initList();
|
||||
},
|
||||
changeTime(e) {
|
||||
console.log(this.now_date);
|
||||
this.initList();
|
||||
},
|
||||
initMaker() {
|
||||
positioningList().then((res) => {
|
||||
// 添加标记点
|
||||
res.data.forEach((item) => {
|
||||
if (item.positioning) {
|
||||
let marker = new AMap.Marker({
|
||||
position: item.positioning.split(","),
|
||||
map: this.map,
|
||||
content: `
|
||||
<div class="marker-d">
|
||||
<img src="${
|
||||
item.avatar ||
|
||||
"https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f7d49202401111649248163.png"
|
||||
}" />
|
||||
<div class="text">
|
||||
<div>${item.name}</div>
|
||||
<div>更新时间:${item.date}</div>
|
||||
<div>停留时间:${item.date}</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
offset: new AMap.Pixel(-20, -20),
|
||||
});
|
||||
this.markers.push(marker);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
initList() {
|
||||
if(!this.now_user.member_code||!this.now_date) return;
|
||||
this.map.remove(this.markers);
|
||||
if(this.polyline)this.polyline.setMap(null);
|
||||
positioningMember({
|
||||
code: this.now_user.member_code,
|
||||
date: this.formatDate(new Date(this.now_date||Date.now())),
|
||||
}).then((res) => {
|
||||
let path = res.data.map((item) => {
|
||||
return item.split(",");
|
||||
})||[];
|
||||
|
||||
if(path.length==0) return notice({title: '该成员当日无轨迹信息'}, 'error', 3000);
|
||||
// 绘制轨迹
|
||||
this.polyline = new AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: "#52c41a",
|
||||
strokeWeight: 5,
|
||||
strokeOpacity: 1,
|
||||
strokeStyle: "solid",
|
||||
zIndex: 50,
|
||||
});
|
||||
this.polyline.setMap(this.map);
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
return notice({title: '该成员当日无轨迹信息'}, 'error', 3000);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.datav-index {
|
||||
position: relative;
|
||||
}
|
||||
.marker-d {
|
||||
width: 260px;
|
||||
img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid yellow;
|
||||
}
|
||||
.text {
|
||||
background: rgba(#0c3e6d, 0.6);
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
div {
|
||||
color: white; /* 设置文字颜色为白色 */
|
||||
// text-shadow: 1px 1px 2px yellow; /* 设置文字的外阴影为黄色,水平偏移量为2px,垂直偏移量为2px */
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-box {
|
||||
position: relative;
|
||||
}
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#container {
|
||||
height: calc(100vh - 66px);
|
||||
}
|
||||
.menu-item-d {
|
||||
.name {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,334 @@
|
|||
<template>
|
||||
<div class="datav-index">
|
||||
<div id="container" style="width: 100vw"></div>
|
||||
<div class="btn-box">
|
||||
<a-dropdown :trigger="['click']">
|
||||
<template #overlay>
|
||||
<a-menu @click="handleMenuClick" style="width: 160px">
|
||||
<a-menu-item :key="index" v-for="(item, index) in member_list">
|
||||
<div class="menu-item-d">
|
||||
<a-avatar :src="item.avatar" icon="user" size="small" />
|
||||
<a class="muted name">{{ item.name }}</a>
|
||||
<span v-if="index%3!=0" class="line_on">• 在线</span>
|
||||
<span v-else class="line_off">• 离线</span>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button style="min-width: 100px">
|
||||
<div class="menu-item-d">
|
||||
<a-avatar :src="now_user.avatar" icon="user" size="small" />
|
||||
<a class="muted name">{{ now_user.name }}</a>
|
||||
</div>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<a-date-picker
|
||||
v-model="now_date"
|
||||
format="MM月DD日"
|
||||
:allowClear="false"
|
||||
@change="changeTime"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from "lodash";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { positioningList, positioningMember } from "@/api/datav";
|
||||
import {
|
||||
del,
|
||||
forbid,
|
||||
list as getMembers,
|
||||
resume,
|
||||
liaisonMan,
|
||||
} from "../../api/user";
|
||||
import { notice } from '../../assets/js/notice';
|
||||
|
||||
export default {
|
||||
name: "datav",
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
Amap: null,
|
||||
visibleTaskCopied: false,
|
||||
now_date: "",
|
||||
now_user: {
|
||||
member_code: "",
|
||||
avatar: "",
|
||||
name: "全部",
|
||||
},
|
||||
member_list: [],
|
||||
markers: [],
|
||||
polyline: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.now_date = "";
|
||||
this.getMembers();
|
||||
},
|
||||
mounted() {
|
||||
this.initMap();
|
||||
},
|
||||
methods: {
|
||||
getMembers() {
|
||||
getMembers().then((res) => {
|
||||
this.member_list = res.data.list;
|
||||
});
|
||||
},
|
||||
formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key,首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
||||
plugins: ["AMap.Geocoder"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
||||
Loca: {
|
||||
version: "2.0.0",
|
||||
},
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("container", {
|
||||
// 设置地图容器id
|
||||
viewMode: "3D", // 是否为3D地图模式
|
||||
zoom: 15, // 初始化地图级别
|
||||
center: [105.433211, 28.913861], // 初始化地图中心点位置
|
||||
mapStyle: "amap://styles/darkblue",
|
||||
});
|
||||
|
||||
this.initMaker();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
handleMenuClick(e) {
|
||||
this.now_user = this.member_list[e.key];
|
||||
this.initList();
|
||||
},
|
||||
changeTime(e) {
|
||||
console.log(this.now_date);
|
||||
this.initList();
|
||||
},
|
||||
initMaker() {
|
||||
positioningList().then((res) => {
|
||||
// 添加标记点
|
||||
res.data.forEach((item) => {
|
||||
if (item.positioning) {
|
||||
let marker = new AMap.Marker({
|
||||
position: item.positioning.split(","),
|
||||
map: this.map,
|
||||
content: `
|
||||
<div class="marker-d">
|
||||
<img src="${
|
||||
item.avatar ||
|
||||
"https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f7d49202401111649248163.png"
|
||||
}" />
|
||||
<div class="text">
|
||||
<div>${item.name}</div>
|
||||
<div>更新时间:${item.date}</div>
|
||||
<div>停留时间:${item.date}</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
offset: new AMap.Pixel(-20, -20),
|
||||
});
|
||||
this.markers.push(marker);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
initList() {
|
||||
if(!this.now_user.member_code||!this.now_date) return;
|
||||
this.map.remove(this.markers);
|
||||
if(this.polyline)this.polyline.setMap(null);
|
||||
positioningMember({
|
||||
code: this.now_user.member_code,
|
||||
date: this.formatDate(new Date(this.now_date||Date.now())),
|
||||
}).then((res) => {
|
||||
let path = res.data.map((item) => {
|
||||
return item.split(",");
|
||||
})||[];
|
||||
|
||||
if(path.length==0) return notice({title: '该成员当日无轨迹信息'}, 'error', 3000);
|
||||
// 绘制轨迹
|
||||
this.polyline = new AMap.Polyline({
|
||||
path: path,
|
||||
strokeColor: "#52c41a",
|
||||
strokeWeight: 5,
|
||||
strokeOpacity: 1,
|
||||
strokeStyle: "solid",
|
||||
zIndex: 50,
|
||||
});
|
||||
this.polyline.setMap(this.map);
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
return notice({title: '该成员当日无轨迹信息'}, 'error', 3000);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.marker-d {
|
||||
width: 260px;
|
||||
img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid yellow;
|
||||
}
|
||||
.text {
|
||||
background: rgba(#0c3e6d, 0.6);
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
div {
|
||||
color: white; /* 设置文字颜色为白色 */
|
||||
// text-shadow: 1px 1px 2px yellow; /* 设置文字的外阴影为黄色,水平偏移量为2px,垂直偏移量为2px */
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.p-box {
|
||||
position: relative;
|
||||
}
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.datav-index{
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
#container {
|
||||
position: absolute;
|
||||
top: -2vh;
|
||||
height: 104vh;
|
||||
}
|
||||
.menu-item-d {
|
||||
.name {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.line_on{
|
||||
color: rgb(9, 233, 9);
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.line_off{
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉框
|
||||
.ant-dropdown-open, .ant-dropdown-open:hover{
|
||||
background: #0a1a29;
|
||||
color: #fff !important;
|
||||
.name{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.ant-dropdown-trigger, .ant-dropdown-trigger:hover{
|
||||
background: #0a1a29;
|
||||
color: #fff !important;
|
||||
.name{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.ant-dropdown-content, .ant-dropdown-content:hover{
|
||||
background: #0a1a29;
|
||||
color: #fff !important;
|
||||
.name{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.ant-btn:hover, .ant-btn:focus, .ant-btn:active, .ant-btn.active{
|
||||
background: #0a1a29;
|
||||
color: #fff !important;
|
||||
.name{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.ant-dropdown-menu-item:hover{
|
||||
background-color: rgba(#0c3e6d, 0.8);
|
||||
color: #fff !important;
|
||||
.name{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 日期选择器
|
||||
.ant-input{
|
||||
background: #0a1a29;
|
||||
color: #fff !important;
|
||||
}
|
||||
.anticon.anticon-calendar.ant-calendar-picker-icon{
|
||||
color: #fff;
|
||||
}
|
||||
.ant-calendar.ant-calendar-picker-container-content{
|
||||
background: #0a1a29;
|
||||
.ant-calendar-column-header-inner{
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-calendar-date{
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-calendar-date:hover{
|
||||
color: #fff !important;
|
||||
background-color: rgba(#0c3e6d, 0.8);
|
||||
}
|
||||
.ant-calendar-today-btn {
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-calendar-year-select{
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-calendar-month-select{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.ant-calendar-picker-input.ant-input{
|
||||
// height: 40px;
|
||||
}
|
||||
.ant-calendar .ant-calendar-ok-btn{
|
||||
background: rgba(#0c3e6d, 0.8);
|
||||
border-color: rgba(#0c3e6d, 0.8);
|
||||
|
||||
}
|
||||
.ant-calendar-today .ant-calendar-date {
|
||||
background: rgba(#0c3e6d, 0.8);
|
||||
border-color: rgba(#0c3e6d, 0.8);
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.ant-calendar-selected-day .ant-calendar-date {
|
||||
background: rgba(#0c3e6d, 0.8);
|
||||
border-color: #0095bc;
|
||||
}
|
||||
.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn-disabled{
|
||||
color: #202020;
|
||||
}
|
||||
.ant-calendar-today-btn {
|
||||
color: #202020;
|
||||
}
|
||||
.ant-input:hover,
|
||||
.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled){
|
||||
border-color: #0095bc;
|
||||
}
|
||||
.ant-input:focus,
|
||||
.ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled) {
|
||||
border-color: #0095bc;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
|
@ -28,12 +28,12 @@
|
|||
</a-menu-item>
|
||||
</a-menu>
|
||||
<div class="right-menu">
|
||||
<div class="m-r-lg" v-if="config.WS_URI">
|
||||
<!-- <div class="m-r-lg" v-if="config.WS_URI">
|
||||
<a-badge title="当前在线" :count="online" showZero :numberStyle="{backgroundColor: '#52c41a'} "
|
||||
:offset="[10,0]">
|
||||
<a-icon type="team"/>
|
||||
</a-badge>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="action action-organization" v-if="organizationList.length > 1">
|
||||
<header-select></header-select>
|
||||
</div>
|
||||
|
@ -327,6 +327,9 @@
|
|||
menuModelClick(event) {
|
||||
//点击顶部导航跳转页面
|
||||
console.log(event);
|
||||
if(event.key==173){ // 跳转大屏
|
||||
return window.open('/#/data_v', '_blank');
|
||||
}
|
||||
let that = this;
|
||||
that.menu.forEach(function (v, k) {
|
||||
if (v.id == event.key) {
|
||||
|
|
Loading…
Reference in New Issue