center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: 视图字段排序增加icon标识

Browse Source
This commit is contained in:
junjie 2021-07-21 18:17:30 +08:00
parent 1ef870c8cc
commit 3a8adf4023
7 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/icons/svg/sort-asc.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1626861945234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5279" width="200" height="200"><path d="M0 0h307.2v122.88H0V0z m0 460.8h614.4v122.88H0V460.8z m0 440.32h1024V1024H0v-122.88z" p-id="5280"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 267 B

1
frontend/src/icons/svg/sort-desc.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1626861978178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4648" width="200" height="200"><path d="M0 0h1024v122.88H0V0z m0 460.8h614.4v122.88H0V460.8z m0 440.32h307.2V1024H0v-122.88z" p-id="4649"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 267 B

7
frontend/src/styles/index.scss
View File

@ -221,7 +221,7 @@ div:focus {
%field-icon{
font-size: 13px;
margin: 0 3px 0 0;
margin: 0 2px 0 0;
}
.field-icon-text{
@extend %field-icon;
@ -239,6 +239,11 @@ div:focus {
@extend %field-icon;
color: #F56C6C;
}
.field-icon-sort{
font-size: 10px;
@extend %field-icon;
color: #999999;
}
.ds-icon-scene{
width: 13px;
height: 13px;

4
frontend/src/views/chart/components/drag-item/ChartDragItem.vue
View File

@ -6,6 +6,8 @@
<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" />
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
</el-tag>
@ -17,6 +19,8 @@
<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" />
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />

4
frontend/src/views/chart/components/drag-item/DimensionItem.vue
View File

@ -6,6 +6,8 @@
<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" />
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
</el-tag>
@ -17,6 +19,8 @@
<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" />
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />

6
frontend/src/views/chart/components/drag-item/QuotaItem.vue
View File

@ -6,6 +6,8 @@
<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" />
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
@ -18,6 +20,8 @@
<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" />
<svg-icon v-if="item.sort === 'asc'" icon-class="sort-asc" class-name="field-icon-sort" />
<svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
</span>
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
@ -226,7 +230,7 @@ export default {
.item-span-style{
display: inline-block;
width: 80px;
width: 70px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

4
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -286,9 +286,9 @@
</transition-group>
</draggable>
</el-row>
<el-row v-if="chart.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
<el-row v-if="chart.type && chart.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
<span v-if="chart.type.includes('stack')">{{ $t('chart.stack_item') }}</span>
<span>{{ $t('chart.stack_item') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
</span>