546 lines
13 KiB
Vue
546 lines
13 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2023-09-14 13:44:22
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2024-04-18 14:07:09
|
|
* @Description:,
|
|
-->
|
|
<template>
|
|
<div id="main-body" ref="container" allowfullscreen="true">
|
|
<div class="container-title">
|
|
环动科技热处理车间立库看板
|
|
<div class="leftName">中国联合工程</div>
|
|
<div class="rightName">
|
|
{{ gettime[1] }} | {{ gettime[0] }} | 星期{{ gettime[2] }}
|
|
</div>
|
|
<el-button
|
|
type="text"
|
|
class="title-button"
|
|
:style="{ right: 15 + 'px', top: 27 + 'px', fontSize: 35 + 'px' }"
|
|
@click="changeFullScreen">
|
|
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
|
<svg-icon v-else icon-class="fullScreenView" />
|
|
</el-button>
|
|
</div>
|
|
<div class="container-body">
|
|
<el-row :gutter="5">
|
|
<el-col :span="8">
|
|
<div class="div-top div1">
|
|
<div class="div-title">
|
|
<svg-icon
|
|
icon-class="div1"
|
|
style="margin: 0 10px 0 20px; font-size: 25px" />
|
|
仓库实时状况
|
|
</div>
|
|
<pieChart
|
|
ref="pieChart1"
|
|
:id="'pieChart1'"
|
|
height="300px"
|
|
title="仓库实时状况"
|
|
:pie-data="pieData1" />
|
|
<div class="div1-info">
|
|
<div class="tip">1</div>
|
|
当前占用：{{ percent }}% | {{ total }}台
|
|
<div class="residue">剩余：{{ residue }}台</div>
|
|
<el-progress
|
|
style="margin-top: 15px"
|
|
:stroke-width="15"
|
|
:percentage="percent"
|
|
color="#2760FF"
|
|
define-back-color="#294378"
|
|
:show-text="false" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="div-top div2">
|
|
<div class="div-title">
|
|
<svg-icon icon-class="redis" style="margin: 0 10px 0 20px" />
|
|
出入库数据概况
|
|
<div style="float: right; margin-right: 20px" v-show="false">
|
|
<el-radio-group
|
|
v-model="radio"
|
|
size="mini"
|
|
@input="setType"
|
|
fill="#1D74D8">
|
|
<el-radio-button label="全部"></el-radio-button>
|
|
<el-radio-button label="本周"></el-radio-button>
|
|
<el-radio-button label="本月"></el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<div class="div2-body">
|
|
<el-col :span="12" v-for="i in divList" :key="i.name">
|
|
<div class="div2-mini-body">
|
|
<div>{{ i.value }}</div>
|
|
<div class="div2-mini-body-sub">- {{ i.name }} -</div>
|
|
</div>
|
|
</el-col>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="div-top div3">
|
|
<div class="div-title">
|
|
<svg-icon
|
|
icon-class="div3"
|
|
style="margin: 0 10px 0 20px; font-size: 25px" />
|
|
仓库实时状况
|
|
</div>
|
|
<pieChart
|
|
ref="pieChart2"
|
|
:id="'pieChart2'"
|
|
height="380px"
|
|
title="仓库实时状况"
|
|
:pie-data="pieData2" />
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="div-footer div4">
|
|
<div class="div-title">
|
|
<svg-icon
|
|
icon-class="div4"
|
|
style="margin: 0 10px 0 20px; font-size: 25px" />
|
|
库内货物情况
|
|
</div>
|
|
<barChart
|
|
ref="barChart"
|
|
:id="'barChart'"
|
|
height="350px"
|
|
title="库内货物情况"
|
|
:bar-data="barData" />
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="div-footer div5">
|
|
<div class="div-title">
|
|
<svg-icon
|
|
icon-class="div5"
|
|
style="margin: 0 10px 0 20px; font-size: 25px" />
|
|
出入库任务
|
|
</div>
|
|
<div style="margin: 10px">
|
|
<el-table
|
|
:data="tableData"
|
|
:header-cell-style="{
|
|
background: 'rgba(32, 55, 96, 0.9)',
|
|
color: '#fff',
|
|
height: 20 + 'px',
|
|
lineHeight: 20 + 'px',
|
|
padding: 0,
|
|
fontSize: 12 + 'px',
|
|
}"
|
|
height="340px"
|
|
:row-style="setRowStyle"
|
|
style="width: 100%; background: transparent"
|
|
ref="dataList">
|
|
<el-table-column type="index" label="序号"></el-table-column>
|
|
<el-table-column prop="mainTaskType" label="类型" width="60">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.mainTaskType === 1
|
|
? '入库'
|
|
: scope.row.mainTaskType === 2
|
|
? '出库'
|
|
: scope.row.mainTaskType === 3
|
|
? '移库'
|
|
: scope.row.mainTaskType === 4
|
|
? '越库'
|
|
: scope.row.mainTaskType === 5
|
|
? '盘点'
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="状态" width="80">
|
|
<template v-slot="scope">
|
|
<span>
|
|
<div
|
|
class="table-div"
|
|
:class="
|
|
['status0', 'status1', 'status2'][scope.row.status]
|
|
" />
|
|
{{ ['未执行', '执行中', '已完成'][scope.row.status] }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="添加时间" width="150">
|
|
<template v-slot="scope">
|
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="productName" label="货物名称" />
|
|
<el-table-column prop="productNum" label="货物数量/件" />
|
|
<el-table-column prop="remark" label="备注" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import barChart from './chart/BarChart.vue';
|
|
import pieChart from './chart/PieChart.vue';
|
|
import screenfull from 'screenfull';
|
|
import { screenData } from '@/api/axl/alarmLog';
|
|
|
|
const legendData2 = [
|
|
{
|
|
name: '齿轮',
|
|
value: 498,
|
|
},
|
|
{
|
|
name: '轴承',
|
|
value: 285,
|
|
},
|
|
{
|
|
name: '其他',
|
|
value: 388,
|
|
},
|
|
];
|
|
export default {
|
|
name: 'Board',
|
|
components: {
|
|
barChart,
|
|
pieChart,
|
|
},
|
|
data() {
|
|
return {
|
|
gettime: [],
|
|
pieData1: [],
|
|
pieData2: legendData2,
|
|
barData: [],
|
|
percent: 0,
|
|
total: 0,
|
|
residue: 0,
|
|
radio: '全部',
|
|
divList: [],
|
|
tableData: [],
|
|
isFullScreen: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getCurrentTime();
|
|
this.getScreenData();
|
|
this.startFun();
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
startFun() {
|
|
const timer = setInterval(() => {
|
|
this.getCurrentTime();
|
|
this.getScreenData();
|
|
}, 60000);
|
|
this.$once('hook:beforeDestroy', () => {
|
|
clearInterval(timer);
|
|
});
|
|
},
|
|
getCurrentTime() {
|
|
let yy = new Date().getFullYear();
|
|
let mm = new Date().getMonth() + 1;
|
|
let dd = new Date().getDate();
|
|
let hh = new Date().getHours();
|
|
let mf =
|
|
new Date().getMinutes() < 10
|
|
? '0' + new Date().getMinutes()
|
|
: new Date().getMinutes();
|
|
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
|
|
this.gettime = [
|
|
yy + '.' + mm + '.' + dd,
|
|
hh + ':' + mf,
|
|
weekdays[new Date().getDay()],
|
|
];
|
|
},
|
|
setType() {
|
|
console.log(this.radio);
|
|
},
|
|
setRowStyle(v) {
|
|
if (v.rowIndex % 2 === 0) {
|
|
return {
|
|
background: 'rgba(14, 32, 62, 0.5)',
|
|
color: 'rgba(255,255,255,0.5)',
|
|
height: 20 + 'px',
|
|
lineHeight: 20 + 'px',
|
|
padding: 0,
|
|
fontSize: 14 + 'px',
|
|
};
|
|
} else {
|
|
return {
|
|
background: 'rgba(32, 55, 96, 0.5)',
|
|
color: 'rgba(255,255,255,0.5)',
|
|
height: 20 + 'px',
|
|
lineHeight: 20 + 'px',
|
|
padding: 0,
|
|
fontSize: 14 + 'px',
|
|
};
|
|
}
|
|
},
|
|
change() {
|
|
this.isFullScreen = screenfull.isFullscreen;
|
|
},
|
|
|
|
init() {
|
|
if (screenfull.isEnabled) {
|
|
screenfull.on('change', this.change);
|
|
}
|
|
},
|
|
|
|
destroy() {
|
|
if (screenfull.isEnabled) {
|
|
screenfull.off('change', this.change);
|
|
}
|
|
},
|
|
|
|
changeFullScreen() {
|
|
if (!screenfull.isEnabled) {
|
|
this.$message({
|
|
message: 'you browser can not work',
|
|
type: 'warning',
|
|
});
|
|
return false;
|
|
}
|
|
screenfull.toggle(this.$refs.container);
|
|
},
|
|
getScreenData() {
|
|
screenData().then((response) => {
|
|
this.barData.splice(0, this.barData.length);
|
|
this.tableData = response.data.ScreenTask;
|
|
this.percent = response.data.WareHouseRankProportion;
|
|
this.total = response.data.WareHouseRankTotal;
|
|
this.residue = response.data.WareHouseRankSurplus;
|
|
const obj = {
|
|
加工中: response.data.ProductProcessing,
|
|
加工完成: response.data.ProductNotProcessing,
|
|
};
|
|
this.divList = [
|
|
{
|
|
name: '总次数',
|
|
value: response.data.TaskTotal,
|
|
},
|
|
{
|
|
name: 'FOCOS下发次数',
|
|
value: response.data.TaskFromFocos,
|
|
},
|
|
{
|
|
name: '加工中暂存次数',
|
|
value: response.data.TaskNotProcessing,
|
|
},
|
|
{
|
|
name: '货物总数',
|
|
value: response.data.TaskProductTotal,
|
|
},
|
|
{
|
|
name: '加工完成存储次数',
|
|
value: response.data.TaskProcessing,
|
|
},
|
|
{
|
|
name: '人工下发次数',
|
|
value: response.data.TaskFromManual,
|
|
},
|
|
];
|
|
this.$nextTick(() => {
|
|
this.$refs.pieChart1.initChart(obj);
|
|
this.$refs.pieChart2.initChart(response.data.ProductByType);
|
|
this.$refs.barChart.initChart(response.data.ProductAndNum);
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#main-body {
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
background: url(~@/assets/axl/bg.png) center no-repeat;
|
|
background-size: cover;
|
|
overflow: hidden;
|
|
|
|
.container-title {
|
|
width: 100%;
|
|
height: 80px;
|
|
background: url(~@/assets/axl/title.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #ffffff;
|
|
font-size: 30px;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
letter-spacing: 5px;
|
|
position: relative;
|
|
.leftName {
|
|
font-size: 18px;
|
|
color: #69b4ff;
|
|
letter-spacing: 3px;
|
|
position: absolute;
|
|
left: 25%;
|
|
top: 20px;
|
|
}
|
|
.rightName {
|
|
font-size: 18px;
|
|
color: #69b4ff;
|
|
letter-spacing: 3px;
|
|
position: absolute;
|
|
left: 67%;
|
|
top: 22px;
|
|
}
|
|
.title-button {
|
|
color: #89b9fe;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.container-body {
|
|
margin-top: 20px;
|
|
.div-title {
|
|
height: 48px;
|
|
font-size: 20px;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 48px;
|
|
::v-deep .el-radio-button__inner {
|
|
background-color: #0a1c51;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
}
|
|
.div-top {
|
|
margin-bottom: 10px;
|
|
height: 490px;
|
|
}
|
|
.div1 {
|
|
background: url(~@/assets/axl/1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 20px;
|
|
.div1-info {
|
|
font-size: 18px;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
margin: 35px;
|
|
}
|
|
.tip {
|
|
float: left;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: #68b5ff;
|
|
text-align: center;
|
|
margin-right: 10px;
|
|
background: rgba(0, 106, 205, 0.22);
|
|
}
|
|
.residue {
|
|
float: right;
|
|
}
|
|
}
|
|
.div2 {
|
|
background: url(~@/assets/axl/2.png) no-repeat;
|
|
background-size: 100% 483px;
|
|
.div2-body {
|
|
margin: 16px 22px;
|
|
color: #ffffff;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
}
|
|
.div2-mini-body {
|
|
height: 127px;
|
|
background: url(~@/assets/axl/div2.png) no-repeat;
|
|
background-size: 100% 127px;
|
|
font-size: 40px;
|
|
line-height: 43px;
|
|
text-align: center;
|
|
padding-top: 28px;
|
|
margin-bottom: 8px;
|
|
border: 1px rgb(179, 179, 179) dashed;
|
|
}
|
|
.div2-mini-body-sub {
|
|
font-size: 20px;
|
|
color: #5da3e9;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
.div3 {
|
|
background: url(~@/assets/axl/3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-right: 20px;
|
|
}
|
|
.div-footer {
|
|
height: 420px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.div4 {
|
|
background: url(~@/assets/axl/4.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-left: 20px;
|
|
}
|
|
.div5 {
|
|
background: url(~@/assets/axl/5.png) no-repeat;
|
|
background-size: 100% 413px;
|
|
margin-right: 20px;
|
|
|
|
.el-table {
|
|
border: 0;
|
|
}
|
|
::v-deep .el-table__cell {
|
|
border-bottom: none;
|
|
border-right: 1px #0d1728 solid;
|
|
}
|
|
.el-table::before {
|
|
height: 0px;
|
|
}
|
|
// 取消当前行高亮--此时不能进行行点击操作
|
|
::v-deep .el-table tbody tr {
|
|
pointer-events: none;
|
|
}
|
|
// 滚动条样式
|
|
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
|
background-color: #063570;
|
|
}
|
|
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
|
width: 2px;
|
|
opacity: 0.5;
|
|
}
|
|
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
border-radius: 15px;
|
|
background-color: #0257aa;
|
|
}
|
|
// 滚动条头部隐藏样式
|
|
::v-deep .el-table__header tr,
|
|
::v-deep .el-table th,
|
|
.el-table tr {
|
|
background-color: transparent;
|
|
}
|
|
.table-div {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
float: left;
|
|
margin-top: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
.status0 {
|
|
background: #ff5454;
|
|
box-shadow: 0px 0px 2px 2px rgba(255, 84, 84, 0.5);
|
|
}
|
|
.status1 {
|
|
background: #0b58ff;
|
|
box-shadow: 0px 0px 2px 2px rgba(11, 88, 255, 0.5);
|
|
}
|
|
.status2 {
|
|
background: #03d300;
|
|
box-shadow: 0px 0px 2px 2px rgba(3, 211, 0, 0.5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss"></style>
|