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-08 18:16:51 +08:00
parent 4eeb00b093
commit 872e7afdd3
6 changed files with 841 additions and 909 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/AiDvRender.vue
View File

@@ -24,15 +24,7 @@
:key="`chart-${index}`" :key="`chart-${index}`"
:theme="theme" :theme="theme"
:data="values" :data="values"
:ops="chartList[data.config]"/> :ops="$echartTpls[data.config]"/>
<!-- <ai-q-map
v-else-if="currentType=='map'"
:area-id="data.areaId"
:markers="markers"
:is3d="data.is3D === '1'"
:limitArea="data.limitArea === '1'"
:is3dAround="data.is3dAround === '1'">
</ai-q-map> -->
<AiDvTable <AiDvTable
v-else-if="currentType === 'AiDvTable'" v-else-if="currentType === 'AiDvTable'"
:heigth="'100%'" :heigth="'100%'"
@@ -66,7 +58,7 @@
v-else-if="currentType === 'video'"/> v-else-if="currentType === 'video'"/>
<AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="currentType === 'partyOrg'" :instance="instance"/> <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="currentType === 'partyOrg'" :instance="instance"/>
<!-- <ai-sprite v-else-if="/building/.test(currentType)" v-bind="data" is3D @init="mods[currentType]"/> --> <!-- <ai-sprite v-else-if="/building/.test(currentType)" v-bind="data" is3D @init="mods[currentType]"/> -->
<ai-dv-plot v-else-if="currentType=='plot'" :options="data.charts"/> <ai-dv-plot v-else-if="currentType=='plot'" :options="data.charts" :instance="instance"/>
</ai-dv-panel> </ai-dv-panel>
</div> </div>
</template> </template>
@@ -76,7 +68,6 @@ import {scrollBoard} from '@jiaminghi/data-view'
import Vue from "vue" import Vue from "vue"
import {mapState} from 'vuex' import {mapState} from 'vuex'
import AiDvMap from "./AiDvMap"; import AiDvMap from "./AiDvMap";
import chartList from './AiEchart/echartTpls'
import AiMonitor from "./AiMonitor/AiMonitor"; import AiMonitor from "./AiMonitor/AiMonitor";
import AiSwiper from './AiSwiper.vue' import AiSwiper from './AiSwiper.vue'
import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay"; import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
@@ -102,7 +93,6 @@ export default {
data() { data() {
return { return {
// mods, // mods,
chartList,
map: null, map: null,
lib: null, lib: null,
timer: null, timer: null,

2
components/index.js
View File

@@ -14,7 +14,7 @@ const install = function (Vue) {
}) })
Vue.prototype.MODEL = model Vue.prototype.MODEL = model
} }
Vue.prototype.$echartTpls = require("./AiEchart/echartTpls") Vue.prototype.$echartTpls = require("./AiEchart/echartTpls").default
// 遍历注册全局组件 // 遍历注册全局组件
let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/); let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/);
if (contexts) { if (contexts) {

75
components/layout/AiDvPlot/AiDvPlot.vue
View File

@@ -1,29 +1,89 @@
<template> <template>
<section class="AiDvPlot"> <section class="AiDvPlot">
<ai-select class="plotPicker" v-model="current" :select-list="charts" @change="handleChangeChart"/> <ai-select class="plotPicker" v-model="current" :select-list="charts" @change="handleChangeChart"/>
<div ref="DvPlot"/> <div class="plotChart" ref="DvPlot"/>
</section> </section>
</template> </template>
<script> <script>
import * as echarts from 'echarts'
import {DvCompData} from "../../../packages/bigscreen/designer/config";
export default { export default {
name: "AiDvPlot", name: "AiDvPlot",
props: { props: {
options: {default: () => []} options: {default: () => []},
instance: Function
}, },
data() { data() {
return { return {
current: 0 current: 0,
chart: null
} }
}, },
computed: { computed: {
charts: v => v.options.map((e, id) => ({id, label: e.title})), charts: v => v.options.map((e, id) => ({id, label: e.title})),
plot: v => v.options[v.current] plot: v => v.options[v.current],
tpl: v => v.$echartTpls[v.plot.chart]
}, },
methods: { methods: {
initChart() {
this.chart = echarts.init(this.$refs.DvPlot)
this.handleChangeChart()
},
handleChangeChart() { handleChangeChart() {
const series = Array(this.plot.dimensions.length - 1).fill(this.tpl.daemon)
this.chart.setOption({
tooltip: {},
xAxis: {
type: 'category', nameGap: 20, axisTick: false,
axisLabel: {
color: '#C3C4C4',
interval: 0,
},
axisLine: {
lineStyle: {
width: 1
}
} }
}, },
// 声明一个 Y 轴，数值轴。
yAxis: {
nameGap: 23, minInterval: 1,
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLabel: {color: '#C3C4C4'},
axisLine: {
lineStyle: {
color: '#C3C4C4'
}
}
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '26px',
containLabel: true
}, series, ...this.tpl
})
this.getChartData()
},
getChartData() {
return new DvCompData(this.plot.dataType, this.plot, this.instance).getData().then(source => {
const dataset = {
source,
dimensions: this.plot.dimensions.filter(Boolean) || []
}
this.chart.setOption({dataset})
})
}
},
mounted() {
this.$nextTick(this.initChart)
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -35,6 +95,7 @@ export default {
position: absolute; position: absolute;
right: 12px; right: 12px;
top: -10px; top: -10px;
z-index: 9;
.el-select { .el-select {
.el-input__inner { .el-input__inner {
@@ -48,5 +109,9 @@ export default {
} }
} }
} }
.plotChart {
height: 100%;
}
} }
</style> </style>

22
packages/bigscreen/designer/components/form/DataConfig.vue
View File

@@ -55,6 +55,11 @@
<config-item label="接口地址" v-else-if="chart.dataType=='apiData'"> <config-item label="接口地址" v-else-if="chart.dataType=='apiData'">
<el-input size="mini" v-model="chart.api"/> <el-input size="mini" v-model="chart.api"/>
</config-item> </config-item>
<config-item label="数据维度" v-if="chart.dataType !== 'staticData'">
<code-editor v-model="chart.djson" lang="json" theme="github" width="100%" height="100"
placeholder="参照echarts配置数据维度,为一个数组,数组的第一个值为维度值"
@change="v=>chart.dimensions=JSON.parse(v)"/>
</config-item>
</ai-fold> </ai-fold>
<el-button type="text" icon="el-icon-plus" @click="options.charts.push({title:'新图表'})">添加图表</el-button> <el-button type="text" icon="el-icon-plus" @click="options.charts.push({title:'新图表'})">添加图表</el-button>
</template> </template>
@@ -159,6 +164,7 @@ import 'brace/theme/monokai';
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue"; import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
import AiFold from "dui/packages/layout/AiFold.vue"; import AiFold from "dui/packages/layout/AiFold.vue";
import ChartPicker from "../chartPicker.vue"; import ChartPicker from "../chartPicker.vue";
import {DvCompData} from "../../config";
export default { export default {
name: 'dataConfig', name: 'dataConfig',
@@ -173,20 +179,7 @@ export default {
}, },
data() { data() {
return { return {
dataTypes: [ dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
{
id: 'staticData',
label: '静态数据'
},
{
id: 'dynamicData',
label: '动态数据'
},
{
id: 'apiData',
label: '接口'
}
],
json: "", json: "",
sourceDataId: '', sourceDataId: '',
sourceData: [], sourceData: [],
@@ -195,7 +188,6 @@ export default {
list: [], list: [],
showMapEditor: false, showMapEditor: false,
form: {}, form: {},
charts: Object.keys({}).map((label, id) => ({id, label}))
} }
}, },
computed: { computed: {

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

@@ -3,10 +3,7 @@
* *
*/ */
export const chartTpl = [{ export const chartTpl = [{
label: '柱状图', label: '柱状图', type: 'bar', list: [{
type: 'bar',
list: [
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'barChart1', type: 'barChart1',
label: '柱状图1', label: '柱状图1',
@@ -26,16 +23,10 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
{name: '阿斯达', v1: 23},
{name: '水电费', v1: 12},
{name: '凡哥', v1: 67},
{name: '党费', v1: 98}
],
config: 'barChart1', config: 'barChart1',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'barChart2', type: 'barChart2',
label: '柱状图2', label: '柱状图2',
@@ -55,16 +46,10 @@ export const chartTpl = [{
dataType: 'staticData', dataType: 'staticData',
api: '', api: '',
apiData: [], apiData: [],
staticData: [ staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
{name: '阿斯达', v1: 23},
{name: '水电费', v1: 12},
{name: '凡哥', v1: 67},
{name: '党费', v1: 98}
],
config: 'barChart2', config: 'barChart2',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'barChart3', type: 'barChart3',
label: '柱状图3', label: '柱状图3',
@@ -84,16 +69,10 @@ export const chartTpl = [{
dataType: 'staticData', dataType: 'staticData',
api: '', api: '',
apiData: [], apiData: [],
staticData: [ staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
{name: '阿斯达', v1: 23},
{name: '水电费', v1: 12},
{name: '凡哥', v1: 67},
{name: '党费', v1: 98}
],
config: 'barChart3', config: 'barChart3',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'barChart5', type: 'barChart5',
label: '柱状图4', label: '柱状图4',
@@ -113,16 +92,10 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
{name: '阿斯达', v1: 23},
{name: '水电费', v1: 12},
{name: '凡哥', v1: 67},
{name: '党费', v1: 98}
],
config: 'barChart5', config: 'barChart5',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'barChart7', type: 'barChart7',
label: '柱状图5', label: '柱状图5',
@@ -141,16 +114,10 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
{name: '阿斯达', v1: 23},
{name: '水电费', v1: 12},
{name: '凡哥', v1: 67},
{name: '党费', v1: 98}
],
config: 'barChart7', config: 'barChart7',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'barChart8', type: 'barChart8',
label: '柱状图6', label: '柱状图6',
@@ -170,16 +137,10 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
{name: '阿斯达', v1: 23},
{name: '水电费', v1: 12},
{name: '凡哥', v1: 67},
{name: '党费', v1: 98}
],
config: 'barChart8', config: 'barChart8',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'barChart9', type: 'barChart9',
label: '柱状图7', label: '柱状图7',
@@ -199,22 +160,12 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
{name: '阿斯达', v1: 23},
{name: '水电费', v1: 12},
{name: '凡哥', v1: 67},
{name: '党费', v1: 98}
],
config: 'barChart9', config: 'barChart9',
dynamicData: [] dynamicData: []
} }]
] }, {
}, label: '折线图', type: 'line', list: [{
{
label: '折线图',
type: 'line',
list: [
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'lineChart1', type: 'lineChart1',
label: '折线图1', label: '折线图1',
@@ -233,17 +184,15 @@ export const chartTpl = [{
dataX: '', dataX: '',
dataY: [], dataY: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
{name: '阿斯达', v1: 23, v2: 33}, name: '凡哥',
{name: '水电费', v1: 12, v2: 34}, v1: 67,
{name: '凡哥', v1: 67, v2: 25}, v2: 25
{name: '党费', v1: 98, v2: 85} }, {name: '党费', v1: 98, v2: 85}],
],
config: 'lineChart1', config: 'lineChart1',
sourceDataId: '', sourceDataId: '',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'lineChart2', type: 'lineChart2',
label: '折线图2', label: '折线图2',
@@ -262,17 +211,15 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
{name: '阿斯达', v1: 23, v2: 33}, name: '凡哥',
{name: '水电费', v1: 12, v2: 34}, v1: 67,
{name: '凡哥', v1: 67, v2: 25}, v2: 25
{name: '党费', v1: 98, v2: 85} }, {name: '党费', v1: 98, v2: 85}],
],
config: 'lineChart2', config: 'lineChart2',
sourceDataId: '', sourceDataId: '',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'lineChart3', type: 'lineChart3',
label: '折线图3', label: '折线图3',
@@ -291,17 +238,15 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
{name: '阿斯达', v1: 23, v2: 33}, name: '凡哥',
{name: '水电费', v1: 12, v2: 34}, v1: 67,
{name: '凡哥', v1: 67, v2: 25}, v2: 25
{name: '党费', v1: 98, v2: 85} }, {name: '党费', v1: 98, v2: 85}],
],
config: 'lineChart3', config: 'lineChart3',
sourceDataId: '', sourceDataId: '',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'lineChart4', type: 'lineChart4',
label: '折线图4', label: '折线图4',
@@ -320,17 +265,15 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
{name: '阿斯达', v1: 23, v2: 33}, name: '凡哥',
{name: '水电费', v1: 12, v2: 34}, v1: 67,
{name: '凡哥', v1: 67, v2: 25}, v2: 25
{name: '党费', v1: 98, v2: 85} }, {name: '党费', v1: 98, v2: 85}],
],
config: 'lineChart4', config: 'lineChart4',
sourceDataId: '', sourceDataId: '',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'lineChart5', type: 'lineChart5',
label: '折线图5', label: '折线图5',
@@ -349,23 +292,17 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
{name: '阿斯达', v1: 23, v2: 33}, name: '凡哥',
{name: '水电费', v1: 12, v2: 34}, v1: 67,
{name: '凡哥', v1: 67, v2: 25}, v2: 25
{name: '党费', v1: 98, v2: 85} }, {name: '党费', v1: 98, v2: 85}],
],
config: 'lineChart5', config: 'lineChart5',
sourceDataId: '', sourceDataId: '',
dynamicData: [] dynamicData: []
} }]
] }, {
}, label: '饼图', type: 'pie', list: [{
{
label: '饼图',
type: 'pie',
list: [
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'pieChart2', type: 'pieChart2',
config: 'pieChart2', config: 'pieChart2',
@@ -385,16 +322,14 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
{name: '阿斯达', v1: 23, v2: 33}, name: '凡哥',
{name: '水电费', v1: 12, v2: 34}, v1: 67,
{name: '凡哥', v1: 67, v2: 25}, v2: 25
{name: '党费', v1: 98, v2: 85} }, {name: '党费', v1: 98, v2: 85}],
],
sourceDataId: '', sourceDataId: '',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'pieChart1', type: 'pieChart1',
label: '饼图', label: '饼图',
@@ -413,17 +348,15 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
{name: '阿斯达', v1: 23, v2: 33}, name: '凡哥',
{name: '水电费', v1: 12, v2: 34}, v1: 67,
{name: '凡哥', v1: 67, v2: 25}, v2: 25
{name: '党费', v1: 98, v2: 85} }, {name: '党费', v1: 98, v2: 85}],
],
config: 'pieChart1', config: 'pieChart1',
sourceDataId: '', sourceDataId: '',
dynamicData: [] dynamicData: []
}, }, {
{
code: 'widget-linechart', code: 'widget-linechart',
type: 'pieChart3', type: 'pieChart3',
label: '饼图', label: '饼图',
@@ -442,29 +375,19 @@ export const chartTpl = [{
api: '', api: '',
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
{name: '阿斯达', v1: 23, v2: 33}, name: '凡哥',
{name: '水电费', v1: 12, v2: 34}, v1: 67,
{name: '凡哥', v1: 67, v2: 25}, v2: 25
{name: '党费', v1: 98, v2: 85} }, {name: '党费', v1: 98, v2: 85}],
],
config: 'pieChart3', config: 'pieChart3',
sourceDataId: '', sourceDataId: '',
dynamicData: [] dynamicData: []
}
]
}] }]
const components = [ }]
{ const components = [{
type: 'chart', type: 'chart', label: '图表', list: [...chartTpl, {
label: '图表', label: "多维图", type: "plot", list: [{
list: [
...chartTpl,
{
label: "多维图",
type: "plot",
list: [
{
type: 'plot', type: 'plot',
label: '多维图表', label: '多维图表',
title: '多维图表', title: '多维图表',
@@ -474,33 +397,22 @@ const components = [
top: 0, top: 0,
left: 0, left: 0,
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
charts: [ charts: [{
{
title: "饼状图统计", title: "饼状图统计",
chart: "pieChart2", dataType: 'staticData', chart: "pieChart2",
data: [ dataType: 'staticData',
{name: '阿斯达', v1: 23, v2: 33}, data: [{name: '阿斯达', v1: 23, v2: 33}, {name: '水电费', v1: 12, v2: 34}, {
{name: '水电费', v1: 12, v2: 34}, name: '凡哥',
{name: '凡哥', v1: 67, v2: 25}, v1: 67,
{name: '党费', v1: 98, v2: 85} v2: 25
] }, {name: '党费', v1: 98, v2: 85}]
} }],
],
} }]
] }]
} }, {
] type: 'table', label: '表格', list: [{
}, label: '表格', type: 'table', list: [{
{
type: 'table',
label: '表格',
list: [
{
label: '表格',
type: 'table',
list: [
{
type: 'table', type: 'table',
label: '表格', label: '表格',
title: '表格', title: '表格',
@@ -518,13 +430,8 @@ const components = [
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
dynamicData: [], dynamicData: [],
staticData: [ staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
{name: '列1', v: 23, v2: 3}, }, {
{name: '列2', v: 12, v2: 4},
{name: '列2', v: 12, v2: 4}
]
},
{
type: 'AiDvTable', type: 'AiDvTable',
label: '新版表格', label: '新版表格',
title: '新版表格', title: '新版表格',
@@ -540,33 +447,18 @@ const components = [
isShowIndex: '1', isShowIndex: '1',
sourceDataId: '', sourceDataId: '',
api: '', api: '',
config: [ config: [{
{ width: '', color: '', align: ''
width: '', }, {
color: '', width: '', color: '', align: ''
align: '' }, {
}, width: '', color: '', align: ''
{ }],
width: '',
color: '',
align: ''
},
{
width: '',
color: '',
align: ''
}
],
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
dynamicData: [], dynamicData: [],
staticData: [ staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
{name: '列1', v: 23, v2: 3}, }, {
{name: '列2', v: 12, v2: 4},
{name: '列2', v: 12, v2: 4}
]
},
{
type: 'AiRanking', type: 'AiRanking',
label: '排行榜', label: '排行榜',
title: '排行榜', title: '排行榜',
@@ -586,39 +478,24 @@ const components = [
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
dynamicData: [], dynamicData: [],
staticData: [ staticData: [{name: '列1', value: 23}, {name: '列2', value: 12}, {name: '列2', value: 12}]
{name: '列1', value: 23}, }]
{name: '列2', value: 12}, }]
{name: '列2', value: 12} }, {
] type: 'ai3d', label: "3D", list: [{
}
]
}
]
},
{
type: 'ai3d', label: "3D", list: [
{
label: "3D楼栋", type: 'building', list: [{ label: "3D楼栋", type: 'building', list: [{
type: 'building1', label: "楼栋模型1", type: 'building1',
label: "楼栋模型1",
width: 840, width: 840,
height: 800, height: 800,
zIndex: 1, zIndex: 1,
title: "楼栋模型1", title: "楼栋模型1",
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png' thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}] }]
} }]
] }, {
}, type: 'other', label: '其他', list: [{
{ label: '地图', type: 'map', list: [{
type: 'other',
label: '其他',
list: [
{
label: '地图',
type: 'map',
list: [
{
type: 'map', type: 'map',
label: '地图', label: '地图',
display: 'map', display: 'map',
@@ -634,20 +511,15 @@ const components = [
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
dynamicData: [], dynamicData: [],
staticData: [ staticData: [{
{ label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
label: '中卫慧通', }],
lng: 117.1339399,
lat: 36.7190487,
}
],
api: '', api: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png', thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0', is3dAround: '0',
limitArea: '0', limitArea: '0',
layers: 'vector' layers: 'vector'
}, }, {
{
type: 'AiDvMap', type: 'AiDvMap',
label: '地图', label: '地图',
display: 'map', display: 'map',
@@ -663,25 +535,16 @@ const components = [
apiData: [], apiData: [],
dataType: 'staticData', dataType: 'staticData',
dynamicData: [], dynamicData: [],
staticData: [ staticData: [{
{ label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
label: '中卫慧通', }],
lng: 117.1339399,
lat: 36.7190487,
}
],
api: '', api: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png', thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0', is3dAround: '0',
limitArea: '0', limitArea: '0',
} }]
] }, {
}, label: '党组织', type: 'partyOrg', list: [{
{
label: '党组织',
type: 'partyOrg',
list: [
{
type: 'partyOrg', type: 'partyOrg',
label: '党组织', label: '党组织',
width: 840, width: 840,
@@ -695,26 +558,16 @@ const components = [
border: 'border3', border: 'border3',
sourceDataId: '', sourceDataId: '',
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{
{ key: '个人服务办理', value: 247
key: '个人服务办理', }, {
value: 247 key: '同比上月', value: 247
}, }],
{
key: '同比上月',
value: 247
}
],
dynamicData: [], dynamicData: [],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png' thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
} }]
] }, {
}, label: '边框', type: 'panel', list: [{
{
label: '边框',
type: 'panel',
list: [
{
type: 'panel', type: 'panel',
label: '边框', label: '边框',
title: '边框', title: '边框',
@@ -724,14 +577,9 @@ const components = [
isZoom: false, isZoom: false,
zIndex: 1, zIndex: 1,
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png' thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
} }]
] }, {
}, label: '装饰', type: 'display', list: [{
{
label: '装饰',
type: 'display',
list: [
{
type: 'display', type: 'display',
label: '装饰', label: '装饰',
display: 'display0', display: 'display0',
@@ -743,24 +591,14 @@ const components = [
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png', thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
sourceDataId: '', sourceDataId: '',
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{
{ label: '个人服务办理', value: 247
label: '个人服务办理', }, {
value: 247 label: '同比上月', value: 247
}, }]
{ }]
label: '同比上月', }, {
value: 247 label: '轮播图', type: 'swiper', list: [{
}
]
}
]
},
{
label: '轮播图',
type: 'swiper',
list: [
{
type: 'swiper', type: 'swiper',
label: '轮播图', label: '轮播图',
width: 400, width: 400,
@@ -768,18 +606,13 @@ const components = [
zIndex: 1, zIndex: 1,
border: 'border2', border: 'border2',
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{
{ img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', title: '湖羊', content: `歙县众城湖羊养殖专业合作社
img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
title: '湖羊',
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627 徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅` 歙县郑村镇唐跃村碉墅`
} }],
],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png' thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
}, }, {
{
type: 'swiper', type: 'swiper',
label: '轮播图(点指示器)', label: '轮播图(点指示器)',
width: 800, width: 800,
@@ -787,28 +620,20 @@ const components = [
zIndex: 1, zIndex: 1,
border: 'border14', border: 'border14',
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{
{
content: `歙县众城湖羊养殖专业合作社 content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627 徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅` 歙县郑村镇唐跃村碉墅`
}, }, {
{
content: `歙县众城湖羊养殖专业合作社 content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627 徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅` 歙县郑村镇唐跃村碉墅`
}, },],
],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png', thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
dotIndicator: true dotIndicator: true
} }]
] }, {
}, label: '视频播放器', type: 'video', list: [{
{
label: '视频播放器',
type: 'video',
list: [
{
type: 'video', type: 'video',
label: '视频播放器', label: '视频播放器',
width: 400, width: 400,
@@ -817,14 +642,9 @@ const components = [
src: '', src: '',
border: 'border2', border: 'border2',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png' thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
} }]
] }, {
}, label: '数据统计', type: 'summary', list: [{
{
label: '数据统计',
type: 'summary',
list: [
{
type: 'summary', type: 'summary',
label: '数据统计', label: '数据统计',
display: 'summary0', display: 'summary0',
@@ -840,26 +660,16 @@ const components = [
sourceDataId: '', sourceDataId: '',
title: '数据统计', title: '数据统计',
dataType: 'staticData', dataType: 'staticData',
staticData: [ staticData: [{
{ key: '个人服务办理', value: 247
key: '个人服务办理', }, {
value: 247 key: '同比上月', value: 247
}, }],
{
key: '同比上月',
value: 247
}
],
dynamicData: [], dynamicData: [],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png' thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
} }]
] }, {
}, label: '视频监控', type: 'monitor', list: [{
{
label: '视频监控',
type: 'monitor',
list: [
{
type: 'monitor', type: 'monitor',
label: '视频监控', label: '视频监控',
src: '', src: '',
@@ -878,11 +688,87 @@ const components = [
staticData: '', staticData: '',
dynamicData: '', dynamicData: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png' thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
} }]
] }]
} }]
]
}
]
export {components} export {components}
/**
* 大屏组件数据类
*/
export class DvCompData {
static types = {
staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据"
}
constructor(type, dataConfig = {}, instance) {
this.instance = instance
this.type = type
this.params = dataConfig
}
getData() {
return this.type == 'staticData' ? 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
}
})
}
}

5
ui/packages/tools/AiEchartV2.vue
View File

@@ -59,7 +59,7 @@ export default {
legend = {textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, show: false}, legend = {textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, show: false},
series = data?.[0] ? Array(Object.keys(data?.[0]).length - 1).fill(1) series = data?.[0] ? Array(Object.keys(data?.[0]).length - 1).fill(1)
.map((e, i) => ({type, ...(typeof style == 'object' ? style : style(colors[i]))})) : [] .map((e, i) => ({type, ...(typeof style == 'object' ? style : style(colors[i]))})) : []
let ops = { return {
tooltip: {}, tooltip: {},
xAxis: { xAxis: {
type: 'category', nameGap: 20, axisTick: false, type: 'category', nameGap: 20, axisTick: false,
@@ -84,7 +84,7 @@ export default {
type: 'dashed' type: 'dashed'
} }
}, },
axisLabel: { color: '#C3C4C4' }, axisLabel: {color: '#C3C4C4'},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#C3C4C4' color: '#C3C4C4'
@@ -101,7 +101,6 @@ export default {
legend, series, ...options, legend, series, ...options,
color: colors color: colors
} }
return ops
}, },
grid() { grid() {
let {width, height} = this.chartOptions.grid || {} let {width, height} = this.chartOptions.grid || {}