初始化
This commit is contained in:
砂糖
186
frontend/packages/BasicComponents/ScreenScrollBoard/index.vue
Normal file
186
frontend/packages/BasicComponents/ScreenScrollBoard/index.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-scroll-board
|
||||
:key="updateKey"
|
||||
:class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
|
||||
:config="option"
|
||||
@click="rowClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DvScrollBoard from '@jiaminghi/data-view/lib/components/scrollBoard/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/scrollBoard/src/main.css'
|
||||
import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
|
||||
// import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import commonMixins from 'data-room-ui/js/mixins/commonMixins'
|
||||
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
|
||||
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
|
||||
export default {
|
||||
name: 'ScrollBoard',
|
||||
components: {
|
||||
DvScrollBoard
|
||||
},
|
||||
mixins: [dataVMixins, paramsMixins, commonMixins, linkageMixins],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
option: {
|
||||
get () {
|
||||
return { ...this.config.customize, data: this.config.option?.data, header: this.config.option?.header, columnWidth: this.config.option?.columnWidth, align: this.config.option?.align }
|
||||
},
|
||||
set () {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
mounted () {
|
||||
this.chartInit()
|
||||
},
|
||||
methods: {
|
||||
// 表格点击事件
|
||||
rowClick (row) {
|
||||
const origData = this.config.option.origData
|
||||
if (row && this.config && this.config.option && origData && origData.length && origData[row.rowIndex]) {
|
||||
this.linkage(origData[row.rowIndex])
|
||||
}
|
||||
},
|
||||
dataFormatting (config, data) {
|
||||
this.config.loading = false
|
||||
const header = []
|
||||
const dataList = []
|
||||
const alignList = []
|
||||
const widthList = []
|
||||
config.option.origData = data?.data
|
||||
if (config.customize.columnConfig.length === 0) {
|
||||
const key = []
|
||||
for (const i in data.columnData) {
|
||||
header.push(data.columnData[i].remark || data.columnData[i].alias)
|
||||
key.push(i)
|
||||
}
|
||||
data.data.forEach((item) => {
|
||||
const arr = []
|
||||
header.forEach((x, index) => {
|
||||
arr.push(item[key[index]])
|
||||
})
|
||||
dataList.push(arr)
|
||||
})
|
||||
} else {
|
||||
const key = []
|
||||
config.customize.columnConfig.forEach(item => {
|
||||
header.push(item.name)
|
||||
key.push(item.code)
|
||||
alignList.push(item.align)
|
||||
widthList.push(item.width)
|
||||
})
|
||||
data.data.forEach((item) => {
|
||||
const arr = []
|
||||
header.forEach((x, index) => {
|
||||
arr.push(item[key[index]])
|
||||
})
|
||||
dataList.push(arr)
|
||||
})
|
||||
if (config.customize.index) {
|
||||
if (alignList.length === header.length) {
|
||||
alignList.unshift('center')
|
||||
}
|
||||
if (widthList.length === header.length) {
|
||||
widthList.unshift('100')
|
||||
}
|
||||
} else {
|
||||
if (alignList.length !== header.length) {
|
||||
alignList.shift()
|
||||
}
|
||||
if (widthList.length !== header.length) {
|
||||
widthList.shift()
|
||||
}
|
||||
}
|
||||
}
|
||||
config.option = {
|
||||
...config.option,
|
||||
data: dataList,
|
||||
header: header,
|
||||
columnWidth: [...widthList],
|
||||
align: [...alignList]
|
||||
}
|
||||
return config
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.light-theme{
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
.auto-theme{
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
.dark-theme{
|
||||
background-color:rgb(31, 31, 31) ;
|
||||
}
|
||||
.bs-design-wrap{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.title-box{
|
||||
height: 40px;
|
||||
padding: 10px 10px 0 0;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
border-left: 3px solid var(--bs-el-color-primary);
|
||||
padding-left: 16px;
|
||||
}
|
||||
.target-value{
|
||||
overflow-y: auto;
|
||||
height: 60px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
padding: 16px 0 0 22px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.el-icon-warning{
|
||||
color: #FFD600;
|
||||
}
|
||||
.title-hover{
|
||||
&:hover{
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
170
frontend/packages/BasicComponents/ScreenScrollBoard/setting.vue
Normal file
170
frontend/packages/BasicComponents/ScreenScrollBoard/setting.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="bs-setting-wrap">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="config"
|
||||
class="setting-body bs-el-form"
|
||||
label-position="left"
|
||||
label-width="90px"
|
||||
>
|
||||
<el-form
|
||||
:model="config.customize"
|
||||
class="setting-body bs-el-form"
|
||||
label-position="left"
|
||||
label-width="90px"
|
||||
>
|
||||
<SettingTitle>标题</SettingTitle>
|
||||
<el-form-item
|
||||
class="lc-field-body"
|
||||
label="轮播表名称"
|
||||
>
|
||||
<el-input
|
||||
v-model="config.title"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<SettingTitle>位置</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<PosWhSetting :config="config" />
|
||||
</div>
|
||||
<SettingTitle v-if="config.border">边框</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<BorderSetting
|
||||
v-if="config.border"
|
||||
label-width="100px"
|
||||
:config="config.border"
|
||||
:bigTitle='config.title'
|
||||
/>
|
||||
</div>
|
||||
<SettingTitle>旋转</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<RotateSetting
|
||||
:config="config"
|
||||
/>
|
||||
</div>
|
||||
<SettingTitle>基础</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<el-form-item label="表头背景色">
|
||||
<ColorPicker
|
||||
v-model="config.customize.headerBGC"
|
||||
:predefine="predefineThemeColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="偶数行背景色">
|
||||
<ColorPicker
|
||||
v-model="config.customize.oddRowBGC"
|
||||
:predefine="predefineThemeColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="奇数行背景色">
|
||||
<ColorPicker
|
||||
v-model="config.customize.evenRowBGC"
|
||||
:predefine="predefineThemeColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="轮播时间间隔"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input
|
||||
v-model="config.customize.waitTime"
|
||||
clearable
|
||||
placeholder="请输入时间间隔"
|
||||
>
|
||||
<template slot="append">
|
||||
ms
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示行数">
|
||||
<el-input-number
|
||||
v-model="config.customize.rowNum"
|
||||
:precision="0"
|
||||
class="bs-el-input-number"
|
||||
label="请输入行数"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="表头高度"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input
|
||||
v-model="config.customize.headerHeight"
|
||||
clearable
|
||||
placeholder="请输入表头高度"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="行号表头"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input
|
||||
v-model="config.customize.indexHeader"
|
||||
clearable
|
||||
placeholder="请输入行号表头"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否显示行号">
|
||||
<el-switch
|
||||
v-model="config.customize.index"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="悬浮暂停轮播">
|
||||
<el-switch
|
||||
v-model="config.customize.hoverPause"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
|
||||
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
|
||||
import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
|
||||
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
|
||||
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
|
||||
import {predefineColors} from "data-room-ui/js/utils/colorList";
|
||||
export default {
|
||||
name: 'BarSetting',
|
||||
components: {
|
||||
ColorPicker,
|
||||
PosWhSetting,
|
||||
SettingTitle,
|
||||
BorderSetting,
|
||||
RotateSetting
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 预设主题色
|
||||
predefineThemeColors: predefineColors
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
config: {
|
||||
get () {
|
||||
return this.$store.state.bigScreen.activeItemConfig
|
||||
},
|
||||
set (val) {
|
||||
this.$store.state.bigScreen.activeItemConfig = val
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lc-field-body {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
import { commonConfig, displayOption } from 'data-room-ui/js/config'
|
||||
|
||||
export const settingConfig = {
|
||||
padding: [30, 30, 30, 60],
|
||||
legend: false,
|
||||
isGroup: true,
|
||||
header: [],
|
||||
columnWidth: [],
|
||||
align: [],
|
||||
data: [],
|
||||
origData:[],
|
||||
// 设置面板属性的显隐
|
||||
displayOption: {
|
||||
...displayOption,
|
||||
headerField: {
|
||||
enable: true
|
||||
},
|
||||
metricField: {
|
||||
// 指标
|
||||
label: '指标',
|
||||
enable: false,
|
||||
multiple: false // 是否多选
|
||||
},
|
||||
dimensionField: {
|
||||
// 表格列
|
||||
label: '表格列', // 维度/查询字段
|
||||
enable: true,
|
||||
multiple: true // 是否多选
|
||||
}
|
||||
}
|
||||
}
|
||||
const customConfig = {
|
||||
type: 'screenScrollBoard',
|
||||
root: {
|
||||
version: '2023071001',
|
||||
contribution: false,
|
||||
loading: false,
|
||||
// 绕x轴旋转角度
|
||||
rotateX: 0,
|
||||
// 绕y轴旋转角度
|
||||
rotateY: 0,
|
||||
// 绕z轴旋转角度
|
||||
rotateZ: 0,
|
||||
// 透视距离
|
||||
perspective: 0,
|
||||
skewX: 0,
|
||||
skewY: 0
|
||||
},
|
||||
customize: {
|
||||
rowNum: 5,
|
||||
headerBGC: '#007aff',
|
||||
oddRowBGC: '',
|
||||
evenRowBGC: '',
|
||||
waitTime: 2000,
|
||||
headerHeight: 35,
|
||||
index: false,
|
||||
indexHeader: '#',
|
||||
carousel: 'single',
|
||||
hoverPause: true,
|
||||
columnConfig: []
|
||||
}
|
||||
}
|
||||
export const dataConfig = {
|
||||
...commonConfig(customConfig)
|
||||
}
|
||||
Reference in New Issue
Block a user