Web/admin-govern
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

联调设备文件

Browse Source
This commit is contained in:
guanj
2026-03-30 09:03:53 +08:00
parent a30379ab01
commit 762965b1e4
11 changed files with 941 additions and 689 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/api/cs-device-boot/fileService.ts
View File

@@ -1,93 +1,109 @@
import createAxios from '@/utils/request' import createAxios from '@/utils/request'
// 设备文件根目录查询 // 设备文件根目录查询
export function getDeviceRootPath(nDid) { export function getDeviceRootPath(nDid) {
return createAxios({ return createAxios({
url: '/cs-device-boot/deviceFile/askDeviceRootPath?nDid=' + nDid, url: '/cs-device-boot/deviceFile/askDeviceRootPath?nDid=' + nDid,
method: 'POST' method: 'POST'
}) })
} }
// 设备文件-目录信息询问 // 设备文件-目录信息询问
export function getFileServiceFileOrDir(data) { export function getFileServiceFileOrDir(data) {
return createAxios({ return createAxios({
url: `cs-device-boot/deviceFile/askDeviceFileOrDir?nDid=${data.nDid}&name=${data.name}&type=${data.type}`, url: `cs-device-boot/deviceFile/askDeviceFileOrDir?nDid=${data.nDid}&name=${data.name}&type=${data.type}`,
method: 'POST' method: 'POST'
}) })
} }
// 监测设备-目录信息询问
//设备文件下载 export function listDir(data) {
export function downLoadDeviceFile(data) { return createAxios({
return createAxios({ url: `/zl-event-boot/file/listDir`,
url: `/cs-device-boot/deviceFile/downloadFile?nDid=${data.nDid}&name=${data.name}&fileCheck=${data.fileCheck}&size=${data.size}`, method: 'POST',
method: 'POST' data: data
}) })
} }
// 下载文件
//获取下载文件的文件路径地址 export function downloadFileFromFrontr(data: any) {
export function downLoadDeviceFilePath(obj) { return createAxios({
let form = new FormData() url: `/zl-event-boot/file/downloadFileFromFront`,
form.append('name', obj.name) method: 'POST',
form.append('nDid', obj.nDid) data: data,
return createAxios({ responseType: 'blob'
url: `/cs-device-boot/deviceFile/getDownloadFilePath`, })
method: 'POST', }
headers: { //设备文件下载
'Content-Type': 'application/x-www-form-urlencoded' export function downLoadDeviceFile(data) {
}, return createAxios({
data: form url: `/cs-device-boot/deviceFile/downloadFile?nDid=${data.nDid}&name=${data.name}&fileCheck=${data.fileCheck}&size=${data.size}`,
}) method: 'POST'
} })
//装置重启 }
export function reStartDevice(data) {
return createAxios({ //获取下载文件的文件路径地址
url: `/cs-device-boot/EquipmentDelivery/rebootDevice?nDid=${data.nDid}`, export function downLoadDeviceFilePath(obj) {
method: 'POST' let form = new FormData()
}) form.append('name', obj.name)
} form.append('nDid', obj.nDid)
return createAxios({
//上传文件至装置 url: `/cs-device-boot/deviceFile/getDownloadFilePath`,
export function uploadDeviceFile(data) { method: 'POST',
let form = new FormData() headers: {
form.append('file', data.file) 'Content-Type': 'application/x-www-form-urlencoded'
form.append('filePath', data.filePath) },
form.append('id', data.id) data: form
return createAxios({ })
url: `/access-boot/analyzeModel/uploadDevFile`, }
method: 'POST', //装置重启
headers: { export function reStartDevice(data) {
'Content-Type': 'application/x-www-form-urlencoded' return createAxios({
}, url: `/cs-device-boot/EquipmentDelivery/rebootDevice?nDid=${data.nDid}`,
data: form method: 'POST'
}) })
} }
//新建文件夹目录 //上传文件至装置
export function addDeviceDir(data) { export function uploadDeviceFile(data) {
let form = new FormData() let form = new FormData()
form.append('nDid', data.nDid) form.append('file', data.file)
form.append('path', data.path) form.append('filePath', data.filePath)
return createAxios({ form.append('id', data.id)
url: `/access-boot/askDeviceData/createFolder`, return createAxios({
method: 'POST', url: `/access-boot/analyzeModel/uploadDevFile`,
headers: { method: 'POST',
'Content-Type': 'application/x-www-form-urlencoded' headers: {
}, 'Content-Type': 'application/x-www-form-urlencoded'
data: form },
}) data: form
} })
}
//删除文件/文件夹
export function delDeviceDir(data) { //新建文件夹目录
let form = new FormData() export function addDeviceDir(data) {
form.append('nDid', data.nDid) let form = new FormData()
form.append('path', data.path) form.append('nDid', data.nDid)
return createAxios({ form.append('path', data.path)
url: `/access-boot/askDeviceData/deleteFolder`, return createAxios({
method: 'POST', url: `/access-boot/askDeviceData/createFolder`,
headers: { method: 'POST',
'Content-Type': 'application/x-www-form-urlencoded' headers: {
}, 'Content-Type': 'application/x-www-form-urlencoded'
data: form },
}) data: form
} })
}
//删除文件/文件夹
export function delDeviceDir(data) {
let form = new FormData()
form.append('nDid', data.nDid)
form.append('path', data.path)
return createAxios({
url: `/access-boot/askDeviceData/deleteFolder`,
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: form
})
}

203
src/api/cs-system-boot/device.ts
View File

@@ -1,98 +1,105 @@
import createAxios from '@/utils/request' import createAxios from '@/utils/request'
// 新增出厂设备 // 新增出厂设备
export const addEquipmentDelivery = (data: any) => { export const addEquipmentDelivery = (data: any) => {
return createAxios({ return createAxios({
url: '/cs-device-boot/EquipmentDelivery/addEquipmentDelivery', url: '/cs-device-boot/EquipmentDelivery/addEquipmentDelivery',
method: 'POST', method: 'POST',
data: data data: data
}) })
} }
// 删除出厂设备 // 删除出厂设备
export const deleteEquipmentDelivery = (id: any) => { export const deleteEquipmentDelivery = (id: any) => {
let form = new FormData() let form = new FormData()
form.append('id', id) form.append('id', id)
return createAxios({ return createAxios({
url: '/cs-device-boot/EquipmentDelivery/AuditEquipmentDelivery', url: '/cs-device-boot/EquipmentDelivery/AuditEquipmentDelivery',
method: 'POST', method: 'POST',
data: form data: form
}) })
} }
// 恢复出厂设置 // 恢复出厂设置
export const resetEquipmentDelivery = (id: any) => { export const resetEquipmentDelivery = (id: any) => {
let form = new FormData() let form = new FormData()
form.append('nDid', id) form.append('nDid', id)
return createAxios({ return createAxios({
url: '/access-boot/device/resetFactory', url: '/access-boot/device/resetFactory',
method: 'POST', method: 'POST',
data: form data: form
}) })
} }
// 编辑出厂设备 // 编辑出厂设备
export const editEquipmentDelivery = (data: any) => { export const editEquipmentDelivery = (data: any) => {
return createAxios({ return createAxios({
url: '/cs-device-boot/EquipmentDelivery/updateEquipmentDelivery', url: '/cs-device-boot/EquipmentDelivery/updateEquipmentDelivery',
method: 'POST', method: 'POST',
data: data data: data
}) })
} }
// 上传拓扑图 // 上传拓扑图
export const uploadTopo = (file: any) => { export const uploadTopo = (file: any) => {
let form = new FormData() let form = new FormData()
form.append('file', file) form.append('file', file)
return createAxios({ return createAxios({
url: '/cs-device-boot/topologyTemplate/uploadImage', url: '/cs-device-boot/topologyTemplate/uploadImage',
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
}, },
data: form data: form
}) })
} }
// 批量导入设备 // 批量导入设备
export const batchImportDevice = (file: any) => { export const batchImportDevice = (file: any) => {
let form = new FormData() let form = new FormData()
form.append('file', file) form.append('file', file)
return createAxios({ return createAxios({
url: '/cs-device-boot/EquipmentDelivery/importEquipment', url: '/cs-device-boot/EquipmentDelivery/importEquipment',
method: 'POST', method: 'POST',
responseType: 'blob', responseType: 'blob',
data: form data: form
}) })
} }
// 直连设备注册接入 // 直连设备注册接入
export const governDeviceRegister = (data: any) => { export const governDeviceRegister = (data: any) => {
return createAxios({ return createAxios({
url: `/access-boot/device/register?nDid=${data.nDid}&type=${data.type}`, url: `/access-boot/device/register?nDid=${data.nDid}&type=${data.type}`,
method: 'POST' method: 'POST'
}) })
} }
// 便携式设备注册 // 便携式设备注册
export const portableDeviceRegister = (params: any) => { export const portableDeviceRegister = (params: any) => {
return createAxios({ return createAxios({
url: `/access-boot/device/wlRegister`, url: `/access-boot/device/wlRegister`,
method: 'POST', method: 'POST',
params params
}) })
} }
// 便携式设备接入 // 便携式设备接入
export const portableDeviceAccess = (data: any) => { export const portableDeviceAccess = (data: any) => {
return createAxios({ return createAxios({
url: `/access-boot/device/wlAccess?nDid=${data.nDid}`, url: `/access-boot/device/wlAccess?nDid=${data.nDid}`,
method: 'POST', method: 'POST'
}) })
} }
// 下载模版 // 下载模版
export function getExcelTemplate() { export function getExcelTemplate() {
return createAxios({ return createAxios({
url: '/cs-device-boot/EquipmentDelivery/getExcelTemplate', url: '/cs-device-boot/EquipmentDelivery/getExcelTemplate',
method: 'get', method: 'get',
responseType: 'blob' responseType: 'blob'
}) })
} }
// 查询工程信息列表
export function engineeringProject() {
return createAxios({
url: '/cs-device-boot/engineeringProjectRelation/list',
method: 'post'
})
}

66
src/components/tree/govern/csLedgerLineTree.vue
View File

@@ -1,11 +1,19 @@
<template> <template>
<Tree ref="treRef" :width="width" :showPush="props.showPush" :data="tree" default-expand-all @changePointType="changePointType" @onAdd="onAdd"/> <Tree
ref="treRef"
:width="width"
:showPush="props.showPush"
:data="tree"
default-expand-all
@changePointType="changePointType"
@onAdd="onAdd"
/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, nextTick, onMounted, defineProps } from 'vue' import { ref, nextTick, onMounted, defineProps } from 'vue'
import Tree from '../index.vue' import Tree from '../index.vue'
import { getLineTree,lineTree } from '@/api/cs-device-boot/csLedger' import { getLineTree, lineTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel' import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
@@ -22,27 +30,26 @@ defineOptions({
name: 'govern/deviceTree' name: 'govern/deviceTree'
}) })
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy','onAdd']) const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy', 'onAdd'])
const config = useConfig() const config = useConfig()
const tree = ref() const tree = ref()
const dictData = useDictData() const dictData = useDictData()
const treRef = ref() const treRef = ref()
const width = ref('') const width = ref('')
const info = (selectedNodeId?: string) => { const info = (selectedNodeId?: string) => {
tree.value = [] tree.value = []
let arr1: any[] = [] let arr1: any[] = []
lineTree().then(res => { lineTree().then(res => {
try { try {
// 检查响应数据结构 // 检查响应数据结构
let rootData = null; let rootData = null
if (Array.isArray(res.data)) { if (Array.isArray(res.data)) {
// 旧的数据结构 - 数组 // 旧的数据结构 - 数组
rootData = res.data.find((item: any) => item.name == '监测设备'); rootData = res.data.find((item: any) => item.name == '监测设备')
} else if (res.data && res.data.name == '监测设备') { } else if (res.data && res.data.name == '监测设备') {
// 新的数据结构 - 单个对象 // 新的数据结构 - 单个对象
rootData = res.data; rootData = res.data
} }
// 治理设备 // 治理设备
@@ -66,7 +73,7 @@ const info = (selectedNodeId?: string) => {
item2.icon = 'el-icon-List' item2.icon = 'el-icon-List'
item2.level = 2 item2.level = 2
item2.color = config.getColorVal('elementUiPrimary') item2.color = config.getColorVal('elementUiPrimary')
// 确保 children 是数组 // 确保 children 是数组
if (!Array.isArray(item2.children)) { if (!Array.isArray(item2.children)) {
item2.children = [] item2.children = []
@@ -76,12 +83,12 @@ const info = (selectedNodeId?: string) => {
item3.level = 3 item3.level = 3
item3.color = item3.color =
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important' item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
// 确保 children 是数组 // 确保 children 是数组
if (!Array.isArray(item3.children)) { if (!Array.isArray(item3.children)) {
item3.children = [] item3.children = []
} }
item3.children.forEach((item4: any) => { item3.children.forEach((item4: any) => {
item4.icon = 'el-icon-Platform' item4.icon = 'el-icon-Platform'
item4.level = 4 item4.level = 4
@@ -97,50 +104,51 @@ const info = (selectedNodeId?: string) => {
tree.value = [] tree.value = []
} }
nextTick(() => { nextTick(() => {
if (arr1.length) { if (arr1.length) {
// 安全检查 treRef 和 treeRef 是否存在 // 安全检查 treRef 和 treeRef 是否存在
console.log("🚀 ~ info ~ treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey:", treRef.value && treRef.value.treeRef1 && treRef.value.treeRef1.setCurrentKey) console.log(
'🚀 ~ info ~ treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey:',
treRef.value && treRef.value.treeRef1 && treRef.value.treeRef1.setCurrentKey
)
if (treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey) { if (treRef.value && treRef.value.treeRef && treRef.value.treeRef.setCurrentKey) {
// 如果传入了要选中的节点ID，则选中该节点，否则选中第一个节点 // 如果传入了要选中的节点ID，则选中该节点，否则选中第一个节点
console.log('selectedNodeId:', selectedNodeId); console.log('selectedNodeId:', selectedNodeId)
if (selectedNodeId) { if (selectedNodeId) {
treRef.value.treeRef.setCurrentKey(selectedNodeId); treRef.value.treeRef.setCurrentKey(selectedNodeId)
// 查找对应的节点数据并触发事件 // 查找对应的节点数据并触发事件
let selectedNode = null; let selectedNode = null
const findNode = (nodes: any[]) => { const findNode = (nodes: any[]) => {
for (const node of nodes) { for (const node of nodes) {
if (node.id === selectedNodeId) { if (node.id === selectedNodeId) {
selectedNode = node; selectedNode = node
return true; return true
} }
if (node.children && findNode(node.children)) { if (node.children && findNode(node.children)) {
return true; return true
} }
} }
return false; return false
}; }
findNode(tree.value); findNode(tree.value)
if (selectedNode) { if (selectedNode) {
emit('init', { emit('init', {
level: selectedNode.level, level: selectedNode.level,
...selectedNode ...selectedNode
}); })
} }
} else { } else {
// 初始化选中第一个节点 // 初始化选中第一个节点
treRef.value.treeRef.setCurrentKey(arr1[0].id); treRef.value.treeRef.setCurrentKey(arr1[0].id)
emit('init', { emit('init', {
level: 2, level: 2,
...arr1[0] ...arr1[0]
}); })
} }
} }
} else { } else {
} }
}) })
} catch (error) { } catch (error) {
@@ -149,7 +157,6 @@ const info = (selectedNodeId?: string) => {
}) })
} }
const changePointType = (val: any, obj: any) => { const changePointType = (val: any, obj: any) => {
emit('pointTypeChange', val, obj) emit('pointTypeChange', val, obj)
} }
@@ -158,7 +165,8 @@ const onAdd = () => {
emit('onAdd') emit('onAdd')
} }
if (props.template) { if (props.template) {
querySysExcel({ id: dictData.state.area[0]?.id }) // id: dictData.state.area[0]?.id
querySysExcel({})
.then((res: any) => { .then((res: any) => {
emit('Policy', res.data) emit('Policy', res.data)
info() info()

5
src/components/tree/govern/pointTree.vue
View File

@@ -137,7 +137,7 @@ const info = (type?: string) => {
} }
}) })
tree.value = res.data tree.value = res.data
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
if (type == '2') { if (type == '2') {
@@ -188,7 +188,8 @@ const changePointType = (val: any, obj: any) => {
emit('pointTypeChange', val, obj) emit('pointTypeChange', val, obj)
} }
if (props.template) { if (props.template) {
querySysExcel({ id: dictData.state.area[0]?.id }) // id: dictData.state.area[0]?.id
querySysExcel({})
.then((res: any) => { .then((res: any) => {
emit('Policy', res.data) emit('Policy', res.data)
info() info()

13
src/components/tree/govern/pointTreeWx.vue
View File

@@ -3,13 +3,7 @@
<div style="transition: all 0.3s; overflow: hidden; height: 100%"> <div style="transition: all 0.3s; overflow: hidden; height: 100%">
<div class="cn-tree"> <div class="cn-tree">
<div style="display: flex; align-items: center" class="mb10"> <div style="display: flex; align-items: center" class="mb10">
<el-input <el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
maxlength="32"
v-model.trim="filterText"
placeholder="请输入内容"
clearable
>
<template #prefix> <template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" /> <Icon name="el-icon-Search" style="font-size: 16px" />
</template> </template>
@@ -37,7 +31,7 @@
:style="{ color: data.color }" :style="{ color: data.color }"
v-if="data.icon" v-if="data.icon"
/> />
<span style="margin-left: 5px;">{{ node.label }}</span> <span style="margin-left: 5px">{{ node.label }}</span>
</div> </div>
</span> </span>
</template> </template>
@@ -157,7 +151,8 @@ const clickNode = (e: anyObj) => {
} }
if (props.template) { if (props.template) {
querySysExcel({ id: dictData.state.area[0]?.id }) // id: dictData.state.area[0]?.id
querySysExcel({})
.then((res: any) => { .then((res: any) => {
emit('Policy', res.data) emit('Policy', res.data)
getTreeList() getTreeList()

103
src/utils/downloadFile.ts Normal file
View File

@@ -0,0 +1,103 @@
import { ElMessage, ElMessageBox, ElInput, ElSegmented } from 'element-plus'
export const downLoadFile = (name: string, key: string, res: any) => {
let blob = new Blob([res], {
type: getFileType(key)
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = name // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
ElMessage.success('下载成功')
}
const getFileType = (url: string) => {
const ext = url.split('.').pop()?.toLowerCase() || ''
const mimeMap: Record<string, string> = {
// Excel
xls: 'application/vnd.ms-excel',
xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
// CSV
csv: 'text/csv',
// Word
doc: 'application/msword',
docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
// PDF
pdf: 'application/pdf',
// PowerPoint
ppt: 'application/vnd.ms-powerpoint',
pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
// 图片
png: 'image/png',
gif: 'image/gif',
jpeg: 'image/jpeg',
jpg: 'image/jpeg',
bmp: 'image/bmp',
ico: 'image/vnd.microsoft.icon',
tif: 'image/tiff',
tiff: 'image/tiff',
svg: 'image/svg+xml',
webp: 'image/webp',
// 音频
mp3: 'audio/mpeg',
aac: 'audio/aac',
mid: 'audio/midi',
midi: 'audio/midi',
oga: 'audio/ogg',
wav: 'audio/wav',
weba: 'audio/webm',
// 视频
avi: 'video/x-msvideo',
mpeg: 'video/mpeg',
ogv: 'video/ogg',
webm: 'video/webm',
'3gp': 'video/3gpp',
'3g2': 'video/3gpp2',
// 网页/代码
html: 'text/html',
css: 'text/css',
js: 'text/javascript',
mjs: 'text/javascript',
json: 'application/json',
jsonld: 'application/ld+json',
xhtml: 'application/xhtml+xml',
xml: 'application/xml',
xul: 'application/vnd.mozilla.xul+xml',
// 文档
abw: 'application/x-abiword',
odp: 'application/vnd.oasis.opendocument.presentation',
ods: 'application/vnd.oasis.opendocument.spreadsheet',
odt: 'application/vnd.oasis.opendocument.text',
rtf: 'application/rtf',
txt: 'text/plain',
vsd: 'application/vnd.visio',
// 字体
otf: 'font/otf',
ttf: 'font/ttf',
woff: 'font/woff',
woff2: 'font/woff2',
eot: 'application/vnd.ms-fontobject',
// 压缩/归档
arc: 'application/x-freearc',
bz: 'application/x-bzip',
bz2: 'application/x-bzip2',
rar: 'application/x-rar-compressed',
tar: 'application/x-tar',
zip: 'application/zip',
'7z': 'application/x-7z-compressed',
// 其他
bin: 'application/octet-stream',
csh: 'application/x-csh',
epub: 'application/epub+zip',
azw: 'application/vnd.amazon.ebook',
ics: 'text/calendar',
jar: 'application/java-archive',
mpkg: 'application/vnd.apple.installer+xml',
ogx: 'application/ogg',
sh: 'application/x-sh',
swf: 'application/x-shockwave-flash'
}
return mimeMap[ext] || ''
}

224
src/views/govern/device/fileService/index.vue
View File

@@ -2,7 +2,7 @@
<template> <template>
<div class="default-main main" :style="{ height: pageHeight.height }"> <div class="default-main main" :style="{ height: pageHeight.height }">
<div class="main_left"> <div class="main_left">
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree> <DeviceTree @node-click="nodeClick" @deviceTypeChange="deviceTypeChange"></DeviceTree>
</div> </div>
<div class="main_right" v-loading="loading"> <div class="main_right" v-loading="loading">
<div class="right_nav"> <div class="right_nav">
@@ -197,22 +197,25 @@
import DeviceTree from '@/components/tree/govern/deviceTree.vue' import DeviceTree from '@/components/tree/govern/deviceTree.vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { ref, watch, onMounted, onBeforeUnmount, h, inject } from 'vue' import { ref, watch, onMounted, onBeforeUnmount, h, inject } from 'vue'
import { ElMessage, ElMessageBox, ElInput } from 'element-plus' import { ElMessage, ElMessageBox, ElInput, ElSegmented } from 'element-plus'
import { import {
getFileServiceFileOrDir, getFileServiceFileOrDir,
uploadDeviceFile, uploadDeviceFile,
reStartDevice, reStartDevice,
addDeviceDir, addDeviceDir,
delDeviceDir delDeviceDir,
} from '@/api/cs-device-boot/fileService.ts' listDir,
downloadFileFromFrontr
} from '@/api/cs-device-boot/fileService'
import { defaultAttribute } from '@/components/table/defaultAttribute' import { defaultAttribute } from '@/components/table/defaultAttribute'
import { Delete, Download, Upload, Plus, Refresh, Search } from '@element-plus/icons-vue' import { Delete, Download, Upload, Plus, Refresh, Search } from '@element-plus/icons-vue'
import popup from './popup.vue' import popup from './popup.vue'
import mqtt from 'mqtt' import mqtt from 'mqtt'
import { useAdminInfo } from '@/stores/adminInfo' import { useAdminInfo } from '@/stores/adminInfo'
import { passwordConfirm } from '@/api/user-boot/user' import { passwordConfirm } from '@/api/user-boot/user'
import { downLoadFile } from '@/utils/downloadFile.ts'
defineOptions({ defineOptions({
name: 'govern/device/fileService' name: 'govern/device/fileService/index'
}) })
const pageHeight = mainHeight(20) const pageHeight = mainHeight(20)
const tableHeight = mainHeight(130) const tableHeight = mainHeight(130)
@@ -220,31 +223,53 @@ const adminInfo = useAdminInfo()
const loading = ref(false) const loading = ref(false)
//nDid //nDid
const nDid = ref<string>('') const nDid = ref<string>('')
const devId = ref<string>('')
//当前目录 //当前目录
const activePath = ref<string>('') const activePath = ref<string>('')
//判断是否是根目录 //判断是否是根目录
const isRoot = ref<boolean>(true) const isRoot = ref<boolean>(true)
//储存所有点击过的目录 //储存所有点击过的目录
const activePathList: any = ref([]) const activePathList: any = ref([])
const devConType = ref<string>('')
const deviceTypeChange = (val: any, obj: any) => {
nodeClick(obj)
}
const nodeClick = (e: any) => { const nodeClick = (e: any) => {
if (e && (e.level == 2 || e.type == 'device')) { if (e && (e.level == 2 || e.type == 'device')) {
loading.value = true loading.value = true
nDid.value = e.ndid nDid.value = e.ndid
devId.value = e.id
dirList.value = [] dirList.value = []
activePathList.value = [] activePathList.value = []
activePath.value = '/' activePath.value = '/'
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' }) devConType.value = e.devConType
.then((resp: any) => { if (devConType.value == 'CLD') {
if (resp.code == 'A0000') { listDir({ devId: devId.value, filePath: activePath.value })
dirList.value = resp.data .then((resp: any) => {
currentDirList.value = resp.data if (resp.code == 'A0000') {
activePathList.value = [{ path: activePath.value }] dirList.value = resp.data
currentDirList.value = resp.data
activePathList.value = [{ path: activePath.value }]
loading.value = false
}
})
.catch(e => {
loading.value = false loading.value = false
} })
}) } else {
.catch(e => { getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
loading.value = false .then((resp: any) => {
}) if (resp.code == 'A0000') {
dirList.value = resp.data
currentDirList.value = resp.data
activePathList.value = [{ path: activePath.value }]
loading.value = false
}
})
.catch(e => {
loading.value = false
})
}
} }
} }
//搜索文件或文件夹 //搜索文件或文件夹
@@ -360,21 +385,41 @@ const handleIntoDir = (row: any) => {
if (activePathList.value.indexOf(obj.name) == -1) { if (activePathList.value.indexOf(obj.name) == -1) {
activePathList.value.push({ path: obj.name }) activePathList.value.push({ path: obj.name })
} }
getFileServiceFileOrDir(obj)
.then(res => { if (devConType.value == 'CLD') {
dirList.value = res.data listDir({ devId: devId.value, filePath: row.prjDataPath })
loading.value = false .then((resp: any) => {
currentDirList.value = res.data if (resp.code == 'A0000') {
activePathList.value.map((item: any, index: any) => { dirList.value = resp.data
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) { currentDirList.value = resp.data
activePathList.value.splice(index, 1) activePathList.value.map((item: any, index: any) => {
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
activePathList.value.splice(index, 1)
}
})
loading.value = false
} }
}) })
isRoot.value = false .catch(e => {
}) loading.value = false
.catch(e => { })
loading.value = false } else {
}) getFileServiceFileOrDir(obj)
.then(res => {
dirList.value = res.data
loading.value = false
currentDirList.value = res.data
activePathList.value.map((item: any, index: any) => {
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
activePathList.value.splice(index, 1)
}
})
isRoot.value = false
})
.catch(e => {
loading.value = false
})
}
} }
//处理导航栏路径 //处理导航栏路径
@@ -406,19 +451,38 @@ const handleIntoByPath = async (val: any) => {
} }
activePath.value = val.path activePath.value = val.path
loading.value = true loading.value = true
getFileServiceFileOrDir(obj) if (devConType.value == 'CLD') {
.then(res => { listDir({ devId: devId.value, filePath: val.path })
dirList.value = res.data .then((resp: any) => {
activePathList.value.map((item: any, index: any) => { if (resp.code == 'A0000') {
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) { dirList.value = resp.data
activePathList.value.splice(index, 1)
activePathList.value.map((item: any, index: any) => {
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
activePathList.value.splice(index, 1)
}
})
loading.value = false
} }
}) })
loading.value = false .catch(e => {
}) loading.value = false
.catch(e => { })
loading.value = false } else {
}) getFileServiceFileOrDir(obj)
.then(res => {
dirList.value = res.data
activePathList.value.map((item: any, index: any) => {
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
activePathList.value.splice(index, 1)
}
})
loading.value = false
})
.catch(e => {
loading.value = false
})
}
} }
const form = ref({ const form = ref({
path: '' path: ''
@@ -437,26 +501,48 @@ const formRef = ref()
//重新加载当前页面菜单 //重新加载当前页面菜单
const reloadCurrentMenu = (msg: string) => { const reloadCurrentMenu = (msg: string) => {
loading.value = true loading.value = true
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
.then((resp: any) => {
if (resp.code == 'A0000') {
loading.value = false
dirList.value = resp.data
currentDirList.value = resp.data
activePathList.value.map((item: any, index: any) => {
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
activePathList.value.splice(index, 1)
}
})
loading.value = false
if (!msg) return if (devConType.value == 'CLD') {
ElMessage({ message: msg, type: 'success', duration: 5000 }) listDir({ devId: devId.value, filePath: activePath.value })
} .then((resp: any) => {
}) if (resp.code == 'A0000') {
.catch(e => { dirList.value = resp.data
loading.value = false currentDirList.value = resp.data
}) activePathList.value.map((item: any, index: any) => {
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
activePathList.value.splice(index, 1)
}
})
loading.value = false
if (!msg) return
ElMessage({ message: msg, type: 'success', duration: 5000 })
}
})
.catch(e => {
loading.value = false
})
} else {
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
.then((resp: any) => {
if (resp.code == 'A0000') {
loading.value = false
dirList.value = resp.data
currentDirList.value = resp.data
activePathList.value.map((item: any, index: any) => {
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
activePathList.value.splice(index, 1)
}
})
loading.value = false
if (!msg) return
ElMessage({ message: msg, type: 'success', duration: 5000 })
}
})
.catch(e => {
loading.value = false
})
}
} }
//新建文件夹 //新建文件夹
const submitDeviceDir = () => { const submitDeviceDir = () => {
@@ -526,11 +612,21 @@ const changeType = ref<any>('')
//下载文件 //下载文件
const fileRef = ref() const fileRef = ref()
const handleDownLoad = async (row: any) => { const handleDownLoad = async (row: any) => {
;(await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value) if (devConType.value == 'CLD') {
// fileName.value = row?.prjDataPath.split('/')[row?.prjDataPath.split('/').length - 1] ElMessage.info('下载中，请稍等...')
// localStorage.setItem('fileName', fileName.value) downloadFileFromFrontr({
changeType.value = 'download' devId: devId.value,
localStorage.setItem('changeType', changeType.value) filePath: row.prjDataPath
}).then(res => {
downLoadFile(row.name, row.name, res)
})
} else {
;(await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value)
// fileName.value = row?.prjDataPath.split('/')[row?.prjDataPath.split('/').length - 1]
// localStorage.setItem('fileName', fileName.value)
changeType.value = 'download'
localStorage.setItem('changeType', changeType.value)
}
} }
//上传文件 //上传文件
const fileName = ref<any>('') const fileName = ref<any>('')

7
src/views/govern/manage/engineering/components/itemAdd.vue
View File

@@ -118,12 +118,15 @@ const open = (text: string, List: any, data?: anyObj, id?: string) => {
} }
} }
const submit = async () => { const submit = async () => {
if (form.topoIds == '') {
return ElMessage.warning('请选择拓扑图!')
}
formRef.value.validate(async valid => { formRef.value.validate(async valid => {
if (valid) { if (valid) {
if (form.id) { if (form.id) {
await updateProjects({ ...form, topoIds: form.topoIds == '' ? [] : [form.topoIds] }) await updateProjects({ ...form, topoIds: [form.topoIds] })
} else { } else {
await addProject({ ...form, topoIds: form.topoIds == '' ? [] : [form.topoIds] }) await addProject({ ...form, topoIds: [form.topoIds] })
} }
ElMessage.success('保存成功') ElMessage.success('保存成功')
tableStore.index() tableStore.index()

25
src/views/govern/manage/engineering/index.vue
View File

@@ -43,7 +43,7 @@
:preview-teleported="true" :preview-teleported="true"
v-if="row.topologyInfo" v-if="row.topologyInfo"
:preview-src-list="[row.topologyImageUrl]" :preview-src-list="[row.topologyImageUrl]"
:src="getUrl(row) ? row.topologyImageUrl : ''" :src="row.topologyImageUrl"
></el-image> ></el-image>
<span v-else>/</span> <span v-else>/</span>
</template> </template>
@@ -199,6 +199,11 @@ const setTableRow = () => {
let list = tableStore.table.data.filter((item: any) => item.engineeringId == engineeringId.value) let list = tableStore.table.data.filter((item: any) => item.engineeringId == engineeringId.value)
tableRef.value.getRef().setCurrentRow(list[0] ?? {}) tableRef.value.getRef().setCurrentRow(list[0] ?? {})
itemList.value = list?.[0]?.projectInfoList ?? [] itemList.value = list?.[0]?.projectInfoList ?? []
if (itemList.value.length > 0) {
itemList.value.forEach((item: any) => {
item.topologyImageUrl = getUrl(item)
})
}
} }
// 修改模版 // 修改模版
const itemModification = (row: any) => { const itemModification = (row: any) => {
@@ -223,6 +228,11 @@ const add = () => {
const currentChange = (data: any) => { const currentChange = (data: any) => {
engineeringId.value = data.row.engineeringId engineeringId.value = data.row.engineeringId
itemList.value = data.row.projectInfoList itemList.value = data.row.projectInfoList
if (itemList.value.length > 0) {
itemList.value.forEach((item: any) => {
item.topologyImageUrl = getUrl(item)
})
}
} }
// 保存模版 // 保存模版
const save = () => { const save = () => {
@@ -238,14 +248,11 @@ const save = () => {
const imgList = ref([]) const imgList = ref([])
// 获取拓扑图 // 获取拓扑图
const getUrl = async (row: any) => { const getUrl = async (row: any) => {
if (!row.topologyInfo || row.topologyInfo === '/') return false if (!row.topologyInfo || row.topologyInfo === '/') return ''
try {
const res = await getFileUrl({ filePath: row.topologyInfo }) const res = await getFileUrl({ filePath: row.topologyInfo })
row.topologyImageUrl = res.data row.topologyImageUrl = res.data
return true return res.data
} catch (error) {
return false
}
} }
onMounted(() => { onMounted(() => {

107
src/views/govern/manage/factory.vue
View File

@@ -151,7 +151,7 @@
<el-form-item label="设备型号:" prop="devModel" class="top"> <el-form-item label="设备型号:" prop="devModel" class="top">
<el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable> <el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable>
<el-option <el-option
v-for="item in formDevModelOptionsFilter " v-for="item in formDevModelOptionsFilter"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
@@ -164,6 +164,15 @@
<el-option label="CLD" value="CLD"></el-option> <el-option label="CLD" value="CLD"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="关联项目:" class="top">
<el-cascader
v-model.trim="form.association"
filterable
:options="engineeringList"
:props="props"
clearable
/>
</el-form-item>
<el-form-item label="排序:" class="top" prop="sort"> <el-form-item label="排序:" class="top" prop="sort">
<el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" /> <el-input maxlength="32" show-word-limit-number v-model.trim="form.sort" :min="0" />
</el-form-item> </el-form-item>
@@ -198,7 +207,7 @@ import TableHeader from '@/components/table/header/index.vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree' import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user' import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
import { downLoadFile } from '@/api/cs-system-boot/manage.ts' import { downLoadFile } from '@/api/cs-system-boot/manage'
import { import {
addEquipmentDelivery, addEquipmentDelivery,
deleteEquipmentDelivery, deleteEquipmentDelivery,
@@ -208,7 +217,8 @@ import {
governDeviceRegister, governDeviceRegister,
portableDeviceRegister, portableDeviceRegister,
portableDeviceAccess, portableDeviceAccess,
getExcelTemplate getExcelTemplate,
engineeringProject
} from '@/api/cs-system-boot/device' } from '@/api/cs-system-boot/device'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import { fullUrl } from '@/utils/common' import { fullUrl } from '@/utils/common'
@@ -221,17 +231,27 @@ const showQrCode = ref(false)
const devTypeOptions: any = ref([]) const devTypeOptions: any = ref([])
const devTypeOptions2: any = ref([]) const devTypeOptions2: any = ref([])
const devModelOptions2: any = ref([]) const devModelOptions2: any = ref([])
const engineeringList: any = ref([])
const deivce: any = ref({}) const deivce: any = ref({})
const ruleFormRef = ref() const ruleFormRef = ref()
const form = reactive({ const form: any = reactive({
cntractNo: '', cntractNo: '',
devAccessMethod: 'MQTT', devAccessMethod: 'MQTT',
devModel: '', devModel: '',
devType: '', devType: '',
name: '', name: '',
ndid: '', ndid: '',
associatedEngineering: '',
associatedProject: '',
association: [],
sort: 0 sort: 0
}) })
const props = {
label: 'projectName',
value: 'projectId',
children: 'projectInfoList'
}
const rules = reactive({ const rules = reactive({
name: [{ required: true, message: '请输入设备名', trigger: 'blur' }], name: [{ required: true, message: '请输入设备名', trigger: 'blur' }],
ndid: [{ required: true, message: '请输入网络设备id', trigger: 'blur' }], ndid: [{ required: true, message: '请输入网络设备id', trigger: 'blur' }],
@@ -248,19 +268,21 @@ const dialogTitle = ref('新增设备')
const loading = ref<boolean>(false) const loading = ref<boolean>(false)
const devModelOptions: any = ref([]) const devModelOptions: any = ref([])
const queryTheDictionary = () => { const queryTheDictionary = () => {
queryByCode('DEV_CLD').then(res => { queryByCode('DEV_CLD')
.then(res => {
devTypeOptions2.value = res.data devTypeOptions2.value = res.data
return queryCsDictTree(res.data.id).then(res => { return queryCsDictTree(res.data.id).then(res => {
devModelOptions2.value = res.data.map((item: any) => { devModelOptions2.value = res.data.map((item: any) => {
return { return {
value: item.id, value: item.id,
label: item.name, label: item.name,
...item ...item
} }
}) })
}) })
}).then(() => { })
queryByCode('Device_Type').then(async res => { .then(() => {
queryByCode('Device_Type').then(async res => {
const id = res.data.id const id = res.data.id
await queryCsDictTree(id).then(res => { await queryCsDictTree(id).then(res => {
devTypeOptions.value = res.data.map((item: any) => { devTypeOptions.value = res.data.map((item: any) => {
@@ -270,7 +292,7 @@ const queryTheDictionary = () => {
...item ...item
} }
}) })
// let index = devTypeOptions.value.findIndex((item: any) => { // let index = devTypeOptions.value.findIndex((item: any) => {
// return item.name == '网关' // return item.name == '网关'
// }) // })
@@ -292,10 +314,10 @@ const queryTheDictionary = () => {
}) })
await tableStore.index() await tableStore.index()
}) })
}).catch(error => { })
.catch(error => {
console.error('查询过程中出现错误:', error) console.error('查询过程中出现错误:', error)
}) })
} }
const devModelOptionsFilter = computed(() => { const devModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => { return devModelOptions.value.filter((item: any) => {
@@ -308,7 +330,7 @@ const devModelOptionsFilter = computed(() => {
}) })
const formDevModelOptionsFilter = computed(() => { const formDevModelOptionsFilter = computed(() => {
if(form.devAccessMethod === 'CLD'){ if (form.devAccessMethod === 'CLD') {
return devModelOptions2.value.filter((item: any) => { return devModelOptions2.value.filter((item: any) => {
if (form.devType) { if (form.devType) {
return item.pid == form.devType return item.pid == form.devType
@@ -316,18 +338,17 @@ const formDevModelOptionsFilter = computed(() => {
return true return true
} }
}) })
}else{ } else {
return devModelOptions.value.filter((item: any) => { return devModelOptions.value.filter((item: any) => {
if (form.devType) { if (form.devType) {
return item.pid == form.devType return item.pid == form.devType
} else { } else {
return true return true
} }
}) })
} }
}) })
const formDevTypeOptions = computed(() => { const formDevTypeOptions = computed(() => {
// 如果协议是CLD，使用devTypeOptions2，否则使用devTypeOptions // 如果协议是CLD，使用devTypeOptions2，否则使用devTypeOptions
if (form.devAccessMethod === 'CLD') { if (form.devAccessMethod === 'CLD') {
@@ -362,13 +383,13 @@ const tableStore = new TableStore({
field: 'devType', field: 'devType',
formatter: row => { formatter: row => {
if (row.row.devAccessMethod === 'CLD') { if (row.row.devAccessMethod === 'CLD') {
// 遍历devTypeOptions2查找匹配 // 遍历devTypeOptions2查找匹配
return devTypeOptions2.value.name return devTypeOptions2.value.name
} }
// 如果是MQTT协议，使用devTypeOptions查找 // 如果是MQTT协议，使用devTypeOptions查找
else if (row.row.devAccessMethod === 'MQTT') { else if (row.row.devAccessMethod === 'MQTT') {
const item = devTypeOptions.value.find((item: any) => item.value == row.cellValue); const item = devTypeOptions.value.find((item: any) => item.value == row.cellValue)
return item ? item.label : '/'; return item ? item.label : '/'
} }
}, },
minWidth: 120 minWidth: 120
@@ -378,8 +399,8 @@ const tableStore = new TableStore({
field: 'devModel', field: 'devModel',
formatter: row => { formatter: row => {
const options = row.row.devAccessMethod === 'MQTT' ? devModelOptions.value : devModelOptions2.value const options = row.row.devAccessMethod === 'MQTT' ? devModelOptions.value : devModelOptions2.value
const item = options.find((item: any) => item.value == row.cellValue); const item = options.find((item: any) => item.value == row.cellValue)
return item ? item.label : '/'; return item ? item.label : '/'
}, },
minWidth: 120 minWidth: 120
}, },
@@ -488,7 +509,8 @@ const tableStore = new TableStore({
minWidth: 80 minWidth: 80
}, },
{ {
title: '操作', fixed: 'right', title: '操作',
fixed: 'right',
align: 'center', align: 'center',
width: 220, width: 220,
render: 'buttons', render: 'buttons',
@@ -677,7 +699,6 @@ const tableStore = new TableStore({
useCORS: true useCORS: true
}).then(canvas => { }).then(canvas => {
let url = canvas.toDataURL('image/png') let url = canvas.toDataURL('image/png')
console.log('🚀 ~ html2canvas ~ url:', url)
// 下载图片 // 下载图片
let a = document.createElement('a') let a = document.createElement('a')
let event = new MouseEvent('click') let event = new MouseEvent('click')
@@ -701,6 +722,10 @@ const tableStore = new TableStore({
for (let key in form) { for (let key in form) {
form[key] = row[key] form[key] = row[key]
} }
form.association = row.associatedProject
? [row.associatedEngineering, row.associatedProject]
: []
form.id = row.id form.id = row.id
} }
}, },
@@ -741,7 +766,6 @@ const tableStore = new TableStore({
: '' : ''
} }
}) })
console.log('🚀 ~ loadCallback ~ tableStore.table:', tableStore.table)
tableKey.value += 1 tableKey.value += 1
} }
}) })
@@ -877,6 +901,9 @@ const add = () => {
const onSubmit = () => { const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => { ruleFormRef.value.validate((valid: any) => {
if (valid) { if (valid) {
form.associatedEngineering = form.association ? form.association[0] : ''
form.associatedProject = form.association ? form.association[1] : ''
if (dialogTitle.value == '新增设备') { if (dialogTitle.value == '新增设备') {
addEquipmentDelivery(form).then(res => { addEquipmentDelivery(form).then(res => {
ElMessage.success('新增成功') ElMessage.success('新增成功')
@@ -923,6 +950,9 @@ const resetForm = () => {
devModel: '', devModel: '',
devType: '', devType: '',
name: '', name: '',
associatedEngineering: '',
associatedProject: '',
association: [],
ndid: '' ndid: ''
} }
Object.assign(form, user) Object.assign(form, user)
@@ -939,6 +969,15 @@ provide('tableStore', tableStore)
onMounted(() => { onMounted(() => {
queryTheDictionary() queryTheDictionary()
engineeringProject().then(res => {
engineeringList.value = res.data.filter(item => {
item.projectName = item.engineeringName
item.projectId = item.engineeringId
item.disabled = item.projectInfoList ? false : true
return item
})
})
setTimeout(() => {}, 100) setTimeout(() => {}, 100)
}) })

675
src/views/govern/reportForms/export.js
View File

@@ -1,349 +1,326 @@
// import { createCellPos } from './translateNumToLetter' // import { createCellPos } from './translateNumToLetter'
import Excel from 'exceljs' import Excel from 'exceljs'
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
const exportExcel = function(luckysheet, value) { const exportExcel = function (luckysheet, value) {
// 参数为luckysheet.getluckysheetfile()获取的对象 // 参数为luckysheet.getluckysheetfile()获取的对象
// 1.创建工作簿，可以为工作簿添加属性 // 1.创建工作簿，可以为工作簿添加属性
const workbook = new Excel.Workbook() const workbook = new Excel.Workbook()
// 2.创建表格，第二个参数可以配置创建什么样的工作表 // 2.创建表格，第二个参数可以配置创建什么样的工作表
if (Object.prototype.toString.call(luckysheet) === '[object Object]') { if (Object.prototype.toString.call(luckysheet) === '[object Object]') {
luckysheet = [luckysheet] luckysheet = [luckysheet]
} }
luckysheet.forEach(function(table) { luckysheet.forEach(function (table) {
if (table.data.length === 0) return true if (table.data.length === 0) return true
// ws.getCell('B2').fill = fills. // ws.getCell('B2').fill = fills.
const worksheet = workbook.addWorksheet(table.name) const worksheet = workbook.addWorksheet(table.name)
const merge = (table.config && table.config.merge) || {} const merge = (table.config && table.config.merge) || {}
const borderInfo = (table.config && table.config.borderInfo) || {} const borderInfo = (table.config && table.config.borderInfo) || {}
// 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值 // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
setStyleAndValue(table.data, worksheet) setStyleAndValue(table.data, worksheet)
setMerge(merge, worksheet) setMerge(merge, worksheet)
setBorder(borderInfo, worksheet) setBorder(borderInfo, worksheet)
return true return true
}) })
// return // return
// 4.写入 buffer // 4.写入 buffer
const buffer = workbook.xlsx.writeBuffer().then(data => { const buffer = workbook.xlsx.writeBuffer().then(data => {
// console.log('data', data) // console.log('data', data)
const blob = new Blob([data], { const blob = new Blob([data], {
type: 'application/vnd.ms-excel;charset=utf-8' type: 'application/vnd.ms-excel;charset=utf-8'
}) })
console.log("导出成功！") console.log('导出成功！')
FileSaver.saveAs(blob, `${value}.xlsx`) FileSaver.saveAs(blob, `${value}.xlsx`)
}) })
return buffer return buffer
} }
var setMerge = function(luckyMerge = {}, worksheet) { var setMerge = function (luckyMerge = {}, worksheet) {
const mergearr = Object.values(luckyMerge) const mergearr = Object.values(luckyMerge)
mergearr.forEach(function(elem) { mergearr.forEach(function (elem) {
// elem格式：{r: 0, c: 0, rs: 1, cs: 2} // elem格式：{r: 0, c: 0, rs: 1, cs: 2}
// 按开始行，开始列，结束行，结束列合并（相当于 K10:M12） // 按开始行，开始列，结束行，结束列合并（相当于 K10:M12）
worksheet.mergeCells( worksheet.mergeCells(elem.r + 1, elem.c + 1, elem.r + elem.rs, elem.c + elem.cs)
elem.r + 1, })
elem.c + 1, }
elem.r + elem.rs,
elem.c + elem.cs var setBorder = function (luckyBorderInfo, worksheet) {
) if (!Array.isArray(luckyBorderInfo)) return
}) // console.log('luckyBorderInfo', luckyBorderInfo)
} luckyBorderInfo.forEach(function (elem) {
// 现在只兼容到borderType 为range的情况
var setBorder = function(luckyBorderInfo, worksheet) { // console.log('ele', elem)
if (!Array.isArray(luckyBorderInfo)) return if (elem.rangeType === 'range') {
// console.log('luckyBorderInfo', luckyBorderInfo) let border = borderConvert(elem.borderType, elem.style, elem.color)
luckyBorderInfo.forEach(function(elem) { let rang = elem.range[0]
// 现在只兼容到borderType 为range的情况 // console.log('range', rang)
// console.log('ele', elem) let row = rang.row
if (elem.rangeType === 'range') { let column = rang.column
let border = borderConvert(elem.borderType, elem.style, elem.color) for (let i = row[0] + 1; i < row[1] + 2; i++) {
let rang = elem.range[0] for (let y = column[0] + 1; y < column[1] + 2; y++) {
// console.log('range', rang) worksheet.getCell(i, y).border = border
let row = rang.row }
let column = rang.column }
for (let i = row[0] + 1; i < row[1] + 2; i++) { }
for (let y = column[0] + 1; y < column[1] + 2; y++) { if (elem.rangeType === 'cell') {
worksheet.getCell(i, y).border = border // col_index: 2
} // row_index: 1
} // b: {
} // color: '#d0d4e3'
if (elem.rangeType === 'cell') { // style: 1
// col_index: 2 // }
// row_index: 1 const { col_index, row_index } = elem.value
// b: { const borderData = Object.assign({}, elem.value)
// color: '#d0d4e3' delete borderData.col_index
// style: 1 delete borderData.row_index
// } let border = addborderToCell(borderData, row_index, col_index)
const { col_index, row_index } = elem.value // console.log('bordre', border, borderData)
const borderData = Object.assign({}, elem.value) worksheet.getCell(row_index + 1, col_index + 1).border = border
delete borderData.col_index }
delete borderData.row_index // console.log(rang.column_focus + 1, rang.row_focus + 1)
let border = addborderToCell(borderData, row_index, col_index) // worksheet.getCell(rang.row_focus + 1, rang.column_focus + 1).border = border
// console.log('bordre', border, borderData) })
worksheet.getCell(row_index + 1, col_index + 1).border = border }
} var setStyleAndValue = function (cellArr, worksheet) {
// console.log(rang.column_focus + 1, rang.row_focus + 1) if (!Array.isArray(cellArr)) return
// worksheet.getCell(rang.row_focus + 1, rang.column_focus + 1).border = border cellArr.forEach(function (row, rowid) {
}) row.every(function (cell, columnid) {
} if (!cell) return true
var setStyleAndValue = function(cellArr, worksheet) { let fill = fillConvert(cell.bg)
if (!Array.isArray(cellArr)) return
cellArr.forEach(function(row, rowid) { let font = fontConvert(cell.ff, cell.fc, cell.bl, cell.it, cell.fs, cell.cl, cell.ul)
row.every(function(cell, columnid) { let alignment = alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr)
if (!cell) return true let value = ''
let fill = fillConvert(cell.bg)
if (cell.f) {
let font = fontConvert( value = { formula: cell.f, result: cell.v }
cell.ff, } else if (!cell.v && cell.ct && cell.ct.s) {
cell.fc, // xls转为xlsx之后，内部存在不同的格式，都会进到富文本里，即值不存在与cell.v，而是存在于cell.ct.s之后
cell.bl, // value = cell.ct.s[0].v
cell.it, cell.ct.s.forEach(arr => {
cell.fs, value += arr.v
cell.cl, })
cell.ul } else {
) value = cell.v
let alignment = alignmentConvert(cell.vt, cell.ht, cell.tb, cell.tr) }
let value = '' // style 填入到_value中可以实现填充色
let letter = createCellPos(columnid)
if (cell.f) { let target = worksheet.getCell(letter + (rowid + 1))
value = { formula: cell.f, result: cell.v } // console.log('1233', letter + (rowid + 1))
} else if (!cell.v && cell.ct && cell.ct.s) { for (const key in fill) {
// xls转为xlsx之后，内部存在不同的格式，都会进到富文本里，即值不存在与cell.v，而是存在于cell.ct.s之后 target.fill = fill
// value = cell.ct.s[0].v break
cell.ct.s.forEach(arr => { }
value += arr.v target.font = font
}) target.alignment = alignment
} else { target.value = value
value = cell.v
} return true
// style 填入到_value中可以实现填充色 })
let letter = createCellPos(columnid) })
let target = worksheet.getCell(letter + (rowid + 1)) }
// console.log('1233', letter + (rowid + 1))
for (const key in fill) { var fillConvert = function (bg) {
target.fill = fill if (!bg) {
break return {}
} }
target.font = font // const bgc = bg.replace('#', '')
target.alignment = alignment let fill = {
target.value = value type: 'pattern',
pattern: 'solid',
return true fgColor: { argb: bg.replace('#', '') }
}) }
}) return fill
} }
var fillConvert = function(bg) { var fontConvert = function (ff = 0, fc = '#000000', bl = 0, it = 0, fs = 10, cl = 0, ul = 0) {
if (!bg) { // luckysheet：ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线)
return {} const luckyToExcel = {
} 0: '微软雅黑',
// const bgc = bg.replace('#', '') 1: '宋体（Song）',
let fill = { 2: '黑体（ST Heiti）',
type: 'pattern', 3: '楷体（ST Kaiti）',
pattern: 'solid', 4: '仿宋（ST FangSong）',
fgColor: { argb: bg.replace('#', '') } 5: '新宋体（ST Song）',
} 6: '华文新魏',
return fill 7: '华文行楷',
} 8: '华文隶书',
9: 'Arial',
var fontConvert = function( 10: 'Times New Roman ',
ff = 0, 11: 'Tahoma ',
fc = '#000000', 12: 'Verdana',
bl = 0, num2bl: function (num) {
it = 0, return num === 0 ? false : true
fs = 10, }
cl = 0, }
ul = 0 // 出现Bug，导入的时候ff为luckyToExcel的val
) {
// luckysheet：ff(样式), fc(颜色), bl(粗体), it(斜体), fs(大小), cl(删除线), ul(下划线) let font = {
const luckyToExcel = { name: typeof ff === 'number' ? luckyToExcel[ff] : ff,
0: '微软雅黑', family: 1,
1: '宋体（Song）', size: fs,
2: '黑体（ST Heiti）', color: { argb: fc.replace('#', '') },
3: '楷体（ST Kaiti）', bold: luckyToExcel.num2bl(bl),
4: '仿宋（ST FangSong）', italic: luckyToExcel.num2bl(it),
5: '新宋体（ST Song）', underline: luckyToExcel.num2bl(ul),
6: '华文新魏', strike: luckyToExcel.num2bl(cl)
7: '华文行楷', }
8: '华文隶书',
9: 'Arial', return font
10: 'Times New Roman ', }
11: 'Tahoma ',
12: 'Verdana', var alignmentConvert = function (vt = 'default', ht = 'default', tb = 'default', tr = 'default') {
num2bl: function(num) { // luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转)
return num === 0 ? false : true const luckyToExcel = {
} vertical: {
} 0: 'middle',
// 出现Bug，导入的时候ff为luckyToExcel的val 1: 'top',
2: 'bottom',
let font = { default: 'top'
name: typeof ff === 'number' ? luckyToExcel[ff] : ff, },
family: 1, horizontal: {
size: fs, 0: 'center',
color: { argb: fc.replace('#', '') }, 1: 'left',
bold: luckyToExcel.num2bl(bl), 2: 'right',
italic: luckyToExcel.num2bl(it), default: 'left'
underline: luckyToExcel.num2bl(ul), },
strike: luckyToExcel.num2bl(cl) wrapText: {
} 0: false,
1: false,
return font 2: true,
} default: false
},
var alignmentConvert = function( textRotation: {
vt = 'default', 0: 0,
ht = 'default', 1: 45,
tb = 'default', 2: -45,
tr = 'default' 3: 'vertical',
) { 4: 90,
// luckysheet:vt(垂直), ht(水平), tb(换行), tr(旋转) 5: -90,
const luckyToExcel = { default: 0
vertical: { }
0: 'middle', }
1: 'top',
2: 'bottom', let alignment = {
default: 'top' vertical: luckyToExcel.vertical[vt],
}, horizontal: luckyToExcel.horizontal[ht],
horizontal: { wrapText: luckyToExcel.wrapText[tb],
0: 'center', textRotation: luckyToExcel.textRotation[tr]
1: 'left', }
2: 'right', return alignment
default: 'left' }
},
wrapText: { var borderConvert = function (borderType, style = 1, color = '#000') {
0: false, // 对应luckysheet的config中borderinfo的的参数
1: false, if (!borderType) {
2: true, return {}
default: false }
}, const luckyToExcel = {
textRotation: { type: {
0: 0, 'border-all': 'all',
1: 45, 'border-top': 'top',
2: -45, 'border-right': 'right',
3: 'vertical', 'border-bottom': 'bottom',
4: 90, 'border-left': 'left'
5: -90, },
default: 0 style: {
} 0: 'none',
} 1: 'thin',
2: 'hair',
let alignment = { 3: 'dotted',
vertical: luckyToExcel.vertical[vt], 4: 'dashDot', // 'Dashed',
horizontal: luckyToExcel.horizontal[ht], 5: 'dashDot',
wrapText: luckyToExcel.wrapText[tb], 6: 'dashDotDot',
textRotation: luckyToExcel.textRotation[tr] 7: 'double',
} 8: 'medium',
return alignment 9: 'mediumDashed',
} 10: 'mediumDashDot',
11: 'mediumDashDotDot',
var borderConvert = function(borderType, style = 1, color = '#000') { 12: 'slantDashDot',
// 对应luckysheet的config中borderinfo的的参数 13: 'thick'
if (!borderType) { }
return {} }
} let template = {
const luckyToExcel = { style: luckyToExcel.style[style],
type: { color: { argb: color.replace('#', '') }
'border-all': 'all', }
'border-top': 'top', let border = {}
'border-right': 'right', if (luckyToExcel.type[borderType] === 'all') {
'border-bottom': 'bottom', border['top'] = template
'border-left': 'left' border['right'] = template
}, border['bottom'] = template
style: { border['left'] = template
0: 'none', } else {
1: 'thin', border[luckyToExcel.type[borderType]] = template
2: 'hair', }
3: 'dotted', // console.log('border', border)
4: 'dashDot', // 'Dashed', return border
5: 'dashDot', }
6: 'dashDotDot',
7: 'double', function addborderToCell(borders, row_index, col_index) {
8: 'medium', let border = {}
9: 'mediumDashed', const luckyExcel = {
10: 'mediumDashDot', type: {
11: 'mediumDashDotDot', l: 'left',
12: 'slantDashDot', r: 'right',
13: 'thick' b: 'bottom',
} t: 'top'
} },
let template = { style: {
style: luckyToExcel.style[style], 0: 'none',
color: { argb: color.replace('#', '') } 1: 'thin',
} 2: 'hair',
let border = {} 3: 'dotted',
if (luckyToExcel.type[borderType] === 'all') { 4: 'dashDot', // 'Dashed',
border['top'] = template 5: 'dashDot',
border['right'] = template 6: 'dashDotDot',
border['bottom'] = template 7: 'double',
border['left'] = template 8: 'medium',
} else { 9: 'mediumDashed',
border[luckyToExcel.type[borderType]] = template 10: 'mediumDashDot',
} 11: 'mediumDashDotDot',
// console.log('border', border) 12: 'slantDashDot',
return border 13: 'thick'
} }
}
function addborderToCell(borders, row_index, col_index) { // console.log('borders', borders)
let border = {} for (const bor in borders) {
const luckyExcel = { const borderItem = borders[bor]
type: { // 同时判断边框对象 和 color 属性都存在
l: 'left', if (!borderItem || !borderItem.color) {
r: 'right', continue
b: 'bottom', }
t: 'top'
}, if (borderItem.color.indexOf('rgb') === -1) {
style: { border[luckyExcel.type[bor]] = {
0: 'none', style: luckyExcel.style[borderItem.style],
1: 'thin', color: { argb: borderItem.color.replace('#', '') }
2: 'hair', }
3: 'dotted', } else {
4: 'dashDot', // 'Dashed', border[luckyExcel.type[bor]] = {
5: 'dashDot', style: luckyExcel.style[borderItem.style],
6: 'dashDotDot', color: { argb: borderItem.color }
7: 'double', }
8: 'medium', }
9: 'mediumDashed', }
10: 'mediumDashDot',
11: 'mediumDashDotDot', return border
12: 'slantDashDot', }
13: 'thick'
} function createCellPos(n) {
} let ordA = 'A'.charCodeAt(0)
// console.log('borders', borders)
for (const bor in borders) { let ordZ = 'Z'.charCodeAt(0)
// console.log(bor) let len = ordZ - ordA + 1
if (borders[bor].color.indexOf('rgb') === -1) { let s = ''
border[luckyExcel.type[bor]] = { while (n >= 0) {
style: luckyExcel.style[borders[bor].style], s = String.fromCharCode((n % len) + ordA) + s
color: { argb: borders[bor].color.replace('#', '') }
} n = Math.floor(n / len) - 1
} else { }
border[luckyExcel.type[bor]] = { return s
style: luckyExcel.style[borders[bor].style], }
color: { argb: borders[bor].color }
} export { exportExcel }
}
}
return border
}
function createCellPos(n) {
let ordA = 'A'.charCodeAt(0)
let ordZ = 'Z'.charCodeAt(0)
let len = ordZ - ordA + 1
let s = ''
while (n >= 0) {
s = String.fromCharCode((n % len) + ordA) + s
n = Math.floor(n / len) - 1
}
return s
}
export {
exportExcel
}