|
@@ -0,0 +1,142 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div style="max-height: 100vh;width: 100%;overflow-y: auto;">
|
|
|
|
|
+ <div style="width: 90%;margin-left: 5%;height: 100%;box-sizing: border-box;">
|
|
|
|
|
+ <div style="background-color: #F5F6F8;height: 35vh;width: 100%;display: flex; flex-direction: column;">
|
|
|
|
|
+ <div style="display: flex;padding-top: 10%;margin-left: 10%;">
|
|
|
|
|
+ <el-input v-model="formTree1" style="width: 20%;height: 35px;" placeholder=""/>
|
|
|
|
|
+ <el-button type="primary" style="margin-left: 0%;height: 35px;width: 80px;" @click="getModelListTable">查询</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="display: flex;width: 100%;height: 10vh;width: 100%;background-color: rgba(217, 236, 255,0.2);margin-top: auto;">
|
|
|
|
|
+ <div style="width: 25%;text-align: center;display: flex;justify-content: center;align-items: center;">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <svg-icon icon-class="申请" style="height: 2rem;width:2rem;"/>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-left: 1%;">
|
|
|
|
|
+ <div style="font-size: 15px;">接口数</div>
|
|
|
|
|
+ <div style="font-size: 20px;font-weight: bold;">256</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 25%;text-align: center;display: flex;justify-content: center;align-items: center;">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <svg-icon icon-class="申请" style="height: 2rem;width:2rem;"/>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-left: 1%;">
|
|
|
|
|
+ <div style="font-size: 15px;">库表数</div>
|
|
|
|
|
+ <div style="font-size: 20px;font-weight: bold;">256</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 25%;text-align: center;display: flex;justify-content: center;align-items: center;">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <svg-icon icon-class="申请" style="height: 2rem;width:2rem;"/>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-left: 1%;">
|
|
|
|
|
+ <div style="font-size: 15px;">文件数</div>
|
|
|
|
|
+ <div style="font-size: 20px;font-weight: bold;">256</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 25%;text-align: center;display: flex;justify-content: center;align-items: center;">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <svg-icon icon-class="申请" style="height: 2rem;width:2rem;"/>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="margin-left: 1%;">
|
|
|
|
|
+ <div style="font-size: 15px;">已发布目录</div>
|
|
|
|
|
+ <div style="font-size: 20px;font-weight: bold;">256</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 100%;text-align: center;font-size: 20px;margin-top: 1%;">
|
|
|
|
|
+ 资源类目
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 80%;margin-left: 10%;margin-top: 1%;height: 32vh;">
|
|
|
|
|
+ <el-tabs v-model="activeName" class="demo-tabs" style="width: 100%;">
|
|
|
|
|
+ <el-tab-pane label="接入数据" name="first" style="height: 30vh;">
|
|
|
|
|
+ <div style="height: 25vh;width:98%;box-shadow: 0 0 5px 1px #ccc;margin-top: 1%;margin-left: 1%;">
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-tab-pane>
|
|
|
|
|
+ <el-tab-pane label="核心数据" name="second">
|
|
|
|
|
+
|
|
|
|
|
+ </el-tab-pane>
|
|
|
|
|
+ <el-tab-pane label="应用数据" name="third">
|
|
|
|
|
+
|
|
|
|
|
+ </el-tab-pane>
|
|
|
|
|
+ </el-tabs>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div style="width: 100%;margin-top: 2%;height:75vh;">
|
|
|
|
|
+ <div style="width: 100%;background-color: #F1F4F9;margin-top: 1%;height: 60vh;">
|
|
|
|
|
+ <div style="width: 100%;text-align: center;font-size: 20px;padding-top:1%;">
|
|
|
|
|
+ 数据动态
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 90%;margin-left: 5%;height: 25vh;box-shadow: 0 0 2px 1px #ccc;margin-top: 1%;display: flex;">
|
|
|
|
|
+ <div style="width: 15%;height: 100%;background-color: blue;">
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="grid-container">
|
|
|
|
|
+ <div v-for="index in 9" :key="index" class="grid-item">
|
|
|
|
|
+ {{ index }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="width: 90%;margin-left: 5%;height: 25vh;box-shadow: 0 0 2px 1px #ccc;margin-top: 1%;display: flex;">
|
|
|
|
|
+ <div style="width: 15%;height: 100%;background-color: blue;">
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="grid-container">
|
|
|
|
|
+ <div v-for="index in 9" :key="index" class="grid-item">
|
|
|
|
|
+ {{ index }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
|
+const activeName = ref('first')
|
|
|
|
|
+const formTree = ref({
|
|
|
|
|
+ itemName: '',
|
|
|
|
|
+ catePid: '',
|
|
|
|
|
+ itemNo: '',
|
|
|
|
|
+ itemNotes: ''
|
|
|
|
|
+});
|
|
|
|
|
+const rulesTree = reactive({
|
|
|
|
|
+ itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
|
|
+ catePid: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
|
|
+ itemName: [{ required: true, message: '必填', trigger: 'blur' }],
|
|
|
|
|
+});
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+});
|
|
|
|
|
+</script>
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.borderBack:hover {
|
|
|
|
|
+ box-shadow: 0 0 5px 1px #ccc;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
+:deep(.demo-tabs .el-tabs__nav-scroll) {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+}
|
|
|
|
|
+:deep(.el-tabs__nav-wrap::after) {
|
|
|
|
|
+ position: static !important;
|
|
|
|
|
+}
|
|
|
|
|
+.grid-container {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
|
|
|
|
|
+ grid-template-rows: repeat(3, 1fr); /* 3行等高 */
|
|
|
|
|
+ gap: 2px; /* 网格间距 */
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.grid-item {
|
|
|
|
|
+ background-color: #f0f0f0;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|