lizhichao
/
hitap-chat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
193 Commits
1 Branch
0 Tags
37 MiB
 
 
 
 
 
 
Tag: Branch: Tree: c588892b12
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c588892b12'
${ noResults }
hitap-chat/pages/index/index-pers.vue

650 lines
15 KiB
Raw Blame History

<template>
<view class="index-pers">
<view class="index-pers-content">
<view class="index-pers-title font-family-TMB">
洞察隐患 智能守护
</view>
<view class="index-pers-desc font-family-SR">
科技之眼照亮安全之路
</view>
<view class="index-pers-pc index-pers-content" v-if="curLogin === 1">
<view class="left-content" @click="handleToTab('Investigated')">
<view class="left-content-label font-family-SM">
待排查
</view>
<view class="left-content-value font-family-ASB">
{{pageData.Investigated || 0}}
</view>
<view class="left-content-bg">
</view>
</view>
<view class="right-content">
<view class="right-content-item">
<view class="right-content-item-label font-family-SM">
超期
</view>
<view class="right-content-item-value cq-color font-family-ASB">
{{pageData.PcDelay || 0}}
</view>
</view>
<view class="right-content-item">
<view class="right-content-item-label font-family-SM">
临期
</view>
<view class="right-content-item-value lq-color font-family-ASB">
{{pageData.PcDying || 0}}
</view>
</view>
</view>
</view>
<view class="index-pers-zl index-pers-content" v-if="curLogin === 2">
<view class="left-content" @click="handleToTab('Government')">
<view class="left-content-label font-family-SM">
待治理
</view>
<view class="left-content-value font-family-ASB">
{{pageData.Government || 0}}
</view>
<view class="left-content-bg">
</view>
</view>
<view class="right-content">
<view class="right-content-item">
<view class="right-content-item-label font-family-SM">
超期
</view>
<view class="right-content-item-value cq-color font-family-ASB">
{{pageData.ZlDelay || 0}}
</view>
</view>
<view class="right-content-item">
<view class="right-content-item-label font-family-SM">
临期
</view>
<view class="right-content-item-value lq-color font-family-ASB">
{{pageData.ZlDying || 0}}
</view>
</view>
</view>
</view>
<view class="index-pers-pczl index-pers-content" v-if="curLogin === 3">
<view class="left-content basic-content" @click="handleToTab('Investigated')">
<view class="left-content-bg basic-content-bg">
</view>
<view class="basic-content-top">
<view class="basic-content-top-label font-family-SM">
待排查
</view>
<view class="basic-content-top-value font-family-ASB">
{{pageData.Investigated || 0}}
</view>
</view>
<view class="basic-content-bottom">
<view class="basic-content-bottom-item">
<view class="basic-content-bottom-item-label font-family-SM">
超期
</view>
<view class="basic-content-bottom-item-value cq-color font-family-ASB">
{{pageData.PcDelay || 0}}
</view>
</view>
<view class="basic-content-bottom-item">
<view class="basic-content-bottom-item-label font-family-SM">
临期
</view>
<view class="basic-content-bottom-item-value lq-color font-family-ASB">
{{pageData.PcDying || 0}}
</view>
</view>
</view>
</view>
<view class="right-content basic-content" @click="handleToTab('Government')">
<view class="right-content-bg basic-content-bg">
</view>
<view class="basic-content-top">
<view class="basic-content-top-label font-family-SM">
待治理
</view>
<view class="basic-content-top-value font-family-ASB">
{{pageData.Government || 0}}
</view>
</view>
<view class="basic-content-bottom">
<view class="basic-content-bottom-item">
<view class="basic-content-bottom-item-label font-family-SM">
超期
</view>
<view class="basic-content-bottom-item-value cq-color font-family-ASB">
{{pageData.ZlDelay || 0}}
</view>
</view>
<view class="basic-content-bottom-item">
<view class="basic-content-bottom-item-label font-family-SM">
临期
</view>
<view class="basic-content-bottom-item-value lq-color font-family-ASB">
{{pageData.ZlDying || 0}}
</view>
</view>
</view>
</view>
</view>
<view class="index-pers-sp index-pers-content" v-if="curLogin === 4">
<view class="left-content" @click="handleToTab('Approve')">
<view class="left-content-bg">
</view>
<view class="left-content-label font-family-SM">
待审批
</view>
<view class="left-content-value font-family-ASB">
{{pageData.Approve || 0}}
</view>
</view>
<view class="right-content">
<view class="right-content-item" @click="handleToTab('Investigated')">
<view class="right-content-item-top">
<view class="right-content-item-top-label font-family-SM">
待排查
</view>
<view class="right-content-item-top-value font-family-ASB">
{{pageData.Investigated || 0}}
</view>
</view>
<view class="right-content-item-bottom">
<view class="right-content-item-bottom-item">
<view class="right-content-item-bottom-item-label font-family-SM">
超期
</view>
<view class="right-content-item-bottom-item-value cq-color font-family-ASB">
{{pageData.PcDelay || 0}}
</view>
</view>
<view class="right-content-item-bottom-item">
<view class="right-content-item-bottom-item-label font-family-SM">
临期
</view>
<view class="right-content-item-bottom-item-value lq-color font-family-ASB">
{{pageData.PcDying || 0}}
</view>
</view>
</view>
</view>
<view class="right-content-item" @click="handleToTab('Government')">
<view class="right-content-item-top">
<view class="right-content-item-top-label font-family-SM">
待治理
</view>
<view class="right-content-item-top-value font-family-ASB">
{{pageData.Government || 0}}
</view>
</view>
<view class="right-content-item-bottom">
<view class="right-content-item-bottom-item">
<view class="right-content-item-bottom-item-label font-family-SM">
超期
</view>
<view class="right-content-item-bottom-item-value cq-color font-family-ASB">
{{pageData.ZlDelay || 0}}
</view>
</view>
<view class="right-content-item-bottom-item">
<view class="right-content-item-bottom-item-label font-family-SM">
临期
</view>
<view class="right-content-item-bottom-item-value lq-color font-family-ASB">
{{pageData.ZlDying || 0}}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="con" @click="konw">
<image class="bg" src="/static/know.png" />
<view class="con-box">
<text class="font-family-SM" style="color: #363F4D;font-weight: 500;">交通隐患排查知识库</text>
<view class="icon">
<uni-icons type="right" size="18" color="#fff" />
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'index-pers',
props: {
},
data() {
return {
pageData: []
}
},
computed: {
curLogin() {
const myRoles = this.$.getData('userInfo').role || []
if (myRoles.includes('领导')) {
return 4
}
if (myRoles.includes('排查人员') && myRoles.includes('治理人员')) {
return 3
}
if (myRoles.includes('治理人员')) {
return 2
}
if (myRoles.includes('排查人员')) {
return 1
}
return 0
}
},
created() {
const data = this.$.getData('token')
this.$request.globalRequest('/hiddenDanger/highDanger/getHighDangerStatusNum', {
nuserid: data
}, 'GET').then(res => {
if (res.code === 200) {
this.pageData = res.result.reduce((obj, item) => {
const {
status,
count = 0
} = item
obj[status] = count
return obj
}, {})
} else {
this.$.toast(res.message)
}
})
},
methods: {
konw() {
this.$.open('/pages/knowledge/index')
},
handleToTab(routeKey) {
console.log(routeKey)
if (routeKey === 'Investigated') {
uni.setStorageSync('MyPCtabIndex', 1)
this.$.openTab('/pages/investigation/index')
}
if (routeKey === 'Government') {
uni.setStorageSync('MyZLtabIndex', 1)
this.$.openTab('/pages/governance/index')
}
if (routeKey === 'Approve') {
uni.setStorageSync('MySPtabIndex', 1)
this.$.openTab('/pages/approve/index')
}
}
}
}
</script>
<style lang="scss" scoped>
.index-pers {
position: relative;
color: #fff;
padding: calc(var(--status-bar-height) + 40rpx) 20rpx 0rpx;
.cq-color {
color: rgba(204, 41, 54, 1);
}
.lq-color {
color: rgba(230, 138, 11, 1)
}
&::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: 1;
background: url("../../static/home_bg.png") no-repeat;
background-size: 100% 100%;
}
&-content {
position: relative;
z-index: 2;
}
&-title {
// font-weight: bold;
font-size: 24px;
line-height: 28px;
letter-spacing: 2px;
text-shadow: 0px 4px 0px rgba(255, 255, 255, 0.16);
text-align: left;
font-style: normal;
text-transform: none;
color: #fff;
}
&-desc {
margin-top: 20rpx;
letter-spacing: 11rpx;
color: #fff;
}
&-content {
margin-top: 20px;
font-weight: 500;
color: rgba(54, 63, 77, 1);
}
&-pc,
&-zl {
display: flex;
align-items: center;
height: 190rpx;
.left-content {
position: relative;
height: 100%;
width: 53%;
background: linear-gradient(180deg, #80CBFF 0%, #F0F5FA 100%);
border-radius: 9px 9px 9px 9px;
&-bg {
height: 160rpx;
width: 160rpx;
background: url("/static/index/pc.png") no-repeat;
background-size: 100% 100%;
position: absolute;
right: 15rpx;
top: 15rpx;
}
&-label {
font-size: 18px;
padding: 18px 0 0 15px;
}
&-value {
font-size: 26px;
padding: 3px 0 0 15px;
}
}
.right-content {
flex: 1;
margin-left: 12px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
&-item {
height: 46%;
width: calc(100% - 40px);
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, .3);
border-radius: 9px 9px 9px 9px;
backdrop-filter: blur(4px);
&-value {
font-size: 20px;
}
}
}
}
&-zl {
.left-content {
background: linear-gradient(180deg, #F0D9B4 0%, #F6F6F6 100%);
&-bg {
background: url("/static/index/zl.png") no-repeat;
background-size: 100% 100%;
width: 90px;
}
}
}
&-pczl {
display: flex;
align-items: center;
height: 280rpx;
.basic-content {
flex: 1;
position: relative;
height: 100%;
color: rgba(54, 63, 77, 1);
&-bg {
position: absolute;
top: 16rpx;
right: 0rpx;
width: 90px;
height: 90px;
z-index: 1;
}
&-top {
height: 54px;
padding: 18px 15px;
&-label {
font-size: 18px;
}
&-value {
font-size: 26px;
color: rgba(54, 63, 77, 1);
}
}
&-bottom {
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 9px 9px 9px 9px;
position: relative;
z-index: 2;
backdrop-filter: blur(4px);
&-item {
display: flex;
align-items: center;
&-label {
margin-right: 5px;
}
&-value {
font-size: 18px;
}
}
}
}
.left-content {
background: linear-gradient(180deg, #80CBFF 0%, #EBF1F7 100%);
border-radius: 9px 9px 9px 9px;
margin-right: 12px;
&-bg {
background: url("/static/index/pc.png") no-repeat;
background-size: 100% 100%;
}
}
.right-content {
background: linear-gradient(180deg, #F0D9B4 0%, #F6F6F6 100%);
border-radius: 9px 9px 9px 9px;
&-bg {
background: url("/static/index/zl.png") no-repeat;
background-size: 100% 100%;
width: 100px;
}
}
}
&-sp {
color: rgba(54, 63, 77, 1);
height: 370rpx;
display: flex;
align-items: center;
.left-content {
position: relative;
height: 100%;
width: 42%;
background: linear-gradient(180deg, #F0D9B4 0%, #FFFEFC 100%);
border-radius: 9px 9px 9px 9px;
&-label {
padding: 18px 0 0 15px;
}
&-value {
padding: 0 0 0 15px;
font-size: 30px;
}
&-bg {
width: 160px;
height: 95px;
position: absolute;
right: 0;
bottom: 0;
background: url('/static/index/sp.png') no-repeat;
background-size: 100% 100%;
}
}
.right-content {
margin-left: 12px;
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
&-item {
height: 47%;
width: 100%;
background: rgba(255, 255, 255, .4);
border-radius: 9px 9px 9px 9px;
backdrop-filter: blur(4px);
display: flex;
flex-direction: column;
&-top {
height: 45px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
width: calc(100% - 30px);
&-value {
font-size: 20px;
}
}
&-bottom {
flex: 1;
height: 35px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
border-radius: 0px 0px 9px 9px;
padding: 0 15px;
width: calc(100% - 30px);
display: flex;
align-items: center;
justify-content: space-between;
&-item {
display: flex;
align-items: center;
&-label {
margin-right: 14rpx;
}
&-value {
font-size: 18px;
}
}
}
}
}
}
.con {
width: 100%;
height: 240rpx;
padding: 16rpx 0;
box-sizing: border-box;
position: relative;
z-index: 999;
background-size: 100% 100%;
display: flex;
align-items: center;
background: transparent;
.bg {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.con-box {
width: 100%;
padding: 0 50rpx;
box-sizing: border-box;
height: 80%;
background: linear-gradient(to right, #8FB4F2 0%, #BCD2F2 100%);
z-index: -1;
position: relative;
border-radius: 8rpx;
display: flex;
align-items: center;
.icon {
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.3);
color: #fff;
border-radius: 10%;
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
}
}
}
}
</style>