<template>
|
<div class="m-left-mobileCortrolButtom">
|
<div class="m-l-inbut"><i class="el-icon-s-help"></i></div>
|
<div class="m-l-inbut">
|
<!-- <i class="el-icon-s-flag"></i> -->
|
<el-dropdown trigger="click" @command="handleCommand">
|
<span class="el-dropdown-link icons">
|
<i class="el-icon-s-flag icon"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
v-for="(item, index) in flagList"
|
:key="index"
|
:command="item"
|
>{{ item.name }}</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
<div class="m-l-inbut" @click="openBigPopupAfter">
|
<i class="el-icon-menu"></i>
|
</div>
|
<div class="m-l-inbut" @click="goOn"><i class="el-icon-location"></i></div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import { getIp, getUsers } from "@/api/mobile/ip/index";
|
export default {
|
name: "mobileCortrolButtom",
|
data() {
|
return {
|
DC: "",
|
flagList: [
|
{
|
name: "西东大街",
|
position: [121.49500690245499, 31.23791479409691],
|
},
|
{
|
name: "长江路",
|
position: [121.52498934134815, 31.227021231622302],
|
},
|
{
|
name: "科技园",
|
position: [121.48624368075255, 31.197575925580797],
|
},
|
{
|
name: "逸夫楼",
|
position: [121.52391709005656, 31.276115901927575],
|
},
|
],
|
};
|
},
|
computed: {
|
...mapGetters(["mviewer"]),
|
},
|
created() {
|
this.DC = global.DC;
|
},
|
mounted() {},
|
methods: {
|
handleCommand(command) {
|
let that = this;
|
console.log(command, "定位");
|
// 定位
|
this.mviewer.zoomToPosition(
|
new that.DC.Position(
|
command.position[0],
|
command.position[1] - 0.012,
|
1530,
|
0,
|
-45
|
)
|
);
|
},
|
openBigPopupAfter() {
|
this.$store.commit("MSET_BIGPOPUPAFTER", true);
|
},
|
goOn() {
|
console.log(returnCitySN["cip"]);
|
let data = {
|
ip: returnCitySN["cip"],
|
key: "7WKBZ-QDY62-WEEUG-C7KUN-ADAF5-L5BKZ",
|
};
|
console.log("定位", data.ip);
|
// getIp(data).then((res) => {
|
// // getUsers(data).then((res) => {
|
// console.log(res);
|
// });
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang='scss'>
|
.m-left-mobileCortrolButtom {
|
position: fixed;
|
bottom: 20px;
|
left: 20px;
|
z-index: 200;
|
.m-l-inbut {
|
float: left;
|
width: 39px;
|
height: 39px;
|
background-color: #c9302c;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
font-size: 22px;
|
margin-left: 12px;
|
border-radius: 5px;
|
.icons {
|
display: inline-block;
|
width: 100%;
|
height: 100%;
|
}
|
.icon {
|
font-size: 20px;
|
color: #fff;
|
&::before {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
</style>
|
