<template>
|
<div>
|
|
<div class="kb_body">
|
<div class="kb_background" />
|
<div class="kb_background2" />
|
<div class="kb_headerPic" />
|
|
<div class="content">
|
<div class="left content_block">
|
<dv-border-box-12 class="block01 block">
|
<div class="block_title">成本效益分析</div>
|
<div id="echart01" style="width: 100%;height: 100%;" />
|
</dv-border-box-12>
|
<dv-border-box-12 class="block02 block">
|
<div class="block_title">平台安全防护</div>
|
<div id="zhkb12" style="width:160px;height:160px;margin-top:30px" />
|
<div class="box03" />
|
<div class="box03" />
|
<div class="text2">累计拦截</div>
|
<div class="text3">累计阻止</div>
|
<div class="text4">{{ number5 }}次</div>
|
<div class="text5">{{ number5 }}次</div>
|
</dv-border-box-12>
|
<dv-border-box-12 class="block02 block">
|
<div class="block_title">自动缺陷分类系统</div>
|
<div id="echart02" style="width: 100%;height: 100%;margin-top:20px" />
|
</dv-border-box-12>
|
<dv-border-box-12 class="block01 block">
|
<div class="block_title">缺陷分类统计</div>
|
<div id="echart03" style="width: 100%;height: 100%;" />
|
</dv-border-box-12>
|
</div>
|
<div class="center content_block">
|
<div class="center01">
|
<div class="block04">
|
<dv-border-box-10 style="width: 100%;height: 100%;">
|
<div style="color: #c7e7ff">总上线时长(H)</div>
|
<div style="font-size: 18px;font-weight: bolder">
|
<countTo :start-val="0" :end-val="number1" :duration="3000" />
|
</div>
|
</dv-border-box-10>
|
</div>
|
<div class="block04">
|
<dv-border-box-10 style="width: 100%;height: 100%;">
|
<div style="color: #c7e7ff">总访问量(PV)</div>
|
<div style="font-size: 18px;font-weight: bolder">
|
<countTo :start-val="0" :end-val="number2" :duration="3000" />
|
</div>
|
</dv-border-box-10>
|
</div>
|
<div class="block04">
|
<dv-border-box-10 style="width: 100%;height: 100%;">
|
<div style="color: #c7e7ff">总数据量(TB)</div>
|
<div style="font-size: 18px;font-weight: bolder">
|
<countTo :start-val="0" :end-val="number3" :duration="3000" />
|
</div>
|
</dv-border-box-10>
|
</div>
|
<div class="block04">
|
<dv-border-box-10 style="width: 100%;height: 100%;">
|
<div style="color: #c7e7ff">系统吞吐量(次/s)</div>
|
<div style="font-size: 18px;font-weight: bolder">
|
<countTo :start-val="0" :end-val="number4" :duration="3000" />
|
</div>
|
</dv-border-box-10>
|
</div>
|
<div class="block04">
|
<dv-border-box-10 style="width: 100%;height: 100%;">
|
<div id="echart06" style="width: 100%;height: 100%" />
|
</dv-border-box-10>
|
</div>
|
</div>
|
<div class="center02">
|
<div class="center02_left">
|
<div class="img001" />
|
</div>
|
<div class="center02_right">
|
<dv-decoration-7 style="width:100%;height:30px;padding: 0 20px">永康市(浙)</dv-decoration-7>
|
<div style="width: 100%;height: 270px;">
|
<dv-border-box-1>
|
<dv-scroll-board :config="config4" style="padding: 30px;width:100%;height:210px;margin-top: -60px;" />
|
</dv-border-box-1>
|
</div>
|
</div>
|
</div>
|
<div class="center03">
|
<dv-border-box-12 class="block">
|
<div class="block_title">设备管理层</div>
|
<div style="display: flex;flex-direction: column;width: 100%;">
|
<div style="display: flex;justify-content: space-evenly;height: 275px;width: 100%;margin-top: 30px;">
|
<div
|
style="display:flex;flex-direction: column;width: 52%;justify-content: center;align-items: center"
|
>
|
<div style="height: 30px;font-weight: bolder">智能工厂设备监控中心</div>
|
<div style="height: 240px;">
|
<dv-scroll-board :config="config5" style="padding: 0px;width:240px;height:100%;margin-top: 0px;" />
|
</div>
|
</div>
|
<div
|
style="display:flex;flex-direction: column;width: 46%;justify-content: center;align-items: center"
|
>
|
<div style="height: 30px;">实时数量</div>
|
<div style="height: 240px;">
|
<dv-scroll-board :config="config6" style="padding: 0px;width:210px;height:100%;margin-top: 0px;" />
|
</div>
|
</div>
|
</div>
|
<!-- <div style="height: 155px;">123</div>-->
|
</div>
|
</dv-border-box-12>
|
<dv-border-box-12 class="block">
|
<div class="block_title">生产管理层</div>
|
<div style="display: flex;flex-direction: column;width: 100%;">
|
<div id="echart11" style="height: 165px;width: 100%;" />
|
<div id="echart10" style="height: 165px;width: 100%;" />
|
</div>
|
</dv-border-box-12>
|
</div>
|
<div class="center04">
|
<dv-border-box-12 class="block">
|
<div class="block_title">品质管理层</div>
|
<div class="center04_block">
|
<div id="echart07" style="width: 240px;height: 100%;" />
|
<div id="echart08" style="width: 240px;height: 100%;" />
|
<div id="echart09" style="width: 480px;height: 100%;" />
|
</div>
|
</dv-border-box-12>
|
</div>
|
</div>
|
<div class="right content_block">
|
<dv-border-box-12 class="block01 block">
|
<div class="block_title">平台功能使用率</div>
|
<div id="echart04" style="width: 100%;height: 100%;" />
|
</dv-border-box-12>
|
<dv-border-box-12 class="block02 block">
|
<div class="block_title">用户类型</div>
|
<div id="echart05" style="width: 100%;height: 100%;margin-top: 30px" />
|
</dv-border-box-12>
|
<dv-border-box-12 class="block03 block">
|
<div class="block03_top">
|
<div class="block03_top_left">
|
<div class="block03_top_title">设备警报</div>
|
<dv-scroll-board :config="config1" style="width:100%;height:80%" />
|
</div>
|
<div class="block03_top_right">
|
<div class="block03_top_title">安全警报</div>
|
<dv-scroll-board :config="config2" style="width:100%;height:80%" />
|
</div>
|
</div>
|
<div class="block03_bottom">
|
<div class="block03_bottom_title">环境检测数据异常</div>
|
<dv-scroll-board :config="config3" style="width:100%;height:80%" />
|
</div>
|
</dv-border-box-12>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
import '@/utils/world'
|
import {
|
echart01,
|
echart02,
|
echart03,
|
echart04,
|
echart05,
|
echart06,
|
echart07,
|
echart08, echart09, echart10, echart11,
|
loadEcharts
|
} from '@/utils/myEcharts'
|
import '@/utils/echarts-liquidfill.min.js'
|
import countTo from 'vue-count-to'
|
|
export default {
|
name: 'Index',
|
components: { countTo },
|
data() {
|
return {
|
colorX: '#c7e7ff',
|
colorY: '#7696c5',
|
config1: {
|
// headerBGC: '#003B51',
|
header: ['设备名', '状态', '时间'],
|
data: [
|
['注塑机', '<span style="color:red;">异常</span>', '05:19'],
|
['压铸机', '<span style="color:red;">异常</span>', '06:52'],
|
['打磨机', '<span style="color:red;">异常</span>', '08:57'],
|
['抛光机', '<span style="color:red;">异常</span>', '09:09'],
|
['锻造机', '<span style="color:red;">异常</span>', '10:20'],
|
['铸造机', '<span style="color:red;">异常</span>', '11:23'],
|
['注塑机', '<span style="color:red;">异常</span>', '11:29'],
|
['压铸机', '<span style="color:red;">异常</span>', '13:20'],
|
['打磨机', '<span style="color:red;">异常</span>', '15:59'],
|
['抛光机', '<span style="color:red;">异常</span>', '16:20']
|
],
|
// index: true,
|
// columnWidth: [50],
|
align: ['center']
|
},
|
|
config2: {
|
// headerBGC: '#003B51',
|
header: ['警告', '状态', '时间'],
|
data: [
|
['注塑机', '<span style="color:red;">异常</span>', '06:29'],
|
['压铸机', '<span style="color:red;">异常</span>', '07:58'],
|
['打磨机', '<span style="color:red;">异常</span>', '09:05'],
|
['抛光机', '<span style="color:red;">异常</span>', '09:09'],
|
['锻造机', '<span style="color:red;">异常</span>', '10:20'],
|
['铸造机', '<span style="color:red;">异常</span>', '12:22'],
|
['注塑机', '<span style="color:red;">异常</span>', '14:29'],
|
['压铸机', '<span style="color:red;">异常</span>', '15:20'],
|
['打磨机', '<span style="color:red;">异常</span>', '15:59'],
|
['抛光机', '<span style="color:red;">异常</span>', '16:20']
|
],
|
// index: true,
|
// columnWidth: [50],
|
align: ['center']
|
},
|
|
config3: {
|
// headerBGC: '#003B51',
|
header: ['环境异常', '状态', '时间'],
|
data: [
|
['金工车间温度', '<span style="color:red;">异常</span>', '05:19'],
|
['包装车间湿度', '<span style="color:red;">异常</span>', '06:52'],
|
['包装车间温度', '<span style="color:red;">异常</span>', '08:57'],
|
['金工车间湿度', '<span style="color:red;">异常</span>', '09:09'],
|
['涂装车间湿度', '<span style="color:red;">异常</span>', '10:20'],
|
['焊接车间温度', '<span style="color:red;">异常</span>', '11:23'],
|
['抛光车间温度', '<span style="color:red;">异常</span>', '11:29'],
|
['焊接车间温度', '<span style="color:red;">异常</span>', '13:20'],
|
['抛光车间温度', '<span style="color:red;">异常</span>', '15:59'],
|
['焊接车间温度', '<span style="color:red;">异常</span>', '16:20']
|
],
|
// index: true,
|
// columnWidth: [50],
|
align: ['center']
|
},
|
|
config4: {
|
// headerBGC: '#003B51',
|
// header: ['设备名', '状态', '时间'],
|
evenRowBGC: 'transparent',
|
oddRowBGC: 'rgba(0,59,81,0.5)',
|
data: [
|
['627', '<span style="color:#7696c5;font-weight: bolder">627TB</span>'],
|
['650', '<span style="color:#7696c5;font-weight: bolder">650TB</span>'],
|
['605', '<span style="color:#7696c5;font-weight: bolder">605TB</span>'],
|
['675', '<span style="color:#7696c5;font-weight: bolder">675TB</span>'],
|
['627', '<span style="color:#7696c5;font-weight: bolder">627TB</span>'],
|
['650', '<span style="color:#7696c5;font-weight: bolder">650TB</span>'],
|
['605', '<span style="color:#7696c5;font-weight: bolder">605TB</span>'],
|
['675', '<span style="color:#7696c5;font-weight: bolder">675TB</span>'],
|
['627', '<span style="color:#7696c5;font-weight: bolder">627TB</span>'],
|
['650', '<span style="color:#7696c5;font-weight: bolder">650TB</span>'],
|
['605', '<span style="color:#7696c5;font-weight: bolder">605TB</span>'],
|
['675', '<span style="color:#7696c5;font-weight: bolder">675TB</span>']
|
],
|
// index: true,
|
// columnWidth: [50],
|
align: ['center']
|
},
|
config5: {
|
// headerBGC: '#003B51',
|
header: ['车间名称', '设备编号', '状态'],
|
evenRowBGC: 'transparent',
|
oddRowBGC: 'rgba(0,59,81,0.5)',
|
data: [
|
['金工', '激光切割', '正常'],
|
['金工', '激光切割', '正常'],
|
['抛光', '打磨机01', '正常'],
|
['抛光', '打磨机02', '正常'],
|
['抛光', '抛光机01', '<span style="color:red">异常</span>'],
|
['抛光', '抛光机02', '<span style="color:red">异常</span>'],
|
['金工', '激光切割', '正常'],
|
['金工', '激光切割', '正常']
|
],
|
// index: true,
|
// columnWidth: [50],
|
align: ['center']
|
},
|
config6: {
|
// headerBGC: '#003B51',
|
header: ['机械臂编号', '出错提示'],
|
evenRowBGC: 'transparent',
|
oddRowBGC: 'rgba(0,59,81,0.5)',
|
data: [
|
['机械臂A01', '抓取物料失败'],
|
['机械臂A02', '抓取物料失败'],
|
['机械臂A03', '抓取物料失败'],
|
['机械臂A04', '抓取物料失败'],
|
['机械臂A05', '抓取物料失败'],
|
['机械臂B01', '抓取物料失败'],
|
['机械臂B02', '抓取物料失败'],
|
['机械臂B03', '抓取物料失败'],
|
['机械臂B04', '抓取物料失败'],
|
['机械臂B05', '抓取物料失败']
|
|
],
|
// index: true,
|
// columnWidth: [50],
|
align: ['center']
|
},
|
number1: 126560,
|
number2: 4321,
|
number3: 3921,
|
number4: 37063,
|
number5: 764
|
|
}
|
},
|
created() {
|
setInterval(() => {
|
location.reload()
|
}, 1000 * 60 * 60 * 4)// 每八小时刷新一次
|
},
|
mounted() {
|
this.getEcharts()
|
|
setInterval(() => {
|
this.number1 = this.number1 + 100
|
this.number2 = this.number2 + 15
|
this.number3 = this.number3 + 20
|
this.number4 = this.number4 + 50
|
|
this.number5 = this.number5 + Math.floor(Math.random() * 5)
|
}, 1000 * 30)
|
},
|
methods: {
|
getEcharts() {
|
loadEcharts('echart01', echart01())
|
this.getLiquidFill()
|
loadEcharts('echart02', echart02())
|
loadEcharts('echart03', echart03())
|
loadEcharts('echart04', echart04())
|
loadEcharts('echart05', echart05())
|
loadEcharts('echart06', echart06())
|
loadEcharts('echart07', echart07())
|
loadEcharts('echart08', echart08())
|
loadEcharts('echart09', echart09())
|
loadEcharts('echart10', echart10())
|
loadEcharts('echart11', echart11())
|
|
setInterval(() => {
|
loadEcharts('echart01', echart01())
|
this.getLiquidFill()
|
loadEcharts('echart02', echart02())
|
loadEcharts('echart03', echart03())
|
}, 1000 * 60)
|
|
setInterval(() => {
|
loadEcharts('echart05', echart05())
|
loadEcharts('echart06', echart06())
|
loadEcharts('echart07', echart07())
|
loadEcharts('echart08', echart08())
|
}, 1000 * 60 * 2)
|
setInterval(() => {
|
loadEcharts('echart09', echart09())
|
loadEcharts('echart10', echart10())
|
loadEcharts('echart11', echart11())
|
}, 1000 * 60 * 3)
|
},
|
getLiquidFill() {
|
const value1 = Math.ceil(Math.random() * 10 + 80)
|
const option = {
|
backgroundColor: 'transparent',
|
grid: {
|
left: '0%',
|
right: '0%',
|
bottom: '0%',
|
top: '0%',
|
containLabel: true
|
},
|
title: {
|
text: value1 + '%',
|
x: '33%',
|
y: '40%',
|
textStyle: {
|
color: this.colorX,
|
fontSize: 26
|
}
|
},
|
series: [
|
{
|
type: 'liquidFill',
|
radius: '80%',
|
// data: [0.6],
|
// data: [value1 / 100, 0.4, 0.2],
|
data: [0.6, 0.4, 0.2],
|
backgroundStyle: {
|
color: {
|
type: 'radial',
|
x: 0.5,
|
y: 0.5,
|
r: 0.5,
|
colorStops: [
|
{
|
offset: 0,
|
color: 'rgba(0,24,55, 0)'
|
},
|
{
|
offset: 0.75,
|
color: 'rgba(0,24,55, 0)'
|
},
|
{
|
offset: 1,
|
color: 'rgba(37,237,259, 1)'
|
}],
|
globalCoord: false
|
}
|
},
|
outline: {
|
borderDistance: 0,
|
itemStyle: {
|
borderWidth: 0,
|
borderColor: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0,
|
color: 'rgba(50,115,256, 1)'
|
}, {
|
offset: 0.5,
|
color: 'rgba(50,115,233, .75)'
|
}, {
|
offset: 1,
|
color: 'rgba(50,115,233, 1)'
|
}],
|
globalCoord: false
|
}
|
}
|
},
|
color: ['rgba(9,216,242, .8)', 'rgba(9,216,242, 0.6)', 'rgba(9,216,242, 0.4)'],
|
// color: {
|
// type: 'linear',
|
// x: 0,
|
// y: 0,
|
// x2: 0,
|
// y2: 1
|
// colorStops: [{
|
// offset: 0,
|
// color: 'rgba(37,237,259, 1)'
|
// }, {
|
// offset: 0.5,
|
// color: 'rgba(0,100,259, 0.5)'
|
// }, {
|
// offset: 1,
|
// color: 'darkblue'
|
// }
|
// ]
|
// globalCoord: false
|
// },
|
label: {
|
normal: {
|
formatter: ''
|
}
|
}
|
}
|
]
|
}
|
const myChart = echarts.init(document.getElementById('zhkb12'))
|
|
if (option.textStyle == null) {
|
option.textStyle = {
|
fontFamily: 'Microsoft YaHei',
|
color: '#ffffff'
|
}
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.clear()
|
myChart.setOption(option, true)
|
|
window.addEventListener('resize', function() {
|
myChart.resize()
|
})
|
}
|
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
$kbBorderColor: rgba(9, 216, 242, 0.4);
|
.kb_body {
|
width: 1920px;
|
height: 1080px;
|
background: #000;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
color: #09d8f2;
|
justify-content: flex-start;
|
|
}
|
|
.kb_background {
|
position: absolute;
|
bottom: 0;
|
width: 1920px;
|
height: 887px;
|
background: url('../../assets/images/body.jpg') no-repeat;
|
opacity: 0.4;
|
|
}
|
|
.kb_background2 {
|
position: absolute;
|
top: 0;
|
width: 1920px;
|
height: 887px;
|
background: url('../../assets/images/body.jpg') no-repeat;
|
opacity: 0.4;
|
}
|
|
.kb_headerPic {
|
//width: 1825px;
|
height: 85px;
|
background: url("../../assets/images/pic01.png") no-repeat;
|
margin-left: 47.5px;
|
z-index: 2;
|
}
|
|
.content {
|
display: flex;
|
justify-content: space-evenly;
|
}
|
|
.content_block {
|
height: 995px;
|
z-index: 2;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
align-items: center;
|
padding: 5px;
|
}
|
|
.left {
|
width: 460px;
|
}
|
|
.center {
|
width: 1000px;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.center01 {
|
height: 100px;
|
width: 100%;
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.center02 {
|
height: 320px;
|
width: 100%;
|
display: flex;
|
justify-content: space-evenly;
|
}
|
|
.center02_left {
|
width: 60%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.img001 {
|
background: url("../../assets/images/map.png") no-repeat;
|
background-size: 100% 100%;
|
width: 386px;
|
height: 311px;
|
}
|
|
.center02_right {
|
width: 30%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.dv-decoration-7 {
|
display: flex;
|
justify-content: space-between;
|
font-weight: bolder;
|
letter-spacing: 4px;
|
|
}
|
|
.center03 {
|
height: 330px;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
|
.dv-border-box-12 {
|
width: 49%;
|
}
|
}
|
|
.center04 {
|
height: 160px;
|
width: 100%;
|
display: flex;
|
}
|
|
.block04 {
|
width: 180px;
|
height: 100px;
|
|
::v-deep .border-box-content {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
align-items: center;
|
}
|
}
|
|
.center04_block {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
}
|
|
.right {
|
width: 460px;
|
}
|
|
::v-deep .border-box-content {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.block {
|
position: relative;
|
}
|
|
.block01 {
|
width: 100%;
|
height: 250px;
|
}
|
|
.block02 {
|
width: 100%;
|
height: 200px;
|
}
|
|
.block03 {
|
height: 460px;
|
width: 100%;
|
|
::v-deep .border-box-content {
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
}
|
|
.block03_top {
|
width: 100%;
|
height: 240px;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.block03_top_left {
|
display: flex;
|
flex-direction: column;
|
width: 48%;
|
}
|
|
.block03_top_title {
|
height: 20%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.block03_top_right {
|
display: flex;
|
flex-direction: column;
|
width: 48%;
|
}
|
|
.block03_bottom {
|
width: 100%;
|
height: 220px;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.block03_bottom_title {
|
height: 20%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
}
|
|
.block_title {
|
background: linear-gradient(to right, #36a5cf, #000013);
|
width: 200px;
|
height: 20px;
|
font-size: 16px;
|
color: #fff;
|
position: absolute;
|
top: 10px;
|
left: 10px;
|
padding: 2px 0 0 5px;
|
border-radius: 3px;
|
letter-spacing: 2px;
|
}
|
|
.box03 {
|
width: 124px;
|
height: 139px;
|
background: url("../../assets/images/box03.png");
|
}
|
|
.text1 {
|
position: absolute;
|
bottom: 10px;
|
left: 72px;
|
}
|
|
.text2 {
|
position: absolute;
|
bottom: 10px;
|
left: 210px;
|
}
|
|
.text3 {
|
position: absolute;
|
bottom: 10px;
|
left: 336px;
|
}
|
|
.text4 {
|
position: absolute;
|
top: 50px;
|
left: 223px;
|
}
|
|
.text5 {
|
position: absolute;
|
top: 50px;
|
left: 346px;
|
}
|
|
</style>
|
