feat:机巢名称更改

shuishen

2025-10-25 de03aa5848b4b198fcc7cd0be65cf55b575eac26

feat:机巢名称更改

 src/views/wel/components/statistics.vue

@@ -22,20 +22,13 @@
        </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"
            <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>
              :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] }}
@@ -44,20 +37,13 @@
            </div>
          </template>
          <template v-else-if="test[item]?.name == '监控设备'">
            <div
              v-for="statusKey in [1, 0]"
              :key="statusKey"
              class="status-item"
            <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>
              :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] }}
@@ -65,21 +51,14 @@
              </span>
            </div>
          </template>
          <template v-else-if="test[item]?.name == '机巢保险'">
            <div
              v-for="statusKey in [1, 0,2]"
              :key="statusKey"
              class="status-item"
          <template v-else-if="test[item]?.name == '无人机保险'">
            <div v-for="statusKey in [1, 0, 2]" :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>
              :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] }}
@@ -87,21 +66,14 @@
              </span>
            </div>
          </template>
            <template v-else-if="test[item]?.name == '无人机流量'">
            <div
              v-for="statusKey in [ 0,2,1]"
              :key="statusKey"
              class="status-item"
          <template v-else-if="test[item]?.name == '无人机流量'">
            <div v-for="statusKey in [0, 2, 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>
              :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] }}
@@ -110,20 +82,13 @@
            </div>
          </template>
          <template v-else>
            <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 }} {{ unitMap[test[item]?.name] }}</span>
            </div>
@@ -142,30 +107,30 @@
</template>

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

const newtitleData = ref({});
const newtitleData = ref({})

const test = {
  no_move_list: {
@@ -190,40 +155,40 @@
  },

  insure_list: {
    name: '机巢保险',
    name: '无人机保险',
    img: titleImg6,
  },
};
}
const statusSelect = {
  4: '作业中',
  0: '空闲中',
  '-1': '离线中',
};
}
const flowStatus = {
  0: '无忧',
  1: '临期',
  2: '不足',
};
}
const monitorStatus = {
  0: '离线中',
  1: '在线中',
};
}

const insureStatus = {
  0: '临近到期',
  1: '正常期限',
  2:'保险过期'
};
  2: '保险过期'
}
const moveListStatus = {
  '-1': '离线中',
  4: '在线中',
};
}
// 样式配置对象
const statusStyles = {
  机巢保险: {
  无人机保险: {
    0: { class: 'expired', color: '#FFA600', background: '#FFA600' },
    1: { class: 'normal', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' },
     2: { class: 'flying',color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' },
    2: { class: 'flying', color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' },
  },

  无人机流量: {
@@ -245,64 +210,64 @@
    4: { class: 'success', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' },
    '-1': { class: 'success', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' },
  },
};
}

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;
  return styleConfig[statusIndex]?.background || styleConfig[statusIndex]?.color || '#F0F0F0';
};
  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];
    case '机巢保险':
      return insureStatus[statusCode] || statusSelect[statusCode];
      return monitorStatus[statusCode] || statusSelect[statusCode]
    case '无人机保险':
      return insureStatus[statusCode] || statusSelect[statusCode]
    case '移动机巢':
      return moveListStatus[statusCode] || statusSelect[statusCode];
      return moveListStatus[statusCode] || statusSelect[statusCode]
    default:
      return statusSelect[statusCode] || `未知状态(${statusCode})`;
      return statusSelect[statusCode] || `未知状态(${statusCode})`
  }
};
}

const getStaticsList = () => {
  getStatics(userInfo.value.detail.areaCode).then(res => {
//  console.log('permission.value', permission.value);
    //  console.log('permission.value', permission.value);
    // console.log('设备', res.data.data);
    if (permission.value?.device_statistics_six) {
      const { move_list, monitor_list, ...filteredData } = res.data.data;
      newtitleData.value = filteredData;
      return;
      const { move_list, monitor_list, ...filteredData } = res.data.data
      newtitleData.value = filteredData
      return
    }

    for (let key in res.data.data) {
      if (permission.value?.device_statistics_four) {
        const { flow_type_list, insure_list, ...filteredData } = res.data.data;
        newtitleData.value = filteredData;
        return;
        const { flow_type_list, insure_list, ...filteredData } = res.data.data
        newtitleData.value = filteredData
        return
      }
    }
  });
};
  })
}

const unitMap = {
  无人机流量: '架',
  无人机: '架',
  机巢: '个',
  机巢保险: '个',
  无人机保险: '个',
  监控设备: '个',
  移动机巢: '个',
};
}
watch(
  () => [
    userInfo.value.detail?.areaCode,
@@ -311,20 +276,21 @@
  ],
  () => getStaticsList(),
  { immediate: true }
);
)
onMounted(() => {
  getStaticsList();
});
  getStaticsList()
})
</script>

<style scoped lang="scss">
.statistics {
  // height: 174px;
   height: pxToVh(174);
  height: pxToVh(174);
  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;
@@ -357,20 +323,25 @@
    padding: 0 14px 0 21px;
    // display: grid;
    // grid-template-columns: repeat(4, 1fr);
   height: pxToVh(80);
    height: pxToVh(80);
    display: flex;
    justify-content: space-around;
    :deep(.el-empty ){

    :deep(.el-empty) {
      width: 60px;
      height: pxToVh(60);
      .el-empty__image{
      width: 60px !important;
       height: pxToVh(60)!important;}

      .el-empty__image {
        width: 60px !important;
        height: pxToVh(60) !important;
      }

      .custom-text {
        font-size: 12px;
        color: #7c8091;
      }
    }

    .device-card {
      display: flex;
      align-items: center;
@@ -391,9 +362,11 @@
        font-weight: 400;
        font-size: 14px;
        color: #343434;

        div {
          margin-top: 5px;
        }

        .shu {
          font-weight: bold;
          font-size: 36px;
@@ -416,6 +389,7 @@
    .status-list {
      display: grid;
      margin-left: 5px;

      .status-item {
        display: flex;
        align-items: center;
@@ -424,11 +398,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);