feat:待办事项添加监听

张含笑

2025-05-14 e2264ddf3d031004194ebc787ac8c416573c6be2

feat:待办事项添加监听

 src/views/wel/components/backlog.vue

@@ -39,7 +39,6 @@

<script setup>
import st7 from '@/assets/images/workbench/st7.png';

import { getdaiban } from '@/api/home/index';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
@@ -49,7 +48,7 @@
const permission = computed(() => store.getters.permission);
const userInfo = computed(() => store.getters.userInfo)
const todos = ref([]);

const loading = ref(false);
const statusMap = {
  0: '待处理',
  2: '待审核',
@@ -95,19 +94,32 @@
    return statusMapColor[statusIndex]?.color || '#999';
  }
};
const getListMatter = async () => {
  // console.log('permission.value.o_and_m_p_jump', permission.value.o_and_m_p_jump);

  if (permission.value.o_and_m_p_jump === true) {
    const res = await getdaiban(0,userInfo.value.detail.areaCode);
    todos.value = res.data.data?.slice(0, 5);
 
  } else {
    const res = await getdaiban(1,userInfo.value.detail.areaCode);
    todos.value = res.data.data?.slice(0, 5);

const isDataReady = computed(() => {
  return userInfo.value.detail?.areaCode && permission.value.o_and_m_p_jump;
});
const autoFetchData = () => {
  if (isDataReady.value) {
    getListMatter();
  }

};
watch(
  () => [userInfo.value.detail?.areaCode, permission.value.o_and_m_p_jump],
  () => autoFetchData(),
  { immediate: true }
);
const getListMatter = async () => {
  loading.value = true;
  try {
    if (permission.value.o_and_m_p_jump === true) {
      const res = await getdaiban(0, userInfo.value.detail.areaCode);
      todos.value = res.data.data?.slice(0, 5) || [];
      loading.value = false;
    } else {
      const res = await getdaiban(1, userInfo.value.detail.areaCode);
      todos.value = res.data.data?.slice(0, 5) || [];
      loading.value = false;
    }
  } catch (error) {}
};
const jumporder = val => {
  if (permission.value.o_and_m_p_jump === true) {
@@ -129,7 +141,7 @@
  }
};
onMounted(() => {
  getListMatter();
  autoFetchData();
});
</script>


 src/views/wel/components/statistics.vue

@@ -9,7 +9,40 @@
        <img src="/src/assets/images/workbench/st2.png" alt="" />
      </div>
    </div>
    <div class="grid-container1">
    <div class="grid-container" v-if="permission.value?.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" />
          <div class="itemcenter">
            <div>{{ test[item]?.name || '--' }}</div>
            <span class="shu">{{ newtitleData[item].total_num }}</span>
            <span>个</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
            >
          </div>
        </div>
      </div>
    </div>
    <div class="grid-container1" v-else>
      <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" />
@@ -70,40 +103,7 @@
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: '机巢',
@@ -173,24 +173,17 @@
  },
};
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) {
@@ -206,7 +199,7 @@
};
const getStaticsList = () => {
  getStatics(userInfo.value.detail.areaCode).then(res => {
    // console.log('userInfo.value.detail.areaCode',permission.value);
    // console.log('permission.value',permission.value);
    if (permission.value?.device_statistics_six) {
      newtitleData.value = res.data.data;
      return;
@@ -440,30 +433,6 @@
          // font-size: clamp(14px, 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;
        }
      }
    }