From 50ee7232f3c98fe24a1f2e31dba9508cfec14887 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Fri, 21 Feb 2025 17:35:39 +0800
Subject: [PATCH] 模型预览
---
src/views/EquipmentView.vue | 618 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 618 insertions(+), 0 deletions(-)
diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue
new file mode 100644
index 0000000..a499a46
--- /dev/null
+++ b/src/views/EquipmentView.vue
@@ -0,0 +1,618 @@
+<template>
+ <div class="equipment-container">
+ <div class="top-section mb-[20px]">
+ <div
+ class="w-full h-[4vh] 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 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="{
+ 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>
+
+ <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>
+</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' } },
+ ],
+ },
+
+ ],
+ }
+ },
+ {
+ 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()
+ }
+ },
+ }
+}
+</script>
+
+<style scoped>
+.equipment-container {
+ width: 100%;
+ height: calc(100vh - 100px);
+ color: white;
+}
+
+.section-title {
+ font-size: 18px;
+ margin-bottom: 20px;
+ color: #fff;
+}
+
+.top-section {
+ width: 100%;
+}
+
+.middle-section {
+ width: 100%;
+}
+
+.bottom-section {
+ width: 100%;
+}
+
+.stats-grid {
+ width: 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;
+}
+.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;
+}
+.env-info {
+ display: flex;
+ flex-direction: column;
+ width: 70%;
+ height: 100%;
+}
+.satalabel{
+ font-size: 16px;
+ color: #fff;
+}
+.label {
+ font-size: 12px;
+ color: #fff;
+}
+.envlabel {
+ font-size: 14px;
+ color: #C8C8C8;
+ margin-left: 20px;
+}
+
+.envvalue {
+ font-size: 16px;
+ color: #fff;
+ margin-top: 4px;
+ width: 100%;
+ height: 100%;
+ padding-left: 20px;
+}
+
+.equipment-status {
+ padding: 20px 10px;
+}
+
+.status-title {
+ font-size: 16px;
+ margin-bottom: 20px;
+}
+
+.status-circles {
+ 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;
+}
+
+.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);
+}
+
+.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.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: 20px 0;
+}
+
+.progress-bar {
+ margin-top: 20px;
+}
+
+.bar {
+ width: 100%;
+}
+
+.progress {
+ 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;
+}
+
+.block {
+ flex: 1;
+ height: 100%;
+ background: rgba(216,216,216,0.1);
+}
+
+.block.active {
+ background: linear-gradient(180deg, #FFD500 0%, #FF9B00 100%);
+}
+
+.progress-inner {
+ display: none;
+}
+</style>
--
Gitblit v1.9.3