<template>
<div
class="bs-setting-wrap"
@click.stop
>
<el-form
ref="form"
:model="config"
:rules="rules"
label-width="100px"
label-position="left"
class="setting-body bs-el-form"
>
<div class="data-setting-box">
<div
v-if="config.option.displayOption.dataSourceType.enable"
class="data-setting-data-box"
>
<div class="lc-field-head">
<div class="lc-field-title">
数据来源
</div>
</div>
<div class="lc-field-body">
<el-form-item
v-if="config.option.displayOption.expression && config.option.displayOption.expression.enable"
label="数据来源"
>
<el-select
v-model="config.dataSource.source"
class="bs-el-select"
popper-class="bs-el-select"
placeholder="请选择数据来源"
clearable
@change="sourceChange"
>
<el-option
value="dataset"
label="数据集"
/>
<el-option
value="expression"
label="表达式"
/>
<el-option
value="static"
label="静态值"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="config.dataSource.source === 'dataset'"
label="数据集"
>
<data-set-select
:dataset-name="datasetName"
:ds-id="config.dataSource.businessKey"
@getDsId="changeDsid"
>
<template #dataSetSelect="{value}">
<slot
name="dataSetSelect"
:value="value"
/>
</template>
</data-set-select>
</el-form-item>
<el-form-item
v-if="config.dataSource.source === 'expression' && config.option.displayOption.expression && config.option.displayOption.expression.enable"
label="表达式"
>
<i
class="el-icon-edit expression"
@click="openExpression"
/>
</el-form-item>
<el-form-item
v-if="config.dataSource.source === 'static'"
label="文本内容"
>
<el-input
v-model="config.customize.title"
placeholder="请输入文本内容"
clearable
/>
</el-form-item>
</div>
</div>
<div
v-if="['customComponent','marquee', 'echartsComponent'].includes(config.type)"
class="data-setting-data-box"
>
<div class="lc-field-head">
<div class="lc-field-title">
数据处理
</div>
</div>
<div class="lc-field-body">
<el-form-item
label="数据处理脚本"
>
<el-input
v-model="config.dataHandler"
type="textarea"
:rows="5"
placeholder="示例:data.forEach(item => { // 数据处理 })"
/>
</el-form-item>
</div>
</div>
<div
v-if="!['tree','multipleNumberChart','carousel'].includes(config.type) && config.option.displayOption.dataSourceType.enable && (!['expression','static'].includes(config.dataSource.source))"
class="data-setting-data-box"
>
<div class="lc-field-head">
<div
class="lc-field-title"
>
数据配置
</div>
</div>
<!-- 基础组件数据配置 -->
<template v-if="!['customComponent', 'remoteComponent','echartsComponent'].includes(config.type)">
<!--维度多选-->
<el-form-item
v-if="config.option.displayOption.dimensionField.enable"
:label="config.option.displayOption.dimensionField.label"
:prop="config.option.displayOption.dimensionField.multiple? 'dataSource.dimensionFieldList' : 'dataSource.dimensionField'"
class="data-form-item"
>
<el-drag-select
v-if="config.option.displayOption.dimensionField.enable && config.option.displayOption.dimensionField.multiple"
v-model="config.dataSource.dimensionFieldList"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
:multiple="config.option.displayOption.dimensionField.multiple"
@change="dimensionFieldListChange"
@valuePositionChange="valuePositionChange"
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-drag-select>
<!--维度单选-->
<el-select
v-else
v-model="config.dataSource.dimensionField"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<!--指标-->
<el-form-item
v-if="config.option.displayOption.metricField.enable"
:label="config.option.displayOption.metricField.label"
prop="dataSource.metricField"
class="data-form-item"
>
<el-select
v-model="config.dataSource.metricField"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
</template>
<!-- g2plot和远程组件数据配置 -->
<template v-else>
<template
v-for="(setting, index) in config.setting.filter(set => set.tabName === 'data')"
>
<el-form-item
:key="index"
:label="setting.label"
class="data-form-item"
>
<el-select
v-if="setting.type === 'select'"
class="bs-el-select select"
popper-class="bs-el-select"
:value="setting.value"
filterable
clearable
:multiple="setting.multiple"
:placeholder="`请选择${setting.label}`"
@change="changeCustomProps(...arguments, setting)"
>
<el-option
v-for="(field, fieldIndex) in dataSourceDataList"
:key="fieldIndex"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
<el-input
v-else
:value="setting.value"
:placeholder="`请输入${setting.label}`"
@change="changeCustomProps(...arguments, setting)"
/>
</el-form-item>
</template>
</template>
</div>
<div
v-if="config.option.displayOption.headerField && config.option.displayOption.headerField.enable"
name="轮播表配置"
>
<template slot="title">
<div class="lc-field-head">
<div class="lc-field-title">
轮播表配置
</div>
</div>
</template>
<div class="lc-field-body">
<el-table
ref="headerTable"
:border="true"
:data="config.customize.columnConfig"
class="params-config"
>
<el-table-column
prop="code"
label="参数名称"
align="center"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.code"
placeholder="请输入名称"
readonly
/>
</template>
</el-table-column>
<el-table-column
prop="name"
label="列名称"
align="center"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.name"
placeholder="请输入字段名称"
/>
</template>
</el-table-column>
<el-table-column
prop="width"
label="列宽"
width="90"
align="center"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.width"
placeholder="请输入列宽"
clearable
/>
</template>
</el-table-column>
<el-table-column
prop="align"
label="对齐方式"
align="center"
>
<template slot-scope="scope">
<el-select
v-model="scope.row.align"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
placeholder="请选择对齐方式"
>
<el-option
value="left"
label="左对齐"
/>
<el-option
value="center"
label="居中"
/>
<el-option
value="right"
label="右对齐"
/>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div
v-if="config.option.displayOption.mapField && config.option.displayOption.mapField.enable"
name="地图数据配置"
>
<template slot="title">
<div class="lc-field-head">
<div class="lc-field-title">
地图数据配置
</div>
</div>
</template>
<div class="lc-field-body">
<el-form-item
label="值"
class="data-form-item"
>
<el-select
v-model="config.customize.value"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="地名字段"
class="data-form-item"
>
<template slot="label">
<span>
地名字段
<el-tooltip
class="item"
effect="dark"
content="色块模式下可用，地图将根据该属性值寻找对应的区域，并按照值字段进行色块渲染"
placement="top"
>
<i class="el-icon-question" />
</el-tooltip>
</span>
</template>
<el-select
v-model="config.customize.name"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="经度字段"
class="data-form-item"
>
<template slot="label">
<span>
经度字段
<el-tooltip
class="item"
effect="dark"
content="打点模式下可用，地图将经纬度寻找指定坐标，并进行打点显示"
placement="top"
>
<i class="el-icon-question" />
</el-tooltip>
</span>
</template>
<el-select
v-model="config.customize.xaxis"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="纬度字段"
class="data-form-item"
>
<template slot="label">
<span>
纬度字段
<el-tooltip
class="item"
effect="dark"
content="打点模式下可用，地图将经纬度寻找指定坐标，并进行打点显示"
placement="top"
>
<i class="el-icon-question" />
</el-tooltip>
</span>
</template>
<el-select
v-model="config.customize.yaxis"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
</div>
</div>
<div
v-if="config.option.displayOption.flyMapField && config.option.displayOption.flyMapField.enable"
name="飞线地图数据配置"
>
<div class="lc-field-body">
<el-form-item
label="起点经度"
class="data-form-item"
>
<el-select
v-model="config.customize.dataField.fromLng"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="起点纬度"
class="data-form-item"
>
<el-select
v-model="config.customize.dataField.fromLat"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="终点经度"
class="data-form-item"
>
<el-select
v-model="config.customize.dataField.toLng"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="终点纬度"
class="data-form-item"
>
<el-select
v-model="config.customize.dataField.toLat"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="起点名称"
class="data-form-item"
>
<el-select
v-model="config.customize.dataField.fromName"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="终点名称"
class="data-form-item"
>
<el-select
v-model="config.customize.dataField.toName"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="值"
class="data-form-item"
>
<el-select
v-model="config.customize.dataField.value"
class="bs-el-select"
popper-class="bs-el-select"
filterable
clearable
>
<el-option
v-for="(field, index) in dataSourceDataList"
:key="index"
:label="field.comment"
:value="field.name"
>
<div class="source-key-option">
<div>
{{ field.comment !== "" ? field.comment : field.name }}
</div>
<div class="option-txt">
{{ field.name }}
</div>
</div>
</el-option>
</el-select>
</el-form-item>
</div>
</div>
<div
v-if="config.option.displayOption.params.enable &&(!['expression','static'].includes(config.dataSource.source))"
class="data-setting-data-box"
>
<div class="lc-field-head">
<div class="lc-field-title">
参数配置
</div>
</div>
<div class="lc-field-body">
<el-table
ref="singleTable"
:border="true"
:data="params"
class="params-config"
>
<el-table-column
prop="name"
label="参数名称"
align="center"
>
<template slot-scope="scope">
<div>
<el-form-item>
<el-input
v-model="scope.row.name"
placeholder="请输入名称"
readonly
/>
<el-tooltip
:content="
`${
scope.row.type ? '参数类型：' + scope.row.type : ''
}
${
scope.row.remark ? '备注：' + scope.row.remark : ''
}`
"
placement="top"
>
<span
class="el-icon-question"
style="color:#9e9e9e"
/>
</el-tooltip>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column
prop="value"
label="参数值"
align="center"
>
<template slot-scope="scope">
<el-form-item
:prop="scope.row.require === 1 ? 'params' : null"
>
<el-date-picker
v-if="scope.row.type === 'Date'"
v-model="scope.row.value"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
/>
<el-input
v-else
v-model="scope.row.value"
clearable
placeholder="请输入参数值"
/>
</el-form-item>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- <div
v-if="config.option.displayOption.serverPagination.enable"
class="data-setting-data-box"
name="分页配置"
>
<div class="lc-field-head">
<div class="lc-field-title">
分页配置
</div>
</div>
<div class="form">
<el-form-item
v-if="config.option.displayOption.serverPagination.enable"
label="服务端分页"
prop="dataSource.serverPagination"
>
<el-radio-group
v-model="config.dataSource.serverPagination"
class="bs-el-radio-group"
size="mini"
@change="serverPaginationChange"
>
<el-radio-button :label="true">
开启
</el-radio-button>
<el-radio-button :label="false">
关闭
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="
config.dataSource.serverPagination &&
config.option.displayOption.pageSize.enable
"
label="分页长度"
prop="dataSource.pageSize"
>
<el-select
v-model="config.dataSource.pageSize"
class="bs-el-select"
popper-class="bs-el-select"
filterable
allow-create
default-first-option
>
<el-option
v-for="size in pageSizeList"
:key="size"
:label="size"
:value="size"
/>
</el-select>
</el-form-item>
</div>
</div> -->
<ComponentBinding
v-if="['button'].includes(config.type)"
:config="config"
:source-field-list="sourceFieldList"
/>
<ComponentRelation
v-if="!['carousel','gauge','liquid','marquee'].includes(config.type)"
:config="config"
:source-field-list="sourceFieldList"
/>
<expression-dialog
ref="expressionDialog"
:config="config"
/>
</div>
</el-form>
</div>
</template>
<script>
import ElDragSelect from './ElDragSelect.vue'
// import { isEmpty, cloneDeep } from 'lodash'
import isEmpty from 'lodash/isEmpty'
import cloneDeep from 'lodash/cloneDeep'
import ComponentRelation from 'data-room-ui/BigScreenDesign/RightSetting/ComponentRelation/index.vue'
import ComponentBinding from 'data-room-ui/BigScreenDesign/RightSetting/ComponentBinding/index.vue'
import dataSetSelect from 'data-room-ui/DataSetSetting/index.vue'
import { mapState } from 'vuex'
import { getDataSetDetails } from 'data-room-ui/js/api/bigScreenApi'
import ExpressionDialog from 'data-room-ui/BigScreenDesign/RightSetting/ExpressionDialog.vue'
export default {
name: 'DataSetting',
components: {
ComponentRelation,
ComponentBinding,
dataSetSelect,
ElDragSelect,
ExpressionDialog
},
data () {
return {
fieldsList: [],
params: [], // 参数配置
datasetName: '',
headerList: [],
pageSizeList: [10, 20, 50, 100],
rules: {
// 'dataSource.businessKey': [
// { required: true, message: '请选择数据集', trigger: 'change' }
// ],
// 'dataSource.dimensionField': [
// { required: true, message: '请选择维度', trigger: 'change' }
// ],
// 'dataSource.dimensionFieldList': [
// { required: true, message: '请选择维度', trigger: 'change' }
// ],
// 'dataSource.metricField': [
// { required: true, message: '请选择指标', trigger: 'change' }
// ],
params: [
{
validator: (rule, value, callback) => {
if (!value) {
this.params.map(sort => {
if (!sort.value) {
callback(new Error('请输入参数值'))
} else {
callback()
}
})
} else {
callback()
}
}
}
]
}
}
},
computed: {
...mapState({
pageInfo: state => state.bigScreen.pageInfo,
config: state => state.bigScreen.activeItemConfig
// 缓存数据集
// cacheDataSets: state => state.bigScreen.pageInfo.pageConfig.cacheDataSets
}),
dataSourceDataList () {
return this.fieldsList?.map(item => ({
...item,
comment: item?.fieldDesc || item?.fieldName,
name: item?.fieldName
}))
},
appCode: {
get () {
return this.$store.state.bigScreen.pageInfo.appCode
}
},
seriesFieldProp () {
if (this.config.option.displayOption.seriesField.required) {
return 'dataSource.seriesField'
} else {
return ''
}
},
pageCode () {
return this.$route.query.code
},
// 映射字段
sourceFieldList () {
const list = this?.config?.customize?.bindComponents || this.fieldsList
const modifiedList = list?.map(field => ({
label: field.comment || field.fieldDesc,
value: field.name || field.fieldName
})) || []
if (['input', 'timePicker', 'dateTimePicker'].includes(this.config.type)) {
modifiedList.push({ label: '当前组件值', value: this.config.code })
}
if (['map', 'flyMap'].includes(this.config.type)) {
modifiedList.push({ label: '点击区域名称', value: 'clickAreaName' })
}
return modifiedList
}
},
watch: {
// 切换数据集时将其他配置清空
'config.dataSource.businessKey' (val) {
this.clearCustomVerify()
this.clearVerify()
},
// 切换数据集类型时将其他配置清空
'config.dataSource.dataSetType' () {
this.config.dataSource.businessKey = ''
this.clearCustomVerify()
this.clearVerify()
},
// 参数改变时
params: {
handler (val) {
if (!isEmpty(val)) {
const params = cloneDeep(val)
const paramsMap = params.reduce((obj, param) => {
obj[param.name] = param.value
return obj
}, {})
this.config.dataSource.params = paramsMap
}
},
deep: true
},
'config.dataSource.dimensionField' (val) {
if (['select'].includes(this.config.type)) {
if (this.config.customize?.placeholder) {
this.config.customize.placeholder = '请选择' + this.dataSourceDataList.find(item => item.fieldName === val).comment
}
}
}
},
mounted () {
if (this.config.dataSource && this.config.dataSource.businessKey) {
this.getDataSetDetailsById(this.config.dataSource.businessKey, 'initial')
}
// TODO 临时解决方案，解决旧版飞线地图配置缺少字段问题
if (this.config.option.displayOption.flyMapField && this.config.option.displayOption.flyMapField.enable) {
if (!this.config.customize.dataField) {
this.config.customize.dataField = {
// 起点名称
fromName: '',
// 起点经度
fromLng: '',
// 起点纬度
fromLat: '',
// 终点名称
toName: '',
// 终点经度
toLng: '',
// 终点纬度
toLat: '',
// 轨迹数据
value: ''
}
}
}
},
methods: {
// 切换数据源的时候将文字和数字组件的相关配置清空
sourceChange (val) {
this.config.expression = 'return '
this.config.expressionCodes = []
},
changeDsid (dsId) {
this.clearVerify()
if (this.config.customize && this.config.customize.columnConfig) {
this.config.customize.columnConfig = []
}
this.getDataSetDetailsById(dsId, 'treeTable')
},
// 打开表达式弹窗
openExpression () {
this.$refs.expressionDialog.init()
},
// 切换前后端分页
serverPaginationChange (val) {
this.config.customize.webPagination = !val
},
// 清空自定义组件配置，与手动配置的组件区分开
clearCustomVerify () {
this.config.setting = this.config.setting?.map(set => {
this.datasetName = ''
if (set.tabName === 'data') {
set.value = ''
}
return set
})
},
// 清空手动配置的组件配置
clearVerify () {
this.config.dataSource.metricField = ''
this.config.dataSource.dimensionField = ''
this.config.dataSource.dimensionFieldList = []
this.config.dataSource.seriesField = ''
this.config.dataSource.params = {}
},
// 根据数据集来获取数据集详情
getDataSetDetailsById (id, type) {
if (id) {
this.config.dataSource.businessKey = id
getDataSetDetails(id).then(res => {
this.fieldsList = res.fields
// 初始化时以组件本来的参数设置为主
if (type === 'initial') {
const deleteKeys = []
for (const key in this.config.dataSource.params) {
const param = res?.params?.find(field => field.name === key)
// 如果组件参数在数据集中找不到，说明参数已经被删除，不需要再显示
if (param) {
deleteKeys.push(key)
this.params.push({
name: key,
value: this.config.dataSource.params[key],
type: param?.type,
remark: param?.remark
})
}
}
if (res.params) {
// 如果数据集中有新增的参数，需要显示出来
res.params.forEach(param => {
if (!this.params.find(item => item.name === param.name)) {
this.params.push({
name: param.name,
value: param.value,
type: param.type,
remark: param.remark
})
}
})
}
deleteKeys.forEach(key => {
delete this.config.dataSource.params[key]
})
} else {
this.params = res.params
}
this.datasetName = res.name
// 选择数据集的时候，如果数据集类型是dataModel,则不显示参数配置
this.config.option.displayOption.params.enable = res.type !== 'dataModel'
// 根据数据集初始化组件的入参：inparams
if (res.type !== 'dataModel') {
this.config.inParams =
this.params?.map(param => {
return {
name: param.remark, // 参数名
code: param.name // 参数值
}
}) || []
} else {
this.config.inParams =
this.fieldsList?.map(field => {
return {
name: field.fieldDesc, // 参数名
code: field.fieldName // 参数值
}
}) || []
}
// 根据数据集的参数初始化表单项
this.config.paramsList = this.params
if (type === 'treeTable') {
const enumeration = {
dataSetType: '1', // 数据集类型
dataSetKey: '', // 数据集
itemKeyName: '', // 选项显示字段
itemValueName: '', // 选项value字段
params: []
}
this.config.fields =
this.params?.map(param => {
return {
name: param.name,
label: param.remark || param.name,
component: 'input',
display: res.type !== 'dataModel',
enumeration: {
...enumeration
},
queryRule: 'like'
}
}) || []
}
})
}
},
// 改变维度
dimensionFieldListChange (list) {
const colFieldList = []
if (list.length > 0) {
list.forEach(item => {
colFieldList.push(
this.dataSourceDataList.find(field => field.name === item)
)
})
}
this.headerList = []
colFieldList.forEach(item => {
this.headerList.push({ name: item.comment, code: item.name, width: '150', align: 'left' })
})
this.config.customize.columnConfig = cloneDeep(this.headerList)
this.$store.commit('bigScreen/changeActiveItemConfig', this.config)
},
valuePositionChange (value) {
const sortedColumnData = {}
const columnData = cloneDeep(this.config.option?.columnData)
value.forEach((item, index) => {
sortedColumnData[item] = columnData[item]
})
this.config.option.columnData = sortedColumnData
this.$store.commit('bigScreen/changeActiveItemConfig', this.config)
},
changeCustomProps (value, setting) {
this.config.setting = this.config.setting.map(item => {
if (item.field === setting.field) {
item.value = value
}
return item
})
}
// 改变缓存数据集key
// changeCacheBusinessKey (id) {
// // 根据id在缓存中获取fields
// this.fieldsList = this.cacheDataSets?.find(cache => cache.dataSetId === id)?.fields
// this.params = this.cacheDataSets?.find(cache => cache.dataSetId === id)?.params
// }
}
}
</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;
}
}
.form {
padding: 12px;
}
::v-deep .el-tag__close.el-icon-close::before {
color: #fff;
}
::v-deep .el-tag__close.el-icon-close {
top: -1px;
&:hover {
background-color:var(--bs-el-color-primary);
}
}
.opt-wrap{
margin-top: 10px;
}
.link-set-item {
position: relative;
border: 1px solid #f5f7fa;
padding: 30px 16px 10px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin: 10px;
.del-icon {
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
font-size: 20px;
color: #f00;
}
.opt-wrap {
display: flex;
justify-content: center;
}
}
//表达式样式
.expression{
&:hover{
cursor: pointer;
}
}
// 修改设置面板样式
.data-setting-box{
.data-setting-data-box{
.lc-field-head{
height: 30px;
.lc-field-title{
position: relative;
padding-left: 12px;
line-height: 30px;
height: 30px;
&:after{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
content: '';
width: 4px;
height: 14px;
background-color: var(--bs-el-color-primary);
}
}
}
}
}
</style>