This commit is contained in:
parent
a7d92cda03
commit
8768cd61f9
|
@ -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",
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -67,6 +67,10 @@ Vue.directive('disable-click', {
|
|||
},
|
||||
});
|
||||
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode:'e8b6cb44e8e431d68052c8e10db99264',
|
||||
}
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
Vue.use(Antd);
|
||||
Vue.component('WrapperContent', WrapperContent);
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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", // 申请好的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) {
|
||||
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; /* 设置文字的外阴影为黄色,水平偏移量为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>
|
|
@ -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 = '/';
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue