更新首页+异常告警接口对接和仓库首页跳转问题
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
style="font-size: 24px; cursor: pointer"
|
||||
@click="toHome" /> -->
|
||||
<svg-icon
|
||||
icon-class="home-alarm-white"
|
||||
:icon-class="isAlarm ? 'home-alarm-white-circle' : 'home-alarm-white'"
|
||||
style="font-size: 24px; cursor: pointer"
|
||||
@click="toAlarm" />
|
||||
</div>
|
||||
@@ -46,16 +46,15 @@
|
||||
import moment from 'moment';
|
||||
import { getUser } from '@/api/system/user.js';
|
||||
import { getPath } from '@/utils/ruoyi';
|
||||
import { getHomeGetAlarm } from '@/api/home';
|
||||
export default {
|
||||
name: 'navRight',
|
||||
data() {
|
||||
return {
|
||||
// topDate: '',
|
||||
// topTime: '',
|
||||
// timeZone: '',
|
||||
timer: '',
|
||||
dept: ' ',
|
||||
nickname: this.$store.getters.nickname,
|
||||
isAlarm: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -68,21 +67,18 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getUserMsg();
|
||||
// this.getTime();
|
||||
this.getHomeGetAlarm();
|
||||
this.timer = setInterval(this.getHomeGetAlarm(), 3600000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// clearInterval(this.timer);
|
||||
// },
|
||||
methods: {
|
||||
// getTime() {
|
||||
// let _this = this;
|
||||
// this.timer = setInterval(function () {
|
||||
// _this.topDate = moment().format('YYYY/MM/DD');
|
||||
// let temp = moment().format('A-hh:mm').split('-');
|
||||
// _this.timeZone = temp[0];
|
||||
// _this.topTime = temp[1];
|
||||
// }, 1000);
|
||||
// },
|
||||
getHomeGetAlarm() {
|
||||
getHomeGetAlarm().then((response) => {
|
||||
this.isAlarm = response.data || false;
|
||||
});
|
||||
},
|
||||
getUserMsg() {
|
||||
let id = this.$store.getters.userId;
|
||||
getUser(id).then((res) => {
|
||||
|
||||
@@ -3,50 +3,47 @@
|
||||
<div>
|
||||
<navbar />
|
||||
</div>
|
||||
<div class="date-tabs">
|
||||
<el-tabs v-model="activeName" :stretch="true">
|
||||
<el-tab-pane
|
||||
:label="'\u2002\u2002日\u2002\u2002'"
|
||||
name="日"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="'\u2002\u2002周\u2002\u2002'"
|
||||
name="周"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="'\u2002\u2002月\u2002\u2002'"
|
||||
name="月"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="'\u2002\u2002年\u2002\u2002'"
|
||||
name="年"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="current-date">(6.13-6.20)</div>
|
||||
<div class="current-time">
|
||||
<span style="display: inline-block; margin-right: 16px">
|
||||
{{ topTime + timeZone }}
|
||||
</span>
|
||||
<span>{{ topDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-row class="main-top" :gutter="16">
|
||||
<el-col :span="12" style="position: relative">
|
||||
<div class="title">
|
||||
<svg-icon icon-class="home-produce" />
|
||||
<span class="title-inner">生产总览</span>
|
||||
<div class="date-tabs">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
@tab-click="handleClick"
|
||||
:stretch="true">
|
||||
<el-tab-pane
|
||||
:label="'\u2002\u2002日\u2002\u2002'"
|
||||
name="日"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="'\u2002\u2002周\u2002\u2002'"
|
||||
name="周"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="'\u2002\u2002月\u2002\u2002'"
|
||||
name="月"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="'\u2002\u2002年\u2002\u2002'"
|
||||
name="年"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="current-date">( {{ showTime }} )</div>
|
||||
</div>
|
||||
<el-row class="box">
|
||||
<el-col :span="6" class="num-box shadow">
|
||||
<div class="num-style">9,301.01</div>
|
||||
<div class="num-style">{{ homeProduce.quantity }}</div>
|
||||
<div class="unit-style">产量/千片</div>
|
||||
</el-col>
|
||||
<el-col :span="4" class="num-box shadow">
|
||||
<div class="num-style">94.34</div>
|
||||
<div class="num-style">{{ homeProduce.yieldRate }}</div>
|
||||
<div class="unit-style">良品率/%</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="num-box shadow">
|
||||
<div class="num-style">29,301.01</div>
|
||||
<div class="num-style">{{ homeProduce.endWorkOrderQuantity }}</div>
|
||||
<div class="unit-style">完成工单数量/千片</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="num-box">
|
||||
<div class="num-style">1,340</div>
|
||||
<div class="num-style">{{ homeProduce.endOrderQuantity }}</div>
|
||||
<div class="unit-style">完成订单数量/个</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -55,22 +52,29 @@
|
||||
<div class="title">
|
||||
<svg-icon icon-class="home-device" />
|
||||
<span class="title-inner">设备总览</span>
|
||||
<!-- <div class="date-tabs">
|
||||
<div class="current-time">
|
||||
<span>
|
||||
{{ topTime + timeZone + ' '+ topDate }}
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<el-row class="box">
|
||||
<el-col :span="6" class="num-box shadow">
|
||||
<div class="num-style">2,931</div>
|
||||
<div class="num-style">{{ homeDevice.allEquipment }}</div>
|
||||
<div class="unit-style">设备总数/台</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="num-box shadow">
|
||||
<div class="num-style">931</div>
|
||||
<div class="num-style">{{ homeDevice.onlineEquipment }}</div>
|
||||
<div class="unit-style">在线设备总数/台</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="num-box shadow">
|
||||
<div class="num-style">7</div>
|
||||
<div class="num-style">{{ homeDevice.errorEquipment }}</div>
|
||||
<div class="unit-style">故障设备总数/台</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="num-box">
|
||||
<div class="num-style">0</div>
|
||||
<div class="num-style">{{ homeDevice.stopEquipment }}</div>
|
||||
<div class="unit-style">停机设备总数/台</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -81,6 +85,7 @@
|
||||
class="item"
|
||||
:class="{ shadow: index !== middleMenu.length - 1 }"
|
||||
v-for="(item, index) in middleMenu"
|
||||
@click="goPage(item)"
|
||||
:key="index">
|
||||
<div style="width: 160px; margin: 0 auto; padding-top: 20px">
|
||||
<svg-icon :icon-class="item.icon" style="font-size: 56px" />
|
||||
@@ -105,14 +110,14 @@
|
||||
<div class="order-box">
|
||||
<div
|
||||
class="order-item"
|
||||
v-for="(item, index) in orderList"
|
||||
v-for="(item, index) in homeProduce.orderList"
|
||||
:key="index">
|
||||
<div>
|
||||
<span class="order-name">{{ item.name }}</span>
|
||||
<span class="order-value">{{ item.value }}%</span>
|
||||
<span class="order-name">{{ item.orderName }}</span>
|
||||
<span class="order-value">{{ item.completeRate * 100 }}%</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="item.value"
|
||||
:percentage="item.completeRate * 100"
|
||||
:text-inside="false"
|
||||
:stroke-width="15"
|
||||
:show-text="false"></el-progress>
|
||||
@@ -130,7 +135,7 @@
|
||||
:page="1"
|
||||
:limit="100000"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:table-data="homeDevice.list"
|
||||
:max-height="tableH" />
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -155,6 +160,13 @@
|
||||
import Navbar from './components/Navbar';
|
||||
import moment from 'moment';
|
||||
import tableHeightMixin from '@/mixins/tableHeightMixin';
|
||||
import {
|
||||
getHomeOrder,
|
||||
getHomeOrderNum,
|
||||
getHomeEquipment,
|
||||
getHomeEquipmentAlarmList,
|
||||
} from '@/api/home';
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
mixins: [tableHeightMixin],
|
||||
@@ -175,69 +187,107 @@ export default {
|
||||
topTime: '',
|
||||
timeZone: '',
|
||||
middleMenu: [
|
||||
{ name: '工单管理', url: '', icon: 'home-work-menu' },
|
||||
{ name: '订单管理', url: '', icon: 'home-order-menu' },
|
||||
{ name: '设备管理', url: '', icon: 'home-device-menu' },
|
||||
{ name: '质量管理', url: '', icon: 'home-quality-menu' },
|
||||
{ name: '仓库管理', url: '', icon: 'home-store-menu' },
|
||||
],
|
||||
orderList: [
|
||||
{ name: '工单1', value: 50 },
|
||||
{ name: '工单2', value: 60 },
|
||||
{ name: '工单3', value: 30 },
|
||||
{ name: '工单4', value: 60 },
|
||||
{ name: '工单5', value: 10 },
|
||||
{ name: '工单6', value: 60 },
|
||||
{ name: '工单7', value: 40 },
|
||||
{ name: '工单8', value: 70 },
|
||||
{ name: '工单9', value: 90 },
|
||||
{ name: '生产管理', url: 'productLine24h', icon: 'home-work-menu' },
|
||||
{
|
||||
name: '能源管理',
|
||||
url: 'EnergyQuantityRealtime',
|
||||
icon: 'home-order-menu',
|
||||
},
|
||||
{ name: '设备管理', url: 'PlanConfig', icon: 'home-device-menu' },
|
||||
{ name: '质量管理', url: 'qualityScrapLog', icon: 'home-quality-menu' },
|
||||
{ name: '仓库管理', url: 'warehouse-info', icon: 'home-store-menu' },
|
||||
],
|
||||
heightNum: 640,
|
||||
tableProps: [
|
||||
{
|
||||
prop: 'productionLineName',
|
||||
prop: 'equipmentName',
|
||||
label: '设备名称',
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'sectionName',
|
||||
prop: 'alarmContent',
|
||||
label: '告警内容',
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
prop: 'updateTime',
|
||||
label: '告警时间',
|
||||
width: 180,
|
||||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
},
|
||||
],
|
||||
list: [
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
{ productionLineName: 1 },
|
||||
],
|
||||
homeProduce: {
|
||||
quantity: undefined,
|
||||
yieldRate: undefined,
|
||||
endWorkOrderQuantity: undefined,
|
||||
endOrderQuantity: undefined,
|
||||
orderList: [],
|
||||
},
|
||||
homeDevice: {
|
||||
allEquipment: undefined,
|
||||
onlineEquipment: undefined,
|
||||
errorEquipment: undefined,
|
||||
stopEquipment: undefined,
|
||||
list: [],
|
||||
},
|
||||
times: [],
|
||||
showTime: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTime();
|
||||
this.handleClick();
|
||||
this.getHomeEquipment();
|
||||
this.showTime = moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD');
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
let start =
|
||||
Date.parse(new Date())
|
||||
let end =
|
||||
Date.parse(new Date())
|
||||
switch (this.activeName) {
|
||||
case '日':
|
||||
this.showTime = moment(new Date())
|
||||
.subtract(0, 'days')
|
||||
.format('YYYY-MM-DD');
|
||||
this.times = [start, end];
|
||||
break;
|
||||
case '周':
|
||||
start =
|
||||
moment(new Date()).subtract(6, 'days').format('x')
|
||||
this.showTime =
|
||||
moment(new Date()).subtract(6, 'days').format('MM-DD') +
|
||||
' ~ ' +
|
||||
moment(new Date()).subtract(0, 'days').format('MM-DD');
|
||||
this.times = [start, end];
|
||||
break;
|
||||
case '月':
|
||||
start =
|
||||
moment(new Date()).subtract(1, 'month').format('x')
|
||||
this.showTime =
|
||||
moment(new Date()).subtract(1, 'month').format('MM-DD') +
|
||||
' ~ ' +
|
||||
moment(new Date()).subtract(0, 'days').format('MM-DD');
|
||||
this.times = [start, end];
|
||||
break;
|
||||
case '年':
|
||||
start =
|
||||
moment(new Date()).subtract(1, 'year').format('x')
|
||||
this.showTime =
|
||||
moment(new Date()).subtract(1, 'year').format('YYYY') +
|
||||
' ~ ' +
|
||||
moment(new Date()).subtract(0, 'days').format('YYYY');
|
||||
this.times = [start, end];
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
this.getHomeOrder();
|
||||
},
|
||||
getTime() {
|
||||
let _this = this;
|
||||
this.timer = setInterval(function () {
|
||||
@@ -247,6 +297,59 @@ export default {
|
||||
_this.topTime = temp[1];
|
||||
}, 1000);
|
||||
},
|
||||
getHomeOrder() {
|
||||
getHomeOrder(this.times).then((response) => {
|
||||
if (response.hasOwnProperty('data')) {
|
||||
this.homeProduce.quantity = response.data.quantity;
|
||||
this.homeProduce.yieldRate = response.data.yieldRate * 100;
|
||||
this.homeProduce.endWorkOrderQuantity =
|
||||
response.data.endWorkOrderQuantity;
|
||||
this.homeProduce.orderList = response.data.orderMonitorVO;
|
||||
} else {
|
||||
this.homeProduce = {
|
||||
quantity: undefined,
|
||||
yieldRate: undefined,
|
||||
endWorkOrderQuantity: undefined,
|
||||
endOrderQuantity: undefined,
|
||||
orderList: [],
|
||||
};
|
||||
}
|
||||
});
|
||||
getHomeOrderNum(this.times).then((response) => {
|
||||
if (response.hasOwnProperty('data')) {
|
||||
this.homeProduce.endOrderQuantity = response.data.endOrderQuantity;
|
||||
} else {
|
||||
this.homeProduce.endOrderQuantity = '-';
|
||||
}
|
||||
});
|
||||
},
|
||||
getHomeEquipment() {
|
||||
getHomeEquipment().then((response) => {
|
||||
if (response.hasOwnProperty('data')) {
|
||||
this.homeDevice.allEquipment = response.data.allEquipment;
|
||||
this.homeDevice.onlineEquipment = response.data.onlineEquipment;
|
||||
this.homeDevice.errorEquipment = response.data.errorEquipment;
|
||||
this.homeDevice.stopEquipment = response.data.stopEquipment;
|
||||
} else {
|
||||
this.homeDevice = {
|
||||
allEquipment: undefined,
|
||||
onlineEquipment: undefined,
|
||||
errorEquipment: undefined,
|
||||
stopEquipment: undefined,
|
||||
};
|
||||
}
|
||||
});
|
||||
getHomeEquipmentAlarmList().then((response) => {
|
||||
if (response.hasOwnProperty('data')) {
|
||||
this.homeDevice.list = response.data;
|
||||
} else {
|
||||
this.homeDevice.list = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
goPage(val) {
|
||||
this.$router.push({ name: val.url });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -260,56 +363,14 @@ export default {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
.date-tabs {
|
||||
padding-left: 40px;
|
||||
padding-top: 20px;
|
||||
position: relative;
|
||||
}
|
||||
:deep(.date-tabs) {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
line-height: 36px !important;
|
||||
height: 36px;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: #0b58ff;
|
||||
}
|
||||
}
|
||||
.current-date {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
left: 260px;
|
||||
top: 14px;
|
||||
}
|
||||
.current-time {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 38px;
|
||||
top: 14px;
|
||||
}
|
||||
.main-top {
|
||||
width: 100%;
|
||||
padding: 0 20px 0 40px;
|
||||
padding: 10px 20px 0 40px;
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 34px;
|
||||
top: 20px;
|
||||
width: 180px;
|
||||
width: 90%;
|
||||
font-size: 32px;
|
||||
z-index: 10;
|
||||
.title-inner {
|
||||
@@ -318,12 +379,53 @@ export default {
|
||||
top: 5px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.date-tabs {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
:deep(.date-tabs) {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
font-size: 18px;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
line-height: 20px !important;
|
||||
height: 24px;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: #0b58ff;
|
||||
}
|
||||
}
|
||||
.current-date {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 5px;
|
||||
}
|
||||
// .current-time {
|
||||
// width: 160px;
|
||||
// font-size: 18px;
|
||||
// position: absolute;
|
||||
// right: -20px;
|
||||
// top: 5px;
|
||||
// }
|
||||
}
|
||||
.box {
|
||||
background-color: #fff;
|
||||
border-radius: 24px;
|
||||
height: 192px;
|
||||
padding: 40px 24px 32px 24px;
|
||||
height: 232px;
|
||||
padding: 60px 24px 32px 24px;
|
||||
.num-box {
|
||||
height: 120px;
|
||||
padding-top: 26px;
|
||||
|
||||
Reference in New Issue
Block a user