初始化
This commit is contained in:
砂糖
272
frontend/packages/BigScreenDesign/RightSetting/index.vue
Normal file
272
frontend/packages/BigScreenDesign/RightSetting/index.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div
|
||||
class="bs-setting-wrap"
|
||||
@click.stop
|
||||
>
|
||||
<el-tabs
|
||||
v-if="config.option.displayOption.dataAllocation.enable"
|
||||
v-model="activeName"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane
|
||||
label="数据"
|
||||
name="data"
|
||||
>
|
||||
<DataSetting
|
||||
ref="dataSetting"
|
||||
:key="config.code"
|
||||
>
|
||||
<template #dataSetSelect="{value}">
|
||||
<slot
|
||||
name="dataSetSelect"
|
||||
:value="value"
|
||||
/>
|
||||
</template>
|
||||
</DataSetting>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="样式"
|
||||
name="second"
|
||||
>
|
||||
<component
|
||||
:is="resolveComponentType(config.type)"
|
||||
ref="customSetting"
|
||||
:key="config.code"
|
||||
:config="config"
|
||||
@closeRightPanel="close"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-scrollbar
|
||||
v-else
|
||||
class="bs-setting-wrap bs-scrollbar"
|
||||
>
|
||||
<component
|
||||
:is="resolveComponentType(config.type)"
|
||||
ref="customSetting"
|
||||
:key="config.code"
|
||||
:config="config"
|
||||
@closeRightPanel="close"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { resolveComponentType } from 'data-room-ui/js/utils'
|
||||
import DataSetting from './DataSetting.vue'
|
||||
import rightSetting from 'data-room-ui/js/utils/rightSettingImport'
|
||||
import CustomComponent from './G2CustomSetting.vue'
|
||||
import EchartsCustomSetting from './EchartsCustomSetting.vue'
|
||||
import Svgs from 'data-room-ui/Svgs/setting.vue'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
// import _ from 'lodash'
|
||||
import isEqual from 'lodash/isEqual'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { EventBus } from 'data-room-ui/js/utils/eventBus'
|
||||
// 整体动态导入右侧设置组件，不用手动注册
|
||||
const components = {}
|
||||
for (const key in rightSetting) {
|
||||
if (Object.hasOwnProperty.call(rightSetting, key)) {
|
||||
const component = rightSetting[key]
|
||||
components[key] = component
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'RightSetting',
|
||||
components: {
|
||||
...components,
|
||||
DataSetting,
|
||||
CustomComponent,
|
||||
Svgs,
|
||||
// 远程组件的样式配置也和g2Plot的样式配置一样，采用属性配置, 故使用一个组件
|
||||
RemoteComponent: CustomComponent,
|
||||
EchartsComponent: EchartsCustomSetting
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: 'data',
|
||||
isOperationRollback: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
activeCode: (state) => state.bigScreen.activeCode,
|
||||
hoverCode: (state) => state.bigScreen.hoverCode,
|
||||
config: (state) => state.bigScreen.activeItemConfig,
|
||||
chartList: (state) => state.bigScreen.pageInfo.chartList
|
||||
}),
|
||||
pageCode () {
|
||||
return this.$route.query.code
|
||||
},
|
||||
configDataSource () {
|
||||
return {
|
||||
dataSource: cloneDeep(this.config.dataSource),
|
||||
linkage: cloneDeep(this.config?.linkage),
|
||||
dataHandler: this.config?.dataHandler,
|
||||
dataSourceSetting: cloneDeep(this.config?.setting?.filter(item => item.tabName === 'data')) || [],
|
||||
code: this.config?.code
|
||||
}
|
||||
},
|
||||
configStyle () {
|
||||
return {
|
||||
showTitle: this.config.showTitle,
|
||||
title: cloneDeep(this.config?.title),
|
||||
border: cloneDeep(this.config?.border),
|
||||
w: this.config?.w,
|
||||
h: this.config?.h,
|
||||
x: this.config?.x,
|
||||
y: this.config?.y,
|
||||
z: this.config?.z,
|
||||
rotateX: this.config?.rotateX,
|
||||
rotateY: this.config?.rotateY,
|
||||
rotateZ: this.config?.rotateZ,
|
||||
perspective: this.config?.perspective,
|
||||
skewX: this.config?.skewX,
|
||||
skewY: this.config?.skewY,
|
||||
setting: cloneDeep(this.config?.setting),
|
||||
customize: cloneDeep(this.config?.customize),
|
||||
url: this.config?.url,
|
||||
dateFormat: this.config?.dateFormat,
|
||||
endTime: this.config?.endTime
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 只更新样式部分，不调用接口
|
||||
configStyle: {
|
||||
handler (val, oldValue) {
|
||||
this.handleConfigChange(val, oldValue, 'configStyle')
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
// 更新数据源部分，需要调用接口
|
||||
configDataSource: {
|
||||
handler (val, oldValue) {
|
||||
this.handleConfigChange(val, oldValue, 'configDataSource')
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
EventBus.$on('operationRollback', val => {
|
||||
this.isOperationRollback = val
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
EventBus.$off('operationRollback')
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('bigScreen', [
|
||||
'saveTimeLine'
|
||||
]),
|
||||
debounce (delay, obj) {
|
||||
if (this.timeout) {
|
||||
clearTimeout(this.timeout)
|
||||
}
|
||||
this.timeout = setTimeout(() => {
|
||||
this.$emit('updateSetting', { ...obj })
|
||||
}, delay)
|
||||
},
|
||||
handleConfigChange (val, oldValue, type) {
|
||||
if (val.code === oldValue.code) {
|
||||
if (!isEqual(val, oldValue)) {
|
||||
if (type === 'configStyle') {
|
||||
if (this.config.type === 'iframeChart') {
|
||||
this.debounce(500, { ...val, type: this.config.type, code: this.config.code, parentCode: this.config?.parentCode })
|
||||
} else {
|
||||
this.$emit('updateSetting', { ...val, type: this.config.type, code: this.config.code, theme: this.config.theme, parentCode: this.config?.parentCode })
|
||||
}
|
||||
} else {
|
||||
this.$emit('updateDataSetting', this.config)
|
||||
}
|
||||
if (!this.isOperationRollback) {
|
||||
this.saveTimeLine(`更新${val?.title ?? this.config.title}组件属性`)
|
||||
this.isOperationRollback = false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.$emit('closeRightPanel')
|
||||
},
|
||||
handleClick (val) {
|
||||
this.$set(this, 'activeName', val.name)
|
||||
},
|
||||
resolveComponentType,
|
||||
// 多个表单校验
|
||||
getFormPromise (form) {
|
||||
return new Promise((resolve) => {
|
||||
form.validate((res) => {
|
||||
resolve(res)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 更新
|
||||
update () {
|
||||
// 有数据配置也有自定义配置的组件
|
||||
if (this.config.option.displayOption.dataAllocation.enable) {
|
||||
// 获取子组件的表单元素
|
||||
const commonForm = this.$refs.dataSetting.$refs.form
|
||||
const customForm = this.$refs.customSetting.$refs.form
|
||||
Promise.all([commonForm, customForm].map(this.getFormPromise)).then(
|
||||
async (res) => {
|
||||
const vaildateResult = res.every((item) => !!item)
|
||||
if (vaildateResult) {
|
||||
if (this.$refs.dataSetting.params) {
|
||||
const params = this.$refs.dataSetting.params
|
||||
const paramsMap = params.reduce((obj, param) => {
|
||||
obj[param.name] = param.value
|
||||
return obj
|
||||
}, {})
|
||||
this.config.dataSource.params = paramsMap
|
||||
}
|
||||
this.$emit('updateDataSetting', this.config)
|
||||
} else {
|
||||
this.$message.warning('请完成数据配置')
|
||||
return false
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
// 只有自定义配置的组件
|
||||
if (this.$refs.customSetting?.$refs?.form?.validate) {
|
||||
this.$refs.customSetting.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit('updateSetting', this.config)
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.$message.warning('请完成配置')
|
||||
return false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 边框装饰组件的右侧配置
|
||||
this.$refs.customSetting.$refs.form.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit('updateSetting', this.config)
|
||||
this.$message.success('更新成功')
|
||||
} else {
|
||||
this.$message.warning('请完成配置')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../assets/style/settingWrap.scss';
|
||||
.add-filter-box {
|
||||
position: relative;
|
||||
.add-filter {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.add-filter-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user