<template>
|
<div class="home-container">
|
<div style="height: 100%">
|
<div class="topChart">
|
<div class="chart-item">
|
<div class="chart-tit">
|
<span class="tit">年度巡检异常趋势</span>
|
</div>
|
<div class="chart" :id="xjLine"></div>
|
</div>
|
<div class="chart-item">
|
<div class="chart-tit">
|
<span class="tit">异常区域设备统计</span>
|
<div class="filter-part">
|
<el-switch
|
v-model="chartStatus"
|
inline-prompt
|
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
|
active-text="区域"
|
inactive-text="设备"
|
/>
|
</div>
|
</div>
|
<div class="chart" :id="sbtj"></div>
|
<el-radio-group v-model="period" size="small">
|
<el-radio border label="week">近7天</el-radio>
|
<el-radio border label="month">近30天</el-radio>
|
<el-radio border label="season">近90天</el-radio>
|
<el-radio border label="year">近一年</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
<div class="midChart">
|
<div class="chart-item">
|
<div class="chart-tit">
|
<div style="display: flex;align-items: center">
|
<span class="tit">当前巡检任务</span>
|
<div class="top-info" v-if="unchecked != 0 || unusual != 0">
|
<el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
|
<div>预警消息：</div>
|
<div v-if="unchecked != 0">
|
当日超期未巡检任务<el-tooltip
|
class="box-item"
|
effect="light"
|
content="查看相关记录"
|
placement="bottom-start"
|
><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个
|
</div>
|
<span v-if="unchecked != 0 && unusual != 0">，</span>
|
<div v-if="unusual != 0">
|
存在异常任务<el-tooltip
|
class="box-item"
|
effect="light"
|
content="查看相关记录"
|
placement="bottom-start"
|
><span @click="toOverTime(5)">{{ unusual }}</span
|
></el-tooltip>个
|
</div>
|
。
|
</div>
|
</div>
|
<div class="checkAll" @click="checkAllRecord()">
|
全部记录>>
|
</div>
|
</div>
|
<div class="chart">
|
<!-- <el-table :data="tableData" style="width: 100%" stripe border>-->
|
<!-- <el-table-column label="任务信息" align="center">-->
|
<!-- <template #default="scope">-->
|
<!-- <div class="left-info">-->
|
<!-- <span>{{ scope.row.taskName }}，</span>-->
|
<!-- <p v-if="scope.row.execUserName == null">该任务暂无人认领</p>-->
|
<!-- <p v-else>-->
|
<!-- <span class="time">{{ scope.row.taskStatus == 2 ? scope.row.startTime : scope.row.endTime }}</span>由<span class="name">{{ scope.row.execUserName }}</span>进行的巡检任务-->
|
<!-- </p>-->
|
<!-- </div>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column prop="taskStatus" label="任务状态" align="center" width="180">-->
|
<!-- <template #default="scope">-->
|
<!-- <span :class="scope.row.taskStatus == 1 ? 'grey' : scope.row.taskStatus == 2 ? 'green' : scope.row.taskStatus == 3 ? 'blue' : 'red'">{{ scope.row.taskStatus == 1 ? '待巡检' : scope.row.taskStatus == 2 ? '巡检中' : scope.row.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column label="操作" align="center" width="180">-->
|
<!-- <template #default="scope">-->
|
<!-- <el-button type="text" v-if="scope.row.taskStatus == 2" @click="toLine(scope.row)" class="checkBtn">查看实时巡检</el-button>-->
|
<!-- <el-button type="text" v-else class="reviewBtn" @click="toDetails('查看', scope.row)">查看巡检记录</el-button>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<!-- </el-table>-->
|
<div class="list">
|
<div class="list-tit">
|
<span class="w60">任务信息</span>
|
<span class="w20">任务状态</span>
|
<span class="w20">操作</span>
|
</div>
|
<div class="cardTop" v-for="(item, index) in tableData" :key="index">
|
<div class="l-info">
|
<span class="place">{{ item.taskName }}，</span>
|
<p v-if="item.execUserName == null">该任务暂无人认领</p>
|
<p v-else>
|
<span class="time">{{ item.taskStatus == 2 ? item.startTime : item.endTime }}</span>由<span class="name">{{ item.execUserName }}</span
|
>进行的巡检任务
|
</p>
|
</div>
|
<div class="m-info">
|
任务状态：<span :class="item.taskStatus == 1 ? 'grey' : item.taskStatus == 2 ? 'green' : item.taskStatus == 3 ? 'blue' : 'red'">{{ item.taskStatus == 1 ? '待巡检' : item.taskStatus == 2 ? '巡检中' : item.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
|
</div>
|
<div class="r-info">
|
<el-button type="text" v-if="item.taskStatus == 2" @click="toLine(item)" size="small">查看实时巡检</el-button>
|
<el-button type="text" v-else class="reviewBtn" @click="toDetails('查看', item)" size="small">查看巡检记录</el-button>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="pageBtn">-->
|
<!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
|
<!-- </div>-->
|
</div>
|
</div>
|
</div>
|
<div class="midChart">
|
<div class="chart-item">
|
<div class="chart-tit">
|
<span class="tit">巡检异常清单</span>
|
<div class="checkAll" @click="checkAllList()">
|
全部记录>>
|
</div>
|
</div>
|
<div class="chart">
|
<div class="list">
|
<div class="list-tit">
|
<span class="w10">工单编号</span>
|
<span class="w10">异常巡检点</span>
|
<span class="w10">巡检（发现）时间</span>
|
<span class="w10">所属巡检任务</span>
|
<span class="w10">设备/区域名称</span>
|
<span class="w10">正常参考值</span>
|
<span class="w10">实际巡检值</span>
|
<span class="w10">隐患处置人</span>
|
<span class="w10">电话</span>
|
<span class="w10">处置状态</span>
|
<span class="w10">处置描述反馈</span>
|
<span class="w15">操作</span>
|
</div>
|
<div class="cardTop" v-for="(item, index) in unusualData" :key="index">
|
<span class="w10">{{item.num}}</span>
|
<span class="w10">{{item.spot}}</span>
|
<span class="w10">{{item.time}}</span>
|
<span class="w10">{{item.job}}</span>
|
<span class="w10">{{item.area}}</span>
|
<span class="w10">{{item.refer}}</span>
|
<span class="w10">{{item.real}}</span>
|
<span class="w10">{{item.name}}</span>
|
<span class="w10">{{item.phone}}</span>
|
<span class="w10">{{item.status}}</span>
|
<span class="w10">{{item.describe}}</span>
|
<span class="w15">
|
<el-button type="text" @click="toLine(item)" size="small">验收</el-button>
|
<el-button type="text" @click="toPhotos('查看', item)" size="small">查看现场照片</el-button>
|
</span>
|
</div>
|
</div>
|
<!-- <div class="pageBtn">-->
|
<!-- <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
|
<!-- </div>-->
|
</div>
|
</div>
|
</div>
|
</div>
|
<inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog>
|
<inspect-list ref="inspectListRef"></inspect-list>
|
<unusual-list ref="unusualListRef"></unusual-list>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, ref, onMounted } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import { useUserInfo } from '/@/stores/userInfo';
|
import { Session } from '/@/utils/storage';
|
import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
|
import { ElTable } from 'element-plus';
|
import { FormInstance, FormRules, ElMessage } from 'element-plus';
|
import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
|
import { useRouter } from 'vue-router';
|
import * as echarts from 'echarts'
|
import inspectRecordDialog from './components/inspectRecordDialog.vue';
|
import inspectList from './components/inspectList.vue';
|
import unusualList from './components/unusualList.vue';
|
import { departmentApi } from '/@/api/systemManage/department';
|
// 定义接口来定义对象的类型
|
interface stateType {
|
tableData: Array<string>;
|
unusualData: Array<any>;
|
unchecked: null | number;
|
unusual: null | number;
|
uncheckedList: [];
|
abnormalList: [];
|
pageIndex: number;
|
pageSize: number;
|
totalSize: number;
|
workTypeList: Array<type>;
|
departmentList: [];
|
timeType: Array<type>;
|
classGroupList: Array<classGroup>;
|
quotaList: [];
|
inspectPointAllList: [];
|
chartStatus:boolean;
|
period: string
|
}
|
interface type {
|
id: number;
|
name: string;
|
}
|
interface classGroup {
|
id: number;
|
groupName: string;
|
}
|
export default {
|
name: 'workingHours',
|
components: { inspectRecordDialog, inspectList, unusualList },
|
setup() {
|
const router = useRouter();
|
const xjLine = ref("eChartXjLine" + Date.now() + Math.random())
|
const sbtj = ref("eChartSbtj" + Date.now() + Math.random())
|
const state = reactive<stateType>({
|
pageIndex: 1,
|
pageSize: 4,
|
totalSize: 0,
|
tableData: [],
|
unusualData: [
|
{
|
num: '202302280001',
|
spot: '70736',
|
time: '2023-03-02 17:44:25',
|
job: '甲醇车间XXX巡检',
|
area: 'xxx设备',
|
refer: '8.9~10Mpa',
|
real: '15.6Mpa',
|
name: '黄公子',
|
phone: '15261806176',
|
status: '待验收',
|
describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
|
},
|
{
|
num: '202302280001',
|
spot: '70736',
|
time: '2023-03-02 17:44:25',
|
job: '甲醇车间XXX巡检',
|
area: 'xxx设备',
|
refer: '8.9~10Mpa',
|
real: '15.6Mpa',
|
name: '黄公子',
|
phone: '15261806176',
|
status: '待验收',
|
describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
|
},
|
{
|
num: '202302280001',
|
spot: '70736',
|
time: '2023-03-02 17:44:25',
|
job: '甲醇车间XXX巡检',
|
area: 'xxx设备',
|
refer: '8.9~10Mpa',
|
real: '15.6Mpa',
|
name: '黄公子',
|
phone: '15261806176',
|
status: '待验收',
|
describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
|
},
|
{
|
num: '202302280001',
|
spot: '70736',
|
time: '2023-03-02 17:44:25',
|
job: '甲醇车间XXX巡检',
|
area: 'xxx设备',
|
refer: '8.9~10Mpa',
|
real: '15.6Mpa',
|
name: '黄公子',
|
phone: '15261806176',
|
status: '待验收',
|
describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
|
}
|
],
|
unchecked: null,
|
unusual: null,
|
chartStatus: true,
|
period: 'month',
|
uncheckedList: [],
|
abnormalList: [],
|
workTypeList: [
|
{ id: 1, name: '日常任务' },
|
{ id: 2, name: '周期任务' }
|
],
|
departmentList: [],
|
timeType: [
|
{ id: 1, name: '分' },
|
{ id: 2, name: '小时' },
|
{ id: 3, name: '日' },
|
{ id: 4, name: '月' },
|
{ id: 5, name: '年' }
|
],
|
classGroupList: [],
|
quotaList: [],
|
inspectPointAllList: []
|
});
|
const inspectRecordDialogRef = ref();
|
const inspectListRef = ref();
|
const unusualListRef = ref();
|
interface User {
|
name: string;
|
startTime: string;
|
endTime: string;
|
info: string;
|
}
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
getInspectRecord();
|
getDayData();
|
getDepartmentData();
|
initXjLine()
|
initSbtj()
|
});
|
const checkAllRecord =()=>{
|
inspectListRef.value.departmentList = state.departmentList
|
inspectListRef.value.showInspectList()
|
}
|
const checkAllList =()=>{
|
unusualListRef.value.showUnusualList()
|
}
|
type EChartsOption = echarts.EChartsOption
|
const initXjLine =()=>{
|
let dom = document.getElementById(xjLine.value);
|
let myChart = echarts.init(dom);
|
|
let option: EChartsOption;
|
|
option = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: ['总趋势', '事业部'],
|
height: '15%',
|
top: 0,
|
bottom: 0,
|
padding:[1,1,1,0]
|
},
|
grid: {
|
top: '15%',
|
left: '3%',
|
right: '3%',
|
bottom: 0,
|
containLabel: true
|
},
|
toolbox: {
|
feature: {
|
// saveAsImage: {}
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
name: '总趋势',
|
type: 'line',
|
stack: 'Total',
|
data: [120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 230, 210],
|
label:{
|
show: true,
|
color: '#95d475',
|
fontSize: 12
|
},
|
lineStyle:{
|
width: 1,
|
color: '#95d475'
|
},
|
itemStyle:{
|
color: '#95d475',
|
borderColor: '#fff',
|
borderWidth: 2
|
}
|
},
|
{
|
name: '事业部',
|
type: 'line',
|
stack: 'Total',
|
data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 330, 310],
|
label:{
|
show: true,
|
color: '#337ecc',
|
fontSize: 12
|
},
|
lineStyle:{
|
width: 1,
|
color: '#337ecc'
|
},
|
itemStyle:{
|
color: '#337ecc',
|
borderColor: '#fff',
|
borderWidth: 2
|
}
|
}
|
]
|
}
|
|
option && myChart.setOption(option);
|
window.addEventListener("resize",function (){
|
myChart.resize();
|
});
|
}
|
const initSbtj =()=>{
|
let dom = document.getElementById(sbtj.value);
|
let myChart = echarts.init(dom);
|
let option: EChartsOption;
|
option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'vertical',
|
left: 'left',
|
top: 'center'
|
},
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 1,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: 40,
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: true
|
},
|
data: [
|
{ value: 1048, name: '区域1' },
|
{ value: 735, name: '区域2' },
|
{ value: 580, name: '区域3' },
|
{ value: 484, name: '区域4' },
|
{ value: 735, name: '区域5' }
|
]
|
}
|
]
|
}
|
|
option && myChart.setOption(option);
|
window.addEventListener("resize",function (){
|
myChart.resize();
|
});
|
}
|
// 分页获取工作时段列表
|
const getInspectRecord = async () => {
|
const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
|
let res = await inspectRecordApi().getInspectRecordByIndex(data);
|
if (res.data.code === '200') {
|
state.tableData = res.data.data.records;
|
state.totalSize = res.data.data.total;
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
};
|
//获取部门
|
const getDepartmentData = async () => {
|
let res = await departmentApi().getDepartmentList();
|
if (res.data.code === '200') {
|
state.departmentList = res.data.data;
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
};
|
|
//获取当日数据
|
const getDayData = async () => {
|
let res = await inspectRecordApi().getDayRecord();
|
if (res.data.code === '200') {
|
state.unchecked = res.data.data.noCheckTaskCount;
|
state.unusual = res.data.data.abnormalTaskCount;
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
};
|
|
const handleSizeChange = (val: number) => {
|
state.pageSize = val;
|
getInspectRecord();
|
};
|
const handleCurrentChange = (val: number) => {
|
state.pageIndex = val;
|
getInspectRecord();
|
};
|
|
const toLine = (item) => {
|
console.log(item,'item')
|
let id = item.id;
|
console.log(id,'id')
|
router.push({
|
path: 'intelligentLine',
|
query: {
|
id: id
|
}
|
});
|
};
|
|
const toOverTime = (id) => {
|
console.log(state.uncheckedList, 'list');
|
router.push({
|
path: 'inspectRecord',
|
query: {
|
id: id,
|
}
|
});
|
};
|
const toDetails = (type: string, item) => {
|
inspectRecordDialogRef.value.showInspectRecordDialog(type, item, state.workTypeList, state.departmentList, state.timeType, state.classGroupList, state.quotaList, state.inspectPointAllList);
|
};
|
return {
|
View,
|
Edit,
|
Delete,
|
Refresh,
|
xjLine,
|
sbtj,
|
Plus,
|
router,
|
inspectRecordDialogRef,
|
inspectListRef,
|
unusualListRef,
|
checkAllRecord,
|
checkAllList,
|
toLine,
|
toOverTime,
|
toDetails,
|
handleSizeChange,
|
handleCurrentChange,
|
...toRefs(state)
|
};
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
@media screen and (min-width: 1366px) {
|
|
}
|
@media screen and (min-width: 1200px) and (max-width: 1366px) {
|
|
}
|
@media screen and (max-width: 1200px) {
|
|
}
|
|
.home-container {
|
height: calc(100vh - 144px);
|
box-sizing: border-box;
|
overflow: hidden;
|
|
.topChart{
|
width: 100%;
|
height: calc((100% - 40px) / 3);
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 20px;
|
&:last-of-type{
|
margin-bottom: 0;
|
}
|
|
.chart-item{
|
width: calc(60% - 20px);
|
height: 100%;
|
margin-right: 20px;
|
position: relative;
|
background: #fff;
|
padding: 20px;
|
|
&:last-of-type{
|
width: 40%;
|
margin-right: 0;
|
}
|
|
.chart-tit{
|
width: 100%;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
.tit{
|
font-size: 1.33rem;
|
font-weight: bolder;
|
}
|
.filter-part{
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
width: 20%;
|
.el-switch{
|
width: 100% !important;
|
:deep(.el-switch__core){
|
width: 100% !important;
|
}
|
}
|
}
|
}
|
.chart{
|
width: 100%;
|
height: 88%;
|
}
|
.el-radio-group{
|
width: 20%;
|
display: flex;
|
flex-flow: column nowrap;
|
align-items: flex-start;
|
position: absolute;
|
right: 10px;
|
top: 50%;
|
transform: translateY(-30%);
|
|
.el-radio{
|
width: 100%;
|
margin-bottom: 4px;
|
}
|
}
|
:deep(.active-ring-info){
|
.active-ring-name{
|
font-size: 1.5rem !important;
|
text-align: center;
|
}
|
}
|
}
|
}
|
.midChart{
|
height: calc((100% - 40px) / 3);
|
width: 100%;
|
background: #fff;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 20px;
|
padding: 20px;
|
|
.chart-item{
|
width: 100%;
|
height: 100%;
|
padding: 0 0 20px;
|
|
.chart-tit{
|
width: 100%;
|
height: 15%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.tit{
|
font-size: 20px;
|
font-weight: bolder;
|
}
|
:deep(.el-switch__core){
|
width: 120px;
|
|
}
|
.top-info {
|
display: flex;
|
font-size: 14px;
|
align-items: center;
|
background: #ffeb87;
|
padding: 4px 10px;
|
margin-left: 20px;
|
border-radius: 2px;
|
border: 1px solid #ffae00;
|
& > div {
|
vertical-align: middle;
|
white-space: nowrap;
|
height: 100%;
|
span {
|
color: #f3001e;
|
margin: 0 4px;
|
font-size: 18px;
|
cursor: pointer;
|
font-weight: bolder;
|
|
&:hover{
|
text-decoration: underline;
|
}
|
}
|
}
|
}
|
.checkAll{
|
cursor: pointer;
|
&:hover{
|
color: #409eff
|
}
|
}
|
}
|
.chart{
|
width: 100%;
|
height: 85%;
|
margin-top: 10px;
|
|
.el-table{
|
height: 100% !important;
|
:deep(.el-table__inner-wrapper){
|
height: 100% !important;
|
.el-table__header-wrapper{
|
height: 20% !important;
|
}
|
.el-table__body-wrapper{
|
height: 80% !important;
|
.el-scrollbar__view{
|
height: 100% !important;
|
.el-table__body{
|
height: 100% !important;
|
|
.el-table__row{
|
height: 20% !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
.list {
|
height: 100%;
|
margin-top: 10px;
|
border: 1px solid #ebeef5;
|
|
.list-tit{
|
width: 100%;
|
height: 20%;
|
display: flex;
|
align-items: center;
|
border-bottom: 1px solid #ebeef5;
|
|
span{
|
text-align: center;
|
padding: 10px 0;
|
}
|
|
.w60{
|
width: 60%;
|
border-right: 1px solid #ebeef5;
|
}
|
.w20{
|
width: 20%;
|
border-right: 1px solid #ebeef5;
|
|
&:last-of-type{
|
border-right: none;
|
}
|
}
|
.w15{
|
width: 15%;
|
border-right: 1px solid #ebeef5;
|
text-align: center;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.w10{
|
width: 10%;
|
border-right: 1px solid #ebeef5;
|
text-align: center;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
|
.cardTop {
|
display: flex;
|
width: 100%;
|
height: 20%;
|
align-items: center;
|
border-bottom: 1px solid #ebeef5;
|
|
&:last-of-type{
|
border-bottom: none;
|
}
|
span{
|
text-align: center;
|
padding: 10px 0;
|
}
|
.l-info{
|
width: 60%;
|
height: 100%;
|
border-right: 1px solid #ebeef5;
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
|
.num {
|
font-weight: bolder;
|
margin-right: 10px;
|
}
|
.place {
|
font-weight: bolder;
|
}
|
.time {
|
font-weight: bolder;
|
margin-right: 5px;
|
}
|
.name {
|
font-weight: bolder;
|
margin: 0 5px;
|
font-weight: bolder;
|
}
|
}
|
.m-info{
|
height: 100%;
|
width: 20%;
|
display: flex;
|
align-items: center;
|
border-right: 1px solid #ebeef5;
|
justify-content: center;
|
|
span {
|
font-weight: bolder;
|
}
|
|
.grey {
|
color: #999;
|
}
|
.green {
|
color: #44b100;
|
}
|
.blue {
|
color: #409eff;
|
}
|
.red {
|
color: red;
|
}
|
}
|
.r-info{
|
width: 20%;
|
text-align: center;
|
|
.reviewBtn {
|
color: #44b100;
|
}
|
}
|
.w10{
|
width: 10%;
|
border-right: 1px solid #ebeef5;
|
text-align: center;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.w15{
|
width: 15%;
|
border-right: 1px solid #ebeef5;
|
text-align: center;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
.el-button{
|
margin-left: 0 !important;
|
padding: 12px 0;
|
&:last-of-type{
|
margin-left: 12px !important;
|
}
|
}
|
}
|
}
|
}
|
.pageBtn {
|
position: absolute;
|
bottom: 15px;
|
right: 20px;
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
|
.demo-pagination-block + .demo-pagination-block {
|
margin-top: 10px;
|
}
|
.demo-pagination-block .demonstration {
|
margin-bottom: 16px;
|
}
|
}
|
}
|
}
|
}
|
|
.el-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
.grid-content {
|
align-items: center;
|
min-height: 36px;
|
}
|
}
|
}
|
.el-input {
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep {
|
width: 100%;
|
}
|
.el-select {
|
width: 100%;
|
}
|
:deep(.el-textarea.is-disabled .el-textarea__inner) {
|
background-color: var(--el-card-bg-color);
|
color: var(--el-input-text-color, var(--el-text-color-regular));
|
}
|
:deep(.el-input.is-disabled .el-input__inner) {
|
color: var(--el-input-text-color, var(--el-text-color-regular));
|
}
|
:deep(.el-input.is-disabled .el-input__wrapper) {
|
background-color: var(--el-card-bg-color);
|
}
|
</style>
|
