7.获取楼列表

获取楼列表

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>