688 lines
17 KiB
Vue
688 lines
17 KiB
Vue
<template>
|
|
<div class="manage-container">
|
|
<div class="manage-input">
|
|
<el-form ref="queryForm" :model="queryForm" label-width="80px">
|
|
<vab-query-form>
|
|
<el-form-item width="100" prop="name" label="站点名称">
|
|
<el-input
|
|
v-model="queryForm.name"
|
|
size="small"
|
|
placeholder="请输入站点名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item width="100" prop="serial" label="序列号">
|
|
<el-input
|
|
v-model="queryForm.serial"
|
|
size="small"
|
|
placeholder="请输入序列号"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item width="100" prop="community" label="社区">
|
|
<el-input
|
|
v-model="queryForm.community"
|
|
size="small"
|
|
placeholder="请输入社区"
|
|
></el-input>
|
|
</el-form-item>
|
|
</vab-query-form>
|
|
</el-form>
|
|
</div>
|
|
<div class="manage-input">
|
|
<el-form ref="queryForm" :model="queryForm" label-width="80px">
|
|
<vab-query-form>
|
|
<el-form-item width="100" prop="townCode" label="街道">
|
|
<el-select
|
|
v-model="queryForm.townCode"
|
|
size="small"
|
|
placeholder="请选择街道"
|
|
>
|
|
<el-option
|
|
v-for="item in townData"
|
|
:key="item.townCode"
|
|
:label="item.townName"
|
|
:value="item.townCode"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item width="100" prop="commPro" label="通信协议">
|
|
<el-select
|
|
v-model="queryForm.commPro"
|
|
size="small"
|
|
placeholder="请选择通信协议"
|
|
>
|
|
<el-option value="全部" label="全部"></el-option>
|
|
<el-option
|
|
v-for="item in dictData"
|
|
:key="item.dataCode"
|
|
:label="item.dataValue"
|
|
:value="item.dataCode"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item width="100" prop="status" label="状态">
|
|
<el-select
|
|
v-model="queryForm.status"
|
|
size="small"
|
|
placeholder="请选择状态"
|
|
>
|
|
<el-option
|
|
v-for="item in statusData"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</vab-query-form>
|
|
</el-form>
|
|
</div>
|
|
<div class="manage-button">
|
|
<el-button size="small" @click="resetForm()">重置</el-button>
|
|
<el-button type="primary" size="small" @click="search">查询</el-button>
|
|
<el-button
|
|
v-if="isBtnPerm('/iot/device/insert')"
|
|
type="primary"
|
|
size="small"
|
|
@click="handleAdd"
|
|
>
|
|
添加站点
|
|
</el-button>
|
|
<el-button
|
|
v-if="isBtnPerm('/iot/device/remove')"
|
|
type="primary"
|
|
size="small"
|
|
@click="deletes"
|
|
>
|
|
批量删除
|
|
</el-button>
|
|
<el-button
|
|
v-if="isBtnPerm('/iot/device/exportDevice')"
|
|
type="primary"
|
|
size="small"
|
|
@click="exportData"
|
|
>
|
|
导出
|
|
</el-button>
|
|
<el-button
|
|
v-if="isBtnPerm('/fbox/sync')"
|
|
type="primary"
|
|
size="small"
|
|
@click="fboxSync"
|
|
>
|
|
盒子同步
|
|
</el-button>
|
|
</div>
|
|
<el-table
|
|
id="table"
|
|
v-loading="listLoading"
|
|
:data="deviceData"
|
|
border
|
|
stripe
|
|
style="width: 100%"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="55"></el-table-column>
|
|
<el-table-column
|
|
prop="id"
|
|
label="ID"
|
|
width="60"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="站点名称"
|
|
width="160"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="code"
|
|
label="站点编码"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="serial"
|
|
label="序列号"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="status"
|
|
label="连接状态"
|
|
width="120"
|
|
align="center"
|
|
>
|
|
<template #default="{ row }">
|
|
<el-tag
|
|
v-if="row.status == '已连接'"
|
|
key="已连接"
|
|
effect="dark"
|
|
type="success"
|
|
size="mini"
|
|
>
|
|
已连接
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="row.status == '未连接'"
|
|
key="未连接"
|
|
effect="dark"
|
|
type="danger"
|
|
size="mini"
|
|
>
|
|
未连接
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="enableStatus" label="状态" align="center">
|
|
<template #default="scope">
|
|
<el-switch
|
|
v-model="scope.row.enableStatus"
|
|
active-value="1"
|
|
inactive-value="0"
|
|
@click="updateStatus(scope.row.enableStatus, scope.row.id)"
|
|
></el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="commPro.dataValue"
|
|
label="通信协议"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="screenView.dataValue"
|
|
label="组态大屏"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="longitude"
|
|
label="经度"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="latitude"
|
|
label="纬度"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="offlineDelay"
|
|
label="离线延时"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="townName"
|
|
label="乡镇街道名称"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="community"
|
|
label="社区"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="specifications"
|
|
label="设备规格"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="offlineDelay"
|
|
label="离线延时/秒"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="commPro.dataValue"
|
|
label="通信协议"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="project.name"
|
|
label="项目"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="specifications"
|
|
label="设备规格/吨"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="simNum"
|
|
label="sim卡接入号码"
|
|
width="150"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="technology.dataValue"
|
|
label="设备工艺"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="material.dataValue"
|
|
label="设备材质"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="outStandard.dataValue"
|
|
label="出水标准"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="leader"
|
|
label="运维人员"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="contact"
|
|
label="联系方式"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="type.dataValue"
|
|
label="设备类型"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="userNum"
|
|
label="服务用户数"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="onlineTime"
|
|
label="上线时间"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="boardImg"
|
|
label="公示牌"
|
|
width="200"
|
|
align="center"
|
|
>
|
|
<template #default="{ row }">
|
|
<el-image
|
|
style="width: 100px; height: 100px"
|
|
:src="fileUrl + row.boardImg"
|
|
></el-image>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="warrantyPeriod"
|
|
label="设备保修到期时间"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="deviceVersion.dataValue"
|
|
label="设备版本"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="ownerName"
|
|
label="站点客户联系人"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="ownerPhone"
|
|
label="站点客户联系方式"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="offlineTime"
|
|
label="离线时间"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="offlineDuration"
|
|
label="离线时长/分钟"
|
|
width="150"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column fixed="right" label="操作" width="280" align="center">
|
|
<template #default="{ row }">
|
|
<el-button
|
|
v-if="isBtnPerm('/iot/device/shuju')"
|
|
type="text"
|
|
@click="sensorData(row)"
|
|
>
|
|
数据
|
|
</el-button>
|
|
<el-button
|
|
v-if="isBtnPerm('/iot/device/chuanganqi')"
|
|
type="text"
|
|
@click="sensorEdit(row)"
|
|
>
|
|
传感器
|
|
</el-button>
|
|
<el-button
|
|
v-if="isBtnPerm('/iot/device/copy')"
|
|
type="text"
|
|
@click="copyDevice(row)"
|
|
>
|
|
复制
|
|
</el-button>
|
|
<el-button
|
|
v-if="isBtnPerm('/iot/device/update')"
|
|
type="text"
|
|
@click="handleEdit(row)"
|
|
>
|
|
编辑
|
|
</el-button>
|
|
<el-button
|
|
v-if="isBtnPerm('/iot/device/remove')"
|
|
type="text"
|
|
@click="handleDelete(row)"
|
|
>
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
:background="background"
|
|
:current-page="queryForm.page"
|
|
:layout="layout"
|
|
:page-size="queryForm.size"
|
|
:total="total"
|
|
style="text-align: right"
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
></el-pagination>
|
|
<device-edit ref="edit"></device-edit>
|
|
<copy-device ref="copy"></copy-device>
|
|
<sync-device ref="sync"></sync-device>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
doDelete,
|
|
getDeviceData,
|
|
getTownsByProject,
|
|
getDictData,
|
|
exportIotDevice,
|
|
doEdit,
|
|
} from '@/api/device';
|
|
import ajax from '@/api/download';
|
|
import deviceEdit from './components/deviceEdit';
|
|
import CopyDevice from './components/copyDevice';
|
|
import syncDevice from './components/sync';
|
|
import { baseURL } from '@/config';
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
CopyDevice,
|
|
deviceEdit,
|
|
syncDevice,
|
|
},
|
|
data() {
|
|
return {
|
|
fileUrl: baseURL + '/static/img/',
|
|
deviceData: [],
|
|
lazy: true,
|
|
activeName: 'first',
|
|
layout: 'total, sizes, prev, pager, next, jumper',
|
|
total: 0,
|
|
input: '',
|
|
textarea: '',
|
|
list: [],
|
|
townData: [],
|
|
dictData: [],
|
|
background: true,
|
|
listLoading: true,
|
|
ids: [],
|
|
elementLoadingText: '正在加载...',
|
|
statusData: [
|
|
{
|
|
label: '全部',
|
|
value: 3,
|
|
},
|
|
{
|
|
label: '离线',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '在线',
|
|
value: 1,
|
|
},
|
|
],
|
|
queryForm: {
|
|
page: 1,
|
|
size: 20,
|
|
name: '',
|
|
projectId: '',
|
|
serial: '',
|
|
community: '',
|
|
townCode: '',
|
|
commPro: '全部协议',
|
|
status: 3,
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
height() {
|
|
return 500;
|
|
},
|
|
},
|
|
mounted() {
|
|
const projectId =
|
|
this.$route.query.projectId === undefined
|
|
? sessionStorage.getItem('projectId')
|
|
: this.$route.query.projectId;
|
|
this.queryForm.projectId = projectId;
|
|
this.fetchData();
|
|
this.getTownData();
|
|
this.getDictData();
|
|
},
|
|
methods: {
|
|
async fetchData() {
|
|
this.listLoading = true;
|
|
const { data } = await getDeviceData(this.queryForm);
|
|
this.deviceData = data.items;
|
|
this.total = data.total;
|
|
setTimeout(() => {
|
|
this.listLoading = false;
|
|
}, 500);
|
|
},
|
|
//乡镇街道
|
|
async getTownData() {
|
|
const { data } = await getTownsByProject(this.queryForm);
|
|
this.townData = data;
|
|
},
|
|
//字典数据
|
|
async getDictData() {
|
|
const { data } = await getDictData(this.queryForm);
|
|
this.dictData = data.communicationProtocol;
|
|
},
|
|
resetForm() {
|
|
this.$refs.queryForm.resetFields();
|
|
},
|
|
search() {
|
|
this.fetchData();
|
|
},
|
|
//导出
|
|
async exportData() {
|
|
const url = await exportIotDevice(this.queryForm);
|
|
ajax.downloadFile(url, { fileName: '站点列表.xls' });
|
|
},
|
|
sensorData(row) {
|
|
this.$router.push({
|
|
name: '传感器数据',
|
|
path: '/sensorIotData',
|
|
query: { deviceCode: row.code, deviceId: row.id },
|
|
});
|
|
},
|
|
sensorEdit(row) {
|
|
this.$router.push({
|
|
name: '传感器管理',
|
|
path: '/sensor',
|
|
query: { deviceId: row.id, projectId: this.queryForm.projectId },
|
|
});
|
|
},
|
|
async updateStatus(status, id) {
|
|
console.log(status);
|
|
const { code, msg } = await doEdit({
|
|
enableStatus: parseInt(status),
|
|
id: id,
|
|
});
|
|
if (code == 0) {
|
|
this.$notify({
|
|
title: msg,
|
|
type: 'success',
|
|
});
|
|
} else {
|
|
this.$notify.error({
|
|
title: msg,
|
|
});
|
|
}
|
|
this.fetchData();
|
|
},
|
|
handleAdd() {
|
|
this.$refs['edit'].showEdit({ projectId: this.queryForm.projectId }, 1);
|
|
},
|
|
handleEdit(row) {
|
|
this.$refs['edit'].showEdit(row, 2);
|
|
},
|
|
async fboxSync() {
|
|
this.$refs['sync'].showSync(this.queryForm);
|
|
},
|
|
copyDevice(row) {
|
|
this.$refs['copy'].showCopy(row);
|
|
},
|
|
handleQuery() {
|
|
this.queryForm.page = 1;
|
|
this.fetchData();
|
|
},
|
|
handleSizeChange(val) {
|
|
this.queryForm.size = val;
|
|
this.fetchData();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.queryForm.page = val;
|
|
this.fetchData();
|
|
},
|
|
deletes() {
|
|
const ids = this.ids;
|
|
if (ids.length == 0) {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '没有选中任何项',
|
|
});
|
|
return false;
|
|
}
|
|
this.deleteData(ids);
|
|
},
|
|
handleSelectionChange(val) {
|
|
const ids = [];
|
|
val.forEach(row => {
|
|
ids.push(row.id);
|
|
});
|
|
this.ids = ids;
|
|
console.log(this.ids);
|
|
},
|
|
deleteData(data) {
|
|
this.$confirm('你确定要删除当前项吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
})
|
|
.then(() => {
|
|
const { msg } = doDelete(data);
|
|
this.$message({
|
|
type: 'success',
|
|
message: msg == undefined ? '删除成功' : msg,
|
|
});
|
|
const that = this;
|
|
setTimeout(function () {
|
|
that.fetchData();
|
|
}, 1000);
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除',
|
|
});
|
|
});
|
|
},
|
|
handleDelete(row) {
|
|
if (row.id) {
|
|
this.deleteData([row.id]);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-input {
|
|
width: 200px !important;
|
|
}
|
|
.el-select {
|
|
width: 200px !important;
|
|
}
|
|
.manage-button {
|
|
padding-left: 12px;
|
|
margin-bottom: 30px;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.el-submenu__title:hover {
|
|
background-color: rgba(#1890ff, 0.085) !important;
|
|
color: hsla(208, 100%, 55%, 0.95) !important;
|
|
}
|
|
.el-dialog {
|
|
.el-dialog__header {
|
|
background-color: #1890ff !important;
|
|
padding: 15px 20px;
|
|
text-align: left !important;
|
|
.el-dialog__title {
|
|
color: #e8f4ff !important;
|
|
}
|
|
.el-dialog__headerbtn .el-dialog__close {
|
|
color: #e8f4ff !important;
|
|
}
|
|
}
|
|
.el-dialog__body {
|
|
padding: 20px !important;
|
|
.el-form-item {
|
|
margin-bottom: 10px !important;
|
|
.el-input {
|
|
width: 100% !important;
|
|
}
|
|
.el-select {
|
|
width: 100% !important;
|
|
}
|
|
.el-cascader {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
.el-form-item:last-child {
|
|
margin-bottom: 20px !important;
|
|
}
|
|
}
|
|
.dialog-footer {
|
|
text-align: right;
|
|
}
|
|
}
|
|
</style>
|