烘房看板
parent
f4f51a113d
commit
cc115262e3
@ -0,0 +1,26 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取工厂下拉列表
|
||||
export function getBoardFactory(data) {
|
||||
return request({
|
||||
url: '/mes/wcsInterface/getBoardFactory',
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
// 获取烘房监控页面顶部信息
|
||||
export function getDryingRoomList(data) {
|
||||
return request({
|
||||
url: '/mes/wcsInterface/dryRoomDataHeader',
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
// 获取烘房监控页面顶部信息
|
||||
export function dryRoomDataCarousel(data) {
|
||||
return request({
|
||||
url: '/mes/wcsInterface/dryRoomDataCarousel',
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
@ -0,0 +1,231 @@
|
||||
<template xmlns:fontSize="http://www.w3.org/1999/xhtml">
|
||||
<div>
|
||||
<div id="cards">
|
||||
<div style="height: 35vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data1" :key="card.title">
|
||||
<div class="card-header">
|
||||
<div class="card-header-left">{{ card.title }}</div>
|
||||
<div class="card-header-right">{{ card.i }}</div>
|
||||
</div>
|
||||
<div class="card-box">
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">烘房模式</div>
|
||||
<div class="footer-detail">
|
||||
<span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.model), textAlign: 'right' }">
|
||||
{{ getTagModel(card.model) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">门前数量</div>
|
||||
<div class="footer-detail">
|
||||
<span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.dollyNumber), textAlign: 'right' }">
|
||||
{{ getTagText(card.dollyNumber) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">烘房温度</div>
|
||||
<div class="footer-detail">
|
||||
<span style="font-size: 25px;font-weight: bold; color: #ea6027; textAlign: 'right'">{{ card.temperature }}</span>℃
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">保持时长</div>
|
||||
<div class="footer-detail">
|
||||
<span style="font-size: 25px;font-weight: bold; color: #26fcd8; textAlign: 'right'">{{ card.waitmin }}</span>min
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="cardss">
|
||||
<div style="height: 35vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data2" :key="card.title">
|
||||
<div class="card-header">
|
||||
<div class="card-header-left">{{ card.title }}</div>
|
||||
<div class="card-header-right">{{ (i + 9) }}</div>
|
||||
</div>
|
||||
<div class="card-box">
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">烘房模式</div>
|
||||
<div class="footer-detail">
|
||||
<span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.model), textAlign: 'right' }">
|
||||
{{ getTagModel(card.model) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">门前数量</div>
|
||||
<div class="footer-detail">
|
||||
<span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.dollyNumber), textAlign: 'right' }">
|
||||
{{ getTagText(card.dollyNumber) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">烘房温度</div>
|
||||
<div class="footer-detail">
|
||||
<span style="font-size: 25px;font-weight: bold; color: #ea6027; textAlign: 'right'">{{ card.temperature }}</span>℃
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">保持时长</div>
|
||||
<div class="footer-detail">
|
||||
<span style="font-size: 25px;font-weight: bold; color: #26fcd8; textAlign: 'right'">{{ card.waitmin }}</span>min
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cards from "./cards";
|
||||
|
||||
export default {
|
||||
name: 'Cards',
|
||||
props: ['dataProp'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
cards: [],
|
||||
cardss: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
getTagText(value) {
|
||||
// 根据值返回要显示的文字
|
||||
if (value === '0') {
|
||||
return '无车';
|
||||
} else if (value === '1') {
|
||||
return '有车';
|
||||
}
|
||||
},
|
||||
|
||||
getTextColor(value){
|
||||
if (value === '0') {
|
||||
return '#26fcd8';
|
||||
} else if (value === '1') {
|
||||
return '#ea6027';
|
||||
}
|
||||
},
|
||||
|
||||
getTagModel(value){
|
||||
// 根据值返回要显示的文字
|
||||
if (value === '0') {
|
||||
return '手动';
|
||||
} else if (value === '1') {
|
||||
return '自动';
|
||||
}
|
||||
},
|
||||
createData () {
|
||||
|
||||
// this.cards = new Array(8).fill(0).map((foo, i) => ({
|
||||
// title: '烘房' + (i + 1),
|
||||
//
|
||||
// }));
|
||||
|
||||
this.cardss = new Array(8).fill(0).map((foo, i) => ({
|
||||
title: '烘房' + (i + 9),
|
||||
}));
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
const { createData } = this
|
||||
createData()
|
||||
// setInterval(this.createData, 3000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#cards ,#cardss {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 35vh;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.card-item {
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border: 2px solid rgba(1, 153, 209, .5);
|
||||
width: 19%!important;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
height: 20%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.card-header-left {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.card-header-right {
|
||||
padding-right: 20px;
|
||||
font-size: 40px;
|
||||
color: #03d3ec;
|
||||
}
|
||||
}
|
||||
|
||||
.ring-charts {
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
height: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card-footer-item {
|
||||
padding: 5px 10px 0px 10px;
|
||||
box-sizing: border-box;
|
||||
width: 40%;
|
||||
background-color: rgba(6, 30, 93, 0.7);
|
||||
border-radius: 3px;
|
||||
|
||||
.footer-title {
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer-detail {
|
||||
font-size: 20px;
|
||||
color: #1294fb;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
|
||||
.dv-digital-flop {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="cards">
|
||||
<div style="height: 35vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp" :key="card.title">
|
||||
<div class="card-header">
|
||||
<div class="card-header-left">{{ card.title }}</div>
|
||||
<div class="card-header-right">{{ card.i }}</div>
|
||||
</div>
|
||||
<div class="card-box">
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">烘房模式</div>
|
||||
<div class="footer-detail">
|
||||
<span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.model), textAlign: 'right' }">
|
||||
{{ getTagModel(card.model) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">门前数量</div>
|
||||
<div class="footer-detail">
|
||||
<span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.dollyNumber), textAlign: 'right' }">
|
||||
{{ getTagText(card.dollyNumber) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">烘房温度</div>
|
||||
<div class="footer-detail">
|
||||
<span style="font-size: 25px;font-weight: bold; color: #ea6027; textAlign: 'right'">{{ card.temperature }}</span>℃
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<div class="footer-title">保持时长</div>
|
||||
<div class="footer-detail">
|
||||
<span style="font-size: 25px;font-weight: bold; color: #26fcd8; textAlign: 'right'">{{ card.waitmin }}</span>min
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cards from "./cards";
|
||||
|
||||
export default {
|
||||
name: 'Cards2',
|
||||
props: ['dataProp'],
|
||||
data() {
|
||||
return {
|
||||
cards: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTagText(value) {
|
||||
// 根据值返回要显示的文字
|
||||
if (value === '0') {
|
||||
return '无车';
|
||||
} else if (value === '1') {
|
||||
return '有车';
|
||||
}
|
||||
},
|
||||
|
||||
getTextColor(value){
|
||||
if (value === '0') {
|
||||
return '#26fcd8';
|
||||
} else if (value === '1') {
|
||||
return '#ea6027';
|
||||
}
|
||||
},
|
||||
|
||||
getTagModel(value){
|
||||
// 根据值返回要显示的文字
|
||||
if (value === '0') {
|
||||
return '手动';
|
||||
} else if (value === '1') {
|
||||
return '自动';
|
||||
}
|
||||
},
|
||||
// createData () {
|
||||
// const { randomExtend } = this
|
||||
// this.cards = new Array(5).fill(0).map((foo, i) => ({
|
||||
// title: '烘房' + (i + 17),
|
||||
// }));
|
||||
//
|
||||
// },
|
||||
// // this.cards=new Array(8)
|
||||
//
|
||||
// randomExtend(minNum, maxNum) {
|
||||
// if (arguments.length === 1) {
|
||||
// return parseInt(Math.random() * minNum + 1, 10)
|
||||
// } else {
|
||||
// return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
// const { createData } = this
|
||||
//
|
||||
// createData()
|
||||
// setInterval(this.createData, 30000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#cards ,#cardss {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 35vh;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.card-item {
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border: 2px solid rgba(1, 153, 209, .5);
|
||||
width: 19%!important;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
height: 20%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.card-header-left {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.card-header-right {
|
||||
padding-right: 20px;
|
||||
font-size: 40px;
|
||||
color: #03d3ec;
|
||||
}
|
||||
}
|
||||
|
||||
.ring-charts {
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
height: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card-footer-item {
|
||||
padding: 5px 10px 0px 10px;
|
||||
box-sizing: border-box;
|
||||
width: 40%;
|
||||
background-color: rgba(6, 30, 93, 0.7);
|
||||
border-radius: 3px;
|
||||
|
||||
.footer-title {
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer-detail {
|
||||
font-size: 20px;
|
||||
color: #1294fb;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
align-items: center;
|
||||
|
||||
.dv-digital-flop {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<el-carousel :interval="3000" :height="dataHeight" indicator-position="outside" @change="handleScroll">
|
||||
<el-carousel-item v-for="(item,k) in 2" :key="item" >
|
||||
<h3 v-if="k===0"><cards :dataProp="cards" /></h3>
|
||||
<h3 v-if="k===1"><cards2 :dataProp="cardss"/></h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import cards2 from './cards2'
|
||||
import cards from './cards'
|
||||
|
||||
import {
|
||||
dryRoomDataCarousel,
|
||||
getMesBoardEquProductionToday,
|
||||
} from "@/api/kanban/dryingroom";
|
||||
import log from "../../monitor/job/log";
|
||||
|
||||
export default {
|
||||
|
||||
// 轮播图组件
|
||||
name: 'carousel',
|
||||
components: {
|
||||
cards2,
|
||||
cards
|
||||
},
|
||||
props: {
|
||||
dataHeight: {
|
||||
type: String,
|
||||
default: '800px'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
cards: {
|
||||
data1:[],
|
||||
data2:[],
|
||||
},
|
||||
|
||||
cardss: [],
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
createData () {
|
||||
|
||||
this.cards.data1 = new Array(8).fill(0).map((foo, i) => ({
|
||||
i:(i+1),
|
||||
|
||||
}));
|
||||
this.cards.data2 = new Array(8).fill(0).map((foo, i) => ({
|
||||
i:(i+9),
|
||||
}));
|
||||
this.cardss = new Array(5).fill(0).map((foo, i) => ({
|
||||
i: (i === 0 ? 17 : i === 1 ? 18 : i === 2 ? 61 : i === 3 ? 62 : 63),
|
||||
}));
|
||||
// console.log(this.cards.data1)
|
||||
dryRoomDataCarousel({ factory: 999 }).then((response) => {
|
||||
if (response.data) {
|
||||
// console.log(response);
|
||||
this.cards.data1 = this.cards.data1.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: '烘房' + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber:matchingIndex.dollyNumber,
|
||||
waitmin:matchingIndex.waitmin,
|
||||
temperature:matchingIndex.temperature
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
|
||||
});
|
||||
this.cards.data2 = this.cards.data2.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: '烘房' + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber:matchingIndex.dollyNumber,
|
||||
waitmin:matchingIndex.waitmin,
|
||||
temperature:matchingIndex.temperature
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
this.cardss = this.cardss.map((card) => {
|
||||
const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
|
||||
if (matchingIndex) {
|
||||
return {
|
||||
...card,
|
||||
title: '烘房' + matchingIndex.i,
|
||||
model: matchingIndex.status,
|
||||
dollyNumber:matchingIndex.dollyNumber,
|
||||
waitmin:matchingIndex.waitmin,
|
||||
temperature:matchingIndex.temperature
|
||||
};
|
||||
} else {
|
||||
return card;
|
||||
}
|
||||
|
||||
});
|
||||
console.log(this.cardss )
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
handleScroll(event) {
|
||||
|
||||
//请求烘房数据接口
|
||||
this.createData();
|
||||
// if (event==0){
|
||||
// const that = this;
|
||||
//
|
||||
// }
|
||||
// 获取滚动事件的相关信息
|
||||
|
||||
// console.log(scrollTop);
|
||||
// 根据需要处理滚动事件的逻辑
|
||||
// ...
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
const { createData } = this
|
||||
createData()
|
||||
// setInterval(this.createData, 6000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div id="digital-flop">
|
||||
<div
|
||||
class="digital-flop-item"
|
||||
v-for="item in digitalFlopData"
|
||||
:key="item.title"
|
||||
>
|
||||
<div class="digital-flop-title">{{ item.title }}</div>
|
||||
<div class="digital-flop">
|
||||
<dv-digital-flop
|
||||
:config="item.number"
|
||||
style="width:100px;height:50px;"
|
||||
/>
|
||||
<div class="unit">{{ item.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-decoration-10 />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDryingRoomList,
|
||||
getMesBoardEquProductionToday,
|
||||
} from "@/api/kanban/dryingroom";
|
||||
export default {
|
||||
name: 'DigitalFlop',
|
||||
data () {
|
||||
return {
|
||||
digitalFlopData: [],
|
||||
dryingRoomList: [],
|
||||
cxjZCNumber:0,
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData () {
|
||||
const that = this;
|
||||
getDryingRoomList({
|
||||
factory: 999,
|
||||
}).then((response) => {
|
||||
if (response.data) {
|
||||
// console.log(response)
|
||||
this.cxjZCNumber=response.data.cxzc;
|
||||
this.cxjYCNumber=response.data.cxyc;
|
||||
this.dryingRoomList = response.data.result;
|
||||
this.digitalFlopData = [
|
||||
{
|
||||
title: '成型机运行',
|
||||
number: {
|
||||
number: [this.cxjZCNumber],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#4d99fc',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
|
||||
unit: '台'
|
||||
},
|
||||
{
|
||||
title: '烘房运行(自动)',
|
||||
number: {
|
||||
number: [response.data.hfauto],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#4d99fc',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
|
||||
unit: '座'
|
||||
},
|
||||
{
|
||||
title: '收坯机台运行',
|
||||
number: {
|
||||
number: [response.data.spzc],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#4d99fc',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '台'
|
||||
},
|
||||
{
|
||||
title: '成型缓存区数量',
|
||||
number: {
|
||||
number: [response.data.hcnumber],
|
||||
content: '{nt}',
|
||||
textAlign: 'right',
|
||||
style: {
|
||||
fill: '#4d99fc',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
unit: '个'
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
setInterval(createData, 5000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less">
|
||||
#digital-flop {
|
||||
position: relative;
|
||||
height: 15%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
|
||||
.dv-decoration-10 {
|
||||
position: absolute;
|
||||
width: 95%;
|
||||
left: 2.5%;
|
||||
height: 5px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.digital-flop-item {
|
||||
width: 11%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-left: 3px solid rgb(6, 30, 93);
|
||||
border-right: 3px solid rgb(6, 30, 93);
|
||||
}
|
||||
|
||||
.digital-flop-title {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.digital-flop {
|
||||
display: flex;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div id="data-view">
|
||||
<div id="dv-full-screen-container" style="width:100vw;height:100vh">
|
||||
<!-- <p class="time">-->
|
||||
<!-- {{ gettimedata }}-->
|
||||
<!-- </p>-->
|
||||
<top-header />
|
||||
|
||||
<div class="main-content">
|
||||
<digital-flop />
|
||||
|
||||
<div class="block-left-right-content">
|
||||
<!-- <ranking-board />-->
|
||||
|
||||
<div class="block-top-bottom-content">
|
||||
<!-- <div class="block-top-content">-->
|
||||
<!-- <rose-chart />-->
|
||||
|
||||
<!-- <water-level-chart />-->
|
||||
|
||||
<!-- <scroll-board />-->
|
||||
<carousel />
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <cards2 />-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topHeader from './topHeader'
|
||||
import digitalFlop from './digitalFlop'
|
||||
import rankingBoard from './rankingBoard'
|
||||
import roseChart from './roseChart'
|
||||
import waterLevelChart from './waterLevelChart'
|
||||
import scrollBoard from './scrollBoard'
|
||||
import carousel from './carousel'
|
||||
import cards2 from './cards2'
|
||||
import moment from "moment";
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
components: {
|
||||
topHeader,
|
||||
digitalFlop,
|
||||
rankingBoard,
|
||||
roseChart,
|
||||
waterLevelChart,
|
||||
scrollBoard,
|
||||
cards2,
|
||||
carousel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
gettimedata: "",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.gettime();
|
||||
},
|
||||
methods: {
|
||||
gettime() {
|
||||
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
||||
setInterval(() => {
|
||||
this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
|
||||
}, 1000);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#data-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #030409;
|
||||
color: #fff;
|
||||
|
||||
#dv-full-screen-container {
|
||||
background-image: url('../../../assets/images/bg-exception.png');
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0 0 3px blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.block-left-right-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.block-top-bottom-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.block-top-content {
|
||||
height: 55%;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.time {
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 71px;
|
||||
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 9999;;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div id="ranking-board">
|
||||
<div class="ranking-board-title">AGV运行分布</div>
|
||||
<!-- <dv-scroll-ranking-board :config="config" />-->
|
||||
<dv-scroll-ranking-board :config="config">
|
||||
<template #item="{ item }">
|
||||
<li class="name">{{ item.name }}</li>
|
||||
</template>
|
||||
</dv-scroll-ranking-board>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RankingBoard',
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
data: [
|
||||
{
|
||||
name: '模式：'+'手动',
|
||||
des:'当前是否占位',
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
name: '模式：'+'自动',
|
||||
des:'当前是否占位',
|
||||
value: 21
|
||||
},
|
||||
{
|
||||
name: '模式：'+'手动',
|
||||
des:'当前是否占位',
|
||||
value: 15
|
||||
},
|
||||
|
||||
// {
|
||||
// name: '计日工',
|
||||
// value: 80
|
||||
// },
|
||||
// {
|
||||
// name: '路基',
|
||||
// value: 45
|
||||
// },
|
||||
// {
|
||||
// name: '交安设施',
|
||||
// value: 29
|
||||
// },
|
||||
// {
|
||||
// name: '除雪',
|
||||
// value: 29
|
||||
// },
|
||||
// {
|
||||
// name: '绿化',
|
||||
// value: 29
|
||||
// }
|
||||
],
|
||||
rowNum: 21
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#ranking-board {
|
||||
width: 20%;
|
||||
box-shadow: 0 0 3px blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||
box-sizing: border-box;
|
||||
padding: 0px 30px;
|
||||
|
||||
.ranking-board-title {
|
||||
font-weight: bold;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.dv-scroll-ranking-board {
|
||||
flex: 1;
|
||||
}
|
||||
.name {
|
||||
line-height: 1.2; /* 设置每行名称的高度 */
|
||||
overflow: hidden; /* 控制溢出内容的处理方式 */
|
||||
text-overflow: ellipsis; /* 当名称溢出时，使用省略号表示 */
|
||||
white-space: nowrap; /* 禁止名称换行 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div id="rose-chart">
|
||||
<div class="rose-chart-title">烘房出香情况</div>
|
||||
|
||||
<div class="water-level-chart-details">
|
||||
本班次出香<span>354</span>车
|
||||
</div>
|
||||
|
||||
<!-- <dv-charts :option="option" />-->
|
||||
<dv-capsule-chart :config="config" style="width:300px;height:200px" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
data () {
|
||||
return {
|
||||
option: {},
|
||||
config: {
|
||||
data: [
|
||||
{
|
||||
name: '合格',
|
||||
value: 362
|
||||
},
|
||||
{
|
||||
name: '不合格',
|
||||
value: 10
|
||||
},
|
||||
|
||||
],
|
||||
colors: ['#3dd96a', '#fc0541'],
|
||||
unit: '单位',
|
||||
showValue: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createData () {
|
||||
const { randomExtend } = this
|
||||
|
||||
this.option = {
|
||||
// title: {
|
||||
// text: '畅销饮料占比饼状图'
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
data: [
|
||||
{ name: '可口可乐', value: 93 },
|
||||
{ name: '百事可乐', value: 32 },
|
||||
// { name: '哇哈哈', value: 65 },
|
||||
// { name: '康师傅', value: 44 },
|
||||
// { name: '统一', value: 52 },
|
||||
],
|
||||
insideLabel: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
]
|
||||
// series: [
|
||||
// {
|
||||
// type: 'pie',
|
||||
// radius: '50%',
|
||||
// roseSort: false,
|
||||
// data: [
|
||||
// { name: '合格', value: randomExtend(200, 300) },
|
||||
// { name: '不合格', value: randomExtend(5, 10) },
|
||||
//
|
||||
// ],
|
||||
// insideLabel: {
|
||||
// show: false
|
||||
// },
|
||||
// outsideLabel: {
|
||||
// formatter: '{value}',
|
||||
// labelLineEndLength: 20,
|
||||
// style: {
|
||||
//
|
||||
// fill: '#fff'
|
||||
// },
|
||||
// labelLineStyle: {
|
||||
// stroke: '#fff'
|
||||
// }
|
||||
// },
|
||||
// roseType: true
|
||||
// }
|
||||
// ],
|
||||
// color: ['#5fec4f', '#fa3600']
|
||||
}
|
||||
},
|
||||
randomExtend (minNum, maxNum) {
|
||||
if (arguments.length === 1) {
|
||||
return parseInt(Math.random() * minNum + 1, 10)
|
||||
} else {
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
setInterval(createData, 30000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#rose-chart {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||
box-sizing: border-box;
|
||||
|
||||
.rose-chart-title {
|
||||
height: 50px;
|
||||
font-weight: bold;
|
||||
text-indent: 20px;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dv-charts-container {
|
||||
height: calc(~"100% - 50px");
|
||||
}
|
||||
.water-level-chart-details {
|
||||
height: 15%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
align-items: flex-end;
|
||||
|
||||
span {
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
color: #58a1ff;
|
||||
margin: 0 5px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div id="scroll-board">
|
||||
<dv-scroll-board :config="config" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ScrollBoard',
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
header: ['时间','暂存区','托盘', '报警信息'],
|
||||
data: [
|
||||
['2023-11-01 15:25:00','XBuffer 16','S0000451', '超时未转运' ],
|
||||
|
||||
],
|
||||
index: true,
|
||||
columnWidth: [50, 200,200,200],
|
||||
align: ['center'],
|
||||
rowNum: 7,
|
||||
headerBGC: '#1981f6',
|
||||
headerHeight: 45,
|
||||
oddRowBGC: 'rgba(0, 44, 81, 0.8)',
|
||||
evenRowBGC: 'rgba(10, 29, 50, 0.8)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#scroll-board {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 20px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div id="top-header">
|
||||
<dv-decoration-8 class="header-left-decoration" />
|
||||
<dv-decoration-5 class="header-center-decoration" />
|
||||
<dv-decoration-8 class="header-right-decoration" :reverse="true" />
|
||||
|
||||
<div class="center-title">烘房监控平台</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment";
|
||||
|
||||
export default {
|
||||
name: 'TopHeader',
|
||||
|
||||
data () {
|
||||
return {
|
||||
gettimedata: "",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.gettime();
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#top-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
|
||||
.header-center-decoration {
|
||||
width: 40%;
|
||||
height: 60px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.header-left-decoration, .header-right-decoration {
|
||||
width: 25%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.center-title {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
left: 50%;
|
||||
top: 15px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div id="water-level-chart">
|
||||
<div class="water-level-chart-title">烘房出香情况</div>
|
||||
|
||||
<div class="water-level-chart-details">
|
||||
|
||||
本班次出香<span>354</span>车
|
||||
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
|
||||
<dv-water-level-pond :config="config" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import roseChart from './roseChart'
|
||||
export default {
|
||||
name: 'WaterLevelChart',
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
data: [45],
|
||||
shape: 'round',
|
||||
waveHeight: 25,
|
||||
waveNum: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#water-level-chart {
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 20px;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.water-level-chart-title {
|
||||
font-weight: bold;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.water-level-chart-details {
|
||||
height: 15%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
align-items: flex-end;
|
||||
|
||||
span {
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
color: #58a1ff;
|
||||
margin: 0 5px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dv-water-pond-level {
|
||||
max-width: 90%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 10px solid #19c3eb;
|
||||
border-radius: 50%;
|
||||
|
||||
ellipse {
|
||||
stroke: transparent !important;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue