From 002bf14a27efa3c491179fe58b7184dcb48ad298 Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Wed, 12 Jun 2024 10:21:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20mock=E7=9B=B8=E5=85=B3=E8=B0=83?=
=?UTF-8?q?=E6=95=B4=E8=A1=A5=E5=85=85=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 4 +--
mock/alarm.ts | 4 +--
mock/modelList.ts | 32 +++++++++++++++++++
mock/pools/deviceSceneData.ts | 2 +-
mock/screenData.ts | 18 -----------
package.json | 3 +-
src/api/list.ts | 11 +++----
.../dataScreen/views/modelList/modelList.scss | 4 +--
.../dataScreen/views/modelList/modelList.vue | 32 +++++++++++++------
src/router/modules/deviceScene.ts | 4 +--
src/views/device/scene.scss | 1 +
src/views/modelList/index.vue | 6 ++--
12 files changed, 73 insertions(+), 48 deletions(-)
create mode 100644 mock/modelList.ts
diff --git a/index.html b/index.html
index 92280e0..90ba2dc 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-01-12 14:35:28
* @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-03-21 17:55:12
+ * @LastEditTime: 2024-03-25 11:16:58
* @FilePath: \General-AI-Platform-Web-Client\index.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -21,7 +21,7 @@
<!-- update 2024-01-21 16:41 -->
<link
rel="stylesheet"
- href="//at.alicdn.com/t/c/font_4412653_eop55bznk7u.css"
+ href="//at.alicdn.com/t/c/font_4412653_qjjikxo6f6p.css"
/>
<script src="https://threejs.org/build/three.js"></script>
diff --git a/mock/alarm.ts b/mock/alarm.ts
index 10be7c4..bd8be7e 100644
--- a/mock/alarm.ts
+++ b/mock/alarm.ts
@@ -2,9 +2,9 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-01-17 13:54:43
* @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-02-04 16:45:14
+ * @LastEditTime: 2024-04-16 09:29:01
* @FilePath: \General-AI-Platform-Web-Client\mock\alarm.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description: mock的告警数据
*/
import { MockMethod } from "vite-plugin-mock";
import { alarmListData } from "./pools/alarmData";
diff --git a/mock/modelList.ts b/mock/modelList.ts
new file mode 100644
index 0000000..17dfc13
--- /dev/null
+++ b/mock/modelList.ts
@@ -0,0 +1,32 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-17 13:54:43
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-04-16 09:31:07
+ * @FilePath: \General-AI-Platform-Web-Client\mock\alarm.ts
+ * @Description: mock的告警数据
+ */
+import { MockMethod } from "vite-plugin-mock";
+import { modelListData } from "./pools/modelListData";
+import { fetchCurrPageByList } from "./utils/apiMock";
+
+export default [
+ {
+ url: "/model/list",
+ method: "post",
+ response: req => {
+ const { page, pageSize } = req.body;
+ // console.log(req);
+ return {
+ ...fetchCurrPageByList({
+ ...modelListData,
+ data: {
+ ...modelListData.data,
+ page,
+ pageSize: pageSize || 10
+ }
+ })
+ };
+ }
+ }
+] as MockMethod[];
diff --git a/mock/pools/deviceSceneData.ts b/mock/pools/deviceSceneData.ts
index 533f387..c012e8b 100644
--- a/mock/pools/deviceSceneData.ts
+++ b/mock/pools/deviceSceneData.ts
@@ -42,7 +42,7 @@ function fetchList(): Record<string, any>[] {
createTime: generateRandomDateTimeByYear(2023),
updateTime: "2023-10-17T02:35:41.14308Z",
name: "GigEPRO_gmcam_01_00" + (i + 1),
- alarmList: fetchSceneItemsList({ maxCount: 3 })
+ alarmList: fetchSceneItemsList({ maxCount: 4 })
});
}
return currList;
diff --git a/mock/screenData.ts b/mock/screenData.ts
index 4cd378a..d9f347d 100644
--- a/mock/screenData.ts
+++ b/mock/screenData.ts
@@ -74,23 +74,5 @@ export default [
// console.log(req);
return fetchMockSuccessFullByOther({ data: finalServerList });
}
- },
- {
- url: "/getModelBoxList",
- method: "post",
- response: req => {
- const { page, pageSize } = req.body;
- // console.log(req);
- return {
- ...fetchCurrPageByList({
- ...modelListData,
- data: {
- ...modelListData.data,
- page,
- pageSize: pageSize || 10
- }
- })
- };
- }
}
] as MockMethod[];
diff --git a/package.json b/package.json
index c47060f..7816053 100644
--- a/package.json
+++ b/package.json
@@ -60,8 +60,7 @@
"vue-router": "^4.2.2",
"vue-types": "^5.1.0",
"vue-waterfall-plugin-next": "^2.2.1",
- "vue3-scale-box": "^0.1.9",
- "安装插件": "link://安装插件"
+ "vue3-scale-box": "^0.1.9"
},
"devDependencies": {
"@commitlint/cli": "^17.6.6",
diff --git a/src/api/list.ts b/src/api/list.ts
index 5822da0..d206dd2 100644
--- a/src/api/list.ts
+++ b/src/api/list.ts
@@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-01-15 14:45:56
* @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-03-20 14:26:49
+ * @LastEditTime: 2024-04-16 09:40:18
* @FilePath: \General-AI-Platform-Web-Client\src\api\list.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@@ -33,12 +33,11 @@ export const updateServerBoxList = (data?: object) => {
return http.request<Result>("post", "/updateServerBoxList", { data });
};
-export const getModelList = (data?: object) => {
- return http.request<Result>("post", "/getModelList", { data });
+export const postModelList = (data?: object) => {
+ return http.request<Result>("post", "/model/list", { data });
};
-
-export const getModelBoxList = (data?: object) => {
- return http.request<Result>("post", "/getModelBoxList", { data });
+export const getModelList = (data?: object) => {
+ return http.request<Result>("post", "getModelList", { data });
};
/** 告警列表 */
diff --git a/src/pages/dataScreen/views/modelList/modelList.scss b/src/pages/dataScreen/views/modelList/modelList.scss
index 541c24e..c567070 100644
--- a/src/pages/dataScreen/views/modelList/modelList.scss
+++ b/src/pages/dataScreen/views/modelList/modelList.scss
@@ -1,5 +1,5 @@
-.modelList {
- padding: 32px;
+.ds_modelList {
+ padding: 0 32px;
.banner_side {
width: 29px;
height: 870px;
diff --git a/src/pages/dataScreen/views/modelList/modelList.vue b/src/pages/dataScreen/views/modelList/modelList.vue
index 43c3c22..090207e 100644
--- a/src/pages/dataScreen/views/modelList/modelList.vue
+++ b/src/pages/dataScreen/views/modelList/modelList.vue
@@ -1,6 +1,6 @@
<script setup lang="ts">
// import { getList } from "@/api/list";
-import { getModelBoxList } from "@/api/list";
+import { postModelList } from "@/api/list";
import error from "@/assets/dataScreen/modelList/error.png";
import loading from "@/assets/dataScreen/modelList/loading.png";
import { ElLoading } from "element-plus";
@@ -56,12 +56,13 @@ const options = reactive({
// 是否懒加载
lazyload: true
});
-
+const pageTotal = ref(0);
const page = ref(1);
const list = ref([]);
-const pageSize = ref(20);
+const pageSize = ref(100);
const loadingInstance = ref();
const modelDialogVisible = ref(false);
+const isFinish = ref(false);
const INITIAL_DATA = {
index: null,
industry: "",
@@ -78,16 +79,27 @@ const modelInfo = ref({ ...INITIAL_DATA });
/** 加载更多 */
function handleLoadMore() {
+ console.log(list.value.length, "handleLoadMore", pageTotal.value);
+ isFinish.value = pageTotal.value <= list.value.length;
+ if (!isFinish.value) {
+ loadList();
+ } else {
+ console.log("加载完成");
+ }
+}
+
+function loadList() {
loadingInstance.value = ElLoading.service({
target: ".content",
background: "transparent",
text: "加载中"
});
- getModelBoxList({
+ postModelList({
page: page.value,
pageSize: pageSize.value
}).then(res => {
console.log(res);
+ pageTotal.value = res.data?.total || 0;
setTimeout(() => {
list.value.push(...res.data.list);
page.value += 1;
@@ -110,18 +122,18 @@ const handleBoxDetail = product => {
};
onMounted(() => {
- handleLoadMore();
+ loadList();
});
</script>
<template>
- <div class="flex justify-between modelList">
+ <div class="flex justify-between ds_modelList">
<div class="banner_side" />
<div class="model-list-mid">
<div class="model-list-title ff1">
- 苏胜天大模型衍生模型库<span>{{ 256 }}</span>
+ 苏胜天大模型衍生模型库<span>{{ pageTotal }}</span>
</div>
- <div class="model-list-box w-full">
+ <div class="w-full model-list-box">
<el-scrollbar height="810px" class="content">
<Waterfall :list="list" v-bind="options">
<template #item="{ item }">
@@ -167,7 +179,7 @@ onMounted(() => {
模型版本:<span>{{ modelInfo.version }}</span
>适用行业:<span>{{ modelInfo.industry }}</span>
</div>
- <div class="modelListDialogContent mb-3">
+ <div class="mb-3 modelListDialogContent">
模型状态:<span class="modelListState">{{
modelInfo.state === "在线" ? "使用中" : "未使用"
}}</span>
@@ -181,6 +193,6 @@ onMounted(() => {
</div>
</template>
-<style lang="scss" scoped>
+<style lang="scss">
@import "./modelList.scss";
</style>
diff --git a/src/router/modules/deviceScene.ts b/src/router/modules/deviceScene.ts
index 80abf85..d009673 100644
--- a/src/router/modules/deviceScene.ts
+++ b/src/router/modules/deviceScene.ts
@@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2024-03-19 15:44:27
* @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-03-20 15:50:20
+ * @LastEditTime: 2024-03-25 09:42:50
* @FilePath: \General-AI-Platform-Web-Client\src\router\modules\deviceScene.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@@ -12,7 +12,7 @@ export default {
path: "/deviceScene",
meta: {
title: $t("menus.hsdeviceScene"),
- icon: "icon-shebeiliebiao-weixuan",
+ icon: "icon-shebeixianchangweixuanzhong",
// showLink: false,
bodyClass: "deviceScene_page",
rank: 7,
diff --git a/src/views/device/scene.scss b/src/views/device/scene.scss
index 2ff3ec5..12d1535 100644
--- a/src/views/device/scene.scss
+++ b/src/views/device/scene.scss
@@ -5,6 +5,7 @@
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
border-radius: 8px;
+ height: calc(100vh - 160px);
}
.left {
width: 65.52%;
diff --git a/src/views/modelList/index.vue b/src/views/modelList/index.vue
index 7c98939..6f7f3c9 100644
--- a/src/views/modelList/index.vue
+++ b/src/views/modelList/index.vue
@@ -5,7 +5,7 @@ import { onMounted, ref } from "vue";
defineOptions({
name: "ServerList"
});
-
+// TODO 0416 卡片分页封装
const svg = `
<path class="path" d="
M 30 15
@@ -35,9 +35,9 @@ const onCurrentChange = (current: number) => {
};
const getCardListData = async () => {
try {
- const { data } = await getModelList();
+ const { data } = await getModelList({});
deviceList.value = data.list;
- console.log(data.list);
+ console.log(data, "resData", data.list);
pagination.value = {
...pagination.value,
total: data.list.length