ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://gitee.com/anji-plus/report

Browse Source
yanzili 3 years ago
parent 564289a4ae ddb997793d
commit 09172e102c
7 changed files with 344 additions and 289 deletions
Show Stats Download Patch File Download Diff File

1
report-ui/package.json
Unescape Escape View File

@ -13,6 +13,7 @@
}, },
"dependencies": { "dependencies": {
"@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0", "@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0",
"@smallwei/avue": "^2.8.14",
"axios": "0.18.0", "axios": "0.18.0",
"chokidar": "^3.5.2", "chokidar": "^3.5.2",
"codemirror": "^5.58.1", "codemirror": "^5.58.1",

4
report-ui/src/main.js
Unescape Escape View File

@ -27,6 +27,10 @@ import '@/permission'
import '@/extend' import '@/extend'
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);
// enable element zh-cn // enable element zh-cn
Vue.use(ElementUI, { zhLocale }) Vue.use(ElementUI, { zhLocale })

506
report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
Unescape Escape View File

@ -7,182 +7,242 @@
!--> !-->
<template> <template>
<div class="collapse-input-style"> <div class="collapse-input-style">
<el-form label-width="80px" <el-form label-width="80px" label-position="left">
label-position="left">
<template v-for="(item, index) in options"> <template v-for="(item, index) in options">
<div v-if="isShowForm(item, '[object Object]')" <div v-if="isShowForm(item, '[object Object]')" :key="index">
:key="index"> <el-form-item
<el-form-item v-if="inputShow[item.name]" v-if="inputShow[item.name]"
:label="item.label" :label="item.label"
:prop="item.name" :prop="item.name"
:required="item.required"> :required="item.required"
<el-input-number v-if="item.type == 'el-input-number'" >
size="mini" <el-input-number
style="width:100%" v-if="item.type == 'el-input-number'"
v-model="formData[item.name]" size="mini"
controls-position="right" style="width:100%"
:placeholder="item.placeholder" v-model="formData[item.name]"
@change="changed($event, item.name)" /> controls-position="right"
:placeholder="item.placeholder"
@change="changed($event, item.name)"
/>
<el-input v-if="item.type == 'el-input-text'" <el-input
v-model.trim="formData[item.name]" v-if="item.type == 'el-input-text'"
type="text" v-model.trim="formData[item.name]"
size="mini" type="text"
placeholder="请输入内容" size="mini"
clearable placeholder="请输入内容"
@change="changed($event, item.name)" /> clearable
@change="changed($event, item.name)"
/>
<el-input v-if="item.type == 'el-input-textarea'" <el-input
v-model.trim="formData[item.name]" v-if="item.type == 'el-input-textarea'"
type="textarea" v-model.trim="formData[item.name]"
size="mini" type="textarea"
rows="2" size="mini"
placeholder="请输入内容" rows="2"
@change="changed($event, item.name)" /> placeholder="请输入内容"
@change="changed($event, item.name)"
/>
<el-switch v-if="item.type == 'el-switch'" <el-switch
v-model="formData[item.name]" v-if="item.type == 'el-switch'"
size="mini" v-model="formData[item.name]"
placeholder="请输入内容" size="mini"
@change="changed($event, item.name)" /> placeholder="请输入内容"
@change="changed($event, item.name)"
/>
<ColorPicker v-if="item.type == 'vue-color'" <ColorPicker
v-model="formData[item.name]" v-if="item.type == 'vue-color'"
@change="(val) => changed(val, item.name)" /> v-model="formData[item.name]"
@change="val => changed(val, item.name)"
/>
<el-upload v-if="item.type == 'el-upload-picture'" <el-upload
size="mini" v-if="item.type == 'el-upload-picture'"
action="https://jsonplaceholder.typicode.com/posts/" size="mini"
list-type="picture-card" /> action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
/>
<el-radio-group v-if="item.type == 'el-radio-group'" <el-radio-group
v-model="formData[item.name]" v-if="item.type == 'el-radio-group'"
@change="(val) => changed(val, item.name)"> v-model="formData[item.name]"
<el-radio v-for="itemChild in item.selectOptions" @change="val => changed(val, item.name)"
:key="itemChild.code" >
:label="itemChild.code">{{ itemChild.name }}</el-radio> <el-radio
v-for="itemChild in item.selectOptions"
:key="itemChild.code"
:label="itemChild.code"
>{{ itemChild.name }}</el-radio
>
</el-radio-group> </el-radio-group>
<el-select v-if="item.type == 'el-select'" <el-select
size="mini" v-if="item.type == 'el-select'"
v-model="formData[item.name]" size="mini"
clearable v-model="formData[item.name]"
placeholder="请选择" clearable
@change="(val) => changed(val, item.name)"> placeholder="请选择"
<el-option v-for="itemChild in item.selectOptions" @change="val => changed(val, item.name)"
:key="itemChild.code" >
:label="itemChild.name" <el-option
:value="itemChild.code" /> v-for="itemChild in item.selectOptions"
:key="itemChild.code"
:label="itemChild.name"
:value="itemChild.code"
/>
</el-select> </el-select>
<el-slider v-if="item.type == 'el-slider'" <el-slider
v-model="formData[item.name]" v-if="item.type == 'el-slider'"
@change="(val) => changed(val, item.name)" /> v-model="formData[item.name]"
@change="val => changed(val, item.name)"
/>
<el-button v-if="item.type == 'el-button'" <el-button
type="primary" v-if="item.type == 'el-button'"
plain type="primary"
@click="addStaticData">编辑</el-button> plain
@click="addStaticData"
>编辑</el-button
>
<!-- 弹窗 --> <!-- 弹窗 -->
<el-dialog title="代码编辑" <el-dialog
:visible.sync="dialogVisibleStaticData" title="代码编辑"
width="50%" :visible.sync="dialogVisibleStaticData"
:before-close="handleClose"> width="50%"
<codemirror v-model.trim="formData[item.name]" :before-close="handleClose"
class="code-mirror" >
:options="optionsJavascript" <codemirror
style="height: 190px" /> v-model.trim="formData[item.name]"
<span slot="footer" class="code-mirror"
class="dialog-footer"> :options="optionsJavascript"
<el-button @click="dialogVisibleStaticData = false">取 消</el-button> style="height: 190px"
<el-button type="primary" />
@click="saveData">确 定</el-button> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleStaticData = false"
>取 消</el-button
>
<el-button type="primary" @click="saveData">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</el-form-item> </el-form-item>
<dynamicComponents v-if="item.type == 'dycustComponents' && inputShow[item.name]" <dynamicComponents
v-model="formData[item.name]" v-if="item.type == 'dycustComponents' && inputShow[item.name]"
:chart-type="item.chartType" /> v-model="formData[item.name]"
:chart-type="item.chartType"
/>
</div> </div>
<div v-else-if="isShowForm(item, '[object Array]')" <div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index">
:key="'a-' + index">
<el-collapse accordion> <el-collapse accordion>
<el-collapse-item v-for="(itemChild, indexChild) in item" <el-collapse-item
:key="indexChild" v-for="(itemChild, indexChild) in item"
:title="itemChild.name" :key="indexChild"
:name="indexChild"> :title="itemChild.name"
:name="indexChild"
>
<template v-for="(itemChildList, idx) in itemChild.list"> <template v-for="(itemChildList, idx) in itemChild.list">
<el-form-item :key="idx" <el-form-item
:label="itemChildList.label" :key="idx"
:prop="itemChildList.name" :label="itemChildList.label"
:required="itemChildList.required"> :prop="itemChildList.name"
<el-input-number v-if="itemChildList.type == 'el-input-number'" :required="itemChildList.required"
size="mini" >
style="width:100%" <el-input-number
v-model="formData[itemChildList.name]" v-if="itemChildList.type == 'el-input-number'"
controls-position="right" size="mini"
:placeholder="itemChildList.placeholder" style="width:100%"
@change="changed($event, itemChildList.name)" /> v-model="formData[itemChildList.name]"
controls-position="right"
:placeholder="itemChildList.placeholder"
@change="changed($event, itemChildList.name)"
/>
<el-input v-if="itemChildList.type == 'el-input-text'" <el-input
v-model.trim="formData[itemChildList.name]" v-if="itemChildList.type == 'el-input-text'"
type="text" v-model.trim="formData[itemChildList.name]"
size="mini" type="text"
placeholder="请输入内容" size="mini"
clearable placeholder="请输入内容"
@change="changed($event, itemChildList.name)" /> clearable
@change="changed($event, itemChildList.name)"
/>
<el-input v-if="itemChildList.type == 'el-input-textarea'" <el-input
v-model.trim="formData[itemChildList.name]" v-if="itemChildList.type == 'el-input-textarea'"
size="mini" v-model.trim="formData[itemChildList.name]"
type="textarea" size="mini"
rows="2" type="textarea"
placeholder="请输入内容" rows="2"
@change="changed($event, itemChildList.name)" /> placeholder="请输入内容"
@change="changed($event, itemChildList.name)"
/>
<el-switch v-if="itemChildList.type == 'el-switch'" <el-switch
v-model="formData[itemChildList.name]" v-if="itemChildList.type == 'el-switch'"
placeholder="请输入内容" v-model="formData[itemChildList.name]"
size="mini" placeholder="请输入内容"
@change="changed($event, itemChildList.name)" /> size="mini"
@change="changed($event, itemChildList.name)"
/>
<ColorPicker v-if="itemChildList.type == 'vue-color'" <ColorPicker
v-model="formData[itemChildList.name]" v-if="itemChildList.type == 'vue-color'"
@change="(val) => changed(val, itemChildList.name)" /> v-model="formData[itemChildList.name]"
@change="val => changed(val, itemChildList.name)"
/>
<el-upload v-if="itemChildList.type == 'el-upload-picture'" <el-upload
size="mini" v-if="itemChildList.type == 'el-upload-picture'"
action="https://jsonplaceholder.typicode.com/posts/" size="mini"
list-type="picture-card" /> action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
/>
<el-radio-group v-if="itemChildList.type == 'el-radio-group'" <el-radio-group
v-model="formData[itemChildList.name]" v-if="itemChildList.type == 'el-radio-group'"
@change="(val) => changed(val, itemChildList.name)"> v-model="formData[itemChildList.name]"
<el-radio v-for="it in itemChildList.selectOptions" @change="val => changed(val, itemChildList.name)"
:key="it.code" >
:label="it.code">{{ it.name }}</el-radio> <el-radio
v-for="it in itemChildList.selectOptions"
:key="it.code"
:label="it.code"
>{{ it.name }}</el-radio
>
</el-radio-group> </el-radio-group>
<el-select v-if="itemChildList.type == 'el-select'" <el-select
size="mini" v-if="itemChildList.type == 'el-select'"
v-model="formData[itemChildList.name]" size="mini"
clearable v-model="formData[itemChildList.name]"
placeholder="请选择" clearable
@change="(val) => changed(val, itemChildList.name)"> placeholder="请选择"
<el-option v-for="it in itemChildList.selectOptions" @change="val => changed(val, itemChildList.name)"
:key="it.code" >
:label="it.name" <el-option
:value="it.code" /> v-for="it in itemChildList.selectOptions"
:key="it.code"
:label="it.name"
:value="it.code"
/>
</el-select> </el-select>
<el-slider v-if="itemChildList.type == 'el-slider'" <el-slider
v-model="formData[itemChildList.name]" v-if="itemChildList.type == 'el-slider'"
@change="(val) => changed(val, itemChildList.name)" /> v-model="formData[itemChildList.name]"
@change="val => changed(val, itemChildList.name)"
/>
</el-form-item> </el-form-item>
<customColorComponents v-if="itemChildList.type == 'customColor'" <customColorComponents
:key="'b-' + idx" v-if="itemChildList.type == 'customColor'"
v-model="formData[itemChildList.name]" /> :key="'b-' + idx"
v-model="formData[itemChildList.name]"
/>
</template> </template>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
@ -193,44 +253,44 @@
</template> </template>
<script> <script>
import ColorPicker from './colorPicker.vue' import ColorPicker from "./colorPicker.vue";
import { codemirror } from 'vue-codemirror' // 引入codeMirror全局实例 import { codemirror } from "vue-codemirror"; // 引入codeMirror全局实例
import 'codemirror/lib/codemirror.css' // 核心样式 import "codemirror/lib/codemirror.css"; // 核心样式
import 'codemirror/theme/cobalt.css' // 引入主题后还需要在 options 中指定主题才会生效 import "codemirror/theme/cobalt.css"; // 引入主题后还需要在 options 中指定主题才会生效
// language // language
import 'codemirror/mode/vue/vue.js' import "codemirror/mode/vue/vue.js";
import 'codemirror/mode/javascript/javascript.js' import "codemirror/mode/javascript/javascript.js";
import 'codemirror/mode/sql/sql.js' import "codemirror/mode/sql/sql.js";
import 'codemirror/mode/shell/shell.js' import "codemirror/mode/shell/shell.js";
import dynamicComponents from './dynamicComponents.vue' import dynamicComponents from "./dynamicComponents.vue";
import customColorComponents from './customColorComponents' import customColorComponents from "./customColorComponents";
export default { export default {
name: 'DynamicForm', name: "DynamicForm",
components: { components: {
ColorPicker, ColorPicker,
codemirror, codemirror,
dynamicComponents, dynamicComponents,
customColorComponents, customColorComponents
}, },
model: { model: {
prop: 'value', prop: "value",
event: 'input', event: "input"
}, },
props: { props: {
options: Array, options: Array,
value: { value: {
type: [Object], type: [Object],
default: () => { }, default: () => {}
}, }
}, },
data () { data() {
return { return {
formData: {}, formData: {},
inputShow: {}, // 控制表单是否显示 inputShow: {}, // 控制表单是否显示
dialogVisibleStaticData: false, dialogVisibleStaticData: false,
validationRules: '', validationRules: "",
optionsJavascript: { optionsJavascript: {
mode: 'text/javascript', mode: "text/javascript",
tabSize: 2, // 缩进格式 tabSize: 2, // 缩进格式
// theme: 'cobalt', // monokai主题，对应主题库 JS 需要提前引入 // theme: 'cobalt', // monokai主题，对应主题库 JS 需要提前引入
lineNumbers: true, // 显示行号 lineNumbers: true, // 显示行号
@ -238,104 +298,106 @@ export default {
styleActiveLine: true, // 高亮选中行 styleActiveLine: true, // 高亮选中行
hintOptions: { hintOptions: {
completeSingle: true, // 当匹配只有一项的时候是否自动补全 completeSingle: true // 当匹配只有一项的时候是否自动补全
}, }
}, }
} };
}, },
watch: { watch: {
value (newValue, oldValue) { value(newValue, oldValue) {
this.formData = newValue || {} this.formData = newValue || {};
},
options () {
this.setDefaultValue()
this.isShowData()
},
formData: {
handler () {
this.$emit('onChanged', this.formData)
},
deep: true,
}, },
options(val) {
this.setDefaultValue();
this.isShowData();
}
// formData: {
// handler () {
// this.$emit('onChanged', this.formData)
// },
// deep: true,
// },
}, },
created () { created() {
this.isShowData() this.isShowData();
this.setDefaultValue() this.setDefaultValue();
}, },
mounted () { }, mounted() {},
methods: { methods: {
// 无论哪个输入框改变 都需要触发事件 将值回传 // 无论哪个输入框改变 都需要触发事件 将值回传
changed (val, key) { changed(val, key) {
if (val.extend) { if (val.extend) {
this.$set(this.formData, key, val.value) this.$set(this.formData, key, val.value);
} else { } else {
this.$set(this.formData, key, val) this.$set(this.formData, key, val);
} }
this.$emit('onChanged', this.formData) this.$emit("onChanged", this.formData);
// key为当前用户操作的表单组件 // key为当前用户操作的表单组件
for (var i = 0; i < this.options.length; i++) { for (var i = 0; i < this.options.length; i++) {
var item = this.options[i] var item = this.options[i];
if (item.relactiveDom == key) { if (item.relactiveDom == key) {
this.inputShow[item.name] = val == item.relactiveDomValue this.inputShow[item.name] = val == item.relactiveDomValue;
this.inputShow = Object.assign({}, this.inputShow) this.inputShow = Object.assign({}, this.inputShow);
} }
} }
}, },
saveData () { saveData() {
this.$emit('onChanged', this.formData) this.$emit("onChanged", this.formData);
this.dialogVisibleStaticData = false this.dialogVisibleStaticData = false;
}, },
// 静态数据 // 静态数据
addStaticData () { addStaticData() {
this.dialogVisibleStaticData = true this.dialogVisibleStaticData = true;
}, },
handleClose () { handleClose() {
this.dialogVisibleStaticData = false this.dialogVisibleStaticData = false;
}, },
// 组件属性 数据是否展示动态还是静态数据 // 组件属性 数据是否展示动态还是静态数据
isShowData () { isShowData() {
let currentData = {} let currentData = {};
const data = [] const data = [];
for (let i = 0; i < this.options.length; i++) { for (let i = 0; i < this.options.length; i++) {
// 添加默认的inputShow值 // 添加默认的inputShow值
this.inputShow[this.options[i].name] = true this.inputShow[this.options[i].name] = true;
if (this.options[i].selectValue) { if (this.options[i].selectValue) {
currentData = this.options[i] currentData = this.options[i];
} else { } else {
data.push(this.options[i]) data.push(this.options[i]);
} }
} }
data.forEach((el) => { data.forEach(el => {
if (el.relactiveDomValue != currentData.value) { if (el.relactiveDomValue != currentData.value) {
this.inputShow[el.name] = false this.inputShow[el.name] = false;
} }
}) });
}, },
// 组件拖入时 赋值 // 组件拖入时 赋值
setDefaultValue () { setDefaultValue() {
if (this.options && this.options.length > 0) { if (this.options && this.options.length > 0) {
for (let i = 0; i < this.options.length; i++) { for (let i = 0; i < this.options.length; i++) {
const obj = this.options[i] const obj = this.options[i];
if (Object.prototype.toString.call(obj) == '[object Object]') { if (Object.prototype.toString.call(obj) == "[object Object]") {
this.formData[this.options[i].name] = this.deepClone(this.options[i].value) this.formData[this.options[i].name] = this.deepClone(
} else if (Object.prototype.toString.call(obj) == '[object Array]') { this.options[i].value
);
} else if (Object.prototype.toString.call(obj) == "[object Array]") {
for (let j = 0; j < obj.length; j++) { for (let j = 0; j < obj.length; j++) {
const list = obj[j].list const list = obj[j].list;
list.forEach((el) => { list.forEach(el => {
this.formData[el.name] = el.value this.formData[el.name] = el.value;
}) });
} }
} }
} }
this.formData = Object.assign({}, this.formData) this.formData = Object.assign({}, this.formData);
} }
}, },
// 是否显示 那种格式 // 是否显示 那种格式
isShowForm (val, type) { isShowForm(val, type) {
return Object.prototype.toString.call(val) == type return Object.prototype.toString.call(val) == type;
}, }
}, }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

52
report-ui/src/views/report/bigscreen/designer/index.vue
Unescape Escape View File

@ -84,6 +84,7 @@
width: bigscreenWidthInWorkbench + 'px', width: bigscreenWidthInWorkbench + 'px',
height: bigscreenHeightInWorkbench + 'px' height: bigscreenHeightInWorkbench + 'px'
}" }"
@mousedown="handleMouseDown"
> >
<vue-ruler-tool <vue-ruler-tool
v-model="dashboard.presetLine" v-model="dashboard.presetLine"
@ -110,9 +111,10 @@
'background-origin': 'initial', 'background-origin': 'initial',
'background-clip': 'initial' 'background-clip': 'initial'
}" }"
@click="setOptionsOnClickScreen" @click.self="setOptionsOnClickScreen"
> >
<widget <widget
ref="widgets"
v-for="(widget, index) in widgets" v-for="(widget, index) in widgets"
:key="index" :key="index"
v-model="widget.value" v-model="widget.value"
@ -121,6 +123,7 @@
:bigscreen="{ bigscreenWidth, bigscreenHeight }" :bigscreen="{ bigscreenWidth, bigscreenHeight }"
@onActivated="setOptionsOnClickWidget" @onActivated="setOptionsOnClickWidget"
@contextmenu.prevent.native="rightClick($event, index)" @contextmenu.prevent.native="rightClick($event, index)"
@click.prevent.native="widgetsClick(index)"
/> />
</div> </div>
</vue-ruler-tool> </vue-ruler-tool>
@ -519,27 +522,41 @@ export default {
}, },
// 如果是点击某个组件，获取该组件的配置项 // 如果是点击某个组件，获取该组件的配置项
setOptionsOnClickWidget(index) { setOptionsOnClickWidget(obj) {
// 选中不同的组件 右侧都显示第一栏 if (obj.index < 0 || obj.index >= this.widgets.length) {
this.activeName = "first";
this.screenCode = "";
if (typeof index == "number") {
if (index < 0 || index >= this.widgets.length) {
return;
}
this.widgetIndex = index;
this.widgetOptions = this.deepClone(this.widgets[index]["options"]);
return; return;
} else { }
// 执行传递过来的值 this.widgetIndex = obj.index;
this.widgets[index.index].value.position = index.obj; this.widgetOptions = this.deepClone(this.widgets[obj.index]["options"]);
this.widgets[obj.index].value.position = obj;
this.widgets[obj.index].options.position.forEach(el => {
for (const key in obj) {
if (el.name == key) {
el.value = obj[key];
}
}
});
console.log(this.widgets);
},
widgetsClick(index) {
const draggableArr = this.$refs.widgets;
for (let i = 0; i < draggableArr.length; i++) {
if (i == index) {
this.$refs.widgets[i].$refs.draggable.setActive(true);
} else {
this.$refs.widgets[i].$refs.draggable.setActive(false);
}
}
},
handleMouseDown() {
console.log(1);
const draggableArr = this.$refs.widgets;
for (let i = 0; i < draggableArr.length; i++) {
this.$refs.widgets[i].$refs.draggable.setActive(false);
} }
}, },
// 将当前选中的组件，右侧属性值更新 // 将当前选中的组件，右侧属性值更新
widgetValueChanged(key, val) { widgetValueChanged(key, val) {
console.log(key);
console.log(val);
/* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value /* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
widgets: [{ widgets: [{
type: 'widget-text', type: 'widget-text',
@ -559,7 +576,6 @@ export default {
this.setDefaultValue(this.widgets[i].options[key], val); this.setDefaultValue(this.widgets[i].options[key], val);
} }
} }
console.log(this.widgets);
}, },
rightClick(event, index) { rightClick(event, index) {
this.rightClickIndex = index; this.rightClickIndex = index;

67
report-ui/src/views/report/bigscreen/designer/widget/widget.vue
Unescape Escape View File

@ -5,47 +5,21 @@
* @Last Modified time: 2021-3-13 11:04:24 * @Last Modified time: 2021-3-13 11:04:24
!--> !-->
<template> <template>
<!-- <vue-draggable-resizable class="vue-draggalbe" :w="data.position.width" :h="data.position.height" :x="data.position.left" :y="data.position.top" :z="data.position.zIndex" :parent="true" :is-conflict-check="true" :snap="true" :resizable="true" :draggable="true" :prevent-deactivation="false" :active="true" :snap-tolerance="20" :class-name="'widget-container'" :class-name-active="'widget-active'" @activated="onActivated(index)" @resizestop="onResizstop" @dragstop="onDragstop"> <avue-draggable
:width="widgetsWidth"
:height="widgetsHeight"
:left="widgetsLeft"
:top="widgetsTop"
ref="draggable"
:index="index"
@focus="handleFocus"
@blur="handleBlur"
>
<component :is="type" :value="value" /> <component :is="type" :value="value" />
</vue-draggable-resizable> --> </avue-draggable>
<div @click.stop>
<vue-drag-resize
:w="widgetsWidth"
:h="widgetsHeight"
:x="widgetsLeft"
:y="widgetsTop"
:z="widgetsZIndex"
:minw="10"
:minh="10"
:parent-w="bigscreen.bigscreenWidth"
:parent-h="bigscreen.bigscreenHeight"
:snap-tolerance="20"
:is-conflict-check="true"
:class-name="'widget-container'"
:class-name-active="'widget-active'"
:prevent-deactivation="false"
:is-active="true"
:is-draggable="true"
:is-resizable="true"
:parent-limitation="true"
:snap-to-grid="false"
:aspect-ratio="false"
@clicked="onActivated(index)"
@activated="onActivated(index)"
@dragstop="ev => onDragstop(ev, index)"
@resizing="ev => onResizing(ev, index)"
>
<component :is="type" :value="value" />
</vue-drag-resize>
</div>
</template> </template>
<script> <script>
// 大屏设计页面的拖拽插件 https://gitee.com/charact/vue-draggable-resizable-gorkys#dragstop
// import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
// import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
import VueDragResize from "vue-drag-resize";
import widgetHref from "./widgetHref.vue"; import widgetHref from "./widgetHref.vue";
import widgetText from "./widgetText.vue"; import widgetText from "./widgetText.vue";
import WidgetMarquee from "./widgetMarquee.vue"; import WidgetMarquee from "./widgetMarquee.vue";
@ -65,8 +39,6 @@ import WidgetGauge from "./widgetGauge.vue";
export default { export default {
name: "Widget", name: "Widget",
components: { components: {
// VueDraggableResizable,
VueDragResize,
widgetHref, widgetHref,
widgetText, widgetText,
WidgetMarquee, WidgetMarquee,
@ -129,14 +101,14 @@ export default {
}, },
mounted() {}, mounted() {},
methods: { methods: {
onActivated(index) { //获取焦点
this.$emit("onActivated", index); handleFocus({ index, left, top, width, height }) {
}, // console.log(index, left, top, width, height);
onDragstop(obj, index) {
this.$emit("onActivated", { index, obj });
}, },
onResizing(obj, index) { //失去焦点
this.$emit("onActivated", { index, obj }); handleBlur({ index, left, top, width, height }) {
this.$emit("onActivated", { index, left, top, width, height });
this.$refs.draggable.setActive(true);
} }
} }
}; };
@ -153,4 +125,7 @@ export default {
border: 1px dashed #09f; border: 1px dashed #09f;
background-color: rgba(115, 170, 229, 0.5); background-color: rgba(115, 170, 229, 0.5);
} }
.avue-draggable {
padding: 0 !important;
}
</style> </style>

2
report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
Unescape Escape View File

@ -335,8 +335,6 @@ export default {
.echarts { .echarts {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-width: 200px;
min-height: 200px;
overflow: hidden; overflow: hidden;
} }
</style> </style>

1
report-ui/src/views/report/bigscreen/designer/widget/widgetText.vue
Unescape Escape View File

@ -26,7 +26,6 @@ export default {
return this.objToOne(this.options); return this.objToOne(this.options);
}, },
styleColor() { styleColor() {
console.log(this.transStyle);
return { return {
position: this.ispreview ? "absolute" : "static", position: this.ispreview ? "absolute" : "static",
color: this.transStyle.color, color: this.transStyle.color,

Write Preview
Loading…
Cancel
Save