Wulaer/src/views/EngineeringSafetyView.vue

<template>
  <div class="safety-container">
    <div class="tab-bar">
      <div class="tab-item" :class="{ active: currentTab === 'dam' }" @click="currentTab = 'dam'">大坝整体</div>
      <div class="tab-item" :class="{ active: currentTab === 'spillway' }" @click="currentTab = 'spillway'">泄洪设施</div>
      <div class="tab-item" :class="{ active: currentTab === 'conveyance' }" @click="currentTab = 'conveyance'">输水设施</div>
      <div class="tab-item" :class="{ active: currentTab === 'bank' }" @click="currentTab = 'bank'">库岸稳定</div>
    </div>
    <div class="safety-scroll-area">
      <div v-if="currentTab === 'dam'" class="tab-content">
        <div class="left-sidebar">
          <div class="data-card">
            <div class="card-header">
              <h3 class="card-title">大坝变形监测</h3>
              <div class="header-actions"><span class="update-time">单位：mm</span></div>
            </div>
            <div class="card-body chart-body">
              <div class="monitor-chart-box">
                <div class="monitor-chart-label">变形趋势</div>
                <canvas id="deformationChart" width="320" height="170"></canvas>
                <div class="chart-legend">
                  <span class="legend-dot dot-horizontal"></span>水平位移
                  <span class="legend-dot dot-vertical" style="margin-left:12px;"></span>垂直位移
                </div>
              </div>
              <div class="water-stats-row" style="margin-top:4px;">
                <div class="water-stat-card">
                  <div class="water-stat-label">最大水平位移</div>
                  <div class="water-stat-value">12.5</div>
                </div>
                <div class="water-stat-card">
                  <div class="water-stat-label">最大垂直位移</div>
                  <div class="water-stat-value">8.3</div>
                </div>
              </div>
            </div>
          </div>
          <div class="data-card mt-10">
            <div class="card-header">
              <h3 class="card-title">渗流监测</h3>
              <div class="header-actions"><span class="update-time">单位：L/s</span></div>
            </div>
            <div class="card-body chart-body">
              <div class="water-stats-row">
                <div class="water-stat-card">
                  <div class="water-stat-label">渗流量</div>
                  <div class="water-stat-value">3.5</div>
                </div>
                <div class="water-stat-card">
                  <div class="water-stat-label">坝基扬压力</div>
                  <div class="water-stat-value">18.2</div>
                </div>
              </div>
              <div class="monitor-chart-box" style="margin-top:4px;">
                <div class="monitor-chart-label">渗流趋势</div>
                <canvas id="seepageChart" width="320" height="170"></canvas>
                <div class="chart-legend">
                  <span class="legend-dot dot-seepage"></span>渗流量
                  <span class="legend-dot dot-pressure" style="margin-left:12px;"></span>渗流压力(kPa)
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-sidebar">
          <div class="data-card">
            <div class="card-header">
              <h3 class="card-title">安全状态评估</h3>
            </div>
            <div class="card-body chart-body">
              <div class="safety-assessment-row">
                <div class="safety-pie-section">
                  <canvas id="statusPieChart" width="140" height="140"></canvas>
                  <div class="pie-legend">
                    <div class="pie-legend-item" v-for="item in pieData" :key="item.name">
                      <span class="pie-dot" :style="{ background: item.color }"></span>
                      <span class="pie-name">{{ item.name }}</span>
                      <span class="pie-count">{{ item.count }}个</span>
                    </div>
                  </div>
                </div>
                <div class="safety-assessment-section">
                  <div class="safety-assessment-bar">
                    <div class="safety-assessment-grade">一类坝</div>
                    <div class="safety-assessment-texts">
                      <div class="safety-assessment-text">评估时间：2026-05-15</div>
                      <div class="safety-assessment-text">运行正常，安全可靠</div>
                    </div>
                  </div>
                  <div class="safety-assessment-tags">
                    <div class="assess-tag good" v-for="item in assessmentIndicators" :key="item">{{ item }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="data-card mt-10">
            <div class="card-header">
              <h3 class="card-title">监测点状态</h3>
              <div class="header-actions"><span class="update-time">共 {{ monitorList.length }} 个测点</span></div>
            </div>
            <div class="card-body card-body-tight">
              <div class="monitor-table">
                <div class="monitor-table-header">
                  <span class="col-name">测点名称</span>
                  <span class="col-value">当前值</span>
                  <span class="col-status">状态</span>
                  <span class="col-trend">趋势</span>
                </div>
                <div class="monitor-table-body">
                  <div class="monitor-row" v-for="item in monitorList" :key="item.name">
                    <span class="col-name">{{ item.name }}</span>
                    <span class="col-value">{{ item.value }}{{ item.unit }}</span>
                    <span class="col-status"><span class="status-tag" :class="item.status">{{ item.statusText }}</span></span>
                    <span class="col-trend"><span class="trend-icon" :class="item.trend">{{ item.trend === 'up' ? '↑' : item.trend === 'down' ? '↓' : '→' }}</span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="currentTab === 'spillway'" class="tab-content tab-placeholder"><div class="placeholder-text">泄洪设施监测数据</div></div>
      <div v-if="currentTab === 'conveyance'" class="tab-content tab-placeholder"><div class="placeholder-text">输水设施监测数据</div></div>
      <div v-if="currentTab === 'bank'" class="tab-content tab-placeholder"><div class="placeholder-text">库岸稳定监测数据</div></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "EngineeringSafetyView",
  data() {
    return {
      currentTab: "dam",
      monitorList: [
        { name: "坝顶水平位移-01", value: "12.5", unit: "mm", status: "normal", statusText: "正常", trend: "up" },
        { name: "坝顶水平位移-02", value: "11.8", unit: "mm", status: "normal", statusText: "正常", trend: "steady" },
        { name: "坝基垂直位移-01", value: "8.3", unit: "mm", status: "normal", statusText: "正常", trend: "down" },
        { name: "坝基垂直位移-02", value: "7.9", unit: "mm", status: "normal", statusText: "正常", trend: "steady" },
        { name: "渗流压力-P01", value: "25.6", unit: "kPa", status: "normal", statusText: "正常", trend: "up" },
        { name: "渗流压力-P02", value: "22.1", unit: "kPa", status: "normal", statusText: "正常", trend: "steady" },
        { name: "绕坝渗流-S01", value: "1.2", unit: "L/s", status: "normal", statusText: "正常", trend: "steady" },
        { name: "裂缝开合度-C01", value: "1.2", unit: "mm", status: "warning", statusText: "注意", trend: "up" },
        { name: "钢筋应力-R01", value: "45.2", unit: "MPa", status: "normal", statusText: "正常", trend: "steady" },
        { name: "库岸变形-B01", value: "3.2", unit: "mm", status: "normal", statusText: "正常", trend: "down" },
      ],
      pieData: [
        { name: "正常", count: 8, color: "#22c55e" },
        { name: "注意", count: 2, color: "#ffd93d" },
        { name: "警戒", count: 0, color: "#f97316" },
        { name: "危险", count: 0, color: "#ef4444" },
      ],
      assessmentIndicators: ["变形指标 合格", "渗流指标 合格", "结构指标 合格", "环境指标 合格"],
      deformationChart: null,
      seepageChart: null,
      statusPieChart: null,
    };
  },
  mounted() { this.$nextTick(() => this.initCharts()); },
  beforeUnmount() {
    if (this.deformationChart) this.deformationChart.dispose();
    if (this.seepageChart) this.seepageChart.dispose();
    if (this.statusPieChart) this.statusPieChart.dispose();
  },
  methods: {
    initCharts() {
      if (!echarts) return;
      const dc = document.getElementById("deformationChart");
      if (dc) {
        if (this.deformationChart) this.deformationChart.dispose();
        this.deformationChart = echarts.init(dc);
        this.deformationChart.setOption({ animation: false, tooltip: { trigger: "axis" }, grid: { left: "8%", right: "5%", top: "8%", bottom: "12%" }, xAxis: { type: "category", data: ["1月","2月","3月","4月","5月","6月"], axisLine: { lineStyle: { color: "#7bbef6" } }, axisLabel: { color: "#7bbef6", fontSize: 9 } }, yAxis: { type: "value", name: "mm", nameTextStyle: { color: "#7bbef6", fontSize: 9 }, axisLine: { lineStyle: { color: "#7bbef6" } }, axisLabel: { color: "#7bbef6", fontSize: 9 }, splitLine: { lineStyle: { color: "rgba(123,190,246,0.15)" } } }, series: [{ name: "水平位移", type: "line", data: [8.2,9.5,10.8,11.2,12.0,12.5], smooth: true, symbol: "circle", symbolSize: 4, lineStyle: { color: "#62f6fb", width: 2 }, itemStyle: { color: "#62f6fb" }, areaStyle: { color: "rgba(98,246,251,0.1)" } }, { name: "垂直位移", type: "line", data: [5.1,6.2,7.0,7.5,8.0,8.3], smooth: true, symbol: "diamond", symbolSize: 4, lineStyle: { color: "#fbbf24", width: 2 }, itemStyle: { color: "#fbbf24" }, areaStyle: { color: "rgba(251,191,36,0.08)" } }] });
      }
      const sc = document.getElementById("seepageChart");
      if (sc) {
        if (this.seepageChart) this.seepageChart.dispose();
        this.seepageChart = echarts.init(sc);
        this.seepageChart.setOption({ animation: false, tooltip: { trigger: "axis" }, legend: { data: ["渗流量","渗流压力"], textStyle: { color: "#7bbef6", fontSize: 9 }, bottom: 0, itemWidth: 10, itemHeight: 8 }, grid: { left: "8%", right: "5%", top: "8%", bottom: "22%" }, xAxis: { type: "category", data: ["1月","2月","3月","4月","5月","6月"], axisLine: { lineStyle: { color: "#7bbef6" } }, axisLabel: { color: "#7bbef6", fontSize: 9 } }, yAxis: { type: "value", nameTextStyle: { color: "#7bbef6", fontSize: 9 }, axisLine: { lineStyle: { color: "#7bbef6" } }, axisLabel: { color: "#7bbef6", fontSize: 9 }, splitLine: { lineStyle: { color: "rgba(123,190,246,0.15)" } } }, series: [{ name: "渗流量", type: "line", data: [4.2,3.8,3.6,3.5,3.5,3.5], smooth: true, symbol: "circle", symbolSize: 4, lineStyle: { color: "#62f6fb", width: 2 }, itemStyle: { color: "#62f6fb" }, areaStyle: { color: "rgba(98,246,251,0.12)" } }, { name: "渗流压力", type: "line", data: [28.5,26.8,25.2,24.8,25.0,25.6], smooth: true, symbol: "diamond", symbolSize: 4, lineStyle: { color: "#a78bfa", width: 2 }, itemStyle: { color: "#a78bfa" }, areaStyle: { color: "rgba(167,139,250,0.08)" } }] });
      }
      const pc = document.getElementById("statusPieChart");
      if (pc) {
        if (this.statusPieChart) this.statusPieChart.dispose();
        this.statusPieChart = echarts.init(pc);
        this.statusPieChart.setOption({ animation: false, tooltip: { trigger: "item", formatter: "{b}: {c}个 ({d}%)" }, series: [{ type: "pie", radius: ["45%","75%"], center: ["50%","50%"], avoidLabelOverlap: false, itemStyle: { borderColor: "rgba(0,30,60,0.6)", borderWidth: 2 }, label: { show: false }, labelLine: { show: false }, data: [{ value: 8, name: "正常", itemStyle: { color: "#22c55e" } }, { value: 2, name: "注意", itemStyle: { color: "#ffd93d" } }, { value: 0, name: "警戒", itemStyle: { color: "#f97316" } }, { value: 0, name: "危险", itemStyle: { color: "#ef4444" } }] }] });
      }
    },
  },
};
</script>
<style scoped>
.safety-container { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.tab-bar { position: absolute; left: 20px; top: 80px; z-index: 10; display: flex; gap: 4px; }
.tab-item { padding: 6px 24px; font-size: 14px; font-weight: bold; color: #7bbef6; background: rgba(0,20,40,0.6); border: 1px solid rgba(0,212,255,0.25); border-radius: 3px 3px 0 0; cursor: pointer; transition: all 0.2s; user-select: none; }
.tab-item:hover { background: rgba(0,40,80,0.7); color: #62f6fb; }
.tab-item.active { background: rgba(0,20,40,0.85); color: #e0fcff; border-color: rgba(0,212,255,0.5); border-bottom-color: transparent; text-shadow: 0 0 5px rgba(0,212,255,0.3); }
.safety-scroll-area { position: absolute; left: 0; right: 0; top: 110px; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 5; padding-bottom: 40px; }
.safety-scroll-area::-webkit-scrollbar { width: 4px; }
.safety-scroll-area::-webkit-scrollbar-track { background: rgba(0,20,40,0.5); }
.safety-scroll-area::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.3); border-radius: 2px; }
.tab-content { width: 100%; display: flex; justify-content: space-between; padding: 0 20px; box-sizing: border-box; }
.left-sidebar { width: 350px; flex-shrink: 0; }
.right-sidebar { width: 350px; flex-shrink: 0; }
.tab-placeholder { justify-content: center; align-items: center; min-height: 300px; }
.placeholder-text { color: #7bbef6; font-size: 18px; opacity: 0.6; padding: 80px 0; }
.mt-10 { margin-top: 10px; }
.data-card { width: 100%; background: rgba(0,20,40,0.7); border-radius: 4px; overflow: hidden; box-shadow: 0 0 10px rgba(0,212,255,0.2); }
.card-header { height: 42px; background-image: url("/src/assets/images/数据小标题.png"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 16px 0; }
.card-title { font-size: var(--fs-card-title); font-weight: bold; color: #e0fcff; margin: 0; text-shadow: 0 0 5px rgba(0,212,255,0.5); padding-left: 20px; }
.header-actions { display: flex; align-items: flex-start; gap: 10px; }
.update-time { color: #7bbef6; font-size: 11px; font-family: monospace; }
.card-body { padding: 8px; min-height: auto; font-size: 13px; line-height: 1.5; margin-top: -6px; }
.card-body.chart-body { padding: 6px 8px 8px; }
.card-body.card-body-tight { padding: 6px 8px; }
.monitor-chart-box { background: rgba(0,20,40,0.4); border-radius: 4px; border: 1px solid rgba(0,212,255,0.15); padding: 6px; }
.monitor-chart-label { color: #62f6fb; font-size: var(--fs-label); font-weight: bold; margin-bottom: 2px; }
.chart-legend { text-align: center; margin-top: 3px; color: #7bbef6; font-size: 10px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.dot-horizontal { background: #62f6fb; } .dot-vertical { background: #fbbf24; } .dot-seepage { background: #62f6fb; } .dot-pressure { background: #a78bfa; }
.water-stats-row { display: flex; gap: 6px; }
.water-stat-card { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 3px 10px; background-image: url("/src/assets/images/卡片背景2.png"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; height: 42px; }
.water-stat-label { color: #62f6fb; font-size: var(--fs-label); margin-bottom: 0; text-align: left; line-height: 1.2; white-space: nowrap; }
.water-stat-value { color: #ffffff; font-size: var(--fs-value-xl); font-weight: bold; text-shadow: 0 0 6px rgba(0,212,255,0.5); line-height: 1.2; }
.safety-assessment-row { display: flex; gap: 8px; align-items: stretch; }
.safety-pie-section { flex-shrink: 0; width: 45%; text-align: center; }
.pie-legend { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 3px; }
.pie-legend-item { display: flex; align-items: center; gap: 3px; flex: 1 1 45%; min-width: 70px; }
.pie-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pie-name { color: #7bbef6; font-size: 10px; }
.pie-count { color: #e0fcff; font-size: 11px; font-weight: bold; margin-left: auto; }
.safety-assessment-section { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.safety-assessment-bar { background: rgba(0,20,40,0.5); border-radius: 4px; border: 1px solid rgba(0,212,255,0.15); padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.safety-assessment-grade { font-size: 20px; font-weight: bold; padding: 2px 16px; border-radius: 4px; background: rgba(34,197,94,0.25); color: #22c55e; border: 1px solid rgba(34,197,94,0.5); text-align: center; }
.safety-assessment-texts { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.safety-assessment-text { color: #7bbef6; font-size: 11px; }
.safety-assessment-tags { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.assess-tag { font-size: 10px; font-weight: bold; padding: 2px 8px; border-radius: 2px; }
.assess-tag.good { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
.monitor-table { width: 100%; font-size: 11px; }
.monitor-table-header { display: flex; padding: 4px 6px; background: rgba(0,212,255,0.1); border-bottom: 1px solid rgba(0,212,255,0.2); color: #7bbef6; font-weight: bold; }
.monitor-table-body { max-height: 260px; overflow-y: auto; }
.monitor-table-body::-webkit-scrollbar { width: 3px; }
.monitor-table-body::-webkit-scrollbar-track { background: rgba(0,20,40,0.5); }
.monitor-table-body::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.3); border-radius: 2px; }
.monitor-row { display: flex; padding: 4px 6px; border-bottom: 1px solid rgba(0,212,255,0.08); align-items: flex-start; color: #e0fcff; }
.monitor-row:last-child { border-bottom: none; }
.monitor-row:hover { background: rgba(0,212,255,0.05); }
.col-name { flex: 2.5; } .col-value { flex: 1.5; text-align: center; } .col-status { flex: 1.2; text-align: center; } .col-trend { flex: 0.8; text-align: center; }
.status-tag { font-size: var(--fs-status); font-weight: bold; padding: 1px 6px; border-radius: 2px; display: inline-block; }
.status-tag.normal { background: rgba(34,197,94,0.2); color: #22c55e; }
.status-tag.warning { background: rgba(255,217,61,0.2); color: #ffd93d; }
.status-tag.danger { background: rgba(239,68,68,0.2); color: #ff6b6b; }
.trend-icon { font-size: 12px; font-weight: bold; }
.trend-icon.up { color: #f97316; } .trend-icon.down { color: #22c55e; } .trend-icon.steady { color: #7bbef6; }
canvas { display: block; margin: 0 auto; }
</style>