index.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <template>
  2. <div class="viewLogsPage flex-col">
  3. <s-header :name="$t('device.viewLogs')" :noback="false"></s-header>
  4. <div class="block2 flex-row justify-between">
  5. <div class="block3 flex-col"></div>
  6. <span class="info2">{{ $t('device.equipmentName') }}:{{ deviceDetail ? deviceDetail.name : '' }}</span>
  7. </div>
  8. <div class="wrap1 flex-col o-pt-15">
  9. <van-field v-model="logsTime" is-link readonly label="日期" placeholder="点击选择时间" @click="chooseTime()" />
  10. <van-popup v-model:show="showPicker" round position="bottom">
  11. <van-date-picker :min-date="minDate" :max-date="maxDate" @confirm="selectTime" @cancel="showPicker = false" />
  12. </van-popup>
  13. <van-cell-group>
  14. <van-field readonly v-model="message" rows="2" autosize label="使用教程" type="textarea" show-word-limit />
  15. </van-cell-group>
  16. <div class="button-container">
  17. <van-button round style="padding: 1em 2em;" type="primary" @click="uploadLogBtn">上传</van-button>
  18. <van-button round style="padding: 1em 2em;" type="primary" @click="queryLogBtn">查询</van-button>
  19. </div>
  20. <van-cell v-if="fileName != ''" :title="fileName" :clickable=true @click="downloadFile">
  21. <!-- 使用 right-icon 插槽来自定义右侧图标 -->
  22. <template #right-icon>
  23. <van-icon name="down" class="search-icon" />
  24. </template>
  25. </van-cell>
  26. </div>
  27. </div>
  28. </template>
  29. <script>
  30. import {
  31. onMounted,
  32. computed,
  33. ref
  34. } from 'vue';
  35. import sHeader from "@/components/SimpleHeader.vue";
  36. import {
  37. downloadLog,
  38. getDeviceDetal,
  39. uploadLog,
  40. queryLog
  41. } from "@/service/device";
  42. import { $M_ExportFile } from "@/common/js/utils";
  43. import {
  44. showFailToast,
  45. showToast
  46. } from "vant";
  47. import {
  48. useRoute
  49. } from "vue-router";
  50. import dateUtil from "@/utils/dateUtil";
  51. import { styleUrl } from '../../../common/js/utils';
  52. // import {useI18n} from "vue-i18n";
  53. export default ({
  54. components: {
  55. sHeader
  56. },
  57. setup() {
  58. // const { t } = useI18n();
  59. const route = useRoute();
  60. const deviceId = route.query.deviceId;
  61. const deviceDetail = ref(null);
  62. const showPicker = ref(false);
  63. const downloading = ref(false);
  64. const logsTime = ref(null);
  65. const fileName = ref(''); // 文件名
  66. const message = ref('选择日期点击上传,等待几秒后点击查询,找到文件点击下载到本地查看。');
  67. // const curDate = new Date(); // 获取当前时间日期
  68. // 计算最小日期为当前日期7天前
  69. const minDate = computed(() => {
  70. const minTimestamp = (new Date()).getTime() - 6 * 24 * 3600 * 1000;
  71. const minDate = dateUtil.formateDate(new Date(minTimestamp), "yyyy-MM-dd");
  72. return new Date(minDate);
  73. });
  74. // 计算最大日期为当前日期
  75. const maxDate = computed(() => {
  76. return new Date();
  77. });
  78. // 初始化页面获取列表
  79. onMounted(async () => {
  80. // 加载样式
  81. styleUrl('viewLogs');
  82. await getDeviceDetailFun();
  83. });
  84. // 选择时间
  85. const chooseTime = () => {
  86. showPicker.value = true;
  87. console.log(showPicker.value);
  88. };
  89. const selectTime = ({ selectedValues }) => {
  90. logsTime.value = selectedValues.join("-");
  91. showPicker.value = false;
  92. };
  93. const getDeviceDetailFun = async () => {
  94. const {
  95. data
  96. } = await getDeviceDetal({
  97. id: deviceId
  98. });
  99. if (data.code === '00000') {
  100. deviceDetail.value = data.data;
  101. } else {
  102. showFailToast(data.message);
  103. }
  104. }
  105. const downloadBtn = async () => {
  106. const pattern = /^\d{4}-\d{2}-\d{2}$/;
  107. if (logsTime.value == null) {
  108. showToast('请选择日期');
  109. return;
  110. }
  111. if (!pattern.test(logsTime.value)) {
  112. showToast('日期格式有误');
  113. return;
  114. }
  115. const formattedDate = logsTime.value.replace(/-/g, '');
  116. downloading.value = true;
  117. try {
  118. const {
  119. headers, data
  120. } = await downloadLog({
  121. equipmentId: deviceId,
  122. day: formattedDate,
  123. });
  124. console.log('请求成功', headers, data);
  125. $M_ExportFile(data, headers);
  126. } catch (error) {
  127. if (error.code === 'ECONNABORTED') {
  128. // 处理请求超时的错误
  129. console.error('请求超时:', error);
  130. showFailToast("请求超时");
  131. } else {
  132. // 处理其他请求错误
  133. console.error('请求失败:', error);
  134. showFailToast("请求失败");
  135. }
  136. } finally {
  137. downloading.value = false;
  138. }
  139. }
  140. const uploadLogBtn = async () => {
  141. const pattern = /^\d{4}-\d{2}-\d{2}$/;
  142. if (logsTime.value == '') {
  143. showToast('请选择日期');
  144. return;
  145. }
  146. if (!pattern.test(logsTime.value)) {
  147. showToast('日期格式有误');
  148. return;
  149. }
  150. const formattedDate = logsTime.value.replace(/-/g, '');
  151. const { data } = await uploadLog({
  152. equipmentId: deviceId,
  153. day: formattedDate,
  154. });
  155. if (data.code == '00000') {
  156. showToast('上传信号发送成功,请等待几秒后查询下载');
  157. } else {
  158. showFailToast(data.message);
  159. }
  160. }
  161. // 查询日志是否上传成功
  162. const queryLogBtn = async () => {
  163. if (logsTime.value == '') {
  164. showToast('请选择日期');
  165. return;
  166. }
  167. const pattern = /^\d{4}-\d{2}-\d{2}$/;
  168. if (!pattern.test(logsTime.value)) {
  169. showToast('日期格式有误');
  170. return;
  171. }
  172. const formattedDate = logsTime.value.replace(/-/g, '');
  173. const { data } = await queryLog({
  174. equipmentId: deviceId,
  175. day: formattedDate,
  176. });
  177. if (data.code == '00000') {
  178. // console.log(data.data);
  179. showToast("查询成功,点击下载")
  180. fileName.value = data.data.substring(4);
  181. } else {
  182. fileName.value = '';
  183. showToast("找不到文件,请重试上传或检查机器网络");
  184. }
  185. }
  186. const downloadFile = async () => {
  187. // 文件链接
  188. const fileUrl = 'http://qiniuyun.sunzee.com.cn/log/' + fileName.value;
  189. // 文件名
  190. const newFileName = fileName.value;
  191. try {
  192. const response = await fetch(fileUrl, {
  193. headers: {
  194. 'Cache-Control': 'no-store', // 禁用缓存
  195. 'Pragma': 'no-cache',
  196. }
  197. });
  198. console.log('response', response);
  199. // 将文件内容创建为Blob
  200. const fileBlob = await response.blob();
  201. // 创建一个下载链接
  202. const downloadLink = document.createElement('a');
  203. downloadLink.href = URL.createObjectURL(fileBlob);
  204. downloadLink.download = newFileName;
  205. // 模拟点击下载链接
  206. document.body.appendChild(downloadLink);
  207. downloadLink.click();
  208. // 清理添加的链接元素
  209. document.body.removeChild(downloadLink);
  210. } catch (error) {
  211. console.error('请求超时:', error);
  212. }
  213. }
  214. return {
  215. deviceDetail,
  216. downloadBtn,
  217. chooseTime,
  218. selectTime,
  219. showPicker,
  220. logsTime,
  221. minDate,
  222. maxDate,
  223. downloading,
  224. downloadFile,
  225. uploadLogBtn,
  226. queryLogBtn,
  227. fileName,
  228. message
  229. }
  230. },
  231. });
  232. </script>
  233. <style lang="less" scoped>
  234. @import "../../../common/style/common";
  235. .search-icon {
  236. font-size: 16px;
  237. line-height: inherit;
  238. }
  239. .button-container {
  240. display: flex;
  241. justify-content: center;
  242. align-items: center;
  243. margin-top: 20px;
  244. /* 根据需要添加上下边距 */
  245. margin-bottom: 30px;
  246. gap: 20px;
  247. }
  248. .van-button--primary {
  249. background-color: #2d87c8;
  250. border-color: #2d87c8;
  251. }
  252. </style>