代码提交

src/api/modules/allData.ts

@@ -11,7 +11,6 @@ export const getPlatformList = (params: {}) => {
   return http.post<ResPage<any>>(PORT1 + `/queryasinfo`, params,{ loading: false });
 };
 
-
 //查询所有人工要素字典表
 export const getRgDataList = () => {
   return http.post<ResPage<ElementColumnsList[]>>(PORT1 + `/queryalldataList`);

src/views/system/stations/index.vue

@@ -4,36 +4,37 @@
       <!-- 表格头部 操作按钮 -->
       <div class="table-header">
         <div class="header-button-lf">
-          <el-form-item label="站名:">
-            <el-select v-model="queryParams.name" filterable placeholder="请选择" clearable style="width: 200px">
-              <el-option label="自动站1" value="1" />
-            </el-select>
-          </el-form-item>
-          <el-form :model="queryParams" label-width="auto"  :inline="true">
-            <el-form-item label="站号:">
-              <el-select v-model="queryParams.code" filterable placeholder="请选择" clearable style="width: 200px">
-                <el-option label="M1994" value="M1994" />
-                <el-option label="M1995" value="M1995" />
-              </el-select>
+          <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-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="processTableData"  size="small">
+      <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">
-            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
+            {{ (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 === 'view_mode'">
+                {{findLabelByValue(typeList,scope.row.view_mode)}}
+              </template>
               <template v-if="item.prop === 'operation'">
                 <el-tooltip
                   class="box-item"
@@ -47,18 +48,18 @@
                     </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>
+<!--                <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>
@@ -107,87 +108,110 @@
 <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 } from "vue";
+import {ref, reactive, computed, onMounted} from "vue";
 import { ColumnProps } from "@/components/ProTable/interface";
 import { ElMessageBox } from 'element-plus'
-import {ResStationsList} from "@/api/interface";
-const pageable = ref<any>({
-  pageNum: 1,
-  pageSize: 20,
-  total: 1
+import {useUserStore} from "@/stores/modules/user";
+
+
+//搜索站号
+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 queryParams = ref({
-  code: '',
-  name:'',
+// 响应式引用，存储初始列表的副本
+const showList = ref([]);
+
+const pageable = ref<any>({
+  as_code: '',
   pageNum: 1,
   pageSize: 20,
-  total: 2
+  total: platformList.value.length
 });
 
 // 查询功能
 const handleQuery = () => {
-  queryParams.value.pageNum = 1;
+  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 = () => {
-  queryParams.value.pageNum = 1;
+  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);
 };
-
-/**
- * @description 每页条数改变
- * @param {Number} val 当前条数
- * @return void
- * */
+// 每页条数改变
 const handleSizeChange = (val: number) => {
-  console.log(val);
+  pageable.value.pageSize = val;
+  pageable.value.pageNum = 1; // 重置到第一页
+  updateShowList();
 };
 
-/**
- * @description 当前页改变
- * @param {Number} val 当前页
- * @return void
- * */
+// 当前页改变
 const handleCurrentChange = (val: number) => {
-  console.log(val);
+  pageable.value.pageNum = val;
+  updateShowList();
 };
 
-const processTableData = ref([
-  {
-    id: "681913747276782417",
-    a: "测试验证",
-    b: "固定站2",
-    c: "M1927",
-    d: "1级",
-    e: "公园",
-    f: "110°0'0”E”",
-    g: "33°0'0”N",
-    h: "小王",
-    i: "张三",
-    j: "李四",
-    k: "1"
+// 更新显示列表
+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: "a", label: "部别" },
-  { prop: "b", label: "站名" },
-  { prop: "c", label: "站号" },
-  { prop: "d", label: "地图层级" },
-  { prop: "e", label: "地址" },
-  { prop: "f", label: "经度" },
-  { prop: "g", label: "纬度" },
-  { prop: "h", label: "预审员"},
-  { prop: "i", label: "测试组长"},
-  { prop: "j", label: "台长"},
-  { prop: "k", label: "观测方式"},
+  { 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' }
 ]);
 
@@ -262,4 +286,27 @@ const handleDelete = async (row?: any) => {
     })
 }
 
+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(() => {
+  // 在组件挂载时，将计算属性 initList 的值赋值给 showList
+  showList.value = [...initList.value];
+});
 </script>