Skip to content

E
ec-report-refactor
Commit a2b783d1 authored by lxm's avatar lxm
Browse files
Options

Merge branch 'develop' of http://106.15.103.105/lihuizhen/ec-report-refactor into develop 

# Conflicts:
#	pages/index/index.vue
parents 513b01b1 4cef62c7
Expand all Show whitespace changes
Inline Side-by-side
Showing with 677 additions and 216 deletions
common/http.interceptor.js
View file @ a2b783d1
...@@ -25,6 +25,7 @@ const install = (Vue, vm) => { ...@@ -25,6 +25,7 @@ const install = (Vue, vm) => {
uni.showLoading() uni.showLoading()
} }
config.header.Authorization = vm.vuex_token config.header.Authorization = vm.vuex_token
config.header.requestId = vm.$u.guid()
return config return config
}, (config) => { }, (config) => {
return Promise.reject(config) return Promise.reject(config)
......
components/DashboardProgress/DashboardProgress.vue
View file @ a2b783d1
...@@ -36,12 +36,12 @@ ...@@ -36,12 +36,12 @@
inited(canvas, width, height, canvasDpr) { inited(canvas, width, height, canvasDpr) {
var scale = 1.0 var scale = 1.0
const { windowWidth } = uni.getSystemInfoSync() const { windowWidth } = uni.getSystemInfoSync()
if (windowWidth < 330) { if (windowWidth < 400) {
scale = 1.1 scale = 1.25
} }
chart = this.$echarts.init(canvas, null, { chart = this.$echarts.init(canvas, null, {
width: width * scale, width: width * scale,
height: height, height: height * scale,
devicePixelRatio: canvasDpr devicePixelRatio: canvasDpr
}) })
canvas.setChart(chart) canvas.setChart(chart)
......
components/HorizontalBar/HorizontalBar.vue
View file @ a2b783d1
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
import echartElementData from '@/mixins/echartElementData.js' import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js' import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
let chart = null let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default { export default {
name: "HorizontalBar", name: "HorizontalBar",
...@@ -17,12 +18,16 @@ ...@@ -17,12 +18,16 @@
ec: { ec: {
lazyLoad: true, lazyLoad: true,
option: {} option: {}
} },
labelShow: false // 记录当前设置的label.show的值
} }
}, },
components: { components: {
uniEcCanvas uniEcCanvas
}, },
created() {
this.labelShow = this.elementInfo.option.dataset.show
},
mounted() { mounted() {
this.$refs['horizontalBarCanvas'].init(this.inited) this.$refs['horizontalBarCanvas'].init(this.inited)
}, },
...@@ -78,17 +83,40 @@ ...@@ -78,17 +83,40 @@
}) })
chart.on('datazoom', event => { chart.on('datazoom', event => {
that.echartsDataZoom(event) that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
}) })
return chart return chart
}, },
initChart() { initChart() {
// 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => {
const { categories, series, preview, images } = this.elementData.dataList const { categories, series, preview, images } = this.elementData.dataList
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
}
if(count > this.elementInfo.option.dataset.maxCount) {
this.elementInfo.option.dataset.show = false
}
lastCount = count
}
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'yAxis.data', categories) this.$set(this.ec.option, 'yAxis.data', categories)
this.$set(this.ec.option, 'series', this.dealSeriesData(series)) 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(chart) {
const option = chart.getOption()
option.series = dealSeries
// 重新setOption，使得设置的formatter生效
chart.setOption(option)
}
if(preview) { if(preview) {
this.cacheImages(images) this.cacheImages(images)
} }
})
}, },
/** /**
* 处理数据 * 处理数据
...@@ -137,8 +165,38 @@ ...@@ -137,8 +165,38 @@
}) })
} }
}) })
},
/**
* 处理图表的数值是否显示
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
flag = true
}
if(lastCount > count && lastCount >= maxCount && count < maxCount) {
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
const series = this.ec.option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
this.$set(this.ec.option, 'series', series)
this.$set(this.ec.option, 'dataZoom.start', event.start)
this.$set(this.ec.option, 'dataZoom.end', event.end)
}
}
} }
} }
} }
</script> </script>
......
components/LineMixBar/LineMixBar.vue
View file @ a2b783d1
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js' import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js' import { svg } from '@/mixins/svg.js'
let chart = null let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default { export default {
name: "LineMixBar", name: "LineMixBar",
...@@ -23,7 +24,8 @@ ...@@ -23,7 +24,8 @@
ec: { ec: {
lazyLoad: true, lazyLoad: true,
option: {} option: {}
} },
labelShow: false // 记录当前设置的label.show的值
} }
}, },
components: { components: {
...@@ -32,6 +34,9 @@ ...@@ -32,6 +34,9 @@
mounted() { mounted() {
this.$refs['lineMixBarCanvas'].init(this.inited) this.$refs['lineMixBarCanvas'].init(this.inited)
}, },
created() {
this.labelShow = this.elementInfo.option.dataset.show
},
methods: { methods: {
inited(canvas, width, height, canvasDpr) { inited(canvas, width, height, canvasDpr) {
chart = this.$echarts.init(canvas, null, { chart = this.$echarts.init(canvas, null, {
...@@ -84,13 +89,38 @@ ...@@ -84,13 +89,38 @@
chart.on('click', event => { chart.on('click', event => {
that.handleEchartsClick(event) that.handleEchartsClick(event)
}) })
chart.on('datazoom', event => {
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
})
return chart return chart
}, },
initChart() { initChart() {
const {categories, series } = this.elementData.dataList // 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => {
const { categories, series } = this.elementData.dataList
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
}
if(count > this.elementInfo.option.dataset.maxCount) {
this.elementInfo.option.dataset.show = false
}
lastCount = count
}
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'xAxis.data', categories) this.$set(this.ec.option, 'xAxis.data', categories)
this.$set(this.ec.option, 'series', this.dealSeriesData(series)) 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(chart) {
const option = chart.getOption()
option.series = dealSeries
// 重新setOption，使得设置的formatter生效
chart.setOption(option)
}
})
}, },
/** /**
* 处理数据 * 处理数据
...@@ -125,6 +155,37 @@ ...@@ -125,6 +155,37 @@
} }
}) })
return newData return newData
},
/**
* 处理图表的数值是否显示
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
flag = true
}
if(lastCount > count && lastCount >= maxCount && count < maxCount) {
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
const series = this.ec.option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
this.$set(this.ec.option, 'series', series)
this.$set(this.ec.option, 'dataZoom.start', event.start)
this.$set(this.ec.option, 'dataZoom.end', event.end)
}
}
} }
} }
} }
......
components/NormalBar/NormalBar.vue
View file @ a2b783d1
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js' import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js' import { svg } from '@/mixins/svg.js'
let chart = null let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default { export default {
name: "Normalbar", name: "Normalbar",
...@@ -18,12 +19,16 @@ ...@@ -18,12 +19,16 @@
ec: { ec: {
lazyLoad: true, lazyLoad: true,
option: {} option: {}
} },
labelShow: false // 记录当前设置的label.show的值
} }
}, },
components: { components: {
uniEcCanvas uniEcCanvas
}, },
created() {
this.labelShow = this.elementInfo.option.dataset.show
},
mounted() { mounted() {
this.$refs['normalbarCanvas'].init(this.inited) this.$refs['normalbarCanvas'].init(this.inited)
}, },
...@@ -70,13 +75,38 @@ ...@@ -70,13 +75,38 @@
chart.on('click', event => { chart.on('click', event => {
that.handleEchartsClick(event) that.handleEchartsClick(event)
}) })
chart.on('datazoom', event => {
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
})
return chart return chart
}, },
initChart() { initChart() {
// 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => {
const { categories, series } = this.elementData.dataList const { categories, series } = this.elementData.dataList
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
}
if(count > this.elementInfo.option.dataset.maxCount) {
this.elementInfo.option.dataset.show = false
}
lastCount = count
}
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'xAxis.data', categories) this.$set(this.ec.option, 'xAxis.data', categories)
this.$set(this.ec.option, 'series', this.dealSeriesData(series)) 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(chart) {
const option = chart.getOption()
option.series = dealSeries
// 重新setOption，使得设置的formatter生效
chart.setOption(option)
}
})
}, },
/** /**
* 处理数据 * 处理数据
...@@ -102,6 +132,37 @@ ...@@ -102,6 +132,37 @@
} }
}) })
return newData return newData
},
/**
* 处理图表的数值是否显示
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
flag = true
}
if(lastCount > count && lastCount >= maxCount && count < maxCount) {
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
const series = this.ec.option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
this.$set(this.ec.option, 'series', series)
this.$set(this.ec.option, 'dataZoom.start', event.start)
this.$set(this.ec.option, 'dataZoom.end', event.end)
}
}
} }
} }
} }
......
components/NormalLine/NormalLine.vue
View file @ a2b783d1
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js' import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js' import { svg } from '@/mixins/svg.js'
let chart = null let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default { export default {
mixins: [echartElementData], mixins: [echartElementData],
...@@ -17,12 +18,16 @@ ...@@ -17,12 +18,16 @@
ec: { ec: {
lazyLoad: true, lazyLoad: true,
option: {} option: {}
} },
labelShow: false ,// 记录当前设置的label.show的值
} }
}, },
components: { components: {
uniEcCanvas uniEcCanvas
}, },
created() {
this.labelShow = this.elementInfo.option.dataset.show
},
mounted() { mounted() {
this.$refs['normalLineCanvas'].init(this.inited) this.$refs['normalLineCanvas'].init(this.inited)
}, },
...@@ -72,13 +77,38 @@ ...@@ -72,13 +77,38 @@
chart.on('click', event => { chart.on('click', event => {
that.handleEchartsClick(event) that.handleEchartsClick(event)
}) })
chart.on('datazoom', event => {
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
})
return chart return chart
}, },
initChart() { initChart() {
// 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => {
const { categories, series } = this.elementData.dataList const { categories, series } = this.elementData.dataList
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
}
if(count > this.elementInfo.option.dataset.maxCount) {
this.elementInfo.option.dataset.show = false
}
lastCount = count
}
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'xAxis.data', categories) this.$set(this.ec.option, 'xAxis.data', categories)
this.$set(this.ec.option, 'series', this.dealSeriesData(series)) 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(chart) {
// 重新setOption，使得设置的formatter生效
chart.setOption({
series: dealSeries
})
}
})
}, },
/** /**
* 处理数据 * 处理数据
...@@ -95,7 +125,7 @@ ...@@ -95,7 +125,7 @@
formatter: val => { formatter: val => {
return that.$u.common.converFunction(that.elementInfo.option.dataset return that.$u.common.converFunction(that.elementInfo.option.dataset
.formatter, val) .formatter, val)
} },
} }
} }
return { return {
...@@ -104,6 +134,37 @@ ...@@ -104,6 +134,37 @@
} }
}) })
return newData return newData
},
/**
* 处理图表的数值是否显示
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
flag = true
}
if(lastCount > count && lastCount >= maxCount && count < maxCount) {
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
const series = this.ec.option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
this.$set(this.ec.option, 'series', series)
this.$set(this.ec.option, 'dataZoom.start', event.start)
this.$set(this.ec.option, 'dataZoom.end', event.end)
}
}
} }
} }
} }
......
components/NormalPie/NormalPie.vue
View file @ a2b783d1
...@@ -59,6 +59,10 @@ export default { ...@@ -59,6 +59,10 @@ export default {
initChart() { initChart() {
const { series } = this.elementData.dataList const { series } = this.elementData.dataList
this.$set(this.ec.option, 'series', this.dealSeriesData(series)) this.$set(this.ec.option, 'series', this.dealSeriesData(series))
if(chart) {
// 重新setOption，使得设置的formatter生效
chart.setOption(this.ec.option)
}
}, },
dealSeriesData (data) { dealSeriesData (data) {
......
components/NormalTable/NormalTable.vue
View file @ a2b783d1
<template> <template>
<view style="margin-top: 20px;"> <view class="normal-table" :style="{ transform: `scaleY(${scale}) translate(0px, ${elementInfo.height * (scale - 1) /2}px)`}">
<NormalTitle :elementInfo="elementInfo"></NormalTitle> <NormalTitle :elementInfo="elementInfo"></NormalTitle>
<scroll-view scroll-x="true" > <scroll-view scroll-x scroll-y class="scroll-view_H" :style="[tableConfigStyle]">
<view class="scroll-view_H"> <view class="table">
<u-table <view class="tr table_header" v-if="elementInfo.table.tableHeader.showHeader">
:border-width="elementInfo.table.frameWidth" <template v-for="(item, index) in elementInfo.table.column">
:border-color="elementInfo.table.frameColor" <view
:border-style="elementInfo.table.frameStyle" class="th th_style"
:bg-color="elementInfo.table.tableCell.backgroundColor" :class="[index == 0 ? 'row_fixed': '']"
:color="elementInfo.table.tableCell.titleColor" :key="index"
:font-size="$u.common.pxToRpx(elementInfo.table.tableCell.titleFontSize)" >{{item.title}}</view>
:height="elementInfo.table.tableCell.cellRowHeight" </template>
:align="elementInfo.table.tableCell.titlePostion" </view>
:th-style="headerStyle"
<view
class="tr"
v-for="(cell, cellIndex) in chartTables"
:key="cellIndex"
:class="elementInfo.table.tableCell.stripes? (cellIndex % 2 === 1 ? 'even-striped' : 'odd-striped'): null"
@tap="cellClick(cell)"
>
<view
v-for="(item, index) in elementInfo.table.column"
:key="index"
class="td td_style"
:class="[item.dataIndex == elementInfo.table.column[0].dataIndex ? 'row_fixed': '']"
> >
<u-tr v-if="elementInfo.table.tableHeader.showHeader">
<u-th v-for="(item, index) in columns" :key="index">{{item.title}}</u-th>
</u-tr>
<u-tr v-for="(cell, cellIndex) in chartTables" :key="cellIndex" @tap="cellClick(cell)">
<u-td style="width: 240rpx;" v-for="(item, index) in columns" :key="index">
<template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template> <template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
<template v-else-if="item.slots.customRender == 'picture'"> <template v-else-if="item.slots.customRender == 'picture'">
<u-image <u-image
...@@ -26,6 +33,7 @@ ...@@ -26,6 +33,7 @@
mode="aspectFit" mode="aspectFit"
:src="`${cell[item.dataIndex]}?${new Date().getTime()}`" :src="`${cell[item.dataIndex]}?${new Date().getTime()}`"
crossOrigin="anonymous" crossOrigin="anonymous"
style="width:100%"
@click="imageClick(cellIndex, item.dataIndex)" @click="imageClick(cellIndex, item.dataIndex)"
></u-image> ></u-image>
</template> </template>
...@@ -34,9 +42,8 @@ ...@@ -34,9 +42,8 @@
<template v-else-if="item.slots.customRender == 'Integer'">{{parseInt(cell[item.dataIndex])}}</template> <template v-else-if="item.slots.customRender == 'Integer'">{{parseInt(cell[item.dataIndex])}}</template>
<template v-else-if="item.slots.customRender == 'price'">{{`￥${Number(cell[item.dataIndex]).toFixed(2)}`}}</template> <template v-else-if="item.slots.customRender == 'price'">{{`￥${Number(cell[item.dataIndex]).toFixed(2)}`}}</template>
<template v-else>{{cell[item.dataIndex]}}</template> <template v-else>{{cell[item.dataIndex]}}</template>
</u-td> </view>
</u-tr> </view>
</u-table>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
...@@ -50,33 +57,46 @@ ...@@ -50,33 +57,46 @@
mixins: [echartElementData], mixins: [echartElementData],
data() { data() {
return { return {
columns: [], chartTables: [],
chartTables: [] align: {
}; left: 'start',
center: 'center',
right: 'flex-end'
}, },
mounted() { scale: 1
};
}, },
computed: { computed: {
headerStyle() { tableConfigStyle() {
const { headerRowHeight, titleColor, backgroundColor, titlePostion, titleFontSize } = this.elementInfo.table.tableHeader const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { evenColor, oddColor, backgroundColor: cellBackgroundColor, titlePostion: cellTitlePostion, titleFontSize: cellTitleFontSize, cellRowHeight, titleColor: cellTitleColor} = this.elementInfo.table.tableCell
const { headerRowHeight, titleColor: headerTitleColor, backgroundColor: headerBackgroundColor, titlePostion: headerTitlePostion, titleFontSize: headerTitleFontSize } = this.elementInfo.table.tableHeader
const cellWidth = this.elementInfo.table.column.length > 10 ? 130 : 240
return { return {
// 'lineHeight': `${this.$u.common.pxToRpx(headerRowHeight)}rpx`, '--table-width': `${cellWidth * this.elementInfo.table.column.length}rpx`,
'lineHeight': `${headerRowHeight}px`, '--cell-width': `0 0 ${cellWidth}rpx`,
'color': titleColor, '--cell--background-color': cellBackgroundColor,
'background-color': backgroundColor, '--even-color': evenColor,
'text-align': titlePostion, '--odd-color': oddColor,
'font-size': `${this.$u.common.pxToRpx(titleFontSize)}rpx` '--header-background-color': headerBackgroundColor,
} '--header-row-height': `${headerRowHeight}px`,
'--header-color': headerTitleColor,
'--header-font-size': `${this.$u.common.pxToRpx(headerTitleFontSize)}rpx`,
'--header-text-align': headerTitlePostion || 'center',
'--header-border': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
'--cell-text-align': cellTitlePostion,
'--cell-justify-content': this.align[cellTitlePostion],
'--cell-font-size': `${cellTitleFontSize || 14}px`,
'--cell-row-height': `${cellRowHeight || 30}px`,
'--cell-color': cellTitleColor
} }
}, },
},
methods: { methods: {
initChart() { initChart() {
const that = this const that = this
that.$nextTick(() => { that.$nextTick(() => {
debugger that.calculateScale()
console.log(that.elementInfo)
that.columns = that.elementInfo.table.column
that.chartTables = that.elementData.dataList.chartTables that.chartTables = that.elementData.dataList.chartTables
}) })
}, },
...@@ -88,31 +108,134 @@ ...@@ -88,31 +108,134 @@
}, },
calculateScale() { calculateScale() {
const { windowWidth } = uni.getSystemInfoSync() var query = wx.createSelectorQuery().in(this);
const { width, height } = this.reportInfo.info query.select(".normal-table").boundingClientRect(res => {
return windowWidth / width const w = res.width
const { width, height } = this.elementInfo
const scale = w / width
this.scale = scale
}).exec();
}, },
// 图片增加点击事件，查看全部图片 // 图片增加点击事件，查看全部图片
imageClick(index, key) { imageClick(index, key) {
const images = [] const images = []
var caches = uni.getStorageSync('cacheImages')
for(var i = 0; i < this.chartTables.length; i++) { for(var i = 0; i < this.chartTables.length; i++) {
const imageUrl = this.chartTables[i][key] const imageUrl = this.chartTables[i][key]
if(caches.hasOwnProperty(imageUrl)) {
images.push(caches[imageUrl])
} else {
images.push(imageUrl) images.push(imageUrl)
} }
}
uni.previewImage({ uni.previewImage({
current: index, current: index,
urls: images urls: images
}) })
},
/**
* 缓存图片数据
*/
cacheImages(key) {
var caches = uni.getStorageSync('cacheImages')
if(!caches) {
caches = {}
}
this.chartTables.forEach(item => {
// 如果包含当前url，就不再下载
const url = item[key]
if(!caches.hasOwnProperty(url)) {
uni.downloadFile({
url: url,
success: (res) => {
if(res.statusCode === 200) {
caches[url] = res.tempFilePath
uni.setStorageSync('cacheImages', caches)
} }
} }
})
}
})
}
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.scroll-view_H { .normal-table {
width: 100%; width: 100%;
height: 100%;
margin-top: 20px;
}
.scroll-view_H {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 100%;
height: 100%;
}
.table {
width: var(--table-width);
box-sizing: border-box;
background-color: var(--cell--background-color);
.table_header {
position: sticky;
top: 0;
z-index: 2;
}
.row_fixed {
position: sticky;
left: 0;
z-index: 1;
}
}
.tr {
display: flex;
flex-direction: row;
}
.th {
flex: var(--cell-width);
font-size: 28rpx;
color: $u-main-color;
padding: 10px 0px;
background-color: rgb(245, 246, 248);
}
.td{
flex: var(--cell-width);
align-self: stretch;
padding: 10px 0px ;
font-size: 28rpx;
color: $u-content-color;
display: flex;
align-items: center;
justify-content: center;
}
.th_style {
line-height: var(--header-row-height);
font-size: var(--header-font-size);
color: var(--header-color);
background-color: var(--header-background-color);
text-align: var(--header-text-align);
border-bottom: var(--header-border);
}
.td_style {
text-align: var(--cell-text-align);
justify-content: var(--cell-justify-content);
font-size: var(--cell-font-size);
line-height: var(--cell-row-height);
color: var(--cell-color);
border-bottom: var(--header-border);
}
.even-striped, .even-striped .row_fixed {
background-color: var(--even-color);
}
.odd-striped, .odd-striped .row_fixed {
background-color: var(--odd-color);
} }
</style> </style>
\ No newline at end of file
components/NormalTabs/NormalTabs.vue
View file @ a2b783d1
...@@ -59,6 +59,14 @@ ...@@ -59,6 +59,14 @@
tabsValue: '' tabsValue: ''
}; };
}, },
mounted() {
uni.$on('handlePullDownRefresh', () => {
this.initChart()
})
},
destroy() {
uni.$off('handlePullDownRefresh')
},
computed: { computed: {
tabsGroup() { tabsGroup() {
const { type, count} = this.elementInfo.option.tabs const { type, count} = this.elementInfo.option.tabs
...@@ -83,12 +91,12 @@ ...@@ -83,12 +91,12 @@
} }
}, },
methods: { methods: {
initChart() { initChart(index = 0) {
this.currentTabs = index
this.tabsValue = this.elementData.dataList.series[this.currentTabs].value this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
}, },
handleTabsChange(index) { handleTabsChange(index) {
this.currentTabs = index this.initChart(index)
this.initChart()
this.tabsValueChange() this.tabsValueChange()
}, },
handleSelectChange(e) { handleSelectChange(e) {
......
components/Table/Table.vue
View file @ a2b783d1
This diff is collapsed.
pages/details/details.vue
View file @ a2b783d1
...@@ -119,14 +119,11 @@ ...@@ -119,14 +119,11 @@
uni.$on('handleDataZoomParams', ({index, paramName, value}) => { uni.$on('handleDataZoomParams', ({index, paramName, value}) => {
if(index.length && paramName && value) { if(index.length && paramName && value) {
that.reportInfo.list = that.reportInfo.list.map(item => { that.reportInfo.list = that.reportInfo.list.map(item => {
console.log('begin item', item)
const flag = index.includes(item.id) const flag = index.includes(item.id)
if(flag && item.dataZoom) { if(flag && item.dataZoom) {
console.log('set item', item)
that.$set(item.dataZoom, 'start', value.start) that.$set(item.dataZoom, 'start', value.start)
that.$set(item.dataZoom, 'end', value.end) that.$set(item.dataZoom, 'end', value.end)
} }
console.log('after item', item)
return item return item
}) })
} }
......
pages/index/index.vue
View file @ a2b783d1
...@@ -216,6 +216,7 @@ ...@@ -216,6 +216,7 @@
const that = this const that = this
let res = await that.$u.api.getReportCharts({id: '62787b674606332538b46322'}) let res = await that.$u.api.getReportCharts({id: '62787b674606332538b46322'})
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
uni.$emit('handlePullDownRefresh')
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) {
...@@ -294,7 +295,7 @@ ...@@ -294,7 +295,7 @@
cursor: move; cursor: move;
} }
.el-fixed { .el-fixed {
position: sticky; position: fixed;
top: 0 !important; top: 0 !important;
} }
......
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