Skip to content

L
laravelzh
Commit 139848a8 authored by Administrator's avatar Administrator
Browse files
Options

工单列表

parent 3d597bb2
Show whitespace changes
Inline Side-by-side
Showing with 284 additions and 0 deletions
resources/js/router/index.js
View file @ 139848a8
......@@ -25,6 +25,7 @@ import usersRoutes from './modules/users';
import historyRoutes from './modules/history.js';
import monitorRoutes from './modules/monitor.js';
import userdeviceRoutes from './modules/userdevice';
import alarmOrderRoutes from './modules/alarm-order';
/**
* Sub-menu only appear when children.length>=1
......@@ -155,6 +156,7 @@ export const asyncRoutes = [
usersRoutes,
adminRoutes,
userdeviceRoutes,
alarmOrderRoutes,
// {
// path: '/userdevice',
// component: Layout,
......
resources/js/router/modules/alarm-order.js 0 → 100644
View file @ 139848a8
import Layout from '@/layout';
const alarmOrderRoutes = {
path: '/alarm-order',
component: Layout,
redirect: '/alarm-order/index',
name: 'users',
alwaysShow: true,
meta: {
title: '工单管理',
icon: 'nested',
permissions: ['view menu admin'],
},
children: [
{
path: 'index',
component: () => import('@/views/alarm-order/index'),
name: 'AlarmOrder',
meta: { title: '抢险工单', icon: 'nested', permissions: ['manage admin'] },
},
],
};
export default alarmOrderRoutes;
resources/js/views/alarm-order/index.vue 0 → 100644
View file @ 139848a8
<template>
<div class="app-container">
<div class="filter-container">
<el-form :inline="true" :model="formSearch" class="demo-form-inline">
<el-form-item label="接单人员">
<el-select
v-model="formSearch.user_id"
style="margin-left: 20px;"
placeholder="请选择"
>
<el-option
v-for="item in alarmOrderUsersData"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="设备编号">
<el-input v-model="formSearch.deviceNum" placeholder="输入完整设备编号"></el-input>
</el-form-item>
<el-form-item label="工单状态">
<el-select
v-model="formSearch.deviceStatus"
style="margin-left: 20px;"
placeholder="请选择"
>
<el-option
v-for="item in optionStatus"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间">
<el-date-picker
v-model="formSearch.timeRange"
align="right"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="至"
value-format="yyyy/MM/dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
<el-pagination
:current-page="formSearch.page"
:page-sizes="[20, 80, 150, 300]"
:page-size="formSearch.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="formSearch.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
<el-table :key="tableKey" :data="alarmOrders" border fit highlight-current-rows>
<el-table-column label="工单号" width="209">
<template slot-scope="scope">
<span @click="handleCopy(scope.row.order_num,$event)">{{ scope.row.order_num }}</span>
</template>
</el-table-column>
<el-table-column label="设备编号" width="209">
<template slot-scope="scope">
<span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
</template>
</el-table-column>
<el-table-column label="接单人" width="140">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="设备名称" width="200">
<template slot-scope="scope">
<span>{{ scope.row.username }}</span>
</template>
</el-table-column>
<el-table-column label="位置" width="200">
<template slot-scope="scope">
<span>{{ scope.row.location }}</span>
</template>
</el-table-column>
<el-table-column label="报警类型" width="130">
<template slot-scope="scope">
<span>{{ scope.row.status_name }}</span>
</template>
</el-table-column>
<el-table-column label="工单状态" width="130">
<template slot-scope="scope">
<span>
<el-tag :type=" scope.row.state==1 ? 'success' : 'warning' " effect="dark">{{ orderStateFilter(scope.row.state) }}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column label="创建时间">
<template slot-scope="scope">
<span>{{ scope.row.created_at }}</span>
</template>
</el-table-column>
<el-table-column label="更新时间">
<template slot-scope="scope">
<span>{{ scope.row.updated_at }}</span>
</template>
</el-table-column>
</el-table>
<el-tooltip placement="top" content="tooltip">
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
</el-tooltip>
</div>
</template>
<script>
import clip from '@/utils/clipboard';
import BackToTop from '@/components/BackToTop';
import { alarmOrderUsers, alarmOrderList } from '@/api/alarmOrder';
export default {
components: { BackToTop },
data() {
return {
alarmOrders: [],
alarmOrderUsersData: [],
formSearch: {
deviceNum: '',
state: 0,
timeRange: null,
page: 1,
limit: 20,
user_id: 0,
total: 0,
},
optionStatus: [{
value: 99,
label: '全部',
}, {
value: 0,
label: '未接单',
}, {
value: 1,
label: '进行中',
}, {
value: 2,
label: '完成',
}, {
value: 3,
label: '异常终止',
}],
equipment: [],
timer: null,
tableKey: 0,
value2: undefined,
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '24小时内',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', [start, end]);
},
},
],
},
myBackToTopStyle: {
right: '50px',
bottom: '50px',
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px', // Please keep consistent with height to center vertically
background: '#e7eaf1', // The background color of the button
},
};
},
created() {
this.orderUsers();
this.alarmOrdersData();
},
methods: {
orderStateFilter(state) {
const status = [];
status[0] = '未接单';
status[1] = '进行中';
status[2] = '完成';
status[3] = '异常终止';
return status[state];
},
// 可以派单的人员
orderUsers(data) {
alarmOrderUsers().then(response => {
if (response.code === 200) {
this.alarmOrderUsersData = response.data;
}
}).catch(err => {
console.log(err);
});
},
// 工单列表
alarmOrdersData() {
alarmOrderList(this.formSearch).then(response => {
if (response.code === 200) {
console.log(response.data);
this.alarmOrders = response.data;
}
}).catch(err => {
console.log(err);
});
},
handleSizeChange(val) {
this.formSearch.limit = val;
this.dataSearch();
},
handleCurrentChange(val) {
this.formSearch.page = val;
this.dataSearch();
},
handleCopy(text, event) {
clip(text, event);
},
onSubmit() {
this.formSearch.page = 1;
this.dataSearch();
},
dataSearch() {
this.alarmOrdersData();
},
timers() {
// this.timer = setInterval(() => {
// this.equipmentlist();
// }, 10000);
},
destroyed() {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer);
});
},
},
};
</script>
<style scoped lang="scss">
.placeholder-container {
ul {
li {
margin: 10px;
list-style-type: none;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment