feat(bigScreen): 添加大屏故障页面并更新相关路由和权限- 在 pageEnum.ts 中添加 BIG_FAULT 路径
- 在 permissionGuard.ts 中添加 BIG_FAULT_PATH 到白名单路径列表
- 更新路由配置，将 BigFault组件指向新的 BigFault-tjt.vue 文件
- 新增 BigEqp-two.vue 组件，用于展示设备分割图像
| | |
|---|
| | | VITE_GLOB_API_URL=/herb |
|---|
| | | |
|---|
| | | #åå°æ¥å£å
¨è·¯å¾å°å(å¿
å¡«) |
|---|
| | | VITE_GLOB_DOMAIN_URL=http://127.0.0.1:8800/herb/ |
|---|
| | | VITE_GLOB_DOMAIN_URL=http://127.0.0.1/herb/ |
|---|
| | | |
|---|
| | | # æ¥å£ç¶è·¯å¾åç¼ |
|---|
| | | VITE_GLOB_API_URL_PREFIX= |
|---|
| | |
|---|
| | | BIG_SCREEN = '/bigScreen', |
|---|
| | | |
|---|
| | | BIG_EQP = '/bigEqp', |
|---|
| | | |
|---|
| | | BIG_FAULT = '/bigFault', |
|---|
| | | // basic home path |
|---|
| | | BASE_HOME = '/dashboard/workshop', |
|---|
| | | // error page path |
|---|
| | |
|---|
| | | |
|---|
| | | const BIG_SCREEN_PATH = PageEnum.BIG_SCREEN; |
|---|
| | | |
|---|
| | | const BIG_FAULT_PATH = PageEnum.BIG_FAULT; |
|---|
| | | |
|---|
| | | const BIG_EQP_PATH = PageEnum.BIG_EQP; |
|---|
| | | //auth2ç»å½è·¯ç± |
|---|
| | | const OAUTH2_LOGIN_PAGE_PATH = PageEnum.OAUTH2_LOGIN_PAGE_PATH; |
|---|
| | |
|---|
| | | |
|---|
| | | //update-begin---author:wangshuai ---date:20220629 forï¼[issues/I5BG1I]vue3ä¸æ¯æauth2ç»å½------------ |
|---|
| | | //update-begin---author:wangshuai ---date:20221111 for: [VUEN-2472]å享å
ç»å½------------ |
|---|
| | | const whitePathList: PageEnum[] = [LOGIN_PATH, OAUTH2_LOGIN_PAGE_PATH,SYS_FILES_PATH,BIG_SCREEN_PATH, BIG_EQP_PATH]; |
|---|
| | | const whitePathList: PageEnum[] = [LOGIN_PATH, OAUTH2_LOGIN_PAGE_PATH,SYS_FILES_PATH,BIG_SCREEN_PATH, BIG_EQP_PATH, BIG_FAULT_PATH]; |
|---|
| | | //update-end---author:wangshuai ---date:20221111 for: [VUEN-2472]å享å
ç»å½------------ |
|---|
| | | //update-end---author:wangshuai ---date:20220629 forï¼[issues/I5BG1I]vue3ä¸æ¯æauth2ç»å½------------ |
|---|
| | | |
|---|
| | |
|---|
| | | export const BigFault: AppRouteRecordRaw = { |
|---|
| | | path: '/bigFault', |
|---|
| | | name: 'BigFault', |
|---|
| | | component: () => import('/@/views/dry/bigScreen/BigFault.vue'), |
|---|
| | | component: () => import('/@/views/dry/bigScreen/BigFault-tjt.vue'), |
|---|
| | | meta: { |
|---|
| | | title: t('big.screen.fault'), |
|---|
| | | }, |
|---|
| | |
|---|
| | | <div class="eqpBox"> |
|---|
| | | <div class="eqpRow"> |
|---|
| | | <div class="eqpImage" :style="{ 'background-position': position + 'px' }"> |
|---|
| | | <eqp-split :num="eqpNum"></eqp-split> |
|---|
| | | <div style="width: 10px"></div> |
|---|
| | | <eqp-split :num="eqpNum2"></eqp-split> |
|---|
| | | <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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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-show="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> |
|---|
| | |
|---|
| | | |
|---|
| | | <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 } from '../api/DryEquipment.api' |
|---|
| | | import { dryEquipment } from '../dataDefine/DryEquipment.data' |
|---|
| | | import EqpSplit from "/@/views/dry/bigScreen/EqpSplit.vue"; |
|---|
| | | |
|---|
| | | import { useUserStore } from '/@/store/modules/user' |
|---|
| | | import { getTenantId, getToken } from '/@/utils/auth' |
|---|
| | | |
|---|
| | | const domRef = ref<Nullable<HTMLElement>>(null) |
|---|
| | | const { enter, toggle, exit, isFullscreen } = useFullscreen() |
|---|
| | | |
|---|
| | | const { toggle: toggleDom } = useFullscreen(domRef) |
|---|
| | | const position = ref(1) |
|---|
| | | 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 || 0) |
|---|
| | | const eqpNum2 = ref(parseInt(router.currentRoute.value.query.num) + 1 || 1) |
|---|
| | | const eqpNum = ref(router.currentRoute.value.query.num || 1) |
|---|
| | | 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 |
|---|
| | | return ""; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¨æ读åå¾ç |
|---|
| | | 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() { |
|---|
| | | let tenantId = getTenantId() |
|---|
| | | defHttp.get({ url: '/dry/real/queryAllEqps', params: { tenantId: tenantId,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 showFault () { |
|---|
| | | console.log('showFault') |
|---|
| | | router.push({ path: '/bigFault', query: { num: num } }) |
|---|
| | | |
|---|
| | | } |
|---|
| | | 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 tenantId = getTenantId() |
|---|
| | | let eqpCode = eqp.value.code |
|---|
| | | let queryRealTimeUrl = '/dry/real/getRealTimeData' |
|---|
| | | defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => { |
|---|
| | | if (res && res.trendVo) { |
|---|
| | | //console.log(`output->re11s`, res) |
|---|
| | | // res.tempValue = [res.windTemp, 100] |
|---|
| | | //res.percent = ((res.dryTime / res.et) * 100).toFixed(2) |
|---|
| | | /**æ°´æ»´å¾å«æ°´é */ |
|---|
| | | res.mois = [ |
|---|
| | | (res.trendVo.moisture / 100).toFixed(2), |
|---|
| | | (res.trendVo.moisture / 100 / 1.5).toFixed(2), |
|---|
| | | (res.trendVo.moisture / 100 / 3).toFixed(2), |
|---|
| | | ] |
|---|
| | | if (waterChart) { |
|---|
| | | waterChart.setOption({ |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: res.mois, |
|---|
| | | label: { |
|---|
| | | formatter: function () { |
|---|
| | | return res.trendVo.moisture + '%' |
|---|
| | | }, |
|---|
| | | fontSize: 20, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /**温度ç¯å½¢å¾ */ |
|---|
| | | if (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: [ |
|---|
| | | { |
|---|
| | | name: 'å¹²ç¥æç', |
|---|
| | | 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; |
|---|
| | | const faults = res.fault; |
|---|
| | | console.log('errorMsg:', res.fault) |
|---|
| | | if (faults.includes('æ¥åæ¥è¦')) { |
|---|
| | | shebeijiting.value = true; |
|---|
| | | } else { |
|---|
| | | shebeijiting.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('å·¦åæ¥å')) { |
|---|
| | | zuoqianjiting.value = true; |
|---|
| | | } else { |
|---|
| | | zuoqianjiting.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('é¢æ¿æ¥å')) { |
|---|
| | | mianbanjiting.value = true; |
|---|
| | | } else { |
|---|
| | | mianbanjiting.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('åºææ¥å')) { |
|---|
| | | chuliaojiting.value = true; |
|---|
| | | } else { |
|---|
| | | chuliaojiting.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('温度失æ§')) { |
|---|
| | | wendubaojing.value = true; |
|---|
| | | } else { |
|---|
| | | wendubaojing.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('æ»çå')) { |
|---|
| | | guntongsheng.value = true; |
|---|
| | | } else { |
|---|
| | | guntongjiang.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('æ»çé')) { |
|---|
| | | guntongjiang.value = true; |
|---|
| | | } else { |
|---|
| | | guntongjiang.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('æ»ççµæºè¿æµ')) { |
|---|
| | | guntongguoliu.value = true; |
|---|
| | | } else { |
|---|
| | | guntongguoliu.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('é£ç®±å')) { |
|---|
| | | fengxiangsheng.value = true; |
|---|
| | | } else { |
|---|
| | | fengxiangsheng.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('é£ç®±é')) { |
|---|
| | | fengxiangjiang.value = true; |
|---|
| | | } else { |
|---|
| | | fengxiangjiang.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('é£ç®±é£æºè¿æµ')) { |
|---|
| | | fengjiguoliu.value = true; |
|---|
| | | } else { |
|---|
| | | fengjiguoliu.value = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | shebeijiting.value = false |
|---|
| | | chuliaojiting.value = false |
|---|
| | | zuoqianjiting.value = false |
|---|
| | | mianbanjiting.value = false |
|---|
| | | fengxiangsheng.value = false |
|---|
| | | fengxiangjiang.value = false |
|---|
| | | fengjiguoliu.value = false |
|---|
| | | guntongsheng.value = false |
|---|
| | | guntongjiang.value = false |
|---|
| | | guntongguoliu.value = false |
|---|
| | | wendubaojing.value = false |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (res.warning) { |
|---|
| | | res.isWarning = true |
|---|
| | | res.warnMsg = res.warning |
|---|
| | | const warnings = res.warning; |
|---|
| | | console.log('warnMsg:', res.warning) |
|---|
| | | if (warnings.includes('å·¦åé¨')) { |
|---|
| | | zuoqianmen.value = true; |
|---|
| | | } else { |
|---|
| | | zuoqianmen.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé¨')) { |
|---|
| | | youqianmen.value = true; |
|---|
| | | } else { |
|---|
| | | youqianmen.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åé¨')) { |
|---|
| | | zuohoumen.value = true; |
|---|
| | | } else { |
|---|
| | | zuohoumen.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé¨')) { |
|---|
| | | youhoumen.value = true; |
|---|
| | | } else { |
|---|
| | | youhoumen.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('æ»çä¸å¨é«ä½')) { |
|---|
| | | guntongbuzaigaowei.value = true; |
|---|
| | | } else { |
|---|
| | | guntongbuzaigaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('é£ç®±ä¸å¨ä½ä½')) { |
|---|
| | | fengxiangbuzaidiwei.value = true; |
|---|
| | | } else { |
|---|
| | | fengxiangbuzaidiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('é£ç®±ä¸å¨é«ä½')) { |
|---|
| | | fengxiangbuzaigaowei.value = true; |
|---|
| | | } else { |
|---|
| | | fengxiangbuzaigaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å çä½ä¼ æå¨')) { |
|---|
| | | jiareweichuanganqi.value = true; |
|---|
| | | } else { |
|---|
| | | jiareweichuanganqi.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { |
|---|
| | | zuoqianfengxianggaowei.value = true; |
|---|
| | | } else { |
|---|
| | | zuoqianfengxianggaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { |
|---|
| | | youqianfengxianggaowei.value = true; |
|---|
| | | } else { |
|---|
| | | youqianfengxianggaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { |
|---|
| | | zuohoufengxianggaowei.value = true; |
|---|
| | | } else { |
|---|
| | | zuohoufengxianggaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { |
|---|
| | | youhoufengxianggaowei.value = true; |
|---|
| | | } else { |
|---|
| | | youhoufengxianggaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { |
|---|
| | | zuoqianfengxiangdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | zuoqianfengxiangdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { |
|---|
| | | youqianfengxiangdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | youqianfengxiangdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { |
|---|
| | | zuohoufengxiangdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | zuohoufengxiangdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { |
|---|
| | | youhoufengxiangdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | youhoufengxiangdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { |
|---|
| | | zuoqianguntongdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | zuoqianguntongdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { |
|---|
| | | youqianguntongdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | youqianguntongdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { |
|---|
| | | zuohouguntongdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | zuohouguntongdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { |
|---|
| | | youhouguntongdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | youhouguntongdiwei.value = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | zuoqianmen.value = false; |
|---|
| | | zuohoumen.value = false; |
|---|
| | | youqianmen.value = false; |
|---|
| | | youhoumen.value = false; |
|---|
| | | guntongbuzaigaowei.value = false; |
|---|
| | | fengxiangbuzaigaowei.value = false; |
|---|
| | | fengxiangbuzaidiwei.value = false; |
|---|
| | | jiareweichuanganqi.value = false; |
|---|
| | | zuoqianfengxianggaowei.value = false; |
|---|
| | | zuohoufengxianggaowei.value = false; |
|---|
| | | youqianfengxianggaowei.value = false; |
|---|
| | | youhoufengxianggaowei.value = false; |
|---|
| | | zuoqianfengxiangdiwei.value = false; |
|---|
| | | zuohoufengxiangdiwei.value = false; |
|---|
| | | youqianfengxiangdiwei.value = false; |
|---|
| | | youhoufengxiangdiwei.value = false; |
|---|
| | | zuoqianguntongdiwei.value = false; |
|---|
| | | zuohouguntongdiwei.value = false; |
|---|
| | | youqianguntongdiwei.value = false; |
|---|
| | | youhouguntongdiwei.value = false; |
|---|
| | | } |
|---|
| | | } 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() { |
|---|
| | |
|---|
| | | 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> |
|---|
| | |
|---|
| | | 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: 704px; |
|---|
| | | 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 260px; |
|---|
| | | } |
|---|
| | | .leftMid { |
|---|
| | | width: 850px; |
|---|
| | | height: 281px; |
|---|
| | | /* 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: 234px; |
|---|
| | | width: 120px; |
|---|
| | | } |
|---|
| | | .rightChart { |
|---|
| | | height: 253px; |
|---|
| | | width: 170px; |
|---|
| | | margin-top: -30px; |
|---|
| | | } |
|---|
| | | .leftTop0 { |
|---|
| | | height: 243px; |
|---|
| | | width: 848px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-content: flex-start; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | .leftTop1 { |
|---|
| | | width: 250px; |
|---|
| | | height: 187px; |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 30px; |
|---|
| | | color: #727272; |
|---|
| | | } |
|---|
| | | .leftTop2 { |
|---|
| | | width: 250px; |
|---|
| | | height: 187px; |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 30px; |
|---|
| | | color: #727272; |
|---|
| | | } |
|---|
| | | .leftTop3 { |
|---|
| | | width: 340px; |
|---|
| | | height: 187px; |
|---|
| | | /* 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: 412px; |
|---|
| | | padding-left: 10px; |
|---|
| | | } |
|---|
| | | .rightTwo { |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .infoChart { |
|---|
| | | width: 340px; |
|---|
| | | height: 281px; |
|---|
| | | /* 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: 412px; |
|---|
| | | color: #727272; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .curEqp { |
|---|
| | | width: 340px; |
|---|
| | | height: 159px; |
|---|
| | | |
|---|
| | | /* background: white; |
|---|
| | | border-radius: 10px; */ |
|---|
| | | } |
|---|
| | | .curHerb { |
|---|
| | | margin-top: 10px; |
|---|
| | | width: 340px; |
|---|
| | | height: 243px; |
|---|
| | | /* background: white; |
|---|
| | | border-radius: 10px; */ |
|---|
| | | |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 200px; |
|---|
| | | background-position: 0px 10px; |
|---|
| | | } |
|---|
| | | .tempMoisChart { |
|---|
| | | width: 690px; |
|---|
| | | height: 412px; |
|---|
| | | /* 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.5s infinite ease-in-out; |
|---|
| | | animation: scaleout 1.5s 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' }"> |
|---|
| | | <eqp-split :num="eqpNum"></eqp-split> |
|---|
| | | <div style="width: 10px"></div> |
|---|
| | | <eqp-split :num="eqpNum2"></eqp-split> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-full-screen-container> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import { useFullscreen } from '@vueuse/core' |
|---|
| | | import { router } from '/@/router' |
|---|
| | | import { onMounted, ref, onUnmounted } from 'vue' |
|---|
| | | |
|---|
| | | import { dryEquipment } from '../dataDefine/DryEquipment.data' |
|---|
| | | import EqpSplit from "/@/views/dry/bigScreen/EqpSplit.vue"; |
|---|
| | | |
|---|
| | | |
|---|
| | | const domRef = ref<Nullable<HTMLElement>>(null) |
|---|
| | | const { enter, toggle, exit, isFullscreen } = useFullscreen() |
|---|
| | | |
|---|
| | | const { toggle: toggleDom } = useFullscreen(domRef) |
|---|
| | | const position = ref(1) |
|---|
| | | const Timer2 = ref() |
|---|
| | | |
|---|
| | | |
|---|
| | | 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 || 0) |
|---|
| | | const eqpNum2 = ref(parseInt(router.currentRoute.value.query.num) + 1 || 1) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | 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() |
|---|
| | | } |
|---|
| | | //queryEqp() |
|---|
| | | // DOMæè½½å®æå渲æå¾è¡¨ |
|---|
| | | onMounted(() => { |
|---|
| | | |
|---|
| | | Timer2.value = setInterval(moveImage, 50) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | onUnmounted(() => { |
|---|
| | | |
|---|
| | | clearInterval(Timer2.value) |
|---|
| | | |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | </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 style="padding-top: 20px; padding-left: 10px" @click="back"> |
|---|
| | | <Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" /> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="leftTop1"> |
|---|
| | | |
|---|
| | | <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" /> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo">{{ realData?.totalRemain | 0 }} Min</div> |
|---|
| | | <div class="subhead">å©ä½æ¶é´</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="leftTop1"> |
|---|
| | | <Icon icon="bi:fan" :size="50" /> |
|---|
| | | <div> |
|---|
| | | <div class="mainInfo">{{ realData?.trendVo?.fanFrequency | 0 }} Hz</div> |
|---|
| | | <div class="subhead">é£æºé¢ç</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="leftTop3" :style="{ 'background-image': 'url(' + getStatusImageUrl(statusGif) + ')' }"></div> |
|---|
| | | <div class="outDiv eqpStatus"> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | font-size: 28px; |
|---|
| | | |
|---|
| | | color: white; |
|---|
| | | background-color: #1595ea; |
|---|
| | | height: 60px; |
|---|
| | | width: 180px; |
|---|
| | | line-height: 60px; |
|---|
| | | text-align: center; |
|---|
| | | border-radius: 10px; |
|---|
| | | font-weight: bold; |
|---|
| | | " |
|---|
| | | > |
|---|
| | | {{ statusTxt }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="width: 1200px; height: 798px; position: absolute"> |
|---|
| | | <div v-if="zuoqianjiting" class="error-div" style="top: 466px; left: 589px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 70px"> å·¦åæ¥å </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="shebeijiting" class="error-div" style="top: 170px; left: 702px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 106px"> 设å¤æ¥åï¼æ»ï¼ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="chuliaojiting" class="error-div" style="top: 450px; left: 158px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 70px"> åºææ¥å </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="mianbanjiting" class="error-div" style="top: 398px; left: 978px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 70px"> é¢æ¿æ¥å </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="fengxiangsheng" class="error-div" style="top: 476px; left: 753px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 86px"> é£ç®±åå¼å¸¸ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="fengxiangjiang" class="error-div" style="top: 502px; left: 753px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 86px"> é£ç®±éå¼å¸¸ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="fengjiguoliu" class="error-div" style="top: 510px; left: 975px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 70px"> é£æºè¿æµ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="guntongsheng" class="error-div" style="top: 331px; left: 753px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 86px"> æ»çåå¼å¸¸ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="guntongjiang" class="error-div" style="top: 356px; left: 753px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 86px"> æ»çéå¼å¸¸ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="guntongguoliu" class="error-div" style="top: 324px; left: 916px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 70px"> æ»çè¿æµ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="wendubaojing" class="error-div" style="top: 373px; left: 978px"> |
|---|
| | | <div class="blingbling error-marker"></div> |
|---|
| | | <div class="error-msg" style="width: 70px"> 温度æ¥è¦ </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div v-if="zuoqianmen" class="error-div" style="top: 595px; left: 591px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 80px"> å·¦åé¨æ¥è¦ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="zuohoumen" class="error-div" style="top: 565px; left: 868px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 80px"> å·¦åé¨æ¥è¦ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="youqianmen" class="error-div" style="top: 593px; left: 396px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 80px"> å³åé¨æ¥è¦ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="youhoumen" class="error-div" style="top: 565px; left: 697px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 80px"> å³åé¨æ¥è¦ </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div v-if="guntongbuzaigaowei" class="error-div" style="top: 304px; left: 753px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 100px"> æ»çä¸å¨é«ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="fengxiangbuzaigaowei" class="error-div" style="top: 451px; left: 753px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 100px"> é£ç®±ä¸å¨é«ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="fengxiangbuzaidiwei" class="error-div" style="top: 528px; left: 753px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 100px"> é£ç®±ä¸å¨ä½ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="jiareweichuanganqi" class="error-div" style="top: 433px; left: 904px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å çä½ä¼ æå¨æ¥è¦ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="zuoqianfengxianggaowei" class="error-div" style="top: 502px; left: 535px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨é«ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="zuoqianfengxiangdiwei" class="error-div" style="top: 528px; left: 535px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨ä½ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="zuohoufengxianggaowei" class="error-div" style="top: 459px; left: 904px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨é«ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="zuohoufengxiangdiwei" class="error-div" style="top: 484px; left: 904px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å·¦åé£ç®±ä¸å¨ä½ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="youqianfengxianggaowei" class="error-div" style="top: 447px; left: 420px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨é«ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="youqianfengxiangdiwei" class="error-div" style="top: 473px; left: 420px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨ä½ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="youhoufengxianggaowei" class="error-div" style="top: 383px; left: 805px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨é«ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="youhoufengxiangdiwei" class="error-div" style="top: 408px; left: 805px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å³åé£ç®±ä¸å¨ä½ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="zuoqianguntongdiwei" class="error-div" style="top: 343px; left: 530px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å·¦åæ»çä¸å¨ä½ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="zuohouguntongdiwei" class="error-div" style="top: 296px; left: 916px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å·¦åæ»çä¸å¨ä½ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="youqianguntongdiwei" class="error-div" style="top: 316px; left: 419px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å³åæ»çä¸å¨ä½ä½ </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="youhouguntongdiwei" class="error-div" style="top: 270px; left: 797px"> |
|---|
| | | <div class="blingbling warn-marker"></div> |
|---|
| | | <div class="warn-msg" style="width: 126px"> å³åæ»çä¸å¨ä½ä½ </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | </div> |
|---|
| | | <div class="rightInfo"> |
|---|
| | | <div class="rightTop"> |
|---|
| | | <dv-border-box7 class="tempMoisChart"> |
|---|
| | | <a-row> |
|---|
| | | <a-col :span="7">æ
éå称</a-col> |
|---|
| | | <a-col :span="7">å¼å§æ¶é´</a-col> |
|---|
| | | <a-col :span="7">ç»ææ¶é´</a-col> |
|---|
| | | <a-col :span="3">æç»æ¶é¿</a-col> |
|---|
| | | </a-row> |
|---|
| | | <div ref="scrollContainer" class="scroll-container"> |
|---|
| | | <a-row v-for="item in faultList" :key="item.id"> |
|---|
| | | <a-col :span="7">{{ item.faultName }}</a-col> |
|---|
| | | <a-col :span="7">{{ item.startTime }}</a-col> |
|---|
| | | <a-col :span="7">{{ item.endTime }}</a-col> |
|---|
| | | <a-col :span="3">{{ item.totalTime }}</a-col> |
|---|
| | | </a-row> |
|---|
| | | </div> |
|---|
| | | </dv-border-box7> |
|---|
| | | </div> |
|---|
| | | <div class="rightTwo"> |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle"> æ
éæ¶é¿ç»è®¡ </div> |
|---|
| | | <!-- <div class="outDiv" style="padding-top: 20px">--> |
|---|
| | | <!-- --> |
|---|
| | | <!-- </div>--> |
|---|
| | | <div :id="'chartDom'" style="width: 340px; height: 280px"></div> |
|---|
| | | </dv-border-box7> |
|---|
| | | |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle">æ
é次æ°çº¹ </div> |
|---|
| | | <div :id="'chartDom2'" style="width: 340px; height: 280px"></div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle">è¦åæ¶é¿ç»è®¡</div> |
|---|
| | | <div :id="'chartDom3'" style="width: 340px; height: 280px"></div> |
|---|
| | | </dv-border-box7> |
|---|
| | | <dv-border-box7 class="infoChart"> |
|---|
| | | <div class="chartTittle"> |
|---|
| | | <div> è¦å次æ°ç»è®¡</div> |
|---|
| | | </div> |
|---|
| | | <div :id="'chartDom4'" style="width: 340px; height: 280px"></div> |
|---|
| | | </dv-border-box7> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </dv-full-screen-container> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import { useFullscreen } from '@vueuse/core' |
|---|
| | | import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3' |
|---|
| | | import { router } from '/@/router' |
|---|
| | | import { onMounted, ref, onUnmounted } from 'vue' |
|---|
| | | import { Progress } from 'ant-design-vue' |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | import 'echarts-liquidfill' |
|---|
| | | import { Icon, IconPicker, SvgIcon } from '/@/components/Icon/index' |
|---|
| | | import { defHttp } from '/@/utils/http/axios' |
|---|
| | | import { queryById, listAll } from '../api/DryEquipment.api' |
|---|
| | | import { queryByOrderId } from '../dryFaultRecord/DryFaultRecord.api' |
|---|
| | | import { dryEquipment } from '../dataDefine/DryEquipment.data' |
|---|
| | | import { useUserStore } from '/@/store/modules/user' |
|---|
| | | import { getTenantId, getToken } from '/@/utils/auth' |
|---|
| | | const domRef = ref<Nullable<HTMLElement>>(null) |
|---|
| | | const { enter, toggle, exit, isFullscreen } = useFullscreen() |
|---|
| | | |
|---|
| | | const { toggle: toggleDom } = useFullscreen(domRef) |
|---|
| | | const Timer = ref() |
|---|
| | | const Timer2 = ref() |
|---|
| | | const scrollContainer = ref(null) |
|---|
| | | let scrollInterval = null |
|---|
| | | const isScrolling = ref(false) // æ§å¶æ¯å¦æ£å¨æ»å¨ä»¥é²æ¢éå¤è§¦å |
|---|
| | | const eqps = ref([] as dryEquipment[]) |
|---|
| | | console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query) |
|---|
| | | const eqp = ref({} as dryEquipment) |
|---|
| | | const eqpNum = ref(router.currentRoute.value.query.num || 1) |
|---|
| | | const userStore = useUserStore() |
|---|
| | | const realData = ref({ |
|---|
| | | code: 0, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const position = ref(1) |
|---|
| | | //realData.value.tempValue = [0, 100] |
|---|
| | | realData.value.mois = [0.5, 0.35, 0.2] |
|---|
| | | statusGif = 'tmrefeng2' |
|---|
| | | realData.value.herbImage = 'yaocai1.png' |
|---|
| | | // const faultConst = ['æ¥åæ¥è¦','å·¦åæ¥å','é¢æ¿æ¥å','åºææ¥å','温度失æ§','æ»çå','æ»çé','æ»ççµæºè¿æµ','é£ç®±å','é£ç®±é','é£ç®±é£æºè¿æµ'] |
|---|
| | | // const warningConst = ['å·¦åé¨','å³åé¨','å·¦åé¨','å³åé¨','æ»çä¸å¨é«ä½','é£ç®±ä¸å¨ä½ä½','é£ç®±ä¸å¨é«ä½','å çä½ä¼ æå¨','å·¦åé£ç®±é«ä½ä¼ æå¨','å³åé£ç®±é«ä½ä¼ æå¨','å·¦åé£ç®±é«ä½ä¼ æå¨','å³åé£ç®±é«ä½ä¼ æå¨','å·¦åé£ç®±ä½ä½ä¼ æå¨','å³åé£ç®±ä½ä½ä¼ æå¨','å·¦åé£ç®±ä½ä½ä¼ æå¨','å³åé£ç®±ä½ä½ä¼ æå¨','å·¦åæ»çä½ä½ä¼ æå¨','å³åæ»çä½ä½ä¼ æå¨','å·¦åæ»çä½ä½ä¼ æå¨','å³åæ»çä½ä½ä¼ æå¨'] |
|---|
| | | |
|---|
| | | //----------------error---------------- |
|---|
| | | const shebeijiting = ref(false) |
|---|
| | | const chuliaojiting = ref(false) |
|---|
| | | const zuoqianjiting = ref(false) |
|---|
| | | const mianbanjiting = ref(false) |
|---|
| | | const fengxiangsheng = ref(false) |
|---|
| | | const fengxiangjiang = ref(false) |
|---|
| | | const fengjiguoliu = ref(false) |
|---|
| | | const guntongsheng = ref(false) |
|---|
| | | const guntongjiang = ref(false) |
|---|
| | | const guntongguoliu = ref(false) |
|---|
| | | const wendubaojing = ref(false) |
|---|
| | | //--------------warning------------ |
|---|
| | | const zuoqianmen = ref(false) |
|---|
| | | const zuohoumen = ref(false) |
|---|
| | | const youqianmen = ref(false) |
|---|
| | | const youhoumen = ref(false) |
|---|
| | | const guntongbuzaigaowei = ref(false) |
|---|
| | | const fengxiangbuzaigaowei = ref(false) |
|---|
| | | const fengxiangbuzaidiwei = ref(false) |
|---|
| | | const jiareweichuanganqi = ref(false) |
|---|
| | | const zuoqianfengxianggaowei = ref(false) |
|---|
| | | const zuohoufengxianggaowei = ref(false) |
|---|
| | | const youqianfengxianggaowei = ref(false) |
|---|
| | | const youhoufengxianggaowei = ref(false) |
|---|
| | | const zuoqianfengxiangdiwei = ref(false) |
|---|
| | | const zuohoufengxiangdiwei = ref(false) |
|---|
| | | const youqianfengxiangdiwei = ref(false) |
|---|
| | | const youhoufengxiangdiwei = ref(false) |
|---|
| | | const zuoqianguntongdiwei = ref(false) |
|---|
| | | const zuohouguntongdiwei = ref(false) |
|---|
| | | const youqianguntongdiwei = ref(false) |
|---|
| | | const youhouguntongdiwei = ref(false) |
|---|
| | | |
|---|
| | | const faultList = ref([]) |
|---|
| | | var chart1: echarts.ECharts |
|---|
| | | var chart2: echarts.ECharts |
|---|
| | | var chart3: echarts.ECharts |
|---|
| | | var chart4: echarts.ECharts |
|---|
| | | // å¨æ读åå¾ç |
|---|
| | | function getHerbImageUrl(name: string) { |
|---|
| | | return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¨æ读åå¾ç |
|---|
| | | function getStatusImageUrl(name: string) { |
|---|
| | | if (name == 'zanting') { |
|---|
| | | return new URL(`/src/assets/images/dry/${name}.png`, import.meta.url).href |
|---|
| | | } else { |
|---|
| | | return new URL(`/src/assets/images/dry/${name}.gif`, import.meta.url).href |
|---|
| | | } |
|---|
| | | } |
|---|
| | | function queryEqp() { |
|---|
| | | queryById({ id: router.currentRoute.value.params.id }).then((res) => { |
|---|
| | | // console.log(`output->res`, res) |
|---|
| | | eqp.value = res |
|---|
| | | eqp.value.dryEfficiency = res.dryEfficiency |
|---|
| | | eqp.value.steamConsumption = res.steamConsumption |
|---|
| | | eqp.value.powerConsumption = res.powerConsumption |
|---|
| | | queryRealTime() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function listAllEqp() { |
|---|
| | | listAll({ enable: 'Y' }) |
|---|
| | | .then((result) => { |
|---|
| | | //console.log(`output->result`, result) |
|---|
| | | eqps.value = result |
|---|
| | | // result.forEach((item) => { |
|---|
| | | // eqpCodes.push(item.code) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | //console.log(`output->err`, err) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function initCharts() { |
|---|
| | | let chartDom1: HTMLElement = document.getElementById('chartDom') as HTMLElement |
|---|
| | | let chartDom2: HTMLElement = document.getElementById('chartDom2') as HTMLElement |
|---|
| | | let chartDom3: HTMLElement = document.getElementById('chartDom3') as HTMLElement |
|---|
| | | let chartDom4: HTMLElement = document.getElementById('chartDom4') as HTMLElement |
|---|
| | | |
|---|
| | | chart1 = echarts.init(chartDom1) |
|---|
| | | chart2 = echarts.init(chartDom2) |
|---|
| | | chart3 = echarts.init(chartDom3) |
|---|
| | | chart4 = echarts.init(chartDom4) |
|---|
| | | |
|---|
| | | const option2 = { |
|---|
| | | grid: { |
|---|
| | | left: '13%', // 左边è·ï¼ä¹å¯ä»¥æ¯å
·ä½çåç´ å¼ï¼ä¾å¦ 50 |
|---|
| | | right: '6%', // å³è¾¹è· |
|---|
| | | top: '13%', // ä¸è¾¹è· |
|---|
| | | bottom: '35%', // 设置ä¸è¾¹è·ï¼ä¾å¦è¿é设置为15% |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLabel: { |
|---|
| | | rotate: 55, // è¿é设置æ转çè§åº¦ï¼æ£å¼è¡¨ç¤ºé¡ºæ¶éæ转 |
|---|
| | | interval: 0, // 强å¶æ¾ç¤ºæææ ç¾ï¼ä¸è¿è¡é´éæ¾ç¤º |
|---|
| | | color: '#fff', // 设置Xè½´æ ç¾åä½é¢è² |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | color: '#fff', // 设置Yè½´æ ç¾åä½é¢è² |
|---|
| | | }, |
|---|
| | | splitLine: { show: false }, // ä¸æ¾ç¤ºYè½´åå²çº¿ï¼ç½æ ¼çº¿ï¼ |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: [], |
|---|
| | | type: 'bar', |
|---|
| | | itemStyle: { |
|---|
| | | color: '#3398DB', // æå®æ±åçé¢è² |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | const option1 = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | }, |
|---|
| | | |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: [], |
|---|
| | | type: 'pie', |
|---|
| | | radius: '50%', |
|---|
| | | emphasis: { |
|---|
| | | itemStyle: { |
|---|
| | | shadowBlur: 10, |
|---|
| | | shadowOffsetX: 0, |
|---|
| | | shadowColor: 'rgba(0, 0, 0, 0.5)', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | show: true, // æ¾ç¤ºæ ç¾ |
|---|
| | | //position: 'outside', // æ ç¾çä½ç½®ï¼å¯ä»¥æ¯ 'outside', 'inside', 'center' |
|---|
| | | //formatter: '{b}: {c} ({d}%)', // æ ç¾å
å®¹æ ¼å¼åå½æ°æåç¬¦ä¸²æ¨¡æ¿ |
|---|
| | | fontSize: 12, // 设置åä½å¤§å° |
|---|
| | | // fontWeight: 'bold', // 设置åä½ç²ç» |
|---|
| | | color: '#fff', // 设置åä½é¢è² |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | const option4 = { |
|---|
| | | grid: { |
|---|
| | | left: '13%', // 左边è·ï¼ä¹å¯ä»¥æ¯å
·ä½çåç´ å¼ï¼ä¾å¦ 50 |
|---|
| | | right: '6%', // å³è¾¹è· |
|---|
| | | top: '13%', // ä¸è¾¹è· |
|---|
| | | bottom: '35%', // 设置ä¸è¾¹è·ï¼ä¾å¦è¿é设置为15% |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLabel: { |
|---|
| | | rotate: 55, // è¿é设置æ转çè§åº¦ï¼æ£å¼è¡¨ç¤ºé¡ºæ¶éæ转 |
|---|
| | | interval: 0, // 强å¶æ¾ç¤ºæææ ç¾ï¼ä¸è¿è¡é´éæ¾ç¤º |
|---|
| | | color: '#fff', // 设置Xè½´æ ç¾åä½é¢è² |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | color: '#fff', // 设置Yè½´æ ç¾åä½é¢è² |
|---|
| | | }, |
|---|
| | | splitLine: { show: false }, // ä¸æ¾ç¤ºYè½´åå²çº¿ï¼ç½æ ¼çº¿ï¼ |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: [], |
|---|
| | | type: 'bar', |
|---|
| | | itemStyle: { |
|---|
| | | color: '#3398DB', // æå®æ±åçé¢è² |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | const option3 = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | }, |
|---|
| | | |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: [], |
|---|
| | | type: 'pie', |
|---|
| | | radius: '50%', |
|---|
| | | emphasis: { |
|---|
| | | itemStyle: { |
|---|
| | | shadowBlur: 10, |
|---|
| | | shadowOffsetX: 0, |
|---|
| | | shadowColor: 'rgba(0, 0, 0, 0.5)', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | show: true, // æ¾ç¤ºæ ç¾ |
|---|
| | | //position: 'outside', // æ ç¾çä½ç½®ï¼å¯ä»¥æ¯ 'outside', 'inside', 'center' |
|---|
| | | //formatter: '{b}: {c} ({d}%)', // æ ç¾å
å®¹æ ¼å¼åå½æ°æåç¬¦ä¸²æ¨¡æ¿ |
|---|
| | | fontSize: 12, // 设置åä½å¤§å° |
|---|
| | | //fontWeight: 'bold', // 设置åä½ç²ç» |
|---|
| | | color: '#fff', // 设置åä½é¢è² |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | |
|---|
| | | option1 && chart1.setOption(option1) |
|---|
| | | option2 && chart2.setOption(option2) |
|---|
| | | option3 && chart3.setOption(option3) |
|---|
| | | option4 && chart4.setOption(option4) |
|---|
| | | queryRealTime() |
|---|
| | | } |
|---|
| | | |
|---|
| | | var shangliaoFlag = false |
|---|
| | | var statusGif = 'tmrefeng2' |
|---|
| | | var statusTxt = 'æ£å¨å¹²ç¥' |
|---|
| | | |
|---|
| | | function chaiwangban() { |
|---|
| | | statusGif = 'chaiwangban-1' |
|---|
| | | setTimeout(shangliao, 7000) |
|---|
| | | } |
|---|
| | | |
|---|
| | | function shangliao() { |
|---|
| | | statusGif = 'shangliao-N' |
|---|
| | | setTimeout(() => { |
|---|
| | | statusGif = 'zhuangwangban' |
|---|
| | | setTimeout(() => { |
|---|
| | | statusGif = 'guanmen1' |
|---|
| | | setTimeout(() => { |
|---|
| | | shangliaoFlag = false |
|---|
| | | }, 4000) |
|---|
| | | }, 7000) |
|---|
| | | }, 15000) |
|---|
| | | } |
|---|
| | | function back() { |
|---|
| | | router.back() |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * æ¥è¯¢å®æ¶æ°æ® |
|---|
| | | */ |
|---|
| | | function queryRealTime() { |
|---|
| | | if (eqp.value) { |
|---|
| | | eqp.value = eqps.value[eqpNum.value] |
|---|
| | | // console.log("888",eqp.value); |
|---|
| | | let tenantId = getTenantId() |
|---|
| | | let eqpCode = eqp.value.code |
|---|
| | | let queryRealTimeUrl = '/dry/real/getRealTimeData' |
|---|
| | | defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => { |
|---|
| | | if (res && res.trendVo) { |
|---|
| | | console.log(`output->re11s`, res) |
|---|
| | | var totalTime = 0 |
|---|
| | | |
|---|
| | | /**æ°´æ»´å¾å«æ°´é */ |
|---|
| | | res.mois = [ |
|---|
| | | (res.trendVo.moisture / 100).toFixed(2), |
|---|
| | | (res.trendVo.moisture / 100 / 1.5).toFixed(2), |
|---|
| | | (res.trendVo.moisture / 100 / 3).toFixed(2), |
|---|
| | | ] |
|---|
| | | |
|---|
| | | /**ç¶æ/gifå¨å¾ */ |
|---|
| | | if (!shangliaoFlag) { |
|---|
| | | if (res.orderStatus == 0) { |
|---|
| | | statusGif = 'zanting' |
|---|
| | | statusTxt = 'åå¤' |
|---|
| | | } else if (res.orderStatus == 1) { |
|---|
| | | shangliaoFlag = true |
|---|
| | | statusGif = 'kaimen1' |
|---|
| | | statusTxt = 'ä¸æ' |
|---|
| | | setTimeout(chaiwangban, 4000) |
|---|
| | | } else if (res.orderStatus == 2) { |
|---|
| | | // statusTxt = res.level |
|---|
| | | // statusGif = 'zanting' |
|---|
| | | // if (res.level === 'åå¤é¶æ®µ') { |
|---|
| | | // console.log("åå¤é¶æ®µ" + statusGif); |
|---|
| | | // statusGif = 'zanting' |
|---|
| | | // } else if (res.level === 'å¹²ç¥é¶æ®µ' || res.level === 'æ£å¨å¹²ç¥') { |
|---|
| | | // statusGif = 'tmrefeng2' |
|---|
| | | // } else if (res.level === 'ç¿»æé¶æ®µ') { |
|---|
| | | // statusGif = 'fanliao-N' |
|---|
| | | // } else if (res.level === 'åºæé¶æ®µ') { |
|---|
| | | // statusGif = 'chuliao-N' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_fan == 1) { |
|---|
| | | statusGif = 'tmrefeng2' |
|---|
| | | statusTxt = 'æ£å¨å¹²ç¥' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_roller == 4) { |
|---|
| | | // statusGif = 'fanliao-N' |
|---|
| | | // statusTxt = 'æ£å¨ç¿»æ' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_roller == 5) { |
|---|
| | | // statusGif = 'chuliao-N' |
|---|
| | | // statusTxt = 'æ£å¨åºæ' |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // if (res.state_windbox == 2 || res.state_windbox == 3) { |
|---|
| | | // statusGif = 'fengxiangsheng-1' |
|---|
| | | // statusTxt = 'æ£å¨å¹²ç¥' |
|---|
| | | // } |
|---|
| | | } else if (res.orderStatus == 3) { |
|---|
| | | statusGif = 'zanting' |
|---|
| | | statusTxt = 'æå' |
|---|
| | | } else if (res.orderStatus == 4) { |
|---|
| | | statusGif = 'zanting' |
|---|
| | | statusTxt = 'å¹²ç¥å®æ' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | res.herbImage = 'yaocai1.png' |
|---|
| | | |
|---|
| | | if (res.herbName == 'ç½è±èèè') { |
|---|
| | | res.herbImage = 'baihuasheshecao.png' |
|---|
| | | } else if (res.herbName == 'ç³¥ç¨»æ ¹') { |
|---|
| | | res.herbImage = 'nuodaogen.png' |
|---|
| | | } else if (res.herbName == 'æ·«ç¾è¿') { |
|---|
| | | res.herbImage = 'yinyanghuo.png' |
|---|
| | | } else if (res.herbName == '马齿è') { |
|---|
| | | res.herbImage = 'machixian.png' |
|---|
| | | } else if (res.herbName == '墨æ±è²') { |
|---|
| | | res.herbImage = 'mohanlian.png' |
|---|
| | | } else if (res.herbName == 'æ¡ç½ç®') { |
|---|
| | | res.herbImage = 'sangbaipi.png' |
|---|
| | | } |
|---|
| | | |
|---|
| | | res.isError = false |
|---|
| | | if (res.fault) { |
|---|
| | | res.isError = true |
|---|
| | | res.errorMsg = res.fault; |
|---|
| | | const faults = res.fault; |
|---|
| | | console.log('errorMsg:', res.fault) |
|---|
| | | if (faults.includes('æ¥åæ¥è¦')) { |
|---|
| | | shebeijiting.value = true; |
|---|
| | | } else { |
|---|
| | | shebeijiting.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('å·¦åæ¥å')) { |
|---|
| | | zuoqianjiting.value = true; |
|---|
| | | } else { |
|---|
| | | zuoqianjiting.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('é¢æ¿æ¥å')) { |
|---|
| | | mianbanjiting.value = true; |
|---|
| | | } else { |
|---|
| | | mianbanjiting.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('åºææ¥å')) { |
|---|
| | | chuliaojiting.value = true; |
|---|
| | | } else { |
|---|
| | | chuliaojiting.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('温度失æ§')) { |
|---|
| | | wendubaojing.value = true; |
|---|
| | | } else { |
|---|
| | | wendubaojing.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('æ»çå')) { |
|---|
| | | guntongsheng.value = true; |
|---|
| | | } else { |
|---|
| | | guntongjiang.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('æ»çé')) { |
|---|
| | | guntongjiang.value = true; |
|---|
| | | } else { |
|---|
| | | guntongjiang.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('æ»ççµæºè¿æµ')) { |
|---|
| | | guntongguoliu.value = true; |
|---|
| | | } else { |
|---|
| | | guntongguoliu.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('é£ç®±å')) { |
|---|
| | | fengxiangsheng.value = true; |
|---|
| | | } else { |
|---|
| | | fengxiangsheng.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('é£ç®±é')) { |
|---|
| | | fengxiangjiang.value = true; |
|---|
| | | } else { |
|---|
| | | fengxiangjiang.value = false; |
|---|
| | | } |
|---|
| | | if (faults.includes('é£ç®±é£æºè¿æµ')) { |
|---|
| | | fengjiguoliu.value = true; |
|---|
| | | } else { |
|---|
| | | fengjiguoliu.value = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | shebeijiting.value = false |
|---|
| | | chuliaojiting.value = false |
|---|
| | | zuoqianjiting.value = false |
|---|
| | | mianbanjiting.value = false |
|---|
| | | fengxiangsheng.value = false |
|---|
| | | fengxiangjiang.value = false |
|---|
| | | fengjiguoliu.value = false |
|---|
| | | guntongsheng.value = false |
|---|
| | | guntongjiang.value = false |
|---|
| | | guntongguoliu.value = false |
|---|
| | | wendubaojing.value = false |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (res.warning) { |
|---|
| | | res.isWarning = true |
|---|
| | | res.warnMsg = res.warning |
|---|
| | | const warnings = res.warning; |
|---|
| | | console.log('warnMsg:', res.warning) |
|---|
| | | if (warnings.includes('å·¦åé¨')) { |
|---|
| | | zuoqianmen.value = true; |
|---|
| | | } else { |
|---|
| | | zuoqianmen.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé¨')) { |
|---|
| | | youqianmen.value = true; |
|---|
| | | } else { |
|---|
| | | youqianmen.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åé¨')) { |
|---|
| | | zuohoumen.value = true; |
|---|
| | | } else { |
|---|
| | | zuohoumen.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé¨')) { |
|---|
| | | youhoumen.value = true; |
|---|
| | | } else { |
|---|
| | | youhoumen.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('æ»çä¸å¨é«ä½')) { |
|---|
| | | guntongbuzaigaowei.value = true; |
|---|
| | | } else { |
|---|
| | | guntongbuzaigaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('é£ç®±ä¸å¨ä½ä½')) { |
|---|
| | | fengxiangbuzaidiwei.value = true; |
|---|
| | | } else { |
|---|
| | | fengxiangbuzaidiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('é£ç®±ä¸å¨é«ä½')) { |
|---|
| | | fengxiangbuzaigaowei.value = true; |
|---|
| | | } else { |
|---|
| | | fengxiangbuzaigaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å çä½ä¼ æå¨')) { |
|---|
| | | jiareweichuanganqi.value = true; |
|---|
| | | } else { |
|---|
| | | jiareweichuanganqi.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { |
|---|
| | | zuoqianfengxianggaowei.value = true; |
|---|
| | | } else { |
|---|
| | | zuoqianfengxianggaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { |
|---|
| | | youqianfengxianggaowei.value = true; |
|---|
| | | } else { |
|---|
| | | youqianfengxianggaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åé£ç®±é«ä½ä¼ æå¨')) { |
|---|
| | | zuohoufengxianggaowei.value = true; |
|---|
| | | } else { |
|---|
| | | zuohoufengxianggaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé£ç®±é«ä½ä¼ æå¨')) { |
|---|
| | | youhoufengxianggaowei.value = true; |
|---|
| | | } else { |
|---|
| | | youhoufengxianggaowei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { |
|---|
| | | zuoqianfengxiangdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | zuoqianfengxiangdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { |
|---|
| | | youqianfengxiangdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | youqianfengxiangdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åé£ç®±ä½ä½ä¼ æå¨')) { |
|---|
| | | zuohoufengxiangdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | zuohoufengxiangdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åé£ç®±ä½ä½ä¼ æå¨')) { |
|---|
| | | youhoufengxiangdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | youhoufengxiangdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { |
|---|
| | | zuoqianguntongdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | zuoqianguntongdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { |
|---|
| | | youqianguntongdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | youqianguntongdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å·¦åæ»çä½ä½ä¼ æå¨')) { |
|---|
| | | zuohouguntongdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | zuohouguntongdiwei.value = false; |
|---|
| | | } |
|---|
| | | if (warnings.includes('å³åæ»çä½ä½ä¼ æå¨')) { |
|---|
| | | youhouguntongdiwei.value = true; |
|---|
| | | } else { |
|---|
| | | youhouguntongdiwei.value = false; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | zuoqianmen.value = false; |
|---|
| | | zuohoumen.value = false; |
|---|
| | | youqianmen.value = false; |
|---|
| | | youhoumen.value = false; |
|---|
| | | guntongbuzaigaowei.value = false; |
|---|
| | | fengxiangbuzaigaowei.value = false; |
|---|
| | | fengxiangbuzaidiwei.value = false; |
|---|
| | | jiareweichuanganqi.value = false; |
|---|
| | | zuoqianfengxianggaowei.value = false; |
|---|
| | | zuohoufengxianggaowei.value = false; |
|---|
| | | youqianfengxianggaowei.value = false; |
|---|
| | | youhoufengxianggaowei.value = false; |
|---|
| | | zuoqianfengxiangdiwei.value = false; |
|---|
| | | zuohoufengxiangdiwei.value = false; |
|---|
| | | youqianfengxiangdiwei.value = false; |
|---|
| | | youhoufengxiangdiwei.value = false; |
|---|
| | | zuoqianguntongdiwei.value = false; |
|---|
| | | zuohouguntongdiwei.value = false; |
|---|
| | | youqianguntongdiwei.value = false; |
|---|
| | | youhouguntongdiwei.value = false; |
|---|
| | | } |
|---|
| | | getRealFault() |
|---|
| | | } else { |
|---|
| | | res = { |
|---|
| | | mois: [], |
|---|
| | | gif: 'tmrefeng2', |
|---|
| | | herbImage: 'yaocai1.png', |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | res.totalRemain = res.remain - (res.dryTime - totalTime) > 0 ? res.remain - (res.dryTime - totalTime) : 0 |
|---|
| | | // console.log(`output->res`, res.detailList[res.detailList.length-1]) |
|---|
| | | realData.value = res |
|---|
| | | |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ¥è¯¢å½åå·¥åæ
éæç» |
|---|
| | | */ |
|---|
| | | function getRealFault() { |
|---|
| | | return new Promise(() => { |
|---|
| | | let tenantId = getTenantId() |
|---|
| | | queryByOrderId({ orderId: realData.value.code, tenantId: tenantId }).then((res) => { |
|---|
| | | const faultStats = {} |
|---|
| | | const warningStats = {} |
|---|
| | | // 循ç¯å表ï¼æ ¹æ®ç»ææ¶é´åå¼å§æ¶é´ï¼è®¡ç®æ
éæ¶é¿ |
|---|
| | | res.forEach((item) => { |
|---|
| | | const faultName = item.faultName |
|---|
| | | item.totalTime = new Date(item.endTime) - new Date(item.startTime) |
|---|
| | | item.totalTime = item.totalTime / 1000 |
|---|
| | | |
|---|
| | | if (item.faultType === 1) { |
|---|
| | | if (!faultStats[faultName]) { |
|---|
| | | faultStats[faultName] = { |
|---|
| | | count: 0, |
|---|
| | | totalDuration: 0, // æ¯«ç§ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // æ´æ°ç»è®¡æ°æ® |
|---|
| | | faultStats[faultName].count += 1 |
|---|
| | | faultStats[faultName].totalDuration += item.totalTime |
|---|
| | | } else if (item.faultType === 2) { |
|---|
| | | if (!warningStats[faultName]) { |
|---|
| | | warningStats[faultName] = { |
|---|
| | | count: 0, |
|---|
| | | totalDuration: 0, // æ¯«ç§ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // æ´æ°ç»è®¡æ°æ® |
|---|
| | | warningStats[faultName].count += 1 |
|---|
| | | warningStats[faultName].totalDuration += item.totalTime |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | console.log(`output->res`, res) |
|---|
| | | faultList.value = res |
|---|
| | | const prepareFault = prepareData(faultStats) |
|---|
| | | const prepareWarning = prepareData(warningStats) |
|---|
| | | console.log('prePareFault', prepareFault) |
|---|
| | | console.log('prePareWarning', prepareWarning) |
|---|
| | | chart1.setOption({ |
|---|
| | | |
|---|
| | | series: [{ data: prepareFault.duration }], |
|---|
| | | }) |
|---|
| | | chart2.setOption({ |
|---|
| | | xAxis: { data: prepareFault.faultNames }, |
|---|
| | | series: [{ data: prepareFault.count }], |
|---|
| | | }) |
|---|
| | | chart3.setOption({ |
|---|
| | | series: [{ data: prepareWarning.duration }], |
|---|
| | | }) |
|---|
| | | chart4.setOption({ |
|---|
| | | xAxis: { data: prepareWarning.faultNames }, |
|---|
| | | series: [{ data: prepareWarning.count }], |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // å°ç»è®¡æ°æ®è½¬æ¢ä¸ºéåECharts使ç¨çæ ¼å¼ |
|---|
| | | function prepareData(stats) { |
|---|
| | | const faultNames = Object.keys(stats) |
|---|
| | | const durationSorted = faultNames.sort((a, b) => stats[b].totalDuration - stats[a].totalDuration) |
|---|
| | | const countSorted = faultNames.sort((a, b) => stats[b].count - stats[a].count) |
|---|
| | | |
|---|
| | | return { |
|---|
| | | faultNames: faultNames, |
|---|
| | | duration: durationSorted.map((name) => ({ name, value: stats[name].totalDuration })), |
|---|
| | | count: countSorted.map((name) => ({ name, value: stats[name].count })), |
|---|
| | | } |
|---|
| | | } |
|---|
| | | var move = true |
|---|
| | | function moveImage() { |
|---|
| | | if (move) { |
|---|
| | | position.value -= 0.3 |
|---|
| | | } else { |
|---|
| | | position.value += 0.3 |
|---|
| | | } |
|---|
| | | if (position.value < -240) { |
|---|
| | | move = false |
|---|
| | | } |
|---|
| | | if (position.value > -1) { |
|---|
| | | move = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¼å§èªå¨æ»å¨ |
|---|
| | | const startAutoScroll = () => { |
|---|
| | | console.log('å¼å§èªå¨æ»å¨') |
|---|
| | | scrollInterval = setInterval(() => { |
|---|
| | | if (isScrolling.value) return |
|---|
| | | isScrolling.value = true |
|---|
| | | |
|---|
| | | const container = scrollContainer.value |
|---|
| | | |
|---|
| | | // æ»å¨å®¹å¨ |
|---|
| | | container.scrollTop += 1 |
|---|
| | | // å½æ»å¨å°åºé¨æ¶ï¼éç½®å°é¡¶é¨ |
|---|
| | | if (container.scrollTop >= container.scrollHeight - container.clientHeight) { |
|---|
| | | setTimeout(() => { |
|---|
| | | container.scrollTop = 0 |
|---|
| | | isScrolling.value = false // ç«å³å
许ä¸ä¸æ¬¡æ»å¨å¼å§ |
|---|
| | | return |
|---|
| | | }, 2000) |
|---|
| | | } |
|---|
| | | if (container.scrollTop < container.scrollHeight - container.clientHeight) { |
|---|
| | | setTimeout(() => { |
|---|
| | | isScrolling.value = false |
|---|
| | | }, 20) // ç¡®ä¿æ¯æ¬¡æ»å¨é´é足å¤é¿ï¼é¿å
è¿ç»è§¦å |
|---|
| | | } |
|---|
| | | }, 20) // æ§å¶æ»å¨é度ï¼æ°å¼è¶å°æ»å¨è¶å¿« |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // åæ¢èªå¨æ»å¨ |
|---|
| | | const stopAutoScroll = () => { |
|---|
| | | if (scrollInterval) { |
|---|
| | | clearInterval(scrollInterval) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | listAllEqp() |
|---|
| | | //queryEqp() |
|---|
| | | // DOMæè½½å®æå渲æå¾è¡¨ |
|---|
| | | onMounted(() => { |
|---|
| | | Timer.value = setInterval(queryRealTime, 3000) |
|---|
| | | Timer2.value = setInterval(moveImage, 50) |
|---|
| | | startAutoScroll() |
|---|
| | | setTimeout(initCharts, 500) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | onUnmounted(() => { |
|---|
| | | clearInterval(Timer.value) |
|---|
| | | clearInterval(Timer2.value) |
|---|
| | | Timer.value = null |
|---|
| | | Timer2.value = null |
|---|
| | | stopAutoScroll() |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .eqpBox { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | .eqpRow { |
|---|
| | | } |
|---|
| | | .eqpImage { |
|---|
| | | height: 1080px; |
|---|
| | | width: 1920px; |
|---|
| | | background-image: url(/src/assets/images/dry/bg.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | color: white; |
|---|
| | | /*background-position: 160px 280px; */ |
|---|
| | | /* background-color: red; */ |
|---|
| | | background-size: 120%; |
|---|
| | | padding: 10px; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-content: flex-start; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .leftEqp { |
|---|
| | | height: 1012px; |
|---|
| | | 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: 993px; |
|---|
| | | 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: 281px; |
|---|
| | | /* 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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .leftTop0 { |
|---|
| | | height: 243px; |
|---|
| | | width: 1200px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-content: flex-start; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | .leftTop1 { |
|---|
| | | width: 360px; |
|---|
| | | height: 187px; |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 30px; |
|---|
| | | color: #727272; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .leftTop3 { |
|---|
| | | width: 340px; |
|---|
| | | height: 187px; |
|---|
| | | /* 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: 993px; |
|---|
| | | width: 700px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rightTop { |
|---|
| | | display: flex; |
|---|
| | | height: 318px; |
|---|
| | | padding-left: 10px; |
|---|
| | | } |
|---|
| | | .rightTwo { |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .infoChart { |
|---|
| | | width: 340px; |
|---|
| | | height: 328px; |
|---|
| | | /* 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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tempMoisChart { |
|---|
| | | width: 690px; |
|---|
| | | height: 318px; |
|---|
| | | /* background: white; */ |
|---|
| | | |
|---|
| | | padding: 20px; |
|---|
| | | border-radius: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep() .ant-slider-mark-text { |
|---|
| | | padding-left: 15px; |
|---|
| | | font-size: 10px; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-mark-text::before { |
|---|
| | | content: ''; |
|---|
| | | display: block; |
|---|
| | | width: 6px; |
|---|
| | | height: 1px; |
|---|
| | | background-color: #1890ff; |
|---|
| | | |
|---|
| | | position: absolute; |
|---|
| | | top: 10px; |
|---|
| | | left: 0px; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-rail { |
|---|
| | | width: 10px !important; |
|---|
| | | border-radius: 6px 6px 0 0; |
|---|
| | | background: linear-gradient(to top, #ce0000 0%, #ce0000 40%, #ce0000 75%, rgb(160, 160, 160) 100%); |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-track { |
|---|
| | | background: rgb(216, 216, 216); |
|---|
| | | |
|---|
| | | height: 20px; |
|---|
| | | width: 10px !important; |
|---|
| | | border-radius: 6px 6px 0 0; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-track:hover { |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-handle { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-dot { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-step { |
|---|
| | | width: 10px !important; |
|---|
| | | } |
|---|
| | | :deep() .ant-slider-step > :first-child { |
|---|
| | | display: block !important; |
|---|
| | | width: 30px !important; |
|---|
| | | height: 30px !important; |
|---|
| | | bottom: -26px !important; |
|---|
| | | left: -6px; |
|---|
| | | border: none; |
|---|
| | | background: #ce0000; |
|---|
| | | } |
|---|
| | | :deep() .progress { |
|---|
| | | padding: 25px 25px; |
|---|
| | | |
|---|
| | | width: 360px; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | :deep() .ant-progress-bg { |
|---|
| | | height: 25px !important; |
|---|
| | | } |
|---|
| | | .outDiv { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | justify-items: center; |
|---|
| | | } |
|---|
| | | .blingbling { |
|---|
| | | -webkit-animation: scaleout 1s infinite ease-in-out; |
|---|
| | | animation: scaleout 1s infinite ease-in-out; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | @-webkit-keyframes scaleout { |
|---|
| | | 0% { |
|---|
| | | -webkit-transform: scale(1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | -webkit-transform: scale(1.1); |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes scaleout { |
|---|
| | | 0% { |
|---|
| | | transform: scale(1); |
|---|
| | | -webkit-transform: scale(1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | transform: scale(1.1); |
|---|
| | | -webkit-transform: scale(1.1); |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .error-div { |
|---|
| | | position: absolute; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | .error-marker { |
|---|
| | | width: 18px; |
|---|
| | | height: 18px; |
|---|
| | | background: red; |
|---|
| | | border-radius: 50%; |
|---|
| | | } |
|---|
| | | .error-msg { |
|---|
| | | margin-left: 6px; |
|---|
| | | height: 24px; |
|---|
| | | background: gray; |
|---|
| | | border-radius: 5px; |
|---|
| | | font-weight: bold; |
|---|
| | | color: red; |
|---|
| | | } |
|---|
| | | .warn-marker { |
|---|
| | | width: 18px; |
|---|
| | | height: 18px; |
|---|
| | | background: orange; |
|---|
| | | border-radius: 50%; |
|---|
| | | } |
|---|
| | | .warn-msg { |
|---|
| | | margin-left: 6px; |
|---|
| | | height: 24px; |
|---|
| | | background: gray; |
|---|
| | | border-radius: 5px; |
|---|
| | | font-weight: bold; |
|---|
| | | color: orange; |
|---|
| | | } |
|---|
| | | .scroll-container { |
|---|
| | | height: 280px; /* è®¾ç½®ä½ æ³è¦çé«åº¦ */ |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | </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="eqpInfoup" @click="gotoeqp(num - 1 + (num == 3) * 1 + (num == 4) * 2 )"> |
|---|
| | | <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>{{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.herbName || 'ææ ' }}</div> |
|---|
| | | <div>{{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.originWeight || 0 }} Kg</div> |
|---|
| | | </div> |
|---|
| | | <!-- <div class="eqp-name">{{ eqpMap.get(eqpCodes[num - 1])?.name || 'é¢ç' }}</div> --> |
|---|
| | | <!-- <div class="process"> </div> --> |
|---|
| | |
|---|
| | | from: '#108ee9', |
|---|
| | | to: '#87d068', |
|---|
| | | }" |
|---|
| | | :percent="parseFloat(realTime.get(eqpCodes[num - 1])?.percent || '0')" |
|---|
| | | :percent="parseFloat(realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.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' }} % |
|---|
| | | {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.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' }} â |
|---|
| | | {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.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 |
|---|
| | | {{ realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2 ])?.totalRemain || 0 }} min |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | |
|---|
| | | <div class="weight" |
|---|
| | | ><div class="herb"> |
|---|
| | | {{ showInfo(realTime.get(eqpCodes[num - 1])) }} |
|---|
| | | {{ showInfo(realTime.get(eqpCodes[num - 1 + (num == 3) * 1 + (num == 4) * 2])) }} |
|---|
| | | </div></div |
|---|
| | | > |
|---|
| | | <div class="water"> |
|---|
| | | <div class="eqp_num">{{ num }}</div> |
|---|
| | | <div :class="{ eqp_num: 1 == 1, eqp_num_two: num === 2, eqp_num_three: num === 3, eqp_num_four: num === 4 }">{{ num + (num == 3) * 1 + (num == 4) * 2 }}</div> |
|---|
| | | <!-- <div class="temp"> |
|---|
| | | <div style="line-height: 28px"><Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> </div> |
|---|
| | | <div class="font"> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | <div class="down"> |
|---|
| | | <div v-for="num in eqpNum2" :key="num" :class="{ two: num === 1, three: num === 2, four_down: num === 3 }"> |
|---|
| | | <div class="eqpInfodown" @click="gotoeqp(num + 3)"> |
|---|
| | | <div class="eqpInfodown" @click="gotoeqp(num - 2 * num + 3 * num)"> |
|---|
| | | <!-- <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="herb">{{ showInfo(realTime.get(eqpCodes[num - 2 * num + 3 * num])) }}</div></div |
|---|
| | | > |
|---|
| | | <div class="water"> |
|---|
| | | <div class="eqp_num">{{ num - 2 * num + 3 * num + 1 }}</div> |
|---|
| | | <div :class="{eqp_num:1==1, eqp_num_down_one: num === 1, eqp_num_down_two: num === 2, eqp_num_down_three: num === 3}">{{ num - 2 * num + 3 * num + 1 }}</div> |
|---|
| | | <!-- <div class="temp"> |
|---|
| | | <div style="line-height: 28px"> |
|---|
| | | <Icon style="color: #1850b7" icon="ic:twotone-water-drop" :size="28" /> |
|---|
| | |
|---|
| | | <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>{{ realTime.get(eqpCodes[num - 2 * num + 3 * num])?.herbName || 'ææ ' }}</div> |
|---|
| | | <div>{{ realTime.get(eqpCodes[num - 2 * num + 3 * num])?.originWeight || 0 }} Kg</div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <Progress |
|---|
| | |
|---|
| | | from: '#108ee9', |
|---|
| | | to: '#87d068', |
|---|
| | | }" |
|---|
| | | :percent="parseFloat(realTime.get(eqpCodes[num + 3])?.percent || '0')" |
|---|
| | | :percent="parseFloat(realTime.get(eqpCodes[num - 2 * num + 3 * num])?.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 + 3])?.trendVo?.moisture?.toFixed(1) || '0' }} % |
|---|
| | | {{ realTime.get(eqpCodes[num - 2 * num + 3 * num])?.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' }} â |
|---|
| | | {{ realTime.get(eqpCodes[num - 2 * num + 3 * num])?.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 |
|---|
| | | {{ realTime.get(eqpCodes[num - 2 * num + 3 * num])?.totalRemain || 0 }} min |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | .bgImage { |
|---|
| | | height: 1080px; |
|---|
| | | width: 1920px; |
|---|
| | | background-image: url(/src/assets/images/dry/bg/223.png); |
|---|
| | | background-image: url(/src/assets/images/dry/bg/tjtbg@0.5x.png); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 104%; |
|---|
| | | background-position: 0px 257px; |
|---|
| | | background-position: 0px 233px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .head { |
|---|
| | |
|---|
| | | justify-content: flex-start; |
|---|
| | | } |
|---|
| | | .down { |
|---|
| | | padding-left: 554px; |
|---|
| | | padding-left: 640px; |
|---|
| | | margin-top: -760px; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .one { |
|---|
| | | margin: 278px 10px; |
|---|
| | | margin: 282px 37px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .two { |
|---|
| | | margin: 208px 23px; |
|---|
| | | margin: 227px -49px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .three { |
|---|
| | | margin: 110px 158px; |
|---|
| | | margin: 118px 197px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .four { |
|---|
| | | margin: 16px 10px; |
|---|
| | | margin: 0px -5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .four_down { |
|---|
| | | margin: 4px 74px; |
|---|
| | | margin: -3px 17px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqp-title { |
|---|
| | |
|---|
| | | .water { |
|---|
| | | height: 120px; |
|---|
| | | width: 110px; |
|---|
| | | margin: 58px 158px; |
|---|
| | | margin: 69px 178px; |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | |
|---|
| | | } |
|---|
| | | .eqp_num { |
|---|
| | | font-weight: bold; |
|---|
| | | width: 40px; |
|---|
| | | height: 40px; |
|---|
| | | width: 35px; |
|---|
| | | height: 35px; |
|---|
| | | background: #a0782e; |
|---|
| | | border-radius: 50px; |
|---|
| | | /* text-align: center; */ |
|---|
| | | font-size: 23px; |
|---|
| | | font-size: 18px; |
|---|
| | | color: white; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | .eqp_num_two { |
|---|
| | | margin-left: -6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqp_num_three { |
|---|
| | | margin-left: -7px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqp_num_four { |
|---|
| | | margin-left: -8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .eqp_num_down_one { |
|---|
| | | margin: -16px -82px; |
|---|
| | | } |
|---|
| | | .eqp_num_down_two { |
|---|
| | | margin: -23px -61px; |
|---|
| | | } |
|---|
| | | .eqp_num_down_three { |
|---|
| | | margin: -24px -69px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .putincolor { |
|---|
| | | color: antiquewhite; |
|---|
| | |
|---|
| | | dataIndex: 'type_dictText', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: 'å¶é å', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'manufacturer', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: 'è´å
¥æ¥æ', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'purchaseDate', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: 'å¯ç¨æ¥æ', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'startDate', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: 'å®è£
ä½ç½®', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'location', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '设å¤ç¶æ', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'status', |
|---|
| | | customRender: ({text}) => { |
|---|
| | | // 0-'æ°å¢',1-'å¨ç¨', 2-'åç¨', 3-'ç»´ä¿®', 4-'æ¥åº' |
|---|
| | | const options = { |
|---|
| | | '0': 'æ°å¢', |
|---|
| | | '1': 'å¨ç¨', |
|---|
| | | '2': 'åç¨', |
|---|
| | | '3': 'ç»´ä¿®', |
|---|
| | | '4': 'æ¥åº' |
|---|
| | | }; |
|---|
| | | return options[text] || text; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: 'æ¥åºæ¥æ', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'scrapDate', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '设å¤æè¿°', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'remark', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '设å¤IP', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'ip', |
|---|
| | |
|---|
| | | ]) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '设å¤ç¶æ', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'status', |
|---|
| | | customRender: ({text}) => { |
|---|
| | | // 0-'æ°å¢',1-'å¨ç¨', 2-'åç¨', 3-'ç»´ä¿®', 4-'æ¥åº' |
|---|
| | | const options = { |
|---|
| | | '0': 'æ°å¢', |
|---|
| | | '1': 'å¨ç¨', |
|---|
| | | '2': 'åç¨', |
|---|
| | | '3': 'ç»´ä¿®', |
|---|
| | | '4': 'æ¥åº' |
|---|
| | | }; |
|---|
| | | return options[text] || text; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: 'å¶é å', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'manufacturer', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: 'è´å
¥æ¥æ', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'purchaseDate', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: 'å¯ç¨æ¥æ', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'startDate', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: 'å®è£
ä½ç½®', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'location', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: 'æ¥åºæ¥æ', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'scrapDate', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '设å¤æè¿°', |
|---|
| | | align: 'center', |
|---|
| | | dataIndex: 'remark', |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | //æ¥è¯¢æ°æ® |
|---|
| | | export const searchFormSchema: FormSchema[] = [ |
|---|
| | |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '车é´id', |
|---|
| | | field: 'shopId', |
|---|
| | | component: 'JDictSelectTag', |
|---|
| | | componentProps: { |
|---|
| | | dictCode: 'dry_shop,name,id,tenant_id=' + getTenantId(), |
|---|
| | | }, |
|---|
| | | dynamicRules: ({ }) => { |
|---|
| | | return [{ required: true, message: '请è¾å
¥è½¦é´id!' }] |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | label: '设å¤ç±»å', |
|---|
| | | field: 'type', |
|---|
| | | component: 'JDictSelectTag', |
|---|
| | | componentProps: { |
|---|
| | | dictCode: 'dry_eqp_type,name,id,tenant_id=' + getTenantId(), |
|---|
| | | }, |
|---|
| | | dynamicRules: ({ }) => { |
|---|
| | | return [{ required: true, message: '请è¾å
¥è®¾å¤ç±»å!' }] |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '设å¤IP', |
|---|
| | | field: 'ip', |
|---|
| | | component: 'Input', |
|---|
| | | dynamicRules: ({ model, schema }) => { |
|---|
| | | return [{ required: true, message: '请ç»å®è®¾å¤IP!' }, { ...rules.duplicateCheckRule('dry_equipment', 'ip', model, schema)[0] }] |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: 'å¶é å', |
|---|
| | | field: 'manufacturer', |
|---|
| | | component: 'Input', |
|---|
| | |
|---|
| | | format: 'YYYY-MM-DD' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '设å¤IP', |
|---|
| | | field: 'ip', |
|---|
| | | component: 'Input', |
|---|
| | | dynamicRules: ({ model, schema }) => { |
|---|
| | | return [{ required: true, message: '请ç»å®è®¾å¤IP!' }, { ...rules.duplicateCheckRule('dry_equipment', 'ip', model, schema)[0] }] |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '设å¤ç±»å', |
|---|
| | | field: 'type', |
|---|
| | | component: 'JDictSelectTag', |
|---|
| | | componentProps: { |
|---|
| | | dictCode: 'dry_eqp_type,name,id,tenant_id=' + getTenantId(), |
|---|
| | | }, |
|---|
| | | dynamicRules: ({ }) => { |
|---|
| | | return [{ required: true, message: '请è¾å
¥è®¾å¤ç±»å!' }] |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | label: '设å¤æè¿°', |
|---|
| | | field: 'remark', |
|---|
| | | component: 'Input', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '车é´id', |
|---|
| | | field: 'shopId', |
|---|
| | | component: 'JDictSelectTag', |
|---|
| | | componentProps: { |
|---|
| | | dictCode: 'dry_shop,name,id,tenant_id=' + getTenantId(), |
|---|
| | | }, |
|---|
| | | dynamicRules: ({ }) => { |
|---|
| | | return [{ required: true, message: '请è¾å
¥è½¦é´id!' }] |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | label: 'å¯ç¨ç¶æ', |
|---|
| | | field: 'enable', |
|---|
