kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏应用位置整合

Browse Source
This commit is contained in:
aixianling
2022-06-24 13:51:32 +08:00
parent 05db88644c
commit 8e04ec040a
14 changed files with 78 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/main.js
View File

@@ -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;

4
package.json
View File

@@ -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",

26
packages/bigscreen/designer/AppDesigner.vue
View File

@@ -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>
<SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></SourceData>
<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" :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: {
List,
Add,
SourceData
},
components: {List, Add, SourceData},
props: {
instance: Function,
@@ -84,8 +80,6 @@ export default {
}
}
},
created() {
}
}
</script>

61
packages/bigscreen/designer/components/Add.vue
View File

@@ -33,14 +33,14 @@
</template>
<template #content>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
style="margin-top: 6px;"
:border="true"
row-key="id"
:isShowPagination="false"
@getList="() => {}">
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
style="margin-top: 6px;"
:border="true"
row-key="id"
:isShowPagination="false"
@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"
:instance="instance"
:dict="dict"
:params="query"
@change="onChange"
:urlPrefix="urlPrefix"
:theme="config.theme"
@close="isShowLayout = false">
v-if="isShowLayout"
:instance="instance"
:dict="dict"
:params="query"
@change="onChange"
:urlPrefix="urlPrefix"
:theme="config.theme"
@close="isShowLayout = false">
</Layout>
<ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="screenId = false" v-if="screenId" :title="form.name">
<AiDvBackground
:theme="config.theme"
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">
</AiDvBackground>
<AppGigscreenViewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"></AppGigscreenViewer>
<ai-dv-background
:theme="config.theme"
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">
</ai-dv-background>
<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: {
Layout,
AppGigscreenViewer
},
components: {AppGigscreenViewer, Layout},
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)
}

18
packages/bigscreen/designer/components/Layout.vue
View File

@@ -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"
v-model="form.images"
fileType="file"
:maxSize="100"
url="/admin/file/add-unlimited"
:limit="9">
:instance="instance"
v-model="form.images"
fileType="file"
:maxSize="100"
url="/admin/file/add-unlimited"
: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,

25
packages/bigscreen/viewer/AppGigscreenViewer.vue
View File

@@ -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 => {

2
packages/index.js
View File

@@ -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)
}

157
project/dvui/AppDVDemo.vue
View File

@@ -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>

0
packages/bigscreen/ui/AiDataPanel.vue → project/dvui/components/AiDataPanel.vue
View File

0
project/dvui/components/AiDvPartyOrg/AiDvPartyOrg.vue → project/dvui/components/AiDvPartyOrg.vue
View File

41
packages/bigscreen/designer/components/RenderElement.vue → project/dvui/components/AiDvRender.vue
View File

@@ -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>
<video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"></video>
<AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"></AiDvPartyOrg>
<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'"/>
<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 pieChart1 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart1'
import pieChart3 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart3'
import lineChart1 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart1'
import lineChart2 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart2'
import lineChart5 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart5'
import pieChart from './AiEchart/template/pie/pieChart2'
import pieChart1 from './AiEchart/template/pie/pieChart1'
import pieChart3 from './AiEchart/template/pie/pieChart3'
import lineChart1 from './AiEchart/template/line/lineChart1'
import lineChart2 from './AiEchart/template/line/lineChart2'
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 {

0
packages/bigscreen/ui/AiStaData.vue → project/dvui/components/AiStaData.vue
View File

0
packages/bigscreen/designer/components/AiSwiper.vue → project/dvui/components/AiSwiper.vue
View File

0
project/dvui/layout/AiDvBackground/AiDvBackground.vue → project/dvui/layout/AiDvBackground.vue
View File