自定义查询

src/views/query/queryObservationData/index.vue

@@ -54,9 +54,17 @@
                 format="YYYY-MM-DD HH:mm"
               />
             </el-form-item>
+            <el-form-item label="数据密度:">
+              <el-select v-model="queryParams.density" style="width: 240px"  filterable placeholder="请选择" clearable>
+                <el-option label="1分钟" value="1" />
+                <el-option label="5分钟" value="5" />
+                <el-option label="10分钟" value="10分钟" />
+              </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-button style="margin-left: 10px" type="primary" plain @click="handleCustomQuery">自定义查询</el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -126,6 +134,102 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 自定义对话框 -->
+    <el-dialog :title="dialogQuery.title" v-model="dialogQuery.visible" width="800px" append-to-body>
+      <el-form ref="formQueryRef" :model="queryParams" :rules="rulesQuery" label-width="120px">
+        <el-form-item label="自动站:">
+          <div style="display:flex;align-items: center;width: 100%">
+            <el-checkbox v-model="queryParams.isStand" label="多站"/>
+            <el-select v-model="queryParams.name" filterable placeholder="请选择" clearable style="margin-left: 10px;">
+              <el-option label="站1" value="1" />
+              <el-option label="站2" value="2" />
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="观测时间:" v-if="queryParams.isStand" >
+          <el-date-picker
+            style="width: 100%"
+            v-model="queryParams.time"
+            type="datetime"
+            placeholder="请选择"
+            format="YYYY-MM-DD HH:mm"
+          />
+        </el-form-item>
+        <el-form-item label="观测时间:" v-if="!queryParams.isStand">
+          <div style="display:flex;align-items: center;width: 100%">
+            <el-switch
+              v-model="queryParams.hot"
+              inline-prompt
+              active-text="正点"
+              size="default"
+              inactive-text="分钟"
+            />
+
+            <span class="form-item__label">日界:</span>
+            <el-switch
+              v-model="queryParams.points"
+              inline-prompt
+              active-text="0点"
+              size="default"
+              inactive-text="18点"
+            />
+
+            <el-date-picker
+              v-if="queryParams.hot"
+              style="margin-left: 10px;width: 100%"
+              v-model="queryParams.time"
+              type="date"
+              placeholder="请选择"
+            />
+            <el-date-picker
+              v-if="!queryParams.hot"
+              style="margin-left: 10px;width: 100%"
+              v-model="queryParams.time"
+              type="datetime"
+              placeholder="请选择"
+              format="YYYY-MM-DD HH:mm"
+            />
+          </div>
+        </el-form-item>
+        <el-form-item label="数据密度:">
+          <el-select v-model="queryParams.density"  filterable placeholder="请选择" clearable>
+            <el-option label="1分钟" value="1" />
+            <el-option label="5分钟" value="5" />
+            <el-option label="10分钟" value="10分钟" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="查询要素:">
+          <el-select v-model="queryParams.element"  placeholder="请选择" clearable>
+            <el-option
+              v-for="item in columns"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.prop"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="查询条件:">
+          <el-select v-model="queryParams.condition"  placeholder="请选择" clearable>
+            <el-option label=">" value="1" />
+            <el-option label="=" value="2" />
+            <el-option label="<" value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="过滤值:">
+          <el-input
+            v-model="queryParams.filterValues"
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelQuery">取 消</el-button>
+          <el-button type="primary" @click="submitQueryForm">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -139,6 +243,36 @@ const dialog = reactive<any>({
   title: ''
 });
 
+const dialogQuery = reactive<any>({
+  visible: false,
+  title: ''
+});
+
+const submitQueryForm = () => {
+
+}
+
+const cancelQuery = () => {
+  dialogQuery.visible = false;
+}
+
+const formQueryRef = ref<any>();
+const rulesQuery = ref<any>(
+  {
+  }
+);
+
+
+/** 自定义按钮操作 */
+const handleCustomQuery = async () => {
+  dialogQuery.visible = true;
+  dialogQuery.title = "自定义查询";
+}
+
+
+
+
+
 const handleSetting = () => {
   dialog.title = "列表字段设置"
   dialog.visible = true;
@@ -167,7 +301,11 @@ const queryParams = ref({
   hot:true,
   pageNum: 1,
   pageSize: 20,
-  total: 1
+  density:'',
+  total: 1,
+  element:'',
+  condition:'',
+  filterValues:''
 });
 
 // 查询功能