|
|
@@ -1,6 +1,106 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <el-card>
|
|
|
+ <el-row :gutter="20" style="height: 200px;font-size: 12px;color: #333333;margin-bottom: 20px">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>天气</strong>
|
|
|
+ <span style="color: #999999;margin-left: 34px">03月07日 周一 农历二月初五</span>
|
|
|
+ <div style="clear: both"/>
|
|
|
+ <div style="margin-top: 30px">
|
|
|
+ <el-image src="/images/sun@3x.png" style="width: 30px;"/>
|
|
|
+ <span style="font-size: 20px;margin-left: 24px;">10</span>
|
|
|
+ <span>℃</span>
|
|
|
+ <span style="color: #FFAA33;margin-left: 10px">晴</span>
|
|
|
+ </div>
|
|
|
+ <el-divider/>
|
|
|
+ <span style="color: #666666">西南风＜3级</span>
|
|
|
+ <el-divider direction="vertical" style="padding: 0 10px"/>
|
|
|
+ <span style="display: inline-block;background: #F37868;padding: 2px 8px;color: white;border-radius: 2px"> 69 良</span>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>空气质量</strong>
|
|
|
+ <el-row style="margin-top: 40px">
|
|
|
+ <el-col :span="11" style="text-align: center">
|
|
|
+ <div style="color: #999999">空气质量指数</div>
|
|
|
+ <div style="color: #45CA9D;line-height: 85px;font-size: 50px">25</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-divider direction="vertical" class="vertical-divider-100"/>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11" class="air-quality-info">
|
|
|
+ <div>首要污染物：酸雨</div>
|
|
|
+ <div>PM2.5：19</div>
|
|
|
+ <div>空气质量：优</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>交通情况</strong>
|
|
|
+ <div style="color: #45CA9D;font-size: 30px;line-height: 50px;padding: 25px 0;text-align: center">畅通</div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="background: #D34400;" class="sample-block"></div>
|
|
|
+ 严重拥挤
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="background: #FF8B33;" class="sample-block"></div>
|
|
|
+ 拥挤
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="height: 10px"></div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="background: #FFAA33;" class="sample-block"></div>
|
|
|
+ 缓行
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="background: #45CA9D;" class="sample-block"></div>
|
|
|
+ 畅通
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>负氧离子</strong>
|
|
|
+ <el-row style="margin-top: 40px">
|
|
|
+ <el-col :span="11" style="text-align: center">
|
|
|
+ <div style="color: #999999">负氧离子(个/cm3)</div>
|
|
|
+ <div style="color: #45CA9D;line-height: 85px;font-size: 50px">1688</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-divider direction="vertical" class="vertical-divider-100"/>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11" class="air-quality-info">
|
|
|
+ <div>湿度：56.0%</div>
|
|
|
+ <div>气压：100kPa</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-bottom: 20px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card>
|
|
|
+ <div slot="header">节假日访客数量</div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card>
|
|
|
+ <div slot="header">节假日方可停留时长</div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card>
|
|
|
+ <div slot="header">出入境数据</div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-card style="margin-bottom: 20px">
|
|
|
<div slot="header">实时概况</div>
|
|
|
<el-row>
|
|
|
<el-col :span="4">
|
|
|
@@ -25,18 +125,17 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
- <div style="height: 16px" />
|
|
|
<el-row :gutter="16">
|
|
|
<el-col :span="8">
|
|
|
<el-card>
|
|
|
<div slot="header">性别</div>
|
|
|
- <div id="gender-box" style="width: 100%;height:200px;" />
|
|
|
+ <div id="gender-box" style="width: 100%;height:200px;"/>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-card>
|
|
|
<div slot="header">来源</div>
|
|
|
- <div id="from-source-box" style="width: 100%;height:200px;" />
|
|
|
+ <div id="from-source-box" style="width: 100%;height:200px;"/>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
@@ -51,6 +150,34 @@
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
+<style>
|
|
|
+.card {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.card strong {
|
|
|
+ font-size: 24px
|
|
|
+}
|
|
|
+
|
|
|
+.vertical-divider-100 {
|
|
|
+ height: 88px;
|
|
|
+}
|
|
|
+
|
|
|
+.air-quality-info {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.sample-block {
|
|
|
+ width: 20px;
|
|
|
+ height: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 5px
|
|
|
+}
|
|
|
+</style>
|
|
|
<script>
|
|
|
import * as echarts from 'echarts'
|
|
|
import { findDetail } from '@/api/equipment/equipment_passenger'
|
