| | |
| | | </h1> |
| | | <div class="header-info"> |
| | | <div class="current-time">{{ currentTime }}</div> |
| | | <div @click="btn"><i class="el-icon-full-screen" style="font-size: 32px; margin-right: 15px;"></i></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="metric-name-large">{{ item.name }}</div> |
| | | <div class="metric-value-large">{{ formatNumber(item.value) }}</div> |
| | | <div class="metric-compare-large" v-if="item.compare !== undefined"> |
| | | <span :class="getCompareClass(item.compare)"> |
| | | <span v-if="item.name == 'åºåæ»é'"> |
| | | |
| | | </span> |
| | | <span :class="getCompareClass(item.compare)" v-else> |
| | | <i :class="getCompareIcon(item.compare)"></i> |
| | | {{ formatCompareValue(item.compare) }} |
| | | </span> |
| | | <span class="compare-label">è¾æ¨æ¥</span> |
| | | <span class="compare-label">{{ text(item.name) }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <!-- èæ¯è£
饰å
ç´ --> |
| | | <div class="decoration-corner top-left"></div> |
| | | <div class="decoration-corner top-right"></div> |
| | | <!-- <div class="decoration-corner top-right"></div> --> |
| | | <div class="decoration-corner bottom-left"></div> |
| | | <div class="decoration-corner bottom-right"></div> |
| | | </div> |
| | |
| | | <script> |
| | | import http from '../api/ajax.js'; |
| | | import * as echarts from 'echarts'; |
| | | import screenfull from 'screenfull'; |
| | | |
| | | export default { |
| | | name: 'DashboardScreen', |
| | |
| | | return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); |
| | | }, |
| | | |
| | | text(str) { |
| | | if (str == "仿¥è¿åºé" || str == "仿¥åºåºé") { |
| | | return "è¾æ¨æ¥" |
| | | } else if (str == "æ¬æè¿åºé" || str == "æ¬æåºåºé") { |
| | | return "è¾ä¸æ" |
| | | } else { |
| | | return "" |
| | | } |
| | | }, |
| | | |
| | | formatCompareValue(value) { |
| | | if (value === 0) return '0'; |
| | | return value > 0 ? `+${this.formatNumber(value)}` : this.formatNumber(value); |
| | |
| | | 'åºåæ»é': 'metric-total' |
| | | }; |
| | | return classMap[name] || ''; |
| | | }, |
| | | btn() { |
| | | console.log(11111111111); |
| | | if (screenfull.isEnabled) { |
| | | console.log(2222222222); |
| | | screenfull.request(); |
| | | } |
| | | }, |
| | | |
| | | getMetricIcon(type) { |
| | |
| | | width: 80px; |
| | | height: 80px; |
| | | border: 2px solid rgba(64, 158, 255, 0.5); |
| | | |
| | | } |
| | | |
| | | .top-left { |