烘房看板
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