代码提交

.env.development

@@ -18,4 +18,4 @@ VITE_PWA = false
 VITE_API_URL = /api
 
 # 开发环境跨域代理，支持配置多个
-VITE_PROXY = [["/api","http://192.168.43.77:18088"]]
+VITE_PROXY = [["/api","http://192.168.0.106:18088"]]

src/api/interface/index.ts

@@ -49,6 +49,7 @@ export namespace Login {
   }
 }
 
+
 // 用户管理模块
 export namespace User {
   export interface ReqUserParams extends ReqPage {
@@ -104,3 +105,17 @@ export namespace User {
 
 export class Platform {
 }
+
+export class ElementColumnsList {
+  data_r_table?: string;
+  data_id?: number;
+  data_type?: string;
+  data_item?: string;
+  data_name?: string;
+  data_unit?: string;
+  data_h_table?: string;
+  data_value?: string;
+  data_order?: number;
+  data_condition?: number;
+  isSelected?:boolean
+}

src/api/modules/allData.ts

@@ -1,4 +1,4 @@
-import {ResultData} from "@/api/interface/index";
+import {ElementColumnsList, ResPage, ResultData} from "@/api/interface/index";
 import { PORT1 } from "@/api/config/servicePort";
 import http from "@/api";
 
@@ -8,5 +8,27 @@ import http from "@/api";
  */
 // 获取自动站基本信息
 export const getPlatformList = (params: {}) => {
-  return http.post<ResultData<any>>(PORT1 + `/queryasinfo`, params);
+  return http.post<ResPage<any>>(PORT1 + `/queryasinfo`, params);
 };
+
+
+//查询所有人工要素字典表
+export const getRgDataList = () => {
+  return http.post<ResPage<ElementColumnsList[]>>(PORT1 + `/queryalldataList`);
+};
+
+
+
+//查询观测要素
+export const getDataItemList = (params:{}) => {
+  return http.post<ResPage<any>>(PORT1 + `/querydataitem`,params);
+};
+
+
+//根据条件查询危险天气记录表
+export const getTacRecordList = (params:{}) => {
+  return http.post<ResPage<any>>(PORT1 + `/querytactrecordlist`,params);
+};
+
+
+

src/layouts/components/Header/components/Avatar.vue

@@ -62,6 +62,8 @@ const logout = () => {
     // 2.清除 Token
     userStore.setToken("");
     userStore.setAsInfo([]);
+    userStore.setUserInfo({})
+    userStore.clearAllData()
 
     // 3.重定向到登陆页
     router.replace(LOGIN_URL);

src/stores/interface/index.ts

@@ -34,17 +34,17 @@ export interface UserState {
 }
 
 export interface user {
-  name: string,
-  user_account:string,
-  user_id:string,
-  role_id:string,
-  user_job:string,
-  user_password:string,
-  user_name:string,
-  user_phone:string,
-  user_unit:string,
-  role_name:string,
-  role_permissions:string
+  name?: string,
+  user_account?:string,
+  user_id?:string,
+  role_id?:string,
+  user_job?:string,
+  user_password?:string,
+  user_name?:string,
+  user_phone?:string,
+  user_unit?:string,
+  role_name?:string,
+  role_permissions?:string
 }
 
 export interface asInfos {

src/stores/modules/user.ts

@@ -21,6 +21,12 @@ export const useUserStore = defineStore({
     },
     setAsInfo(asInfo: UserState["asInfo"]) {
       this.asInfo = asInfo;
+    },
+    // Clear all data
+    clearAllData() {
+      this.token = "";
+      this.userInfo = {};
+      this.asInfo = [];
     }
   },
   persist: piniaPersistConfig("atmosphere-user1")

src/styles/common.scss

@@ -128,6 +128,8 @@
     padding: 0 20px 20px 20px;
     text-align: left;
     gap: 20px;
+    overflow-y: auto;
+    max-height: 500px;
   }
   .item-tag {
     cursor: pointer;

src/views/alarm/allData/index.vue

@@ -4,9 +4,9 @@
       <!-- 表格头部 操作按钮 -->
       <div class="table-header">
         <div class="header-button-lf">
-          <el-form :model="queryParams" label-width="auto" :inline="true">
+          <el-form :model="pageable" 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-select v-model="pageable.as_code_list"  multiple collapse-tags   filterable placeholder="请搜索自动站" remote reserve-keyword clearable  style="width: 300px">
                 <el-option
                   v-for="item in platformList"
                   :key="item.as_code"
@@ -34,11 +34,16 @@
       <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" @sort-change="handleSortChange">
         <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'" :sortable="item.sortable" :show-overflow-tooltip="true">
+            <template #default="scope">
+              <template v-if="item.prop === 'data_time_i'">
+                {{formatDate(scope.row.data_time_i)}}
+              </template>
+            </template>
           </el-table-column>
         </template>
         <!-- 无数据 -->
@@ -61,27 +66,109 @@
         <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>
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='风'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="温湿度">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='温湿度'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="气压">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='气压'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="降水">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='降水'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="云">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='云'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="能见度">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='能见度'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="天气现象">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='天气现象'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="积雪">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='积雪'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="地面温度">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='地面温度'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="大气电场">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='大气电场'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="闪电">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='闪电'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="日照">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='日照'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="总辐射">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='总辐射'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="日照文">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='日照文'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="水文">
+            <div class="container-tag">
+              <template v-for="item in elementList" :key="item.id"  >
+                <div v-if="item.data_type==='水文'"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.data_name}}</div>
+              </template>
             </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>
@@ -99,22 +186,14 @@ import Pagination from "@/components/ProTable/components/Pagination.vue";
 import {ref, reactive, onMounted} from "vue";
 import { ColumnProps } from "@/components/ProTable/interface";
 import {ElTable} from "element-plus";
-import {getPlatformList} from "@/api/modules/allData";
-import { Platform } from "@/api/interface";
+import {getDataItemList, getPlatformList, getRgDataList} from "@/api/modules/allData";
+import { Platform} from "@/api/interface";
 const tableRef = ref<InstanceType<typeof ElTable>>();
 const dialog = reactive<any>({
   visible: false,
   title: ''
 });
 
-const handleSetting = () => {
-  dialog.title = "列表字段设置"
-  dialog.visible = true;
-}
-
-const submitForm = () => {
-
-}
 
 const cancel = () => {
   dialog.visible = false;
@@ -128,34 +207,37 @@ const handleSortChange = ({ column, prop, order }) =>{
 }
 
 const pageable = ref<any>({
+  data_type: 0,
+  time_order: 0,
+  as_code_list:undefined,
+  data_items:[],
   pageNum: 1,
   pageSize: 20,
-  total: 22
-});
-
-const queryParams = ref({
-  name: "",
-  pageNum: 1,
-  pageSize: 20,
-  total: 22
+  total: 0
 });
 
 // 查询功能
 const handleQuery = () => {
-  queryParams.value.pageNum = 1;
+  pageable.value.pageNum = 1;
+  getList();
+
 };
 
-//搜索功能
+//重置功能
 const resetQuery = () => {
-  queryParams.value.pageNum = 1;
+  pageable.value.pageNum = 1;
+  pageable.value.as_code_list = undefined
+  getList();
 };
 
+
 /**
  * @description 每页条数改变
  * @param {Number} val 当前条数
  * @return void
  * */
 const handleSizeChange = (val: number) => {
+  console.log("=====");
   console.log(val);
 };
 
@@ -165,295 +247,82 @@ const handleSizeChange = (val: number) => {
  * @return void
  * */
 const handleCurrentChange = (val: number) => {
+  pageable.value.pageNum = val
+  console.log("=====1");
   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"
-  },
+const processTableData = ref([]);
+
+// 表格配置项
+let columns = reactive<ColumnProps[]>([]);
+
+//自定义部分表头
+let customizeColumns= ref<any>([
   {
-    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"
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_id: 31,
+    data_type: "风",
+    data_item: "DI_2_GE_10_FEN_ZHONG_PING_JUN_FENG_SU",
+    data_name: "第2个10分钟平均风速",
+    data_unit: "m/s",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
   },
   {
-    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"
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_id: 2,
+    data_type: "风",
+    data_item: "ER_FEN_ZHONG_PING_JUN_FENG_XIANG",
+    data_name: "2分钟风向",
+    data_unit: "°",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
   },
   {
-    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"
+    data_id: 1,
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_type: "风",
+    data_name: "2分钟风速",
+    data_item: "ER_FEN_ZHONG_PING_JUN_FENG_SU",
+    data_unit: "m/s",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
   }
-]);
+])
 
-// 表格配置项
-const columns = reactive<ColumnProps[]>([
-  { prop: "a", label: "站名" },
-  { prop: "b", label: "站号" },
-  { prop: "c", label: "地址" },
-  { prop: "d", label: "观测时间" },
-  { prop: "e", label: "瞬风风速(m/s)",sortable: true },
-  { prop: "f", label: "瞬风方向(°)",sortable: true },
-  { prop: "g", label: "气温(℃)",sortable: true },
-  { prop: "h", label: "相对湿度(%)" ,sortable: true},
-  { prop: "i", label: "漏点温度(℃)",sortable: true }
-]);
 
+const updateColumns = () => {
+  const column = [
+    { prop: "as_name", label: "站名", width: 100 },
+    { prop: "as_code", label: "站号", width: 100 },
+    { prop: "data_time_i", label: "观测时间", width: 170 }
+  ];
 
+  const newColumns = customizeColumns.value.map(item => ({
+    prop: item.data_id,
+    label: item.data_name +'('+item.data_unit+')',
+    sortable: true,
+    width: calculateTextLengthInPixels(item.data_name)
+  }));
 
+  columns = [...column, ...newColumns];
+  pageable.value.data_items = [...customizeColumns.value];
+  getList();
+}
+
+//操作 自定义部分表头
+const copiedCustomizeColumns = ref<any>([...customizeColumns.value]);
 
 // 查询自动站列表
 const queryas = ref<Platform>({
-  pagesize: 20,
+  pagesize: 50,
   currentpage: 1
 })
 
@@ -461,11 +330,83 @@ const platformList =ref<any>([])
 
 const getPlatforms = async () => {
   const { data } = await getPlatformList(queryas.value);
-  platformList.value = data
+  platformList.value = data.list
+};
+
+
+// 查询所有人工要素字典表
+const elementList =ref<any>([])
+const getAllRgDataList = async () => {
+  const { data } = await getRgDataList();
+  elementList.value = data.list
+};
+
+const getList = async () => {
+  const { data } = await getDataItemList(pageable.value);
+  processTableData.value = data.list
+  if(processTableData.value){
+    const result = processTableData.value[0].data_list.map(item => ({
+      [item.data_id]: item.data_value
+    }));
+    console.log(result);
+  }
 };
 
+// 要素的选中和取消
+const toggleSelection=(item)=> {
+    item.isSelected=!item.isSelected
+   if(item.isSelected){
+     //添加
+     copiedCustomizeColumns.value.push(item)
+  }else {
+     //删除
+     copiedCustomizeColumns.value= copiedCustomizeColumns.value.filter(column => column.data_id !== item.data_id);
+   }
+
+}
+
+const handleSetting = () => {
+  elementList.value.forEach(element => {
+    const column = copiedCustomizeColumns.value.find(col => col.data_id === element.data_id);
+    if (column) {
+      element.isSelected = true;
+    } else {
+      element.isSelected = false;
+    }
+  });
+
+  dialog.title = "列表字段设置"
+  dialog.visible = true;
+}
+
+const submitForm = () => {
+  dialog.visible = false;
+  customizeColumns.value = [...copiedCustomizeColumns.value]
+  updateColumns()
+}
+
+// 大概计算字符串长度
+function calculateTextLengthInPixels(text) {
+  return (text.length * 14)+100;
+}
+
+//时间戳转换为指定格式的日期字符串
+function formatDate(timestamp) {
+  const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
 onMounted(() => {
+  updateColumns()
   getPlatforms()
+  getAllRgDataList()
 })
 
+
+
 </script>

src/views/alarm/allWeather/index.vue

@@ -4,27 +4,20 @@
       <!-- 表格头部 操作按钮 -->
       <div class="table-header">
         <div class="header-button-lf">
-          <el-form :model="queryParams" label-width="auto"  :inline="true">
+          <el-form :model="pageable" label-width="auto"  :inline="true">
             <el-form-item label="站号:">
-              <el-select v-model="queryParams.code"  filterable placeholder="请选择" clearable style="width: 200px">
-                <el-option label="RS0001" value="RS0001" />
-                <el-option label="RS0002" value="RS0002" />
+              <el-select v-model="as_code_list" @change="changeCodeList" collapse-tags  filterable placeholder="请搜索自动站" remote reserve-keyword clearable  style="width: 300px">
+                <el-option
+                  v-for="item in platformList"
+                  :key="item.as_code"
+                  :label="item.as_code +' '+item.as_name"
+                  :value="item.as_code"
+                />
+                <template #prefix>
+                  <el-icon class="el-input__icon"><search /></el-icon>
+                </template>
               </el-select>
             </el-form-item>
-            <el-form-item label="告警类型:">
-              <el-select v-model="queryParams.type" placeholder="请选择" clearable style="width: 200px">
-                <el-option label="能见度" value="1" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="告警时间:">
-              <el-date-picker
-                v-model="queryParams.time"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              />
-            </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="handleQuery"> 查询 </el-button>
               <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
@@ -34,13 +27,30 @@
       </div>
       <!-- 表格主体 -->
       <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" @sort-change="handleSortChange">
-        <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
+        <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'" :sortable="item.sortable" :show-overflow-tooltip="true">
+          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :sortable="item.sortable" :show-overflow-tooltip="true" >
+            <template #default="scope">
+              <template v-if="item.prop === 'tact_state'">
+                {{findLabelByValue(tactStateList,scope.row.tact_state)}}
+              </template>
+              <template v-if="item.prop === 'tact_type'">
+                {{findLabelByValue(dataTypeList,scope.row.tact_type)}}
+              </template>
+              <template v-if="item.prop === 'alarm_on_time_i'">
+                {{scope.row.alarm_on_time_i?formatDate(scope.row.alarm_on_time_i):'--'}}
+              </template>
+              <template v-if="item.prop === 'alarm_off_time_i'">
+                {{scope.row.alarm_off_time_i?formatDate(scope.row.alarm_off_time_i):'--'}}
+              </template>
+              <template v-if="item.prop === 'notice_type'">
+                {{findLabelByValue(noticeTypeList,scope.row.notice_type)}}
+              </template>
+            </template>
           </el-table-column>
         </template>
         <!-- 无数据 -->
@@ -61,22 +71,100 @@
 
 <script setup lang="ts" name="useProTable">
 import Pagination from "@/components/ProTable/components/Pagination.vue";
-import { ref, reactive } from "vue";
+import {ref, reactive, onMounted} from "vue";
 import { ColumnProps } from "@/components/ProTable/interface";
+import { getPlatformList, getTacRecordList} from "@/api/modules/allData";
+import {Platform} from "@/api/interface";
 const pageable = ref<any>({
+  as_code_list: [],
+  tact_state_on: true,
+  tact_state:0,
   pageNum: 1,
   pageSize: 20,
-  total: 2
+  total: 1
 });
 
-const queryParams = ref({
-  code: '',
-  type:'',
-  time:'',
-  pageNum: 1,
-  pageSize: 20,
-  total: 2
-});
+const as_code_list = ref('')
+
+const changeCodeList =(value)=>{
+  if(value){
+    pageable.value.as_code_list = [value]
+  }else {
+    pageable.value.as_code_list= []
+  }
+
+
+}
+
+const timeBegin = ref()
+
+
+const tact_state =ref(0)
+
+const tactList = [
+  {
+    value: 0,
+    label: '全部',
+  }
+]
+
+const noticeTypeList= [
+  {
+    value: 0,
+    label: '字幕通知',
+  },
+  {
+    value: 1,
+    label: '声音通知',
+  }
+]
+
+const tactStateList= [
+  {
+    value: 0,
+    label: '告警中',
+  },
+  {
+    value: 1,
+    label: '已消警',
+  }
+]
+
+
+const dataTypeList= [
+  {
+    value: 0,
+    label: '能见度',
+  },
+  {
+    value: 1,
+    label: '风速',
+  },
+  {
+    value: 2,
+    label: '大气电场',
+  },{
+    value: 3,
+    label: '云量',
+  },{
+    value: 4,
+    label: '云高',
+  },{
+    value: 5,
+    label: '温度',
+  },{
+    value: 6,
+    label: '湿度',
+  },{
+    value: 7,
+    label: '小时雨量',
+  }
+]
+
+function findLabelByValue(noticeTypeList, value) {
+  const item = noticeTypeList.find(item => item.value === value);
+  return item ? item.label : null;
+}
 
 const handleSortChange = ({ column, prop, order }) =>{
   // 在这里发送请求到服务器端进行远程排序
@@ -85,14 +173,29 @@ const handleSortChange = ({ column, prop, order }) =>{
   console.log('order:', order)
 }
 
+
 // 查询功能
 const handleQuery = () => {
-  queryParams.value.pageNum = 1;
+  pageable.value.pageNum = 1;
+  getList()
 };
 
-//搜索功能
+//清空查询
 const resetQuery = () => {
-  queryParams.value.pageNum = 1;
+  pageable.value.pageNum = 1;
+  pageable.value = {
+    as_code_list: [],
+    tact_state_on: true,
+    tact_data_on: false,
+    tact_data: 0,
+    begin_time: undefined,
+    end_time: undefined,
+
+    pageNum: 1,
+    pageSize: 20,
+    total: 1
+  }
+  timeBegin.value = undefined
 };
 
 /**
@@ -101,7 +204,8 @@ const resetQuery = () => {
  * @return void
  * */
 const handleSizeChange = (val: number) => {
-  console.log(val);
+  pageable.value.pageSize = val
+  getList()
 };
 
 /**
@@ -110,49 +214,63 @@ const handleSizeChange = (val: number) => {
  * @return void
  * */
 const handleCurrentChange = (val: number) => {
-  console.log(val);
+  pageable.value.pageNum = val
+  getList()
 };
 
-const processTableData = ref([
-  {
-    id: "681913747276782417",
-    b: "RS001",
-    a: "测试本地",
-    c: "日常策略",
-    d: "告警中",
-    e: "能见度",
-    f: "143m",
-    g: "2023-06-12 15:00:00",
-    h: "2023-06-12 15:00:00",
-    i: "字幕通知",
-    j: "能见度告警 阈值(1分钟平均能见度 ≤ 500m)观测值(143m)"
-  },
-  {
-    id: "681913747276782417",
-    b: "M1987",
-    a: "固定站2",
-    c: "123",
-    d: "已消警",
-    e: "能见度",
-    f: "143m",
-    g: "2023-06-12 15:00:00",
-    h: "2023-06-12 15:00:00",
-    i: "字幕通知",
-    j: "能见度告警 阈值(1分钟平均能见度 ≤ 500m)观测值(143m)"
-  }
-]);
+const processTableData = ref([]);
 
 // 表格配置项
 const columns = reactive<ColumnProps[]>([
-  { prop: "b", label: "站号" },
-  { prop: "a", label: "站名" },
-  { prop: "c", label: "策略名称" },
-  { prop: "d", label: "策略状态" },
-  { prop: "e", label: "告警类型" },
-  { prop: "f", label: "观测值" },
-  { prop: "g", label: "告警时间",width:150,sortable: true },
-  { prop: "h", label: "消警时间",width:150,sortable: true },
-  { prop: "i", label: "通知方式" },
-  { prop: "j", label: "告警说明",width:400 }
+  { prop: "as_code", label: "站号" },
+  { prop: "as_name", label: "站名" },
+  { prop: "tact_name", label: "策略名称" },
+  { prop: "tact_state", label: "策略状态" },
+  { prop: "tact_type", label: "告警类型" },
+  { prop: "data_value", label: "观测值" },
+  { prop: "alarm_on_time_i", label: "告警时间",width:150,sortable: true },
+  { prop: "alarm_off_time_i", label: "消警时间",width:150,sortable: true},
+  { prop: "notice_type", label: "通知方式" },
+  { prop: "remark", label: "告警说明",width:400 }
 ]);
+
+
+const getList = async () => {
+  const { data } = await getTacRecordList(pageable.value);
+  processTableData.value = data.list
+  pageable.value.total = data.total
+};
+
+onMounted(() => {
+  getPlatforms();
+  getList()
+  setInterval(() => {
+    getList();
+  }, 60 * 1000); // 设置间隔为1分钟（60秒 * 1000毫秒）
+})
+
+const platformList =ref<any>([])
+// 查询自动站列表
+const queryas = ref<Platform>({
+  pagesize: 50,
+  currentpage: 1
+})
+
+const getPlatforms = async () => {
+  const { data } = await getPlatformList(queryas.value);
+  platformList.value = data.list
+};
+
+
+function formatDate(timestamp) {
+  const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+
 </script>

src/views/query/hazardousWeather/index.vue

@@ -4,25 +4,38 @@
       <!-- 表格头部 操作按钮 -->
       <div class="table-header">
         <div class="header-button-lf">
-          <el-form :model="queryParams" label-width="auto"  :inline="true">
+          <el-form :model="pageable" label-width="auto"  :inline="true">
             <el-form-item label="站号:">
-              <el-select v-model="queryParams.code" filterable placeholder="请选择" clearable style="width: 200px">
-                <el-option label="RS0001" value="RS0001" />
-                <el-option label="RS0002" value="RS0002" />
+              <el-select v-model="as_code_list" @change="changeCodeList" collapse-tags  filterable placeholder="请搜索自动站" remote reserve-keyword clearable  style="width: 300px">
+                <el-option
+                  v-for="item in platformList"
+                  :key="item.as_code"
+                  :label="item.as_code +' '+item.as_name"
+                  :value="item.as_code"
+                />
+                <template #prefix>
+                  <el-icon class="el-input__icon"><search /></el-icon>
+                </template>
               </el-select>
             </el-form-item>
             <el-form-item label="告警类型:">
-              <el-select v-model="queryParams.type" filterable placeholder="请选择" clearable style="width: 200px">
-                <el-option label="能见度" value="1" />
+              <el-select v-model="tact_state" filterable placeholder="请选择" clearable style="width: 200px">
+                <el-option
+                  v-for="item in tactList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
               </el-select>
             </el-form-item>
             <el-form-item label="告警时间:">
               <el-date-picker
-                v-model="queryParams.time"
+                v-model="timeBegin"
                 type="datetimerange"
                 range-separator="至"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
+                @change="changeBeginTime"
               />
             </el-form-item>
             <el-form-item>
@@ -36,11 +49,28 @@
       <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" @sort-change="handleSortChange">
         <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'" :sortable="item.sortable" :show-overflow-tooltip="true" >
+            <template #default="scope">
+              <template v-if="item.prop === 'tact_state'">
+                {{findLabelByValue(tactStateList,scope.row.tact_state)}}
+              </template>
+              <template v-if="item.prop === 'tact_type'">
+                {{findLabelByValue(dataTypeList,scope.row.tact_type)}}
+              </template>
+              <template v-if="item.prop === 'alarm_on_time_i'">
+                {{scope.row.alarm_on_time_i?formatDate(scope.row.alarm_on_time_i):'--'}}
+              </template>
+              <template v-if="item.prop === 'alarm_off_time_i'">
+                {{scope.row.alarm_off_time_i?formatDate(scope.row.alarm_off_time_i):'--'}}
+              </template>
+              <template v-if="item.prop === 'notice_type'">
+                {{findLabelByValue(noticeTypeList,scope.row.notice_type)}}
+              </template>
+            </template>
           </el-table-column>
         </template>
         <!-- 无数据 -->
@@ -61,22 +91,113 @@
 
 <script setup lang="ts" name="useProTable">
 import Pagination from "@/components/ProTable/components/Pagination.vue";
-import { ref, reactive } from "vue";
+import {ref, reactive, onMounted} from "vue";
 import { ColumnProps } from "@/components/ProTable/interface";
+import { getPlatformList, getTacRecordList} from "@/api/modules/allData";
+import {Platform} from "@/api/interface";
 const pageable = ref<any>({
+  as_code_list: [],
+  tact_state_on: false,
+  tact_data_on: false,
+  begin_time: undefined,
+  end_time: undefined,
+
   pageNum: 1,
   pageSize: 20,
   total: 1
 });
 
-const queryParams = ref({
-  code: '',
-  type:'',
-  time:'',
-  pageNum: 1,
-  pageSize: 20,
-  total: 2
-});
+const as_code_list = ref('')
+
+const changeCodeList =(value)=>{
+  if(value){
+    pageable.value.as_code_list = [value]
+  }else {
+    pageable.value.as_code_list= []
+  }
+
+
+}
+
+const timeBegin = ref()
+
+function   changeBeginTime(value) {
+  // 获取开始日期的时间戳
+  const startTimestamp = new Date(value[0]).getTime()/1000;
+  // 获取结束日期的时间戳
+  const endTimestamp = new Date(value[1]).getTime()/1000;
+
+  pageable.value.begin_time = startTimestamp
+  pageable.value.end_time = endTimestamp
+}
+
+
+const tact_state =ref(0)
+
+const tactList = [
+  {
+    value: 0,
+    label: '全部',
+  }
+]
+
+const noticeTypeList= [
+  {
+    value: 0,
+    label: '字幕通知',
+  },
+  {
+    value: 1,
+    label: '声音通知',
+  }
+]
+
+const tactStateList= [
+  {
+    value: 0,
+    label: '告警中',
+  },
+  {
+    value: 1,
+    label: '已消警',
+  }
+]
+
+
+const dataTypeList= [
+  {
+    value: 0,
+    label: '能见度',
+  },
+  {
+    value: 1,
+    label: '风速',
+  },
+  {
+    value: 2,
+    label: '大气电场',
+  },{
+    value: 3,
+    label: '云量',
+  },{
+    value: 4,
+    label: '云高',
+  },{
+    value: 5,
+    label: '温度',
+  },{
+    value: 6,
+    label: '湿度',
+  },{
+    value: 7,
+    label: '小时雨量',
+  }
+]
+
+function findLabelByValue(noticeTypeList, value) {
+  const item = noticeTypeList.find(item => item.value === value);
+  return item ? item.label : null;
+}
 
 const handleSortChange = ({ column, prop, order }) =>{
   // 在这里发送请求到服务器端进行远程排序
@@ -88,12 +209,26 @@ const handleSortChange = ({ column, prop, order }) =>{
 
 // 查询功能
 const handleQuery = () => {
-  queryParams.value.pageNum = 1;
+  pageable.value.pageNum = 1;
+  getList()
 };
 
-//搜索功能
+//清空查询
 const resetQuery = () => {
-  queryParams.value.pageNum = 1;
+  pageable.value.pageNum = 1;
+  pageable.value = {
+    as_code_list: [],
+    tact_state_on: false,
+    tact_data_on: false,
+    tact_data: 0,
+    begin_time: undefined,
+    end_time: undefined,
+
+    pageNum: 1,
+    pageSize: 20,
+    total: 1
+  }
+  timeBegin.value = undefined
 };
 
 /**
@@ -102,7 +237,8 @@ const resetQuery = () => {
  * @return void
  * */
 const handleSizeChange = (val: number) => {
-  console.log(val);
+  pageable.value.pageSize = val
+  getList()
 };
 
 /**
@@ -111,49 +247,60 @@ const handleSizeChange = (val: number) => {
  * @return void
  * */
 const handleCurrentChange = (val: number) => {
-  console.log(val);
+  pageable.value.pageNum = val
+  getList()
 };
 
-const processTableData = ref([
-  {
-    id: "681913747276782417",
-    b: "RS001",
-    a: "测试本地",
-    c: "日常策略",
-    d: "告警中",
-    e: "能见度",
-    f: "143m",
-    g: "2023-06-12 15:00:00",
-    h: "2023-06-12 15:00:00",
-    i: "字幕通知",
-    j: "能见度告警 阈值(1分钟平均能见度 ≤ 500m)观测值(143m)"
-  },
-  {
-    id: "681913747276782417",
-    b: "M1987",
-    a: "固定站2",
-    c: "123",
-    d: "已消警",
-    e: "能见度",
-    f: "143m",
-    g: "2023-06-12 15:00:00",
-    h: "2023-06-12 15:00:00",
-    i: "字幕通知",
-    j: "能见度告警 阈值(1分钟平均能见度 ≤ 500m)观测值(143m)"
-  }
-]);
+const processTableData = ref([]);
 
 // 表格配置项
 const columns = reactive<ColumnProps[]>([
-  { prop: "b", label: "站号" },
-  { prop: "a", label: "站名" },
-  { prop: "c", label: "策略名称" },
-  { prop: "d", label: "策略状态" },
-  { prop: "e", label: "告警类型" },
-  { prop: "f", label: "观测值" },
-  { prop: "g", label: "告警时间",width:150,sortable: true },
-  { prop: "h", label: "消警时间",width:150,sortable: true},
-  { prop: "i", label: "通知方式" },
-  { prop: "j", label: "告警说明",width:400 }
+  { prop: "as_code", label: "站号" },
+  { prop: "as_name", label: "站名" },
+  { prop: "tact_name", label: "策略名称" },
+  { prop: "tact_state", label: "策略状态" },
+  { prop: "tact_type", label: "告警类型" },
+  { prop: "data_value", label: "观测值" },
+  { prop: "alarm_on_time_i", label: "告警时间",width:150,sortable: true },
+  { prop: "alarm_off_time_i", label: "消警时间",width:150,sortable: true},
+  { prop: "notice_type", label: "通知方式" },
+  { prop: "remark", label: "告警说明",width:400 }
 ]);
+
+
+const getList = async () => {
+  const { data } = await getTacRecordList(pageable.value);
+  processTableData.value = data.list
+  pageable.value.total = data.total
+};
+
+onMounted(() => {
+  getPlatforms();
+  getList()
+})
+
+const platformList =ref<any>([])
+// 查询自动站列表
+const queryas = ref<Platform>({
+  pagesize: 50,
+  currentpage: 1
+})
+
+const getPlatforms = async () => {
+  const { data } = await getPlatformList(queryas.value);
+  platformList.value = data.list
+};
+
+
+function formatDate(timestamp) {
+  const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+
 </script>