fix: 添加水库总览

src/api/reservoir/index.ts

@@ -242,3 +242,14 @@ export const getVideoDataList = (data: any) => {
   });
 };
 
+export const getResStatisticsViewData = (data: any) => {
+  return request({
+    url: `/run/sk/statistics/view`,
+    method: 'post',
+    data,
+    headers: {
+      shuili: 'water ' + shuili
+    }
+  });
+};
+

src/views/Main/Reservoir/components/Overview.vue

@@ -0,0 +1,467 @@
+<script setup>
+import { reactive, onMounted } from "vue";
+
+import { getResStatisticsViewData } from "@/api/reservoir";
+
+const props = defineProps({
+  resCode: {
+    type: String,
+    default: "",
+  },
+});
+
+const pageData = reactive({
+  currentWaterLevel: "0", // 当前水位
+  lastYearToday: "0", //
+  incomingFlow: "0", //
+  outboundFlow: "0", //
+  nearlyAnHour: "0", //
+  nearlySixHours: "0", //
+  nearlyNineHours: "0", //
+  nearlyTwelveHours: "0", //
+  designLevel: "0", // 设计水位
+  checkWaterLevel: "0", // 校核水位
+  elevationWeirCrest: "0", // 堰顶高程
+  crestElevation: "0", // 坝顶高程
+  stationName: "",
+  stationCode: "",
+});
+
+const initData = () => {
+  getResStatisticsViewData({
+    resCode: props.resCode,
+    // resCode: "440184000075",
+  }).then((res) => {
+    if (res) {
+      pageData.currentWaterLevel = res.currentWaterLevel;
+      pageData.lastYearToday = res.lastYearToday;
+      pageData.incomingFlow = res.incomingFlow;
+      pageData.outboundFlow = res.outboundFlow;
+      pageData.nearlyAnHour = res.nearlyAnHour;
+      pageData.nearlySixHours = res.nearlySixHours;
+      pageData.nearlyNineHours = res.nearlyNineHours;
+      pageData.nearlyTwelveHours = res.nearlyTwelveHours;
+      pageData.designLevel = res.designLevel;
+      pageData.checkWaterLevel = res.checkWaterLevel;
+      pageData.elevationWeirCrest = res.elevationWeirCrest;
+      pageData.crestElevation = res.crestElevation;
+      pageData.stationName = res.stationName;
+      pageData.stationCode = res.stationCode;
+    }
+  });
+};
+
+onMounted(() => {
+  initData();
+});
+</script>
+<template>
+  <div class="overview-page">
+    <div class="flex-box">
+      <div class="part-content">
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 12px;
+          "
+        >
+          <div class="title" style="margin-bottom: 0px">水情信息</div>
+          <div class="station">
+            {{ pageData.stationName }} ({{ pageData.stationCode }})
+          </div>
+        </div>
+        <div class="attr-list">
+          <div
+            class="attr-box"
+            :class="{
+              'attr-box-warn':
+                Number(pageData.currentWaterLevel) >
+                Number(pageData.designLevel),
+            }"
+          >
+            <img
+              v-if="
+                Number(pageData.currentWaterLevel) >
+                Number(pageData.designLevel)
+              "
+              class="icon"
+              src="../../../../assets/img/res/water_current_warn.png"
+              alt=""
+            />
+            <img
+              v-else
+              class="icon"
+              src="../../../../assets/img/res/water_current.png"
+              alt=""
+            />
+
+            <div class="">
+              <div class="attr-text">当前水位(m)</div>
+              <div class="attr-value">{{ pageData.currentWaterLevel }}</div>
+            </div>
+          </div>
+          <div class="attr-box">
+            <img
+              class="icon"
+              src="../../../../assets/img/res/water_last_year_current.png"
+              alt=""
+            />
+            <div class="">
+              <div class="attr-text">去年今日(m)</div>
+              <div class="attr-value">{{ pageData.lastYearToday }}</div>
+            </div>
+          </div>
+          <div class="attr-box">
+            <img
+              class="icon"
+              src="../../../../assets/img/res/water_inflow.png"
+              alt=""
+            />
+            <div class="">
+              <div class="attr-text">入库流量(L/s)</div>
+              <div class="attr-value">{{ pageData.incomingFlow }}</div>
+            </div>
+          </div>
+          <div class="attr-box">
+            <img
+              class="icon"
+              src="../../../../assets/img/res/water_outflow.png"
+              alt=""
+            />
+            <div class="">
+              <div class="attr-text">出库流量(L/s)</div>
+              <div class="attr-value">{{ pageData.outboundFlow }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="part-content ml-64px">
+        <div class="title">水情信息</div>
+        <div class="attr-list">
+          <div class="attr-box">
+            <img
+              class="icon"
+              src="../../../../assets/img/res/rain_1_hour.png"
+              alt=""
+            />
+            <div class="">
+              <div class="attr-text">近1小时(mm)</div>
+              <div class="attr-value">{{ pageData.nearlyAnHour }}</div>
+            </div>
+          </div>
+          <div class="attr-box">
+            <img
+              class="icon"
+              src="../../../../assets/img/res/rain_6_hour.png"
+              alt=""
+            />
+            <div class="">
+              <div class="attr-text">近6小时(mm)</div>
+              <div class="attr-value">{{ pageData.nearlySixHours }}</div>
+            </div>
+          </div>
+          <div class="attr-box">
+            <img
+              class="icon"
+              src="../../../../assets/img/res/rain_9_hour.png"
+              alt=""
+            />
+            <div class="">
+              <div class="attr-text">近9小时(mm)</div>
+              <div class="attr-value">{{ pageData.nearlyNineHours }}</div>
+            </div>
+          </div>
+          <div class="attr-box">
+            <img
+              class="icon"
+              src="../../../../assets/img/res/rain_12_hour.png"
+              alt=""
+            />
+            <div class="">
+              <div class="attr-text">近12小时(mm)</div>
+              <div class="attr-value">{{ pageData.nearlyTwelveHours }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <div class="title">场景可视化</div>
+      <div class="res-box">
+        <div class="dike-max-height">
+          坝顶高程：{{ pageData.crestElevation }}m
+        </div>
+        <div class="marker-line"></div>
+        <div
+          class="marker-water"
+          :style="{
+            height:
+              Number(pageData.crestElevation) > 0
+                ? 280 *
+                    (Number(pageData.currentWaterLevel) /
+                      Number(pageData.crestElevation)) +
+                  20 +
+                  'px'
+                : '20px',
+          }"
+        >
+          <div class="current-water-level">
+            <img
+              class="arrow"
+              src="../../../../assets/img/res/marker_arrow.png"
+              alt=""
+            />
+            <span>当前水位{{ pageData.currentWaterLevel }}m</span>
+          </div>
+        </div>
+        <div
+          class="weir-max-height"
+          :style="{
+            bottom:
+              Number(pageData.crestElevation) > 0
+                ? 280 *
+                    (Number(pageData.elevationWeirCrest) /
+                      Number(pageData.crestElevation)) +
+                  20 +
+                  'px'
+                : '20px',
+          }"
+        >
+          <img
+            class="arrow"
+            src="../../../../assets/img/res/marker_arrow.png"
+            alt=""
+          />
+          <span>堰顶高程{{ pageData.elevationWeirCrest }}m</span>
+        </div>
+        <div
+          class="design-water-level"
+          :style="{
+            bottom:
+              Number(pageData.crestElevation) > 0
+                ? 280 *
+                    (Number(pageData.designLevel) /
+                      Number(pageData.crestElevation)) +
+                  20 +
+                  'px'
+                : '20px',
+          }"
+        >
+          <img
+            class="arrow"
+            src="../../../../assets/img/res/marker_arrow.png"
+            alt=""
+          />
+          <span>设计水位{{ pageData.designLevel }}m</span>
+        </div>
+        <div
+          class="check-water-level"
+          :style="{
+            bottom:
+              Number(pageData.crestElevation) > 0
+                ? 280 *
+                    (Number(pageData.checkWaterLevel) /
+                      Number(pageData.crestElevation)) +
+                  20 +
+                  'px'
+                : '20px',
+          }"
+        >
+          <img
+            class="arrow"
+            src="../../../../assets/img/res/marker_arrow.png"
+            alt=""
+          />
+          <span>校核水位{{ pageData.checkWaterLevel }}m</span>
+        </div>
+
+        <!-- 坝背景图 -->
+        <img
+          class="dike-border"
+          src="../../../../assets/img/dike_border.png"
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.overview-page {
+  padding: 12px;
+  .part-content {
+    .attr-list {
+      width: 472px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .station {
+      border-radius: 100px;
+      font-size: 12px;
+      color: #fff;
+      padding: 3px 12px;
+      background: rgba(54, 178, 158, 1);
+    }
+    .attr-box {
+      display: flex;
+      width: 230px;
+      border: 2px solid rgba(54, 178, 158, 0.6);
+      padding: 16px;
+      background: rgba(54, 178, 158, 0.1);
+      margin-bottom: 12px;
+      &:nth-child(2n) {
+        margin-left: 12px;
+      }
+      .icon {
+        width: 64px;
+        height: 64px;
+        margin-right: 16px;
+      }
+
+      .attr-text {
+        font-size: 16px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+      .attr-value {
+        font-size: 32px;
+        font-weight: 700;
+        color: rgba(54, 178, 158, 1);
+      }
+    }
+    .attr-box-warn {
+      border-color: rgba(250, 173, 16, 1);
+      background: rgba(250, 173, 16, 0.1);
+      .attr-value {
+        color: rgba(255, 154, 35, 1);
+      }
+    }
+  }
+
+  .title {
+    color: rgba(0, 0, 0, 0.9);
+    padding-left: 10px;
+    font-size: 14px;
+    font-weight: 500;
+    position: relative;
+    margin-bottom: 12px;
+    &::before {
+      content: " ";
+      width: 4px;
+      height: 4px;
+      background: #36b29e;
+      position: absolute;
+      left: 1px;
+      top: 50%;
+      margin-top: -2px;
+      transform: rotate(45deg);
+    }
+  }
+
+  .res-box {
+    position: relative;
+    width: 100%;
+    height: 378px;
+    color: rgba(0, 0, 0, 0.6);
+    background: #d9ecff;
+    overflow: hidden;
+    &::after {
+      content: " ";
+      background: linear-gradient(0deg, #5f2914 22%, #c2841a 100%);
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 3;
+      height: 20px;
+      width: 100%;
+    }
+
+    .marker-line {
+      z-index: 1;
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      height: 280px;
+      width: 16px;
+      background: url("../../../../assets/img/res/marker_line.png") no-repeat
+        center center;
+      background-size: contain;
+    }
+
+    .weir-max-height {
+      position: absolute;
+      z-index: 1;
+      width: 50%;
+      left: 0;
+      bottom: 200px;
+      text-align: center;
+      border-bottom: 1px dashed #3a89fe;
+    }
+    .design-water-level {
+      position: absolute;
+      z-index: 1;
+      width: 50%;
+      right: -2px;
+      bottom: 240px;
+      text-align: left;
+      border-bottom: 1px dashed #3a89fe;
+      padding-left: 30px;
+    }
+    .check-water-level {
+      position: absolute;
+      z-index: 1;
+      width: 50%;
+      right: -2px;
+      bottom: 260px;
+      text-align: center;
+      border-bottom: 1px dashed #3a89fe;
+    }
+
+    .marker-water {
+      width: 100%;
+      position: absolute;
+      z-index: 2;
+      bottom: 0;
+      height: 50px;
+      border-top: 2px solid #03d0df;
+      background: linear-gradient(
+        180deg,
+        rgba(0, 219, 227, 0.38) 0%,
+        rgba(0, 219, 227, 0) 100%
+      );
+
+      .current-water-level {
+        position: absolute;
+        left: 0;
+        top: -20px;
+        font-size: 14px;
+        z-index: 1;
+      }
+    }
+
+    .dike-max-height {
+      position: absolute;
+      right: 36px;
+      bottom: 300px;
+      z-index: 1;
+    }
+
+    .dike-border {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      z-index: 3;
+      height: 280px;
+    }
+  }
+
+  .flex-box {
+    display: flex;
+  }
+
+  .ml-64px {
+    margin-left: 64px;
+  }
+}
+</style>

src/views/Main/Reservoir/index.vue

@@ -17,7 +17,10 @@
     </div>
     <div class="content">
       <el-tabs class="main-tabs" :tab-position="'left'" v-model="activeTab">
-        <el-tab-pane label="基础信息" name="1" lazy>
+        <el-tab-pane label="水库总览" name="1" lazy>
+          <Overview :resCode="resCode"></Overview>
+        </el-tab-pane>
+        <el-tab-pane label="基础信息" name="1-1" lazy>
           <BaseInfo
             ref="baseInfoRef"
             :resCode="resCode"
@@ -58,6 +61,7 @@ import { ref, watch, onMounted } from "vue";
 import BaseInfo from "./components/BaseInfo.vue";
 import DataStatistics from "./components/DataStatistics.vue";
 import MonitorWarning from "./components/MonitorWarning.vue";
+import Overview from "./components/Overview.vue";
 
 import { Close } from "@element-plus/icons-vue";
 import RB from "@/assets/map/reservoir_big.png";
@@ -155,7 +159,7 @@ onMounted(() => {
   position: fixed;
   top: 50%;
   left: 50%;
-  width: 80%;
+  width: 1200px;
   min-height: 600px;
   max-height: 800px;
   transform: translate(-50%, -50%);

vite.config.ts

@@ -86,8 +86,8 @@ export default defineConfig(({ mode }) => {
           rewrite: (path) => path.replace(/^\/api\/iserver/, "/iserver"),
         },
         "/api/run": {
-          target: "http://shuili.product.dev.com:30115/",
+          // target: "http://shuili.product.dev.com:30115/",
-          // target: "http://172.16.34.80:18082",
+          target: "http://172.16.34.80:18082",
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, "/tianhui-admin-web"),
         },