This commit is contained in:
parent
a7d92cda03
commit
8768cd61f9
|
@ -9,6 +9,7 @@
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
"ant-design-vue": "^1.7.8",
|
"ant-design-vue": "^1.7.8",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"core-js": "^2.6.9",
|
"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.config.productionTip = false;
|
||||||
Vue.use(Antd);
|
Vue.use(Antd);
|
||||||
Vue.component('WrapperContent', WrapperContent);
|
Vue.component('WrapperContent', WrapperContent);
|
||||||
|
|
|
@ -15,8 +15,11 @@ const common = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
GET_MENU({commit}) {
|
GET_MENU({commit}, data) {
|
||||||
return getMenuForUser().then(res => {
|
return getMenuForUser().then(res => {
|
||||||
|
if(data!=1) res.data = res.data.filter((item) => {
|
||||||
|
return item.id==120 || item.id==121
|
||||||
|
})
|
||||||
setStore('menu', res.data);
|
setStore('menu', res.data);
|
||||||
commit('SET_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) {
|
menuModelClick(event) {
|
||||||
//点击顶部导航跳转页面
|
//点击顶部导航跳转页面
|
||||||
|
console.log(event);
|
||||||
let that = this;
|
let that = this;
|
||||||
that.menu.forEach(function (v, k) {
|
that.menu.forEach(function (v, k) {
|
||||||
console.log(v);
|
|
||||||
if (v.id == event.key) {
|
if (v.id == event.key) {
|
||||||
that.menus = v.children;
|
that.menus = v.children;
|
||||||
let turnPath = '/';
|
let turnPath = '/';
|
||||||
|
|
|
@ -383,7 +383,7 @@
|
||||||
}
|
}
|
||||||
console.log(currentOrganization);
|
console.log(currentOrganization);
|
||||||
await app.$store.dispatch('setCurrentOrganization', 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);
|
app.loginSuccess(res, currentOrganization);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -2,6 +2,11 @@
|
||||||
# yarn lockfile v1
|
# 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":
|
"@ampproject/remapping@^2.2.0":
|
||||||
version "2.2.1"
|
version "2.2.1"
|
||||||
resolved "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
|
resolved "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
|
||||||
|
|
Loading…
Reference in New Issue