首页和模型管理页添加台风

RuoYi-Vue3/src/supermap-cesium-module/views/layout/aside.vue

@@ -168,6 +168,14 @@
             </el-sub-menu>
           </el-sub-menu>
         </el-sub-menu>
+
+        <!-- 台风菜单 -->
+        <el-sub-menu index="typhoon">
+          <template #title>
+            <img src="/img/typhoon.png" alt="" class="typhoon-icon" />
+            <span>台风</span>
+          </template>
+        </el-sub-menu>
       </el-menu>
     </el-aside>
     <!-- 侧边栏部分--end -->
@@ -1739,6 +1747,20 @@ export default {
     float: none !important;
   }
   
+  :deep(.el-menu--collapse .el-sub-menu__title .typhoon-icon) {
+    margin: 0 !important;
+    padding: 0 !important;
+    display: inline-block !important;
+    text-align: center !important;
+    width: 20px !important;
+    height: 20px !important;
+    position: static !important;
+    left: auto !important;
+    right: auto !important;
+    transform: none !important;
+    float: none !important;
+  }
+  
   :deep(.el-menu--collapse .el-submenu__title span),
   :deep(.el-menu--collapse .el-menu-item span),
   :deep(.el-menu--collapse .el-sub-menu__title span) {
@@ -1821,6 +1843,14 @@ export default {
   color: #303133;
 }
 
+/* 台风图标样式 */
+.typhoon-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+
 /* 子菜单项文字颜色 */
 .el-menu--vertical .el-sub-menu .el-menu-item {
   color: #303133 !important;

RuoYi-Vue3/src/views/front/ModelManagement.vue

@@ -77,6 +77,14 @@
           <el-menu-item index="2-4">地形</el-menu-item>
           <el-menu-item index="2-5">矢量瓦片</el-menu-item>
         </el-sub-menu>
+        
+        <!-- 台风路径 -->
+        <el-menu-item index="3">
+          <div @click.stop="handleMenuSelect('3')" style="cursor: pointer; width: 100%; display: flex; align-items: center;">
+            <el-icon><Menu /></el-icon>
+            <span>台风路径</span>
+          </div>
+        </el-menu-item>
       </el-menu-item-group>
     </el-menu>
   </aside>
@@ -84,7 +92,7 @@
   <!-- 右侧内容区域 -->
       <section class="right-content">
         <!-- 面包屑导航已移除 -->
-        <ShuiliGongcheng :selected-category="selectedCategory" />
+        <component :is="activeComponent" :selected-category="selectedCategory" />
       </section>
 </main>
     <!-- 页面底部 -->
@@ -103,11 +111,13 @@ import { Menu, Setting, House } from '@element-plus/icons-vue'
 import ShuiliGongcheng from './content/ShuiliGongcheng.vue'
 import JidianShebei from './content/JidianShebei.vue'
 import ShuiliSheshi from './content/ShuiliSheshi.vue'
+import TyphoonPath from './content/TyphoonPath.vue'
 
 // 使用markRaw标记组件，避免Vue将其转换为响应式对象
 const ShuiliGongchengRaw = markRaw(ShuiliGongcheng)
 const JidianShebeiRaw = markRaw(JidianShebei)
 const ShuiliSheshiRaw = markRaw(ShuiliSheshi)
+const TyphoonPathRaw = markRaw(TyphoonPath)
 
 const activeMenu = ref('1')
 const activeMenuName = ref('水利工程模型')
@@ -134,7 +144,12 @@ const handleMenuSelect = (key) => {
   activeMenu.value = key
   
   // 根据选择的菜单项更新活动菜单名称和组件
-  if (key.startsWith('2')) {
+  if (key === '3') {
+    // 台风路径
+    activeMenuName.value = '台风路径'
+    activeComponent.value = TyphoonPathRaw
+    selectedCategory.value = key
+  } else if (key.startsWith('2')) {
     // 自定义服务及其子菜单
     activeMenuName.value = '自定义服务'
     activeComponent.value = ShuiliGongchengRaw

RuoYi-Vue3/src/views/front/content/TyphoonPath.vue

@@ -0,0 +1,569 @@
+<template>
+  <div class="typhoon-path-content">
+    <!-- 统计卡片 -->
+    <div class="stats-card">
+      <div class="stats-row">
+        <span class="stats-icon">
+          <el-icon><DataBoard /></el-icon>
+        </span>
+        <span class="stats-label1">台风路径总数：</span>
+        <span class="total-value">{{ statistics.total }}</span>
+      </div>
+    </div>
+
+    <!-- 台风路径表格 -->
+    <div class="model-table-container">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+        <div style="display: flex; gap: 15px;">
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <span style="font-weight: 500; color: #606266;">台风名称：</span>
+            <el-input v-model="filterName" placeholder="请输入台风名称" style="width: 200px;" clearable @change="handleFilterChange" />
+          </div>
+          <el-button @click="resetFilters" style="margin-left: 10px;">重置</el-button>
+          <el-button type="primary" @click="searchTyphoons" style="margin-left: 5px;">搜索</el-button>
+        </div>
+        <el-button type="primary" @click="openUploadDialog">
+          <el-icon><Upload /></el-icon>
+          上传台风路径
+        </el-button>
+      </div>
+      <el-table :data="typhoonData" border stripe>
+        <el-table-column type="index" label="序号" width="100" />
+        <el-table-column prop="name" label="台风名称" />
+        <el-table-column prop="id" label="台风ID" width="150" />
+        <el-table-column prop="startTime" label="开始时间" width="180" />
+        <el-table-column prop="endTime" label="结束时间" width="180" />
+        <el-table-column prop="createTime" label="创建时间" width="180" />
+        <el-table-column label="操作" width="240">
+          <template #default="scope">
+            <div style="display: flex; gap: 8px;">
+              <el-button size="small" type="primary" @click="viewJsonContent(scope.row)">查看</el-button>
+              <el-button size="small" type="warning" @click="editTyphoon(scope.row)">编辑</el-button>
+              <el-button size="small" type="danger" @click="deleteTyphoon(scope.row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+      
+    <!-- 分页组件 -->
+    <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :small="false"
+        :disabled="false"
+        :background="true"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template #total>
+          共 {{ total }} 条
+        </template>
+        <template #sizes>
+          <el-select v-model="pageSize" style="width: 110px;" placeholder="请选择">
+            <el-option
+              v-for="item in [10, 20, 50, 100]"
+              :key="item"
+              :label="item + '条/页'"
+              :value="item"
+            />
+          </el-select>
+        </template>
+        <template #prev>
+          上一页
+        </template>
+        <template #next>
+          下一页
+        </template>
+        <template #jumper>
+          前往
+          <el-input-number
+            v-model="currentPage"
+            :min="1"
+            :max="Math.ceil(total / pageSize)"
+            controls-position="right"
+            style="width: 60px; margin: 0 8px;"
+          />
+          页
+        </template>
+      </el-pagination>
+    </div>
+
+    <!-- 上传台风路径弹窗 -->
+    <el-dialog title="上传台风路径" v-model="uploadDialogVisible" width="500px">
+      <div class="dialog-content-wrapper">
+        <el-form :model="formData" label-width="100px">
+          <el-form-item label="台风名称">
+            <el-input v-model="formData.name" placeholder="请输入台风名称" style="width: 100%;" />
+          </el-form-item>
+          <el-form-item label="台风ID">
+            <el-input v-model="formData.id" placeholder="请输入台风ID" style="width: 100%;" />
+          </el-form-item>
+          <el-form-item label="开始时间">
+            <el-date-picker
+              v-model="formData.startTime"
+              type="datetime"
+              placeholder="选择开始时间"
+              style="width: 100%;"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+            />
+          </el-form-item>
+          <el-form-item label="结束时间">
+            <el-date-picker
+              v-model="formData.endTime"
+              type="datetime"
+              placeholder="选择结束时间"
+              style="width: 100%;"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+            />
+          </el-form-item>
+          <el-form-item label="台风路径文件">
+            <el-upload
+              class="upload-demo"
+              drag
+              action="#"
+              :on-change="handleFileChange"
+              :auto-upload="false"
+              :key="uploadKey"
+              :file-list="[]"
+              accept=".json"
+            >
+              <el-icon class="el-icon--upload"><Upload /></el-icon>
+              <div class="el-upload__text">将JSON文件拖到此处，或<em>点击上传</em></div>
+              <template #tip>
+                <div class="el-upload__tip">
+                  只能上传 JSON 文件
+                </div>
+              </template>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <el-button @click="uploadDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 编辑台风路径弹窗 -->
+    <el-dialog title="编辑台风路径" v-model="editDialogVisible" width="500px">
+      <div class="dialog-content-wrapper">
+        <el-form :model="editFormData" label-width="100px">
+          <el-form-item label="台风名称">
+            <el-input v-model="editFormData.name" placeholder="请输入台风名称" style="width: 100%;" />
+          </el-form-item>
+          <el-form-item label="台风ID">
+            <el-input v-model="editFormData.id" placeholder="请输入台风ID" style="width: 100%;" />
+          </el-form-item>
+          <el-form-item label="开始时间">
+            <el-date-picker
+              v-model="editFormData.startTime"
+              type="datetime"
+              placeholder="选择开始时间"
+              style="width: 100%;"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+            />
+          </el-form-item>
+          <el-form-item label="结束时间">
+            <el-date-picker
+              v-model="editFormData.endTime"
+              type="datetime"
+              placeholder="选择结束时间"
+              style="width: 100%;"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitEditForm">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 查看JSON内容弹窗 -->
+    <el-dialog title="台风路径JSON内容" v-model="jsonViewDialogVisible" width="800px">
+      <div class="json-viewer">
+        <pre>{{ jsonContent }}</pre>
+      </div>
+      <template #footer>
+        <el-button @click="jsonViewDialogVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { DataBoard, Upload } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox, ElInputNumber } from 'element-plus'
+
+const typhoonData = ref([])
+const uploadDialogVisible = ref(false)
+const editDialogVisible = ref(false)
+const jsonViewDialogVisible = ref(false)
+const uploadKey = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const filterName = ref('')
+const jsonContent = ref('')
+
+const formData = ref({
+  name: '',
+  id: '',
+  startTime: '',
+  endTime: '',
+  file: null
+})
+
+const editFormData = ref({
+  id: null,
+  name: '',
+  typhoonId: '',
+  startTime: '',
+  endTime: ''
+})
+
+// 计算统计数据
+const statistics = computed(() => {
+  return {
+    total: typhoonData.value.length
+  }
+})
+
+// 获取台风路径列表
+const fetchTyphoonList = () => {
+  // 模拟数据
+  typhoonData.value = [
+    {
+      id: 'TY001',
+      name: '台风"海葵"',
+      startTime: '2024-09-01 08:00:00',
+      endTime: '2024-09-06 18:00:00',
+      status: '正常',
+      createTime: '2024-09-01 10:00:00'
+    },
+    {
+      id: 'TY002',
+      name: '台风"苏拉"',
+      startTime: '2024-08-28 12:00:00',
+      endTime: '2024-09-03 06:00:00',
+      status: '正常',
+      createTime: '2024-08-28 14:00:00'
+    }
+  ]
+  total.value = typhoonData.value.length
+}
+
+// 打开上传弹窗
+const openUploadDialog = () => {
+  formData.value = {
+    name: '',
+    id: '',
+    startTime: '',
+    endTime: '',
+    file: null
+  }
+  uploadKey.value++
+  uploadDialogVisible.value = true
+}
+
+// 文件变化处理
+const handleFileChange = (file) => {
+  if (file.raw.type !== 'application/json' && !file.raw.name.endsWith('.json')) {
+    ElMessage.error('只能上传JSON文件')
+    return false
+  }
+  formData.value.file = file.raw
+  
+  // 读取JSON文件内容
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    try {
+      formData.value.jsonContent = e.target.result
+    } catch (error) {
+      ElMessage.error('JSON文件解析失败')
+    }
+  }
+  reader.readAsText(file.raw)
+}
+
+// 提交表单
+const submitForm = () => {
+  if (!formData.value.name) {
+    ElMessage.warning('请输入台风名称')
+    return
+  }
+  if (!formData.value.id) {
+    ElMessage.warning('请输入台风ID')
+    return
+  }
+  if (!formData.value.startTime) {
+    ElMessage.warning('请选择开始时间')
+    return
+  }
+  if (!formData.value.endTime) {
+    ElMessage.warning('请选择结束时间')
+    return
+  }
+  if (!formData.value.file) {
+    ElMessage.warning('请上传台风路径JSON文件')
+    return
+  }
+
+  // 添加新台风到列表
+  const newTyphoon = {
+    id: formData.value.id,
+    name: formData.value.name,
+    startTime: formData.value.startTime,
+    endTime: formData.value.endTime,
+    status: '正常',
+    createTime: new Date().toLocaleString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false
+    }).replace(/\//g, '-'),
+    jsonContent: formData.value.jsonContent || ''
+  }
+  
+  typhoonData.value.unshift(newTyphoon)
+  total.value = typhoonData.value.length
+
+  ElMessage.success('上传成功')
+  uploadDialogVisible.value = false
+}
+
+// 编辑台风
+const editTyphoon = (row) => {
+  editFormData.value = {
+    id: row.id,
+    name: row.name,
+    typhoonId: row.id,
+    startTime: row.startTime,
+    endTime: row.endTime
+  }
+  editDialogVisible.value = true
+}
+
+// 提交编辑表单
+const submitEditForm = () => {
+  if (!editFormData.value.name) {
+    ElMessage.warning('请输入台风名称')
+    return
+  }
+  if (!editFormData.value.typhoonId) {
+    ElMessage.warning('请输入台风ID')
+    return
+  }
+  if (!editFormData.value.startTime) {
+    ElMessage.warning('请选择开始时间')
+    return
+  }
+  if (!editFormData.value.endTime) {
+    ElMessage.warning('请选择结束时间')
+    return
+  }
+
+  ElMessage.success('编辑成功')
+  editDialogVisible.value = false
+  fetchTyphoonList()
+}
+
+// 删除台风
+const deleteTyphoon = (row) => {
+  ElMessageBox.confirm('确定要删除该台风路径吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    ElMessage.success('删除成功')
+    fetchTyphoonList()
+  }).catch(() => {})
+}
+
+// 查看JSON内容
+const viewJsonContent = (row) => {
+  // 显示用户上传的JSON内容
+  if (row.jsonContent) {
+    try {
+      // 尝试解析JSON并格式化
+      const parsed = JSON.parse(row.jsonContent)
+      jsonContent.value = JSON.stringify(parsed, null, 2)
+    } catch (error) {
+      // 如果解析失败，直接显示原始内容
+      jsonContent.value = row.jsonContent
+    }
+  } else {
+    // 如果没有JSON内容，显示基本信息
+    jsonContent.value = JSON.stringify({
+      id: row.id,
+      name: row.name,
+      startTime: row.startTime,
+      endTime: row.endTime,
+      message: '暂无路径数据'
+    }, null, 2)
+  }
+  jsonViewDialogVisible.value = true
+}
+
+// 搜索
+const searchTyphoons = () => {
+  fetchTyphoonList()
+}
+
+// 重置筛选
+const resetFilters = () => {
+  filterName.value = ''
+  fetchTyphoonList()
+}
+
+// 筛选变化
+const handleFilterChange = () => {
+  fetchTyphoonList()
+}
+
+// 分页大小变化
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  fetchTyphoonList()
+}
+
+// 当前页变化
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  fetchTyphoonList()
+}
+
+onMounted(() => {
+  fetchTyphoonList()
+})
+</script>
+
+<style scoped>
+.typhoon-path-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #f8f9fa;
+}
+
+/* 统计卡片 */
+.stats-card {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  margin-bottom: 1.5rem;
+}
+
+.stats-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.stats-icon {
+  font-size: 2rem;
+  color: #577cf3;
+}
+
+.stats-label1 {
+  font-size: 1.125rem;
+  color: #606266;
+  font-weight: 500;
+}
+
+.total-value {
+  font-size: 2rem;
+  color: #577cf3;
+  font-weight: 600;
+}
+
+.category-stats-row {
+  display: flex;
+  gap: 2rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e4e7ed;
+}
+
+.category-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.stats-label {
+  font-size: 0.875rem;
+  color: #909399;
+}
+
+.stats-value {
+  font-size: 1.125rem;
+  color: #577cf3;
+  font-weight: 600;
+}
+
+/* 表格容器 */
+.model-table-container {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.model-table-container .el-table {
+  flex: 1;
+}
+
+/* 分页容器 */
+.pagination-container {
+  background: white;
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 弹窗内容包装器 */
+.dialog-content-wrapper {
+  padding: 1rem 0;
+}
+
+/* JSON查看器 */
+.json-viewer {
+  background: #f5f7fa;
+  padding: 1rem;
+  border-radius: 8px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.json-viewer pre {
+  margin: 0;
+  font-family: 'Courier New', monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: #303133;
+}
+</style>