16 changed files with 444 additions and 151 deletions
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
Loading…
Reference in new issue