diff --git a/src/views/data/collect/collect.vue b/src/views/data/collect/collect.vue
index b4158c1..51605be 100644
--- a/src/views/data/collect/collect.vue
+++ b/src/views/data/collect/collect.vue
@@ -3,14 +3,14 @@
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  deviceAssort: '', // 设备分类
+  deviceType: '', // 设备类型
+  deviceNo: '', // 设备编号
 })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '采集类型', value: 'collectTypeName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
   { text: '上报时间', value: 'reportingTime', align: 'center' },
@@ -28,6 +28,45 @@
         collectType: '1', // 采集类型
         collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
+        deviceTypeName: '测试设备', // 设备类型名称
+        deviceNo: '13', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '用电', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '监测', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '设备类型', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
         deviceTypeName: '设备类型', // 设备类型名称
         deviceNo: '1', // 设备编号
         location: '北京市xxx', // 安装位置
@@ -37,7 +76,7 @@
         statusName: '正常', // 当前状态名称
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
@@ -99,7 +138,15 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>

diff --git a/src/views/data/collect/collect.vue b/src/views/data/collect/collect.vue
index b4158c1..51605be 100644
--- a/src/views/data/collect/collect.vue
+++ b/src/views/data/collect/collect.vue
@@ -3,14 +3,14 @@
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  deviceAssort: '', // 设备分类
+  deviceType: '', // 设备类型
+  deviceNo: '', // 设备编号
 })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '采集类型', value: 'collectTypeName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
   { text: '上报时间', value: 'reportingTime', align: 'center' },
@@ -28,6 +28,45 @@
         collectType: '1', // 采集类型
         collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
+        deviceTypeName: '测试设备', // 设备类型名称
+        deviceNo: '13', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '用电', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '监测', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '设备类型', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
         deviceTypeName: '设备类型', // 设备类型名称
         deviceNo: '1', // 设备编号
         location: '北京市xxx', // 安装位置
@@ -37,7 +76,7 @@
         statusName: '正常', // 当前状态名称
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
@@ -99,7 +138,15 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
diff --git a/src/views/data/collect/storage.vue b/src/views/data/collect/storage.vue
index a443d4e..24d5429 100644
--- a/src/views/data/collect/storage.vue
+++ b/src/views/data/collect/storage.vue
@@ -1,3 +1,98 @@
+<!-- 存储管理 -->
+<script lang="ts" setup name="storage">
+import type { FormInstance, FormRules } from 'element-plus'
+// 前端校验规则
+const rules: FormRules = reactive({
+  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
+})
+// 表单收集数据
+const userForm = reactive({
+  id: '', // 编号
+})
+// 重置
+const reset = () => {
+
+}
+const ruleFormRef = ref()
+// 确认
+const saveData = () => {
+  ruleFormRef.value?.validate((valid: any) => {
+    if (valid) {
+    // 验证通过
+    }
+  })
+}
+</script>
+
 <template>
-  <div>存储管理</div>
+  <el-card width="50%">
+    <div class="title">
+      存储管理
+    </div>
+    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="110px">
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="服务器IP" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="数据库" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="用户名" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="密码" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button style="margin-left: 200px;" @click="reset">
+        重置
+      </el-button>
+    </div>
+  </el-card>
 </template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  text-align: center;
+  line-height: 1.5;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+</style>
+

diff --git a/src/views/data/collect/collect.vue b/src/views/data/collect/collect.vue
index b4158c1..51605be 100644
--- a/src/views/data/collect/collect.vue
+++ b/src/views/data/collect/collect.vue
@@ -3,14 +3,14 @@
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  deviceAssort: '', // 设备分类
+  deviceType: '', // 设备类型
+  deviceNo: '', // 设备编号
 })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '采集类型', value: 'collectTypeName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
   { text: '上报时间', value: 'reportingTime', align: 'center' },
@@ -28,6 +28,45 @@
         collectType: '1', // 采集类型
         collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
+        deviceTypeName: '测试设备', // 设备类型名称
+        deviceNo: '13', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '用电', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '监测', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '设备类型', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
         deviceTypeName: '设备类型', // 设备类型名称
         deviceNo: '1', // 设备编号
         location: '北京市xxx', // 安装位置
@@ -37,7 +76,7 @@
         statusName: '正常', // 当前状态名称
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
@@ -99,7 +138,15 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
diff --git a/src/views/data/collect/storage.vue b/src/views/data/collect/storage.vue
index a443d4e..24d5429 100644
--- a/src/views/data/collect/storage.vue
+++ b/src/views/data/collect/storage.vue
@@ -1,3 +1,98 @@
+<!-- 存储管理 -->
+<script lang="ts" setup name="storage">
+import type { FormInstance, FormRules } from 'element-plus'
+// 前端校验规则
+const rules: FormRules = reactive({
+  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
+})
+// 表单收集数据
+const userForm = reactive({
+  id: '', // 编号
+})
+// 重置
+const reset = () => {
+
+}
+const ruleFormRef = ref()
+// 确认
+const saveData = () => {
+  ruleFormRef.value?.validate((valid: any) => {
+    if (valid) {
+    // 验证通过
+    }
+  })
+}
+</script>
+
 <template>
-  <div>存储管理</div>
+  <el-card width="50%">
+    <div class="title">
+      存储管理
+    </div>
+    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="110px">
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="服务器IP" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="数据库" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="用户名" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="密码" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button style="margin-left: 200px;" @click="reset">
+        重置
+      </el-button>
+    </div>
+  </el-card>
 </template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  text-align: center;
+  line-height: 1.5;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+</style>
+
diff --git a/src/views/data/consumption/index.vue b/src/views/data/consumption/index.vue
index 06b9d42..852076a 100644
--- a/src/views/data/consumption/index.vue
+++ b/src/views/data/consumption/index.vue
@@ -1,3 +1,42 @@
+<!-- 用气监测 -->
+<script lang="ts" setup name="useheat">
+import page from '@/views/data/useHeat/page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '家用燃气监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>用7监测</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+

diff --git a/src/views/data/collect/collect.vue b/src/views/data/collect/collect.vue
index b4158c1..51605be 100644
--- a/src/views/data/collect/collect.vue
+++ b/src/views/data/collect/collect.vue
@@ -3,14 +3,14 @@
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  deviceAssort: '', // 设备分类
+  deviceType: '', // 设备类型
+  deviceNo: '', // 设备编号
 })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '采集类型', value: 'collectTypeName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
   { text: '上报时间', value: 'reportingTime', align: 'center' },
@@ -28,6 +28,45 @@
         collectType: '1', // 采集类型
         collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
+        deviceTypeName: '测试设备', // 设备类型名称
+        deviceNo: '13', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '用电', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '监测', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '设备类型', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
         deviceTypeName: '设备类型', // 设备类型名称
         deviceNo: '1', // 设备编号
         location: '北京市xxx', // 安装位置
@@ -37,7 +76,7 @@
         statusName: '正常', // 当前状态名称
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
@@ -99,7 +138,15 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
diff --git a/src/views/data/collect/storage.vue b/src/views/data/collect/storage.vue
index a443d4e..24d5429 100644
--- a/src/views/data/collect/storage.vue
+++ b/src/views/data/collect/storage.vue
@@ -1,3 +1,98 @@
+<!-- 存储管理 -->
+<script lang="ts" setup name="storage">
+import type { FormInstance, FormRules } from 'element-plus'
+// 前端校验规则
+const rules: FormRules = reactive({
+  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
+})
+// 表单收集数据
+const userForm = reactive({
+  id: '', // 编号
+})
+// 重置
+const reset = () => {
+
+}
+const ruleFormRef = ref()
+// 确认
+const saveData = () => {
+  ruleFormRef.value?.validate((valid: any) => {
+    if (valid) {
+    // 验证通过
+    }
+  })
+}
+</script>
+
 <template>
-  <div>存储管理</div>
+  <el-card width="50%">
+    <div class="title">
+      存储管理
+    </div>
+    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="110px">
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="服务器IP" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="数据库" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="用户名" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="密码" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button style="margin-left: 200px;" @click="reset">
+        重置
+      </el-button>
+    </div>
+  </el-card>
 </template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  text-align: center;
+  line-height: 1.5;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+</style>
+
diff --git a/src/views/data/consumption/index.vue b/src/views/data/consumption/index.vue
index 06b9d42..852076a 100644
--- a/src/views/data/consumption/index.vue
+++ b/src/views/data/consumption/index.vue
@@ -1,3 +1,42 @@
+<!-- 用气监测 -->
+<script lang="ts" setup name="useheat">
+import page from '@/views/data/useHeat/page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '家用燃气监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>用7监测</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+
diff --git a/src/views/data/device/index.vue b/src/views/data/device/index.vue
index 09176b3..eee813a 100644
--- a/src/views/data/device/index.vue
+++ b/src/views/data/device/index.vue
@@ -1,3 +1,136 @@
+<!-- 设备管理 -->
+<script lang="ts" setup name="device">
+// 查询参数
+const searchQuery = reactive({
+  offset: 1,
+  limit: 20,
+  deviceNo: '',
+  startTime: '',
+  endTime: '',
+  deviceType: '',
+})
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '设备编号', value: 'deviceNo', align: 'center' },
+  { text: '安装位置', value: 'location', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+]) // 表格
+const total = ref<number>(0)
+const list = ref<any[]>([])
+// 搜索
+const search = () => {
+  loadingTable.value = true
+  setTimeout(() => {
+    list.value = [
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+    ]
+    total.value = 1
+    loadingTable.value = false
+  }, 1000)
+}
+// 重置
+const reset = () => {
+  searchQuery.deviceNo = ''
+  searchQuery.offset = 1
+  searchQuery.limit = 20
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.offset = val.page
+  }
+  search()
+}
+// 表格被选中的行
+const selectList = ref<any[]>([])
+// 表格多选
+const multiSelect = (row: any[]) => {
+  selectList.value = row
+}
+onMounted(() => {
+  search()
+})
+</script>
+
 <template>
-  <div>设备管理</div>
+  <div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="search" @clear="reset">
+      <search-item>
+        <el-select v-model="searchQuery.deviceType" placeholder="设备类型">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <!-- <el-input v-model="searchQuery.deviceNo" placeholder="设备类型" clearable class="w-50 m-2 normal-input" /> -->
+        <el-select v-model="searchQuery.deviceType" placeholder="监测类别">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="TimeRanges"
+          type="datetimerange"
+          format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+          range-separator="至"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <table-container>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns as any"
+        :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
+        :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </div>
 </template>
+

diff --git a/src/views/data/collect/collect.vue b/src/views/data/collect/collect.vue
index b4158c1..51605be 100644
--- a/src/views/data/collect/collect.vue
+++ b/src/views/data/collect/collect.vue
@@ -3,14 +3,14 @@
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  deviceAssort: '', // 设备分类
+  deviceType: '', // 设备类型
+  deviceNo: '', // 设备编号
 })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '采集类型', value: 'collectTypeName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
   { text: '上报时间', value: 'reportingTime', align: 'center' },
@@ -28,6 +28,45 @@
         collectType: '1', // 采集类型
         collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
+        deviceTypeName: '测试设备', // 设备类型名称
+        deviceNo: '13', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '用电', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '监测', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '设备类型', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
         deviceTypeName: '设备类型', // 设备类型名称
         deviceNo: '1', // 设备编号
         location: '北京市xxx', // 安装位置
@@ -37,7 +76,7 @@
         statusName: '正常', // 当前状态名称
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
@@ -99,7 +138,15 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
diff --git a/src/views/data/collect/storage.vue b/src/views/data/collect/storage.vue
index a443d4e..24d5429 100644
--- a/src/views/data/collect/storage.vue
+++ b/src/views/data/collect/storage.vue
@@ -1,3 +1,98 @@
+<!-- 存储管理 -->
+<script lang="ts" setup name="storage">
+import type { FormInstance, FormRules } from 'element-plus'
+// 前端校验规则
+const rules: FormRules = reactive({
+  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
+})
+// 表单收集数据
+const userForm = reactive({
+  id: '', // 编号
+})
+// 重置
+const reset = () => {
+
+}
+const ruleFormRef = ref()
+// 确认
+const saveData = () => {
+  ruleFormRef.value?.validate((valid: any) => {
+    if (valid) {
+    // 验证通过
+    }
+  })
+}
+</script>
+
 <template>
-  <div>存储管理</div>
+  <el-card width="50%">
+    <div class="title">
+      存储管理
+    </div>
+    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="110px">
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="服务器IP" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="数据库" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="用户名" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="密码" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button style="margin-left: 200px;" @click="reset">
+        重置
+      </el-button>
+    </div>
+  </el-card>
 </template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  text-align: center;
+  line-height: 1.5;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+</style>
+
diff --git a/src/views/data/consumption/index.vue b/src/views/data/consumption/index.vue
index 06b9d42..852076a 100644
--- a/src/views/data/consumption/index.vue
+++ b/src/views/data/consumption/index.vue
@@ -1,3 +1,42 @@
+<!-- 用气监测 -->
+<script lang="ts" setup name="useheat">
+import page from '@/views/data/useHeat/page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '家用燃气监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>用7监测</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+
diff --git a/src/views/data/device/index.vue b/src/views/data/device/index.vue
index 09176b3..eee813a 100644
--- a/src/views/data/device/index.vue
+++ b/src/views/data/device/index.vue
@@ -1,3 +1,136 @@
+<!-- 设备管理 -->
+<script lang="ts" setup name="device">
+// 查询参数
+const searchQuery = reactive({
+  offset: 1,
+  limit: 20,
+  deviceNo: '',
+  startTime: '',
+  endTime: '',
+  deviceType: '',
+})
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '设备编号', value: 'deviceNo', align: 'center' },
+  { text: '安装位置', value: 'location', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+]) // 表格
+const total = ref<number>(0)
+const list = ref<any[]>([])
+// 搜索
+const search = () => {
+  loadingTable.value = true
+  setTimeout(() => {
+    list.value = [
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+    ]
+    total.value = 1
+    loadingTable.value = false
+  }, 1000)
+}
+// 重置
+const reset = () => {
+  searchQuery.deviceNo = ''
+  searchQuery.offset = 1
+  searchQuery.limit = 20
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.offset = val.page
+  }
+  search()
+}
+// 表格被选中的行
+const selectList = ref<any[]>([])
+// 表格多选
+const multiSelect = (row: any[]) => {
+  selectList.value = row
+}
+onMounted(() => {
+  search()
+})
+</script>
+
 <template>
-  <div>设备管理</div>
+  <div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="search" @clear="reset">
+      <search-item>
+        <el-select v-model="searchQuery.deviceType" placeholder="设备类型">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <!-- <el-input v-model="searchQuery.deviceNo" placeholder="设备类型" clearable class="w-50 m-2 normal-input" /> -->
+        <el-select v-model="searchQuery.deviceType" placeholder="监测类别">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="TimeRanges"
+          type="datetimerange"
+          format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+          range-separator="至"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <table-container>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns as any"
+        :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
+        :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </div>
 </template>
+
diff --git a/src/views/data/electricity/network.vue b/src/views/data/electricity/network.vue
index 62a0956..b1da8b5 100644
--- a/src/views/data/electricity/network.vue
+++ b/src/views/data/electricity/network.vue
@@ -1,23 +1,33 @@
 <!-- 配电网 -->
 <script lang="ts" setup name="network">
+// 查询参数
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  electricityName: '', // 名称
+  startTime: '',
+  endTime: '',
 })
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+// table表格loading
 const loadingTable = ref(true)
+// table列表
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
-  { text: '设备编号', value: 'deviceNo', align: 'center' },
-  { text: '安装位置', value: 'location', align: 'center' },
-  { text: '上报时间', value: 'reportingTime', align: 'center' },
-  { text: '上报频率', value: 'reportingFrequency', align: 'center' },
-  { text: '当前状态', value: 'statusName', align: 'center' },
-]) // 表格
+  { text: '配电网名称', value: 'electricityName', align: 'center' },
+  { text: '配电网区域', value: 'electricityArea', align: 'center' },
+  { text: '上传人', value: 'uploaderName', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+])
 const total = ref<number>(0)
+// table列表数据
 const list = ref<any[]>([])
 // 搜索
 const search = () => {
@@ -25,29 +35,56 @@
     list.value = [
       {
         id: '1', // id
-        collectType: '1', // 采集类型
-        collectTypeName: '类型名称', // 采集类型名称
-        deviceType: '1', // 设备类型
-        deviceTypeName: '设备类型', // 设备类型名称
-        deviceNo: '1', // 设备编号
-        location: '北京市xxx', // 安装位置
-        reportingTime: '2023-3-8 00:00:00', // 上报时间
-        reportingFrequency: '1', // 上报频率
-        status: '1', // 当前状态
-        statusName: '正常', // 当前状态名称
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '张三', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '张三', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网3', // 配电网名称
+        electricityArea: '北京市房山区', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '王五', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市海淀区', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '李四', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
 // 重置
 const reset = () => {
-  searchQuery.deviceAssort = ''
+  searchQuery.electricityName = ''
   searchQuery.offset = 1
   searchQuery.limit = 20
-  searchQuery.deviceType = ''
-  searchQuery.deviceNo = ''
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 查看详情
+const detail = (row: any) => {
+  console.log(row, 'row')
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size?: number; page?: number }) => {
@@ -57,7 +94,7 @@
   if (val && val.page) {
     searchQuery.offset = val.page
   }
-  // getList()
+  search()
 }
 // 表格被选中的行
 const selectList = ref<any[]>([])
@@ -73,17 +110,18 @@
 <template>
   <div>
     <!-- 筛选条件 -->
-    <search-area :need-clear="true" @search="search">
+    <search-area :need-clear="true" @search="search" @clear="reset">
       <search-item>
-        <el-input v-model="searchQuery.deviceNo" placeholder="名称" clearable class="w-50 m-2 normal-input" />
+        <el-input v-model="searchQuery.electricityName" placeholder="名称" clearable class="w-50 m-2 normal-input" />
       </search-item>
       <search-item>
         <el-date-picker
+          v-model="TimeRanges"
           type="datetimerange"
           format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
           range-separator="至"
-          start-placeholder="发布开始时间"
-          end-placeholder="发布结束时间"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
           clearable
         />
       </search-item>
@@ -94,10 +132,29 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="{ row }">
+              <el-button
+                size="small"
+                type="primary"
+                link
+                @click="detail(row)"
+              >
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
-
-<style lang="scss" scoped>
-</style>

diff --git a/src/views/data/collect/collect.vue b/src/views/data/collect/collect.vue
index b4158c1..51605be 100644
--- a/src/views/data/collect/collect.vue
+++ b/src/views/data/collect/collect.vue
@@ -3,14 +3,14 @@
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  deviceAssort: '', // 设备分类
+  deviceType: '', // 设备类型
+  deviceNo: '', // 设备编号
 })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '采集类型', value: 'collectTypeName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
   { text: '上报时间', value: 'reportingTime', align: 'center' },
@@ -28,6 +28,45 @@
         collectType: '1', // 采集类型
         collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
+        deviceTypeName: '测试设备', // 设备类型名称
+        deviceNo: '13', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '用电', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '监测', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '设备类型', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
         deviceTypeName: '设备类型', // 设备类型名称
         deviceNo: '1', // 设备编号
         location: '北京市xxx', // 安装位置
@@ -37,7 +76,7 @@
         statusName: '正常', // 当前状态名称
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
@@ -99,7 +138,15 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
diff --git a/src/views/data/collect/storage.vue b/src/views/data/collect/storage.vue
index a443d4e..24d5429 100644
--- a/src/views/data/collect/storage.vue
+++ b/src/views/data/collect/storage.vue
@@ -1,3 +1,98 @@
+<!-- 存储管理 -->
+<script lang="ts" setup name="storage">
+import type { FormInstance, FormRules } from 'element-plus'
+// 前端校验规则
+const rules: FormRules = reactive({
+  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
+})
+// 表单收集数据
+const userForm = reactive({
+  id: '', // 编号
+})
+// 重置
+const reset = () => {
+
+}
+const ruleFormRef = ref()
+// 确认
+const saveData = () => {
+  ruleFormRef.value?.validate((valid: any) => {
+    if (valid) {
+    // 验证通过
+    }
+  })
+}
+</script>
+
 <template>
-  <div>存储管理</div>
+  <el-card width="50%">
+    <div class="title">
+      存储管理
+    </div>
+    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="110px">
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="服务器IP" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="数据库" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="用户名" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="密码" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button style="margin-left: 200px;" @click="reset">
+        重置
+      </el-button>
+    </div>
+  </el-card>
 </template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  text-align: center;
+  line-height: 1.5;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+</style>
+
diff --git a/src/views/data/consumption/index.vue b/src/views/data/consumption/index.vue
index 06b9d42..852076a 100644
--- a/src/views/data/consumption/index.vue
+++ b/src/views/data/consumption/index.vue
@@ -1,3 +1,42 @@
+<!-- 用气监测 -->
+<script lang="ts" setup name="useheat">
+import page from '@/views/data/useHeat/page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '家用燃气监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>用7监测</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+
diff --git a/src/views/data/device/index.vue b/src/views/data/device/index.vue
index 09176b3..eee813a 100644
--- a/src/views/data/device/index.vue
+++ b/src/views/data/device/index.vue
@@ -1,3 +1,136 @@
+<!-- 设备管理 -->
+<script lang="ts" setup name="device">
+// 查询参数
+const searchQuery = reactive({
+  offset: 1,
+  limit: 20,
+  deviceNo: '',
+  startTime: '',
+  endTime: '',
+  deviceType: '',
+})
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '设备编号', value: 'deviceNo', align: 'center' },
+  { text: '安装位置', value: 'location', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+]) // 表格
+const total = ref<number>(0)
+const list = ref<any[]>([])
+// 搜索
+const search = () => {
+  loadingTable.value = true
+  setTimeout(() => {
+    list.value = [
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+    ]
+    total.value = 1
+    loadingTable.value = false
+  }, 1000)
+}
+// 重置
+const reset = () => {
+  searchQuery.deviceNo = ''
+  searchQuery.offset = 1
+  searchQuery.limit = 20
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.offset = val.page
+  }
+  search()
+}
+// 表格被选中的行
+const selectList = ref<any[]>([])
+// 表格多选
+const multiSelect = (row: any[]) => {
+  selectList.value = row
+}
+onMounted(() => {
+  search()
+})
+</script>
+
 <template>
-  <div>设备管理</div>
+  <div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="search" @clear="reset">
+      <search-item>
+        <el-select v-model="searchQuery.deviceType" placeholder="设备类型">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <!-- <el-input v-model="searchQuery.deviceNo" placeholder="设备类型" clearable class="w-50 m-2 normal-input" /> -->
+        <el-select v-model="searchQuery.deviceType" placeholder="监测类别">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="TimeRanges"
+          type="datetimerange"
+          format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+          range-separator="至"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <table-container>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns as any"
+        :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
+        :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </div>
 </template>
+
diff --git a/src/views/data/electricity/network.vue b/src/views/data/electricity/network.vue
index 62a0956..b1da8b5 100644
--- a/src/views/data/electricity/network.vue
+++ b/src/views/data/electricity/network.vue
@@ -1,23 +1,33 @@
 <!-- 配电网 -->
 <script lang="ts" setup name="network">
+// 查询参数
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  electricityName: '', // 名称
+  startTime: '',
+  endTime: '',
 })
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+// table表格loading
 const loadingTable = ref(true)
+// table列表
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
-  { text: '设备编号', value: 'deviceNo', align: 'center' },
-  { text: '安装位置', value: 'location', align: 'center' },
-  { text: '上报时间', value: 'reportingTime', align: 'center' },
-  { text: '上报频率', value: 'reportingFrequency', align: 'center' },
-  { text: '当前状态', value: 'statusName', align: 'center' },
-]) // 表格
+  { text: '配电网名称', value: 'electricityName', align: 'center' },
+  { text: '配电网区域', value: 'electricityArea', align: 'center' },
+  { text: '上传人', value: 'uploaderName', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+])
 const total = ref<number>(0)
+// table列表数据
 const list = ref<any[]>([])
 // 搜索
 const search = () => {
@@ -25,29 +35,56 @@
     list.value = [
       {
         id: '1', // id
-        collectType: '1', // 采集类型
-        collectTypeName: '类型名称', // 采集类型名称
-        deviceType: '1', // 设备类型
-        deviceTypeName: '设备类型', // 设备类型名称
-        deviceNo: '1', // 设备编号
-        location: '北京市xxx', // 安装位置
-        reportingTime: '2023-3-8 00:00:00', // 上报时间
-        reportingFrequency: '1', // 上报频率
-        status: '1', // 当前状态
-        statusName: '正常', // 当前状态名称
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '张三', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '张三', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网3', // 配电网名称
+        electricityArea: '北京市房山区', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '王五', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市海淀区', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '李四', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
 // 重置
 const reset = () => {
-  searchQuery.deviceAssort = ''
+  searchQuery.electricityName = ''
   searchQuery.offset = 1
   searchQuery.limit = 20
-  searchQuery.deviceType = ''
-  searchQuery.deviceNo = ''
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 查看详情
+const detail = (row: any) => {
+  console.log(row, 'row')
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size?: number; page?: number }) => {
@@ -57,7 +94,7 @@
   if (val && val.page) {
     searchQuery.offset = val.page
   }
-  // getList()
+  search()
 }
 // 表格被选中的行
 const selectList = ref<any[]>([])
@@ -73,17 +110,18 @@
 <template>
   <div>
     <!-- 筛选条件 -->
-    <search-area :need-clear="true" @search="search">
+    <search-area :need-clear="true" @search="search" @clear="reset">
       <search-item>
-        <el-input v-model="searchQuery.deviceNo" placeholder="名称" clearable class="w-50 m-2 normal-input" />
+        <el-input v-model="searchQuery.electricityName" placeholder="名称" clearable class="w-50 m-2 normal-input" />
       </search-item>
       <search-item>
         <el-date-picker
+          v-model="TimeRanges"
           type="datetimerange"
           format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
           range-separator="至"
-          start-placeholder="发布开始时间"
-          end-placeholder="发布结束时间"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
           clearable
         />
       </search-item>
@@ -94,10 +132,29 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="{ row }">
+              <el-button
+                size="small"
+                type="primary"
+                link
+                @click="detail(row)"
+              >
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/views/data/electricity/page.vue b/src/views/data/electricity/page.vue
index 0e3c96b..dd7aab8 100644
--- a/src/views/data/electricity/page.vue
+++ b/src/views/data/electricity/page.vue
@@ -7,41 +7,59 @@
     required: true,
   },
 })
+// 查询参数
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
   deviceNo: '',
+  startTime: '',
+  endTime: '',
+  type: '',
 })
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
-  { text: '上报时间', value: 'reportingTime', align: 'center' },
-  { text: '上报频率', value: 'reportingFrequency', align: 'center' },
-  { text: '当前状态', value: 'statusName', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
 ]) // 表格
 const total = ref<number>(0)
 const list = ref<any[]>([])
 // 搜索
 const search = () => {
+  loadingTable.value = true
   setTimeout(() => {
     list.value = [
       {
         id: '1', // id
-        collectType: '1', // 采集类型
-        collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
-        deviceTypeName: '设备类型', // 设备类型名称
-        deviceNo: '1', // 设备编号
-        location: '北京市xxx', // 安装位置
-        reportingTime: '2023-3-8 00:00:00', // 上报时间
-        reportingFrequency: '1', // 上报频率
-        status: '1', // 当前状态
-        statusName: '正常', // 当前状态名称
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
       },
     ]
     total.value = 1
@@ -50,11 +68,11 @@
 }
 // 重置
 const reset = () => {
-  searchQuery.deviceAssort = ''
+  searchQuery.deviceNo = ''
   searchQuery.offset = 1
   searchQuery.limit = 20
-  searchQuery.deviceType = ''
-  searchQuery.deviceNo = ''
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size?: number; page?: number }) => {
@@ -64,7 +82,7 @@
   if (val && val.page) {
     searchQuery.offset = val.page
   }
-  // getList()
+  search()
 }
 // 表格被选中的行
 const selectList = ref<any[]>([])
@@ -75,17 +93,22 @@
 onMounted(() => {
   search()
 })
+watch(() => props.type, (newVal) => {
+  searchQuery.type = newVal
+  search()
+})
 </script>
 
 <template>
   <div>
     <!-- 筛选条件 -->
-    <search-area :need-clear="true" @search="search">
+    <search-area :need-clear="true" @search="search" @clear="reset">
       <search-item>
         <el-input v-model="searchQuery.deviceNo" placeholder="设备编号" clearable class="w-50 m-2 normal-input" />
       </search-item>
       <search-item>
         <el-date-picker
+          v-model="TimeRanges"
           type="datetimerange"
           format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
           range-separator="至"
@@ -101,10 +124,16 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
 
-<style lang="scss" scoped>
-</style>

diff --git a/src/views/data/collect/collect.vue b/src/views/data/collect/collect.vue
index b4158c1..51605be 100644
--- a/src/views/data/collect/collect.vue
+++ b/src/views/data/collect/collect.vue
@@ -3,14 +3,14 @@
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  deviceAssort: '', // 设备分类
+  deviceType: '', // 设备类型
+  deviceNo: '', // 设备编号
 })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '采集类型', value: 'collectTypeName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
   { text: '上报时间', value: 'reportingTime', align: 'center' },
@@ -28,6 +28,45 @@
         collectType: '1', // 采集类型
         collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
+        deviceTypeName: '测试设备', // 设备类型名称
+        deviceNo: '13', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '用电', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '监测', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '设备类型', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
         deviceTypeName: '设备类型', // 设备类型名称
         deviceNo: '1', // 设备编号
         location: '北京市xxx', // 安装位置
@@ -37,7 +76,7 @@
         statusName: '正常', // 当前状态名称
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
@@ -99,7 +138,15 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
diff --git a/src/views/data/collect/storage.vue b/src/views/data/collect/storage.vue
index a443d4e..24d5429 100644
--- a/src/views/data/collect/storage.vue
+++ b/src/views/data/collect/storage.vue
@@ -1,3 +1,98 @@
+<!-- 存储管理 -->
+<script lang="ts" setup name="storage">
+import type { FormInstance, FormRules } from 'element-plus'
+// 前端校验规则
+const rules: FormRules = reactive({
+  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
+})
+// 表单收集数据
+const userForm = reactive({
+  id: '', // 编号
+})
+// 重置
+const reset = () => {
+
+}
+const ruleFormRef = ref()
+// 确认
+const saveData = () => {
+  ruleFormRef.value?.validate((valid: any) => {
+    if (valid) {
+    // 验证通过
+    }
+  })
+}
+</script>
+
 <template>
-  <div>存储管理</div>
+  <el-card width="50%">
+    <div class="title">
+      存储管理
+    </div>
+    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="110px">
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="服务器IP" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="数据库" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="用户名" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="密码" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button style="margin-left: 200px;" @click="reset">
+        重置
+      </el-button>
+    </div>
+  </el-card>
 </template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  text-align: center;
+  line-height: 1.5;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+</style>
+
diff --git a/src/views/data/consumption/index.vue b/src/views/data/consumption/index.vue
index 06b9d42..852076a 100644
--- a/src/views/data/consumption/index.vue
+++ b/src/views/data/consumption/index.vue
@@ -1,3 +1,42 @@
+<!-- 用气监测 -->
+<script lang="ts" setup name="useheat">
+import page from '@/views/data/useHeat/page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '家用燃气监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>用7监测</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+
diff --git a/src/views/data/device/index.vue b/src/views/data/device/index.vue
index 09176b3..eee813a 100644
--- a/src/views/data/device/index.vue
+++ b/src/views/data/device/index.vue
@@ -1,3 +1,136 @@
+<!-- 设备管理 -->
+<script lang="ts" setup name="device">
+// 查询参数
+const searchQuery = reactive({
+  offset: 1,
+  limit: 20,
+  deviceNo: '',
+  startTime: '',
+  endTime: '',
+  deviceType: '',
+})
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '设备编号', value: 'deviceNo', align: 'center' },
+  { text: '安装位置', value: 'location', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+]) // 表格
+const total = ref<number>(0)
+const list = ref<any[]>([])
+// 搜索
+const search = () => {
+  loadingTable.value = true
+  setTimeout(() => {
+    list.value = [
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+    ]
+    total.value = 1
+    loadingTable.value = false
+  }, 1000)
+}
+// 重置
+const reset = () => {
+  searchQuery.deviceNo = ''
+  searchQuery.offset = 1
+  searchQuery.limit = 20
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.offset = val.page
+  }
+  search()
+}
+// 表格被选中的行
+const selectList = ref<any[]>([])
+// 表格多选
+const multiSelect = (row: any[]) => {
+  selectList.value = row
+}
+onMounted(() => {
+  search()
+})
+</script>
+
 <template>
-  <div>设备管理</div>
+  <div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="search" @clear="reset">
+      <search-item>
+        <el-select v-model="searchQuery.deviceType" placeholder="设备类型">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <!-- <el-input v-model="searchQuery.deviceNo" placeholder="设备类型" clearable class="w-50 m-2 normal-input" /> -->
+        <el-select v-model="searchQuery.deviceType" placeholder="监测类别">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="TimeRanges"
+          type="datetimerange"
+          format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+          range-separator="至"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <table-container>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns as any"
+        :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
+        :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </div>
 </template>
+
diff --git a/src/views/data/electricity/network.vue b/src/views/data/electricity/network.vue
index 62a0956..b1da8b5 100644
--- a/src/views/data/electricity/network.vue
+++ b/src/views/data/electricity/network.vue
@@ -1,23 +1,33 @@
 <!-- 配电网 -->
 <script lang="ts" setup name="network">
+// 查询参数
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  electricityName: '', // 名称
+  startTime: '',
+  endTime: '',
 })
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+// table表格loading
 const loadingTable = ref(true)
+// table列表
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
-  { text: '设备编号', value: 'deviceNo', align: 'center' },
-  { text: '安装位置', value: 'location', align: 'center' },
-  { text: '上报时间', value: 'reportingTime', align: 'center' },
-  { text: '上报频率', value: 'reportingFrequency', align: 'center' },
-  { text: '当前状态', value: 'statusName', align: 'center' },
-]) // 表格
+  { text: '配电网名称', value: 'electricityName', align: 'center' },
+  { text: '配电网区域', value: 'electricityArea', align: 'center' },
+  { text: '上传人', value: 'uploaderName', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+])
 const total = ref<number>(0)
+// table列表数据
 const list = ref<any[]>([])
 // 搜索
 const search = () => {
@@ -25,29 +35,56 @@
     list.value = [
       {
         id: '1', // id
-        collectType: '1', // 采集类型
-        collectTypeName: '类型名称', // 采集类型名称
-        deviceType: '1', // 设备类型
-        deviceTypeName: '设备类型', // 设备类型名称
-        deviceNo: '1', // 设备编号
-        location: '北京市xxx', // 安装位置
-        reportingTime: '2023-3-8 00:00:00', // 上报时间
-        reportingFrequency: '1', // 上报频率
-        status: '1', // 当前状态
-        statusName: '正常', // 当前状态名称
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '张三', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '张三', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网3', // 配电网名称
+        electricityArea: '北京市房山区', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '王五', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市海淀区', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '李四', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
 // 重置
 const reset = () => {
-  searchQuery.deviceAssort = ''
+  searchQuery.electricityName = ''
   searchQuery.offset = 1
   searchQuery.limit = 20
-  searchQuery.deviceType = ''
-  searchQuery.deviceNo = ''
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 查看详情
+const detail = (row: any) => {
+  console.log(row, 'row')
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size?: number; page?: number }) => {
@@ -57,7 +94,7 @@
   if (val && val.page) {
     searchQuery.offset = val.page
   }
-  // getList()
+  search()
 }
 // 表格被选中的行
 const selectList = ref<any[]>([])
@@ -73,17 +110,18 @@
 <template>
   <div>
     <!-- 筛选条件 -->
-    <search-area :need-clear="true" @search="search">
+    <search-area :need-clear="true" @search="search" @clear="reset">
       <search-item>
-        <el-input v-model="searchQuery.deviceNo" placeholder="名称" clearable class="w-50 m-2 normal-input" />
+        <el-input v-model="searchQuery.electricityName" placeholder="名称" clearable class="w-50 m-2 normal-input" />
       </search-item>
       <search-item>
         <el-date-picker
+          v-model="TimeRanges"
           type="datetimerange"
           format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
           range-separator="至"
-          start-placeholder="发布开始时间"
-          end-placeholder="发布结束时间"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
           clearable
         />
       </search-item>
@@ -94,10 +132,29 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="{ row }">
+              <el-button
+                size="small"
+                type="primary"
+                link
+                @click="detail(row)"
+              >
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/views/data/electricity/page.vue b/src/views/data/electricity/page.vue
index 0e3c96b..dd7aab8 100644
--- a/src/views/data/electricity/page.vue
+++ b/src/views/data/electricity/page.vue
@@ -7,41 +7,59 @@
     required: true,
   },
 })
+// 查询参数
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
   deviceNo: '',
+  startTime: '',
+  endTime: '',
+  type: '',
 })
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
-  { text: '上报时间', value: 'reportingTime', align: 'center' },
-  { text: '上报频率', value: 'reportingFrequency', align: 'center' },
-  { text: '当前状态', value: 'statusName', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
 ]) // 表格
 const total = ref<number>(0)
 const list = ref<any[]>([])
 // 搜索
 const search = () => {
+  loadingTable.value = true
   setTimeout(() => {
     list.value = [
       {
         id: '1', // id
-        collectType: '1', // 采集类型
-        collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
-        deviceTypeName: '设备类型', // 设备类型名称
-        deviceNo: '1', // 设备编号
-        location: '北京市xxx', // 安装位置
-        reportingTime: '2023-3-8 00:00:00', // 上报时间
-        reportingFrequency: '1', // 上报频率
-        status: '1', // 当前状态
-        statusName: '正常', // 当前状态名称
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
       },
     ]
     total.value = 1
@@ -50,11 +68,11 @@
 }
 // 重置
 const reset = () => {
-  searchQuery.deviceAssort = ''
+  searchQuery.deviceNo = ''
   searchQuery.offset = 1
   searchQuery.limit = 20
-  searchQuery.deviceType = ''
-  searchQuery.deviceNo = ''
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size?: number; page?: number }) => {
@@ -64,7 +82,7 @@
   if (val && val.page) {
     searchQuery.offset = val.page
   }
-  // getList()
+  search()
 }
 // 表格被选中的行
 const selectList = ref<any[]>([])
@@ -75,17 +93,22 @@
 onMounted(() => {
   search()
 })
+watch(() => props.type, (newVal) => {
+  searchQuery.type = newVal
+  search()
+})
 </script>
 
 <template>
   <div>
     <!-- 筛选条件 -->
-    <search-area :need-clear="true" @search="search">
+    <search-area :need-clear="true" @search="search" @clear="reset">
       <search-item>
         <el-input v-model="searchQuery.deviceNo" placeholder="设备编号" clearable class="w-50 m-2 normal-input" />
       </search-item>
       <search-item>
         <el-date-picker
+          v-model="TimeRanges"
           type="datetimerange"
           format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
           range-separator="至"
@@ -101,10 +124,16 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
 
-<style lang="scss" scoped>
-</style>
diff --git a/src/views/data/environment/index.vue b/src/views/data/environment/index.vue
index 85b44b2..2a9728f 100644
--- a/src/views/data/environment/index.vue
+++ b/src/views/data/environment/index.vue
@@ -1,3 +1,42 @@
+<!-- 环境监测 -->
+<script lang="ts" setup name="environment">
+import page from '@/views/data/useHeat/page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '气象仪监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>环境参数</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+

diff --git a/src/views/data/collect/collect.vue b/src/views/data/collect/collect.vue
index b4158c1..51605be 100644
--- a/src/views/data/collect/collect.vue
+++ b/src/views/data/collect/collect.vue
@@ -3,14 +3,14 @@
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  deviceAssort: '', // 设备分类
+  deviceType: '', // 设备类型
+  deviceNo: '', // 设备编号
 })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '采集类型', value: 'collectTypeName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
   { text: '上报时间', value: 'reportingTime', align: 'center' },
@@ -28,6 +28,45 @@
         collectType: '1', // 采集类型
         collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
+        deviceTypeName: '测试设备', // 设备类型名称
+        deviceNo: '13', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '用电', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '监测', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '设备类型', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
         deviceTypeName: '设备类型', // 设备类型名称
         deviceNo: '1', // 设备编号
         location: '北京市xxx', // 安装位置
@@ -37,7 +76,7 @@
         statusName: '正常', // 当前状态名称
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
@@ -99,7 +138,15 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
diff --git a/src/views/data/collect/storage.vue b/src/views/data/collect/storage.vue
index a443d4e..24d5429 100644
--- a/src/views/data/collect/storage.vue
+++ b/src/views/data/collect/storage.vue
@@ -1,3 +1,98 @@
+<!-- 存储管理 -->
+<script lang="ts" setup name="storage">
+import type { FormInstance, FormRules } from 'element-plus'
+// 前端校验规则
+const rules: FormRules = reactive({
+  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
+})
+// 表单收集数据
+const userForm = reactive({
+  id: '', // 编号
+})
+// 重置
+const reset = () => {
+
+}
+const ruleFormRef = ref()
+// 确认
+const saveData = () => {
+  ruleFormRef.value?.validate((valid: any) => {
+    if (valid) {
+    // 验证通过
+    }
+  })
+}
+</script>
+
 <template>
-  <div>存储管理</div>
+  <el-card width="50%">
+    <div class="title">
+      存储管理
+    </div>
+    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="110px">
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="服务器IP" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="数据库" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="用户名" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="密码" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button style="margin-left: 200px;" @click="reset">
+        重置
+      </el-button>
+    </div>
+  </el-card>
 </template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  text-align: center;
+  line-height: 1.5;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+</style>
+
diff --git a/src/views/data/consumption/index.vue b/src/views/data/consumption/index.vue
index 06b9d42..852076a 100644
--- a/src/views/data/consumption/index.vue
+++ b/src/views/data/consumption/index.vue
@@ -1,3 +1,42 @@
+<!-- 用气监测 -->
+<script lang="ts" setup name="useheat">
+import page from '@/views/data/useHeat/page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '家用燃气监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>用7监测</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+
diff --git a/src/views/data/device/index.vue b/src/views/data/device/index.vue
index 09176b3..eee813a 100644
--- a/src/views/data/device/index.vue
+++ b/src/views/data/device/index.vue
@@ -1,3 +1,136 @@
+<!-- 设备管理 -->
+<script lang="ts" setup name="device">
+// 查询参数
+const searchQuery = reactive({
+  offset: 1,
+  limit: 20,
+  deviceNo: '',
+  startTime: '',
+  endTime: '',
+  deviceType: '',
+})
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '设备编号', value: 'deviceNo', align: 'center' },
+  { text: '安装位置', value: 'location', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+]) // 表格
+const total = ref<number>(0)
+const list = ref<any[]>([])
+// 搜索
+const search = () => {
+  loadingTable.value = true
+  setTimeout(() => {
+    list.value = [
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+    ]
+    total.value = 1
+    loadingTable.value = false
+  }, 1000)
+}
+// 重置
+const reset = () => {
+  searchQuery.deviceNo = ''
+  searchQuery.offset = 1
+  searchQuery.limit = 20
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.offset = val.page
+  }
+  search()
+}
+// 表格被选中的行
+const selectList = ref<any[]>([])
+// 表格多选
+const multiSelect = (row: any[]) => {
+  selectList.value = row
+}
+onMounted(() => {
+  search()
+})
+</script>
+
 <template>
-  <div>设备管理</div>
+  <div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="search" @clear="reset">
+      <search-item>
+        <el-select v-model="searchQuery.deviceType" placeholder="设备类型">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <!-- <el-input v-model="searchQuery.deviceNo" placeholder="设备类型" clearable class="w-50 m-2 normal-input" /> -->
+        <el-select v-model="searchQuery.deviceType" placeholder="监测类别">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="TimeRanges"
+          type="datetimerange"
+          format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+          range-separator="至"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <table-container>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns as any"
+        :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
+        :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </div>
 </template>
+
diff --git a/src/views/data/electricity/network.vue b/src/views/data/electricity/network.vue
index 62a0956..b1da8b5 100644
--- a/src/views/data/electricity/network.vue
+++ b/src/views/data/electricity/network.vue
@@ -1,23 +1,33 @@
 <!-- 配电网 -->
 <script lang="ts" setup name="network">
+// 查询参数
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  electricityName: '', // 名称
+  startTime: '',
+  endTime: '',
 })
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+// table表格loading
 const loadingTable = ref(true)
+// table列表
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
-  { text: '设备编号', value: 'deviceNo', align: 'center' },
-  { text: '安装位置', value: 'location', align: 'center' },
-  { text: '上报时间', value: 'reportingTime', align: 'center' },
-  { text: '上报频率', value: 'reportingFrequency', align: 'center' },
-  { text: '当前状态', value: 'statusName', align: 'center' },
-]) // 表格
+  { text: '配电网名称', value: 'electricityName', align: 'center' },
+  { text: '配电网区域', value: 'electricityArea', align: 'center' },
+  { text: '上传人', value: 'uploaderName', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+])
 const total = ref<number>(0)
+// table列表数据
 const list = ref<any[]>([])
 // 搜索
 const search = () => {
@@ -25,29 +35,56 @@
     list.value = [
       {
         id: '1', // id
-        collectType: '1', // 采集类型
-        collectTypeName: '类型名称', // 采集类型名称
-        deviceType: '1', // 设备类型
-        deviceTypeName: '设备类型', // 设备类型名称
-        deviceNo: '1', // 设备编号
-        location: '北京市xxx', // 安装位置
-        reportingTime: '2023-3-8 00:00:00', // 上报时间
-        reportingFrequency: '1', // 上报频率
-        status: '1', // 当前状态
-        statusName: '正常', // 当前状态名称
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '张三', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '张三', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网3', // 配电网名称
+        electricityArea: '北京市房山区', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '王五', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市海淀区', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '李四', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
 // 重置
 const reset = () => {
-  searchQuery.deviceAssort = ''
+  searchQuery.electricityName = ''
   searchQuery.offset = 1
   searchQuery.limit = 20
-  searchQuery.deviceType = ''
-  searchQuery.deviceNo = ''
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 查看详情
+const detail = (row: any) => {
+  console.log(row, 'row')
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size?: number; page?: number }) => {
@@ -57,7 +94,7 @@
   if (val && val.page) {
     searchQuery.offset = val.page
   }
-  // getList()
+  search()
 }
 // 表格被选中的行
 const selectList = ref<any[]>([])
@@ -73,17 +110,18 @@
 <template>
   <div>
     <!-- 筛选条件 -->
-    <search-area :need-clear="true" @search="search">
+    <search-area :need-clear="true" @search="search" @clear="reset">
       <search-item>
-        <el-input v-model="searchQuery.deviceNo" placeholder="名称" clearable class="w-50 m-2 normal-input" />
+        <el-input v-model="searchQuery.electricityName" placeholder="名称" clearable class="w-50 m-2 normal-input" />
       </search-item>
       <search-item>
         <el-date-picker
+          v-model="TimeRanges"
           type="datetimerange"
           format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
           range-separator="至"
-          start-placeholder="发布开始时间"
-          end-placeholder="发布结束时间"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
           clearable
         />
       </search-item>
@@ -94,10 +132,29 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="{ row }">
+              <el-button
+                size="small"
+                type="primary"
+                link
+                @click="detail(row)"
+              >
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/views/data/electricity/page.vue b/src/views/data/electricity/page.vue
index 0e3c96b..dd7aab8 100644
--- a/src/views/data/electricity/page.vue
+++ b/src/views/data/electricity/page.vue
@@ -7,41 +7,59 @@
     required: true,
   },
 })
+// 查询参数
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
   deviceNo: '',
+  startTime: '',
+  endTime: '',
+  type: '',
 })
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
-  { text: '上报时间', value: 'reportingTime', align: 'center' },
-  { text: '上报频率', value: 'reportingFrequency', align: 'center' },
-  { text: '当前状态', value: 'statusName', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
 ]) // 表格
 const total = ref<number>(0)
 const list = ref<any[]>([])
 // 搜索
 const search = () => {
+  loadingTable.value = true
   setTimeout(() => {
     list.value = [
       {
         id: '1', // id
-        collectType: '1', // 采集类型
-        collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
-        deviceTypeName: '设备类型', // 设备类型名称
-        deviceNo: '1', // 设备编号
-        location: '北京市xxx', // 安装位置
-        reportingTime: '2023-3-8 00:00:00', // 上报时间
-        reportingFrequency: '1', // 上报频率
-        status: '1', // 当前状态
-        statusName: '正常', // 当前状态名称
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
       },
     ]
     total.value = 1
@@ -50,11 +68,11 @@
 }
 // 重置
 const reset = () => {
-  searchQuery.deviceAssort = ''
+  searchQuery.deviceNo = ''
   searchQuery.offset = 1
   searchQuery.limit = 20
-  searchQuery.deviceType = ''
-  searchQuery.deviceNo = ''
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size?: number; page?: number }) => {
@@ -64,7 +82,7 @@
   if (val && val.page) {
     searchQuery.offset = val.page
   }
-  // getList()
+  search()
 }
 // 表格被选中的行
 const selectList = ref<any[]>([])
@@ -75,17 +93,22 @@
 onMounted(() => {
   search()
 })
+watch(() => props.type, (newVal) => {
+  searchQuery.type = newVal
+  search()
+})
 </script>
 
 <template>
   <div>
     <!-- 筛选条件 -->
-    <search-area :need-clear="true" @search="search">
+    <search-area :need-clear="true" @search="search" @clear="reset">
       <search-item>
         <el-input v-model="searchQuery.deviceNo" placeholder="设备编号" clearable class="w-50 m-2 normal-input" />
       </search-item>
       <search-item>
         <el-date-picker
+          v-model="TimeRanges"
           type="datetimerange"
           format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
           range-separator="至"
@@ -101,10 +124,16 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
 
-<style lang="scss" scoped>
-</style>
diff --git a/src/views/data/environment/index.vue b/src/views/data/environment/index.vue
index 85b44b2..2a9728f 100644
--- a/src/views/data/environment/index.vue
+++ b/src/views/data/environment/index.vue
@@ -1,3 +1,42 @@
+<!-- 环境监测 -->
+<script lang="ts" setup name="environment">
+import page from '@/views/data/useHeat/page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '气象仪监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>环境参数</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+
diff --git a/src/views/data/useHeat/index.vue b/src/views/data/useHeat/index.vue
index 3ce9261..88db305 100644
--- a/src/views/data/useHeat/index.vue
+++ b/src/views/data/useHeat/index.vue
@@ -1,3 +1,46 @@
+<!-- 供暖监测 -->
+<script lang="ts" setup name="useheat">
+import page from './page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '供暖监测',
+  },
+  {
+    id: '2',
+    title: '热水监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>用热监测</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select"/>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+

diff --git a/src/views/data/collect/collect.vue b/src/views/data/collect/collect.vue
index b4158c1..51605be 100644
--- a/src/views/data/collect/collect.vue
+++ b/src/views/data/collect/collect.vue
@@ -3,14 +3,14 @@
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  deviceAssort: '', // 设备分类
+  deviceType: '', // 设备类型
+  deviceNo: '', // 设备编号
 })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '采集类型', value: 'collectTypeName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
   { text: '上报时间', value: 'reportingTime', align: 'center' },
@@ -28,6 +28,45 @@
         collectType: '1', // 采集类型
         collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
+        deviceTypeName: '测试设备', // 设备类型名称
+        deviceNo: '13', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '用电', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '监测', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
+        deviceTypeName: '设备类型', // 设备类型名称
+        deviceNo: '1', // 设备编号
+        location: '北京市xxx', // 安装位置
+        reportingTime: '2023-3-8 00:00:00', // 上报时间
+        reportingFrequency: '1', // 上报频率
+        status: '1', // 当前状态
+        statusName: '正常', // 当前状态名称
+      },
+      {
+        id: '1', // id
+        collectType: '1', // 采集类型
+        collectTypeName: '类型名称', // 采集类型名称
+        deviceType: '1', // 设备类型
         deviceTypeName: '设备类型', // 设备类型名称
         deviceNo: '1', // 设备编号
         location: '北京市xxx', // 安装位置
@@ -37,7 +76,7 @@
         statusName: '正常', // 当前状态名称
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
@@ -99,7 +138,15 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
diff --git a/src/views/data/collect/storage.vue b/src/views/data/collect/storage.vue
index a443d4e..24d5429 100644
--- a/src/views/data/collect/storage.vue
+++ b/src/views/data/collect/storage.vue
@@ -1,3 +1,98 @@
+<!-- 存储管理 -->
+<script lang="ts" setup name="storage">
+import type { FormInstance, FormRules } from 'element-plus'
+// 前端校验规则
+const rules: FormRules = reactive({
+  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
+})
+// 表单收集数据
+const userForm = reactive({
+  id: '', // 编号
+})
+// 重置
+const reset = () => {
+
+}
+const ruleFormRef = ref()
+// 确认
+const saveData = () => {
+  ruleFormRef.value?.validate((valid: any) => {
+    if (valid) {
+    // 验证通过
+    }
+  })
+}
+</script>
+
 <template>
-  <div>存储管理</div>
+  <el-card width="50%">
+    <div class="title">
+      存储管理
+    </div>
+    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="110px">
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="服务器IP" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="数据库" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="用户名" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="footer">
+        <el-col :span="12">
+          <el-form-item label="密码" prop="">
+            <el-input
+              v-model.trim="userForm.id" type="text"
+              placeholder="必填"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button style="margin-left: 200px;" @click="reset">
+        重置
+      </el-button>
+    </div>
+  </el-card>
 </template>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  text-align: center;
+  line-height: 1.5;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+</style>
+
diff --git a/src/views/data/consumption/index.vue b/src/views/data/consumption/index.vue
index 06b9d42..852076a 100644
--- a/src/views/data/consumption/index.vue
+++ b/src/views/data/consumption/index.vue
@@ -1,3 +1,42 @@
+<!-- 用气监测 -->
+<script lang="ts" setup name="useheat">
+import page from '@/views/data/useHeat/page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '家用燃气监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>用7监测</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+
diff --git a/src/views/data/device/index.vue b/src/views/data/device/index.vue
index 09176b3..eee813a 100644
--- a/src/views/data/device/index.vue
+++ b/src/views/data/device/index.vue
@@ -1,3 +1,136 @@
+<!-- 设备管理 -->
+<script lang="ts" setup name="device">
+// 查询参数
+const searchQuery = reactive({
+  offset: 1,
+  limit: 20,
+  deviceNo: '',
+  startTime: '',
+  endTime: '',
+  deviceType: '',
+})
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '设备编号', value: 'deviceNo', align: 'center' },
+  { text: '安装位置', value: 'location', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+]) // 表格
+const total = ref<number>(0)
+const list = ref<any[]>([])
+// 搜索
+const search = () => {
+  loadingTable.value = true
+  setTimeout(() => {
+    list.value = [
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+    ]
+    total.value = 1
+    loadingTable.value = false
+  }, 1000)
+}
+// 重置
+const reset = () => {
+  searchQuery.deviceNo = ''
+  searchQuery.offset = 1
+  searchQuery.limit = 20
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.offset = val.page
+  }
+  search()
+}
+// 表格被选中的行
+const selectList = ref<any[]>([])
+// 表格多选
+const multiSelect = (row: any[]) => {
+  selectList.value = row
+}
+onMounted(() => {
+  search()
+})
+</script>
+
 <template>
-  <div>设备管理</div>
+  <div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="search" @clear="reset">
+      <search-item>
+        <el-select v-model="searchQuery.deviceType" placeholder="设备类型">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <!-- <el-input v-model="searchQuery.deviceNo" placeholder="设备类型" clearable class="w-50 m-2 normal-input" /> -->
+        <el-select v-model="searchQuery.deviceType" placeholder="监测类别">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="TimeRanges"
+          type="datetimerange"
+          format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+          range-separator="至"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <table-container>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns as any"
+        :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
+        :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </div>
 </template>
+
diff --git a/src/views/data/electricity/network.vue b/src/views/data/electricity/network.vue
index 62a0956..b1da8b5 100644
--- a/src/views/data/electricity/network.vue
+++ b/src/views/data/electricity/network.vue
@@ -1,23 +1,33 @@
 <!-- 配电网 -->
 <script lang="ts" setup name="network">
+// 查询参数
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
-  deviceNo: '',
+  electricityName: '', // 名称
+  startTime: '',
+  endTime: '',
 })
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+// table表格loading
 const loadingTable = ref(true)
+// table列表
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
-  { text: '设备编号', value: 'deviceNo', align: 'center' },
-  { text: '安装位置', value: 'location', align: 'center' },
-  { text: '上报时间', value: 'reportingTime', align: 'center' },
-  { text: '上报频率', value: 'reportingFrequency', align: 'center' },
-  { text: '当前状态', value: 'statusName', align: 'center' },
-]) // 表格
+  { text: '配电网名称', value: 'electricityName', align: 'center' },
+  { text: '配电网区域', value: 'electricityArea', align: 'center' },
+  { text: '上传人', value: 'uploaderName', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+])
 const total = ref<number>(0)
+// table列表数据
 const list = ref<any[]>([])
 // 搜索
 const search = () => {
@@ -25,29 +35,56 @@
     list.value = [
       {
         id: '1', // id
-        collectType: '1', // 采集类型
-        collectTypeName: '类型名称', // 采集类型名称
-        deviceType: '1', // 设备类型
-        deviceTypeName: '设备类型', // 设备类型名称
-        deviceNo: '1', // 设备编号
-        location: '北京市xxx', // 安装位置
-        reportingTime: '2023-3-8 00:00:00', // 上报时间
-        reportingFrequency: '1', // 上报频率
-        status: '1', // 当前状态
-        statusName: '正常', // 当前状态名称
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '张三', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '张三', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网3', // 配电网名称
+        electricityArea: '北京市房山区', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '王五', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
+      },
+      {
+        id: '1', // id
+        electricityName: 'xxx配电网1', // 配电网名称
+        electricityArea: '北京市海淀区', // 配电网区域
+        uploader: '1', // 上传人id
+        uploaderName: '李四', // 上传人名称
+        uploadTime: '2023-3-8 00:00:00', // 上传人时间
+        electricityDetail: '', // 配电网图片地址
       },
     ]
-    total.value = 1
+    total.value = 4
     loadingTable.value = false
   }, 1000)
 }
 // 重置
 const reset = () => {
-  searchQuery.deviceAssort = ''
+  searchQuery.electricityName = ''
   searchQuery.offset = 1
   searchQuery.limit = 20
-  searchQuery.deviceType = ''
-  searchQuery.deviceNo = ''
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 查看详情
+const detail = (row: any) => {
+  console.log(row, 'row')
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size?: number; page?: number }) => {
@@ -57,7 +94,7 @@
   if (val && val.page) {
     searchQuery.offset = val.page
   }
-  // getList()
+  search()
 }
 // 表格被选中的行
 const selectList = ref<any[]>([])
@@ -73,17 +110,18 @@
 <template>
   <div>
     <!-- 筛选条件 -->
-    <search-area :need-clear="true" @search="search">
+    <search-area :need-clear="true" @search="search" @clear="reset">
       <search-item>
-        <el-input v-model="searchQuery.deviceNo" placeholder="名称" clearable class="w-50 m-2 normal-input" />
+        <el-input v-model="searchQuery.electricityName" placeholder="名称" clearable class="w-50 m-2 normal-input" />
       </search-item>
       <search-item>
         <el-date-picker
+          v-model="TimeRanges"
           type="datetimerange"
           format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
           range-separator="至"
-          start-placeholder="发布开始时间"
-          end-placeholder="发布结束时间"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
           clearable
         />
       </search-item>
@@ -94,10 +132,29 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="{ row }">
+              <el-button
+                size="small"
+                type="primary"
+                link
+                @click="detail(row)"
+              >
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/views/data/electricity/page.vue b/src/views/data/electricity/page.vue
index 0e3c96b..dd7aab8 100644
--- a/src/views/data/electricity/page.vue
+++ b/src/views/data/electricity/page.vue
@@ -7,41 +7,59 @@
     required: true,
   },
 })
+// 查询参数
 const searchQuery = reactive({
   offset: 1,
   limit: 20,
-  deviceAssort: '',
-  deviceType: '',
   deviceNo: '',
+  startTime: '',
+  endTime: '',
+  type: '',
 })
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
 const loadingTable = ref(true)
 const columns = ref([
-  { text: '采集类型', value: 'signNo', align: 'center' },
-  { text: '设备类型', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
   { text: '设备编号', value: 'deviceNo', align: 'center' },
   { text: '安装位置', value: 'location', align: 'center' },
-  { text: '上报时间', value: 'reportingTime', align: 'center' },
-  { text: '上报频率', value: 'reportingFrequency', align: 'center' },
-  { text: '当前状态', value: 'statusName', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
 ]) // 表格
 const total = ref<number>(0)
 const list = ref<any[]>([])
 // 搜索
 const search = () => {
+  loadingTable.value = true
   setTimeout(() => {
     list.value = [
       {
         id: '1', // id
-        collectType: '1', // 采集类型
-        collectTypeName: '类型名称', // 采集类型名称
         deviceType: '1', // 设备类型
-        deviceTypeName: '设备类型', // 设备类型名称
-        deviceNo: '1', // 设备编号
-        location: '北京市xxx', // 安装位置
-        reportingTime: '2023-3-8 00:00:00', // 上报时间
-        reportingFrequency: '1', // 上报频率
-        status: '1', // 当前状态
-        statusName: '正常', // 当前状态名称
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
       },
     ]
     total.value = 1
@@ -50,11 +68,11 @@
 }
 // 重置
 const reset = () => {
-  searchQuery.deviceAssort = ''
+  searchQuery.deviceNo = ''
   searchQuery.offset = 1
   searchQuery.limit = 20
-  searchQuery.deviceType = ''
-  searchQuery.deviceNo = ''
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
 }
 // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
 const changePage = (val: { size?: number; page?: number }) => {
@@ -64,7 +82,7 @@
   if (val && val.page) {
     searchQuery.offset = val.page
   }
-  // getList()
+  search()
 }
 // 表格被选中的行
 const selectList = ref<any[]>([])
@@ -75,17 +93,22 @@
 onMounted(() => {
   search()
 })
+watch(() => props.type, (newVal) => {
+  searchQuery.type = newVal
+  search()
+})
 </script>
 
 <template>
   <div>
     <!-- 筛选条件 -->
-    <search-area :need-clear="true" @search="search">
+    <search-area :need-clear="true" @search="search" @clear="reset">
       <search-item>
         <el-input v-model="searchQuery.deviceNo" placeholder="设备编号" clearable class="w-50 m-2 normal-input" />
       </search-item>
       <search-item>
         <el-date-picker
+          v-model="TimeRanges"
           type="datetimerange"
           format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
           range-separator="至"
@@ -101,10 +124,16 @@
         :data="list" :total="total" :columns="columns as any"
         :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
         :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
-      />
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
     </table-container>
   </div>
 </template>
 
-<style lang="scss" scoped>
-</style>
diff --git a/src/views/data/environment/index.vue b/src/views/data/environment/index.vue
index 85b44b2..2a9728f 100644
--- a/src/views/data/environment/index.vue
+++ b/src/views/data/environment/index.vue
@@ -1,3 +1,42 @@
+<!-- 环境监测 -->
+<script lang="ts" setup name="environment">
+import page from '@/views/data/useHeat/page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '气象仪监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>环境参数</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select" />
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+
diff --git a/src/views/data/useHeat/index.vue b/src/views/data/useHeat/index.vue
index 3ce9261..88db305 100644
--- a/src/views/data/useHeat/index.vue
+++ b/src/views/data/useHeat/index.vue
@@ -1,3 +1,46 @@
+<!-- 供暖监测 -->
+<script lang="ts" setup name="useheat">
+import page from './page.vue'
+import tab from '@/views/data/collect/tab.vue'
+const tablistData = ref([
+  {
+    id: '1',
+    title: '供暖监测',
+  },
+  {
+    id: '2',
+    title: '热水监测',
+  },
+])
+const select = ref('')
+const confirm = (selectp: string) => {
+  select.value = selectp
+}
+</script>
+
 <template>
-  <div>用热监测</div>
+  <div>
+    <!-- tab切换 -->
+    <tab :tablist-data="tablistData" @confirm="confirm" />
+    <page :type="select"/>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.normal-input {
+  width: 130px !important;
+}
+
+.normal-date {
+  width: 130px !important;
+}
+
+.normal-select {
+  width: 130px !important;
+}
+
+:deep(.el-table__header) {
+  background-color: #bbb;
+}
+</style>
+
diff --git a/src/views/data/useHeat/page.vue b/src/views/data/useHeat/page.vue
new file mode 100644
index 0000000..ab6e4d9
--- /dev/null
+++ b/src/views/data/useHeat/page.vue
@@ -0,0 +1,148 @@
+<!-- 供暖监测/热水监测 -->
+<script lang="ts" setup name="network">
+const props = defineProps({
+  // 根据type发送不同请求
+  type: {
+    type: String,
+    required: true,
+  },
+})
+// 查询参数
+const searchQuery = reactive({
+  offset: 1,
+  limit: 20,
+  deviceNo: '',
+  startTime: '',
+  endTime: '',
+  type: '',
+  deviceType: '',
+})
+// 查询时间段范围
+const TimeRanges = ref()
+// 监听时间段范围
+watch(() => TimeRanges.value, (newVal: string[]) => {
+  if (newVal && newVal.length) {
+    searchQuery.startTime = newVal[0]
+    searchQuery.endTime = newVal[1]
+  }
+}, { deep: true })
+const loadingTable = ref(true)
+const columns = ref([
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '设备编号', value: 'deviceNo', align: 'center' },
+  { text: '安装位置', value: 'location', align: 'center' },
+  { text: '电量/V', value: 'electricalVoltage', align: 'center' },
+  { text: '功率/W', value: 'power', align: 'center' },
+  { text: '上传时间', value: 'uploadTime', align: 'center' },
+]) // 表格
+const total = ref<number>(0)
+const list = ref<any[]>([])
+// 搜索
+const search = () => {
+  loadingTable.value = true
+  setTimeout(() => {
+    list.value = [
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de001', // 设备编号
+        location: '北京市', // 安装位置
+        electricalVoltage: '1000', // 电量
+        power: '1000', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+      {
+        id: '1', // id
+        deviceType: '1', // 设备类型
+        deviceTypeName: '测量设备', // 设备类型名称
+        deviceNo: 'de002', // 设备编号
+        location: '海淀区', // 安装位置
+        electricalVoltage: '1400', // 电量
+        power: '1500', // 功率
+        uploadTime: '2023-3-8 00:00:00', // 上传时间
+      },
+    ]
+    total.value = 1
+    loadingTable.value = false
+  }, 1000)
+}
+// 重置
+const reset = () => {
+  searchQuery.deviceNo = ''
+  searchQuery.offset = 1
+  searchQuery.limit = 20
+  searchQuery.startTime = ''
+  searchQuery.endTime = ''
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.offset = val.page
+  }
+  search()
+}
+// 表格被选中的行
+const selectList = ref<any[]>([])
+// 表格多选
+const multiSelect = (row: any[]) => {
+  selectList.value = row
+}
+onMounted(() => {
+  search()
+})
+watch(() => props.type, (newVal) => {
+  searchQuery.type = newVal
+  search()
+})
+</script>
+
+<template>
+  <div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="search" @clear="reset">
+      <search-item>
+        <el-select v-model="searchQuery.deviceType" placeholder="设备类型">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <!-- <el-input v-model="searchQuery.deviceNo" placeholder="设备类型" clearable class="w-50 m-2 normal-input" /> -->
+        <el-select v-model="searchQuery.deviceType" placeholder="监测类别">
+          <el-option :value="1" label="1" />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="TimeRanges"
+          type="datetimerange"
+          format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+          range-separator="至"
+          start-placeholder="上传开始时间"
+          end-placeholder="上传结束时间"
+          clearable
+        />
+      </search-item>
+    </search-area>
+    <table-container>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns as any"
+        :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable"
+        :is-showmulti-select="true" :is-multi="true" @change="changePage" @multiSelect="multiSelect"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </div>
+</template>
+