|
@@ -1,267 +1,320 @@
|
|
|
<template>
|
|
|
- <!-- 设备常见操作弹窗 -->
|
|
|
- <van-dialog class-name="operDialog" width="350px" v-model:show="show" :showConfirmButton="false"
|
|
|
- :showCancelButton="false" :closeOnClickOverlay="true">
|
|
|
- <slot name="title">
|
|
|
- <div class="van-dialog__header" style="padding-bottom: 1em;">{{ $t("device.commonOperations") }}</div>
|
|
|
- <div class="txt1" style="padding: 0.2em 1em">
|
|
|
- {{ $t("device.equipmentName") }}: {{ device.name != null ? device.name : $t("device.equipmentNameTips") }}
|
|
|
+ <!-- 操作弹窗 -->
|
|
|
+ <van-dialog class="operation-dialog" :width="isMobile ? '90%' : '560px'" v-model:show="show"
|
|
|
+ :show-confirm-button="false" :show-cancel-button="false" :close-on-click-overlay="true">
|
|
|
+ <!-- 头部 -->
|
|
|
+ <div class="dialog-header">
|
|
|
+ <h3 class="dialog-title">{{ $t("device.commonOperations") }}</h3>
|
|
|
+ <van-icon name="cross" class="close-icon" @click="show = false" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 设备信息 -->
|
|
|
+ <div class="device-info">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="info-label">{{ $t("device.equipmentName") }}:</span>
|
|
|
+ <span class="info-value">{{ device.name || $t("device.equipmentNameTips") }}</span>
|
|
|
</div>
|
|
|
- <div class="txt1" style="padding: 0.2em 1em">
|
|
|
- {{ $t("device.equipmentNo") }}: {{ device.clientId.slice(-6) }}
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="info-label">{{ $t("device.equipmentNo") }}:</span>
|
|
|
+ <span class="info-value">{{ device.clientId.slice(-6) }}</span>
|
|
|
</div>
|
|
|
- </slot>
|
|
|
- <van-icon name="cross" class="close" @click="show = false" />
|
|
|
- <div class="group4 flex-col"></div>
|
|
|
- <div class="operBox">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 操作列表 -->
|
|
|
+ <div class="operation-grid">
|
|
|
<!-- 重启炉头 -->
|
|
|
- <div v-if="controlList.includes('C1')" class="operItem" @click="restartFurnace()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/restart.png" />
|
|
|
+ <div v-if="controlList.includes('C1')" class="operation-item" @click="restartFurnace()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/restart.png" alt="restart" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">
|
|
|
+ {{ device.machineType === '0' || !device.machineType ?
|
|
|
+ $t("device.restartFurnaceHead") : $t("device.restart") }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div v-if="device.machineType === '0' || device.machineType === null" class="operText">{{
|
|
|
- $t("device.restartFurnaceHead") }}</div>
|
|
|
- <div v-else class="operText">{{ $t("device.restart") }}</div>
|
|
|
</div>
|
|
|
- <!-- 睡眠 -->
|
|
|
- <div v-if="controlList.includes('C2')" class="operItem" @click="sleepEquipmentFun()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/sleep.png" />
|
|
|
+
|
|
|
+ <!-- 睡眠控制 -->
|
|
|
+ <div v-if="controlList.includes('C2')" class="operation-item" @click="sleepEquipmentFun()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/sleep.png" alt="sleep" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ sleepTitle }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ sleepTitle }}</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 开启炉头/设备 -->
|
|
|
- <div v-if="controlList.includes('C3') && device.machineType != '2'" class="operItem" @click="openOffFurnace(1)">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/onOff.png" />
|
|
|
+ <div v-if="controlList.includes('C3') && device.machineType != '2'" class="operation-item"
|
|
|
+ @click="openOffFurnace(1)">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/onOff.png" alt="onOff" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">
|
|
|
+ {{ device.machineType === '0' || !device.machineType ?
|
|
|
+ $t("device.openFurnHead") : $t("device.openDevice") }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div v-if="device.machineType === '0' || device.machineType === null" class="operText">{{
|
|
|
- $t("device.openFurnHead") }}</div>
|
|
|
- <div v-else class="operText">{{ $t("device.openDevice") }}</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 关闭炉头/设备 -->
|
|
|
- <div v-if="controlList.includes('C4')" class="operItem" @click="openOffFurnace(0)">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/onOff.png" />
|
|
|
+ <div v-if="controlList.includes('C4')" class="operation-item" @click="openOffFurnace(0)">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/onOff.png" alt="onOff" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">
|
|
|
+ {{ device.machineType === '0' || !device.machineType ?
|
|
|
+ $t("device.closeFurnHead") : $t("device.closeDevice") }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <div v-if="device.machineType === '0' || device.machineType === null" class="operText">{{
|
|
|
- $t("device.closeFurnHead") }}</div>
|
|
|
- <div v-else class="operText">{{ $t("device.closeDevice") }}</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 雪糕机制冷模式 -->
|
|
|
- <div v-if="device.machineType == '2' && controlList.includes('C24')" class="operItem"
|
|
|
+ <div v-if="device.machineType == '2' && controlList.includes('C24')" class="operation-item"
|
|
|
@click="updateWorkingMode(0)">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/refrigeration.png" />
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/refrigeration.png" alt="refrigeration" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.refrigeration") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.refrigeration") }}</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 雪糕机搅拌模式 -->
|
|
|
- <div v-if="device.machineType == '2' && controlList.includes('C25')" class="operItem"
|
|
|
+ <div v-if="device.machineType == '2' && controlList.includes('C25')" class="operation-item"
|
|
|
@click="updateWorkingMode(1)">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/stir.png" />
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/stir.png" alt="stir" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <div class="operation-text">{{ $t("device.stir") }}</div>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.stir") }}</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 雪糕机保鲜模式 -->
|
|
|
- <div v-if="device.machineType == '2' && controlList.includes('C26')" class="operItem"
|
|
|
+ <div v-if="device.machineType == '2' && controlList.includes('C26')" class="operation-item"
|
|
|
@click="updateWorkingMode(2)">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/keepFresh.png" />
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/keepFresh.png" alt="keepFresh" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.keepFresh") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.keepFresh") }}</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 雪糕机解冻模式 -->
|
|
|
- <div v-if="device.machineType == '2' && controlList.includes('C27')" class="operItem"
|
|
|
+ <div v-if="device.machineType == '2' && controlList.includes('C27')" class="operation-item"
|
|
|
@click="updateWorkingMode(3)">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/thaw.png" />
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/thaw.png" alt="thaw" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.thaw") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.thaw") }}</div>
|
|
|
</div>
|
|
|
- <!-- <div class="operItem" @click="openDoorFun()">
|
|
|
- <div class="operIcon">
|
|
|
- <img
|
|
|
- class="operImg"
|
|
|
- src="../../assets/device/operIcon/openDoor.png"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="operText">{{ $t("device.remoteDoorOpening") }}</div>
|
|
|
- </div> -->
|
|
|
+
|
|
|
<!-- 远程开门 -->
|
|
|
- <div v-if="controlList.includes('C5')" class="operItem" @click="openDoorFun()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/openDoor.png" />
|
|
|
+ <div v-if="controlList.includes('C5')" class="operation-item" @click="openDoorFun()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/openDoor.png" alt="openDoor" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.remoteDoorOpening") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.remoteDoorOpening") }}</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 远程做糖 -->
|
|
|
- <div v-if="controlList.includes('C6')" class="operItem" @click="doSugar()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/doSugar.png" />
|
|
|
+ <div v-if="controlList.includes('C6')" class="operation-item" @click="doSugar()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/doSugar.png" alt="doSugar" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.remoteProduction") }}</span>
|
|
|
</div>
|
|
|
- <div v-if="device.machineType === '0' || device.machineType === null" class="operText">{{
|
|
|
- $t("device.remoteSugarMaking") }}</div>
|
|
|
- <div v-else class="operText">{{ $t("device.remoteProduction") }}</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 定时开关 -->
|
|
|
- <div v-if="controlList.includes('C7') && device.equimentType != 'SI320'" class="operItem" @click="alarmClock()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/alarmClock.png" />
|
|
|
+ <div v-if="controlList.includes('C7') && device.equimentType != 'SI320'" class="operation-item"
|
|
|
+ @click="alarmClock()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/alarmClock.png" alt="alarmClock" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.timeSwitch") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.timeSwitch") }}</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 音量调节 -->
|
|
|
- <div v-if="controlList.includes('C8')" class="operItem" @click="modulation()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/modulation.png" />
|
|
|
+ <div v-if="controlList.includes('C8')" class="operation-item" @click="modulation()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/modulation.png" alt="modulation" />
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.modulation") }}</div>
|
|
|
- </div>
|
|
|
- <!-- <div v-if="user.ifForeign == '0'" class="operItem" @click="recharge()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/recharge.png" />
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.modulation") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.equipmentRecharge") }}</div>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 参数调整 -->
|
|
|
<div v-if="device.equimentType != 'SI320' && device.machineType != '2' && controlList.includes('C9')"
|
|
|
- class="operItem" @click="paramSetPush()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/paramsSet.png" />
|
|
|
+ class="operation-item" @click="paramSetPush()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/paramsSet.png" alt="paramsSet" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.parameterSetting") }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 设置分销 -->
|
|
|
+ <div v-if="user.ifForeign == '0' && controlList.includes('C10')" class="operation-item"
|
|
|
+ @click="saveProportionPush()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/saveProportion.png" alt="saveProportion" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.addDistributor") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.parameterSetting") }}</div>
|
|
|
</div>
|
|
|
- <div v-if="user.ifForeign == '0' && controlList.includes('C10')" class="operItem" @click="saveProportionPush()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/saveProportion.png" />
|
|
|
+ <!-- 系统脱机 -->
|
|
|
+ <div v-if="controlList.includes('C19')" class="operation-item" @click="tuojiEquipmentFun()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/tuoji.png" alt="tuoji" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.sysOffline") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.addDistributor") }}</div>
|
|
|
</div>
|
|
|
- <div v-if="controlList.includes('C19')" class="operItem" @click="tuojiEquipmentFun()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/tuoji.png" />
|
|
|
+ <!-- 修改价格 -->
|
|
|
+ <div v-if="controlList.includes('C11')" class="operation-item" @click="modifyPriceClk()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/editPrice.png" alt="editPrice" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.modifyPrice") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.sysOffline") }}</div>
|
|
|
</div>
|
|
|
- <div v-if="controlList.includes('C11')" class="operItem" @click="modifyPriceClk()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/editPrice.png" />
|
|
|
+ <!-- 支付方式 -->
|
|
|
+ <div v-if="controlList.includes('C28') && device.machineType == '0' && user.ifForeign == '1'"
|
|
|
+ class="operation-item" @click="paymentClk()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/payment.png" alt="payment" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("remote.C28") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.modifyPrice") }}</div>
|
|
|
</div>
|
|
|
<!-- 物料监控 -->
|
|
|
- <div v-if="device.equimentType != 'SI320' && controlList.includes('C12')" class="operItem"
|
|
|
+ <div v-if="device.equimentType != 'SI320' && controlList.includes('C12')" class="operation-item"
|
|
|
@click="materialMonitorClk()">
|
|
|
- <div class="operIcon">
|
|
|
- <img v-if="materialIcon === '0'" class="operImg" src="../../assets/device/operIcon/materialMonitor.png" />
|
|
|
- <img v-else class="operImg" src="../../assets/device/operIcon/materialMonitorOff.png" />
|
|
|
- <!-- <img class="operImg" src="../../assets/device/operIcon/materialMonitor.png" /> -->
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" v-if="materialIcon === '0'" src="../../assets/device/operIcon/materialMonitor.png"
|
|
|
+ alt="materialMonitor" />
|
|
|
+ <img class="operation-icon" v-else src="../../assets/device/operIcon/materialMonitorOff.png"
|
|
|
+ alt="materialMonitorOff" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ materialTitle }}</span>
|
|
|
</div>
|
|
|
- <!-- <div class="operText">{{ $t("device.materialMonitor") }}</div> -->
|
|
|
- <div class="operText">{{ materialTitle }}</div>
|
|
|
</div>
|
|
|
<!-- 屏蔽/展示商品 -->
|
|
|
- <div v-if="device.equimentType != 'SI320' && controlList.includes('C13')" class="operItem"
|
|
|
+ <div v-if="device.equimentType != 'SI320' && controlList.includes('C13')" class="operation-item"
|
|
|
@click="showGoodsClk()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/showGoods.png" />
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/showGoods.png" alt="showGoods" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.showGoods") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.showGoods") }}</div>
|
|
|
</div>
|
|
|
<!-- DIY花型 -->
|
|
|
<div v-if="(device.equimentType == 'MG320' || device.equimentType == 'MG330') && controlList.includes('C15')"
|
|
|
- class="operItem" @click="diyFlowerClk()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/diyFlower.png" />
|
|
|
+ class="operation-item" @click="diyFlowerClk()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/diyFlower.png" alt="diyFlower" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.diyFlower") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.diyFlower") }}</div>
|
|
|
</div>
|
|
|
<!-- 修改机器密码 -->
|
|
|
- <div v-if="controlList.includes('C14')" class="operItem" @click="changePasswordClk()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/password.png" />
|
|
|
+ <div v-if="controlList.includes('C14')" class="operation-item" @click="changePasswordClk()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/password.png" alt="password" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.changePassword") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.changePassword") }}</div>
|
|
|
</div>
|
|
|
<!-- 删除设备 -->
|
|
|
- <div v-if="controlList.includes('C21')" class="operItem" @click="deleteDevice()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/deletedevice.png" />
|
|
|
+ <div v-if="controlList.includes('C21')" class="operation-item" @click="deleteDevice()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/deletedevice.png" alt="deletedevice" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.deleteDevice") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.deleteDevice") }}</div>
|
|
|
</div>
|
|
|
<!-- 日志功能 -->
|
|
|
- <div v-if="controlList.includes('C20')" class="operItem" @click="viewLogs()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/viewLogs.png" />
|
|
|
+ <div v-if="controlList.includes('C20')" class="operation-item" @click="viewLogs()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/viewLogs.png" alt="viewLogs">
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.viewLogs") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.viewLogs") }}</div>
|
|
|
</div>
|
|
|
<!-- 定制logo -->
|
|
|
- <div v-if="controlList.includes('C22')" class="operItem" @click="customLogo()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/customLogo.png" />
|
|
|
+ <div v-if="controlList.includes('C22')" class="operation-item" @click="customLogo()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/customLogo.png" alt="customLogo">
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.customLogo.customLogo") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.customLogo.customLogo") }}</div>
|
|
|
</div>
|
|
|
<!-- 远程重启触摸屏 -->
|
|
|
- <div v-if="controlList.includes('C16')" class="operItem" @click="restartAndroid()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/restartAndroid.png" />
|
|
|
+ <div v-if="controlList.includes('C16')" class="operation-item" @click="restartAndroid()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/restartAndroid.png" alt="restartAndroid" />
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.restartAndroid") }}</div>
|
|
|
- </div>
|
|
|
- <!-- 查看定位 -->
|
|
|
- <!-- <div class="operItem" @click="viewPosiClk()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/location.png" />
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.restartAndroid") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.viewPositioning") }}</div>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
<!-- 设备清洗提醒 -->
|
|
|
- <div class="operItem"
|
|
|
+ <div class="operation-item"
|
|
|
v-if="(device.machineType === '0' || device.machineType === null) && controlList.includes('C17')"
|
|
|
- @click="alramCleanClk()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/alarmClean.png" />
|
|
|
+ @click="alarmCleanClk()">
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/alarmClean.png" alt="alarmClean" />
|
|
|
+ </div>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.alarmClean") }}</span>
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.alramClean") }}</div>
|
|
|
</div>
|
|
|
<!-- 远程退币 -->
|
|
|
- <div class="operItem"
|
|
|
+ <div class="operation-item"
|
|
|
v-if="(device.machineType === '0' || device.machineType === null) && (user.ifForeign == 1 || user.type == 0) && controlList.includes('C18')"
|
|
|
@click="returnCoinClk()">
|
|
|
- <div class="operIcon">
|
|
|
- <img class="operImg" src="../../assets/device/operIcon/coin.png" />
|
|
|
+ <div class="icon-wrapper">
|
|
|
+ <img class="operation-icon" src="../../assets/device/operIcon/coin.png" alt="coin" />
|
|
|
</div>
|
|
|
- <div class="operText">{{ $t("device.returnCoin") }}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </van-dialog>
|
|
|
- <van-dialog v-model:show="operCheckShow" :title="$t('device.operationConfirmation')" :showConfirmButton="false"
|
|
|
- :showCancelButton="false">
|
|
|
- <div class="operCheckBox">
|
|
|
- <div class="block5 flex-col"></div>
|
|
|
- <span class="word10">{{
|
|
|
- $t("device.pleaseConfirmAgainWhetherToOperate")
|
|
|
- }}</span>
|
|
|
- <div class="block6 flex-row justify-between">
|
|
|
- <div class="mod7 flex-col" @click="operCheckClear()">
|
|
|
- <span class="info5">{{ $t("device.IllThinkAboutItAgain") }}</span>
|
|
|
- </div>
|
|
|
- <div class="mod8 flex-col" @click="operCheck()">
|
|
|
- <span class="info6">{{ $t("device.confirm") }}</span>
|
|
|
+ <div class="text-wrapper">
|
|
|
+ <span class="operation-text">{{ $t("device.returnCoin") }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-dialog>
|
|
|
+ <van-dialog close-on-click-overlay v-model:show="operCheckShow" :title="$t('device.operationConfirmation')"
|
|
|
+ :message="$t('device.pleaseConfirmAgainWhetherToOperate')" show-cancel-button @confirm="operCheck()">
|
|
|
+ </van-dialog>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
-import { onMounted, ref } from "vue";
|
|
|
+import { onMounted, ref, onBeforeUnmount } from "vue";
|
|
|
import {
|
|
|
setFurnace,
|
|
|
sleepEquipment,
|
|
@@ -277,11 +330,18 @@ import {
|
|
|
import { showFailToast, showSuccessToast } from "vant";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
-import { getLoginUser, styleUrl } from "@/common/js/utils";
|
|
|
+import { getLoginUser } from "@/common/js/utils";
|
|
|
|
|
|
export default {
|
|
|
emits: ['operfinish'],
|
|
|
+ components: {
|
|
|
+ },
|
|
|
setup(props, { emit }) {
|
|
|
+ const isMobile = ref(false);
|
|
|
+ // 检测屏幕尺寸
|
|
|
+ const checkMobile = () => {
|
|
|
+ isMobile.value = window.innerWidth < 768
|
|
|
+ }
|
|
|
// 点击修改价格
|
|
|
const modifyPriceClk = () => {
|
|
|
router.push({
|
|
@@ -289,6 +349,13 @@ export default {
|
|
|
query: { deviceId: device.value.id, name: device.value.name },
|
|
|
});
|
|
|
};
|
|
|
+ // 点击支付方式
|
|
|
+ const paymentClk = () => {
|
|
|
+ router.push({
|
|
|
+ path: "payment",
|
|
|
+ query: { deviceId: device.value.id, name: device.value.name, payment: device.value.paymentType },
|
|
|
+ });
|
|
|
+ };
|
|
|
// 点击屏蔽/展示商品
|
|
|
const showGoodsClk = () => {
|
|
|
router.push({
|
|
@@ -340,9 +407,12 @@ export default {
|
|
|
const controlList = ref([]);
|
|
|
// 初始化页面获取列表
|
|
|
onMounted(async () => {
|
|
|
- // 加载样式
|
|
|
- styleUrl('deviceOper');
|
|
|
+ checkMobile()
|
|
|
+ window.addEventListener('resize', checkMobile)
|
|
|
});
|
|
|
+ onBeforeUnmount(() => {
|
|
|
+ window.removeEventListener('resize', checkMobile)
|
|
|
+ })
|
|
|
// 当前弹窗父组件触发
|
|
|
const showOper = (e, value) => {
|
|
|
controlList.value = value;
|
|
@@ -500,14 +570,9 @@ export default {
|
|
|
}
|
|
|
// 睡眠
|
|
|
if (operType.value === 2) {
|
|
|
- let eqeStatus = 1;
|
|
|
- // isSleep=true,机器属于休眠状态,按钮是关闭休眠
|
|
|
- if (device.value.isSleep) {
|
|
|
- eqeStatus = 0;
|
|
|
- }
|
|
|
const { data } = await sleepEquipment({
|
|
|
equipmentId: device.value.id,
|
|
|
- eqeStatus,
|
|
|
+ eqeStatus: device.value.isSleep ? '0' : '1',
|
|
|
});
|
|
|
if (data.code) {
|
|
|
showSuccessToast(t("device.sleepSuccessfully"));
|
|
@@ -655,7 +720,6 @@ export default {
|
|
|
viewLogs,
|
|
|
deleteDevice,
|
|
|
restartAndroid,
|
|
|
- // viewPosiClk,
|
|
|
changePasswordClk,
|
|
|
sleepIcon,
|
|
|
materialIcon,
|
|
@@ -664,11 +728,193 @@ export default {
|
|
|
alarmCleanClk,
|
|
|
returnCoinClk,
|
|
|
controlList,
|
|
|
+ isMobile,
|
|
|
+ paymentClk,
|
|
|
};
|
|
|
- },
|
|
|
- components: {},
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@import "../../common/style/common";
|
|
|
+.operation-dialog {
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .dialog-header {
|
|
|
+ padding: 16px 24px;
|
|
|
+ background: #f8f9fa;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .dialog-title {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #1a1a1a;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ font-size: 20px;
|
|
|
+ color: #666;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ transition: background 0.2s;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #e8e8e8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-info {
|
|
|
+ padding: 12px 24px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 8px 0;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ .info-label {
|
|
|
+ color: #666;
|
|
|
+ margin-right: 8px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value {
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ .text-ellipsis();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ padding: 10px;
|
|
|
+ max-height: 60vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+
|
|
|
+ @media (max-width: 480px) {
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ /* 移动端2列 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .icon-wrapper {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation-icon {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 36px;
|
|
|
+ /* 固定文字容器高度 */
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation-text {
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 1.4;
|
|
|
+ color: #333;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ /* 最多显示两行 */
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ padding: 0 4px;
|
|
|
+ max-width: 100%;
|
|
|
+
|
|
|
+ /* 备用方案 */
|
|
|
+ @supports not (-webkit-line-clamp: 2) {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 悬浮提示 */
|
|
|
+ &:hover .text-tooltip {
|
|
|
+ visibility: visible;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-tooltip {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 100%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ color: white;
|
|
|
+ padding: 6px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ white-space: nowrap;
|
|
|
+ visibility: hidden;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.2s;
|
|
|
+ z-index: 100;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 100%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -4px;
|
|
|
+ border-width: 4px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: rgba(0, 0, 0, 0.8) transparent transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 文字截断混入
|
|
|
+.text-ellipsis() {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+/* 移动端适配 */
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .operation-item {
|
|
|
+ .text-wrapper {
|
|
|
+ min-height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .operation-text {
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|