Yaxin
/
LNYD_Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 页面修改

Browse Source
develop
JINGYJ 2 years ago
parent ef0e428139
commit 4587d9bdda
14 changed files with 1057 additions and 41 deletions
Show Stats Download Patch File Download Diff File

2
index.html
Unescape Escape View File

@ -8,7 +8,7 @@
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<title>pure-admin-thin</title>
<title>LNYD</title>
<link rel="icon" href="/favicon.ico" />
<script>
window.process = {};

21
mock/asyncRoutes.ts
Unescape Escape View File

@ -119,6 +119,25 @@ const warningRouter = {
]
};
const enterpriseRouter = {
path: "/enterprise",
meta: {
title: "企业管理",
icon: "lollipop",
rank: 15
},
children: [
{
path: "/enterprise/index",
name: "EnterpriseList",
meta: {
title: "企业列表",
roles: ["admin", "common"]
}
}
]
};
export default [
{
url: "/getAsyncRoutes",
@ -126,7 +145,7 @@ export default [
response: () => {
return {
success: true,
data: [projectRouter, modelRouter, warningRouter]
data: [projectRouter, modelRouter, warningRouter, enterpriseRouter]
};
}
}

2
package.json
Unescape Escape View File

@ -129,7 +129,5 @@
"stable": "*"
}
},
"repository": "git@github.com:pure-admin/pure-admin-thin.git",
"author": "xiaoxian521",
"license": "MIT"
}

4
src/layout/components/navbar.vue
Unescape Escape View File

@ -62,13 +62,13 @@ const {
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- <span
<span
class="set-icon navbar-bg-hover"
title="打开项目配置"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />
</span> -->
</span>
</div>
</div>
</template>

16
src/main.ts
Unescape Escape View File

@ -5,11 +5,11 @@ import ElementPlus from "element-plus";
import { getServerConfig } from "./config";
import { createApp, Directive } from "vue";
import { MotionPlugin } from "@vueuse/motion";
// import { useEcharts } from "@/plugins/echarts";
import { useEcharts } from "@/plugins/echarts";
import { injectResponsiveStorage } from "@/utils/responsive";
// import Table from "@pureadmin/table";
// import PureDescriptions from "@pureadmin/descriptions";
import Table from "@pureadmin/table";
import PureDescriptions from "@pureadmin/descriptions";
// 引入重置样式
import "./style/reset.scss";
@ -49,9 +49,11 @@ getServerConfig(app).then(async config => {
app.use(router);
await router.isReady();
injectResponsiveStorage(app, config);
app.use(MotionPlugin).use(ElementPlus);
// .use(useEcharts);
// .use(Table);
// .use(PureDescriptions);
app
.use(MotionPlugin)
.use(ElementPlus)
.use(useEcharts)
.use(Table)
.use(PureDescriptions);
app.mount("#app");
});

16
src/router/modules/remaining.ts
Unescape Escape View File

@ -30,12 +30,22 @@ export default [
{
path: "/screen",
name: "Screen",
component: () => import("@/views/error/404.vue"),
meta: {
title: "数据大屏",
icon: "lollipop",
// showLink: true,
rank: 102
}
rank: 103
},
children: [
{
path: "/screen",
name: "Sereen",
component: () => import("@/views/error/404.vue"),
meta: {
title: "数据大屏",
roles: ["admin", "common"]
}
}
]
}
] as Array<RouteConfigsTable>;

79
src/views/enterprise/index.vue
Unescape Escape View File

@ -0,0 +1,79 @@
<script setup lang="ts">
import { ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { useWindowSize } from "@vueuse/core";
defineOptions({
name: "EnterpriseList"
});
const count = ref(3);
const { height } = useWindowSize();
const input = ref("");
const loading = ref(true);
setTimeout(() => {
loading.value = !loading.value;
}, 800);
const add = () => {
count.value++;
};
</script>
<template>
<div class="main">
<div class="w-full flex justify-between mb-4">
<el-button :icon="useRenderIcon(AddFill)" @click="add">
新建企业
</el-button>
</div>
<div class="w-[37%] h-full float-left">
<el-card
class="box-card"
:style="{ height: `calc(${height}px - 10vh - 50px)` }"
>
<template #header>
<div class="card-header flex justify-between">
<span class="w-[20%]">企业列表</span>
<el-input
v-model="input"
placeholder="Please input"
class="w-[70%]"
clearable
/>
</div>
</template>
<el-scrollbar max-height="400px">
<p v-for="item in count" :key="item" class="scrollbar-demo-item">
{{ "电子有限公司" }}
</p>
</el-scrollbar>
</el-card>
</div>
<div class="float-right w-[62%]">
<el-card
class="box-card"
:style="{ height: `calc(${height}px - 10vh - 50px)` }"
>
<template #header>
<div class="card-header flex justify-between">
<span>企业详情</span>
<el-button :icon="useRenderIcon(AddFill)" @click="add">
编辑
</el-button>
</div>
</template>
<div class="flex flex-col">
<el-skeleton animated :loading="loading">
<span>企业全称：{{ "电子有限公司" }}</span>
<span>ID：{{ "电子有限公司" }}</span>
</el-skeleton>
<el-skeleton :rows="5" animated :loading="loading">
<span>企业全称：{{ "电子有限公司" }}</span>
<span>ID：{{ "电子有限公司" }}</span>
</el-skeleton>
</div>
</el-card>
</div>
</div>
</template>

158
src/views/project/details/components/Bar.vue
Unescape Escape View File

@ -0,0 +1,158 @@
<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
delay,
useDark,
useECharts,
type EchartOptions
} from "@pureadmin/utils";
import * as echarts from "echarts/core";
const { isDark } = useDark();
const theme: EchartOptions["theme"] = computed(() => {
return isDark.value ? "dark" : "light";
});
const barChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
theme
});
setOptions(
{
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {
bottom: "20px",
right: "30px",
left: "40px"
},
legend: {
//@ts-expect-error
right: true,
data: ["watchers", "fork", "star"]
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0
// width: "70",
// overflow: "truncate"
},
data: ["2021", "2022", "2023"],
triggerEvent: true
}
],
yAxis: [
{
type: "value",
triggerEvent: true
},
{
type: "value",
splitLine: {
//分割线配置
show: false
},
triggerEvent: true
}
],
series: [
// {
// name: "watchers",
// type: "bar",
// barWidth: "10%",
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "#e6a23c"
// },
// {
// offset: 1,
// color: "#eebe77"
// }
// ])
// },
// data: [200, 320, 800]
// },
// {
// name: "fork",
// type: "bar",
// barWidth: "15%",
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "#f56c6c"
// },
// {
// offset: 1,
// color: "#f89898"
// }
// ])
// },
// data: [1600, 2460, 4500]
// },
{
name: "star",
type: "bar",
barWidth: "15%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#409EFF"
},
{
offset: 1,
color: "#53a7ff"
}
])
},
data: [1450, 3620, 7500]
},
{
//折线(右边数据)
name: "总量",
type: "line",
yAxisIndex: 1,
data: [160, 246, 450],
itemStyle: {
//折线颜色
color: "#2A47F8"
}
}
],
addTooltip: true
},
{
name: "click",
callback: params => {
console.log("click", params);
}
}
);
watch(
() => useAppStoreHook().getSidebarStatus,
() => {
delay(600).then(() => resize());
}
);
</script>
<template>
<div ref="barChartRef" style="width: 100%; height: 35vh" />
</template>

294
src/views/project/details/components/DialogForm.vue
Unescape Escape View File

@ -0,0 +1,294 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { message } from "@/utils/message";
import { FormInstance } from "element-plus";
import ReCol from "@/components/ReCol";
// const SELECT_OPTIONS = [
// { label: "网关", value: 1 },
// { label: "人工智能", value: 2 },
// { label: "CVM", value: 3 },
// { label: "防火墙", value: 4 },
// { label: "未知", value: 5 }
// ];
const props = defineProps({
visible: {
type: Boolean,
default: false
},
data: {
type: Object,
default: () => {
return {};
}
}
});
const ruleFormRef = ref<FormInstance>();
const formVisible = ref(false);
const formData = ref(props.data);
const title = ref("添加检查项模型");
const activeStep = ref(0);
// const textareaValue = ref("");
const tableData = [
{
date: "2016-05-03",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036"
},
{
date: "2016-05-02",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036"
},
{
date: "2016-05-04",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036"
},
{
date: "2016-05-01",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036"
},
{
date: "2016-05-08",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036"
},
{
date: "2016-05-06",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036"
},
{
date: "2016-05-07",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036"
}
];
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate(valid => {
if (valid) {
message("提交成功", { type: "success" });
formVisible.value = false;
resetForm(formEl);
}
});
};
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
const closeDialog = () => {
formVisible.value = false;
activeStep.value = 0;
resetForm(ruleFormRef.value);
};
const nextStep = () => {
if (activeStep.value++ > 2) activeStep.value = 0;
};
const emit = defineEmits(["update:visible"]);
watch(
() => formVisible.value,
val => {
emit("update:visible", val);
}
);
watch(
() => props.visible,
val => {
formVisible.value = val;
}
);
watch(
() => props.data,
val => {
formData.value = val;
}
);
const rules = {
name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
};
</script>
<template>
<el-dialog
v-model="formVisible"
:title="title"
:width="1080"
draggable
:before-close="closeDialog"
>
<el-row :gutter="30" class="mb-12">
<re-col :value="30" :xs="24" :sm="24">
<el-steps
:space="200"
:active="activeStep"
finish-status="success"
simple
>
<el-step title="选择模型" />
<el-step title="选择算力" />
<el-step title="支付" />
</el-steps>
</re-col>
</el-row>
<!-- 表单内容 -->
<el-form
ref="ruleFormRef"
:model="formData"
:rules="rules"
label-width="100px"
v-if="activeStep == 0"
>
<el-row :gutter="30">
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="检测方向" prop="name">
<el-input
v-model="formData.name"
:style="{ width: '480px' }"
placeholder="请选择检测方向"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="检测类型" prop="leader">
<el-input
v-model="formData.leader"
:style="{ width: '480px' }"
placeholder="请选择检测类型"
/>
</el-form-item>
</re-col>
<re-col>
<el-table :data="tableData" style="width: 100%" height="300" border>
<el-table-column type="selection" width="55" />
<el-table-column prop="date" label="Date" width="150" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="state" label="State" />
<el-table-column prop="city" label="City" />
<el-table-column prop="address" label="Address" />
<el-table-column prop="zip" label="Zip" />
</el-table>
</re-col>
</el-row>
</el-form>
<el-form
ref="ruleFormRef"
:model="formData"
:rules="rules"
label-width="160px"
v-if="activeStep == 1"
>
<el-row :gutter="30">
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="选择算力资源" prop="name">
<el-input
v-model="formData.name"
:style="{ width: '480px' }"
placeholder="请选择检测方向"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="选择购买时间" prop="leader">
<el-input
v-model="formData.leader"
:style="{ width: '480px' }"
placeholder="请选择检测类型"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="选择GPU数量（核）" prop="name">
<el-input
v-model="formData.name"
:style="{ width: '480px' }"
placeholder="请选择检测方向"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="选择GPU数量（卡）" prop="leader">
<el-input
v-model="formData.leader"
:style="{ width: '480px' }"
placeholder="请选择检测类型"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="选择内存数量（GB）" prop="name">
<el-input
v-model="formData.name"
:style="{ width: '480px' }"
placeholder="请选择检测方向"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="选择节点数量" prop="leader">
<el-input
v-model="formData.leader"
:style="{ width: '480px' }"
placeholder="请选择检测类型"
/>
</el-form-item>
</re-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取消</el-button>
<el-button @click="nextStep" v-if="activeStep < 2">下一步</el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<style scoped lang="scss">
.dialog-footer {
text-align: center;
}
</style>

305
src/views/project/details/components/ModelCard.vue
Unescape Escape View File

@ -0,0 +1,305 @@
<script setup lang="ts">
import { ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";
defineOptions({
name: "ModelCard"
});
// interface CardProductType {
// type: number;
// isSetup: boolean;
// description: string;
// name: string;
// }
const modelStep = ref(1);
const props = defineProps({
modelInfo: {
type: Object
}
});
console.log(props);
</script>
<template>
<div>
<div class="list-item">
<div class="list-item-header mb-[18px]">
<span class="font-bold">{{ "苏胜天OCR文字识别模型" }}</span>
<span>{{ "算力设备：" }}</span>
<span>
<el-button
type="primary"
:icon="useRenderIcon(AddFill)"
class="button"
text
>历史推理</el-button
>
<el-button
type="primary"
:icon="useRenderIcon(AddFill)"
class="button"
text
>模型设置</el-button
>
</span>
</div>
<div class="list-item-content">
<div class="list-item-content-left">
<div class="list-item-content-left-progress">
<el-progress
type="circle"
stroke-linecap="butt"
:stroke-width="10"
:width="80"
:percentage="0"
/>
<p>{{ "GPU占用（核）" }}</p>
</div>
<div class="list-item-content-left-progress">
<el-progress
type="circle"
stroke-linecap="butt"
:stroke-width="10"
:width="80"
:percentage="30"
/>
<p>{{ "GPU占用（核）" }}</p>
</div>
<div class="list-item-content-left-progress">
<el-progress
type="circle"
stroke-linecap="butt"
:stroke-width="10"
:width="80"
:percentage="60"
/>
<p>{{ "GPU占用（核）" }}</p>
</div>
<div class="list-item-content-left-progress">
<el-progress
type="circle"
stroke-linecap="butt"
:stroke-width="10"
:width="80"
:percentage="80"
/>
<p>{{ "GPU占用（核）" }}</p>
</div>
</div>
<div class="list-item-content-right">
<div class="list-item-content-right-first" v-if="modelStep == 1">
<el-button
size="large"
type="success"
:icon="useRenderIcon(AddFill)"
@click="modelStep = 2"
>
添加推理图片或视频
</el-button>
</div>
<div class="list-item-content-right-second" v-if="modelStep == 2">
<div>
<span class="mr-10">{{ "待处理文件：99999" }}</span>
<el-button
size="large"
type="success"
:icon="useRenderIcon(AddFill)"
>
继续上传
</el-button>
</div>
<div>
<el-button
size="large"
type="success"
:icon="useRenderIcon(AddFill)"
@click="modelStep = 3"
>
开始推理
</el-button>
</div>
</div>
<div class="list-item-content-right-third" v-if="modelStep == 3">
<div class="list-item-content-right-third-header">
<div class="w-60">
<span>{{ "snadjkas" }}</span>
<el-progress
:text-inside="true"
:stroke-width="40"
:percentage="50"
striped
striped-flow
status="exception"
>
<span>推理中···</span>
</el-progress>
</div>
<div>
<span>{{ "缺陷数：99999" }}</span>
</div>
<div>
<el-button
size="large"
type="danger"
:icon="useRenderIcon(AddFill)"
@click="modelStep = 2"
>
终止推理
</el-button>
</div>
</div>
<div class="list-item-content-right-third-image">
<el-image
style="width: 100px; height: 100px"
src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
:zoom-rate="1.2"
:initial-index="1"
:preview-src-list="[
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
]"
fit="cover"
/>
<el-image
style="width: 100px; height: 100px"
src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
:zoom-rate="1.2"
:initial-index="1"
:preview-src-list="[
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
]"
fit="cover"
/>
<el-image
style="width: 100px; height: 100px"
src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
:zoom-rate="1.2"
:initial-index="1"
:preview-src-list="[
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
]"
fit="cover"
/>
<el-image
style="width: 100px; height: 100px"
src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
:zoom-rate="1.2"
:initial-index="1"
:preview-src-list="[
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
]"
fit="cover"
/>
<el-image
style="width: 100px; height: 100px"
src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
:zoom-rate="1.2"
:initial-index="1"
:preview-src-list="[
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
]"
fit="cover"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.list-item {
display: flex;
flex-direction: column;
height: 300px;
padding: 10px;
margin-bottom: 10px;
background: #fafafa;
}
// .list-item + .list-item {
// margin-top: 10px;
// }
.list-item .list-item-header {
display: flex;
justify-content: space-between;
}
.list-item .list-item-content {
display: flex;
flex: 1;
justify-content: space-between;
}
.list-item .list-item-content .list-item-content-left {
display: flex;
flex-wrap: wrap;
width: 500px;
margin-right: 50px;
}
.list-item
.list-item-content
.list-item-content-left
.list-item-content-left-progress {
flex: 50%;
}
.list-item .list-item-content .list-item-content-right {
display: flex;
flex: 1;
}
.list-item
.list-item-content
.list-item-content-right
.list-item-content-right-first {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
.list-item
.list-item-content
.list-item-content-right
.list-item-content-right-second {
display: flex;
flex: 1;
align-items: center;
justify-content: space-around;
}
.list-item
.list-item-content
.list-item-content-right
.list-item-content-right-third {
display: flex;
flex: 1;
flex-direction: column;
}
.list-item
.list-item-content
.list-item-content-right
.list-item-content-right-third
.list-item-content-right-third-header {
display: flex;
flex: 1;
align-items: center;
justify-content: space-around;
height: 30%;
}
.list-item
.list-item-content
.list-item-content-right
.list-item-content-right-third
.list-item-content-right-third-image {
display: flex;
flex: 1;
align-items: center;
justify-content: space-around;
}
</style>

120
src/views/project/details/index.vue
Unescape Escape View File

@ -1,11 +1,127 @@
<script setup lang="ts">
import dialogForm from "./components/DialogForm.vue";
import { isEmpty } from "@pureadmin/utils";
import { ref, onMounted, computed } from "vue";
import { useWindowSize } from "@vueuse/core";
import { useRoute } from "vue-router";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import ModelCard from "./components/ModelCard.vue";
import Bar from "./components/Bar.vue";
import AddFill from "@iconify-icons/ri/add-circle-line";
defineOptions({
name: "ProjectDetails"
});
const route = useRoute();
const getParameter = isEmpty(route.params) ? route.query : route.params;
console.log(getParameter);
const INITIAL_DATA = {
name: "",
status: "",
description: "",
type: "",
mark: "",
leader: "",
phone: ""
};
const formDialogVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });
const { height } = useWindowSize();
const count = ref(5);
const echartsLoading = ref(true);
const loading = ref(false);
const noMore = computed(() => count.value >= 10);
const disabled = computed(() => loading.value || noMore.value);
const load = () => {
loading.value = true;
setTimeout(() => {
count.value += 2;
loading.value = false;
}, 2000);
};
setTimeout(() => {
echartsLoading.value = !echartsLoading.value;
}, 800);
onMounted(() => {
// formDialogVisible.value = true;
});
</script>
<template>
<div class="container">
<h1>算法管理</h1>
<div class="main">
<el-row :gutter="24">
<el-col :value="24" :xs="24" :sm="24" class="mb-[18px]">
<el-card shadow="always">
<template #header>
<div>
<span class="font-bold">项目信息</span>
</div>
</template>
<div class="flex align-baseline justify-around">
<div class="flex flex-col justify-around">
<span>项目名称：{{ "文字识别" }}</span>
<span>负责人：{{ "识别线主管" }}</span>
<span>联系方式：{{ "13811111111" }}</span>
</div>
<div>
<el-progress
type="circle"
stroke-linecap="butt"
:stroke-width="30"
:percentage="80"
/>
<p>{{ "GPU占用（核）" }}</p>
</div>
<el-skeleton animated :loading="echartsLoading">
<template #default>
<Bar style="width: 240px; height: 240px" />
</template>
</el-skeleton>
</div>
</el-card>
</el-col>
<el-col :value="24" :xs="24" :sm="24">
<el-card
shadow="always"
:style="{ height: `calc(${height}px - 30vh - 100px)` }"
>
<template #header>
<div class="flex justify-between">
<span class="font-bold">模型列表</span>
<el-button
type="primary"
:icon="useRenderIcon(AddFill)"
class="button"
@click="formDialogVisible = true"
>新建模型</el-button
>
</div>
</template>
<el-scrollbar
class="infinite-list-wrapper"
:height="`calc(${height}px - 35vh - 150px)`"
>
<div
v-infinite-scroll="load"
class="list"
:infinite-scroll-disabled="disabled"
>
<template v-for="i in count" :key="i">
<ModelCard :modelInfo="INITIAL_DATA" />
</template>
</div>
<p v-if="loading">Loading...</p>
<p v-if="noMore">No more</p>
</el-scrollbar>
</el-card>
</el-col>
</el-row>
<dialogForm v-model:visible="formDialogVisible" :data="formData" />
</div>
</template>
<style scoped lang="scss">
.infinite-list-wrapper {
// height: 720px;
text-align: center;
}
</style>

2
src/views/project/list/components/Card.vue
Unescape Escape View File

@ -142,7 +142,7 @@ const cardInfoClass = computed(() => [
display: flex;
align-items: center;
justify-content: center;
width: 260px;
width: 250px;
height: 150px;
font-size: 32px;
color: #0052d9;

49
src/views/project/list/components/DialogForm.vue
Unescape Escape View File

@ -3,13 +3,13 @@ import { ref, watch } from "vue";
import { message } from "@/utils/message";
import { FormInstance } from "element-plus";
const SELECT_OPTIONS = [
{ label: "网关", value: 1 },
{ label: "人工智能", value: 2 },
{ label: "CVM", value: 3 },
{ label: "防火墙", value: 4 },
{ label: "未知", value: 5 }
];
// const SELECT_OPTIONS = [
// { label: "网关", value: 1 },
// { label: "人工智能", value: 2 },
// { label: "CVM", value: 3 },
// { label: "防火墙", value: 4 },
// { label: "未知", value: 5 }
// ];
const props = defineProps({
visible: {
@ -28,7 +28,7 @@ const ruleFormRef = ref<FormInstance>();
const formVisible = ref(false);
const formData = ref(props.data);
const textareaValue = ref("");
// const textareaValue = ref("");
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
@ -81,7 +81,7 @@ const rules = {
<template>
<el-dialog
v-model="formVisible"
title="新建产品"
title="新建项目"
:width="680"
draggable
:before-close="closeDialog"
@ -93,27 +93,42 @@ const rules = {
:rules="rules"
label-width="100px"
>
<el-form-item label="产品名称" prop="name">
<el-form-item label="项目名称" prop="name">
<el-input
v-model="formData.name"
:style="{ width: '480px' }"
placeholder="请输入产品名称"
placeholder="请输入项目名称"
/>
</el-form-item>
<el-form-item label="产品状态" prop="status">
<el-form-item label="项目负责人" prop="leader">
<el-input
v-model="formData.leader"
:style="{ width: '480px' }"
placeholder="请输入项目负责人"
/>
</el-form-item>
<el-form-item label="联系方式" prop="phone">
<el-input
v-model="formData.phone"
:style="{ width: '480px' }"
placeholder="请输入联系方式"
/>
</el-form-item>
<!-- <el-form-item label="产品状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio label="0">已停用</el-radio>
<el-radio label="1">已启用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="产品描述" prop="description">
</el-form-item> -->
<el-form-item label="项目简介" prop="description">
<el-input
v-model="formData.description"
type="textarea"
:style="{ width: '480px' }"
placeholder="请输入产品描述"
placeholder="请输入项目简介"
/>
</el-form-item>
<el-form-item label="产品类型" prop="type">
<!-- <el-form-item label="产品类型" prop="type">
<el-select
v-model="formData.type"
clearable
@ -136,7 +151,7 @@ const rules = {
:style="{ width: '480px' }"
placeholder="请输入内容"
/>
</el-form-item>
</el-form-item> -->
</el-form>
<template #footer>
<el-button @click="closeDialog">取消</el-button>

30
src/views/project/list/index.vue
Unescape Escape View File

@ -5,6 +5,9 @@ import { message } from "@/utils/message";
import { ElMessageBox } from "element-plus";
import { ref, onMounted, nextTick } from "vue";
import dialogForm from "./components/DialogForm.vue";
import { useRouter } from "vue-router";
import { isString } from "@pureadmin/utils";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Search from "@iconify-icons/ep/search";
import AddFill from "@iconify-icons/ri/add-circle-line";
@ -29,7 +32,9 @@ const INITIAL_DATA = {
status: "",
description: "",
type: "",
mark: ""
mark: "",
leader: "",
phone: ""
};
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
@ -90,9 +95,24 @@ const handleManageProduct = product => {
formData.value = { ...product, status: product?.isSetup ? "1" : "0" };
});
};
const router = useRouter();
const handleProductDetail = product => {
console.log("111");
Object.keys(product).forEach(param => {
if (!isString(product[param])) {
product[param] = product[param].toString();
}
});
// 保存信息到标签页
useMultiTagsStoreHook().handleTags("push", {
path: `/project/details`,
name: "ProjectDetails",
query: product,
meta: {
title: `项目详情`,
showLink: false
}
});
router.push({ name: "ProjectDetails", query: product });
// formDialogVisible.value = true;
// nextTick(() => {
// formData.value = { ...product, status: product?.isSetup ? "1" : "0" };
@ -107,12 +127,12 @@ const handleProductDetail = product => {
:icon="useRenderIcon(AddFill)"
@click="formDialogVisible = true"
>
新建产品
新建项目
</el-button>
<el-input
style="width: 300px"
v-model="searchValue"
placeholder="请输入产品名称"
placeholder="请输入项目名称"
clearable
v-if="false"
>

Write Preview
Loading…
Cancel
Save