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.
885 lines
18 KiB
885 lines
18 KiB
<template> |
|
<view class="page"> |
|
<view class="top"> |
|
<view class="pure_top"> |
|
|
|
</view> |
|
<view class="calendar"> |
|
<view class="date_year"> |
|
<view style="display: flex;"> |
|
<picker :value="dates.year" mode="date" fields="year" @change="dateYear($event)"> |
|
<view>{{dates.year}}</view> |
|
</picker> |
|
<img src="@/static/down.png" style="width: 30rpx;height: 30rpx; margin:10rpx 0 0 10rpx;" alt=""> |
|
</view> |
|
<view style="margin: 0 10rpx;">|</view> |
|
<view class=""> |
|
{{today.month}}.{{dates.day}} |
|
</view> |
|
</view> |
|
<view class="monthbox"> |
|
<view :class="{month_color : item==dates.month,month_color2 : item>month}" class="month_class" |
|
v-for="(item,key) in months" :key="key" @tap="dateMonth(item)"> |
|
<text>{{item}}</text> |
|
</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>任务总数</text><text>{{nub}}</text> |
|
</view> |
|
</view> |
|
<view class="right"> |
|
<view v-if="nub" style="margin-right: 10rpx;">完成</view> |
|
|
|
<view class=""> |
|
<text v-if="nub">{{num}}/{{nub}}件</text> |
|
<text v-else>暂无任务</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="charts-box" style="display: flex;"> |
|
<!-- <img src="@/static/dadui/10.png" alt=""> --> |
|
<view style="width: 40%;"> |
|
<qiun-data-charts v-if="identity" type="ring" :opts="opts" :chartData="chartData" /> |
|
</view> |
|
<view style=" width: 60%; display: flex;flex-wrap:wrap"> |
|
<view class="tagbox" style="width: 50%;" v-for="(item,key) in chartData.series[0].data" |
|
:key="key"> |
|
<view class="tag" :style="'background:'+opts.color[key]+';'"> |
|
|
|
</view> |
|
<text style="font-size: 24rpx;">{{item.name}}</text> |
|
<view style="font-size: 28rpx; flex:1;text-align: right;padding-right: 10rpx;"> |
|
{{item.value}}个 |
|
</view> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
<view class="itembox"> |
|
<view class="top"> |
|
<view class="left"> |
|
<img src="@/static/4412.png" alt=""> |
|
<view class=""> |
|
<text>指派任务任务总数</text><text>{{nub2}}</text> |
|
</view> |
|
</view> |
|
<view class="right"> |
|
<view v-if="nub2" style="margin-right: 10rpx;">完成</view> |
|
|
|
<view class=""> |
|
<text v-if="nub">{{num2}}/{{nub2}}件</text> |
|
<text v-else>暂无任务</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="charts-box" style="display: flex;"> |
|
<!-- <img src="@/static/dadui/10.png" alt=""> --> |
|
<view v-if="identity" style="width: 40%;"> |
|
<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" /> |
|
</view> |
|
<view |
|
style="width: 60%; display: flex;justify-content: center;align-items: center;flex-direction: column;"> |
|
<view class="tagbox" v-for="(item,key) in chartData2.series[0].data" :key="key"> |
|
<view class="tag" :style="'background:'+opts2.color[key]+';'"> |
|
|
|
</view> |
|
<text>{{item.name}}-----{{item.value}}个</text> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
<view class="itembox"> |
|
<view class="top"> |
|
<view class="left"> |
|
<img src="@/static/4412.png" alt=""> |
|
<view class=""> |
|
<text>申领任务总数</text><text>{{countStat.statistics3.num}}</text> |
|
</view> |
|
</view> |
|
<view class="right"> |
|
<view v-if="countStat.statistics3.percentageComplete" style="margin-right: 10rpx;">完成率: |
|
</view> |
|
|
|
<view class=""> |
|
<text |
|
v-if="countStat.statistics3.percentageComplete">{{countStat.statistics3.percentageComplete}}%</text> |
|
<text v-else>暂无任务</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="charts-box"> |
|
<view class="title" style="display: flex;"> |
|
<view class=""> |
|
|
|
</view> |
|
<view class=""> |
|
救援站主负责发起 |
|
</view> |
|
</view> |
|
<!-- <img src="@/static/dadui/10.png" alt=""> --> |
|
<view class="" style="display: flex; "> |
|
<view v-if="identity" style="width: 40%;"> |
|
<qiun-data-charts type="ring" :opts="opts3" :chartData="chartData3" /> |
|
</view> |
|
<view |
|
style="width: 60%; display: flex;justify-content: center;align-items: center;flex-direction: column;"> |
|
<view class="tagbox" v-for="(item,key) in chartData3.series[0].data" :key="key"> |
|
<view class="tag" :style="'background:'+opts.color[key]+';'"> |
|
|
|
</view> |
|
<text>{{item.name}}-----{{item.value}}个</text> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
</view> |
|
<view class="itembox"> |
|
<view class="top"> |
|
<view class="left"> |
|
<img src="@/static/4412.png" alt=""> |
|
<view class=""> |
|
<text>检察员任务总数</text><text>{{countStat.statistics3.num}}</text> |
|
</view> |
|
</view> |
|
<view class="right"> |
|
<view v-if="countStat.statistics3.percentageComplete" style="margin-right: 10rpx;"> |
|
完成率: |
|
</view> |
|
|
|
<view class=""> |
|
<text |
|
v-if="countStat.statistics3.percentageComplete">{{countStat.statistics3.percentageComplete}}%</text> |
|
<text v-else>暂无任务</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="charts-box" style="display: flex;"> |
|
<!-- <img src="@/static/dadui/10.png" alt=""> --> |
|
<view v-if="identity" style="width: 40%;"> |
|
<qiun-data-charts type="ring" :opts="opts3" :chartData="chartData3" /> |
|
</view> |
|
<view |
|
style="width: 60%; display: flex;justify-content: center;align-items: center;flex-direction: column;"> |
|
<view class="tagbox" v-for="(item,key) in chartData3.series[0].data" :key="key"> |
|
<view class="tag" :style="'background:'+opts.color[key]+';'"> |
|
|
|
</view> |
|
<text>{{item.name}}-----{{item.value}}个</text> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
</view> |
|
<tabbar :selected="0"></tabbar> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import tabbar from '@/components/tabbar.vue' |
|
export default { |
|
components: { |
|
tabbar |
|
}, |
|
data() { |
|
return { |
|
title: 'Hello', |
|
identity: 0, |
|
progressNub: 60, |
|
chartData: { |
|
series: [{ |
|
data: [{ |
|
name: "熟悉演练", |
|
value: 0 |
|
}, { |
|
name: "联络指导", |
|
value: 0 |
|
}, { |
|
name: "消防宣传", |
|
value: 0 |
|
}, { |
|
name: "投诉举报", |
|
value: 0 |
|
}, { |
|
name: "双随机", |
|
value: 0 |
|
}, { |
|
name: "行政许可", |
|
value: 0 |
|
}, { |
|
name: "火灾调查", |
|
value: 0 |
|
}, ] |
|
}] |
|
}, |
|
chartData2: { |
|
series: [{ |
|
data: [{ |
|
name: "投诉举报", |
|
value: 0 |
|
}, { |
|
name: "行政许可", |
|
value: 0 |
|
}, ] |
|
}] |
|
}, |
|
chartData3: { |
|
series: [{ |
|
data: [{ |
|
name: "同意", |
|
value: 0 |
|
}, { |
|
name: "驳回", |
|
value: 0 |
|
}, { |
|
name: "待处理", |
|
value: 0 |
|
}, ] |
|
}] |
|
}, |
|
dates: { |
|
year: 2022, |
|
month: 8, |
|
day: 0, |
|
}, |
|
today: { |
|
month: 8, |
|
}, |
|
opts: { |
|
rotate: false, |
|
rotateLock: false, |
|
color: ["#FEA364", "#977AC8", "#6AD9AC", "#6A7A96", "#F5C044", "#E7745E", "#79C9EA"], |
|
|
|
padding: [5, 5, 5, 5], |
|
dataLabel: false, |
|
legend: { |
|
show: false, |
|
fontColor: "#fff", |
|
position: "right", |
|
lineHeight: 20 |
|
}, |
|
title: { |
|
name: "任务总数", |
|
fontSize: 15, |
|
color: "#fff" |
|
}, |
|
subtitle: { |
|
name: "0", |
|
fontSize: 25, |
|
color: "#fff" |
|
}, |
|
|
|
extra: { |
|
ring: { |
|
width: 50, |
|
height: 50, |
|
ringWidth: 10, |
|
activeOpacity: 0.5, |
|
activeRadius: 10, |
|
offsetAngle: 0, |
|
labelWidth: 15, |
|
border: false, |
|
customRadius: 50, |
|
borderWidth: 3, |
|
borderColor: "#FFFFFF", |
|
centerColor: "#57B5FF", |
|
linearType: "none" |
|
} |
|
} |
|
}, |
|
opts2: { |
|
rotate: false, |
|
rotateLock: false, |
|
color: ["#5074F9", "#FFBA19"], |
|
|
|
padding: [5, 5, 5, 5], |
|
dataLabel: false, |
|
legend: { |
|
show: false, |
|
fontColor: "#fff", |
|
position: "right", |
|
lineHeight: 20 |
|
}, |
|
title: { |
|
name: "任务总数", |
|
fontSize: 15, |
|
color: "#fff" |
|
}, |
|
subtitle: { |
|
name: "0", |
|
fontSize: 25, |
|
color: "#fff" |
|
}, |
|
|
|
extra: { |
|
ring: { |
|
width: 50, |
|
height: 50, |
|
ringWidth: 10, |
|
activeOpacity: 0.5, |
|
activeRadius: 10, |
|
offsetAngle: 0, |
|
labelWidth: 15, |
|
border: false, |
|
customRadius: 50, |
|
borderWidth: 3, |
|
borderColor: "#FFFFFF", |
|
centerColor: "#57B5FF", |
|
linearType: "none" |
|
} |
|
} |
|
}, |
|
opts3: { |
|
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: "0", |
|
fontSize: 25, |
|
color: "#fff" |
|
}, |
|
|
|
extra: { |
|
ring: { |
|
width: 50, |
|
height: 50, |
|
ringWidth: 10, |
|
activeOpacity: 0.5, |
|
activeRadius: 10, |
|
offsetAngle: 0, |
|
labelWidth: 15, |
|
border: false, |
|
customRadius: 50, |
|
borderWidth: 3, |
|
borderColor: "#FFFFFF", |
|
centerColor: "#57B5FF", |
|
linearType: "none" |
|
} |
|
} |
|
}, |
|
user: [{ |
|
tasknub: 0 |
|
}], |
|
countStat: { |
|
statistics1: { |
|
num: 0, |
|
percentageComplete: 0, |
|
item1: 0, |
|
item2: 0, |
|
item3: 0 |
|
}, |
|
statistics2: { |
|
num: 0, |
|
percentageComplete: 0, |
|
item1: 0, |
|
item2: 0, |
|
item3: 0 |
|
}, |
|
statistics3: { |
|
num: 0, |
|
percentageComplete: 0, |
|
item1: 0, |
|
item2: 0, |
|
item3: 0 |
|
} |
|
}, |
|
isSupervisor: false, |
|
list: [], |
|
list2: [], |
|
list3: [], |
|
list4: [], |
|
month: 0, |
|
nub: 0, |
|
nub2: 0, |
|
num: 0, |
|
num2: 0, |
|
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] |
|
} |
|
}, |
|
created() { |
|
let a = uni.getStorageSync("user"); |
|
let date = new Date() |
|
this.dates.month = date.getMonth() + 1 |
|
this.today.month = date.getMonth() + 1 |
|
this.month = date.getMonth() + 1 |
|
this.dates.year = date.getFullYear() |
|
this.dates.day = date.getDate() |
|
this.getTaskListOfStation('投诉举报') |
|
this.getTaskListOfStation('双随机') |
|
this.getTaskListOfStation('熟悉演练') |
|
this.getTaskListOfStation('行政许可') |
|
this.getCountStat() |
|
|
|
}, |
|
onReady() { |
|
this.identity = 1 |
|
// this.getOrganizations() |
|
}, |
|
methods: { |
|
|
|
getTaskListOfStation(item) { |
|
|
|
const that = this |
|
let OrganizationId = uni.getStorageSync("user").organizationId |
|
let selectedTime = this.dates.year + '-' + this.dates.month + '-' + '01' |
|
|
|
let params = { |
|
Month: selectedTime, |
|
OrganizationId: OrganizationId, |
|
TaskType: item, |
|
PageNumber: 1, |
|
PageSize: 99999 |
|
} |
|
this.$request.get("/api/PlanTasks", params, (data, res) => { |
|
console.log(res); |
|
if (item == "投诉举报") { |
|
this.list = res.items |
|
this.chartData.series[0].data[3].value = res.items.length |
|
this.chartData2.series[0].data[0].value = res.items.length |
|
this.nub += res.items.length |
|
this.nub2 += res.items.length |
|
for (let a = 0; a < res.items.length; a++) { |
|
if (res.items[a].approvalStatus == "已检查") { |
|
this.num++ |
|
this.num2++ |
|
} |
|
} |
|
} |
|
if (item == "双随机") { |
|
this.list2 = res.items |
|
this.chartData.series[0].data[2].value = res.items.length |
|
|
|
this.nub += res.items.length |
|
for (let a = 0; a < res.items.length; a++) { |
|
if (res.items[a].approvalStatus == "已检查") { |
|
this.num++ |
|
} |
|
} |
|
} |
|
if (item == "熟悉演练") { |
|
this.list3 = res.items |
|
this.chartData.series[0].data[0].value = res.items.length |
|
this.nub += res.items.length |
|
for (let a = 0; a < res.items.length; a++) { |
|
if (res.items[a].approvalStatus == "已检查") { |
|
this.num++ |
|
} |
|
} |
|
} |
|
if (item == "行政许可") { |
|
this.list4 = res.items |
|
this.chartData.series[0].data[5].value = res.items.length |
|
this.chartData2.series[0].data[1].value = res.items.length |
|
this.nub += res.items.length |
|
this.nub2 += res.items.length |
|
for (let a = 0; a < res.items.length; a++) { |
|
if (res.items[a].approvalStatus == "已检查") { |
|
this.num++ |
|
this.num2++ |
|
} |
|
} |
|
|
|
} |
|
this.opts.subtitle.name = this.nub |
|
this.opts2.subtitle.name = this.nub2 |
|
// this.getCountStat() |
|
}) |
|
}, |
|
getCountStat() { |
|
|
|
}, |
|
|
|
|
|
dateYear(e) { |
|
console.log(e); |
|
this.dates.year = e.detail.value |
|
this.getOrganizations() |
|
}, |
|
dateMonth(e) { |
|
if (e > this.month) { |
|
return |
|
} |
|
this.dates.month = e |
|
this.getOrganizations() |
|
}, |
|
start(item) { |
|
|
|
uni.navigateTo({ |
|
url: '/pages/task/details?id=' + item.company.id, |
|
}) |
|
} |
|
} |
|
|
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.top { |
|
position: relative; |
|
top: 0; |
|
left: 0; |
|
} |
|
|
|
.pure_top { |
|
width: 100%; |
|
height: 220rpx; |
|
position: absolute; |
|
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%); |
|
} |
|
|
|
.month_color { |
|
border-radius: 48rpx; |
|
|
|
background-color: #317AFF; |
|
color: #fff; |
|
} |
|
|
|
.month_color2 { |
|
color: #B5B5B5; |
|
} |
|
|
|
.calendar { |
|
z-index: 1; |
|
position: relative; |
|
left: 74rpx; |
|
top: 20rpx; |
|
width: 80%; |
|
height: 120rpx; |
|
border-radius: 10rpx; |
|
box-shadow: 0px 0px 20px 1px #C1D7FF; |
|
background: #fff; |
|
|
|
view { |
|
height: 60rpx; |
|
} |
|
|
|
.date_year { |
|
box-sizing: border-box; |
|
display: flex; |
|
background-color: #fff; |
|
padding: 10rpx 0 0 10rpx; |
|
} |
|
|
|
.monthbox { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
flex-direction: row; |
|
|
|
.month_class { |
|
|
|
width: 48rpx; |
|
height: 48rpx; |
|
text-align: center; |
|
} |
|
} |
|
|
|
|
|
} |
|
|
|
button { |
|
width: 140rpx; |
|
height: 70rpx; |
|
color: #fff; |
|
border-radius: 34rpx; |
|
line-height: 70rpx; |
|
font-size: 30rpx; |
|
background-color: #327AFE; |
|
} |
|
|
|
.taskbox { |
|
width: 90%; |
|
margin: 40rpx auto; |
|
border-radius: 20rpx; |
|
background-color: #fff; |
|
padding: 20rpx; |
|
position: relative; |
|
left: 0; |
|
z-index: 10; |
|
|
|
.itembox { |
|
|
|
.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 { |
|
|
|
box-shadow: 0px 0px 10px 1px #C1D7FF; |
|
// background-color: #5687fd; |
|
height: 250rpx; |
|
position: relative; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
z-index: -1; |
|
} |
|
|
|
|
|
|
|
.tagbox { |
|
color: #100F19; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin: 10rpx 0; |
|
font-size: 32rpx; |
|
|
|
.tag { |
|
width: 20rpx; |
|
height: 20rpx; |
|
border-radius: 20rpx; |
|
margin-right: 10rpx; |
|
} |
|
} |
|
} |
|
|
|
.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: 90%; |
|
margin: -10rpx auto 0 auto; |
|
|
|
.item { |
|
background-color: #fff; |
|
margin: 20rpx 0; |
|
padding: 20rpx; |
|
|
|
.namebox { |
|
display: flex; |
|
margin-bottom: 10rpx; |
|
|
|
.name { |
|
font-weight: 600; |
|
font-size: 36rpx; |
|
width: 70%; |
|
height: 60rpx; |
|
line-height: 60rpx; |
|
} |
|
|
|
.tag { |
|
text-align: center; |
|
width: 180rpx; |
|
height: 60rpx; |
|
line-height: 60rpx; |
|
color: #FF6F51; |
|
border: 1px solid #FF6F51; |
|
background: rgba(255, 111, 81, 0.2400); |
|
border-radius: 40rpx 40rpx 40rpx 40rpx; |
|
} |
|
|
|
.tag2 { |
|
text-align: center; |
|
width: 180rpx; |
|
height: 60rpx; |
|
line-height: 60rpx; |
|
color: #14B488; |
|
border: 1px solid rgba(30, 232, 177, 0.8); |
|
background: rgba(30, 232, 177, 0.24); |
|
border-radius: 40rpx 40rpx 40rpx 40rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.typebox { |
|
display: flex; |
|
margin: 14rpx 0; |
|
|
|
.type { |
|
width: 50%; |
|
// border-left: #327AFE 6rpx solid; |
|
font-size: 32rpx; |
|
font-weight: 600; |
|
padding-left: 10rpx; |
|
} |
|
|
|
.result { |
|
width: 50%; |
|
text-align: right; |
|
color: #FF6F51; |
|
} |
|
} |
|
|
|
.staffbox { |
|
display: flex; |
|
margin: 6rpx 0; |
|
font-size: 30rpx; |
|
|
|
.staff { |
|
display: flex; |
|
color: rgba(16, 15, 25, 0.48); |
|
|
|
.zhu { |
|
|
|
color: #100F19; |
|
} |
|
|
|
view { |
|
margin-right: 20rpx; |
|
} |
|
|
|
img { |
|
width: 40rpx; |
|
height: 40rpx; |
|
min-width: 40rpx; |
|
min-height: 40rpx; |
|
} |
|
} |
|
|
|
.jiancha { |
|
color: #FFBA19; |
|
margin-right: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.implement { |
|
|
|
margin-bottom: 10rpx; |
|
|
|
.button { |
|
width: 100%; |
|
height: 100%; |
|
padding-top: 20rpx; |
|
} |
|
|
|
img { |
|
width: 100rpx; |
|
height: 100rpx; |
|
} |
|
|
|
// button { |
|
// float: right; |
|
// width: 80rpx; |
|
// height: 40rpx; |
|
// line-height: 40rpx; |
|
// margin-top: 20rpx; |
|
// } |
|
} |
|
</style>
|
|
|