获取楼列表
1.后端NewCenter部分：
1.在apps/users/views.py：
from django.shortcuts import render,HttpResponse
from rest_framework.views import APIView,Response
from random import choice
from .models import UserProfile,PianQu,LouMing
import datetime,json,time,hashlib
from .serializers import PianQuModelSerializer,LouMingModelSerializer,UserProfileModelSerializer
# Create your views here.
#……
class GetLouListView(APIView):
"""获取楼列表"""
def get(self, request):
token = request.GET.get('roottoken')
p_id=request.GET.get('aid')
if token:
user = UserProfile.objects.filter(username='admin',token=token).first()
if user:
p_id=int(p_id)
pq=PianQu.objects.filter(id=p_id).first()
wgz=pq.wgz
re_wgz=UserProfileModelSerializer(wgz)
lou_list=LouMing.objects.filter(pianqu=pq)
re_loulist=LouMingModelSerializer(lou_list,many=True)
all_wgy=UserProfile.objects.filter(power=4)
re_wgy=UserProfileModelSerializer(all_wgy,many=True)
result = {"status": "200", "data": {'re_wgz': re_wgz.data,'re_loulist':re_loulist.data,'re_wgy':re_wgy.data}}
else:
result = {"status": "403", "data": {'msg': '请重新登录。'}}
else:
result = {"status": "403", "data": {'msg': '参数不足'}}
return HttpResponse(json.dumps(result, ensure_ascii=False), content_type="application/json,charset=utf-8")
2.在apps/users/urls.py：
from django.urls import path
from .views import RootLoginView,GetPianquListView,GetLouListView
urlpatterns = [
path('rlogin/',RootLoginView.as_view()),#管理员登录
path('getpqlist/',GetPianquListView.as_view()),#获取片区列表
path('getloulist/',GetLouListView.as_view()),#获取楼列表
]
2.前端newpc部分
1.src/api/api.js中：
//获取楼列表
export function getloulist(params1,params2) {
return get(host+'/users/getloulist/', {aid:params1,roottoken:params2});
}
2.在src/components/LouList.vue：
<template>
<div id="loulist">
<div class="content">
<div class="wgz">
<div class="left">
<img :src="wgz.img" alt="照片">
</div>
<div class="right">
<h3>权限：网格长</h3>
<h3>姓名：{{wgz.name}}</h3>
<h3>电话：{{wgz.mobile}}</h3>
<p>工作范围：{{wgz.work}}</p>
</div>
</div>
<div class="boxx">
<el-card class="box-card" v-for="(item,index) in data" :key="index">
<div class="wgy">
<div class="left">
<img :src="item.img" alt="照片">
</div>
<div class="right">
<h3>权限：网格员</h3>
<h3>姓名：{{item.name}}</h3>
<h3>电话：{{item.mobile}}</h3>
<p>工作范围：{{item.work}}</p>
</div>
</div>
<div v-for="(it,k) in item.loulist" :key="k" class="text item" @click="ToDanyuan(it.id)">
{{it.name}}
</div>
</el-card>
</div>
</div>
</div>
</template>
<script>
// 引入模块
import storage from '@/storage.js';
import { host,getloulist} from "@/api/api.js";
export default {
name: 'loulist',
data () {
return {
msg:'楼列表',
data:[
],
wgz:{}
}
},
methods:{
//跳转到单元列表页
ToDanyuan(e){
// console.log(e)
e=e+""
this.$router.push({path:'/danyuan.html?aid='+e})
},
//获取楼列表信息
getLou(aid){
// console.log('获取楼列表')
//----向后端发送数据开始----
getloulist(aid,storage.get('roottoken')).then(res => {
this.data=[]
if(res.status==403){
storage.remove('roottoken')
this.$router.push({path:'/login.html'})
}else{
// console.log(res)
res.data.re_wgz['img']=host+res.data.re_wgz['img']
this.wgz=res.data.re_wgz
for(var i=0;i<res.data.re_wgy.length;i++){
res.data.re_wgy[i].loulist=[]
res.data.re_wgy[i].img=host+res.data.re_wgy[i].img
for(var j=0;j<res.data.re_loulist.length;j++){
if(res.data.re_loulist[j].wgy==res.data.re_wgy[i].id){
res.data.re_wgy[i].loulist.push(res.data.re_loulist[j])
}
}
if(res.data.re_wgy[i].loulist.length>0){
this.data.push(res.data.re_wgy[i])
}
}
// console.log(this.data)
}
}).catch(error => {console.log(error);});
//-----向后端发送数据结束-----
}
},
mounted(){
// console.log(this.$route.query);
this.getLou(this.$route.query.aid)
}
}
</script>
<style scoped>
.content{
width: 1200px;
margin: 0 auto;
min-height: 500px;
border-top:1px solid rgba(0, 0, 0, 0.6);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-top: 150px;
}
.wgz{
width: 400px;
height: 200px;
margin: 0 auto;
background-color:#F5F5F5;
/* border:1px solid rgba(0, 0, 0, 0.6); */
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-top: -100px;
display: flex;
}
.wgy{
width: 400px;
height: 200px;
background-color:#F5F5F5;
/* border:1px solid rgba(0, 0, 0, 0.6); */
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
display: flex;
}
.left{
width: 150px;
height: 100%;
}
.left img{
width: 100%;
height: 100%;
}
.right{
width: 250px;
height: 100%;
padding: 20px;
overflow:auto
}
.text {
font-size: 14px;
}
.item {
padding: 15px 0;
margin: 15px 0;
background-color: #FFF5EE;
}
.box-card {
margin-top: 30px;
margin-bottom: 30px;
width: 480px;
}
.boxx{
display: flex;
justify-content:space-around;
flex-wrap:wrap
}
</style>
