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.
479 lines
16 KiB
479 lines
16 KiB
<template>
|
|
<div class="dashboard-container">
|
|
<div class="dashboard-editor-container">
|
|
<panel-group :top-object-num="topObjectNum" />
|
|
<el-row :gutter="20" style="margin-bottom:20px;height: calc(50vh - 174px);">
|
|
<el-col :xs="24" :sm="24" :lg="12">
|
|
<div class="container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="home-item-title">
|
|
盘点日志
|
|
<router-link :to="{ path: '/check/check/checkLog'}">
|
|
<div style="position: absolute; right: 20px; top: 20px; color: #999;" class="el-icon-more" />
|
|
</router-link>
|
|
</h3>
|
|
<div class="home-flowable" style="height: calc(100% - 54px); overflow-x: hidden;">
|
|
<div class="home-tab">
|
|
<span :class="{'home-tab-active': flowableTabIndex == 0}">未完成({{ stockLogIncompleteData.length !==0? stockLogIncompleteData.length: 0 }})</span>
|
|
<span :class="{'home-tab-active': flowableTabIndex == 1}">已结束({{ stockLogCompletedData.length !==0? stockLogCompletedData.length: 0 }})</span>
|
|
<!-- <span :class="{'home-tab-active': flowableTabIndex == 2}">已完成({{ flowableData.length !==0? flowableData.length: 0 }})</span>
|
|
<span :class="{'home-tab-active': flowableTabIndex == 3}" @click="toMoreProcess">更多任务</span> -->
|
|
</div>
|
|
<div class="home-flowable-list" style="height: calc(100% - 45px); overflow-y: auto; overflow-x: hidden;">
|
|
<el-table v-if="stockLogIncompleteData.length !== 0" height="calc(100%)" :data="stockLogIncompleteData" class="archives-table" stripe style="width: 100%">
|
|
<el-table-column prop="stockBill" label="盘点单号" />
|
|
<el-table-column prop="stockRegion" label="目标位置" min-width="180" />
|
|
<el-table-column prop="stockGridNum" label="目标数量" align="right">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.stockGridNum + ' / '+ (scope.row.totalGridNum?scope.row.totalGridNum:'0') +' 层位' }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="state" label="盘点状态" align="center">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.state === 0" class="row-state row-lending state-active">已终止</span>
|
|
<span v-if="scope.row.state === 1" class="row-state row-warehousing state-active">排队中</span>
|
|
<span v-if="scope.row.state === 2" class="row-state row-binding state-active">盘点中</span>
|
|
<span v-if="scope.row.state === 3" class="row-state row-physical state-active">已完成</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="createTime" label="申请时间" width="180"> -->
|
|
<!-- <template slot-scope="scope"> -->
|
|
<!-- <div>{{ scope.row.createTime | parseTime }}</div> -->
|
|
<!-- </template> -->
|
|
<!-- </el-table-column> -->
|
|
</el-table>
|
|
<div v-else class="empty-main" style="height: 100%;">
|
|
<svg-icon icon-class="empty" class-name="empty-img" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="12">
|
|
<div class="container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="home-item-title">
|
|
服务器监控
|
|
<div style="position: absolute; right: 20px; top: 20px; color: #999; cursor: pointer;" class="el-icon-refresh" @click="refreshSystemData" />
|
|
</h3>
|
|
<!-- <div class="chart-wrapper"> -->
|
|
<!-- <serverProgress :system-data="systemData" /> -->
|
|
<!-- </div> -->
|
|
<swiper
|
|
ref="swiperServer"
|
|
class="swiper-server"
|
|
:options="swiperOptionServer"
|
|
:auto-update="true"
|
|
:auto-destroy="true"
|
|
:delete-instance-on-destroy="true"
|
|
:cleanup-styles-on-destroy="true"
|
|
>
|
|
<swiper-slide class="swiper-slide-server">
|
|
<serverProgress :system-data="systemData" />
|
|
</swiper-slide>
|
|
<swiper-slide class="swiper-slide-server cpu-echarts">
|
|
<serverGpuUse :utilization="utilization" />
|
|
<div class="cpu-right">
|
|
<serverGpu :temperature="temperature" />
|
|
<serverGpuOther :memory-total="memoryTotal" :memory-free="memoryFree" />
|
|
</div>
|
|
<div style="position: absolute; bottom: 136px; right: 70px; font-weight: bold;">{{ GPUName }}</div>
|
|
</swiper-slide>
|
|
<swiper-slide class="swiper-slide-server">
|
|
<serveTerminal ref="serveTerminalRefs" />
|
|
</swiper-slide>
|
|
<div slot="pagination" class="swiper-pagination" />
|
|
</swiper>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" style="height:calc(50vh - 174px);">
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<!-- 档案借阅 -->
|
|
<div class="container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="home-item-title">
|
|
盘点概况
|
|
</h3>
|
|
<div v-if="taskStockLogData.length !== 0" class="chart-wrapper">
|
|
<taskStockLogEcharts :task-stock-log-data="taskStockLogData" />
|
|
</div>
|
|
<div v-else class="empty-main">
|
|
<svg-icon icon-class="empty" class-name="empty-img" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<!-- 档案门类 -->
|
|
<div class="container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="home-item-title">
|
|
盘点统计
|
|
</h3>
|
|
<div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;">
|
|
<checkSwiper ref="checkSwiperRefs" />
|
|
</div>
|
|
<!-- <div v-else class="empty-main">
|
|
<svg-icon icon-class="empty" class-name="empty-img" />
|
|
<p>暂无数据</p>
|
|
</div> -->
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<!-- 档案类型 -->
|
|
<div class="container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="home-item-title">
|
|
流通统计
|
|
</h3>
|
|
<!-- <div class="refresh-date">2024-11-28 09:46</div> -->
|
|
<div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;">
|
|
<bookSwiper ref="bookSwiperRefs" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PanelGroup from './dashboard/PanelGroup'
|
|
import taskStockLogEcharts from '@/views/components/echarts/taskStockLog.vue'
|
|
// import lendAcross from '@/views/components/echarts/lendAcross.vue'
|
|
// import catePie from '@/views/components/echarts/catePie.vue'
|
|
// import typePie from '@/views/components/echarts/typePie.vue'
|
|
import bookSwiper from '@/views/components/bookSwiper.vue'
|
|
import checkSwiper from '@/views/components/checkSwiper.vue'
|
|
import serverProgress from '@/views/components/echarts/serverProgress.vue'
|
|
import serverGpu from '@/views/components/echarts/serverGpu.vue'
|
|
import serverGpuUse from '@/views/components/echarts/serverGpuUse.vue'
|
|
import serverGpuOther from '@/views/components/echarts/serverGpuOther.vue'
|
|
import serveTerminal from '@/views/components/serveTerminal.vue'
|
|
import { FetchInitHomeInfo, FetchInitStockInfo } from '@/api/stockTask/index'
|
|
import { FetchInitStockLogList } from '@/api/stockTaskLog/index'
|
|
import { FetchSystemInfo } from '@/api/home/cpu/index'
|
|
import { mapGetters } from 'vuex'
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
import 'swiper/dist/css/swiper.css'
|
|
|
|
export default {
|
|
name: 'Dashboard',
|
|
components: {
|
|
PanelGroup,
|
|
// lendAcross,
|
|
taskStockLogEcharts,
|
|
// catePie,
|
|
bookSwiper,
|
|
checkSwiper,
|
|
// typePie,
|
|
serverProgress,
|
|
serverGpu,
|
|
serverGpuUse,
|
|
serverGpuOther,
|
|
serveTerminal,
|
|
swiper,
|
|
swiperSlide
|
|
},
|
|
data() {
|
|
return {
|
|
topObjectNum: {
|
|
regionCount: 0,
|
|
shelfCount: 0,
|
|
gridCount: 0,
|
|
deviceCount: 0,
|
|
noStockGridCount: 0,
|
|
deviceErrorCount: 0
|
|
},
|
|
taskStockLogData: [],
|
|
echartsTimer: null,
|
|
refreshtime: 10000,
|
|
systemTimer: null,
|
|
systemData: {
|
|
cpuPercentage: 0,
|
|
memPercentage: 0,
|
|
sysFilesPercentage: 0
|
|
},
|
|
stockLogCompletedData: [],
|
|
stockLogIncompleteData: [],
|
|
|
|
archivesTotalNum: 0,
|
|
flowableData: [],
|
|
flowableTabIndex: 0,
|
|
lendData: {
|
|
archivesTotalNum: null,
|
|
otherData: []
|
|
},
|
|
cateData: [],
|
|
typeData: [],
|
|
addArcivesData: {
|
|
addArcivesMaxCount: null,
|
|
addArcivesMonth: [],
|
|
addArcivesNum: [],
|
|
addArcivesNumFile: []
|
|
},
|
|
swiperActiveIndex: 0,
|
|
swiperOptionServer: {
|
|
autoplay: {
|
|
delay: 8000,
|
|
disableOnInteraction: false
|
|
},
|
|
slidesPerView: 'auto',
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true
|
|
}
|
|
},
|
|
memoryFree: 0,
|
|
memoryTotal: 0,
|
|
GPUName: '',
|
|
temperature: 0,
|
|
utilization: 0
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'user'
|
|
]),
|
|
swiperServer() {
|
|
return this.$refs.swiperServer.$el.swiper
|
|
}
|
|
},
|
|
created() {
|
|
this.handleMainData()
|
|
this.getSystemInfo()
|
|
this.getStockLog()
|
|
this.handleInitStockInfo()
|
|
this.$nextTick(() => {
|
|
this.$refs.bookSwiperRefs.swiperParams = {}
|
|
this.$refs.bookSwiperRefs.swiperShelfParams = {}
|
|
if (this.$refs.bookSwiperRefs.swiperActiveIndex === 0) {
|
|
this.$refs.bookSwiperRefs.getInitHotBookList()
|
|
} else {
|
|
this.$refs.bookSwiperRefs.getInitHotShelfList()
|
|
}
|
|
|
|
this.$refs.serveTerminalRefs.initData()
|
|
})
|
|
},
|
|
mounted() {
|
|
// const _this = this
|
|
// // 每隔一分钟刷新档案借阅和档案类型的数据
|
|
// this.echartsTimer = setInterval(() => {
|
|
// _this.lendData = {
|
|
// archivesTotalNum: null,
|
|
// otherData: []
|
|
// }
|
|
// _this.cateData = []
|
|
// _this.typeData = []
|
|
// _this.addArcivesData = {
|
|
// addArcivesMaxCount: null,
|
|
// addArcivesMonth: [],
|
|
// addArcivesNum: [],
|
|
// addArcivesNumFile: []
|
|
// }
|
|
// _this.handleMainData()
|
|
// }, this.refreshtime)
|
|
|
|
// 服务器监控定时更新
|
|
// this.systemTimer = setInterval(() => {
|
|
// _this.systemData = {
|
|
// cpuPercentage: 0,
|
|
// memPercentage: 0,
|
|
// sysFilesPercentage: 0
|
|
// }
|
|
// this.getSystemInfo()
|
|
// }, 3000)
|
|
},
|
|
methods: {
|
|
getSystemInfo() {
|
|
FetchSystemInfo().then(res => {
|
|
// cpu 占有率 （总的cpuTotal-空闲的cpuFree）/总的cpuTotal
|
|
this.systemData.cpuPercentage = Math.round((res.cpuTotal - res.cpuFree) / res.cpuTotal * 100)
|
|
|
|
// 内存占比 使用的memUsed/总的memTotal
|
|
this.systemData.memPercentage = Math.round(res.memUsed / res.memTotal * 100)
|
|
|
|
this.memoryFree = res.memoryFree
|
|
this.memoryTotal = res.memoryTotal
|
|
this.GPUName = res.GPUName
|
|
this.temperature = res.temperature
|
|
this.utilization = res.utilization
|
|
|
|
// 磁盘占比 多个磁盘 使用总和sysFiles[i].used的和/总的总和sysFiles[i].total的和
|
|
let sysFilesTotalUsed = 0
|
|
let sysFilesTotal = 0
|
|
res.sysFiles.forEach(item => {
|
|
sysFilesTotalUsed += parseFloat(item.used)
|
|
sysFilesTotal += parseFloat(item.total)
|
|
})
|
|
this.systemData.sysFilesPercentage = Math.round((sysFilesTotalUsed / sysFilesTotal) * 100)
|
|
})
|
|
},
|
|
refreshSystemData() {
|
|
this.systemData = {
|
|
cpuPercentage: 0,
|
|
memPercentage: 0,
|
|
sysFilesPercentage: 0
|
|
}
|
|
this.memoryFree = 0
|
|
this.memoryTotal = 0
|
|
this.GPUName = ''
|
|
this.temperature = 0
|
|
this.utilization = 0
|
|
|
|
this.getSystemInfo()
|
|
this.$refs.serveTerminalRefs.initData()
|
|
},
|
|
getStockLog() {
|
|
FetchInitStockLogList().then(res => {
|
|
this.stockLogCompletedData = res.content.filter(item => [0, 3].includes(item.state))
|
|
this.stockLogIncompleteData = res.content.filter(item => [1, 2].includes(item.state))
|
|
})
|
|
},
|
|
handleMainData() {
|
|
FetchInitHomeInfo().then(data => {
|
|
this.topObjectNum = {
|
|
regionCount: data.regionCount,
|
|
shelfCount: data.shelfCount,
|
|
gridCount: data.gridCount,
|
|
deviceCount: data.deviceCount,
|
|
noStockGridCount: data.noStockGridCount,
|
|
deviceErrorCount: data.deviceErrorCount
|
|
}
|
|
})
|
|
},
|
|
handleInitStockInfo(params) {
|
|
FetchInitStockInfo(params).then(res => {
|
|
this.taskStockLogData = [
|
|
{ value: res.onShelfNum - res.errorShelfNum - res.errorOrderNum, name: '正常在架' },
|
|
{ value: res.errorShelfNum, name: '错架' },
|
|
{ value: res.errorOrderNum, name: '错序' }
|
|
]
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
.dashboard-editor-container {
|
|
padding: 20px;
|
|
position: relative;
|
|
|
|
.chart-wrapper {
|
|
height: calc(100% - 120px);
|
|
}
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
.el-col {
|
|
height: 100%;
|
|
}
|
|
.container-left,
|
|
.container-right,
|
|
.container-wrap,
|
|
.el-card,
|
|
.header-container-wrap {
|
|
min-height: 100%;
|
|
}
|
|
.container-wrap {
|
|
min-height: auto;
|
|
height: 100%;
|
|
}
|
|
.home-item-title{
|
|
position: relative;
|
|
padding: 18px 0 18px 15px;
|
|
font-size: 16px;
|
|
color: #0C0E1E;
|
|
&::before{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
content: "";
|
|
width: 3px;
|
|
height: 16px;
|
|
background-color: #0348F3;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
.home-flowable{
|
|
padding: 0 20px;
|
|
}
|
|
.home-tab{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
span{
|
|
display: block;
|
|
margin-right: 30px;
|
|
padding-bottom: 3px;
|
|
border-bottom: 3px solid #fff;
|
|
&.home-tab-active{
|
|
color: #0348F3;
|
|
// border-bottom: 3px solid #0348F3;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar {
|
|
width: 5px !important;
|
|
height: 5px !important;
|
|
background-color: #DDE8FB !important;
|
|
}
|
|
|
|
::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
border-radius: 3px;
|
|
background-color: #4578F6 !important;
|
|
}
|
|
|
|
::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
|
|
background-color: #4578F6 !important;
|
|
}
|
|
|
|
::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-corner {
|
|
background-color: #DDE8FB !important;
|
|
}
|
|
.refresh-date{
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 10px;
|
|
font-size: 12px;
|
|
line-height: 30px;
|
|
}
|
|
.swiper-server{
|
|
position: relative;
|
|
height: 300px;
|
|
::v-deep .swiper-wrapper{
|
|
height: 344px;
|
|
}
|
|
.swiper-pagination{
|
|
bottom: 80px;
|
|
}
|
|
}
|
|
|
|
.cpu-echarts{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
// background-color: #000;
|
|
.cpu-right{
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
// flex-direction: column;
|
|
// flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style>
|