SMO/src/views/alarm/allData/index.vue

<template>
  <div class="table-box">
    <div class="card table-main">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <el-form :model="queryParams" label-width="auto" :inline="true">
            <el-form-item label="自动站:">
              <el-select v-model="queryParams.name"   filterable placeholder="请搜索自动站" remote reserve-keyword clearable  style="width: 200px">
                <el-option label="站1" value="1" />
                <el-option label="站2" value="2" />
                <template #prefix>
                  <el-icon class="el-input__icon"><search /></el-icon>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> 查询 </el-button>
              <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="header-button-ri">
          <slot name="toolButton">
            <img class="setting" src="@/assets/images/setting2.png" @click="handleSetting" />
          </slot>
        </div>
      </div>
      <!-- 表格主体 -->
      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
        <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
          <template #default="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="item in columns" :key="item">
          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
          </el-table-column>
        </template>
        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
      <!-- 分页组件 -->
      <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
    </div>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="940px" append-to-body>
      <div style="height: 500px">
        <el-tabs tab-position="left" class="demo-tabs" style="height: 100%">
          <el-tab-pane label="风">
            <div class="container-tag">
              <div class="item-tag">2分钟平均风速</div>
              <div class="item-tag-active">2分钟平均风向</div>
              <div class="item-tag">10分钟平均风速</div>
              <div class="item-tag">10分钟平均风向</div>
              <div class="item-tag">小时最大风速</div>
              <div class="item-tag-active">小时最大风速的风向</div>
              <div class="item-tag">小时极大风速出现时间</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="温湿度">Config</el-tab-pane>
          <el-tab-pane label="气压">Role</el-tab-pane>
          <el-tab-pane label="降水">Task</el-tab-pane>
          <el-tab-pane label="云">Task</el-tab-pane>
          <el-tab-pane label="能见度">Task</el-tab-pane>
          <el-tab-pane label="天气现象">Task</el-tab-pane>
          <el-tab-pane label="积雪">Task</el-tab-pane>
          <el-tab-pane label="地面温度">Task</el-tab-pane>
          <el-tab-pane label="大气电场">Task</el-tab-pane>
          <el-tab-pane label="闪电">Task</el-tab-pane>
          <el-tab-pane label="日照">Task</el-tab-pane>
          <el-tab-pane label="总辐射">Task</el-tab-pane>
        </el-tabs>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="useProTable">
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { ref, reactive } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import {TabsInstance} from "element-plus";
const dialog = reactive<any>({
  visible: false,
  title: ''
});

const handleSetting = () => {
  dialog.title = "列表字段设置"
  dialog.visible = true;
}

const submitForm = () => {

}

const cancel = () => {
  dialog.visible = false;
}


const pageable = ref<any>({
  pageNum: 1,
  pageSize: 20,
  total: 1
});

const queryParams = ref({
  name: "",
  pageNum: 1,
  pageSize: 20,
  total: 1
});

// 查询功能
const handleQuery = () => {
  queryParams.value.pageNum = 1;
};

//搜索功能
const resetQuery = () => {
  queryParams.value.pageNum = 1;
};

/**
 * @description 每页条数改变
 * @param {Number} val 当前条数
 * @return void
 * */
const handleSizeChange = (val: number) => {
  console.log(val);
};

/**
 * @description 当前页改变
 * @param {Number} val 当前页
 * @return void
 * */
const handleCurrentChange = (val: number) => {
  console.log(val);
};

const processTableData = ref([
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  },
  {
    id: "681913747276782417",
    a: "测试本地",
    b: "RS001",
    c: "公园",
    d: "2024-09-02 22:57",
    e: "0.2",
    f: "150",
    g: "25.3",
    h: "61",
    i: "17.2"
  }
]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "a", label: "站名" },
  { prop: "b", label: "站号" },
  { prop: "c", label: "地址" },
  { prop: "d", label: "观测时间" },
  { prop: "e", label: "瞬风风速(m/s)" },
  { prop: "f", label: "瞬风方向(°)" },
  { prop: "g", label: "气温(℃)" },
  { prop: "h", label: "相对湿度(%)" },
  { prop: "i", label: "漏点温度(℃)" }
]);
</script>