feat:事件工单滚动条

张含笑

2025-08-05 c832bf2e80ac465e71b7a1c1f7a59d4252030989

 src/hooks/components/EventPopUpBox.vue

@@ -1,143 +1,163 @@
<template>
   <div class="mapPopUpBox">
      <div class="title">
         <span>{{ info.event_name }}</span>
<el-icon class="header-close" @click.stop="props.detailClick"><Warning /></el-icon>
         <el-icon class="header-close" @click.stop="props.removeLabel">
            <Close />
         </el-icon>
      </div>
      <div class="content">
         <div class="medium">
            <el-image
               class="eventImage"
               :src="getSmallImg(infoList?.link)"
               :preview-src-list="[getSmallImg(infoList?.link)]"
               fit="cover"
               preview-teleported
            ></el-image>
         </div>
  <div class="mapPopUpBox">
    <div class="title">
      <span>{{ info.event_name }}</span>
      <el-icon class="header-close" @click.stop="props.detailClick"><Warning /></el-icon>
      <el-icon class="header-close" @click.stop="props.removeLabel">
        <Close />
      </el-icon>
    </div>
    <div class="content">
      <div class="medium">
        <img
          class="quanjing"
          @click="clickpanorama(infoList)"
          v-if="infoList?.resultType === 5"
          :src="infoList?.link"
          alt=""
        />
        <el-image
          v-else
          class="eventImage"
          :src="getSmallImg(infoList?.link)"
          :preview-src-list="[getSmallImg(infoList?.link)]"
          fit="cover"
          preview-teleported
        ></el-image>
      </div>

         <div class="details">
            <div class="label">时间：</div>
            <div class="value point">
               {{
                  infoList?.create_time?.slice(5, 16).replace('-', '/') ||
                  infoList?.createTime?.slice(5, 16).replace('-', '/')
               }}
            </div>
            <div class="label">地点：</div>
            <div class="value">
               {{ _.round(infoList?.metadata?.shootPosition?.lng, 3) }}，{{
                  _.round(infoList?.metadata?.shootPosition?.lat, 3)
               }}
            </div>
         </div>
      </div>
   </div>
      <div class="details">
        <div class="label">时间：</div>
        <div class="value point">
          {{
            infoList?.create_time?.slice(5, 16).replace('-', '/') ||
            infoList?.createTime?.slice(5, 16).replace('-', '/')
          }}
        </div>
        <div class="label">地点：</div>
        <div class="value">
          {{ _.round(infoList?.metadata?.shootPosition?.lng, 3) }}，{{
            _.round(infoList?.metadata?.shootPosition?.lat, 3)
          }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElImage, ElIcon } from 'element-plus'
import { Close,Warning } from '@element-plus/icons-vue'
import _ from 'lodash'
import EventBus from '@/utils/eventBus';
import { ElImage, ElIcon } from 'element-plus';
import { Close, Warning } from '@element-plus/icons-vue';
import _ from 'lodash';
import { getShowImg, getSmallImg } from '@/utils/util';
const props = defineProps(['data', 'removeLabel','detailClick'])
const loading = ref(true)

const props = defineProps(['data', 'removeLabel', 'detailClick']);
const loading = ref(true);
import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; //全景
const emit = defineEmits(['update:panoramaParamsShow', 'update:panoramaParamsUrl']);
const info = ref({
   event_name: '',
   status: 1,
   url: '1',
   longitude: '',
   latitude: '',
   create_time: '04/01 12:41',
})
const infoList = props.data
onMounted(async () => {})
  event_name: '',
  status: 1,
  url: '1',
  longitude: '',
  latitude: '',
  create_time: '04/01 12:41',
});
const infoList = props.data;
const clickpanorama = val => {
  // 通过事件总线发送全景参数
  EventBus.emit('open-panorama', {
    show: true,
    url: val.link,
  });
  // 保留原有事件触发，确保兼容性
  emit('update:panoramaParamsShow', true);
  emit('update:panoramaParamsUrl', val.link);
};
onMounted(async () => {});
</script>

<style scoped lang="scss">
.mapPopUpBox {
   width: 271px;
   height: 153px;
   // background: url('@/assets/images/dataCenter/datamap/popUpBox.png') no-repeat center / 100% 100%;
       border-radius: 20px;
    background-color: #fff;
  width: 271px;
  height: 153px;
  // background: url('@/assets/images/dataCenter/datamap/popUpBox.png') no-repeat center / 100% 100%;
  border-radius: 20px;
  background-color: #fff;

   padding: 13px 13px 1px 13px;
   pointer-events: all;
  padding: 13px 13px 1px 13px;
  pointer-events: all;

   .title {
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
      font-weight: 400;
      font-size: 18px;
      line-height: 16px;
      background: linear-gradient(180deg, #a8e5fb 0%, #e6f8ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -moz-background-clip: text;
      -moz-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: end;
  .title {
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 16px;
    background: linear-gradient(180deg, #a8e5fb 0%, #e6f8ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: end;

      .header-close {
         width: 20px;
         height: 100%;
         line-height: 100%;
         display: flex;
         align-items: center;
         color: black;
         pointer-events: all;
         cursor: pointer;
      }
   }
    .header-close {
      width: 20px;
      height: 100%;
      line-height: 100%;
      display: flex;
      align-items: center;
      color: black;
      pointer-events: all;
      cursor: pointer;
    }
  }

   .content {
      height: 102px;
      width: 240px;
      display: flex;
      align-items: center;
  .content {
    height: 102px;
    width: 240px;
    display: flex;
    align-items: center;

      .medium {
         height: 102px;
         width: 120px;
         margin-right: 10px;
    .medium {
      height: 102px;
      width: 120px;
      margin-right: 10px;

         > img,
         video,
         div {
            width: 100%;
            height: 100%;
         }
      }
      > img,
      video,
      div {
        width: 100%;
        height: 100%;
      }
    }

      .details {
         .label {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: black;
            line-height: 16px;
            margin-bottom: 2px;
         }
    .details {
      .label {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: black;
        line-height: 16px;
        margin-bottom: 2px;
      }

         .value {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: black;
            line-height: 16px;
            margin-bottom: 2px;
         }
      .value {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: black;
        line-height: 16px;
        margin-bottom: 2px;
      }

         .point {
            margin-bottom: 14px;
         }
      }
   }
      .point {
        margin-bottom: 14px;
      }
    }
  }
}
</style>