vent-forewarn-micro/src/views/vent/dust/dustAtomizing/index.vue

<template>
  <div class="dustAtomizing">

    <div class="dustAto-right-box">
      <div class="search-area">
        <Form :model="formState" :label-col="{ span: 1.5 }">
          <FormItem label="设备名称 : ">
            <a-input v-model:value="formState.devicename" clearable placeholder="请输入..."
              style="width:240px;margin-right: 20px;" />
          </FormItem>
          <FormItem label="">
            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;"
              @click="getSearch">
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
              <template #icon>
                <PlusOutlined />
              </template>
              新增
            </a-button>
            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
              一键开启
            </a-button>
            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
              一键关闭
            </a-button>
            <a-button type="primary" style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;">
              自动启停
            </a-button>
          </FormItem>
        </Form>
      </div>
      <div class="content-area">
        <Table class="ant-table-striped" size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 720 }"
          :pagination="false">

          <template #action="{ record }">
            <a-button type="link" style="color:#3DF6FF">
              启动
            </a-button>
            <a-button type="link" style="color:#3DF6FF">
              关闭
            </a-button>
            <a-button type="link" style="color:#3DF6FF">
              自动
            </a-button>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { Form, FormItem, Table } from 'ant-design-vue';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { realData } from './dustAtomizing.api'
import dayjs from 'dayjs'

//查询条件
let formState = reactive({
  devicename: ''
})

//table 数据
let dataSource = reactive<any[]>([])

//table 列
let columns = reactive<any[]>([
  {
    title: '序号',
    width: 60,
    align: 'center',
    customRender: ({ index }: { index: number }) => `${index + 1}`
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    key: 'deviceName',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '安装位置',
    dataIndex: 'location',
    key: 'location',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '喷雾状态',
    dataIndex: 'stateSpray',
    key: 'stateSpray',
    width: 100,
    align: 'center',
    ellipsis: true,
  },
  {
    title: '链接状态',
    dataIndex: 'stateConn',
    key: 'stateConn',
    width: 100,
    align: 'center',
    ellipsis: true,
  },
  {
    title: '设备状态',
    dataIndex: 'deviceState',
    key: 'deviceState',
    width: 100,
    align: 'center',
    ellipsis: true,
  },
  {
    title: '使用状态',
    dataIndex: 'stateEnable',
    key: 'stateEnable',
    width: 100,
    align: 'center',
    ellipsis: true,
  },
  {
    title: '控制状态',
    dataIndex: 'stateManual',
    key: 'stateManual',
    width: 100,
    align: 'center',
    ellipsis: true,
  },
  {
    title: '粉尘浓度',
    dataIndex: 'dust',
    key: 'dust',
    width: 100,
    align: 'center',
    ellipsis: true,
  },
  {
    title: '电池电量',
    dataIndex: 'batteryLevel',
    key: 'batteryLevel',
    width: 100,
    align: 'center',
    ellipsis: true,
  },
  {
    title: '是否定时',
    dataIndex: 'timingSwitch',
    key: 'timingSwitch',
    width: 100,
    align: 'center',
    ellipsis: true,
  },
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '操作',
    key: 'action',
    width: 300,
    slots: { customRender: 'action' },
    align: 'center',
  },
])

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor() {
  timer = setTimeout(
    async () => {
      await getList()
      if (timer) {
        timer = null;
      }
      getMonitor();
    },
    5000
  );
}

//获取喷雾列表
async function getList() {

  let res = await realData({ deviceName: formState.devicename, type: "DustPw" })
  console.log(res, '喷雾列表数据------')
  if (res.length != 0) {
    dataSource.length = 0
    res.forEach(el => {
      el.timingSwitch = el.timingSwitch == '1' ? '是' : '否'
      el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关'
      el.stateConn = el.stateConn == '1' ? '链接' : '未链接'
      el.deviceState = el.deviceState == '1' ? '喷雾打开' : el.deviceState == '0' ? '喷雾关闭' : '未连接'
      el.stateEnable = el.stateEnable == '1' ? '使用' : '未使用'
      el.stateManual = el.stateManual == '0' ? '自动控制' : '手动控制'
      el.time = dayjs().format('YYYY-MM-DD HH:MM:ss')
      dataSource.push(el)
    })
  }

}

//列表查询
function getSearch() {
  getList()

}

onMounted(() => {
  getList()
  getMonitor()
})
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
});
</script>

<style lang="less" scoped>
.dustAtomizing {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 20px);
  // height: calc(100vh - 82px);
  height: 863px;
  margin: 50px 10px 15px;
  background: #282828;



  .dustAto-right-box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin-left: 10px;
    padding: 15px 10px;
    background-color: rgb(27 35 39 / 80%);

    .search-area {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      height: 70px;
      padding: 0 20px;

    }

    .content-area {
      height: calc(100% - 70px);

    }

  }
}

:deep(.vMonitor-form) {
  display: flex;
  align-items: center;
  width: 100%;
}

:deep(.vMonitor-form-item-label >label) {
  color: #fff;
}

:deep(.vMonitor-input) {
  padding: 2px 11px;
  border-color: #227fad;
  background-color: rgb(38 74 96 20%);
  color: #fff;
}


:deep(.vMonitor-table) {
  background-color: transparent;
  color: #fff;
}

:deep(.vMonitor-table-wrapper .vMonitor-table-thead >tr>th) {
  padding: 4px 0;
  border-bottom: none;
  background: rgb(34 127 173/ 50%);
  color: #04ffdb;
}

:deep(.vMonitor-table-thead >tr>th:not(:last-child):not(.vMonitor-table-selection-column):not(.vMonitor-table-row-expand-icon-cell):not([colspan])::before) {
  background: transparent;
}

:deep(.vMonitor-table-wrapper .vMonitor-table-cell-scrollbar:not([rowspan])) {
  box-shadow: none;
}

:deep(.vMonitor-table-wrapper .vMonitor-table:not(.vMonitor-table-bordered) .vMonitor-table-tbody >tr >td) {
  border-top: none;
}

:deep(.vMonitor-table.vMonitor-table-small .vMonitor-table-tbody>tr>td) {
  padding: 4px 8px;
}

:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr >td.vMonitor-table-cell-row-hover) {
  background: rgb(38 74 96) !important;
}

:deep(.vMonitor-table-wrapper .vMonitor-table-tbody >tr.vMonitor-table-row:hover>td) {
  background: rgb(38 74 96) !important;
}
</style>