西海岸：能力云图-基础设施-单兵设备，无人机前端写死
This commit is contained in:
parent
4a28789464
commit
1d61355bc6
|
|
@ -11,28 +11,18 @@
|
|||
<span class="title">基础设施</span>
|
||||
</div>
|
||||
<div class="infrastructure-content">
|
||||
<div
|
||||
class="infrastructure-content-son"
|
||||
v-for="(item, index) in myDataList"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="num-class"
|
||||
:style="`background:url(${item.img}) no-repeat;background-position:top left;background-size:40%`"
|
||||
>
|
||||
<div class="infrastructure-content-son" v-for="(item, index) in myDataList" :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.snum }}</div>
|
||||
</div>
|
||||
<div class="health-degree">
|
||||
<div class="health-degree-title">健康度</div>
|
||||
<a-progress
|
||||
:stroke-color="{
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}"
|
||||
:percent="item.percentage"
|
||||
:show-info="false"
|
||||
/>
|
||||
<a-progress :stroke-color="{
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}" :percent="item.percentage" :show-info="false" />
|
||||
</div>
|
||||
<div class="percentage" :style="fontFormat(item.title)">
|
||||
{{ item.percentage }}%
|
||||
|
|
@ -42,172 +32,201 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { infrastructureInfo } from '@/api/capabilityCloud'
|
||||
let myDataList = ref([
|
||||
{
|
||||
title: '视频资源数量',
|
||||
snum: '0',
|
||||
percentage: '100',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
|
||||
},
|
||||
{
|
||||
title: '云资源',
|
||||
snum: '0',
|
||||
percentage: '0',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
|
||||
},
|
||||
{
|
||||
title: '感知资源',
|
||||
snum: '0',
|
||||
percentage: '0',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
|
||||
},
|
||||
])
|
||||
function fontFormat(name) {
|
||||
switch (name) {
|
||||
case '视频资源数量':
|
||||
return 'color: #32ff91;'
|
||||
break
|
||||
case '云资源':
|
||||
return 'color: #f4fd25;'
|
||||
break
|
||||
case '感知资源':
|
||||
return 'color: #ff1d18;'
|
||||
break
|
||||
}
|
||||
import { ref } from 'vue'
|
||||
import { infrastructureInfo } from '@/api/capabilityCloud'
|
||||
let myDataList = ref([
|
||||
{
|
||||
title: '视频资源数量',
|
||||
snum: '0',
|
||||
percentage: '100',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_sz.png'),
|
||||
},
|
||||
{
|
||||
// title: '云资源',
|
||||
title: '单兵设备',
|
||||
snum: '2',
|
||||
percentage: '100',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_yz.png'),
|
||||
},
|
||||
{
|
||||
// title: '感知资源',
|
||||
title: '无人机',
|
||||
snum: '2',
|
||||
percentage: '100',
|
||||
img: require('../../../assets/capabilityCloud/infrastructure_gz.png'),
|
||||
},
|
||||
])
|
||||
function fontFormat(name) {
|
||||
switch (name) {
|
||||
case '视频资源数量':
|
||||
return 'color: #32ff91;'
|
||||
break
|
||||
// case '云资源':
|
||||
// return 'color: #f4fd25;'
|
||||
// break
|
||||
// case '感知资源':
|
||||
// return 'color: #ff1d18;'
|
||||
// break
|
||||
|
||||
case '单兵设备':
|
||||
return 'color: #f4fd25;'
|
||||
break
|
||||
case '无人机':
|
||||
return 'color: #ff1d18;'
|
||||
break
|
||||
}
|
||||
const params = {
|
||||
name: '',
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
infrastructureInfo().then((res) => {
|
||||
console.log('基础设施==================>', res.data.data)
|
||||
myDataList.value.forEach((val) => {
|
||||
const obj = res.data.data.filter((item) => item.type === val.title)[0]
|
||||
if (obj) {
|
||||
if (obj.type == '视频资源数量') {
|
||||
if (uavAndIndividualSoldier.num) {
|
||||
obj.amount = obj.amount - 0 + uavAndIndividualSoldier.num
|
||||
}
|
||||
}
|
||||
const params = {
|
||||
name: '',
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
infrastructureInfo().then((res) => {
|
||||
console.log('基础设施==================>', res.data.data)
|
||||
myDataList.value.forEach((val) => {
|
||||
const obj = res.data.data.filter((item) => item.type === val.title)[0]
|
||||
if (obj) {
|
||||
if (obj.type == '视频资源数量') {
|
||||
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>
|
||||
<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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
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;
|
||||
margin-top: 0.62rem;
|
||||
.infrastructure-content-son {
|
||||
display: flex;
|
||||
width: 4rem;
|
||||
height: 1.17rem;
|
||||
background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
|
||||
align-items: center;
|
||||
margin-bottom: 0.14rem;
|
||||
padding-left: 0.1rem;
|
||||
height: 1.17rem;
|
||||
background: linear-gradient(to right, #214677, rgba(2, 20, 103, 0));
|
||||
align-items: center;
|
||||
margin-bottom: 0.14rem;
|
||||
padding-left: 0.1rem;
|
||||
}
|
||||
|
||||
.num-class {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
& > div:last-child {
|
||||
font-size: 0.36rem;
|
||||
line-height: 0.36rem;
|
||||
color: #1ce2e5;
|
||||
|
||||
&>div:last-child {
|
||||
font-size: 0.36rem;
|
||||
line-height: 0.36rem;
|
||||
color: #1ce2e5;
|
||||
}
|
||||
}
|
||||
|
||||
.health-degree {
|
||||
width: 1.35rem;
|
||||
|
||||
.health-degree-title {
|
||||
font-size: 0.14rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
|
||||
: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 {
|
||||
font-size: 0.14rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
: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:
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
// .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% {
|
||||
border-image: linear-gradient(to right, #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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue