| | |
| | | <div> |
| | | {{ item.name }} |
| | | <div class="dots">{{ item.number >= 100 ? '99+' : item.number }}</div> |
| | | <!-- <div class="dots">99+</div> --> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="todo-items" v-if="todos.length > 0" v-loading="loading"> |
| | | <div class="todo-items" v-if="todos.length > 0" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.5)"> |
| | | <div v-for="(item, index) in todos" :key="index" class="todo-item" :style="getStatusStyle(item.status)" |
| | | @click="jumporder(item)"> |
| | | <div class="status-indicator"><img :src="getStatus(item.status)" alt=""></div> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import st7 from '@/assets/images/workbench/st7.svg' |
| | | |
| | | import db1 from '@/assets/images/workbench/db1.svg' |
| | | import db2 from '@/assets/images/workbench/db2.svg' |
| | | import db3 from '@/assets/images/workbench/db3.svg' |
| | |
| | | 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) |
| | | const checked = ref('事件工单') |
| | | const todosCache = reactive({ |
| | | '事件工单': [], |
| | | '智飞工单': [] |
| | | }) |
| | | const titleList = ref([ |
| | | { |
| | | label: 'event_order_count', |
| | |
| | | number: 0, |
| | | }, |
| | | ]) |
| | | const titleClick = (item, index) => { |
| | | checked.value = item.name |
| | | getListMatter() |
| | | } |
| | | |
| | | const titleClick = async (item, index) => { |
| | | checked.value = item.name |
| | | await getListMatter() |
| | | } |
| | | const userInfo = computed(() => store.getters.userInfo) |
| | | const todos = ref([]) |
| | | const loading = ref(false) |
| | |
| | | 2: { color: '#4200DD', backgroundImage: db5, borderLeftColor: '#4200DD' }, |
| | | 3: { color: '#FF472F', backgroundImage: db2, borderLeftColor: '#FF472F' }, |
| | | } |
| | | // 根据状态获取图标 |
| | | // const getStatusBackground = statusIndex => { |
| | | // if (checked.value === '智飞工单') { |
| | | // const style = zfstatusMapColor[statusIndex]; |
| | | // return style ? `url(${style.backgroundImage})` : 'none'; |
| | | // } else { |
| | | // const style = statusMapColor[statusIndex]; |
| | | // return style ? `url(${style.backgroundImage})` : 'none'; |
| | | // } |
| | | // }; |
| | | |
| | | const getStatus = statusIndex => { |
| | | if (checked.value === '智飞工单') { |
| | | const style = zfstatusMapColor[statusIndex] |
| | |
| | | if (checked.value === '智飞工单') { |
| | | const id = val.id |
| | | getaddOrderRecord(id) |
| | | router.push({ |
| | | router.replace({ |
| | | path: `/tickets/orderLog`, |
| | | query: { |
| | | id, |
| | |
| | | } else { |
| | | getaddOrderRecord(val.id) |
| | | const orderNumber = val.event_num |
| | | router.push({ |
| | | path: `/tickets/ticket`, |
| | | query: { |
| | | orderNumber, |
| | | }, |
| | | }) |
| | | router.replace({ |
| | | path: `/tickets/ticket`, |
| | | query: { orderNumber }, |
| | | }) |
| | | } |
| | | } |
| | | // 标记事件工单或智飞工单已读 |
| | |
| | | }) |
| | | } |
| | | // 获取事件工单或者智飞工单的信息 |
| | | |
| | | const getListMatter = async () => { |
| | | if (checked.value === '事件工单') { |
| | | loading.value = true |
| | | const type = 1 |
| | | const res = await getOrderOrEventApi(type, userInfo.value.detail.areaCode) |
| | | todos.value = res.data.data || [] |
| | | loading.value = true |
| | | const type = checked.value === '事件工单' ? 1 : 2 |
| | | |
| | | // 使用缓存数据 |
| | | if (todosCache[checked.value].length > 0) { |
| | | todos.value = todosCache[checked.value] |
| | | } |
| | | const todosParams = { |
| | | type:type, |
| | | area_code: userInfo.value.detail.areaCode, |
| | | } |
| | | try { |
| | | const res = await getOrderOrEventApi(todosParams) |
| | | const data = res.data.data || [] |
| | | todos.value = data.sort((a, b) => a.is_read - b.is_read) |
| | | todosCache[checked.value] = todos.value |
| | | } finally { |
| | | loading.value = false |
| | | // console.log('事件工单', todos.value); |
| | | } else if (checked.value === '智飞工单') { |
| | | loading.value = true |
| | | const type = 2 |
| | | const res = await getOrderOrEventApi(type, userInfo.value.detail.areaCode) |
| | | todos.value = res.data.data || [] |
| | | loading.value = false |
| | | // console.log('智飞工单', todos.value); |
| | | } |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getListMatter() |
| | | getOrderCount() |
| | |
| | | .bocklogBox { |
| | | width: 100%; |
| | | // height: 306px; |
| | | height: pxToVh(326); |
| | | height: pxToVh(316); |
| | | 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; |
| | |
| | | |
| | | .todo-items { |
| | | margin-top: 10px; |
| | | // height: 250px; |
| | | transition: opacity 0.3s ease; |
| | | height: pxToVh(250); |
| | | overflow-y: scroll; |
| | | &:empty { |
| | | display: none; |
| | | } |
| | | } |
| | | |
| | | .todo-item { |
| | | transition: |
| | | transform 0.2s ease, |
| | | box-shadow 0.2s ease, |
| | | opacity 0.3s ease; |
| | | margin: 6px 0; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | font-size: 14px; |
| | | color: #7c8091; |
| | | } |
| | | .el-empty { |
| | | transition: opacity 0.3s ease; |
| | | } |
| | | } |
| | | </style> |