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}`"
:theme="theme"
:data="values"
:ops="chartList[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> -->
:ops="$echartTpls[data.config]"/>
<AiDvTable
v-else-if="currentType === 'AiDvTable'"
:heigth="'100%'"
@@ -66,7 +58,7 @@
v-else-if="currentType === 'video'"/>
<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-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>
</div>
</template>
@@ -76,7 +68,6 @@ import {scrollBoard} from '@jiaminghi/data-view'
import Vue from "vue"
import {mapState} from 'vuex'
import AiDvMap from "./AiDvMap";
import chartList from './AiEchart/echartTpls'
import AiMonitor from "./AiMonitor/AiMonitor";
import AiSwiper from './AiSwiper.vue'
import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
@@ -102,7 +93,6 @@ export default {
data() {
return {
// mods,
chartList,
map: null,
lib: null,
timer: null,

2
components/index.js
View File

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

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

@@ -1,29 +1,89 @@
<template>
<section class="AiDvPlot">
<ai-select class="plotPicker" v-model="current" :select-list="charts" @change="handleChangeChart"/>
<div ref="DvPlot"/>
<div class="plotChart" ref="DvPlot"/>
</section>
</template>
<script>
import * as echarts from 'echarts'
import {DvCompData} from "../../../packages/bigscreen/designer/config";
export default {
name: "AiDvPlot",
props: {
options: {default: () => []}
options: {default: () => []},
instance: Function
},
data() {
return {
current: 0
current: 0,
chart: null
}
},
computed: {
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: {
initChart() {
this.chart = echarts.init(this.$refs.DvPlot)
this.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>
<style scoped lang="scss">
@@ -35,6 +95,7 @@ export default {
position: absolute;
right: 12px;
top: -10px;
z-index: 9;
.el-select {
.el-input__inner {
@@ -48,5 +109,9 @@ export default {
}
}
}
.plotChart {
height: 100%;
}
}
</style>

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

@@ -55,6 +55,11 @@
<config-item label="接口地址" v-else-if="chart.dataType=='apiData'">
<el-input size="mini" v-model="chart.api"/>
</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>
<el-button type="text" icon="el-icon-plus" @click="options.charts.push({title:'新图表'})">添加图表</el-button>
</template>
@@ -159,6 +164,7 @@ 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";
export default {
name: 'dataConfig',
@@ -173,20 +179,7 @@ export default {
},
data() {
return {
dataTypes: [
{
id: 'staticData',
label: '静态数据'
},
{
id: 'dynamicData',
label: '动态数据'
},
{
id: 'apiData',
label: '接口'
}
],
dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
json: "",
sourceDataId: '',
sourceData: [],
@@ -195,7 +188,6 @@ export default {
list: [],
showMapEditor: false,
form: {},
charts: Object.keys({}).map((label, id) => ({id, label}))
}
},
computed: {

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

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