|
|
|
@ -1,9 +1,9 @@ |
|
|
|
<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="deviceNo"> |
|
|
|
<el-form-item label="设备桩号" prop="stakeMark"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.deviceNo" |
|
|
|
v-model="queryParams.stakeMark" |
|
|
|
placeholder="请输入设备桩号" |
|
|
|
clearable |
|
|
|
@keyup.enter.native="handleQuery" |
|
|
|
@ -26,36 +26,54 @@ |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="方向" prop="direction"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.direction" |
|
|
|
placeholder="请输入方向" |
|
|
|
clearable |
|
|
|
@keyup.enter.native="handleQuery" |
|
|
|
/> |
|
|
|
<el-select v-model="queryParams.direction" clearable placeholder="请选择方向" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in directionList" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="厂家" prop="production"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.production" |
|
|
|
placeholder="请输入厂家" |
|
|
|
clearable |
|
|
|
@keyup.enter.native="handleQuery" |
|
|
|
/> |
|
|
|
<el-form-item label="所属部门" prop="groupId"> |
|
|
|
<el-select v-model="queryParams.groupId" clearable placeholder="请选择所属部门" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in groupList" |
|
|
|
:key="dict.deptId" |
|
|
|
:label="dict.deptName" |
|
|
|
:value="dict.deptId" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="型号" prop="model"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.model" |
|
|
|
placeholder="请输入型号" |
|
|
|
clearable |
|
|
|
@keyup.enter.native="handleQuery" |
|
|
|
/> |
|
|
|
<el-form-item label="设备状态" prop="deviceState"> |
|
|
|
<el-select v-model="queryParams.useState" clearable placeholder="请选择使用状态" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in useStateList" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="网段" prop="network"> |
|
|
|
<el-input |
|
|
|
v-model="queryParams.network" |
|
|
|
placeholder="请输入网段" |
|
|
|
clearable |
|
|
|
@keyup.enter.native="handleQuery" |
|
|
|
/> |
|
|
|
<el-form-item label="设备类型" prop="deviceType"> |
|
|
|
<el-select v-model="queryParams.deviceType" clearable placeholder="请选择设备类型" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in deviceTypeList" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="设备所属" prop="deviceType"> |
|
|
|
<el-select v-model="queryParams.facilitiesType" clearable placeholder="请选择设备所属" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in facilitiesTypeList" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
|
|
|
@ -72,7 +90,8 @@ |
|
|
|
size="mini" |
|
|
|
@click="handleAdd" |
|
|
|
v-hasPermi="['system:device:add']" |
|
|
|
>新增</el-button> |
|
|
|
>新增 |
|
|
|
</el-button> |
|
|
|
</el-col> |
|
|
|
<el-col :span="1.5"> |
|
|
|
<el-button |
|
|
|
@ -83,7 +102,8 @@ |
|
|
|
:disabled="single" |
|
|
|
@click="handleUpdate" |
|
|
|
v-hasPermi="['system:device:edit']" |
|
|
|
>修改</el-button> |
|
|
|
>修改 |
|
|
|
</el-button> |
|
|
|
</el-col> |
|
|
|
<el-col :span="1.5"> |
|
|
|
<el-button |
|
|
|
@ -94,7 +114,8 @@ |
|
|
|
:disabled="multiple" |
|
|
|
@click="handleDelete" |
|
|
|
v-hasPermi="['system:device:remove']" |
|
|
|
>删除</el-button> |
|
|
|
>删除 |
|
|
|
</el-button> |
|
|
|
</el-col> |
|
|
|
<el-col :span="1.5"> |
|
|
|
<el-button |
|
|
|
@ -104,23 +125,86 @@ |
|
|
|
size="mini" |
|
|
|
@click="handleExport" |
|
|
|
v-hasPermi="['system:device:export']" |
|
|
|
>导出</el-button> |
|
|
|
>导出 |
|
|
|
</el-button> |
|
|
|
</el-col> |
|
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-table v-loading="loading" :data="deviceList" @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="deviceNo" /> |
|
|
|
<el-table-column label="设备名称" align="center" prop="deviceName" /> |
|
|
|
<el-table-column label="设备IP" align="center" prop="deviceIp" /> |
|
|
|
<el-table-column label="方向" align="center" prop="direction" /> |
|
|
|
<el-table-column label="厂家" align="center" prop="production" /> |
|
|
|
<el-table-column label="型号" align="center" prop="model" /> |
|
|
|
<el-table-column label="网段" align="center" prop="network" /> |
|
|
|
<el-table-column label="备注" align="center" prop="content" /> |
|
|
|
<el-table-column label="设备类型" align="center" prop="type" /> |
|
|
|
<el-table-column type="selection" width="55" align="center"/> |
|
|
|
<el-table-column label="设备图片 " align="center" prop="deviceImg"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-image |
|
|
|
v-if="scope.row.deviceImg" |
|
|
|
style="width: 30px; height: 30px" |
|
|
|
:src="scope.row.deviceImg" |
|
|
|
:preview-src-list="[scope.row.deviceImg]" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
<p v-else>暂无</p> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="设备ID" align="center" prop="id"/> |
|
|
|
<el-table-column label="物联设备ID" align="center" prop="iotDeviceId"/> |
|
|
|
<el-table-column label="设备桩号" align="center" prop="stakeMark"/> |
|
|
|
<el-table-column label="设备名称" align="center" prop="deviceName"/> |
|
|
|
<el-table-column label="设备IP" align="center" prop="deviceIp"/> |
|
|
|
<el-table-column label="设备编号" align="center" prop="deviceCode"/> |
|
|
|
<el-table-column label="方向" align="center" prop="direction"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-for="(item, index) in directionList" :key="index" v-if="scope.row.direction === item.value"> |
|
|
|
{{ item.label }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="所属产品" align="center" prop="productId"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-for="(item, index) in productList" :key="index" v-if="scope.row.productId === item.id"> |
|
|
|
{{ item.productName }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="所属部门" align="center" prop="groupId"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-for="(item, index) in groupList" :key="index" v-if="scope.row.groupId === item.deptId"> |
|
|
|
{{ item.deptName }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="设备状态" align="center" prop="deviceState"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-for="(item, index) in deviceStateList" :key="index" v-if="scope.row.deviceState === item.value"> |
|
|
|
{{ item.label }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="设备类型" align="center" prop="deviceType"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-for="(item, index) in deviceTypeList" :key="index" v-if="scope.row.deviceType === item.value"> |
|
|
|
{{ item.label }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="生产日期" align="center" prop="productionDate"/> |
|
|
|
<el-table-column label="使用年限" align="center" prop="durableYears"/> |
|
|
|
<el-table-column label="安装位置" align="center" prop="installationSite"/> |
|
|
|
<el-table-column label="使用状态" align="center" prop="useState"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-for="(item, index) in useStateList" :key="index" v-if="scope.row.useState === item.value"> |
|
|
|
{{ item.label }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="设备所属" align="center" prop="facilitiesType"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-for="(item, index) in facilitiesTypeList" :key="index" |
|
|
|
v-if="scope.row.facilitiesType === item.value" |
|
|
|
> |
|
|
|
{{ item.label }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button |
|
|
|
@ -129,14 +213,16 @@ |
|
|
|
icon="el-icon-edit" |
|
|
|
@click="handleUpdate(scope.row)" |
|
|
|
v-hasPermi="['system:device:edit']" |
|
|
|
>修改</el-button> |
|
|
|
>修改 |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
size="mini" |
|
|
|
type="text" |
|
|
|
icon="el-icon-delete" |
|
|
|
@click="handleDelete(scope.row)" |
|
|
|
v-hasPermi="['system:device:remove']" |
|
|
|
>删除</el-button> |
|
|
|
>删除 |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
@ -150,28 +236,119 @@ |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 添加或修改【请填写功能名称】对话框 --> |
|
|
|
<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="deviceNo"> |
|
|
|
<el-input v-model="form.deviceNo" placeholder="请输入设备桩号" /> |
|
|
|
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> |
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
|
|
|
<el-form-item label="设备图片" prop="deviceImg"> |
|
|
|
<div class="photo"> |
|
|
|
<el-upload |
|
|
|
name="file" |
|
|
|
:action="reqFileUrl" |
|
|
|
:accept="accept" |
|
|
|
:before-upload="beforeUpload" |
|
|
|
:headers="{'Authorization': 'Bearer ' + getToken()}" |
|
|
|
:show-file-list="false" |
|
|
|
:on-success="handleSuccess" |
|
|
|
> |
|
|
|
<img v-if="form.deviceImg" :src="form.deviceImg" class="avatar"> |
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="物联设备ID" prop="iotDeviceId"> |
|
|
|
<el-input v-model="form.iotDeviceId" placeholder="请输入物联设备ID"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="设备桩号" prop="stakeMark"> |
|
|
|
<el-input v-model="form.stakeMark" placeholder="请输入设备桩号"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="设备名称" prop="deviceName"> |
|
|
|
<el-input v-model="form.deviceName" placeholder="请输入设备名称" /> |
|
|
|
<el-input v-model="form.deviceName" placeholder="请输入设备名称"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="设备IP" prop="deviceIp"> |
|
|
|
<el-input v-model="form.deviceIp" placeholder="请输入设备IP" /> |
|
|
|
<el-input v-model="form.deviceIp" placeholder="请输入设备IP"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="设备编号" prop="deviceCode"> |
|
|
|
<el-input v-model="form.deviceCode" placeholder="请输入设备编号"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="方向" prop="direction"> |
|
|
|
<el-input v-model="form.direction" placeholder="请输入方向" /> |
|
|
|
<el-select v-model="form.direction" clearable placeholder="请选择方向" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in directionList" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所属产品" prop="productId"> |
|
|
|
<el-select v-model="form.productId" clearable placeholder="请选择所属产品" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in productList" |
|
|
|
:key="dict.id" |
|
|
|
:label="dict.productName" |
|
|
|
:value="dict.id" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所属部门" prop="groupId"> |
|
|
|
<el-select v-model="form.groupId" clearable placeholder="请选择所属部门" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in groupList" |
|
|
|
:key="dict.deptId" |
|
|
|
:label="dict.deptName" |
|
|
|
:value="dict.deptId" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="厂家" prop="production"> |
|
|
|
<el-input v-model="form.production" placeholder="请输入厂家" /> |
|
|
|
<el-form-item label="设备类型" prop="deviceType"> |
|
|
|
<el-select v-model="form.deviceType" clearable placeholder="请选择设备类型" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in deviceTypeList" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="型号" prop="model"> |
|
|
|
<el-input v-model="form.model" placeholder="请输入型号" /> |
|
|
|
<el-row> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="生产日期" prop="productionDate"> |
|
|
|
<el-date-picker |
|
|
|
v-model="form.productionDate" |
|
|
|
type="datetime" |
|
|
|
placeholder="选择日期时间" |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="使用年限" prop="durableYears"> |
|
|
|
<el-input-number v-model="form.durableYears" controls-position="right" :min="0"> |
|
|
|
</el-input-number> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-form-item label="安装位置" prop="installationSite"> |
|
|
|
<el-input v-model="form.installationSite" placeholder="请输入安装位置"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="网段" prop="network"> |
|
|
|
<el-input v-model="form.network" placeholder="请输入网段" /> |
|
|
|
<el-form-item label="使用状态" prop="useState"> |
|
|
|
<el-select v-model="form.useState" clearable placeholder="请选择使用状态" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in useStateList" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="设备所属" prop="facilitiesType"> |
|
|
|
<el-select v-model="form.facilitiesType" clearable placeholder="请选择设备所属" class="select-width"> |
|
|
|
<el-option |
|
|
|
v-for="dict in facilitiesTypeList" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="备注"> |
|
|
|
<!-- 脚本 --> |
|
|
|
@ -191,16 +368,23 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/system/device"; |
|
|
|
import JsonEditor from '@/components/JsonEditor' |
|
|
|
import { getToken } from '@/utils/auth' |
|
|
|
import { listDevice, getDevice, delDevice, addDevice, updateDevice } from '@/api/system/device' |
|
|
|
import { listDept } from '@/api/system/dept' |
|
|
|
import { queryProduct } from '@/api/system/product' |
|
|
|
import JsonEditor from '@/components/Editor' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "Device", |
|
|
|
name: 'Device', |
|
|
|
components: { |
|
|
|
JsonEditor |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
//上传图片路径 |
|
|
|
reqFileUrl: process.env.VUE_APP_BASE_API + '/common/upload', |
|
|
|
//限制图片格式 |
|
|
|
accept: '.jpg,.jpeg,.png,.JPG,.JPEG,.svg,.SVG', |
|
|
|
// 代码编辑器配置 |
|
|
|
editorOptions: { |
|
|
|
mode: 'text', // 默认模式 tree,code,form,text,view |
|
|
|
@ -221,125 +405,284 @@ export default { |
|
|
|
// 【请填写功能名称】表格数据 |
|
|
|
deviceList: [], |
|
|
|
// 弹出层标题 |
|
|
|
title: "", |
|
|
|
title: '', |
|
|
|
// 是否显示弹出层 |
|
|
|
open: false, |
|
|
|
// 查询参数 |
|
|
|
queryParams: { |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
deviceNo: null, |
|
|
|
stakeMark: null, |
|
|
|
deviceName: null, |
|
|
|
deviceIp: null, |
|
|
|
direction: null, |
|
|
|
production: null, |
|
|
|
model: null, |
|
|
|
network: null, |
|
|
|
content: null, |
|
|
|
type: null |
|
|
|
groupId: null, |
|
|
|
deviceState: null, |
|
|
|
deviceType: null |
|
|
|
}, |
|
|
|
// 表单参数 |
|
|
|
form: {}, |
|
|
|
// 表单校验 |
|
|
|
rules: { |
|
|
|
} |
|
|
|
}; |
|
|
|
stakeMark: [ |
|
|
|
{ required: true, message: '请输入设备桩号', trigger: 'blur' } |
|
|
|
], |
|
|
|
deviceName: [ |
|
|
|
{ required: true, message: '请输入设备名称', trigger: 'blur' } |
|
|
|
], |
|
|
|
deviceType: [ |
|
|
|
{ required: true, message: '请输入设备类型', trigger: 'blur' } |
|
|
|
] |
|
|
|
}, |
|
|
|
// 方向列表 |
|
|
|
directionList: [], |
|
|
|
// 所属部门数据列表 |
|
|
|
groupList: [], |
|
|
|
// 所属产品列表 |
|
|
|
productList: [], |
|
|
|
// 设备状态列表 |
|
|
|
deviceStateList: [], |
|
|
|
// 设备类型列表 |
|
|
|
deviceTypeList: [], |
|
|
|
// 使用状态列表 |
|
|
|
useStateList: [], |
|
|
|
// 设备所属列表 |
|
|
|
facilitiesTypeList: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getList(); |
|
|
|
this.getList() |
|
|
|
this.directionList = [ |
|
|
|
{ |
|
|
|
label: '上行', |
|
|
|
value: '1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '中', |
|
|
|
value: '2' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '下行', |
|
|
|
value: '3' |
|
|
|
} |
|
|
|
] |
|
|
|
listDept().then(response => { |
|
|
|
this.groupList = response.data |
|
|
|
}) |
|
|
|
queryProduct().then(response => { |
|
|
|
this.productList = response.data |
|
|
|
}) |
|
|
|
this.deviceStateList = [ |
|
|
|
{ |
|
|
|
label: '异常', |
|
|
|
value: '0' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '正常', |
|
|
|
value: '1' |
|
|
|
} |
|
|
|
] |
|
|
|
this.deviceTypeList = [ |
|
|
|
{ |
|
|
|
label: '摄像机', |
|
|
|
value: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '可变信息标志', |
|
|
|
value: 2 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '气象监测器', |
|
|
|
value: 3 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '出口诱导灯', |
|
|
|
value: 4 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '路段语音广播', |
|
|
|
value: 5 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '护栏碰撞', |
|
|
|
value: 6 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '毫米波雷达', |
|
|
|
value: 7 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '合流区预警', |
|
|
|
value: 8 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '智慧锥桶', |
|
|
|
value: 9 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '激光疲劳唤醒', |
|
|
|
value: 10 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '一类交通量调查站', |
|
|
|
value: 11 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '行车诱导', |
|
|
|
value: 12 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '智能设备箱', |
|
|
|
value: 13 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '光线在线监测', |
|
|
|
value: 14 |
|
|
|
} |
|
|
|
] |
|
|
|
this.useStateList = [ |
|
|
|
{ |
|
|
|
label: '未使用', |
|
|
|
value: 0 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '已使用', |
|
|
|
value: 1 |
|
|
|
} |
|
|
|
] |
|
|
|
this.facilitiesTypeList = [ |
|
|
|
{ |
|
|
|
label: '主干道', |
|
|
|
value: '0' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '服务区', |
|
|
|
value: '1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '收费站', |
|
|
|
value: '3' |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//获得令牌 |
|
|
|
getToken() { |
|
|
|
return getToken() |
|
|
|
}, |
|
|
|
//上传图片后成功的操作 |
|
|
|
handleSuccess(response, file, fileList) { |
|
|
|
this.form.deviceImg = response.url |
|
|
|
}, |
|
|
|
//上传之前的操作 验证 |
|
|
|
beforeUpload(file) { |
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2 //这里做文件大小限制 |
|
|
|
if (!isLt2M) { |
|
|
|
this.$message({ |
|
|
|
message: '上传文件大小不能超过 2M ', |
|
|
|
type: 'warning' |
|
|
|
}) |
|
|
|
} |
|
|
|
return isLt2M |
|
|
|
}, |
|
|
|
/** 查询【请填写功能名称】列表 */ |
|
|
|
getList() { |
|
|
|
this.loading = true; |
|
|
|
this.loading = true |
|
|
|
listDevice(this.queryParams).then(response => { |
|
|
|
this.deviceList = response.rows; |
|
|
|
this.total = response.total; |
|
|
|
this.loading = false; |
|
|
|
}); |
|
|
|
this.deviceList = response.rows |
|
|
|
this.total = response.total |
|
|
|
this.loading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 取消按钮 |
|
|
|
cancel() { |
|
|
|
this.open = false; |
|
|
|
this.reset(); |
|
|
|
this.open = false |
|
|
|
this.reset() |
|
|
|
}, |
|
|
|
// 表单重置 |
|
|
|
reset() { |
|
|
|
this.form = { |
|
|
|
id: null, |
|
|
|
deviceNo: null, |
|
|
|
deviceImg: null, |
|
|
|
iotDeviceId: null, |
|
|
|
stakeMark: null, |
|
|
|
deviceName: null, |
|
|
|
deviceIp: null, |
|
|
|
deviceCode: null, |
|
|
|
direction: null, |
|
|
|
production: null, |
|
|
|
model: null, |
|
|
|
network: null, |
|
|
|
content: null, |
|
|
|
type: null |
|
|
|
}; |
|
|
|
this.resetForm("form"); |
|
|
|
productId: null, |
|
|
|
groupId: null, |
|
|
|
deviceState: null, |
|
|
|
productionDate: null, |
|
|
|
durableYears: null, |
|
|
|
installationSite: null, |
|
|
|
useState: null, |
|
|
|
facilitiesType: null |
|
|
|
} |
|
|
|
this.resetForm('form') |
|
|
|
}, |
|
|
|
/** 搜索按钮操作 */ |
|
|
|
handleQuery() { |
|
|
|
this.queryParams.pageNum = 1; |
|
|
|
this.getList(); |
|
|
|
this.queryParams.pageNum = 1 |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
/** 重置按钮操作 */ |
|
|
|
resetQuery() { |
|
|
|
this.resetForm("queryForm"); |
|
|
|
this.handleQuery(); |
|
|
|
this.resetForm('queryForm') |
|
|
|
this.handleQuery() |
|
|
|
}, |
|
|
|
// 多选框选中数据 |
|
|
|
handleSelectionChange(selection) { |
|
|
|
this.ids = selection.map(item => item.id) |
|
|
|
this.single = selection.length!==1 |
|
|
|
this.single = selection.length !== 1 |
|
|
|
this.multiple = !selection.length |
|
|
|
}, |
|
|
|
/** 新增按钮操作 */ |
|
|
|
handleAdd() { |
|
|
|
this.reset(); |
|
|
|
this.open = true; |
|
|
|
this.title = "添加【请填写功能名称】"; |
|
|
|
this.reset() |
|
|
|
this.open = true |
|
|
|
this.title = '添加【请填写功能名称】' |
|
|
|
}, |
|
|
|
/** 修改按钮操作 */ |
|
|
|
handleUpdate(row) { |
|
|
|
this.reset(); |
|
|
|
this.reset() |
|
|
|
const id = row.id || this.ids |
|
|
|
getDevice(id).then(response => { |
|
|
|
this.form = response.data; |
|
|
|
this.open = true; |
|
|
|
this.title = "修改【请填写功能名称】"; |
|
|
|
}); |
|
|
|
this.form = response.data |
|
|
|
this.open = true |
|
|
|
this.title = '修改【请填写功能名称】' |
|
|
|
}) |
|
|
|
}, |
|
|
|
/** 提交按钮 */ |
|
|
|
submitForm() { |
|
|
|
this.$refs["form"].validate(valid => { |
|
|
|
this.$refs['form'].validate(valid => { |
|
|
|
if (valid) { |
|
|
|
if (this.form.id != null) { |
|
|
|
updateDevice(this.form).then(response => { |
|
|
|
this.$modal.msgSuccess("修改成功"); |
|
|
|
this.open = false; |
|
|
|
this.getList(); |
|
|
|
}); |
|
|
|
this.$modal.msgSuccess('修改成功') |
|
|
|
this.open = false |
|
|
|
this.getList() |
|
|
|
}) |
|
|
|
} else { |
|
|
|
addDevice(this.form).then(response => { |
|
|
|
this.$modal.msgSuccess("新增成功"); |
|
|
|
this.open = false; |
|
|
|
this.getList(); |
|
|
|
}); |
|
|
|
this.$modal.msgSuccess('新增成功') |
|
|
|
this.open = false |
|
|
|
this.getList() |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}) |
|
|
|
}, |
|
|
|
/** 删除按钮操作 */ |
|
|
|
handleDelete(row) { |
|
|
|
const ids = row.id || this.ids; |
|
|
|
const ids = row.id || this.ids |
|
|
|
this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？').then(function() { |
|
|
|
return delDevice(ids); |
|
|
|
return delDevice(ids) |
|
|
|
}).then(() => { |
|
|
|
this.getList(); |
|
|
|
this.$modal.msgSuccess("删除成功"); |
|
|
|
}).catch(() => {}); |
|
|
|
this.getList() |
|
|
|
this.$modal.msgSuccess('删除成功') |
|
|
|
}).catch(() => { |
|
|
|
}) |
|
|
|
}, |
|
|
|
/** 导出按钮操作 */ |
|
|
|
handleExport() { |
|
|
|
@ -348,5 +691,45 @@ export default { |
|
|
|
}, `device_${new Date().getTime()}.xlsx`) |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
$width: 150px; |
|
|
|
$height: 150px; |
|
|
|
|
|
|
|
::v-deep .el-upload { |
|
|
|
border: 1px dashed #d9d9d9; |
|
|
|
border-radius: 6px; |
|
|
|
cursor: pointer; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
width: $width; |
|
|
|
height: $height; |
|
|
|
} |
|
|
|
|
|
|
|
// 鼠标移入边框颜色 |
|
|
|
::v-deep .el-upload:hover { |
|
|
|
border-color: #409EFF; |
|
|
|
} |
|
|
|
|
|
|
|
.avatar-uploader-icon { |
|
|
|
font-size: 28px; |
|
|
|
color: #8c939d; |
|
|
|
width: $width; |
|
|
|
height: $height; |
|
|
|
line-height: $height; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.avatar { |
|
|
|
width: $width; |
|
|
|
height: $height; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.photo { |
|
|
|
margin-left: 30%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhaoxianglong
9 months ago