Skip to content

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

Merge branch 'develop' into feature-retail

parents f24f1fc3 697d35cf
Show whitespace changes
Inline Side-by-side
Showing with 699 additions and 342 deletions
components/BarMixMap/BarMixMap.vue
View file @ 0023edeb
...@@ -71,8 +71,9 @@ ...@@ -71,8 +71,9 @@
let options = { let options = {
...this.elementInfo.option, ...this.elementInfo.option,
tooltip: {}, tooltip: {},
xAxis: this.$u.common.dealAxisFormatter(this.elementInfo.option.xAxis),
yAxis: { yAxis: {
...this.elementInfo.option.yAxis, ...this.$u.common.dealAxisFormatter(this.elementInfo.option.yAxis),
data: this.dealSeriesData(series).categories data: this.dealSeriesData(series).categories
}, },
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}], dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
...@@ -91,6 +92,13 @@ ...@@ -91,6 +92,13 @@
data: this.dealSeriesData(series).series data: this.dealSeriesData(series).series
} }
} }
// 如果设置了颜色配置，使用颜色配置
if (this.elementInfo.option.colorConfig && this.elementInfo.option.colorConfig.value) {
return {
options,
color: this.elementInfo.option.colorConfig.value
}
}
return options return options
}, },
setMapOption() { setMapOption() {
......
components/HorizontalBar/HorizontalBar.vue
View file @ 0023edeb
...@@ -49,20 +49,14 @@ export default { ...@@ -49,20 +49,14 @@ export default {
dataList: { categories, series } dataList: { categories, series }
} = this.elementData } = this.elementData
const that = this const that = this
var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
'#f0ad54', '#ffffff', '#000000'
]
if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
color = that.elementInfo.option.colorConfig.value
}
that.ec.option = { that.ec.option = {
...that.elementInfo.option, ...that.elementInfo.option,
color: color, xAxis: that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
yAxis: { yAxis: {
...that.elementInfo.option.yAxis, ...that.$u.common.dealAxisFormatter(that.elementInfo.option.yAxis),
data: categories data: categories
}, },
tooltip: that.dealTooltip(that.elementInfo.option.tooltip), tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
dataZoom: dataZoom:
that.elementInfo.dataZoom && that.elementInfo.dataZoom.show that.elementInfo.dataZoom && that.elementInfo.dataZoom.show
? [ ? [
...@@ -119,27 +113,25 @@ export default { ...@@ -119,27 +113,25 @@ export default {
} }
}) })
chart.on('datazoom', event => { chart.on('datazoom', event => {
// 配置了滑动事件
if(that.elementInfo.dataZoom.slider) {
// 传递参数给其他组件 // 传递参数给其他组件
that.echartsDataZoom(event) that.echartsDataZoom(event)
// 处理dataZoom的拖动事件 // 处理dataZoom的拖动事件
that.handleDataZoomEvent(event) that.handleDataZoomEvent(event)
}
}) })
return chart return chart
}, },
initChart() { initChart() {
// 等待子组件完全挂载完成---chart初始化完成 // 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => { this.$nextTick().then(() => {
const { categories, series, preview, images } = const { categories, series, preview, images } = this.elementData.dataList
this.elementData.dataList var count = categories.length
if (this.labelShow) { if (this.labelShow) {
// 处理初始状态时，数值显示的数量是否超过了配置的最大值 // 处理初始状态时，数值显示的数量是否超过了配置的最大值
let count = categories.length
if (this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) { if (this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) {
count = count = (count *(this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start)) / 100
(count *
(this.elementInfo.dataZoom.end -
this.elementInfo.dataZoom.start)) /
100
} }
if ( if (
this.elementInfo.option.dataset.maxCount != null && this.elementInfo.option.dataset.maxCount != null &&
...@@ -169,7 +161,16 @@ export default { ...@@ -169,7 +161,16 @@ export default {
} }
] ]
) )
if (chart) { if(categories.length < this.elementInfo.dataZoom.count) {
this.$set(this.ec.option, 'dataZoom.start', 0)
this.$set(this.ec.option, 'dataZoom.end', 100)
} else {
this.$set(this.ec.option, 'dataZoom.start', this.elementInfo.dataZoom.start)
this.$set(this.ec.option, 'dataZoom.end', this.elementInfo.dataZoom.end)
}
if (chart && chart.getOption()) {
const option = chart.getOption() const option = chart.getOption()
option.series = dealSeries option.series = dealSeries
// 重新setOption，使得设置的formatter生效 // 重新setOption，使得设置的formatter生效
...@@ -189,38 +190,27 @@ export default { ...@@ -189,38 +190,27 @@ export default {
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: val => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: 'axis'
}
}
return {
...tooltip,
trigger: 'axis'
}
},
/** /**
* 处理数据 * 处理数据
*/ */
dealSeriesData(data) { dealSeriesData(data) {
if (!data) return if (!data) return
const that = this const that = this
const newData = data.map(item => { const newData = data.map((item, index) => {
// 如果设置了颜色配置，使用颜色配置
let itemStyle = {...that.elementInfo.option.bar.itemStyle}
if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
const colors = that.elementInfo.option.colorConfig.value
itemStyle = {
...that.elementInfo.option.bar.itemStyle,
color: colors[index % colors.length]
}
}
const config = { const config = {
type: 'bar', type: 'bar',
...that.elementInfo.option.bar, ...that.elementInfo.option.bar,
...itemStyle,
label: { label: {
...that.elementInfo.option.dataset, ...that.elementInfo.option.dataset,
formatter: val => { formatter: val => {
......
components/LineMixBar/LineMixBar.vue
View file @ 0023edeb
...@@ -48,29 +48,24 @@ ...@@ -48,29 +48,24 @@
canvas.setChart(chart) canvas.setChart(chart)
const {categories, series} = this.elementData.dataList const {categories, series} = this.elementData.dataList
const that = this const that = this
var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff', let yAxis = [
'#f0ad54', '#ffffff', '#000000' that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' }),
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' })
]
if (that.elementInfo.option.yAxis.showDouble) {
yAxis = [
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' }),
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second, type: 'value' })
] ]
if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
color = that.elementInfo.option.colorConfig.value
} }
that.ec.option = { that.ec.option = {
...that.elementInfo.option, ...that.elementInfo.option,
color: color,
xAxis: { xAxis: {
...that.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
yAxis: [{ yAxis: yAxis,
...that.elementInfo.option.yAxis, tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
type: 'value'
},
{
...that.elementInfo.option.yAxis,
type: 'value'
}
],
tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
toolbox: { toolbox: {
...that.elementInfo.option.toolbox, ...that.elementInfo.option.toolbox,
feature: { feature: {
...@@ -78,8 +73,9 @@ ...@@ -78,8 +73,9 @@
show: true, show: true,
icon: svg.enterFull, icon: svg.enterFull,
onclick() { onclick() {
const element = {...that.elementInfo} const { linkTabsId } = that.elementInfo
const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element)) let url = `/pages/fullscreen/fullscreen?element=${encodeURIComponent(JSON.stringify(that.elementInfo))}`
if(linkTabsId) url = `${url}&linkTabsId=${linkTabsId}`
uni.navigateTo({ uni.navigateTo({
url: url url: url
}) })
...@@ -95,10 +91,13 @@ ...@@ -95,10 +91,13 @@
that.handleEchartsClick(event) that.handleEchartsClick(event)
}) })
chart.on('datazoom', event => { chart.on('datazoom', event => {
// 配置了滑动事件
if(that.elementInfo.dataZoom.slider) {
// 传递参数给其他组件 // 传递参数给其他组件
that.echartsDataZoom(event) that.echartsDataZoom(event)
// 处理dataZoom的拖动事件 // 处理dataZoom的拖动事件
that.handleDataZoomEvent(event) that.handleDataZoomEvent(event)
}
}) })
return chart return chart
}, },
...@@ -106,9 +105,9 @@ ...@@ -106,9 +105,9 @@
// 等待子组件完全挂载完成---chart初始化完成 // 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => { this.$nextTick().then(() => {
const { categories, series } = this.elementData.dataList const { categories, series } = this.elementData.dataList
var count = categories.length
if(this.labelShow) { if(this.labelShow) {
// 处理初始状态时，数值显示的数量是否超过了配置的最大值 // 处理初始状态时，数值显示的数量是否超过了配置的最大值
let count = categories.length
if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) { if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) {
count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100 count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100
} }
...@@ -121,6 +120,14 @@ ...@@ -121,6 +120,14 @@
this.$set(this.ec.option, 'xAxis.data', categories) this.$set(this.ec.option, 'xAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries) this.$set(this.ec.option, 'series', dealSeries)
this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}]) this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}])
if(categories.length < this.elementInfo.dataZoom.count) {
this.$set(this.ec.option, 'dataZoom.start', 0)
this.$set(this.ec.option, 'dataZoom.end', 100)
} else {
this.$set(this.ec.option, 'dataZoom.start', this.elementInfo.dataZoom.start)
this.$set(this.ec.option, 'dataZoom.end', this.elementInfo.dataZoom.end)
}
if(chart) { if(chart) {
const option = chart.getOption() const option = chart.getOption()
option.series = dealSeries option.series = dealSeries
...@@ -129,35 +136,32 @@ ...@@ -129,35 +136,32 @@
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
},
/** /**
* 处理数据 * 处理数据
*/ */
dealSeriesData(data) { dealSeriesData(data) {
if (!data) return if (!data) return
const that = this const that = this
const newData = data.map(item => { const newData = data.map((item, index) => {
// 如果设置了颜色配置，使用颜色配置
let itemStyle = {...that.elementInfo.option.bar.itemStyle}
if (item.type === 'line') {
itemStyle = {...that.elementInfo.option.line.itemStyle}
}
if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
const colors = that.elementInfo.option.colorConfig.value
itemStyle = {
...that.elementInfo.option.bar.itemStyle,
color: colors[index % colors.length]
}
if (item.type === 'line') {
itemStyle = {
...that.elementInfo.option.line.itemStyle,
color: colors[index % colors.length]
}
}
}
let config = { let config = {
label: { label: {
...that.elementInfo.option.dataset, ...that.elementInfo.option.dataset,
...@@ -169,13 +173,15 @@ ...@@ -169,13 +173,15 @@
if (item.type === 'bar') { if (item.type === 'bar') {
config = { config = {
...config, ...config,
...that.elementInfo.option.bar ...that.elementInfo.option.bar,
...itemStyle
} }
} else if (item.type === 'line') { } else if (item.type === 'line') {
config = { config = {
yAxisIndex: 1, yAxisIndex: 1,
...config, ...config,
...that.elementInfo.option.line ...that.elementInfo.option.line,
...itemStyle
} }
} }
return { return {
......
components/NormalBar/NormalBar.vue
View file @ 0023edeb
...@@ -43,20 +43,21 @@ ...@@ -43,20 +43,21 @@
canvas.setChart(chart) canvas.setChart(chart)
const { categories, series } = this.elementData.dataList const { categories, series } = this.elementData.dataList
const that = this const that = this
var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff', var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
'#f0ad54', '#ffffff', '#000000' if (yAxis.showDouble) {
yAxis = [
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis}),
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second })
] ]
if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
color = that.elementInfo.option.colorConfig.value
} }
that.ec.option = { that.ec.option = {
...that.elementInfo.option, ...that.elementInfo.option,
color: color,
xAxis: { xAxis: {
...that.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
tooltip: that.dealTooltip(that.elementInfo.option.tooltip), yAxis: yAxis,
tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
toolbox: { toolbox: {
...that.elementInfo.option.toolbox, ...that.elementInfo.option.toolbox,
feature: { feature: {
...@@ -64,8 +65,9 @@ ...@@ -64,8 +65,9 @@
show: true, show: true,
icon: svg.enterFull, icon: svg.enterFull,
onclick() { onclick() {
const element = {...that.elementInfo} const { linkTabsId } = that.elementInfo
const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element)) let url = `/pages/fullscreen/fullscreen?element=${encodeURIComponent(JSON.stringify(that.elementInfo))}`
if(linkTabsId) url = `${url}&linkTabsId=${linkTabsId}`
uni.navigateTo({ uni.navigateTo({
url: url url: url
}) })
...@@ -81,10 +83,13 @@ ...@@ -81,10 +83,13 @@
that.handleEchartsClick(event) that.handleEchartsClick(event)
}) })
chart.on('datazoom', event => { chart.on('datazoom', event => {
// 配置了滑动事件
if(that.elementInfo.dataZoom.slider) {
// 传递参数给其他组件 // 传递参数给其他组件
that.echartsDataZoom(event) that.echartsDataZoom(event)
// 处理dataZoom的拖动事件 // 处理dataZoom的拖动事件
that.handleDataZoomEvent(event) that.handleDataZoomEvent(event)
}
}) })
return chart return chart
}, },
...@@ -92,9 +97,9 @@ ...@@ -92,9 +97,9 @@
// 等待子组件完全挂载完成---chart初始化完成 // 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => { this.$nextTick().then(() => {
const { categories, series } = this.elementData.dataList const { categories, series } = this.elementData.dataList
var count = categories.length
if(this.labelShow) { if(this.labelShow) {
// 处理初始状态时，数值显示的数量是否超过了配置的最大值 // 处理初始状态时，数值显示的数量是否超过了配置的最大值
let count = categories.length
if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) { if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) {
count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100 count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100
} }
...@@ -107,6 +112,14 @@ ...@@ -107,6 +112,14 @@
this.$set(this.ec.option, 'xAxis.data', categories) this.$set(this.ec.option, 'xAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries) this.$set(this.ec.option, 'series', dealSeries)
this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}]) this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}])
if(categories.length < this.elementInfo.dataZoom.count) {
this.$set(this.ec.option, 'dataZoom.start', 0)
this.$set(this.ec.option, 'dataZoom.end', 100)
} else {
this.$set(this.ec.option, 'dataZoom.start', this.elementInfo.dataZoom.start)
this.$set(this.ec.option, 'dataZoom.end', this.elementInfo.dataZoom.end)
}
if(chart) { if(chart) {
const option = chart.getOption() const option = chart.getOption()
option.series = dealSeries option.series = dealSeries
...@@ -115,38 +128,27 @@ ...@@ -115,38 +128,27 @@
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
},
/** /**
* 处理数据 * 处理数据
*/ */
dealSeriesData(data) { dealSeriesData(data) {
if (!data) return if (!data) return
const that = this const that = this
const newData = data.map(item => { const newData = data.map((item, index) => {
// 如果设置了颜色配置，使用颜色配置
let itemStyle = {...that.elementInfo.option.bar.itemStyle}
if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
const colors = that.elementInfo.option.colorConfig.value
itemStyle = {
...that.elementInfo.option.bar.itemStyle,
color: colors[index % colors.length]
}
}
const config = { const config = {
type: 'bar', type: 'bar',
...that.elementInfo.option.bar, ...that.elementInfo.option.bar,
...itemStyle,
label: { label: {
...that.elementInfo.option.dataset, ...that.elementInfo.option.dataset,
formatter: val => { formatter: val => {
...@@ -155,6 +157,10 @@ ...@@ -155,6 +157,10 @@
} }
} }
} }
if (that.elementInfo.option.yAxis.showDouble) {
const yAxisIndex = data.length - 1 === index ? 1 : 0
return { ...item, ...config, yAxisIndex: yAxisIndex}
}
return { return {
...item, ...item,
...config ...config
......
components/NormalLine/NormalLine.vue
View file @ 0023edeb
...@@ -42,20 +42,21 @@ ...@@ -42,20 +42,21 @@
canvas.setChart(chart) canvas.setChart(chart)
const { categories = [], series = [] } = this.elementData.dataList const { categories = [], series = [] } = this.elementData.dataList
const that = this const that = this
var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff', var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
'#f0ad54', '#ffffff', '#000000' if (yAxis.showDouble) {
yAxis = [
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis}),
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second})
] ]
if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
color = that.elementInfo.option.colorConfig.value
} }
that.ec.option = { that.ec.option = {
...that.elementInfo.option, ...that.elementInfo.option,
color: color,
xAxis: { xAxis: {
...that.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
tooltip: that.dealTooltip(that.elementInfo.option.tooltip), yAxis: yAxis,
tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
toolbox: { toolbox: {
...that.elementInfo.option.toolbox, ...that.elementInfo.option.toolbox,
feature: { feature: {
...@@ -63,8 +64,9 @@ ...@@ -63,8 +64,9 @@
show: true, show: true,
icon: svg.enterFull, icon: svg.enterFull,
onclick() { onclick() {
const element = {...that.elementInfo} const { linkTabsId } = that.elementInfo
const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element)) let url = `/pages/fullscreen/fullscreen?element=${encodeURIComponent(JSON.stringify(that.elementInfo))}`
if(linkTabsId) url = `${url}&linkTabsId=${linkTabsId}`
uni.navigateTo({ uni.navigateTo({
url: url url: url
}) })
...@@ -80,10 +82,13 @@ ...@@ -80,10 +82,13 @@
that.handleEchartsClick(event) that.handleEchartsClick(event)
}) })
chart.on('datazoom', event => { chart.on('datazoom', event => {
// 配置了滑动事件
if(that.elementInfo.dataZoom.slider) {
// 传递参数给其他组件 // 传递参数给其他组件
that.echartsDataZoom(event) that.echartsDataZoom(event)
// 处理dataZoom的拖动事件 // 处理dataZoom的拖动事件
that.handleDataZoomEvent(event) that.handleDataZoomEvent(event)
}
}) })
return chart return chart
}, },
...@@ -91,9 +96,12 @@ ...@@ -91,9 +96,12 @@
// 等待子组件完全挂载完成---chart初始化完成 // 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => { this.$nextTick().then(() => {
const { categories, series } = this.elementData.dataList const { categories, series } = this.elementData.dataList
if(!categories) {
return
}
var count = categories.length
if(this.labelShow) { if(this.labelShow) {
// 处理初始状态时，数值显示的数量是否超过了配置的最大值 // 处理初始状态时，数值显示的数量是否超过了配置的最大值
var count = categories.length
if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) { if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) {
count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100 count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100
} }
...@@ -106,6 +114,14 @@ ...@@ -106,6 +114,14 @@
this.$set(this.ec.option, 'xAxis.data', categories) this.$set(this.ec.option, 'xAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries) this.$set(this.ec.option, 'series', dealSeries)
this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}]) this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}])
if(categories.length < this.elementInfo.dataZoom.count) {
this.$set(this.ec.option, 'dataZoom.start', 0)
this.$set(this.ec.option, 'dataZoom.end', 100)
} else {
this.$set(this.ec.option, 'dataZoom.start', this.elementInfo.dataZoom.start)
this.$set(this.ec.option, 'dataZoom.end', this.elementInfo.dataZoom.end)
}
if(chart) { if(chart) {
// 重新setOption，使得设置的formatter生效 // 重新setOption，使得设置的formatter生效
chart.setOption({ chart.setOption({
...@@ -114,38 +130,26 @@ ...@@ -114,38 +130,26 @@
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
},
/** /**
* 处理数据 * 处理数据
*/ */
dealSeriesData(data) { dealSeriesData(data) {
if (!data) return [] if (!data) return []
const that = this const that = this
const newData = data.map(item => { const newData = data.map((item, index) => {
let itemStyle = {...that.elementInfo.option.line.itemStyle}
if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
const colors = that.elementInfo.option.colorConfig.value
itemStyle = {
...that.elementInfo.option.line.itemStyle,
color: colors[index % colors.length]
}
}
const config = { const config = {
type: 'line', type: 'line',
...that.elementInfo.option.line, ...that.elementInfo.option.line,
...itemStyle,
label: { label: {
...that.elementInfo.option.dataset, ...that.elementInfo.option.dataset,
formatter: val => { formatter: val => {
...@@ -154,6 +158,10 @@ ...@@ -154,6 +158,10 @@
}, },
} }
} }
if (that.elementInfo.option.yAxis.showDouble) {
const yAxisIndex = data.length - 1 === index ? 1 : 0
return { ...item, ...config, yAxisIndex: yAxisIndex}
}
return { return {
...item, ...item,
...config ...config
......
components/NormalProgress/NormalProgress.vue
View file @ 0023edeb
...@@ -3,26 +3,27 @@ ...@@ -3,26 +3,27 @@
<u-line-progress <u-line-progress
class="u-line" class="u-line"
v-if="elementInfo.option.progress.type === 'line'" v-if="elementInfo.option.progress.type === 'line'"
:style="{'width': elementInfo.width + 'rpx'}" :style="{'width': elementInfo.width + 'px', 'font-size': elementInfo.option.progress.fontSize +'px', 'color': elementInfo.option.progress.titleColor}"
:height="elementInfo.option.progress.height" :height="elementInfo.option.progress.height"
:active-color="elementInfo.option.progress.strokeColor" :active-color="elementInfo.option.progress.strokeColor"
:inactive-color="elementInfo.option.progress.trailColor" :inactive-color="elementInfo.option.progress.trailColor"
:round="elementInfo.option.progress.strokeLinecap == 'round' ? true : false" :round="elementInfo.option.progress.strokeLinecap == 'round' ? true : false"
:percent="elementInfo.data.dataList.endVal" :percent="endVal"
:show-percent="elementInfo.option.progress.showInfo" :show-percent="elementInfo.option.progress.showInfo"
> >
</u-line-progress> </u-line-progress>
<u-circle-progress <u-circle-progress
class="u-circle" class="u-circle"
v-if="elementInfo.option.progress.type === 'circle'" v-if="elementInfo.option.progress.type === 'circle'"
:width="elementInfo.option.progress.width" :width="getRpx(elementInfo.option.progress.width)"
:border-width="elementInfo.option.progress.strokeWidth" :border-width="getRpx(elementInfo.option.progress.strokeWidth)"
:active-color="elementInfo.option.progress.strokeColor" :active-color="elementInfo.option.progress.strokeColor"
:inactive-color="elementInfo.option.progress.trailColor" :inactive-color="elementInfo.option.progress.trailColor"
:percent="elementInfo.data.dataList.endVal" :percent="endVal"
:bg-color="00000000" :bg-color="00000000"
> >
<view class="u-progress-text">{{elementInfo.data.dataList.endVal}}%</view> <view class="u-progress-text"
:style="{'font-size': elementInfo.option.progress.fontSize +'px', 'color': elementInfo.option.progress.titleColor}">{{endVal}}%</view>
</u-circle-progress> </u-circle-progress>
<DashboardProgress style="height: 100%;" v-if="elementInfo.option.progress.type === 'dashboard'" :elementInfo="elementInfo"></DashboardProgress> <DashboardProgress style="height: 100%;" v-if="elementInfo.option.progress.type === 'dashboard'" :elementInfo="elementInfo"></DashboardProgress>
</view> </view>
...@@ -34,13 +35,26 @@ import echartElementData from '@/mixins/echartElementData.js' ...@@ -34,13 +35,26 @@ import echartElementData from '@/mixins/echartElementData.js'
export default { export default {
name:"NormalProgress", name:"NormalProgress",
mixins: [echartElementData], mixins: [echartElementData],
data() {
return {
endVal: 30,
};
},
methods: { methods: {
initChart() {} initChart() {
const that = this
that.$nextTick(() => {
that.endVal = that.elementData.dataList.endVal
})
},
getRpx(value) {
return this.$u.common.pxToRpx(value)
}
} }
} }
</script> </script>
<style> <style lang="scss">
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -54,9 +68,4 @@ export default { ...@@ -54,9 +68,4 @@ export default {
.u-circle { .u-circle {
align-self: center; align-self: center;
} }
.u-progress-text {
font-size: 40rpx;
font-weight: bold;
color: white;
}
</style> </style>
\ No newline at end of file
components/NormalTable/NormalTable.vue
View file @ 0023edeb
...@@ -113,7 +113,9 @@ ...@@ -113,7 +113,9 @@
}) })
}, },
destroyed() { destroyed() {
uni.$off(elementInfo.id) if(this.elementInfo && this.elementInfo.id) {
uni.$off(this.elementInfo.id)
}
}, },
methods: { methods: {
initChart() { initChart() {
...@@ -131,9 +133,9 @@ ...@@ -131,9 +133,9 @@
that.elementInfo.table.column = columns that.elementInfo.table.column = columns
} }
that.chartTables = that.elementData.dataList.chartTables that.chartTables = that.elementData.dataList.chartTables
// if(that.elementInfo.table.tableCell.autoHeight) { if(that.elementInfo.table.tableCell.autoHeight) {
that.calculateCellHeight() that.calculateCellHeight()
// } }
}) })
}, },
......
components/NormalTabs/NormalTabs.vue
View file @ 0023edeb
<template> <template>
<view class="normal-tabs"> <view class="normal-tabs">
<u-tabs v-if="elementInfo.option.tabs.type === 'radio'" :list="elementData.dataList.series" :is-scroll="false" <u-tabs v-if="elementInfo.option.tabs.type === 'tabs'" :list="elementData.dataList.series"
:is-scroll='elementData.dataList.series.length > 4'
:current="currentTabs" :active-color="elementInfo.option.tabs.activeColor" :current="currentTabs" :active-color="elementInfo.option.tabs.activeColor"
:inactive-color="elementInfo.option.tabs.color" :bg-color="elementInfo.option.tabs.backgroundColor" :inactive-color="elementInfo.option.tabs.color" :bg-color="elementInfo.option.tabs.backgroundColor"
@change="handleTabsChange"></u-tabs> :font-size="getFontSize()" @change="handleTabsChange"></u-tabs>
<u-subsection v-if="elementInfo.option.tabs.type === 'radio'" :list="elementData.dataList.series"
:current="currentTabs" :active-color="elementInfo.option.tabs.activeColor"
:inactive-color="elementInfo.option.tabs.color" :font-size="getFontSize()"
@change="handleTabsChange"></u-subsection>
<template v-if="elementInfo.option.tabs.type === 'select'"> <template v-if="elementInfo.option.tabs.type === 'select'">
<view class="input-group"> <view class="input-group">
<u-input v-model="selectValue" type="select" border="true" <u-input v-model="selectValue" type="select" border="true"
...@@ -16,8 +21,8 @@ ...@@ -16,8 +21,8 @@
<swiper v-if="elementInfo.option.tabs.type === 'group'" class="tab-swiper" <swiper v-if="elementInfo.option.tabs.type === 'group'" class="tab-swiper"
:indicator-dots="tabsGroup.length > 1" :style="[tabsStyle]" :indicator-color="'#ccc'" :indicator-dots="tabsGroup.length > 1" :style="[tabsStyle]" :indicator-color="'#ccc'"
:indicator-active-color="elementInfo.option.tabs.backgroundColor"> :indicator-active-color="elementInfo.option.tabs.backgroundColor">
<swiper-item class="tab-group" v-for="(item, index) in tabsGroup" :key="index"> <swiper-item :class="[styleType === 'vertical' ? 'tab-vertical' : 'tab-group']" v-for="(item, index) in tabsGroup" :key="index">
<view class="tab-item" :class="[tabsValue == tab.value ? 'active' : '']" v-for="tab in item" <view class="tab-item" :class="{'active': tabsValue == tab.value}" v-for="tab in item"
:key="tab.value" @click="handleChangeTabValue(tab.value)"> :key="tab.value" @click="handleChangeTabValue(tab.value)">
{{ tab.name }} {{ tab.name }}
</view> </view>
...@@ -29,6 +34,24 @@ ...@@ -29,6 +34,24 @@
{{elementData.dataList.series[currentTabs].name}} {{elementData.dataList.series[currentTabs].name}}
</view> </view>
</template> </template>
<u-dropdown v-if="elementInfo.option.tabs.type === 'dropdown'" :title-size="getFontSize()" ref="uDropdown"
:active-color="elementInfo.option.tabs.color" :inactive-color="elementInfo.option.tabs.color"
:menu-icon-size="getFontSize()" :height="getHeight()">
<u-dropdown-item v-model="tabsValue" :title="getSelectLabel(tabsValue)">
<view class="slot-content" :style="{'background-color': elementInfo.option.tabs.itemBackgroundColor}"
v-for="(item, index) in elementData.dataList.series" :key="index">
<view class="drop-item" @click="handleDropdownValue(item)"
:style="{
'color':tabsValue === item.value ? elementInfo.option.tabs.activeColor : elementInfo.option.tabs.color,
'background-color':tabsValue === item.value ? elementInfo.option.tabs.backgroundColor : elementInfo.option.tabs.itemBackgroundColor,
'font-size':`${elementInfo.option.tabs.fontSize}px`,
}">
{{item.name}}
</view>
</view>
</u-dropdown-item>
</u-dropdown>
</view> </view>
</template> </template>
...@@ -72,6 +95,17 @@ ...@@ -72,6 +95,17 @@
} }
return [] return []
}, },
tabsMenu() {
const {
type
} = this.elementInfo.option.tabs
if (type === 'dropdown') {
this.elementData.dataList.series.forEach(item => {
item.label = item.name
})
}
return this.elementData.dataList.series
},
tabsStyle() { tabsStyle() {
const { const {
fontSize, fontSize,
...@@ -86,7 +120,7 @@ ...@@ -86,7 +120,7 @@
} = this.elementInfo.option.tabs } = this.elementInfo.option.tabs
return { return {
height: `${this.elementInfo.height}px`, height: `${this.elementInfo.height}px`,
'--width': `${100 / Number(count) - 2}%`, '--width': this.styleType != 'vertical' ? `${100 / Number(count) - 2}%` : '95%',
'--font-size': `${fontSize}px`, '--font-size': `${fontSize}px`,
'--color': color, '--color': color,
'--active-color': activeColor, '--active-color': activeColor,
...@@ -161,6 +195,12 @@ ...@@ -161,6 +195,12 @@
this.tabsValueChange() this.tabsValueChange()
}, },
handleDropdownValue(item) {
this.tabsValue = item.value
this.tabsValueChange()
this.$refs['uDropdown'].close()
},
/** 清除值 */ /** 清除值 */
handleClearValue() { handleClearValue() {
this.tabsValue = '' this.tabsValue = ''
...@@ -202,6 +242,12 @@ ...@@ -202,6 +242,12 @@
} }
}) })
return label return label
},
getFontSize() {
return this.$u.common.pxToRpx(this.elementInfo.option.tabs.fontSize)
},
getHeight() {
return this.$u.common.pxToRpx(this.elementInfo.height)
} }
}, },
watch: { watch: {
...@@ -222,6 +268,12 @@ ...@@ -222,6 +268,12 @@
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
} }
.tab-vertical {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.tab-item { .tab-item {
width: var(--width); width: var(--width);
...@@ -265,4 +317,13 @@ ...@@ -265,4 +317,13 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.drop-item {
padding: 5px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
cursor: pointer;
}
</style> </style>
mixins/echartElementData.js
View file @ 0023edeb
...@@ -11,6 +11,10 @@ export default { ...@@ -11,6 +11,10 @@ export default {
elementInfo: { elementInfo: {
type: Object, type: Object,
required: true required: true
},
styleType: {
type: String,
default: ''
} }
}, },
methods: { methods: {
...@@ -28,7 +32,7 @@ export default { ...@@ -28,7 +32,7 @@ export default {
*/ */
async handleDynamicData (value) { async handleDynamicData (value) {
const that = this const that = this
let { dataUrl, dataMethod, dataFormatter, dataProcessing } = { ...value } let { dataUrl, dataMethod, dataFormatter, dataProcessing, dataConfig } = { ...value }
if(value.queryFormatter) dataFormatter = {...dataFormatter, ...value.queryFormatter} if(value.queryFormatter) dataFormatter = {...dataFormatter, ...value.queryFormatter}
dataUrl = dataUrl.replace(/^(\/(dashboardCharts|dashboardAPI))?/, '') dataUrl = dataUrl.replace(/^(\/(dashboardCharts|dashboardAPI))?/, '')
dataFormatter = that.$u.common.filterRequestParams({...dataFormatter}) dataFormatter = that.$u.common.filterRequestParams({...dataFormatter})
...@@ -37,6 +41,8 @@ export default { ...@@ -37,6 +41,8 @@ export default {
}) })
if (dataProcessing) { if (dataProcessing) {
that.elementData.dataList = that.$u.common.converFunction(dataProcessing, res.data, value.queryFormatter) that.elementData.dataList = that.$u.common.converFunction(dataProcessing, res.data, value.queryFormatter)
} else if (dataConfig && dataConfig.value && dataConfig.value.length) {
that.elementData.dataList = that.$u.charts.parseChartData(res.data, that.elementInfo)
} else { } else {
that.elementData.dataList = JSON.parse(JSON.stringify(res.data.Result)) that.elementData.dataList = JSON.parse(JSON.stringify(res.data.Result))
} }
...@@ -46,9 +52,11 @@ export default { ...@@ -46,9 +52,11 @@ export default {
*/ */
handlePublicData (value) { handlePublicData (value) {
if (!this.vuex_globalData) return if (!this.vuex_globalData) return
const { dataProcessing } = { ...value } const { dataProcessing, dataConfig} = { ...value }
if (dataProcessing) { if (dataProcessing) {
this.elementData.dataList = this.$u.common.converFunction(dataProcessing, this.vuex_globalData, value.queryFormatter) this.elementData.dataList = this.$u.common.converFunction(dataProcessing, this.vuex_globalData, value.queryFormatter)
} else if (dataConfig && dataConfig.value && dataConfig.value.length) {
this.elementData.dataList = this.$u.charts.parseChartData(this.vuex_globalData, this.elementInfo)
} else { } else {
this.elementData.dataList = this.vuex_globalData this.elementData.dataList = this.vuex_globalData
} }
...@@ -118,7 +126,7 @@ export default { ...@@ -118,7 +126,7 @@ export default {
handler(newVal) { handler(newVal) {
const that = this const that = this
const storageData = uni.getStorageSync(this.elementInfo.id) const storageData = uni.getStorageSync(this.elementInfo.id)
if(storageData && newVal.dataType !== 'static') { if(storageData && JSON.stringify(storageData) != "{}" && newVal.dataType !== 'static') {
this.elementData.dataList = JSON.parse(storageData) this.elementData.dataList = JSON.parse(storageData)
} }
if(that.elementInfo.hide) return false if(that.elementInfo.hide) return false
...@@ -126,7 +134,7 @@ export default { ...@@ -126,7 +134,7 @@ export default {
that.handleStaticData(newVal) that.handleStaticData(newVal)
} else if (newVal.dataType === 'dynamic') { } else if (newVal.dataType === 'dynamic') {
that.handleDynamicData(newVal) that.handleDynamicData(newVal)
if (newVal.dataPolling) { if (newVal.dataPolling && newVal.dataPollingInterval > 0) {
that.timer = setInterval(() => { that.timer = setInterval(() => {
that.handleDynamicData(newVal) that.handleDynamicData(newVal)
}, newVal.dataPollingInterval * 1000) }, newVal.dataPollingInterval * 1000)
...@@ -134,10 +142,12 @@ export default { ...@@ -134,10 +142,12 @@ export default {
clearInterval(that.timer) clearInterval(that.timer)
} }
} else if (newVal.dataType === 'public') { } else if (newVal.dataType === 'public') {
if(that.vuex_globalData && that.vuex_globalData.elements.includes(that.elementInfo.id)) {
that.handlePublicData(newVal) that.handlePublicData(newVal)
}
} else if (newVal.dataType === 'dataSet') { } else if (newVal.dataType === 'dataSet') {
that.handleDataSet(newVal) that.handleDataSet(newVal)
if (newVal.dataPolling) { if (newVal.dataPolling && newVal.dataPollingInterval > 0) {
that.timer = setInterval(() => { that.timer = setInterval(() => {
that.handleDataSet(newVal) that.handleDataSet(newVal)
}, newVal.dataPollingInterval * 1000) }, newVal.dataPollingInterval * 1000)
...@@ -146,7 +156,7 @@ export default { ...@@ -146,7 +156,7 @@ export default {
} }
} else if (newVal.dataType === 'viewConfig') { } else if (newVal.dataType === 'viewConfig') {
that.handleViewConfig(newVal) that.handleViewConfig(newVal)
if (newVal.dataPolling) { if (newVal.dataPolling && newVal.dataPollingInterval > 0) {
that.timer = setInterval(() => { that.timer = setInterval(() => {
that.handleViewConfig(newVal) that.handleViewConfig(newVal)
}, newVal.dataPollingInterval * 1000) }, newVal.dataPollingInterval * 1000)
...@@ -161,13 +171,21 @@ export default { ...@@ -161,13 +171,21 @@ export default {
/** /**
* 全局数据更新监测 * 全局数据更新监测
*/ */
'vuex_globalData' () { 'vuex_globalData' (newVal) {
if (this.elementInfo.data.dataType === 'public') this.handlePublicData(this.elementInfo.data) const elements = newVal.elements
/* elements.includes(this.elementInfo.id) 全局数据对应的elements包含当前的element id，
否则在切换页面的时候，被切换页面的全局组件也会再次请求,导致报错
*/
if (elements.includes(this.elementInfo.id) && this.elementInfo.data.dataType === 'public') {
this.handlePublicData(this.elementInfo.data)
}
}, },
'elementData.dataList': { 'elementData.dataList': {
handler(newVal) { handler(newVal) {
if (newVal) {
this.setStorageData() this.setStorageData()
this.initChart() this.initChart()
}
}, },
deep: true, deep: true,
immediate: true immediate: true
......
pages/details/details.vue
View file @ 0023edeb
...@@ -219,28 +219,72 @@ ...@@ -219,28 +219,72 @@
const { Status, Result: { info, list } } = res.data const { Status, Result: { info, list } } = res.data
if (Status === 'true') { if (Status === 'true') {
if(info.dataUrl) { if(info.dataUrl) {
that.getGlobalData(info) that.getGlobalData(info, list)
if(info.dataPollingInterval) { if(info.dataPollingInterval) {
that.timename = setInterval(() => { that.timename = setInterval(() => {
that.getGlobalData(info) that.getGlobalData(info, list)
}, parseInt(info.dataPollingInterval) * 1000) }, parseInt(info.dataPollingInterval) * 1000)
} }
} }
that.reportInfo = res.data.Result // 清除数据
if(uni.getStorageSync('reportInfo')) {
let cacheInfo = JSON.parse(uni.getStorageSync('reportInfo'))
cacheInfo.list.forEach(item => {
// 如果本地缓存的数组在接口请求的数组中不存在，则删除
if(!list.some(idx => idx.id == item.id)) {
uni.removeStorageSync(item.id)
}
})
}
that.reportInfo = this.handleTabsLink(res.data.Result)
uni.setStorageSync('reportInfo', JSON.stringify(res.data.Result))
that.getStickyTables() that.getStickyTables()
} }
}, },
/**
* tabs 组件处理关联关系
*/
handleTabsLink(data) {
data.list.forEach(item => {
if(item.type === 'NormalTabs' && (item.child.index.length || item.child.data.length)) {
if (item.child.index.length) {
item.child.index.forEach(child => {
const index = data.list.findIndex(i => i.id === child )
if(index != -1) {
data.list[index].linkTabsId = item.id
}
})
}
if (item.child.data.length) {
item.child.data.forEach(child => {
const index = data.list.findIndex(i => i.id === child.comp )
if(index != -1) {
data.list[index].linkTabsId = item.id
}
})
}
}
})
return data
},
/** /**
* 获取全局接口数据 * 获取全局接口数据
*/ */
async getGlobalData(info) { async getGlobalData(info, list) {
const that = this const that = this
const dataUrl = info.dataUrl.replace(/^(\/(dashboardCharts|dashboardAPI))?/, '') const dataUrl = info.dataUrl.replace(/^(\/(dashboardCharts|dashboardAPI))?/, '')
const dataFormatter = this.$u.common.filterRequestParams({...info.dataFormatter}) const dataFormatter = this.$u.common.filterRequestParams({...info.dataFormatter})
let res = await that.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, dataFormatter, { let res = await that.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, dataFormatter, {
custom: { loading: false } custom: { loading: false }
}) })
that.$u.vuex('vuex_globalData', res.data) const elements = []
list.forEach(item => {
if(item.data.dataType === 'public') {
elements.push(item.id)
}
})
const data = {...res.data, elements}
that.$u.vuex('vuex_globalData', data)
}, },
/** /**
* 组件之间关联 * 组件之间关联
......
pages/fullscreen/fullscreen.vue
View file @ 0023edeb
<template> <template>
<view class="wrapper" :style="[theStyle]"> <view class="wrapper" :class="{'tabs-layout': showTabs}" :style="{width: `${theStyle.width - theStyle.left}px`, left:`${theStyle.left}px`}">
<template> <!-- 普通选项卡 -->
<view v-if="showTabs"
style="position: fixed;top: 0;"
:style="{
width: `${parseInt(tabsElement.width * scale)}px`,
height: `${parseInt(tabsElement.height * (scale > 1 ? 1 : scale))}px`,
left: `${parseInt(tabsElement.left * scale)}px`,
zIndex: 10
}"
>
<NormalTabs
:elementInfo="tabsElement"
></NormalTabs>
</view>
<view :style="{'margin-top': `${tabsElement.height * (scale > 1 ? 1 : scale)}px`, height: `${theStyle.height}px`, width: `${theStyle.width - theStyle.left}px`, zIndex: 9}">
<!-- 普通柱状图 --> <!-- 普通柱状图 -->
<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar> <NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
<!-- 普通折线图 --> <!-- 普通折线图 -->
...@@ -9,7 +23,8 @@ ...@@ -9,7 +23,8 @@
<HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar> <HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar>
<!-- 折柱图 --> <!-- 折柱图 -->
<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar> <LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
</template> </view>
</view> </view>
</template> </template>
...@@ -17,36 +32,113 @@ ...@@ -17,36 +32,113 @@
export default { export default {
data() { data() {
return { return {
element: {} element: {},
linkTabsId: '',
tabsElement: {}
} }
}, },
computed: { computed: {
showTabs() {
return this.linkTabsId && Object.keys(this.tabsElement).length
},
theStyle() { theStyle() {
const { windowWidth, windowHeight } = uni.getSystemInfoSync() const { windowWidth, windowHeight, screenHeight, safeArea } = uni.getSystemInfoSync()
const reduceBottom = screenHeight - safeArea.bottom
return { return {
'height': `${windowHeight}px`, height: this.showTabs ? windowHeight - reduceBottom - this.tabsElement.height : windowHeight - reduceBottom,
'width': `${windowWidth}px`, width: windowWidth,
left: safeArea.left
} }
}, },
scale() {
let info = JSON.parse(uni.getStorageSync('reportInfo'))
if(JSON.stringify(info) == "{}") {
return
}
const { windowWidth } = uni.getSystemInfoSync()
const { width, height } = info.info
return windowWidth / width
}
}, },
onLoad(option) { onLoad(option) {
this.element = JSON.parse(decodeURIComponent(option.element)) this.element = JSON.parse(decodeURIComponent(option.element))
this.linkTabsId = option.linkTabsId
if(this.linkTabsId && uni.getStorageSync('reportInfo')) {
let info = JSON.parse(uni.getStorageSync('reportInfo'))
const data = info.list.find(item => item.id === this.linkTabsId)
this.tabsElement = data
}
// 去掉全屏的定制按钮 // 去掉全屏的定制按钮
const toolbox = {show: false} const toolbox = {show: false}
this.element.option.toolbox = toolbox this.element.option.toolbox = toolbox
}, },
onShow() {
/**
* 组件交互 - 组件
*/
uni.$on('handleLinkComp', ({ showData, hideData }) => {
let info = JSON.parse(uni.getStorageSync('reportInfo'))
const data = info.list.find(item => showData[0] === item.id)
data.hide = false
// 去掉全屏的定制按钮
data.option.toolbox = { show: false }
this.element = data
}),
/**
* 组件交互 - 参数
*/
uni.$on('handleLinkParams', ({index, paramName, value}) => {
let reportInfo = JSON.parse(uni.getStorageSync('reportInfo'))
if(index.length && paramName) {
const that = this
reportInfo.list = reportInfo.list.map(item => {
const flag = index.includes(item.id)
if(flag && item.type === 'BasicText' && item.data.dataType === 'static') {
that.$set(item.data.dataList, 'text', value)
}
if(flag && item.data.dataType === 'dynamic') {
if(!item.data.queryFormatter) item.data.queryFormatter = {}
that.$set(item.data.queryFormatter, paramName, value)
}
if(flag && item.data.dataType === 'dataSet') {
if(!item.data.dataSetInfo.queryFormatter) item.data.dataSetInfo.queryFormatter = {}
that.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
}
if(flag && item.data.dataType === 'public') {
if(!item.data.queryFormatter) item.data.queryFormatter = {}
that.$set(item.data.queryFormatter, paramName, value)
}
return item
})
}
this.element = reportInfo.list.find(item => index[0] === item.id)
// 去掉全屏的定制按钮
this.element.option.toolbox = { show: false }
})
}
} }
</script> </script>
<style> <style>
page {
height: 100%;
}
.wrapper { .wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
user-select: none; user-select: none;
// overflow: auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}
.tabs-layout {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
} }
</style> </style>
pages/index/index.vue
View file @ 0023edeb
...@@ -245,40 +245,73 @@ ...@@ -245,40 +245,73 @@
const { Status, Result: { info, list } } = res.data const { Status, Result: { info, list } } = res.data
if (Status === 'true') { if (Status === 'true') {
if(info.dataUrl) { if(info.dataUrl) {
that.getGlobalData(info) that.getGlobalData(info, list)
if(info.dataPollingInterval) { if(info.dataPollingInterval) {
that.timename = setInterval(() => { that.timename = setInterval(() => {
that.getGlobalData(info) that.getGlobalData(info, list)
}, parseInt(info.dataPollingInterval) * 1000) }, parseInt(info.dataPollingInterval) * 1000)
} }
} }
that.reportInfo = res.data.Result
// 清除数据 // 清除数据
if(uni.getStorageSync('reportInfo')) { if(uni.getStorageSync('reportInfo')) {
let info = JSON.parse(uni.getStorageSync('reportInfo')) let info = JSON.parse(uni.getStorageSync('reportInfo'))
info.list.forEach(item => { info.list.forEach(item => {
// 如果本地缓存的数组在接口请求的数组中不存在，则删除 // 如果本地缓存的数组在接口请求的数组中不存在，则删除
if(!that.reportInfo.list.some(idx => idx.id == item.id)) { if(!list.some(idx => idx.id == item.id)) {
uni.removeStorageSync(item.id) uni.removeStorageSync(item.id)
} }
}) })
} }
that.reportInfo = this.handleTabsLink(res.data.Result)
uni.setStorageSync('reportInfo', JSON.stringify(res.data.Result)) uni.setStorageSync('reportInfo', JSON.stringify(res.data.Result))
that.getStickyTables() that.getStickyTables()
} }
}, },
/**
* tabs 组件处理关联关系
*/
handleTabsLink(data) {
data.list.forEach(item => {
if(item.type === 'NormalTabs' && (item.child.index.length || item.child.data.length)) {
if (item.child.index.length) {
item.child.index.forEach(child => {
const index = data.list.findIndex(i => i.id === child )
if(index != -1) {
data.list[index].linkTabsId = item.id
}
})
}
if (item.child.data.length) {
item.child.data.forEach(child => {
const index = data.list.findIndex(i => i.id === child.comp )
if(index != -1) {
data.list[index].linkTabsId = item.id
}
})
}
}
})
return data
},
/** /**
* 获取全局接口数据 * 获取全局接口数据
*/ */
async getGlobalData(info) { async getGlobalData(info,list) {
const that = this const that = this
const dataUrl = info.dataUrl.replace(/^(\/(dashboardCharts|dashboardAPI))?/, '') const dataUrl = info.dataUrl.replace(/^(\/(dashboardCharts|dashboardAPI))?/, '')
const dataFormatter = that.$u.common.filterRequestParams({...info.dataFormatter}) const dataFormatter = that.$u.common.filterRequestParams({...info.dataFormatter})
let res = await that.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, dataFormatter, { let res = await that.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, dataFormatter, {
custom: { loading: false } custom: { loading: false }
}) })
that.$u.vuex('vuex_globalData', res.data) const elements = []
list.forEach(item => {
if(item.data.dataType === 'public') {
elements.push(item.id)
}
})
const data = {...res.data, elements}
that.$u.vuex('vuex_globalData', data)
}, },
/** /**
* 组件之间关联 * 组件之间关联
...@@ -305,6 +338,7 @@ ...@@ -305,6 +338,7 @@
} }
return item return item
}) })
uni.setStorageSync('reportInfo', JSON.stringify(that.reportInfo))
} }
}, },
getStickyTables() { getStickyTables() {
......
utils/common.js
View file @ 0023edeb
...@@ -163,12 +163,12 @@ const install = (Vue, vm) => { ...@@ -163,12 +163,12 @@ const install = (Vue, vm) => {
// ios会有零宽断言的兼容性问题，废弃掉正则判断，使用强制解析判断 // ios会有零宽断言的兼容性问题，废弃掉正则判断，使用强制解析判断
const reg = '@diffOfNow(' const reg = '@diffOfNow('
if(paramStr.includes(reg)) { if (paramStr.includes(reg)) {
const match = paramStr.split(reg) const match = paramStr.split(reg)
if(match.length >= 2) { if (match.length >= 2) {
const str = match[1] const str = match[1]
const nums = str.split(')') const nums = str.split(')')
if(nums.length) { if (nums.length) {
const res = reg + nums[0] + ')' const res = reg + nums[0] + ')'
paramStr = paramStr.replace(res, diffOfNow(parseInt(nums[0]))) paramStr = paramStr.replace(res, diffOfNow(parseInt(nums[0])))
} }
...@@ -193,7 +193,7 @@ const install = (Vue, vm) => { ...@@ -193,7 +193,7 @@ const install = (Vue, vm) => {
let d1 = new Date(); let d1 = new Date();
let d2 = new Date(); let d2 = new Date();
d2.setMonth(0); d2.setMonth(0);
d2.setDate(3);//3 周一为本周第一天；2 周日为本周第一天；1 周六为本周第一天 d2.setDate(3); //3 周一为本周第一天；2 周日为本周第一天；1 周六为本周第一天
let rq = d1 - d2; let rq = d1 - d2;
let days = Math.ceil(rq / (24 * 60 * 60 * 1000)); let days = Math.ceil(rq / (24 * 60 * 60 * 1000));
let weekly = Math.ceil(days / 7); let weekly = Math.ceil(days / 7);
...@@ -233,6 +233,53 @@ const install = (Vue, vm) => { ...@@ -233,6 +233,53 @@ const install = (Vue, vm) => {
} }
/**
*
* @param tooltip 表单的tooltip设置
*/
const dealTooltip = (tooltip) => {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
}
/**
*
* @param yAxis 表单的yAxis设置
*/
const dealAxisFormatter = (axis) => {
if (!axis) {
return
}
if (axis.axisLabel.formatter && axis.axisLabel.formatter.length) {
return {
...axis,
axisLabel: {
...axis.axisLabel,
formatter: (val) => {
return converFunction(axis.axisLabel.formatter, val)
},
}
}
}
return axis
}
vm.$u.common = { vm.$u.common = {
converFunction, converFunction,
fillDigit, fillDigit,
...@@ -242,7 +289,9 @@ const install = (Vue, vm) => { ...@@ -242,7 +289,9 @@ const install = (Vue, vm) => {
rpxToPx, rpxToPx,
chunk, chunk,
getQueryFromString, getQueryFromString,
filterRequestParams filterRequestParams,
dealTooltip,
dealAxisFormatter
} }
} }
......
uview-ui/components/u-dropdown/u-dropdown.vue
View file @ 0023edeb
<template> <template>
<view class="u-dropdown"> <view class="u-dropdown" :style="dropDownShow ? '' :'overflow:hidden'">
<view class="u-dropdown__menu" :style="{ <view class="u-dropdown__menu" :style="{
height: $u.addUnit(height) height: $u.addUnit(height)
}" :class="{ }" :class="{
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]"> <view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
<slot></slot> <slot></slot>
</view> </view>
<view class="u-dropdown__content__mask"></view> <view class="u-dropdown__content__mask" :style="dropDownShow ? 'width: 100%' :'width:0'"></view>
</view> </view>
</view> </view>
</template> </template>
...@@ -125,7 +125,8 @@ ...@@ -125,7 +125,8 @@
}, },
// 让某个菜单保持高亮的状态 // 让某个菜单保持高亮的状态
highlightIndex: 99999, highlightIndex: 99999,
contentHeight: 0 contentHeight: 0,
dropDownShow:false
} }
}, },
computed: { computed: {
...@@ -133,7 +134,8 @@ ...@@ -133,7 +134,8 @@
popupStyle() { popupStyle() {
let style = {}; let style = {};
// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏 // 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
style.transform = `translateY(${this.active ? 0 : '-100%'})` // style.transform = `translateY(${this.active ? 0 : "-100%"})`;
style.transform = `scaleY(${this.active ? 1 : 0})`
style['transition-duration'] = this.duration / 1000 + 's'; style['transition-duration'] = this.duration / 1000 + 's';
style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`; style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
return style; return style;
...@@ -172,6 +174,7 @@ ...@@ -172,6 +174,7 @@
}, },
// 打开下拉菜单 // 打开下拉菜单
open(index) { open(index) {
this.dropDownShow = true
// 重置高亮索引，否则会造成多个菜单同时高亮 // 重置高亮索引，否则会造成多个菜单同时高亮
// this.highlightIndex = 9999; // this.highlightIndex = 9999;
// 展开时，设置下拉内容的样式 // 展开时，设置下拉内容的样式
...@@ -190,6 +193,7 @@ ...@@ -190,6 +193,7 @@
}, },
// 设置下拉菜单处于收起状态 // 设置下拉菜单处于收起状态
close() { close() {
this.dropDownShow = false
this.$emit('close', this.current); this.$emit('close', this.current);
// 设置为收起状态，同时current归位，设置为空字符串 // 设置为收起状态，同时current归位，设置为空字符串
this.active = false; this.active = false;
...@@ -221,7 +225,7 @@ ...@@ -221,7 +225,7 @@
// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离 // H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成 // 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动 // 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
this.contentHeight = windowHeight - res.bottom; this.contentHeight = Math.abs(windowHeight - res.bottom);
}) })
} }
} }
...@@ -276,10 +280,10 @@ ...@@ -276,10 +280,10 @@
&__mask { &__mask {
position: absolute; position: fixed;
z-index: 9; z-index: 9;
background: rgba(0, 0, 0, .3); background: rgba(0, 0, 0, .3);
width: 100%; // width: 100%;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
...@@ -288,6 +292,7 @@ ...@@ -288,6 +292,7 @@
&__popup { &__popup {
position: relative; position: relative;
z-index: 10; z-index: 10;
transform-origin: center top;
transition: all 0.3s; transition: all 0.3s;
transform: translate3D(0, -100%, 0); transform: translate3D(0, -100%, 0);
overflow: hidden; overflow: hidden;
......
uview-ui/components/u-line-progress/u-line-progress.vue
View file @ 0023edeb
...@@ -121,8 +121,8 @@ ...@@ -121,8 +121,8 @@
@include vue-flex; @include vue-flex;
justify-items: flex-end; justify-items: flex-end;
justify-content: space-around; justify-content: space-around;
font-size: 20rpx; // font-size: 20rpx;
color: #ffffff; // color: #ffffff;
transition: all 0.4s ease; transition: all 0.4s ease;
} }
......
uview-ui/components/u-subsection/u-subsection.vue
View file @ 0023edeb
...@@ -116,24 +116,33 @@ ...@@ -116,24 +116,33 @@
this.currentIndex = nVal; this.currentIndex = nVal;
this.changeSectionStatus(nVal); this.changeSectionStatus(nVal);
} }
}
}, },
created() { list: {
// 将list的数据，传入listInfo数组，因为不能修改props传递的list值 immediate: true,
// 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}] handler(nVal) {
this.listInfo = this.list.map((val, index) => { this.getListInfo()
if (typeof val != 'object') { setTimeout(() => {
let obj = { this.getTabsInfo();
width: 0, }, 10);
name: val }
};
return obj;
} else {
val.width = 0;
return val;
} }
});
}, },
// created() {
// // 将list的数据，传入listInfo数组，因为不能修改props传递的list值
// // 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}]
// this.listInfo = this.list.map((val, index) => {
// if (typeof val != 'object') {
// let obj = {
// width: 0,
// name: val
// };
// return obj;
// } else {
// val.width = 0;
// return val;
// }
// });
// },
computed: { computed: {
// 设置mode=subsection时，滑块特有的样式 // 设置mode=subsection时，滑块特有的样式
noBorderRight() { noBorderRight() {
...@@ -213,11 +222,27 @@ ...@@ -213,11 +222,27 @@
} }
}, },
mounted() { mounted() {
setTimeout(() => { // setTimeout(() => {
this.getTabsInfo(); // this.getTabsInfo();
}, 10); // }, 10);
}, },
methods: { methods: {
getListInfo () {
// 将list的数据，传入listInfo数组，因为不能修改props传递的list值
// 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}]
this.listInfo = this.list.map((val, index) => {
if (typeof val != 'object') {
let obj = {
width: 0,
name: val
};
return obj;
} else {
val.width = 0;
return val;
}
});
},
// 改变滑块的样式 // 改变滑块的样式
changeSectionStatus(nVal) { changeSectionStatus(nVal) {
if (this.mode == 'subsection') { if (this.mode == 'subsection') {
......
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