个人工作台

张含笑

2025-05-09 bec7efb74cb9350dc720fb1ea641f06d7316b4dc

 src/views/wel/components/statistics.vue

@@ -3,13 +3,13 @@
    <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 class="grid-container1" >
      <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,35 +20,6 @@
          </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">
          <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">
          <!-- :class="`status-${statusIndex}`" -->
          <div
            v-for="(status, statusIndex) in newtitleData[item].status_map"
            :key="statusIndex"
@@ -71,6 +42,40 @@
        </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">
            <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>
          </div>
        </div>
      </div>
    </div> -->
  
  </div>
</template>

@@ -85,9 +90,53 @@
import titleImg6 from '@/assets/images/workbench/st9.png';
import { getStatics } from '@/api/home/index';
const store = useStore();
Object.key;
// Object.key;
// 运维人员:1912328766238597121
// 政企专员：1912467025014923265
const refresh=()=>{
  getStaticsList()
}
const jumppage=()=>{
  console.log('跳转');
  
}
const userInfo = computed(() => store.getters.userInfo);
console.log('userInfo', userInfo.value.role_id);
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: '机巢',
@@ -120,18 +169,15 @@
  4: '作业中',
  '-1': '离线中',
};
// 流量 状态 0充足，1=流量到期，2=不足
const flowStatus = {
  0: '流量无忧',
  1: '流量到期',
  2: '流量不足',
};
// "监控状态 1=在线，0=离线"
const monitorStatus = {
  0: '离线中',
  1: '在线中',
};
// 机巢保险  1=保险，0=未保险
const insureStatus = {
  0: '临近到期',
  1: '正常期限',
@@ -194,7 +240,7 @@
const getStaticsList = () => {
  getStatics(userInfo.value.detail.areaCode).then(res => {
    newtitleData.value = res.data.data;
    console.log('设备', newtitleData.value);
    // console.log('设备', newtitleData.value);
  });
};

@@ -204,52 +250,7 @@
  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();
});
@@ -257,7 +258,7 @@

<style scoped lang="scss">
.statistics {
  // height: 174px;
  min-height: 174px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin-bottom: 10px;
@@ -272,6 +273,8 @@
      span {
        margin-right: 4px;
      }
      img{
      cursor: pointer;}
    }
    .arrow {
      cursor: pointer;
@@ -280,7 +283,7 @@
  .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;
@@ -313,7 +316,7 @@
    }
    .status-list {
      display: grid;

      margin-left: 5px;
      .status-item {
        display: flex;
        align-items: center;