| | |
| | | > |
| | | <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"> |
| | |
| | | </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 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'; |
| | |
| | | 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 => { |
| | |
| | | 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; |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | background-size: contain; |
| | | img{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | |
| | | .content-wrapper { |