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.
565 lines
12 KiB
565 lines
12 KiB
2 years ago
|
<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>
|