|
|
@@ -1,5 +1,188 @@
|
|
|
-<script setup lang="ts"></script>
|
|
|
+<script setup lang="ts">
|
|
|
+const onOpenTemplate = () => {
|
|
|
+ console.log("onOpenTemplate");
|
|
|
+};
|
|
|
|
|
|
-<template><div>report-template</div></template>
|
|
|
+const onImportTemplate = () => {
|
|
|
+ console.log("onImportTemplate");
|
|
|
+};
|
|
|
|
|
|
-<style scoped lang="scss"></style>
|
|
|
+const onExportTemplate = () => {
|
|
|
+ console.log("onExportTemplate");
|
|
|
+};
|
|
|
+
|
|
|
+const onSaveTemplate = () => {
|
|
|
+ console.log("onSaveTemplate");
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="report-template">
|
|
|
+ <div class="left">
|
|
|
+ <div class="header">
|
|
|
+ <div class="header-left">
|
|
|
+ <div class="blue-btn" @click="onOpenTemplate">
|
|
|
+ <svg-icon icon-class="save" />
|
|
|
+ 打开模版
|
|
|
+ </div>
|
|
|
+ <div class="blue-btn" @click="onImportTemplate">
|
|
|
+ <svg-icon icon-class="report-template" />
|
|
|
+ 导入模版
|
|
|
+ </div>
|
|
|
+ <div class="blue-btn" @click="onExportTemplate">
|
|
|
+ <svg-icon icon-class="save" />
|
|
|
+ 导出模版
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div class="blue-btn" @click="onSaveTemplate">
|
|
|
+ <svg-icon icon-class="save" />
|
|
|
+ 保存模版
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="excel-container">dd</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title-header">测试项查询</div>
|
|
|
+ <el-form rer="formRef" label-position="top">
|
|
|
+ <el-form-item label="产品">
|
|
|
+ <el-input></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品编号">
|
|
|
+ <el-select placeholder="please select your zone">
|
|
|
+ <el-option label="Zone one" value="shanghai" />
|
|
|
+ <el-option label="Zone two" value="beijing" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="blue-btn" style="width: 100%" @click="onSaveTemplate">
|
|
|
+ <svg-icon icon-class="search" />
|
|
|
+ 搜索
|
|
|
+ </div>
|
|
|
+ <div class="white-line"></div>
|
|
|
+ <div class="result-text">搜索结果</div>
|
|
|
+ <div class="result-box">
|
|
|
+ <div class="result-title-text">1dB压缩点</div>
|
|
|
+ <div class="result-bar">测试时间：14:28:48</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.report-template {
|
|
|
+ display: flex;
|
|
|
+ height: calc(100vh - $main-header-height);
|
|
|
+
|
|
|
+ .left {
|
|
|
+ flex: 1;
|
|
|
+ height: calc(100vh - $main-header-height);
|
|
|
+
|
|
|
+ .header {
|
|
|
+ width: 100%;
|
|
|
+ height: 64px;
|
|
|
+ background-color: $hj-black-3;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 12px;
|
|
|
+
|
|
|
+ .header-left {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .excel-container {
|
|
|
+ height: calc(100vh - $main-header-height - 64px);
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 296px;
|
|
|
+ height: calc(100vh - $main-header-height);
|
|
|
+ background-color: $hj-black-2;
|
|
|
+ padding: 0 24px;
|
|
|
+
|
|
|
+ .white-line {
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: $hj-white-4;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .result-text {
|
|
|
+ margin-top: 11px;
|
|
|
+ height: 18px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .result-box {
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 12px 6px;
|
|
|
+ height: calc(100vh - $main-header-height - 64px - 12px - 240px);
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid #696969;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .result-title-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .result-bar {
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ background: linear-gradient(180deg, #656565 0%, #555555 100%);
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-top: 8px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.blue-btn {
|
|
|
+ width: 130px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: var(--fc-color-7);
|
|
|
+ color: var(--hj-white-1);
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.title-header {
|
|
|
+ height: 65px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: $hj-white-1;
|
|
|
+ line-height: 65px;
|
|
|
+ text-align: left;
|
|
|
+ background-color: $hj-black-2;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-form-item--label-top .el-form-item__label) {
|
|
|
+ height: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+</style>
|
