index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
  1. <template>
  2. <!-- 设置闹钟 -->
  3. <div class="alarm-config-container">
  4. <s-header :name="$t('device.setAlarm')" :noback="false" />
  5. <!-- 主表单区域 -->
  6. <div class="config-card">
  7. <!-- 设备选择 -->
  8. <van-field v-model="equipmentIdsText" is-link readonly center :label="$t('device.equipmentName')"
  9. :placeholder="$t('device.selectDevice')" class="form-field" @click="equipmentShow = true">
  10. <template #left-icon>
  11. <van-icon name="cluster-o" class="field-icon" />
  12. </template>
  13. </van-field>
  14. <!-- 时间选择 -->
  15. <van-field v-model="hour" is-link readonly center :label="$t('device.selectTime')"
  16. :placeholder="$t('device.selectTime')" class="form-field" @click="currentTimeShow = true">
  17. <template #left-icon>
  18. <van-icon name="clock-o" class="field-icon" />
  19. </template>
  20. </van-field>
  21. <!-- 闹钟类型 -->
  22. <van-field v-model="alarmClockTypeText" is-link readonly center :label="$t('device.alarmTypeLabel')"
  23. :placeholder="$t('device.alarmTypePlaceholder')" class="form-field" @click="alarmClockTypeShow = true">
  24. <template #left-icon>
  25. <van-icon name="flag-o" class="field-icon" />
  26. </template>
  27. </van-field>
  28. <!-- 重复周期 -->
  29. <div class="repeat-section">
  30. <h3 class="section-title">
  31. <van-icon name="replay" class="title-icon" />
  32. {{ $t("device.selectTheNumberOfAlarmClockRepetitions") }}
  33. </h3>
  34. <div class="quick-select">
  35. <van-checkbox v-model="checkedAll" shape="square" @click="checkedAllClk">
  36. {{ $t("alarmClockSet.checkedAll") }}
  37. </van-checkbox>
  38. </div>
  39. <div class="day-grid">
  40. <div v-for="(item, index) in weekDayList" :key="index" class="day-item"
  41. :class="{ active: selectList.includes(item.value) }" @click="selectDayClk(item.value)">
  42. {{ item.name }}
  43. </div>
  44. </div>
  45. </div>
  46. <!-- 闹钟名称 -->
  47. <van-field v-model="alarmClockName" center :label="$t('device.alarmNameLabel')"
  48. :placeholder="$t('device.alarmNamePlaceholder')" class="form-field">
  49. <template #left-icon>
  50. <van-icon name="edit" class="field-icon" />
  51. </template>
  52. </van-field>
  53. <!-- 立即生效 -->
  54. <div class="switch-section">
  55. <span class="switch-label">
  56. <van-icon name="certificate" class="switch-icon" />
  57. {{ $t("device.effectiveImmediately") }}
  58. </span>
  59. <van-switch v-model="checked" size="18px" />
  60. </div>
  61. </div>
  62. <!-- 提交按钮 -->
  63. <div class="action-bar">
  64. <van-button round type="primary" class="submit-btn" @click="submitSet">
  65. <van-icon name="passed" class="btn-icon" />
  66. {{ $t("device.submitSettings") }}
  67. </van-button>
  68. </div>
  69. <!-- 弹出层(保持原有逻辑,优化样式) -->
  70. <van-popup v-model:show="alarmClockTypeShow" round position="bottom" class="custom-popup">
  71. <van-cascader v-model="alarmClockType" :title="$t('device.alarmTypePlaceholder')" :options="alarmClockTypeOptions"
  72. active-color="#2c87c8" @close="alarmClockTypeShow = false" @finish="alarmClockTypeFinish" />
  73. </van-popup>
  74. <van-popup v-model:show="currentTimeShow" round position="bottom" class="custom-popup">
  75. <van-time-picker v-model="currentTime" :title="$t('device.clickToSelectTheTime')" @confirm="onConfirm"
  76. @cancel="currentTimeShow = false" />
  77. </van-popup>
  78. <van-popup v-model:show="equipmentShow" position="bottom">
  79. <div class="van-picker__toolbar">
  80. <button type="button" class="van-picker__cancel" style="margin: 0 0.5em" @click="equipmentShow = false">
  81. {{ $t("device.cancel") }}
  82. </button>
  83. <div class="van-ellipsis van-picker__title">
  84. {{ $t("device.selectDevice") }}
  85. </div>
  86. <button type="button" class="van-picker__confirm" style="margin: 0 0.5em" @click="equipmentShow = false">
  87. {{ $t("device.confirm") }}
  88. </button>
  89. </div>
  90. <div class="checkbox-con" style="max-height: 264px; overflow-y: auto">
  91. <van-checkbox-group v-model="equipmentIds" @change="equipemntIdsChange" ref="checkboxGroup">
  92. <van-cell-group>
  93. <van-cell v-for="(item, index) in equipmentList" clickable :key="index" :title="item.label"
  94. @click="equipementCheckItem(item.value)">
  95. <template #right-icon>
  96. <van-checkbox :name="item.value" @click.stop />
  97. </template>
  98. </van-cell>
  99. </van-cell-group>
  100. </van-checkbox-group>
  101. </div>
  102. </van-popup>
  103. </div>
  104. </template>
  105. <script>
  106. import { showSuccessToast, showFailToast, showToast } from "vant";
  107. import { onMounted, ref, watch } from "vue";
  108. import sHeader from "@/components/SimpleHeader";
  109. import { getLoginUser } from "@/common/js/utils";
  110. import {
  111. getListEquipment,
  112. addAlaramClock,
  113. getAlaramClock,
  114. alaramClockUpdate,
  115. } from "@/service/device";
  116. import { useRoute, useRouter } from "vue-router";
  117. import { useI18n } from "vue-i18n";
  118. export default {
  119. name: "alarm-clock-set",
  120. components: { sHeader },
  121. setup() {
  122. const { t } = useI18n();
  123. const onConfirm = ({ selectedValues }) => {
  124. currentTime.value = selectedValues;
  125. currentTimeShow.value = false;
  126. hour.value = selectedValues.join(':');
  127. };
  128. // 周
  129. const weekDayList = ref([
  130. {
  131. name: t("alarmClockSet.sunday"),
  132. value: '7',
  133. },
  134. {
  135. name: t("alarmClockSet.monday"),
  136. value: '1',
  137. },
  138. {
  139. name: t("alarmClockSet.tuesday"),
  140. value: '2',
  141. },
  142. {
  143. name: t("alarmClockSet.wednesday"),
  144. value: '3',
  145. },
  146. {
  147. name: t("alarmClockSet.thursday"),
  148. value: '4',
  149. },
  150. {
  151. name: t("alarmClockSet.friday"),
  152. value: '5',
  153. },
  154. {
  155. name: t("alarmClockSet.saturday"),
  156. value: '6',
  157. },
  158. ]);
  159. // 选中的周
  160. const selectList = ref(['1', '2', '3', '4', '5', '6', '7']);
  161. // 点击周
  162. const selectDayClk = (val) => {
  163. // 如果已经选过了,则需要取消
  164. if (selectList.value.includes(val)) {
  165. const idx = selectList.value.indexOf(val);
  166. selectList.value.splice(idx, 1);
  167. } else {
  168. selectList.value.push(val);
  169. }
  170. };
  171. // 全选
  172. const checkedAll = ref(true);
  173. const checkedAllClk = () => {
  174. checkedAll.value = !checkedAll.value;
  175. if (!checkedAll.value) {
  176. selectList.value = ['1', '2', '3', '4', '5', '6', '7'];
  177. } else {
  178. selectList.value = [];
  179. }
  180. };
  181. // 监听选中的周
  182. watch(() => selectList, (newVal) => {
  183. if (newVal.value.length === 7) {
  184. checkedAll.value = true;
  185. } else {
  186. checkedAll.value = false;
  187. }
  188. }, { immediate: true, deep: true });
  189. const user = getLoginUser();
  190. const route = useRoute();
  191. const router = useRouter();
  192. const equipmentIds = ref([]);
  193. const equipmentIdsText = ref("");
  194. const equipmentShow = ref(false);
  195. const equipmentList = ref([]);
  196. // 初始化页面获取列表
  197. onMounted(async () => {
  198. if (route.query.deviceId) {
  199. equipmentIds.value.push(route.query.deviceId);
  200. }
  201. if (route.query.alarmId) {
  202. getAlaramClockFun();
  203. }
  204. getListEquipmentFun();
  205. });
  206. let oldAlarmClock = {};
  207. // 闹钟回显
  208. const getAlaramClockFun = async () => {
  209. const { data } = await getAlaramClock({ id: route.query.alarmId });
  210. if (data.code) {
  211. oldAlarmClock = data.data;
  212. // 回显时间
  213. const hourVal = data.data.hour.slice(0, 5).split(":");
  214. currentTime.value = hourVal;
  215. hour.value = data.data.hour.slice(0, 5);
  216. alarmClockName.value = data.data.name;
  217. checked.value = data.data.status === "1";
  218. alarmClockType.value = data.data.type;
  219. // 选中的周
  220. selectList.value = data.data.week.split(',');
  221. equipmentIds.value = data.data.equipmentIds.split(",");
  222. equipmentIds.value = equipmentIds.value.filter((item) => item !== "");
  223. isEquipemntIdsText();
  224. // 回显闹钟类型
  225. const statusTxt = alarmClockTypeOptions.value.filter(
  226. (item) => item.value === data.data.type
  227. );
  228. alarmClockTypeText.value = statusTxt[0]["text"];
  229. } else {
  230. showFailToast(data.message);
  231. }
  232. };
  233. // 获取旗下机器
  234. const getListEquipmentFun = async () => {
  235. const { data } = await getListEquipment({ adminId: user.id });
  236. if (data.code === "00000") {
  237. equipmentList.value = [
  238. { label: t("device.allMachines"), value: "All" },
  239. ].concat(
  240. data.data.map((item, index) => {
  241. return { label: item.name || index, value: item.id.toString() };
  242. })
  243. );
  244. isEquipemntIdsText();
  245. } else {
  246. showFailToast(data.message);
  247. }
  248. };
  249. // 设备多选
  250. const equipementCheckItem = (index) => {
  251. const list = equipmentIds.value.filter((v) => v === index);
  252. if (list.length > 0) {
  253. equipmentIds.value = equipmentIds.value.filter((v) => v !== index);
  254. } else {
  255. equipmentIds.value.push(index);
  256. }
  257. isAllEquipement();
  258. };
  259. const equipemntIdsChange = (event) => {
  260. const isAll = equipmentIds.value.filter((v) => v === "All");
  261. if (
  262. isAll.length > 0 &&
  263. equipmentIds.value.length !== equipmentList.value.length
  264. ) {
  265. equipmentIds.value = [];
  266. isAllEquipement();
  267. } else {
  268. equipmentIds.value = event;
  269. isEquipemntIdsText();
  270. }
  271. };
  272. const isEquipemntIdsText = () => {
  273. const equipmentLabelList = [];
  274. const isAll = equipmentIds.value.filter((v) => v === "All");
  275. if (isAll.length > 0) {
  276. equipmentLabelList.push(t("device.allMachines"));
  277. } else {
  278. equipmentIds.value.forEach((item) => {
  279. const equipment = equipmentList.value.filter((v) => v.value === item);
  280. if (equipment.length > 0) {
  281. equipmentLabelList.push(equipment[0].label);
  282. }
  283. });
  284. }
  285. equipmentIdsText.value = equipmentLabelList.join(",");
  286. };
  287. const isAllEquipement = () => {
  288. const isAll = equipmentIds.value.filter((v) => v === "All");
  289. if (isAll.length > 0) {
  290. equipmentIds.value = equipmentList.value.map((item) => {
  291. return item.value;
  292. });
  293. }
  294. isEquipemntIdsText();
  295. };
  296. const hour = ref("");
  297. const currentTime = ref(['12', '00']);
  298. const currentTimeShow = ref(false);
  299. const alarmClockTypeText = ref("");
  300. const alarmClockType = ref("");
  301. const alarmClockTypeShow = ref(false);
  302. const alarmClockTypeOptions = ref([
  303. { text: t("device.furnaceHeadOn"), value: "0" },
  304. { text: t("device.furnaceHeadClosed"), value: "1" },
  305. { text: t("device.startSleep"), value: "2" },
  306. { text: t("device.endSleep"), value: "3" },
  307. ]);
  308. const alarmClockTypeFinish = ({ selectedOptions }) => {
  309. alarmClockTypeShow.value = false;
  310. alarmClockTypeText.value = selectedOptions
  311. .map((option) => option.text)
  312. .join("/");
  313. };
  314. const alarmClockName = ref("");
  315. const checked = ref(false);
  316. const submitSet = async () => {
  317. const equipmentIdsList = equipmentIds.value.filter((v) => v !== "All");
  318. // 选中的周
  319. const weekParams = selectList.value.join(',');
  320. const params = {
  321. adminId: user.id,
  322. equipmentIds: equipmentIdsList.join(","),
  323. hour: hour.value,
  324. name: alarmClockName.value,
  325. status: checked.value ? "1" : "0",
  326. type: alarmClockType.value,
  327. week: weekParams,
  328. };
  329. // 校验
  330. if (!params.equipmentIds) {
  331. showToast(t("device.selectDevice"));
  332. return;
  333. } else if (!params.hour) {
  334. showToast(t("device.selectTime"));
  335. return;
  336. } else if (!params.week) {
  337. showToast(t("device.repetitionsPlaceholder"));
  338. return;
  339. } else if (!params.type) {
  340. showToast(t("device.alarmTypePlaceholder"));
  341. return;
  342. }
  343. if (route.query.alarmId) {
  344. params.id = oldAlarmClock.id;
  345. }
  346. const { data } = route.query.deviceId
  347. ? await addAlaramClock(params)
  348. : await alaramClockUpdate(params);
  349. if (data.code) {
  350. route.query.deviceId
  351. ? showSuccessToast(t("device.successfullyAddedAlarmClock"))
  352. : showSuccessToast(t("device.modificationSucceeded"));
  353. setTimeout(() => {
  354. router.back();
  355. }, 1000);
  356. } else {
  357. showFailToast(data.message);
  358. }
  359. };
  360. return {
  361. equipmentIds,
  362. equipmentIdsText,
  363. equipmentShow,
  364. equipmentList,
  365. equipementCheckItem,
  366. equipemntIdsChange,
  367. hour,
  368. currentTime,
  369. currentTimeShow,
  370. alarmClockTypeText,
  371. alarmClockTypeShow,
  372. alarmClockType,
  373. alarmClockTypeOptions,
  374. alarmClockTypeFinish,
  375. alarmClockName,
  376. checked,
  377. submitSet,
  378. weekDayList,
  379. selectList,
  380. selectDayClk,
  381. checkedAll,
  382. checkedAllClk,
  383. onConfirm,
  384. };
  385. },
  386. };
  387. </script>
  388. <style lang="less" scoped>
  389. .alarm-config-container {
  390. --card-bg: #ffffff;
  391. --border-color: #ebedf0;
  392. --primary-color: #2c87c8;
  393. --text-primary: #323233;
  394. --text-secondary: #969799;
  395. background: #f7f8fa;
  396. min-height: 100vh;
  397. .config-card {
  398. margin: 16px;
  399. padding: 16px;
  400. background: var(--card-bg);
  401. border-radius: 12px;
  402. box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  403. .form-field {
  404. margin: 8px 0;
  405. padding: 12px 16px;
  406. background: #f8f9fa;
  407. border-radius: 8px;
  408. :deep(.van-field__label) {
  409. width: 6em;
  410. color: var(--text-primary);
  411. }
  412. .field-icon {
  413. font-size: 18px;
  414. margin-right: 12px;
  415. color: var(--primary-color);
  416. }
  417. }
  418. }
  419. .repeat-section {
  420. margin: 20px 0;
  421. .section-title {
  422. display: flex;
  423. align-items: center;
  424. font-size: 15px;
  425. color: var(--text-primary);
  426. margin: 0 0 16px 0;
  427. .title-icon {
  428. margin-right: 8px;
  429. color: var(--primary-color);
  430. }
  431. }
  432. .quick-select {
  433. margin-bottom: 12px;
  434. :deep(.van-checkbox) {
  435. --van-checkbox-size: 18px;
  436. }
  437. }
  438. .day-grid {
  439. display: grid;
  440. grid-template-columns: repeat(4, 1fr);
  441. gap: 10px;
  442. .day-item {
  443. padding: 10px;
  444. text-align: center;
  445. border-radius: 6px;
  446. background: #f8f9fa;
  447. color: var(--text-secondary);
  448. transition: all 0.2s;
  449. &.active {
  450. background: var(--primary-color);
  451. color: white;
  452. font-weight: 500;
  453. }
  454. }
  455. }
  456. }
  457. .switch-section {
  458. display: flex;
  459. align-items: center;
  460. gap: 30px; // 控制文字和按钮间距
  461. padding: 13px 15px;
  462. background: #f8f9fa;
  463. border-radius: 8px;
  464. margin-bottom: 10px;
  465. .switch-label {
  466. display: flex;
  467. align-items: center;
  468. color: var(--text-primary);
  469. .switch-icon {
  470. font-size: 20px;
  471. margin-right: 15px;
  472. color: var(--primary-color);
  473. }
  474. }
  475. }
  476. .action-bar {
  477. padding: 0 16px 32px;
  478. .submit-btn {
  479. width: 100%;
  480. height: 44px;
  481. font-size: 16px;
  482. letter-spacing: 1px;
  483. .btn-icon {
  484. font-size: 16px;
  485. margin-right: 2px;
  486. vertical-align: -2px;
  487. }
  488. }
  489. }
  490. }
  491. </style>