SMO/src/views/system/stations/index.vue

<template>
  <div class="table-box">
    <div class="card table-main">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <el-form :model="pageable" label-width="auto"  :inline="true">
            <el-form-item label="自动站:">
              <SelectItem :select-data="selectedData" :select-list="platformList" :is-checkbox="true" @update:selectedItems="selectedItems" style="width: 200px"> </SelectItem>
            </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-button  style="margin-left: 10px" type="primary" plain  @click="handleAdd"> 新增 </el-button>-->
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 表格主体 -->
      <el-table stripe ref="tableRef" :border="true" :data="showList"  size="small">
        <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
          <template #default="scope">
            {{ (pageable.pageNum - 1) * pageable.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">
            <template #default="scope">
              <template v-if="item.prop === 'address'">
                {{scope.row['as_province']}}
                {{scope.row['as_city']}}
                {{scope.row['as_area']}}
                {{scope.row['as_address']}}
              </template>
              <template v-if="item.prop === 'map_level'">
                {{scope.row.map_level+1}}
              </template>
              <template v-if="item.prop === 'view_mode'">
                {{findLabelByValue(typeList,scope.row.view_mode)}}
              </template>
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button type="primary" link @click="handleUpdate(scope.row)">
                    <el-icon >
                      <Edit />
                    </el-icon>
                  </el-button>
                </el-tooltip>
<!--                <el-tooltip-->
<!--                  class="box-item"-->
<!--                  effect="dark"-->
<!--                  content="删除"-->
<!--                  placement="top"-->
<!--                >-->
<!--                  <el-button type="primary" link  @click="handleDelete(scope.row)">-->
<!--                    <el-icon >-->
<!--                      <Delete />-->
<!--                    </el-icon>-->
<!--                  </el-button>-->
<!--                </el-tooltip>-->
              </template>
            </template>
          </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 v-if="dialog.visible" :title="dialog.title" v-model="dialog.visible" width="1600px" append-to-body :close-on-click-modal="false">
      <el-tabs tab-position="left" class="demo-tabs" style="height: 700px">
        <el-tab-pane label="基本参数">
          <ParametersBasic :select-data="rowItem"></ParametersBasic>
        </el-tab-pane>
        <el-tab-pane label="观测要素">
         <Translation :select-data="rowItem" :sensorList="sensorList"></Translation>
        </el-tab-pane>
        <el-tab-pane label="仪器检定证">
          <VerificationCertificate :select-data="rowItem" :sensorList="sensorList"></VerificationCertificate>
        </el-tab-pane>
        <el-tab-pane label="阈值设置">
          <Threshold :select-data="rowItem"></Threshold>
        </el-tab-pane>
        <el-tab-pane label="保障策略设置">
          <StrategySafeguard :select-data="rowItem"></StrategySafeguard>
        </el-tab-pane>
        <el-tab-pane label="编报项目设置">
          <Newspapers :select-data="rowItem"></Newspapers>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="useProTable">
import Pagination from "@/components/ProTable/components/Pagination.vue";
import Translation from "./components/translation.vue";
import SelectItem from "@/components/SelectItem/index.vue";
import VerificationCertificate from "./components/verificationCertificate.vue";
import Threshold from "./components/threshold.vue";
import Newspapers from "./components/newspapers.vue";
import ParametersBasic from "./components/parametersBasic.vue";
import StrategySafeguard from "./components/strategySafeguard.vue";
import {ref, reactive, computed, onMounted} from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { ElMessageBox } from 'element-plus'
import {useUserStore} from "@/stores/modules/user";
import { getYallSensorList } from "@/api/modules/allData";





// 获取传感器字典
const sensorList = ref<any>([]);
const getSensorList = async () => {
  const { data } = await getYallSensorList();
  sensorList.value = data.list
};
//搜索站号
const selectedData= ref([])
const userStore = useUserStore();
//下拉数据
const platformList =ref<any>(computed(() => userStore.stations))
//列表展示原始数据
const processTableData = ref(computed(() => userStore.stations));
//列表展示查询分页后数据
const initList = computed(() => {
  const start = (pageable.value.pageNum - 1) * pageable.value.pageSize;
  const end = start + pageable.value.pageSize;
  // 根据分页参数截取数据
  return processTableData.value.slice(start, end);
});

// 响应式引用，存储初始列表的副本
const showList = ref([]);

const pageable = ref<any>({
  as_code: '',
  pageNum: 1,
  pageSize: 20,
  total: platformList.value.length
});

// 查询功能
const handleQuery = () => {
  pageable.value.pageNum = 1; // 重置到第一页
  const filteredData = processTableData.value.filter(item =>
    item.as_code.includes(pageable.value.as_code)
  );
  pageable.value.total = filteredData.length; // 更新总数
  // 确保通过 .value 修改 ref 的值
  showList.value = filteredData;
  console.log(showList.value);
};

// 重置功能
const resetQuery = () => {
  selectedData.value = []
  pageable.value.as_code = ''; // 清除查询条件
  pageable.value.pageNum = 1; // 重置到第一页
  pageable.value.total = processTableData.value.length; // 重置总数
  // 确保通过 .value 修改 ref 的值
  showList.value = processTableData.value.slice((pageable.value.pageNum - 1) * pageable.value.pageSize, pageable.value.pageNum * pageable.value.pageSize);
};
// 每页条数改变
const handleSizeChange = (val: number) => {
  pageable.value.pageSize = val;
  pageable.value.pageNum = 1; // 重置到第一页
  updateShowList();
};

// 当前页改变
const handleCurrentChange = (val: number) => {
  pageable.value.pageNum = val;
  updateShowList();
};

// 更新显示列表
const updateShowList = () => {
  if (pageable.value.as_code) {
    const filteredData = processTableData.value.filter(item =>
      item.as_code.includes(pageable.value.as_code)
    );
    showList.value = filteredData.slice((pageable.value.pageNum - 1) * pageable.value.pageSize, pageable.value.pageNum * pageable.value.pageSize);
  } else {
    showList.value = processTableData.value.slice((pageable.value.pageNum - 1) * pageable.value.pageSize, pageable.value.pageNum * pageable.value.pageSize);
  }
};


const selectedItems =(data)=>{
  if(data.length>0){
    pageable.value.as_code = data[0]
  }
};


// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "as_depart", label: "部别" },
  { prop: "as_name", label: "站名" },
  { prop: "as_code", label: "站号" },
  { prop: "map_level", label: "地图层级" },
  { prop: "address", label: "地址" },
  { prop: "as_lon", label: "经度" },
  { prop: "as_lat", label: "纬度" },
  { prop: "as_auditor", label: "预审员"},
  { prop: "check_leader", label: "测试组长"},
  { prop: "station_leader", label: "台长"},
  { prop: "view_mode", label: "观测方式"},
  { prop: "operation", label: "操作", width:150,align: 'center' }
]);

const dialog = reactive<any>({
  visible: false,
  title: ''
});
const formRef = ref<any>();

const initFormData = ref<any>(
  {
    code: "",
    type: "",
    name: "",
    startTime:"",
    endTime:"",
    remark: ""
  }
);


const form = ref<any>({...initFormData});

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "新增台站";
}

const rowItem = ref({})

/** 修改按钮操作 */
const handleUpdate = async (row?: any) => {
  reset();
  rowItem.value = row
  dialog.visible = true;
  dialog.title = "编辑台站";
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  formRef.value?.resetFields();
}

/** 提交按钮 */
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      dialog.visible = false;
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: any) => {
  ElMessageBox.confirm('是否确认删除编号为"' + row.b + '"的数据项？', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
    title:'删除数据',
    draggable: true
  })
    .then(() => {

    })
    .catch(() => {

    })
}

function findLabelByValue(noticeTypeList, value) {
  const item = noticeTypeList.find(item => item.value === value);
  return item ? item.label : null;
}

const typeList= [
  {
    value: 0,
    label: '人工值班',
  },
  {
    value: 1,
    label: '自动值班',
  },
  {
    value: 2,
    label: '自动值班',
  }
]
onMounted(() => {
  getSensorList()
  // 在组件挂载时，将计算属性 initList 的值赋值给 showList
  showList.value = [...initList.value];
});
</script>