Compare commits
No commits in common. "79ee811854057e080a7469cb91e73fc08d0c3688" and "0726f4a927ed3486a766dfa1cf16f78dda339492" have entirely different histories.
79ee811854
...
0726f4a927
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<a-image :src="algorithmCardPhoto(item.infoList, item)" :width="525" :height="275" :fallback="imgSrc"
|
||||
:preview="false"></a-image>
|
||||
<div
|
||||
v-for="(item, index) in dataList"
|
||||
: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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<a-image :src="algorithmCardPhoto(item.infoList)" :width="525" :height="275" :fallback="imgSrc"
|
||||
:preview="false"></a-image>
|
||||
<div
|
||||
v-for="(item, index) in dataList"
|
||||
: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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue