常规消缺

src/App.vue

@@ -50,7 +50,13 @@
           text-color="#fff"
           background-color="#132444"
           active-text-color="#fff"
-          :style="`height:100%;${
+          :style="`height:${
+            $route.path === '/economicsOperation'
+              ? 'calc(100% - 82px - 80px)'
+              : '100%'
+          };margin-top:${
+            $route.path === '/economicsOperation' ? '40px' : '0'
+          };${
             showMenuData?.[0]?.width && !isCollapse
               ? `width: ${showMenuData?.[0]?.width}`
               : ''
@@ -74,7 +80,7 @@
                   <div v-html="menu.svg" class="svgSty"></div>
                 </div>
               </template>
-                <!-- :class="getSelectState(menuitem)" -->
+              <!-- :class="getSelectState(menuitem)" -->
               <el-menu-item-group
                 v-for="(menuitem, index) in menu.children"
                 :key="index"
@@ -112,6 +118,23 @@
       </div>
       <!-- <alarmBadge /> -->
     </div>
+
+    <div class="curTabsBox" v-if="$route.path === '/economicsOperation'">
+      <div
+        class="item"
+        :class="activeTab === 'yxzb' ? 'active' : ''"
+        @click="openWeb"
+      >
+        运行指标
+      </div>
+      <div
+        class="item"
+        :class="activeTab === 'jjfx' ? 'active' : ''"
+        @click="jumpUrl"
+      >
+        经济分析
+      </div>
+    </div>
     <!-- <div v-else class="login"><login-page @onLogin="login" /></div> -->
   </div>
 </template>
@@ -146,6 +169,7 @@ export default {
 
   data() {
     return {
+      activeTab: "jjfx",
       routepath: "",
       showMenuData: [],
       isCollapse: false,
@@ -546,6 +570,7 @@ export default {
       ],
     };
   },
+
   computed: {
     isLogined() {
       return this.$store.state.user?.loginState;
@@ -628,14 +653,24 @@ export default {
     console.log("离开标记", this.socketLeaveFlag);
   },
   methods: {
+    openWeb() {
+      this.activeTab = "yxzb";
+      window.location.href = `${process.env.VUE_APP_URL}/index.html/#/runtime/b0d3f1f4-3e5d-429b-af81-2661e7099caa/862c8272-8cf8-435c-b3fc-b28936b4bfe0?instanceId=82546b6b-59a3-7a1b-fbd4-b2d4516cf991`;
+    },
+
+    jumpUrl() {
+      this.activeTab = "jjfx";
+      this.$router.push({ path: "/economicsOperation" });
+    },
+
     getSelectState(idx) {
-    //   routepath === $route.path ? 'isSelect' : ''
+      //   routepath === $route.path ? 'isSelect' : ''
       const href = window.location.href;
       const path = this.$route.path;
 
       const reg = new RegExp(path);
 
-    //   return idx !== "/" && reg.test(path) ? "isSelect" : "";
+      //   return idx !== "/" && reg.test(path) ? "isSelect" : "";
       return idx !== "/" && path.indexOf(idx) !== -1 ? "isSelect" : "";
     },
     initMenu() {
@@ -1054,6 +1089,31 @@ export default {
 
 <style lang="less">
 @import "~@/assets/styles/main.less";
+
+.curTabsBox {
+  position: absolute;
+  left: 0;
+  top: 82px;
+  background: #030713;
+  z-index: 2003;
+  width: 220px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .item {
+    font-size: 16px;
+    margin: 0 16px;
+    line-height: 34px;
+    color: #97a8ca;
+    cursor: pointer;
+
+    &.active {
+      color: #f8f8ff;
+      border-bottom: 2px solid #40a7ee;
+    }
+  }
+}
 #screen {
   z-index: 100;
   transform-origin: 0 0;
@@ -1326,10 +1386,10 @@ body {
             //   }
             // }
           }
-          .isSelect{
+          .isSelect {
             background: #1c69bb;
-            .grounpItemSpan{
-                color: #a5b7df;
+            .grounpItemSpan {
+              color: #a5b7df;
             }
           }
         }

src/views/economicsOperation/nxfHomePage/index.vue

@@ -1,11 +1,7 @@
 <template>
-  <div style="width: 100%; height: 100%; padding: 10px;background: #030713;">
-    <el-tabs
-      v-model="tabActiveName"
-      class="jjyxTabs"
-      v-if="$route.path === '/economicsOperation'"
-    >
-        <el-tab-pane label="运行指标" name="yxzb">
+  <div style="width: 100%; height: 100%; padding: 10px; background: #030713">
+    <el-tabs v-model="tabActiveName" class="jjyxTabs" v-if="false">
+      <el-tab-pane label="运行指标" name="yxzb">
         <iframe
           :src="
             iframeUrl +
@@ -154,8 +150,134 @@
           </div>
         </div>
       </el-tab-pane>
-      
     </el-tabs>
+
+    <div class="operationHome" v-if="$route.path === '/economicsOperation'">
+      <!-- <tab @select="selectionItemClick" /> -->
+      <div class="homeMain">
+        <div class="homeLeaf">
+          <Row type="flex" class="plan" style="height: 21%">
+            <Col :span="24">
+              <com-panel
+                title="发电量"
+                sub-title="单位:万kWh"
+                bodyPadd="50px"
+                style="position: relative; height: 100%"
+              >
+                <div v-for="it in ForecastPower" :key="it" class="powerName">
+                  <span :style="{ top: it.top }">{{ it.name }}</span>
+                  <span :style="{ top: it.top1 }">{{ it.value }}</span>
+                  <span :style="{ top: it.top2 }">{{ it.bfb }}%</span>
+                  <span :style="{ top: it.top3 }"
+                    >理论发电量 {{ it.total }}</span
+                  >
+                </div>
+                <list-bar-chart-2 :list="ForecastPower" height="15vh" />
+              </com-panel>
+            </Col>
+          </Row>
+          <Row type="flex" class="plan" style="height: 79%">
+            <Col :span="24">
+              <com-panel
+                title="主要经济指标同期对比"
+                sub-title="单位:万kWh"
+                style="position: relative; height: 100%"
+              >
+                <operationTable :data="zbtqdb" height="100%"></operationTable>
+              </com-panel>
+            </Col>
+          </Row>
+        </div>
+        <div class="homeCenter">
+          <Row type="flex" style="height: 23%">
+            <Col :span="24" style="background: #142446 !important">
+              <com-panel
+                title="发电量完成率"
+                sub-title="单位:万kWh"
+                style="position: relative; height: 100%"
+              >
+                <power-plan :data="planData" :title="planBtnName" />
+              </com-panel>
+            </Col>
+          </Row>
+          <Row type="flex" style="height: 25%">
+            <Col :span="24">
+              <com-panel title="限电" style="position: relative; height: 100%">
+                <multiple-y-line-chart-normal
+                  height="100%"
+                  :list="Powertrend"
+                  :yAxises="PowertrendYAxises"
+                  :showLegend="true"
+                  :hoverType="'axis'"
+                />
+              </com-panel>
+            </Col>
+          </Row>
+          <Row type="flex" style="height: 25%">
+            <Col :span="24">
+              <com-panel
+                title="损失电量"
+                style="position: relative; height: 100%"
+              >
+                <multiple-y-line-chart-normal
+                  height="100%"
+                  :list="Powerloss"
+                  :yAxises="PowerlossYAxises"
+                  :showLegend="true"
+                  :hoverType="'axis'"
+                />
+              </com-panel>
+            </Col>
+          </Row>
+          <Row type="flex" style="height: 26%">
+            <Col :span="24">
+              <com-panel
+                title="发电量"
+                style="position: relative; height: 100%"
+              >
+                <!-- <marker-line-chart :height="'100%'" :list="Powersend" myUnit='MW' :showLegend="true" /> -->
+                <multiple-bar-chart
+                  :list="Powersend"
+                  :units="['电量(万kwh)']"
+                  height="100%"
+                  :showLegend="true"
+                />
+              </com-panel>
+            </Col>
+          </Row>
+        </div>
+        <div class="homeRight">
+          <div class="tabs">
+            <div
+              class="tab-item"
+              v-for="(item, index) of tabData"
+              :key="item"
+              :class="{ active: activeIndex == index }"
+              @click="selectTab(index, item)"
+            >
+              {{ item.text }}
+            </div>
+          </div>
+          <Row
+            type="flex"
+            class="rightplan"
+            v-for="it in rightTableData"
+            :key="it.name"
+            style="height: 50%"
+          >
+            <Col :span="24">
+              <com-panel
+                :title="it.name + tabData[activeIndex].text + '排名'"
+                style="position: relative; height: 100%"
+              >
+                <operationTable :data="it.data" height="100%"></operationTable>
+              </com-panel>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    </div>
+
     <router-view v-else />
   </div>
 </template>
@@ -404,7 +526,8 @@ export default {
 }
 .operationHome {
   width: 100%;
-  height: 100%;
+  height: calc(100% - 36px);
+  margin-top: 36px;
 
   .homeMain {
     width: 100%;