Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-04-18 dfac8531d4ed65183ebffcbc7f88aea16f6ac64b

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -1,9 +1,15 @@
<template>
   <div class="event-overviewdetail-right" :class="{ isMore }">
      <CommonTitle title="事件概况" :style="{width: isMore?pxToRem(820):pxToRem(404)}" />
      <CommonTitle title="事件概况" :style="{ width: isMore ? pxToRem(820) : pxToRem(404) }" />

      <div class="content">
         <img class="leftArrow" :class="isMore?'rightArrow':''" :src="isMore ? rightArrowImg : leftArrowImg" @click="leftArrowFun" alt="" />
         <img
            class="leftArrow"
            :class="isMore ? 'rightArrow' : ''"
            :src="isMore ? rightArrowImg : leftArrowImg"
            @click="leftArrowFun"
            alt=""
         />

         <el-date-picker
            class="ztzf-date-picker"
@@ -50,7 +56,7 @@
               <img class="statusItemImg" :src="item.img" alt="" />
               <div class="statusItemInfo">
                  <div class="statusItemName">{{ item.name }}</div>
                  <div class="statusItemNum" :style="{ color:item.color }">{{ item.num || 0 }}</div>
                  <div class="statusItemNum" :style="{ color: item.color }">{{ item.num || 0 }}</div>
               </div>
            </div>
         </div>
@@ -66,12 +72,7 @@

         <div class="eventList">
            <div class="eventListItem" v-for="item in list">
               <img
                  class="eventListItemImg"
                  :src="getSmallImg(item.photo_url)"
                  alt=""
                  @click="getFindImgHistory(item)"
               />
               <img class="eventListItemImg" :src="getSmallImg(item.photo_url)" alt="" @click="getFindImgHistory(item)" />
               <div class="eventListItemPosition" :title="item.address" @click="positioning(item)">
                  <img :src="positioningImg" alt="" title="点击定位" />
                  <!-- <div class="address">{{ item.address }}</div> -->
@@ -96,23 +97,32 @@
         </div>
      </div>
   </div>
   <div class="image-list" v-if="isShowBigImg" :style="{ right: isMore?pxToRem(840):pxToRem(460) }">
   <div class="image-list" v-if="isShowBigImg" :style="{ right: isMore ? pxToRem(838) : pxToRem(460) }">
      <div class="title">
         <img @click="isShowBigImg=false" src="@/assets/images/home/useEventOperate/close.png" alt="">
         <img @click="isShowBigImg = false" src="@/assets/images/home/useEventOperate/close.png" alt="" />
      </div>
      <div class="content">
         <img :src="clickImgSrc" alt="">
         <img :src="clickImgSrc" alt="" />
      </div>
      <div class="card">
         <div v-for="(item,index) in imageList">
            <div class="time-top" :class="index===selectedImgIndex?'active':''" @click="clickWeekTime(item,index)">{{ item.create_time_str }}</div>
            <div class="time-point">
               <img v-if="index===selectedImgIndex" src="@/assets/images/home/useEventOperate/point-active.png" alt="">
               <img v-else src="@/assets/images/home/useEventOperate/point.png" alt="">
         <div class="card-content">
            <div v-for="(item, index) in imageList">
               <div class="time-top" :class="index === selectedImgIndex ? 'active' : ''" @click="clickWeekTime(item, index)">
                  {{ item.create_time_str }}
               </div>
               <div class="time-point">
                  <img
                     class="active"
                     v-if="index === selectedImgIndex"
                     src="@/assets/images/home/useEventOperate/point-active.png"
                     alt=""
                  />
                  <img v-else src="@/assets/images/home/useEventOperate/point.png" alt="" />
               </div>
               <div class="time-bottom">{{ item.create_time }}</div>
            </div>
            <div class="time-bottom">{{ item.create_time }}</div>
            <div class="time-line"></div>
         </div>
         <div class="time-line"></div>
      </div>
   </div>
</template>
@@ -159,7 +169,7 @@
   size: 8,
})

const getSmallImg = (url) => {
const getSmallImg = url => {
   return url ? url.substring(0, url.lastIndexOf('.')) + '_small' + url.substring(url.lastIndexOf('.')) : ''
}

@@ -195,16 +205,16 @@
   })
}
const { flyTo } = cesiumOperation()
const longitudeOffset = ref(0);
const longitudeOffset = ref(0)
const positioning = row => {
   const longitude = Number(row.longitude)
   const latitude = Number(row.latitude)
   flyTo({ longitude: longitude, latitude:latitude + 0.0002 }, 1, 1000);
   flyTo({ longitude: longitude, latitude: latitude + 0.0008 }, 1, 1000)
}

// 事件状态+数量
const statusList = ref([
   { name: '全部状态', img: status0Img, id: undefined,few: true, color: '#FFD509' },
   { name: '全部状态', img: status0Img, id: undefined, few: true, color: '#FFD509' },
   { name: '待审核', img: status1Img, id: 2, color: '#8CFEA7' },
   { name: '待处理', img: status2Img, id: 0, few: true, color: '#FF7411' },
   { name: '处理中', img: status3Img, id: 3, few: true, color: '#FFC398' },
@@ -241,7 +251,7 @@
   params.value.start_date = start_date
   params.value.end_date = end_date
   // 提交数据，更新聚合
   store.commit('setEventTimeRang', timeArr.value);
   store.commit('setEventTimeRang', timeArr.value)
   // 重置
   getEventStatusNumFun()
   getEventList()
@@ -263,49 +273,53 @@
   }
   getEventPage(params.value, pageParams).then(res => {
      const resData = res.data.data
      list.value = (resData?.records || [])
      list.value = resData?.records || []
      total.value = resData.total
   })
}
const isShowBigImg = ref(false)
const imageList = ref([]);
const clickImgSrc = ref('');
const selectedImgIndex = ref(0);
const imageList = ref([])
const clickImgSrc = ref('')
const selectedImgIndex = ref(0)
// 点击图片放大 显示详细信息
const getFindImgHistory = (item) => {
const getFindImgHistory = item => {
   // 下半部分隐藏 右侧隐藏
   isShowBigImg.value = true
   store.commit('setHideBottomIcon', false)
   findImgHistory(item.id).then((res) => {
   findImgHistory(item.id).then(res => {
      if (res.data.code !== 0) return
      imageList.value = res.data.data
      clickImgSrc.value = res.data.data[0]?.url;
      clickImgSrc.value = res.data.data[0]?.url
   })
   positioning(item);
   positioning(item)
}
// 点击周期
const clickWeekTime = (item,index) => {
const clickWeekTime = (item, index) => {
   clickImgSrc.value = item.url
   selectedImgIndex.value = index
}

const getDateRange = unit => {
  if (unit === 'today') {
    return [dayjs().format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')];
  }
  return [dayjs().startOf(unit).format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf(unit).format('YYYY-MM-DD HH:mm:ss')];
};
   if (unit === 'today') {
      return [dayjs().format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
   }
   return [dayjs().startOf(unit).format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf(unit).format('YYYY-MM-DD HH:mm:ss')]
}

// 监听事件时间范围变化
watch(() => store.state.home.eventTimeType, (newVal) => {
   timeArr.value = getDateRange(newVal);
   const [start_date, end_date] = getDateRange(newVal);
   params.value.start_date = start_date
   params.value.end_date = end_date
   getEventStatusNumFun()
   getEventList()
   getList()
}, { immediate: false,deep: true })
watch(
   () => store.state.home.eventTimeType,
   newVal => {
      timeArr.value = getDateRange(newVal)
      const [start_date, end_date] = getDateRange(newVal)
      params.value.start_date = start_date
      params.value.end_date = end_date
      getEventStatusNumFun()
      getEventList()
      getList()
   },
   { immediate: false, deep: true }
)

onMounted(() => {
   getDeviceList()
@@ -340,11 +354,7 @@
   .content {
      width: 390px;
      height: 877px;
      background: linear-gradient(
    270deg,
    rgba(31, 62, 122, 0) 0%,
    rgba(31, 62, 122, 0.35) 21%,
    #1f3e7a 100%);
      background: linear-gradient(270deg, rgba(31, 62, 122, 0) 0%, rgba(31, 62, 122, 0.35) 21%, #1f3e7a 100%);
      display: flex;
      justify-content: space-between;
      align-content: start;
@@ -384,7 +394,14 @@
            // margin-right: 4px;

            &.active {
               background: linear-gradient( 180deg, rgba(19,80,141,0) 0%, rgba(22,56,91,0.48) 48%, #053462 98%, #259DFF 98%, #259DFF 98%);
               background: linear-gradient(
                  180deg,
                  rgba(19, 80, 141, 0) 0%,
                  rgba(22, 56, 91, 0.48) 48%,
                  #053462 98%,
                  #259dff 98%,
                  #259dff 98%
               );
            }

            .statusItemImg {
@@ -531,30 +548,46 @@
   display: flex;
   justify-content: center;
}

.image-list {
   border: 1px solid red;
   position: absolute;
   z-index: 1;
   top: 148px;

   right: 460px;
   top: 122px;
   width: 540px;
   height: 420px;
   background: #0F1929;
   // box-shadow: inset 0px -50px 50px 0px rgba(27,148,255,0.13);
   // border-radius: 0px 0px 0px 0px;
   border: 2px solid;
   border-image: linear-gradient(180deg, rgba(81, 168, 255, 0), rgba(48, 111, 202, 1), rgba(255, 255, 255, 1), rgba(27, 148, 255, 1)) 2 2;

   width: 632px;
   height: 476px;
   border: solid;
   background: #0f1929;
   z-index: 1;

   border: solid 2px transparent;
   border-radius: 20px;
   background-image: linear-gradient(#fff, #fff), linear-gradient(180deg, rgba(81, 168, 255, 1), rgba(189, 228, 255, 1));
   background-origin: border-box;
   background-clip: content-box, border-box;

   overflow: hidden;
   .title {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      text-align: right;
      right: 12px;
      // top: 12px;
      top: 0;
      right: 0;
      width: 45px;
      height: 44px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 0px 20px 0px 8px;

      img {
         width: 10px;
         height: 10px;
         width: 10.55px;
         height: 10.55px;
         cursor: pointer;
      }
   }

   .content {
      img {
         width: 100%;
@@ -562,43 +595,80 @@
         border-radius: 10px 10px 10px 10px;
      }
   }

   .card {
      background: linear-gradient( 180deg, rgba(13,30,70,0.72) 0%, #142E6B 100%);
      padding: 0px 10px 0px 10px;
      color: #BECBEA;
      display: flex;
      justify-content: space-between;
      position: absolute;
      bottom: 0px;
      width: 100%;
      .time-top {
         width: 50px;
         height: 30px;
         line-height: 30px;
         text-align: center;
         color: #ffffff;
         background: linear-gradient( 180deg, rgba(13,30,70,0.72) 0%, #142E6B 100%);
         border: 1px solid #0054D3;
         cursor: pointer;
      }
      .active {
         background: linear-gradient( 180deg, rgba(13,48,131,0.72) 0%, #023DC8 100%);
         border: 1px solid;
         border-image: linear-gradient(180deg, rgba(0, 84, 211, 1), rgba(146, 186, 245, 1)) 1 1;
      }
      .time-point {
         text-align: center;
         img {
            width: 8px;
            height: 12px;
         }
      }
      .time-line {
      height: 67px;
      background: rgba(0, 0, 0, 0.42);
      border-radius: 0px 0px 20px 20px;
      padding: 0px 6px 0px 29px;

      color: #d5d5d5;
      font-size: 14px;

      .card-content {
         display: flex;
         justify-content: space-between;

         position: absolute;
         background: linear-gradient( 82deg, rgba(23,40,79,0) 0%, #576D9F 17%, #576D9F 86%, rgba(23,40,79,0) 100%);
         height: 2px;
         top: 38px;
         width: 100%;
         left: 29px;
         width: calc(100% - 29px - 6px);
         height: 100%;

         & > div {
            position: relative;
         }

         .time-top {
            margin-top: 10px;
            line-height: 1;
            text-align: center;
            cursor: pointer;
         }

         .active {
            font-weight: 400;
            color: #ffffff;
         }

         .time-point {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 28px;
            left: 50%;
            width: 18px;
            height: 18px;
            z-index: 1;
            transform: translate(-50%, 0);

            img {
               width: 11.2px;
               height: 11.2px;
            }

            img.active {
               width: 16.89px;
               height: 16.89px;
            }
         }

         .time-bottom {
            margin-top: 20px;
         }

         .time-line {
            position: absolute;
            top: 35px;
            width: 100%;
            width: 595px;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid rgba(237, 237, 237, 0.6);
            z-index: 0;
         }
      }
   }
}