Skip to content

D
dwsproject
Commit 9d0fe1d7 by nningxx
Options

tht合并到master

parents a7dce4c0 3d3bbfe2
Showing with 527 additions and 496 deletions
tht_project/controllers/big_screen.py
# -*- coding: utf-8 -*- # -*- coding: utf-8 -*-
from odoo import http, fields from odoo import http, fields,SUPERUSER_ID
from odoo.http import request from odoo.http import request
from odoo.addons.roke_mes_three_colour_light.controller.main import RokeMesThreeColourLight from odoo.addons.roke_mes_three_colour_light.controller.main import RokeMesThreeColourLight
import os import os
import math import math
from datetime import datetime, time from datetime import datetime, time, timedelta
from jinja2 import Environment, FileSystemLoader from jinja2 import Environment, FileSystemLoader
import logging import logging
import requests import requests
...@@ -164,3 +164,46 @@ class ResMesBigScreen(http.Controller): ...@@ -164,3 +164,46 @@ class ResMesBigScreen(http.Controller):
def get_lishibaozhuang_data(self): def get_lishibaozhuang_data(self):
body = http.request.jsonrequest body = http.request.jsonrequest
return self.common_dws_interface(body, '/get_real_time_device_data', cate="制袋包装机") return self.common_dws_interface(body, '/get_real_time_device_data', cate="制袋包装机")
@http.route('/roke/tht/get_abnormal_alarm_list', type='json', auth="none", methods=['POST', 'OPTIONS'], csrf=False, cors='*')
def get_abnormal_alarm_list(self):
"""
获取异常表单列表
:return:
"""
jsonrequest = http.request.jsonrequest
domain = []
abnormal_alarm_id = jsonrequest.get('abnormal_alarm_id', False)
#表单id
if abnormal_alarm_id:
domain.append(('id', '=', abnormal_alarm_id))
abnormal_id = jsonrequest.get('abnormal_id', False)
#异常类型id
if abnormal_id:
domain.append(('abnormal_id', '=', abnormal_id))
page_size = int(http.request.jsonrequest.get('page_size', 20))
page_no = int(http.request.jsonrequest.get('page_no', 1))
abnormal_alarm_ids = http.request.env(user=SUPERUSER_ID)['roke.abnormal.alarm'].search(domain, limit=page_size, offset=(page_no - 1) * page_size, order="originating_time desc")
abnormal_alarm_list = []
for item in abnormal_alarm_ids:
note = ''
if item.abnormal_id.name == '设备异常':
note = f"{item.equipment_id.name or ''}发生了故障"
elif item.abnormal_id.name == '缺料断料':
note = f"{item.sponsor.name or item.create_uid.name or ''} 发起了缺料申请"
abnormal_alarm_list.append({
"id": item.id, # 异常表单id
"abnormal_name": item.abnormal_id.name, # 异常类型
"originating_time": (item.originating_time + timedelta(hours=8)).strftime("%Y-%m-%d %H:%M:%S") if item.originating_time else '', #发起时间
"note": note, #报警表述
})
total = http.request.env(user=SUPERUSER_ID)['roke.abnormal.alarm'].search_count(domain)
return {
"state": "success",
"msgs": "获取成功",
"total": total,
"abnormal_alarm_list": abnormal_alarm_list
}
tht_project/static/html/big_screen/view/cook_process.html
...@@ -369,7 +369,7 @@ ...@@ -369,7 +369,7 @@
config = {}, config = {},
errorMessage = "操作失败，请稍后重试", errorMessage = "操作失败，请稍后重试",
contentType = "application/json", contentType = "application/json",
baseurl="https://tht.dws.rokecloud.com" baseurl=""
) { ) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!url) reject(null) if (!url) reject(null)
......
tht_project/static/html/big_screen/view/expected_process.html
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8" />
<title>预料工序</title> <title>预料工序</title>
<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=0" name="viewport"/> <meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=0" name="viewport" />
<link rel="stylesheet" href="/tht_project/static/html/big_screen/element-ui/index.css"/> <link rel="stylesheet" href="/tht_project/static/html/big_screen/element-ui/index.css" />
<script src="/tht_project/static/html/big_screen/js/echarts.min.js"></script> <script src="/tht_project/static/html/big_screen/js/echarts.min.js"></script>
<script src="/tht_project/static/html/big_screen/js/moment.min.js"></script> <script src="/tht_project/static/html/big_screen/js/moment.min.js"></script>
<script src="/tht_project/static/html/big_screen/js/vue.js"></script> <script src="/tht_project/static/html/big_screen/js/vue.js"></script>
...@@ -14,156 +14,156 @@ ...@@ -14,156 +14,156 @@
</head> </head>
<body id="bodyId" style="display: none"> <body id="bodyId" style="display: none">
<div id="app" v-loading.body.fullscreen.lock="loading" ref="fullScreenElement"> <div id="app" v-loading.body.fullscreen.lock="loading" ref="fullScreenElement">
<div class="pageHeaderBox"> <div class="pageHeaderBox">
<div class="weatherInfo"> <div class="weatherInfo">
<span class="location">预料工序</span> <span class="location">预料工序</span>
</div>
<img class="logo" src="/tht_project/static/html/big_screen/image/logo.png">
<div class="title">天合堂数据指挥中心可视化大屏</div>
<div class="dateTimeBox">
<i style="font-size: 30px;margin-right: 10px;" @click="toggleFullscreen"
:class="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"></i>
<div class="time">[[currentTime]]</div>
<div class="dateBox">
<span>[[ currentDate ]]</span>
<span>[[ currentWeek ]]</span>
</div> </div>
</div> <img class="logo" src="/tht_project/static/html/big_screen/image/logo.png">
</div> <div class="title">天合堂数据指挥中心可视化大屏</div>
<div class="pageContentBox"> <div class="dateTimeBox">
<div class="pageContentBackgroundBox"> <i style="font-size: 30px;margin-right: 10px;" @click="toggleFullscreen"
<img class="badgeIcon" src="/tht_project/static/html/big_screen/image/777.png" alt="" v-for="item in 4" :class="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"></i>
:key="item"> <div class="time">[[currentTime]]</div>
</div> <div class="dateBox">
<div class="pageContentArea"> <span>[[ currentDate ]]</span>
<div class="contentColumnBox one"> <span>[[ currentWeek ]]</span>
<div class="itemCardBox">
<div class="cardHeader">
<span>今日产量</span>
</div>
<div class="cardContentBox">
<div id="proportionChart" style="width: 100%; height: 100%;"></div>
</div>
</div>
<div class="itemCardBox">
<div class="cardHeader">
<span>今日投料情况</span>
</div>
<div class="cardContentBox">
<div id="mainMaterialChart" style="width: 100%; height: 100%;"></div>
</div>
</div>
<div class="itemCardBox">
<div class="cardHeader">
<span>设备实时运转情况</span>
</div>
<div class="cardContentBox">
<div id="seasonMaterialChart" style="width: 100%; height: 100%;"></div>
</div>
</div>
<div class="itemCardBox">
<div class="cardHeader">
<span>设备资源利用率</span>
</div>
<div class="cardContentBox">
<div id="rawMaterialChart" style="width: 100%; height: 100%;"></div>
</div>
</div> </div>
</div> </div>
<div class="contentColumnBox two"> </div>
<div class="itemCardBox"> <div class="pageContentBox">
<div class="cardHeader"> <div class="pageContentBackgroundBox">
<span>片冰机</span> <img class="badgeIcon" src="/tht_project/static/html/big_screen/image/777.png" alt="" v-for="item in 4"
</div> :key="item">
<div class="cardContentBox"> </div>
<div id="sliceIceMachineChart" style="width: 100%; height: 100%;"></div> <div class="pageContentArea">
</div> <div class="contentColumnBox one">
</div> <div class="itemCardBox">
<div class="itemCardBox"> <div class="cardHeader">
<div class="cardHeader"> <span>今日产量</span>
<span>解冻机组</span> </div>
<div class="cardContentBox">
<div id="proportionChart" style="width: 100%; height: 100%;"></div>
</div>
</div> </div>
<div class="cardContentBox"> <div class="itemCardBox">
<div id="thawingUnitChart" style="width: 100%; height: 100%;"></div> <div class="cardHeader">
<span>今日投料情况</span>
</div>
<div class="cardContentBox">
<div id="mainMaterialChart" style="width: 100%; height: 100%;"></div>
</div>
</div> </div>
</div> <div class="itemCardBox">
<div class="itemCardBox"> <div class="cardHeader">
<div class="cardHeader"> <span>设备实时运转情况</span>
<span>切丁机组</span> </div>
<div class="cardContentBox">
<div id="seasonMaterialChart" style="width: 100%; height: 100%;"></div>
</div>
</div> </div>
<div class="cardContentBox"> <div class="itemCardBox">
<div style="width: 100%; height: 100%; display: flex;"> <div class="cardHeader">
<div id="dicingUnitLineChart" style="width: 65%; height: 100%;"></div> <span>设备资源利用率</span>
<div id="dicingUnitGaugeChart" style="width: 35%; height: 100%;"></div> </div>
<div class="cardContentBox">
<div id="rawMaterialChart" style="width: 100%; height: 100%;"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="itemCardBox"> <div class="contentColumnBox two">
<div class="cardHeader"> <div class="itemCardBox">
<span>连续切块机</span> <div class="cardHeader">
</div> <span>片冰机</span>
<div class="cardContentBox"> </div>
<div style="width: 100%; height: 100%; display: flex;"> <div class="cardContentBox">
<div id="continuouSlabberLeftChart" style="width: 50%; height: 100%;"></div> <div id="sliceIceMachineChart" style="width: 100%; height: 100%;"></div>
<div id="continuouSlabberRightChart" style="width: 50%; height: 100%;"></div>
</div> </div>
</div> </div>
</div> <div class="itemCardBox">
<div class="itemCardBox" style="position: relative;"> <div class="cardHeader">
<div class="cardHeader" style="position: absolute;top: 5px; width: 100%;"> <span>解冻机组</span>
<span>绞肉机</span> </div>
<div class="cardContentBox">
<div id="thawingUnitChart" style="width: 100%; height: 100%;"></div>
</div>
</div> </div>
<div class="cardContentBox" style="z-index: 1;"> <div class="itemCardBox">
<div id="meatGrinderChart" style="width: 100%; height: 100%;"></div> <div class="cardHeader">
<span>切丁机组</span>
</div>
<div class="cardContentBox">
<div style="width: 100%; height: 100%; display: flex;">
<div id="dicingUnitLineChart" style="width: 65%; height: 100%;"></div>
<div id="dicingUnitGaugeChart" style="width: 35%; height: 100%;"></div>
</div>
</div>
</div> </div>
</div> <div class="itemCardBox">
</div> <div class="cardHeader">
<div class="contentColumnBox three"> <span>连续切块机</span>
<div class="itemCardBox"> </div>
<div class="cardHeader"> <div class="cardContentBox">
<span>斩拌机</span> <div style="width: 100%; height: 100%; display: flex;">
<div id="continuouSlabberLeftChart" style="width: 50%; height: 100%;"></div>
<div id="continuouSlabberRightChart" style="width: 50%; height: 100%;"></div>
</div>
</div>
</div> </div>
<div class="cardContentBox"> <div class="itemCardBox" style="position: relative;">
<div id="ZBY550ChopperMixerChart" style="width: 100%; height: 100%;"></div> <div class="cardHeader" style="position: absolute;top: 5px; width: 100%;">
<span>绞肉机</span>
</div>
<div class="cardContentBox" style="z-index: 1;">
<div id="meatGrinderChart" style="width: 100%; height: 100%;"></div>
</div>
</div> </div>
</div> </div>
<div class="itemCardBox"> <div class="contentColumnBox three">
<div class="cardHeader"> <div class="itemCardBox">
<span>真空搅拌机</span> <div class="cardHeader">
</div> <span>斩拌机</span>
<div class="cardContentBox"> </div>
<div style="width: 100%; height: 100%; display: flex;flex-wrap: wrap;"> <div class="cardContentBox">
<div id="vacuumMixerRotateSpeedChart" style="width: 50%; height: 50%;"></div> <div id="ZBY550ChopperMixerChart" style="width: 100%; height: 100%;"></div>
<div id="vacuumMixerRunTimeChart" style="width: 50%; height: 50%;"></div>
<div id="vacuumMixerRemainTimeChart" style="width: 50%; height: 50%;"></div>
<div id="vacuumMixerCWVoltageChart" style="width: 50%; height: 50%;"></div>
</div> </div>
</div> </div>
</div> <div class="itemCardBox">
<div class="itemCardBox"> <div class="cardHeader">
<div class="cardHeader"> <span>真空搅拌机</span>
<span>真空滚揉机</span> </div>
<div class="cardContentBox">
<div style="width: 100%; height: 100%; display: flex;flex-wrap: wrap;">
<div id="vacuumMixerRotateSpeedChart" style="width: 50%; height: 50%;"></div>
<div id="vacuumMixerRunTimeChart" style="width: 50%; height: 50%;"></div>
<div id="vacuumMixerRemainTimeChart" style="width: 50%; height: 50%;"></div>
<div id="vacuumMixerCWVoltageChart" style="width: 50%; height: 50%;"></div>
</div>
</div>
</div> </div>
<div class="cardContentBox"> <div class="itemCardBox">
<div style="width: 100%; height: 100%; display: flex;flex-wrap: wrap;"> <div class="cardHeader">
<div id="vacuumTumblingRotateSpeedChart" style="width: 50%; height: 50%;"></div> <span>真空滚揉机</span>
<div id="vacuumTumblingRunTimeChart" style="width: 50%; height: 50%;"></div> </div>
<div id="vacuumTumblingRemainTimeChart" style="width: 50%; height: 50%;"></div> <div class="cardContentBox">
<div style="width: 100%; height: 100%; display: flex;flex-wrap: wrap;">
<div id="vacuumTumblingRotateSpeedChart" style="width: 50%; height: 50%;"></div>
<div id="vacuumTumblingRunTimeChart" style="width: 50%; height: 50%;"></div>
<div id="vacuumTumblingRemainTimeChart" style="width: 50%; height: 50%;"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="contentColumnBox four">
<div class="contentColumnBox four"> <div class="itemCardBox">
<div class="itemCardBox"> <div class="cardHeader">
<div class="cardHeader"> <span>报警中心</span>
<span>报警中心</span> </div>
</div> <div class="cardContentBox tableBox">
<div class="cardContentBox tableBox"> <el-table class="tableClass" :data="alarmList" height="1" tooltip-effect="light"
<el-table class="tableClass" :data="alarmList" height="1" tooltip-effect="light" :row-style="{height: '30px', backgroundColor: 'transparent'}"
:row-style="{height: '30px', backgroundColor: 'transparent'}" :cell-style="{padding: '5px 0', borderBottom:'none'}"
:cell-style="{padding: '5px 0', borderBottom:'none'}" :header-row-style="{ backgroundColor: 'transparent'}" :header-cell-style="{
:header-row-style="{ backgroundColor: 'transparent'}" :header-cell-style="{
backgroundColor: 'transparent', backgroundColor: 'transparent',
color: '#01c4f9', color: '#01c4f9',
fontWeight: 'bold', fontWeight: 'bold',
...@@ -173,36 +173,36 @@ ...@@ -173,36 +173,36 @@
padding: '5px 0', padding: '5px 0',
borderBottom:'none' borderBottom:'none'
}"> }">
<el-table-column prop="device" label="报警类型"> <el-table-column prop="device" label="报警类型">
<template slot-scope="scope"> <template slot-scope="scope">
<span style="color: #fff; font-size: 12px;">[[ scope.row.device ]]</span> <span style="color: #fff; font-size: 12px;">[[ scope.row.device ]]</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="time" label="报警时间" width="80"> <el-table-column prop="time" label="报警时间" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<span style="color: #fff; font-size: 12px;">[[ scope.row.time ]]</span> <span style="color: #fff; font-size: 12px;">[[ scope.row.time ]]</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="detail" label="报警描述" show-overflow-tooltip> <el-table-column prop="detail" label="报警描述" show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
<span style="color: #fff; font-size: 12px;">[[ scope.row.detail ]]</span> <span style="color: #fff; font-size: 12px;">[[ scope.row.detail ]]</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div>
<div class="itemCardBox">
<div class="cardHeader">
<span>今日计划执行情况</span>
</div> </div>
<div class="cardContentBox"> <div class="itemCardBox">
<div id="meatGrainAnalysisChart" style="width: 100%; height: 100%;"></div> <div class="cardHeader">
<span>今日计划执行情况</span>
</div>
<div class="cardContentBox">
<div id="meatGrainAnalysisChart" style="width: 100%; height: 100%;"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</body> </body>
<script> <script>
...@@ -347,7 +347,7 @@ ...@@ -347,7 +347,7 @@
method: "POST", method: "POST",
url: this.baseURL + url, url: this.baseURL + url,
data: config, data: config,
headers: {"Content-Type": contentType}, headers: { "Content-Type": contentType },
}).then((result) => { }).then((result) => {
if ( if (
result?.data?.result?.code == 0 || result?.data?.result?.code == 0 ||
...@@ -374,7 +374,7 @@ ...@@ -374,7 +374,7 @@
config = {}, config = {},
errorMessage = "操作失败，请稍后重试", errorMessage = "操作失败，请稍后重试",
contentType = "application/json", contentType = "application/json",
baseurl = "https://tht.dws.rokecloud.com" baseurl = ""
) { ) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!url) reject(null) if (!url) reject(null)
...@@ -382,7 +382,7 @@ ...@@ -382,7 +382,7 @@
method: "POST", method: "POST",
url: baseurl + url, url: baseurl + url,
data: config, data: config,
headers: {"Content-Type": contentType}, headers: { "Content-Type": contentType },
}).then((result) => { }).then((result) => {
if ( if (
result?.data?.result?.success || result?.data?.result?.success ||
...@@ -420,7 +420,7 @@ ...@@ -420,7 +420,7 @@
method: "POST", method: "POST",
url: this.dwsBaseUrl + url, url: this.dwsBaseUrl + url,
data: config, data: config,
headers: {"Content-Type": contentType}, headers: { "Content-Type": contentType },
}).then((result) => { }).then((result) => {
if (result?.data?.success) { if (result?.data?.success) {
resolve(result.data) resolve(result.data)
...@@ -558,7 +558,7 @@ ...@@ -558,7 +558,7 @@
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: {type: 'shadow'}, axisPointer: { type: 'shadow' },
formatter: (params) => { formatter: (params) => {
console.log(params) console.log(params)
let tooltipHtml = `<div style="font-weight:bold;margin-bottom:5px">${params[0].name}</div>` let tooltipHtml = `<div style="font-weight:bold;margin-bottom:5px">${params[0].name}</div>`
...@@ -588,24 +588,24 @@ ...@@ -588,24 +588,24 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxisData, data: xAxisData,
axisLine: {lineStyle: {color: '#0a73ff'}}, axisLine: { lineStyle: { color: '#0a73ff' } },
axisLabel: {color: '#fff', fontSize: 10} axisLabel: { color: '#fff', fontSize: 10 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3 } },
axisLabel: {color: '#fff', fontSize: 10} axisLabel: { color: '#fff', fontSize: 10 }
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
barWidth: '40%', barWidth: '40%',
barGap: '0%', barGap: '0%',
data: seriesData, data: seriesData,
itemStyle: {color: '#5087ec'}, itemStyle: { color: '#5087ec' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -663,18 +663,18 @@ ...@@ -663,18 +663,18 @@
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: xAxisData, data: xAxisData,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
axisTick: {show: false}, axisTick: { show: false },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed'}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed' } },
axisLabel: {color: '#fff', fontSize: 10, formatter: '{value}'} axisLabel: { color: '#fff', fontSize: 10, formatter: '{value}' }
}, },
series: [{ series: [{
type: 'line', type: 'line',
...@@ -728,19 +728,19 @@ ...@@ -728,19 +728,19 @@
data: [{ data: [{
value: data?.green || 0, value: data?.green || 0,
name: '运行', name: '运行',
itemStyle: {color: '#91cc75'}, itemStyle: { color: '#91cc75' },
}, { }, {
value: data?.yellow || 0, value: data?.yellow || 0,
name: '等待', name: '等待',
itemStyle: {color: '#ffd700'}, itemStyle: { color: '#ffd700' },
}, { }, {
value: data?.red || 0, value: data?.red || 0,
name: '故障', name: '故障',
itemStyle: {color: '#ee6666'}, itemStyle: { color: '#ee6666' },
}, { }, {
value: data?.gray || 0, value: data?.gray || 0,
name: '关机', name: '关机',
itemStyle: {color: '#787878'}, itemStyle: { color: '#787878' },
}] }]
}] }]
}) })
...@@ -788,24 +788,24 @@ ...@@ -788,24 +788,24 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxisData, data: xAxisData,
axisLine: {lineStyle: {color: '#0a73ff'}}, axisLine: { lineStyle: { color: '#0a73ff' } },
axisLabel: {color: '#fff', fontSize: 10} axisLabel: { color: '#fff', fontSize: 10 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3 } },
axisLabel: {color: '#fff', fontSize: 10, formatter: '{value}%'} axisLabel: { color: '#fff', fontSize: 10, formatter: '{value}%' }
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
barWidth: '40%', barWidth: '40%',
barGap: '0%', barGap: '0%',
data: seriesData, data: seriesData,
itemStyle: {color: '#5087ec'}, itemStyle: { color: '#5087ec' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -847,24 +847,24 @@ ...@@ -847,24 +847,24 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxisData, data: xAxisData,
axisLine: {lineStyle: {color: '#0a73ff'}}, axisLine: { lineStyle: { color: '#0a73ff' } },
axisLabel: {color: '#fff', fontSize: 10} axisLabel: { color: '#fff', fontSize: 10 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3 } },
axisLabel: {color: '#fff', fontSize: 10, formatter: '{value}℃'} axisLabel: { color: '#fff', fontSize: 10, formatter: '{value}℃' }
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
barWidth: '40%', barWidth: '40%',
barGap: '0%', barGap: '0%',
data: seriesData, data: seriesData,
itemStyle: {color: '#5087ec'}, itemStyle: { color: '#5087ec' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -897,22 +897,22 @@ ...@@ -897,22 +897,22 @@
startAngle: 200, startAngle: 200,
endAngle: -20, endAngle: -20,
splitNumber: 5, splitNumber: 5,
itemStyle: {color: '#3a8fff'}, itemStyle: { color: '#3a8fff' },
progress: {show: true, width: 5}, progress: { show: true, width: 5 },
pointer: {show: false}, pointer: { show: false },
axisLine: {lineStyle: {width: 5}}, axisLine: { lineStyle: { width: 5 } },
axisTick: { axisTick: {
distance: -15, distance: -15,
length: 5, length: 5,
splitNumber: 5, splitNumber: 5,
lineStyle: {width: 1, color: '#999'} lineStyle: { width: 1, color: '#999' }
}, },
splitLine: { splitLine: {
distance: -15, distance: -15,
length: 8, length: 8,
lineStyle: {width: 1, color: '#999'} lineStyle: { width: 1, color: '#999' }
}, },
axisLabel: {distance: -15, color: '#999', fontSize: 10,}, axisLabel: { distance: -15, color: '#999', fontSize: 10, },
detail: { detail: {
valueAnimation: true, valueAnimation: true,
offsetCenter: [0, 0], offsetCenter: [0, 0],
...@@ -939,22 +939,22 @@ ...@@ -939,22 +939,22 @@
seriesData.push(data) seriesData.push(data)
} }
chart.setOption({ chart.setOption({
grid: {left: '5%', right: '5%', top: '8%', bottom: '5%'}, grid: { left: '5%', right: '5%', top: '8%', bottom: '5%' },
graphic: [{ graphic: [{
type: 'text', type: 'text',
left: '12%', left: '12%',
top: '80%', top: '80%',
style: {text: '当前库内温度', fill: '#fff', fontSize: 10} style: { text: '当前库内温度', fill: '#fff', fontSize: 10 }
}, { }, {
type: 'text', type: 'text',
left: '45.5%', left: '45.5%',
top: '80%', top: '80%',
style: {text: '中心温度', fill: '#fff', fontSize: 10} style: { text: '中心温度', fill: '#fff', fontSize: 10 }
}, { }, {
type: 'text', type: 'text',
left: '75.5%', left: '75.5%',
top: '80%', top: '80%',
style: {text: '库内湿度', fill: '#fff', fontSize: 10} style: { text: '库内湿度', fill: '#fff', fontSize: 10 }
}], }],
series: seriesData series: seriesData
}) })
...@@ -991,24 +991,24 @@ ...@@ -991,24 +991,24 @@
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: xAxisData, data: xAxisData,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
axisTick: {show: false}, axisTick: { show: false },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed'}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed' } },
axisLabel: {color: '#fff', fontSize: 10, formatter: '{value}' + unit} axisLabel: { color: '#fff', fontSize: 10, formatter: '{value}' + unit }
}, },
series: [{ series: [{
type: 'line', type: 'line',
data: seriesData, data: seriesData,
smooth: true, smooth: true,
lineStyle: {type: 'dashed'}, lineStyle: { type: 'dashed' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -1018,8 +1018,8 @@ ...@@ -1018,8 +1018,8 @@
}, },
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: 'rgba(58, 143, 255, 0.8)'}, { offset: 0, color: 'rgba(58, 143, 255, 0.8)' },
{offset: 1, color: 'rgba(58, 143, 255, 0.1)'} { offset: 1, color: 'rgba(58, 143, 255, 0.1)' }
]) ])
}, },
}] }]
...@@ -1033,22 +1033,22 @@ ...@@ -1033,22 +1033,22 @@
startAngle: 200, startAngle: 200,
endAngle: -20, endAngle: -20,
splitNumber: 5, splitNumber: 5,
itemStyle: {color: '#3a8fff'}, itemStyle: { color: '#3a8fff' },
progress: {show: false, width: 5}, progress: { show: false, width: 5 },
pointer: {itemStyle: {color: '#fe827a',}, length: "60%", width: 3}, pointer: { itemStyle: { color: '#fe827a', }, length: "60%", width: 3 },
axisLine: { axisLine: {
roundCap: true, roundCap: true,
lineStyle: { lineStyle: {
width: 5, width: 5,
color: [[1, { color: [[1, {
type: 'linear', x: 0, y: 0, x2: 1, y2: 0, type: 'linear', x: 0, y: 0, x2: 1, y2: 0,
colorStops: [{offset: 0, color: '#91cc75'}, {offset: 1, color: '#ff4b4b'}] colorStops: [{ offset: 0, color: '#91cc75' }, { offset: 1, color: '#ff4b4b' }]
}]] }]]
} }
}, },
axisTick: {show: false}, axisTick: { show: false },
splitLine: {show: false}, splitLine: { show: false },
axisLabel: {show: false}, axisLabel: { show: false },
detail: { detail: {
valueAnimation: true, valueAnimation: true,
width: '40%', width: '40%',
...@@ -1058,8 +1058,8 @@ ...@@ -1058,8 +1058,8 @@
fontWeight: 'bold', fontWeight: 'bold',
offsetCenter: [0, '40%'] offsetCenter: [0, '40%']
}, },
data: [{value: 50, name: "加速时间"}], data: [{ value: 50, name: "加速时间" }],
title: {color: "#FFF", fontSize: 10, valueAnimation: false, offsetCenter: ['0', '70%']} title: { color: "#FFF", fontSize: 10, valueAnimation: false, offsetCenter: ['0', '70%'] }
}] }]
}) })
}, },
...@@ -1104,24 +1104,24 @@ ...@@ -1104,24 +1104,24 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxisData, data: xAxisData,
axisLine: {lineStyle: {color: '#0a73ff'}}, axisLine: { lineStyle: { color: '#0a73ff' } },
axisLabel: {color: '#fff', fontSize: 10} axisLabel: { color: '#fff', fontSize: 10 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: runFrequencyMax, max: runFrequencyMax,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3 } },
axisLabel: {color: '#fff', fontSize: 10, formatter: '{value}Hz'} axisLabel: { color: '#fff', fontSize: 10, formatter: '{value}Hz' }
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
barWidth: '40%', barWidth: '40%',
barGap: '0%', barGap: '0%',
data: runFrequencyData, data: runFrequencyData,
itemStyle: {color: '#5087ec'}, itemStyle: { color: '#5087ec' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -1152,8 +1152,8 @@ ...@@ -1152,8 +1152,8 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxisData, data: xAxisData,
axisLine: {lineStyle: {color: '#0a73ff'}}, axisLine: { lineStyle: { color: '#0a73ff' } },
axisLabel: {color: '#fff', fontSize: 10} axisLabel: { color: '#fff', fontSize: 10 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
...@@ -1161,16 +1161,16 @@ ...@@ -1161,16 +1161,16 @@
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: cuttingSpeedMax, max: cuttingSpeedMax,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3 } },
axisLabel: {color: '#fff', fontSize: 10, formatter: '{value}ppm'} axisLabel: { color: '#fff', fontSize: 10, formatter: '{value}ppm' }
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
barWidth: '40%', barWidth: '40%',
barGap: '0%', barGap: '0%',
data: cuttingSpeedData, data: cuttingSpeedData,
itemStyle: {color: '#5087ec'}, itemStyle: { color: '#5087ec' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -1214,31 +1214,31 @@ ...@@ -1214,31 +1214,31 @@
top: '0%', top: '0%',
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
textStyle: {color: "#fff", fontSize: 10} textStyle: { color: "#fff", fontSize: 10 }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: xAxisData, data: xAxisData,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
axisTick: {show: false}, axisTick: { show: false },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed'}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed' } },
axisLabel: {color: '#fff', fontSize: 10, formatter: '{value}' + unit} axisLabel: { color: '#fff', fontSize: 10, formatter: '{value}' + unit }
}, },
series: [{ series: [{
name: '设备A', name: '设备A',
type: 'line', type: 'line',
data: deviceA, data: deviceA,
smooth: true, smooth: true,
lineStyle: {type: 'dashed'}, lineStyle: { type: 'dashed' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -1248,8 +1248,8 @@ ...@@ -1248,8 +1248,8 @@
}, },
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: 'rgba(58, 143, 255, 0.8)'}, { offset: 0, color: 'rgba(58, 143, 255, 0.8)' },
{offset: 1, color: 'rgba(58, 143, 255, 0.1)'} { offset: 1, color: 'rgba(58, 143, 255, 0.1)' }
]) ])
}, },
}, { }, {
...@@ -1257,7 +1257,7 @@ ...@@ -1257,7 +1257,7 @@
type: 'line', type: 'line',
data: deviceB, data: deviceB,
smooth: true, smooth: true,
lineStyle: {type: 'dashed'}, lineStyle: { type: 'dashed' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -1305,18 +1305,18 @@ ...@@ -1305,18 +1305,18 @@
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: xAxisData, data: xAxisData,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
axisTick: {show: false}, axisTick: { show: false },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed'}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed' } },
axisLabel: {color: '#ccc', fontSize: 10, formatter: '{value}' + unit} axisLabel: { color: '#ccc', fontSize: 10, formatter: '{value}' + unit }
}, },
series: [{ series: [{
type: 'line', type: 'line',
...@@ -1374,24 +1374,24 @@ ...@@ -1374,24 +1374,24 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxisData, data: xAxisData,
axisLine: {lineStyle: {color: '#0a73ff'}}, axisLine: { lineStyle: { color: '#0a73ff' } },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3 } },
axisLabel: {color: '#fff', fontSize: 10, formatter: '{value}ppm'} axisLabel: { color: '#fff', fontSize: 10, formatter: '{value}ppm' }
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
barWidth: '40%', barWidth: '40%',
barGap: '0%', barGap: '0%',
data: seriesData, data: seriesData,
itemStyle: {color: '#5087ec'}, itemStyle: { color: '#5087ec' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -1426,18 +1426,18 @@ ...@@ -1426,18 +1426,18 @@
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: xAxisData, data: xAxisData,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
axisTick: {show: false}, axisTick: { show: false },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed'}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed' } },
axisLabel: {color: '#ccc', fontSize: 10, formatter: '{value}' + 'min'} axisLabel: { color: '#ccc', fontSize: 10, formatter: '{value}' + 'min' }
}, },
series: [{ series: [{
type: 'line', type: 'line',
...@@ -1476,18 +1476,18 @@ ...@@ -1476,18 +1476,18 @@
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: xAxisData, data: xAxisData,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
axisTick: {show: false}, axisTick: { show: false },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed'}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed' } },
axisLabel: {color: '#ccc', fontSize: 10, formatter: '{value}' + 'min'} axisLabel: { color: '#ccc', fontSize: 10, formatter: '{value}' + 'min' }
}, },
series: [{ series: [{
type: 'line', type: 'line',
...@@ -1526,18 +1526,18 @@ ...@@ -1526,18 +1526,18 @@
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: xAxisData, data: xAxisData,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
axisTick: {show: false}, axisTick: { show: false },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed'}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed' } },
axisLabel: {color: '#ccc', fontSize: 10, formatter: '{value}' + 'kpa'} axisLabel: { color: '#ccc', fontSize: 10, formatter: '{value}' + 'kpa' }
}, },
series: [{ series: [{
type: 'line', type: 'line',
...@@ -1593,24 +1593,24 @@ ...@@ -1593,24 +1593,24 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxisData, data: xAxisData,
axisLine: {lineStyle: {color: '#0a73ff'}}, axisLine: { lineStyle: { color: '#0a73ff' } },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3 } },
axisLabel: {color: '#fff', fontSize: 10, formatter: '{value}ppm'} axisLabel: { color: '#fff', fontSize: 10, formatter: '{value}ppm' }
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
barWidth: '40%', barWidth: '40%',
barGap: '0%', barGap: '0%',
data: seriesData, data: seriesData,
itemStyle: {color: '#5087ec'}, itemStyle: { color: '#5087ec' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -1645,18 +1645,18 @@ ...@@ -1645,18 +1645,18 @@
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: xAxisData, data: xAxisData,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
axisTick: {show: false}, axisTick: { show: false },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed'}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed' } },
axisLabel: {color: '#ccc', fontSize: 10, formatter: '{value}' + 'min'} axisLabel: { color: '#ccc', fontSize: 10, formatter: '{value}' + 'min' }
}, },
series: [{ series: [{
type: 'line', type: 'line',
...@@ -1695,18 +1695,18 @@ ...@@ -1695,18 +1695,18 @@
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: xAxisData, data: xAxisData,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
axisTick: {show: false}, axisTick: { show: false },
axisLabel: {color: '#fff', fontSize: 10, interval: 0} axisLabel: { color: '#fff', fontSize: 10, interval: 0 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed'}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3, type: 'dashed' } },
axisLabel: {color: '#ccc', fontSize: 10, formatter: '{value}' + 'min'} axisLabel: { color: '#ccc', fontSize: 10, formatter: '{value}' + 'min' }
}, },
series: [{ series: [{
type: 'line', type: 'line',
...@@ -1757,13 +1757,13 @@ ...@@ -1757,13 +1757,13 @@
legend: { legend: {
top: '-2%', top: '-2%',
right: '5%', right: '5%',
textStyle: {color: '#fff', fontSize: 10}, textStyle: { color: '#fff', fontSize: 10 },
itemWidth: 20, itemWidth: 20,
itemHeight: 10, itemHeight: 10,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: {type: 'shadow'}, axisPointer: { type: 'shadow' },
formatter: (params) => { formatter: (params) => {
let tooltipHtml = `<div style="font-weight:bold;margin-bottom:5px">${params[0].name}</div>` let tooltipHtml = `<div style="font-weight:bold;margin-bottom:5px">${params[0].name}</div>`
...@@ -1802,17 +1802,17 @@ ...@@ -1802,17 +1802,17 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxisData, data: xAxisData,
axisLine: {lineStyle: {color: '#0a73ff'}}, axisLine: { lineStyle: { color: '#0a73ff' } },
axisLabel: {color: '#fff', fontSize: 10} axisLabel: { color: '#fff', fontSize: 10 }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 5, splitNumber: 5,
min: 0, min: 0,
max: max, max: max,
axisLine: {show: true, lineStyle: {color: '#0a73ff'}}, axisLine: { show: true, lineStyle: { color: '#0a73ff' } },
splitLine: {lineStyle: {color: '#0a73ff', width: 0.5, opacity: 0.3}}, splitLine: { lineStyle: { color: '#0a73ff', width: 0.5, opacity: 0.3 } },
axisLabel: {color: '#fff', fontSize: 10} axisLabel: { color: '#fff', fontSize: 10 }
}, },
series: [{ series: [{
name: '投产数量', name: '投产数量',
...@@ -1820,7 +1820,7 @@ ...@@ -1820,7 +1820,7 @@
barWidth: '40%', barWidth: '40%',
barGap: '0%', barGap: '0%',
data: operationData, data: operationData,
itemStyle: {color: '#5087ec'}, itemStyle: { color: '#5087ec' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -1834,7 +1834,7 @@ ...@@ -1834,7 +1834,7 @@
barWidth: '40%', barWidth: '40%',
barGap: '0%', barGap: '0%',
data: quantityData, data: quantityData,
itemStyle: {color: '#68bbc4'}, itemStyle: { color: '#68bbc4' },
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
...@@ -1985,14 +1985,6 @@ ...@@ -1985,14 +1985,6 @@
border-right: 2px solid #cbdbf8; border-right: 2px solid #cbdbf8;
background: transparent; background: transparent;
border-radius: 10px; border-radius: 10px;
<<<<<<< HEAD
animation: rainbow-glow 5s linear infinite;
box-shadow: -10px 0 10px -10px #ff0000,
10px 0 10px -10px #ff0000,
inset -10px 0 10px -10px #ff0000,
inset 10px 0 10px -10px #ff0000;
background-color: transparent;
.badgeIcon { .badgeIcon {
position: absolute; position: absolute;
...@@ -2105,7 +2097,7 @@ ...@@ -2105,7 +2097,7 @@
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
.el-table__body tr:hover > td.el-table__cell { .el-table__body tr:hover>td.el-table__cell {
background-color: rgba(10, 115, 255, 0.3); background-color: rgba(10, 115, 255, 0.3);
} }
} }
...@@ -2178,63 +2170,63 @@ ...@@ -2178,63 +2170,63 @@
@keyframes rainbow-glow { @keyframes rainbow-glow {
0% { 0% {
box-shadow: -10px 0 10px -10px #ff0000, box-shadow: -10px 0 10px -10px #ff0000,
10px 0 10px -10px #ff0000, 10px 0 10px -10px #ff0000,
inset -10px 0 10px -10px #ff0000, inset -10px 0 10px -10px #ff0000,
inset 10px 0 10px -10px #ff0000; inset 10px 0 10px -10px #ff0000;
border-left-color: #ff0000; border-left-color: #ff0000;
border-right-color: #ff0000; border-right-color: #ff0000;
} }
16% { 16% {
box-shadow: -10px 0 10px -10px #ff9900, box-shadow: -10px 0 10px -10px #ff9900,
10px 0 10px -10px #ff9900, 10px 0 10px -10px #ff9900,
inset -10px 0 10px -10px #ff9900, inset -10px 0 10px -10px #ff9900,
inset 10px 0 10px -10px #ff9900; inset 10px 0 10px -10px #ff9900;
border-left-color: #ff9900; border-left-color: #ff9900;
border-right-color: #ff9900; border-right-color: #ff9900;
} }
33% { 33% {
box-shadow: -10px 0 10px -10px #ffff00, box-shadow: -10px 0 10px -10px #ffff00,
10px 0 10px -10px #ffff00, 10px 0 10px -10px #ffff00,
inset -10px 0 10px -10px #ffff00, inset -10px 0 10px -10px #ffff00,
inset 10px 0 10px -10px #ffff00; inset 10px 0 10px -10px #ffff00;
border-left-color: #ffff00; border-left-color: #ffff00;
border-right-color: #ffff00; border-right-color: #ffff00;
} }
50% { 50% {
box-shadow: -10px 0 10px -10px #33cc33, box-shadow: -10px 0 10px -10px #33cc33,
10px 0 10px -10px #33cc33, 10px 0 10px -10px #33cc33,
inset -10px 0 10px -10px #33cc33, inset -10px 0 10px -10px #33cc33,
inset 10px 0 10px -10px #33cc33; inset 10px 0 10px -10px #33cc33;
border-left-color: #33cc33; border-left-color: #33cc33;
border-right-color: #33cc33; border-right-color: #33cc33;
} }
66% { 66% {
box-shadow: -10px 0 10px -10px #0099ff, box-shadow: -10px 0 10px -10px #0099ff,
10px 0 10px -10px #0099ff, 10px 0 10px -10px #0099ff,
inset -10px 0 10px -10px #0099ff, inset -10px 0 10px -10px #0099ff,
inset 10px 0 10px -10px #0099ff; inset 10px 0 10px -10px #0099ff;
border-left-color: #0099ff; border-left-color: #0099ff;
border-right-color: #0099ff; border-right-color: #0099ff;
} }
83% { 83% {
box-shadow: -10px 0 10px -10px #6633ff, box-shadow: -10px 0 10px -10px #6633ff,
10px 0 10px -10px #6633ff, 10px 0 10px -10px #6633ff,
inset -10px 0 10px -10px #6633ff, inset -10px 0 10px -10px #6633ff,
inset 10px 0 10px -10px #6633ff; inset 10px 0 10px -10px #6633ff;
border-left-color: #6633ff; border-left-color: #6633ff;
border-right-color: #6633ff; border-right-color: #6633ff;
} }
100% { 100% {
box-shadow: -10px 0 10px -10px #ff0066, box-shadow: -10px 0 10px -10px #ff0066,
10px 0 10px -10px #ff0066, 10px 0 10px -10px #ff0066,
inset -10px 0 10px -10px #ff0066, inset -10px 0 10px -10px #ff0066,
inset 10px 0 10px -10px #ff0066; inset 10px 0 10px -10px #ff0066;
border-left-color: #ff0066; border-left-color: #ff0066;
border-right-color: #ff0066; border-right-color: #ff0066;
} }
......
tht_project/static/src/view/equipment_status.html
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
alt="header background" /> alt="header background" />
<span class="header-text">设备实时看板</span> <span class="header-text">设备实时看板</span>
<span class="hintText"> <span class="hintText">
<i style="font-size: 30px;" @click="toggleFullscreen" <i style="font-size: 30px;" @click="toggleFullscreen"
:class="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"></i> :class="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"></i>
<span> [[currentTime ]]</span> <span> [[currentTime ]]</span>
</span> </span>
...@@ -31,10 +31,7 @@ ...@@ -31,10 +31,7 @@
</div> </div>
<div class="workshop-filter" style="text-align: center; margin: 10px 0"> <div class="workshop-filter" style="text-align: center; margin: 10px 0">
<el-radio-group <el-radio-group v-model="selectedWorkshop" @change="onWorkshopChange" size="medium">
v-model="selectedWorkshop"
@change="onWorkshopChange"
size="medium">
<el-radio label=""> <el-radio label="">
<span style="font-size: 18px;">全部<span></el-radio> <span style="font-size: 18px;">全部<span></el-radio>
<el-radio label="预料车间"> <el-radio label="预料车间">
...@@ -43,45 +40,46 @@ ...@@ -43,45 +40,46 @@
<el-radio label="蒸煮车间"> <el-radio label="蒸煮车间">
<span style="font-size: 18px">成型车间<span> <span style="font-size: 18px">成型车间<span>
</el-radio> </el-radio>
<el-radio label="包装车间" > <el-radio label="包装车间">
<span style="font-size: 18px">包装车间<span> <span style="font-size: 18px">包装车间<span>
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<!-- 设备状态卡片区域 - 新设计 --> <!-- 设备状态卡片区域 - 新设计 -->
<div class="device-cards-container"> <div class="scrollBoxClass">
<div v-for="(device, index) in deviceList" :key="index" class="device-card new-design" <div class="device-cards-container">
:class="getCardClass(device.status)"> <div v-for="(device, index) in deviceList" :key="index" class="device-card new-design"
<!-- 设备名称 - 左上角 --> :class="getCardClass(device.status)">
<div class="device-name">[[truncateText(device.name, 12)]]</div> <!-- 设备名称 - 左上角 -->
<div class="device-name">[[truncateText(device.name, 12)]]</div>
<!-- 设备状态 - 右上角 -->
<div class="device-status-tag" :class="getStatusClass(device.status)"> <!-- 设备状态 - 右上角 -->
[[getStatusText(device.status)]] <div class="device-status-tag" :class="getStatusClass(device.status)">
</div> [[getStatusText(device.status)]]
<!-- 设备状态水波纹 - 中间 -->
<div class="device-wave-container">
<!-- v-if="device.status === 'running' || device.status === 'waiting'" -->
<div class="oee-text">
OEE
</div> </div>
<!-- <div class="err-text" v-if="device.status === 'error'" :class="getErrClass(device.status)">
<!-- 设备状态水波纹 - 中间 -->
<div class="device-wave-container">
<!-- v-if="device.status === 'running' || device.status === 'waiting'" -->
<div class="oee-text">
OEE
</div>
<!-- <div class="err-text" v-if="device.status === 'error'" :class="getErrClass(device.status)">
ERR ERR
</div> </div>
<div class="off-text" v-if="device.status === 'off'" :class="getOffClass(device.status)"> <div class="off-text" v-if="device.status === 'off'" :class="getOffClass(device.status)">
OFF OFF
</div> --> </div> -->
<!-- v-if="device.status === 'running' || device.status === 'waiting'" --> <!-- v-if="device.status === 'running' || device.status === 'waiting'" -->
<div class="percentage-text"> <div class="percentage-text">
[[ device.percentage > 100 ? 100 : device.percentage ]]% [[ device.percentage > 100 ? 100 : device.percentage ]]%
</div> </div>
<!-- 圆形容器 --> <!-- 圆形容器 -->
<div class="circle-container" :class="getBorderClass(device.status)"> <div class="circle-container" :class="getBorderClass(device.status)">
<!-- 水波纹效果 - 通过内联样式直接控制高度百分比 --> <!-- 水波纹效果 - 通过内联样式直接控制高度百分比 -->
<div class="water-wave" :class="getWaveClass(device.status)" :style="{ <div class="water-wave" :class="getWaveClass(device.status)" :style="{
'height': getWaveHeight(device.status, device.percentage) + '%', 'height': getWaveHeight(device.status, device.percentage) + '%',
'bottom': '0', 'bottom': '0',
'left': '0', 'left': '0',
...@@ -89,35 +87,36 @@ ...@@ -89,35 +87,36 @@
'width': '100%', 'width': '100%',
'overflow': 'hidden' 'overflow': 'hidden'
}"> }">
<div class="water-wave-content"> <div class="water-wave-content">
<div class="water-wave-ripple"></div> <div class="water-wave-ripple"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 设备状态信息 - 底部 --> <!-- 设备状态信息 - 底部 -->
<div class="device-status-info"> <div class="device-status-info">
<span>已持续 [[device.duration]]</span> <span>已持续 [[device.duration]]</span>
</div>
<div style="width: 100%; display: flex;margin-left: 13px;">
<div class="flxe_sty">
<div class="flxe_label_sty" style=" background-color: #00aa00;">开机</div>
[[ device.run_seconds ]]
</div> </div>
<div class="flxe_sty"> <div style="width: 100%; display: flex;margin-left: 13px;">
<div class="flxe_label_sty" style=" background-color: #ffaa00;">加工</div> <div class="flxe_sty">
[[ device.green_seconds ]] <div class="flxe_label_sty" style=" background-color: #00aa00;">开机</div>
</div> [[ device.run_seconds ]]
</div> </div>
<div style="width: 100%;display: flex;margin-left: 13px;"> <div class="flxe_sty">
<div class="flxe_sty"> <div class="flxe_label_sty" style=" background-color: #ffaa00;">加工</div>
<div class="flxe_label_sty" style=" background-color: #797979;">空闲</div> [[ device.green_seconds ]]
[[ device.yellow_seconds ]] </div>
</div> </div>
<div class="flxe_sty"> <div style="width: 100%;display: flex;margin-left: 13px;">
<div class="flxe_label_sty" style=" background-color: #f87171;">故障</div> <div class="flxe_sty">
[[ device.red_seconds ]] <div class="flxe_label_sty" style=" background-color: #797979;">空闲</div>
[[ device.yellow_seconds ]]
</div>
<div class="flxe_sty">
<div class="flxe_label_sty" style=" background-color: #f87171;">故障</div>
[[ device.red_seconds ]]
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -201,20 +200,20 @@ ...@@ -201,20 +200,20 @@
<script> <script>
// 发送消息给父页面(关闭odoo的菜单弹窗) // 发送消息给父页面(关闭odoo的菜单弹窗)
document.addEventListener("click", () => { document.addEventListener("click", function () {
window.parent.postMessage("hidePopover", "*"); window.parent.postMessage("hidePopover", "*");
}); });
let vue = new Vue({ let vue = new Vue({
el: "#app", el: "#app",
delimiters: ["[[", "]]"], // 替换原本vue的[[ key ]]取值方式(与odoo使用的jinja2冲突问题) delimiters: ["[[", "]]"], // 替换原本vue的[[ key ]]取值方式(与odoo使用的jinja2冲突问题)
data() { data: function () {
return { return {
isFullscreen: false, // 全屏状态 isFullscreen: false, // 全屏状态
currentTime: null, // 当前时间 currentTime: null, // 当前时间
timer: null, // 定时器 timer: null, // 定时器
windowHeight: window.innerHeight, // 窗口高度 windowHeight: window.innerHeight, // 窗口高度
// dwsURL: "https://workstation.rokeris.com", // 基地址 dwsURL: "https://tht.dws.rokecloud.com", // 基地址
dwsURL: "", // 基地址 // dwsURL: "", // 基地址
baseURL: "https://dws-platform.xbg.rokeris.com/dev-api", // 基地址 baseURL: "https://dws-platform.xbg.rokeris.com/dev-api", // 基地址
loading: false, // 全局加载效果 loading: false, // 全局加载效果
deviceList: [], // 设备列表 deviceList: [], // 设备列表
...@@ -230,7 +229,7 @@ ...@@ -230,7 +229,7 @@
selectedWorkshop: "", // 新增字段：当前选中的车间 selectedWorkshop: "", // 新增字段：当前选中的车间
}; };
}, },
created() { created: function () {
if (this.getUrlSearch("factory_code")) { if (this.getUrlSearch("factory_code")) {
this.factoryCode = this.getUrlSearch("factory_code"); //截取url后面的参数 this.factoryCode = this.getUrlSearch("factory_code"); //截取url后面的参数
} }
...@@ -238,13 +237,13 @@ ...@@ -238,13 +237,13 @@
}, },
computed: { computed: {
// 选中设备的信息 // 选中设备的信息
selDeviceInfo() { selDeviceInfo: function () {
return this.deviceList.find((item) => item.id == this.selectedDevice); return this.deviceList.find(function (item) { return item.id == this.selectedDevice; }.bind(this));
}, },
}, },
async mounted() { async mounted() {
window.addEventListener("resize", this.handleResize); window.addEventListener("resize", this.handleResize);
this.$nextTick(() => { this.$nextTick(function () {
document.getElementById("bodyId").style.display = "block"; document.getElementById("bodyId").style.display = "block";
}); });
...@@ -258,26 +257,26 @@ ...@@ -258,26 +257,26 @@
this.dateList = this.getLastAssignDays(); this.dateList = this.getLastAssignDays();
// 设置定时刷新（每分钟刷新一次，静默模式） // 设置定时刷新（每分钟刷新一次，静默模式）
this.refreshInterval = setInterval(() => { this.refreshInterval = setInterval(function () {
this.initData(true); // 传入true表示静默刷新，不显示加载提示 this.initData(true); // 传入true表示静默刷新，不显示加载提示
}, 60000); }.bind(this), 60000);
// 设置设备信息的title属性 // 设置设备信息的title属性
this.$nextTick(() => { this.$nextTick(function () {
document.querySelectorAll(".device-info").forEach((el) => { document.querySelectorAll(".device-info").forEach(function (el) {
el.title = el.dataset.fullTitle; el.title = el.dataset.fullTitle;
}); });
}); });
}, },
updated() { updated: function () {
// 在数据更新后也设置title属性 // 在数据更新后也设置title属性
this.$nextTick(() => { this.$nextTick(function () {
document.querySelectorAll(".device-info").forEach((el) => { document.querySelectorAll(".device-info").forEach(function (el) {
el.title = el.dataset.fullTitle; el.title = el.dataset.fullTitle;
}); });
}); });
}, },
beforeDestroy() { beforeDestroy: function () {
// 清除定时器 // 清除定时器
if (this.refreshInterval) { if (this.refreshInterval) {
clearInterval(this.refreshInterval); clearInterval(this.refreshInterval);
...@@ -290,7 +289,7 @@ ...@@ -290,7 +289,7 @@
}, },
methods: { methods: {
// 全屏icon点击事件 // 全屏icon点击事件
toggleFullscreen() { toggleFullscreen: function () {
if (!this.isFullscreen) { if (!this.isFullscreen) {
this.enterFullScreen() this.enterFullScreen()
} else { } else {
...@@ -298,7 +297,7 @@ ...@@ -298,7 +297,7 @@
} }
}, },
// 全屏方法 // 全屏方法
enterFullScreen() { enterFullScreen: function () {
// 获取需要全屏的元素 // 获取需要全屏的元素
const elem = this.$refs.fullScreenElement const elem = this.$refs.fullScreenElement
if (elem.requestFullscreen) { if (elem.requestFullscreen) {
...@@ -315,7 +314,7 @@ ...@@ -315,7 +314,7 @@
} }
this.isFullscreen = true this.isFullscreen = true
}, },
exitFullScreen() { exitFullScreen: function () {
if (document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen() document.exitFullscreen()
} else if (document.mozCancelFullScreen) { } else if (document.mozCancelFullScreen) {
...@@ -330,12 +329,12 @@ ...@@ -330,12 +329,12 @@
} }
this.isFullscreen = false this.isFullscreen = false
}, },
onWorkshopChange() { onWorkshopChange: function () {
this.initData(); // 触发重新加载数据 this.initData(); // 触发重新加载数据
}, },
// 初始化当前时间 // 初始化当前时间
initCurrentTimeFn() { initCurrentTimeFn: function () {
this.timer = setInterval(() => { this.timer = setInterval(function () {
const now = new Date(); const now = new Date();
const year = now.getFullYear(); const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); const month = String(now.getMonth() + 1).padStart(2, '0');
...@@ -344,10 +343,10 @@ ...@@ -344,10 +343,10 @@
const minutes = String(now.getMinutes()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0');
this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}, 1000) }.bind(this), 1000)
}, },
// 通过网址跳转过来的页面,截取后面的参数 // 通过网址跳转过来的页面,截取后面的参数
getUrlSearch(name) { getUrlSearch: function (name) {
// 未传参，返回空 // 未传参，返回空
if (!name) return ""; if (!name) return "";
// 查询参数：先通过search取值，如果取不到就通过hash来取 // 查询参数：先通过search取值，如果取不到就通过hash来取
...@@ -365,7 +364,7 @@ ...@@ -365,7 +364,7 @@
return r[2]; return r[2];
}, },
// 初始化数据 // 初始化数据
async initData(silent = false, workshopName = this.selectedWorkshop) { async initData(silent = false, workshopName = this.selectedWorkshop) {
try { try {
// 只有在非静默模式下才显示加载提示 // 只有在非静默模式下才显示加载提示
if (!silent) { if (!silent) {
...@@ -412,8 +411,8 @@ ...@@ -412,8 +411,8 @@
const end_working_time = response.data.result.end_working_time || []; const end_working_time = response.data.result.end_working_time || [];
const wait_time = response.data.result.wait_time || []; const wait_time = response.data.result.wait_time || [];
if (this.factoryCode) { if (this.factoryCode) {
// 调用设备状态接口 // 调用设备状态接口
await this.getDeviceStateList(start_working_time, end_working_time, wait_time); await this.getDeviceStateList(start_working_time, end_working_time, wait_time);
} }
else { else {
await this.getFactoryCode(start_working_time, end_working_time, wait_time); await this.getFactoryCode(start_working_time, end_working_time, wait_time);
...@@ -439,7 +438,7 @@ ...@@ -439,7 +438,7 @@
method: "post", method: "post",
url: this.dwsURL + "/roke/workstation/equipment/get_equipment_data", url: this.dwsURL + "/roke/workstation/equipment/get_equipment_data",
data: { data: {
plant_name: workshopName, plant_name: workshopName,
}, },
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
...@@ -522,33 +521,33 @@ ...@@ -522,33 +521,33 @@
}, },
// 处理设备状态数据 // 处理设备状态数据
processDeviceStateData(deviceStateData) { processDeviceStateData: function (deviceStateData) {
if (!deviceStateData || !Array.isArray(deviceStateData)) { if (!deviceStateData || !Array.isArray(deviceStateData)) {
return; return;
} }
const codeToSeqMap = {}; var codeToSeqMap = {};
this.allEquipmentData.forEach(equip => { this.allEquipmentData.forEach(function (equip) {
codeToSeqMap[equip.code] = equip.sequence; codeToSeqMap[equip.code] = equip.sequence;
}); });
// 获取当前车间下的设备 code 列表 // 获取当前车间下的设备 code 列表
const validCodes = this.allEquipmentData var validCodes = this.allEquipmentData
.filter(e => !this.selectedWorkshop || e.plant_name === this.selectedWorkshop) .filter(function (e) { return !this.selectedWorkshop || e.plant_name === this.selectedWorkshop; }.bind(this))
.map(e => e.code); .map(function (e) { return e.code; });
// 过滤掉不属于当前车间的设备 // 过滤掉不属于当前车间的设备
const filteredDevices = deviceStateData.filter(d => var filteredDevices = deviceStateData.filter(function (d) {
!this.selectedWorkshop || validCodes.includes(d.code) return !this.selectedWorkshop || validCodes.includes(d.code);
).map(device => ({ }.bind(this)).map(function (device) {
...device, var newDevice = Object.assign({}, device);
seq: codeToSeqMap[device.code] || Number.MAX_SAFE_INTEGER // 如果找不到 seq，默认排最后 newDevice.seq = codeToSeqMap[device.code] || Number.MAX_SAFE_INTEGER; // 如果找不到 seq，默认排最后
})); return newDevice;
});
// 将API返回的数据转换为页面所需的格式 // 将API返回的数据转换为页面所需的格式
this.deviceList = filteredDevices.map((device) => { this.deviceList = filteredDevices.map(function (device) {
// 根据API返回的状态确定前端显示的状态 // 根据API返回的状态确定前端显示的状态
let status = "off"; var status = "off";
if (device.state === "green") { if (device.state === "green") {
status = "running"; status = "running";
} else if (device.state === "yellow") { } else if (device.state === "yellow") {
...@@ -559,33 +558,30 @@ ...@@ -559,33 +558,30 @@
status = "off"; status = "off";
} }
// 计算持续时间的显示格式 // 计算持续时间的显示格式
let durationText = "0" var durationText = "0"
if (device.duration_hours !== undefined) { if (device.duration_hours !== undefined) {
durationText = this.formatTime(Number(device.duration_hours * 3600)) durationText = this.formatTime(Number(device.duration_hours * 3600))
} }
let run_seconds = "0" var run_seconds = "0"
if (device.run_seconds !== undefined) run_seconds = this.formatTime(Number(device.run_seconds)) if (device.run_seconds !== undefined) run_seconds = this.formatTime(Number(device.run_seconds))
let green_seconds = "0" var green_seconds = "0"
if (device.green_seconds !== undefined) green_seconds = this.formatTime(Number(device.green_seconds)) if (device.green_seconds !== undefined) green_seconds = this.formatTime(Number(device.green_seconds))
let yellow_seconds = "0" var yellow_seconds = "0"
if (device.yellow_seconds !== undefined) yellow_seconds = this.formatTime(Number(device.yellow_seconds)) if (device.yellow_seconds !== undefined) yellow_seconds = this.formatTime(Number(device.yellow_seconds))
let red_seconds = "0" var red_seconds = "0"
if (device.red_seconds !== undefined) yellow_seconds = this.formatTime(Number(device.yellow_seconds)) if (device.red_seconds !== undefined) red_seconds = this.formatTime(Number(device.red_seconds))
// 计算利用率百分比，确保有效值 // 计算利用率百分比，确保有效值
const percentage = device.utilization_rate !== undefined ? Math.round(device var percentage = device.utilization_rate !== undefined ? Math.round(device.utilization_rate) : 0
.utilization_rate) : 0
// 从所有设备列表中获取准确的设备名称 // 从所有设备列表中获取准确的设备名称
let deviceName = device.name || device.code // 默认使用API返回的名称或编码 var deviceName = device.name || device.code // 默认使用API返回的名称或编码
// 在所有设备列表中查找匹配的设备 // 在所有设备列表中查找匹配的设备
if (this.allEquipmentData && this.allEquipmentData.length > 0) { if (this.allEquipmentData && this.allEquipmentData.length > 0) {
const matchedDevice = this.allEquipmentData.find( var matchedDevice = this.allEquipmentData.find(function (equip) { return equip.code === device.code; });
(equip) => equip.code === device.code
)
// 如果找到匹配的设备，使用其名称 // 如果找到匹配的设备，使用其名称
if (matchedDevice && matchedDevice.name) { if (matchedDevice && matchedDevice.name) {
deviceName = device.name ? matchedDevice.name : device.code deviceName = device.name ? matchedDevice.name : device.code
...@@ -605,28 +601,28 @@ ...@@ -605,28 +601,28 @@
yellow_seconds: yellow_seconds, yellow_seconds: yellow_seconds,
red_seconds: red_seconds red_seconds: red_seconds
} }
}).sort((a, b) => (codeToSeqMap[a.code] || Number.MAX_SAFE_INTEGER) }.bind(this)).sort(function (a, b) {
- (codeToSeqMap[b.code] || Number.MAX_SAFE_INTEGER)); return (codeToSeqMap[a.code] || Number.MAX_SAFE_INTEGER) - (codeToSeqMap[b.code] || Number.MAX_SAFE_INTEGER);
this.deviceList = this.deviceList.filter((device) => device) });
}, },
formatTime(seconds) { formatTime: function (seconds) {
if (seconds < 60) { if (seconds < 60) {
return `0min`; // 不足 1 分钟显示 0min return `0min`; // 不足 1 分钟显示 0min
} else if (seconds < 3600) { } else if (seconds < 3600) {
const minutes = Math.floor(seconds / 60); // 转换为分钟 var minutes = Math.floor(seconds / 60); // 转换为分钟
return `${minutes}min`; // 显示分钟 return `${minutes}min`; // 显示分钟
} else if (seconds < 86400) { // 小于 1 天 } else if (seconds < 86400) { // 小于 1 天
const hours = Math.floor(seconds / 3600); // 转换为小时 var hours = Math.floor(seconds / 3600); // 转换为小时
return `${hours}h`; // 只返回小时 return `${hours}h`; // 只返回小时
} else { } else {
const days = Math.floor(seconds / 86400); // 转换为天数 var days = Math.floor(seconds / 86400); // 转换为天数
return `${days}d`; // 只返回天 return `${days}d`; // 只返回天
} }
}, },
// 初始化模拟数据 (保留原有的模拟数据方法，作为备用) // 初始化模拟数据 (保留原有的模拟数据方法，作为备用)
initMockData() { initMockData: function () {
// 模拟设备数据 - 添加不同状态和明显不同百分比的测试数据 // 模拟设备数据 - 添加不同状态和明显不同百分比的测试数据
this.deviceList = [ this.deviceList = [
// { // {
...@@ -668,7 +664,7 @@ ...@@ -668,7 +664,7 @@
}, },
// 获取卡片的CSS类名 // 获取卡片的CSS类名
getCardClass(status) { getCardClass: function (status) {
switch (status) { switch (status) {
case "running": case "running":
return "card-running"; return "card-running";
...@@ -683,7 +679,7 @@ ...@@ -683,7 +679,7 @@
}, },
// 获取边框的CSS类名 // 获取边框的CSS类名
getBorderClass(status) { getBorderClass: function (status) {
switch (status) { switch (status) {
case "running": case "running":
return "border-running"; return "border-running";
...@@ -698,7 +694,7 @@ ...@@ -698,7 +694,7 @@
}, },
// 获取设备状态对应的CSS类名 // 获取设备状态对应的CSS类名
getStatusClass(status) { getStatusClass: function (status) {
switch (status) { switch (status) {
case "running": case "running":
return "status-running"; return "status-running";
...@@ -713,7 +709,7 @@ ...@@ -713,7 +709,7 @@
}, },
// 获取波浪效果的类名 // 获取波浪效果的类名
getWaveClass(status) { getWaveClass: function (status) {
switch (status) { switch (status) {
case "running": case "running":
return "wave-running"; return "wave-running";
...@@ -728,23 +724,16 @@ ...@@ -728,23 +724,16 @@
}, },
// 获取波浪高度 // 获取波浪高度
getWaveHeight(status, percentage) { getWaveHeight: function (status, percentage) {
// 将百分比限制在10%-100%之间，确保即使是低百分比也有一定的水位可见 // 将百分比限制在10%-100%之间，确保即使是低百分比也有一定的水位可见
let height = percentage; var height = percentage;
// 如果是故障或停机状态，固定显示50%
// if (status === "error" || status === "off") {
// height = 50;
// }
// 确保最小高度为10%，最大为100% // 确保最小高度为10%，最大为100%
height = Math.min(Math.max(height, 10), 100); height = Math.min(Math.max(height, 10), 100);
return height; return height;
}, },
// 获取设备状态对应的文本 // 获取设备状态对应的文本
getStatusText(status) { getStatusText: function (status) {
switch (status) { switch (status) {
case "running": case "running":
return "运行中"; return "运行中";
...@@ -759,10 +748,11 @@ ...@@ -759,10 +748,11 @@
}, },
// 处理小数位数方法 // 处理小数位数方法
toFixedHandle(value, num = 4) { toFixedHandle: function (value, num) {
if (num === undefined) num = 4;
if (value) { if (value) {
let strValue = String(value); var strValue = String(value);
if (strValue.split(".").length > 1 || strValue.split(".")[1]?.length > num) { if (strValue.split(".").length > 1 || (strValue.split(".")[1] && strValue.split(".")[1].length > num)) {
strValue = Number(strValue).toFixed(num); strValue = Number(strValue).toFixed(num);
} }
return Number(strValue); return Number(strValue);
...@@ -772,26 +762,26 @@ ...@@ -772,26 +762,26 @@
}, },
// 计算高度百分比 // 计算高度百分比
calculateHeight(hours) { calculateHeight: function (hours) {
// 24小时对应整个高度(100%) // 24小时对应整个高度(100%)
// 每4小时对应一个刻度区间，总共6个区间 // 每4小时对应一个刻度区间，总共6个区间
// 计算每小时占的百分比：100% / 24 ≈ 4.167% // 计算每小时占的百分比：100% / 24 ≈ 4.167%
const heightPerHour = 100 / 24; var heightPerHour = 100 / 24;
const percentage = hours * heightPerHour; var percentage = hours * heightPerHour;
// 确保高度在0-100%之间 // 确保高度在0-100%之间
return Math.min(Math.max(percentage, 0), 100); return Math.min(Math.max(percentage, 0), 100);
}, },
// 获取最后指定天数的日期 // 获取最后指定天数的日期
getLastAssignDays(num = 10) { getLastAssignDays: function (num) {
const dates = []; if (num === undefined) num = 10;
for (let i = num - 1; i >= 0; i--) { var dates = [];
const date = new Date(); for (var i = num - 1; i >= 0; i--) {
var date = new Date();
date.setDate(date.getDate() - i); date.setDate(date.getDate() - i);
const year = date.getFullYear(); var year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0"); var month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0"); var day = String(date.getDate()).padStart(2, "0");
dates.push(`${year}-${month}-${day}`); dates.push(`${year}-${month}-${day}`);
} }
this.start_time = dates[0]; // 第一天 this.start_time = dates[0]; // 第一天
...@@ -800,25 +790,25 @@ ...@@ -800,25 +790,25 @@
}, },
// 处理窗口大小变化 // 处理窗口大小变化
handleResize() { handleResize: function () {
// 窗口大小变化时的处理逻辑 // 窗口大小变化时的处理逻辑
}, },
// 文本截断方法 // 文本截断方法
truncateText(text, maxLength) { truncateText: function (text, maxLength) {
if (!text) return ""; if (!text) return "";
if (text.length <= maxLength) return text; if (text.length <= maxLength) return text;
return text.substring(0, maxLength) + "..."; return text.substring(0, maxLength) + "...";
}, },
// 显示完整标题 // 显示完整标题
showFullTitle(event, device) { showFullTitle: function (event, device) {
const fullTitle = device.name + " | " + device.code; var fullTitle = device.name + " | " + device.code;
event.target.setAttribute("title", fullTitle); event.target.setAttribute("title", fullTitle);
}, },
// 获取ERR文字的CSS类名 // 获取ERR文字的CSS类名
getErrClass(status) { getErrClass: function (status) {
if (status === "error") { if (status === "error") {
return "err-error"; return "err-error";
} }
...@@ -826,7 +816,7 @@ ...@@ -826,7 +816,7 @@
}, },
// 获取OFF文字的CSS类名 // 获取OFF文字的CSS类名
getOffClass(status) { getOffClass: function (status) {
if (status === "off") { if (status === "off") {
return "off-status"; return "off-status";
} }
...@@ -901,7 +891,7 @@ ...@@ -901,7 +891,7 @@
z-index: 1; z-index: 1;
} }
.hintText { .hintText {
position: absolute; position: absolute;
font-size: 14px; font-size: 14px;
bottom: -5px; bottom: -5px;
...@@ -912,6 +902,12 @@ ...@@ -912,6 +902,12 @@
gap: 10px; gap: 10px;
} }
.scrollBoxClass {
height: 1px;
flex: auto;
overflow-y: auto;
}
/* 设备卡片容器 */ /* 设备卡片容器 */
.device-cards-container { .device-cards-container {
display: grid; display: grid;
...@@ -1300,20 +1296,20 @@ ...@@ -1300,20 +1296,20 @@
font-size: 10px; font-size: 10px;
color: #fff; color: #fff;
margin-top: 5px; margin-top: 5px;
}
.flxe_label_sty { .flxe_label_sty {
margin-right: 2px; margin-right: 2px;
font-weight: bold; font-weight: bold;
color: #000; color: #000;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 10px; font-size: 10px;
width: 30px; width: 30px;
height: auto; height: auto;
border-radius: 2px; border-radius: 2px;
margin-left: 10px; margin-left: 10px;
}
} }
</style> </style>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment