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

<template>
  <!-- 设备列表 -->
  <div class="device-management">
    <!-- 头部 -->
    <s-header
      :name="sys?.title || $t('device.managementCenter')"
      :noback="true"
      :isFixed="false"
      class="management-header"
    />

    <!-- 主体内容 -->
    <div
      class="device-list-container"
      ref="scrollContainer"
      @scroll="handleScroll"
    >
      <van-list
        v-model:loading="loading"
        v-model:error="error"
        :error-text="$t('public.requestFailed')"
        :finished-text="$t('public.noMore')"
        offset="100"
        :immediate-check="false"
        :finished="finished"
        @load="onLoad"
      >
        <!-- 数据概览 -->
        <div class="data-overview">
          <div class="overview-header">
            <h3 class="section-title">
              <van-icon name="setting" color="#2c87c8" />
              {{ $t("device.dataOverview") }}
            </h3>
            <div class="action-icons">
              <van-popover
                v-model:show="showPopover"
                placement="left-start"
                theme="dark"
                :actions="actions"
                @select="selectLabel"
              >
                <template #reference>
                  <van-icon name="bars" class="icon-filter" />
                </template>
              </van-popover>
              <van-icon
                name="search"
                class="icon-search"
                @click="searchClick"
              />
            </div>
          </div>

          <!-- 统计卡片 -->
          <div class="stats-cards">
            <div class="stat-card">
              <div class="card-value">{{ equipStatus.machineUseNum }}</div>
              <div class="card-label">{{ $t("device.totalNumberOfRuns") }}</div>
            </div>
            <div class="stat-card">
              <div class="card-value">{{ equipStatus.machineTotalNum }}</div>
              <div class="card-label">
                {{ $t("device.totalNumberOfEquipment") }}
              </div>
            </div>
          </div>
        </div>

        <!-- 设备列表 -->
        <div class="device-list-section">
          <van-tabs
            v-model:active="active"
            @click-tab="clickLabel"
            animated
            class="device-tabs"
            color="#2c87c8"
          >
            <van-tab :title="$t('device.whole')" name="" />
            <van-tab :title="$t('device.powerOn')" name="ON" />
            <van-tab :title="$t('device.abnormal')" name="ABNORMAL" />
            <van-tab
              v-for="item in labelList"
              :key="item.id"
              :title="item.name"
              :name="item.id"
            />
          </van-tabs>

          <!-- 设备项 -->
          <div class="device-items">
            <div v-for="item in list" :key="item.id" class="device-item">
              <!-- 设备状态标识 -->
              <div
                class="status-indicator"
                :class="{
                  active: item.eqeStatus === 1,
                  alert: item.hasTodayAlarm,
                }"
              ></div>

              <!-- 设备主体信息 -->
              <div class="device-main">
                <!-- 基础信息 -->
                <div class="device-info">
                  <div class="name-row">
                    <h4 class="device-name">
                      {{ item.name || item.clientId.slice(-6) }}
                    </h4>
                    <div
                      class="alarm-indicator"
                      v-if="item.hasTodayAlarm"
                      :class="{ blink: showAlert }"
                    />
                    <div
                      class="status-dot"
                      v-else
                      :class="{ active: item.eqeStatus === 1 }"
                    />
                  </div>
                  <div class="device-id">
                    {{ $t("device.machineUniqueCode") }}：{{ item.clientId }}
                  </div>

                  <!-- 状态信息 -->
                  <div class="status-info">
                    <span v-if="user.type < 1" class="lock-status">
                      {{ $t("device.lockCondition") }}：{{
                        item.isBlocked
                          ? $t("device.lockState")
                          : $t("device.unLockState")
                      }}
                    </span>
                    <template
                      v-if="item.machineType === '0' || !item.machineType"
                    >
                      <span
                        class="temperature"
                        :class="{
                          warning: item.furnaceTm <= 100 && item.eqeStatus == 1,
                        }"
                      >
                        {{ $t("device.furnaceHeadTemperature") }}：{{
                          item.furnaceTm || 0
                        }}{{ $t("device.degree") }}
                      </span>
                      <span class="temperature"
                        >{{ $t("device.temperatureInCabinet") }}：{{
                          item.cabinetTm || 0
                        }}{{ $t("device.degree") }}</span
                      >
                      <span class="humidity"
                        >{{ $t("device.humidityInCabinet") }}：{{
                          item.cabinetHd || 0
                        }}{{ $t("device.humidity") }}</span
                      >
                    </template>
                    <template v-if="item.machineType === '1'">
                      <span class="temperature">
                        {{
                          $t("device.cornGeneratorTemperature") +
                          "：" +
                          (item.cabinetTm ? item.cabinetTm : "0") +
                          $t("device.degree")
                        }}
                      </span>
                      <span
                        v-if="item.equimentType === 'P30'"
                        class="temperature"
                      >
                        {{
                          $t("device.stirringTemperature") +
                          "：" +
                          (item.cabinetHd ? item.cabinetHd : "0") +
                          $t("device.degree")
                        }}</span
                      >
                      <span
                        v-if="item.furnaceTm && item.furnaceTm != '-1'"
                        class="humidity"
                      >
                        {{
                          $t("device.cupQuantity") + "：" + item.furnaceTm
                        }}</span
                      >
                      <span v-if="item.equimentType === 'P30'" class="humidity">
                        {{
                          $t("device.bucketWeight") +
                          "：" +
                          item.furnaceSp +
                          $t("device.weight")
                        }}</span
                      >
                    </template>
                  </div>
                </div>

                <!-- 扩展内容 -->
                <div v-if="item.checkType" class="device-detail">
                  <!-- 设备详细信息 -->
                  <div class="detail-section" v-if="user.type < 2">
                    <label
                      >{{ $t("device.affiliatedMerchants") }}：{{
                        item.adminUserName
                      }}</label
                    >
                  </div>

                  <!-- 睡眠控制 -->
                  <div class="detail-section machine-control">
                    <div class="control-container">
                      <!-- 文本说明 -->
                      <span class="status-text">
                        {{ $t("device.sleepState") }}：{{
                          item.isSleep
                            ? $t("device.sleeping")
                            : $t("device.notSleeping")
                        }}
                      </span>

                      <!-- 切换按钮 -->
                      <van-switch
                        :model-value="item.isSleep"
                        size="18px"
                        active-color="#2c87c8"
                        class="switch-button"
                        @click="changeSleep(item)"
                      />
                    </div>
                  </div>
                  <!-- 睡眠控制下方添加 -->
                  <div
                    v-if="item.isSleep"
                    class="detail-section sleep-description"
                  >
                    <div class="desc-view" v-if="!sleepDescBoxShow">
                      <label class="desc-label"
                        >{{ $t("device.sleepDesc") }}：</label
                      >
                      <span class="desc-text">{{
                        item.sleepDesc || $t("device.SuspendBusiness")
                      }}</span>
                      <van-button
                        size="small"
                        color="#2c87c8"
                        class="edit-btn"
                        @click="editSleepDesc(item)"
                      >
                        {{ $t("device.modify") }}
                      </van-button>
                    </div>

                    <div class="desc-edit" v-else>
                      <van-field
                        v-model="item.sleepDesc"
                        :placeholder="$t('device.sleepDescPlace')"
                        class="edit-field"
                        label-width="4em"
                        clearable
                      >
                        <template #button>
                          <van-button
                            size="small"
                            type="primary"
                            class="confirm-btn"
                            @click="sleepDescChg(item.sleepDesc, item.id)"
                          >
                            {{ $t("device.confirm") }}
                          </van-button>
                          <van-button
                            size="small"
                            class="cancel-btn"
                            @click="sleepDescBoxShow = false"
                          >
                            {{ $t("device.cancel") }}
                          </van-button>
                        </template>
                      </van-field>
                    </div>
                  </div>
                  <!-- 炉头状态 -->
                  <div
                    class="detail-section machine-control"
                    v-if="item.machineType === '0' || !item.machineType"
                  >
                    <div class="control-container">
                      <span class="status-text">
                        {{
                          item.machineType == "0" || item.machineType == null
                            ? $t("device.furnHeadStatus")
                            : $t("device.deviceStatus")
                        }}：
                        {{
                          item.eqeStatus === 1
                            ? $t("device.opened")
                            : $t("device.closed")
                        }}
                      </span>
                      <!-- 操作按钮组 -->
                      <div class="button-group">
                        <van-button
                          size="small"
                          color="#2c87c8"
                          class="action-btn"
                          @click="openCloseHead(item.id, 1)"
                        >
                          {{ $t("device.open") }}
                        </van-button>
                        <van-button
                          size="small"
                          type="danger"
                          class="action-btn"
                          @click="openCloseHead(item.id, 0)"
                        >
                          {{ $t("device.close") }}
                        </van-button>
                        <van-button
                          size="small"
                          type="warning"
                          class="action-btn"
                          @click="restartHead(item.id)"
                        >
                          {{ $t("device.restartHead") }}
                        </van-button>
                      </div>
                    </div>
                  </div>
                  <!-- 定位： -->
                  <div class="detail-section" v-if="item.latitude">
                    <label @click="viewPosiClk(item)"
                      >{{ $t("device.position") }}：{{ item.fullName }}</label
                    >
                  </div>
                  <!-- 物料监控 -->
                  <template v-if="item.isMaterialUse === '1'">
                    <div
                      class="detail-section material-usage"
                      v-if="item.machineType === '0' || !item.machineType"
                    >
                      <!-- 糖类原料 -->
                      <div class="material-group">
                        <div class="material-grid">
                          <div
                            v-for="(sugar, index) in sugarTypes"
                            :key="index"
                            class="material-item"
                          >
                            <van-icon
                              :name="sugar.icon"
                              class="material-icon"
                              size="25px"
                              :style="{ color: sugar.color }"
                            />
                            <div class="material-info">
                              <span class="material-label">{{
                                $t(`device.${sugar.type}`)
                              }}</span>
                              <span class="material-value"
                                >{{
                                  Format_calcuDecial(item[sugar.type])
                                }}
                                %</span
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 一键补料 -->
                      <div class="supply-section">
                        <van-button
                          block
                          type="primary"
                          icon="replay"
                          class="supply-button"
                          @click="replenishmentClk(item)"
                        >
                          {{ $t("device.oneKeyFeed") }}
                        </van-button>
                      </div>
                    </div>
                    <!-- 爆米花物料 -->
                    <div
                      class="detail-section material-usage"
                      v-if="item.machineType === '1'"
                    >
                      <!-- 爆米花P30物料-->
                      <div
                        class="material-group"
                        v-if="item.equimentType === 'P30'"
                      >
                        <div class="material-grid">
                          <div
                            v-for="(poporn, index) in popornTypes"
                            :key="index"
                            class="material-item"
                          >
                            <van-icon
                              :name="poporn.icon"
                              class="material-icon"
                              size="25px"
                              :style="{ color: poporn.color }"
                            />
                            <div class="material-info">
                              <span class="material-label">{{
                                $t(`device.${poporn.type}`)
                              }}</span>
                              <span class="material-value"
                                >{{
                                  Format_calcuDecial(item[poporn.code])
                                }}
                                g</span
                              >
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 爆米花SBM10物料-->
                      <div
                        class="material-group"
                        v-if="item.equimentType === 'SBM10'"
                      >
                        <div class="material-grid">
                          <div
                            v-for="(poporn, index) in poporn10Types"
                            :key="index"
                            class="material-item"
                          >
                            <van-icon
                              :name="poporn.icon"
                              class="material-icon"
                              size="25px"
                              :style="{ color: poporn.color }"
                            />
                            <div class="material-info">
                              <span class="material-label">{{
                                $t(`device.${poporn.type}`)
                              }}</span>
                              <span class="material-value"
                                >{{
                                  Format_calcuDecial(item[poporn.code])
                                }}
                                g</span
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 冰淇淋物料 -->
                    <div
                      class="detail-section material-usage"
                      v-if="item.machineType === '2'"
                    >
                      <div class="material-group">
                        <div class="material-grid">
                          <div
                            v-for="(ice, index) in iceTypes"
                            :key="index"
                            class="material-item"
                          >
                            <van-icon
                              :name="ice.icon"
                              class="material-icon"
                              size="25px"
                              :style="{ color: ice.color }"
                            />
                            <div class="material-info">
                              <span class="material-label">{{
                                $t(`device.${ice.type}`)
                              }}</span>
                              <span class="material-value"
                                >{{
                                  Format_calcuDecial(item[ice.code])
                                }}
                                %</span
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <!-- 最近刷新时间 -->
                  <div class="detail-section">
                    <label
                      >{{ $t("device.lastRefreshTime") }}：{{
                        showDateTime(item.lastUpdateTime)
                      }}</label
                    >
                  </div>
                  <!-- 音量 -->
                  <div class="detail-section">
                    <label
                      >{{ $t("device.volume") }}：{{ item.volume || 0 }}</label
                    >
                  </div>
                  <!-- 报警信息区域 -->
                  <div
                    class="detail-section alert-section"
                    v-if="item.alarmList?.length"
                  >
                    <!-- 报警列表 -->
                    <div class="alert-list">
                      <div
                        v-for="itemAlarm in item.alarmList"
                        :key="itemAlarm"
                        class="alert-item"
                      >
                        <div class="alert-content">
                          <div class="alert-time">
                            <van-icon name="clock" class="alert-icon" />
                            {{ showDateTime(itemAlarm.occurrenceTime) }}
                          </div>
                          <div class="alert-message">
                            <van-icon name="warning" class="alert-icon" />
                            <span class="alert-text">{{
                              itemAlarm.alarmContent
                            }}</span>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 一键清除 -->
                    <div class="alert-actions">
                      <van-button
                        block
                        type="primary"
                        color="#07c160"
                        icon="delete"
                        @click="clearAllAlarm(item.alarmList, item)"
                      >
                        {{ $t("device.oneClickClear") }}
                      </van-button>
                    </div>
                  </div>

                  <!-- 操作按钮 -->
                  <div class="action-buttons">
                    <van-button
                      color="#2c87c8"
                      icon="bars"
                      size="small"
                      @click="deviceSet(item)"
                      >{{ $t("device.editDevice") }}</van-button
                    >
                    <van-button
                      color="#2c87c8"
                      icon="setting"
                      v-if="controlList.length"
                      size="small"
                      @click="deviceOprShow(item, controlList)"
                    >
                      {{ $t("device.commonOperations") }}
                    </van-button>
                  </div>
                </div>

                <!-- 展开/收起 -->
                <div
                  class="toggle-detail"
                  @click="item.checkType = !item.checkType"
                >
                  <span>{{
                    item.checkType ? $t("device.stow") : $t("device.seeMore")
                  }}</span>
                  <van-icon
                    :name="item.checkType ? 'arrow-up' : 'arrow-down'"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <van-back-top
          right="20"
          bottom="80"
          style="background-color: #2c87c8"
        />
      </van-list>
    </div>

    <!-- 其他组件 -->
    <device-oper ref="oprRef" @operfinish="operFinish" />
    <device-search ref="searchRef" @search="search" />
  </div>
</template>

<script>
import { Api_postMachineNum } from "../../service/home";
import {
  onMounted,
  reactive,
  toRefs,
  ref,
  onActivated,
  onBeforeUnmount,
} from "vue";
import {
  showFailToast,
  showSuccessToast,
  showToast,
  showConfirmDialog,
} from "vant";
import sHeader from "../../components/SimpleHeader";
import { getLoginUser, Format_calcuDecial } from "../../common/js/utils";
import {
  eliminate,
  Api_getReplenishment,
  changeSleepDesc,
  setFurnace,
  sleepEquipment,
  getMachineList,
} from "../../service/device/index";
import deviceSearch from "./deviceSearch";
import deviceOper from "./deviceOper";
import { onBeforeRouteLeave, useRouter } from "vue-router";
import dateUtil from "../../utils/dateUtil";
import { useI18n } from "vue-i18n";
import { Api_getLabelList } from "../../service/labelMan";
import { getAdminRole } from "@/service/user";

export default {
  name: "device",
  components: { sHeader, deviceSearch, deviceOper },
  setup() {
    const { t } = useI18n();
    const searchRef = ref(null);
    const oprRef = ref(null);
    const list = ref([]);
    const loading = ref(true);
    const error = ref(false);
    const finished = ref(false);
    const router = useRouter();
    const sys = ref(null);
    const user = getLoginUser();
    const labelList = ref([]);

    // 棉花糖物料
    const sugarTypes = ref([
      { type: "whiteSugar", icon: "stop", color: "#ffffff" },
      { type: "redSugar", icon: "stop", color: "#ff4d4f" },
      { type: "yellowSugar", icon: "stop", color: "#faad14" },
      { type: "blueSugar", icon: "stop", color: "#1890ff" },
      { type: "stick", icon: "minus", color: "#9254de" },
      { type: "water", icon: "weapp-nav", color: "#ADD8E6" },
      { type: "wasteWater", icon: "weapp-nav", color: "#666" },
    ]);

    // 爆米花P30物料
    const popornTypes = ref([
      { code: "whiteSugar", type: "chocolate", icon: "stop", color: "#5C3317" },
      { code: "redSugar", type: "cheese", icon: "stop", color: "#fcdd8d" },
      { code: "yellowSugar", type: "peach", icon: "stop", color: "#FFC0CB" },
      { code: "blueSugar", type: "caramel", icon: "stop", color: "#D2691E" },
    ]);

    // 爆米花P10物料
    const poporn10Types = ref([
      { code: "redSugar", type: "sweet", icon: "stop", color: "#FFC0CB" },
      { code: "whiteSugar", type: "salty", icon: "stop", color: "#fcdd8d" },
    ]);

    // 冰淇淋物料
    const iceTypes = ref([
      { code: "whiteSugar", type: "C01", icon: "stop", color: "#5C3317" },
      { code: "redSugar", type: "C02", icon: "stop", color: "#faad14" },
      { code: "yellowSugar", type: "J01", icon: "stop", color: "#ff4d4f" },
      { code: "blueSugar", type: "J02", icon: "stop", color: "#1890ff" },
      { code: "stick", type: "J03", icon: "stop", color: "#f8ff3b" },
    ]);

    // 创建容器引用
    const scrollContainer = ref(null);
    // 创建响应式滚动位置
    const scrollTop = ref(0);

    // 返回顶部
    const backTop = () => {
      document.documentElement.scrollTop = 0;
    };

    // 滚动处理函数
    const handleScroll = () => {
      // console.log("scrollContainer", scrollContainer.value);
      if (scrollContainer.value) {
        scrollTop.value = scrollContainer.value.scrollTop;
        // 如果需要，可以在这里触发其他逻辑
        // console.log("当前滚动位置:", scrollTop.value);
      }
    };

    onActivated(() => {
      scrollContainer.value.scrollTop = scrollTop.value;
    });

    onBeforeRouteLeave(() => {
      // console.log("离开时的位置", scrollTop.value);
    });

    // 在组件卸载前清除定时器
    onBeforeUnmount(() => {
      clearInterval(updateDataInterval);
    });

    const updateDataInterval = () => {
      // 每隔5分钟更新数据
      setInterval(() => {
        init();
        if (oprRef.value) {
          oprRef.value.closeOper();
        }
        // verticalScrollPosition.value = 0;
      }, 5 * 60 * 1000); // 5分钟的毫秒数
    };
    //控制睡眠描述的显示隐藏
    const sleepDescBoxShow = ref(false);
    // 页面列表查询参数
    let searchParams = reactive({
      id: "", // 用户账户id
      // adminName: '', // 用户登录名
      current: 1, // 页数
      size: 10, // 页大小
      todayDate: dateUtil.formateDate(new Date(), "yyyy-MM-dd"), // 当天时间
      labelId: "", // 分组标签
    });
    // 初始化页面获取列表
    const showAlert = ref(false);
    // 远程操作权限
    const controlList = ref([]);
    // 获取账号权限
    const getAccountPer = async () => {
      const { data } = await getAdminRole({ adminId: user.id });
      if (data.code === "00000") {
        if (data.data.controlCodesJson !== null) {
          controlList.value = JSON.parse(data.data.controlCodesJson);
        }
      }
    };
    onMounted(() => {
      init();
      updateDataInterval();
      getAccountPer();
      // window.addEventListener('scroll', handleScroll);
      // 加载样式
      // styleUrl('device');
      setInterval(() => {
        showAlert.value = !showAlert.value;
      }, 500); // 1000毫秒即1秒
    });
    // 初始化
    const init = () => {
      // 获取设备情况
      getMachineNum();
      getLabelList();
      if (localStorage.getItem("loginSys")) {
        const loginSysString = localStorage.getItem("loginSys");
        sys.value = JSON.parse(loginSysString);
      }
      list.value = [];
      searchParams.current = 1;
      if (user) {
        searchParams.id = user.id;
        getList();
      }
    };

    // 获取设备标签
    const getLabelList = async () => {
      Api_getLabelList({
        adminId: user.id,
        type: "1",
      }).then((res) => {
        const { data } = res.data;
        labelList.value = data;
      });
    };

    // 获取设备列表数据
    const getList = async () => {
      finished.value = false;
      const { data } = await getMachineList(Object.assign({}, searchParams));
      if (data.code === "00000") {
        if (searchParams.current === 0) {
          list.value = [];
        }
        // 列表值叠加
        list.value = list.value.concat(
          data.data.records.map((item) => {
            if (item.sleepDesc == null) {
              item.sleepDesc = t("device.SuspendBusiness");
            }
            return {
              ...item,
              checkType: false,
            };
          })
        );
        if (list.value.length === data.data.total) {
          finished.value = true;
        }
        loading.value = false;
      } else {
        showFailToast(data.message);
      }
    };
    // 滚动加载
    const onLoad = () => {
      if (!finished.value) {
        // console.log("滚动加载")
        searchParams.current = searchParams.current + 1;
        getList();
      }
    };
    // 搜索点击
    const searchClick = () => {
      searchRef.value.showSearch();
    };
    // 搜索条件触发查询
    const search = (e) => {
      list.value = [];
      loading.value = true;
      searchParams.current = 1;
      searchParams = Object.assign(searchParams, e);
      getList();
      getMachineNum();
    };
    // 跳转设备编辑
    const deviceSet = (e) => {
      router.push({ path: "deviceSet", query: { deviceId: e.id } });
    };
    // 常用操作弹窗展示触发
    const deviceOprShow = (e, value) => {
      oprRef.value.showOper(e, value);
    };
    // 消除报警
    const clearAlarm = async (e, e1, e2) => {
      const params = {
        id: e.id,
        name: e.name,
        selfName: e.selfName,
        areaId: e.areaId,
        channel: e.channel,
        contactName: e.contactName,
        contactPhone: e.contactPhone,
        flowers: e.flowers,
        operationalName: e.operationalName,
        operationalPhone: e.operationalPhone,
        timeRuleId: e.timeRuleId,
      };
      const { data } = await eliminate(Object.assign({}, params));
      if (data.code) {
        showSuccessToast(t("device.successfullyEliminatedTheAlarm"));
        setTimeout(() => {
          e2 = e2.filter((item) => item.id !== e.id);
          list.value[
            list.value.findIndex((item) => item.id === e1.id)
          ].alarmList = e2;
          if (e2.length === 0) {
            e1.hasTodayAlarm = false;
          }
        }, 1000);
      } else {
        showFailToast(data.message);
      }
    };
    // 一键消除报警
    const clearAllAlarm = (e, e1) => {
      showConfirmDialog({
        title: t("device.openRemind"),
        message: t("device.isClear"),
      })
        .then(async () => {
          const { data } = await eliminate(Object.assign({}, { id: e[0].id }));
          if (data.code) {
            showSuccessToast(t("device.successfullyEliminatedTheAlarm"));
            setTimeout(() => {
              list.value[
                list.value.findIndex((item) => item.id === e1.id)
              ].alarmList = null;
              e1.hasTodayAlarm = false;
              if (e1.machineType == "0" || e1.machineType == null) {
                restartHead(e1.id, t("device.clearAfter"));
              }
            }, 800);
          } else {
            showFailToast(data.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    };

    const showDateTime = (date) => {
      if (!date) {
        return "";
      }
      const currentDate = new Date(
        dateUtil.formateDate(new Date(date), "yyyy/MM/dd hh:mm:ss")
      );
      return dateUtil.timeZoneDate(currentDate);
    };

    // 点击查看定位
    const viewPosiClk = (row) => {
      if (row.latitude) {
        router.push({
          path: "viewPosition",
          query: {
            latitude: row.latitude,
            longitude: row.longitude,
            fullName: row.fullName,
            name: row.name ? row.name : row.clientId.slice(-6),
            status: row.eqeStatus,
          },
        });
      } else {
        showToast(`${t("device.noPosition")}！！！`);
      }
    };

    // 点击补料
    const replenishmentClk = (row) => {
      showConfirmDialog({
        title: t("user.tips"),
        message: t("device.isReplenishment"),
      })
        .then(async () => {
          const { data } = await Api_getReplenishment({
            equipmentId: row.id,
          });
          if (data.code) {
            showSuccessToast(t("device.sentSuccessfully"));
            setTimeout(() => {
              // router.go(0);
              init();
            }, 1500);
          } else {
            showFailToast(data.message);
          }
        })
        .catch(() => {
          return;
        });
    };
    // 操作弹窗完成的回调
    const operFinish = () => {
      init();
    };
    // 设备状况
    const equipStatus = ref({});
    // 获取设备情况
    const getMachineNum = () => {
      Api_postMachineNum({
        adminId: user.id,
        companyType: searchParams.companyType,
      }).then((res) => {
        equipStatus.value = res.data.data || {};
      });
    };
    // 点击运行总数和总设备数
    const eqeStatusClk = (val) => {
      searchParams.eqeStatus = val;
      // 初始化
      searchParams.current = 1;
      list.value = [];
      getList();
    };
    // 点击修改图标
    const editSleepDesc = () => {
      sleepDescBoxShow.value = !sleepDescBoxShow.value;
    };
    // 点击睡眠描述的确定按钮
    const sleepDescChg = async (sleepDesc, id) => {
      if (!sleepDesc) {
        showToast(t("device.sleepDescPlace"));
      } else {
        const { data } = await changeSleepDesc({
          equipmentId: id,
          sleepDesc,
        });
        if (data.code === "00000") {
          showToast(t("device.modificationSucceeded"));
          setTimeout(() => {
            sleepDescBoxShow.value = false;
          }, 500);
        }
      }
    };

    // 点击标签
    const active = ref("");
    const clickLabel = (item) => {
      console.log(item);
      list.value = [];
      searchParams.current = 1;
      searchParams.labelId = item.name;
      getList();
    };
    // 分组管理
    const showPopover = ref(false);
    const actions = [
      { text: t("device.group"), value: "0" },
      { text: t("device.addGroup"), value: "1" },
    ];
    const selectLabel = (action) => {
      // showToast(action.value);
      if (action.value == "0") {
        router.push("/labelMan");
      }
      if (action.value == "1") {
        router.push("/labelManAdd");
      }
    };

    // 睡眠切换
    const changeSleep = (item) => {
      showConfirmDialog({
        title: t("user.tips"),
        message: t("device.changeSleep"),
      })
        .then(async () => {
          const { data } = await sleepEquipment({
            id: item.id,
            isSleep: item.isSleep ? "0" : "1",
          });
          if (data.code) {
            showSuccessToast(t("device.changeSleepSuccess"));
            setTimeout(() => {
              init();
            }, 1500);
          } else {
            showFailToast(data.message);
          }
        })
        .catch(() => {
          return;
        });
    };

    // 重启炉头
    const restartHead = (id, msg) => {
      showConfirmDialog({
        title: t("user.tips"),
        message: msg ? msg : t("device.restartFurnaceHeadTips"),
      })
        .then(async () => {
          const { data } = await setFurnace({
            id: id,
            eqeStatus: 1,
          });
          if (data.code) {
            showSuccessToast(t("device.restartSucceeded"));
            setTimeout(() => {
              init();
            }, 1500);
          } else {
            showFailToast(data.message);
          }
        })
        .catch(() => {
          return;
        });
    };
    // 开启/关闭炉头
    const openCloseHead = (id, status) => {
      showConfirmDialog({
        title: t("user.tips"),
        message:
          status == 1
            ? t("device.openFurnaceHeadTips")
            : t("device.closeFurnaceHeadTips"),
      })
        .then(async () => {
          const { data } = await setFurnace({
            id: id,
            eqeStatus: status,
          });
          if (data.code) {
            showSuccessToast(
              (status == 1 ? t("device.open") : t("device.close")) +
                t("device.success")
            );
            setTimeout(() => {
              init();
            }, 1500);
          } else {
            showFailToast(data.message);
          }
        })
        .catch(() => {
          return;
        });
    };

    return {
      showAlert,
      ...toRefs(searchParams),
      list,
      loading,
      error,
      finished,
      onLoad,
      searchRef,
      searchClick,
      search,
      deviceSet,
      clearAlarm,
      clearAllAlarm,
      oprRef,
      deviceOprShow,
      showDateTime,
      sys,
      viewPosiClk,
      replenishmentClk,
      Format_calcuDecial,
      operFinish,
      equipStatus,
      eqeStatusClk,
      editSleepDesc,
      sleepDescBoxShow,
      sleepDescChg,
      changeSleep,
      backTop,
      user,
      labelList,
      clickLabel,
      active,
      actions,
      showPopover,
      selectLabel,
      restartHead,
      openCloseHead,
      controlList,
      sugarTypes,
      popornTypes,
      iceTypes,
      poporn10Types,

      scrollContainer,
      scrollTop,
      handleScroll,
    };
  },
};
</script>

<style lang="less" scoped>
.device-management {
  --primary-color: #2c87c8;
  --success-color: #07c160;
  --warning-color: #ff976a;
  --danger-color: #ff463c;
  --text-primary: #404d74;
  --text-secondary: #666;
  --border-color: #eee;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  --tabbar-height: 40px;
  --tabbar-padding: calc(var(--tabbar-height) + 20px);

  background: #f8f9fa;
  min-height: 100vh;

  .device-list-container {
    height: calc(100% - 95px);
    overflow: auto;
    overflow-x: hidden;
  }

  .management-header {
    box-shadow: var(--card-shadow);
  }

  .data-overview {
    background: white;
    margin: 10px;
    border-radius: 8px;
    box-shadow: var(--card-shadow);

    .overview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid var(--border-color);

      .section-title {
        font-size: 15px;
        color: var(--text-primary);
        margin: 0;
      }

      .action-icons {
        .icon-filter,
        .icon-search {
          font-size: 20px;
          color: var(--primary-color);
          margin-left: 12px;
        }
      }
    }

    .stats-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      padding: 16px;

      .stat-card {
        background: linear-gradient(145deg, #f3f4ff, #ffffff);
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        transition: transform 1s;

        &:active {
          transform: scale(0.98);
        }

        .card-value {
          font-size: 24px;
          font-weight: 600;
          color: var(--primary-color);
          margin-bottom: 8px;
        }

        .card-label {
          font-size: 14px;
          color: var(--text-secondary);
        }
      }
    }
  }

  .device-list-section {
    margin: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: var(--card-shadow);

    :deep(.van-tabs__wrap) {
      border-radius: 8px;
    }

    .device-tabs {
      :deep(.van-tab) {
        font-size: 14px;

        &--active {
          color: var(--primary-color);
          font-weight: 500;
        }
      }
    }

    .device-items {
      .device-item {
        display: flex;
        margin: 12px;
        background: white;
        border-radius: 8px;
        box-shadow: var(--card-shadow);

        .status-indicator {
          width: 4px;
          border-radius: 2px 0 0 2px;
          background: #ddd;

          &.active {
            background: var(--success-color);
          }

          &.alert {
            background: var(--danger-color);
            animation: pulse 1.5s infinite;
          }
        }

        .device-main {
          flex: 1;
          padding: 16px;

          .name-row {
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            .device-name {
              font-size: 16px;
              color: var(--text-primary);
              margin: 0;
              flex: 1;
            }

            .status-dot {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: #ddd;

              &.active {
                background: var(--success-color);
              }
            }

            .alarm-indicator {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: var(--danger-color);

              &.blink {
                animation: pulse 2s infinite;
              }
            }
          }

          .device-id {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 12px;
          }

          .status-info {
            > span {
              display: block;
              font-size: 14px;
              margin: 8px 0;
              color: var(--text-primary);

              &.warning {
                color: var(--danger-color);
                font-weight: 500;
              }
            }
          }

          .device-detail {
            border-top: 1px solid var(--border-color);
            margin-top: 12px;

            .detail-section {
              padding: 12px 0;
              border-bottom: 1px solid var(--border-color);

              // 新增睡眠控制样式
              &.machine-control {
                .control-container {
                  display: flex;
                  flex-wrap: wrap; // 允许换行
                  align-items: center;
                  gap: 12px; // 控制文本和按钮间距

                  // 文本部分
                  .status-text {
                    color: var(--text-primary);
                    white-space: nowrap; // 防止文本换行
                  }

                  // 切换按钮
                  .van-switch {
                    flex-shrink: 0; // 防止按钮被压缩
                    position: relative;
                    top: 1px; // 微调垂直对齐
                  }

                  // 控制按钮
                  .button-group {
                    display: flex;
                    gap: 8px; // 按钮间距
                    flex-shrink: 0; // 防止按钮压缩

                    .action-btn {
                      // 保持与全局按钮样式一致
                      border-radius: 4px;
                      padding: 0 10px;
                      max-width: 120px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      height: 28px;
                      line-height: 28px;

                      // 移动端适配
                      @media (max-width: 480px) {
                        max-width: 80px;
                        padding: 0 8px;
                      }
                    }
                  }
                }
              }

              // 睡眠描述样式（保持与报警模块一致）

              &.sleep-description {
                // 查看状态
                .desc-view {
                  display: flex;
                  align-items: center;
                  gap: 2px;

                  .desc-label {
                    color: var(--text-primary);
                    flex-shrink: 0;
                  }

                  .desc-text {
                    color: var(--text-primary);
                    word-break: break-word;
                    padding-right: 10px;
                  }

                  .edit-btn {
                    flex-shrink: 0;
                    border-radius: 4px;
                    padding: 0 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: 28px;
                    line-height: 28px;

                    // 移动端适配
                    @media (max-width: 480px) {
                      max-width: 80px;
                      padding: 0 8px;
                    }
                  }
                }

                // 编辑状态
                .desc-edit {
                  .edit-field {
                    padding: 8px 12px;
                    background: #f8f9fa;
                    border-radius: 6px;

                    :deep(.van-field__control) {
                      min-height: 36px;
                      padding: 4px 8px;
                      background: white;
                      border-radius: 4px;
                    }

                    :deep(.van-button) {
                      margin-left: 8px;
                      height: 28px;
                      line-height: 26px;

                      &.confirm-btn {
                        background: var(--primary-color);
                        border-color: var(--primary-color);
                        padding: 0 5px;
                      }

                      &.cancel-btn {
                        color: var(--text-secondary);
                        border-color: #ddd;
                        padding: 0 5px;
                      }
                    }
                  }
                }

                // 保持与报警信息相同的交互细节
                &:last-child {
                  border-bottom: none;
                  padding-bottom: 0;
                }
              }

              // 物料监控样式
              &.material-usage {
                --material-icon-size: 20px;
                --material-grid-gap: 12px;

                .material-group {
                  // margin-bottom: 20px;

                  .material-title {
                    color: var(--text-primary);
                    font-size: 12px;
                    margin: 0 0 12px 0;
                    font-weight: 500;
                  }

                  .material-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                    gap: var(--material-grid-gap);
                  }

                  .material-item {
                    display: flex;
                    align-items: center;
                    padding: 8px;
                    background: #e7e7e7;
                    border-radius: 6px;

                    .material-icon {
                      font-size: var(--material-icon-size);
                      margin-right: 8px;
                      flex-shrink: 0;
                    }

                    .material-info {
                      flex: 1;
                      min-width: 0;
                    }

                    .material-label {
                      display: block;
                      font-size: 13px;
                      color: var(--text-secondary);
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }

                    .material-value {
                      display: block;
                      font-size: 15px;
                      color: var(--text-primary);
                      font-weight: 500;
                    }
                  }
                }

                .supply-section {
                  margin-top: 16px;

                  .supply-button {
                    border-radius: 6px;
                    --van-button-default-height: 40px;

                    .van-icon {
                      font-size: 18px;
                      vertical-align: -2px;
                    }
                  }
                }
              }

              // 报警样式
              &.alert-section {
                --alert-icon-size: 16px;
                --alert-spacing: 8px;

                .alert-list {
                  margin-bottom: 16px;

                  .alert-item {
                    &:not(:last-child) {
                      margin-bottom: 12px;
                    }
                  }
                }

                .alert-content {
                  background: #fff5f5;
                  border-radius: 6px;
                  padding: 12px;
                }

                .alert-time {
                  display: flex;
                  align-items: center;
                  color: var(--text-secondary);
                  font-size: 13px;
                  margin-bottom: var(--alert-spacing);

                  .alert-icon {
                    font-size: var(--alert-icon-size);
                    margin-right: 6px;
                    color: var(--text-secondary);
                  }
                }

                .alert-message {
                  display: flex;
                  align-items: flex-start;
                  color: var(--danger-color);

                  .alert-icon {
                    font-size: var(--alert-icon-size);
                    margin-right: 6px;
                    flex-shrink: 0;
                  }

                  .alert-text {
                    flex: 1;
                    word-break: break-word;
                    line-height: 1.4;
                  }
                }

                .alert-actions {
                  margin-top: 16px;

                  .van-button {
                    border-radius: 6px;

                    &::before {
                      border-radius: 5px !important;
                    }
                  }
                }
              }

              // 保留原有label样式
              label {
                color: var(--text-primary);
              }
            }

            .action-buttons {
              display: flex;
              gap: 8px;
              padding: 12px 0;

              .van-button {
                flex: 1;
              }
            }
          }

          .toggle-detail {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            padding-top: 12px;
            cursor: pointer;

            .van-icon {
              margin-left: 4px;
            }
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}
</style>