back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue

@@ -142,7 +142,48 @@ export default {
       // 排行榜
       RankingData: [],
       // 表格
-      AnomalyStatisticsTable: [],
+      AnomalyStatisticsTable: [
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        },
+        {
+          name: '接口名称',
+          address: 'http://hhhhhhhhhhhhhhhhhhhh',
+          method: '调用方法',
+          type: '组件类型',
+          provider: '提供商名称',
+          state: '监控状态'
+        }
+      ],
       // 分页
       currentPage4: 1,
       total: 0

front/src/views/capacitySquare/components/algorithm.vue

@@ -1,20 +1,6 @@
 <!-- 智能算法 -->
 <template>
   <div class="algorithm">
-    <div style="display: flex">
-      <div class="select">
-        <div class="top" @click="selectFlag = !selectFlag">
-          {{ typeName }}
-          <div class="light"></div>
-        </div>
-        <div class="bottom" v-show="selectFlag">
-          <span class="light"></span>
-          <div @click="getList('全市')">全市</div>
-          <div @click="getList('市级')">市级</div>
-          <div @click="getList('区级')">区级</div>
-          <div @click="getList('企业')">企业</div>
-        </div>
-      </div>
     <div class="select">
       <div class="top" @click="selectFlag2 = true">
         {{ typeName2 }}
@@ -27,12 +13,19 @@
         </div>
       </div>
     </div>
-    </div>
-
     <div class="algorithm-class">
-      <div v-for="(item, index) in dataList" :key="`algorithm-${index}`" class="algorithm-card">
+      <div
-        <a-image :src="algorithmCardPhoto(item.infoList, item)" :width="525" :height="275" :fallback="imgSrc"
+        v-for="(item, index) in dataList"
-          :preview="false"></a-image>
+        :key="`algorithm-${index}`"
+        class="algorithm-card"
+      >
+        <a-image
+          :src="algorithmCardPhoto(item.infoList, item)"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+          :preview="false"
+        ></a-image>
 
         <a-tooltip>
           <template #title>{{ item.name }}</template>
@@ -49,15 +42,10 @@
   import { getCategoryTreePage } from '@/api/personalCenter'
   import { pageWithAttrs } from '@/api/abilityStatistics'
   import { ref, onMounted, onBeforeUnmount } from 'vue'
-
-
-const type = ref(null)
-const typeName = ref('全市')
   const typeName2 = ref('全部')
   const dictList = ref([])
   const dataList = ref([])
   const selectFlag2 = ref(false)
-const selectFlag = ref(false)
   getCategoryTreePage({
     page: 1,
     limit: 99,
@@ -93,7 +81,7 @@ const getList2 = (val) => {
     selectFlag2.value = false
     pageWithAttrsFunction()
   }
-let algorithmclassDom = null
+  let algorithmclass = null
   const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
   const dataLength = ref(true)
   const isNoMore = ref(false)
@@ -148,43 +136,15 @@ const algorithmFunction = (e) => {
     }
   }
 
-const getList = (str) => {
-  if (str) {
-    algorithmclassDom.scrollTop = 0
-    switch (str) {
-      case '全市':
-        type.value = null
-        typeName.value = '全 市'
-        break
-      case '市级':
-        type.value = 2
-        typeName.value = '市 级'
-        break
-      case '区级':
-        type.value = 3
-        typeName.value = '区 级'
-        break
-      case '企业':
-        type.value = 4
-        typeName.value = '企 业'
-        break
-    }
-    params.pageNum = 1
-  }
-  selectFlag.value = false
-  alert('调取接口')
-  // getData(str)
-}
-
   onMounted(() => {
-  algorithmclassDom = document.querySelector('.algorithm-class')
+    algorithmclass = document.querySelector('.algorithm-class')
     if (dataLength.value) {
       //监听滚动事件
-    algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
+      algorithmclass.addEventListener('scroll', algorithmFunction, true)
     }
   })
   onBeforeUnmount(() => {
-  algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
+    algorithmclass.removeEventListener('scroll', algorithmFunction, true)
   })
 </script>
 
@@ -196,7 +156,6 @@ onBeforeUnmount(() => {
       font-size: 0.2rem;
       font-family: webfont;
       position: relative;
-
       .top {
         cursor: pointer;
         width: 3.61rem;
@@ -207,18 +166,17 @@ onBeforeUnmount(() => {
         background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
         background-size: 100%;
         position: relative;
-
         .light {
           width: 0.56rem;
           height: 3px;
           position: absolute;
           top: 0.4rem;
           left: 1.52rem;
-        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
+          background: url('~@/assets/capacitySquare/select-light1.png')
+            no-repeat;
           background-size: 100%;
         }
       }
-
       .bottom {
         cursor: pointer;
         position: absolute;
@@ -227,7 +185,6 @@ onBeforeUnmount(() => {
         z-index: 1000;
         background: rgba(57, 134, 239, 0.68);
         border: 1px solid #aed5ff;
-
         .light {
           display: inline-block;
           width: 2.39rem;
@@ -235,10 +192,10 @@ onBeforeUnmount(() => {
           position: absolute;
           top: -0.08rem;
           left: -0.3rem;
-        background: url('~@/assets/capacitySquare/select-light2.png') no-repeat;
+          background: url('~@/assets/capacitySquare/select-light2.png')
+            no-repeat;
           background-size: 100%;
         }
-
         & > div {
           width: 1.8rem;
           height: 0.4rem;
@@ -246,13 +203,11 @@ onBeforeUnmount(() => {
           text-align: center;
           border-top: 1px solid #aed5ff;
         }
-
         & > div:nth-of-type(1) {
           border: none;
         }
       }
     }
-
     .algorithm-class {
       // margin-top: 0.6rem;
       margin-bottom: 0.18rem;
@@ -262,7 +217,6 @@ onBeforeUnmount(() => {
       overflow: auto;
       margin-left: 1.15rem;
       margin-right: 0.15rem;
-
       .algorithm-card {
         height: 2.75rem;
         width: 5.25rem;
@@ -271,7 +225,6 @@ onBeforeUnmount(() => {
         margin-bottom: 0.4rem;
         margin-right: 0.65rem;
         position: relative;
-
         :deep(.ant-image) {
           img {
             margin-top: 0.15rem;
@@ -280,14 +233,13 @@ onBeforeUnmount(() => {
             margin-left: 0.1rem;
           }
         }
-
         .algorithm-card-photo {
           height: 100%;
           width: 100%;
-        background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
+          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+            no-repeat;
           background-size: 100%;
         }
-
         .algorithm-card-title {
           position: absolute;
           height: 0.6rem;
@@ -298,12 +250,12 @@ onBeforeUnmount(() => {
           font-family: alibaba;
           bottom: 0.15rem;
           padding-left: 0.22rem;
-        background: url('~@/assets/capacitySquare/algorithm-title-bg.png') no-repeat;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
           background-size: 100%;
           display: flex;
           flex-direction: column;
           justify-content: center;
-
           span {
             line-height: 0.24rem;
             overflow: hidden;
@@ -311,24 +263,20 @@ onBeforeUnmount(() => {
             white-space: nowrap;
             cursor: pointer;
           }
-
           span:last-child {
             font-size: 0.14rem;
           }
         }
       }
     }
-
     .algorithm-class::-webkit-scrollbar-track-piece {
       background: #a5bcdb;
       border-radius: 0.08rem;
     }
-
     .algorithm-class::-webkit-scrollbar-thumb {
       height: 3.2rem;
       background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
     }
-
     .algorithm-class::-webkit-scrollbar {
       height: 8.8rem;
       width: 0.08rem;

front/src/views/capacitySquare/components/layer.vue

@@ -1,20 +1,6 @@
 <!-- 图层服务 -->
 <template>
   <div class="algorithm">
-    <div style="display: flex">
-      <div class="select">
-        <div class="top" @click="selectFlag = !selectFlag">
-          {{ typeName }}
-          <div class="light"></div>
-        </div>
-        <div class="bottom" v-show="selectFlag">
-          <span class="light"></span>
-          <div @click="getList('全市')">全市</div>
-          <div @click="getList('市级')">市级</div>
-          <div @click="getList('区级')">区级</div>
-          <div @click="getList('企业')">企业</div>
-        </div>
-      </div>
     <div class="select">
       <div class="top" @click="selectFlag2 = true">
         {{ typeName2 }}
@@ -27,11 +13,19 @@
         </div>
       </div>
     </div>
-    </div>
     <div class="algorithm-class">
-      <div v-for="(item, index) in dataList" :key="`algorithm-${index}`" class="algorithm-card">
+      <div
-        <a-image :src="algorithmCardPhoto(item.infoList)" :width="525" :height="275" :fallback="imgSrc"
+        v-for="(item, index) in dataList"
-          :preview="false"></a-image>
+        :key="`algorithm-${index}`"
+        class="algorithm-card"
+      >
+        <a-image
+          :src="algorithmCardPhoto(item.infoList)"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+          :preview="false"
+        ></a-image>
 
         <a-tooltip>
           <template #title>{{ item.name }}</template>
@@ -48,14 +42,10 @@
   import { getCategoryTreePage } from '@/api/personalCenter'
   import { pageWithAttrs } from '@/api/abilityStatistics'
   import { ref, onMounted, onBeforeUnmount } from 'vue'
-
-const type = ref(null)
-const typeName = ref('全市')
   const typeName2 = ref('全部')
   const dictList = ref([])
   const dataList = ref([])
   const selectFlag2 = ref(false)
-const selectFlag = ref(false)
   getCategoryTreePage({
     page: 1,
     limit: 99,
@@ -91,7 +81,7 @@ const getList2 = (val) => {
     selectFlag2.value = false
     pageWithAttrsFunction()
   }
-let algorithmclassDom = null
+  let algorithmclass = null
   const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
   const dataLength = ref(true)
   const isNoMore = ref(false)
@@ -118,35 +108,6 @@ const algorithmCardPhoto = (List) => {
   const detailFunction = (id) => {
     window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
   }
-
-const getList = (str) => {
-  if (str) {
-    algorithmclassDom.scrollTop = 0
-    switch (str) {
-      case '全市':
-        type.value = null
-        typeName.value = '全 市'
-        break
-      case '市级':
-        type.value = 2
-        typeName.value = '市 级'
-        break
-      case '区级':
-        type.value = 3
-        typeName.value = '区 级'
-        break
-      case '企业':
-        type.value = 4
-        typeName.value = '企 业'
-        break
-    }
-    params.pageNum = 1
-  }
-  selectFlag.value = false
-  alert('调取接口')
-  // getData(str)
-}
-
   const layerFunction = (e) => {
     var scrollTop = e.currentTarget.scrollTop
     var windowHeight = e.currentTarget.clientHeight
@@ -170,14 +131,14 @@ const layerFunction = (e) => {
     }
   }
   onMounted(() => {
-  algorithmclassDom = document.querySelector('.algorithm-class')
+    algorithmclass = document.querySelector('.algorithm-class')
     if (dataLength.value) {
       //监听滚动事件
-    algorithmclassDom.addEventListener('scroll', layerFunction, true)
+      algorithmclass.addEventListener('scroll', layerFunction, true)
     }
   })
   onBeforeUnmount(() => {
-  algorithmclassDom.removeEventListener('scroll', layerFunction, true)
+    algorithmclass.removeEventListener('scroll', layerFunction, true)
   })
 </script>
 
@@ -189,7 +150,6 @@ onBeforeUnmount(() => {
       font-size: 0.2rem;
       font-family: webfont;
       position: relative;
-
       .top {
         cursor: pointer;
         width: 3.61rem;
@@ -200,18 +160,17 @@ onBeforeUnmount(() => {
         background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
         background-size: 100%;
         position: relative;
-
         .light {
           width: 0.56rem;
           height: 3px;
           position: absolute;
           top: 0.4rem;
           left: 1.52rem;
-        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
+          background: url('~@/assets/capacitySquare/select-light1.png')
+            no-repeat;
           background-size: 100%;
         }
       }
-
       .bottom {
         cursor: pointer;
         position: absolute;
@@ -220,7 +179,6 @@ onBeforeUnmount(() => {
         z-index: 1000;
         background: rgba(57, 134, 239, 0.68);
         border: 1px solid #aed5ff;
-
         .light {
           display: inline-block;
           width: 2.39rem;
@@ -228,10 +186,10 @@ onBeforeUnmount(() => {
           position: absolute;
           top: -0.08rem;
           left: -0.3rem;
-        background: url('~@/assets/capacitySquare/select-light2.png') no-repeat;
+          background: url('~@/assets/capacitySquare/select-light2.png')
+            no-repeat;
           background-size: 100%;
         }
-
         & > div {
           width: 1.8rem;
           height: 0.4rem;
@@ -239,13 +197,11 @@ onBeforeUnmount(() => {
           text-align: center;
           border-top: 1px solid #aed5ff;
         }
-
         & > div:nth-of-type(1) {
           border: none;
         }
       }
     }
-
     .algorithm-class {
       // margin-top: 0.6rem;
       margin-bottom: 0.18rem;
@@ -255,7 +211,6 @@ onBeforeUnmount(() => {
       overflow: auto;
       margin-left: 1.15rem;
       margin-right: 0.15rem;
-
       .algorithm-card {
         height: 2.75rem;
         width: 5.23rem;
@@ -264,7 +219,6 @@ onBeforeUnmount(() => {
         margin-bottom: 0.4rem;
         margin-right: 0.65rem;
         position: relative;
-
         :deep(.ant-image) {
           img {
             margin-top: 0.15rem;
@@ -273,14 +227,13 @@ onBeforeUnmount(() => {
             margin-left: 0.1rem;
           }
         }
-
         .algorithm-card-photo {
           height: 100%;
           width: 100%;
-        background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
+          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+            no-repeat;
           background-size: 100%;
         }
-
         .algorithm-card-title {
           position: absolute;
           height: 0.6rem;
@@ -291,12 +244,12 @@ onBeforeUnmount(() => {
           font-family: alibaba;
           bottom: 0.15rem;
           padding-left: 0.22rem;
-        background: url('~@/assets/capacitySquare/algorithm-title-bg.png') no-repeat;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
           background-size: 100%;
           display: flex;
           flex-direction: column;
           justify-content: center;
-
           span {
             line-height: 0.24rem;
             overflow: hidden;
@@ -304,24 +257,20 @@ onBeforeUnmount(() => {
             white-space: nowrap;
             cursor: pointer;
           }
-
           span:last-child {
             font-size: 0.14rem;
           }
         }
       }
     }
-
     .algorithm-class::-webkit-scrollbar-track-piece {
       background: #a5bcdb;
       border-radius: 0.08rem;
     }
-
     .algorithm-class::-webkit-scrollbar-thumb {
       height: 3.2rem;
       background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
     }
-
     .algorithm-class::-webkit-scrollbar {
       height: 8.8rem;
       width: 0.08rem;