feat: 设备列表模块接口联调

.env

@@ -3,3 +3,5 @@ VITE_PORT = 8848
 
 # 是否隐藏首页 隐藏 true 不隐藏 false （勿删除，VITE_HIDE_HOME只需在.env文件配置）
 VITE_HIDE_HOME = false
+# 开发环境后端地址
+VITE_APP_BASE_URL = 'http://192.168.10.21:8000'

.env.development

@@ -6,3 +6,5 @@ VITE_PUBLIC_PATH = ./
 
 # 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"
+# 开发环境后端地址
+VITE_APP_BASE_URL = 'http://192.168.10.21:8000'

src/api/device.ts

@@ -0,0 +1,29 @@
+import { http } from "@/utils/http";
+import { baseUrlApi } from "./utils";
+
+type Result = {
+  success: boolean;
+  data?: Array<any>;
+};
+
+type ResultList = {
+  success: boolean;
+  data?: {
+    /** 列表数据 */
+    results: Array<any>;
+  };
+};
+
+/** 节点模型设备获取 */
+export const getDeviceList = (params?: object) => {
+  return http.request<Result>("get", baseUrlApi("enterprise_node/"), {
+    params
+  });
+};
+
+/** 获取设备分类 */
+export const getDeviceClassfication = (params?: object) => {
+  return http.request<ResultList>("get", baseUrlApi("device_classfication/"), {
+    params
+  });
+};

src/api/list.ts

@@ -22,7 +22,7 @@ export const getCardList = (data?: object) => {
 };
 
 export const getServerList = (data?: object) => {
-  return http.request<Result>("post", "/getServerList", { data });
+  return http.request<Result>("post", "/api/server/", { data });
 };
 
 export const getServerBoxList = (data?: object) => {

src/api/user.ts

@@ -1,5 +1,5 @@
 import { http } from "@/utils/http";
-
+import { baseUrlApi } from "./utils";
 export type UserResult = {
   success: boolean;
   data: {
@@ -30,7 +30,7 @@ export type RefreshTokenResult = {
 
 /** 登录 */
 export const getLogin = (data?: object) => {
-  return http.request<UserResult>("post", "/login", { data });
+  return http.request<UserResult>("post", baseUrlApi("login/"), { data });
 };
 
 /** 刷新token */

src/api/utils.ts

@@ -0,0 +1,2 @@
+const { VITE_APP_BASE_URL } = import.meta.env;
+export const baseUrlApi = (url: string) => `${VITE_APP_BASE_URL}/api/${url}`;

src/components/CustomTree/src/collapseTree.tsx

@@ -1,41 +1,8 @@
-import { defineComponent, reactive } from "vue";
+import { defineComponent, Transition } from "vue";
 import CollapseTreeItem from "./collapseTreeItem";
 import "./collapseTreeStyle.scss";
 import styles from "./collapseTreeStyle.scss";
 
-const testDeviceTreeData = [
-  {
-    name: "临沂总部",
-    id: "11",
-    level: 0,
-    expended: true,
-    childList: [
-      {
-        name: "精密仪器车间",
-        id: "精密仪器设备",
-        level: 1
-      },
-      {
-        name: "装配间",
-        id: "装配设备",
-        level: 1
-      }
-    ]
-  },
-  {
-    name: "临沂分部",
-    id: "12",
-    level: 0,
-    childList: [
-      {
-        name: "机械加工车间",
-        id: "机械加工设备",
-        level: 1
-      }
-    ]
-  }
-];
-
 export default defineComponent({
   name: "CollapseTree",
   props: {
@@ -45,11 +12,10 @@ export default defineComponent({
     }
   },
 
-  setup() {
+  setup(props) {
     // const count = ref<number>(1);
-    const treeData = reactive({
+    // const treeData = ref(props.value);
-      list: testDeviceTreeData
+    // console.log(treeData.value);
-    });
 
     return () => {
       return (
@@ -58,7 +24,7 @@ export default defineComponent({
             class="root_cat_box"
             style={{ padding: "16px", overflowY: "scroll", minHeight: "100%" }}
           >
-            {treeData.list.map((vFirst, kFirst) => {
+            {props.value.map((vFirst, kFirst) => {
               return (
                 <li key={kFirst} style={{ marginBottom: "16px" }}>
                   <div
@@ -85,10 +51,10 @@ export default defineComponent({
                     leaveActiveClass={styles.topToBottom_leave_active}
                   >
                     <div class="box" v-show={vFirst?.expended}>
-                      {Array.isArray(vFirst.childList) &&
+                      {Array.isArray(vFirst.children) &&
-                        vFirst.childList.length && (
+                        vFirst.children.length && (
                           <ul class="child_info_box" key="123">
-                            {vFirst.childList.map((item, index) => {
+                            {vFirst.children.map((item, index) => {
                               return (
                                 <li key={index}>
                                   <CollapseTreeItem

src/layout/index.vue

@@ -219,15 +219,15 @@ const layoutHeader = defineComponent({
   margin-top: 12px;
 }
 
-.computePowerAllocation_page {
+// .computePowerAllocation_page {
-  background: url("@/assets/computePower/bg.png");
+//   background: url("@/assets/computePower/bg.png");
-  background-repeat: no-repeat;
+//   background-repeat: no-repeat;
-  .navbar {
+//   .navbar {
-    background-color: transparent !important;
+//     background-color: transparent !important;
-  }
+//   }
-}
+// }
-
+
-.deviceScene_page {
+// .deviceScene_page {
-  background: #fcfcfc;
+//   background: #fcfcfc;
-}
+// }
 </style>

src/main.ts

@@ -17,8 +17,8 @@ import { MotionPlugin } from "@vueuse/motion";
 import { useEcharts } from "@/plugins/echarts";
 import { injectResponsiveStorage } from "@/utils/responsive";
 
-// import Table from "@pureadmin/table";
+import Table from "@pureadmin/table";
-// import PureDescriptions from "@pureadmin/descriptions";
+import PureDescriptions from "@pureadmin/descriptions";
 
 // 引入重置样式
 import "./style/reset.scss";
@@ -58,9 +58,12 @@ getServerConfig(app).then(async config => {
   await router.isReady();
   injectResponsiveStorage(app, config);
   setupStore(app);
-  app.use(MotionPlugin).use(useI18n).use(ElementPlus).use(useEcharts);
+  app
-  // .use(useEcharts);
+    .use(MotionPlugin)
-  // .use(Table);
+    .use(useI18n)
-  // .use(PureDescriptions);
+    .use(ElementPlus)
+    .use(useEcharts)
+    .use(Table)
+    .use(PureDescriptions);
   app.mount("#app");
 });

src/views/alarm/index.vue

@@ -139,7 +139,7 @@ const columns = [
   },
   // TODO 需要封装操作按钮
   {
-    type: "action",
+    slot: "operation",
     label: "操作"
   }
 ];
@@ -210,6 +210,7 @@ onMounted(() => {
 
 <template>
   <div class="main alarm_wrap">
+    <div class="alarm_header">告警管理</div>
     <el-form :inline="true" :model="formData" class="demo-form-inline">
       <el-form-item label="告警名称">
         <el-select v-model="formData.name" placeholder="告警名称" clearable>
@@ -235,7 +236,41 @@ onMounted(() => {
       element-loading-svg-view-box="-10, -10, 50, 50"
     >
       <template v-if="pagination.total > 0">
-        <BaseTable
+        <pure-table
+          showOverflowTooltip
+          alignWhole="center"
+          :data="listData"
+          :columns="columns"
+          :header-cell-style="{
+            background: 'rgba(21, 77, 221, 0.10)',
+            color: 'rgba(51, 51, 51, 1)'
+          }"
+          adaptive
+          :pagination="pagination"
+          @page-current-change="handleTableChange"
+        >
+          <template #operation="{ row }">
+            <ul class="table_action_box">
+              <li class="flex items-center" @click="handleDel(row)">
+                <el-button text>
+                  <i
+                    class="iconfont icon-shanchu pr-[8px]"
+                    :style="{ fontSize: '14px', color: '#E80D0D' }"
+                  />
+                  <span
+                    :style="{
+                      fontSize: '14px',
+                      color: '#E80D0D'
+                    }"
+                  >
+                    删除
+                  </span>
+                </el-button>
+              </li>
+            </ul>
+          </template>
+        </pure-table>
+        <!-- <BaseTable
           :total="pagination.total"
           :pageSize="pagination.pageSize"
           :dataSource="listData"
@@ -244,11 +279,6 @@ onMounted(() => {
           :page="pagination.currentPage"
           @change="handleTableChange"
         >
-          <!-- <template v-slot:customActions="{ row }">
-            <el-button @click="handleDelete(row)" type="danger" size="small"
-              >删除</el-button
-            >
-          </template> -->
           <template v-slot:actionBar="{ row }">
             <ul class="table_action_box">
               <li class="flex items-center" @click="handleDel(row)">
@@ -256,7 +286,7 @@ onMounted(() => {
                   <i
                     class="iconfont icon-shanchu pr-[8px]"
                     :style="{ fontSize: '14px', color: '#E80D0D' }"
-                  ></i>
+                  />
                   <span
                     :style="{
                       fontSize: '14px',
@@ -269,7 +299,7 @@ onMounted(() => {
               </li>
             </ul>
           </template>
-        </BaseTable>
+        </BaseTable> -->
       </template>
     </div>
   </div>
@@ -277,9 +307,28 @@ onMounted(() => {
 
 <style lang="scss">
 .alarm_wrap {
+  background-color: #ffffff;
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid rgba(21, 77, 221, 0.2);
+  .alarm_header {
+    box-sizing: border-box;
+    padding: 16px;
+    height: 62px;
+    font-family: Douyin Sans, Douyin Sans;
+    font-weight: bold;
+    font-size: 20px;
+    color: #333333;
+    border-bottom: 1px solid rgba(21, 77, 221, 0.2);
+  }
+  .demo-form-inline {
+    box-sizing: border-box;
+    padding: 16px 16px 0;
+  }
   .alarm_table {
+    box-sizing: border-box;
+    padding: 0 16px;
     /* overflow-y: scroll; */
-    height: calc(100vh - 220px);
+    height: calc(100vh - 226px);
     overflow-x: hidden;
     overflow-y: scroll;
     /* background-color: red; */

src/views/computePowerAllocation/components/computePowerCube.vue

@@ -41,14 +41,14 @@ const fetchPathValByHeight = val => {
 </script>
 <template>
   <div class="computePowerCube_wrap">
-    <div class="flex justify-start des_wrap pb-[16px]">
+    <!-- <div class="flex justify-start des_wrap pb-[16px]">
       <div class="tip_icon" />
       <p class="text-sm pl-[8px]">
         可根据检测项重要性在管理端配置各算法所占用的算力比例，达到目标运算需求
       </p>
-    </div>
+    </div> -->
 
-    <div class="cube_body">
+    <div class="cube_body mt-[14px]">
       <ul class="flex cube_info" ref="cubeBoxRefs">
         <li
           v-for="(v, k) in listData"
@@ -68,7 +68,7 @@ const fetchPathValByHeight = val => {
       </ul>
     </div>
 
-    <div class="bg_body_logo"></div>
+    <div class="bg_body_logo" />
   </div>
 </template>
 

src/views/computePowerAllocation/computePowerAllocation.scss

@@ -1,14 +1,24 @@
 .computePowerAllocation_wrap {
   height: 100%;
-  .computePowerAllocation_body {
+  background-color: #ffffff;
-    h3 {
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid rgba(21, 77, 221, 0.2);
+  .computePowerAllocation_header {
+    box-sizing: border-box;
+    padding: 16px;
+    height: 62px;
+    font-family: Douyin Sans, Douyin Sans;
     font-weight: bold;
-      font-size: 16px;
+    font-size: 20px;
     color: #333333;
-      line-height: 19px;
+    border-bottom: 1px solid rgba(21, 77, 221, 0.2);
   }
+  .computePowerAllocation_body {
     /* header */
     .head_info {
+      padding: 12px 16px;
+      background: url("@/assets/computePower/computePowerBg.png") no-repeat;
+      background-size: 100% 100%;
       // font-size: 28px;
       .bg_header_logo {
         width: 80px;

src/views/computePowerAllocation/index.vue

@@ -29,7 +29,7 @@ async function fetchPowerData() {
 async function fetchGroupData() {
   const res = await getPowerGroupList();
   console.log("fetchGroupData_res", res);
-  groupList.value = res.data.splice(0, 4);
+  groupList.value = res.data.splice(0, 5);
 }
 
 onMounted(() => {
@@ -40,11 +40,11 @@ onMounted(() => {
 
 <template>
   <div class="main_booy_container computePowerAllocation_wrap">
-    <ul class="computePowerAllocation_body">
+    <h3 class="computePowerAllocation_header">算力配置</h3>
+    <ul class="computePowerAllocation_body p-[16px]">
       <li>
-        <h3>算力配置</h3>
+        <div class="flex items-center head_info">
-        <div class="flex items-center head_info mt-[16px]">
+          <div class="bg_header_logo" />
-          <div class="bg_header_logo"></div>
           <div class="head_info_item ml-[12px]">
             <h6 class="font-bold pf-1">苏胜天算力资源池</h6>
             <p class="pf-2">算力资源999Tops</p>
@@ -77,7 +77,7 @@ onMounted(() => {
       </li>
       <li class="mt-[16px]">
         <h3>算力配置</h3>
-        <div class="mt-[16px]">
+        <div>
           <ComputePowerCube :list="poolsData" />
           <ul class="flex flex-wrap items-center computePower_footer mt-[16px]">
             <li

src/views/device/components/TreeCard.vue

@@ -8,14 +8,28 @@
 -->
 <script setup lang="ts">
 import { CollapseTree } from "@/components/CustomTree";
+import { getDeviceList } from "@/api/device";
+import { onMounted, ref } from "vue";
 
 defineOptions({
   name: "TreeCard"
 });
+const treeList = ref([]);
+async function onSearch() {
+  const params = {
+    children: true
+  };
+  const { data } = await getDeviceList(params);
+  treeList.value = data;
+  console.log(data);
+}
+onMounted(() => {
+  onSearch();
+});
 </script>
 
 <template>
-  <div class="treeCard"><CollapseTree /></div>
+  <div class="treeCard"><CollapseTree :value="treeList" /></div>
 </template>
 
 <style lang="scss" scoped>

src/views/device/index.vue

@@ -2,6 +2,7 @@
 import TreeCard from "./components/TreeCard.vue";
 import DeviceCard from "./components/DeviceCard.vue";
 import { getCardList } from "@/api/list";
+import { getDeviceClassfication } from "@/api/device";
 import { onMounted, ref, watch, onBeforeUnmount, nextTick } from "vue";
 import { emitter } from "@/utils/mitt";
 
@@ -29,9 +30,17 @@ const searchValue = ref("");
 const formData = ref({
   deviceSort: "",
   state: "",
-  isEnabled: ""
+  isEnabled: "",
+  node_id: ""
 });
 const dataLoading = ref(true);
+
+const deviceClassfication = ref([]);
+async function getDeviceTypeList() {
+  const { data } = await getDeviceClassfication();
+  deviceClassfication.value = data.results;
+  console.log(deviceClassfication);
+}
 // const onSubmit = () => {
 //   console.log("submit!");
 // };
@@ -79,7 +88,7 @@ nextTick(() => {
   emitter.on("changCollapseTreeNodeId", data => {
     formData.value = {
       ...formData.value,
-      deviceSort: data
+      node_id: data
     };
   });
 });
@@ -102,6 +111,7 @@ watch(
 
 onMounted(() => {
   getCardListData();
+  getDeviceTypeList();
 });
 </script>
 
@@ -127,8 +137,12 @@ onMounted(() => {
               class="w-[145px]"
               clearable
             >
-              <el-option label="装配设备" value="装配设备" />
+              <el-option
-              <el-option label="精密仪器设备" value="精密仪器设备" />
+                v-for="item in deviceClassfication"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="设备状态">
@@ -138,9 +152,9 @@ onMounted(() => {
               class="w-[145px]"
               clearable
             >
-              <el-option label="在线" value="在线" />
+              <el-option label="在线" value="1001" />
-              <el-option label="故障" value="故障" />
+              <el-option label="故障" value="1003" />
-              <el-option label="离线" value="离线" />
+              <el-option label="离线" value="1002" />
             </el-select>
           </el-form-item>
           <el-form-item label="是否启用">
@@ -150,8 +164,8 @@ onMounted(() => {
               class="w-[145px]"
               clearable
             >
-              <el-option label="已启用" value="true" />
+              <el-option label="已启用" value="1" />
-              <el-option label="未启用" value="false" />
+              <el-option label="未启用" value="0" />
             </el-select>
           </el-form-item>
         </el-form>

src/views/device/scene.vue

@@ -12,9 +12,10 @@ import { getDeviceSceneList, getDeviceSceneItemsList } from "@/api/list";
 import type { FormInstance } from "element-plus";
 
 import { fabric } from "fabric";
-import { BaseTable } from "@/components/CustomTable";
+// import { BaseTable } from "@/components/CustomTable";
 
 import jiankongtu1 from "@/assets/device/jiankongtu1.png";
+import historyAlarm from "@/assets/history_alarm.png";
 
 defineOptions({
   name: "DeviceScene"
@@ -91,12 +92,12 @@ const columns = [
     }
   },
   {
-    label: "生产日期",
+    label: "缺陷图片",
-    property: "createTime"
+    slot: "image"
   },
   {
-    type: "action",
+    label: "生产日期",
-    label: "操作"
+    property: "createTime"
   }
 ];
 
@@ -218,7 +219,7 @@ onMounted(() => {
               <el-option label="车间2" value="车间2" />
             </el-select>
           </el-form-item>
-          <el-form-item label="设备">
+          <!-- <el-form-item label="设备">
             <el-select
               v-model="formData.deviceSceneItem"
               placeholder="设备"
@@ -231,28 +232,30 @@ onMounted(() => {
                 :key="k"
               />
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
         </el-form>
       </div>
       <div class="flex justify-between deviceScene_body">
         <div class="left scene_box">
           <div class="flex items-center deviceScene_box_top">
             <div class="bg_icon">
-              <i class="iconfont icon-jiwei"></i>
+              <i class="iconfont icon-jiwei" />
             </div>
             <span>机位：</span><span>{{ formData.deviceSceneItem }}</span>
           </div>
-          <canvas
+          <img :src="jiankongtu1" class="w-full h-[90%]" />
+
+          <!-- <canvas
             ref="canvasRef"
             :width="clipPathData.width"
             :height="clipPathData.height"
-          />
+          /> -->
         </div>
         <div class="right scene_box">
           <div class="flex items-center justify-between alarm_head">
             <span class="label">缺陷告警</span>
             <el-button type="primary" @click="showFullAlert"
-              >全部告警</el-button
+              >历史告警</el-button
             >
           </div>
           <ul class="alarm_body">
@@ -286,12 +289,19 @@ onMounted(() => {
     <el-dialog
       top="5vh"
       v-model="isShowFull"
-      title="全部告警"
+      title="历史告警"
+      append-to-body
       width="70vw"
       :style="{
         borderRadius: '6px'
       }"
     >
+      <template #header="{ titleId, titleClass }">
+        <div class="my-header">
+          <img :src="historyAlarm" class="w-[26px] h-[26px]" />
+          <h4 :id="titleId" :class="titleClass">历史告警</h4>
+        </div>
+      </template>
       <div class="alarm_dialog_head">
         <el-form
           ref="formRef"
@@ -333,15 +343,29 @@ onMounted(() => {
         element-loading-svg-view-box="-10, -10, 50, 50"
       >
         <template v-if="pagination.total > 0">
-          <BaseTable
+          <pure-table
-            :total="pagination.total"
+            showOverflowTooltip
-            :pageSize="pagination.pageSize"
+            alignWhole="center"
-            :dataSource="alarmListData"
+            :data="alarmListData"
             :columns="columns"
-            :page="pagination.currentPage"
+            :header-cell-style="{
-            :isFixedPagination="false"
+              background: 'rgba(21, 77, 221, 0.10)',
+              color: 'rgba(51, 51, 51, 1)'
+            }"
+            :pagination="pagination"
           >
-            <template v-slot:actionBar="{ row }">
+            <template #image="{ row, index }">
+              <el-image
+                preview-teleported
+                loading="lazy"
+                :src="row.image"
+                :preview-src-list="[jiankongtu1]"
+                :initial-index="index"
+                fit="cover"
+                class="w-[96px] h-[56px]"
+              />
+            </template>
+            <template #operation="{ row }">
               <ul class="table_action_box">
                 <li class="flex items-center" @click="handleDetail(row)">
                   <el-button text>
@@ -357,7 +381,7 @@ onMounted(() => {
                 </li>
               </ul>
             </template>
-          </BaseTable>
+          </pure-table>
         </template>
       </div>
     </el-dialog>
@@ -403,4 +427,10 @@ onMounted(() => {
 
 <style lang="scss">
 @import url("./scene.scss");
+.my-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+}
 </style>

src/views/workbench/index.vue

@@ -316,7 +316,7 @@ const dataViewList = [
       >
         <el-card class="line-card" shadow="always" :body-style="{ padding: 0 }">
           <span :class="headStyles" class="mt-3 ml-4 mb-0">消息通知</span>
-          <div class="flex justify-between h-[297px]">
+          <div class="flex justify-between h-[285px]">
             <Notify />
           </div>
         </el-card>

vite.config.ts

@@ -51,7 +51,14 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
       port: VITE_PORT,
       host: "0.0.0.0",
       // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
-      proxy: {}
+      proxy: {
+        "/api/": {
+          target: "http://192.168.10.21:8000/",
+          changeOrigin: true,
+          secure: false
+          // rewrite: path => path.replace(/^\/api/, "")
+        }
+      }
     },
     plugins: getPluginsList(command, VITE_CDN, VITE_COMPRESSION),
     // https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-options