monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 袁晋鹏
Commit f63eb1286275367f6e5f29dbb96f21c6c5365a11 1 parent a14665f3

可视化页面优化

Inline Side-by-side
Showing 3 changed files with 64 additions and 21 deletions
... ... @@ -69,9 +69,13 @@
}
.container .cm-card .search-table {
padding: 0px 6px;
}
padding: 0px 3px;
}
.el-table__body, .el-table__footer, .el-table__header{
width: auto;
max-width: calc(100% - 10px);
}
/*
共通弹框配置样式
custom-class="config-dialog"
... ... @@ -130,7 +134,6 @@ custom-class="config-dialog"
background: #ffffff;
padding: 20px 5px 0;
}
.breadcrumb .el-breadcrumb .el-breadcrumb__item {
cursor: pointer;
}
... ...
<div >
<div style="width:auto;height: 100%">
<!-- 表格-->
<el-table :border="showBorder" v-loading="loading" :size="size" ref="multipleTable" @selection-change="handleSelectionChange" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
style="width: 100%;margin: 0px 0px; font-size:13.5px;" :row-key="getRowKeys" :expand-row-keys="expands">
<el-table class="table-style-custom" :border="showBorder" v-loading="loading" :size="size" ref="multipleTable"
@selection-change="handleSelectionChange" :data="dataList"
:height="height"
:row-key="getRowKeys" :expand-row-keys="expands">
<el-table-column type="expand" v-if="showExpand">
<template #default="scope">
<slot name="expand" :scope="scope" >
<slot name="expand" :scope="scope">
</slot>
</template>
</el-table-column>
<el-table-column v-if="showSelection && columns.length > 0" align="center" type="selection" width="55" />
<el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/>
<el-table-column v-if="showSelection && columns.length > 0" align="center" type="selection" width="55"/>
<el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center"
width="50"/>
<el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :sortable="item.sortable == undefined ? false : item.sortable" :align="item.align == undefined ? 'center' : item.align "
<el-table-column v-for="item in columns" :prop="item.prop" :label="item.label"
:sortable="item.sortable == undefined ? false : item.sortable"
:align="item.align == undefined ? 'center' : item.align "
:width="getWidth(item.width)">
<template #default="scope">
<slot :row="scope.row" :prop="item.prop" :column="item">
<div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'">
<span style="cursor: pointer" @click="item.click(scope.row)" v-html="item.render(scope.row)"></span>
<div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'">
<span style="cursor: pointer" @click="item.click(scope.row)"
v-html="item.render(scope.row)"></span>
</div>
<div v-else-if="typeof(item.click) == 'function'" >
<div v-else-if="typeof(item.click) == 'function'">
<span style="cursor: pointer" @click="item.click(scope.row)"> {{scope.row[item.prop]}}</span>
</div>
<div v-else-if="typeof(item.render) == 'function'" >
<div v-else-if="typeof(item.render) == 'function'">
<span v-html="item.render(scope.row)">{{scope.row[item.prop]}}</span>
</div>
... ... @@ -42,9 +48,9 @@
</template>
</el-table-column>
<el-table-column v-if="showTools && columns.length > 0" label="操作" width="80" align="center">
<el-table-column v-if="showTools && columns.length > 0" label="操作" width="80" align="center">
<template #default="scope">
<slot name="tools" :scope="scope" ></slot>
<slot name="tools" :scope="scope"></slot>
</template>
</el-table-column>
</el-table>
... ... @@ -63,4 +69,39 @@
</el-pagination>
</div>
</div>
<style lang="scss" scoped>
.table-style-custom {
width: calc(100% - 10px);
max-width: calc(100% - 10px);
margin: 5px auto;
border: 1px solid #4d5457; /* 表格整体的边框样式 */
border-top: 1px solid #4d5457;
border-left: 1px solid #4d5457;
//background-color: #131720;
}
.table-style-custom .el-table__body-wrapper .el-table__body,.table-style-custom .el-table__header-wrapper .el-table__header{
width: auto;
max-width: calc(100% - 10px);
}
.table-style-custom .el-table__header tr, .el-table__header th {
height: 40px;
padding: 0;
color: #ccd3cc;
background-color: #131720;
}
.table-style-custom .el-table__body tr, .el-table__body td {
padding: 0;
height: 40px;
color: #ccd3cc;
background-color: #2e313d;
}
.table-style-custom .el-table__body tr.current-row > td,
.table-style-custom .el-table__body tr:hover > td {
color: #07f;
cursor: pointer;
background-color: #363c53 !important;
}
</style>
\ No newline at end of file
... ...
... ... @@ -21,7 +21,7 @@
<el-button @click="addAj()" style="margin-left: 10px">新增</el-button>
</el-form-item>
</div>
<div class="design" style="float:right;padding-left: 1200px">
<div class="design" style="float:right;">
<el-form-item>
<el-button type="primary" @click="handleView()" style="margin-left: 10px">设计</el-button>
</el-form-item>
... ... @@ -32,7 +32,7 @@
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count" :showSelection="true"
:showBorder="true" :loading="false" :pageSize="pageSize"
:showPage="true" :showTools="true" :height="(height - 130)" >
:showPage="true" :showTools="true" :height="(height - 130)" style="width:calc(100% - 10px);">
<template #default="{row,prop,column}">
<div v-if="prop == 'type'">
<div v-if="row.type == 0">
... ... @@ -88,7 +88,6 @@
<el-radio v-model="ajConfigFrom.type" label="1" size="large">按钮</el-radio>
<el-radio v-model="ajConfigFrom.type" label="2" size="large">详情页</el-radio>
</div>
<!-- <div style="height: 15px; color: darkgrey">说明：参数中间用'&'拼接</div>-->
</el-form-item>
... ... @@ -98,7 +97,7 @@
allow-create
default-first-option
:reserve-keyword="false"
placeholder="请选择" style="width: 555px;">
placeholder="请选择" style="width: calc(100% - 10px);">
<el-option
v-for="item in menuOptions"
:key="item.value"
... ... @@ -123,7 +122,7 @@
allow-create
default-first-option
:reserve-keyword="false"
placeholder="请选择" style="width: 510px;">
placeholder="请选择" style="width: calc(100% - 10px);">
<el-option
v-for="item in options"
:key="item.value"
... ...