计算模块：数据接入

故障录波：新增页面
单风机：去除横向滚动

ui/dasadmin/src/api/backend/airBlower/request.ts

@@ -1,7 +1,20 @@
 import createAxios from '/@/utils/axios'
 import { CommandReqType } from '/@/views/backend/equipment/airBlower/type'
 export const getAirBlowerListReq = () => {
-    return createAxios({
+    return createAxios<never, Promise<{
+        code: number,
+        data: {
+            attributeMap: any
+            belongLine: string
+            irn: string
+            madeinfactory: string
+            model: string
+            modelId: string
+            name: string
+        }[],
+        msg: string,
+        success: boolean
+    }>>({
         url: '/api/page/turbines/queryWindTurbinesPages',
         method: 'get',
     })
@@ -15,7 +28,7 @@ export const getBelongLineListReq = () => {
 }
 
 export const runAirBlowerReq = (data: (CommandReqType & { measType: 199 | 147 | 146 | 138 | 139 | 140 })[]) => {
-    return createAxios<unknown,Promise<{code:number,msg:string,success:boolean}>>({
+    return createAxios<unknown, Promise<{ code: number, msg: string, success: boolean }>>({
         url: '/api/page/turbines/windTurbinesControl',
         method: 'post',
         data: data

ui/dasadmin/src/api/backend/calc/request.ts

@@ -0,0 +1,61 @@
+import createAxios from '/@/utils/axios'
+import { ReqReturnType } from '/@/views/backend/calculate/type'
+
+export const getCalcListReq = () => {
+    return createAxios<never, Promise<ReqReturnType<{
+        name: string,
+        localName: string,
+        version: string,
+        description: string,
+        disabled: number,
+        cron: string
+    }[]>>>({
+        url: '/api/calc/module/list',
+        method: 'post'
+    })
+}
+
+export const registerCalcReq = (data: FormData) => {
+    return createAxios<never, Promise<ReqReturnType<never>>>({
+        url: '/api/calc/module/register',
+        method: 'post',
+        data: data,
+        headers:{
+            'Content-Type': 'multipart/form-data'
+        }
+    },
+        { customEncrypt: true }
+    )
+}
+
+export const removeCalcReq = (data: { moduleName: string }) => {
+    return createAxios<never, Promise<ReqReturnType<never>>>({
+        url: '/api/calc/module/remove',
+        method: 'post',
+        data: data
+    })
+}
+
+export const activeCalcReq = (data: { moduleName: string }) => {
+    return createAxios<never, Promise<ReqReturnType<never>>>({
+        url: '/api/calc/module/active',
+        method: 'post',
+        data: data
+    })
+}
+
+export const deactiveCalcReq = (data: { moduleName: string }) => {
+    return createAxios<never, Promise<ReqReturnType<never>>>({
+        url: '/api/calc/module/deactive',
+        method: 'post',
+        data: data
+    })
+}
+
+export const getScriptCalcReq = (data: { moduleName: string }) => {
+    return createAxios<never, Promise<ReqReturnType<string>>>({
+        url: '/api/calc/module/script',
+        method: 'post',
+        data: data
+    })
+}

ui/dasadmin/src/api/backend/malfunction/request.ts

@@ -0,0 +1,39 @@
+import createAxios from '/@/utils/axios'
+import { ReqReturnType } from '/@/views/backend/calculate/type'
+
+
+export const getMalFunctionListReq = (data: {
+    deviceCode: string
+    startTime: string
+    endTime: string
+}) => {
+    return createAxios<never, Promise<ReqReturnType<any>>>({
+        url: '/api/fdr/files',
+        method: 'post',
+        data
+    })
+}
+
+
+export const setConfigReq = (data: {
+    id: string
+    fdrFormat: string
+}) => {
+    return createAxios<never, Promise<ReqReturnType<never>>>({
+        url: '/api/fdr/updateFdrConfig',
+        method: 'post',
+        data
+    })
+}
+
+
+export const previewFileReq = (data: {
+    url: string
+    deviceCode: string
+}) => {
+    return createAxios<never, Promise<ReqReturnType<any>>>({
+        url: '/api/fdr/parseData',
+        method: 'post',
+        data
+    })
+}

ui/dasadmin/src/views/backend/WindBlower/index.vue

@@ -1473,6 +1473,9 @@ $labelHeight: 38px;
     min-height: 920px;
     background-color: #f2f3f5;
     // overflow: hidden;
+    .el-row{
+        width: calc(100% - 10px);
+    }
     .cardContentLeft {
         width: 100%;
         .overview {

ui/dasadmin/src/views/backend/calculate/index.vue

@@ -2,52 +2,78 @@
     <div class="calculate">
         <div class="header">
             <div class="headerTitle">计算引擎</div>
-            <el-button type="primary">注册/更新</el-button>
+            <div class="file">
+                <el-upload ref="upload" :show-file-list="false" :limit="1" :on-exceed="handleExceed" :http-request="register">
+                    <template #trigger>
+                        <el-button type="primary">注册/更新</el-button>
+                    </template>
+                </el-upload>
+            </div>
         </div>
         <div class="modulesList">
-            <div class="moduleRow" v-for="row in rowLength" :key="moduleList[(row - 1) * colLen].id">
+            <div class="moduleRow" v-for="row in rowLength" :key="moduleList[(row - 1) * colLen].name">
                 <div class="moduleItem">
                     <div class="itemMain">
                         <div class="title">
-                            {{ moduleList[(row - 1) * colLen].title }}
+                            {{ moduleList[(row - 1) * colLen].localName }}
                         </div>
                         <div class="versionTime">
                             <div class="version">{{ '版本：' + moduleList[(row - 1) * colLen].version }}</div>
+                            <div class="updateTime">{{ '更新于：----' }}</div>
+                            <!-- 
                             <div class="updateTime">{{ '更新于：' + moduleList[(row - 1) * colLen].updateTime }}</div>
+                             -->
                         </div>
                         <div class="main-main">
-                            {{ moduleList[(row - 1) * colLen].desc }}
+                            {{ moduleList[(row - 1) * colLen].description }}
                         </div>
                         <div class="footer-main">
-                            {{ '任务周期：' + moduleList[(row - 1) * colLen].taskRange }}
+                            {{ '任务周期：' + moduleList[(row - 1) * colLen].cron }}
                         </div>
                     </div>
                     <div class="itemAside">
+                        <el-popconfirm title="确认删除该计算模块么？" @confirm="remove(moduleList[(row - 1) * colLen].name)">
+                            <template #reference>
+                                <el-icon class="removeModule">
+                                    <Close />
+                                </el-icon>
+                            </template>
+                        </el-popconfirm>
                         <el-button type="primary">查看</el-button>
-                        <el-button v-if="moduleList[(row - 1) * colLen].status === 2" type="primary" plain>激活</el-button>
+                        <el-button v-if="moduleList[(row - 1) * colLen].disabled === 1" type="primary" plain @click="active">激活</el-button>
-                        <el-button v-if="moduleList[(row - 1) * colLen].status === 1" type="danger" plain>禁用</el-button>
+                        <el-button v-if="moduleList[(row - 1) * colLen].disabled === 0" type="danger" plain @click="deactive">禁用</el-button>
                     </div>
                 </div>
                 <div class="moduleItem" v-if="moduleList[(row - 1) * colLen + 1]">
                     <div class="itemMain">
                         <div class="title">
-                            {{ moduleList[(row - 1) * colLen + 1].title }}
+                            {{ moduleList[(row - 1) * colLen + 1].localName }}
                         </div>
                         <div class="versionTime">
                             <div class="version">{{ '版本：' + moduleList[(row - 1) * colLen + 1].version }}</div>
-                            <div class="updateTime">{{ '更新于：' + moduleList[(row - 1) * colLen + 1].updateTime }}</div>
+                            <div class="updateTime">{{ '更新于：----' }}</div>
+                           <!--   
+                            <div class="updateTime">{{ '更新于：' + moduleList[(row - 1) * colLen + 1]?.updateTime ?? '--' }}</div>
+                            -->
                         </div>
                         <div class="main-main">
-                            {{ moduleList[(row - 1) * colLen + 1].desc }}
+                            {{ moduleList[(row - 1) * colLen + 1].description }}
                         </div>
                         <div class="footer-main">
-                            {{ '任务周期：' + moduleList[(row - 1) * colLen + 1].taskRange }}
+                            {{ '任务周期：' + moduleList[(row - 1) * colLen + 1].cron }}
                         </div>
                     </div>
                     <div class="itemAside">
+                        <el-popconfirm title="确认删除该计算模块么？" @confirm="remove(moduleList[(row - 1) * colLen + 1].name)">
+                            <template #reference>
+                                <el-icon class="removeModule">
+                                    <Close />
+                                </el-icon>
+                            </template>
+                        </el-popconfirm>
                         <el-button type="primary">查看</el-button>
-                        <el-button v-if="moduleList[(row - 1) * colLen + 1].status === 2" type="primary" plain>激活</el-button>
+                        <el-button v-if="moduleList[(row - 1) * colLen + 1].disabled === 1" type="primary" plain @click="active">激活</el-button>
-                        <el-button v-if="moduleList[(row - 1) * colLen + 1].status === 1" type="danger" plain>禁用</el-button>
+                        <el-button v-if="moduleList[(row - 1) * colLen + 1].disabled === 0" type="danger" plain @click="deactive">禁用</el-button>
                     </div>
                 </div>
                 <div class="moduleItem" style="visibility: hidden" v-else></div>
@@ -58,58 +84,84 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-const moduleList = ref([
+import { getCalcListReq, registerCalcReq, removeCalcReq, activeCalcReq, deactiveCalcReq, getScriptCalcReq } from '/@/api/backend/calc/request'
+import { ElMessage, UploadInstance, UploadProps, UploadRawFile, genFileId } from 'element-plus'
+import { Close } from '@element-plus/icons-vue'
+
+const moduleList = ref<
     {
-        id: 1,
+        name: string
-        status: 1,
+        localName: string
-        title: '风场统计量实时计算模块',
+        version: string
-        version: '1.0.0',
+        description: string
-        updateTime: '2022-01-01 12:35:56',
+        disabled: number
-        desc: '此脚本以风场为单位，包含：全场总有功功率、全场总无功功率、全场平均风速等。',
+        cron: string
-        taskRange: '0/5****?',
+    }[]
-    },
+>([])
-    {
-        id: 2,
-        status: 2,
-        title: '单机组统计量实时计算模块',
-        version: '1.0.1',
-        updateTime: '2022-01-01 12:35:56',
-        desc: '此脚本以机组为单位，计算各机组的实时计算量，包含：有功可增量、有功可减量、4GC有功指令等',
-        taskRange: '0/5****?',
-    },
-    {
-        id: 1,
-        status: 1,
-        title: '风场统计量实时计算模块',
-        version: '1.0.0',
-        updateTime: '2022-01-01 12:35:56',
-        desc: '此脚本以风场为单位，包含：全场总有功功率、全场总无功功率、全场平均风速等。',
-        taskRange: '0/5****?',
-    },
-    {
-        id: 2,
-        status: 2,
-        title: '单机组统计量实时计算模块',
-        version: '1.0.1',
-        updateTime: '2022-01-01 12:35:56',
-        desc: '此脚本以机组为单位，计算各机组的实时计算量，包含：有功可增量、有功可减量、4GC有功指令等',
-        taskRange: '0/5****?',
-    },
-    {
-        id: 1,
-        status: 1,
-        title: '风场统计量实时计算模块',
-        version: '1.0.0',
-        updateTime: '2022-01-01 12:35:56',
-        desc: '此脚本以风场为单位，包含：全场总有功功率、全场总无功功率、全场平均风速等。',
-        taskRange: '0/5****?',
-    },
-])
 
 const colLen = 2
 const rowLength = computed(() => {
     return Math.ceil(moduleList.value.length / 2)
 })
+
+const getList = () => {
+    getCalcListReq().then((res) => {
+        console.log(res)
+        moduleList.value = res.data
+    })
+}
+
+const upload = ref<UploadInstance>()
+const handleExceed: UploadProps['onExceed'] = (files) => {
+    upload.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    upload.value!.handleStart(file)
+}
+const register = (options: any) => {
+    console.log(options)
+    const formData = new FormData()
+    formData.append('file', options.file)
+    registerCalcReq(formData).then((res) => {
+        if (res.success) {
+            ElMessage.success('注册/更新成功！')
+            getList()
+        }
+    })
+}
+const remove = (name: string) => {
+    const data = { moduleName: name }
+    removeCalcReq(data).then((res) => {
+        if (res.success) {
+            ElMessage.success('删除成功！')
+            getList()
+        }
+    })
+}
+const active = (name: string) => {
+    activeCalcReq({ moduleName: name }).then((res) => {
+        if (res.success) {
+            ElMessage.success('激活成功！')
+            getList()
+        }
+    })
+}
+const deactive = (name: string) => {
+    deactiveCalcReq({ moduleName: name }).then((res) => {
+        if (res.success) {
+            ElMessage.success('禁用成功！')
+            getList()
+        }
+    })
+}
+const getScript = (name: string) => {
+    getScriptCalcReq({ moduleName: name }).then((res) => {
+        if (res.success) {
+            // 预览
+        }
+    })
+}
+getList()
 </script>
 
 <style scoped lang="scss">
@@ -145,6 +197,7 @@ const rowLength = computed(() => {
             }
         }
         .el-button {
+            margin-left: 10px;
             width: 100px;
             height: 40px;
         }
@@ -207,18 +260,35 @@ const rowLength = computed(() => {
                     }
                 }
                 .itemAside {
+                    position: relative;
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;
                     width: 10%;
                     min-width: 90px;
+                    .removeModule {
+                        position: absolute;
+                        top: -2px;
+                        right: -5px;
+                        font-size: 20px;
+                        color: rgba(0, 0, 0, 0);
+                        cursor: pointer;
+                        transition: color 0.5s;
+                    }
                     .el-button {
                         margin: 10px 0;
                         width: 80px;
                         height: 40px;
                     }
                 }
+                &:hover {
+                    .itemAside {
+                        .removeModule {
+                            color: rgba(0, 0, 0, 1);
+                        }
+                    }
+                }
             }
         }
     }

ui/dasadmin/src/views/backend/calculate/type.ts

@@ -0,0 +1,6 @@
+export type ReqReturnType<T> = {
+    data: T;
+    code: number;
+    msg: string;
+    success: boolean;
+}

ui/dasadmin/src/views/backend/equipment/airBlower/index.vue

@@ -163,9 +163,9 @@
 
 <script setup lang="ts">
 import { SelectTypeObjType, SelectTypeKeyUnionType, TableDataObjType, TableColumnType } from './type'
-import { onUnmounted, reactive, ref, watch, nextTick, KeepAlive } from 'vue'
+import { onUnmounted, reactive, ref, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { getAirBlowerListReq, getBelongLineListReq, runAirBlowerReq } from '/@/api/backend/airBlower/request'
+import { getAirBlowerListReq, getBelongLineListReq } from '/@/api/backend/airBlower/request'
 import { CircleCheck, CircleClose, Loading } from '@element-plus/icons-vue'
 import { ElMessage, TableInstance, ElPopconfirm } from 'element-plus'
 import { useRouter, useRoute } from 'vue-router'

ui/dasadmin/src/views/backend/malfunction/index.vue

@@ -0,0 +1,683 @@
+<template>
+    <div class="malfunction">
+        <el-container class="container">
+            <el-aside class="aside">
+                <div class="searchTree">
+                    <el-input v-model="searchTreeValue" clearable placeholder="搜索" :suffix-icon="Search" @change="searchTree"> </el-input>
+                </div>
+                <div class="treeMain">
+                    <el-scrollbar>
+                        <el-tree
+                            ref="treeRef"
+                            highlight-current
+                            :data="treeData"
+                            :props="defaultProps"
+                            node-key="id"
+                            :default-expanded-keys="defaultExpandKeys"
+                            @node-click="handleNodeClick"
+                        ></el-tree>
+                    </el-scrollbar>
+                </div>
+            </el-aside>
+            <el-container class="mainContainer">
+                <el-header class="header">
+                    <div class="searchFileName">
+                        <span>文件名称</span>
+                        <el-input v-model="searchData.fileName"></el-input>
+                    </div>
+                    <div class="searchDate">
+                        <span>日期</span>
+                        <el-date-picker
+                            v-model="searchData.date"
+                            type="monthrange"
+                            unlink-panels
+                            start-placeholder="开始时间"
+                            end-placeholder="结束时间"
+                            format="YYYY-MM"
+                            date-format="YYYY/MM"
+                            :shortcuts="shortcuts"
+                            @change="getListForAirBlower"
+                        ></el-date-picker>
+                    </div>
+                    <div class="btnPart">
+                        <el-button v-show="curTreeData.id !== '0'" :icon="Setting" @click="openConfigDialog">配置</el-button>
+                        <!--
+                        <el-button type="primary" :icon="Download">下载</el-button>
+                        <el-button type="primary" plain :icon="Delete">删除</el-button>
+                        -->
+                    </div>
+                </el-header>
+                <el-main class="main">
+                    <el-table :data="tableData">
+                        <el-table-column type="selection" width="55" />
+                        <el-table-column label="文件名称" prop="name" align="center"></el-table-column>
+                        <el-table-column label="修改时间" prop="lastModified" align="center"></el-table-column>
+                        <el-table-column label="文件大小" prop="size" align="center"></el-table-column>
+                        <el-table-column label="操作" align="center" width="80">
+                            <template #default="scope">
+                                <el-button text type="primary" @click="readFile(scope.row)">查看</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+                <el-footer class="footer">
+                    <div class="footerPart">
+                        <el-pagination
+                            v-model:current-page="pageSetting.current"
+                            v-model:page-size="pageSetting.pageSize"
+                            :total="pageSetting.total"
+                            :page-sizes="pageSetting.pageSizes"
+                            background
+                            :pager-count="7"
+                            layout="total,prev, pager, next, jumper,sizes"
+                            @change="changePageSetting"
+                        ></el-pagination>
+                    </div>
+                </el-footer>
+            </el-container>
+        </el-container>
+    </div>
+    <el-dialog v-model="configDialogVisible" title="配置信息" width="500">
+        <el-form ref="configFormRef" :model="configFormData" label-width="120" :rules="configFormRules">
+            <el-form-item prop="timeFormat" label="时间格式">
+                <el-input v-model="configFormData.timeFormat"></el-input>
+            </el-form-item>
+            <el-form-item prop="delimiter" label="分隔符">
+                <el-input v-model="configFormData.delimiter"></el-input>
+            </el-form-item>
+            <el-form-item prop="validStartLine" label="有效起始行数">
+                <el-input-number v-model="configFormData.validStartLine"></el-input-number>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button type="primary" @click="submitConfig">保存</el-button>
+            <el-button @click="cancelConfig">取消</el-button>
+        </template>
+    </el-dialog>
+
+    <el-dialog v-model="previewFileDialogVisible" title="文件预览" width="1000" @close="closePreviewFileDialog">
+        <el-row class="previewFilePart">
+            <el-col :span="8" class="colPart leftCol" v-loading="previewTreeLoading">
+                <el-input
+                    v-model="previewSearchTreeVal"
+                    @change="previewSearchTree"
+                    class="previewSearchTree"
+                    :suffix-icon="Search"
+                    clearable
+                ></el-input>
+                <el-scrollbar class="previewTreeScrollbar">
+                    <el-tree
+                        ref="previewTreeRef"
+                        :data="previewTreeData"
+                        :props="previewTreeProps"
+                        show-checkbox
+                        node-key="key"
+                        @check-change="handleCheckChange"
+                    ></el-tree>
+                </el-scrollbar>
+            </el-col>
+            <el-col :span="16" class="colPart">
+                <div class="title">图表</div>
+                <div class="chartPart">
+                    <div ref="previewChartRef" class="previewChart"></div>
+                </div>
+            </el-col>
+        </el-row>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, nextTick } from 'vue'
+import { dayjs, ElMessage, FormInstance, TreeInstance } from 'element-plus'
+import { Download, Delete, Search, Setting } from '@element-plus/icons-vue'
+import { getMalFunctionListReq, setConfigReq, previewFileReq } from '/@/api/backend/malfunction/request'
+import { equipList } from '/@/api/backend/temperature/request'
+import * as echarts from 'echarts'
+// import { encrypt_aes, generateRandomNumber } from '/@/utils/crypto'
+import { tableItemData } from './type'
+import init from '/@/utils/iconfont'
+const defaultProps = {
+    children: 'children',
+    label: 'label',
+}
+
+const treeRef = ref()
+let originTreeChildData: {
+    label: string
+    id: string
+    code:string
+    children?: any[]
+}[] = []
+const treeData = ref<
+    {
+        label: string
+        id: string
+        code: string
+        children?: any[]
+    }[]
+>([
+    {
+        label: '风机列表',
+        id: '0',
+        code: '0',
+        children: [],
+    },
+])
+const defaultExpandKeys: string[] = ['0']
+
+const searchTreeValue = ref('')
+const searchTree = (val: string) => {
+    if(val == ''){
+        treeData.value[0].children = originTreeChildData
+        return 
+    }
+    const reg = new RegExp(val, 'i')
+    treeData.value[0].children = originTreeChildData.filter((item: any) => {
+        return reg.test(item.label)
+    }) ?? []
+}
+
+const curTreeData = ref<{
+    label: string
+    id: string
+    code: string
+    children?: any[]
+}>({
+    label: '风机列表',
+    id: '0',
+    code: '0',
+})
+
+const handleNodeClick = (target: { label: string; id: string; code: string }) => {
+    curTreeData.value = target
+    if (target.id === '0') return
+    getListForAirBlower()
+}
+
+const getTreeDataList = () => {
+    return new Promise((resolve) => {
+        equipList({ objectType: 10002 }).then((res) => {
+            const data = res.data.map((item: any) => {
+                return {
+                    label: item.name,
+                    code: item.code,
+                    id: item.id,
+                }
+            })
+            originTreeChildData = data
+            treeData.value[0].children = data
+            resolve(res.data[0])
+        })
+    })
+}
+
+const searchData = reactive<{ fileName: ''; date: Date[] }>({
+    fileName: '',
+    date: [dayjs().toDate(), dayjs().toDate()],
+})
+const shortcuts = [
+    {
+        text: '本月',
+        value: () => {
+            const start = dayjs().startOf('month').toDate()
+            const end = dayjs().endOf('month').toDate()
+            return [start, end]
+        },
+    },
+    {
+        text: '上月',
+        value: () => {
+            const start = dayjs().subtract(1, 'month').toDate()
+            const end = dayjs().subtract(1, 'month').toDate()
+            return [start, end]
+        },
+    },
+    {
+        text: '近三月',
+        value: () => {
+            const start = dayjs().subtract(2, 'month').toDate()
+            const end = dayjs().toDate()
+            return [start, end]
+        },
+    },
+]
+
+let originTableData = ref<tableItemData[]>([])
+const tableData = computed(() => {
+    let data = originTableData.value
+    if (searchData.fileName) {
+        const reg = new RegExp(searchData.fileName, 'i')
+        data = data.filter((item) => reg.test(item.name))
+    }
+    const res = data.slice((pageSetting.current - 1) * pageSetting.pageSize, pageSetting.current * pageSetting.pageSize)
+    pageSetting.total = res.length
+    return res
+})
+const pageSetting = reactive({
+    current: 1,
+    pageSize: 20,
+    total: 0,
+    pageSizes: [20, 50, 100],
+})
+
+const changePageSetting = () => {}
+
+const getListForAirBlower = () => {
+    const data = {
+        deviceCode: curTreeData.value.code,
+        startTime: dayjs(searchData.date[0]).format('YYYY-MM'),
+        endTime: dayjs(searchData.date[1]).format('YYYY-MM'),
+    }
+    console.log(data)
+
+    getMalFunctionListReq(data).then((res) => {
+        if (res.success) {
+            pageSetting.total = res.data.length
+            originTableData.value = res.data
+        }
+    })
+}
+
+const configDialogVisible = ref(false)
+
+const configFormRef = ref<FormInstance>()
+const configFormData = reactive({
+    timeFormat: 'yyyy-MM-dd-HH:mm:ss.SSS',
+    delimiter: ';',
+    validStartLine: 6,
+})
+
+const openConfigDialog = () => {
+    configDialogVisible.value = true
+}
+
+const configFormRules = {
+    timeFormat: [
+        {
+            required: true,
+            message: '请输入时间格式',
+            trigger: 'blur',
+        },
+    ],
+    delimiter: [
+        {
+            required: true,
+            message: '请输入分隔符',
+            trigger: 'blur',
+        },
+    ],
+    validStartLine: [
+        {
+            required: true,
+            message: '请输入有效起始行',
+            trigger: 'change',
+        },
+    ],
+}
+
+const submitConfig = () => {
+    configFormRef.value?.validate((valid) => {
+        if (valid) {
+            setAirBlowerConfig()
+        }
+    })
+}
+const cancelConfig = () => {
+    configDialogVisible.value = false
+    configFormRef.value?.resetFields()
+}
+
+const setAirBlowerConfig = () => {
+    setConfigReq({
+        id: curTreeData.value.id,
+        fdrFormat: JSON.stringify(configFormData),
+    })
+        .then(() => {
+            ElMessage.success('配置成功')
+            configDialogVisible.value = false
+        })
+        .catch((err) => {
+            ElMessage.error('配置失败')
+        })
+}
+
+const previewFileDialogVisible = ref(false)
+const readFile = (data: tableItemData) => {
+    previewFileDialogVisible.value = true
+    getFileData(data.path)
+}
+const closePreviewFileDialog = () => {
+    previewTreeData.value = []
+    previewChartData = []
+    curSeries = []
+    previewChartInstance && previewChartInstance.clear()
+}
+
+const previewTreeLoading = ref(false)
+const previewTreeRef = ref<TreeInstance>()
+const previewTreeData = ref()
+let originPreviewTreeData: any = []
+const previewTreeProps = {
+    children: 'children',
+    label: 'label',
+    isLeaf: 'isLeaf',
+}
+const previewSearchTreeVal = ref('')
+const previewSearchTree = (val: string) => {
+    console.log(val)
+    if (val === '') {
+        previewTreeData.value = originPreviewTreeData
+        return
+    }
+    const regex = new RegExp(val, 'i')
+    const filterData = originPreviewTreeData.filter((item: any) => regex.test(item.label))
+    previewTreeData.value = filterData
+    nextTick(() => {
+        previewTreeRef.value?.setCheckedKeys(selectPreviewTree)
+    })
+}
+
+const selectPreviewTree: any = []
+const handleCheckChange = (data: any, state: boolean) => {
+    previewChartInstance && previewChartInstance.clear()
+    console.log(data, state)
+    if (state) {
+        selectPreviewTree.push(data.key)
+    } else {
+        const index = selectPreviewTree.findIndex((item: string) => item === data.key)
+        selectPreviewTree.splice(index, 1)
+    }
+    initPreviewChart()
+}
+
+let previewChartData: any = {}
+let curSeries: any = []
+let previewChartInstance: any = null
+const previewChartRef = ref()
+
+const createSeriresData = () => {
+    const seriesData: any = []
+    const curAttr = curSeries.map((item: any) => item.name)
+    selectPreviewTree.forEach((item: string, index: number) => {
+        if (curAttr.includes(item)) {
+            seriesData.push(curSeries[index])
+        }
+    })
+    selectPreviewTree.forEach((item: string) => {
+        if (!curAttr.includes(item)) {
+            const color = '#' + Math.floor(Math.random() * 16777215).toString(16)
+            const data = {
+                name: item,
+                type: 'line',
+                barWidth: 20,
+                itemStyle: {
+                    color: color,
+                    barBorderRadius: 2,
+                },
+                smooth: 0.6,
+                symbol: 'none',
+                data: previewChartData[item],
+            }
+            seriesData.push(data)
+        }
+    })
+    curSeries = seriesData
+    return seriesData
+}
+const initPreviewChart = () => {
+    const chart = previewChartInstance ?? echarts.init(previewChartRef.value)
+    const series = createSeriresData()
+    const option = {
+        grid: {
+            top: 50,
+            right: 23,
+            bottom: 10,
+            left: 18,
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#dadada',
+                    width: 1,
+                    type: 'solid',
+                },
+            },
+            axisLabel: {
+                //x轴文字的配置
+                show: true,
+                color: '#4E5969',
+                interval: 'auto',
+                formatter: function (value: any) {
+                    return value.slice(0, 10)
+                },
+                //rotate: 45
+            },
+            splitLine: {
+                //分割线配置
+                show: false,
+                lineStyle: {
+                    color: '#999999',
+                },
+            },
+            data: previewChartData['TimeStamp'],
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '历史值',
+                nameTextStyle: {
+                    color: '#4E5969',
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#dadada',
+                        width: 0,
+                        type: 'solid',
+                    },
+                },
+                axisLabel: {
+                    //x轴文字的配置
+                    show: true,
+                    color: '#4E5969',
+                },
+                axisTick: { show: false },
+                splitLine: {
+                    interval: 50,
+                    lineStyle: {
+                        type: 'dashed',
+                        color: '#dadada',
+                    },
+                },
+            },
+        ],
+        legend: {
+            data: [],
+            textStyle: {
+                color: '#73767a',
+            },
+        },
+        series: series,
+    }
+    chart.setOption(option)
+    previewChartInstance = chart
+}
+
+const getFileData = (url: string) => {
+    previewTreeLoading.value = true
+    previewFileReq({
+        deviceCode: curTreeData.value.code,
+        url: url,
+    }).then((res) => {
+        previewChartData = res.data
+        const attrName = Object.keys(res.data)
+        const data: any = []
+        attrName.forEach((item) => {
+            if (item === 'TimeStamp') {
+                previewChartData.TimeStamp = previewChartData.TimeStamp.map((item: any) => {
+                    return dayjs(item).format('YYYY-MM-DD HH:mm:ss')
+                })
+            } else {
+                data.push({
+                    label: item,
+                    key: item,
+                    isLeaf: true,
+                })
+            }
+        })
+        previewTreeData.value = data
+        originPreviewTreeData = data
+        previewTreeLoading.value = false
+    })
+}
+
+onMounted(() => {
+    getTreeDataList().then((data: any) => {
+        treeRef.value && treeRef.value.setCurrentKey(data.id, true)
+        curTreeData.value = data
+        getListForAirBlower()
+    })
+})
+</script>
+
+<style lang="scss" scoped>
+.malfunction {
+    width: 100%;
+    height: 100%;
+    .container {
+        width: 100%;
+        height: 100%;
+        .aside {
+            width: 260px;
+            height: 100%;
+            padding: 0 20px;
+            border-right: 1px solid #eaebed;
+            .searchTree {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                height: 80px;
+                .el-input {
+                    width: 220px;
+                    height: 40px;
+                }
+            }
+            .treeMain {
+                width: 100%;
+                height: calc(100% - 80px);
+            }
+        }
+        .mainContainer {
+            width: calc(100% - 260px);
+            height: 100%;
+            .header {
+                display: flex;
+                align-items: center;
+                width: 100%;
+                height: 80px;
+                .searchFileName {
+                    display: flex;
+                    align-items: center;
+                    width: 320px;
+                    height: 40px;
+                    span {
+                        width: 70px;
+                    }
+                    .el-input {
+                        width: 220px;
+                        height: 40px;
+                    }
+                }
+                .searchDate {
+                    display: flex;
+                    align-items: center;
+                    width: 400px;
+                    height: 40px;
+                    span {
+                        flex-shrink: 0;
+                        width: 45px;
+                    }
+                    :deep(.el-date-editor) {
+                        width: 400px;
+                        height: 40px;
+                    }
+                }
+                .btnPart {
+                    margin-left: auto;
+                    width: 360px;
+                    text-align: right;
+                    .el-button {
+                        margin: 0 10px;
+                        width: 100px;
+                        height: 40px;
+                    }
+                }
+            }
+            .main {
+                width: 100%;
+            }
+        }
+        .footer {
+            .footerPart {
+                display: flex;
+                justify-content: right;
+            }
+        }
+    }
+}
+.el-input-number {
+    width: 100%;
+}
+.previewFilePart {
+    width: 100%;
+    height: 500px;
+    .colPart {
+        width: 100%;
+        height: 100%;
+        .title {
+            padding-left: 20px;
+            width: 100%;
+            height: 30px;
+            font-size: 20px;
+        }
+        .previewSearchTree {
+            width: 100%;
+            height: 40px;
+            padding: 0 20px 10px 20px;
+        }
+        .previewTreeScrollbar {
+            height: calc(100% - 40px);
+        }
+        .chartPart {
+            position: relative;
+            width: 100%;
+            height: calc(100% - 40px);
+            .label {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 100px;
+                font-size: 20px;
+            }
+            .previewChart {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+    .leftCol {
+        border-right: 1px solid #eaebed;
+    }
+}
+</style>

ui/dasadmin/src/views/backend/malfunction/type.ts

@@ -0,0 +1,7 @@
+export type tableItemData = {
+    name: string,
+    type: string,
+    size: string,
+    lastModified: string,
+    path: string
+}