From d3290cacdae24c00244569de87aa5d7f8cd0c774 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Tue, 27 May 2025 15:10:40 +0800
Subject: [PATCH] feat: 设备状态UI修改
---
src/assets/css/element-ui-override.scss | 24 +
src/views/EquipmentView.vue | 1337 ++++++++++++++++++++++++++++++---------------------------
2 files changed, 723 insertions(+), 638 deletions(-)
diff --git a/src/assets/css/element-ui-override.scss b/src/assets/css/element-ui-override.scss
index d022747..f6706e5 100644
--- a/src/assets/css/element-ui-override.scss
+++ b/src/assets/css/element-ui-override.scss
@@ -120,4 +120,28 @@
color: #fff;
border: none;
outline: none;
+}
+/* 修改下拉面板背景色 */
+.el-select-dropdown {
+ background: rgb(33,72,115);
+ border-radius: 2px;
+ border: 1px solid #3068A5;
+ .el-select-dropdown__item{
+ display: flex;
+ align-items: center;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 400;
+ font-size: 12px;
+ color: #FFFFFF;
+ line-height: 16px;
+ text-align: left;
+ font-style: normal;
+ background-color: rgb(33,72,115);
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ &.selected {
+ background-color: rgba(255, 255, 255, 0.2);
+ }
+ }
}
\ No newline at end of file
diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue
index 2860604..dd39b73 100644
--- a/src/views/EquipmentView.vue
+++ b/src/views/EquipmentView.vue
@@ -1,692 +1,753 @@
<template>
-<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="bottom-nav">
- <div class="top-section mb-[20px]">
+ <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="bottom-nav">
+ <div class="top-section mb-[20px]">
+ <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="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]" :style="{
- backgroundImage: `url(${bgImage})`,
+ <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 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-[16px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div>
- <div class="text-[24px] text-[#FFD500]">{{item.value}}</div>
- </div>
+ backgroundSize: '100% 100%',
+ }"
+ >
+ </div>
+ <div class="equipment-status" :style="sectionStyle">
+ <el-select v-model="equipmentSelected" placeholder="请选择">
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+ </el-select>
+ <div
+ class="w-full h-[30px]"
+ :style="{
+ backgroundImage: `url(${bgImage})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: '100% 100%',
+ }"
+ >
+ <div class="text-white text-[14px] ml-[40px] leading-[35px] mt-[10px]">升降机监控</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-[16px] text-[#FFFFFF] mr-[12px]">{{ item.name }}</div>
+ <div class="text-[24px] text-[#FFD500]">{{ item.value }}</div>
+ </div>
+ </div>
+ </template>
+ </div>
+ <div class="divider"></div>
+ <div class="progress-bar px-[10px]">
+ <div class="label">运行设备总数</div>
+ <div class="bar flex items-center">
+ <div class="progress relative w-[90%] 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>
- </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 px-[10px]">
- <div class="label">运行设备总数</div>
- <div class="bar flex items-center">
- <div class="progress relative w-[90%] 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="{
- 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>
- <div class="envvalue" :style="enviorStyle">
- <span class="envvalue-text">5°C</span>
+ <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>
+ <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>
+ <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>
+ <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>
+ <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>
+ <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>
+ <div class="envvalue" :style="enviorStyle">
+ <span class="envvalue-text">北风</span>
+ </div>
+ </div>
+ </div>
+ </div>
</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>
- <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>
- <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>
- <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>
- <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>
- <div class="envvalue" :style="enviorStyle">
- <span class="envvalue-text">北风</span>
- </div>
- </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',
- show: false
- },
- 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: 81.5,
- name: '',
- itemStyle: {
- color: '#00FFFF'
- }
- },
- {
- value: 18.5,
- name: '',
- itemStyle: {
- color: 'transparent'
- }
- },
- ],
- },
-
- ],
- }
+ import V2Echarts from "@/components/V2Echarts.vue";
+ export default {
+ name: "EquipmentView",
+ components: {
+ V2Echarts,
},
- {
- id: 'lixianChartBox',
- name: '总离线',
- value: 5,
- percentage: 33,
- options: {
- tooltip: {
- trigger: 'item',
- show: false
- },
- 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,
+ data() {
+ return {
+ equipmentSelected: "",
+ options: [
+ {
+ value: "选项1",
+ label: "黄金糕",
},
- labelLine: {
- show: false,
+ {
+ value: "选项2",
+ label: "双皮奶",
},
- 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,
+ {
+ value: "选项3",
+ label: "蚵仔煎",
},
- labelLine: {
- show: false,
+ {
+ value: "选项4",
+ label: "龙须面",
},
- shadowBlur: 40,
- borderWidth: 10,
- shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
- },
- },
- data: [{
- value: 33,
- name: '',
- itemStyle: {
- color: '#00FFFF'
- }
- },
- {
- value: 77,
- name: '',
- itemStyle: {
- color: 'transparent'
- }
- },
+ {
+ value: "选项5",
+ label: "北京烤鸭",
+ },
],
- },
-
- ],
- }
+ 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",
+ show: false,
+ },
+ 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: 81.5,
+ name: "",
+ itemStyle: {
+ color: "#00FFFF",
+ },
+ },
+ {
+ value: 18.5,
+ name: "",
+ itemStyle: {
+ color: "transparent",
+ },
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ id: "lixianChartBox",
+ name: "总离线",
+ value: 5,
+ percentage: 33,
+ options: {
+ tooltip: {
+ trigger: "item",
+ show: false,
+ },
+ 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: 33,
+ name: "",
+ itemStyle: {
+ color: "#00FFFF",
+ },
+ },
+ {
+ value: 77,
+ name: "",
+ itemStyle: {
+ color: "transparent",
+ },
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ id: "baojingChartBox",
+ name: "总报警",
+ value: 0,
+ percentage: 20,
+ options: {
+ tooltip: {
+ trigger: "item",
+ show: false,
+ },
+ 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: 20,
- options: {
- tooltip: {
- trigger: 'item',
- show: false
+ computed: {
+ sectionStyle() {
+ return {
+ backgroundImage: `url(${this.backgroundImage})`,
+ backgroundRepeat: "no-repeat",
+ backgroundPosition: "center center",
+ backgroundSize: "100% 100%",
+ };
},
- legend: {
- itemWidth: 8,
- itemHeight: 8,
- top: '5%',
- left: 'center',
- show: false,
+ enviorStyle() {
+ return {
+ backgroundImage: `url(${this.enviorImage})`,
+ backgroundRepeat: "no-repeat",
+ backgroundPosition: "center center",
+ backgroundSize: "100% 100%",
+ };
},
- 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()
- }
- },
- }
-}
+ },
+ methods: {
+ handleControlBtnClick(tab) {
+ this.currentTab = tab;
+ },
+ handleResize() {
+ if (this.myChart) {
+ this.myChart.resize();
+ }
+ },
+ },
+ };
</script>
<style scoped lang="scss">
-.equipment-container {
- 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;
-}
+ .equipment-container {
+ 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;
+ }
-.top-section {
- width: 100%;
- height: calc(100% - 80%);
-}
+ .top-section {
+ width: 100%;
+ height: calc(100% - 80%);
+ }
-.middle-section {
- width: 100%;
- height: 40%;
-}
+ .middle-section {
+ width: 100%;
+ height: 40%;
+ }
-.bottom-section {
- width: 100%;
- height: calc(100% - 20% - 43%);
-}
+ .bottom-section {
+ width: 100%;
+ height: calc(100% - 20% - 43%);
+ }
-.stats-grid {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 20px 10px;
-}
+ .stats-grid {
+ 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;
-}
+ .env-item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 10px 14px;
+ }
-.stat-info {
- display: flex;
- flex-direction: row;
- align-items: left;
-}
+ .stat-info {
+ display: flex;
+ flex-direction: row;
+ align-items: left;
+ }
-.env-info {
-
- width: calc( 100% - 88px);
- height: 100%;
-}
+ .env-info {
+ width: calc(100% - 88px);
+ height: 100%;
+ }
-.satalabel {
- font-size: 16px;
- color: #fff;
-}
+ .satalabel {
+ font-size: 16px;
+ color: #fff;
+ }
-.label {
- font-size: 12px;
- color: #fff;
-}
+ .label {
+ font-size: 12px;
+ color: #fff;
+ }
-.envlabel {
- font-size: 16px;
- color: #C8C8C8;
- display: flex;
- align-items: center;
- justify-content: center;
-}
+ .envlabel {
+ font-size: 16px;
+ color: #c8c8c8;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
-.envvalue {
- text-align: center;
- 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%);
- }
-}
+ .envvalue {
+ text-align: center;
+ 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 {
- padding: 10px 10px;
- height: calc(100% - 5vh);
-}
+ .equipment-status {
+ padding: 10px 10px;
+ height: calc(100% - 5vh);
+ ::v-deep(.el-select) {
+ height: 28px;
+ background: linear-gradient(224deg, #3068a5 0%, #5daeff 100%);
+ border-radius: 2px;
+ width: 100%;
+ .el-input {
+ align-items: center;
+ display: flex;
+ height: 28px;
+ .el-input__inner {
+ height: 28px;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+ color: #dddddd;
+ line-height: 20px;
+ text-align: left;
+ font-style: normal;
+ }
+ .el-input__suffix {
+ align-items: center;
+ display: flex;
+ }
+ }
+ }
+ }
-.status-title {
- font-size: 16px;
- margin-bottom: 20px;
-}
+ .status-title {
+ font-size: 16px;
+ margin-bottom: 20px;
+ }
-.status-circles {
- display: flex;
- justify-content: space-around;
- margin: 15px 0;
-}
+ .status-circles {
+ display: flex;
+ justify-content: space-around;
+ margin: 15px 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;
-}
+ .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;
+ }
-.percentage {
- font-size: 12px;
- color: #00ffff;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
+ .percentage {
+ 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);
- height: calc(100% - 5vh);
-}
+ .environment-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ height: calc(100% - 5vh);
+ }
-.control-buttons {
- display: flex;
- gap: 10px;
- justify-content: center;
-}
+ .control-buttons {
+ 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;
-}
+ .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;
+ }
-.control-btn.active {
- background: rgba(255, 191, 0, 0.2);
- border-radius: 2px;
- border: 1px solid #FFBF00;
- color: #fff;
-}
+ .control-btn.active {
+ 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: 15px 0;
-}
+ .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: 15px 0;
+ }
+ .bar {
+ width: 100%;
+ }
+ .progress {
+ background: rgba(216, 216, 216, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ overflow: hidden;
+ }
-.bar {
- width: 100%;
-}
+ .progress-blocks {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ gap: 4px;
+ padding: 2px 4px;
+ }
-.progress {
- background: rgba(216, 216, 216, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.2);
- overflow: hidden;
-}
+ .block {
+ flex: 1;
+ height: 100%;
+ background: rgba(216, 216, 216, 0.1);
+ }
-.progress-blocks {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- gap: 4px;
- padding: 2px 4px;
-}
+ .block.active {
+ background: linear-gradient(180deg, #ffd500 0%, #ff9b00 100%);
+ }
-.block {
- flex: 1;
- height: 100%;
- background: rgba(216, 216, 216, 0.1);
-}
+ .progress-inner {
+ display: none;
+ }
-.block.active {
- background: linear-gradient(180deg, #FFD500 0%, #FF9B00 100%);
-}
-
-.progress-inner {
- display: none;
-}
</style>
--
Gitblit v1.9.3