代码提交

src/components/SelectItem/index.vue

@@ -13,7 +13,7 @@
         </el-input>
       </template>
       <el-checkbox v-if="!props.isCheckbox"  label="全选" v-model="checked1" @change="all"/>
-      <el-checkbox-group v-model="checkboxList" style="height: 300px;overflow-y: auto;" @change="changeCheckbox">
+      <el-checkbox-group v-model="checkboxList" style="max-height: 300px;overflow-y: auto;" @change="changeCheckbox">
         <el-checkbox v-for="item in filteredList" :label="item.as_code+' '+item.as_name" :value="item.as_code" />
       </el-checkbox-group>
     </el-popover>

src/views/query/qualityAudits/index.vue

@@ -4,12 +4,18 @@
       <!-- 表格头部 操作按钮 -->
       <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>
+              <SelectItem  :select-data="selectedData" :select-list="platformList" :is-checkbox="true" @update:selectedItems="selectedItems" style="width: 200px"> </SelectItem>
+            </el-form-item>
+            <el-form-item label="日期:">
+              <el-date-picker
+                v-model="recordDate"
+                type="month"
+                placeholder="选择月份"
+                :disabled-date="disabledDate"
+                @change="changeMultiTime">
+              </el-date-picker>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="handleQuery"> 查询 </el-button>
@@ -17,6 +23,16 @@
             </el-form-item>
           </el-form>
         </div>
+        <div class="header-button-ri">
+          <slot name="toolButton">
+            <div class="zt-box">
+              <img class="img-documented" src="@/assets/images/documented.png"/>
+              <span class="zt-title">正常</span>
+              <img class="img-documented" src="@/assets/images/documented_not.png"/>
+              <span class="zt-title">缺测</span>
+            </div>
+          </slot>
+        </div>
       </div>
       <!-- 表格主体 -->
       <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" class="el-table--small">
@@ -28,14 +44,14 @@
             </div>
           </template>
           <template #default="scope">
-            {{ (scope.$index).toString().padStart(2, '0') }}
+            {{ (scope.$index+1).toString().padStart(2, '0') }}
           </template>
         </el-table-column>
-
         <template v-for="item in columns" :key="item">
           <el-table-column v-bind="item" :align="item.align ?? 'center'">
             <template #default="scope">
-              <img class="img-documented" src="@/assets/images/documented.png">
+              <img v-if="scope.row[item.prop]===1" class="img-documented" src="@/assets/images/documented.png">
+              <img v-else class="img-documented" src="@/assets/images/documented_not.png">
             </template>
           </el-table-column>
         </template>
@@ -54,67 +70,331 @@
 </template>
 
 <script setup lang="ts" name="useProTable">
-import { ref, reactive } from "vue";
+import SelectItem from "@/components/SelectItem/index.vue";
+import {ref, computed, onMounted} from "vue";
 import { ColumnProps } from "@/components/ProTable/interface";
+import {useUserStore} from "@/stores/modules/user";
+import {getDataItemList} from "@/api/modules/allData";
+
+//获取站列表
+const userStore = useUserStore();
+const platformList =ref<any>(computed(() => userStore.stations))
+
+//搜索日期
+const recordDate = ref();
+const disabledDate = (time) => {
+  const today = new Date();
+  const month = today.getMonth();
+  const year = today.getFullYear();
+  // 将时间转换为日期对象
+  const date = new Date(time);
+  // 比较月份和年份，如果大于当前月份，则禁用
+  return date.getFullYear() === year && date.getMonth() > month;
+};
+
+const changeMultiTime = (time) => {
+  if (time) {
+    const year = new Date(time).getFullYear();
+    const month = new Date(time).getMonth();
+    const firstDayOfMonth = new Date(year, month, 1).setHours(1, 0, 0, 0); // 当月第一天1点的时间戳
+    const firstDayOfNextMonth = new Date(year, month + 1, 1).getTime(); // 下一个月第一天的时间戳，设置为00:00:00.000
+    // 更新时间戳
+    pageable.value.begin_time = Math.floor(firstDayOfMonth / 1000); // 转换为秒
+    pageable.value.end_time = Math.floor(firstDayOfNextMonth / 1000); // 转换为秒
+
+    //重置表头
+    columns.value = generateColumns(year,month+1)
+
+  } else {
+    // 如果没有选择月份，则默认为当前月份
+    const today = new Date();
+    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1).getTime();
+    const firstDayOfNextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1).getTime();
+    // 更新时间戳
+    pageable.value.begin_time = Math.floor(firstDayOfMonth / 1000); // 转换为秒
+    pageable.value.end_time = Math.floor(firstDayOfNextMonth / 1000); // 转换为秒
+
+    // 重置表头
+    columns.value = generateColumns(today.getFullYear(),today.getMonth()+1)
+  }
+};
+
+//搜索站号
+const selectedData= ref()
+const selectedItems =(data)=>{
+  if(data.length>0){
+    pageable.value.as_code_list = data
+    selectedData.value = data
+  }else {
+    pageable.value.as_code_list = firstPlatform.value
+    selectedData.value = firstPlatform.value
+  }
+};
+
+
+const firstPlatform = computed(() => {
+  if (platformList.value && platformList.value.length > 0) {
+    return [platformList.value[0].as_code];
+  } else {
+    return [];
+  }
+});
+
 const pageable = ref<any>({
+  data_type: false,
+  time_order: 0,
+  time_space:60,
+  begin_time:undefined,
+  end_time: undefined,
+  as_code_list:[],
+  data_items:[],
   pageNum: 1,
-  pageSize: 20,
-  total: 1
+  pageSize: 1000,
+  total: 0
 });
 
-const queryParams = ref({
-  code: ''
-});
+const customizeColumns= ref<any>([
+  {
+    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
+  },
+  {
+    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
+  },
+  {
+    data_id: 4,
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_type: "风",
+    data_name: "10分钟风向",
+    data_item: "SHI_FEN_ZHONG_PING_JUN_FENG_XIANG",
+    data_unit: "°",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
+  },
+  {
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_id: 3,
+    data_type: "风",
+    data_item: "SHI_FEN_ZHONG_PING_JUN_FENG_SU",
+    data_name: "10分钟风速",
+    data_unit: "m/s",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
+  },
+  {
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_id: 501,
+    data_type: "能见度",
+    data_item: "YI_FEN_ZHONG_PING_JUN_NENG_JIAN_DU",
+    data_name: "1分钟平均能见度",
+    data_unit: "m",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
+  },
+  {
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_id: 101,
+    data_type: "温湿度",
+    data_item: "QI_WEN",
+    data_name: "气温",
+    data_unit: "℃",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
+  },
+  {
+    data_id: 201,
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_type: "气压",
+    data_name: "水汽压",
+    data_item: "SHUI_QI_YA",
+    data_unit: "hPa",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
+  },
+  {
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_id: 109,
+    data_type: "温湿度",
+    data_item: "LU_DIAN_WEN_DU",
+    data_name: "露点温度",
+    data_unit: "℃",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
+  },
+  {
+    data_id: 202,
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_type: "气压",
+    data_name: "本站气压",
+    data_item: "BEN_ZHAN_QI_YA",
+    data_unit: "hPa",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
+  },{
+    data_id: 207,
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_type: "气压",
+    data_name: "海平面气压",
+    data_item: "HAI_PING_MIAN_QI_YA",
+    data_unit: "hPa",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
+  },
+  {
+    data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
+    data_id: 312,
+    data_type: "降水",
+    data_item: "XIAO_SHI_LEI_JI_JIANG_SHUI_LIANG_CHENG_ZHONG",
+    data_name: "小时累计降水量(称重)",
+    data_unit: "mm",
+    data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
+    data_value: "",
+    data_order: 0,
+    data_condition: 0
+  }
+])
+
+//重置功能
+const resetQuery = () => {
+  initData()
+};
+
 
 // 查询功能
 const handleQuery = () => {
-
+  pageable.value.pageNum = 1
+  getList()
 };
 
-//搜索功能
-const resetQuery = () => {
-
+const getList = async () => {
+  if(pageable.value.as_code_list===undefined||pageable.value.as_code_list.length===0){
+    // 没有站不给数据
+    processTableData2.value = []
+    return;
+  }
+  pageable.value.data_items = customizeColumns.value
+  const { data } = await getDataItemList(pageable.value);
+  processTableData2.value = data.list
+  pageable.value.total = data.total
+  processTableData.value = processTableDatas()
 };
 
-const processTableData = ref(processTableDatas());
+const processTableData = ref([]);
+const processTableData2 = ref([]);
 
 function processTableDatas(){
+  // 初始化数据数组
   const datas = [];
-  for (let i = 1; i <= 24; i++) {
-    const datas2 = [];
-    datas2.push({day1 : "1"})
-    datas2.push({day2 : "1"})
-    datas2.push({day3 : "1"})
-    datas2.push({day4 : "1"})
-    datas2.push({day5 : "1"})
-    datas2.push({day6 : "1"})
-    datas2.push({day7 : "1"})
-    datas2.push({day8 : "1"})
-    datas2.push({day9 : "1"})
-    datas2.push({day10 : "1"})
-    datas2.push({day11 : "1"})
-    datas2.push({day12 : "1"})
-    datas2.push({day13 : "1"})
-    datas.push(datas2)
+  const daysInMonth = new Date(yearDate.value, monthDate.value, 0).getDate();
+  for (let x = 1; x <= 24; x++) {
+    const hourStr = x.toString().padStart(2, '0');
+    const datas2 = {};
+    for (let i = 1; i <= daysInMonth; i++) {
+      const dayStr = i.toString().padStart(2, '0');
+      const monthDateStr = monthDate.value.toString().padStart(2, '0');
+      const t = `${yearDate.value}-${monthDateStr}-${dayStr}`;
+
+      if(x==24){
+        // 创建一个新的 Date 对象，表示当前时间
+        let currentDate = new Date(`${yearDate.value}-${monthDateStr}-${dayStr}T00:00`);
+
+        // 将日期增加一天
+        currentDate.setDate(currentDate.getDate() + 1);
+
+        // 格式化新的日期为所需的字符串格式
+        let year = currentDate.getFullYear();
+        let month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
+        let day = String(currentDate.getDate()).padStart(2, '0');
+        let hour = String(currentDate.getHours()).padStart(2, '0');
+
+        const t2 = `${year}-${month}-${day} ${hour}:00`;
+        datas2[t] = checkDataTimeExists(t2);
+
+        console.log(t2)
+      }else {
+        const  t2 = `${yearDate.value}-${monthDateStr}-${dayStr} ${hourStr}:00`;
+        datas2[t] = checkDataTimeExists(t2);
+      }
+    }
+    datas.push(datas2);
   }
   return datas;
+
 }
+const checkDataTimeExists = (targetDataTime) => {
+  if (!processTableData2.value || processTableData2.value.length === 0) {
+    // 数组为空或未定义，返回0
+    return 0;
+  }
+  return processTableData2.value.some(item => {
+    return item.data_time === targetDataTime;
+  }) ? 1 : 0;
+};
 
-// 假设当前月份为5月
-const month = 5;
-// 表格配置项
-const columns = reactive<ColumnProps[]>(generateColumns(month));
+const yearDate = ref();
+const monthDate = ref()
+// 表格配置项  默认获取当时
+const columns = ref<ColumnProps[]>();
 
-function generateColumns(month: number): ColumnProps[] {
-  const daysInMonth = new Date(new Date().getFullYear(), month, 0).getDate();
-  const columns = [];
+// 根据月份生成表头
+function generateColumns(year: number, month: number): ColumnProps[] {
+  yearDate.value = year
+  monthDate.value = month
+  const daysInMonth = new Date(year, month, 0).getDate();
+  const columns: ColumnProps[] = [];
   for (let i = 1; i <= daysInMonth; i++) {
-    columns.push({ prop: `day${i}`, label: i.toString().padStart(2, '0'),width:51});
+    columns.push({ prop: `${year}-${month.toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`, label: i.toString().padStart(2, '0'), width: 51 });
   }
-  console.log(columns)
   return columns;
 }
 
+const initData=()=>{
+  recordDate.value = new Date()
+  selectedData.value = firstPlatform.value
+  pageable.value.as_code_list = firstPlatform.value
+  changeMultiTime(recordDate.value)
+  columns.value = generateColumns(new Date().getFullYear(),new Date().getMonth()+1)
+  processTableData.value = processTableDatas()
+  getList()
+}
+
+onMounted(() => {
+  initData()
+});
+
 </script>
 <style scoped>
 :deep .el-table--small .el-table__row {
@@ -169,4 +449,17 @@ function generateColumns(month: number): ColumnProps[] {
   width: 15px;
   height: 15px;
 }
+
+.zt-title{
+  color: var(--el-text-color-regular);
+  font-size: var(--el-form-label-font-size);
+}
+
+.zt-box{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px
+}
 </style>