<template>
|
<div class="bocklogBox">
|
<div class="block">
|
<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" v-loading="loading">
|
<div
|
v-for="(item, index) in todos"
|
:key="index"
|
class="todo-item"
|
:style="getStatusStyle(item.status)"
|
@click="jumporder(item)"
|
>
|
<div
|
class="status-indicator"
|
:style="{ backgroundImage: getStatusBackground(item.status) }"
|
></div>
|
|
<div class="content-wrapper">
|
<div class="main-content">
|
<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="unread"></span>
|
<span class="todo-text">{{ item.name }}</span>
|
</div>
|
|
<div class="action-area">
|
<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 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);
|
const statusMap = {
|
0: '待处理',
|
2: '待审核',
|
3: '处理中',
|
};
|
const statusMapColor = {
|
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', 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.device_statistics_six === true &&
|
permission.value.device_statistics_four === true) ||
|
permission.value.device_statistics_six === 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.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 () => {
|
// 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.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,
|
// },
|
// });
|
// }
|
};
|
onMounted(() => {
|
getListMatter();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.bocklogBox {
|
width: 100%;
|
height: 306px;
|
background: rgba(255, 255, 255, 0.41);
|
box-shadow: 0px 3px 4px -1px rgba(125, 125, 125, 0.25);
|
border-radius: 8px 8px 8px 8px;
|
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 {
|
margin-top: 10px;
|
height: 250px;
|
overflow-y: scroll;
|
}
|
|
.todo-item {
|
margin: 6px 0;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
background: #ffffff;
|
border-radius: 8px;
|
box-shadow: 0px 2px 4px 0px rgba(173, 173, 173, 0.18);
|
transition: all 0.2s ease;
|
border-left: 4px solid transparent;
|
height: 42px;
|
&:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
|
}
|
|
.status-indicator {
|
margin-left: 3px;
|
width: 16px;
|
height: 16px;
|
// border-radius: 50%;
|
// flex-shrink: 0;
|
}
|
|
.content-wrapper {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
// gap: 1rem;
|
}
|
|
.main-content {
|
display: flex;
|
align-items: center;
|
// gap: 0.8rem;
|
|
.status-tag {
|
font-weight: 400;
|
font-size: 14px;
|
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;
|
}
|
}
|
|
.action-area {
|
display: flex;
|
align-items: center;
|
margin-right: 42px;
|
|
.todo-date {
|
color: #666;
|
font-size: 0.9rem;
|
margin-left: 2px;
|
}
|
}
|
}
|
}
|
.custom-text {
|
font-size: 14px;
|
color: #7c8091;
|
}
|
}
|
</style>
|
