|
|
@@ -0,0 +1,546 @@
|
|
|
+<template>
|
|
|
+ <!-- 报工 -->
|
|
|
+ <el-dialog :visible.sync="visible" title="报工" width="80%">
|
|
|
+ <el-form>
|
|
|
+ <el-form-item label="实际起始时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="time"
|
|
|
+ type="datetimerange"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="实际开始日期"
|
|
|
+ end-placeholder="实际结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="page">
|
|
|
+ <div class="content-detail">
|
|
|
+ <!-- 巡点检、保养设备 -->
|
|
|
+ <div class="maintain_equipment_info">
|
|
|
+ <HeaderTitle title="巡点检设备" size="16px"></HeaderTitle>
|
|
|
+ <div class="maintain_equipment_info_content">
|
|
|
+ <div
|
|
|
+ class="equipment_item"
|
|
|
+ v-for="item in infoData.planDeviceList"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <div class="equipment_info" v-if="item.substance">
|
|
|
+ <div class="item_info">
|
|
|
+ <span class="item_label">设备编码</span>
|
|
|
+ <span class="item_value">{{ item.substance.code }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item_info">
|
|
|
+ <span class="item_label">设备名称</span>
|
|
|
+ <span class="item_value">{{ item.substance.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item_info">
|
|
|
+ <span class="item_label">设备型号</span>
|
|
|
+ <span class="item_value">{{ item.substance.model }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item_info">
|
|
|
+ <span class="item_label">设备位置</span>
|
|
|
+ <span class="item_value">{{
|
|
|
+ item.substance.positionNames
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p>操作事项</p>
|
|
|
+ <div class="ruleMatters_box">
|
|
|
+ <el-table :data="item.workItems" border>
|
|
|
+ <el-table-column label="序号" width="50">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.$index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="事项" prop="name" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <span>{{ scope.row.name }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="内容" prop="content" width="300">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <span>{{ scope.row.content }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作指导" prop="operationGuide">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="operationGuide_box">
|
|
|
+ <div class="left_content">
|
|
|
+ <template v-if="scope.row.operationGuide">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in scope.row.operationGuide
|
|
|
+ .toolList"
|
|
|
+ :key="item.id"
|
|
|
+ >{{ index + 1 }}.{{ item.name }}</div
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="right_content">
|
|
|
+ <template v-if="scope.row.operationGuide">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in scope.row.operationGuide
|
|
|
+ .procedureList"
|
|
|
+ :key="item.id"
|
|
|
+ >{{ index + 1 }}.{{ item.content }}</div
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="标准" prop="norm" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <span>{{ scope.row.norm }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="" prop="status" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <template>
|
|
|
+ <el-select
|
|
|
+ v-model="scope.row.status"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :key="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="结果" prop="result" width="250">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row.result"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="footer">
|
|
|
+ <el-button @click="cancel">返回</el-button>
|
|
|
+ <el-button type="primary" @click="submit">提交</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { report } from '@/api/tickets';
|
|
|
+ import { getById } from '@/api/tickets';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ time: [],
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '正常',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '缺陷',
|
|
|
+ value: -1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ visible: false,
|
|
|
+ infoData: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open(row) {
|
|
|
+ console.log(row);
|
|
|
+ this.getInfo(row);
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ async submit() {
|
|
|
+ console.log(this.time);
|
|
|
+ if (this.time.length > 0) {
|
|
|
+ this.infoData.acceptTime = this.time[0];
|
|
|
+ this.infoData.finishTime = this.time[1];
|
|
|
+ this.infoData.deviceList = this.infoData.planDeviceList;
|
|
|
+ console.log(this.infoData);
|
|
|
+ let deviceList = this.infoData.deviceList
|
|
|
+ .map((item) => {
|
|
|
+ return item.workItems;
|
|
|
+ })
|
|
|
+ .flat();
|
|
|
+ let boolen = deviceList.every((item) => item.status > -1);
|
|
|
+ this.infoData.isAbnormal = boolen ? 1 : 0;
|
|
|
+ report(this.infoData).then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.$message.success('报工成功');
|
|
|
+ this.visible = false;
|
|
|
+ this.$emit('refresh');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.error('请选择实际起始时间');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 表格数据
|
|
|
+ async getInfo(row) {
|
|
|
+ let res = await getById(row.planId);
|
|
|
+ console.log(row);
|
|
|
+ this.infoData = res.data;
|
|
|
+ this.infoData.workOrderId = row.id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .page {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .page-title {
|
|
|
+ background: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ padding: 6px 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ .page-title-div {
|
|
|
+ margin: 5px 0;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ border-bottom: 1px solid #eaeefb;
|
|
|
+ .title-div-no {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #909090;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page-data {
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ .content-detail {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .flows {
|
|
|
+ .flow-left {
|
|
|
+ width: 156px;
|
|
|
+ height: 70px;
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ margin-top: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .basic-details-title {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ margin-top: 20px;
|
|
|
+ border-bottom: 1px solid #157a2c;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .basic-details-title .border-span {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 16px;
|
|
|
+ border-left: 4px solid #157a2c;
|
|
|
+ padding-left: 8px;
|
|
|
+
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .heade-right {
|
|
|
+ // float: right;
|
|
|
+ .heade-right-content {
|
|
|
+ margin-right: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ display: inline-block;
|
|
|
+ .content-key {
|
|
|
+ color: #3e3e3e;
|
|
|
+ margin-right: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .content-value {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #3e3e3e;
|
|
|
+ margin: 10px 0px;
|
|
|
+ }
|
|
|
+ .goods {
|
|
|
+ background: #a30014;
|
|
|
+ border: 1px solid #a30014;
|
|
|
+ }
|
|
|
+ .details-title {
|
|
|
+ display: inline-block;
|
|
|
+ color: #6e6e6e;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 13px;
|
|
|
+ width: 70px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .details-con {
|
|
|
+ color: #3e3e3e;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .detailed-tab {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .maintain_equipment_info_content {
|
|
|
+ padding: 0 30px;
|
|
|
+ .equipment_item {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 15px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .equipment_info {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ .item_info {
|
|
|
+ width: 33.33%;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ display: flex;
|
|
|
+ .item_label {
|
|
|
+ width: 90px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .item_value {
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 5px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ width: 100%;
|
|
|
+ .item_value {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #797979;
|
|
|
+ }
|
|
|
+ .matter_info {
|
|
|
+ ::v-deep .el-table {
|
|
|
+ th.el-table__cell {
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ td.el-table__cell {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ruleMatters_box {
|
|
|
+ flex: 3;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .divider {
|
|
|
+ flex: 0 0 50px;
|
|
|
+ .title {
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-table {
|
|
|
+ overflow: auto;
|
|
|
+ .operationGuide_box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ .left_content {
|
|
|
+ width: 30%;
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ position: absolute;
|
|
|
+ top: -10px;
|
|
|
+ left: 30%;
|
|
|
+ bottom: -10px;
|
|
|
+ height: 110%;
|
|
|
+ width: 1px;
|
|
|
+ background-color: #ededed;
|
|
|
+ }
|
|
|
+ .right_content {
|
|
|
+ flex: 1;
|
|
|
+ padding: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .el-form-item--medium .el-form-item__label {
|
|
|
+ color: #6e6e6e;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .warehouse {
|
|
|
+ display: block;
|
|
|
+ border-bottom: 1px solid #eaeefb;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ .box-card {
|
|
|
+ .store-box {
|
|
|
+ width: 80%;
|
|
|
+ .store-box-span {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 50px;
|
|
|
+ width: 50px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ color: #fff;
|
|
|
+ margin: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vacant {
|
|
|
+ background: #3196fb;
|
|
|
+ }
|
|
|
+ .inUse {
|
|
|
+ background: #157a2c;
|
|
|
+ }
|
|
|
+ .invalid {
|
|
|
+ background: #cccccc;
|
|
|
+ }
|
|
|
+ .full {
|
|
|
+ background: #cc3300;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map {
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ right: 4%;
|
|
|
+ top: 15%;
|
|
|
+ width: 380px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: #b12492;
|
|
|
+ }
|
|
|
+ .mapTitle {
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ right: 11%;
|
|
|
+ top: 39%;
|
|
|
+ }
|
|
|
+ .equipment {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 200px;
|
|
|
+ .equipment-icon {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 15px;
|
|
|
+ border: 2px solid #000;
|
|
|
+ }
|
|
|
+ .equipment-step {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px;
|
|
|
+ border-left: 2px solid #000;
|
|
|
+ width: 2px;
|
|
|
+ height: 85%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .equipment-arrows {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -8px;
|
|
|
+ left: 8px;
|
|
|
+ border: 8px solid rgb(255, 255, 255);
|
|
|
+ border-top-color: #000;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ .equipment-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 3%;
|
|
|
+ left: 3%;
|
|
|
+ }
|
|
|
+ .equipment-details {
|
|
|
+ position: absolute;
|
|
|
+ top: 3%;
|
|
|
+ left: 25%;
|
|
|
+ span {
|
|
|
+ margin-right: 70px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .equipment-content {
|
|
|
+ display: flex;
|
|
|
+ .equipment-content-span1 {
|
|
|
+ width: 150px;
|
|
|
+ margin: 20px 70px 5px 47px;
|
|
|
+ }
|
|
|
+ .equipment-content-span2 {
|
|
|
+ width: 350px;
|
|
|
+ margin: 20px 70px 5px 120px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btnbox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ ::v-deep .el-button {
|
|
|
+ padding: 10px 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .textbox {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .execute_info {
|
|
|
+ margin: 30px 0;
|
|
|
+ .execute_info_title {
|
|
|
+ border-bottom: 1px solid #157a2c;
|
|
|
+ padding-bottom: 3px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ > span:first-child {
|
|
|
+ line-height: 16px;
|
|
|
+ border-left: 6px solid #157a2c;
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .execute_row {
|
|
|
+ padding: 0 30px;
|
|
|
+ .column {
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .label {
|
|
|
+ // width: 110px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|