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