Skip to content

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

feat: canvas 画布坐标显示

parent 84475c0a
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 194 deletions
components/BarMixMap/BarMixMap.vue
View file @ 252e0a04
<template> <template>
<view> <uni-ec-canvas
<uni-ec-canvas class="uni-ec-canvas"
class="uni-ec-canvas" id="bar-mix-map"
id="bar-mix-map" ref="barMixMapCanvas"
ref="barMixMapCanvas" canvas-id="bar-mix-map-chart"
canvas-id="bar-mix-map-chart" :ec="ec"
:ec="ec" ></uni-ec-canvas>
:style="[elStyleObject]"
></uni-ec-canvas>
</view>
</template> </template>
<script> <script>
......
components/ChinaMap/ChinaMap.vue
View file @ 252e0a04
<template> <template>
<view> <uni-ec-canvas
<uni-ec-canvas class="uni-ec-canvas"
class="uni-ec-canvas" id="china-map"
id="china-map" ref="chinaMapCanvas"
ref="chinaMapCanvas" canvas-id="china-map-chart"
canvas-id="china-map-chart" :ec="ec"
:ec="ec" ></uni-ec-canvas>
:style="[elStyleObject]"
></uni-ec-canvas>
</view>
</template> </template>
<script> <script>
......
components/DashboardProgress/DashboardProgress.vue
View file @ 252e0a04
<template> <template>
<view> <uni-ec-canvas
<uni-ec-canvas class="uni-ec-canvas"
class="uni-ec-canvas" id="dashboard-progress"
id="dashboard-progress"
ref="dashboardProgressCanvas" ref="dashboardProgressCanvas"
canvas-id="dashboard-progress-chart" canvas-id="dashboard-progress-chart"
:ec="ec" :ec="ec"
:style="[elStyleObject]" ></uni-ec-canvas>
></uni-ec-canvas>
</view>
</template> </template>
<script> <script>
......
components/HorizontalBar/HorizontalBar.vue
View file @ 252e0a04
<template> <template>
<view> <uni-ec-canvas
<uni-ec-canvas class="uni-ec-canvas"
class="uni-ec-canvas" id="horizontal-bar"
id="horizontal-bar" ref="horizontalBarCanvas"
ref="horizontalBarCanvas" canvas-id="horizontal-bar-chart"
canvas-id="horizontal-bar-chart" :ec="ec"
:ec="ec" ></uni-ec-canvas>
:style="[elStyleObject]"
></uni-ec-canvas>
</view>
</template> </template>
<script> <script>
......
components/LineMixBar/LineMixBar.vue
View file @ 252e0a04
<template> <template>
<view> <uni-ec-canvas
<uni-ec-canvas class="uni-ec-canvas"
class="uni-ec-canvas" id="line-mix-bar"
id="line-mix-bar" ref="lineMixBarCanvas"
ref="lineMixBarCanvas" canvas-id="line-mix-bar-chart"
canvas-id="line-mix-bar-chart" :ec="ec"
:ec="ec" ></uni-ec-canvas>
:style="[elStyleObject]"
></uni-ec-canvas>
</view>
</template> </template>
<script> <script>
......
components/NormalBar/NormalBar.vue
View file @ 252e0a04
<template> <template>
<view> <uni-ec-canvas
<uni-ec-canvas class="uni-ec-canvas"
class="uni-ec-canvas" id="normal-bar"
id="normal-bar" ref="normalbarCanvas"
ref="normalbarCanvas" canvas-id="normal-bar-chart"
canvas-id="normal-bar-chart" :ec="ec"
:ec="ec" ></uni-ec-canvas>
:style="[elStyleObject]"
></uni-ec-canvas>
</view>
</template> </template>
<script> <script>
......
components/NormalGauge/NormalGauge.vue
View file @ 252e0a04
<template> <template>
<view> <uni-ec-canvas
<uni-ec-canvas class="uni-ec-canvas"
class="uni-ec-canvas" id="normal-gauge"
id="normal-gauge" ref="normalGaugeCanvas"
ref="normalGaugeCanvas" canvas-id="normal-gauge-chart"
canvas-id="normal-gauge-chart" :ec="ec"
:ec="ec" ></uni-ec-canvas>
:style="[elStyleObject]"
></uni-ec-canvas>
</view>
</template> </template>
<script> <script>
......
components/NormalLine/NormalLine.vue
View file @ 252e0a04
<template> <template>
<view> <uni-ec-canvas
<uni-ec-canvas class="uni-ec-canvas"
class="uni-ec-canvas" id="normal-line"
id="normal-line" ref="normalLineCanvas"
ref="normalLineCanvas" canvas-id="normal-line-chart"
canvas-id="normal-line-chart" :ec="ec"
:ec="ec" ></uni-ec-canvas>
:style="[elStyleObject]"
></uni-ec-canvas>
</view>
</template> </template>
<script> <script>
......
components/NormalPie/NormalPie.vue
View file @ 252e0a04
<template> <template>
<view> <uni-ec-canvas
<uni-ec-canvas class="uni-ec-canvas"
class="uni-ec-canvas" id="normal-pie"
id="normal-pie" ref="normalPieCanvas"
ref="normalPieCanvas" canvas-id="normal-pie-chart"
canvas-id="normal-pie-chart" :ec="ec"
:ec="ec" ></uni-ec-canvas>
:style="[elStyleObject]"
></uni-ec-canvas>
</view>
</template> </template>
<script> <script>
......
components/NormalProgress/NormalProgress.vue
View file @ 252e0a04
<template> <template>
<view class="container"> <view class="container">
<u-line-progress <u-line-progress
class="u-line" class="u-line"
v-if="elementInfo.option.progress.type === 'line'" v-if="elementInfo.option.progress.type === 'line'"
:style="{'width': elementInfo.width + 'rpx'}" :style="{'width': elementInfo.width + 'rpx'}"
:height="elementInfo.option.progress.height" :height="elementInfo.option.progress.height"
:active-color="elementInfo.option.progress.strokeColor" :active-color="elementInfo.option.progress.strokeColor"
:inactive-color="elementInfo.option.progress.trailColor" :inactive-color="elementInfo.option.progress.trailColor"
:round="elementInfo.option.progress.strokeLinecap == 'round' ? true : false" :round="elementInfo.option.progress.strokeLinecap == 'round' ? true : false"
:percent="elementInfo.data.dataList.endVal" :percent="elementInfo.data.dataList.endVal"
:show-percent="elementInfo.option.progress.showInfo"> :show-percent="elementInfo.option.progress.showInfo"
</u-line-progress> >
<u-circle-progress </u-line-progress>
class="u-circle" <u-circle-progress
v-if="elementInfo.option.progress.type === 'circle'" class="u-circle"
:width="elementInfo.option.progress.width" v-if="elementInfo.option.progress.type === 'circle'"
:border-width="elementInfo.option.progress.strokeWidth" :width="elementInfo.option.progress.width"
:active-color="elementInfo.option.progress.strokeColor" :border-width="elementInfo.option.progress.strokeWidth"
:inactive-color="elementInfo.option.progress.trailColor" :active-color="elementInfo.option.progress.strokeColor"
:percent="elementInfo.data.dataList.endVal" :inactive-color="elementInfo.option.progress.trailColor"
:bg-color="00000000"> :percent="elementInfo.data.dataList.endVal"
<view class="u-progress-text">{{elementInfo.data.dataList.endVal}}%</view> :bg-color="00000000"
</u-circle-progress> >
<DashboardProgress v-if="elementInfo.option.progress.type === 'dashboard'" :elementInfo="elementInfo"></DashboardProgress> <view class="u-progress-text">{{elementInfo.data.dataList.endVal}}%</view>
</u-circle-progress>
<DashboardProgress style="height: 100%;" v-if="elementInfo.option.progress.type === 'dashboard'" :elementInfo="elementInfo"></DashboardProgress>
</view> </view>
</template> </template>
...@@ -43,21 +45,22 @@ export default { ...@@ -43,21 +45,22 @@ export default {
</script> </script>
<style> <style>
.container { .container {
width: 100%; width: 100%;
display: flex; height: 100%;
flex-direction: column; display: flex;
justify-content: center; flex-direction: column;
} justify-content: center;
.u-line { }
align-self: center; .u-line {
} align-self: center;
.u-circle { }
align-self: center; .u-circle {
} align-self: center;
.u-progress-text { }
font-size: 40rpx; .u-progress-text {
font-weight: bold; font-size: 40rpx;
color: white; font-weight: bold;
} color: white;
}
</style> </style>
\ No newline at end of file
components/NormalRadar/NormalRadar.vue
View file @ 252e0a04
<template> <template>
<view> <uni-ec-canvas
<uni-ec-canvas class="uni-ec-canvas"
class="uni-ec-canvas" id="normalra-dar"
id="normalra-dar" ref="normalRadarCanvas"
ref="normalRadarCanvas" canvas-id="normalra-dar-chart"
canvas-id="normalra-dar-chart" :ec="ec"
:ec="ec" ></uni-ec-canvas>
:style="[elStyleObject]"
></uni-ec-canvas>
</view>
</template> </template>
<script> <script>
......
mixins/echartElementData.js
View file @ 252e0a04
...@@ -11,16 +11,6 @@ export default { ...@@ -11,16 +11,6 @@ export default {
required: true required: true
} }
}, },
computed: {
elStyleObject() {
const { windowWidth } = uni.getSystemInfoSync()
const { width, height } = this.elementInfo
return {
'width': `${width > windowWidth ? '100%' : width + 'px'}`,
'height': `${width > windowWidth ? height / width * windowWidth : height}px`
}
}
},
methods: { methods: {
/** /**
* 静态数据 * 静态数据
......
pages/index/index.vue
View file @ 252e0a04
...@@ -3,44 +3,59 @@ ...@@ -3,44 +3,59 @@
class="canvas" class="canvas"
:style="[styleObject]" :style="[styleObject]"
> >
<view v-for="element in reportData" :key="item.id"> <view class="viewport-wrapper" :style="{
<template v-if="!element.hide"> width: `${reportInfo.width * scale}px`,
<!-- 普通柱状图 --> height: `${reportInfo.height * scale}px`
<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar> }">
<!-- 普通折线图 --> <template v-for="(element, index) in reportData">
<NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine> <view
<!-- 横向柱状图 --> class="view-element"
<HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar> v-if="!element.hide"
<!-- 折柱图 --> :key="element.id"
<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar> :style="{
<!-- 仪表盘 --> width: `${element.width * scale}px`,
<NormalGauge v-if="element.type == 'NormalGauge'" :elementInfo="element"></NormalGauge> height: `${element.height * scale}px`,
<!-- 饼图 --> transform: `translate(${element.left * scale}px, ${element.top * scale}px)`,
<NormalPie v-if="element.type == 'NormalPie'" :elementInfo="element"></NormalPie> zIndex: index + 1
<!-- 中国地图 --> }"
<ChinaMap v-if="element.type == 'ChinaMap'" :elementInfo="element"></ChinaMap> >
<!-- 柱状图混合地图 --> <!-- 普通柱状图 -->
<BarMixMap v-if="element.type == 'BarMixMap'" :elementInfo="element"></BarMixMap> <NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
<!-- 雷达图 --> <!-- 普通折线图 -->
<NormalRadar v-if="element.type == 'NormalRadar'" :elementInfo="element"></NormalRadar> <NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine>
<!-- 普通数字滚动 --> <!-- 横向柱状图 -->
<CountTo v-if="element.type == 'CountTo'" :elementInfo="element"></CountTo> <HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar>
<!-- 数字滚动 --> <!-- 折柱图 -->
<NumberScroll v-if="element.type == 'NumberScroll'" :elementInfo="element"></NumberScroll> <LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
<!-- 普通选项卡 --> <!-- 仪表盘 -->
<NormalTabs v-if="element.type == 'NormalTabs'" :elementInfo="element"></NormalTabs> <NormalGauge v-if="element.type == 'NormalGauge'" :elementInfo="element"></NormalGauge>
<!-- 文本框 --> <!-- 饼图 -->
<BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText> <NormalPie v-if="element.type == 'NormalPie'" :elementInfo="element"></NormalPie>
<!-- 真实时间 --> <!-- 中国地图 -->
<RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime> <ChinaMap v-if="element.type == 'ChinaMap'" :elementInfo="element"></ChinaMap>
<!-- 普通进度条 --> <!-- 柱状图混合地图 -->
<NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress> <BarMixMap v-if="element.type == 'BarMixMap'" :elementInfo="element"></BarMixMap>
<!-- 普通图片 --> <!-- 雷达图 -->
<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage> <NormalRadar v-if="element.type == 'NormalRadar'" :elementInfo="element"></NormalRadar>
<!-- 远程图片 --> <!-- 普通数字滚动 -->
<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage> <CountTo v-if="element.type == 'CountTo'" :elementInfo="element"></CountTo>
<!-- 普通表格 --> <!-- 数字滚动 -->
<NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable> <NumberScroll v-if="element.type == 'NumberScroll'" :elementInfo="element"></NumberScroll>
<!-- 普通选项卡 -->
<NormalTabs v-if="element.type == 'NormalTabs'" :elementInfo="element"></NormalTabs>
<!-- 文本框 -->
<BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText>
<!-- 真实时间 -->
<RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime>
<!-- 普通进度条 -->
<NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress>
<!-- 普通图片 -->
<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage>
<!-- 远程图片 -->
<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
<!-- 普通表格 -->
<NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable>
</view>
</template> </template>
</view> </view>
</view> </view>
...@@ -52,7 +67,7 @@ ...@@ -52,7 +67,7 @@
return { return {
reportInfo: {}, reportInfo: {},
reportData: [], reportData: [],
timer: null timename: null
} }
}, },
computed: { computed: {
...@@ -64,6 +79,11 @@ ...@@ -64,6 +79,11 @@
'background-color': backgroundColor, 'background-color': backgroundColor,
...params ...params
} }
},
scale() {
const { windowWidth } = uni.getSystemInfoSync()
const { width, height } = this.reportInfo
return windowWidth / width
} }
}, },
onLoad() { onLoad() {
...@@ -89,7 +109,7 @@ ...@@ -89,7 +109,7 @@
onUnload() { onUnload() {
// 移除监听事件 // 移除监听事件
uni.$off('handleLinkParams') uni.$off('handleLinkParams')
clearInterval(this.timer) clearInterval(this.timename)
}, },
methods: { methods: {
//检查是否登录 //检查是否登录
...@@ -127,14 +147,14 @@ ...@@ -127,14 +147,14 @@
* 获取页面报表配置 * 获取页面报表配置
*/ */
async getReportList() { async getReportList() {
clearInterval(this.timer) clearInterval(this.timename)
let res = await this.$u.api.getReportList({id: '61cd2ba1c06bffbdae442c4f'}) let res = await this.$u.api.getReportList({id: '61cd2ba1c06bffbdae442c4f'})
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) {
this.getGlobalData(info) this.getGlobalData(info)
if(info.dataPollingInterval) { if(info.dataPollingInterval) {
this.timer = setInterval(() => { this.timename = setInterval(() => {
this.getGlobalData(info) this.getGlobalData(info)
}, parseInt(info.dataPollingInterval) * 1000) }, parseInt(info.dataPollingInterval) * 1000)
} }
...@@ -186,11 +206,23 @@ ...@@ -186,11 +206,23 @@
.canvas { .canvas {
position: relative; position: relative;
height: 100%; height: 100%;
padding: 20rpx;
user-select: none; user-select: none;
overflow: auto; overflow: auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.viewport-wrapper {
position: relative;
}
.view-element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
will-change: transform;
user-select: none;
cursor: move;
}
</style> </style>
static/style/common.scss
View file @ 252e0a04
...@@ -24,7 +24,6 @@ ...@@ -24,7 +24,6 @@
.uni-ec-canvas{ .uni-ec-canvas{
width: 100%; width: 100%;
height: 750rpx; height: 100%;
display:block; display:block;
margin: 20rpx auto;
} }
\ 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