Skip to content

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

feat: 减少页面dom层级

parent 66f3b11f
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 69 deletions
pages/index/index.vue
View file @ fc407217
<template> <template>
<view <view class="viewport-wrapper" :style="[styleObject]">
class="canvas" <template v-for="(element, index) in reportData">
:style="[styleObject]" <view
> class="view-element"
<view class="viewport-wrapper" :style="{ v-if="!element.hide"
width: `${reportInfo.width * scale}px`, :key="element.id"
height: `${reportInfo.height * scale}px` :style="{
}"> width: `${element.width * scale}px`,
<template v-for="(element, index) in reportData"> height: `${element.height * scale}px`,
<view left: `${element.left * scale}px`,
class="view-element" top: `${element.top * scale}px`,
v-if="!element.hide" zIndex: index + 1
:key="element.id" }"
:style="{ >
width: `${element.width * scale}px`, <!-- 普通柱状图 -->
height: `${element.height * scale}px`, <NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
left: `${element.left * scale}px`, <!-- 普通折线图 -->
top: `${element.top * scale}px`, <NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine>
zIndex: index + 1 <!-- 横向柱状图 -->
}" <HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar>
> <!-- 折柱图 -->
<!-- 普通柱状图 --> <LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar> <!-- 仪表盘 -->
<!-- 普通折线图 --> <NormalGauge v-if="element.type == 'NormalGauge'" :elementInfo="element"></NormalGauge>
<NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine> <!-- 饼图 -->
<!-- 横向柱状图 --> <NormalPie v-if="element.type == 'NormalPie'" :elementInfo="element"></NormalPie>
<HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar> <!-- 中国地图 -->
<!-- 折柱图 --> <ChinaMap v-if="element.type == 'ChinaMap'" :elementInfo="element"></ChinaMap>
<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar> <!-- 柱状图混合地图 -->
<!-- 仪表盘 --> <BarMixMap v-if="element.type == 'BarMixMap'" :elementInfo="element"></BarMixMap>
<NormalGauge v-if="element.type == 'NormalGauge'" :elementInfo="element"></NormalGauge> <!-- 雷达图 -->
<!-- 饼图 --> <NormalRadar v-if="element.type == 'NormalRadar'" :elementInfo="element"></NormalRadar>
<NormalPie v-if="element.type == 'NormalPie'" :elementInfo="element"></NormalPie> <!-- 普通数字滚动 -->
<!-- 中国地图 --> <CountTo v-if="element.type == 'CountTo'" :elementInfo="element"></CountTo>
<ChinaMap v-if="element.type == 'ChinaMap'" :elementInfo="element"></ChinaMap> <!-- 数字滚动 -->
<!-- 柱状图混合地图 --> <NumberScroll v-if="element.type == 'NumberScroll'" :elementInfo="element"></NumberScroll>
<BarMixMap v-if="element.type == 'BarMixMap'" :elementInfo="element"></BarMixMap> <!-- 普通选项卡 -->
<!-- 雷达图 --> <NormalTabs v-if="element.type == 'NormalTabs'" :elementInfo="element"></NormalTabs>
<NormalRadar v-if="element.type == 'NormalRadar'" :elementInfo="element"></NormalRadar> <!-- 文本框 -->
<!-- 普通数字滚动 --> <BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText>
<CountTo v-if="element.type == 'CountTo'" :elementInfo="element"></CountTo> <!-- 真实时间 -->
<!-- 数字滚动 --> <RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime>
<NumberScroll v-if="element.type == 'NumberScroll'" :elementInfo="element"></NumberScroll> <!-- 普通进度条 -->
<!-- 普通选项卡 --> <NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress>
<NormalTabs v-if="element.type == 'NormalTabs'" :elementInfo="element"></NormalTabs> <!-- 普通图片 -->
<!-- 文本框 --> <NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage>
<BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText> <!-- 远程图片 -->
<!-- 真实时间 --> <RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
<RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime> <!-- 普通表格 -->
<!-- 普通进度条 --> <!-- <NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable> -->
<NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress> <Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table>
<!-- 普通图片 --> </view>
<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage> </template>
<!-- 远程图片 --> </view>
<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
<!-- 普通表格 -->
<!-- <NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable> -->
<Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table>
</view>
</template>
</view>
</view>
</template> </template>
<script> <script>
...@@ -75,9 +67,11 @@ ...@@ -75,9 +67,11 @@
computed: { computed: {
styleObject() { styleObject() {
let params = {} let params = {}
const { backgroundColor, backgroundImage } = this.reportInfo const { backgroundColor, backgroundImage, width, height } = this.reportInfo
if(backgroundImage) params = { 'background-image': `url(${backgroundImage})` } if(backgroundImage) params = { 'background-image': `url(${backgroundImage})` }
return { return {
width: `${width * this.scale}px`,
height: `${height * this.scale}px`,
'background-color': backgroundColor, 'background-color': backgroundColor,
...params ...params
} }
...@@ -90,7 +84,6 @@ ...@@ -90,7 +84,6 @@
}, },
onLoad() { onLoad() {
this.userAuthCheck() this.userAuthCheck()
this.getReportCharts()
/** /**
* 组件交互 - 参数 * 组件交互 - 参数
*/ */
...@@ -111,6 +104,7 @@ ...@@ -111,6 +104,7 @@
onUnload() { onUnload() {
// 移除监听事件 // 移除监听事件
uni.$off('handleLinkParams') uni.$off('handleLinkParams')
uni.$off('handleLinkComp')
clearInterval(this.timename) clearInterval(this.timename)
}, },
methods: { methods: {
...@@ -121,7 +115,7 @@ ...@@ -121,7 +115,7 @@
var authorized = uni.getStorageSync('authorized') var authorized = uni.getStorageSync('authorized')
if (userId) { if (userId) {
if (authorized) { if (authorized) {
this.getReportCharts()
} else { } else {
uni.reLaunch({ uni.reLaunch({
url:'../login/authorized' url:'../login/authorized'
...@@ -208,7 +202,7 @@ ...@@ -208,7 +202,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.canvas { .viewport-wrapper {
position: relative; position: relative;
height: 100%; height: 100%;
user-select: none; user-select: none;
...@@ -217,9 +211,6 @@ ...@@ -217,9 +211,6 @@
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.viewport-wrapper {
position: relative;
}
.view-element { .view-element {
position: absolute; position: absolute;
user-select: none; user-select: none;
......
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