From 479a6ca57a82e1208551aec68584d2cbce69633c Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期三, 20 七月 2022 18:16:36 +0800
Subject: [PATCH] 添加修改页面
---
src/views/specialWorkSystem/workPlan/workAppointSummary/index.vue | 224 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 121 insertions(+), 103 deletions(-)
diff --git a/src/views/specialWorkSystem/workPlan/workAppointSummary/index.vue b/src/views/specialWorkSystem/workPlan/workAppointSummary/index.vue
index 471eff5..7d7d47a 100644
--- a/src/views/specialWorkSystem/workPlan/workAppointSummary/index.vue
+++ b/src/views/specialWorkSystem/workPlan/workAppointSummary/index.vue
@@ -1,73 +1,77 @@
<template>
<div class="home-container">
- <el-row>
- <el-col :span="6">
+ <el-scrollbar height="100%">
+ <el-row class="homeCard">
+ <el-col :span="12">
<div class="grid-content topInfo">
- <div>预约时间：</div>
- <div class="block">
- <el-date-picker
- v-model="searchTime"
- type="date"
- placeholder=""
- size="large"
+ <el-date-picker
+ v-model="searchTime"
+ type="datetime"
+ placeholder="预约时间"
+ size="large"
+ style="width: 100%;white-space: nowrap;margin-right: 20px"
+ />
+ <el-select v-model="typeValue" placeholder="请选择预约类型" style="width: 100%">
+ <el-option
+ v-for="item in reserveOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
/>
- </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="12" class="topBtns">
- <div class="grid-content topInfo">
- <div style="margin-right: 20px"><el-button type="primary" plain>查询历史</el-button></div>
- <div><el-button type="primary" @click="dialogChartsVisible = true">查看统计图表</el-button></div>
+ </el-select>
+ <el-button type="primary">查询历史</el-button>
+ <el-button plain>重置</el-button>
+ <el-button type="primary" @click="dialogChartsVisible = true">查看统计图表</el-button>
</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>
+ <div class="homeCard">
+ <div class="main-card">
+ <el-table :data="tableData" border style="width: 100%" :header-cell-style="{background: '#fafafa'}">
+ <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="right" label="操作" align="center" width="180">
+ <template #default>
+ <el-button link type="primary" size="small">操作</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="pageBtn">
+ <el-pagination
+ v-model:currentPage="currentPage"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 15]"
+ small=false
+ background
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="100"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </div>
<el-dialog v-model="dialogChartsVisible" title="统计图表">
<el-row>
<div class="grid-content">
- <div>日期查询：</div>
+ <div style="margin-bottom: 10px">日期查询：</div>
<div class="block">
<el-date-picker
v-model="dateRange"
type="daterange"
unlink-panels
- range-separator="To"
- start-placeholder="Start date"
- end-placeholder="End date"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="截止日期"
:shortcuts="shortcuts"
size="large"
/>
@@ -76,7 +80,7 @@
</el-row>
<el-row>
<div class="grid-content">
- <div>部门查询：</div>
+ <div style="margin-bottom: 10px">部门查询：</div>
<div>
<el-cascader
v-model="departmentName"
@@ -89,6 +93,7 @@
</el-row>
<div ref="myChart" style="width: 100%;height:400px;"></div>
</el-dialog>
+ </el-scrollbar>
</div>
</template>
@@ -198,7 +203,7 @@
const dateRange = ref('')
const shortcuts = [
{
- text: 'Last week',
+ text: '上一周',
value: () => {
const end = new Date()
const start = new Date()
@@ -207,7 +212,7 @@
},
},
{
- text: 'Last month',
+ text: '前一个月',
value: () => {
const end = new Date()
const start = new Date()
@@ -216,7 +221,7 @@
},
},
{
- text: 'Last 3 months',
+ text: '前三个月',
value: () => {
const end = new Date()
const start = new Date()
@@ -427,59 +432,72 @@
<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
+ height: 100%;
overflow: hidden;
- padding: 20px 40px;
+ padding: 20px;
+ .homeCard{
+ width: 100%;
+ padding: 20px;
+ background: #fff;
+ border-radius: 4px;
+ }
.el-row{
+ display: flex;
+ align-items: center;
margin-bottom: 20px;
- }
- .el-row:last-child {
- margin-bottom: 0;
- }
- .el-col{
- display: flex;
- align-items: center;
- margin: 40px 0;
- }
- .grid-content{
- display: flex;
- align-items: center;
- min-height: 36px;
- }
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .grid-content{
+ align-items: center;
+ min-height: 36px;
+ }
- .topInfo{
- display: flex;
- align-items: center;
- font-size: 16px;
- font-weight: bold;
-
- .demo-datetime-picker {
+ .topInfo {
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;
+ align-items: center;
+ font-size: 16px;
+ font-weight: bold;
+
+ &>div{
+ white-space: nowrap;
+ margin-right: 20px;
+ }
}
}
- .topBtns{
+ .main-card{
+ width: 100%;
+ .cardTop{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ .mainCardBtn{
+ margin: 0;
+ }
+ }
+ }
+ .pageBtn{
display: flex;
+ align-items: center;
justify-content: right;
+ margin-top: 20px;
+
+ .demo-pagination-block + .demo-pagination-block {
+ margin-top: 10px;
+ }
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
+ }
}
- .el-button--text {
- margin-right: 15px;
- }
- .el-select {
- width: 300px;
- }
- .el-input {
- width: 300px;
- }
- .dialog-footer button:first-child {
- margin-right: 10px;
- }
+ }
+ .el-input{
+ width: 100% !important;
+ }
+ .el-date-editor::v-deep{
+ width: 100%;
+ }
+ .el-select{
+ width: 100%;
}
</style>
--
Gitblit v1.9.2