shenze-sysMan/src/views/device/paramsSet/paramsSetInfo.vue

<template>
  <!-- 设备参数调整 -->
  <div class="paramsSetPage flex-col">
    <s-header :name="paramsTitle" :noback="false"></s-header>
    <div class="paramsSetBox mod1 flex-col">
      <div class="wrap2 flex-col van-hairline--bottom">
        <div class="outer1 flex-row justify-between">
          <div class="block1 flex-col"></div>
          <span class="txt2">{{ $t('device.equipmentName') }}：{{ deviceDetal ? deviceDetal.name : "" }}</span>
        </div>
      </div>
      <!-- <van-divider :style="{ margin: '5px 16px' }" /> -->
      <div class="" v-if="type == '3'">
        <van-field :label="$t('device.numberOneTm')" :model-value="(deviceDetal.numberOne == null ? $t('device.noData') : deviceDetal.numberOne + $t('device.degree'))" readonly />
        <van-field :label="$t('device.furnaceHeadTemperature')" :model-value="(deviceDetal.furnaceTm == null ? $t('device.noData') : deviceDetal.furnaceTm + $t('device.degree'))" readonly />
        <van-field :label="$t('device.candyGeneratorTm')" :model-value="(deviceDetal.candyGeneratorTm == null ? $t('device.noData') : deviceDetal.candyGeneratorTm + $t('device.degree'))" readonly />
        <van-field :label="$t('device.temperatureInCabinet')" :model-value="(deviceDetal.cabinetTm == null ? $t('device.noData') : deviceDetal.cabinetTm + $t('device.degree'))" readonly />
        <van-field :label="$t('device.humidityInCabinet')" :model-value="(deviceDetal.cabinetHd == null? $t('device.noData') : deviceDetal.cabinetHd + $t('device.humidity'))" readonly />
        <van-field :label="$t('device.outsideTm')" :model-value="(deviceDetal.outsideTm == null ? $t('device.noData') : deviceDetal.outsideTm + $t('device.degree'))" readonly />
        <van-field :label="$t('device.outsidehd')" :model-value="(deviceDetal.outsideHd == null? $t('device.noData') : deviceDetal.outsideHd + $t('device.humidity'))" readonly />
      </div>
      <div class="paramsList" v-for="(item, key) in paramsList" :key="key">
        <van-field v-model="item.val" v-if="item.name != 'M502' && item.name != 'M506'" name="phone" type="tel"
          :label="paramName[key]">
          <template #button>
            <van-button size="small" type="primary" class="updataButton" @click="updateParams(item)">{{
              $t('device.submitUpdates') }}</van-button>
          </template>
        </van-field>
        <div class="flex-row" v-else>
          <span class="txt3 o-pl-15 o-mtb-18">{{ paramName[key] }}
          </span>
          <van-switch class="o-mt-8" :model-value="checked[key]" @update:model-value="onUpdateValue(item, key)">
          </van-switch>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { useRoute } from "vue-router";
import { getDeviceDetal, getParameters, updateParameters } from "@/service/device";
import { Toast, Dialog } from "vant";
import { useI18n } from 'vue-i18n';
import { styleUrl } from "../../../common/js/utils";

export default {
  components: { sHeader },
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const deviceId = route.query.deviceId;
    const deviceDetal = ref([]);
    const paramsTitle = ref("");
    const paramsList = ref([]);
    const comParams = ref([]);
    const paramName = ref([]);
    const checked = ref([]);
    const type = ref("");

    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('paramsSet');
      type.value = route.query.type;
      if (route.query.type === "0") {
        paramsTitle.value = t('device.generalParameterConfiguration');
      }
      if (route.query.type === "1") {
        paramsTitle.value = t('device.advancedParameterConfiguration');
      }
      if (route.query.type === "2") {
        paramsTitle.value = t('device.debuggingParameterConfiguration');
      }
      if (route.query.type === "3") {
        paramsTitle.value = t('device.humidityParameterConfiguration');
      }
      getDeviceDetalFun();
    });
    // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({ id: deviceId });
      if (data.code === "00000") {
        deviceDetal.value = data.data;
        getParametersFun();
      } else {
        Toast.fail(data.message);
      }
    };
    // 获取参数列表
    const getParametersFun = async () => {
      paramsList.value = [];
      const params = {
        id: deviceId,
        status: route.query.type,
        clientId: deviceDetal.value.clientId,
      };
      const { data } = await getParameters(params);
      if (data.code) {
        paramsList.value = data.data;
        paramsList.value.forEach((paramItem) => {
          // console.log("paramItem：", paramItem);
          comParams.value.push(paramItem.name);
          paramName.value.push(t("paramNames." + paramItem.name));
          if (paramItem.val === '1') {
            checked.value.push(true);
          } else {
            checked.value.push(false);
          }
        })
        // console.log("checked:", checked.value);

      } else {
        Toast.fail(data.message);
      }
    };

    // 更新参数值
    const updateParams = async (item) => {
      const params = {
        id: deviceId,
        name: item.name,
        val: item.val,
      };
      const { data } = await updateParameters(params);
      if (data.code) {
        Toast.success(t('device.modificationSucceeded'));
      } else {
        Toast.fail(data.message);
      }
    }
    const onUpdateValue = async (item, key) => {
      console.log(item);
      const params = {
        id: deviceId,
        name: item.name,
        val: item.val === '0' ? '1' : '0',
      };
      Dialog.confirm({
        title: '提醒',
        message: '是否切换开关？',
      }).then(() => {
        checked.value[key] = !checked.value[key];
        const { data } = updateParameters(params);
        if (data.code) {
          Toast.success(t('device.modificationSucceeded'));
        } else {
          Toast.fail(data.message);
        }
      }).catch(() => {
        // on cancel
      });
    };
    return {
      deviceDetal,
      paramsTitle,
      paramsList,
      // getParamName,
      updateParams,
      paramName,
      checked,
      onUpdateValue,
      type,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../../common/style/common";

.paramsValue {
  margin: 0 40px;
}
</style>