<template>
|
<div class="home-container">
|
<el-row>
|
<el-col :span="6">
|
<div class="grid-content topInfo">
|
<div>当前所属部门：</div>
|
<div>电工部</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="grid-content topInfo">
|
<div>预约时间：</div>
|
<div class="block">
|
<el-date-picker
|
v-model="searchTime"
|
type="date"
|
placeholder=""
|
size="large"
|
/>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="grid-content topInfo">
|
<div>预约类型：</div>
|
<div>
|
<el-select v-model="typeValue" class="m-2" placeholder="Select" size="large">
|
<el-option
|
v-for="item in reserveOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6" class="topBtns">
|
<div class="grid-content topInfo">
|
<div style="margin-right: 20px"><el-button type="primary" plain>查询历史</el-button></div>
|
<div><el-button type="success" @click="dialogFormVisible = true">新增预约</el-button></div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-table :data="tableData" border style="width: 100%">
|
<el-table-column prop="id" label="编号" width="180" />
|
<el-table-column prop="time" label="预约时间" width="180" />
|
<el-table-column prop="department" label="预约部门" />
|
<el-table-column prop="dirtyWork" label="动土作业" width="180" />
|
<el-table-column prop="fireWork" label="动火作业" width="180" />
|
<el-table-column prop="hangWork" label="吊装作业" />
|
<el-table-column prop="spaceWork" label="受限空间作业" width="180" />
|
<el-table-column prop="cut" label="断路" width="180" />
|
<el-table-column prop="high" label="高处" />
|
<el-table-column prop="block" label="盲板抽堵" width="180" />
|
<el-table-column prop="tempUse" label="临时用电" width="180" />
|
<el-table-column fixed label="操作">
|
<template #default>
|
<el-button link type="primary" size="small">操作</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-row>
|
<el-dialog v-model="dialogFormVisible" title="新增预约">
|
<el-form :model="reservationForm">
|
<el-form-item label="我的当前部门" :label-width="formLabelWidth">
|
<el-input v-model="reservationForm.department" placeholder="" />
|
</el-form-item>
|
<el-form-item label="预约作业时间" :label-width="formLabelWidth">
|
<el-date-picker
|
v-model="reservationForm.time"
|
type="date"
|
placeholder=""
|
size="large"
|
/>
|
</el-form-item>
|
<el-form-item label="预约作业类型" :label-width="formLabelWidth">
|
<el-select v-model="reservationForm.type">
|
<el-option label="类型1" value="type1" />
|
<el-option label="类型2" value="type2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="对应作业数量" :label-width="formLabelWidth">
|
<el-input v-model="reservationForm.amount" placeholder="" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
<el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, defineComponent, ref } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import {useUserInfo} from "/@/stores/userInfo";
|
import { Session } from '/@/utils/storage';
|
let global: any = {
|
homeChartOne: null,
|
homeChartTwo: null,
|
homeCharThree: null,
|
dispose: [null, '', undefined],
|
};
|
|
interface stateType {
|
homeOne: Array <type>
|
}
|
interface type {
|
|
}
|
export default defineComponent({
|
name: 'home',
|
setup() {
|
const userInfo = useUserInfo()
|
const searchTime = ref('')
|
const typeValue = ref('')
|
const reserveOptions = [
|
{
|
value: 'Option1',
|
label: 'Option1',
|
},
|
{
|
value: 'Option2',
|
label: 'Option2',
|
},
|
{
|
value: 'Option3',
|
label: 'Option3',
|
},
|
{
|
value: 'Option4',
|
label: 'Option4',
|
},
|
{
|
value: 'Option5',
|
label: 'Option5',
|
},
|
];
|
const tableData = [
|
{
|
id: '10801920',
|
time: '2022-06-29',
|
department: '电工部',
|
dirtyWork: '',
|
fireWork: '',
|
hangWork: '',
|
spaceWork: '',
|
cut: '',
|
high: '',
|
block: '',
|
tempUse: ''
|
},
|
{
|
id: '10801920',
|
time: '2022-06-29',
|
department: '电工部',
|
dirtyWork: '',
|
fireWork: '',
|
hangWork: '',
|
spaceWork: '',
|
cut: '',
|
high: '',
|
block: '',
|
tempUse: ''
|
},
|
{
|
id: '10801920',
|
time: '2022-06-29',
|
department: '土木',
|
dirtyWork: '',
|
fireWork: '',
|
hangWork: '',
|
spaceWork: '',
|
cut: '',
|
high: '',
|
block: '',
|
tempUse: ''
|
}
|
];
|
const dialogFormVisible = ref(false);
|
const formLabelWidth = '140px';
|
const reservationForm = reactive({
|
department: '',
|
time: '',
|
type: '',
|
amount: ''
|
});
|
const { userInfos } = storeToRefs(userInfo);
|
const state = reactive<stateType>({
|
homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'双重预防系统'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
|
});
|
// 折线图
|
const renderMenu = async (value: string) => {
|
Session.set('projectId',value)
|
userInfos.value.projectId = value
|
await initBackEndControlRoutes();
|
};
|
return {
|
renderMenu,
|
searchTime,
|
typeValue,
|
reserveOptions,
|
tableData,
|
dialogFormVisible,
|
formLabelWidth,
|
reservationForm,
|
...toRefs(state),
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
.home-container {
|
overflow: hidden;
|
padding: 20px 40px;
|
.el-row{
|
margin-bottom: 20px;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-col{
|
display: flex;
|
align-items: center;
|
margin: 40px 0;
|
}
|
.grid-content{
|
align-items: center;
|
min-height: 36px;
|
}
|
|
.topInfo{
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
font-weight: bold;
|
|
.demo-datetime-picker {
|
display: flex;
|
width: 100%;
|
padding: 0;
|
flex-wrap: wrap;
|
}
|
.demo-datetime-picker .block {
|
padding: 30px 0;
|
text-align: center;
|
border-right: solid 1px var(--el-border-color);
|
flex: 1;
|
}
|
}
|
.topBtns{
|
display: flex;
|
justify-content: right;
|
}
|
.el-button--text {
|
margin-right: 15px;
|
}
|
.el-select {
|
width: 300px;
|
}
|
.el-input {
|
width: 300px;
|
}
|
.dialog-footer button:first-child {
|
margin-right: 10px;
|
}
|
}
|
</style>
|
