paramsSetInfo.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  2. <!-- 设备参数调整 -->
  3. <div class="paramsSetPage flex-col">
  4. <s-header :name="paramsTitle" :noback="false"></s-header>
  5. <div class="paramsSetBox mod1 flex-col">
  6. <div class="wrap2 flex-col van-hairline--bottom">
  7. <div class="outer1 flex-row justify-between">
  8. <div class="block1 flex-col"></div>
  9. <span class="txt2">{{ $t('device.equipmentName') }}:{{ deviceDetal ? deviceDetal.name : "" }}</span>
  10. </div>
  11. </div>
  12. <!-- <van-divider :style="{ margin: '5px 16px' }" /> -->
  13. <div class="" v-if="type == '3'">
  14. <van-field :label="$t('device.numberOneTm')"
  15. :model-value="(deviceDetal.numberOne == null ? $t('device.noData') : deviceDetal.numberOne + $t('device.degree'))"
  16. readonly />
  17. <van-field :label="$t('device.furnaceHeadTemperature')"
  18. :model-value="(deviceDetal.furnaceTm == null ? $t('device.noData') : deviceDetal.furnaceTm + $t('device.degree'))"
  19. readonly />
  20. <van-field :label="$t('device.candyGeneratorTm')"
  21. :model-value="(deviceDetal.candyGeneratorTm == null ? $t('device.noData') : deviceDetal.candyGeneratorTm + $t('device.degree'))"
  22. readonly />
  23. <van-field :label="$t('device.temperatureInCabinet')"
  24. :model-value="(deviceDetal.cabinetTm == null ? $t('device.noData') : deviceDetal.cabinetTm + $t('device.degree'))"
  25. readonly />
  26. <van-field :label="$t('device.humidityInCabinet')"
  27. :model-value="(deviceDetal.cabinetHd == null ? $t('device.noData') : deviceDetal.cabinetHd + $t('device.humidity'))"
  28. readonly />
  29. <van-field :label="$t('device.outsideTm')"
  30. :model-value="(deviceDetal.outsideTm == null ? $t('device.noData') : deviceDetal.outsideTm + $t('device.degree'))"
  31. readonly />
  32. <van-field :label="$t('device.outsidehd')"
  33. :model-value="(deviceDetal.outsideHd == null ? $t('device.noData') : deviceDetal.outsideHd + $t('device.humidity'))"
  34. readonly />
  35. </div>
  36. <div v-if="type == '2'">
  37. <van-field :label="$t('device.humidityInCabinet')"
  38. :model-value="(deviceDetal.cabinetHd == null ? $t('device.noData') : deviceDetal.cabinetHd + $t('device.humidity'))"
  39. readonly />
  40. <van-field v-model="interval" :label="$t('device.increaseOrDecrease')" class="paramsList">
  41. <template #button>
  42. <van-button size="small" type="primary" class="updataButton" @click="updateInterval(0)">{{
  43. $t('device.submitUpdates') }}</van-button>
  44. </template>
  45. </van-field>
  46. <van-field :label="$t('device.winterParameters')" class="inputButton">
  47. <template #input>
  48. <van-button size="small" type="primary" class="updataButton" @click="updateInterval(1)">{{
  49. $t('device.submitUpdates') }}</van-button>
  50. </template>
  51. </van-field>
  52. <van-field :label="$t('device.summerParameters')" class="inputButton">
  53. <template #input>
  54. <van-button size="small" type="primary" class="updataButton" @click="updateInterval(2)">{{
  55. $t('device.submitUpdates') }}</van-button>
  56. </template>
  57. </van-field>
  58. </div>
  59. <div class="paramsList" v-for="(item, key) in paramsList" :key="key">
  60. <van-field :model-value="item.val" @update:model-value="onUpdateParameters(item, key, $event)"
  61. v-if="item.name != 'M502' && item.name != 'M506'" name="phone" type="tel" :label="paramName[key]">
  62. <template #button>
  63. <van-button size="small" type="primary" class="updataButton" @click="updateParams(item, key)">{{
  64. $t('device.submitUpdates') }}</van-button>
  65. </template>
  66. </van-field>
  67. <div class="flex-row" v-else>
  68. <span class="txt3 o-pl-15 o-mtb-18" v-if="item.name != 'M502'">{{ paramName[key] }}
  69. </span>
  70. <van-switch v-if="item.name != 'M502'" class="o-mt-8" :model-value="checked[key]"
  71. @update:model-value="onUpdateValue(item, key)">
  72. </van-switch>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </template>
  78. <script>
  79. import { onMounted, ref } from "vue";
  80. import sHeader from "@/components/SimpleHeader";
  81. import { useRoute } from "vue-router";
  82. import { getDeviceDetal, getParameters, updateParameters, humidityParameters } from "@/service/device";
  83. import { showFailToast, showSuccessToast, showConfirmDialog, showToast } from "vant";
  84. import { useI18n } from 'vue-i18n';
  85. import { styleUrl } from "../../../common/js/utils";
  86. export default {
  87. components: { sHeader },
  88. setup() {
  89. const { t } = useI18n();
  90. const route = useRoute();
  91. const deviceId = route.query.deviceId;
  92. const deviceDetal = ref([]);
  93. const paramsTitle = ref("");
  94. const paramsList = ref([]);
  95. const comParams = ref([]);
  96. const paramName = ref([]);
  97. const checked = ref([]);
  98. const type = ref("");
  99. const isChange = ref(false);
  100. const howLong = ref([]);
  101. const interval = ref("");
  102. // 初始化页面获取列表
  103. onMounted(async () => {
  104. // 加载样式
  105. styleUrl('paramsSet');
  106. type.value = route.query.type;
  107. if (route.query.type === "0") {
  108. paramsTitle.value = t('device.generalParameterConfiguration');
  109. }
  110. if (route.query.type === "1") {
  111. paramsTitle.value = t('device.advancedParameterConfiguration');
  112. }
  113. if (route.query.type === "2") {
  114. paramsTitle.value = t('device.debuggingParameterConfiguration');
  115. }
  116. if (route.query.type === "3") {
  117. paramsTitle.value = t('device.humidityParameterConfiguration');
  118. }
  119. getDeviceDetalFun();
  120. });
  121. // 获取设备列表数据
  122. const getDeviceDetalFun = async () => {
  123. const { data } = await getDeviceDetal({ id: deviceId });
  124. if (data.code === "00000") {
  125. deviceDetal.value = data.data;
  126. if (route.query.type != "2") {
  127. getParametersFun();
  128. }
  129. } else {
  130. showFailToast(data.message);
  131. }
  132. };
  133. // 获取参数列表
  134. const getParametersFun = async () => {
  135. paramsList.value = [];
  136. const params = {
  137. id: deviceId,
  138. status: route.query.type,
  139. clientId: deviceDetal.value.clientId,
  140. };
  141. const { data } = await getParameters(params);
  142. if (data.code) {
  143. paramsList.value = data.data;
  144. paramsList.value.forEach((paramItem) => {
  145. // console.log("paramItem:", paramItem);
  146. comParams.value.push(paramItem.name);
  147. paramName.value.push(t("paramNames." + paramItem.name));
  148. if (paramItem.val === '1') {
  149. checked.value.push(true);
  150. } else {
  151. checked.value.push(false);
  152. }
  153. howLong.value.push(paramItem.val != null ? paramItem.val.length : 0);
  154. })
  155. } else {
  156. showToast(t('device.noParameterData'));
  157. }
  158. };
  159. const onUpdateParameters = (item, key, e) => {
  160. // console.log(e);
  161. // console.log(howLong.value[key]);
  162. if (howLong.value[key] != e.length) {
  163. isChange.value = true;
  164. } else {
  165. isChange.value = false;
  166. }
  167. item.val = e;
  168. }
  169. // 更新参数值
  170. const updateParams = async (item, key) => {
  171. const params = {
  172. id: deviceId,
  173. name: item.name,
  174. val: item.val,
  175. };
  176. showConfirmDialog({
  177. title: t('device.tips'),
  178. message: t('device.isUpdate') + paramName.value[key] + t('device.to') + item.val + '?' + (isChange.value ? t('device.attention') : ''),
  179. }).then(async () => {
  180. const { data } = await updateParameters(params);
  181. if (data.code) {
  182. showSuccessToast(t('device.modificationSucceeded'));
  183. } else {
  184. showFailToast(data.message);
  185. }
  186. }).catch(() => {
  187. })
  188. }
  189. const onUpdateValue = (item, key) => {
  190. console.log(item);
  191. const params = {
  192. id: deviceId,
  193. name: item.name,
  194. val: item.val == '0' ? '1' : '0',
  195. };
  196. showConfirmDialog({
  197. title: t('device.tips'),
  198. message: t('device.content'),
  199. }).then(async () => {
  200. const { data } = await updateParameters(params);
  201. if (data.code) {
  202. checked.value[key] = !checked.value[key];
  203. showSuccessToast(t('device.modificationSucceeded'));
  204. } else {
  205. showFailToast(data.message);
  206. }
  207. }).catch(() => {
  208. // on cancel
  209. });
  210. };
  211. // 一键递增递减
  212. const updateInterval = (value) => {
  213. const params = {
  214. id: deviceId,
  215. name: "allUpdate",
  216. val: interval.value,
  217. };
  218. if (value === 0) {
  219. params.name = "allUpdate";
  220. params.val = interval.value;
  221. } else if (value === 1) {
  222. params.name = "winter";
  223. params.val = "winter";
  224. } else {
  225. params.name = "summer";
  226. params.val = "summer";
  227. }
  228. showConfirmDialog({
  229. title: t('device.tips'),
  230. message: t('device.isUpdate') + '?',
  231. }).then(async () => {
  232. const { data } = await humidityParameters(params);
  233. if (data.code) {
  234. showSuccessToast(t('device.modificationSucceeded'));
  235. } else {
  236. showFailToast(data.message);
  237. }
  238. }).catch(() => {
  239. })
  240. }
  241. return {
  242. deviceDetal,
  243. paramsTitle,
  244. paramsList,
  245. // getParamName,
  246. updateParams,
  247. paramName,
  248. checked,
  249. onUpdateValue,
  250. type,
  251. onUpdateParameters,
  252. interval,
  253. updateInterval
  254. };
  255. },
  256. };
  257. </script>
  258. <style lang="less" scoped>
  259. @import "../../../common/style/common";
  260. .paramsValue {
  261. margin: 0 40px;
  262. }
  263. </style>