365 lines
7.3 KiB
Vue
365 lines
7.3 KiB
Vue
<template>
|
|
<view class="emergencyDisposal">
|
|
<view class="fixedheader">
|
|
<headers :showBack="true">
|
|
<view class="headerName">
|
|
智能巡检
|
|
</view>
|
|
<view class="right" @click="getScanCode()">
|
|
<image class="scancode" src="@/static/scancode.png" mode=""></image>
|
|
</view>
|
|
</headers>
|
|
</view>
|
|
<view class="problemOverview" :style="{ 'margin-top': (statusBarHeight+52) * 1.5 + 'rpx' }">
|
|
<view class="overFlex">
|
|
<view class="overLeft">任务统计</view>
|
|
<view class="overRight">{{nowTime}}</view>
|
|
</view>
|
|
<view class="problemData">
|
|
<view class="dataBox2 dataStyle">
|
|
<view class="num">{{taskStatus.notStart}}</view>
|
|
<view class="text">未开始</view>
|
|
</view>
|
|
<view class="dataBox1 dataStyle">
|
|
<view class="num">{{taskStatus.run}}</view>
|
|
<view class="text">进行中</view>
|
|
</view>
|
|
<view class="dataBox4 dataStyle">
|
|
<view class="num">{{taskStatus.overdue}}</view>
|
|
<view class="text">已逾期</view>
|
|
</view>
|
|
<view class="dataBox3 dataStyle">
|
|
<view class="num">{{taskStatus.complete}}</view>
|
|
<view class="text">已巡检</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="commonModules">
|
|
<view class="overLeft">常用模块</view>
|
|
<view class="modulesList">
|
|
<view class="menu" v-if="inspection" @click="jumpPage('inspectionPointList')">
|
|
<image class="icon primary" src="@/static/icon/inspection_point.png"></image>
|
|
<view>巡检点</view>
|
|
</view>
|
|
<view class="menu" v-if="routeManage" @click="jumpPage('inspectionPlan')">
|
|
<image class="icon success" src="@/static/icon/inspection_plan.png"></image>
|
|
<view>巡检计划</view>
|
|
</view>
|
|
<view class="menu" @click="jumpPage('inspectedstay')">
|
|
<image class="icon wraning" src="@/static/icon/inspection_task.png">
|
|
</image>
|
|
<view>我的任务</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
nowTime: '',
|
|
dataList: [],
|
|
taskStatus: {
|
|
complete: 0,
|
|
notStart: 0,
|
|
overdue: 0,
|
|
run: 0
|
|
},
|
|
inspection: false,
|
|
routeManage: false
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.getGoId = option.id;
|
|
},
|
|
mounted() {
|
|
this.getTime();
|
|
},
|
|
onShow() {
|
|
this.inspection = this.checkMenuPermission({menuPath: '/project/inspecPoint/inspection'})
|
|
this.routeManage = this.checkMenuPermission({menuPath: '/project/inspectRoute/routeManage'})
|
|
|
|
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
//实时时间
|
|
getTime() {
|
|
this.timer = setInterval(() => {
|
|
let timeDate = new Date()
|
|
let year = timeDate.getFullYear()
|
|
let mounth = timeDate.getMonth() + 1
|
|
let day = timeDate.getDate()
|
|
let hours = timeDate.getHours()
|
|
hours = hours >= 10 ? hours : '0' + hours
|
|
let minutes = timeDate.getMinutes()
|
|
minutes = minutes >= 10 ? minutes : '0' + minutes
|
|
let seconds = timeDate.getSeconds()
|
|
seconds = seconds >= 10 ? seconds : '0' + seconds
|
|
let week = timeDate.getDay()
|
|
let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
|
this.nowTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
|
|
}, 1000)
|
|
},
|
|
getData() {
|
|
this.sendRequest({
|
|
url: 'xmgl/xzCheckingRouteTask/countMyTaskInspectStatus',
|
|
method: 'post',
|
|
success: res => {
|
|
console.info(res,'res')
|
|
if (res.code == 200) {
|
|
this.taskStatus = res.result;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
jumpPage(page) {
|
|
uni.navigateTo({
|
|
url: `/pages/projectEnd/InspectionRoute/${page}`
|
|
})
|
|
},
|
|
getScanCode() {
|
|
const that = this;
|
|
uni.scanCode({
|
|
scanType: ['qrCode'],
|
|
success: function(res) {
|
|
console.log('扫一扫得到的数据：' + res.result)
|
|
uni.navigateTo({
|
|
url: `${res.result}`
|
|
})
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.emergencyDisposal {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fixedheader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
|
|
:deep(.headerBox ){
|
|
background: #2b8df3;
|
|
color: #fff;
|
|
}
|
|
|
|
:deep( .right ){
|
|
font-size: 24rpx;
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 50%;
|
|
z-index: 4;
|
|
transform: translateY(-50%);
|
|
|
|
.scancode {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.noData {
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
margin-top: 240rpx;
|
|
color: #bed0fb;
|
|
}
|
|
|
|
.noDataImg {
|
|
width: 250rpx;
|
|
height: 196rpx;
|
|
}
|
|
|
|
.problemOverview {
|
|
// height: 33%;
|
|
// box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
// border: 3px solid #fafbfc;
|
|
margin: 0 2% 11% 2%;
|
|
padding: 3% 3%;
|
|
|
|
|
|
.overFlex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.overRight {
|
|
// float: right;
|
|
font-size: 24rpx;
|
|
color: gray;
|
|
margin: 6rpx 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.problemData {
|
|
margin-top: 4%;
|
|
display: flex;
|
|
background: linear-gradient(180deg, #FCF2D6 0%, #FFFFFF 50%);
|
|
box-shadow: 0 8rpx 16rpx 0 rgba(219, 229, 255, 0.6);
|
|
border-radius: 10rpx;
|
|
|
|
.dataStyle {
|
|
width: 300rpx;
|
|
// height: 180rpx;
|
|
text-align: center;
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
.dataStyle:not(:last-child) {
|
|
border-right: 2rpx solid #FFD356;
|
|
}
|
|
|
|
.dataBox1 {
|
|
// background: #ebf1ff;
|
|
border-top-left-radius: 10rpx;
|
|
border-bottom-left-radius: 10rpx;
|
|
|
|
.day {
|
|
font-size: 24rpx;
|
|
color: #3a7bff;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.num {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #3a7bff;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.dataBox2 {
|
|
// background: #fcebec;
|
|
|
|
.day {
|
|
font-size: 24rpx;
|
|
color: #ea3941;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.num {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #ea3941;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.dataBox3 {
|
|
// background: #eef9f6;
|
|
|
|
.day {
|
|
font-size: 24rpx;
|
|
color: #5ecba7;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.num {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #5ecba7;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.dataBox4 {
|
|
// background: #fff4e7;
|
|
border-top-right-radius: 10rpx;
|
|
border-bottom-right-radius: 10rpx;
|
|
|
|
.day {
|
|
font-size: 24rpx;
|
|
color: #ff9810;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.num {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #ff9810;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.commonModules {
|
|
height: 66%;
|
|
margin: -10% 2%;
|
|
padding: 3% 3%;
|
|
|
|
.modulesList {
|
|
margin-top: 15%;
|
|
display: grid;
|
|
grid-gap: 40rpx;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
|
.menu {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
}
|
|
.icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
padding: 6px;
|
|
line-height: 40rpx;
|
|
border-radius: 16rpx;
|
|
&.primary {
|
|
background-color: rgba(0, 119, 250, 1);
|
|
}
|
|
&.success {
|
|
background-color: rgba(80, 175, 177, 1);
|
|
}
|
|
&.wraning {
|
|
background-color: rgba(233, 157, 66, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.overLeft {
|
|
// float: left;
|
|
color: #000;
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
}
|
|
</style> |