Skip to content

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

feat: table update

parent c1fe365c
Show whitespace changes
Inline Side-by-side
Showing with 194 additions and 55 deletions
components/NormalTable/NormalTable.vue
View file @ 1f5dcf07
<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
<u-table class="table"
:border-width="elementInfo.table.frameWidth" :style="[tableStyle]"
:border-color="elementInfo.table.frameColor" >
:border-style="elementInfo.table.frameStyle" <view class="tr table_header" v-if="elementInfo.table.tableHeader.showHeader">
:bg-color="elementInfo.table.tableCell.backgroundColor" <template v-for="(item, index) in elementInfo.table.column">
:color="elementInfo.table.tableCell.titleColor" <view
:font-size="$u.common.pxToRpx(elementInfo.table.tableCell.titleFontSize)" class="th"
:height="elementInfo.table.tableCell.cellRowHeight" :class="[index == 0 ? 'row_fixed': '']"
:align="elementInfo.table.tableCell.titlePostion" :key="index"
:th-style="headerStyle" :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)"
>
<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]"
> >
<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 +38,7 @@ ...@@ -26,6 +38,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 +47,8 @@ ...@@ -34,9 +47,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,23 +62,59 @@ ...@@ -50,23 +62,59 @@
mixins: [echartElementData], mixins: [echartElementData],
data() { data() {
return { return {
columns: [], chartTables: [],
chartTables: [] align: {
}; left: 'start',
center: 'center',
right: 'end'
}, },
mounted() { scale: 1
};
}, },
computed: { 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 const { headerRowHeight, titleColor, backgroundColor, titlePostion, titleFontSize } = this.elementInfo.table.tableHeader
return { return {
// 'lineHeight': `${this.$u.common.pxToRpx(headerRowHeight)}rpx`,
'lineHeight': `${headerRowHeight}px`, 'lineHeight': `${headerRowHeight}px`,
'color': titleColor, 'color': titleColor,
'background-color': backgroundColor, '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, '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'
} }
} }
}, },
...@@ -74,9 +122,7 @@ ...@@ -74,9 +122,7 @@
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 +134,124 @@ ...@@ -88,31 +134,124 @@
}, },
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: 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