You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
7.6 KiB
192 lines
7.6 KiB
<template>
|
|
<SearchBar @search="onSearch" />
|
|
|
|
<div class="my-3">
|
|
<el-button type="primary" @click="openPage(null, 'device-create')">添加设备</el-button>
|
|
</div>
|
|
|
|
<template v-if="devicesAll && devicesAll.data">
|
|
<el-table :data="devicesAll.data" :max-height="contentHeight" border stripe style="width: 100%">
|
|
<el-table-column type="expand">
|
|
<template #default="props">
|
|
<el-row :gutter="20" class="px-6 text-gray-400">
|
|
<el-col :span="9">链路地址：{{ props.row.linkAddress }}</el-col>
|
|
<el-col :span="9">探头编号：{{ props.row.probNo }}</el-col>
|
|
<el-col :span="9">设备朝向：{{ props.row.deviceDirection }}</el-col>
|
|
<el-col :span="9">试样：{{ props.row.simple }}</el-col>
|
|
<el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col>
|
|
<el-col :span="9">sim1：{{ props.row.sim1 }}</el-col>
|
|
<el-col :span="18">与主站后台联调情况：{{ props.row.joint }}</el-col>
|
|
<el-col :span="18">备注：{{ props.row.remark }}</el-col>
|
|
</el-row>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="ID" min-min-width="100" prop="deviceId" />
|
|
<el-table-column align="center" label="完整ID" min-width="150" prop="deviceFullId" />
|
|
<el-table-column align="left" header-align="center" label="地点" min-width="150" prop="address" />
|
|
<el-table-column align="left" header-align="center" label="地区" min-width="120" prop="area" />
|
|
<el-table-column align="center" label="联系人" min-width="100" prop="contact" />
|
|
<el-table-column align="center" label="联系电话" min-width="150" prop="phone" />
|
|
<el-table-column align="center" label="安装时间" min-width="200" prop="installTime" />
|
|
<el-table-column align="center" label="正式运行时间" min-width="200" prop="runTime" />
|
|
<el-table-column align="center" fixed="right" label="操作" min-width="270">
|
|
<template #default="props">
|
|
<el-tooltip class="item" content="网络参数配置" effect="dark" placement="top">
|
|
<i class="el-icon-setting text-base text-yellow-600 mx-1" @click="openPage(props.row, 'network-config')"></i>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" content="功能参数配置" effect="dark" placement="top">
|
|
<i class="el-icon-set-up text-base text-yellow-600 mx-1" @click="openPage(props.row, 'function-config')"></i>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" content="实时数据查看" effect="dark" placement="top">
|
|
<i class="el-icon-odometer text-base text-green-600 mx-1" @click="openPage(props.row, 'data-realtime')"></i>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" content="实时数据统计" effect="dark" placement="top">
|
|
<i class="el-icon-data-analysis text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-realtime')"></i>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" content="上报数据查看" effect="dark" placement="top">
|
|
<i class="el-icon-stopwatch text-base text-green-600 mx-1" @click="openPage(props.row, 'data-report')"></i>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" content="上报数据统计" effect="dark" placement="top">
|
|
<i class="el-icon-data-line text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-report')"></i>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" content="历史数据查看" effect="dark" placement="top">
|
|
<i class="el-icon-document-copy text-base text-green-600 mx-1" @click="openPage(props.row, 'data-history')"></i>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" content="历史数据下发状态指令" effect="dark" placement="top">
|
|
<i class="el-icon-moon-night text-base text-green-600 mx-1" @click="openPage(props.row, 'commands')"></i>
|
|
</el-tooltip>
|
|
<el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete(props.row.deviceId)">
|
|
<template #reference>
|
|
<i class="el-icon-delete text-base text-red-600 mx-1"></i>
|
|
<!-- <el-button type="text" plain size="mini" icon="el-icon-delete"></el-button> -->
|
|
</template>
|
|
</el-popconfirm>
|
|
|
|
<el-tooltip class="item" content="编辑设备信息" effect="dark" placement="top">
|
|
<i class="el-icon-edit text-base text-blue-600 mx-1" @click="handleEdit(props.row)"></i>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-pagination
|
|
:current-page="devicesAll.page.page"
|
|
:default-page-size="50"
|
|
:page-count="devicesAll.page.count"
|
|
:page-size="devicesAll.page.size"
|
|
:page-sizes="[1, 10, 20, 50, 100]"
|
|
:total="devicesAll.page.total"
|
|
background
|
|
class="my-3 float-right"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="onSizeChange"
|
|
@current-change="onCurrentPageChange"
|
|
></el-pagination>
|
|
</template>
|
|
|
|
<!-- 编辑设备信息 -->
|
|
<DeviceEdit :show="editing" @toggle-mdoal="editing = false" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import SearchBar from 'components/search-bar.vue';
|
|
import DeviceEdit from 'components/device-edit.vue';
|
|
import { deleteDevice } from 'apis';
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
let timer = null;
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const token = computed(() => store.getters['user/token']);
|
|
const devicesAll = computed(() => {
|
|
return store.state.device.devicesAll;
|
|
});
|
|
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
|
|
const contentHeight = ref(600);
|
|
const editing = ref(false);
|
|
|
|
// 获取设备完整信息列表
|
|
const getDevicesAllData = () => {
|
|
try {
|
|
if (token && token.value) {
|
|
store.dispatch('device/getDevicesAll');
|
|
timer && clearTimeout(timer);
|
|
timer = null;
|
|
} else {
|
|
timer = setTimeout(() => {
|
|
getDevicesAllData();
|
|
});
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
getDevicesAllData();
|
|
|
|
// 设置表格高度
|
|
onMounted(() => {
|
|
const winHeight = document.documentElement.clientHeight;
|
|
contentHeight.value = winHeight - 250;
|
|
});
|
|
|
|
/**
|
|
* 删除
|
|
* @param {number} page 页码
|
|
* @param {number} size 每页条数
|
|
*/
|
|
function onSearch(page, size = 50) {
|
|
const deviceId = currentDeviceId.value;
|
|
const params = { deviceId, page, size };
|
|
store.dispatch('device/getDevicesAll', params);
|
|
}
|
|
|
|
// 当前页码变化
|
|
const onCurrentPageChange = page => {
|
|
onSearch(page, devicesAll.value.page.size || 50);
|
|
};
|
|
|
|
// 每页条数变化
|
|
const onSizeChange = size => {
|
|
onSearch(1, size);
|
|
};
|
|
|
|
/**
|
|
* 删除某设备
|
|
* @param {string} deviceId 设备id
|
|
*/
|
|
const handleDelete = async deviceId => {
|
|
try {
|
|
await deleteDevice(deviceId);
|
|
store.commit('device/deleteDevice', deviceId);
|
|
ElMessage.success('删除成功');
|
|
store.dispatch('device/getDevices'); // 更新站点列表
|
|
} catch (error) {
|
|
ElMessage.error('删除失败, 请稍后重试');
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
// 编辑设备信息
|
|
const handleEdit = item => {
|
|
store.commit('device/setCurrentDeviceId', item.deviceId);
|
|
editing.value = true;
|
|
};
|
|
|
|
/**
|
|
* 打开页面
|
|
* @param {object} item 设备对象
|
|
* @param {string} pageName 页面name
|
|
*/
|
|
const openPage = (item, pageName) => {
|
|
item && store.commit('device/setCurrentDeviceId', item.deviceId);
|
|
router.push({
|
|
path: `/corrosion/${pageName}`,
|
|
query: route.query,
|
|
});
|
|
};
|
|
</script>
|
|
|