|
|
@@ -0,0 +1,237 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-row :gutter="40" class="panel-group">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="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;">36</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"> 体感温度 舒适</span>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="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 :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>交通情况</strong>
|
|
|
+ <div style="color: #45CA9D;font-size: 30px;line-height: 50px;padding: 15px 0;text-align: center">畅通</div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="background: #D34400;" class="sample-block"/>
|
|
|
+ 严重拥挤
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="background: #FF8B33;" class="sample-block"/>
|
|
|
+ 拥挤
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="height: 10px"/>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="background: #FFAA33;" class="sample-block"/>
|
|
|
+ 缓行
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="background: #45CA9D;" class="sample-block"/>
|
|
|
+ 畅通
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>值班信息</strong>
|
|
|
+ <div id="chart1" style="width: 100%;height:150px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="40" class="panel-group">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>酒店信息</strong>
|
|
|
+ <div style="font-size: 35px;margin-bottom: 12px;" align="center">
|
|
|
+ ￥381360
|
|
|
+ </div>
|
|
|
+ <div class="" style="font-size: 16px;color: #999999;" align="center">
|
|
|
+ <img style="margin-top: 3px;margin-right: 5px;" src="https://wladmin-pro-smartcity.123cx.com/statics/image/travelIntegratedData/icon.png">
|
|
|
+ 销售金额
|
|
|
+ </div>
|
|
|
+ <el-divider/>
|
|
|
+ <p style="font-size: 18px;text-align: right;color: #999999;">入住 3243</p>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>涉旅信息</strong>
|
|
|
+ <div style="font-size: 35px;margin-bottom: 12px;" align="center">
|
|
|
+ ￥176436
|
|
|
+ </div>
|
|
|
+ <div class="" style="font-size: 16px;color: #999999;" align="center">
|
|
|
+ <img style="margin-top: 3px;margin-right: 5px;" src="https://wladmin-pro-smartcity.123cx.com/statics/image/travelIntegratedData/icon.png">
|
|
|
+ 门票收入
|
|
|
+ </div>
|
|
|
+ <el-divider/>
|
|
|
+ <p style="font-size: 18px;text-align: right;color: #999999;">文旅线路 164</p>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>客流分析</strong>
|
|
|
+ <div id="chart2" style="width: 100%;height:150px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>交通旅游分析</strong>
|
|
|
+ <div id="chart3" style="width: 100%;height:150px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="40" class="panel-group">
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>员工工单分析</strong>
|
|
|
+ <div id="chart4" style="width: 100%;height:150px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>环境数据</strong>
|
|
|
+ <div id="chart5" style="width: 100%;height:150px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6">
|
|
|
+ <el-card class="card">
|
|
|
+ <strong>水质数据</strong>
|
|
|
+ <div id="chart6" style="width: 100%;height:150px;"/>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </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'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: 'first'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const xAxis = []
|
|
|
+ for (let i = 7; i > 0; i--) {
|
|
|
+ console.log(this.addDays(new Date(), i * -1))
|
|
|
+ xAxis.push(this.addDays(new Date(), i * -1))
|
|
|
+ }
|
|
|
+ this.buildBar('chart1', xAxis, [{ name: '值班人数', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
|
|
|
+ this.buildBar('chart2', xAxis, [{ name: '客流量', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
|
|
|
+ this.buildBar('chart3', xAxis, [
|
|
|
+ { name: '航空', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] },
|
|
|
+ { name: '高铁', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] },
|
|
|
+ { name: '汽车', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }
|
|
|
+ ])
|
|
|
+ this.buildBar('chart4', xAxis, [{ name: '工单数', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
|
|
|
+ this.buildBar('chart5', xAxis, [
|
|
|
+ { name: '空气污染指数', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] },
|
|
|
+ { name: '噪音污染指数', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }
|
|
|
+ ])
|
|
|
+ this.buildBar('chart6', xAxis, [
|
|
|
+ { name: '生物性污染指数', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] },
|
|
|
+ { name: '物理性污染指数', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] },
|
|
|
+ { name: '化学性污染指数', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addDays(nd, days) {
|
|
|
+ nd = nd.valueOf()
|
|
|
+ nd = nd + days * 24 * 60 * 60 * 1000
|
|
|
+ nd = new Date(nd)
|
|
|
+ var y = nd.getFullYear()
|
|
|
+ var m = nd.getMonth() + 1
|
|
|
+ var d = nd.getDate()
|
|
|
+ if (m <= 9) m = '0' + m
|
|
|
+ if (d <= 9) d = '0' + d
|
|
|
+ return y + '-' + m + '-' + d
|
|
|
+ },
|
|
|
+ buildBar(elementId, xAxis, seriesData) {
|
|
|
+
|
|
|
+ const chart = echarts.init(document.getElementById(elementId))
|
|
|
+ chart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: { top: '0', right: '1%' },
|
|
|
+ grid: { left: 25, right: 0, bottom: 35, top: 25 },
|
|
|
+ xAxis: { type: 'category', data: xAxis },
|
|
|
+ yAxis: { type: 'value' },
|
|
|
+ series: seriesData
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
