作者:ssw
来源:Python 技术
大屏有时纯粹是为了好看,领导的说法是“花花绿绿的效果不错”。尤其放到展厅里,整面墙壁都是大屏那种,色彩十分艳丽。
我尝试了一下。不是专业的前端,所以用vue模板修改,前后端分离。
后端使用fastapi,爬取的数据存入数据库。效果图如下,点击看全屏效果
下面这张是网上下载的vue大屏,我根据它来修改的
修改内容包括:
运行过程
参考 ssw的小型文档网站
from fastapi import FastAPIfrom fastapi.responses import JSONResponseimport pymysqlapp = FastAPI()def conn_mysql(sql): dbparam = { 'host': '127.0.0.1', 'port': 3306, 'user': 'root', 'password': '1024', 'database': 'alerts', 'charset': 'utf8' } conn = pymysql.connect(**dbparam) cursor = conn.cursor() try: cursor.execute(sql) res = cursor.fetchall() except Exception as e: print('入库失败', e) conn.rollback() finally: cursor.close() conn.close() return resdef get_rains_from_db(): sql = 'SELECT city,rain from rains' res = conn_mysql(sql) return res@app.get('/rain')def rain(): res = get_rains_from_db() for i in res: city = i[0].strip() if (city == '益阳'): yys = i elif (city == '永顺'): xxz = i elif (city == '长沙'): css = i elif (city == '张家界'): zjjs = i elif (city == '邵阳市'): sys = i elif (city == '株洲'): zzs = i elif (city == '常德'): cds = i elif (city == '娄底'): ld = i return JSONResponse({'data': {'ld': ld, 'css': css, 'sys': sys, 'yys': yys, 'zjjs': zjjs, 'xxz': xxz, 'cds': cds, 'zzs': zzs}})
文件已上传,下载地址
.├── public│ └── json│ └── 430000.json└── src ├── api │ ├── http.js │ ├── index.js │ └── options.js ├── components │ ├── companySummary │ │ └── rain.vue │ └── index.js ├── main.js ├── router │ └── index.js └── views └── alerts.vue
router/index.js
编写路由
const routes = [ { path: '/alerts', name: 'alerts', component: () => import('@/views/alerts.vue'), meta: { title: '告警' } },]
main.js
import Vue from 'vue'import router from './router'import Vcomp from './components/index' //Vue.use(Vcomp)
components/index.js
组件在这个文件进行汇总
import rain from './companySummary/rain' //区域雨量const components = { rain, //指components/companySummary/rain.vue}const Vcomp = { ...components, install};export default Vcomp
components/companySummary/rain.vue
import {mapOptions} from '@/api/options.js'export default { name: 'rain',}
views/alerts.vue
这里引用rain.vue组件
...省略 class="panel"> <h2>20小时降水量预报h2> <rain /> <div class="panel-footer">div> div> ...省略
api/index.js
export const rainInfo = (params) => { return axios.get('http://localhost:5000/rain/')}
api/options.js
$.ajax({ type: "GET", url: "http://localhost:5000/rain/", dataType: 'json', async:false, success: function (res) { var xxx = [ {name: '娄底市', value: parseFloat(res.data.ld[1])}, {name: '长沙市', value: parseFloat(res.data.css[1])}, {name: '邵阳市', value: parseFloat(res.data.sys[1])}, {name: '益阳市', value: parseFloat(res.data.yys[1])}, {name: '张家界市', value: parseFloat(res.data.zjjs[1])}, {name: '湘西土家族苗族自治州', value: parseFloat(res.data.xxz[1])}, {name: '常德市', value: parseFloat(res.data.cds[1])}, {name: '株洲市', value: parseFloat(res.data.zzs[1])}, ]; }})export function mapOptions(mapType) { var geoCoordMap = { //坐标数据 '娄底市':[112.008497,27.728136], '长沙市':[112.982279,28.19409], '邵阳市':[111.46923,27.237842], '益阳市':[112.355042,28.570066], '张家界市':[110.479921,29.127401], '湘西土家族苗族自治州':[109.739735,28.314296], '常德市':[111.691347,29.040225], '株洲市':[113.151737,27.835806], }; ...省略}
数据分析咨询请扫描二维码