Merge remote-tracking branch 'origin/master'
hong.yang
1 year ago
commit
28a14968ab
@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="表达式"
|
||||
width="60%"
|
||||
:visible.sync="formVisible"
|
||||
:append-to-body="false"
|
||||
class="bs-dialog-wrap bs-el-dialog"
|
||||
>
|
||||
<div class="main-box">
|
||||
<div class="left-box">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData"
|
||||
:indent="0"
|
||||
:props="{ label: 'label', children: 'children' }"
|
||||
:default-expand-all="true"
|
||||
:highlight-current="true"
|
||||
:expand-on-click-node="false"
|
||||
class="bs-el-tree tree-box"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="codemirror-wrap">
|
||||
<codemirror
|
||||
ref="codemirrorRef"
|
||||
v-model="currentConfig.expression"
|
||||
class="codemirror-box"
|
||||
:options="codemirrorOption"
|
||||
@dragover.prevent
|
||||
/>
|
||||
<el-button
|
||||
class="btn-box"
|
||||
type="primary"
|
||||
@click="executeScript"
|
||||
>
|
||||
运行脚本
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="script-content-box">
|
||||
{{ scriptContent }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
class="bs-el-button-default cancel"
|
||||
@click="cancel"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="sure"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { codemirror } from 'vue-codemirror'
|
||||
import 'codemirror/mode/javascript/javascript'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import 'codemirror/theme/nord.css'
|
||||
import { mapMutations, mapState } from 'vuex'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
export default {
|
||||
name: 'ExpressionDialog',
|
||||
components: {
|
||||
codemirror
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
scriptContent: '', // 脚本执行的内容
|
||||
expression: '123',
|
||||
formVisible: false,
|
||||
codemirrorOption: {
|
||||
mode: 'text/javascript',
|
||||
lineNumbers: true,
|
||||
lineWrapping: true,
|
||||
theme: 'nord',
|
||||
extraKey: { Ctrl: 'autocomplete' },
|
||||
hintOptions: {
|
||||
completeSingle: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
dataset: state => state.bigScreen.dataset,
|
||||
computedDatas: state => state.bigScreen.computedDatas
|
||||
}),
|
||||
// 获取树节点数据
|
||||
treeData () {
|
||||
const list = []
|
||||
for (const item in this.dataset) {
|
||||
const fields = Object.keys(this.dataset[item][0])
|
||||
const children = fields.map((field) => {
|
||||
return {
|
||||
label: field,
|
||||
code: item,
|
||||
value: `dataset.${item}[0].${field}`
|
||||
}
|
||||
})
|
||||
list.push({
|
||||
label: item,
|
||||
code: item,
|
||||
value: `dataset.${item}`,
|
||||
children
|
||||
})
|
||||
}
|
||||
for (const item in this.computedDatas) {
|
||||
list.push({
|
||||
label: item,
|
||||
code: item,
|
||||
value: `computedDatas.${item}`
|
||||
})
|
||||
}
|
||||
return list
|
||||
},
|
||||
currentConfig () {
|
||||
return cloneDeep(this.config)
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created () {},
|
||||
mounted () {},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
changeChartConfig: 'bigScreen/changeChartConfig'
|
||||
}),
|
||||
init () {
|
||||
this.formVisible = true
|
||||
},
|
||||
// 运行脚本
|
||||
executeScript () {
|
||||
// eslint-disable-next-line no-new-func
|
||||
const result = new Function('dataset', 'computedDatas', this.currentConfig.expression)
|
||||
this.scriptContent = result(this.dataset, this.computedDatas)
|
||||
},
|
||||
// 点击树节点将数据添加到脚本编辑器中
|
||||
handleNodeClick (node, data, nodeObj) {
|
||||
console.log(node, data, nodeObj)
|
||||
const str = node.value
|
||||
const code = node.code
|
||||
this.$refs.codemirrorRef.codemirror.setValue(this.currentConfig.expression + ' + ' + str)
|
||||
// 同时将点击的数据存在expressionCodes中
|
||||
if (this.currentConfig.expressionCodes && Array.isArray(this.currentConfig.expressionCodes)) {
|
||||
this.currentConfig.expressionCodes.push(code)
|
||||
}
|
||||
},
|
||||
cancel () {
|
||||
this.formVisible = false
|
||||
},
|
||||
sure () {
|
||||
this.formVisible = false
|
||||
this.changeChartConfig(this.currentConfig)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../assets/style/bsTheme.scss';
|
||||
.bs-dialog-wrap{
|
||||
::v-deep.el-dialog__body{
|
||||
min-height: 500px;
|
||||
}
|
||||
}
|
||||
.main-box{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
.left-box{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
.tree-box{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.right-box{;
|
||||
flex: 3 ;
|
||||
height: 100%;
|
||||
.codemirror-wrap{
|
||||
height: 50%;
|
||||
position: relative;
|
||||
.btn-box{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
.codemirror-box {
|
||||
height: 100% !important;
|
||||
::v-deep .CodeMirror {
|
||||
height: 100% !important;
|
||||
font-family: Helvetica, Tahoma;
|
||||
}
|
||||
}
|
||||
.script-content-box{
|
||||
padding:10px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue