forked from github/dataease
feat: 视图字段可调整高度
This commit is contained in:
junjun
parent
54c32bdf34
commit
41f8907926
@ -84,64 +84,74 @@
|
||||
@click="changeDs"
|
||||
/>
|
||||
</div>
|
||||
<div class="padding-lr field-height">
|
||||
<span>{{ $t('chart.dimension') }}</span>
|
||||
<draggable
|
||||
v-if="table && hasDataPermission('use',table.privileges)"
|
||||
v-model="dimensionData"
|
||||
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
class="drag-list"
|
||||
@add="moveToDimension"
|
||||
>
|
||||
<transition-group>
|
||||
<span v-for="item in dimensionData" :key="item.id" class="item-dimension" :title="item.name">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 2 || item.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="padding-lr field-height">
|
||||
<span>{{ $t('chart.quota') }}</span>
|
||||
<draggable
|
||||
v-if="table && hasDataPermission('use',table.privileges)"
|
||||
v-model="quotaData"
|
||||
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
class="drag-list"
|
||||
@add="moveToQuota"
|
||||
>
|
||||
<transition-group>
|
||||
<span
|
||||
v-for="item in quotaData"
|
||||
v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))"
|
||||
:key="item.id"
|
||||
class="item-quota"
|
||||
:title="item.name"
|
||||
>
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 2 || item.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<span>{{ item.name }}</span>
|
||||
</span>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
|
||||
<div class="field-split">
|
||||
<fu-split-pane top="50%" direction="vertical">
|
||||
<template v-slot:top>
|
||||
<div class="padding-lr field-height">
|
||||
<span>{{ $t('chart.dimension') }}</span>
|
||||
<draggable
|
||||
v-if="table && hasDataPermission('use',table.privileges)"
|
||||
v-model="dimensionData"
|
||||
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
class="drag-list"
|
||||
@add="moveToDimension"
|
||||
>
|
||||
<transition-group>
|
||||
<span v-for="item in dimensionData" :key="item.id" class="item-dimension" :title="item.name">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 2 || item.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:bottom>
|
||||
<div class="padding-lr field-height">
|
||||
<span>{{ $t('chart.quota') }}</span>
|
||||
<draggable
|
||||
v-if="table && hasDataPermission('use',table.privileges)"
|
||||
v-model="quotaData"
|
||||
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
class="drag-list"
|
||||
@add="moveToQuota"
|
||||
>
|
||||
<transition-group>
|
||||
<span
|
||||
v-for="item in quotaData"
|
||||
v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))"
|
||||
:key="item.id"
|
||||
class="item-quota"
|
||||
:title="item.name"
|
||||
>
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 2 || item.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<span>{{ item.name }}</span>
|
||||
</span>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
</fu-split-pane>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
@ -2749,7 +2759,7 @@ span {
|
||||
}
|
||||
|
||||
.field-height {
|
||||
height: calc(50% - 20px);
|
||||
height: 100%;
|
||||
border-top: 1px solid #E6E6E6;
|
||||
}
|
||||
|
||||
@ -2883,4 +2893,9 @@ span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.field-split{
|
||||
height: 700px;
|
||||
// height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user