From ed7e34dfde7797eb983a2ac9541fbd01ac3d8c3a Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Thu, 15 May 2025 10:16:05 +0800
Subject: [PATCH] feat:设备统计样式调整
---
src/views/wel/components/backlog.vue | 223 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 133 insertions(+), 90 deletions(-)
diff --git a/src/views/wel/components/backlog.vue b/src/views/wel/components/backlog.vue
index dd9a1a5..965cd8c 100644
--- a/src/views/wel/components/backlog.vue
+++ b/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}`"
- @click="jumporder()"
+ :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>
@@ -31,46 +38,112 @@
</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=()=>{
- console.log('tiao');
-
-}
+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>
@@ -91,15 +164,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;
@@ -148,70 +221,40 @@
.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;
- // }
- // }
}
</style>
--
Gitblit v1.9.3