qiangmj / report-ui

Commit ee5dc225d9a7fc073baccbea93314f3dad325e82

Authored by qianbao
1 parent ccd620a7

1、添加胶状柱行图 

2、动态文本添加取全局数据源
3、添加装饰图
Inline Side-by-side
Showing 14 changed files with 692 additions and 16 deletions
src/mixins/common.js
  View file @ee5dc22
@@ -58,6 +58,30 @@ export default { @@ -58,6 +58,30 @@ export default {
58 } 58 }
59 return false 59 return false
60 }, 60 },
  61 + isBlankObj (val) {
  62 + if (typeof val === 'undefined') {
  63 + return true
  64 + }
  65 + if (val == null || val === '' || val =={} || val.length==0) {
  66 + return true
  67 + }
  68 + return false
  69 + },
  70 + isNotBlankObj (val) {
  71 + return !this.isBlankObj(val);
  72 + },
  73 + isBlankArray (val) {
  74 + if (typeof val === 'undefined') {
  75 + return true
  76 + }
  77 + if (val == null || val === '' || val ==[] || val.length==0) {
  78 + return true
  79 + }
  80 + return false
  81 + },
  82 + isNotBlankArray (val) {
  83 + return !this.isBlankArray(val);
  84 + },
61 // 封装定制删除数组中的值 85 // 封装定制删除数组中的值
62 contains (a, obj) { 86 contains (a, obj) {
63 let i = a.length 87 let i = a.length
@@ -272,7 +296,7 @@ export default { @@ -272,7 +296,7 @@ export default {
272 return { top: top, left: left } 296 return { top: top, left: left }
273 }, 297 },
274 objToOne (obj) { 298 objToOne (obj) {
275 - console.log(obj) 299 + // console.log(obj)
276 let tmpData = {} 300 let tmpData = {}
277 for (let index in obj) { 301 for (let index in obj) {
278 if (typeof obj[index] == 'object' && !this.isArrayFn(obj[index])) { 302 if (typeof obj[index] == 'object' && !this.isArrayFn(obj[index])) {
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js 0 → 100644
  View file @ee5dc22
  1 +/*
  2 + * @Descripttion: DIV图层次
  3 + */
  4 +export const widgetCapsuleChart = {
  5 + code: 'widget-capsule-chart',
  6 + type: 'barChart',
  7 + tabName: '柱状图',
  8 + label: '胶囊柱图',
  9 + icon: 'iconzhuxiantu',
  10 + options: {
  11 + // 配置
  12 + setup: [
  13 + {
  14 + type: 'el-input-text',
  15 + label: '图层名称',
  16 + name: 'layerName',
  17 + required: false,
  18 + placeholder: '',
  19 + value: '胶囊柱图',
  20 + },
  21 + {
  22 + type: 'el-input-text',
  23 + label: '单位',
  24 + name: 'unit',
  25 + required: false,
  26 + placeholder: '',
  27 + value: '个',
  28 + },
  29 + {
  30 + type: 'el-switch',
  31 + label: '显示数值',
  32 + name: 'showValue',
  33 + required: false,
  34 + placeholder: '',
  35 + value: true,
  36 + },
  37 + {
  38 + type: 'vue-color',
  39 + label: '背景颜色',
  40 + name: 'background',
  41 + required: false,
  42 + placeholder: '',
  43 + value: ''
  44 + },
  45 + [{
  46 + name: '自定义配色',
  47 + list: [
  48 + {
  49 + type: 'customColor',
  50 + label: '',
  51 + name: 'customColor',
  52 + required: false,
  53 + //'#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'
  54 + value: [{ color: '#e062ae' }, { color: '#fb7293' }, { color: '#e690d1' }, { color: '#32c5e9' }, { color: '#96bfff' }],
  55 + },
  56 + ],
  57 + }],
  58 + ],
  59 +
  60 + // 数据
  61 + data: [
  62 + {
  63 + type: 'el-radio-group',
  64 + label: '数据类型',
  65 + name: 'dataType',
  66 + require: false,
  67 + placeholder: '',
  68 + selectValue: true,
  69 + selectOptions: [
  70 + {
  71 + code: 'staticData',
  72 + name: '静态数据',
  73 + },
  74 + {
  75 + code: 'dynamicData',
  76 + name: '动态数据',
  77 + },
  78 + ],
  79 + value: 'staticData',
  80 + },
  81 + {
  82 + type: 'el-input-number',
  83 + label: '刷新时间(毫秒)',
  84 + name: 'refreshTime',
  85 + relactiveDom: 'dataType',
  86 + relactiveDomValue: 'dynamicData',
  87 + value: 5000
  88 + },
  89 + {
  90 + type: 'el-button',
  91 + label: '静态数据',
  92 + name: 'staticData',
  93 + required: false,
  94 + placeholder: '',
  95 + relactiveDom: 'dataType',
  96 + relactiveDomValue: 'staticData',
  97 + value: [{ value: 1048, name: "搜索引擎" }, { value: 735, name: "直接访问" }, { value: 580, name: "邮件营销" }, { value: 484, name: "联盟广告" }, { value: 300, name: "视频广告" }]
  98 + },
  99 + {
  100 + type: 'dycustComponents',
  101 + label: '',
  102 + name: 'dynamicData',
  103 + required: false,
  104 + placeholder: '',
  105 + relactiveDom: 'dataType',
  106 + relactiveDomValue: 'dynamicData',
  107 + chartType: 'widget-capsule-chart',
  108 + dictKey: 'STACK_PROPERTIES',
  109 + value: '',
  110 + },
  111 + ],
  112 + // 坐标
  113 + position: [
  114 + {
  115 + type: 'el-input-number',
  116 + label: '左边距',
  117 + name: 'left',
  118 + required: false,
  119 + placeholder: '',
  120 + value: 50,
  121 + },
  122 + {
  123 + type: 'el-input-number',
  124 + label: '上边距',
  125 + name: 'top',
  126 + required: false,
  127 + placeholder: '',
  128 + value: 50,
  129 + },
  130 + {
  131 + type: 'el-input-number',
  132 + label: '宽度',
  133 + name: 'width',
  134 + required: false,
  135 + placeholder: '该容器在1920px大屏中的宽度',
  136 + value: 800,
  137 + },
  138 + {
  139 + type: 'el-input-number',
  140 + label: '高度',
  141 + name: 'height',
  142 + required: false,
  143 + placeholder: '该容器在1080px大屏中的高度',
  144 + value: 600,
  145 + },
  146 + ],
  147 + }
  148 +}
src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
  View file @ee5dc22
@@ -108,7 +108,7 @@ export const widgetBorderBox = { @@ -108,7 +108,7 @@ export const widgetBorderBox = {
108 name: 'left', 108 name: 'left',
109 required: false, 109 required: false,
110 placeholder: '', 110 placeholder: '',
111 - value: 0, 111 + value: 10,
112 }, 112 },
113 { 113 {
114 type: 'el-input-number', 114 type: 'el-input-number',
@@ -116,7 +116,7 @@ export const widgetBorderBox = { @@ -116,7 +116,7 @@ export const widgetBorderBox = {
116 name: 'top', 116 name: 'top',
117 required: false, 117 required: false,
118 placeholder: '', 118 placeholder: '',
119 - value: 0, 119 + value: 10,
120 }, 120 },
121 { 121 {
122 type: 'el-input-number', 122 type: 'el-input-number',
@@ -124,7 +124,7 @@ export const widgetBorderBox = { @@ -124,7 +124,7 @@ export const widgetBorderBox = {
124 name: 'width', 124 name: 'width',
125 required: false, 125 required: false,
126 placeholder: '该容器在1920px大屏中的宽度', 126 placeholder: '该容器在1920px大屏中的宽度',
127 - value: 1000, 127 + value: 500,
128 }, 128 },
129 { 129 {
130 type: 'el-input-number', 130 type: 'el-input-number',
@@ -132,7 +132,7 @@ export const widgetBorderBox = { @@ -132,7 +132,7 @@ export const widgetBorderBox = {
132 name: 'height', 132 name: 'height',
133 required: false, 133 required: false,
134 placeholder: '该容器在1080px大屏中的高度', 134 placeholder: '该容器在1080px大屏中的高度',
135 - value: 600, 135 + value: 350,
136 }, 136 },
137 ], 137 ],
138 } 138 }
src/views/bigscreenDesigner/designer/tools/configure/div/widget-decoration.js 0 → 100644
  View file @ee5dc22
  1 +/*
  2 + * @Descripttion: DIV图层次
  3 + */
  4 +export const widgetDecoration = {
  5 + code: 'widget-decoration',
  6 + type: 'html',
  7 + tabName: '图层',
  8 + label: '装饰',
  9 + icon: 'icontupian1',
  10 + options: {
  11 + // 配置
  12 + setup: [
  13 + {
  14 + type: 'el-input-text',
  15 + label: '图层名称',
  16 + name: 'layerName',
  17 + required: false,
  18 + placeholder: '',
  19 + value: '装饰',
  20 + },
  21 + {
  22 + type: 'el-select',
  23 + label: '装饰类型',
  24 + name: 'divType',
  25 + required: false,
  26 + placeholder: '',
  27 + onChange:"handleChange",
  28 + selectOptions: [
  29 + {code: 'dvDecoration1', name: '边框1'},
  30 + {code: 'dvDecoration2', name: '边框2'},
  31 + {code: 'dvDecoration3', name: '边框3'},
  32 + {code: 'dvDecoration4', name: '边框4'},
  33 + {code: 'dvDecoration5', name: '边框5'},
  34 + {code: 'dvDecoration6', name: '边框6'},
  35 + {code: 'dvDecoration7', name: '边框7'},
  36 + {code: 'dvDecoration8', name: '边框8'},
  37 + {code: 'dvDecoration9', name: '边框9'},
  38 + {code: 'dvDecoration10', name: '边框10'},
  39 + {code: 'dvDecoration11', name: '边框11'},
  40 + {code: 'dvDecoration12', name: '边框12'},
  41 + ],
  42 + value: 'dvDecoration1'
  43 + },
  44 + {
  45 + type: 'vue-color',
  46 + label: '颜色(主)',
  47 + name: 'colorOne',
  48 + required: false,
  49 + placeholder: '',
  50 + value: '',
  51 + },
  52 + {
  53 + type: 'vue-color',
  54 + label: '颜色(次)',
  55 + name: 'colorTwo',
  56 + required: false,
  57 + placeholder: '',
  58 + value: '',
  59 + },
  60 + {
  61 + type: 'el-input-number',
  62 + label: '单次动画(秒)',
  63 + name: 'dur',
  64 + required: false,
  65 + placeholder: '',
  66 + value: 3,
  67 + },
  68 + {
  69 + type: 'el-switch',
  70 + label: '反向',
  71 + name: 'reverse',
  72 + require: false,
  73 + placeholder: '',
  74 + value: false,
  75 + },
  76 + {
  77 + type: 'el-input-text',
  78 + label: '内容',
  79 + name: 'title',
  80 + require: false,
  81 + placeholder: '',
  82 + value: '',
  83 + },
  84 + {
  85 + type: 'el-input-number',
  86 + label: '扫描动画(秒)',
  87 + name: 'scanDur',
  88 + required: false,
  89 + placeholder: '',
  90 + value: 3,
  91 + },
  92 + {
  93 + type: 'el-input-number',
  94 + label: '光晕动画(秒)',
  95 + name: 'haloDur',
  96 + required: false,
  97 + placeholder: '',
  98 + value: 2,
  99 + },
  100 + ],
  101 + // 数据
  102 + data: [],
  103 + // 坐标
  104 + position: [
  105 + {
  106 + type: 'el-input-number',
  107 + label: '左边距',
  108 + name: 'left',
  109 + required: false,
  110 + placeholder: '',
  111 + value: 20,
  112 + },
  113 + {
  114 + type: 'el-input-number',
  115 + label: '上边距',
  116 + name: 'top',
  117 + required: false,
  118 + placeholder: '',
  119 + value: 20,
  120 + },
  121 + {
  122 + type: 'el-input-number',
  123 + label: '宽度',
  124 + name: 'width',
  125 + required: false,
  126 + placeholder: '该容器在1920px大屏中的宽度',
  127 + value: 300,
  128 + },
  129 + {
  130 + type: 'el-input-number',
  131 + label: '高度',
  132 + name: 'height',
  133 + required: false,
  134 + placeholder: '该容器在1080px大屏中的高度',
  135 + value: 40,
  136 + },
  137 + ],
  138 + }
  139 +}
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-marquee.js
  View file @ee5dc22
@@ -32,6 +32,15 @@ export const widgetMarquee = { @@ -32,6 +32,15 @@ export const widgetMarquee = {
32 value: '滚动文本', 32 value: '滚动文本',
33 }, 33 },
34 { 34 {
  35 + type: 'el-select-static',
  36 + label: '主数据源数据',
  37 + name: 'slectedDataType',
  38 + require: false,
  39 + placeholder: '',
  40 + selectOptions: [],
  41 + value: '',
  42 + },
  43 + {
35 type: 'el-input-number', 44 type: 'el-input-number',
36 label: '字体字号', 45 label: '字体字号',
37 name: 'fontSize', 46 name: 'fontSize',
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js
  View file @ee5dc22
@@ -33,7 +33,7 @@ export const widgetText = { @@ -33,7 +33,7 @@ export const widgetText = {
33 }, 33 },
34 { 34 {
35 type: 'el-select-static', 35 type: 'el-select-static',
36 - label: '全局静态数据选择', 36 + label: '主数据源数据',
37 name: 'slectedDataType', 37 name: 'slectedDataType',
38 require: false, 38 require: false,
39 placeholder: '', 39 placeholder: '',
src/views/bigscreenDesigner/designer/tools/main.js
  View file @ee5dc22
@@ -8,6 +8,8 @@ @@ -8,6 +8,8 @@
8 */ 8 */
9 // import { widgetDiv } from "./configure/div/widget-div" 9 // import { widgetDiv } from "./configure/div/widget-div"
10 import { widgetBorderBox } from "./configure/div/widget-border-box"; 10 import { widgetBorderBox } from "./configure/div/widget-border-box";
  11 +import { widgetDecoration } from "./configure/div/widget-decoration";
  12 +import { widgetCapsuleChart} from "./configure/barCharts/widget-capsule-chart";
11 import { widgetImage } from "./configure/div/widget-image" 13 import { widgetImage } from "./configure/div/widget-image"
12 import { widgetSliders } from "./configure/div/widget-slider" 14 import { widgetSliders } from "./configure/div/widget-slider"
13 import { widgetText } from "./configure/texts/widget-text" 15 import { widgetText } from "./configure/texts/widget-text"
@@ -45,6 +47,8 @@ import { widgetProgress } from "./configure/percentCharts/widget-progress"; @@ -45,6 +47,8 @@ import { widgetProgress } from "./configure/percentCharts/widget-progress";
45 export const widgetTool = [ 47 export const widgetTool = [
46 //图层 48 //图层
47 widgetBorderBox, 49 widgetBorderBox,
  50 + widgetDecoration,
  51 + widgetCapsuleChart,
48 // widgetDiv, 52 // widgetDiv,
49 widgetImage, 53 widgetImage,
50 widgetSliders, 54 widgetSliders,
src/views/bigscreenDesigner/designer/widget/bar/widgetCapsuleChart.vue 0 → 100644
  View file @ee5dc22
  1 +<!--
  2 + 胶囊柱图
  3 +-->
  4 +<template>
  5 + <dv-capsule-chart :config="options" :style="styleObj"/>
  6 +</template>
  7 +<script>
  8 +import capsuleChart from "@jiaminghi/data-view/lib/components/capsuleChart";
  9 +import Vue from "vue";
  10 +Vue.use(capsuleChart)
  11 +export default {
  12 + name: "WidgetCapsuleChart",
  13 + props: {
  14 + value: Object,
  15 + ispreview: Boolean,
  16 + },
  17 + data() {
  18 + return {
  19 + //返回图标数据
  20 + options: {
  21 + colors: [],//颜色
  22 + data:[],//数据
  23 + unit: '',//单位
  24 + showValue: true//显示数值
  25 + },
  26 + optionsStyle: {}, // 样式
  27 + optionsData: {}, // 数据
  28 + optionsCollapse: {}, // 图标属性
  29 + optionsSetup: {}
  30 + };
  31 + },
  32 + computed: {
  33 + styleObj() {
  34 + return {
  35 + position: this.ispreview ? "absolute" : "static",
  36 + width: this.optionsStyle.width + "px",
  37 + height: this.optionsStyle.height + "px",
  38 + left: this.optionsStyle.left + "px",
  39 + top: this.optionsStyle.top + "px",
  40 + background: this.optionsSetup.background
  41 + };
  42 + }
  43 + },
  44 + watch: {
  45 + value: {
  46 + handler(val) {
  47 + this.optionsStyle = val.position;
  48 + this.optionsData = val.data;
  49 + this.optionsCollapse = val.collapse;
  50 + this.optionsSetup = val.setup;
  51 + this.editorOptions();
  52 + },
  53 + deep: true
  54 + }
  55 + },
  56 + created() {
  57 + this.optionsStyle = this.value.position;
  58 + this.optionsData = this.value.data;
  59 + this.optionsCollapse = this.value.collapse;
  60 + this.optionsSetup = this.value.setup;
  61 + this.editorOptions();
  62 + },
  63 + methods: {
  64 + // 修改图标options属性
  65 + editorOptions() {
  66 + //颜色值修改
  67 + this.setOptionsColor();
  68 + //数据修改
  69 + this.setOptionsData();
  70 + },
  71 + // 颜色修改
  72 + setOptionsColor() {
  73 + const optionsSetup = this.optionsSetup;
  74 + const customColor = optionsSetup.customColor;
  75 + if (!customColor) return;
  76 + const arrColor = [];
  77 + for (let i = 0; i < customColor.length; i++) {
  78 + arrColor.push(customColor[i].color);
  79 + }
  80 + this.options.colors = arrColor;
  81 + this.options = Object.assign({}, this.options);
  82 + this.options.unit =optionsSetup.unit;
  83 + this.options.showValue =optionsSetup.showValue;
  84 + },
  85 + setOptionsData() {
  86 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  87 + optionsData.dataType == "staticData"
  88 + ? this.staticDataFn(optionsData.staticData)
  89 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  90 + },
  91 + staticDataFn(val) {
  92 + // console.log("设置静态数据",this.options)
  93 + const staticData = typeof val == "string" ? JSON.parse(val) : val;
  94 + this.options.data=staticData;
  95 + },
  96 + dynamicDataFn(val, refreshTime) {
  97 + if (!val) return;
  98 + if (this.ispreview) {
  99 + this.getEchartData(val);
  100 + this.flagInter = setInterval(() => {
  101 + this.getEchartData(val);
  102 + }, refreshTime);
  103 + } else {
  104 + this.getEchartData(val);
  105 + }
  106 + },
  107 + getEchartData(val) {
  108 + const data = this.queryEchartsData(val);
  109 + data.then(res => {
  110 + this.renderingFn(res);
  111 + });
  112 + },
  113 + renderingFn(val) {
  114 + this.options.data=val;
  115 + }
  116 + }
  117 +};
  118 +
  119 +</script>
  120 +<style scoped lang="scss">
  121 +.echarts {
  122 + width: 100%;
  123 + height: 100%;
  124 + overflow: hidden;
  125 +}
  126 +</style>
src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
  View file @ee5dc22
@@ -114,7 +114,6 @@ export default { @@ -114,7 +114,6 @@ export default {
114 handler(val) { 114 handler(val) {
115 this.options = val; 115 this.options = val;
116 this.optionsData = val.data; 116 this.optionsData = val.data;
117 - this.setOptionsData();  
118 }, 117 },
119 deep: true, 118 deep: true,
120 }, 119 },
src/views/bigscreenDesigner/designer/widget/div/widgetDecoration.vue 0 → 100644
  View file @ee5dc22
  1 +<!--
  2 + 装饰图
  3 +-->
  4 +<template>
  5 + <dv-decoration-12 :style="styleColor"
  6 + :color="transStyle.color"
  7 + :dur="transStyle.dur"
  8 + :reverse="transStyle.reverse"
  9 + :scanDur="transStyle.scanDur"
  10 + :haloDur="transStyle.haloDur"
  11 + v-if="styleColor.divClass === 'dvDecoration12'" ></dv-decoration-12>
  12 + <dv-decoration-2 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  13 + v-else-if="styleColor.divClass === 'dvDecoration2'">{{transStyle.title}}</dv-decoration-2>
  14 + <dv-decoration-3 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  15 + v-else-if="styleColor.divClass === 'dvDecoration3'">{{transStyle.title}}</dv-decoration-3>
  16 + <dv-decoration-4 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  17 + v-else-if="styleColor.divClass === 'dvDecoration4'">{{transStyle.title}}</dv-decoration-4>
  18 + <dv-decoration-5 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  19 + v-else-if="styleColor.divClass === 'dvDecoration5'">{{transStyle.title}}</dv-decoration-5>
  20 + <dv-decoration-6 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  21 + v-else-if="styleColor.divClass === 'dvDecoration6'">{{transStyle.title}}</dv-decoration-6>
  22 + <dv-decoration-7 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  23 + v-else-if="styleColor.divClass === 'dvDecoration7'">{{transStyle.title}}</dv-decoration-7>
  24 + <dv-decoration-8 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  25 + v-else-if="styleColor.divClass === 'dvDecoration8'" >{{transStyle.title}}</dv-decoration-8>
  26 + <dv-decoration-9 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  27 + v-else-if="styleColor.divClass === 'dvDecoration9'">{{transStyle.title}}<p v-if="transStyle.title!=null && transStyle.title!=''">%</p> </dv-decoration-9>
  28 + <dv-decoration-10 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  29 + v-else-if="styleColor.divClass === 'dvDecoration10'">{{transStyle.title}}</dv-decoration-10>
  30 + <dv-decoration-11 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  31 + v-else-if="transStyle.divClass === 'dvDecoration11'">{{transStyle.title}}</dv-decoration-11>
  32 + <dv-decoration-1 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur" :reverse="transStyle.reverse"
  33 + v-else="styleColor.divClass === 'dvDecoration1'"> {{transStyle.title}}</dv-decoration-1>
  34 +</template>
  35 +<script>
  36 +import decoration1 from "@jiaminghi/data-view/lib/components/decoration1";
  37 +import decoration2 from "@jiaminghi/data-view/lib/components/decoration2";
  38 +import decoration3 from "@jiaminghi/data-view/lib/components/decoration3";
  39 +import decoration4 from "@jiaminghi/data-view/lib/components/decoration4";
  40 +import decoration5 from "@jiaminghi/data-view/lib/components/decoration5";
  41 +import decoration6 from "@jiaminghi/data-view/lib/components/decoration6";
  42 +import decoration7 from "@jiaminghi/data-view/lib/components/decoration7";
  43 +import decoration8 from "@jiaminghi/data-view/lib/components/decoration8";
  44 +import decoration9 from "@jiaminghi/data-view/lib/components/decoration9";
  45 +import decoration10 from "@jiaminghi/data-view/lib/components/decoration10";
  46 +import decoration11 from "@jiaminghi/data-view/lib/components/decoration11";
  47 +import decoration12 from "@jiaminghi/data-view/lib/components/decoration12";
  48 +Vue.use(decoration1)
  49 +Vue.use(decoration2)
  50 +Vue.use(decoration3)
  51 +Vue.use(decoration4)
  52 +Vue.use(decoration5)
  53 +Vue.use(decoration6)
  54 +Vue.use(decoration7)
  55 +Vue.use(decoration8)
  56 +Vue.use(decoration9)
  57 +Vue.use(decoration10)
  58 +Vue.use(decoration11)
  59 +Vue.use(decoration12)
  60 +export default {
  61 + name: "WidgetDecoration",
  62 + components: {
  63 + },
  64 + props: {
  65 + value: Object,
  66 + ispreview: Boolean,
  67 + },
  68 + data() {
  69 + return {
  70 + options: {},
  71 + optionsData: {},
  72 + oldDecoration1Value:"",
  73 + decorationHwMap:{
  74 + dvDecoration1:{
  75 + width:250,
  76 + height:50,
  77 + },
  78 + dvDecoration2:{
  79 + width:200,
  80 + height:50,
  81 + },
  82 + dvDecoration2f:{
  83 + width:50,
  84 + height:200,
  85 + },
  86 + dvDecoration3:{
  87 + width:250,
  88 + height:30,
  89 + },
  90 + dvDecoration4:{
  91 + width:50,
  92 + height:150,
  93 + },
  94 + dvDecoration4f:{
  95 + width:250,
  96 + height:50,
  97 + },
  98 + dvDecoration5:{
  99 + width:400,
  100 + height:50,
  101 + },
  102 + dvDecoration6:{
  103 + width:300,
  104 + height:30,
  105 + },
  106 + dvDecoration7:{
  107 + width:150,
  108 + height:30,
  109 + },
  110 + dvDecoration8:{
  111 + width:300,
  112 + height:50,
  113 + },
  114 + dvDecoration9:{
  115 + width:300,
  116 + height:300,
  117 + },
  118 + dvDecoration10:{
  119 + width:300,
  120 + height:70,
  121 + },
  122 + dvDecoration11:{
  123 + width:200,
  124 + height:60,
  125 + },
  126 + dvDecoration12:{
  127 + width:300,
  128 + height:300,
  129 + },
  130 + }
  131 + };
  132 + },
  133 + computed: {
  134 + transStyle() {
  135 + let transStyleObj = this.objToOne(this.options);
  136 + let color = [];
  137 + if(!this.isBlankObj(transStyleObj)){
  138 + const colorOne = transStyleObj.colorOne;
  139 + if(!this.isBlankObj(colorOne)){
  140 + color.push(colorOne);
  141 + }
  142 + const colorTwo = transStyleObj.colorTwo;
  143 + if(!this.isBlankObj(colorTwo)){
  144 + color.push(colorTwo);
  145 + }
  146 + transStyleObj.color = color;
  147 + }
  148 + return transStyleObj;
  149 + },
  150 + styleColor() {
  151 + const divTypeValue = this.isBlank(this.transStyle.divType)?"dv-decoration-1":this.transStyle.divType;
  152 + return {
  153 + position: this.ispreview ? "absolute" : "static",
  154 + divClass: divTypeValue,
  155 + width: this.transStyle.width + "px",
  156 + height: this.transStyle.height + "px",
  157 + left: this.transStyle.left + "px",
  158 + top: this.transStyle.top + "px",
  159 + right: this.transStyle.right + "px",
  160 + };
  161 + },
  162 + },
  163 + watch: {
  164 + value: {
  165 + handler(val) {
  166 + this.options = val;
  167 + this.optionsData = val.data;
  168 + },
  169 + deep: true,
  170 + },
  171 + 'value.setup.divType':{
  172 + handler(val) {
  173 + this.setDivType(val);
  174 + },
  175 + //immediate:true,首次绑定时候是否执行
  176 + deep: true,
  177 + }
  178 + },
  179 + mounted() {
  180 + this.options = this.value;
  181 + },
  182 + methods: {
  183 + // 修改options属性
  184 + // editorOptions(val) {
  185 + // this.setDivType(val);
  186 + // },
  187 + setDivType(dvDecoration){
  188 + if(this.isNotBlank(dvDecoration) && this.oldDecoration1Value!==dvDecoration){
  189 + let decorationHwMap = this.decorationHwMap;
  190 + console.log(this.transStyle.reverse,dvDecoration+"f",decorationHwMap[dvDecoration+"f"]);
  191 + // console.log(this.options.position);
  192 + if(this.transStyle.reverse && this.isNotBlankObj(decorationHwMap[dvDecoration+"f"])){
  193 + // console.log(decorationHwMap[dvDecoration+"f"]);
  194 + this.options.position.height = decorationHwMap[dvDecoration+"f"].height;
  195 + this.options.position.width = decorationHwMap[dvDecoration+"f"].width;
  196 + }else{
  197 + this.options.position.height=decorationHwMap[dvDecoration].height;
  198 + this.options.position.width=decorationHwMap[dvDecoration].width;
  199 + }
  200 + this.oldDecoration1Value = dvDecoration;
  201 + }
  202 + }
  203 + },
  204 +};
  205 +</script>
  206 +
  207 +<style scoped lang="scss">
  208 +.div {
  209 + width: 100%;
  210 + height: 100%;
  211 + border: 2em;
  212 + border-color: aqua;
  213 + overflow: hidden;
  214 +}
  215 +.div_Style {
  216 + width: 100%;
  217 + height: 100%;
  218 + position: relative;
  219 +}
  220 +</style>
src/views/bigscreenDesigner/designer/widget/temp.vue
  View file @ee5dc22
@@ -45,6 +45,8 @@ import widgetDecorate from &quot;./decorate/decorate.vue&quot;; @@ -45,6 +45,8 @@ import widgetDecorate from &quot;./decorate/decorate.vue&quot;;
45 // import widgetDiv from "./div/widgetDiv.vue"; 45 // import widgetDiv from "./div/widgetDiv.vue";
46 import widgetBorderBox from "./div/widgetBorderBox.vue"; 46 import widgetBorderBox from "./div/widgetBorderBox.vue";
47 import widgetProgress from "./percent/widgetProgress"; 47 import widgetProgress from "./percent/widgetProgress";
  48 +import widgetDecoration from "./div/widgetDecoration.vue";
  49 +import widgetCapsuleCart from "./bar/widgetCapsuleChart.vue";
48 50
49 export default { 51 export default {
50 name: "WidgetTemp", 52 name: "WidgetTemp",
@@ -82,6 +84,8 @@ export default { @@ -82,6 +84,8 @@ export default {
82 widgetRadar, 84 widgetRadar,
83 widgetBarLineStackChart, 85 widgetBarLineStackChart,
84 widgetBorderBox, 86 widgetBorderBox,
  87 + widgetDecoration,
  88 + widgetCapsuleCart,
85 widgetProgress 89 widgetProgress
86 }, 90 },
87 model: { 91 model: {
src/views/bigscreenDesigner/designer/widget/text/widgetMarquee.vue
  View file @ee5dc22
1 <template> 1 <template>
2 <div class="text" :style="styleColor"> 2 <div class="text" :style="styleColor">
3 <marquee behavior="" :direction="styleColor.direction">{{ 3 <marquee behavior="" :direction="styleColor.direction">{{
4 - styleColor.text 4 + showText
5 }}</marquee> 5 }}</marquee>
6 </div> 6 </div>
7 </template> 7 </template>
8 8
9 <script> 9 <script>
  10 +import {mapState} from "vuex";
  11 +
10 export default { 12 export default {
11 name: "WidgetMarquee", 13 name: "WidgetMarquee",
12 components: {}, 14 components: {},
@@ -20,6 +22,7 @@ export default { @@ -20,6 +22,7 @@ export default {
20 }; 22 };
21 }, 23 },
22 computed: { 24 computed: {
  25 + ...mapState('dataSource', ['staticData']),
23 transStyle() { 26 transStyle() {
24 return this.objToOne(this.options); 27 return this.objToOne(this.options);
25 }, 28 },
@@ -44,6 +47,10 @@ export default { @@ -44,6 +47,10 @@ export default {
44 }, 47 },
45 isBehavior() { 48 isBehavior() {
46 return this.styleColor.marqueeSet ? "start()" : "stop()"; 49 return this.styleColor.marqueeSet ? "start()" : "stop()";
  50 + },
  51 + showText() {
  52 + const {text, slectedDataType} = this.transStyle;
  53 + return this.staticData[slectedDataType] || text;
47 } 54 }
48 }, 55 },
49 watch: { 56 watch: {
src/views/bigscreenDesigner/designer/widget/text/widgetText.vue
  View file @ee5dc22
@@ -65,14 +65,6 @@ export default { @@ -65,14 +65,6 @@ export default {
65 const optionsData = this.optionsData; // 数据类型 静态 or 动态 65 const optionsData = this.optionsData; // 数据类型 静态 or 动态
66 if (optionsData.dataType == "dynamicData") { 66 if (optionsData.dataType == "dynamicData") {
67 this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); 67 this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
68 - } else {  
69 - console.log("静态数据",this,this.master,this.masterData);  
70 - //父数据不为空，  
71 - // if(this.isBlankObject(this.masterData)){  
72 - //  
73 - //  
74 - // }  
75 -  
76 }; 68 };
77 }, 69 },
78 dynamicDataFn(val, refreshTime) { 70 dynamicDataFn(val, refreshTime) {
src/views/bigscreenDesigner/designer/widget/widget.vue
  View file @ee5dc22
@@ -49,12 +49,16 @@ import widgetDecorate from &quot;./decorate/decorate.vue&quot;; @@ -49,12 +49,16 @@ import widgetDecorate from &quot;./decorate/decorate.vue&quot;;
49 import widgetImage from "./div/widgetImage.vue"; 49 import widgetImage from "./div/widgetImage.vue";
50 import widgetSlider from "./div/widgetSlider.vue"; 50 import widgetSlider from "./div/widgetSlider.vue";
51 import widgetBorderBox from "./div/widgetBorderBox.vue"; 51 import widgetBorderBox from "./div/widgetBorderBox.vue";
  52 +import widgetDecoration from "./div/widgetDecoration.vue";
  53 +import widgetCapsuleChart from "./bar/widgetCapsuleChart";
52 import widgetProgress from "./percent/widgetProgress"; 54 import widgetProgress from "./percent/widgetProgress";
53 55
54 export default { 56 export default {
55 name: "Widget", 57 name: "Widget",
56 components: { 58 components: {
57 widgetDecorate, 59 widgetDecorate,
  60 + widgetDecoration,
  61 + widgetCapsuleChart,
58 // widgetDiv, 62 // widgetDiv,
59 widgetBorderBox, 63 widgetBorderBox,
60 widgetHref, 64 widgetHref,