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

天气数据实时监控，实时视频监控，历史数据分析；

电子地图，设备地理位置精确定位；

多级组织结构管理，满足集团大客户需求；

可视化大屏展示，数据指标一目了然，彰显企业数字化建设形象；

二. 主要技术栈

数据可视化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>

五. 更多系统资源

智慧农业系统 - 可视化大屏（Echarts）&管理系统（HTTP(S)协议）&物联网平台（MQTT协议）_YYDataV数据可视化的博客-CSDN博客

智慧天气系统 - 可视化大屏（Echarts）管理系统（HTTP(S)协议）物联网平台（MQTT协议）相关推荐

智慧公交可视化大屏决策管理系统改善城市交通
建设背景随着中国城镇化的快速发展,城市人口数量急剧增加,城市公共交通面临着前所未有的压力. 道路拥堵问题成为我国大城市通病,影响城市运行效率,也为城市居民生活带来不便.城市公共交通具有大容量.低碳环 ...
告别短板，制作高校智慧教育可视化大屏用这些组件
随着信息技术的发展,高校各部门的信息化系统在不断增加并投入日常使用,迄今已积累了大量的可用数据.全面客观的数据是实现教育治理现代化的基础,而传统的数据管理模式在数据的分析运用方面仍存在短板,数据庞杂造 ...
智慧农业系统 - 可视化大屏（Echarts）管理系统（HTTP(S)协议）物联网平台（MQTT协议）
一.平台功能特点农业数据实时监控,实时视频监控,历史数据分析: 支持电子地图,设备地理位置精确定位: 支持多级组织结构管理,满足集团大客户需求: 可视化大屏展示,数据指标一目了然,彰显企业数字化建设 ...
智慧电力可视化大屏，赋能虚拟电厂精准减碳
前言国网河北电力发布的<数字孪生电网白皮书>中提到: 随着"碳达峰.碳中和""构建以新能源为主体的新型电力系统"等战略目标的提出,电网将会接入大量 ...
图扑智慧电力可视化大屏，赋能虚拟电厂精准减碳
国网河北电力发布的<数字孪生电网白皮书>中提到: 随着"碳达峰.碳中和""构建以新能源为主体的新型电力系统"等战略目标的提出,电网将会接入大量具有随 ...
整理全网最全大屏，可视化大屏，可视化方案，可视化参考，报表，大屏设计，大屏资源，大屏学习，高保真大屏
整理全网最全大屏设计资源,包括各类智慧大屏,axure高保真大屏原型,大屏设计参考思路,大屏设计可视化图片,如何学习设计大屏等. Gitee仓库地址:https://gitee.com/AiShiYu ...
整理可视化大屏设计教程与相关资源，大屏设计，可视化
GIT地址: https://gitee.com/AiShiYuShiJiePingXing/bigscreen 点击前往GIT查看一.基础概念 1.1 什么是数据可视化把相对复杂.抽象的数据通过 ...
可视化大屏是什么？有哪些应用场景？
在大数据时代,我们经常听到"用数据说话"这句话.但是数据本身只是一个个冰冷的数字,很难直接告诉我们哪些数据是有价值的信息.只有通过适当的可视化工具来展示和表达数据,才能更直观地向用 ...
智慧社区系统、智能社区、智能照明、楼控系统、web端管理系统+智慧楼宇管理系统、可视化大屏园区数据
智慧社区系统.智能社区.智能照明.楼控系统.web端管理系统+智慧楼宇管理系统.可视化大屏园区数据+楼控系统(智能照明.电梯系统)+安防系统(视频监控.防盗报警/门禁管理/电子巡更/消防报警)+设备台 ...
可视化大屏赋能智慧医疗
随着互联网.计算机技术快速发展,衍生出一系列新兴技术,包括云计算.大数据.物联网.人工智能.计算机视觉等新技术全球行业市场的竞争格局.如何借助信息化手段构筑科研管理和教学管理为一体的智慧医疗管理系统, ...

智慧天气系统 - 可视化大屏（Echarts）管理系统（HTTP(S)协议）物联网平台（MQTT协议）

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

二. 主要技术栈

三. 可视化大屏

效果图

关键代码

http 服务器代码

实时风向图表echarts代码

四. 管理系统

效果图

关键代码

http django服务器

组织管理 - django 代码

组织管理 - vue 代码

五. 更多系统资源

智慧天气系统 - 可视化大屏（Echarts）管理系统（HTTP(S)协议）物联网平台（MQTT协议）相关推荐

最新文章

热门文章