109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<!--
|
|
* @Author: lixin
|
|
* @Date: 2023-5-27
|
|
* @Description: 测量工具: 测距、测面、测高
|
|
-->
|
|
<template>
|
|
<div class="measure-list">
|
|
<div
|
|
v-for="(item, index) in controlList"
|
|
:key="index"
|
|
:class="selectedTool === item.id ? 'selceted' : ''"
|
|
class="measure-bar"
|
|
@click="handleTool(item)"
|
|
>
|
|
<img
|
|
:src="selectedTool === item.id ? getImageUrl(item.id + '_press'): getImageUrl(item.id)"
|
|
>
|
|
<p
|
|
:class="selectedTool === item.id ? 'selceted' : ''"
|
|
class="measure-text"
|
|
>{{ item.label }}</p>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { reactive, toRefs } from 'vue'
|
|
export default {
|
|
emits: ['measure'],
|
|
setup(props, { emit }) {
|
|
const data = reactive({
|
|
controlList: [
|
|
{ id: 'distance', label: '测距' },
|
|
{ id: 'area', label: '测面' },
|
|
{ id: 'height', label: '测高' },
|
|
{ id: 'clear', label: '清除' }
|
|
],
|
|
selectedTool: null
|
|
})
|
|
|
|
const getImageUrl = (src) => {
|
|
return new URL(`../../../../assets/basemap/measure/${src}.png`, import.meta.url).href
|
|
}
|
|
|
|
const handleTool = (info) => {
|
|
if (info?.id !== data.selectedTool) {
|
|
data.selectedTool = info?.id
|
|
}
|
|
emit('measure', data.selectedTool)
|
|
}
|
|
|
|
const cancelMeasure = () => {
|
|
data.selectedTool = null
|
|
}
|
|
|
|
return {
|
|
...toRefs(data),
|
|
getImageUrl,
|
|
handleTool,
|
|
cancelMeasure
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.measure-list {
|
|
position: absolute;
|
|
top: 105px;
|
|
right: 20px;
|
|
width: 280px;
|
|
height: 90px;
|
|
cursor: pointer;
|
|
background: url("../../../../assets/basemap/measure/celiang_bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.measure-bar{
|
|
width:60px;
|
|
height:60px;
|
|
background:rgba(1,25,63,0.15);
|
|
border:1px solid rgba(0,223,244,1);
|
|
border-radius:2px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin: 0 5px;
|
|
|
|
.measure-text{
|
|
font-size:12px;
|
|
font-family:Microsoft YaHei;
|
|
font-weight:400;
|
|
color: #FFFFFF;
|
|
}
|
|
.measure-text.selceted{
|
|
color: #ffbb00;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.measure-bar.selceted{
|
|
border:1px solid #ffbb00;
|
|
}
|
|
</style>
|
|
|