shenze-sysMan/src/views/device/deviceOper.vue

<template>
  <!-- 操作弹窗 -->
  <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="info-item">
        <span class="info-label">{{ $t("device.equipmentNo") }}:</span>
        <span class="info-value">{{ device.clientId.slice(-6) }}</span>
      </div>
    </div>

    <!-- 操作列表 -->
    <div class="operation-grid">
      <!-- 重启炉头 -->
      <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>

      <!-- 睡眠控制 -->
      <div
        v-if="controlList.includes('C2')"
        class="operation-item"
        @click="sleepEquipmentFun()"
      >
        <div class="icon-wrapper">
          <img
            class="operation-icon"
            v-if="sleepIcon === '0'"
            src="../../assets/device/operIcon/awake.png"
            alt="sleep"
          />
          <img
            class="operation-icon"
            v-else
            src="../../assets/device/operIcon/offSleep.png"
            alt="sleep"
          />
        </div>
        <div class="text-wrapper">
          <span class="operation-text">{{ sleepTitle }}</span>
        </div>
      </div>

      <!-- 开启炉头/设备 -->
      <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>

      <!-- 关闭炉头/设备 -->
      <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>

      <!-- 雪糕机制冷模式 -->
      <div
        v-if="device.machineType == '2' && controlList.includes('C24')"
        class="operation-item"
        @click="updateWorkingMode(0)"
      >
        <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>

      <!-- 雪糕机搅拌模式 -->
      <div
        v-if="device.machineType == '2' && controlList.includes('C25')"
        class="operation-item"
        @click="updateWorkingMode(1)"
      >
        <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>

      <!-- 雪糕机保鲜模式 -->
      <div
        v-if="device.machineType == '2' && controlList.includes('C26')"
        class="operation-item"
        @click="updateWorkingMode(2)"
      >
        <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>

      <!-- 雪糕机解冻模式 -->
      <div
        v-if="device.machineType == '2' && controlList.includes('C27')"
        class="operation-item"
        @click="updateWorkingMode(3)"
      >
        <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>

      <!-- 远程开门 -->
      <div
        v-if="controlList.includes('C5')"
        class="operation-item"
        @click="openDoorFun()"
      >
        <div class="icon-wrapper">
          <img
            class="operation-icon"
            src="../../assets/device/operIcon/openControl.png"
            alt="openControl"
          />
        </div>
        <div class="text-wrapper">
          <span class="operation-text">{{
            $t("device.remoteDoorOpening")
          }}</span>
        </div>
      </div>

      <!-- 远程做糖 -->
      <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>

      <!-- 定时开关 -->
      <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>

      <!-- 音量调节 -->
      <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="text-wrapper">
          <span class="operation-text">{{ $t("device.modulation") }}</span>
        </div>
      </div>

      <!-- 参数调整 -->
      <div
        v-if="
          device.equimentType != 'SI320' &&
          device.machineType != '2' &&
          controlList.includes('C9')
        "
        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>
      <!-- 系统脱机 -->
      <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>
      <!-- 修改价格 -->
      <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>
      <!-- 支付方式 -->
      <div
        v-if="
          controlList.includes('C28') &&
          device.machineType == '0' &&
          (user.ifForeign == '1' || user.type == 0)
        "
        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>
      <!-- 物料监控 -->
      <div
        v-if="device.equimentType != 'SI320' && controlList.includes('C12')"
        class="operation-item"
        @click="materialMonitorClk()"
      >
        <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>
      <!-- 屏蔽/展示商品 -->
      <div
        v-if="controlList.includes('C13')"
        class="operation-item"
        @click="showGoodsClk()"
      >
        <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>
      <!-- DIY花型 -->
      <div
        v-if="
          (device.equimentType == 'MG320' || device.equimentType == 'MG330') &&
          controlList.includes('C15')
        "
        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>
      <!-- 修改机器密码 -->
      <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>
      <!-- 删除设备 -->
      <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>
      <!-- 日志功能 -->
      <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>
      <!-- 定制logo -->
      <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>
      <!-- 远程锁机 -->
      <div
        v-if="controlList.includes('C23')"
        class="operation-item"
        @click="lockDevice()"
      >
        <div class="icon-wrapper">
          <img
            class="operation-icon"
            src="../../assets/device/operIcon/lock.png"
            alt="lock"
          />
        </div>
        <div class="text-wrapper">
          <span class="operation-text">{{ $t("device.lockDevice") }}</span>
        </div>
      </div>
      <!-- 远程重启触摸屏 -->
      <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="text-wrapper">
          <span class="operation-text">{{ $t("device.restartAndroid") }}</span>
        </div>
      </div>
      <!-- 设备清洗提醒 -->
      <div
        class="operation-item"
        v-if="
          (device.machineType === '0' || device.machineType === null) &&
          controlList.includes('C17')
        "
        @click="alramCleanClk()"
      >
        <div class="icon-wrapper">
          <img
            class="operation-icon"
            src="../../assets/device/operIcon/alramClean.png"
            alt="alramClean"
          />
        </div>
        <div class="text-wrapper">
          <span class="operation-text">{{ $t("device.alramClean") }}</span>
        </div>
      </div>
      <!-- 远程退币 -->
      <div
        class="operation-item"
        v-if="
          (device.machineType === '0' ||
            device.machineType === null ||
            device.equimentType === 'P30') &&
          (user.type < 2 || user.ifForeign === '1') &&
          controlList.includes('C18')
        "
        @click="returnCoinClk()"
      >
        <div class="icon-wrapper">
          <img
            class="operation-icon"
            src="../../assets/device/operIcon/coin.png"
            alt="coin"
          />
        </div>
        <div class="text-wrapper">
          <span class="operation-text">{{ $t("device.returnCoin") }}</span>
        </div>
      </div>
      <!-- 税费管理 -->
      <div
        v-if="
          (device.machineType === '0' || device.machineType === null) &&
          (user.type == 0 || user.ifForeign === '1') &&
          controlList.includes('C29')
        "
        class="operation-item"
        @click="taxClk()"
      >
        <div class="icon-wrapper">
          <img
            class="operation-icon"
            src="../../assets/device/operIcon/tax.png"
            alt="tax"
          />
        </div>
        <div class="text-wrapper">
          <span class="operation-text">{{ $t("remote.C29") }}</span>
        </div>
      </div>
      <!-- 果酱抽取 -->
      <div
        v-if="device.machineType === '2' && controlList.includes('C30')"
        class="operation-item"
        @click="jamClk()"
      >
        <div class="icon-wrapper">
          <img
            class="operation-icon"
            src="../../assets/device/operIcon/jam.png"
            alt="jam"
          />
        </div>
        <div class="text-wrapper">
          <span class="operation-text">{{ $t("remote.C30") }}</span>
        </div>
      </div>
      <!-- 维护记录 -->
      <div
        v-if="
          (device.machineType === '0' || device.machineType === '1') &&
          controlList.includes('C31')
        "
        class="operation-item"
        @click="maintenanceClk()"
      >
        <div class="icon-wrapper">
          <img
            class="operation-icon"
            src="../../assets/device/operIcon/maintenance.png"
            alt="maintenance"
          />
        </div>
        <div class="text-wrapper">
          <span class="operation-text">{{ $t("remote.C31") }}</span>
        </div>
      </div>
      <!-- 支付配置 -->
      <div
        v-if="
          device.machineType === '0' &&
          (user.type == 0 || user.ifForeign === '1') &&
          controlList.includes('C32')
        "
        class="operation-item"
        @click="payInfoClk()"
      >
        <div class="icon-wrapper">
          <img
            class="operation-icon"
            src="../../assets/device/operIcon/payInfo.png"
            alt="payInfo"
          />
        </div>
        <div class="text-wrapper">
          <span class="operation-text">{{ $t("remote.C32") }}</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, onBeforeUnmount } from "vue";
import {
  setFurnace,
  sleepEquipment,
  // openDoor,
  Api_openDoor,
  deviceTuoji,
  delOneDevice,
  enableMaterial,
  updateLockStatus,
  restartScreen,
  machineReset,
  changeWorkingMode,
} from "../../service/device";
import { showFailToast, showSuccessToast } from "vant";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
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({
        path: "modifyPrice",
        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({
        path: "showGoods",
        query: {
          deviceId: device.value.id,
          name: device.value.name,
          machineType: device.value.machineType,
        },
      });
    };

    // 点击DIY花型
    const diyFlowerClk = () => {
      router.push({
        path: "diyFlower",
        query: {
          deviceId: device.value.id,
          name: device.value.name,
          diyFlowerStatus: device.value.diyFlowerStatus,
          flower: device.value.flowers,
          clientId: device.value.clientId,
        },
      });
    };

    // 点击设备清洗提醒
    const alramCleanClk = () => {
      router.push({
        path: "alramClean",
        query: {
          deviceId: device.value.id,
          name: device.value.name,
          clientId: device.value.clientId,
          cleanFunction: device.value.cleanFunction,
        },
      });
    };

    // 点击远程退币
    const returnCoinClk = () => {
      router.push({
        path: "returnCoin",
        query: {
          deviceId: device.value.id,
          name: device.value.name,
          clientId: device.value.clientId,
        },
      });
    };

    // 点击税收管理
    const taxClk = () => {
      router.push({
        path: "tax",
        query: {
          deviceId: device.value.id,
          name: device.value.name,
          clientId: device.value.clientId,
        },
      });
    };
    // 果酱抽取
    const jamClk = () => {
      router.push({
        path: "jam",
        query: {
          deviceId: device.value.id,
          name: device.value.name,
          clientId: device.value.clientId,
        },
      });
    };
    // 维护记录
    const maintenanceClk = () => {
      router.push({
        path: "maintenance",
        query: {
          deviceId: device.value.id,
          name: device.value.name,
          clientId: device.value.clientId,
        },
      });
    };
    // 点击支付配置
    const payInfoClk = () => {
      router.push({
        path: "payInfo",
        query: {
          deviceId: device.value.id,
          name: device.value.name,
          clientId: device.value.clientId,
        },
      });
    };
    const { t } = useI18n();
    const user = getLoginUser();
    const router = useRouter();
    const show = ref(false);
    const operCheckShow = ref(false);
    const device = ref({});
    const operType = ref("");
    // 睡眠按钮文字
    const sleepTitle = ref(t("device.turnOnSleep"));
    // 物料监控按钮文字
    const materialTitle = ref(t("device.materialMonitorOn"));
    // 睡眠图标
    const sleepIcon = ref("0");
    // 物料监控图标
    const materialIcon = ref("0");
    // 工作模式
    const workMode = ref(null);
    // 操作权限
    const controlList = ref([]);

    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      // styleUrl('deviceOper');
      checkMobile();
      window.addEventListener("resize", checkMobile);
    });

    onBeforeUnmount(() => {
      window.removeEventListener("resize", checkMobile);
    });
    // 当前弹窗父组件触发
    const showOper = (e, value) => {
      controlList.value = value;
      device.value = e;
      show.value = true;
      // isSleep=true，机器处于睡眠状态，按钮是关闭睡眠
      if (device.value.isSleep) {
        sleepTitle.value = t("device.turnOffSleep");
        sleepIcon.value = "1";
      } else {
        sleepTitle.value = t("device.turnOnSleep");
        sleepIcon.value = "0";
      }
      // 物料监控
      // isMaterialUse = "1"时，物料监控已开启
      if (device.value.isMaterialUse === "1") {
        materialTitle.value = t("device.materialMonitorOn");
        materialIcon.value = "0";
      } else {
        materialTitle.value = t("device.materialMonitorOff");
        materialIcon.value = "1";
      }
    };
    const closeOper = () => {
      show.value = false;
    };
    // 重启炉头
    const restartFurnace = () => {
      operType.value = 1;
      operCheckShow.value = true;
    };
    // 睡眠
    const sleepEquipmentFun = () => {
      operType.value = 2;
      operCheckShow.value = true;
    };
    // 点击的是开启炉头还是关闭 1开启 0关闭
    const clkOpenOrClose = ref(1);
    // 开启关闭炉头
    const openOffFurnace = (idx) => {
      clkOpenOrClose.value = idx;
      operType.value = 3;
      operCheckShow.value = true;
    };
    // 远程开门
    /*    const openDoorFun = () => {
          operType.value = 4;
          operCheckShow.value = true;
        }; */
    const openDoorFun = () => {
      if (device.value.machineType === "2") {
        operType.value = 4;
        operCheckShow.value = true;
      } else {
        // router.push({ path: "openDoor", query: { deviceId: device.value.id } });
        router.push({
          path: "openDoor",
          query: {
            deviceId: device.value.id,
            machineType: device.value.machineType,
          },
        });
      }
    };
    // 日志功能
    const viewLogs = () => {
      router.push({
        path: "viewLogs",
        query: { deviceId: device.value.id, name: device.value.name },
      });
    };
    // 定制logo
    const customLogo = () => {
      router.push({ path: "customLogo", query: { deviceId: device.value.id } });
    };
    // 音量调节
    const modulation = () => {
      router.push({
        path: "modulation",
        query: { deviceId: device.value.id, name: device.value.name },
      });
    };
    // 远程做糖
    const doSugar = () => {
      router.push({
        path: "doSugar",
        query: {
          deviceId: device.value.id,
          machineType: device.value.machineType,
        },
      });
    };
    // 定时开关
    const alarmClock = () => {
      router.push({ path: "alarmClock", query: { deviceId: device.value.id } });
    };
    // 跳转 - 设备充值
    const recharge = () => {
      router.push({ path: "recharge", query: { deviceId: device.value.id } });
    };
    // 跳转 - 参数设置
    const paramSetPush = () => {
      router.push({
        path: "paramsSet",
        query: {
          deviceId: device.value.id,
          machineType: device.value.machineType,
          name: device.value.name,
        },
      });
    };

    // 跳转 - 添加分销人
    const saveProportionPush = () => {
      router.push({
        path: "distributionDetail",
        query: { deviceId: device.value.id, clientId: device.value.clientId },
      });
    };
    // 系统脱机
    const tuojiEquipmentFun = () => {
      operType.value = 5;
      operCheckShow.value = true;
    };
    // 修改机器密码
    const changePasswordClk = () => {
      router.push({
        path: "devicePassword",
        query: { deviceId: device.value.id, name: device.value.name },
      });
    };
    // 删除设备
    const deleteDevice = () => {
      operType.value = 6;
      operCheckShow.value = true;
    };
    // 物料监控
    const materialMonitorClk = () => {
      operType.value = 7;
      operCheckShow.value = true;
    };
    // 远程锁机
    const lockDevice = () => {
      operType.value = 8;
      operCheckShow.value = true;
    };
    // 重启触摸屏
    const restartAndroid = () => {
      operType.value = 9;
      operCheckShow.value = true;
    };
    // 切换工作模式
    const updateWorkingMode = (value) => {
      workMode.value = value;
      operType.value = 10;
      operCheckShow.value = true;
    };
    // 取消操作
    const operCheckClear = () => {
      operCheckShow.value = false;
    };
    // 功能操作 - 确认操作
    const operCheck = async () => {
      // 重启
      if (operType.value === 1) {
        if (device.value.machineType === "2") {
          const { data } = await machineReset({
            equipmentId: device.value.id,
          });
          if (data.code) {
            showSuccessToast(t("device.enableMaterialSucceed"));
            operCheckShow.value = false;
          } else {
            showFailToast(data.message);
          }
        } else {
          const { data } = await setFurnace({
            equipmentId: device.value.id,
            eqeStatus: 1,
          });
          if (data.code) {
            showSuccessToast(t("device.restartSucceeded"));
            operCheckShow.value = false;
          } else {
            showFailToast(data.message);
          }
        }
      }
      // 睡眠
      if (operType.value === 2) {
        const { data } = await sleepEquipment({
          equipmentId: device.value.id,
          eqeStatus: device.value.isSleep ? "0" : "1",
        });
        if (data.code) {
          showSuccessToast(t("device.sleepSuccessfully"));
          operCheckShow.value = false;
        } else {
          showFailToast(data.message);
        }
      }
      // 开机|关机
      if (operType.value === 3) {
        device.value.eqeStatus = clkOpenOrClose.value;
        const { data } = await setFurnace({
          equipmentId: device.value.id,
          eqeStatus: device.value.eqeStatus,
        });
        if (data.code) {
          showSuccessToast(
            `${
              device.value.eqeStatus === 0
                ? t("device.close")
                : t("device.open")
            }${t("device.success")}`
          );
          device.value.eqeStatus = device.value.eqeStatus === 0 ? 1 : 0;
          operCheckShow.value = false;
        } else {
          showFailToast(data.message);
        }
      }
      // 远程开门
      if (operType.value === 4) {
        const { data } = await Api_openDoor({
          equipmentId: device.value.id,
          type: 0,
          status: 1,
        });
        if (data.code) {
          showSuccessToast(t("device.remoteDoorOpeningSucceeded"));
          operCheckShow.value = false;
        } else {
          showFailToast(data.message);
        }
      }
      // 系统脱机
      if (operType.value === 5) {
        const { data } = await deviceTuoji({
          id: device.value.id,
          clientId: device.value.clientId,
          adminUserName: user.username,
        });
        if (data.code) {
          showSuccessToast(t("device.sysOffSuccess"));
          operCheckShow.value = false;
        } else {
          showFailToast(data.message);
        }
      }
      // 删除设备
      if (operType.value === 6) {
        const { data } = await delOneDevice({
          equipmentId: device.value.id,
          adminId: user.id,
        });
        if (data.code) {
          showSuccessToast(t("device.deleteDeviceSucceed"));
          operCheckShow.value = false;
        } else {
          showFailToast(t("device.deleteDeviceFailed"));
        }
      }
      // 启用物料监控
      if (operType.value === 7) {
        let materialMonitorStatus = 0; // 0默认是未开启
        // isMaterialUse是1时，物料监控已启用，按钮是关闭功能
        if (device.value.isMaterialUse === "1") {
          materialMonitorStatus = 1; // 1代表已开启
        }
        const { data } = await enableMaterial({
          equipmentId: device.value.id,
          materialMonitorStatus,
        });
        if (data.code === "00000") {
          showSuccessToast(t("device.enableMaterialSucceed"));
          operCheckShow.value = false;
        } else {
          showFailToast(t("device.enableMaterialFailed"));
        }
      }
      // 远程锁机
      if (operType.value === 8) {
        const { data } = await updateLockStatus({
          equipmentId: device.value.id,
          status: device.value.isBlocked ? "0" : "1",
        });
        if (data.code === "00000") {
          showSuccessToast(t("device.Succeed"));
          operCheckShow.value = false;
        } else {
          showFailToast(t("device.Failed"));
        }
      }
      // 重启触摸屏
      if (operType.value === 9) {
        const { data } = await restartScreen({
          equipmentId: device.value.id,
        });
        if (data.code === "00000") {
          showSuccessToast(t("device.Succeed"));
          operCheckShow.value = false;
        } else {
          showFailToast(t("device.Failed"));
        }
      }
      // 切换工作模式
      if (operType.value === 10) {
        const { data } = await changeWorkingMode({
          equipmentId: device.value.id,
          workingMode: workMode.value,
        });
        if (data.code === "00000") {
          showSuccessToast(t("device.Succeed"));
          operCheckShow.value = false;
        } else {
          showFailToast(t("device.Failed"));
        }
      }
      setTimeout(() => {
        // 关闭弹窗
        show.value = false;
        // 触发操作完成回调
        emit("operfinish", true);
      }, 2000);
    };
    const isRole = (key) => {
      return user.menuCodeList.filter((type) => key === type).length > 0;
    };

    return {
      user,
      device,
      show,
      operCheckShow,
      showOper,
      closeOper,
      restartFurnace,
      operCheckClear,
      operCheck,
      sleepEquipmentFun,
      openOffFurnace,
      openDoorFun,
      modulation,
      customLogo,
      doSugar,
      alarmClock,
      recharge,
      paramSetPush,
      saveProportionPush,
      tuojiEquipmentFun,
      isRole,
      modifyPriceClk,
      showGoodsClk,
      diyFlowerClk,
      sleepTitle,
      materialTitle,
      viewLogs,
      deleteDevice,
      lockDevice,
      restartAndroid,
      alramCleanClk,
      returnCoinClk,
      taxClk,
      jamClk,
      maintenanceClk,
      payInfoClk,

      changePasswordClk,
      sleepIcon,
      materialIcon,
      materialMonitorClk,
      updateWorkingMode,
      controlList,
      isMobile,
      paymentClk,
    };
  },
};
</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>