This commit is contained in:
weipengfei 2024-01-11 19:08:31 +08:00
parent a7d92cda03
commit 8768cd61f9
8 changed files with 235 additions and 3 deletions

View File

@ -9,6 +9,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"ant-design-vue": "^1.7.8",
"axios": "^0.21.1",
"core-js": "^2.6.9",

9
src/api/datav.js Normal file
View File

@ -0,0 +1,9 @@
import $http from '../assets/js/http'
export function positioningList(department_code) {
return $http.post('project/project/positioning_list', {department_code: department_code});
}
export function positioningMember(data) {
return $http.post('project/project/positioning_member', data);
}

View File

@ -67,6 +67,10 @@ Vue.directive('disable-click', {
},
});
window._AMapSecurityConfig = {
securityJsCode:'e8b6cb44e8e431d68052c8e10db99264',
}
Vue.config.productionTip = false;
Vue.use(Antd);
Vue.component('WrapperContent', WrapperContent);

View File

@ -15,8 +15,11 @@ const common = {
}
},
actions: {
GET_MENU({commit}) {
GET_MENU({commit}, data) {
return getMenuForUser().then(res => {
if(data!=1) res.data = res.data.filter((item) => {
return item.id==120 || item.id==121
})
setStore('menu', res.data);
commit('SET_MENU', res.data);
});

210
src/views/datav/index.vue Normal file
View File

@ -0,0 +1,210 @@
<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";
export default {
name: "datav",
data() {
return {
map: null,
Amap: null,
visibleTaskCopied: false,
now_date: "",
now_user: {
member_code: "",
avatar: "",
name: "全部",
},
member_list: [],
};
},
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) {
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),
});
}
});
});
},
initList() {
if(!this.now_user.member_code||!this.now_date) return;
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;
//
let polyline = new AMap.Polyline({
path: path,
strokeColor: "#52c41a",
strokeWeight: 5,
strokeOpacity: 1,
strokeStyle: "solid",
zIndex: 50,
});
polyline.setMap(this.map);
});
},
},
};
</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>

View File

@ -326,9 +326,9 @@
},
menuModelClick(event) {
//
console.log(event);
let that = this;
that.menu.forEach(function (v, k) {
console.log(v);
if (v.id == event.key) {
that.menus = v.children;
let turnPath = '/';

View File

@ -383,7 +383,7 @@
}
console.log(currentOrganization);
await app.$store.dispatch('setCurrentOrganization', currentOrganization);
await app.$store.dispatch('GET_MENU').then(() => {
await app.$store.dispatch('GET_MENU', obj.userInfo.authorize).then(() => {
app.loginSuccess(res, currentOrganization);
});
} else {

View File

@ -2,6 +2,11 @@
# yarn lockfile v1
"@amap/amap-jsapi-loader@^1.0.1":
version "1.0.1"
resolved "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz#9ec4b4d5d2467eac451f6c852e35db69e9f9f0c0"
integrity sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==
"@ampproject/remapping@^2.2.0":
version "2.2.1"
resolved "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"