当前位置：首页 > article >正文

Django-Vue 学习-VUE

article 2025/2/22 13:30:32

主组件中有多个Vue组件

是指在Vue.js框架中，主组件是一个父组件，它包含了多个子组件（Vue组件）。这种组件嵌套的方式可以用于构建复杂的前端应用程序，通过拆分功能和视图，使代码更加模块化、可复用和易于维护。

Vue组件是Vue.js框架的核心概念之一，它是一个自定义的可重用的元素，包含了HTML模板、CSS样式和JavaScript逻辑。每个Vue组件可以有自己的状态（data）、计算属性（computed）、方法（methods）和生命周期钩子（lifecycle hooks），并且可以与其他组件进行通信。

优势：

模块化：将复杂的界面拆分成独立的组件，使代码结构更加清晰和可维护。
可复用：每个组件都可以被其他组件多次使用，提高了代码的复用性。
响应式：通过Vue.js的响应式系统，组件的状态变化可以自动驱动视图更新。
开发效率：使用Vue.js开发组件化的应用可以提高开发效率，减少重复代码的编写

一个VUE 组成多个VUE,比如一个VUE ##############sanalysis.vue由多个VUE组成

</el-scrollbar>
</div>
</template>

echartsData:[

]
}
},
created() {
setTimeout(() => {
this.showloading = false
}, 600)
},
}
</script>
<style lang="scss" scoped>
.lycontainer{
width: 100%;
height: calc(100vh - 130px); //动态计算长度值
}
.echarts-inner{
margin-top: 1px;
}
::v-deep(.el-scrollbar__bar.is-horizontal) {
display: none;
}

</style>

#################sectorTable.vue

import sectorTableUsage from "@/components/analysis/sectorTableUsage.vue";
import sectorTableUsageAndModel from "@/components/analysis/sectorTableUsageAndModel.vue";
import sectorTableArea from "@/components/analysis/sectorTableArea.vue";
import sectorTableAreaAndModel from "@/components/analysis/sectorTableAreaAndModel.vue";
export default {
components: {sectorTableArea,sectorTableAreaAndModel,sectorTableUsage,sectorTableUsageAndModel},
data() {
return {
activeName: 'areaAndMode',
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},

}
};
</script>

#####################sectorTableAreaAndModel.vue

##################sectorTableUsage.vue

}
};
</script>

#############sectorTableUsageAndModel.vue

<el-table-column
label="设备数量">
<template #default="scope">
<el-link type="primary" @click="navigateToServersManage(scope.row.serversUsage,scope.row.serversModel,'all')">
{{ scope.row.serversCount }}
</el-link>
</template>
</el-table-column>
<el-table-column
label="空闲设备数量">
<template #default="scope">
<el-link type="primary" @click="navigateToServersManage(scope.row.serversUsage,scope.row.serversModel,'nouse')">
{{ scope.row.serversCount_nouse}}
</el-link>
</template>
</el-table-column>
<el-table-column
label="在用设备数量">
<template #default="scope">
<el-link type="primary" @click="navigateToServersManage(scope.row.serversUsage,scope.row.serversModel,'inuse')">
{{ scope.row.serversCount_inuse}}
</el-link>
</template>
</el-table-column>
<el-table-column
prop="serversCount_dis"
label="失联设备数量">
</el-table-column>
<el-table-column
prop="serversCount_dis"
label="备案设备数量">
</el-table-column>
<el-table-column
prop="serversCount_dis"
label="下电失败数量">
</el-table-column>
</el-table>
</div>
</template>

methods:{
navigateToServersManage(serversUsage,serversModel,filter) {
const currentDate = new Date().toISOString().split('T')[0];
const query = { };
if (filter === 'nouse') {
query.borrowEndtimeEarlierThan = currentDate;
} else if(filter === 'inuse') {
query.borrowEndtimeLaterThan = currentDate;
query.borrowUserIsNull = 'false';
}
query.serversUsage= serversUsage;
query.serversModel= serversModel;
this.$router.push({
path: '/serversManage',
query,
});
},

async getData(){
this.loadingPage = true
wholeMachineServersCountbyUsageandModel(this.formInline).then(res => {
this.loadingPage = false
if(res.code ===2000) {
this.tableData = res.data.data
console.log(this.tableData )
}
})
},
},

created() {
this.getData()
},
}
</script>

#################growCard.vue

<template>
<el-row :gutter="20">
<el-col :span="6" :xs="{span: 24}" :sm="{span: 24}" :md="{span: 6}" v-for="item in growData">
<div :style="{height:height}" class="space-inner">
<div class="lycard">
<div class="space-header">
<div class="space-header-title">{{item.title}}</div>
<div class="space-header-extend-right">

</div>
</div>
<el-skeleton :rows="rows" :animated="animated" :count="count" :loading="loading" style="padding: 20px;width: auto;overflow: hidden;">
<template #default>
<div class="space-main">
<div class="space-main-up">
<span style="font-size: 24px;">{{ item.nums }}</span>
<div class="space-main-icon">
<el-avatar :size="50" :icon="item.icon.type" :style="{background:item.icon.background?item.icon.background:null}" />
</div>
</div>
<div class="space-main-down">

</div>
</div>
</template>
</el-skeleton>
</div>
</div>
</el-col>
</el-row>
</template>

export default {
name: "LyGrowcard",
data(){
return{
growData:[
{id:1,title:"服务器总数",nums:0,icon:{
type:"View",
background:"#67c23a",
}},
{id:2,title:"失联服务器",nums:0,icon:{
type:"GoodsFilled",
background:"#e6a23c",
}},
{id:3,title:"备案服务器",nums:0,icon:{
type:"Download",
background:"#409eff",
}},
{id:4,title:"下电失败服务器",nums:0,icon:{
type:"WalletFilled",
background:"#f56c6c",
}},
],
}
},

methods:{

async getData(){
this.loadingPage = true
wholeMachineServersCountAll(this.formInline).then(res => {
this.loadingPage = false
if(res.code ==2000) {
this.growData[0].nums = res.data.data.total_books;
this.growData[1].nums = res.data.data.serversCount_dis;
this.growData[2].nums = res.data.data.serversCount_dis;
this.growData[3].nums = res.data.data.serversCount_dis;
console.log(this.tableData )

}
})
},
},

created() {
this.getData()
},
props:{
loading: {
type: Boolean,
default: true
},
direction:{
type:String,
default:"horizontal",
},
alignment:{
type:String,
default:"flex-start",
},
count:{
type:Number,
default:1,
},
rows:{
type:Number,
default:4,
},
animated:{
type:Boolean,
default:true,
},
modelValue: {
type: Array,
default: []
},
height:{
type:Number,
default:200,
}
},
watch:{