From 308fe083d2671b4a9b817a2ef19fa46203b4cbcc Mon Sep 17 00:00:00 2001
From: wangjr <280364734@qq.com>
Date: Tue, 9 Sep 2025 20:05:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=204096*2160=E7=89=88=E6=9C=AC=E5=B0=86ifr?=
 =?UTF-8?q?ame=E4=BD=9C=E4=B8=BA=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/router.config.js                   |   2 +-
 .../largeScreen/ProductionCommandCenter1.vue  |   1 +
 .../largeScreen/ProductionCommandCenter2.vue  |   1 +
 .../largeScreen/ProductionCommandCenter3.vue  | 309 ++++++++++++++++++
 4 files changed, 312 insertions(+), 1 deletion(-)
 create mode 100644 src/views/largeScreen/ProductionCommandCenter3.vue

diff --git a/src/config/router.config.js b/src/config/router.config.js
index 1cfc4e2..707d693 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -85,7 +85,7 @@ export const constantRouterMap = [
       {
         path: 'productionCommandCenter',
         name: 'productionCommandCenter',
-        component: () => import(/* webpackChunkName: "largeScreen" */ '@/views/largeScreen/ProductionCommandCenter2')
+        component: () => import(/* webpackChunkName: "largeScreen" */ '@/views/largeScreen/ProductionCommandCenter3')
       }
     ]
   },
diff --git a/src/views/largeScreen/ProductionCommandCenter1.vue b/src/views/largeScreen/ProductionCommandCenter1.vue
index 66ddc72..208d46e 100644
--- a/src/views/largeScreen/ProductionCommandCenter1.vue
+++ b/src/views/largeScreen/ProductionCommandCenter1.vue
@@ -1,3 +1,4 @@
+<!-- 4096*2160版本 多图表 -->
 <script>
 import ProductData from './components/ProductData.vue'
 import Production from './components/Production.vue'
diff --git a/src/views/largeScreen/ProductionCommandCenter2.vue b/src/views/largeScreen/ProductionCommandCenter2.vue
index 5c4fafe..eeaf679 100644
--- a/src/views/largeScreen/ProductionCommandCenter2.vue
+++ b/src/views/largeScreen/ProductionCommandCenter2.vue
@@ -1,3 +1,4 @@
+<!-- 4096*2160版本 6个图表-->
 <script>
 import ProductData from './components/ProductData.vue'
 import Production from './components/Production.vue'
diff --git a/src/views/largeScreen/ProductionCommandCenter3.vue b/src/views/largeScreen/ProductionCommandCenter3.vue
new file mode 100644
index 0000000..e8c085c
--- /dev/null
+++ b/src/views/largeScreen/ProductionCommandCenter3.vue
@@ -0,0 +1,309 @@
+<!-- 4096*2160版本 6个图表 iframe作为背景-->
+<script>
+import ProductData from './components/ProductData.vue'
+import Production from './components/Production.vue'
+import PowerConsumption from './components/PowerConsumption.vue'
+import ProductOutput from './components/ProductOutput.vue'
+import ProductQualityRate from './components/ProductQualityRate.vue'
+import ProductQualificationRate from './components/ProductQualificationRate.vue'
+import FurnaceProductionContribution from './components/FurnaceProductionContribution.vue'
+import SafetyEvents from './components/SafetyEvents.vue'
+import ElectrodeConsumption from './components/ElectrodeConsumption.vue'
+import UnitPowerConsumption from './components/UnitPowerConsumption.vue'
+import FurnaceTemperatureStability from './components/FurnaceTemperatureStability.vue'
+import PowerUsage from './components/PowerUsage.vue'
+import ReactiveCompensationEfficiency from './components/ReactiveCompensationEfficiency.vue'
+
+export default {
+  components: {
+    ProductData,
+    Production,
+    PowerConsumption,
+    ProductOutput,
+    ProductQualityRate,
+    ProductQualificationRate,
+    FurnaceProductionContribution,
+    SafetyEvents,
+    FurnaceTemperatureStability,
+    ElectrodeConsumption,
+    PowerUsage,
+    UnitPowerConsumption,
+    ReactiveCompensationEfficiency
+  }
+}
+</script>
+
+<template>
+  <div class="main">
+    <div id="middleTitle" class="middleTitle">
+      <!-- <div class="cockpit"><div class="cockpitFont">驾驶舱</div></div>
+      <div class="branchPlantProCap"><div class="branchPlantProCapFont">分厂产能</div></div> -->
+      <div class="middleTitleFont"><img src="@/assets/title.png" alt="" /></div>
+      <!-- <div class="productionEfficiency"><div class="productionEfficiencyFont">生产效能</div></div>
+      <div class="safetyManagement"><div class="safetyManagementFont">安全管理</div></div> -->
+    </div>
+    <div class="operatingStatusBox">
+      <div class="operatingStatus">
+        <div class="operatingStatusFont">工厂整体运行状态</div>
+        <div class="operatingStatusContent">
+          <div class="contentBox">
+            <div class="contentBoxFont">
+              <img src="@/assets/Component 1.svg" alt="" />
+            </div>
+            <div class="contentBoxCont">
+              <product-data></product-data>
+            </div>
+          </div>
+          <div class="contentBox">
+            <div class="contentBoxFont">
+              <img src="@/assets/Component 6.svg" alt="" />
+              <span>单位：t</span>
+            </div>
+            <div class="contentBoxCont">
+              <production></production>
+            </div>
+          </div>
+          <div class="contentBox">
+            <div class="contentBoxFont">
+              <img src="@/assets/Component 8.svg" alt="" />
+              <span>百分比</span>
+            </div>
+            <div class="contentBoxCont">
+              <div class="contentBoxCont">
+                <product-quality-rate></product-quality-rate>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="operatingStatus1">
+        <iframe width="100%" height="100%" src="https://www.baidu.com"></iframe>
+      </div>
+      <div class="operatingStatus">
+        <div class="operatingStatusFont">能耗与电耗分析</div>
+        <div class="operatingStatusContent">
+          <div class="contentBox">
+            <div class="contentBoxFont">
+              <img src="@/assets/Component 12.svg" alt="" />
+            </div>
+            <div class="contentBoxCont">
+              <PowerUsage />
+            </div>
+          </div>
+          <div class="contentBox">
+            <div class="contentBoxFont">
+              <img src="@/assets/Component 13.svg" alt="" />
+              <span>单位：kWh/t</span>
+            </div>
+            <div class="contentBoxCont">
+              <div class="contentBoxCont">
+                <UnitPowerConsumption />
+              </div>
+            </div>
+          </div>
+          <div class="contentBox">
+            <div class="contentBoxFont">
+              <img src="@/assets/Component 5.svg" alt="" />
+            </div>
+            <div class="contentBoxCont">
+              <div class="contentBoxCont">
+                <furnace-temperature-stability></furnace-temperature-stability>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.main {
+  width: 256rem; // 416 * 0.615
+  height: 135rem; // 114.1875 * 1.154
+  // background: radial-gradient(50% 50% at 50% 50%, #0f3b8c 0%, #0e357e 33.17%, #041026 100%);
+  position: relative;
+}
+.middleTitle {
+  width: 256rem; // 415.8125 * 0.615
+  height: 11.77rem; // 10.19919 * 1.154
+  flex-shrink: 0;
+  padding-top: 16px; // 33.81 * 1.154
+  display: inline-block;
+  background-image: url('~@/assets/title1.svg');
+  background-size: auto 72%;
+  background-repeat: no-repeat;
+  background-position: top center;
+}
+.middleTitleFont {
+  text-align: center;
+  text-shadow: 0 3.47px 8.68px #010a14; // 3.008 * 1.154, 7.519 * 1.154
+  font-family: 'DingTalk JinBuTi';
+  font-size: 4.33rem; // 3.75 * 1.154
+  font-style: normal;
+  font-weight: 400;
+  line-height: 4.33rem; // 3.75 * 1.154
+  letter-spacing: 0.87rem; // 0.75 * 1.154
+
+  background: linear-gradient(180deg, #fff 0%, #96dbf2 66.32%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.cockpit {
+  width: 15.97rem; // 25.96338 * 0.615
+  height: 5.55rem; // 4.8125 * 1.154
+  flex-shrink: 0;
+  margin-left: 41.77rem; // 67.92 * 0.615
+  background-image: url('~@/assets/Group 2785.svg');
+}
+.cockpitFont {
+  text-align: center;
+  text-shadow: 0 3.47px 8.68px #010a14;
+  font-family: 'DingTalk JinBuTi';
+  font-size: 3.25rem; // 2.8125 * 1.154
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.87rem;
+
+  background: linear-gradient(180deg, #fff 0%, #dff7ff 66.32%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.branchPlantProCap {
+  width: 15.97rem;
+  height: 5.55rem;
+  flex-shrink: 0;
+  margin-left: 57.84rem; // 94.04 * 0.615
+  background-image: url('~@/assets/Group 2789.png');
+}
+.branchPlantProCapFont {
+  text-align: center;
+  text-shadow: 0 3.47px 8.68px #010a14;
+  font-family: 'DingTalk JinBuTi';
+  font-size: 3.25rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.87rem;
+
+  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.productionEfficiency {
+  width: 16.03rem; // 26.0625 * 0.615
+  height: 5.55rem;
+  flex-shrink: 0;
+  margin-left: 182.04rem; // 296 * 0.615
+  background-image: url('~@/assets/Group 2790.svg');
+}
+.productionEfficiencyFont {
+  text-align: center;
+  text-shadow: 0 3.47px 8.68px #010a14;
+  font-family: 'DingTalk JinBuTi';
+  font-size: 3.25rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.87rem;
+
+  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.safetyManagement {
+  width: 16.03rem;
+  height: 5.55rem;
+  flex-shrink: 0;
+  margin-left: 198.03rem; // 322 * 0.615
+  background-image: url('~@/assets/Group 2791.svg');
+}
+.safetyManagementFont {
+  text-align: center;
+  text-shadow: 0 3.47px 8.68px #010a14;
+  font-family: 'DingTalk JinBuTi';
+  font-size: 3.25rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.87rem;
+
+  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.operatingStatus1 {
+  position: absolute;
+  z-index: -1;
+  width: 100%; // 2236 * 0.615
+  height: 100%; // 1217 * 1.154
+  top: 0;
+  left: 0;
+}
+.operatingStatusFont {
+  color: #fff;
+  font-family: 'DingTalk JinBuTi';
+  font-size: 2.16rem; // 1.8745 * 1.154
+  font-style: normal;
+  font-weight: 400;
+  line-height: 180%;
+  letter-spacing: 0.43rem; // 0.37488 * 1.154
+  height: 4.04rem; // 3.5 * 1.154
+  flex-shrink: 0;
+  background-image: url('~@/assets/Group 1142814701.svg');
+}
+.operatingStatusBox {
+  display: flex;
+  justify-content: space-between;
+  margin: 0px 100px; // 215 * 0.615
+}
+.operatingStatus {
+  width: 900px; // 941 * 0.615
+}
+.operatingStatusContent {
+  display: flex;
+  flex-direction: column;
+  height: 1500px; // 1300 * 1.154
+  justify-content: space-around;
+  .contentBox {
+    width: 900px; // 936 * 0.615
+    height: 410px; // 343 * 1.154
+    flex-shrink: 0;
+    .contentBoxFont {
+      overflow: hidden;
+      position: relative;
+      span {
+        position: absolute;
+        z-index: 99;
+        right: 0; // 335 * 0.615
+        top: 10px; // 9 * 1.154
+        font-family: 'DingTalk JinBuTi';
+        font-style: italic;
+        font-weight: 400;
+        font-size: 17px; // 15 * 1.154
+        line-height: 150%;
+        text-align: center;
+        letter-spacing: 0.2em;
+        color: #60f2ff;
+        &.half {
+          right: 0;
+        }
+      }
+    }
+    .contentBoxCont {
+      background: linear-gradient(126.97deg, rgba(6, 11, 40, 0.74) 28.26%, rgba(10, 14, 35, 0.71) 91.2%);
+      border: 0.94px solid #3675c9;
+      height: 344px; // 298 * 1.154
+    }
+  }
+  .contentBox1{
+    display: flex;
+    justify-content: space-between;
+    > div {
+      width: 49%;
+    }
+  }
+}
+</style>