首页 > 其他分享 >Vue, Django | 数据可视化平台开发

Vue, Django | 数据可视化平台开发

时间:2023-07-05 09:44:53浏览次数:41  
标签:Vue 展示 视图 Django 区域 可视化 数据 设备

给公司搞了个互联网设备可视化平台,在地图上展示互联网设备的信息,点击地图不同区域,统计相应的设备信息,生成图表展示出来

用的vue-big-screen框架,在原框架基础上,主要干了下面几件事:
1.下载不同区域的geojson数据,点击大图的不同区域,调用mapclick方法,将子区域的geojson数据加载出来
2.修改了各个vue组件视图的展示形式,为设备的具体信息视图增加了滚动展示和图片展示效果
3.修改了mapclick方法,点击不同区域,获取区域code,刷新各个视图
4.后台用django查取各区域的设备信息,按照mock.js的数据形式返还给各视图
5.建立了各区域的父子节点关系,查询父节点视图,将对其所有子节点数据进行统计汇总
6.用django搭建了各区域数据上传模块

标签:Vue,展示,视图,Django,区域,可视化,数据,设备
From: https://www.cnblogs.com/z5onk0/p/17527691.html

相关文章

  • 前端Vue自定义轮播图视频播放组件 仿京东商品详情轮播图视频Video播放效果 可图片预览
    前端Vue自定义轮播图视频播放组件仿京东商品详情轮播图视频Video播放,可图片预览,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13325效果图如下:cc-videoSwiper使用方法<!--goodsData:轮播图视频数据 @setShowVideo:视频按钮点击事件-......
  • 前端Vue一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按
    前端Vue一款基于canvas的精美商品海报生成组件根据个性化数据生成商品海报图长按保存图片,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13326效果图如下:cc-beautyPoster使用方法<!--posterData:海报数据--><cc-beautyPoster:poste......
  • vue2-样式冲突-使用deep修改子组件中的样式
    /deep/样式穿透<template><divclass="left-container"><h3>Left组件</h3><my-count:init="9"></my-count></div></template><script>exportdefault{}</scrip......
  • Nginx+Uwsgi+Django+Mysql部署项目
    第一章、准备工作第1节、创建项目目录准备好项目代码,将代码上传至myprojectmkdirmyproject第2节、安装python3cd/usr/local/mkdirPythonwgethttps://www.python.org/ftp/python/3.8.0/Python-3.8.0.tgztar-zxvfPython-3.8.0.tgzmkdir/usr/local/Python/py3_p......
  • vuE初探[230704]
    vue语法初探课前须知知识储备:html、JavaScript、css(node、npm、webpack)课程介绍进阶式:基础:生命周期函数条件循环渲染指令、页面样式修饰语法···组件:全局&局部、数据传递、插槽基础···动画:单组件元素、列表&状态动画、CSS和JS动画···高级扩展语法:Mixin混入、V......
  • Vue02
    1.Vue计算属性和watch监听1.1.计算属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><!--引入vue.js--><scriptsrc="node_modules/vue/dist/vue......
  • vue项目中锚点定位bug无效和替代方式
    在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转。所以在vue项目中定义一个方法不适用锚点定位:scrollToSection(id){letsection=document.getElementById(id)if(section){......
  • 解决vue 不是内部或外部命令
    1.输入命令找到npm的配置路径npmconfiglist2.查看此路径下有没有vue.cmd3.如果有vue.cmd,将当前路径复制添加到path环境变量步骤:桌面右击“我的电脑”-属性-高级系统设置-环境变量环境变量两种添加方式:①直接新建-规范取一个变量名-将vue.cmd所在路径复制到变量值......
  • Vue内置缓存组件keep-alive
    <el-tab-panelabel="周边配套":disabled=!gardenIdname="five"><keep-alive><Surrour:gardenId="gardenId"v-if="activeName==='five'"/></keep-alive>......
  • java、vue基于hutool的aes指定秘钥加密(前后端aes加解密)
     后端代码//加密data对称AESKeybyte[]key=getBytes("._^BV67nW6ck8fwg",16);//秘钥长度最好是16位SymmetricCryptoaes=newSymmetricCrypto(SymmetricAlgorithm.AES,key);Stringjsondata=aes.encryptHex("中国test");System.out.println(jsondata);//......