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
2023-10-09 16:46:02 +08:00
parent d6d1b16a81
commit 3a9377fe4b
13 changed files with 185 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
packages/bigscreen/designer/components/Add.vue → packages/bigscreen/designer/Add.vue
View File

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

@@ -5,11 +5,11 @@
</template>
<script>
import List from './components/List.vue'
import Add from './components/Add'
import SourceData from './components/SourceData'
import Preview from "./components/preview";
import DesignDashboard from "./components/Layout";
import List from './List.vue'
import Add from './Add.vue'
import SourceData from './SourceData.vue'
import Preview from "./preview.vue";
import DesignDashboard from "./Layout.vue";
export default {
name: 'AppDesigner',

6
packages/bigscreen/designer/components/Layout.vue → packages/bigscreen/designer/Layout.vue
View File

@@ -224,12 +224,12 @@
<script>
import {components} from '../config'
import {components} from './config'
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 ComponentConfig from "./form/componentConfig";
import DataConfig from './components/DataConfig.vue'
import ComponentConfig from "./components/componentConfig.vue";
import {mapActions} from "vuex"
export default {

0
packages/bigscreen/designer/components/List.vue → packages/bigscreen/designer/List.vue
View File

0
packages/bigscreen/designer/components/SourceData.vue → packages/bigscreen/designer/SourceData.vue
View File

176
packages/bigscreen/designer/components/form/DataConfig.vue → packages/bigscreen/designer/components/DataConfig.vue
View File

@@ -13,7 +13,7 @@
</config-item>
</ai-fold>
<ai-fold title="标记点连线">
<ai-dialog-btn :modal="false" dialog-title="设置标记点连线" :customFooter="false" @onConfirm="savePolylines"
<ai-dialog-btn :modal="false" dialog-title="设置标记点连线" :customFooter="false" @confirm="savePolylines"
@open="handleMapPolylines">
<code-editor slot="btn" readonly :value="JSON.stringify(options.staticData.polylines, null, 2)" lang="json"
theme="github" width="100%" height="250" placeholder="测试默认值"/>
@@ -36,25 +36,8 @@
<config-item label="图表模板">
<chart-picker v-model="chart.chart"/>
</config-item>
<config-item label="数据类型">
<ai-select v-model="chart.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
</config-item>
<config-item v-if="chart.dataType=='dynamicData'" label="数据源">
<ai-select v-model="chart.sourceDataId" placeholder="请选择数据源" :select-list="sourceData"
:prop="{label:'description'}"/>
</config-item>
<div class="layout-config__code" v-else-if="chart.dataType === 'staticData'">
<ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false"
@confirm="chart.data=JSON.parse(json)"
@open="json=JSON.stringify(chart.data||null)">
<code-editor slot="btn" readonly :value="JSON.stringify(chart.data)" lang="json" theme="github"
width="100%" height="250"/>
<code-editor v-model="json" lang="json" theme="github" width="100%" height="440"/>
</ai-dialog-btn>
</div>
<config-item label="接口地址" v-else-if="chart.dataType=='apiData'">
<el-input size="mini" v-model="chart.api"/>
</config-item>
<datasource-picker v-model="chart.ds" :instance="instance"
@input="chart={...chart,...chart.ds},$emit('change')"/>
<config-item label="数据维度" v-if="chart.dataType !== 'staticData'">
<code-editor v-model="chart.djson" lang="json" theme="github" width="100%" height="100"
placeholder="参照echarts配置数据维度,为一个数组,数组的第一个值为维度值"
@@ -71,24 +54,7 @@
</div>
<div class="layout-config__group" v-else>
<h2>基础设置</h2>
<config-item label="数据类型">
<ai-select v-model="options.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
</config-item>
<div class="layout-config__code" v-if="options.dataType === 'staticData'">
<ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false" @onConfirm="onConfirm"
@open="showEditor">
<code-editor slot="btn" readonly :value="JSON.stringify(options.staticData)" lang="json" theme="github"
width="100%" height="250"/>
<code-editor v-model="json" lang="json" theme="github" width="100%" height="440"/>
</ai-dialog-btn>
</div>
<config-item v-else-if="options.dataType === 'dynamicData'" label="数据源">
<ai-select v-model="options.sourceDataId" placeholder="请选择数据源" :select-list="sourceData"
:prop="{label:'description'}" @change="onDataChange"/>
</config-item>
<config-item label="接口地址" v-else>
<el-input size="mini" v-model="options.api" @change="onApiChange"/>
</config-item>
<datasource-picker v-model="options" :instance="instance" @input="$emit('change')"/>
</div>
<div v-if="options.dataType!='staticData'&&options.type=='monitor'&&['cmcc','slw'].includes(options.monitorType)"
class="layout-config__group">
@@ -163,8 +129,10 @@ import 'brace/theme/github';
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} from "../../config";
import ChartPicker from "./chartPicker.vue";
import {DvCompData} from "../config";
import ConfigItem from "./configItem.vue";
import DatasourcePicker from "./datasourcePicker.vue";
export default {
name: 'dataConfig',
@@ -181,8 +149,6 @@ export default {
return {
dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
json: "",
sourceDataId: '',
sourceData: [],
keys: [],
monitorList: [],
list: [],
@@ -194,21 +160,12 @@ export default {
markers: v => v.options.staticData?.markers || [],
},
components: {
DatasourcePicker,
ConfigItem,
ChartPicker,
AiFold,
AiDialogBtn,
CodeEditor,
configItem: {
props: {
label: String
},
render(h) {
return h('div', {class: 'layout-config__item'}, [
h('label', this.label),
h('div', {class: 'layout-config__item--right fill'}, this.$slots.default)
])
}
}
},
created() {
if (this.options.type == "map" && Array.isArray(this.options.staticData)) {//处理历史数据,并更新最新数据结构
@@ -218,7 +175,6 @@ export default {
}
},
mounted() {
this.getDataList()
if ((this.options.dataY && this.options.dataY.length && this.options.dataX) || this.options.type === 'monitor') {
const api = this.options.dataType === 'apiData' ? this.options.api : `/app/appdiylargescreen/statisticsByLsid?id=${this.options.sourceDataId}`
this.instance.post(api).then(res => {
@@ -246,10 +202,6 @@ export default {
}
},
methods: {
showEditor() {
this.json = JSON.stringify(this.options.staticData, null, 2)
},
onMoniterId(e) {
this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${e}`).then(res => {
if (res.code == 0) {
@@ -257,64 +209,6 @@ export default {
}
})
},
getDataList() {
this.instance.post(`/app/appdiylargescreen/allDatasourceByPage`, null, {
params: {
current: 1,
size: 10000
}
}).then(res => {
if (res.code == 0) {
this.sourceData = res.data.records
}
})
},
onApiChange() {
this.options.dataX = ''
this.options.dataY = []
this.instance.post(this.options.api).then(res => {
if (res.code == 0) {
if (res.data.length) {
if (this.options.type === 'table' || this.options.type === 'AiDvTable') {
const keys = Object.keys(res.data[0])
const list = res.data
this.options.apiData = keys.map(v => {
let obj = {}
list.forEach((item, index) => {
obj[`v${index}`] = item[v]
})
return {
row: v,
...obj
}
})
} else if (this.options.type === 'summary') {
if (this.options.display === 'summary9') {
this.options.apiData = res.data
} else {
this.options.apiData = Object.keys(res.data[0]).map(item => {
return {
key: item,
value: res.data[0][item]
}
})
}
} else if (this.options.type === 'monitor') {
this.monitorList = res.data
} else {
this.list = res.data
this.keys = Object.keys(res.data[0])
}
}
} else {
this.options.dynamicData = []
}
})
},
onChooseChange() {
let arr = []
if (this.options.dataX && this.options.dataY.length) {
@@ -328,53 +222,9 @@ export default {
...obj
})
})
this.options[this.options.dataType] = arr
}
},
onDataChange(e) {
this.options.dataX = ''
this.options.dataY = []
this.instance.post(`/app/appdiylargescreen/statisticsByLsid?id=${e}`).then(res => {
if (res.code == 0) {
if (res.data.length) {
if (this.options.type === 'table' || this.options.type === 'AiDvTable') {
const keys = Object.keys(res.data[0])
const list = res.data
this.options.dynamicData = keys.map(v => {
let obj = {}
list.forEach((item, index) => {
obj[`v${index}`] = item[v]
})
return {
row: v,
...obj
}
})
} else if (this.options.type === 'summary') {
this.options.dynamicData = Object.keys(res.data[0]).map(item => {
return {
key: item,
value: res.data[0][item]
}
})
} else {
this.list = res.data
this.keys = Object.keys(res.data[0])
}
} else {
this.options.dynamicData = []
}
}
})
},
onConfirm() {
this.$set(this.options, 'staticData', JSON.parse(this.json))
this.$emit('change')
},
handleMapMarker(v = {}, index) {
this.form = this.$copy({...v, index})
this.showMapEditor = true
@@ -423,8 +273,6 @@ export default {
}
.layout-config__group--wrapper {
.layout-config__code .bin-ace-editor {
}
:deep(.layout-config__group) {
padding: 10px 10px 20px;
@@ -434,10 +282,6 @@ export default {
border: none;
}
.layout-config__code {
position: relative;
padding-left: 10px;
}
& > h2 {
margin-bottom: 20px;

0
packages/bigscreen/designer/components/form/componentConfig.vue → packages/bigscreen/designer/components/componentConfig.vue
View File

86
packages/bigscreen/designer/components/configItem.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<section class="configItem">
<label v-text="label"/>
<div class="content fill">
<slot v-if="$slots.default"/>
<div v-else-if="value" v-html="value"/>
</div>
</section>
</template>
<script>
export default {
name: "configItem",
props: {
label: String,
value: {default: null}
},
data() {
return {}
},
methods: {},
}
</script>
<style scoped lang="scss">
.configItem {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
& > label {
flex-shrink: 0;
width: 60px;
color: #FFFFFF;
font-size: 12px;
text-align: right;
}
.el-select .el-tag {
color: #fff;
background: transparent;
}
.el-input__icon {
color: #fff;
}
.el-switch__label {
color: #fff;
}
.el-select,.ai-select {
width: 100%;
&:last-child {
margin-right: 0;
}
input {
background: #262C33;
font-size: 12px;
color: #fff;
border: 1px solid #030411;
}
.el-input__icon {
color: #fff;
}
}
:deep(.el-collapse) {
height: 18px;
}
.content {
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
margin-left: 30px;
}
}
</style>

75
packages/bigscreen/designer/components/datasourcePicker.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<section class="datasourcePicker">
<config-item label="数据类型">
<ai-select v-model="options.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
</config-item>
<div class="codeEditor" v-if="['htmlData','staticData'].includes(options.dataType)">
<ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false"
@confirm="changeData" @open="content=contentstr">
<code-editor slot="btn" readonly :value="contentstr" :lang="dataLang" theme="github" width="100%" height="250"/>
<code-editor v-model="content" :lang="dataLang" theme="github" width="100%" height="440" wrap/>
</ai-dialog-btn>
</div>
<config-item v-else-if="options.dataType === 'dynamicData'" label="数据源">
<ai-select v-model="options.sourceDataId" placeholder="请选择数据源" :instance="instance"
:prop="{label:'description'}" @change="changeData"
action="/app/appdiylargescreen/allDatasourceByPage"/>
</config-item>
<config-item label="接口地址" v-else-if="options.dataType === 'apiData'">
<el-input size="small" v-model="options.api" @change="changeData" placeholder="请输入数据接口URL"/>
</config-item>
</section>
</template>
<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';
export default {
name: "datasourcePicker",
components: {ConfigItem, AiDialogBtn, CodeEditor},
model: {
event: "input",
prop: "options"
},
props: {
options: Object,
instance: Function
},
data() {
return {
dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
content: "",
sourceData: []
}
},
computed: {
contentstr: v => JSON.stringify(v.options.staticData),
dataLang: v => v.options.dataType == 'htmlData' ? 'html' : 'json'
},
methods: {
updateOptions() {
this.$emit("input", this.options)
},
changeData() {
new DvCompData(this.options.dataType, this.options, this.instance).getData().then(data => {
this.options[this.options.dataType] = data
this.updateOptions()
})
}
},
}
</script>
<style scoped lang="scss">
.datasourcePicker {
.codeEditor {
position: relative;
padding-left: 10px;
}
}
</style>

7
packages/bigscreen/designer/config.js
View File

@@ -699,7 +699,7 @@ export {components}
*/
export class DvCompData {
static types = {
staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据"
staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据", htmlData: "HTML数据"
}
constructor(type, dataConfig = {}, instance) {
@@ -710,8 +710,9 @@ export class DvCompData {
getData() {
return this.type == 'staticData' ? this.getStaticData() :
this.type == 'dynamicData' ? this.getDynamicData() :
this.type == 'apiData' ? this.getApiData() : []
this.type == 'htmlData' ? this.getStaticData() :
this.type == 'dynamicData' ? this.getDynamicData() :
this.type == 'apiData' ? this.getApiData() : []
}
getDynamicData() {

0
packages/bigscreen/designer/components/preview.vue → packages/bigscreen/designer/preview.vue
View File