18 changed files with 424 additions and 74 deletions
@ -0,0 +1,5 @@ |
|||
<template>1</template> |
|||
|
|||
<script setup></script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,11 @@ |
|||
<template> |
|||
<div class="tab-container" v-show="show"></div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref } from 'vue'; |
|||
|
|||
const show = ref(false); |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -1,9 +1,45 @@ |
|||
<template>Tall</template> |
|||
<template> |
|||
<div class="tall-container"> |
|||
<!-- 角色--> |
|||
<TallRoles |
|||
:roles="roles" |
|||
:role-id="roleId" |
|||
@change="onChangeRole" |
|||
></TallRoles> |
|||
<!-- 任务--> |
|||
<TallTasks :role-id="roleId"></TallTasks> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Tall', |
|||
}; |
|||
<script setup> |
|||
import { ref } from 'vue'; |
|||
|
|||
const roles = ref([]); |
|||
const tasks = ref([]); |
|||
const roleId = ref(''); |
|||
|
|||
// 获取角色 |
|||
async function getRoles() { |
|||
const { data: rawData } = await useFetch('/api/roles'); |
|||
console.log('data:', rawData.value.data); |
|||
roles.value = rawData.value.data; |
|||
|
|||
roleId.value = roles.value[0].id; |
|||
} |
|||
|
|||
function onChangeRole(clickRoleId) { |
|||
console.log('roleId: ', clickRoleId); |
|||
roleId.value = clickRoleId; |
|||
} |
|||
|
|||
getRoles(); |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
<style scoped> |
|||
.tall-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,46 @@ |
|||
<template> |
|||
<div class="modal-container" v-show="modalDisplay"> |
|||
<!-- 标题--> |
|||
<DataCenterTitle :item="modalItem"></DataCenterTitle> |
|||
|
|||
<!-- tab--> |
|||
<DataCenterFarmTab></DataCenterFarmTab> |
|||
|
|||
<!-- 列表list--> |
|||
<DataCenterFarmList></DataCenterFarmList> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
const modalItem = { |
|||
width: '676rem', |
|||
height: '510rem', |
|||
background: { |
|||
image: 'assets/images/modal-bg.png', |
|||
}, |
|||
title: { |
|||
text: '农场列表', |
|||
color: '#fff', |
|||
size: '18rem', |
|||
align: 'center', |
|||
height: '40rem', |
|||
}, |
|||
component: 'DataCenterFarms', |
|||
}; |
|||
|
|||
const modalDisplay = useModal(); // 是否显示modal |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.modal-container { |
|||
z-index: 9999; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
width: 676rem; |
|||
height: 510rem; |
|||
transform: translate3d(-50%, -50%, 0); |
|||
background: url(assets/images/modal-bg.png) no-repeat center center; |
|||
background-size: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,35 @@ |
|||
<template> |
|||
<div class="role-container clear"> |
|||
<div |
|||
v-for="item in roles" |
|||
:key="item" |
|||
class="role-item" |
|||
:class="{ active: roleId === item.id }" |
|||
@click="$emit('change', item.id)" |
|||
> |
|||
{{ item.name }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineProps({ roles: Object, roleId: String }); |
|||
defineEmits(['change']); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.role-item { |
|||
float: left; |
|||
padding: 8rem 2rem; |
|||
margin-left: 4rem; |
|||
margin-right: 4rem; |
|||
font-size: 16rem; |
|||
color: #fff; |
|||
cursor: pointer; |
|||
} |
|||
.role-item.active { |
|||
border-bottom: 2rem solid #00d9ff; |
|||
color: #00d9ff; |
|||
font-weight: 600; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<div class="task-container"> |
|||
<div v-for="(roleTasks, keyRoleId) in tasks" :key="keyRoleId"> |
|||
<div |
|||
class="task-item" |
|||
v-for="item in roleTasks" |
|||
:key="item.id" |
|||
v-show="keyRoleId === roleId" |
|||
> |
|||
<div class="task-item-header"> |
|||
<div class="task-item-icon"></div> |
|||
<div class="task-item-time flex-1">{{ item.beginTime }}</div> |
|||
</div> |
|||
<div class="task-item-content"> |
|||
<div class="line"></div> |
|||
<div class="content"> |
|||
{{ item.name }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import dayjs from 'dayjs'; |
|||
defineProps({ roleId: String }); |
|||
|
|||
/** |
|||
* 计算转换开始时间 |
|||
* @param {number} delta 当前时间的差值 |
|||
*/ |
|||
function computeBeginTime(delta) { |
|||
return dayjs().add(delta, 'hour').format('YYYY-MM-DD HH:00'); |
|||
} |
|||
|
|||
const tasks = { |
|||
111: [ |
|||
{ |
|||
id: 111, |
|||
name: '周会', |
|||
beginTime: computeBeginTime(0), |
|||
duration: 5, |
|||
role: { id: '111', name: '专家' }, |
|||
}, |
|||
{ |
|||
id: 112, |
|||
name: '专家会诊', |
|||
beginTime: computeBeginTime(1), |
|||
duration: 60, |
|||
role: { id: '111', name: '专家' }, |
|||
}, |
|||
{ |
|||
id: 113, |
|||
name: '生态园远程会诊', |
|||
beginTime: computeBeginTime(3), |
|||
duration: 90, |
|||
role: { id: '111', name: '专家' }, |
|||
}, |
|||
{ |
|||
id: 114, |
|||
name: '生态园实地考察', |
|||
beginTime: computeBeginTime(6), |
|||
duration: 120, |
|||
role: { id: '111', name: '专家' }, |
|||
}, |
|||
{ |
|||
id: 115, |
|||
name: '智慧农业专项会议', |
|||
beginTime: computeBeginTime(10), |
|||
duration: 100, |
|||
role: { id: '111', name: '专家' }, |
|||
}, |
|||
{ |
|||
id: 116, |
|||
name: '数据报表导出统计分析', |
|||
beginTime: computeBeginTime(10), |
|||
duration: 100, |
|||
role: { id: '111', name: '专家' }, |
|||
}, |
|||
{ |
|||
id: 117, |
|||
name: '生态园巡查', |
|||
beginTime: computeBeginTime(10), |
|||
duration: 100, |
|||
role: { id: '111', name: '专家' }, |
|||
}, |
|||
{ |
|||
id: 117, |
|||
name: '智慧农业论坛', |
|||
beginTime: computeBeginTime(10), |
|||
duration: 100, |
|||
role: { id: '111', name: '专家' }, |
|||
}, |
|||
], |
|||
112: [ |
|||
{ |
|||
id: 211, |
|||
name: '周会', |
|||
beginTime: computeBeginTime(0), |
|||
duration: 5, |
|||
role: { id: '112', name: '农场' }, |
|||
}, |
|||
{ |
|||
id: 212, |
|||
name: '浇水', |
|||
beginTime: computeBeginTime(1), |
|||
duration: 60, |
|||
role: { id: '112', name: '农场' }, |
|||
}, |
|||
{ |
|||
id: 213, |
|||
name: '专家远程会诊', |
|||
beginTime: computeBeginTime(3), |
|||
duration: 90, |
|||
role: { id: '112', name: '农场' }, |
|||
}, |
|||
{ |
|||
id: 214, |
|||
name: '专家考察', |
|||
beginTime: computeBeginTime(6), |
|||
duration: 120, |
|||
role: { id: '112', name: '农场' }, |
|||
}, |
|||
{ |
|||
id: 215, |
|||
name: '施肥', |
|||
beginTime: computeBeginTime(10), |
|||
duration: 100, |
|||
role: { id: '112', name: '农场' }, |
|||
}, |
|||
], |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.task-container { |
|||
padding: 10rem; |
|||
overflow-y: auto; |
|||
height: 100%; |
|||
} |
|||
::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
.task-item { |
|||
color: #fff; |
|||
} |
|||
.task-item-header { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.task-item-icon { |
|||
width: 24rem; |
|||
height: 24rem; |
|||
background: url('assets/images/icon-play.png') no-repeat center center; |
|||
background-size: 100%; |
|||
margin-right: 10rem; |
|||
margin-top: 10rem; |
|||
margin-bottom: 10rem; |
|||
} |
|||
.task-item-content { |
|||
display: flex; |
|||
} |
|||
.line { |
|||
width: 2rem; |
|||
margin-left: 11rem; |
|||
margin-right: 21rem; |
|||
background-color: #00d9ff; |
|||
} |
|||
.task-item-content .content { |
|||
flex: 1; |
|||
box-shadow: 0 0 9rem #00d9ff inset; |
|||
padding: 16rem; |
|||
font-size: 18rem; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,5 @@ |
|||
import { useState } from '#app'; |
|||
|
|||
export const useModal = () => { |
|||
return useState('modalDisplay', () => false); |
|||
}; |
|||
@ -0,0 +1,5 @@ |
|||
import { useState } from '#app'; |
|||
|
|||
export const useMonitor = () => { |
|||
return useState('monitorDisplay', () => true); |
|||
}; |
|||
@ -1,35 +1,39 @@ |
|||
<template> |
|||
<div class="page"> |
|||
<PageHeader></PageHeader> |
|||
<PageMain></PageMain> |
|||
<PageFooter></PageFooter> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { onMounted } from 'vue'; |
|||
|
|||
function setRem(html) { |
|||
const winWidth = html.clientWidth; |
|||
html.style.fontSize = winWidth / 1920 + 'px'; |
|||
} |
|||
|
|||
onMounted(() => { |
|||
const html = document.documentElement; |
|||
setRem(html); |
|||
window.addEventListener('resize', () => { |
|||
setRem(html); |
|||
}, false); |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.page { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: url("@/assets/images/bg.png") no-repeat center center; |
|||
background-size: cover; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
<template> |
|||
<div class="page"> |
|||
<PageHeader></PageHeader> |
|||
<PageMain></PageMain> |
|||
<PageFooter></PageFooter> |
|||
|
|||
<PageModal></PageModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { onMounted } from 'vue'; |
|||
|
|||
function setRem(html) { |
|||
const winWidth = html.clientWidth; |
|||
html.style.fontSize = winWidth / 1920 + 'px'; |
|||
} |
|||
|
|||
onMounted(() => { |
|||
const html = document.documentElement; |
|||
setRem(html); |
|||
window.addEventListener( |
|||
'resize', |
|||
() => { |
|||
setRem(html); |
|||
}, |
|||
false, |
|||
); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.page { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: url('@/assets/images/bg.png') no-repeat center center; |
|||
background-size: cover; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,12 @@ |
|||
import type { IncomingMessage, ServerResponse } from 'http'; |
|||
|
|||
export default async (req: IncomingMessage, res: ServerResponse) => { |
|||
return { |
|||
code: 200, |
|||
msg: 'ok', |
|||
data: [ |
|||
{ id: '111', name: '专家' }, |
|||
{ id: '112', name: '农场' }, |
|||
], |
|||
}; |
|||
}; |
|||
Loading…
Reference in new issue