forked from github/dataease
Merge pull request #1261 from dataease/pr@dev@feat_panel-view-result
feat: 仪表板支持统一设置视图结果显示数量
This commit is contained in:
王嘉豪
GitHub
commit
77a31d7b8c
@ -9,7 +9,7 @@ public class CommonConstants {
|
||||
|
||||
|
||||
//操作类型
|
||||
public static final class OPT_TYPE{
|
||||
public static final class OPT_TYPE {
|
||||
|
||||
public static final String INSERT = "insert";
|
||||
|
||||
@ -22,19 +22,36 @@ public class CommonConstants {
|
||||
}
|
||||
|
||||
//操作类型
|
||||
public static final class CHECK_RESULT{
|
||||
public static final class CHECK_RESULT {
|
||||
|
||||
// 不存在
|
||||
public static final String NONE = "none";
|
||||
|
||||
// 全局存在
|
||||
public static final String EXIST_ALL= "exist_all";
|
||||
public static final String EXIST_ALL = "exist_all";
|
||||
|
||||
// 当前用户存在
|
||||
public static final String EXIST_USER= "exist_user";
|
||||
public static final String EXIST_USER = "exist_user";
|
||||
|
||||
// 其他用户存在
|
||||
public static final String EXIST_OTHER= "exist_other";
|
||||
public static final String EXIST_OTHER = "exist_other";
|
||||
|
||||
}
|
||||
|
||||
//视图数据查询来源
|
||||
public static final class VIEW_QUERY_FROM {
|
||||
|
||||
// 仪表板
|
||||
public static final String PANEL = "panel";
|
||||
}
|
||||
|
||||
//视图数据查询模式
|
||||
public static final class VIEW_RESULT_MODE {
|
||||
|
||||
// 所有
|
||||
public static final String ALL = "all";
|
||||
|
||||
// 自定义
|
||||
public static final String CUSTOM = "custom";
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,4 +22,16 @@ public class ChartExtRequest {
|
||||
|
||||
@ApiModelProperty("下钻维度集合")
|
||||
private List<ChartDrillRequest> drill;
|
||||
|
||||
@ApiModelProperty("数据查询来源")
|
||||
private String queryFrom;
|
||||
|
||||
@ApiModelProperty("视图结果展示模式")
|
||||
private String resultMode;
|
||||
|
||||
@ApiModelProperty("视图结果展示数量")
|
||||
private Integer resultCount;
|
||||
|
||||
@ApiModelProperty("使用缓存:默认使用")
|
||||
private boolean cache = true;
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import io.dataease.base.domain.*;
|
||||
import io.dataease.base.mapper.ChartViewMapper;
|
||||
import io.dataease.base.mapper.ext.ExtChartGroupMapper;
|
||||
import io.dataease.base.mapper.ext.ExtChartViewMapper;
|
||||
import io.dataease.commons.constants.CommonConstants;
|
||||
import io.dataease.commons.constants.JdbcConstants;
|
||||
import io.dataease.commons.utils.AuthUtils;
|
||||
import io.dataease.commons.utils.BeanUtils;
|
||||
@ -182,9 +183,14 @@ public class ChartViewService {
|
||||
chartViewMapper.deleteByExample(chartViewExample);
|
||||
}
|
||||
|
||||
public ChartViewDTO getData(String id, ChartExtRequest requestList) throws Exception {
|
||||
public ChartViewDTO getData(String id, ChartExtRequest request) throws Exception {
|
||||
ChartViewWithBLOBs view = chartViewMapper.selectByPrimaryKey(id);
|
||||
return calcData(view, requestList, true);
|
||||
// 如果是从仪表板获取视图数据，则仪表板的查询模式，查询结果的数量，覆盖视图对应的属性
|
||||
if (CommonConstants.VIEW_QUERY_FROM.PANEL.equals(request.getQueryFrom()) && CommonConstants.VIEW_RESULT_MODE.CUSTOM.equals(request.getResultMode())) {
|
||||
view.setResultMode(request.getResultMode());
|
||||
view.setResultCount(request.getResultCount());
|
||||
}
|
||||
return calcData(view, request, request.isCache());
|
||||
}
|
||||
|
||||
public ChartViewDTO calcData(ChartViewWithBLOBs view, ChartExtRequest requestList, boolean cache) throws Exception {
|
||||
@ -1383,10 +1389,10 @@ public class ChartViewService {
|
||||
return extChartViewMapper.searchAdviceSceneId(AuthUtils.getUser().getUserId().toString(), panelId);
|
||||
}
|
||||
|
||||
public String checkSameDataSet(String viewIdSource,String viewIdTarget) {
|
||||
if(extChartViewMapper.checkSameDataSet(viewIdSource,viewIdTarget)==1){
|
||||
public String checkSameDataSet(String viewIdSource, String viewIdTarget) {
|
||||
if (extChartViewMapper.checkSameDataSet(viewIdSource, viewIdTarget) == 1) {
|
||||
return "YES";
|
||||
}else{
|
||||
} else {
|
||||
return "NO";
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,16 +9,40 @@
|
||||
]"
|
||||
>
|
||||
<div v-if="requestStatus==='error'" class="chart-error-class">
|
||||
<div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
|
||||
<div class="chart-error-message-class">
|
||||
{{ message }},{{ $t('chart.chart_show_error') }}
|
||||
<br>
|
||||
{{ $t('chart.chart_error_tips') }}
|
||||
</div>
|
||||
</div>
|
||||
<chart-component v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" :search-count="searchCount" @onChartClick="chartClick" @onJumpClick="jumpClick" />
|
||||
<chart-component-g2 v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" :search-count="searchCount" @onChartClick="chartClick" @onJumpClick="jumpClick" />
|
||||
<table-normal v-if="httpRequest.status &&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
|
||||
<label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :ref="element.propValue.id" :chart="chart" class="table-class" />
|
||||
<chart-component
|
||||
v-if="charViewShowFlag"
|
||||
:ref="element.propValue.id"
|
||||
class="chart-class"
|
||||
:chart="chart"
|
||||
:track-menu="trackMenu"
|
||||
:search-count="searchCount"
|
||||
@onChartClick="chartClick"
|
||||
@onJumpClick="jumpClick"
|
||||
/>
|
||||
<chart-component-g2
|
||||
v-if="charViewG2ShowFlag"
|
||||
:ref="element.propValue.id"
|
||||
class="chart-class"
|
||||
:chart="chart"
|
||||
:track-menu="trackMenu"
|
||||
:search-count="searchCount"
|
||||
@onChartClick="chartClick"
|
||||
@onJumpClick="jumpClick"
|
||||
/>
|
||||
<table-normal
|
||||
v-if="tableShowFlag"
|
||||
:ref="element.propValue.id"
|
||||
:show-summary="chart.type === 'table-normal'"
|
||||
:chart="chart"
|
||||
class="table-class"
|
||||
/>
|
||||
<label-normal v-if="labelShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
|
||||
<div style="position: absolute;left: 20px;bottom:14px;">
|
||||
<drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
|
||||
</div>
|
||||
@ -43,7 +67,7 @@ import { getToken, getLinkToken } from '@/utils/auth'
|
||||
import DrillPath from '@/views/chart/view/DrillPath'
|
||||
import { areaMapping } from '@/api/map/map'
|
||||
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
|
||||
import { Base64 } from 'js-base64'
|
||||
|
||||
export default {
|
||||
name: 'UserView',
|
||||
components: { ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
|
||||
@ -89,10 +113,24 @@ export default {
|
||||
msg: ''
|
||||
},
|
||||
timeMachine: null,
|
||||
changeIndex: 0
|
||||
changeIndex: 0,
|
||||
pre: null,
|
||||
preCanvasPanel: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
charViewShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'echarts'
|
||||
},
|
||||
charViewG2ShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
|
||||
},
|
||||
tableShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type.includes('table')
|
||||
},
|
||||
labelShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type.includes('text')
|
||||
},
|
||||
loadingFlag() {
|
||||
return (this.canvasStyleData.refreshViewLoading || this.searchCount === 0) && this.requestStatus === 'waiting'
|
||||
},
|
||||
@ -104,6 +142,9 @@ export default {
|
||||
filter.filter = this.element.filters
|
||||
filter.linkageFilters = this.element.linkageFilters
|
||||
filter.drill = this.drillClickDimensionList
|
||||
filter.resultCount = this.resultCount
|
||||
filter.resultMode = this.resultMode
|
||||
filter.queryFrom = 'panel'
|
||||
return filter
|
||||
},
|
||||
filters() {
|
||||
@ -111,11 +152,9 @@ export default {
|
||||
if (!this.element.filters) return []
|
||||
return JSON.parse(JSON.stringify(this.element.filters))
|
||||
},
|
||||
|
||||
linkageFilters() {
|
||||
// 必要 勿删勿该 watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决
|
||||
if (!this.element.linkageFilters) return []
|
||||
// console.log('linkageFilters:' + JSON.stringify(this.element.linkageFilters))
|
||||
return JSON.parse(JSON.stringify(this.element.linkageFilters))
|
||||
},
|
||||
trackMenu() {
|
||||
@ -145,6 +184,12 @@ export default {
|
||||
hw() {
|
||||
return this.outStyle.width * this.outStyle.height
|
||||
},
|
||||
resultMode() {
|
||||
return this.canvasStyleData.panel.resultMode
|
||||
},
|
||||
resultCount() {
|
||||
return this.canvasStyleData.panel.resultCount
|
||||
},
|
||||
...mapState([
|
||||
'canvasStyleData',
|
||||
'nowPanelTrackInfo',
|
||||
@ -168,13 +213,17 @@ export default {
|
||||
canvasStyleData: {
|
||||
handler(newVal, oldVla) {
|
||||
this.mergeStyle()
|
||||
// 如果视图结果模式模式 或者 视图结果获取数量改变 刷新视图
|
||||
if (!this.preCanvasPanel || this.preCanvasPanel.resultCount !== newVal.panel.resultCount || this.preCanvasPanel.resultMode !== newVal.panel.resultMode) {
|
||||
this.getData(this.element.propValue.viewId, false)
|
||||
}
|
||||
this.preCanvasPanel = deepCopy(newVal.panel)
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
// 监听外部的样式变化 （非实时性要求）
|
||||
'hw': {
|
||||
handler(newVal, oldVla) {
|
||||
// console.log('hw:' + newVal + '---' + oldVla)
|
||||
if (newVal !== oldVla && this.$refs[this.element.propValue.id]) {
|
||||
if (this.chart.type === 'map') {
|
||||
this.destroyTimeMachine()
|
||||
@ -205,27 +254,19 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.refId = uuid.v1
|
||||
if (this.element && this.element.propValue && this.element.propValue.viewId) {
|
||||
this.getData(this.element.propValue.viewId)
|
||||
this.getData(this.element.propValue.viewId, false)
|
||||
}
|
||||
|
||||
// this.initAreas()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
mergeStyle() {
|
||||
if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
|
||||
const customAttrChart = JSON.parse(this.chart.customAttr)
|
||||
const customStyleChart = JSON.parse(this.chart.customStyle)
|
||||
|
||||
const customAttrPanel = JSON.parse(this.canvasStyleData.chart.customAttr)
|
||||
const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
|
||||
|
||||
// 组件样式-标题设置 - 标题修改为组件自己控制
|
||||
// 组件样式-背景设置
|
||||
customStyleChart.background = customStylePanel.background
|
||||
// 图形属性-颜色设置
|
||||
@ -234,7 +275,6 @@ export default {
|
||||
} else {
|
||||
customAttrChart.color = customAttrPanel.color
|
||||
}
|
||||
|
||||
this.chart = {
|
||||
...this.chart,
|
||||
customAttr: JSON.stringify(customAttrChart),
|
||||
@ -242,7 +282,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
getData(id) {
|
||||
getData(id, cache = true) {
|
||||
if (id) {
|
||||
this.requestStatus = 'waiting'
|
||||
this.message = null
|
||||
@ -254,8 +294,11 @@ export default {
|
||||
if (!token && linkToken) {
|
||||
method = viewInfo
|
||||
}
|
||||
|
||||
method(id, this.filter).then(response => {
|
||||
const requestInfo = {
|
||||
...this.filter,
|
||||
cache: cache
|
||||
}
|
||||
method(id, requestInfo).then(response => {
|
||||
// 将视图传入echart组件
|
||||
if (response.success) {
|
||||
this.chart = response.data
|
||||
@ -477,59 +520,72 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rect-shape {
|
||||
.rect-shape {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chart-class{
|
||||
height: 100%;
|
||||
}
|
||||
.table-class{
|
||||
height: 100%;
|
||||
}
|
||||
.chart-error-class{
|
||||
text-align: center;
|
||||
height: calc(100% - 84px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ece7e7;
|
||||
}
|
||||
.active {
|
||||
}
|
||||
|
||||
}
|
||||
.chart-class {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.active >>> .icon-fangda{
|
||||
z-index: 2;
|
||||
display:block!important;
|
||||
}
|
||||
.table-class {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rect-shape > i{
|
||||
right: 5px;
|
||||
color: gray;
|
||||
position: absolute;
|
||||
}
|
||||
.chart-error-class {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ece7e7;
|
||||
}
|
||||
|
||||
.rect-shape >>> i:hover {
|
||||
color: red;
|
||||
}
|
||||
.chart-error-message-class {
|
||||
font-size: 12px;
|
||||
color: #9ea6b2;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rect-shape:hover >>> .icon-fangda {
|
||||
z-index: 2;
|
||||
display:block;
|
||||
}
|
||||
.active {
|
||||
|
||||
.rect-shape>>>.icon-fangda {
|
||||
display:none
|
||||
}
|
||||
}
|
||||
|
||||
.rect-shape:hover >>> .icon-shezhi {
|
||||
z-index: 2;
|
||||
display:block;
|
||||
}
|
||||
.active > > > .icon-fangda {
|
||||
z-index: 2;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.rect-shape>>>.icon-shezhi {
|
||||
display:none
|
||||
}
|
||||
.rect-shape > i {
|
||||
right: 5px;
|
||||
color: gray;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.rect-shape > > > i:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.rect-shape:hover > > > .icon-fangda {
|
||||
z-index: 2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rect-shape > > > .icon-fangda {
|
||||
display: none
|
||||
}
|
||||
|
||||
.rect-shape:hover > > > .icon-shezhi {
|
||||
z-index: 2;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rect-shape > > > .icon-shezhi {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -956,6 +956,7 @@ export default {
|
||||
table_page_size_unit: 'Item/Page',
|
||||
result_count: 'Result',
|
||||
result_mode_all: 'ALL',
|
||||
result_mode_custom: 'Custom',
|
||||
chart_word_cloud: 'Word Cloud',
|
||||
drag_block_word_cloud_label: 'Word Label',
|
||||
drag_block_word_cloud_size: 'Word Size',
|
||||
@ -1416,7 +1417,9 @@ export default {
|
||||
play_once: 'Once',
|
||||
play_circle: 'Circle',
|
||||
video_links: 'Video Links',
|
||||
video_add_tips: 'Please Add Video Info...'
|
||||
video_add_tips: 'Please Add Video Info...',
|
||||
panel_view_result_show: 'View Result Show',
|
||||
panel_view_result_tips: 'Chose "Panel" Will Overwrite View`s Result,Range 1~10000'
|
||||
},
|
||||
plugin: {
|
||||
local_install: 'Local installation',
|
||||
|
||||
@ -9,14 +9,14 @@ export default {
|
||||
please_input: '請輸入',
|
||||
like: '包含',
|
||||
not_like: '不包含',
|
||||
in: '屬于',
|
||||
not_in: '不屬于',
|
||||
gt: '大于',
|
||||
ge: '大于等于',
|
||||
lt: '小于',
|
||||
le: '小于等于',
|
||||
eq: '等于',
|
||||
ne: '不等于',
|
||||
in: '屬於',
|
||||
not_in: '不屬於',
|
||||
gt: '大於',
|
||||
ge: '大於等於',
|
||||
lt: '小於',
|
||||
le: '小於等於',
|
||||
eq: '等於',
|
||||
ne: '不等於',
|
||||
between: '之間',
|
||||
select_date: '選擇日期',
|
||||
start_date: '開始日期',
|
||||
@ -25,7 +25,7 @@ export default {
|
||||
start_date_time: '開始日期時間',
|
||||
end_date_time: '結束日期時間',
|
||||
range_separator: '至',
|
||||
data_time_error: '開始日期不能大于結束日期',
|
||||
data_time_error: '開始日期不能大於結束日期',
|
||||
clean: '清空',
|
||||
refresh: '刷新'
|
||||
},
|
||||
@ -91,7 +91,7 @@ export default {
|
||||
errorPages: '錯誤頁面',
|
||||
page401: '401',
|
||||
page404: '404',
|
||||
errorLog: '錯誤日志',
|
||||
errorLog: '錯誤日誌',
|
||||
excel: 'Excel',
|
||||
exportExcel: '導出 Excel',
|
||||
selectExcel: '導出 已選擇項',
|
||||
@ -126,7 +126,7 @@ export default {
|
||||
expires: '登錄信息過期，請重新登錄',
|
||||
tokenError: '登陸信息錯誤，請重新登錄',
|
||||
username_error: '請輸入正確的 ID',
|
||||
password_error: '密碼不小于 8 位',
|
||||
password_error: '密碼不小於 8 位',
|
||||
re_login: '重新登錄',
|
||||
default_login: '普通登錄'
|
||||
},
|
||||
@ -169,17 +169,17 @@ export default {
|
||||
menu: '菜單',
|
||||
setting: '設置',
|
||||
project: '項目',
|
||||
about_us: '關于',
|
||||
about_us: '關於',
|
||||
current_project: '當前項目',
|
||||
name: '名稱',
|
||||
description: '描述',
|
||||
annotation: '注釋',
|
||||
annotation: '註釋',
|
||||
clear: '清空',
|
||||
save: '保存',
|
||||
update: '更新',
|
||||
save_success: '保存成功',
|
||||
delete_success: '刪除成功',
|
||||
copy_success: '複制成功',
|
||||
copy_success: '複製成功',
|
||||
modify_success: '修改成功',
|
||||
delete_cancel: '已取消刪除',
|
||||
confirm: '確定',
|
||||
@ -188,7 +188,7 @@ export default {
|
||||
operating: '操作',
|
||||
input_limit: '長度在 {0} 到 {1} 個字符',
|
||||
login: '登錄',
|
||||
welcome: '一站式開源數據分析平台',
|
||||
welcome: '一站式開源數據分析平臺',
|
||||
username: '姓名',
|
||||
password: '密碼',
|
||||
input_username: '請輸入用戶姓名',
|
||||
@ -216,9 +216,9 @@ export default {
|
||||
input_content: '請輸入內容',
|
||||
create: '新建',
|
||||
edit: '編輯',
|
||||
copy: '複制',
|
||||
copy: '複製',
|
||||
refresh: '刷新',
|
||||
remark: '備注',
|
||||
remark: '備註',
|
||||
delete: '刪除',
|
||||
reduction: '恢複',
|
||||
not_filled: '未填寫',
|
||||
@ -291,7 +291,7 @@ export default {
|
||||
start_date_time: '開始日期時間',
|
||||
end_date_time: '結束日期時間',
|
||||
range_separator: '至',
|
||||
data_time_error: '開始日期不能大于結束日期'
|
||||
data_time_error: '開始日期不能大於結束日期'
|
||||
},
|
||||
adv_search: {
|
||||
title: '高級搜索',
|
||||
@ -307,14 +307,14 @@ export default {
|
||||
is_not_empty: '非空',
|
||||
like: '包含',
|
||||
not_like: '不包含',
|
||||
in: '屬于',
|
||||
not_in: '不屬于',
|
||||
gt: '大于',
|
||||
ge: '大于等于',
|
||||
lt: '小于',
|
||||
le: '小于等于',
|
||||
equals: '等于',
|
||||
not_equals: '不等于',
|
||||
in: '屬於',
|
||||
not_in: '不屬於',
|
||||
gt: '大於',
|
||||
ge: '大於等於',
|
||||
lt: '小於',
|
||||
le: '小於等於',
|
||||
equals: '等於',
|
||||
not_equals: '不等於',
|
||||
between: '之間',
|
||||
current_user: '是當前用戶'
|
||||
},
|
||||
@ -360,17 +360,17 @@ export default {
|
||||
cancel: '取消'
|
||||
},
|
||||
guide: {
|
||||
description: '引導頁對于一些第一次進入項目的人很有用，你可以簡單介紹下項目的功能。本 Demo 是基于',
|
||||
description: '引導頁對於一些第一次進入項目的人很有用，你可以簡單介紹下項目的功能。本 Demo 是基於',
|
||||
button: '打開引導'
|
||||
},
|
||||
components: {
|
||||
documentation: '文檔',
|
||||
tinymceTips: '富文本是管理後台一個核心的功能，但同時又是一個有很多坑的地方。在選擇富文本的過程中我也走了不少的彎路，市面上常見的富文本都基本用過了，最終權衡了一下選擇了Tinymce。更詳細的富文本比較和介紹見',
|
||||
dropzoneTips: '由于我司業務有特殊需求，而且要傳七牛 所以沒用第三方，選擇了自己封裝。代碼非常的簡單，具體代碼你可以在這裏看到 @/components/Dropzone',
|
||||
tinymceTips: '富文本是管理後臺一個核心的功能，但同時又是一個有很多坑的地方。在選擇富文本的過程中我也走了不少的彎路，市面上常見的富文本都基本用過了，最終權衡了一下選擇了Tinymce。更詳細的富文本比較和介紹見',
|
||||
dropzoneTips: '由於我司業務有特殊需求，而且要傳七牛 所以沒用第三方，選擇了自己封裝。代碼非常的簡單，具體代碼你可以在這裏看到 @/components/Dropzone',
|
||||
stickyTips: '當頁面滾動到預設的位置會吸附在頂部',
|
||||
backToTopTips1: '頁面滾動到指定位置會在右下角出現返回頂部按鈕',
|
||||
backToTopTips2: '可自定義按鈕的樣式、show/hide、出現的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
|
||||
imageUploadTips: '由于我在使用時它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的話，優先還是使用官方版本。'
|
||||
imageUploadTips: '由於我在使用時它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的話，優先還是使用官方版本。'
|
||||
},
|
||||
table: {
|
||||
dynamicTips1: '固定表頭, 按照表頭順序排序',
|
||||
@ -403,11 +403,11 @@ export default {
|
||||
selectview: '選擇視圖'
|
||||
},
|
||||
example: {
|
||||
warning: '創建和編輯頁面是不能被 keep-alive 緩存的，因爲keep-alive 的 include 目前不支持根據路由來緩存，所以目前都是基于 component name 來進行緩存的。如果你想類似的實現緩存效果，可以使用 localStorage 等浏覽器緩存方案。或者不要使用 keep-alive 的 include，直接緩存所有頁面。詳情見'
|
||||
warning: '創建和編輯頁面是不能被 keep-alive 緩存的，因爲keep-alive 的 include 目前不支持根據路由來緩存，所以目前都是基於 component name 來進行緩存的。如果你想類似的實現緩存效果，可以使用 localStorage 等瀏覽器緩存方案。或者不要使用 keep-alive 的 include，直接緩存所有頁面。詳情見'
|
||||
},
|
||||
errorLog: {
|
||||
tips: '請點擊右上角bug小圖標',
|
||||
description: '現在的管理後台基本都是spa的形式了，它增強了用戶體驗，但同時也會增加頁面出問題的可能性，可能一個小小的疏忽就導致整個頁面的死鎖。好在 Vue 官網提供了一個方法來捕獲處理異常，你可以在其中進行錯誤處理或者異常上報。',
|
||||
description: '現在的管理後臺基本都是spa的形式了，它增強了用戶體驗，但同時也會增加頁面出問題的可能性，可能一個小小的疏忽就導致整個頁面的死鎖。好在 Vue 官網提供了一個方法來捕獲處理異常，你可以在其中進行錯誤處理或者異常上報。',
|
||||
documentation: '文檔介紹'
|
||||
},
|
||||
excel: {
|
||||
@ -425,7 +425,7 @@ export default {
|
||||
theme: {
|
||||
change: '換膚',
|
||||
documentation: '換膚文檔',
|
||||
tips: 'Tips: 它區別于 navbar 上的 theme-pick, 是兩種不同的換膚方法，各自有不同的應用場景，具體請參考文檔。',
|
||||
tips: 'Tips: 它區別於 navbar 上的 theme-pick, 是兩種不同的換膚方法，各自有不同的應用場景，具體請參考文檔。',
|
||||
base: '基礎配色',
|
||||
font: '字體顏色',
|
||||
border: '邊框顏色',
|
||||
@ -618,7 +618,7 @@ export default {
|
||||
test_connection: '測試連接',
|
||||
SMTP_host: 'SMTP主機',
|
||||
basic_setting: '基礎設置',
|
||||
front_time_out: '請求超時時間(單位:秒, 注意:保存後刷新瀏覽器生效)',
|
||||
front_time_out: '請求超時時間(單位:秒, 註意:保存後刷新瀏覽器生效)',
|
||||
msg_time_out: '消息保留時間(單位:天)',
|
||||
empty_front: '為空則默認取值10秒',
|
||||
empty_msg: '為空則默認取值30天',
|
||||
@ -686,7 +686,7 @@ export default {
|
||||
avg: '平均',
|
||||
max: '最大值',
|
||||
min: '最小值',
|
||||
stddev_pop: '標准差',
|
||||
stddev_pop: '標準差',
|
||||
var_pop: '方差',
|
||||
quick_calc: '快速計算',
|
||||
show_name_set: '顯示名設置',
|
||||
@ -772,13 +772,13 @@ export default {
|
||||
border_radius: '邊框半徑',
|
||||
alpha: '透明度',
|
||||
add_filter: '添加過濾',
|
||||
no_limit: '無限制',
|
||||
filter_eq: '等于',
|
||||
filter_not_eq: '不等于',
|
||||
filter_lt: '小于',
|
||||
filter_le: '小于等于',
|
||||
filter_gt: '大于',
|
||||
filter_ge: '大于等于',
|
||||
no_limit: '無限製',
|
||||
filter_eq: '等於',
|
||||
filter_not_eq: '不等於',
|
||||
filter_lt: '小於',
|
||||
filter_le: '小於等於',
|
||||
filter_gt: '大於',
|
||||
filter_ge: '大於等於',
|
||||
filter_null: '為空',
|
||||
filter_not_null: '不為空',
|
||||
filter_empty: '空字符串',
|
||||
@ -814,7 +814,7 @@ export default {
|
||||
only_one_result: '僅顯示第1個計算結果',
|
||||
dimension_show: '名稱顯示',
|
||||
quota_show: '值顯示',
|
||||
title_limit: '標題不能大于50個字符',
|
||||
title_limit: '標題不能大於50個字符',
|
||||
filter_condition: '過濾條件',
|
||||
filter_field_can_null: '過濾字段必填',
|
||||
preview_100_data: '預覽前100條記錄',
|
||||
@ -862,7 +862,7 @@ export default {
|
||||
text_style: '字體樣式',
|
||||
bolder: '加粗',
|
||||
change_ds: '更換數據集',
|
||||
change_ds_tip: '提示：更換數據集將導致字段發生變化，需重新制作視圖',
|
||||
change_ds_tip: '提示：更換數據集將導致字段發生變化，需重新製作視圖',
|
||||
axis_name_color: '名稱顔色',
|
||||
axis_name_fontsize: '名稱字體',
|
||||
pie_label_line_show: '引導線',
|
||||
@ -957,6 +957,7 @@ export default {
|
||||
table_page_size_unit: '條/頁',
|
||||
result_count: '結果展示',
|
||||
result_mode_all: '全部',
|
||||
result_mode_custom: '自定義',
|
||||
chart_word_cloud: '詞雲',
|
||||
drag_block_word_cloud_label: '詞標簽',
|
||||
drag_block_word_cloud_size: '詞大小',
|
||||
@ -1039,7 +1040,7 @@ export default {
|
||||
execute_once: '立即執行',
|
||||
simple_cron: '簡單重複',
|
||||
cron_config: '表達式設定',
|
||||
no_limit: '無限制',
|
||||
no_limit: '無限製',
|
||||
set_end_time: '設定結束時間',
|
||||
operate: '操作',
|
||||
save_success: '保存成功',
|
||||
@ -1208,7 +1209,7 @@ export default {
|
||||
please_input_max_idle_time: '請輸入最大空閑(秒)',
|
||||
please_input_acquire_increment: '請輸入增長數',
|
||||
please_input_connect_timeout: '請輸入連接超時(秒)',
|
||||
no_less_then_0: '高級設置中的參數不能小于零',
|
||||
no_less_then_0: '高級設置中的參數不能小於零',
|
||||
port_no_less_then_0: '端口不能小於零',
|
||||
priority: '高級設置',
|
||||
extra_params: '額外的JDBC連接字符串'
|
||||
@ -1225,10 +1226,10 @@ export default {
|
||||
auth_role: '已分享角色',
|
||||
picture_limit: '只能插入圖片',
|
||||
drag_here: '請將左側字段拖至此處',
|
||||
copy_link_passwd: '複制鏈接及密碼',
|
||||
copy_link: '複制鏈接',
|
||||
copy_short_link: '複制短鏈接',
|
||||
copy_short_link_passwd: '複制短鏈接及密碼',
|
||||
copy_link_passwd: '複製鏈接及密碼',
|
||||
copy_link: '複製鏈接',
|
||||
copy_short_link: '複製短鏈接',
|
||||
copy_short_link_passwd: '複製短鏈接及密碼',
|
||||
passwd_protect: '密碼保護',
|
||||
link: '鏈接',
|
||||
link_share: '鏈接分享',
|
||||
@ -1276,8 +1277,8 @@ export default {
|
||||
gap: '有間隙',
|
||||
no_gap: '無間隙',
|
||||
component_gap: '組件間隙',
|
||||
refresh_time: '刷新时间',
|
||||
minute: '分钟',
|
||||
refresh_time: '刷新時間',
|
||||
minute: '分鐘',
|
||||
second: '秒',
|
||||
photo: '圖片',
|
||||
default_panel: '默認儀表板',
|
||||
@ -1292,7 +1293,7 @@ export default {
|
||||
fullscreen_preview: '全屏預覽',
|
||||
new_tab_preview: '新Tab頁預覽',
|
||||
select_panel_from_left: '請從左側選擇儀表板',
|
||||
template_nale: '模板名稱',
|
||||
template_name: '模板名稱',
|
||||
template: '模板',
|
||||
category: '分類',
|
||||
all_org: '所有組織',
|
||||
@ -1306,7 +1307,7 @@ export default {
|
||||
select_by_table: '按表選擇',
|
||||
data_list: '數據列表',
|
||||
component_list: '組件列表',
|
||||
custom_scope: '自定義控制範圍',
|
||||
custom_scope: '自定義控製範圍',
|
||||
multiple_choice: '多選',
|
||||
single_choice: '單選',
|
||||
field: '字段',
|
||||
@ -1321,7 +1322,7 @@ export default {
|
||||
redo: '重做',
|
||||
undo: '撤銷',
|
||||
panelNull: '這是個空的儀表板，可以通過編輯來豐富內容',
|
||||
copy: '複制',
|
||||
copy: '複製',
|
||||
paste: '粘貼',
|
||||
cut: '剪切',
|
||||
lock: '鎖定',
|
||||
@ -1374,52 +1375,54 @@ export default {
|
||||
save: '保存',
|
||||
drill: '下鑽',
|
||||
linkage: '聯動',
|
||||
jump: '跳转',
|
||||
jump: '跳轉',
|
||||
cancel_linkage: '取消聯動',
|
||||
remove_all_linkage: '清除所有聯動',
|
||||
exit_un_march_linkage_field: '存在未匹配聯動關系的字段',
|
||||
details: '詳情',
|
||||
setting: '設置',
|
||||
no_drill_field: '缺少關聯字段',
|
||||
matrix: '矩阵',
|
||||
suspension: '悬浮',
|
||||
new_element_distribution: '当前元素移入分布方式',
|
||||
subject_no_edit: '系统主题不能修改',
|
||||
subject_name_not_null: '主题名称需要1~20字符',
|
||||
is_enable: '是否启用',
|
||||
open_mode: '打开方式',
|
||||
matrix: '矩陣',
|
||||
suspension: '懸浮',
|
||||
new_element_distribution: '當前元素移入分布方式',
|
||||
subject_no_edit: '系統主題不能修改',
|
||||
subject_name_not_null: '主題名稱需要1~20字符',
|
||||
is_enable: '是否啟用',
|
||||
open_mode: '打開方式',
|
||||
new_window: '新窗口',
|
||||
now_window: '当前窗口',
|
||||
hyperLinks: '超链接',
|
||||
link_open_tips: '仪表板非编辑状态可打开链接',
|
||||
data_loading: '数据准备中...',
|
||||
export_loading: '导出中...',
|
||||
export_pdf: '导出PDF',
|
||||
jump_set: '跳转设置',
|
||||
enable_jump: '启用跳转',
|
||||
column_name: '字段名称',
|
||||
enable_column: '启用字段',
|
||||
open_model: '打开方式',
|
||||
link_type: '链接类型',
|
||||
link_outer: '外部链接',
|
||||
link_panel: '仪表板',
|
||||
select_jump_panel: '选择关联的仪表板',
|
||||
link_view: '联动视图',
|
||||
link_view_field: '联动视图字段',
|
||||
add_jump_field: '追加跳转联动依赖字段',
|
||||
input_jump_link: '请输入跳转连接',
|
||||
select_dimension: '请选择维度...',
|
||||
please_select: '请选择',
|
||||
video_type: '视频类型',
|
||||
online_video: '在线视频',
|
||||
streaming_media: '流媒体',
|
||||
auto_play: '自动播放',
|
||||
video_tips: '优先HTTPS链接；当前支持格式mp4,webm',
|
||||
play_frequency: '播放频率',
|
||||
now_window: '當前窗口',
|
||||
hyperLinks: '超鏈接',
|
||||
link_open_tips: '儀表板非編輯狀態可打開鏈接',
|
||||
data_loading: '數據準備中...',
|
||||
export_loading: '導出中...',
|
||||
export_pdf: '導出PDF',
|
||||
jump_set: '跳轉設置',
|
||||
enable_jump: '啟用跳轉',
|
||||
column_name: '字段名稱',
|
||||
enable_column: '啟用字段',
|
||||
open_model: '打開方式',
|
||||
link_type: '鏈接類型',
|
||||
link_outer: '外部鏈接',
|
||||
link_panel: '儀表板',
|
||||
select_jump_panel: '選擇關聯的儀表板',
|
||||
link_view: '聯動視圖',
|
||||
link_view_field: '聯動視圖字段',
|
||||
add_jump_field: '追加跳轉聯動依賴字段',
|
||||
input_jump_link: '請輸入跳轉連接',
|
||||
select_dimension: '請選擇維度...',
|
||||
please_select: '請選擇',
|
||||
video_type: '視頻類型',
|
||||
online_video: '在線視頻',
|
||||
streaming_media: '流媒體',
|
||||
auto_play: '自動播放',
|
||||
video_tips: '優先HTTPS鏈接；當前支持格式mp4,webm',
|
||||
play_frequency: '播放頻率',
|
||||
play_once: '播放一次',
|
||||
play_circle: '循环播放',
|
||||
video_links: '视频链接',
|
||||
video_add_tips: '请点击添加配置视频信息...'
|
||||
play_circle: '循環播放',
|
||||
video_links: '視頻鏈接',
|
||||
video_add_tips: '請點擊添加配置視頻信息...',
|
||||
panel_view_result_show: '視圖結果展示',
|
||||
panel_view_result_tips: '選擇儀表板會覆蓋視圖的結果展示數量，取值範圍1~10000'
|
||||
},
|
||||
plugin: {
|
||||
local_install: '本地安裝',
|
||||
@ -1490,7 +1493,7 @@ export default {
|
||||
auth_num: '授權數量',
|
||||
version: '版本',
|
||||
version_num: '版本號',
|
||||
standard: '標准版',
|
||||
standard: '標準版',
|
||||
enterprise: '企業版',
|
||||
suport: '獲取技術支持',
|
||||
update_success: '更新成功'
|
||||
@ -1512,8 +1515,8 @@ export default {
|
||||
month: '月',
|
||||
week: '周',
|
||||
year: '年',
|
||||
d_w_cant_not_set: '日期與星期不可以同時爲“不指定”',
|
||||
d_w_must_one_set: '日期與星期必須有一個爲“不指定”',
|
||||
d_w_cant_not_set: '日期與星期不可以同時爲「不指定」',
|
||||
d_w_must_one_set: '日期與星期必須有一個爲「不指定」',
|
||||
every_day: '每日',
|
||||
cycle: '周期',
|
||||
not_set: '不指定',
|
||||
@ -1541,9 +1544,9 @@ export default {
|
||||
week_end: '至星期',
|
||||
every_year: '每年',
|
||||
week_tips: '說明：1-7 分別對應 周日-周六',
|
||||
minute_limit: '分鍾不能小于1，大于59',
|
||||
hour_limit: '小時不能小于1，大于23',
|
||||
day_limit: '天不能小于1，大于31'
|
||||
minute_limit: '分鍾不能小於1，大於59',
|
||||
hour_limit: '小時不能小於1，大於23',
|
||||
day_limit: '天不能小於1，大於31'
|
||||
},
|
||||
dept: {
|
||||
can_not_move_change_sort: '不能移動以改變排序',
|
||||
@ -1582,11 +1585,11 @@ export default {
|
||||
split_placeholder: '至',
|
||||
please_key_min: '請輸入最小值',
|
||||
please_key_max: '請輸入最大值',
|
||||
out_of_min: '最小值不能小于最小整數-2³²',
|
||||
out_of_max: '最大值不能大于最大整數2³²-1',
|
||||
out_of_min: '最小值不能小於最小整數-2³²',
|
||||
out_of_max: '最大值不能大於最大整數2³²-1',
|
||||
must_int: '請輸入整數',
|
||||
min_out_max: '最小值必須小于最大值',
|
||||
max_out_min: '最大值必須大于最小值'
|
||||
min_out_max: '最小值必須小於最大值',
|
||||
max_out_min: '最大值必須大於最小值'
|
||||
},
|
||||
denumberselect: {
|
||||
label: '數字下拉',
|
||||
@ -1688,4 +1691,3 @@ export default {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -959,6 +959,7 @@ export default {
|
||||
table_page_size_unit: '条/页',
|
||||
result_count: '结果展示',
|
||||
result_mode_all: '全部',
|
||||
result_mode_custom: '自定义',
|
||||
chart_word_cloud: '词云',
|
||||
drag_block_word_cloud_label: '词标签',
|
||||
drag_block_word_cloud_size: '词大小',
|
||||
@ -1427,7 +1428,9 @@ export default {
|
||||
play_once: '播放一次',
|
||||
play_circle: '循环播放',
|
||||
video_links: '视频链接',
|
||||
video_add_tips: '请点击添加配置视频信息...'
|
||||
video_add_tips: '请点击添加配置视频信息...',
|
||||
panel_view_result_show: '视图结果展示',
|
||||
panel_view_result_tips: '选择仪表板会覆盖视图的结果展示数量，取值范围1~10000'
|
||||
},
|
||||
plugin: {
|
||||
local_install: '本地安装',
|
||||
|
||||
@ -7,25 +7,24 @@
|
||||
trigger="click"
|
||||
>
|
||||
<el-col>
|
||||
<el-radio v-model="panel.gap" label="yes" @change="onChangePanelStyle">{{ $t('panel.gap') }} </el-radio>
|
||||
<el-radio v-model="panel.gap" label="yes" @change="onChangePanelStyle">{{ $t('panel.gap') }}</el-radio>
|
||||
<el-radio v-model="panel.gap" label="no" @change="onChangePanelStyle">{{ $t('panel.no_gap') }}</el-radio>
|
||||
</el-col>
|
||||
<el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.component_gap') }} <i class="el-icon-setting el-icon--right" /></el-button>
|
||||
<el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.component_gap') }} <i
|
||||
class="el-icon-setting el-icon--right"
|
||||
/></el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { DEFAULT_PANEL_STYLE } from '@/views/panel/panel'
|
||||
import { mapState } from 'vuex'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
|
||||
export default {
|
||||
name: 'ComponentGap',
|
||||
props: {
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
panel: null
|
||||
@ -44,26 +43,29 @@ export default {
|
||||
const canvasStyleData = deepCopy(this.canvasStyleData)
|
||||
canvasStyleData.panel = this.panel
|
||||
this.$store.commit('setCanvasStyle', canvasStyleData)
|
||||
this.$store.commit('recordSnapshot','onChangePanelStyle')
|
||||
this.$store.commit('recordSnapshot', 'onChangePanelStyle')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader>>>.el-upload {
|
||||
.avatar-uploader >>> .el-upload {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
line-height: 70px;
|
||||
}
|
||||
.avatar-uploader>>>.el-upload-list li{
|
||||
|
||||
.avatar-uploader >>> .el-upload-list li {
|
||||
width: 100px !important;
|
||||
height: 60px !important;
|
||||
}
|
||||
.disabled>>>.el-upload--picture-card {
|
||||
|
||||
.disabled >>> .el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
.shape-item{
|
||||
|
||||
.shape-item {
|
||||
padding: 6px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
@ -71,20 +73,25 @@ export default {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.form-item-slider>>>.el-form-item__label{
|
||||
|
||||
.form-item-slider >>> .el-form-item__label {
|
||||
font-size: 12px;
|
||||
line-height: 38px;
|
||||
}
|
||||
.form-item>>>.el-form-item__label{
|
||||
|
||||
.form-item >>> .el-form-item__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-select-dropdown__item{
|
||||
|
||||
.el-select-dropdown__item {
|
||||
padding: 0 20px;
|
||||
}
|
||||
span{
|
||||
|
||||
span {
|
||||
font-size: 12px
|
||||
}
|
||||
.el-form-item{
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,37 +18,37 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="'刷新时间频率'" class="form-item form-item-slider">
|
||||
<el-slider v-model="canvasStyleData.refreshTime" show-input :show-input-controls="false" input-size="mini" :min="1" :max="3600" @change="onChangePanelStyle" />
|
||||
<el-slider
|
||||
v-model="canvasStyleData.refreshTime"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="1"
|
||||
:max="3600"
|
||||
@change="onChangePanelStyle"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.refresh_time') }} <i class="el-icon-setting el-icon--right" /></el-button>
|
||||
<el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.refresh_time') }} <i
|
||||
class="el-icon-setting el-icon--right"
|
||||
/></el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import {
|
||||
CANVAS_STYLE
|
||||
} from '@/views/panel/panel'
|
||||
|
||||
export default {
|
||||
name: 'PanelRefreshTime',
|
||||
props: {
|
||||
},
|
||||
props: {},
|
||||
computed: {
|
||||
canvasStyleData() {
|
||||
return this.$store.state.canvasStyleData
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始化赋值
|
||||
// if (!this.canvasStyleData.refreshTime) {
|
||||
// this.canvasStyleData['refreshTime'] = CANVAS_STYLE.refreshTime
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
onChangePanelStyle() {
|
||||
@ -59,19 +59,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader>>>.el-upload {
|
||||
.avatar-uploader >>> .el-upload {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
line-height: 70px;
|
||||
}
|
||||
.avatar-uploader>>>.el-upload-list li{
|
||||
|
||||
.avatar-uploader >>> .el-upload-list li {
|
||||
width: 100px !important;
|
||||
height: 60px !important;
|
||||
}
|
||||
.disabled>>>.el-upload--picture-card {
|
||||
|
||||
.disabled >>> .el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
.shape-item{
|
||||
|
||||
.shape-item {
|
||||
padding: 6px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
@ -79,20 +82,25 @@ export default {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.form-item-slider>>>.el-form-item__label{
|
||||
|
||||
.form-item-slider >>> .el-form-item__label {
|
||||
font-size: 12px;
|
||||
line-height: 38px;
|
||||
}
|
||||
.form-item>>>.el-form-item__label{
|
||||
|
||||
.form-item >>> .el-form-item__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-select-dropdown__item{
|
||||
|
||||
.el-select-dropdown__item {
|
||||
padding: 0 20px;
|
||||
}
|
||||
span{
|
||||
|
||||
span {
|
||||
font-size: 12px
|
||||
}
|
||||
.el-form-item{
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="width: 100%;">
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="click"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<el-radio-group v-model="panel.resultMode" class="radio-span" size="mini" @change="onChangePanelStyle">
|
||||
<el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
|
||||
<el-radio label="custom">
|
||||
<span>{{ $t('panel.panel') }} </span>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
<el-col :span="8" class="slider-area">
|
||||
<el-slider
|
||||
v-model="panel.resultCount"
|
||||
:disabled="panel.resultMode==='all'"
|
||||
style="margin-left: 5px"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
:show-tooltip="false"
|
||||
input-size="mini"
|
||||
:min="1"
|
||||
:max="10000"
|
||||
@change="onChangePanelStyle"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<span style="color: #909399; font-size: 8px;margin-left: 3px">
|
||||
Tips: {{ $t('panel.panel_view_result_tips') }}
|
||||
</span>
|
||||
</el-row>
|
||||
<el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.panel_view_result_show') }}<i
|
||||
class="el-icon-setting el-icon--right"
|
||||
/></el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PanelViewResult',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
panel: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canvasStyleData() {
|
||||
return this.$store.state.canvasStyleData
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// 初始化赋值
|
||||
this.panel = this.canvasStyleData.panel
|
||||
},
|
||||
methods: {
|
||||
onChangePanelStyle() {
|
||||
this.$store.state.styleChangeTimes++
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-uploader >>> .el-upload {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
.avatar-uploader >>> .el-upload-list li {
|
||||
width: 100px !important;
|
||||
height: 60px !important;
|
||||
}
|
||||
|
||||
.disabled >>> .el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shape-item {
|
||||
padding: 6px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-item-slider >>> .el-form-item__label {
|
||||
font-size: 12px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.form-item >>> .el-form-item__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.radio-span {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.radio-span >>> .el-radio__label {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.slider-area >>> .el-slider__runway {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<el-row class="slider-container">
|
||||
<div style="height: 40px; line-height: 40px; padding-left: 15px; text-align: left; white-space: pre; text-overflow: ellipsis; left: 0px; right: 0px; top: 0px; font-weight: 700">{{ $t('panel.dashboard_theme') }} </div>
|
||||
<div style="height: 1px; position: absolute; left: 15px; right: 15px; top: 40px; box-sizing:border-box;border-bottom: 1px solid #e8eaed" />
|
||||
<div
|
||||
style="height: 40px; line-height: 40px; padding-left: 15px; text-align: left; white-space: pre; text-overflow: ellipsis; left: 0px; right: 0px; top: 0px; font-weight: 700"
|
||||
>
|
||||
{{ $t('panel.dashboard_theme') }}
|
||||
</div>
|
||||
<div
|
||||
style="height: 1px; position: absolute; left: 15px; right: 15px; top: 40px; box-sizing:border-box;border-bottom: 1px solid #e8eaed"
|
||||
/>
|
||||
<div>
|
||||
<slider />
|
||||
</div>
|
||||
@ -9,38 +15,42 @@
|
||||
<div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
|
||||
<el-collapse v-model="activeNames" @change="handleChange">
|
||||
<el-collapse-item :title="$t('panel.panel')" name="panel">
|
||||
<!-- <el-row class="shape-item">-->
|
||||
<!-- <span class="shape-item" style="margin-left: 10px">{{ $t('panel.new_element_distribution') }}:</span>-->
|
||||
<!-- <!– <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />–>-->
|
||||
<!-- <el-radio-group v-model="canvasStyleData.auxiliaryMatrix" size="mini" name="auxiliaryMatrix" @change="styleChange">-->
|
||||
<!-- <el-radio-button :label="true">-->
|
||||
<!-- {{ $t('panel.matrix') }}<i class="icon iconfont icon-shujujuzhen" />-->
|
||||
<!-- </el-radio-button>-->
|
||||
<!-- <el-radio-button :label="false">-->
|
||||
<!-- {{ $t('panel.suspension') }}<i class="icon iconfont icon-xuanfuanniu" />-->
|
||||
<!-- </el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-row>-->
|
||||
<el-row class="selector-div">
|
||||
<background-selector class="attr-selector" />
|
||||
<component-gap class="attr-selector" />
|
||||
<Panel-Refresh-Time class="attr-selector" />
|
||||
<panel-refresh-time class="attr-selector" />
|
||||
<panel-view-result class="attr-selector" />
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('chart.module_style')" name="component">
|
||||
<el-row class="selector-div">
|
||||
<!-- <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
|
||||
<panel-background-color-selector v-if="chart" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
|
||||
<panel-background-color-selector
|
||||
v-if="chart"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
@onChangeBackgroundForm="onChangeBackgroundForm"
|
||||
/>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('chart.shape_attr')" name="graphical">
|
||||
<el-row class="selector-div">
|
||||
<panel-color-selector :source-type="'panelEchart'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
|
||||
<panel-color-selector
|
||||
:source-type="'panelEchart'"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
@onColorChange="onColorChange"
|
||||
/>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :title="$t('panel.table')" name="table">
|
||||
<el-row class="selector-div">
|
||||
<panel-color-selector index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
|
||||
<panel-color-selector
|
||||
index="10002"
|
||||
:source-type="'panelTable'"
|
||||
class="attr-selector"
|
||||
:chart="tableChart"
|
||||
@onColorChange="onTableColorChange"
|
||||
/>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
@ -59,9 +69,11 @@ import PanelRefreshTime from './PanelStyle/PanelRefreshTime'
|
||||
import { mapState } from 'vuex'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import bus from '@/utils/bus'
|
||||
import PanelViewResult from '@/views/panel/SubjectSetting/PanelStyle/PanelViewResult'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PanelViewResult,
|
||||
slider,
|
||||
BackgroundSelector,
|
||||
ComponentGap,
|
||||
@ -82,8 +94,7 @@ export default {
|
||||
'canvasStyleData'
|
||||
]),
|
||||
|
||||
watch: {
|
||||
},
|
||||
watch: {},
|
||||
|
||||
mounted() {
|
||||
bus.$on('onSubjectChange', () => {
|
||||
@ -119,10 +130,8 @@ export default {
|
||||
this.tableChart.customAttr.color = this.tableChart.customAttr.tableColor
|
||||
},
|
||||
handleChange(val) {
|
||||
// console.log(val)
|
||||
},
|
||||
onChangePanelStyle(parma) {
|
||||
// console.log('parma:' + JSON.stringify(parma))
|
||||
},
|
||||
onColorChange(val) {
|
||||
this.chart.customAttr.color = val
|
||||
@ -171,21 +180,24 @@ export default {
|
||||
color: #3d4d66;
|
||||
font-size: 12px;
|
||||
}
|
||||
.attr-selector{
|
||||
|
||||
.attr-selector {
|
||||
background-color: white;
|
||||
height: 32px;
|
||||
margin: 5px 5px 5px 5px;
|
||||
padding:0 4px;
|
||||
padding: 0 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 10001;
|
||||
}
|
||||
.blackTheme .attr-selector{
|
||||
|
||||
.blackTheme .attr-selector {
|
||||
background-color: var(--MainBG)
|
||||
}
|
||||
|
||||
.selector-div {
|
||||
background-color: var(--MainBG, #f7f8fa);
|
||||
margin: 5px
|
||||
background-color: var(--MainBG, #f7f8fa);
|
||||
margin: 5px
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { BASE_CHART, BASE_CHART_STRING } from '@/views/chart/chart/chart'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
@ -7,7 +6,9 @@ export const DEFAULT_PANEL_STYLE = {
|
||||
color: '#ffffff',
|
||||
imageUrl: null,
|
||||
backgroundType: 'image',
|
||||
gap: 'yes'
|
||||
gap: 'yes',
|
||||
resultMode: 'all', // 视图结果显示模式 all 视图 custom 仪表板自定义
|
||||
resultCount: 1000 // 视图结果显示条数
|
||||
}
|
||||
|
||||
export const CANVAS_STYLE = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user