feat:设备统计样式调整

张含笑

2025-05-15 ed7e34dfde7797eb983a2ac9541fbd01ac3d8c3a

feat:设备统计样式调整

 src/views/wel/components/statistics.vue

@@ -9,7 +9,7 @@
        <img src="/src/assets/images/workbench/st2.png" alt="" />
      </div>
    </div>
    <div
    <!-- <div
      class="grid-container"
      v-if="permission.device_statistics_four && !permission.device_statistics_six"
    >
@@ -23,35 +23,76 @@
          </div>
        </div>
        <div class="status-list">
          <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
          <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) }"
            >
          </div>
              <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-container1"
      v-if="
        (permission.device_statistics_six && permission.device_statistics_four) ||
        permission.device_statistics_six
      "
    >
    </div> -->
    <div class="grid-container">
      <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" />
@@ -62,25 +103,93 @@
          </div>
        </div>
        <div class="status-list">
          <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
          <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) }"
            >
          </div>
              <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-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>
@@ -191,17 +300,6 @@
  },
};

// const list = [
//   {
//     key:'',
//     list: [
//       {name: '空闲',value: 0,key:'7'},
//       {name: '空闲',value: 0,key:'7'},
//       {name: '空闲',value: 0,key:'7'},
//     ]
//   }
// ]

const getStatusStyle = (name, statusIndex) => {
  const styleConfig = statusStyles[name] || statusStyles.default;
  return styleConfig[statusIndex]?.class || '';
@@ -245,17 +343,9 @@
  getStatics(userInfo.value.detail.areaCode).then(res => {
    console.log('permission.value', permission.value);
    console.log('设备', res.data.data);
    // for (let key in res.data.data) {
    //  if (
    //    permission.value?.device_statistics_six &&
    //     key === 'move_list'
    //   )
    //   continue;
    //   newtitleData.value[key] = res.data.data[key];
    // }

    if (permission.value?.device_statistics_six) {
      newtitleData.value = res.data.data;
      const { move_list, ...filteredData } = res.data.data;
      newtitleData.value = filteredData;

      return;
    }
@@ -263,7 +353,7 @@
    for (let key in res.data.data) {
      if (
        permission.value?.device_statistics_four &&
        (key === 'flow_type_list' || key === 'insure_list' )
        (key === 'flow_type_list' || key === 'insure_list')
      )
        continue;
      newtitleData.value[key] = res.data.data[key];
@@ -289,7 +379,7 @@
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin-bottom: 10px;

  font-size: clamp(12px, 2vw, 24px);
  .title {
    padding: 14px 14px 0 21px;
    display: flex;
@@ -320,13 +410,15 @@

  .grid-container {
    padding: 0 14px 0 21px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    // display: grid;
    // grid-template-columns: repeat(4, 1fr);
    display: flex;
   justify-content: space-between;
    .device-card {
      display: flex;
      align-items: center;
      margin-top: 30px;
      margin-left: 10px;
      .device-title {
        display: flex;
        align-items: center;
@@ -338,7 +430,7 @@
      }

      .itemcenter {
        margin-left: 14px;
        margin-left: 5px;
        font-weight: 400;
        font-size: 14px;
        color: #343434;
@@ -350,6 +442,7 @@
          display: inline-block;
          transform: skewX(-5deg);
          font-family: 'YouSheBiaoTiHei';
          // font-size: calc(12px + 0.5vw);
        }

        span {
@@ -363,7 +456,6 @@
    .status-list {
      display: grid;
      margin-left: 5px;

      .status-item {
        display: flex;
        align-items: center;
@@ -372,13 +464,11 @@
        font-size: 12px;
        gap: 10px;
        margin-bottom: 5px;

        .indicator {
          width: 6px;
          height: 6px;
          border-radius: 50%;
        }

        .label {
          flex: 1;
          // font-size: clamp(12px, 1vw, 14px);
@@ -388,30 +478,6 @@
          // font-size: clamp(14px, 1.1vw, 16px);
          font-size: 14px;
          color: #7c8091;
        }

        &.status-4 .indicator {
          background: #11ce3e;
        }

        &.status-4 {
          color: #11ce3e;
        }

        &.status-0 .indicator {
          background: #1b94ff;
        }

        &.status-0 {
          color: #1b94ff;
        }

        &.status--1 .indicator {
          background: #bababa;
        }

        &.status--1 {
          color: #bababa;
        }
      }
    }
@@ -480,11 +546,11 @@

        .label {
          flex: 1;
          // font-size: clamp(12px, 1vw, 14px);
          font-size: clamp(12px, 1vw, 14px);
        }

        .count {
          // font-size: clamp(14px, 1.1vw, 16px);
          font-size: clamp(12px, 1.1vw, 16px);
          font-size: 14px;
          color: #7c8091;
        }