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

update

Browse Source
qianlishi 3 years ago
parent ee658ecd4d
commit 2ba890df07
7 changed files with 325 additions and 237 deletions
Show Stats Download Patch File Download Diff File

5
report-ui/src/mixins/access.js
Unescape Escape View File

@ -88,11 +88,6 @@ export default {
return result return result
} }
}, },
//深拷贝
deepClone(obj){
var temp = JSON.stringify(obj);
return JSON.parse(temp);
},
//从所有字典中，取某个字典的列表 //从所有字典中，取某个字典的列表
getDict(dictname){ getDict(dictname){

152
report-ui/src/mixins/common.js
Unescape Escape View File

@ -4,6 +4,14 @@ export default {
} }
}, },
computed: { computed: {
// 网页高度
bodyWidth() {
return document.body.clientWidth
},
// 网页宽度
bodyHeight() {
return document.body.clientHeight
},
}, },
created () { created () {
}, },
@ -86,22 +94,41 @@ export default {
} }
} }
}, },
objToOne (obj) { // 获取对象类型
var tmpData = {} getObjectType(obj) {
for (var index in obj) { var toString = Object.prototype.toString
if (typeof obj[index] == 'object') { var map = {
var resObj = this.objToOne(obj[index]) '[object Boolean]': 'boolean',
Object.assign(tmpData, resObj) // 这里使用对象合并 '[object Number]': 'number',
} else { '[object String]': 'string',
tmpData[index] = obj[index] '[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object',
} }
if (obj instanceof Element) {
return 'element'
} }
return tmpData return map[toString.call(obj)]
},
isNumber(obj) {
return this.getObjectType(obj) == 'number'
},
isString(obj) {
return this.getObjectType(obj) == 'string'
}, },
isNotNull (val) {
hasOwn(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key)
},
isNotNull(val) {
return !this.isNull(val) return !this.isNull(val)
}, },
isNull (val) { isNull(val) {
// 特殊判断 // 特殊判断
if (val && parseInt(val) === 0) return false if (val && parseInt(val) === 0) return false
const list = ['$parent'] const list = ['$parent']
@ -125,5 +152,108 @@ export default {
} }
return false return false
}, },
// 对象深拷贝
deepClone(data) {
var type = this.getObjectType(data)
var obj
if (type === 'array') {
obj = []
} else if (type === 'object') {
obj = {}
} else {
// 不再具有下一层次
return data
}
if (type === 'array') {
for (var i = 0, len = data.length; i < len; i++) {
data[i] = (() => {
if (data[i] === 0) {
return data[i]
}
return data[i]
})()
if (data[i]) {
delete data[i].$parent
}
obj.push(this.deepClone(data[i]))
}
} else if (type === 'object') {
for (var key in data) {
if (data) {
delete data.$parent
}
obj[key] = this.deepClone(data[key])
}
}
return obj
},
// 合并json
mergeObject() {
var target = arguments[0] || {}
var deep = false
var arr = Array.prototype.slice.call(arguments)
var i = 1
var options, src, key, copy
var isArray = false
if (typeof target === 'boolean') {
deep = target
i++
target = arguments[1]
}
for (; i < arr.length; i++) {
// 循环传入的对象数组
if ((options = arr[i]) != null) {
// 如果当前值不是null，如果是null不做处理
for (key in options) {
// for in循环对象中key
copy = options[key]
src = target[key]
// 如果对象中value值任然是一个引用类型
if (deep && (toString.call(copy) === '[object Object]' || (isArray = toString.call(copy) == '[object Array]'))) {
if (isArray) {
// 如果引用类型是数组
// 如果目标对象target存在当前key，且数据类型是数组，那就还原此值，如果不是就定义成一个空数组;
src = toString.call(src) === '[object Array]' ? src : []
} else {
// 如果目标对象target存在当前key，且数据类型是对象，那就还原此值，如果不是就定义成一个空对象;
src = toString.call(src) === '[object Object]' ? src : {}
}
// 引用类型就再次调用extend，递归，直到此时copy是一个基本类型的值。
target[key] = this.mergeObject(deep, src, copy)
} else if (copy !== undefined && copy !== src) {
// 如果这个值是基本值类型，且不是undefined
target[key] = copy
}
}
}
}
return target
},
// 获取dom在屏幕中的top和left
getDomTopLeftById(id) {
var dom = document.getElementById(id)
var top = 0
var left = 0
if (dom != null) {
top = dom.getBoundingClientRect().top
left = dom.getBoundingClientRect().left
}
return { top: top, left: left }
},
objToOne(obj) {
var tmpData = {}
for (var index in obj) {
if (typeof obj[index] == 'object') {
var resObj = this.objToOne(obj[index])
Object.assign(tmpData, resObj) // 这里使用对象合并
} else {
tmpData[index] = obj[index]
}
}
return tmpData
},
} }
} }

17
report-ui/src/views/report/bigscreen/designer/form/contentMenu.vue
Unescape Escape View File

@ -1,11 +1,6 @@
<template> <template>
<div v-show="visible" <div v-show="visible" class="contentmenu" :style="styleObj">
class="contentmenu" <div class="contentmenu__item" @click="deleteLayer"><svg-icon icon-class="guanbi" /> 删除图层</div>
:style="styleObj">
<div class="contentmenu__item"
@click="deleteLayer">
<!-- <svg-icon icon-class="guanbi" /> -->删除图层
</div>
</div> </div>
</template> </template>
<script> <script>
@ -14,11 +9,11 @@ export default {
styleObj: Object, styleObj: Object,
visible: Boolean, visible: Boolean,
}, },
data () { data() {
return {} return {}
}, },
watch: { watch: {
visible (value) { visible(value) {
if (value) { if (value) {
document.body.addEventListener('click', this.closeMenu) document.body.addEventListener('click', this.closeMenu)
} else { } else {
@ -27,10 +22,10 @@ export default {
}, },
}, },
methods: { methods: {
closeMenu () { closeMenu() {
this.$emit('update:visible', false) this.$emit('update:visible', false)
}, },
deleteLayer () { deleteLayer() {
this.$confirm('是否删除所选图层?', '提示', { this.$confirm('是否删除所选图层?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',

141
report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue
Unescape Escape View File

@ -1,121 +1,134 @@
<template> <template>
<div> <div>
<el-button type="primary" <el-button type="primary" icon="el-icon-plus" plain @click="handleAddClick"
icon="el-icon-plus" >新增</el-button
plain >
@click="handleAddClick">新增</el-button> <el-table :data="formData" style="width: 100%">
<el-table :data="formData" <el-table-column prop="color" label="颜色" align="center">
style="width: 100%">
<el-table-column prop="color"
label="颜色"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="color-box" <span class="color-box" :style="{ background: scope.row.color }" />
:style="{ background: scope.row.color }" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="位置" <el-table-column label="位置" align="center">
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="editor" <span
@click="handleEditorClick(scope.$index, scope.row)"> <i class="el-icon-edit" /> 编辑 </span> class="editor"
@click="handleEditorClick(scope.$index, scope.row)"
>
<i class="el-icon-edit" /> 编辑
</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" <el-table-column label="操作" align="center">
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="editor" <span
@click="handleDeleteClick(scope.$index, scope.row)"> <i class="el-icon-delete" /> 删除 </span> class="editor"
@click="handleDeleteClick(scope.$index, scope.row)"
>
<i class="el-icon-delete" /> 删除
</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-dialog title="新增" <el-dialog
title="新增"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="30%" width="30%"
:before-close="handleClose"> :before-close="handleClose"
>
<el-form> <el-form>
<el-form-item label="颜色"> <el-form-item label="颜色">
<el-input v-model="colorValue" <el-input
v-model="colorValue"
style="width: 200px" style="width: 200px"
placeholder="请输入颜色"> placeholder="请输入颜色"
>
<template slot="append"> <template slot="append">
<el-color-picker v-model="colorValue" <el-color-picker
:predefine="predefineColors" /> v-model="colorValue"
:predefine="predefineColors"
/>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" <span slot="footer" class="dialog-footer">
class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" <el-button type="primary" @click="handleSaveClick">确 定</el-button>
@click="handleSaveClick">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'CustomColorComponents', name: "CustomColorComponents",
model: { model: {
prop: 'formData', prop: "formData",
event: 'input', event: "input"
}, },
props: { props: {
formData: Array, formData: Array
}, },
data () { data() {
return { return {
predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'], predefineColors: [
colorValue: '', "#ff4500",
"#ff8c00",
"#ffd700",
"#90ee90",
"#00ced1",
"#1e90ff",
"#c71585"
],
colorValue: "",
dialogVisible: false, dialogVisible: false,
flag: true, // true 新增， false 编辑 flag: true, // true 新增， false 编辑
indexEditor: -1, // 编辑第几个数据 indexEditor: -1 // 编辑第几个数据
} };
}, },
mounted () { }, mounted() {},
methods: { methods: {
// 弹出框关闭 // 弹出框关闭
handleClose () { handleClose() {
this.dialogVisible = false this.dialogVisible = false;
this.colorValue = '' this.colorValue = "";
}, },
// 新增 // 新增
handleAddClick () { handleAddClick() {
this.colorValue = '' this.colorValue = "";
this.flag = true this.flag = true;
this.dialogVisible = true this.dialogVisible = true;
}, },
// 确定 // 确定
handleSaveClick () { handleSaveClick() {
if (this.flag) { if (this.flag) {
// 新增 // 新增
const obj = { const obj = {
color: this.colorValue, color: this.colorValue
} };
this.formData.push(obj) this.formData.push(obj);
this.dialogVisible = false this.dialogVisible = false;
} else { } else {
// 编辑 // 编辑
this.formData[this.indexEditor].color = this.colorValue this.formData[this.indexEditor].color = this.colorValue;
this.dialogVisible = false this.dialogVisible = false;
} }
this.$emit('input', this.formData) this.$emit("input", this.formData);
}, },
// 编辑 // 编辑
handleEditorClick (index, row) { handleEditorClick(index, row) {
this.flag = false this.flag = false;
this.colorValue = row.color this.colorValue = row.color;
this.dialogVisible = true this.dialogVisible = true;
this.indexEditor = index this.indexEditor = index;
}, },
// 删除 // 删除
handleDeleteClick (index) { handleDeleteClick(index) {
this.formData.splice(index, 1) this.formData.splice(index, 1);
}, }
}, }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.color-box { .color-box {

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

@ -6,20 +6,15 @@
!--> !-->
<template> <template>
<div class="layout"> <div class="layout">
<div v-if="toolIsShow" <div v-if="toolIsShow" class="layout-left" :style="{ width: widthLeftForTools + 'px' }">
class="layout-left" <el-tabs type="border-card" :stretch="true">
:style="{ width: widthLeftForTools + 'px' }">
<el-tabs type="border-card"
:stretch="true">
<!-- 左侧组件栏--> <!-- 左侧组件栏-->
<el-tab-pane label="工具栏"> <el-tab-pane label="工具栏">
<!-- <el-divider content-position="center">html</el-divider>--> <!-- <el-divider content-position="center">html</el-divider>-->
<draggable v-for="widget in widgetTools" <draggable v-for="widget in widgetTools" :key="widget.code" @end="(evt) => widgetOnDragged(evt, widget.code)">
:key="widget.code"
@end="(evt) => widgetOnDragged(evt, widget.code)">
<div class="tools-item"> <div class="tools-item">
<span class="tools-item-icon"> <span class="tools-item-icon">
<!-- <svg-icon :icon-class="widget.icon" /> -->1 <svg-icon :icon-class="widget.icon" />
</span> </span>
<span class="tools-item-text">{{ widget.label }}</span> <span class="tools-item-text">{{ widget.label }}</span>
</div> </div>
@ -27,11 +22,9 @@
</el-tab-pane> </el-tab-pane>
<!-- 左侧图层--> <!-- 左侧图层-->
<el-tab-pane label="图层"> <el-tab-pane label="图层">
<div v-for="(item, index) in layerWidget" <div v-for="(item, index) in layerWidget" :key="index" class="tools-item">
:key="index"
class="tools-item">
<span class="tools-item-icon"> <span class="tools-item-icon">
<!-- <svg-icon :icon-class="item.icon" /> -->2 <svg-icon :icon-class="item.icon" />
</span> </span>
<span class="tools-item-text">{{ item.label }}</span> <span class="tools-item-text">{{ item.label }}</span>
</div> </div>
@ -39,90 +32,47 @@
</el-tabs> </el-tabs>
</div> </div>
<div class="layout-left-fold" <div class="layout-left-fold" :style="{ width: widthLeftForToolsHideButton + 'px' }" @click="toolIsShow = !toolIsShow">
:style="{ width: widthLeftForToolsHideButton + 'px' }"
@click="toolIsShow = !toolIsShow">
<i class="iconfont iconfold" /> <i class="iconfont iconfold" />
</div> </div>
<div class="layout-middle" <div class="layout-middle" :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
:style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
<div class="top-button"> <div class="top-button">
<span class="btn"> <span class="btn">
<el-tooltip class="item" <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
effect="dark" <svg-icon icon-class="report" @click="saveData" />
content="保存"
placement="bottom">
<!-- <svg-icon icon-class="report" @click="saveData" /> -->3
</el-tooltip> </el-tooltip>
</span> </span>
<span class="btn"> <span class="btn">
<el-tooltip class="item" <el-tooltip class="item" effect="dark" content="预览" placement="bottom">
effect="dark" <svg-icon icon-class="eye-open" @click="viewScreen" />
content="预览"
placement="bottom">
<!-- <svg-icon icon-class="eye-open" @click="viewScreen" /> -->4
</el-tooltip> </el-tooltip>
</span> </span>
</div> </div>
<div class="workbench-container" <div class="workbench-container" :style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }">
:style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }"> <vue-ruler-tool v-model="dashboard.presetLine" class="vueRuler" :step-length="50" :parent="true" :position="'relative'" :is-scale-revise="true" :visible.sync="dashboard.presetLineVisible">
<vue-ruler-tool v-model="dashboard.presetLine" <div id="workbench" class="workbench" :style="{ transform: workbenchTransform, width: bigscreenWidth + 'px', height: bigscreenHeight + 'px', 'background-color': dashboard.backgroundColor, 'background-image': 'url(' + dashboard.backgroundImage + ')', 'background-position': '0% 0%', 'background-size': '100% 100%', 'background-repeat': 'initial', 'background-attachment': 'initial', 'background-origin': 'initial', 'background-clip': 'initial' }" @click="setOptionsOnClickScreen">
class="vueRuler" <widget v-for="(widget, index) in widgets" :key="index" v-model="widget.value" :index="index" :type="widget.type" :bigscreen="{ bigscreenWidth, bigscreenHeight }" @onActivated="setOptionsOnClickWidget" @contextmenu.prevent.native="rightClick($event, index)" />
:step-length="50"
:parent="true"
:position="'relative'"
:is-scale-revise="true"
:visible.sync="dashboard.presetLineVisible">
<div id="workbench"
class="workbench"
:style="{ transform: workbenchTransform, width: bigscreenWidth + 'px', height: bigscreenHeight + 'px', 'background-color': dashboard.backgroundColor, 'background-image': 'url(' + dashboard.backgroundImage + ')', 'background-position': '0% 0%', 'background-size': '100% 100%', 'background-repeat': 'initial', 'background-attachment': 'initial', 'background-origin': 'initial', 'background-clip': 'initial' }"
@click="setOptionsOnClickScreen">
<widget v-for="(widget, index) in widgets"
:key="index"
v-model="widget.value"
:index="index"
:type="widget.type"
:bigscreen="{ bigscreenWidth, bigscreenHeight }"
@onActivated="setOptionsOnClickWidget"
@contextmenu.prevent.native="rightClick($event, index)" />
</div> </div>
</vue-ruler-tool> </vue-ruler-tool>
</div> </div>
</div> </div>
<div class="layout-right" <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
:style="{ width: widthLeftForOptions + 'px' }"> <el-tabs v-model="activeName" type="border-card" :stretch="true">
<el-tabs v-model="activeName" <el-tab-pane v-if="isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)" name="first" label="配置">
type="border-card" <dynamicForm ref="formData" :options="widgetOptions.setup" @onChanged="(val) => widgetValueChanged('setup', val)" />
:stretch="true">
<el-tab-pane v-if="isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)"
name="first"
label="配置">
<dynamicForm ref="formData"
:options="widgetOptions.setup"
@onChanged="(val) => widgetValueChanged('setup', val)" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane v-if="isNotNull(widgetOptions.data)" <el-tab-pane v-if="isNotNull(widgetOptions.data)" name="second" label="数据">
name="second" <dynamicForm ref="formData" :options="widgetOptions.data" @onChanged="(val) => widgetValueChanged('data', val)" />
label="数据">
<dynamicForm ref="formData"
:options="widgetOptions.data"
@onChanged="(val) => widgetValueChanged('data', val)" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane v-if="isNotNull(widgetOptions.position)" <el-tab-pane v-if="isNotNull(widgetOptions.position)" name="third" label="坐标">
name="third" <dynamicForm ref="formData" :options="widgetOptions.position" @onChanged="(val) => widgetValueChanged('position', val)" />
label="坐标">
<dynamicForm ref="formData"
:options="widgetOptions.position"
@onChanged="(val) => widgetValueChanged('position', val)" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<content-menu :visible.sync="visibleContentMenu" <content-menu :visible.sync="visibleContentMenu" :style-obj="styleObj" @deletelayer="deletelayer" />
:style-obj="styleObj"
@deletelayer="deletelayer" />
</div> </div>
</template> </template>
@ -143,7 +93,7 @@ export default {
dynamicForm, dynamicForm,
contentMenu, contentMenu,
}, },
data () { data() {
return { return {
widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域 widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
widthLeftForTools: 200, // 左侧工具栏宽度 widthLeftForTools: 200, // 左侧工具栏宽度
@ -209,7 +159,7 @@ export default {
}, },
computed: { computed: {
// 左侧折叠切换时，动态计算中间区的宽度 // 左侧折叠切换时，动态计算中间区的宽度
middleWidth () { middleWidth() {
var widthLeftAndRight = 0 var widthLeftAndRight = 0
if (this.toolIsShow) { if (this.toolIsShow) {
widthLeftAndRight += this.widthLeftForTools // 左侧工具栏宽度 widthLeftAndRight += this.widthLeftForTools // 左侧工具栏宽度
@ -220,26 +170,26 @@ export default {
var middleWidth = this.bodyWidth - widthLeftAndRight var middleWidth = this.bodyWidth - widthLeftAndRight
return middleWidth return middleWidth
}, },
middleHeight () { middleHeight() {
return this.bodyHeight return this.bodyHeight
}, },
// 设计台按大屏的缩放比例 // 设计台按大屏的缩放比例
bigscreenScaleInWorkbench () { bigscreenScaleInWorkbench() {
var widthScale = this.middleWidth / this.bigscreenWidth var widthScale = this.middleWidth / this.bigscreenWidth
var heightScale = this.middleHeight / this.bigscreenHeight var heightScale = this.middleHeight / this.bigscreenHeight
return Math.min(widthScale, heightScale) return Math.min(widthScale, heightScale)
}, },
workbenchTransform () { workbenchTransform() {
return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})` return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})`
}, },
// 大屏在设计模式的大小 // 大屏在设计模式的大小
bigscreenWidthInWorkbench () { bigscreenWidthInWorkbench() {
return this.getPXUnderScale(this.bigscreenWidth) return this.getPXUnderScale(this.bigscreenWidth)
}, },
bigscreenHeightInWorkbench () { bigscreenHeightInWorkbench() {
return this.getPXUnderScale(this.bigscreenHeight) return this.getPXUnderScale(this.bigscreenHeight)
}, },
layerWidget () { layerWidget() {
const layerWidgetArr = [] const layerWidgetArr = []
for (let i = 0; i < this.widgets.length; i++) { for (let i = 0; i < this.widgets.length; i++) {
layerWidgetArr.push(getToolByCode(this.widgets[i].type)) layerWidgetArr.push(getToolByCode(this.widgets[i].type))
@ -247,7 +197,7 @@ export default {
return layerWidgetArr return layerWidgetArr
}, },
}, },
mounted () { mounted() {
// 一进入时，加载屏幕配置属性 // 一进入时，加载屏幕配置属性
this.setOptionsOnClickScreen() this.setOptionsOnClickScreen()
@ -256,7 +206,7 @@ export default {
this.widgets = [] this.widgets = []
}, },
methods: { methods: {
async initEchartData () { async initEchartData() {
const reportCode = this.$route.query.reportCode const reportCode = this.$route.query.reportCode
const { code, data } = await detailDashboard(reportCode) const { code, data } = await detailDashboard(reportCode)
if (code != 200) return if (code != 200) return
@ -265,7 +215,7 @@ export default {
this.widgets = processData this.widgets = processData
this.dashboard = screenData this.dashboard = screenData
}, },
handleBigScreen (data) { handleBigScreen(data) {
const optionScreen = this.deepClone(getToolByCode('screen').options) const optionScreen = this.deepClone(getToolByCode('screen').options)
const setup = optionScreen.setup const setup = optionScreen.setup
for (const key in data) { for (const key in data) {
@ -283,7 +233,7 @@ export default {
width: data.width, width: data.width,
} }
}, },
handleInitEchartsData (data) { handleInitEchartsData(data) {
console.log(data) console.log(data)
const widgets = data.dashboard.widgets const widgets = data.dashboard.widgets
const widgetsData = [] const widgetsData = []
@ -304,7 +254,7 @@ export default {
} }
return widgetsData return widgetsData
}, },
handleOptionsData (data, option) { handleOptionsData(data, option) {
for (const key in data.setup) { for (const key in data.setup) {
for (let i = 0; i < option.setup.length; i++) { for (let i = 0; i < option.setup.length; i++) {
if (key == option.setup[i].name) { if (key == option.setup[i].name) {
@ -342,7 +292,7 @@ export default {
return option return option
}, },
// 保存数据 // 保存数据
async saveData () { async saveData() {
if (!this.widgets || this.widgets.length == 0) { if (!this.widgets || this.widgets.length == 0) {
this.$message.error('请添加组件') this.$message.error('请添加组件')
return return
@ -362,7 +312,7 @@ export default {
if (code != '200') return if (code != '200') return
}, },
// 预览 // 预览
viewScreen () { viewScreen() {
var routeUrl = this.$router.resolve({ var routeUrl = this.$router.resolve({
path: '/report/bigscreen/viewer', path: '/report/bigscreen/viewer',
query: { reportCode: this.$route.query.reportCode }, query: { reportCode: this.$route.query.reportCode },
@ -370,12 +320,12 @@ export default {
window.open(routeUrl.href, '_blank') window.open(routeUrl.href, '_blank')
}, },
// 在缩放模式下的大小 // 在缩放模式下的大小
getPXUnderScale (px) { getPXUnderScale(px) {
return this.bigscreenScaleInWorkbench * px return this.bigscreenScaleInWorkbench * px
}, },
// 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去 // 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
widgetOnDragged (evt, widgetCode) { widgetOnDragged(evt, widgetCode) {
var widgetType = widgetCode var widgetType = widgetCode
// 获取结束坐标和列名 // 获取结束坐标和列名
@ -417,7 +367,7 @@ export default {
}, },
// 对组件默认值处理 // 对组件默认值处理
handleDefaultValue (widgetJson) { handleDefaultValue(widgetJson) {
for (const key in widgetJson) { for (const key in widgetJson) {
if (key == 'options') { if (key == 'options') {
// collapse、data、position、setup // collapse、data、position、setup
@ -457,7 +407,7 @@ export default {
}, },
// 如果是点击大屏设计器中的底层，加载大屏底层属性 // 如果是点击大屏设计器中的底层，加载大屏底层属性
setOptionsOnClickScreen () { setOptionsOnClickScreen() {
this.screenCode = 'screen' this.screenCode = 'screen'
// 选中不同的组件 右侧都显示第一栏 // 选中不同的组件 右侧都显示第一栏
this.activeName = 'first' this.activeName = 'first'
@ -465,7 +415,7 @@ export default {
}, },
// 如果是点击某个组件，获取该组件的配置项 // 如果是点击某个组件，获取该组件的配置项
setOptionsOnClickWidget (index) { setOptionsOnClickWidget(index) {
// 选中不同的组件 右侧都显示第一栏 // 选中不同的组件 右侧都显示第一栏
this.activeName = 'first' this.activeName = 'first'
this.screenCode = '' this.screenCode = ''
@ -484,7 +434,7 @@ export default {
}, },
// 将当前选中的组件，右侧属性值更新 // 将当前选中的组件，右侧属性值更新
widgetValueChanged (key, val) { widgetValueChanged(key, val) {
/* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value /* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
widgets: [{ widgets: [{
type: 'widget-text', type: 'widget-text',
@ -505,7 +455,7 @@ export default {
} }
} }
}, },
rightClick (event, index) { rightClick(event, index) {
this.rightClickIndex = index this.rightClickIndex = index
const left = event.clientX const left = event.clientX
const top = event.clientY const top = event.clientY
@ -519,10 +469,10 @@ export default {
this.visibleContentMenu = true this.visibleContentMenu = true
return false return false
}, },
deletelayer () { deletelayer() {
this.widgets.splice(this.rightClickIndex, 1) this.widgets.splice(this.rightClickIndex, 1)
}, },
setDefaultValue (options, val) { setDefaultValue(options, val) {
for (let i = 0; i < options.length; i++) { for (let i = 0; i < options.length; i++) {
if (Object.prototype.toString.call(options[i]) == '[object Object]') { if (Object.prototype.toString.call(options[i]) == '[object Object]') {
for (const k in val) { for (const k in val) {

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

@ -7,9 +7,7 @@
<template> <template>
<div class="main-layout"> <div class="main-layout">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col v-for="item in list" <el-col v-for="item in list" :key="item.id" :span="6">
:key="item.id"
:span="6">
<div class="bg"> <div class="bg">
<div class="rgba" /> <div class="rgba" />
<div class="content"> <div class="content">
@ -17,14 +15,18 @@
<footer> <footer>
{{ item.time }} {{ item.time }}
<div class="operation"> <div class="operation">
<el-button icon="el-icon-view" <el-button
icon="el-icon-view"
class="view" class="view"
type="text" type="text"
@click="viewDesign(item.id)" /> @click="viewDesign(item.id)"
<el-button icon="el-icon-edit" />
<el-button
icon="el-icon-edit"
class="edit" class="edit"
type="text" type="text"
@click="openDesign(item.id)" /> @click="openDesign(item.id)"
/>
</div> </div>
</footer> </footer>
</div> </div>
@ -36,51 +38,57 @@
<script> <script>
export default { export default {
name: 'Login', name: "Login",
components: {}, components: {},
data () { data() {
return { return {
list: [ list: [
{ {
id: 1, id: 1,
name: '货物在途大屏', name: "货物在途大屏",
time: '2021-3-19 17:54:00', time: "2021-3-19 17:54:00"
}, },
{ {
id: 2, id: 2,
name: '仓库库容大屏', name: "仓库库容大屏",
time: '2021-3-19 17:54:00', time: "2021-3-19 17:54:00"
}, },
{ {
id: 3, id: 3,
name: '运输时效大屏', name: "运输时效大屏",
time: '2021-3-19 17:54:00', time: "2021-3-19 17:54:00"
}, },
{ {
id: 4, id: 4,
name: '运输时效大屏1', name: "运输时效大屏1",
time: '2021-3-19 17:54:00', time: "2021-3-19 17:54:00"
}, },
{ {
id: 5, id: 5,
name: '运输时效大屏2', name: "运输时效大屏2",
time: '2021-3-19 17:54:00', time: "2021-3-19 17:54:00"
},
],
} }
]
};
}, },
mounted () { }, mounted() {},
methods: { methods: {
openDesign (reportId) { openDesign(reportId) {
var routeUrl = this.$router.resolve({ path: '/bigscreen/designer', query: { reportId: reportId } }) var routeUrl = this.$router.resolve({
window.open(routeUrl.href, '_blank') path: "/bigscreen/designer",
}, query: { reportId: reportId }
viewDesign (reportId) { });
var routeUrl = this.$router.resolve({ path: '/bigscreen/viewer', query: { reportId: reportId } }) window.open(routeUrl.href, "_blank");
window.open(routeUrl.href, '_blank')
},
}, },
} viewDesign(reportId) {
var routeUrl = this.$router.resolve({
path: "/bigscreen/viewer",
query: { reportId: reportId }
});
window.open(routeUrl.href, "_blank");
}
}
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

11
report-ui/src/views/report/bigscreen/viewer/index.vue
Unescape Escape View File

@ -7,10 +7,7 @@
<template> <template>
<div class="layout"> <div class="layout">
<div :style="bigScreenStyle"> <div :style="bigScreenStyle">
<widget v-for="(widget, index) in widgets" <widget v-for="(widget, index) in widgets" :key="index" v-model="widget.value" :type="widget.type" />
:key="index"
v-model="widget.value"
:type="widget.type" />
</div> </div>
</div> </div>
</template> </template>
@ -23,7 +20,7 @@ export default {
components: { components: {
widget, widget,
}, },
data () { data() {
return { return {
list: [ list: [
{ {
@ -97,11 +94,11 @@ export default {
widgets: [], widgets: [],
} }
}, },
mounted () { mounted() {
this.getData() this.getData()
}, },
methods: { methods: {
async getData () { async getData() {
const reportCode = this.$route.query.reportCode const reportCode = this.$route.query.reportCode
const { code, data } = await detailDashboard(reportCode) const { code, data } = await detailDashboard(reportCode)
if (code != 200) return if (code != 200) return

Write Preview
Loading…
Cancel
Save