feat: network config applied

src/apis/index.js

@@ -22,26 +22,29 @@ export const updateDevice = (deviceId, data) => http.put(`${corrosion}/devices/a
 // 删除设备
 export const deleteDevice = deviceId => http.delete(`${corrosion}/devices/all/${deviceId}`);
 
-// 查历史数据
-export const getHistories = params => http.get(`${corrosion}/histories`, { params });
-
 // 获取月累计数据分析
 export const getMonthsDate = params => http.get(`${corrosion}/statistics/months`, { params });
 
-// 获取实时数据统计
-export const getRealtimeData = params => http.get(`${corrosion}/statistics/realtime`, { params });
-
 // 获取网络配置参数
 export const getConfigNetwork = params => http.get(`${corrosion}/config/network`, { params });
 
+// 获取网络配置参数 设备实时参数
+export const getConfigAppliedNetwork = params => http.get(`${corrosion}/config-applied/network`, { params });
+
 // 获取功能配置参数
 export const getConfigFunction = params => http.get(`${corrosion}/config/function`, { params });
 
+// 获取功能配置参数 设备实时参数
+export const getConfigAppliedFunction = params => http.get(`${corrosion}/config-applied/function`, { params });
+
 // 提交网络配置参数
 export const createConfigNetwork = data => http.post(`${corrosion}/config/network`, data);
 
 // 提交功能配置参数
 export const createConfigFunction = data => http.post(`${corrosion}/config/function`, data);
 
+// 查历史数据
+export const getHistories = params => http.post(`${corrosion}/histories`, params);
+
 // 导出历史数据
-export const exportHistory = params => http.get(`${corrosion}/export`, { params });
+export const exportHistory = params => http.post(`${corrosion}/export`, params);

src/components/device-select-and-status.vue

@@ -1,17 +1,13 @@
 <script setup>
-import { computed, ref, watch, defineProps, defineEmits } from 'vue';
+import { computed, ref, watch, defineProps } from 'vue';
 import { useStore } from 'vuex';
 
 const props = defineProps({ status: Object });
 
-defineEmits(['search']);
-
 const store = useStore();
 const devices = computed(() => store.state.device.devices); // 设备/站点列表
 const deviceId = ref(''); // 选中的设备id
 const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
-// const get = computed(() => (props.status.get ? '设置生效' : '等待下发'));
-// const set = computed(() => (props.status.set ? '设置生效' : '等待下发'));
 
 const statusType = computed(() => {
   let type = 'success';
@@ -42,12 +38,20 @@ watch(
   },
   { immediate: true },
 );
+
+/**
+ * 设备id修改
+ * 更新store里的deviceId
+ */
+function onChange(event) {
+  store.commit('device/setCurrentDeviceId', event);
+}
 </script>
 
 <template>
   <div class="mb-3">
     <span class="text-sm text-gray-500">选择站点：</span>
-    <el-select v-model="deviceId" placeholder="选择站点" @change="$emit('search', deviceId)">
+    <el-select v-model="deviceId" placeholder="选择站点" @change="onChange">
       <el-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option>
     </el-select>
 

src/components/network-config-applied.vue

@@ -0,0 +1,110 @@
+<template>
+  <el-row :gutter="10">
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>上报IP地址1：</span>
+      <span>{{ appliedData.ip1 }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>上报端口号1：</span>
+      <span>{{ appliedData.port1 }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>上报IP地址2：</span>
+      <span>{{ appliedData.ip2 }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>上报端口号2：</span>
+      <span>{{ appliedData.port2 }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>上报IP地址3：</span>
+      <span>{{ appliedData.ip3 }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>上报端口号3：</span>
+      <span>{{ appliedData.port3 }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>上报IP地址4：</span>
+      <span>{{ appliedData.ip4 }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>上报端口号4：</span>
+      <span>{{ appliedData.port4 }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>备用ip地址：</span>
+      <span>{{ appliedData.ipBackup }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>备用端口号：</span>
+      <span>{{ appliedData.portBackup }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>用户名：</span>
+      <span>{{ appliedData.account }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>密码：</span>
+      <span>{{ appliedData.password }}</span>
+    </el-col>
+    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
+      <span>APN：</span>
+      <span>{{ appliedData.apn }}</span>
+    </el-col>
+  </el-row>
+
+  <!-- 刷新下发按钮 -->
+  <!-- <Refresh @refresh="onSearch(currentDeviceI, 1)" /> -->
+</template>
+
+<script setup>
+import { computed, ref, watch, defineEmits, defineProps } from 'vue';
+import { useStore } from 'vuex';
+import { getConfigAppliedNetwork } from 'apis/index';
+
+const originData = {
+  ip1: '',
+  port1: '',
+  ip2: '',
+  port2: '',
+  ip3: '',
+  port3: '',
+  ipBackup: '',
+  portBackup: '',
+  account: '',
+  password: '',
+  apn: '',
+  status: 'PENDING',
+};
+const store = useStore();
+const currentDeviceId = computed(() => store.state.device.currentDeviceId);
+const appliedData = ref(originData); // 实际数据
+const emit = defineEmits(['status']);
+const props = defineProps({ activeName: String });
+
+/**
+ * 查询网络参数配置 设备真实参数
+ * @param {string} deviceId 设备id
+ */
+const onSearch = async deviceId => {
+  try {
+    const params = { deviceId };
+    const resData = await getConfigAppliedNetwork(params);
+    appliedData.value = resData || originData;
+    if (resData && resData.status) {
+      emit('status', resData.status);
+    }
+  } catch (error) {
+    throw new Error(error);
+  }
+};
+
+watch(
+  currentDeviceId,
+  newDeviceId => {
+    newDeviceId && props.activeName === 'applied' && onSearch(newDeviceId);
+  },
+  { immediate: true },
+);
+</script>

src/components/network-config-pending.vue

@@ -0,0 +1,152 @@
+<template>
+  <el-form label-position="top" :model="data" ref="networkForm">
+    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="上报IP1地址" prop="ip1">
+          <el-input v-model="data.ip1"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="上报端口号1" prop="port1">
+          <el-input v-model="data.port1"></el-input>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="上报IP2地址" prop="ip2">
+          <el-input v-model="data.ip2"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="上报端口号2" prop="port2">
+          <el-input v-model="data.port2"></el-input>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="上报IP3地址" prop="ip3">
+          <el-input v-model="data.ip3"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="上报端口号3" prop="port3">
+          <el-input v-model="data.port3"></el-input>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="备用ip地址" prop="ipBackup">
+          <el-input v-model="data.ipBackup"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="备用端口号" prop="portBackup">
+          <el-input v-model="data.portBackup"></el-input>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="用户名" prop="account">
+          <el-input v-model="data.account"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="data.password"></el-input>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+        <el-form-item label="APN" prop="apn">
+          <el-input v-model="data.apn"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" class="mt-5 pl-2">
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">提交</el-button>
+        <el-button @click="onReset">重置</el-button>
+      </el-form-item>
+    </el-row>
+  </el-form>
+
+  <!-- 刷新下发按钮 -->
+  <Refresh @refresh="onSearch(currentDeviceId, 1)" />
+</template>
+
+<script setup>
+import { computed, ref, watch, defineEmits, defineProps } from 'vue';
+import { useStore } from 'vuex';
+import { ElMessage } from 'element-plus';
+import { getConfigNetwork, createConfigNetwork } from 'apis/index';
+import Refresh from 'components/refresh.vue';
+
+const originData = {
+  ip1: '',
+  port1: '',
+  ip2: '',
+  port2: '',
+  ip3: '',
+  port3: '',
+  ipBackup: '',
+  portBackup: '',
+  account: '',
+  password: '',
+  apn: '',
+  status: 'PENDING',
+};
+const data = ref(originData);
+const networkForm = ref(null); // form
+const store = useStore();
+const currentDeviceId = computed(() => store.state.device.currentDeviceId);
+const emit = defineEmits(['status']);
+const props = defineProps({ activeName: String });
+
+/**
+ * 查询网络参数配置
+ * @param {string} deviceId 设备id
+ * @param {number} type 0数据库查询 1刷新查询
+ */
+async function onSearch(deviceId, type = 0) {
+  try {
+    const params = { deviceId, type };
+    const resData = await getConfigNetwork(params);
+    data.value = resData || originData;
+    if (resData && resData.status) {
+      emit('status', resData.status);
+    }
+  } catch (error) {
+    throw new Error(error);
+  }
+}
+
+watch(
+  currentDeviceId,
+  newDeviceId => {
+    newDeviceId && props.activeName === 'pending' && onSearch(newDeviceId);
+  },
+  { immediate: true },
+);
+
+// 提交表单
+const onSubmit = () => {
+  networkForm.value.validate(async () => {
+    const param = { ...data.value, deviceId: currentDeviceId.value };
+    try {
+      await createConfigNetwork(param);
+      ElMessage.success('提交成功');
+    } catch (error) {
+      console.error('error: ', error);
+      ElMessage.error('提交失败, 请稍后重试');
+    }
+  });
+};
+
+// 重置表单
+const onReset = () => {
+  networkForm.value.resetFields();
+};
+
+// currentDeviceId && onSearch(currentDeviceId.value);
+</script>

src/components/refresh.vue

@@ -12,7 +12,7 @@ defineEmits(['refresh']);
 
 <style scoped>
 .refresh-btn {
-  position: absolute;
+  position: fixed;
   right: 20px;
   bottom: 20px;
 }

src/components/search-bar-data.vue

@@ -63,8 +63,8 @@ function generateParams() {
   let params = { deviceId, date };
 
   if (date) {
-    const start = dayjs(date[0]).format('x');
-    const end = dayjs(date[1]).format('x');
+    const start = +dayjs(date[0]).format('x');
+    const end = +dayjs(date[1]).format('x');
     const daterange = [start, end];
     params = { deviceId, date: daterange };
   }
@@ -80,7 +80,7 @@ const onSubmit = () => {
   });
 };
 
-// 导出
+// 导出TODO:
 async function onExport() {
   try {
     const params = generateParams();

src/store/statistics.js

@@ -1,4 +1,4 @@
-import { getMonthsDate, getRealtimeData } from 'apis/index';
+import { getHistories, getMonthsDate } from 'apis/index';
 
 export default {
   namespaced: true,
@@ -67,7 +67,7 @@ export default {
     // 获取实时数据统计数据
     async getRealtimeData({ commit }, params) {
       try {
-        const data = await getRealtimeData(params);
+        const data = await getHistories(params);
         commit('setRealtimeData', data || null);
         return data;
       } catch (error) {

src/utils/axios.js

@@ -43,7 +43,7 @@ instance.interceptors.response.use(
       ElMessage.error(`Code: ${code}, Message: ${msg}`);
       console.error(`[Axios Error]`, error.response);
     } else {
-      ElMessage.error(`${error}`);
+      // ElMessage.error(`${error}`);
     }
     return Promise.reject(error);
   },

src/views/data-history.vue

@@ -20,8 +20,11 @@ const getData = async () => {
       const options = { ...search.value };
       const date = options && options.date ? options.date : [];
       const params = {
-        search: { deviceId: currentDeviceId.value, date },
-        page: { page: page.value.page, size: page.value.size },
+        deviceId: currentDeviceId.value,
+        date,
+        page: page.value.page,
+        size: page.value.size,
+        type: 1,
       };
       const resData = await getHistories(params);
       data.value = resData.data;
@@ -45,20 +48,18 @@ onMounted(() => {
   const winHeight = document.documentElement.clientHeight;
   contentHeight = winHeight - 150;
 });
-
 /**
- * 监听search信息
- * @param {object} payload search组件emit的数据
+ * 监听sear h信息
+ * @param {object} payload search组件emi 的数据
  */
 const onSearch = payload => {
   search.value = { ...payload };
   getData();
 };
-
 /**
- * 当前页码变化
- * 更新page 重新获取数据
- * @param {number} e 当前的页码
+ * 当前 码变化
+ * 更新page 重新 取数据
+ * @param {number} e 当 的页码
  */
 const onCurrentPageChange = e => {
   page.value.page = e;

src/views/function-config.vue

@@ -186,7 +186,7 @@ const originData = {
     timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点
     cycle: 0, // 上报周期分钟数
   },
-  status: { get: 0, set: 0 },
+  status: 'PENDING',
 };
 const data = ref(originData);
 

src/views/network-config.vue

@@ -1,141 +1,28 @@
 <template>
   <!-- 设置站点选择 和 设备下发状态 -->
-  <DeviceSelectAndSelect @search="onSearch" :status="data.status" />
-
-  <el-form label-position="top" :model="data" ref="networkForm">
-    <el-row :gutter="20">
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="上报IP1地址" prop="ip1">
-          <el-input v-model="data.ip1"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="上报端口号1" prop="port1">
-          <el-input v-model="data.port1"></el-input>
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="上报IP2地址" prop="ip2">
-          <el-input v-model="data.ip2"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="上报端口号2" prop="port2">
-          <el-input v-model="data.port2"></el-input>
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="上报IP3地址" prop="ip3">
-          <el-input v-model="data.ip3"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="上报端口号3" prop="port3">
-          <el-input v-model="data.port3"></el-input>
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="备用ip地址" prop="ipBackup">
-          <el-input v-model="data.ipBackup"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="备用端口号" prop="portBackup">
-          <el-input v-model="data.portBackup"></el-input>
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="用户名" prop="account">
-          <el-input v-model="data.account"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="data.password"></el-input>
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-        <el-form-item label="APN" prop="apn">
-          <el-input v-model="data.apn"></el-input>
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="20" class="mt-5 pl-2">
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">提交</el-button>
-        <el-button @click="onReset">重置</el-button>
-      </el-form-item>
-    </el-row>
-  </el-form>
-
-  <!-- 刷新下发按钮 -->
-  <Refresh @refresh="onSearch(currentDeviceId, 1)" />
+  <DeviceSelectAndStatus @search="onSearch" :status="status" />
+
+  <el-tabs v-model="activeName">
+    <el-tab-pane label="下发参数" name="pending" :lazy="true">
+      <NetworkConfigPending @status="setStatus" v-if="activeName === 'pending'" :active-name="activeName" />
+    </el-tab-pane>
+    <el-tab-pane label="设备参数" name="applied" :lazy="true">
+      <NetworkConfigApplied @status="setStatus" v-if="activeName === 'applied'" :active-name="activeName" />
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
-import { useStore } from 'vuex';
-import { ElMessage } from 'element-plus';
-import { getConfigNetwork, createConfigNetwork } from 'apis/index';
-import DeviceSelectAndSelect from 'components/device-select-and-status.vue';
-import Refresh from 'components/refresh.vue';
-
-const originData = {
-  ip1: '',
-  port1: '',
-  ip2: '',
-  port2: '',
-  ip3: '',
-  port3: '',
-  ipBackup: '',
-  portBackup: '',
-  account: '',
-  password: '',
-  apn: '',
-  status: 'PENDING',
-};
-const data = ref(originData);
+import { ref } from 'vue';
+import DeviceSelectAndStatus from 'components/device-select-and-status.vue';
+import NetworkConfigPending from 'components/network-config-pending.vue';
+import NetworkConfigApplied from 'components/network-config-applied.vue';
 
-const networkForm = ref(null); // form
-const store = useStore();
-const currentDeviceId = computed(() => store.state.device.currentDeviceId);
+const activeName = ref('pending');
+const status = ref('PENDING');
 
-// 提交表单
-const onSubmit = () => {
-  networkForm.value.validate(async () => {
-    const param = { ...data.value, deviceId: currentDeviceId.value };
-    try {
-      await createConfigNetwork(param);
-      ElMessage.success('提交成功');
-    } catch (error) {
-      console.error('error: ', error);
-      ElMessage.error('提交失败, 请稍后重试');
+// 设置 设置状态
+function setStatus(event) {
+  status.value = event;
 }
-  });
-};
-
-// 重置表单
-const onReset = () => {
-  networkForm.value.resetFields();
-};
-
-/**
- * 查询网络参数配置
- * @param {string} deviceId 设备id
- * @param {number} type 0数据库查询 1刷新查询
- */
-const onSearch = async (deviceId, type = 0) => {
-  const params = { deviceId, type };
-  store.commit('device/setCurrentDeviceId', deviceId);
-  const resData = await getConfigNetwork(params);
-  data.value = resData || originData;
-};
-
-currentDeviceId && onSearch(currentDeviceId.value);
 </script>

src/views/statistical-history.vue

@@ -11,7 +11,6 @@ import { useStore } from 'vuex';
 
 const childRef = ref(null);
 
-const page = ref({ page: 2, size: 10 });
 let timer = null;
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
@@ -34,8 +33,9 @@ const getDate = async () => {
       const options = { ...search.value };
       const date = options && options.date ? options.date : [];
       const params = {
-        search: { deviceId: currentDeviceId.value, date },
-        page: { page: page.value.page, size: page.value.size },
+        deviceId: currentDeviceId.value,
+        date,
+        type: 0,
       };
       await store.dispatch('statistics/getRealtimeData', params);
       timer && clearTimeout(timer);
@@ -59,7 +59,6 @@ getDate();
  */
 const onSearch = payload => {
   search.value = { ...payload };
-  console.log('search: ', search.value);
   getDate();
 };
 </script>

src/views/statistical-realtime.vue

@@ -11,8 +11,6 @@ import { useStore } from 'vuex';
 import dayjs from 'dayjs';
 
 const childRef = ref(null);
-
-const page = ref({ page: 2, size: 10 });
 let timer = null;
 let apiTimer = null;
 const store = useStore();
@@ -32,21 +30,26 @@ const currentDeviceId = computed(() => store.state.device.currentDeviceId); //
 const getDate = async () => {
   try {
     if (token) {
-      const startTime = new Date(new Date(new Date().toLocaleDateString()).getTime());
-      const start = dayjs(startTime).valueOf();
-      const end = dayjs(new Date()).valueOf();
+      const start = +dayjs().startOf('day').format('x');
+      const end = +dayjs().format('x');
       const params = {
-        search: { deviceId: currentDeviceId.value, date: [start, end] },
-        page: { page: page.value.page, size: page.value.size },
+        deviceId: currentDeviceId.value,
+        date: [start, end],
+        type: 0,
       };
       await store.dispatch('statistics/getRealtimeData', params);
       timer && clearTimeout(timer);
       timer = null;
       childRef.value.changeDate(realtimeData.value);
+
+      // 定时轮询请求新数据
+      apiTimer = setInterval(() => {
+        getDate();
+      }, 5000);
     } else {
       timer = setTimeout(() => {
         getDate();
-      });
+      }, 20);
     }
   } catch (error) {
     console.log('error: ', error);
@@ -54,9 +57,6 @@ const getDate = async () => {
 };
 
 getDate();
-apiTimer = setInterval(() => {
-  getDate();
-}, 5000);
 
 onUnmounted(() => {
   apiTimer && clearInterval(apiTimer);