3 changed files with 553 additions and 104 deletions
-
425src/views/dashboard/PanelGroup-old.vue
-
175src/views/dashboard/PanelGroup.vue
-
55src/views/home.vue
@ -0,0 +1,425 @@ |
|||||
|
<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"> |
||||
|
<!-- @click="handleSetLineChartData('device')" --> |
||||
|
<div class="card-panel zaixianshebei" @click="getDeviceDetail('on')"> |
||||
|
<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"> |
||||
|
<!-- @click="handleSetLineChartData('device')" --> |
||||
|
<div class="card-panel lixianshebei" @click="getDeviceDetail('off')"> |
||||
|
<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-dialog :title="deviveTitle" :visible.sync="deviceVisible"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-table v-loading="tableLoading" :data="tableDeviceData" style="width: 100%" height="520px"> |
||||
|
<el-table-column type="index" label="序号" align="center" width="60" /> |
||||
|
<el-table-column align="center" prop="supplierId.name" label="品牌" width="100" show-overflow-tooltip /> |
||||
|
<el-table-column prop="deviceName" label="设备名称" min-width="200" show-overflow-tooltip /> |
||||
|
<el-table-column label="设备ID" min-width="140" show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.deviceId"> {{ scope.row.deviceId }} </span> |
||||
|
<span v-else>——</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" label="接口IP" width="120" show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.deviceIp"> {{ scope.row.deviceIp }} </span> |
||||
|
<span v-else>——</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" label="端口" min-width="90"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.devicePort"> {{ scope.row.devicePort }} </span> |
||||
|
<span v-else>——</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column v-if="deviceType==='off'" align="center" label="状态" min-width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.deviceId !== 'PDA001'">设备连接超时</span> |
||||
|
<span v-else>设备常离线</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column v-if="deviceType==='off'" label="解决办法或说明" min-width="300"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.deviceId !== 'PDA001'"> |
||||
|
1.请检查网络是否连通；<br> |
||||
|
2.请检查设备是否正常开启；<br> |
||||
|
3.以上2种情况都不存在，请重启设备；</span> |
||||
|
<span v-else>该设备采用离线工作模式，无需检测</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</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, getDeviceOnoff } 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, |
||||
|
onlineDevice: [], |
||||
|
offDevice: [], |
||||
|
deviveTitle: '在线设备', |
||||
|
deviceVisible: false, |
||||
|
tableLoading: false, |
||||
|
tableDeviceData: [], |
||||
|
deviceType: 'on' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'roles' |
||||
|
]) |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.handleArchivesNum() |
||||
|
this.handleCaseNum() |
||||
|
this.getDevice() |
||||
|
// 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' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
getDevice() { |
||||
|
getDeviceOnoff().then(data => { |
||||
|
this.getDeviceFlag = true |
||||
|
this.totalDeviceNum = data.deviceall.length |
||||
|
this.onlineDeviceNum = data.online.length |
||||
|
this.offlineDeviceNum = data.offline.length |
||||
|
this.onlineDevice = data.online |
||||
|
this.offDevice = data.offline |
||||
|
}) |
||||
|
}, |
||||
|
getDeviceDetail(type) { |
||||
|
this.deviceType = type |
||||
|
this.deviceVisible = true |
||||
|
this.tableDeviceData = [] |
||||
|
if (type === 'on') { |
||||
|
this.deviveTitle = '在线设备' |
||||
|
this.tableDeviceData = this.onlineDevice |
||||
|
} else { |
||||
|
this.deviveTitle = '离线设备' |
||||
|
this.tableDeviceData = this.offDevice |
||||
|
} |
||||
|
}, |
||||
|
// 档案总数 |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog { |
||||
|
width: 950px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue