Commit 9dcef732 authored by peco's avatar peco

feat:进度条

parent 4cfcbebd
<template>
<view class="container">
<u-line-progress
class="u-line"
v-if="elementInfo.option.progress.type === 'line'"
:style="{'width': elementInfo.width + 'rpx'}"
:height="elementInfo.option.progress.height"
:active-color="elementInfo.option.progress.strokeColor"
:inactive-color="elementInfo.option.progress.trailColor"
:round="elementInfo.option.progress.strokeLinecap == 'round' ? true : false"
:percent="elementInfo.data.dataList.endVal"
:show-percent="elementInfo.option.progress.showInfo">
</u-line-progress>
<u-circle-progress
class="u-circle"
v-if="elementInfo.option.progress.type === 'circle'"
:width="elementInfo.option.progress.width"
:border-width="elementInfo.option.progress.strokeWidth"
:active-color="elementInfo.option.progress.strokeColor"
:inactive-color="elementInfo.option.progress.trailColor"
:percent="elementInfo.data.dataList.endVal"
:bg-color="00000000">
<view class="u-progress-text">{{elementInfo.data.dataList.endVal}}%</view>
</u-circle-progress>
</view>
</template>
<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
import * as echarts from '@/components/uni-ec-canvas/echarts'
import echartElementData from '@/mixins/echartElementData.js'
let chart = null
export default {
name:"NormalProgress",
mixins: [echartElementData],
data() {
return {
};
},
onReady () {
},
components: {
uniEcCanvas
},
methods: {
}
}
</script>
<style>
.container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.u-line {
align-self: center;
}
.u-circle {
align-self: center;
}
.u-progress-text {
font-size: 40rpx;
font-weight: bold;
color: white;
}
</style>
\ No newline at end of file
...@@ -28,6 +28,8 @@ ...@@ -28,6 +28,8 @@
<BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText> <BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText>
<!-- 真实时间 --> <!-- 真实时间 -->
<RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime> <RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime>
<!-- 普通进度条 -->
<NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress>
</view> </view>
</view> </view>
</template> </template>
...@@ -94,7 +96,7 @@ ...@@ -94,7 +96,7 @@
}, },
async getReportList() { async getReportList() {
let res = await this.$u.api.getReportList({id: '61c424a4c06bff0ce05d9a53'}) let res = await this.$u.api.getReportList({id: '61c424a4c06bff0ce05d9a53'})
const { Status, Result } = res.data const { Status, Result } = res.data
if (Status === 'true') { if (Status === 'true') {
this.reportInfo = Result.info this.reportInfo = Result.info
......
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