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.
344 lines
9.4 KiB
344 lines
9.4 KiB
<template>
|
|
<el-row :gutter="20" class="panel-group" type="flex" justify="space-between">
|
|
<el-col class="card-panel-col">
|
|
<div class="card-panel danganzongliang" @click="handleSetLineChartData('archives')">
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
<svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
<count-to :start-val="0" :end-val="archivesNum" :duration="3200" class="card-panel-num" />
|
|
</div>
|
|
档案总量
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col class="card-panel-col">
|
|
<div class="card-panel danganhezongliang" @click="handleSetLineChartData('case')">
|
|
<div class="card-panel-icon-wrapper icon-message">
|
|
<svg-icon icon-class="danganhezongliang" class-name="card-panel-icon" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
<count-to :start-val="0" :end-val="caseNum" :duration="3200" class="card-panel-num" />
|
|
</div>
|
|
档案盒总量
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col class="card-panel-col">
|
|
<div class="card-panel quanbushebei" @click="handleSetLineChartData('device')">
|
|
<div class="card-panel-icon-wrapper icon-money">
|
|
<svg-icon icon-class="quanbushebei" class-name="card-panel-icon" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
<count-to v-if="getDeviceFlag" :start-val="0" :end-val="totalDeviceNum" :duration="3200" class="card-panel-num" />
|
|
<div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
|
|
</div>
|
|
全部设备
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col class="card-panel-col">
|
|
<div class="card-panel zaixianshebei" @click="handleSetLineChartData('device')">
|
|
<div class="card-panel-icon-wrapper icon-shopping">
|
|
<svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
<count-to v-if="getDeviceFlag" :start-val="0" :end-val="onlineDeviceNum" :duration="3200" class="card-panel-num" />
|
|
<div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
|
|
</div>
|
|
在线设备
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col class="card-panel-col">
|
|
<div class="card-panel lixianshebei" @click="handleSetLineChartData('device')">
|
|
<div class="card-panel-icon-wrapper icon-shopping">
|
|
<svg-icon icon-class="lixianshebei" class-name="card-panel-icon" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
<count-to v-if="getDeviceFlag" :start-val="0" :end-val="offlineDeviceNum" :duration="3200" class="card-panel-num" />
|
|
<div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div>
|
|
</div>
|
|
离线设备
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
import CountTo from 'vue-count-to'
|
|
import { FetchGetArchivesNum, FetchGetCaseNum } from '@/api/archivesManage/statistics'
|
|
import { getDeviceList } from '@/api/storeManage/deviceManage/device'
|
|
import { getOnlineDevice } from '@/api/home/device'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
components: {
|
|
CountTo
|
|
},
|
|
data() {
|
|
return {
|
|
archivesNum: 0,
|
|
caseNum: 0,
|
|
getDeviceFlag: false,
|
|
totalDeviceNum: 0,
|
|
onlineDeviceNum: 0,
|
|
offlineDeviceNum: 0
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'roles'
|
|
])
|
|
},
|
|
mounted() {
|
|
this.handleArchivesNum()
|
|
this.handleCaseNum()
|
|
this.handleTotalDeviceNum()
|
|
},
|
|
methods: {
|
|
handleSetLineChartData(type) {
|
|
// this.$emit('handleSetLineChartData', type)
|
|
if (type === 'archives') {
|
|
if (this.roles.includes('archivesList:list') || this.roles.includes('admin')) {
|
|
this.$router.push({
|
|
name: 'ArchivesList'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
message: '当前账号没有权限',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
} else if (type === 'case') {
|
|
if (this.roles.includes('caseManage:list') || this.roles.includes('admin')) {
|
|
this.$router.push({
|
|
name: 'caseManage'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
message: '当前账号没有权限',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
} else if (type === 'device') {
|
|
if (this.roles.includes('deviceManage:list') || this.roles.includes('admin')) {
|
|
this.$router.push({
|
|
name: 'DeviceManage'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
message: '当前账号没有权限',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// 档案总数
|
|
handleArchivesNum() {
|
|
FetchGetArchivesNum().then(data => {
|
|
this.archivesNum = data
|
|
})
|
|
},
|
|
// 档案盒总数
|
|
handleCaseNum() {
|
|
FetchGetCaseNum().then(data => {
|
|
this.caseNum = data
|
|
})
|
|
},
|
|
// 设备总数,在线设备数,离线设备数
|
|
handleTotalDeviceNum() {
|
|
Promise.all([getDeviceList({ page: 0, size: 10 }), getOnlineDevice()]).then((result) => {
|
|
this.getDeviceFlag = true
|
|
this.totalDeviceNum = result[0].totalElements
|
|
this.onlineDeviceNum = result[1]
|
|
this.offlineDeviceNum = this.totalDeviceNum - this.onlineDeviceNum
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.panel-group {
|
|
.card-panel-col {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-panel {
|
|
cursor: pointer;
|
|
height: 100px;
|
|
// height: 108px;
|
|
// cursor: pointer;
|
|
font-size: 15px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
opacity: 0.86;
|
|
// box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
|
// border-color: rgba(0, 0, 0, .05);
|
|
&.danganzongliang {
|
|
color: #21aae1;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(51, 159, 210, 0.5) 0%,
|
|
rgba(56, 158, 225, 0) 100%
|
|
);
|
|
border-top: 2px #21aae1 solid;
|
|
& span.card-panel-num {
|
|
background: linear-gradient(180deg, #ffffff 0%, #21aae1 100%);
|
|
}
|
|
}
|
|
&.danganhezongliang {
|
|
color: #793cba;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(121, 60, 186, 0.5) 0%,
|
|
rgba(121, 60, 186, 0) 100%
|
|
);
|
|
border-top: 2px #793cba solid;
|
|
& span.card-panel-num {
|
|
background: linear-gradient(180deg, #ffffff 0%, #793cba 100%);
|
|
}
|
|
}
|
|
&.quanbushebei {
|
|
color: #008e81;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 142, 129, 0.5) 0%,
|
|
rgba(0, 142, 129, 0) 100%
|
|
);
|
|
border-top: 2px #008e81 solid;
|
|
& span.card-panel-num {
|
|
background: linear-gradient(180deg, #ffffff 0%, #008e81 100%);
|
|
}
|
|
}
|
|
&.zaixianshebei {
|
|
color: #c4c859;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(196, 200, 89, 0.5) 0%,
|
|
rgba(196, 200, 89, 0) 100%
|
|
);
|
|
border-top: 2px #c4c859 solid;
|
|
& span.card-panel-num {
|
|
background: linear-gradient(180deg, #ffffff 0%, #bfc458 100%);
|
|
}
|
|
}
|
|
&.lixianshebei {
|
|
color: #f65164;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(246, 81, 100, 0.5) 0%,
|
|
rgba(247, 80, 100, 0) 100%
|
|
);
|
|
border-top: 2px #f65164 solid;
|
|
& span.card-panel-num {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f55164 100%);
|
|
}
|
|
}
|
|
// &:hover {
|
|
// .card-panel-icon-wrapper {
|
|
// color: #fff;
|
|
// }
|
|
|
|
// .icon-people {
|
|
// background: #40c9c6;
|
|
// }
|
|
|
|
// .icon-message {
|
|
// background: #36a3f7;
|
|
// }
|
|
|
|
// .icon-money {
|
|
// background: #f4516c;
|
|
// }
|
|
|
|
// .icon-shopping {
|
|
// background: #34bfa3
|
|
// }
|
|
// }
|
|
|
|
// .icon-danganzongliang {
|
|
// color: #21AAE1;
|
|
// }
|
|
|
|
// .icon-danganhezongliang {
|
|
// color: #793CBA;
|
|
// }
|
|
|
|
// .icon-quanbushebei {
|
|
// color: #008E81;
|
|
// }
|
|
|
|
// .icon-zaixianshebei {
|
|
// color: #C4C859
|
|
// }
|
|
|
|
// .icon-lixianshebei {
|
|
// color: #F65164
|
|
// }
|
|
|
|
.card-panel-icon-wrapper {
|
|
float: left;
|
|
margin: 0 10px 0 12px;
|
|
padding: 20px;
|
|
transition: all 0.38s ease-out;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.card-panel-icon {
|
|
float: left;
|
|
font-size: 60px;
|
|
}
|
|
|
|
.card-panel-description {
|
|
// float: right;
|
|
// font-weight: bold;
|
|
margin: 19px;
|
|
margin-left: 0px;
|
|
|
|
.card-panel-text {
|
|
line-height: 30px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
font-size: 28px;
|
|
margin-bottom: 11px;
|
|
& span {
|
|
// background: linear-gradient(180deg, #FFFFFF 0%, #21AAE1 100%);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// .card-panel-num {
|
|
// font-size: 20px;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 550px) {
|
|
.card-panel-description {
|
|
display: none;
|
|
}
|
|
|
|
.card-panel-icon-wrapper {
|
|
float: none !important;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 !important;
|
|
|
|
.svg-icon {
|
|
display: block;
|
|
margin: 14px auto !important;
|
|
float: none !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|