新增页面：巡检管理—-巡检点管理—-设置巡检点信息

src/assets/img/inspectionmanagement0.svg

@@ -0,0 +1,42 @@
+<svg width="81" height="29" viewBox="0 0 81 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_550_11176)">
+<path d="M4.40002 11.4219L66.4 11.4219" stroke="#22C5AA" stroke-width="3" stroke-linecap="round"/>
+</g>
+<g filter="url(#filter1_dii_550_11176)">
+<path d="M64.9858 2.83609C65.7669 2.05504 67.0332 2.05504 67.8142 2.83609L74.9858 10.0077C75.7669 10.7887 75.7669 12.055 74.9858 12.8361L67.8142 20.0077C67.0332 20.7887 65.7669 20.7887 64.9858 20.0077L57.8142 12.8361C57.0332 12.055 57.0332 10.7887 57.8142 10.0077L64.9858 2.83609Z" fill="#22C5AA"/>
+</g>
+<defs>
+<filter id="filter0_d_550_11176" x="2.43187e-05" y="9.02187" width="70.8" height="8.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.45"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="plus-darker" in2="BackgroundImageFix" result="effect1_dropShadow_550_11176"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_550_11176" result="shape"/>
+</filter>
+<filter id="filter1_dii_550_11176" x="52.2284" y="0" width="28.3433" height="28.3438" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.75"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="plus-darker" in2="BackgroundImageFix" result="effect1_dropShadow_550_11176"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_550_11176" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="1.875"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_550_11176"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.5" dy="1.75"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.281597 0 0 0 0 0.944712 0 0 0 0 0.801037 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_550_11176" result="effect3_innerShadow_550_11176"/>
+</filter>
+</defs>
+</svg>

src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js

@@ -1,17 +1,39 @@
 
 import React, { useState } from 'react';
-import { Button, Tree, Table, Pagination, Checkbox } from 'antd';
+import { Button, Tree, Table, Pagination, Checkbox, Input, Select, DatePicker, Tag, Space } from 'antd';
 import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
+import btnImg3 from '@/assets/img/planBtn3.png'
+
+const { Option } = Select;
 import styles from './inspectionRecords.less';
 import progress1 from '@/assets/img/progress1.svg';
+import progress2 from '@/assets/img/progress2.svg';
 import btnImg1 from '@/assets/img/planBtn1.png';
 import btnImg2 from '@/assets/img/planBtn2.png';
-
+import {
+    DeleteOutlined,
+    DownOutlined,
+    EditOutlined,
+    ExportOutlined,
+    EyeOutlined,
+    RedoOutlined,
+} from "@ant-design/icons";
 // 巡检点管理组件
 const InspectionRecords = () => {
     const [currentPage, setCurrentPage] = useState(6);
     const [pageSize, setPageSize] = useState(10);
     const [total, setTotal] = useState(85); // 总条数
+    const [showAddInspectionPoint, setShowAddInspectionPoint] = useState(false); // 控制是否显示新增巡检点表单
+
+    // 处理新增巡检点按钮点击
+    const handleAddInspectionPoint = () => {
+        setShowAddInspectionPoint(true);
+    };
+
+    // 处理返回按钮点击
+    const handleBack = () => {
+        setShowAddInspectionPoint(false);
+    };
 
     // 树形结构数据 - 隐患排查项
     const treeData = [
@@ -219,66 +241,314 @@ const InspectionRecords = () => {
 
     return (
         <div className={styles.container}>
-            {/* 顶部进度条 */}
+            {/* 顶部进度条 - 根据状态切换图片 */}
-            <div className={styles.progressContainer}></div>
+            <div
+                className={styles.progressContainer}
+                style={{ backgroundImage: `url(${showAddInspectionPoint ? progress2 : progress1})` }}
+            ></div>
 
             {/* 主体内容区域 */}
             <div className={styles.contentContainer}>
-                {/* 左侧树形结构 */}
+                {/* 左侧树形结构 - 根据状态决定是否显示 */}
-                <div className={styles.leftSide}>
+                {!showAddInspectionPoint && (
-                    <div className={styles.treeTitle}>隐患排查项</div>
+                    <div className={styles.leftSide}>
-                    <Tree
+                        <div className={styles.treeTitle}>隐患排查项</div>
-                        // className={`${styles.tree} leftSide test`}
+                        <Tree
-                        className={styles['tree']}
+                            // className={`${styles.tree} leftSide test`}
-                        defaultExpandAll
+                            className={styles['tree']}
-                        treeData={treeData}
+                            defaultExpandAll
-                        checkable
+                            treeData={treeData}
-                    />
+                            checkable
-                </div>
+                        />
+                    </div>
+                )}
 
                 {/* 右侧表格和操作区域 */}
                 <div className={styles.rightSide}>
-                    {/* 顶部按钮区域 */}
+                    {/* 根据状态渲染不同内容 */}
-                    <div className={styles.topButtons}>
+                    {!showAddInspectionPoint ? (
-                        <Button className={styles['button']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '50px' }}>重新选择</Button>
+                        <>
-                        <Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>删除</Button>
+                            {/* 顶部按钮区域 */}
-                    </div>
+                            <div className={styles.topButtons}>
+                                <Button className={styles['button']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '50px' }}>重新选择</Button>
+                                <Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>删除</Button>
+                            </div>
 
-                    {/* 搜索区域 */}
+                            {/* 搜索区域 */}
-                    <div className={styles.searchContainer}>
+                            <div className={styles.searchContainer}>
-                        <div className={styles.searchBox}>
+                                <div className={styles.searchBox}>
-                            <SearchOutlined />
+                                    <SearchOutlined />
-                            <input
+                                    <input
-                                type="text"
+                                        type="text"
-                                placeholder="请输入搜索内容"
+                                        placeholder="请输入搜索内容"
-                                className={styles.searchInput}
+                                        className={styles.searchInput}
+                                    />
+                                </div>
+                                <Button type="primary" className={styles.addButton} onClick={handleAddInspectionPoint}>新增巡检点</Button>
+                            </div>
+
+                            {/* 表格 */}
+                            <Table
+                                columns={columns}
+                                dataSource={tableData}
+                                pagination={false}
+                                className={styles.table}
+                                rowKey="key"
                             />
-                        </div>
-                        <Button type="primary" className={styles.addButton}>新增巡检点</Button>
-                    </div>
 
-                    {/* 表格 */}
+                            {/* 分页 */}
-                    <Table
+                            <div className={styles.pagination}>
-                        columns={columns}
+                                <span>共 {total} 条</span>
-                        dataSource={tableData}
+                                <Pagination
-                        pagination={false}
+                                    current={currentPage}
-                        className={styles.table}
+                                    pageSize={pageSize}
-                        rowKey="key"
+                                    total={total}
-                    />
+                                    onChange={handlePageChange}
+                                    showSizeChanger
+                                    showQuickJumper
+                                    showTotal={(total) => `共 ${total} 条`}
+                                />
+                            </div>
+                        </>
+                    ) : (
+                        <div className={styles.addInspectionPointForm}>
+                            <div className={styles.formHeader}>
+                                <h3>新增巡检点</h3>
+                                <Button onClick={handleBack}>返回</Button>
+                            </div>
+                            <div className={styles.formContent}>
+                                {/* 查询条件区域 - 使用antd组件 */}
+                                <div className={styles.queryConditionContainer}>
+                                    <div className={styles.queryConditionHeader}>
+                                        <span className={styles.queryConditionIcon}>| 查询条件</span>
+                                        <div>
+                                            <Button type="primary" icon={<SearchOutlined />} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>查询</Button>
+                                            <Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px' }}>重置</Button>
+                                        </div>
+                                    </div>
 
-                    {/* 分页 */}
+                                    <div className={styles.queryRow}>
-                    <div className={styles.pagination}>
+                                        <div className={styles.queryCol}>
-                        <span>共 {total} 条</span>
+                                            <div className={styles.queryColLabel}>名称</div>
-                        <Pagination
+                                            <Input className={styles.queryInput} placeholder="请输入名称" />
-                            current={currentPage}
+                                        </div>
-                            pageSize={pageSize}
+
-                            total={total}
+                                        <div className={styles.queryCol}>
-                            onChange={handlePageChange}
+                                            <div className={styles.queryColLabel}>所属区域</div>
-                            showSizeChanger
+                                            <Select className={styles.querySelect} placeholder="全部">
-                            showQuickJumper
+                                                <Option value="">全部</Option>
-                            showTotal={(total) => `共 ${total} 条`}
+                                                <Option value="area1">储罐储存区</Option>
-                        />
+                                                <Option value="area2">泵房区域</Option>
-                    </div>
+                                                <Option value="area3">装卸区域</Option>
+                                                <Option value="area4">办公区域</Option>
+                                            </Select>
+                                        </div>
+
+                                        <div className={styles.queryCol}>
+                                            <div className={styles.queryColLabel}>巡检时间范围</div>
+                                            <DatePicker.RangePicker className={styles.queryDateRange} />
+                                        </div>
+
+                                        <div className={styles.queryCol}>
+                                            <div className={styles.queryColLabel}>关联设备</div>
+                                            <div className={styles.deviceTags}>
+                                                <Tag color="blue">设备1</Tag>
+                                                <Tag color="blue">设备2</Tag>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className={styles.queryRow}>
+                                        <div className={styles.queryCol}>
+                                            <div className={styles.queryColLabel}>位置</div>
+                                            <Input className={styles.queryInput} placeholder="请输入位置" />
+                                        </div>
+
+                                        <div className={styles.queryCol}>
+                                            <div className={styles.queryColLabel}>巡检频率</div>
+                                            <Select className={styles.querySelect} placeholder="全部">
+                                                <Option value="">全部</Option>
+                                                <Option value="daily">每日</Option>
+                                                <Option value="weekly">每周</Option>
+                                                <Option value="monthly">每月</Option>
+                                                <Option value="other">其他</Option>
+                                            </Select>
+                                        </div>
+                                    </div>
+
+                                    {/* <div className={styles.queryActions}>
+
+                                    </div> */}
+                                </div>
+
+                                {/* 巡检点列表 - 使用antd组件 */}
+                                <div>
+                                    <div style={{ marginBottom: '20px', fontSize: '16px', fontWeight: '500' }}>| 巡检点列表</div>
+
+                                    {/* 顶部按钮组 */}
+                                    <div className={styles.tableButtons} style={{ marginBottom: '20px' }}>
+                                        <Button type="primary" style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>
+                                            批量导入
+                                        </Button>
+                                        <Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px', marginRight: '30px' }}>
+                                            批量导出
+                                        </Button>
+                                        <Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>
+                                            删除
+                                        </Button>
+                                        <Button icon={<PlusOutlined />} type="primary" style={{ backgroundImage: `url(${btnImg1})`, float: 'right' }} className={styles.button}>
+                                            新增巡检点
+                                        </Button>
+                                    </div>
+
+                                    {/* 巡检点表格 - 使用antd Table组件 */}
+                                    <Table
+                                        className={styles.table}
+                                        rowSelection={{
+                                            type: 'checkbox',
+                                            onChange: (selectedRowKeys, selectedRows) => {
+                                                console.log('选中的行:', selectedRowKeys, selectedRows);
+                                            },
+                                        }}
+                                        columns={[
+                                            {
+                                                title: '序号',
+                                                key: 'serialNumber',
+                                                width: 80,
+                                                render: (_, __, index) => (currentPage - 1) * pageSize + index + 1,
+                                            },
+                                            {
+                                                title: '名称',
+                                                dataIndex: 'name',
+                                                key: 'name',
+                                            },
+                                            {
+                                                title: '位置',
+                                                dataIndex: 'location',
+                                                key: 'location',
+                                            },
+                                            {
+                                                title: '关联设备',
+                                                dataIndex: 'relatedDevices',
+                                                key: 'relatedDevices',
+                                            },
+                                            {
+                                                title: '状态',
+                                                dataIndex: 'status',
+                                                key: 'status',
+                                                render: (text) => {
+                                                    let color = '#52c41a'; // 默认正常绿色
+                                                    if (text === '待巡检') color = '#faad14';
+                                                    else if (text === '异常待处理') color = '#ff4d4f';
+                                                    return <span style={{ color }}>{text}</span>;
+                                                },
+                                            },
+                                            {
+                                                title: '巡检频率',
+                                                dataIndex: 'frequency',
+                                                key: 'frequency',
+                                            },
+                                            {
+                                                title: '操作',
+                                                key: 'action',
+                                                width: 200,
+                                                render: (_, record) => (
+                                                    <Space size="middle">
+                                                        <Button
+                                                            type="text"
+                                                            style={{ color: '#006665' }}
+                                                            onClick={() => console.log('查看详情:', record)}
+                                                        >
+                                                            查看详情
+                                                        </Button>
+                                                        <Button
+                                                            type="text"
+                                                            style={{ color: '#1890ff' }}
+                                                            onClick={() => console.log('编辑:', record)}
+                                                        >
+                                                            编辑
+                                                        </Button>
+                                                        <Button
+                                                            type="text"
+                                                            style={{ color: '#52c41a' }}
+                                                            onClick={() => console.log('巡检:', record)}
+                                                        >
+                                                            巡检
+                                                        </Button>
+                                                    </Space>
+                                                ),
+                                            },
+                                        ]}
+                                        dataSource={[
+                                            {
+                                                key: '1',
+                                                name: '一号储罐',
+                                                location: '储罐储存区 A区1号罐',
+                                                relatedDevices: '一号储罐本体、罐区消防栓组',
+                                                status: '正常',
+                                                frequency: '每日',
+                                            },
+                                            {
+                                                key: '2',
+                                                name: '原油输送泵组',
+                                                location: '泵房 B区',
+                                                relatedDevices: '1#原油泵、2#原油泵、泵区压力泵组',
+                                                status: '正常',
+                                                frequency: '每2小时',
+                                            },
+                                            {
+                                                key: '3',
+                                                name: '油品装车站台',
+                                                location: '装卸区北侧站台',
+                                                relatedDevices: '装卸臂管、装卸区静电释放装置、装卸区灭火器',
+                                                status: '待巡检',
+                                                frequency: '每次装卸前',
+                                            },
+                                            {
+                                                key: '4',
+                                                name: '办公区消防通道',
+                                                location: '办公楼1楼东侧通道',
+                                                relatedDevices: '通道应急灯、通道灭火器、疏散标示',
+                                                status: '正常',
+                                                frequency: '每周',
+                                            },
+                                            {
+                                                key: '5',
+                                                name: '输油管道段 A',
+                                                location: '库区东侧输油管道0-500米段',
+                                                relatedDevices: '管道压力传感器、管道监测点',
+                                                status: '异常待处理',
+                                                frequency: '每月',
+                                            },
+                                            {
+                                                key: '6',
+                                                name: '调和工艺罐区',
+                                                location: '生产工艺区调和罐群前',
+                                                relatedDevices: '3#调和罐、调和区温度传感器、搅拌装置',
+                                                status: '正常',
+                                                frequency: '每小时',
+                                            },
+                                        ]}
+                                        pagination={{
+                                            current: currentPage,
+                                            pageSize: pageSize,
+                                            total: total,
+                                            onChange: (page, size) => {
+                                                setCurrentPage(page);
+                                                setPageSize(size);
+                                            },
+                                            showSizeChanger: true,
+                                            showTotal: (total) => `共 ${total} 条`,
+                                            style: {
+                                                textAlign: 'right',
+                                                marginTop: '20px',
+                                            },
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    )}
                 </div>
             </div>
         </div>

src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less

@@ -6,6 +6,16 @@
   border-radius: 10px;
 }
 
+.resetBtn {
+  background-size: cover;
+  background-position: center;
+  color: #006665;
+  //opacity:0.7;
+  border-radius: 4px;
+  width: 88px;
+  height: 36px;
+}
+
 /* 进度条容器 */
 .progressContainer {
   margin-bottom: 20px;
@@ -111,6 +121,13 @@
   padding: 20px;
   display: flex;
   flex-direction: column;
+  transition: all 0.3s ease;
+}
+
+/* 当左侧树形结构隐藏时，右侧内容占据全部宽度 */
+.contentContainer:only-child .rightSide,
+.contentContainer>.rightSide:last-child {
+  width: 100%;
 }
 
 /* 顶部按钮区域 */
@@ -285,6 +302,105 @@
   }
 }
 
+/* 表单操作按钮区域 */
+/* 新增巡检点表单样式 */
+.addInspectionPointForm {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.formHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.formContent {
+  width: 100%;
+}
+
+.formGroup {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  label {
+    width: 120px;
+    font-size: 14px;
+    color: #333;
+    text-align: right;
+    margin-right: 16px;
+  }
+
+  input[type="text"],
+  select {
+    flex: 1;
+    max-width: 400px;
+    height: 36px;
+    padding: 0 12px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: all 0.3s;
+
+    &:focus {
+      border-color: #1890ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+      outline: none;
+    }
+  }
+}
+
+.checkboxGroup {
+  flex: 1;
+  max-width: 400px;
+  display: flex;
+  gap: 24px;
+  margin-bottom: 12px;
+
+  label {
+    width: auto;
+    text-align: left;
+    margin-right: 8px;
+    font-weight: normal;
+    cursor: pointer;
+  }
+}
+
+.deviceTagGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.deviceTag {
+  display: inline-block;
+  padding: 4px 12px;
+  background-color: #f0f0f0;
+  border-radius: 12px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: #e0e0e0;
+    color: #1890ff;
+  }
+}
+
 /* 响应式设计 */
 @media (max-width: 1200px) {
   .contentContainer {
@@ -297,6 +413,119 @@
   }
 }
 
+/* 查询条件区域样式 */
+.queryConditionContainer {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  margin-bottom: 20px;
+}
+
+.queryConditionHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  justify-content: space-between;
+}
+
+.queryConditionIcon {
+  margin-right: 8px;
+}
+
+/* 查询行布局 */
+.queryRow {
+  display: flex;
+  margin-bottom: 16px;
+  gap: 20px;
+}
+
+/* 查询列布局 */
+.queryCol {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 查询标签样式 */
+.queryColLabel {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+/* 查询输入框样式 */
+.queryInput {
+  width: 100%;
+  max-width: 200px;
+}
+
+/* 查询选择器样式 */
+.querySelect {
+  width: 100%;
+  max-width: 200px;
+}
+
+/* 查询日期范围样式 */
+.queryDateRange {
+  width: 100%;
+  max-width: 280px;
+}
+
+/* 设备标签组样式 */
+.deviceTags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* 查询操作按钮区域 */
+.queryActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.queryButton {
+  background-color: #006665;
+  border-color: #006665;
+}
+
+.queryButton:hover {
+  background-color: #00876e;
+  border-color: #00876e;
+}
+
+/* 确保第一行四个查询项正确显示 */
+.queryRow:first-of-type {
+  .queryCol {
+    flex: 1;
+  }
+}
+
+/* 确保第二行两个查询项正确显示 */
+.queryRow:last-of-type:not(:last-child) {
+  .queryCol {
+    flex: 1;
+  }
+}
+
+@media (max-width: 1200px) {
+  .queryRow {
+    flex-wrap: wrap;
+  }
+
+  .queryCol {
+    min-width: calc(50% - 10px);
+  }
+}
+
 @media (max-width: 768px) {
   .container {
     padding: 10px;
@@ -317,4 +546,18 @@
     align-items: center;
     gap: 12px;
   }
+
+  .queryRow {
+    flex-direction: column;
+  }
+
+  .queryCol {
+    min-width: 100%;
+  }
+
+  .queryInput,
+  .querySelect,
+  .queryDateRange {
+    max-width: 100%;
+  }
 }