Skip to content

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

安检计划页面

parent 73152ebd
Show whitespace changes
Inline Side-by-side
Showing with 2040 additions and 0 deletions
resources/js/router/index.js
View file @ 04905158
......@@ -26,6 +26,7 @@ import historyRoutes from './modules/history.js';
import monitorRoutes from './modules/monitor.js';
import userdeviceRoutes from './modules/userdevice';
import alarmOrderRoutes from './modules/alarm-order';
import sweepCheckRoutes from './modules/sweep-check';
/**
* Sub-menu only appear when children.length>=1
......@@ -157,6 +158,7 @@ export const asyncRoutes = [
adminRoutes,
userdeviceRoutes,
alarmOrderRoutes,
sweepCheckRoutes,
// {
// path: '/userdevice',
// component: Layout,
......
resources/js/router/modules/sweep-check.js 0 → 100644
View file @ 04905158
import Layout from '@/layout';
const sweepCheckRoutes = {
path: '/sweep-check',
component: Layout,
redirect: '/sweep-check/index',
name: 'sweep-check',
alwaysShow: true,
meta: {
title: '隐患排查治理',
icon: 'star',
permissions: ['view menu admin'],
},
children: [
{
path: 'security',
component: () => import('@/views/sweep-check/security'),
name: 'SecurityCheck',
meta: { title: '安检计划', icon: 'list', permissions: ['manage admin'] },
}, {
path: 'record',
component: () => import('@/views/sweep-check/record'),
name: 'Record',
meta: { title: '隐患排查记录', icon: 'list', permissions: ['manage admin'] },
}, {
path: 'ledger',
component: () => import('@/views/sweep-check/ledger'),
name: 'Ledger',
meta: { title: '隐患台账', icon: 'list', permissions: ['manage admin'] },
},
],
};
export default sweepCheckRoutes;
resources/js/views/sweep-check/index.vue 0 → 100644
View file @ 04905158
<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, i) in alarmOrderUsersData"
:key="i + '1u'"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="工单号">
<el-input v-model="formSearch.order_num" placeholder="输入工单号"></el-input>
</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.state"
style="margin-left: 20px;"
placeholder="请选择"
>
<el-option
v-for="(item,ind) in optionStatus"
:key="ind + '2s'"
: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, 5]"
: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="180">
<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="180">
<template slot-scope="scope">
<span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
</template>
</el-table-column>
<el-table-column label="接单人" width="100">
<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="80">
<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="orderStateFilter(scope.row.state, 'type')" effect="dark">{{ orderStateFilter(scope.row.state, 'content') }}</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-column label="--" width="140">
<template slot-scope="scope">
<el-button @click="alarmShow(scope.row)">详细信息</el-button>
</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>
<el-dialog title="工单详细信息" :visible.sync="dialogTableVisible" width="70%">
<el-steps :active="order_content.isorderone" align-center style="margin-bottom: 40px;">
<el-step
v-for="(item, oindex) in order_step"
:key="oindex + '1o'"
:title="stepFilter(item.schedule)"
:description="item.created_at + item.content"
:finish-status="item.finish_status"
>
</el-step>
</el-steps>
<el-row :gutter="20">
<el-col :span="8">
<div class="amap-page-container" style="height: 350px;">
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:zoom="zoom"
:center="center"
:events="events"
class="amap-demo"
:plugin="plugin"
>
<el-amap-circle-marker
:visible="true"
:center="marker.devicecoord | deviceLocationFilter(marker.devicecoord)"
:radius="13"
:fill-color="marker.devicepolice | deviceStatusFilter('color')"
:fill-opacity="1"
:stroke-color="'#ccc'"
:stroke-opacity="0.9"
></el-amap-circle-marker>
</el-amap>
</div>
</el-col>
<el-col :span="16">
<el-row>
<el-col :span="12">
<el-form size="mini">
<el-form-item label="设备编号">{{ order_content.devicenumber }}</el-form-item>
<el-form-item label="设备名称">{{ order_content.username }}</el-form-item>
<el-form-item label="类型">{{ order_content.tname }}</el-form-item>
<el-form-item label="检测介质">{{ order_content.gas }}</el-form-item>
<el-form-item label="位置">{{ order_content.deviceinfo }}</el-form-item>
<el-form-item label="坐标">{{ order_content.devicecoord }}</el-form-item>
<el-form-item label="检测值">{{ order_content.concentration + order_content.danwei }}</el-form-item>
<el-form-item label="报警类型">{{ order_content.status_name }}</el-form-item>
<el-form-item label="报警开始时间">{{ order_content.start_time }}</el-form-item>
<el-form-item label="报警结束时间">{{ order_content.end_time }}</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form size="mini">
<el-form-item label="订单编号">{{ order_content.order_num }}</el-form-item>
<el-form-item label="订单创建时间">{{ order_content.created_at }}</el-form-item>
<el-form-item label="订单更新时间">{{ order_content.updated_at }}</el-form-item>
<el-form-item label="接单人">{{ order_content.name }}</el-form-item>
<el-form-item label="联系电话">{{ order_content.phone_number }}</el-form-item>
<el-form-item label="是否到达现场">{{ isLiveFilter(order_content.is_live) }}</el-form-item>
<el-form-item label="是否属实">{{ isVerifiedFilter(order_content.is_verified) }}</el-form-item>
<el-form-item label="维修状态">{{ isRepairedFilter(order_content.isrepaired) }}</el-form-item>
<el-form-item label="进度">{{ isOrderOneFilter(order_content.isorderone) }}</el-form-item>
<el-form-item label="反馈内容">{{ order_content.content }}</el-form-item>
<el-form-item size="large">
<el-button type="primary" :disabled="buttonStatus" @click="onSubmitDetail(order_content.id)">确认</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<div class="demo-image">
<el-image
v-for="(item, index) in order_content.images"
:key="index + '1m'"
style="width: 100px; height: 100px; margin-right: 10px;"
:src="item.path"
:preview-src-list="order_content.srcList"
>
</el-image>
</div>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import clip from '@/utils/clipboard';
import BackToTop from '@/components/BackToTop';
import { alarmOrderUsers, alarmOrderList, alarmOrderDetail, alarmOrderUpdate } from '@/api/alarmOrder';
import Vue from 'vue';
import VueAMap from 'vue-amap';
import { AMapManager } from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: '95cc1b89d62f020ce5a21ec503daef6c',
// 插件集合
plugin: [
'AMap.Autocomplete',
'AMap.PlaceSearch',
'AMap.Scale',
'AMap.OverView',
'AMap.ToolBar',
'AMap.MapType',
'AMap.PolyEditor',
'AMap.CircleEditor',
],
// 高德 sdk 版本，默认为 1.4.4
v: '1.4.15',
uiVersion: '1.0.11',
});
export default {
components: { BackToTop },
filters: {
deviceLocationFilter(center) {
if (center === null) {
return '';
}
center = center.replace(/\s*/g, '');
return center.split(',');
},
deviceStatusFilter(status, cate) {
var statuses = [];
statuses[1] = { color: '#1c7a17', name: '正常' };
statuses[2] = { color: '#f6e032', name: '错误' };
statuses[3] = { color: '#f6e032', name: '传感器故障' };
statuses[4] = { color: '#f30016', name: '报警' };
statuses[5] = { color: '#f42f18', name: '低报' };
statuses[6] = { color: '#97000b', name: '高报' };
statuses[7] = { color: '#f6e032', name: '通信故障' };
statuses[8] = { color: '#f6e032', name: '超量程' };
statuses[9] = { color: '#747677', name: '离线' };
statuses[10] = { color: '#f6e032', name: '电量低' };
statuses[11] = { color: '#f6e032', name: '主电故障' };
statuses[12] = { color: '#f6e032', name: '备电故障' };
statuses[13] = { color: '#f6e032', name: '无此节点' };
statuses[14] = { color: '#f6e032', name: '低电压' };
statuses[15] = { color: '#f6e032', name: '故障' };
statuses[16] = { color: '#97000b', name: '报警联动' };
if (cate === 'color') {
return statuses[status].color;
} else if (cate === 'status') {
return statuses[status].name;
}
},
},
data() {
const _this = this;
return {
buttonStatus: true,
order_content: {},
order_step: [],
marker: {
devicecoord: '114.505208, 38.045474',
devicepolice: 5,
},
map: {},
amapManager: new AMapManager(),
zoom: 13,
center: [114.505208, 38.045474],
events: {
init: (o) => {
o.setMapStyle('amap://styles/normal');
// console.log(o.getCenter());
// console.log(this.$refs.map.$$getInstance());
o.getCity(result => {
// console.log(result);
});
},
'moveend': () => {
},
'zoomchange': () => {
_this.zoom = this.$refs.map.$$getInstance().getZoom();
},
'click': (e) => {
// alert('map clicked');
},
},
plugin: [{
pName: 'ToolBar',
position: 'LB',
}, {
pName: 'MapType',
defaultType: 0,
events: {
init(o) {
console.log(o);
},
},
}],
dialogTableVisible: false,
alarmOrders: [],
alarmOrderUsersData: [{
id: 0,
name: '全部',
}],
formSearch: {
order_num: '',
deviceNum: '',
state: 99,
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: {
onSubmitDetail(id) {
const data = {
state: 2,
isorderone: 4,
schedule: JSON.stringify({
'schedule': 5, 'content': '恭喜，你的工单完成啦！',
}),
};
alarmOrderUpdate(data, id).then(response => {
if (response.code === 200) {
this.$message.success('恭喜，你的工单完成啦！');
this.dialogTableVisible = false;
this.dataSearch();
}
}).catch(err => {
console.log(err);
});
},
isLiveFilter(id) {
const steps = [];
steps[1] = '到达现场';
steps[2] = '未到达现场';
return steps[id];
},
isVerifiedFilter(id) {
const steps = [];
steps[1] = '属实';
steps[2] = '不属实';
return steps[id];
},
isRepairedFilter(id) {
const status = [];
status[1] = '已修好';
status[2] = '未修好';
return status[id];
},
isOrderOneFilter(id) {
const steps = [];
steps[1] = '开始';
steps[2] = '等待';
steps[3] = '检修';
steps[4] = '完成';
steps[5] = '审核通过';
return steps[id];
},
stepFilter(step) {
const steps = [];
steps[1] = '待接单';
steps[2] = '已接单';
steps[3] = '进行中';
steps[4] = '已完成';
steps[5] = '审核';
return steps[step];
},
alarmShow(data) {
this.marker.devicecoord = data.devicecoord;
this.marker.devicepolice = data.policestatus;
// 地图中心
this.center = data.devicecoord.replace(/\s*/g, '').split(',');
console.log(data);
this.orderDetail(data.id);
this.dialogTableVisible = true;
},
orderStateFilter(state, type) {
const status = [];
status[0] = { content: '未接单', type: 'danger' };
status[1] = { content: '进行中', type: 'warning' };
status[2] = { content: '完成', type: 'success' };
status[3] = { content: '异常终止', type: 'info' };
status[4] = { content: '已提交未审核', type: 'warning' };
if (type === 'type') {
return status[state].type;
}
if (type === 'content') {
return status[state].content;
}
},
// 工单详情
orderDetail(id) {
this.buttonStatus = true;
alarmOrderDetail(id).then(response => {
const all_steps = [{
schedule: 1, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 2, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 3, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 4, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 5, content: '', created_at: '', finish_status: 'finish',
}];
if (response.code === 200) {
console.log(response.data);
this.order_content = response.data;
const srcList = [];
for (var key in response.data.images) {
srcList.push(response.data.images[key].path);
}
this.order_content.srcList = srcList;
const order_step = response.data.step;
for (var step in all_steps) {
if (order_step[step]) {
all_steps[step] = order_step[step];
}
}
this.order_step = all_steps;
console.log((this.order_content.isorderone === 4) && (this.order_content.state === 4));
if ((this.order_content.isorderone === 3) && (this.order_content.state === 4)) {
this.buttonStatus = false;
}
if (response.data.state === 2) {
this.order_content.isorderone = 5;
}
console.log(this.order_step);
}
}).catch(err => {
console.log(err);
});
},
// 可以派单的人员
orderUsers(data) {
alarmOrderUsers().then(response => {
if (response.code === 200) {
this.alarmOrderUsersData = this.alarmOrderUsersData.concat(response.data);
}
}).catch(err => {
console.log(err);
});
},
// 工单列表
alarmOrdersData() {
console.log(this.formSearch);
alarmOrderList(this.formSearch).then(response => {
if (response.code === 200) {
console.log(response.data);
this.alarmOrders = response.data.orders;
this.formSearch.total = response.data.meta.count;
}
}).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>
resources/js/views/sweep-check/ledger.vue 0 → 100644
View file @ 04905158
<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, i) in alarmOrderUsersData"
:key="i + '1u'"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="工单号">
<el-input v-model="formSearch.order_num" placeholder="输入工单号"></el-input>
</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.state"
style="margin-left: 20px;"
placeholder="请选择"
>
<el-option
v-for="(item,ind) in optionStatus"
:key="ind + '2s'"
: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, 5]"
: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="180">
<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="180">
<template slot-scope="scope">
<span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
</template>
</el-table-column>
<el-table-column label="接单人" width="100">
<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="80">
<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="orderStateFilter(scope.row.state, 'type')" effect="dark">{{ orderStateFilter(scope.row.state, 'content') }}</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-column label="--" width="140">
<template slot-scope="scope">
<el-button @click="alarmShow(scope.row)">详细信息</el-button>
</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>
<el-dialog title="工单详细信息" :visible.sync="dialogTableVisible" width="70%">
<el-steps :active="order_content.isorderone" align-center style="margin-bottom: 40px;">
<el-step
v-for="(item, oindex) in order_step"
:key="oindex + '1o'"
:title="stepFilter(item.schedule)"
:description="item.created_at + item.content"
:finish-status="item.finish_status"
>
</el-step>
</el-steps>
<el-row :gutter="20">
<el-col :span="8">
<div class="amap-page-container" style="height: 350px;">
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:zoom="zoom"
:center="center"
:events="events"
class="amap-demo"
:plugin="plugin"
>
<el-amap-circle-marker
:visible="true"
:center="marker.devicecoord | deviceLocationFilter(marker.devicecoord)"
:radius="13"
:fill-color="marker.devicepolice | deviceStatusFilter('color')"
:fill-opacity="1"
:stroke-color="'#ccc'"
:stroke-opacity="0.9"
></el-amap-circle-marker>
</el-amap>
</div>
</el-col>
<el-col :span="16">
<el-row>
<el-col :span="12">
<el-form size="mini">
<el-form-item label="设备编号">{{ order_content.devicenumber }}</el-form-item>
<el-form-item label="设备名称">{{ order_content.username }}</el-form-item>
<el-form-item label="类型">{{ order_content.tname }}</el-form-item>
<el-form-item label="检测介质">{{ order_content.gas }}</el-form-item>
<el-form-item label="位置">{{ order_content.deviceinfo }}</el-form-item>
<el-form-item label="坐标">{{ order_content.devicecoord }}</el-form-item>
<el-form-item label="检测值">{{ order_content.concentration + order_content.danwei }}</el-form-item>
<el-form-item label="报警类型">{{ order_content.status_name }}</el-form-item>
<el-form-item label="报警开始时间">{{ order_content.start_time }}</el-form-item>
<el-form-item label="报警结束时间">{{ order_content.end_time }}</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form size="mini">
<el-form-item label="订单编号">{{ order_content.order_num }}</el-form-item>
<el-form-item label="订单创建时间">{{ order_content.created_at }}</el-form-item>
<el-form-item label="订单更新时间">{{ order_content.updated_at }}</el-form-item>
<el-form-item label="接单人">{{ order_content.name }}</el-form-item>
<el-form-item label="联系电话">{{ order_content.phone_number }}</el-form-item>
<el-form-item label="是否到达现场">{{ isLiveFilter(order_content.is_live) }}</el-form-item>
<el-form-item label="是否属实">{{ isVerifiedFilter(order_content.is_verified) }}</el-form-item>
<el-form-item label="维修状态">{{ isRepairedFilter(order_content.isrepaired) }}</el-form-item>
<el-form-item label="进度">{{ isOrderOneFilter(order_content.isorderone) }}</el-form-item>
<el-form-item label="反馈内容">{{ order_content.content }}</el-form-item>
<el-form-item size="large">
<el-button type="primary" :disabled="buttonStatus" @click="onSubmitDetail(order_content.id)">确认</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<div class="demo-image">
<el-image
v-for="(item, index) in order_content.images"
:key="index + '1m'"
style="width: 100px; height: 100px; margin-right: 10px;"
:src="item.path"
:preview-src-list="order_content.srcList"
>
</el-image>
</div>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import clip from '@/utils/clipboard';
import BackToTop from '@/components/BackToTop';
import { alarmOrderUsers, alarmOrderList, alarmOrderDetail, alarmOrderUpdate } from '@/api/alarmOrder';
import Vue from 'vue';
import VueAMap from 'vue-amap';
import { AMapManager } from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: '95cc1b89d62f020ce5a21ec503daef6c',
// 插件集合
plugin: [
'AMap.Autocomplete',
'AMap.PlaceSearch',
'AMap.Scale',
'AMap.OverView',
'AMap.ToolBar',
'AMap.MapType',
'AMap.PolyEditor',
'AMap.CircleEditor',
],
// 高德 sdk 版本，默认为 1.4.4
v: '1.4.15',
uiVersion: '1.0.11',
});
export default {
components: { BackToTop },
filters: {
deviceLocationFilter(center) {
if (center === null) {
return '';
}
center = center.replace(/\s*/g, '');
return center.split(',');
},
deviceStatusFilter(status, cate) {
var statuses = [];
statuses[1] = { color: '#1c7a17', name: '正常' };
statuses[2] = { color: '#f6e032', name: '错误' };
statuses[3] = { color: '#f6e032', name: '传感器故障' };
statuses[4] = { color: '#f30016', name: '报警' };
statuses[5] = { color: '#f42f18', name: '低报' };
statuses[6] = { color: '#97000b', name: '高报' };
statuses[7] = { color: '#f6e032', name: '通信故障' };
statuses[8] = { color: '#f6e032', name: '超量程' };
statuses[9] = { color: '#747677', name: '离线' };
statuses[10] = { color: '#f6e032', name: '电量低' };
statuses[11] = { color: '#f6e032', name: '主电故障' };
statuses[12] = { color: '#f6e032', name: '备电故障' };
statuses[13] = { color: '#f6e032', name: '无此节点' };
statuses[14] = { color: '#f6e032', name: '低电压' };
statuses[15] = { color: '#f6e032', name: '故障' };
statuses[16] = { color: '#97000b', name: '报警联动' };
if (cate === 'color') {
return statuses[status].color;
} else if (cate === 'status') {
return statuses[status].name;
}
},
},
data() {
const _this = this;
return {
buttonStatus: true,
order_content: {},
order_step: [],
marker: {
devicecoord: '114.505208, 38.045474',
devicepolice: 5,
},
map: {},
amapManager: new AMapManager(),
zoom: 13,
center: [114.505208, 38.045474],
events: {
init: (o) => {
o.setMapStyle('amap://styles/normal');
// console.log(o.getCenter());
// console.log(this.$refs.map.$$getInstance());
o.getCity(result => {
// console.log(result);
});
},
'moveend': () => {
},
'zoomchange': () => {
_this.zoom = this.$refs.map.$$getInstance().getZoom();
},
'click': (e) => {
// alert('map clicked');
},
},
plugin: [{
pName: 'ToolBar',
position: 'LB',
}, {
pName: 'MapType',
defaultType: 0,
events: {
init(o) {
console.log(o);
},
},
}],
dialogTableVisible: false,
alarmOrders: [],
alarmOrderUsersData: [{
id: 0,
name: '全部',
}],
formSearch: {
order_num: '',
deviceNum: '',
state: 99,
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: {
onSubmitDetail(id) {
const data = {
state: 2,
isorderone: 4,
schedule: JSON.stringify({
'schedule': 5, 'content': '恭喜，你的工单完成啦！',
}),
};
alarmOrderUpdate(data, id).then(response => {
if (response.code === 200) {
this.$message.success('恭喜，你的工单完成啦！');
this.dialogTableVisible = false;
this.dataSearch();
}
}).catch(err => {
console.log(err);
});
},
isLiveFilter(id) {
const steps = [];
steps[1] = '到达现场';
steps[2] = '未到达现场';
return steps[id];
},
isVerifiedFilter(id) {
const steps = [];
steps[1] = '属实';
steps[2] = '不属实';
return steps[id];
},
isRepairedFilter(id) {
const status = [];
status[1] = '已修好';
status[2] = '未修好';
return status[id];
},
isOrderOneFilter(id) {
const steps = [];
steps[1] = '开始';
steps[2] = '等待';
steps[3] = '检修';
steps[4] = '完成';
steps[5] = '审核通过';
return steps[id];
},
stepFilter(step) {
const steps = [];
steps[1] = '待接单';
steps[2] = '已接单';
steps[3] = '进行中';
steps[4] = '已完成';
steps[5] = '审核';
return steps[step];
},
alarmShow(data) {
this.marker.devicecoord = data.devicecoord;
this.marker.devicepolice = data.policestatus;
// 地图中心
this.center = data.devicecoord.replace(/\s*/g, '').split(',');
console.log(data);
this.orderDetail(data.id);
this.dialogTableVisible = true;
},
orderStateFilter(state, type) {
const status = [];
status[0] = { content: '未接单', type: 'danger' };
status[1] = { content: '进行中', type: 'warning' };
status[2] = { content: '完成', type: 'success' };
status[3] = { content: '异常终止', type: 'info' };
status[4] = { content: '已提交未审核', type: 'warning' };
if (type === 'type') {
return status[state].type;
}
if (type === 'content') {
return status[state].content;
}
},
// 工单详情
orderDetail(id) {
this.buttonStatus = true;
alarmOrderDetail(id).then(response => {
const all_steps = [{
schedule: 1, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 2, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 3, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 4, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 5, content: '', created_at: '', finish_status: 'finish',
}];
if (response.code === 200) {
console.log(response.data);
this.order_content = response.data;
const srcList = [];
for (var key in response.data.images) {
srcList.push(response.data.images[key].path);
}
this.order_content.srcList = srcList;
const order_step = response.data.step;
for (var step in all_steps) {
if (order_step[step]) {
all_steps[step] = order_step[step];
}
}
this.order_step = all_steps;
console.log((this.order_content.isorderone === 4) && (this.order_content.state === 4));
if ((this.order_content.isorderone === 3) && (this.order_content.state === 4)) {
this.buttonStatus = false;
}
if (response.data.state === 2) {
this.order_content.isorderone = 5;
}
console.log(this.order_step);
}
}).catch(err => {
console.log(err);
});
},
// 可以派单的人员
orderUsers(data) {
alarmOrderUsers().then(response => {
if (response.code === 200) {
this.alarmOrderUsersData = this.alarmOrderUsersData.concat(response.data);
}
}).catch(err => {
console.log(err);
});
},
// 工单列表
alarmOrdersData() {
console.log(this.formSearch);
alarmOrderList(this.formSearch).then(response => {
if (response.code === 200) {
console.log(response.data);
this.alarmOrders = response.data.orders;
this.formSearch.total = response.data.meta.count;
}
}).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>
resources/js/views/sweep-check/record.vue 0 → 100644
View file @ 04905158
<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, i) in alarmOrderUsersData"
:key="i + '1u'"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="工单号">
<el-input v-model="formSearch.order_num" placeholder="输入工单号"></el-input>
</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.state"
style="margin-left: 20px;"
placeholder="请选择"
>
<el-option
v-for="(item,ind) in optionStatus"
:key="ind + '2s'"
: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, 5]"
: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="180">
<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="180">
<template slot-scope="scope">
<span @click="handleCopy(scope.row.devicenumber,$event)">{{ scope.row.devicenumber }}</span>
</template>
</el-table-column>
<el-table-column label="接单人" width="100">
<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="80">
<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="orderStateFilter(scope.row.state, 'type')" effect="dark">{{ orderStateFilter(scope.row.state, 'content') }}</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-column label="--" width="140">
<template slot-scope="scope">
<el-button @click="alarmShow(scope.row)">详细信息</el-button>
</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>
<el-dialog title="工单详细信息" :visible.sync="dialogTableVisible" width="70%">
<el-steps :active="order_content.isorderone" align-center style="margin-bottom: 40px;">
<el-step
v-for="(item, oindex) in order_step"
:key="oindex + '1o'"
:title="stepFilter(item.schedule)"
:description="item.created_at + item.content"
:finish-status="item.finish_status"
>
</el-step>
</el-steps>
<el-row :gutter="20">
<el-col :span="8">
<div class="amap-page-container" style="height: 350px;">
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:zoom="zoom"
:center="center"
:events="events"
class="amap-demo"
:plugin="plugin"
>
<el-amap-circle-marker
:visible="true"
:center="marker.devicecoord | deviceLocationFilter(marker.devicecoord)"
:radius="13"
:fill-color="marker.devicepolice | deviceStatusFilter('color')"
:fill-opacity="1"
:stroke-color="'#ccc'"
:stroke-opacity="0.9"
></el-amap-circle-marker>
</el-amap>
</div>
</el-col>
<el-col :span="16">
<el-row>
<el-col :span="12">
<el-form size="mini">
<el-form-item label="设备编号">{{ order_content.devicenumber }}</el-form-item>
<el-form-item label="设备名称">{{ order_content.username }}</el-form-item>
<el-form-item label="类型">{{ order_content.tname }}</el-form-item>
<el-form-item label="检测介质">{{ order_content.gas }}</el-form-item>
<el-form-item label="位置">{{ order_content.deviceinfo }}</el-form-item>
<el-form-item label="坐标">{{ order_content.devicecoord }}</el-form-item>
<el-form-item label="检测值">{{ order_content.concentration + order_content.danwei }}</el-form-item>
<el-form-item label="报警类型">{{ order_content.status_name }}</el-form-item>
<el-form-item label="报警开始时间">{{ order_content.start_time }}</el-form-item>
<el-form-item label="报警结束时间">{{ order_content.end_time }}</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form size="mini">
<el-form-item label="订单编号">{{ order_content.order_num }}</el-form-item>
<el-form-item label="订单创建时间">{{ order_content.created_at }}</el-form-item>
<el-form-item label="订单更新时间">{{ order_content.updated_at }}</el-form-item>
<el-form-item label="接单人">{{ order_content.name }}</el-form-item>
<el-form-item label="联系电话">{{ order_content.phone_number }}</el-form-item>
<el-form-item label="是否到达现场">{{ isLiveFilter(order_content.is_live) }}</el-form-item>
<el-form-item label="是否属实">{{ isVerifiedFilter(order_content.is_verified) }}</el-form-item>
<el-form-item label="维修状态">{{ isRepairedFilter(order_content.isrepaired) }}</el-form-item>
<el-form-item label="进度">{{ isOrderOneFilter(order_content.isorderone) }}</el-form-item>
<el-form-item label="反馈内容">{{ order_content.content }}</el-form-item>
<el-form-item size="large">
<el-button type="primary" :disabled="buttonStatus" @click="onSubmitDetail(order_content.id)">确认</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<div class="demo-image">
<el-image
v-for="(item, index) in order_content.images"
:key="index + '1m'"
style="width: 100px; height: 100px; margin-right: 10px;"
:src="item.path"
:preview-src-list="order_content.srcList"
>
</el-image>
</div>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import clip from '@/utils/clipboard';
import BackToTop from '@/components/BackToTop';
import { alarmOrderUsers, alarmOrderList, alarmOrderDetail, alarmOrderUpdate } from '@/api/alarmOrder';
import Vue from 'vue';
import VueAMap from 'vue-amap';
import { AMapManager } from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: '95cc1b89d62f020ce5a21ec503daef6c',
// 插件集合
plugin: [
'AMap.Autocomplete',
'AMap.PlaceSearch',
'AMap.Scale',
'AMap.OverView',
'AMap.ToolBar',
'AMap.MapType',
'AMap.PolyEditor',
'AMap.CircleEditor',
],
// 高德 sdk 版本，默认为 1.4.4
v: '1.4.15',
uiVersion: '1.0.11',
});
export default {
components: { BackToTop },
filters: {
deviceLocationFilter(center) {
if (center === null) {
return '';
}
center = center.replace(/\s*/g, '');
return center.split(',');
},
deviceStatusFilter(status, cate) {
var statuses = [];
statuses[1] = { color: '#1c7a17', name: '正常' };
statuses[2] = { color: '#f6e032', name: '错误' };
statuses[3] = { color: '#f6e032', name: '传感器故障' };
statuses[4] = { color: '#f30016', name: '报警' };
statuses[5] = { color: '#f42f18', name: '低报' };
statuses[6] = { color: '#97000b', name: '高报' };
statuses[7] = { color: '#f6e032', name: '通信故障' };
statuses[8] = { color: '#f6e032', name: '超量程' };
statuses[9] = { color: '#747677', name: '离线' };
statuses[10] = { color: '#f6e032', name: '电量低' };
statuses[11] = { color: '#f6e032', name: '主电故障' };
statuses[12] = { color: '#f6e032', name: '备电故障' };
statuses[13] = { color: '#f6e032', name: '无此节点' };
statuses[14] = { color: '#f6e032', name: '低电压' };
statuses[15] = { color: '#f6e032', name: '故障' };
statuses[16] = { color: '#97000b', name: '报警联动' };
if (cate === 'color') {
return statuses[status].color;
} else if (cate === 'status') {
return statuses[status].name;
}
},
},
data() {
const _this = this;
return {
buttonStatus: true,
order_content: {},
order_step: [],
marker: {
devicecoord: '114.505208, 38.045474',
devicepolice: 5,
},
map: {},
amapManager: new AMapManager(),
zoom: 13,
center: [114.505208, 38.045474],
events: {
init: (o) => {
o.setMapStyle('amap://styles/normal');
// console.log(o.getCenter());
// console.log(this.$refs.map.$$getInstance());
o.getCity(result => {
// console.log(result);
});
},
'moveend': () => {
},
'zoomchange': () => {
_this.zoom = this.$refs.map.$$getInstance().getZoom();
},
'click': (e) => {
// alert('map clicked');
},
},
plugin: [{
pName: 'ToolBar',
position: 'LB',
}, {
pName: 'MapType',
defaultType: 0,
events: {
init(o) {
console.log(o);
},
},
}],
dialogTableVisible: false,
alarmOrders: [],
alarmOrderUsersData: [{
id: 0,
name: '全部',
}],
formSearch: {
order_num: '',
deviceNum: '',
state: 99,
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: {
onSubmitDetail(id) {
const data = {
state: 2,
isorderone: 4,
schedule: JSON.stringify({
'schedule': 5, 'content': '恭喜，你的工单完成啦！',
}),
};
alarmOrderUpdate(data, id).then(response => {
if (response.code === 200) {
this.$message.success('恭喜，你的工单完成啦！');
this.dialogTableVisible = false;
this.dataSearch();
}
}).catch(err => {
console.log(err);
});
},
isLiveFilter(id) {
const steps = [];
steps[1] = '到达现场';
steps[2] = '未到达现场';
return steps[id];
},
isVerifiedFilter(id) {
const steps = [];
steps[1] = '属实';
steps[2] = '不属实';
return steps[id];
},
isRepairedFilter(id) {
const status = [];
status[1] = '已修好';
status[2] = '未修好';
return status[id];
},
isOrderOneFilter(id) {
const steps = [];
steps[1] = '开始';
steps[2] = '等待';
steps[3] = '检修';
steps[4] = '完成';
steps[5] = '审核通过';
return steps[id];
},
stepFilter(step) {
const steps = [];
steps[1] = '待接单';
steps[2] = '已接单';
steps[3] = '进行中';
steps[4] = '已完成';
steps[5] = '审核';
return steps[step];
},
alarmShow(data) {
this.marker.devicecoord = data.devicecoord;
this.marker.devicepolice = data.policestatus;
// 地图中心
this.center = data.devicecoord.replace(/\s*/g, '').split(',');
console.log(data);
this.orderDetail(data.id);
this.dialogTableVisible = true;
},
orderStateFilter(state, type) {
const status = [];
status[0] = { content: '未接单', type: 'danger' };
status[1] = { content: '进行中', type: 'warning' };
status[2] = { content: '完成', type: 'success' };
status[3] = { content: '异常终止', type: 'info' };
status[4] = { content: '已提交未审核', type: 'warning' };
if (type === 'type') {
return status[state].type;
}
if (type === 'content') {
return status[state].content;
}
},
// 工单详情
orderDetail(id) {
this.buttonStatus = true;
alarmOrderDetail(id).then(response => {
const all_steps = [{
schedule: 1, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 2, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 3, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 4, content: '', created_at: '', finish_status: 'finish',
}, {
schedule: 5, content: '', created_at: '', finish_status: 'finish',
}];
if (response.code === 200) {
console.log(response.data);
this.order_content = response.data;
const srcList = [];
for (var key in response.data.images) {
srcList.push(response.data.images[key].path);
}
this.order_content.srcList = srcList;
const order_step = response.data.step;
for (var step in all_steps) {
if (order_step[step]) {
all_steps[step] = order_step[step];
}
}
this.order_step = all_steps;
console.log((this.order_content.isorderone === 4) && (this.order_content.state === 4));
if ((this.order_content.isorderone === 3) && (this.order_content.state === 4)) {
this.buttonStatus = false;
}
if (response.data.state === 2) {
this.order_content.isorderone = 5;
}
console.log(this.order_step);
}
}).catch(err => {
console.log(err);
});
},
// 可以派单的人员
orderUsers(data) {
alarmOrderUsers().then(response => {
if (response.code === 200) {
this.alarmOrderUsersData = this.alarmOrderUsersData.concat(response.data);
}
}).catch(err => {
console.log(err);
});
},
// 工单列表
alarmOrdersData() {
console.log(this.formSearch);
alarmOrderList(this.formSearch).then(response => {
if (response.code === 200) {
console.log(response.data);
this.alarmOrders = response.data.orders;
this.formSearch.total = response.data.meta.count;
}
}).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>
resources/js/views/sweep-check/security.vue 0 → 100644
View file @ 04905158
<template>
<div class="app-container">
<div class="filter-container">
<el-form :inline="true" :model="formSearch" class="demo-form-inline">
<el-form-item label="模版ID">
<el-input v-model="formSearch.template_id" placeholder="输入模版ID"></el-input>
</el-form-item>
<el-form-item label="安检计划名称">
<el-input v-model="formSearch.plan_name" placeholder="输入安检计划名称"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select
v-model="formSearch.status"
placeholder="请选择"
width="40"
>
<el-option
v-for="(item,ind) in optionStatus"
:key="ind + '2s'"
: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, 5]"
:page-size="formSearch.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="formSearch.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
<el-table :data="listData" border fit highlight-current-rows>
<el-table-column label="模版ID" width="180">
<template slot-scope="scope">
<span @click="handleCopy(scope.row.template_id,$event)">{{ scope.row.template_id }}</span>
</template>
</el-table-column>
<el-table-column label="安检计划名称" width="180">
<template slot-scope="scope">
<span @click="handleCopy(scope.row.plan_name,$event)">{{ scope.row.plan_name }}</span>
</template>
</el-table-column>
<el-table-column label="计划描述" width="100">
<template slot-scope="scope">
<span>{{ scope.row.description }}</span>
</template>
</el-table-column>
<el-table-column label="流程">
<template slot-scope="scope">
<el-steps :space="200" :active="1" finish-status="success">
<el-step v-for="(item,index) in scope.row.step" :key="index" :title="item.title"></el-step>
</el-steps>
</template>
</el-table-column>
<el-table-column label="状态" width="90">
<template slot-scope="scope">
<span>
<el-tag :type="statusFilter(scope.row.status, 'type')" effect="dark">{{ statusFilter(scope.row.status, 'content') }}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column label="创建时间" width="160">
<template slot-scope="scope">
<span>{{ scope.row.created_at }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import clip from '@/utils/clipboard';
export default {
filters: {
},
data() {
return {
listData: [],
formSearch: {
template_id: '',
plan_name: '',
status: 0,
timeRange: null,
page: 1,
limit: 20,
total: 0,
},
optionStatus: [{
value: 0,
label: '全部',
}, {
value: 1,
label: '在建中',
}, {
value: 2,
label: '已完成',
}, {
value: 3,
label: '已派发',
}, {
value: 4,
label: '禁用',
}],
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]);
},
},
],
},
};
},
created() {
this.listDataApi();
},
methods: {
statusFilter(state, type) {
const status = [];
status[1] = { content: '在建中', type: 'info' };
status[2] = { content: '已完成', type: 'warning' };
status[3] = { content: '已派发', type: 'success' };
status[4] = { content: '禁用', type: 'danger' };
if (type === 'type') {
return status[state].type;
}
if (type === 'content') {
return status[state].content;
}
},
// 列表
listDataApi() {
// console.log(this.formSearch);
// alarmOrderList(this.formSearch).then(response => {
// if (response.code === 200) {
// console.log(response.data);
// this.alarmOrders = response.data.orders;
// this.formSearch.total = response.data.meta.count;
// }
// }).catch(err => {
// console.log(err);
// });
this.formSearch.total = 4;
const listData = [{
template_id: '20201218153501427460',
plan_name: '燃气定期巡检1',
description: '定期巡检',
step: [{
step: 1,
title: '制定巡检时间',
}, {
step: 2,
title: '选择区域',
}, {
step: 3,
title: '确定巡检人员',
}],
status: 1,
created_at: '2020-12-20 11:04:29',
}, {
template_id: '20201218153501427461',
plan_name: '燃气定期巡检2',
description: '定期巡检',
step: [{
step: 1,
title: '制定巡检时间',
}, {
step: 2,
title: '选择区域',
}, {
step: 3,
title: '确定巡检人员',
}, {
step: 4,
title: '反馈信息',
}],
status: 2,
created_at: '2020-12-20 11:04:29',
}, {
template_id: '20201218153501427462',
plan_name: '燃气定期巡检3',
description: '定期巡检',
step: [{
step: 1,
title: '制定巡检时间',
}, {
step: 2,
title: '选择区域',
}, {
step: 3,
title: '确定巡检人员',
}, {
step: 4,
title: '巡检内容',
}],
status: 3,
created_at: '2020-12-20 11:04:29',
}, {
template_id: '20201218153501427463',
plan_name: '燃气定期巡检4',
description: '定期巡检',
step: [{
step: 1,
title: '制定巡检时间',
}, {
step: 2,
title: '选择区域',
}, {
step: 3,
title: '确定巡检人员',
}, {
step: 4,
title: '反馈信息',
}],
status: 4,
created_at: '2020-12-20 11:04:24',
}];
this.listData = listData;
if (this.formSearch.template_id) {
this.listData = [{
template_id: '20201218153501427461',
plan_name: '燃气定期巡检',
description: '定期巡检',
step: [{
step: 1,
title: '制定巡检时间',
}, {
step: 2,
title: '选择区域',
}, {
step: 3,
title: '确定巡检人员',
}, {
step: 4,
title: '反馈信息',
}],
status: 2,
created_at: '2020-12-20 11:04:29',
}];
}
},
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.listDataApi();
},
},
};
</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