qiangmj / report-ui

Commit dd2bf3874b1f6c5b1e17988453fc3eedb3cfbac2

Authored by qianbao
1 parent 4e53903b

1、添加锁定图层、解除锁定功能 

2、添加轮播大屏组件
3、添加左对齐功能
4、添加分组移动功能
Inline Side-by-side
Showing 6 changed files with 383 additions and 84 deletions
src/views/bigscreenDesigner/designer/components/contentMenu.vue
  View file @dd2bf38
... ... @@ -6,25 +6,40 @@
6 6 <div class="contentmenu__item" @click="copyLayer">
7 7 <i class="iconfont iconfuzhi1"></i> 复制图层
8 8 </div>
9   - <div class="contentmenu__item" @click="istopLayer">
10   - <i class="iconfont iconjinlingyingcaiwangtubiao01"></i> 置顶图层
  9 + <div class="contentmenu__item" @click="setAlignment">
  10 + <i class="iconfont iconzidianxiang"></i> 左对齐
11 11 </div>
12 12 <div class="contentmenu__item" @click="setlowLayer">
13 13 <i class="iconfont iconleft-copy"></i> 置底图层
14 14 </div>
  15 + <div class="contentmenu__item" @click="istopLayer">
  16 + <i class="iconfont iconjinlingyingcaiwangtubiao01"></i> 置顶图层
  17 + </div>
15 18 <div class="contentmenu__item" @click="moveupLayer">
16 19 <i class="iconfont iconjinlingyingcaiwangtubiao01"></i> 上移一层
17 20 </div>
18 21 <div class="contentmenu__item" @click="movedownLayer">
19 22 <i class="iconfont iconleft-copy"></i> 下移一层
20 23 </div>
  24 + <div class="contentmenu__item" @click="lockLayer">
  25 + <i class="iconfont iconchufaqipeizhi-hui"></i> 锁定图层
  26 + </div>
  27 + <div class="contentmenu__item" @click="noLockLayer">
  28 + <i class="iconfont iconfuzhi"></i> 解除锁定
  29 + </div>
  30 + <div class="contentmenu__item" @click="addGroupLayer">
  31 + <i class="iconfont iconbaocun"></i> 添加分组
  32 + </div>
  33 + <div class="contentmenu__item" @click="delGroupLayer">
  34 + <i class="iconfont iconzhankai"></i> 移除分组
  35 + </div>
21 36 </div>
22 37 </template>
23 38 <script>
24 39 export default {
25 40 props: {
26 41 styleObj: Object,
27   - visible: Boolean
  42 + visible: Boolean,
28 43 },
29 44 data() {
30 45 return {};
... ... @@ -36,7 +51,7 @@ export default {
36 51 } else {
37 52 document.body.removeEventListener("click", this.closeMenu);
38 53 }
39   - }
  54 + },
40 55 },
41 56 methods: {
42 57 closeMenu() {
... ... @@ -46,22 +61,39 @@ export default {
46 61 this.$confirm("是否删除所选图层?", "提示", {
47 62 confirmButtonText: "确定",
48 63 cancelButtonText: "取消",
49   - type: "warning"
  64 + type: "warning",
50 65 })
51 66 .then(() => {
52 67 this.$emit("deletelayer");
53 68 this.$message({
54 69 type: "success",
55   - message: "删除成功!"
  70 + message: "删除成功!",
56 71 });
57 72 })
58 73 .catch(() => {
59 74 this.$message({
60 75 type: "info",
61   - message: "已取消删除"
  76 + message: "已取消删除",
62 77 });
63 78 });
64 79 },
  80 + lockLayer() {
  81 + this.$emit("lockLayer");
  82 + },
  83 + setAlignment() {
  84 + this.$emit("setAlignment");
  85 + },
  86 + noLockLayer() {
  87 + this.$emit("noLockLayer");
  88 + },
  89 + //添加分组
  90 + addGroupLayer() {
  91 + this.$emit("addGroupLayer");
  92 + },
  93 + //移除分组
  94 + delGroupLayer() {
  95 + this.$emit("delGroupLayer");
  96 + },
65 97 copyLayer() {
66 98 this.$emit("copylayer");
67 99 },
... ... @@ -76,8 +108,8 @@ export default {
76 108 },
77 109 movedownLayer() {
78 110 this.$emit("movedownLayer");
79   - }
80   - }
  111 + },
  112 + },
81 113 };
82 114 </script>
83 115 <style lang="scss" scoped>
... ...
src/views/bigscreenDesigner/designer/components/dynamicForm.vue
  View file @dd2bf38
... ... @@ -185,6 +185,12 @@
185 185 :chart-type="item.chartType"
186 186 @change="changed($event, item.name)"
187 187 />
  188 + <dynamic-html-slider
  189 + v-if="item.type == 'dynamic-html-slider' && inputShow[item.name]"
  190 + v-model="formData[item.name]"
  191 + :chart-type="item.chartType"
  192 + @change="changed($event, item.name)"
  193 + />
188 194 <dynamic-add-pic-adress
189 195 v-if="item.type == 'dynamic-add-pic-adress' && inputShow[item.name]"
190 196 v-model="formData[item.name]"
... ... @@ -332,6 +338,7 @@ import CustomUploadNew from &quot;./customUploadNew&quot;;
332 338 import DatasourceSelect from "./datasourceSelect";
333 339 import CustomUploadMulti from "./customUploadMulti";
334 340 import dynamicAddSvg from "./dynamicAddSvg.vue";
  341 +import dynamicHtmlSlider from "./dynamicHtmlSlider.vue";
335 342 import dynamicAddPicAdress from "./dynamicAddPicAdress";
336 343 import { mapState } from 'vuex';
337 344 export default {
... ... @@ -348,7 +355,8 @@ export default {
348 355 CustomUploadMulti,
349 356 DatasourceSelect,
350 357 dynamicAddSvg,
351   - dynamicAddPicAdress
  358 + dynamicAddPicAdress,
  359 + dynamicHtmlSlider
352 360 },
353 361 model: {
354 362 prop: "value",
... ...
src/views/bigscreenDesigner/designer/components/dynamicHtmlSlider.vue 0 → 100644
  View file @dd2bf38
  1 +<template>
  2 + <div>
  3 + <el-button
  4 + type="primary"
  5 + size="small"
  6 + icon="el-icon-plus"
  7 + plain
  8 + @click="handleAddClick"
  9 + >新增</el-button
  10 + >
  11 + <el-table :data="formData" style="width: 100%" row-key="name">
  12 + <el-table-column prop="name" label="大屏名称" width="170" />
  13 + <el-table-column label="操作" width="100">
  14 + <template slot-scope="scope">
  15 + <div class="button-group">
  16 + <el-button
  17 + @click="handleEditorClick(scope.$index, scope.row)"
  18 + type="text"
  19 + size="small"
  20 + >编辑</el-button
  21 + >
  22 + <el-button
  23 + type="text"
  24 + size="small"
  25 + @click="handleDeleteClick(scope.$index, scope.row)"
  26 + >删除</el-button
  27 + >
  28 + </div>
  29 + </template>
  30 + </el-table-column>
  31 + </el-table>
  32 +
  33 + <el-dialog
  34 + title="新增"
  35 + :visible.sync="dialogVisible"
  36 + width="30%"
  37 + :before-close="handleClose"
  38 + >
  39 + <el-form :model="rowFormData" label-width="70px">
  40 + <el-form-item label="大屏名称:">
  41 + <el-input
  42 + v-model.trim="rowFormData['name']"
  43 + placeholder="请输入大屏名称"
  44 + size="mini"
  45 + >
  46 + </el-input>
  47 + </el-form-item>
  48 + <el-form-item label="地址URL:" label-width="70px">
  49 + <el-input
  50 + v-model.trim="rowFormData['url']"
  51 + placeholder="请输入地址URL"
  52 + size="mini"
  53 + >
  54 + </el-input>
  55 + </el-form-item>
  56 + </el-form>
  57 + <span slot="footer" class="dialog-footer">
  58 + <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
  59 + <el-button size="mini" type="primary" @click="handleSaveClick"
  60 + >确 定</el-button
  61 + >
  62 + </span>
  63 + </el-dialog>
  64 + </div>
  65 +</template>
  66 +<script>
  67 +import Sortable from 'sortablejs'//引入拖拽插件
  68 +export default {
  69 + model: {
  70 + prop: "formData",
  71 + event: "input"
  72 + },
  73 + props: {
  74 + formData: Array
  75 + },
  76 + data() {
  77 + return {
  78 + dialogVisible: false,
  79 + rowFormData: {
  80 + name: "",
  81 + url: ""
  82 + },
  83 + flag: true, // true 新增， false 编辑
  84 + indexEditor: -1, // 编辑第几个数据
  85 + tableData: []
  86 + };
  87 + },
  88 + created() {
  89 + this.$nextTick(() => {
  90 + this.rowDrop()
  91 + });
  92 + },
  93 + methods: {
  94 + // 新增
  95 + handleAddClick() {
  96 + this.rowFormData = {};
  97 + this.flag = true;
  98 + this.dialogVisible = true;
  99 + },
  100 + // 编辑
  101 + handleEditorClick(index, row) {
  102 + this.flag = false;
  103 + this.rowFormData = this.deepClone(row);
  104 + this.indexEditor = index;
  105 + this.dialogVisible = true;
  106 + },
  107 + // 关闭
  108 + handleClose() {
  109 + this.dialogVisible = false;
  110 + },
  111 + // 保存
  112 + handleSaveClick() {
  113 + if (this.flag) {
  114 + // 新增
  115 + this.formData.push(this.rowFormData);
  116 + this.dialogVisible = false;
  117 + } else {
  118 + // 编辑
  119 + this.formData[this.indexEditor] = this.rowFormData;
  120 + this.$set(this.formData, this.indexEditor, this.rowFormData);
  121 + this.dialogVisible = false;
  122 + }
  123 + this.$emit("input", this.formData);
  124 + this.$emit("change", this.formData);
  125 + },
  126 + // 删除
  127 + handleDeleteClick(index) {
  128 + this.formData.splice(index, 1);
  129 + this.$emit("input", this.formData);
  130 + this.$emit("change", this.formData);
  131 + },
  132 + //行拖拽
  133 + rowDrop () {
  134 + // 此时找到的元素是要拖拽元素的父容器
  135 + const tbody = document.querySelector('.el-table__body-wrapper tbody');
  136 + const _this = this;
  137 + Sortable.create(tbody, {
  138 + //指定父元素下可被拖拽的子元素
  139 + draggable: ".el-table__row",
  140 + onEnd ({ newIndex, oldIndex }) {
  141 + const currRow = _this.formData.splice(oldIndex, 1)[0];
  142 + _this.formData.splice(newIndex, 0, currRow);
  143 + //渲染父页面
  144 + _this.$emit("input", _this.formData);
  145 + _this.$emit("change", _this.formData);
  146 + }
  147 + });
  148 + },
  149 + }
  150 +};
  151 +</script>
  152 +<style lang="scss" scoped>
  153 +/deep/::-webkit-scrollbar-track-piece {
  154 + background-color: transparent;
  155 +}
  156 +/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  157 + width: 0; // 横向滚动条
  158 + height: 8px; // 纵向滚动条 必写
  159 +}
  160 +// 滚动条的滑块
  161 +/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  162 + border-radius: 5px;
  163 + background-color: rgba(144, 146, 152, 0.3);
  164 +}
  165 +/deep/.el-table,
  166 +/deep/.el-table__expanded-cell,
  167 +/deep/.el-table th,
  168 +/deep/.el-table tr {
  169 + background-color: transparent !important;
  170 + color: #859094 !important;
  171 + font-size: 12px !important;
  172 +}
  173 +/deep/.el-table td,
  174 +/deep/.el-table th.is-leaf {
  175 + border-bottom: none;
  176 + line-height: 26px;
  177 +}
  178 +/deep/.el-table tbody tr:hover {
  179 + background-color: #263445 !important;
  180 +}
  181 +/deep/.el-table tbody tr:hover > td {
  182 + background-color: #263445 !important;
  183 +}
  184 +/deep/.el-table::before {
  185 + height: 0;
  186 +}
  187 +.button-group .el-button {
  188 + padding: 0;
  189 +}
  190 +</style>
... ...
src/views/bigscreenDesigner/designer/index.vue
  View file @dd2bf38
... ... @@ -327,6 +327,9 @@
327 327 @setlowLayer="setlowLayer"
328 328 @moveupLayer="moveupLayer"
329 329 @movedownLayer="movedownLayer"
  330 + @setAlignment="setAlignment"
  331 + @delGroupLayer="delGroupLayer"
  332 + @addGroupLayer="addGroupLayer"
330 333 />
331 334 </div>
332 335 </template>
... ... @@ -471,7 +474,7 @@ export default {
471 474 size: "50",
472 475 };
473 476 this.sizeRange.some((item, index) => {
474   - console.log(item,index);
  477 + // console.log(item,index);
475 478 if (item <= 100 * this.bigscreenScaleInWorkbench) {
476 479 obj.index = index;
477 480 obj.size = 100 * this.bigscreenScaleInWorkbench;
... ... @@ -618,6 +621,7 @@ export default {
618 621 // 监听按下键盘事件
619 622 handleKeyDown: debounce(function(code) {
620 623 // 判断是否按住shift键，是就把pin赋值为true
  624 + // console.log(code)
621 625 if (code.keyCode === 16 && code.shiftKey) {
622 626 this.shiftEnt = true;
623 627 }else if (
... ... @@ -628,14 +632,14 @@ export default {
628 632 ) {
629 633 //上下左右移动
630 634 this.dragWidgetMoveByKey(code,this.widgetIndex);
  635 + }else if (code.key=='Tab'&& code.keyCode === 9) {
  636 + this.shiftEnt = false;
  637 + //标记重置
  638 + this.handleMouseDown();
631 639 }
632 640 }, 10, true),
633 641 handleKeyUp: debounce(function(code) {
634 642 // 判断是否松开shift键，是就把pin赋值为false
635   - if (code.keyCode === 16) {
636   - this.shiftEnt = false;
637   - this.selectMore=[];
638   - }
639 643 }, 500, true),
640 644 /**
641 645 * @description: 重做
... ... @@ -1176,7 +1180,6 @@ export default {
1176 1180 widgetValueChanged(key, val) {
1177 1181 if (this.screenCode == "screen") {
1178 1182 if (key === 'setup') {
1179   - // console.log("dddd",key,val,"this.screenCode",this.screenCode);
1180 1183 // 全局配置更改
1181 1184 let newSetup = new Array();
1182 1185 this.dashboard = this.deepClone(val);
... ... @@ -1219,6 +1222,14 @@ export default {
1219 1222 } else {
1220 1223 for (let i = 0; i < this.widgets.length; i++) {
1221 1224 if (this.widgetIndex == i) {
  1225 + if(this.shiftEnt && val && val.hasOwnProperty("left") && val.hasOwnProperty("top")){
  1226 + const obj = this.widgets[i].value.position;
  1227 + const leftOld = obj.left;
  1228 + const leftNew = val.left;
  1229 + const topOld = obj.top;
  1230 + const topNew = val.top;
  1231 + this.moveGroup(leftOld,leftNew,topOld,topNew);
  1232 + }
1222 1233 this.widgets[i].value[key] = this.deepClone(val);
1223 1234 this.setDefaultValue(this.widgets[i].options[key], val);
1224 1235 }
... ... @@ -1336,6 +1347,67 @@ export default {
1336 1347 this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]);
1337 1348 }
1338 1349 },
  1350 + //添加分组
  1351 + addGroupLayer() {
  1352 + // const obj = this.widgets[this.rightClickIndex];
  1353 + // this.$set(obj.value.position, "disabled", true);
  1354 + this.$message({
  1355 + type: "info",
  1356 + message: "小编正在努力开发中，尽情期待(可以选择多选后改变坐标移动哦)",
  1357 + });
  1358 + },
  1359 + //移除分组
  1360 + delGroupLayer() {
  1361 + this.$message({
  1362 + type: "info",
  1363 + message: "小编正在努力开发中，尽情期待(可以选择多选后改变坐标移动哦)",
  1364 + });
  1365 + },
  1366 + //图层对齐
  1367 + setAlignment() {
  1368 + this.selectMore = this.setUnique(this.selectMore);
  1369 + if(!this.shiftEnt || !this.selectMore){
  1370 + this.$message({
  1371 + type: "info",
  1372 + message: "对不起，左对齐只能多选情况下使用",
  1373 + });
  1374 + return;
  1375 + }
  1376 + const obj = this.widgets[this.widgetIndex];
  1377 + const leftNew = obj.value.position.left;
  1378 + if(this.isNotBlankArray(this.selectMore)){
  1379 + for(let i = 0; i< this.selectMore.length;i++){
  1380 + const index = this.selectMore[i];
  1381 + if(this.widgetIndex != index){
  1382 + this.widgets[index].value.position.left=leftNew;
  1383 + this.$refs.widgets[index].$refs.draggable.setActive(false);
  1384 + }
  1385 + }
  1386 + this.setShiftEntFalse();
  1387 + }
  1388 + },
  1389 + //输入坐标选中的整体移动
  1390 + moveGroup(leftOld,leftNew,topOld,topNew) {
  1391 + this.selectMore = this.setUnique(this.selectMore);
  1392 + if(this.isNotBlankArray(this.selectMore)){
  1393 + const leftDiff = leftNew - leftOld;
  1394 + const topDiff = topNew - topOld;
  1395 + for(let i = 0; i< this.selectMore.length;i++){
  1396 + const index = this.selectMore[i];
  1397 + if(this.widgetIndex != index){
  1398 + this.widgets[index].value.position.left=this.widgets[index].value.position.left+leftDiff;
  1399 + this.widgets[index].value.position.top=this.widgets[index].value.position.top+topDiff;
  1400 + //移除锁定标记
  1401 + // this.$refs.widgets[index].$refs.draggable.setActive(false);
  1402 + }
  1403 + }
  1404 + // this.setShiftEntFalse();
  1405 + }
  1406 + },
  1407 + setShiftEntFalse(){
  1408 + this.shiftEnt = false;
  1409 + this.selectMore = [];
  1410 + },
1339 1411 //输入删除键删除
1340 1412 entryDelete(index){
1341 1413 this.widgets.splice(index, 1);
... ...
src/views/bigscreenDesigner/designer/tools/configure/div/widget-html-slider.js
  View file @dd2bf38
... ... @@ -50,20 +50,14 @@ export const widgetHtmlSlider = {
50 50 placeholder: '',
51 51 value: 300000
52 52 },
53   - [
54   - {
55   - name: '地址设置',
56   - list: [
57   - // {
58   - // type: 'el-input-number',
59   - // label: '',
60   - // name: 'httpurl',
61   - // required: false,
62   - // value: '',
63   - // },
64   - ],
65   - },
66   - ],
  53 + {
  54 + type: 'dynamic-html-slider',
  55 + label: '轮播地址',
  56 + name: 'urls',
  57 + required: false,
  58 + placeholder: '',
  59 + value: []
  60 + }
67 61 ],
68 62 data:[],
69 63 // 坐标
... ...
src/views/bigscreenDesigner/designer/widget/div/widgetHtmlSlider.vue
  View file @dd2bf38
1 1 <template>
2   - <div :style="style">
  2 + <div :style="style" v-if="isRouterAlive">
3 3 <el-carousel arrow="always" height="100%" class="carousel" :direction="carouselStyle.direction"
4 4 :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval"
5 5 :type="carouselStyle.type" :key="carouselKey">
6   - <el-carousel-item v-for="(url, index) in carouselStyle.htmlurlList" :key="index">
  6 + <el-carousel-item v-for="(url, index) in urlData" :key="index">
7 7 <iframe class="carousel-img" :src="url" alt="" />
8 8 </el-carousel-item>
9 9 </el-carousel>
... ... @@ -23,50 +23,37 @@ export default {
23 23 data() {
24 24 return {
25 25 options: {},
  26 + urlData:[],
  27 + optionsSetUp:{},
26 28 carouselKey: 0, // 重新渲染组件用
  29 + flagInter: null,
  30 + isRouterAlive:true,
27 31 };
28 32 },
29 33 mounted () {
30 34 // 内嵌iframe时
31   - //iframeResize.iframeResizer({log: true,}, this.$refs.iframe);
32   - this.changeFrameHeight();
  35 + // this.iframeResizer({log: true,}, this.$refs.iframe);
  36 + // this.changeFrameHeight();
33 37 },
34 38 computed: {
35 39 transStyle() {
36   - return this.objToOne(this.options);
  40 + const obj = this.objToOne(this.options);
  41 + return obj;
37 42 },
38 43 style() {
39   - const autoLayer = this.transStyle.autoLayer;
40 44 //整屏显示
41   - if(autoLayer){
42   - return {
43   - position: "absolute",
44   - height: document.body.clientHeight+ "px",
45   - width: document.body.clientWidth+ "px",
46   - left: 0 + "px",
47   - top: 0 + "px",
48   - background:""
49   - };
50   - }else{
51   - return {
52   - position: this.ispreview ? "absolute" : "static",
53   - background: background,
54   - width: this.transStyle.width + "px",
55   - height: this.transStyle.height + "px",
56   - left: this.transStyle.left + "px",
57   - top: this.transStyle.top + "px",
58   - right: this.transStyle.right + "px",
59   - };
60   - }
61   -
  45 + return {
  46 + position: this.ispreview ? "absolute" : "static",
  47 + width: "100%",
  48 + height: "100%",
  49 + left:"0px",
  50 + top:"0px",
  51 + };
62 52 },
63 53 carouselStyle() {
64   - // console.log(this.transStyle.imageAdress,"1111");
  54 + this.initData(this.transStyle);
65 55 return {
66 56 //imageList: this.isBlank(this.transStyle.imageAdress)?[]:this.transStyle.imageAdress.split(","),
67   - htmlurlList: ['http://localhost:8888/#/bigscreen/viewer?reportCode=BI_YS001_1680838448088_1684993969021'],
68   - //htmlurlList: [],
69   - //['http://localhost:8888/#/bigscreen/viewer?reportCode=dev_1_1680589693462','http://localhost:8888/#/bigscreen/viewer?reportCode=BI_YS001_1680838448088_1684993969021','http://localhost:8888/#/bigscreen/viewer?reportCode=BI_YS001_1680838448088'],
70 57 direction: !this.transStyle.tabType ? this.transStyle.tabDirection : 'horizontal',
71 58 indicatorPosition: this.transStyle.tabSelector,
72 59 interval: this.transStyle.tabTime,
... ... @@ -78,8 +65,10 @@ export default {
78 65 value: {
79 66 handler(val) {
80 67 this.options = val;
  68 + this.optionsSetUp = val.setup;
  69 + this.handlerUrlData();
81 70 },
82   - deep: true
  71 + deep: true,
83 72 },
84 73 carouselStyle: {
85 74 handler(newValue, oldValue) {
... ... @@ -93,31 +82,45 @@ export default {
93 82 this.options = this.value;
94 83 },
95 84 methods: {
96   - dianji() {
97   - //设置后就是id==con_lf_top_div 的容器全屏
98   - let case1 = document.getElementById("iframeId");
99   - if (this.fullscreen) {
100   - if (document.exitFullscreen) {
101   - document.exitFullscreen();
102   - } else if (document.webkitCancelFullScreen) {
103   - document.webkitCancelFullScreen();
104   - } else if (document.mozCancelFullScreen) {
105   - document.mozCancelFullScreen();
106   - } else if (document.msExitFullscreen) {
107   - document.msExitFullscreen();
  85 + reload(){
  86 + this.isRouterAlive=false;
  87 + this.$nextTick(function(){
  88 + this.isRouterAlive=true;
  89 + })
  90 + },
  91 + initData(data) {
  92 + let urlUp =[];
  93 + if(this.hasOwn(data,"urls")){
  94 + urlUp = data['urls'];
  95 + }
  96 + let urlData = [];
  97 + if(this.isNotBlankArray(urlUp)){
  98 + for(let i=0;i<urlUp.length;i++){
  99 + const url = urlUp[i].url;
  100 + urlData[i] = url;
108 101 }
109   - } else {
110   - if (case1.requestFullscreen) {
111   - case1.requestFullscreen();
112   - } else if (case1.webkitRequestFullScreen) {
113   - case1.webkitRequestFullScreen();
114   - } else if (case1.mozRequestFullScreen) {
115   - case1.mozRequestFullScreen();
116   - } else if (case1.msRequestFullscreen) {
117   - // IE11
118   - case1.msRequestFullscreen();
  102 + }
  103 + console.log("12",urlData);
  104 + this.urlData = urlData;
  105 + this.urlData={...this.urlData};
  106 + },
  107 + handlerUrlData(){
  108 + const data = this.optionsSetUp;
  109 + let urlUp =[];
  110 + if(this.hasOwn(data,"urls")){
  111 + urlUp = data['urls'];
  112 + }else if(this.hasOwn(data,"dynamicHtmlSlider")){
  113 + urlUp = data['dynamicHtmlSlider'];
  114 + }
  115 + let urlData = [];
  116 + if(this.isNotBlankArray(urlUp)){
  117 + for(let i=0;i<urlUp.length;i++){
  118 + const url = urlUp[i].url;
  119 + urlData[i] = url;
119 120 }
120 121 }
  122 + this.urlData = urlData;
  123 + this.urlData={...this.urlData};
121 124 },
122 125 },
123 126 }
... ...