作者：ssw

來源：Python 技術(shù)

大屏有時純粹是為了好看，領(lǐng)導(dǎo)的說法是“花花綠綠的效果不錯”。尤其放到展廳里，整面墻壁都是大屏那種，色彩十分艷麗。

我嘗試了一下。不是專業(yè)的前端，所以用vue模板修改，前后端分離。

后端使用fastapi，爬取的數(shù)據(jù)存入數(shù)據(jù)庫。效果圖如下，點擊看全屏效果

下面這張是網(wǎng)上下載的vue大屏，我根據(jù)它來修改的

修改內(nèi)容包括:

1. 更換背景大圖，形成"暗黑"星空風(fēng)格
2. Apache ECharts官網(wǎng)找適合的效果圖，并修改
3. 刪除詞云和中間的飛行地圖等，把自己的內(nèi)容排版進去

數(shù)據(jù)來源

說明

1. 這里只介紹右邊的“降水量預(yù)報”。值越大，氣球越大

1. 采用scrapy爬取數(shù)據(jù)
2. 數(shù)據(jù)爬自weather.cma.cn
3. 定義要爬的url，降水量相加得到某地未來一天的降雨量
4. 
   
5. 
   

運行過程

爬蟲腳本

參考 ssw的小型文檔網(wǎng)站

后端接口

數(shù)據(jù)庫的爬蟲數(shù)據(jù)

fastapi

• 接口url:
• http://localhost:5000/rain/
• 腳本:

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}})

前端展示

vue部分目錄結(jié)構(gòu)

文件已上傳，下載地址

.├── 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

1. 導(dǎo)入router/index.js中的路由
2. 導(dǎo)入components/index.js中定義的組件，方便其它文件引用。如 在alerts.vue中寫上即可引用

import Vue from 'vue'import router from './router'import Vcomp from './components/index' //Vue.use(Vcomp)

components/index.js

組件在這個文件進行匯總

import rain from './companySummary/rain' //區(qū)域雨量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小時降水量預(yù)報h2> <rain /> <div class="panel-footer">div> div> ...省略
																				

api/index.js

• 向fastapi接口發(fā)送請求

export const rainInfo = (params) => { return axios.get('http://localhost:5000/rain/')}

api/options.js

• 向fastapi接口發(fā)送請求
• mapOptions在rain.vue被引用，被apache echarts使用

$.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 = { //坐標(biāo)數(shù)據(jù)        '婁底市':[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],    };    ...省略}

總結(jié)

• 通過這次嘗試，簡單實現(xiàn)了大屏效果。條形圖、折線圖、飛行地圖、詞云等，還可以去Apache ECharts官網(wǎng)找資源加入到大屏。如果你對threejs很了解，甚至可以把它的3D效果加入進來
• 有些大屏用html編寫，一大段一大段的代碼讓人失去修改的興趣，相比來說vue更簡潔、代碼少、修改快。