2026.3.20

riku

2026-03-20 59af55dc3e72f8f2655ae06af9d1b6f766bac423

 src/views/monitor/DataDashboard.vue

@@ -57,48 +57,6 @@
        </div>
      </div>
      <div class="cards-container">
        <!-- 浓度预警 -->
        <div class="metric-card">
          <div class="card-header">
            <div class="card-title">{{ getPeriodLabel() }}浓度预警</div>
            <div class="card-icon warning-icon">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                <path
                  d="M12 17.5V17"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                />
                <path
                  d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
          </div>
          <div class="card-value">{{ metrics.overStandardCount }}<el-text>次</el-text></div>
          <div class="card-trend">
            <span
              class="trend-arrow"
              :class="{ up: metrics.overStandardTrend > 0, down: metrics.overStandardTrend < 0 }"
            >
              {{ metrics.overStandardTrend > 0 ? '↑' : '↓' }}
            </span>
            <span class="trend-text">{{ Math.abs(metrics.overStandardTrend) }}%</span>
            <span class="trend-label">{{ getCompareLabel() }}</span>
          </div>
        </div>

        <!-- 设备在线率 -->
        <el-popover placement="right-start" title="设备监控" width="400" trigger="click">
          <div class="popover-content">
@@ -153,7 +111,7 @@
                  </svg>
                </div>
              </div>
              <div class="card-value">{{ metrics.onlineRate }}%</div>
              <div class="card-value">{{ metrics.onlineRate }}<el-text>%</el-text></div>
              <div class="card-trend">
                <span
                  class="trend-arrow"
@@ -186,11 +144,11 @@
          </template>
        </el-popover>

        <!-- 环信码绿码率 -->
        <!-- 浓度预警 -->
        <div class="metric-card">
          <div class="card-header">
            <div class="card-title">环信码绿码率</div>
            <div class="card-icon efficiency-icon">
            <div class="card-title">{{ getPeriodLabel() }}浓度预警</div>
            <div class="card-icon warning-icon">
              <svg
                width="20"
                height="20"
@@ -198,15 +156,15 @@
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"
                  d="M12 17.5V17"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12 6V12L16 14"
                  d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
@@ -215,23 +173,20 @@
              </svg>
            </div>
          </div>
          <div class="card-value">{{ metrics.purifierEfficiency }}%</div>
          <div class="card-value">{{ metrics.overStandardCount }}<el-text>次</el-text></div>
          <div class="card-trend">
            <span
              class="trend-arrow"
              :class="{
                up: metrics.purifierEfficiencyTrend > 0,
                down: metrics.purifierEfficiencyTrend < 0,
              }"
              :class="{ up: metrics.overStandardTrend > 0, down: metrics.overStandardTrend < 0 }"
            >
              {{ metrics.purifierEfficiencyTrend > 0 ? '↑' : '↓' }}
              {{ metrics.overStandardTrend > 0 ? '↑' : '↓' }}
            </span>
            <span class="trend-text">{{ Math.abs(metrics.purifierEfficiencyTrend) }}%</span>
            <span class="trend-text">{{ Math.abs(metrics.overStandardTrend) }}%</span>
            <span class="trend-label">{{ getCompareLabel() }}</span>
          </div>
        </div>

        <!-- 巡查点次 -->
        <!-- 现场巡查 -->
        <el-popover placement="right-start" title="现场巡查统计" width="350" trigger="click">
          <div class="inspection-popover-content">
            <!-- 巡查量统计 -->
@@ -318,7 +273,7 @@
          <template #reference>
            <div class="metric-card">
              <div class="card-header">
                <div class="card-title">巡查点次</div>
                <div class="card-title">现场巡查</div>
                <div class="card-icon task-icon">
                  <svg
                    width="20"
@@ -344,7 +299,7 @@
                  </svg>
                </div>
              </div>
              <div class="card-value">{{ metrics.inspectionPoints }}</div>
              <div class="card-value">{{ metrics.inspectionPoints }}<el-text>点次</el-text></div>
              <div class="card-trend">
                <span
                  class="trend-arrow"
@@ -379,6 +334,177 @@
            </div>
          </template>
        </el-popover>

        <!-- 信访投诉 -->
        <div class="metric-card">
          <div class="card-header">
            <div class="card-title">信访投诉</div>
            <div class="card-icon warning-icon">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M21 6H3C2.46957 6 1.96086 6.21071 1.58579 6.58579C1.21071 6.96086 1 7.46957 1 8V18C1 19.1046 1.89543 20 3 20H21C22.1046 20 23 19.1046 23 18V8C23 7.46957 22.7893 6.96086 22.4142 6.58579C22.0391 6.21071 21.5304 6 21 6Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8 12H16"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8 16H16"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8 8H16"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
          </div>
          <div class="card-value">{{ metrics.overStandardCount }}<el-text>件</el-text></div>
          <div class="card-trend">
            <span
              class="trend-arrow"
              :class="{ up: metrics.overStandardTrend > 0, down: metrics.overStandardTrend < 0 }"
            >
              {{ metrics.overStandardTrend > 0 ? '↑' : '↓' }}
            </span>
            <span class="trend-text">{{ Math.abs(metrics.overStandardTrend) }}%</span>
            <span class="trend-label">{{ getCompareLabel() }}</span>
          </div>
        </div>

        <!-- 环信码 -->
        <div class="metric-card">
          <div class="card-header">
            <div class="card-title">环信码</div>
            <div class="card-icon efficiency-icon">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12 8V16"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8 12H16"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
          </div>
          <div class="card-value" style="color: #52c41a">
            <div>{{ metrics.purifierEfficiency }}<el-text>%</el-text></div>
            <div class="card-subvalues">
              <span style="color: #faad14; font-size: 14px">黄码：3%</span>
              <span style="color: #f5222d; font-size: 14px; margin-left: 12px">红码：2%</span>
            </div>
          </div>

          <div class="card-trend">
            <span
              class="trend-arrow"
              :class="{
                up: metrics.purifierEfficiencyTrend > 0,
                down: metrics.purifierEfficiencyTrend < 0,
              }"
            >
              {{ metrics.purifierEfficiencyTrend > 0 ? '↑' : '↓' }}
            </span>
            <span class="trend-text">{{ Math.abs(metrics.purifierEfficiencyTrend) }}%</span>
            <span class="trend-label">{{ getCompareLabel() }}</span>
          </div>
        </div>

        <!-- 行政处罚 -->
        <div class="metric-card">
          <div class="card-header">
            <div class="card-title">行政处罚</div>
            <div class="card-icon warning-icon">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 15C15.866 15 19 11.866 19 8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8C5 11.866 8.13401 15 12 15Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12 15C12 15 15 21 15 21H9C9 21 12 15 12 15Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M11 8H13"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M11 11H13"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
          </div>
          <div class="card-value">{{ metrics.overStandardCount }}<el-text>次</el-text></div>
          <div class="card-trend">
            <span
              class="trend-arrow"
              :class="{ up: metrics.overStandardTrend > 0, down: metrics.overStandardTrend < 0 }"
            >
              {{ metrics.overStandardTrend > 0 ? '↑' : '↓' }}
            </span>
            <span class="trend-text">{{ Math.abs(metrics.overStandardTrend) }}%</span>
            <span class="trend-label">{{ getCompareLabel() }}</span>
          </div>
        </div>
      </div>
    </div>

@@ -387,10 +513,12 @@
      <!-- 中部GIS地图区 -->
      <div class="map-section">
        <div id="map" class="map-container">
          <BaseMap :showSatellite="true"></BaseMap>
          <BaseMap :showSatellite="false"></BaseMap>
        </div>
      </div>
    </div>

    <!--  -->
    <div class="monitor-control-container">
      <el-button size="large" @click="toggleMonitorControl" class="push-btn">
        <div style="display: flex; flex-direction: column">
@@ -398,10 +526,10 @@
            <ArrowRight v-if="isMonitorControlExpanded" />
            <ArrowLeft v-else />
          </el-icon>
          <div>现</div>
          <!-- <div>现</div>
          <div>场</div>
          <div>巡</div>
          <div>查</div>
          <div>查</div> -->
        </div>
      </el-button>
      <MonitorControl
@@ -877,7 +1005,7 @@
/* 监控控制卡片 */
.monitor-control {
  /* position: absolute; */
  width: 500px;
  width: 400px;
  transition: all 0.3s ease;
  /* top: 0px; */
  /* right: 0px; */
@@ -887,7 +1015,7 @@
.push-btn {
  z-index: 1;
  width: 2.5rem;
  height: initial;
  height: 40px;
  margin: initial;
  display: flex;
  flex-direction: column;
@@ -1060,6 +1188,16 @@
  margin: 12px 0;
  color: #262626;
  line-height: 1.2;
  /* display: flex;
  justify-content: space-between;
  align-items: flex-end; */
}

.card-subvalues {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-weight: 500;
}

.card-trend {
@@ -1391,8 +1529,11 @@
/* 地图图例样式 */
.map-legend {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 4px;
  left: 4px;
  left: 50%;
  transform: translateX(-50%);
  /* width: 200px; */
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
@@ -1402,7 +1543,7 @@
}

.legend-header {
  margin-bottom: 12px;
  margin-right: 12px;
}

.legend-header h4 {
@@ -1415,7 +1556,7 @@

.legend-items {
  display: flex;
  flex-direction: column;
  flex-direction: row;
  gap: 8px;
}