This commit is contained in:
weipengfei 2024-01-15 19:53:05 +08:00
parent e8b3954b8d
commit c45c747be9
5 changed files with 2577 additions and 2 deletions

View File

@ -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',

218
src/views/copy/index.vue Normal file
View File

@ -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", // WebKey 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; /* 2px2px */
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>

2008
src/views/datav/copy_v.vue Normal file

File diff suppressed because it is too large Load Diff

334
src/views/datav/data_v.vue Normal file
View File

@ -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", // WebKey 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; /* 2px2px */
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>

View File

@ -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) {