You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
564 lines
12 KiB
564 lines
12 KiB
<template> |
|
<view class="page"> |
|
<view class=""> |
|
<view class="pure_top"> |
|
|
|
</view> |
|
<view class="calendar"> |
|
<view class="dates"> |
|
<picker mode="date" fields="year" @change="date($event)"> |
|
<view>{{year}}</view> |
|
</picker> |
|
<text>|</text> |
|
<view class=""> |
|
8.25 |
|
</view> |
|
</view> |
|
<view class="monthbox" > |
|
<view class="month" v-for="(item,key) in month" :key="key"> |
|
{{item}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="taskbox"> |
|
<view class="itembox"> |
|
<view class="top"> |
|
<view class="left"> |
|
<img src="@/static/4412.png" alt=""> |
|
<view class=""> |
|
<text>xx救援站任务总数</text><text>20</text> |
|
</view> |
|
</view> |
|
<view class="right"> |
|
<view style="margin-right: 10rpx;">完成率</view> |
|
|
|
<view class=""> |
|
60% |
|
</view> |
|
</view> |
|
</view> |
|
<view class="charts-box" style="display: flex;"> |
|
<img src="@/static/dadui/10.png" alt=""> |
|
<view style="width: 50%;"> |
|
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" /> |
|
</view> |
|
<view style="width: 50%; display: flex;justify-content: center;align-items: center;flex-direction: column;"> |
|
<view class="tagbox"> |
|
<view class="tag" :style="'background:'+opts.color[0]+';'"> |
|
|
|
</view> |
|
<text>上级指派-------9个</text> |
|
</view> |
|
<view class="tagbox"> |
|
<view class="tag" :style="'background:'+opts.color[1]+';'"> |
|
|
|
</view> |
|
<text>上级指派-------9个</text> |
|
</view> |
|
<view class="tagbox"> |
|
<view class="tag" :style="'background:'+opts.color[2]+';'"> |
|
|
|
</view> |
|
<text>上级指派-------9个</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="itembox"> |
|
<view class="top"> |
|
<view class="left"> |
|
<img src="@/static/4412.png" alt=""> |
|
<view class=""> |
|
<text>xx救援站任务总数</text><text>20</text> |
|
</view> |
|
</view> |
|
<view class="right"> |
|
<view style="margin-right: 10rpx;">完成率</view> |
|
|
|
<view class=""> |
|
60% |
|
</view> |
|
</view> |
|
</view> |
|
<view class="charts-box" style="display: flex;"> |
|
<img src="@/static/dadui/11.png" alt=""> |
|
<view style="width: 50%;"> |
|
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" /> |
|
</view> |
|
<view style="width: 50%; display: flex;justify-content: center;align-items: center;flex-direction: column;"> |
|
<view class="tagbox"> |
|
<view class="tag" :style="'background:'+opts.color[0]+';'"> |
|
|
|
</view> |
|
<text>上级指派-------9个</text> |
|
</view> |
|
<view class="tagbox"> |
|
<view class="tag" :style="'background:'+opts.color[1]+';'"> |
|
|
|
</view> |
|
<text>上级指派-------9个</text> |
|
</view> |
|
<view class="tagbox"> |
|
<view class="tag" :style="'background:'+opts.color[2]+';'"> |
|
|
|
</view> |
|
<text>上级指派-------9个</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="itembox"> |
|
<view class="top"> |
|
<view class="left"> |
|
<img src="@/static/4412.png" alt=""> |
|
<view class=""> |
|
<text>xx救援站任务总数</text><text>20</text> |
|
</view> |
|
</view> |
|
<view class="right"> |
|
<view style="margin-right: 10rpx;">完成率</view> |
|
|
|
<view class=""> |
|
60% |
|
</view> |
|
</view> |
|
</view> |
|
<view class="charts-box" style="display: flex;"> |
|
<img src="@/static/dadui/9.png" alt=""> |
|
<view style="width: 40%;"> |
|
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" /> |
|
</view> |
|
<view style="width: 50%; display: flex;justify-content: center;align-items: center;flex-direction: column;"> |
|
<view class="tagbox"> |
|
<view class="tag" :style="'background:'+opts.color[0]+';'"> |
|
|
|
</view> |
|
<text>上级指派-------9个</text> |
|
</view> |
|
<view class="tagbox"> |
|
<view class="tag" :style="'background:'+opts.color[1]+';'"> |
|
|
|
</view> |
|
<text>上级指派-------9个</text> |
|
</view> |
|
<view class="tagbox"> |
|
<view class="tag" :style="'background:'+opts.color[2]+';'"> |
|
|
|
</view> |
|
<text>上级指派-------9个</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <view class="listbox"> |
|
<view class="item" v-for="(item,key) in list" :key="key"> |
|
<view class="namebox"> |
|
<view class="name"> |
|
{{item.name}} |
|
</view> |
|
<view style=" width: 30%; padding-left:20rpx;"> |
|
<view class="tag"> |
|
{{item.tag.text}} |
|
</view> |
|
</view> |
|
</view> |
|
<view class="typebox"> |
|
<view class="type"> |
|
{{item.type}} |
|
</view> |
|
<view class="result"> |
|
<text>{{item.result}}</text> |
|
</view> |
|
</view> |
|
<view class="staffbox"> |
|
<view class="staff"> |
|
<view>人员:</view> |
|
<view><img style="height: 40rpx; width: 40rpx; vertical-align:middle" src="../../static/447.png" |
|
alt="">张三</view> |
|
<view><img style="height: 40rpx; width: 40rpx; vertical-align:middle" src="../../static/446.png" |
|
alt="">李四</view> |
|
</view> |
|
<view class="implement"> |
|
<button>执行</button> |
|
</view> |
|
</view> |
|
</view> |
|
</view> --> |
|
</view> |
|
<!-- <view class="login-box" v-if="!identity"> |
|
<view class="login-text"> |
|
登录平台,在线处理业务 |
|
</view> |
|
<view class="login-button" > |
|
<button @tap="login()">登录</button> |
|
</view> |
|
</view> --> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
title: 'Hello', |
|
identity: 0, |
|
progressNub:60, |
|
chartData: {}, |
|
year:2022, |
|
opts: { |
|
rotate: false, |
|
rotateLock: false, |
|
color: ["#FACE15","#04F1C9", "#3990F1"], |
|
|
|
padding: [5, 5, 5, 5], |
|
dataLabel: false, |
|
legend: { |
|
show: false, |
|
fontColor: "#fff", |
|
position: "right", |
|
lineHeight: 20 |
|
}, |
|
title: { |
|
name: "任务总数", |
|
fontSize: 15, |
|
color: "#fff" |
|
}, |
|
subtitle: { |
|
name: "20", |
|
fontSize: 25, |
|
color: "#fff" |
|
}, |
|
extra: { |
|
ring: { |
|
width: 50, |
|
height:50, |
|
ringWidth: 10, |
|
activeOpacity: 0.5, |
|
activeRadius: 10, |
|
offsetAngle: 0, |
|
labelWidth: 15, |
|
border: false, |
|
customRadius: 60, |
|
borderWidth: 3, |
|
borderColor: "#FFFFFF", |
|
centerColor: "#57B5FF", |
|
linearType: "none" |
|
} |
|
} |
|
}, |
|
list: [{ |
|
name: "上海雅特有限公司", |
|
tag: { |
|
class: "", |
|
text: "重点单位" |
|
}, |
|
type: "双随机", |
|
result: "责令限期整改" |
|
|
|
}], |
|
month:[1,2,3,4,5,6,7,8,9,10,11,12] |
|
} |
|
}, |
|
onLoad() { |
|
let a = uni.getStorageSync("user"); |
|
|
|
if (a) { |
|
this.identity = 1 |
|
} |
|
}, |
|
onReady() { |
|
this.getServerData(); |
|
}, |
|
methods: { |
|
getServerData() { |
|
//模拟从服务器获取数据时的延时 |
|
setTimeout(() => { |
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
|
let res = { |
|
series: [{ |
|
data: [{ |
|
"name": "一班", |
|
"value": 50 |
|
}, { |
|
"name": "二班", |
|
"value": 30 |
|
}, { |
|
"name": "三班", |
|
"value": 20 |
|
}, |
|
] |
|
}] |
|
}; |
|
this.chartData = JSON.parse(JSON.stringify(res)); |
|
}, 500); |
|
}, |
|
date(e){ |
|
console.log(e); |
|
} |
|
} |
|
|
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
|
|
.pure_top { |
|
width: 100%; |
|
height: 220rpx; |
|
position: relative; |
|
z-index: 0; |
|
overflow: hidden; |
|
|
|
} |
|
.pure_top::after { |
|
content:""; |
|
width: 100%; |
|
height: 220rpx; |
|
position: absolute; |
|
left: 0; |
|
top:0; |
|
z-index: -1; |
|
border-radius: 0 0 100% 100%; |
|
background: linear-gradient(180deg, #57B5FF 0%, #616DFD 100%); |
|
} |
|
|
|
.calendar{ |
|
z-index: 1; |
|
position: absolute; |
|
left: 74rpx; |
|
top: 20rpx; |
|
width: 80%; |
|
height: 120rpx; |
|
border-radius: 10rpx; |
|
box-shadow: 0px 0px 20px 1px #C1D7FF; |
|
background: #fff; |
|
view{ |
|
height: 60rpx; |
|
} |
|
.dates{ |
|
display: flex; |
|
} |
|
.monthbox{ |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
flex-direction: row; |
|
} |
|
.month{ |
|
|
|
width: 48rpx; |
|
height: 48rpx; |
|
border-radius: 48rpx; |
|
text-align: center; |
|
// background: #327AFE; |
|
} |
|
} |
|
button { |
|
width: 200rpx; |
|
height: 80rpx; |
|
color: #fff; |
|
border-radius: 40rpx; |
|
line-height: 80rpx; |
|
background-color: #327AFE; |
|
} |
|
.taskbox{ |
|
width: 90%; |
|
margin: -60rpx auto 0 auto; |
|
border-radius: 20rpx; |
|
background-color: #fff; |
|
padding: 20rpx; |
|
position: absolute; |
|
left: 16rpx; |
|
z-index: 10; |
|
.itembox{ |
|
margin-top: 30rpx; |
|
.top{ |
|
margin-top: 30rpx; |
|
height: 60rpx; |
|
display: flex; |
|
.left{ |
|
display: flex; |
|
flex: 1; |
|
img{ |
|
width: 50rpx; |
|
height: 50rpx; |
|
} |
|
text{ |
|
margin-right: 10rpx; |
|
} |
|
} |
|
.right{ |
|
color: #909090; |
|
|
|
display: flex; |
|
.progress{ |
|
margin-top: 6rpx; |
|
margin-right: 10rpx; |
|
height: 34rpx; |
|
flex: 1; |
|
background: #E4E7EC; |
|
.color{ |
|
height: 100%; |
|
background-color: #14B389; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.charts-box { |
|
// background-color: #5687fd; |
|
height: 250rpx; |
|
position: relative; |
|
img{ |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
z-index: -1; |
|
} |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
|
|
.tagbox{ |
|
color: #FFFFFF; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin: 10rpx 0; |
|
font-size: 32rpx; |
|
.tag{ |
|
width: 20rpx; |
|
height: 20rpx; |
|
border-radius: 20rpx; |
|
} |
|
} |
|
} |
|
|
|
.logo { |
|
height: 200rpx; |
|
width: 200rpx; |
|
margin-top: 200rpx; |
|
margin-left: auto; |
|
margin-right: auto; |
|
margin-bottom: 50rpx; |
|
} |
|
|
|
.text-area { |
|
display: flex; |
|
justify-content: center; |
|
} |
|
|
|
.title { |
|
font-size: 36rpx; |
|
color: #8f8f94; |
|
} |
|
|
|
.login-box { |
|
display: flex; |
|
background: #8f8f94; |
|
width: 100%; |
|
height: 120rpx; |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
|
|
.login-text { |
|
color: #fff; |
|
width: 60%; |
|
display: flex; |
|
font-size: 36rpx; |
|
padding-left: 40rpx; |
|
align-items: center; |
|
} |
|
|
|
.login-button { |
|
flex: 1; |
|
text-align: center; |
|
margin-top: 20rpx; |
|
|
|
} |
|
} |
|
|
|
.listbox { |
|
width: 100%; |
|
|
|
.item { |
|
background-color: #fff; |
|
margin: 20rpx 0; |
|
padding: 20rpx; |
|
|
|
.namebox { |
|
display: flex; |
|
margin-bottom: 30rpx; |
|
|
|
.name { |
|
font-weight: 600; |
|
font-size: 36rpx; |
|
width: 70%; |
|
height: 60rpx; |
|
line-height: 60rpx; |
|
} |
|
|
|
.tag { |
|
text-align: center; |
|
width: 200rpx; |
|
height: 60rpx; |
|
line-height: 60rpx; |
|
color: #FF6F51; |
|
border: 1px solid #FF6F51; |
|
background: rgba(255, 111, 81, 0.2400); |
|
border-radius: 40rpx 40rpx 40rpx 40rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.typebox { |
|
display: flex; |
|
margin: 30rpx 0; |
|
|
|
.type { |
|
width: 50%; |
|
border-left: #327AFE 6rpx solid; |
|
font-size: 30rpx; |
|
font-weight: 600; |
|
padding-left: 10rpx; |
|
} |
|
|
|
.result { |
|
width: 50%; |
|
text-align: right; |
|
color: #FF6F51; |
|
} |
|
} |
|
|
|
.staffbox { |
|
display: flex; |
|
|
|
.staff { |
|
display: flex; |
|
|
|
view { |
|
margin-right: 20rpx; |
|
} |
|
} |
|
|
|
.implement { |
|
|
|
flex: 1; |
|
margin-bottom: 10rpx; |
|
|
|
button { |
|
float: right; |
|
width: 120rpx; |
|
height: 60rpx; |
|
line-height: 60rpx; |
|
font-size: 32rpx; |
|
} |
|
} |
|
} |
|
</style>
|
|
|