NEZ-789 fix： 添加报错提示

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -7,7 +7,7 @@
     <div class="resize-box resize-box-alert" ref="resizeBox">
       <div class="chart-alert-info table-container" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
         <loading :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
+        <div v-if="showTitle" class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
           <el-popover
             v-if="isError"
             :close-delay=10
@@ -159,6 +159,10 @@ export default {
       type: Number,
       default: 0
     },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
     editChartId: {
       type: String,
       default: 'editChartId'
@@ -233,7 +237,6 @@ export default {
           label: this.$t('alert.alertName'),
           prop: 'alertRule',
           show: true,
-          width: 180
         }, /* {
           label: this.$t("alert.list.type"),
           prop: 'type',
@@ -905,3 +908,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+.table-container{
+  height: calc(100% - 40px);
+}
+</style>

nezha-fronted/src/components/charts/chartPreview.vue

@@ -168,7 +168,7 @@
         </div>
       </template>
 
-      <chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart" :chart-data="chart"  class="height-100"></chart-alert-list>
+      <chart-alert-list v-if="chart.type === 'alertList'" :showTitle="false" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart" :chart-data="chart"  class="height-100"></chart-alert-list>
 
       <template v-if="chart.type==='text'">
           <div  id="chartTextPreview" class="chart-text-preview height-100">
@@ -178,6 +178,14 @@
           </div>
       </template>
 
+        <template v-if="chart.type==='diagram'">
+          <div  id="chartDiagramPreview" class="chart-text-preview height-100">
+            <div style="height: 100%; overflow: auto;">
+                <diagram :topoData="chart.param.topo" :fromChartBox="true" :topologyIndexF="-3"/>
+            </div>
+          </div>
+      </template>
+
       <loading  ref="loadingPreview"  class="height-100"></loading>
     </el-dialog>
 </template>
@@ -190,12 +198,14 @@ import chartDataFormat from './chartDataFormat'
 import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
 import chartAlertList from './chart-alert-list'
 import chartConfig from '../page/dashboard/overview/chartConfig'
+import diagram from '@/components/common/ChartDiagram/diagram'
 import moment from 'moment-timezone'
 export default {
   name: 'chartPreview',
   components: {
     loading: loading,
-    'chart-alert-list': chartAlertList
+    'chart-alert-list': chartAlertList,
+    diagram
   },
   props: {
     panelId: Number,
@@ -288,6 +298,8 @@ export default {
         chartContainerId = 'chartAlertListPreview'
       } else if (chartType == 'text') {
         chartContainerId = 'chartTextPreview'
+      } else if (chartType == 'diagram') {
+        chartContainerId = 'chartDiagramPreview'
       }
 
       // 设置高度 chart-table
@@ -356,7 +368,7 @@ export default {
         //
       }
       // 后台获得数据
-      if (this.chart.type !== 'url' && this.chart.type !== 'text') {
+      if (this.chart.type !== 'url' && this.chart.type !== 'text' && this.chart.type !== 'diagram') {
         this.$refs.loadingPreview.startLoading()
         this.getChartData()
       } else if (this.chart.type == 'url') {

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -340,7 +340,7 @@ import { getMetricTypeValue } from '../js/tools'
 import bus from '../../../libs/bus'
 import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
 // 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect2, null)
+registerNode('rectangleImg', myShape, myAnchors, myIconRect2, myTextRect2)
 registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
 const canvasOptions = {

nezha-fronted/src/components/common/nzTransfer.vue

@@ -59,7 +59,7 @@
         </button>
       </div>
     </div>
-    <div :style="calcStyle" class="nz-transfer__box nz-transfer__box--right">
+    <div :style="calcStyle" class="nz-transfer__box nz-transfer__box--right" :class="showError?'error' : ''">
       <div class="box__header">
         <slot name="title"></slot>
         <slot></slot>
@@ -131,6 +131,10 @@ export default {
     },
     tableTitle: {
       type: Array
+    },
+    showError: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -315,4 +319,7 @@ export default {
 .hide-row {
   display: none !important;
 }
+.error{
+  border-color: #F56C6C !important;
+}
 </style>

nezha-fronted/src/components/common/project/L5/services/canvas.js

@@ -252,6 +252,7 @@ export function myIconRect2 (node) {
   node.fullIconRect = node.rect
 }
 export function myTextRect2 (node) {
+  node.data.text = ''
   node.textRect = new Rect(
     node.rect.x + node.paddingLeft,
     node.rect.y + node.rect.height - 20 - node.paddingBottom,

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -119,7 +119,7 @@
               </div>
             </div>
             <!--endpoint-->
-            <div class="right-box-endpoint-table">
+            <div class="right-box-endpoint-table"  :class="showError?'error' : ''">
               <div class="search-box" style="display: flex;justify-content: flex-end">
                 <el-button class="top-tool-btn" type="button" @click="showRightBox">
                   <i class="nz-icon-gear nz-icon"></i>
@@ -181,6 +181,7 @@
               </span>
               </div>
             </div>
+            <div v-if="showError" class="el-form-item__error">{{this.$t('validate.required')}}</div>
           </div>
         </el-form>
       </div>
@@ -432,7 +433,8 @@ export default {
           label: 'state',
           disabled: false
         }]
-      }
+      },
+      showError: false,
     }
   },
   methods: {
@@ -565,8 +567,11 @@ export default {
         }
         endpointList.push(endpoint)
       })
+      if (endpointList.length === 0) {
+        this.showError = true
+      }
       this.$refs.addEndpoint.validate((valid) => {
-        if (valid) {
+        if (valid && !this.showError) {
           this.$post('monitor/endpoint', endpointList).then(response => {
             this.prevent_opt.save = false
             if (response.code === 200) {
@@ -606,6 +611,7 @@ export default {
       })
     },
     addEndpoint () {
+      this.showError = false
       const arr = []
       this.assetSelection.forEach(item => {
         if (this.endpointTableData.find(endpoint => endpoint.assetId === item.id)) {
@@ -1230,4 +1236,7 @@ export default {
       }
     }
   }
+  .error{
+    border-color: #F56C6C !important;
+  }
 </style>

nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue

@@ -188,7 +188,9 @@
 
           <!-- 选择资产，穿梭框 -->
           <div class="form__sub-title">{{$t('overall.select')}}</div>
+          <div style="position: relative">
             <nz-transfer ref="transfer"
+                         :showError="showError"
                          style="margin-bottom: 20px;"
                          :page-obj="transfer.pageObj"
                          :search-msg="transfer.searchMsg"
@@ -200,6 +202,8 @@
                          @rightToLeft="removeAsset">
               <template v-slot:title>Selected</template>
             </nz-transfer>
+            <div v-if="showError" class="el-form-item__error">{{this.$t('validate.required')}}</div>
+          </div>
         </el-form>
       </div>
     </div>
@@ -330,8 +334,28 @@ export default {
           total: 0
         }
       },
-      rules: {},
+      rules: {
-      metaData: []
+        editType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authProtocol: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authUsername: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authPin: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authUserTip: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        authPinTip: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      metaData: [],
+      showError: false
     }
   },
   methods: {
@@ -345,12 +369,19 @@ export default {
     },
     save () {
       this.editData.ids = this.transfer.selectedData.map(d => d.id)
+      if (this.editData.ids.length === 0) {
+        this.showError = true
+      }
+      this.$refs.assetEditForm.validate((valid) => {
+        if (valid && !this.showError) {
           this.$put('asset/asset/bulkEdit', this.editData).then(res => {
             if (res.code === 200) {
               this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
               this.esc(true)
             }
           })
+        }
+      })
     },
     addLabel ([groupId, metaId]) {
       const label = this.metaData.find(m => m.id === metaId)
@@ -411,6 +442,7 @@ export default {
       this.transfer.tableData.forEach(d => {
         this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
       })
+      this.showError = false
     },
     removeAsset (toRemove) {
       this.transfer.selectedData = this.transfer.selectedData.filter(d => !toRemove.find(s => d.id === s.id))

nezha-fronted/src/components/common/searchInput.vue

@@ -116,7 +116,7 @@
                                 </ul>
                               </el-scrollbar>
                               <ul v-else>
-                                <li v-for="(item,key) in brandSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
+                                <li v-for="(item,key) in groupSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
                               </ul>
                             </div>
                             <div v-if="val.type === 'project'" :style="'top:' + selectDom.top +'; left:'+selectDom.left " class="select_info_list">