| | |
| | | > |
| | | <div> |
| | | {{ item.name }} |
| | | <div class="dots">{{ item.number >=100 ?'99+' : item.number}}</div> |
| | | <div class="dots" :class="item.number >= 100 ? 'dots1':''">{{ item.number >= 100 ? '99+' : item.number }}</div> |
| | | <!-- <div class="dots">99+</div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | @click="jumporder(item)" |
| | | > |
| | | <div |
| | | class="status-indicator" |
| | | :style="{ backgroundImage: getStatusBackground(item.status) }" |
| | | ></div> |
| | | class="status-indicator" |
| | | ><img :src="getStatus(item.status)" alt=""></div> |
| | | |
| | | <div class="content-wrapper"> |
| | | <div class="main-content"> |
| | | <span class="status-tag" :style="{ color: getStatusColor(item.status) }">{{ |
| | | checked == '智飞工单' ? zfstatusMap[item.status] : statusMap[item.status] |
| | | }}</span> |
| | | <span class="reads" :class="item.is_read === 0 ? 'unread' :''"></span> |
| | | <span class="reads" :class="item.is_read === 0 ? 'unread' : ''"></span> |
| | | <span class="todo-text">{{ item.name }}</span> |
| | | </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 { |
| | | |
| | | getOrderCountApi, |
| | | addOrderRecordApi, |
| | | getOrderOrEventApi, |
| | | } from '@/api/home/index'; |
| | | 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 db4 from '@/assets/images/workbench/db4.svg'; |
| | | import db5 from '@/assets/images/workbench/db5.svg'; |
| | | import { getOrderCountApi, addOrderRecordApi, getOrderOrEventApi } from '@/api/home/index'; |
| | | import { onMounted } from 'vue'; |
| | | import { useRouter } from 'vue-router'; |
| | | import { useStore } from 'vuex'; |
| | |
| | | 3: { color: '#FF472F', backgroundImage: db2, borderLeftColor: '#FF472F' }, |
| | | }; |
| | | // 根据状态获取图标 |
| | | const getStatusBackground = statusIndex => { |
| | | // 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]; |
| | | return style ? `url(${style.backgroundImage})` : 'none'; |
| | | return style ? style.backgroundImage : ''; |
| | | } else { |
| | | const style = statusMapColor[statusIndex]; |
| | | return style ? `url(${style.backgroundImage})` : 'none'; |
| | | return style ? style.backgroundImage : ''; |
| | | } |
| | | }; |
| | | const getStatusStyle = statusIndex => { |
| | |
| | | const jumporder = val => { |
| | | if (checked.value === '智飞工单') { |
| | | const id = val.id; |
| | | getaddOrderRecord(id) |
| | | getaddOrderRecord(id); |
| | | router.push({ |
| | | path: `/tickets/orderLog`, |
| | | query: { |
| | |
| | | }, |
| | | }); |
| | | } else { |
| | | |
| | | getaddOrderRecord(val.id) |
| | | getaddOrderRecord(val.id); |
| | | const orderNumber = val.event_num; |
| | | router.push({ |
| | | path: `/tickets/ticket`, |
| | |
| | | } |
| | | }; |
| | | // 标记事件工单或智飞工单已读 |
| | | const getaddOrderRecord = async (id) => { |
| | | const ticketId = id |
| | | const getaddOrderRecord = async id => { |
| | | const ticketId = id; |
| | | if (checked.value === '事件工单') { |
| | | loading.value = true; |
| | | const type = 1; |
| | | const res = await addOrderRecordApi(type,ticketId); |
| | | const res = await addOrderRecordApi(type, ticketId); |
| | | } else if (checked.value === '智飞工单') { |
| | | loading.value = true; |
| | | const type = 2; |
| | | const res = await addOrderRecordApi(type,ticketId); |
| | | const res = await addOrderRecordApi(type, ticketId); |
| | | } |
| | | }; |
| | | // 获取事件工单和智飞工单的数量 |
| | | const getOrderCount = async () => { |
| | | const res = await getOrderCountApi(userInfo.value.detail.areaCode); |
| | | const data = res.data.data |
| | | const data = res.data.data; |
| | | titleList.value.forEach(item => { |
| | | |
| | | if(data[item.label] !== undefined){ |
| | | item.number = data[item.label] |
| | | } |
| | | |
| | | if (data[item.label] !== undefined) { |
| | | item.number = data[item.label]; |
| | | } |
| | | }); |
| | | |
| | | }; |
| | | // 获取事件工单或者智飞工单的信息 |
| | | const getListMatter = async () => { |
| | |
| | | loading.value = false; |
| | | } |
| | | }; |
| | | |
| | | |
| | | |
| | | |
| | | onMounted(() => { |
| | | getListMatter(); |
| | |
| | | width: 17px; |
| | | height: 17px; |
| | | border-radius: 50%; |
| | | background: #366fff; |
| | | background: #366fff; |
| | | color: #fff; |
| | | font-size: 9px; |
| | | position: absolute; |
| | | top: -10px; |
| | | right: -13px; |
| | | padding: 1px; |
| | | line-height: 17px; |
| | | } |
| | | .dots1 { |
| | | width: 17px; |
| | | height: 17px; |
| | | border-radius: 50%; |
| | | background: none !important; |
| | | color: #366fff !important; |
| | | font-size: 9px; |
| | | position: absolute; |
| | | top: -10px; |
| | |
| | | margin-left: 3px; |
| | | width: 1.6rem; |
| | | height: 1.6rem; |
| | | // border-radius: 50%; |
| | | // flex-shrink: 0; |
| | | img{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | |
| | | .content-wrapper { |
| | |
| | | border-radius: 50%; |
| | | margin: 0 4px; |
| | | } |
| | | .reads{ |
| | | width: 5px; |
| | | .reads { |
| | | width: 5px; |
| | | height: 5px; |
| | | background: transparent ; |
| | | background: transparent; |
| | | border-radius: 50%; |
| | | margin: 0 4px; |
| | | } |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 42px; |
| | | img{ |
| | | width: 15px; |
| | | height: 15px;} |
| | | img { |
| | | width: 15px; |
| | | height: 15px; |
| | | } |
| | | .todo-date { |
| | | font-weight: 400; |
| | | font-size: 14px; |