ccsens_tall
/
tall4-pc
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor: 远动参数、网络参数配置记录

master
wally 4 years ago
parent
ab379de161
commit
7c7bb25be4
16 changed files with 444 additions and 151 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      src/apis/index.js
  2. 92
      src/components/config/config-log-function.vue
  3. 93
      src/components/config/config-log-network.vue
  4. 92
      src/components/config/config-log.vue
  5. 14
      src/components/config/device-select-and-status.vue
  6. 77
      src/components/config/function-config-applied.vue
  7. 65
      src/components/config/network-config-applied.vue
  8. 2
      src/components/config/status-and-last-time.vue
  9. 12
      src/components/config/status-tag-pending.vue
  10. 24
      src/components/device/device-create.vue
  11. 20
      src/components/overview/device-table.vue
  12. 7
      src/config/config.js
  13. 23
      src/views/commands.vue
  14. 10
      src/views/config.vue
  15. 24
      src/views/device-edit.vue
  16. 11
      src/views/device-list.vue

29
src/apis/index.js
View File

@ -13,21 +13,7 @@ export const getToken = userId => http.get(`${users}/userId`, { params: { userId
export const getDevices = () => http.get(`${corrosion}/devices`); export const getDevices = () => http.get(`${corrosion}/devices`);
// 查设备概览 数据统计 // 查设备概览 数据统计
// export const getDevicesCount = () => http.get(`${corrosion}/devices/count`); export const getDevicesCount = () => http.get(`${corrosion}/devices/count`);
export const getDevicesCount = () => {
return new Promise(resolve => {
setTimeout(() => {
resolve({
total: 100,
online: 90,
offline: 10,
fault: 10,
warning: 15,
normal: 65,
});
}, 100);
});
};
// 添加设备 // 添加设备
export const createDevice = data => http.post(`${corrosion}/devices`, data); export const createDevice = data => http.post(`${corrosion}/devices`, data);
@ -35,11 +21,18 @@ export const createDevice = data => http.post(`${corrosion}/devices`, data);
// 获取设备列表 完整信息 // 获取设备列表 完整信息
export const getDevicesAll = ( export const getDevicesAll = (
params = { params = {
paging: true,
deviceId: '', deviceId: '',
page: 1, page: 1,
size: 50, size: 50,
sort: [
{
col: 'createdAt',
order: 'ASC',
},
],
}, },
) => http.get(`${corrosion}/devices/all`, { params }); ) => http.post(`${corrosion}/devices/all`, params);
// 更新设备 // 更新设备
export const updateDevice = (deviceId, data) => http.put(`${corrosion}/devices/all/${deviceId}`, data); export const updateDevice = (deviceId, data) => http.put(`${corrosion}/devices/all/${deviceId}`, data);
@ -50,13 +43,13 @@ export const deleteDevice = deviceId => http.delete(`${corrosion}/devices/all/${
// 获取月累计数据分析 // 获取月累计数据分析
export const getMonthsDate = params => http.get(`${corrosion}/statistics/months`, { params }); export const getMonthsDate = params => http.get(`${corrosion}/statistics/months`, { params });
// 获取网络配置参数 // 获取网络配置参数 列表
export const getConfigNetwork = params => http.get(`${corrosion}/config/network`, { params }); export const getConfigNetwork = params => http.get(`${corrosion}/config/network`, { params });
// 获取网络配置参数 设备实时参数 // 获取网络配置参数 设备实时参数
export const getConfigAppliedNetwork = params => http.get(`${corrosion}/config-applied/network`, { params }); export const getConfigAppliedNetwork = params => http.get(`${corrosion}/config-applied/network`, { params });
// 获取功能配置参数 // 获取功能配置参数 列表
export const getConfigFunction = params => http.get(`${corrosion}/config/function`, { params }); export const getConfigFunction = params => http.get(`${corrosion}/config/function`, { params });
// 获取功能配置参数 设备实时参数 // 获取功能配置参数 设备实时参数

92
src/components/config/config-log-function.vue
View File

@ -0,0 +1,92 @@
<template>
<template v-if="data">
<el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
<el-table-column type="expand">
<template #default="props">
<div class="mx-4">
<FunctionConfigApplied v-if="props.row" :data="props.row" />
</div>
</template>
</el-table-column>
<el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
<el-table-column align="center" label="上次配置时间" min-width="200">
<template #default="scope">
{{ dayjs(+scope.row.settingTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column align="center" label="状态" min-width="100">
<template #default="scope">
<StatusTagPending :type="scope.row.settingStatus" />
</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>
</template>
<script setup>
import { computed, onMounted, ref, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { getConfigFunction } from 'apis';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import StatusTagPending from 'components/config/status-tag-pending.vue';
import FunctionConfigApplied from 'components/config/function-config-applied.vue';
const store = useStore();
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
const contentHeight = ref(600);
const data = ref(null);
// 设置表格高度
onMounted(() => {
const winHeight = document.documentElement.clientHeight;
contentHeight.value = winHeight - 250;
});
watchEffect(() => {
const deviceId = currentDeviceId.value;
onSearch(deviceId);
});
/**
* 删除
* @param {number} page 页码
* @param {number} size 每页条数
*/
async function onSearch(deviceId = currentDeviceId.value) {
const params = { deviceId };
try {
const resData = await getConfigFunction(params);
data.value = resData;
} catch (error) {
ElMessage.error(error.message);
console.error(error);
}
}
currentDeviceId.value && onSearch(currentDeviceId.value);
// 当前页码变化
// const onCurrentPageChange = page => {
// onSearch(page, devicesAll.value.page.size || 50);
// };
// 每页条数变化
// const onSizeChange = size => {
// onSearch(1, size);
// };
</script>

93
src/components/config/config-log-network.vue
View File

@ -0,0 +1,93 @@
<template>
<template v-if="data">
<el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
<el-table-column type="expand">
<template #default="props">
<div class="mx-4">
<NetworkConfigApplied v-if="props.row" :data="props.row" />
</div>
</template>
</el-table-column>
<el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
<el-table-column align="center" label="上次配置时间" min-width="200">
<template #default="scope">
{{ dayjs(+scope.row.settingTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column align="center" label="状态" min-width="100">
<template #default="scope">
<StatusTagPending :type="scope.row.settingStatus" />
</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>
</template>
<script setup>
import { computed, onMounted, ref, watchEffect } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import StatusTagPending from 'components/config/status-tag-pending.vue';
import NetworkConfigApplied from 'components/config/network-config-applied.vue';
import { getConfigNetwork } from 'apis';
const store = useStore();
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
const contentHeight = ref(600);
const data = ref(null);
// 设置表格高度
onMounted(() => {
const winHeight = document.documentElement.clientHeight;
contentHeight.value = winHeight - 250;
});
watchEffect(() => {
const deviceId = currentDeviceId.value;
onSearch(deviceId);
});
/**
* 删除
* @param {number} page 页码
* @param {number} size 每页条数
*/
async function onSearch(deviceId = currentDeviceId.value) {
const params = { deviceId };
try {
const resData = await getConfigNetwork(params);
data.value = resData;
} catch (error) {
ElMessage.error(error.message);
console.error(error);
}
}
currentDeviceId.value && onSearch(currentDeviceId.value);
// 当前页码变化
// const onCurrentPageChange = page => {
// onSearch(page, devicesAll.value.page.size || 50);
// };
// 每页条数变化
// const onSizeChange = size => {
// onSearch(1, size);
// };
</script>

92
src/components/config/config-log.vue
View File

@ -1,92 +0,0 @@
<template>
<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="9">维修记录：{{ props.row.operationRecord }}</el-col>
<el-col :span="9">备注：{{ 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="70">
<template #default="scope">
<el-tag v-if="scope.row.status" :color="STATUS_COLOR[scope.row.status].color">{{ STATUS_COLOR[scope.row.status].text }} </el-tag>
</template>
</el-table-column>
<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>
<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>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { STATUS_COLOR } from '@/config/config';
const store = useStore();
const devicesAll = computed(() => {
return store.state.device.devicesAll;
});
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
const contentHeight = ref(600);
// 设置表格高度
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);
};
</script>

14
src/components/config/device-select-and-status.vue
View File

@ -1,17 +1,12 @@
<script setup> <script setup>
import { computed, defineProps, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { PEND_TYPE } from '@/config/config';
const props = defineProps({ status: String });
const store = useStore(); const store = useStore();
const devices = computed(() => store.state.device.devices); // 设备/站点列表 const devices = computed(() => store.state.device.devices); // 设备/站点列表
const deviceId = ref(''); // 选中的设备id const deviceId = ref(''); // 选中的设备id
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
const statusType = computed(() => PEND_TYPE[props.status].type);
// 监听currentDeviceId // 监听currentDeviceId
watch( watch(
() => currentDeviceId.value, () => currentDeviceId.value,
@ -43,12 +38,5 @@ function onChange(event) {
:value="item.deviceId" :value="item.deviceId"
></el-option> ></el-option>
</el-select> </el-select>
<!-- <span class="text-sm text-gray-500 ml-10">获取状态：</span>
<el-tag type="success">{{ get }}</el-tag>-->
<template v-if="props.status">
<span class="text-sm text-gray-500 ml-10">设置状态：</span>
<el-tag :type="statusType">{{ props.status }}</el-tag>
</template>
</div> </div>
</template> </template>

77
src/components/config/function-config-applied.vue
View File

@ -0,0 +1,77 @@
<template>
<el-row :gutter="10">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>金属腐蚀采样频率(分钟)：</span>
<span>{{ data.frequency.metal }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>温湿度采样频率(分钟)：</span>
<span>{{ data.frequency.th }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>SO2采样频率(分钟)：</span>
<span>{{ data.frequency.so2 }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>盐分采样频率(分钟)：</span>
<span>{{ data.frequency.salt }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>电池电压低阈值(V)：</span>
<span>{{ data.batteryLow }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>电池电压高阈值(V)：</span>
<span>{{ data.batteryHigh }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>太阳能板电压高阈值(V)：</span>
<span>{{ data.sunHigh }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>湿度高阈值(RH%)：</span>
<span>{{ data.humidityHigh }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>温度低阈值(℃)：</span>
<span>{{ data.temperatureLow }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>温度高阈值(℃)：</span>
<span>{{ data.temperatureHigh }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>金属腐蚀采集个数：</span>
<span>{{ data.count }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>安全模式：</span>
<span>{{ SER[data.securityMode] }}</span>
</el-col>
</el-row>
<el-row>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>上报类型：</span>
<span class="mr-8">{{ REPORT_TYPE[data.report.type] }}</span>
<span v-if="data.report.type === 'POINT'">
<span v-for="item in data.report.timePoints" :key="item" class="mr-3">{{ item }}</span>
</span>
<span v-else>{{ data.report.cycle }}分钟</span>
</el-col>
</el-row>
<!-- 刷新下发按钮 -->
<!-- <Refresh @refresh="onSearch(currentDeviceI, 1)" /> -->
</template>
<script setup>
import { defineProps } from 'vue';
import { SER } from '@/config/log';
import { REPORT_TYPE } from '@/config/config';
defineProps({ data: Object });
</script>

65
src/components/config/network-config-applied.vue
View File

@ -0,0 +1,65 @@
<template>
<el-row :gutter="10">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>上报IP地址1：</span>
<span>{{ data.ip1 }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>上报端口号1：</span>
<span>{{ data.port1 }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>上报IP地址2：</span>
<span>{{ data.ip2 }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>上报端口号2：</span>
<span>{{ data.port2 }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>上报IP地址3：</span>
<span>{{ data.ip3 }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>上报端口号3：</span>
<span>{{ data.port3 }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>上报IP地址4：</span>
<span>{{ data.ip4 }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>上报端口号4：</span>
<span>{{ data.port4 }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>备用ip地址：</span>
<span>{{ data.ipBackup }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>备用端口号：</span>
<span>{{ data.portBackup }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>用户名：</span>
<span>{{ data.account }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>密码：</span>
<span>{{ data.password }}</span>
</el-col>
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>APN：</span>
<span>{{ data.apn }}</span>
</el-col>
</el-row>
<!-- 刷新下发按钮 -->
<!-- <Refresh @refresh="onSearch(currentDeviceI, 1)" /> -->
</template>
<script setup>
import { defineProps } from 'vue';
defineProps({ data: Object });
</script>

2
src/components/config/status-and-last-time.vue
View File

@ -3,7 +3,7 @@
<span class="mr-10"> <span class="mr-10">
配置状态：<el-tag :type="PEND_TYPE[settingStatus].type">{{ PEND_TYPE[settingStatus].text }}</el-tag> 配置状态：<el-tag :type="PEND_TYPE[settingStatus].type">{{ PEND_TYPE[settingStatus].text }}</el-tag>
</span> </span>
<span>最后配置时间：{{ dayjs(data.settingTime).format('YYYY-MM-DD HH:mm:ss') }}</span> <span>最后配置时间：{{ dayjs(settingTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</el-row> </el-row>
</template> </template>

12
src/components/config/status-tag-pending.vue
View File

@ -0,0 +1,12 @@
<template>
<el-tag :type="PEND_TYPE[type].type">
{{ PEND_TYPE[type].text }}
</el-tag>
</template>
<script setup>
import { defineProps } from 'vue';
import { PEND_TYPE } from '@/config/config';
defineProps({ type: String });
</script>

24
src/components/device/device-create.vue
View File

@ -13,6 +13,14 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="产品类型" prop="type">
<!-- <el-input v-model="data.securityMode"></el-input> -->
<el-radio v-model="data.type" label="IACD">大气腐蚀</el-radio>
<el-radio v-model="data.type" label="OTHER">其他</el-radio>
</el-form-item>
</el-col>
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="设备完整ID" prop="deviceFullId"> <el-form-item label="设备完整ID" prop="deviceFullId">
<el-input v-model="data.deviceFullId"></el-input> <el-input v-model="data.deviceFullId"></el-input>
@ -101,19 +109,13 @@
<el-input v-model="data.protocolVersion"></el-input> <el-input v-model="data.protocolVersion"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row :gutter="20">
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="与主站后台联调情况" prop="joint"> <el-form-item label="与主站后台联调情况" prop="joint">
<el-input v-model="data.joint" type="textarea"></el-input> <el-input v-model="data.joint" type="textarea"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="维修记录" prop="operationRecord">
<el-input v-model="data.operationRecord" type="textarea"></el-input>
</el-form-item>
</el-col>
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="data.remark" type="textarea"></el-input> <el-input v-model="data.remark" type="textarea"></el-input>
@ -121,6 +123,14 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row>
<el-col :span="24">
<el-form-item label="维修记录" prop="operationRecord">
<el-input v-model="data.operationRecord" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" class="mt-5 pl-2"> <el-row :gutter="20" class="mt-5 pl-2">
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button> <el-button type="primary" @click="onSubmit">提交</el-button>

20
src/components/overview/device-table.vue
View File

@ -3,16 +3,26 @@
<el-table :data="devicesAll.data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%"> <el-table :data="devicesAll.data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%">
<el-table-column align="center" label="站点名称" min-width="150" prop="address" /> <el-table-column align="center" label="站点名称" min-width="150" prop="address" />
<el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" /> <el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
<el-table-column align="center" label="注册时间" min-width="200" prop="signupTime" /> <el-table-column align="center" label="注册时间" min-width="200">
<el-table-column align="center" label="最近上传时间" min-width="200" prop="lastUploadTime" /> <template #default="scope">
{{ dayjs(+scope.row.signupTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column align="center" label="最近上传时间" min-width="200">
<template #default="scope">
{{ dayjs(+scope.row.lastUploadTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column align="center" header-align="center" label="设备状态" min-width="150"> <el-table-column align="center" header-align="center" label="设备状态" min-width="150">
<template #default="scope"> <template #default="scope">
<el-tag v-if="scope.row.status" :color="STATUS_COLOR[scope.row.status].color">{{ STATUS_COLOR[scope.row.status].text }} </el-tag> <el-tag v-if="scope.row.status" :color="STATUS_COLOR[scope.row.status].color" style="color: #fff">
{{ STATUS_COLOR[scope.row.status].text }}
</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" header-align="center" label="产品类型" min-width="150"> <el-table-column align="center" header-align="center" label="产品类型" min-width="150">
<template #default="scope"> <template #default="scope">
{{ scope.row.type }} <span v-if="scope.row.type && ASDU_TYPE[scope.row.type]">{{ ASDU_TYPE[scope.row.type].text }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" header-align="center" label="协议版本" min-width="150" prop="protocolVersion" /> <el-table-column align="center" header-align="center" label="协议版本" min-width="150" prop="protocolVersion" />
@ -40,8 +50,10 @@
<script setup> <script setup>
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import dayjs from 'dayjs';
import DeviceEdit from 'components/device/device-edit.vue'; import DeviceEdit from 'components/device/device-edit.vue';
import { STATUS_COLOR } from '@/config/config'; import { STATUS_COLOR } from '@/config/config';
import { ASDU_TYPE } from '@/config/log';
let timer = null; let timer = null;
const store = useStore(); const store = useStore();

7
src/config/config.js
View File

@ -82,6 +82,7 @@ export const deviceData = {
joint: '', // 主站后台联调情况 joint: '', // 主站后台联调情况
operationRecord: '', // 维修记录 operationRecord: '', // 维修记录
remark: '', // 备注 remark: '', // 备注
type: 'IACD', // 产品类型
}; };
// 设备添加编辑 规则 // 设备添加编辑 规则
@ -123,6 +124,12 @@ export const PEND_TYPE = {
}, },
}; };
// 上报类型
export const REPORT_TYPE = {
CYCLE: '周期上报',
POINT: '定时上报',
};
// 实时查询数据的轮询时间 1分钟 // 实时查询数据的轮询时间 1分钟
export const REALTIME_DATA_INTERVAL = 60000 * 5; export const REALTIME_DATA_INTERVAL = 60000 * 5;

23
src/views/commands.vue
View File

@ -37,20 +37,29 @@
{{ log.ASDU_TYPE[scope.row.type] }} {{ log.ASDU_TYPE[scope.row.type] }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="信息体顺序" min-width="90"> <el-table-column align="center" label="信息体顺序" min-width="100">
<template #default="scope"> <template #default="scope">
{{ log.INFO_ORDER[scope.row.infoOrder] }} {{ log.INFO_ORDER[scope.row.infoOrder] }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="信息体个数" min-width="90" prop="infoNum" /> <el-table-column align="center" label="信息体个数" min-width="100" prop="infoNum" />
<el-table-column align="center" label="传输原因" min-width="180"> <el-table-column align="center" label="传输原因" min-width="180">
<template #default="scope"> <template #default="scope">
{{ log.REASON[scope.row.reason] }} {{ log.REASON[scope.row.reason] }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="协议内容" min-width="300" prop="contents" /> <el-table-column align="center" label="协议内容" min-width="80">
<template #default="scope">
<el-button type="text" @click="openContent(scope.row.contents)">查看</el-button>
</template>
</el-table-column>
</el-table> </el-table>
<!-- 弹出框-->
<el-dialog v-model="showContent" title="协议内容">
<p>{{ contents }}</p>
</el-dialog>
</template> </template>
</template> </template>
@ -61,6 +70,8 @@ import { ElMessage } from 'element-plus';
import * as log from '@/config/log'; import * as log from '@/config/log';
const data = ref([]); const data = ref([]);
const showContent = ref(false); // 是否显示协议内容弹出框
const contents = ref(''); // 弹出的协议内容
let contentHeight = 600; let contentHeight = 600;
// 设置表格高度 // 设置表格高度
@ -83,4 +94,10 @@ async function onSearch(options) {
throw new Error(error); throw new Error(error);
} }
} }
function openContent(content) {
showContent.value = true;
contents.value = content;
console.log('open content', content);
}
</script> </script>

10
src/views/config.vue
View File

@ -9,8 +9,11 @@
<el-tab-pane :lazy="true" label="网络参数" name="network"> <el-tab-pane :lazy="true" label="网络参数" name="network">
<NetworkConfigPending v-if="activeName === 'network'" :active-name="activeName" /> <NetworkConfigPending v-if="activeName === 'network'" :active-name="activeName" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane :lazy="true" label="配置记录" name="log"> <el-tab-pane :lazy="true" label="远动参数配置记录" name="function-log">
<ConfigLog v-if="activeName === 'log'" :active-name="activeName" /> <ConfigLogFunction v-if="activeName === 'function-log'" :active-name="activeName" />
</el-tab-pane>
<el-tab-pane :lazy="true" label="网络参数配置记录" name="network-log">
<ConfigLogNetwork v-if="activeName === 'network-log'" :active-name="activeName" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
@ -20,7 +23,8 @@ import { ref } from 'vue';
import DeviceSelectAndStatus from 'components/config/device-select-and-status.vue'; import DeviceSelectAndStatus from 'components/config/device-select-and-status.vue';
import FunctionConfigPending from 'components/config/function-config-pending.vue'; import FunctionConfigPending from 'components/config/function-config-pending.vue';
import NetworkConfigPending from 'components/config/network-config-pending.vue'; import NetworkConfigPending from 'components/config/network-config-pending.vue';
import ConfigLog from 'components/config/config-log.vue'; import ConfigLogFunction from 'components/config/config-log-function.vue';
import ConfigLogNetwork from 'components/config/config-log-network.vue';
const status = ref(''); const status = ref('');

24
src/views/device-edit.vue
View File

@ -13,6 +13,14 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="产品类型" prop="type">
<!-- <el-input v-model="data.securityMode"></el-input> -->
<el-radio v-model="data.type" label="IACD">大气腐蚀</el-radio>
<el-radio v-model="data.type" label="OTHER">其他</el-radio>
</el-form-item>
</el-col>
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="设备完整ID" prop="deviceFullId"> <el-form-item label="设备完整ID" prop="deviceFullId">
<el-input v-model="data.deviceFullId"></el-input> <el-input v-model="data.deviceFullId"></el-input>
@ -101,19 +109,13 @@
<el-input v-model="data.protocolVersion"></el-input> <el-input v-model="data.protocolVersion"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row :gutter="20">
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="与主站后台联调情况" prop="joint"> <el-form-item label="与主站后台联调情况" prop="joint">
<el-input v-model="data.joint" type="textarea"></el-input> <el-input v-model="data.joint" type="textarea"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="维修记录" prop="operationRecord">
<el-input v-model="data.operationRecord" type="textarea"></el-input>
</el-form-item>
</el-col>
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="data.remark" type="textarea"></el-input> <el-input v-model="data.remark" type="textarea"></el-input>
@ -121,6 +123,14 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row>
<el-col :span="24">
<el-form-item label="维修记录" prop="operationRecord">
<el-input v-model="data.operationRecord" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" class="mt-5 pl-2"> <el-row :gutter="20" class="mt-5 pl-2">
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button> <el-button type="primary" @click="onSubmit">提交</el-button>

11
src/views/device-list.vue
View File

@ -19,9 +19,11 @@
<el-col :span="9">试样：{{ props.row.simple }}</el-col> <el-col :span="9">试样：{{ props.row.simple }}</el-col>
<el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col> <el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col>
<el-col :span="9">sim1：{{ props.row.sim1 }}</el-col> <el-col :span="9">sim1：{{ props.row.sim1 }}</el-col>
<el-col :span="18">与主站后台联调情况：{{ props.row.joint }}</el-col> <el-col :span="9">协议版本：{{ props.row.protocolVersion }}</el-col>
<el-col :span="9">维修记录：{{ props.row.operationRecord }}</el-col> <el-col :span="9">产品类型：{{ ASDU_TYPE[props.row.type].text }}</el-col>
<el-col :span="9">与主站后台联调情况：{{ props.row.joint }}</el-col>
<el-col :span="9">备注：{{ props.row.remark }}</el-col> <el-col :span="9">备注：{{ props.row.remark }}</el-col>
<el-col :span="9">维修记录：{{ props.row.operationRecord }}</el-col>
</el-row> </el-row>
</template> </template>
</el-table-column> </el-table-column>
@ -31,7 +33,9 @@
<el-table-column align="left" header-align="center" label="地区" min-width="120" prop="area" /> <el-table-column align="left" header-align="center" label="地区" min-width="120" prop="area" />
<el-table-column align="center" label="状态" min-width="70"> <el-table-column align="center" label="状态" min-width="70">
<template #default="scope"> <template #default="scope">
<el-tag v-if="scope.row.status" :color="STATUS_COLOR[scope.row.status].color">{{ STATUS_COLOR[scope.row.status].text }} </el-tag> <el-tag v-if="scope.row.status" :color="STATUS_COLOR[scope.row.status].color" style="color: #fff">
{{ STATUS_COLOR[scope.row.status].text }}
</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="联系人" min-width="100" prop="contact" /> <el-table-column align="center" label="联系人" min-width="100" prop="contact" />
@ -101,6 +105,7 @@ import DeviceEdit from 'components/device/device-edit.vue';
import DeviceCreate from 'components/device/device-create.vue'; import DeviceCreate from 'components/device/device-create.vue';
import useDeviceCreate from '@/hooks/useDeviceCreate'; import useDeviceCreate from '@/hooks/useDeviceCreate';
import { STATUS_COLOR } from '@/config/config'; import { STATUS_COLOR } from '@/config/config';
import { ASDU_TYPE } from '@/config/log';
let timer = null; let timer = null;
const store = useStore(); const store = useStore();

Write Preview
Loading…
Cancel
Save