初始化
This commit is contained in:
liuhanqing
315
ruoyi-ui/src/views/device/DeviceCar/index.vue
Normal file
315
ruoyi-ui/src/views/device/DeviceCar/index.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="设备编码" prop="deviceCode">
|
||||
<el-input v-model="queryParams.deviceCode" placeholder="请输入设备编码" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入设备名称" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-input v-model="queryParams.type" placeholder="请输入类型" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备IP" prop="ipAddress">
|
||||
<el-input v-model="queryParams.ipAddress" placeholder="请输入设备IP" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联缓冲区" prop="bufferAreaId">
|
||||
<el-input v-model="queryParams.bufferAreaId" placeholder="请输入关联缓冲区" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否可用" prop="isActive">
|
||||
<el-input v-model="queryParams.isActive" placeholder="请输入是否可用" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-input v-model="queryParams.status" placeholder="请输入状态" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备用字段1" prop="spare1">
|
||||
<el-input v-model="queryParams.spare1" placeholder="请输入备用字段1" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备用字段2" prop="spare2">
|
||||
<el-input v-model="queryParams.spare2" placeholder="请输入备用字段2" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备用字段3" prop="spare3">
|
||||
<el-input v-model="queryParams.spare3" placeholder="请输入备用字段3" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备用字段4" prop="spare4">
|
||||
<el-input v-model="queryParams.spare4" placeholder="请输入备用字段4" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务号" prop="taskNo">
|
||||
<el-input v-model="queryParams.taskNo" placeholder="请输入任务号" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="执行阶段" prop="zxjd">
|
||||
<el-input v-model="queryParams.zxjd" placeholder="请输入执行阶段" clearable size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="DeviceCarList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="设备编码" align="center" prop="deviceCode" />
|
||||
<el-table-column label="设备名称" align="center" prop="name" />
|
||||
<el-table-column label="类型" align="center" prop="type" />
|
||||
<el-table-column label="设备IP" align="center" prop="ipAddress" />
|
||||
<el-table-column label="关联缓冲区" align="center" prop="bufferAreaId" />
|
||||
<el-table-column label="是否可用" align="center" prop="isActive" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="status" />
|
||||
<el-table-column label="备用字段1" align="center" prop="spare1" />
|
||||
<el-table-column label="备用字段2" align="center" prop="spare2" />
|
||||
<el-table-column label="备用字段3" align="center" prop="spare3" />
|
||||
<el-table-column label="备用字段4" align="center" prop="spare4" />
|
||||
<el-table-column label="任务号" align="center" prop="taskNo" />
|
||||
<el-table-column label="执行阶段" align="center" prop="zxjd" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</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"
|
||||
/>
|
||||
|
||||
<!-- Add or Edit Device Information Dialog -->
|
||||
<el-dialog :title="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="deviceCode">
|
||||
<el-input v-model="form.deviceCode" placeholder="请输入设备编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入设备名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-input v-model="form.type" placeholder="请输入类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备IP" prop="ipAddress">
|
||||
<el-input v-model="form.ipAddress" placeholder="请输入设备IP" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联缓冲区" prop="bufferAreaId">
|
||||
<el-input v-model="form.bufferAreaId" placeholder="请输入关联缓冲区" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否可用" prop="isActive">
|
||||
<el-input v-model="form.isActive" placeholder="请输入是否可用" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备用字段1" prop="spare1">
|
||||
<el-input v-model="form.spare1" placeholder="请输入备用字段1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备用字段2" prop="spare2">
|
||||
<el-input v-model="form.spare2" placeholder="请输入备用字段2" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备用字段3" prop="spare3">
|
||||
<el-input v-model="form.spare3" placeholder="请输入备用字段3" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备用字段4" prop="spare4">
|
||||
<el-input v-model="form.spare4" placeholder="请输入备用字段4" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务号" prop="taskNo">
|
||||
<el-input v-model="form.taskNo" placeholder="请输入任务号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="执行阶段" prop="zxjd">
|
||||
<el-input v-model="form.zxjd" placeholder="请输入执行阶段" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listDeviceCar, getDeviceCar, delDeviceCar, addDeviceCar, updateDeviceCar } from "@/api/device/DeviceCar"
|
||||
|
||||
export default {
|
||||
name: "DeviceCar",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 设备信息表格数据
|
||||
DeviceCarList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deviceCode: null,
|
||||
name: null,
|
||||
type: null,
|
||||
ipAddress: null,
|
||||
bufferAreaId: null,
|
||||
isActive: null,
|
||||
status: null,
|
||||
spare1: null,
|
||||
spare2: null,
|
||||
spare3: null,
|
||||
spare4: null,
|
||||
taskNo: null,
|
||||
zxjd: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询设备信息列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listDeviceCar(this.queryParams).then(response => {
|
||||
this.DeviceCarList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
deviceCode: null,
|
||||
name: null,
|
||||
type: null,
|
||||
ipAddress: null,
|
||||
bufferAreaId: null,
|
||||
isActive: null,
|
||||
createTime: null,
|
||||
status: null,
|
||||
spare1: null,
|
||||
spare2: null,
|
||||
spare3: null,
|
||||
spare4: null,
|
||||
taskNo: null,
|
||||
zxjd: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加设备信息"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getDeviceCar(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改设备信息"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateDeviceCar(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addDeviceCar(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除设备信息编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delDeviceCar(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('device/DeviceCar/export', {
|
||||
...this.queryParams
|
||||
}, `DeviceCar_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-form-item >>> .el-form-item__label {
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
min-width: fit-content;
|
||||
}
|
||||
</style>
|
||||
327
ruoyi-ui/src/views/device/api/index.vue
Normal file
327
ruoyi-ui/src/views/device/api/index.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="请求参数" prop="requestBody">
|
||||
<el-input
|
||||
v-model="queryParams.requestBody"
|
||||
placeholder="请输入请求参数"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="错误信息" prop="errorDetails">
|
||||
<el-input
|
||||
v-model="queryParams.errorDetails"
|
||||
placeholder="请输入错误信息"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否成功" prop="isSuccessful">
|
||||
<el-select v-model="queryParams.isSuccessful" placeholder="请选择是否成功" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.interface_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['device:api:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['device:api:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['device:api:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['device:api:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="apiList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="请求id" align="left" prop="requestId" />
|
||||
<el-table-column label="请求时间" align="left" prop="requestTime" />
|
||||
<el-table-column label="来源系统" align="left" prop="sourceSystem" />
|
||||
<el-table-column label="目标系统" align="left" prop="targetSystem" />
|
||||
<el-table-column label="接口名称" align="left" prop="endpoint" />
|
||||
<el-table-column label="url路径" align="left" prop="requestUrl" />
|
||||
<el-table-column label="请求方式" align="left" prop="requestMethod" />
|
||||
<el-table-column label="请求头信息" align="left" prop="requestHeaders" />
|
||||
<el-table-column label="请求参数" align="left" prop="requestBody" />
|
||||
<el-table-column label="响应时间" align="left" prop="responseTime" />
|
||||
<el-table-column label="响应主体" align="left" prop="responseBody" />
|
||||
<el-table-column label="响应状态" align="left" prop="responseStatus" />
|
||||
<el-table-column label="错误信息" align="left" prop="errorDetails" />
|
||||
<el-table-column label="耗时" align="left" prop="duration" />
|
||||
<el-table-column label="是否成功" align="left" prop="isSuccessful">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.interface_status" :value="scope.row.isSuccessful"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改接口记录对话框 -->
|
||||
<el-dialog :title="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="sourceSystem">
|
||||
<el-input v-model="form.sourceSystem" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="目标系统" prop="targetSystem">
|
||||
<el-input v-model="form.targetSystem" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="接口名称" prop="endpoint">
|
||||
<el-input v-model="form.endpoint" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="url路径" prop="requestUrl">
|
||||
<el-input v-model="form.requestUrl" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="请求方式" prop="requestMethod">
|
||||
<el-input v-model="form.requestMethod" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="请求头信息" prop="requestHeaders">
|
||||
<el-input v-model="form.requestHeaders" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="请求参数" prop="requestBody">
|
||||
<el-input v-model="form.requestBody" placeholder="请输入请求参数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="响应主体" prop="responseBody">
|
||||
<el-input v-model="form.responseBody" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="错误信息" prop="errorDetails">
|
||||
<el-input v-model="form.errorDetails" placeholder="请输入错误信息" />
|
||||
</el-form-item>
|
||||
<el-form-item label="耗时" prop="duration">
|
||||
<el-input v-model="form.duration" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否成功" prop="isSuccessful">
|
||||
<el-select v-model="form.isSuccessful" placeholder="请选择是否成功">
|
||||
<el-option
|
||||
v-for="dict in dict.type.interface_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listApi, getApi, delApi, addApi, updateApi } from "@/api/device/api"
|
||||
|
||||
export default {
|
||||
name: "Api",
|
||||
dicts: ['interface_status'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 接口记录表格数据
|
||||
apiList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
requestTime: null,
|
||||
sourceSystem: null,
|
||||
targetSystem: null,
|
||||
endpoint: null,
|
||||
requestUrl: null,
|
||||
requestMethod: null,
|
||||
requestHeaders: null,
|
||||
requestBody: null,
|
||||
responseTime: null,
|
||||
responseBody: null,
|
||||
responseStatus: null,
|
||||
errorDetails: null,
|
||||
duration: null,
|
||||
isSuccessful: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询接口记录列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listApi(this.queryParams).then(response => {
|
||||
this.apiList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
requestId: null,
|
||||
requestTime: null,
|
||||
sourceSystem: null,
|
||||
targetSystem: null,
|
||||
endpoint: null,
|
||||
requestUrl: null,
|
||||
requestMethod: null,
|
||||
requestHeaders: null,
|
||||
requestBody: null,
|
||||
responseTime: null,
|
||||
responseBody: null,
|
||||
responseStatus: null,
|
||||
errorDetails: null,
|
||||
duration: null,
|
||||
isSuccessful: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.requestId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加接口记录"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const requestId = row.requestId || this.ids
|
||||
getApi(requestId).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改接口记录"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.requestId != null) {
|
||||
updateApi(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addApi(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const requestIds = row.requestId || this.ids
|
||||
this.$modal.confirm('是否确认删除接口记录编号为"' + requestIds + '"的数据项？').then(function() {
|
||||
return delApi(requestIds)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('device/api/export', {
|
||||
...this.queryParams
|
||||
}, `api_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
450
ruoyi-ui/src/views/device/ddj/index.vue
Normal file
450
ruoyi-ui/src/views/device/ddj/index.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="堆垛机名" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入堆垛机名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="任务号" prop="rwh">
|
||||
<el-input
|
||||
v-model="queryParams.rwh"
|
||||
placeholder="请输入任务号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="阶段标志" prop="jdbz">
|
||||
<el-input
|
||||
v-model="queryParams.jdbz"
|
||||
placeholder="请输入阶段标志"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="sbzt">
|
||||
<el-input
|
||||
v-model="queryParams.sbzt"
|
||||
placeholder="请输入状态"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作方式" prop="czfs">
|
||||
<el-input
|
||||
v-model="queryParams.czfs"
|
||||
placeholder="请输入操作方式"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>-->
|
||||
<!-- <el-form-item label="允许下发" prop="yxxf">
|
||||
<el-input
|
||||
v-model="queryParams.yxxf"
|
||||
placeholder="请输入允许下发"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>-->
|
||||
<!-- <el-form-item label="原排" prop="yph">
|
||||
<el-input
|
||||
v-model="queryParams.yph"
|
||||
placeholder="请输入原排"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="原列" prop="ylh">
|
||||
<el-input
|
||||
v-model="queryParams.ylh"
|
||||
placeholder="请输入原列"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="原层" prop="ych">
|
||||
<el-input
|
||||
v-model="queryParams.ych"
|
||||
placeholder="请输入原层"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="目标排" prop="mbph">
|
||||
<el-input
|
||||
v-model="queryParams.mbph"
|
||||
placeholder="请输入目标排"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="目标列" prop="mblh">
|
||||
<el-input
|
||||
v-model="queryParams.mblh"
|
||||
placeholder="请输入目标列"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="目标层" prop="mbch">
|
||||
<el-input
|
||||
v-model="queryParams.mbch"
|
||||
placeholder="请输入目标层"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="心跳信号" prop="xtxh">
|
||||
<el-input
|
||||
v-model="queryParams.xtxh"
|
||||
placeholder="请输入心跳信号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前巷道" prop="dqxd">
|
||||
<el-input
|
||||
v-model="queryParams.dqxd"
|
||||
placeholder="请输入当前巷道"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>-->
|
||||
<!-- <el-form-item label="货叉状态" prop="hczt">
|
||||
<el-input
|
||||
v-model="queryParams.hczt"
|
||||
placeholder="请输入货叉状态"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>-->
|
||||
<el-form-item label="是否可用" prop="spare1">
|
||||
<el-select>
|
||||
<el-option
|
||||
v-for="dict in dict.type.device_lock"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="备用字段2" prop="spare2">
|
||||
<el-input
|
||||
v-model="queryParams.spare2"
|
||||
placeholder="请输入备用字段2"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备用字段3" prop="spare3">
|
||||
<el-input
|
||||
v-model="queryParams.spare3"
|
||||
placeholder="请输入备用字段3"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['device:ddj:add']"
|
||||
>新增</el-button>
|
||||
</el-col>-->
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['device:ddj:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['device:ddj:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>-->
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['device:ddj:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="ddjList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="id" align="center" prop="id" />
|
||||
<el-table-column label="堆垛机名称" align="center" prop="name" />
|
||||
<el-table-column label="当前巷道" align="center" prop="dqxd"/>
|
||||
|
||||
<!-- <el-table-column label="任务号" align="center" prop="rwh" />
|
||||
<el-table-column label="阶段标志" align="center" prop="jdbz" />
|
||||
<el-table-column label="状态" align="center" prop="sbzt" />
|
||||
<el-table-column label="操作方式" align="center" prop="czfs" />
|
||||
<el-table-column label="允许下发" align="center" prop="yxxf" />
|
||||
<el-table-column label="原排" align="center" prop="yph" />
|
||||
<el-table-column label="原列" align="center" prop="ylh" />
|
||||
<el-table-column label="原层" align="center" prop="ych" />
|
||||
<el-table-column label="目标排" align="center" prop="mbph" />
|
||||
<el-table-column label="目标列" align="center" prop="mblh" />
|
||||
<el-table-column label="目标层" align="center" prop="mbch" />
|
||||
<el-table-column label="心跳信号" align="center" prop="xtxh" />
|
||||
<el-table-column label="货叉状态" align="center" prop="hczt" />-->
|
||||
<el-table-column label="设备锁" align="center" prop="spare1">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.device_lock" :value="scope.row.spare1"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="备用字段2" align="center" prop="spare2" />
|
||||
<el-table-column label="备用字段3" align="center" prop="spare3" />-->
|
||||
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['device:ddj:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['device:ddj:remove']"
|
||||
>删除</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-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="90px">
|
||||
<el-form-item label="堆垛机名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入堆垛机名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备锁" prop="spare1">
|
||||
<el-select v-model="form.spare1" placeholder="请选择设备状态">
|
||||
<el-option
|
||||
v-for="dict in dict.type.device_lock"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {addDdj, delDdj, getDdj, listDdj, updateDdj} from "@/api/device/ddj"
|
||||
|
||||
export default {
|
||||
name: "Ddj",
|
||||
dicts: ['device_lock'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 堆垛机监控表格数据
|
||||
ddjList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
rwh: null,
|
||||
jdbz: null,
|
||||
sbzt: null,
|
||||
czfs: null,
|
||||
yxxf: null,
|
||||
yph: null,
|
||||
ylh: null,
|
||||
ych: null,
|
||||
mbph: null,
|
||||
mblh: null,
|
||||
mbch: null,
|
||||
xtxh: null,
|
||||
dqxd: null,
|
||||
hczt: null,
|
||||
spare1: null,
|
||||
spare2: null,
|
||||
spare3: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询堆垛机监控列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listDdj(this.queryParams).then(response => {
|
||||
this.ddjList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
rwh: null,
|
||||
jdbz: null,
|
||||
sbzt: null,
|
||||
czfs: null,
|
||||
yxxf: null,
|
||||
yph: null,
|
||||
ylh: null,
|
||||
ych: null,
|
||||
mbph: null,
|
||||
mblh: null,
|
||||
mbch: null,
|
||||
xtxh: null,
|
||||
dqxd: null,
|
||||
hczt: null,
|
||||
spare1: null,
|
||||
spare2: null,
|
||||
spare3: null
|
||||
}
|
||||
this.resetForm("form")
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm")
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.open = true
|
||||
this.title = "添加堆垛机监控"
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const id = row.id || this.ids
|
||||
getDdj(id).then(response => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.title = "修改堆垛机监控"
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateDdj(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
addDdj(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功")
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids
|
||||
this.$modal.confirm('是否确认删除堆垛机监控编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delDdj(ids)
|
||||
}).then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('device/ddj/export', {
|
||||
...this.queryParams
|
||||
}, `ddj_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
420
ruoyi-ui/src/views/device/ssj/index.vue
Normal file
420
ruoyi-ui/src/views/device/ssj/index.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索和操作区域 -->
|
||||
|
||||
|
||||
<!-- 7个表格区域 -->
|
||||
<el-row :gutter="20" class="table-container">
|
||||
<el-col :span="24" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">堆垛机监控</span>
|
||||
<el-tag type="success" size="mini">总计: 6 台</el-tag>
|
||||
</div>
|
||||
<el-table :data="ddjData" size="mini" style="width: 100%">
|
||||
<el-table-column label="id" align="center" prop="id"/>
|
||||
<el-table-column label="堆垛机名称" align="center" prop="name"/>
|
||||
<el-table-column label="当前巷道" align="center" prop="dqxd"/>
|
||||
<el-table-column label="任务号" align="center" prop="rwh"/>
|
||||
<el-table-column label="阶段标志" align="center" prop="jdbz">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ddj_task_status" :value="scope.row.jdbz"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备状态" align="center" prop="sbzt">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ddj_sbzt" :value="scope.row.sbzt"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作方式" align="center" prop="czfs">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ddj_czfs" :value="scope.row.czfs"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="允许下发" align="center" prop="yxxf">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ddj_yxxf" :value="scope.row.yxxf"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原排" align="center" prop="yph"/>
|
||||
<el-table-column label="原列" align="center" prop="ylh"/>
|
||||
<el-table-column label="原层" align="center" prop="ych"/>
|
||||
<el-table-column label="目标排" align="center" prop="mbph"/>
|
||||
<el-table-column label="目标列" align="center" prop="mblh"/>
|
||||
<el-table-column label="目标层" align="center" prop="mbch"/>
|
||||
<el-table-column label="心跳信号" align="center" prop="xtxh"/>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="table-container">
|
||||
<!-- 表格1：入库输送机 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道1输送机</span>
|
||||
<el-tag type="success" size="mini">{{ table1Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table1Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 表格2：出库输送机 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道2输送机</span>
|
||||
<el-tag type="success" size="mini">{{ table2Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table2Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 表格3：分拣输送机 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道3输送机</span>
|
||||
<el-tag type="success" size="mini">{{ table3Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table3Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="table-container">
|
||||
<!-- 表格4：提升机 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道4输送机</span>
|
||||
<el-tag type="success" size="mini">{{ table4Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table4Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 表格5：移载机 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道5输送机</span>
|
||||
<el-tag type="success" size="mini">{{ table5Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table5Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 表格6：旋转台 -->
|
||||
<el-col :span="8" class="table-col">
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">巷道6输送机</span>
|
||||
<el-tag size="success">{{ table6Data.length }}台</el-tag>
|
||||
</div>
|
||||
<el-table :data="table6Data" size="mini" style="width: 100%">
|
||||
<el-table-column label="设备编码" prop="deviceCode"/>
|
||||
<!-- <el-table-column label="设备名称" prop="name"/>-->
|
||||
<el-table-column label="任务号" prop="taskNo"/>
|
||||
<el-table-column label="到位" prop="dw">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_dw" :value="scope.row.dw"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="空闲" prop="kx">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_kx" :value="scope.row.kx"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常" prop="exception">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_ex" :value="scope.row.exception"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模式" prop="traySize">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.ssj_model" :value="scope.row.traySize"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {listSsj} from "@/api/device/ssj";
|
||||
import "@/assets/styles/index.scss";
|
||||
import {listDdj} from "@/api/device/ddj"
|
||||
|
||||
|
||||
export default {
|
||||
name: "deviceMonitor",
|
||||
dicts: ['ddj_task_status', 'ddj_sbzt', 'ddj_czfs', 'ddj_yxxf', 'ddj_hczt', 'ssj_dw', 'ssj_kx', 'ssj_model', 'ssj_ex'],
|
||||
data() {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 99
|
||||
},
|
||||
// 7个表格的模拟数据
|
||||
table1Data: [], // 入库输送机
|
||||
table2Data: [], // 出库输送机
|
||||
table3Data: [], // 分拣输送机
|
||||
table4Data: [], // 提升机
|
||||
table5Data: [], // 移载机
|
||||
table6Data: [], // 旋转台
|
||||
ddjData: [], // 汇总统计
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initMockData()
|
||||
},
|
||||
mounted() {
|
||||
this.timer = setInterval(() => {
|
||||
this.initMockData();
|
||||
}, 1000); // 每1秒刷新一次
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
},
|
||||
methods: {
|
||||
/** 初始化模拟数据 */
|
||||
initMockData() {
|
||||
listDdj().then(response => {
|
||||
this.ddjData = response.rows
|
||||
})
|
||||
listSsj(this.queryParams).then(response => {
|
||||
this.table1Data = response.rows.filter(item => item.deviceCode === 'L2001' || item.deviceCode === 'L2002' || item.deviceCode === 'L2007' || item.deviceCode === 'L2008')
|
||||
this.table2Data = response.rows.filter(item => item.deviceCode === 'L2003' || item.deviceCode === 'L2004' || item.deviceCode === 'L2009' || item.deviceCode === 'L2010')
|
||||
this.table3Data = response.rows.filter(item => item.deviceCode === 'L2005' || item.deviceCode === 'L2006' || item.deviceCode === 'L2011' || item.deviceCode === 'L2012')
|
||||
this.table4Data = response.rows.filter(item => item.deviceCode === 'L1001' || item.deviceCode === 'L1002')
|
||||
this.table5Data = response.rows.filter(item => item.deviceCode === 'L1003' || item.deviceCode === 'L1004')
|
||||
this.table6Data = response.rows.filter(item => item.deviceCode === 'L1005' || item.deviceCode === 'L1006')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-form-item >>> .el-form-item__label {
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
/* 表格容器样式 */
|
||||
.table-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table-col {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 表格卡片样式 */
|
||||
.table-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.table-card:hover {
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 表格头部样式 */
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
background: #ffffff; /* Element UI 主题蓝 */
|
||||
color: rgb(0, 0, 0);
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 表格样式调整 */
|
||||
.el-table {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
.el-table--mini {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 1200px) {
|
||||
.el-col-8 {
|
||||
width: 50% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.el-col-8 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 标签样式优化 */
|
||||
.el-tag {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.el-progress {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user