From 9517cbb95439ea6a77aeed2c20ddc7f48a651648 Mon Sep 17 00:00:00 2001
From: qiaochuLei <124648559+qiaochuLei@users.noreply.github.com>
Date: Fri, 17 Nov 2023 13:48:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=BC=E5=85=A5=E9=80=9A=E9=81=93?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(s7): 数据采集增加S7协议

* fix: s7点位死区校验

* fix: s7点位配置

* fix: 修复s7点位bug

* fix: s7点位bug修复

* feat: 新增点位导入功能

* feat: 新增导入功能

* feat: 导入通道校验
---
 src/api/data-collect/collector.ts             |   4 +-
 .../Point/components/Import/index.vue         | 212 ++++++++++++++++++
 .../DataCollect/Collector/Point/index.vue     |  27 ++-
 3 files changed, 239 insertions(+), 4 deletions(-)
 create mode 100644 src/views/DataCollect/Collector/Point/components/Import/index.vue

diff --git a/src/api/data-collect/collector.ts b/src/api/data-collect/collector.ts
index 84234c06..b90fe629 100644
--- a/src/api/data-collect/collector.ts
+++ b/src/api/data-collect/collector.ts
@@ -66,4 +66,6 @@ export const getStates = () => server.get('/dictionary/running-state/items')
 
 export const getSnapTypes = () => server.get('/s7/client/s7codecs/list')
 
-export const getArea = () => server.get('/s7/client/s7area/list')
\ No newline at end of file
+export const getArea = () => server.get('/s7/client/s7area/list')
+
+export const exportTemplate = (provider: string, format: string) =>server.get(`/data-collect/point/${provider}/template.${format}`, {}, {responseType: 'blob'})
\ No newline at end of file
diff --git a/src/views/DataCollect/Collector/Point/components/Import/index.vue b/src/views/DataCollect/Collector/Point/components/Import/index.vue
new file mode 100644
index 00000000..04525486
--- /dev/null
+++ b/src/views/DataCollect/Collector/Point/components/Import/index.vue
@@ -0,0 +1,212 @@
+<template>
+    <j-modal visible title="导入" @cancel="emit('closeImport')" @ok="emit('closeImport')" :width="800" maskClosable="false">
+        <div class="import-content">
+            <div class="column">
+                <p>上传文件</p>
+                <div class="import">
+                    <a-upload-dragger v-model:fileList="fileList" name="file" :action="`${FILE_UPLOAD}?options=tempFile`"
+                        :headers="{
+                            'X-Access-Token': LocalStore.get(TOKEN_KEY),
+                        }" :limit="1" :showUploadList="false" @change="uploadChange" :accept="['xlsx', 'xls', 'csv']"
+                        :before-upload="beforeUpload">
+                        <div class="dragger-box">
+                            <AIcon class="icon" type="PlusCircleFilled" />
+                            <span style="margin: 16px 0 8px 0">点击或拖拽上传文件</span>
+                            <span>格式：.xlsx, .csv</span>
+                        </div>
+                    </a-upload-dragger>
+                </div>
+            </div>
+            <div class="importing-status" v-if="importStatus == 'importing'">
+                    <loading-outlined />
+                正在导入
+            </div>
+            <div class="column" v-if="importStatus != 'wait'">
+                <p>
+                    <check-outlined style="color: #00a4ff" />导入成功 总数量
+                    {{ successNumber }}
+                </p>
+                <span v-if="failNumber">
+                    <close-outlined style="color: #e50012" />导入失败 总数量
+                    {{ failNumber }}
+                </span>
+            </div>
+            <div class="column">
+                <p>Excel导入模板</p>
+                    <div class="file-download">
+                        <j-button @click="downTemplate('xlsx')"  class="btn">
+                            下载模板
+                        </j-button>
+                    </div>
+            </div>
+        </div>
+    </j-modal>
+</template>
+
+<script lang="ts" setup>
+import {
+    ArrowLeftOutlined,
+    CheckOutlined,
+    CloseOutlined,
+    LoadingOutlined,
+} from '@ant-design/icons-vue';
+import { FILE_UPLOAD } from '@/api/comm';
+import { TOKEN_KEY, BASE_API_PATH } from '@/utils/variable';
+import { LocalStore, onlyMessage } from '@/utils/comm';
+import {
+    exportTemplate
+} from '@/api/data-collect/collector';
+import { downloadFileByUrl } from '@/utils/utils';
+import { getToken } from '@/utils/comm';
+const props = defineProps({
+    data: {
+        type: Object,
+        default: {}
+    }
+})
+const emit = defineEmits(['closeImport'])
+const fileList = ref()
+type ImportStatus = 'wait' | 'importing' | 'done';
+const importStatus = ref<ImportStatus>('wait'); //导入进度
+const successNumber = ref(0); //导入成功数量
+const failNumber = ref(0); //导入失败数量
+const errorMessage = ref();
+const detailFile = ref('')
+const uploadChange = async (info: Record<string, any>) => {
+    if (info.file.status === 'done') {
+        const resp: any = info.file.response || { result: '' };
+        handleImport(resp)
+    }
+};
+
+const beforeUpload = (_file: any) => {
+    const isCsv = _file.type === 'text/csv';
+    const isXlsx =
+        _file.type ===
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+    if (!isCsv && !isXlsx) {
+        onlyMessage('请上传.csv或.xlsx格式文件', 'warning');
+    }
+    return isCsv || isXlsx;
+};
+const downTemplate = async (type: string) => {
+    const res: any = await exportTemplate(<string>props.data?.provider, type);
+    if (res) {
+        const blob = new Blob([res], { type: type });
+        const url = URL.createObjectURL(blob);
+        downloadFileByUrl(url, `${props.data?.provider}导入模版`, type);
+    }
+};
+const handleImport = async (file: any) => {
+    let message: any = []
+    importStatus.value = 'importing';
+    let event: EventSource
+    event = new EventSource(
+        `${BASE_API_PATH}/data-collect/point/${props.data?.collectorId
+        }/${props.data?.provider}/import?:X_Access_Token=${getToken()
+        }&fileUrl=${file.result}`,
+        { withCredentials: true },
+    );
+    event.onopen = (e) => {
+        // pushMessage.value = []
+        console.log('open');
+    };
+    event.onmessage = (e) => {
+        console.log(e, '123')
+        const result = JSON.parse(e.data);
+        if (result.success) {
+            successNumber.value++;
+        } else {
+            if (result.rowNumber !== -1) {
+                failNumber.value++;
+                message.push({
+                    rowNumber: `第${result.rowNumber}行`,
+                    message: result.message,
+                    name: result.name
+                })
+                errorMessage.value = JSON.stringify(message)
+            } else {
+                detailFile.value = result.detailFile;
+            }
+        }
+    };
+    event.onerror = (err) => {
+        importStatus.value = 'done';
+        event.close();
+    };
+};
+
+
+</script>
+<style lang="less" scoped>
+.import-content {
+    width: 100%;
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 20px;
+
+    .column {
+        width: 100%;
+        margin-bottom: 20px;
+        position: relative;
+
+        span {
+            flex: 1;
+        }
+
+        .import {
+            display: flex;
+            justify-content: space-between;
+        }
+        .importing-status {
+            align-items: center;
+        }
+        &.last {
+            margin-top: 135px;
+        }
+    }
+
+    :deep(.ant-upload-select) {
+        width: 100% !important;
+        display: block !important;
+    }
+
+    .ant-row {
+        width: 100%;
+    }
+
+    :deep(.ant-btn) {
+        width: 100%;
+        background-color: transparent;
+
+        &.ant-btn-link {
+            width: auto;
+        }
+    }
+}
+
+.dragger-box {
+    margin: 46px 0;
+    display: flex;
+    flex-direction: column;
+    color: #666666;
+
+    .icon {
+        font-size: 30px;
+        color: @primary-color;
+    }
+}
+
+.file-download {
+    display: flex;
+    gap: 16px;
+
+    .btn {
+        border: none;
+        background-color: #ECECF0;
+        width: 152px;
+        color: #666666;
+    }
+}</style>
\ No newline at end of file
diff --git a/src/views/DataCollect/Collector/Point/index.vue b/src/views/DataCollect/Collector/Point/index.vue
index 15131ce0..9a27e6ce 100644
--- a/src/views/DataCollect/Collector/Point/index.vue
+++ b/src/views/DataCollect/Collector/Point/index.vue
@@ -30,7 +30,17 @@
                                 /></template>
                                 新增点位
                             </PermissionButton>
-
+                            <PermissionButton
+                                v-if="['MODBUS_TCP', 'COLLECTOR_GATEWAY','snap7'].includes(data?.provider)"
+                                type="primary"
+                                @click="handleImport"
+                                hasPermission="DataCollect/Collector:add"
+                            >
+                                <!-- <template #icon
+                                    ><AIcon type="PlusOutlined"
+                                /></template> -->
+                                批量导入
+                            </PermissionButton>
                             <PermissionButton
                                 v-if="data?.provider === 'OPC_UA'"
                                 type="primary"
@@ -315,6 +325,7 @@
         />
         <SaveS7 v-if="visible.saveS7"  :data="current" @change="saveChange"/>
         <Scan v-if="visible.scan" :data="current" @change="saveChange" />
+        <Import v-if="visible.import" :data="current" @close-import="closeImport"/>
     </j-spin>
 </template>
 <script lang="ts" setup name="PointPage">
@@ -341,7 +352,7 @@ import { map } from 'rxjs/operators';
 import dayjs from 'dayjs';
 import { responsiveArray } from 'ant-design-vue/lib/_util/responsiveObserve';
 import SaveS7 from './Save/SaveS7.vue';
-
+import Import from './components/Import/index.vue'
 const props = defineProps({
     data: {
         type: Object,
@@ -368,7 +379,8 @@ const visible = reactive({
     writePoint: false,
     batchUpdate: false,
     scan: false,
-    saveS7:false
+    saveS7:false,
+    import:false
 });
 const current: any = ref({});
 const accessModesOption = ref();
@@ -541,6 +553,10 @@ const handlScan = () => {
     visible.scan = true;
     current.value = cloneDeep(props.data);
 };
+const handleImport = () =>{
+    visible.import = true
+    current.value = cloneDeep(props.data)
+}
 const clickEdit = async (data: object) => {
     visible.writePoint = true;
     current.value = cloneDeep(data);
@@ -676,6 +692,11 @@ const onCheckAllChange = (e: any) => {
     }
 };
 
+const closeImport = () =>{
+    visible.import = false
+    tableRef.value.reload()
+}
+
 watch(
     () => tableRef?.value?._dataSource,
     (value) => {