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

<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") }}
      </div>
      <div class="txt1" style="padding: 0.2em 1em">
        {{ $t("device.equipmentNo") }}: {{ device.clientId.slice(-6) }}
      </div>
    </slot>
    <van-icon name="cross" class="close" @click="show = false" />
    <div class="group4 flex-col"></div>
    <div class="operBox">
      <!-- 重启炉头 -->
      <div class="operItem" @click="restartFurnace()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/restart.png" />
        </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 class="operItem" @click="sleepEquipmentFun()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/sleep.png" />
        </div>
        <div class="operText">{{ sleepTitle }}</div>
      </div>
      <!-- 开启炉头/设备 -->
      <div class="operItem" @click="openOffFurnace(1)">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/onOff.png" />
        </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 class="operItem" @click="openOffFurnace(0)">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/onOff.png" />
        </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'" class="operItem" @click="updateWorkingMode(0)">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/refrigeration.png" />
        </div>
        <div class="operText">{{ $t("device.refrigeration") }}</div>
      </div>
      <!-- 雪糕机搅拌模式 -->
      <div v-if="device.machineType == '2'" class="operItem" @click="updateWorkingMode(1)">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/stir.png" />
        </div>
        <div class="operText">{{ $t("device.stir") }}</div>
      </div>
      <!-- 雪糕机保鲜模式 -->
      <div v-if="device.machineType == '2'" class="operItem" @click="updateWorkingMode(2)">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/keepFresh.png" />
        </div>
        <div class="operText">{{ $t("device.keepFresh") }}</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 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 class="operItem" @click="doSugar()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/doSugar.png" />
        </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 class="operItem" @click="alarmClock()" v-if="device.equimentType != 'SI320'">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/alarmClock.png" />
        </div>
        <div class="operText">{{ $t("device.timeSwitch") }}</div>
      </div>
      <!-- 音量调节 -->
      <div class="operItem" @click="modulation()" v-if="device.equimentType != 'SI320'">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/modulation.png" />
        </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>
        <div class="operText">{{ $t("device.equipmentRecharge") }}</div>
      </div> -->
      <div class="operItem" @click="paramSetPush()" v-if="device.equimentType != 'SI320' && device.machineType === '0'">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/paramsSet.png" />
        </div>
        <div class="operText">{{ $t("device.parameterSetting") }}</div>
      </div>
      <div v-if="user.ifForeign == '0'" class="operItem" @click="saveProportionPush()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/saveProportion.png" />
        </div>
        <div class="operText">{{ $t("device.addDistributor") }}</div>
      </div>
      <div v-if="isRole('M17')" class="operItem" @click="tuojiEquipmentFun()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/tuoji.png" />
        </div>
        <div class="operText">{{ $t("device.sysOffline") }}</div>
      </div>
      <div class="operItem" @click="modifyPriceClk()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/editPrice.png" />
        </div>
        <div class="operText">{{ $t("device.modifyPrice") }}</div>
      </div>
      <!-- 物料监控 -->
      <div class="operItem" @click="materialMonitorClk()" v-if="device.equimentType != 'SI320'">
        <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>
        <!-- <div class="operText">{{ $t("device.materialMonitor") }}</div> -->
        <div class="operText">{{ materialTitle }}</div>
      </div>
      <!-- 屏蔽/展示商品 -->
      <div class="operItem" @click="showGoodsClk()" v-if="device.equimentType != 'SI320'">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/showGoods.png" />
        </div>
        <div class="operText">{{ $t("device.showGoods") }}</div>
      </div>
      <!-- DIY花型 -->
      <!-- v-if="device.equimentType == 'MG320' || device.equimentType == 'MG330'" -->
      <div class="operItem" v-if="user.type < 1" @click="diyFlowerClk()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/diyFlower.png" />
        </div>
        <div class="operText">{{ $t("device.diyFlower") }}</div>
      </div>
      <!-- 修改机器密码 -->
      <div v-if="user.type < 3" class="operItem" @click="changePasswordClk()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/password.png" />
        </div>
        <div class="operText">{{ $t("device.changePassword") }}</div>
      </div>
      <!-- 删除设备 -->
      <div v-if="user.type < 2" class="operItem" @click="deleteDevice()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/deletedevice.png" />
        </div>
        <div class="operText">{{ $t("device.deleteDevice") }}</div>
      </div>
      <!-- 日志功能 -->
      <div v-if="user.type < 2" class="operItem" @click="viewLogs()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/viewLogs.png" />
        </div>
        <div class="operText">{{ $t("device.viewLogs") }}</div>
      </div>
      <!-- 定制logo -->
      <div v-if="user.type < 2" class="operItem" @click="customLogo()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/customLogo.png" />
        </div>
        <div class="operText">{{ $t("device.customLogo.customLogo") }}</div>
      </div>
      <!-- 远程重启触摸屏 -->
      <div class="operItem" @click="restartAndroid()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/restartAndroid.png" />
        </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>
        <div class="operText">{{ $t("device.viewPositioning") }}</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>
      </div>
    </div>
  </van-dialog>
</template>


<script>
import { onMounted, ref } from "vue";
import {
  setFurnace,
  sleepEquipment,
  openDoor,
  deviceTuoji,
  delOneDevice,
  enableMaterial,
  restartScreen,
  machineReset,
  changeWorkingMode,
} from "../../service/device";
import { showFailToast, showSuccessToast } from "vant";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { getLoginUser, styleUrl } from "@/common/js/utils";

export default {
  emits: ['operfinish'],
  setup(props, { emit }) {
    // 点击修改价格
    const modifyPriceClk = () => {
      router.push({
        path: "modifyPrice",
        query: { deviceId: device.value.id, name: device.value.name },
      });
    };
    // 点击屏蔽/展示商品
    const showGoodsClk = () => {
      router.push({
        path: "showGoods",
        query: { deviceId: device.value.id, name: device.value.name },
      });
    };

    // 点击DIY花型
    const diyFlowerClk = () => {
      router.push({
        path: "diyFlower",
        query: { deviceId: device.value.id, name: device.value.name, diyFlowerStatus: device.value.diyFlowerStatus, flower: device.value.flowers },
      });
    };
    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);
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('deviceOper');
    });
    // 当前弹窗父组件触发
    const showOper = (e) => {
      device.value = e;
      show.value = true;
      // isSleep=true，机器属于休眠状态，按钮是关闭休眠
      if (device.value.isSleep) {
        sleepTitle.value = t("device.turnOffSleep");
      } else {
        sleepTitle.value = t("device.turnOnSleep");
      }
      // 物料监控
      // 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 === '1' || device.value.equimentType === 'MG280') {
      //   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 } });
    };
    // 定制logo
    const customLogo = () => {
      router.push({ path: "customLogo", query: { deviceId: device.value.id } });
    }
    // 音量调节
    const modulation = () => {
      router.push({ path: "modulation", query: { deviceId: device.value.id } });
    };
    // 远程做糖
    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 } });
    };
    // 跳转 - 添加分销人
    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 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) {
        let eqeStatus = 1;
        // isSleep=true，机器属于休眠状态，按钮是关闭休眠
        if (device.value.isSleep) {
          eqeStatus = 0;
        }
        const { data } = await sleepEquipment({
          equipmentId: device.value.id,
          eqeStatus,
        });
        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 openDoor({ equipmentId: device.value.id });
        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 === 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,
      restartAndroid,
      // viewPosiClk,
      changePasswordClk,
      sleepIcon,
      materialIcon,
      materialMonitorClk,
      updateWorkingMode,
    };
  },
  components: {},
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
</style>