Merge remote-tracking branch 'origin/master' into feature-with-login

package.json

@@ -44,7 +44,8 @@
     "lint-staged": "^11.2.3",
     "prettier": "^2.4.1",
     "unplugin-vue-components": "^0.15.6",
-    "vite-plugin-linter": "^1.0.1"
+    "vite-plugin-linter": "^1.0.1",
+    "vite-plugin-pwa": "^0.11.6"
   },
   "browserslist": [
     "Android >= 4",

src/apis/index.js

@@ -77,9 +77,9 @@ export const exportDatas = params => http.post(`${corrosion}/export`, params);
 export const getHistory = params => http.post(`${corrosion}/history/datas`, params);
 
 // 导出历史数据
-export const exportHistory = params => http.post(`${corrosion}/history/export`, params);
+export const exportHistory = params => http.post(`${corrosion}/export`, params);
 
-// 发送查询历史记录的指令
+// 发送补传指令
 export const sendCommand = params => http.post(`${corrosion}/history`, params);
 
 // 补传记录

src/components/config/config-log-function.vue

@@ -11,7 +11,7 @@
       <el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
       <el-table-column align="center" label="上次配置时间" min-width="200">
         <template #default="scope">
-          {{ dayjs(+scope.row.settingTime).format('YYYY-MM-DD HH:mm:ss') }}
+          {{ dayjs(new Date(+scope.row.settingTime)).format('YYYY-MM-DD HH:mm:ss') }}
         </template>
       </el-table-column>
       <el-table-column align="center" label="状态" min-width="100">

src/components/config/config-log-network.vue

@@ -12,7 +12,7 @@
 
       <el-table-column align="center" label="上次配置时间" min-width="200">
         <template #default="scope">
-          {{ dayjs(+scope.row.settingTime).format('YYYY-MM-DD HH:mm:ss') }}
+          {{ dayjs(new Date(+scope.row.settingTime)).format('YYYY-MM-DD HH:mm:ss') }}
         </template>
       </el-table-column>
       <el-table-column align="center" label="状态" min-width="100">

src/components/history/device.vue

@@ -1,5 +1,5 @@
 <template>
-  <SearchBar :loading-search="loadingSearch" :show-command="true" :show-export="true" @search="onSearch" />
+  <SearchBar :loading-search="loadingSearch" :show-command="true" :show-export="true" :show-pass-setting="true" @search="onSearch" />
 
   <template v-if="data">
     <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
@@ -21,7 +21,6 @@
       <el-table-column align="center" label="环境温度(℃)" min-width="110" prop="environmentTemperature" />
       <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
       <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
-      <!--      TODO:-->
       <el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="saltT" />
       <el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="saltR" />
       <el-table-column align="center" label="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
@@ -55,6 +54,16 @@
       @next-click="onNext"
     ></el-pagination>
   </template>
+
+  <el-badge v-if="missingData && missingData.length" :max="99" :value="missingData.length" class="pass-button animate-bounce">
+    <div circle class="shadow-xl btn" type="primary" @click="showMissing = true">
+      <i class="el-icon-upload"></i>
+    </div>
+  </el-badge>
+
+  <el-dialog v-model="showMissing" custom-class="device-dialog" title="待补传列表" top="30px" width="80%">
+    <MissingData :data="missingData" @on-success="onPassSuccess" />
+  </el-dialog>
 </template>
 
 <script setup>
@@ -64,6 +73,7 @@ import { getDatas } from 'apis';
 import { ElMessage } from 'element-plus';
 import dayjs from 'dayjs';
 import SearchBar from 'components/history/search-bar-data.vue';
+import MissingData from 'components/history/missing-data.vue';
 
 const search = ref({});
 const page = ref({
@@ -77,6 +87,8 @@ const currentDeviceId = computed(() => store.state.device.currentDeviceId); //
 const contentHeight = ref(600);
 const loadingSearch = ref(false);
 const data = ref(null);
+const showMissing = ref(false);
+const missingData = ref([]);
 
 // 获取设备完整信息列表
 const getData = async () => {
@@ -86,8 +98,7 @@ const getData = async () => {
         return ElMessage.error('请选择站点');
       }
 
-      const options = { ...search.value };
+      const { date, missingIntervalInMs } = search.value;
-      const date = options && options.date ? options.date : [];
       if (!date || date.length !== 2) {
         return ElMessage.error('请选择时间 ');
       }
@@ -95,6 +106,7 @@ const getData = async () => {
         deviceId: currentDeviceId.value,
         gatheredDateRange: date,
         paging: true,
+        missingIntervalInMs,
         page: page.value.page,
         size: page.value.size,
         sort: [
@@ -113,6 +125,13 @@ const getData = async () => {
       page.value = resData.page;
       timer && clearTimeout(timer);
       timer = null;
+
+      if (resData.missingData) {
+        missingData.value = [...resData.missingData];
+        missingData.value.forEach(item => {
+          item.uuid = `${item.deviceId}-${item.startTime}-${item.endTime}`;
+        });
+      }
     } else {
       timer = setTimeout(() => {
         getData();
@@ -175,4 +194,40 @@ const onPrev = e => {
 function formatTime(time) {
   return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
 }
+
+// 补传成功 标记当前记录
+function onPassSuccess(uuid) {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const item of missingData.value) {
+    if (item.uuid === uuid) {
+      item.disabled = true;
+    }
+  }
+}
 </script>
+
+<style scoped>
+.device-dialog :deep(.el-dialog__body) {
+  padding-top: 0 !important;
+}
+
+.pass-button {
+  z-index: 999;
+  position: fixed;
+  right: 30px;
+  bottom: 40px;
+}
+
+.pass-button .btn {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #409eff;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 26px;
+  cursor: pointer;
+}
+</style>

src/components/history/history-log-table.vue

@@ -4,12 +4,12 @@
       <el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
       <el-table-column align="center" label="开始时间" min-width="200">
         <template #default="scope">
-          {{ dayjs(+scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }}
+          {{ dayjs(new Date(+scope.row.startTime)).format('YYYY-MM-DD HH:mm:ss') }}
         </template>
       </el-table-column>
       <el-table-column align="center" label="截止时间" min-width="200">
         <template #default="scope">
-          {{ dayjs(+scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') }}
+          {{ dayjs(new Date(+scope.row.endTime)).format('YYYY-MM-DD HH:mm:ss') }}
         </template>
       </el-table-column>
       <el-table-column align="center" header-align="center" label="下发状态" min-width="150">

src/components/history/local.vue

@@ -48,12 +48,12 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue';
-import { useStore } from 'vuex';
-import SearchBar from 'components/history/search-bar-data.vue';
 import { getDatas } from 'apis';
-import { ElMessage } from 'element-plus';
+import SearchBar from 'components/history/search-bar-data.vue';
 import dayjs from 'dayjs';
+import { ElMessage } from 'element-plus';
+import { computed, onMounted, ref } from 'vue';
+import { useStore } from 'vuex';
 
 const search = ref({});
 const page = ref({
@@ -77,6 +77,7 @@ const getData = async () => {
 
       const options = { ...search.value };
       const date = options && options.date ? options.date : [];
+      console.log(date);
       if (!date || date.length !== 2) {
         return ElMessage.error('请选择时间 ');
       }
@@ -109,8 +110,6 @@ const getData = async () => {
   }
 };
 
-// getData();
-
 // 设置表格高度
 onMounted(() => {
   const winHeight = document.documentElement.clientHeight;

src/components/history/missing-data.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-table :data="data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%; margin-top: 0">
+    <el-table-column align="center" label="设备ID" min-width="100" prop="deviceId" />
+    <el-table-column align="center" label="起始时间" min-width="200">
+      <template #default="scope">
+        {{ dayjs(new Date(+scope.row.startTime)).format('YYYY-MM-DD HH:mm:ss') }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="截止时间" min-width="200">
+      <template #default="scope">
+        {{ dayjs(new Date(+scope.row.endTime)).format('YYYY-MM-DD HH:mm:ss') }}
+      </template>
+    </el-table-column>
+
+    <el-table-column align="center" header-align="center" label="操作" min-width="100">
+      <template #default="scope">
+        <el-button :disabled="scope.row.disabled" plain size="small" type="success" @click="handlePass(scope.row)">补传 </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref } from 'vue';
+import dayjs from 'dayjs';
+import { sendCommand } from 'apis';
+import { ElMessage } from 'element-plus';
+
+defineProps({ data: Object });
+const emit = defineEmits(['on-success']);
+
+const contentHeight = ref(600);
+
+/**
+ * 发送补传指令
+ * @param { Object } item
+ * @returns {Promise<void>}
+ */
+async function handlePass(item) {
+  try {
+    await sendCommand({ ...item });
+    ElMessage.success('发送成功');
+    emit('on-success', item.uuid);
+  } catch (error) {
+    ElMessage.error(error.message || '发送补传指令失败');
+  }
+}
+</script>

src/components/history/search-bar-data.vue

@@ -13,13 +13,29 @@
     </el-form-item>
 
     <el-form-item label="起始时间：">
-      <el-date-picker v-model="searchDevice.date[0]" format="YYYY-MM-DD HH:mm" placeholder="起始时间" type="datetime"></el-date-picker>
+      <el-date-picker
+        v-model="searchDevice.date[0]"
+        format="YYYY-MM-DD HH:mm"
+        placeholder="起始时间"
+        style="width: 180px"
+        type="datetime"
+      ></el-date-picker>
     </el-form-item>
 
     <el-form-item label="截止时间：">
-      <el-date-picker v-model="searchDevice.date[1]" format="YYYY-MM-DD HH:mm" placeholder="截止时间" type="datetime"></el-date-picker>
+      <el-date-picker
+        v-model="searchDevice.date[1]"
+        format="YYYY-MM-DD HH:mm"
+        placeholder="截止时间"
+        style="width: 180px"
+        type="datetime"
+      ></el-date-picker>
     </el-form-item>
-    <!--TODO:-->
+
+    <el-form-item v-if="showPassSetting" label="补传间隔(h)：">
+      <el-input-number v-model="searchDevice.missingIntervalInMs" :min="0" controls-position="right" style="width: 100px" />
+    </el-form-item>
+
     <el-form-item>
       <template v-if="showCommand">
         <el-button type="primary" @click="onSubmit">查询历史数据</el-button>
@@ -41,15 +57,16 @@
 </template>
 
 <script setup>
+import { exportHistory } from 'apis';
+import dayjs from 'dayjs';
 import { computed, defineEmits, defineProps, reactive, ref, watch } from 'vue';
 import { useStore } from 'vuex';
-import dayjs from 'dayjs';
-import { exportHistory } from 'apis';
 
 const emit = defineEmits(['search']);
 const searchDevice = reactive({
   deviceId: '',
   date: [dayjs().subtract(7, 'day').startOf('day'), new Date()],
+  missingIntervalInMs: 1,
 });
 const searchDeviceForm = ref(null); // form
 const store = useStore();
@@ -61,14 +78,16 @@ defineProps({
   showExport: Boolean,
   loadingSearch: Boolean,
   showCommand: Boolean,
+  showPassSetting: Boolean,
 });
 
 // 监听currentDeviceId
 watch(
-  () => currentDeviceId.value,
+  [searchDeviceForm, currentDeviceId],
-  newValue => {
+  ([newForm, newDeviceId]) => {
-    if (newValue) {
+    if (newDeviceId && newForm) {
-      searchDevice.deviceId !== newValue && (searchDevice.deviceId = newValue);
+      searchDevice.deviceId !== newDeviceId && (searchDevice.deviceId = newDeviceId);
+      onSubmit();
     }
   },
   { immediate: true },
@@ -80,33 +99,30 @@ const change = e => {
 
 // 生成查询参数
 function generateParams() {
-  const { deviceId, date } = searchDevice;
+  const { deviceId, date, missingIntervalInMs } = searchDevice;
-  let params = {
+  const params = {
     deviceId,
-    date,
+    missingIntervalInMs: missingIntervalInMs * 60 * 60 * 1000,
   };
 
   if (date) {
     const start = +dayjs(date[0]).format('x');
     const end = +dayjs(date[1]).format('x');
-    params = {
+    params.date = [start, end];
-      deviceId,
-      date: [start, end],
-    };
   }
 
   return params;
 }
 
 // 提交
-const onSubmit = () => {
+function onSubmit() {
   searchDeviceForm.value.validate(valid => {
     if (valid) {
       const params = generateParams();
       emit('search', params);
     }
   });
-};
+}
 
 // 导出
 async function onExport() {
@@ -115,7 +131,7 @@ async function onExport() {
     const params = generateParams();
     params.sort = [
       {
-        col: 'gathered_at',
+        col: 'time',
         order: 'DESC',
       },
     ];

src/components/overview/device-table.vue

@@ -2,15 +2,15 @@
   <template v-if="devicesAll && devicesAll.data">
     <el-table :data="devicesAll.data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%">
       <el-table-column align="center" label="站点名称" min-width="150" prop="address" />
-      <el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
+      <el-table-column align="center" label="设备ID" min-width="100" prop="deviceId" />
       <el-table-column align="center" label="注册时间" min-width="200">
         <template #default="scope">
-          {{ dayjs(+scope.row.signupTime).format('YYYY-MM-DD HH:mm:ss') }}
+          {{ dayjs(new Date(+scope.row.signupTime)).format('YYYY-MM-DD HH:mm:ss') }}
         </template>
       </el-table-column>
       <el-table-column align="center" label="最近上传时间" min-width="200">
         <template #default="scope">
-          {{ dayjs(+scope.row.lastUploadTime).format('YYYY-MM-DD HH:mm:ss') }}
+          {{ dayjs(new Date(+scope.row.lastUploadTime)).format('YYYY-MM-DD HH:mm:ss') }}
         </template>
       </el-table-column>
       <el-table-column align="center" header-align="center" label="设备状态" min-width="150">
@@ -42,16 +42,12 @@
       @current-change="onCurrentPageChange"
     ></el-pagination>
   </template>
-
-  <!-- 编辑设备信息 -->
-  <DeviceEdit :show="editing" @toggle-mdoal="editing = false" />
 </template>
 
 <script setup>
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import dayjs from 'dayjs';
-import DeviceEdit from 'components/device/device-edit.vue';
 import { STATUS_COLOR } from '@/config/config';
 import { ASDU_TYPE } from '@/config/log';
 
@@ -63,7 +59,6 @@ const devicesAll = computed(() => {
 });
 const currentDeviceId = computed(() => store.state.device.currentDeviceId);
 const contentHeight = ref(600);
-const editing = ref(false);
 
 // 获取设备完整信息列表
 const getDevicesAllData = () => {

src/components/statistical/stastistical-chart.vue

@@ -72,7 +72,7 @@ function render(data, selected) {
   noData.value = false;
 
   if (!myChart) {
-    initChart();
+    initChart(data);
   }
   const option = generateChartOption(data, selected);
   option && myChart.setOption(option);

src/utils/statistical.js

@@ -32,7 +32,7 @@ function generateParams(data) {
     corrosionGANG: [],
   };
   data.forEach(item => {
-    result.time.push(dayjs(+item.time).format('YY/MM/MM HH:mm'));
+    result.time.push(dayjs(new Date(+item.time)).format('YY/MM/DD HH:mm'));
     result.so2.push(+item.so2);
     result.saltR.push(+item.saltR);
     result.saltT.push(+item.saltT);

src/utils/time.js

@@ -7,7 +7,7 @@ import dayjs from 'dayjs';
  * @returns
  */
 export function formatMsTime(time, formatStyle = 'YYYY-MM-DD HH:mm:ss') {
-  return dayjs(+time).format(formatStyle);
+  return dayjs(new Date(+time)).format(formatStyle);
 }
 
 // 图表时间轴的时间格式化

src/views/commands.vue

@@ -5,7 +5,7 @@
       <el-table-column align="center" fixed label="设备ID" min-width="100" prop="deviceId" />
       <el-table-column align="center" label="时间" min-width="200">
         <template #default="scope">
-          {{ dayjs(+scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
+          {{ dayjs(new Date(+scope.row.createdAt)).format('YYYY-MM-DD HH:mm:ss') }}
         </template>
       </el-table-column>
       <el-table-column align="center" label="传输方向" min-width="80">
@@ -39,7 +39,9 @@
 
       <el-table-column align="center" label="类型标识" min-width="80">
         <template #default="scope">
-          <span v-if="scope.row.asduType && log.ASDU_TYPE[scope.row.asduType]">{{ log.ASDU_TYPE[scope.row.asduType].text }}</span>
+          <span v-if="scope.row.asduType && log.ASDU_TYPE[scope.row.asduType]">
+            {{ log.ASDU_TYPE[scope.row.asduType].text }}
+          </span>
         </template>
       </el-table-column>
       <el-table-column align="center" label="信息体顺序" min-width="100">
@@ -82,12 +84,12 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue';
+import { getLog } from 'apis';
+import SearchCommands from 'components/commands/search-commands.vue';
 import dayjs from 'dayjs';
-import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
-import SearchCommands from 'components/commands/search-commands.vue';
+import { computed, onMounted, ref } from 'vue';
-import { getLog } from 'apis';
+import { useStore } from 'vuex';
 import * as log from '@/config/log';
 
 const data = ref([]);
@@ -106,7 +108,7 @@ const currentDeviceId = computed(() => store.state.device.currentDeviceId);
 // 设置表格高度
 onMounted(() => {
   const winHeight = document.documentElement.clientHeight;
-  contentHeight.value = winHeight - 150;
+  contentHeight.value = winHeight - 250;
   onSearch();
 });
 

src/views/statistical-report.vue

@@ -9,6 +9,7 @@ import HistoryData from 'components/statistical/stastistical-chart.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
+import dayjs from 'dayjs';
 
 const searchBar = ref(null);
 let timer = null;
@@ -38,11 +39,17 @@ const getData = async () => {
       if (!currentDeviceId.value) return;
       loadingSearch.value = true;
       const options = { ...search.value };
-      const date = options && options.date ? options.date : [];
+      const date = options && options.date ? options.date : [+dayjs().subtract(7, 'day').startOf('day').format('x'), +dayjs().format('x')];
       const params = {
         deviceId: currentDeviceId.value,
-        date,
+        gatheredDateRange: date,
-        type: 0,
+        paging: false,
+        sort: [
+          {
+            col: 'time',
+            order: 'ASC',
+          },
+        ],
       };
       await store.dispatch('statistics/getRealtimeData', params);
       timer && clearTimeout(timer);

vite.config.js

@@ -5,13 +5,14 @@ import { defineConfig } from 'vite';
 import path from 'path';
 import vue from '@vitejs/plugin-vue';
 import viteCompression from 'vite-plugin-compression';
+import { VitePWA } from 'vite-plugin-pwa';
 
 const resolve = dir => path.join(__dirname, dir);
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: '/corrosion/',
-  plugins: [vue(), WindiCSS(), Components({ resolvers: [ElementPlusResolver()] }), viteCompression()],
+  plugins: [vue(), VitePWA(), WindiCSS(), Components({ resolvers: [ElementPlusResolver()] }), viteCompression()],
   resolve: {
     alias: {
       '~': __dirname,