diff --git a/src/api/api/electricity.ts b/src/api/api/electricity.ts index 6143365..dc6d283 100644 --- a/src/api/api/electricity.ts +++ b/src/api/api/electricity.ts @@ -30,3 +30,42 @@ method: 'post', }) } +// 用电用气用热导出 +export function templateExport(params: object) { + return request({ + url: '/deviceCollectionLog/export', + method: 'get', + params, + responseType: 'blob', + }) +} +// 用电用气用热导入 +export function templateImport(data: object) { + return request({ + url: '/deviceCollectionLog/import', + method: 'get', + data, + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) +} +// 用电用气用热模板下载 +export function templateDownload(type: string) { + if (type === '0') { + // 用电 + return request({ + url: '/static/electricity.xlsx', + method: 'get', + responseType: 'blob', + }) + } + else { + // 用热 用气 + return request({ + url: '/static/heat.xlsx', + method: 'get', + responseType: 'blob', + }) + } +} diff --git a/src/api/api/electricity.ts b/src/api/api/electricity.ts index 6143365..dc6d283 100644 --- a/src/api/api/electricity.ts +++ b/src/api/api/electricity.ts @@ -30,3 +30,42 @@ method: 'post', }) } +// 用电用气用热导出 +export function templateExport(params: object) { + return request({ + url: '/deviceCollectionLog/export', + method: 'get', + params, + responseType: 'blob', + }) +} +// 用电用气用热导入 +export function templateImport(data: object) { + return request({ + url: '/deviceCollectionLog/import', + method: 'get', + data, + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) +} +// 用电用气用热模板下载 +export function templateDownload(type: string) { + if (type === '0') { + // 用电 + return request({ + url: '/static/electricity.xlsx', + method: 'get', + responseType: 'blob', + }) + } + else { + // 用热 用气 + return request({ + url: '/static/heat.xlsx', + method: 'get', + responseType: 'blob', + }) + } +} diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg new file mode 100644 index 0000000..16c5094 --- /dev/null +++ b/src/assets/icons/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/api/api/electricity.ts b/src/api/api/electricity.ts index 6143365..dc6d283 100644 --- a/src/api/api/electricity.ts +++ b/src/api/api/electricity.ts @@ -30,3 +30,42 @@ method: 'post', }) } +// 用电用气用热导出 +export function templateExport(params: object) { + return request({ + url: '/deviceCollectionLog/export', + method: 'get', + params, + responseType: 'blob', + }) +} +// 用电用气用热导入 +export function templateImport(data: object) { + return request({ + url: '/deviceCollectionLog/import', + method: 'get', + data, + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) +} +// 用电用气用热模板下载 +export function templateDownload(type: string) { + if (type === '0') { + // 用电 + return request({ + url: '/static/electricity.xlsx', + method: 'get', + responseType: 'blob', + }) + } + else { + // 用热 用气 + return request({ + url: '/static/heat.xlsx', + method: 'get', + responseType: 'blob', + }) + } +} diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg new file mode 100644 index 0000000..16c5094 --- /dev/null +++ b/src/assets/icons/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/import.svg b/src/assets/icons/import.svg new file mode 100644 index 0000000..d66cfdc --- /dev/null +++ b/src/assets/icons/import.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/api/api/electricity.ts b/src/api/api/electricity.ts index 6143365..dc6d283 100644 --- a/src/api/api/electricity.ts +++ b/src/api/api/electricity.ts @@ -30,3 +30,42 @@ method: 'post', }) } +// 用电用气用热导出 +export function templateExport(params: object) { + return request({ + url: '/deviceCollectionLog/export', + method: 'get', + params, + responseType: 'blob', + }) +} +// 用电用气用热导入 +export function templateImport(data: object) { + return request({ + url: '/deviceCollectionLog/import', + method: 'get', + data, + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) +} +// 用电用气用热模板下载 +export function templateDownload(type: string) { + if (type === '0') { + // 用电 + return request({ + url: '/static/electricity.xlsx', + method: 'get', + responseType: 'blob', + }) + } + else { + // 用热 用气 + return request({ + url: '/static/heat.xlsx', + method: 'get', + responseType: 'blob', + }) + } +} diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg new file mode 100644 index 0000000..16c5094 --- /dev/null +++ b/src/assets/icons/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/import.svg b/src/assets/icons/import.svg new file mode 100644 index 0000000..d66cfdc --- /dev/null +++ b/src/assets/icons/import.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/utils/download.ts b/src/utils/download.ts new file mode 100644 index 0000000..d70f539 --- /dev/null +++ b/src/utils/download.ts @@ -0,0 +1,149 @@ +/** + * 下载本地图片 href为 127.0.0.1/xxxx + * @param href 图片地址 + * @param name 图片名称 + */ +function downloadImg(href: string, name: string) { + const eleLink = document.createElement('a') + eleLink.download = name + eleLink.href = href + eleLink.click() + eleLink.remove() +} + +/** + * 下载文件 + * @param file 文件对象 + * @param name 图片名称 + */ +export function downloadFile(file: File, name: string) { + console.log(new Blob([file]), 'new Blob([file])') + const objectUrl = URL.createObjectURL(new Blob([file])) + const link = document.createElement('a') + link.download = name + link.href = objectUrl + link.click() + link.remove() + window.URL.revokeObjectURL(link.href) +} +// 各种文件类型的type +export const fileType: { [key: string]: string } = { + pdf: 'application/pdf', + doc: 'application/doc', + docx: 'application/docx', + excel: 'application/excel', + ppt: 'application/vnd.ms-powerpoint', + dir: 'application/x-director', + js: 'application/x-javascript', + swf: 'application/x-shockwave-flash', + xhtml: 'application/xhtml+xml', + xht: 'application/xhtml+xml', + zip: 'application/zip', + mid: 'audio/midi', + midi: 'audio/midi', + mp3: 'audio/mpeg', + rm: 'audio/x-pn-realaudio', + rpm: 'audio/x-pn-realaudio-plugin', + wav: 'audio/x-wav', + bmp: 'image/bmp', + gif: 'image/gif', + jpeg: 'image/jpeg', + jpg: 'image/jpeg', + png: 'image/png', + css: 'text/css', + html: 'text/html', + htm: 'text/html', + txt: 'text/plain', + xsl: 'text/xml', + xml: 'text/xml', + mpeg: 'video/mpeg', + mpg: 'video/mpeg', + avi: 'video/x-msvideo', + movie: 'video/x-sgi-movie', +} +/** + * 将网络文件地址转化为文件对象 + * @param url 文件地址 + * @param fileName 文件名称 + */ +export function getFileFromUrl(url: string, fileName: string) { + return new Promise((resolve, reject) => { + var blob = null + var xhr = new XMLHttpRequest() + xhr.open('GET', url) + const urlFileType = url.split('.')[url.split('.').length - 1] + xhr.setRequestHeader('Accept', fileType[urlFileType]) + xhr.responseType = 'blob' + // 加载时处理 + xhr.onload = () => { + // 获取返回结果 + blob = xhr.response + const file = new File([blob], fileName, { type: fileType[urlFileType] }) + // 返回结果 + resolve(file) + } + xhr.onerror = (e) => { + reject(e) + } + // 发送 + xhr.send() + }) +} +/** + * 将网络地址转化为 blob地址 并下载 + * @param url 文件地址 + * @param fileName 文件名称 + */ +export function urlToBlob(url: string, name: string) { + const xhr = new XMLHttpRequest() + xhr.open('get', url) + xhr.responseType = 'blob' // ""|"text"-字符串 "blob"-Blob对象 "arraybuffer"-ArrayBuffer对象 + xhr.onload = function () { + const path = URL.createObjectURL(xhr.response) + const link = document.createElement('a') + link.download = name + link.href = path + link.click() + link.remove() + window.URL.revokeObjectURL(link.href) + } + xhr.send() +} + +/** + * 下载文件 各种文件 + * @param url 网络文件地址 + * @param name 文件名 + */ +export function download(url: string, name: string) { + // 下载图片 + const photo = ['jpg', 'jpeg', 'png'] + const fileType = url.split('.')[url.split('.').length - 1] + console.log(fileType, 'fileType') + if (photo.includes(fileType)) { + // 图片 将服务器图片地址转化成本地地址 + const image = new Image() + image.setAttribute('crossOrigin', 'anonymous') + image.src = url + image.onload = () => { + const canvas = document.createElement('canvas') + canvas.width = image.width + canvas.height = image.height + const ctx = canvas.getContext('2d'); + (ctx as CanvasRenderingContext2D).drawImage(image, 0, 0, image.width, image.height) + canvas.toBlob((blob) => { + const url = URL.createObjectURL(blob as Blob) + downloadImg(url, name) + // 用完释放URL对象 + URL.revokeObjectURL(url) + }) + } + } + else { + // 预览一般都是用的a标签，文件下载用的window.open + // 1.pdf文件路径放到window.open里面，点击是进行在线预览 + // 2.word文件和excel文件通过a标签打开时，是直接下载了 + // 将网络地址转化为 blob地址 并下载 + urlToBlob(url, name) + } +} diff --git a/src/api/api/electricity.ts b/src/api/api/electricity.ts index 6143365..dc6d283 100644 --- a/src/api/api/electricity.ts +++ b/src/api/api/electricity.ts @@ -30,3 +30,42 @@ method: 'post', }) } +// 用电用气用热导出 +export function templateExport(params: object) { + return request({ + url: '/deviceCollectionLog/export', + method: 'get', + params, + responseType: 'blob', + }) +} +// 用电用气用热导入 +export function templateImport(data: object) { + return request({ + url: '/deviceCollectionLog/import', + method: 'get', + data, + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) +} +// 用电用气用热模板下载 +export function templateDownload(type: string) { + if (type === '0') { + // 用电 + return request({ + url: '/static/electricity.xlsx', + method: 'get', + responseType: 'blob', + }) + } + else { + // 用热 用气 + return request({ + url: '/static/heat.xlsx', + method: 'get', + responseType: 'blob', + }) + } +} diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg new file mode 100644 index 0000000..16c5094 --- /dev/null +++ b/src/assets/icons/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/import.svg b/src/assets/icons/import.svg new file mode 100644 index 0000000..d66cfdc --- /dev/null +++ b/src/assets/icons/import.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/utils/download.ts b/src/utils/download.ts new file mode 100644 index 0000000..d70f539 --- /dev/null +++ b/src/utils/download.ts @@ -0,0 +1,149 @@ +/** + * 下载本地图片 href为 127.0.0.1/xxxx + * @param href 图片地址 + * @param name 图片名称 + */ +function downloadImg(href: string, name: string) { + const eleLink = document.createElement('a') + eleLink.download = name + eleLink.href = href + eleLink.click() + eleLink.remove() +} + +/** + * 下载文件 + * @param file 文件对象 + * @param name 图片名称 + */ +export function downloadFile(file: File, name: string) { + console.log(new Blob([file]), 'new Blob([file])') + const objectUrl = URL.createObjectURL(new Blob([file])) + const link = document.createElement('a') + link.download = name + link.href = objectUrl + link.click() + link.remove() + window.URL.revokeObjectURL(link.href) +} +// 各种文件类型的type +export const fileType: { [key: string]: string } = { + pdf: 'application/pdf', + doc: 'application/doc', + docx: 'application/docx', + excel: 'application/excel', + ppt: 'application/vnd.ms-powerpoint', + dir: 'application/x-director', + js: 'application/x-javascript', + swf: 'application/x-shockwave-flash', + xhtml: 'application/xhtml+xml', + xht: 'application/xhtml+xml', + zip: 'application/zip', + mid: 'audio/midi', + midi: 'audio/midi', + mp3: 'audio/mpeg', + rm: 'audio/x-pn-realaudio', + rpm: 'audio/x-pn-realaudio-plugin', + wav: 'audio/x-wav', + bmp: 'image/bmp', + gif: 'image/gif', + jpeg: 'image/jpeg', + jpg: 'image/jpeg', + png: 'image/png', + css: 'text/css', + html: 'text/html', + htm: 'text/html', + txt: 'text/plain', + xsl: 'text/xml', + xml: 'text/xml', + mpeg: 'video/mpeg', + mpg: 'video/mpeg', + avi: 'video/x-msvideo', + movie: 'video/x-sgi-movie', +} +/** + * 将网络文件地址转化为文件对象 + * @param url 文件地址 + * @param fileName 文件名称 + */ +export function getFileFromUrl(url: string, fileName: string) { + return new Promise((resolve, reject) => { + var blob = null + var xhr = new XMLHttpRequest() + xhr.open('GET', url) + const urlFileType = url.split('.')[url.split('.').length - 1] + xhr.setRequestHeader('Accept', fileType[urlFileType]) + xhr.responseType = 'blob' + // 加载时处理 + xhr.onload = () => { + // 获取返回结果 + blob = xhr.response + const file = new File([blob], fileName, { type: fileType[urlFileType] }) + // 返回结果 + resolve(file) + } + xhr.onerror = (e) => { + reject(e) + } + // 发送 + xhr.send() + }) +} +/** + * 将网络地址转化为 blob地址 并下载 + * @param url 文件地址 + * @param fileName 文件名称 + */ +export function urlToBlob(url: string, name: string) { + const xhr = new XMLHttpRequest() + xhr.open('get', url) + xhr.responseType = 'blob' // ""|"text"-字符串 "blob"-Blob对象 "arraybuffer"-ArrayBuffer对象 + xhr.onload = function () { + const path = URL.createObjectURL(xhr.response) + const link = document.createElement('a') + link.download = name + link.href = path + link.click() + link.remove() + window.URL.revokeObjectURL(link.href) + } + xhr.send() +} + +/** + * 下载文件 各种文件 + * @param url 网络文件地址 + * @param name 文件名 + */ +export function download(url: string, name: string) { + // 下载图片 + const photo = ['jpg', 'jpeg', 'png'] + const fileType = url.split('.')[url.split('.').length - 1] + console.log(fileType, 'fileType') + if (photo.includes(fileType)) { + // 图片 将服务器图片地址转化成本地地址 + const image = new Image() + image.setAttribute('crossOrigin', 'anonymous') + image.src = url + image.onload = () => { + const canvas = document.createElement('canvas') + canvas.width = image.width + canvas.height = image.height + const ctx = canvas.getContext('2d'); + (ctx as CanvasRenderingContext2D).drawImage(image, 0, 0, image.width, image.height) + canvas.toBlob((blob) => { + const url = URL.createObjectURL(blob as Blob) + downloadImg(url, name) + // 用完释放URL对象 + URL.revokeObjectURL(url) + }) + } + } + else { + // 预览一般都是用的a标签，文件下载用的window.open + // 1.pdf文件路径放到window.open里面，点击是进行在线预览 + // 2.word文件和excel文件通过a标签打开时，是直接下载了 + // 将网络地址转化为 blob地址 并下载 + urlToBlob(url, name) + } +} diff --git a/src/views/data/device/pageAdd.vue b/src/views/data/device/pageAdd.vue index 203e669..65e22d9 100644 --- a/src/views/data/device/pageAdd.vue +++ b/src/views/data/device/pageAdd.vue @@ -17,6 +17,7 @@ ptn: '', // 所属分区 stat: '', // 状态 monitorObj: '', // 监测对象 + facilityArea: '', // 设施面积 }) // 表单 const textMap: { [key: string]: string } = { @@ -33,6 +34,7 @@ ptn: [{ required: true, message: '所属分区不能为空', trigger: ['blur', 'change'] }], stat: [{ required: true, message: '状态不能为空', trigger: ['blur', 'change'] }], monitorObj: [{ required: true, message: '监测对象不能为空', trigger: ['blur', 'change'] }], + facilityArea: [{ required: true, message: '设施面积不能为空', trigger: ['blur', 'change'] }], } // 前端校验规则 // 重置表单 @@ -46,6 +48,7 @@ ptn: '', // 所属分区 stat: '', // 状态 monitorObj: '', // 监测对象 + facilityArea: '', // 设施面积 } } const ptnList = ref([]) @@ -69,7 +72,6 @@ const fetchDeviceType = () => { getDictByCode('device_type').then((res) => { deviceTypeList.value = res.data - console.log(res, 'res') }) } const deviceStatusList = ref([]) @@ -239,6 +241,13 @@ + + + + + + +