qiangmj / report-ui

Commit b010148a760cee4e06c5457025a5104702c44d89

Authored by qianbao
1 parent dfda9e28

新增DataV 框架边框

Inline Side-by-side
Showing 8 changed files with 292 additions and 9 deletions
package.json
  View file @b010148
... ... @@ -13,6 +13,7 @@
13 13 },
14 14 "dependencies": {
15 15 "@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0",
  16 + "@jiaminghi/data-view": "^2.10.0",
16 17 "@smallwei/avue": "^2.8.23",
17 18 "axios": "0.18.0",
18 19 "chokidar": "^3.5.2",
... ...
src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js 0 → 100644
  View file @b010148
  1 +/*
  2 + * @Descripttion: DIV图层次
  3 + */
  4 +export const widgetBorderBox = {
  5 + code: 'widget-border-box',
  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 + selectOptions: [
  28 + {code: 'dv-border-Box-1', name: '边框1'},
  29 + {code: 'dv-border-Box-2', name: '边框2'},
  30 + {code: 'dv-border-Box-3', name: '边框3'},
  31 + {code: 'dv-border-Box-4', name: '边框4'},
  32 + {code: 'dv-border-Box-5', name: '边框5'},
  33 + {code: 'dv-border-Box-6', name: '边框6'},
  34 + {code: 'dv-border-Box-7', name: '边框7'},
  35 + {code: 'dv-border-Box-8', name: '边框8'},
  36 + {code: 'dv-border-Box-9', name: '边框9'},
  37 + {code: 'dv-border-Box-10', name: '边框10'},
  38 + {code: 'dv-border-Box-11', name: '边框11'},
  39 + {code: 'dv-border-Box-12', name: '边框12'},
  40 + {code: 'dv-border-Box-13', name: '边框13'},
  41 + ],
  42 + value: 'dv-border-Box-1'
  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: 'vue-color',
  62 + label: '背景色',
  63 + name: 'backgroundColor',
  64 + required: false,
  65 + placeholder: '',
  66 + value: 'rgba(255, 0, 0, 0)',
  67 + },
  68 + {
  69 + type: 'el-input-number',
  70 + label: '单次动画时间长',
  71 + name: 'dur',
  72 + required: false,
  73 + placeholder: '',
  74 + value: 3,
  75 + },
  76 + {
  77 + type: 'el-switch',
  78 + label: '反向',
  79 + name: 'reverse',
  80 + require: false,
  81 + placeholder: '',
  82 + value: false,
  83 + },
  84 + {
  85 + type: 'el-input-text',
  86 + label: '标题',
  87 + name: 'title',
  88 + require: false,
  89 + placeholder: '',
  90 + value: '',
  91 + },
  92 + {
  93 + type: 'el-input-number',
  94 + label: '标题宽度',
  95 + name: 'titleWidth',
  96 + require: false,
  97 + placeholder: '',
  98 + value: 250,
  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: 0,
  112 + },
  113 + {
  114 + type: 'el-input-number',
  115 + label: '上边距',
  116 + name: 'top',
  117 + required: false,
  118 + placeholder: '',
  119 + value: 0,
  120 + },
  121 + {
  122 + type: 'el-input-number',
  123 + label: '宽度',
  124 + name: 'width',
  125 + required: false,
  126 + placeholder: '该容器在1920px大屏中的宽度',
  127 + value: 1000,
  128 + },
  129 + {
  130 + type: 'el-input-number',
  131 + label: '高度',
  132 + name: 'height',
  133 + required: false,
  134 + placeholder: '该容器在1080px大屏中的高度',
  135 + value: 600,
  136 + },
  137 + ],
  138 + }
  139 +}
... ...
src/views/bigscreenDesigner/designer/tools/configure/div/widget-div.js
  View file @b010148
... ... @@ -5,7 +5,7 @@ export const widgetDiv = {
5 5 code: 'widget-div',
6 6 type: 'html',
7 7 tabName: '图层',
8   - label: '边框',
  8 + label: '边框(二)',
9 9 icon: 'icontupian1',
10 10 options: {
11 11 // 配置
... ...
src/views/bigscreenDesigner/designer/tools/main.js
  View file @b010148
... ... @@ -7,6 +7,7 @@
7 7 * @LastEditTime: 2022-11-07 15:34:02
8 8 */
9 9 import { widgetDiv } from "./configure/div/widget-div"
  10 +import { widgetBorderBox } from "./configure/div/widget-border-box";
10 11 import { widgetImage } from "./configure/div/widget-image"
11 12 import { widgetSliders } from "./configure/div/widget-slider"
12 13 import { widgetText } from "./configure/texts/widget-text"
... ... @@ -40,9 +41,9 @@ import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
40 41 import { widgetRadar } from "./configure/radarCharts/widget-radar";
41 42 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
42 43  
43   -
44 44 export const widgetTool = [
45 45 //图层
  46 + widgetBorderBox,
46 47 widgetDiv,
47 48 widgetImage,
48 49 widgetSliders,
... ...
src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue 0 → 100644
  View file @b010148
  1 +<!--
  2 + Div 图层
  3 +-->
  4 +<template>
  5 + <dv-border-Box-1 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  6 + v-if="styleColor.divClass === 'dv-border-Box-1'"></dv-border-Box-1>
  7 + <dv-border-Box-2 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  8 + v-else-if="styleColor.divClass === 'dv-border-Box-2'"></dv-border-Box-2>
  9 + <dv-border-Box-3 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  10 + v-else-if="styleColor.divClass === 'dv-border-Box-3'"></dv-border-Box-3>
  11 + <dv-border-Box-4 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  12 + :reverse="transStyle.reverse"
  13 + v-else-if="styleColor.divClass === 'dv-border-Box-4'"></dv-border-Box-4>
  14 + <dv-border-Box-5 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  15 + v-else-if="styleColor.divClass === 'dv-border-Box-5'"></dv-border-Box-5>
  16 + <dv-border-Box-6 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  17 + v-else-if="styleColor.divClass === 'dv-border-Box-6'"></dv-border-Box-6>
  18 + <dv-border-Box-7 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  19 + v-else-if="styleColor.divClass === 'dv-border-Box-7'"></dv-border-Box-7>
  20 + <dv-border-Box-8 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  21 + :dur="transStyle.dur" :reverse="transStyle.reverse"
  22 + :title="transStyle.title" :titleWidth="transStyle.titleWidth"
  23 + v-else-if="styleColor.divClass === 'dv-border-Box-8'" ></dv-border-Box-8>
  24 + <dv-border-Box-9 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  25 + v-else-if="styleColor.divClass === 'dv-border-Box-9'"></dv-border-Box-9>
  26 + <dv-border-Box-10 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  27 + v-else-if="styleColor.divClass === 'dv-border-Box-10'"></dv-border-Box-10>
  28 + <dv-border-Box-11 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  29 + :title="transStyle.title" :titleWidth="transStyle.titleWidth"
  30 + v-else-if="styleColor.divClass === 'dv-border-Box-11'"></dv-border-Box-11>
  31 + <dv-border-Box-12 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  32 + v-else-if="styleColor.divClass === 'dv-border-Box-12'"></dv-border-Box-12>
  33 + <dv-border-Box-13 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
  34 + v-else="styleColor.divClass === 'dv-border-Box-13'"></dv-border-Box-13>
  35 +</template>
  36 +<script>
  37 +import borderBox1 from "@jiaminghi/data-view/lib/components/borderBox1";
  38 +import borderBox2 from "@jiaminghi/data-view/lib/components/borderBox2";
  39 +import borderBox3 from "@jiaminghi/data-view/lib/components/borderBox3";
  40 +import borderBox4 from "@jiaminghi/data-view/lib/components/borderBox4";
  41 +import borderBox5 from "@jiaminghi/data-view/lib/components/borderBox5";
  42 +import borderBox6 from "@jiaminghi/data-view/lib/components/borderBox6";
  43 +import borderBox7 from "@jiaminghi/data-view/lib/components/borderBox7";
  44 +import borderBox8 from "@jiaminghi/data-view/lib/components/borderBox8";
  45 +import borderBox9 from "@jiaminghi/data-view/lib/components/borderBox9";
  46 +import borderBox10 from "@jiaminghi/data-view/lib/components/borderBox10";
  47 +import borderBox11 from "@jiaminghi/data-view/lib/components/borderBox11";
  48 +import borderBox12 from "@jiaminghi/data-view/lib/components/borderBox12";
  49 +import borderBox13 from "@jiaminghi/data-view/lib/components/borderBox13";
  50 +Vue.use(borderBox1)
  51 +Vue.use(borderBox2)
  52 +Vue.use(borderBox3)
  53 +Vue.use(borderBox4)
  54 +Vue.use(borderBox5)
  55 +Vue.use(borderBox6)
  56 +Vue.use(borderBox7)
  57 +Vue.use(borderBox8)
  58 +Vue.use(borderBox9)
  59 +Vue.use(borderBox10)
  60 +Vue.use(borderBox11)
  61 +Vue.use(borderBox12)
  62 +Vue.use(borderBox13)
  63 +export default {
  64 + name: "WidgetBorderBox",
  65 + components: {
  66 + },
  67 + props: {
  68 + value: Object,
  69 + ispreview: Boolean,
  70 + },
  71 + data() {
  72 + return {
  73 + options: {},
  74 + optionsData: {},
  75 + };
  76 + },
  77 + computed: {
  78 + transStyle() {
  79 + let transStyleObj = this.objToOne(this.options);
  80 + let color = [];
  81 + if(!this.isBlankObject(transStyleObj)){
  82 + const colorOne = transStyleObj.colorOne;
  83 + if(!this.isBlankObject(colorOne)){
  84 + color.push(colorOne);
  85 + }
  86 + const colorTwo = transStyleObj.colorTwo;
  87 + if(!this.isBlankObject(colorTwo)){
  88 + color.push(colorTwo);
  89 + }
  90 + transStyleObj.color = color;
  91 + }
  92 + return transStyleObj;
  93 + },
  94 + styleColor() {
  95 + return {
  96 + position: this.ispreview ? "absolute" : "static",
  97 + // color: this.transStyle.colorOne,
  98 + // text: this.transStyle.text,
  99 + divClass:
  100 + this.transStyle.divType == undefined
  101 + ? "dv-border-Box-1"
  102 + : this.transStyle.divType,
  103 + // background: this.transStyle.backgroundColor,
  104 + width: this.transStyle.width + "px",
  105 + height: this.transStyle.height + "px",
  106 + left: this.transStyle.left + "px",
  107 + top: this.transStyle.top + "px",
  108 + right: this.transStyle.right + "px",
  109 + };
  110 + },
  111 + },
  112 + watch: {
  113 + value: {
  114 + handler(val) {
  115 + this.options = val;
  116 + this.optionsData = val.data;
  117 + this.setOptionsData();
  118 + },
  119 + deep: true,
  120 + },
  121 + },
  122 + mounted() {
  123 + this.options = this.value;
  124 + },
  125 + methods: {},
  126 +};
  127 +</script>
  128 +
  129 +<style scoped lang="scss">
  130 +.div {
  131 + width: 100%;
  132 + height: 100%;
  133 + border: 2em;
  134 + border-color: aqua;
  135 + overflow: hidden;
  136 +}
  137 +
  138 +.div_Style {
  139 + width: 100%;
  140 + height: 100%;
  141 +}
  142 +</style>
... ...
src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue
  View file @b010148
... ... @@ -20,13 +20,9 @@
20 20 </template>
21 21  
22 22 <script>
23   -// import WidgeDiv1 from './svg/div1.vue';
24   -// import WidgeDiv2 from './svg/div2.vue';
25 23 export default {
26 24 name: "WidgetDiv",
27 25 components: {
28   - // div_Style_1: WidgeDiv1,
29   - // div_Style_2: WidgeDiv2
30 26 },
31 27 props: {
32 28 value: Object,
... ...
src/views/bigscreenDesigner/designer/widget/temp.vue
  View file @b010148
... ... @@ -43,6 +43,7 @@ import widgetRadar from &quot;./radar/widgetRadar&quot;;
43 43 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
44 44 import widgetDecorate from "./decorate/decorate.vue";
45 45 import widgetDiv from "./div/widgetDiv.vue";
  46 +import widgetBorderBox from "./div/widgetBorderBox.vue";
46 47  
47 48 export default {
48 49 name: "WidgetTemp",
... ... @@ -78,7 +79,8 @@ export default {
78 79 widgetWordCloud,
79 80 widgetHeatmap,
80 81 widgetRadar,
81   - widgetBarLineStackChart
  82 + widgetBarLineStackChart,
  83 + widgetBorderBox
82 84 },
83 85 model: {
84 86 prop: "value",
... ...
src/views/bigscreenDesigner/designer/widget/widget.vue
  View file @b010148
... ... @@ -20,8 +20,6 @@ import widgetHref from &quot;./text/widgetHref.vue&quot;;
20 20 import widgetText from "./text/widgetText.vue";
21 21 import WidgetMarquee from "./text/widgetMarquee.vue";
22 22 import widgetTime from "./text/widgetTime.vue";
23   -import widgetImage from "./div/widgetImage.vue";
24   -import widgetSlider from "./div/widgetSlider.vue";
25 23 import widgetVideo from "./text/widgetVideo.vue";
26 24 import WidgetIframe from "./text/widgetIframe.vue";
27 25 import widgetBarchart from "./bar/widgetBarchart.vue";
... ... @@ -48,12 +46,16 @@ import widgetRadar from &quot;./radar/widgetRadar&quot;;
48 46 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
49 47 import widgetDecorate from "./decorate/decorate.vue";
50 48 import widgetDiv from "./div/widgetDiv.vue";
  49 +import widgetImage from "./div/widgetImage.vue";
  50 +import widgetSlider from "./div/widgetSlider.vue";
  51 +import widgetBorderBox from "./div/widgetBorderBox.vue";
51 52  
52 53 export default {
53 54 name: "Widget",
54 55 components: {
55 56 widgetDecorate,
56 57 widgetDiv,
  58 + widgetBorderBox,
57 59 widgetHref,
58 60 widgetText,
59 61 WidgetMarquee,
... ...