丁烨烨 1 рік тому
батько
коміт
809a299923

+ 30 - 0
src/api/intelligenceGas/index.js

@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+// 查询防爆气体变送器信息列表
+export function getfbqtGasDataAll(arr) {
+  const json = JSON.stringify(arr.query);
+  return request({
+    url: '/gasTransmitter/findByPage',
+    method: 'get',
+    params: {
+      conditionJson:encodeURIComponent(json),
+      pageNum:arr.pageNum,
+      pageSize:arr.pageSize
+    }
+  })
+}
+
+// 查询溶解氧变送器信息列表
+export function getrjyGasDataAll(arr) {
+  const json = JSON.stringify(arr.query);
+  return request({
+    url: '/dissolvedTransmitter/findByPage',
+    method: 'get',
+    params: {
+      conditionJson:encodeURIComponent(json),
+      pageNum:arr.pageNum,
+      pageSize:arr.pageSize
+    }
+  })
+}
+

+ 126 - 0
src/views/device/intelligenceGas/fbqtbsq/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="p-5">
+    <div class="w-30% flex items-center gap-4 mb-4">
+      <span class="whitespace-nowrap">选择时间:</span>
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        class="flex-grow w-full"
+        clearable
+      />
+      <el-button type="primary" @click="search">搜索</el-button>
+    </div>
+
+    <el-table :data="tableData" v-loading="tableLoading" border stripe>
+      <el-table-column prop="addressCode" label="设备编号" width="200" />
+      <el-table-column prop="factorValue" label="因子值" />
+      <!-- <el-table-column prop="alarmStatus" label="报警状态" /> -->
+      <el-table-column label="报警状态" align="center">
+        <template #default="scope">
+          <el-tag
+            :type="scope.row.alarmStatus === 0 ? 'success' : 'danger'"
+            effect="dark"
+          >
+            <div class="flex items-center">
+              <AlertTriangle v-if="scope.row.alarmStatus === 1" class="w-4 h-4 mr-1" />
+              {{ scope.row.alarmStatus === 0 ? "正常" : "告警" }}
+            </div>
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="functionCode" label="功能编号" />
+      <el-table-column prop="validByteCount" label="有效字节计数" />
+      <el-table-column prop="createTime" label="创建时间" width="400" />
+    </el-table>
+
+    <pagination
+      v-show="totals > 0"
+      :total="totals"
+      v-model:page="currentPage"
+      v-model:limit="pageSize"
+      @pagination="getManholeAllData"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { getfbqtGasDataAll } from "@/api/intelligenceGas/index";
+import { parseTime, parseTimeEnd } from "@/utils/ruoyi.js";
+
+const tableData = ref([]);
+const totals = ref(0);
+const dateRange = ref([]);
+const tableLoading = ref(false);
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 构建查询参数
+const buildQueryParams = () => {
+  return {
+    pageNum: currentPage.value,
+    pageSize: pageSize.value,
+    query: [
+      ...(dateRange.value?.length === 2
+        ? [
+            {
+              column: "create_time",
+              type: "between",
+              value: `${parseTime(dateRange.value[0])},${parseTimeEnd(
+                dateRange.value[1]
+              )}`,
+            },
+          ]
+        : []),
+    ],
+  };
+};
+
+// 获取数据
+const getManholeAllData = async () => {
+  try {
+    tableLoading.value = true;
+    const res = await getfbqtGasDataAll(buildQueryParams());
+
+    if (res.code !== 200) {
+      ElMessage.error(res.msg);
+      return;
+    }
+    totals.value = res.data.total;
+    tableData.value = res.data.records || [];
+    console.log(
+      "初始数据值",
+      res,
+      parseTime(dateRange.value[0]),
+      parseTimeEnd(dateRange.value[1])
+    );
+  } catch (error) {
+    console.error("获取数据失败:", error);
+    ElMessage.error("数据加载失败,请稍后重试");
+  } finally {
+    tableLoading.value = false;
+  }
+};
+
+// 搜索时重置页码
+const search = () => {
+  currentPage.value = 1;
+  getManholeAllData();
+};
+
+// 初始化加载
+onMounted(() => {
+  getManholeAllData();
+});
+</script>
+
+<style scoped>
+.flex-grow {
+  flex-grow: 1;
+  max-width: 400px;
+}
+</style>

+ 5 - 0
src/views/device/intelligenceGas/home/index.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <div class="flex h-90.8vh bg-gray-100">1</div>
+</template>

+ 83 - 0
src/views/device/intelligenceGas/index.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { ref } from "vue";
+import { Location, Menu as IconMenu } from "@element-plus/icons-vue";
+import HomeIndex from "./home/index.vue";
+import fbqtbsq from "./fbqtbsq/index.vue";
+import rjybsq from "./rjybsq/index.vue";
+
+const componentsMap = {
+  HomeIndex,
+  fbqtbsq,
+  rjybsq,
+};
+
+const isCollapse = ref(false);
+const currentComponent = ref(HomeIndex);
+
+const componentMapping = {
+  1: "HomeIndex",
+  "2-1": "fbqtbsq",
+  "2-2": "rjybsq",
+};
+
+const handleSelect = (key) => {
+  const componentName = componentMapping[key];
+  if (componentName) {
+    currentComponent.value = componentsMap[componentName];
+  }
+};
+</script>
+
+<template>
+  <div class="flex h-90.8vh bg-gray-100">
+    <!-- Sidebar -->
+    <div
+      class="bg-dark transition-all duration-300 text-white"
+      :class="isCollapse ? 'w-16' : 'w-64'"
+    >
+      <div class="p-4 flex items-center justify-between border-b border-gray-700">
+        <h1 v-if="!isCollapse" class="text-xl font-bold">智能气体管理</h1>
+        <el-button type="text" @click="isCollapse = !isCollapse" class="text-white">
+          <el-icon>
+            <IconMenu />
+          </el-icon>
+        </el-button>
+      </div>
+
+      <el-menu
+        default-active="1"
+        class="border-none"
+        :collapse="isCollapse"
+        background-color="#1f2937"
+        text-color="#fff"
+        active-text-color="#409EFF"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">
+          <el-icon>
+            <location />
+          </el-icon>
+          <template #title>首页</template>
+        </el-menu-item>
+
+        <el-sub-menu index="2">
+          <template #title>
+            <el-icon>
+              <location />
+            </el-icon>
+            <span>智能气体</span>
+          </template>
+          <el-menu-item index="2-1">防爆气体变送器</el-menu-item>
+          <el-menu-item index="2-2">溶解氧变送器</el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+    </div>
+
+    <!-- Main Content -->
+    <div class="flex-1 overflow-auto">
+      <div class="">
+        <component :is="currentComponent"></component>
+      </div>
+    </div>
+  </div>
+</template>

+ 127 - 0
src/views/device/intelligenceGas/rjybsq/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="p-5">
+    <div class="w-30% flex items-center gap-4 mb-4">
+      <span class="whitespace-nowrap">选择时间:</span>
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        class="flex-grow w-full"
+        clearable
+      />
+      <el-button type="primary" @click="search">搜索</el-button>
+    </div>
+
+    <el-table :data="tableData" v-loading="tableLoading" border stripe>
+      <el-table-column prop="addressCode" label="设备编号" width="200" />
+      <el-table-column prop="dissolvedOxygenConcentration" label="溶解氧浓度" />
+      <el-table-column prop="dissolvedOxygenSaturation" label="溶解氧饱和度" />
+      <el-table-column prop="temp" label="温度" />
+      <el-table-column label="报警状态" align="center">
+        <template #default="scope">
+          <el-tag
+            :type="scope.row.alarmStatus === 0 ? 'success' : 'danger'"
+            effect="dark"
+          >
+            <div class="flex items-center">
+              <AlertTriangle v-if="scope.row.alarmStatus === 1" class="w-4 h-4 mr-1" />
+              {{ scope.row.alarmStatus === 0 ? "正常" : "告警" }}
+            </div>
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="functionCode" label="功能编号" />
+      <el-table-column prop="validByteCount" label="有效字节计数" />
+      <el-table-column prop="createTime" label="创建时间" width="400" />
+    </el-table>
+
+    <pagination
+      v-show="totals > 0"
+      :total="totals"
+      v-model:page="currentPage"
+      v-model:limit="pageSize"
+      @pagination="getManholeAllData"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { getrjyGasDataAll } from "@/api/intelligenceGas/index";
+import { parseTime, parseTimeEnd } from "@/utils/ruoyi.js";
+
+const tableData = ref([]);
+const totals = ref(0);
+const dateRange = ref([]);
+const tableLoading = ref(false);
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 构建查询参数
+const buildQueryParams = () => {
+  return {
+    pageNum: currentPage.value,
+    pageSize: pageSize.value,
+    query: [
+      ...(dateRange.value?.length === 2
+        ? [
+            {
+              column: "create_time",
+              type: "between",
+              value: `${parseTime(dateRange.value[0])},${parseTimeEnd(
+                dateRange.value[1]
+              )}`,
+            },
+          ]
+        : []),
+    ],
+  };
+};
+
+// 获取数据
+const getManholeAllData = async () => {
+  try {
+    tableLoading.value = true;
+    const res = await getrjyGasDataAll(buildQueryParams());
+
+    if (res.code !== 200) {
+      ElMessage.error(res.msg);
+      return;
+    }
+    totals.value = res.data.total;
+    tableData.value = res.data.records || [];
+    console.log(
+      "初始数据值",
+      res,
+      parseTime(dateRange.value[0]),
+      parseTimeEnd(dateRange.value[1])
+    );
+  } catch (error) {
+    console.error("获取数据失败:", error);
+    ElMessage.error("数据加载失败,请稍后重试");
+  } finally {
+    tableLoading.value = false;
+  }
+};
+
+// 搜索时重置页码
+const search = () => {
+  currentPage.value = 1;
+  getManholeAllData();
+};
+
+// 初始化加载
+onMounted(() => {
+  getManholeAllData();
+});
+</script>
+
+<style scoped>
+.flex-grow {
+  flex-grow: 1;
+  max-width: 400px;
+}
+</style>

+ 163 - 164
src/views/device/manhole/ldzh/jgkl.vue

@@ -1,9 +1,17 @@
 <script setup>
-import {computed, onMounted, ref, watch} from "vue";
-import {AlertTriangle, Plus, RefreshCw, Search, Trash2, Wifi, WifiOff,} from "lucide-vue-next";
-import {ElMessage, ElMessageBox} from "element-plus";
+import { computed, onMounted, ref, watch } from "vue";
+import {
+  AlertTriangle,
+  Plus,
+  RefreshCw,
+  Search,
+  Trash2,
+  Wifi,
+  WifiOff,
+} from "lucide-vue-next";
+import { ElMessage, ElMessageBox } from "element-plus";
 import request from "@/utils/request.js";
-import {getDicts} from "@/api/system/dict/data.js";
+import { getDicts } from "@/api/system/dict/data.js";
 
 import EchartsTyp from "@/components/baseEcharts/index.vue";
 import pieChart from "@/components/baseEcharts/pieChart.vue";
@@ -53,10 +61,10 @@ const addForm = ref({
   remarks: "",
 });
 const addFormRules = {
-  deviceName: [{required: true, message: "请输入设备名称", trigger: "blur"}],
-  deviceNumber: [{required: true, message: "请输入设备编号", trigger: "blur"}],
-  model: [{required: true, message: "请输入设备型号", trigger: "blur"}],
-  type: [{required: true, message: "请输入设备类型", trigger: "blur"}],
+  deviceName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
+  deviceNumber: [{ required: true, message: "请输入设备编号", trigger: "blur" }],
+  model: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
+  type: [{ required: true, message: "请输入设备类型", trigger: "blur" }],
 };
 const addFormRef = ref(null);
 
@@ -113,14 +121,14 @@ const generateYearDateRange = () => {
   return {
     start: `${currentYear}-01-01 00:00:00`,
     end: `${currentYear}-${String(new Date().getMonth() + 1).padStart(2, "0")}-${String(
-        new Date().getDate()
+      new Date().getDate()
     ).padStart(2, "0")} 23:59:59`,
   };
 };
 
 // 工具方法:创建通用查询条件
 const createCondition = (column, status, dateRange) => [
-  {column: column, type: "ne", value: status},
+  { column: column, type: "ne", value: status },
   {
     column: "create_time",
     type: "between",
@@ -130,7 +138,7 @@ const createCondition = (column, status, dateRange) => [
 
 // 核心请求方法
 const fetchAlarmData = async (condition) => {
-  const {data} = await request.get("/manholeData/getAll", {
+  const { data } = await request.get("/manholeData/getAll", {
     params: {
       conditionJson: encodeURIComponent(JSON.stringify(condition)),
     },
@@ -141,32 +149,32 @@ const fetchAlarmData = async (condition) => {
 // 获取饼图数据法
 const getyearAllDeviceInfo = () => {
   try {
-    const {start, end} = generateYearDateRange();
+    const { start, end } = generateYearDateRange();
 
     // 定义报警类型配置
     const alarmTypes = [
-      {column: "alarm_status", name: "翻转"},
-      {column: "water_infiltration_alarm_status", name: "水浸"},
-      {column: "water_level_alarm_status", name: "水位"},
+      { column: "alarm_status", name: "翻转" },
+      { column: "water_infiltration_alarm_status", name: "水浸" },
+      { column: "water_level_alarm_status", name: "水位" },
     ];
 
     // 并行发送所有请求
     Promise.all(
-        alarmTypes.map(async ({column}) =>
-            fetchAlarmData(createCondition(column, "0", {start, end}))
-        )
+      alarmTypes.map(async ({ column }) =>
+        fetchAlarmData(createCondition(column, "0", { start, end }))
+      )
     )
-        .then((res) => {
-          PieChartDataTwo.value = res.map((res, index) => {
-            return {
-              value: res.length,
-              name: alarmTypes[index].name,
-            };
-          });
-        })
-        .catch((error) => {
-          ElMessage.error("获取数据失败");
+      .then((res) => {
+        PieChartDataTwo.value = res.map((res, index) => {
+          return {
+            value: res.length,
+            name: alarmTypes[index].name,
+          };
         });
+      })
+      .catch((error) => {
+        ElMessage.error("获取数据失败");
+      });
     // 构建图表数据
   } catch (error) {
     ElMessage.error("获取设备数据失败");
@@ -180,7 +188,7 @@ const getyearAllDeviceInfo = () => {
 const getobtainMonthlyData = async () => {
   loading.value = true;
   try {
-    const {start, end} = generateYearDateRange();
+    const { start, end } = generateYearDateRange();
     const res = await request.get("/manholeData/getMonthlyDataCount", {
       params: {
         startDate: start,
@@ -206,7 +214,7 @@ const getobtainMonthlyData = async () => {
 const getobtainDayData = async () => {
   loading.value = true;
   try {
-    const {start, end} = generateYearDateRange();
+    const { start, end } = generateYearDateRange();
     const res = await request.get("/manholeData/getDailyDataCountThisMonth", {});
     if (res.code !== 200) {
       ElMessage.error(res.msg);
@@ -259,12 +267,12 @@ const formatDate = (dateString) => {
 
 // Watch for search changes
 watch(
-    () => search.value.deviceName,
-    (newVal, oldVal) => {
-      if (newVal === "" && oldVal !== "") {
-        handleSearch();
-      }
+  () => search.value.deviceName,
+  (newVal, oldVal) => {
+    if (newVal === "" && oldVal !== "") {
+      handleSearch();
     }
+  }
 );
 
 // 预览设备信息
@@ -404,13 +412,13 @@ const handleBatchDelete = async () => {
 
   try {
     await ElMessageBox.confirm(
-        `确认删除选中的 ${multipleSelection.value.length} 个设备吗?此操作不可恢复`,
-        "警告",
-        {
-          confirmButtonText: "确认",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
+      `确认删除选中的 ${multipleSelection.value.length} 个设备吗?此操作不可恢复`,
+      "警告",
+      {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+      }
     );
 
     const ids = multipleSelection.value.map((item) => item.id);
@@ -460,22 +468,22 @@ onMounted(() => {
       <div class="text-xl font-bold">设备管理</div>
       <div class="flex gap-2">
         <el-input
-            v-model="search.deviceName"
-            placeholder="搜索设备名称"
-            class="w-64"
-            clearable
-            @keyup.enter="handleSearch"
+          v-model="search.deviceName"
+          placeholder="搜索设备名称"
+          class="w-64"
+          clearable
+          @keyup.enter="handleSearch"
         >
           <template #prefix>
-            <Search class="w-4 h-4 text-gray-400"/>
+            <Search class="w-4 h-4 text-gray-400" />
           </template>
         </el-input>
         <el-button type="primary" @click="handleSearch" class="flex items-center">
-          <Search class="w-4 h-4 mr-1"/>
+          <Search class="w-4 h-4 mr-1" />
           搜索
         </el-button>
         <el-button @click="handleReset" class="flex items-center">
-          <RefreshCw class="w-4 h-4 mr-1"/>
+          <RefreshCw class="w-4 h-4 mr-1" />
           重置
         </el-button>
       </div>
@@ -485,17 +493,17 @@ onMounted(() => {
     <div class="mb-4 flex justify-between">
       <div class="flex gap-2">
         <el-button type="primary" @click="openAddDialog" class="flex items-center">
-          <Plus class="w-4 h-4 mr-1"/>
+          <Plus class="w-4 h-4 mr-1" />
           新增设备
         </el-button>
 
         <el-button
-            type="danger"
-            :disabled="!hasSelected"
-            @click="handleBatchDelete"
-            class="flex items-center"
+          type="danger"
+          :disabled="!hasSelected"
+          @click="handleBatchDelete"
+          class="flex items-center"
         >
-          <Trash2 class="w-4 h-4 mr-1"/>
+          <Trash2 class="w-4 h-4 mr-1" />
           批量删除
         </el-button>
         <span class="ml-2 text-gray-500 flex items-center" v-if="hasSelected">
@@ -521,18 +529,18 @@ onMounted(() => {
           <div class="stat-card bg-green-50 p-4 rounded-lg h-100">
             <div class="text-green-500 text-lg font-medium">报警月统计</div>
             <EchartsTyp
-                :flipData="flipDataMonthly"
-                :waterImmersion="waterImmersionMonthly"
-                :waterLevel="waterLevelMonthly"
+              :flipData="flipDataMonthly"
+              :waterImmersion="waterImmersionMonthly"
+              :waterLevel="waterLevelMonthly"
             ></EchartsTyp>
           </div>
           <div class="stat-card bg-red-50 p-4 rounded-lg h-100">
             <div class="text-red-500 text-lg font-medium">报警日统计</div>
             <riEcharts
-                :flipData="flipDataDay"
-                :waterImmersion="waterImmersionDay"
-                :waterLevel="waterLevelDay"
-                :DagiveanalarmDate="DagiveanalarmDate"
+              :flipData="flipDataDay"
+              :waterImmersion="waterImmersionDay"
+              :waterLevel="waterLevelDay"
+              :DagiveanalarmDate="DagiveanalarmDate"
             ></riEcharts>
           </div>
         </div>
@@ -541,53 +549,53 @@ onMounted(() => {
 
     <!-- Table -->
     <el-table
-        :data="deviceArr"
-        border
-        stripe
-        style="width: 100%"
-        v-loading="loading"
-        class="mb-4"
-        @selection-change="handleSelectionChange"
+      :data="deviceArr"
+      border
+      stripe
+      style="width: 100%"
+      v-loading="loading"
+      class="mb-4"
+      @selection-change="handleSelectionChange"
     >
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column type="index" label="序号" width="60" align="center"/>
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="60" align="center" />
       <el-table-column
-          prop="deviceName"
-          label="设备名称"
-          min-width="150"
-          show-overflow-tooltip
+        prop="deviceName"
+        label="设备名称"
+        min-width="150"
+        show-overflow-tooltip
       />
       <el-table-column
-          prop="deviceNumber"
-          label="设备编号"
-          min-width="150"
-          show-overflow-tooltip
+        prop="deviceNumber"
+        label="设备编号"
+        min-width="150"
+        show-overflow-tooltip
       />
-      <el-table-column prop="model" label="型号" min-width="150" show-overflow-tooltip/>
+      <el-table-column prop="model" label="型号" min-width="150" show-overflow-tooltip />
       <el-table-column prop="type" label="类型" min-width="120" show-overflow-tooltip>
         <template #default="{ row }">
           {{ deviceType[row.type] }}
         </template>
       </el-table-column>
       <el-table-column
-          prop="location"
-          label="位置"
-          min-width="150"
-          show-overflow-tooltip
+        prop="location"
+        label="位置"
+        min-width="150"
+        show-overflow-tooltip
       />
 
       <el-table-column label="在线状态" width="120" align="center">
         <template #default="scope">
           <div class="flex items-center justify-center">
             <span
-                v-if="scope.row.onlineStatus === 1"
-                class="flex items-center text-green-500"
+              v-if="scope.row.onlineStatus === 1"
+              class="flex items-center text-green-500"
             >
-              <Wifi class="w-4 h-4 mr-1"/>
+              <Wifi class="w-4 h-4 mr-1" />
               在线
             </span>
             <span v-else class="flex items-center text-gray-500">
-              <WifiOff class="w-4 h-4 mr-1"/>
+              <WifiOff class="w-4 h-4 mr-1" />
               离线
             </span>
           </div>
@@ -597,11 +605,11 @@ onMounted(() => {
       <el-table-column label="告警状态" width="120" align="center">
         <template #default="scope">
           <el-tag
-              :type="scope.row.alarmStatus === 0 ? 'success' : 'danger'"
-              effect="dark"
+            :type="scope.row.alarmStatus === 0 ? 'success' : 'danger'"
+            effect="dark"
           >
             <div class="flex items-center">
-              <AlertTriangle v-if="scope.row.alarmStatus === 1" class="w-4 h-4 mr-1"/>
+              <AlertTriangle v-if="scope.row.alarmStatus === 1" class="w-4 h-4 mr-1" />
               {{ scope.row.alarmStatus === 0 ? "正常" : "告警" }}
             </div>
           </el-tag>
@@ -609,10 +617,10 @@ onMounted(() => {
       </el-table-column>
 
       <el-table-column
-          prop="remarks"
-          label="备注"
-          min-width="150"
-          show-overflow-tooltip
+        prop="remarks"
+        label="备注"
+        min-width="150"
+        show-overflow-tooltip
       />
 
       <el-table-column label="创建时间" min-width="180" show-overflow-tooltip>
@@ -630,21 +638,18 @@ onMounted(() => {
       <el-table-column label="操作" fixed="right" width="220" align="center">
         <template #default="scope">
           <el-button type="primary" link size="small" @click="handlePreview(scope.row.id)"
-          >预览
-          </el-button
-          >
+            >预览
+          </el-button>
           <el-button
-              type="primary"
-              link
-              size="small"
-              @click="openEditDialog(scope.row.id)"
-          >编辑
-          </el-button
-          >
+            type="primary"
+            link
+            size="small"
+            @click="openEditDialog(scope.row.id)"
+            >编辑
+          </el-button>
           <el-button type="danger" link size="small" @click="handleDelete(scope.row.id)"
-          >删除
-          </el-button
-          >
+            >删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -652,76 +657,70 @@ onMounted(() => {
     <!-- Pagination -->
     <div class="flex justify-end">
       <el-pagination
-          v-model:current-page="currentPage"
-          v-model:page-size="pageSize"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          background
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        background
       />
     </div>
 
     <!-- 预览对话框 -->
     <el-dialog v-model="previewDialogVisible" title="设备详情" width="50%">
       <el-descriptions :column="2" border>
-        <el-descriptions-item label="设备名称">{{
-            currentDevice.deviceName
-          }}
+        <el-descriptions-item label="设备名称"
+          >{{ currentDevice.deviceName }}
         </el-descriptions-item>
-        <el-descriptions-item label="设备编号">{{
-            currentDevice.deviceNumber
-          }}
+        <el-descriptions-item label="设备编号"
+          >{{ currentDevice.deviceNumber }}
         </el-descriptions-item>
-        <el-descriptions-item label="类型">{{
-            deviceType[currentDevice.type]
-          }}
+        <el-descriptions-item label="类型"
+          >{{ deviceType[currentDevice.type] }}
         </el-descriptions-item>
-        <el-descriptions-item label="位置">{{
-            currentDevice.location
-          }}
+        <el-descriptions-item label="位置"
+          >{{ currentDevice.location }}
         </el-descriptions-item>
-        <el-descriptions-item label="型号">{{
-            currentDevice.model
-          }}
+        <el-descriptions-item label="型号"
+          >{{ currentDevice.model }}
         </el-descriptions-item>
         <el-descriptions-item label="在线状态">
           <span
-              v-if="currentDevice.onlineStatus === 1"
-              class="flex items-center text-green-500"
+            v-if="currentDevice.onlineStatus === 1"
+            class="flex items-center text-green-500"
           >
-            <Wifi class="w-4 h-4 mr-1"/>
+            <Wifi class="w-4 h-4 mr-1" />
             在线
           </span>
           <span v-else class="flex items-center text-gray-500">
-            <WifiOff class="w-4 h-4 mr-1"/>
+            <WifiOff class="w-4 h-4 mr-1" />
             离线
           </span>
         </el-descriptions-item>
         <el-descriptions-item label="告警状态">
           <el-tag
-              :type="currentDevice.alarmStatus === 0 ? 'success' : 'danger'"
-              effect="dark"
+            :type="currentDevice.alarmStatus === 0 ? 'success' : 'danger'"
+            effect="dark"
           >
             <div class="flex items-center">
               <AlertTriangle
-                  v-if="currentDevice.alarmStatus === 1"
-                  class="w-4 h-4 mr-1"
+                v-if="currentDevice.alarmStatus === 1"
+                class="w-4 h-4 mr-1"
               />
               {{ currentDevice.alarmStatus === 0 ? "正常" : "告警" }}
             </div>
           </el-tag>
         </el-descriptions-item>
-        <el-descriptions-item label="备注" :span="2">{{
-            currentDevice.remarks
-          }}
+        <el-descriptions-item label="备注" :span="2"
+          >{{ currentDevice.remarks }}
         </el-descriptions-item>
         <el-descriptions-item label="创建时间" :span="2"
-        >{{ formatDate(currentDevice.createTime) }}
+          >{{ formatDate(currentDevice.createTime) }}
         </el-descriptions-item>
         <el-descriptions-item label="更新时间" :span="2"
-        >{{ formatDate(currentDevice.updateTime) }}
+          >{{ formatDate(currentDevice.updateTime) }}
         </el-descriptions-item>
       </el-descriptions>
       <template #footer>
@@ -735,16 +734,16 @@ onMounted(() => {
     <el-dialog v-model="editDialogVisible" title="编辑设备" width="40%">
       <el-form :model="editForm" label-width="100px">
         <el-form-item label="设备名称">
-          <el-input v-model="editForm.deviceName" placeholder="请输入设备名称"/>
+          <el-input v-model="editForm.deviceName" placeholder="请输入设备名称" />
         </el-form-item>
         <el-form-item label="位置">
           <el-input
-              v-model="editForm.location"
-              placeholder="请输入位置 例如(xxxxx-xxxxx)"
+            v-model="editForm.location"
+            placeholder="请输入位置 例如(xxxxx-xxxxx)"
           />
         </el-form-item>
         <el-form-item label="备注">
-          <el-input v-model="editForm.remarks" type="textarea" placeholder="请输入备注"/>
+          <el-input v-model="editForm.remarks" type="textarea" placeholder="请输入备注" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -758,39 +757,39 @@ onMounted(() => {
     <!-- 新增对话框 -->
     <el-dialog v-model="addDialogVisible" title="新增设备" width="40%">
       <el-form
-          ref="addFormRef"
-          :model="addForm"
-          :rules="addFormRules"
-          label-width="100px"
+        ref="addFormRef"
+        :model="addForm"
+        :rules="addFormRules"
+        label-width="100px"
       >
         <el-form-item label="设备名称" prop="deviceName">
-          <el-input v-model="addForm.deviceName" placeholder="请输入设备名称"/>
+          <el-input v-model="addForm.deviceName" placeholder="请输入设备名称" />
         </el-form-item>
         <el-form-item label="设备编号" prop="deviceNumber">
-          <el-input v-model="addForm.deviceNumber" placeholder="请输入设备编号"/>
+          <el-input v-model="addForm.deviceNumber" placeholder="请输入设备编号" />
         </el-form-item>
         <el-form-item label="型号" prop="model">
-          <el-input v-model="addForm.model" placeholder="请输入型号"/>
+          <el-input v-model="addForm.model" placeholder="请输入型号" />
         </el-form-item>
         <el-form-item label="类型" prop="model">
           <el-select v-model="addForm.type" placeholder="请输入设备型号">
             <el-option
-                v-for="(item, index) in deviceType"
-                :key="item.value"
-                :label="item"
-                :value="index"
-                :disabled="index !== '1'"
+              v-for="(item, index) in deviceType"
+              :key="item.value"
+              :label="item"
+              :value="index"
+              :disabled="index !== '1'"
             />
           </el-select>
         </el-form-item>
         <el-form-item label="位置">
           <el-input
-              v-model="addForm.location"
-              placeholder="请输入位置 例如(xxxxx-xxxxx)"
+            v-model="addForm.location"
+            placeholder="请输入位置 例如(xxxxx-xxxxx)"
           />
         </el-form-item>
         <el-form-item label="备注">
-          <el-input v-model="addForm.remarks" type="textarea" placeholder="请输入备注"/>
+          <el-input v-model="addForm.remarks" type="textarea" placeholder="请输入备注" />
         </el-form-item>
       </el-form>
       <template #footer>

+ 66 - 41
src/views/register.vue

@@ -1,69 +1,82 @@
 <template>
   <div class="register">
-    <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">若依后台管理系统</h3>
+    <el-form
+      ref="registerRef"
+      :model="registerForm"
+      :rules="registerRules"
+      class="register-form"
+    >
+      <h3 class="title">中科盛阳物联网平台</h3>
       <el-form-item prop="username">
-        <el-input 
-          v-model="registerForm.username" 
-          type="text" 
-          size="large" 
-          auto-complete="off" 
+        <el-input
+          v-model="registerForm.username"
+          type="text"
+          size="large"
+          auto-complete="off"
           placeholder="账号"
         >
-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+          <template #prefix
+            ><svg-icon icon-class="user" class="el-input__icon input-icon"
+          /></template>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
         <el-input
           v-model="registerForm.password"
           type="password"
-          size="large" 
+          size="large"
           auto-complete="off"
           placeholder="密码"
           @keyup.enter="handleRegister"
         >
-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+          <template #prefix
+            ><svg-icon icon-class="password" class="el-input__icon input-icon"
+          /></template>
         </el-input>
       </el-form-item>
       <el-form-item prop="confirmPassword">
         <el-input
           v-model="registerForm.confirmPassword"
           type="password"
-          size="large" 
+          size="large"
           auto-complete="off"
           placeholder="确认密码"
           @keyup.enter="handleRegister"
         >
-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+          <template #prefix
+            ><svg-icon icon-class="password" class="el-input__icon input-icon"
+          /></template>
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
         <el-input
-          size="large" 
+          size="large"
           v-model="registerForm.code"
           auto-complete="off"
           placeholder="验证码"
           style="width: 63%"
           @keyup.enter="handleRegister"
         >
-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+          <template #prefix
+            ><svg-icon icon-class="validCode" class="el-input__icon input-icon"
+          /></template>
         </el-input>
         <div class="register-code">
-          <img :src="codeUrl" @click="getCode" class="register-code-img"/>
+          <img :src="codeUrl" @click="getCode" class="register-code-img" />
         </div>
       </el-form-item>
-      <el-form-item style="width:100%;">
+      <el-form-item style="width: 100%">
         <el-button
           :loading="loading"
-          size="large" 
+          size="large"
           type="primary"
-          style="width:100%;"
+          style="width: 100%"
           @click.prevent="handleRegister"
         >
           <span v-if="!loading">注 册</span>
           <span v-else>注 册 中...</span>
         </el-button>
-        <div style="float: right;">
+        <div style="float: right">
           <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
         </div>
       </el-form-item>
@@ -87,7 +100,7 @@ const registerForm = ref({
   password: "",
   confirmPassword: "",
   code: "",
-  uuid: ""
+  uuid: "",
 });
 
 const equalToPassword = (rule, value, callback) => {
@@ -101,18 +114,22 @@ const equalToPassword = (rule, value, callback) => {
 const registerRules = {
   username: [
     { required: true, trigger: "blur", message: "请输入您的账号" },
-    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
+    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" },
   ],
   password: [
     { required: true, trigger: "blur", message: "请输入您的密码" },
     { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
-    { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符:< > \" ' \\\ |", trigger: "blur" }
+    {
+      pattern: /^[^<>"'|\\]+$/,
+      message: "不能包含非法字符:< > \" ' \\\ |",
+      trigger: "blur",
+    },
   ],
   confirmPassword: [
     { required: true, trigger: "blur", message: "请再次输入您的密码" },
-    { required: true, validator: equalToPassword, trigger: "blur" }
+    { required: true, validator: equalToPassword, trigger: "blur" },
   ],
-  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }],
 };
 
 const codeUrl = ref("");
@@ -120,29 +137,37 @@ const loading = ref(false);
 const captchaEnabled = ref(true);
 
 function handleRegister() {
-  proxy.$refs.registerRef.validate(valid => {
+  proxy.$refs.registerRef.validate((valid) => {
     if (valid) {
       loading.value = true;
-      register(registerForm.value).then(res => {
-        const username = registerForm.value.username;
-        ElMessageBox.alert("<font color='red'>恭喜你,您的账号 " + username + " 注册成功!</font>", "系统提示", {
-          dangerouslyUseHTMLString: true,
-          type: "success",
-        }).then(() => {
-          router.push("/login");
-        }).catch(() => {});
-      }).catch(() => {
-        loading.value = false;
-        if (captchaEnabled) {
-          getCode();
-        }
-      });
+      register(registerForm.value)
+        .then((res) => {
+          const username = registerForm.value.username;
+          ElMessageBox.alert(
+            "<font color='red'>恭喜你,您的账号 " + username + " 注册成功!</font>",
+            "系统提示",
+            {
+              dangerouslyUseHTMLString: true,
+              type: "success",
+            }
+          )
+            .then(() => {
+              router.push("/login");
+            })
+            .catch(() => {});
+        })
+        .catch(() => {
+          loading.value = false;
+          if (captchaEnabled) {
+            getCode();
+          }
+        });
     }
   });
 }
 
 function getCode() {
-  getCodeImg().then(res => {
+  getCodeImg().then((res) => {
     captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
     if (captchaEnabled.value) {
       codeUrl.value = "data:image/gif;base64," + res.img;
@@ -154,7 +179,7 @@ function getCode() {
 getCode();
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .register {
   display: flex;
   justify-content: center;