mirror of
https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
synced 2024-12-05 21:49:23 +08:00
feat(接口定义): 基本功能优化完成
This commit is contained in:
parent
5bfbf01c3d
commit
bc4aba0210
@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<ms-container>
|
<ms-container>
|
||||||
|
|
||||||
<ms-aside-container>
|
<ms-aside-container>
|
||||||
<ms-node-tree @selectModule="selectModule" @getApiModuleTree="initTree" @changeProject="changeProject" @changeProtocol="changeProtocol"
|
<ms-node-tree @selectModule="selectModule" @getApiModuleTree="initTree" @changeProject="changeProject" @changeProtocol="changeProtocol"
|
||||||
@refresh="refresh" @saveAsEdit="editApi" @debug="debug" @exportAPI="exportAPI"/>
|
@refresh="refresh" @saveAsEdit="editApi" @debug="debug" @exportAPI="exportAPI"/>
|
||||||
@ -61,6 +60,8 @@
|
|||||||
|
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</ms-main-container>
|
</ms-main-container>
|
||||||
|
|
||||||
|
|
||||||
</ms-container>
|
</ms-container>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@ -71,7 +72,6 @@
|
|||||||
import MsContainer from "../../common/components/MsContainer";
|
import MsContainer from "../../common/components/MsContainer";
|
||||||
import MsMainContainer from "../../common/components/MsMainContainer";
|
import MsMainContainer from "../../common/components/MsMainContainer";
|
||||||
import MsAsideContainer from "../../common/components/MsAsideContainer";
|
import MsAsideContainer from "../../common/components/MsAsideContainer";
|
||||||
import MsBottomContainer from "./components/BottomContainer";
|
|
||||||
import MsApiConfig from "./components/ApiConfig";
|
import MsApiConfig from "./components/ApiConfig";
|
||||||
import MsDebugHttpPage from "./components/debug/DebugHttpPage";
|
import MsDebugHttpPage from "./components/debug/DebugHttpPage";
|
||||||
import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
|
import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
|
||||||
@ -93,7 +93,6 @@
|
|||||||
MsMainContainer,
|
MsMainContainer,
|
||||||
MsContainer,
|
MsContainer,
|
||||||
MsAsideContainer,
|
MsAsideContainer,
|
||||||
MsBottomContainer,
|
|
||||||
MsApiConfig,
|
MsApiConfig,
|
||||||
MsDebugHttpPage,
|
MsDebugHttpPage,
|
||||||
MsRunTestHttpPage,
|
MsRunTestHttpPage,
|
||||||
@ -254,5 +253,8 @@
|
|||||||
/deep/ .el-tabs__header {
|
/deep/ .el-tabs__header {
|
||||||
margin-right: 82px;
|
margin-right: 82px;
|
||||||
}
|
}
|
||||||
|
/deep/ .el-main{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-container>
|
<el-container style="padding-bottom: 200px">
|
||||||
<el-header style="width: 100% ;padding: 0px">
|
<el-header style="width: 100% ;padding: 0px">
|
||||||
<el-card>
|
<el-card>
|
||||||
<el-row>
|
<el-row>
|
||||||
@ -8,24 +8,17 @@
|
|||||||
<div class="variable-combine"> {{api.name}}</div>
|
<div class="variable-combine"> {{api.name}}</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="api.protocol==='HTTP'? 1:3">
|
<el-col :span="api.protocol==='HTTP'? 1:3">
|
||||||
<template>
|
<ms-tag v-if="api.status == 'Prepare'" type="info" :content="$t('test_track.plan.plan_status_prepare')"/>
|
||||||
<div>
|
<ms-tag v-if="api.status == 'Underway'" type="primary" :content="$t('test_track.plan.plan_status_running')"/>
|
||||||
<ms-tag v-if="api.status == 'Prepare'" type="info"
|
<ms-tag v-if="api.status == 'Completed'" type="success" :content="$t('test_track.plan.plan_status_completed')"/>
|
||||||
:content="$t('test_track.plan.plan_status_prepare')"/>
|
|
||||||
<ms-tag v-if="api.status == 'Underway'" type="primary"
|
|
||||||
:content="$t('test_track.plan.plan_status_running')"/>
|
|
||||||
<ms-tag v-if="api.status == 'Completed'" type="success"
|
|
||||||
:content="$t('test_track.plan.plan_status_completed')"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="api.protocol==='HTTP'? 4:0">
|
<el-col :span="api.protocol==='HTTP'? 4:0">
|
||||||
<div class="variable-combine">{{api.path ===null ? " " : api.path}}</div>
|
<div class="variable-combine" style="margin-left: 10px">{{api.path ===null ? " " : api.path}}</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="2">
|
<el-col :span="2">
|
||||||
<div>{{$t('test_track.plan_view.case_count')}}:{{apiCaseList.length}}</div>
|
<div>{{$t('test_track.plan_view.case_count')}}:{{apiCaseList.length}}</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="4">
|
<el-col :span="3">
|
||||||
<div>
|
<div>
|
||||||
<el-select size="small" :placeholder="$t('api_test.definition.request.grade_info')" v-model="priorityValue"
|
<el-select size="small" :placeholder="$t('api_test.definition.request.grade_info')" v-model="priorityValue"
|
||||||
class="ms-api-header-select" @change="getApiTest">
|
class="ms-api-header-select" @change="getApiTest">
|
||||||
@ -71,7 +64,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1">
|
<el-col :span="2">
|
||||||
<button type="button" aria-label="Close" class="el-card-btn" @click="apiCaseClose()"><i
|
<button type="button" aria-label="Close" class="el-card-btn" @click="apiCaseClose()"><i
|
||||||
class="el-dialog__close el-icon el-icon-close"></i></button>
|
class="el-dialog__close el-icon el-icon-close"></i></button>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -87,10 +80,9 @@
|
|||||||
<!-- 用例部分 -->
|
<!-- 用例部分 -->
|
||||||
<el-main v-loading="loading">
|
<el-main v-loading="loading">
|
||||||
<div v-for="(item,index) in apiCaseList" :key="index">
|
<div v-for="(item,index) in apiCaseList" :key="index">
|
||||||
<el-card style="margin-top: 10px" @click.native="selectTestCase(item,$event)">
|
<el-card style="margin-top: 5px" @click.native="selectTestCase(item,$event)">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="5">
|
<el-col :span="5">
|
||||||
|
|
||||||
<div class="el-step__icon is-text ms-api-col">
|
<div class="el-step__icon is-text ms-api-col">
|
||||||
<div class="el-step__icon-inner">{{index+1}}</div>
|
<div class="el-step__icon-inner">{{index+1}}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -100,14 +92,13 @@
|
|||||||
<el-option v-for="grd in priority" :key="grd.id" :label="grd.name" :value="grd.id"/>
|
<el-option v-for="grd in priority" :key="grd.id" :label="grd.name" :value="grd.id"/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<i class="icon el-icon-arrow-right" :class="{'is-active': item.active}"
|
<i class="icon el-icon-arrow-right" :class="{'is-active': item.active}"
|
||||||
@click="active(item)"/>
|
@click="active(item)"/>
|
||||||
|
|
||||||
<el-input v-if="item.type==='create'" size="small" v-model="item.name" :name="index" :key="index"
|
<el-input v-if="item.type==='create'" size="small" v-model="item.name" :name="index" :key="index"
|
||||||
class="ms-api-header-select" style="width: 180px"
|
class="ms-api-header-select" style="width: 180px"
|
||||||
@blur="saveTestCase(item)"
|
@blur="saveTestCase(item)"/>
|
||||||
/>
|
|
||||||
<span v-else>
|
<span v-else>
|
||||||
{{item.type!= 'create' ? item.name:''}}
|
{{item.type!= 'create' ? item.name:''}}
|
||||||
<i class="el-icon-edit" style="cursor:pointer" @click="showInput(item)"/>
|
<i class="el-icon-edit" style="cursor:pointer" @click="showInput(item)"/>
|
||||||
@ -117,6 +108,7 @@
|
|||||||
<span> {{item.updateTime | timestampFormatDate }}</span> {{item.updateUser}} 更新
|
<span> {{item.updateTime | timestampFormatDate }}</span> {{item.updateUser}} 更新
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="4">
|
<el-col :span="4">
|
||||||
<ms-tip-button @click="singleRun(item)" :tip="$t('api_test.run')" icon="el-icon-video-play"
|
<ms-tip-button @click="singleRun(item)" :tip="$t('api_test.run')" icon="el-icon-video-play"
|
||||||
style="background-color: #409EFF;color: white" size="mini" circle/>
|
style="background-color: #409EFF;color: white" size="mini" circle/>
|
||||||
@ -487,8 +479,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 14px;
|
font-size: 10px;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.is-active {
|
.icon.is-active {
|
||||||
|
@ -1,100 +1,102 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div class="card-container">
|
|
||||||
<el-card class="card-content">
|
|
||||||
<template v-slot:header>
|
|
||||||
<ms-table-header :showCreate="false" :condition.sync="condition" @search="search"
|
|
||||||
:title="$t('api_test.definition.api_title')"/>
|
|
||||||
</template>
|
|
||||||
<el-table border :data="tableData" row-key="id" class="test-content adjust-table"
|
|
||||||
@select-all="handleSelectAll"
|
|
||||||
@select="handleSelect">
|
|
||||||
<el-table-column type="selection"/>
|
|
||||||
<el-table-column width="40" :resizable="false" align="center">
|
|
||||||
<template v-slot:default="scope">
|
|
||||||
<show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectRows.size"/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column prop="name" :label="$t('api_test.definition.api_name')" show-overflow-tooltip/>
|
<div id="svgBox" style="overflow: auto">
|
||||||
<el-table-column
|
<div id="svgTop" style="background-color: white">
|
||||||
prop="status"
|
<el-card class="card-content">
|
||||||
column-key="api_status"
|
<!--<ms-table-header :showCreate="false" :condition.sync="condition" @search="search"-->
|
||||||
:label="$t('api_test.definition.api_status')"
|
<!--:title="$t('api_test.definition.api_title')"/>-->
|
||||||
show-overflow-tooltip>
|
<el-input placeholder="搜索" @blur="search" style="float: right ;width: 300px;margin-bottom: 20px;margin-right: 20px" size="small" v-model="condition.name"/>
|
||||||
<template v-slot:default="scope">
|
<el-table border :data="tableData" row-key="id" class="test-content adjust-table"
|
||||||
<ms-tag v-if="scope.row.status == 'Prepare'" type="info"
|
@select-all="handleSelectAll"
|
||||||
:content="$t('test_track.plan.plan_status_prepare')"/>
|
@select="handleSelect" :height="screenHeight">
|
||||||
<ms-tag v-if="scope.row.status == 'Underway'" type="primary"
|
<el-table-column type="selection"/>
|
||||||
:content="$t('test_track.plan.plan_status_running')"/>
|
<el-table-column width="40" :resizable="false" align="center">
|
||||||
<ms-tag v-if="scope.row.status == 'Completed'" type="success"
|
<template v-slot:default="scope">
|
||||||
:content="$t('test_track.plan.plan_status_completed')"/>
|
<show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectRows.size"/>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column
|
<el-table-column prop="name" :label="$t('api_test.definition.api_name')" show-overflow-tooltip/>
|
||||||
prop="method"
|
<el-table-column
|
||||||
:label="$t('api_test.definition.api_type')"
|
prop="status"
|
||||||
show-overflow-tooltip>
|
column-key="api_status"
|
||||||
<template v-slot:default="scope" class="request-method">
|
:label="$t('api_test.definition.api_status')"
|
||||||
<el-tag size="mini"
|
show-overflow-tooltip>
|
||||||
:style="{'background-color': getColor(true, scope.row.method)}" class="api-el-tag"> {{ scope.row.method
|
<template v-slot:default="scope">
|
||||||
}}
|
<ms-tag v-if="scope.row.status == 'Prepare'" type="info"
|
||||||
</el-tag>
|
:content="$t('test_track.plan.plan_status_prepare')"/>
|
||||||
</template>
|
<ms-tag v-if="scope.row.status == 'Underway'" type="primary"
|
||||||
</el-table-column>
|
:content="$t('test_track.plan.plan_status_running')"/>
|
||||||
|
<ms-tag v-if="scope.row.status == 'Completed'" type="success"
|
||||||
|
:content="$t('test_track.plan.plan_status_completed')"/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="path"
|
prop="method"
|
||||||
:label="$t('api_test.definition.api_path')"
|
:label="$t('api_test.definition.api_type')"
|
||||||
show-overflow-tooltip/>
|
show-overflow-tooltip>
|
||||||
|
<template v-slot:default="scope" class="request-method">
|
||||||
|
<el-tag size="mini"
|
||||||
|
:style="{'background-color': getColor(true, scope.row.method)}" class="api-el-tag"> {{ scope.row.method
|
||||||
|
}}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="userName"
|
prop="path"
|
||||||
:label="$t('api_test.definition.api_principal')"
|
:label="$t('api_test.definition.api_path')"
|
||||||
show-overflow-tooltip/>
|
show-overflow-tooltip/>
|
||||||
|
|
||||||
<el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime">
|
<el-table-column
|
||||||
<template v-slot:default="scope">
|
prop="userName"
|
||||||
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
|
:label="$t('api_test.definition.api_principal')"
|
||||||
</template>
|
show-overflow-tooltip/>
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column
|
<el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime">
|
||||||
prop="caseTotal"
|
<template v-slot:default="scope">
|
||||||
:label="$t('api_test.definition.api_case_number')"
|
<span>{{ scope.row.updateTime | timestampFormatDate }}</span>
|
||||||
show-overflow-tooltip/>
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="caseStatus"
|
prop="caseTotal"
|
||||||
:label="$t('api_test.definition.api_case_status')"
|
:label="$t('api_test.definition.api_case_number')"
|
||||||
show-overflow-tooltip/>
|
show-overflow-tooltip/>
|
||||||
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="casePassingRate"
|
prop="caseStatus"
|
||||||
:label="$t('api_test.definition.api_case_passing_rate')"
|
:label="$t('api_test.definition.api_case_status')"
|
||||||
show-overflow-tooltip/>
|
show-overflow-tooltip/>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
prop="casePassingRate"
|
||||||
|
:label="$t('api_test.definition.api_case_passing_rate')"
|
||||||
|
show-overflow-tooltip/>
|
||||||
|
|
||||||
|
|
||||||
<el-table-column :label="$t('commons.operating')" min-width="130" align="center">
|
<el-table-column :label="$t('commons.operating')" min-width="130" align="center">
|
||||||
<template v-slot:default="scope">
|
<template v-slot:default="scope">
|
||||||
<el-button type="text" @click="editApi(scope.row)">编辑</el-button>
|
<el-button type="text" @click="editApi(scope.row)">编辑</el-button>
|
||||||
<el-button type="text" @click="handleTestCase(scope.row)">用例</el-button>
|
<el-button type="text" @click="handleTestCase(scope.row)">用例</el-button>
|
||||||
<el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button>
|
<el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
<ms-table-pagination :change="initApiTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
|
||||||
<ms-table-pagination :change="initApiTable" :current-page.sync="currentPage" :page-size.sync="pageSize"
|
:total="total"/>
|
||||||
:total="total"/>
|
</el-card>
|
||||||
|
</div>
|
||||||
</el-card>
|
<div id="svgResize"/>
|
||||||
|
<div id="svgDown">
|
||||||
<ms-bottom-container v-bind:enableAsideHidden="isHide">
|
<ms-bottom-container v-bind:enableAsideHidden="isHide">
|
||||||
<ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="initApiTable" :api="selectApi" :current-project="currentProject"/>
|
<ms-api-case-list @apiCaseClose="apiCaseClose" @refresh="initApiTable" :api="selectApi" :current-project="currentProject"/>
|
||||||
</ms-bottom-container>
|
</ms-bottom-container>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -140,6 +142,7 @@
|
|||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
|
screenHeight: document.documentElement.clientHeight - 350,//屏幕高度
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@ -150,6 +153,9 @@
|
|||||||
created: function () {
|
created: function () {
|
||||||
this.initApiTable();
|
this.initApiTable();
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.dragControllerDiv();
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
currentProject() {
|
currentProject() {
|
||||||
this.initApiTable();
|
this.initApiTable();
|
||||||
@ -162,7 +168,7 @@
|
|||||||
currentProtocol() {
|
currentProtocol() {
|
||||||
this.initApiTable();
|
this.initApiTable();
|
||||||
this.apiCaseClose();
|
this.apiCaseClose();
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initApiTable() {
|
initApiTable() {
|
||||||
@ -247,6 +253,14 @@
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleTestCase(testCase) {
|
handleTestCase(testCase) {
|
||||||
|
let h = window.screen.height;
|
||||||
|
|
||||||
|
let svgTop = document.getElementById("svgTop");
|
||||||
|
svgTop.style.height = h / 2 - 200 + "px";
|
||||||
|
|
||||||
|
let svgDown = document.getElementById("svgDown");
|
||||||
|
svgDown.style.height = h / 2 + "px";
|
||||||
|
|
||||||
this.selectApi = testCase;
|
this.selectApi = testCase;
|
||||||
let request = JSON.parse(testCase.request);
|
let request = JSON.parse(testCase.request);
|
||||||
this.selectApi.url = request.path;
|
this.selectApi.url = request.path;
|
||||||
@ -259,6 +273,13 @@
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
apiCaseClose() {
|
apiCaseClose() {
|
||||||
|
let h = window.screen.height;
|
||||||
|
|
||||||
|
let svgTop = document.getElementById("svgTop");
|
||||||
|
svgTop.style.height = h - 200 + "px";
|
||||||
|
|
||||||
|
let svgDown = document.getElementById("svgDown");
|
||||||
|
svgDown.style.height = 0 + "px";
|
||||||
this.isHide = true;
|
this.isHide = true;
|
||||||
},
|
},
|
||||||
getColor(enable, method) {
|
getColor(enable, method) {
|
||||||
@ -266,6 +287,33 @@
|
|||||||
return this.methodColorMap.get(method);
|
return this.methodColorMap.get(method);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
dragControllerDiv: function () {
|
||||||
|
let svgResize = document.getElementById("svgResize");
|
||||||
|
let svgTop = document.getElementById("svgTop");
|
||||||
|
let svgDown = document.getElementById("svgDown");
|
||||||
|
let svgBox = document.getElementById("svgBox");
|
||||||
|
svgResize.onmousedown = function (e) {
|
||||||
|
let startY = e.clientY;
|
||||||
|
svgResize.top = svgResize.offsetTop;
|
||||||
|
document.onmousemove = function (e) {
|
||||||
|
let endY = e.clientY;
|
||||||
|
let moveLen = svgResize.top + (endY - startY);
|
||||||
|
let maxT = svgBox.clientHeight - svgResize.offsetHeight;
|
||||||
|
if (moveLen < 30) moveLen = 30;
|
||||||
|
if (moveLen > maxT - 30) moveLen = maxT - 30;
|
||||||
|
svgResize.style.top = moveLen;
|
||||||
|
svgTop.style.height = moveLen + "px";
|
||||||
|
svgDown.style.height = (svgBox.clientHeight - moveLen - 5) + "px";
|
||||||
|
}
|
||||||
|
document.onmouseup = function (evt) {
|
||||||
|
document.onmousemove = null;
|
||||||
|
document.onmouseup = null;
|
||||||
|
svgResize.releaseCapture && svgResize.releaseCapture();
|
||||||
|
}
|
||||||
|
svgResize.setCapture && svgResize.setCapture();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -284,4 +332,33 @@
|
|||||||
.api-el-tag {
|
.api-el-tag {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#svgBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#svgTop {
|
||||||
|
height: calc(30% - 5px);
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#svgResize {
|
||||||
|
position: relative;
|
||||||
|
height: 5px;
|
||||||
|
width: 100%;
|
||||||
|
cursor: s-resize;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#svgDown {
|
||||||
|
height: 70%;
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-aside :width="width" class="ms-aside-container"
|
<el-aside :width="width" class="ms-aside-container"
|
||||||
:style="{'margin-left': !enableAsideHidden ? 0 : '-' + width}">
|
:style="{'margin-left': !enableAsideHidden ? 0 : '-' + width}">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</el-aside>
|
</el-aside>
|
||||||
</template>
|
</template>
|
||||||
@ -23,9 +23,8 @@
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.ms-aside-container {
|
.ms-aside-container {
|
||||||
border: 1px solid #E6E6E6;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
height: 600px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user