1140 lines
33 KiB
Vue
1140 lines
33 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2021-07-19 15:18:30
|
||
* @LastEditors: zhp
|
||
* @LastEditTime: 2024-04-26 09:52:16
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<div id="container" ref="container" class="visual-container" :style="styles">
|
||
<el-row class="container-title" :style="{
|
||
height: 88 + 'px',
|
||
lineHeight: 88 + 'px',
|
||
fontSize: 31 + 'px',
|
||
}">
|
||
<img src="../../assets/img/logo.png" style="width: 1.1em; position: relative; top: 0.22em" alt="" />
|
||
许昌安彩深加工看板
|
||
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
|
||
<h3 class="time">{{ times }}</h3>
|
||
<!-- <el-button type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px',fontSize:'32px'}"
|
||
@click="changeFullScreen">
|
||
<svg-icon width="32" height="32" v-if="isFullScreen" icon-class="unFullScreenView" />
|
||
<svg-icon width="32" height="32" v-else icon-class="fullScreenView" />
|
||
</el-button> -->
|
||
</el-row>
|
||
<el-row class="container-main flex-col" type="flex">
|
||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%">
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||
<base-container :show-time="true" :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
|
||
<dv-scroll-board class="eqTable" :config="eqConfig" style="width: 100%; height: 350px"
|
||
ref="eqScrollBoard" />
|
||
</base-container>
|
||
</el-col>
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||
<base-container :show-time="true" :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
|
||
<dv-scroll-board :config="processConfig" style="width: 100%; height: 350px" ref="processScrollBoard" />
|
||
</base-container>
|
||
</el-col>
|
||
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
|
||
<base-container :show-time="false" :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
|
||
<div class="order" style="width: 100%; overflow: hidden scroll; height: 350px">
|
||
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: .5em;overflow: hidden;">
|
||
<!-- <el-col :span="12"> -->
|
||
<!-- <div style="height: 34px;"> -->
|
||
<span style="display: inline-block;width: 400px;height: 10px;">
|
||
<span class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</span>
|
||
<el-divider v-if="op.specifications" class="split" direction="vertical"></el-divider>
|
||
<!-- <span v-if="op.size" class="split"></span> -->
|
||
<span class="orderSize" style="font-size: 14px;opacity: calc(.6);">{{
|
||
op.specifications }}</span>
|
||
<el-divider class="split" v-if="op.planQuantity" direction="vertical"></el-divider>
|
||
<span class="orderPlan" style="font-size: 14px;opacity: calc(.6);">{{
|
||
op.planQuantity }}</span>
|
||
<span v-if="op.planQuantity" class="orderFinishTwo"
|
||
style="font-size: 14px;opacity: calc(.6);">片</span>
|
||
</span>
|
||
<!-- <span style="overflow: hidden;"> -->
|
||
<span class="orderFinish" style="font-size: 14px;margin-left: 40px;">{{
|
||
op.actualQuantity
|
||
}}</span>
|
||
<span v-if="op.actualQuantity" class="orderFinishTwo" style="font-size: 14px">片</span>
|
||
<el-divider class="split" style="background-color: rgba(0, 255, 247, 1)" v-if="op.actualQuantity"
|
||
direction="vertical"></el-divider>
|
||
<!-- </span> -->
|
||
<!-- </div> -->
|
||
<el-progress style="width: 620px;" text-color="rgba(0, 255, 247, 1)" :stroke-width="10"
|
||
define-back-color="rgba(32, 57, 96, 1)" :percentage="op.progressRate" class="custom-progress-bar" />
|
||
</el-row>
|
||
</div>
|
||
<!-- </div> -->
|
||
</base-container>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||
<base-container :show-time="true" :show-yes-time="true" :no-content-padding="true" :height="256"
|
||
:size="'eqStatus'" :title="'能源监控'" :title-icon="'energyMonitoring'">
|
||
<el-row :gutter="9">
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||
<linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList"
|
||
:data-list="EnergyMonitoringList" :height="359" />
|
||
</el-col>
|
||
</el-row>
|
||
</base-container>
|
||
</el-col>
|
||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||
<base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'eqStatus'"
|
||
:title="'产线产量及良品率'" :title-icon="'productLine'">
|
||
<div class="myLegend">
|
||
<div class=" barCircleLegend"></div>
|
||
<div class=" barCircle"></div>
|
||
<h4 class="barText">产线良品率</h4>
|
||
<div class="barLegend"></div>
|
||
<h4 class="barCircleText">产线产量</h4>
|
||
</div>
|
||
<double-y-chart ref="productLineChart" :id="'doubleYChart'" :height="390" :show-legend="true" />
|
||
</base-container>
|
||
</el-col>
|
||
</el-row>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import baseContainer from './components/baseContainer';
|
||
import baseTable1 from './components/baseTable';
|
||
import screenfull from 'screenfull';
|
||
import doubleYChart from './components/doubleYChart ';
|
||
import LinearBarChart from './components/linearBarChart';
|
||
import WebSocketHeartbeat from './ws.js';
|
||
|
||
// 创建WebSocketHeartbeat实例
|
||
const qualityYearList = [
|
||
{
|
||
name: '翻转机',
|
||
code: 'EQ20240110112358000235',
|
||
status: '运行',
|
||
error: true,
|
||
},
|
||
{
|
||
name: '烘干炉',
|
||
code: 'EQ20240110112537000241',
|
||
status: '停机',
|
||
error: true,
|
||
},
|
||
{
|
||
name: '清洗机',
|
||
code: ' EQ20240110112310000232',
|
||
status: '故障',
|
||
error: true,
|
||
},
|
||
{
|
||
name: '钢化清洗机',
|
||
code: 'EQ20240110111700000208',
|
||
status: '故障',
|
||
error: true,
|
||
},
|
||
{
|
||
name: '固化机',
|
||
code: 'EQ20240110111700000201',
|
||
status: '停机',
|
||
error: false,
|
||
},
|
||
{
|
||
name: '磨边清洗机',
|
||
code: ' EQ20240110111700000208',
|
||
status: '停机',
|
||
error: true,
|
||
},
|
||
{
|
||
name: '预热机',
|
||
code: 'EQ20240110111700000205',
|
||
status: '运行',
|
||
error: false,
|
||
},
|
||
{
|
||
name: '下片机',
|
||
code: 'EQ20240115151435000279',
|
||
status: '故障',
|
||
error: true,
|
||
},
|
||
{
|
||
name: '冷却机',
|
||
code: 'EQ20240110111700000203',
|
||
status: '运行',
|
||
error: false,
|
||
},
|
||
{
|
||
name: 'A储片机106',
|
||
code: 'EQ20240110111700000202',
|
||
status: '停机',
|
||
error: true,
|
||
},
|
||
{
|
||
name: '二次清洗机',
|
||
code: 'EQ20240110111700000209',
|
||
status: '停机',
|
||
error: true,
|
||
},
|
||
{
|
||
name: '二次磨边机',
|
||
code: ' EQ20240110110927000181',
|
||
status: '停机',
|
||
error: false,
|
||
},
|
||
{
|
||
name: '测试设备',
|
||
code: 'EQ20240110111700000201',
|
||
status: '运行',
|
||
error: true,
|
||
},
|
||
];
|
||
const qualityMonthList = [
|
||
{
|
||
productionLineName: 'D61',
|
||
sectionName: '成型',
|
||
count: '3片',
|
||
inspectionTypeName: '细长泡',
|
||
},
|
||
{
|
||
productionLineName: 'D62',
|
||
sectionName: '组合落板',
|
||
count: '4片',
|
||
inspectionTypeName: '细长泡',
|
||
},
|
||
{
|
||
productionLineName: 'D61',
|
||
sectionName: '磨边',
|
||
count: '6片',
|
||
inspectionTypeName: '开口泡',
|
||
},
|
||
{
|
||
productionLineName: 'D63',
|
||
sectionName: '清洗',
|
||
count: '5片',
|
||
inspectionTypeName: '结石',
|
||
},
|
||
{
|
||
productionLineName: 'D64',
|
||
sectionName: '打孔',
|
||
count: '2片',
|
||
inspectionTypeName: '结石',
|
||
},
|
||
{
|
||
productionLineName: 'D63',
|
||
sectionName: '成型',
|
||
count: '7片',
|
||
inspectionTypeName: '开口泡',
|
||
},
|
||
{
|
||
productionLineName: 'D61',
|
||
sectionName: '上片',
|
||
count: '8片',
|
||
inspectionTypeName: '结石',
|
||
},
|
||
];
|
||
const orderProcessList = [
|
||
{
|
||
id: 1,
|
||
outRate: '.8',
|
||
name: '凯盛0322',
|
||
},
|
||
{
|
||
id: 2,
|
||
outRate: '.4',
|
||
name: '光伏玻璃4.0',
|
||
},
|
||
{
|
||
id: 3,
|
||
outRate: '.5',
|
||
name: '光伏玻璃3.0',
|
||
},
|
||
{
|
||
id: 4,
|
||
outRate: '.3',
|
||
name: '光伏玻璃2.0',
|
||
},
|
||
{
|
||
id: 5,
|
||
outRate: '.5',
|
||
name: '光伏玻璃1.0',
|
||
},
|
||
{
|
||
id: 6,
|
||
outRate: '.8',
|
||
name: '光伏玻璃',
|
||
},
|
||
{
|
||
id: 7,
|
||
outRate: '.8',
|
||
name: '统计订单',
|
||
},
|
||
];
|
||
export default {
|
||
name: 'ProductionMonitoringCockpit',
|
||
components: {
|
||
baseContainer,
|
||
baseTable1,
|
||
// baseTable2,
|
||
// baseTable3,
|
||
// TopRadioGroup,
|
||
doubleYChart,
|
||
LinearBarChart,
|
||
// pieChart1,
|
||
// pieChart2
|
||
// pieChart3
|
||
// BaseVideo
|
||
},
|
||
data() {
|
||
return {
|
||
beilv2: 1,
|
||
beilv: 1,
|
||
value: 100,
|
||
orderList: [],
|
||
times: '',
|
||
EnergyMonitoringNameList: [],
|
||
// equipmentList:[],
|
||
EnergyMonitoringList: [],
|
||
eqConfig: {
|
||
header: ['序号', '产线名', '设备名称', '设备状态'],
|
||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||
columnWidth: [70, 150, 200, 120],
|
||
align: ['center'],
|
||
data: [],
|
||
// index:true,
|
||
rowNum: 10,
|
||
},
|
||
processConfig: {
|
||
header: ['序号', '产线名称', '工序', '损耗片数', '缺陷类型'],
|
||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||
columnWidth: [70, 130, 100, 120, 110],
|
||
align: ['center'],
|
||
data: [],
|
||
// index:true,
|
||
rowNum: 10,
|
||
},
|
||
// cxDataList,
|
||
SJGws: undefined,
|
||
wsHeartbeat: undefined,
|
||
productLineList: [],
|
||
qualityYearList,
|
||
clientWidth: 0,
|
||
containerWidth: 111111,
|
||
isFullScreen: false,
|
||
// orderProcessList: [],
|
||
orderProcessList,
|
||
qualityMonthList,
|
||
// qualityMonthTableProps,
|
||
modelMonth: '',
|
||
dateType: '0',
|
||
};
|
||
},
|
||
computed: {
|
||
styles() {
|
||
const v = Math.floor(this.value * this.beilv2 * 100) / 10000;
|
||
return {
|
||
transform: `scale(${v})`,
|
||
transformOrigin: 'top left',
|
||
};
|
||
},
|
||
},
|
||
watch: {
|
||
isFullScreen: function (val) {
|
||
if (val) {
|
||
const _this = this;
|
||
_this.beilv2 = document.documentElement.clientWidth / 1920;
|
||
console.log(_this.beilv2);
|
||
} else {
|
||
const _this = this;
|
||
_this.beilv2 = document.documentElement.clientWidth / 1920;
|
||
}
|
||
},
|
||
clientWidth(val) {
|
||
if (!this.timer) {
|
||
this.clientWidth = val;
|
||
this.beilv2 = this.clientWidth / 1920;
|
||
this.timer = true;
|
||
let _this = this;
|
||
setTimeout(function () {
|
||
_this.timer = false;
|
||
}, 500);
|
||
}
|
||
this.windowWidth(val);
|
||
},
|
||
},
|
||
created() {
|
||
this.getData();
|
||
this.init();
|
||
setTimeout(() => {
|
||
window.location.reload();
|
||
}, 86400000);
|
||
},
|
||
destroyed() {
|
||
this.websocketClose();
|
||
this.SJGWebsocketClose();
|
||
},
|
||
mounted() {
|
||
let detData = [
|
||
{
|
||
id: '1',
|
||
name: '镀釉光伏玻璃GW',
|
||
progressRate: 0.933333,
|
||
specifications: '1100*5554*22',
|
||
plan: 111111111111,
|
||
actualQuantity:1000000111111,
|
||
},
|
||
{
|
||
id: '2',
|
||
name: '测试工单2',
|
||
progressRate: 0.932323,
|
||
size: '1100*5554*22',
|
||
plan: 11111,
|
||
actualQuantity: 111,
|
||
},
|
||
{
|
||
id: '3',
|
||
name: '测试工单3',
|
||
progressRate: 0.23232,
|
||
size: '1100*5554*22',
|
||
plan: 11111,
|
||
actualQuantity: 111,
|
||
},
|
||
{
|
||
id: '4',
|
||
name: '测试工单4',
|
||
progressRate: 0.32323,
|
||
size: '1100*5554*22',
|
||
plan: 11111,
|
||
actualQuantity: 111,
|
||
},
|
||
{
|
||
id: '5',
|
||
name: '测试工单4',
|
||
progressRate: 0.32323,
|
||
size: '1100*5554*22',
|
||
plan: 11111,
|
||
actualQuantity: 111,
|
||
},
|
||
{
|
||
id: '6',
|
||
name: '测试工单4',
|
||
size: '1100*5554*22',
|
||
progressRate: 0.32323,
|
||
plan: 11111,
|
||
actualQuantity: 111,
|
||
},
|
||
{
|
||
id: '7',
|
||
name: '测试工单4',
|
||
size: '1100*5554*22',
|
||
progressRate: 0.32323,
|
||
plan: 11111,
|
||
actualQuantity: 111,
|
||
},
|
||
{
|
||
id: '8',
|
||
name: '测试工单4',
|
||
progressRate: 0.32323,
|
||
size: '1100*5554*22',
|
||
plan: 11111,
|
||
actualQuantity: 111,
|
||
},
|
||
// {
|
||
// id: '5',
|
||
// name: '测试工单',
|
||
// progressRate: 0.5555
|
||
// }, {
|
||
// id: '6',
|
||
// name: '测试工单',
|
||
// progressRate: 0.66564
|
||
// },
|
||
];
|
||
this.orderList = detData.map((ele, index) => {
|
||
if (ele.progressRate && ele.progressRate != 1) {
|
||
return {
|
||
id: ele.id,
|
||
name: this.getStr(String(ele.name), 8),
|
||
progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
|
||
specifications: ele.specifications ? '规格' + ele.specifications : '',
|
||
planQuantity: ele.plan ? '计划' + this.getStr(String(ele.plan), 6) : '',
|
||
actualQuantity: ele.actualQuantity ? this.getStr(String(ele.actualQuantity), 6) : '',
|
||
};
|
||
}
|
||
});
|
||
let EnergyNameList = ['Y61', 'Y62', 'Y63', 'Y64', 'Y65'];
|
||
this.EnergyMonitoringNameList = EnergyNameList;
|
||
let EnergyDataList = [1, 2, 3, 4, 5];
|
||
// this.wsData.data.forEach((ele) => {
|
||
// EnergyDataList.push(ele.useQuantity)
|
||
// })
|
||
this.EnergyMonitoringList = EnergyDataList;
|
||
// console.log(EnergyDataList)
|
||
this.$refs.EnergyMonitoringChart.initChart(
|
||
this.EnergyMonitoringNameList,
|
||
this.EnergyMonitoringList
|
||
);
|
||
let eqArr = this.qualityYearList.map((item, index) => [
|
||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
</span>`,
|
||
// formatDate(item.planStartTime) || '',
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.lineName || ''}</span>`,`
|
||
<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0' : item.status == '停机' ? 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;background-color: #FFBD02;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px red;width:6px;height:6px;border-radius: 50%; background-color: red;float:left;margin:13px 10px 0 0'}"></div> ${item.status || ''}</span>`,
|
||
]);
|
||
this.eqConfig.data = eqArr;
|
||
let data = [
|
||
{
|
||
lineName: 'D62',
|
||
outputNum: '11111',
|
||
passRate: '0.9873'
|
||
},
|
||
{
|
||
lineName: 'D63',
|
||
outputNum: '23212',
|
||
passRate: '0.9873'
|
||
},
|
||
{
|
||
lineName: 'D61',
|
||
outputNum: '423323',
|
||
passRate: '0.9873'
|
||
},
|
||
{
|
||
lineName: 'D64',
|
||
outputNum: '43434',
|
||
passRate: '0.9873'
|
||
},
|
||
]
|
||
let nameList = [];
|
||
let passRateList = [];
|
||
let outputNumList = [];
|
||
// let arr = ['D64', 'D62', 'D61', 'D63', 'D65']
|
||
for (let i = 0; i < data.length - 1; i++) {
|
||
// 二次循环，注意：再减去外层的循环次数，向后依次两两相互比较转换；
|
||
for (let j = 0; j < data.length - i - 1; j++) {
|
||
// 当前一个值大于后一个值
|
||
if (data[j].lineName.substr(data[j].lineName.length - 1, 1) > data[j + 1].lineName.substr(data[j + 1].lineName.length - 1, 1)) {
|
||
// 定义变量，以赋值的形式前后交换，直到换到最小的在前面，左右再无比较，则循环结束形成排序结果
|
||
let temp = data[j];
|
||
data[j] = data[j + 1];
|
||
data[j + 1] = temp;
|
||
}
|
||
}
|
||
}
|
||
data.forEach((ele) => {
|
||
// if (item.id == ele.productionLineId) {
|
||
// if (item.name.substr(0, 1) == "D") {
|
||
// console.log(ele)
|
||
nameList.push(ele.lineName);
|
||
outputNumList.push(ele.outputNum);
|
||
passRateList.push(ele.passRate);
|
||
// }
|
||
// }
|
||
});
|
||
this.$nextTick(() => {
|
||
this.$refs.productLineChart.initChart(
|
||
nameList,
|
||
passRateList,
|
||
outputNumList
|
||
);
|
||
})
|
||
// this.getList()
|
||
this.initWebSocket();
|
||
this.SJGInitWebSocket();
|
||
this.getTimes();
|
||
// this.$refs.EnergyMonitoringChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], [3134, 2323, 3232, 3233, 2321])
|
||
const _this = this;
|
||
_this.beilv2 = document.documentElement.clientWidth / 1920;
|
||
window.onresize = () => {
|
||
return (() => {
|
||
_this.clientWidth = `${document.documentElement.clientWidth}`;
|
||
this.beilv2 = _this.clientWidth / 1920;
|
||
})();
|
||
};
|
||
},
|
||
|
||
// beforeDestroy() {
|
||
// //离开页面删除检测器和所有侦听器
|
||
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
|
||
// removeEventListener('resize', resizeFun)
|
||
// },
|
||
methods: {
|
||
getStr(str,num) {
|
||
//你要处理的字符串
|
||
if (str.length > num) { //如果字符长度超过10，后面的字符就变成...可自行调整长度和代替字符
|
||
str = str.substr(0, num) + "..." //截取从第一个字符开始，往后取10个字符，剩余的用...代替
|
||
return str
|
||
} else {
|
||
return str
|
||
}
|
||
},
|
||
getData() {
|
||
let processArr = qualityMonthList.map((item, index) => [
|
||
// console.log(item)
|
||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
</span>`,
|
||
// formatDate(item.planStartTime) || '',
|
||
`
|
||
<span style="color:rgba(255,255,255,0.5)" >${
|
||
item.productionLineName || ''
|
||
}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${
|
||
item.sectionName || ''
|
||
}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${
|
||
item.inspectionTypeName || ''
|
||
}</span>`,
|
||
]);
|
||
this.processConfig.data = processArr;
|
||
// this.$nextTick(() => {
|
||
this.$refs['processScrollBoard'].updateRows(processArr);
|
||
// })
|
||
},
|
||
// getList() {
|
||
// // this.$axios.get(
|
||
// // 'base/core-production-line/listAll',
|
||
// // 'get',
|
||
// // this.queryParams
|
||
// // ).then((res) => {
|
||
// // // console.log('11111', res);
|
||
// // this.productLineList = res.data
|
||
// // })
|
||
// this.$axios.get(
|
||
// 'base/quality-inspection-record/dayStatistics',
|
||
// 'get',
|
||
// ).then((res) => {
|
||
// // console.log('11111', res);
|
||
// let processArr = qualityMonthList.map((item, index) => [
|
||
// // console.log(item)
|
||
// `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
// </span>`,
|
||
// // formatDate(item.planStartTime) || '',
|
||
// `
|
||
// <span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
|
||
// </span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
|
||
// ])
|
||
// this.processConfig.data = processArr
|
||
// this.$refs['processScrollBoard'].updateRows(processArr)
|
||
// // if (res.data.length !==0) {
|
||
// // let processArr = res.data.map((item, index) => [
|
||
// // // console.log(item)
|
||
// // `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
// // </span>`,
|
||
// // // formatDate(item.planStartTime) || '',
|
||
// // `
|
||
// // <span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
|
||
// // </span>`,
|
||
// // `<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
|
||
// // `<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
|
||
// // `<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
|
||
// // ])
|
||
// // this.processConfig.data = processArr
|
||
// // this.$refs['processScrollBoard'].updateRows(processArr)
|
||
// // }
|
||
// })
|
||
// },
|
||
getTimes() {
|
||
setInterval(this.getTimesInterval, 1000);
|
||
},
|
||
getTimesInterval: function () {
|
||
let _this = this;
|
||
let year = new Date().getFullYear(); //获取当前时间的年份
|
||
let month = new Date().getMonth() + 1; //获取当前时间的月份
|
||
let day = new Date().getDate(); //获取当前时间的天数
|
||
let hours = new Date().getHours(); //获取当前时间的小时
|
||
let minutes = new Date().getMinutes(); //获取当前时间的分数
|
||
let seconds = new Date().getSeconds(); //获取当前时间的秒数
|
||
//当小于 10 的是时候，在前面加 0
|
||
if (hours < 10) {
|
||
hours = '0' + hours;
|
||
}
|
||
if (minutes < 10) {
|
||
minutes = '0' + minutes;
|
||
}
|
||
if (seconds < 10) {
|
||
seconds = '0' + seconds;
|
||
}
|
||
//拼接格式化当前时间
|
||
this.times =
|
||
year +
|
||
'.' +
|
||
month +
|
||
'.' +
|
||
day +
|
||
' ' +
|
||
hours +
|
||
':' +
|
||
minutes +
|
||
':' +
|
||
seconds;
|
||
},
|
||
initWebSocket() {
|
||
let date = new Date().valueOf();
|
||
const wsUrl =
|
||
process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`;
|
||
this.wsHeartbeat = new WebSocketHeartbeat(wsUrl);
|
||
|
||
// 处理收到的消息
|
||
this.wsHeartbeat.ws.onmessage = (event) => {
|
||
console.log('收到消息:', event.data);
|
||
this.wsData = event?.data ? JSON.parse(event?.data) : {};
|
||
// console.log('22222', this.wsData.data)
|
||
if (this.wsData.type === 'EnergyMonitoring') {
|
||
let EnergyNameList = [];
|
||
this.wsData.data.forEach((ele) => {
|
||
EnergyNameList.push(ele.lineName);
|
||
});
|
||
this.EnergyMonitoringNameList = EnergyNameList;
|
||
let EnergyDataList = [];
|
||
this.wsData.data.forEach((ele) => {
|
||
EnergyDataList.push(ele.useQuantity);
|
||
});
|
||
this.EnergyMonitoringList = EnergyDataList;
|
||
console.log(EnergyDataList);
|
||
this.$nextTick(() => {
|
||
this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList,this.EnergyMonitoringList);
|
||
})
|
||
|
||
}
|
||
};
|
||
// if (typeof (WebSocket) === 'undefined') {
|
||
// alert('您的浏览器不支持WebSocket')
|
||
// } else {
|
||
// const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
|
||
// // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||
// // const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
|
||
// // 实例化 WebSocket
|
||
// this.websocket = new WebSocket(wsUrl)
|
||
// // 监听 WebSocket 连接
|
||
// this.websocket.onopen = this.websocketOnOpen
|
||
// // 监听 WebSocket 错误信息
|
||
// this.websocket.onerror = this.websocketOnError
|
||
// // 监听 WebSocket 消息
|
||
// this.websocket.onmessage = this.websocketOnMessage
|
||
// // 监听 webSocket 断开信息
|
||
// this.websocket.onclose = this.websocketClose
|
||
// }
|
||
},
|
||
SJGInitWebSocket() {
|
||
let date = new Date().valueOf();
|
||
const SJGWsUrl =
|
||
process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`;
|
||
this.SJGws = new WebSocketHeartbeat(SJGWsUrl);
|
||
|
||
// 处理收到的消息
|
||
this.SJGws.ws.onmessage = (event) => {
|
||
console.log('收到消息:', event.data);
|
||
this.SJGWsData = event?.data ? JSON.parse(event?.data) : {};
|
||
// console.log(this.wsData.detData);
|
||
// console.log('22222', this.wsData.data)
|
||
if (this.SJGWsData.type === 'order') {
|
||
this.orderList = this.SJGWsData.detData.map((ele, index) => {
|
||
if (ele.progressRate && ele.progressRate != 1) {
|
||
return {
|
||
id: ele.id,
|
||
name: this.getStr(String(ele.name), 8),
|
||
progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
|
||
specifications: ele.specifications ? '规格' + ele.specifications : '',
|
||
planQuantity: ele.planQuantity ? '计划' + this.getStr(String(ele.planQuantity),6) : '',
|
||
actualQuantity: ele.actualQuantity ? this.getStr(String(ele.actualQuantity), 6) : '',
|
||
};
|
||
}
|
||
});
|
||
console.log(this.orderList);
|
||
} else if (this.SJGWsData.type === 'equipment') {
|
||
let eqArr = this.SJGWsData.detData.map((item, index) => [
|
||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.lineName || ''
|
||
}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
|
||
</span>`,
|
||
|
||
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0' : item.status == '停机' ? 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;background-color: #FFBD02;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px red;width:6px;height:6px;border-radius: 50%; background-color: red;float:left;margin:13px 10px 0 0'}"></div> ${item.status || ''}</span>`,
|
||
// `<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == false ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px red;width:6px;height:6px;border-radius: 50%; background-color: red;float:left;margin:10px 10px 0 0 '}"></div> ${item.error == true ?'是' :'否' || ''}</span>`,
|
||
]);
|
||
this.eqConfig.data = eqArr;
|
||
// this.$nextTick(() => {
|
||
this.$refs['eqScrollBoard'].updateRows(eqArr);
|
||
// })
|
||
// console.log(SJGWsData.orderList)
|
||
} else if (this.SJGWsData.type === 'productline') {
|
||
console.log('aaaaaaaaaaaaaaaaaaa', this.SJGWsData);
|
||
let nameList = [];
|
||
let passRateList = [];
|
||
let outputNumList = [];
|
||
// let arr = ['D64', 'D62', 'D61', 'D63', 'D65']
|
||
for (let i = 0; i < this.SJGWsData.detData.length - 1; i++) {
|
||
// 二次循环，注意：再减去外层的循环次数，向后依次两两相互比较转换；
|
||
for (let j = 0; j < this.SJGWsData.detData.length - i - 1; j++) {
|
||
// 当前一个值大于后一个值
|
||
if (this.SJGWsData.detData[j].lineName.substr(this.SJGWsData.detData[j].lineName.length - 1, 1) > this.SJGWsData.detData[j + 1].lineName.substr(this.SJGWsData.detData[j + 1].lineName.length - 1, 1)) {
|
||
// 定义变量，以赋值的形式前后交换，直到换到最小的在前面，左右再无比较，则循环结束形成排序结果
|
||
let temp = this.SJGWsData.detData[j];
|
||
this.SJGWsData.detData[j] = this.SJGWsData.detData[j + 1];
|
||
this.SJGWsData.detData[j + 1] = temp;
|
||
}
|
||
}
|
||
}
|
||
this.SJGWsData.detData.forEach((ele) => {
|
||
// if (item.id == ele.productionLineId) {
|
||
// if (item.name.substr(0, 1) == "D") {
|
||
// console.log(ele)
|
||
nameList.push(ele.lineName);
|
||
outputNumList.push(ele.outputNum);
|
||
passRateList.push(ele.passRate);
|
||
// }
|
||
// }
|
||
});
|
||
this.$nextTick(() => {
|
||
this.$refs.productLineChart.initChart(
|
||
nameList,
|
||
passRateList,
|
||
outputNumList
|
||
);
|
||
})
|
||
} else if (this.SJGWsData.type === 'inspection') {
|
||
let processArr = this.SJGWsData.detData.map((item, index) => [
|
||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
|
||
</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''
|
||
}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''
|
||
}</span>`,
|
||
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''
|
||
}</span>`,
|
||
]);
|
||
this.processConfig.data = processArr;
|
||
// this.$nextTick(() => {
|
||
this.$refs['processScrollBoard'].updateRows(processArr);
|
||
// })
|
||
}
|
||
};
|
||
},
|
||
SJGWebsocketClose(e) {
|
||
this.SJGws.ws.onclose = (event) => {
|
||
console.log(event);
|
||
};
|
||
},
|
||
websocketClose(e) {
|
||
this.wsHeartbeat.ws.onclose = (event) => {
|
||
console.log(event);
|
||
};
|
||
},
|
||
windowWidth(value) {
|
||
this.clientWidth = value;
|
||
this.beilv2 = this.clientWidth / 1920;
|
||
},
|
||
change() {
|
||
console.log(this.isFullScreen);
|
||
debugger;
|
||
this.isFullScreen = screenfull.isFullscreen;
|
||
},
|
||
init() {
|
||
console.log(screenfull.isEnabled);
|
||
if (screenfull.isEnabled) {
|
||
debugger;
|
||
screenfull.on('change', this.change);
|
||
}
|
||
},
|
||
destroy() {
|
||
if (screenfull.isEnabled) {
|
||
screenfull.off('change', this.change);
|
||
}
|
||
},
|
||
changeFullScreen() {
|
||
// this.containerWidth = 223223223
|
||
if (!screenfull.isEnabled) {
|
||
this.$message({
|
||
message: 'you browser can not work',
|
||
type: 'warning',
|
||
});
|
||
return false;
|
||
}
|
||
screenfull.toggle();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.split{
|
||
width: 1px;
|
||
// display: inline-block;
|
||
height: 14px;
|
||
// margin-top: 2px;
|
||
// line-height: 0;
|
||
margin-left: 8px;
|
||
opacity:calc(.6);
|
||
margin-right: 8px;
|
||
background-color: #C8CDD7;
|
||
// border: 1px solid #C8CDD7;
|
||
}
|
||
.myLegend {
|
||
position: absolute;
|
||
top: -28px;
|
||
right: 20px;
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, .6);
|
||
|
||
.barLegend {
|
||
// float: left;
|
||
background: linear-gradient(#9DD5FF, #1295FF);
|
||
width: 10px;
|
||
height: 10px;
|
||
display: inline-block;
|
||
margin-right: 5px;
|
||
border-radius: 30%;
|
||
}
|
||
|
||
.barText {
|
||
// float: right;
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.barCircleLegend {
|
||
width: 15px;
|
||
height: 1px;
|
||
background-color: rgba(255, 209, 96, 1);
|
||
position: absolute;
|
||
left: -4.1715px;
|
||
top: 21.7px;
|
||
}
|
||
|
||
.barCircle {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background-color: rgba(255, 209, 96, 1);
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
margin-bottom: 1.7px;
|
||
}
|
||
.barCircleText {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.visual-container {
|
||
width: 1920px;
|
||
height: 1080px;
|
||
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
|
||
background-size: cover;
|
||
// opacity: .8;
|
||
.container-title {
|
||
width: 100%;
|
||
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #00fff0;
|
||
word-spacing: 8px;
|
||
letter-spacing: 8px;
|
||
text-align: center;
|
||
.unit {
|
||
position: absolute;
|
||
left: 290px;
|
||
top: 25px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.time {
|
||
position: absolute;
|
||
left: 1360px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
top: 25px;
|
||
font-size: 20px;
|
||
letter-spacing: 0.72px;
|
||
}
|
||
.title-button {
|
||
color: #00fff0;
|
||
font-size: 20px;
|
||
position: absolute;
|
||
}
|
||
}
|
||
|
||
.container-main {
|
||
padding: 10px;
|
||
}
|
||
}
|
||
|
||
.now-team-title {
|
||
margin: 0;
|
||
margin-top: -1em;
|
||
font-size: 1.2em;
|
||
line-height: 2em;
|
||
color: #fff;
|
||
}
|
||
|
||
.main-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.now-secondary-title {
|
||
display: inline-block;
|
||
width: 110px;
|
||
margin: 0;
|
||
font-size: 14px;
|
||
line-height: 2em;
|
||
color: #fff;
|
||
}
|
||
.orderSize {
|
||
display: inline-block;
|
||
width: 120px;
|
||
margin: 0;
|
||
font-size: 14px;
|
||
line-height: 2em;
|
||
color: #fff;
|
||
}
|
||
.orderFinish {
|
||
display: inline-block;
|
||
width: 60px;
|
||
margin: 0;
|
||
font-size: 14px;
|
||
text-align: right;
|
||
color: rgba(0, 255, 247, 1);
|
||
}
|
||
.orderFinishTwo{
|
||
display: inline-block;
|
||
width: 15px;
|
||
margin: 0;
|
||
font-size: 14px;
|
||
line-height: 2em;
|
||
// text-overflow: ellipsis;
|
||
// white-space: nowrap;
|
||
// overflow: hidden;
|
||
text-align: right;
|
||
color: rgba(0, 255, 247, 1);
|
||
}
|
||
.orderPlan {
|
||
display: inline-block;
|
||
// width: 80px;
|
||
margin: 0;
|
||
font-size: 14px;
|
||
// line-height: 2em;
|
||
color: #fff;
|
||
text-align: left;
|
||
}
|
||
.now-team-content {
|
||
font-size: 3em;
|
||
line-height: 1em;
|
||
color: #52fff1;
|
||
text-align: center;
|
||
}
|
||
|
||
::v-deep .el-progress-bar__inner {
|
||
background-color: unset;
|
||
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||
}
|
||
::v-deep .el-progress__text {
|
||
width: 50px;
|
||
margin-top: -70px;
|
||
margin-left: 538px;
|
||
// background-color: unset;
|
||
// background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||
}
|
||
.visual-select {
|
||
position: absolute;
|
||
right: 1em;
|
||
top: 2em;
|
||
}
|
||
|
||
// .container-main {
|
||
// padding: 5px;
|
||
// }
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
.visual-container {
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
background-color: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-track-piece {
|
||
background: #1b2b3d;
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background: #1b2b3d;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
width: 6px;
|
||
background: #1b2b3d;
|
||
-webkit-border-radius: 2em;
|
||
-moz-border-radius: 2em;
|
||
border-radius: 2em;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba($color: #5bc4be, $alpha: 0.7);
|
||
background-clip: padding-box;
|
||
min-height: 28px;
|
||
-webkit-border-radius: 2em;
|
||
-moz-border-radius: 2em;
|
||
border-radius: 2em;
|
||
transition: background-color 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background-color: rgba($color: #5bc4be, $alpha: 1);
|
||
}
|
||
}
|
||
.coldSelect {
|
||
.el-input {
|
||
min-height: 10px;
|
||
}
|
||
|
||
// .el-input__inner {
|
||
// background-color: rgba($color: #31878c, $alpha: 0.29);
|
||
// border: rgba($color: #31878c, $alpha: 0.29);
|
||
// color: aliceblue;
|
||
// }
|
||
|
||
.el-divider--vertical {
|
||
height: 174px;
|
||
width: 1px;
|
||
border: rgba(255, 255, 255, 0.15);
|
||
color: rgba(255, 255, 255, 0.15);
|
||
margin-left: 3em;
|
||
}
|
||
}
|
||
.order::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.flex-col {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex-1 {
|
||
flex: 1 1;
|
||
}
|
||
.h-full {
|
||
height: calc(100vh);
|
||
}
|
||
/* .container-main {
|
||
min-height: calc(100vh - 10em);
|
||
} */
|
||
.eqTable {
|
||
overflow: hidden;
|
||
}
|
||
</style>
|