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

<template>
  <div class="dustAtomizing">

    <div class="dustAto-right-box">
      <div class="search-area">
        <a-form :model="formState" :label-col="{ span: 1.5 }">
          <a-form-item label="设备名称 : ">
            <a-select style="width:240px;margin-right: 20px;" :options="selectAreaList" size="small" placeholder="请选择"
              v-model:value="selectCode" allowClear @change="areaChange"></a-select>
          </a-form-item>
          <a-form-item 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" :disabled="disabled"
              style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;" @click="openAll(1)">
              一键开启
            </a-button>
            <a-button type="primary" :disabled="disabled"
              style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;" @click="openAll(0)">
              一键关闭
            </a-button>
            <a-button type="primary" :disabled="disabled"
              style="height: 30px;margin: 0 10px; padding: 2px 15px;background-color: #227fad;" @click="openAll(2)">
              自动启停
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="content-area">
        <a-table :row-selection="rowSelection" size="small" :dataSource="dataSource" :columns="columns"
          :scroll="{ y: 730 }" :pagination="false">

          <template #action="{ record }">
            <a-button type="link" style="color:#3DF6FF" @click="openClick(record.realId, 1)">
              启动
            </a-button>
            <a-button type="link" style="color:#3DF6FF" @click="openClick(record.realId, 0)">
              关闭
            </a-button>
            <a-button type="link" style="color:#3DF6FF" @click="openClick(record.realId, 2)">
              自动
            </a-button>
          </template>
        </a-table>
      </div>
    </div>
    <a-modal title="密码校验" ok-text="确定" cancel-text="取消" @ok="checkPwd" @cancel="clsoeMod" v-model:open="pwdModalVisible"
      :destroyOnClose="true" style="top: 25vh" width="450px">
      <a-input type="password" style="width:300px;margin: 20px 70px;" v-model:value="pwdValue" placeholder="请输入控制密码" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { realData, getControl } from './dustAtomizing.api'
import { getFireAreaInfo } from '../../fire/fireHome/firehome.api'
import { columns } from './dustAtomizing.data'
import dayjs from 'dayjs'

//查询条件
let formState = reactive({
  devicename: ''
})
//table 数据
let dataSource = ref<any[]>([])

let disabled = ref(true)

//工作面编码选项列表
let selectAreaList = reactive<any[]>([])
let selectCode = ref('')

//操作数据
let pwdModalVisible = ref(false)
let currentIsOpen = ref(false)
let isBatchHandler = ref(false)
let selectedRowsList = ref<any[]>([])
let currentId = ref('')
let pwdValue = ref('')

let rowSelection = computed(() => {
  return {
    onChange: (selectedRowKeys, selectedRows) => {
      selectedRowsList.value = selectedRows
    },
    getCheckboxProps: (record) => ({
      props: {
        realId: record.realId,
      },
    }),
  }
})
//https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor() {
  timer = setTimeout(
    async () => {
      // await getFireAreaInfoList()
      await getList()
      if (timer) {
        timer = null;
      }
      getMonitor();
    },
    5000
  );
}

//获取工作面编码
async function getFireAreaInfoList() {
  let res = await getFireAreaInfo({})
  if (res.length != 0) {
    selectAreaList.length = 0
    res.forEach(el => {
      selectAreaList.push({ label: el.areaName, value: el.areaCode })
    })
  }
}
//工作面选项切换
function areaChange(val) {
  selectCode.value = val
  // getList()
}

//获取喷雾列表
async function getList() {
  let res = await realData({ deviceName: formState.devicename, type: "DustPw", areaCode: selectCode.value })
  res.forEach((el, index) => {
    el.key = index
    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.value = res
}

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

//一键启停
function openAll(isOpen) {
  pwdModalVisible.value = true
  currentIsOpen.value = isOpen
  isBatchHandler.value = true
  pwdValue.value = ''
}

//确定
function checkPwd() {
  if (!isBatchHandler.value) {
    handlerSwitch()
  } else {
    selectedRowsList.value.forEach(async (row, index) => {
      currentId.value = row.realId
      await handlerSwitch(index)
    })
  }
}

async function handlerSwitch(index = 0) {

  const res = await getControl({
    type: 'DustPw',
    id: currentId.value,
    controlType: currentIsOpen.value ? 'run' : 'stop',
    passWord: pwdValue.value
  }
  )
  if (isBatchHandler.value) {
    if (selectedRowsList.value.length === index + 1) {
      if (res.success && !res.result) {
        // that.$message.success(res.message)
        // loadData()
      }
      pwdModalVisible.value = false
      isBatchHandler.value = false
    }
  } else {
    if (res.success && !res.result) {
      // that.$message.success(res.message)
      // that.loadData()
    }
    pwdModalVisible.value = false
  }
}

function openClick(id, isOpen,) {
  currentId.value = id
  pwdValue.value = ''
  currentIsOpen.value = isOpen
  pwdModalVisible.value = true
}
//取消
function clsoeMod() {
  pwdValue.value = ''
  pwdModalVisible.value = false
}

watch(()=>selectedRowsList.value,(newV,oldV)=>{
  if(newV.length!=0){
    disabled.value=false
  }else {
    disabled.value=true
  }
})

onMounted(() => {
  getFireAreaInfoList()
  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: 928px;
  margin: 0 10px;
  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>