manhole-cover-management-system/src/views/ldzh/jggl/index.vue

<script setup>
import { ref } from 'vue';
import { ElMessage, ElTooltip } from 'element-plus';

// 井盖设备数据
const manholeCovers = ref([]);

// 加载井盖设备数据
function loadManholeCovers() {
  // 假设这是从后端获取的数据
  const sampleData = [
    {
      id: 1,
      name: '井盖1',
      location: [800, 300], // 图像上的坐标
      status: 'normal',
      ownership: '市政公司A',
      terminalStatus: 'online',
      imageUrl: 'https://via.placeholder.com/150',
    },
    {
      id: 2,
      name: '井盖2',
      location: [700, 200], // 图像上的坐标
      status: 'abnormal',
      abnormalType: '倾斜',
      ownership: '市政公司B',
      terminalStatus: 'offline',
      imageUrl: 'https://via.placeholder.com/150',
    },
  ];
  manholeCovers.value = sampleData;
}

// 初始化
loadManholeCovers();
// 计算统计信息
const totalCovers = computed(() => manholeCovers.value.length);
const normalCovers = computed(() => manholeCovers.value.filter(cover => cover.status === 'normal').length);
const abnormalCovers = computed(() => manholeCovers.value.filter(cover => cover.status === 'abnormal').length);
const totalTerminals = computed(() => manholeCovers.value.length); // 每个井盖都有一个终端
const onlineTerminals = computed(() => manholeCovers.value.filter(cover => cover.terminalStatus === 'online').length);
const offlineTerminals = computed(() => manholeCovers.value.filter(cover => cover.terminalStatus === 'offline').length);

// 批量下发离线维护任务
function sendMaintenanceTasks() {
  // 模拟批量下发离线维护任务
  manholeCovers.value.forEach(cover => {
    if (cover.terminalStatus === 'offline') {
      cover.terminalStatus = 'maintenance'; // 设置为维护状态
    }
  });
  ElMessage.success('离线维护任务已成功下发！');
}
</script>
<template>
  <div class="manhole-cover-overview">
    <div class="statistics-panel">
      <div>井盖设备总数: {{ totalCovers }}</div>
      <div>正常数: {{ normalCovers }}</div>
      <div>异常数: {{ abnormalCovers }}</div>
      <div>智能终端总数: {{ totalTerminals }}</div>
      <div>在线数: {{ onlineTerminals }}</div>
      <div>离线数: {{ offlineTerminals }}</div>
      <el-button type="primary" @click="sendMaintenanceTasks">批量下发离线维护任务</el-button>
    </div>
    <!-- 地图背景图 -->
    <img src="/map.jpg" alt="地图" class="map-image" />

    <!-- 井盖设备图标 -->
    <div
        v-for="(cover, index) in manholeCovers"
        :key="index"
        :class="['manhole-cover-icon', { 'status-normal': cover.status === 'normal', 'status-abnormal': cover.status === 'abnormal' }]"
        :style="{ left: `${cover.location[0]}px`, top: `${cover.location[1]}px` }"
    >
      <el-tooltip effect="dark" placement="top">
        <template #content>
          <div>
            <strong>{{ cover.name }}</strong><br>
            <span>位置: {{ cover.location.join(', ') }}</span><br>
            <span>状态: {{ cover.status === 'normal' ? '正常' : cover.abnormalType }}</span><br>
            <span>所属权属单位: {{ cover.ownership }}</span><br>
            <span>终端状态: {{ cover.terminalStatus === 'online' ? '在线' : '离线' }}</span><br>
            <img :src="cover.imageUrl" alt="井盖图片" width="100">
          </div>
        </template>
        <i class="el-icon-location"></i>
      </el-tooltip>
    </div>
  </div>
</template>
<style scoped>
.manhole-cover-overview {
  position: relative;
  width: 100%;
  height: 500px;
}

.map-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manhole-cover-icon {
  position: absolute;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background-color: #f00;
  border-radius: 50%;
}

.status-normal {
  background-color: green;
}

.status-abnormal {
  background-color: red;
}

/* 为 Tooltip 添加样式 */
.el-icon-location {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: white;
  font-size: 16px;
}
.statistics-panel {
  position: absolute;
  top: 10px;
  left: 0px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>