无人机管理后台前端(已迁走)
罗广辉
2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9
src/views/wel/components/backlog.vue
@@ -9,13 +9,13 @@
            <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>
@@ -49,7 +49,7 @@
</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'
@@ -59,12 +59,15 @@
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',
@@ -77,11 +80,11 @@
    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)
@@ -107,16 +110,7 @@
  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]
@@ -160,7 +154,7 @@
  if (checked.value === '智飞工单') {
    const id = val.id
    getaddOrderRecord(id)
    router.push({
    router.replace({
      path: `/tickets/orderLog`,
      query: {
        id,
@@ -169,12 +163,10 @@
  } else {
    getaddOrderRecord(val.id)
    const orderNumber = val.event_num
    router.push({
      path: `/tickets/ticket`,
      query: {
        orderNumber,
      },
    })
    router.replace({
    path: `/tickets/ticket`,
    query: { orderNumber },
})
  }
}
// 标记事件工单或智飞工单已读
@@ -203,24 +195,28 @@
  })
}
// 获取事件工单或者智飞工单的信息
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()
@@ -235,7 +231,7 @@
.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;
@@ -313,12 +309,19 @@
    .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;
@@ -415,5 +418,8 @@
    font-size: 14px;
    color: #7c8091;
  }
  .el-empty {
  transition: opacity 0.3s ease;
}
}
</style>