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
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) => {
uni.showLoading()
}
config.header.Authorization = vm.vuex_token
config.header.requestId = vm.$u.guid()
return config
}, (config) => {
return Promise.reject(config)
......
components/DashboardProgress/DashboardProgress.vue
View file @ a2b783d1
......@@ -36,12 +36,12 @@
inited(canvas, width, height, canvasDpr) {
var scale = 1.0
const { windowWidth } = uni.getSystemInfoSync()
if (windowWidth < 330) {
scale = 1.1
if (windowWidth < 400) {
scale = 1.25
}
chart = this.$echarts.init(canvas, null, {
width: width * scale,
height: height,
height: height * scale,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
......
components/HorizontalBar/HorizontalBar.vue
View file @ a2b783d1
......@@ -8,6 +8,7 @@
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default {
name: "HorizontalBar",
......@@ -17,12 +18,16 @@
ec: {
lazyLoad: true,
option: {}
}
},
labelShow: false // 记录当前设置的label.show的值
}
},
components: {
uniEcCanvas
},
created() {
this.labelShow = this.elementInfo.option.dataset.show
},
mounted() {
this.$refs['horizontalBarCanvas'].init(this.inited)
},
......@@ -78,17 +83,40 @@
})
chart.on('datazoom', event => {
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
})
return chart
},
initChart() {
// 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => {
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, '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}])
if(chart) {
const option = chart.getOption()
option.series = dealSeries
// 重新setOption，使得设置的formatter生效
chart.setOption(option)
}
if(preview) {
this.cacheImages(images)
}
})
},
/**
* 处理数据
......@@ -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>
......
components/LineMixBar/LineMixBar.vue
View file @ a2b783d1
......@@ -14,6 +14,7 @@
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default {
name: "LineMixBar",
......@@ -23,7 +24,8 @@
ec: {
lazyLoad: true,
option: {}
}
},
labelShow: false // 记录当前设置的label.show的值
}
},
components: {
......@@ -32,6 +34,9 @@
mounted() {
this.$refs['lineMixBarCanvas'].init(this.inited)
},
created() {
this.labelShow = this.elementInfo.option.dataset.show
},
methods: {
inited(canvas, width, height, canvasDpr) {
chart = this.$echarts.init(canvas, null, {
......@@ -84,13 +89,38 @@
chart.on('click', event => {
that.handleEchartsClick(event)
})
chart.on('datazoom', event => {
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
})
return chart
},
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, '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}])
if(chart) {
const option = chart.getOption()
option.series = dealSeries
// 重新setOption，使得设置的formatter生效
chart.setOption(option)
}
})
},
/**
* 处理数据
......@@ -125,6 +155,37 @@
}
})
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 @@
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default {
name: "Normalbar",
......@@ -18,12 +19,16 @@
ec: {
lazyLoad: true,
option: {}
}
},
labelShow: false // 记录当前设置的label.show的值
}
},
components: {
uniEcCanvas
},
created() {
this.labelShow = this.elementInfo.option.dataset.show
},
mounted() {
this.$refs['normalbarCanvas'].init(this.inited)
},
......@@ -70,13 +75,38 @@
chart.on('click', event => {
that.handleEchartsClick(event)
})
chart.on('datazoom', event => {
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
})
return chart
},
initChart() {
// 等待子组件完全挂载完成---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, '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}])
if(chart) {
const option = chart.getOption()
option.series = dealSeries
// 重新setOption，使得设置的formatter生效
chart.setOption(option)
}
})
},
/**
* 处理数据
......@@ -102,6 +132,37 @@
}
})
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 @@
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default {
mixins: [echartElementData],
......@@ -17,12 +18,16 @@
ec: {
lazyLoad: true,
option: {}
}
},
labelShow: false ,// 记录当前设置的label.show的值
}
},
components: {
uniEcCanvas
},
created() {
this.labelShow = this.elementInfo.option.dataset.show
},
mounted() {
this.$refs['normalLineCanvas'].init(this.inited)
},
......@@ -72,13 +77,38 @@
chart.on('click', event => {
that.handleEchartsClick(event)
})
chart.on('datazoom', event => {
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
})
return chart
},
initChart() {
// 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => {
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, '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}])
if(chart) {
// 重新setOption，使得设置的formatter生效
chart.setOption({
series: dealSeries
})
}
})
},
/**
* 处理数据
......@@ -95,7 +125,7 @@
formatter: val => {
return that.$u.common.converFunction(that.elementInfo.option.dataset
.formatter, val)
}
},
}
}
return {
......@@ -104,6 +134,37 @@
}
})
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 {
initChart() {
const { series } = this.elementData.dataList
this.$set(this.ec.option, 'series', this.dealSeriesData(series))
if(chart) {
// 重新setOption，使得设置的formatter生效
chart.setOption(this.ec.option)
}
},
dealSeriesData (data) {
......
components/NormalTable/NormalTable.vue
View file @ a2b783d1
<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">
<view class="tr table_header" v-if="elementInfo.table.tableHeader.showHeader">
<template v-for="(item, index) in elementInfo.table.column">
<view
class="th th_style"
:class="[index == 0 ? 'row_fixed': '']"
:key="index"
>{{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 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-else-if="item.slots.customRender == 'picture'">
<u-image
......@@ -26,6 +33,7 @@
mode="aspectFit"
:src="`${cell[item.dataIndex]}?${new Date().getTime()}`"
crossOrigin="anonymous"
style="width:100%"
@click="imageClick(cellIndex, item.dataIndex)"
></u-image>
</template>
......@@ -34,9 +42,8 @@
<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>
</view>
</view>
</scroll-view>
</view>
......@@ -50,33 +57,46 @@
mixins: [echartElementData],
data() {
return {
columns: [],
chartTables: []
};
chartTables: [],
align: {
left: 'start',
center: 'center',
right: 'flex-end'
},
mounted() {
scale: 1
};
},
computed: {
headerStyle() {
const { headerRowHeight, titleColor, backgroundColor, titlePostion, titleFontSize } = this.elementInfo.table.tableHeader
tableConfigStyle() {
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 {
// 'lineHeight': `${this.$u.common.pxToRpx(headerRowHeight)}rpx`,
'lineHeight': `${headerRowHeight}px`,
'color': titleColor,
'background-color': backgroundColor,
'text-align': titlePostion,
'font-size': `${this.$u.common.pxToRpx(titleFontSize)}rpx`
}
'--table-width': `${cellWidth * this.elementInfo.table.column.length}rpx`,
'--cell-width': `0 0 ${cellWidth}rpx`,
'--cell--background-color': cellBackgroundColor,
'--even-color': evenColor,
'--odd-color': oddColor,
'--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: {
initChart() {
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 +108,134 @@
},
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]
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: 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>
\ No newline at end of file
components/NormalTabs/NormalTabs.vue
View file @ a2b783d1
......@@ -59,6 +59,14 @@
tabsValue: ''
};
},
mounted() {
uni.$on('handlePullDownRefresh', () => {
this.initChart()
})
},
destroy() {
uni.$off('handlePullDownRefresh')
},
computed: {
tabsGroup() {
const { type, count} = this.elementInfo.option.tabs
......@@ -83,12 +91,12 @@
}
},
methods: {
initChart() {
initChart(index = 0) {
this.currentTabs = index
this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
},
handleTabsChange(index) {
this.currentTabs = index
this.initChart()
this.initChart(index)
this.tabsValueChange()
},
handleSelectChange(e) {
......
components/Table/Table.vue
View file @ a2b783d1
<template>
<view class="normal-table" :style="{ transform: `scaleY(${scale}) translate(0px, ${elementInfo.height * (scale - 1) /2}px)`}">
<view class="analysis-group" >
<NormalTitle :elementInfo="elementInfo"></NormalTitle>
<scroll-view scroll-x="true" class="scroll-view_H" >
<view
class="table"
:style="[tableStyle]"
>
<view class="tr" v-if="elementInfo.table.tableHeader.showHeader">
<view :class="[elementInfo.table.column.length > 10 ? 'th' :'th-large']" v-for="(item, index) in elementInfo.table.column" :key="index" :style="[thStyle]">{{item.title}}</view>
<scroll-view scroll-x scroll-y >
<view class="table" :style="tableStyle">
<view class="table-header">
<view :class="[index === 0 ? 'title-cell' : 'content-cell']" v-for="(item, index) in elementInfo.table.column" :key="index">
<view :class="[index === 0 ? 'column' : 'cell']" >{{ item.title }}</view>
</view>
</view>
<view class="tr" v-for="(cell, cellIndex) in chartTables" :key="cellIndex" @tap="cellClick(cell)">
<view :class="[elementInfo.table.column.length > 10 ? 'td' :'td-large']" :style="[tdStyle]" v-for="(item, index) in elementInfo.table.column" :key="index">
<template v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
<template v-else-if="item.slots.customRender == 'picture'">
<view class="table-content" :style="tableStyle">
<view class="table-content__item" v-for="(cell, cellIndex) in chartTables" :key="cellIndex" @tap="cellClick(cell)" >
<!-- <view class=""> -->
<view class="title-cell">
<view class="cell">{{ cell[elementInfo.table.column[0].dataIndex] }}</view>
</view>
<view :class="[index === 0 ? 'empty-cell' : cellIndex %2 == 1 ? 'content-cell-bg' :'content-cell']" v-for="(item, index) in elementInfo.table.column" :key="index">
<view v-if="index != 0">
<template class="cell" v-if="item.slots.customRender == 'rank'">{{index + 1}}</template>
<template class="cell" v-else-if="item.slots.customRender == 'picture'">
<u-image
:height="100"
mode="aspectFit"
......@@ -24,19 +32,75 @@
@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>
<template class="cell" v-else-if="item.slots.customRender == 'toThousands'">{{$u.common.toThousands(cell[item.dataIndex])}}</template>
<template class="cell" v-else-if="item.slots.customRender == 'percentage'">{{Number(cell[item.dataIndex] * 100).toFixed(0)}}%</template>
<template class="cell" v-else-if="item.slots.customRender == 'Integer'">{{parseInt(cell[item.dataIndex])}}</template>
<template class="cell" v-else-if="item.slots.customRender == 'price'">{{`￥${Number(cell[item.dataIndex]).toFixed(2)}`}}</template>
<template class="cell" v-else>{{cell[item.dataIndex]}}</template>
</view>
</view>
</view>
<!-- </view> -->
</view>
</view>
</scroll-view>
</view>
</template>
</template>
-->
<!-- <script>
export default {
data() {
return {
tableColumn: [
{ id: 'language', name: '语文' },
{ id: 'math', name: '数学' },
{ id: 'english', name: '英语' },
{ id: 'politics', name: '政治' },
{ id: 'biology', name: '生物' },
],
person: ['宋江', '卢俊义', '吴用', '公孙胜', '关胜', '林冲', '花容', '柴进', '李逵', '宋江', '卢俊义', '吴用', '公孙胜', '关胜', '林冲', '花容', '柴进', '李逵'],
min: 60,
max: 100,
titleWidth: 200,
contentWidth: 250
}
},
computed: {
tableStyle() {
const width = this.titleWidth + this.tableColumn.length * this.contentWidth;
return `width: ${width}rpx`;
},
tableData() {
const tableData = this.person.map((name, index) => {
const obj = this.tableColumn.reduce((result, item) => {
result[item.id] = Math.ceil(Math.random() * (this.max - this.min) + this.min);
return result;
}, {});
return {
id: String(index + 1),
name,
...obj
};
});
console.log(tableData);
// [{"id":1,"name":"宋江","language":90,"math":69,"english":98,"politics":89,"biology":85}]
return tableData;
}
}
}
</script>
-->
<script>
import echartElementData from '@/mixins/echartElementData.js'
......@@ -58,51 +122,23 @@
tableStyle() {
const { frameStyle, frameWidth, frameColor, bordered } = this.elementInfo.table
const { backgroundColor } = this.elementInfo.table.tableCell
return {
'width': `${110 * this.elementInfo.table.column.length}rpx`,
'border-left': bordered ? `${frameStyle || 'solid'} ${frameWidth || 1}px ${frameColor || '#e4e7ed'}`: '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': `${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,
'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'
}
const width = this.elementInfo.table.column.length * 130;
return `width: ${width}rpx`;
}
},
methods: {
initChart() {
const that = this
that.$nextTick(() => {
that.calculateScale()
// that.calculateScale()
that.chartTables = that.elementData.dataList.chartTables
that.elementInfo.table.column.forEach(item => {
if(item.slots.customRender === 'picture') {
// that.cacheImages(item.dataIndex)
}
})
console.log(that.chartTables)
console.log(that.elementInfo.table.column)
})
},
cellClick(e) {
......@@ -169,58 +205,108 @@
}
</script>
<style scoped lang="scss">
.normal-table {
width: 100%;
<style lang="scss" scoped>
.analysis-group {
margin-top: 20px;
width: 100vw;
height: 100%;
scroll-view {
width: 100vw;
height: 45vh;
}
}
.scroll-view_H {
display: flex;
flex-wrap: nowrap;
}
$title-width: 130rpx;
$content-width: 130rpx;
$border-color: #f6f6f6;
$border: 1rpx solid $border-color;
$white: #FFFFFF;
$title-color: #f6f6f6;
.table {
width: 100%;
box-sizing: border-box;
}
.tr {
display: flex;
flex-direction: row;
}
.th {
flex: 0 0 110rpx;
font-size: 28rpx;
color: $u-main-color;
padding: 10px 0px;
background-color: rgb(245, 246, 248);
}
.th-large {
flex: 0 0 220rpx;
font-size: 28rpx;
color: $u-main-color;
font-weight: bold;
padding: 10px 0px;
background-color: rgb(245, 246, 248);
}
.td{
flex: 0 0 110rpx;
align-self: stretch;
padding: 10px 0px ;
font-size: 28rpx;
color: $u-content-color;
display: flex;
display: table;
.table-header {
background-color: $title-color;
position: sticky;
top: 0;
z-index: 2;
.title-cell {
// background-image: linear-gradient(to top right, transparent 48%, $border-color, transparent 52%);
border: $border;
position: relative;
position: sticky;
left: 0;
z-index: 1;
.row {
position: absolute;
right: 10rpx;
top: 5rpx;
}
.column {
position: absolute;
left: 30rpx;
bottom: 15rpx;
font-size: 25rpx;
}
}
.content-cell {
// border-top: $border;
// border-bottom: $border;
// border-right: $border;
}
}
.table-content {
&__item {
display: table-row;
.title-cell {
// border-left: $border;
// border-right: $border;
border-bottom: $border;
position: sticky;
left: 0;
z-index: 1;
align-items: center;
text-align: center;
justify-content: center;
}
.td-large{
flex: 0 0 220rpx;
align-self: stretch;
}
.content-cell {
border-bottom: $border;
// border-right: $border;
text-align: center;
font-size: 20rpx;
}
}
}
.title-cell {
display: table-cell;
width: $title-width;
background-color: $title-color;
align-items: center;
justify-content: center;
text-align: center;
}
.content-cell-bg {
display: table-cell;
width: $content-width;
text-align: center;
font-size: 20rpx;
background-color:$title-color ;
}
.empty-cell {
width: 0px;
}
.content-cell {
display: table-cell;
width: $content-width;
text-align: center;
font-size: 20rpx;
}
.cell {
padding: 10px 0px ;
font-size: 28rpx;
color: $u-content-color;
display: flex;
font-size: 20rpx;
align-items: center;
justify-content: center;
text-align: center;
}
}
</style>
pages/details/details.vue
View file @ a2b783d1
......@@ -119,14 +119,11 @@
uni.$on('handleDataZoomParams', ({index, paramName, value}) => {
if(index.length && paramName && value) {
that.reportInfo.list = that.reportInfo.list.map(item => {
console.log('begin item', item)
const flag = index.includes(item.id)
if(flag && item.dataZoom) {
console.log('set item', item)
that.$set(item.dataZoom, 'start', value.start)
that.$set(item.dataZoom, 'end', value.end)
}
console.log('after item', item)
return item
})
}
......
pages/index/index.vue
View file @ a2b783d1
......@@ -216,6 +216,7 @@
const that = this
let res = await that.$u.api.getReportCharts({id: '62787b674606332538b46322'})
uni.stopPullDownRefresh()
uni.$emit('handlePullDownRefresh')
const { Status, Result: { info, list } } = res.data
if (Status === 'true') {
if(info.dataUrl) {
......@@ -294,7 +295,7 @@
cursor: move;
}
.el-fixed {
position: sticky;
position: fixed;
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