+
{
if (el.relactiveDomValue != currentData.value) {
this.inputShow[el.name] = false;
}
});
+ if(divType){
+ this.onHiddenDomBorderBox(val,"divType");
+ }
},
// 组件拖入时 赋值
setDefaultValue() {
diff --git a/src/views/bigscreenDesigner/designer/designer.js b/src/views/bigscreenDesigner/designer/designer.js
deleted file mode 100644
index e69de29..0000000
--- a/src/views/bigscreenDesigner/designer/designer.js
+++ /dev/null
diff --git a/src/views/bigscreenDesigner/designer/index.vue b/src/views/bigscreenDesigner/designer/index.vue
index fe8e4a6..e592c84 100644
--- a/src/views/bigscreenDesigner/designer/index.vue
+++ b/src/views/bigscreenDesigner/designer/index.vue
@@ -230,6 +230,7 @@
@contextmenu.prevent.native="rightClick($event, index)"
@mousedown.prevent.native="widgetsClick(index)"
@mouseup.prevent.native="widgetsMouseup"
+ @keyup.delete.native="entryDelete(index)"
/>
@@ -856,6 +857,7 @@ export default {
}
}
}
+ // console.log("widgetJson",widgetJson);
return widgetJson;
},
layerClick(index) {
@@ -1038,6 +1040,7 @@ export default {
},
// 复制
copylayer() {
+ // console.log("copylayer");
const obj = this.deepClone(this.widgets[this.rightClickIndex]);
this.widgets.splice(this.widgets.length, 0, obj);
},
@@ -1078,6 +1081,14 @@ export default {
this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]);
}
},
+ //输入删除键删除
+ entryDelete(index){
+ this.widgets.splice(index, 1);
+ },
+ //输入ctrl+c
+ entryCopy(){
+ this.copylayer();
+ }
},
};
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate.js b/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate.js
deleted file mode 100644
index 8a74610..0000000
--- a/src/views/bigscreenDesigner/designer/tools/configure/decorateCharts/widget-decorate.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * 装饰json
- */
-export const widgetDecorate = {
- code: "widget-decorate",
- type: "decorate",
- tabName: '装饰图',
- label: "装饰",
- icon: "icontupian1",
- options: {
- // 配置
- setup: [
- {
- type: "el-input-text",
- label: "图层名称",
- name: "layerName",
- required: false,
- placeholder: "",
- value: "装饰"
- },
- {
- type: "el-select",
- label: "装饰类型",
- name: "decorateType",
- required: false,
- placeholder: "",
- selectOptions: [
- // { code: "div_Style_1", name: "装饰1_?" },
- { code: "div_Style_2", name: "装饰1" },
- // { code: "div_Style_3", name: "装饰3_?" },
- { code: "div_Style_4", name: "装饰2" },
- { code: "div_Style_5", name: "装饰3" },
- // { code: "div_Style_6", name: "装饰6_?" },
- { code: "div_Style_7", name: "装饰4" },
- { code: "div_Style_8", name: "装饰5" },
- // { code: "div_Style_9", name: "装饰9_?" },
- { code: "div_Style_10", name: "装饰6" },
- { code: "div_Style_11", name: "装饰7" },
- { code: "div_Style_12", name: "装饰8" }
- ],
- value: "div_Style_11"
- },
- {
- type: "el-input-text",
- label: "标题",
- name: "text",
- required: false,
- placeholder: "",
- value: ""
- },
- ],
- // 数据
- data: [],
- // 坐标
- position: [
- {
- type: "el-input-number",
- label: "左边距",
- name: "left",
- required: false,
- placeholder: "",
- value: 0
- },
- {
- type: "el-input-number",
- label: "上边距",
- name: "top",
- required: false,
- placeholder: "",
- value: 0
- },
- {
- type: "el-input-number",
- label: "宽度",
- name: "width",
- required: false,
- placeholder: "该容器在1920px大屏中的宽度",
- value: 1000
- },
- {
- type: "el-input-number",
- label: "高度",
- name: "height",
- required: false,
- placeholder: "该容器在1080px大屏中的高度",
- value: 600
- }
- ]
- }
-};
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
index 52e9dfb..37d9384 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
@@ -38,6 +38,7 @@ export const widgetBorderBox = {
{code: 'dv-border-Box-11', name: '边框11'},
{code: 'dv-border-Box-12', name: '边框12'},
{code: 'dv-border-Box-13', name: '边框13'},
+ {code: 'dv-border-Box-14', name: '自定义边框'},
],
value: 'dv-border-Box-1'
},
@@ -87,7 +88,7 @@ export const widgetBorderBox = {
name: 'title',
require: false,
placeholder: '',
- value: '',
+ value: '标题显示值',
},
{
type: 'el-input-number',
@@ -96,7 +97,70 @@ export const widgetBorderBox = {
require: false,
placeholder: '',
value: 250,
- }
+ },
+ [
+ {
+ name: '自定义边框样式设置',
+ list: [
+ {
+ type: 'el-input-text',
+ label: '边框样式',
+ name: 'databox',
+ required: false,
+ placeholder: '边框样式',
+ value: 'border:2px solid #032d60; -webkit-box-shadow:#07417a 0 0 10px;-moz-box-shadow:#07417a 0 0 10px;box-shadow:inset 0 0 30px #07417a;z-index: 0',
+ },
+ {
+ type: 'el-switch',
+ label: '标题前显示',
+ name: 'title14before',
+ require: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-input-text',
+ label: '标题样式',
+ name: 'title14',
+ required: false,
+ placeholder: '标题设置',
+ value: 'font-size:1.4rem; color:#fff; position: absolute; padding-left: 1.2rem;padding-top: 0.4rem;margin-bottom: 10px;',
+ },
+ {
+ type: 'el-input-text',
+ label: '左上角',
+ name: 'topL',
+ required: false,
+ placeholder: '左上角',
+ value: 'width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;top:-2px;left:-2px',
+ },
+ {
+ type: 'el-input-text',
+ label: '右上角',
+ name: 'topR',
+ required: false,
+ placeholder: '右上角',
+ value: 'width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;top:-2px;right:-2px',
+ },
+ {
+ type: 'el-input-text',
+ label: '左下角',
+ name: 'bottomL',
+ required: false,
+ placeholder: '左下角',
+ value: 'width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;bottom:-2px;left:-2px'
+ },
+ {
+ type: 'el-input-text',
+ label: '右下角',
+ name: 'bottomR',
+ required: false,
+ placeholder: '左下角',
+ value: 'width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;bottom:-2px;right:-2px'
+ },
+ ],
+ }
+ ],
],
// 数据
data: [],
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
index 86dd542..b6b5be0 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
@@ -67,10 +67,9 @@ export const widgetProgress = {
placeholder: "",
value: ""
},
-
{
type: "el-select-static",
- label: "静态数据选择",
+ label: "数值",
name: "slectedDataType",
require: false,
placeholder: "",
@@ -78,6 +77,15 @@ export const widgetProgress = {
value: ""
},
{
+ type: "el-select-static",
+ label: "动态色",
+ name: "slectedDataColor",
+ require: false,
+ placeholder: "",
+ selectOptions: [],
+ value: ""
+ },
+ {
type: "vue-color",
label: "底色",
name: "underColor",
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js b/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js
index 09b75d2..2ff24d7 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js
@@ -180,6 +180,14 @@ export const widgetPieNightingale = {
},
{
type: 'el-switch',
+ label: '标题',
+ name: 'isShowTitle',
+ require: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-switch',
label: '数值',
name: 'numberValue',
require: false,
@@ -259,6 +267,30 @@ export const widgetPieNightingale = {
value: true,
},
{
+ type: 'el-slider',
+ label: '图例占比',
+ name: 'piechartSize',
+ required: false,
+ placeholder: '',
+ value: 70,
+ },
+ {
+ type: 'el-slider',
+ label: '环形宽度',
+ name: 'randWidth',
+ required: false,
+ placeholder: '',
+ value: 40,
+ },
+ {
+ type: 'vue-color',
+ label: '字体颜色',
+ name: 'legendColor',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
type: 'vue-color',
label: '字体颜色',
name: 'legendColor',
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js b/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js
index 348f891..5cb2287 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js
@@ -185,6 +185,14 @@ export const widgetPiechart = {
},
{
type: 'el-switch',
+ label: '标题',
+ name: 'isShowTitle',
+ require: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-switch',
label: '数值',
name: 'numberValue',
require: false,
@@ -264,6 +272,22 @@ export const widgetPiechart = {
value: true,
},
{
+ type: 'el-slider',
+ label: '图例占比',
+ name: 'piechartSize',
+ required: false,
+ placeholder: '',
+ value: 70,
+ },
+ {
+ type: 'el-slider',
+ label: '环形宽度',
+ name: 'randWidth',
+ required: false,
+ placeholder: '',
+ value: 40,
+ },
+ {
type: 'vue-color',
label: '字体颜色',
name: 'legendColor',
@@ -272,7 +296,7 @@ export const widgetPiechart = {
value: '#fff',
},
{
- type: 'el-input-text',
+ type: 'el-input-number',
label: '字体字号',
name: 'legendFontSize',
required: false,
@@ -308,6 +332,7 @@ export const widgetPiechart = {
placeholder: '',
selectOptions: [
{ code: 'top', name: '顶部' },
+ { code: 'center', name: '居中' },
{ code: 'bottom', name: '底部' },
],
value: 'top'
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/table/widget-rotate-ranking.js b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-rotate-ranking.js
new file mode 100644
index 0000000..2c89dd1
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-rotate-ranking.js
@@ -0,0 +1,191 @@
+/*
+ * @Descripttion: 旋转排名表
+ */
+export const widgetRotateRanking= {
+ code: 'widget-rotate-ranking',
+ type: 'table',
+ tabName: '表格',
+ label: '旋转排名表',
+ icon: 'icon511tongji_shutu',
+ options: {
+ // 配置
+ setup: [
+ {
+ type: 'el-input-text',
+ label: '图层名称',
+ name: 'layerName',
+ required: false,
+ placeholder: '',
+ value: '排名轮播表',
+ },
+ {
+ type: 'el-input-number',
+ label: '表行数',
+ name: 'rowNum',
+ required: false,
+ placeholder: '',
+ value: 5,
+ },
+ {
+ type: 'el-input-number',
+ label: '滚动间隔(毫秒)',
+ name: 'waitTime',
+ required: false,
+ placeholder: '',
+ value: 2500,
+ },
+ {
+ type: 'el-select',
+ label: '动画效果',
+ name: 'carousel',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'single', name: '单条'},
+ {code: 'page', name: '整页'}
+ ],
+ value: 'single'
+ },
+ {
+ type: 'el-input-text',
+ label: '数值单位',
+ name: 'unit',
+ required: false,
+ placeholder: '',
+ value: '',
+ },
+ {
+ type: 'el-switch',
+ label: '自动排序',
+ name: 'sort',
+ required: false,
+ placeholder: '',
+ value: true
+ },
+ {
+ type: 'vue-color',
+ label: '背景颜色',
+ name: 'background',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ ],
+ // 数据
+ data: [
+ {
+ type: 'el-radio-group',
+ label: '数据类型',
+ name: 'dataType',
+ require: false,
+ placeholder: '',
+ selectValue: true,
+ selectOptions: [
+ {
+ code: 'staticData',
+ name: '静态数据',
+ },
+ {
+ code: 'dynamicData',
+ name: '动态数据',
+ },
+ ],
+ value: 'staticData',
+ },
+ {
+ type: 'el-input-number',
+ label: '刷新时间(毫秒)',
+ name: 'refreshTime',
+ relactiveDom: 'dataType',
+ relactiveDomValue: 'dynamicData',
+ value: 30000
+ },
+ {
+ type: 'el-button',
+ label: '静态数据',
+ name: 'staticData',
+ required: false,
+ placeholder: '',
+ relactiveDom: 'dataType',
+ relactiveDomValue: 'staticData',
+ value: [
+ {
+ name: '周口',
+ value: 55
+ },
+ {
+ name: '南阳',
+ value: 120
+ },
+ {
+ name: '西峡',
+ value: 78
+ },
+ {
+ name: '驻马店',
+ value: 66
+ },
+ {
+ name: '新乡',
+ value: 80
+ },
+ {
+ name: '信阳',
+ value: 45
+ },
+ {
+ name: '漯河',
+ value: 29
+ }
+ ],
+ },
+ {
+ type: 'dycustComponents',
+ label: '',
+ name: 'dynamicData',
+ required: false,
+ placeholder: '',
+ relactiveDom: 'dataType',
+ relactiveDomValue: 'dynamicData',
+ chartType: 'widget-scroll-ranking-board',
+ dictKey: 'TEXT_PROPERTIES',
+ value: '',
+ },
+ ],
+ // 坐标
+ position: [
+ {
+ type: 'el-input-number',
+ label: '左边距',
+ name: 'left',
+ required: false,
+ placeholder: '',
+ value: 10,
+ },
+ {
+ type: 'el-input-number',
+ label: '上边距',
+ name: 'top',
+ required: false,
+ placeholder: '',
+ value: 10,
+ },
+ {
+ type: 'el-input-number',
+ label: '宽度',
+ name: 'width',
+ required: false,
+ placeholder: '该容器在1920px大屏中的宽度',
+ value: 490,
+ },
+ {
+ type: 'el-input-number',
+ label: '高度',
+ name: 'height',
+ required: false,
+ placeholder: '该容器在1080px大屏中的高度',
+ value: 370,
+ },
+ ],
+ }
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js
index ff59601..7e5f533 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js
@@ -240,7 +240,7 @@ export const widgetTable = {
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
- {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0001'},
+ {date: '2016-05-02', name: '
王小虎', address: '
上海市普陀区金沙江路 1518 弄0001'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0002'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0003'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0004'},
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js
index b16d1ab..5f25e31 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js
@@ -60,19 +60,6 @@ export const widgetDigitalFlop= {
value: 0,
},
{
- type: 'el-select',
- label: '水平对齐方式',
- name: 'textAlign',
- required: false,
- placeholder: '',
- selectOptions: [
- {code: 'center', name: '居中'},
- {code: 'left', name: '左对齐'},
- {code: 'right', name: '右对齐'}
- ],
- value: 'center'
- },
- {
type: 'el-input-number',
label: '动效帧数',
name: 'animationFrame',
@@ -102,6 +89,43 @@ export const widgetDigitalFlop= {
},
{
type: 'el-select',
+ label: '水平对齐方式',
+ name: 'textAlign',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'center', name: '居中'},
+ {code: 'left', name: '左对齐'},
+ {code: 'right', name: '右对齐'}
+ ],
+ value: 'center'
+ },
+ {
+ type: 'el-select',
+ label: '字体样式',
+ name: 'fontStyle',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'normal', name: '正常'},
+ {code: 'italic', name: '斜体'}
+ ],
+ value: 'normal'
+ },
+ {
+ type: 'el-select',
+ label: '字体',
+ name: 'fontFamily',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'Arial,sans-serif', name: '正常'},
+ {code: 'LCdd', name: '个性文字'}
+ ],
+ value: 'Arial,sans-serif'
+ },
+ {
+ type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-time.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-time.js
index 337bad8..59e911e 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-time.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-time.js
@@ -25,6 +25,17 @@ export const widgetTime = {
},
{
type: 'el-select',
+ label: '字体类型',
+ name: 'fontFamily',
+ required: false,
+ selectOptions: [
+ {code: '', name: '正常'},
+ {code: 'LCdd', name: '文艺字'},
+ ],
+ value: ''
+ },
+ {
+ type: 'el-select',
label: '时间格式',
name: 'timeFormat',
required: false,
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js b/src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js
index 3a0eb36..d7a0da6 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/video/widget-video.js
@@ -1,6 +1,6 @@
export const widgetVideo = {
code: 'widget-video',
- type: 'video',
+ type: 'html',
tabName: '播放器',
label: '视频',
icon: 'iconshipin',
diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js
index 9fad3a8..bc2ac33 100644
--- a/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/src/views/bigscreenDesigner/designer/tools/main.js
@@ -28,7 +28,6 @@ import { widgetLineStack } from "./configure/lineCharts/widget-line-stack"
import { widgetBarCompare } from "./configure/barCharts/widget-bar-compare"
import { widgetLineCompare } from "./configure/lineCharts/widget-line-compare"
import { widgetDecoratePie } from "./configure/decorateCharts/widget-decorate-pie";
-import {widgetDecorate} from "./configure/decorateCharts/widget-decorate";
import { widgetMoreBarLine } from "./configure/barlineCharts/widget-more-bar-line";
import { widgetWordCloud } from "./configure/wordcloudCharts/widget-word-cloud";
import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
@@ -43,6 +42,7 @@ import {widgetConicalColumnChart} from "./configure/funnelCharts/widget-conical-
import {widgetBorderBoxFloat} from "./configure/div/widget-border-box-float";
import {widgetDigitalFlopSingle} from "./configure/texts/widget-digital-flop-single";
import {widgetSvg} from "./configure/div/widget-svg";
+import {widgetRotateRanking} from "./configure/table/widget-rotate-ranking";
export const widgetTool = [
@@ -81,7 +81,6 @@ export const widgetTool = [
widgetLineCompare,
//装饰
widgetDecoratePie,
- widgetDecorate,
widgetMoreBarLine,
widgetWordCloud,
widgetHeatmap,
@@ -94,4 +93,5 @@ export const widgetTool = [
widgetBorderBoxFloat,
widgetDigitalFlopSingle,
widgetSvg,
+ widgetRotateRanking
]
diff --git a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
index acf82a5..ba3bcfe 100644
--- a/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
@@ -237,22 +237,6 @@ export default {
};
this.options.grid = grid;
},
- // 图例操作 legend
- setOptionsLegend() {
- const optionsSetup = this.optionsSetup;
- const legend = this.options.legend;
- legend.show = optionsSetup.isShowLegend;
- legend.left = optionsSetup.lateralPosition;
- legend.top = optionsSetup.longitudinalPosition;
- legend.bottom =
- optionsSetup.longitudinalPosition;
- legend.orient = optionsSetup.layoutFront;
- legend.textStyle = {
- color: optionsSetup.legendColor,
- fontSize: optionsSetup.legendFontSize
- };
- legend.itemWidth = optionsSetup.legendWidth;
- },
// 图例名称设置
setOptionsLegendName(name){
const optionsSetup = this.optionsSetup;
@@ -304,6 +288,7 @@ export default {
},
//静态数据
staticDataFn(val) {
+ console.log("staticDataFn",val);
const optionsSetup = this.optionsSetup;
//颜色
const customColor = optionsSetup.customColor;
@@ -373,6 +358,21 @@ export default {
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
+ setOptionsLegend() {
+ const optionsSetup = this.optionsSetup;
+ const legend = this.options.legend;
+ legend.show = optionsSetup.isShowLegend;
+ legend.left = optionsSetup.lateralPosition;
+ legend.top = optionsSetup.longitudinalPosition;
+ legend.bottom =
+ optionsSetup.longitudinalPosition;
+ legend.orient = optionsSetup.layoutFront;
+ legend.textStyle = {
+ color: optionsSetup.legendColor,
+ fontSize: optionsSetup.legendFontSize
+ };
+ legend.itemWidth = optionsSetup.legendWidth;
+ },
// 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) {
if (!val) return;
@@ -411,7 +411,8 @@ export default {
this.options.yAxis.type = "value";
}
const series = [];
- const legendName = [];
+ let legendName = [];
+ legendName = this.setUnique(legendName);
for (const i in val.series) {
if (val.series[i].type == "bar") {
series.push({
diff --git a/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue b/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
index 194800a..fd948bd 100644
--- a/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
@@ -1,3 +1,4 @@
+
diff --git a/src/views/bigscreenDesigner/designer/widget/decorate/decorate.vue b/src/views/bigscreenDesigner/designer/widget/decorate/decorate.vue
deleted file mode 100644
index 5375189..0000000
--- a/src/views/bigscreenDesigner/designer/widget/decorate/decorate.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-
-
-
-
-
-
{{ styleColor.text }}
-
-
-
-
{{ styleColor.text }}
-
-
-
-
-
-
diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
index 9e1506d..3d1764f 100644
--- a/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
+++ b/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
@@ -31,7 +31,16 @@
+ v-else-if="styleColor.divClass === 'dv-border-Box-13'">
+
+
+
+
+
+
{{ transStyle.title }}
+
+
diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue
index faf46d9..28b3c9c 100644
--- a/src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue
+++ b/src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue
@@ -49,21 +49,8 @@ export default {
if(dataSvg[i].key==key){
/** 控制svg图片拖动，原理在于设置svg的viewbox属性，viewbox的第一个参数控制左右位置，第二个参数设置上下位置 */
/** 控制svg图片放大缩小，原理在于设置svg的viewbox属性，viewbox的第三个参数控制左右大小，第四个参数设置上下大小 */
- //设置svg 自适应 添加属性 viewBox="0,0,640,480"
+ //设置svg 自适应 添加属性 viewBox="0,0,640,480"
let svg = dataSvg[i].value;
- let svgViewbox = svg.substr(0,svg.indexOf("viewBox=\"")+9); //截取最后一个点号后4个字符
- let svgViewboxAfter = svg.substr(svg.indexOf("viewBox=\"")+9,svg.length); //截取最后一个点号后4个字符
- let svgViewboxBox = svgViewboxAfter.substr(0,svgViewboxAfter.indexOf("\"")); //截取最后一个点号后4个字符
- let svgViewboxBoxAfter = svgViewboxAfter.substr(svgViewboxAfter.indexOf("\"")+1,svgViewboxAfter.length); //截取最后一个点号后4个字符
- let viewbox = this.transStyle.left+" "+ this.transStyle.top+" "+ this.transStyle.width+" "+ this.transStyle.height;
- let dataSvgAfter = svgViewbox+viewbox+"\"" +svgViewboxBoxAfter;
- console.log("svg",svg);
- console.log("svgViewbox",svgViewbox);
- console.log("svgViewboxAfter",svgViewboxAfter);
- console.log("svgViewboxBox",svgViewboxBox);
- console.log("svgViewboxBoxAfter",svgViewboxBoxAfter);
- console.log("viewbox",viewbox);
- console.log("dataSvgAfter",dataSvgAfter);
return svg;
}
}
@@ -107,24 +94,8 @@ export default {
diff --git a/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue b/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
index b5a0eab..6a62e28 100644
--- a/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
+++ b/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
@@ -59,11 +59,17 @@ export default {
showText: this.transStyle.showText,
textInside: this.transStyle.textInside,
color: this.transStyle.color,
- percentage: 50
+ percentage: 0
};
const percentage = this.staticData[this.transStyle.slectedDataType];
- if (percentage && typeof percentage === 'number') {
- result.percentage = percentage;
+ const slectedDataColor = this.staticData[this.transStyle.slectedDataColor];
+ if (percentage) {
+ result.percentage = parseInt(percentage);
+ }else{
+ result.percentage =0;
+ }
+ if (slectedDataColor) {
+ result.color = slectedDataColor;
}
return result;
}
diff --git a/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue b/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
index d9860f6..8a27c00 100644
--- a/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
+++ b/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
@@ -28,8 +28,8 @@ export default {
{
//name: "面积模式",
type: "pie",
- radius: ["10%", "50%"],
- center: ["50%", "50%"],
+ radius: ["30%", "100%"],
+ center: ["45%", "50%"],
roseType: "area",
itemStyle: {
borderRadius: 8
@@ -41,7 +41,8 @@ export default {
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
- optionsSetup: {}
+ optionsSetup: {
+ }
};
},
computed: {
@@ -88,7 +89,10 @@ export default {
},
// 饼图模式 面积模式"area" 半径模式"radius"
setOptionsRosetype() {
+ const piechartSize = this.optionsSetup.piechartSize;
+ const randWidth = this.optionsSetup.randWidth;
this.options.series[0]["roseType"] = this.optionsSetup.nightingleRosetype;
+ this.options.series[0]["radius"] = [randWidth+"%", piechartSize+"%"];
},
// 标题修改
setOptionsTitle() {
@@ -118,9 +122,11 @@ export default {
const series = this.options.series;
const numberValue = optionsSetup.numberValue ? "{c}" : "";
const percentage = optionsSetup.percentage ? "({d})%" : "";
+ const formatterVaue
+ = optionsSetup.isShowTitle ?`{a|{b}：${numberValue} ${percentage}}`:`${numberValue} ${percentage}`;
const label = {
show: optionsSetup.isShow,
- formatter: `{a|{b}：${numberValue} ${percentage}}`,
+ formatter: formatterVaue ,
rich: {
a: {
padding: [-30, 15, -20, 15],
diff --git a/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue b/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
index 523f42a..01c2ef9 100644
--- a/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
+++ b/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
@@ -94,11 +94,14 @@ export default {
},
// 饼图样式
setOptionsPiechartStyle() {
+ const piechartSize = this.optionsSetup.piechartSize;
+ const randWidth = this.optionsSetup.randWidth;
if (this.optionsSetup.piechartStyle == "shixin") {
- this.options.series[0]["radius"] = "50%";
+ this.options.series[0]["radius"] = piechartSize+"%";
} else if (this.optionsSetup.piechartStyle == "kongxin") {
- this.options.series[0]["radius"] = ["40%", "70%"];
+ this.options.series[0]["radius"] = [randWidth+"%", piechartSize+"%"];
} else {
+
}
},
// 标题设置
@@ -129,9 +132,11 @@ export default {
const series = this.options.series;
const numberValue = optionsSetup.numberValue ? "{c}" : "";
const percentage = optionsSetup.percentage ? "({d})%" : "";
+ const formatterVaue
+ = optionsSetup.isShowTitle ?`{a|{b}：${numberValue} ${percentage}}`:`${numberValue} ${percentage}`;
const label = {
show: optionsSetup.isShow,
- formatter: `{a|{b}：${numberValue} ${percentage}}`,
+ formatter: formatterVaue,
rich: {
a: {
padding: [-30, 15, -20, 15],
@@ -169,11 +174,18 @@ export default {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
- legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
- legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
- legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
- legend.bottom =
- optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+ if(optionsSetup.longitudinalPosition == "center"){
+ legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
+ legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
+ legend.top = '10%';
+ legend.marginTop = '-150px';
+ }else{
+ legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
+ legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
+ legend.top = optionsSetup.longitudinalPosition == "top" ? 0 :"auto";
+ legend.bottom =
+ optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+ }
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
diff --git a/src/views/bigscreenDesigner/designer/widget/table/widgetRotateRanking.vue b/src/views/bigscreenDesigner/designer/widget/table/widgetRotateRanking.vue
new file mode 100644
index 0000000..55fe41d
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/table/widgetRotateRanking.vue
@@ -0,0 +1,1001 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue b/src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue
index 4d4fc07..67fed9a 100644
--- a/src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue
+++ b/src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue
@@ -7,6 +7,7 @@
v-for="(item, index) in header"
:style="[headerTableStlye, tableFiledWidth(index), tableRowHeight()]"
:key="index"
+ class="content"
>
{{ item.name }}
@@ -20,6 +21,7 @@
:style="tableRowHeight()"
>
- {{ item[itemChild.key] }}
@@ -246,6 +248,12 @@ export default {
.txtScroll-top .infoList li > div {
width: 100%;
}
+.content
+{
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
/*.txtScroll-top .infoList li:nth-child(n) {
background: rgb(0, 59, 81);
diff --git a/src/views/bigscreenDesigner/designer/widget/temp.vue b/src/views/bigscreenDesigner/designer/widget/temp.vue
index c993957..88461f9 100644
--- a/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -22,6 +22,7 @@ import WidgetFunnel from "./funnel/widgetFunnel.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./table/widgetTable.vue";
+import widgetRotateRanking from "./table/WidgetRotateRanking.vue";
import widgetLineMap from "./map/widgetLineMap.vue";
import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
@@ -35,7 +36,6 @@ import widgetWordCloud from "./wordcloud/widgetWordCloud";
import widgetHeatmap from "./heatmap/widgetHeatmap";
import widgetRadar from "./radar/widgetRadar";
import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
-import widgetDecorate from "./decorate/decorate.vue";
import widgetBorderBoxFloat from "./div/widgetBorderBoxFloat";
import widgetBorderBox from "./div/widgetBorderBox";
import widgetProgress from "./percent/widgetProgress";
@@ -52,8 +52,6 @@ import widgetSvg from "./div/widgetSvg";
export default {
name: "WidgetTemp",
components: {
- // widgetDiv,
- widgetDecorate,
widgetHref,
widgetText,
WidgetMarquee,
@@ -96,6 +94,7 @@ export default {
widgetBorderBoxFloat,
widgetDigitalFlopSingle,
widgetSvg,
+ widgetRotateRanking,
},
model: {
prop: "value",
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
index b4d5cf4..e6ffa75 100644
--- a/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
@@ -25,11 +25,16 @@ export default {
number:[],//数字数值
content:'数字{nt}',//number中的元素将被用于替换content内容模版中的{nt}标记，其替换顺序与模版标记的顺序一一对应：实际显示效果：'数字1,数字2,数字3,数字4'
toFixed: 0,//小数位数
- textAlign: 'center',//水平对齐方式 textAlign用于设置文字的水平对齐方式，可选值为'center'|'left'|'right'，该值将覆盖style属性中的textAlign属性。
rowGap: 0,//行间距 当使用\n进行换行的时候，rowGap可以控制行间距
+ textAlign: 'center',//水平对齐方式 textAlign用于设置文字的水平对齐方式，可选值为'center'|'left'|'right'，该值将覆盖style属性中的textAlign属性。
style: {
fontSize: 30,
- fill: '#3de7c9'
+ fill: '#3de7c9',
+ fontStyle: 'normal',
+ fontWeight: 'normal',
+ fontVarient: 'normal',
+ textAlign: 'center',//水平对齐方式 textAlign用于设置文字的水平对齐方式，可选值为'center'|'left'|'right'，该值将覆盖style属性中的textAlign属性。
+ fontFamily: '',
},//可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小
//formatter:this.formatterNum,//格式化数字 类型： Function,
animationCurve: 'easeOutCubic', //动效曲线
@@ -84,6 +89,14 @@ export default {
this.optionsSetup = this.value.setup;
this.editorOptions();
},
+ mounted:function()
+ {
+ this.$nextTick(function(){
+ //样式渲染
+ this.setFontStyle();
+ })
+ },
+
methods: {
// 修改图标options属性
editorOptions() {
@@ -93,7 +106,7 @@ export default {
//数据修改
this.setOptionsData();
- //字体样式
+ //字体样式修改
this.setFontStyle();
},
@@ -113,22 +126,27 @@ export default {
//字体修改
setFontStyle() {
const optionsSetup = this.optionsSetup;
- const fontStyle = {};
+ const fontStyle = this.options.style;
fontStyle.fill=optionsSetup.fill;
fontStyle.fontSize=optionsSetup.fontSize;
fontStyle.fontWeight=optionsSetup.fontWeight;
+ fontStyle.fontStyle=optionsSetup.fontStyle;
+ fontStyle.fontFamily=this.optionsSetup.fontFamily;
+ this.options.textAlign =optionsSetup.textAlign;
this.options.style = fontStyle;
+ this.options={...this.options};
},
//千为分隔符
formatterNum (number) {
- const numbers = number.toString().split('').reverse();
+ const numbersA=number.toString().split('.');
+ const numbersEnd=numbersA.length>1?numbersA[1]:"";
+ const numbers = numbersA[0].split('').reverse();
const segs = [];
while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
- return segs.join(',').split('').reverse().join('');
+ return segs.join(',').split('').reverse().join('')+(numbersA.length>1?"."+numbersEnd:"");
},
// 数据修改
setOptionsData() {
-
const optionsSetup = this.optionsSetup;
if(optionsSetup.isFormatterNum){
this.options.formatter=this.formatterNum;
@@ -138,12 +156,9 @@ export default {
this.options.isFormatterNum=optionsSetup.isFormatterNum;//千分位显示
this.options.content=optionsSetup.content;
this.options.toFixed=optionsSetup.toFixed;
- this.options.textAlign=optionsSetup.textAlign;
+ this.options.textAlign= this.options.style.textAlign;
this.options.animationFrame=optionsSetup.animationFrame;
- // const optionsDeep =this.deepClone(this.options);
- // console.log("返回数据options",optionsDeep);
- this.options={...this.options};
- // this.options=optionsDeep;
+ // this.options={...this.options};
},
}
};
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetStatus.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetStatus.vue
new file mode 100644
index 0000000..850355c
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetStatus.vue
@@ -0,0 +1,144 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetTime.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetTime.vue
index afe5085..3a1de47 100644
--- a/src/views/bigscreenDesigner/designer/widget/text/widgetTime.vue
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetTime.vue
@@ -30,6 +30,7 @@ export default {
background: this.transStyle.background,
"font-weight": this.transStyle.fontWeight,
"text-align": this.transStyle.textAlign,
+ 'font-family': this.transStyle.fontFamily,
display:
this.transStyle.hideLayer == undefined
? "block"
diff --git a/src/views/bigscreenDesigner/designer/widget/widget.vue b/src/views/bigscreenDesigner/designer/widget/widget.vue
index 9008519..c328a9f 100644
--- a/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -31,6 +31,7 @@ import WidgetFunnel from "./funnel/widgetFunnel.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./table/widgetTable.vue";
+import widgetRotateRanking from "./table/WidgetRotateRanking.vue";
import widgetLineMap from "./map/widgetLineMap.vue";
import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
@@ -44,7 +45,6 @@ import widgetWordCloud from "./wordcloud/widgetWordCloud";
import widgetHeatmap from "./heatmap/widgetHeatmap";
import widgetRadar from "./radar/widgetRadar";
import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
-import widgetDecorate from "./decorate/decorate.vue";
import widgetImage from "./div/widgetImage.vue";
import widgetSlider from "./div/widgetSlider.vue";
import widgetBorderBox from "./div/widgetBorderBox.vue";
@@ -62,7 +62,6 @@ import widgetSvg from "./div/widgetSvg";
export default {
name: "Widget",
components: {
- widgetDecorate,
widgetDecoration,
widgetCapsuleChart,
// widgetDiv,
@@ -106,6 +105,7 @@ export default {
widgetBorderBoxFloat,
widgetDigitalFlopSingle,
widgetSvg,
+ widgetRotateRanking
},
model: {
prop: "value",
diff --git a/src/views/datasource/index.vue b/src/views/datasource/index.vue
index 85cdb12..e8e64d3 100644
--- a/src/views/datasource/index.vue
+++ b/src/views/datasource/index.vue
@@ -1,6 +1,6 @@