Merge branch 'master' into jiangwu

shuishen

2025-05-19 2dfc8dc4bcd3d3cd4aed1b6054e073e140eba9c8

 src/views/wel/components/backlog.vue

@@ -3,69 +3,154 @@
    <div class="block">
      <div class="title">待办事项</div>

      <div class="todo-items">
      <div class="todo-items" v-if="todos.length>0">
        <div
          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.title }}</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.date }}</span>
              <img :src="st7" alt="" />
              <span class="todo-date">{{ item.date?.slice(0, 10).replace(/-/g, '.') }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <el-empty >
            <template #description>
               <span class="custom-text">暂无数据</span>
            </template>
         </el-empty>
      </div>
    </div>
  </div>
</template>

<script setup>
import st7 from '@/assets/images/workbench/st7.png'
// 状态显示映射
import st7 from '@/assets/images/workbench/st7.png';
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);
const userInfo = computed(() => store.getters.userInfo);
const todos = ref([]);
const loading = ref(false);
const statusMap = {
  pending: '待审核',
  processing: '处理中',
  todo: '待处理',
  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 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 () => {
  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();
  }
};
watch(
  () => [userInfo.value.detail?.areaCode, permission.value.o_and_m_p_jump],
  () => autoFetchData(),
  { immediate: true }
);

// 待办事项数据
const todos = ref([
  {
    status: 'pending',
    title: '发现暴露垃圾事件',
    date: '2025.03.26',
  },
  {
    status: 'todo',
    title: '发现暴露垃圾事件',
    date: '2025.03.26',
  },
  {
    status: 'processing',
    title: '发现暴露垃圾事件',
    date: '2025.03.26',
  },
  {
    status: 'pending',
    title: '发现暴露垃圾事件',
    date: '2025.03.26',
  },
  {
    status: 'todo',
    title: '发现暴露垃圾事件',
    date: '2025.03.26',
  },
]);
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,
      },
    });
  }
};
onMounted(() => {
  autoFetchData();
});
</script>

<style lang="scss" scoped>
@@ -79,6 +164,7 @@
  .block {
    margin: 11px 21px 13px 22px;
    .title {
      font-family: 'Source Han Sans CN';
      font-weight: bold;
      font-size: 16px;
      color: #363636;
@@ -86,15 +172,15 @@

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

    .todo-item {
      display: flex;
      align-items: center;

     background: #FFFFFF;
      cursor: pointer;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0px 2px 4px 0px rgba(173, 173, 173, 0.18);
      transition: all 0.2s ease;
@@ -143,70 +229,44 @@
      .action-area {
        display: flex;
        align-items: center;
     margin-right: 42px;
        margin-right: 42px;

        .todo-date {
          color: #666;
          font-size: 0.9rem;
        }

      
      }
    }

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

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

    .status-processing {
      border-left-color: #FF8B26;
      color: #FF8B26;
    .status-3 {
      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;
  //     }
  //   }
  .custom-text {
  font-size: 14px;
color: #7C8091;
  }
}
</style>