feat: 查看历史数据

src/apis/index.js

@@ -14,10 +14,13 @@ export const getDevices = () => http.get(`${corrosion}/devices`);
 export const getDevicesAll = () => http.get(`${corrosion}/devices/all`);
 
 // 获取数据统计 积分电量
-export const getIntegralElectric = () => http.get(`${corrosion}/monthes/integralElectric`);
+export const getIntegralElectric = () => http.get(`${corrosion}/months/integralElectric`);
 
 // 获取数据统计 月累计腐蚀
-export const getTotalCorrosion = () => http.get(`${corrosion}/monthes/totalCorrosion`);
+export const getTotalCorrosion = () => http.get(`${corrosion}/months/totalCorrosion`);
 
 // 获取数据统计 月累计湿润时间图
-export const getMoistTime = () => http.get(`${corrosion}/monthes/moistTime`);
+export const getMoistTime = () => http.get(`${corrosion}/months/moistTime`);
+
+// 查历史数据
+export const getHistories = params => http.get(`${corrosion}/histories`, { params });

src/components/search-bar-data.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-form :inline="true" :model="searchDevice" ref="searchDeviceForm">
+    <el-form-item label="选择站点">
+      <el-select v-model="searchDevice.deviceId" placeholder="请选择站点">
+        <el-option label="全部" value></el-option>
+        <el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="选择日期">
+      <el-date-picker
+        v-model="searchDevice.date"
+        type="daterange"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { reactive, ref, computed, defineEmits } from 'vue';
+import { useStore } from 'vuex';
+
+const emit = defineEmits(['search']);
+const searchDevice = reactive({ deviceId: '', date: '' });
+const searchDeviceForm = ref(null); // form
+const store = useStore();
+const devices = computed(() => store.state.device.devices);
+
+/**
+ * 格式化日期
+ * @param {Date} date 选择的日期
+ */
+const formatDate = date => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${year}-${month}-${day}`;
+};
+
+// 提交
+const onSubmit = () => {
+  searchDeviceForm.value.validate(() => {
+    const { deviceId, date } = searchDevice;
+    if (date) {
+      const daterange = [formatDate(date[0]), formatDate(date[1])];
+      emit('search', { deviceId, date: daterange });
+    } else {
+      emit('search', { deviceId, date });
+    }
+  });
+};
+</script>

src/views/data-history.vue

@@ -1,3 +1,121 @@
+<script setup>
+import { computed, onMounted, reactive } from 'vue';
+import { useStore } from 'vuex';
+import SearchBar from 'components/search-bar-data.vue';
+import { getHistories } from 'apis/index';
+
+const filter = reactive({ search: {}, page: { page: 1, size: 10 } });
+
+const onSearch = payload => {
+  console.log('payload: ', payload);
+  filter.search = { ...payload };
+};
+
+let timer = null;
+const store = useStore();
+const token = computed(() => store.getters['user/token']);
+let contentHeight = 600;
+let data = reactive(null);
+
+// 获取设备完整信息列表
+const getData = async () => {
+  try {
+    if (token) {
+      const params = { ...filter };
+      console.log('params: ', params);
+      data = await getHistories(params);
+      console.log('data: ', data);
+      timer && clearTimeout(timer);
+      timer = null;
+    } else {
+      timer = setTimeout(() => {
+        getData();
+      });
+    }
+  } catch (error) {
+    console.log('error: ', error);
+  }
+};
+
+getData();
+
+// 设置表格高度
+onMounted(() => {
+  const winHeight = document.documentElement.clientHeight;
+  contentHeight = winHeight - 150;
+});
+
+// 当前页码变化
+const onCurrentPageChange = e => {
+  console.log(e);
+};
+
+// 每页条数变化
+const onSizeChange = e => {
+  console.log(e);
+};
+
+// 下一页
+const onNext = e => {
+  console.log(e);
+};
+
+// 上一页
+const onPrev = e => {
+  console.log(e);
+};
+</script>
+
 <template>
-  <div></div>
+  <SearchBar @search="onSearch" />
+  <template v-if="data">
+    <el-table :data="data.data" style="width: 100%" :style="{ 'max-height': contentHeight + 'px' }">
+      <el-table-column type="expand">
+        <template #default="props">
+          <el-row :gutter="20" class="px-6 text-gray-400">
+            <el-col :span="9">链路地址：{{ props.row.linkAddress }}</el-col>
+            <el-col :span="9">探头编号：{{ props.row.probNo }}</el-col>
+            <el-col :span="9">设备朝向：{{ props.row.deviceDirection }}</el-col>
+            <el-col :span="9">试样：{{ props.row.simple }}</el-col>
+            <el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col>
+            <el-col :span="9">sim1：{{ props.row.sim1 }}</el-col>
+            <el-col :span="18">与主站后台联调情况：{{ props.row.joint }}</el-col>
+            <el-col :span="18">备注：{{ props.row.remark }}</el-col>
+          </el-row>
+        </template>
+      </el-table-column>
+      <el-table-column label="ID" prop="deviceId" width="100" />
+      <el-table-column label="完整ID" prop="deviceFullId" width="150" />
+      <el-table-column label="地点" prop="address" width="150" />
+      <el-table-column label="地区" prop="area" width="120" />
+      <el-table-column label="联系人" prop="contact" width="100" />
+      <el-table-column label="联系电话" prop="phone" width="150" />
+      <el-table-column label="安装时间" prop="installTime" width="200" />
+      <el-table-column label="正式运行时间" prop="runTime" width="200" />
+      <el-table-column fixed="right" label="操作" width="148">
+        <template #default="props">
+          <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete">
+            <template #reference>
+              <el-button type="danger" plain size="mini">删除</el-button>
+            </template>
+          </el-popconfirm>
+
+          <el-button type="primary" plain size="mini" @click="handleEdit(props.row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      background
+      :current-page="data.page.page"
+      :page-size="data.page.size"
+      :default-page-size="10"
+      :page-count="data.page.total"
+      class="my-3 float-right"
+      @size-change="onSizeChange"
+      @current-change="onCurrentPageChange"
+      @prev-click="onPrev"
+      @next-click="onNext"
+    ></el-pagination>
+  </template>
 </template>