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

shuishen

2025-04-16 115bd56702e2ce09b7a7c1e6bb5e93e2f6174cdf

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -1,9 +1,9 @@
<template>
   <div class="event-overviewdetail-right" :class="{ isMore }">
      <CommonTitle title="工单列表" />
      <CommonTitle title="事件概况" :style="{right: isMore?pxToRem(410):pxToRem(0)}" />

      <div class="content">
         <img class="leftArrow" :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,12 +50,12 @@
               <img class="statusItemImg" :src="item.img" alt="" />
               <div class="statusItemInfo">
                  <div class="statusItemName">{{ item.name }}</div>
                  <div class="statusItemNum">{{ item.num || 0 }}</div>
                  <div class="statusItemNum" :style="{ color:item.color }">{{ item.num || 0 }}</div>
               </div>
            </div>
         </div>

         <el-checkbox-group v-model="params.event_keys" @change="getList">
         <el-checkbox-group v-show="isMore" v-model="params.event_keys" @change="getList">
            <el-checkbox v-for="item in eventList" :value="item.status" :key="item.dictKey">
               <template #default>
                  <span class="eventListItemCheckboxName">{{ item.name }}</span>
@@ -70,6 +70,7 @@
                  class="eventListItemImg"
                  :src="getSmallImg(item.photo_url)"
                  alt=""
                  @click="getFindImgHistory(item.id)"
               />
               <div class="eventListItemPosition" :title="item.address" @click="positioning(item)">
                  <img :src="positioningImg" alt="" title="点击定位" />
@@ -95,6 +96,25 @@
         </div>
      </div>
   </div>
   <div class="image-list" v-if="isShowBigImg">
      <div class="title">
         <img @click="isShowBigImg=false" src="@/assets/images/home/useEventOperate/close.png" alt="">
      </div>
      <div class="content">
         <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>
            <div class="time-bottom">{{ item.create_time }}</div>
         </div>
         <div class="time-line"></div>
      </div>
   </div>
</template>
<script setup>
import status0Img from '@/assets/images/home/eventOverviewDetail/status0.png'
@@ -110,7 +130,7 @@
import dayjs from 'dayjs'
import { selectDevicePage } from '@/api/home/machineNest'
import { getMultipleDictionary } from '@/api/system/dictbiz'
import { getEvenNum, getEventPage, getEventStatusNum } from '@/api/home/event'
import { getEvenNum, getEventPage, getEventStatusNum, findImgHistory } from '@/api/home/event'
import cesiumOperation from '@/utils/cesium-tsa'
import CommonTitle from '@/components/CommonTitle.vue'
import { pxToRem } from '@/utils/rem'
@@ -148,6 +168,8 @@
   isMore.value = !isMore.value
   params.value.size = isMore.value ? 16 : 8
   params.value.current = 1
   // 下半部分隐藏 右侧隐藏
   store.commit('setHideBottomIcon', !isMore.value)
   getList()
}

@@ -181,12 +203,12 @@

// 事件状态+数量
const statusList = ref([
   { name: '全部状态', img: status0Img, id: undefined,few: true },
   { name: '待审核', img: status1Img, id: 2 },
   { name: '待处理', img: status2Img, id: 0, few: true },
   { name: '处理中', img: status3Img, id: 3, few: true },
   { name: '已完成', img: status4Img, id: 4, few: true },
   { name: '待分拨', img: status5Img, id: 1 },
   { 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' },
   { name: '已完成', img: status4Img, id: 4, few: true, color: '#AFD9FB' },
   { name: '待分拨', img: status5Img, id: 1, color: '#11C4FF' },
])

const getEventStatusNumFun = () => {
@@ -244,6 +266,24 @@
      total.value = resData.total
   })
}
const isShowBigImg = ref(false)
const imageList = ref([]);
const clickImgSrc = ref('');
const selectedImgIndex = ref(0);
// 点击图片放大 显示详细信息
const getFindImgHistory = (id) => {
   findImgHistory(id).then((res) => {
      if (res.data.code !== 0) return
      imageList.value = res.data.data
      clickImgSrc.value = res.data.data[0]?.url;
      isShowBigImg.value = true
   })
}
// 点击周期
const clickWeekTime = (item,index) => {
   clickImgSrc.value = item.url
   selectedImgIndex.value = index
}

const getDateRange = unit => {
  if (unit === 'today') {
@@ -282,25 +322,31 @@
   height: 922px;
   width: 405px;
   font-size: 18px;
   z-index: 10;

   &.isMore {
      width: 807px;
      width: 808px;

      .content {
         width: 792px;
         padding-left: 44px;
      }
   }

   .content {
      width: 390px;
      height: 877px;
      background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 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;
      flex-wrap: wrap;
      padding: 7px 15px 0 11px;
      gap: 10px;
      padding: 7px 13px 0 11px;
      gap: 16px;

      .leftArrow {
         position: absolute;
@@ -310,38 +356,42 @@
         cursor: pointer;
      }

      .rightArrow {
         position: absolute;
         top: 50%;
         left: 30px;
         transform: translateY(-50%);
         cursor: pointer;
      }

      .statusList {
         width: 100%;
         display: flex;
         justify-content: space-between;

         .statusItem {
            width: 95px;
            // width: 95px;
            height: 44px;
            display: flex;
            flex: 1;
            justify-content: center;
            position: relative;
            cursor: pointer;
            // margin-right: 4px;

            &.active {
               background: linear-gradient(
                  180deg,
                  rgba(19, 80, 141, 0) 0%,
                  rgba(22, 56, 91, 0.48) 48%,
                  #053462 91%,
                  #259dff 91%,
                  #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 {
               width: 35px;
               height: 35px;
               width: 34px;
               height: 34px;
               margin-right: 1px;
            }

            .statusItemInfo {
               .statusItemName {
                  width: 59px;
                  // width: 59px;
                  height: 17px;
                  font-family: Segoe UI, Segoe UI;
                  font-weight: 400;
@@ -351,6 +401,7 @@
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                  margin-bottom: 4px;
               }

               .statusItemNum {
@@ -401,13 +452,14 @@
         width: 100%;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         gap: 20px 0;
         // justify-content: space-between;
         gap: 20px 10px;

         .eventListItem {
            width: 175px;
            height: 140px;
            position: relative;
            cursor: pointer;

            .eventListItemImg {
               width: 174px;
@@ -475,4 +527,76 @@
   display: flex;
   justify-content: center;
}
.image-list {
   position: absolute;
   left: 40%;
   transform: translate(-40%);
   bottom: 218px;
   width: 524px;
   height: 382px;
   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;
   .title {
      position: relative;
      text-align: right;
      right: 12px;
      top: 12px;
      img {
         width: 10px;
         height: 10px;
         cursor: pointer;
      }
   }
   .content {
      width: 475px;
      height: 231px;
      box-shadow: 1px 3px 6px 0px rgba(81,168,255,0.58);
      border-radius: 20px 20px 20px 20px;
      border-image: linear-gradient(180deg, rgba(81, 168, 255, 1), rgba(189, 228, 255, 1)) 2 2;
      margin: 28px 28px;
      img {
         width: 100%;
         height: 230px;
      }
   }
   .card {
      margin: 26px 26px;
      color: #BECBEA;
      display: flex;
      justify-content: space-between;
      position: relative;
      .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 {
         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%;
      }
   }
}
</style>