From fe2b697a063ab9898af5ec0b49c30ad20274d56e Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Tue, 25 Feb 2025 11:42:12 +0800
Subject: [PATCH] 调整样式，接口对接
---
src/views/EquipmentView.vue | 1052 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 552 insertions(+), 500 deletions(-)
diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue
index a499a46..b036fd5 100644
--- a/src/views/EquipmentView.vue
+++ b/src/views/EquipmentView.vue
@@ -1,618 +1,670 @@
<template>
- <div class="equipment-container">
- <div class="top-section mb-[20px]">
- <div
- class="w-full h-[4vh] mb-[1vh]"
- :style="{
+<div class="equipment-container">
+ <div class="top-nav w-full mb-[1vh]" :style="{
backgroundImage: `url(${titleImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: '100% 100%'
- }"
- >
- </div>
- <div class="stats-grid" :style="sectionStyle">
- <div class="stat-item mb-[10px]">
- <div class="stat-info">
- <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/shishirenshu.png" alt="">
- <span class="satalabel ml-[8px]">实时人数</span>
- </div>
- <div class="value text-[#00FFFF] text-[28px] font-bold">62</div>
- </div>
- <div class="stat-item mb-[10px]">
- <div class="stat-info">
- <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/people.png" alt="">
- <span class="satalabel ml-[8px]">今日累计/人次</span>
- </div>
- <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
- </div>
- <div class="stat-item">
- <div class="stat-info">
- <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/zaigang.png" alt="">
- <span class="satalabel ml-[8px]">在岗总数</span>
- </div>
- <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
- </div>
- </div>
- </div>
+ }">
+ </div>
+ <div class="bottom-nav">
+ <div class="top-section mb-[20px]">
- <div class="middle-section mb-[20px]">
- <div
- class="w-full h-[4vh] mb-[1vh]"
- :style="{
+ <div class="stats-grid" :style="sectionStyle">
+ <div class="stat-item mb-[10px]">
+ <div class="stat-info">
+ <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/shishirenshu.png" alt="">
+ <span class="satalabel ml-[8px]">实时人数</span>
+ </div>
+ <div class="value text-[#00FFFF] text-[28px] font-bold">62</div>
+ </div>
+ <div class="stat-item mb-[10px]">
+ <div class="stat-info">
+ <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/people.png" alt="">
+ <span class="satalabel ml-[8px]">今日累计/人次</span>
+ </div>
+ <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
+ </div>
+ <div class="stat-item">
+ <div class="stat-info">
+ <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/zaigang.png" alt="">
+ <span class="satalabel ml-[8px]">在岗总数</span>
+ </div>
+ <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="middle-section mb-[20px]">
+ <div class="w-full h-[4vh] mb-[1vh]" :style="{
backgroundImage: `url(${middleImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: '100% 100%'
- }"
- >
- </div>
- <div class="equipment-status" :style="sectionStyle">
- <div
- class="w-full h-[30px] mb-[10px]"
- :style="{
+ }">
+ </div>
+ <div class="equipment-status" :style="sectionStyle">
+ <div class="w-full h-[30px] mb-[10px]" :style="{
backgroundImage: `url(${bgImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: '100% 100%'
- }"
- >
- <div class="text-white text-[14px] ml-[40px] leading-[35px]">升降机监控</div>
- </div>
- <div class="status-circles">
- <template v-for="item in circleItems">
- <div class="circle-item flex flex-col items-center justify-center" :key="item.id">
- <div class="progress-circle">
- <V2Echarts :idName="item.id" :options="item.options" />
- <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-[24px] text-[#FFD500]">{{item.value}}</div>
- </div>
- </div>
- </template>
- </div>
- <div class="control-buttons mt-[30px]">
- <button class="control-btn" :class="{ 'active': currentTab === '塔吊监控' }" @click="handleControlBtnClick('塔吊监控')">塔吊监控</button>
- <button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
- </div>
- <div class="divider"></div>
- <div class="progress-bar">
- <div class="label">运行设备总数</div>
- <div class="bar flex items-center">
- <div class="progress relative w-[80%] h-[24px]">
- <div class="progress-inner" :style="{ width: `${deviceOnline / deviceTotal * 100}%` }"></div>
- <div class="progress-blocks">
- <div v-for="n in 28" :key="n"
- class="block"
- :class="{ 'active': (n-1)/28 * 100 <= (deviceOnline / deviceTotal * 100) }"
- ></div>
- </div>
- </div>
- <div class="count-container ml-[25px]">
- <span class="text-[#FFBF00] text-[24px]">{{deviceOnline}}</span>
- <span class="text-white text-[24px]">/</span>
- <span class="text-white text-[24px]">{{deviceTotal}}</span>
- </div>
- </div>
- </div>
- </div>
+ }">
+ <div class="text-white text-[14px] ml-[40px] leading-[35px]">升降机监控</div>
</div>
+ <div class="status-circles">
+ <template v-for="item in circleItems">
+ <div class="circle-item flex flex-col items-center justify-center" :key="item.id">
+ <div class="progress-circle">
+ <V2Echarts :idName="item.id" :options="item.options" />
+ <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-[24px] text-[#FFD500]">{{item.value}}</div>
+ </div>
+ </div>
+ </template>
+ </div>
+ <div class="control-buttons">
+ <button class="control-btn" :class="{ 'active': currentTab === '塔吊监控' }" @click="handleControlBtnClick('塔吊监控')">塔吊监控</button>
+ <button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
+ </div>
+ <div class="divider"></div>
+ <div class="progress-bar">
+ <div class="label">运行设备总数</div>
+ <div class="bar flex items-center">
+ <div class="progress relative w-[80%] h-[24px]">
+ <div class="progress-inner" :style="{ width: `${deviceOnline / deviceTotal * 100}%` }"></div>
+ <div class="progress-blocks">
+ <div v-for="n in 28" :key="n" class="block" :class="{ 'active': (n-1)/28 * 100 <= (deviceOnline / deviceTotal * 100) }"></div>
+ </div>
+ </div>
+ <div class="count-container ml-[25px]">
+ <span class="text-[#FFBF00] text-[24px]">{{deviceOnline}}</span>
+ <span class="text-white text-[24px]">/</span>
+ <span class="text-white text-[24px]">{{deviceTotal}}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <div class="bottom-section">
- <div
- class="w-full h-[4vh] mb-[1vh]"
- :style="{
+ <div class="bottom-section">
+ <div class="w-full h-[4vh] mb-[1vh]" :style="{
backgroundImage: `url(${bottomImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: '100% 100%'
- }"
- >
- </div>
- <div class="environment-grid" :style="sectionStyle">
- <div class="env-item">
- <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>
- </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>
- </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>
- </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>
- </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>
- </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>
- </div>
- </div>
+ }">
+ </div>
+ <div class="environment-grid" :style="sectionStyle">
+ <div class="env-item">
+ <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>
</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>
+ </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>
+ </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>
+ </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>
+ </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>
+ </div>
+ </div>
</div>
+ </div>
+</div>
</template>
<script>
import V2Echarts from '@/components/V2Echarts.vue'
export default {
- name: 'EquipmentView',
- components: {
- V2Echarts
- },
- data() {
- return {
- backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png', import.meta.url).href,
- titleImage: new URL('@/assets/images/titles/renyuan.png', import.meta.url).href,
- middleImage: new URL('@/assets/images/titles/shebei.png', import.meta.url).href,
- bottomImage: new URL('@/assets/images/titles/huanjing.png', import.meta.url).href,
- bgImage: new URL('@/assets/images/titles/title_second.png', import.meta.url).href,
- enviorImage: new URL('@/assets/images/titles/wendu_bg.png', import.meta.url).href,
- deviceOnline: 1,
- deviceTotal: 27,
- currentTab: '塔吊监控',
- circleItems: [
- {
- id: 'zaixianChartBox',
- name: '总在线',
- value: 22,
- percentage: 81.5,
- options: {
- tooltip: {
- trigger: 'item',
- },
- legend: {
- itemWidth: 8,
- itemHeight: 8,
- top: '5%',
- left: 'center',
- show: false,
- },
- series: [
- {
- type: 'pie',
- radius: ['70%', '80%'],
- center: ['50%', '50%'],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- startAngle: 90,
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- shadowBlur: 40,
- borderWidth: 5,
- shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
- },
- },
- data: [
- { value: 100, name: '', itemStyle: { color: '#234E84' } },
- ],
- },
- {
- type: 'pie',
- radius: ['70%', '100%'],
- center: ['50%', '50%'],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- startAngle: 90,
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- shadowBlur: 40,
- borderWidth: 10,
- shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
- },
- },
- data: [
- { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
- { value: 80, name: '', itemStyle: { color: 'transparent' } },
- ],
- },
-
- ],
- }
+ name: 'EquipmentView',
+ components: {
+ V2Echarts
+ },
+ data() {
+ return {
+ backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
+ import.meta.url).href,
+ titleImage: new URL('@/assets/images/titles/renyuan.png',
+ import.meta.url).href,
+ middleImage: new URL('@/assets/images/titles/shebei.png',
+ import.meta.url).href,
+ bottomImage: new URL('@/assets/images/titles/huanjing.png',
+ import.meta.url).href,
+ bgImage: new URL('@/assets/images/titles/title_second.png',
+ import.meta.url).href,
+ enviorImage: new URL('@/assets/images/titles/wendu_bg.png',
+ import.meta.url).href,
+ deviceOnline: 1,
+ deviceTotal: 27,
+ currentTab: '塔吊监控',
+ circleItems: [{
+ id: 'zaixianChartBox',
+ name: '总在线',
+ value: 22,
+ percentage: 81.5,
+ options: {
+ tooltip: {
+ trigger: 'item',
+ },
+ legend: {
+ itemWidth: 8,
+ itemHeight: 8,
+ top: '5%',
+ left: 'center',
+ show: false,
+ },
+ series: [{
+ type: 'pie',
+ radius: ['70%', '80%'],
+ center: ['50%', '50%'],
+ avoidLabelOverlap: false,
+ hoverAnimation: false,
+ startAngle: 90,
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ shadowBlur: 40,
+ borderWidth: 5,
+ shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
+ },
},
- {
- id: 'lixianChartBox',
- name: '总离线',
- value: 5,
- percentage: 81.5,
- options: {
- tooltip: {
- trigger: 'item',
- },
- legend: {
- itemWidth: 8,
- itemHeight: 8,
- top: '5%',
- left: 'center',
- show: false,
- },
- series: [
- {
- type: 'pie',
- radius: ['70%', '80%'],
- center: ['50%', '50%'],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- startAngle: 90,
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- shadowBlur: 40,
- borderWidth: 5,
- shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
- },
- },
- data: [
- { value: 100, name: '', itemStyle: { color: '#234E84' } },
- ],
- },
- {
- type: 'pie',
- radius: ['70%', '100%'],
- center: ['50%', '50%'],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- startAngle: 90,
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- shadowBlur: 40,
- borderWidth: 10,
- shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
- },
- },
- data: [
- { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
- { value: 80, name: '', itemStyle: { color: 'transparent' } },
- ],
- },
-
- ],
- }
+ data: [{
+ value: 100,
+ name: '',
+ itemStyle: {
+ color: '#234E84'
+ }
+ }, ],
+ },
+ {
+ type: 'pie',
+ radius: ['70%', '100%'],
+ center: ['50%', '50%'],
+ avoidLabelOverlap: false,
+ hoverAnimation: false,
+ startAngle: 90,
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ shadowBlur: 40,
+ borderWidth: 10,
+ shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
+ },
},
- {
- id: 'baojingChartBox',
- name: '总报警',
- value: 0,
- percentage: 81.5,
- options: {
- tooltip: {
- trigger: 'item',
- },
- legend: {
- itemWidth: 8,
- itemHeight: 8,
- top: '5%',
- left: 'center',
- show: false,
- },
- series: [
- {
- type: 'pie',
- radius: ['70%', '80%'],
- center: ['50%', '50%'],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- startAngle: 90,
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- shadowBlur: 40,
- borderWidth: 5,
- shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
- },
- },
- data: [
- { value: 100, name: '', itemStyle: { color: '#234E84' } },
- ],
- },
- {
- type: 'pie',
- radius: ['70%', '100%'],
- center: ['50%', '50%'],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- startAngle: 90,
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- shadowBlur: 40,
- borderWidth: 10,
- shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
- },
- },
- data: [
- { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
- { value: 80, name: '', itemStyle: { color: 'transparent' } },
- ],
- },
- ],
+ data: [{
+ value: 20,
+ name: '主隧洞掘进',
+ itemStyle: {
+ color: '#00FFFF'
}
- }
- ]
+ },
+ {
+ value: 80,
+ name: '',
+ itemStyle: {
+ color: 'transparent'
+ }
+ },
+ ],
+ },
+
+ ],
+ }
+ },
+ {
+ id: 'lixianChartBox',
+ name: '总离线',
+ value: 5,
+ percentage: 81.5,
+ options: {
+ tooltip: {
+ trigger: 'item',
+ },
+ legend: {
+ itemWidth: 8,
+ itemHeight: 8,
+ top: '5%',
+ left: 'center',
+ show: false,
+ },
+ series: [{
+ type: 'pie',
+ radius: ['70%', '80%'],
+ center: ['50%', '50%'],
+ avoidLabelOverlap: false,
+ hoverAnimation: false,
+ startAngle: 90,
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ shadowBlur: 40,
+ borderWidth: 5,
+ shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
+ },
+ },
+ data: [{
+ value: 100,
+ name: '',
+ itemStyle: {
+ color: '#234E84'
+ }
+ }, ],
+ },
+ {
+ type: 'pie',
+ radius: ['70%', '100%'],
+ center: ['50%', '50%'],
+ avoidLabelOverlap: false,
+ hoverAnimation: false,
+ startAngle: 90,
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ shadowBlur: 40,
+ borderWidth: 10,
+ shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
+ },
+ },
+ data: [{
+ value: 20,
+ name: '主隧洞掘进',
+ itemStyle: {
+ color: '#00FFFF'
+ }
+ },
+ {
+ value: 80,
+ name: '',
+ itemStyle: {
+ color: 'transparent'
+ }
+ },
+ ],
+ },
+
+ ],
+ }
+ },
+ {
+ id: 'baojingChartBox',
+ name: '总报警',
+ value: 0,
+ percentage: 81.5,
+ options: {
+ tooltip: {
+ trigger: 'item',
+ },
+ legend: {
+ itemWidth: 8,
+ itemHeight: 8,
+ top: '5%',
+ left: 'center',
+ show: false,
+ },
+ series: [{
+ type: 'pie',
+ radius: ['70%', '80%'],
+ center: ['50%', '50%'],
+ avoidLabelOverlap: false,
+ hoverAnimation: false,
+ startAngle: 90,
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ shadowBlur: 40,
+ borderWidth: 5,
+ shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
+ },
+ },
+ data: [{
+ value: 100,
+ name: '',
+ itemStyle: {
+ color: '#234E84'
+ }
+ }, ],
+ },
+ {
+ type: 'pie',
+ radius: ['70%', '100%'],
+ center: ['50%', '50%'],
+ avoidLabelOverlap: false,
+ hoverAnimation: false,
+ startAngle: 90,
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ shadowBlur: 40,
+ borderWidth: 10,
+ shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
+ },
+ },
+ data: [{
+ value: 20,
+ name: '主隧洞掘进',
+ itemStyle: {
+ color: '#00FFFF'
+ }
+ },
+ {
+ value: 80,
+ name: '',
+ itemStyle: {
+ color: 'transparent'
+ }
+ },
+ ],
+ },
+ ],
+ }
}
- },
- computed: {
- sectionStyle() {
- return {
- backgroundImage: `url(${this.backgroundImage})`,
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center center',
- backgroundSize: '100% 100%'
- }
- },
- enviorStyle() {
- return {
- backgroundImage: `url(${this.enviorImage})`,
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center center',
- backgroundSize: '100% 100%'
- }
- }
- },
- methods: {
- handleControlBtnClick(tab) {
- this.currentTab = tab;
- },
- handleResize() {
- if (this.myChart) {
- this.myChart.resize()
- }
- },
+ ]
}
+ },
+ computed: {
+ sectionStyle() {
+ return {
+ backgroundImage: `url(${this.backgroundImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%'
+ }
+ },
+ enviorStyle() {
+ return {
+ backgroundImage: `url(${this.enviorImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%'
+ }
+ }
+ },
+ methods: {
+ handleControlBtnClick(tab) {
+ this.currentTab = tab;
+ },
+ handleResize() {
+ if (this.myChart) {
+ this.myChart.resize()
+ }
+ },
+ }
}
</script>
<style scoped>
.equipment-container {
- width: 100%;
- height: calc(100vh - 100px);
- color: white;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - 100px);
+ overflow: hidden;
}
-
+.top-nav{
+ height: 4vh;
+}
+.bottom-nav{
+ flex: 1;
+}
.section-title {
- font-size: 18px;
- margin-bottom: 20px;
- color: #fff;
+ font-size: 18px;
+ margin-bottom: 20px;
+ color: #fff;
}
.top-section {
- width: 100%;
+ width: 100%;
+ height: calc(100% - 80%);
}
.middle-section {
- width: 100%;
+ width: 100%;
+ height: 40%;
}
.bottom-section {
- width: 100%;
+ width: 100%;
+ height: calc(100% - 20% - 43%);
}
.stats-grid {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 20px 10px;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 20px 10px;
}
-.stat-item{
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 20px 14px;
- height: 52px;
- background: linear-gradient( 270deg, rgba(48,104,165,0.1) 2%, #3068A5 100%);
- border-radius: 2px;
-}
+.stat-item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 14px;
+ height: 52px;
+ background: linear-gradient(270deg, rgba(48, 104, 165, 0.1) 2%, #3068A5 100%);
+ border-radius: 2px;
+}
+
.env-item {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 10px 14px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 10px 14px;
}
.stat-info {
- display: flex;
- flex-direction: row;
- align-items: left;
+ display: flex;
+ flex-direction: row;
+ align-items: left;
}
+
.env-info {
- display: flex;
- flex-direction: column;
- width: 70%;
- height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 70%;
+ height: 95%;
}
-.satalabel{
- font-size: 16px;
- color: #fff;
+
+.satalabel {
+ font-size: 16px;
+ color: #fff;
}
+
.label {
- font-size: 12px;
- color: #fff;
+ font-size: 12px;
+ color: #fff;
}
+
.envlabel {
- font-size: 14px;
- color: #C8C8C8;
- margin-left: 20px;
+ font-size: 14px;
+ color: #C8C8C8;
}
.envvalue {
- font-size: 16px;
- color: #fff;
- margin-top: 4px;
- width: 100%;
- height: 100%;
- padding-left: 20px;
+ text-align: center;
+ font-size: 16px;
+ color: #fff;
+ margin-top: 4px;
+ width: 100%;
+ height: 100%;
}
.equipment-status {
- padding: 20px 10px;
+ padding: 20px 10px;
+ height: calc(100% - 5vh);
}
.status-title {
- font-size: 16px;
- margin-bottom: 20px;
+ font-size: 16px;
+ margin-bottom: 20px;
}
.status-circles {
- display: flex;
- justify-content: space-around;
- margin: 20px 0;
+ display: flex;
+ justify-content: space-around;
+ margin: 20px 0;
}
.progress-circle {
- width: 80px;
- height: 80px;
- border-radius: 50%;
- border: 4px solid #3068A5;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- position: relative;
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ border: 4px solid #3068A5;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
}
.percentage {
- font-size: 12px;
- color: #00ffff;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+ font-size: 12px;
+ color: #00ffff;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
.environment-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ height: calc(100% - 5vh);
}
.control-buttons {
- display: flex;
- gap: 10px;
- justify-content: center;
+ display: flex;
+ gap: 10px;
+ justify-content: center;
}
.control-btn {
- padding: 8px 16px;
- background: rgba(112,119,140,0.3);
- border-radius: 2px;
- border: 1px solid rgba(112,124,140,0.6);
- color: #C8C8C8;
- cursor: pointer;
+ padding: 8px 16px;
+ background: rgba(112, 119, 140, 0.3);
+ border-radius: 2px;
+ border: 1px solid rgba(112, 124, 140, 0.6);
+ color: #C8C8C8;
+ cursor: pointer;
}
.control-btn.active {
- background: rgba(255,191,0,0.2);
- border-radius: 2px;
- border: 1px solid #FFBF00;
- color: #fff;
+ background: rgba(255, 191, 0, 0.2);
+ border-radius: 2px;
+ border: 1px solid #FFBF00;
+ color: #fff;
}
.divider {
- width: 100%;
- height: 1px;
- background: linear-gradient( 270deg, rgba(94,161,209,0.1) 0%, #4886BC 49%, rgba(48,104,165,0.1) 100%);
- margin: 20px 0;
+ width: 100%;
+ height: 1px;
+ background: linear-gradient(270deg, rgba(94, 161, 209, 0.1) 0%, #4886BC 49%, rgba(48, 104, 165, 0.1) 100%);
+ margin: 20px 0;
}
-.progress-bar {
- margin-top: 20px;
-}
+
.bar {
- width: 100%;
+ width: 100%;
}
.progress {
- background: rgba(216,216,216,0.1);
- border: 1px solid rgba(255,255,255,0.2);
- overflow: hidden;
+ background: rgba(216, 216, 216, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ overflow: hidden;
}
.progress-blocks {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- gap: 4px;
- padding: 2px 4px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ gap: 4px;
+ padding: 2px 4px;
}
.block {
- flex: 1;
- height: 100%;
- background: rgba(216,216,216,0.1);
+ flex: 1;
+ height: 100%;
+ background: rgba(216, 216, 216, 0.1);
}
.block.active {
- background: linear-gradient(180deg, #FFD500 0%, #FF9B00 100%);
+ background: linear-gradient(180deg, #FFD500 0%, #FF9B00 100%);
}
.progress-inner {
- display: none;
+ display: none;
}
</style>
--
Gitblit v1.9.3