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

淄博网站建设网站建设与网页设计视频

wzjs 2025/9/21 8:52:47

淄博网站建设,网站建设与网页设计视频,WordPress会员积分插件,东道设计公司logo一. 智慧天气系统功能定义天气数据实时监控，实时视频监控，历史数据分析；电子地图，设备地理位置精确定位；多级组织结构管理，满足集团大客户需求；可视化大屏展示，数据指标一目了然&am…

一. 智慧天气系统功能定义

天气数据实时监控，实时视频监控，历史数据分析；
电子地图，设备地理位置精确定位；
多级组织结构管理，满足集团大客户需求；
可视化大屏展示，数据指标一目了然，彰显企业数字化建设形象；

二. 主要技术栈

数据可视化Echarts；管理系统VUE框架；
HTTP服务Python Django ，Python Flask；
MQTT 物联网服务 Mosquitto；支持主流的MQTT云服务厂商对接：阿里云物联网平台，EMQ物联网平台等；
数据库 Mysql；支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite等，还可以定制其它类型数据库；
部署在阿里云主机；支持腾讯云主机，华为云主机，亚马逊云主机等主流云平台，或者私有化部署。

三. 可视化大屏

效果图

关键代码

http 服务器代码

# -*- coding:utf-8 -*-import io
import os
import sys
import time
import requests
import urllib
import jsonfrom flask import Flask
from flask import request# 导入线程模块
import threading
# 导入数据库模块
import db
import daping
import config
from log import *app = Flask(__name__, static_folder="static", template_folder="template")@app.route('/')
def hello_world():return os.getcwd()# 主程序在这里
if __name__ == "__main__":# 开启线程，触发动态数据a = threading.Thread(target=daping.loop)a.start()# 开启 flask 服务app.run(host='0.0.0.0', port=80, debug=False)

实时风向图表echarts代码

function init_echart_gauge_dir(container) {var chartDom = document.getElementById(container);var myChart = echarts.init(chartDom);option = {series: [{type: "gauge",radius: "60%",center: ["60%", "50%"],// startAngle: 200,// endAngle: -20,// false顺时针增长，true逆时针增长clockwise: true,// 0 ：x横轴右向// startAngle: 0,// endAngle: 360,startAngle: 90,endAngle: 90.01,min: 0,max: 360,splitNumber: 8,axisLine: {lineStyle: {// width: 6,// 轴线的分段颜色color: [[0.25, "#FF6E76"],[0.5, "#FDDD60"],[0.75, "#58D9F9"],[1, "#7CFFB2"],],},},// 标尺为红色itemStyle: {color: "red",},progress: {show: true,},// 指针pointer: {show: true,icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",length: "100%",width: 20,// 指针位置offsetCenter: [0, 0],itemStyle: {color: "auto",},},// 小刻度与坐标轴的距离axisTick: {distance: -15,splitNumber: 5,},// 分割线与坐标轴的距离splitLine: {distance: -20,},// 刻度标签axisLabel: {distance: -15,color: "orange",formatter: function (value) {if (value === 0) {return "北";} else if (value === 45) {return "东北";} else if (value === 90) {return "东";} else if (value === 135) {return "东南";} else if (value === 180) {return "南";} else if (value === 225) {return "西南";} else if (value === 270) {return "西";} else if (value === 315) {return "西北";}return "";},// formatter: "{value} °",},detail: {valueAnimation: true,width: "60%",lineHeight: 30,borderRadius: 8,// data数字位置offsetCenter: [0, 0],// 表盘中间字体大小fontSize: 14,fontWeight: "normal",formatter: "{value} °",color: "rgba(255, 255, 255, 0)",},data: [{value: 3.2,},],},],};window.addEventListener("resize", function () {myChart.resize();});myChart.setOption(option);
}

四. 管理系统

效果图

关键代码

http django服务器

#!/usr/bin/env python
"""Django's command-line utility for administrative tasks."""
import os
import sysdef main():"""Run administrative tasks."""os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'application.settings')try:from django.core.management import execute_from_command_lineexcept ImportError as exc:raise ImportError("Couldn't import Django. Are you sure it's installed and ""available on your PYTHONPATH environment variable? Did you ""forget to activate a virtual environment?") from excexecute_from_command_line(sys.argv)if __name__ == '__main__':main()

组织管理 - django 代码

class DeptViewSet(CustomModelViewSet):"""组织管理接口list:查询create:新增update:修改retrieve:单例destroy:删除"""queryset = Dept.objects.all()serializer_class = DeptSerializercreate_serializer_class = DeptCreateUpdateSerializerupdate_serializer_class = DeptCreateUpdateSerializerfilter_fields = ['name', 'id', 'parent']search_fields = []# extra_filter_backends = []def list(self, request, *args, **kwargs):# 如果懒加载，则只返回父级queryset = self.filter_queryset(self.get_queryset())lazy = self.request.query_params.get('lazy')parent = self.request.query_params.get('parent')if lazy:# 如果懒加载模式，返回全部if not parent:if self.request.user.is_superuser:queryset = queryset.filter(parent__isnull=True)else:queryset = queryset.filter(id=self.request.user.dept_id)serializer = self.get_serializer(queryset, many=True, request=request)return SuccessResponse(data=serializer.data, msg="获取成功")page = self.paginate_queryset(queryset)if page is not None:serializer = self.get_serializer(page, many=True, request=request)return self.get_paginated_response(serializer.data)serializer = self.get_serializer(queryset, many=True, request=request)return SuccessResponse(data=serializer.data, msg="获取成功")def dept_lazy_tree(self, request, *args, **kwargs):parent = self.request.query_params.get('parent')queryset = self.filter_queryset(self.get_queryset())if not parent:if self.request.user.is_superuser:queryset = queryset.filter(parent__isnull=True)else:queryset = queryset.filter(id=self.request.user.dept_id)data = queryset.filter(status=True).order_by('sort').values('name', 'id', 'parent')return DetailResponse(data=data, msg="获取成功")

组织管理 - vue 代码

<template><d2-container :class="{ 'page-compact': crud.pageOptions.compact }"><!--    <template slot="header">测试页面1</template>--><d2-crud-x ref="d2Crud" v-bind="_crudProps" v-on="_crudListeners"><div slot="header"><crud-searchref="search":options="crud.searchOptions"@submit="handleSearch"/><el-button-group><el-buttonsize="small"v-permission="'Create'"type="primary"@click="addRow"><i class="el-icon-plus" /> 新增</el-button></el-button-group><crud-toolbar:search.sync="crud.searchOptions.show":compact.sync="crud.pageOptions.compact":columns="crud.columns"@refresh="doRefresh()"@columns-filter-changed="handleColumnsFilterChanged"/></div></d2-crud-x></d2-container>
</template><script>
import * as api from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
export default {name: 'dept',mixins: [d2CrudPlus.crud],data () {return {}},methods: {getCrudOptions () {return crudOptions(this)},pageRequest (query) {query.lazy = truereturn api.GetList(query)},addRequest (row) {d2CrudPlus.util.dict.clear()return api.createObj(row)},updateRequest (row) {d2CrudPlus.util.dict.clear()return api.UpdateObj(row)},delRequest (row) {return api.DelObj(row.id)},// 授权createPermission (scope) {this.$router.push({name: 'menuButton',params: { id: scope.row.id },query: { name: scope.row.name }})}}
}
</script><style lang="scss">
.yxtInput {.el-form-item__label {color: #49a1ff;}
}
</style>