<template>
|
<div class="ai-chat" v-show="isHideBottomIcon">
|
<el-popover placement="bottom" :visible="visible" :width="200" trigger="click">
|
<template #reference>
|
<div class="chat" id="chatID" v-drag:chatID @mousedown="handleMouseDown" @mouseup="handleMouseUp" />
|
</template>
|
<div>
|
快和我对话吧
|
<el-input />
|
</div>
|
</el-popover>
|
<img class="chat-bottom" src="../../assets/images/chat-bottom.png" alt="" />
|
</div>
|
<div class="r-side" v-show="isHideBottomIcon">
|
<img
|
v-for="(item, index) in images"
|
:key="index"
|
:class="item.class"
|
:src="activeIndex === index ? item.activeSrc : item.src"
|
alt=""
|
@click="activeChange(index)"
|
@mouseenter="enterHover(index)"
|
@mouseleave="logIndex = 3"
|
/>
|
</div>
|
<div v-if="logIndex === 0" class="r-side-positioning">返回当前位置</div>
|
<div v-if="logIndex === 1" class="r-side-measuring">量尺</div>
|
<div v-if="logIndex === 2" class="r-side-layer">切换地图模式</div>
|
<MeasuringDistance v-if="activeIndex === 1" />
|
|
</template>
|
|
<script setup>
|
import vDrag from '@/directive/drag'
|
import MeasuringDistance from '@/components/MeasuringDistance.vue'
|
import dw from '@/assets/images/rSide/dw.png'
|
import dw1 from '@/assets/images/rSide/dw1.png'
|
import lc from '@/assets/images/rSide/lc.png'
|
import lc1 from '@/assets/images/rSide/lc1.png'
|
import tc from '@/assets/images/rSide/tc.png'
|
import tc1 from '@/assets/images/rSide/tc1.png'
|
import cesiumOperation from '@/utils/cesium-tsa'
|
import { ElMessage } from 'element-plus'
|
|
let logIndex = ref(3)
|
const enterHover = value => {
|
logIndex.value = value
|
}
|
const { flyTo } = cesiumOperation()
|
|
const store = useStore()
|
const currentAreaPosition = computed(() => store.state.home.currentAreaPosition)
|
// 事件概况 展开隐藏
|
const isHideBottomIcon = computed(() => store.state.common.isHideBottomIcon)
|
|
let activeIndex = ref(null)
|
const activeChange = value => {
|
if (value === 0) {
|
flyTo(currentAreaPosition.value, 0, currentAreaPosition.value.height)
|
}
|
if (value === 1) {
|
activeIndex.value = activeIndex.value === 1 ? null : value
|
}
|
if (value === 2) {
|
ElMessage.warning('加急开发中...')
|
activeIndex.value = activeIndex.value === 2 ? null : value
|
}
|
}
|
const visible = ref(false)
|
let pressStart = 0
|
|
const handleMouseDown = () => {
|
pressStart = Date.now() // 记录按下时间
|
}
|
|
const handleMouseUp = () => {
|
const pressDuration = Date.now() - pressStart // 计算按下时长
|
if (pressDuration < 150) {
|
// 如果按下时间小于200ms，认为是点击
|
visible.value = !visible.value
|
}
|
}
|
|
// 添加: 定义图片数组
|
const images = [
|
{ class: 'positioning', src: dw, activeSrc: dw1 },
|
{ class: 'measuring-scale', src: lc, activeSrc: lc1 },
|
{ class: 'layer', src: tc, activeSrc: tc1 },
|
]
|
</script>
|
|
<style scoped lang="scss">
|
.ai-chat {
|
position: absolute;
|
bottom: 309px;
|
right: 440px;
|
cursor: pointer;
|
img {
|
width: 100px;
|
height: 68px;
|
display: block;
|
};
|
.chat {
|
position: fixed;
|
top: 638px;
|
height: 124px;
|
width: 100px;
|
user-select: none;
|
z-index: 999;
|
background: url('@/assets/images/chat.png') no-repeat center / 100% 100%;
|
}
|
}
|
.r-side {
|
position: absolute;
|
bottom: 122px;
|
right: 463px;
|
cursor: pointer;
|
img {
|
display: block;
|
width: 48px;
|
height: 48px;
|
}
|
.positioning {
|
position: relative;
|
bottom: 24px;
|
}
|
.measuring-scale {
|
position: relative;
|
bottom: 12px;
|
}
|
}
|
.r-side-positioning,
|
.r-side-measuring,
|
.r-side-layer {
|
position: absolute;
|
right: 514px;
|
width: 130px;
|
height: 48px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 18px;
|
color: #ffffff;
|
line-height: 48px;
|
text-align: center;
|
background: url('@/assets/images/cursor.png');
|
}
|
.r-side-positioning {
|
bottom: 242px;
|
}
|
.r-side-measuring {
|
bottom: 182px;
|
}
|
.r-side-layer {
|
bottom: 122px;
|
}
|
</style>
|
