大屏应用位置整合

examples/main.js

@@ -9,10 +9,12 @@ import 'dvcp-ui/lib/styles/common.scss';
 import 'dvcp-ui/lib/dvcp-ui.css';
 import store from './store';
 import dataV from '@jiaminghi/data-view';
+import dvui from '../project/dvui/entries'
 
 Vue.use(dataV);
 Vue.use(ui);
 Vue.use(vcUI);
+Vue.use(dvui)
 //富文本编辑器配置
 Vue.config.productionTip = false;
 Vue.prototype.$axios = axios;

package.json

@@ -10,7 +10,7 @@
     "lib:core": "vue-cli-service build --target lib --dest core/dist core/index.js --name dvcp-core&&npm unpublish dvcp-core --force&&npm publish core/",
     "lib:project": "node project/build.js",
     "lib:all": "node project/allProject.js&&npm unpublish --workspaces --force&&npm publish --workspaces",
-    "ui": "npm i dvcp-ui@latest dvcp-dv-ui@latest"
+    "ui": "npm i dvcp-ui@latest"
   },
   "workspaces": [
     "project/*"
@@ -20,8 +20,6 @@
     "@jiaminghi/data-view": "^2.10.0",
     "bin-code-editor": "^0.9.0",
     "dayjs": "^1.8.35",
-    "dvcp-dv": "^1.0.0",
-    "dvcp-dv-ui": "file:project/dvui",
     "dvcp-ui": "^1.42.2",
     "echarts": "^5.1.2",
     "mp4box": "^0.4.1",

packages/bigscreen/designer/AppDesigner.vue

@@ -6,32 +6,28 @@
     <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 :instance="instance" :dict="dict" :permissions="permissions" />
+          <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" :permissions="permissions" @change="onChange"></Add>
+  <Add v-else-if="componentName === 'Add'" :urlPrefix="urlPrefix" :areaId="areaId" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
-  <SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></SourceData>
+       @change="onChange"></Add>
+  <SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
+              @change="onChange"></SourceData>
 </template>
 
 <script>
 import List from './components/List.vue'
 import Add from './components/Add'
 import SourceData from './components/SourceData'
-import dvui from '../../../project/dvui/entries'
+
-import Vue from "vue";
- 
-Vue.use(dvui)
 export default {
-  name: 'AppDesigner' ,
+  name: 'AppDesigner',
   label: '大屏设计',
- 
+
-  components: {
+  components: {List, Add, SourceData},
-    List,
-    Add,
-    SourceData
-  },
 
   props: {
     instance: Function,
@@ -84,8 +80,6 @@ export default {
       }
     }
   },
-  created() {
-  }
 }
 </script>
 

packages/bigscreen/designer/components/Add.vue

@@ -33,14 +33,14 @@
           </template>
           <template #content>
             <ai-table
-              :tableData="tableData"
+                :tableData="tableData"
-              :col-configs="colConfigs"
+                :col-configs="colConfigs"
-              :total="total"
+                :total="total"
-              style="margin-top: 6px;"
+                style="margin-top: 6px;"
-              :border="true"
+                :border="true"
-              row-key="id"
+                row-key="id"
-              :isShowPagination="false"
+                :isShowPagination="false"
-              @getList="() => {}">
+                @getList="() => {}">
               <el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
                 <template slot-scope="{ row, column, $index }">
                   <div class="table-options">
@@ -55,22 +55,22 @@
         </ai-card>
       </el-form>
       <Layout
-        v-if="isShowLayout"
+          v-if="isShowLayout"
-        :instance="instance"
+          :instance="instance"
-        :dict="dict"
+          :dict="dict"
-        :params="query"
+          :params="query"
-        @change="onChange"
+          @change="onChange"
-        :urlPrefix="urlPrefix"
+          :urlPrefix="urlPrefix"
-        :theme="config.theme"
+          :theme="config.theme"
-        @close="isShowLayout = false">
+          @close="isShowLayout = false">
       </Layout>
       <ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="screenId = false" v-if="screenId" :title="form.name">
-        <AiDvBackground
+        <ai-dv-background
-          :theme="config.theme"
+            :theme="config.theme"
-          v-if="config.length || config.theme === '1'"
+            v-if="config.length || config.theme === '1'"
-          :src="config.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : config.backgroundImage[0].url">
+            :src="config.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : config.backgroundImage[0].url">
-        </AiDvBackground>
+        </ai-dv-background>
-        <AppGigscreenViewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"></AppGigscreenViewer>
+        <app-gigscreen-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/>
       </ai-dv-wrapper>
       <ai-dialog :visible.sync="dialog" title="定制大屏" @closed="custom={}" @onConfirm="handleCustomizedDV">
         <el-form ref="CustomDVFrom" size="small" :model="custom" :rules="rules" label-width="80px">
@@ -94,29 +94,22 @@
 </template>
 
 <script>
-import AppGigscreenViewer from '../../viewer/AppGigscreenViewer'
 import Layout from './Layout.vue'
 import Sortable from 'sortablejs'
+import AppGigscreenViewer from "../../viewer/AppGigscreenViewer";
 
 export default {
   name: 'Add',
-
   props: {
     instance: Function,
     dict: Object,
     params: Object,
     urlPrefix: String
   },
-
   inject: {
-    home:{default: ''}
+    home: {default: ''}
   },
-
+  components: {AppGigscreenViewer, Layout},
-  components: {
-    Layout,
-    AppGigscreenViewer
-  },
-
   data() {
     return {
       info: {},
@@ -158,7 +151,7 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
 
   },
 
@@ -194,7 +187,7 @@ export default {
       const tbody = document.querySelector('.el-table__body-wrapper tbody')
       const _this = this
       Sortable.create(tbody, {
-        onEnd({ newIndex, oldIndex }) {
+        onEnd({newIndex, oldIndex}) {
           const currRow = _this.tableData.splice(oldIndex, 1)[0]
           _this.tableData.splice(newIndex, 0, currRow)
         }

packages/bigscreen/designer/components/Layout.vue

@@ -91,7 +91,7 @@
                       <div class="coordinate-top"></div>
                       <div class="coordinate-label">{{ item.left }}, {{ item.top }}</div>
                     </div>
-                    <RenderElement :data="item" :theme="dashboard.theme" :index="index"></RenderElement>
+                    <ai-dv-render :data="item" :theme="dashboard.theme" :index="index"/>
                   </vue-draggable-resizable>
                 </div>
               </ai-dv-wrapper>
@@ -335,12 +335,12 @@
     </ai-dialog>
     <ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加素材" @closed="form.images = []" @onConfirm="onImageConfirm">
       <ai-uploader
-        :instance="instance"
+          :instance="instance"
-        v-model="form.images"
+          v-model="form.images"
-        fileType="file"
+          fileType="file"
-        :maxSize="100"
+          :maxSize="100"
-        url="/admin/file/add-unlimited"
+          url="/admin/file/add-unlimited"
-        :limit="9">
+          :limit="9">
       </ai-uploader>
     </ai-dialog>
   </div>
@@ -353,7 +353,6 @@ import VueRulerTool from 'vue-ruler-tool'
 import VueDraggableResizable from 'vue-draggable-resizable'
 import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 import DataConfig from './form/DataConfig.vue'
-import RenderElement from './RenderElement'
 
 export default {
   props: {
@@ -366,7 +365,7 @@ export default {
   data() {
     return {
       colConfigs: [
-        { prop: 'url', label: '图片链接', showOverflowTooltip: false },
+        {prop: 'url', label: '图片链接', showOverflowTooltip: false},
         // {slot: 'img', label: '图片'}
       ],
       form: {
@@ -416,7 +415,6 @@ export default {
   },
 
   components: {
-    RenderElement,
     DataConfig,
     VueRulerTool,
     VueDraggableResizable,

packages/bigscreen/viewer/AppGigscreenViewer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="AppGigscreenViewer">
+  <section class="AppGigscreenViewer">
     <div v-if="!component">
       <div
           class="component-item"
@@ -14,21 +14,18 @@
         }"
           v-for="(item, index) in componentList"
           :key="index">
-        <RenderElement :instance="instance" :data="item" :index="index" :theme="dashboard.theme"></RenderElement>
+        <ai-dv-render :instance="instance" :data="item" :index="index" :theme="dashboard.theme"/>
       </div>
     </div>
     <components v-else :is="component" :dict="dict" :instance="instance" :nav="meta"/>
-  </div>
+  </section>
 </template>
 
 <script>
 
-import RenderElement from '../designer/components/RenderElement'
-
 export default {
   name: 'AppGigscreenViewer',
   label: '大屏预览',
-
   props: {
     instance: Function,
     dict: Object,
@@ -38,17 +35,11 @@ export default {
       default: '/app'
     }
   },
-
   watch: {
     id(v) {
       this.getInfo(v)
     }
   },
-
-  components: {
-    RenderElement
-  },
-
   data() {
     return {
       component: '',
@@ -65,32 +56,25 @@ export default {
       meta: {}
     }
   },
-
   created() {
     this.getInfo(this.id)
-
-    // this.scale = document.body.clientWidth / 1920
   },
-
   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 => {
+      id && this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
         if (res?.data) {
           const config = JSON.parse(res.data.config)
           if (config.custom) {
@@ -123,7 +107,6 @@ export default {
         }
       })
     },
-
     getSourceData(item, index) {
       const api = item.dataType === 'apiData' ? item.api : `${this.urlPrefix}/appdiylargescreen/statisticsByLsid?id=${item.sourceDataId}`
       this.instance.post(api).then(res => {

packages/index.js

@@ -5,6 +5,7 @@
  * @param params showList:打印加载的应用;apps:加载的应用文件名数组
  */
 import core from './core.import'
+import dvui from '../project/dvui/entries'
 
 const install = function (Vue, params) {
   if (install.installed) return
@@ -31,6 +32,7 @@ const install = function (Vue, params) {
     apps.push(app.component)
     Vue.component(app.name, app.component)
   })
+  Vue.use(dvui)
   return Promise.resolve(apps)
 }
 

project/dvui/AppDVDemo.vue

@@ -1,157 +0,0 @@
-<template>
-  <section class="AppDVDemo">
-    <ai-list>
-      <ai-title slot="title" title="数据大屏草稿板" isShowBottomBorder/>
-      <template #content>
-        <div class="showPanel">
-          <ai-dv-wrapper :views="views" v-model="active">
-            <ai-echart :ops="ops" :data="views" theme="1"></ai-echart>
-          </ai-dv-wrapper>
-        </div>
-      </template>
-    </ai-list>
-  </section>
-</template>
-
-<script>
-
-import AiDvWrapper from "./layout/AiDvWrapper/AiDvWrapper";
-import ops from './components/AiEchart/template/pie/pieChart3'
-import AiDvPanel from "./layout/AiDvPanel/AiDvPanel";
-import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
-import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
-import AiMonitor from "./components/AiMonitor/AiMonitor";
-
-export default {
-  name: "AppDVDemo",
-  label: "数据大屏草稿板",
-  components: {AiMonitor, AiDvPanel, AiDvWrapper, AiDvDisplay, AiDvSummary},
-  data() {
-    return {
-      ops,
-      active: '',
-      views: [
-        {
-          "name": "阿斯达",
-          "v1": 23,
-          "v2": 33
-        },
-        {
-          "name": "水电费",
-          "v1": 12,
-          "v2": 34
-        },
-        {
-          "name": "凡哥",
-          "v1": 67,
-          "v2": 25
-        },
-        {
-          "name": "党费",
-          "v1": 98,
-          "v2": 85
-        }
-      ],
-      list: [
-        {name: '阿斯达', v1: 23, v2: 33},
-        {name: '水电费', v1: 12, v2: 34},
-        {name: '凡哥', v1: 67, v2: 25},
-        {name: '党费', v1: 98, v2: 85},
-        {name: '阿萨德', v1: 98, v2: 85},
-        {name: '电饭锅', v1: 98, v2: 85},
-        {name: '户籍科', v1: 98, v2: 85},
-      ],
-      data: [
-        {
-          "key": "阿斯达",
-          "value": '22',
-          "percentage": 33,
-          text: '同比上月'
-        },
-        {
-          "key": "阿斯达",
-          "value": '22',
-          "percentage": -33,
-          text: '同比上月'
-        }
-      ],
-      value: [
-        {
-          "key": "宅基地 ",
-          "value": 1252292,
-          "value1": 12592,
-          "value2": 12592,
-          "value3": 12592,
-          "value4": 12592
-        },
-        {
-          "key": "人数",
-          "value": 12592,
-          "value1": 12592,
-          "value2": 12592,
-          "value3": 12592,
-          "value4": 12592
-        },
-        {
-          "key": "户数 ",
-          "value": 12592,
-          "value1": 12592,
-          "value2": 12592,
-          "value3": 12592,
-          "value4": 12592
-        },
-        {
-          "key": "村社区",
-          "value": 12592,
-          "value1": 12592,
-          "value2": 12592,
-          "value3": 12592,
-          "value4": 12592
-        }
-      ],
-      markers: []
-    }
-  },
-  methods: {
-    getMarkers() {
-      this.$request.post('/app/appcommunitybuildinginfo/listByBuildingAndHomestead', null, {
-        params: {current: 1, size: 1000000},
-        withoutToken: true
-      }).then(res => {
-        if (res?.data) {
-          this.markers = res.data.map(e => ({
-            ...e,
-            icon: "https://cdn.cunwuyun.cn/dvcp/dv/monitor.svg",
-            label: e.communityName
-          }))
-        }
-      })
-    }
-  },
-  created() {
-    // this.getMarkers()
-    setTimeout(() => {
-      this.list = this.list.map(e => ({name: e.name, '电费': e.v1, '水费': e.v2 * 2}))
-    }, 2000)
-  },
-  mounted() {
-    this.$initWxOpenData()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./lib/animation";
-
-.AppDVDemo {
-  height: 100%;
-
-  .showPanel {
-    height: 600px;
-  }
-
-  .AiDvPanel {
-    width: 600px;
-  }
-}
-</style>

project/dvui/components/AiDvRender.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="render-element" style="width: 100%; height: 100%;">
+  <div class="AiDvRender" style="width: 100%; height: 100%;">
     <ai-dv-display v-if="data.type === 'display'" :title="data.title" :list="values"></ai-dv-display>
     <ai-dv-panel
         style="height: 100%; width: 100%;"
@@ -137,9 +137,9 @@
           :ops="pieChart3"/>
       <ai-map :markers="values" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
               :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"/>
-      <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"></ai-monitor>
+      <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
-      <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"></video>
+      <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"/>
-      <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"></AiDvPartyOrg>
+      <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"/>
     </ai-dv-panel>
   </div>
 </template>
@@ -147,19 +147,26 @@
 <script>
 import {mapState} from 'vuex'
 import AiSwiper from './AiSwiper.vue'
-import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
+import pieChart from './AiEchart/template/pie/pieChart2'
-import pieChart1 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart1'
+import pieChart1 from './AiEchart/template/pie/pieChart1'
-import pieChart3 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart3'
+import pieChart3 from './AiEchart/template/pie/pieChart3'
-import lineChart1 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart1'
+import lineChart1 from './AiEchart/template/line/lineChart1'
-import lineChart2 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart2'
+import lineChart2 from './AiEchart/template/line/lineChart2'
-import lineChart5 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart5'
+import lineChart5 from './AiEchart/template/line/lineChart5'
+import AiMonitor from "./AiMonitor/AiMonitor";
+import AiDvPanel from "../layout/AiDvPanel/AiDvPanel";
+import AiDvDisplay from "../layout/AiDvDisplay/AiDvDisplay";
+import AiDvSummary from "../layout/AiDvSummary/AiDvSummary";
+
 
 export default {
-  name: 'RenderElement',
+  name: 'AiDvRender',
-
   props: ['data', 'index', 'theme', 'instance'],
-
   components: {
+    AiDvSummary,
+    AiDvDisplay,
+    AiDvPanel,
+    AiMonitor,
     AiSwiper
   },
 
@@ -179,12 +186,12 @@ export default {
   computed: {
     ...mapState(['user']),
 
-    values () {
+    values() {
       if (!this.data) {
         return []
       }
 
-      return this.data.type ==='map' ? this.data[this.data.dataType].map(e => {
+      return this.data.type === 'map' ? this.data[this.data.dataType].map(e => {
         return {...e, lng: e['经度'], lat: e['纬度'], label: e['地区名称']}
       }) : this.data[this.data.dataType]
     }
@@ -230,7 +237,7 @@ export default {
       if (AMap) {
         let infoWin = new AMap.InfoWindow({content: ""})
         map.clearMap()
-        let markers = this.values.filter(e=>e.lng).map(e => {
+        let markers = this.values.filter(e => e.lng).map(e => {
           return new AMap.Marker({
             map,
             label: e.label,
@@ -267,7 +274,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.render-element {
+.AiDvRender {
   ::v-deep .dvScrollBoard1 {
 
     .header {