daimp-front/sub-operation-service/src/views/smartFarm/manageControl/openCurtain.vue

<template>
  <section>
    <common>
      <template #main>
        <div>
          <ControlDevices :devices="devices"></ControlDevices>
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 20px">
          <MyTable :title="'操作时间'" :data="tableData" :column="tableTitle" style="width: 100%" class="my-table"></MyTable>
        </div>
      </template>
    </common>
  </section>
</template>

<script setup>
import { ref } from 'vue';
import Common from '../components/common.vue';
import MyTable from '@/views/smartFarm/components/myTable.vue';
import ControlDevices from '@/views/smartFarm/components/controlDevices.vue';

const devices = ref([
  {
    title: '排水泵站',
    devices: [
      {
        name: 'A-001',
        serial: 'YM20250101001', // 设备序列号
        icon: 'pump', // pump排水泵站 gate电动闸门 sensor水位传感器
        isOpen: 1, // 0:关闭 1:开启
        isOperation: 0, // 0:待机中 1:运作中
        status: '1', // -1:故障 0:离线 1:正常
        id: 0,
      },
      {
        name: 'A-002',
        serial: 'YM20250101002',
        icon: 'pump',
        isOpen: 0,
        isOperation: 1,
        status: '1',
        id: 1,
      },
      {
        name: 'A-003',
        serial: 'YM20250101003',
        icon: 'pump',
        isOpen: 0,
        isOperation: 0,
        status: '-1',
        id: 2,
      },
      {
        name: 'A-004',
        serial: 'YM20250101004',
        icon: 'pump',
        isOpen: 1,
        isOperation: 0,
        status: '0',
        id: 3,
      },
    ],
  },
  {
    title: '电动闸门',
    devices: [
      {
        name: 'A-005',
        serial: 'YM20250101005', // 设备序列号
        icon: 'gate', // pump排水泵站 gate电动闸门 sensor水位传感器
        isOpen: 1, // 0:关闭 1:开启
        isOperation: 0, // 0:待机中 1:运作中
        status: '1', // -1:故障 0:离线 1:正常
        id: 0,
      },
      {
        name: 'A-006',
        serial: 'YM20250101006',
        icon: 'gate',
        isOpen: 0,
        isOperation: 1,
        status: '1',
        id: 1,
      },
      {
        name: 'A-007',
        serial: 'YM20250101007',
        icon: 'gate',
        isOpen: 0,
        isOperation: 0,
        status: '-1',
        id: 2,
      },
      {
        name: 'A-008',
        serial: 'YM20250101008',
        icon: 'gate',
        isOpen: 1,
        isOperation: 0,
        status: '0',
        id: 3,
      },
    ],
  },
  {
    title: '水位传感器',
    devices: [
      {
        name: 'A-009',
        serial: 'YM20250101009', // 设备序列号
        icon: 'sensor', // pump排水泵站 gate电动闸门 sensor水位传感器
        isOpen: 1, // 0:关闭 1:开启
        isOperation: 0, // 0:待机中 1:运作中
        status: '1', // -1:故障 0:离线 1:正常
        id: 0,
      },
      {
        name: 'A-010',
        serial: 'YM20250101010',
        icon: 'sensor',
        isOpen: 0,
        isOperation: 1,
        status: '1',
        id: 1,
      },
      {
        name: 'A-011',
        serial: 'YM20250101011',
        icon: 'sensor',
        isOpen: 0,
        isOperation: 0,
        status: '-1',
        id: 2,
      },
      {
        name: 'A-012',
        serial: 'YM20250101012',
        icon: 'sensor',
        isOpen: 1,
        isOperation: 0,
        status: '0',
        id: 3,
      },
    ],
  },
]);

const tableData = ref([
  {
    name: '卷膜器',
    serial: 'P-1110101',
    behavior: '开启',
    date: '2025-01-01 09:00:00',
  },
  {
    name: '智能电动天窗',
    serial: 'P-1110102',
    behavior: '开启',
    date: '2025-01-01 09:10:12',
  },
  {
    name: '链式开窗',
    serial: 'P-1110103',
    behavior: '关闭',
    date: '2025-01-01 09:22:20',
  },
  {
    name: '卷膜器',
    serial: 'P-1110104',
    behavior: '开启',
    date: '2025-01-01 09:03:10',
  },
  {
    name: '智能电动天窗',
    serial: 'P-1110105',
    behavior: '关闭',
    date: '2025-01-01 10:10:01',
  },
]);
const tableTitle = ref([
  {
    label: '设备名称',
    prop: 'name',
    width: 'auto',
  },
  {
    label: '设备编码',
    prop: 'serial',
    width: 'auto',
  },
  {
    label: '操作',
    prop: 'behavior',
    width: 'auto',
  },
  {
    label: '操作日期',
    prop: 'date',
    width: 'auto',
  },
]);
</script>

<style lang="scss" scoped>
.my-table {
  &:deep(table) {
    table-layout: fixed; //平均分配宽度
    width: 100%;
  }
}
</style>