638 lines
16 KiB
Vue
638 lines
16 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="$t('dataEnquiry.zdmc')">
|
|
<el-input
|
|
v-model="queryForm.name"
|
|
size="small"
|
|
:placeholder="$t('dataEnquiry.qsrzdmc')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
width="100"
|
|
prop="serial"
|
|
:label="$t('dataEnquiry.xlh')"
|
|
>
|
|
<el-input
|
|
v-model="queryForm.serial"
|
|
size="small"
|
|
placeholder="请输入序列号"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
width="100"
|
|
prop="community"
|
|
:label="$t('dataEnquiry.sq')"
|
|
>
|
|
<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="$t('dataEnquiry.jd')"
|
|
>
|
|
<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="$t('dataEnquiry.txxy')"
|
|
>
|
|
<el-select
|
|
v-model="queryForm.commPro"
|
|
size="small"
|
|
placeholder="请选择通信协议"
|
|
>
|
|
<el-option value="全部" :label="$t('dataEnquiry.qb')"></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="$t('dataEnquiry.zt')">
|
|
<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()">
|
|
{{ $t('defalult.chongz') }}
|
|
</el-button>
|
|
<el-button type="primary" size="small" @click="search">
|
|
{{ $t('defalult.cx') }}
|
|
</el-button>
|
|
<el-button type="primary" size="small" @click="handleAdd">
|
|
{{ $t('device.tjzd') }}
|
|
</el-button>
|
|
<el-button type="primary" size="small" @click="deletes">
|
|
{{ $t('defalult.plsc') }}
|
|
</el-button>
|
|
<el-button type="primary" size="small" @click="exportData">
|
|
{{ $t('defalult.dc') }}
|
|
</el-button>
|
|
<el-button type="primary" size="small" @click="fboxSync">
|
|
{{ $t('device.hztb') }}
|
|
</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="$t('dataEnquiry.zdmc')"
|
|
width="160"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="code"
|
|
:label="$t('dataEnquiry.zdbm')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="serial"
|
|
:label="$t('dataEnquiry.xlh')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="status"
|
|
:label="$t('dataEnquiry.ljzt')"
|
|
width="120"
|
|
align="center"
|
|
>
|
|
<template #default="{ row }">
|
|
<el-tag
|
|
v-if="row.status == '已连接'"
|
|
key="已连接"
|
|
effect="dark"
|
|
type="success"
|
|
size="mini"
|
|
>
|
|
{{ $t('dataEnquiry.ylj') }}
|
|
</el-tag>
|
|
<el-tag
|
|
v-if="row.status == '未连接'"
|
|
key="未连接"
|
|
effect="dark"
|
|
type="danger"
|
|
size="mini"
|
|
>
|
|
{{ $t('dataEnquiry.wlj') }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="enableStatus"
|
|
:label="$t('dataEnquiry.zt')"
|
|
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="$t('dataEnquiry.txxy')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="screenView.dataValue"
|
|
:label="$t('device.ztdp')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="longitude"
|
|
:label="$t('project.jd')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="latitude"
|
|
:label="$t('project.wd')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="offlineDelay"
|
|
:label="$t('device.lxys')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="townName"
|
|
:label="$t('dataEnquiry.xzjdmc')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="community"
|
|
:label="$t('dataEnquiry.sq')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="specifications"
|
|
:label="$t('dataEnquiry.sbgg')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="offlineDelay"
|
|
:label="$t('dataEnquiry.lxyzm')"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="commPro.dataValue"
|
|
:label="$t('dataEnquiry.txxy')"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="project.name"
|
|
:label="$t('dataEnquiry.xm')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="specifications"
|
|
:label="$t('dataEnquiry.sbggd')"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="simNum"
|
|
:label="$t('dataEnquiry.skjjhm')"
|
|
width="150"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="technology.dataValue"
|
|
:label="$t('dataEnquiry.sbgy')"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="material.dataValue"
|
|
:label="$t('dataEnquiry.sbcz')"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="outStandard.dataValue"
|
|
:label="$t('dataEnquiry.csbz')"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="leader"
|
|
:label="$t('dataEnquiry.ywry')"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="contact"
|
|
:label="$t('project.lxfs')"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="type.dataValue"
|
|
:label="$t('dataEnquiry.sblx')"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="userNum"
|
|
:label="$t('dataEnquiry.fwyhs')"
|
|
width="100"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="onlineTime"
|
|
:label="$t('dataEnquiry.sxsj')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="offlineTime"
|
|
:label="$t('dataEnquiry.lxsj')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="offlineDuration"
|
|
:label="$t('dataEnquiry.lxsc')"
|
|
width="150"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
fixed="right"
|
|
:label="$t('defalult.cz')"
|
|
width="280"
|
|
align="center"
|
|
>
|
|
<template #default="{ row }">
|
|
<el-button type="text" @click="sensorData(row)">
|
|
{{ $t('device.sj') }}
|
|
</el-button>
|
|
<el-button type="text" @click="sensorEdit(row)">
|
|
{{ $t('device.cgq') }}
|
|
</el-button>
|
|
<el-button type="text" @click="copyDevice(row)">
|
|
{{ $t('device.fz') }}
|
|
</el-button>
|
|
<el-button type="text" @click="handleEdit(row)">
|
|
{{ $t('defalult.bj') }}
|
|
</el-button>
|
|
<el-button type="text" @click="handleDelete(row)">
|
|
{{ $t('defalult.sc') }}
|
|
</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';
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
CopyDevice,
|
|
deviceEdit,
|
|
syncDevice,
|
|
},
|
|
data() {
|
|
return {
|
|
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: 'all',
|
|
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>
|