feat: 更新参数状态为字符串；更新devices；export未完

src/apis/index.js

@@ -42,3 +42,6 @@ export const createConfigNetwork = data => http.post(`${corrosion}/config/networ
 
 // 提交功能配置参数
 export const createConfigFunction = data => http.post(`${corrosion}/config/function`, data);
+
+// 导出历史数据
+export const exportHistory = params => http.get(`${corrosion}/export`, { params });

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

@@ -11,7 +11,26 @@ 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 set = computed(() => (props.status.set ? '设置生效' : '等待下发'));
+
+const statusType = computed(() => {
+  let type = 'success';
+  switch (props.status) {
+    case 'PENDING':
+      type = 'primary';
+      break;
+    case 'FAIL':
+      type = 'danger';
+      break;
+    case 'SUCCESS':
+      type = 'success';
+      break;
+    default:
+      type = 'primary';
+      break;
+  }
+  return type;
+});
 
 // 监听currentDeviceId
 watch(
@@ -36,6 +55,6 @@ watch(
     <el-tag type="success">{{ get }}</el-tag>-->
 
     <span class="text-sm text-gray-500 ml-10">设置状态：</span>
-    <el-tag type="success">{{ set }}</el-tag>
+    <el-tag :type="statusType">{{ props.status || 'PENDING' }}</el-tag>
   </div>
 </template>

src/components/search-bar-data.vue

@@ -20,13 +20,18 @@
     <el-form-item>
       <el-button type="primary" @click="onSubmit">查询</el-button>
     </el-form-item>
+
+    <el-form-item v-if="showExport">
+      <el-button type="primary" @click="onExport">导出</el-button>
+    </el-form-item>
   </el-form>
 </template>
 
 <script setup>
-import { reactive, ref, computed, defineEmits, watch } from 'vue';
+import { reactive, ref, computed, defineProps, defineEmits, watch } from 'vue';
 import { useStore } from 'vuex';
 import dayjs from 'dayjs';
+import { exportHistory } from 'apis/index';
 
 const emit = defineEmits(['search']);
 const searchDevice = reactive({ deviceId: '', date: '' });
@@ -35,6 +40,8 @@ const store = useStore();
 const devices = computed(() => store.state.device.devices);
 const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
 
+defineProps({ showExport: Boolean });
+
 // 监听currentDeviceId
 watch(
   () => currentDeviceId.value,
@@ -50,18 +57,39 @@ const change = e => {
   store.commit('device/setCurrentDeviceId', e);
 };
 
-// 提交
-const onSubmit = () => {
-  searchDeviceForm.value.validate(() => {
+// 生成查询参数
+function generateParams() {
   const { deviceId, date } = searchDevice;
+  let params = { deviceId, date };
+
   if (date) {
     const start = dayjs(date[0]).format('x');
     const end = dayjs(date[1]).format('x');
     const daterange = [start, end];
-      emit('search', { deviceId, date: daterange });
-    } else {
-      emit('search', { deviceId, date });
+    params = { deviceId, date: daterange };
+  }
+
+  return params;
 }
+
+// 提交
+const onSubmit = () => {
+  searchDeviceForm.value.validate(() => {
+    const params = generateParams();
+    emit('search', params);
   });
 };
+
+// 导出
+async function onExport() {
+  try {
+    const params = generateParams();
+    console.log('params: ', params);
+    const resData = await exportHistory(params);
+    console.log('resData: ', resData);
+    // TODO:
+  } catch (error) {
+    throw new Error(error);
+  }
+}
 </script>

src/store/device.js

@@ -1,5 +1,7 @@
 import { getDevices, getDevicesAll } from 'apis/index';
 
+import dayjs from 'dayjs';
+
 const user = {
   namespaced: true,
 
@@ -36,6 +38,17 @@ const user = {
      * @param {object} devices {page, data}
      */
     setDevicesAll(state, devices) {
+      if (devices && devices.data) {
+        for (let i = 0; i < devices.data.length; i++) {
+          const device = devices.data[i];
+          if (device.installTime) {
+            devices.data[i].installTime = dayjs(new Date(+device.installTime)).format('YYYY-MM-DD HH:mm:ss');
+          }
+          if (device.runTime) {
+            devices.data[i].runTime = dayjs(new Date(+device.runTime)).format('YYYY-MM-DD HH:mm:ss');
+          }
+        }
+      }
       state.devicesAll = devices;
     },
 
@@ -57,6 +70,8 @@ const user = {
       for (let i = 0; i < devicesAll.data.length; i++) {
         const item = devicesAll.data[i];
         if (item && item.deviceId === newData.deviceId) {
+          newData.installTime = dayjs(new Date(+item.installTime)).format('YYYY-MM-DD HH:mm:ss');
+          newData.runTime = dayjs(new Date(+item.runTime)).format('YYYY-MM-DD HH:mm:ss');
           devicesAll.data[i] = newData;
           break;
         }

src/views/data-history.vue

@@ -84,7 +84,7 @@ const onPrev = e => {
 </script>
 
 <template>
-  <SearchBar @search="onSearch" />
+  <SearchBar @search="onSearch" :show-export="true" />
 
   <template v-if="data">
     <el-table :data="data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }">

src/views/device-create.vue

@@ -122,6 +122,7 @@
 import { reactive, ref } from 'vue';
 import { ElMessageBox } from 'element-plus';
 import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 import { createDevice } from '../apis/index';
 
 const data = reactive({
@@ -147,6 +148,7 @@ const data = reactive({
 });
 const deviceCreate = ref(null); // form
 const router = useRouter();
+const store = useStore();
 
 // 重置表单
 const onReset = () => {
@@ -177,6 +179,7 @@ const onSubmit = () => {
           // 取消/关闭 跳转到设备管理列表
           router.push({ name: 'devices' });
         });
+      store.dispatch('device/getDevices'); // 更新站点列表
     } catch (error) {
       throw new Error(error);
     }

src/views/device-edit.vue

@@ -175,6 +175,7 @@ const onSubmit = () => {
       ElMessage.success('更新成功');
       emit('cancel');
       store.commit('device/updateDevice', data);
+      store.dispatch('device/getDevices'); // 更新站点列表
     } catch (error) {
       ElMessage.error('更新失败, 请稍后重试');
       throw new Error(error);

src/views/device-list.vue

@@ -85,7 +85,6 @@ import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import SearchBar from 'components/search-bar.vue';
 import DeviceEdit from 'components/device-edit.vue';
-import deepClone from 'lodash/cloneDeep';
 import { deleteDevice } from 'apis/index';
 import { ElMessage } from 'element-plus';
 
@@ -94,14 +93,7 @@ const store = useStore();
 const router = useRouter();
 const token = computed(() => store.getters['user/token']);
 const devicesAll = computed(() => {
-  const devices = deepClone(store.state.device.devicesAll);
-  if (devices && devices.data && devices.data.length) {
-    for (let i = 0; i < devices.data.length; i++) {
-      devices.data[i].installTime = new Date(+devices.data[i].installTime).toLocaleString();
-      devices.data[i].runTime = new Date(+devices.data[i].runTime).toLocaleString();
-    }
-  }
-  return devices;
+  return store.state.device.devicesAll;
 });
 const currentDeviceId = computed(() => store.state.device.currentDeviceId);
 let contentHeight = 600;
@@ -166,6 +158,7 @@ const handleDelete = async deviceId => {
     await deleteDevice(deviceId);
     store.commit('device/deleteDevice', deviceId);
     ElMessage.success('删除成功');
+    store.dispatch('device/getDevices'); // 更新站点列表
   } catch (error) {
     ElMessage.error('删除失败, 请稍后重试');
     throw new Error(error);

src/views/function-config.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 设置站点选择 和 设备下发状态 -->
-  <DeviceSelectAndSelect @search="onSearch" :status="data.status" />
+  <DeviceSelectAndStatus @search="onSearch" :status="data.status" />
 
   <el-form label-position="top" :model="data" ref="functionForm">
     <el-row :gutter="20">
@@ -158,10 +158,10 @@ import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
 import { cloneDeep, isDate } from 'lodash';
 import { getConfigFunction, createConfigFunction } from 'apis/index';
-import DeviceSelectAndSelect from 'components/device-select-and-status.vue';
+import DeviceSelectAndStatus from 'components/device-select-and-status.vue';
 import Refresh from 'components/refresh.vue';
 
-const data = ref({
+const originData = {
   frequency: {
     so2: 0, // SO2采样频率
     metal: 0, // 金属腐蚀采样频率
@@ -187,7 +187,8 @@ const data = ref({
     cycle: 0, // 上报周期分钟数
   },
   status: { get: 0, set: 0 },
-});
+};
+const data = ref(originData);
 
 // 金属腐蚀的类型
 const types = ref([
@@ -249,6 +250,11 @@ const onSearch = async (deviceId, type = 0) => {
   const params = { deviceId, type };
   store.commit('device/setCurrentDeviceId', deviceId);
   const resData = await getConfigFunction(params);
-  data.value = resData;
+  if (resData && resData.time) {
+    resData.time = new Date(+resData.time);
+  }
+  data.value = resData || originData;
 };
+
+currentDeviceId && onSearch(currentDeviceId.value);
 </script>

src/views/network-config.vue

@@ -86,7 +86,7 @@ import { getConfigNetwork, createConfigNetwork } from 'apis/index';
 import DeviceSelectAndSelect from 'components/device-select-and-status.vue';
 import Refresh from 'components/refresh.vue';
 
-const data = ref({
+const originData = {
   ip1: '',
   port1: '',
   ip2: '',
@@ -98,11 +98,9 @@ const data = ref({
   account: '',
   password: '',
   apn: '',
-  status: {
-    get: 0,
-    set: 0,
-  },
-});
+  status: 'PENDING',
+};
+const data = ref(originData);
 
 const networkForm = ref(null); // form
 const store = useStore();
@@ -136,6 +134,8 @@ const onSearch = async (deviceId, type = 0) => {
   const params = { deviceId, type };
   store.commit('device/setCurrentDeviceId', deviceId);
   const resData = await getConfigNetwork(params);
-  data.value = resData;
+  data.value = resData || originData;
 };
+
+currentDeviceId && onSearch(currentDeviceId.value);
 </script>