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

2、添加轮播大屏组件 3、添加左对齐功能 4、添加分组移动功能

1、添加锁定图层、解除锁定功能
2、添加轮播大屏组件 3、添加左对齐功能 4、添加分组移动功能
qianbao
1 parent 4e53903b
Showing 6 changed files with 383 additions and 84 deletions
src/views/bigscreenDesigner/designer/components/contentMenu.vue
src/views/bigscreenDesigner/designer/components/dynamicForm.vue
src/views/bigscreenDesigner/designer/components/dynamicHtmlSlider.vue
src/views/bigscreenDesigner/designer/index.vue
src/views/bigscreenDesigner/designer/tools/configure/div/widget-html-slider.js
src/views/bigscreenDesigner/designer/widget/div/widgetHtmlSlider.vue
@@ -6,25 +6,40 @@
     <div class="contentmenu__item" @click="copyLayer">
       <i class="iconfont iconfuzhi1"></i> 复制图层
     </div>
-    <div class="contentmenu__item" @click="istopLayer">
-      <i class="iconfont iconjinlingyingcaiwangtubiao01"></i> 置顶图层
+    <div class="contentmenu__item" @click="setAlignment">
+      <i class="iconfont iconzidianxiang"></i> 左对齐
     </div>
     <div class="contentmenu__item" @click="setlowLayer">
       <i class="iconfont iconleft-copy"></i> 置底图层
     </div>
+    <div class="contentmenu__item" @click="istopLayer">
+      <i class="iconfont iconjinlingyingcaiwangtubiao01"></i> 置顶图层
+    </div>
     <div class="contentmenu__item" @click="moveupLayer">
       <i class="iconfont iconjinlingyingcaiwangtubiao01"></i> 上移一层
     </div>
     <div class="contentmenu__item" @click="movedownLayer">
       <i class="iconfont iconleft-copy"></i> 下移一层
     </div>
+    <div class="contentmenu__item" @click="lockLayer">
+      <i class="iconfont iconchufaqipeizhi-hui"></i> 锁定图层
+    </div>
+    <div class="contentmenu__item" @click="noLockLayer">
+      <i class="iconfont iconfuzhi"></i> 解除锁定
+    </div>
+    <div class="contentmenu__item" @click="addGroupLayer">
+      <i class="iconfont iconbaocun"></i> 添加分组
+    </div>
+    <div class="contentmenu__item" @click="delGroupLayer">
+      <i class="iconfont iconzhankai"></i> 移除分组
+    </div>
   </div>
 </template>
 <script>
 export default {
   props: {
     styleObj: Object,
-    visible: Boolean
+    visible: Boolean,
   },
   data() {
     return {};
@@ -36,7 +51,7 @@ export default {
       } else {
         document.body.removeEventListener("click", this.closeMenu);
       }
-    }
+    },
   },
   methods: {
     closeMenu() {
@@ -46,22 +61,39 @@ export default {
       this.$confirm("是否删除所选图层?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       })
         .then(() => {
           this.$emit("deletelayer");
           this.$message({
             type: "success",
-            message: "删除成功!"
+            message: "删除成功!",
           });
         })
         .catch(() => {
           this.$message({
             type: "info",
-            message: "已取消删除"
+            message: "已取消删除",
           });
         });
     },
+    lockLayer() {
+      this.$emit("lockLayer");
+    },
+    setAlignment() {
+      this.$emit("setAlignment");
+    },
+    noLockLayer() {
+      this.$emit("noLockLayer");
+    },
+    //添加分组
+    addGroupLayer() {
+      this.$emit("addGroupLayer");
+    },
+    //移除分组
+    delGroupLayer() {
+      this.$emit("delGroupLayer");
+    },
     copyLayer() {
       this.$emit("copylayer");
     },
@@ -76,8 +108,8 @@ export default {
     },
     movedownLayer() {
       this.$emit("movedownLayer");
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -185,6 +185,12 @@
             :chart-type="item.chartType"
             @change="changed($event, item.name)"
           />
+          <dynamic-html-slider
+            v-if="item.type == 'dynamic-html-slider' && inputShow[item.name]"
+            v-model="formData[item.name]"
+            :chart-type="item.chartType"
+            @change="changed($event, item.name)"
+          />
           <dynamic-add-pic-adress
             v-if="item.type == 'dynamic-add-pic-adress' && inputShow[item.name]"
             v-model="formData[item.name]"
@@ -332,6 +338,7 @@ import CustomUploadNew from &quot;./customUploadNew&quot;;
 import DatasourceSelect from "./datasourceSelect";
 import CustomUploadMulti from "./customUploadMulti";
 import dynamicAddSvg from "./dynamicAddSvg.vue";
+import dynamicHtmlSlider from "./dynamicHtmlSlider.vue";
 import dynamicAddPicAdress from "./dynamicAddPicAdress";
 import { mapState } from 'vuex';
 export default {
@@ -348,7 +355,8 @@ export default {
     CustomUploadMulti,
     DatasourceSelect,
     dynamicAddSvg,
-    dynamicAddPicAdress
+    dynamicAddPicAdress,
+    dynamicHtmlSlider
   },
   model: {
     prop: "value",
+<template>
+  <div>
+    <el-button
+      type="primary"
+      size="small"
+      icon="el-icon-plus"
+      plain
+      @click="handleAddClick"
+    >新增</el-button
+    >
+    <el-table :data="formData" style="width: 100%" row-key="name">
+      <el-table-column prop="name" label="大屏名称" width="170" />
+      <el-table-column label="操作" width="100">
+        <template slot-scope="scope">
+          <div class="button-group">
+            <el-button
+              @click="handleEditorClick(scope.$index, scope.row)"
+              type="text"
+              size="small"
+            >编辑</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="handleDeleteClick(scope.$index, scope.row)"
+            >删除</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      title="新增"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form :model="rowFormData" label-width="70px">
+        <el-form-item label="大屏名称:">
+          <el-input
+            v-model.trim="rowFormData['name']"
+            placeholder="请输入大屏名称"
+            size="mini"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item label="地址URL:" label-width="70px">
+          <el-input
+            v-model.trim="rowFormData['url']"
+            placeholder="请输入地址URL"
+            size="mini"
+          >
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="handleSaveClick"
+        >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Sortable from 'sortablejs'//引入拖拽插件
+export default {
+  model: {
+    prop: "formData",
+    event: "input"
+  },
+  props: {
+    formData: Array
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      rowFormData: {
+        name: "",
+        url: ""
+      },
+      flag: true, // true 新增， false 编辑
+      indexEditor: -1, // 编辑第几个数据
+      tableData: []
+    };
+  },
+  created() {
+    this.$nextTick(() => {
+      this.rowDrop()
+    });
+  },
+  methods: {
+    // 新增
+    handleAddClick() {
+      this.rowFormData = {};
+      this.flag = true;
+      this.dialogVisible = true;
+    },
+    // 编辑
+    handleEditorClick(index, row) {
+      this.flag = false;
+      this.rowFormData = this.deepClone(row);
+      this.indexEditor = index;
+      this.dialogVisible = true;
+    },
+    // 关闭
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    // 保存
+    handleSaveClick() {
+      if (this.flag) {
+        // 新增
+        this.formData.push(this.rowFormData);
+        this.dialogVisible = false;
+      } else {
+        // 编辑
+        this.formData[this.indexEditor] = this.rowFormData;
+        this.$set(this.formData, this.indexEditor, this.rowFormData);
+        this.dialogVisible = false;
+      }
+      this.$emit("input", this.formData);
+      this.$emit("change", this.formData);
+    },
+    // 删除
+    handleDeleteClick(index) {
+      this.formData.splice(index, 1);
+      this.$emit("input", this.formData);
+      this.$emit("change", this.formData);
+    },
+    //行拖拽
+    rowDrop () {
+      // 此时找到的元素是要拖拽元素的父容器
+      const tbody = document.querySelector('.el-table__body-wrapper tbody');
+      const _this = this;
+      Sortable.create(tbody, {
+        //指定父元素下可被拖拽的子元素
+        draggable: ".el-table__row",
+        onEnd ({ newIndex, oldIndex }) {
+          const currRow = _this.formData.splice(oldIndex, 1)[0];
+          _this.formData.splice(newIndex, 0, currRow);
+          //渲染父页面
+          _this.$emit("input", _this.formData);
+          _this.$emit("change", _this.formData);
+        }
+      });
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+/deep/::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0; // 横向滚动条
+  height: 8px; // 纵向滚动条 必写
+}
+// 滚动条的滑块
+/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(144, 146, 152, 0.3);
+}
+/deep/.el-table,
+/deep/.el-table__expanded-cell,
+/deep/.el-table th,
+/deep/.el-table tr {
+  background-color: transparent !important;
+  color: #859094 !important;
+  font-size: 12px !important;
+}
+/deep/.el-table td,
+/deep/.el-table th.is-leaf {
+  border-bottom: none;
+  line-height: 26px;
+}
+/deep/.el-table tbody tr:hover {
+  background-color: #263445 !important;
+}
+/deep/.el-table tbody tr:hover > td {
+  background-color: #263445 !important;
+}
+/deep/.el-table::before {
+  height: 0;
+}
+.button-group .el-button {
+  padding: 0;
+}
+</style>
@@ -327,6 +327,9 @@
       @setlowLayer="setlowLayer"
       @moveupLayer="moveupLayer"
       @movedownLayer="movedownLayer"
+      @setAlignment="setAlignment"
+      @delGroupLayer="delGroupLayer"
+      @addGroupLayer="addGroupLayer"
     />
   </div>
 </template>
@@ -471,7 +474,7 @@ export default {
         size: "50",
       };
       this.sizeRange.some((item, index) => {
-        console.log(item,index);
+        // console.log(item,index);
         if (item <= 100 * this.bigscreenScaleInWorkbench) {
           obj.index = index;
           obj.size = 100 * this.bigscreenScaleInWorkbench;
@@ -618,6 +621,7 @@ export default {
     // 监听按下键盘事件
     handleKeyDown: debounce(function(code) {
       // 判断是否按住shift键，是就把pin赋值为true
+      // console.log(code)
       if (code.keyCode === 16 && code.shiftKey) {
         this.shiftEnt = true;
       }else if (
@@ -628,14 +632,14 @@ export default {
       ) {
         //上下左右移动
         this.dragWidgetMoveByKey(code,this.widgetIndex);
+      }else if (code.key=='Tab'&& code.keyCode === 9) {
+        this.shiftEnt = false;
+        //标记重置
+        this.handleMouseDown();
       }
     }, 10, true),
     handleKeyUp: debounce(function(code) {
       // 判断是否松开shift键，是就把pin赋值为false
-      if (code.keyCode === 16) {
-        this.shiftEnt = false;
-        this.selectMore=[];
-      }
     }, 500, true),
     /**
      * @description: 重做
@@ -1176,7 +1180,6 @@ export default {
     widgetValueChanged(key, val) {
       if (this.screenCode == "screen") {
         if (key === 'setup') {
-          // console.log("dddd",key,val,"this.screenCode",this.screenCode);
           // 全局配置更改
           let newSetup = new Array();
           this.dashboard = this.deepClone(val);
@@ -1219,6 +1222,14 @@ export default {
       } else {
         for (let i = 0; i < this.widgets.length; i++) {
           if (this.widgetIndex == i) {
+            if(this.shiftEnt && val && val.hasOwnProperty("left") && val.hasOwnProperty("top")){
+              const obj = this.widgets[i].value.position;
+              const leftOld = obj.left;
+              const leftNew = val.left;
+              const topOld = obj.top;
+              const topNew = val.top;
+              this.moveGroup(leftOld,leftNew,topOld,topNew);
+            }
             this.widgets[i].value[key] = this.deepClone(val);
             this.setDefaultValue(this.widgets[i].options[key], val);
           }
@@ -1336,6 +1347,67 @@ export default {
         this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]);
       }
     },
+    //添加分组
+    addGroupLayer() {
+      // const obj = this.widgets[this.rightClickIndex];
+      // this.$set(obj.value.position, "disabled", true);
+      this.$message({
+        type: "info",
+        message: "小编正在努力开发中，尽情期待(可以选择多选后改变坐标移动哦)",
+      });
+    },
+    //移除分组
+    delGroupLayer() {
+      this.$message({
+        type: "info",
+        message: "小编正在努力开发中，尽情期待(可以选择多选后改变坐标移动哦)",
+      });
+    },
+    //图层对齐
+    setAlignment() {
+      this.selectMore = this.setUnique(this.selectMore);
+      if(!this.shiftEnt || !this.selectMore){
+        this.$message({
+          type: "info",
+          message: "对不起，左对齐只能多选情况下使用",
+        });
+        return;
+      }
+      const obj = this.widgets[this.widgetIndex];
+      const leftNew = obj.value.position.left;
+      if(this.isNotBlankArray(this.selectMore)){
+         for(let i = 0; i< this.selectMore.length;i++){
+            const index = this.selectMore[i];
+            if(this.widgetIndex != index){
+              this.widgets[index].value.position.left=leftNew;
+              this.$refs.widgets[index].$refs.draggable.setActive(false);
+            }
+         }
+        this.setShiftEntFalse();
+      }
+    },
+    //输入坐标选中的整体移动
+    moveGroup(leftOld,leftNew,topOld,topNew) {
+      this.selectMore = this.setUnique(this.selectMore);
+      if(this.isNotBlankArray(this.selectMore)){
+        const leftDiff = leftNew - leftOld;
+        const topDiff = topNew - topOld;
+        for(let i = 0; i< this.selectMore.length;i++){
+          const index = this.selectMore[i];
+          if(this.widgetIndex != index){
+            this.widgets[index].value.position.left=this.widgets[index].value.position.left+leftDiff;
+            this.widgets[index].value.position.top=this.widgets[index].value.position.top+topDiff;
+            //移除锁定标记
+            // this.$refs.widgets[index].$refs.draggable.setActive(false);
+          }
+        }
+        // this.setShiftEntFalse();
+      }
+    },
+    setShiftEntFalse(){
+      this.shiftEnt = false;
+      this.selectMore = [];
+    },
     //输入删除键删除
     entryDelete(index){
       this.widgets.splice(index, 1);
@@ -50,20 +50,14 @@ export const widgetHtmlSlider =  {
         placeholder: '',
         value: 300000
       },
-      [
-        {
-          name: '地址设置',
-          list: [
-            // {
-            //   type: 'el-input-number',
-            //   label: '',
-            //   name: 'httpurl',
-            //   required: false,
-            //   value: '',
-            // },
-          ],
-        },
-      ],
+      {
+        type: 'dynamic-html-slider',
+        label: '轮播地址',
+        name: 'urls',
+        required: false,
+        placeholder: '',
+        value: []
+      }
     ],
     data:[],
     // 坐标
 <template>
-  <div :style="style">
+  <div :style="style" v-if="isRouterAlive">
     <el-carousel arrow="always" height="100%" class="carousel" :direction="carouselStyle.direction"
                  :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval"
                  :type="carouselStyle.type" :key="carouselKey">
-      <el-carousel-item v-for="(url, index) in carouselStyle.htmlurlList" :key="index">
+      <el-carousel-item v-for="(url, index) in urlData" :key="index">
         <iframe class="carousel-img" :src="url" alt="" />
       </el-carousel-item>
     </el-carousel>
@@ -23,50 +23,37 @@ export default {
   data() {
     return {
       options: {},
+      urlData:[],
+      optionsSetUp:{},
       carouselKey: 0, // 重新渲染组件用
+      flagInter: null,
+      isRouterAlive:true,
     };
   },
   mounted () {
     // 内嵌iframe时
-    //iframeResize.iframeResizer({log: true,}, this.$refs.iframe);
-    this.changeFrameHeight();
+    // this.iframeResizer({log: true,}, this.$refs.iframe);
+    // this.changeFrameHeight();
   },
   computed: {
     transStyle() {
-      return this.objToOne(this.options);
+      const obj = this.objToOne(this.options);
+      return obj;
     },
     style() {
-      const autoLayer = this.transStyle.autoLayer;
       //整屏显示
-      if(autoLayer){
-        return {
-          position:  "absolute",
-          height: document.body.clientHeight+ "px",
-          width: document.body.clientWidth+ "px",
-          left: 0 + "px",
-          top: 0 + "px",
-          background:""
-        };
-      }else{
-        return {
-          position: this.ispreview ? "absolute" : "static",
-          background: background,
-          width: this.transStyle.width + "px",
-          height: this.transStyle.height + "px",
-          left: this.transStyle.left + "px",
-          top: this.transStyle.top + "px",
-          right: this.transStyle.right + "px",
-        };
-      }
-
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: "100%",
+        height: "100%",
+        left:"0px",
+        top:"0px",
+      };
     },
     carouselStyle() {
-      // console.log(this.transStyle.imageAdress,"1111");
+      this.initData(this.transStyle);
       return {
         //imageList:  this.isBlank(this.transStyle.imageAdress)?[]:this.transStyle.imageAdress.split(","),
-        htmlurlList: ['http://localhost:8888/#/bigscreen/viewer?reportCode=BI_YS001_1680838448088_1684993969021'],
-        //htmlurlList: [],
-          //['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'],
         direction: !this.transStyle.tabType ? this.transStyle.tabDirection : 'horizontal',
         indicatorPosition: this.transStyle.tabSelector,
         interval: this.transStyle.tabTime,
@@ -78,8 +65,10 @@ export default {
     value: {
       handler(val) {
         this.options = val;
+        this.optionsSetUp = val.setup;
+        this.handlerUrlData();
       },
-      deep: true
+      deep: true,
     },
     carouselStyle: {
       handler(newValue, oldValue) {
@@ -93,31 +82,45 @@ export default {
     this.options = this.value;
   },
   methods: {
-    dianji() {
-      //设置后就是id==con_lf_top_div 的容器全屏
-      let case1 = document.getElementById("iframeId");
-      if (this.fullscreen) {
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
+    reload(){
+      this.isRouterAlive=false;
+      this.$nextTick(function(){
+        this.isRouterAlive=true;
+      })
+    },
+    initData(data) {
+      let urlUp =[];
+      if(this.hasOwn(data,"urls")){
+        urlUp =  data['urls'];
+      }
+      let urlData = [];
+      if(this.isNotBlankArray(urlUp)){
+        for(let i=0;i<urlUp.length;i++){
+          const url = urlUp[i].url;
+          urlData[i] = url;
         }
-      } else {
-        if (case1.requestFullscreen) {
-          case1.requestFullscreen();
-        } else if (case1.webkitRequestFullScreen) {
-          case1.webkitRequestFullScreen();
-        } else if (case1.mozRequestFullScreen) {
-          case1.mozRequestFullScreen();
-        } else if (case1.msRequestFullscreen) {
-          // IE11
-          case1.msRequestFullscreen();
+      }
+      console.log("12",urlData);
+      this.urlData = urlData;
+      this.urlData={...this.urlData};
+    },
+    handlerUrlData(){
+      const data = this.optionsSetUp;
+      let urlUp =[];
+      if(this.hasOwn(data,"urls")){
+        urlUp =  data['urls'];
+      }else if(this.hasOwn(data,"dynamicHtmlSlider")){
+        urlUp =  data['dynamicHtmlSlider'];
+      }
+      let urlData = [];
+      if(this.isNotBlankArray(urlUp)){
+        for(let i=0;i<urlUp.length;i++){
+          const url = urlUp[i].url;
+          urlData[i] = url;
         }
       }
+      this.urlData = urlData;
+      this.urlData={...this.urlData};
     },
   },
 }