单独构建大屏ui库,避免引入混乱

This commit is contained in:
aixianling
2024-04-12 10:22:47 +08:00
parent a4d4e3cea5
commit b5523f5f40
191 changed files with 374 additions and 355 deletions

View File

@@ -164,10 +164,11 @@ import 'brace/theme/monokai';
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
import AiFold from "dui/packages/layout/AiFold.vue";
import ChartPicker from "./chartPicker.vue";
import {DvCompData, monitorTypes} from "../config";
import {monitorTypes} from "../config";
import ConfigItem from "./configItem.vue";
import DatasourcePicker from "./datasourcePicker.vue";
import AiSelect from "dui/packages/basic/AiSelect.vue";
import {DvCompData} from "@dui/dv";
export default {
name: 'dataConfig',

View File

@@ -214,10 +214,12 @@
<script>
import ConfigItem from "./configItem.vue";
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
import AiDialogBtn from "dui/packages/layout/AiDialogBtn";
import {monitorTypes} from "../config";
import JsonEditor from "./jsonEditor.vue";
import ChartPicker from "./chartPicker.vue";
import AiDvSummary from "@dui/dv/layout/AiDvSummary/AiDvSummary";
import Vue from "vue";
export default {
name: 'componentConfig',
@@ -242,6 +244,9 @@ export default {
},
computed: {
summaryList: () => Object.keys(AiDvSummary.components)
},
created() {
console.log(Vue.component("AiDvSummary"))
}
}
</script>

View File

@@ -28,13 +28,13 @@
<script>
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
import ConfigItem from "./configItem.vue";
import {DvCompData} from "../config";
import CodeEditor from 'bin-ace-editor'
import 'brace/mode/json'
import 'brace/snippets/json';
import 'brace/theme/github';
import 'brace/theme/monokai';
import JsonEditor from "./jsonEditor.vue";
import {DvCompData} from "@dui/dv";
export default {
name: "datasourcePicker",

View File

@@ -411,7 +411,54 @@ export const chartTpl = [{
staticData: {name: '综合调处率', label: "累计调解成功", v1: 23, totalLabel: "累计排查受理", total: 33},
},]
}]
const maps = [{
type: 'map',
label: '地图',
display: 'map',
width: 840,
height: 534,
left: 0,
top: 0,
mask: '2',
pulseLines: '1',
mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
areaId: '',
zIndex: 1,
apiData: [],
dataType: 'staticData',
dynamicData: [],
staticData: [{
label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
}],
api: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0',
limitArea: '0',
layers: 'vector'
}, {
type: 'AiDvMap',
label: '地图',
display: 'map',
width: 840,
height: 534,
left: 0,
top: 0,
mask: '2',
pulseLines: '1',
mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
areaId: '',
zIndex: 1,
apiData: [],
dataType: 'staticData',
dynamicData: [],
staticData: [{
label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
}],
api: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0',
limitArea: '0',
}, {type: "linkageMap", label: "联动地图", width: 800, height: 964, top: 0, left: 560}]
const customHtml = {
label: "HTML块", type: "html", list: [{
type: 'html',
@@ -536,327 +583,196 @@ const components = [{
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}]
}]
},
{
label: "AI", list: [
{
}, {
label: "AI", list: [
{
label: "AI助手",
list: [{
type: "aiAssist",
label: "AI助手",
list: [{
type: "aiAssist",
label: "AI助手",
width: 134,
height: 140,
zIndex: 1,
title: "AI助手",
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"
}]
}
]
},
{
label: '其他', list: [
{
label: "图片", list: [
{
label: "普通图片",
type: "img",
width: 500,
height: 400,
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png"
}
]
},
{
label: '地图', type: 'map', list: [{
type: 'map',
label: '地图',
display: 'map',
width: 840,
height: 534,
left: 0,
top: 0,
mask: '2',
pulseLines: '1',
mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
areaId: '',
zIndex: 1,
apiData: [],
dataType: 'staticData',
dynamicData: [],
staticData: [{
label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
}],
api: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0',
limitArea: '0',
layers: 'vector'
}, {
type: 'AiDvMap',
label: '地图',
display: 'map',
width: 840,
height: 534,
left: 0,
top: 0,
mask: '2',
pulseLines: '1',
mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
areaId: '',
zIndex: 1,
apiData: [],
dataType: 'staticData',
dynamicData: [],
staticData: [{
label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
}],
api: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0',
limitArea: '0',
}]
}, {
label: '党组织', type: 'partyOrg', list: [{
type: 'partyOrg',
label: '党组织',
width: 840,
height: 800,
zIndex: 1,
top: 0,
left: 0,
dataX: '',
dataY: [],
title: '党组织',
border: 'border3',
sourceDataId: '',
dataType: 'staticData',
staticData: [{
key: '个人服务办理', value: 247
}, {
key: '同比上月', value: 247
}],
dynamicData: [],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}]
}, {
label: '边框', type: 'panel', list: [{
type: 'panel',
label: '边框',
title: '边框',
border: 'border0',
width: 400,
width: 134,
height: 140,
zIndex: 1,
title: "AI助手",
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"
}]
}
]
}, {
label: '其他', list: [
{
label: "图片", list: [
{
label: "普通图片",
type: "img",
width: 500,
height: 400,
isZoom: false,
zIndex: 1,
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
}]
}, {
label: '装饰', type: 'display', list: [{
type: 'display',
label: '装饰',
display: 'display0',
width: 840,
height: 540,
isZoom: false,
zIndex: 1,
title: '标题',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
sourceDataId: '',
dataType: 'staticData',
staticData: [{
label: '个人服务办理', value: 247
}, {
label: '同比上月', value: 247
}]
}]
}, {
label: '轮播图', list: [{
type: 'swiper',
label: '轮播图',
width: 400,
height: 300,
zIndex: 1,
border: 'border2',
dataType: 'staticData',
staticData: [{
img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', title: '湖羊', content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
}],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png"
}
]
},
{label: '地图', list: maps}, {
label: '党组织', type: 'partyOrg', list: [{
type: 'partyOrg',
label: '党组织',
width: 840,
height: 800,
zIndex: 1,
top: 0,
left: 0,
dataX: '',
dataY: [],
title: '党组织',
border: 'border3',
sourceDataId: '',
dataType: 'staticData',
staticData: [{
key: '个人服务办理', value: 247
}, {
type: 'swiper',
label: '轮播图(点指示器)',
width: 800,
height: 358,
zIndex: 1,
border: 'border14',
dataType: 'staticData',
staticData: [{
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
}, {
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
},],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
dotIndicator: true
key: '同比上月', value: 247
}],
dynamicData: [],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}]
}, {
label: '边框', type: 'panel', list: [{
type: 'panel',
label: '边框',
title: '边框',
border: 'border0',
width: 400,
height: 400,
isZoom: false,
zIndex: 1,
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
}]
}, {
label: '装饰', type: 'display', list: [{
type: 'display',
label: '装饰',
display: 'display0',
width: 840,
height: 540,
isZoom: false,
zIndex: 1,
title: '标题',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
sourceDataId: '',
dataType: 'staticData',
staticData: [{
label: '个人服务办理', value: 247
}, {
label: '同比上月', value: 247
}]
}]
}, {
label: '轮播图', list: [{
type: 'swiper',
label: '轮播图',
width: 400,
height: 300,
zIndex: 1,
border: 'border2',
dataType: 'staticData',
staticData: [{
img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', title: '湖羊', content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
}],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
}, {
label: '视频播放器', type: 'video', list: [{
type: 'video',
label: '视频播放器',
width: 400,
height: 300,
zIndex: 1,
type: 'swiper',
label: '轮播图(点指示器)',
width: 800,
height: 358,
zIndex: 1,
border: 'border14',
dataType: 'staticData',
staticData: [{
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
}, {
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
},],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
dotIndicator: true
}]
}, {
label: '视频播放器', type: 'video', list: [{
type: 'video',
label: '视频播放器',
width: 400,
height: 300,
zIndex: 1,
src: '',
border: 'border2',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
}]
}, {
label: '数据统计', type: 'summary', list: [{
type: 'summary',
label: '数据统计',
display: 'summary0',
width: 480,
height: 240,
zIndex: 1,
top: 0,
left: 0,
dataX: '',
dataY: [],
summaryTitle: '',
border: 'border3',
sourceDataId: '',
title: '数据统计',
dataType: 'staticData',
staticData: [{
key: '个人服务办理', value: 247
}, {
key: '同比上月', value: 247
}],
dynamicData: [],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}]
}, {
label: '视频监控', list: [
{
type: 'monitor',
label: '视频监控',
src: '',
border: 'border2',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
}]
}, {
label: '数据统计', type: 'summary', list: [{
type: 'summary',
label: '数据统计',
display: 'summary0',
width: 480,
height: 240,
zIndex: 1,
top: 0,
left: 0,
dataX: '',
dataY: [],
summaryTitle: '',
border: 'border3',
title: '',
moniterId: '',
monitorType: 'cmcc',
api: '/app/appzyvideoequipment/list2',
border: 'border2',
sourceDataId: '',
title: '数据统计',
dataType: 'staticData',
staticData: [{
key: '个人服务办理', value: 247
}, {
key: '同比上月', value: 247
}],
dynamicData: [],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}]
}, {
label: '视频监控', list: [
{
type: 'monitor',
label: '视频监控',
src: '',
width: 480,
height: 240,
zIndex: 1,
top: 0,
left: 0,
title: '',
moniterId: '',
monitorType: 'cmcc',
api: '/app/appzyvideoequipment/list2',
border: 'border2',
sourceDataId: '',
dataType: 'staticData',
staticData: '',
dynamicData: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
},
{
type: "monitorCarousel",
label: "视频轮播",
width: 480,
height: 480,
zIndex: 1,
title: "视频轮播",
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png"
}
]
}, customHtml]
}]
staticData: '',
dynamicData: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
},
{
type: "monitorCarousel",
label: "视频轮播",
width: 480,
height: 480,
zIndex: 1,
title: "视频轮播",
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png"
}
]
}, customHtml]
}]
export {components}
/**
* 大屏组件数据类
*/
export class DvCompData {
static types = {
staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据", htmlData: "HTML数据"
}
constructor(type, dataConfig = {}, instance) {
this.instance = instance
this.type = type
this.params = dataConfig
}
getData() {
return this.type == 'staticData' ? this.getStaticData() :
this.type == 'htmlData' ? this.getStaticData() :
this.type == 'dynamicData' ? this.getDynamicData() :
this.type == 'apiData' ? this.getApiData() : []
}
getDynamicData() {
const {sourceDataId: id} = this.params
return id ? this.getAsyncData(`/app/appdiylargescreen/statisticsByLsid?id=${id}`) : Promise.reject("未获取到数据源id")
}
getStaticData() {
const {staticData} = this.params
return new Promise((resolve, reject) => {
staticData ? resolve(staticData) : reject("未获取到静态数据")
})
}
getApiData() {
const {api} = this.params
return api ? this.getAsyncData(api) : Promise.reject("未获取到api")
}
getAsyncData(api) {
return this.instance.post(api).then(res => {
if (res?.data) {
const list = res.data,
firstRecord = list?.[0] || {},
keys = Object.keys(firstRecord)
let meta = []
if (['AiDvTable', 'table'].includes(this.params.type)) {
meta = keys.map(v => {
let obj = {}
list.forEach((item, index) => {
obj[`v${index}`] = item[v]
})
return {row: v, ...obj}
})
} else if (this.params.type === 'summary') {
if (this.params.display === 'summary9') {
meta = res.data
} else {
meta = keys.map(key => ({key, value: firstRecord[key]}))
}
} else if (this.type === 'dynamicData' && !this.params.dataX && this.params.dataY?.length <= 0) {
meta = keys.map(key => ({key, value: firstRecord[key]}))
} else {
if (this.params.dataX && this.params.dataY.length) {
list.forEach(i => {
let obj = {}
this.params.dataY.forEach(v => obj[v] = i[v])
meta.push({
[this.params.dataX]: i[this.params.dataX], ...obj
})
})
} else {
meta = res.data
}
}
return meta
}
})
}
}
/**
* 监控类型
*/