<template>
|
<dv-full-screen-container>
|
<div class="eqpBox">
|
<div class="eqpRow">
|
<div class="eqpImage" :style="{ 'background-position': position + 'px' }">
|
<div class="leftEqp">
|
<dv-border-box7 class="leftTop">
|
<div class="leftTop0">
|
<div style="padding-top: 20px; padding-left: 10px" @click="back">
|
<Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" />
|
</div>
|
|
<div class="leftTop1">
|
|
<Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
|
<div>
|
<div class="mainInfo">{{ realData?.totalRemain | 0 }} Min</div>
|
<div class="subhead">剩余时间</div>
|
</div>
|
</div>
|
<div class="leftTop1">
|
<Icon icon="bi:fan" :size="50" />
|
<div>
|
<div class="mainInfo">{{ realData?.trendVo?.fanFrequency | 0 }} Hz</div>
|
<div class="subhead">风机频率</div>
|
</div>
|
</div>
|
<div class="leftTop3" :style="{ 'background-image': 'url(' + getStatusImageUrl(statusGif) + ')' }"></div>
|
<div class="outDiv eqpStatus">
|
<div
|
style="
|
font-size: 28px;
|
|
color: white;
|
background-color: #1595ea;
|
height: 60px;
|
width: 180px;
|
line-height: 60px;
|
text-align: center;
|
border-radius: 10px;
|
font-weight: bold;
|
"
|
>
|
{{ statusTxt }}
|
</div>
|
</div>
|
</div>
|
<div style="width: 1200px; height: 798px; position: absolute">
|
<div v-if="zuoqianjiting" class="error-div" style="top: 466px; left: 589px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 70px"> 左前急停 </div>
|
</div>
|
<div v-if="shebeijiting" class="error-div" style="top: 170px; left: 702px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 106px"> 设备急停（总） </div>
|
</div>
|
<div v-if="chuliaojiting" class="error-div" style="top: 450px; left: 158px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 70px"> 出料急停 </div>
|
</div>
|
<div v-if="mianbanjiting" class="error-div" style="top: 398px; left: 978px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 70px"> 面板急停 </div>
|
</div>
|
<div v-if="fengxiangsheng" class="error-div" style="top: 476px; left: 753px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 86px"> 风箱升异常 </div>
|
</div>
|
<div v-if="fengxiangjiang" class="error-div" style="top: 502px; left: 753px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 86px"> 风箱降异常 </div>
|
</div>
|
<div v-if="fengjiguoliu" class="error-div" style="top: 510px; left: 975px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 70px"> 风机过流 </div>
|
</div>
|
<div v-if="guntongsheng" class="error-div" style="top: 331px; left: 753px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 86px"> 滚筒升异常 </div>
|
</div>
|
<div v-if="guntongjiang" class="error-div" style="top: 356px; left: 753px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 86px"> 滚筒降异常 </div>
|
</div>
|
<div v-if="guntongguoliu" class="error-div" style="top: 324px; left: 916px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 70px"> 滚筒过流 </div>
|
</div>
|
<div v-if="wendubaojing" class="error-div" style="top: 373px; left: 978px">
|
<div class="blingbling error-marker"></div>
|
<div class="error-msg" style="width: 70px"> 温度报警 </div>
|
</div>
|
|
<div v-if="zuoqianmen" class="error-div" style="top: 595px; left: 591px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 80px"> 左前门报警 </div>
|
</div>
|
<div v-if="zuohoumen" class="error-div" style="top: 565px; left: 868px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 80px"> 左后门报警 </div>
|
</div>
|
<div v-if="youqianmen" class="error-div" style="top: 593px; left: 396px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 80px"> 右前门报警 </div>
|
</div>
|
<div v-if="youhoumen" class="error-div" style="top: 565px; left: 697px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 80px"> 右后门报警 </div>
|
</div>
|
|
<div v-if="guntongbuzaigaowei" class="error-div" style="top: 304px; left: 753px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 100px"> 滚筒不在高位 </div>
|
</div>
|
<div v-if="fengxiangbuzaigaowei" class="error-div" style="top: 451px; left: 753px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 100px"> 风箱不在高位 </div>
|
</div>
|
<div v-if="fengxiangbuzaidiwei" class="error-div" style="top: 528px; left: 753px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 100px"> 风箱不在低位 </div>
|
</div>
|
<div v-if="jiareweichuanganqi" class="error-div" style="top: 433px; left: 904px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 加热位传感器报警 </div>
|
</div>
|
<div v-if="zuoqianfengxianggaowei" class="error-div" style="top: 502px; left: 535px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 左前风箱不在高位 </div>
|
</div>
|
<div v-if="zuoqianfengxiangdiwei" class="error-div" style="top: 528px; left: 535px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 左前风箱不在低位 </div>
|
</div>
|
<div v-if="zuohoufengxianggaowei" class="error-div" style="top: 459px; left: 904px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 左后风箱不在高位 </div>
|
</div>
|
<div v-if="zuohoufengxiangdiwei" class="error-div" style="top: 484px; left: 904px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 左后风箱不在低位 </div>
|
</div>
|
<div v-if="youqianfengxianggaowei" class="error-div" style="top: 447px; left: 420px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 右前风箱不在高位 </div>
|
</div>
|
<div v-if="youqianfengxiangdiwei" class="error-div" style="top: 473px; left: 420px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 右前风箱不在低位 </div>
|
</div>
|
<div v-if="youhoufengxianggaowei" class="error-div" style="top: 383px; left: 805px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 右后风箱不在高位 </div>
|
</div>
|
<div v-if="youhoufengxiangdiwei" class="error-div" style="top: 408px; left: 805px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 右后风箱不在低位 </div>
|
</div>
|
<div v-if="zuoqianguntongdiwei" class="error-div" style="top: 343px; left: 530px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 左前滚筒不在低位 </div>
|
</div>
|
<div v-if="zuohouguntongdiwei" class="error-div" style="top: 296px; left: 916px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 左后滚筒不在低位 </div>
|
</div>
|
<div v-if="youqianguntongdiwei" class="error-div" style="top: 316px; left: 419px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 右前滚筒不在低位 </div>
|
</div>
|
<div v-if="youhouguntongdiwei" class="error-div" style="top: 270px; left: 797px">
|
<div class="blingbling warn-marker"></div>
|
<div class="warn-msg" style="width: 126px"> 右后滚筒不在低位 </div>
|
</div>
|
</div>
|
</dv-border-box7>
|
</div>
|
<div class="rightInfo">
|
<div class="rightTop">
|
<dv-border-box7 class="tempMoisChart">
|
<a-row>
|
<a-col :span="7">故障名称</a-col>
|
<a-col :span="7">开始时间</a-col>
|
<a-col :span="7">结束时间</a-col>
|
<a-col :span="3">持续时长</a-col>
|
</a-row>
|
<div ref="scrollContainer" class="scroll-container">
|
<a-row v-for="item in faultList" :key="item.id">
|
<a-col :span="7">{{ item.faultName }}</a-col>
|
<a-col :span="7">{{ item.startTime }}</a-col>
|
<a-col :span="7">{{ item.endTime }}</a-col>
|
<a-col :span="3">{{ item.totalTime }}</a-col>
|
</a-row>
|
</div>
|
</dv-border-box7>
|
</div>
|
<div class="rightTwo">
|
<dv-border-box7 class="infoChart">
|
<div class="chartTittle"> 故障时长统计 </div>
|
<!-- <div class="outDiv" style="padding-top: 20px">-->
|
<!-- -->
|
<!-- </div>-->
|
<div :id="'chartDom'" style="width: 340px; height: 280px"></div>
|
</dv-border-box7>
|
|
<dv-border-box7 class="infoChart">
|
<div class="chartTittle">故障次数纹 </div>
|
<div :id="'chartDom2'" style="width: 340px; height: 280px"></div>
|
</dv-border-box7>
|
<dv-border-box7 class="infoChart">
|
<div class="chartTittle">警告时长统计</div>
|
<div :id="'chartDom3'" style="width: 340px; height: 280px"></div>
|
</dv-border-box7>
|
<dv-border-box7 class="infoChart">
|
<div class="chartTittle">
|
<div> 警告次数统计</div>
|
</div>
|
<div :id="'chartDom4'" style="width: 340px; height: 280px"></div>
|
</dv-border-box7>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</dv-full-screen-container>
|
</template>
|
|
<script setup lang="ts">
|
import { useFullscreen } from '@vueuse/core'
|
import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3'
|
import { router } from '/@/router'
|
import { onMounted, ref, onUnmounted } from 'vue'
|
import { Progress } from 'ant-design-vue'
|
import * as echarts from 'echarts'
|
import 'echarts-liquidfill'
|
import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index'
|
import { defHttp } from '/@/utils/http/axios'
|
import { queryById, listAll } from '../api/DryEquipment.api'
|
import { queryByOrderId } from '../dryFaultRecord/DryFaultRecord.api'
|
import { dryEquipment } from '../dataDefine/DryEquipment.data'
|
import { useUserStore } from '/@/store/modules/user'
|
const domRef = ref<Nullable<HTMLElement>>(null)
|
const { enter, toggle, exit, isFullscreen } = useFullscreen()
|
|
const { toggle: toggleDom } = useFullscreen(domRef)
|
const Timer = ref()
|
const Timer2 = ref()
|
const scrollContainer = ref(null)
|
let scrollInterval = null
|
const isScrolling = ref(false) // 控制是否正在滚动以防止重复触发
|
const eqps = ref([] as dryEquipment[])
|
console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query)
|
const eqp = ref({} as dryEquipment)
|
const eqpNum = ref(router.currentRoute.value.query.num || 1)
|
const tenant = ref(router.currentRoute.value.query.tenant)
|
const userStore = useUserStore()
|
const realData = ref({
|
code: 0,
|
})
|
|
const position = ref(1)
|
//realData.value.tempValue = [0, 100]
|
realData.value.mois = [0.5, 0.35, 0.2]
|
statusGif = 'tmrefeng2'
|
realData.value.herbImage = 'yaocai1.png'
|
// const faultConst = ['急停报警','左前急停','面板急停','出料急停','温度失控','滚筒升','滚筒降','滚筒电机过流','风箱升','风箱降','风箱风机过流']
|
// const warningConst = ['左前门','右前门','左后门','右后门','滚筒不在高位','风箱不在低位','风箱不在高位','加热位传感器','左前风箱高位传感器','右前风箱高位传感器','左后风箱高位传感器','右后风箱高位传感器','左前风箱低位传感器','右前风箱低位传感器','左后风箱低位传感器','右后风箱低位传感器','左前滚筒低位传感器','右前滚筒低位传感器','左后滚筒低位传感器','右后滚筒低位传感器']
|
|
//----------------error----------------
|
const shebeijiting = ref(false)
|
const chuliaojiting = ref(false)
|
const zuoqianjiting = ref(false)
|
const mianbanjiting = ref(false)
|
const fengxiangsheng = ref(false)
|
const fengxiangjiang = ref(false)
|
const fengjiguoliu = ref(false)
|
const guntongsheng = ref(false)
|
const guntongjiang = ref(false)
|
const guntongguoliu = ref(false)
|
const wendubaojing = ref(false)
|
//--------------warning------------
|
const zuoqianmen = ref(false)
|
const zuohoumen = ref(false)
|
const youqianmen = ref(false)
|
const youhoumen = ref(false)
|
const guntongbuzaigaowei = ref(false)
|
const fengxiangbuzaigaowei = ref(false)
|
const fengxiangbuzaidiwei = ref(false)
|
const jiareweichuanganqi = ref(false)
|
const zuoqianfengxianggaowei = ref(false)
|
const zuohoufengxianggaowei = ref(false)
|
const youqianfengxianggaowei = ref(false)
|
const youhoufengxianggaowei = ref(false)
|
const zuoqianfengxiangdiwei = ref(false)
|
const zuohoufengxiangdiwei = ref(false)
|
const youqianfengxiangdiwei = ref(false)
|
const youhoufengxiangdiwei = ref(false)
|
const zuoqianguntongdiwei = ref(false)
|
const zuohouguntongdiwei = ref(false)
|
const youqianguntongdiwei = ref(false)
|
const youhouguntongdiwei = ref(false)
|
|
const faultList = ref([])
|
var chart1: echarts.ECharts
|
var chart2: echarts.ECharts
|
var chart3: echarts.ECharts
|
var chart4: echarts.ECharts
|
// 动态读取图片
|
function getHerbImageUrl(name: string) {
|
return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href
|
}
|
|
// 动态读取图片
|
function getStatusImageUrl(name: string) {
|
if (name == 'zanting') {
|
return new URL(`/src/assets/images/dry/${name}.png`, import.meta.url).href
|
} else {
|
return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href
|
}
|
}
|
function queryEqp() {
|
queryById({ id: router.currentRoute.value.params.id }).then((res) => {
|
// console.log(`output->res`, res)
|
eqp.value = res
|
eqp.value.dryEfficiency = res.dryEfficiency
|
eqp.value.steamConsumption = res.steamConsumption
|
eqp.value.powerConsumption = res.powerConsumption
|
queryRealTime()
|
})
|
}
|
|
function listAllEqp() {
|
listAll({ enable: 'Y' })
|
.then((result) => {
|
//console.log(`output->result`, result)
|
eqps.value = result
|
// result.forEach((item) => {
|
// eqpCodes.push(item.code)
|
// })
|
queryRealTime()
|
})
|
.catch((err) => {
|
//console.log(`output->err`, err)
|
})
|
}
|
|
function initCharts() {
|
let chartDom1: HTMLElement = document.getElementById('chartDom') as HTMLElement
|
let chartDom2: HTMLElement = document.getElementById('chartDom2') as HTMLElement
|
let chartDom3: HTMLElement = document.getElementById('chartDom3') as HTMLElement
|
let chartDom4: HTMLElement = document.getElementById('chartDom4') as HTMLElement
|
|
chart1 = echarts.init(chartDom1)
|
chart2 = echarts.init(chartDom2)
|
chart3 = echarts.init(chartDom3)
|
chart4 = echarts.init(chartDom4)
|
|
const option2 = {
|
grid: {
|
left: '13%', // 左边距，也可以是具体的像素值，例如 50
|
right: '6%', // 右边距
|
top: '13%', // 上边距
|
bottom: '35%', // 设置下边距，例如这里设置为15%
|
},
|
xAxis: {
|
type: 'category',
|
data: [],
|
axisLabel: {
|
rotate: 55, // 这里设置旋转的角度，正值表示顺时针旋转
|
interval: 0, // 强制显示所有标签，不进行间隔显示
|
color: '#fff', // 设置X轴标签字体颜色
|
},
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
color: '#fff', // 设置Y轴标签字体颜色
|
},
|
splitLine: { show: false }, // 不显示Y轴分割线（网格线）
|
},
|
series: [
|
{
|
data: [],
|
type: 'bar',
|
itemStyle: {
|
color: '#3398DB', // 指定柱子的颜色
|
},
|
},
|
],
|
}
|
const option1 = {
|
tooltip: {
|
trigger: 'item',
|
},
|
|
series: [
|
{
|
data: [],
|
type: 'pie',
|
radius: '50%',
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
},
|
},
|
label: {
|
show: true, // 显示标签
|
//position: 'outside', // 标签的位置，可以是 'outside', 'inside', 'center'
|
//formatter: '{b}: {c} ({d}%)', // 标签内容格式化函数或字符串模板
|
fontSize: 12, // 设置字体大小
|
// fontWeight: 'bold', // 设置字体粗细
|
color: '#fff', // 设置字体颜色
|
},
|
},
|
],
|
}
|
const option4 = {
|
grid: {
|
left: '13%', // 左边距，也可以是具体的像素值，例如 50
|
right: '6%', // 右边距
|
top: '13%', // 上边距
|
bottom: '35%', // 设置下边距，例如这里设置为15%
|
},
|
xAxis: {
|
type: 'category',
|
data: [],
|
axisLabel: {
|
rotate: 55, // 这里设置旋转的角度，正值表示顺时针旋转
|
interval: 0, // 强制显示所有标签，不进行间隔显示
|
color: '#fff', // 设置X轴标签字体颜色
|
},
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
color: '#fff', // 设置Y轴标签字体颜色
|
},
|
splitLine: { show: false }, // 不显示Y轴分割线（网格线）
|
},
|
series: [
|
{
|
data: [],
|
type: 'bar',
|
itemStyle: {
|
color: '#3398DB', // 指定柱子的颜色
|
},
|
},
|
],
|
}
|
const option3 = {
|
tooltip: {
|
trigger: 'item',
|
},
|
|
series: [
|
{
|
data: [],
|
type: 'pie',
|
radius: '50%',
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
},
|
},
|
label: {
|
show: true, // 显示标签
|
//position: 'outside', // 标签的位置，可以是 'outside', 'inside', 'center'
|
//formatter: '{b}: {c} ({d}%)', // 标签内容格式化函数或字符串模板
|
fontSize: 12, // 设置字体大小
|
//fontWeight: 'bold', // 设置字体粗细
|
color: '#fff', // 设置字体颜色
|
},
|
},
|
],
|
}
|
|
option1 && chart1.setOption(option1)
|
option2 && chart2.setOption(option2)
|
option3 && chart3.setOption(option3)
|
option4 && chart4.setOption(option4)
|
}
|
|
var shangliaoFlag = false
|
var statusGif = 'tmrefeng2'
|
var statusTxt = '正在干燥'
|
|
function chaiwangban() {
|
statusGif = 'chaiwangban-1'
|
setTimeout(shangliao, 7000)
|
}
|
|
function shangliao() {
|
statusGif = 'shangliao-N'
|
setTimeout(() => {
|
statusGif = 'zhuangwangban'
|
setTimeout(() => {
|
statusGif = 'guanmen1'
|
setTimeout(() => {
|
shangliaoFlag = false
|
}, 4000)
|
}, 7000)
|
}, 15000)
|
}
|
function back() {
|
router.back()
|
}
|
/**
|
* 查询实时数据
|
*/
|
function queryRealTime() {
|
if (eqp.value) {
|
eqp.value = eqps.value[eqpNum.value]
|
// console.log("888",eqp.value);
|
|
let eqpCode = eqp.value.code
|
let queryRealTimeUrl = '/dry/real/getRealTimeData'
|
defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenant.value, machineid: eqpCode } }).then((res) => {
|
if (res && res.trendVo) {
|
console.log(`output->re11s`, res)
|
var totalTime = 0
|
|
/**水滴图含水量 */
|
res.mois = [
|
(res.trendVo.moisture / 100).toFixed(2),
|
(res.trendVo.moisture / 100 / 1.5).toFixed(2),
|
(res.trendVo.moisture / 100 / 3).toFixed(2),
|
]
|
|
/**状态/gif动图 */
|
if (!shangliaoFlag) {
|
if (res.orderStatus == 0) {
|
statusGif = 'zanting'
|
statusTxt = '准备'
|
} else if (res.orderStatus == 1) {
|
shangliaoFlag = true
|
statusGif = 'kaimen1'
|
statusTxt = '上料'
|
setTimeout(chaiwangban, 4000)
|
} else if (res.orderStatus == 2) {
|
// statusTxt = res.level
|
// statusGif = 'zanting'
|
// if (res.level === '准备阶段') {
|
// console.log("准备阶段" + statusGif);
|
// statusGif = 'zanting'
|
// } else if (res.level === '干燥阶段' || res.level === '正在干燥') {
|
// statusGif = 'tmrefeng2'
|
// } else if (res.level === '翻料阶段') {
|
// statusGif = 'fanliao-N'
|
// } else if (res.level === '出料阶段') {
|
// statusGif = 'chuliao-N'
|
// }
|
|
// if (res.state_fan == 1) {
|
statusGif = 'tmrefeng2'
|
statusTxt = '正在干燥'
|
// }
|
|
// if (res.state_roller == 4) {
|
// statusGif = 'fanliao-N'
|
// statusTxt = '正在翻料'
|
// }
|
|
// if (res.state_roller == 5) {
|
// statusGif = 'chuliao-N'
|
// statusTxt = '正在出料'
|
// }
|
|
// if (res.state_windbox == 2 || res.state_windbox == 3) {
|
// statusGif = 'fengxiangsheng-1'
|
// statusTxt = '正在干燥'
|
// }
|
} else if (res.orderStatus == 3) {
|
statusGif = 'zanting'
|
statusTxt = '暂停'
|
} else if (res.orderStatus == 4) {
|
statusGif = 'zanting'
|
statusTxt = '干燥完成'
|
}
|
}
|
res.herbImage = 'yaocai1.png'
|
|
if (res.herbName == '白花蛇舌草') {
|
res.herbImage = 'baihuasheshecao.png'
|
} else if (res.herbName == '糥稻根') {
|
res.herbImage = 'nuodaogen.png'
|
} else if (res.herbName == '淫羊藿') {
|
res.herbImage = 'yinyanghuo.png'
|
} else if (res.herbName == '马齿苋') {
|
res.herbImage = 'machixian.png'
|
} else if (res.herbName == '墨旱莲') {
|
res.herbImage = 'mohanlian.png'
|
} else if (res.herbName == '桑白皮') {
|
res.herbImage = 'sangbaipi.png'
|
}
|
|
res.isError = false
|
if (res.fault) {
|
res.isError = true
|
res.errorMsg = res.fault;
|
const faults = res.fault;
|
console.log('errorMsg:', res.fault)
|
if (faults.includes('急停报警')) {
|
shebeijiting.value = true;
|
} else {
|
shebeijiting.value = false;
|
}
|
if (faults.includes('左前急停')) {
|
zuoqianjiting.value = true;
|
} else {
|
zuoqianjiting.value = false;
|
}
|
if (faults.includes('面板急停')) {
|
mianbanjiting.value = true;
|
} else {
|
mianbanjiting.value = false;
|
}
|
if (faults.includes('出料急停')) {
|
chuliaojiting.value = true;
|
} else {
|
chuliaojiting.value = false;
|
}
|
if (faults.includes('温度失控')) {
|
wendubaojing.value = true;
|
} else {
|
wendubaojing.value = false;
|
}
|
if (faults.includes('滚筒升')) {
|
guntongsheng.value = true;
|
} else {
|
guntongjiang.value = false;
|
}
|
if (faults.includes('滚筒降')) {
|
guntongjiang.value = true;
|
} else {
|
guntongjiang.value = false;
|
}
|
if (faults.includes('滚筒电机过流')) {
|
guntongguoliu.value = true;
|
} else {
|
guntongguoliu.value = false;
|
}
|
if (faults.includes('风箱升')) {
|
fengxiangsheng.value = true;
|
} else {
|
fengxiangsheng.value = false;
|
}
|
if (faults.includes('风箱降')) {
|
fengxiangjiang.value = true;
|
} else {
|
fengxiangjiang.value = false;
|
}
|
if (faults.includes('风箱风机过流')) {
|
fengjiguoliu.value = true;
|
} else {
|
fengjiguoliu.value = false;
|
}
|
}
|
else {
|
shebeijiting.value = false
|
chuliaojiting.value = false
|
zuoqianjiting.value = false
|
mianbanjiting.value = false
|
fengxiangsheng.value = false
|
fengxiangjiang.value = false
|
fengjiguoliu.value = false
|
guntongsheng.value = false
|
guntongjiang.value = false
|
guntongguoliu.value = false
|
wendubaojing.value = false
|
}
|
|
if (res.warning) {
|
res.isWarning = true
|
res.warnMsg = res.warning
|
const warnings = res.warning;
|
console.log('warnMsg:', res.warning)
|
if (warnings.includes('左前门')) {
|
zuoqianmen.value = true;
|
} else {
|
zuoqianmen.value = false;
|
}
|
if (warnings.includes('右前门')) {
|
youqianmen.value = true;
|
} else {
|
youqianmen.value = false;
|
}
|
if (warnings.includes('左后门')) {
|
zuohoumen.value = true;
|
} else {
|
zuohoumen.value = false;
|
}
|
if (warnings.includes('右后门')) {
|
youhoumen.value = true;
|
} else {
|
youhoumen.value = false;
|
}
|
if (warnings.includes('滚筒不在高位')) {
|
guntongbuzaigaowei.value = true;
|
} else {
|
guntongbuzaigaowei.value = false;
|
}
|
if (warnings.includes('风箱不在低位')) {
|
fengxiangbuzaidiwei.value = true;
|
} else {
|
fengxiangbuzaidiwei.value = false;
|
}
|
if (warnings.includes('风箱不在高位')) {
|
fengxiangbuzaigaowei.value = true;
|
} else {
|
fengxiangbuzaigaowei.value = false;
|
}
|
if (warnings.includes('加热位传感器')) {
|
jiareweichuanganqi.value = true;
|
} else {
|
jiareweichuanganqi.value = false;
|
}
|
if (warnings.includes('左前风箱高位传感器')) {
|
zuoqianfengxianggaowei.value = true;
|
} else {
|
zuoqianfengxianggaowei.value = false;
|
}
|
if (warnings.includes('右前风箱高位传感器')) {
|
youqianfengxianggaowei.value = true;
|
} else {
|
youqianfengxianggaowei.value = false;
|
}
|
if (warnings.includes('左后风箱高位传感器')) {
|
zuohoufengxianggaowei.value = true;
|
} else {
|
zuohoufengxianggaowei.value = false;
|
}
|
if (warnings.includes('右后风箱高位传感器')) {
|
youhoufengxianggaowei.value = true;
|
} else {
|
youhoufengxianggaowei.value = false;
|
}
|
if (warnings.includes('左前风箱低位传感器')) {
|
zuoqianfengxiangdiwei.value = true;
|
} else {
|
zuoqianfengxiangdiwei.value = false;
|
}
|
if (warnings.includes('右前风箱低位传感器')) {
|
youqianfengxiangdiwei.value = true;
|
} else {
|
youqianfengxiangdiwei.value = false;
|
}
|
if (warnings.includes('左后风箱低位传感器')) {
|
zuohoufengxiangdiwei.value = true;
|
} else {
|
zuohoufengxiangdiwei.value = false;
|
}
|
if (warnings.includes('右后风箱低位传感器')) {
|
youhoufengxiangdiwei.value = true;
|
} else {
|
youhoufengxiangdiwei.value = false;
|
}
|
if (warnings.includes('左前滚筒低位传感器')) {
|
zuoqianguntongdiwei.value = true;
|
} else {
|
zuoqianguntongdiwei.value = false;
|
}
|
if (warnings.includes('右前滚筒低位传感器')) {
|
youqianguntongdiwei.value = true;
|
} else {
|
youqianguntongdiwei.value = false;
|
}
|
if (warnings.includes('左后滚筒低位传感器')) {
|
zuohouguntongdiwei.value = true;
|
} else {
|
zuohouguntongdiwei.value = false;
|
}
|
if (warnings.includes('右后滚筒低位传感器')) {
|
youhouguntongdiwei.value = true;
|
} else {
|
youhouguntongdiwei.value = false;
|
}
|
}
|
else {
|
zuoqianmen.value = false;
|
zuohoumen.value = false;
|
youqianmen.value = false;
|
youhoumen.value = false;
|
guntongbuzaigaowei.value = false;
|
fengxiangbuzaigaowei.value = false;
|
fengxiangbuzaidiwei.value = false;
|
jiareweichuanganqi.value = false;
|
zuoqianfengxianggaowei.value = false;
|
zuohoufengxianggaowei.value = false;
|
youqianfengxianggaowei.value = false;
|
youhoufengxianggaowei.value = false;
|
zuoqianfengxiangdiwei.value = false;
|
zuohoufengxiangdiwei.value = false;
|
youqianfengxiangdiwei.value = false;
|
youhoufengxiangdiwei.value = false;
|
zuoqianguntongdiwei.value = false;
|
zuohouguntongdiwei.value = false;
|
youqianguntongdiwei.value = false;
|
youhouguntongdiwei.value = false;
|
}
|
getRealFault()
|
} else {
|
res = {
|
mois: [],
|
gif: 'tmrefeng2',
|
herbImage: 'yaocai1.png',
|
}
|
}
|
|
res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0
|
// console.log(`output->res`, res.detailList[res.detailList.length-1])
|
realData.value = res
|
|
})
|
}
|
}
|
|
/**
|
* 查询当前工单故障明细
|
*/
|
function getRealFault() {
|
return new Promise(() => {
|
queryByOrderId({ orderId: realData.value.code, tenantId: tenant.value }).then((res) => {
|
const faultStats = {}
|
const warningStats = {}
|
// 循环列表，根据结束时间和开始时间，计算故障时长
|
res.forEach((item) => {
|
const faultName = item.faultName
|
item.totalTime = new Date(item.endTime) - new Date(item.startTime)
|
item.totalTime = item.totalTime / 1000
|
|
if (item.faultType === 1) {
|
if (!faultStats[faultName]) {
|
faultStats[faultName] = {
|
count: 0,
|
totalDuration: 0, // 毫秒
|
}
|
}
|
// 更新统计数据
|
faultStats[faultName].count += 1
|
faultStats[faultName].totalDuration += item.totalTime
|
} else if (item.faultType === 2) {
|
if (!warningStats[faultName]) {
|
warningStats[faultName] = {
|
count: 0,
|
totalDuration: 0, // 毫秒
|
}
|
}
|
// 更新统计数据
|
warningStats[faultName].count += 1
|
warningStats[faultName].totalDuration += item.totalTime
|
}
|
})
|
console.log(`output->res`, res)
|
faultList.value = res
|
const prepareFault = prepareData(faultStats)
|
const prepareWarning = prepareData(warningStats)
|
console.log('prePareFault', prepareFault)
|
console.log('prePareWarning', prepareWarning)
|
chart1.setOption({
|
|
series: [{ data: prepareFault.duration }],
|
})
|
chart2.setOption({
|
xAxis: { data: prepareFault.faultNames },
|
series: [{ data: prepareFault.count }],
|
})
|
chart3.setOption({
|
series: [{ data: prepareWarning.duration }],
|
})
|
chart4.setOption({
|
xAxis: { data: prepareWarning.faultNames },
|
series: [{ data: prepareWarning.count }],
|
})
|
})
|
})
|
}
|
// 将统计数据转换为适合ECharts使用的格式
|
function prepareData(stats) {
|
const faultNames = Object.keys(stats)
|
const durationSorted = faultNames.sort((a, b) => stats[b].totalDuration - stats[a].totalDuration)
|
const countSorted = faultNames.sort((a, b) => stats[b].count - stats[a].count)
|
|
return {
|
faultNames: faultNames,
|
duration: durationSorted.map((name) => ({ name, value: stats[name].totalDuration })),
|
count: countSorted.map((name) => ({ name, value: stats[name].count })),
|
}
|
}
|
var move = true
|
function moveImage() {
|
if (move) {
|
position.value -= 0.3
|
} else {
|
position.value += 0.3
|
}
|
if (position.value < -240) {
|
move = false
|
}
|
if (position.value > -1) {
|
move = true
|
}
|
}
|
|
// 开始自动滚动
|
const startAutoScroll = () => {
|
console.log('开始自动滚动')
|
scrollInterval = setInterval(() => {
|
if (isScrolling.value) return
|
isScrolling.value = true
|
|
const container = scrollContainer.value
|
|
// 滚动容器
|
container.scrollTop += 1
|
// 当滚动到底部时，重置到顶部
|
if (container.scrollTop >= container.scrollHeight - container.clientHeight) {
|
setTimeout(() => {
|
container.scrollTop = 0
|
isScrolling.value = false // 立即允许下一次滚动开始
|
return
|
}, 2000)
|
}
|
if (container.scrollTop < container.scrollHeight - container.clientHeight) {
|
setTimeout(() => {
|
isScrolling.value = false
|
}, 20) // 确保每次滚动间隔足够长，避免连续触发
|
}
|
}, 20) // 控制滚动速度，数值越小滚动越快
|
|
}
|
|
// 停止自动滚动
|
const stopAutoScroll = () => {
|
if (scrollInterval) {
|
clearInterval(scrollInterval)
|
}
|
}
|
|
listAllEqp()
|
//queryEqp()
|
// DOM挂载完成后渲染图表
|
onMounted(() => {
|
Timer.value = setInterval(queryRealTime, 3000)
|
Timer2.value = setInterval(moveImage, 50)
|
startAutoScroll()
|
setTimeout(initCharts, 500)
|
})
|
|
onUnmounted(() => {
|
clearInterval(Timer.value)
|
clearInterval(Timer2.value)
|
Timer.value = null
|
Timer2.value = null
|
stopAutoScroll()
|
})
|
</script>
|
|
<style scoped>
|
.eqpBox {
|
height: 100%;
|
}
|
.eqpRow {
|
}
|
.eqpImage {
|
height: 1080px;
|
width: 1920px;
|
background-image: url(/src/assets/images/dry/bg.png);
|
background-repeat: no-repeat;
|
color: white;
|
/*background-position: 160px 280px; */
|
/* background-color: red; */
|
background-size: 120%;
|
padding: 10px;
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
}
|
|
.leftEqp {
|
height: 1080px;
|
width: 1200px;
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
|
/* background-color: white;
|
background-image: url(/src/assets/images/dry/shebei1.png);
|
background-repeat: no-repeat;
|
background-size: 125%;
|
border-radius: 10px;
|
background-position: -119px 293px; */
|
}
|
|
.leftTop {
|
height: 1060px;
|
width: 1200px;
|
display: flex;
|
justify-content: center;
|
align-content: flex-start;
|
background-image: url(/src/assets/images/dry/ganzaoji-x.png);
|
background-repeat: no-repeat;
|
background-size: 86%;
|
border-radius: 10px;
|
flex-wrap: wrap;
|
background-position: 85px 279px;
|
}
|
.leftMid {
|
width: 850px;
|
height: 300px;
|
/* border: 1px solid; */
|
margin-top: 10px;
|
border-radius: 10px;
|
/* background: white; */
|
}
|
.mainInfo {
|
line-height: 33px;
|
padding-left: 10px;
|
font-size: 30px;
|
color: white;
|
}
|
.subhead {
|
color: #a19f9c;
|
font-size: 16px;
|
padding-left: 10px;
|
}
|
|
.mainInfo2 {
|
line-height: 20px;
|
padding-left: 0px;
|
font-size: 16px;
|
}
|
.subhead2 {
|
color: #a19f9c;
|
font-size: 10px;
|
padding-left: 0px;
|
}
|
.zhengqi {
|
height: 180px;
|
width: 200px;
|
background-image: url(/src/assets/images/dry/liuliangji.png);
|
background-repeat: no-repeat;
|
background-size: 160px;
|
/* border-radius: 10px; */
|
background-position: 17px -6px;
|
}
|
|
.liuliangji {
|
}
|
.leftData {
|
height: 250px;
|
width: 120px;
|
}
|
.rightChart {
|
height: 270px;
|
width: 170px;
|
margin-top: -30px;
|
}
|
.leftTop0 {
|
height: 260px;
|
width: 1200px;
|
display: flex;
|
justify-content: center;
|
align-content: flex-start;
|
flex-wrap: wrap;
|
}
|
.leftTop1 {
|
width: 360px;
|
height: 200px;
|
text-align: center;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 30px;
|
color: #727272;
|
}
|
.leftTop2 {
|
width: 250px;
|
height: 200px;
|
text-align: center;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 30px;
|
color: #727272;
|
}
|
.leftTop3 {
|
width: 340px;
|
height: 200px;
|
/* background-image: url(/src/assets/images/dry/fanliao.gif); */
|
background-repeat: no-repeat;
|
background-position: 0px 20px;
|
background-size: 300px;
|
border-radius: 50px;
|
}
|
|
.eqpStatus {
|
width: 848px;
|
}
|
.rightInfo {
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
height: 1060px;
|
width: 700px;
|
}
|
|
.rightTop {
|
display: flex;
|
height: 340px;
|
padding-left: 10px;
|
}
|
.rightTwo {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.infoChart {
|
width: 340px;
|
height: 350px;
|
/* background: white; */
|
margin-left: 10px;
|
margin-top: 10px;
|
border-radius: 10px;
|
}
|
.chartTittle {
|
width: 340px;
|
height: 30px;
|
font-size: 16px;
|
display: flex;
|
justify-content: space-between;
|
padding: 15px 15px;
|
}
|
.chartInfo {
|
width: 60px;
|
height: 180px;
|
}
|
|
.compareBar {
|
width: 55px;
|
height: 140px;
|
}
|
.margintop-30 {
|
margin-top: -30px;
|
}
|
|
.barTop {
|
width: 55px;
|
height: 30px;
|
}
|
.barBack {
|
width: 30px;
|
height: 100px;
|
/* border: 1px solid black; */
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-end;
|
}
|
.barDiv {
|
width: 100%;
|
|
background-color: #1595ea;
|
}
|
.bad {
|
background-color: #973535;
|
}
|
.rightLabel {
|
width: 110px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.label {
|
color: white;
|
text-align: center;
|
width: 50px;
|
border-radius: 4px;
|
height: 20px;
|
font-size: 10px;
|
line-height: 21px;
|
}
|
.good {
|
background-color: #0d6e24;
|
}
|
|
.mainInfo3 {
|
font-size: 24px;
|
}
|
.herbInfo {
|
width: 340px;
|
height: 440px;
|
color: #727272;
|
}
|
|
.curEqp {
|
width: 340px;
|
height: 170px;
|
|
/* background: white;
|
border-radius: 10px; */
|
}
|
.curHerb {
|
margin-top: 10px;
|
width: 340px;
|
height: 260px;
|
/* background: white;
|
border-radius: 10px; */
|
|
background-repeat: no-repeat;
|
background-size: 200px;
|
background-position: 0px 10px;
|
}
|
.tempMoisChart {
|
width: 690px;
|
height: 340px;
|
/* background: white; */
|
|
padding: 20px;
|
border-radius: 10px;
|
}
|
.topLeft {
|
margin: 20px 40px 60px 20px;
|
padding: 15px;
|
/* background: white; */
|
border-radius: 10px;
|
height: 325px;
|
width: 440px;
|
/* background-image: url(/src/assets/images/dry/yaocai.jpg); */
|
background-repeat: no-repeat;
|
background-size: 164px 132px;
|
background-position: 239px 65px;
|
display: flex;
|
}
|
.topMid {
|
margin: 20px 20px 60px 40px;
|
/* background: white; */
|
border-radius: 10px;
|
background-image: url(/src/assets/images/dry/fanliao.gif);
|
background-repeat: no-repeat;
|
background-position: 0px 20px;
|
background-size: 400px;
|
width: 400px;
|
|
padding: 20px;
|
}
|
.topRight {
|
margin: 20px 20px 60px 20px;
|
/* background: white; */
|
border-radius: 10px;
|
width: 700px;
|
padding: 20px;
|
}
|
.midLeft {
|
height: 450px;
|
width: 600px;
|
display: flex;
|
padding: 0 20px 20px 20px;
|
}
|
.midMid {
|
width: 500px;
|
padding-top: 50px;
|
}
|
|
.midRight {
|
background-image: url(/src/assets/images/dry/fengjixz.gif);
|
background-repeat: no-repeat;
|
background-position: 150px 260px;
|
background-size: 120px 120px;
|
width: 600px;
|
}
|
|
.shangJianTou {
|
margin-left: 140px;
|
width: 70px;
|
height: 100px;
|
background-image: url(/src/assets/images/dry/shangjiantoutou.gif);
|
background-repeat: no-repeat;
|
background-position: 0px 0px;
|
background-size: 70px 100px;
|
}
|
|
.zoujiantou {
|
margin-left: 225px;
|
margin-top: 30px;
|
width: 100px;
|
height: 70px;
|
background-image: url(/src/assets/images/dry/zuojiantou.gif);
|
background-repeat: no-repeat;
|
background-position: 0px 0px;
|
background-size: 100px 70px;
|
}
|
.fault {
|
padding: 10px;
|
height: 60px;
|
font-size: 26px;
|
width: 100%;
|
text-align: right;
|
color: red;
|
}
|
.eqpName {
|
padding: 20px;
|
|
height: 160px;
|
}
|
|
.formula {
|
display: flex;
|
width: 340px;
|
height: 40px;
|
padding: 0 20px;
|
justify-content: space-around;
|
justify-items: center;
|
}
|
|
.formulaItem {
|
display: flex;
|
justify-content: center;
|
width: 85px;
|
height: 40px;
|
}
|
|
.eqpInfoText {
|
font-size: 18px;
|
font-weight: bold;
|
}
|
|
:deep() .ant-slider-mark-text {
|
padding-left: 15px;
|
font-size: 10px;
|
}
|
:deep() .ant-slider-mark-text::before {
|
content: '';
|
display: block;
|
width: 6px;
|
height: 1px;
|
background-color: #1890ff;
|
|
position: absolute;
|
top: 10px;
|
left: 0px;
|
}
|
:deep() .ant-slider-rail {
|
width: 10px !important;
|
border-radius: 6px 6px 0 0;
|
background: linear-gradient(to top, #ce0000 0%, #ce0000 40%, #ce0000 75%, rgb(160, 160, 160) 100%);
|
}
|
:deep() .ant-slider-track {
|
background: rgb(216, 216, 216);
|
|
height: 20px;
|
width: 10px !important;
|
border-radius: 6px 6px 0 0;
|
}
|
:deep() .ant-slider-track:hover {
|
}
|
:deep() .ant-slider-handle {
|
display: none;
|
}
|
:deep() .ant-slider-dot {
|
display: none;
|
}
|
:deep() .ant-slider-step {
|
width: 10px !important;
|
}
|
:deep() .ant-slider-step > :first-child {
|
display: block !important;
|
width: 30px !important;
|
height: 30px !important;
|
bottom: -26px !important;
|
left: -6px;
|
border: none;
|
background: #ce0000;
|
}
|
:deep() .progress {
|
padding: 25px 25px;
|
|
width: 360px;
|
display: flex;
|
}
|
:deep() .ant-progress-bg {
|
height: 25px !important;
|
}
|
.outDiv {
|
display: flex;
|
justify-content: center;
|
justify-items: center;
|
}
|
.blingbling {
|
-webkit-animation: scaleout 1s infinite ease-in-out;
|
animation: scaleout 1s infinite ease-in-out;
|
}
|
.center {
|
display: flex;
|
justify-content: center;
|
justify-items: center;
|
align-items: center;
|
flex-wrap: wrap;
|
text-align: center;
|
}
|
|
.centerText {
|
width: 100%;
|
text-align: center;
|
}
|
|
@-webkit-keyframes scaleout {
|
0% {
|
-webkit-transform: scale(1);
|
}
|
|
100% {
|
-webkit-transform: scale(1.1);
|
opacity: 0;
|
}
|
}
|
|
@keyframes scaleout {
|
0% {
|
transform: scale(1);
|
-webkit-transform: scale(1);
|
}
|
|
100% {
|
transform: scale(1.1);
|
-webkit-transform: scale(1.1);
|
opacity: 0;
|
}
|
}
|
.error-div {
|
position: absolute;
|
display: flex;
|
align-items: center;
|
}
|
.error-marker {
|
width: 18px;
|
height: 18px;
|
background: red;
|
border-radius: 50%;
|
}
|
.error-msg {
|
margin-left: 6px;
|
height: 24px;
|
background: gray;
|
border-radius: 5px;
|
font-weight: bold;
|
color: red;
|
}
|
.warn-marker {
|
width: 18px;
|
height: 18px;
|
background: orange;
|
border-radius: 50%;
|
}
|
.warn-msg {
|
margin-left: 6px;
|
height: 24px;
|
background: gray;
|
border-radius: 5px;
|
font-weight: bold;
|
color: orange;
|
}
|
.scroll-container {
|
height: 280px; /* 设置你想要的高度 */
|
overflow: hidden;
|
}
|
</style>
|
