文章目录
前言
大屏看板
提示:以下是本篇文章正文内容,下面案例可供参考
一、成果展示
二、看板1控件页代码
代码如下(示例):
数据可视化看板
空闲总数 11231
占位总数 11231
</div>
<div id="layer_02" class="data-row-display">
<div id="layer_02_01" class="data-left-item-parent">
<div class="data-left-item">
<div class="title">AS/RS出库任务</div>
<div style="height: calc(100% - 25px);width: 100%; position: relative; display:flex; flex-direction: column; ">
<div id="wcs_chart3" style=" height: calc(100% ); max-width:calc(100% ); align-self: center; align-items: center; display: flex; position: absolute; " ></div>
</div>
<div class="data-foot-line"></div>
</div>
</div>
<div id="layer_02_02" class="data-left-item-parent">
<div class="data-left-item">
<div class="title">当前任务分拨达成率</div>
<div style="height: calc(100% - 25px);width: 100%; position: absolute; display:flex; flex-direction: row; ">
<div style=" height: 100% ; max-width:100% ; align-self: center; align-items: center; display: flex; flex-direction: column; position: relative; ">
<div style=" white-space: nowrap; color: #FFFFFF; height: 100% ; max-width:100% ; text-align: center;align-self: center; align-items: center; display: flex; position: relative; ">
任务类型:消退上架分拨
</div>
<div style=" white-space: nowrap;color: #FFFFFF; text-align: center; height: 100% ; max-width:100% ;align-self: center; align-items: center; display: flex; position: relative; ">
波次编号:CJ3453542342
</div>
<div style=" white-space: nowrap;color: #FFFFFF; text-align: center; height: 100% ; max-width:100% ;align-self: center; align-items: center; display: flex; position: relative; ">
总数量:123234
</div>
</div>
<div id="wcs_chart4" style=" height: 100% ; max-width:100% ; align-self: center; align-items: center; display: flex; position: relative; "></div>
</div>
<div class="data-foot-line"></div>
</div>
</div>
<div class="data-left-item-parent">
<div class="data-left-item">
<div class="title">缓存线状态</div>
<div style="height: calc(100% - 25px);width: 100%; position: relative; display:flex; flex-direction: column; ">
<div id="wcs_chart5" style=" height: 100% ; max-width:100% ; align-self: center; align-items: center; display: flex; position: absolute; "></div>
</div>
<div class="data-foot-line"></div>
</div>
</div>
</div>
<div id="layer_03" class="data-row-display">
<div id="layer_02_01" class="data-left-item-parent">
<div class="data-left-item">
<div class="title">AS/RS入库任务</div>
<div style="height:calc(100% - 25px);width: 100%; position: relative; display:flex; flex-direction: column; ">
<div id="wcs_chart6" style=" height: calc(100% ); max-width:calc(100% ); align-self: center; align-items: center; display: flex; position: absolute; " ></div>
</div>
<div class="data-foot-line"></div>
</div>
</div>
<div id="layer_02_02" class="data-left-item-parent">
<div class="data-left-item">
<div class="title">当前任务数据状态</div>
<div style="height: calc(100% - 25px) ;width: 100%; position: absolute; display:flex; flex-direction: row; ">
<div id="wcs_chart7" style=" height: 100% ; max-width:100% ; align-self: center; align-items: center; position: relative; display: flex; "></div>
<div id="wcs_chart9" style=" height: 100% ; max-width:100% ; align-self: center; align-items: center;position: relative; display: flex; "></div>
</div>
<div class="data-foot-line"></div>
</div>
</div>
<div class="data-left-item-parent">
<div class="data-left-item">
<div class="title">MCS输送线任务</div>
<div style="height: calc(100% - 25px);width: 100%; position: relative; display:flex; flex-direction: column; ">
<div id="wcs_chart8" style=" height: 100% ; max-width:100% ; align-self: center; align-items: center; display: flex; position: absolute; "></div>
</div>
<div class="data-foot-line"></div>
</div>
</div>
</div>
</div>
</div>
</div>
三、看板2控件页代码
代码如下(示例):
应用服务器
</div>
<div class="data-container">
<div class="data-left">
<div class="data-row-display">
<div class="data-left-item-parent">
<div class="data-left-item">
<div class="title">磁盘使用率</div>
<div id="diskPieChartId" style="height: calc(100% - 40px);width: 100%;align-self: center; align-items: center; position: absolute; display:flex; flex-direction: column; ">
</div>
<div class="data-foot-line"></div>
</div>
</div>
<div class="data-left-item-parent">
<div class="data-left-item">
<div class="title">内存使用率</div>
<div id="memoryPieChartId" style="height: calc(100% - 40px) ;width: 100%;align-self: center; align-items: center; position: absolute; display:flex; flex-direction: column; ">
</div>
<div class="data-foot-line"></div>
</div>
</div>
<div class="data-left-item-parent">
<div class="data-left-item">
<div class="title">cpu使用率</div>
<div id="cpuGaugeChartId" style="height: calc(100% - 60px);width: 100%;align-self: center; align-items: center; padding-left:10px; position: absolute; display:flex; flex-direction: column; ">
</div>
<div class="data-foot-line"></div>
</div>
</div>
</div>
<div class="data-row-display">
<div class="data-left-item-parent">
<div class="data-left-item">
<div class="title">磁盘使用</div>
<div id="diskCategoryId" style="height: calc(100% - 30px);width: 100%; position: absolute; display:flex; flex-direction: column; ">
</div>
<div class="data-foot-line"></div>
</div>
</div>
<div class="data-left-item-parent">
<div class="data-left-item">
<div class="title">内存使用</div>
<div id="memoryCategoryId" style="height: calc(100% - 30px);width: 100%; position: absolute; display:flex; flex-direction: column; ">
</div>
<div class="data-foot-line"></div>
</div>
</div>
<div class="data-left-item-parent">
<div class="data-left-item">
<div class="title">cpu使用</div>
<div id="cpuCategoryId" style="height: calc(100% - 30px);width: 100%; position: absolute; display:flex; flex-direction: column; ">
</div>
<div class="data-foot-line"></div>
</div>
</div>
</div>
</div>
</div>
</div>
var labelBottom = {
normal : {
label : {
show : true,
position : 'center'
},
labelLine : {
show : false
}
},
emphasis: {
}
};
var echarts = require(“echarts”);
let $myDiskPieChart,
$myMemoryPieChart,
$myCpuGaugeChart,
$myDiskCategoryChart,
$myMemoryCategoryChart,
$myCpuCategoryChart,
dataDiskPie=[
{value:25, name:‘空闲’,itemStyle : labelBottom},
{value:32, name:‘使用’,itemStyle : labelTop}
],
dataMemoryPie=[
{value:25, name:‘空闲’,itemStyle : labelBottom},
{value:32, name:‘使用’,itemStyle : labelTop}
],
dataCpuGauge=[{value: 9.3, name: ‘cpu使用率’}],
dataDiskCategory=[],
dataMemoryCategory=[],
dataCpuCategory=[],
Item={},
Items=[],
computer_Performance_Param={};
import {
option1,
option2,
option3,
cpudata,
option4,
option5,
option6,
} from “./chartOptions”;
import { defineComponent, ref, reactive, toRefs, getCurrentInstance } from “vue”;
import http from “@/…/src/api/http.js”;
let $message,
appContext,
eventParpm=‘’;
export default{
components:{
},
setup(props, context){
},
data(){
return {
intervaltime:‘’,
intervaltime1:‘’,
intervaltime2:‘’,
conveyorAltbol: false,
str: ‘’,
clearSure:false,
websock: null,
lockReconnect: false, //是否真正建立连接
timeout: 58 * 1000, //58秒一次心跳
timeoutObj: null, //心跳心跳倒计时
serverTimeoutObj: null, //心跳倒计时
timeoutnum: null, //断开 重连倒计时
}
},
methods: {
StartInterval()
{
this.intervaltime=setInterval(this.CpuDataInitAgain, 1000);
this.intervaltime1=setInterval(this.MemoryDataInitAgain, 1000);
this.intervaltime2=setInterval(this.DiskDataInitAgain, 1000);
},
CpuDataInitAgain()
{
Item={};
Items=[];
Item.devType=‘conveyor’,
Item.devName=‘asrs’,
Item.devDataType=‘cpu’,
Items.push(Item);