代码提交

src/styles/common.scss

@@ -120,4 +120,50 @@
   .pl#{$i} {
     padding-left: #{$i}px !important;
   }
+
+  .container-tag {
+    display: flex;
+    flex-flow:row wrap;
+    align-items: flex-start;
+    padding: 20px;
+    text-align: left;
+    gap: 20px;
+  }
+  .item-tag {
+    cursor: pointer;
+    width: 18%;
+    background-color: #F2F2F2;
+    border-radius: 8px;
+    color: #000000;
+    font-size: 16px;
+    text-align: center;
+    padding: 15px;
+    flex: 0 1 auto;
+  }
+
+  .item-tag-active {
+    cursor: pointer;
+    width: 18%;
+    background-color: #F2F8FF;
+    border-radius: 8px;
+    color: #007aff;
+    font-size: 16px;
+    text-align: center;
+    padding: 15px;
+    flex: 0 1 auto;
+    position: relative;
+  }
+
+  .item-tag-active::after {
+    content: "";
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-image: url("@/assets/images/selected.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+  }
 }

src/styles/element.scss

@@ -270,10 +270,16 @@
   .el-tabs__item.is-active {
     color: var(--el-color-primary);
     background-color: rgba(242, 248, 255, 1);
+    border-radius: 10px;
   }
 
  .is-left {
     justify-content: flex-start!important;
+    margin-right: 5px;
+  }
+
+  .el-tabs__active-bar {
+    background-color: #00000000;
   }
 }
 
@@ -283,7 +289,7 @@
   .el-dialog__header {
     padding: 15px 0px;
     margin: 0 20px;
-    border-bottom: 2px solid var(--el-border-color-lighter);
+    border-bottom: 1px solid var(--el-border-color-lighter);
     .el-dialog__title {
       font-size: 17px;
     }

src/views/alarm/allData/index.vue

@@ -396,50 +396,3 @@ const columns = reactive<ColumnProps[]>([
   { prop: "i", label: "漏点温度(℃)" }
 ]);
 </script>
-<style lang="scss" scoped>
-.container-tag {
-  display: flex;
-  flex-flow:row wrap;
-  align-items: flex-start;
-  padding: 20px;
-  text-align: left;
-  gap: 20px;
-}
-.item-tag {
-  cursor: pointer;
-  width: 18%;
-  background-color: #F2F2F2;
-  border-radius: 8px;
-  color: #000000;
-  font-size: 16px;
-  text-align: center;
-  padding: 15px;
-  flex: 0 1 auto;
-}
-
-.item-tag-active {
-  cursor: pointer;
-  width: 18%;
-  background-color: #F2F8FF;
-  border-radius: 8px;
-  color: #007aff;
-  font-size: 16px;
-  text-align: center;
-  padding: 15px;
-  flex: 0 1 auto;
-  position: relative;
-}
-
-.item-tag-active::after {
-  content: "";
-  display: inline-block;
-  width: 25px;
-  height: 25px;
-  background-image: url("@/assets/images/selected.png");
-  background-repeat: no-repeat;
-  background-size: contain;
-  position: absolute;
-  right: 0px;
-  bottom: 0px;
-}
-</style>

src/views/query/dutyProcess/index.vue

@@ -33,7 +33,7 @@
         </div>
         <div class="header-button-ri">
           <slot name="toolButton">
-            <img class="setting" src="@/assets/images/setting.png" />
+            <img class="setting" src="@/assets/images/setting.png" @click="handleSetting"/>
           </slot>
         </div>
       </div>
@@ -61,6 +61,26 @@
       <!-- 分页组件 -->
       <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">
+        <div class="container-tag">
+          <div class="item-tag">观测时间</div>
+          <div class="item-tag-active">早报</div>
+          <div class="item-tag">缺报</div>
+          <div class="item-tag">迟报</div>
+          <div class="item-tag">非实时修改数据</div>
+          <div class="item-tag-active">设备故障</div>
+          <div class="item-tag">其他</div>
+        </div>
+      </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>
 
@@ -68,6 +88,24 @@
 import Pagination from "@/components/ProTable/components/Pagination.vue";
 import { ref, reactive } from "vue";
 import { ColumnProps } from "@/components/ProTable/interface";
+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,

src/views/query/qualityAudits/index.vue

@@ -1,13 +1,124 @@
 <template>
-<div></div>
+  <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.code" placeholder="请选择" clearable style="width: 200px">
+                <el-option label="RS0001" value="RS0001" />
+                <el-option label="RS0002" value="RS0002" />
+              </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>
+      <!-- 表格主体 -->
+      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
+        <el-table-column align="left" width="80px" :show-overflow-tooltip="true">
+          <template #header>
+            <div class="header-with-diagonal">
+              <span class="hour-label">时</span>
+              <div class="diagonal-line"></div>
+              <span class="day-label">日</span>
+            </div>
+          </template>
+          <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 ?? 'center'" :reserve-selection="item.type == 'selection'">
+          </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>
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
-  name: "index"
+<script setup lang="ts" name="useProTable">
+import { ref, reactive } from "vue";
+import { ColumnProps } from "@/components/ProTable/interface";
+const pageable = ref<any>({
+  pageNum: 1,
+  pageSize: 20,
+  total: 1
+});
+
+const queryParams = ref({
+  code: ''
+});
+
+// 查询功能
+const handleQuery = () => {
+
+};
+
+//搜索功能
+const resetQuery = () => {
+
+};
+
+const processTableData = ref([
+]);
+
+// 假设当前月份为5月
+const month = 5;
+// 表格配置项
+const columns = reactive<ColumnProps[]>(generateColumns(month));
+
+function generateColumns(month: number): ColumnProps[] {
+  const daysInMonth = new Date(new Date().getFullYear(), month, 0).getDate();
+  const columns = [];
+  for (let i = 1; i <= daysInMonth; i++) {
+    columns.push({ prop: `day${i}`, label: i.toString().padStart(2, '0'),width:50 });
+  }
+
+  return columns;
 }
+
 </script>
+<style>
+.header-with-diagonal {
+  position: relative;
+  text-align: center;
+  height: 25px;
+}
 
-<style scoped>
+.hour-label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.day-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
 
+.diagonal-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #000;
+  transform: rotate(25deg);
+  transform-origin: left center;
+}
 </style>

src/views/query/queryObservationData/index.vue

@@ -62,7 +62,7 @@
         </div>
         <div class="header-button-ri">
           <slot name="toolButton">
-            <img class="setting" src="@/assets/images/setting2.png" />
+            <img class="setting" src="@/assets/images/setting2.png" @click="handleSetting"/>
           </slot>
         </div>
       </div>
@@ -90,6 +90,42 @@
       <!-- 分页组件 -->
       <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>
 
@@ -97,6 +133,26 @@
 import Pagination from "@/components/ProTable/components/Pagination.vue";
 import { ref, reactive } from "vue";
 import { ColumnProps } from "@/components/ProTable/interface";
+
+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,