机场areacode绑定

rain

2025-05-13 c5fbc8bd6b529cd54a2689bbec3ff6cb3e99aa49

 src/views/wel/components/statistics.vue

@@ -3,40 +3,12 @@
    <div class="title">
      <div class="name">
        <span> 设备统计</span>
        <img src="/src/assets/images/workbench/st1.png" alt="" />
        <img @click="refresh" src="/src/assets/images/workbench/st1.png" alt="" />
      </div>
      <div class="arrow">
      <div class="arrow" @click="jumppage">
        <img src="/src/assets/images/workbench/st2.png" alt="" />
      </div>
    </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" />
          <div class="itemcenter">
            <div>{{ test[item]?.name || '--' }}</div>
            <span class="shu">{{ newtitleData[item].total_num }}</span>
            <span>个</span>
          </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"></span>
            <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
            <span class="count"
              >{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span
            >
          </div>
        </div>
      </div>
    </div> -->
    <div class="grid-container1">
      <div v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
        <div class="device-title">
@@ -48,25 +20,15 @@
          </div>
        </div>
        <div class="status-list">
          <!-- :class="`status-${statusIndex}`" -->
          <div
            v-for="(status, statusIndex) in newtitleData[item].status_map"
            :key="statusIndex"
            class="status-item"
          <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>
            :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
            >
            <span class="count">{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span>
          </div>
        </div>
      </div>
@@ -75,19 +37,66 @@
</template>

<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';
import titleImg1 from '@/assets/images/workbench/st3.png';
import titleImg2 from '@/assets/images/workbench/st4.png';
import titleImg3 from '@/assets/images/workbench/st5.png';
import titleImg4 from '@/assets/images/workbench/st6.png';
import titleImg5 from '@/assets/images/workbench/st8.png';
import titleImg6 from '@/assets/images/workbench/st9.png';
import { getStatics } from '@/api/home/index';
const store = useStore();
Object.key;
const userInfo = computed(() => store.getters.userInfo);
const newtitleData = ref({});
import { useStore } from 'vuex'
import { computed } from 'vue'
import titleImg1 from '@/assets/images/workbench/st3.png'
import titleImg2 from '@/assets/images/workbench/st4.png'
import titleImg3 from '@/assets/images/workbench/st5.png'
import titleImg4 from '@/assets/images/workbench/st6.png'
import titleImg5 from '@/assets/images/workbench/st8.png'
import titleImg6 from '@/assets/images/workbench/st9.png'
import { getStatics } from '@/api/home/index'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()
const refresh = () => {
  getStaticsList()
}
const jumppage = () => {
  router.push({
      path: '/device/index',
   })

}
const userInfo = computed(() => store.getters.userInfo)
const permission = computed(() => store.getters.permission)


const newtitleData = ref({})
const titleData = ref([
  {
    img: titleImg1,
    name: '机巢',
    total_num: 52,
    working: 0,
    leisure: 0,
    offline: 0,
  },
  {
    img: titleImg2,
    name: '无人机',
    total_num: 52,
    working: 0,
    leisure: 0,
    offline: 0,
  },
  {
    img: titleImg3,
    name: '监控设备',
    total_num: 52,
    working: 0,
    leisure: 0,
    offline: 0,
  },
  {
    img: titleImg4,
    name: '移动机巢',
    total_num: 52,
    working: 0,
    leisure: 0,
    offline: 0,
  },
])
const test = {
  no_move_list: {
    name: '机巢',
@@ -114,28 +123,25 @@
    name: '机巢保险',
    img: titleImg6,
  },
};
}
const statusSelect = {
  0: '空闲中',
  4: '作业中',
  '-1': '离线中',
};
// 流量 状态 0充足，1=流量到期，2=不足
}
const flowStatus = {
  0: '流量无忧',
  1: '流量到期',
  2: '流量不足',
};
// "监控状态 1=在线，0=离线"
}
const monitorStatus = {
  0: '离线中',
  1: '在线中',
};
// 机巢保险  1=保险，0=未保险
}
const insureStatus = {
  0: '临近到期',
  1: '正常期限',
};
}
// 样式配置对象
const statusStyles = {
  机巢保险: {
@@ -158,129 +164,103 @@
    4: { class: 'success', color: '#11ce3e', background: '#11ce3e' },
    '-1': { class: 'success', color: '#bababa', background: '#bababa' },
  },
};
}
const getStatusStyle = (name, statusIndex) => {
  // 获取样式配置，优先使用名称专属配置
  const styleConfig = statusStyles[name] || statusStyles.default;
  return styleConfig[statusIndex]?.class || '';
};
  const styleConfig = statusStyles[name] || statusStyles.default
  return styleConfig[statusIndex]?.class || ''
}

const getStatusColor = (name, statusIndex) => {
  // 获取颜色配置，优先使用名称专属配置
  const styleConfig = statusStyles[name] || statusStyles.default;
  return styleConfig[statusIndex]?.color || '#333';
};
  const styleConfig = statusStyles[name] || statusStyles.default
  return styleConfig[statusIndex]?.color || '#333'
}
// 新增背景颜色获取方法
const getStatusBackground = (name, statusIndex) => {
  const styleConfig = statusStyles[name] || statusStyles.default;
  const styleConfig = statusStyles[name] || statusStyles.default
  return (
    styleConfig[statusIndex]?.background ||
    styleConfig[statusIndex]?.color || // 降级使用字体颜色
    '#F0F0F0'
  ); // 最终默认颜色
};
  ) // 最终默认颜色
}
const getStatusLabel = (itemName, statusCode) => {
  switch (itemName) {
    case '机巢流量':
      return flowStatus[statusCode] || statusSelect[statusCode];
      return flowStatus[statusCode] || statusSelect[statusCode]
    case '监控设备':
      return monitorStatus[statusCode] || statusSelect[statusCode];
      return monitorStatus[statusCode] || statusSelect[statusCode]
    case '机巢保险':
      return insureStatus[statusCode] || statusSelect[statusCode];
      return insureStatus[statusCode] || statusSelect[statusCode]
    default:
      return statusSelect[statusCode] || `未知状态(${statusCode})`;
      return statusSelect[statusCode] || `未知状态(${statusCode})`
  }
};
}
const getStaticsList = () => {
  getStatics(userInfo.value.detail.areaCode).then(res => {
    newtitleData.value = res.data.data;
    console.log('设备', newtitleData.value);
  });
};
  console.log('userInfo.value.detail.areaCode',permission.value);
    if (permission.value?.device_statistics_six) {
      newtitleData.value = res.data.data
      return
    }

    for (let key in res.data.data) {
      if (permission.value?.device_statistics_four && (key === 'flow_type_list' ||
        key === 'insure_list')) continue
      newtitleData.value[key] = res.data.data[key]
    }
  })
}

const unitMap = {
  drone: '架',
  nest: '个',
  monitor: '个',
  mobile: '个',
};
const titleData = ref([
  {
    img: titleImg1,
    name: '机巢',
    type: 'nest',
    data: 52,
    statuses: [
      { type: 'working', label: '作业中', count: 20 },
      { type: 'idle', label: '空间中', count: 20 },
      { type: 'offline', label: '离线中', count: 20 },
    ],
  },
  {
    img: titleImg2,
    name: '无人机',
    data: 52,
    type: 'drone',
    statuses: [
      { type: 'working', label: '作业中', count: 20 },
      { type: 'idle', label: '空间中', count: 20 },
      { type: 'offline', label: '离线中', count: 20 },
    ],
  },
  {
    img: titleImg3,
    name: '监控设备',
    type: 'monitor',
    data: 52,
    statuses: [
      { type: 'working', label: '作业中', count: 20 },
      { type: 'idle', label: '空间中', count: 20 },
      { type: 'offline', label: '离线中', count: 20 },
    ],
  },
  {
    img: titleImg4,
    name: '移动机巢',
    type: 'mobile',
    data: 52,
    statuses: [
      { type: 'working', label: '作业中', count: 20 },
      { type: 'idle', label: '空间中', count: 20 },
      { type: 'offline', label: '离线中', count: 20 },
    ],
  },
]);
}

onMounted(() => {
  getStaticsList();
});
  getStaticsList()
})
</script>

<style scoped lang="scss">
.statistics {
  // height: 174px;
  min-height: 174px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin-bottom: 10px;

  .title {
    padding: 14px 14px 0 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name {
      display: flex;
      align-items: center;

      span {
        margin-right: 4px;
      }

      img {
        cursor: pointer;
      }
    }

    .arrow {
      cursor: pointer;
    }
  }

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

    .device-card {
      display: flex;
      flex-direction: column;
@@ -289,21 +269,25 @@
      .device-title {
        display: flex;
        align-items: center;

        img {
          width: 43px;
          height: 44px;
        }
      }

      .itemcenter {
        margin-left: 14px;
        font-weight: 400;
        font-size: 14px;
        color: #343434;

        .shu {
          font-weight: bold;
          font-size: 36px;
          color: #363636;
        }

        span {
          font-weight: 400;
          font-size: 12px;
@@ -311,8 +295,10 @@
        }
      }
    }

    .status-list {
      display: grid;
      margin-left: 5px;

      .status-item {
        display: flex;
@@ -322,11 +308,13 @@
        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);
@@ -341,12 +329,15 @@
        &.status-4 .indicator {
          background: #11ce3e;
        }

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

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

        &.status-0 {
          color: #1b94ff;
        }
@@ -354,16 +345,19 @@
        &.status--1 .indicator {
          background: #bababa;
        }

        &.status--1 {
          color: #bababa;
        }
      }
    }
  }

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

    .device-card {
      display: flex;
      flex-direction: column;
@@ -372,21 +366,25 @@
      .device-title {
        display: flex;
        align-items: center;

        img {
          width: 43px;
          height: 44px;
        }
      }

      .itemcenter {
        margin-left: 14px;
        font-weight: 400;
        font-size: 14px;
        color: #343434;

        .shu {
          font-weight: bold;
          font-size: 36px;
          color: #363636;
        }

        span {
          font-weight: 400;
          font-size: 12px;
@@ -394,6 +392,7 @@
        }
      }
    }

    .status-list {
      display: grid;

@@ -405,11 +404,13 @@
        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);
@@ -424,12 +425,15 @@
        &.status-4 .indicator {
          background: #11ce3e;
        }

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

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

        &.status-0 {
          color: #1b94ff;
        }
@@ -437,6 +441,7 @@
        &.status--1 .indicator {
          background: #bababa;
        }

        &.status--1 {
          color: #bababa;
        }