perf:

1. 通道详情页和服务器详情页页面展现效果优化；
2. 去掉多余代码；
3. 物联卡管理代码优化；

src/views/iot/iotCard/dashboard.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="page">
 		<el-card shadow="nover" class="page-full-part">
-		  <div shadow="nover" class="top-wrap">
+      <div shadow="nover" class="top-wrap">
         <div class="title flex">
           数据统计
           <div class="select-wrap">
@@ -14,35 +14,33 @@
             </el-select>
           </div>
         </div>
-				<div class="top-inner-wrap">
-					<div class="line-wrap flow-line-wrap">
-						<div class="text-wrap">
-							<div class="text">昨日流量消耗</div>
-							<div>{{formatSize(statisticsData.yesterdayTotal * 1024 * 1024)}}</div>
-						</div>
-						<div class="line-inner-wrap" ref="yesterdayLine"></div>
-					</div>
-					<div class="line-wrap flow-line-wrap">
-						<div class="text-wrap">
-							<div class="text">当月流量消耗</div>
-							<div>{{formatSize(statisticsData.realMonthTotal * 1024 * 1024)}}</div>
-						</div>
-						<div class="line-inner-wrap" ref="monthLine"></div>
-					</div>
+        <div class="top-inner-wrap">
+          <div class="line-wrap flow-line-wrap">
+            <div class="text-wrap">
+              <div class="text">昨日流量消耗</div>
+              <div>{{formatSize(statisticsData.yesterdayTotal * 1024 * 1024)}}</div>
+            </div>
+            <div class="line-inner-wrap" ref="yesterdayLine"></div>
+          </div>
+          <div class="line-wrap flow-line-wrap">
+            <div class="text-wrap">
+              <div class="text">当月流量消耗</div>
+              <div>{{formatSize(statisticsData.realMonthTotal * 1024 * 1024)}}</div>
+            </div>
+            <div class="line-inner-wrap" ref="monthLine"></div>
+          </div>
 
-					<div class="line-wrap flow-line-wrap">
-						<div class="text-wrap">
-							<div class="text">本年流量消耗</div>
-							<div>{{formatSize(statisticsData.yearTotal * 1024 * 1024)}}</div>
-						</div>
-						<div class="line-inner-wrap" ref="yearLine"></div>
-					</div>
-				</div>
+          <div class="line-wrap flow-line-wrap">
+            <div class="text-wrap">
+              <div class="text">本年流量消耗</div>
+              <div>{{formatSize(statisticsData.yearTotal * 1024 * 1024)}}</div>
+            </div>
+            <div class="line-inner-wrap" ref="yearLine"></div>
+          </div>
+        </div>
 
         
       </div>
-
-
 			<div class="statistics-wrap">
 				<el-card shadow="nover" class="left-wrap">
 					<div class="top-title-wrap">
@@ -105,29 +103,11 @@
 import { ref, reactive, nextTick, watch, markRaw } from "vue"
 import { formatSize } from "/@/utils/common";
 import api from '/@/api/iotCard';
-import { useSearch } from "/@/hooks/useCommon";
 import { useStore } from '/@/store/index';
-import { useRoute } from 'vue-router';
 import * as echarts from 'echarts';
 import dayjs from 'dayjs';
 
 const store = useStore();
-const route = useRoute();
-const sim = ref({
-  accNumber: "",// 卡号
-  iccid: "",// ICCID
-  bindDeviceName: "",// 绑定设备
-  platName: "",// 平台对接
-  types: "",// 运营商
-  simTypes: "",// 类型
-  totalFlow: "",// 总流量
-  usedFlow: "",// 使用流量
-  leaveFlow: "",// 剩余流量
-  activationTime: "",// 激活日期
-  updatedAt: "",// 更新时间
-  simStatus: "",// 状态
-  remark: ""// 说明
-})
 
 const types = ref(1);
 const statisticsData = ref({
@@ -201,26 +181,26 @@ const getFlowDataByDateRange = async (dateRangeData:any) => {
 }
 
 const getYesterdayFlowData = async () => {
-	  const yesterday = dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')
-		const res = await getFlowDataByDateRange([
-      yesterday + " 00:00:00",
-      yesterday + " 23:59:59"
-    ])
-		yesterdayLineData.value = [res[0].value];
-		initYesterdayLineChart();
+  const yesterday = dayjs(new Date()).subtract(1, 'day').format('YYYY-MM-DD')
+  const res = await getFlowDataByDateRange([
+    yesterday + " 00:00:00",
+    yesterday + " 23:59:59"
+  ])
+  yesterdayLineData.value = [res[0].value];
+  initYesterdayLineChart();
 }
 const getMonthFlowData = async () => {
-		monthLineXAxisData.value = [];
-		monthLineData.value = [];
-	  const monthDay1 = dayjs(new Date()).startOf('month').format('YYYY-MM-DD');
-		const monthDay2 = dayjs(new Date()).endOf('month').format('YYYY-MM-DD');
-		const res = await getFlowDataByDateRange([monthDay1, monthDay2])
-		res.reverse().forEach((item:any) => {
-			monthLineXAxisData.value.push(item.date);
-			monthLineData.value.push(item.value);
-		})
-
-		initMonthLineChart();
+  monthLineXAxisData.value = [];
+  monthLineData.value = [];
+  const monthDay1 = dayjs(new Date()).startOf('month').format('YYYY-MM-DD');
+  const monthDay2 = dayjs(new Date()).endOf('month').format('YYYY-MM-DD');
+  const res = await getFlowDataByDateRange([monthDay1, monthDay2])
+  res.reverse().forEach((item:any) => {
+    monthLineXAxisData.value.push(item.date);
+    monthLineData.value.push(item.value);
+  })
+
+  initMonthLineChart();
 }
 const getYearFlowData = async () => {
 	yearLineXAxisData.value = [];
@@ -280,7 +260,7 @@ const changeDate = (key:number) => {
   getFlowData();
 }
 
-const typeChange = (value:any) => {
+const typeChange = () => {
 	getYesterdayFlowData();
 	getMonthFlowData();
 	getYearFlowData();
@@ -294,7 +274,6 @@ const getTop10Data = async () => {
     edate: dayjs(dateRange.value[1]).format('YYYY-MM-DD'),
     types: types.value
   })
-	// if(!top10Res.data) return;
 	rankList.value = top10Res.data || [];
 	totalNum.value = top10Res.data ? top10Res.data[0].value : 0;
 }
@@ -305,47 +284,6 @@ const getFlowAllData = async () => {
 	statisticsData.value = res
 }
 
-const formatOperator = (val:any) => {
-  // 1电信,2联通,3移动
-  if(val == 1) {
-    return "电信"
-  }else if(val == 2) {
-    return "联通"
-  }else if(val == 3) {
-    return "移动"
-  }
-}
-
-const formatType = (val:any) => {
-  // 1月卡，2季卡，3年卡，4其他
-  if(val == 1) {
-    return "月卡"
-  }else if(val == 2) {
-    return "季卡"
-  }else if(val == 3) {
-    return "年卡"
-  }else if(val == 4) {
-    return "其他"
-  }
-}
-
-const formatStatus = (val:any) => {
-  // 1：可激活 2：测试激活 3：测试去激活 4：在用5：停机6：运营商管理状态
-  if(val == 1) {
-    return "可激活"
-  }else if(val == 2) {
-    return "测试激活"
-  }else if(val == 3) {
-    return "测试去激活"
-  }else if(val == 4) {
-    return "在用"
-  }else if(val == 5) {
-    return "停机"
-  }else if(val == 6) {
-    return "运营商管理状态"
-  }
-}
-
 // 折线图 - 昨日流量消耗
 const initYesterdayLineChart = () => {
   if (!state.global.dispose.some((b: any) => b === state.global.yesterdayLine)) state.global.yesterdayLine.dispose();
@@ -519,7 +457,7 @@ const iniFlowLineChart = async () => {
         splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
         axisLabel: {
           margin: 2,
-          formatter: function (value:any, index:any) {
+          formatter: function (value:any) {
             if (value >= 10000 && value < 10000000) {
               value = value / 10000 + "W";
             } else if (value >= 10000000) {
@@ -704,27 +642,27 @@ watch(
 				align-items: center;
 				margin-bottom: 24px;
 
-				.number {
-					flex: 0 0 24px;
-					height: 24px;
-					color: #fff;
-					font-weight: 700;
-					line-height: 24px;
-					text-align: center;
-					background-color: #d1d1d1;
-				}
-				.number-item-1 {
-					color: #e50012;
-    			background-color: #e500121a;
-				}
-				.number-item-2 {
-    			color: #fba500;
-    			background-color: #fba5001a;
-				}
-				.number-item-3 {
-					color: #597ef7;
-    			background-color: #597ef71a;
-				}
+        .number {
+          flex: 0 0 24px;
+          height: 24px;
+          color: #fff;
+          font-weight: 700;
+          line-height: 24px;
+          text-align: center;
+          background-color: #d1d1d1;
+        }
+        .number-item-1 {
+          color: #e50012;
+          background-color: #e500121a;
+        }
+        .number-item-2 {
+          color: #fba500;
+          background-color: #fba5001a;
+        }
+        .number-item-3 {
+          color: #597ef7;
+          background-color: #597ef71a;
+        }
 				.card-num {
 					width: 110px;
 				}

src/views/iot/iotCard/index/detail.vue

@@ -2,16 +2,7 @@
 <template>
   <div>
     <el-card shadow="nover">
-       <el-descriptions
-        class="margin-top"
-        title="基本信息"
-        :column="3"
-        :size="size"
-        border
-      >
-        <!-- <template #extra>
-          <el-button type="primary">编辑</el-button>
-        </template> -->
+       <el-descriptions class="margin-top" title="基本信息" :column="3" :size="size" border>
         <!-- 卡号 -->
         <el-descriptions-item>
           <template #label>
@@ -258,7 +249,6 @@
 import { ref, reactive, nextTick, watch, markRaw } from "vue";
 import { formatSize } from "/@/utils/common";
 import api from '/@/api/iotCard';
-import { useSearch } from "/@/hooks/useCommon";
 import { useStore } from '/@/store/index';
 import { useRoute } from 'vue-router';
 import * as echarts from 'echarts';
@@ -403,45 +393,19 @@ const changeDate = (key:number) => {
 
 }
 
-const formatOperator = (val:any) => {
+const formatOperator = (val:number) => {
   // 1电信,2联通,3移动
-  if(val == 1) {
-    return "电信"
-  }else if(val == 2) {
-    return "联通"
-  }else if(val == 3) {
-    return "移动"
-  }
+  return ['', '电信', '联通', '移动'][val];
 }
 
-const formatType = (val:any) => {
+const formatType = (val:number) => {
   // 1月卡，2季卡，3年卡，4其他
-  if(val == 1) {
-    return "月卡"
-  }else if(val == 2) {
-    return "季卡"
-  }else if(val == 3) {
-    return "年卡"
-  }else if(val == 4) {
-    return "其他"
-  }
+  return ['', '月卡', '季卡', '年卡', '其他'][val];
 }
 
 const formatStatus = (val:any) => {
-  // 1：可激活 2：测试激活 3：测试去激活 4：在用5：停机6：运营商管理状态
-  if(val == 1) {
-    return "可激活"
-  }else if(val == 2) {
-    return "测试激活"
-  }else if(val == 3) {
-    return "测试去激活"
-  }else if(val == 4) {
-    return "在用"
-  }else if(val == 5) {
-    return "停机"
-  }else if(val == 6) {
-    return "运营商管理状态"
-  }
+  // 1：可激活 2：测试激活 3：测试去激活 4：在用 5：停机 6：运营商管理状态
+  return ['', '可激活', '测试激活', '测试去激活', '在用', '停机', '运营商管理状态'][val];
 }
 
 // 折线图 - 昨日流量消耗
@@ -600,7 +564,7 @@ const iniFlowLineChart = async () => {
         splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
         axisLabel: {
           margin: 2,
-          formatter: function (value:any, index:any) {
+          formatter: function (value:any) {
             if (value >= 10000 && value < 10000000) {
               value = value / 10000 + "W";
             } else if (value >= 10000000) {

src/views/iot/iotCard/index/index.vue

@@ -32,7 +32,7 @@
         <el-table-column label="绑定设备" prop="bindDeviceName" align="center" />
         <el-table-column label="平台对接" prop="platName" align="center" />
         <el-table-column label="运营商" prop="types" align="center">
-        	<template #default="scope">{{ formatOperator(scope.row.types) }}</template>
+          <template #default="scope">{{ formatOperator(scope.row.types) }}</template>
         </el-table-column> 
         <el-table-column label="类型" prop="simTypes" align="center">
           <template #default="scope">{{ formatType(scope.row.simTypes) }}</template>
@@ -43,7 +43,7 @@
         <el-table-column width="160" label="激活日期" prop="activationTime" align="center" />     
         <el-table-column width="160" label="更新时间" prop="updatedAt" align="center" />    
         <el-table-column label="状态" prop="simStatus" align="center">
-        	<template #default="scope">{{ formatStatus(scope.row.simStatus) }}</template>
+          <template #default="scope">{{ formatStatus(scope.row.simStatus) }}</template>
         </el-table-column> 
         <el-table-column width="110" label="操作" fixed="right" prop="handle" align="center">
 					<template #default="scope">
@@ -60,7 +60,6 @@
         @pagination="getList()"
       />
     </el-card>
-    <!-- <EditDept ref="editDeptRef" @deptList="deptList" /> -->
   </div>
 </template>
 
@@ -99,45 +98,19 @@ const onDel = (row: any) => {
 	});
 };
 
-const formatOperator = (val:any) => {
+const formatOperator = (val:number) => {
   // 1电信,2联通,3移动
-  if(val == 1) {
-    return "电信"
-  }else if(val == 2) {
-    return "联通"
-  }else if(val == 3) {
-    return "移动"
-  }
+  return ['', '电信', '联通', '移动'][val];
 }
 
-const formatType = (val:any) => {
+const formatType = (val:number) => {
   // 1月卡，2季卡，3年卡，4其他
-  if(val == 1) {
-    return "月卡"
-  }else if(val == 2) {
-    return "季卡"
-  }else if(val == 3) {
-    return "年卡"
-  }else if(val == 4) {
-    return "其他"
-  }
+  return ['', '月卡', '季卡', '年卡', '其他'][val];
 }
 
-const formatStatus = (val:any) => {
+const formatStatus = (val:number) => {
   // 1：可激活 2：测试激活 3：测试去激活 4：在用5：停机6：运营商管理状态
-  if(val == 1) {
-    return "可激活"
-  }else if(val == 2) {
-    return "测试激活"
-  }else if(val == 3) {
-    return "测试去激活"
-  }else if(val == 4) {
-    return "在用"
-  }else if(val == 5) {
-    return "停机"
-  }else if(val == 6) {
-    return "运营商管理状态"
-  }
+  return ['', '可激活', '测试激活', '测试去激活', '在用', '停机', '运营商管理状态'][val];
 }
 
 const onOpenDetail = (item:any) => {

src/views/iot/iotCard/platformManage/addOrEditItem.vue

@@ -46,12 +46,8 @@
 
 <script lang="ts" setup>
 import api from '/@/api/iotCard';
-import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
-import { ElMessageBox, ElMessage } from 'element-plus';
-import { useSearch } from "/@/hooks/useCommon"
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
+import { ref, unref } from 'vue';
+import { ElMessage } from 'element-plus';
 
 const isShowDialog = ref(false);
 const formRef = ref<HTMLElement | null>(null);
@@ -90,7 +86,6 @@ const onSubmit = () => {
   formWrap.validate(async (valid: boolean) => {
     if (!valid) return
     btnLoading.value = true
-    console.log(ruleForm.value)
     if(ruleForm.value.id) {
       // 修改
       api.platform.editItem(ruleForm.value)
@@ -125,12 +120,13 @@ const resetForm = () => {
     appSecret: "",
     remark: "",
     appKey: "",
-    restUrl: ""
+    restUrl: "",
+    status: 1
   }
 }
 
 /**
- * 取消
+ * 点击取消按钮
  */
 const onCancel = () => {
   closeDialog();
@@ -143,51 +139,7 @@ const closeDialog = () => {
   isShowDialog.value = false;
 };
 
-
-const formatOperator = (val:any) => {
-  // 1电信,2联通,3移动
-  if(val == 1) {
-    return "电信"
-  }else if(val == 2) {
-    return "联通"
-  }else if(val == 3) {
-    return "移动"
-  }
-}
-
-const formatType = (val:any) => {
-  // 1月卡，2季卡，3年卡，4其他
-  if(val == 1) {
-    return "月卡"
-  }else if(val == 2) {
-    return "季卡"
-  }else if(val == 3) {
-    return "年卡"
-  }else if(val == 4) {
-    return "其他"
-  }
-}
-
-const formatStatus = (val:any) => {
-  // 1：可激活 2：测试激活 3：测试去激活 4：在用5：停机6：运营商管理状态
-  if(val == 1) {
-    return "可激活"
-  }else if(val == 2) {
-    return "测试激活"
-  }else if(val == 3) {
-    return "测试去激活"
-  }else if(val == 4) {
-    return "在用"
-  }else if(val == 5) {
-    return "停机"
-  }else if(val == 6) {
-    return "运营商管理状态"
-  }
-}
-
 const openDialog = (item:any) => {
-  console.log(item)
-  // router.push('/iotmanager/iotCard/index/detail/'+item.id);
   if(item) {
     // 修改
     ruleForm.value = { ...item };

src/views/iot/iotCard/platformManage/index.vue

@@ -34,14 +34,11 @@
         style="width: 100%"
       >
         <el-table-column label="名称" prop="name" align="center" />
-        <!-- <el-table-column label="平台类型" prop="types" align="center">
-        	<template #default="scope">{{ formatOperator(scope.row.types) }}</template>
-        </el-table-column> -->
         <el-table-column label="状态" prop="simStatus" align="center">
-        	<template #default="scope">
+          <template #default="scope">
             <el-tag type="primary" v-if="scope.row.status">{{ formatStatus(scope.row.status) }}</el-tag>
             <el-tag type="danger" v-else>{{ formatStatus(scope.row.status) }}</el-tag>
-            </template>
+          </template>
         </el-table-column> 
         <el-table-column label="说明" prop="remark" align="center" />       
 
@@ -60,28 +57,23 @@
         @pagination="getList()"
       />
     </el-card>
-    <!-- <EditDept ref="editDeptRef" @deptList="deptList" /> -->
     <AddOrEditItem ref="AddOrEditItemRef" @updateList="getList()" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import api from '/@/api/iotCard';
-import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
+import { defineAsyncComponent, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useSearch } from "/@/hooks/useCommon"
-import { useRouter } from 'vue-router';
 const AddOrEditItem = defineAsyncComponent(() => import('./addOrEditItem.vue'));
 
 const { params, tableData, getList, loading } = useSearch<any[]>(
   api.platform.getList,
   "Data"
 )
-
 getList();
 
-const router = useRouter();
-
 const AddOrEditItemRef = ref();
 
 /** 重置按钮操作 */
@@ -105,46 +97,16 @@ const onDel = (row: any) => {
 	});
 };
 
-const formatOperator = (val:any) => {
-  // 1电信,2联通,3移动
-  if(val == 1) {
-    return "电信"
-  }else if(val == 2) {
-    return "联通"
-  }else if(val == 3) {
-    return "移动"
-  }
-}
-
-const formatType = (val:any) => {
-  // 1月卡，2季卡，3年卡，4其他
-  if(val == 1) {
-    return "月卡"
-  }else if(val == 2) {
-    return "季卡"
-  }else if(val == 3) {
-    return "年卡"
-  }else if(val == 4) {
-    return "其他"
-  }
-}
-
 const formatStatus = (val:any) => {
   // 1：开启 0：禁用
-  if(val == 1) {
-    return "开启"
-  }else if(val == 0) {
-    return "禁用"
-  }
+  return ['', '开启', '禁用'][val];
 }
 
 const onOpenDetail = (item:any) => {
-  // router.push('/iotmanager/iotCard/index/detail/'+item.id);
   AddOrEditItemRef.value.openDialog(item);
 }
 
 const toAddItemPage = () => {
   AddOrEditItemRef.value.openDialog();
-  // router.push('/iotmanager/iotCard/platformManage/add');
 }
 </script>

src/views/iot/iotmanager/dashboard.vue

@@ -222,7 +222,7 @@ export default defineComponent({
 						splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
 						axisLabel: {
 							margin: 2,
-							formatter: function (value, index) {
+							formatter: function (value:any) {
 								if (value >= 10000 && value < 10000000) {
 									value = value / 10000 + "W";
 								} else if (value >= 10000000) {

src/views/iot/network/server/component/list.vue

@@ -3,7 +3,7 @@
     <el-table-column align="center" prop="id" label="ID" width="100" v-col="'id'" />
     <!-- <el-table-column align="center" prop="server" label="服务器"/> -->
     <el-table-column align="center" prop="name" label="名称" v-col="'name'" />
-    <el-table-column align="center" prop="types" v-col="'types'" label="类型" :formatter="(a: any) => typesFormat(a.types)" />
+    <el-table-column align="center" prop="types" v-col="'types'" label="类型" :formatter="(a) => typesFormat(a.types)" />
     <el-table-column align="center" prop="addr" label="地址" v-col="'addr'" />
     <el-table-column show-overflow-tooltip align="center" prop="createdAt" label="创建时间" width="170" v-col="'createdAt'" />
     <!-- <el-table-column align="center" prop="last" label="最近上线"/> -->
@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick, getCurrentInstance, unref, defineComponent } from 'vue';
+import { toRefs, reactive, onMounted, getCurrentInstance, unref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
 
@@ -75,7 +75,7 @@ export default defineComponent({
       default: () => { },
     },
   },
-  setup(props, { emit }) {
+  setup(props) {
     const router = useRouter();
 
     const { proxy } = getCurrentInstance() as any;
@@ -100,7 +100,7 @@ export default defineComponent({
     });
     // 改变状态
     const onChangeStatus = (id: number, status: number) => {
-      api.server.changeServerStatus({ id: id, status: status }).then((res: any) => {
+      api.server.changeServerStatus({ id: id, status: status }).then(() => {
         ElMessage.success(status ? '已开启' : '已关闭');
         fetchList();
       })
@@ -145,7 +145,7 @@ export default defineComponent({
         type: 'warning',
       })
         .then(() => {
-          api.server.deleteItem({ ids: [row.id] }).then((res: any) => {
+          api.server.deleteItem({ ids: [row.id] }).then(() => {
             fetchList()
             ElMessage.success('删除成功');
           });
@@ -181,8 +181,5 @@ export default defineComponent({
 ::v-deep div.more-opearte-wrap {
   flex-direction: row;
   background-color: pink;
-
-  // padding: 4px!important;
-  div {}
 }
 </style>

src/views/iot/network/server/component/serverDetail.vue

@@ -8,44 +8,51 @@
 -->
 <!-- 服务器详情页 -->
 <template>
-    <div class="server-detail-wrap">
-        <div class="server-detail-item-wrap">
-            <div class="label">名称</div>
-            <div class="value">{{ detail.name }}</div>
-        </div>
-        <div class="server-detail-item-wrap">
-            <div class="label">类型</div>
-            <div class="value">{{ detail.types }}</div>
-        </div>
-        <div class="server-detail-item-wrap">
-            <div class="label">地址</div>
-            <div class="value">{{ detail.addr }}</div>
-        </div>
-        <div class="server-detail-item-wrap">
-            <div class="label">状态</div>
-            <div class="value">{{ detail.status ? '启动' : '未启动' }}</div>
-        </div>
-        <div class="server-detail-item-wrap">
-            <div class="label">禁用</div>
-            <div class="value">
-                <el-switch :loading="loading" :before-change="onChangeStatus" :disabled="!detail.status" :active-value="0" :inactive-value="1" size="small" v-model="detail.status" />
-            </div>
-        </div>
-        <div class="server-detail-item-wrap">
-            <div class="label">创建时间</div>
-            <div class="value">{{ detail.createdAt }}</div>
-        </div>
-    </div>
+    <el-descriptions :column="2" border>
+        <el-descriptions-item>
+            <template #label>
+                <div class="cell-item">名称</div>
+            </template>
+            {{detail.name}}
+        </el-descriptions-item>
+        <el-descriptions-item>
+            <template #label>
+                <div class="cell-item">类型</div>
+            </template>
+            {{detail.types}}
+        </el-descriptions-item>
+        <el-descriptions-item>
+            <template #label>
+                <div class="cell-item">地址</div>
+            </template>
+            {{detail.addr}}
+        </el-descriptions-item>
+        <el-descriptions-item>
+            <template #label>
+                <div class="cell-item">状态</div>
+            </template>
+            {{ detail.status ? '启动' : '未启动' }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+            <template #label>
+                <div class="cell-item">禁用</div>
+            </template>
+            <el-switch :loading="loading" :before-change="onChangeStatus" :disabled="!detail.status" :active-value="0" :inactive-value="1" size="small" v-model="detail.status" />
+        </el-descriptions-item>
+        <el-descriptions-item>
+            <template #label>
+                <div class="cell-item">创建时间</div>
+            </template>
+            {{ detail.createdAt }}
+        </el-descriptions-item>
+    </el-descriptions>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
-import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
-import { ElMessageBox, ElMessage } from 'element-plus';
-
+import { toRefs, reactive, onMounted, defineComponent } from 'vue';
+import { ElMessage } from 'element-plus';
 import api from '/@/api/network';
 
 interface TableDataState {
-    // detail: object,
     loading: boolean
 }
 export default defineComponent({
@@ -53,10 +60,10 @@ export default defineComponent({
     props: {
         detail: {
             type: Object,
-            default: ''
+            default: () => {}
         }
     },
-    setup(props, context) {
+    setup(props) {
         const state = reactive<TableDataState>({
             loading: false
         });
@@ -65,8 +72,8 @@ export default defineComponent({
         // 禁用状态
         const onChangeStatus = () => {
             state.loading = true
-            return new Promise((resolve) => {
-                api.server.changeServerStatus({ id: props.detail.id, status: 0 }).then((res: any) => {
+            return new Promise(() => {
+                api.server.changeServerStatus({ id: props.detail.id, status: 0 }).then(() => {
                     state.loading = false
                     ElMessage.success('已关闭');
                     props.detail.status = 0
@@ -83,20 +90,3 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.server-detail-wrap {
-    .server-detail-item-wrap {
-        display: flex;
-        justify-content: space-between;
-        padding: 10px;
-        border-left: 1px solid var(--el-border-color-light);
-        border-top: 1px solid var(--el-border-color-light);
-        border-right: 1px solid var(--el-border-color-light);
-    }
-
-    .server-detail-item-wrap:last-child {
-        border-bottom: 1px solid var(--el-border-color-light);
-    }
-}
-</style>
-

src/views/iot/network/server/create.vue

@@ -116,10 +116,8 @@
 import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance, watch } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
-import type { TabsPaneContext } from 'element-plus'
-import codeEditor from '/@/components/codeEditor/index.vue'
-
-import serverDetail from './component/serverDetail.vue'
+import type { TabsPaneContext } from 'element-plus';
+import codeEditor from '/@/components/codeEditor/index.vue';
 
 import { useRoute } from 'vue-router';
 
@@ -128,13 +126,10 @@ import api2 from '/@/api/system';
 import deviceApi from '/@/api/device'
 
 interface TableDataState {
-  // ids: number[];
-  // id: string;
   activeViewName: string[];
   resourceModalPro: {
     mode: string,
     content: string,
-    // content: object,
   },
   detail: object,
   form: object,
@@ -160,7 +155,7 @@ interface TableDataState {
 }
 export default defineComponent({
   name: 'serverCreate',
-  components: { codeEditor, serverDetail },
+  components: { codeEditor },
   props: {
     type: {
       type: String,
@@ -168,7 +163,7 @@ export default defineComponent({
     }
   },
 
-  setup(props, context) {
+  setup(props) {
     const { proxy } = getCurrentInstance() as any;
     const route = useRoute();
     const { network_server_type, network_protocols } = proxy.useDict('network_server_type', 'network_protocols');
@@ -283,10 +278,6 @@ export default defineComponent({
       api.server.addItem(params).then((res: any) => {
         ElMessage.success('添加成功')
         goBack()
-        // const { list, total, page } = res
-        // state.data = list
-        // state.total = total
-        // state.param.page = page
       });
     };
     onMounted(() => {
@@ -328,7 +319,6 @@ export default defineComponent({
       () => state.form.types,
       (value) => {
         getCertificateList()
-        // api.certificate.getList();
       }
     );
 

src/views/iot/network/server/detail.vue

@@ -16,12 +16,9 @@
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
-// import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
-import type { TabsPaneContext } from 'element-plus'
-
-import serverDetail from './component/serverDetail.vue'
-
+import type { TabsPaneContext } from 'element-plus';
+import serverDetail from './component/serverDetail.vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import api from '/@/api/network';
@@ -43,7 +40,7 @@ export default defineComponent({
 		}
 	},
 
-	setup(props, context) {
+	setup(props) {
 		const route = useRoute();
 		const router = useRouter();
 		const state = reactive<TableDataState>({

src/views/iot/network/server/edit.vue

@@ -115,10 +115,8 @@
 <script lang="ts">
 import { watch, toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
 import { ElMessage } from 'element-plus';
-import type { TabsPaneContext } from 'element-plus'
-import codeEditor from '/@/components/codeEditor/index.vue'
-
-import serverDetail from './component/serverDetail.vue'
+import type { TabsPaneContext } from 'element-plus';
+import codeEditor from '/@/components/codeEditor/index.vue';
 
 import { useRoute, useRouter } from 'vue-router';
 
@@ -155,7 +153,7 @@ interface TableDataState {
 }
 export default defineComponent({
   name: 'serverCreate',
-  components: { codeEditor, serverDetail },
+  components: { codeEditor },
   props: {
     type: {
       type: String,
@@ -163,7 +161,7 @@ export default defineComponent({
     }
   },
 
-  setup(props, context) {
+  setup(props) {
     const { proxy } = getCurrentInstance() as any;
     const route = useRoute();
     const router = useRouter();
@@ -259,7 +257,6 @@ export default defineComponent({
     const getDetail = () => {
       const id = route.params && route.params.id;
       api.server.getDetail({ "id": id }).then((res: any) => {
-
         const { id, isTls, authType, certificateId, authUser, authPasswd, accessToken, name, types, status, addr, register, protocol, heartbeat, devices, stick } = res
         state.form["id"] = id
         state.form["name"] = name

src/views/iot/network/tunnel/component/list.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive, onMounted, getCurrentInstance, unref, watch, defineComponent } from 'vue';
+import { toRefs, reactive, onMounted, getCurrentInstance, unref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
 

src/views/iot/network/tunnel/component/serverDetail.vue

@@ -8,37 +8,47 @@
 -->
 <!-- 服务器详情页 -->
 <template>
-  <div class="server-detail-wrap">
-    <div class="server-detail-item-wrap">
-      <div class="label">名称</div>
-      <div class="value">{{ detail.name }}</div>
-    </div>
-    <div class="server-detail-item-wrap">
-      <div class="label">类型</div>
-      <div class="value">{{ detail.types }}</div>
-    </div>
-    <div class="server-detail-item-wrap">
-      <div class="label">地址</div>
-      <div class="value">{{ detail.addr }}</div>
-    </div>
-    <div class="server-detail-item-wrap">
-      <div class="label">状态</div>
-      <div class="value">{{ detail.status ? '启动' : '未启动' }}</div>
-    </div>
-    <div class="server-detail-item-wrap">
-      <div class="label">禁用</div>
-      <div class="value">
+  <el-descriptions :column="2" border>
+    <el-descriptions-item>
+        <template #label>
+            <div class="cell-item">名称</div>
+        </template>
+        {{detail.name}}
+    </el-descriptions-item>
+    <el-descriptions-item>
+        <template #label>
+            <div class="cell-item">类型</div>
+        </template>
+        {{detail.types}}
+    </el-descriptions-item>
+    <el-descriptions-item>
+        <template #label>
+            <div class="cell-item">地址</div>
+        </template>
+        {{detail.addr}}
+    </el-descriptions-item>
+    <el-descriptions-item>
+        <template #label>
+            <div class="cell-item">状态</div>
+        </template>
+        {{ detail.status ? '启动' : '未启动' }}
+    </el-descriptions-item>
+    <el-descriptions-item>
+        <template #label>
+            <div class="cell-item">禁用</div>
+        </template>
         <el-switch :loading="loading" :before-change="onChangeStatus" :disabled="!detail.status" :active-value="0" :inactive-value="1" size="small" v-model="detail.status" />
-      </div>
-    </div>
-    <div class="server-detail-item-wrap">
-      <div class="label">创建时间</div>
-      <div class="value">{{ detail.createdAt }}</div>
-    </div>
-  </div>
+    </el-descriptions-item>
+    <el-descriptions-item>
+        <template #label>
+            <div class="cell-item">创建时间</div>
+        </template>
+        {{ detail.createdAt }}
+    </el-descriptions-item>
+  </el-descriptions>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { toRefs, reactive, onMounted, defineComponent } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import api from '/@/api/network';
@@ -54,7 +64,7 @@ export default defineComponent({
       default: ''
     }
   },
-  setup(props, context) {
+  setup(props) {
     const state = reactive<TableDataState>({
       loading: false
     });
@@ -63,8 +73,8 @@ export default defineComponent({
     // 禁用状态
     const onChangeStatus = () => {
       state.loading = true
-      return new Promise((resolve) => {
-        api.tunnel.changeTunnelStatus({ id: props.detail.id, status: 0 }).then((res: any) => {
+      return new Promise(() => {
+        api.tunnel.changeTunnelStatus({ id: props.detail.id, status: 0 }).then(() => {
           state.loading = false
           ElMessage.success('已关闭');
           props.detail.status = 0
@@ -79,22 +89,4 @@ export default defineComponent({
     };
   }
 });
-</script>
-
-<style lang="scss" scoped>
-.server-detail-wrap {
-  .server-detail-item-wrap {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px;
-    border-left: 1px solid var(--el-border-color-light);
-    border-top: 1px solid var(--el-border-color-light);
-    border-right: 1px solid var(--el-border-color-light);
-  }
-
-  .server-detail-item-wrap:last-child {
-    border-bottom: 1px solid var(--el-border-color-light);
-  }
-}
-</style>
-
+</script>

src/views/iot/network/tunnel/create.vue

@@ -102,10 +102,9 @@
   </div>
 </template>
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance, nextTick } from 'vue';
+import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
 import { ElMessage } from 'element-plus';
 import codeEditor from '/@/components/codeEditor/index.vue'
-import serverDetail from './component/serverDetail.vue'
 import { useRoute, useRouter } from 'vue-router';
 
 import api from '/@/api/network';
@@ -124,7 +123,7 @@ interface TableDataState {
 }
 export default defineComponent({
   name: 'tunnelCreate',
-  components: { codeEditor, serverDetail },
+  components: { codeEditor },
   props: {
     type: {
       type: String,
@@ -132,7 +131,7 @@ export default defineComponent({
     }
   },
 
-  setup(props, context) {
+  setup(props) {
     const { proxy } = getCurrentInstance() as any;
     const route = useRoute();
     const router = useRouter();

src/views/iot/network/tunnel/edit.vue

@@ -106,8 +106,6 @@ import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance }
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import codeEditor from '/@/components/codeEditor/index.vue'
 
-import serverDetail from './component/serverDetail.vue'
-
 import { useRoute, useRouter } from 'vue-router';
 
 import api from '/@/api/network';
@@ -125,7 +123,7 @@ interface TableDataState {
 }
 export default defineComponent({
   name: 'tunnelCreate',
-  components: { codeEditor, serverDetail },
+  components: { codeEditor },
   props: {
     type: {
       type: String,
@@ -133,7 +131,7 @@ export default defineComponent({
     }
   },
 
-  setup(props, context) {
+  setup(props) {
     const { proxy } = getCurrentInstance() as any;
     const route = useRoute();
     const router = useRouter();