From a470b192a2e61f721b9842178a6bf5170271faf8 Mon Sep 17 00:00:00 2001
From: "liu.tao3" <liu.tao3@ustcinfo.com>
Date: Tue, 17 Oct 2023 14:08:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=82=B9=E4=B9=9D=E5=9B=BE=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data-room-ui/package-lock.json                |  86 +++---
 .../RightSetting/BorderSetting.vue            |  21 +-
 .../RightSetting/MoveDialog/index.vue         | 278 ++++++++++++++++++
 .../BorderComponents/GcBorder16/index.vue     |  11 +-
 data-room-ui/packages/BorderSelect/index.vue  |   1 -
 5 files changed, 350 insertions(+), 47 deletions(-)
 create mode 100644 data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue

diff --git a/data-room-ui/package-lock.json b/data-room-ui/package-lock.json
index b7368cb4..b6ee77d2 100644
--- a/data-room-ui/package-lock.json
+++ b/data-room-ui/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@gcpaas/data-room-ui",
-  "version": "2.0.0-RELEASE",
+  "version": "2.0.1-2023101601-Alpha",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3392,27 +3392,6 @@
         "whatwg-fetch": "^3.6.2"
       },
       "dependencies": {
-        "@vue/vue-loader-v15": {
-          "version": "npm:vue-loader@15.10.2",
-          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.2.tgz",
-          "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
-          "dev": true,
-          "requires": {
-            "@vue/component-compiler-utils": "^3.1.0",
-            "hash-sum": "^1.0.2",
-            "loader-utils": "^1.1.0",
-            "vue-hot-reload-api": "^2.3.0",
-            "vue-style-loader": "^4.1.0"
-          },
-          "dependencies": {
-            "hash-sum": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-              "dev": true
-            }
-          }
-        },
         "acorn-walk": {
           "version": "8.2.0",
           "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -3484,26 +3463,6 @@
             "tapable": "^2.0.0"
           }
         },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3738,6 +3697,47 @@
         "lodash": "^4.17.4"
       }
     },
+    "@vue/vue-loader-v15": {
+      "version": "npm:vue-loader@15.10.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz",
+      "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
+      "dev": true,
+      "requires": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
+    },
     "@vue/vue2-jest": {
       "version": "27.0.0",
       "resolved": "https://registry.npmjs.org/@vue/vue2-jest/-/vue2-jest-27.0.0.tgz",
@@ -20142,7 +20142,7 @@
     },
     "vue-hot-reload-api": {
       "version": "2.3.4",
-      "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue
index d2db4a86..cbf486cf 100644
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue
@@ -151,7 +151,7 @@
           v-model="config[setting.field]"
           v-else-if="setting.type === 'background'"
           clearable
-          placeholder="请选择图片"
+          placeholder="选择或输入链接"
         >
           <template slot="append">
             <el-button
@@ -163,6 +163,13 @@
             </el-button>
           </template>
         </el-input>
+        <el-button
+          v-else-if="setting.type === 'move'"
+          type="primary"
+          @click="initMove(config.imgUrl)"
+        >
+          图形切割
+        </el-button>
         <el-select
           v-else-if="setting.type === 'select'"
           v-model="config[setting.field]"
@@ -267,6 +274,7 @@
       </el-form-item>
       </div>
       <SourceDialog ref="SourceDialog" @getImg='changeImg'  />
+      <MoveDialog @getArray='changeBorder' ref="MoveDialog"/>
     </div>
   </div>
 </template>
@@ -277,13 +285,15 @@ import BorderColorSetting from 'data-room-ui/BigScreenDesign/RightSetting/Border
 import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
 import BorderSelect from 'data-room-ui/BorderSelect/index.vue'
 import SourceDialog from '../SourceDialog/index.vue'
+import MoveDialog from './MoveDialog/index.vue'
 export default {
   name: '',
   components: {
     BorderSelect,
     ColorSelect,
     BorderColorSetting,
-    SourceDialog
+    SourceDialog,
+    MoveDialog
   },
   props: {
     bigTitle:{
@@ -381,6 +391,9 @@ export default {
     // }
   },
   methods: {
+    changeBorder(val){
+      this.$set(this.config,'borderArray',val)
+    },
     changeImg(val){
       this.$set(this.config,'imgUrl',val.url)
     },
@@ -389,6 +402,10 @@ export default {
     },
     initCard(){
       this.$refs.SourceDialog.init()
+    },
+    initMove(val){
+      console.log(val)
+      this.$refs.MoveDialog.init(val,this.config.borderArray)
     }
 
   }
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue
new file mode 100644
index 00000000..d627d0a1
--- /dev/null
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue
@@ -0,0 +1,278 @@
+<template>
+  <el-dialog
+    title="资源库"
+    :visible.sync="dialogVisible"
+    :modal="true"
+    :modal-append-to-body="false"
+    :appen-to-body="false"
+    class="bs-dialog-wrap bs-el-dialog"
+    @closed="close"
+    @opened='getDom'
+  >
+    <div class="content">
+      <div class="img">
+        <span class="toptitle">
+            <el-input-number
+            @change='changeTop'
+            controls-position="right"
+            v-model="top"
+            class="bs-el-input-number"
+            :step=" 1"
+            :min="0"
+            :max="100000"
+            />
+        </span>
+        <span class="righttitle">
+            <el-input-number
+            @change='changeRight'
+            controls-position="right"
+            v-model="right"
+            class="bs-el-input-number"
+            :step=" 1"
+            :min="0"
+            :max="100000"
+            />
+        </span>
+        <span class="bottomtitle">
+            <el-input-number
+            @change='changeBottom'
+            controls-position="right"
+            v-model="bottom"
+            class="bs-el-input-number"
+            :step=" 1"
+            :min="0"
+            :max="100000"
+            />
+        </span>
+        <span class="lefttitle">
+            <el-input-number
+            @change='changeLeft'
+            controls-position="right"
+            v-model="left"
+            class="bs-el-input-number"
+            :step=" 1"
+            :min="0"
+            :max="100000"
+            />
+        </span>
+          <el-image
+          :src="this.imgUrl||url"
+          fit="none"></el-image>
+          <div
+           @mousedown="onMouseDown"
+           @mouseup="onMouseUp"
+           @mousemove="onMousemove"
+           @click="changeSymbol('top')"
+           id="top"
+           class="top">
+
+          </div>
+          <div @click="changeSymbol('right')" id="right" class="right">
+          </div>
+          <div @click="changeSymbol('bottom')" id="bottom" class="bottom">
+          </div>
+          <div @click="changeSymbol('left')" id="left" class="left">
+          </div>
+      </div>
+    </div>
+    <div
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button
+        class="bs-el-button-default"
+        @click="dialogVisible = false"
+      >
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        @click="confirm"
+      >
+        确定
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { right } from '@antv/g2plot/lib/plots/sankey/sankey'
+
+export default {
+  name: 'SourceDialog',
+  data () {
+    return {
+      dialogVisible: false,
+      imgUrl:'',
+      top:0,
+      right:0,
+      bottom:0,
+      left:0,
+      symbol:'',
+      isDown:false,
+      x:0,
+      y:0,
+      l:0,
+      t:0
+    }
+  },
+  computed: {
+    url(){
+      return require('data-room-ui/BorderComponents/GcBorder16/component.png')
+    }
+  },
+  mounted () {
+   },
+  methods: {
+    confirm(){
+      this.$emit('getArray',[this.top,this.right,this.bottom,this.left])
+      this.dialogVisible = false
+    },
+    getDom(){
+      //  const a=document.getElementById('top')
+      //  const b=document.getElementById('right')
+      //  const c=document.getElementById('bottom')
+      //  const d=document.getElementById('left')
+      //  this.top=getComputedStyle(a).top.slice(0,-2)
+      //  this.right=getComputedStyle(b).right.slice(0,-2)
+      //  this.bottom=getComputedStyle(c).bottom.slice(0,-2)
+      //  this.left=getComputedStyle(d).left.slice(0,-2)
+    },
+    onMouseUp(){
+      // this.isDown=false;
+    },
+    onMousemove(e){
+      // const a=document.getElementById('top')
+      // if(this.isDown==false){
+      //   return
+      // }
+      // console.log(e)
+      // let ny=e.clientY-194;
+      // let nt=ny-(this.y-this.t);
+      // a.style.top=nt+"px"
+      // this.top=a.style.top
+    },
+    onMouseDown(e){
+      // this.y=e.layerY
+	    // this.t=this.top;
+      // this.isDown=true
+      // console.log(this.x,this.l)
+    },
+    changeSymbol(val){
+      this.symbol=val
+    },
+
+    close(){
+
+    },
+    changeTop(val){
+      const a=document.getElementById('top')
+      a.style.top=val+"px"
+    },
+    changeRight(val){
+      const a=document.getElementById('right')
+      a.style.right=val+"px"
+    },
+     changeBottom(val){
+      const a=document.getElementById('bottom')
+      a.style.bottom=val+"px"
+    },
+     changeLeft(val){
+      const a=document.getElementById('left')
+      a.style.left=val+"px"
+    },
+    init (val,array) {
+      this.imgUrl=val
+      if(array){
+        [this.top,this.right,this.bottom,this.left]=array
+        this.$nextTick(()=>{
+          this.changeTop(this.top)
+          this.changeRight(this.right)
+          this.changeBottom(this.bottom)
+          this.changeLeft(this.left)
+        })
+      }
+      this.dialogVisible = true
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// @import '../../assets/style/bsTheme.scss';
+::v-deep .el-dialog__body{
+  background-color: #232832;
+  position: relative;
+  min-height: 400px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  padding: 16px 16px 16px 16px !important;
+}
+.content{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .img{
+    position: relative;
+    .toptitle{
+        position: absolute;
+        top: -30px;
+        left: 42%;
+      }
+    .righttitle{
+      position: absolute;
+      top: 50%;
+      right: -75px;
+    }
+    .bottomtitle{
+      position: absolute;
+      bottom: -30px;
+      left: 42%;
+    }
+    .lefttitle{
+      position: absolute;
+      top: 50%;
+      left: -75px;
+    }
+    // height: 100%;
+    .top{
+      position: absolute;
+      top: 0;
+      height: 1px;
+      background-color: #fff;
+      width: 100%;
+    }
+    .right{
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      background-color: #fff;
+      width: 1px;
+    }
+    .bottom{
+      position: absolute;
+      bottom: 0;
+      height: 1px;
+      background-color: #fff;
+      width: 100%;
+    }
+    .left{
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background-color: #fff;
+      width: 1px;
+    }
+  }
+
+}
+::v-deep .el-input-number--mini{
+  width: 70px;
+  .el-input__inner{
+    padding-right: 30px;
+  }
+}
+
+</style>
diff --git a/data-room-ui/packages/BorderComponents/GcBorder16/index.vue b/data-room-ui/packages/BorderComponents/GcBorder16/index.vue
index ac4205e0..f86ee0de 100644
--- a/data-room-ui/packages/BorderComponents/GcBorder16/index.vue
+++ b/data-room-ui/packages/BorderComponents/GcBorder16/index.vue
@@ -33,6 +33,9 @@ export default {
     }
   },
   computed: {
+    url(){
+      return require('data-room-ui/BorderComponents/GcBorder16/component.png')
+    },
     borderArray(){
       return this.config.border.borderArray ? this.config.border.borderArray
         : [100,100,100,100]
@@ -44,6 +47,9 @@ export default {
         if(val){
           const a =document.getElementById('border'+ this.config.code)
           a.style['border-image-source']=`url(${val})`
+        }else{
+          const a =document.getElementById('border'+ this.config.code)
+          a.style['border-image-source']=`url(${this.url})`
         }
       }
     }
@@ -52,6 +58,9 @@ export default {
     if(this.config.border.imgUrl){
       const a =document.getElementById('border'+ this.config.code)
           a.style['border-image-source']=`url(${this.config.border.imgUrl})`
+    }else{
+      const a =document.getElementById('border'+ this.config.code)
+          a.style['border-image-source']=`url(${this.url})`
     }
   },
   methods: {
@@ -61,7 +70,7 @@ export default {
 
 <style lang="scss" scoped>
 .bs-design-wrap {
-  border-image-source:url(component.png);
+  // border-image-source:url(component.png);
   width: 100%;
   height: 100%;
   position: absolute;
diff --git a/data-room-ui/packages/BorderSelect/index.vue b/data-room-ui/packages/BorderSelect/index.vue
index a613fb95..e3b30f6d 100644
--- a/data-room-ui/packages/BorderSelect/index.vue
+++ b/data-room-ui/packages/BorderSelect/index.vue
@@ -29,7 +29,6 @@
             @click="chooseComponent(component)"
           >
             <div
-              v-if="component.title!='GcBorder16'"
               :class="component.title == focus.title ? 'focus' : ''"
               class="big-screen-card-inner"
             >