From 877df1681e443f6a0a39ebe5df2109dadafff088 Mon Sep 17 00:00:00 2001 From: baoshiwei <baoshiwei@shlanbao.cn> Date: 星期一, 04 九月 2023 12:53:37 +0800 Subject: [PATCH] 添加集成人工智能模型的设备监控界面 --- src/views/dry/bigScreen/BigEqp.vue | 2368 ++++++++++++++++++++++++++++++---------------------------- 1 files changed, 1,209 insertions(+), 1,159 deletions(-) diff --git a/src/views/dry/bigScreen/BigEqp.vue b/src/views/dry/bigScreen/BigEqp.vue index d72d34e..42d74a3 100644 --- a/src/views/dry/bigScreen/BigEqp.vue +++ b/src/views/dry/bigScreen/BigEqp.vue @@ -1,144 +1,188 @@ <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="la:box" :size="38" /> + <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 class="formula"> + <div class="formulaItem"> + <Icon style="color: yellow" icon="mdi:weight-kilogram" :size="35" /> + <div style="width: 4px"></div> + <div> + <div class="mainInfo2">{{ realData?.originWeight }} kg</div> + <div class="subhead2">鍒濆閲嶉噺</div> + </div> + </div> + <div class="formulaItem"> + <Icon style="color: deepskyblue" icon="ion:water-outline" :size="35" /> + <div> + <div class="mainInfo2">{{ realData?.initial }} %</div> + <div class="subhead2">鍒濆鍚按</div> + </div> + </div> + <div class="formulaItem"> + <Icon style="color: chocolate" icon="ps:clock" :size="32" /> + <div style="width: 4px"></div> + <div> + <div class="mainInfo2">{{ realData?.et }} 鍒�</div> + <div class="subhead2">棰勮鏃堕棿</div> + </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 style="margin-left: 0px; width: 340px; height: 240px"> + <!-- <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> --> + + <div> + <div class="timeProgress"> + <div class="flex"> + <div class="leftLabel">棰勮鏃堕棿</div> + <Progress :percent="30" size="small" status="active" /> + </div> + </div> + <div class="timeProgress"> + <div class="flex"> + <div class="leftLabel">褰撳墠闃舵</div> + <Progress :percent="50" size="small" status="active" /> + </div> + </div> + </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 +190,21 @@ </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">{{ 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> --> - <!-- <div class="outDiv"> + <div class="flex"> + <div style="width: 200px; height: 100px; border: 1px solid red; margin-top: -40px"> </div> + </div> + </dv-border-box7> + + <!-- <div class="outDiv"> <div style="height: 100px; width: 400px"> <Progress :stroke-color="{ @@ -173,181 +221,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,126 +409,123 @@ 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 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[]) - - const eqp = ref({} as dryEquipment) - const eqpNum = ref(1) + 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 userStore = useUserStore() const realData = ref({}) const standard = ref({ @@ -487,17 +537,17 @@ 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' realData.value.herbImage = 'yaocai1.png' var moisChart: echarts.ECharts - var waterChart: echarts.ECharts + // var waterChart: echarts.ECharts var bellowsTempChart: echarts.ECharts // var fanFreqChart: echarts.ECharts - var progressBarChart: echarts.ECharts + // var progressBarChart: echarts.ECharts var efficiencyLineChart: echarts.ECharts var compareChart: echarts.ECharts @@ -505,19 +555,19 @@ function initCharts() { let domId = 'moisChart' let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement - let waterDom: HTMLElement = document.getElementById('moisture') 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 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) + // waterChart = echarts.init(waterDom) bellowsTempChart = echarts.init(bellowsTempDom) // fanFreqChart = echarts.init(fanFreqDom) - progressBarChart = echarts.init(progressBarDom) - efficiencyLineChart = echarts.init(efficiencyLineDom) + // progressBarChart = echarts.init(progressBarDom) + // efficiencyLineChart = echarts.init(efficiencyLineDom) compareChart = echarts.init(compaerDom) const option = { @@ -526,9 +576,8 @@ text: '鍚按鐜�/娓╁害瓒嬪娍', textStyle: { color: '#fff', - fontSize: 15 + fontSize: 15, }, - }, tooltip: { trigger: 'axis', @@ -542,8 +591,8 @@ legend: { right: 60, textStyle: { - color: '#fff' - } + color: '#fff', + }, }, // toolbox: { // show: true, @@ -559,8 +608,8 @@ // }, xAxis: { type: 'value', - axisLabel:{ - color: '#fff' + axisLabel: { + color: '#fff', }, //boundaryGap: false, // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], @@ -575,22 +624,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 +674,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 +700,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: [ @@ -685,39 +734,39 @@ }, ], } - const waterOption = { - series: [ - { - type: 'liquidFill', - radius: '100%', - //waveAnimation: false, - amplitude: 3, - animationDuration: 5, - //animationDurationUpdate: 0, - 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: { - show: false, - }, - label: { - // formatter: function () { - // //console.log(`output->params`,params,mois.value) + // const waterOption = { + // series: [ + // { + // type: 'liquidFill', + // radius: '100%', + // //waveAnimation: false, + // amplitude: 3, + // animationDuration: 5, + // //animationDurationUpdate: 0, + // 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: { + // 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) + '%'], - }, - }, - ], - } + // // 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: [ @@ -931,281 +980,278 @@ // ], // } - 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'], - 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 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'], + // 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: standard.value.xiaolv + 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: [ - [0, 1], - [15, 10], - [45, 11], - [70, 6], - ], - markPoint: { - data: [ - { type: 'max', name: 'Max' }, - { type: 'min', name: 'Min' }, - ], - }, - markLine: { - symbol: 'none', - data: [ - { - name: '棰濆畾', - yAxis: standard.value.xiaolv, - }, - ], - label: { - formatter: '{b}\n{c}', - color: '#fff' - }, - }, - // markLine: { - // data: [{ type: 'average', name: 'Avg' }], - // }, - }, - ], - } + // 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: standard.value.xiaolv + 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: [ + // [0, 1], + // [15, 10], + // [45, 11], + // [70, 6], + // ], + // markPoint: { + // data: [ + // { type: 'max', name: 'Max' }, + // { type: 'min', name: 'Min' }, + // ], + // }, + // markLine: { + // symbol: 'none', + // data: [ + // { + // name: '棰濆畾', + // yAxis: standard.value.xiaolv, + // }, + // ], + // 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 + 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,33 +1263,32 @@ show: true, position: 'right', valueAnimation: true, - - color: '#fff' - } + + color: '#fff', + }, }, - ] + ], } - option && moisChart.setOption(option) - waterOption && waterChart.setOption(waterOption) + // waterOption && waterChart.setOption(waterOption) bellowsOption && bellowsTempChart.setOption(bellowsOption) // fanFreqOption && fanFreqChart.setOption(fanFreqOption) - progressBarOption && progressBarChart.setOption(progressBarOption) - efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption) + // 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 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 +1298,7 @@ }) } - function listAllEqp() { + function listAllEqp() { listAll({ enable: 'Y' }) .then((result) => { //console.log(`output->result`, result) @@ -1262,168 +1307,184 @@ // 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 + '%' + // }, + // fontSize: 20, + // }, + // }, + // ], + // }) + // } - 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 (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) { + progressSeries.push({ + name: item.moisture, + type: 'bar', + stack: 'total', + label: { + show: true, }, - fontSize: 20, - }, - }, - ], - }) - } + emphasis: { + focus: 'series', + }, + data: [item.totalTime - totalTime], + }) + ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)]) - /**娓╁害鐜舰鍥� */ - 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 + totalTime = item.totalTime + } + beforeWeight = item.weight + }) - if (curDryTime > 0) { + 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]) + // 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: 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 +1495,282 @@ }, data: [ { - value: res.dryTime - totalTime, + value: res.remain - (res.dryTime - totalTime), + itemStyle: { + color: '#c0c0c0', + }, }, ], }) } - // ganZaoXiaoLv.push([totalTime + res.remain,standard.value.xiaolv]) + /**骞茬嚗杩涘害 */ + // if (progressBarChart) { + // //console.log(`output->progressSeries`, progressSeries) + // progressBarChart.setOption( + // { + // xAxis: { + // max: totalTime + res.remain, + // }, + // series: progressSeries, + // }, + // { replaceMerge: ['series'] } + // ) + // } - 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: [ + 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, + // }, + // ], + // 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: [ { - value: res.remain - (res.dryTime - totalTime), - itemStyle: { - color: '#c0c0c0', + data: res.moisList, + markLine: { + symbol: 'none', + data: [ + { + name: '鐩爣', + yAxis: res.target, + }, + ], + label: { + formatter: '{b}\n{c}%', + color: '#fff', + }, }, + }, + { + data: res.tempArr, }, ], }) - - - } - /**骞茬嚗杩涘害 */ - if (progressBarChart) { - //console.log(`output->progressSeries`, progressSeries) - progressBarChart.setOption( - { - xAxis: { - max: totalTime + res.remain, - }, - series: progressSeries, - }, - { replaceMerge: ['series'] } - ) + /**鏁堢巼瀵规瘮鍥� */ + if (res.originWeight - res.yield <= 0) { + res.xiaolv = standard.value.xiaolv + 6 + } else { + res.xiaolv = (((res.originWeight - res.yield) / res.dryTime) * 60).toFixed(2) } - res.totalTime = totalTime + res.remain - /**骞茬嚗鏁堢巼銆佹秷鑰� */ - if (efficiencyLineChart) { - //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv) - efficiencyLineChart.setOption({ - xAxis: { - max: totalTime + res.remain, + 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.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: ganZaoXiaoLv, - markLine: { - symbol: 'none', - data: [ - { - name: '棰濆畾', - yAxis: standard.value.xiaolv, - }, - ], - label: { - formatter: '{b}\n{c}', - color: '#fff' - }, - } }, - { data: zhengQiXiaoHao }, - { data: dianNengXiaoHao }], + series: { + data: res.compEqpEffic, + }, }) } - res.moisList.push([res.dryTime, res.trendVo.moisture]) - } + res.herbImage = 'yaocai1.png' - /**娓╁害瓒嬪娍 */ - 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.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.state_roller == 4) { - statusGif = 'fanliao-N' - statusTxt = '姝e湪缈绘枡' + res.errorMsg = '鏈変竴涓晠闅滐紝璇锋鏌ャ��' + } else { + res = { + mois: [], + gif: 'tmrefeng2', + herbImage: 'yaocai1.png', } - - 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' - } - } - - //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 +1783,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 +1800,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 +1812,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 +1835,7 @@ line-height: 33px; padding-left: 10px; font-size: 30px; - color: white; + color: white; } .subhead { color: #a19f9c; @@ -1858,7 +1891,6 @@ align-items: center; font-size: 30px; color: #727272; - } .leftTop2 { width: 250px; @@ -1976,23 +2008,24 @@ } .herbInfo { width: 340px; - height: 440px; + height: 510px; color: #727272; } .curEqp { width: 340px; height: 170px; + /* background: white; border-radius: 10px; */ } .curHerb { margin-top: 10px; width: 340px; - height: 260px; + height: 320px; /* background: white; border-radius: 10px; */ - + background-repeat: no-repeat; background-size: 200px; background-position: 0px 10px; @@ -2001,7 +2034,7 @@ width: 690px; height: 440px; /* background: white; */ - + padding: 20px; border-radius: 10px; } @@ -2093,7 +2126,7 @@ .formula { display: flex; width: 340px; - height: 40px; + height: 60px; padding: 0 20px; justify-content: space-around; justify-items: center; @@ -2102,7 +2135,7 @@ .formulaItem { display: flex; justify-content: center; - width: 85px; + width: 100px; height: 40px; } @@ -2125,6 +2158,10 @@ position: absolute; top: 10px; left: 0px; + } + + :deep() .ant-progress-text { + color: white; } :deep() .ant-slider-rail { width: 10px !important; @@ -2158,14 +2195,14 @@ border: none; background: #ce0000; } - :deep() .progress { - padding: 25px 25px; + /* :deep() .progress { + padding: 15px 15px; width: 360px; display: flex; - } + } */ :deep() .ant-progress-bg { - height: 25px !important; + height: 15px !important; } .outDiv { display: flex; @@ -2185,6 +2222,9 @@ text-align: center; } + .flex { + display: flex; + } .centerText { width: 100%; text-align: center; @@ -2213,4 +2253,14 @@ opacity: 0; } } + .timeProgress { + width: 260px; + height: 60px; + margin-left: 40px; + margin-top: 50px; + } + .leftLabel { + width: 50px; + margin-top: -10px; + } </style> -- Gitblit v1.9.3