| | |
| | | <div class="percentage">{{item.percentage}}%</div> |
| | | </div> |
| | | <div class="label mt-[5px] flex flex-row items-center justify-center"> |
| | | <div class="text-[12px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div> |
| | | <div class="text-[16px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div> |
| | | <div class="text-[24px] text-[#FFD500]">{{item.value}}</div> |
| | | </div> |
| | | </div> |
| | |
| | | <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqiwendu.png" alt=""> |
| | | <div class="env-info"> |
| | | <span class="envlabel">大气温度</span> |
| | | <span class="envvalue" :style="enviorStyle">5°C</span> |
| | | <div class="envvalue" :style="enviorStyle"> |
| | | <span class="envvalue-text">5°C</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="env-item"> |
| | | <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqishidu.png" alt=""> |
| | | <div class="env-info"> |
| | | <span class="envlabel">大气湿度</span> |
| | | <span class="envvalue" :style="enviorStyle">22.9%</span> |
| | | <div class="envvalue" :style="enviorStyle"> |
| | | <span class="envvalue-text">22.9%</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="env-item"> |
| | | <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM2.png" alt=""> |
| | | <div class="env-info"> |
| | | <span class="envlabel">PM2.5</span> |
| | | <span class="envvalue" :style="enviorStyle">10 μg/m³</span> |
| | | <div class="envvalue" :style="enviorStyle"> |
| | | <span class="envvalue-text">10 μg/m³</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="env-item"> |
| | | <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM10.png" alt=""> |
| | | <div class="env-info"> |
| | | <span class="envlabel">PM10</span> |
| | | <span class="envvalue" :style="enviorStyle">13 μg/m³</span> |
| | | <div class="envvalue" :style="enviorStyle"> |
| | | <span class="envvalue-text">13 μg/m³</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="env-item"> |
| | | <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengli.png" alt=""> |
| | | <div class="env-info"> |
| | | <span class="envlabel">风力</span> |
| | | <span class="envvalue" :style="enviorStyle">3级</span> |
| | | <div class="envvalue" :style="enviorStyle"> |
| | | <span class="envvalue-text">3级</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="env-item"> |
| | | <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengxiang.png" alt=""> |
| | | <div class="env-info"> |
| | | <span class="envlabel">风向</span> |
| | | <span class="envvalue" :style="enviorStyle">北风</span> |
| | | <div class="envvalue" :style="enviorStyle"> |
| | | <span class="envvalue-text">北风</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | options: { |
| | | tooltip: { |
| | | trigger: 'item', |
| | | show: false |
| | | }, |
| | | legend: { |
| | | itemWidth: 8, |
| | |
| | | }, |
| | | data: [{ |
| | | value: 81.5, |
| | | name: '主隧洞掘进', |
| | | name: '', |
| | | itemStyle: { |
| | | color: '#00FFFF' |
| | | } |
| | |
| | | options: { |
| | | tooltip: { |
| | | trigger: 'item', |
| | | show: false |
| | | }, |
| | | legend: { |
| | | itemWidth: 8, |
| | |
| | | }, |
| | | data: [{ |
| | | value: 33, |
| | | name: '主隧洞掘进', |
| | | name: '', |
| | | itemStyle: { |
| | | color: '#00FFFF' |
| | | } |
| | |
| | | options: { |
| | | tooltip: { |
| | | trigger: 'item', |
| | | show: false |
| | | }, |
| | | legend: { |
| | | itemWidth: 8, |
| | |
| | | }, |
| | | data: [{ |
| | | value: 20, |
| | | name: '主隧洞掘进', |
| | | name: '', |
| | | itemStyle: { |
| | | color: '#00FFFF' |
| | | } |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | <style scoped lang="scss"> |
| | | .equipment-container { |
| | | width: 100%; |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | .env-info { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | width: 70%; |
| | | height: 95%; |
| | | |
| | | width: calc( 100% - 88px); |
| | | height: 100%; |
| | | } |
| | | |
| | | .satalabel { |
| | |
| | | } |
| | | |
| | | .envlabel { |
| | | font-size: 14px; |
| | | font-size: 16px; |
| | | color: #C8C8C8; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .envvalue { |
| | | text-align: center; |
| | | font-size: 16px; |
| | | color: #fff; |
| | | margin-top: 4px; |
| | | width: 100%; |
| | | height: 100%; |
| | | font-size: 18px; |
| | | color: #fff; |
| | | margin-top: 4px; |
| | | width: 100%; |
| | | height: calc(100% - 28px); |
| | | position: relative; |
| | | .envvalue-text{ |
| | | position: absolute; |
| | | top: 33%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%); |
| | | } |
| | | } |
| | | |
| | | .equipment-status { |