新能源汽车可视化大屏数据系列之八渲染中间页面显示数据

任务：

         将数据库的数据，渲染到大屏的中间屏部分

操作步骤：

        1.修改"big-screen-vue-datav-master\src\views"下的Center.vue，修改代码如下所示：

    <div class="up">

      <div class="bg-color-black item">
        <p class="ml-3 colorBlue fw-b fs-xl" style="text-align: center">车辆总数据</p>
        <div style="text-align: center">{{this.result.x1}}条</div>
      </div>
      <div class="bg-color-black item">
        <p class="ml-3 colorBlue fw-b fs-xl" style="text-align: center">销售量最多汽车</p>
        <div style="text-align: center">{{this.result.x2}}</div>
      </div>
      <div class="bg-color-black item">
        <p class="ml-3 colorBlue fw-b fs-xl" style="text-align: center">车辆最高销售额</p>
        <div style="text-align: center">{{this.result.x3}}</div>
      </div>
      <div class="bg-color-black item">
        <p class="ml-3 colorBlue fw-b fs-xl" style="text-align: center">销售最多车型</p>
        <div style="text-align: center">{{this.result.x4}}</div>
      </div>
      <div class="bg-color-black item">
        <p class="ml-3 colorBlue fw-b fs-xl" style="text-align: center">车型最多品牌</p>
        <div style="text-align: center">{{this.result.x5}}</div>
      </div>
      <div class="bg-color-black item">
        <p class="ml-3 colorBlue fw-b fs-xl" style="text-align: center">车辆平均价格</p>
        <div style="text-align: center">{{this.result.x6}}万</div>
      </div>

    </div>

         2.在carProject(你的django项目）下，修改urls.py文件，用于设置项目的url地址

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('myapp/',include('myapp.urls'))
]

        3.在myapp项目下（或myApp），添加urls.py,代码如下

# 导入相关的类库文件
from django.urls import path

from myapp import views

urlpatterns=[
    path("center/",views.center,name="center"),
]

       4.在myapp项目下，修改views.py文件

from django.shortcuts import render
from django.http import JsonResponse,HttpResponse
from .utils import  getCenterData,getPublicData

# Create your views here.
def center(request):
    if request.method == 'GET':
        getCenterData.getBaseData()
        return JsonResponse()

      5.在myapp项目，添加utils目录，该目录下创建getPublicData.py文件

from  myApp.models import *

#定义获取所有的数据
def getAllCars():
    return CarInfo.objects.all()

        在myapp项目的utils下创建和getCenterData.py文件，代码如下：

#导包
import  json
import time

from numpy.ma.extras import average

from .getPublicData import *

#定义函数
def getBaseData():
    cars=getAllCars()
    sumCar=len(cars)
    highVolume=cars[0].saleVolume
    topCar=cars[0].carName
    print(sumCar,highVolume,topCar)

         6.运行项目carProject

D:\pythondemo\carproject22\.venv\Scripts\python.exe D:\pythondemo\carproject22\manage.py runserver localhost:8000 
Performing system checks...

Watching for file changes with StatReloader
System check identified no issues (0 silenced).
December 24, 2024 - 12:02:25
Django version 4.2.17, using settings 'carproject22.settings'
Starting development server at http://localhost:8000/
Quit the server with CTRL-BREAK.

然后在地址栏输入网址：http://localhost:8000/myapp/center,回车，浏览器可能会报错，不用管！

出现下面箭头所示的内容提示表示成功！

7.车型最多的数据、车型最多品牌数据、平均价格获取

#车型:复合数据过滤;最开始车型列表为空，判断第一个“小型车”，没有-1，则设置carModels['小型车']=1
    #否则carModels['小型车']+1  =2
    carModels={}
    for car in cars:
        if carModels.get(car.carModel,-1) == -1:
           carModels[str(car.carModel)]=1
        else:
            carModels[str(car.carModel)]+=1
    print(carModels)
    #排序
    carModels=sorted(carModels.items(),key=lambda x:x[1],reverse=True)
    print(carModels[0][0])
#车型最多的品牌
    carBrands={}
    maxBrand=0
    mostBrand=''
    for car in cars:
        if carBrands.get(car.brand,-1) == -1:
            carBrands[str(car.brand)]=1
        else:
            carBrands[str(car.brand)]+=1

    #打印测试
    print(carBrands)
    # carBrands = sorted(carBrands.items(), key=lambda x: x[1], reverse=True)
    # print(carBrands[0][0])
    for k,v in carBrands.items():
        if v>maxBrand:
            maxBrand=v
            mostBrand=k
    print(mostBrand)

    # 平均价格;理解json.loads()函数；sumCar*2 算了2次； 保留2位小数;
    sumPrice=0
    for car in cars:
        x=json.loads(car.price)[0]+json.loads(car.price)[1]
        sumPrice+=x
    avgPrice=sumPrice/(sumCar*2)
    avgPrice=round(avgPrice,2)
    print(avgPrice)

综合效果如下所示：

486 56156 海鸥
{'小型车': 11, '微型车': 20, '中型车': 54, '紧凑型SUV': 113, '紧凑型车': 68, '中大型SUV': 51, '中型SUV': 73, '中大型车': 32, '小型SUV': 19, '大型SUV': 5, '微面': 6, '中大型MPV': 18, '中型MPV': 5, '紧凑型MPV': 10, '大型MPV': 1}
紧凑型SUV
{'比亚迪': 35, '五菱汽车': 21, '吉利汽车': 13, '理想汽车': 8, '小米汽车': 1, '长安': 17, '奇瑞': 17, '吉利银河': 7, '红旗': 14, 'AITO': 6, '哈弗': 11, '奔腾': 6, '埃安': 8, '零跑汽车': 7, '极氪': 9, '智界': 2, '捷途': 16, '领克': 13, '岚图': 6, '深蓝汽车': 8, '长安欧尚': 7, '小鹏汽车': 9, '北京': 5, '广汽传祺': 18, '魏牌': 2, '方程豹': 4, '奇瑞新能源': 5, '蔚来': 8, '东风纳米': 2, '名爵': 6, '智己汽车': 4, '坦克': 7, '乐道': 2, '长安启源': 6, 'iCAR': 2, 'ARCFOX极狐': 6, '欧拉': 2, '北京汽车': 3, '蓝电': 2, '东风奕派': 4, '星途': 9, '江铃集团新能源': 3, '阿维塔': 3, '东风风行': 4, '知豆': 2, '昊铂': 2, 'SRM鑫源': 2, '宝骏': 6, '江淮钇为': 2, '荣威': 7, '东风风神': 4, '启辰': 5, '凯翼': 4, '北汽制造': 1, '212': 2, '曹操汽车': 2, '上汽大通MAXUS': 2, '吉利几何': 1, '享界': 1, '极越': 2, '凌宝汽车': 1, '哪吒汽车': 1, '江淮瑞风': 1, '极石汽车': 1, '思皓': 1, '大众': 14, '本田': 8, '丰田': 12, '奥迪': 6, '奔驰': 5, '别克': 8, '宝马': 7, '日产': 4, '捷达': 3, '腾势': 2, '福特': 4, '凯迪拉克': 2, '沃尔沃': 2, '雪佛兰': 1, '马自达': 3, 'smart': 2, '林肯': 2, '现代': 1, '北京汽车制造厂': 1, '起亚': 1}
比亚迪
17.98

总结：

最后三个功能的完善，需要借助python的技术点比较多！

• 增加注释和文档:

  • 添加更多注释来解释每一步的操作，以提高代码的可读性和维护性。

• 异常处理:

  • 增加异常处理机制，例如在解析 JSON 数据时捕获可能的异常，确保程序的健壮性。

• 优化性能:

  • 如果数据量很大，可以考虑使用更高效的数据结构和算法来提高性能。