123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614 |
- <template>
- <div class="parameter-adjustment">
- <s-header :name="paramsTitle" :noback="false" />
- <div class="content-container">
- <!-- 设备信息卡片 -->
- <div class="device-card">
- <div class="device-header">
- <van-icon name="desktop-o" class="icon" />
- <h3 class="device-name">
- {{ equipmentName }}
- </h3>
- </div>
- </div>
- <!-- 参数配置区 -->
- <div class="parameter-container">
- <!-- 温湿度监控模式 -->
- <div v-if="type === '3'" class="monitoring-grid">
- <div
- v-for="item in monitoringParams"
- :key="item.key"
- class="parameter-card"
- >
- <van-icon :name="item.icon" class="param-icon" />
- <div class="param-info">
- <div class="param-label">{{ $t(item.label) }}</div>
- <div class="param-value">
- {{ deviceDetal[item.key] ?? $t("device.noData") }}
- <span v-if="deviceDetal[item.key] !== null">{{
- $t(item.unit)
- }}</span>
- </div>
- </div>
- </div>
- </div>
- <!-- 调试参数模式 -->
- <div v-if="type === '2'" class="debug-panel">
- <div class="parameter-card">
- <van-icon name="weapp-nav" class="param-icon" />
- <div class="param-info">
- <div class="param-label">
- {{ $t("device.humidityInCabinet") }}
- </div>
- <div class="param-value">
- {{ deviceDetal.cabinetHd ?? $t("device.noData") }}
- <span v-if="deviceDetal.cabinetHd !== null">{{
- $t("device.humidity")
- }}</span>
- </div>
- </div>
- </div>
- <div class="control-group">
- <van-field
- v-model="interval"
- :label="$t('device.increaseOrDecrease')"
- class="smart-field"
- >
- <template #button>
- <van-button
- size="small"
- type="primary"
- @click="updateInterval(0)"
- class="action-btn"
- >
- {{ $t("device.submitUpdates") }}
- </van-button>
- </template>
- </van-field>
- <div class="preset-buttons">
- <van-button
- v-for="preset in presets"
- :key="preset.type"
- type="primary"
- @click="updateInterval(preset.type)"
- class="preset-btn"
- >
- {{ $t(preset.label) }}
- </van-button>
- </div>
- </div>
- </div>
- <!-- 通用参数列表 -->
- <div class="parameter-list">
- <div
- v-for="(item, key) in paramsList"
- :key="key"
- class="parameter-item"
- >
- <van-field
- v-if="!checkBtn(item.name)"
- v-model="item.val"
- :label="paramName[key]"
- @update:model-value="onUpdateParameters(item, key, $event)"
- class="smart-field"
- >
- <template #button>
- <van-button
- size="small"
- type="primary"
- @click="updateParams(item, key)"
- class="action-btn"
- >
- {{ $t("device.submitUpdates") }}
- </van-button>
- </template>
- </van-field>
- <div v-else class="switch-control">
- <span class="switch-label">{{ paramName[key] }}</span>
- <van-switch
- :model-value="checked[key]"
- @update:model-value="onUpdateValue(item, key)"
- size="24px"
- class="custom-switch"
- />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { onMounted, ref } from "vue";
- import sHeader from "@/components/SimpleHeader";
- import { useRoute, useRouter } from "vue-router";
- import {
- getDeviceDetal,
- getParameters,
- updateParameters,
- humidityParameters,
- } from "@/service/device";
- import {
- showFailToast,
- showSuccessToast,
- showConfirmDialog,
- showToast,
- } 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 router = useRouter();
- const deviceId = route.query.deviceId;
- const machineType = route.query.machineType;
- const deviceDetal = ref([]);
- const paramsTitle = ref("");
- const paramsList = ref([]);
- const comParams = ref([]);
- const paramName = ref([]);
- const checked = ref([]);
- const type = ref("");
- const isChange = ref(false);
- const howLong = ref([]);
- const interval = ref("");
- const equipmentName = route.query.name;
- const monitoringParams = ref([
- {
- key: "numberOne",
- label: "device.numberOneTm",
- unit: "device.degree",
- icon: "fire",
- },
- {
- key: "furnaceTm",
- label: "device.furnaceHeadTemperature",
- unit: "device.degree",
- icon: "fire",
- },
- {
- key: "candyGeneratorTm",
- label: "device.candyGeneratorTm",
- unit: "device.degree",
- icon: "fire",
- },
- {
- key: "cabinetTm",
- label: "device.temperatureInCabinet",
- unit: "device.degree",
- icon: "fire",
- },
- {
- key: "cabinetHd",
- label: "device.humidityInCabinet",
- unit: "device.humidity",
- icon: "weapp-nav",
- },
- {
- key: "outsideTm",
- label: "device.outsideTm",
- unit: "device.degree",
- icon: "fire",
- },
- {
- key: "outsideHd",
- label: "device.outsidehd",
- unit: "device.humidity",
- icon: "weapp-nav",
- },
- ]);
- const presets = ref([
- { type: 1, label: "device.winterParameters" },
- { type: 2, label: "device.summerParameters" },
- ]);
- // 初始化页面获取列表
- 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 checkBtn = (name) => {
- return name.includes("M");
- };
- // 获取设备列表数据
- const getDeviceDetalFun = async () => {
- const { data } = await getDeviceDetal({ id: deviceId });
- if (data.code === "00000") {
- deviceDetal.value = data.data;
- if (route.query.type != "2") {
- getParametersFun();
- }
- } else {
- showFailToast(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) => {
- comParams.value.push(paramItem.name);
- if (machineType == 0) {
- paramName.value.push(t("paramNames." + paramItem.name));
- }
- if (machineType == 1) {
- paramName.value.push(t("popParams." + paramItem.name));
- }
- if (paramItem.val === "1") {
- checked.value.push(true);
- } else {
- checked.value.push(false);
- }
- howLong.value.push(paramItem.val != null ? paramItem.val.length : 0);
- });
- } else {
- showToast(t("device.noParameterData"));
- }
- };
- const onUpdateParameters = (item, key, e) => {
- if (howLong.value[key] != e.length) {
- isChange.value = true;
- } else {
- isChange.value = false;
- }
- item.val = e;
- };
- // 更新参数值
- const updateParams = async (item, key) => {
- const params = {
- id: deviceId,
- name: item.name,
- val: item.val,
- };
- showConfirmDialog({
- title: t("device.tips"),
- message:
- t("device.isUpdate") +
- paramName.value[key] +
- t("device.to") +
- item.val +
- "?" +
- (isChange.value ? t("device.attention") : ""),
- })
- .then(async () => {
- const { data } = await updateParameters(params);
- if (data.code) {
- showSuccessToast(t("device.modificationSucceeded"));
- } else {
- showFailToast(data.message);
- }
- })
- .catch(() => {});
- };
- const onUpdateValue = (item, key) => {
- console.log(item);
- const params = {
- id: deviceId,
- name: item.name,
- val: item.val == "0" ? "1" : "0",
- };
- showConfirmDialog({
- title: t("device.tips"),
- message: t("device.content"),
- })
- .then(async () => {
- const { data } = await updateParameters(params);
- if (data.code) {
- checked.value[key] = !checked.value[key];
- showSuccessToast(t("device.modificationSucceeded"));
- setTimeout(() => {
- router.go(-1);
- }, 1000);
- } else {
- showFailToast(data.message);
- }
- })
- .catch(() => {
- // on cancel
- });
- };
- // 一键递增递减
- const updateInterval = (value) => {
- const params = {
- id: deviceId,
- name: "allUpdate",
- val: interval.value,
- };
- if (value === 0) {
- params.name = "allUpdate";
- params.val = interval.value;
- } else if (value === 1) {
- params.name = "winter";
- params.val = "winter";
- } else {
- params.name = "summer";
- params.val = "summer";
- }
- showConfirmDialog({
- title: t("device.tips"),
- message: t("device.isUpdate") + "?",
- })
- .then(async () => {
- const { data } = await humidityParameters(params);
- if (data.code) {
- showSuccessToast(t("device.modificationSucceeded"));
- } else {
- showFailToast(data.message);
- }
- })
- .catch(() => {});
- };
- return {
- deviceDetal,
- paramsTitle,
- paramsList,
- // getParamName,
- updateParams,
- paramName,
- checked,
- onUpdateValue,
- type,
- onUpdateParameters,
- interval,
- updateInterval,
- checkBtn,
- monitoringParams,
- presets,
- equipmentName,
- };
- },
- };
- </script>
- <style lang="less" scoped>
- @primary-color: #4d6add;
- @card-bg: #ffffff;
- @text-primary: #2d3436;
- @border-color: #e4e7ec;
- .parameter-adjustment {
- background: #f8fafb;
- min-height: 100vh;
- }
- .content-container {
- background: #f5f6fa;
- // padding: 16px;
- height: calc(100% - 50px);
- overflow: auto;
- overflow-x: hidden;
- }
- .device-card {
- background: @card-bg;
- border-radius: 12px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
- margin: 10px;
- padding: 16px;
- .device-header {
- display: flex;
- align-items: center;
- .icon {
- font-size: 18px;
- color: @primary-color;
- margin-right: 10px;
- }
- .device-name {
- font-size: 15px;
- color: #404d74;
- margin: 0;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
- .parameter-container {
- .monitoring-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
- gap: 12px;
- }
- .parameter-card {
- background: @card-bg;
- border-radius: 8px;
- margin: 0 10px;
- padding: 16px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
- display: flex;
- align-items: center;
- .param-icon {
- font-size: 24px;
- color: @primary-color;
- margin-right: 12px;
- }
- .param-label {
- font-size: 12px;
- color: #666;
- margin-bottom: 4px;
- }
- .param-value {
- font-size: 14px;
- color: @text-primary;
- font-weight: 500;
- span {
- color: #999;
- margin-left: 4px;
- }
- }
- }
- .control-group {
- background: @card-bg;
- border-radius: 12px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
- margin: 10px;
- .smart-field {
- // margin-bottom: 12px;
- :deep(.van-field__label) {
- color: @primary-color;
- font-weight: 500;
- }
- }
- .preset-buttons {
- display: grid;
- gap: 12px;
- // margin: 10px;
- padding: 15px;
- }
- .preset-btn {
- width: 100%;
- }
- }
- .parameter-list {
- .parameter-item {
- background: @card-bg;
- border-radius: 8px;
- margin: 10px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
- border: 1px solid #e4e7ec;
- transition: border-color 0.3s;
- &:focus-within {
- border-color: @primary-color;
- box-shadow: 0 0 0 2px rgba(77, 194, 148, 0.1);
- }
- :deep(.van-field__label) {
- font-weight: 500;
- }
- .switch-control {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 25px;
- .switch-label {
- flex: 1;
- padding-right: 16px;
- color: @primary-color;
- }
- }
- }
- }
- }
- .action-btn {
- background: @primary-color;
- border: none;
- transition: transform 0.2s;
- &:active {
- transform: scale(0.95);
- }
- }
- .safe-area {
- height: 50px;
- }
- :deep(.van-field__control) {
- /* 输入框容器样式 */
- border: 1px solid #e4e7ec;
- border-radius: 8px;
- padding: 5px;
- transition: border-color 0.3s;
- }
- :deep(.van-field) {
- /* 输入框容器样式 */
- border-radius: 8px;
- transition: border-color 0.3s;
- /* label文本居中对齐 */
- .van-field__label {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 120px;
- margin-right: 16px;
- color: @primary-color;
- font-weight: 500;
- /* 小屏幕适配 */
- @media (max-width: 480px) {
- width: 100px;
- font-size: 13px;
- }
- }
- /* 输入框内边距调整 */
- .van-field__body {
- padding: 8px 0;
- }
- /* 按钮样式微调 */
- .van-button {
- margin-left: 12px;
- }
- }
- @media (max-width: 480px) {
- .monitoring-grid {
- grid-template-columns: 1fr !important;
- }
- .parameter-card {
- padding: 12px !important;
- }
- }
- </style>
|