<template>
|
<dv-full-screen-container>
|
<div class="eqpBox">
|
<div class="eqpRow">
|
<div class="eqpImage" :style="{ 'background-position': position + 'px' }">
|
<div class="leftEqp">
|
<div style="width: 350px">
|
<div class="herbInfo">
|
<dv-border-box7 class="curEqp">
|
<div style="display: flex">
|
<div style="padding-top: 20px; padding-left: 10px" @click="back">
|
<Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" />
|
</div>
|
<div class="eqpName" style="text-align: right" @click="changeEqp">
|
<div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div>
|
<div class="subhead">{{ eqp?.type }}</div>
|
<dv-decoration-1 style="width: 240px; height: 90px; margin-left: 20px" />
|
<!-- 设备：{{ eqp.name }}</div>
|
<div class="eqpName">型号：{{ eqp.type }}</div> -->
|
</div>
|
</div>
|
</dv-border-box7>
|
<dv-border-box7 class="curHerb" :style="{ 'background-image': 'url(' + getHerbImageUrl(realData?.herbImage) + ')' }">
|
<div class="eqpName" style="margin-left: 156px; height: 190px">
|
<div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
|
<div class="subhead">干燥配方</div>
|
</div>
|
<div class="formula">
|
<div class="formulaItem">
|
<Icon style="color: powderblue" icon="la:box" :size="38" />
|
<div>
|
<div class="mainInfo2">{{ realData?.feed || 0 }} 筐</div>
|
<div class="subhead2">投料量</div>
|
</div>
|
</div>
|
<div class="formulaItem">
|
<Icon style="color: red" icon="bx:wind" :size="35" />
|
<div>
|
<div class="mainInfo2">{{ realData?.windTemp || 0 }} °C</div>
|
<div class="subhead2">热风</div>
|
</div>
|
</div>
|
<div class="formulaItem">
|
<Icon style="color: green" icon="tabler:target-arrow" :size="35" />
|
<div>
|
<div class="mainInfo2">{{ realData?.target || 0 }} %</div>
|
<div class="subhead2">目标</div>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="eqpName">{{ realData?.herbName }}</div>
|
<div class="eqpName">{{ realData?.feed }} 筐</div> -->
|
</dv-border-box7>
|
</div>
|
<!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;">
|
<div class="chartTittle">风机频率</div>
|
<div class="outDiv" style="padding-top: 10px">
|
<div id="fanFreq" style="width: 240px; height: 240px"></div>
|
</div>
|
</dv-border-box7> -->
|
<dv-border-box7 class="infoChart" style="margin-left: 0px">
|
<div class="chartTittle">含水率</div>
|
<div class="outDiv" style="padding-top: 20px">
|
<div class="leftData">
|
<div class="center" style="height: 50%">
|
<div class="centerText">
|
<div class="mainInfo3"
|
><span>{{ realData?.target || 0 }}</span> %
|
</div>
|
<div class="subhead2">目标含水率</div>
|
</div>
|
</div>
|
<div class="center" style="height: 50%">
|
<div>
|
<div class="mainInfo3"
|
><span>{{ realData?.initial || 0 }}</span> %</div
|
>
|
<div class="subhead2">来料含水率</div>
|
</div>
|
</div>
|
</div>
|
<div id="moisture" style="width: 170px; height: 170px"></div>
|
</div>
|
<div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold">实时含水率</div>
|
</dv-border-box7>
|
</div>
|
<dv-border-box7 class="leftTop">
|
<div class="leftTop0">
|
<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 v-if="realData?.warning" style=" -->
|
<!-- margin-left: 100px;-->
|
<!-- font-size: 22px;-->
|
<!-- background: sandybrown;-->
|
|
<!-- border-radius: 10px;-->
|
<!-- line-height: 25px;-->
|
<!-- max-width: 500px;-->
|
<!-- padding: 15px;-->
|
<!-- font-weight: bold;" >-->
|
<!-- {{ realData?.warnMsg }}-->
|
<!-- </div>-->
|
|
|
|
<!-- <div-->
|
<!-- v-if="realData?.isError"-->
|
<!-- class="eqpInfoText blingbling outDiv"-->
|
<!-- style="-->
|
<!-- position: absolute;-->
|
<!-- font-size: 30px;-->
|
<!-- max-height: 200px;-->
|
<!-- max-width: 720px;-->
|
<!-- margin-top: 300px;-->
|
<!-- border-radius: 10px;-->
|
<!-- background-color: #ce0000;-->
|
<!-- color: white;-->
|
<!-- padding: 10px 30px;-->
|
<!-- "-->
|
<!-- >-->
|
<!-- <div class="outDiv">-->
|
<!-- <div><Icon icon="bx:error" :size="30" /> </div>-->
|
<!-- <div-->
|
<!-- ><span>{{ realData?.errorMsg }}</span></div-->
|
<!-- >-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
</div>
|
<div style="width: 848px; height: 485px; position: absolute;" @click="showFault">
|
<div v-if="true | zuoqianjiting" class="error-div" style=" top:309px; left:418px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style="width: 70px;">
|
左前急停
|
</div>
|
</div>
|
<div v-if="true | shebeijiting" class="error-div" style=" top:111px; left:484px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style=" width: 106px;">
|
设备急停（总）
|
</div>
|
</div>
|
<div v-if="true | chuliaojiting" class="error-div" style=" top:300px; left:129px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style=" width: 70px;">
|
出料急停
|
</div>
|
</div>
|
<div v-if="true | mianbanjiting" class="error-div" style=" top:258px; left:659px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style=" width: 70px;">
|
面板急停
|
</div>
|
</div>
|
<div v-if="true | fengxiangsheng" class="error-div" style=" top:294px; left:517px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style=" width: 86px;">
|
风箱升异常
|
</div>
|
</div>
|
<div v-if="true | fengxiangjiang" class="error-div" style=" top:319px; left:517px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style=" width: 86px;">
|
风箱降异常
|
</div>
|
</div>
|
<div v-if="true | fengjiguoliu" class="error-div" style=" top:335px; left:655px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style=" width: 70px;">
|
风机过流
|
</div>
|
</div>
|
<div v-if="true | guntongsheng" class="error-div" style=" top:198px; left:517px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style=" width: 86px;">
|
滚筒升异常
|
</div>
|
</div>
|
<div v-if="true | guntongjiang" class="error-div" style=" top:223px; left:517px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style=" width: 86px;">
|
滚筒降异常
|
</div>
|
</div>
|
<div v-if="true | guntongguoliu" class="error-div" style=" top:209px; left:642px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style=" width: 70px;">
|
滚筒过流
|
</div>
|
</div>
|
<div v-if="true | wendubaojing" class="error-div" style=" top:234px; left:659px">
|
<div class="blingbling error-marker" ></div>
|
<div class="error-msg" style=" width: 70px;">
|
温度报警
|
</div>
|
</div>
|
|
<div v-if="true | zuoqianmen" class="error-div" style=" top:388px; left:415px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 80px;">
|
左前门报警
|
</div>
|
</div>
|
<div v-if="true | zuohoumen" class="error-div" style=" top:367px; left:587px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 80px;">
|
左后门报警
|
</div>
|
</div>
|
<div v-if="true | youqianmen" class="error-div" style=" top:388px; left:284px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 80px;">
|
右前门报警
|
</div>
|
</div>
|
<div v-if="true | youhoumen" class="error-div" style=" top:367px; left:478px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 80px;">
|
右后门报警
|
</div>
|
</div>
|
|
<div v-if="true | guntongbuzaigaowei" class="error-div" style=" top:173px; left:517px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 100px;">
|
滚筒不在高位
|
</div>
|
</div>
|
<div v-if="true | fengxiangbuzaigaowei" class="error-div" style=" top:269px; left:517px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 100px;">
|
风箱不在高位
|
</div>
|
</div>
|
<div v-if="true | fengxiangbuzaidiwei" class="error-div" style=" top:343px; left:517px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 100px;">
|
风箱不在低位
|
</div>
|
</div>
|
<div v-if="true | jiareweichuanganqi" class="error-div" style=" top:283px; left:642px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
加热位传感器报警
|
</div>
|
</div>
|
<div v-if="true | zuoqianfengxianggaowei" class="error-div" style=" top:334px; left:362px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
左前风箱不在高位
|
</div>
|
</div>
|
<div v-if="true | zuoqianfengxiangdiwei" class="error-div" style=" top:334px; left:362px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
左前风箱不在低位
|
</div>
|
</div>
|
<div v-if="true | zuohoufengxianggaowei" class="error-div" style=" top:309px; left:642px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
左后风箱不在高位
|
</div>
|
</div>
|
<div v-if="true | zuohoufengxiangdiwei" class="error-div" style=" top:309px; left:642px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
左后风箱不在低位
|
</div>
|
</div>
|
<div v-if="true | youqianfengxianggaowei" class="error-div" style=" top:272px; left:300px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
右前风箱不在高位
|
</div>
|
</div>
|
<div v-if="true | youqianfengxiangdiwei" class="error-div" style=" top:272px; left:300px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
右前风箱不在低位
|
</div>
|
</div>
|
<div v-if="true | youhoufengxianggaowei" class="error-div" style=" top:246px; left:506px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
右后风箱不在高位
|
</div>
|
</div>
|
<div v-if="true | youhoufengxiangdiwei" class="error-div" style=" top:246px; left:506px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
右后风箱不在低位
|
</div>
|
</div>
|
<div v-if="true | zuoqianguntongdiwei" class="error-div" style=" top:175px; left:358px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
左前滚筒不在低位
|
</div>
|
</div>
|
<div v-if="true | zuohouguntongdiwei" class="error-div" style=" top:158px; left:643px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
左后滚筒不在低位
|
</div>
|
</div>
|
<div v-if="true | youqianguntongdiwei" class="error-div" style=" top:150px; left:268px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
右前滚筒不在低位
|
</div>
|
</div>
|
<div v-if="true | youhouguntongdiwei" class="error-div" style=" top:135px; left:506px">
|
<div class="blingbling warn-marker" ></div>
|
<div class="warn-msg" style=" width: 126px;">
|
右后滚筒不在低位
|
</div>
|
</div>
|
|
</div>
|
</dv-border-box7>
|
<dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px">
|
<div class="chartTittle">风箱温度</div>
|
<div class="outDiv">
|
<div id="bellowsTemp" style="width: 230px; height: 230px">
|
<Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
|
</div>
|
</div>
|
</dv-border-box7>
|
<dv-border-box7 class="leftMid">
|
<div class="chartTittle">实时进度</div>
|
<div id="efficiencyLine" style="width: 848px; height: 180px; margin-top: -10px"></div>
|
<div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between">
|
<div style="width: 100px; height: 20px">{{ realData?.dryTime | 0 }} min</div>
|
<div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
|
</div>
|
<div id="progressBar" style="width: 848px; height: 80px"></div>
|
</dv-border-box7>
|
|
<!-- <div class="outDiv">
|
<div style="height: 100px; width: 400px">
|
<Progress
|
:stroke-color="{
|
from: '#108ee9',
|
to: '#87d068',
|
}"
|
:percent="realData?.percent"
|
status="active"
|
:show-info="false"
|
/>
|
<div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold">
|
<span>干燥 52 Min</span>
|
<span>预计 120 Min</span>
|
</div>
|
</div>
|
</div> -->
|
</div>
|
<div class="rightInfo">
|
<div class="rightTop">
|
<dv-border-box7 class="tempMoisChart">
|
<div :id="'moisChart'" style="width: 690px; height: 420px"></div>
|
</dv-border-box7>
|
</div>
|
<div class="rightTwo">
|
<dv-border-box7 class="infoChart">
|
<div class="chartTittle">
|
干燥效率(kg/h)
|
<div class="rightLabel">
|
<div class="label good">>{{ realData?.efficAvg?.toFixed(2) }} 优 </div>
|
<div class="label bad"><{{ ((realData?.efficAvg|0) * 0.9)?.toFixed(2) }} 差</div>
|
</div>
|
</div>
|
<div class="outDiv" style="padding-top: 20px">
|
<div class="leftData">
|
<div class="center" style="height: 50%">
|
<div class="centerText">
|
<div class="mainInfo3"
|
><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span> kg
|
</div>
|
<div class="subhead2">水分蒸发</div>
|
</div>
|
</div>
|
<div class="center" style="height: 50%">
|
<div>
|
<div class="mainInfo3">{{ realData?.dryTime | 0 }} min</div>
|
<div class="subhead2">干燥用时</div>
|
</div>
|
</div>
|
</div>
|
<div class="rightChart center">
|
<div class="center compareBar">
|
<div class="barTop">{{ realData?.efficAvg?.toFixed(2) }}</div>
|
<div class="barBack">
|
<div class="barDiv" :style="{ height: realData?.xlsHeight }"></div>
|
</div>
|
<div style="line-height: 20px">
|
额定
|
<br />
|
效率
|
</div>
|
</div>
|
<div class="center compareBar">
|
<div class="barTop">{{ realData?.xiaolv?.toFixed(2) || 0 }}</div>
|
<div class="barBack">
|
<div
|
class="barDiv"
|
:class="{ good: realData?.xlgood, bad: realData?.xlbad }"
|
:style="[realData?.xlrHeight && { height: realData?.xlrHeight }]"
|
>
|
</div>
|
</div>
|
<div style="line-height: 20px">
|
实时
|
<br />
|
效率
|
</div>
|
</div>
|
</div>
|
</div>
|
</dv-border-box7>
|
|
<dv-border-box7 class="infoChart">
|
<div class="chartTittle"
|
>蒸汽消耗(m³/kg)
|
<div class="rightLabel">
|
<div class="label bad">>{{ realData?.steamAvg?.toFixed(2) }} 差</div>
|
<div class="label good"><{{ ((realData?.steamAvg|0) * 0.9).toFixed(2) }} 优</div>
|
</div>
|
</div>
|
<div class="outDiv" style="padding-top: 20px">
|
<div class="leftData">
|
<div class="center" style="height: 100%">
|
<div class="centerText">
|
<div class="mainInfo3"
|
><span>{{ realData?.steam }}</span> m³
|
</div>
|
<div class="subhead2">蒸汽用量</div>
|
</div>
|
</div>
|
</div>
|
<div class="rightChart center">
|
<div class="center compareBar">
|
<div class="barTop">{{ realData?.steamAvg?.toFixed(2) }}</div>
|
<div class="barBack">
|
<div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
|
</div>
|
<div style="line-height: 20px">
|
额定
|
<br />
|
消耗
|
</div>
|
</div>
|
<div class="center compareBar">
|
<div class="barTop">{{ realData?.zhengqi?.toFixed(2) || 0 }}</div>
|
<div class="barBack">
|
<div
|
class="barDiv"
|
:class="{ good: realData?.zqgood, bad: realData?.zqbad }"
|
:style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"
|
>
|
</div>
|
</div>
|
<div style="line-height: 20px">
|
实时
|
<br />
|
消耗
|
</div>
|
</div>
|
</div>
|
</div>
|
</dv-border-box7>
|
<dv-border-box7 class="infoChart">
|
<div class="chartTittle">效率对比</div>
|
<div class="outDiv" style="padding-top: 10px">
|
<div id="compare" style="width: 300px; height: 250px"></div>
|
</div>
|
</dv-border-box7>
|
<dv-border-box7 class="infoChart">
|
<div class="chartTittle">
|
<div> 电能消耗(kWh/kg)</div>
|
<div class="rightLabel">
|
<div class="label bad">>{{ realData?.wattAvg?.toFixed(3) }} 差</div>
|
<div class="label good"><{{ ((realData?.wattAvg|0) * 0.9).toFixed(3) }} 优</div>
|
</div>
|
</div>
|
<div class="outDiv" style="padding-top: 20px">
|
<div class="leftData">
|
<div class="center" style="height: 100%">
|
<div class="centerText">
|
<div class="mainInfo3"
|
><span>{{ realData?.watt }}</span> kWh
|
</div>
|
<div class="subhead2">电能用量</div>
|
</div>
|
</div>
|
</div>
|
<div class="rightChart center">
|
<div class="center compareBar">
|
<div class="barTop">{{ realData?.wattAvg?.toFixed(3) }}</div>
|
<div class="barBack">
|
<div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
|
</div>
|
<div style="line-height: 20px">
|
额定
|
<br />
|
消耗
|
</div>
|
</div>
|
<div class="center compareBar">
|
<div class="barTop">{{ realData?.dian?.toFixed(3) || 0 }}</div>
|
<div class="barBack">
|
<div
|
class="barDiv"
|
:class="{ good: realData?.dngood, bad: realData?.dnbad }"
|
:style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"
|
></div>
|
</div>
|
<div style="line-height: 20px">
|
实时
|
<br />
|
消耗
|
</div>
|
</div>
|
</div>
|
</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 { 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 marks = ref<Record<number, any>>({
|
0: '0°C',
|
1: '',
|
2: '',
|
3: '',
|
4: '',
|
5: '',
|
6: '',
|
7: '',
|
8: '',
|
9: '',
|
10: '',
|
11: '',
|
12: '',
|
13: '',
|
14: '',
|
15: '',
|
16: '',
|
17: '',
|
18: '',
|
19: '',
|
20: '',
|
21: '',
|
22: '',
|
23: '',
|
24: '',
|
25: '25°C',
|
26: '',
|
27: '',
|
28: '',
|
29: '',
|
30: '',
|
31: '',
|
32: '',
|
33: '',
|
34: '',
|
35: '',
|
36: '',
|
37: '',
|
38: '',
|
39: '',
|
40: '',
|
41: '',
|
42: '',
|
43: '',
|
44: '',
|
45: '',
|
46: '',
|
47: '',
|
48: '',
|
49: '',
|
50: '50°C',
|
51: '',
|
52: '',
|
53: '',
|
54: '',
|
55: '',
|
56: '',
|
57: '',
|
58: '',
|
59: '',
|
60: '',
|
61: '',
|
62: '',
|
63: '',
|
64: '',
|
65: '',
|
66: '',
|
67: '',
|
68: '',
|
69: '',
|
70: '',
|
71: '',
|
72: '',
|
73: '',
|
74: '',
|
75: '75°C',
|
76: '',
|
77: '',
|
78: '',
|
79: '',
|
80: '',
|
81: '',
|
82: '',
|
83: '',
|
84: '',
|
85: '',
|
86: '',
|
87: '',
|
88: '',
|
89: '',
|
90: '',
|
91: '',
|
92: '',
|
93: '',
|
94: '',
|
95: '',
|
96: '',
|
97: '',
|
98: '',
|
99: '',
|
100: '100°C',
|
})
|
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({})
|
const standard = ref({
|
xiaolv: 220,
|
xlMin: 200,
|
zhengqi: 50,
|
zqMin: 45,
|
dian: 8,
|
dMin: 7.5,
|
})
|
|
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'
|
var moisChart: echarts.ECharts
|
var waterChart: echarts.ECharts
|
|
var bellowsTempChart: echarts.ECharts
|
// var fanFreqChart: echarts.ECharts
|
var progressBarChart: echarts.ECharts
|
var efficiencyLineChart: echarts.ECharts
|
|
var compareChart: echarts.ECharts
|
|
//----------------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)
|
|
|
function initCharts() {
|
let domId = 'moisChart'
|
let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement
|
let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement
|
let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement
|
// let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement
|
let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement
|
let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement
|
// let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement
|
let compaerDom: HTMLElement = document.getElementById('compare') as HTMLElement
|
moisChart = echarts.init(chartDom)
|
waterChart = echarts.init(waterDom)
|
bellowsTempChart = echarts.init(bellowsTempDom)
|
// fanFreqChart = echarts.init(fanFreqDom)
|
progressBarChart = echarts.init(progressBarDom)
|
efficiencyLineChart = echarts.init(efficiencyLineDom)
|
compareChart = echarts.init(compaerDom)
|
|
const option = {
|
color: ['green', 'red'],
|
title: {
|
text: '含水率/温度趋势',
|
textStyle: {
|
color: '#fff',
|
fontSize: 15,
|
},
|
},
|
tooltip: {
|
trigger: 'axis',
|
},
|
grid: {
|
left: 50,
|
right: 70,
|
top: 50,
|
bottom: 60,
|
},
|
legend: {
|
right: 60,
|
textStyle: {
|
color: '#fff',
|
},
|
},
|
// toolbox: {
|
// show: true,
|
// feature: {
|
// dataZoom: {
|
// yAxisIndex: 'none',
|
// },
|
// dataView: { readOnly: false },
|
// magicType: { type: ['line', 'bar'] },
|
// restore: {},
|
// saveAsImage: {},
|
// },
|
// },
|
xAxis: {
|
type: 'value',
|
axisLabel: {
|
color: '#fff',
|
},
|
//boundaryGap: false,
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
min: 0,
|
max: function (value) {
|
if (value.max < 100) {
|
return 100
|
} else {
|
return value.max
|
}
|
},
|
splitLine: {
|
lineStyle: {
|
type: 'dashed',
|
color: ['#2b2b2b'],
|
},
|
},
|
},
|
yAxis: {
|
type: 'value',
|
boundaryGap: ['10%', '10%'],
|
axisLabel: {
|
color: '#fff',
|
},
|
splitLine: {
|
lineStyle: {
|
type: 'dashed',
|
color: ['#2b2b2b'],
|
},
|
},
|
// min: 0,
|
// max: function (value) {
|
// if (value.max < 100) {
|
// return 100
|
// } else {
|
// return value.max
|
// }
|
// },
|
},
|
// yAxis: {
|
// type: 'value',
|
// axisLabel: {
|
// formatter: '{value} °C',
|
// },
|
// },
|
series: [
|
{
|
name: '含水率',
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
data: [
|
|
],
|
lineStyle: {
|
width: 1,
|
},
|
markLine: {
|
data: [{ type: 'average', name: 'Avg' }],
|
},
|
areaStyle: {
|
opacity: 0.2,
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: 'rgb(128, 255, 165)',
|
},
|
{
|
offset: 1,
|
color: 'rgb(1, 191, 236)',
|
},
|
]),
|
},
|
},
|
{
|
name: '温度',
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
data: [
|
|
],
|
lineStyle: {
|
width: 1,
|
},
|
areaStyle: {
|
opacity: 0.2,
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: 'rgb(255, 0, 135)',
|
},
|
{
|
offset: 1,
|
color: 'rgb(135, 0, 157)',
|
},
|
]),
|
},
|
// markLine: {
|
// data: [
|
// { type: 'average', name: 'Avg' },
|
// [
|
// {
|
// symbol: 'none',
|
// x: '90%',
|
// yAxis: 'max',
|
// },
|
// {
|
// symbol: 'circle',
|
// label: {
|
// position: 'start',
|
// formatter: 'Max',
|
// },
|
// type: 'max',
|
// name: '最高点',
|
// },
|
// ],
|
// ],
|
// },
|
},
|
],
|
}
|
const waterOption = {
|
series: [
|
{
|
type: 'liquidFill',
|
radius: '100%',
|
//waveAnimation: false,
|
amplitude: 3,
|
animationDuration: 5,
|
//animationDurationUpdate: 0,
|
data: [0, 0, 0],
|
shape:
|
'path://M828.817,706.209C828.817,881.725,686.98,1024,512,1024c-174.98,0-316.817-142.275-316.817-317.791C195.183,530.74,512,0,512,0s316.817,530.74,316.817,706.209z',
|
outline: {
|
show: false,
|
},
|
label: {
|
// formatter: function () {
|
// //console.log(`output->params`,params,mois.value)
|
|
// return (
|
// '' +
|
// // +'初始'+(mois.value[0]*100).toFixed(2) + '%\n\n\n'
|
// (mois.value[1] * 100).toFixed(2) +
|
// '%'
|
// // + '\n\n\n目标'+(mois.value[2]*100).toFixed(2) + '%'
|
// )
|
// },
|
fontSize: 20,
|
//position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'],
|
},
|
},
|
],
|
}
|
|
const bellowsOption = {
|
series: [
|
{
|
type: 'gauge',
|
center: ['50%', '60%'],
|
startAngle: 215,
|
endAngle: -35,
|
min: 0,
|
max: 80,
|
splitNumber: 8,
|
itemStyle: {
|
color: '#FFAB91',
|
},
|
progress: {
|
show: true,
|
width: 10,
|
},
|
pointer: {
|
show: false,
|
},
|
axisLine: {
|
lineStyle: {
|
width: 10,
|
},
|
},
|
axisTick: {
|
distance: -15,
|
splitNumber: 5,
|
length: 3,
|
lineStyle: {
|
width: 1,
|
color: '#999',
|
},
|
},
|
splitLine: {
|
distance: -18,
|
length: 6,
|
lineStyle: {
|
width: 2,
|
color: '#999',
|
},
|
},
|
axisLabel: {
|
distance: -13,
|
color: '#fff',
|
fontSize: 12,
|
},
|
anchor: {
|
show: false,
|
},
|
title: {
|
show: false,
|
},
|
detail: {
|
valueAnimation: true,
|
width: '60%',
|
lineHeight: 40,
|
borderRadius: 8,
|
offsetCenter: [0, '0%'],
|
fontSize: 20,
|
fontWeight: 'bolder',
|
formatter: '{value}°C',
|
color: 'inherit',
|
},
|
data: [
|
{
|
value: 0,
|
},
|
],
|
},
|
{
|
type: 'gauge',
|
center: ['50%', '60%'],
|
startAngle: 215,
|
endAngle: -35,
|
min: 0,
|
max: 80,
|
itemStyle: {
|
color: '#FD7347',
|
},
|
progress: {
|
show: true,
|
width: 3,
|
},
|
pointer: {
|
show: false,
|
},
|
axisLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
splitLine: {
|
show: false,
|
},
|
axisLabel: {
|
show: false,
|
},
|
detail: {
|
show: false,
|
},
|
data: [
|
{
|
value: 0,
|
},
|
],
|
},
|
],
|
}
|
|
// const fanFreqOption = {
|
// series: [
|
// {
|
// type: 'gauge',
|
// progress: {
|
// show: true,
|
// width: 9,
|
// },
|
// axisLine: {
|
// lineStyle: {
|
// width: 9,
|
// },
|
// },
|
// axisTick: {
|
// show: false,
|
// },
|
// splitLine: {
|
// distance: 3,
|
// length: 4,
|
// lineStyle: {
|
// width: 1,
|
// color: '#999',
|
// },
|
// },
|
// axisLabel: {
|
// distance: 15,
|
// color: '#999',
|
// fontSize: 10,
|
// },
|
// anchor: {
|
// show: true,
|
// showAbove: true,
|
// size: 10,
|
// itemStyle: {
|
// borderWidth: 3,
|
// },
|
// },
|
// title: {
|
// show: false,
|
// },
|
// detail: {
|
// valueAnimation: true,
|
// fontSize: 20,
|
// offsetCenter: [0, '70%'],
|
// formatter: '{value}Hz',
|
// },
|
// data: [
|
// {
|
// value: 56,
|
// },
|
// ],
|
// },
|
// ],
|
// }
|
// const weightOption = {
|
// // title: {
|
// // text: 'Referer of a Website',
|
// // subtext: 'Fake Data',
|
// // left: 'center'
|
// // },
|
// color: ['#1595EA', '#2C4D90', '#FF7F7F'],
|
// tooltip: {
|
// trigger: 'item',
|
// },
|
// radius: [0, '85%'],
|
// // grid: {
|
// // top: 20,
|
// // left: 20,
|
// // right: 20,
|
// // bottom: 20,
|
// // },
|
// // legend: {
|
// // orient: 'vertical',
|
// // left: 'left',
|
// // },
|
// series: [
|
// {
|
// name: '重量数据',
|
// type: 'pie',
|
// radius: '50%',
|
// data: [
|
// { value: 1048, name: '剩余重量' },
|
// { value: 735, name: '烘去重量' },
|
// ],
|
// label: {
|
// show: false,
|
// },
|
// labelLine: {
|
// show: false,
|
// },
|
// emphasis: {
|
// itemStyle: {
|
// shadowBlur: 10,
|
// shadowOffsetX: 0,
|
// shadowColor: 'rgba(0, 0, 0, 0.5)',
|
// },
|
// },
|
// },
|
// ],
|
// }
|
|
const progressBarOption = {
|
// tooltip: {
|
// trigger: 'axis',
|
// axisPointer: {
|
// // Use axis to trigger tooltip
|
// type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
|
// },
|
// },
|
// color: [
|
// '#0653F6',
|
// // '#1B61E7',
|
// '#3673D5',
|
// // '#4A80C8',
|
// '#608FB8',
|
// // '#719BAD',
|
// '#82A6A1',
|
// // '#8DAD9A',
|
// '#9CB790',
|
// // '#A7BE88',
|
// '#B3C681',
|
// '#CAD671',
|
// '#DBE165',
|
// ],
|
animation: false, // 关闭动画
|
color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8', '#60FFFE', '#64FAFF', '#70FFFF', '#7BFFFF', '#88FFFD', '#97FFFF', '#A5FFFD', '#B1FFFF', '#BFFFFF', '#CAFFFF'],
|
grid: {
|
top: '12%',
|
left: '20',
|
right: '55',
|
bottom: '3%',
|
containLabel: true,
|
},
|
xAxis: {
|
min: 0,
|
max: 150,
|
show: false,
|
type: 'value',
|
axisLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
},
|
yAxis: {
|
show: false,
|
axisLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
type: 'category',
|
data: ['时间'],
|
},
|
series: [
|
// {
|
// name: '第一阶段',
|
// type: 'bar',
|
// stack: 'total',
|
// label: {
|
// show: true,
|
// },
|
// barWidth: 26,
|
// emphasis: {
|
// focus: 'series',
|
// },
|
// data: [30],
|
// },
|
// {
|
// name: '第二阶段',
|
// type: 'bar',
|
// stack: 'total',
|
// label: {
|
// show: true,
|
// },
|
// emphasis: {
|
// focus: 'series',
|
// },
|
// data: [30],
|
// },
|
// {
|
// name: 'Affiliate Ad',
|
// type: 'bar',
|
// stack: 'total',
|
// label: {
|
// show: true,
|
// },
|
// emphasis: {
|
// focus: 'series',
|
// },
|
// data: [20],
|
// },
|
// {
|
// name: 'Video Ad',
|
// type: 'bar',
|
// stack: 'total',
|
// label: {
|
// show: true,
|
// },
|
// emphasis: {
|
// focus: 'series',
|
// },
|
// data: [15],
|
// },
|
// {
|
// name: 'Search Engine',
|
// type: 'bar',
|
// stack: 'total',
|
// label: {
|
// show: true,
|
// },
|
// emphasis: {
|
// focus: 'series',
|
// },
|
// data: [10],
|
// },
|
// {
|
// name: 'df Engine',
|
// type: 'bar',
|
// stack: 'total',
|
// label: {
|
// show: true,
|
// },
|
// emphasis: {
|
// focus: 'series',
|
// },
|
// data: [5],
|
// },
|
// {
|
// name: 'df Engine',
|
// type: 'bar',
|
// stack: 'total',
|
// label: {
|
// show: true,
|
// },
|
// emphasis: {
|
// focus: 'series',
|
// },
|
// data: [5],
|
// },
|
// {
|
// name: 'df Engine',
|
// type: 'bar',
|
// stack: 'total',
|
// label: {
|
// show: true,
|
// },
|
// emphasis: {
|
// focus: 'series',
|
// },
|
// data: [
|
// {
|
// value: 35,
|
// itemStyle: {
|
// color: '#c0c0c0',
|
// },
|
// },
|
// ],
|
// },
|
],
|
}
|
|
const efficiencyLineOption = {
|
title: {},
|
tooltip: {
|
trigger: 'axis',
|
},
|
grid: {
|
top: '30%',
|
left: '17',
|
right: '57',
|
bottom: '0%',
|
containLabel: true,
|
},
|
legend: {
|
right: 60,
|
textStyle: {
|
color: '#fff',
|
},
|
},
|
xAxis: {
|
show: false,
|
axisLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
type: 'value',
|
min: 0,
|
max: 150,
|
// data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1],
|
},
|
yAxis: {
|
show: false,
|
axisLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
type: 'value',
|
axisLabel: {
|
formatter: '{value} °C',
|
},
|
// max: eqp.value.dryEfficiency + 3,
|
},
|
series: [
|
{
|
name: '干燥效率',
|
type: 'line',
|
lineStyle: {
|
width: 1,
|
},
|
// [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]]
|
data: [
|
|
],
|
markPoint: {
|
data: [
|
{ type: 'max', name: 'Max' },
|
{ type: 'min', name: 'Min' },
|
],
|
},
|
markLine: {
|
symbol: 'none',
|
data: [
|
{
|
name: '额定',
|
yAxis: 100,
|
},
|
],
|
label: {
|
formatter: '{b}\n{c}',
|
color: '#fff',
|
},
|
},
|
// markLine: {
|
// data: [{ type: 'average', name: 'Avg' }],
|
// },
|
},
|
],
|
}
|
|
const compareOption = {
|
tooltip: {
|
trigger: 'axis',
|
},
|
grid: {
|
top: '6%',
|
left: '3%',
|
right: '10%',
|
bottom: '3%',
|
containLabel: true,
|
},
|
xAxis: {
|
show: false,
|
type: 'value',
|
},
|
yAxis: {
|
axisLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
type: 'category',
|
data: ['1#', '2#', '3#', '4#', '5#', '6#'],
|
},
|
series: [
|
{
|
name: '2011',
|
type: 'bar',
|
barWidth: 10,
|
data: [0, 0, 0, 0, 0, 0],
|
label: {
|
show: true,
|
position: 'right',
|
valueAnimation: true,
|
|
color: '#fff',
|
},
|
},
|
],
|
}
|
|
option && moisChart.setOption(option)
|
waterOption && waterChart.setOption(waterOption)
|
bellowsOption && bellowsTempChart.setOption(bellowsOption)
|
// fanFreqOption && fanFreqChart.setOption(fanFreqOption)
|
|
progressBarOption && progressBarChart.setOption(progressBarOption)
|
efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption)
|
compareOption && compareChart.setOption(compareOption)
|
}
|
|
// 动态读取图片
|
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()
|
setTimeout(initCharts, 500)
|
})
|
}
|
|
function listAllEqp() {
|
listAll({ enable: 'Y' })
|
.then((result) => {
|
//console.log(`output->result`, result)
|
eqps.value = result
|
// result.forEach((item) => {
|
// eqpCodes.push(item.code)
|
// })
|
queryRealTime()
|
setTimeout(initCharts, 500)
|
})
|
.catch((err) => {
|
//console.log(`output->err`, err)
|
})
|
}
|
|
var num = eqpNum.value
|
|
function changeEqp() {
|
//console.log("changeEqp::",eqps.value.length);
|
num++
|
if (eqps.value.length > 0) {
|
var i = num % eqps.value.length
|
//eqp.value = eqps.value[i]
|
// console.log("777",i);
|
eqpNum.value = i
|
//console.log("888",eqp.value);
|
queryRealTime()
|
//setTimeout(initCharts, 500)
|
}
|
}
|
|
// function queryEqpsReal() {
|
|
// if (eqps.value.length > 0) {
|
// var i = num%eqps.value.length
|
// eqp.value = eqps[i]
|
// console.log("777",i);
|
// console.log("888",eqp.value);
|
// queryRealTime()
|
// //setTimeout(initCharts, 500)
|
// }
|
// num ++;
|
// }
|
|
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 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)
|
// res.tempValue = [res.windTemp, 100]
|
//res.percent = ((res.dryTime / res.et) * 100).toFixed(2)
|
/**水滴图含水量 */
|
res.mois = [
|
(res.trendVo.moisture / 100).toFixed(2),
|
(res.trendVo.moisture / 100 / 1.5).toFixed(2),
|
(res.trendVo.moisture / 100 / 3).toFixed(2),
|
]
|
if (waterChart) {
|
waterChart.setOption({
|
series: [
|
{
|
data: res.mois,
|
label: {
|
formatter: function () {
|
return res.trendVo.moisture + '%'
|
},
|
fontSize: 20,
|
},
|
},
|
],
|
})
|
}
|
|
/**温度环形图 */
|
if (bellowsTempChart) {
|
bellowsTempChart.setOption({
|
series: [{ data: [{ value: res.trendVo.bellowsTemp }] }, { data: [{ value: res.trendVo.bellowsTemp }] }],
|
})
|
}
|
/**风机频率环形图 */
|
// if (fanFreqChart) {
|
// fanFreqChart.setOption({
|
// series: [
|
// {
|
// data: [
|
// {
|
// value: res.trendVo.fanFrequency,
|
// },
|
// ],
|
// },
|
// ],
|
// })
|
// }
|
/**干燥进度、走势与阶段效率和阶段消耗 */
|
if (res && res.detailList) {
|
var progressSeries = []
|
|
var zhengQiXiaoHao = []
|
var dianNengXiaoHao = []
|
var ganZaoXiaoLv = []
|
var totalTime = 0
|
var beforeWeight = 0
|
res.moisList = []
|
beforeWeight = res.originWeight
|
//console.log(`output->res`, res)
|
res.detailList.forEach((item) => {
|
//console.log(`output->bef`, beforeWeight)
|
//console.log(`output->cur`, item.weight)
|
res.moisList.push([item.totalTime, item.moisture])
|
// console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime)
|
var curDryTime = item.totalTime - totalTime
|
|
if (curDryTime > 0) {
|
progressSeries.push({
|
name: item.moisture,
|
type: 'bar',
|
stack: 'total',
|
label: {
|
show: true,
|
},
|
emphasis: {
|
focus: 'series',
|
},
|
data: [item.totalTime - totalTime],
|
})
|
ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)])
|
|
totalTime = item.totalTime
|
}
|
beforeWeight = item.weight
|
})
|
|
if (res.remain) {
|
if (res.dryTime - totalTime > 0) {
|
progressSeries.push({
|
name: '当前',
|
type: 'bar',
|
stack: 'total',
|
label: {
|
show: true,
|
},
|
emphasis: {
|
focus: 'series',
|
},
|
data: [
|
{
|
value: res.dryTime - totalTime,
|
},
|
],
|
})
|
}
|
|
// ganZaoXiaoLv.push([totalTime + res.remain,eqp.value.dryEfficiency])
|
// console.log(`output->res.remain`, res.remain)
|
// console.log(`output->res.dryTime`, res.dryTime)
|
// console.log(`output->totalTime`, totalTime)
|
// 干燥剩余时间=工单预计剩余-（当前干燥时间-最后一次记录干燥时间）
|
res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0
|
progressSeries.push({
|
name: '剩余',
|
type: 'bar',
|
stack: 'total',
|
label: {
|
show: true,
|
},
|
emphasis: {
|
focus: 'series',
|
},
|
data: [
|
{
|
value: res.remain - (res.dryTime - totalTime),
|
itemStyle: {
|
color: '#c0c0c0',
|
},
|
},
|
],
|
})
|
}
|
|
/**干燥进度 */
|
if (progressBarChart) {
|
//console.log(`output->progressSeries`, progressSeries)
|
progressBarChart.setOption(
|
{
|
xAxis: {
|
max: totalTime + res.remain,
|
},
|
series: progressSeries,
|
},
|
{ replaceMerge: ['series'] }
|
)
|
}
|
|
res.totalTime = totalTime + res.remain
|
console.log("efficAvg::",res.efficAvg);
|
/**干燥效率、消耗 */
|
if (efficiencyLineChart) {
|
//console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv)
|
efficiencyLineChart.setOption({
|
xAxis: {
|
max: totalTime + res.remain,
|
},
|
series: [
|
{
|
data: ganZaoXiaoLv,
|
markLine: {
|
symbol: 'none',
|
data: [
|
{
|
name: '额定',
|
yAxis: res.efficAvg|0,
|
},
|
],
|
label: {
|
formatter: '{b}\n{c}',
|
color: '#fff',
|
},
|
},
|
},
|
{ data: zhengQiXiaoHao },
|
{ data: dianNengXiaoHao },
|
],
|
})
|
}
|
|
res.moisList.push([res.dryTime, res.trendVo.moisture])
|
}
|
|
/**温度趋势 */
|
if (res && res.bellowsTemp) {
|
Array.from(Object.entries(res.bellowsTemp))
|
var arr = Object.keys(res.bellowsTemp)
|
var temArr = []
|
arr.forEach((item) => {
|
temArr.push([item * 1, res.bellowsTemp[item]])
|
})
|
|
//console.log(`output->arr` + JSON.stringify(temArr))
|
res.tempArr = temArr
|
}
|
|
/**干燥过程趋势 */
|
if (moisChart) {
|
//console.log(`output->更新chart`)
|
moisChart.setOption({
|
series: [
|
{
|
data: res.moisList,
|
markLine: {
|
symbol: 'none',
|
data: [
|
{
|
name: '目标',
|
yAxis: res.target,
|
},
|
],
|
label: {
|
formatter: '{b}\n{c}%',
|
color: '#fff',
|
},
|
},
|
},
|
{
|
data: res.tempArr,
|
},
|
],
|
})
|
}
|
|
let lastTrend = res.detailList[res.detailList.length-1]
|
/**效率对比图 */
|
if (res.originWeight - lastTrend.weight <= 0) {
|
res.xiaolv = 0
|
} else {
|
res.xiaolv = ((res.originWeight - lastTrend.weight) / lastTrend.totalTime) * 60
|
}
|
res.xiaolv = Number(res.xiaolv)
|
//eqp.value.dryEfficiency = Number(eqp.value.dryEfficiency)
|
if (res.xiaolv > res.efficAvg) {
|
console.log("xiaolv:",res , eqp);
|
res.xlgood = true
|
res.xlsHeight = (res.efficAvg / res.xiaolv) * 100 + '%'
|
res.xlrHeight = '100%'
|
} else if (res.xiaolv < res.efficAvg * 0.9) {
|
res.xlbad = true
|
res.xlsHeight = '100%'
|
res.xlrHeight = (res.xiaolv / res.efficAvg) * 100 + '%'
|
} else {
|
res.xlsHeight = '100%'
|
res.xlrHeight = (res.xiaolv / res.efficAvg) * 100 + '%'
|
}
|
|
/** 蒸汽消耗 */
|
if (res.originWeight - lastTrend.weight <= 0) {
|
res.zhengqi = 0
|
} else {
|
res.zhengqi = lastTrend.steam / (res.originWeight - lastTrend.weight)
|
}
|
res.zhengqi = Number(res.zhengqi)
|
//eqp.value.steamConsumption = Number(eqp.value.steamConsumption)
|
// res.zhengqi = eqp.value.steamConsumption - 3
|
// console.log(res);
|
// console.log('zhengqi:', res.zhengqi);
|
if (res.zhengqi > res.steamAvg) {
|
res.zqbad = true
|
res.zqsHeight = (res.steamAvg / res.zhengqi) * 100 + '%'
|
res.zqrHeight = '100%'
|
} else if (res.zhengqi < res.steamAvg * 0.9) {
|
res.zqgood = true
|
res.zqsHeight = '100%'
|
res.zqrHeight = (res.zhengqi / res.steamAvg) * 100 + '%'
|
} else {
|
res.zqsHeight = '100%'
|
res.zqrHeight = (res.zhengqi / res.steamAvg) * 100 + '%'
|
}
|
|
/** 电能消耗 */
|
if (res.originWeight - lastTrend.weight <= 0) {
|
res.dian = 0
|
} else {
|
res.dian = lastTrend.watt / (res.originWeight - lastTrend.weight)
|
}
|
// res.dian = eqp.value.powerConsumption - 1.5
|
res.dian = Number(res.dian)
|
//eqp.value.powerConsumption = Number(eqp.value.powerConsumption)
|
if (res.dian > res.wattAvg) {
|
console.log("dian::", res.dian,res.wattAvg )
|
res.dnbad = true
|
res.dnsHeight = (res.wattAvg / res.dian) * 100 + '%'
|
res.dnrHeight = '100%'
|
} else if (res.dian < res.wattAvg * 0.9) {
|
res.dngood = true
|
res.dnsHeight = '100%'
|
res.dnrHeight = (res.dian / res.wattAvg) * 100 + '%'
|
} else {
|
res.dnsHeight = '100%'
|
res.dnrHeight = (res.dian / res.wattAvg) * 100 + '%'
|
}
|
|
//console.log('state:::fan::', res.state_fan, 'roller::', res.state_roller, 'windbox::', res.state_windbox)
|
//console.log('===========================')
|
//console.log("state:::state_windbox::", res.state_windbox);
|
|
/**状态/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 = '干燥完成'
|
}
|
}
|
|
if (compareChart) {
|
compareChart.setOption({
|
yAxis: {
|
data: res.compEqpNum,
|
},
|
series: {
|
data: res.compEqpEffic,
|
},
|
})
|
}
|
|
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
|
console.log("errorMsg:",res.fault)
|
}
|
|
if (res.warning) {
|
res.isWarning = true
|
res.warnMsg = res.warning
|
console.log("warnMsg:",res.warning)
|
}
|
} else {
|
res = {
|
mois: [],
|
gif: 'tmrefeng2',
|
herbImage: 'yaocai1.png',
|
}
|
}
|
|
// console.log(`output->res`, res.detailList[res.detailList.length-1])
|
realData.value = res
|
})
|
}
|
}
|
|
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
|
}
|
}
|
|
function back() {
|
router.back()
|
}
|
|
function showFault () {
|
console.log('showFault')
|
router.push({ path: '/bigFaultCloud', query: { tenant: tenant.value, num: num } })
|
|
}
|
|
listAllEqp()
|
//queryEqp()
|
// DOM挂载完成后渲染图表
|
onMounted(() => {
|
Timer.value = setInterval(queryRealTime, 3000)
|
Timer2.value = setInterval(moveImage, 50)
|
})
|
|
onUnmounted(() => {
|
clearInterval(Timer.value)
|
clearInterval(Timer2.value)
|
Timer.value = null
|
Timer2.value = null
|
})
|
</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: 750px;
|
width: 850px;
|
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: 79%;
|
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: 848px;
|
display: flex;
|
justify-content: center;
|
align-content: flex-start;
|
flex-wrap: wrap;
|
}
|
.leftTop1 {
|
width: 250px;
|
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: 440px;
|
padding-left: 10px;
|
}
|
.rightTwo {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.infoChart {
|
width: 340px;
|
height: 300px;
|
/* 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: 440px;
|
/* 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 1.0s infinite ease-in-out;
|
animation: scaleout 1.0s 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;
|
}
|
</style>
|
