forked from drone/command-center-dashboard

罗广辉
2025-03-29 95e6e79a4bef6c13cbde010b42562b1e5455f71d
Merge remote-tracking branch 'origin/master'
5 files modified
7 files added
234 ■■■■■ changed files
src/api/home/machineNest.js 10 ●●●●● patch | view | raw | blame | history
src/components/CommonWeather.vue 63 ●●●●● patch | view | raw | blame | history
src/page/login/index.vue 3 ●●●●● patch | view | raw | blame | history
src/router/views/index.js 9 ●●●●● patch | view | raw | blame | history
src/styles/login.scss 20 ●●●●● patch | view | raw | blame | history
src/views/Home/components/HomeLeft/HomeLeft.vue 56 ●●●●● patch | view | raw | blame | history
src/views/Home/components/HomeLeft/OverviewNext.vue 25 ●●●●● patch | view | raw | blame | history
src/views/SignMachineNest/SignMachineNest.vue 9 ●●●●● patch | view | raw | blame | history
src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue 4 ●●●● patch | view | raw | blame | history
src/views/SignMachineNest/components/MachineLeft/MachineData.vue 4 ●●●● patch | view | raw | blame | history
src/views/SignMachineNest/components/MachineLeft/MachineLeft.vue 24 ●●●●● patch | view | raw | blame | history
src/views/SignMachineNest/components/MachineRight/MachineRight.vue 7 ●●●●● patch | view | raw | blame | history
src/api/home/machineNest.js
New file
@@ -0,0 +1,10 @@
import request from '@/axios';
// 机巢列表
export const getDeviceInfoNum = () => {
  return request({
    url: '/manage/api/v1/devices/getDeviceInfoNum',
    method: 'post',
    params: {},
  });
};
src/components/CommonWeather.vue
New file
@@ -0,0 +1,63 @@
<template>
  <div class="time-weather">
    <div class="time">{{ time }}</div>
    <div class="line"></div>
    <div class="weather">
      <img src="@/assets/images/home/homeLeft/tq.png" alt="" />
      <span class="tq">阴天</span>
      <span class="qk">适合飞行</span>
    </div>
  </div>
</template>
<script setup>
import dayjs from 'dayjs';
const time = ref('');
const updateTime = () => {
    time.value = dayjs().format('YYYY.MM.DD HH:mm:ss');
};
onMounted(() => {
    updateTime(); // 立即执行一次
    time.value = setInterval(updateTime, 1000);
});
onUnmounted(() => {
    if (time.value) {
        clearInterval(time.value);
        time.value = null;
    }
});
</script>
<style scoped lang="scss">
.time-weather {
  margin-left: 45px;
  width: 310px;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .line {
    border: 1px solid #ffffff;
    height: 10px;
    opacity: 0.5;
  }
  .weather {
    img {
      width: 20px;
      height: 20px;
    }
    .tq {
      margin: 0 5px;
      color: #e7f5ff;
    }
    .qk {
      margin-left: 5px;
      color: #04f043;
    }
  }
}
</style>
src/page/login/index.vue
@@ -1,8 +1,5 @@
<template>
  <div class="login-container" @keyup.enter="handleLogin">
    <!-- <div class="login-time">
      {{ time }}
    </div> -->
    <div class="login-header">
      <div class="title">中图智飞低空智能感知网平台</div>
    </div>
src/router/views/index.js
@@ -16,6 +16,15 @@
        component: () => import(/* webpackChunkName: "home" */ '@/views/Home/Home.vue'),
      },
      {
        path: 'signMachineNest',
        name: '单个机巢详情',
        meta: {
          i18n: 'dashboard',
          menu: false,
        },
        component: () => import(/* webpackChunkName: "TaskManage" */ '@/views/SignMachineNest/SignMachineNest.vue'),
      },
      {
        path: 'taskManage',
        name: '任务管理',
        meta: {
src/styles/login.scss
@@ -3,26 +3,6 @@
  position: relative;
  width: 100%;
  height: 100%;
  // position: relative;
  // display: flex;
  // align-items: center;
  // width: 100%;
  // height: 100%;
  // // background-color: #fff;
  // background: linear-gradient(110deg, rgb(2, 40, 85) 0%, rgb(44, 119, 241) 50%, rgb(255,255,255) 50%, rgb(240,240,240) 100%);
  // overflow: hidden;
  // &::before{
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   margin-left: -48%;
  //   background-image: url(/img/login-bg.svg);
  //   background-position: 100%;
  //   background-repeat: no-repeat;
  //   background-size: auto 100%;
  // }
}
.login-header {
  background: url('../assets/images/login/big-title.png') no-repeat center / 100% 100%;
src/views/Home/components/HomeLeft/HomeLeft.vue
@@ -1,15 +1,7 @@
<template>
  <div class="home-left">
    <!--时间 天气-->
    <div class="time-weather">
      <div class="time">{{ time }}</div>
      <div class="line"></div>
      <div class="weather">
        <img src="@/assets/images/home/homeLeft/tq.png" alt="" />
        <span class="tq">阴天</span>
        <span class="qk">适合飞行</span>
      </div>
    </div>
    <common-weather></common-weather>
    <!--机巢概况-->
    <overview-next></overview-next>
    <!--巡检任务情况-->
@@ -20,23 +12,8 @@
<script setup>
import OverviewNext from './OverviewNext.vue';
import InspectionRaskDetails from './InspectionRaskDetails.vue';
import dayjs from 'dayjs';
import CommonWeather from '@/components/CommonWeather.vue';
const time = ref('');
const updateTime = () => {
    time.value = dayjs().format('YYYY.MM.DD HH:mm:ss');
};
onMounted(() => {
    updateTime(); // 立即执行一次
    time.value = setInterval(updateTime, 1000);
});
onUnmounted(() => {
    if (time.value) {
        clearInterval(time.value);
        time.value = null;
    }
});
</script>
<style scoped lang="scss">
@@ -44,34 +21,5 @@
  position: absolute;
  top: 88px;
  color: #e7f5ff;
  .time-weather {
    margin-left: 45px;
    width: 310px;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .line {
      border: 1px solid #ffffff;
      height: 10px;
      opacity: 0.5;
    }
    .weather {
      img {
        width: 20px;
        height: 20px;
      }
      .tq {
        margin: 0 5px;
        color: #e7f5ff;
      }
      .qk {
        margin-left: 5px;
        color: #04f043;
      }
    }
  }
}
</style>
src/views/Home/components/HomeLeft/OverviewNext.vue
@@ -32,7 +32,7 @@
          <img width="13" height="15" src="@/assets/images/home/homeLeft/table-icon.png" alt="" />
          {{ item.name }}
        </div>
        <div class="status">{{ item.status }}</div>
        <div class="status" @click="signMachineNestClick">{{ item.status }}</div>
      </div>
    </div>
  </div>
@@ -41,6 +41,8 @@
import { pxToRem } from '@/utils/rem';
import { Search } from '@element-plus/icons-vue';
import CommonTitle from '@/components/CommonTitle.vue';
import { getDeviceInfoNum } from '@/api/home/machineNest.js'
import router from '@/router/';
const list = ref([
  { name: '执行中', value: 89, color: '#FFA768' },
@@ -56,9 +58,29 @@
  { name: '小兰工业园3号', status: '预计执行' },
]);
// 获取机巢列表
const getList = () => {
  getDeviceInfoNum().then((res) => {
    console.log(res);
  });
}
// 单个机巢详情
const signMachineNestClick = () => {
  router.push({
    path: '/signMachineNest',
    query: {
      id: '123'  // 这里可以传递你需要的参数
    }
  });
}
const detailsFun = () => {
  console.log('details');
};
onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.overview-next {
@@ -163,6 +185,7 @@
      }
      .status {
        color: #6fc3ff;
        cursor: pointer;
      }
      .atcive {
        color: #04f020;
src/views/SignMachineNest/SignMachineNest.vue
New file
@@ -0,0 +1,9 @@
<template>
  <MachineLeft></MachineLeft>
  <MachineRight></MachineRight>
</template>
<script setup>
import MachineLeft from './components/MachineLeft/MachineLeft.vue'
import MachineRight from './components/MachineRight/MachineRight.vue';
</script>
src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue
New file
@@ -0,0 +1,4 @@
<!-- 巡检任务数据 -->
<template>
    <div>巡检任务数据</div>
</template>
src/views/SignMachineNest/components/MachineLeft/MachineData.vue
New file
@@ -0,0 +1,4 @@
<!-- 机巢数据 -->
<template>
  <div>机巢数据</div>
</template>
src/views/SignMachineNest/components/MachineLeft/MachineLeft.vue
New file
@@ -0,0 +1,24 @@
<template>
  <div class="machine-left">
    <!--时间 天气-->
    <common-weather></common-weather>
    <!-- 机巢数据 -->
     <MachineData></MachineData>
     <!--巡检任务详情-->
     <InspectionRaskDetails></InspectionRaskDetails>
  </div>
</template>
<script setup>
import CommonWeather from '@/components/CommonWeather.vue';
import MachineData from './MachineData.vue';
import InspectionRaskDetails from './InspectionRaskDetails.vue';
</script>
<style scoped lang="scss">
.machine-left {
  position: absolute;
  top: 88px;
  color: #e7f5ff;
}
</style>
src/views/SignMachineNest/components/MachineRight/MachineRight.vue
New file
@@ -0,0 +1,7 @@
<template>
  <div class="machine-right">右边</div>
</template>
<script setup></script>
<style scoped lang="scss"></style>