CN-802：error交互实施

src/assets/css/common.scss

@@ -43,3 +43,19 @@ body {
 .el-form-item__error {
   padding-top: 0 !important;
 }
+
+/* 请求报错样式关于popover的修改 */
+.error-hover {
+  //min-width: 30px !important;
+  display: inline-block;
+  background: #FFE7E6 !important;
+  border: 1px solid rgba(226,97,84,0.42) !important;
+  padding: 8px 12px !important;
+  border-radius: 4px !important;
+  font-size: 14px !important;
+  color: #F53A19 !important;
+  font-weight: 400 !important;
+  .el-popper__arrow {
+    display: none !important;
+  }
+}

src/assets/css/components/components/common/chart-error.scss

@@ -0,0 +1,51 @@
+.error-block {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.error-block-tooltip {
+  display: inline-block;
+  width: auto;
+  max-width: 350px;
+  background: #FFE7E6;
+  border: 1px solid rgba(226,97,84,0.42);
+  border-radius: 4px;
+  font-size: 14px;
+  color: #F53A19;
+  font-weight: 400;
+  padding: 10px 12px;
+  margin: 12px;
+}
+.new-error-icon {
+  position: relative;
+  display: inline-block;
+}
+
+.new-error-icon .error-content {
+  position: absolute;
+  z-index: 2;
+  top: -42px;
+  left: 0;
+  visibility: hidden;
+  max-width: 220px;
+  overflow: scroll;
+  height: auto;
+  background: #FFE7E6;
+  border: 1px solid rgba(226,97,84,0.42);
+  border-radius: 4px;
+  font-size: 14px;
+  color: #F53A19;
+  font-weight: 400;
+  padding: 5px 12px;
+}
+
+.error-icon {
+  font-size: 17px !important;
+  margin-bottom: -1px;
+  margin-left: 5px;
+}
+
+.error-icon1 {
+  margin-left: -2px;
+  margin-right: 8px;
+}

src/assets/css/components/index.scss

@@ -72,3 +72,4 @@
 @import 'views/charts2/dnsEventChart';
 @import './views/charts2/dnsEventChartByPie';
 //@import '../chart';
+@import './components/common/chart-error';

src/assets/css/components/views/charts2/npmRelatedSessions.scss

@@ -2,6 +2,7 @@
   height: 100%;
   width: 100%;
   .npm-sessions-title {
+    display: flex;
     font-size: 14px;
     color: #353636;
     font-weight: 500;
@@ -27,6 +28,14 @@
       border-bottom-left-radius: 4px;
       border-right: none;
     }
+    .npm-sessions-div-gray {
+      height: 100%;
+      background: rgba(113,113,113,0.30);
+      border: 1px solid rgba(113,113,113,0.30);
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      border-right: none;
+    }
   }
 
   .npm-sessions-body {

src/components/common/Error.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div v-if="showSmall">
+      <el-popover
+          :width="localPopoverWidth"
+          placement="top-start"
+          trigger="hover"
+          :visible-arrow="false"
+          class="error-popover"
+          popper-class="error-hover"
+          style="background: #1b2e3b !important;"
+          :content="content">
+        <template #reference>
+          <span>
+            <svg class="icon error-icon" aria-hidden="true">
+              <use xlink:href="#cn-icon-baocuo"></use>
+            </svg>
+<!--            <i v-if="icon" :class="`one-icon-${icon}`"></i>-->
+          </span>
+        </template>
+      </el-popover>
+<!--      不使用popover实现hover，后续考虑替换为该方案-->
+<!--      <span class="new-error-icon" @mouseenter="hoverError">-->
+<!--        <svg class="icon item-popover-up" aria-hidden="true">-->
+<!--          <use xlink:href="#cn-icon-baocuo"></use>-->
+<!--        </svg>-->
+<!--        <div id="error-content" class="error-content">-->
+<!--          rview/appCompanyCyclrview/appCompanyCycleTrafficTotal?startTime=getSecond(this.timeFilter.startTime)&endTime=getSecond(this.timeFilter.endTime)&appCompanies=%27Tencent%27,%27Jingdong%27,%27Akamai%27,%27Bytedance%27,%27Baidu%27,%27Huawei%27,%27Beike%27,%27Aiqiyi%27,%27Ctrip%27,%27Meituan%27-->
+<!--        </div>-->
+<!--      </span>-->
+    </div>
+
+    <div v-else class="error-block">
+      <div class="error-block-tooltip" :style="{'max-width': localMaxWidth, 'width': localWidth}">
+        <svg class="icon item-popover-up error-icon1" aria-hidden="true">
+          <use xlink:href="#cn-icon-baocuo"></use>
+        </svg>
+        {{ content }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Error',
+  props: {
+    small: {
+      type: String
+    },
+    content: {
+      type: String,
+      default: 'Error！'
+    },
+    width: {
+      type: String
+    },
+    maxWidth: {
+      type: String,
+      default: '350'
+    },
+    icon: {
+      type: String
+    },
+    svg: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      showSmall: false, // 显示错误的类型，true为图表模块内显示报错，false为标题后显示报错
+      localWidth: '',
+      localMaxWidth: '',
+      localPopoverWidth: '350'
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  methods: {
+    initData () {
+      if (this.small !== undefined) {
+        this.showSmall = true
+        this.localPopoverWidth = this.width !== undefined
+      } else {
+        this.showSmall = false
+      }
+
+      if (this.width) {
+        this.localWidth = Math.abs(parseFloat(this.width)) + 'px'
+      }
+
+      if (this.maxWidth) {
+        this.localMaxWidth = Math.abs(parseFloat(this.maxWidth)) + 'px'
+      }
+    },
+    /**
+     * 鼠标移入事件，用于获取弹窗dom，修改距离父元素的top
+     */
+    hoverError (e) {
+      // const dom = document.getElementById('error-content')
+      // if (dom) {
+      //   console.log('---', dom.clientHeight)
+      // }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -20,6 +20,7 @@ import bus from 'tiny-emitter'
 import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
 import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 import PanelChartList from '@/views/charts/PanelChartList'
+import Error from '@/components/common/Error'
 import 'lib-flexible'
 
 const emitter = new bus()
@@ -46,6 +47,7 @@ app.mixin(commonMixin)
 app.component('date-time-range', DateTimeRange)
 app.component('time-refresh', TimeRefresh)
 app.component('panel-chart-list', PanelChartList)
+app.component('chart-error', Error)
 
 app.mount('#app')
 

src/views/charts2/charts/npm/RelatedSessions.vue

@@ -1,9 +1,13 @@
 <template>
  <div class="npm-sessions">
-   <div class="npm-sessions-title">{{$t('npm.relatedSessions')}}</div>
+   <div class="npm-sessions-title">
+     {{$t('npm.relatedSessions')}}
+     <chart-error v-if="showError" small :content="errorMsg" />
+   </div>
    <div class="npm-sessions-div">
      <div class="npm-sessions-div-green" id="green" v-show="clientSessions > 0"></div>
      <div class="npm-sessions-div-red" id="red" v-show="serverSessions > 0"></div>
+     <div class="npm-sessions-div-gray" id="gray" v-show="showError || isNoData"></div>
    </div>
    <div class="npm-sessions-body">
      <div class="npm-sessions-body-left">
@@ -36,9 +40,11 @@ import { getSecond } from '@/utils/date-util'
 import unitConvert from '@/utils/unit-convert'
 import { unitTypes } from '@/utils/constants'
 import chartMixin from '@/views/charts2/chart-mixin'
+import ChartError from '@/components/common/Error'
 
 export default {
   name: 'RelatedSessions',
+  components: { ChartError },
   mixins: [chartMixin],
   data () {
     return {
@@ -46,7 +52,11 @@ export default {
       unitConvert,
       unitTypes,
       clientSessions: 0,
-      serverSessions: 0
+      serverSessions: 0,
+      showError: false,
+      errorMsg: '',
+      noData: false,
+      isNoData: false
     }
   },
   watch: {
@@ -66,10 +76,15 @@ export default {
         ip: condition[1]
       }
       const divGreen = document.getElementById('green')
-      const divred = document.getElementById('red')
+      const divRed = document.getElementById('red')
+      const divGray = document.getElementById('gray')
       get(api.npm.overview.relatedSessions, params).then(res => {
         if (res.code === 200) {
+          this.showError = false
+          this.isNoData = false
+
           this.sessionData = res.data.result
+          // * 1 是将其转为number，避免相加变成字符串拼接
           this.clientSessions = this.sessionData.clientSessions / (this.sessionData.clientSessions * 1 + this.sessionData.serverSessions * 1)
           this.serverSessions = this.sessionData.serverSessions / (this.sessionData.clientSessions * 1 + this.sessionData.serverSessions * 1)
           this.sessionData.clientSessions = unitConvert(this.clientSessions, unitTypes.percent).join('')
@@ -77,11 +92,30 @@ export default {
           if (this.clientSessions === 1) {
             divGreen.style.borderRadius = 4 + 'px'
           } else if (this.serverSessions === 1) {
-            divred.style.borderRadius = 4 + 'px'
+            divRed.style.borderRadius = 4 + 'px'
+          } else if (this.clientSessions === 0 && this.serverSessions === 0) {
+            this.isNoData = true
+            divGray.style.borderRadius = 4 + 'px'
+            divGray.style.width = '100%'
           }
+
           divGreen.style.width = this.sessionData.clientSessions
-          divred.style.width = this.sessionData.serverSessions
+          divRed.style.width = this.sessionData.serverSessions
+        } else {
+          this.showError = true
+          this.errorMsg = res.message
+          divGray.style.borderRadius = 4 + 'px'
+          divGray.style.width = '100%'
+          this.sessionData.clientSessions = '—'
+          this.sessionData.serverSessions = '—'
         }
+      }).catch(error => {
+        this.showError = true
+        this.errorMsg = error.message
+        divGray.style.borderRadius = 4 + 'px'
+        divGray.style.width = '100%'
+        this.sessionData.clientSessions = '—'
+        this.sessionData.serverSessions = '—'
       }).finally(() => {
         this.toggleLoading(false)
       })