<template>
|
<div style="width: 100%;height:100%;background: #e3e5ec;overflow: hidden">
|
<el-row style="background: rgba(228, 230, 236, 0.9);">
|
<el-row class="cptTitle">
|
<el-col :span="24"><div>{{configBarShow ? '组件配置':'大屏配置'}}</div></el-col>
|
</el-row>
|
<el-tabs v-show="configBarShow" v-model="configTab" :stretch="true">
|
|
<el-tab-pane label="属性" name="custom">
|
|
<div class="customForm" :style="{height:(height-140)+'px'}" v-if="currentCpt && currentCpt.cptOption">
|
<component :is="currentCpt.cptOptionKey?currentCpt.cptOptionKey: + currentCpt.cptKey+'-option'" :attribute="currentCpt.cptOption.attribute"/>
|
</div>
|
</el-tab-pane>
|
<!-- 展示数据表单需在option.js初始化cptDataForm-->
|
<el-tab-pane label="数据" name="data" v-if="cptDataFormShow">
|
<div class="customForm" :style="{height:(height-140)+'px'}">
|
<el-form size="mini" label-position="top">
|
<el-form-item label="数据类型">
|
<el-radio-group v-model="currentCpt.cptOption.cptDataForm.dataSource" @change="changeDataSource">
|
<el-radio :label="1">静态数据</el-radio>
|
<el-radio :label="2">接口</el-radio>
|
<el-radio :label="3">sql</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="轮询" v-show="currentCpt.cptOption.cptDataForm.dataSource !== 1">
|
<el-switch v-model="dataPollEnable" active-text="开启" inactive-text="关闭"/>
|
</el-form-item>
|
<el-form-item label="轮询时间(s)" v-show="dataPollEnable">
|
<el-input-number v-model="currentCpt.cptOption.cptDataForm.pollTime" :min="0" :max="100" label="描述文字"/>
|
</el-form-item>
|
<el-form-item :label="dataLabels[currentCpt.cptOption.cptDataForm.dataSource - 1]">
|
<vue-json-editor
|
v-show="currentCpt.cptOption.cptDataForm.dataSource === 1"
|
v-model="dataJson" :show-btns="false" :expandedOnStart="true" :mode="'code'"/>
|
<el-input v-show="currentCpt.cptOption.cptDataForm.dataSource === 2"
|
type="textarea" :rows="5" v-model="currentCpt.cptOption.cptDataForm.apiUrl"/>
|
<codemirror class="code" v-show="currentCpt.cptOption.cptDataForm.dataSource === 3"
|
v-model="currentCpt.cptOption.cptDataForm.sql" :options="cmOptions"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" style="width: 100%" @click="refreshCptData">刷新数据</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="坐标" name="basic">
|
<div style="width: 200px; margin: 0 auto">
|
<el-row style="padding: 10px 6px 0 6px">
|
宽度：<el-input-number :min="20" :max="2000" v-model="currentCpt.cptWidth" size="small" />
|
</el-row>
|
<el-row style="padding: 10px 6px 0 6px">
|
高度：<el-input-number :min="20" :max="1500" v-model="currentCpt.cptHeight" size="small"/>
|
</el-row>
|
<el-row style="padding: 10px 6px 0 6px">
|
X 轴：<el-input-number :min="-500" :max="2500" v-model="currentCpt.cptX" size="small"/>
|
</el-row>
|
<el-row style="padding: 10px 6px 0 6px">
|
Y 轴：<el-input-number :min="-500" v-model="currentCpt.cptY" size="small"/>
|
</el-row>
|
<el-row style="padding: 10px 6px 0 6px">
|
Z 轴：<el-input-number :min="1" :max="1800" v-model="currentCpt.cptZ" size="small"/>
|
</el-row>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<div v-show="!configBarShow" style="margin-top: 10px;">
|
<el-form :model="designData" label-width="100px" size="small">
|
<el-form-item label="网站标题">
|
<el-input v-model="designData.title" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="网站描述">
|
<el-input type="textarea" v-model="designData.simpleDesc"></el-input>
|
</el-form-item>
|
<el-form-item label="分辨率X">
|
<el-input-number v-model="designData.scaleX" :min="640" :max="10240" style="width: 100%"/>
|
</el-form-item>
|
<el-form-item label="分辨率Y">
|
<el-input-number v-model="designData.scaleY" :min="320" :max="10240" style="width: 100%"/>
|
</el-form-item>
|
<el-form-item label="背景颜色">
|
<ColorPicker v-model="designData.bgColor" show-alpha></ColorPicker>
|
</el-form-item>
|
<el-form-item label="背景图片">
|
<div v-if="designData.bgImg" style="width: 100%;height: 100%;position: relative">
|
<img :src="fileUrl+designData.bgImg" style="width: 100%;height: 100%;"/>
|
<i style="position: absolute;z-index: 6;right: 0;font-size: 20px;color: #FFCCCC"
|
class="el-icon-delete" @click.stop="handleRemove"></i>
|
</div>
|
<div v-else class="uploadItem" @click="showGallery">
|
<i style="font-size: 40px;color: #aaa" class="el-icon-plus"></i>
|
</div>
|
</el-form-item>
|
<el-form-item label="个性链接">
|
<el-input disabled v-model="designData.id" autocomplete="off"/>
|
</el-form-item>
|
<el-form-item label="访问码">
|
<el-input v-model="designData.viewCode" autocomplete="off"/>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-row>
|
|
<gallery ref="gallery" @confirmCheck="confirmCheck"/>
|
</div>
|
</template>
|
|
<script>
|
import { isJSON } from '@/utils/myutils';
|
import vueJsonEditor from 'vue-json-editor';
|
import { codemirror } from 'vue-codemirror';
|
import 'codemirror/lib/codemirror.css';
|
import 'codemirror/keymap/sublime'; //sublime编辑器效果
|
import 'codemirror/theme/dracula.css'; // 配置里面也需要theme设置为monokai
|
import 'codemirror/mode/sql/sql.js'; // 配置里面也需要mode设置为vue
|
import 'codemirror/addon/selection/active-line';
|
import {fileUrl} from "/env";
|
import Gallery from "@/components/gallery";
|
import ColorPicker from "@/components/color-picker/index.vue";
|
|
export default {
|
name: 'configBar',
|
props: {
|
currentCpt: Object,
|
designData: Object,
|
height:Number
|
},
|
components: {
|
ColorPicker,
|
Gallery,
|
vueJsonEditor,
|
codemirror,
|
},
|
watch: {
|
currentCpt(newVal) {
|
this.cptDataFormShow = false;
|
if (!newVal || !newVal.cptOption) {
|
this.configBarShow = false;//清空时
|
} else {
|
if (this.currentCpt.cptOption.cptDataForm) {
|
this.cptDataFormShow = true;
|
} else {
|
this.configTab = 'custom'; //解決上一組件沒有数据表单导致tab栏未选中bug
|
}
|
}
|
},
|
},
|
computed: {
|
dataPollEnable: {
|
get() {
|
return !!(
|
this.currentCpt.cptOption.cptDataForm &&
|
this.currentCpt.cptOption.cptDataForm.pollTime &&
|
this.currentCpt.cptOption.cptDataForm.pollTime !== 0
|
);
|
},
|
set(newValue) {
|
if (newValue) {
|
this.currentCpt.cptOption.cptDataForm.pollTime = 8;
|
} else {
|
this.currentCpt.cptOption.cptDataForm.pollTime = 0;
|
this.refreshCptData(); //清除定时器
|
}
|
return newValue;
|
},
|
},
|
dataJson: {
|
get() {
|
if (isJSON(this.currentCpt.cptOption.cptDataForm.dataText)) {
|
return JSON.parse(this.currentCpt.cptOption.cptDataForm.dataText);
|
} else {
|
return {};
|
}
|
},
|
set(newValue) {
|
this.currentCpt.cptOption.cptDataForm.dataText = JSON.stringify(newValue);
|
},
|
},
|
},
|
data() {
|
return {
|
color:'#00f',
|
fileUrl:fileUrl,
|
cptDataFormShow: false,
|
configTab: 'custom',
|
dataLabels: ['数据', '接口地址', 'sql'],
|
configBarShow: false,
|
hasJsonFlag: true,
|
cmOptions: {
|
tabSize: 4, // tab的空格个数
|
theme: 'dracula', //主题样式
|
lineNumbers: true, //是否显示行数
|
lineWrapping: true, //是否自动换行
|
styleActiveLine: true, //line选择是是否加亮
|
matchBrackets: true, //括号匹配
|
mode: 'text/x-sparksql', //实现javascript代码高亮
|
readOnly: false, //只读
|
|
keyMap: 'default',
|
extraKeys: { tab: 'autocomplete' },
|
foldGutter: true,
|
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
|
hintOptions: {
|
completeSingle: false,
|
tables: {},
|
},
|
},
|
};
|
},
|
methods: {
|
confirmCheck(fileUrl){
|
this.designData.bgImg = fileUrl;
|
},
|
showGallery(){
|
this.$refs.gallery.opened();
|
},
|
handleRemove(){
|
this.designData.bgImg = ''
|
},
|
changeDataSource(val) {
|
//静态数据不显示轮询按钮
|
if (val === 1) {
|
this.currentCpt.cptOption.cptDataForm.pollTime = 0;
|
}
|
},
|
// 刷新数据，调用父组件(index)中refreshCptData方法
|
// 在父组件中再调用选中图层中的refreshCptData方法
|
// 图层中的refreshCptData方法再自行调后端接口渲染数据，文本框的内容和数据类型组装在option.cptDataForm中
|
refreshCptData() {
|
this.$emit('refreshCptData');
|
},
|
showCptConfig() {
|
this.configBarShow = true;
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
.cptTitle {line-height: 35px;text-align: center;background: #3f4b5f;color: #fff;}
|
.closeItem:hover {cursor: pointer;background: #2b3340;}
|
.customForm {padding: 0 6px 0 4px;overflow-y: scroll}
|
.uploadItem{width: 120px;height: 120px;text-align: center;line-height: 120px;border: 1px solid #ddd;cursor: pointer}
|
</style>
|
