Merge branch 'test' of http://139.196.74.78:10010/r/drone/drone-web-manage ...

rain

2025-05-13 e624de57bbe192f32a0ab2c7aff2bbfec32f9714

 src/views/wel/components/statistics.vue

@@ -20,15 +20,24 @@
          </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>
@@ -37,32 +46,30 @@
</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'
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.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()
}
  getStaticsList();
};
const jumppage = () => {
  router.push({
      path: '/device/index',
   })
    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 titleData = ref([
  {
    img: titleImg1,
@@ -96,7 +103,7 @@
    leisure: 0,
    offline: 0,
  },
])
]);
const test = {
  no_move_list: {
    name: '机巢',
@@ -123,25 +130,25 @@
    name: '机巢保险',
    img: titleImg6,
  },
}
};
const statusSelect = {
  0: '空闲中',
  4: '作业中',
  '-1': '离线中',
}
};
const flowStatus = {
  0: '流量无忧',
  1: '流量到期',
  2: '流量不足',
}
};
const monitorStatus = {
  0: '离线中',
  1: '在线中',
}
};
const insureStatus = {
  0: '临近到期',
  1: '正常期限',
}
};
// 样式配置对象
const statusStyles = {
  机巢保险: {
@@ -164,65 +171,68 @@
    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 => {
  console.log('userInfo.value.detail.areaCode',permission.value);
    // console.log('userInfo.value.detail.areaCode',permission.value);
    if (permission.value?.device_statistics_six) {
      newtitleData.value = res.data.data
      return
      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]
      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">
@@ -244,6 +254,10 @@

      span {
        margin-right: 4px;
        font-weight: bold;
        font-size: 16px;
        color: #363636;
        font-family: 'YouSheBiaoTiHei';
      }

      img {
@@ -286,6 +300,9 @@
          font-weight: bold;
          font-size: 36px;
          color: #363636;
          display: inline-block;
          transform: skewX(-5deg);
          font-family: 'YouSheBiaoTiHei';
        }

        span {
@@ -383,6 +400,9 @@
          font-weight: bold;
          font-size: 36px;
          color: #363636;
          display: inline-block;
          transform: skewX(-5deg);
          font-family: 'YouSheBiaoTiHei';
        }

        span {