增加单个机巢页面

chenyao

2025-03-31 295eb3cc87aaa5176d64a4ef985cdad0bfefae9a

 src/views/Home/components/HomeLeft/OverviewNext.vue

@@ -28,20 +28,21 @@
      </div>
      <div class="table-item" v-for="item in tableList">
        <div class="name">
          <img class="yjzx-img" width="10" height="10" src="@/assets/images/table-zx.png" alt="" />
          <img width="13" height="15" src="@/assets/images/table-icon.png" alt="" />
          <img class="yjzx-img" width="10" height="10" src="@/assets/images/home/homeLeft/table-zx.png" alt="" />
          <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>
</template>
<script setup>
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 { useStore } from 'vuex';
const searchText = ref('')
const list = ref([
  { name: '执行中', value: 89, color: '#FFA768' },
  { name: '在线', value: 100, color: '#8EFFAC' },
@@ -56,9 +57,28 @@
  { name: '小兰工业园3号', status: '预计执行' },
]);

// 获取机巢列表
const getList = () => {
  getDeviceInfoNum().then((res) => {
    console.log(res);
  });
}
const store = useStore();

// 单个机巢详情
const signMachineNestClick = () => {
  store.commit('setSingleUavHome', {
    id: '123'
  });
}

const detailsFun = () => {
  console.log('details');
};

onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.overview-next {
@@ -75,10 +95,11 @@
  );
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
  margin-bottom: 10px;
  .next-num {
    width: 358px;
    height: 92px;
    background: url(@/assets/images/next-num.png) no-repeat center / 100% 100%;
    background: url(@/assets/images/home/homeLeft/next-num.png) no-repeat center / 100% 100%;
    position: relative;
    .total {
      position: absolute;
@@ -163,6 +184,7 @@
      }
      .status {
        color: #6fc3ff;
        cursor: pointer;
      }
      .atcive {
        color: #04f020;