无人机管理后台前端(已迁走)
rain
2025-06-12 0082fa417fb2af9add3406bf05ab3e3e45890c34
src/views/wel/components/backlog.vue
@@ -13,7 +13,8 @@
          >
            <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>
@@ -28,16 +29,15 @@
          @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>
@@ -60,18 +60,13 @@
</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';
@@ -124,13 +119,22 @@
  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 => {
@@ -166,7 +170,7 @@
const jumporder = val => {
  if (checked.value === '智飞工单') {
    const id = val.id;
    getaddOrderRecord(id)
    getaddOrderRecord(id);
    router.push({
      path: `/tickets/orderLog`,
      query: {
@@ -174,8 +178,7 @@
      },
    });
  } else {
   getaddOrderRecord(val.id)
    getaddOrderRecord(val.id);
    const orderNumber = val.event_num;
    router.push({
      path: `/tickets/ticket`,
@@ -186,30 +189,27 @@
  }
};
// 标记事件工单或智飞工单已读
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 () => {
@@ -227,9 +227,6 @@
    loading.value = false;
  }
};
onMounted(() => {
  getListMatter();
@@ -281,8 +278,21 @@
        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;
@@ -317,8 +327,10 @@
        margin-left: 3px;
        width: 1.6rem;
        height: 1.6rem;
        // border-radius: 50%;
        // flex-shrink: 0;
        img{
        width: 100%;
        height: 100%;
        }
      }
      .content-wrapper {
@@ -354,10 +366,10 @@
          border-radius: 50%;
          margin: 0 4px;
        }
        .reads{
         width: 5px;
        .reads {
          width: 5px;
          height: 5px;
          background: transparent ;
          background: transparent;
          border-radius: 50%;
          margin: 0 4px;
        }
@@ -367,9 +379,10 @@
        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;