hldy_yunwei_vue/src/views/iot/tq/water/index.vue

<template>
  <div>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:sync-outlined" @click="handleSyncDevice"> 拉取设备</a-button>
        <a-button type="primary" preIcon="ant-design:sync-outlined" @click="handleSyncCollector"> 更新在线状态</a-button>
        <a-button type="primary" preIcon="ant-design:setting-outlined" @click="handleConfig"> 配置管理</a-button>
      </template>
      <template #bodyCell="{ column, record, index, text }">
        <!-- <template v-if="column.dataIndex === 'address'">
          <a @click="showApiLog(record)"> {{record.address}} </a>
        </template> -->
        <template v-if="column.dataIndex === 'nuName'">
          <span v-if="!record.nuName"><a @click="handlePzhldy(record)"> 未配置 </a></span>
          <span v-else><a @click="handlePzhldy(record)"> {{record.nuName}} </a></span>
        </template>
        <template v-if="column.dataIndex === 'relayState'">
          <span v-if="record.relayState ==='1'" style="color:green">
            开阀
          </span>
          <span v-else style="color:red">
            关阀
          </span>
        </template>
<!--        <template v-if="column.dataIndex === 'batteryState'">
          <span v-if="record.batteryState ==='0'" style="color:green">
            正常
          </span>
          <span v-else style="color:red">
            低电
          </span>
        </template>-->
        <template v-if="column.dataIndex === 'online'">
          <span v-if="record.online ==='true'" style="color:green">
            在线
          </span>
          <span v-else style="color:red">
            离线
          </span>
        </template>
        <template v-if="column.dataIndex === 'csq'">
          <span v-if="record.csq > 20" style="color:green">
            高
          </span>
          <span v-else-if="record.csq < 10" style="color:red">
            低
          </span>
          <span v-else style="color:#1661c1">
            中
          </span>
        </template>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)"/>
      </template>
    </BasicTable>
    <HldyUtilsModal ref="hldyUtilsModal" @success="handleHldyParams" ></HldyUtilsModal>
    <ApiLogModal ref="apiLogModal"></ApiLogModal>
    <SyncLogListModal ref="syncLogModal"></SyncLogListModal>
    <ConfigModal ref="configModal"></ConfigModal>
    <a-modal v-model:visible="tipVisible" width="300px">
      <template #title>
        <Icon icon="ant-design:info-circle-outlined" :size="20" style="margin-right:10px;color:white;background:#1ea0fa;border-radius:10px;"/>{{tipTitle}}
      </template>
      <div style="text-align: center;margin: 40px 0;">
        {{tipContent}}
      </div>
      <template #footer style="text-align: center;">
        <a-button type="primary" style="margin-right: 35%" @click="handleCancel">知道了</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" name="iot-nuIotRegionInfo" setup>
  import {reactive, ref,h} from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useUserStore } from '/@/store/modules/user';
  import {Modal} from "ant-design-vue";
  import {list, waterReset, waterControl, waterRead, getAllMeter, getAllCollector} from './water.api';
  import { columns, searchFormSchema } from './water.data';
  import {useModal} from "@/components/Modal";
  import { defHttp } from '/@/utils/http/axios';
  import HldyUtilsModal from "@/views/utils/nuUtils/HldyUtilsModal.vue";
  import ApiLogModal from "@/views/iot/tq/electricity/apilog/WaterApiLogModal.vue";
  import SyncLogListModal from "/@/views/iot/SyncLog/WaterSyncLogListModal.vue";

  const queryParam = reactive<any>({});
  const apiLogModal = ref();
  const syncLogModal = ref();
  const hldyUtilsModal = ref();
  const configModal = ref();
  const tipVisible = ref(false);
  const tipTitle = ref('提示');
  const tipContent = ref('');
  //注册model
  const [registerModal, {openModal}] = useModal();
  //注册table数据
  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
    tableProps:{
      title: '智能水表',
      api: list,
      columns,
      canResize:false,
      showIndexColumn: true,
      formConfig: {
        //labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter:true,
        showAdvancedButton:false,
        fieldMapToNumber: [
        ],
        fieldMapToTime: [
        ],
      },
      actionColumn: {
        width: 200,
        fixed:'right'
      },
      beforeFetch: (params) => {
        return Object.assign(params, queryParam);
      },
    },
  })

  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext

  function handleCancel() {
    tipVisible.value = false;
  }
  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }

  /**
   * 操作栏
   */
  function getTableAction(record){
    return [
      {
        label: '抄表',
        onClick: handleRead.bind(null, record),
      },
      {
        label: '开阀',
        onClick: handleWaterControlKf.bind(null, record),
        ifShow: record.relayState == 0,
      },
      {
        label: '关阀',
        onClick: handleWaterControlGf.bind(null, record),
        ifShow: record.relayState == 1,
      },
      {
        label: '清零',
        popConfirm: {
          title: '是否确认清零',
          confirm: handleReset.bind(null, record),
          placement: 'topLeft',
        },
      },
      {
        label: '日志',
        onClick: showApiLog.bind(null, record),
      },
      // {
      //   label: '同步',
      //   onClick: handleSync.bind(null, record),
      // },
    ]
  }

  // 抄电表
  async function handleRead(record: Recordable) {
    const params = {
      'cid' : record.cid,
      'address' : record.address,
    };
    await waterRead(params);
    reload();
  }

  // 水表关阀
  async function handleWaterControlGf(record: Recordable) {
    if(record.relayState == '0'){
      tipVisible.value=true;
      tipTitle.value = "关阀";
      tipContent.value = "此水表已关阀！";
      // Modal.info({
      //   title: '关阀',
      //   content: h('div', {}, [
      //     h('p', '此水表已关阀！'),
      //   ]),
      //   onOk() {},
      // });
      return;
    }
    const params = {
      'cid' : record.cid,
      'address' : record.address,
      'type' : '53',
    };
    await waterControl(params);
    reload();
  }

  // 水表开阀
  async function handleWaterControlKf(record: Recordable) {
    if(record.relayState == '1'){
      tipVisible.value=true;
      tipTitle.value = "开阀";
      tipContent.value = "此水表已开阀！";
      // Modal.info({
      //   title: '开阀',
      //   content: h('div', {}, [
      //     h('p', '此水表已开阀！'),
      //   ]),
      //   onOk() {},
      // });
      return;
    }
    const params = {
      'cid' : record.cid,
      'address' : record.address,
      'type' : '43',
    };
    await waterControl(params);
    reload();
  }

  // 水表清零
  async function handleReset(record: Recordable) {
    const params = {
      'cid' : record.cid,
      'address' : record.address,
    };
    await waterReset(params);
    reload();
  }

  // 获取设备信息
  async function handleSyncDevice() {
    await getAllMeter({});
    reload();

  }

  // 采集器信息
  async function handleSyncCollector() {
    await getAllCollector({});
    reload();
  }

  /**
   * 查看api日志
   */
  function showApiLog(record){
    console.log(record);
    apiLogModal.value.disableSubmit = true;
    apiLogModal.value.showApiLog(record);
  }
  /**
   * 配置区域
   */
  function handlePzhldy(record){
    hldyUtilsModal.value.disableSubmit = true;
    hldyUtilsModal.value.edit(record);
  }

  //区域回调
  function handleHldyParams(params){
    defHttp.post({
      url: "/iot/tq/waterMeter/editHldy",
      params:params
    }).then(res=>{
      reload();
    })
  }
  //同步
  function handleSync(record: Recordable){
    syncLogModal.value.disableSubmit = true;
    syncLogModal.value.init(record);
  }

  function handleConfig(){
    configModal.value.disableSubmit = false;
    configModal.value.edit();
  }

</script>