<template>
|
<div id="index" ref="appRef">
|
<div class="bg">
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
<div v-else class="host-body">
|
<div class="d-flex jc-center">
|
<dv-decoration-10 class="dv-dec-10" />
|
<div class="d-flex jc-center">
|
<dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
|
<div class="title">
|
<span class="title-text">飞友实业</span>
|
<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
|
</div>
|
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
|
</div>
|
<dv-decoration-10 class="dv-dec-10-s" />
|
</div>
|
|
<!-- 第二行 -->
|
<div class="d-flex jc-between px-2">
|
<div class="d-flex aside-width">
|
<div class="react-left ml-4 react-l-s">
|
<span class="react-left"></span>
|
<span class="text">机器人设备</span>
|
</div>
|
<div class="react-left bg-color-blue mr-3" style="background-color: #1a5cd7;">
|
<span class="text fw-b">设备运行状态</span>
|
</div>
|
</div>
|
<div class="d-flex aside-width">
|
<div class="react-right bg-color-blue mr-3">
|
<span class="text fw-b">AGV设备</span>
|
</div>
|
<div class="react-right mr-4 react-l-s">
|
<span class="react-after"></span>
|
<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="body-box">
|
<div style="display: flex;">
|
<div style="width: 100%;">
|
|
<div class="content-box">
|
<div style="display: flex;">
|
<div class="abs" v-for="(list, listIndex) in titleItemList2.slice(0, 3)" :key="listIndex">
|
<dv-border-box-12>
|
<div class="up2">
|
<div class="bg-color-black item" v-for="item in list" :key="item.title + item.code">
|
<div v-if="item.code">
|
<p class="ml-3 colorBlue fw-b fs-xl titleSize">{{ item.code }}</p>
|
<p class="dv-dig-flop ml-1 mt-2 pl-3 bodyclass">{{ item.text }}</p>
|
</div>
|
|
<div v-else-if="item.img">
|
<img src="@/assets/AGV.png" width="50%" height="50%">
|
</div>
|
|
<div v-else>
|
<p class="ml-3 colorBlue fw-b fs-xl titleSize">{{ item.title }}</p>
|
<p class="dv-dig-flop ml-1 mt-2 pl-3 bodyclass">{{ item.text }}</p>
|
</div>
|
</div>
|
</div>
|
</dv-border-box-12>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="content-box">
|
<div style="display: flex;">
|
<div class="abs" v-for="(list, listIndex) in titleItemList2.slice(0, 3)" :key="listIndex">
|
<dv-border-box-12>
|
<div class="up2">
|
<div class="bg-color-black item" v-for="item in list" :key="item.title + item.code">
|
<div v-if="item.code">
|
<p class="ml-3 colorBlue fw-b fs-xl titleSize">{{ item.code }}</p>
|
<p class="dv-dig-flop ml-1 mt-2 pl-3 bodyclass">{{ item.text }}</p>
|
</div>
|
<div v-else-if="item.img">
|
<img src="@/assets/AGV.png" width="50%" height="50%">
|
</div>
|
<div v-else>
|
<p class="ml-3 colorBlue fw-b fs-xl titleSize">{{ item.title }}</p>
|
<p class="dv-dig-flop ml-1 mt-2 pl-3 bodyclass">{{ item.text }}</p>
|
</div>
|
</div>
|
</div>
|
</dv-border-box-12>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="content-box" style="margin-left: 350px;">
|
<div class="abs" v-for="(list, listIndex) in titleItemList" :key="listIndex">
|
<dv-border-box-12>
|
<div class="up">
|
<div class="bg-color-black item" v-for="item in list" :key="item.title + item.code">
|
<div v-if="item.code">
|
<p class="ml-3 colorBlue fw-b fs-xl titleSize">{{ item.code }}</p>
|
<p class="dv-dig-flop ml-1 mt-2 pl-3 bodyclass">{{ item.text }}</p>
|
</div>
|
|
<div v-else-if="item.img">
|
<img src="@/assets/AGV.png" width="50%" height="50%">
|
</div>
|
|
<div v-else>
|
<p class="ml-3 colorBlue fw-b fs-xl titleSize">{{ item.title }}</p>
|
<p class="dv-dig-flop ml-1 mt-2 pl-3 bodyclass">{{ item.text }}</p>
|
</div>
|
</div>
|
</div>
|
</dv-border-box-12>
|
</div>
|
</div>
|
|
</div>
|
|
|
<!-- 第四行数据 -->
|
<div class="bottom-box">
|
<dv-border-box-13>
|
<bottomLeft />
|
</dv-border-box-13>
|
<dv-border-box-12>
|
<bottomRight />
|
</dv-border-box-12>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import drawMixin from "../utils/drawMixin";
|
import { formatTime } from '../utils/index.js'
|
import bottomLeft from './bottomLeft'
|
import bottomRight from './bottomRight'
|
import axios from 'axios';
|
|
export default {
|
mixins: [drawMixin],
|
data() {
|
return {
|
timing: null,
|
loading: true,
|
dateDay: null,
|
dateYear: null,
|
dateWeek: null,
|
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
decorationColor: ['#568aea', '#000000'],
|
titleItem: [],
|
titleItem2: [],
|
titleItemList: [],
|
titleItemList2: [],
|
frequency: 0
|
}
|
},
|
components: {
|
bottomLeft,
|
bottomRight
|
},
|
mounted() {
|
this.timeFn()
|
this.cancelLoading()
|
this.changeTiming()
|
},
|
beforeDestroy() {
|
clearInterval(this.timing)
|
},
|
methods: {
|
timeFn() {
|
this.timing = setInterval(() => {
|
this.dateDay = formatTime(new Date(), 'HH: mm: ss')
|
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
|
this.dateWeek = this.weekday[new Date().getDay()]
|
}, 1000)
|
},
|
changeTiming() {
|
this.GetAGVStatus()
|
this.GetAGVStatus2()
|
},
|
GetAGVStatus() {
|
axios.get("http://127.0.0.1:9291/api/Task/GetAgvStatusData")
|
.then((res) => {
|
if (res.data.status) {
|
let agvs = res.data.data; // 获取 AGV 数据
|
let sss = [];
|
|
// 遍历 AGV 数据并构建 titleItem
|
agvs.forEach(element => {
|
let titleItem = [
|
{
|
code: 'AGV编号',
|
text: element.agvCode + " 号车"
|
},
|
{
|
img: '图片',
|
imgs: "D:/Git/YaoNeng/项目代码/big-screen-vue-datav/src/assets/logo.png"
|
},
|
{
|
title: '运行状态',
|
text: element.agvStatus == 0 ? "停 止" : element.agvStatus == 1 ? "行 驶" : "暂 停"
|
},
|
{
|
title: '当前地标',
|
text: element.agvRfidLabel
|
},
|
{
|
title: '当前速度',
|
text: element.agvSpeed + " mm/s"
|
},
|
{
|
title: 'AGV类型',
|
text: "举升型"
|
},
|
{
|
title: 'AGV上下线状态',
|
text: element.agvOnline
|
},
|
{
|
title: 'AGV报警代码',
|
text: element.agvAlarmCode
|
}
|
];
|
|
sss.push(titleItem); // 将每个 titleItem 添加到结果数组
|
});
|
|
// 更新 titleItemList
|
this.titleItemList = sss;
|
}
|
})
|
.catch((error) => {
|
console.error("Error fetching data:", error); // 处理请求错误
|
});
|
},
|
|
GetAGVStatus2() {
|
axios.get("http://127.0.0.1:9291/api/Task/GetAgvStatusData2")
|
.then((res) => {
|
if (res.data.status) {
|
let agvs = res.data.data; // 获取 AGV 数据
|
let sss = [];
|
|
// 遍历 AGV 数据并构建 titleItem
|
agvs.forEach(element => {
|
let titleItem2 = [
|
{
|
code: '设备编号',
|
text: element.agvCode
|
},
|
{
|
img: '图片',
|
imgs: "D:/Git/YaoNeng/项目代码/big-screen-vue-datav/src/assets/logo.png"
|
},
|
{
|
title: '运行状态',
|
text: element.agvStatus == 0 ? "停 止" : element.agvStatus == 1 ? "行 驶" : "暂 停"
|
},
|
{
|
title: '报警信息',
|
text: element.agvRfidLabel
|
},
|
];
|
|
sss.push(titleItem2); // 将每个 titleItem 添加到结果数组
|
});
|
|
// 更新 titleItemList
|
this.titleItemList2 = sss;
|
}
|
})
|
.catch((error) => {
|
console.error("Error fetching data:", error); // 处理请求错误
|
});
|
},
|
cancelLoading() {
|
setTimeout(() => {
|
this.loading = false
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../assets/scss/index.scss';
|
|
.bg-color-black {
|
border-radius: 5px;
|
}
|
|
.up {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
|
.item {
|
border-radius: 6px;
|
padding-top: 8px;
|
margin-top: 8px;
|
width: 50%;
|
height: 70px;
|
|
.dv-dig-flop {
|
width: 251px;
|
height: 30px;
|
}
|
}
|
|
.bodyclass {
|
font-size: 26px;
|
color: #ffffff;
|
}
|
|
.bclass {
|
font-size: 26px;
|
color: #e0c218;
|
}
|
|
.titleSize {
|
font-size: 16px;
|
}
|
|
.bSize {
|
font-size: 20px;
|
color: #e0c218;
|
}
|
}
|
|
.up2 {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
height: 50%;
|
|
.item {
|
border-radius: 6px;
|
padding-top: 8px;
|
margin-top: 8px;
|
width: 50%;
|
height: 70px;
|
|
.dv-dig-flop {
|
width: 251px;
|
height: 30px;
|
}
|
}
|
|
.bodyclass {
|
font-size: 26px;
|
color: #ffffff;
|
}
|
|
.bclass {
|
font-size: 26px;
|
color: #e0c218;
|
}
|
|
.titleSize {
|
font-size: 16px;
|
}
|
|
.bSize {
|
font-size: 20px;
|
color: #e0c218;
|
}
|
}
|
</style>
|
