ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ 引入datav依赖，增加了边框、装饰组件

Browse Source 
增加了样式组件分组，支持边框组件、装饰组件，可以在组件属性配置里切换不同的样式
wenqindong 1 year ago
parent 3aed65849b
commit d39ec9b75a
7 changed files with 250 additions and 1 deletions
Show Stats Download Patch File Download Diff File

4
report-ui/src/main.js
Unescape Escape View File

@ -22,7 +22,9 @@ import 'echarts/lib/component/tooltip'
//import 'echarts-liquidfill'
// import 'echarts-gl'
Vue.component('v-chart', ECharts)
// 全局引入datav
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
// anji component
import anjiCrud from '@/components/AnjiPlus/anji-crud/anji-crud'
import anjiSelect from '@/components/AnjiPlus/anji-select'

74
report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-border.js
Unescape Escape View File

@ -0,0 +1,74 @@
/**
* author:wenqindong
* date:2023-05-31
*/
let selectOptions = []
for(let i=1;i<14;i++){
selectOptions.push({code: 'dv-border-Box-'+i, name: '样式'+i})
}
export const widgetBorder = {
code: 'widget-border',
type: 'border',
tabName: '样式组件',
label: '边框',
icon: 'icontupian1',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '边框一',
},
{
type: 'el-select',
label: '样式',
name: 'showtype',
required: false,
placeholder: '',
selectOptions: selectOptions,
value: 'dv-border-Box-1'
},
],
// 数据
data: [],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
],
}
}

74
report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decoration.js
Unescape Escape View File

@ -0,0 +1,74 @@
/**
* author:wenqindong
* date:2023-05-31
*/
let selectOptions = []
for(let i=1;i<13;i++){
selectOptions.push({code: 'dv-decoration-'+i, name: '装饰'+i})
}
export const widgetDecoration = {
code: 'widget-decoration',
type: 'border',
tabName: '样式组件',
label: '装饰',
icon: 'icontupian1',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '装饰一',
},
{
type: 'el-select',
label: '样式',
name: 'showtype',
required: false,
placeholder: '',
selectOptions: selectOptions,
value: 'dv-decoration-1'
},
],
// 数据
data: [],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 150,
},
],
}
}

4
report-ui/src/views/bigscreenDesigner/designer/tools/main.js
Unescape Escape View File

@ -44,10 +44,14 @@ import { widgetFormTime } from "./configure/form/widget-form-time";
import { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertical";
import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal"
import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart";
import {widgetBorder} from "./configure/styleWidget/widget-border";
import {widgetDecoration} from "./configure/styleWidget/widget-decoration";
export const widgetTool = [
// type=html类型的组件
widgetText,
widgetBorder,
widgetDecoration,
widgetMarquee,
widgetHref,
widgetTime,

46
report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetBorder.vue
Unescape Escape View File

@ -0,0 +1,46 @@
<template>
<div :style="styleObj" >
<component :is="value.setup.showtype" :value="value" />
</div>
</template>
<script>
export default ({
data() {
return {
optionsStyle: {}, // 样式
}
},
props: {
value: Object,
ispreview: Boolean,
widgetIndex: {
type: Number,
default: 0,
}, // 当前组件，在工作区变量widgetInWorkbench中的索引
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.collapse;
this.optionsSetup = val.setup;
},
deep: true,
},
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
};
},
}
})
</script>
<style scoped lang="scss">
</style>

45
report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoration.vue
Unescape Escape View File

@ -0,0 +1,45 @@
<template>
<div :style="styleObj">
<component :is="value.setup.showtype" :value="value" :style="styleObj"/>
</div>
</template>
<script>
export default ({
data() {
return {
optionsStyle: {}, // 样式
}
},
props: {
value: Object,
ispreview: Boolean,
widgetIndex: {
type: Number,
default: 0,
}, // 当前组件，在工作区变量widgetInWorkbench中的索引
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.collapse;
this.optionsSetup = val.setup;
},
deep: true,
},
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
};
},
}
})
</script>
<style scoped lang="scss"></style>

4
report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
Unescape Escape View File

@ -53,12 +53,16 @@ import widgetFormTime from "./form/widgetFormTime.vue";
import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
import widgetBorder from "./styleWidget/widgetBorder.vue";
import widgetDecoration from "./styleWidget/widgetDecoration.vue";
export default {
name: "Widget",
components: {
widgetHref,
widgetText,
widgetBorder,
widgetDecoration,
WidgetMarquee,
widgetTime,
widgetImage,

Write Preview
Loading…
Cancel
Save