Merge branches 'master' and 'master' of dd.tall.wiki:ccsens_fe/corrosion

src/App.vue

@@ -10,29 +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 = () => {
-  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);
-      }
-    });
-};
 
-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/apis/index.js

@@ -23,10 +23,10 @@ export const getMonthsDate = params => http.get(`${corrosion}/statistics/months`
 export const getRealtimeData = params => http.get(`${corrosion}/statistics/realtime`, { params });
 
 // 获取网络配置参数
-export const getConfigNetwork = () => http.get(`${corrosion}/config/network`);
+export const getConfigNetwork = params => http.get(`${corrosion}/config/network`, { params });
 
 // 获取功能配置参数
-export const getConfigFunction = () => http.get(`${corrosion}/config/function`);
+export const getConfigFunction = params => http.get(`${corrosion}/config/function`, { params });
 
 // 提交网络配置参数
 export const createConfigNetwork = data => http.post(`${corrosion}/config/network`, data);

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

@@ -0,0 +1,41 @@
+<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 => {
+    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 => {
-    console.log(valid, { ...searchDevice });
+  searchDeviceForm.value.validate(() => {
     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="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">
+      <el-table-column label="ID" prop="deviceId" min-min-width="100" align="center" />
+      <el-table-column label="完整ID" prop="deviceFullId" min-width="150" align="center" />
+      <el-table-column label="地点" prop="address" min-width="150" align="left" header-align="center" />
+      <el-table-column label="地区" prop="area" min-width="120" align="left" header-align="center" />
+      <el-table-column label="联系人" prop="contact" min-width="100" align="center" />
+      <el-table-column label="联系电话" prop="phone" min-width="150" align="center" />
+      <el-table-column label="安装时间" prop="installTime" min-width="200" align="center" />
+      <el-table-column label="正式运行时间" prop="runTime" min-width="200" align="center" />
+      <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/function-config.vue

@@ -1,4 +1,7 @@
 <template>
+  <!-- 设置站点选择 和 设备下发状态 -->
+  <DeviceSelectAndSelect @search="onSearch" :status="data.status" />
+
   <el-form label-position="top" :model="data" ref="functionForm">
     <el-row :gutter="20">
       <el-col :span="12">
@@ -81,22 +84,45 @@
 
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="设置安全模式" prop="securityMode">
-          <!-- <el-input v-model="data.securityMode"></el-input> -->
-          <el-radio v-model="data.securityMode" :label="0">不加密</el-radio>
-          <el-radio v-model="data.securityMode" :label="1">加密</el-radio>
+        <el-form-item label="选择金属通道1类型" prop="securityMode">
+          <el-select v-model="data.corrosiveType1" placeholder="选择金属腐蚀类型">
+            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="选择金属通道2类型" prop="corrosiveType">
+          <el-select v-model="data.corrosiveType2" placeholder="选择金属腐蚀类型">
+            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="选择金属通道3类型" prop="securityMode">
+          <el-select v-model="data.corrosiveType3" placeholder="选择金属腐蚀类型">
+            <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
+          </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="设置金属腐蚀类型" prop="corrosiveType">
-          <!-- <el-input v-model="data.corrosiveType"></el-input> -->
-          <el-select v-model="data.corrosiveType" placeholder="选择金属腐蚀类型">
+        <el-form-item label="选择金属通道4类型" prop="corrosiveType">
+          <el-select v-model="data.corrosiveType4" placeholder="选择金属腐蚀类型">
             <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
           </el-select>
         </el-form-item>
       </el-col>
     </el-row>
 
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item label="设置安全模式" prop="securityMode">
+          <!-- <el-input v-model="data.securityMode"></el-input> -->
+          <el-radio v-model="data.securityMode" :label="0">不加密</el-radio>
+          <el-radio v-model="data.securityMode" :label="1">加密</el-radio>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item label="设置上报时间" prop="report.type" style="margin-bottom: 0 !important">
@@ -131,13 +157,19 @@
       </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 { cloneDeep, isDate } from 'lodash';
 import { getConfigFunction, createConfigFunction } from 'apis/index';
+import DeviceSelectAndSelect from 'components/device-select-and-status.vue';
+import Refresh from 'components/refresh.vue';
 
 const data = ref({
   frequency: {
@@ -155,23 +187,29 @@ const data = ref({
   temperatureLow: 0, // 温度低阈值
   temperatureHigh: 0, // 温度高阈值
   securityMode: 0, // 安全模式 0->不加密 1->加密
-  corrosiveType: '', // 金属腐蚀类型
+  corrosiveType1: '', // 金属腐蚀类型
+  corrosiveType2: '', // 金属腐蚀类型
+  corrosiveType3: '', // 金属腐蚀类型
+  corrosiveType4: '', // 金属腐蚀类型
   report: {
     type: 0, // 上报周期类型 0->时间点  1->周期
     timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点
     cycle: 0, // 上报周期分钟数
   },
+  status: { get: 0, set: 0 },
 });
 
 // 金属腐蚀的类型
 const types = ref([
-  { value: 0, type: '金属腐蚀通道 1 类型' },
-  { value: 1, type: '金属腐蚀通道 2 类型' },
-  { value: 2, type: '金属腐蚀通道 3 类型' },
-  { value: 3, type: '金属腐蚀通道 4 类型' },
+  { value: 0, type: '锌' },
+  { value: 1, type: '铝' },
+  { value: 2, type: '铜' },
+  { value: 3, type: '钢' },
 ]);
 
 const functionForm = ref(null); // form
+const store = useStore();
+const currentDeviceId = computed(() => store.state.device.currentDeviceId);
 
 /**
  * 格式化时间
@@ -186,7 +224,7 @@ const formatTime = date => {
 const onSubmit = () => {
   functionForm.value.validate(async () => {
     try {
-      const param = cloneDeep({ ...data.value });
+      const param = cloneDeep({ ...data.value, deviceId: currentDeviceId.value });
       if (param.report.type === 0) {
         // 按时间点上报 格式化时间格式
         const points = [...param.report.timePoints];
@@ -211,8 +249,15 @@ const onReset = () => {
   functionForm.value.resetFields();
 };
 
-// 获取功能参数
-getConfigFunction().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 getConfigFunction(params);
+  data.value = resData;
+};
 </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 => {
-    console.log(valid, { ...data.value });
-    const param = { ...data.value };
+  networkForm.value.validate(async () => {
+    const param = { ...data.value, deviceId: currentDeviceId.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>