Merge remote-tracking branch 'origin/master'

罗广辉

2025-03-31 99e8c98928ef2a65cbabedc7dff3f786ea6d98ae

Merge remote-tracking branch 'origin/master'

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

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

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

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

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

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

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

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

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

 src/components/LiveVideo.vue

New file
@@ -0,0 +1,16 @@
<!--视频直播-->
<template>
  <div class="live-video">直播组件</div>
</template>

<script setup>

</script>

<style scoped>
.live-video{
  width: 100%;
  height: 100%;
  color: #fff;
}
</style>

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

@@ -2,12 +2,69 @@
<template>
  <CommonTitle title="巡检任务列表" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="inspection-rask-list"></div>
    <div class="inspection-rask-list">
      <div class="tab-search">
        <div class="tab-btn">
          <div :class="tabIndex==1?'active':''" @click="tabClick(1)">当前任务</div>
          <div :class="tabIndex==2?'active':''" @click="tabClick(2)">历史任务</div>
        </div>
        <div class="search-box">
          <el-input v-model="searchText" placeholder="请输入搜索内容" class="input-with-select">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="table-list">
        <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>
            </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 }}
            </div>
          </div>
          <div class="right">
            <img src="@/assets/images/signMachineNest/machineRight/return.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import CommonTitle from '@/components/CommonTitle.vue';

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: '陈瑶',
  },
]);
let tabIndex = ref(1);
const tabClick = (value) => {
  tabIndex.value = value;
};
</script>

<style lang="scss" scoped>
@@ -22,8 +79,109 @@
    );
    opacity: 0.85;
    margin: 2px 0 13 0;
    display: flex;
    justify-content: space-between;
    padding: 11px 27px 0;
    .tab-search {
      width: 358px;
      height: 76px;
      margin-bottom: 12px;
      .tab-btn {
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
        div {
          width: 104px;
          height: 32px;
          background: #0E2042;
          border: 1px solid #8EA3D1;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #8EA3D1;
          line-height: 32px;
          text-align: center;
          cursor: pointer;
        }
        .active {
          width: 104px;
          height: 32px;
          background: linear-gradient( 180deg, rgba(0,82,248,0.58) 0%, rgba(103,209,251,0.8) 100%);
          color: #fff;
          border: 1px solid rgba(103,209,251,0.8);
        }
      }
      .search-box {
        :deep(.el-input__wrapper) {
          background-color: rgba(0, 112, 255, 0.1);
          background: rgba(0, 15, 34, 0.5);
          box-shadow: 0 0 0 1px #0070ff inset;
        }

        :deep(.el-input-group__append) {
          background: rgba(0, 112, 255, 0.38);
          .el-button {
            background-color: transparent;
            border: 1px solid #0070ff;
            border-left: none;
            color: #fff;
          }
        }
      }
    }
    .table-list {
      width: 358px;
      height: 202px;
      .item {
        width: 100%;
        height: 72px;
        padding: 12px 16px;
        margin-bottom: 8px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        .left {
          .left-t {
            height: 24px;
            font-size: 16px;
            margin-bottom: 4px;
            .status {
              text-align: center;
              font-size: 12px;
              display: inline-block;
              width: 48px;
              height: 20px;
              background: rgba(76,166,255,0.08);
              border-radius: 4px 4px 4px 4px;
              border: 1px solid #4CA6FF;
              color: #4CA6FF;
            }
            .active {
              border: 1px solid #04F0D1;
              color: #04F0D1;
            }
          }
          .left-b {
            height: 21px;
            line-height: 21px;
            img {
              width: 16px;
              height: 16px;
              margin-right: 2px;
              &:last-child {
                margin-left: 42px;
              }
            }
          }
        }
        .right {
          img {
            width: 46px;
            height: 46px
          }
        }
      }
    }
 }
</style>

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

@@ -2,12 +2,15 @@
<template>
  <CommonTitle title="机巢监控" />
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="machine-monitor"></div>
    <div class="machine-monitor">
      <liveVideo></liveVideo>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
@@ -24,6 +27,6 @@
    margin: 2px 0 13 0;
    display: flex;
    justify-content: space-between;
    padding: 11px 27px 0;
    padding: 12px 10px 0;
 }
</style>

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

@@ -7,16 +7,59 @@
        <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 class="wz">
            <span class="left">当前位置：</span>
            <span class="right">450.32；210.56</span>
          </div>
          <div class="close-wb">
            <div class="close">舱内关机</div>
            <div class="wb">需要维保</div>
          </div>
        </div>
      </div>
      <div class="status">
        <div>实时真高</div>
        <div>200<span>米</span></div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/height.png" alt="">
            <span class="text">实时真高</span>
          </div>
          <div class="text-data">200<span class="text">米</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/speed.png" alt="">
            <span class="text">飞行速度</span>
          </div>
          <div class="text-data">12<span class="text">米/秒</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/signal.png" alt="">
            <span class="text">信号强度</span>
          </div>
          <div class="text-data">强</div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/electricity.png" alt="">
            <span class="text">电池电量</span>
          </div>
          <div class="text-data">98<span class="text">%</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/distance.png" alt="">
            <span class="text">飞行距离</span>
          </div>
          <div class="text-data">98<span class="text">km</span></div>
        </div>
        <div class="card">
          <div>
            <img src="@/assets/images/signMachineNest/machineRight/duration.png" alt="">
            <span class="text">飞行时长</span>
          </div>
          <div class="text-data">188<span class="text">min</span></div>
        </div>
      </div>
    </div>
  </div>
@@ -38,25 +81,104 @@
    );
    opacity: 0.85;
    margin: 2px 0 13 0;
    display: flex;
    justify-content: space-between;
    
    padding: 8px 0px 20px 18px;
    .info {
      display: flex;
      // justify-content: ce;
      height: 88px;
      display: flex;
      align-items: center;
      img {
        width: 94px;
        height: 88px;
        margin-right: 22px;
      }
      .info-right {
        name {
        .name {
          width: 184px;
          height: 31px;
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 24px;
          color: #0BE5F5;
          line-height: 28px;
        }
        .wz {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-size: 14px;
          color: #FFFFFF;
            line-height: 16px;
          .left {
            width: 70px;
            height: 21px;
            font-weight: 400;
            opacity: 0.6;
          }
          .right {
            width: 100px;
            height: 21px;
            font-weight: bold;
          }
        }
        .close-wb {
          display: flex;
          margin-top: 10px;
          text-align: center;
          line-height: 16px;
          .close {
            width: 60px;
            height: 20px;
            background: rgba(255,178,106,0.2);
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #FFB26A;
            color: #FFB26A;
            margin-right: 10px;
          }
          .wb {    
            width: 60px;
            height: 20px;       
            background: rgba(255,106,106,0.2);
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #FF6A6A;
            color: #FF6A6A;
          }
        }
      
      }
    }
    .status {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      margin-top: 18px;
      .card {
        width: calc(33.33% - 14px); 
      }
      img {
        width: 16px;
        height: 16px;
        // margin-right: 0px;
        // margin-top: 2px;
      }
      .text {
        width: 56px;
        height: 21px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 16px;
      }
      .text-data {
        // width: 40px;
        margin-left: 20px;
        height: 23px;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 18px;
        color: #0BE5F5;
        line-height: 21px;
      }
    }
 }