feat: 名称修改

罗广辉

2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9

 src/views/wel/components/statistics.vue

@@ -9,49 +9,107 @@
        <img src="/src/assets/images/workbench/st2.png" alt="" />
      </div>
    </div>
      <div class="grid-container1" >

    <div class="grid-container" v-if="Object.keys(newtitleData).length > 0">
      <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>
            <span>{{ unitMap[test[item]?.name] }}</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"
              :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>
        </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">
          <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 class="status-list">
              <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] }}
                {{ unitMap[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] }}
                {{ unitMap[test[item]?.name] }}
              </span>
            </div>
          </template>
          <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>
              <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 [ 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>
              <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"
@@ -67,76 +125,48 @@
                }"
              ></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
              <span class="count"
                >{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span
              >
              <span class="count">{{ status }} {{ unitMap[test[item]?.name] }}</span>
            </div>
          </div>
          </template>
        </div>
      </div>
    </div> -->
  
    </div>
    <div class="grid-container" v-else>
      <el-empty>
        <template #description>
          <span class="custom-text">暂无数据</span>
        </template>
      </el-empty>
    </div>
  </div>
</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 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();
// Object.key;
// 运维人员:1912328766238597121
// 政企专员：1912467025014923265
const refresh=()=>{
  getStaticsList()
}
const jumppage=()=>{
  console.log('跳转');
  
}
const refresh = () => {
  getStaticsList();
};
const jumppage = () => {
  router.push({
    path: '/device/index',
  });
};
const userInfo = computed(() => store.getters.userInfo);
console.log('userInfo', userInfo.value.role_id);
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: '机巢',
@@ -147,7 +177,7 @@
    img: titleImg2,
  },
  flow_type_list: {
    name: '机巢流量',
    name: '无人机流量',
    img: titleImg3,
  },
  monitor_list: {
@@ -165,92 +195,123 @@
  },
};
const statusSelect = {
  0: '空闲中',
  4: '作业中',
  0: '空闲中',
  '-1': '离线中',
};
const flowStatus = {
  0: '流量无忧',
  1: '流量到期',
  2: '流量不足',
  0: '无忧',
  1: '到期',
  2: '不足',
};
const monitorStatus = {
  0: '离线中',
  1: '在线中',
};

const insureStatus = {
  0: '临近到期',
  1: '正常期限',
  2:'保险过期'
};
const moveListStatus = {
  '-1': '离线中',
  4: '在线中',
};
// 样式配置对象
const statusStyles = {
  机巢保险: {
    0: { class: 'expired', color: '#7C8091', background: '#7C8091' },
    1: { class: 'normal', color: '#1B94FF', background: '#1B94FF' },
    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)' },
  },

  机巢流量: {
    0: { class: 'offline', color: '#11CE3E', background: '#11CE3E' },
    1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
    2: { class: 'flying', color: '#7C8091', background: '#7C8091' },
  无人机流量: {
    0: { class: 'offline', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' },
    1: { class: 'flying', color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' },
    2: { class: 'flying', color: '#FFA600', background: '#FFA600' },
  },
  监控设备: {
    0: { class: 'offline', color: '#bababa', background: '#bababa' },
    1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
    0: { class: 'offline', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' },
    1: { class: 'flying', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' },
  },
  移动机巢: {
    '-1': { class: 'offline', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' },
    4: { class: 'flying', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' },
  },
  // 默认样式配置
  default: {
    0: { class: 'warning', color: '#1b94ff', background: '#1b94ff' },
    4: { class: 'success', color: '#11ce3e', background: '#11ce3e' },
    '-1': { class: 'success', color: '#bababa', background: '#bababa' },
    0: { class: 'warning', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' },
    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 getStatusColor = (name, statusIndex) => {
  // 获取颜色配置，优先使用名称专属配置
  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'
  ); // 最终默认颜色
  return styleConfig[statusIndex]?.background || styleConfig[statusIndex]?.color || '#F0F0F0';
};
const getStatusLabel = (itemName, statusCode) => {
  switch (itemName) {
    case '机巢流量':
    case '无人机流量':
      return flowStatus[statusCode] || statusSelect[statusCode];
    case '监控设备':
      return monitorStatus[statusCode] || statusSelect[statusCode];
    case '机巢保险':
      return insureStatus[statusCode] || statusSelect[statusCode];
    case '移动机巢':
      return moveListStatus[statusCode] || statusSelect[statusCode];
    default:
      return statusSelect[statusCode] || `未知状态(${statusCode})`;
  }
};

const getStaticsList = () => {
  getStatics(userInfo.value.detail.areaCode).then(res => {
    newtitleData.value = res.data.data;
    // console.log('设备', newtitleData.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;
    }

    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 unitMap = {
  drone: '架',
  nest: '个',
  monitor: '个',
  mobile: '个',
  无人机流量: '架',
  无人机: '架',
  机巢: '个',
  机巢保险: '个',
  监控设备: '个',
  移动机巢: '个',
};

watch(
  () => [
    userInfo.value.detail?.areaCode,
    permission.value.device_statistics_six,
    permission.value?.device_statistics_four,
  ],
  () => getStaticsList(),
  { immediate: true }
);
onMounted(() => {
  getStaticsList();
});
@@ -258,55 +319,92 @@

<style scoped lang="scss">
.statistics {
  min-height: 174px;
  // height: 174px;
   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;
    justify-content: space-between;
    align-items: center;

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

      span {
        margin-right: 4px;
        font-weight: bold;
        font-size: 16px;
        color: #363636;
        font-family: 'Source Han Sans CN';
      }
      img{
      cursor: pointer;}

      img {
        cursor: pointer;
      }
    }

    .arrow {
      cursor: pointer;
    }
  }

  .grid-container {
    padding: 0 14px 0 21px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    // display: grid;
    // grid-template-columns: repeat(4, 1fr);
   height: pxToVh(80);
    display: flex;
    justify-content: space-around;
    :deep(.el-empty ){
      width: 60px;
      height: pxToVh(60);
      .el-empty__image{
      width: 60px !important;
       height: pxToVh(60)!important;}
      .custom-text {
        font-size: 12px;
        color: #7c8091;
      }
    }
    .device-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;

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

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

      .itemcenter {
        margin-left: 14px;
        margin-left: 5px;
        font-weight: 400;
        font-size: 14px;
        color: #343434;
        div {
          margin-top: 5px;
        }
        .shu {
          font-weight: bold;
          font-size: 36px;
          color: #363636;
          display: inline-block;
          transform: skewX(-5deg);
          font-family: 'Source Han Sans CN';
          // font-size: calc(12px + 0.5vw);
          margin-right: 2px;
        }

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

    .status-list {
      display: grid;
      margin-left: 5px;
@@ -340,33 +439,15 @@
          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;
        }
      }
    }
  }

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

    .device-card {
      display: flex;
      flex-direction: column;
@@ -375,21 +456,29 @@
      .device-title {
        display: flex;
        align-items: center;

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

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

        .shu {
          font-weight: bold;
          font-size: 36px;
          color: #363636;
          display: inline-block;
          transform: skewX(-5deg);
          font-family: 'Source Han Sans CN';
          margin-right: 2px;
        }

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

    .status-list {
      display: grid;

@@ -408,40 +498,22 @@
        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);
          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;
        }

        &.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;
        }
      }
    }