Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/views/demo/system/achievement/Display/PopoverContent.vue

@@ -21,13 +21,13 @@
         </template>
       </a-slider>
     </p>
-    <p>
+    <!-- <p>
       历史影像树层级分类：
       <a-radio-group v-model:value="yingxiangTreeMenu" button-style="solid">
         <a-radio-button value="0">时间</a-radio-button>
         <a-radio-button value="1">区县</a-radio-button>
       </a-radio-group>
-    </p>
+    </p> -->
     <p>
       历史影像透明度：
       <a-slider
@@ -50,20 +50,24 @@
 <script lang="ts" setup>
   import { ref, watch } from 'vue';
   // emit
-  const emit = defineEmits(['changeFillLayerOpacity_tuceng', 'changeFillLayerOpacity_yingxiang', 'changeYingxiangTreeMenu']);
+  const emit = defineEmits([
+    'changeFillLayerOpacity_tuceng',
+    'changeFillLayerOpacity_yingxiang',
+    'changeYingxiangTreeMenu',
+  ]);
 
   // 点击树选项功能-------------------------------------------------------
   const treeRadio = ref(true);
   // 历史影像树层级分类-------------------------------------------------------
   const yingxiangTreeMenu = ref('0');
   watch(
-    ()=> yingxiangTreeMenu.value,
+    () => yingxiangTreeMenu.value,
-    ()=> {
+    () => {
       emit('changeYingxiangTreeMenu');
-    }, 
+    },
     {
       deep: true,
-    }
+    },
   );
 
   // 抛出函数

src/views/demo/system/achievement/Display/index.vue

@@ -239,95 +239,95 @@
       treeData.value[1].children = [];
 
       // 历史影像-第二层
-      if (
+      // if (
-        popoverContentRef.value == undefined ||
+      //   popoverContentRef.value == undefined ||
-        popoverContentRef.value.yingxiangTreeMenu == '0'
+      //   popoverContentRef.value.yingxiangTreeMenu == '0'
-      ) {
+      // ) {
-        // 按照时间分类
+      // 按照时间分类
-        let dateDirArray: any = [];
+      let dateDirArray: any = [];
-        res.items.forEach((item) => {
+      res.items.forEach((item) => {
-          dateDirArray.push({
+        dateDirArray.push({
-            key: item.dateDir,
+          key: item.dateDir,
-          });
         });
-        // 不重复的时间
+      });
-        yingxiang_uniqueKeysArray = Array.from(new Set(dateDirArray.map((item) => item.key))).sort(
+      // 不重复的时间
-          (a, b) => dayjs(b) - dayjs(a),
+      yingxiang_uniqueKeysArray = Array.from(new Set(dateDirArray.map((item) => item.key))).sort(
-        );
+        (a, b) => dayjs(b) - dayjs(a),
-        // 转换时间数组(年份-周数)
+      );
-        yingxiang_uniqueKeysArray = yingxiang_uniqueKeysArray.map(convertToYearWeek);
+      // 转换时间数组(年份-周数)
-        yingxiang_uniqueKeysArray = [...new Set(yingxiang_uniqueKeysArray)];
+      yingxiang_uniqueKeysArray = yingxiang_uniqueKeysArray.map(convertToYearWeek);
+      yingxiang_uniqueKeysArray = [...new Set(yingxiang_uniqueKeysArray)];
 
-        yingxiang_uniqueKeysArray.forEach((array) => {
+      yingxiang_uniqueKeysArray.forEach((array) => {
-          // 分解
+        // 分解
-          const [year, week] = array.split('-').map(Number);
+        const [year, week] = array.split('-').map(Number);
-          // 获取输入年周的起始和最后时间
+        // 获取输入年周的起始和最后时间
-          const weekRange = getWeekRange(year, week);
+        const weekRange = getWeekRange(year, week);
-          treeData.value[1].children.push({
+        treeData.value[1].children.push({
-            key: array,
+          key: array,
-            title: year + '年 第' + week + '周 ' + weekRange.start + '至' + weekRange.end,
+          title: year + '年 第' + week + '周 ' + weekRange.start + '至' + weekRange.end,
-            children: [],
+          children: [],
-          });
-          searchKeyVlaue.push({
-            title: year + '年 第' + week + '周 ' + weekRange.start + '至' + weekRange.end,
-            key: treeData.value[1].key,
-          });
         });
-        // 历史影像-第三层
+        searchKeyVlaue.push({
-        res.items.forEach((item1) => {
+          title: year + '年 第' + week + '周 ' + weekRange.start + '至' + weekRange.end,
-          treeData.value[1].children.forEach((item2) => {
+          key: treeData.value[1].key,
-            if (convertToYearWeek(item1.dateDir) === item2.key) {
-              item2.children.push({
-                key: item1.id,
-                title: item1.layerName,
-              });
-              searchKeyVlaue.push({ title: item1.layerName, key: item2.key });
-            }
-          });
         });
-      } else {
+      });
-        let countrynameArray: any = [];
+      // 历史影像-第三层
-        // 按照区县分类
+      // res.items.forEach((item1) => {
-        res.items.forEach((item) => {
+      //   treeData.value[1].children.forEach((item2) => {
-          // 分割路径
+      //     if (convertToYearWeek(item1.dateDir) === item2.key) {
-          let parts = item.tiffPath.split('\\');
+      //       item2.children.push({
-          if (parts.length <= 1) {
+      //         key: item1.id,
-            parts = item.tiffPath.split('/');
+      //         title: item1.layerName,
-          }
+      //       });
-          // 提取区县名称
+      //       searchKeyVlaue.push({ title: item1.layerName, key: item2.key });
-          const countryname = parts[parts.length - 2];
+      //     }
-          countrynameArray.push({
+      //   });
-            key: countryname,
+      // });
-          });
+      // } else {
-        });
+      //   let countrynameArray: any = [];
-        yingxiang_uniqueKeysArray = Array.from(new Set(countrynameArray.map((item) => item.key)));
+      //   // 按照区县分类
-        yingxiang_uniqueKeysArray.forEach((array) => {
+      //   res.items.forEach((item) => {
-          treeData.value[1].children.push({
+      //     // 分割路径
-            key: array,
+      //     let parts = item.tiffPath.split('\\');
-            title: array,
+      //     if (parts.length <= 1) {
-            children: [],
+      //       parts = item.tiffPath.split('/');
-          });
+      //     }
-          searchKeyVlaue.push({ title: array, key: treeData.value[1].key });
+      //     // 提取区县名称
-        });
+      //     const countryname = parts[parts.length - 2];
-        // 历史影像-第三层
+      //     countrynameArray.push({
-        res.items.forEach((item1) => {
+      //       key: countryname,
-          treeData.value[1].children.forEach((item2) => {
+      //     });
-            let parts = item1.tiffPath.split('\\');
+      //   });
-            if (parts.length <= 1) {
+      //   yingxiang_uniqueKeysArray = Array.from(new Set(countrynameArray.map((item) => item.key)));
-              parts = item1.tiffPath.split('/');
+      //   yingxiang_uniqueKeysArray.forEach((array) => {
-            }
+      //     treeData.value[1].children.push({
-            // 提取区县名称
+      //       key: array,
-            const countryname = parts[parts.length - 2];
+      //       title: array,
-            if (countryname === item2.key) {
+      //       children: [],
-              item2.children.push({
+      //     });
-                key: item1.id,
+      //     searchKeyVlaue.push({ title: array, key: treeData.value[1].key });
-                title: item1.layerName,
+      //   });
-              });
+      //   // 历史影像-第三层
-              searchKeyVlaue.push({ title: item1.layerName, key: item2.key });
+      //   res.items.forEach((item1) => {
-            }
+      //     treeData.value[1].children.forEach((item2) => {
-          });
+      //       let parts = item1.tiffPath.split('\\');
-        });
+      //       if (parts.length <= 1) {
-      }
+      //         parts = item1.tiffPath.split('/');
+      //       }
+      //       // 提取区县名称
+      //       const countryname = parts[parts.length - 2];
+      //       if (countryname === item2.key) {
+      //         item2.children.push({
+      //           key: item1.id,
+      //           title: item1.layerName,
+      //         });
+      //         searchKeyVlaue.push({ title: item1.layerName, key: item2.key });
+      //       }
+      //     });
+      //   });
+      // }
     });
 
     // 航飞图片

src/views/demo/system/achievement/GeoTiffManager/failYingxiang.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <BasicTable @register="failYingxiangRegisterTable">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'fileName'">
+          <span class="content-full">{{ record.fileName }}</span>
+        </template>
+        <template v-if="column.key === 'filePath'">
+          <span class="content-full">{{ record.filePath }}</span>
+        </template>
+        <template v-if="column.key === 'action'">
+          <span class="content-full">
+            <a-button type="link" @click="copyToClipboard(record.fileName)">复制文件名</a-button>
+            <a-button type="link" @click="copyToClipboard(record.filePath)">复制路径</a-button>
+          </span>
+        </template>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { defineProps } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { failColumns } from './util';
+
+  const { createMessage } = useMessage();
+
+  const props = defineProps(['failYingxiangData']);
+
+  // 更新失败的影像
+  const [failYingxiangRegisterTable, { reload, getSelectRows }] = useTable({
+    columns: failColumns,
+    dataSource: props.failYingxiangData,
+    showIndexColumn: true,
+    canResize: true,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    immediate: false,
+  });
+
+  // 复制到剪贴板
+  const copyToClipboard = async (value) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      createMessage.success('复制成功');
+    } catch (err) {
+      createMessage.error('复制失败');
+    }
+  };
+</script>
+<style lang="less">
+  .content-full {
+    white-space: pre-wrap;
+    word-break: break-all;
+    overflow-wrap: break-word;
+    max-width: 100%;
+    display: block;
+  }
+</style>

src/views/demo/system/achievement/GeoTiffManager/index.vue

@@ -6,6 +6,38 @@
           <template #toolbar>
             <a-button type="primary" @click="updateGeoTiff">更新最新影像</a-button>
           </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'layerName'">
+              <span class="content-full">{{ record.layerName }}</span>
+            </template>
+            <template v-if="column.key === 'dataTable'">
+              <span class="content-full">{{ record.dataTable }}</span>
+            </template>
+            <template v-if="column.key === 'shpPath'">
+              <span class="content-full">{{ record.shpPath }}</span>
+            </template>
+            <template v-if="column.key === 'tiffPath'">
+              <span class="content-full">{{ record.tiffPath }}</span>
+            </template>
+            <template v-if="column.key === 'createTime'">
+              <span class="content-full">{{ record.createTime }}</span>
+            </template>
+            <template v-if="column.key === 'updateTime'">
+              <span class="content-full">{{ record.updateTime }}</span>
+            </template>
+            <template v-if="column.key === 'accessUrl'">
+              <a-image
+                :src="getUrl(record)"
+                :style="{ marginRight: '10px' }"
+                :width="100"
+                :height="100"
+                :preview="{
+                  visible,
+                  onVisibleChange: setVisible,
+                }"
+              />
+            </template>
+          </template>
         </BasicTable>
       </a-col>
       <a-col :span="12">
@@ -24,6 +56,17 @@
         </div>
       </a-col>
     </a-row>
+
+    <a-modal
+      title="更新失败的影像"
+      :open="failOpen"
+      :maskClosable="false"
+      :footer="null"
+      :width="1000"
+      @cancel="failOpenClose"
+    >
+      <FailYingxiang :failYingxiangData="failYingxiangData" />
+    </a-modal>
   </div>
 </template>
 
@@ -31,36 +74,41 @@
   import { ref, watch, onMounted } from 'vue';
   // vben
   import { useMessage } from '@/hooks/web/useMessage';
+  import proj4 from 'proj4';
+  import { getAppEnvConfig } from '@/utils/env';
   import { BasicTable, useTable } from '@/components/Table';
   import { columns, searchFormSchema } from './util';
   import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue';
+  import FailYingxiang from './failYingxiang.vue';
   // api
   import {
     GeoTiffManagerUpdateGeoTiff,
     GeoTiffManagerLoadPage,
     GeoTiffManagerGet,
   } from '@/api/demo/system';
-  import proj4 from 'proj4';
+
+  // 图片路径拼接
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
+
+  const { createMessage } = useMessage();
 
   proj4.defs(
     'EPSG:4548',
     '+proj=tmerc +lat_0=37.56666666666666 +lon_0=126.93333333333333 +k=1 +x_0=200000 +y_0=500000 +ellps=bessel +towgs84=-119.819,-78.445,-112.283,0,0,0,0 +units=m +no_defs',
   );
 
-  const { createMessage } = useMessage();
-
   // 影像管理
   const [registerTable, { reload, getSelectRows }] = useTable({
     title: '影像管理',
     api: GeoTiffManagerLoadPage,
     columns: columns,
+    useSearchForm: true,
     formConfig: {
       labelWidth: 120,
       schemas: searchFormSchema,
     },
     showIndexColumn: true,
-    useSearchForm: true,
-    ellipsis: false,
     bordered: true,
     showTableSetting: true,
     handleSearchInfoFn(info) {
@@ -69,11 +117,25 @@
     immediate: false,
   });
 
+  // 更新失败的影像
+  const failOpen = ref(false);
+  const failYingxiangData: any = ref();
+  // 更新失败的影像弹窗关闭
+  function failOpenClose() {
+    failOpen.value = false;
+  }
+
   // 更新tiff影像
   const updateGeoTiff = () => {
     GeoTiffManagerUpdateGeoTiff()
       .then((res) => {
-        if (res) {
+        // console.log(res);
+        if (res.lenght == 0) {
+          reload();
+        } else {
+          failYingxiangData.value = getFailYingxiangData(res);
+          console.log(failYingxiangData.value);
+          failOpen.value = true;
           reload();
         }
       })
@@ -82,6 +144,21 @@
       });
   };
 
+  // 切割路径
+  function getFailYingxiangData(table) {
+    let result: any = [];
+    table.forEach((fullPath) => {
+      const lastSlashIndex = fullPath.lastIndexOf('/');
+      if (lastSlashIndex != -1) {
+        result.push({
+          fileName: fullPath.substring(lastSlashIndex + 1),
+          filePath: fullPath.substring(0, lastSlashIndex + 1),
+        });
+      }
+    });
+    return result;
+  }
+
   // 行选中
   const mapboxComponentRef = ref();
   function handRowClick(record) {
@@ -90,7 +167,6 @@
     });
     let bbox = getBboxFromUrl(record.accessUrl);
     let lngLat = getCenterPoint(bbox);
-    console.log(lngLat);
     // 检测坐标系
     const result = isProjectedCoordinates(parseFloat(lngLat[0]), parseFloat(lngLat[1]));
     if (result) {
@@ -156,9 +232,56 @@
     });
   }
 
+  // 缩略图的预览不使用
+  const visible = ref<boolean>(false);
+  const setVisible = (value): void => {
+    visible.value = false;
+  };
+
+  // 从geoserver获取缩略图
+  function getUrl(record) {
+    let bbox: any = getBboxFromUrl(record.accessUrl);
+    const coords = bbox.split(',').map((coord) => parseFloat(coord));
+    let r1 = proj4('EPSG:4326', 'EPSG:3857', [coords[0], coords[1]]);
+    let r2 = proj4('EPSG:4326', 'EPSG:3857', [coords[2], coords[3]]);
+    let titeUrl: any = null;
+    if (new URL(VITE_GLOB_API_URL).hostname == 'localhost') {
+      titeUrl =
+        'http://localhost:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:';
+    } else {
+      titeUrl =
+        'http://192.168.10.141:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:';
+    }
+    let url =
+      titeUrl +
+      record.layerName +
+      '&styles=&bbox=' +
+      r1[0] +
+      ',' +
+      r1[1] +
+      ',' +
+      r2[0] +
+      ',' +
+      r2[1] +
+      '&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE';
+    return url;
+  }
+
   onMounted(() => {
     reload();
     // 用于去除分页后地图还有前一页的图层
     forClearMap();
   });
 </script>
+<style lang="less" scoped>
+  .content-full {
+    white-space: pre-wrap;
+    word-break: break-all;
+    overflow-wrap: break-word;
+    max-width: 100%;
+    display: block;
+  }
+  ::v-deep .ant-image-mask {
+    display: none !important;
+  }
+</style>

src/views/demo/system/achievement/GeoTiffManager/util.ts

@@ -16,17 +16,16 @@ export const columns = [
       dataIndex: 'dataTable',
       width: 100,
     },
+    {
+      title: '缩略图',
+      dataIndex: 'accessUrl',
+      width: 130,
+    },
     {
       title: '时间',
       dataIndex: 'dateDir',
       width: 80,
     },
-    {
-      title: 'accessUrl',
-      dataIndex: 'accessUrl',
-      ifShow: false,
-      width: 300,
-    },
     {
       title: 'shpPath',
       dataIndex: 'shpPath',
@@ -40,12 +39,12 @@ export const columns = [
     {
       title: '创建时间',
       dataIndex: 'createTime',
-      width: 120,
+      width: 90,
     },
     {
       title: '修改时间',
       dataIndex: 'updateTime',
-      width: 120,
+      width: 90,
     },
 ];
 
@@ -56,4 +55,22 @@ export const searchFormSchema = [
     component: 'Input',
     colProps: { span: 12 },
   },
-];  
+];  
+
+export const failColumns = [
+  {
+    title: '文件名称',
+    dataIndex: 'fileName',
+    width: 200,
+  },
+  {
+    title: '文件路径',
+    dataIndex: 'filePath',
+    width: 350,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+  }
+];