<template>
|
<div class="row">
|
<el-row type="flex" justify="left">
|
<el-col :span="24" style="position: relative">
|
<el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect">
|
<el-menu-item index="0" @click="changeUnit(null, '全部')">
|
全部单位（{{ totalWorkOrders }}）
|
</el-menu-item>
|
<el-menu-item :index="index + 1" v-for="(item, index) in unitList" :key="index" @click="changeUnit(item.id, item.value)">
|
{{ item.unitName }}（{{ item.workOrderCount }}）
|
</el-menu-item>
|
</el-menu>
|
</el-col>
|
</el-row>
|
|
<el-row class="op-warp">
|
<el-row v-show="showSearch">
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
|
<el-form-item label="关键字" prop="keyword">
|
<el-input
|
v-model="queryParams.keyword"
|
placeholder="工单号/设备名/设备编号搜索"
|
clearable
|
@keyup.enter.native="page"
|
@clear="page"
|
/>
|
</el-form-item>
|
<el-form-item label="故障类型" prop="errorTypeList">
|
<el-cascader
|
v-model="queryParams.errorType"
|
:options="errorTypeList"
|
:props="{ expandTrigger: 'hover',emitPath: false }"
|
:show-all-levels="false"
|
@change="page"
|
placeholder="故障类型"
|
clearable
|
></el-cascader>
|
</el-form-item>
|
<el-form-item label="下发状态" prop="status">
|
<el-select v-model="queryParams.status" @change="page" placeholder="下发状态" clearable>
|
<el-option label="未下发" value="WAIT_DISTRIBUTE"/>
|
<el-option label="已下发" value="DISTRIBUTED"/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间范围" prop="timeRange" >
|
<el-date-picker
|
v-model="timeRange"
|
type="daterange"
|
range-separator="至"
|
value-format="yyyy-MM-dd"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
@change="page"
|
clearable
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="small" @click="page">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
</el-row>
|
|
<el-row>
|
<el-button size="mini" plain type="info" @click="selectedDistribute" class="op">下发选中工单</el-button>
|
<el-popconfirm
|
@confirm="allDistribute"
|
title="确定要下发所有工单吗？"
|
>
|
<el-button size="mini" plain type="danger" class="op" slot="reference">全部下发</el-button>
|
</el-popconfirm>
|
|
<el-popover
|
class="op"
|
placement="right"
|
width="300px"
|
trigger="click">
|
<span style="font-weight: bold;font-size: 16px">快捷下发</span>
|
<el-form ref="fastDistributeForm" :model="fastDistributeForm" :rules="fastDistributeRules" label-width="80px">
|
<el-form-item label="快捷方式" prop="fastWay">
|
<el-radio v-model="fastDistributeForm.fastWay" label="LAST_HOUR">最近1小时</el-radio>
|
<el-radio v-model="fastDistributeForm.fastWay" label="LAST_TWO_HOUR">最近2小时</el-radio>
|
<el-radio v-model="fastDistributeForm.fastWay" label="LAST_DAY">最近1天</el-radio>
|
<el-radio v-model="fastDistributeForm.fastWay" label="CUSTOM">自定义</el-radio>
|
</el-form-item>
|
<el-form-item v-if="fastDistributeForm.fastWay === 'CUSTOM'" label="时间范围">
|
<el-date-picker
|
style="width: 100%"
|
v-model="fastTimeRange"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="故障类型" prop="errorType">
|
<el-select v-model="fastDistributeForm.errorType" multiple>
|
<el-option v-for="dict in dict.type.error_type"
|
:value="dict.value"
|
:key="dict.value"
|
:label="dict.label"/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="数量限制" prop="fastNumLimit">
|
<el-input v-model="fastDistributeForm.fastNumLimit" type="number" placeholder="此次工单下发最大数量"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="small" @click="fastDistribute">立即下发</el-button>
|
</el-form-item>
|
</el-form>
|
<el-button slot="reference" type="primary" size="mini" plain>快捷下发</el-button>
|
</el-popover>
|
<el-button size="mini" plain type="success" @click="handleAdd">手动新增工单</el-button>
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="page"></right-toolbar>
|
</el-row>
|
</el-row>
|
|
<el-row class="content-warp" type="flex" justify="left">
|
<el-col :span="24">
|
<el-table v-loading="loading" :data="workOrderList" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="工单号" align="center" prop="workOrderNo"/>
|
<el-table-column label="国标码" align="center" prop="serialNumber"/>
|
<el-table-column label="故障点位" align="center" prop="source">
|
<template slot-scope="scope">
|
<el-popover
|
placement="right"
|
:title="scope.row.important ? '重点点位': '正常点位'"
|
width="200"
|
trigger="hover">
|
<span :class="{important: scope.row.important}" slot="reference">{{ scope.row.source }}</span>
|
</el-popover>
|
</template>
|
</el-table-column>
|
<el-table-column label="故障类型" align="center" prop="errorType"/>
|
<el-table-column label="运维单位" align="center" prop="unitName"/>
|
<el-table-column label="产生时间" align="center" prop="createTime"/>
|
<el-table-column v-if="queryParams.status === 'DISTRIBUTED'" label="下发人" align="center" prop="realName"/>
|
<el-table-column v-if="queryParams.status === 'DISTRIBUTED'" label="下发时间" align="center" prop="distributeTime"/>0
|
<el-table-column label="操作" align="center" v-if="queryParams.status === 'WAIT_DISTRIBUTE'">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" @click="delWorkOrderClick(scope.row)" v-show="scope.row.status === 'WAIT_DISTRIBUTE'">
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
</el-col>
|
|
</el-row>
|
|
<!-- 添加或修改【请填写功能名称】对话框 -->
|
<el-dialog title="手动新增工单" :visible.sync="open" width="500px" append-to-body>
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
<el-form-item label="运维单位" prop="unitId">
|
<el-select v-model="form.unitId" placeholder="请选择">
|
<el-option
|
v-for="item in unitList"
|
:key="item.id"
|
:label="item.unitName"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="故障点位" prop="source">
|
<el-select
|
v-model="form.source"
|
filterable
|
remote
|
reserve-keyword
|
placeholder="国标码/点位名称搜索"
|
:remote-method="remoteGetPoints"
|
@change="setPointId"
|
:loading="selectLoading">
|
<el-option
|
v-for="item in pointList"
|
:key="item.id"
|
:label="item.value"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="故障类型" prop="errorType">
|
<el-select v-model="form.errorType" multiple>
|
<el-option v-for="dict in dict.type.error_type"
|
:value="dict.value"
|
:key="dict.value"
|
:label="dict.label"/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="cancel">取 消</el-button>
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import {distributeWorkOrder, fastDistribute, addWorkOrder, updateWorkOrder, selectedIdsDistribute, errorTypeAll} from '@/api/platform/work-order'
|
import {workList} from "@/api/platform/unit";
|
import { pointSelectData } from "@/api/platform/point";
|
import {delWorkOrder} from "../../../../api/platform/work-order";
|
export default {
|
dicts: ['error_type'],
|
name: 'Work-order-distribute',
|
data() {
|
return {
|
showDel:false,
|
errorTypeList: [], // 用于存储选中的项目ID
|
showSearch: true,
|
selectedIdsDistributeForm: {
|
ids: [],
|
unitId: null
|
},
|
unitList: [],
|
settingForm: {
|
// 离线
|
outLine: null,
|
// 视频可用
|
videoQuality: "",
|
// 视频标注
|
videoLabel: ""
|
},
|
// 当前运维单位
|
unitId: null,
|
unitName: "",
|
// 多选
|
multipleSelection: [],
|
// 下发时间范围
|
fastTimeRange: [],
|
timeRange : null,
|
// 下发
|
fastDistributeForm: {
|
fastWay: null,
|
fastNumLimit: null,
|
start: null,
|
end: null,
|
unitId: null
|
},
|
// 自动生成工单规则
|
settingRules: {
|
outLine: [
|
{ required: true, message: "请填写点位离线时长", trigger: "blur" }
|
],
|
videoQuality: [
|
{ required: true, message: "请填写视频可用程度", trigger: "change" }
|
],
|
videoLabel: [
|
{ required: true, message: "请填写点视频标注准确率", trigger: "blur" }
|
],
|
},
|
// 下发表单验证
|
fastDistributeRules: {
|
fastWay: [
|
{ required: true, message: "请选择快速分发方式", trigger: "blur" }
|
],
|
fastNumLimit: [
|
{ required: true, message: "请输入快速分发数量限制", trigger: "blur" }
|
],
|
errorType: [
|
{ required: true, message: "请故障类型", trigger: "blur" }
|
],
|
},
|
queryParams: {
|
unitId: null,
|
keyword: '',
|
status: 'WAIT_DISTRIBUTE',
|
pageNum: 1,
|
pageSize: 10,
|
},
|
// 总条数
|
total: 0,
|
// 非多个禁用
|
multiple: true,
|
activeIndex: '0',
|
loading: false,
|
workOrderList: [],
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
// 表单参数
|
form: {
|
},
|
// 下拉加载
|
selectLoading: false,
|
// 点位list
|
pointList: [],
|
// 表单校验
|
rules: {
|
source: [
|
{ required: true, message: "工单来源不能为空", trigger: "blur" }
|
],
|
workOrderNo: [
|
{ required: true, message: "工单号不能为空", trigger: "blur" }
|
],
|
unitId: [
|
{ required: true, message: "运维单位不能为空", trigger: "blur" }
|
],
|
errorType: [
|
{ required: true, message: "请选择故障类型", trigger: "blur" }
|
],
|
}
|
}
|
},
|
mounted() {
|
const today = new Date();
|
const start = today.toISOString().split('T')[0]; // 获取日期部分，格式为 yyyy-MM-dd
|
const end = start; // 结束日期也是当天
|
this.timeRange = [start, end];
|
this.getErrorList()
|
this.page();
|
},
|
computed: {
|
totalWorkOrders() {
|
return this.unitList.reduce((total, item) => total + item.workOrderCount, 0);
|
},
|
},
|
methods: {
|
delWorkOrderClick(row){
|
delWorkOrder(row.id)
|
this.page()
|
},
|
getErrorList() {
|
errorTypeAll().then(errorRes => {
|
this.errorTypeList = errorRes.data;
|
})
|
},
|
setPointId(selectedValue) {
|
const selectedItem = this.pointList.find(item => item.value === selectedValue);
|
this.form.serialNumber = selectedItem.id
|
},
|
submitSetting() {
|
this.$refs['settingForm'].validate((valid) => {
|
if (valid) {
|
this.$modal.msgSuccess("保存成功")
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
page() {
|
this.loading = true;
|
if (this.timeRange && this.timeRange.length > 0) {
|
this.queryParams.start = this.timeRange[0]
|
this.queryParams.end = this.timeRange[1]
|
}else {
|
this.queryParams.start = null
|
this.queryParams.end = null
|
}
|
distributeWorkOrder(this.queryParams).then(data => {
|
workList(this.queryParams).then(res => {
|
this.unitList = res.data;
|
this.workOrderList = data.data.records;
|
this.total = data.total;
|
this.loading = false;
|
})
|
})
|
},
|
changeUnit(unitId, unitName) {
|
this.unitId = unitId;
|
this.queryParams.unitId = unitId;
|
this.unitName = unitName;
|
this.page()
|
},
|
clearFastDistributeForm() {
|
this.fastDistributeForm.fastWay = ''
|
this.fastDistributeForm.start = null
|
this.fastDistributeForm.end = null
|
this.fastDistributeForm.fastNumLimit = null
|
this.fastTimeRange = []
|
this.fastDistributeForm.errorType = null
|
},
|
// 全部下发
|
allDistribute() {
|
this.selectedIdsDistributeForm.unitId = this.unitId
|
selectedIdsDistribute(this.selectedIdsDistributeForm).then(res => {
|
this.$message.success("工单下发成功")
|
this.page();
|
})
|
},
|
// 快速下发
|
fastDistribute() {
|
this.$refs['fastDistributeForm'].validate((valid) => {
|
if (valid) {
|
this.fastDistributeForm.start = this.fastTimeRange[0]
|
this.fastDistributeForm.end = this.fastTimeRange[1]
|
this.fastDistributeForm.unitId = this.unitId
|
fastDistribute(this.fastDistributeForm).then(res => {
|
res.code == 200 ? this.$message.success(res.msg) : this.$message.warning(res.msg)
|
this.clearFastDistributeForm();
|
this.page();
|
})
|
}
|
})
|
},
|
// 选中工单下发
|
selectedDistribute() {
|
if (this.multipleSelection.length < 1) {
|
this.$message.warning("请先选择要下发的工单")
|
return
|
}
|
this.selectedIdsDistributeForm.unitId = this.unitId;
|
this.selectedIdsDistributeForm.ids = this.multipleSelection;
|
selectedIdsDistribute(this.selectedIdsDistributeForm).then(res => {
|
this.$message.success("工单下发成功")
|
this.selectedIdsDistributeForm.ids = [];
|
this.page();
|
})
|
},
|
handleSelect(key, keyPath) {
|
console.log(key, keyPath);
|
},
|
getList() {
|
this.page()
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.multipleSelection = selection.map(item => item.workOrderNo)
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.reset();
|
this.open = true;
|
this.title = "添加合同";
|
},
|
// 表单重置
|
reset() {
|
this.form = {};
|
this.resetForm("form");
|
},
|
/** 提交按钮 */
|
submitForm() {
|
this.$refs["form"].validate(valid => {
|
if (valid) {
|
if (this.form.id != null) {
|
updateWorkOrder(this.form).then(response => {
|
this.$modal.msgSuccess("修改成功");
|
this.open = false;
|
this.page();
|
});
|
} else {
|
addWorkOrder(this.form).then(response => {
|
this.$modal.msgSuccess("新增成功");
|
this.pointList = [];
|
this.open = false;
|
this.page();
|
});
|
}
|
}
|
});
|
},
|
// 取消按钮
|
cancel() {
|
this.open = false;
|
this.reset();
|
},
|
// 运维公司下拉数据
|
selectUnit() {
|
workList(this.queryParams).then(res => {
|
this.unitList = res.data;
|
})
|
},
|
// 远程搜索点位
|
remoteGetPoints(query) {
|
if (query !== '') {
|
this.selectLoading = true;
|
let data = {
|
"keyword": query
|
}
|
pointSelectData(data).then(res => {
|
this.pointList = res.data;
|
this.selectLoading = false;
|
})
|
} else {
|
this.pointList = [];
|
}
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.important {
|
color: red;
|
}
|
/deep/ .el-popover__title {
|
margin-bottom: 0px;
|
}
|
.row {
|
padding: 0 20px;
|
}
|
.op-warp {
|
margin-top: 10px;
|
}
|
.content-warp {
|
margin-top: 10px;
|
}
|
.op {
|
margin-right: 5px;
|
}
|
.setting {
|
position: absolute;
|
top: 10px;
|
right:5px
|
}
|
|
</style>
|
