forked from drone/command-center-dashboard

罗广辉
2025-04-01 888bc41f22b18b6ab05f248266a2c36d046ff717
Merge remote-tracking branch 'origin/master'
8 files modified
470 ■■■■■ changed files
src/api/home/index.js 35 ●●●●● patch | view | raw | blame | history
src/api/home/machineNest.js 8 ●●●●● patch | view | raw | blame | history
src/page/login/index.vue 246 ●●●● patch | view | raw | blame | history
src/styles/login.scss 7 ●●●●● patch | view | raw | blame | history
src/views/Home/components/HomeLeft/OverviewNext.vue 6 ●●●● patch | view | raw | blame | history
src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue 5 ●●●●● patch | view | raw | blame | history
src/views/SignMachineNest/components/MachineLeft/MachineData.vue 23 ●●●●● patch | view | raw | blame | history
src/views/SignMachineNest/components/MachineRight/InspectionRaskList.vue 140 ●●●● patch | view | raw | blame | history
src/api/home/index.js
@@ -63,3 +63,38 @@
    method: 'get',
  });
};
// 历史巡检任务列表
export const getBeforeJob = (data) => {
  return request({
    url: 'drone-device-core/wayline/waylineJobInfo/beforeJob',
    method: 'post',
    data
  });
};
// 当前巡检任务列表
export const getTodayJob = (data) => {
  return request({
    url: 'drone-device-core/wayline/waylineJobInfo/todayJob',
    method: 'post',
    data
  });
};
// 巡检任务详情 柱状图
export const jobNumBar = (data) => {
  return request({
    url: 'drone-device-core/wayline/waylineJobInfo/jobNumBar',
    method: 'post',
    data
  });
};
// 巡检任务详情 饼图
export const industryJobNumPieChart = (data) => {
  return request({
    url: '/drone-device-core/wayline/waylineJobInfo/industryJobNumPieChart',
    method: 'post',
    data
  });
};
src/api/home/machineNest.js
@@ -20,3 +20,11 @@
    params,
  });
};
// 机巢数据
export const getFlightStatistics = (dockSn) => {
  return request({
    url: `drone-device-core/manage/api/v1/devices/getFlightStatistics?dockSn=${dockSn}`,
    method: 'get',
    params: {},
  });
};
src/page/login/index.vue
@@ -1,5 +1,5 @@
<template>
  <div class="login-index" @keyup.enter="handleLogin">
  <div class="login-container" @keyup.enter="handleLogin">
    <div class="login-header">
      <div class="title">中图智飞低空智能感知网平台</div>
    </div>
@@ -131,127 +131,127 @@
</script>
<style lang="scss" scoped>
.login-index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('@/assets/images/login/bg.png') no-repeat center / 100% 100%;
  .login-header {
    background: url('@/assets/images/login/big-title.png') no-repeat center / 100% 100%;
    width: 100%;
    height: 102px;
    position: relative;
    .title {
      position: absolute;
      left: 637px;
      top: 22px;
      width: 646px;
      height: 58px;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 54px;
      line-height: 58px;
      // text-shadow: 0px 2px 6px #0C3D79;
      text-align: center;
      font-style: normal;
      text-transform: none;
      color: #fff;
      // background: linear-gradient(90deg, #FFFFFF 0%, #B2D5FF 100%);
    }
  }
  .login-left-title {
    position: absolute;
    left: 147px;
    top: 263px;
    width: 926px;
    height: 42px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 28px;
    line-height: 33px;
    letter-spacing: 30px;
    // text-shadow: 0px 4px 6px rgba(0,0,0,0.72);
    color: #fff;
    text-align: center;
    font-style: normal;
    text-transform: none;
    // background: linear-gradient(90.00000000000004deg, #FFFFFF 0%, #E3FEFF 63%, #88BAFF 100%);
  }
  .login-left {
    position: absolute;
    top: 334px;
    left: 147px;
    width: 858px;
    height: 540px;
    background: url('@/assets/images/login/left-logo.png') no-repeat center / 100% 100%;
  }
// .login-index {
//   position: relative;
//   width: 100%;
//   height: 100%;
//   background: url('@/assets/images/login/bg.png') no-repeat center / 100% 100%;
//   .login-header {
//     background: url('@/assets/images/login/big-title.png') no-repeat center / 100% 100%;
//     width: 100%;
//     height: 102px;
//     position: relative;
//     .title {
//       position: absolute;
//       left: 637px;
//       top: 22px;
//       width: 646px;
//       height: 58px;
//       font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
//       font-weight: 400;
//       font-size: 54px;
//       line-height: 58px;
//       // text-shadow: 0px 2px 6px #0C3D79;
//       text-align: center;
//       font-style: normal;
//       text-transform: none;
//       color: #fff;
//       // background: linear-gradient(90deg, #FFFFFF 0%, #B2D5FF 100%);
//     }
//   }
//   .login-left-title {
//     position: absolute;
//     left: 147px;
//     top: 263px;
//     width: 926px;
//     height: 42px;
//     font-family: Source Han Sans CN, Source Han Sans CN;
//     font-weight: bold;
//     font-size: 28px;
//     line-height: 33px;
//     letter-spacing: 30px;
//     // text-shadow: 0px 4px 6px rgba(0,0,0,0.72);
//     color: #fff;
//     text-align: center;
//     font-style: normal;
//     text-transform: none;
//     // background: linear-gradient(90.00000000000004deg, #FFFFFF 0%, #E3FEFF 63%, #88BAFF 100%);
//   }
//   .login-left {
//     position: absolute;
//     top: 334px;
//     left: 147px;
//     width: 858px;
//     height: 540px;
//     background: url('@/assets/images/login/left-logo.png') no-repeat center / 100% 100%;
//   }
  .login-right {
    position: absolute;
    top: 305px;
    right: 291px;
    width: 488px;
    height: 508px;
    background: url('@/assets/images/login/right-login-info.png') no-repeat center / 100% 100%;
    .user-login {
      position: absolute;
      top: 72px;
      left: 180px;
      width: 118px;
      height: 26px;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 32px;
      // color: #D1E0F9;
      color: #fff;
      line-height: 26px;
      text-align: center;
    }
    .username {
      position: absolute;
      top: 127px;
      left: 46px;
      width: 394px;
      height: 72px;
      background: url('../assets/images/login/username.png') no-repeat center / 100% 100%;
      // :deep(.el-form-item) {
      //   width: 120px;
      // }
    }
    .password {
      position: absolute;
      top: 208px;
      left: 46px;
      width: 394px;
      height: 72px;
      background: url('../assets/images/login/password.png') no-repeat center / 100% 100%;
    }
    .forgot-password {
      position: absolute;
      width: 64px;
      height: 24px;
      top: 289px;
      right: 58px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 16px;
      color: #D1E0F9;
      line-height: 19px;
    }
    .login-click {
      position: absolute;
      bottom: 106px;
      left: 44px;
      width: 391px;
      height: 61px;
      background: url('../assets/images/login/login-btn.png') no-repeat center / 100% 100%;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 24px;
      line-height: 50px;
      text-align: center;
      color: #fff;
    }
  }
}
//   .login-right {
//     position: absolute;
//     top: 305px;
//     right: 291px;
//     width: 488px;
//     height: 508px;
//     background: url('@/assets/images/login/right-login-info.png') no-repeat center / 100% 100%;
//     .user-login {
//       position: absolute;
//       top: 72px;
//       left: 180px;
//       width: 118px;
//       height: 26px;
//       font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
//       font-weight: 400;
//       font-size: 32px;
//       // color: #D1E0F9;
//       color: #fff;
//       line-height: 26px;
//       text-align: center;
//     }
//     .username {
//       position: absolute;
//       top: 127px;
//       left: 46px;
//       width: 394px;
//       height: 72px;
//       background: url('../assets/images/login/username.png') no-repeat center / 100% 100%;
//       // :deep(.el-form-item) {
//       //   width: 120px;
//       // }
//     }
//     .password {
//       position: absolute;
//       top: 208px;
//       left: 46px;
//       width: 394px;
//       height: 72px;
//       background: url('../assets/images/login/password.png') no-repeat center / 100% 100%;
//     }
//     .forgot-password {
//       position: absolute;
//       width: 64px;
//       height: 24px;
//       top: 289px;
//       right: 58px;
//       font-family: Source Han Sans CN, Source Han Sans CN;
//       font-weight: 500;
//       font-size: 16px;
//       color: #D1E0F9;
//       line-height: 19px;
//     }
//     .login-click {
//       position: absolute;
//       bottom: 106px;
//       left: 44px;
//       width: 391px;
//       height: 61px;
//       background: url('../assets/images/login/login-btn.png') no-repeat center / 100% 100%;
//       font-family: Source Han Sans CN, Source Han Sans CN;
//       font-weight: 500;
//       font-size: 24px;
//       line-height: 50px;
//       text-align: center;
//       color: #fff;
//     }
//   }
// }
</style>
src/styles/login.scss
@@ -51,13 +51,6 @@
  top: 334px;
  border: 1px solid red;
  left: 147px;
  // img {
  //   width: 858px;
  //   height: 540px;
  //   border: 1px solid yellow;
  // }
  // width: 858px;
  // background: url('../assets/images/login/left-logo.png') no-repeat center / 100% 100%;
}
.login-right-new {
src/views/Home/components/HomeLeft/OverviewNext.vue
@@ -62,9 +62,9 @@
let total = ref(0);
// 机巢统计
let listNum = ref([
  { name: '执行中', value: 89, color: '#FFA768' },
  { name: '在线', value: 100, color: '#8EFFAC' },
  { name: '离线', value: 66, color: '#FFFFFF' },
  { name: '空闲中', value: 89, color: '#FFA768' },
  { name: '作业中', value: 100, color: '#8EFFAC' },
  { name: '离线中', value: 66, color: '#FFFFFF' },
  // { name: '异常', value: 10, color: '#FF8E8E' },
]);
// 获取机巢列表
src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue
@@ -13,6 +13,7 @@
import { pxToRem } from '@/utils/rem';
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
import { jobNumBar, industryJobNumPieChart } from '@/api/home/index.js'
const chartRef = ref(null);
const pieRef = ref(null);
@@ -163,6 +164,10 @@
        pieChart.resize();
    });
});
onMounted(() => {
  getMachineData();
});
</script>
<style lang="scss" scoped>
src/views/SignMachineNest/components/MachineLeft/MachineData.vue
@@ -13,6 +13,7 @@
</template>
<script setup>
import { getFlightStatistics } from '@/api/home/machineNest.js'
import { pxToRem } from '@/utils/rem';
import CommonTitle from '@/components/CommonTitle.vue';
import rwcs from '@/assets/images/signMachineNest/machineLeft/rwcs.png';
@@ -27,10 +28,28 @@
  { imgurl: sjs, num: 1314, text: '事件数(件)' },
  { imgurl: jscb, num: 1314, text: '节省成本(万元)' },
  { imgurl: rwcg, num: 1314, text: '任务成果(个)' },
  { imgurl: fxlc, num: 1314, text: '飞行里程' },
  { imgurl: fxlc, num: 1314, text: '飞行里程(公里)' },
  { imgurl: fxsc, num: 1314, text: '飞行时长' },
]);
// 获取机巢统计数据
const getMachineData = () => {
  let dockSn = ref('4TADKCM0010016');
  getFlightStatistics(dockSn.value).then(res => {
    if (res.data.code !== 0) return;
    const result = res.data.data;
    statisticsList.value[0].num = result.fly_count || 0;
    statisticsList.value[1].num = result.event_count || 0;
    statisticsList.value[2].num = result.min_count || 0;
    statisticsList.value[3].num = result.achievement_count || 0;
    statisticsList.value[4].num = result.flight_mileage || 0;
    statisticsList.value[5].num = result.hour_count || 0;
  })
};
onMounted(() => {
  getMachineData();
});
</script>
<style lang="scss" scoped>
@@ -63,7 +82,7 @@
    }
    .num-text {
      .num {
        width: 72px;
        width: 120px;
        height: 24px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: 400;
src/views/SignMachineNest/components/MachineRight/InspectionRaskList.vue
@@ -11,21 +11,27 @@
        <div class="search-box">
          <el-input v-model="searchText" placeholder="请输入搜索内容" class="input-with-select">
            <template #append>
              <el-button :icon="Search" />
              <el-button :icon="Search" @click="searchNickName"/>
            </template>
          </el-input>
        </div>
      </div>
      <div class="table-list">
      <div class="table-list" v-if="tableList.length > 0"
        infinite-scroll-distance="6"
        v-infinite-scroll="loadMore"
        :infinite-scroll-disabled="busy"
        infinite-scroll-immediate="true">>
        <div class="item" v-for="(item,index) in tableList">
          <div class="left">
            <div class="left-t">
              <span>{{ index+1 }}.</span>{{ item.title }}
              <span class="status" :class="item.status==='执行中'?'active':''">{{ item.status }}</span>
              <span>{{ index+1 }}.</span>{{ item.name }}
              <span class="status" :class="item.status===2?'active':''">
                {{ getStatusText(item.status) }}
              </span>
            </div>
            <div class="left-b">
              <img src="@/assets/images/signMachineNest/machineRight/date.png" alt="" />{{ item.time }}
              <img src="@/assets/images/signMachineNest/machineRight/name.png" alt="" />{{ item.name }}
              <img src="@/assets/images/signMachineNest/machineRight/date.png" alt="" />{{ item.begin_time }}
              <img src="@/assets/images/signMachineNest/machineRight/name.png" alt="" />{{ item.creator_name || '' }}
            </div>
          </div>
          <div class="right">
@@ -33,6 +39,11 @@
          </div>
        </div>
      </div>
      <el-empty class="custom-empty" v-else>
        <template #description>
          <span class="custom-text">暂无数据</span>
        </template>
      </el-empty>
    </div>
  </div>
</template>
@@ -40,32 +51,92 @@
<script setup>
import { Search } from '@element-plus/icons-vue';
import CommonTitle from '@/components/CommonTitle.vue';
import { getBeforeJob, getTodayJob } from '@/api/home/index.js'
const isMore = ref(true);
// 控制加载状态
const busy = ref(false);
let searchText = ref('')
const tableList = ref([
  {
    title: '园区巡查-20250313001',
    status: '待执行',
    time: '2025.3.13 19:56',
    name: '陈瑶',
  },
  {
    title: '园区巡查-20250313002',
    status: '执行中',
    time: '2025.3.13 19:56',
    name: '陈瑶',
  },
  {
    title: '园区巡查-20250313003',
    status: '已完成',
    time: '2025.3.13 19:56',
    name: '陈瑶',
  },
]);
const tableList = ref([]);
// 分页
const pageParams = ref({
  current: 1,
  size: 5,
  total: 0
});
// 当前任务和历史任务切换
let tabIndex = ref(1);
const tabClick = (value) => {
  tabIndex.value = value;
  clearData();
};
// 状态文字判断
const getStatusText = (status) => {
  switch (status) {
    case 1:
      return '待执行';
    case 2:
      return '执行中';
    case 3:
      return '完成';
    case 4:
      return '取消';
    case 5:
      return '失败';
    default:
      return '未知';
  }
};
// 获取历史巡检任务列表
const getJobList = async () => {
  const params = {
    area_code: '',
    device_sn: '',
    job_name: searchText.value,
    current: pageParams.value.current,
    size: pageParams.value.size,
  }
  let result = null;
  if (tabIndex.value === 1) {
    result = await getTodayJob(params)
  } else {
    result = await getBeforeJob(params)
  }
  if (result.data.code !== 0) return;
  if (result.data.data.records.length === 0) return (isMore.value = false);
  pageParams.value.current += 1;
  tableList.value = [...tableList.value, ...result.data.data.records];
  busy.value = false;
}
// 清除数据
const clearData = () => {
  tableList.value = [];
  pageParams.value.current = 1;
  isMore.value = true;
  getJobList();
};
// 加载更多数据
const loadMore = async () => {
    busy.value = true;
    if (!isMore.value) return;
    getJobList();
};
// 搜索数据
const searchNickName = () => {
  clearData();
};
onMounted(() => {
  getJobList();
});
</script>
<style lang="scss" scoped>
@@ -131,6 +202,13 @@
    .table-list {
      width: 358px;
      height: 202px;
      overflow: auto;
      &::-webkit-scrollbar {
        width: 0;
        display: none;
      }
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
      .item {
        width: 100%;
        height: 72px;
@@ -157,6 +235,7 @@
              border-radius: 4px 4px 4px 4px;
              border: 1px solid #4CA6FF;
              color: #4CA6FF;
              margin-left: 10px;
            }
            .active {
              border: 1px solid #04F0D1;
@@ -184,5 +263,14 @@
        }
      }
    }
    .custom-empty {
      color: #fff;
      margin: 16px 0;
      padding: 0;
      :deep(.el-empty__image) {
        width: 100px;
        height: 100px;
      }
    }
 }
</style>