gas-injection/src/views/vent/deviceManager/substationTabel/index.vue

<template>
  <div class="device-manager-box">
    <div class="content">
      <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
        <a-tab-pane tab="分站列表" key="device" />
        <a-tab-pane tab="历史数据" key="history" />
      </a-tabs>
      <div class="box-content">
        <div class="now-content" v-if="activeKey == 'device'">
          <NormalTable
            ref="normalTabel"
            :columns="columns"
            :searchFormSchema="searchFormSchema"
            :list="list"
            :formSchema="formSchema"
            :deleteById="deleteById"
            :batchDelete="batchDeleteById"
            :saveOrUpdate="saveOrUpdate"
            designScope="substation-tabel"
            title="分站列表"
            :showTab="false"
          >
            <template #filterCell="{ column, record }">
              <a-tag v-if="column.dataIndex === 'linkstatus'" :color="record.linkstatus == 0 ? '#999' : '#87d068'">{{
                record.linkstatus == 1 ? '链接' : '断开'
              }}</a-tag>
            </template>
            <template #action="{ record }">
              <a
                v-if="
                  record['strtype'] == 'http' ||
                  record['strtype'] == 'kafka' ||
                  record['strtype'] == 'ftp' ||
                  record['strtype'] == 'database' ||
                  record['strtype'] == 'txt'
                "
                class="table-action-link"
                @click="addDevices(record)"
                >同步设备</a
              >
            </template>
          </NormalTable>
        </div>
        <div class="history-content tab-item" v-if="activeKey == 'history'">
          <HistoryTable :scroll="scroll" :historyColumns="historyColumns" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="system-user" setup>
//ts语法
import { ref, onMounted, reactive, onUnmounted } from 'vue';
import NormalTable from '../comment/NormalTable.vue';
import HistoryTable from '../comment/HistoryTable.vue';
import { historyColumns, columns, searchFormSchema, formSchema } from './substation.data';
import { list, getImportUrl, getExportUrl, deleteById, getHistory, batchDeleteById, saveOrUpdate, addDevice } from './substation.api';
import { message } from 'ant-design-vue';
// import dayjs from 'dayjs';
const normalTabel = ref();
let timer = undefined;
let activeKey = ref('device');
const scroll = reactive({
  y: 710,
});
function reload() {
  timer = setInterval(() => {
    if (normalTabel.value) normalTabel.value.reload();
  }, 30000);
}

function addDevices(record) {
  addDevice({ id: record.id })
    .then((result) => {
      // message.success('同步生成')
    })
    .catch(() => {
      message.success('同步失败');
    });
}
//tab选项切换
function onChangeTab(tab) {
  activeKey.value = tab;
  if (activeKey.value == 'device') {
    // clearTimeout(timer1);
  } else {
  }
}

onMounted(() => {
  reload();
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style lang="less" scoped>
.content {
  .tab-box {
    display: flex;
    color: #fff;
    position: relative;
    background: linear-gradient(#001325, #012e4f);

    :deep(.zxm-tabs-nav) {
      margin: 0 !important;

      .zxm-tabs-tab {
        width: 180px;
        height: 45px;
        background: url('/@/assets/images/top-btn.png') center no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        font-size: 16px;
      }

      .zxm-tabs-tab-active {
        width: 180px;
        position: relative;
        background: url('/@/assets/images/top-btn-select.png') center no-repeat;
        background-size: cover;

        .zxm-tabs-tab-btn {
          color: #fff !important;
        }
      }

      .zxm-tabs-ink-bar {
        width: 0 !important;
      }

      .zxm-tabs-tab + .zxm-tabs-tab {
        margin: 0 !important;
      }
    }
  }
}
.search-area {
  padding: 5px;
  margin: 10px;
  box-sizing: border-box;
}
::v-deep(.zxm-form-item-label > label) {
  color: #fff !important;
}
</style>