Skip to content

E
ec-report-refactor
Commit cad8abef authored by leon's avatar leon
Browse files
Options

feat:use that repleace this in some functions

parent 1c032356
Show whitespace changes
Inline Side-by-side
Showing with 229 additions and 187 deletions
components/BarMixMap/BarMixMap.vue
View file @ cad8abef
......@@ -32,27 +32,28 @@
},
methods: {
initChart() {
this.$nextTick(() => {
clearInterval(this.changeTimer)
this.$refs['barMixMapCanvas'].init((canvas, width, height, canvasDpr) => {
chart = this.$echarts.init(canvas, null, {
const that = this
that.$nextTick(() => {
clearInterval(that.changeTimer)
that.$refs['barMixMapCanvas'].init((canvas, width, height, canvasDpr) => {
chart = that.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
let options = this.setMapOption()
const { mapMixBarShow, mapMixBarChangeInterval} = this.elementInfo.option.mapMix
let options = that.setMapOption()
const { mapMixBarShow, mapMixBarChangeInterval} = that.elementInfo.option.mapMix
let flag = true
chart.setOption(options, true)
chart.on('click', event => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
// 柱状图 地图 切换
if(mapMixBarShow && mapMixBarChangeInterval) {
clearInterval(this.changeTimer)
this.changeTimer = setInterval(() => {
options = flag ? this.setBarOption() : this.setMapOption()
clearInterval(that.changeTimer)
that.changeTimer = setInterval(() => {
options = flag ? that.setBarOption() : that.setMapOption()
flag = !flag
chart.setOption(options, true)
}, mapMixBarChangeInterval * 1000)
......
components/ChinaMap/ChinaMap.vue
View file @ cad8abef
......@@ -28,15 +28,16 @@
},
methods: {
initChart() {
this.$nextTick(() => {
this.$refs['chinaMapCanvas'].init((canvas, width, height, canvasDpr) => {
chart = this.$echarts.init(canvas, null, {
const that = this
that.$nextTick(() => {
that.$refs['chinaMapCanvas'].init((canvas, width, height, canvasDpr) => {
chart = that.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
const { dataList } = this.elementData
const { dataList } = that.elementData
const seriesData = dataList.chinaMapAreas || []
// 处理成地图所需的数据格式
const finalData = [];
......@@ -71,7 +72,7 @@
curveness: 0.2
}
},
data: this.convertData(item[1])
data: that.convertData(item[1])
}, {
name: item[0],
type: 'effectScatter',
......@@ -84,15 +85,15 @@
show: true,
position: 'right',
formatter: value => {
if(this.elementInfo.option.dataset.formatter) {
return this.$u.common.converFunction(this.elementInfo.option.dataset.formatter, value)
if(that.elementInfo.option.dataset.formatter) {
return that.$u.common.converFunction(that.elementInfo.option.dataset.formatter, value)
} else {
return this.elementInfo.option.dataset.show ? `${value.data.name}:${value.data.value[2]}` : value.data.name
return that.elementInfo.option.dataset.show ? `${value.data.name}:${value.data.value[2]}` : value.data.name
}
},
fontSize: this.elementInfo.option.dataset.fontSize,
color: this.elementInfo.option.dataset.color,
fontWeight: this.elementInfo.option.dataset.fontWeight
fontSize: that.elementInfo.option.dataset.fontSize,
color: that.elementInfo.option.dataset.color,
fontWeight: that.elementInfo.option.dataset.fontWeight
},
symbolSize: 4,
itemStyle: {
......@@ -109,10 +110,10 @@
const options = {
title: {
...this.elementInfo.option.title
...that.elementInfo.option.title
},
legend: {
...this.elementInfo.option.legend
...that.elementInfo.option.legend
},
geo: {
map: 'china',
......@@ -132,7 +133,7 @@
}
chart.setOption(options)
chart.on('click', event => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
return chart
})
......
components/CountTo/CountTo.vue
View file @ cad8abef
......@@ -28,11 +28,12 @@
},
methods: {
initChart() {
this.$nextTick(() => {
this.startVal = this.endVal
this.endVal = this.elementData.dataList.endVal
if(this.elementInfo.option.countTo.duration) {
this.duration = this.elementInfo.option.countTo.duration * 1000
const that = this
that.$nextTick(() => {
that.startVal = that.endVal
that.endVal = that.elementData.dataList.endVal
if(that.elementInfo.option.countTo.duration) {
that.duration = that.elementInfo.option.countTo.duration * 1000
}
})
},
......
components/HorizontalBar/HorizontalBar.vue
View file @ cad8abef
......@@ -23,9 +23,10 @@
},
methods: {
initChart() {
this.$nextTick(() => {
this.$refs['horizontalBarCanvas'].init((canvas, width, height, canvasDpr) => {
chart = this.$echarts.init(canvas, null, {
const that = this
that.$nextTick(() => {
that.$refs['horizontalBarCanvas'].init((canvas, width, height, canvasDpr) => {
chart = that.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
......@@ -38,15 +39,15 @@
preview,
images
}
} = this.elementData
} = that.elementData
const options = {
...this.elementInfo.option,
...that.elementInfo.option,
tooltip: {},
yAxis: {
...this.elementInfo.option.yAxis,
...that.elementInfo.option.yAxis,
data: categories
},
series: this.dealSeriesData(series)
series: that.dealSeriesData(series)
}
chart.setOption(options)
chart.on('click', event => {
......@@ -57,7 +58,7 @@
urls: images
})
} else {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
}
})
return chart
......@@ -69,14 +70,15 @@
*/
dealSeriesData(data) {
if (!data) return
const that = this
const newData = data.map(item => {
const config = {
type: 'bar',
...this.elementInfo.option.bar,
...that.elementInfo.option.bar,
label: {
...this.elementInfo.option.dataset,
...that.elementInfo.option.dataset,
formatter: val => {
return this.$u.common.converFunction(this.elementInfo.option.dataset
return that.$u.common.converFunction(that.elementInfo.option.dataset
.formatter, val)
}
}
......
components/LineMixBar/LineMixBar.vue
View file @ cad8abef
......@@ -28,9 +28,10 @@
},
methods: {
initChart() {
this.$nextTick(() => {
this.$refs['lineMixBarCanvas'].init((canvas, width, height, canvasDpr) => {
chart = this.$echarts.init(canvas, null, {
const that = this
that.$nextTick(() => {
that.$refs['lineMixBarCanvas'].init((canvas, width, height, canvasDpr) => {
chart = that.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
......@@ -41,28 +42,28 @@
categories,
series
}
} = this.elementData
} = that.elementData
const options = {
...this.elementInfo.option,
...that.elementInfo.option,
tooltip: {},
xAxis: {
...this.elementInfo.option.xAxis,
...that.elementInfo.option.xAxis,
data: categories
},
yAxis: [{
...this.elementInfo.option.yAxis,
...that.elementInfo.option.yAxis,
type: 'value'
},
{
...this.elementInfo.option.yAxis,
...that.elementInfo.option.yAxis,
type: 'value'
}
],
series: this.dealSeriesData(series)
series: that.dealSeriesData(series)
}
chart.setOption(options)
chart.on('click', event => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
return chart
})
......@@ -73,25 +74,26 @@
*/
dealSeriesData(data) {
if (!data) return
const that = this
const newData = data.map(item => {
let config = {
label: {
...this.elementInfo.option.dataset,
...that.elementInfo.option.dataset,
formatter: val => {
return this.$u.common.converFunction(this.elementInfo.option.dataset.formatter, val)
return that.$u.common.converFunction(that.elementInfo.option.dataset.formatter, val)
}
}
}
if (item.type === 'bar') {
config = {
...config,
...this.elementInfo.option.bar
...that.elementInfo.option.bar
}
} else if (item.type === 'line') {
config = {
yAxisIndex: 1,
...config,
...this.elementInfo.option.line
...that.elementInfo.option.line
}
}
return {
......
components/NormalBar/NormalBar.vue
View file @ cad8abef
......@@ -23,9 +23,10 @@
},
methods: {
initChart() {
this.$nextTick(() => {
this.$refs['normalbarCanvas'].init((canvas, width, height, canvasDpr) => {
chart = this.$echarts.init(canvas, null, {
const that = this
that.$nextTick(() => {
that.$refs['normalbarCanvas'].init((canvas, width, height, canvasDpr) => {
chart = that.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
......@@ -36,19 +37,19 @@
categories,
series
}
} = this.elementData
} = that.elementData
const options = {
...this.elementInfo.option,
...that.elementInfo.option,
tooltip: {},
xAxis: {
...this.elementInfo.option.xAxis,
...that.elementInfo.option.xAxis,
data: categories
},
series: this.dealSeriesData(series)
series: that.dealSeriesData(series)
}
chart.setOption(options)
chart.on('click', event => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
return chart
})
......@@ -59,14 +60,15 @@
*/
dealSeriesData(data) {
if (!data) return
const that = this
const newData = data.map(item => {
const config = {
type: 'bar',
...this.elementInfo.option.bar,
...that.elementInfo.option.bar,
label: {
...this.elementInfo.option.dataset,
...that.elementInfo.option.dataset,
formatter: val => {
return this.$u.common.converFunction(this.elementInfo.option.dataset
return that.$u.common.converFunction(that.elementInfo.option.dataset
.formatter, val)
}
}
......
components/NormalGauge/NormalGauge.vue
View file @ cad8abef
......@@ -31,17 +31,18 @@ export default {
methods: {
initChart() {
this.$nextTick(() => {
this.$refs['normalGaugeCanvas'].init((canvas, width, height, canvasDpr) => {
chart = this.$echarts.init(canvas, null, {
const that = this
that.$nextTick(() => {
that.$refs['normalGaugeCanvas'].init((canvas, width, height, canvasDpr) => {
chart = that.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
const { dataList: { guageChart } } = this.elementData
const { dataList: { guageChart } } = that.elementData
const options = {
...this.elementInfo.option,
...that.elementInfo.option,
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
......
components/NormalLine/NormalLine.vue
View file @ cad8abef
......@@ -22,9 +22,10 @@
},
methods: {
initChart() {
this.$nextTick(() => {
this.$refs['normalLineCanvas'].init((canvas, width, height, canvasDpr) => {
chart = this.$echarts.init(canvas, null, {
const that = this
that.$nextTick(() => {
that.$refs['normalLineCanvas'].init((canvas, width, height, canvasDpr) => {
chart = that.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
......@@ -35,22 +36,22 @@
categories,
series
}
} = this.elementData
} = that.elementData
const options = {
...this.elementInfo.option,
...that.elementInfo.option,
color: ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
'#f0ad54', '#ffffff', '#000000'
],
tooltip: {},
xAxis: {
...this.elementInfo.option.xAxis,
...that.elementInfo.option.xAxis,
data: categories
},
series: this.dealSeriesData(series)
series: that.dealSeriesData(series)
}
chart.setOption(options)
chart.on('click', event => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
return chart
})
......@@ -61,14 +62,15 @@
*/
dealSeriesData(data) {
if (!data) return
const that = this
const newData = data.map(item => {
const config = {
type: 'line',
...this.elementInfo.option.line,
...that.elementInfo.option.line,
label: {
...this.elementInfo.option.dataset,
...that.elementInfo.option.dataset,
formatter: val => {
return this.$u.common.converFunction(this.elementInfo.option.dataset
return that.$u.common.converFunction(that.elementInfo.option.dataset
.formatter, val)
}
}
......
components/NormalPie/NormalPie.vue
View file @ cad8abef
......@@ -31,27 +31,28 @@ export default {
methods: {
initChart() {
this.$nextTick(() => {
this.$refs['normalPieCanvas'].init((canvas, width, height, canvasDpr) => {
chart = this.$echarts.init(canvas, null, {
const that = this
that.$nextTick(() => {
that.$refs['normalPieCanvas'].init((canvas, width, height, canvasDpr) => {
chart = that.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
const { dataList: { series } } = this.elementData
const { dataList: { series } } = that.elementData
const options = {
...this.elementInfo.option,
...that.elementInfo.option,
color: ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'],
tooltip: {
trigger: 'item',
formatter: '{a}<br/>{b}:{c}({d}%)'
},
series: this.dealSeriesData(series)
series: that.dealSeriesData(series)
}
chart.setOption(options)
chart.on('click', event => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
return chart
})
......
components/NormalRadar/NormalRadar.vue
View file @ cad8abef
......@@ -28,9 +28,10 @@
},
methods: {
initChart() {
this.$nextTick(() => {
this.$refs['normalRadarCanvas'].init((canvas, width, height, canvasDpr) => {
chart = this.$echarts.init(canvas, null, {
const that = this
that.$nextTick(() => {
that.$refs['normalRadarCanvas'].init((canvas, width, height, canvasDpr) => {
chart = that.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
......@@ -41,7 +42,7 @@
indicator,
series
}
} = this.elementData
} = that.elementData
const config = {
tooltip: {},
radar: {
......@@ -50,9 +51,9 @@
series: [{
type: 'radar',
label: {
...this.elementInfo.option.dataset
...that.elementInfo.option.dataset
},
data: this.dealSeriesData(series)
data: that.dealSeriesData(series)
}]
}
chart.setOption(config)
......
components/NormalTable/NormalTable.vue
View file @ cad8abef
......@@ -72,9 +72,10 @@
},
methods: {
initChart() {
this.$nextTick(() => {
this.columns = this.elementInfo.table.column
this.chartTables = this.elementData.dataList.chartTables
const that = this
that.$nextTick(() => {
that.columns = that.elementInfo.table.column
that.chartTables = that.elementData.dataList.chartTables
})
},
cellClick(e) {
......
components/NumberScroll/NumberScroll.vue
View file @ cad8abef
......@@ -45,9 +45,10 @@
methods: {
initChart() {
this.$nextTick(() => {
this.endVal = this.elementData.dataList.endVal
this.toOrderNumber(this.endVal)
const that = this
that.$nextTick(() => {
that.endVal = that.elementData.dataList.endVal
that.toOrderNumber(that.endVal)
})
},
......
components/RealTime/RealTime.vue
View file @ cad8abef
......@@ -33,9 +33,10 @@
},
methods: {
getRealTime() {
this.timer = setInterval(() => {
const that = this
that.timer = setInterval(() => {
const timestamp = new Date().getTime()
this.realTime = this.$u.timeFormat(timestamp, this.getDateFormat())
that.realTime = that.$u.timeFormat(timestamp, that.getDateFormat())
}, 1000)
},
initChart() {},
......
components/RemoteImage/RemoteImage.vue
View file @ cad8abef
......@@ -24,8 +24,9 @@
},
methods:{
initChart() {
this.$nextTick(() => {
this.imageUrl = this.elementData.dataList.imageUrl
const that = this
that.$nextTick(() => {
that.imageUrl = that.elementData.dataList.imageUrl
})
}
}
......
components/Table/Table.vue
View file @ cad8abef
......@@ -89,8 +89,9 @@
},
methods: {
initChart() {
this.$nextTick(() => {
this.chartTables = this.elementData.dataList.chartTables
const that = this
that.$nextTick(() => {
that.chartTables = that.elementData.dataList.chartTables
})
},
cellClick(e) {
......
mixins/echartElementData.js
View file @ cad8abef
......@@ -24,15 +24,16 @@ export default {
* 动态数据
*/
async handleDynamicData (value) {
const that = this
let { dataUrl, dataMethod, dataFormatter, dataProcessing } = { ...value }
dataUrl = dataUrl.replace(/^(\/dashboardCharts)?|^(\/dashboardAPI)?/, '')
let res = await this.$u.api[`${dataMethod.toLowerCase()}Http`](dataUrl, dataFormatter, {
let res = await that.$u.api[`${dataMethod.toLowerCase()}Http`](dataUrl, dataFormatter, {
custom: { loading: false }
})
if (dataProcessing) {
this.elementData.dataList = this.$u.common.converFunction(dataProcessing, res.data)
that.elementData.dataList = that.$u.common.converFunction(dataProcessing, res.data)
} else {
this.elementData.dataList = JSON.parse(JSON.stringify(res.data.Result))
that.elementData.dataList = JSON.parse(JSON.stringify(res.data.Result))
}
},
/**
......@@ -52,16 +53,17 @@ export default {
*/
async handleDataSet (value) {
const { dataSetInfo } = value
let res = await this.$u.api.dataSetPreview(dataSetInfo)
const that = this
let res = await that.$u.api.dataSetPreview(dataSetInfo)
const { Status, Msg } = res.data;
if (Status == "true") {
if(dataSetInfo.script) {
this.elementData.dataList = this.$u.common.converFunction(dataSetInfo.script, res.data.Result)
that.elementData.dataList = that.$u.common.converFunction(dataSetInfo.script, res.data.Result)
} else {
this.elementData.dataList = res.data.Result
that.elementData.dataList = res.data.Result
}
} else {
this.$u.toast(Msg)
that.$u.toast(Msg)
}
},
clearTimer() {
......@@ -85,31 +87,32 @@ export default {
watch: {
'elementInfo.data': {
handler(newVal) {
if(this.elementInfo.hide) return false
const that = this
if(that.elementInfo.hide) return false
if (newVal.dataType === 'static') {
this.handleStaticData(newVal)
that.handleStaticData(newVal)
}
else if (newVal.dataType === 'dynamic') {
this.handleDynamicData(newVal)
that.handleDynamicData(newVal)
if (newVal.dataPolling) {
this.timer = setInterval(() => {
this.handleDynamicData(newVal)
that.timer = setInterval(() => {
that.handleDynamicData(newVal)
}, newVal.dataPollingInterval * 1000)
} else {
clearInterval(this.timer)
clearInterval(that.timer)
}
}
else if (newVal.dataType === 'public') {
this.handlePublicData(newVal)
that.handlePublicData(newVal)
}
else if (newVal.dataType === 'dataSet') {
this.handleDataSet(newVal)
that.handleDataSet(newVal)
if (newVal.dataPolling) {
this.timer = setInterval(() => {
this.handleDataSet(newVal)
that.timer = setInterval(() => {
that.handleDataSet(newVal)
}, newVal.dataPollingInterval * 1000)
} else {
clearInterval(this.timer)
clearInterval(that.timer)
}
}
},
......
pages/center/index.vue
View file @ cad8abef
......@@ -34,7 +34,7 @@
async onLoad() {
var admin = uni.getStorageSync('admin')
if (admin) {
this.$data.admin = admin
this.admin = admin
}
},
onShow() {
......@@ -59,7 +59,7 @@
itemList[2].count = Result.authorized;
}
this.$data.itemList = itemList
this.itemList = itemList
})
},
// item 点击
......
pages/details/details.vue
View file @ cad8abef
<template>
<view class="viewport-wrapper" :style="[styleObject]">
<template v-for="(element, index) in reportData">
<template v-for="(element, index) in reportInfo.list">
<view
class="view-element"
v-show="!element.hide"
......@@ -60,42 +60,51 @@
data() {
return {
reportInfo: {},
reportData: [],
timename: null,
detailId: ""
detailId: "",
timename: null
}
},
computed: {
styleObject() {
if(JSON.stringify(this.reportInfo) == "{}") {
return
}
let params = {}
const { backgroundColor, backgroundImage } = this.reportInfo
const { backgroundColor, backgroundImage, width, height } = this.reportInfo.info
if(backgroundImage) params = { 'background-image': `url(${backgroundImage})` }
return {
width: `${width * this.scale}px`,
height: `${height * this.scale}px`,
'background-color': backgroundColor,
...params
}
},
scale() {
if(JSON.stringify(this.reportInfo) == "{}") {
return
}
const { windowWidth } = uni.getSystemInfoSync()
const { width, height } = this.reportInfo
const { width, height } = this.reportInfo.info
return windowWidth / width
}
},
onLoad(option) {
this.detailId = option.id
this.userAuthCheck()
this.getReportCharts()
},
onShow() {
const that = this
/**
* 组件交互 - 参数
*/
uni.$on('handleLinkParams', ({index, paramName, value}) => {
this.handleValueChange(index, paramName, value)
that.handleValueChange(index, paramName, value)
})
/**
* 组件交互 - 组件
*/
uni.$on('handleLinkComp', ({ showData, hideData }) => {
this.reportData = this.reportData.map(item => {
that.reportInfo.list = that.reportInfo.list.map(item => {
if(showData.includes(item.id)) item.hide = false
if(hideData.includes(item.id)) item.hide = true
return item
......@@ -105,6 +114,7 @@
onUnload() {
// 移除监听事件
uni.$off('handleLinkParams')
uni.$off('handleLinkComp')
clearInterval(this.timename)
},
methods: {
......@@ -115,7 +125,7 @@
var authorized = uni.getStorageSync('authorized')
if (userId) {
if (authorized) {
this.getReportCharts()
} else {
uni.reLaunch({
url:'../login/authorized'
......@@ -144,57 +154,56 @@
*/
async getReportCharts() {
clearInterval(this.timename)
let res = await this.$u.api.getReportCharts({id: this.detailId})
const that = this
let res = await that.$u.api.getReportCharts({id: that.detailId})
uni.stopPullDownRefresh()
const { Status, Result: { info, list } } = res.data
if (Status === 'true') {
if(info.dataUrl) {
this.getGlobalData(info)
that.getGlobalData(info)
if(info.dataPollingInterval) {
this.timename = setInterval(() => {
this.getGlobalData(info)
that.timename = setInterval(() => {
that.getGlobalData(info)
}, parseInt(info.dataPollingInterval) * 1000)
}
}
this.reportInfo = info
this.reportData = list
that.reportInfo = res.data.Result
}
},
/**
* 获取全局接口数据
*/
async getGlobalData(info) {
const that = this
const dataUrl = info.dataUrl.replace(/^(\/dashboardCharts)?|^(\/dashboardAPI)?/, '')
let res = await this.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, info.dataFormatter, {
let res = await that.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, info.dataFormatter, {
custom: { loading: false }
})
this.$u.vuex('vuex_globalData', JSON.stringify(res.data))
that.$u.vuex('vuex_globalData', JSON.stringify(res.data))
},
/**
* 组件之间关联
*/
handleValueChange(index, paramName, value) {
if(index.length && paramName && value) {
this.reportData = this.reportData.map(item => {
const that = this
that.reportInfo.list = that.reportInfo.list.map(item => {
const flag = index.includes(item.id)
if(flag && item.type === 'BasicText' && item.data.dataType === 'static') {
this.$set(item.data.dataList, 'text', value)
that.$set(item.data.dataList, 'text', value)
}
if(flag && item.data.dataType === 'dynamic') {
if(!item.data.dataFormatter) item.data.dataFormatter = {}
this.$set(item.data.dataFormatter, paramName, value)
that.$set(item.data.dataFormatter, paramName, value)
}
if(flag && item.data.dataType === 'dataSet') {
if(!item.data.dataSetInfo.queryFormatter) item.data.dataSetInfo.queryFormatter = {}
this.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
that.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
}
return item
})
}
}
},
onReachBottom() {
},
onPullDownRefresh() {
this.getReportCharts()
......@@ -203,18 +212,15 @@
</script>
<style lang="scss" scoped>
.canvas {
.viewport-wrapper {
position: relative;
height: 100%;
user-select: none;
overflow: auto;
// overflow: auto;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.viewport-wrapper {
position: relative;
}
.view-element {
position: absolute;
user-select: none;
......
pages/index/index.vue
View file @ cad8abef
<template>
<view class="viewport-wrapper" :style="[styleObject]">
<template v-for="(element, index) in reportData">
<template v-for="(element, index) in reportInfo.list">
<view
class="view-element"
v-show="!element.hide"
......@@ -60,14 +60,16 @@
data() {
return {
reportInfo: {},
reportData: [],
timename: null
}
},
computed: {
styleObject() {
if(JSON.stringify(this.reportInfo) == "{}") {
return
}
let params = {}
const { backgroundColor, backgroundImage, width, height } = this.reportInfo
const { backgroundColor, backgroundImage, width, height } = this.reportInfo.info
if(backgroundImage) params = { 'background-image': `url(${backgroundImage})` }
return {
width: `${width * this.scale}px`,
......@@ -77,31 +79,39 @@
}
},
scale() {
if(JSON.stringify(this.reportInfo) == "{}") {
return
}
const { windowWidth } = uni.getSystemInfoSync()
const { width, height } = this.reportInfo
const { width, height } = this.reportInfo.info
return windowWidth / width
}
},
onLoad() {
this.userAuthCheck()
},
// detail页面也会监听这两个事件，所有index页面需要在onShow里面增加监听，在onHide里面移除监听
onShow() {
const that = this
/**
* 组件交互 - 参数
*/
uni.$on('handleLinkParams', ({index, paramName, value}) => {
this.handleValueChange(index, paramName, value)
that.handleValueChange(index, paramName, value)
})
/**
* 组件交互 - 组件
*/
uni.$on('handleLinkComp', ({ showData, hideData }) => {
this.reportData = this.reportData.map(item => {
that.reportInfo.list = that.reportInfo.list.map(item => {
if(showData.includes(item.id)) item.hide = false
if(hideData.includes(item.id)) item.hide = true
return item
})
})
},
onUnload() {
onHide() {
// 移除监听事件
uni.$off('handleLinkParams')
uni.$off('handleLinkComp')
......@@ -144,49 +154,51 @@
*/
async getReportCharts() {
clearInterval(this.timename)
let res = await this.$u.api.getReportCharts({id: '61cd2ba1c06bffbdae442c4f'})
const that = this
let res = await that.$u.api.getReportCharts({id: '61cd2ba1c06bffbdae442c4f'})
uni.stopPullDownRefresh()
const { Status, Result: { info, list } } = res.data
if (Status === 'true') {
if(info.dataUrl) {
this.getGlobalData(info)
that.getGlobalData(info)
if(info.dataPollingInterval) {
this.timename = setInterval(() => {
this.getGlobalData(info)
that.timename = setInterval(() => {
that.getGlobalData(info)
}, parseInt(info.dataPollingInterval) * 1000)
}
}
this.reportInfo = info
this.reportData = list
that.reportInfo = res.data.Result
}
},
/**
* 获取全局接口数据
*/
async getGlobalData(info) {
const that = this
const dataUrl = info.dataUrl.replace(/^(\/dashboardCharts)?|^(\/dashboardAPI)?/, '')
let res = await this.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, info.dataFormatter, {
let res = await that.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, info.dataFormatter, {
custom: { loading: false }
})
this.$u.vuex('vuex_globalData', JSON.stringify(res.data))
that.$u.vuex('vuex_globalData', JSON.stringify(res.data))
},
/**
* 组件之间关联
*/
handleValueChange(index, paramName, value) {
if(index.length && paramName && value) {
this.reportData = this.reportData.map(item => {
const that = this
that.reportInfo.list = that.reportInfo.list.map(item => {
const flag = index.includes(item.id)
if(flag && item.type === 'BasicText' && item.data.dataType === 'static') {
this.$set(item.data.dataList, 'text', value)
that.$set(item.data.dataList, 'text', value)
}
if(flag && item.data.dataType === 'dynamic') {
if(!item.data.dataFormatter) item.data.dataFormatter = {}
this.$set(item.data.dataFormatter, paramName, value)
that.$set(item.data.dataFormatter, paramName, value)
}
if(flag && item.data.dataType === 'dataSet') {
if(!item.data.dataSetInfo.queryFormatter) item.data.dataSetInfo.queryFormatter = {}
this.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
that.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
}
return item
})
......
pages/reports/reports.vue
View file @ cad8abef
......@@ -37,7 +37,7 @@
pageSize: 10,
totalPages: 0,
totals: 0,
folderId: '61cd45a8c06bffbdae442d09',
folderId: '621db7710668d7e647d5f4cc',
superAdmin: true
}
}
......@@ -50,16 +50,18 @@
* 获取页面报表配置
*/
async getReportList() {
let res = await this.$u.api.getReportList(this.params)
const that = this
let res = await that.$u.api.getReportList(that.params)
const { Status, Result } = res.data
uni.stopPullDownRefresh()
if (Status === 'true') {
if(this.params.pageNumber === 1) {
this.reportList = Result.content
if(that.params.pageNumber === 1) {
that.reportList = Result.content
} else {
this.reportList = this.reportList.concat(Result.content)
that.reportList = that.reportList.concat(Result.content)
}
this.params.totals = Result.total
this.params.totalPages = Result.totalPages
that.params.totals = Result.total
that.params.totalPages = Result.totalPages
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment