From 3efe2606474fba1905fa4edab82b713b9cfb5ef3 Mon Sep 17 00:00:00 2001 From: baoshiwei <baoshiwei@shlanbao.cn> Date: 星期二, 01 八月 2023 08:22:03 +0800 Subject: [PATCH] 完成车间大屏 --- src/views/dry/bigScreen/BigEqp.vue | 1532 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 759 insertions(+), 773 deletions(-) diff --git a/src/views/dry/bigScreen/BigEqp.vue b/src/views/dry/bigScreen/BigEqp.vue index d72d34e..c609eae 100644 --- a/src/views/dry/bigScreen/BigEqp.vue +++ b/src/views/dry/bigScreen/BigEqp.vue @@ -1,144 +1,148 @@ <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 class="eqpName" style="padding: 30px" @click="changeEqp"> - <div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div> - <div class="subhead">{{ eqp?.type }}</div> - <dv-decoration-1 style="width:300px;height:90px; margin-left: 20px;" /> - <!-- 璁惧锛歿{ eqp.name }}</div> + <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> - </dv-border-box7> - <dv-border-box7 class="curHerb" :style="{'background-image': 'url('+getHerbImageUrl(realData?.herbImage)+')'}"> - <div class="eqpName" style="margin-left: 176px; 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="icon-park-twotone:box" :size="35" /> - <div> - <div class="mainInfo2">{{ realData?.feed }} 绛�</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 }} 掳C</div> - <div class="subhead2">鐑</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="icon-park-twotone:box" :size="35" /> + <div> + <div class="mainInfo2">{{ realData?.feed }} 绛�</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 }} 掳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 }} %</div> + <div class="subhead2">鐩爣</div> + </div> </div> </div> - <div class="formulaItem"> - <Icon style="color: green" icon="tabler:target-arrow" :size="35" /> - <div> - <div class="mainInfo2">{{ realData?.target }} %</div> - <div class="subhead2">鐩爣</div> - </div> - </div> - </div> - <!-- <div class="eqpName">{{ realData?.herbName }}</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;"> + </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 }}</span - > % + <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 }}</span> % + </div> + <div class="subhead2">鐩爣鍚按鐜�</div> </div> - <div class="subhead2">鐩爣鍚按鐜�</div> + </div> + <div class="center" style="height: 50%"> + <div> + <div class="mainInfo3" + ><span>{{ realData?.initial }}</span> %</div + > + <div class="subhead2">鏉ユ枡鍚按鐜�</div> + </div> </div> </div> - <div class="center" style="height: 50%"> - <div> - <div class="mainInfo3" - ><span>{{ realData?.initial }}</span - > %</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; + margin-top: 190px; + color: white; + background-color: #1595ea; + height: 60px; + width: 180px; + line-height: 60px; + text-align: center; + border-radius: 5px; + font-weight: bold; + " + > + {{ statusTxt }} + </div> + <div + v-if="realData?.isError" + class="eqpInfoText blingbling" + style=" + position: absolute; + font-size: 30px; + max-height: 200px; + max-width: 720px; + border-radius: 10px; + background-color: #ce0000; + color: white; + padding: 10px; + " + > + <div class="outDiv"> + <div><Icon icon="bx:error" :size="30" /> </div> + <div + ><span>{{ realData?.errorMsg }}</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; - margin-top: 190px; - color: white; - background-color: #1595ea; - height: 60px; - width: 180px; - line-height: 60px; - text-align: center; - border-radius: 5px; - font-weight: bold; - " - > - {{ statusTxt }} - </div> - <div v-if="realData?.isError" - class="eqpInfoText blingbling" - style=" - position: absolute; - font-size: 30px; - max-height: 200px; - max-width: 720px; - border-radius: 10px; - background-color: #ce0000; - color: white; - padding: 10px; - " - > - <div class="outDiv"> - <div><Icon icon="bx:error" :size="30" /> </div> - <div><span>{{realData?.errorMsg}}</span></div> - </div> - </div> - </div> - </div> - </dv-border-box7> - <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px;"> + <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"> @@ -146,17 +150,17 @@ </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">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> + <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">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 class="outDiv"> <div style="height: 100px; width: 400px"> <Progress :stroke-color="{ @@ -173,181 +177,186 @@ </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">>{{ standard.xiaolv }} 浼� </div> - <div class="label bad"><{{ standard.xlMin }} 宸�</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 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">>{{ standard.xiaolv }} 浼� </div> + <div class="label bad"><{{ standard.xlMin }} 宸�</div> </div> </div> - <div class="rightChart center"> - <div class="center compareBar"> - <div class="barTop">{{ standard.xiaolv }}</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 | 0 }}</div> - <div class="barBack"> - <div - class="barDiv" - :class="{ good: realData?.xlgood, bad: realData?.xlbad }" - :style="[realData?.xlrHeight && { height: realData?.xlrHeight }]" - > + <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 style="line-height: 20px"> - 瀹炴椂 - <br /> - 鏁堢巼 + <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">{{ standard.xiaolv }}</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 | 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> - </div> - </dv-border-box7> - - - - - <dv-border-box7 class="infoChart"> - <div class="chartTittle" - >钂告苯娑堣��(m鲁/kg) - <div class="rightLabel"> - <div class="label bad">>{{ standard.zhengqi }} 宸�</div> - <div class="label good"><{{ standard.zqMin }} 浼�</div> + </dv-border-box7> + + <dv-border-box7 class="infoChart"> + <div class="chartTittle" + >钂告苯娑堣��(m鲁/kg) + <div class="rightLabel"> + <div class="label bad">>{{ standard.zhengqi }} 宸�</div> + <div class="label good"><{{ standard.zqMin }} 浼�</div> + </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 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">{{ standard.zhengqi }}</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 | 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> - <div class="rightChart center"> - <div class="center compareBar"> - <div class="barTop">{{standard.zhengqi}}</div> - <div class="barBack"> - <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div> - </div> - <div style="line-height: 20px"> - 棰濆畾 - <br /> - 娑堣�� + </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">>{{ standard.dian }} 宸�</div> + <div class="label good"><{{ standard.dMin }} 浼�</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="center compareBar"> - <div class="barTop">{{realData?.zhengqi | 0 }}</div> - <div class="barBack"> - <div class="barDiv" :class="{ good: realData?.zqgood, bad: realData?.zqbad }" - :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]"> </div> + <div class="rightChart center"> + <div class="center compareBar"> + <div class="barTop">{{ standard.dian }}</div> + <div class="barBack"> + <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div> + </div> + <div style="line-height: 20px"> + 棰濆畾 + <br /> + 娑堣�� + </div> </div> - <div style="line-height: 20px"> - 瀹炴椂 - <br /> - 娑堣�� + <div class="center compareBar"> + <div class="barTop">{{ realData?.dian | 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> - </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">>{{ standard.dian }} 宸�</div> - <div class="label good"><{{ standard.dMin }} 浼�</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">{{standard.dian}}</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 | 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> - + </dv-border-box7> + </div> </div> </div> </div> </div> - </div> -</dv-full-screen-container> + </dv-full-screen-container> </template> <script setup lang="ts"> - import { useFullscreen } from '@vueuse/core'; + import { useFullscreen } from '@vueuse/core' import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3' import { router } from '/@/router' import { onMounted, ref, onUnmounted } from 'vue' @@ -356,19 +365,16 @@ 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 { 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 domRef = ref<Nullable<HTMLElement>>(null); - const { enter, toggle, exit, isFullscreen } = useFullscreen(); - -const { toggle: toggleDom } = useFullscreen(domRef); + const { toggle: toggleDom } = useFullscreen(domRef) const Timer = ref() - const Timer2 = ref() + const Timer2 = ref() const marks = ref<Record<number, any>>({ 0: '0掳C', 1: '', @@ -472,10 +478,10 @@ 99: '', 100: '100掳C', }) - const eqps = ref([] as dryEquipment[]) - - const eqp = ref({} as dryEquipment) - const eqpNum = ref(1) + 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 userStore = useUserStore() const realData = ref({}) const standard = ref({ @@ -487,7 +493,7 @@ dMin: 7.5, }) - const position = ref(1) + const position = ref(1) //realData.value.tempValue = [0, 100] realData.value.mois = [0.5, 0.35, 0.2] statusGif = 'tmrefeng2' @@ -526,9 +532,8 @@ text: '鍚按鐜�/娓╁害瓒嬪娍', textStyle: { color: '#fff', - fontSize: 15 + fontSize: 15, }, - }, tooltip: { trigger: 'axis', @@ -542,8 +547,8 @@ legend: { right: 60, textStyle: { - color: '#fff' - } + color: '#fff', + }, }, // toolbox: { // show: true, @@ -559,8 +564,8 @@ // }, xAxis: { type: 'value', - axisLabel:{ - color: '#fff' + axisLabel: { + color: '#fff', }, //boundaryGap: false, // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], @@ -575,22 +580,22 @@ splitLine: { lineStyle: { type: 'dashed', - color: ['#2b2b2b'] - } - } + color: ['#2b2b2b'], + }, + }, }, yAxis: { type: 'value', boundaryGap: ['10%', '10%'], - axisLabel:{ - color: '#fff' + axisLabel: { + color: '#fff', }, splitLine: { lineStyle: { type: 'dashed', - color: ['#2b2b2b'] - } - } + color: ['#2b2b2b'], + }, + }, // min: 0, // max: function (value) { // if (value.max < 100) { @@ -625,15 +630,15 @@ 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)' - } - ]) + { + offset: 0, + color: 'rgb(128, 255, 165)', + }, + { + offset: 1, + color: 'rgb(1, 191, 236)', + }, + ]), }, }, { @@ -651,15 +656,15 @@ 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)' - } - ]) + { + offset: 0, + color: 'rgb(255, 0, 135)', + }, + { + offset: 1, + color: 'rgb(135, 0, 157)', + }, + ]), }, // markLine: { // data: [ @@ -694,7 +699,7 @@ amplitude: 3, animationDuration: 5, //animationDurationUpdate: 0, - data: [0.56,0.44,0.32], + data: [0.56, 0.44, 0.32], 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: { @@ -1109,8 +1114,8 @@ legend: { right: 60, textStyle: { - color: '#fff' - } + color: '#fff', + }, }, xAxis: { show: false, @@ -1160,18 +1165,18 @@ ], }, markLine: { - symbol: 'none', - data: [ - { - name: '棰濆畾', - yAxis: standard.value.xiaolv, - }, - ], - label: { - formatter: '{b}\n{c}', - color: '#fff' - }, - }, + symbol: 'none', + data: [ + { + name: '棰濆畾', + yAxis: standard.value.xiaolv, + }, + ], + label: { + formatter: '{b}\n{c}', + color: '#fff', + }, + }, // markLine: { // data: [{ type: 'average', name: 'Avg' }], // }, @@ -1180,32 +1185,29 @@ } const compareOption = { - tooltip: { trigger: 'axis', - }, grid: { top: '6%', left: '3%', right: '10%', bottom: '3%', - containLabel: true + containLabel: true, }, xAxis: { show: false, type: 'value', - }, yAxis: { axisLine: { - show:false, + show: false, }, axisTick: { show: false, }, type: 'category', - data: ['1#', '2#', '3#', '4#', '5#', '6#'] + data: ['1#', '2#', '3#', '4#', '5#', '6#'], }, series: [ { @@ -1217,13 +1219,12 @@ show: true, position: 'right', valueAnimation: true, - - color: '#fff' - } - }, - ] - } + color: '#fff', + }, + }, + ], + } option && moisChart.setOption(option) waterOption && waterChart.setOption(waterOption) @@ -1236,14 +1237,14 @@ } // 鍔ㄦ�佽鍙栧浘鐗� -function getHerbImageUrl(name: string) { - return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href; -} + function getHerbImageUrl(name: string) { + return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href + } // 鍔ㄦ�佽鍙栧浘鐗� function getStatusImageUrl(name: string) { - return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href; -} + 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) @@ -1253,7 +1254,7 @@ }) } - function listAllEqp() { + function listAllEqp() { listAll({ enable: 'Y' }) .then((result) => { //console.log(`output->result`, result) @@ -1262,168 +1263,181 @@ // eqpCodes.push(item.code) // }) queryRealTime() - setTimeout(initCharts, 500) - + setTimeout(initCharts, 500) }) .catch((err) => { //console.log(`output->err`, err) }) } - - var num = eqpNum.value; + 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() + 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 ++; - // } + // function queryEqpsReal() { - var shangliaoFlag = false; - var statusGif = 'tmrefeng2'; + // 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 = '姝e湪骞茬嚗' function chaiwangban() { statusGif = 'chaiwangban-1' - setTimeout(shangliao,7000) - + setTimeout(shangliao, 7000) } function shangliao() { - statusGif = "shangliao-N" - setTimeout(()=>{ - statusGif = "zhuangwangban" - setTimeout(()=>{ - statusGif = "guanmen1" - setTimeout(()=>{ + statusGif = 'shangliao-N' + setTimeout(() => { + statusGif = 'zhuangwangban' + setTimeout(() => { + statusGif = 'guanmen1' + setTimeout(() => { shangliaoFlag = false - },4000) - - },7000) - },15000) + }, 4000) + }, 7000) + }, 15000) } - function queryRealTime() { - - if (eqp.value) { - eqp.value = eqps.value[eqpNum.value] - // console.log("888",eqp.value); - let tenantId = 1003 - let eqpCode = eqp.value.code - let queryRealTimeUrl = '/dry/real/getRealTimeData' - defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, 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 + '%' + if (eqp.value) { + eqp.value = eqps.value[eqpNum.value] + // console.log("888",eqp.value); + let tenantId = 1003 + let eqpCode = eqp.value.code + let queryRealTimeUrl = '/dry/real/getRealTimeData' + defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, 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, }, - fontSize: 20, }, - }, - ], - }) - } + ], + }) + } - /**娓╁害鐜舰鍥� */ - if (bellowsTempChart) { - bellowsTempChart.setOption({ - series: [{ data: [{ value: res.windTemp }] }, { data: [{ value: res.windTemp }] }], - }) - } - /**椋庢満棰戠巼鐜舰鍥� */ - // if (fanFreqChart) { - // fanFreqChart.setOption({ - // series: [ - // { - // data: [ - // { - // value: res.trendVo.fanFrequency, - // }, - // ], - // }, - // ], - // }) - // } - /**骞茬嚗杩涘害銆佽蛋鍔夸笌闃舵鏁堢巼鍜岄樁娈垫秷鑰� */ - if (res && res.detailList) { - var progressSeries = [] - var ganZaoXiaoLv = [] - var zhengQiXiaoHao = [] - var dianNengXiaoHao = [] - 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 (bellowsTempChart) { + bellowsTempChart.setOption({ + series: [{ data: [{ value: res.windTemp }] }, { data: [{ value: res.windTemp }] }], + }) + } + /**椋庢満棰戠巼鐜舰鍥� */ + // if (fanFreqChart) { + // fanFreqChart.setOption({ + // series: [ + // { + // data: [ + // { + // value: res.trendVo.fanFrequency, + // }, + // ], + // }, + // ], + // }) + // } + /**骞茬嚗杩涘害銆佽蛋鍔夸笌闃舵鏁堢巼鍜岄樁娈垫秷鑰� */ + if (res && res.detailList) { + var progressSeries = [] + var ganZaoXiaoLv = [] + var zhengQiXiaoHao = [] + var dianNengXiaoHao = [] + 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) { + 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,standard.value.xiaolv]) + + res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 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: '褰撳墠', + name: '鍓╀綑', type: 'bar', stack: 'total', label: { @@ -1434,308 +1448,282 @@ }, data: [ { - value: res.dryTime - totalTime, + value: res.remain - (res.dryTime - totalTime), + itemStyle: { + color: '#c0c0c0', + }, }, ], }) } - // ganZaoXiaoLv.push([totalTime + res.remain,standard.value.xiaolv]) - - 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: [ + /**骞茬嚗杩涘害 */ + if (progressBarChart) { + //console.log(`output->progressSeries`, progressSeries) + progressBarChart.setOption( { - value: res.remain - (res.dryTime - totalTime), - itemStyle: { - color: '#c0c0c0', + xAxis: { + max: totalTime + res.remain, }, + series: progressSeries, }, - ], - }) + { replaceMerge: ['series'] } + ) + } - - - } - - /**骞茬嚗杩涘害 */ - if (progressBarChart) { - //console.log(`output->progressSeries`, progressSeries) - progressBarChart.setOption( - { + res.totalTime = totalTime + res.remain + /**骞茬嚗鏁堢巼銆佹秷鑰� */ + if (efficiencyLineChart) { + //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv) + efficiencyLineChart.setOption({ xAxis: { max: totalTime + res.remain, }, - series: progressSeries, - }, - { replaceMerge: ['series'] } - ) + series: [ + { + data: ganZaoXiaoLv, + markLine: { + symbol: 'none', + data: [ + { + name: '棰濆畾', + yAxis: standard.value.xiaolv, + }, + ], + label: { + formatter: '{b}\n{c}', + color: '#fff', + }, + }, + }, + { data: zhengQiXiaoHao }, + { data: dianNengXiaoHao }, + ], + }) + } + + res.moisList.push([res.dryTime, res.trendVo.moisture]) } - res.totalTime = totalTime + res.remain - /**骞茬嚗鏁堢巼銆佹秷鑰� */ - if (efficiencyLineChart) { - //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv) - efficiencyLineChart.setOption({ - xAxis: { - max: totalTime + res.remain, - }, - series: [{ data: ganZaoXiaoLv, - markLine: { - symbol: 'none', - data: [ - { - name: '棰濆畾', - yAxis: standard.value.xiaolv, + /**娓╁害瓒嬪娍 */ + 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', }, - ], - label: { - formatter: '{b}\n{c}', - color: '#fff' }, - } }, - { data: zhengQiXiaoHao }, - { data: dianNengXiaoHao }], + }, + { + data: res.tempArr, + }, + ], }) } - 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, - }, - ], - }) - } - - /**鏁堢巼瀵规瘮鍥� */ - if( (res.originWeight - res.yield) <= 0) { - res.xiaolv = standard.value.xiaolv + 6 - } else { - res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2) - } - - if (res.xiaolv > standard.value.xiaolv) { - res.xlgood = true - res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%' - res.xlrHeight = '100%' - } else if (res.xiaolv < standard.value.xlMin) { - res.xlbad = true - res.xlsHeight = '100%' - res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%' - } else { - res.xlsHeight = '100%' - res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%' - } - - - - /** 钂告苯娑堣�� */ - if( (res.originWeight - res.yield) <= 0) { - res.zhengqi = standard.value.zhengqi -3 - } else { - res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1) - } - //console.log('zhengqi:', res.zhengqi); - if (res.zhengqi > standard.value.zhengqi) { - res.zqbad = true - res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%' - res.zqrHeight = '100%' - } else if (res.zhengqi < standard.value.zqMin) { - res.zqgood = true - res.zqsHeight = '100%' - res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%' - } else { - res.zqsHeight = '100%' - res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%' - } - - - - /** 鐢佃兘娑堣�� */ - if( (res.originWeight - res.yield) <= 0) { - res.dian = standard.value.dian -1.5 - } else { - res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1) - } - - if (res.dian > standard.value.dian) { - res.dnbad = true - res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%' - res.dnrHeight = '100%' - } else if (res.dian < standard.value.dMin) { - - res.dngood = true - res.dnsHeight = '100%' - res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%' - } else { - res.dnsHeight = '100%' - res.dnrHeight = (res.dian / standard.value.dian) * 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) { - if(res.state_fan == 1) { - statusGif = 'tmrefeng2' - statusTxt = '姝e湪骞茬嚗' + /**鏁堢巼瀵规瘮鍥� */ + if (res.originWeight - res.yield <= 0) { + res.xiaolv = standard.value.xiaolv + 6 + } else { + res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2) } - if(res.state_roller == 4) { - statusGif = 'fanliao-N' - statusTxt = '姝e湪缈绘枡' + if (res.xiaolv > standard.value.xiaolv) { + res.xlgood = true + res.xlsHeight = (standard.value.xiaolv / res.xiaolv) * 100 + '%' + res.xlrHeight = '100%' + } else if (res.xiaolv < standard.value.xlMin) { + res.xlbad = true + res.xlsHeight = '100%' + res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%' + } else { + res.xlsHeight = '100%' + res.xlrHeight = (res.xiaolv / standard.value.xiaolv) * 100 + '%' } - if (res.state_roller == 5) { - statusGif = 'chuliao-N' - statusTxt = '姝e湪鍑烘枡' + /** 钂告苯娑堣�� */ + if (res.originWeight - res.yield <= 0) { + res.zhengqi = standard.value.zhengqi - 3 + } else { + res.zhengqi = (res.steam / (res.originWeight - res.yield)).toFixed(1) } - - if (res.state_windbox == 2 || res.state_windbox == 3) { - statusGif = 'fengxiangsheng-1' - statusTxt = '姝e湪骞茬嚗' + //console.log('zhengqi:', res.zhengqi); + if (res.zhengqi > standard.value.zhengqi) { + res.zqbad = true + res.zqsHeight = (standard.value.zhengqi / res.zhengqi) * 100 + '%' + res.zqrHeight = '100%' + } else if (res.zhengqi < standard.value.zqMin) { + res.zqgood = true + res.zqsHeight = '100%' + res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%' + } else { + res.zqsHeight = '100%' + res.zqrHeight = (res.zhengqi / standard.value.zhengqi) * 100 + '%' } - } 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 + /** 鐢佃兘娑堣�� */ + if (res.originWeight - res.yield <= 0) { + res.dian = standard.value.dian - 1.5 + } else { + res.dian = (res.watt / (res.originWeight - res.yield)).toFixed(1) + } + + if (res.dian > standard.value.dian) { + res.dnbad = true + res.dnsHeight = (standard.value.dian / res.dian) * 100 + '%' + res.dnrHeight = '100%' + } else if (res.dian < standard.value.dMin) { + res.dngood = true + res.dnsHeight = '100%' + res.dnrHeight = (res.dian / standard.value.dian) * 100 + '%' + } else { + res.dnsHeight = '100%' + res.dnrHeight = (res.dian / standard.value.dian) * 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) { + if (res.state_fan == 1) { + statusGif = 'tmrefeng2' + statusTxt = '姝e湪骞茬嚗' + } + + if (res.state_roller == 4) { + statusGif = 'fanliao-N' + statusTxt = '姝e湪缈绘枡' + } + + if (res.state_roller == 5) { + statusGif = 'chuliao-N' + statusTxt = '姝e湪鍑烘枡' + } + + if (res.state_windbox == 2 || res.state_windbox == 3) { + statusGif = 'fengxiangsheng-1' + statusTxt = '姝e湪骞茬嚗' + } + } 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 + + res.errorMsg = '鏈変竴涓晠闅滐紝璇锋鏌ャ��' + } else { + res = { + mois: [], + gif: 'tmrefeng2', + herbImage: 'yaocai1.png', + } } - 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 - - res.errorMsg = '鏈変竴涓晠闅滐紝璇锋鏌ャ��' - } else { - res = { - mois: [], - gif: 'tmrefeng2', - herbImage: 'yaocai1.png' - } - } - - //console.log(`output->res`, res) - realData.value = res - }) - } + //console.log(`output->res`, res) + 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 - } + 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() + } - listAllEqp() + listAllEqp() //queryEqp() // DOM鎸傝浇瀹屾垚鍚庢覆鏌撳浘琛� onMounted(() => { Timer.value = setInterval(queryRealTime, 3000) - Timer2.value = setInterval(moveImage, 50) + Timer2.value = setInterval(moveImage, 50) }) onUnmounted(() => { clearInterval(Timer.value) - clearInterval(Timer2.value) + clearInterval(Timer2.value) Timer.value = null - Timer2.value = null + Timer2.value = null }) </script> @@ -1748,12 +1736,12 @@ .eqpImage { height: 1080px; width: 1920px; - background-image: url(/src/assets/images/dry/bg.png); + background-image: url(/src/assets/images/dry/bg.png); background-repeat: no-repeat; - color: white; + color: white; /*background-position: 160px 280px; */ /* background-color: red; */ - background-size: 120%; + background-size: 120%; padding: 10px; display: flex; flex-wrap: wrap; @@ -1765,8 +1753,8 @@ width: 1200px; display: flex; flex-wrap: wrap; - align-content: flex-start; - + align-content: flex-start; + /* background-color: white; background-image: url(/src/assets/images/dry/shebei1.png); background-repeat: no-repeat; @@ -1777,24 +1765,22 @@ .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; - + 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; + margin-top: 10px; border-radius: 10px; /* background: white; */ } @@ -1802,7 +1788,7 @@ line-height: 33px; padding-left: 10px; font-size: 30px; - color: white; + color: white; } .subhead { color: #a19f9c; @@ -1858,7 +1844,6 @@ align-items: center; font-size: 30px; color: #727272; - } .leftTop2 { width: 250px; @@ -1983,6 +1968,7 @@ .curEqp { width: 340px; height: 170px; + /* background: white; border-radius: 10px; */ } @@ -1992,7 +1978,7 @@ height: 260px; /* background: white; border-radius: 10px; */ - + background-repeat: no-repeat; background-size: 200px; background-position: 0px 10px; @@ -2001,7 +1987,7 @@ width: 690px; height: 440px; /* background: white; */ - + padding: 20px; border-radius: 10px; } -- Gitblit v1.9.3