feat: 优化样式，完善LogManage页面
This commit is contained in:
parent
407fd4e09c
commit
ce82c2c7ea
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="search-form">
|
||||
<a-form-model ref="form" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
|
||||
<a-row :gutter="20" style="margin-right: 0 !important;">
|
||||
<a-row v-if="type == 'single-line'" :gutter="20" style="margin-right: 0 !important;">
|
||||
<a-col
|
||||
class="search-form-item"
|
||||
v-for="(item, index) in items"
|
||||
|
|
@ -19,6 +19,21 @@
|
|||
</a-button>
|
||||
<slot name="additional"></slot>
|
||||
</a-row>
|
||||
<!-- 多行自定义 -->
|
||||
<template v-else-if="type == 'multi-line'">
|
||||
<a-row v-for="(item, index) in items" :key="index" :gutter="20" :style="item.style">
|
||||
<a-col
|
||||
class="search-form-item"
|
||||
v-for="(child, index) in item.list"
|
||||
:key="index"
|
||||
:style="child.style"
|
||||
>
|
||||
<a-form-model-item :label="child.label" :prop="child.name" :labelCol="child.labelCol">
|
||||
<component :is="child.type" v-bind="child.props" v-model="formModel[child.name]" v-on="child.on"></component>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -34,6 +49,10 @@ export default {
|
|||
value: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'single-line'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -67,7 +86,7 @@ export default {
|
|||
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
||||
margin-bottom: 18px;
|
||||
background-color: rgba(12, 235, 201, .05);
|
||||
background-color: rgba(12, 235, 201, 0.05);
|
||||
&-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -85,10 +104,12 @@ export default {
|
|||
}
|
||||
.ant-form-item-control-wrapper {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
margin-bottom: 10px;
|
||||
img {
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="tree-with-line">
|
||||
<a-tree v-bind="$attrs" :defaultExpandAll="true">
|
||||
<a-tree v-bind="$attrs" :defaultExpandAll="true" :selected-keys="selectedKeys" @select="onSelect">
|
||||
<template slot="switcherIcon">
|
||||
<div></div>
|
||||
</template>
|
||||
|
|
@ -8,7 +8,21 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {}
|
||||
export default {
|
||||
props: {
|
||||
selectedKeys: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSelect(selectedKeys, { selected }) {
|
||||
if (selected) {
|
||||
this.$emit('update:selectedKeys', selectedKeys)
|
||||
this.$emit('select')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tree-with-line {
|
||||
|
|
@ -97,6 +111,17 @@ export default {}
|
|||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-node-content-wrapper {
|
||||
display: inline-block;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
&-node-selected {
|
||||
.ant-tree-title {
|
||||
display: block;
|
||||
background-color: #032d30 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
</a-radio-group>
|
||||
|
||||
<a-select v-else-if="tagType=='select'" :getPopupContainer = "getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
<a-select-option :value="undefined">请选择</a-select-option>
|
||||
<a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
|
||||
<span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ body {
|
|||
}
|
||||
&:hover {
|
||||
td {
|
||||
background-color: transparent !important;
|
||||
background-color: #0e505f !important;
|
||||
}
|
||||
}
|
||||
&.ant-table-row-selected {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</template>
|
||||
<!-- 标题结束 -->
|
||||
<!-- 内容 -->
|
||||
<tree-with-line :treeData="treeData"> </tree-with-line>
|
||||
<tree-with-line :treeData="treeData" :selected-keys.sync="selectedKeys" @select="onSelect"> </tree-with-line>
|
||||
<!-- 内容结束 -->
|
||||
</a-card>
|
||||
<div class="log-list">
|
||||
|
|
@ -54,6 +54,7 @@
|
|||
<script>
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import TreeWithLine from '@/components/TreeWithLine/index.vue'
|
||||
import { downloadFile, getAction } from '../../api/manage'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -88,9 +89,11 @@ export default {
|
|||
data() {
|
||||
this.columns = columns
|
||||
return {
|
||||
disableMixinCreated: true,
|
||||
url: {
|
||||
list: ''
|
||||
list: '/test'
|
||||
},
|
||||
isGettingTreeData: false, // 正在获取左侧树信息
|
||||
treeData: [
|
||||
{
|
||||
title: 'Db',
|
||||
|
|
@ -147,17 +150,39 @@ export default {
|
|||
]
|
||||
}
|
||||
],
|
||||
dataSource: [{ id: 1, name: 'DEX33_002-20220512_0723_S_FULL_9011.9.log', date: '2022-05-13', size: '105KB' }],
|
||||
selectedKeys: [],
|
||||
dataSource: [{ id: 1, name: 'DEX33_002-20220512_0723_S_FULL_9011.9.log', date: '2022-05-13', size: '105KB', fileName: 'test.txt' }],
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTreeData()
|
||||
},
|
||||
methods: {
|
||||
async getTreeData () {
|
||||
try {
|
||||
this.isGettingTreeData = true
|
||||
const res = await getAction('/logManage/findFtpFolders')
|
||||
console.log('%c [ res ]-159', 'font-size:13px; background:pink; color:#bf2c9f;', res)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.$message.error('Get Tree Data Failed')
|
||||
this.selectedKeys = ['1-1-2']
|
||||
this.onSelect()
|
||||
} finally {
|
||||
this.isGettingTreeData = false
|
||||
}
|
||||
},
|
||||
onSelect () {
|
||||
this.queryParam.query = this.selectedKeys[0]
|
||||
this.loadData()
|
||||
},
|
||||
onOperate(record) {
|
||||
console.log('%c [ ]-147', 'font-size:13px; background:pink; color:#bf2c9f;', record)
|
||||
this.visible = true
|
||||
},
|
||||
onDownload(record) {
|
||||
console.log('%c [ ]-151', 'font-size:13px; background:pink; color:#bf2c9f;', record)
|
||||
onDownload({ fileName }) {
|
||||
downloadFile('/logManage/downloadFile', fileName, { fileName })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -223,7 +223,9 @@ export default {
|
|||
label: 'SampleID',
|
||||
type: 'a-input',
|
||||
name: 'sampleID',
|
||||
span: 4
|
||||
style: {
|
||||
width: '19%'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Station',
|
||||
|
|
@ -240,7 +242,9 @@ export default {
|
|||
showSearch: true,
|
||||
filterOption: this.filterOption
|
||||
},
|
||||
span: 4
|
||||
style: {
|
||||
width: '19%'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Detector',
|
||||
|
|
@ -257,7 +261,9 @@ export default {
|
|||
showSearch: true,
|
||||
filterOption: this.filterOption
|
||||
},
|
||||
span: 4
|
||||
style: {
|
||||
width: '19%'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'From',
|
||||
|
|
@ -265,7 +271,13 @@ export default {
|
|||
name: 'from',
|
||||
props: {
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm'
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
style: {
|
||||
minWidth: 'auto'
|
||||
}
|
||||
},
|
||||
style: {
|
||||
width: '22%'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -274,10 +286,14 @@ export default {
|
|||
name: 'to',
|
||||
props: {
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm'
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
style: {
|
||||
minWidth: 'auto'
|
||||
}
|
||||
},
|
||||
style: {
|
||||
paddingRight: 0
|
||||
paddingRight: 0,
|
||||
width: '21%'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -101,7 +101,39 @@ import FormMixin from '@/mixins/FormMixin'
|
|||
import { cloneDeep } from 'lodash'
|
||||
import moment from 'moment'
|
||||
|
||||
const formItems = []
|
||||
const formItems = [
|
||||
{
|
||||
label: 'Detector Code',
|
||||
type: 'a-input',
|
||||
name: 'detectorCode',
|
||||
style: {
|
||||
width: '310px'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Type',
|
||||
type: 'a-input',
|
||||
name: 'type',
|
||||
style: {
|
||||
width: '310px'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
type: 'j-dict-select-tag',
|
||||
name: 'status',
|
||||
props: {
|
||||
dictCode: 'STATION_STATUS',
|
||||
getPopupContainer: () => {
|
||||
return document.body
|
||||
}
|
||||
},
|
||||
style: {
|
||||
width: '310px'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'NO',
|
||||
|
|
@ -112,13 +144,13 @@ const columns = [
|
|||
}
|
||||
},
|
||||
{
|
||||
title: 'DETECTOR_ID',
|
||||
title: 'DETECTOR ID',
|
||||
align: 'center',
|
||||
dataIndex: 'detectorId',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'DETECTOR_CODE',
|
||||
title: 'DETECTOR CODE',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'detectorCode'
|
||||
|
|
@ -126,13 +158,13 @@ const columns = [
|
|||
{
|
||||
title: 'LON',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
width: 80,
|
||||
dataIndex: 'lon'
|
||||
},
|
||||
{
|
||||
title: 'LAT',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
width: 80,
|
||||
dataIndex: 'lat'
|
||||
},
|
||||
{
|
||||
|
|
@ -148,17 +180,20 @@ const columns = [
|
|||
dataIndex: 'channels'
|
||||
},
|
||||
{
|
||||
title: 'RATED_EFFICIENCY',
|
||||
width: 100,
|
||||
title: 'RATED EFFICIENCY',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
dataIndex: 'ratedEfficiency'
|
||||
},
|
||||
{
|
||||
title: 'RATED_RESOLUTION',
|
||||
width: 100,
|
||||
title: 'RATED RESOLUTION',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
dataIndex: 'ratedResolution'
|
||||
},
|
||||
{
|
||||
title: 'ECAL_RANGE_MAX',
|
||||
title: 'ECAL RANGE MAX',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'ecalRangeMax'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<a-card :bordered="false">
|
||||
<!-- 搜索栏 -->
|
||||
<search-form :items="formItems" v-model="queryParam" @search="searchQuery">
|
||||
<a-space style="float: right" class="btn-group" slot="additional">
|
||||
<a-space style="float: right;" class="btn-group" slot="additional">
|
||||
<a-button @click="onAdd" type="primary">
|
||||
<img src="@/assets/images/global/add.png" alt="" />
|
||||
Add
|
||||
|
|
@ -85,7 +85,46 @@ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|||
import FormMixin from '@/mixins/FormMixin'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const formItems = []
|
||||
const formItems = [
|
||||
{
|
||||
label: 'Name',
|
||||
type: 'a-input',
|
||||
name: 'facilityName',
|
||||
style: {
|
||||
width: '300px'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Type',
|
||||
type: 'a-input',
|
||||
name: 'type',
|
||||
style: {
|
||||
width: '300px'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Location',
|
||||
type: 'a-input',
|
||||
name: 'location',
|
||||
style: {
|
||||
width: '300px'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
type: 'j-dict-select-tag',
|
||||
name: 'status',
|
||||
props: {
|
||||
getPopupContainer: () => {
|
||||
return document.body
|
||||
},
|
||||
dictCode: 'NUCLEARFACILITY_STATUS'
|
||||
},
|
||||
style: {
|
||||
width: '300px'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -812,6 +812,8 @@ export default {
|
|||
font-size: 14px;
|
||||
color: #00fdd3;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,7 +92,38 @@ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|||
import FormMixin from '@/mixins/FormMixin'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const formItems = []
|
||||
const formItems = [
|
||||
{
|
||||
label: 'Country Code',
|
||||
type: 'a-input',
|
||||
name: 'countryCode',
|
||||
style: {
|
||||
width: '310px'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Type',
|
||||
type: 'a-input',
|
||||
name: 'type',
|
||||
style: {
|
||||
width: '310px'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
type: 'j-dict-select-tag',
|
||||
name: 'status',
|
||||
props: {
|
||||
dictCode: 'STATION_STATUS',
|
||||
getPopupContainer: () => {
|
||||
return document.body
|
||||
}
|
||||
},
|
||||
style: {
|
||||
width: '310px'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -116,7 +147,7 @@ const columns = [
|
|||
dataIndex: 'stationCode'
|
||||
},
|
||||
{
|
||||
title: 'COUNTRY_CODE',
|
||||
title: 'COUNTRY CODE',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'countryCode'
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user