迁移大屏UI库和应用

packages/bigscreen/designer/AppDesigner.vue

@@ -6,22 +6,29 @@
     <template slot="tabs">
       <el-tabs v-model="currIndex">
         <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
-          <component :urlPrefix="urlPrefix" :areaId="areaId" :ref="tab.name" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy
+          <component :urlPrefix="urlPrefix" :areaId="areaId" :ref="tab.name" v-if="currIndex == i" :is="tab.comp"
+                     @change="onChange" lazy
                      :instance="instance" :dict="dict" :permissions="permissions"/>
         </el-tab-pane>
       </el-tabs>
     </template>
   </ai-list>
-  <Add v-else-if="componentName === 'Add'" :urlPrefix="urlPrefix" :areaId="areaId" :params="params" :instance="instance" :dict="dict"
+  <Add v-else-if="componentName === 'Add'" :urlPrefix="urlPrefix" :areaId="areaId" :params="params" :instance="instance"
+       :dict="dict"
        :permissions="permissions" @change="onChange"></Add>
-  <SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance" :dict="dict"
+  <SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance"
+              :dict="dict"
               :permissions="permissions" @change="onChange"></SourceData>
 </template>
 
 <script>
+import dvui from "dvcp-dv-ui"
 import List from './components/List.vue'
 import Add from './components/Add'
 import SourceData from './components/SourceData'
+import Vue from "vue";
+
+Vue.use(dvui)
 
 export default {
   name: 'AppDesigner',

packages/bigscreen/designer/components/Add.vue

@@ -100,7 +100,9 @@ export default {
     urlPrefix: String
   },
 
-  inject: ['home'],
+  inject: {
+    home:{default: ''}
+  },
 
   components: {
     Layout,
@@ -242,7 +244,7 @@ export default {
           }).then(res => {
             if (res.code == 0) {
               this.$message.success('提交成功')
-              
+
               this.home?.refreshDvOptions()
               setTimeout(() => {
                 this.cancel(true)

packages/bigscreen/viewer/AppGigscreenViewer.vue

@@ -2,8 +2,8 @@
   <div class="AppGigscreenViewer">
     <div v-if="!component">
       <div
-        class="component-item"
-        :style="{
+          class="component-item"
+          :style="{
           width: item.width + 'px',
           height: item.height + 'px',
           left: item.left * scale + 'px',
@@ -12,8 +12,8 @@
           zIndex: item.zIndex,
           transform: `scale(${scale})`
         }"
-        v-for="(item, index) in componentList"
-        :key="index">
+          v-for="(item, index) in componentList"
+          :key="index">
         <RenderElement :data="item" :index="index"></RenderElement>
       </div>
     </div>
@@ -22,157 +22,159 @@
 </template>
 
 <script>
-  import RenderElement from '../designer/components/RenderElement'
-  import AppGridDV from '../../../project/dv/apps/AppGridDV'
+import RenderElement from '../designer/components/RenderElement'
 
-  export default {
-    name: 'AppGigscreenViewer',
-    label: '大屏预览',
+export default {
+  name: 'AppGigscreenViewer',
+  label: '大屏预览',
 
-    props: {
-      instance: Function,
-      dict: Object,
-      id: String,
-      urlPrefix: {
-        type: String,
-        default: '/app'
-      }
-    },
+  props: {
+    instance: Function,
+    dict: Object,
+    id: String,
+    urlPrefix: {
+      type: String,
+      default: '/app'
+    }
+  },
 
-    watch: {
-      id(v) {
-        this.getInfo(v)
-      }
-    },
+  watch: {
+    id(v) {
+      this.getInfo(v)
+    }
+  },
 
-    components: {
-      AppGridDV,
-      RenderElement
-    },
+  components: {
+    RenderElement
+  },
 
-    data() {
-      return {
-        component: '',
-        dashboard: {
-          title: '大屏',
-          width: 1920,
-          height: 1080,
-          backgroundColor: '',
-          backgroundImage: []
-        },
-        componentList: [],
-        scale: 1,
-        meta: {}
-      }
-    },
+  data() {
+    return {
+      component: '',
+      dashboard: {
+        title: '大屏',
+        width: 1920,
+        height: 1080,
+        backgroundColor: '',
+        backgroundImage: []
+      },
+      componentList: [],
+      scale: 1,
+      meta: {}
+    }
+  },
 
-    created() {
-      this.getInfo(this.id)
+  created() {
+    this.getInfo(this.id)
 
-      // this.scale = document.body.clientWidth / 1920
-    },
+    // this.scale = document.body.clientWidth / 1920
+  },
 
-    mounted () {
-      this.$nextTick(() => {
-        const transform = document.querySelector('#dv-full-screen-container').style.transform
+  mounted() {
+    this.$nextTick(() => {
+      let content = document.querySelector('#dv-full-screen-container')
+      if (content) {
+        const transform = content.style.transform
         const scale = transform.replace('scale', '').replace('(', '').replace(')', '')
 
         if (scale == 1) {
           this.scale = document.body.clientWidth / 1920
         }
+      }
+
+    })
+  },
+
+  methods: {
+    getInfo(id) {
+      this.component = null
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
+        if (res?.data) {
+          const config = JSON.parse(res.data.config)
+          if (config.custom) {
+            this.component = config.custom
+            this.meta = config?.meta || {}
+          } else {
+            this.componentList = JSON.parse(res.data.config).config
+            this.dashboard = JSON.parse(res.data.config).dashboard
+
+            this.componentList.forEach((item, index) => {
+              if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || item.type === 'display' || item.type === 'table' || item.type === 'summary')) {
+                this.getSourceData(item, index)
+              }
+              if (item.type === 'monitor' && item.monitorType === 'cmcc') {
+                this.instance.post(`${this.urlPrefix}/appzyvideoequipment/getWebSdkUrl?deviceId=${item.moniterId}`).then(res => {
+                  if (res.code == 0) {
+                    this.$set(this.componentList[index], 'src', JSON.parse(res.data).url)
+                  }
+                })
+              }
+              if (item.type === 'monitor' && item.monitorType === 'slw') {
+                this.instance.post(`${this.urlPrefix}/appzyvideoequipment/getWebSdkUrl?deviceId=${item.moniterId}`).then(res => {
+                  if (res.code == 0) {
+                    this.$set(this.componentList[index], 'src', res.data)
+                  }
+                })
+              }
+            })
+          }
+        }
       })
     },
 
-    methods: {
-      getInfo(id) {
-        this.component = null
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
-          if (res?.data) {
-            const config = JSON.parse(res.data.config)
-            if (config.custom) {
-              this.component = config.custom
-              this.meta = config?.meta || {}
-            } else {
-              this.componentList = JSON.parse(res.data.config).config
-              this.dashboard = JSON.parse(res.data.config).dashboard
+    getSourceData(item, index) {
+      const api = item.dataType === 'apiData' ? item.api : `${this.urlPrefix}/appdiylargescreen/statisticsByLsid?id=${item.sourceDataId}`
+      this.instance.post(api).then(res => {
+        if (res.code == 0) {
+          if (res.data.length) {
+            const keys = Object.keys(res.data[0])
+            const list = res.data
+            let dynamicData = []
+            if (item.type === 'table') {
+              dynamicData = keys.map(v => {
+                let obj = {}
+                list.forEach((item, index) => {
+                  obj[`v${index}`] = item[v]
+                })
 
-              this.componentList.forEach((item, index) => {
-                if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || item.type === 'display' || item.type === 'table' || item.type === 'summary')) {
-                  this.getSourceData(item, index)
-                }
-                if (item.type === 'monitor' && item.monitorType === 'cmcc') {
-                  this.instance.post(`${this.urlPrefix}/appzyvideoequipment/getWebSdkUrl?deviceId=${item.moniterId}`).then(res => {
-                    if (res.code == 0) {
-                      this.$set(this.componentList[index], 'src', JSON.parse(res.data).url)
-                    }
-                  })
-                }
-                if (item.type === 'monitor' && item.monitorType === 'slw') {
-                  this.instance.post(`${this.urlPrefix}/appzyvideoequipment/getWebSdkUrl?deviceId=${item.moniterId}`).then(res => {
-                    if (res.code == 0) {
-                      this.$set(this.componentList[index], 'src', res.data)
-                    }
-                  })
+                return {
+                  row: v,
+                  ...obj
                 }
               })
-            }
-          }
-        })
-      },
-
-      getSourceData(item, index) {
-        const api = item.dataType === 'apiData' ? item.api : `${this.urlPrefix}/appdiylargescreen/statisticsByLsid?id=${item.sourceDataId}`
-        this.instance.post(api).then(res => {
-          if (res.code == 0) {
-            if (res.data.length) {
-              const keys = Object.keys(res.data[0])
-              const list = res.data
-              let dynamicData = []
-              if (item.type === 'table') {
-                dynamicData = keys.map(v => {
-                  let obj = {}
-                  list.forEach((item, index) => {
-                    obj[`v${index}`] = item[v]
-                  })
-
-                  return {
-                    row: v,
-                    ...obj
-                  }
-                })
-              } else if (item.type === 'summary') {
-                dynamicData = Object.keys(res.data[0]).map(item => {
-                  return {
-                    key: item,
-                    value: res.data[0][item]
-                  }
-                })
-              } else {
-                if (item.dataX && item.dataY.length) {
-                  list.forEach(i => {
-                    let obj = {}
-                    item.dataY.forEach(v => {
-                      obj[v] = i[v]
-                    })
-                    dynamicData.push({
-                      [item.dataX]: i[item.dataX],
-                      ...obj
-                    })
-                  })
+            } else if (item.type === 'summary') {
+              dynamicData = Object.keys(res.data[0]).map(item => {
+                return {
+                  key: item,
+                  value: res.data[0][item]
                 }
+              })
+            } else {
+              if (item.dataX && item.dataY.length) {
+                list.forEach(i => {
+                  let obj = {}
+                  item.dataY.forEach(v => {
+                    obj[v] = i[v]
+                  })
+                  dynamicData.push({
+                    [item.dataX]: i[item.dataX],
+                    ...obj
+                  })
+                })
               }
-
-              this.$set(this.componentList[index], item.dataType, dynamicData)
             }
-          }
-        })
-      },
 
-      close() {
-        this.$emit('close')
-      }
+            this.$set(this.componentList[index], item.dataType, dynamicData)
+          }
+        }
+      })
+    },
+
+    close() {
+      this.$emit('close')
     }
   }
+}
 </script>
 
 <style lang="scss">