Merge remote-tracking branch 'origin/master'
This commit is contained in:
lsymicc
42
ruoyi-ui/src/api/index.js
Normal file
42
ruoyi-ui/src/api/index.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 所有的单据数量
|
||||
export function finishCount(query) {
|
||||
return request({
|
||||
url: '/index/finishCount',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
//周出库入库作业数量
|
||||
export function weekjob(query) {
|
||||
return request({
|
||||
url: '/index/weekjob/count',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 库位统计
|
||||
export function cargospace(query) {
|
||||
return request({
|
||||
url: '/index/cargospace/count',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 单据列表
|
||||
export function billStatus(query) {
|
||||
return request({
|
||||
url: '/index/bill/status',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
//正执行待执行任务
|
||||
export function jobStatus(query) {
|
||||
return request({
|
||||
url: '/index/job/status',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@@ -90,16 +90,15 @@ export default {
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
data: ['入库', '出库']
|
||||
},
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
width: 2
|
||||
}
|
||||
name: '入库',
|
||||
itemStyle: {
|
||||
color: '#ff4d00',
|
||||
lineStyle: {
|
||||
color: '#ff4d00',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
@@ -109,21 +108,19 @@ export default {
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
name: '出库',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
color: '#3f9dfd',
|
||||
lineStyle: {
|
||||
color: '#3f9dfd',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
|
||||
@@ -1,38 +1,68 @@
|
||||
<template>
|
||||
<!-- 图表容器，使用传入的类名和样式 -->
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入 echarts 库
|
||||
import * as echarts from 'echarts'
|
||||
// 导入 macarons 主题
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
// 导入 resize 混入，用于处理图表大小调整
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
// 混入 resize 处理逻辑
|
||||
mixins: [resize],
|
||||
// 组件属性定义
|
||||
props: {
|
||||
// 图表容器的类名
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
// 图表容器的宽度
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
// 图表容器的高度
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
default: '350px'
|
||||
},
|
||||
// 图表数据对象，包含标签和数据集
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
// 组件数据
|
||||
data() {
|
||||
return {
|
||||
// echarts 实例
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
// 监听器
|
||||
watch: {
|
||||
// 监听图表数据变化
|
||||
chartData: {
|
||||
// 深度监听对象变化
|
||||
deep: true,
|
||||
// 数据变化时更新图表
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 组件挂载后初始化图表
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
// 组件销毁前清理图表实例
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
@@ -40,36 +70,61 @@ export default {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
// 组件方法
|
||||
methods: {
|
||||
// 初始化图表
|
||||
initChart() {
|
||||
// 创建 echarts 实例，使用 macarons 主题
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
// 设置图表配置项
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
// 设置图表配置项
|
||||
setOptions({ labels = [], datasets = [] } = {}) {
|
||||
// 将标签和数据转换为 echarts 所需的数据格式
|
||||
const data = labels.map((name, index) => ({
|
||||
name,
|
||||
value: datasets[0]?.data[index] || 0,
|
||||
itemStyle: {
|
||||
color: datasets[0]?.backgroundColor[index]
|
||||
}
|
||||
}))
|
||||
|
||||
// 设置图表配置
|
||||
this.chart.setOption({
|
||||
// 提示框配置
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
trigger: 'item', // 触发类型：数据项
|
||||
formatter: '{b} : {c} ({d}%)' // 提示框内容格式
|
||||
},
|
||||
// 图例配置
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
left: 'center', // 水平居中
|
||||
bottom: '10', // 距底部距离
|
||||
data: labels // 图例数据
|
||||
},
|
||||
// 系列列表配置
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
name: '库位统计', // 系列名称
|
||||
type: 'pie', // 图表类型：饼图
|
||||
roseType: 'radius', // 南丁格尔玫瑰图
|
||||
radius: ['20%', '70%'], // 内外半径，形成环形图
|
||||
center: ['50%', '38%'], // 中心点位置
|
||||
data, // 系列数据
|
||||
animationEasing: 'cubicInOut', // 动画缓动效果
|
||||
animationDuration: 2600, // 动画持续时间
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {d}%'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@@ -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>
|
||||
|
||||
198
ruoyi-ui/src/views/index_old.vue
Normal file
198
ruoyi-ui/src/views/index_old.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<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>
|
||||
</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="col-sm-6" style="height: 45vh; padding: 10px;">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{$t('viewsMain.finishedInboundTask')}}</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>
|
||||
|
||||
<!-- 未完成出库任务概览 -->
|
||||
<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>
|
||||
</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>
|
||||
</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-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>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listWork1, listWork2, listWork3, listWork4 } from '@/api/work'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
// 表格数据
|
||||
table1Data: [],
|
||||
table2Data: [],
|
||||
table3Data: [],
|
||||
table4Data: [],
|
||||
// 加载状态
|
||||
loading1: false,
|
||||
loading2: false,
|
||||
loading3: false,
|
||||
loading4: false,
|
||||
// 表格高度
|
||||
tableHeight: '35vh',
|
||||
// 定时器
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
// 开启定时刷新
|
||||
this.timer = setInterval(this.getList, 10000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前清除定时器
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 获取数据列表 */
|
||||
getList() {
|
||||
this.loading1 = true
|
||||
this.loading2 = true
|
||||
this.loading3 = true
|
||||
this.loading4 = true
|
||||
|
||||
// 获取未完成入库任务
|
||||
listWork3().then(response => {
|
||||
this.table1Data = response.rows
|
||||
this.loading1 = false
|
||||
})
|
||||
|
||||
// 获取已完成入库任务
|
||||
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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
.col-sm-6 {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.box-card {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -97,7 +97,11 @@ this.getWarehouseList()
|
||||
/** 查询仓库列表 */
|
||||
getWarehouseList() {
|
||||
// TODO: 调用获取仓库列表接口
|
||||
listWarehouse().then(response => {
|
||||
var quaryParam = {
|
||||
pageNum:1,
|
||||
pageSize:99
|
||||
}
|
||||
listWarehouse(quaryParam).then(response => {
|
||||
this.warehouseOptions = response.rows;
|
||||
});
|
||||
// this.warehouseOptions = [{warehouseId: "01", warehouseName: "仓库1"}, {warehouseId: "02", warehouseName: "仓库2"}];
|
||||
@@ -321,13 +325,13 @@ this.getWarehouseList()
|
||||
formatTooltip(params) {
|
||||
if (params.seriesName !== '满位') {
|
||||
// 排
|
||||
if (this.$i18n.locale ==='zh-cn') {
|
||||
if (this.$i18n.locale ==='zh-cn') {
|
||||
return params.seriesName + '<br>' + this.queryParams.thePlatoon + '排' + (params.data[0] + 1) + '列' + (params.data[1] + 1) + '层';
|
||||
}
|
||||
else{
|
||||
return params.seriesName + '<br>' + this.$t('KPIAnalysis_CargoPlan.row') + ':' + this.queryParams.thePlatoon + ' ' + this.$t('KPIAnalysis_CargoPlan.column') + ':' + (params.data[0] + 1) + ' ' + this.$t('KPIAnalysis_CargoPlan.floor') + ': ' + (params.data[1] + 1);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
const returnData = {
|
||||
|
||||
Reference in New Issue
Block a user