Compare commits

..

No commits in common. "79ee811854057e080a7469cb91e73fc08d0c3688" and "0726f4a927ed3486a766dfa1cf16f78dda339492" have entirely different histories.

3 changed files with 514 additions and 576 deletions

View File

@ -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

View File

@ -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>
@ -46,31 +39,26 @@
</div>
</template>
<script setup>
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({
import { getCategoryTreePage } from '@/api/personalCenter'
import { pageWithAttrs } from '@/api/abilityStatistics'
import { ref, onMounted, onBeforeUnmount } from 'vue'
const typeName2 = ref('全部')
const dictList = ref([])
const dataList = ref([])
const selectFlag2 = 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
const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
const dataLength = ref(true)
const isNoMore = ref(false)
let url = ref('')
const pageWithAttrsFunction = () => {
}
let algorithmclass = null
const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
const dataLength = ref(true)
const isNoMore = ref(false)
let url = ref('')
const pageWithAttrsFunction = () => {
pageWithAttrs(params).then((res) => {
dataList.value = res.data.data.records
if (res.data.data.records.length < 9) {
dataLength.value = false
}
})
}
pageWithAttrsFunction()
//
const algorithmCardPhoto = (List, item) => {
}
pageWithAttrsFunction()
//
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(() => {
algorithmclassDom = document.querySelector('.algorithm-class')
onMounted(() => {
algorithmclass = document.querySelector('.algorithm-class')
if (dataLength.value) {
//
algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
algorithmclass.addEventListener('scroll', algorithmFunction, true)
}
})
onBeforeUnmount(() => {
algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
})
})
onBeforeUnmount(() => {
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>

View File

@ -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>
@ -45,30 +39,26 @@
</div>
</template>
<script setup>
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({
import { getCategoryTreePage } from '@/api/personalCenter'
import { pageWithAttrs } from '@/api/abilityStatistics'
import { ref, onMounted, onBeforeUnmount } from 'vue'
const typeName2 = ref('全部')
const dictList = ref([])
const dataList = ref([])
const selectFlag2 = 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
const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
const dataLength = ref(true)
const isNoMore = ref(false)
const pageWithAttrsFunction = () => {
}
let algorithmclass = null
const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
const dataLength = ref(true)
const isNoMore = ref(false)
const pageWithAttrsFunction = () => {
pageWithAttrs(params).then((res) => {
dataList.value = res.data.data.records
if (res.data.data.records.length < 9) {
dataLength.value = false
}
})
}
pageWithAttrsFunction()
//
const algorithmCardPhoto = (List) => {
}
pageWithAttrsFunction()
//
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
}
selectFlag.value = false
alert('调取接口')
// getData(str)
}
const layerFunction = (e) => {
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(() => {
algorithmclassDom = document.querySelector('.algorithm-class')
}
onMounted(() => {
algorithmclass = document.querySelector('.algorithm-class')
if (dataLength.value) {
//
algorithmclassDom.addEventListener('scroll', layerFunction, true)
algorithmclass.addEventListener('scroll', layerFunction, true)
}
})
onBeforeUnmount(() => {
algorithmclassDom.removeEventListener('scroll', layerFunction, true)
})
})
onBeforeUnmount(() => {
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>