feat:待办事项

张含笑

2025-05-28 5cbb0ee1d4b60b08f931c47de60e193bdb5d8357

feat:待办事项

 src/assets/images/workbench/db1.png

 src/assets/images/workbench/db2.png

 src/assets/images/workbench/db3.png

 src/assets/images/workbench/db4.png

 src/assets/images/workbench/db5.png

 src/views/wel/components/backlog.vue

@@ -1,9 +1,25 @@
<template>
  <div class="bocklogBox">
    <div class="block">
      <div class="title">待办事项</div>
      <div class="titleBox">
        <div class="title">待办事项</div>
        <div class="rightTab">
          <div
            class="titleItem"
            :class="item === checked ? 'activeItem' : ''"
            v-for="(item, index) in titleList"
            :key="index"
            @click="titleClick(item, index)"
          >
            <div>
              {{ item }}
              <div class="dots">{{checked==0?sjTotal: zfTotal}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="todo-items" v-if="todos.length>0">
      <div class="todo-items" v-if="todos.length > 0" v-loading="loading">
        <div
          v-for="(item, index) in todos"
          :key="index"
@@ -13,7 +29,7 @@
        >
          <div
            class="status-indicator"
            :style="{ backgroundColor: getStatusColor(item.status) }"
            :style="{ backgroundImage: getStatusBackground(item.status) }"
          ></div>

          <div class="content-wrapper">
@@ -23,6 +39,7 @@
                  ? zfstatusMap[item.status]
                  : statusMap[item.status]
              }}</span>
              <span class="unread"></span>
              <span class="todo-text">{{ item.name }}</span>
            </div>

@@ -34,11 +51,11 @@
        </div>
      </div>
      <div v-else>
        <el-empty >
                <template #description>
                    <span class="custom-text">暂无数据</span>
                </template>
            </el-empty>
        <el-empty>
          <template #description>
            <span class="custom-text">暂无数据</span>
          </template>
        </el-empty>
      </div>
    </div>
  </div>
@@ -46,13 +63,27 @@

<script setup>
import st7 from '@/assets/images/workbench/st7.png';
import db1 from '@/assets/images/workbench/db1.png';
import db2 from '@/assets/images/workbench/db2.png';
import db3 from '@/assets/images/workbench/db3.png';
import db4 from '@/assets/images/workbench/db4.png';
import db5 from '@/assets/images/workbench/db5.png';
import { getdaiban } from '@/api/home/index';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const zfTotal = ref(0)
const sjTotal = ref(0)
const router = useRouter();
const store = useStore();
const permission = computed(() => store.getters.permission);
// console.log('uuuuu', permission.value);
const checked = ref('事件工单');
const titleList = ref(['事件工单', '智飞工单']);
const titleClick = (item, index) => {
  checked.value = item;
};

const userInfo = computed(() => store.getters.userInfo);
const todos = ref([]);
const loading = ref(false);
@@ -62,18 +93,36 @@
  3: '处理中',
};
const statusMapColor = {
  0: { color: '#FF7411', background: '#FF7411', borderLeftColor: '#FF7411' },
  2: { color: '#FF472F', background: '#FF472F', borderLeftColor: '#FF472F' },
  3: { color: '#FFC300', background: '#FFC300', borderLeftColor: '#FFC300' },
  0: { color: '#FF7411', backgroundImage: db3, borderLeftColor: '#FF7411' },
  2: { color: '#FF472F', backgroundImage: db1, borderLeftColor: '#FF472F' },
  3: { color: '#FFC300', backgroundImage: db4, borderLeftColor: '#FFC300' },
};
const zfstatusMap = {
  1: '待审核',
};
const zfstatusMapColor = {
  1: { color: '#FF472F', background: '#FF472F', borderLeftColor: '#FF472F' },
  1: { color: '#FF472F', backgroundImage: db2, borderLeftColor: '#FF472F' },
};
// 根据状态获取图标
const getStatusBackground = statusIndex => {
  if (
    (permission.value.device_statistics_six === true &&
      permission.value.device_statistics_four === true) ||
    permission.value.device_statistics_six === true
  ) {
    const style = zfstatusMapColor[statusIndex];
    return style ? `url(${style.backgroundImage})` : 'none';
  } else {
    const style = statusMapColor[statusIndex];
    return style ? `url(${style.backgroundImage})` : 'none';
  }
};
const getStatusStyle = statusIndex => {
  if (permission.value.o_and_m_p_jump === true) {
  if (
    (permission.value.device_statistics_six === true &&
      permission.value.device_statistics_four === true) ||
    permission.value.device_statistics_six === true
  ) {
    const style = zfstatusMapColor[statusIndex] || {
      color: '#999',
      borderLeftColor: '#999',
@@ -95,61 +144,84 @@
};
// 获取状态对应的文字颜色
const getStatusColor = statusIndex => {
  if (permission.value.o_and_m_p_jump === true) {
  if (
    (permission.value.device_statistics_six === true &&
      permission.value.device_statistics_four === true) ||
    permission.value.device_statistics_six === true
  ) {
    return zfstatusMapColor[statusIndex]?.color || '#999';
  } else {
    return statusMapColor[statusIndex]?.color || '#999';
  }
};
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 isDataReady = computed(() => {
  return userInfo.value.detail?.areaCode && permission.value.o_and_m_p_jump;
});
const autoFetchData = () => {
  if (isDataReady.value) {
    getListMatter();
  //  console.log('permission.value', permission.value);
  if (
    (permission.value.device_statistics_six === true &&
      permission.value.device_statistics_four === true) ||
    permission.value.device_statistics_six === true
  ) {
    loading.value = true;
    // 0是智飞工单  运维
    const res = await getdaiban(0, userInfo.value.detail.areaCode);
    todos.value = res.data.data || [];
    zfTotal.value = todos.value.length
        sjTotal.value = todos.value.length
    // console.log('todos.value', todos.value);

    loading.value = false;
  } else if (
  
    // 1是事件工单
    permission.value.device_statistics_four === true &&
    permission.value.device_statistics_six !== true
  ) {
    loading.value = true;
    const res = await getdaiban(1, userInfo.value.detail.areaCode);
    todos.value = res.data.data || [];
    console.log('todos.value1', todos.value);
    loading.value = false;
  }
};
// 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(),
  () => [
    userInfo.value.detail?.areaCode,
    permission.value.device_statistics_four,
    permission.value.device_statistics_six,
  ],
  () => getListMatter(),
  { immediate: true }
);

const jumporder = val => {
  if (permission.value.o_and_m_p_jump === true) {
    const id = val.id;
    router.push({
      path: `/tickets/orderLog`,
      query: {
        id,
      },
    });
  } else {
    const orderNumber = val.event_num;
    router.push({
      path: `/tickets/ticket`,
      query: {
        orderNumber,
      },
    });
  }
  // if (permission.value.o_and_m_p_jump === true) {
  //   const id = val.id;
  //   router.push({
  //     path: `/tickets/orderLog`,
  //     query: {
  //       id,
  //     },
  //   });
  // } else {
  //   const orderNumber = val.event_num;
  //   router.push({
  //     path: `/tickets/ticket`,
  //     query: {
  //       orderNumber,
  //     },
  //   });
  // }
};
onMounted(() => {
  autoFetchData();
  getListMatter();
});
</script>

@@ -163,20 +235,57 @@
  border: 2px solid #ffffff;
  .block {
    margin: 11px 21px 13px 22px;
    .titleBox {
      display: flex;
      justify-content: space-between;
    }
    .title {
      font-family: 'Source Han Sans CN';
      font-weight: bold;
      font-size: 16px;
      color: #363636;
    }

    .rightTab {
      display: flex;
      text-align: center;
      padding-right: 10px;
      .titleItem {
        position: relative;
        font-weight: 400;
        font-size: 14px;
        color: #7c8091;
        margin-left: 18px;
        cursor: pointer;
      }
      .activeItem {
        border-radius: 0px 0px 0px 0px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #1c5cff;
        border-bottom: 2px solid #1c5cff;
      }
      .dots {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #366fff;
        color: #fff;
        font-size: 10px;
        position: absolute;
        top: -10px;
        right: -9px;
        padding: 1px;
      }
    }
    .todo-items {
      display: grid;
      gap: 0.6rem;
      margin-top: 10px;
      height: 250px;
      overflow-y: scroll;
    }

    .todo-item {
      margin: 6px 0;
      display: flex;
      align-items: center;
      cursor: pointer;
@@ -192,11 +301,11 @@
      }

      .status-indicator {
        margin-left: 18px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-left: 3px;
        width: 16px;
        height: 16px;
        // border-radius: 50%;
        // flex-shrink: 0;
      }

      .content-wrapper {
@@ -204,25 +313,32 @@
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        // gap: 1rem;
      }

      .main-content {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        // gap: 0.8rem;

        .status-tag {
          font-weight: 400;
          font-size: 14px;

          padding: 0.3rem 0.5rem;
          margin-left: 2px;
          // padding: 0.3rem 0;
          border-radius: 12px;
        }

        .todo-text {
          font-size: 14px;
          color: #343434;
        }
        .unread {
          width: 5px;
          height: 5px;
          background: #1c5cff;
          border-radius: 50%;
          margin: 0 4px;
        }
      }

@@ -234,39 +350,14 @@
        .todo-date {
          color: #666;
          font-size: 0.9rem;
          margin-left: 2px;
        }
      }
    }

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

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

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

      .status-indicator {
        background: #ffc300;
      }
    }
  }
  .custom-text {
  font-size: 14px;
color: #7C8091;
    font-size: 14px;
    color: #7c8091;
  }
}
</style>

 src/views/wel/components/statistics.vue

@@ -253,7 +253,7 @@

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) {
      const { move_list, monitor_list, ...filteredData } = res.data.data;