|
|
@@ -1,11 +1,295 @@
|
|
|
-<script setup>
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
<template>
|
|
|
-资源管理
|
|
|
+ <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;" :style="{'height':heightAll+'px'}">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <img src="/public/sourceTop1.jpg" alt="Logo">
|
|
|
+ <div style="margin-left:5%;">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div style="font-size: 40px;color: rgb(51.2, 126.4, 204);margin-left: 2%;">
|
|
|
+ 模型平台
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 30px;color: rgb(51.2, 126.4, 204);">
|
|
|
+ --服务资源中心
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 60%;">
|
|
|
+ 通过模型云平台，构建模型云端计算，快捷接入与部署算力，可实现自动打包定制化模型，降低用户使用门槛，保障数据安全，提供弹性、可扩展的模型计算平台，实现模型集总式管理
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 30%;margin-right: 5%;">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-input v-model="input" style="width:" placeholder="关键字搜索" />
|
|
|
+ <el-button type="primary">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 3%;">搜索热词: 预报模型 维水动力模型 API模型</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 98%;margin-left: 1%;">
|
|
|
+ <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="模型台账" name="first">
|
|
|
+ <div style="width: 100%;border: rgb(221.7, 222.6, 224.4) solid 1px;" :style="{'height':heightAll*0.2+'px'}">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div style="background-color: rgb(243.9, 244.2, 244.8);border: solid 1px;display: flex;align-items: center;width: 10%;justify-content: center;border-color: transparent rgb(221.7, 222.6, 224.4) rgb(221.7, 222.6, 224.4) transparent;" :style="{'height':heightAll*0.2/4+'px'}">
|
|
|
+ 模型服务:
|
|
|
+ </div>
|
|
|
+ <div style="width: 90%;border: solid 1px;border-color: transparent transparent rgb(221.7, 222.6, 224.4) transparent;display: flex;align-items: center;justify-content: flex-start;">
|
|
|
+ <el-button text type="primary">全部</el-button>
|
|
|
+ <div style="font-size: 14px;">
|
|
|
+ 新安江模型服务
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ 维水动力模型服务
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ 二维水动力模型服务
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ 智能模型服务
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ 外部共享服务
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: auto">
|
|
|
+ <el-button type="primary" text>
|
|
|
+ 更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div style="background-color: rgb(243.9, 244.2, 244.8);border: solid 1px;display: flex;align-items: center;width: 10%;justify-content: center;border-color: transparent rgb(221.7, 222.6, 224.4) rgb(221.7, 222.6, 224.4) transparent;" :style="{'height':heightAll*0.2/4+'px'}">
|
|
|
+ 服务类型:
|
|
|
+ </div>
|
|
|
+ <div style="width: 90%;border: solid 1px;border-color: transparent transparent rgb(221.7, 222.6, 224.4) transparent;display: flex;align-items: center;justify-content: flex-start;">
|
|
|
+ <el-button text type="primary">全部</el-button>
|
|
|
+ <div style="font-size: 14px;">
|
|
|
+ REST
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ Web Service
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ REST-3D
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ REST DATA
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ 3DTILES SOAP
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: auto">
|
|
|
+ <el-button type="primary" text>
|
|
|
+ 更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div style="background-color: rgb(243.9, 244.2, 244.8);border: solid 1px;display: flex;align-items: center;width: 10%;justify-content: center;border-color: transparent rgb(221.7, 222.6, 224.4) rgb(221.7, 222.6, 224.4) transparent;" :style="{'height':heightAll*0.2/4+'px'}">
|
|
|
+ 开发单位:
|
|
|
+ </div>
|
|
|
+ <div style="width: 90%;border: solid 1px;border-color: transparent transparent rgb(221.7, 222.6, 224.4) transparent;display: flex;align-items: center;justify-content: flex-start;">
|
|
|
+ <el-button text type="primary">全部</el-button>
|
|
|
+ <div style="margin-left: auto">
|
|
|
+ <el-button type="primary" text>
|
|
|
+ 更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div style="background-color: rgb(243.9, 244.2, 244.8);border: solid 1px;display: flex;align-items: center;width: 10%;justify-content: center;border-color: transparent rgb(221.7, 222.6, 224.4) rgb(221.7, 222.6, 224.4) transparent;" :style="{'height':heightAll*0.2/4+'px'}">
|
|
|
+ 计算原理:
|
|
|
+ </div>
|
|
|
+ <div style="width: 90%;border: solid 1px;border-color: transparent transparent rgb(221.7, 222.6, 224.4) transparent;display: flex;align-items: center;justify-content: flex-start;">
|
|
|
+ <el-button text type="primary">全部</el-button>
|
|
|
+ <div style="font-size: 14px;">
|
|
|
+ 数学机理
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ 经验模型
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ 机器学习
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px;margin-left: 1%;">
|
|
|
+ 深度学习
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: auto">
|
|
|
+ <el-button type="primary" text>
|
|
|
+ 更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="专业工具" name="second">
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <div style="margin-top: 3%;display: flex;">
|
|
|
+ <el-card style="width: 25%;" :style="{'height':heightAll*0.33+'px'}">
|
|
|
+ <div><img style="width: 100%;" src="/public/sourceBt1.png" alt="Logo"></div>
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div style="font-size: 20px;font-weight: bold;margin-left: 1%;margin-top: 1%;">
|
|
|
+ HBV-二维水动力模型
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: auto;">
|
|
|
+ <el-button type="primary" text>
|
|
|
+ 查看<el-icon class="el-icon--right"><Right /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
|
|
|
+ <div style="font-weight: bold;">发单位:</div>
|
|
|
+ <div>水利部</div>
|
|
|
+ <div style="margin-left: auto;display: flex;">
|
|
|
+ <div style="font-weight: bold;">使用单位:</div>
|
|
|
+ <div>7家</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
|
|
|
+ <div style="font-weight: bold;">上线时间:</div>
|
|
|
+ <div>2023年5月</div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card style="width: 25%;margin-left: 1%;" :style="{'height':heightAll*0.33+'px'}">
|
|
|
+ <div><img style="width: 100%;" src="/public/sourceBt2.png" alt="Logo"></div>
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div style="font-size: 20px;font-weight: bold;margin-left: 1%;margin-top: 1%;">
|
|
|
+ 一维水动力模型
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: auto;">
|
|
|
+ <el-button type="primary" text>
|
|
|
+ 查看<el-icon class="el-icon--right"><Right /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
|
|
|
+ <div style="font-weight: bold;">发单位:</div>
|
|
|
+ <div>水利部</div>
|
|
|
+ <div style="margin-left: auto;display: flex;">
|
|
|
+ <div style="font-weight: bold;">使用单位:</div>
|
|
|
+ <div>7家</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
|
|
|
+ <div style="font-weight: bold;">上线时间:</div>
|
|
|
+ <div>2023年5月</div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card style="width: 25%;margin-left: 1%;" :style="{'height':heightAll*0.33+'px'}">
|
|
|
+ <div><img style="width: 100%;" src="/public/sourceBt3.png" alt="Logo"></div>
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div style="font-size: 20px;font-weight: bold;margin-left: 1%;margin-top: 1%;">
|
|
|
+ 新安江模型
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: auto;">
|
|
|
+ <el-button type="primary" text>
|
|
|
+ 查看<el-icon class="el-icon--right"><Right /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
|
|
|
+ <div style="font-weight: bold;">发单位:</div>
|
|
|
+ <div>水利部</div>
|
|
|
+ <div style="margin-left: auto;display: flex;">
|
|
|
+ <div style="font-weight: bold;">使用单位:</div>
|
|
|
+ <div>7家</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
|
|
|
+ <div style="font-weight: bold;">上线时间:</div>
|
|
|
+ <div>2023年5月</div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card style="width: 25%;margin-left: 1%;" :style="{'height':heightAll*0.33+'px'}">
|
|
|
+ <div><img style="width: 100%;" src="/public/sourceBt4.png" alt="Logo"></div>
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div style="font-size: 20px;font-weight: bold;margin-left: 1%;margin-top: 1%;">
|
|
|
+ API模型
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: auto;">
|
|
|
+ <el-button type="primary" text>
|
|
|
+ 查看<el-icon class="el-icon--right"><Right /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
|
|
|
+ <div style="font-weight: bold;">发单位:</div>
|
|
|
+ <div>水利部</div>
|
|
|
+ <div style="margin-left: auto;display: flex;">
|
|
|
+ <div style="font-weight: bold;">使用单位:</div>
|
|
|
+ <div>7家</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
|
|
|
+ <div style="font-weight: bold;">上线时间:</div>
|
|
|
+ <div>2023年5月</div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import {
|
|
|
+ ArrowLeft,
|
|
|
+ Plus
|
|
|
+} from '@element-plus/icons-vue'
|
|
|
+import { reactive } from 'vue'
|
|
|
+const dialogVisible = true
|
|
|
+const form = reactive({
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ date: '',
|
|
|
+})
|
|
|
|
|
|
+const checkGroup = [
|
|
|
+ {label:'水文预报'},
|
|
|
+ {label:'维水动力'},
|
|
|
+ {label:'二维水动力'},
|
|
|
+ {label:'机器学习'},
|
|
|
+]
|
|
|
+const activeName = 'first'
|
|
|
+const heightAll = window.innerHeight
|
|
|
+const valueHelpSel = '';
|
|
|
+const tableheight = window.innerHeight*0.7
|
|
|
+const options = [
|
|
|
+ {
|
|
|
+ value: 'Option1',
|
|
|
+ label: 'Option1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option2',
|
|
|
+ label: 'Option2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option3',
|
|
|
+ label: 'Option3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option4',
|
|
|
+ label: 'Option4',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option5',
|
|
|
+ label: 'Option5',
|
|
|
+ },
|
|
|
+]
|
|
|
+const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
|
|
|
+function showNode(data, node){
|
|
|
+ console.log(data,node)
|
|
|
+}
|
|
|
+</script>
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
+.el-table .el-table__row td {
|
|
|
+ height: 60px !important; /* 行高 */
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ display: flex; /* 启用 Flex 布局 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ gap: 8px; /* 图标与文字间距 */
|
|
|
+}
|
|
|
</style>
|
