【vue看板】

weixin_46223284

已于 2024-04-24 10:33:59 修改

阅读量1k

点赞数 10

文章标签： vue.js 前端 javascript

于 2024-04-24 10:14:24 首次发布

本文链接：https://blog.csdn.net/weixin_46223284/article/details/138145343

版权

文章目录

前言
一、成果展示
二、看板1控件页代码
三、看板2控件页代码
四、公用样式页代码
总结

前言

大屏看板
提示：以下是本篇文章正文内容，下面案例可供参考

一、成果展示

看板1
服务器看板2

二、看板1控件页代码

代码如下（示例）：

数据可视化看板

立库占位状态

空闲总数 11231

占位总数 11231

交叉带分拣数据

DPS状态

        </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);
co