ks001

2024-05-24 19:27:16 +08:00
parent c25e8b5421
commit 91864994af
10 changed files with 520 additions and 12 deletions
--- a/cdTMP/src/api/system/dict.js
+++ b/cdTMP/src/api/system/dict.js
@@ -1,6 +1,17 @@
 import { request } from "@/api/request"

 export default {
+    /**
+     * 传入字段的code，返回所属code信息
+     * @returns 返回所属code信息
+     */
+    getDictByCode(params = {}) {
+        return request({
+            url: `system/dataDict/list`,
+            method: "get",
+            params
+        })
+    },
    /**
     * 请求dict全部数据
     * @returns dict全部数据
--- a/cdTMP/src/layout/components/footer.vue
+++ b/cdTMP/src/layout/components/footer.vue
@@ -1,8 +1,8 @@
 <template>
    <div>
        <a-layout-footer class="flex items-center justify-center h-10 footer text-center"
-            >成都测试管理平台</a-layout-footer
-        >
+            >成都测试管理平台
+        </a-layout-footer>
    </div>
 </template>

--- a/cdTMP/src/layout/components/navbar.vue
+++ b/cdTMP/src/layout/components/navbar.vue
@@ -3,7 +3,12 @@
        <div class="left-side">
            <a-space>
                <img src="@/assets/img/wxwx-logo.svg" class="logo" alt="logo" @click="handleClickLogo" />
-                <a-typography-title :style="{ margin: 0, fontSize: '18px' }" :heading="5">
+                <a-typography-title
+                    class="title"
+                    @click="handleClickLogo"
+                    :style="{ margin: 0, fontSize: '18px' }"
+                    :heading="5"
+                >
                    成都测试管理平台
                </a-typography-title>
                <icon-menu-fold
@@ -154,7 +159,6 @@ const handleLogout = () => {
 const toggleDrawerMenu = inject("toggleDrawerMenu")
 // 点击图标返回首页
 const handleClickLogo = () => {
-    console.log("回到workplace")
    router.push({ name: "Workplace" })
 }

@@ -221,6 +225,27 @@ const testCreate = async () => {
        margin-left: 14px;
    }
 }
+
+.title {
+    cursor: pointer;
+    font-weight: 700;
+    transition: all 0.3s;
+    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
+    &:hover {
+        color: #fff;
+        -webkit-animation: neon6 0.5s ease-in-out infinite alternate;
+        -moz-animation: neon6 0.5s ease-in-out infinite alternate;
+        animation: neon6 0.5s ease-in-out infinite alternate;
+    }
+}
+@keyframes neon6 {
+    from {
+        text-shadow: 0 0 10px #fff, 0 0 20px #2563eb, 0 0 30px #2563eb, 0 0 40px #2563eb;
+    }
+    to {
+        text-shadow: 0 0 5px #fff, 0 0 10px #2563eb, 0 0 15px #2563eb, 0 0 20px #2563eb;
+    }
+}
 </style>

 <style lang="less">
--- a/cdTMP/src/layout/project-layout.vue
+++ b/cdTMP/src/layout/project-layout.vue
@@ -512,7 +512,6 @@ const loadMore = (nodeData) => {
        })
    }
 }
-
 //~~~~ 表单弹窗组件功能
 const maFormModalRef = ref()
 const title = ref("")
--- a/cdTMP/src/views/project/dut/components/FileInputModal/index.vue
+++ b/cdTMP/src/views/project/dut/components/FileInputModal/index.vue
@@ -0,0 +1,220 @@
+<template>
+    <div class="file-input-container">
+        <a-modal
+            v-model:visible="modalVisible"
+            width="80%"
+            title="设计需求批量写入"
+            :unmount-on-close="true"
+            :mask-closable="false"
+            ok-text="录入"
+            :esc-to-close="false"
+        >
+            <div class="uploadContainer">
+                <span :style="{ marginBottom: '10px', flex: '0 1 160px' }">上传设计需求.docx:</span>
+                <a-upload
+                    :style="{ marginBottom: '10px' }"
+                    :custom-request="handleRquest"
+                    :limit="1"
+                    accept=".docx"
+                ></a-upload>
+            </div>
+            <a-alert :style="{ margin: '10px 0' }" type="warning"
+                >上传录入提示信息：硬性要求，本辅助程序根据GJB438C文档结构进行解析，要求：1.功能需求章节必须包含<span
+                    class="important-text"
+                    >“CSCI功能需求”</span
+                >或<span class="important-text">“CSCI能力需求”</span>文字,且章节级别必须为<span class="important-text"
+                    >2级</span
+                >; 2.外部接口章节必须包含<span class="important-text">“CSCI外部接口需求”</span
+                >文字,且章节级别必须为<span class="important-text">2级</span
+                >。暂时只能解析这两个章节，如果错误请修改文档文字后再次上传，后续优化。</a-alert
+            >
+            <div class="operation-container">
+                <span :style="{ marginRight: '10px', fontWeight: 700 }">操作按钮:</span>
+                <a-button type="primary" @click="handleCreateAtLatest">新增一条</a-button>
+            </div>
+            <div class="demand-container">
+                <a-collapse show-expand-icon>
+                    <a-collapse-item v-for="(item, index) in htmlData" :key="index">
+                        <template #header>
+                            <a-input-group>
+                                <a-input
+                                    placeholder="章节号"
+                                    v-model="item.capter"
+                                    :style="{ width: '110px' }"
+                                    @click.stop.prevent
+                                ></a-input>
+                                <a-input
+                                    placeholder="标题"
+                                    v-model="item.title"
+                                    :style="{ width: '350px' }"
+                                    @click.stop.prevent
+                                ></a-input>
+                                <a-input
+                                    placeholder="标识"
+                                    v-model="item.ident"
+                                    :style="{ width: '160px' }"
+                                    @click.stop.prevent
+                                ></a-input>
+                                <a-select
+                                    :style="{ width: '200px' }"
+                                    placeholder="请选择设计需求类型"
+                                    @click.stop.prevent
+                                    v-model="item.demandType"
+                                >
+                                    <a-option v-for="it in demandType" :value="it.key">{{ it.title }}</a-option>
+                                </a-select>
+                            </a-input-group>
+                        </template>
+                        <div class="content">
+                            <a-textarea
+                                show-word-limit
+                                placeholder="设计需求内容"
+                                auto-size
+                                v-model="item.content"
+                                allow-clear
+                            />
+                        </div>
+                        <template #extra>
+                            <a-button-group>
+                                <a-button
+                                    type="primary"
+                                    status="success"
+                                    size="mini"
+                                    @click.stop.prevent="handledownCreate(index)"
+                                >
+                                    +下方新增
+                                </a-button>
+                                <a-button
+                                    type="primary"
+                                    status="danger"
+                                    size="mini"
+                                    @click.stop.prevent="handleDelete(index)"
+                                >
+                                    删除该条
+                                </a-button>
+                            </a-button-group>
+                        </template>
+                    </a-collapse-item>
+                </a-collapse>
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import mammoth from "mammoth"
+import dictApi from "@/api/system/dict"
+import { parseHtmlStringByDemandDut } from "@/views/project/dut/tools/parseHtmlString"
+// 单个设计需求录入模版
+const templateDemandObj = {
+    capter: "",
+    title: "",
+    ident: "",
+    demandType: "",
+    content: ""
+}
+// 先请求设计需求的dict，然后给demandType选项
+let demandType = []
+const getDictDemandType = async function () {
+    const res = await dictApi.getDictByCode({ code: "demandType" })
+    demandType = res.data
+}
+getDictDemandType()
+// 弹窗显示
+const modalVisible = ref(false)
+// 全部html数据-循环创建折叠项
+const htmlData = ref([
+    {
+        capter: "4.2.1.1",
+        title: "解析并执行注入指令",
+        ident: "RQGN01-UART-ZRZL",
+        demandType: "1",
+        content: `WXT星载触发处理单元主控软件通过UART总线与PDPU之间通讯，完成数据注入和广播注入的接收，其中包括注入指令、星表、主控软件目标文件、FPGA目标文件、算法参数、广播时间码、姿态等数据接收。
+通讯过程按照《EP卫星PDPU与WXT星载触发处理单元的通信协议》有关规定执行。`
+    },
+    {
+        capter: "4.2.1.2",
+        title: "接受星表注入",
+        ident: "RQGN01-UART",
+        demandType: "1",
+        content: `星表数据存储在触发处理单元NORFLASH基地址为0xBC000000，偏移地址0x100000~1FFFFF空间中，主备份NORFLASH存储同一份星表数据。软件在初始化的时候，将NORFLASH中的星表数据读取到算法调用内存空间。`
+    },
+    {
+        capter: "4.2.1.3",
+        title: "接收软件代码重构",
+        ident: "RQGN01-1553B-SWRCV",
+        demandType: "1",
+        content: `主控软件接收软件重构目标文件，支持乱序接收软件重构目标代码，每接收到一个首包（包序号为0），则认为是新一次目标文件接收开始，更新“软件重构状态”为软件重构接收中；若没有收到首包，对于之后接收到的中间包和尾包都丢弃；当尾包包序号以前的所有序号的数据包均接收完毕，则认为主控软件目标文件接收完毕，更新“软件重构状态”为软件重构写入中；在接收过程中，如果接收到中间包的包序号大于尾包包序号，则丢弃该中间包，并置“软件重构状态为”包序号错，之后停止当前目标文件接收直至接收到新的首包，如果前后收到两个包序号相同的数据包，则保留后接收到的数据包（尾包以第一次收到的为准）。`
+    }
+])
+// 上传行为函数
+const handleRquest = function (options) {
+    const { onProgress, onError, onSuccess, fileItem } = options
+    onProgress(0.1)
+    // 获取文件
+    let reader = new FileReader()
+    reader.readAsArrayBuffer(fileItem.file)
+    reader.onload = function (loadEvent) {
+        let arrayBuffer = loadEvent.target.result
+        mammoth
+            .convertToHtml({ arrayBuffer: arrayBuffer })
+            .then((res) => {
+                // 已经上传到浏览器了，需要解析为列表
+                onSuccess(1)
+                const rawHtml = res.value
+                const finalData = parseHtmlStringByDemandDut(rawHtml)
+                // 将finalData赋值给响应式数据ref变量：htmlData
+            })
+            .catch(function (error) {
+                console.log("处理错误导致失败，请检查前端代码")
+                console.log("错误如下：", error)
+                onError(error)
+            })
+    }
+}
+// 上方按钮：直接在最下新增一条
+const handleCreateAtLatest = () => {
+    const newDemand = JSON.parse(JSON.stringify(templateDemandObj))
+    htmlData.value.push(newDemand)
+}
+// 点击单条右侧按钮：下方新增 - 深拷贝,并插入到下方
+const handledownCreate = (index) => {
+    const newDemand = JSON.parse(JSON.stringify(templateDemandObj))
+    htmlData.value.splice(index + 1, 0, newDemand)
+}
+// 点击单条右侧按钮：删除
+const handleDelete = (index) => {
+    htmlData.value.splice(index, 1)
+}
+// 打开弹窗并初始化form数据
+const open = function () {
+    // 打开时候传入对象可初始化from
+    modalVisible.value = true
+}
+// 暴露该组件ref的方法
+defineExpose({ open })
+</script>
+
+<style lang="less" scoped>
+.uploadContainer {
+    display: flex;
+    align-items: center;
+    & span {
+        font-size: 1em;
+        font-weight: 700;
+    }
+}
+.demand-container {
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+}
+.operation-container {
+    margin-bottom: 5px;
+}
+.important-text {
+    font-weight: 700;
+    color: red;
+}
+</style>
--- a/cdTMP/src/views/project/dut/index.vue
+++ b/cdTMP/src/views/project/dut/index.vue
@@ -6,8 +6,17 @@
                <template #ident="{ record }">
                    {{ showType(record) }}
                </template>
+                <template #tableAfterButtons>
+                    <a-button status="success" type="outline" @click="handleAddFileInputDemand">
+                        <template #icon>
+                            <icon-plus />
+                        </template>
+                        上传需求快捷录入
+                    </a-button>
+                </template>
            </ma-crud>
        </div>
+        <file-input-modal ref="fileInputRef"></file-input-modal>
    </div>
 </template>

@@ -17,6 +26,7 @@ import { useRoute, useRouter } from "vue-router"
 import designDemandApi from "@/api/project/designDemand"
 import commonApi from "@/api/common"
 import { useTreeDataStore } from "@/store"
+import FileInputModal from "./components/FileInputModal/index.vue"
 const treeDataStore = useTreeDataStore()
 const route = useRoute()
 const router = useRouter()
@@ -152,6 +162,11 @@ const crudColumns = ref([
        height: 300
    }
 ])
+// ~~~大功能打开ma-form-modal~~~
+const fileInputRef = ref(null)
+const handleAddFileInputDemand = () => {
+    fileInputRef.value.open();
+}
 </script>

 <style lang="less" scoped></style>
--- a/cdTMP/src/views/project/dut/tools/parseHtmlString.js
+++ b/cdTMP/src/views/project/dut/tools/parseHtmlString.js
@@ -0,0 +1,63 @@
+/**
+ * 辅助函数，给每个h2增加个自定义属性，用来储存章节号，返回功能/接口h2节点对象【非DOM，有dom属性表示DOM】
+ */
+function getNeedH2NodeList(h1h2Node) {
+    const h2ObjList = []
+    // 首先将h1和h2节点都组成一个数组
+    let h1Index = 0,
+        h2Index = 0
+    h1h2Node.forEach((hDom) => {
+        if (hDom.tagName === "H1") {
+            // 找到h1，那么其index+1
+            h1Index += 1
+            h2Index = 0
+        } else if (hDom.tagName === "H2") {
+            // 按顺序找到h2了，
+            h2Index += 1
+            let h2Obj = {
+                chapter: h1Index + "." + h2Index,
+                dom: hDom,
+                text: hDom.innerText
+            }
+            h2ObjList.push(h2Obj)
+        }
+    })
+    // 1.后续增加识别的章节可从这里修改
+    return h2ObjList.filter(
+        (item) =>
+            item.text.includes("CSCI功能需求") ||
+            item.text.includes("CSCI外部接口需求") ||
+            item.text.includes("CSCI能力需求")
+    )
+}
+
+/**
+ * 思路：因为mammoth解析后变为html字符串，使用new DOMParser()转换为DOM进行解析
+ * 作用：创建DOMParser()对象，然后解析需求规格说明的html字符串，目前仅支持功能和接口需求
+ * 返回：Array[Object[String,String]]
+ */
+export function parseHtmlStringByDemandDut(htmlString) {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(htmlString, "text/html")
+    const h1h2NodeList = doc.querySelectorAll("h1,h2")
+    // 这一步得到功能需求、接口需求的h2对象，里面有dom、text、chapter
+    const h2ObjArray = getNeedH2NodeList(h1h2NodeList)
+    // 这里开始就要获取全部有用信息：
+    // 2.遍历全部DOM
+    const allArray = Array.from(doc.body.children)
+    const demandArray = []
+    let h2Index = 0
+    let locker = false
+    allArray.forEach((element) => {
+        // 2.1.找到h2ObjArray的位置
+        if (h2ObjArray[h2Index] && element === h2ObjArray[h2Index].dom) {
+            h2Index += 1
+            locker = true
+        } else if (element.tagName === "H1" || element.tagName === "H2") {
+            locker = false
+        } else if (locker && element.tagName !== "H2") {
+            console.log(element)
+            // 这里就是有效信息了，注意还要找H3/H4等信息 - 然后通过h2的索引也可以知道章节号
+        }
+    })
+}