1002 lines
39 KiB
Vue
1002 lines
39 KiB
Vue
<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="['texts','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', 'candlestick'].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.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>
|
||
<!--分组-->
|
||
<el-form-item v-if="config.option.displayOption.seriesField.enable"
|
||
:label="config.option.displayOption.seriesField.label" prop="dataSource.metricField"
|
||
class="data-form-item">
|
||
<el-select v-model="config.dataSource.seriesField" class="bs-el-select" popper-class="bs-el-select"
|
||
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>
|
||
<!-- K线图数据配置 -->
|
||
<template v-else-if="config.type === 'candlestick'">
|
||
<el-form-item v-for="(fieldItem, i) in fieldNameMapping" :key="i" prop="dataSource.xField"
|
||
class="data-form-item" :label="fieldItem.desc">
|
||
<el-select v-model="config.dataSource[fieldItem.name]" :multiple="fieldItem.multiple" 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 {
|
||
fieldNameMapping: [ // k线图的字段列表
|
||
{
|
||
name: 'xfield',
|
||
desc: 'X轴',
|
||
multiple: false
|
||
},
|
||
{
|
||
name: 'openField',
|
||
desc: '开盘价',
|
||
multiple: false
|
||
},
|
||
{
|
||
name: 'closeField',
|
||
desc: '收盘价',
|
||
multiple: false
|
||
},
|
||
{
|
||
name: 'lowField',
|
||
desc: '最低价',
|
||
multiple: false
|
||
},
|
||
{
|
||
name: 'highField',
|
||
desc: '最高价',
|
||
multiple: false
|
||
}
|
||
],
|
||
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>
|