个人工作台设备统计显示处理

shuishen

2025-05-09 4aae639148db2856ce13fffedbfc188bdd52f07b

个人工作台设备统计显示处理

 src/views/wel/components/statistics.vue

@@ -9,7 +9,7 @@
        <img src="/src/assets/images/workbench/st2.png" alt="" />
      </div>
    </div>
      <div class="grid-container1" >
    <div class="grid-container1" v-if="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" />
@@ -20,29 +20,20 @@
          </div>
        </div>
        <div class="status-list">
          <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>
    </div>
    <!-- <div class="grid-container" >
    <div class="grid-container" v-if="permission?.device_statistics_four">
      <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" />
@@ -52,57 +43,49 @@
            <span>个</span>
          </div>
          <div class="status-list">
            <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>
      </div>
    </div> -->
  
    </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 { getStatics } from '@/api/home/index';
const store = useStore();
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;
// 运维人员:1912328766238597121
// 政企专员：1912467025014923265
const refresh=()=>{
const refresh = () => {
  getStaticsList()
}
const jumppage=()=>{
  console.log('跳转');
  
const jumppage = () => {
  console.log('跳转')

}
const userInfo = computed(() => store.getters.userInfo);
console.log('userInfo', userInfo.value.role_id);
const newtitleData = ref({});
const userInfo = computed(() => store.getters.userInfo)
const permission = computed(() => store.getters.permission)

console.log(permission, 'permission')
const newtitleData = ref({})
const titleData = ref([
  {
    img: titleImg1,
@@ -116,7 +99,7 @@
    img: titleImg2,
    name: '无人机',
    total_num: 52,
      working: 0,
    working: 0,
    leisure: 0,
    offline: 0,
  },
@@ -124,7 +107,7 @@
    img: titleImg3,
    name: '监控设备',
    total_num: 52,
     working: 0,
    working: 0,
    leisure: 0,
    offline: 0,
  },
@@ -132,11 +115,11 @@
    img: titleImg4,
    name: '移动机巢',
    total_num: 52,
   working: 0,
    working: 0,
    leisure: 0,
    offline: 0,
  },
]);
])
const test = {
  no_move_list: {
    name: '机巢',
@@ -163,25 +146,25 @@
    name: '机巢保险',
    img: titleImg6,
  },
};
}
const statusSelect = {
  0: '空闲中',
  4: '作业中',
  '-1': '离线中',
};
}
const flowStatus = {
  0: '流量无忧',
  1: '流量到期',
  2: '流量不足',
};
}
const monitorStatus = {
  0: '离线中',
  1: '在线中',
};
}
const insureStatus = {
  0: '临近到期',
  1: '正常期限',
};
}
// 样式配置对象
const statusStyles = {
  机巢保险: {
@@ -204,56 +187,59 @@
    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);
  });
};
  getStatics(userInfo.value.detail.areaCode,).then(res => {
    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: '个',
};
}

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

<style scoped lang="scss">
@@ -262,28 +248,36 @@
  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;}

      img {
        cursor: pointer;
      }
    }

    .arrow {
      cursor: pointer;
    }
  }

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

    .device-card {
      display: flex;
      flex-direction: column;
@@ -292,21 +286,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;
@@ -314,9 +312,11 @@
        }
      }
    }

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

      .status-item {
        display: flex;
        align-items: center;
@@ -325,11 +325,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);
@@ -344,12 +346,15 @@
        &.status-4 .indicator {
          background: #11ce3e;
        }

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

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

        &.status-0 {
          color: #1b94ff;
        }
@@ -357,16 +362,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;
@@ -375,21 +383,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;
@@ -397,6 +409,7 @@
        }
      }
    }

    .status-list {
      display: grid;

@@ -408,11 +421,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);
@@ -427,12 +442,15 @@
        &.status-4 .indicator {
          background: #11ce3e;
        }

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

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

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

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