feat: devices management;network config add device select

src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import Navbar from 'components/navbar.vue';
 import zhCn from 'element-plus/lib/locale/lang/zh-cn';
 import { ElMessage } from 'element-plus';
@@ -10,25 +10,24 @@ import { routes } from '@/routers/index.js';
 const local = zhCn;
 const store = useStore();
 let timer = null;
-
 const routeList = ref(routes);
-
 const menu = computed(() => store.state.menu);
 
 // 验证 获取query中u参数 获取token
-const validateQuery = async () => {
-  const route = useRoute();
-  const u = computed(() => route.query.u);
-  if (!u) {
-    // 获取url中的u参数, 没有提示缺少参数
-    ElMessage.error('缺少用户信息参数');
-  } else {
-    // 根据userId 获取token
-    await store.dispatch('user/getTokenByUserId', u);
-  }
-};
 
-validateQuery();
+const route = useRoute();
+useRouter()
+  .isReady()
+  .then(async () => {
+    const u = computed(() => route.query.u);
+    if (!u) {
+      // 获取url中的u参数, 没有提示缺少参数
+      ElMessage.error('缺少用户信息参数');
+    } else {
+      // 根据userId 获取token
+      await store.dispatch('user/getTokenByUserId', u.value);
+    }
+  });
 
 const token = computed(() => store.getters['user/token']);
 // 获取设备数据

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

@@ -0,0 +1,42 @@
+<script setup>
+import { computed, defineProps, defineEmits, ref, watch } 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 ? '设置生效' : '等待下发'));
+
+// 监听currentDeviceId
+watch(
+  () => currentDeviceId.value,
+  newValue => {
+    console.log('newValue: ', newValue);
+    if (newValue && deviceId.value !== newValue) {
+      deviceId.value = newValue;
+    }
+  },
+  { immediate: true },
+);
+</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-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option>
+    </el-select>
+
+    <span class="text-sm text-gray-500 ml-10">获取状态：</span>
+    <el-tag type="success">{{ get }}</el-tag>
+
+    <span class="text-sm text-gray-500 ml-10">设置状态：</span>
+    <el-tag type="success">{{ set }}</el-tag>
+  </div>
+</template>

src/components/refresh.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { defineEmits } from 'vue';
+
+defineEmits(['refresh']);
+</script>
+
+<template>
+  <el-tooltip class="refresh-btn shadow-md" effect="dark" content="刷新" placement="top-start">
+    <el-button type="primary" icon="el-icon-refresh" circle @click="$emit('refresh')"></el-button>
+  </el-tooltip>
+</template>
+
+<style scoped>
+.refresh-btn {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+}
+</style>

src/components/search-bar.vue

@@ -2,7 +2,7 @@
   <el-form :inline="true" :model="searchDevice" ref="searchDeviceForm">
     <el-form-item label="选择站点">
       <el-select v-model="searchDevice.device" placeholder="请选择站点">
-        <el-option label="全部" value=""></el-option>
+        <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>
@@ -26,8 +26,7 @@ const store = useStore();
 const devices = computed(() => store.state.device.devices);
 
 const onSubmit = () => {
-  searchDeviceForm.value.validate(valid => {
+  searchDeviceForm.value.validate(() => {
-    console.log(valid, { ...searchDevice });
     const { device } = searchDevice;
     emit('search', { deviceId: device });
   });

src/store/user.js

@@ -12,7 +12,7 @@ export default {
     },
     userId({ user }) {
       if (!user) return null;
-      return user.userId;
+      return user.id;
     },
   },
 
@@ -26,7 +26,7 @@ export default {
       state.user = user;
       if (user) {
         localStorage.setItem('token', user.token);
-        localStorage.setItem('user', user);
+        localStorage.setItem('user', JSON.stringify(user));
       } else {
         localStorage.removeItem('token');
         localStorage.removeItem('user');

src/views/device-list.vue

@@ -17,23 +17,41 @@
           </el-row>
         </template>
       </el-table-column>
-      <el-table-column label="ID" prop="deviceId" width="100" />
+      <el-table-column label="ID" prop="deviceId" min-min-width="100" align="center" />
-      <el-table-column label="完整ID" prop="deviceFullId" width="150" />
+      <el-table-column label="完整ID" prop="deviceFullId" min-width="150" align="center" />
-      <el-table-column label="地点" prop="address" width="150" />
+      <el-table-column label="地点" prop="address" min-width="150" align="left" header-align="center" />
-      <el-table-column label="地区" prop="area" width="120" />
+      <el-table-column label="地区" prop="area" min-width="120" align="left" header-align="center" />
-      <el-table-column label="联系人" prop="contact" width="100" />
+      <el-table-column label="联系人" prop="contact" min-width="100" align="center" />
-      <el-table-column label="联系电话" prop="phone" width="150" />
+      <el-table-column label="联系电话" prop="phone" min-width="150" align="center" />
-      <el-table-column label="安装时间" prop="installTime" width="200" />
+      <el-table-column label="安装时间" prop="installTime" min-width="200" align="center" />
-      <el-table-column label="正式运行时间" prop="runTime" width="200" />
+      <el-table-column label="正式运行时间" prop="runTime" min-width="200" align="center" />
-      <el-table-column fixed="right" label="操作" width="148">
+      <el-table-column fixed="right" label="操作" min-width="200" align="center">
         <template #default="props">
+          <el-tooltip class="item" effect="dark" content="网络参数配置" placement="top">
+            <i class="el-icon-setting text-base text-yellow-600 mx-1" @click="openPage(props.row, 'network-config')"></i>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="功能参数配置" placement="top">
+            <i class="el-icon-set-up text-base text-yellow-600 mx-1" @click="openPage(props.row, 'function-config')"></i>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="实时数据统计" placement="top">
+            <i class="el-icon-stopwatch text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-realtime')"></i>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="数据查看及导出" placement="top">
+            <i class="el-icon-tickets text-base text-green-600 mx-1" @click="openPage(props.row, 'data-history')"></i>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="数据统计" placement="top">
+            <i class="el-icon-data-line text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-history')"></i>
+          </el-tooltip>
           <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete">
             <template #reference>
-              <el-button type="danger" plain size="mini">删除</el-button>
+              <i class="el-icon-delete text-base text-red-600 mx-1"></i>
+              <!-- <el-button type="text" plain size="mini" icon="el-icon-delete"></el-button> -->
             </template>
           </el-popconfirm>
 
-          <el-button type="primary" plain size="mini" @click="handleEdit(props.row)">编辑</el-button>
+          <el-tooltip class="item" effect="dark" content="编辑设备信息" placement="top">
+            <i class="el-icon-edit text-base text-blue-600 mx-1" @click="handleEdit(props.row)"></i>
+          </el-tooltip>
         </template>
       </el-table-column>
     </el-table>
@@ -59,11 +77,13 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import SearchBar from 'components/search-bar.vue';
 import DeviceEdit from 'components/device-edit.vue';
 
 let timer = null;
 const store = useStore();
+const router = useRouter();
 const token = computed(() => store.getters['user/token']);
 const devicesAll = computed(() => store.state.device.devicesAll);
 let contentHeight = 600;
@@ -120,4 +140,9 @@ const handleEdit = item => {
   store.commit('device/setCurrentDeviceId', item.deviceId);
   editting.value = true;
 };
+
+const openPage = (item, path) => {
+  store.commit('device/setCurrentDeviceId', item.deviceId);
+  router.push({ name: path });
+};
 </script>

src/views/network-config.vue

@@ -1,4 +1,7 @@
 <template>
+  <!-- 设置站点选择 和 设备下发状态 -->
+  <DeviceSelectAndSelect @search="onSearch" :status="data.status" />
+
   <el-form label-position="top" :model="data" ref="networkForm">
     <el-row :gutter="20">
       <el-col :span="12">
@@ -79,12 +82,18 @@
       </el-form-item>
     </el-row>
   </el-form>
+
+  <!-- 刷新下发按钮 -->
+  <Refresh @refresh="onSearch(currentDeviceId, 1)" />
 </template>
 
 <script setup>
-import { ref } from 'vue';
+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 data = ref({
   ip1: '',
@@ -98,20 +107,25 @@ const data = ref({
   account: '',
   password: '',
   apn: '',
+  status: {
+    get: 0,
+    set: 0,
+  },
 });
 
 const networkForm = ref(null); // form
+const store = useStore();
+const currentDeviceId = computed(() => store.state.device.currentDeviceId);
 
 // 提交表单
 const onSubmit = () => {
-  networkForm.value.validate(async valid => {
+  networkForm.value.validate(async () => {
-    console.log(valid, { ...data.value });
+    const param = { ...data.value, deviceId: currentDeviceId.value };
-    const param = { ...data.value };
     try {
       await createConfigNetwork(param);
       ElMessage.success('提交成功');
     } catch (error) {
-      console.log('error: ', error);
+      console.error('error: ', error);
       ElMessage.error('提交失败, 请稍后重试');
     }
   });
@@ -122,8 +136,15 @@ const onReset = () => {
   networkForm.value.resetFields();
 };
 
-// 获取网络配置数据 填入表单中
+/**
-getConfigNetwork().then(res => {
+ * 查询网络参数配置
-  data.value = res;
+ * @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;
+};
 </script>