feat:设计说明文档中需求及bug部分修改

src/hooks/measure.ts

@@ -88,7 +88,7 @@ function distanceMeasure() {
         polyline: {
           show: true,
           positions: [],
-          material: Cesium.Color.GOLD,
+          material: Cesium.Color.RED,
           width: 2,
           clampToGround: true,
         },
@@ -174,15 +174,15 @@ function distanceMeasure() {
         position: positions[positions.length - 1],
         point: {
           pixelSize: 5,
-          color: Cesium.Color.RED,
+          color: Cesium.Color.WHITE,
           outlineColor: Cesium.Color.WHITE,
           outlineWidth: 2,
           // disableDepthTestDistance: Number.POSITIVE_INFINITY
         },
         label: {
           text: textDistance,
-          font: '14px sans-serif',
-          fillColor: Cesium.Color.GOLD,
+          font: '16px sans-serif',
+          fillColor: Cesium.Color.RED,
           style: Cesium.LabelStyle.FILL_AND_OUTLINE,
           outlineWidth: 2,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
@@ -237,7 +237,7 @@ function angleMeasure() {
         position: cartesian,
         point: {
           pixelSize: 3,
-          color: Cesium.Color.RED,
+          color: Cesium.Color.WHITE,
           outlineColor: Cesium.Color.WHITE,
           outlineWidth: 2,
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
@@ -353,7 +353,7 @@ function angleMeasure() {
         // scaleByDistance: new Cesium.NearFarScalar(7000000, 1.0, 18000000, 0.4),
         // translucencyByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e5, 0),
         font: '14px sans-serif',
-        fillColor: Cesium.Color.GOLD,
+        fillColor: Cesium.Color.RED,
         style: Cesium.LabelStyle.FILL_AND_OUTLINE,
         outlineWidth: 2,
         pixelOffset: new Cesium.Cartesian2(0, -20),

src/views/BaseMB/components/HisImages/components/JImage.jsx

@@ -0,0 +1,71 @@
+import { NImage } from 'naive-ui'
+import WZoom from 'vanilla-js-wheel-zoom/dist/wheel-zoom.min.js'
+
+export default defineComponent({
+  props: {
+    imageList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props) {
+    // const { images, activeIndex } = toRefs(props)
+
+    watch(
+      () => props.imageList,
+      () => {
+        console.log('-------',props.imageList)
+        if (props.imageList.length > 1) {
+          nextTick(() => {
+            props.imageList.map(image => {
+              const imageElement = document
+                .getElementById(`image-${image.id}`)
+                .querySelector('img')
+
+              const wz = WZoom.create(`#image-${image.id}`, {
+                type: 'html',
+                maxScale: 3,
+                minScale: 1,
+                // zoomOnDoubleClick: true,
+                width: imageElement.naturalWidth,
+                height: imageElement.naturalHeight,
+              })
+            })
+          })
+        }
+      }
+    )
+    return () => (
+      <div class="l-image-container flex h-full w-full gap-4">
+        {props.imageList.map(image => (
+          <div class="flex h-full flex-1 flex-col gap-2">
+            <div>{image.createTime}</div>
+            <div class="h-0 flex-1 overflow-hidden">
+              {props.imageList.length > 1 ? (
+                <div
+                  id={`image-${image.id}`}
+                  class="flex h-full w-full cursor-grab items-center justify-center"
+                >
+                  <img
+                    class="w-full"
+                    src={image.imgPath}
+                    draggable="false"
+                    // alt="image"
+                  />
+                </div>
+              ) : (
+                <NImage
+                  class="flex justify-center object-contain w-h-full"
+                  object-fit="contain"
+                  src={image.imgPath}
+                />
+              )}
+            </div>
+
+            <div class="line-clamp-3 pb-4">{image.detailContent}</div>
+          </div>
+        ))}
+      </div>
+    )
+  },
+})

src/views/BaseMB/components/HisImages/components/LImage.jsx

@@ -14,6 +14,7 @@ export default defineComponent({
     watch(
       () => props.imageList,
       () => {
+        console.log(props.imageList,'---imageList--')
         if (props.imageList.length > 1) {
           nextTick(() => {
             props.imageList.map(image => {
@@ -53,11 +54,14 @@ export default defineComponent({
                   />
                 </div>
               ) : (
-                <NImage
-                  class="flex justify-center object-contain w-h-full"
+                <div class="flex object-contain w-h-full">
+                  <NImage
                   object-fit="contain"
                   src={image.imgPath}
                 />
+                <h2>雨辰接口数据1233</h2>
+                </div>
+               
               )}
             </div>
 

src/views/BaseMB/components/HisImages/components/imageRoller.vue

@@ -0,0 +1,209 @@
+<template>
+  <div
+    class="picBox"
+    @mouseenter="isHover = true"
+    @mouseleave="isHover = false"
+  >
+    <div id="mousemoveBox">
+      <div id="line">
+        <!-- <img
+          v-show="isHover"
+          id="move"
+          src="../../assets/img/area.png"
+          alt=""
+        /> -->
+      </div>
+    </div>
+    <div id="before">
+      <img id="beforeImg" :src="path + imgList[0]" alt="" />
+    </div>
+    <div id="after">
+      <img id="afterImg" :src="path + imgList[1]" alt="" />
+    </div>
+    <div id="text">
+      <h2 id="h2">12312312雨辰接口数据</h2>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onMounted,
+  onUnmounted,
+  ref,
+} from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+export default defineComponent({
+  props: {
+    imgList: {
+      type: Object || Array,
+    },
+    path: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props, { emit }) {
+    const route = useRoute();
+    const router = useRouter();
+    const contentWidth = ref("");
+    const contentHeight = ref("");
+    const imgWidth = ref(0);
+    const isHover = ref(true);
+
+    const state = reactive({});
+
+    onMounted(() => {
+      const picBox = document.querySelector(".picBox");
+      contentWidth.value = picBox.offsetWidth + "px";
+      contentHeight.value = picBox.offsetHeight + "px";
+      contrastImg(props.imgIdList);
+    });
+    let line = null; //domLine
+    let move = null; //domMove
+    let after = null; //domAfter
+    let before = null; //domBefore
+    let picBox = null; //domPicBox
+    let afterImg = null; //domAfterImg
+    let beforeImg = null; //domBeforeImg
+    let x = 0; //鼠标在页面中的位置
+    let afterX = 0; //after在页面中的位置
+    let picBoxWidth = 0; //picBox的宽度
+    let beforeWidth = 0; //before的宽度
+    let afterWidth = 0; //after的宽度
+    let moveFlag = false; //鼠标是否抬起
+    let lineLeft = 0; //line在页面中的位置
+    let picBoxX = 0; //picBox在页面中的位置
+
+    const beforeMove = (beforeWidth) => {
+      before.style.width = beforeWidth + "px";
+    };
+    const afterMove = (mousemoveDistance) => {
+      after.style.width = afterWidth - mousemoveDistance + "px";
+      after.style.left = afterX + mousemoveDistance + "px";
+      afterImg.style.left = -(afterX + mousemoveDistance) + "px";
+    };
+    const mousedown = (e) => {
+      picBoxX = picBox.getBoundingClientRect().left;
+      moveFlag = false;
+      x = e.pageX;
+      beforeWidth = before.offsetWidth;
+      afterWidth = after.offsetWidth;
+      picBoxWidth = picBox.offsetWidth;
+      afterX = after.offsetLeft;
+      lineLeft = line.offsetLeft;
+      line.addEventListener("mousemove", mousemove);
+    };
+    const mousemove = (e) => {
+      if (moveFlag) return;
+      if (e.pageX <= picBoxX || e.pageX >= picBoxX + picBoxWidth) return;
+      const mousemoveDistance = e.pageX - x;
+      line.style.left = mousemoveDistance + lineLeft + "px";
+      // move.style.left = mousemoveDistance + lineLeft + 34 + "px";
+      const beforeMoveWidth = beforeWidth + mousemoveDistance;
+      beforeMove(beforeMoveWidth);
+      afterMove(mousemoveDistance);
+    };
+    const mouseup = () => {
+      moveFlag = true;
+    };
+    const contrastImg = (e) => {
+      line = document.getElementById("line");
+      // move = document.getElementById("move");
+      after = document.getElementById("after");
+      before = document.getElementById("before");
+      picBox = document.querySelector(".picBox");
+      afterImg = document.getElementById("afterImg");
+      beforeImg = document.getElementById("beforeImg");
+      line.addEventListener("mousedown", mousedown);
+      document.addEventListener("mouseup", mouseup);
+    };
+
+    onUnmounted(() => {
+      line.removeEventListener("mousemove", mousemove);
+      line.removeEventListener("mousedown", mousedown);
+      document.addEventListener("mouseup", mouseup);
+    });
+
+    return {
+      ...toRefs(state),
+      isHover,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.picBox {
+  position: relative;
+  font-size: 0;
+  width: 100%;
+  height: 100%;
+  #mousemoveBox {
+    position: absolute;
+    width: 100px;
+    height: 100%;
+    left: calc(50% - 30px);
+    z-index: 4;
+    #line {
+      position: absolute;
+      width: 60px;
+      height: 30px;
+      top: calc(50% - 15px);
+      z-index: 5;
+      background: rgba(255, 255, 255, 0.4);
+    }
+    #move {
+      position: absolute;
+      left: 34px;
+      width: 32px;
+      top: calc(50% - 15px);
+      z-index: 5;
+    }
+  }
+  #before {
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    #beforeImg {
+      position: absolute;
+      width: v-bind(contentWidth);
+      height: 100%;
+    }
+  }
+  #after {
+    position: absolute;
+    left: 50%;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    #afterImg {
+      position: absolute;
+      left: -100%;
+      width: v-bind(contentWidth);
+      height: 100%;
+    }
+  }
+  #text {
+    position: absolute;
+    left: 50%;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    #h2 {
+      position: absolute;
+      // left: -100%;
+      width: 50%;
+      height: 100%;
+      font-size: 16px;
+      
+    }
+  }
+}
+</style>

src/views/BaseMB/components/HisImages/components/imageRoller1.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <n-split
+    direction="horizontal"
+    style="height: 500px;width: 50%;"
+    @drag-start="handleOnDragStart"
+    @drag-move="handleOnDragMove"
+    @drag-end="handleOnDragEnd"
+  >
+    <template #1>
+      <img id="beforeImg" :src="'/images/影像.jpg'" alt=""  style="width: 100%; height: 100%; object-fit: cover;"/>
+    </template>
+    <template #2>
+      <img id="beforeImg" :src="'/images/影像.jpg'" alt="" style="width: 100%; height: 100%; object-fit: cover;" />
+    </template>
+  </n-split>
+  </div>
+   
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onMounted,
+  onUnmounted,
+  ref,
+} from "vue";
+import type { Nsplit } from 'naive-ui'
+
+import { useRoute, useRouter } from "vue-router";
+
+export default defineComponent({
+  setup() {
+    
+    return {
+      handleOnDragStart: () => {
+       console.log("开始滚动");
+      },
+      handleOnDragMove: () => {
+       console.log("滚动中");
+      },
+      handleOnDragEnd: () => {
+       console.log("滚动结束");
+      }
+    };
+  }
+});
+</script>

src/views/BaseMB/components/HisImages/index.vue

@@ -5,6 +5,10 @@ import { ImageOutline } from '@vicons/ionicons5'
 import { useHisImage } from './hooks/hisImage'
 import Panel from '@/components/Panel/index.vue'
 import LImage from './components/LImage'
+import JImage from './components/JImage'
+import imageRoller from './components/imageRoller.vue'
+
+
 
 const { sheshiData, showOrHideHisImage, getHisImages } = useHisImage()
 
@@ -31,7 +35,7 @@ const rangeShortcuts = {
     return [cur - 365 * 24 * 60 * 60 * 1000, cur]
   },
 }
-const showPreview = ref(false)
+const showPreview = ref(true)
 const previewIndex = ref(0)
 const selectImg = (index: number) => {
   // show()
@@ -47,6 +51,7 @@ const selectImg = (index: number) => {
 }
 
 const imageList = ref([])
+const isJ=ref(false);
 
 const scrollRef = ref<HTMLElement | null>(null)
 
@@ -69,6 +74,13 @@ const getImage = async () => {
   })
   // console.log(imageList.value, 'imageList')
 }
+const btnText=ref('卷帘对比');
+const changeShow= ()=>{
+  btnText.value=isJ.value ? '卷帘对比' : '取消卷帘对比';
+  isJ.value= !isJ.value;
+  console.log('-------isJ',isJ.value)
+
+}
 
 const checkedImage = ref<null | string[]>(null)
 
@@ -118,10 +130,15 @@ const largeImageList = computed(() => {
       :closeClick="showOrHideHisImage"
     >
       <div class="flex flex-col w-h-full">
+        <div>
+          <n-button type="primary" @click="changeShow"  v-if="isCompare">{{ btnText }}</n-button>
+        </div>
         <div class="large-container">
-          <l-image :imageList="largeImageList" />
-
-          <!-- </vue-viewer> -->
+          <!-- <h1  v-if="isJ" >12345</h1> -->
+          <imageRoller :imgList="['/images/影像.jpg','/images/影像.jpg']" v-if="isJ"></imageRoller>
+          <l-image :imageList="largeImageList" v-else key="l-image" />
+          <!-- <j-image :imageList="largeImageList" v-else key="j-image" /> -->
+          
         </div>
         <div ref="scrollRef" class="flex h-[178px] flex-col">
           <div class="flex gap-2">

src/views/Content/components/Header/index.vue

@@ -74,12 +74,23 @@ function adjustTime(targetValue) {
 }
 function getAdjustedTime(targetValue) {
   const date = adjustTime(targetValue);
+
   
+  // 手动提取年月日时分秒
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1; // 月份从0开始
+  const day = date.getDate();
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+  
+  // 拼接为带大间隔的格式
+  return `${year} / ${month} / ${day}   ${hours}:${minutes}:${seconds}`;
   // 格式化为本地时间字符串
-  return date.toLocaleString('zh-CN', { 
-    timeZone: 'Asia/Shanghai', // 强制使用中文时区显示
-    hour12: false 
-  });
+  // return date.toLocaleString('zh-CN', { 
+  //   timeZone: 'Asia/Shanghai', // 强制使用中文时区显示
+  //   hour12: false 
+  // });
 }
 
 // 使用示例

src/views/Content/components/WidgetNav/components/BaseMap.jsx

@@ -63,7 +63,7 @@ export default defineComponent({
     })
     return () => (
       <div class="relative">
-        <NPopover
+        {/* <NPopover
           trigger="hover"
           placement="bottom"
           v-slots={{
@@ -121,7 +121,7 @@ export default defineComponent({
               </div>
             ))}
           </div>
-        ) : null}
+        ) : null} */}
       </div>
     )
   },

src/views/Content/components/WidgetNav/index.jsx

@@ -174,8 +174,8 @@ export default defineComponent({
         >
           <span>地图样式选择</span>
         </NPopover> */}
-        <BaseMap />
         <HomeView />
+        <BaseMap  />
       </div>
     )
   },

src/views/Satellite/components/SatDetail.jsx

@@ -137,7 +137,8 @@ function updateSatelliteLoad({ sat: sateData, detection, communication }) {
   if (!detection[0] && !communication[0]) {
     return
   }
-
+ console.log(  detection[0] &&
+  Object.values(detection[0]).some(item => isNull(item) || isUndefined(item)),'----------11')
   if (
     detection[0] &&
     Object.values(detection[0]).some(item => isNull(item) || isUndefined(item))
@@ -145,7 +146,8 @@ function updateSatelliteLoad({ sat: sateData, detection, communication }) {
     window.$message.error('探测载荷信息不完整')
     return
   }
-  if (communication[0] && communication[0].target.length > 0) {
+  console.log(communication[0] && communication[0].target.length > 0,'---communication[0] && communication[0].target.length > 0')
+  if (!(communication[0] && communication[0].target.length > 0)) {
     window.$message.error('通信载荷信息不完整')
     return
   }

src/views/TextReport/components/List/index.vue

@@ -30,7 +30,12 @@ const textClick = item => {
   const { geom } = item
   if (geom) {
     const [lon, lat] = parseWKT(geom).coordinates
-    flyTo({ lon, lat })
+    // flyTo({ lon, lat })
+    flyTo({
+      lon: lon,
+      lat: lat,
+      alt: 2000000,
+    });
   }
   openDetailsModal({
     contentString: item.detailContent,