From 8b7c2fe49917d670eb2a03cecda23ea50961c494 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期二, 09 八月 2022 09:26:29 +0800 Subject: [PATCH] lct --- src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue | 1700 ++++++++++++++++++++++++++------------------------------- 1 files changed, 780 insertions(+), 920 deletions(-) diff --git a/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue b/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue index 3af583a..4e37911 100644 --- a/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue +++ b/src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue @@ -1,953 +1,813 @@ <template> - <div class="home-container"> - <div style="height: 100%"> - <el-row class="homeCard"> - <el-col :span="12"> - <div class="grid-content topInfo"> - <el-select v-model="searchType" @change="changeSearch" placeholder="任务名称"> - <el-option label="巡检任务类型" value="巡检任务类型" /> - <el-option label="创建人" value="创建人" /> - <el-option label="巡检班组" value="巡检班组" /> - <el-option label="检查频次" value="检查频次" /> - <el-option label="开始时间" value="开始时间" /> - </el-select> - <el-input v-model="searchContent" v-if="searchType == '任务名称'" placeholder="请输入任务名称"></el-input> - <el-input - v-else-if="searchType == '检查频次'" - v-model="searchContent" - placeholder="请输入检查频次" - > - <template #append> - <el-select v-model="searchUnit" placeholder="选择单位"> - <el-option label="分钟" value="分钟" /> - <el-option label="小时" value="小时" /> - <el-option label="天" value="天" /> - </el-select> - </template> - </el-input> - <el-select v-model="searchContent" v-else-if="searchType == '巡检任务类型'" placeholder="请选择任务类型"> - <el-option v-for="(item,index) in typeOptions" :label="item.name" :value="item.value" :key="index"/> - </el-select> - <el-select v-model="searchContent" v-else-if="searchType == '创建人'" placeholder="请选择创建人"> - <el-option v-for="(item,index) in createrOptions" :label="item.name" :value="item.value" :key="index"/> - </el-select> - <el-select v-model="searchContent" v-else-if="searchType == '巡检班组'" placeholder="请选择巡检班组"> - <el-option v-for="(item,index) in inspectorOptions" :label="item.name" :value="item.value" :key="index"/> - </el-select> - <el-date-picker - v-model="searchContent" - type="date" - v-else - :placeholder="'请选择' + searchType" - size="large" - style="margin-right: 20px" - /> - <el-button type="primary">查询</el-button> - <el-button plain>重置</el-button> - </div> - </el-col> - </el-row> - <div class="homeCard"> - <div class="main-card"> - <el-row class="cardTop"> - <el-col :span="12" class="mainCardBtn"> - <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord=true">新建</el-button> - <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> - </el-col> - <el-button type="primary" :icon="Refresh" size="default"/> - </el-row> - <el-table - ref="multipleTableRef" - :data="tableData" - style="width: 100%" - height="calc(100% - 100px)" - :header-cell-style="{background: '#fafafa'}" - @selection-change="handleSelectionChange" - > - <el-table-column type="selection" width="55" /> - <el-table-column property="name" label="任务名称" width="200"/> - <el-table-column property="type" label="任务类型"/> - <el-table-column property="execClassgroup" label="巡检班组"/> - <el-table-column property="frequency" label="检查频次"/> - <el-table-column property="unit" label="频次单位"/> - <el-table-column property="chainLength" label="巡检链长度" width="160"/> - <el-table-column property="startTime" label="任务开始时间" width="180"/> -<!-- <el-table-column property="validTime" label="任务有效时间" width="180"/>--> - <el-table-column property="creater" label="创建人"/> - <el-table-column property="createTime" label="创建时间" width="180"/> - <el-table-column property="status" label="状态" width="60"/> - <el-table-column fixed="right" label="操作" align="center" width="300"> - <template #default="scope"> - <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> - <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index ,scope.row)">修改</el-button> - <el-switch - v-model="scope.row.status" - inline-prompt - active-text="开" - inactive-text="关" - active-value="开启" - inactive-value="关闭" - style="margin: 0 10px" - /> - <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button> - </template> - </el-table-column> - </el-table> - <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> - </div> - </div> + <div class="home-container"> + <div style="height: 100%"> + <el-row class="homeCard"> + <el-col :span="12"> + <div class="grid-content topInfo"> + <el-select v-model="searchType" @change="changeSearch" placeholder="任务名称"> + <el-option label="巡检任务类型" value="巡检任务类型" /> + <el-option label="创建人" value="创建人" /> + <el-option label="巡检班组" value="巡检班组" /> + <el-option label="检查频次" value="检查频次" /> + <el-option label="开始时间" value="开始时间" /> + </el-select> + <el-input v-model="searchContent" v-if="searchType == '任务名称'" placeholder="请输入任务名称"></el-input> + <el-input v-else-if="searchType == '检查频次'" v-model="searchContent" placeholder="请输入检查频次"> + <template #append> + <el-select v-model="searchUnit" placeholder="选择单位"> + <el-option label="分钟" value="分钟" /> + <el-option label="小时" value="小时" /> + <el-option label="天" value="天" /> + </el-select> + </template> + </el-input> + <el-select v-model="searchContent" v-else-if="searchType == '巡检任务类型'" placeholder="请选择任务类型"> + <el-option v-for="(item, index) in typeOptions" :label="item.name" :value="item.value" :key="index" /> + </el-select> + <el-select v-model="searchContent" v-else-if="searchType == '创建人'" placeholder="请选择创建人"> + <el-option v-for="(item, index) in createrOptions" :label="item.name" :value="item.value" :key="index" /> + </el-select> + <el-select v-model="searchContent" v-else-if="searchType == '巡检班组'" placeholder="请选择巡检班组"> + <el-option v-for="(item, index) in inspectorOptions" :label="item.name" :value="item.value" :key="index" /> + </el-select> + <el-date-picker v-model="searchContent" type="date" v-else :placeholder="'请选择' + searchType" size="large" style="margin-right: 20px" /> + <el-button type="primary">查询</el-button> + <el-button plain>重置</el-button> + </div> + </el-col> + </el-row> + <div class="homeCard"> + <div class="main-card"> + <el-row class="cardTop"> + <el-col :span="12" class="mainCardBtn"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新建</el-button> + <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button> + </el-col> + <el-button type="primary" :icon="Refresh" size="default" /> + </el-row> + <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" /> + <el-table-column property="name" label="任务名称" width="200" /> + <el-table-column property="type" label="任务类型" /> + <el-table-column property="execClassgroup" label="巡检班组" /> + <el-table-column property="frequency" label="检查频次" /> + <el-table-column property="unit" label="频次单位" /> + <el-table-column property="chainLength" label="巡检链长度" width="160" /> + <el-table-column property="startTime" label="任务开始时间" width="180" /> + <!-- <el-table-column property="validTime" label="任务有效时间" width="180"/>--> + <el-table-column property="creater" label="创建人" /> + <el-table-column property="createTime" label="创建时间" width="180" /> + <el-table-column property="status" label="状态" width="60" /> + <el-table-column fixed="right" label="操作" align="center" width="300"> + <template #default="scope"> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> + <el-button link type="primary" size="small" :icon="Edit" @click="editRecord(scope.$index, scope.row)">修改</el-button> + <el-switch v-model="scope.row.status" inline-prompt active-text="开" inactive-text="关" active-value="开启" inactive-value="关闭" style="margin: 0 10px" /> + <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecord(scope.$index)">删除</el-button> + </template> + </el-table-column> + </el-table> + <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> + </div> + </div> - <el-dialog v-model="dialogDetails" title="巡检任务"> - <el-form :model="details" label-width="120px"> - <el-row> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="任务名称"> - <el-input - v-model="details.name" - readonly - /> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="任务类型"> - <el-input - v-model="details.type" - readonly - /> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="巡检部门"> - <el-input - v-model="details.execDepId" - readonly - /> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="巡检班组"> - <el-input - v-model="details.execClassgroup" - readonly - /> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="检查频次" prop="frequency"> - <el-input - v-model="details.frequency" - readonly - > - <template #append> - <el-input - v-model="details.unit" - readonly - /> - </template> - </el-input> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="提前通知时间"> - <el-input - v-model="details.noticeTime" - readonly - /> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="任务开始时间"> - <el-input - v-model="details.startTime" - readonly - /> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="周期有效时间"> - <el-input - v-model="details.validTime" - readonly - /> - </el-form-item> - </el-col> - <el-col :span="24" style="margin-bottom: 20px"> - <el-form-item label="巡检链"> - <div style="width: 100%;margin-left: -30px"> - <div v-for="(item,index) in details.shiftSteps" class="stepItem"> - <div class="stepNum">{{index+1}}</div> - <div class="stepCard"> - <el-card class="box-card"> - <template #header> - <div class="card-header"> - <div>{{item.pointId}}</div> - </div> - </template> - <div class="text item">所属设备区域:<span>{{item.regionUuid}}</span></div> - <div class="text item">关联RFID:<span>{{item.rfidId}}</span></div> - <div class="text item">巡检指标:<span>{{item.quotaId}}</span></div> - <div class="text item">数据填报类型:<span>{{item.dataReportType}}</span></div> - <div class="text item">数据参考值:<span>{{item.firstReferenceValue?item.firstReferenceValue:(item.secondReferenceValue?item.secondReferenceValue:item.thirdReferenceValue)}}</span></div> - </el-card> - </div> - </div> - </div> - </el-form-item> - </el-col> - <el-form-item> - <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> - </el-form-item> - </el-row> - </el-form> - </el-dialog> + <el-dialog v-model="dialogDetails" title="巡检任务"> + <el-form :model="details" label-width="120px"> + <el-row> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务名称"> + <el-input v-model="details.name" readonly /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务类型"> + <el-input v-model="details.type" readonly /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检部门"> + <el-input v-model="details.execDepId" readonly /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检班组"> + <el-input v-model="details.execClassgroup" readonly /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="检查频次" prop="frequency"> + <el-input v-model="details.frequency" readonly> + <template #append> + <el-input v-model="details.unit" readonly /> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="提前通知时间"> + <el-input v-model="details.noticeTime" readonly /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务开始时间"> + <el-input v-model="details.startTime" readonly /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="周期有效时间"> + <el-input v-model="details.validTime" readonly /> + </el-form-item> + </el-col> + <el-col :span="24" style="margin-bottom: 20px"> + <el-form-item label="巡检链"> + <div style="width: 100%; margin-left: -30px"> + <div v-for="(item, index) in details.shiftSteps" class="stepItem"> + <div class="stepNum">{{ index + 1 }}</div> + <div class="stepCard"> + <el-card class="box-card"> + <template #header> + <div class="card-header"> + <div>{{ item.pointId }}</div> + </div> + </template> + <div class="text item"> + 所属设备区域:<span>{{ item.regionUuid }}</span> + </div> + <div class="text item"> + 关联RFID:<span>{{ item.rfidId }}</span> + </div> + <div class="text item"> + 巡检指标:<span>{{ item.quotaId }}</span> + </div> + <div class="text item"> + 数据填报类型:<span>{{ item.dataReportType }}</span> + </div> + <div class="text item"> + 数据参考值:<span>{{ item.firstReferenceValue ? item.firstReferenceValue : item.secondReferenceValue ? item.secondReferenceValue : item.thirdReferenceValue }}</span> + </div> + </el-card> + </div> + </div> + </div> + </el-form-item> + </el-col> + <el-form-item> + <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> + </el-form-item> + </el-row> + </el-form> + </el-dialog> - <el-dialog v-model="dialogAddRecord" title="巡检任务编辑" @close="closeAdd" @open="openAdd"> - <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules"> - <el-row> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="任务名称" prop="name"> - <el-input - v-model="addRecord.name" - > - </el-input> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="任务类型" prop="type"> - <el-select v-model="addRecord.type"> - <el-option label="日常检查" value="日常检查" /> - <el-option label="周期检查" value="周期检查" /> - </el-select> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="巡检部门" prop="validTime"> - <el-select v-model="addRecord.execDepId" placeholder="请选择"> - <el-option label="部门一" value="部门一" /> - <el-option label="部门二" value="部门二" /> - </el-select> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="巡检班组" prop="execClassgroupId"> - <el-select v-model="addRecord.execClassgroup" placeholder="请选择"> - <el-option label="班组1" value="班组1" /> - <el-option label="班组2" value="班组2" /> - <el-option label="班组3" value="班组3" /> - </el-select> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="检查频次" prop="frequency"> - <el-input - v-model="addRecord.frequency" - placeholder="请输入检查频次" - > - <template #append> - <el-select v-model="addRecord.unit" placeholder="选择单位"> - <el-option label="分钟" value="分钟" /> - <el-option label="小时" value="小时" /> - <el-option label="天" value="天" /> - </el-select> - </template> - </el-input> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="提前通知时间" prop="noticeTime"> - <el-select v-model="addRecord.noticeTime" placeholder="选择时间"> - <el-option label="15分钟" value="15分钟" /> - <el-option label="30分钟" value="30分钟" /> - <el-option label="45分钟" value="45分钟" /> - <el-option label="60分钟" value="60分钟" /> - <el-option label="75分钟" value="75分钟" /> - <el-option label="90分钟" value="90分钟" /> - </el-select> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="周期开始时间" prop="startTime"> - <el-date-picker - v-model="addRecord.startTime" - type="datetime" - format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" - /> - </el-form-item> - </el-col> - <el-col :span="12" style="margin-bottom: 20px"> - <el-form-item label="任务有效时间" prop="validTime"> - <el-select v-model="addRecord.validTime" placeholder="选择时间"> - <el-option label="15分钟" value="15分钟" /> - <el-option label="30分钟" value="30分钟" /> - <el-option label="45分钟" value="45分钟" /> - <el-option label="60分钟" value="60分钟" /> - <el-option label="75分钟" value="75分钟" /> - <el-option label="90分钟" value="90分钟" /> - </el-select> - </el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="创建巡检链"> - <div style="width: 100%;margin-bottom: 20px"> - <el-button type="primary" :icon="Plus" size="default" @click="dialogAddShift = true">新增巡检点</el-button> - </div> - <div style="width: 100%;margin-left: -30px"> - <div v-for="(item,index) in addRecord.shiftSteps" class="stepItem"> - <div class="stepNum">{{index+1}}</div> - <div class="stepCard"> - <el-card class="box-card"> - <template #header> - <div class="card-header"> - <div>{{item.pointId}}</div> - </div> - </template> - <div class="text item">所属设备区域:<span>{{item.regionUuid}}</span></div> - <div class="text item">关联RFID:<span>{{item.rfidId}}</span></div> - <div class="text item">巡检指标:<span>{{item.quotaId}}</span></div> - <div class="text item">数据填报类型:<span>{{item.dataReportType}}</span></div> - <div class="text item">数据参考值:<span>{{item.firstReferenceValue?item.firstReferenceValue:(item.secondReferenceValue?item.secondReferenceValue:item.thirdReferenceValue)}}</span></div> - </el-card> - </div> - <div> -<!-- <el-button type="primary" size="default" @click="addFlow(index)">新增下一区域</el-button>--> - <el-button type="primary" size="default" @click="editFlow(index)">修改</el-button> - <el-button type="danger" size="default" @click="deleteFlow(index)">删除</el-button> - </div> - </div> - </div> - </el-form-item> - </el-col> - </el-row> - <el-form-item> - <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> - <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> - </el-form-item> - </el-form> - </el-dialog> - <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> - <span>您确定要删除该条记录吗?</span> - <template #footer> - <span class="dialog-footer"> - <el-button @click="deleteDialog = false" size="default">取消</el-button> - <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button> - </span> - </template> - </el-dialog> - <el-dialog v-model="deleteShiftDialog" title="提示" width="30%" center @close="indexShiftClear"> - <span>您确定要删除该巡检点吗?</span> - <template #footer> - <span class="dialog-footer"> - <el-button @click="deleteShiftDialog = false" size="default">取消</el-button> - <el-button type="primary" @click="conFirmShiftDelete" size="default">确认</el-button> - </span> - </template> - </el-dialog> - <el-dialog v-model="dialogAddShift" title="新增巡检点" @close="closeAddShift"> - <el-form :model="addShift" label-width="120px" ref="addShiftRef" :rules="addShiftRules"> - <el-form-item label="选择巡检点" prop="pointId"> - <el-select v-model="addShift.pointId"> - <el-option label="73011" value="73011" /> - <el-option label="73012" value="73012" /> - </el-select> - </el-form-item> - <el-form-item label="所属设备区域"> - <el-input - v-model="addShift.regionId" - readonly - /> - </el-form-item> - <el-form-item label="关联RFID"> - <el-input - v-model="addShift.rfidId" - readonly - /> - </el-form-item> - <el-form-item label="选择巡检指标" prop="quotaId"> - <el-input v-model="addShift.quotaId" placeholder="Please input"> - <template #append>{{addShift.quotaUnit}}</template> - </el-input> - </el-form-item> - <el-form-item label="数据填报类型" prop="dataReportType"> - <el-select v-model="addShift.dataReportType"> - <el-option label="选择" value="选择" /> - <el-option label="填空" value="填空" /> - <el-option label="选择并填空" value="选择并填空" /> - </el-select> - </el-form-item> - <el-form-item v-if="addShift.dataReportType == '选择' || addShift.dataReportType == '选择并填空'" label="数据参考值" prop="firstReferenceValue"> - <el-select v-model="addShift.firstReferenceValue"> - <el-option label="正常" value="正常" /> - <el-option label="异常" value="异常" /> - </el-select> - </el-form-item> - <el-form-item v-if="addShift.dataReportType == '填空' || addShift.dataReportType == '选择并填空'" label="数据参考值"> - <el-input - v-model="addShift.secondReferenceValue" - type="number" - placeholder="请根据需求选择前方符号后再填写参考值,非必填" - > - <template #prepend> - <el-select v-model="addShift.secondReferenceSign" placeholder="Select" style="width: 115px"> - <el-option label=">" value=">" /> - <el-option label=">=" value=">=" /> - </el-select> - </template> - </el-input> - </el-form-item> - <el-form-item v-if="addShift.dataReportType == '填空' || addShift.dataReportType == '选择并填空'" label=""> - <el-input - v-model="addShift.thirdReferenceValue" - type="number" - placeholder="请根据需求选择前方符号后再填写参考值,非必填" - > - <template #prepend> - <el-select v-model="addShift.thirdReferenceSign" placeholder="Select" style="width: 115px"> - <el-option label="<" value="<"/> - <el-option label="<=" value="<="/> - </el-select> - </template> - </el-input> - </el-form-item> - <el-form-item> - <el-button type="warning" @click="dialogAddShift = false" size="default" plain>取消</el-button> - <el-button type="primary" @click="confirmAddShift(addShiftRef)" size="default">确认</el-button> - </el-form-item> - </el-form> - </el-dialog> - </div> + <el-dialog v-model="dialogAddRecord" title="巡检任务编辑" @close="closeAdd" @open="openAdd"> + <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules"> + <el-row> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务名称" prop="name"> + <el-input v-model="addRecord.name"> </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务类型" prop="type"> + <el-select v-model="addRecord.type"> + <el-option label="日常检查" value="日常检查" /> + <el-option label="周期检查" value="周期检查" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检部门" prop="validTime"> + <el-select v-model="addRecord.execDepId" placeholder="请选择"> + <el-option label="部门一" value="部门一" /> + <el-option label="部门二" value="部门二" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="巡检班组" prop="execClassgroupId"> + <el-select v-model="addRecord.execClassgroup" placeholder="请选择"> + <el-option label="班组1" value="班组1" /> + <el-option label="班组2" value="班组2" /> + <el-option label="班组3" value="班组3" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="检查频次" prop="frequency"> + <el-input v-model="addRecord.frequency" placeholder="请输入检查频次"> + <template #append> + <el-select v-model="addRecord.unit" placeholder="选择单位"> + <el-option label="分钟" value="分钟" /> + <el-option label="小时" value="小时" /> + <el-option label="天" value="天" /> + </el-select> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="提前通知时间" prop="noticeTime"> + <el-select v-model="addRecord.noticeTime" placeholder="选择时间"> + <el-option label="15分钟" value="15分钟" /> + <el-option label="30分钟" value="30分钟" /> + <el-option label="45分钟" value="45分钟" /> + <el-option label="60分钟" value="60分钟" /> + <el-option label="75分钟" value="75分钟" /> + <el-option label="90分钟" value="90分钟" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="周期开始时间" prop="startTime"> + <el-date-picker v-model="addRecord.startTime" type="datetime" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" /> + </el-form-item> + </el-col> + <el-col :span="12" style="margin-bottom: 20px"> + <el-form-item label="任务有效时间" prop="validTime"> + <el-select v-model="addRecord.validTime" placeholder="选择时间"> + <el-option label="15分钟" value="15分钟" /> + <el-option label="30分钟" value="30分钟" /> + <el-option label="45分钟" value="45分钟" /> + <el-option label="60分钟" value="60分钟" /> + <el-option label="75分钟" value="75分钟" /> + <el-option label="90分钟" value="90分钟" /> + </el-select> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="创建巡检链"> + <div style="width: 100%; margin-bottom: 20px"> + <el-button type="primary" :icon="Plus" size="default" @click="dialogAddShift = true">新增巡检点</el-button> + </div> + <div style="width: 100%; margin-left: -30px"> + <div v-for="(item, index) in addRecord.shiftSteps" class="stepItem"> + <div class="stepNum">{{ index + 1 }}</div> + <div class="stepCard"> + <el-card class="box-card"> + <template #header> + <div class="card-header"> + <div>{{ item.pointId }}</div> + </div> + </template> + <div class="text item"> + 所属设备区域:<span>{{ item.regionUuid }}</span> + </div> + <div class="text item"> + 关联RFID:<span>{{ item.rfidId }}</span> + </div> + <div class="text item"> + 巡检指标:<span>{{ item.quotaId }}</span> + </div> + <div class="text item"> + 数据填报类型:<span>{{ item.dataReportType }}</span> + </div> + <div class="text item"> + 数据参考值:<span>{{ item.firstReferenceValue ? item.firstReferenceValue : item.secondReferenceValue ? item.secondReferenceValue : item.thirdReferenceValue }}</span> + </div> + </el-card> + </div> + <div> + <!-- <el-button type="primary" size="default" @click="addFlow(index)">新增下一区域</el-button>--> + <el-button type="primary" size="default" @click="editFlow(index)">修改</el-button> + <el-button type="danger" size="default" @click="deleteFlow(index)">删除</el-button> + </div> + </div> + </div> + </el-form-item> + </el-col> + </el-row> + <el-form-item> + <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> + <span>您确定要删除该条记录吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + <el-dialog v-model="deleteShiftDialog" title="提示" width="30%" center @close="indexShiftClear"> + <span>您确定要删除该巡检点吗?</span> + <template #footer> + <span class="dialog-footer"> + <el-button @click="deleteShiftDialog = false" size="default">取消</el-button> + <el-button type="primary" @click="conFirmShiftDelete" size="default">确认</el-button> + </span> + </template> + </el-dialog> + <el-dialog v-model="dialogAddShift" title="新增巡检点" @close="closeAddShift"> + <el-form :model="addShift" label-width="120px" ref="addShiftRef" :rules="addShiftRules"> + <el-form-item label="选择巡检点" prop="pointId"> + <el-select v-model="addShift.pointId"> + <el-option label="73011" value="73011" /> + <el-option label="73012" value="73012" /> + </el-select> + </el-form-item> + <el-form-item label="所属设备区域"> + <el-input v-model="addShift.regionId" readonly /> + </el-form-item> + <el-form-item label="关联RFID"> + <el-input v-model="addShift.rfidId" readonly /> + </el-form-item> + <el-form-item label="选择巡检指标" prop="quotaId"> + <el-input v-model="addShift.quotaId" placeholder="Please input"> + <template #append>{{ addShift.quotaUnit }}</template> + </el-input> + </el-form-item> + <el-form-item label="数据填报类型" prop="dataReportType"> + <el-select v-model="addShift.dataReportType"> + <el-option label="选择" value="选择" /> + <el-option label="填空" value="填空" /> + <el-option label="选择并填空" value="选择并填空" /> + </el-select> + </el-form-item> + <el-form-item v-if="addShift.dataReportType == '选择' || addShift.dataReportType == '选择并填空'" label="数据参考值" prop="firstReferenceValue"> + <el-select v-model="addShift.firstReferenceValue"> + <el-option label="正常" value="正常" /> + <el-option label="异常" value="异常" /> + </el-select> + </el-form-item> + <el-form-item v-if="addShift.dataReportType == '填空' || addShift.dataReportType == '选择并填空'" label="数据参考值"> + <el-input v-model="addShift.secondReferenceValue" type="number" placeholder="请根据需求选择前方符号后再填写参考值,非必填"> + <template #prepend> + <el-select v-model="addShift.secondReferenceSign" placeholder="Select" style="width: 115px"> + <el-option label=">" value=">" /> + <el-option label=">=" value=">=" /> + </el-select> + </template> + </el-input> + </el-form-item> + <el-form-item v-if="addShift.dataReportType == '填空' || addShift.dataReportType == '选择并填空'" label=""> + <el-input v-model="addShift.thirdReferenceValue" type="number" placeholder="请根据需求选择前方符号后再填写参考值,非必填"> + <template #prepend> + <el-select v-model="addShift.thirdReferenceSign" placeholder="Select" style="width: 115px"> + <el-option label="<" value="<" /> + <el-option label="<=" value="<=" /> + </el-select> + </template> + </el-input> + </el-form-item> + <el-form-item> + <el-button type="warning" @click="dialogAddShift = false" size="default" plain>取消</el-button> + <el-button type="primary" @click="confirmAddShift(addShiftRef)" size="default">确认</el-button> + </el-form-item> + </el-form> + </el-dialog> + </div> </template> <script lang="ts"> - import { toRefs, reactive, ref } 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, ElMessage } from 'element-plus' - import { FormInstance, FormRules } from 'element-plus' - let global: any = { - homeChartOne: null, - homeChartTwo: null, - homeCharThree: null, - dispose: [null, '', undefined], - }; +import { toRefs, reactive, ref } 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, ElMessage } from 'element-plus'; +import { FormInstance, FormRules } from 'element-plus'; +let global: any = { + homeChartOne: null, + homeChartTwo: null, + homeCharThree: null, + dispose: [null, '', undefined] +}; - interface stateType { - homeOne: Array <type> - } - interface type { +interface stateType { + homeOne: Array<type>; +} +interface type {} +export default { + name: 'index', + components: {}, + setup() { + const userInfo = useUserInfo(); + const { userInfos } = storeToRefs(userInfo); - } - export default { - name: 'workingHoursSet', - components: {}, - setup() { - const userInfo = useUserInfo() - const {userInfos} = storeToRefs(userInfo); + const state = reactive({ + searchType: '任务名称', + typeOptions: [ + { + name: '日常检查', + value: '日常检查' + }, + { + name: '周期检查', + value: '周期检查' + } + ], + createrOptions: [ + { + name: '张三', + value: '张三' + }, + { + name: '李四', + value: '李四' + } + ], + inspectorOptions: [ + { + name: '李四', + value: '李四' + }, + { + name: '张三', + value: '张三' + } + ], + searchUnit: '小时', + searchContent: '', + currentPage: 1, + pageSize: 10, + chosenIndex: null, + chosenShiftIndex: null, + chosenInspectionIndex: null, + dialogDetails: false, + dialogAddRecord: false, + deleteDialog: false, + deleteShiftDialog: false, + deleteInspectionDialog: false, + dialogAddShift: false, + tableData: [], + addRecord: { + name: '', + type: '', + creater: '', + inspector: '', + frequency: 1, + unit: '小时', + startTime: '', + validTime: '', + createTime: '', + chainLength: 0, + status: '开启', + shiftSteps: [] + }, + addShift: { + secondReferenceSign: '>', + thirdReferenceSign: '<' + }, + details: {} + }); - const state = reactive({ - searchType: '任务名称', - typeOptions: [ - { - name: '日常检查', - value: '日常检查' - }, - { - name: '周期检查', - value: '周期检查' - } - ], - createrOptions: [ - { - name: '张三', - value: '张三' - }, - { - name: '李四', - value: '李四' - } - ], - inspectorOptions: [ - { - name: '李四', - value: '李四' - }, - { - name: '张三', - value: '张三' - } - ], - searchUnit: '小时', - searchContent: '', - currentPage: 1, - pageSize: 10, - chosenIndex: null, - chosenShiftIndex: null, - chosenInspectionIndex: null, - dialogDetails: false, - dialogAddRecord: false, - deleteDialog: false, - deleteShiftDialog: false, - deleteInspectionDialog: false, - dialogAddShift: false, - tableData: [ - { - name: '甲醛装置()列现场岗位巡检', - type: '周期检查', - creater: '管理员A', - execClassgroup: '张三', - frequency: 2, - unit: '小时', - noticeTime: '2022-07-02 13:01:37', - startTime: '2022-07-02 13:01:37', - validTime: '30分钟', - createTime: '2022-07-02 12:03:47', - chainLength: 20, - status: '开启', - shiftSteps: [ - { - pointId: 73011, - regionUuid: '风机系统', - rfidId: 21054, - quotaId: '压力', - dataReportType: '选择' - }, - { - name: 'A场所', - inspectorData: [ - { - sort: 1, - name: '73021', - section: '风机系统', - rfid: '风机系统1标签', - norm: '风机声音', - reference: '10<正常<50' - }, - { - sort: 2, - name: '73022', - section: '风机系统', - rfid: '风机系统2标签', - norm: '设备温度', - reference: '20<正常<50' - }, - { - sort: 3, - name: '73023', - section: '风机系统', - rfid: '风机系统3标签', - norm: '风机震动', - reference: '30<正常<50' - } - ] - } - ] - }, - { - name: 'A车间日常巡检', - type: '日常检查', - creater: '管理员B', - execClassgroup: '李四', - frequency: 4, - unit: '小时', - noticeTime: '2022-07-02 13:01:37', - startTime: '2022-07-02 12:45:37', - validTime: '30分钟', - createTime: '2022-07-02 08:15:41', - chainLength: 15, - status: '开启' - } - ], - addRecord: { - name: '', - type: '', - creater: '', - inspector: '', - frequency: 1, - unit: '小时', - startTime: '', - validTime: '', - createTime: '', - chainLength: 0, - status: '开启', - shiftSteps: [] - }, - addShift: { - secondReferenceSign: '>', - thirdReferenceSign: '<' - }, - details: {} - }) + //获取巡检任务数据 + const getInspectionTask = () => {}; - // 顶部筛选搜索 - const changeSearch = () => { - state.searchContent = '' - } + // 顶部筛选搜索 + const changeSearch = () => { + state.searchContent = ''; + }; - const handleSizeChange = (val: number) => { - console.log(`${val} items per page`) - } - const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`) - } + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`); + }; + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`); + }; - // 时间格式化 - const timeForm = { - hour12: false, - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - second: '2-digit' - } - const handleChange = (value) => { - state.addRecord.content = [] - console.log(JSON.parse(JSON.stringify(value))) - } - const addRef = ref<FormInstance>() - const addShiftRef = ref<FormInstance>() - const addInspectionRef = ref<FormInstance>() + // 时间格式化 + const timeForm = { + hour12: false, + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + }; + const handleChange = (value) => { + state.addRecord.content = []; + console.log(JSON.parse(JSON.stringify(value))); + }; + const addRef = ref<FormInstance>(); + const addShiftRef = ref<FormInstance>(); + const addInspectionRef = ref<FormInstance>(); - // 表单校验 - const addRules = reactive<FormRules>({ - name: [{required: true, message: '该内容不能为空', trigger: 'blur'}], - type: [{required: true, message: '该内容不能为空', trigger: 'blur'}], - execClassgroupId: [{required: true, message: '该内容不能为空', trigger: 'blur'}], - frequency: [{required: true, message: '该内容不能为空', trigger: 'blur'}], - unit: [{required: true, message: '该内容不能为空', trigger: 'blur'}], - noticeTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}], - startTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}], - validTime: [{required: true, message: '该内容不能为空', trigger: 'blur'}] - }) - const addShiftRules = reactive<FormRules>({ - pointId: [{required: true, message: '该内容不能为空', trigger: 'blur'}], - quotaId: [{required: true, message: '该内容不能为空', trigger: 'blur'}], - dataReportType: [{required: true, message: '该内容不能为空', trigger: 'blur'}], - firstReferenceValue: [{required: true, message: '该内容不能为空', trigger: 'blur'}] - }) + // 表单校验 + const addRules = reactive<FormRules>({ + name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + type: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + execClassgroupId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + frequency: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + unit: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + noticeTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + startTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + validTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }] + }); + const addShiftRules = reactive<FormRules>({ + pointId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + quotaId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + dataReportType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], + firstReferenceValue: [{ required: true, message: '该内容不能为空', trigger: 'blur' }] + }); - // 查看记录 - const viewRecord = (row) => { - state.details = JSON.parse(JSON.stringify(row)) - state.dialogDetails = true - } + // 查看记录 + const viewRecord = (row) => { + state.details = JSON.parse(JSON.stringify(row)); + state.dialogDetails = true; + }; - // 删除记录 - const deleteRecord = (index) => { - state.chosenIndex = index - state.deleteDialog = true - } - const conFirmDelete = () => { - state.tableData.splice(state.chosenIndex, 1) - state.deleteDialog = false - } + // 删除记录 + const deleteRecord = (index) => { + state.chosenIndex = index; + state.deleteDialog = true; + }; + const conFirmDelete = () => { + state.tableData.splice(state.chosenIndex, 1); + state.deleteDialog = false; + }; - // 修改添加记录 - const editRecord = (index, row) => { - state.chosenIndex = index - state.dialogAddRecord = true - state.addRecord = JSON.parse(JSON.stringify(row)) - } - const confirmAddRecord = async (formEl: FormInstance | undefined) => { - if (!formEl) return - await formEl.validate((valid, fields) => { - if (valid) { - if (state.chosenIndex == null) { - if (!state.addRecord.shiftSteps || state.addRecord.shiftSteps.length == 0) { - ElMessage({ - message: '请先设置巡检链后再提交', - type: 'warning', - }) - return - } else { - state.addRecord.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-') - state.addRecord.chainLength = state.addRecord.shiftSteps.length - state.addRecord.status = '开启' - state.tableData.unshift(state.addRecord) - } - } else { - if (state.addRecord.shiftSteps.length == 0) { - ElMessage({ - message: '请先设置巡检链后再提交', - type: 'warning', - }) - return - } else { - state.tableData[state.chosenIndex] = state.addRecord - } - } - state.dialogAddRecord = false - } else { - console.log('error submit!', fields) - } - }) + // 修改添加记录 + const editRecord = (index, row) => { + state.chosenIndex = index; + state.dialogAddRecord = true; + state.addRecord = JSON.parse(JSON.stringify(row)); + }; + const confirmAddRecord = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + if (state.chosenIndex == null) { + if (!state.addRecord.shiftSteps || state.addRecord.shiftSteps.length == 0) { + ElMessage({ + message: '请先设置巡检链后再提交', + type: 'warning' + }); + return; + } else { + state.addRecord.createTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-'); + state.addRecord.chainLength = state.addRecord.shiftSteps.length; + state.addRecord.status = '开启'; + state.tableData.unshift(state.addRecord); + } + } else { + if (state.addRecord.shiftSteps.length == 0) { + ElMessage({ + message: '请先设置巡检链后再提交', + type: 'warning' + }); + return; + } else { + state.tableData[state.chosenIndex] = state.addRecord; + } + } + state.dialogAddRecord = false; + } else { + console.log('error submit!', fields); + } + }); + }; - } + // 添加弹窗打开前预操作 + const openAdd = () => { + state.addRecord.unit = '小时'; + }; - // 添加弹窗打开前预操作 - const openAdd = () => { - state.addRecord.unit = '小时' - } + // 弹窗关闭后判断数据初始化 + const closeAdd = () => { + state.addRecord = {}; + state.chosenIndex = null; + state.addShift = {}; + state.chosenShiftIndex = null; + }; + const indexClear = () => { + state.chosenIndex = null; + }; + const indexShiftClear = () => { + state.chosenShiftIndex = null; + }; - // 弹窗关闭后判断数据初始化 - const closeAdd = () => { - state.addRecord = {} - state.chosenIndex = null - state.addShift = {} - state.chosenShiftIndex = null - } - const indexClear = () => { - state.chosenIndex = null - } - const indexShiftClear = () => { - state.chosenShiftIndex = null - } + // 排序 + // function compare(key) { + // return function (value1, value2) { + // var val1 = value1[key]; + // var val2 = value2[key]; + // return val1 - val2; + // } + // } - // 排序 - // function compare(key) { - // return function (value1, value2) { - // var val1 = value1[key]; - // var val2 = value2[key]; - // return val1 - val2; - // } - // } + // 添加删除巡检设施区域 + // const addFlow = (index) => { + // state.dialogAddShift = true + // state.chosenShiftIndex = index + // } - // 添加删除巡检设施区域 - // const addFlow = (index) => { - // state.dialogAddShift = true - // state.chosenShiftIndex = index - // } + // 编辑巡检点 + const editFlow = (index) => { + state.chosenShiftIndex = index; + state.addShift = JSON.parse(JSON.stringify(state.addRecord.shiftSteps[index])); + state.dialogAddShift = true; + }; - // 编辑巡检点 - const editFlow = (index) =>{ - state.chosenShiftIndex = index - state.addShift = JSON.parse(JSON.stringify(state.addRecord.shiftSteps[index])) - state.dialogAddShift = true - } + // 删除巡检点 + const deleteFlow = (index) => { + state.deleteShiftDialog = true; + state.chosenShiftIndex = index; + }; + const conFirmShiftDelete = () => { + state.addRecord.shiftSteps.splice(state.chosenShiftIndex, 1); + state.deleteShiftDialog = false; + }; + // 增加修改巡检点 + const confirmAddShift = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + if (state.chosenShiftIndex == null) { + if (!state.addRecord.shiftSteps) { + state.addRecord.shiftSteps = []; + } + state.addRecord.shiftSteps.push(state.addShift); + } else { + state.addRecord.shiftSteps[state.chosenShiftIndex] = state.addShift; + } + state.dialogAddShift = false; + } else { + console.log('error submit!', fields); + } + }); + }; - // 删除巡检点 - const deleteFlow = (index) => { - state.deleteShiftDialog = true - state.chosenShiftIndex = index - } - const conFirmShiftDelete = () => { - state.addRecord.shiftSteps.splice(state.chosenShiftIndex, 1) - state.deleteShiftDialog = false - } - // 增加修改巡检点 - const confirmAddShift = async (formEl: FormInstance | undefined) => { - if (!formEl) return - await formEl.validate((valid, fields) => { - if (valid) { - if(state.chosenShiftIndex == null){ - if(!state.addRecord.shiftSteps){state.addRecord.shiftSteps = []} - state.addRecord.shiftSteps.push(state.addShift) - }else{ - state.addRecord.shiftSteps[state.chosenShiftIndex] = state.addShift - } - state.dialogAddShift = false - } else { - console.log('error submit!', fields) - } - }) - } + const closeAddShift = () => { + state.addShift = {}; + state.chosenShiftIndex = null; + }; - const closeAddShift = () => { - state.addShift = {} - state.chosenShiftIndex = null - } - - // 折线图 - const renderMenu = async (value: string) => { - Session.set('projectId', value) - userInfos.value.projectId = value - await initBackEndControlRoutes(); - }; - - return { - addRef, - addShiftRef, - addInspectionRef, - addRules, - addShiftRules, - View, - Edit, - Delete, - Refresh, - Plus, - changeSearch, - handleSizeChange, - handleCurrentChange, - handleChange, - viewRecord, - deleteRecord, - conFirmDelete, - openAdd, - editRecord, - confirmAddRecord, - closeAdd, - conFirmShiftDelete, - confirmAddShift, - closeAddShift, - editFlow, - deleteFlow, - indexClear, - indexShiftClear, - renderMenu, - ...toRefs(state) - } - } - } + return { + addRef, + addShiftRef, + addInspectionRef, + addRules, + addShiftRules, + View, + Edit, + Delete, + Refresh, + Plus, + changeSearch, + handleSizeChange, + handleCurrentChange, + handleChange, + viewRecord, + deleteRecord, + conFirmDelete, + openAdd, + editRecord, + confirmAddRecord, + closeAdd, + conFirmShiftDelete, + confirmAddShift, + closeAddShift, + editFlow, + deleteFlow, + indexClear, + indexShiftClear, + ...toRefs(state) + }; + } +}; </script> <style scoped lang="scss"> - $homeNavLengh: 8; - .home-container { - height: calc(100vh - 114px); - box-sizing: border-box; - overflow: hidden; - .homeCard{ - width: 100%; - padding: 20px; - box-sizing: border-box; - background: #fff; - border-radius: 4px; +$homeNavLengh: 8; +.home-container { + height: calc(100vh - 114px); + box-sizing: border-box; + overflow: hidden; + .homeCard { + width: 100%; + padding: 20px; + box-sizing: border-box; + background: #fff; + border-radius: 4px; - .main-card{ - width: 100%; - height: 100%; - .cardTop{ - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; - .mainCardBtn{ - margin: 0; - } - } - .pageBtn{ - height: 60px; - display: flex; - align-items: center; - justify-content: right; + .main-card { + width: 100%; + height: 100%; + .cardTop { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + .mainCardBtn { + margin: 0; + } + } + .pageBtn { + 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; - } - } - } - &:last-of-type{ - height: calc(100% - 100px); - } - } - .el-row{ - display: flex; - align-items: center; - margin-bottom: 20px; - &:last-child { - margin-bottom: 0; - } - .grid-content{ - align-items: center; - min-height: 36px; - } + .demo-pagination-block + .demo-pagination-block { + margin-top: 10px; + } + .demo-pagination-block .demonstration { + margin-bottom: 16px; + } + } + } + &:last-of-type { + height: calc(100% - 100px); + } + } + .el-row { + display: flex; + align-items: center; + margin-bottom: 20px; + &: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; + .topInfo { + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; - &>div{ - white-space: nowrap; - margin-right: 20px; - } - } - } - } - .stepItem{ - width: 100%; - display: flex; - align-items: flex-start; - margin-bottom: 30px; - margin-left: 30px; - padding-bottom: 30px; - border-left: 2px solid #ccc; - &:first-of-type{ - margin-top: 30px; - } - &:last-of-type{ - margin-bottom: 0; - border-left: none; - } - .stepNum { - width: 30px; - height: 30px; - border-radius: 15px; - box-sizing: border-box; - color: #333; - border: 1px solid #999; - line-height: 28px; - text-align: center; - margin-right: 10px; - margin-left: -16px; - margin-top: -30px; - } - .stepCard { - width: 100%; - margin-top: -30px; + & > div { + white-space: nowrap; + margin-right: 20px; + } + } + } +} +.stepItem { + width: 100%; + display: flex; + align-items: flex-start; + margin-bottom: 30px; + margin-left: 30px; + padding-bottom: 30px; + border-left: 2px solid #ccc; + &:first-of-type { + margin-top: 30px; + } + &:last-of-type { + margin-bottom: 0; + border-left: none; + } + .stepNum { + width: 30px; + height: 30px; + border-radius: 15px; + box-sizing: border-box; + color: #333; + border: 1px solid #999; + line-height: 28px; + text-align: center; + margin-right: 10px; + margin-left: -16px; + margin-top: -30px; + } + .stepCard { + width: 100%; + margin-top: -30px; - .box-card { - width: 100%; - &:deep(.el-card__header){ - padding: 10px 15px - } - .card-header { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - &>div:first-of-type{ - margin-right: 80px; - font-size: 18px; - font-weight: bold; - } - } - } - } - &:hover .card-header{ - color: #0098F5; - } - &:hover .stepNum{ - border: 2px solid #0098F5; - color: #0098F5; - } - } - .el-input{ - width: 100% !important; - } - :deep(.el-date-editor){ - width: 100%; - } - .el-select{ - width: 100%; - } + .box-card { + width: 100%; + &:deep(.el-card__header) { + padding: 10px 15px; + } + .card-header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + & > div:first-of-type { + margin-right: 80px; + font-size: 18px; + font-weight: bold; + } + } + } + } + &:hover .card-header { + color: #0098f5; + } + &:hover .stepNum { + border: 2px solid #0098f5; + color: #0098f5; + } +} +.el-input { + width: 100% !important; +} +:deep(.el-date-editor) { + width: 100%; +} +.el-select { + width: 100%; +} </style> -- Gitblit v1.9.2