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

<template>
  <!-- 设备常见操作弹窗 -->
  <van-dialog class-name="operDialog" width="auto" v-model:show="show" :showConfirmButton="false"
    :showCancelButton="false">
    <slot name="title">
      <div class="van-dialog__header">{{ $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 }}
      </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 === '1'" class="operText">{{ $t("device.restart") }}</div>
        <div v-else class="operText">{{ $t("device.restartFurnaceHead") }}</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 === '1'" class="operText">{{ $t("device.openDevice") }}</div>
        <div v-else class="operText">{{ $t("device.openFurnHead") }}</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 === '1'" class="operText">{{ $t("device.closeDevice") }}</div>
        <div v-else class="operText">{{ $t("device.closeFurnHead") }}</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 === '1'" class="operText">{{ $t("device.remoteProduction") }}</div>
        <div v-else class="operText">{{ $t("device.remoteSugarMaking") }}</div>
      </div>
      <div class="operItem" @click="alarmClock()">
        <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()">
        <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()">
        <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()">
        <div class="operIcon">
          <img class="operImg" src="../../assets/device/operIcon/materialMonitor.png" />
        </div>
        <div class="operText">{{ $t("device.materialMonitor") }}</div>
      </div>
      <!-- 屏蔽/展示商品 -->
      <div class="operItem" @click="showGoodsClk()">
        <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="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
} 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"));
    // 初始化页面获取列表
    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");
      }
    };
    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 } });
      }
    };
    // 日志功能
    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 materialMonitorClk = () => {
      operType.value = 7;
      operCheckShow.value = true;
    };
    // 跳转 - 添加分销人
    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 operCheckClear = () => {
      operCheckShow.value = false;
    };
    // 功能操作 - 确认操作
    const operCheck = async () => {
      // 重启
      if (operType.value === 1) {
        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) {
        const { data } = await enableMaterial({
          equipmentId: device.value.id,
        });
        if (data.code === '00000') {
          showSuccessToast(t("device.enableMaterialSucceed"));
          operCheckShow.value = false;
        } else {
          showFailToast(t("device.enableMaterialFailed"));
        }
      }
      // 关闭弹窗
      show.value = false;
      // 触发操作完成回调
      emit("operfinish", true);
    };
    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,
      viewLogs,
      deleteDevice,
      changePasswordClk,
      materialMonitorClk
    };
  },
  components: {},
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
</style>