feat(dry): 新增云平台实时监控大屏相关功能
- 添加 BigEqpCloud 和 BigFaultCloud 路由组件
| | |
|---|
| | | title: t('big.screen.eqp'), |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | export const BigEqpCloud: AppRouteRecordRaw = { |
|---|
| | | path: '/bigEqpCloud', |
|---|
| | | name: 'BigEqpCloud', |
|---|
| | | component: () => import('/@/views/dry/bigScreen/BigEqpCloud.vue'), |
|---|
| | | meta: { |
|---|
| | | title: t('big.screen.eqpCloud'), |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | export const BigFaultCloud: AppRouteRecordRaw = { |
|---|
| | | path: '/bigFaultCloud', |
|---|
| | | name: 'BigFaultCloud', |
|---|
| | | component: () => import('/@/views/dry/bigScreen/BigFaultCloud.vue'), |
|---|
| | | meta: { |
|---|
| | | title: t('big.screen.faultCloud'), |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | //update-begin---author:wangshuai ---date:20220629 forï¼auth2ç»å½é¡µé¢è·¯ç±------------ |
|---|
| | | export const Oauth2LoginRoute: AppRouteRecordRaw = { |
|---|
| | | path: '/oauth2-app/login', |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // Basic routing without permission |
|---|
| | | export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute,BigScreen,BigScreenN,BigEqp] |
|---|
| | | export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute,BigScreen,BigScreenN,BigEqp,BigEqpCloud,BigFaultCloud] |
|---|
| | |
|---|
| | | list = '/dry/dryEquipment/list', |
|---|
| | | queryById = '/dry/dryEquipment/queryById', |
|---|
| | | listAll = '/dry/dryEquipment/listAll', |
|---|
| | | |
|---|
| | | listTenantEqp = '/dry/dryEquipment/listTenantEqp', |
|---|
| | | save = '/dry/dryEquipment/add', |
|---|
| | | edit = '/dry/dryEquipment/edit', |
|---|
| | | deleteOne = '/dry/dryEquipment/delete', |
|---|
| | |
|---|
| | | */ |
|---|
| | | export const listAll = (params) => defHttp.get({ url: Api.listAll, params }) |
|---|
| | | |
|---|
| | | export const listTenantEqp = (params) => defHttp.get({ url: Api.listTenantEqp, params }) |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å é¤å个 |
|---|
| | | */ |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <dv-full-screen-container> |
|---|
| | | <div class="eqpBox"> |
|---|
| | | <div class="eqpRow"> |
|---|
| | | <div class="eqpImage" :style="{ 'background-position': position + 'px' }"> |
|---|
| | | <div class="leftEqp"> |
|---|
| | | <div style="width: 350px"> |
|---|
| | | <div class="herbInfo"> |
|---|
| | | <dv-border-box7 class="curEqp"> |
|---|
| | | <div style="display: flex"> |
|---|
| | | <div style="padding-top: 20px; padding-left: 10px" @click="back"> |
|---|
| | | <Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" /> |
|---|
| | | </div> |
|---|
| | | <div class="eqpName" style="text-align: right" @click="changeEqp"> |
|---|
| | | <div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div> |
|---|
| | | <div class="subhead">{{ eqp?.type }}</div> |
|---|
| | | <dv-decoration-1 style="width: 240px; height: 90px; margin-left: 20px" /> |
|---|
| | | <!-- 设å¤ï¼{{ eqp.name }}</div> |
|---|
| | | <div class="eqpName">åå·ï¼{{ eqp.type }}</div> --> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 class="curHerb" :style="{ 'background-image': 'url(' + getHerbImageUrl(realData?.herbImage) + ')' }"> |
|---|
| | | <div class="eqpName" style="margin-left: 156px; height: 190px"> |
|---|
| | | <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div> |
|---|
| | | <div class="subhead">å¹²ç¥é
æ¹</div> |
|---|
| | | </div> |
|---|
| | | <div class="formula"> |
|---|
| | | <div class="formulaItem"> |
|---|
| | | <Icon style="color: powderblue" icon="la:box" :size="38" /> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo2">{{ realData?.feed || 0 }} ç</div> |
|---|
| | | <div class="subhead2">ææé</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="formulaItem"> |
|---|
| | | <Icon style="color: red" icon="bx:wind" :size="35" /> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo2">{{ realData?.windTemp || 0 }} °C</div> |
|---|
| | | <div class="subhead2">çé£</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="formulaItem"> |
|---|
| | | <Icon style="color: green" icon="tabler:target-arrow" :size="35" /> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo2">{{ realData?.target || 0 }} %</div> |
|---|
| | | <div class="subhead2">ç®æ </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- <div class="eqpName">{{ realData?.herbName }}</div> |
|---|
| | | <div class="eqpName">{{ realData?.feed }} ç</div> --> |
|---|
| | | </dv-border-box7> |
|---|
| | | </div> |
|---|
| | | <!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;"> |
|---|
| | | <div class="chartTittle">é£æºé¢ç</div> |
|---|
| | | <div class="outDiv" style="padding-top: 10px"> |
|---|
| | | <div id="fanFreq" style="width: 240px; height: 240px"></div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> --> |
|---|
| | | <dv-border-box7 class="infoChart" style="margin-left: 0px"> |
|---|
| | | <div class="chartTittle">å«æ°´ç</div> |
|---|
| | | <div class="outDiv" style="padding-top: 20px"> |
|---|
| | | <div class="leftData"> |
|---|
| | | <div class="center" style="height: 50%"> |
|---|
| | | <div class="centerText"> |
|---|
| | | <div class="mainInfo3" |
|---|
| | | ><span>{{ realData?.target || 0 }}</span> % |
|---|
| | | </div> |
|---|
| | | <div class="subhead2">ç®æ å«æ°´ç</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="center" style="height: 50%"> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo3" |
|---|
| | | ><span>{{ realData?.initial || 0 }}</span> %</div |
|---|
| | | > |
|---|
| | | <div class="subhead2">æ¥æå«æ°´ç</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="moisture" style="width: 170px; height: 170px"></div> |
|---|
| | | </div> |
|---|
| | | <div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold">å®æ¶å«æ°´ç</div> |
|---|
| | | </dv-border-box7> |
|---|
| | | </div> |
|---|
| | | <dv-border-box7 class="leftTop"> |
|---|
| | | <div class="leftTop0"> |
|---|
| | | <div class="leftTop1"> |
|---|
| | | <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" /> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo">{{ realData?.totalRemain | 0 }} Min</div> |
|---|
| | | <div class="subhead">å©ä½æ¶é´</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="leftTop1"> |
|---|
| | | <Icon icon="bi:fan" :size="50" /> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo">{{ realData?.trendVo?.fanFrequency | 0 }} Hz</div> |
|---|
| | | <div class="subhead">é£æºé¢ç</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="leftTop3" :style="{ 'background-image': 'url(' + getStatusImageUrl(statusGif) + ')' }"></div> |
|---|
| | | <div class="outDiv eqpStatus"> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | font-size: 28px; |
|---|
| | | |
|---|
| | | color: white; |
|---|
| | | background-color: #1595ea; |
|---|
| | | height: 60px; |
|---|
| | | width: 180px; |
|---|
| | | line-height: 60px; |
|---|
| | | text-align: center; |
|---|
| | | border-radius: 10px; |
|---|
| | | font-weight: bold; |
|---|
| | | " |
|---|
| | | > |
|---|
| | | {{ statusTxt }} |
|---|
| | | </div> |
|---|
| | | <!-- <div v-if="realData?.warning" style=" --> |
|---|
| | | <!-- margin-left: 100px;--> |
|---|
| | | <!-- font-size: 22px;--> |
|---|
| | | <!-- background: sandybrown;--> |
|---|
| | | |
|---|
| | | <!-- border-radius: 10px;--> |
|---|
| | | <!-- line-height: 25px;--> |
|---|
| | | <!-- max-width: 500px;--> |
|---|
| | | <!-- padding: 15px;--> |
|---|
| | | <!-- font-weight: bold;" >--> |
|---|
| | | <!-- {{ realData?.warnMsg }}--> |
|---|
| | | <!-- </div>--> |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | <!-- <div--> |
|---|
| | | <!-- v-if="realData?.isError"--> |
|---|
| | | <!-- class="eqpInfoText blingbling outDiv"--> |
|---|
| | | <!-- style="--> |
|---|
| | | <!-- position: absolute;--> |
|---|
| | | <!-- font-size: 30px;--> |
|---|
| | | <!-- max-height: 200px;--> |
|---|
| | | <!-- max-width: 720px;--> |
|---|
| | | <!-- margin-top: 300px;--> |
|---|
| | | <!-- border-radius: 10px;--> |
|---|
| | | <!-- background-color: #ce0000;--> |
|---|
| | | <!-- color: white;--> |
|---|
| | | <!-- padding: 10px 30px;--> |
|---|
| | | <!-- "--> |
|---|
| | | <!-- >--> |
|---|
| | | <!-- <div class="outDiv">--> |
|---|
| | | <!-- <div><Icon icon="bx:error" :size="30" /> </div>--> |
|---|
| | | <!-- <div--> |
|---|
| | | <!-- ><span>{{ realData?.errorMsg }}</span></div--> |
|---|
| | | <!-- >--> |
|---|
| | | <!-- </div>--> |
|---|
| | | <!-- </div>--> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="width: 848px; height: 485px; position: absolute;" @click="showFault"> |
|---|
| | | <div v-if="true | zuoqianjiting" class="error-div" style=" top:309px; left:418px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style="width: 70px;"> |
|---|
| | | å·¦åæ¥å |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | shebeijiting" class="error-div" style=" top:111px; left:484px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 106px;"> |
|---|
| | | 设å¤æ¥åï¼æ»ï¼ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | chuliaojiting" class="error-div" style=" top:300px; left:129px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 70px;"> |
|---|
| | | åºææ¥å |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | mianbanjiting" class="error-div" style=" top:258px; left:659px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 70px;"> |
|---|
| | | é¢æ¿æ¥å |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | fengxiangsheng" class="error-div" style=" top:294px; left:517px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 86px;"> |
|---|
| | | é£ç®±åå¼å¸¸ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | fengxiangjiang" class="error-div" style=" top:319px; left:517px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 86px;"> |
|---|
| | | é£ç®±éå¼å¸¸ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | fengjiguoliu" class="error-div" style=" top:335px; left:655px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 70px;"> |
|---|
| | | é£æºè¿æµ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | guntongsheng" class="error-div" style=" top:198px; left:517px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 86px;"> |
|---|
| | | æ»çåå¼å¸¸ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | guntongjiang" class="error-div" style=" top:223px; left:517px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 86px;"> |
|---|
| | | æ»çéå¼å¸¸ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | guntongguoliu" class="error-div" style=" top:209px; left:642px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 70px;"> |
|---|
| | | æ»çè¿æµ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | wendubaojing" class="error-div" style=" top:234px; left:659px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 70px;"> |
|---|
| | | 温度æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div v-if="true | zuoqianmen" class="error-div" style=" top:388px; left:415px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 80px;"> |
|---|
| | | å·¦åé¨æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuohoumen" class="error-div" style=" top:367px; left:587px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 80px;"> |
|---|
| | | å·¦åé¨æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youqianmen" class="error-div" style=" top:388px; left:284px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 80px;"> |
|---|
| | | å³åé¨æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youhoumen" class="error-div" style=" top:367px; left:478px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 80px;"> |
|---|
| | | å³åé¨æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div v-if="true | guntongbuzaigaowei" class="error-div" style=" top:173px; left:517px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 100px;"> |
|---|
| | | æ»çä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | fengxiangbuzaigaowei" class="error-div" style=" top:269px; left:517px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 100px;"> |
|---|
| | | é£ç®±ä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | fengxiangbuzaidiwei" class="error-div" style=" top:343px; left:517px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 100px;"> |
|---|
| | | é£ç®±ä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | jiareweichuanganqi" class="error-div" style=" top:283px; left:642px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å çä½ä¼ æå¨æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuoqianfengxianggaowei" class="error-div" style=" top:334px; left:362px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åé£ç®±ä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuoqianfengxiangdiwei" class="error-div" style=" top:334px; left:362px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åé£ç®±ä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuohoufengxianggaowei" class="error-div" style=" top:309px; left:642px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åé£ç®±ä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuohoufengxiangdiwei" class="error-div" style=" top:309px; left:642px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åé£ç®±ä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youqianfengxianggaowei" class="error-div" style=" top:272px; left:300px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åé£ç®±ä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youqianfengxiangdiwei" class="error-div" style=" top:272px; left:300px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åé£ç®±ä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youhoufengxianggaowei" class="error-div" style=" top:246px; left:506px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åé£ç®±ä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youhoufengxiangdiwei" class="error-div" style=" top:246px; left:506px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åé£ç®±ä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuoqianguntongdiwei" class="error-div" style=" top:175px; left:358px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åæ»çä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuohouguntongdiwei" class="error-div" style=" top:158px; left:643px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åæ»çä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youqianguntongdiwei" class="error-div" style=" top:150px; left:268px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åæ»çä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youhouguntongdiwei" class="error-div" style=" top:135px; left:506px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åæ»çä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px"> |
|---|
| | | <div class="chartTittle">é£ç®±æ¸©åº¦</div> |
|---|
| | | <div class="outDiv"> |
|---|
| | | <div id="bellowsTemp" style="width: 230px; height: 230px"> |
|---|
| | | <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 class="leftMid"> |
|---|
| | | <div class="chartTittle">å®æ¶è¿åº¦</div> |
|---|
| | | <div id="efficiencyLine" style="width: 848px; height: 180px; margin-top: -10px"></div> |
|---|
| | | <div style="height: 10px; display: flex; width: 848px; padding: 0 60px; justify-content: space-between"> |
|---|
| | | <div style="width: 100px; height: 20px">{{ realData?.dryTime | 0 }} min</div> |
|---|
| | | <div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div> |
|---|
| | | </div> |
|---|
| | | <div id="progressBar" style="width: 848px; height: 80px"></div> |
|---|
| | | </dv-border-box7> |
|---|
| | | |
|---|
| | | <!-- <div class="outDiv"> |
|---|
| | | <div style="height: 100px; width: 400px"> |
|---|
| | | <Progress |
|---|
| | | :stroke-color="{ |
|---|
| | | from: '#108ee9', |
|---|
| | | to: '#87d068', |
|---|
| | | }" |
|---|
| | | :percent="realData?.percent" |
|---|
| | | status="active" |
|---|
| | | :show-info="false" |
|---|
| | | /> |
|---|
| | | <div style="padding-top: 10px; display: flex; justify-content: space-between; font-weight: bold"> |
|---|
| | | <span>å¹²ç¥ 52 Min</span> |
|---|
| | | <span>é¢è®¡ 120 Min</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <div class="rightInfo"> |
|---|
| | | <div class="rightTop"> |
|---|
| | | <dv-border-box7 class="tempMoisChart"> |
|---|
| | | <div :id="'moisChart'" style="width: 690px; height: 420px"></div> |
|---|
| | | </dv-border-box7> |
|---|
| | | </div> |
|---|
| | | <div class="rightTwo"> |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle"> |
|---|
| | | å¹²ç¥æç(kg/h) |
|---|
| | | <div class="rightLabel"> |
|---|
| | | <div class="label good">>{{ realData?.efficAvg?.toFixed(2) }} ä¼ </div> |
|---|
| | | <div class="label bad"><{{ ((realData?.efficAvg|0) * 0.9)?.toFixed(2) }} å·®</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="outDiv" style="padding-top: 20px"> |
|---|
| | | <div class="leftData"> |
|---|
| | | <div class="center" style="height: 50%"> |
|---|
| | | <div class="centerText"> |
|---|
| | | <div class="mainInfo3" |
|---|
| | | ><span>{{ (realData?.originWeight - realData?.yield) | 0 }}</span> kg |
|---|
| | | </div> |
|---|
| | | <div class="subhead2">æ°´åè¸å</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="center" style="height: 50%"> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo3">{{ realData?.dryTime | 0 }} min</div> |
|---|
| | | <div class="subhead2">å¹²ç¥ç¨æ¶</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="rightChart center"> |
|---|
| | | <div class="center compareBar"> |
|---|
| | | <div class="barTop">{{ realData?.efficAvg?.toFixed(2) }}</div> |
|---|
| | | <div class="barBack"> |
|---|
| | | <div class="barDiv" :style="{ height: realData?.xlsHeight }"></div> |
|---|
| | | </div> |
|---|
| | | <div style="line-height: 20px"> |
|---|
| | | é¢å® |
|---|
| | | <br /> |
|---|
| | | æç |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="center compareBar"> |
|---|
| | | <div class="barTop">{{ realData?.xiaolv?.toFixed(2) || 0 }}</div> |
|---|
| | | <div class="barBack"> |
|---|
| | | <div |
|---|
| | | class="barDiv" |
|---|
| | | :class="{ good: realData?.xlgood, bad: realData?.xlbad }" |
|---|
| | | :style="[realData?.xlrHeight && { height: realData?.xlrHeight }]" |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="line-height: 20px"> |
|---|
| | | å®æ¶ |
|---|
| | | <br /> |
|---|
| | | æç |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle" |
|---|
| | | >è¸æ±½æ¶è(m³/kg) |
|---|
| | | <div class="rightLabel"> |
|---|
| | | <div class="label bad">>{{ realData?.steamAvg?.toFixed(2) }} å·®</div> |
|---|
| | | <div class="label good"><{{ ((realData?.steamAvg|0) * 0.9).toFixed(2) }} ä¼</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="outDiv" style="padding-top: 20px"> |
|---|
| | | <div class="leftData"> |
|---|
| | | <div class="center" style="height: 100%"> |
|---|
| | | <div class="centerText"> |
|---|
| | | <div class="mainInfo3" |
|---|
| | | ><span>{{ realData?.steam }}</span> m³ |
|---|
| | | </div> |
|---|
| | | <div class="subhead2">è¸æ±½ç¨é</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="rightChart center"> |
|---|
| | | <div class="center compareBar"> |
|---|
| | | <div class="barTop">{{ realData?.steamAvg?.toFixed(2) }}</div> |
|---|
| | | <div class="barBack"> |
|---|
| | | <div class="barDiv" :style="{ height: realData?.zqsHeight }"></div> |
|---|
| | | </div> |
|---|
| | | <div style="line-height: 20px"> |
|---|
| | | é¢å® |
|---|
| | | <br /> |
|---|
| | | æ¶è |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="center compareBar"> |
|---|
| | | <div class="barTop">{{ realData?.zhengqi?.toFixed(2) || 0 }}</div> |
|---|
| | | <div class="barBack"> |
|---|
| | | <div |
|---|
| | | class="barDiv" |
|---|
| | | :class="{ good: realData?.zqgood, bad: realData?.zqbad }" |
|---|
| | | :style="[realData?.zqrHeight && { height: realData?.zqrHeight }]" |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="line-height: 20px"> |
|---|
| | | å®æ¶ |
|---|
| | | <br /> |
|---|
| | | æ¶è |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle">æç对æ¯</div> |
|---|
| | | <div class="outDiv" style="padding-top: 10px"> |
|---|
| | | <div id="compare" style="width: 300px; height: 250px"></div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle"> |
|---|
| | | <div> çµè½æ¶è(kWh/kg)</div> |
|---|
| | | <div class="rightLabel"> |
|---|
| | | <div class="label bad">>{{ realData?.wattAvg?.toFixed(3) }} å·®</div> |
|---|
| | | <div class="label good"><{{ ((realData?.wattAvg|0) * 0.9).toFixed(3) }} ä¼</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="outDiv" style="padding-top: 20px"> |
|---|
| | | <div class="leftData"> |
|---|
| | | <div class="center" style="height: 100%"> |
|---|
| | | <div class="centerText"> |
|---|
| | | <div class="mainInfo3" |
|---|
| | | ><span>{{ realData?.watt }}</span> kWh |
|---|
| | | </div> |
|---|
| | | <div class="subhead2">çµè½ç¨é</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="rightChart center"> |
|---|
| | | <div class="center compareBar"> |
|---|
| | | <div class="barTop">{{ realData?.wattAvg?.toFixed(3) }}</div> |
|---|
| | | <div class="barBack"> |
|---|
| | | <div class="barDiv" :style="{ height: realData?.dnsHeight }"></div> |
|---|
| | | </div> |
|---|
| | | <div style="line-height: 20px"> |
|---|
| | | é¢å® |
|---|
| | | <br /> |
|---|
| | | æ¶è |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="center compareBar"> |
|---|
| | | <div class="barTop">{{ realData?.dian?.toFixed(3) || 0 }}</div> |
|---|
| | | <div class="barBack"> |
|---|
| | | <div |
|---|
| | | class="barDiv" |
|---|
| | | :class="{ good: realData?.dngood, bad: realData?.dnbad }" |
|---|
| | | :style="[realData?.dnrHeight && { height: realData?.dnrHeight }]" |
|---|
| | | ></div> |
|---|
| | | </div> |
|---|
| | | <div style="line-height: 20px"> |
|---|
| | | å®æ¶ |
|---|
| | | <br /> |
|---|
| | | æ¶è |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-full-screen-container> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import { useFullscreen } from '@vueuse/core' |
|---|
| | | import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3' |
|---|
| | | import { router } from '/@/router' |
|---|
| | | import { onMounted, ref, onUnmounted } from 'vue' |
|---|
| | | import { Progress } from 'ant-design-vue' |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | import 'echarts-liquidfill' |
|---|
| | | import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index' |
|---|
| | | import { defHttp } from '/@/utils/http/axios' |
|---|
| | | import { queryById, listAll } from '../api/DryEquipment.api' |
|---|
| | | import { dryEquipment } from '../dataDefine/DryEquipment.data' |
|---|
| | | import { useUserStore } from '/@/store/modules/user' |
|---|
| | | const domRef = ref<Nullable<HTMLElement>>(null) |
|---|
| | | const { enter, toggle, exit, isFullscreen } = useFullscreen() |
|---|
| | | |
|---|
| | | const { toggle: toggleDom } = useFullscreen(domRef) |
|---|
| | | const Timer = ref() |
|---|
| | | const Timer2 = ref() |
|---|
| | | const marks = ref<Record<number, any>>({ |
|---|
| | | 0: '0°C', |
|---|
| | | 1: '', |
|---|
| | | 2: '', |
|---|
| | | 3: '', |
|---|
| | | 4: '', |
|---|
| | | 5: '', |
|---|
| | | 6: '', |
|---|
| | | 7: '', |
|---|
| | | 8: '', |
|---|
| | | 9: '', |
|---|
| | | 10: '', |
|---|
| | | 11: '', |
|---|
| | | 12: '', |
|---|
| | | 13: '', |
|---|
| | | 14: '', |
|---|
| | | 15: '', |
|---|
| | | 16: '', |
|---|
| | | 17: '', |
|---|
| | | 18: '', |
|---|
| | | 19: '', |
|---|
| | | 20: '', |
|---|
| | | 21: '', |
|---|
| | | 22: '', |
|---|
| | | 23: '', |
|---|
| | | 24: '', |
|---|
| | | 25: '25°C', |
|---|
| | | 26: '', |
|---|
| | | 27: '', |
|---|
| | | 28: '', |
|---|
| | | 29: '', |
|---|
| | | 30: '', |
|---|
| | | 31: '', |
|---|
| | | 32: '', |
|---|
| | | 33: '', |
|---|
| | | 34: '', |
|---|
| | | 35: '', |
|---|
| | | 36: '', |
|---|
| | | 37: '', |
|---|
| | | 38: '', |
|---|
| | | 39: '', |
|---|
| | | 40: '', |
|---|
| | | 41: '', |
|---|
| | | 42: '', |
|---|
| | | 43: '', |
|---|
| | | 44: '', |
|---|
| | | 45: '', |
|---|
| | | 46: '', |
|---|
| | | 47: '', |
|---|
| | | 48: '', |
|---|
| | | 49: '', |
|---|
| | | 50: '50°C', |
|---|
| | | 51: '', |
|---|
| | | 52: '', |
|---|
| | | 53: '', |
|---|
| | | 54: '', |
|---|
| | | 55: '', |
|---|
| | | 56: '', |
|---|
| | | 57: '', |
|---|
| | | 58: '', |
|---|
| | | 59: '', |
|---|
| | | 60: '', |
|---|
| | | 61: '', |
|---|
| | | 62: '', |
|---|
| | | 63: '', |
|---|
| | | 64: '', |
|---|
| | | 65: '', |
|---|
| | | 66: '', |
|---|
| | | 67: '', |
|---|
| | | 68: '', |
|---|
| | | 69: '', |
|---|
| | | 70: '', |
|---|
| | | 71: '', |
|---|
| | | 72: '', |
|---|
| | | 73: '', |
|---|
| | | 74: '', |
|---|
| | | 75: '75°C', |
|---|
| | | 76: '', |
|---|
| | | 77: '', |
|---|
| | | 78: '', |
|---|
| | | 79: '', |
|---|
| | | 80: '', |
|---|
| | | 81: '', |
|---|
| | | 82: '', |
|---|
| | | 83: '', |
|---|
| | | 84: '', |
|---|
| | | 85: '', |
|---|
| | | 86: '', |
|---|
| | | 87: '', |
|---|
| | | 88: '', |
|---|
| | | 89: '', |
|---|
| | | 90: '', |
|---|
| | | 91: '', |
|---|
| | | 92: '', |
|---|
| | | 93: '', |
|---|
| | | 94: '', |
|---|
| | | 95: '', |
|---|
| | | 96: '', |
|---|
| | | 97: '', |
|---|
| | | 98: '', |
|---|
| | | 99: '', |
|---|
| | | 100: '100°C', |
|---|
| | | }) |
|---|
| | | const eqps = ref([] as dryEquipment[]) |
|---|
| | | console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query) |
|---|
| | | const eqp = ref({} as dryEquipment) |
|---|
| | | const eqpNum = ref(router.currentRoute.value.query.num || 1) |
|---|
| | | const tenant = ref(router.currentRoute.value.query.tenant) |
|---|
| | | const userStore = useUserStore() |
|---|
| | | const realData = ref({}) |
|---|
| | | const standard = ref({ |
|---|
| | | xiaolv: 220, |
|---|
| | | xlMin: 200, |
|---|
| | | zhengqi: 50, |
|---|
| | | zqMin: 45, |
|---|
| | | dian: 8, |
|---|
| | | dMin: 7.5, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const position = ref(1) |
|---|
| | | //realData.value.tempValue = [0, 100] |
|---|
| | | realData.value.mois = [0.5, 0.35, 0.2] |
|---|
| | | statusGif = 'tmrefeng2' |
|---|
| | | realData.value.herbImage = 'yaocai1.png' |
|---|
| | | var moisChart: echarts.ECharts |
|---|
| | | var waterChart: echarts.ECharts |
|---|
| | | |
|---|
| | | var bellowsTempChart: echarts.ECharts |
|---|
| | | // var fanFreqChart: echarts.ECharts |
|---|
| | | var progressBarChart: echarts.ECharts |
|---|
| | | var efficiencyLineChart: echarts.ECharts |
|---|
| | | |
|---|
| | | var compareChart: echarts.ECharts |
|---|
| | | |
|---|
| | | //----------------error---------------- |
|---|
| | | const shebeijiting = ref(false) |
|---|
| | | const chuliaojiting = ref(false) |
|---|
| | | const zuoqianjiting = ref(false) |
|---|
| | | const mianbanjiting = ref(false) |
|---|
| | | const fengxiangsheng = ref(false) |
|---|
| | | const fengxiangjiang = ref(false) |
|---|
| | | const fengjiguoliu = ref(false) |
|---|
| | | const guntongsheng = ref(false) |
|---|
| | | const guntongjiang = ref(false) |
|---|
| | | const guntongguoliu = ref(false) |
|---|
| | | const wendubaojing = ref(false) |
|---|
| | | //--------------warning------------ |
|---|
| | | const zuoqianmen = ref(false) |
|---|
| | | const zuohoumen = ref(false) |
|---|
| | | const youqianmen = ref(false) |
|---|
| | | const youhoumen = ref(false) |
|---|
| | | const guntongbuzaigaowei = ref(false) |
|---|
| | | const fengxiangbuzaigaowei = ref(false) |
|---|
| | | const fengxiangbuzaidiwei = ref(false) |
|---|
| | | const jiareweichuanganqi = ref(false) |
|---|
| | | const zuoqianfengxianggaowei = ref(false) |
|---|
| | | const zuohoufengxianggaowei = ref(false) |
|---|
| | | const youqianfengxianggaowei = ref(false) |
|---|
| | | const youhoufengxianggaowei = ref(false) |
|---|
| | | const zuoqianfengxiangdiwei = ref(false) |
|---|
| | | const zuohoufengxiangdiwei = ref(false) |
|---|
| | | const youqianfengxiangdiwei = ref(false) |
|---|
| | | const youhoufengxiangdiwei = ref(false) |
|---|
| | | const zuoqianguntongdiwei = ref(false) |
|---|
| | | const zuohouguntongdiwei = ref(false) |
|---|
| | | const youqianguntongdiwei = ref(false) |
|---|
| | | const youhouguntongdiwei = ref(false) |
|---|
| | | |
|---|
| | | |
|---|
| | | function initCharts() { |
|---|
| | | let domId = 'moisChart' |
|---|
| | | let chartDom: HTMLElement = document.getElementById(domId) as HTMLElement |
|---|
| | | let waterDom: HTMLElement = document.getElementById('moisture') as HTMLElement |
|---|
| | | let bellowsTempDom: HTMLElement = document.getElementById('bellowsTemp') as HTMLElement |
|---|
| | | // let fanFreqDom: HTMLElement = document.getElementById('fanFreq') as HTMLElement |
|---|
| | | let progressBarDom: HTMLElement = document.getElementById('progressBar') as HTMLElement |
|---|
| | | let efficiencyLineDom: HTMLElement = document.getElementById('efficiencyLine') as HTMLElement |
|---|
| | | // let weightDom: HTMLElement = document.getElementById('weight') as HTMLElement |
|---|
| | | let compaerDom: HTMLElement = document.getElementById('compare') as HTMLElement |
|---|
| | | moisChart = echarts.init(chartDom) |
|---|
| | | waterChart = echarts.init(waterDom) |
|---|
| | | bellowsTempChart = echarts.init(bellowsTempDom) |
|---|
| | | // fanFreqChart = echarts.init(fanFreqDom) |
|---|
| | | progressBarChart = echarts.init(progressBarDom) |
|---|
| | | efficiencyLineChart = echarts.init(efficiencyLineDom) |
|---|
| | | compareChart = echarts.init(compaerDom) |
|---|
| | | |
|---|
| | | const option = { |
|---|
| | | color: ['green', 'red'], |
|---|
| | | title: { |
|---|
| | | text: 'å«æ°´ç/温度è¶å¿', |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: 15, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: 50, |
|---|
| | | right: 70, |
|---|
| | | top: 50, |
|---|
| | | bottom: 60, |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | right: 60, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | // toolbox: { |
|---|
| | | // show: true, |
|---|
| | | // feature: { |
|---|
| | | // dataZoom: { |
|---|
| | | // yAxisIndex: 'none', |
|---|
| | | // }, |
|---|
| | | // dataView: { readOnly: false }, |
|---|
| | | // magicType: { type: ['line', 'bar'] }, |
|---|
| | | // restore: {}, |
|---|
| | | // saveAsImage: {}, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | //boundaryGap: false, |
|---|
| | | // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|---|
| | | min: 0, |
|---|
| | | max: function (value) { |
|---|
| | | if (value.max < 100) { |
|---|
| | | return 100 |
|---|
| | | } else { |
|---|
| | | return value.max |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | type: 'dashed', |
|---|
| | | color: ['#2b2b2b'], |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | boundaryGap: ['10%', '10%'], |
|---|
| | | axisLabel: { |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | type: 'dashed', |
|---|
| | | color: ['#2b2b2b'], |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | // min: 0, |
|---|
| | | // max: function (value) { |
|---|
| | | // if (value.max < 100) { |
|---|
| | | // return 100 |
|---|
| | | // } else { |
|---|
| | | // return value.max |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | }, |
|---|
| | | // yAxis: { |
|---|
| | | // type: 'value', |
|---|
| | | // axisLabel: { |
|---|
| | | // formatter: '{value} °C', |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'å«æ°´ç', |
|---|
| | | type: 'line', |
|---|
| | | smooth: true, |
|---|
| | | symbol: 'none', |
|---|
| | | data: [ |
|---|
| | | |
|---|
| | | ], |
|---|
| | | lineStyle: { |
|---|
| | | width: 1, |
|---|
| | | }, |
|---|
| | | markLine: { |
|---|
| | | data: [{ type: 'average', name: 'Avg' }], |
|---|
| | | }, |
|---|
| | | areaStyle: { |
|---|
| | | opacity: 0.2, |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgb(128, 255, 165)', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: 'rgb(1, 191, 236)', |
|---|
| | | }, |
|---|
| | | ]), |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '温度', |
|---|
| | | type: 'line', |
|---|
| | | smooth: true, |
|---|
| | | symbol: 'none', |
|---|
| | | data: [ |
|---|
| | | |
|---|
| | | ], |
|---|
| | | lineStyle: { |
|---|
| | | width: 1, |
|---|
| | | }, |
|---|
| | | areaStyle: { |
|---|
| | | opacity: 0.2, |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgb(255, 0, 135)', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: 'rgb(135, 0, 157)', |
|---|
| | | }, |
|---|
| | | ]), |
|---|
| | | }, |
|---|
| | | // markLine: { |
|---|
| | | // data: [ |
|---|
| | | // { type: 'average', name: 'Avg' }, |
|---|
| | | // [ |
|---|
| | | // { |
|---|
| | | // symbol: 'none', |
|---|
| | | // x: '90%', |
|---|
| | | // yAxis: 'max', |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // symbol: 'circle', |
|---|
| | | // label: { |
|---|
| | | // position: 'start', |
|---|
| | | // formatter: 'Max', |
|---|
| | | // }, |
|---|
| | | // type: 'max', |
|---|
| | | // name: 'æé«ç¹', |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | // ], |
|---|
| | | // }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | const waterOption = { |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: 'liquidFill', |
|---|
| | | radius: '100%', |
|---|
| | | //waveAnimation: false, |
|---|
| | | amplitude: 3, |
|---|
| | | animationDuration: 5, |
|---|
| | | //animationDurationUpdate: 0, |
|---|
| | | data: [0, 0, 0], |
|---|
| | | shape: |
|---|
| | | 'path://M828.817,706.209C828.817,881.725,686.98,1024,512,1024c-174.98,0-316.817-142.275-316.817-317.791C195.183,530.74,512,0,512,0s316.817,530.74,316.817,706.209z', |
|---|
| | | outline: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | // formatter: function () { |
|---|
| | | // //console.log(`output->params`,params,mois.value) |
|---|
| | | |
|---|
| | | // return ( |
|---|
| | | // '' + |
|---|
| | | // // +'åå§'+(mois.value[0]*100).toFixed(2) + '%\n\n\n' |
|---|
| | | // (mois.value[1] * 100).toFixed(2) + |
|---|
| | | // '%' |
|---|
| | | // // + '\n\n\nç®æ '+(mois.value[2]*100).toFixed(2) + '%' |
|---|
| | | // ) |
|---|
| | | // }, |
|---|
| | | fontSize: 20, |
|---|
| | | //position: ['50%',(100-mois.value[1]*100).toFixed(2) + '%'], |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | |
|---|
| | | const bellowsOption = { |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: 'gauge', |
|---|
| | | center: ['50%', '60%'], |
|---|
| | | startAngle: 215, |
|---|
| | | endAngle: -35, |
|---|
| | | min: 0, |
|---|
| | | max: 80, |
|---|
| | | splitNumber: 8, |
|---|
| | | itemStyle: { |
|---|
| | | color: '#FFAB91', |
|---|
| | | }, |
|---|
| | | progress: { |
|---|
| | | show: true, |
|---|
| | | width: 10, |
|---|
| | | }, |
|---|
| | | pointer: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | width: 10, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | distance: -15, |
|---|
| | | splitNumber: 5, |
|---|
| | | length: 3, |
|---|
| | | lineStyle: { |
|---|
| | | width: 1, |
|---|
| | | color: '#999', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | distance: -18, |
|---|
| | | length: 6, |
|---|
| | | lineStyle: { |
|---|
| | | width: 2, |
|---|
| | | color: '#999', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | distance: -13, |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | anchor: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | detail: { |
|---|
| | | valueAnimation: true, |
|---|
| | | width: '60%', |
|---|
| | | lineHeight: 40, |
|---|
| | | borderRadius: 8, |
|---|
| | | offsetCenter: [0, '0%'], |
|---|
| | | fontSize: 20, |
|---|
| | | fontWeight: 'bolder', |
|---|
| | | formatter: '{value}°C', |
|---|
| | | color: 'inherit', |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 0, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'gauge', |
|---|
| | | center: ['50%', '60%'], |
|---|
| | | startAngle: 215, |
|---|
| | | endAngle: -35, |
|---|
| | | min: 0, |
|---|
| | | max: 80, |
|---|
| | | itemStyle: { |
|---|
| | | color: '#FD7347', |
|---|
| | | }, |
|---|
| | | progress: { |
|---|
| | | show: true, |
|---|
| | | width: 3, |
|---|
| | | }, |
|---|
| | | pointer: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | detail: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 0, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | |
|---|
| | | // const fanFreqOption = { |
|---|
| | | // series: [ |
|---|
| | | // { |
|---|
| | | // type: 'gauge', |
|---|
| | | // progress: { |
|---|
| | | // show: true, |
|---|
| | | // width: 9, |
|---|
| | | // }, |
|---|
| | | // axisLine: { |
|---|
| | | // lineStyle: { |
|---|
| | | // width: 9, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // axisTick: { |
|---|
| | | // show: false, |
|---|
| | | // }, |
|---|
| | | // splitLine: { |
|---|
| | | // distance: 3, |
|---|
| | | // length: 4, |
|---|
| | | // lineStyle: { |
|---|
| | | // width: 1, |
|---|
| | | // color: '#999', |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // axisLabel: { |
|---|
| | | // distance: 15, |
|---|
| | | // color: '#999', |
|---|
| | | // fontSize: 10, |
|---|
| | | // }, |
|---|
| | | // anchor: { |
|---|
| | | // show: true, |
|---|
| | | // showAbove: true, |
|---|
| | | // size: 10, |
|---|
| | | // itemStyle: { |
|---|
| | | // borderWidth: 3, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // title: { |
|---|
| | | // show: false, |
|---|
| | | // }, |
|---|
| | | // detail: { |
|---|
| | | // valueAnimation: true, |
|---|
| | | // fontSize: 20, |
|---|
| | | // offsetCenter: [0, '70%'], |
|---|
| | | // formatter: '{value}Hz', |
|---|
| | | // }, |
|---|
| | | // data: [ |
|---|
| | | // { |
|---|
| | | // value: 56, |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | // } |
|---|
| | | // const weightOption = { |
|---|
| | | // // title: { |
|---|
| | | // // text: 'Referer of a Website', |
|---|
| | | // // subtext: 'Fake Data', |
|---|
| | | // // left: 'center' |
|---|
| | | // // }, |
|---|
| | | // color: ['#1595EA', '#2C4D90', '#FF7F7F'], |
|---|
| | | // tooltip: { |
|---|
| | | // trigger: 'item', |
|---|
| | | // }, |
|---|
| | | // radius: [0, '85%'], |
|---|
| | | // // grid: { |
|---|
| | | // // top: 20, |
|---|
| | | // // left: 20, |
|---|
| | | // // right: 20, |
|---|
| | | // // bottom: 20, |
|---|
| | | // // }, |
|---|
| | | // // legend: { |
|---|
| | | // // orient: 'vertical', |
|---|
| | | // // left: 'left', |
|---|
| | | // // }, |
|---|
| | | // series: [ |
|---|
| | | // { |
|---|
| | | // name: 'ééæ°æ®', |
|---|
| | | // type: 'pie', |
|---|
| | | // radius: '50%', |
|---|
| | | // data: [ |
|---|
| | | // { value: 1048, name: 'å©ä½éé' }, |
|---|
| | | // { value: 735, name: 'çå»éé' }, |
|---|
| | | // ], |
|---|
| | | // label: { |
|---|
| | | // show: false, |
|---|
| | | // }, |
|---|
| | | // labelLine: { |
|---|
| | | // show: false, |
|---|
| | | // }, |
|---|
| | | // emphasis: { |
|---|
| | | // itemStyle: { |
|---|
| | | // shadowBlur: 10, |
|---|
| | | // shadowOffsetX: 0, |
|---|
| | | // shadowColor: 'rgba(0, 0, 0, 0.5)', |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | // } |
|---|
| | | |
|---|
| | | const progressBarOption = { |
|---|
| | | // tooltip: { |
|---|
| | | // trigger: 'axis', |
|---|
| | | // axisPointer: { |
|---|
| | | // // Use axis to trigger tooltip |
|---|
| | | // type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow' |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // color: [ |
|---|
| | | // '#0653F6', |
|---|
| | | // // '#1B61E7', |
|---|
| | | // '#3673D5', |
|---|
| | | // // '#4A80C8', |
|---|
| | | // '#608FB8', |
|---|
| | | // // '#719BAD', |
|---|
| | | // '#82A6A1', |
|---|
| | | // // '#8DAD9A', |
|---|
| | | // '#9CB790', |
|---|
| | | // // '#A7BE88', |
|---|
| | | // '#B3C681', |
|---|
| | | // '#CAD671', |
|---|
| | | // '#DBE165', |
|---|
| | | // ], |
|---|
| | | animation: false, // å
³éå¨ç» |
|---|
| | | color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8', '#60FFFE', '#64FAFF', '#70FFFF', '#7BFFFF', '#88FFFD', '#97FFFF', '#A5FFFD', '#B1FFFF', '#BFFFFF', '#CAFFFF'], |
|---|
| | | grid: { |
|---|
| | | top: '12%', |
|---|
| | | left: '20', |
|---|
| | | right: '55', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | min: 0, |
|---|
| | | max: 150, |
|---|
| | | show: false, |
|---|
| | | type: 'value', |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | show: false, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | type: 'category', |
|---|
| | | data: ['æ¶é´'], |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | // { |
|---|
| | | // name: '第ä¸é¶æ®µ', |
|---|
| | | // type: 'bar', |
|---|
| | | // stack: 'total', |
|---|
| | | // label: { |
|---|
| | | // show: true, |
|---|
| | | // }, |
|---|
| | | // barWidth: 26, |
|---|
| | | // emphasis: { |
|---|
| | | // focus: 'series', |
|---|
| | | // }, |
|---|
| | | // data: [30], |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // name: '第äºé¶æ®µ', |
|---|
| | | // type: 'bar', |
|---|
| | | // stack: 'total', |
|---|
| | | // label: { |
|---|
| | | // show: true, |
|---|
| | | // }, |
|---|
| | | // emphasis: { |
|---|
| | | // focus: 'series', |
|---|
| | | // }, |
|---|
| | | // data: [30], |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // name: 'Affiliate Ad', |
|---|
| | | // type: 'bar', |
|---|
| | | // stack: 'total', |
|---|
| | | // label: { |
|---|
| | | // show: true, |
|---|
| | | // }, |
|---|
| | | // emphasis: { |
|---|
| | | // focus: 'series', |
|---|
| | | // }, |
|---|
| | | // data: [20], |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // name: 'Video Ad', |
|---|
| | | // type: 'bar', |
|---|
| | | // stack: 'total', |
|---|
| | | // label: { |
|---|
| | | // show: true, |
|---|
| | | // }, |
|---|
| | | // emphasis: { |
|---|
| | | // focus: 'series', |
|---|
| | | // }, |
|---|
| | | // data: [15], |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // name: 'Search Engine', |
|---|
| | | // type: 'bar', |
|---|
| | | // stack: 'total', |
|---|
| | | // label: { |
|---|
| | | // show: true, |
|---|
| | | // }, |
|---|
| | | // emphasis: { |
|---|
| | | // focus: 'series', |
|---|
| | | // }, |
|---|
| | | // data: [10], |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // name: 'df Engine', |
|---|
| | | // type: 'bar', |
|---|
| | | // stack: 'total', |
|---|
| | | // label: { |
|---|
| | | // show: true, |
|---|
| | | // }, |
|---|
| | | // emphasis: { |
|---|
| | | // focus: 'series', |
|---|
| | | // }, |
|---|
| | | // data: [5], |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // name: 'df Engine', |
|---|
| | | // type: 'bar', |
|---|
| | | // stack: 'total', |
|---|
| | | // label: { |
|---|
| | | // show: true, |
|---|
| | | // }, |
|---|
| | | // emphasis: { |
|---|
| | | // focus: 'series', |
|---|
| | | // }, |
|---|
| | | // data: [5], |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // name: 'df Engine', |
|---|
| | | // type: 'bar', |
|---|
| | | // stack: 'total', |
|---|
| | | // label: { |
|---|
| | | // show: true, |
|---|
| | | // }, |
|---|
| | | // emphasis: { |
|---|
| | | // focus: 'series', |
|---|
| | | // }, |
|---|
| | | // data: [ |
|---|
| | | // { |
|---|
| | | // value: 35, |
|---|
| | | // itemStyle: { |
|---|
| | | // color: '#c0c0c0', |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | // }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | |
|---|
| | | const efficiencyLineOption = { |
|---|
| | | title: {}, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | top: '30%', |
|---|
| | | left: '17', |
|---|
| | | right: '57', |
|---|
| | | bottom: '0%', |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | right: 60, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | show: false, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | type: 'value', |
|---|
| | | min: 0, |
|---|
| | | max: 150, |
|---|
| | | // data: [15, 15, 10, 7.5, 5, 2.5, 2.5, 1], |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | show: false, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | formatter: '{value} °C', |
|---|
| | | }, |
|---|
| | | // max: eqp.value.dryEfficiency + 3, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'å¹²ç¥æç', |
|---|
| | | type: 'line', |
|---|
| | | lineStyle: { |
|---|
| | | width: 1, |
|---|
| | | }, |
|---|
| | | // [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]] |
|---|
| | | data: [ |
|---|
| | | |
|---|
| | | ], |
|---|
| | | markPoint: { |
|---|
| | | data: [ |
|---|
| | | { type: 'max', name: 'Max' }, |
|---|
| | | { type: 'min', name: 'Min' }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | markLine: { |
|---|
| | | symbol: 'none', |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: 'é¢å®', |
|---|
| | | yAxis: 100, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | label: { |
|---|
| | | formatter: '{b}\n{c}', |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | // markLine: { |
|---|
| | | // data: [{ type: 'average', name: 'Avg' }], |
|---|
| | | // }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | |
|---|
| | | const compareOption = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | top: '6%', |
|---|
| | | left: '3%', |
|---|
| | | right: '10%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | show: false, |
|---|
| | | type: 'value', |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | type: 'category', |
|---|
| | | data: ['1#', '2#', '3#', '4#', '5#', '6#'], |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '2011', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: 10, |
|---|
| | | data: [0, 0, 0, 0, 0, 0], |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | position: 'right', |
|---|
| | | valueAnimation: true, |
|---|
| | | |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | |
|---|
| | | option && moisChart.setOption(option) |
|---|
| | | waterOption && waterChart.setOption(waterOption) |
|---|
| | | bellowsOption && bellowsTempChart.setOption(bellowsOption) |
|---|
| | | // fanFreqOption && fanFreqChart.setOption(fanFreqOption) |
|---|
| | | |
|---|
| | | progressBarOption && progressBarChart.setOption(progressBarOption) |
|---|
| | | efficiencyLineOption && efficiencyLineChart.setOption(efficiencyLineOption) |
|---|
| | | compareOption && compareChart.setOption(compareOption) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¨æ读åå¾ç |
|---|
| | | function getHerbImageUrl(name: string) { |
|---|
| | | return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¨æ读åå¾ç |
|---|
| | | function getStatusImageUrl(name: string) { |
|---|
| | | if (name =='zanting') { |
|---|
| | | return new URL(`/src/assets/images/dry/${name}.png`, import.meta.url).href |
|---|
| | | } else { |
|---|
| | | return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | function queryEqp() { |
|---|
| | | queryById({ id: router.currentRoute.value.params.id }).then((res) => { |
|---|
| | | // console.log(`output->res`, res) |
|---|
| | | eqp.value = res |
|---|
| | | eqp.value.dryEfficiency = res.dryEfficiency |
|---|
| | | eqp.value.steamConsumption = res.steamConsumption |
|---|
| | | eqp.value.powerConsumption = res.powerConsumption |
|---|
| | | queryRealTime() |
|---|
| | | setTimeout(initCharts, 500) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function listAllEqp() { |
|---|
| | | listAll({ enable: 'Y' }) |
|---|
| | | .then((result) => { |
|---|
| | | //console.log(`output->result`, result) |
|---|
| | | eqps.value = result |
|---|
| | | // result.forEach((item) => { |
|---|
| | | // eqpCodes.push(item.code) |
|---|
| | | // }) |
|---|
| | | queryRealTime() |
|---|
| | | setTimeout(initCharts, 500) |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | //console.log(`output->err`, err) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | var num = eqpNum.value |
|---|
| | | |
|---|
| | | function changeEqp() { |
|---|
| | | //console.log("changeEqp::",eqps.value.length); |
|---|
| | | num++ |
|---|
| | | if (eqps.value.length > 0) { |
|---|
| | | var i = num % eqps.value.length |
|---|
| | | //eqp.value = eqps.value[i] |
|---|
| | | // console.log("777",i); |
|---|
| | | eqpNum.value = i |
|---|
| | | //console.log("888",eqp.value); |
|---|
| | | queryRealTime() |
|---|
| | | //setTimeout(initCharts, 500) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // function queryEqpsReal() { |
|---|
| | | |
|---|
| | | // if (eqps.value.length > 0) { |
|---|
| | | // var i = num%eqps.value.length |
|---|
| | | // eqp.value = eqps[i] |
|---|
| | | // console.log("777",i); |
|---|
| | | // console.log("888",eqp.value); |
|---|
| | | // queryRealTime() |
|---|
| | | // //setTimeout(initCharts, 500) |
|---|
| | | // } |
|---|
| | | // num ++; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | var shangliaoFlag = false |
|---|
| | | var statusGif = 'tmrefeng2' |
|---|
| | | var statusTxt = 'æ£å¨å¹²ç¥' |
|---|
| | | |
|---|
| | | function chaiwangban() { |
|---|
| | | statusGif = 'chaiwangban-1' |
|---|
| | | setTimeout(shangliao, 7000) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function shangliao() { |
|---|
| | | statusGif = 'shangliao-N' |
|---|
| | | setTimeout(() => { |
|---|
| | | statusGif = 'zhuangwangban' |
|---|
| | | setTimeout(() => { |
|---|
| | | statusGif = 'guanmen1' |
|---|
| | | setTimeout(() => { |
|---|
| | | shangliaoFlag = false |
|---|
| | | }, 4000) |
|---|
| | | }, 7000) |
|---|
| | | }, 15000) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function queryRealTime() { |
|---|
| | | if (eqp.value) { |
|---|
| | | eqp.value = eqps.value[eqpNum.value] |
|---|
| | | // console.log("888",eqp.value); |
|---|
| | | |
|---|
| | | let eqpCode = eqp.value.code |
|---|
| | | let queryRealTimeUrl = '/dry/real/getRealTimeData' |
|---|
| | | defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenant.value, machineid: eqpCode } }).then((res) => { |
|---|
| | | if (res && res.trendVo) { |
|---|
| | | //console.log(`output->re11s`, res) |
|---|
| | | // res.tempValue = [res.windTemp, 100] |
|---|
| | | //res.percent = ((res.dryTime / res.et) * 100).toFixed(2) |
|---|
| | | /**æ°´æ»´å¾å«æ°´é */ |
|---|
| | | res.mois = [ |
|---|
| | | (res.trendVo.moisture / 100).toFixed(2), |
|---|
| | | (res.trendVo.moisture / 100 / 1.5).toFixed(2), |
|---|
| | | (res.trendVo.moisture / 100 / 3).toFixed(2), |
|---|
| | | ] |
|---|
| | | if (waterChart) { |
|---|
| | | waterChart.setOption({ |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: res.mois, |
|---|
| | | label: { |
|---|
| | | formatter: function () { |
|---|
| | | return res.trendVo.moisture + '%' |
|---|
| | | }, |
|---|
| | | fontSize: 20, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /**温度ç¯å½¢å¾ */ |
|---|
| | | if (bellowsTempChart) { |
|---|
| | | bellowsTempChart.setOption({ |
|---|
| | | series: [{ data: [{ value: res.trendVo.bellowsTemp }] }, { data: [{ value: res.trendVo.bellowsTemp }] }], |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | /**é£æºé¢çç¯å½¢å¾ */ |
|---|
| | | // if (fanFreqChart) { |
|---|
| | | // fanFreqChart.setOption({ |
|---|
| | | // series: [ |
|---|
| | | // { |
|---|
| | | // data: [ |
|---|
| | | // { |
|---|
| | | // value: res.trendVo.fanFrequency, |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | /**å¹²ç¥è¿åº¦ãèµ°å¿ä¸é¶æ®µæçåé¶æ®µæ¶è */ |
|---|
| | | if (res && res.detailList) { |
|---|
| | | var progressSeries = [] |
|---|
| | | |
|---|
| | | var zhengQiXiaoHao = [] |
|---|
| | | var dianNengXiaoHao = [] |
|---|
| | | var ganZaoXiaoLv = [] |
|---|
| | | var totalTime = 0 |
|---|
| | | var beforeWeight = 0 |
|---|
| | | res.moisList = [] |
|---|
| | | beforeWeight = res.originWeight |
|---|
| | | //console.log(`output->res`, res) |
|---|
| | | res.detailList.forEach((item) => { |
|---|
| | | //console.log(`output->bef`, beforeWeight) |
|---|
| | | //console.log(`output->cur`, item.weight) |
|---|
| | | res.moisList.push([item.totalTime, item.moisture]) |
|---|
| | | // console.log(`output->totalTime,item.totalTime`, totalTime, item.totalTime) |
|---|
| | | var curDryTime = item.totalTime - totalTime |
|---|
| | | |
|---|
| | | if (curDryTime > 0) { |
|---|
| | | progressSeries.push({ |
|---|
| | | name: item.moisture, |
|---|
| | | type: 'bar', |
|---|
| | | stack: 'total', |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | focus: 'series', |
|---|
| | | }, |
|---|
| | | data: [item.totalTime - totalTime], |
|---|
| | | }) |
|---|
| | | ganZaoXiaoLv.push([curDryTime / 2 + totalTime, (((beforeWeight - item.weight) / curDryTime) * 60).toFixed(1)]) |
|---|
| | | |
|---|
| | | totalTime = item.totalTime |
|---|
| | | } |
|---|
| | | beforeWeight = item.weight |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (res.remain) { |
|---|
| | | if (res.dryTime - totalTime > 0) { |
|---|
| | | progressSeries.push({ |
|---|
| | | name: 'å½å', |
|---|
| | | type: 'bar', |
|---|
| | | stack: 'total', |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | focus: 'series', |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: res.dryTime - totalTime, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ganZaoXiaoLv.push([totalTime + res.remain,eqp.value.dryEfficiency]) |
|---|
| | | // console.log(`output->res.remain`, res.remain) |
|---|
| | | // console.log(`output->res.dryTime`, res.dryTime) |
|---|
| | | // console.log(`output->totalTime`, totalTime) |
|---|
| | | // å¹²ç¥å©ä½æ¶é´=å·¥åé¢è®¡å©ä½-ï¼å½åå¹²ç¥æ¶é´-æåä¸æ¬¡è®°å½å¹²ç¥æ¶é´ï¼ |
|---|
| | | res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0 |
|---|
| | | progressSeries.push({ |
|---|
| | | name: 'å©ä½', |
|---|
| | | type: 'bar', |
|---|
| | | stack: 'total', |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | focus: 'series', |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: res.remain - (res.dryTime - totalTime), |
|---|
| | | itemStyle: { |
|---|
| | | color: '#c0c0c0', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /**å¹²ç¥è¿åº¦ */ |
|---|
| | | if (progressBarChart) { |
|---|
| | | //console.log(`output->progressSeries`, progressSeries) |
|---|
| | | progressBarChart.setOption( |
|---|
| | | { |
|---|
| | | xAxis: { |
|---|
| | | max: totalTime + res.remain, |
|---|
| | | }, |
|---|
| | | series: progressSeries, |
|---|
| | | }, |
|---|
| | | { replaceMerge: ['series'] } |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | |
|---|
| | | res.totalTime = totalTime + res.remain |
|---|
| | | console.log("efficAvg::",res.efficAvg); |
|---|
| | | /**å¹²ç¥æçãæ¶è */ |
|---|
| | | if (efficiencyLineChart) { |
|---|
| | | //console.log(`output->ganZaoXiaoLv`, ganZaoXiaoLv) |
|---|
| | | efficiencyLineChart.setOption({ |
|---|
| | | xAxis: { |
|---|
| | | max: totalTime + res.remain, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: ganZaoXiaoLv, |
|---|
| | | markLine: { |
|---|
| | | symbol: 'none', |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: 'é¢å®', |
|---|
| | | yAxis: res.efficAvg|0, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | label: { |
|---|
| | | formatter: '{b}\n{c}', |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { data: zhengQiXiaoHao }, |
|---|
| | | { data: dianNengXiaoHao }, |
|---|
| | | ], |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | res.moisList.push([res.dryTime, res.trendVo.moisture]) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /**温度è¶å¿ */ |
|---|
| | | if (res && res.bellowsTemp) { |
|---|
| | | Array.from(Object.entries(res.bellowsTemp)) |
|---|
| | | var arr = Object.keys(res.bellowsTemp) |
|---|
| | | var temArr = [] |
|---|
| | | arr.forEach((item) => { |
|---|
| | | temArr.push([item * 1, res.bellowsTemp[item]]) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | //console.log(`output->arr` + JSON.stringify(temArr)) |
|---|
| | | res.tempArr = temArr |
|---|
| | | } |
|---|
| | | |
|---|
| | | /**å¹²ç¥è¿ç¨è¶å¿ */ |
|---|
| | | if (moisChart) { |
|---|
| | | //console.log(`output->æ´æ°chart`) |
|---|
| | | moisChart.setOption({ |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: res.moisList, |
|---|
| | | markLine: { |
|---|
| | | symbol: 'none', |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: 'ç®æ ', |
|---|
| | | yAxis: res.target, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | label: { |
|---|
| | | formatter: '{b}\n{c}%', |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | data: res.tempArr, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | let lastTrend = res.detailList[res.detailList.length-1] |
|---|
| | | /**æç对æ¯å¾ */ |
|---|
| | | if (res.originWeight - lastTrend.weight <= 0) { |
|---|
| | | res.xiaolv = 0 |
|---|
| | | } else { |
|---|
| | | res.xiaolv = ((res.originWeight - lastTrend.weight) / lastTrend.totalTime) * 60 |
|---|
| | | } |
|---|
| | | res.xiaolv = Number(res.xiaolv) |
|---|
| | | //eqp.value.dryEfficiency = Number(eqp.value.dryEfficiency) |
|---|
| | | if (res.xiaolv > res.efficAvg) { |
|---|
| | | console.log("xiaolv:",res , eqp); |
|---|
| | | res.xlgood = true |
|---|
| | | res.xlsHeight = (res.efficAvg / res.xiaolv) * 100 + '%' |
|---|
| | | res.xlrHeight = '100%' |
|---|
| | | } else if (res.xiaolv < res.efficAvg * 0.9) { |
|---|
| | | res.xlbad = true |
|---|
| | | res.xlsHeight = '100%' |
|---|
| | | res.xlrHeight = (res.xiaolv / res.efficAvg) * 100 + '%' |
|---|
| | | } else { |
|---|
| | | res.xlsHeight = '100%' |
|---|
| | | res.xlrHeight = (res.xiaolv / res.efficAvg) * 100 + '%' |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** è¸æ±½æ¶è */ |
|---|
| | | if (res.originWeight - lastTrend.weight <= 0) { |
|---|
| | | res.zhengqi = 0 |
|---|
| | | } else { |
|---|
| | | res.zhengqi = lastTrend.steam / (res.originWeight - lastTrend.weight) |
|---|
| | | } |
|---|
| | | res.zhengqi = Number(res.zhengqi) |
|---|
| | | //eqp.value.steamConsumption = Number(eqp.value.steamConsumption) |
|---|
| | | // res.zhengqi = eqp.value.steamConsumption - 3 |
|---|
| | | // console.log(res); |
|---|
| | | // console.log('zhengqi:', res.zhengqi); |
|---|
| | | if (res.zhengqi > res.steamAvg) { |
|---|
| | | res.zqbad = true |
|---|
| | | res.zqsHeight = (res.steamAvg / res.zhengqi) * 100 + '%' |
|---|
| | | res.zqrHeight = '100%' |
|---|
| | | } else if (res.zhengqi < res.steamAvg * 0.9) { |
|---|
| | | res.zqgood = true |
|---|
| | | res.zqsHeight = '100%' |
|---|
| | | res.zqrHeight = (res.zhengqi / res.steamAvg) * 100 + '%' |
|---|
| | | } else { |
|---|
| | | res.zqsHeight = '100%' |
|---|
| | | res.zqrHeight = (res.zhengqi / res.steamAvg) * 100 + '%' |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** çµè½æ¶è */ |
|---|
| | | if (res.originWeight - lastTrend.weight <= 0) { |
|---|
| | | res.dian = 0 |
|---|
| | | } else { |
|---|
| | | res.dian = lastTrend.watt / (res.originWeight - lastTrend.weight) |
|---|
| | | } |
|---|
| | | // res.dian = eqp.value.powerConsumption - 1.5 |
|---|
| | | res.dian = Number(res.dian) |
|---|
| | | //eqp.value.powerConsumption = Number(eqp.value.powerConsumption) |
|---|
| | | if (res.dian > res.wattAvg) { |
|---|
| | | console.log("dian::", res.dian,res.wattAvg ) |
|---|
| | | res.dnbad = true |
|---|
| | | res.dnsHeight = (res.wattAvg / res.dian) * 100 + '%' |
|---|
| | | res.dnrHeight = '100%' |
|---|
| | | } else if (res.dian < res.wattAvg * 0.9) { |
|---|
| | | res.dngood = true |
|---|
| | | res.dnsHeight = '100%' |
|---|
| | | res.dnrHeight = (res.dian / res.wattAvg) * 100 + '%' |
|---|
| | | } else { |
|---|
| | | res.dnsHeight = '100%' |
|---|
| | | res.dnrHeight = (res.dian / res.wattAvg) * 100 + '%' |
|---|
| | | } |
|---|
| | | |
|---|
| | | //console.log('state:::fan::', res.state_fan, 'roller::', res.state_roller, 'windbox::', res.state_windbox) |
|---|
| | | //console.log('===========================') |
|---|
| | | //console.log("state:::state_windbox::", res.state_windbox); |
|---|
| | | |
|---|
| | | /**ç¶æ/gifå¨å¾ */ |
|---|
| | | if (!shangliaoFlag) { |
|---|
| | | if (res.orderStatus == 0) { |
|---|
| | | statusGif = 'zanting' |
|---|
| | | statusTxt = 'åå¤' |
|---|
| | | } else if (res.orderStatus == 1) { |
|---|
| | | shangliaoFlag = true |
|---|
| | | statusGif = 'kaimen1' |
|---|
| | | statusTxt = 'ä¸æ' |
|---|
| | | setTimeout(chaiwangban, 4000) |
|---|
| | | } else if (res.orderStatus == 2) { |
|---|
| | | // statusTxt = res.level |
|---|
| | | // statusGif = 'zanting' |
|---|
| | | // if (res.level === 'åå¤é¶æ®µ') { |
|---|
| | | // console.log("åå¤é¶æ®µ" + statusGif); |
|---|
| | | // statusGif = 'zanting' |
|---|
| | | // } else if (res.level === 'å¹²ç¥é¶æ®µ' || res.level === 'æ£å¨å¹²ç¥') { |
|---|
| | | // statusGif = 'tmrefeng2' |
|---|
| | | // } else if (res.level === 'ç¿»æé¶æ®µ') { |
|---|
| | | // statusGif = 'fanliao-N' |
|---|
| | | // } else if (res.level === 'åºæé¶æ®µ') { |
|---|
| | | // statusGif = 'chuliao-N' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_fan == 1) { |
|---|
| | | statusGif = 'tmrefeng2' |
|---|
| | | statusTxt = 'æ£å¨å¹²ç¥' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_roller == 4) { |
|---|
| | | // statusGif = 'fanliao-N' |
|---|
| | | // statusTxt = 'æ£å¨ç¿»æ' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_roller == 5) { |
|---|
| | | // statusGif = 'chuliao-N' |
|---|
| | | // statusTxt = 'æ£å¨åºæ' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_windbox == 2 || res.state_windbox == 3) { |
|---|
| | | // statusGif = 'fengxiangsheng-1' |
|---|
| | | // statusTxt = 'æ£å¨å¹²ç¥' |
|---|
| | | // } |
|---|
| | | } else if (res.orderStatus == 3) { |
|---|
| | | statusGif = 'zanting' |
|---|
| | | statusTxt = 'æå' |
|---|
| | | } else if (res.orderStatus == 4) { |
|---|
| | | statusGif = 'zanting' |
|---|
| | | statusTxt = 'å¹²ç¥å®æ' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (compareChart) { |
|---|
| | | compareChart.setOption({ |
|---|
| | | yAxis: { |
|---|
| | | data: res.compEqpNum, |
|---|
| | | }, |
|---|
| | | series: { |
|---|
| | | data: res.compEqpEffic, |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | res.herbImage = 'yaocai1.png' |
|---|
| | | |
|---|
| | | if (res.herbName == 'ç½è±èèè') { |
|---|
| | | res.herbImage = 'baihuasheshecao.png' |
|---|
| | | } else if (res.herbName == 'ç³¥ç¨»æ ¹') { |
|---|
| | | res.herbImage = 'nuodaogen.png' |
|---|
| | | } else if (res.herbName == 'æ·«ç¾è¿') { |
|---|
| | | res.herbImage = 'yinyanghuo.png' |
|---|
| | | } else if (res.herbName == '马齿è') { |
|---|
| | | res.herbImage = 'machixian.png' |
|---|
| | | } else if (res.herbName == '墨æ±è²') { |
|---|
| | | res.herbImage = 'mohanlian.png' |
|---|
| | | } else if (res.herbName == 'æ¡ç½ç®') { |
|---|
| | | res.herbImage = 'sangbaipi.png' |
|---|
| | | } |
|---|
| | | |
|---|
| | | res.isError = false |
|---|
| | | if (res.fault) { |
|---|
| | | res.isError = true |
|---|
| | | res.errorMsg = res.fault |
|---|
| | | console.log("errorMsg:",res.fault) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (res.warning) { |
|---|
| | | res.isWarning = true |
|---|
| | | res.warnMsg = res.warning |
|---|
| | | console.log("warnMsg:",res.warning) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | res = { |
|---|
| | | mois: [], |
|---|
| | | gif: 'tmrefeng2', |
|---|
| | | herbImage: 'yaocai1.png', |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // console.log(`output->res`, res.detailList[res.detailList.length-1]) |
|---|
| | | realData.value = res |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | var move = true |
|---|
| | | function moveImage() { |
|---|
| | | if (move) { |
|---|
| | | position.value -= 0.3 |
|---|
| | | } else { |
|---|
| | | position.value += 0.3 |
|---|
| | | } |
|---|
| | | if (position.value < -240) { |
|---|
| | | move = false |
|---|
| | | } |
|---|
| | | if (position.value > -1) { |
|---|
| | | move = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | function back() { |
|---|
| | | router.back() |
|---|
| | | } |
|---|
| | | |
|---|
| | | function showFault () { |
|---|
| | | console.log('showFault') |
|---|
| | | router.push({ path: '/bigFaultCloud', query: { tenant: tenant.value, num: num } }) |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | listAllEqp() |
|---|
| | | //queryEqp() |
|---|
| | | // DOMæè½½å®æå渲æå¾è¡¨ |
|---|
| | | onMounted(() => { |
|---|
| | | Timer.value = setInterval(queryRealTime, 3000) |
|---|
| | | Timer2.value = setInterval(moveImage, 50) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | onUnmounted(() => { |
|---|
| | | clearInterval(Timer.value) |
|---|
| | | clearInterval(Timer2.value) |
|---|
| | | Timer.value = null |
|---|
| | | Timer2.value = null |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .eqpBox { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | .eqpRow { |
|---|
| | | } |
|---|
| | | .eqpImage { |
|---|
| | | height: 1080px; |
|---|
| | | width: 1920px; |
|---|
| | | background-image: url(/src/assets/images/dry/bg.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | color: white; |
|---|
| | | /*background-position: 160px 280px; */ |
|---|
| | | /* background-color: red; */ |
|---|
| | | background-size: 120%; |
|---|
| | | padding: 10px; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-content: flex-start; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .leftEqp { |
|---|
| | | height: 1080px; |
|---|
| | | width: 1200px; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-content: flex-start; |
|---|
| | | |
|---|
| | | /* background-color: white; |
|---|
| | | background-image: url(/src/assets/images/dry/shebei1.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 125%; |
|---|
| | | border-radius: 10px; |
|---|
| | | background-position: -119px 293px; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .leftTop { |
|---|
| | | height: 750px; |
|---|
| | | width: 850px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-content: flex-start; |
|---|
| | | background-image: url(/src/assets/images/dry/ganzaoji-x.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 79%; |
|---|
| | | border-radius: 10px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | background-position: 85px 279px; |
|---|
| | | } |
|---|
| | | .leftMid { |
|---|
| | | width: 850px; |
|---|
| | | height: 300px; |
|---|
| | | /* border: 1px solid; */ |
|---|
| | | margin-top: 10px; |
|---|
| | | border-radius: 10px; |
|---|
| | | /* background: white; */ |
|---|
| | | } |
|---|
| | | .mainInfo { |
|---|
| | | line-height: 33px; |
|---|
| | | padding-left: 10px; |
|---|
| | | font-size: 30px; |
|---|
| | | color: white; |
|---|
| | | } |
|---|
| | | .subhead { |
|---|
| | | color: #a19f9c; |
|---|
| | | font-size: 16px; |
|---|
| | | padding-left: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mainInfo2 { |
|---|
| | | line-height: 20px; |
|---|
| | | padding-left: 0px; |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | .subhead2 { |
|---|
| | | color: #a19f9c; |
|---|
| | | font-size: 10px; |
|---|
| | | padding-left: 0px; |
|---|
| | | } |
|---|
| | | .zhengqi { |
|---|
| | | height: 180px; |
|---|
| | | width: 200px; |
|---|
| | | background-image: url(/src/assets/images/dry/liuliangji.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 160px; |
|---|
| | | /* border-radius: 10px; */ |
|---|
| | | background-position: 17px -6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .liuliangji { |
|---|
| | | } |
|---|
| | | .leftData { |
|---|
| | | height: 250px; |
|---|
| | | width: 120px; |
|---|
| | | } |
|---|
| | | .rightChart { |
|---|
| | | height: 270px; |
|---|
| | | width: 170px; |
|---|
| | | margin-top: -30px; |
|---|
| | | } |
|---|
| | | .leftTop0 { |
|---|
| | | height: 260px; |
|---|
| | | width: 848px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-content: flex-start; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | .leftTop1 { |
|---|
| | | width: 250px; |
|---|
| | | height: 200px; |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 30px; |
|---|
| | | color: #727272; |
|---|
| | | } |
|---|
| | | .leftTop2 { |
|---|
| | | width: 250px; |
|---|
| | | height: 200px; |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 30px; |
|---|
| | | color: #727272; |
|---|
| | | } |
|---|
| | | .leftTop3 { |
|---|
| | | width: 340px; |
|---|
| | | height: 200px; |
|---|
| | | /* background-image: url(/src/assets/images/dry/fanliao.gif); */ |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: 0px 20px; |
|---|
| | | background-size: 300px; |
|---|
| | | border-radius: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqpStatus { |
|---|
| | | width: 848px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | .rightInfo { |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-content: flex-start; |
|---|
| | | height: 1060px; |
|---|
| | | width: 700px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rightTop { |
|---|
| | | display: flex; |
|---|
| | | height: 440px; |
|---|
| | | padding-left: 10px; |
|---|
| | | } |
|---|
| | | .rightTwo { |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .infoChart { |
|---|
| | | width: 340px; |
|---|
| | | height: 300px; |
|---|
| | | /* background: white; */ |
|---|
| | | margin-left: 10px; |
|---|
| | | margin-top: 10px; |
|---|
| | | border-radius: 10px; |
|---|
| | | } |
|---|
| | | .chartTittle { |
|---|
| | | width: 340px; |
|---|
| | | height: 30px; |
|---|
| | | font-size: 16px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding: 15px 15px; |
|---|
| | | } |
|---|
| | | .chartInfo { |
|---|
| | | width: 60px; |
|---|
| | | height: 180px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .compareBar { |
|---|
| | | width: 55px; |
|---|
| | | height: 140px; |
|---|
| | | } |
|---|
| | | .margintop-30 { |
|---|
| | | margin-top: -30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .barTop { |
|---|
| | | width: 55px; |
|---|
| | | height: 30px; |
|---|
| | | } |
|---|
| | | .barBack { |
|---|
| | | width: 30px; |
|---|
| | | height: 100px; |
|---|
| | | /* border: 1px solid black; */ |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-content: flex-end; |
|---|
| | | } |
|---|
| | | .barDiv { |
|---|
| | | width: 100%; |
|---|
| | | |
|---|
| | | background-color: #1595ea; |
|---|
| | | } |
|---|
| | | .bad { |
|---|
| | | background-color: #973535; |
|---|
| | | } |
|---|
| | | .rightLabel { |
|---|
| | | width: 110px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | .label { |
|---|
| | | color: white; |
|---|
| | | text-align: center; |
|---|
| | | width: 50px; |
|---|
| | | border-radius: 4px; |
|---|
| | | height: 20px; |
|---|
| | | font-size: 10px; |
|---|
| | | line-height: 21px; |
|---|
| | | } |
|---|
| | | .good { |
|---|
| | | background-color: #0d6e24; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mainInfo3 { |
|---|
| | | font-size: 24px; |
|---|
| | | } |
|---|
| | | .herbInfo { |
|---|
| | | width: 340px; |
|---|
| | | height: 440px; |
|---|
| | | color: #727272; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .curEqp { |
|---|
| | | width: 340px; |
|---|
| | | height: 170px; |
|---|
| | | |
|---|
| | | /* background: white; |
|---|
| | | border-radius: 10px; */ |
|---|
| | | } |
|---|
| | | .curHerb { |
|---|
| | | margin-top: 10px; |
|---|
| | | width: 340px; |
|---|
| | | height: 260px; |
|---|
| | | /* background: white; |
|---|
| | | border-radius: 10px; */ |
|---|
| | | |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 200px; |
|---|
| | | background-position: 0px 10px; |
|---|
| | | } |
|---|
| | | .tempMoisChart { |
|---|
| | | width: 690px; |
|---|
| | | height: 440px; |
|---|
| | | /* background: white; */ |
|---|
| | | |
|---|
| | | padding: 20px; |
|---|
| | | border-radius: 10px; |
|---|
| | | } |
|---|
| | | .topLeft { |
|---|
| | | margin: 20px 40px 60px 20px; |
|---|
| | | padding: 15px; |
|---|
| | | /* background: white; */ |
|---|
| | | border-radius: 10px; |
|---|
| | | height: 325px; |
|---|
| | | width: 440px; |
|---|
| | | /* background-image: url(/src/assets/images/dry/yaocai.jpg); */ |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 164px 132px; |
|---|
| | | background-position: 239px 65px; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | .topMid { |
|---|
| | | margin: 20px 20px 60px 40px; |
|---|
| | | /* background: white; */ |
|---|
| | | border-radius: 10px; |
|---|
| | | background-image: url(/src/assets/images/dry/fanliao.gif); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: 0px 20px; |
|---|
| | | background-size: 400px; |
|---|
| | | width: 400px; |
|---|
| | | |
|---|
| | | padding: 20px; |
|---|
| | | } |
|---|
| | | .topRight { |
|---|
| | | margin: 20px 20px 60px 20px; |
|---|
| | | /* background: white; */ |
|---|
| | | border-radius: 10px; |
|---|
| | | width: 700px; |
|---|
| | | padding: 20px; |
|---|
| | | } |
|---|
| | | .midLeft { |
|---|
| | | height: 450px; |
|---|
| | | width: 600px; |
|---|
| | | display: flex; |
|---|
| | | padding: 0 20px 20px 20px; |
|---|
| | | } |
|---|
| | | .midMid { |
|---|
| | | width: 500px; |
|---|
| | | padding-top: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .midRight { |
|---|
| | | background-image: url(/src/assets/images/dry/fengjixz.gif); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: 150px 260px; |
|---|
| | | background-size: 120px 120px; |
|---|
| | | width: 600px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .shangJianTou { |
|---|
| | | margin-left: 140px; |
|---|
| | | width: 70px; |
|---|
| | | height: 100px; |
|---|
| | | background-image: url(/src/assets/images/dry/shangjiantoutou.gif); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: 0px 0px; |
|---|
| | | background-size: 70px 100px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .zoujiantou { |
|---|
| | | margin-left: 225px; |
|---|
| | | margin-top: 30px; |
|---|
| | | width: 100px; |
|---|
| | | height: 70px; |
|---|
| | | background-image: url(/src/assets/images/dry/zuojiantou.gif); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: 0px 0px; |
|---|
| | | background-size: 100px 70px; |
|---|
| | | } |
|---|
| | | .fault { |
|---|
| | | padding: 10px; |
|---|
| | | height: 60px; |
|---|
| | | font-size: 26px; |
|---|
| | | width: 100%; |
|---|
| | | text-align: right; |
|---|
| | | color: red; |
|---|
| | | } |
|---|
| | | .eqpName { |
|---|
| | | padding: 20px; |
|---|
| | | |
|---|
| | | height: 160px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .formula { |
|---|
| | | display: flex; |
|---|
| | | width: 340px; |
|---|
| | | height: 40px; |
|---|
| | | padding: 0 20px; |
|---|
| | | justify-content: space-around; |
|---|
| | | justify-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .formulaItem { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | width: 85px; |
|---|
| | | height: 40px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqpInfoText { |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep() .ant-slider-mark-text { |
|---|
| | | padding-left: 15px; |
|---|
| | | font-size: 10px; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-mark-text::before { |
|---|
| | | content: ''; |
|---|
| | | display: block; |
|---|
| | | width: 6px; |
|---|
| | | height: 1px; |
|---|
| | | background-color: #1890ff; |
|---|
| | | |
|---|
| | | position: absolute; |
|---|
| | | top: 10px; |
|---|
| | | left: 0px; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-rail { |
|---|
| | | width: 10px !important; |
|---|
| | | border-radius: 6px 6px 0 0; |
|---|
| | | background: linear-gradient(to top, #ce0000 0%, #ce0000 40%, #ce0000 75%, rgb(160, 160, 160) 100%); |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-track { |
|---|
| | | background: rgb(216, 216, 216); |
|---|
| | | |
|---|
| | | height: 20px; |
|---|
| | | width: 10px !important; |
|---|
| | | border-radius: 6px 6px 0 0; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-track:hover { |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-handle { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-dot { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-step { |
|---|
| | | width: 10px !important; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-step > :first-child { |
|---|
| | | display: block !important; |
|---|
| | | width: 30px !important; |
|---|
| | | height: 30px !important; |
|---|
| | | bottom: -26px !important; |
|---|
| | | left: -6px; |
|---|
| | | border: none; |
|---|
| | | background: #ce0000; |
|---|
| | | } |
|---|
| | | :deep() .progress { |
|---|
| | | padding: 25px 25px; |
|---|
| | | |
|---|
| | | width: 360px; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | :deep() .ant-progress-bg { |
|---|
| | | height: 25px !important; |
|---|
| | | } |
|---|
| | | .outDiv { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | justify-items: center; |
|---|
| | | } |
|---|
| | | .blingbling { |
|---|
| | | -webkit-animation: scaleout 1.0s infinite ease-in-out; |
|---|
| | | animation: scaleout 1.0s infinite ease-in-out; |
|---|
| | | } |
|---|
| | | .center { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | justify-items: center; |
|---|
| | | align-items: center; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .centerText { |
|---|
| | | width: 100%; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @-webkit-keyframes scaleout { |
|---|
| | | 0% { |
|---|
| | | -webkit-transform: scale(1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | -webkit-transform: scale(1.1); |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes scaleout { |
|---|
| | | 0% { |
|---|
| | | transform: scale(1); |
|---|
| | | -webkit-transform: scale(1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | transform: scale(1.1); |
|---|
| | | -webkit-transform: scale(1.1); |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .error-div { |
|---|
| | | position: absolute; display: flex; align-items: center; |
|---|
| | | } |
|---|
| | | .error-marker { |
|---|
| | | width: 18px; height: 18px; background: red; border-radius: 50%; |
|---|
| | | } |
|---|
| | | .error-msg { |
|---|
| | | margin-left: 6px; |
|---|
| | | height: 24px; |
|---|
| | | background: gray; border-radius: 5px; font-weight: bold; color: red |
|---|
| | | } |
|---|
| | | .warn-marker { |
|---|
| | | width: 18px; height: 18px; background: orange; border-radius: 50%; |
|---|
| | | } |
|---|
| | | .warn-msg { |
|---|
| | | margin-left: 6px; |
|---|
| | | height: 24px; |
|---|
| | | background: gray; border-radius: 5px; font-weight: bold; color: orange; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <dv-full-screen-container> |
|---|
| | | <div class="eqpBox"> |
|---|
| | | <div class="eqpRow"> |
|---|
| | | <div class="eqpImage" :style="{ 'background-position': position + 'px' }"> |
|---|
| | | <div class="leftEqp"> |
|---|
| | | |
|---|
| | | <dv-border-box7 class="leftTop"> |
|---|
| | | <div class="leftTop0"> |
|---|
| | | <div class="leftTop1"> |
|---|
| | | <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" /> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo">{{ realData?.totalRemain | 0 }} Min</div> |
|---|
| | | <div class="subhead">å©ä½æ¶é´</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="leftTop1"> |
|---|
| | | <Icon icon="bi:fan" :size="50" /> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo">{{ realData?.trendVo?.fanFrequency | 0 }} Hz</div> |
|---|
| | | <div class="subhead">é£æºé¢ç</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="leftTop3" :style="{ 'background-image': 'url(' + getStatusImageUrl(statusGif) + ')' }"></div> |
|---|
| | | <div class="outDiv eqpStatus"> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | font-size: 28px; |
|---|
| | | |
|---|
| | | color: white; |
|---|
| | | background-color: #1595ea; |
|---|
| | | height: 60px; |
|---|
| | | width: 180px; |
|---|
| | | line-height: 60px; |
|---|
| | | text-align: center; |
|---|
| | | border-radius: 10px; |
|---|
| | | font-weight: bold; |
|---|
| | | " |
|---|
| | | > |
|---|
| | | {{ statusTxt }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="width: 1200px; height: 798px; position: absolute;"> |
|---|
| | | <div v-if="true | zuoqianjiting" class="error-div" style=" top:466px; left:589px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style="width: 70px;"> |
|---|
| | | å·¦åæ¥å |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | shebeijiting" class="error-div" style=" top:170px; left:702px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 106px;"> |
|---|
| | | 设å¤æ¥åï¼æ»ï¼ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | chuliaojiting" class="error-div" style=" top:450px; left:158px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 70px;"> |
|---|
| | | åºææ¥å |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | mianbanjiting" class="error-div" style=" top:398px; left:978px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 70px;"> |
|---|
| | | é¢æ¿æ¥å |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | fengxiangsheng" class="error-div" style=" top:476px; left:753px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 86px;"> |
|---|
| | | é£ç®±åå¼å¸¸ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | fengxiangjiang" class="error-div" style=" top:502px; left:753px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 86px;"> |
|---|
| | | é£ç®±éå¼å¸¸ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | fengjiguoliu" class="error-div" style=" top:510px; left:975px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 70px;"> |
|---|
| | | é£æºè¿æµ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | guntongsheng" class="error-div" style=" top:331px; left:753px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 86px;"> |
|---|
| | | æ»çåå¼å¸¸ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | guntongjiang" class="error-div" style=" top:356px; left:753px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 86px;"> |
|---|
| | | æ»çéå¼å¸¸ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | guntongguoliu" class="error-div" style=" top:324px; left:916px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 70px;"> |
|---|
| | | æ»çè¿æµ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | wendubaojing" class="error-div" style=" top:373px; left:978px"> |
|---|
| | | <div class="blingbling error-marker" ></div> |
|---|
| | | <div class="error-msg" style=" width: 70px;"> |
|---|
| | | 温度æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div v-if="true | zuoqianmen" class="error-div" style=" top:595px; left:591px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 80px;"> |
|---|
| | | å·¦åé¨æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuohoumen" class="error-div" style=" top:565px; left:868px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 80px;"> |
|---|
| | | å·¦åé¨æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youqianmen" class="error-div" style=" top:593px; left:396px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 80px;"> |
|---|
| | | å³åé¨æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youhoumen" class="error-div" style=" top:565px; left:697px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 80px;"> |
|---|
| | | å³åé¨æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div v-if="true | guntongbuzaigaowei" class="error-div" style=" top:304px; left:753px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 100px;"> |
|---|
| | | æ»çä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | fengxiangbuzaigaowei" class="error-div" style=" top:451px; left:753px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 100px;"> |
|---|
| | | é£ç®±ä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | fengxiangbuzaidiwei" class="error-div" style=" top:528px; left:753px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 100px;"> |
|---|
| | | é£ç®±ä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | jiareweichuanganqi" class="error-div" style=" top:433px; left:904px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å çä½ä¼ æå¨æ¥è¦ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuoqianfengxianggaowei" class="error-div" style=" top:502px; left:535px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åé£ç®±ä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuoqianfengxiangdiwei" class="error-div" style=" top:528px; left:535px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åé£ç®±ä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuohoufengxianggaowei" class="error-div" style=" top:459px; left:904px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åé£ç®±ä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuohoufengxiangdiwei" class="error-div" style=" top:484px; left:904px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åé£ç®±ä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youqianfengxianggaowei" class="error-div" style=" top:447px; left:420px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åé£ç®±ä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youqianfengxiangdiwei" class="error-div" style=" top:473px; left:420px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åé£ç®±ä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youhoufengxianggaowei" class="error-div" style=" top:383px; left:805px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åé£ç®±ä¸å¨é«ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youhoufengxiangdiwei" class="error-div" style=" top:408px; left:805px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åé£ç®±ä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuoqianguntongdiwei" class="error-div" style=" top:343px; left:530px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åæ»çä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | zuohouguntongdiwei" class="error-div" style=" top:296px; left:916px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å·¦åæ»çä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youqianguntongdiwei" class="error-div" style=" top:316px; left:419px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åæ»çä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="true | youhouguntongdiwei" class="error-div" style=" top:270px; left:797px"> |
|---|
| | | <div class="blingbling warn-marker" ></div> |
|---|
| | | <div class="warn-msg" style=" width: 126px;"> |
|---|
| | | å³åæ»çä¸å¨ä½ä½ |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div class="rightInfo"> |
|---|
| | | <div class="rightTop"> |
|---|
| | | <dv-border-box7 class="tempMoisChart"> |
|---|
| | | |
|---|
| | | </dv-border-box7> |
|---|
| | | </div> |
|---|
| | | <div class="rightTwo"> |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle"> |
|---|
| | | æ
éæ¶é¿ç»è®¡ |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div class="outDiv" style="padding-top: 20px"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle" |
|---|
| | | >æ
é次æ°çº¹ |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div class="outDiv" style="padding-top: 20px"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle">è¦åæ¶é¿ç»è®¡</div> |
|---|
| | | <div class="outDiv" style="padding-top: 10px"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle"> |
|---|
| | | <div> è¦å次æ°ç»è®¡</div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div class="outDiv" style="padding-top: 20px"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-full-screen-container> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import { useFullscreen } from '@vueuse/core' |
|---|
| | | import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3' |
|---|
| | | import { router } from '/@/router' |
|---|
| | | import { onMounted, ref, onUnmounted } from 'vue' |
|---|
| | | import { Progress } from 'ant-design-vue' |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | import 'echarts-liquidfill' |
|---|
| | | import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index' |
|---|
| | | import { defHttp } from '/@/utils/http/axios' |
|---|
| | | import { queryById, listAll } from '../api/DryEquipment.api' |
|---|
| | | import { dryEquipment } from '../dataDefine/DryEquipment.data' |
|---|
| | | import { useUserStore } from '/@/store/modules/user' |
|---|
| | | const domRef = ref<Nullable<HTMLElement>>(null) |
|---|
| | | const { enter, toggle, exit, isFullscreen } = useFullscreen() |
|---|
| | | |
|---|
| | | const { toggle: toggleDom } = useFullscreen(domRef) |
|---|
| | | const Timer = ref() |
|---|
| | | const Timer2 = ref() |
|---|
| | | |
|---|
| | | const eqps = ref([] as dryEquipment[]) |
|---|
| | | console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query) |
|---|
| | | const eqp = ref({} as dryEquipment) |
|---|
| | | const eqpNum = ref(router.currentRoute.value.query.num || 1) |
|---|
| | | const tenant = ref(router.currentRoute.value.query.tenant) |
|---|
| | | const userStore = useUserStore() |
|---|
| | | const realData = ref({}) |
|---|
| | | |
|---|
| | | |
|---|
| | | const position = ref(1) |
|---|
| | | //realData.value.tempValue = [0, 100] |
|---|
| | | realData.value.mois = [0.5, 0.35, 0.2] |
|---|
| | | statusGif = 'tmrefeng2' |
|---|
| | | realData.value.herbImage = 'yaocai1.png' |
|---|
| | | |
|---|
| | | |
|---|
| | | //----------------error---------------- |
|---|
| | | const shebeijiting = ref(false) |
|---|
| | | const chuliaojiting = ref(false) |
|---|
| | | const zuoqianjiting = ref(false) |
|---|
| | | const mianbanjiting = ref(false) |
|---|
| | | const fengxiangsheng = ref(false) |
|---|
| | | const fengxiangjiang = ref(false) |
|---|
| | | const fengjiguoliu = ref(false) |
|---|
| | | const guntongsheng = ref(false) |
|---|
| | | const guntongjiang = ref(false) |
|---|
| | | const guntongguoliu = ref(false) |
|---|
| | | const wendubaojing = ref(false) |
|---|
| | | //--------------warning------------ |
|---|
| | | const zuoqianmen = ref(false) |
|---|
| | | const zuohoumen = ref(false) |
|---|
| | | const youqianmen = ref(false) |
|---|
| | | const youhoumen = ref(false) |
|---|
| | | const guntongbuzaigaowei = ref(false) |
|---|
| | | const fengxiangbuzaigaowei = ref(false) |
|---|
| | | const fengxiangbuzaidiwei = ref(false) |
|---|
| | | const jiareweichuanganqi = ref(false) |
|---|
| | | const zuoqianfengxianggaowei = ref(false) |
|---|
| | | const zuohoufengxianggaowei = ref(false) |
|---|
| | | const youqianfengxianggaowei = ref(false) |
|---|
| | | const youhoufengxianggaowei = ref(false) |
|---|
| | | const zuoqianfengxiangdiwei = ref(false) |
|---|
| | | const zuohoufengxiangdiwei = ref(false) |
|---|
| | | const youqianfengxiangdiwei = ref(false) |
|---|
| | | const youhoufengxiangdiwei = ref(false) |
|---|
| | | const zuoqianguntongdiwei = ref(false) |
|---|
| | | const zuohouguntongdiwei = ref(false) |
|---|
| | | const youqianguntongdiwei = ref(false) |
|---|
| | | const youhouguntongdiwei = ref(false) |
|---|
| | | |
|---|
| | | |
|---|
| | | // å¨æ读åå¾ç |
|---|
| | | function getHerbImageUrl(name: string) { |
|---|
| | | return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¨æ读åå¾ç |
|---|
| | | function getStatusImageUrl(name: string) { |
|---|
| | | if (name =='zanting') { |
|---|
| | | return new URL(`/src/assets/images/dry/${name}.png`, import.meta.url).href |
|---|
| | | } else { |
|---|
| | | return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | function queryEqp() { |
|---|
| | | queryById({ id: router.currentRoute.value.params.id }).then((res) => { |
|---|
| | | // console.log(`output->res`, res) |
|---|
| | | eqp.value = res |
|---|
| | | eqp.value.dryEfficiency = res.dryEfficiency |
|---|
| | | eqp.value.steamConsumption = res.steamConsumption |
|---|
| | | eqp.value.powerConsumption = res.powerConsumption |
|---|
| | | queryRealTime() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function listAllEqp() { |
|---|
| | | listAll({ enable: 'Y' }) |
|---|
| | | .then((result) => { |
|---|
| | | //console.log(`output->result`, result) |
|---|
| | | eqps.value = result |
|---|
| | | // result.forEach((item) => { |
|---|
| | | // eqpCodes.push(item.code) |
|---|
| | | // }) |
|---|
| | | queryRealTime() |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | //console.log(`output->err`, err) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | var num = eqpNum.value |
|---|
| | | |
|---|
| | | |
|---|
| | | var shangliaoFlag = false |
|---|
| | | var statusGif = 'tmrefeng2' |
|---|
| | | var statusTxt = 'æ£å¨å¹²ç¥' |
|---|
| | | |
|---|
| | | function chaiwangban() { |
|---|
| | | statusGif = 'chaiwangban-1' |
|---|
| | | setTimeout(shangliao, 7000) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function shangliao() { |
|---|
| | | statusGif = 'shangliao-N' |
|---|
| | | setTimeout(() => { |
|---|
| | | statusGif = 'zhuangwangban' |
|---|
| | | setTimeout(() => { |
|---|
| | | statusGif = 'guanmen1' |
|---|
| | | setTimeout(() => { |
|---|
| | | shangliaoFlag = false |
|---|
| | | }, 4000) |
|---|
| | | }, 7000) |
|---|
| | | }, 15000) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function queryRealTime() { |
|---|
| | | if (eqp.value) { |
|---|
| | | eqp.value = eqps.value[eqpNum.value] |
|---|
| | | // console.log("888",eqp.value); |
|---|
| | | |
|---|
| | | let eqpCode = eqp.value.code |
|---|
| | | let queryRealTimeUrl = '/dry/real/getRealTimeData' |
|---|
| | | defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenant.value, machineid: eqpCode } }).then((res) => { |
|---|
| | | if (res && res.trendVo) { |
|---|
| | | console.log(`output->re11s`, res) |
|---|
| | | |
|---|
| | | /**æ°´æ»´å¾å«æ°´é */ |
|---|
| | | res.mois = [ |
|---|
| | | (res.trendVo.moisture / 100).toFixed(2), |
|---|
| | | (res.trendVo.moisture / 100 / 1.5).toFixed(2), |
|---|
| | | (res.trendVo.moisture / 100 / 3).toFixed(2), |
|---|
| | | ] |
|---|
| | | |
|---|
| | | |
|---|
| | | /**ç¶æ/gifå¨å¾ */ |
|---|
| | | if (!shangliaoFlag) { |
|---|
| | | if (res.orderStatus == 0) { |
|---|
| | | statusGif = 'zanting' |
|---|
| | | statusTxt = 'åå¤' |
|---|
| | | } else if (res.orderStatus == 1) { |
|---|
| | | shangliaoFlag = true |
|---|
| | | statusGif = 'kaimen1' |
|---|
| | | statusTxt = 'ä¸æ' |
|---|
| | | setTimeout(chaiwangban, 4000) |
|---|
| | | } else if (res.orderStatus == 2) { |
|---|
| | | // statusTxt = res.level |
|---|
| | | // statusGif = 'zanting' |
|---|
| | | // if (res.level === 'åå¤é¶æ®µ') { |
|---|
| | | // console.log("åå¤é¶æ®µ" + statusGif); |
|---|
| | | // statusGif = 'zanting' |
|---|
| | | // } else if (res.level === 'å¹²ç¥é¶æ®µ' || res.level === 'æ£å¨å¹²ç¥') { |
|---|
| | | // statusGif = 'tmrefeng2' |
|---|
| | | // } else if (res.level === 'ç¿»æé¶æ®µ') { |
|---|
| | | // statusGif = 'fanliao-N' |
|---|
| | | // } else if (res.level === 'åºæé¶æ®µ') { |
|---|
| | | // statusGif = 'chuliao-N' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_fan == 1) { |
|---|
| | | statusGif = 'tmrefeng2' |
|---|
| | | statusTxt = 'æ£å¨å¹²ç¥' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_roller == 4) { |
|---|
| | | // statusGif = 'fanliao-N' |
|---|
| | | // statusTxt = 'æ£å¨ç¿»æ' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_roller == 5) { |
|---|
| | | // statusGif = 'chuliao-N' |
|---|
| | | // statusTxt = 'æ£å¨åºæ' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_windbox == 2 || res.state_windbox == 3) { |
|---|
| | | // statusGif = 'fengxiangsheng-1' |
|---|
| | | // statusTxt = 'æ£å¨å¹²ç¥' |
|---|
| | | // } |
|---|
| | | } else if (res.orderStatus == 3) { |
|---|
| | | statusGif = 'zanting' |
|---|
| | | statusTxt = 'æå' |
|---|
| | | } else if (res.orderStatus == 4) { |
|---|
| | | statusGif = 'zanting' |
|---|
| | | statusTxt = 'å¹²ç¥å®æ' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | res.herbImage = 'yaocai1.png' |
|---|
| | | |
|---|
| | | if (res.herbName == 'ç½è±èèè') { |
|---|
| | | res.herbImage = 'baihuasheshecao.png' |
|---|
| | | } else if (res.herbName == 'ç³¥ç¨»æ ¹') { |
|---|
| | | res.herbImage = 'nuodaogen.png' |
|---|
| | | } else if (res.herbName == 'æ·«ç¾è¿') { |
|---|
| | | res.herbImage = 'yinyanghuo.png' |
|---|
| | | } else if (res.herbName == '马齿è') { |
|---|
| | | res.herbImage = 'machixian.png' |
|---|
| | | } else if (res.herbName == '墨æ±è²') { |
|---|
| | | res.herbImage = 'mohanlian.png' |
|---|
| | | } else if (res.herbName == 'æ¡ç½ç®') { |
|---|
| | | res.herbImage = 'sangbaipi.png' |
|---|
| | | } |
|---|
| | | |
|---|
| | | res.isError = false |
|---|
| | | if (res.fault) { |
|---|
| | | res.isError = true |
|---|
| | | res.errorMsg = res.fault |
|---|
| | | console.log("errorMsg:",res.fault) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (res.warning) { |
|---|
| | | res.isWarning = true |
|---|
| | | res.warnMsg = res.warning |
|---|
| | | console.log("warnMsg:",res.warning) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | res = { |
|---|
| | | mois: [], |
|---|
| | | gif: 'tmrefeng2', |
|---|
| | | herbImage: 'yaocai1.png', |
|---|
| | | } |
|---|
| | | } |
|---|
| | | var totalTime = 0 |
|---|
| | | res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0 |
|---|
| | | // console.log(`output->res`, res.detailList[res.detailList.length-1]) |
|---|
| | | realData.value = res |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | 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() |
|---|
| | | //queryEqp() |
|---|
| | | // DOMæè½½å®æå渲æå¾è¡¨ |
|---|
| | | onMounted(() => { |
|---|
| | | Timer.value = setInterval(queryRealTime, 3000) |
|---|
| | | Timer2.value = setInterval(moveImage, 50) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | onUnmounted(() => { |
|---|
| | | clearInterval(Timer.value) |
|---|
| | | clearInterval(Timer2.value) |
|---|
| | | Timer.value = null |
|---|
| | | Timer2.value = null |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .eqpBox { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | .eqpRow { |
|---|
| | | } |
|---|
| | | .eqpImage { |
|---|
| | | height: 1080px; |
|---|
| | | width: 1920px; |
|---|
| | | background-image: url(/src/assets/images/dry/bg.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | color: white; |
|---|
| | | /*background-position: 160px 280px; */ |
|---|
| | | /* background-color: red; */ |
|---|
| | | background-size: 120%; |
|---|
| | | padding: 10px; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-content: flex-start; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .leftEqp { |
|---|
| | | height: 1080px; |
|---|
| | | width: 1200px; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-content: flex-start; |
|---|
| | | |
|---|
| | | /* background-color: white; |
|---|
| | | background-image: url(/src/assets/images/dry/shebei1.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 125%; |
|---|
| | | border-radius: 10px; |
|---|
| | | background-position: -119px 293px; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .leftTop { |
|---|
| | | height: 1060px; |
|---|
| | | width: 1200px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-content: flex-start; |
|---|
| | | background-image: url(/src/assets/images/dry/ganzaoji-x.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 86%; |
|---|
| | | border-radius: 10px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | background-position: 85px 279px; |
|---|
| | | } |
|---|
| | | .leftMid { |
|---|
| | | width: 850px; |
|---|
| | | height: 300px; |
|---|
| | | /* border: 1px solid; */ |
|---|
| | | margin-top: 10px; |
|---|
| | | border-radius: 10px; |
|---|
| | | /* background: white; */ |
|---|
| | | } |
|---|
| | | .mainInfo { |
|---|
| | | line-height: 33px; |
|---|
| | | padding-left: 10px; |
|---|
| | | font-size: 30px; |
|---|
| | | color: white; |
|---|
| | | } |
|---|
| | | .subhead { |
|---|
| | | color: #a19f9c; |
|---|
| | | font-size: 16px; |
|---|
| | | padding-left: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mainInfo2 { |
|---|
| | | line-height: 20px; |
|---|
| | | padding-left: 0px; |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | .subhead2 { |
|---|
| | | color: #a19f9c; |
|---|
| | | font-size: 10px; |
|---|
| | | padding-left: 0px; |
|---|
| | | } |
|---|
| | | .zhengqi { |
|---|
| | | height: 180px; |
|---|
| | | width: 200px; |
|---|
| | | background-image: url(/src/assets/images/dry/liuliangji.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 160px; |
|---|
| | | /* border-radius: 10px; */ |
|---|
| | | background-position: 17px -6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .liuliangji { |
|---|
| | | } |
|---|
| | | .leftData { |
|---|
| | | height: 250px; |
|---|
| | | width: 120px; |
|---|
| | | } |
|---|
| | | .rightChart { |
|---|
| | | height: 270px; |
|---|
| | | width: 170px; |
|---|
| | | margin-top: -30px; |
|---|
| | | } |
|---|
| | | .leftTop0 { |
|---|
| | | height: 260px; |
|---|
| | | width: 1200px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-content: flex-start; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | .leftTop1 { |
|---|
| | | width: 360px; |
|---|
| | | height: 200px; |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 30px; |
|---|
| | | color: #727272; |
|---|
| | | } |
|---|
| | | .leftTop2 { |
|---|
| | | width: 250px; |
|---|
| | | height: 200px; |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 30px; |
|---|
| | | color: #727272; |
|---|
| | | } |
|---|
| | | .leftTop3 { |
|---|
| | | width: 340px; |
|---|
| | | height: 200px; |
|---|
| | | /* background-image: url(/src/assets/images/dry/fanliao.gif); */ |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: 0px 20px; |
|---|
| | | background-size: 300px; |
|---|
| | | border-radius: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqpStatus { |
|---|
| | | width: 848px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | .rightInfo { |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-content: flex-start; |
|---|
| | | height: 1060px; |
|---|
| | | width: 700px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rightTop { |
|---|
| | | display: flex; |
|---|
| | | height: 440px; |
|---|
| | | padding-left: 10px; |
|---|
| | | } |
|---|
| | | .rightTwo { |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .infoChart { |
|---|
| | | width: 340px; |
|---|
| | | height: 300px; |
|---|
| | | /* background: white; */ |
|---|
| | | margin-left: 10px; |
|---|
| | | margin-top: 10px; |
|---|
| | | border-radius: 10px; |
|---|
| | | } |
|---|
| | | .chartTittle { |
|---|
| | | width: 340px; |
|---|
| | | height: 30px; |
|---|
| | | font-size: 16px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding: 15px 15px; |
|---|
| | | } |
|---|
| | | .chartInfo { |
|---|
| | | width: 60px; |
|---|
| | | height: 180px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .compareBar { |
|---|
| | | width: 55px; |
|---|
| | | height: 140px; |
|---|
| | | } |
|---|
| | | .margintop-30 { |
|---|
| | | margin-top: -30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .barTop { |
|---|
| | | width: 55px; |
|---|
| | | height: 30px; |
|---|
| | | } |
|---|
| | | .barBack { |
|---|
| | | width: 30px; |
|---|
| | | height: 100px; |
|---|
| | | /* border: 1px solid black; */ |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-content: flex-end; |
|---|
| | | } |
|---|
| | | .barDiv { |
|---|
| | | width: 100%; |
|---|
| | | |
|---|
| | | background-color: #1595ea; |
|---|
| | | } |
|---|
| | | .bad { |
|---|
| | | background-color: #973535; |
|---|
| | | } |
|---|
| | | .rightLabel { |
|---|
| | | width: 110px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | .label { |
|---|
| | | color: white; |
|---|
| | | text-align: center; |
|---|
| | | width: 50px; |
|---|
| | | border-radius: 4px; |
|---|
| | | height: 20px; |
|---|
| | | font-size: 10px; |
|---|
| | | line-height: 21px; |
|---|
| | | } |
|---|
| | | .good { |
|---|
| | | background-color: #0d6e24; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mainInfo3 { |
|---|
| | | font-size: 24px; |
|---|
| | | } |
|---|
| | | .herbInfo { |
|---|
| | | width: 340px; |
|---|
| | | height: 440px; |
|---|
| | | color: #727272; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .curEqp { |
|---|
| | | width: 340px; |
|---|
| | | height: 170px; |
|---|
| | | |
|---|
| | | /* background: white; |
|---|
| | | border-radius: 10px; */ |
|---|
| | | } |
|---|
| | | .curHerb { |
|---|
| | | margin-top: 10px; |
|---|
| | | width: 340px; |
|---|
| | | height: 260px; |
|---|
| | | /* background: white; |
|---|
| | | border-radius: 10px; */ |
|---|
| | | |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 200px; |
|---|
| | | background-position: 0px 10px; |
|---|
| | | } |
|---|
| | | .tempMoisChart { |
|---|
| | | width: 690px; |
|---|
| | | height: 440px; |
|---|
| | | /* background: white; */ |
|---|
| | | |
|---|
| | | padding: 20px; |
|---|
| | | border-radius: 10px; |
|---|
| | | } |
|---|
| | | .topLeft { |
|---|
| | | margin: 20px 40px 60px 20px; |
|---|
| | | padding: 15px; |
|---|
| | | /* background: white; */ |
|---|
| | | border-radius: 10px; |
|---|
| | | height: 325px; |
|---|
| | | width: 440px; |
|---|
| | | /* background-image: url(/src/assets/images/dry/yaocai.jpg); */ |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 164px 132px; |
|---|
| | | background-position: 239px 65px; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | .topMid { |
|---|
| | | margin: 20px 20px 60px 40px; |
|---|
| | | /* background: white; */ |
|---|
| | | border-radius: 10px; |
|---|
| | | background-image: url(/src/assets/images/dry/fanliao.gif); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: 0px 20px; |
|---|
| | | background-size: 400px; |
|---|
| | | width: 400px; |
|---|
| | | |
|---|
| | | padding: 20px; |
|---|
| | | } |
|---|
| | | .topRight { |
|---|
| | | margin: 20px 20px 60px 20px; |
|---|
| | | /* background: white; */ |
|---|
| | | border-radius: 10px; |
|---|
| | | width: 700px; |
|---|
| | | padding: 20px; |
|---|
| | | } |
|---|
| | | .midLeft { |
|---|
| | | height: 450px; |
|---|
| | | width: 600px; |
|---|
| | | display: flex; |
|---|
| | | padding: 0 20px 20px 20px; |
|---|
| | | } |
|---|
| | | .midMid { |
|---|
| | | width: 500px; |
|---|
| | | padding-top: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .midRight { |
|---|
| | | background-image: url(/src/assets/images/dry/fengjixz.gif); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: 150px 260px; |
|---|
| | | background-size: 120px 120px; |
|---|
| | | width: 600px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .shangJianTou { |
|---|
| | | margin-left: 140px; |
|---|
| | | width: 70px; |
|---|
| | | height: 100px; |
|---|
| | | background-image: url(/src/assets/images/dry/shangjiantoutou.gif); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: 0px 0px; |
|---|
| | | background-size: 70px 100px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .zoujiantou { |
|---|
| | | margin-left: 225px; |
|---|
| | | margin-top: 30px; |
|---|
| | | width: 100px; |
|---|
| | | height: 70px; |
|---|
| | | background-image: url(/src/assets/images/dry/zuojiantou.gif); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: 0px 0px; |
|---|
| | | background-size: 100px 70px; |
|---|
| | | } |
|---|
| | | .fault { |
|---|
| | | padding: 10px; |
|---|
| | | height: 60px; |
|---|
| | | font-size: 26px; |
|---|
| | | width: 100%; |
|---|
| | | text-align: right; |
|---|
| | | color: red; |
|---|
| | | } |
|---|
| | | .eqpName { |
|---|
| | | padding: 20px; |
|---|
| | | |
|---|
| | | height: 160px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .formula { |
|---|
| | | display: flex; |
|---|
| | | width: 340px; |
|---|
| | | height: 40px; |
|---|
| | | padding: 0 20px; |
|---|
| | | justify-content: space-around; |
|---|
| | | justify-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .formulaItem { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | width: 85px; |
|---|
| | | height: 40px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqpInfoText { |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep() .ant-slider-mark-text { |
|---|
| | | padding-left: 15px; |
|---|
| | | font-size: 10px; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-mark-text::before { |
|---|
| | | content: ''; |
|---|
| | | display: block; |
|---|
| | | width: 6px; |
|---|
| | | height: 1px; |
|---|
| | | background-color: #1890ff; |
|---|
| | | |
|---|
| | | position: absolute; |
|---|
| | | top: 10px; |
|---|
| | | left: 0px; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-rail { |
|---|
| | | width: 10px !important; |
|---|
| | | border-radius: 6px 6px 0 0; |
|---|
| | | background: linear-gradient(to top, #ce0000 0%, #ce0000 40%, #ce0000 75%, rgb(160, 160, 160) 100%); |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-track { |
|---|
| | | background: rgb(216, 216, 216); |
|---|
| | | |
|---|
| | | height: 20px; |
|---|
| | | width: 10px !important; |
|---|
| | | border-radius: 6px 6px 0 0; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-track:hover { |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-handle { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-dot { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-step { |
|---|
| | | width: 10px !important; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-step > :first-child { |
|---|
| | | display: block !important; |
|---|
| | | width: 30px !important; |
|---|
| | | height: 30px !important; |
|---|
| | | bottom: -26px !important; |
|---|
| | | left: -6px; |
|---|
| | | border: none; |
|---|
| | | background: #ce0000; |
|---|
| | | } |
|---|
| | | :deep() .progress { |
|---|
| | | padding: 25px 25px; |
|---|
| | | |
|---|
| | | width: 360px; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | :deep() .ant-progress-bg { |
|---|
| | | height: 25px !important; |
|---|
| | | } |
|---|
| | | .outDiv { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | justify-items: center; |
|---|
| | | } |
|---|
| | | .blingbling { |
|---|
| | | -webkit-animation: scaleout 1.0s infinite ease-in-out; |
|---|
| | | animation: scaleout 1.0s infinite ease-in-out; |
|---|
| | | } |
|---|
| | | .center { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | justify-items: center; |
|---|
| | | align-items: center; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .centerText { |
|---|
| | | width: 100%; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @-webkit-keyframes scaleout { |
|---|
| | | 0% { |
|---|
| | | -webkit-transform: scale(1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | -webkit-transform: scale(1.1); |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes scaleout { |
|---|
| | | 0% { |
|---|
| | | transform: scale(1); |
|---|
| | | -webkit-transform: scale(1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | transform: scale(1.1); |
|---|
| | | -webkit-transform: scale(1.1); |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .error-div { |
|---|
| | | position: absolute; display: flex; align-items: center; |
|---|
| | | } |
|---|
| | | .error-marker { |
|---|
| | | width: 18px; height: 18px; background: red; border-radius: 50%; |
|---|
| | | } |
|---|
| | | .error-msg { |
|---|
| | | margin-left: 6px; |
|---|
| | | height: 24px; |
|---|
| | | background: gray; border-radius: 5px; font-weight: bold; color: red |
|---|
| | | } |
|---|
| | | .warn-marker { |
|---|
| | | width: 18px; height: 18px; background: orange; border-radius: 50%; |
|---|
| | | } |
|---|
| | | .warn-msg { |
|---|
| | | margin-left: 6px; |
|---|
| | | height: 24px; |
|---|
| | | background: gray; border-radius: 5px; font-weight: bold; color: orange; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <dv-full-screen-container> |
|---|
| | | <div class="fbg"> |
|---|
| | | <div class="bgImage"> |
|---|
| | | <div class="head"> |
|---|
| | | <div style="width: 600px; height: 50px"> <dv-decoration-8 style="width: 500px; height: 50px" /></div> |
|---|
| | | |
|---|
| | | <div class="title"> |
|---|
| | | <span>{{ title }}</span> |
|---|
| | | |
|---|
| | | <dv-decoration-5 :dur="20" style="margin-top: -40px; width: 700px; height: 80px" /> |
|---|
| | | </div> |
|---|
| | | <div style="width: 600px; height: 50px; display: flex; justify-content: end"> |
|---|
| | | <dv-decoration-8 :reverse="true" style="width: 500px; height: 50px" |
|---|
| | | /></div> |
|---|
| | | </div> |
|---|
| | | <div class="body"> |
|---|
| | | <div class="humiture"> |
|---|
| | | <div style="display: flex; width: 120px"> |
|---|
| | | <Icon style="color: #ba9853" icon="mdi:home-temperature-outline" :size="28" /> |
|---|
| | | |
|---|
| | | <div style="font-size: 20px; line-height: 26px"> {{ envTemp }} â </div> |
|---|
| | | </div> |
|---|
| | | <div style="display: flex"> |
|---|
| | | <Icon style="color: #ba9853" icon="wi:humidity" :size="28" /> |
|---|
| | | |
|---|
| | | <div style="font-size: 20px; line-height: 26px"> {{ envHum }} %rh </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="feed"> |
|---|
| | | <div style="width: 700px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between"> |
|---|
| | | <div style="display: flex; flex-wrap: wrap; justify-content: space-between"> |
|---|
| | | <dv-border-box7 style="width: 210px; height: 100px; padding: 10px"> |
|---|
| | | <div class="statistics putincolor"> |
|---|
| | | <div class="stat_label font16"> æ»ææé </div> |
|---|
| | | <div class="stat_value"> |
|---|
| | | {{ originWeight?.toFixed(2) || 0 }} |
|---|
| | | <span class="font16"> Kg </span> |
|---|
| | | </div> |
|---|
| | | <div class="stat_avg"> |
|---|
| | | <div> é¢è®¡äº§é </div> |
|---|
| | | <div> {{ totalYield?.toFixed(2) || 0 }} kg </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 style="width: 210px; height: 100px; padding: 10px"> |
|---|
| | | <div class="statistics putincolor"> |
|---|
| | | <div class="stat_label font16"> çµéæ¶è </div> |
|---|
| | | <div class="stat_value"> |
|---|
| | | {{ watt?.toFixed(2) || 0 }} |
|---|
| | | <span class="font16"> Kwh </span> |
|---|
| | | </div> |
|---|
| | | <div class="stat_avg"> |
|---|
| | | <div> å¹³åçµè </div> |
|---|
| | | <div> {{wattAvg?.toFixed(2) || 0}} Kwh/kg </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 style="width: 210px; height: 100px; padding: 10px"> |
|---|
| | | <div class="statistics putincolor"> |
|---|
| | | <div class="stat_label font16"> è¸æ±½æ¶è </div> |
|---|
| | | <div class="stat_value"> |
|---|
| | | {{ steam?.toFixed(2) || 0 }} |
|---|
| | | <span class="font16"> m³ </span> |
|---|
| | | </div> |
|---|
| | | <div class="stat_avg"> |
|---|
| | | <div> å¹³åæ±½è </div> |
|---|
| | | <div> {{steamAvg?.toFixed(2) || 0}} m³/kg </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <!-- <div class="statistics putincolor"> |
|---|
| | | <div class="stat_label font16">é¢è®¡äº§é</div> |
|---|
| | | <div class="stat_value">3000</div> |
|---|
| | | |
|---|
| | | <div class="font16"> |
|---|
| | | <br/> |
|---|
| | | Kg |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div> |
|---|
| | | <!-- <div class="statistics electroncolor"> |
|---|
| | | <div class="stat_label font16">çµéæ¶è</div> |
|---|
| | | <div class="stat_value">500</div> |
|---|
| | | <div class="font16"> |
|---|
| | | <br/> |
|---|
| | | Kwh |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div class="statistics steamcolor"> |
|---|
| | | <div class="stat_label font16">è¸æ±½æ¶è</div> |
|---|
| | | <div class="stat_value">300</div> |
|---|
| | | <div class="font16"> |
|---|
| | | <br/> |
|---|
| | | m³ |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="statistics electroncolor"> |
|---|
| | | <div class="stat_label font16">å¹³åçµè</div> |
|---|
| | | <div class="stat_value">12</div> |
|---|
| | | <div class="font16"> |
|---|
| | | <br/> |
|---|
| | | Kwh/kg |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div class="statistics steamcolor"> |
|---|
| | | <div class="stat_label font16">å¹³åæ±½è</div> |
|---|
| | | <div class="stat_value">300</div> |
|---|
| | | <div class="font16"> |
|---|
| | | <br/> |
|---|
| | | m³/kg |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- <div style="padding-right: 100px;"> |
|---|
| | | <div class="statistics"> |
|---|
| | | <div class="stat_label font16">å¹²æ产é</div> |
|---|
| | | <div class="stat_value">300</div> |
|---|
| | | <div class="font16"> |
|---|
| | | <br/> |
|---|
| | | kg |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <div class="up"> |
|---|
| | | <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }"> |
|---|
| | | <div class="eqpInfoup" @click="gotoeqp(num - 1)"> |
|---|
| | | <div class="eqp-title"> |
|---|
| | | <div class="herb_weight"> |
|---|
| | | <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || 'ææ ' }}</div> |
|---|
| | | <div>{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div> |
|---|
| | | </div> |
|---|
| | | <!-- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || 'é¢ç' }}</div> --> |
|---|
| | | <!-- <div class="process"> </div> --> |
|---|
| | | <Progress |
|---|
| | | :stroke-color="{ |
|---|
| | | from: '#108ee9', |
|---|
| | | to: '#87d068', |
|---|
| | | }" |
|---|
| | | :percent="parseFloat(realTime.get(eqpCodes[num - 1])?.percent || '0')" |
|---|
| | | status="active" |
|---|
| | | trailColor="#2b2b2b2b" |
|---|
| | | :show-info="false" |
|---|
| | | /> |
|---|
| | | <div class="eqp-timer"> |
|---|
| | | <div |
|---|
| | | ><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" /> |
|---|
| | | {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture?.toFixed(1) || '0' }} % |
|---|
| | | </div> |
|---|
| | | <div |
|---|
| | | ><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" /> |
|---|
| | | {{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} â |
|---|
| | | </div> |
|---|
| | | <div |
|---|
| | | ><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> |
|---|
| | | {{ realTime.get(eqpCodes[num - 1])?.totalRemain || 0 }} min |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="eqp-info-up"> |
|---|
| | | <!-- <div class="herb"> |
|---|
| | | <div>{{ realTime.get(eqpCodes[num - 1])?.herbName || 'ææ ' }}</div> |
|---|
| | | |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <!-- <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num - 1])?.originWeight || 0 }} Kg</div></div> --> |
|---|
| | | |
|---|
| | | <div class="weight" |
|---|
| | | ><div class="herb"> |
|---|
| | | {{ showInfo(realTime.get(eqpCodes[num - 1])) }} |
|---|
| | | </div></div |
|---|
| | | > |
|---|
| | | <div class="water"> |
|---|
| | | <div class="eqp_num">{{ num }}</div> |
|---|
| | | <!-- <div class="temp"> |
|---|
| | | <div style="line-height: 28px"><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div> |
|---|
| | | <div class="font"> |
|---|
| | | <span class="value"> {{ realTime.get(eqpCodes[num - 1])?.trendVo?.moisture || '0' }}</span> % |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="temp"> |
|---|
| | | <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div> |
|---|
| | | <div class="font"> |
|---|
| | | <span class="value">{{ realTime.get(eqpCodes[num - 1])?.trendVo?.bellowsTemp || '0' }} </span> â |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="down"> |
|---|
| | | <div v-for="num in eqpNum" :key="num" :class="{ one: num === 1, two: num === 2, three: num === 3, four: num === 4 }"> |
|---|
| | | <div class="eqpInfodown" @click="gotoeqp(num + 3)"> |
|---|
| | | <!-- <div class="eqp-info-down"> |
|---|
| | | <div class="herb">{{ realTime.get(eqpCodes[num + 3])?.herbName || 'ææ ' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="weight"><div class="herb">{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg </div></div> --> |
|---|
| | | <div class="weight" |
|---|
| | | ><div class="herb">{{ showInfo(realTime.get(eqpCodes[num + 3])) }}</div></div |
|---|
| | | > |
|---|
| | | <div class="water"> |
|---|
| | | <div class="eqp_num">{{ num + 4 }}</div> |
|---|
| | | <!-- <div class="temp"> |
|---|
| | | <div style="line-height: 28px"> |
|---|
| | | <Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> |
|---|
| | | </div> |
|---|
| | | <div class="font"> |
|---|
| | | <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture || '0' }}</span> % |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="temp"> |
|---|
| | | <div style="line-height: 28px"><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="30" /> </div> |
|---|
| | | <div class="font"> |
|---|
| | | <span class="value">{{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp || '0' }}</span> â |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div style="height: 40px"></div> |
|---|
| | | <div class="eqp-title"> |
|---|
| | | <div class="herb_weight"> |
|---|
| | | <div>{{ realTime.get(eqpCodes[num + 3])?.herbName || 'ææ ' }}</div> |
|---|
| | | <div>{{ realTime.get(eqpCodes[num + 3])?.originWeight || 0 }} Kg</div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <Progress |
|---|
| | | :stroke-color="{ |
|---|
| | | from: '#108ee9', |
|---|
| | | to: '#87d068', |
|---|
| | | }" |
|---|
| | | :percent="parseFloat(realTime.get(eqpCodes[num + 3])?.percent || '0')" |
|---|
| | | status="active" |
|---|
| | | trailColor="#2b2b2b2b" |
|---|
| | | :show-info="false" |
|---|
| | | /> |
|---|
| | | <!-- <div class="eqp-name">50%</div> --> |
|---|
| | | <div class="eqp-timer"> |
|---|
| | | <div |
|---|
| | | ><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="20" /> |
|---|
| | | {{ realTime.get(eqpCodes[num + 3])?.trendVo?.moisture?.toFixed(1) || '0' }} % |
|---|
| | | </div> |
|---|
| | | <div |
|---|
| | | ><Icon style="color: #873853" icon="fluent:temperature-20-regular" :size="20" /> |
|---|
| | | {{ realTime.get(eqpCodes[num + 3])?.trendVo?.bellowsTemp?.toFixed(0) || '0' }} â |
|---|
| | | </div> |
|---|
| | | <!-- <div><Icon style="color: rgb(42 154 234)" icon="mdi:clock-outline" :size="20" /> |
|---|
| | | {{realTime.get(eqpCodes[num + 3])?.dryTime || 0}} min |
|---|
| | | </div> --> |
|---|
| | | <div |
|---|
| | | ><Icon style="color: rgb(134 207 106)" icon="gg:sand-clock" :size="20" /> |
|---|
| | | {{ realTime.get(eqpCodes[num + 3])?.totalRemain || 0 }} min |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="footer"> |
|---|
| | | <div>{{ nowDate }}</div> |
|---|
| | | <div>{{ nowTime }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-full-screen-container> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import { Progress } from 'ant-design-vue' |
|---|
| | | import { onMounted, ref, onUnmounted } from 'vue' |
|---|
| | | import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index' |
|---|
| | | import { listAll, listTenantEqp } from '../api/DryEquipment.api' |
|---|
| | | import { dryEquipment } from '../dataDefine/DryEquipment.data' |
|---|
| | | import { router } from '/@/router' |
|---|
| | | import { defHttp } from '/@/utils/http/axios' |
|---|
| | | import { useUserStore } from '/@/store/modules/user' |
|---|
| | | const eqpNum = ref(4) |
|---|
| | | const eqpMap = ref(new Map()) |
|---|
| | | const eqpCodes = ref(['GM001', 'GM002', 'GM003', 'GM004', 'GM005', 'GM006', 'GM007', 'GM008']) |
|---|
| | | const eqps = ref([] as dryEquipment[]) |
|---|
| | | const title = ref('æºè½å¹²ç¥è½¦é´') |
|---|
| | | const userStore = useUserStore() |
|---|
| | | const envHum = ref(0) |
|---|
| | | const envTemp = ref(0) |
|---|
| | | const originWeight = ref(0) |
|---|
| | | const totalYield = ref(0) |
|---|
| | | const dryReduce = ref(0) |
|---|
| | | const steam = ref(0) |
|---|
| | | const watt = ref(0) |
|---|
| | | const tenant = ref(router.currentRoute.value.params.tenant) |
|---|
| | | |
|---|
| | | const steamAvg = ref(0) |
|---|
| | | const wattAvg = ref(0) |
|---|
| | | // console.log(userStore.dictItems.title) |
|---|
| | | userStore.dictItems.title?.forEach((element) => { |
|---|
| | | if (element.value === 'bigscreentitle') { |
|---|
| | | title.value = element.text |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | const Timer = ref() |
|---|
| | | |
|---|
| | | const realTime = ref(new Map()) |
|---|
| | | const nowTime = ref() |
|---|
| | | const nowDate = ref() |
|---|
| | | |
|---|
| | | function listAllEqp() { |
|---|
| | | listTenantEqp({ enable: 'Y', tenantId: tenant.value }) |
|---|
| | | .then((result) => { |
|---|
| | | // (`output->result`, result) |
|---|
| | | eqps.value = result |
|---|
| | | |
|---|
| | | result.forEach((item) => { |
|---|
| | | eqpMap.value.set(item.code, item) |
|---|
| | | }) |
|---|
| | | updateRealTime() |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | // console.log(`output->err`, err) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function updateRealTime() { |
|---|
| | | //console.log(`output->å®æ¶å·æ°æ°æ®`) |
|---|
| | | |
|---|
| | | queryWorkShopStatistics() |
|---|
| | | |
|---|
| | | eqps.value.forEach((item) => { |
|---|
| | | queryRealTime(item) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function queryWorkShopStatistics() { |
|---|
| | | defHttp.get({ url: '/dry/real/workshopStatistics', params: { tenantid: tenant.value } }).then((res) => { |
|---|
| | | // console.log(`output->res`, res) |
|---|
| | | steam.value = res.steam |
|---|
| | | watt.value = res.watt |
|---|
| | | envHum.value = res.envHum |
|---|
| | | envTemp.value = res.envTemp |
|---|
| | | originWeight.value = res.originWeight |
|---|
| | | totalYield.value = res.yield |
|---|
| | | dryReduce.value = res.reduce |
|---|
| | | if(res.reduce > 0) { |
|---|
| | | steamAvg.value = res.steam/res.reduce |
|---|
| | | wattAvg.value = res.watt/res.reduce |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function queryRealTime(eqp: dryEquipment) { |
|---|
| | | |
|---|
| | | let eqpCode = eqp.code |
|---|
| | | let queryRealTimeUrl = '/dry/real/getRealTimeData' |
|---|
| | | defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenant.value, machineid: eqpCode } }).then((res) => { |
|---|
| | | if (res && res.trendVo) { |
|---|
| | | res.tempValue = [res.windTemp, 100] |
|---|
| | | res.totalRemain = res.remain |
|---|
| | | if (res.detailList) { |
|---|
| | | // å¹²ç¥å©ä½æ¶é´=å·¥åé¢è®¡å©ä½-ï¼å½åå¹²ç¥æ¶é´-æåä¸æ¬¡è®°å½å¹²ç¥æ¶é´ï¼ |
|---|
| | | res.totalRemain = res.remain - (res.dryTime - res.detailList[res.detailList.length - 1].totalTime) |
|---|
| | | } |
|---|
| | | if (res.totalRemain < 0) { |
|---|
| | | res.totalRemain = 0 |
|---|
| | | } |
|---|
| | | |
|---|
| | | res.percent = ((res.dryTime / (res.dryTime + res.totalRemain)) * 100).toFixed(2) |
|---|
| | | } else { |
|---|
| | | res = { |
|---|
| | | tempValue: [0, 100], |
|---|
| | | percent: 0, |
|---|
| | | mois: [], |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | realTime.value.set(eqp.code, res) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | function gotoeqp(num) { |
|---|
| | | //console.log('跳转æºå°', num) |
|---|
| | | if (num < eqpCodes.value.length) { |
|---|
| | | router.push({ path: '/bigEqpCloud', query: { tenant: tenant.value, num: num } }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | function getNowTime() { |
|---|
| | | var date = new Date() |
|---|
| | | nowDate.value = |
|---|
| | | date.getFullYear() + |
|---|
| | | '/' + |
|---|
| | | (date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + |
|---|
| | | '/' + |
|---|
| | | (date.getDay() < 10 ? '0' + date.getDay() : date.getDay()) |
|---|
| | | nowTime.value = |
|---|
| | | '' + |
|---|
| | | (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + |
|---|
| | | ':' + |
|---|
| | | (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function showInfo(data) { |
|---|
| | | return data ? (data.fault ? data.fault : data.warning ? data.warning : data.orderStatus ? covertStatus(data.orderStatus+'') : '空é²') : '空é²' |
|---|
| | | } |
|---|
| | | |
|---|
| | | function covertStatus(status){ |
|---|
| | | //console.log('status',status) |
|---|
| | | switch (status) { |
|---|
| | | case '0': |
|---|
| | | return 'åå¤é¶æ®µ' |
|---|
| | | case '1': |
|---|
| | | return 'ä¸æé¶æ®µ' |
|---|
| | | case '2': |
|---|
| | | return 'å¹²ç¥é¶æ®µ' |
|---|
| | | case '3': |
|---|
| | | return 'æå' |
|---|
| | | case '4': |
|---|
| | | return 'å¹²ç¥å®æ' |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | getNowTime() |
|---|
| | | listAllEqp() |
|---|
| | | onMounted(() => { |
|---|
| | | Timer.value = setInterval(updateRealTime, 3000) |
|---|
| | | setInterval(getNowTime, 10000) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | onUnmounted(() => { |
|---|
| | | clearInterval(Timer.value) |
|---|
| | | Timer.value = null |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .fbg { |
|---|
| | | height: 1080px; |
|---|
| | | width: 1920px; |
|---|
| | | background-image: url(/src/assets/images/dry/bg/bg5.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | .bgImage { |
|---|
| | | height: 1080px; |
|---|
| | | width: 1920px; |
|---|
| | | background-image: url(/src/assets/images/dry/bg/wksp2.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100%; |
|---|
| | | background-position: 0px 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .head { |
|---|
| | | display: flex; |
|---|
| | | align-content: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .body { |
|---|
| | | height: 980px; |
|---|
| | | width: 100%; |
|---|
| | | margin-top: -100px; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | .title { |
|---|
| | | height: 200px; |
|---|
| | | padding: 20px; |
|---|
| | | font-size: 30px; |
|---|
| | | font-weight: bold; |
|---|
| | | text-align: center; |
|---|
| | | color: white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .humiture { |
|---|
| | | height: 0px; |
|---|
| | | justify-content: center; |
|---|
| | | color: white; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .feed { |
|---|
| | | display: flex; |
|---|
| | | height: 0px; |
|---|
| | | color: gray; |
|---|
| | | padding-top: 20px; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .up { |
|---|
| | | padding-left: 110px; |
|---|
| | | padding-top: 00px; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | align-content: center; |
|---|
| | | justify-content: flex-start; |
|---|
| | | } |
|---|
| | | .down { |
|---|
| | | padding-left: 402px; |
|---|
| | | margin-top: -367px; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | align-content: center; |
|---|
| | | justify-content: flex-start; |
|---|
| | | } |
|---|
| | | .eqpInfoup { |
|---|
| | | width: 300px; |
|---|
| | | height: 400px; |
|---|
| | | margin: -50px 31px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqpInfodown { |
|---|
| | | width: 300px; |
|---|
| | | height: 430px; |
|---|
| | | margin: 0 31px; |
|---|
| | | padding-top: 132px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: flex-start; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .one { |
|---|
| | | margin-top: 278px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .two { |
|---|
| | | margin-top: 219px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .three { |
|---|
| | | margin-top: 160px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .four { |
|---|
| | | margin-top: 101px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqp-title { |
|---|
| | | height: 125px; |
|---|
| | | |
|---|
| | | width: 100%; |
|---|
| | | |
|---|
| | | padding: 10px 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqp-name { |
|---|
| | | line-height: 30px; |
|---|
| | | text-align: center; |
|---|
| | | color: white; |
|---|
| | | margin-top: -30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqp-timer { |
|---|
| | | line-height: 30px; |
|---|
| | | text-align: center; |
|---|
| | | color: white; |
|---|
| | | margin-top: 6px; |
|---|
| | | justify-content: space-between; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqp-name-down { |
|---|
| | | line-height: 40px; |
|---|
| | | text-align: center; |
|---|
| | | color: white; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | border-radius: 20px; |
|---|
| | | background: #3f4c6b; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqp-info-up { |
|---|
| | | flex: 1; |
|---|
| | | padding-top: 108px; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .weight { |
|---|
| | | flex: 1; |
|---|
| | | display: flex; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqp-info-down { |
|---|
| | | flex: 1; |
|---|
| | | padding-top: 70px; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .herb { |
|---|
| | | height: 32px; |
|---|
| | | background: #3f4c6b; |
|---|
| | | color: white; |
|---|
| | | line-height: 30px; |
|---|
| | | padding: 0 10px; |
|---|
| | | } |
|---|
| | | .water { |
|---|
| | | height: 120px; |
|---|
| | | width: 110px; |
|---|
| | | margin-left: 200px; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .temp { |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | .font { |
|---|
| | | line-height: 26px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer { |
|---|
| | | height: 160px; |
|---|
| | | display: flex; |
|---|
| | | padding: 10px 20px; |
|---|
| | | font-size: 30px; |
|---|
| | | flex-direction: column-reverse; |
|---|
| | | align-items: flex-end; |
|---|
| | | color: white; |
|---|
| | | line-height: 40px; |
|---|
| | | margin-top: -150px; |
|---|
| | | } |
|---|
| | | :deep() .progress { |
|---|
| | | padding: 25px 25px; |
|---|
| | | |
|---|
| | | width: 360px; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | :deep() .ant-progress-bg { |
|---|
| | | height: 25px !important; |
|---|
| | | } |
|---|
| | | :deep() .ant-progress-inner { |
|---|
| | | background-color: rgb(197 197 197 / 84%) !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .statistics { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | .stat_label { |
|---|
| | | width: 45px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .stat_value { |
|---|
| | | font-size: 28px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .herb_weight { |
|---|
| | | padding: 0 10px; |
|---|
| | | color: white; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | .eqp_num { |
|---|
| | | font-weight: bold; |
|---|
| | | width: 40px; |
|---|
| | | height: 40px; |
|---|
| | | background: #a0782e; |
|---|
| | | border-radius: 50px; |
|---|
| | | /* text-align: center; */ |
|---|
| | | font-size: 23px; |
|---|
| | | color: white; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .putincolor { |
|---|
| | | color: antiquewhite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .electroncolor { |
|---|
| | | color: aquamarine; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .steamcolor { |
|---|
| | | color: sandybrown; |
|---|
| | | } |
|---|
| | | .font16 { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | .stat_avg { |
|---|
| | | width: 100%; |
|---|
| | | font-size: 16px; |
|---|
| | | display: flex; |
|---|
| | | color: rgb(176, 176, 176); |
|---|
| | | justify-content: space-between; |
|---|
| | | border-top: 1px solid; |
|---|
| | | margin-top: 6px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
