Skip to content

E
ec-report-refactor
Commit 1f5dcf07 authored by Jenny's avatar Jenny
Browse files
Options

feat: table update

parent c1fe365c
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 55 deletions
components/NormalTable/NormalTable.vue
View file @ 1f5dcf07
<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>
<scroll-view scroll-x="true" >
<view class="scroll-view_H">
<u-table
:border-width="elementInfo.table.frameWidth"
:border-color="elementInfo.table.frameColor"
:border-style="elementInfo.table.frameStyle"
:bg-color="elementInfo.table.tableCell.backgroundColor"
:color="elementInfo.table.tableCell.titleColor"
:font-size="$u.common.pxToRpx(elementInfo.table.tableCell.titleFontSize)"
:height="elementInfo.table.tableCell.cellRowHeight"
:align="elementInfo.table.tableCell.titlePostion"
:th-style="headerStyle"
<scroll-view scroll-x scroll-y class="scroll-view_H" :style="[tableConfigStyle]">
<view
class="table"
:style="[tableStyle]"
>
<view class="tr table_header" v-if="elementInfo.table.tableHeader.showHeader">
<template v-for="(item, index) in elementInfo.table.column">
<view
class="th"
:class="[index == 0 ? 'row_fixed': '']"
:key="index"
:style="[thStyle]"
>{{item.title}}</view>
</template>
</view>
<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)"
>
<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-else-if="item.slots.customRender == 'picture'">
<u-image
:height="100"
mode="aspectFit"
:src="`${cell[item.dataIndex]}?${new Date().getTime()}`"
crossOrigin="anonymous"
@click="imageClick(cellIndex, item.dataIndex)"
></u-image>
</template>
<template v-else-if="item.slots.customRender == 'toThousands'">{{$u.common.toThousands(cell[item.dataIndex])}}</template>
<template v-else-if="item.slots.customRender == 'percentage'">{{Number(cell[item.dataIndex] * 100).toFixed(0)}}%</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>{{cell[item.dataIndex]}}</template>
</u-td>
</u-tr>
</u-table>
<view
v-for="(item, index) in elementInfo.table.column"
:key="index"
class="td"
:class="[item.dataIndex == elementInfo.table.column[0].dataIndex ? 'row_fixed': '']"
:style="[tdStyle]"
>
<template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
<template v-else-if="item.slots.customRender == 'picture'">
<u-image
:height="100"
mode="aspectFit"
:src="`${cell[item.dataIndex]}?${new Date().getTime()}`"
crossOrigin="anonymous"
style="width:100%"
@click="imageClick(cellIndex, item.dataIndex)"
></u-image>
</template>
<template v-else-if="item.slots.customRender == 'toThousands'">{{$u.common.toThousands(cell[item.dataIndex])}}</template>
<template v-else-if="item.slots.customRender == 'percentage'">{{Number(cell[item.dataIndex] * 100).toFixed(0)}}%</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>{{cell[item.dataIndex]}}</template>
</view>
</view>
</view>
</scroll-view>
</view>
......@@ -50,33 +62,67 @@
mixins: [echartElementData],
data() {
return {
columns: [],
chartTables: []
chartTables: [],
align: {
left: 'start',
center: 'center',
right: 'end'
},
scale: 1
};
},
mounted() {
},
computed: {
headerStyle() {
tableConfigStyle() {
const { evenColor, oddColor } = this.elementInfo.table.tableCell
const { headerRowHeight, titleColor, backgroundColor: headerBackgroundColor, titlePostion, titleFontSize } = this.elementInfo.table.tableHeader
return {
'--even-color': evenColor,
'--odd-color': oddColor,
'--header-background-color': headerBackgroundColor
}
},
tableStyle() {
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { backgroundColor } = this.elementInfo.table.tableCell
return {
'width': `${130 * this.elementInfo.table.column.length}rpx`,
'border-left': 'none',
'border-top': 'none',
'background-color': backgroundColor
}
},
thStyle() {
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { headerRowHeight, titleColor, backgroundColor, titlePostion, titleFontSize } = this.elementInfo.table.tableHeader
return {
// 'lineHeight': `${this.$u.common.pxToRpx(headerRowHeight)}rpx`,
'lineHeight': `${headerRowHeight}px`,
'color': titleColor,
'background-color': backgroundColor,
'font-size': `${this.$u.common.pxToRpx(titleFontSize)}rpx`,
'text-align': titlePostion || 'center',
'border-bottom': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
'border-right': 'none'
}
},
tdStyle() {
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { titlePostion, titleFontSize, cellRowHeight, titleColor } = this.elementInfo.table.tableCell
return {
'text-align': titlePostion,
'font-size': `${this.$u.common.pxToRpx(titleFontSize)}rpx`
'justify-content': this.align[titlePostion],
'font-size': `${titleFontSize || 14}px`,
'lineHeight': `${cellRowHeight || 30}px`,
'color': titleColor,
'border-bottom': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: 'none',
'border-right': 'none'
}
}
},
methods: {
initChart() {
const that = this
const that = this
that.$nextTick(() => {
debugger
console.log(that.elementInfo)
that.columns = that.elementInfo.table.column
that.calculateScale()
that.chartTables = that.elementData.dataList.chartTables
})
},
......@@ -88,31 +134,124 @@
},
calculateScale() {
const { windowWidth } = uni.getSystemInfoSync()
const { width, height } = this.reportInfo.info
return windowWidth / width
var query = wx.createSelectorQuery().in(this);
query.select(".normal-table").boundingClientRect(res => {
const w = res.width
const { width, height } = this.elementInfo
const scale = w / width
this.scale = scale
}).exec();
},
// 图片增加点击事件，查看全部图片
imageClick(index, key) {
const images = []
var caches = uni.getStorageSync('cacheImages')
for(var i = 0; i < this.chartTables.length; i++) {
const imageUrl = this.chartTables[i][key]
images.push(imageUrl)
if(caches.hasOwnProperty(imageUrl)) {
images.push(caches[imageUrl])
} else {
images.push(imageUrl)
}
}
uni.previewImage({
current: index,
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>
<style scoped lang="scss">
.scroll-view_H {
.normal-table {
width: 100%;
height: 100%;
margin-top: 20px;
}
.scroll-view_H {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100%;
}
.table {
width: 100%;
box-sizing: border-box;
.table_header {
position: sticky;
top: 0;
z-index: 2;
}
.row_fixed {
position: sticky;
left: 0;
z-index: 1;
background: var(--header-background-color);
}
}
.tr {
display: flex;
flex-direction: row;
}
.th {
flex: 0 0 130rpx;
font-size: 28rpx;
color: $u-main-color;
padding: 10px 0px;
background-color: rgb(245, 246, 248);
}
.th-large {
flex: 0 0 220rpx;
font-weight: bold;
}
.td{
flex: 0 0 130rpx;
align-self: stretch;
padding: 10px 0px ;
font-size: 28rpx;
color: $u-content-color;
display: flex;
align-items: center;
justify-content: center;
}
.td-large{
flex: 0 0 220rpx;
}
.even-striped {
background-color: var(--even-color);
}
.odd-striped {
background-color: var(--odd-color);
}
</style>
</style>
\ No newline at end of file
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