Merge branch 'hi-ucs-dev' of http://124.222.94.39:3000/wuhongjian/hi-ucs into hi-ucs-dev

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

@@ -142,48 +142,7 @@ 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,6 +1,20 @@
 <!-- 智能算法 -->
 <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 }}
@@ -13,19 +27,12 @@
           </div>
         </div>
       </div>
+    </div>
+
     <div class="algorithm-class">
-      <div
+      <div v-for="(item, index) in dataList" :key="`algorithm-${index}`" class="algorithm-card">
-        v-for="(item, index) in dataList"
+        <a-image :src="algorithmCardPhoto(item.infoList, item)" :width="525" :height="275" :fallback="imgSrc"
-        :key="`algorithm-${index}`"
+          :preview="false"></a-image>
-        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>
@@ -39,26 +46,31 @@
   </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 dataList = ref([])
+const type = ref(null)
-  const selectFlag2 = ref(false)
+const typeName = ref('全市')
-  getCategoryTreePage({
+const typeName2 = ref('全部')
+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: '智能算法' }],
@@ -67,8 +79,8 @@
   pageNum: 1,
   pageSize: 9,
   type: '组件服务',
-  }
+}
-  const getList2 = (val) => {
+const getList2 = (val) => {
   typeName2.value = val
   if (val == '全部') {
     params.infoList = [{ attrType: '组件类型', attrValue: '智能算法' }]
@@ -80,23 +92,23 @@
   }
   selectFlag2.value = false
   pageWithAttrsFunction()
-  }
+}
-  let algorithmclass = null
+let algorithmclassDom = 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(
@@ -108,12 +120,12 @@
     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
@@ -134,28 +146,57 @@
   } else {
     isNoMore.value = false
   }
-  }
+}
 
-  onMounted(() => {
+const getList = (str) => {
-    algorithmclass = document.querySelector('.algorithm-class')
+  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')
   if (dataLength.value) {
     //监听滚动事件
-      algorithmclass.addEventListener('scroll', algorithmFunction, true)
+    algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
   }
-  })
+})
-  onBeforeUnmount(() => {
+onBeforeUnmount(() => {
-    algorithmclass.removeEventListener('scroll', algorithmFunction, true)
+  algorithmclassDom.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;
@@ -166,17 +207,18 @@
       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')
+        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
-            no-repeat;
         background-size: 100%;
       }
     }
+
     .bottom {
       cursor: pointer;
       position: absolute;
@@ -185,6 +227,7 @@
       z-index: 1000;
       background: rgba(57, 134, 239, 0.68);
       border: 1px solid #aed5ff;
+
       .light {
         display: inline-block;
         width: 2.39rem;
@@ -192,22 +235,24 @@
         position: absolute;
         top: -0.08rem;
         left: -0.3rem;
-          background: url('~@/assets/capacitySquare/select-light2.png')
+        background: url('~@/assets/capacitySquare/select-light2.png') no-repeat;
-            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;
@@ -217,6 +262,7 @@
     overflow: auto;
     margin-left: 1.15rem;
     margin-right: 0.15rem;
+
     .algorithm-card {
       height: 2.75rem;
       width: 5.25rem;
@@ -225,6 +271,7 @@
       margin-bottom: 0.4rem;
       margin-right: 0.65rem;
       position: relative;
+
       :deep(.ant-image) {
         img {
           margin-top: 0.15rem;
@@ -233,13 +280,14 @@
           margin-left: 0.1rem;
         }
       }
+
       .algorithm-card-photo {
         height: 100%;
         width: 100%;
-          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+        background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
-            no-repeat;
         background-size: 100%;
       }
+
       .algorithm-card-title {
         position: absolute;
         height: 0.6rem;
@@ -250,12 +298,12 @@
         font-family: alibaba;
         bottom: 0.15rem;
         padding-left: 0.22rem;
-          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+        background: url('~@/assets/capacitySquare/algorithm-title-bg.png') no-repeat;
-            no-repeat;
         background-size: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
+
         span {
           line-height: 0.24rem;
           overflow: hidden;
@@ -263,24 +311,28 @@
           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,6 +1,20 @@
 <!-- 图层服务 -->
 <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 }}
@@ -13,19 +27,11 @@
           </div>
         </div>
       </div>
+    </div>
     <div class="algorithm-class">
-      <div
+      <div v-for="(item, index) in dataList" :key="`algorithm-${index}`" class="algorithm-card">
-        v-for="(item, index) in dataList"
+        <a-image :src="algorithmCardPhoto(item.infoList)" :width="525" :height="275" :fallback="imgSrc"
-        :key="`algorithm-${index}`"
+          :preview="false"></a-image>
-        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>
@@ -39,26 +45,30 @@
   </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: '图层服务' }],
@@ -67,8 +77,8 @@
   pageNum: 1,
   pageSize: 9,
   type: '组件服务',
-  }
+}
-  const getList2 = (val) => {
+const getList2 = (val) => {
   typeName2.value = val
   if (val == '全部') {
     params.infoList = [{ attrType: '组件类型', attrValue: '图层服务' }]
@@ -80,22 +90,22 @@
   }
   selectFlag2.value = false
   pageWithAttrsFunction()
-  }
+}
-  let algorithmclass = null
+let algorithmclassDom = 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 === '图层缩略图') {
@@ -103,12 +113,41 @@
     }
   })
   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
     }
-  const layerFunction = (e) => {
+    params.pageNum = 1
+  }
+  selectFlag.value = false
+  alert('调取接口')
+  // getData(str)
+}
+
+const layerFunction = (e) => {
   var scrollTop = e.currentTarget.scrollTop
   var windowHeight = e.currentTarget.clientHeight
   var scrollHeight = e.currentTarget.scrollHeight
@@ -129,27 +168,28 @@
   } else {
     isNoMore.value = false
   }
-  }
+}
-  onMounted(() => {
+onMounted(() => {
-    algorithmclass = document.querySelector('.algorithm-class')
+  algorithmclassDom = document.querySelector('.algorithm-class')
   if (dataLength.value) {
     //监听滚动事件
-      algorithmclass.addEventListener('scroll', layerFunction, true)
+    algorithmclassDom.addEventListener('scroll', layerFunction, true)
   }
-  })
+})
-  onBeforeUnmount(() => {
+onBeforeUnmount(() => {
-    algorithmclass.removeEventListener('scroll', layerFunction, true)
+  algorithmclassDom.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;
@@ -160,17 +200,18 @@
       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')
+        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
-            no-repeat;
         background-size: 100%;
       }
     }
+
     .bottom {
       cursor: pointer;
       position: absolute;
@@ -179,6 +220,7 @@
       z-index: 1000;
       background: rgba(57, 134, 239, 0.68);
       border: 1px solid #aed5ff;
+
       .light {
         display: inline-block;
         width: 2.39rem;
@@ -186,22 +228,24 @@
         position: absolute;
         top: -0.08rem;
         left: -0.3rem;
-          background: url('~@/assets/capacitySquare/select-light2.png')
+        background: url('~@/assets/capacitySquare/select-light2.png') no-repeat;
-            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;
@@ -211,6 +255,7 @@
     overflow: auto;
     margin-left: 1.15rem;
     margin-right: 0.15rem;
+
     .algorithm-card {
       height: 2.75rem;
       width: 5.23rem;
@@ -219,6 +264,7 @@
       margin-bottom: 0.4rem;
       margin-right: 0.65rem;
       position: relative;
+
       :deep(.ant-image) {
         img {
           margin-top: 0.15rem;
@@ -227,13 +273,14 @@
           margin-left: 0.1rem;
         }
       }
+
       .algorithm-card-photo {
         height: 100%;
         width: 100%;
-          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+        background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
-            no-repeat;
         background-size: 100%;
       }
+
       .algorithm-card-title {
         position: absolute;
         height: 0.6rem;
@@ -244,12 +291,12 @@
         font-family: alibaba;
         bottom: 0.15rem;
         padding-left: 0.22rem;
-          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+        background: url('~@/assets/capacitySquare/algorithm-title-bg.png') no-repeat;
-            no-repeat;
         background-size: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
+
         span {
           line-height: 0.24rem;
           overflow: hidden;
@@ -257,24 +304,28 @@
           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>