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>
@@ -46,31 +39,26 @@
   </div>
 </template>
 <script setup>
-import { getCategoryTreePage } from '@/api/personalCenter'
+  import { getCategoryTreePage } from '@/api/personalCenter'
-import { pageWithAttrs } from '@/api/abilityStatistics'
+  import { pageWithAttrs } from '@/api/abilityStatistics'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
-
+  const typeName2 = ref('全部')
-
+  const dictList = ref([])
-const type = ref(null)
+  const dataList = ref([])
-const typeName = ref('全市')
+  const selectFlag2 = ref(false)
-const typeName2 = ref('全部')
+  getCategoryTreePage({
-const dictList = ref([])
-const dataList = ref([])
-const selectFlag2 = ref(false)
-const selectFlag = ref(false)
-getCategoryTreePage({
     page: 1,
     limit: 99,
     dictTypeId: '1513712507692818433',
-}).then((res) => {
+  }).then((res) => {
     dictList.value = ['全部']
     res.data.data.list.map((val) => {
       // if (val.dictLabel !== '其他') {
       dictList.value.push(val.dictLabel)
       // }
     })
-})
+  })
-const params = {
+  const params = {
     deptIds: [],
     districtId: '',
     infoList: [{ attrType: '组件类型', attrValue: '智能算法' }],
@@ -79,8 +67,8 @@ const params = {
     pageNum: 1,
     pageSize: 9,
     type: '组件服务',
-}
+  }
-const getList2 = (val) => {
+  const getList2 = (val) => {
     typeName2.value = val
     if (val == '全部') {
       params.infoList = [{ attrType: '组件类型', attrValue: '智能算法' }]
@@ -92,23 +80,23 @@ const getList2 = (val) => {
     }
     selectFlag2.value = false
     pageWithAttrsFunction()
-}
+  }
-let algorithmclassDom = null
+  let algorithmclass = null
-const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
+  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
-const dataLength = ref(true)
+  const dataLength = ref(true)
-const isNoMore = ref(false)
+  const isNoMore = ref(false)
-let url = ref('')
+  let url = ref('')
-const pageWithAttrsFunction = () => {
+  const pageWithAttrsFunction = () => {
     pageWithAttrs(params).then((res) => {
       dataList.value = res.data.data.records
       if (res.data.data.records.length < 9) {
         dataLength.value = false
       }
     })
-}
+  }
-pageWithAttrsFunction()
+  pageWithAttrsFunction()
-//图片显示
+  //图片显示
-const algorithmCardPhoto = (List, item) => {
+  const algorithmCardPhoto = (List, item) => {
     let obj = List.filter((item) => item.attrType === '应用场景')[0]
     if (obj && obj.attrValue != '') {
       console.log(
@@ -120,12 +108,12 @@ const algorithmCardPhoto = (List, item) => {
       obj = JSON.parse(obj.attrValue)[0].img
     }
     return obj || ''
-}
+  }
-//跳转详情页
+  //跳转详情页
-const detailFunction = (id) => {
+  const detailFunction = (id) => {
     window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
-}
+  }
-const algorithmFunction = (e) => {
+  const algorithmFunction = (e) => {
     var scrollTop = e.currentTarget.scrollTop
     var windowHeight = e.currentTarget.clientHeight
     var scrollHeight = e.currentTarget.scrollHeight
@@ -146,57 +134,28 @@ const algorithmFunction = (e) => {
     } else {
       isNoMore.value = false
     }
-}
-
-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(() => {
+  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(() => {
+  onBeforeUnmount(() => {
-  algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
+    algorithmclass.removeEventListener('scroll', algorithmFunction, true)
-})
+  })
 </script>
 
 <style lang="less" scoped>
-.algorithm {
+  .algorithm {
     .select {
       margin: 0.1rem 0 0.1rem 0.2rem;
       color: #fff;
       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,24 +192,22 @@ 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 {
-      &>div {
           width: 1.8rem;
           height: 0.4rem;
           line-height: 0.4rem;
           text-align: center;
           border-top: 1px solid #aed5ff;
         }
-
+        & > div:nth-of-type(1) {
-      &>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,28 +263,24 @@ 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;
       border-radius: 0.08rem;
     }
-}
+  }
 </style>

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>
@@ -45,30 +39,26 @@
   </div>
 </template>
 <script setup>
-import { getCategoryTreePage } from '@/api/personalCenter'
+  import { getCategoryTreePage } from '@/api/personalCenter'
-import { pageWithAttrs } from '@/api/abilityStatistics'
+  import { pageWithAttrs } from '@/api/abilityStatistics'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
-
+  const typeName2 = ref('全部')
-const type = ref(null)
+  const dictList = ref([])
-const typeName = ref('全市')
+  const dataList = ref([])
-const typeName2 = ref('全部')
+  const selectFlag2 = ref(false)
-const dictList = ref([])
+  getCategoryTreePage({
-const dataList = ref([])
-const selectFlag2 = ref(false)
-const selectFlag = ref(false)
-getCategoryTreePage({
     page: 1,
     limit: 99,
     dictTypeId: '1513712507692818433',
-}).then((res) => {
+  }).then((res) => {
     dictList.value = ['全部']
     res.data.data.list.map((val) => {
       // if (val.dictLabel !== '其他') {
       dictList.value.push(val.dictLabel)
       // }
     })
-})
+  })
-const params = {
+  const params = {
     deptIds: [],
     districtId: '',
     infoList: [{ attrType: '组件类型', attrValue: '图层服务' }],
@@ -77,8 +67,8 @@ const params = {
     pageNum: 1,
     pageSize: 9,
     type: '组件服务',
-}
+  }
-const getList2 = (val) => {
+  const getList2 = (val) => {
     typeName2.value = val
     if (val == '全部') {
       params.infoList = [{ attrType: '组件类型', attrValue: '图层服务' }]
@@ -90,22 +80,22 @@ const getList2 = (val) => {
     }
     selectFlag2.value = false
     pageWithAttrsFunction()
-}
+  }
-let algorithmclassDom = null
+  let algorithmclass = null
-const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
+  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
-const dataLength = ref(true)
+  const dataLength = ref(true)
-const isNoMore = ref(false)
+  const isNoMore = ref(false)
-const pageWithAttrsFunction = () => {
+  const pageWithAttrsFunction = () => {
     pageWithAttrs(params).then((res) => {
       dataList.value = res.data.data.records
       if (res.data.data.records.length < 9) {
         dataLength.value = false
       }
     })
-}
+  }
-pageWithAttrsFunction()
+  pageWithAttrsFunction()
-//图片显示
+  //图片显示
-const algorithmCardPhoto = (List) => {
+  const algorithmCardPhoto = (List) => {
     let url = ''
     List.map((item) => {
       if (item.attrType === '图层缩略图') {
@@ -113,41 +103,12 @@ const algorithmCardPhoto = (List) => {
       }
     })
     return url
-}
+  }
-//跳转详情页
+  //跳转详情页
-const detailFunction = (id) => {
+  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
+  const layerFunction = (e) => {
-  }
-  selectFlag.value = false
-  alert('调取接口')
-  // getData(str)
-}
-
-const layerFunction = (e) => {
     var scrollTop = e.currentTarget.scrollTop
     var windowHeight = e.currentTarget.clientHeight
     var scrollHeight = e.currentTarget.scrollHeight
@@ -168,28 +129,27 @@ const layerFunction = (e) => {
     } else {
       isNoMore.value = false
     }
-}
+  }
-onMounted(() => {
+  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(() => {
+  onBeforeUnmount(() => {
-  algorithmclassDom.removeEventListener('scroll', layerFunction, true)
+    algorithmclass.removeEventListener('scroll', layerFunction, true)
-})
+  })
 </script>
 
 <style lang="less" scoped>
-.algorithm {
+  .algorithm {
     .select {
       margin: 0.1rem 0 0.1rem 0.2rem;
       color: #fff;
       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,24 +186,22 @@ 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 {
-      &>div {
           width: 1.8rem;
           height: 0.4rem;
           line-height: 0.4rem;
           text-align: center;
           border-top: 1px solid #aed5ff;
         }
-
+        & > div:nth-of-type(1) {
-      &>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,28 +257,24 @@ 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;
       border-radius: 0.08rem;
     }
-}
+  }
 </style>