增加单个机巢页面

chenyao

2025-03-31 295eb3cc87aaa5176d64a4ef985cdad0bfefae9a

增加单个机巢页面

 .env.development

@@ -6,6 +6,9 @@
VITE_APP_API = /api
VITE_APP_API_URL = https://wrj.shuixiongit.com/api

# 连接本地服务器
# VITE_APP_API_URL = http://192.168.1.204/api

#调试参数
VITE_APP_DEBUG_KEY = saber
VITE_APP_DEBUG_SWITCH = false

 src/assets/images/login/left-logo.png

 src/assets/images/login/right-login-info.png

 src/assets/images/signMachineNest/machineLeft/image 100.png

 src/assets/images/signMachineNest/machineRight/Frame(1).png

 src/assets/images/signMachineNest/machineRight/Frame(2).png

 src/assets/images/signMachineNest/machineRight/Frame(3).png

 src/assets/images/signMachineNest/machineRight/Frame(4).png

 src/assets/images/signMachineNest/machineRight/Frame(5).png

 src/assets/images/signMachineNest/machineRight/Frame(6).png

 src/assets/images/signMachineNest/machineRight/wrj.png

 src/components/UserOperate.vue

 src/page/login/index.vue

@@ -4,7 +4,9 @@
      <div class="title">中图智飞低空智能感知网平台</div>
    </div>
    <div class="login-left-title-new">中国图强 智领飞跃</div>
    <div class="login-left-new"></div>
    <div class="login-left-new">
      <img src="@/assets/images/login/left-logo.png" alt="" />
    </div>
    <userLogin v-if="activeName === 'user'"></userLogin>
  </div>
</template>

 src/styles/login.scss

@@ -29,6 +29,7 @@
}
.login-left-title-new {
  position: absolute;
  border: 1px solid greenyellow;
  left: 147px;
  top: 263px;
  width: 926px;
@@ -48,10 +49,15 @@
.login-left-new {
  position: absolute;
  top: 334px;
  border: 1px solid red;
  left: 147px;
  width: 926px;
  height: 540px;
  background: url('../assets/images/login/left-logo.png') no-repeat center / 100% 100%;
  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/HomeRight/HomeRight.vue

@@ -11,7 +11,7 @@
import Synergy from '@/views/Home/components/HomeRight/Synergy.vue';
import TaskAchievements from '@/views/Home/components/HomeRight/TaskAchievements.vue';
import EventOverview from '@/views/Home/components/HomeRight/EventOverview.vue';
import UserOperate from '@/views/Home/components/HomeRight/UserOperate.vue';
import UserOperate from '@/components/UserOperate.vue';
</script>

<style scoped lang="scss">

 src/views/SignMachineNest/components/MachineRight/InspectionRaskList.vue

New file
@@ -0,0 +1,29 @@
<!-- 巡检任务列表 -->
<template>
  <CommonTitle title="巡检任务列表" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="inspection-rask-list"></div>
  </div>
</template>

<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
</script>

<style lang="scss" scoped>
  .inspection-rask-list {
    width: 390px;
    height: 325px;
    background: linear-gradient(
      270deg,
      #1f3e7a 0%,
      rgba(31, 62, 122, 0.35) 79%,
      rgba(31, 62, 122, 0) 100%
    );
    opacity: 0.85;
    margin: 2px 0 13 0;
    display: flex;
    justify-content: space-between;
    padding: 11px 27px 0;
 }
</style>

 src/views/SignMachineNest/components/MachineRight/MachineMonitor.vue

New file
@@ -0,0 +1,29 @@
<!-- 机巢监控 -->
<template>
  <CommonTitle title="机巢监控" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="machine-monitor"></div>
  </div>
</template>

<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
</script>

<style lang="scss" scoped>
  .machine-monitor {
    width: 390px;
    height: 228px;
    background: linear-gradient(
      270deg,
      #1f3e7a 0%,
      rgba(31, 62, 122, 0.35) 79%,
      rgba(31, 62, 122, 0) 100%
    );
    opacity: 0.85;
    margin: 2px 0 13 0;
    display: flex;
    justify-content: space-between;
    padding: 11px 27px 0;
 }
</style>

 src/views/SignMachineNest/components/MachineRight/MachineRight.vue

@@ -1,7 +1,29 @@
<template>
  <div class="machine-right">右边</div>
  <div class="machine-right">
    <UserOperate/>
    <MachineStatus/>
    <MachineMonitor/>
    <InspectionRaskList/>
  </div>
</template>

<script setup></script>
<script setup>
import UserOperate from '@/components/UserOperate.vue';
import MachineStatus from './MachineStatus.vue';
import MachineMonitor from './MachineMonitor.vue';
import InspectionRaskList from './InspectionRaskList.vue';
</script>

<style scoped lang="scss"></style>
<style scoped lang="scss">
.machine-right {
  position: absolute;
  top: 122px;
  right: 31px;
  width: 404px;

  .titleBox {
    width: 404px;
    height: 43px;
  }
}
</style>

 src/views/SignMachineNest/components/MachineRight/MachineStatus.vue

New file
@@ -0,0 +1,63 @@
<!-- 机巢状态 -->
<template>
  <CommonTitle title="机巢状态" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="machine-status">
      <div class="info">
        <img src="@/assets/images/signMachineNest/machineRight/wrj.png" alt="">
        <div class="info-right">
          <div class="name">Matrice 30</div>
          <div class="wz">当前位置：450.32；210.56</div>
          <div class="">
            <div>舱内关机</div>
            <div>需要维保</div>
          </div>
        </div>
      </div>
      <div class="status">
        <div>实时真高</div>
        <div>200<span>米</span></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
</script>

<style lang="scss" scoped>
  .machine-status {
    width: 390px;
    height: 230px;
    background: linear-gradient(
      270deg,
      #1f3e7a 0%,
      rgba(31, 62, 122, 0.35) 79%,
      rgba(31, 62, 122, 0) 100%
    );
    opacity: 0.85;
    margin: 2px 0 13 0;
    display: flex;
    justify-content: space-between;
    padding: 8px 0px 20px 18px;
    .info {
      height: 88px;
      display: flex;
      align-items: center;
      img {
        width: 94px;
        height: 88px;
      }
      .info-right {
        name {
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 24px;
          color: #0BE5F5;
          line-height: 28px;
        }
      }
    }
 }
</style>