feat:设备统计4个

张含笑

2025-05-15 301860da930ba95f6ff28057f5696fb3c1609c41

feat:设备统计4个

 src/views/wel/components/statistics.vue

@@ -9,89 +9,7 @@
        <img src="/src/assets/images/workbench/st2.png" alt="" />
      </div>
    </div>
    <!-- <div
      class="grid-container"
      v-if="permission.device_statistics_four && !permission.device_statistics_six"
    >
      <div v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
        <div class="device-title">
          <img :src="test[item].img" :alt="newtitleData[item].name" />
          <div class="itemcenter">
            <div>{{ test[item]?.name || '--' }}</div>
            <span class="shu">{{ newtitleData[item].total_num }}</span>
            <span>个</span>
          </div>
        </div>
        <div class="status-list">
          <template v-if="test[item]?.name == '机巢' || test[item]?.name == '无人机'">
            <div
              v-for="statusKey in [4, 0, -1]"
              :key="statusKey"
              class="status-item"
              :class="getStatusStyle(test[item]?.name, statusKey)"
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                  color: getStatusColor(test[item]?.name, statusKey),
                }"
              ></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
                {{ test[item]?.name === '无人机' ? '架' : '个' }}
              </span>
            </div>
          </template>
          <template v-else-if="test[item]?.name == '监控设备'">
            <div
              v-for="statusKey in [1, 0]"
              :key="statusKey"
              class="status-item"
              :class="getStatusStyle(test[item]?.name, statusKey)"
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                  color: getStatusColor(test[item]?.name, statusKey),
                }"
              ></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
                {{ test[item]?.name === '无人机' ? '架' : '个' }}
              </span>
            </div>
          </template>

          <template v-else>
            <div
              v-for="(status, statusIndex) in newtitleData[item].status_map"
              :key="statusIndex"
              class="status-item"
              :class="getStatusStyle(test[item]?.name, statusIndex)"
              :style="{ color: getStatusColor(test[item]?.name, statusIndex) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusIndex),
                  color: getStatusColor(test[item]?.name, statusIndex),
                }"
              ></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
              <span class="count"
                >{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span
              >
            </div>
          </template>
        </div>
      </div>
    </div> -->
   
    <div class="grid-container">
      <div v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
        <div class="device-title">
@@ -344,7 +262,7 @@
    console.log('permission.value', permission.value);
    console.log('设备', res.data.data);
    if (permission.value?.device_statistics_six) {
      const { move_list, ...filteredData } = res.data.data;
      const { move_list,monitor_list, ...filteredData } = res.data.data;
      newtitleData.value = filteredData;

      return;
@@ -413,12 +331,12 @@
    // display: grid;
    // grid-template-columns: repeat(4, 1fr);
    display: flex;
   justify-content: space-between;
   justify-content: space-around;
    .device-card {
      display: flex;
      align-items: center;
      margin-top: 30px;
      margin-left: 10px;

      .device-title {
        display: flex;
        align-items: center;