|
|
|
|
@ -47,6 +47,7 @@
|
|
|
|
|
bold |
|
|
|
|
font-size="24" |
|
|
|
|
color="#071437" |
|
|
|
|
class="number" |
|
|
|
|
></u-count-to> |
|
|
|
|
<view class="">任务数量</view> |
|
|
|
|
</view> |
|
|
|
|
@ -82,31 +83,31 @@
|
|
|
|
|
:opts="opts" |
|
|
|
|
:chartData="chartData" |
|
|
|
|
:canvas2d="true" |
|
|
|
|
style="height: 144px" |
|
|
|
|
style="height: 288rpx" |
|
|
|
|
></qiun-data-charts> |
|
|
|
|
<view class="wd-flex" style="gap: 12px; flex-wrap: wrap"> |
|
|
|
|
<view class="wd-flex" style="gap: 24rpx; flex-wrap: wrap"> |
|
|
|
|
<view |
|
|
|
|
class="wd-flex wd-flex-col wd-flex-center" |
|
|
|
|
v-for="item in detail.legendData" |
|
|
|
|
:key="item" |
|
|
|
|
style=" |
|
|
|
|
border: 1px solid #f9f9f9; |
|
|
|
|
width: calc(100% / 3 - 8px); |
|
|
|
|
padding: 12px; |
|
|
|
|
gap: 4px; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
border: 2rpx solid #f9f9f9; |
|
|
|
|
width: calc(100% / 3 - 16rpx); |
|
|
|
|
padding: 24rpx; |
|
|
|
|
gap: 8rpx; |
|
|
|
|
border-radius: 8rpx; |
|
|
|
|
" |
|
|
|
|
> |
|
|
|
|
<view class="wd-flex wd-flex-col" style="gap: 4px"> |
|
|
|
|
<view class="wd-flex wd-flex-col" style="gap: 8rpx"> |
|
|
|
|
<view |
|
|
|
|
class="wd-flex" |
|
|
|
|
style="align-items: center; gap: 4px" |
|
|
|
|
style="align-items: center; gap: 8rpx" |
|
|
|
|
> |
|
|
|
|
<view |
|
|
|
|
:style="{ |
|
|
|
|
width: '8px', |
|
|
|
|
height: '4px', |
|
|
|
|
borderRadius: '4px', |
|
|
|
|
width: '16rpx', |
|
|
|
|
height: '8rpx', |
|
|
|
|
borderRadius: '8rpx', |
|
|
|
|
backgroundColor: item.color |
|
|
|
|
}" |
|
|
|
|
></view> |
|
|
|
|
@ -120,7 +121,7 @@
|
|
|
|
|
font-size="16" |
|
|
|
|
color="#071437" |
|
|
|
|
></u-count-to> |
|
|
|
|
% |
|
|
|
|
<text class="number">%</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -153,7 +154,11 @@
|
|
|
|
|
class="name" |
|
|
|
|
:style="{ |
|
|
|
|
color: |
|
|
|
|
queryParams.type == item.type ? '#071437' : '#78829d' |
|
|
|
|
queryParams.type == item.type |
|
|
|
|
? '#071437' |
|
|
|
|
: '#78829d', |
|
|
|
|
fontWeight: |
|
|
|
|
queryParams.type == item.type ? '800' : 'normal' |
|
|
|
|
}" |
|
|
|
|
> |
|
|
|
|
{{ item.name }} |
|
|
|
|
@ -169,14 +174,14 @@
|
|
|
|
|
style="justify-content: space-between; padding: 12px" |
|
|
|
|
> |
|
|
|
|
<view class="wd-font-800">{{ item.name }}</view> |
|
|
|
|
<view class="wd-font-800" style="color: #ff6f1e"> |
|
|
|
|
<view class="wd-font-800" style="color: #17c653"> |
|
|
|
|
<view> |
|
|
|
|
<u-count-to |
|
|
|
|
:start-val="0" |
|
|
|
|
:end-val="item.count" |
|
|
|
|
bold |
|
|
|
|
font-size="14" |
|
|
|
|
color="#FF6F1E" |
|
|
|
|
color="#17C653" |
|
|
|
|
></u-count-to> |
|
|
|
|
<text>{{ queryParams.type == 1 ? '天' : '次' }}</text> |
|
|
|
|
</view> |
|
|
|
|
@ -288,9 +293,11 @@ export default {
|
|
|
|
|
this.detail = res.data |
|
|
|
|
let curIndex = 0 |
|
|
|
|
const colorMap = [] |
|
|
|
|
const split = 1 / this.detail.completionRate.length |
|
|
|
|
const data = this.detail.completionRate.map((item, index) => { |
|
|
|
|
const color = `rgba(4, 180, 64,${1 - split * (index + 1)})` |
|
|
|
|
const color = this.getGradientColor( |
|
|
|
|
index, |
|
|
|
|
this.detail.completionRate.length |
|
|
|
|
) |
|
|
|
|
const res = { |
|
|
|
|
...item, |
|
|
|
|
color |
|
|
|
|
@ -335,7 +342,8 @@ export default {
|
|
|
|
|
name: `${max}%`, |
|
|
|
|
fontSize: 24, |
|
|
|
|
color: '#071437', |
|
|
|
|
fontWeight: 'bold' |
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
fontFamily: 'Tahoma' |
|
|
|
|
}, |
|
|
|
|
subtitle: { |
|
|
|
|
name: '完成率', |
|
|
|
|
@ -349,7 +357,8 @@ export default {
|
|
|
|
|
offsetAngle: 90, |
|
|
|
|
labelWidth: 15, |
|
|
|
|
border: false, |
|
|
|
|
borderColor: '#FFFFFF', |
|
|
|
|
borderColor: '#F9F9F9', |
|
|
|
|
borderWidth: 0.5, |
|
|
|
|
linearType: 'none' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -398,6 +407,10 @@ export default {
|
|
|
|
|
// 然后截取前两位小数 |
|
|
|
|
let realVal = tempVal.substring(0, tempVal.length - 1) |
|
|
|
|
return realVal |
|
|
|
|
}, |
|
|
|
|
getGradientColor(index, total) { |
|
|
|
|
const opacity = 1 - index / total + 0.1 |
|
|
|
|
return `rgba(4, 180, 64, ${opacity})` |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -407,6 +420,13 @@ export default {
|
|
|
|
|
.view-container { |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
.number { |
|
|
|
|
font-family: 'Tahoma'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::v-deep .u-count-num { |
|
|
|
|
font-family: 'Tahoma'; |
|
|
|
|
} |
|
|
|
|
.view { |
|
|
|
|
padding: 0 24rpx; |
|
|
|
|
padding-bottom: 24rpx; |
|
|
|
|
@ -441,7 +461,6 @@ export default {
|
|
|
|
|
.name { |
|
|
|
|
z-index: 2; |
|
|
|
|
position: inherit; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
&:first-child::before { |
|
|
|
|
content: ''; |
|
|
|
|
|
