fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 src/views/Home/RSide.vue

@@ -1,55 +1,92 @@
<template>
  <div class="ai-chat">
   <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" />

    <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">
    <img class="positioning" src="../../assets/images/self-positioning.png" alt="" @mouseenter="enterHover(0)" @mouseleave="logIndex=3">
    <img class="measuring-scale" src="../../assets/images/measuring-scale.png" alt="" @mouseenter="enterHover(1)" @mouseleave="logIndex=3">
    <img class="layer" src="../../assets/images/layer.png" alt="" @mouseenter="enterHover(2)" @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>
</template>

<script setup>
import vDrag from '@/directive/drag'
let logIndex = ref(3);
const enterHover = (value) => {
  logIndex.value = value;
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 visible = ref(false);
let pressStart = 0;
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(); // 记录按下时间
};
   pressStart = Date.now() // 记录按下时间
}

const handleMouseUp = () => {
  const pressDuration = Date.now() - pressStart; // 计算按下时长
  if (pressDuration < 150) {
    // 如果按下时间小于200ms，认为是点击
    visible.value = !visible.value;
  }
};
   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">
@@ -63,11 +100,9 @@
    height: 68px;
    display: block;
  };


  .chat {
    position: fixed;
    bottom: 330px;
    top: 638px;
    height: 124px;
    width: 100px;
    user-select: none;
@@ -76,45 +111,47 @@
  }
}
.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;
  }
   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,
.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;
   bottom: 242px;
}
.r-side-measuring {
  bottom: 182px;
   bottom: 182px;
}
.r-side-layer {
  bottom: 122px;
   bottom: 122px;
}

</style>