1.Style modification of scalar pop-up window

2.Code formatting

mindinsight/ui/src/views/train-manage/scalar.vue

@@ -226,9 +226,11 @@ limitations under the License.
 
       <span slot="footer"
             class="dialog-footer">
-        <el-button @click="thresholdCancel">{{$t('public.cancel')}}</el-button>
+        <el-button @click="thresholdCancel"
+                   size="mini">{{$t('public.cancel')}}</el-button>
         <el-button type="primary"
-                   @click="thresholdCommit">{{$t('public.sure')}}</el-button>
+                   @click="thresholdCommit"
+                   size="mini">{{$t('public.sure')}}</el-button>
       </span>
     </el-dialog>
 
@@ -251,9 +253,11 @@ limitations under the License.
       </div>
       <span slot="footer"
             class="dialog-footer">
-        <el-button @click="delThresholdCancel">{{$t('public.cancel')}}</el-button>
+        <el-button @click="delThresholdCancel"
+                   size="mini">{{$t('public.cancel')}}</el-button>
         <el-button type="primary"
-                   @click="delThresholdCommit">{{$t('public.sure')}}</el-button>
+                   @click="delThresholdCommit"
+                   size="mini">{{$t('public.sure')}}</el-button>
       </span>
     </el-dialog>
 
@@ -306,8 +310,8 @@ export default {
       thresholdErrorMsg: '',
       thresholdRelational: '',
       thresholdValue: [
-        {filterCondition: this.$t('scalar.lessThan'), value: ''},
-        {filterCondition: this.$t('scalar.lessThan'), value: ''},
+        { filterCondition: this.$t('scalar.lessThan'), value: '' },
+        { filterCondition: this.$t('scalar.lessThan'), value: '' },
       ],
       filterOptions: [
         {
@@ -420,7 +424,7 @@ export default {
       return;
     }
     document.title = `${decodeURIComponent(
-        this.$route.query.train_id,
+      this.$route.query.train_id
     )}-${this.$t('scalar.titleText')}-MindInsight`;
     // Adding a Listener
     window.addEventListener('resize', this.resizeCallback, false);
@@ -448,7 +452,7 @@ export default {
       if (localStorage.getItem('thresholdCache')) {
         try {
           this.thresholdLocal = JSON.parse(
-              localStorage.getItem('thresholdCache'),
+            localStorage.getItem('thresholdCache')
           );
           this.clearCache();
         } catch (e) {
@@ -476,7 +480,7 @@ export default {
           delete this.thresholdLocal[this.decodeTrainingJobId];
           localStorage.setItem(
             'thresholdCache',
-              JSON.stringify(this.thresholdLocal),
+            JSON.stringify(this.thresholdLocal)
           );
         }
       }
@@ -687,7 +691,7 @@ export default {
             }
 
             sampleObject.charData.charOption = this.formateCharOption(
-                  sampleIndex,
+              sampleIndex
             );
             const tempOption = sampleObject.charData.charOption;
             if (
@@ -726,7 +730,7 @@ export default {
 
     setOnePoint(sampleObject) {
       const that = this;
-      sampleObject.charObj.on('datazoom', function(params) {
+      sampleObject.charObj.on('datazoom', function (params) {
         const xAxisObject = params.batch[0];
         const yAxisObject = params.batch[1];
         const charData = sampleObject.charData.charOption.series[0].data;
@@ -785,7 +789,7 @@ export default {
 
     setRestore(sampleObject) {
       const that = this;
-      sampleObject.charObj.on('restore', function(params) {
+      sampleObject.charObj.on('restore', function (params) {
         const charData = sampleObject.charData.charOption.series[0].data;
         const tempCharOption = sampleObject.charData.charOption;
 
@@ -854,12 +858,12 @@ export default {
       if (curOriData) {
         if (sampleObject.log) {
           dataObj.data = this.formateSmoothData(
-              curOriData.logData[this.curBenchX],
+            curOriData.logData[this.curBenchX]
           );
           dataObjBackend.data = curOriData.logData[this.curBenchX];
         } else {
           dataObj.data = this.formateSmoothData(
-              curOriData.valueData[this.curBenchX],
+            curOriData.valueData[this.curBenchX]
           );
           dataObjBackend.data = curOriData.valueData[this.curBenchX];
         }
@@ -989,23 +993,23 @@ export default {
           position: (point, params, dom, rect, size) => {
             const curDom = document.getElementById(sampleObject.domId);
             if (!curDom) {
-              return {left: 0, bottom: '100%'};
+              return { left: 0, bottom: '100%' };
             }
             if (sampleObject.fullScreen) {
               if (point[0] + size.contentSize[0] <= size.viewSize[0]) {
-                return {left: point[0], bottom: '10%'};
+                return { left: point[0], bottom: '10%' };
               } else {
-                return {right: size.viewSize[0] - point[0], bottom: '10%'};
+                return { right: size.viewSize[0] - point[0], bottom: '10%' };
               }
             } else {
               const parentNode = curDom.parentNode;
               if (!parentNode) {
-                return {left: 0, bottom: '100%'};
+                return { left: 0, bottom: '100%' };
               }
               if (parentNode.offsetLeft > size.contentSize[0]) {
-                return {right: '100%', bottom: 0};
+                return { right: '100%', bottom: 0 };
               } else {
-                return {left: '100%', bottom: 0};
+                return { left: '100%', bottom: 0 };
               }
             }
           },
@@ -1090,7 +1094,7 @@ export default {
                     `display:inline-block;"></td><td>${parma.seriesName}</td>` +
                     `<td>${that.formateYaxisValue(parma.value[1])}</td>` +
                     `<td>${that.formateYaxisValue(
-                        curSerieOriData.stepData[parma.dataIndex][1],
+                      curSerieOriData.stepData[parma.dataIndex][1]
                     )}</td>` +
                     `<td>${curSerieOriData.stepData[parma.dataIndex][0]}</td>` +
                     `<td>${curSerieOriData.relativeData[
@@ -1098,8 +1102,8 @@ export default {
                     ][0].toFixed(3)}${unit}</td>` +
                     `<td>${that.dealrelativeTime(
                       new Date(
-                            curSerieOriData.absData[parma.dataIndex][0] * 1000,
-                        ).toString(),
+                        curSerieOriData.absData[parma.dataIndex][0] * 1000
+                      ).toString()
                     )}</td>` +
                     `</tr>`;
                 }
@@ -1185,8 +1189,8 @@ export default {
       ) {
         const tempStorgeArr = JSON.parse(
           JSON.stringify(
-                this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName],
-            ),
+            this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName]
+          )
         );
         let pieceStr = '';
         pieceStr = this.formatePieceStr(tempStorgeArr);
@@ -1221,7 +1225,7 @@ export default {
         if (sampleObject.updateFlag) {
           sampleObject.charObj.setOption(
             sampleObject.charData.charOption,
-              sampleObject.dataRemove,
+            sampleObject.dataRemove
           );
           sampleObject.updateFlag = false;
           sampleObject.dataRemove = false;
@@ -1230,7 +1234,7 @@ export default {
         // creat chart
         sampleObject.charObj = echarts.init(
           document.getElementById(sampleObject.domId),
-            null,
+          null
         );
         sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
         this.setOnePoint(sampleObject);
@@ -1336,13 +1340,13 @@ export default {
               const oriIndexData = sampleObject.charData.oriData[index];
               if (sampleObject.log) {
                 seriesData[index * 2].data = this.formateSmoothData(
-                    oriIndexData.logData[this.curBenchX],
+                  oriIndexData.logData[this.curBenchX]
                 );
                 seriesData[index * 2 + 1].data =
                   oriIndexData.logData[this.curBenchX];
               } else {
                 seriesData[index * 2].data = this.formateSmoothData(
-                    oriIndexData.valueData[this.curBenchX],
+                  oriIndexData.valueData[this.curBenchX]
                 );
                 seriesData[index * 2 + 1].data =
                   oriIndexData.valueData[this.curBenchX];
@@ -1713,13 +1717,13 @@ export default {
                 serie.data = this.formateSmoothData(
                   sampleObject.charData.oriData[index / 2].logData[
                     this.curBenchX
-                    ],
+                  ]
                 );
               } else {
                 serie.data = this.formateSmoothData(
                   sampleObject.charData.oriData[index / 2].valueData[
                     this.curBenchX
-                    ],
+                  ]
                 );
               }
             }
@@ -1815,13 +1819,13 @@ export default {
         tempOriData.forEach((originData, index) => {
           if (log) {
             tempOption.series[index * 2].data = this.formateSmoothData(
-                tempOriData[index].logData[this.curBenchX],
+              tempOriData[index].logData[this.curBenchX]
             );
             tempOption.series[index * 2 + 1].data =
               tempOriData[index].logData[this.curBenchX];
           } else {
             tempOption.series[index * 2].data = this.formateSmoothData(
-                tempOriData[index].valueData[this.curBenchX],
+              tempOriData[index].valueData[this.curBenchX]
             );
             tempOption.series[index * 2 + 1].data =
               tempOriData[index].valueData[this.curBenchX];
@@ -2275,7 +2279,7 @@ export default {
         }
         localStorage.setItem(
           'thresholdCache',
-            JSON.stringify(this.thresholdLocal),
+          JSON.stringify(this.thresholdLocal)
         );
 
         this.thresholdDialogVisible = false;
@@ -2392,7 +2396,7 @@ export default {
       this.clearCache();
       localStorage.setItem(
         'thresholdCache',
-          JSON.stringify(this.thresholdLocal),
+        JSON.stringify(this.thresholdLocal)
       );
       this.delThresholdVisible = false;
     },
@@ -2408,11 +2412,25 @@ export default {
 .cl-scalar-manage {
   height: 100%;
 
+  .el-dialog {
+    border-radius: 4px;
+  }
+
+  .el-dialog__header {
+    padding: 15px 15px 10px;
+    font-size: 14px;
+
     .el-dialog__title {
-    line-height: 24px;
-    font-size: 18px;
-    color: #303133;
-    font-weight: bold;
+      font-size: 14px;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 10px 15px;
+  }
+
+  .el-dialog__footer {
+    padding: 5px 15px 10px;
   }
 
   .w60 {
@@ -2776,7 +2794,7 @@ export default {
   }
 
   .fs16 {
-    font-size: 16px;
+    font-size: 14px;
     color: #6c7280;
     width: 180px;
   }
@@ -2789,17 +2807,6 @@ export default {
 }
 
 .delDialog {
-  .el-dialog__header {
-    padding: 15px 15px 10px;
-  }
-  .el-dialog__title {
-    font-weight: normal;
-    line-height: 18px;
-  }
-  .el-dialog__body {
-    padding: 10px 15px;
-  }
-
   .delThresholdItem {
     display: flex;
     margin-bottom: 10px;