虚拟滚动列表、更改流程相关

pdaaphm-ui/package.json

@@ -60,7 +60,9 @@
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "vxe-table": "^2.11.0",
+    "xe-utils": "^3.5.30"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

pdaaphm-ui/src/main.js

@@ -37,6 +37,11 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+import 'xe-utils'
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+      
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -61,6 +66,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(VXETable)
 DictData.install()
 
 /**

pdaaphm-ui/src/views/index.vue

@@ -20,9 +20,9 @@
             </el-table-column>
           </el-table>
         </div>
-        <!-- 补全 -->
+        <!-- 去噪 -->
         <div class="tPanel">
-          <el-table size="mini" :data="completionList">
+          <el-table size="mini" :data="denoisingList">
             <el-table-column prop="resultDataName" label="数据" align="center">
               <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="scope.row.resultDataName" placement="top">
@@ -82,13 +82,13 @@
           </div>
         </div>
         <div class="one">
-          <div class="img oneBg even" @click="handleProcess(1)">
-            <div class="tag">去噪</div>
+          <div class="img oneBg even" @click="handleProcess(2)">
+            <div class="tag">补全</div>
           </div>
         </div>
         <div class="two">
-          <div class="img twoBg odd" @click="handleProcess(2)">
-            <div class="tag">补全</div>
+          <div class="img twoBg odd" @click="handleProcess(1)">
+            <div class="tag">去噪</div>
           </div>
         </div>
         <div class="three">
@@ -113,9 +113,9 @@
         </div>
       </div>
       <div class="bottomPanel">
-        <!-- 去噪 -->
+        <!-- 补全 -->
         <div class="bPanel">
-          <el-table size="mini" :data="denoisingList">
+          <el-table size="mini" :data="completionList">
             <el-table-column prop="resultDataName" label="数据" align="center">
               <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="scope.row.resultDataName" placement="top">
@@ -181,6 +181,13 @@
     </div>
     <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item v-if="dialogType === 4" label="选择数据类型" label-width="120px">
+          <el-radio-group v-model="type">
+            <el-radio :label="2">补全</el-radio>
+            <el-radio :label="1">去噪</el-radio>
+            <!-- <el-radio :label="4">特征提取</el-radio> -->
+          </el-radio-group>
+        </el-form-item>
         <el-form-item label="数据" prop="processType">
           <el-select v-model="form.processedDataId" placeholder="请选择执行的数据">
             <el-option v-for="(item, index) in optionalData" :key="index" :label="item.dataName"
@@ -208,11 +215,11 @@
               '曲线展示'
           }}</el-button>
       <div v-if="isTableShow && fileType !== '5'">
-        <el-table :data="completionData" size="mini" style="width: 100%;height: 500px;overflow:scroll;">
-          <el-table-column v-for="(item, index) in completionHeadData" :key="index" align="center" :prop="'val' + index"
-            :label="item">
-          </el-table-column>
-        </el-table>
+        <vxe-table border="none" size="mini" show-overflow highlight-hover-row height="400"
+          :row-config="{ isHover: true, isCurrent: true }" :sort-config="{ trigger: 'cell' }" :data="completionData">
+          <vxe-table-column v-for="(item, index) in completionHeadData" :key="index" align="center"
+            :field="'val' + index" :title="item"></vxe-table-column>
+        </vxe-table>
       </div>
       <div v-if="!isTableShow && fileType !== '5'" ref="completionChartRef" style="width: 100%; height: 400px;"></div>
       <ImagePreview v-if="fileType === '5'" :src="imgPreviewUrl"></ImagePreview>
@@ -265,12 +272,30 @@ export default {
       // filePath: null,
       fileType: null,
       chart: null,
-      imgPreviewUrl: null
+      imgPreviewUrl: null,
+      type: 2,
+      dialogType: null
     }
   },
   created() {
     this.getTableData()
   },
+  watch: {
+    // fileShowVisible
+    fileShowVisible(value) {
+      if (!value) {
+        this.isTableShow = false
+      }
+    },
+    type(value) {
+      getDataByType(value).then(res => {
+        this.optionalData = res.data;
+      });
+      getAlgConfigByType(value).then(res => {
+        this.optionalAglo = res.data;
+      });
+    }
+  },
   methods: {
     getTableData() {
       getDataProcessByType(0).then(res => {
@@ -303,12 +328,22 @@ export default {
     },
     handleProcess(type) {
       this.dialogVisible = true;
-      getDataByType(type).then(res => {
-        this.optionalData = res.data;
-      });
-      getAlgConfigByType(type).then(res => {
-        this.optionalAglo = res.data;
-      });
+      this.dialogType = type
+      if (type === 4) {
+        getDataByType(this.type).then(res => {
+          this.optionalData = res.data;
+        });
+        getAlgConfigByType(this.type).then(res => {
+          this.optionalAglo = res.data;
+        });
+      } else {
+        getDataByType(type).then(res => {
+          this.optionalData = res.data;
+        });
+        getAlgConfigByType(type).then(res => {
+          this.optionalAglo = res.data;
+        });
+      }
     },
     submitHandle() {
       addProcess(this.form).then(response => {
@@ -663,7 +698,7 @@ export default {
       return { contentData: completionContent, headData: completionHead, timeData }
     },
     // 图表设置
-    handleChartOption(content,head) {
+    handleChartOption(content, head) {
       this.chart = echarts.init(this.$refs.completionChartRef);
       // series数据
       const series = content.map((lineData, index) => ({
@@ -967,4 +1002,18 @@ export default {
   background-color: #0b333f !important;
   border: #0b333f;
 }
+
+::v-deep .vxe-body--row {
+  background-color: #0b333f;
+  color: white;
+}
+
+::v-deep .vxe-table--body :hover {
+  background-color: #0b333f;
+}
+
+::v-deep .vxe-header--row {
+  background-color: #1e262f;
+  color: white;
+}
 </style>

pdaaphm-ui/src/views/login.vue

@@ -222,4 +222,8 @@ export default {
 .login-code-img {
   height: 38px;
 }
+.el-input__inner{
+  background: white !important;
+  color: #000;
+}
 </style>