个人工作台待办事项，综合统计分析

张含笑

2025-05-12 2ce9bd5adcd6ffd054f7c5148ab480b36ff6f56a

 src/views/wel/components/backlog.vue

@@ -8,20 +8,27 @@
          v-for="(item, index) in todos"
          :key="index"
          class="todo-item"
          :class="`status-${item.status}`"
          :style="getStatusStyle(item.status)"
          @click="jumporder(item)"
        >
          <div class="status-indicator"></div>
          <div
            class="status-indicator"
            :style="{ backgroundColor: getStatusColor(item.status) }"
          ></div>

          <div class="content-wrapper">
            <div class="main-content">
              <span class="status-tag">{{ statusMap[item.status] }}</span>
              <span class="todo-text">{{ item.event_name || item.dept_name}}</span>
              <span class="status-tag" :style="{ color: getStatusColor(item.status) }">{{
                permission.o_and_m_p_jump === true
                  ? zfstatusMap[item.status]
                  : statusMap[item.status]
              }}</span>
              <span class="todo-text">{{ item.name }}</span>
            </div>

            <div class="action-area">
              <img :src="st7" alt="" />
              <span class="todo-date">{{ item.job_create_time?.slice(0, 10) || item.begin_time?.slice(0, 10)}}</span>
              <span class="todo-date">{{ item.date?.slice(0, 10).replace(/-/g, '.') }}</span>
            </div>
          </div>
        </div>
@@ -32,47 +39,86 @@

<script setup>
import st7 from '@/assets/images/workbench/st7.png';
import { getList } from '@/api/tickets/ticket';
import { getList as getListLog } from '@/api/tickets/orderLog';

import { getdaiban } from '@/api/home/index';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();
const permission = computed(() => store.getters.permission);
console.log(permission.value.o_and_m_p_jump, 'permission');
const todos = ref([]);
const jumporder = val => {
  console.log('tiao', val);

  console.log('orderNumber', orderNumber);
const statusMap = {
  0: '待处理',
  2: '待审核',
  3: '处理中',
};
const statusMapColor = {
  0: { color: '#FF7411', background: '#FF7411', borderLeftColor: '#FF7411' },
  2: { color: '#FF472F', background: '#FF472F', borderLeftColor: '#FF472F' },
  3: { color: '#FFC300', background: '#FFC300', borderLeftColor: '#FFC300' },
};
const zfstatusMap = {
  1: '待审核',
};
const zfstatusMapColor = {
  1: { color: '#FF472F', background: '#FF472F', borderLeftColor: '#FF472F' },
};
const getStatusStyle = statusIndex => {
  if (permission.value.o_and_m_p_jump === true) {
    const orderNumber = val.job_info_num;
    const style = zfstatusMapColor[statusIndex] || {
      color: '#999',
      borderLeftColor: '#999',
    };
    return {
      color: style.color,
      borderLeft: `3px solid ${style.borderLeftColor}`,
    };
  } else {
    const style = statusMapColor[statusIndex] || {
      color: '#999',
      borderLeftColor: '#999',
    };
    return {
      color: style.color,
      borderLeft: `3px solid ${style.borderLeftColor}`,
    };
  }
};
// 获取状态对应的文字颜色
const getStatusColor = statusIndex => {
  if (permission.value.o_and_m_p_jump === true) {
    return zfstatusMapColor[statusIndex]?.color || '#999';
  } else {
    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);
    todos.value = res.data.data?.slice(0, 5);
  } else {
    const res = await getdaiban(1);
    todos.value = res.data.data?.slice(0, 5);
  }
};
const jumporder = val => {
  if (permission.value.o_and_m_p_jump === true) {
    const id = val.id;
    router.push({
      path: `/tickets/orderLog?orderNumber=${orderNumber}`,
      path: `/tickets/orderLog?id=${id}`,
      query: {
        id: id,
      },
    });
  } else {
    const orderNumber = val.event_num;
    router.push({
      path: `/tickets/ticket?orderNumber=${orderNumber}`,
    });
  }
};
const statusMap = {
  2: '待审核',
  3: '处理中',
  0: '待处理',
  4: '已完成',
};
const getListMatter = async () => {
  if (permission.value.o_and_m_p_jump === true) {
    const res = await getListLog({});
    console.log('2222', res.data.data.records);

    todos.value = res.data.data.records?.slice(0, 5);
  } else {
    const res = await getList({});
    todos.value = res.data.data.records?.slice(0, 5);
  }
};
onMounted(() => {
@@ -98,7 +144,7 @@

    .todo-items {
      display: grid;
      gap: 0.8rem;
      gap: 0.6rem;
      margin-top: 10px;
    }

@@ -165,58 +211,30 @@
    }

    // 状态颜色方案
    .status-2 {
      border-left-color: #ff6560;
      color: #ff6560;
    .status-0 {
      border-left-color: #ff7411;
      color: #ff7411;
      .status-indicator {
        background: #ff6560;
        background: #ff7411;
      }
    }

    .status-0 {
      border-left-color: #5d77fb;
      color: #5d77fb;
    .status-2 {
      border-left-color: #ff472f;
      color: #ff472f;
      .status-indicator {
        background: #5d77fb;
        background: #ff472f;
      }
    }

    .status-3 {
      border-left-color: #ff8b26;
      color: #ff8b26;
      border-left-color: #ffc300;
      color: #ffc300;

      .status-indicator {
        background: #ff8b26;
        background: #ffc300;
      }
    }
  }

  //   @media (max-width: 768px) {
  //     .todo-list-container {
  //       padding: 1rem;

  //       .content-wrapper {
  //         flex-direction: column;
  //         align-items: flex-start !important;
  //         gap: 0.5rem !important;
  //       }

  //       .action-area {
  //         width: 100%;
  //         justify-content: space-between;
  //       }
  //     }
  //   }

  //   @media (max-width: 480px) {
  //     .main-content {
  //       flex-direction: column;
  //       align-items: flex-start !important;
  //     }

  //     .status-tag {
  //       margin-bottom: 0.3rem;
  //     }
  //   }
}
</style>