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

大屏显示

Browse Source
yanzili 3 years ago
parent 4026dd06fa
commit ee658ecd4d
21 changed files with 2903 additions and 2508 deletions
Show Stats Download Patch File Download Diff File

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

@ -27,9 +27,14 @@
"nprogress": "0.2.0", "nprogress": "0.2.0",
"sortablejs": "^1.10.2", "sortablejs": "^1.10.2",
"uninstall": "0.0.0", "uninstall": "0.0.0",
"v-chart": "^1.0.0",
"vue": "2.6.11", "vue": "2.6.11",
"vue-codemirror": "^4.0.6", "vue-codemirror": "^4.0.6",
"vue-color": "^2.8.1",
"vue-drag-resize": "^1.5.4",
"vue-echarts": "^5.0.0-beta.0",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-ruler-tool": "^1.2.4",
"vuedraggable": "^2.24.1", "vuedraggable": "^2.24.1",
"vuex": "3.0.1" "vuex": "3.0.1"
}, },

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

@ -14,6 +14,13 @@ import router from './router'
import store from './store' import store from './store'
import * as filter from './filter' import * as filter from './filter'
import mixins from '@/mixins' import mixins from '@/mixins'
import echarts from 'echarts';
// 全局定义echarts
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
// import 'echarts-gl'
Vue.component('v-chart', ECharts)
// permission control // permission control
import '@/permission' import '@/permission'

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

@ -1,24 +1,24 @@
export default { export default {
data() { data () {
return { return {
} }
}, },
computed: { computed: {
}, },
created() { created () {
}, },
mounted() { mounted () {
}, },
destroyed() { destroyed () {
}, },
methods: { methods: {
goBack() { goBack () {
this.$router.go(-1) this.$router.go(-1)
}, },
refresh() { refresh () {
this.$router.go(0) this.$router.go(0)
}, },
parseString(object) { parseString (object) {
if (typeof object === 'undefined' || object == null) { if (typeof object === 'undefined' || object == null) {
return '' return ''
} }
@ -33,7 +33,7 @@ export default {
} }
return '' return ''
}, },
isBlank(val) { isBlank (val) {
if (typeof val === 'undefined') { if (typeof val === 'undefined') {
return true return true
} }
@ -42,49 +42,88 @@ export default {
} }
return false return false
}, },
// 封装定制删除数组中的值 // 封装定制删除数组中的值
contains(a, obj) { contains (a, obj) {
var i = a.length var i = a.length
while (i--) { while (i--) {
if (a[i] === obj) { if (a[i] === obj) {
return i return i
} }
} }
return false return false
}, },
//获取url后边参数 //获取url后边参数
getUrlKey: function(name) { getUrlKey: function (name) {
return ( return (
decodeURIComponent( decodeURIComponent(
(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace( (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(
/\+/g, /\+/g,
'%20' '%20'
) )
) || null ) || null
) )
}, },
/** /**
* *
*/ */
resetForm(data) { resetForm (data) {
let formKeys = Object.keys(data) let formKeys = Object.keys(data)
for (let k of formKeys) { for (let k of formKeys) {
data[k] = null data[k] = null
} }
}, },
sortArray(propertyName){ sortArray (propertyName) {
return function(object1,object2){ return function (object1, object2) {
var value1 = object1[propertyName]; var value1 = object1[propertyName];
var value2 = object2[propertyName]; var value2 = object2[propertyName];
if(value1 < value2){ if (value1 < value2) {
return -1; return -1;
}else if(value1 > value2){ } else if (value1 > value2) {
return 1; return 1;
}else{ } else {
return 0; return 0;
} }
} }
} },
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
},
isNotNull (val) {
return !this.isNull(val)
},
isNull (val) {
// 特殊判断
if (val && parseInt(val) === 0) return false
const list = ['$parent']
if (val instanceof Date || typeof val === 'boolean' || typeof val === 'number') return false
if (val instanceof Array) {
if (val.length === 0) return true
} else if (val instanceof Object) {
val = this.deepClone(val)
list.forEach((ele) => {
delete val[ele]
})
for (var o in val) {
return false
}
return true
} else {
if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') {
return true
}
return false
}
return false
},
} }
} }

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

@ -83,8 +83,12 @@ export const constantRouterMap = [
meta: { title: '大屏报表', icon: 'iconnavicon-ywcs' }, meta: { title: '大屏报表', icon: 'iconnavicon-ywcs' },
children: [ children: [
{ path: 'bigscreen', name: 'bigscreen', component: () => import('@/views/report/bigscreen/index'), meta: { title: '大屏报表', icon: 'iconchufaqipeizhi-hui', keepAlive: true, isBack: true } }, { path: 'bigscreen', name: 'bigscreen', component: () => import('@/views/report/bigscreen/index'), meta: { title: '大屏报表', icon: 'iconchufaqipeizhi-hui', keepAlive: true, isBack: true } },
// { path: '/bigscreen/viewer', name: 'bigscreenViewer', component: () => import('@/views/report/bigscreen/viewer'), meta: { title: '预览', icon: 'i', keepAlive: false, isBack: true } },
// { path: '/bigscreen/designer', name: 'bigscreenDesigner', component: () => import('@/views/report/bigscreen/designer'), meta: { title: '设计', icon: 'i', keepAlive: false, isBack: true } },
] ]
}, },
{ path: '/bigscreen/viewer', component: () => import('@/views/report/bigscreen/viewer'), hidden: true },
{ path: '/bigscreen/designer', component: () => import('@/views/report/bigscreen/designer'), hidden: true },
// { // {
// path: '/report', // path: '/report',
// component: Layout, // component: Layout,

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

@ -1,6 +1,11 @@
<template> <template>
<div v-show="visible" class="contentmenu" :style="styleObj"> <div v-show="visible"
<div class="contentmenu__item" @click="deleteLayer"><svg-icon icon-class="guanbi" /> 删除图层</div> class="contentmenu"
:style="styleObj">
<div class="contentmenu__item"
@click="deleteLayer">
<!-- <svg-icon icon-class="guanbi" /> -->删除图层
</div>
</div> </div>
</template> </template>
<script> <script>
@ -9,11 +14,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 {
@ -22,10 +27,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: '取消',

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

@ -1,37 +1,56 @@
<template> <template>
<div> <div>
<el-button type="primary" icon="el-icon-plus" plain @click="handleAddClick">新增</el-button> <el-button type="primary"
<el-table :data="formData" style="width: 100%"> icon="el-icon-plus"
<el-table-column prop="color" label="颜色" align="center"> plain
@click="handleAddClick">新增</el-button>
<el-table :data="formData"
style="width: 100%">
<el-table-column prop="color"
label="颜色"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="color-box" :style="{ background: scope.row.color }" /> <span class="color-box"
:style="{ background: scope.row.color }" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="位置" align="center"> <el-table-column label="位置"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="editor" @click="handleEditorClick(scope.$index, scope.row)"> <i class="el-icon-edit" /> 编辑 </span> <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="操作" align="center"> <el-table-column label="操作"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="editor" @click="handleDeleteClick(scope.$index, scope.row)"> <i class="el-icon-delete" /> 删除 </span> <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="新增" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <el-dialog title="新增"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form> <el-form>
<el-form-item label="颜色"> <el-form-item label="颜色">
<el-input v-model="colorValue" style="width: 200px" placeholder="请输入颜色"> <el-input v-model="colorValue"
style="width: 200px"
placeholder="请输入颜色">
<template slot="append"> <template slot="append">
<el-color-picker v-model="colorValue" :predefine="predefineColors" /> <el-color-picker v-model="colorValue"
:predefine="predefineColors" />
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer"
class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSaveClick">确 定</el-button> <el-button type="primary"
@click="handleSaveClick">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
@ -46,7 +65,7 @@ export default {
props: { props: {
formData: Array, formData: Array,
}, },
data() { data () {
return { return {
predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'], predefineColors: ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'],
colorValue: '', colorValue: '',
@ -55,21 +74,21 @@ export default {
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 = {
@ -85,20 +104,20 @@ export default {
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="less" scoped> <style lang="scss" scoped>
.color-box { .color-box {
.title { .title {
display: flex; display: flex;

80
report-ui/src/views/report/bigscreen/designer/form/dynamicCollapseForm.vue
Unescape Escape View File

@ -1,80 +0,0 @@
<template>
<el-collapse accordion>
<el-collapse-item
v-for="(item, index) in options"
:key="index"
:title="item.name"
:name="index"
>
<dynamicForm
:options="item.list"
@onChanged="onChanged"
/>
</el-collapse-item>
</el-collapse>
</template>
<script>
import dynamicForm from './dynamicForm'
export default {
name: 'WidgetTemp',
components: {
dynamicForm,
},
props: {
options: Array,
},
data() {
return {
formData: {},
}
},
watch: {
options(val) {
console.log(val)
}
},
mounted() {
this.handlerOptions()
},
methods: {
onChanged(val) {
console.log(val)
for (const i in val) {
this.formData[i] = this.deepClone(val[i])
}
this.$emit('onChanged', this.formData)
},
handlerOptions() {
for (let i = 0; i < this.options.length; i++) {
const item = this.options[i]
for (let j = 0; j < item.list.length; j++) {
this.formData[item.list[j].name] = item.list[j].value
}
}
},
},
}
</script>
<style scoped lang="scss">
.el-collapse {
border-top: none;
border-bottom: none;
}
/deep/.el-collapse-item__header {
height: 40px;
line-height: 40px;
background: transparent;
color: #bcc9d4;
font-weight: 300;
font-size: 12px;
border-color: #282e3a;
}
/deep/.el-collapse-item__wrap {
background: transparent;
border: none;
}
/deep/.el-collapse-item__content {
padding-bottom: 0;
}
</style>

1
report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue
Unescape Escape View File

@ -36,7 +36,6 @@ export default {
data() { data() {
return { return {
dataSetValue: '', dataSetValue: '',
dataSet: [], // 数据集 dataSet: [], // 数据集
userNameList: [], // 用户 userNameList: [], // 用户
setParamList: [], // 对应的不同的图形数据参数 setParamList: [], // 对应的不同的图形数据参数

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

@ -1,3 +1,4 @@
/* eslint-disable vue/valid-v-for */
<!-- <!--
* @Author: lide1202@hotmail.com * @Author: lide1202@hotmail.com
* @Date: 2021-4-6 11:04:24 * @Date: 2021-4-6 11:04:24
@ -8,130 +9,74 @@
<div class="collapse-input-style"> <div class="collapse-input-style">
<el-form label-width="80px" label-position="left"> <el-form label-width="80px" label-position="left">
<template v-for="(item, index) in options"> <template v-for="(item, index) in options">
<el-form-item v-if="inputShow[item.name]" :key="index" :label="item.label" :prop="item.name" :required="item.required"> <div v-if="isShowForm(item, '[object Object]')" :key="index">
<el-input-number <el-form-item v-if="inputShow[item.name]" :label="item.label" :prop="item.name" :required="item.required">
v-if="item.type == 'el-input-number'" <el-input-number v-if="item.type == 'el-input-number'" v-model="formData[item.name]" controls-position="right" :placeholder="item.placeholder" @change="changed($event, item.name)" />
v-model="formData[item.name]"
controls-position="right"
:placeholder="item.placeholder"
@change="changed($event, item.name)"
/>
<el-input <el-input v-if="item.type == 'el-input-text'" v-model.trim="formData[item.name]" type="text" placeholder="请输入内容" clearable @change="changed($event, item.name)" />
v-if="item.type == 'el-input-text'"
v-model.trim="formData[item.name]"
type="text"
placeholder="请输入内容"
clearable
@change="changed($event, item.name)"
/>
<el-input <el-input v-if="item.type == 'el-input-textarea'" v-model.trim="formData[item.name]" type="textarea" rows="2" placeholder="请输入内容" @change="changed($event, item.name)" />
v-if="item.type == 'el-input-textarea'"
v-model.trim="formData[item.name]"
type="textarea"
rows="2"
placeholder="请输入内容"
@change="changed($event, item.name)"
/>
<el-switch <el-switch v-if="item.type == 'el-switch'" v-model="formData[item.name]" placeholder="请输入内容" @change="changed($event, item.name)" />
v-if="item.type == 'el-switch'"
v-model="formData[item.name]"
placeholder="请输入内容"
@change="changed($event, item.name)"
/>
<ColorPicker <ColorPicker v-if="item.type == 'vue-color'" v-model="formData[item.name]" @change="(val) => changed(val, item.name)" />
v-if="item.type == 'vue-color'"
v-model="formData[item.name]"
@change="(val) => changed(val, item.name)"
/>
<el-upload <el-upload v-if="item.type == 'el-upload-picture'" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" />
v-if="item.type == 'el-upload-picture'"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
/>
<el-radio-group <el-radio-group v-if="item.type == 'el-radio-group'" v-model="formData[item.name]" @change="(val) => changed(val, item.name)">
v-if="item.type == 'el-radio-group'" <el-radio v-for="itemChild in item.selectOptions" :key="itemChild.code" :label="itemChild.code">{{ itemChild.name }}</el-radio>
v-model="formData[item.name]" </el-radio-group>
@change="(val) => changed(val, item.name)"
>
<el-radio
v-for="itemChild in item.selectOptions"
:key="itemChild.code"
:label="itemChild.code"
>{{ itemChild.name }}</el-radio>
</el-radio-group>
<el-select <el-select v-if="item.type == 'el-select'" v-model="formData[item.name]" clearable placeholder="请选择" @change="(val) => changed(val, item.name)">
v-if="item.type == 'el-select'" <el-option v-for="itemChild in item.selectOptions" :key="itemChild.code" :label="itemChild.name" :value="itemChild.code" />
v-model="formData[item.name]" </el-select>
clearable
placeholder="请选择"
@change="(val) => changed(val, item.name)"
>
<el-option
v-for="itemChild in item.selectOptions"
:key="itemChild.code"
:label="itemChild.name"
:value="itemChild.code"
/>
</el-select>
<el-slider <el-slider v-if="item.type == 'el-slider'" v-model="formData[item.name]" @change="(val) => changed(val, item.name)" />
v-if="item.type == 'el-slider'"
v-model="formData[item.name]"
@change="(val) => changed(val, item.name)"
/>
<el-button <el-button v-if="item.type == 'el-button'" type="primary" plain @click="addStaticData">编辑</el-button>
v-if="item.type == 'el-button'"
type="primary"
plain
@click="addStaticData"
>编辑</el-button>
<!-- 弹窗 --> <!-- 弹窗 -->
<el-dialog <el-dialog title="代码编辑" :visible.sync="dialogVisibleStaticData" width="50%" :before-close="handleClose">
title="代码编辑" <codemirror v-model.trim="formData[item.name]" class="code-mirror" :options="optionsJavascript" style="height: 190px" />
:visible.sync="dialogVisibleStaticData" <span slot="footer" class="dialog-footer">
width="50%" <el-button @click="dialogVisibleStaticData = false">取 消</el-button>
:before-close="handleClose" <el-button type="primary" @click="saveData">确 定</el-button>
> </span>
<codemirror </el-dialog>
v-model.trim="formData[item.name]" </el-form-item>
class="code-mirror" <dynamicComponents v-if="item.type == 'dycustComponents' && inputShow[item.name]" v-model="formData[item.name]" :chart-type="item.chartType" />
:options="optionsJavascript" </div>
style="height: 190px" <div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index">
/> <el-collapse accordion>
<span <el-collapse-item v-for="(itemChild, indexChild) in item" :key="indexChild" :title="itemChild.name" :name="indexChild">
slot="footer" <template v-for="(itemChildList, idx) in itemChild.list">
class="dialog-footer" <el-form-item :key="idx" :label="itemChildList.label" :prop="itemChildList.name" :required="itemChildList.required">
> <el-input-number v-if="itemChildList.type == 'el-input-number'" v-model="formData[itemChildList.name]" controls-position="right" :placeholder="itemChildList.placeholder" @change="changed($event, itemChildList.name)" />
<el-button @click="dialogVisibleStaticData = false">取 消</el-button>
<el-button <el-input v-if="itemChildList.type == 'el-input-text'" v-model.trim="formData[itemChildList.name]" type="text" placeholder="请输入内容" clearable @change="changed($event, itemChildList.name)" />
type="primary"
@click="saveData" <el-input v-if="itemChildList.type == 'el-input-textarea'" v-model.trim="formData[itemChildList.name]" type="textarea" rows="2" placeholder="请输入内容" @change="changed($event, itemChildList.name)" />
>确 定</el-button>
</span> <el-switch v-if="itemChildList.type == 'el-switch'" v-model="formData[itemChildList.name]" placeholder="请输入内容" @change="changed($event, itemChildList.name)" />
</el-dialog>
</el-form-item> <ColorPicker v-if="itemChildList.type == 'vue-color'" v-model="formData[itemChildList.name]" @change="(val) => changed(val, itemChildList.name)" />
</template>
<!-- 自定义组件 --> <el-upload v-if="itemChildList.type == 'el-upload-picture'" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" />
<template v-for="item in options">
<div :key="item.name"> <el-radio-group v-if="itemChildList.type == 'el-radio-group'" v-model="formData[itemChildList.name]" @change="(val) => changed(val, itemChildList.name)">
<dynamicComponents <el-radio v-for="it in itemChildList.selectOptions" :key="it.code" :label="it.code">{{ it.name }}</el-radio>
v-if="item.type == 'dycustComponents' && inputShow[item.name]" </el-radio-group>
v-model="formData[item.name]"
:chart-type="item.chartType" <el-select v-if="itemChildList.type == 'el-select'" v-model="formData[itemChildList.name]" clearable placeholder="请选择" @change="(val) => changed(val, itemChildList.name)">
/> <el-option v-for="it in itemChildList.selectOptions" :key="it.code" :label="it.name" :value="it.code" />
<customColorComponents </el-select>
v-if="item.type == 'customColor' && inputShow[item.name]"
v-model="formData[item.name]" <el-slider v-if="itemChildList.type == 'el-slider'" v-model="formData[itemChildList.name]" @change="(val) => changed(val, itemChildList.name)" />
/> </el-form-item>
<customColorComponents v-if="itemChildList.type == 'customColor'" :key="'b-' + idx" v-model="formData[itemChildList.name]" />
</template>
</el-collapse-item>
</el-collapse>
</div> </div>
</template> </template>
</el-form> </el-form>
@ -150,7 +95,6 @@ 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'
import vueJsonEditor from 'vue-json-editor'
export default { export default {
name: 'DynamicForm', name: 'DynamicForm',
components: { components: {
@ -158,8 +102,6 @@ export default {
codemirror, codemirror,
dynamicComponents, dynamicComponents,
customColorComponents, customColorComponents,
// eslint-disable-next-line vue/no-unused-components
vueJsonEditor
}, },
model: { model: {
prop: 'value', prop: 'value',
@ -169,7 +111,7 @@ export default {
options: Array, options: Array,
value: { value: {
type: [Object], type: [Object],
default: () => { }, default: () => {},
}, },
}, },
data() { data() {
@ -194,7 +136,6 @@ export default {
}, },
watch: { watch: {
value(newValue, oldValue) { value(newValue, oldValue) {
console.log(newValue)
this.formData = newValue || {} this.formData = newValue || {}
}, },
options() { options() {
@ -265,11 +206,25 @@ export default {
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++) {
this.formData[this.options[i].name] = this.deepClone(this.options[i].value) const obj = this.options[i]
if (Object.prototype.toString.call(obj) == '[object Object]') {
this.formData[this.options[i].name] = this.deepClone(this.options[i].value)
} else if (Object.prototype.toString.call(obj) == '[object Array]') {
for (let j = 0; j < obj.length; j++) {
const list = obj[j].list
list.forEach((el) => {
this.formData[el.name] = el.value
})
}
}
} }
this.formData = Object.assign({}, this.formData) this.formData = Object.assign({}, this.formData)
} }
}, },
// 是否显示 那种格式
isShowForm(val, type) {
return Object.prototype.toString.call(val) == type
},
}, },
} }
</script> </script>
@ -283,4 +238,24 @@ export default {
width: 100%; width: 100%;
height: 100% !important; height: 100% !important;
} }
.el-collapse {
border-top: none;
border-bottom: none;
}
/deep/.el-collapse-item__header {
height: 40px;
line-height: 40px;
background: transparent;
color: #bcc9d4;
font-weight: 300;
font-size: 12px;
border-color: #282e3a;
}
/deep/.el-collapse-item__wrap {
background: transparent;
border: none;
}
/deep/.el-collapse-item__content {
padding-bottom: 0;
}
</style> </style>

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

@ -6,15 +6,20 @@
!--> !-->
<template> <template>
<div class="layout"> <div class="layout">
<div v-if="toolIsShow" class="layout-left" :style="{ width: widthLeftForTools + 'px' }"> <div v-if="toolIsShow"
<el-tabs type="border-card" :stretch="true"> class="layout-left"
: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" :key="widget.code" @end="(evt) => widgetOnDragged(evt, widget.code)"> <draggable v-for="widget in widgetTools"
: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" /> <!-- <svg-icon :icon-class="widget.icon" /> -->1
</span> </span>
<span class="tools-item-text">{{ widget.label }}</span> <span class="tools-item-text">{{ widget.label }}</span>
</div> </div>
@ -22,9 +27,11 @@
</el-tab-pane> </el-tab-pane>
<!-- 左侧图层--> <!-- 左侧图层-->
<el-tab-pane label="图层"> <el-tab-pane label="图层">
<div v-for="(item, index) in layerWidget" :key="index" class="tools-item"> <div v-for="(item, index) in layerWidget"
:key="index"
class="tools-item">
<span class="tools-item-icon"> <span class="tools-item-icon">
<svg-icon :icon-class="item.icon" /> <!-- <svg-icon :icon-class="item.icon" /> -->2
</span> </span>
<span class="tools-item-text">{{ item.label }}</span> <span class="tools-item-text">{{ item.label }}</span>
</div> </div>
@ -32,48 +39,90 @@
</el-tabs> </el-tabs>
</div> </div>
<div class="layout-left-fold" :style="{ width: widthLeftForToolsHideButton + 'px' }" @click="toolIsShow = !toolIsShow"> <div class="layout-left-fold"
:style="{ width: widthLeftForToolsHideButton + 'px' }"
@click="toolIsShow = !toolIsShow">
<i class="iconfont iconfold" /> <i class="iconfont iconfold" />
</div> </div>
<div class="layout-middle" :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }"> <div class="layout-middle"
: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" effect="dark" content="保存" placement="bottom"> <el-tooltip class="item"
<svg-icon icon-class="report" @click="saveData" /> effect="dark"
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" effect="dark" content="预览" placement="bottom"> <el-tooltip class="item"
<svg-icon icon-class="eye-open" @click="viewScreen" /> effect="dark"
content="预览"
placement="bottom">
<!-- <svg-icon icon-class="eye-open" @click="viewScreen" /> -->4
</el-tooltip> </el-tooltip>
</span> </span>
</div> </div>
<div class="workbench-container" :style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }"> <div class="workbench-container"
<vue-ruler-tool v-model="dashboard.presetLine" class="vueRuler" :step-length="50" :parent="true" :position="'relative'" :is-scale-revise="true" :visible.sync="dashboard.presetLineVisible"> :style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }">
<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"> <vue-ruler-tool v-model="dashboard.presetLine"
<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)" /> class="vueRuler"
: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" :style="{ width: widthLeftForOptions + 'px' }"> <div class="layout-right"
<el-tabs v-model="activeName" type="border-card" :stretch="true"> :style="{ width: widthLeftForOptions + 'px' }">
<el-tab-pane v-if="isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)" name="first" label="配置"> <el-tabs v-model="activeName"
<dynamicForm ref="formData" :options="widgetOptions.setup" @onChanged="(val) => widgetValueChanged('setup', val)" /> type="border-card"
<dynamicCollapseForm v-if="widgetOptions.collapse && widgetOptions.collapse.length > 0" ref="formData" :options="widgetOptions.collapse" @onChanged="(val) => widgetValueChanged('collapse', 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)" name="second" label="数据"> <el-tab-pane v-if="isNotNull(widgetOptions.data)"
<dynamicForm ref="formData" :options="widgetOptions.data" @onChanged="(val) => widgetValueChanged('data', val)" /> name="second"
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)" name="third" label="坐标"> <el-tab-pane v-if="isNotNull(widgetOptions.position)"
<dynamicForm ref="formData" :options="widgetOptions.position" @onChanged="(val) => widgetValueChanged('position', val)" /> name="third"
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" :style-obj="styleObj" @deletelayer="deletelayer" /> <content-menu :visible.sync="visibleContentMenu"
:style-obj="styleObj"
@deletelayer="deletelayer" />
</div> </div>
</template> </template>
@ -82,7 +131,6 @@ import { insertDashboard, detailDashboard } from '@/api/bigscreen'
import { widgetTools, getToolByCode } from './tools' import { widgetTools, getToolByCode } from './tools'
import widget from './widget/widget.vue' import widget from './widget/widget.vue'
import dynamicForm from './form/dynamicForm.vue' import dynamicForm from './form/dynamicForm.vue'
import dynamicCollapseForm from './form/dynamicCollapseForm.vue'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import VueRulerTool from 'vue-ruler-tool' // 大屏设计页面的标尺插件 import VueRulerTool from 'vue-ruler-tool' // 大屏设计页面的标尺插件
import contentMenu from './form/contentMenu' import contentMenu from './form/contentMenu'
@ -93,10 +141,9 @@ export default {
VueRulerTool, VueRulerTool,
widget, widget,
dynamicForm, dynamicForm,
dynamicCollapseForm,
contentMenu, contentMenu,
}, },
data() { data () {
return { return {
widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域 widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
widthLeftForTools: 200, // 左侧工具栏宽度 widthLeftForTools: 200, // 左侧工具栏宽度
@ -147,7 +194,6 @@ export default {
// 当前激活组件右侧配置属性 // 当前激活组件右侧配置属性
widgetOptions: { widgetOptions: {
setup: [], // 配置 setup: [], // 配置
collapse: [],
data: [], // 数据 data: [], // 数据
position: [], // 坐标 position: [], // 坐标
}, },
@ -163,7 +209,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 // 左侧工具栏宽度
@ -174,26 +220,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))
@ -201,7 +247,7 @@ export default {
return layerWidgetArr return layerWidgetArr
}, },
}, },
mounted() { mounted () {
// 一进入时，加载屏幕配置属性 // 一进入时，加载屏幕配置属性
this.setOptionsOnClickScreen() this.setOptionsOnClickScreen()
@ -210,7 +256,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
@ -219,7 +265,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) {
@ -237,7 +283,8 @@ export default {
width: data.width, width: data.width,
} }
}, },
handleInitEchartsData(data) { handleInitEchartsData (data) {
console.log(data)
const widgets = data.dashboard.widgets const widgets = data.dashboard.widgets
const widgetsData = [] const widgetsData = []
for (let i = 0; i < widgets.length; i++) { for (let i = 0; i < widgets.length; i++) {
@ -257,7 +304,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) {
@ -281,21 +328,21 @@ export default {
} }
} }
} }
// collapse // // collapse
for (const key in data.collapse) { // for (const key in data.collapse) {
for (let i = 0; i < option.collapse.length; i++) { // for (let i = 0; i < option.collapse.length; i++) {
const itemList = option.collapse[i].list // const itemList = option.collapse[i].list
for (let j = 0; j < itemList.length; j++) { // for (let j = 0; j < itemList.length; j++) {
if (key == itemList[j].name) { // if (key == itemList[j].name) {
itemList[j].value = data.collapse[key] // itemList[j].value = data.collapse[key]
} // }
} // }
} // }
} // }
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
@ -311,23 +358,24 @@ export default {
}, },
widgets: this.widgets, widgets: this.widgets,
} }
console.log(this.dashboard)
console.log(screenData)
const { code, data } = await insertDashboard(screenData) const { code, data } = await insertDashboard(screenData)
if (code != '200') return if (code != '200') return
}, },
// 预览 // 预览
viewScreen() { viewScreen () {
var routeUrl = this.$router.resolve({ path: '/report/bigscreen/viewer', query: { reportCode: this.$route.query.reportCode }}) var routeUrl = this.$router.resolve({
path: '/report/bigscreen/viewer',
query: { reportCode: this.$route.query.reportCode },
})
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
// 获取结束坐标和列名 // 获取结束坐标和列名
@ -344,13 +392,11 @@ export default {
// 复制一个组件 // 复制一个组件
var tool = getToolByCode(widgetType) var tool = getToolByCode(widgetType)
var widgetJson = { var widgetJson = {
type: widgetType, type: widgetType,
value: { value: {
setup: {}, setup: {},
data: {}, data: {},
collapse: {},
position: { position: {
width: 0, width: 0,
height: 0, height: 0,
@ -361,29 +407,32 @@ export default {
}, },
options: tool.options, options: tool.options,
} }
// 处理默认值 // 处理默认值
const widgetJsonValue = this.handleDefaultValue(widgetJson) const widgetJsonValue = this.handleDefaultValue(widgetJson)
// 将选中的复制组件，放到工作区中去 // 将选中的复制组件，放到工作区中去
this.widgets.push(this.deepClone(widgetJsonValue)) this.widgets.push(this.deepClone(widgetJsonValue))
console.log(this.widgets)
// 激活新组件的配置属性 // 激活新组件的配置属性
this.setOptionsOnClickWidget(this.widgets.length - 1) this.setOptionsOnClickWidget(this.widgets.length - 1)
}, },
// 对组件默认值处理 // 对组件默认值处理
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
// setup 处理 // setup 处理
for (let i = 0; i < widgetJson.options.setup.length; i++) { for (let i = 0; i < widgetJson.options.setup.length; i++) {
const item = widgetJson.options.setup[i] const item = widgetJson.options.setup[i]
if (item.value) { if (Object.prototype.toString.call(item) == '[object Object]') {
widgetJson.value.setup[item.name] = item.value widgetJson.value.setup[item.name] = item.value
} else if (Object.prototype.toString.call(item) == '[object Array]') {
for (let j = 0; j < item.length; j++) {
const list = item[j].list
list.forEach((el) => {
widgetJson.value.setup[el.name] = el.value
})
}
} }
} }
// position // position
@ -393,18 +442,6 @@ export default {
widgetJson.value.position[item.name] = item.value widgetJson.value.position[item.name] = item.value
} }
} }
// collapse 处理
if (widgetJson.options.collapse && widgetJson.options.collapse.length > 0) {
for (let i = 0; i < widgetJson.options.collapse.length; i++) {
const itemList = widgetJson.options.collapse[i].list
for (let j = 0; j < itemList.length; j++) {
const itemChildList = itemList[j]
if (itemChildList.value) {
widgetJson.value.collapse[itemChildList.name] = itemChildList.value
}
}
}
}
// data 处理 // data 处理
if (widgetJson.options.data && widgetJson.options.data.length > 0) { if (widgetJson.options.data && widgetJson.options.data.length > 0) {
for (let i = 0; i < widgetJson.options.data.length; i++) { for (let i = 0; i < widgetJson.options.data.length; i++) {
@ -420,7 +457,7 @@ export default {
}, },
// 如果是点击大屏设计器中的底层，加载大屏底层属性 // 如果是点击大屏设计器中的底层，加载大屏底层属性
setOptionsOnClickScreen() { setOptionsOnClickScreen () {
this.screenCode = 'screen' this.screenCode = 'screen'
// 选中不同的组件 右侧都显示第一栏 // 选中不同的组件 右侧都显示第一栏
this.activeName = 'first' this.activeName = 'first'
@ -428,7 +465,7 @@ export default {
}, },
// 如果是点击某个组件，获取该组件的配置项 // 如果是点击某个组件，获取该组件的配置项
setOptionsOnClickWidget(index) { setOptionsOnClickWidget (index) {
// 选中不同的组件 右侧都显示第一栏 // 选中不同的组件 右侧都显示第一栏
this.activeName = 'first' this.activeName = 'first'
this.screenCode = '' this.screenCode = ''
@ -437,6 +474,7 @@ export default {
return return
} }
this.widgetIndex = index this.widgetIndex = index
console.log(this.deepClone(this.widgets[index]['options']))
this.widgetOptions = this.deepClone(this.widgets[index]['options']) this.widgetOptions = this.deepClone(this.widgets[index]['options'])
return return
} else { } else {
@ -446,7 +484,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',
@ -456,19 +494,18 @@ export default {
position: {} position: {}
} }
}]*/ }]*/
if (this.screenCode == 'screen') { if (this.screenCode == 'screen') {
this.dashboard = this.deepClone(val) this.dashboard = this.deepClone(val)
} }
for (let i = 0; i < this.widgets.length; i++) { for (let i = 0; i < this.widgets.length; i++) {
if (this.widgetIndex == i) { if (this.widgetIndex == i) {
this.widgets[i].value[key] = this.deepClone(val) this.widgets[i].value[key] = this.deepClone(val)
this.setDefaultValue(this.widgets[i].options[key], 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
const left = event.clientX const left = event.clientX
const top = event.clientY const top = event.clientY
@ -482,33 +519,31 @@ 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, type, val) { setDefaultValue (options, val) {
// type: setup、collapse、data、position for (let i = 0; i < options.length; i++) {
const optionsArr = options if (Object.prototype.toString.call(options[i]) == '[object Object]') {
if (type == 'collapse') { for (const k in val) {
for (let i = 0; i < optionsArr.length; i++) { if (options[i].name == k) {
const list = optionsArr[i].list options[i].value = val[k]
for (let j = 0; j < list.length; j++) {
for (const k in val) {
if (list[j].name == k) {
list[j].value = val[k]
}
} }
} }
} } else if (Object.prototype.toString.call(options[i]) == '[object Array]') {
} else { for (let j = 0; j < options[i].length; j++) {
for (let i = 0; i < optionsArr.length; i++) { const list = options[i][j].list
for (const k in val) { for (let z = 0; z < list.length; z++) {
if (optionsArr[i].name == k) { for (const k in val) {
optionsArr[i].value = val[k] if (list[z].name == k) {
list[z].value = val[k]
}
}
} }
} }
} }
} }
} },
}, },
} }
</script> </script>

4175
report-ui/src/views/report/bigscreen/designer/tools.js
View File

File diff suppressed because it is too large Load Diff

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

@ -1,7 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" <v-chart :options="options" autoresize />
autoresize />
</div> </div>
</template> </template>
@ -13,7 +12,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
}, },
data () { data() {
return { return {
options: { options: {
grid: {}, grid: {},
@ -48,49 +47,51 @@ export default {
type: 'bar', type: 'bar',
barGap: '0%', barGap: '0%',
itemStyle: { itemStyle: {
borderRadius: null borderRadius: null,
} },
}, },
], ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsSetup: {},
} }
}, },
computed: { computed: {
styleObj () { styleObj() {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? 'absolute' : 'static',
width: this.optionsStyle.width + 'px', width: this.optionsStyle.width + 'px',
height: this.optionsStyle.height + 'px', height: this.optionsStyle.height + 'px',
left: this.optionsStyle.left + 'px', left: this.optionsStyle.left + 'px',
top: this.optionsStyle.top + 'px', top: this.optionsStyle.top + 'px',
background: this.optionsSetup.background,
} }
}, },
}, },
watch: { watch: {
value: { value: {
handler (val) { handler(val) {
console.log(val)
this.optionsStyle = val.position this.optionsStyle = val.position
this.optionsData = val.data this.optionsData = val.data
this.optionsCollapse = val.collapse this.optionsCollapse = val.setup
this.optionsSetup = val.setup this.optionsSetup = val.setup
this.editorOptions() this.editorOptions()
}, },
deep: true, deep: true,
}, },
}, },
mounted () { mounted() {
this.optionsStyle = this.value.position this.optionsStyle = this.value.position
this.optionsData = this.value.data this.optionsData = this.value.data
this.optionsCollapse = this.value.collapse this.optionsCollapse = this.value.setup
this.optionsSetup = this.value.setup this.optionsSetup = this.value.setup
this.editorOptions() this.editorOptions()
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions () { editorOptions() {
this.setOptionsTitle() this.setOptionsTitle()
this.setOptionsX() this.setOptionsX()
this.setOptionsY() this.setOptionsY()
@ -102,11 +103,12 @@ export default {
this.setOptionsData() this.setOptionsData()
}, },
// 标题修改 // 标题修改
setOptionsTitle () { setOptionsTitle() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const title = {} const title = {}
title.text = optionsCollapse.titleText title.text = optionsCollapse.titleText
title.textAlign = optionsCollapse.textAlign title.show = optionsCollapse.isNoTitle
title.left = optionsCollapse.textAlign
title.textStyle = { title.textStyle = {
color: optionsCollapse.textColor, color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize, fontSize: optionsCollapse.textFontSize,
@ -122,8 +124,8 @@ export default {
this.options.title = title this.options.title = title
}, },
// X轴设置 // X轴设置
setOptionsX () { setOptionsX() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const xAxis = { const xAxis = {
type: 'category', type: 'category',
show: optionsCollapse.hideX, // 坐标轴是否显示 show: optionsCollapse.hideX, // 坐标轴是否显示
@ -136,19 +138,25 @@ export default {
inverse: optionsCollapse.reversalX, // 轴反转 inverse: optionsCollapse.reversalX, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
interval: optionsCollapse.textInterval,// 文字角度 interval: optionsCollapse.textInterval, // 文字角度
rotate: optionsCollapse.textAngle,// 文字角度 rotate: optionsCollapse.textAngle, // 文字角度
textStyle: { textStyle: {
color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeX, fontSize: optionsCollapse.fontSizeX,
}, },
}, },
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
} }
this.options.xAxis = xAxis this.options.xAxis = xAxis
}, },
// Y轴设置 // Y轴设置
setOptionsY () { setOptionsY() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const yAxis = { const yAxis = {
type: 'value', type: 'value',
show: optionsCollapse.isShowY, // 坐标轴是否显示 show: optionsCollapse.isShowY, // 坐标轴是否显示
@ -165,13 +173,22 @@ export default {
fontSize: optionsCollapse.fontSizeY, fontSize: optionsCollapse.fontSizeY,
}, },
}, },
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
} }
this.options.yAxis = yAxis this.options.yAxis = yAxis
}, },
// 数值设定 or 柱体设置 // 数值设定 or 柱体设置
setOptionsTop () { setOptionsTop() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
for (const key in series) { for (const key in series) {
@ -191,8 +208,8 @@ export default {
this.options.series = series this.options.series = series
}, },
// tooltip 设置 // tooltip 设置
setOptionsTooltip () { setOptionsTooltip() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const tooltip = { const tooltip = {
trigger: 'item', trigger: 'item',
show: true, show: true,
@ -203,21 +220,21 @@ export default {
} }
this.options.tooltip = tooltip this.options.tooltip = tooltip
}, },
//边距设置 // 边距设置
setOptionsMargin () { setOptionsMargin() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const grid = { const grid = {
left: optionsCollapse.marginLeft, left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight, right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom, bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop, top: optionsCollapse.marginTop,
containLabel: true containLabel: true,
} }
this.options.grid = grid this.options.grid = grid
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend () { setOptionsLegend() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const legend = this.options.legend const legend = this.options.legend
legend.show = optionsCollapse.isShowLegend legend.show = optionsCollapse.isShowLegend
legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto' legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@ -232,23 +249,23 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth legend.itemWidth = optionsCollapse.lengedWidth
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor () { setOptionsColor() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const customColor = optionsCollapse.customColor const customColor = optionsCollapse.customColor
if (!customColor) return if (!customColor) return
let arrColor = [] const arrColor = []
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color) arrColor.push(customColor[i].color)
} }
let itemStyle = { const itemStyle = {
normal: { normal: {
color: (params) => { color: (params) => {
return arrColor[params.dataIndex] return arrColor[params.dataIndex]
}, },
barBorderRadius: optionsCollapse.radius barBorderRadius: optionsCollapse.radius,
} },
} }
for (let key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == 'bar') { if (this.options.series[key].type == 'bar') {
this.options.series[key].itemStyle = itemStyle this.options.series[key].itemStyle = itemStyle
} }
@ -256,13 +273,15 @@ export default {
this.options = Object.assign({}, this.options) this.options = Object.assign({}, this.options)
}, },
// 数据解析 // 数据解析
setOptionsData () { setOptionsData() {
const optionsSetup = this.optionsSetup const optionsSetup = this.optionsSetup
console.log(optionsSetup)
const optionsData = this.optionsData // 数据类型 静态 or 动态 const optionsData = this.optionsData // 数据类型 静态 or 动态
console.log(optionsData)
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup) optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup)
}, },
// 静态数据 // 静态数据
staticDataFn (val, optionsSetup) { staticDataFn(val, optionsSetup) {
const staticData = JSON.parse(val) const staticData = JSON.parse(val)
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
@ -278,14 +297,15 @@ export default {
} }
// series // series
const series = this.options.series const series = this.options.series
for (let i in series) { for (const i in series) {
if (series[i].type == 'bar') { if (series[i].type == 'bar') {
series[i].data = staticData.series[0].data series[i].data = staticData.series[0].data
} }
} }
}, },
// 动态数据 // 动态数据
dynamicDataFn (val, optionsSetup) { dynamicDataFn(val, optionsSetup) {
console.log(val)
if (!val) return if (!val) return
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
@ -302,7 +322,7 @@ export default {
// series // series
const series = this.options.series const series = this.options.series
for (let i in series) { for (const i in series) {
if (series[i].type == 'bar') { if (series[i].type == 'bar') {
series[i].data = val.series[i].data series[i].data = val.series[i].data
} }

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

@ -1,7 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" <v-chart :options="options" autoresize />
autoresize />
</div> </div>
</template> </template>
@ -13,7 +12,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
}, },
data () { data() {
return { return {
options: { options: {
color: [], color: [],
@ -32,7 +31,7 @@ export default {
textStyle: { textStyle: {
color: '#fff', color: '#fff',
}, },
data: ["货运量", "货运总量"] data: ['货运量', '货运总量'],
}, },
xAxis: [ xAxis: [
{ {
@ -80,54 +79,58 @@ export default {
type: 'bar', type: 'bar',
data: [], data: [],
itemStyle: { itemStyle: {
barBorderRadius: null barBorderRadius: null,
} },
}, },
{ {
name: '', name: '',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: [], data: [],
itemStyle: {} itemStyle: {},
}, },
], ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {},
} }
}, },
computed: { computed: {
styleObj () { styleObj() {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? 'absolute' : 'static',
width: this.optionsStyle.width + 'px', width: this.optionsStyle.width + 'px',
height: this.optionsStyle.height + 'px', height: this.optionsStyle.height + 'px',
left: this.optionsStyle.left + 'px', left: this.optionsStyle.left + 'px',
top: this.optionsStyle.top + 'px', top: this.optionsStyle.top + 'px',
background: this.optionsSetup.background,
} }
}, },
}, },
watch: { watch: {
value: { value: {
handler (val) { handler(val) {
this.optionsStyle = val.position this.optionsStyle = val.position
this.optionsData = val.data this.optionsData = val.data
this.optionsCollapse = val.collapse this.optionsCollapse = val.collapse
this.optionsSetup = val.setup
this.editorOptions() this.editorOptions()
}, },
deep: true, deep: true,
}, },
}, },
created () { created() {
this.optionsStyle = this.value.position this.optionsStyle = this.value.position
this.optionsData = this.value.data this.optionsData = this.value.data
this.optionsCollapse = this.value.collapse this.optionsCollapse = this.value.collapse
this.optionsSetup = this.value.setup
this.editorOptions() this.editorOptions()
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions () { editorOptions() {
this.setOptionsTitle() this.setOptionsTitle()
this.setOptionsX() this.setOptionsX()
this.setOptionsY() this.setOptionsY()
@ -140,11 +143,12 @@ export default {
this.setOptionsColor() this.setOptionsColor()
}, },
// 标题修改 // 标题修改
setOptionsTitle () { setOptionsTitle() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const title = {} const title = {}
title.text = optionsCollapse.titleText title.text = optionsCollapse.titleText
title.textAlign = optionsCollapse.textAlign title.show = optionsCollapse.isNoTitle
title.left = optionsCollapse.textAlign
title.textStyle = { title.textStyle = {
color: optionsCollapse.textColor, color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize, fontSize: optionsCollapse.textFontSize,
@ -160,9 +164,8 @@ export default {
this.options.title = title this.options.title = title
}, },
// X轴设置 // X轴设置
setOptionsX () { setOptionsX() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
console.log(optionsCollapse)
const xAxis = { const xAxis = {
type: 'category', type: 'category',
show: optionsCollapse.hideX, // 坐标轴是否显示 show: optionsCollapse.hideX, // 坐标轴是否显示
@ -175,19 +178,25 @@ export default {
inverse: optionsCollapse.reversalX, // 轴反转 inverse: optionsCollapse.reversalX, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
interval: optionsCollapse.textInterval,// 文字角度 interval: optionsCollapse.textInterval, // 文字角度
rotate: optionsCollapse.textAngle,// 文字角度 rotate: optionsCollapse.textAngle, // 文字角度
textStyle: { textStyle: {
color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeX, fontSize: optionsCollapse.fontSizeX,
}, },
}, },
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
} }
this.options.xAxis = xAxis this.options.xAxis = xAxis
}, },
// Y轴设置 // Y轴设置
setOptionsY () { setOptionsY() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const yAxis = [ const yAxis = [
{ {
type: 'value', type: 'value',
@ -205,6 +214,15 @@ export default {
fontSize: optionsCollapse.fontSizeY, fontSize: optionsCollapse.fontSizeY,
}, },
}, },
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
}, },
{ {
type: 'value', type: 'value',
@ -222,14 +240,23 @@ export default {
fontSize: optionsCollapse.fontSizeY, fontSize: optionsCollapse.fontSizeY,
}, },
}, },
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
}, },
] ]
this.options.yAxis = yAxis this.options.yAxis = yAxis
}, },
// 折线设置 // 折线设置
setOptionsTop () { setOptionsTop() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
for (const key in series) { for (const key in series) {
if (series[key].type == 'line') { if (series[key].type == 'line') {
@ -261,8 +288,8 @@ export default {
} }
this.options.series = series this.options.series = series
}, },
setOptionsBar () { setOptionsBar() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
for (const key in series) { for (const key in series) {
if (series[key].type == 'bar') { if (series[key].type == 'bar') {
@ -282,8 +309,8 @@ export default {
this.options.series = series this.options.series = series
}, },
// tooltip 设置 // tooltip 设置
setOptionsTooltip () { setOptionsTooltip() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const tooltip = { const tooltip = {
trigger: 'item', trigger: 'item',
show: true, show: true,
@ -294,21 +321,21 @@ export default {
} }
this.options.tooltip = tooltip this.options.tooltip = tooltip
}, },
//边距设置 // 边距设置
setOptionsMargin () { setOptionsMargin() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const grid = { const grid = {
left: optionsCollapse.marginLeft, left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight, right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom, bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop, top: optionsCollapse.marginTop,
containLabel: true containLabel: true,
} }
this.options.grid = grid this.options.grid = grid
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend () { setOptionsLegend() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const legend = this.options.legend const legend = this.options.legend
legend.show = optionsCollapse.isShowLegend legend.show = optionsCollapse.isShowLegend
legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto' legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@ -323,11 +350,11 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth legend.itemWidth = optionsCollapse.lengedWidth
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor () { setOptionsColor() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const customColor = optionsCollapse.customColor const customColor = optionsCollapse.customColor
if (!customColor) return if (!customColor) return
let arrColor = [] const arrColor = []
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color) arrColor.push(customColor[i].color)
} }
@ -335,32 +362,32 @@ export default {
this.options = Object.assign({}, this.options) this.options = Object.assign({}, this.options)
}, },
// 数据处理 // 数据处理
setOptionsData () { setOptionsData() {
const optionsData = this.optionsData // 数据类型 静态 or 动态 const optionsData = this.optionsData // 数据类型 静态 or 动态
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData) optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
}, },
staticDataFn (val) { staticDataFn(val) {
const staticData = JSON.parse(val) const staticData = JSON.parse(val)
// x轴 // x轴
this.options.xAxis.data = staticData.xAxis this.options.xAxis.data = staticData.xAxis
// series // series
const series = this.options.series const series = this.options.series
for (let i in series) { for (const i in series) {
for (let j in staticData.series) { for (const j in staticData.series) {
if (series[i].type == staticData.series[j].type) { if (series[i].type == staticData.series[j].type) {
series[i].data = staticData.series[j].data series[i].data = staticData.series[j].data
} }
} }
} }
}, },
dynamicDataFn (val) { dynamicDataFn(val) {
if (!val) return if (!val) return
// x轴 // x轴
this.options.xAxis.data = val.xAxis this.options.xAxis.data = val.xAxis
// series // series
const series = this.options.series const series = this.options.series
for (let i in series) { for (const i in series) {
for (let j in val.series) { for (const j in val.series) {
if (series[i].type == val.series[j].type) { if (series[i].type == val.series[j].type) {
series[i].data = val.series[j].data series[i].data = val.series[j].data
} }

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

@ -1,7 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" <v-chart :options="options" autoresize />
autoresize />
</div> </div>
</template> </template>
@ -13,7 +12,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
}, },
data () { data() {
return { return {
options: { options: {
color: [], color: [],
@ -75,39 +74,43 @@ export default {
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {},
} }
}, },
computed: { computed: {
styleObj () { styleObj() {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? 'absolute' : 'static',
width: this.optionsStyle.width + 'px', width: this.optionsStyle.width + 'px',
height: this.optionsStyle.height + 'px', height: this.optionsStyle.height + 'px',
left: this.optionsStyle.left + 'px', left: this.optionsStyle.left + 'px',
top: this.optionsStyle.top + 'px', top: this.optionsStyle.top + 'px',
background: this.optionsSetup.background,
} }
}, },
}, },
watch: { watch: {
value: { value: {
handler (val) { handler(val) {
this.optionsStyle = val.position this.optionsStyle = val.position
this.optionsData = val.data this.optionsData = val.data
this.optionsCollapse = val.collapse this.optionsCollapse = val.collapse
this.optionsSetup = val.setup
this.editorOptions() this.editorOptions()
}, },
deep: true, deep: true,
}, },
}, },
created () { created() {
this.optionsStyle = this.value.position this.optionsStyle = this.value.position
this.optionsData = this.value.data this.optionsData = this.value.data
this.optionsCollapse = this.value.collapse this.optionsCollapse = this.value.collapse
this.optionsSetup = this.value.setup
this.editorOptions() this.editorOptions()
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions () { editorOptions() {
this.setOptionsText() this.setOptionsText()
this.setOptionsTitle() this.setOptionsTitle()
this.setOptionsTooltip() this.setOptionsTooltip()
@ -116,8 +119,8 @@ export default {
this.setOptionsData() this.setOptionsData()
}, },
// 文字设置 // 文字设置
setOptionsText () { setOptionsText() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
for (const key in series) { for (const key in series) {
@ -132,12 +135,12 @@ export default {
} }
}, },
// 标题修改 // 标题修改
setOptionsTitle () { setOptionsTitle() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const title = {} const title = {}
title.show = optionsCollapse.isNoTitle title.show = optionsCollapse.isNoTitle
title.text = optionsCollapse.titleText title.text = optionsCollapse.titleText
title.textAlign = optionsCollapse.textAlign title.left = optionsCollapse.textAlign
title.textStyle = { title.textStyle = {
color: optionsCollapse.textColor, color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize, fontSize: optionsCollapse.textFontSize,
@ -153,8 +156,8 @@ export default {
this.options.title = title this.options.title = title
}, },
// 提示语设置 tooltip // 提示语设置 tooltip
setOptionsTooltip () { setOptionsTooltip() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const tooltip = { const tooltip = {
trigger: 'item', trigger: 'item',
show: true, show: true,
@ -166,8 +169,8 @@ export default {
this.options.tooltip = tooltip this.options.tooltip = tooltip
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend () { setOptionsLegend() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const legend = this.options.legend const legend = this.options.legend
legend.show = optionsCollapse.isShowLegend legend.show = optionsCollapse.isShowLegend
legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto' legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@ -182,32 +185,32 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth legend.itemWidth = optionsCollapse.lengedWidth
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor () { setOptionsColor() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const customColor = optionsCollapse.customColor const customColor = optionsCollapse.customColor
if (!customColor) return if (!customColor) return
let arrColor = [] const arrColor = []
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color) arrColor.push(customColor[i].color)
} }
this.options.color = arrColor this.options.color = arrColor
this.options = Object.assign({}, this.options) this.options = Object.assign({}, this.options)
}, },
setOptionsData () { setOptionsData() {
const optionsData = this.optionsData // 数据类型 静态 or 动态 const optionsData = this.optionsData // 数据类型 静态 or 动态
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData) optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
}, },
staticDataFn (val) { staticDataFn(val) {
const staticData = JSON.parse(val) const staticData = JSON.parse(val)
for (let key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == 'funnel') { if (this.options.series[key].type == 'funnel') {
this.options.series[key].data = staticData this.options.series[key].data = staticData
} }
} }
}, },
dynamicDataFn (val) { dynamicDataFn(val) {
if (!val) return if (!val) return
for (let key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == 'funnel') { if (this.options.series[key].type == 'funnel') {
this.options.series[key].data = val this.options.series[key].data = val
} }

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

@ -61,6 +61,7 @@ export default {
height: this.optionsStyle.height + 'px', height: this.optionsStyle.height + 'px',
left: this.optionsStyle.left + 'px', left: this.optionsStyle.left + 'px',
top: this.optionsStyle.top + 'px', top: this.optionsStyle.top + 'px',
background: this.optionsSetup.background,
} }
}, },
}, },
@ -106,7 +107,7 @@ export default {
staticDataFn(val) { staticDataFn(val) {
const unit = JSON.parse(val).unit const unit = JSON.parse(val).unit
const series = this.options.series const series = this.options.series
for (let key in series) { for (const key in series) {
series[key].detail.formatter = `{value}${unit}` series[key].detail.formatter = `{value}${unit}`
series[key].data[0] = { series[key].data[0] = {
value: JSON.parse(val).value, value: JSON.parse(val).value,
@ -117,7 +118,7 @@ export default {
dynamicDataFn(val) { dynamicDataFn(val) {
if (!val) return if (!val) return
const series = this.options.series const series = this.options.series
for (let key in series) { for (const key in series) {
series[key].detail.formatter = `{value}${val.unit}` series[key].detail.formatter = `{value}${val.unit}`
series[key].data[0] = { series[key].data[0] = {
value: val.value, value: val.value,

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

@ -1,7 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" <v-chart :options="options" autoresize />
autoresize />
</div> </div>
</template> </template>
@ -13,7 +12,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
}, },
data () { data() {
return { return {
options: { options: {
color: [], color: [],
@ -53,39 +52,43 @@ export default {
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {},
} }
}, },
computed: { computed: {
styleObj () { styleObj() {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? 'absolute' : 'static',
width: this.optionsStyle.width + 'px', width: this.optionsStyle.width + 'px',
height: this.optionsStyle.height + 'px', height: this.optionsStyle.height + 'px',
left: this.optionsStyle.left + 'px', left: this.optionsStyle.left + 'px',
top: this.optionsStyle.top + 'px', top: this.optionsStyle.top + 'px',
background: this.optionsSetup.background,
} }
}, },
}, },
watch: { watch: {
value: { value: {
handler (val) { handler(val) {
this.optionsStyle = val.position this.optionsStyle = val.position
this.optionsData = val.data this.optionsData = val.data
this.optionsCollapse = val.collapse this.optionsCollapse = val.collapse
this.optionsSetup = val.setup
this.editorOptions() this.editorOptions()
}, },
deep: true, deep: true,
}, },
}, },
created () { created() {
this.optionsStyle = this.value.position this.optionsStyle = this.value.position
this.optionsData = this.value.data this.optionsData = this.value.data
this.optionsCollapse = this.value.collapse this.optionsCollapse = this.value.collapse
this.optionsSetup = this.value.setup
this.editorOptions() this.editorOptions()
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions () { editorOptions() {
this.setOptionsTitle() this.setOptionsTitle()
this.setOptionsValue() this.setOptionsValue()
this.setOptionsTooltip() this.setOptionsTooltip()
@ -94,12 +97,12 @@ export default {
this.setOptionsData() this.setOptionsData()
}, },
// 标题设置 // 标题设置
setOptionsTitle () { setOptionsTitle() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const title = {} const title = {}
title.show = optionsCollapse.isNoTitle title.show = optionsCollapse.isNoTitle
title.text = optionsCollapse.titleText title.text = optionsCollapse.titleText
title.textAlign = optionsCollapse.textAlign title.left = optionsCollapse.textAlign
title.textStyle = { title.textStyle = {
color: optionsCollapse.textColor, color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize, fontSize: optionsCollapse.textFontSize,
@ -115,8 +118,8 @@ export default {
this.options.title = title this.options.title = title
}, },
// 数值设定 // 数值设定
setOptionsValue () { setOptionsValue() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
const numberValue = optionsCollapse.numberValue ? '{c}' : '' const numberValue = optionsCollapse.numberValue ? '{c}' : ''
const percentage = optionsCollapse.percentage ? '({d})%' : '' const percentage = optionsCollapse.percentage ? '({d})%' : ''
@ -143,8 +146,8 @@ export default {
} }
}, },
// 提示语设置 tooltip // 提示语设置 tooltip
setOptionsTooltip () { setOptionsTooltip() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const tooltip = { const tooltip = {
trigger: 'item', trigger: 'item',
show: true, show: true,
@ -156,8 +159,8 @@ export default {
this.options.tooltip = tooltip this.options.tooltip = tooltip
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend () { setOptionsLegend() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const legend = this.options.legend const legend = this.options.legend
legend.show = optionsCollapse.isShowLegend legend.show = optionsCollapse.isShowLegend
legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto' legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@ -172,32 +175,32 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth legend.itemWidth = optionsCollapse.lengedWidth
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor () { setOptionsColor() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const customColor = optionsCollapse.customColor const customColor = optionsCollapse.customColor
if (!customColor) return if (!customColor) return
let arrColor = [] const arrColor = []
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color) arrColor.push(customColor[i].color)
} }
this.options.color = arrColor this.options.color = arrColor
this.options = Object.assign({}, this.options) this.options = Object.assign({}, this.options)
}, },
setOptionsData () { setOptionsData() {
const optionsData = this.optionsData // 数据类型 静态 or 动态 const optionsData = this.optionsData // 数据类型 静态 or 动态
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData) optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
}, },
staticDataFn (val) { staticDataFn(val) {
const staticData = JSON.parse(val) const staticData = JSON.parse(val)
for (let key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == 'pie') { if (this.options.series[key].type == 'pie') {
this.options.series[key].data = staticData this.options.series[key].data = staticData
} }
} }
}, },
dynamicDataFn (val) { dynamicDataFn(val) {
if (!val) return if (!val) return
for (let key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == 'pie') { if (this.options.series[key].type == 'pie') {
this.options.series[key].data = val this.options.series[key].data = val
} }

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

@ -1,7 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" <v-chart :options="options" autoresize />
autoresize />
</div> </div>
</template> </template>
@ -13,7 +12,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
}, },
data () { data() {
return { return {
options: { options: {
grid: {}, grid: {},
@ -62,39 +61,43 @@ export default {
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {},
} }
}, },
computed: { computed: {
styleObj () { styleObj() {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? 'absolute' : 'static',
width: this.optionsStyle.width + 'px', width: this.optionsStyle.width + 'px',
height: this.optionsStyle.height + 'px', height: this.optionsStyle.height + 'px',
left: this.optionsStyle.left + 'px', left: this.optionsStyle.left + 'px',
top: this.optionsStyle.top + 'px', top: this.optionsStyle.top + 'px',
background: this.optionsSetup.background,
} }
}, },
}, },
watch: { watch: {
value: { value: {
handler (val) { handler(val) {
this.optionsStyle = val.position this.optionsStyle = val.position
this.optionsData = val.data this.optionsData = val.data
this.optionsCollapse = val.collapse this.optionsCollapse = val.collapse
this.optionsSetup = val.setup
this.editorOptions() this.editorOptions()
}, },
deep: true, deep: true,
}, },
}, },
created () { created() {
this.optionsStyle = this.value.position this.optionsStyle = this.value.position
this.optionsData = this.value.data this.optionsData = this.value.data
this.optionsCollapse = this.value.collapse this.optionsCollapse = this.value.collapse
this.optionsSetup = this.value.setup
this.editorOptions() this.editorOptions()
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions () { editorOptions() {
this.setOptionsTitle() this.setOptionsTitle()
this.setOptionsX() this.setOptionsX()
this.setOptionsY() this.setOptionsY()
@ -106,12 +109,12 @@ export default {
this.setOptionsColor() this.setOptionsColor()
}, },
// 标题修改 // 标题修改
setOptionsTitle () { setOptionsTitle() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const title = {} const title = {}
title.text = optionsCollapse.titleText title.text = optionsCollapse.titleText
title.show = optionsCollapse.isNoTitle title.show = optionsCollapse.isNoTitle
title.textAlign = optionsCollapse.textAlign title.left = optionsCollapse.textAlign
title.textStyle = { title.textStyle = {
color: optionsCollapse.textColor, color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize, fontSize: optionsCollapse.textFontSize,
@ -127,8 +130,8 @@ export default {
this.options.title = title this.options.title = title
}, },
// X轴设置 // X轴设置
setOptionsX () { setOptionsX() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const xAxis = { const xAxis = {
type: 'category', type: 'category',
show: optionsCollapse.hideX, // 坐标轴是否显示 show: optionsCollapse.hideX, // 坐标轴是否显示
@ -141,19 +144,25 @@ export default {
inverse: optionsCollapse.reversalX, // 轴反转 inverse: optionsCollapse.reversalX, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
interval: optionsCollapse.textInterval,// 文字角度 interval: optionsCollapse.textInterval, // 文字角度
rotate: optionsCollapse.textAngle,// 文字角度 rotate: optionsCollapse.textAngle, // 文字角度
textStyle: { textStyle: {
color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeX, fontSize: optionsCollapse.fontSizeX,
}, },
}, },
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
} }
this.options.xAxis = xAxis this.options.xAxis = xAxis
}, },
// Y轴设置 // Y轴设置
setOptionsY () { setOptionsY() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const yAxis = { const yAxis = {
type: 'value', type: 'value',
show: optionsCollapse.isShowY, // 坐标轴是否显示 show: optionsCollapse.isShowY, // 坐标轴是否显示
@ -170,13 +179,22 @@ export default {
fontSize: optionsCollapse.fontSizeY, fontSize: optionsCollapse.fontSizeY,
}, },
}, },
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
} }
this.options.yAxis = yAxis this.options.yAxis = yAxis
}, },
// 折线设置 // 折线设置
setOptionsTop () { setOptionsTop() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
for (const key in series) { for (const key in series) {
if (series[key].type == 'line') { if (series[key].type == 'line') {
@ -209,8 +227,8 @@ export default {
this.options.series = series this.options.series = series
}, },
// tooltip 设置 // tooltip 设置
setOptionsTooltip () { setOptionsTooltip() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const tooltip = { const tooltip = {
trigger: 'item', trigger: 'item',
show: true, show: true,
@ -221,21 +239,21 @@ export default {
} }
this.options.tooltip = tooltip this.options.tooltip = tooltip
}, },
//边距设置 // 边距设置
setOptionsMargin () { setOptionsMargin() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const grid = { const grid = {
left: optionsCollapse.marginLeft, left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight, right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom, bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop, top: optionsCollapse.marginTop,
containLabel: true containLabel: true,
} }
this.options.grid = grid this.options.grid = grid
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend () { setOptionsLegend() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const legend = this.options.legend const legend = this.options.legend
legend.show = optionsCollapse.isShowLegend legend.show = optionsCollapse.isShowLegend
legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto' legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@ -251,11 +269,11 @@ export default {
console.log(legend) console.log(legend)
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor () { setOptionsColor() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const customColor = optionsCollapse.customColor const customColor = optionsCollapse.customColor
if (!customColor) return if (!customColor) return
let arrColor = [] const arrColor = []
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color) arrColor.push(customColor[i].color)
} }
@ -263,29 +281,29 @@ export default {
this.options = Object.assign({}, this.options) this.options = Object.assign({}, this.options)
}, },
// 处理数据 // 处理数据
setOptionsData () { setOptionsData() {
const optionsData = this.optionsData // 数据类型 静态 or 动态 const optionsData = this.optionsData // 数据类型 静态 or 动态
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData) optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
}, },
staticDataFn (val) { staticDataFn(val) {
const staticData = JSON.parse(val) const staticData = JSON.parse(val)
// x轴 // x轴
this.options.xAxis.data = staticData.categories this.options.xAxis.data = staticData.categories
// series // series
const series = this.options.series const series = this.options.series
for (let i in series) { for (const i in series) {
if (series[i].type == 'line') { if (series[i].type == 'line') {
series[i].data = staticData.series[0].data series[i].data = staticData.series[0].data
} }
} }
}, },
dynamicDataFn (val) { dynamicDataFn(val) {
if (!val) return if (!val) return
// x轴 // x轴
this.options.xAxis.data = val.xAxis this.options.xAxis.data = val.xAxis
// series // series
const series = this.options.series const series = this.options.series
for (let i in series) { for (const i in series) {
if (series[i].type == 'line') { if (series[i].type == 'line') {
series[i].data = val.series[i].data series[i].data = val.series[i].data
} }

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

@ -1,7 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" <v-chart :options="options" autoresize />
autoresize />
</div> </div>
</template> </template>
@ -13,7 +12,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
}, },
data () { data() {
return { return {
options: { options: {
title: { title: {
@ -48,39 +47,43 @@ export default {
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {},
} }
}, },
computed: { computed: {
styleObj () { styleObj() {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? 'absolute' : 'static',
width: this.optionsStyle.width + 'px', width: this.optionsStyle.width + 'px',
height: this.optionsStyle.height + 'px', height: this.optionsStyle.height + 'px',
left: this.optionsStyle.left + 'px', left: this.optionsStyle.left + 'px',
top: this.optionsStyle.top + 'px', top: this.optionsStyle.top + 'px',
background: this.optionsSetup.background,
} }
}, },
}, },
watch: { watch: {
value: { value: {
handler (val) { handler(val) {
this.optionsStyle = val.position this.optionsStyle = val.position
this.optionsData = val.data this.optionsData = val.data
this.optionsCollapse = val.collapse this.optionsCollapse = val.collapse
this.optionsSetup = val.setup
this.editorOptions() this.editorOptions()
}, },
deep: true, deep: true,
}, },
}, },
created () { created() {
this.optionsStyle = this.value.position this.optionsStyle = this.value.position
this.optionsData = this.value.data this.optionsData = this.value.data
this.optionsCollapse = this.value.collapse this.optionsCollapse = this.value.collapse
this.optionsSetup = this.value.setup
this.editorOptions() this.editorOptions()
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions () { editorOptions() {
this.setOptionsTitle() this.setOptionsTitle()
this.setOptionsValue() this.setOptionsValue()
this.setOptionsTooltip() this.setOptionsTooltip()
@ -89,12 +92,12 @@ export default {
this.setOptionsData() this.setOptionsData()
}, },
// 标题设置 // 标题设置
setOptionsTitle () { setOptionsTitle() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const title = {} const title = {}
title.show = optionsCollapse.isNoTitle title.show = optionsCollapse.isNoTitle
title.text = optionsCollapse.titleText title.text = optionsCollapse.titleText
title.textAlign = optionsCollapse.textAlign title.left = optionsCollapse.textAlign
title.textStyle = { title.textStyle = {
color: optionsCollapse.textColor, color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize, fontSize: optionsCollapse.textFontSize,
@ -110,8 +113,8 @@ export default {
this.options.title = title this.options.title = title
}, },
// 数值设定 // 数值设定
setOptionsValue () { setOptionsValue() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
const numberValue = optionsCollapse.numberValue ? '{c}' : '' const numberValue = optionsCollapse.numberValue ? '{c}' : ''
const percentage = optionsCollapse.percentage ? '({d})%' : '' const percentage = optionsCollapse.percentage ? '({d})%' : ''
@ -138,8 +141,8 @@ export default {
} }
}, },
// 提示语设置 tooltip // 提示语设置 tooltip
setOptionsTooltip () { setOptionsTooltip() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const tooltip = { const tooltip = {
trigger: 'item', trigger: 'item',
show: true, show: true,
@ -151,8 +154,8 @@ export default {
this.options.tooltip = tooltip this.options.tooltip = tooltip
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend () { setOptionsLegend() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const legend = this.options.legend const legend = this.options.legend
legend.show = optionsCollapse.isShowLegend legend.show = optionsCollapse.isShowLegend
legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto' legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
@ -167,32 +170,32 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth legend.itemWidth = optionsCollapse.lengedWidth
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor () { setOptionsColor() {
const optionsCollapse = this.optionsCollapse const optionsCollapse = this.optionsSetup
const customColor = optionsCollapse.customColor const customColor = optionsCollapse.customColor
if (!customColor) return if (!customColor) return
let arrColor = [] const arrColor = []
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color) arrColor.push(customColor[i].color)
} }
this.options.color = arrColor this.options.color = arrColor
this.options = Object.assign({}, this.options) this.options = Object.assign({}, this.options)
}, },
setOptionsData () { setOptionsData() {
const optionsData = this.optionsData // 数据类型 静态 or 动态 const optionsData = this.optionsData // 数据类型 静态 or 动态
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData) optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
}, },
staticDataFn (val) { staticDataFn(val) {
const staticData = JSON.parse(val) const staticData = JSON.parse(val)
for (let key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == 'pie') { if (this.options.series[key].type == 'pie') {
this.options.series[key].data = staticData this.options.series[key].data = staticData
} }
} }
}, },
dynamicDataFn (val) { dynamicDataFn(val) {
if (!val) return if (!val) return
for (let key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == 'pie') { if (this.options.series[key].type == 'pie') {
this.options.series[key].data = val this.options.series[key].data = val
} }

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

@ -72,11 +72,11 @@ export default {
mounted () { }, mounted () { },
methods: { methods: {
openDesign (reportId) { openDesign (reportId) {
var routeUrl = this.$router.resolve({ path: '/report/bigscreen/designer', query: { reportId: reportId } }) var routeUrl = this.$router.resolve({ path: '/bigscreen/designer', query: { reportId: reportId } })
window.open(routeUrl.href, '_blank') window.open(routeUrl.href, '_blank')
}, },
viewDesign (reportId) { viewDesign (reportId) {
var routeUrl = this.$router.resolve({ path: '/report/bigscreen/viewer', query: { reportId: reportId } }) var routeUrl = this.$router.resolve({ path: '/bigscreen/viewer', query: { reportId: reportId } })
window.open(routeUrl.href, '_blank') window.open(routeUrl.href, '_blank')
}, },
}, },
@ -102,11 +102,11 @@ export default {
} }
.bg::before { .bg::before {
content: ''; content: "";
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url('../../../assets/images/charts.jpg'); background-image: url("../../../assets/images/charts.jpg");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left top; background-position: left top;

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

@ -7,7 +7,10 @@
<template> <template>
<div class="layout"> <div class="layout">
<div :style="bigScreenStyle"> <div :style="bigScreenStyle">
<widget v-for="(widget, index) in widgets" :key="index" v-model="widget.value" :type="widget.type" /> <widget v-for="(widget, index) in widgets"
:key="index"
v-model="widget.value"
:type="widget.type" />
</div> </div>
</div> </div>
</template> </template>
@ -20,7 +23,7 @@ export default {
components: { components: {
widget, widget,
}, },
data() { data () {
return { return {
list: [ list: [
{ {
@ -94,11 +97,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

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

@ -340,7 +340,7 @@ export default {
window.open(routeUrl.href, '_blank') window.open(routeUrl.href, '_blank')
} else { } else {
// eslint-disable-next-line no-redeclare // eslint-disable-next-line no-redeclare
var routeUrl = this.$router.resolve({ path: '/report/bigscreen/viewer', query: { reportCode: val.reportCode } }) var routeUrl = this.$router.resolve({ path: '/bigscreen/viewer', query: { reportCode: val.reportCode } })
window.open(routeUrl.href, '_blank') window.open(routeUrl.href, '_blank')
} }
}, },
@ -351,7 +351,7 @@ export default {
window.open(routeUrl.href, '_blank') window.open(routeUrl.href, '_blank')
} else { } else {
// eslint-disable-next-line no-redeclare // eslint-disable-next-line no-redeclare
var routeUrl = this.$router.resolve({ path: '/report/bigscreen/designer', query: { reportCode: val.reportCode, reportId: val.id, accessKey: val.accessKey } }) var routeUrl = this.$router.resolve({ path: '/bigscreen/designer', query: { reportCode: val.reportCode, reportId: val.id, accessKey: val.accessKey } })
window.open(routeUrl.href, '_blank') window.open(routeUrl.href, '_blank')
} }
}, },

Write Preview
Loading…
Cancel
Save