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

feat: 根据甲方意见调整细节

master
wally 4 years ago
parent
7c74ba1171
commit
d99e4876c7
13 changed files with 147 additions and 120 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. 30
      src/components/chart/data-report.vue
  2. 34
      src/components/config/function-config-pending.vue
  3. 38
      src/components/config/network-config-pending.vue
  4. 18
      src/components/device/device-create.vue
  5. 4
      src/config/config.js
  6. 24
      src/hooks/useDeviceCreate.js
  7. 41
      src/routers/index.js
  8. 11
      src/store/device.js
  9. 18
      src/views/config.vue
  10. 17
      src/views/device-list.vue
  11. 10
      src/views/function-config.vue
  12. 10
      src/views/network-config.vue
  13. 12
      src/views/statistical-report.vue

30
src/components/data-report.vue → src/components/chart/data-report.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<el-card class="box-card"> <el-card class="box-card">
<el-empty description="暂无数据" v-if="noData"></el-empty> <el-empty v-if="noData" description="暂无数据"></el-empty>
<div id="realtimeContainer"></div> <div id="realtimeContainer"></div>
</el-card> </el-card>
</template> </template>
<script setup> <script setup>
import { onMounted, ref, defineExpose } from 'vue'; import { defineExpose, onMounted, ref } from 'vue';
import { Line } from '@antv/g2plot'; import { Line } from '@antv/g2plot';
import { formatChartTime } from 'utils/time'; import { formatChartTime } from 'utils/time';
@ -61,16 +61,14 @@ const changeDate = value => {
value.forEach(element => { value.forEach(element => {
const item = { ...element }; const item = { ...element };
const so2Item = { category: 'SO2' }; const so2Item = { category: 'SO2(ppb)' };
const saltItem = { category: '盐分' }; const saltItem = { category: '盐分阻抗(Ω)' };
const environmentTemperatureItem = { category: '环温' }; const environmentTemperatureItem = { category: '环温(℃)' };
const environmentHumidityItem = { category: '环湿' }; const environmentHumidityItem = { category: '环湿(RH%)' };
const deviceTemperatureItem = { category: '机温' }; const corrosion1Item = { category: '锌腐蚀电流(nA)' };
const deviceHumidityItem = { category: '机湿' }; const corrosion2Item = { category: '铜腐蚀电流(nA)' };
const corrosion1Item = { category: '腐流1' }; const corrosion3Item = { category: '铝腐蚀电流(nA)' };
const corrosion2Item = { category: '腐流2' }; const corrosion4Item = { category: '钢腐蚀电流(nA)' };
const corrosion3Item = { category: '腐流3' };
const corrosion4Item = { category: '腐流4' };
so2Item.time = formatChartTime(item.time); so2Item.time = formatChartTime(item.time);
so2Item.value = item.so2; so2Item.value = item.so2;
@ -88,14 +86,6 @@ const changeDate = value => {
environmentHumidityItem.value = item.environmentHumidity; environmentHumidityItem.value = item.environmentHumidity;
arr.push(environmentHumidityItem); arr.push(environmentHumidityItem);
deviceTemperatureItem.time = formatChartTime(item.time);
deviceTemperatureItem.value = item.deviceTemperature;
arr.push(deviceTemperatureItem);
deviceHumidityItem.time = formatChartTime(item.time);
deviceHumidityItem.value = item.deviceHumidity;
arr.push(deviceHumidityItem);
corrosion1Item.time = formatChartTime(item.time); corrosion1Item.time = formatChartTime(item.time);
corrosion1Item.value = item.corrosion1; corrosion1Item.value = item.corrosion1;
arr.push(corrosion1Item); arr.push(corrosion1Item);

34
src/components/function-config-pending.vue → src/components/config/function-config-pending.vue
View File

@ -2,68 +2,68 @@
<el-form ref="functionForm" :model="data" label-position="top"> <el-form ref="functionForm" :model="data" label-position="top">
<el-row :gutter="20"> <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="frequency.metal"> <el-form-item label="金属腐蚀采样频率(分钟)" prop="frequency.metal">
<el-input-number v-model="data.frequency.metal" :min="0" /> <el-input-number v-model="data.frequency.metal" :min="0" />
</el-form-item> </el-form-item>
</el-col> </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="frequency.th"> <el-form-item label="温湿度采样频率(分钟)" prop="frequency.th">
<el-input-number v-model="data.frequency.th" :min="0" /> <el-input-number v-model="data.frequency.th" :min="0" />
</el-form-item> </el-form-item>
</el-col> </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="设置SO2采样频率(分钟)" prop="frequency.so2"> <el-form-item label="SO2采样频率(分钟)" prop="frequency.so2">
<el-input-number v-model="data.frequency.so2" :min="0" /> <el-input-number v-model="data.frequency.so2" :min="0" />
</el-form-item> </el-form-item>
</el-col> </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="frequency.salt"> <el-form-item label="盐雾采样频率(分钟)" prop="frequency.salt">
<el-input-number v-model="data.frequency.salt" :min="0" /> <el-input-number v-model="data.frequency.salt" :min="0" />
</el-form-item> </el-form-item>
</el-col> </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="time"> <el-form-item label="时间" prop="time">
<!-- <el-input v-model="data.time"></el-input> --> <!-- <el-input v-model="data.time"></el-input> -->
<el-date-picker v-model="data.time" placeholder="设置时间" type="datetime"></el-date-picker> <el-date-picker v-model="data.time" placeholder="设置时间" type="datetime"></el-date-picker>
</el-form-item> </el-form-item>
</el-col> </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="count"> <el-form-item label="金属腐蚀采集个数" prop="count">
<el-input-number v-model="data.count" :min="0" /> <el-input-number v-model="data.count" :min="0" />
</el-form-item> </el-form-item>
</el-col> </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="设置电池电压低阈值(V)" prop="batteryLow"> <el-form-item label="电池电压低阈值(V)" prop="batteryLow">
<el-input-number v-model="data.batteryLow" :min="0" /> <el-input-number v-model="data.batteryLow" :min="0" />
</el-form-item> </el-form-item>
</el-col> </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="设置电池电压高阈值(V)" prop="batteryHigh"> <el-form-item label="电池电压高阈值(V)" prop="batteryHigh">
<el-input-number v-model="data.batteryHigh" :min="0" /> <el-input-number v-model="data.batteryHigh" :min="0" />
</el-form-item> </el-form-item>
</el-col> </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="设置太阳能电压高阈值(V)" prop="sunHigh"> <el-form-item label="太阳能板电压高阈值(V)" prop="sunHigh">
<el-input-number v-model="data.sunHigh" :min="0" /> <el-input-number v-model="data.sunHigh" :min="0" />
</el-form-item> </el-form-item>
</el-col> </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="设置湿度高阈值(V)" prop="humidityHigh"> <el-form-item label="湿度高阈值(RH%)" prop="humidityHigh">
<el-input-number v-model="data.humidityHigh" :min="0" /> <el-input-number v-model="data.humidityHigh" :min="0" />
</el-form-item> </el-form-item>
</el-col> </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="temperatureLow"> <el-form-item label="温度低阈值(℃)" prop="temperatureLow">
<el-input-number v-model="data.temperatureLow" :min="-30" /> <el-input-number v-model="data.temperatureLow" :min="-30" />
</el-form-item> </el-form-item>
</el-col> </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="temperatureHigh"> <el-form-item label="温度高阈值(℃)" prop="temperatureHigh">
<el-input-number v-model="data.temperatureHigh" :min="0" /> <el-input-number v-model="data.temperatureHigh" :min="0" />
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -102,7 +102,7 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="设置安全模式" prop="securityMode"> <el-form-item label="安全模式" prop="securityMode">
<!-- <el-input v-model="data.securityMode"></el-input> --> <!-- <el-input v-model="data.securityMode"></el-input> -->
<el-radio v-model="data.securityMode" label="OPEN">不加密</el-radio> <el-radio v-model="data.securityMode" label="OPEN">不加密</el-radio>
<el-radio v-model="data.securityMode" label="ENCRYPTION">加密</el-radio> <el-radio v-model="data.securityMode" label="ENCRYPTION">加密</el-radio>
@ -112,10 +112,10 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="设置上报时间" prop="report.type" style="margin-bottom: 0 !important"> <el-form-item label="上报时间" prop="report.type" style="margin-bottom: 0 !important">
<el-radio-group v-model="data.report.type"> <el-radio-group v-model="data.report.type">
<el-radio label="POINT">按设定时间点上报</el-radio> <el-radio label="POINT">定时上报</el-radio>
<el-radio label="CYCLE">按设定周期上报(分钟)</el-radio> <el-radio label="CYCLE">周期上报(分钟)</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -132,7 +132,7 @@
<el-row v-else :gutter="20"> <el-row v-else :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item prop="report.cycle"> <el-form-item prop="report.cycle">
<el-input-number v-model="data.report.cycle" :min="0" /> <el-input-number v-model="data.report.cycle" :max="1440" :min="10" step="10" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>

38
src/components/network-config-pending.vue → src/components/config/network-config-pending.vue
View File

@ -1,62 +1,62 @@
<template> <template>
<el-form label-position="top" :model="data" ref="networkForm"> <el-form ref="networkForm" :model="data" label-position="top">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="上报IP1地址" prop="ip1"> <el-form-item label="上报IP1地址" prop="ip1">
<el-input v-model="data.ip1"></el-input> <el-input v-model="data.ip1"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="上报端口号1" prop="port1"> <el-form-item label="上报端口号1" prop="port1">
<el-input v-model="data.port1"></el-input> <el-input v-model="data.port1"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="上报IP2地址" prop="ip2"> <el-form-item label="上报IP2地址" prop="ip2">
<el-input v-model="data.ip2"></el-input> <el-input v-model="data.ip2"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="上报端口号2" prop="port2"> <el-form-item label="上报端口号2" prop="port2">
<el-input v-model="data.port2"></el-input> <el-input v-model="data.port2"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="上报IP3地址" prop="ip3"> <el-form-item label="上报IP3地址" prop="ip3">
<el-input v-model="data.ip3"></el-input> <el-input v-model="data.ip3"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="上报端口号3" prop="port3"> <el-form-item label="上报端口号3" prop="port3">
<el-input v-model="data.port3"></el-input> <el-input v-model="data.port3"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="备用ip地址" prop="ipBackup"> <el-form-item label="备用ip地址" prop="ipBackup">
<el-input v-model="data.ipBackup"></el-input> <el-input v-model="data.ipBackup"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="备用端口号" prop="portBackup"> <el-form-item label="备用端口号" prop="portBackup">
<el-input v-model="data.portBackup"></el-input> <el-input v-model="data.portBackup"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="用户名" prop="account"> <el-form-item label="用户名" prop="account">
<el-input v-model="data.account"></el-input> <el-input v-model="data.account"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="密码" prop="password"> <el-form-item label="密码" prop="password">
<el-input v-model="data.password"></el-input> <el-input v-model="data.password"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="APN" prop="apn"> <el-form-item label="APN" prop="apn">
<el-input v-model="data.apn"></el-input> <el-input v-model="data.apn"></el-input>
</el-form-item> </el-form-item>
@ -76,10 +76,10 @@
</template> </template>
<script setup> <script setup>
import { computed, ref, watch, defineEmits, defineProps } from 'vue'; import { computed, defineEmits, defineProps, ref, watch } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import { getConfigNetwork, createConfigNetwork } from 'apis/index'; import { createConfigNetwork, getConfigNetwork } from 'apis';
import Refresh from 'components/refresh.vue'; import Refresh from 'components/refresh.vue';
import { networkConfig } from '@/config/config'; import { networkConfig } from '@/config/config';
@ -97,7 +97,10 @@ const props = defineProps({ activeName: String });
*/ */
async function onSearch(deviceId, type = 0) { async function onSearch(deviceId, type = 0) {
try { try {
const params = { deviceId, type }; const params = {
deviceId,
type,
};
const resData = await getConfigNetwork(params); const resData = await getConfigNetwork(params);
data.value = resData || networkConfig; data.value = resData || networkConfig;
if (resData && resData.status) { if (resData && resData.status) {
@ -121,7 +124,10 @@ watch(
// 提交表单 // 提交表单
const onSubmit = () => { const onSubmit = () => {
networkForm.value.validate(async () => { networkForm.value.validate(async () => {
const param = { ...data.value, deviceId: currentDeviceId.value }; const param = {
...data.value,
deviceId: currentDeviceId.value,
};
try { try {
await createConfigNetwork(param); await createConfigNetwork(param);
ElMessage.success('提交成功'); ElMessage.success('提交成功');

18
src/views/device-create.vue → src/components/device/device-create.vue
View File

@ -124,11 +124,10 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref } from 'vue'; import { reactive, ref, defineEmits } from 'vue';
import { ElMessageBox } from 'element-plus'; import { ElMessageBox, ElMessage } from 'element-plus';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router'; import { createDevice } from 'apis';
import { createDevice } from '../apis/index';
const data = reactive({ const data = reactive({
deviceId: '', // 设备id deviceId: '', // 设备id
@ -170,8 +169,7 @@ const rules = {
const deviceCreate = ref(null); // form const deviceCreate = ref(null); // form
const store = useStore(); const store = useStore();
const route = useRoute(); const emit = defineEmits(['hide']);
const router = useRouter();
// 重置表单 // 重置表单
const onReset = () => { const onReset = () => {
@ -190,6 +188,7 @@ const onSubmit = () => {
} }
try { try {
await createDevice({ ...data }); await createDevice({ ...data });
store.commit('device/unshiftDevice', { ...data });
ElMessageBox.confirm('添加成功，是否继续添加', '提示', { ElMessageBox.confirm('添加成功，是否继续添加', '提示', {
confirmButtonText: '继续添加', confirmButtonText: '继续添加',
cancelButtonText: '关闭', cancelButtonText: '关闭',
@ -200,13 +199,12 @@ const onSubmit = () => {
onReset(); onReset();
}) })
.catch(() => { .catch(() => {
router.push({ onReset();
path: '/corrosion/devices', emit('on-hide');
query: route.query,
}); // 取消/关闭 跳转到设备管理列表
}); });
await store.dispatch('device/getDevices'); // 更新站点列表 await store.dispatch('device/getDevices'); // 更新站点列表
} catch (error) { } catch (error) {
ElMessage.error(error);
throw new Error(error); throw new Error(error);
} }
}); });

4
src/config/config.js
View File

@ -38,7 +38,7 @@ export const functionConfig = {
report: { report: {
type: 'CYCLE', // 上报周期类型 0->时间点 1->周期 type: 'CYCLE', // 上报周期类型 0->时间点 1->周期
timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点 timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点
cycle: 0, // 上报周期分钟数 cycle: 240, // 上报周期分钟数
}, },
status: '', status: '',
}; };
@ -91,4 +91,4 @@ export const PEND_TYPE = {
}; };
// 实时查询数据的轮询时间 1分钟 // 实时查询数据的轮询时间 1分钟
export const REALTIME_DATA_INTERVAL = 60000; export const REALTIME_DATA_INTERVAL = 60000 * 5;

24
src/hooks/useDeviceCreate.js
View File

@ -0,0 +1,24 @@
import { ref } from 'vue';
export default function useDeviceCreate() {
const display = ref(false);
function toggle() {
display.value = !display.value;
}
function hide() {
display.value = false;
}
function show() {
display.value = true;
}
return {
display,
toggle,
hide,
show,
};
}

41
src/routers/index.js
View File

@ -21,37 +21,19 @@ export const routes = [
component: () => import('@/views/device-list.vue'), component: () => import('@/views/device-list.vue'),
}, },
{ {
path: '/corrosion/network-config', path: '/corrosion/config',
name: 'network-config', name: 'config',
meta: { meta: {
title: '网络参数配置', title: '参数配置',
icon: 'el-icon-setting',
},
component: () => import('@/views/network-config.vue'),
},
{
path: '/corrosion/function-config',
name: 'function-config',
meta: {
title: '功能参数配置',
icon: 'el-icon-set-up', icon: 'el-icon-set-up',
}, },
component: () => import('@/views/function-config.vue'), component: () => import('@/views/config.vue'),
},
{
path: '/corrosion/device-create',
name: 'device-create',
meta: {
title: '设备添加',
icon: 'el-icon-first-aid-kit',
},
component: () => import('@/views/device-create.vue'),
}, },
{ {
path: '/corrosion/data-realtime', path: '/corrosion/data-realtime',
name: 'data-realtime', name: 'data-realtime',
meta: { meta: {
title: '实时数据查看', title: '实时数据',
icon: 'el-icon-odometer', icon: 'el-icon-odometer',
}, },
component: () => import('@/views/data-realtime.vue'), component: () => import('@/views/data-realtime.vue'),
@ -65,15 +47,6 @@ export const routes = [
}, },
component: () => import('@/views/statistical-realtime.vue'), component: () => import('@/views/statistical-realtime.vue'),
}, },
{
path: '/corrosion/data-report',
name: 'data-report',
meta: {
title: '上报数据查看',
icon: 'el-icon-stopwatch',
},
component: () => import('@/views/data-report.vue'),
},
{ {
path: '/corrosion/statistical-report', path: '/corrosion/statistical-report',
name: 'statistical-report', name: 'statistical-report',
@ -87,7 +60,7 @@ export const routes = [
path: '/corrosion/data-history', path: '/corrosion/data-history',
name: 'data-history', name: 'data-history',
meta: { meta: {
title: '历史数据查看', title: '历史数据',
icon: 'el-icon-document-copy', icon: 'el-icon-document-copy',
}, },
component: () => import('@/views/data-history.vue'), component: () => import('@/views/data-history.vue'),
@ -96,7 +69,7 @@ export const routes = [
path: '/corrosion/commands', path: '/corrosion/commands',
name: 'commands', name: 'commands',
meta: { meta: {
title: '历史数据指令下发状态', title: '平台日志',
icon: 'el-icon-moon-night', icon: 'el-icon-moon-night',
}, },
component: () => import('@/views/commands.vue'), component: () => import('@/views/commands.vue'),

11
src/store/device.js
View File

@ -7,7 +7,7 @@ const user = {
state: { state: {
devices: [], // 站点列表 设备列表简版 devices: [], // 站点列表 设备列表简版
devicesAll: null, // 设备列表完整版 devicesAll: { page: {}, data: [] }, // 设备列表完整版
currentDeviceId: '', // 当前正在编辑的设备deviceId currentDeviceId: '', // 当前正在编辑的设备deviceId
count: { count: {
total: 0, // 总设备数量 total: 0, // 总设备数量
@ -113,6 +113,15 @@ const user = {
if (!devicesAll || !devicesAll.data || !devicesAll.data.length) return; if (!devicesAll || !devicesAll.data || !devicesAll.data.length) return;
devicesAll.data = devicesAll.data.filter(item => item.deviceId !== deviceId); devicesAll.data = devicesAll.data.filter(item => item.deviceId !== deviceId);
}, },
/**
* 新增设备后将设备数据追加到最前边
* @param {array} devicesAll
* @param {object} device 后台返回的新增设备信息
*/
unshiftDevice({ devicesAll }, device) {
devicesAll.data.unshift(device);
},
}, },
actions: { actions: {

18
src/views/config.vue
View File

@ -0,0 +1,18 @@
<template>
<el-tabs v-model="activeName">
<el-tab-pane :lazy="true" label="运动参数" name="function">
<FunctionConfigPending v-if="activeName === 'function'" :active-name="activeName" />
</el-tab-pane>
<el-tab-pane :lazy="true" label="网络参数" name="network">
<NetworkConfigPending v-if="activeName === 'network'" :active-name="activeName" />
</el-tab-pane>
</el-tabs>
</template>
<script setup>
import { ref } from 'vue';
import FunctionConfigPending from 'components/config/function-config-pending.vue';
import NetworkConfigPending from 'components/config/network-config-pending.vue';
const activeName = ref('function');
</script>

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

@ -2,7 +2,7 @@
<SearchBar @search="onSearch" /> <SearchBar @search="onSearch" />
<div class="my-3"> <div class="my-3">
<el-button type="primary" @click="openPage(null, 'device-create')"> <el-button type="primary" @click="deviceCreate.show()">
<i class="el-icon-plus mr-2"></i> <i class="el-icon-plus mr-2"></i>
添加设备 添加设备
</el-button> </el-button>
@ -90,16 +90,22 @@
<!-- 编辑设备信息 --> <!-- 编辑设备信息 -->
<DeviceEdit :show="editing" @toggle-mdoal="editing = false" /> <DeviceEdit :show="editing" @toggle-mdoal="editing = false" />
<el-dialog v-model="deviceCreate.display" title="添加设备" width="80%" top="30px">
<DeviceCreate @on-hide="deviceCreate.hide()" />
</el-dialog>
</template> </template>
<script setup> <script setup>
import { computed, onMounted, ref } from 'vue'; import { computed, onMounted, reactive, ref } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router'; 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 { deleteDevice } from 'apis';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import SearchBar from 'components/search-bar.vue';
import DeviceEdit from 'components/device-edit.vue';
import DeviceCreate from 'components/device/device-create.vue';
import useDeviceCreate from '@/hooks/useDeviceCreate';
let timer = null; let timer = null;
const store = useStore(); const store = useStore();
@ -112,6 +118,8 @@ const devicesAll = computed(() => {
const currentDeviceId = computed(() => store.state.device.currentDeviceId); const currentDeviceId = computed(() => store.state.device.currentDeviceId);
const contentHeight = ref(600); const contentHeight = ref(600);
const editing = ref(false); const editing = ref(false);
const { show, display, hide } = useDeviceCreate();
const deviceCreate = reactive({ show, display, hide }); // 设备添加hook
// 获取设备完整信息列表 // 获取设备完整信息列表
const getDevicesAllData = () => { const getDevicesAllData = () => {
@ -126,6 +134,7 @@ const getDevicesAllData = () => {
}); });
} }
} catch (error) { } catch (error) {
ElMessage.error(error);
throw new Error(error); throw new Error(error);
} }
}; };

10
src/views/function-config.vue
View File

@ -3,11 +3,11 @@
<DeviceSelectAndStatus :status="status" /> <DeviceSelectAndStatus :status="status" />
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="下发参数" name="pending" :lazy="true"> <el-tab-pane :lazy="true" label="下发参数" name="pending">
<FunctionConfigPending @status="setStatus" v-if="activeName === 'pending'" :active-name="activeName" /> <FunctionConfigPending v-if="activeName === 'pending'" :active-name="activeName" @status="setStatus" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="设备参数" name="applied" :lazy="true"> <el-tab-pane :lazy="true" label="设备参数" name="applied">
<FunctionConfigApplied @status="setStatus" v-if="activeName === 'applied'" :active-name="activeName" /> <FunctionConfigApplied v-if="activeName === 'applied'" :active-name="activeName" @status="setStatus" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
@ -15,7 +15,7 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import DeviceSelectAndStatus from 'components/device-select-and-status.vue'; import DeviceSelectAndStatus from 'components/device-select-and-status.vue';
import FunctionConfigPending from 'components/function-config-pending.vue'; import FunctionConfigPending from 'components/config/function-config-pending.vue';
import FunctionConfigApplied from 'components/function-config-applied.vue'; import FunctionConfigApplied from 'components/function-config-applied.vue';
const activeName = ref('pending'); const activeName = ref('pending');

10
src/views/network-config.vue
View File

@ -3,11 +3,11 @@
<DeviceSelectAndStatus :status="status" /> <DeviceSelectAndStatus :status="status" />
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="下发参数" name="pending" :lazy="true"> <el-tab-pane :lazy="true" label="下发参数" name="pending">
<NetworkConfigPending @status="setStatus" v-if="activeName === 'pending'" :active-name="activeName" /> <NetworkConfigPending v-if="activeName === 'pending'" :active-name="activeName" @status="setStatus" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="设备参数" name="applied" :lazy="true"> <el-tab-pane :lazy="true" label="设备参数" name="applied">
<NetworkConfigApplied @status="setStatus" v-if="activeName === 'applied'" :active-name="activeName" /> <NetworkConfigApplied v-if="activeName === 'applied'" :active-name="activeName" @status="setStatus" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
@ -15,7 +15,7 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import DeviceSelectAndStatus from 'components/device-select-and-status.vue'; import DeviceSelectAndStatus from 'components/device-select-and-status.vue';
import NetworkConfigPending from 'components/network-config-pending.vue'; import NetworkConfigPending from 'components/config/network-config-pending.vue';
import NetworkConfigApplied from 'components/network-config-applied.vue'; import NetworkConfigApplied from 'components/network-config-applied.vue';
const activeName = ref('pending'); const activeName = ref('pending');

12
src/views/statistical-report.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<SearchBar @search="onSearch" :loading-search="loadingSearch" /> <SearchBar :loading-search="loadingSearch" @search="onSearch" />
<HistoryData ref="childRef" class="mt-4" /> <HistoryData ref="childRef" class="mt-4" />
</template> </template>
<script setup> <script setup>
import SearchBar from 'components/search-bar-data.vue'; import SearchBar from 'components/search-bar-data.vue';
import HistoryData from 'components/data-report.vue'; import HistoryData from 'components/chart/data-report.vue';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
@ -28,7 +28,7 @@ const loadingSearch = ref(false);
* @param {*} size // 每页多少条 * @param {*} size // 每页多少条
* @param {*} type // 0查全部 * @param {*} type // 0查全部
*/ */
const getDate = async () => { const getData = async () => {
try { try {
if (token && token.value) { if (token && token.value) {
loadingSearch.value = true; loadingSearch.value = true;
@ -47,7 +47,7 @@ const getDate = async () => {
} else { } else {
loadingSearch.value = false; loadingSearch.value = false;
timer = setTimeout(() => { timer = setTimeout(() => {
getDate(); getData();
}); });
} }
} catch (error) { } catch (error) {
@ -56,7 +56,7 @@ const getDate = async () => {
} }
}; };
getDate(); getData();
/** /**
* 监听search信息 * 监听search信息
@ -64,6 +64,6 @@ getDate();
*/ */
const onSearch = payload => { const onSearch = payload => {
search.value = { ...payload }; search.value = { ...payload };
getDate(); getData();
}; };
</script> </script>

Write Preview
Loading…
Cancel
Save