被测设备信息 接口对接

src/App.vue

@@ -2,6 +2,4 @@
   <router-view></router-view>
 </template>
 <script setup>
-import Layout from './views/Layout.vue'
-
 </script>

src/views/Home/Drawer.vue

@@ -2,19 +2,49 @@
   <el-drawer
     ref="drawerRef"
     v-model="props.visible"
-    title="I have a nested form inside!"
     :before-close="handleClose"
-    direction="ltr"
+    direction="rtl"
     class="demo-drawer"
-    size="80%"
+    size="100%"
   >
-    <el-table :data="tableData" style="width: 100%" border size="large">
-      <el-table-column prop="index" label="#" align="center" />
-      <el-table-column prop="numId" label="编号" align="center" />
-      <el-table-column prop="name" label="测试产品名称" align="center" />
-      <el-table-column prop="testState" label="测试类型状态" align="center" />
-      <el-table-column prop="remark" label="备注" align="center" />
-      <el-table-column prop="dateTime" label="创建时间" align="center" />
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      border
+      size="large"
+      v-loading="loading"
+    >
+      <el-table-column prop="index" label="#" align="center" width="60" />
+      <el-table-column
+        prop="testItems"
+        label="测试项目"
+        align="center"
+        width="200"
+      />
+      <el-table-column prop="attribute1" label="测试子项一" align="center" />
+      <el-table-column prop="attribute2" label="测试子项二" align="center" />
+      <el-table-column prop="attribute3" label="测试子项三" align="center" />
+      <el-table-column prop="attribute4" label="测试子项四" align="center" />
+      <el-table-column prop="attribute5" label="测试子项五" align="center" />
+      <el-table-column prop="attribute6" label="测试子项六" align="center" />
+      <el-table-column prop="valueRan" label="标准范围" align="center" />
+      <el-table-column prop="testValue" label="实测值" align="center" />
+      <el-table-column label="测试状态" align="center">
+        <template #default="scope">
+          <div class="font-bold">
+            {{ scope.row.conclusion==0?'成功':'失败' }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark1" label="备注一" align="center" />
+      <el-table-column prop="remark2" label="备注二" align="center" />
+      <el-table-column label="创建时间" align="center" width="170">
+        <template #default="scope">
+          <div >
+            {{ dayjs(scope.row.dateTime).format("YYYY-MM-DD HH:mm:ss") }}
+          </div>
+        </template>
+      </el-table-column>
     </el-table>
     <div class="mt-5 flex items-center justify-end">
       <el-pagination
@@ -32,7 +62,8 @@
 
 <script setup>
 import { productInformationList } from "@/api/login";
-import { onMounted, ref } from "vue";
+import { getCurrentInstance, onMounted, ref } from "vue";
+import dayjs from "dayjs";
 const props = defineProps({
   testId: {
     type: String,
@@ -47,21 +78,34 @@ const page = ref({
   current: 1,
   size: 10,
 });
+const emits = defineEmits(["drawClose"]);
 const total = ref(0);
 const tableData = ref([]);
-const getData = async () => {
+const loading = ref(false);
+const getList = async () => {
+  loading.value = true;
   let { code, data } = await productInformationList({
     ...page.value,
     testId: props.testId,
   });
+  loading.value = false;
   if (code != 200) return;
-  tableData.value = data.records;
+  tableData.value = data.records.map((item, i) => ({
+    ...item,
+    index: (page.value.current - 1) * 10 + i + 1,
+  }));
   total.value = data.total;
 };
+const currentChange = (val) => {
+  page.value.current = val;
+  getList();
+};
 onMounted(() => {
-  getData();
+  getList();
 });
-const handleClose = () => {};
+const handleClose = () => {
+  emits("drawClose");
+};
 </script>
  <script>
 export default {

src/views/Home/index.vue

@@ -11,7 +11,11 @@
     <el-table-column prop="name" label="测试产品名称" align="center" />
     <el-table-column prop="testState" label="测试类型状态" align="center" />
     <el-table-column prop="remark" label="备注" align="center" />
-    <el-table-column prop="dateTime" label="创建时间" align="center" />
+    <el-table-column label="创建时间" align="center">
+      <template #default="scope">
+        <div>{{ dayjs(scope.row.dateTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
+      </template>
+    </el-table-column>
   </el-table>
   <div class="mt-5 flex items-center justify-end">
     <el-pagination
@@ -24,9 +28,15 @@
       @current-change="currentChange"
     />
   </div>
-  <Drawer v-if="DrawerVisible" :testId="id" :visible="DrawerVisible"></Drawer>
+  <Drawer
+    @drawClose="DrawerVisible = false"
+    v-if="DrawerVisible"
+    :testId="id"
+    :visible="DrawerVisible"
+  ></Drawer>
 </template>
   <script setup >
+import dayjs from "dayjs";
 import Drawer from "./Drawer.vue";
 import { productList } from "@/api/login";
 import { onMounted, ref } from "vue";

src/views/Layout.vue

@@ -1,23 +1,26 @@
 <template>
-  <el-config-provider>
+  <el-config-provider :locale="locale">
     <el-container class="layout-container-demo">
       <!-- 头 -->
       <el-header class="my-header">
-        <el-icon size="25" :color="isDark ? '#FFFF66' : '#aeFFF66'" class=" font-bold cursor-pointer mr-5"
-          @click="toggleDark()">
-          <Sunny class=" font-bold" v-show="isDark" />
+        <el-icon
+          size="25"
+          :color="isDark ? '#FFFF66' : '#aeFFF66'"
+          class="font-bold cursor-pointer mr-5"
+          @click="toggleDark()"
+        >
+          <Sunny class="font-bold" v-show="isDark" />
           <Moon v-show="!isDark" />
         </el-icon>
         <el-button @click="logout">登出</el-button>
       </el-header>
 
-      <el-container style="height:calc(100vh - 50px)">
+      <el-container style="height: calc(100vh - 50px)">
         <!-- 左侧菜单 -->
         <el-aside width="200px">
           <el-scrollbar>
             <el-menu router :default-active="route.path">
-              <el-menu-item index="/test">Test</el-menu-item>
-              <el-menu-item index="/home">主页</el-menu-item>
+              <el-menu-item index="/home">被测设备信息 </el-menu-item>
               <el-menu-item index="/deviceManage">设备管理</el-menu-item>
             </el-menu>
           </el-scrollbar>
@@ -34,11 +37,14 @@
 </template>
 
 <script setup>
-import { toggleDark, isDark } from '@/composables/dark'
-import { useRoute } from 'vue-router'
-import { useLogin } from '@/hooks/useLogin'
-const route = useRoute()
-const { isLogin, logout } = useLogin()
+import { toggleDark, isDark } from "@/composables/dark";
+import { useRoute } from "vue-router";
+import { useLogin } from "@/hooks/useLogin";
+import { ref } from "vue";
+import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+const locale = ref(zhCn);
+const route = useRoute();
+const { isLogin, logout } = useLogin();
 </script>
 
 <style scoped lang="scss">