feat:工作台调整

张含笑

2025-05-14 e04d93114e3646451aa49fc02260eb992beafc9a

feat:工作台调整

 src/views/wel/components/statistics.vue

@@ -9,7 +9,10 @@
        <img src="/src/assets/images/workbench/st2.png" alt="" />
      </div>
    </div>
    <div class="grid-container" v-if="permission.value?.device_statistics_four">
    <div
      class="grid-container"
      v-if="permission.device_statistics_four && !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" />
@@ -42,7 +45,13 @@
        </div>
      </div>
    </div>
    <div class="grid-container1" v-else>
    <div
      class="grid-container1"
      v-if="
        (permission.device_statistics_six && permission.device_statistics_four) ||
        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" />
@@ -83,9 +92,9 @@
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 titleImg3 from '@/assets/images/workbench/st8.png';
import titleImg4 from '@/assets/images/workbench/st5.png';
import titleImg5 from '@/assets/images/workbench/st6.png';
import titleImg6 from '@/assets/images/workbench/st9.png';
import { getStatics } from '@/api/home/index';
import { useRouter } from 'vue-router';
@@ -132,8 +141,8 @@
  },
};
const statusSelect = {
  0: '空闲中',
  4: '作业中',
  0: '空闲中',
  '-1': '离线中',
};
const flowStatus = {
@@ -145,9 +154,14 @@
  0: '离线中',
  1: '在线中',
};

const insureStatus = {
  0: '临近到期',
  1: '正常期限',
};
const moveListStatus = {
  '-1': '离线中',
  4: '在线中',
};
// 样式配置对象
const statusStyles = {
@@ -165,6 +179,10 @@
    0: { class: 'offline', color: '#bababa', background: '#bababa' },
    1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
  },
  移动机巢: {
    '-1': { class: 'offline', color: '#bababa', background: '#bababa' },
    4: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
  },
  // 默认样式配置
  default: {
    0: { class: 'warning', color: '#1b94ff', background: '#1b94ff' },
@@ -172,6 +190,20 @@
    '-1': { class: 'success', color: '#bababa', background: '#bababa' },
  },
};

// const list = [
//   {
//     key:'',
//     list: [
//       {name: '空闲',value: 0,key:'7'},
//       {name: '空闲',value: 0,key:'7'},
//       {name: '空闲',value: 0,key:'7'},
//     ]
//   }
// ]



const getStatusStyle = (name, statusIndex) => {
  const styleConfig = statusStyles[name] || statusStyles.default;
  return styleConfig[statusIndex]?.class || '';
@@ -193,15 +225,32 @@
      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 => {
    // console.log('permission.value',permission.value);
    console.log('permission.value', permission.value);
    console.log('设备', res.data.data);

    if (permission.value?.device_statistics_six) {
      newtitleData.value = res.data.data;
      // const px = {
      // '4':0,
      //   '0':1,
      //   '-1':2
      // }
      // const status_map = newtitleData.value.plant_list.status_map
      // newtitleData.value.plant_list.status_map = Object.entries(status_map).sort((a,b) => {
      //   return px[a[0]] - px[b[0]]
      // })
      // console.log(Object.entries(status_map).sort((a,b) => {
      //   return px[a[0]] - px[b[0]]
      // }));
      
      return;
    }

@@ -270,9 +319,8 @@

    .device-card {
      display: flex;
      flex-direction: column;
      align-items: center;

      margin-top: 30px;
      .device-title {
        display: flex;
        align-items: center;

 src/views/wel/index.vue

@@ -254,21 +254,22 @@
        fontWeight: '600',
      },
      top: '40%',
      left: '53%',
      left: '48%',
      textAlign: 'center', // 文本对齐
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['40%', '55%'],
        radius: ['50%', '65%'],
        avoidLabelOverlap: true,
        left: '10%',
        // left: '10%',
        label: {
          formatter: params => {
            return `{a|${params.name}}: ${params.data.rate}%`;
          },
          alignTo: 'labelLine',
          overflow: 'truncate',
          rich: {
            a: {
              color: 'rgba(28, 31, 35, 0.80)',
@@ -283,6 +284,8 @@
        },
        labelLine: {
          show: true,
          length: 5, // 调整引导线长度
          length2: 15,
          lineStyle: {
            cap: 'round',
          },
@@ -566,6 +569,7 @@
          .workOrder {
            margin-top: 21px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #dfdfdf;
            .card-group {
              width: 40%;