Browse Source

feat: 细节调整

master
wally 4 years ago
parent
commit
14ef007fee
  1. 2
      src/App.vue
  2. 48
      src/components/function-config-applied.vue
  3. 2
      src/components/function-config-pending.vue
  4. 2
      src/components/network-config-applied.vue
  5. 2
      src/components/network-config-pending.vue
  6. 19
      src/components/search-bar-data.vue
  7. 2
      src/routers/index.js
  8. 45
      src/views/data-history.vue
  9. 38
      src/views/data-report.vue
  10. 23
      src/views/device-create.vue
  11. 12
      src/views/device-list.vue
  12. 7
      src/views/statistical-report.vue
  13. 38
      t

2
src/App.vue

@ -69,7 +69,7 @@ function openPage(path) {
</el-header>
<el-container class="overflow-hidden">
<!-- <el-aside width="180px" v-if="menu.show"> -->
<el-aside v-if="menu.show" :width="!menu.collapse ? '180px' : '64px'">
<el-aside v-if="menu.show" :width="!menu.collapse ? '200px' : '64px'">
<el-menu :collapse="menu.collapse" :default-active="activeMenuIndex" class="el-menu-vertical-demo">
<el-menu-item
v-for="(item, index) in routeList"

48
src/components/function-config-applied.vue

@ -1,77 +1,77 @@
<template>
<el-row :gutter="10">
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<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 :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<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 :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<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 :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<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 :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>设置时间</span>
<span>{{ formatMsTime(data.time) }}</span>
</el-col>
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<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 :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>设置电池电压低阈值</span>
<span>{{ data.batteryLow }}</span>
</el-col>
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>设置电池电压高阈值</span>
<span>{{ data.batteryHigh }}</span>
</el-col>
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>设置太阳能电压高阈值</span>
<span>{{ data.sunHigh }}</span>
</el-col>
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>设置湿度高阈值</span>
<span>{{ data.humidityHigh }}</span>
</el-col>
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<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 :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<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 :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>选择金属通道1类型</span>
<span>{{ formatCorrosiveType(data.corrosiveType1) }}</span>
</el-col>
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>选择金属通道2类型</span>
<span>{{ formatCorrosiveType(data.corrosiveType2) }}</span>
</el-col>
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>选择金属通道3类型</span>
<span>{{ formatCorrosiveType(data.corrosiveType3) }}</span>
</el-col>
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>选择金属通道4类型</span>
<span>{{ formatCorrosiveType(data.corrosiveType4) }}</span>
</el-col>
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>安全模式</span>
<span>{{ formatMode(data.securityMode) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3">
<span>上报类型</span>
<span class="mr-8">{{ formatReportType(data.report.type) }}</span>
@ -85,11 +85,11 @@
</template>
<script setup>
import { computed, ref, watch, defineEmits, defineProps } from 'vue';
import { computed, defineEmits, defineProps, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { getConfigAppliedNetwork } from 'apis/index';
import { getConfigAppliedFunction } from 'apis';
import { formatMsTime } from 'utils/time';
import { functionConfig, corrosiveTypes } from '@/config/config';
import { corrosiveTypes, functionConfig } from '@/config/config';
const store = useStore();
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
@ -104,10 +104,12 @@ const props = defineProps({ activeName: String });
const onSearch = async deviceId => {
try {
const params = { deviceId };
const resData = await getConfigAppliedNetwork(params);
const resData = await getConfigAppliedFunction(params);
data.value = resData || functionConfig;
if (resData && resData.status) {
emit('status', resData.status);
} else {
emit('status', '');
}
} catch (error) {
throw new Error(error);
@ -124,7 +126,7 @@ watch(
/**
* 转化安全模式
* @param {string|number} time 时间ms
* @param {string} mode OPEN->加密
*/
function formatMode(mode) {
return mode === 'OPEN' ? '不加密' : '加密';

2
src/components/function-config-pending.vue

@ -198,6 +198,8 @@ async function onSearch(deviceId, type = 0) {
if (resData && resData.status) {
//
emit('status', resData.status);
} else {
emit('status', '');
}
if (resData && resData.report.type === 'POINT') {

2
src/components/network-config-applied.vue

@ -81,6 +81,8 @@ const onSearch = async deviceId => {
appliedData.value = resData || networkConfig;
if (resData && resData.status) {
emit('status', resData.status);
} else {
emit('status', '');
}
} catch (error) {
throw new Error(error);

2
src/components/network-config-pending.vue

@ -102,6 +102,8 @@ async function onSearch(deviceId, type = 0) {
data.value = resData || networkConfig;
if (resData && resData.status) {
emit('status', resData.status);
} else {
emit('status', '');
}
} catch (error) {
throw new Error(error);

19
src/components/search-bar-data.vue

@ -26,11 +26,11 @@
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button type="primary" @click="onSubmit" :loading="loadingSearch">查询</el-button>
</el-form-item>
<el-form-item v-if="showExport">
<el-button type="primary" @click="onExport">导出</el-button>
<el-button type="primary" @click="onExport" :loading="loadingExport">导出</el-button>
</el-form-item>
</el-form>
</template>
@ -44,17 +44,19 @@ import { exportHistory } from 'apis';
const emit = defineEmits(['search']);
const searchDevice = reactive({
deviceId: '',
date: [new Date(), new Date()],
date: [dayjs().subtract(7, 'day'), new Date()],
dataType: 'ReportHistoryData',
});
const searchDeviceForm = ref(null); // form
const store = useStore();
const devices = computed(() => store.state.device.devices);
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // id
const loadingExport = ref(false);
defineProps({
showExport: Boolean,
showTypeSelect: Boolean,
loadingSearch: Boolean,
});
// currentDeviceId
@ -97,19 +99,24 @@ function generateParams() {
//
const onSubmit = () => {
searchDeviceForm.value.validate(() => {
const params = generateParams();
emit('search', params);
searchDeviceForm.value.validate(valid => {
if (valid) {
const params = generateParams();
emit('search', params);
}
});
};
//
async function onExport() {
try {
loadingExport.value = true;
const params = generateParams();
const resData = await exportHistory(params);
loadingExport.value = false;
resData && (window.location.href = resData);
} catch (error) {
loadingExport.value = false;
throw new Error(error);
}
}

2
src/routers/index.js

@ -78,7 +78,7 @@ export const routes = [
path: '/corrosion/commands',
name: 'commands',
meta: {
title: '指令下发状态',
title: '历史数据指令下发状态',
icon: 'el-icon-document-copy',
},
component: () => import('@/views/commands.vue'),

45
src/views/data-history.vue

@ -4,6 +4,7 @@ import { useStore } from 'vuex';
import SearchBar from 'components/search-bar-data.vue';
import { getHistory, sendCommand } from 'apis';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
const search = ref({});
const page = ref({
@ -14,7 +15,7 @@ let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // id
let contentHeight = 600;
const contentHeight = ref(600);
const data = ref(null);
//
@ -34,7 +35,7 @@ const getData = async () => {
deviceId: currentDeviceId.value,
date,
dataType: options.dataType,
page: page.value.age,
page: page.value.page,
size: page.value.size,
type: 1,
};
@ -59,8 +60,9 @@ const getData = async () => {
//
onMounted(() => {
const winHeight = document.documentElement.clientHeight;
contentHeight = winHeight - 150;
contentHeight.value = winHeight - 250;
});
/**
* 监听sear h信息
* @param {object} payload search组件emi 的数据
@ -117,6 +119,15 @@ async function onSend(dataType) {
ElMessage.error('指令发送失败');
}
}
/**
* 格式化时间
* @param {number} time 时间戳
* @returns {string}
*/
function formatTime(time) {
return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
}
</script>
<template>
@ -128,19 +139,20 @@ async function onSend(dataType) {
</el-row>
<template v-if="data">
<el-table :data="data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%">
<el-table-column align="center" fixed label="设备编号" min-width="140" prop="deviceNo" />
<el-table-column align="center" label="ICCID" min-width="100" prop="iccid" />
<el-table-column align="center" label="IMEI" min-width="80" prop="imei" />
<el-table-column align="center" label="信号强度" min-width="80" prop="signal" />
<el-table-column align="center" label="基站编号" min-width="80" prop="stationNo" />
<el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />
<el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />
<el-table :data="data" border stripe style="width: 100%" :max-height="contentHeight">
<el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
<!-- <el-table-column align="center" label="ICCID" min-width="100" prop="iccid" />-->
<!-- <el-table-column align="center" label="IMEI" min-width="80" prop="imei" />-->
<!-- <el-table-column align="center" label="信号强度" min-width="80" prop="signal" />-->
<!-- <el-table-column align="center" label="基站编号" min-width="80" prop="stationNo" />-->
<!-- <el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />-->
<!-- <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />-->
<el-table-column align="center" label="太阳能电压" min-width="94" prop="solarVoltage" />
<el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" />
<el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />
<el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" />
<el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" />
<!-- <el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />-->
<!-- <el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" />-->
<!-- <el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" />-->
<el-table-column align="center" label="机箱温度" min-width="80" prop="deviceTemperature" />
<el-table-column align="center" label="机箱湿度" min-width="80" prop="deviceHumidity" />
<el-table-column align="center" label="环境温度" min-width="80" prop="environmentTemperature" />
@ -151,6 +163,11 @@ async function onSend(dataType) {
<el-table-column align="center" label="腐流2" min-width="60" prop="corrosion2" />
<el-table-column align="center" label="腐流3" min-width="60" prop="corrosion3" />
<el-table-column align="center" label="腐流4" min-width="60" prop="corrosion4" />
<el-table-column align="center" label="时间" min-width="170">
<template #default="scope">
{{ formatTime(+scope.row.time) }}
</template>
</el-table-column>
</el-table>
<el-pagination

38
src/views/data-report.vue

@ -2,8 +2,9 @@
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import SearchBar from 'components/search-bar-data.vue';
import { getDatas } from 'apis/index';
import { getDatas } from 'apis';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
const search = ref({});
const page = ref({
@ -14,7 +15,8 @@ let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // id
let contentHeight = 600;
const contentHeight = ref(600);
const loadingSearch = ref(false);
const data = ref(null);
//
@ -37,7 +39,11 @@ const getData = async () => {
size: page.value.size,
type: 1,
};
loadingSearch.value = true;
const resData = await getDatas(params);
loadingSearch.value = false;
data.value = resData.data;
page.value = resData.page;
timer && clearTimeout(timer);
@ -58,7 +64,7 @@ const getData = async () => {
//
onMounted(() => {
const winHeight = document.documentElement.clientHeight;
contentHeight = winHeight - 150;
contentHeight.value = winHeight - 170;
});
/**
@ -95,20 +101,34 @@ const onPrev = e => {
page.value.page = e - 1;
getData();
};
/**
* 格式化时间
* @param {number} time 时间戳
* @returns {string}
*/
function formatTime(time) {
return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
}
</script>
<template>
<SearchBar :show-export="true" @search="onSearch" />
<SearchBar :show-export="true" @search="onSearch" :loading-search="loadingSearch" />
<template v-if="data">
<el-table :data="data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%">
<el-table-column align="center" fixed label="设备编号" min-width="140" prop="deviceNo" />
<el-table-column align="center" label="ICCID" min-width="100" prop="iccid" />
<el-table-column align="center" label="IMEI" min-width="80" prop="imei" />
<el-table :data="data" border stripe style="width: 100%" :max-height="contentHeight">
<el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" />
<el-table-column align="center" label="ICCID" min-width="190" prop="iccid" />
<el-table-column align="center" label="IMEI" min-width="150" prop="imei" />
<el-table-column align="center" label="信号强度" min-width="80" prop="signal" />
<el-table-column align="center" label="基站编号" min-width="80" prop="stationNo" />
<el-table-column align="center" label="基站编号" min-width="120" prop="stationNo" />
<el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />
<el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />
<el-table-column align="center" label="时间" min-width="170">
<template #default="scope">
{{ formatTime(+scope.row.time) }}
</template>
</el-table-column>
<el-table-column align="center" label="太阳能电压" min-width="94" prop="solarVoltage" />
<el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" />
<el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />

23
src/views/device-create.vue

@ -1,8 +1,8 @@
<template>
<el-form ref="deviceCreate" :model="data" label-position="top">
<el-form ref="deviceCreate" :model="data" :rules="rules" label-position="top">
<el-row :gutter="20">
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
<el-form-item label="设备ID号" prop="deviceId">
<el-form-item label="设备ID号(6位)" prop="deviceId">
<el-input v-model="data.deviceId"></el-input>
</el-form-item>
</el-col>
@ -146,6 +146,22 @@ const data = reactive({
joint: '', //
remark: '', //
});
const rules = {
deviceId: [
{
required: true,
message: '请输入设备ID号',
trigger: 'blur',
},
{
len: 6,
message: '请输入6位设备ID号',
trigger: 'blur',
},
],
};
const deviceCreate = ref(null); // form
const store = useStore();
const route = useRoute();
@ -158,7 +174,8 @@ const onReset = () => {
//
const onSubmit = () => {
deviceCreate.value.validate(async () => {
deviceCreate.value.validate(async valid => {
if (!valid) return;
if (data.installTime) {
data.installTime = new Date(data.installTime).getTime();
}

12
src/views/device-list.vue

@ -6,7 +6,7 @@
</div>
<template v-if="devicesAll && devicesAll.data">
<el-table :data="devicesAll.data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%">
<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">
@ -76,7 +76,7 @@
</template>
<!-- 编辑设备信息 -->
<DeviceEdit :show="editting" @toggle-mdoal="editting = false" />
<DeviceEdit :show="editing" @toggle-mdoal="editing = false" />
</template>
<script setup>
@ -97,8 +97,8 @@ const devicesAll = computed(() => {
return store.state.device.devicesAll;
});
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
let contentHeight = 600;
const editting = ref(false);
const contentHeight = ref(600);
const editing = ref(false);
//
const getDevicesAllData = () => {
@ -122,7 +122,7 @@ getDevicesAllData();
//
onMounted(() => {
const winHeight = document.documentElement.clientHeight;
contentHeight = winHeight - 150;
contentHeight.value = winHeight - 250;
});
/**
@ -169,7 +169,7 @@ const handleDelete = async deviceId => {
//
const handleEdit = item => {
store.commit('device/setCurrentDeviceId', item.deviceId);
editting.value = true;
editing.value = true;
};
/**

7
src/views/statistical-report.vue

@ -1,5 +1,5 @@
<template>
<SearchBar @search="onSearch" />
<SearchBar @search="onSearch" :loading-search="loadingSearch" />
<HistoryData ref="childRef" class="mt-4" />
</template>
@ -17,6 +17,7 @@ const token = computed(() => store.getters['user/token']);
const realtimeData = computed(() => store.state.statistics.realtimeData);
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // id
const search = ref({});
const loadingSearch = ref(false);
/**
* 历史数据统计
@ -30,6 +31,7 @@ const search = ref({});
const getDate = async () => {
try {
if (token && token.value) {
loadingSearch.value = true;
const options = { ...search.value };
const date = options && options.date ? options.date : [];
const params = {
@ -41,12 +43,15 @@ const getDate = async () => {
timer && clearTimeout(timer);
timer = null;
childRef.value.changeDate(realtimeData.value.data);
loadingSearch.value = false;
} else {
loadingSearch.value = false;
timer = setTimeout(() => {
getDate();
});
}
} catch (error) {
loadingSearch.value = false;
console.log('error: ', error);
}
};

38
t

@ -0,0 +1,38 @@
usage: git tag [-a | -s | -u <key-id>] [-f] [-m <msg> | -F <file>]
<tagname> [<head>]
or: git tag -d <tagname>...
or: git tag -l [-n[<num>]] [--contains <commit>] [--no-contains <commit>] [--points-at <object>]
[--format=<format>] [--[no-]merged [<commit>]] [<pattern>...]
or: git tag -v [--format=<format>] <tagname>...
-l, --list list tag names
-n[<n>] print <n> lines of each tag message
-d, --delete delete tags
-v, --verify verify tags
Tag creation options
-a, --annotate annotated tag, needs a message
-m, --message <message>
tag message
-F, --file <file> read message from file
-e, --edit force edit of tag message
-s, --sign annotated and GPG-signed tag
--cleanup <mode> how to strip spaces and #comments from message
-u, --local-user <key-id>
use another key to sign the tag
-f, --force replace the tag if exists
--create-reflog create a reflog
Tag listing options
--column[=<style>] show tag list in columns
--contains <commit> print only tags that contain the commit
--no-contains <commit>
print only tags that don't contain the commit
--merged <commit> print only tags that are merged
--no-merged <commit> print only tags that are not merged
--sort <key> field name to sort on
--points-at <object> print only tags of the object
--format <format> format to use for the output
--color[=<when>] respect format colors
-i, --ignore-case sorting and filtering are case insensitive
Loading…
Cancel
Save