@ -1,3 +1,3 @@ |
|||||||
VITE_BASE_API = '/remoteServer' |
VITE_BASE_API = '/remoteServer' |
||||||
VITE_SHOW_ONLINE_DEVICE = true |
VITE_SHOW_ONLINE_DEVICE = true |
||||||
VITE_APP_ENV = local |
|
||||||
|
|||||||
@ -1,3 +0,0 @@ |
|||||||
VITE_APP_ENV = cloud |
|
||||||
VITE_BASE_URL = 'http://192.168.1.3:8080' |
|
||||||
VITE_ZMQ_BASE_URL = '192.168.1.99' |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
VITE_APP_ENV = local |
|
||||||
VITE_BASE_URL = 'http://192.168.1.210:8080' |
|
||||||
VITE_ZMQ_BASE_URL = '192.168.1.210' |
|
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import Mock from 'mockjs' |
||||||
|
import type { IEngineeringOV, IEngineering } from '@/api/module/engineering/index.d' |
||||||
|
|
||||||
|
// Cache the data to ensure consistency across calls
|
||||||
|
const cachedData = Mock.mock({ |
||||||
|
'list|20': [ |
||||||
|
{ |
||||||
|
'id|+1': 1, |
||||||
|
name: '@ctitle(5, 10)', |
||||||
|
versions: 'v@integer(1, 9).@integer(0, 9).@integer(0, 9)', |
||||||
|
description: '@cparagraph(1, 3)', |
||||||
|
}, |
||||||
|
], |
||||||
|
total: 20, |
||||||
|
}) |
||||||
|
|
||||||
|
export const getEngineeringListMock = () => { |
||||||
|
return new Promise<{ list: IEngineering[]; total: number }>((resolve) => { |
||||||
|
setTimeout(() => { |
||||||
|
resolve({ |
||||||
|
list: cachedData.list.map((item: any) => ({ |
||||||
|
...item, |
||||||
|
id: String(item.id), |
||||||
|
})), |
||||||
|
total: cachedData.total, |
||||||
|
}) |
||||||
|
}, 500) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export const createEngineeringMock = (params: IEngineeringOV) => { |
||||||
|
return new Promise<{ id: string }>((resolve) => { |
||||||
|
setTimeout(() => { |
||||||
|
resolve({ |
||||||
|
id: '1', |
||||||
|
}) |
||||||
|
}, 500) |
||||||
|
}) |
||||||
|
} |
||||||
@ -1,5 +1,8 @@ |
|||||||
export interface IEngineeringList { |
export interface IEngineering { |
||||||
id: string, |
id: string |
||||||
name: string, |
versions: string |
||||||
description: string, |
name: string |
||||||
} |
description: string |
||||||
|
} |
||||||
|
|
||||||
|
export type IEngineeringOV = Omit<IEngineering, 'id' | 'versions'> |
||||||
|
|||||||
@ -0,0 +1,14 @@ |
|||||||
|
import { globalServer } from '../index' |
||||||
|
|
||||||
|
import { getEngineeringListMock, createEngineeringMock } from '@/api/modkJs/engineering' |
||||||
|
import type { IEngineeringOV, IEngineering } from './index.d' |
||||||
|
|
||||||
|
export const getEngineeringList = () => { |
||||||
|
// Use mock data
|
||||||
|
return getEngineeringListMock() |
||||||
|
} |
||||||
|
|
||||||
|
export const createEngineering = (params: IEngineeringOV) => { |
||||||
|
// Use mock data
|
||||||
|
return createEngineeringMock(params) |
||||||
|
} |
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 878 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 878 B |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,19 +1,204 @@ |
|||||||
<template> |
<template> |
||||||
<EdfsWrap class="wh-full" :title="'工程列表'"> |
<EdfsWrap class="wh-full" :title="'工程列表'" :use-scroll-bar="false"> |
||||||
<template #title-right> |
<template #title-right> |
||||||
<EdfsButton |
<!-- <el-button type="primary" @click="addEngineering" :icon="Plus">新增工程</el-button> --> |
||||||
inner-text="新增工程" |
|
||||||
type="primary" |
|
||||||
size="small" |
|
||||||
plain |
|
||||||
@click="addEngineering" |
|
||||||
/> |
|
||||||
</template> |
</template> |
||||||
|
<div class="engineering-list-container"> |
||||||
|
<div class="engineering-grid"> |
||||||
|
<!-- Add Engineering Card --> |
||||||
|
<div class="engineering-card add-card" @click="addEngineering"> |
||||||
|
<div class="add-card-content"> |
||||||
|
<el-icon :size="48" class="add-icon"> |
||||||
|
<Plus /> |
||||||
|
</el-icon> |
||||||
|
<span class="add-text">新增工程</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Engineering List --> |
||||||
|
<div v-for="item in list" :key="item.id" class="engineering-card"> |
||||||
|
<div class="card-header"> |
||||||
|
<span class="card-title">{{ item.name }}</span> |
||||||
|
<el-tag type="success">{{ item.versions }}</el-tag> |
||||||
|
</div> |
||||||
|
<div class="card-body"> |
||||||
|
<p class="card-desc">{{ item.description }}</p> |
||||||
|
</div> |
||||||
|
<div class="card-footer"> |
||||||
|
<el-button type="primary" text @click="enterEngineering(item)" |
||||||
|
>进入工程</el-button |
||||||
|
> |
||||||
|
<el-button type="danger" text @click="deleteEngineering(item)" |
||||||
|
>删除</el-button |
||||||
|
> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<p v-if="loading" class="loading-text">加载中...</p> |
||||||
|
<el-empty v-if="!loading && list.length === 0" description="暂无数据" /> |
||||||
|
</div> |
||||||
</EdfsWrap> |
</EdfsWrap> |
||||||
|
<CreateEngineeringDlg ref="createEngineeringDlgRef" /> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
|
import { ref, onMounted } from 'vue' |
||||||
|
import { useRouter } from 'vue-router' |
||||||
import EdfsWrap from '@/components/Edfs-wrap.vue' |
import EdfsWrap from '@/components/Edfs-wrap.vue' |
||||||
|
import { getEngineeringList } from '@/api/module/engineering' |
||||||
|
import type { IEngineering } from '@/api/module/engineering/index.d' |
||||||
|
import CreateEngineeringDlg from './components/create-engineering-dlg.vue' |
||||||
|
import { Plus } from '@element-plus/icons-vue' |
||||||
|
const router = useRouter() |
||||||
|
|
||||||
|
const list = ref<IEngineering[]>([]) |
||||||
|
const loading = ref(false) |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
fetchData() |
||||||
|
}) |
||||||
|
|
||||||
|
const fetchData = async () => { |
||||||
|
loading.value = true |
||||||
|
try { |
||||||
|
const res = await getEngineeringList() |
||||||
|
list.value = res.list |
||||||
|
} catch (error) { |
||||||
|
console.error(error) |
||||||
|
} finally { |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function addEngineering() { |
||||||
|
createEngineeringDlgRef.value?.open() |
||||||
|
} |
||||||
|
|
||||||
|
function enterEngineering(item: IEngineering) { |
||||||
|
router.push({ |
||||||
|
path: '/engineering-config/edit', |
||||||
|
query: { |
||||||
|
name: item.name, |
||||||
|
version: item.versions, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
function addEngineering() {} |
function deleteEngineering(item: IEngineering) {} |
||||||
|
|
||||||
|
const createEngineeringDlgRef = ref<typeof CreateEngineeringDlg | null>(null) |
||||||
</script> |
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.engineering-list-container { |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
padding: 16px; |
||||||
|
|
||||||
|
.engineering-grid { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
||||||
|
gap: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.engineering-card { |
||||||
|
background: #fff; |
||||||
|
border-radius: 4px; |
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||||
|
padding: 16px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
transition: all 0.3s; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
transform: translateY(-2px); |
||||||
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15); |
||||||
|
} |
||||||
|
|
||||||
|
.card-header { |
||||||
|
margin-bottom: 12px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.card-title { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: bold; |
||||||
|
color: #303133; |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.card-body { |
||||||
|
flex: 1; |
||||||
|
margin-bottom: 16px; |
||||||
|
.card-desc { |
||||||
|
font-size: 14px; |
||||||
|
color: #606266; |
||||||
|
line-height: 1.5; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.card-footer { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
border-top: 1px solid #ebeef5; |
||||||
|
padding-top: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.add-card { |
||||||
|
border: 2px dashed #dcdfe6; |
||||||
|
background: #fafafa; |
||||||
|
cursor: pointer; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
min-height: 200px; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
border-color: #409eff; |
||||||
|
background: #f0f9ff; |
||||||
|
|
||||||
|
.add-icon { |
||||||
|
color: #409eff; |
||||||
|
} |
||||||
|
|
||||||
|
.add-text { |
||||||
|
color: #409eff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.add-card-content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
gap: 12px; |
||||||
|
|
||||||
|
.add-icon { |
||||||
|
color: #909399; |
||||||
|
transition: color 0.3s; |
||||||
|
} |
||||||
|
|
||||||
|
.add-text { |
||||||
|
font-size: 16px; |
||||||
|
color: #606266; |
||||||
|
font-weight: 500; |
||||||
|
transition: color 0.3s; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.loading-text, |
||||||
|
.no-more-text { |
||||||
|
text-align: center; |
||||||
|
color: #909399; |
||||||
|
padding: 16px 0; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||