西海岸：能力云图-基础设施-单兵设备，无人机前端写死
This commit is contained in:
parent
4a28789464
commit
1d61355bc6
|
|
@ -11,28 +11,18 @@
|
||||||
<span class="title">基础设施</span>
|
<span class="title">基础设施</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="infrastructure-content">
|
<div class="infrastructure-content">
|
||||||
<div
|
<div class="infrastructure-content-son" v-for="(item, index) in myDataList" :key="index">
|
||||||
class="infrastructure-content-son"
|
<div class="num-class"
|
||||||
v-for="(item, index) in myDataList"
|
:style="`background:url(${item.img}) no-repeat;background-position:top left;background-size:40%`">
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="num-class"
|
|
||||||
:style="`background:url(${item.img}) no-repeat;background-position:top left;background-size:40%`"
|
|
||||||
>
|
|
||||||
<div>{{ item.title }}</div>
|
<div>{{ item.title }}</div>
|
||||||
<div>{{ item.snum }}</div>
|
<div>{{ item.snum }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="health-degree">
|
<div class="health-degree">
|
||||||
<div class="health-degree-title">健康度</div>
|
<div class="health-degree-title">健康度</div>
|
||||||
<a-progress
|
<a-progress :stroke-color="{
|
||||||
:stroke-color="{
|
'0%': '#108ee9',
|
||||||
'0%': '#108ee9',
|
'100%': '#87d068',
|
||||||
'100%': '#87d068',
|
}" :percent="item.percentage" :show-info="false" />
|
||||||
}"
|
|
||||||
:percent="item.percentage"
|
|
||||||
:show-info="false"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="percentage" :style="fontFormat(item.title)">
|
<div class="percentage" :style="fontFormat(item.title)">
|
||||||
{{ item.percentage }}%
|
{{ item.percentage }}%
|
||||||
|
|
@ -42,172 +32,201 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { infrastructureInfo } from '@/api/capabilityCloud'
|
import { infrastructureInfo } from '@/api/capabilityCloud'
|
||||||
let myDataList = ref([
|
let myDataList = ref([
|
||||||
{
|
{
|
||||||
title: '视频资源数量',
|
title: '视频资源数量',
|
||||||
snum: '0',
|
snum: '0',
|
||||||
percentage: '100',
|
percentage: '100',
|
||||||
img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
|
img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '云资源',
|
// title: '云资源',
|
||||||
snum: '0',
|
title: '单兵设备',
|
||||||
percentage: '0',
|
snum: '2',
|
||||||
img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
|
percentage: '100',
|
||||||
},
|
img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
|
||||||
{
|
},
|
||||||
title: '感知资源',
|
{
|
||||||
snum: '0',
|
// title: '感知资源',
|
||||||
percentage: '0',
|
title: '无人机',
|
||||||
img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
|
snum: '2',
|
||||||
},
|
percentage: '100',
|
||||||
])
|
img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
|
||||||
function fontFormat(name) {
|
},
|
||||||
switch (name) {
|
])
|
||||||
case '视频资源数量':
|
function fontFormat(name) {
|
||||||
return 'color: #32ff91;'
|
switch (name) {
|
||||||
break
|
case '视频资源数量':
|
||||||
case '云资源':
|
return 'color: #32ff91;'
|
||||||
return 'color: #f4fd25;'
|
break
|
||||||
break
|
// case '云资源':
|
||||||
case '感知资源':
|
// return 'color: #f4fd25;'
|
||||||
return 'color: #ff1d18;'
|
// break
|
||||||
break
|
// case '感知资源':
|
||||||
}
|
// return 'color: #ff1d18;'
|
||||||
|
// break
|
||||||
|
|
||||||
|
case '单兵设备':
|
||||||
|
return 'color: #f4fd25;'
|
||||||
|
break
|
||||||
|
case '无人机':
|
||||||
|
return 'color: #ff1d18;'
|
||||||
|
break
|
||||||
}
|
}
|
||||||
const params = {
|
}
|
||||||
name: '',
|
const params = {
|
||||||
pageNo: 1,
|
name: '',
|
||||||
pageSize: 10,
|
pageNo: 1,
|
||||||
}
|
pageSize: 10,
|
||||||
infrastructureInfo().then((res) => {
|
}
|
||||||
console.log('基础设施==================>', res.data.data)
|
infrastructureInfo().then((res) => {
|
||||||
myDataList.value.forEach((val) => {
|
console.log('基础设施==================>', res.data.data)
|
||||||
const obj = res.data.data.filter((item) => item.type === val.title)[0]
|
myDataList.value.forEach((val) => {
|
||||||
if (obj) {
|
const obj = res.data.data.filter((item) => item.type === val.title)[0]
|
||||||
if (obj.type == '视频资源数量') {
|
if (obj) {
|
||||||
if (uavAndIndividualSoldier.num) {
|
if (obj.type == '视频资源数量') {
|
||||||
obj.amount = obj.amount - 0 + uavAndIndividualSoldier.num
|
if (uavAndIndividualSoldier.num) {
|
||||||
}
|
obj.amount = obj.amount - 0 + uavAndIndividualSoldier.num
|
||||||
}
|
}
|
||||||
val.snum = obj.amount
|
|
||||||
}
|
}
|
||||||
})
|
val.snum = obj.amount
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
console.log('err------------>', err);
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.infrastructure {
|
.infrastructure {
|
||||||
|
width: 4.4rem;
|
||||||
|
height: 4.63rem;
|
||||||
|
position: relative;
|
||||||
|
background: rgba(0, 108, 188, 0.1);
|
||||||
|
border: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
||||||
|
border-radius: 0.03rem;
|
||||||
|
padding: 0.2rem;
|
||||||
|
padding-top: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
|
||||||
|
.infrastructure-top {
|
||||||
width: 4.4rem;
|
width: 4.4rem;
|
||||||
height: 4.63rem;
|
height: 0.44rem;
|
||||||
position: relative;
|
position: absolute;
|
||||||
background: rgba(0, 108, 188, 0.1);
|
top: 0;
|
||||||
border: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
|
||||||
border-radius: 0.03rem;
|
background-size: cover;
|
||||||
padding: 0.2rem;
|
background-position: center;
|
||||||
padding-top: 0;
|
line-height: 0.44rem;
|
||||||
text-decoration: none;
|
text-align: center;
|
||||||
outline: none;
|
|
||||||
-webkit-transition: all 100ms ease-out;
|
.title {
|
||||||
-moz-transition: all 100ms ease-out;
|
font-size: 0.24rem;
|
||||||
transition: all 100ms ease-out;
|
|
||||||
.infrastructure-top {
|
|
||||||
width: 4.4rem;
|
|
||||||
height: 0.44rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
background: url('~@/assets/capabilityCloud/infrastructure_title.png')
|
|
||||||
no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
line-height: 0.44rem;
|
|
||||||
text-align: center;
|
|
||||||
.title {
|
|
||||||
font-size: 0.24rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.infrastructure-content {
|
}
|
||||||
|
|
||||||
|
.infrastructure-content {
|
||||||
|
width: 4rem;
|
||||||
|
margin-top: 0.62rem;
|
||||||
|
|
||||||
|
.infrastructure-content-son {
|
||||||
|
display: flex;
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
margin-top: 0.62rem;
|
height: 1.17rem;
|
||||||
.infrastructure-content-son {
|
background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
|
||||||
display: flex;
|
align-items: center;
|
||||||
width: 4rem;
|
margin-bottom: 0.14rem;
|
||||||
height: 1.17rem;
|
padding-left: 0.1rem;
|
||||||
background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
|
}
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.14rem;
|
.num-class {
|
||||||
padding-left: 0.1rem;
|
width: 1.5rem;
|
||||||
|
height: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
|
||||||
|
&>div:first-child {
|
||||||
|
font-size: 0.18rem;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
line-height: 0.18rem;
|
||||||
|
margin-top: 0.3rem;
|
||||||
}
|
}
|
||||||
.num-class {
|
|
||||||
width: 1.5rem;
|
&>div:last-child {
|
||||||
height: 1rem;
|
font-size: 0.36rem;
|
||||||
text-align: center;
|
line-height: 0.36rem;
|
||||||
margin-right: 0.2rem;
|
color: #1ce2e5;
|
||||||
& > div:first-child {
|
}
|
||||||
font-size: 0.18rem;
|
}
|
||||||
color: #ffffff;
|
|
||||||
margin-bottom: 0.1rem;
|
.health-degree {
|
||||||
line-height: 0.18rem;
|
width: 1.35rem;
|
||||||
margin-top: 0.3rem;
|
|
||||||
}
|
.health-degree-title {
|
||||||
& > div:last-child {
|
font-size: 0.14rem;
|
||||||
font-size: 0.36rem;
|
color: rgba(255, 255, 255, 0.6);
|
||||||
line-height: 0.36rem;
|
margin-bottom: 0.08rem;
|
||||||
color: #1ce2e5;
|
}
|
||||||
|
|
||||||
|
:deep(.ant-progress-outer) {
|
||||||
|
height: 0.27rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-progress-inner) {
|
||||||
|
height: 0.27rem;
|
||||||
|
border-radius: 0.14rem;
|
||||||
|
border: 0.01rem solid rgba(8, 153, 231, 0.6);
|
||||||
|
background: rgba(21, 65, 123, 0.6);
|
||||||
|
|
||||||
|
div {
|
||||||
|
height: 0.27rem !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.health-degree {
|
}
|
||||||
width: 1.35rem;
|
|
||||||
.health-degree-title {
|
// .health-degree:
|
||||||
font-size: 0.14rem;
|
.percentage {
|
||||||
color: rgba(255, 255, 255, 0.6);
|
height: 0.57rem;
|
||||||
margin-bottom: 0.08rem;
|
font-size: 0.24rem;
|
||||||
}
|
line-height: 0.24rem;
|
||||||
:deep(.ant-progress-outer) {
|
font-family: 'DIN-Bold';
|
||||||
height: 0.27rem;
|
margin-left: 0.1rem;
|
||||||
}
|
display: flex;
|
||||||
:deep(.ant-progress-inner) {
|
align-items: flex-end;
|
||||||
height: 0.27rem;
|
|
||||||
border-radius: 0.14rem;
|
|
||||||
border: 0.01rem solid rgba(8, 153, 231, 0.6);
|
|
||||||
background: rgba(21, 65, 123, 0.6);
|
|
||||||
div {
|
|
||||||
height: 0.27rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .health-degree:
|
|
||||||
.percentage {
|
|
||||||
height: 0.57rem;
|
|
||||||
font-size: 0.24rem;
|
|
||||||
line-height: 0.24rem;
|
|
||||||
font-family: 'DIN-Bold';
|
|
||||||
margin-left: 0.1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.infrastructure:hover {
|
}
|
||||||
border: 2px solid;
|
|
||||||
animation: turn 5s linear infinite;
|
.infrastructure:hover {
|
||||||
|
border: 2px solid;
|
||||||
|
animation: turn 5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes turn {
|
||||||
|
0% {
|
||||||
|
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||||
}
|
}
|
||||||
@keyframes turn {
|
|
||||||
0% {
|
25% {
|
||||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
||||||
}
|
|
||||||
25% {
|
|
||||||
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue