首页2
This commit is contained in:
猫猫guowen
@@ -1,198 +1,375 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="row">
|
||||
<!-- 未完成入库任务概览 -->
|
||||
<div class="col-sm-6" style="height: 45vh; padding: 10px;">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{$t('viewsMain.unfinishedInboundTask')}}</span>
|
||||
<!-- 顶部统计面板 -->
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="clipboard" class-name="card-panel-icon"/>
|
||||
</div>
|
||||
<el-table
|
||||
:data="table1Data"
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
v-loading="loading1">
|
||||
<el-table-column prop="workValue" :label="$t('viewsMain.taskKey')" /> <!-- 任务键值 -->
|
||||
<el-table-column prop="workName" :label="$t('viewsMain.unfinishedInboundTaskName')" /><!-- 未完成入库任务 -->
|
||||
<el-table-column prop="workNum" :label="$t('viewsMain.totalUnfinishedCount')" ><!-- 全部未完成数量 -->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- {{ Number(scope.row.workNum).toFixed(6) }}-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
<el-table-column prop="by1" :label="$t('viewsMain.todayUnfinishedCount')"> <!-- 今日未完成数量 -->
|
||||
<!-- <template slot-scope="scope">
|
||||
{{ Number(scope.row.by1).toFixed(6) }}
|
||||
</template>-->
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">入库单数</div>
|
||||
<count-to :start-val="0" :end-val="Number(quantity.inbound_order) || 0" :duration="2600" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="documentation" class-name="card-panel-icon"/>
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">出库单数</div>
|
||||
<count-to :start-val="0" :end-val="Number(quantity.outbound_order) || 0" :duration="3000" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
<svg-icon icon-class="chart" class-name="card-panel-icon"/>
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">盘点单数</div>
|
||||
<count-to :start-val="0" :end-val="Number(quantity.inbound_order)|| 0" :duration="3200" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-icon-wrapper icon-shopping">
|
||||
<svg-icon icon-class="excel" class-name="card-panel-icon"/>
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">总单据数</div>
|
||||
<count-to :start-val="0" :end-val="Number(quantity.total_documents)|| 0" :duration="3600" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 已完成入库任务概览 -->
|
||||
<div class="col-sm-6" style="height: 45vh; padding: 10px;">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{$t('viewsMain.finishedInboundTask')}}</span>
|
||||
<!-- 中间图表区域 -->
|
||||
<el-row :gutter="32" style="margin-bottom: 32px;">
|
||||
<el-col :xs="24" :sm="24" :lg="16">
|
||||
<div class="chart-wrapper">
|
||||
<div class="chart-header">
|
||||
<span>近一周入库出库统计</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="table2Data"
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
v-loading="loading2">
|
||||
<el-table-column prop="workValue" :label="$t('viewsMain.taskKey')" /><!-- 任务键值 -->
|
||||
<el-table-column prop="workName" :label="$t('viewsMain.finishedInboundTaskName')" /><!-- 已完成入库任务 -->
|
||||
<el-table-column prop="workNum" :label="$t('viewsMain.totalFinishedCount')" ><!-- 全部已完成数量 -->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- {{ Number(scope.row.workNum).toFixed(6) }}-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
<el-table-column prop="by1" :label="$t('viewsMain.todayFinishedCount')"> <!-- 今日已完成数量 -->
|
||||
<!-- <template slot-scope="scope">
|
||||
{{ Number(scope.row.by1).toFixed(6) }}-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
<line-chart :chart-data="lineChartData"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<div class="chart-header">
|
||||
<span>库位统计</span>
|
||||
</div>
|
||||
<pie-chart :chart-data="pieChartData"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 未完成出库任务概览 -->
|
||||
<div class="col-sm-6" style="height: 45vh; padding: 10px;">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{$t('viewsMain.unfinishedOutboundTask')}}</span>
|
||||
<!-- 底部列表区域 -->
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="list-wrapper">
|
||||
<div class="list-header">
|
||||
<span>单据列表</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="table3Data"
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
v-loading="loading3">
|
||||
<el-table-column prop="workValue" :label="$t('viewsMain.taskKey')" /><!-- 任务键值 -->
|
||||
<el-table-column prop="workName" :label="$t('viewsMain.unfinishedOutboundTaskName')" /><!-- 未完成出库任务 -->
|
||||
<el-table-column prop="workNum" :label="$t('viewsMain.totalUnfinishedCount')"><!-- 全部未完成数量 -->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- {{ Number(scope.row.workNum).toFixed(6) }}-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
<el-table-column prop="by1" :label="$t('viewsMain.todayUnfinishedCount')"> <!-- 今日未完成数量 -->
|
||||
<!-- <template slot-scope="scope">
|
||||
{{ Number(scope.row.by1).toFixed(6) }}-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
<el-table :data="documentList" style="width: 100%" size="mini" height="300"
|
||||
:header-cell-style="{backgroundColor: '#f5f7fa'}">
|
||||
<el-table-column prop="id" label="单据编号"/>
|
||||
<el-table-column prop="type" :formatter="type_" label="类型" width="80"/>
|
||||
<el-table-column prop="status" :formatter="status_" label="状态" width="80"/>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 已完成出库任务概览 -->
|
||||
<div class="col-sm-6" style="height: 45vh; padding: 10px;">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{$t('viewsMain.finishedOutboundTask')}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="list-wrapper">
|
||||
<div class="list-header">
|
||||
<span>正执行任务</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="table4Data"
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
v-loading="loading4">
|
||||
<el-table-column prop="workValue" :label="$t('viewsMain.taskKey')" /><!-- 任务键值 -->
|
||||
<el-table-column prop="workName" :label="$t('viewsMain.finishedOutboundTaskName')" /><!-- 已完成出库任务 -->
|
||||
<el-table-column prop="workNum" :label="$t('viewsMain.totalFinishedCount')" ><!-- 全部已完成数量 -->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- {{ Number(scope.row.workNum).toFixed(6) }}-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
<el-table-column prop="by1" :label="$t('viewsMain.todayFinishedCount')"> <!-- 今日已完成数量 -->
|
||||
<!-- <template slot-scope="scope">
|
||||
{{ Number(scope.row.by1).toFixed(6) }}-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
<el-table :data="executingTasks" style="width: 100%" size="mini" height="300"
|
||||
:header-cell-style="{backgroundColor: '#f5f7fa'}">
|
||||
<el-table-column prop="jobId" label="任务编号"/>
|
||||
<el-table-column prop="inOrOut" label="类型" width="80"/>
|
||||
<el-table-column prop="statusLabel" label="状态" width="80"/>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="list-wrapper">
|
||||
<div class="list-header">
|
||||
<span>待执行任务</span>
|
||||
</div>
|
||||
<el-table :data="pendingTasks" style="width: 100%" size="mini" height="300"
|
||||
:header-cell-style="{backgroundColor: '#f5f7fa'}">
|
||||
<el-table-column prop="jobId" label="任务编号"/>
|
||||
<el-table-column prop="inOrOut" label="类型" width="80"/>
|
||||
<el-table-column prop="priority" label="优先级" width="80"/>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listWork1, listWork2, listWork3, listWork4 } from '@/api/work'
|
||||
import CountTo from 'vue-count-to'
|
||||
import LineChart from './dashboard/LineChart'
|
||||
import PieChart from './dashboard/PieChart'
|
||||
import {finishCount, weekjob, cargospace, billStatus, jobStatus} from "@/api/index";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
CountTo,
|
||||
LineChart,
|
||||
PieChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表格数据
|
||||
table1Data: [],
|
||||
table2Data: [],
|
||||
table3Data: [],
|
||||
table4Data: [],
|
||||
// 加载状态
|
||||
loading1: false,
|
||||
loading2: false,
|
||||
loading3: false,
|
||||
loading4: false,
|
||||
// 表格高度
|
||||
tableHeight: '35vh',
|
||||
// 定时器
|
||||
quantity: {
|
||||
inbound_order: '',
|
||||
outbound_order: '',
|
||||
inventory_sheet: '',
|
||||
total_documents: ''
|
||||
},
|
||||
chartType: '入库',
|
||||
lineChartData: {
|
||||
expectedData: [],
|
||||
actualData: []
|
||||
},
|
||||
pieChartData: {
|
||||
labels: ['空货位', '满货位', '入库已分配', '出库已分配', '入库需盘点', '出库需盘点'],
|
||||
datasets: [{
|
||||
data: [],
|
||||
backgroundColor: ['#36f7c4', '#ffc240', '#34bfa3', '#ff5f5f', '#ffd700', '#c669cd']
|
||||
}]
|
||||
},
|
||||
documentList: [],
|
||||
executingTasks: [],
|
||||
pendingTasks: [],
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
// 开启定时刷新
|
||||
this.timer = setInterval(this.getList, 10000)
|
||||
this.getListData()
|
||||
this.timer = setInterval(() => {
|
||||
this.getListData()
|
||||
}, 5000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前清除定时器
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 获取数据列表 */
|
||||
getList() {
|
||||
this.loading1 = true
|
||||
this.loading2 = true
|
||||
this.loading3 = true
|
||||
this.loading4 = true
|
||||
|
||||
// 获取未完成入库任务
|
||||
listWork3().then(response => {
|
||||
this.table1Data = response.rows
|
||||
this.loading1 = false
|
||||
getListData() {
|
||||
// 所有单据数量
|
||||
finishCount().then(response => {
|
||||
this.quantity.inbound_order = response.data.stockinCount
|
||||
this.quantity.outbound_order = response.data.stockoutCount
|
||||
this.quantity.inventory_sheet = response.data.stockcheckCount
|
||||
this.quantity.total_documents = response.data.stockinCount + response.data.stockoutCount + response.data.stockcheckCount
|
||||
})
|
||||
// 周入库出库作业
|
||||
weekjob().then(response => {
|
||||
this.lineChartData.expectedData = response.data.inJobCounts
|
||||
this.lineChartData.actualData = response.data.outJobCounts
|
||||
})
|
||||
// 库位统计
|
||||
cargospace().then(response => {
|
||||
this.pieChartData.datasets[0].data = response.data.statusCounts
|
||||
})
|
||||
// 单据列表
|
||||
billStatus().then(response => {
|
||||
this.documentList = response.data
|
||||
})
|
||||
// 正执行待执行作业
|
||||
jobStatus().then(response => {
|
||||
this.executingTasks = response.data.status3
|
||||
this.pendingTasks = response.data.status2
|
||||
})
|
||||
|
||||
// 获取已完成入库任务
|
||||
listWork1().then(response => {
|
||||
this.table2Data = response.rows
|
||||
this.loading2 = false
|
||||
})
|
||||
|
||||
// 获取未完成出库任务
|
||||
listWork4().then(response => {
|
||||
this.table3Data = response.rows
|
||||
this.loading3 = false
|
||||
})
|
||||
|
||||
// 获取已完成出库任务
|
||||
listWork2().then(response => {
|
||||
this.table4Data = response.rows
|
||||
this.loading4 = false
|
||||
})
|
||||
},
|
||||
type_(row, column) {
|
||||
const type = row.type
|
||||
if (type == 1) {
|
||||
return "入库"
|
||||
} else if (type == 2) {
|
||||
return "出库"
|
||||
} else if (type == 3) {
|
||||
return "盘点"
|
||||
}
|
||||
return ""
|
||||
},
|
||||
status_(row, column) {
|
||||
const status = row.status
|
||||
if (status == 1) {
|
||||
return "未执行"
|
||||
} else if (status == 2) {
|
||||
return "审核中"
|
||||
} else if (status == 3) {
|
||||
return "正执行"
|
||||
}
|
||||
return ""
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row {
|
||||
<style lang="scss" scoped>
|
||||
.panel-group {
|
||||
margin-top: 18px;
|
||||
|
||||
.card-panel-col {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
height: 108px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: rgba(0, 0, 0, .05);
|
||||
|
||||
&:hover {
|
||||
.card-panel-icon-wrapper {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
background: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
background: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
background: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
background: #34bfa3;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
color: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
color: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
color: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
color: #34bfa3;
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: left;
|
||||
margin: 14px 0 0 14px;
|
||||
padding: 16px;
|
||||
transition: all 0.38s ease-out;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-panel-icon {
|
||||
float: left;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.card-panel-description {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin: 26px;
|
||||
margin-left: 0px;
|
||||
|
||||
.card-panel-text {
|
||||
line-height: 18px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-panel-num {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
margin-bottom: 32px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -10px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
.col-sm-6 {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.box-card {
|
||||
height: 100%;
|
||||
|
||||
.list-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
margin-bottom: 32px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
height: 380px;
|
||||
|
||||
.list-header {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table {
|
||||
::v-deep .el-table__body-wrapper {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 3px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user