132 lines
3.6 KiB
Vue
132 lines
3.6 KiB
Vue
<template>
|
||
<j-modal
|
||
visible
|
||
title="下发结果"
|
||
:width="900"
|
||
@ok="emit('close')"
|
||
@cancel="emit('close')"
|
||
>
|
||
<j-row>
|
||
<j-col :span="8">
|
||
<div>成功：{{ count }}</div>
|
||
<div>
|
||
失败：{{ countErr }}
|
||
<j-button @click="_download(errMessage || '', '下发失败原因')" v-if="errMessage.length" type="link"
|
||
>下载</j-button
|
||
>
|
||
</div>
|
||
</j-col>
|
||
<j-col :span="8">下发设备数量：{{ list.length || 0 }}</j-col>
|
||
<j-col :span="8">已下发数量：{{ countErr + count }}</j-col>
|
||
</j-row>
|
||
<div v-if="!flag">
|
||
<j-textarea :rows="20" :value="JSON.stringify(errMessage)" />
|
||
</div>
|
||
</j-modal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { LocalStore } from '@/utils/comm';
|
||
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
||
import dayjs from 'dayjs';
|
||
import { EventSourcePolyfill } from 'event-source-polyfill';
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
});
|
||
const emit = defineEmits(['close']);
|
||
|
||
const count = ref<number>(0);
|
||
const countErr = ref<number>(0);
|
||
const flag = ref<boolean>(true);
|
||
const errMessage = ref<any[]>([]);
|
||
|
||
const getData = () => {
|
||
let dt = 0;
|
||
let et = 0;
|
||
const errMessages: any[] = [];
|
||
const _terms = {
|
||
deviceId: (props.list || []).map((item: any) => item?.id),
|
||
params: JSON.stringify({
|
||
name: props.data.name,
|
||
targetId: props.data.targetId,
|
||
targetType: props.data.targetType,
|
||
category: props.data.category,
|
||
metadata: props.data?.metadata,
|
||
}),
|
||
};
|
||
const url = new URLSearchParams();
|
||
Object.keys(_terms).forEach((key) => {
|
||
if (Array.isArray(_terms[key]) && _terms[key].length) {
|
||
_terms[key].map((item: string) => {
|
||
url.append(key, item);
|
||
});
|
||
} else {
|
||
url.append(key, _terms[key]);
|
||
}
|
||
});
|
||
const source = new EventSourcePolyfill(
|
||
`${BASE_API_PATH}/edge/operations/entity-template-save/invoke/_batch?:X_Access_Token=${LocalStore.get(
|
||
TOKEN_KEY,
|
||
)}&${url}`,
|
||
);
|
||
source.onmessage = (e: any) => {
|
||
const res = JSON.parse(e.data);
|
||
if (res.successful) {
|
||
dt += 1;
|
||
count.value = dt;
|
||
} else {
|
||
et += 1;
|
||
countErr.value = et;
|
||
flag.value = false;
|
||
if (errMessages.length <= 5) {
|
||
errMessages.push({ ...res });
|
||
errMessage.value = [...errMessages];
|
||
}
|
||
}
|
||
};
|
||
source.onerror = () => {
|
||
source.close();
|
||
};
|
||
source.onopen = () => {};
|
||
};
|
||
|
||
const _download = (record: Record<string, any>, fileName: string, format?: string) => {
|
||
// 创建隐藏的可下载链接
|
||
const ghostLink = document.createElement('a');
|
||
ghostLink.download = `${fileName ? '' : record?.name}${fileName}_${dayjs(new Date()).format(
|
||
format || 'YYYY_MM_DD',
|
||
)}.txt`;
|
||
ghostLink.style.display = 'none';
|
||
//字符串内容转成Blob地址
|
||
const blob = new Blob([JSON.stringify(record)]);
|
||
ghostLink.href = URL.createObjectURL(blob);
|
||
//触发点击
|
||
document.body.appendChild(ghostLink);
|
||
ghostLink.click();
|
||
//移除
|
||
document.body.removeChild(ghostLink);
|
||
}
|
||
|
||
watch(
|
||
() => props.data.id,
|
||
(newId) => {
|
||
if(newId){
|
||
getData()
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
},
|
||
);
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
</style> |