Merge remote-tracking branch 'origin/dev' into dev

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@jiaminghi/data-view": "^2.10.0",
+    "bin-code-editor": "^0.9.0",
     "dayjs": "^1.8.35",
     "dvcp-dv": "^1.0.0",
     "dvcp-dv-ui": "^2.0.0",

packages/2.0.5/AppBuildManage/components/List.vue

@@ -51,7 +51,7 @@
                 <el-button type="text" @click="onAdd(row.id)">编辑</el-button>
                 <el-button type="text" @click="remove(row.id)">删除</el-button>
                 <el-button type="text" @click="toBuildMsg(row)">房屋信息</el-button>
-                <el-button type="text" @click="$router.push({ name: 'AppHouseMap', query: { communityId: row.communityId, buildingId: row.id, unitNum: 1, buildingNumber: row.buildingNumber } })">
+                <el-button type="text" @click="$router.push({ name: '63', query: { communityId: row.communityId, buildingId: row.id, unitNum: 1, buildingNumber: row.buildingNumber } })">
                   楼栋模型
                 </el-button>
               </div>

packages/2.0.5/AppGridBlock/components/add.vue

@@ -257,6 +257,7 @@ export default {
       overlays: [],
       options: [],
       path: [],
+      location: {},
       polyEditor: "",
       title: "添加网格区块",
       parentGirdInfo: {},
@@ -301,6 +302,7 @@ export default {
     },
   },
   created() {
+    this.getCorpLocation()
     if (this.isEdit) {
       this.title = "编辑网格区块";
       this.searchDetail();
@@ -382,14 +384,20 @@ export default {
             panel: "panel", // 结果列表将在此容器中进行展示。
             autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
           });
-          this.map.setZoomAndCenter(14, [117.147097, 36.72081], false, 600);
+          this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
           this.eventOn();
         }
       })
       .catch((e) => {
-        console.log(e);
       });
     },
+    getCorpLocation(){
+      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
+        if(res.code==0){
+          this.location = res.data
+        }
+      })
+    },
     //地图事件绑定
     eventOn() {
       this.path = [];

packages/2.0.5/AppGridMember/components/add.vue

@@ -373,6 +373,7 @@ export default {
               `/app/appgirdmemberinfo/addOrUpdate`,
               {
                 ...this.forms,
+                girdInfoListStr: this.forms.girdInfoList.map(v => v.girdName).join(',')
               },
               null
             )

packages/3.0.0/AppNavConfig/components/List.vue

@@ -8,11 +8,18 @@
           <el-button size="small" @click="save" v-if="isEdit">保存</el-button>
         </template>
         <div slot="content" class="item-wrapper">
-          <div class="item" v-for="(item, i) in picked" :key="i">
+          <draggable
-            <img :src="item.pictureUrl">
+            v-model="picked"
-            <i class="el-icon-remove icon" @click="removeChoose(i)" v-if="isEdit"></i>
+            :animation="340"
-            <h2>{{ item.name }}</h2>
+            group="select"
-          </div>
+            style="display: flex;"
+            handle=".mover">
+            <div class="item" :class="[isEdit ? 'mover' : '']" v-for="(item, i) in picked" :key="i">
+              <img :src="item.pictureUrl">
+              <i class="el-icon-remove icon" @click="removeChoose(i)" v-if="isEdit"></i>
+              <h2>{{ item.name }}</h2>
+            </div>
+          </draggable>
           <ai-empty style="width: 100%" v-if="!picked.length"></ai-empty>
         </div>
       </ai-card>
@@ -91,6 +98,7 @@
 </template>
 
 <script>
+  import draggable from 'vuedraggable'
   export default {
     name: 'List',
 
@@ -99,6 +107,10 @@
       dict: Object
     },
 
+    components: {
+      draggable
+    },
+
     data () {
       return {
         picked: [],

packages/3.0.0/AppNotice/components/List.vue

@@ -71,7 +71,6 @@
         total: 10,
         colConfigs: [
           {prop: 'title', label: '标题', align: 'left'},
-          {prop: 'content', label: '正文', align: 'center'},
           {prop: 'createUserName', label: '发布人', align: 'center' },
           {prop: 'publishUnitName', label: '发布组织', align: 'center'},
           {prop: 'createTime', label: '发布时间', align: 'center' },

packages/3.0.0/AppVillageActivity/components/Add.vue

@@ -46,7 +46,7 @@
             <el-form-item label="活动介绍" style="width: 100%;" prop="content" :rules="[{required: true, message: '请输入内容', trigger: 'change'}]">
               <ai-editor v-model="form.content" :instance="instance"/>
             </el-form-item>
-            <el-form-item label="缩略图" style="width: 100%;" prop="url" :rules="[{required: true, message: '请上传缩略图', trigger: 'blur'}]">
+            <el-form-item label="缩略图" style="width: 100%;" prop="url" :rules="[{required: true, message: '请上传缩略图', trigger: 'change'}]">
               <ai-uploader
                 :instance="instance"
                 isShowTip
@@ -124,6 +124,17 @@
       confirm () {
         this.$refs.form.validate((valid) => {
           if (valid) {
+            const nowTime = new Date().getTime()
+            const beginTime = new Date(this.form.beginTime).getTime()
+            const endTime = new Date(this.form.endTime).getTime()
+
+            if (beginTime < nowTime) {
+              return this.$message.error('活动开始时间不能早于当前时间')
+            }
+            if (endTime < beginTime) {
+              return this.$message.error('活动结束时间不能早于活动开始时间')
+            }
+
             this.instance.post(`/app/appvillageactivityinfo/addOrUpdate`, {
               ...this.form,
               url: this.form.url.length ? JSON.stringify([{

packages/3.0.0/AppVillageAlbum/components/List.vue

@@ -359,7 +359,7 @@
           img {
             width: 100%;
             height: 140px;
-            object-fit: contain;
+            object-fit: none;
           }
         }
 

packages/bigscreen/designer/components/Layout.vue

@@ -7,6 +7,7 @@
         <h2>{{ dashboard.title }}</h2>
       </div>
       <div class="layout-header__right">
+        <span type="text" @click="isShowImg = true">图片素材</span>
         <span type="text" @click="back">退出</span>
         <span type="text" @click="save">保存</span>
       </div>
@@ -266,9 +267,9 @@
       </div>
     </div>
     <div
-        class="layout-menu"
+      class="layout-menu"
-        v-if="activeIndex > -1 && isShowMenu"
+      v-if="activeIndex > -1 && isShowMenu"
-        :style="{top: menuY + 'px', left: menuX + 'px'}">
+      :style="{top: menuY + 'px', left: menuX + 'px'}">
       <div class="layout-menu__item" @click="removeLayer">
         <span>删除图层</span>
       </div>
@@ -282,246 +283,320 @@
         <span>置底图层</span>
       </div>
     </div>
+    <ai-dialog :visible.sync="isShowImg" append-to-body title="图片素材" @onConfirm="isShowImg = false">
+      <el-button type="primary" style="margin-bottom: 20px" @click="isShowAddImg = true">添加图片</el-button>
+      <ai-table
+        :tableData="images"
+        :total="images.length"
+        :colConfigs="colConfigs"
+        @getList="() => {}">
+        <el-table-column slot="img" label="图片" align="center">
+          <template slot-scope="{ row }">
+            <ai-uploader
+              :instance="instance"
+              :value="[{url: row.url}]"
+              disabled
+              :limit="1">
+            </ai-uploader>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row, $index }">
+            <div class="table-options">
+              <el-button type="text" @click="removeImg($index)">删除</el-button>
+              <el-button type="text" @click="copy(row.url)">复制链接</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </ai-dialog>
+    <ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加图片" @closed="form.images = []" @onConfirm="onImageConfirm">
+      <ai-uploader
+        :instance="instance"
+        v-model="form.images"
+        :limit="9">
+        <template slot="tips">
+          <p>最多上传9张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
+        </template>
+      </ai-uploader>
+    </ai-dialog>
   </div>
 </template>
 
 <script>
-import { components } from '../config'
+  import { components } from '../config'
-import VueRulerTool from 'vue-ruler-tool'
+  import VueRulerTool from 'vue-ruler-tool'
-import VueDraggableResizable from 'vue-draggable-resizable'
+  import VueDraggableResizable from 'vue-draggable-resizable'
-import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
+  import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
-import DataConfig from './form/DataConfig.vue'
+  import DataConfig from './form/DataConfig.vue'
-import RenderElement from './RenderElement'
+  import RenderElement from './RenderElement'
 
-export default {
+  export default {
-  props: {
+    props: {
-    instance: Function,
+      instance: Function,
-    dict: Object,
+      dict: Object,
-    params: Object,
+      params: Object,
-    urlPrefix: String
+      urlPrefix: String
-  },
-
-  data() {
-    return {
-      parentIndex: 0,
-      subIndex: 0,
-      sonIndex: 0,
-      leftIndex: 0,
-      rightIndex: 1,
-      configIndex: 0,
-      components,
-      bigscreenWidth: 1920,
-      bigscreenHeight: 1080,
-      widthPaddingTools: 18,
-      componentList: [],
-      dashboard: {
-        title: '大屏',
-        width: 1920,
-        height: 1080,
-        backgroundColor: '',
-        backgroundImage: []
-      },
-      menuX: 0,
-      menuY: 0,
-      isShowMenu: false,
-      activeIndex: -1,
-      middleWidth: 0,
-      middleHeight: 0,
-      widthScale: 0,
-      heightScale: 0,
-      bigscreenScaleInWorkbench: 0,
-      tableStatus: [{
-        label: '是',
-        value: '1'
-      }, {
-        label: '否',
-        value: '0'
-      }],
-      summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary5', 'summary7', 'summary9', 'summary10'],
-      borderList: ['border0', 'border1', 'border2', 'border3', 'border4']
-    }
-  },
-
-  components: {
-    RenderElement,
-    DataConfig,
-    VueRulerTool,
-    VueDraggableResizable,
-  },
-
-  computed: {
-    workbenchTransform() {
-      return `scale(${this.heightScale})`
     },
 
-    currLayout() {
+    data() {
-      if (this.activeIndex === -1) return {}
+      return {
-
+        colConfigs: [
-      return this.componentList[this.activeIndex]
+          // { prop: 'url', label: '图片链接', showOverflowTooltip: false },
-    },
+          { slot: 'img', label: '图片' }
-
+        ],
-    widget() {
+        form: {
-      if (this.components.length && this.components[this.parentIndex].list.length) {
+          images: []
-        return this.components[this.parentIndex].list[this.subIndex].list
+        },
+        isShowAddImg: false,
+        isShowImg: false,
+        parentIndex: 0,
+        subIndex: 0,
+        sonIndex: 0,
+        leftIndex: 0,
+        rightIndex: 1,
+        configIndex: 0,
+        components,
+        bigscreenWidth: 1920,
+        bigscreenHeight: 1080,
+        widthPaddingTools: 18,
+        componentList: [],
+        dashboard: {
+          title: '大屏',
+          width: 1920,
+          height: 1080,
+          backgroundColor: '',
+          backgroundImage: []
+        },
+        menuX: 0,
+        menuY: 0,
+        isShowMenu: false,
+        activeIndex: -1,
+        middleWidth: 0,
+        middleHeight: 0,
+        widthScale: 0,
+        heightScale: 0,
+        bigscreenScaleInWorkbench: 0,
+        tableStatus: [{
+          label: '是',
+          value: '1'
+        }, {
+          label: '否',
+          value: '0'
+        }],
+        images: [],
+        summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary5', 'summary7', 'summary9', 'summary10'],
+        borderList: ['border0', 'border1', 'border2', 'border3', 'border4']
       }
+    },
 
-      return []
+    components: {
-    }
+      RenderElement,
-  },
+      DataConfig,
+      VueRulerTool,
+      VueDraggableResizable,
+    },
 
-  created() {
+    computed: {
-  },
+      workbenchTransform() {
+        return `scale(${this.heightScale})`
+      },
 
-  mounted() {
+      currLayout() {
-    if (this.params && this.params.id) {
+        if (this.activeIndex === -1) return {}
-      this.getInfo(this.params.id)
-    }
-    this.$nextTick(() => {
-      this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
-      this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
-      this.initCanvas()
-    })
-  },
 
-  methods: {
+        return this.componentList[this.activeIndex]
-    bindEvent() {
+      },
-      this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
-      this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
 
+      widget() {
+        if (this.components.length && this.components[this.parentIndex].list.length) {
+          return this.components[this.parentIndex].list[this.subIndex].list
+        }
+
+        return []
+      }
+    },
+
+    mounted() {
+      if (this.params && this.params.id) {
+        this.getInfo(this.params.id)
+      }
       this.$nextTick(() => {
+        this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
+        this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
         this.initCanvas()
       })
     },
 
-    setTop() {
+    methods: {
-      const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
+      bindEvent() {
-        return item.zIndex
+        this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
-      }))
+        this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
 
-      this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
+        this.$nextTick(() => {
-    },
+          this.initCanvas()
+        })
+      },
 
-    setBottom() {
+      copy (link) {
-      const item = this.componentList[this.activeIndex]
+        let oInput = document.createElement('input')
-      this.componentList.splice(this.activeIndex, 1)
+        oInput.value = link
-      this.componentList.unshift(item)
+        document.body.appendChild(oInput)
-    },
+        oInput.select()
+        document.execCommand('Copy')
+        this.$message({
+          message: '已复制',
+          type: 'success'
+        })
+        oInput.remove()
+      },
 
-    getInfo(id) {
+      removeImg (index) {
-      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
+        this.images.splice(index, 1)
-        if (res.code === 0) {
+      }, 
-          this.componentList = JSON.parse(res.data.config).config
+
-          this.dashboard = JSON.parse(res.data.config).dashboard
+      onImageConfirm () {
+        if (!this.form.images.length) {
+          return this.$message.error('请上传图片')
         }
-      })
-    },
 
-    back() {
+        this.images.push(this.form.images)
-      this.$emit('close')
+        this.form.images = []
-    },
+        this.isShowAddImg = false
+      },
 
-    save() {
+      setTop() {
-      this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
+        const maxZindex = Math.max.apply(Math, this.componentList.map(item => {
-        config: JSON.stringify({
+          return item.zIndex
-          config: this.componentList,
+        }))
-          dashboard: this.dashboard
+
-        }),
+        this.$set(this.componentList[this.activeIndex], 'zIndex', maxZindex + 1)
-        status: 1,
+      },
-        title: this.dashboard.title,
+
-        id: this.params.id || ''
+      setBottom() {
-      }).then(res => {
+        const item = this.componentList[this.activeIndex]
-        if (res.code == 0) {
+        this.componentList.splice(this.activeIndex, 1)
-          this.$message.success('保存成功')
+        this.componentList.unshift(item)
-          this.$emit('change', res.data)
+      },
-          this.back()
+
+      getInfo(id) {
+        this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            const data = JSON.parse(res.data.config)
+            this.componentList = data.config
+            this.dashboard = data.dashboard
+            this.images = data.images || []
+          }
+        })
+      },
+
+      back() {
+        this.$emit('close')
+      },
+
+      save() {
+        this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
+          config: JSON.stringify({
+            config: this.componentList,
+            dashboard: this.dashboard,
+            images: this.images
+          }),
+          status: 1,
+          title: this.dashboard.title,
+          id: this.params.id || ''
+        }).then(res => {
+          if (res.code == 0) {
+            this.$message.success('保存成功')
+            this.$emit('change', res.data)
+            this.back()
+          }
+        })
+      },
+
+      clone(e) {
+        this.componentList.push(this.deepClone(e))
+      },
+
+      onChange(e) {
+        if (e.indexOf('Chart') > -1) {
+          this.$refs[`chart${this.activeIndex}`][0].refresh()
         }
-      })
+      },
-    },
 
-    clone(e) {
+      deepClone(data, hash = new WeakMap()) {
-      this.componentList.push(this.deepClone(e))
+        if (typeof data !== 'object' || data === null) {
-    },
+          throw new TypeError('传入参数不是对象')
-
-    onChange(e) {
-      if (e.indexOf('Chart') > -1) {
-        this.$refs[`chart${this.activeIndex}`][0].refresh()
-      }
-    },
-
-    deepClone(data, hash = new WeakMap()) {
-      if (typeof data !== 'object' || data === null) {
-        throw new TypeError('传入参数不是对象')
-      }
-      if (hash.has(data)) {
-        return hash.get(data)
-      }
-      let newData = {}
-      const dataKeys = Object.keys(data)
-      dataKeys.forEach(value => {
-        const currentDataValue = data[value]
-        if (typeof currentDataValue !== "object" || currentDataValue === null) {
-          newData[value] = currentDataValue
-        } else if (Array.isArray(currentDataValue)) {
-          newData[value] = [...currentDataValue]
-        } else if (currentDataValue instanceof Set) {
-          newData[value] = new Set([...currentDataValue])
-        } else if (currentDataValue instanceof Map) {
-          newData[value] = new Map([...currentDataValue])
-        } else {
-          hash.set(data, data)
-          newData[value] = this.deepClone(currentDataValue, hash)
         }
-      })
+        if (hash.has(data)) {
-      return newData
+          return hash.get(data)
-    },
+        }
+        let newData = {}
+        const dataKeys = Object.keys(data)
+        dataKeys.forEach(value => {
+          const currentDataValue = data[value]
+          if (typeof currentDataValue !== "object" || currentDataValue === null) {
+            newData[value] = currentDataValue
+          } else if (Array.isArray(currentDataValue)) {
+            newData[value] = [...currentDataValue]
+          } else if (currentDataValue instanceof Set) {
+            newData[value] = new Set([...currentDataValue])
+          } else if (currentDataValue instanceof Map) {
+            newData[value] = new Map([...currentDataValue])
+          } else {
+            hash.set(data, data)
+            newData[value] = this.deepClone(currentDataValue, hash)
+          }
+        })
+        return newData
+      },
 
-    onContextmenu(e, index) {
+      onContextmenu(e, index) {
-      this.menuX = e.clientX + 10
+        this.menuX = e.clientX + 10
-      this.menuY = e.clientY + 10
+        this.menuY = e.clientY + 10
-      this.activeIndex = index
+        this.activeIndex = index
-      this.isShowMenu = true
+        this.isShowMenu = true
 
-      e.preventDefault()
+        e.preventDefault()
-    },
+      },
 
-    copyLayer() {
+      copyLayer() {
-      const layer = this.deepClone(this.componentList[this.activeIndex])
+        const layer = this.deepClone(this.componentList[this.activeIndex])
-      this.componentList.push(layer)
+        this.componentList.push(layer)
-    },
+      },
 
-    removeLayer() {
+      removeLayer() {
-      this.componentList.splice(this.activeIndex, 1)
+        this.componentList.splice(this.activeIndex, 1)
-      this.activeIndex = -1
+        this.activeIndex = -1
-    },
+      },
 
-    onActivated(index) {
+      onActivated(index) {
-      this.activeIndex = index
+        this.activeIndex = index
-    },
+      },
 
 
-    onDrag(x, y, index) {
+      onDrag(x, y, index) {
-      this.$set(this.componentList[index], 'left', x)
+        this.$set(this.componentList[index], 'left', x)
-      this.$set(this.componentList[index], 'top', y)
+        this.$set(this.componentList[index], 'top', y)
-    },
+      },
 
-    onResizing(x, y, w, h, index, type) {
+      onResizing(x, y, w, h, index, type) {
-      this.$set(this.componentList[index], 'left', x)
+        this.$set(this.componentList[index], 'left', x)
-      this.$set(this.componentList[index], 'top', y)
+        this.$set(this.componentList[index], 'top', y)
-      this.$set(this.componentList[index], 'width', w)
+        this.$set(this.componentList[index], 'width', w)
-      this.$set(this.componentList[index], 'height', h)
+        this.$set(this.componentList[index], 'height', h)
 
-      if (type.indexOf('Chart') > -1) {
+        if (type.indexOf('Chart') > -1) {
-        this.$refs[`chart${index}`][0].watchResize()
+          this.$refs[`chart${index}`][0].watchResize()
+        }
+      },
+
+      initCanvas() {
+        var widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
+        var heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
+        this.heightScale = Math.min(widthScale, heightScale)
       }
-    },
-
-    initCanvas() {
-      var widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
-      var heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
-      this.heightScale = Math.min(widthScale, heightScale)
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>

packages/bigscreen/designer/components/form/DataConfig.vue

@@ -7,13 +7,8 @@
       class="layout-config__edit"
       title="编辑器"
       @onConfirm="onConfirm">
-      <div style="height: 500px;">
+      <div>
-        <vue-json-editor
+        <b-code-editor v-model="json" lint="dracula"  auto-format height="440px"></b-code-editor>
-          v-model="json" 
-          :show-btns="false"
-          mode="code"
-          lang="zh">
-        </vue-json-editor>
       </div>
     </ai-dialog>
     <div class="layout-config__group" v-if="options.monitorType !== 'hik' && options.monitorType !== 'dahua'">
@@ -122,7 +117,13 @@
 </template>
 
 <script>
+  import Vue from 'vue'
   import vueJsonEditor from 'vue-json-editor'
+  import CodeEditor from 'bin-code-editor'
+  import 'bin-code-editor/lib/styles/index.css'
+
+  Vue.use(CodeEditor)
+
   export default {
     name: 'dataCofing',
 
@@ -156,7 +157,8 @@
         sourceData: [],
         keys: [],
         monitorList: [],
-        list: []
+        list: [],
+        jsonData: `{"title":"测试json数据","children":[{"name":"子项名称", "desc":"子项说明" },{"name":"子项名称1", "desc":"子项说明1" }]}`
       }
     },
 
@@ -196,7 +198,7 @@
 
     methods: {
       showEditor () {
-        this.json = JSON.parse(JSON.stringify(this.options.staticData))
+        this.json = JSON.stringify(this.options.staticData)
         this.isShowEditor = true
       },
 
@@ -314,7 +316,7 @@
       },
 
       onConfirm () {
-        this.$set(this.options, 'staticData', JSON.parse(JSON.stringify(this.json)))
+        this.$set(this.options, 'staticData', JSON.parse(this.json))
         this.isShowEditor = false
         this.$emit('change')
       }

packages/bigscreen/viewer/AppGigscreenViewer.vue

@@ -3,10 +3,10 @@
     <div v-if="!component">
       <div
         :style="{
-          width: item.width + 'px',
+          width: item.width * scale + 'px',
-          height: item.height + 'px',
+          height: item.height * scale + 'px',
-          left: item.left + 'px',
+          left: item.left * scale + 'px',
-          top: item.top + 'px',
+          top: item.top * scale + 'px',
           position: 'absolute',
           zIndex: item.zIndex
         }"
@@ -57,12 +57,26 @@
           backgroundImage: []
         },
         componentList: [],
+        scale: 1,
         meta: {}
       }
     },
 
     created() {
       this.getInfo(this.id)
+
+      // this.scale = document.body.clientWidth / 1920
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        const transform = document.querySelector('#dv-full-screen-container').style.transform
+        const scale = transform.replace('scale', '').replace('(', '').replace(')', '')
+
+        if (scale == 1) {
+          this.scale = document.body.clientWidth / 1920
+        }
+      })
     },
 
     methods: {