| | |
| | | method: 'post', |
| | | data: data |
| | | }); |
| | | }, |
| | | getInspectRecordByIndex: (data: object) => { |
| | | return request({ |
| | | url: import.meta.env.VITE_API_URL + `/SafeCheckTask/select/listTaskByPageAndStatusAndTime`, |
| | | method: 'post', |
| | | data: data |
| | | }); |
| | | } |
| | | }; |
| | | } |
对比新文件 |
| | |
| | | <template> |
| | | <div class="system-add-menu-container"> |
| | | <el-dialog v-model="ifShowInspectTaskDialog" :title="title" width="60%"> |
| | | <el-form :model="inspectTaskForm" label-width="120px" ref="inspectTaskFormRef"> |
| | | <el-row> |
| | | <el-col :span="12" style="margin-bottom: 20px"> |
| | | <el-form-item label="任务名称" prop="unitName"> |
| | | <el-input v-model="inspectTaskForm.taskName" :disabled="!inspectPointConfirm" class="input-add" placeholder="请填写任务名称"> </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" style="margin-bottom: 20px"> |
| | | <el-form-item label="任务类型" prop="taskType"> |
| | | <el-select v-model="inspectTaskForm.taskType" :disabled="!inspectPointConfirm" class="input-add" placeholder="请选择任务类型"> |
| | | <el-option v-for="item in workTypeList" :key="item.id" :value="item.id" :label="item.name"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" style="margin-bottom: 20px"> |
| | | <el-form-item label="巡检部门" prop="execDepId"> |
| | | <el-cascader @change="giveClassGroup" :disabled="!inspectPointConfirm" placeholder="请选择巡检部门" :options="departmentList" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" clearable filterable class="input-add" v-model="inspectTaskForm.execDepId"> </el-cascader> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" style="margin-bottom: 20px"> |
| | | <el-form-item label="巡检班组" prop="execClassgroupId"> |
| | | <el-select v-model="inspectTaskForm.execClassgroupId" :disabled="!inspectPointConfirm" placeholder="请选择巡检班组" class="input-add"> |
| | | <el-option v-for="item in classGroup" :key="item.id" :value="item.id" :label="item.groupName"></el-option> |
| | | </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="inspectTaskForm.startTime" :disabled="!inspectPointConfirm" placeholder="请选择任务开始时间" type="datetime" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" class="input-add" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <div class="checkUnit-point"> |
| | | <el-tabs class="active" v-model="activeName"> |
| | | <el-tab-pane label="巡检链" name="inspectChain"> |
| | | <el-table :data="inspectTaskForm.points" fit style="width: 100%"> |
| | | <el-table-column type="index" label="序号" width="60" /> |
| | | <el-table-column prop="region" label="巡检点" show-overflow-tooltip align="center"></el-table-column> |
| | | <el-table-column prop="quotaContent" label="指标作业" show-overflow-tooltip align="center"></el-table-column> |
| | | <el-table-column prop="quotaUnit" label="指标单位" show-overflow-tooltip align="center"></el-table-column> |
| | | <!-- <el-table-column label="操作" width="150" align="center">--> |
| | | <!-- <template #default="scope">--> |
| | | <!-- <el-button size="small" text type="danger" @click="onDelCheckUnit(scope.$index, scope.row)">删除</el-button>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | </el-table> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | | <div align="right" v-show="inspectPointConfirm"> |
| | | <el-button type="warning" @click="inspectPointDialog = false" size="default" plain>取消</el-button> |
| | | <el-button type="primary" @click="submitInspectTask()" size="default">确认</el-button> |
| | | </div> |
| | | </el-form> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { reactive, toRefs, ref } from 'vue'; |
| | | import { RFIDApi } from '/@/api/intellectInspectSystem/RFID'; |
| | | import { ElMessage } from 'element-plus/es'; |
| | | import { inspectTaskApi } from '/@/api/intellectInspectSystem/inspectTask'; |
| | | import { facilityAreaApi } from '/@/api/intellectInspectSystem/facilityAreaManage'; |
| | | import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord'; |
| | | interface dataState { |
| | | title: string; |
| | | pointTitle: string; |
| | | activeName: string; |
| | | inspectPointConfirm: boolean; |
| | | inspectPointDialog: boolean; |
| | | ifShowInspectTaskDialog: boolean; |
| | | inspectPointForm: inspectPointForm; |
| | | inspectTaskForm: { |
| | | execClassgroupId: number | null; |
| | | execDepId: number | null; |
| | | id: number | null; |
| | | startTime: string | null; |
| | | taskName: string | null; |
| | | taskType: number | null; |
| | | validTime: string | null; |
| | | points: Array<inspectPointForm>; |
| | | }; |
| | | workTypeList: []; |
| | | departmentList: []; |
| | | timeList: []; |
| | | dataReportTypeList: Array<dataReport>; |
| | | firstReferenceValueList: Array<dataReport>; |
| | | secondReferenceSignList: Array<dataReport>; |
| | | thirdReferenceSignList: Array<dataReport>; |
| | | classGroupList: Array<classGroup>; |
| | | classGroup: Array<classGroup>; |
| | | quotaList: Array<quota>; |
| | | inspectPointAllList: Array<inspectPointAllState>; |
| | | } |
| | | interface inspectPointAllState { |
| | | id: number; |
| | | code: string; |
| | | regionId: number; |
| | | rfidId: number; |
| | | } |
| | | interface classGroup { |
| | | depId: number; |
| | | } |
| | | interface dataReport { |
| | | id: number; |
| | | name: string; |
| | | } |
| | | interface quota { |
| | | id: number; |
| | | type: string; |
| | | unit: string; |
| | | } |
| | | interface inspectPointForm { |
| | | id: number | null; |
| | | unitId: number | null; |
| | | unitUuid: string | null; |
| | | pointId: number | null; |
| | | pointUuid: string | null; |
| | | regionId: number | null; |
| | | regionUuid: string | null; |
| | | rfidId: number | null; |
| | | quotaId: number | null; |
| | | quotaUnit: string | null; |
| | | execSequence: number | null; |
| | | dataReportType: number | null; |
| | | firstReferenceValue: number | null; |
| | | secondReferenceSign: number | null; |
| | | secondReferenceValue: number | null; |
| | | thirdReferenceSign: number | null; |
| | | thirdReferenceValue: number | null; |
| | | } |
| | | export default { |
| | | name: 'inspectTaskDialog', |
| | | setup(props: any, context: any) { |
| | | const inspectTaskFormRef = ref(); |
| | | const data = reactive<dataState>({ |
| | | title: '', |
| | | pointTitle: '', |
| | | activeName: 'inspectChain', |
| | | inspectPointConfirm: false, |
| | | inspectPointDialog: false, |
| | | ifShowInspectTaskDialog: false, |
| | | inspectPointForm: { |
| | | id: null, |
| | | unitId: null, |
| | | unitUuid: null, |
| | | pointId: null, |
| | | pointUuid: null, |
| | | regionId: null, |
| | | regionUuid: null, |
| | | rfidId: null, |
| | | quotaId: null, |
| | | quotaUnit: null, |
| | | execSequence: null, |
| | | dataReportType: null, |
| | | firstReferenceValue: null, |
| | | secondReferenceSign: null, |
| | | secondReferenceValue: null, |
| | | thirdReferenceSign: null, |
| | | thirdReferenceValue: null |
| | | }, |
| | | inspectTaskForm: { |
| | | execClassgroupId: null, |
| | | execDepId: null, |
| | | id: null, |
| | | points: [], |
| | | startTime: null, |
| | | taskName: null, |
| | | taskType: null, |
| | | validTime: null |
| | | }, |
| | | workTypeList: [], |
| | | departmentList: [], |
| | | timeList: [], |
| | | classGroupList: [], |
| | | classGroup: [], |
| | | quotaList: [], |
| | | inspectPointAllList: [], |
| | | dataReportTypeList: [ |
| | | { id: 1, name: '选择' }, |
| | | { id: 2, name: '填空' }, |
| | | { id: 3, name: '选择并填空' } |
| | | ], |
| | | firstReferenceValueList: [ |
| | | { id: 0, name: '正常' }, |
| | | { id: 1, name: '异常' } |
| | | ], |
| | | secondReferenceSignList: [ |
| | | { id: 1, name: '>' }, |
| | | { id: 2, name: '>=' } |
| | | ], |
| | | thirdReferenceSignList: [ |
| | | { id: 3, name: '<' }, |
| | | { id: 4, name: '<=' } |
| | | ] |
| | | }); |
| | | |
| | | const openInspectPointDialog = (type: string, item: {}) => { |
| | | data.inspectPointDialog = true; |
| | | if (type === '新增') { |
| | | data.pointTitle = '新增巡检点'; |
| | | data.inspectPointForm = { |
| | | id: null, |
| | | unitId: null, |
| | | unitUuid: null, |
| | | pointId: null, |
| | | pointUuid: null, |
| | | regionId: null, |
| | | regionUuid: null, |
| | | rfidId: null, |
| | | quotaId: null, |
| | | quotaUnit: null, |
| | | execSequence: null, |
| | | dataReportType: null, |
| | | firstReferenceValue: null, |
| | | secondReferenceSign: null, |
| | | secondReferenceValue: null, |
| | | thirdReferenceSign: null, |
| | | thirdReferenceValue: null |
| | | }; |
| | | } else { |
| | | data.pointTitle = '修改巡检点'; |
| | | data.inspectPointForm = JSON.parse(JSON.stringify(item)); |
| | | } |
| | | }; |
| | | |
| | | const showInspectRecordDialog = (type: string, item: { id: number; uuid: string }, workTypeList: [], department: [], timeType: [], classGroupList: [], quotaList: [], inspectPointAllList: []) => { |
| | | data.quotaList = JSON.parse(JSON.stringify(quotaList)); |
| | | data.timeList = JSON.parse(JSON.stringify(timeType)); |
| | | data.inspectPointAllList = JSON.parse(JSON.stringify(inspectPointAllList)); |
| | | data.workTypeList = JSON.parse(JSON.stringify(workTypeList)); |
| | | data.departmentList = JSON.parse(JSON.stringify(department)); |
| | | data.classGroupList = JSON.parse(JSON.stringify(classGroupList)); |
| | | data.ifShowInspectTaskDialog = true; |
| | | data.inspectPointConfirm = false; |
| | | data.title = '查看巡检任务'; |
| | | inspectRecordApi() |
| | | .getInspectRecordById({ id: item.id, uuid: item.uuid }) |
| | | .then((res) => { |
| | | if (res.data.code === '200') { |
| | | data.inspectTaskForm.execDepId = res.data.data.execDepId; |
| | | giveClassGroup(); |
| | | data.inspectTaskForm = JSON.parse(JSON.stringify(res.data.data)); |
| | | } else { |
| | | } |
| | | }) |
| | | .catch((error) => {}); |
| | | }; |
| | | |
| | | const submitInspectPoint = async () => { |
| | | if (data.title === '新增巡检任务' && data.pointTitle === '新增巡检点') { |
| | | if (data.inspectTaskForm.points.length === 0) { |
| | | data.inspectPointForm.execSequence = 1; |
| | | } else { |
| | | data.inspectPointForm.execSequence = (data.inspectTaskForm.points[data.inspectTaskForm.points.length - 1].execSequence as number) + 1; |
| | | } |
| | | data.inspectTaskForm.points.push(data.inspectPointForm); |
| | | data.inspectPointDialog = false; |
| | | } else if (data.title === '新增巡检任务' && data.pointTitle === '修改巡检点') { |
| | | let result = data.inspectTaskForm.points.findIndex((item) => item.id === data.inspectPointForm.id); |
| | | data.inspectTaskForm.points[result] = data.inspectPointForm; |
| | | data.inspectPointDialog = false; |
| | | } else if (data.title === '修改巡检任务' && data.pointTitle === '新增巡检点') { |
| | | data.inspectPointForm.unitId = data.inspectTaskForm.id; |
| | | if (data.inspectTaskForm.points.length === 0) { |
| | | data.inspectPointForm.execSequence = 1; |
| | | } else { |
| | | data.inspectPointForm.execSequence = (data.inspectTaskForm.points[data.inspectTaskForm.points.length - 1].execSequence as number) + 1; |
| | | } |
| | | let res = await inspectTaskApi().addChainOfInspectTask(data.inspectPointForm); |
| | | if (res.data.code === '200') { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '巡检点新增成功', |
| | | duration: 2000 |
| | | }); |
| | | data.inspectPointDialog = false; |
| | | data.inspectTaskForm.points.push(data.inspectPointForm); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } else { |
| | | data.inspectPointForm.unitId = data.inspectTaskForm.id; |
| | | let res = await inspectTaskApi().modChainOfInspectTask(data.inspectPointForm); |
| | | if (res.data.code === '200') { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '巡检点修改成功', |
| | | duration: 2000 |
| | | }); |
| | | let result = data.inspectTaskForm.points.findIndex((item) => item.id === data.inspectPointForm.id); |
| | | data.inspectTaskForm.points[result] = data.inspectPointForm; |
| | | data.inspectPointDialog = false; |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | const deleteFlow = async (index: number, item: { id: number }) => { |
| | | if (data.pointTitle === '新增巡检点') { |
| | | data.inspectTaskForm.points.splice(index, 1); |
| | | } else { |
| | | let res = await inspectTaskApi().deleteChainOfInspectTask({ id: item.id, unitId: data.inspectTaskForm.id }); |
| | | if (res.data.code === '200') { |
| | | data.inspectTaskForm.points.splice(index, 1); |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '巡检点删除成功' |
| | | }); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | const giveRegionAndRFID = () => { |
| | | data.inspectPointForm.regionId = data.inspectPointAllList.find((item) => item.id === data.inspectPointForm.pointId)?.regionId as number; |
| | | data.inspectPointForm.rfidId = data.inspectPointAllList.find((item) => item.id === data.inspectPointForm.pointId)?.rfidId as number; |
| | | }; |
| | | |
| | | const giveClassGroup = () => { |
| | | data.inspectTaskForm.execClassgroupId = null; |
| | | data.classGroup = data.classGroupList.filter((item) => item.depId === data.inspectTaskForm.execDepId); |
| | | }; |
| | | |
| | | const giveQuotaUnit = () => { |
| | | data.inspectPointForm.quotaUnit = data.quotaList.find((item) => item.id === data.inspectPointForm.quotaId)?.unit as string; |
| | | }; |
| | | |
| | | const submitInspectTask = () => { |
| | | inspectTaskFormRef.value.validate(async (valid: Boolean) => { |
| | | if (valid) { |
| | | if (data.title === '新增巡检任务') { |
| | | let res = await inspectTaskApi().addInspectTask(data.inspectTaskForm); |
| | | if (res.data.code === '200') { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '巡检任务新增成功', |
| | | duration: 2000 |
| | | }); |
| | | data.ifShowInspectTaskDialog = false; |
| | | context.emit('refreshInspectTask'); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } else { |
| | | let res = await inspectTaskApi().modInspectTask(data.inspectTaskForm); |
| | | if (res.data.code === '200') { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '巡检指标修改成功', |
| | | duration: 2000 |
| | | }); |
| | | data.ifShowInspectTaskDialog = false; |
| | | context.emit('refreshInspectTask'); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | } |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: '请完善基本信息' |
| | | }); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | return { |
| | | ...toRefs(data), |
| | | inspectTaskFormRef, |
| | | deleteFlow, |
| | | giveQuotaUnit, |
| | | giveClassGroup, |
| | | submitInspectTask, |
| | | submitInspectPoint, |
| | | giveRegionAndRFID, |
| | | showInspectRecordDialog, |
| | | openInspectPointDialog |
| | | }; |
| | | } |
| | | }; |
| | | </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; |
| | | |
| | | .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; |
| | | } |
| | | |
| | | .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; |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | :deep(.el-date-editor) { |
| | | width: 100%; |
| | | } |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div class="home-container"> |
| | | <div style="height: 100%"> |
| | | <div class="homeCard"> |
| | | <div class="title"> |
| | | 当前巡检任务 |
| | | </div> |
| | | </div> |
| | | <div class="homeCard"> |
| | | <div class="main-card"> |
| | | <div class="list"> |
| | | <div class="cardTop" v-for="(item,index) in tableData" :key="index"> |
| | | <div class="left-info"> |
| | | <span class="num">{{pageSize * (pageIndex-1) + index + 1}}、</span> |
| | | <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="mid-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="right-info"> |
| | | <div v-if="item.taskStatus == 2" @click="toLine(item)" class="checkBtn">查看实时巡检</div> |
| | | <div v-else class="reviewBtn" @click="toDetails('查看',item)">[查看巡检记录]</div> |
| | | </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> |
| | | <inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog> |
| | | </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 inspectRecordDialog from './components/inspectRecordDialog.vue'; |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | | tableData: Array<string>; |
| | | pageIndex: number; |
| | | pageSize: number; |
| | | totalSize: number; |
| | | workTypeList: Array<type>; |
| | | departmentList: []; |
| | | timeType: Array<type>; |
| | | classGroupList: Array<classGroup>; |
| | | quotaList: []; |
| | | inspectPointAllList: []; |
| | | } |
| | | interface type { |
| | | id: number; |
| | | name: string; |
| | | } |
| | | interface classGroup { |
| | | id: number; |
| | | groupName: string; |
| | | } |
| | | export default { |
| | | name: 'workingHours', |
| | | components: { inspectRecordDialog }, |
| | | setup() { |
| | | const router = useRouter(); |
| | | const state = reactive<stateType>({ |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | totalSize: 0, |
| | | tableData: [], |
| | | 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(); |
| | | interface User { |
| | | name: string; |
| | | startTime: string; |
| | | endTime: string; |
| | | info: string; |
| | | } |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | getInspectRecord(); |
| | | }); |
| | | |
| | | // 分页获取工作时段列表 |
| | | const getInspectRecord = async () => { |
| | | const data = { pageSize: state.pageSize, pageIndex: state.pageIndex}; |
| | | let res = await inspectRecordApi().getInspectRecordByIndex(data); |
| | | if (res.data.code === '200'){ |
| | | console.log(res.data.data) |
| | | state.tableData = res.data.data.records |
| | | state.totalSize = res.data.data.total |
| | | } 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) =>{ |
| | | let id = JSON.parse(JSON.stringify(item)).id |
| | | console.log(id,'id') |
| | | router.push({ |
| | | path: 'intelligentLine', |
| | | 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, |
| | | Plus, |
| | | router, |
| | | inspectRecordDialogRef, |
| | | toLine, |
| | | toDetails, |
| | | handleSizeChange, |
| | | handleCurrentChange, |
| | | ...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; |
| | | |
| | | .title{ |
| | | font-size: 20px; |
| | | font-weight: bolder; |
| | | } |
| | | .main-card { |
| | | width: 100%; |
| | | height: 100%; |
| | | .cardTop { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 10px; |
| | | background: #daf3ff; |
| | | padding: 20px; |
| | | border-radius: 8px; |
| | | |
| | | .left-info{ |
| | | width: 50%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: left; |
| | | font-size: 14px; |
| | | color: #333; |
| | | overflow-x: auto; |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | .mid-info{ |
| | | width: 35%; |
| | | font-size: 14px; |
| | | color: #333; |
| | | |
| | | span{ |
| | | font-weight: bolder; |
| | | } |
| | | |
| | | .grey{ |
| | | color: #999; |
| | | } |
| | | .green{ |
| | | color: #44b100; |
| | | } |
| | | .blue{ |
| | | color: #409eff; |
| | | } |
| | | .red{ |
| | | color: red; |
| | | } |
| | | } |
| | | .right-info{ |
| | | width: 15%; |
| | | display: flex; |
| | | justify-content: right; |
| | | align-items: center; |
| | | font-size: 14px; |
| | | color: #fff; |
| | | |
| | | .checkBtn{ |
| | | padding: 10px 15px; |
| | | background: #409eff; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .reviewBtn{ |
| | | margin: 10px 15px; |
| | | cursor: pointer; |
| | | color: #44b100; |
| | | } |
| | | } |
| | | } |
| | | .list{ |
| | | height: calc(100% - 60px); |
| | | overflow-y: auto; |
| | | } |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | | &:last-of-type { |
| | | position: relative; |
| | | padding-top: 0; |
| | | height: calc(100% - 60px); |
| | | } |
| | | } |
| | | .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; |
| | | |
| | | & > div { |
| | | white-space: nowrap; |
| | | margin-right: 20px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .el-input { |
| | | width: 100% !important; |
| | | } |
| | | .el-date-editor::v-deep { |
| | | width: 100%; |
| | | } |
| | | .el-select { |
| | | width: 100%; |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div class="container"> |
| | | <div class="big-title" @click="goBack()">国泰新华智能巡检系统</div> |
| | | <div style="font-size: 14px; color: #00ffff; margin-top: 4px">{{ present }}</div> |
| | | <div style="height: 20px;font-size: 14px;line-height: 20px; color: #00ffff; margin-top: 4px">{{ present }}</div> |
| | | <div class="btns"> |
| | | <div class="fullbtn" @click="onScreenfullClick"> |
| | | <div class="toFull"> |
| | |
| | | <div class="line-map" v-if="dataList && dataList.length > 0"> |
| | | <div class="line-item" v-for="(item, index) in dataList" :key="index"> |
| | | <div class="picbox"> |
| | | <img src="../../../assets/loginPage/equipment.jpg" /> |
| | | <img src="../../../assets/loginPage/equipment.jpg"/> |
| | | <p> |
| | | RFID: <span>{{ item.rfid }}</span> |
| | | </p> |
| | |
| | | </p> |
| | | </div> |
| | | <div class="area-head" :class="item.points.some((e) => e.reportResult == null) ? 'fadeBorder' : ''"> |
| | | <div class="indicator" :class="item.points.some((e) => e.reportResult == null) ? 'someUndone' : item.points.some((e) => e.reportResult == 1) ? 'somewarning' : ''"> |
| | | <div class="indicator" :class="item.points.every((e) => e.reportResult == null) ? 'someUndone' : (item.points.some((e) => e.reportResult == 1) ? 'somewarning' : '')"> |
| | | <div class="indi-dot"></div> |
| | | <!-- <div class="indi-pulse"></div>--> |
| | | <!-- <div class="indi-pulse1"></div>--> |
| | |
| | | <div class="pulse"></div> |
| | | <div class="pulse1"></div> |
| | | </section> |
| | | <div> |
| | | <div :class="t.reportResult == null ? 'noBorder' : t.reportResult == 1 ? 'redBorder' : ''"> |
| | | <div> |
| | | <span>巡检点:</span><span>{{ t.point }}</span> |
| | | </div> |
| | |
| | | import screenfull from 'screenfull'; |
| | | import { lineApi } from '/@/api/intelligentLine'; |
| | | import { toRefs, reactive, ref, onMounted, onUnmounted, computed } from 'vue'; |
| | | |
| | | import {useRoute} from 'vue-router'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | | import { Session } from '/@/utils/storage'; |
| | |
| | | socket: any; |
| | | socketData: string; |
| | | data: Array<any>; |
| | | id: string |
| | | } |
| | | export default { |
| | | name: 'intelligentLine', |
| | |
| | | setup() { |
| | | const userInfo = useUserInfo(); |
| | | const { userInfos } = storeToRefs(userInfo); |
| | | const route = useRoute(); |
| | | const state = reactive<stateType>({ |
| | | present: '', |
| | | isScreenfull: false, |
| | | path: 'http://192.168.0.29:8008/ws/test/', |
| | | socketData: '', |
| | | socket: null, |
| | | data: [] |
| | | data: [], |
| | | id: '' |
| | | }); |
| | | |
| | | onMounted(() => { |
| | | setInterval(() => { |
| | | state.present = new Date().toLocaleString(); |
| | | }, 1000); |
| | | init(); |
| | | // getLine() |
| | | let curId = route.query.id |
| | | state.id = curId.toString() |
| | | console.log(state.id) |
| | | getLine(state.id) |
| | | init(state.id); |
| | | }); |
| | | |
| | | const dataList = computed(() => { |
| | |
| | | }); |
| | | |
| | | // socket获取数据 |
| | | const init = () => { |
| | | const init = (id:string) => { |
| | | if (typeof window.WebSocket === 'undefined') { |
| | | alert('您的浏览器不支持socket'); |
| | | } else { |
| | | // 实例化socket |
| | | var url = state.path + '80938081556545536'; |
| | | var url = state.path + id; |
| | | url = url.replace('https', 'ws').replace('http', 'ws'); |
| | | console.log(url, '获取地址'); |
| | | state.socket = new window.WebSocket(url); |
| | |
| | | }; |
| | | // 监听socket消息 |
| | | state.socket.onmessage = (msg) => { |
| | | // console.log(msg, 'msg'); |
| | | // console.log(typeof msg.data, 'type'); |
| | | if (msg.data === '连接成功') return; |
| | | // state.socketData = msg.data; |
| | | // console.log(JSON.parse(state.socketData), '------------------'); |
| | | // if (typeof JSON.parse(state.socketData) == Array) { |
| | | // debugger; |
| | | debugger; |
| | | userInfos.value.dataList = JSON.parse(msg.data); |
| | | console.log(state.data); |
| | | // } |
| | | // console.log(msg,'msg') |
| | | // console.log(this.data,'data-------') |
| | | }; |
| | | } |
| | | }; |
| | |
| | | }; |
| | | |
| | | // 接口获取数据 |
| | | const getLine = async () => { |
| | | let res = await lineApi().getLine({ id: '80647416891768832' }); |
| | | const getLine = async (id:string) => { |
| | | let res = await lineApi().getLine({ id: id }); |
| | | if (res.data.code === '200') { |
| | | console.log(res.data.data, '获取巡检点'); |
| | | state.data = res.data.data; |
| | | console.log(state.data, '---'); |
| | | userInfos.value.dataList = res.data.data; |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | |
| | | padding: 20px 40px 30px; |
| | | box-sizing: border-box; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | overflow: hidden; |
| | | overflow-x: scroll; |
| | | overflow-y: scroll; |
| | | overflow-x: auto; |
| | | overflow-y: auto; |
| | | |
| | | .line-map { |
| | | display: flex; |
| | |
| | | transform: translateY(-14px); |
| | | border-radius: 8px; |
| | | background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2)); |
| | | border: 1px solid rgba(54, 252, 252, 0.6); |
| | | border: 1px solid rgba(54, 252, 252, 1); |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .noBorder{ |
| | | border: 1px solid rgba(54, 252, 252, 0.1); |
| | | } |
| | | .redBorder{ |
| | | border: 1px solid #ff0000; |
| | | } |
| | | p { |
| | | width: 140px; |
| | | height: 50px; |