diff --git a/bin/main/static/src/App.vue b/bin/main/static/src/App.vue new file mode 100644 index 0000000..7eaec8c --- /dev/null +++ b/bin/main/static/src/App.vue @@ -0,0 +1,310 @@ + + + + + diff --git a/bin/main/static/src/assets/scss/style.scss b/bin/main/static/src/assets/scss/style.scss new file mode 100644 index 0000000..bd1c803 --- /dev/null +++ b/bin/main/static/src/assets/scss/style.scss @@ -0,0 +1,238 @@ +@use "theme.scss"; +@use "theme-black.scss"; +@use "theme-green.scss"; +// // https://fonts.google.com/icons?icon.set=Material+Symbols +@use 'material-symbols/outlined.css'; + + +html, body{ + padding: 0; + margin: 0; + width: 100%; + height: 100%; + color: #333; + overflow: auto; +} +#app{ + width: 100%; + height: 100%; +} +ul{ + padding: 0; + margin: 0; + li{ + list-style: none; + } +} + +/* 做字体自适应的媒体查询,pc为主的写法 https://juejin.cn/post/6844903814332432397 */ +/* pc width > 1100px */ +html{ + font-size: 16px +} +body { + font-size: 1.2rem; +} +/* ipad pro */ +@media screen and (max-width: 1024px) { + html { + font-size: 14px; + } +} +/* ipad */ +@media screen and (max-width: 768px) { + html { + font-size: 12px; + } +} +/* iphone6 7 8 plus */ +@media screen and (max-width: 414px) { + html { + font-size: 12px; + } +} +/* iphoneX */ +@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) { + html { + font-size: 12px; + } +} +/* iphone6 7 8 */ +@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) { + html { + font-size: 12px; + } +} +/* iphone5 */ +@media screen and (max-width: 320px) { + html { + font-size: 12px + ; + } +} + + +/* pc或者pad */ +@media(max-width: theme.$size-mobile-max-width){ + .mobile-none{ + display: none !important; + } +} + +/* 移动端 */ +@media(min-width: theme.$size-mobile-max-width){ + .mobile-only{ + display: none !important; + } +} + +.material-symbols-outlined { + font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48; + vertical-align: sub; +} + +.field-header{ + font-size: 1rem; + color: theme.$color; + display: flex; + .caption{ + font-weight: bold; + padding: 0 1em; + } + .title{ + flex: 1; + } +} +.field-list{ + align-self: stretch; + margin : 0.5em 0; + flex: 1 0 auto; + + display: flex; + flex-flow: column nowrap; + align-items: flex-start; + gap: 0 1em; + color: theme.$color; + + .box-field{ + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 0 1em; + border-bottom: 1px solid theme.$color; + align-self: stretch; + flex: 0 0 auto; + + @mixin field-gap{ + padding: 4px 8px; + } + + .field-key{ + color: 1px solid theme.$color; + font-weight: bold; + width: 10em; + @include field-gap; + } + + .field-desc{ + width: 6em; + @include field-gap; + } + + .field-range{ + flex-flow: row wrap; + flex: 1 0 auto; + } + + .field-action{ + flex: 0 0 auto; + margin: 2px; + } + + .field-description{ + flex: 1 1 auto; + white-space: nowrap; + @include field-gap; + } + + input{ + margin: 4px; + text-align: center; + } + } +} + +/* 滚动条样式 */ +::-webkit-scrollbar{ + width:6px;height:6px; + background-color: #00000040; +} +::-webkit-scrollbar-thumb{ + background-color:#9a9a9a;/*rgba(0,0,0,1);*/ + border-radius:10px; +} +::-webkit-scrollbar-track{ + background-color:transparent; +} + +@keyframes fadeOut { + 90% { + opacity: 0.9; + } + 80% { + opacity: 0.8; + } + 50%, + 70% { + opacity: 0.7; + } + 60% { + opacity: 0.6; + } + 50% { + opacity: 0.5; + } + 40%{ + opacity: 0.4; + } + 30% { + opacity: 0.3; + } + 20% { + opacity: 0.2; + } + 10% { + opacity: 0.1; + } +} + +@keyframes shrink { + 90% { + font-size: 0.9rem; + } + 80% { + font-size: 0.8rem; + } + 50%, + 70% { + font-size: 0.7rem; + } + 60% { + font-size: 0.6rem; + } + 50% { + font-size: 0.5rem; + } + 40%{ + font-size: 0.4rem; + } + 30% { + font-size: 0.3rem; + } + 20% { + font-size: 0.2rem; + } + 10% { + font-size: 0.1rem; + } +} \ No newline at end of file diff --git a/bin/main/static/src/router/index.ts b/bin/main/static/src/router/index.ts new file mode 100644 index 0000000..551b24a --- /dev/null +++ b/bin/main/static/src/router/index.ts @@ -0,0 +1,136 @@ +import { + createRouter, + RouteRecordRaw, + Router, + createWebHistory, +} from "vue-router"; + +const routes: Array = [ + { + path: "/", + name: "Home", + redirect: '/Analyzor', + meta: { + hidden: true + } + }, + { + path: "/TaskGroup", + name: "TaskGroup", + redirect: '/Analyzor', + component: () => import("@/views/Analyzor/index.vue"), + meta: { + hidden: false, + title: "分析结果", + icon: "tenancy" + }, + children: [ + { + path: '/Analyzor', + name: 'Analyzor', + component: () => import('@/views/Analyzor/taskGroup.vue'), + meta: { + hidden: true + }, + children: [ + { + path: ':op', + name: 'Aggregation', + component: () => import('@/views/Analyzor/aggregation.vue'), + meta: { + hidden: 'true', + title: '计数&极值' + } + }, + { + path: ':op', + name: 'Group-aggregation', + component: () => import('@/views/Analyzor/group-aggregation.vue'), + meta: { + hidden: 'true', + title: '数值分布' + } + } + ] + } + ] + }, + { + path: '/TaskManager', + name: 'TaskManager', + component: () => import("@/views/TaskManager/index.vue"), + meta: { + hidden: false, + title: "任务管理", + icon: "task" + }, + children: [ + { + path: ':id', + name: 'TaskDetail', + component: () => import("@/views/TaskManager/detail.vue"), + meta: { + hidden: true, + title: '详情' + } + } + ] + }, + { + path: '/NewAnalyzor', + name: 'NewAnalyzor', + component: () => import("@/views/NewAnalyzor/index.vue"), + meta: { + hidden: false, + title: "新建任务", + icon: "add_box" + }, + children: [ + { + path: 'dataSheet', + name: 'DataSheet', + component: () => import("@/views/NewAnalyzor/detection/dataSheet.vue"), + meta: { + hidden: true, + title: "选择指标" + }, + children: [ + { + path: '/:id', + name: 'DataField', + component: () => import("@/views/NewAnalyzor/detection/dataField.vue"), + meta: { + hidden: true, + title: "摘要" + } + } + ] + } + ] + }, + { + path: "/login", + name: "Login", + component: () => import("@/views/login.vue"), + meta: { + hidden: true, + title: "登录" + }, + }, + { + // vue-router@4的变化,舍弃*通配符 + // 官方文档:https://next.router.vuejs.org/zh/guide/migration/index.html#%E5%88%A0%E9%99%A4%E4%BA%86-%EF%BC%88%E6%98%9F%E6%A0%87%E6%88%96%E9%80%9A%E9%85%8D%E7%AC%A6%EF%BC%89%E8%B7%AF%E7%94%B1 + path: "/:pathMatch(.*)*", + name: "404", + component: () => import("@/views/404.vue"), + meta: { + hidden: true + } + }, +]; +const router: Router = createRouter({ + history: createWebHistory(), + routes, +}); + +export default router; diff --git a/src/main/resources/static/src/views/analyzorResult/aggregation.vue b/bin/main/static/src/views/Analyzor/aggregation.vue similarity index 100% rename from src/main/resources/static/src/views/analyzorResult/aggregation.vue rename to bin/main/static/src/views/Analyzor/aggregation.vue diff --git a/src/main/resources/static/src/views/analyzorResult/detail.vue b/bin/main/static/src/views/Analyzor/detail.vue similarity index 100% rename from src/main/resources/static/src/views/analyzorResult/detail.vue rename to bin/main/static/src/views/Analyzor/detail.vue diff --git a/src/main/resources/static/src/views/analyzorResult/group-aggregation.vue b/bin/main/static/src/views/Analyzor/group-aggregation.vue similarity index 100% rename from src/main/resources/static/src/views/analyzorResult/group-aggregation.vue rename to bin/main/static/src/views/Analyzor/group-aggregation.vue diff --git a/src/main/resources/static/src/views/analyzorResult/index.vue b/bin/main/static/src/views/Analyzor/index.vue similarity index 100% rename from src/main/resources/static/src/views/analyzorResult/index.vue rename to bin/main/static/src/views/Analyzor/index.vue diff --git a/src/main/resources/static/src/views/analyzorResult/taskGroup.vue b/bin/main/static/src/views/Analyzor/taskGroup.vue similarity index 98% rename from src/main/resources/static/src/views/analyzorResult/taskGroup.vue rename to bin/main/static/src/views/Analyzor/taskGroup.vue index 94d5238..cee68fb 100644 --- a/src/main/resources/static/src/views/analyzorResult/taskGroup.vue +++ b/bin/main/static/src/views/Analyzor/taskGroup.vue @@ -70,7 +70,7 @@