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
65fe950aa5
commit
1fdf822912
11 changed files with 129 additions and 108 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. 2
      src/components/data-search-bar.vue
  2. 4
      src/components/function-config-pending.vue
  3. 7
      src/components/search-bar-data.vue
  4. 16
      src/components/search-bar.vue
  5. 2
      src/components/search-commands.vue
  6. 4
      src/config/config.js
  7. 35
      src/views/data-history.vue
  8. 122
      src/views/data-realtime.vue
  9. 25
      src/views/data-report.vue
  10. 11
      src/views/device-list.vue
  11. 9
      src/views/statistical-realtime.vue

2
src/components/data-search-bar.vue
View File

@ -17,7 +17,7 @@
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item class="ml-6"> <el-form-item class="ml-6">
<el-button type="primary" @click="onSubmit">查询</el-button> <el-button type="primary" @click="onSubmit"><i class="el-icon-search mr-2"></i> 查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>

4
src/components/function-config-pending.vue
View File

@ -59,7 +59,7 @@
<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="0" /> <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">
@ -155,7 +155,7 @@ import { useStore } from 'vuex';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import cloneDeep from 'lodash/cloneDeep'; import cloneDeep from 'lodash/cloneDeep';
import isDate from 'lodash/isDate'; import isDate from 'lodash/isDate';
import { createConfigFunction, getConfigFunction } from 'apis/index'; import { createConfigFunction, getConfigFunction } from 'apis';
import Refresh from 'components/refresh.vue'; import Refresh from 'components/refresh.vue';
import { corrosiveTypes, functionConfig } from '@/config/config'; import { corrosiveTypes, functionConfig } from '@/config/config';

7
src/components/search-bar-data.vue
View File

@ -26,11 +26,14 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit" :loading="loadingSearch">查询</el-button> <el-button :loading="loadingSearch" type="primary" @click="onSubmit">
<i class="el-icon-search mr-2"></i>
查询
</el-button>
</el-form-item> </el-form-item>
<el-form-item v-if="showExport"> <el-form-item v-if="showExport">
<el-button type="primary" @click="onExport" :loading="loadingExport">导出</el-button> <el-button :loading="loadingExport" type="primary" @click="onExport"><i class="el-icon-download mr-2"></i>导出</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>

16
src/components/search-bar.vue
View File

@ -1,23 +1,27 @@
<template> <template>
<el-form :inline="true" :model="searchDevice" ref="searchDeviceForm"> <el-form ref="searchDeviceForm" :inline="true" :model="searchDevice">
<el-form-item label="选择站点"> <el-form-item label="选择站点">
<el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change"> <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
<el-option label="全部" value v-if="showAll"></el-option> <el-option v-if="showAll" label="全部" value></el-option>
<el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option> <el-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button> <el-button type="primary" @click="onSubmit"><i class="el-icon-search mr-2"></i>查询</el-button>
</el-form-item>
<el-form-item v-if="showRefresh">
<el-button type="primary" @click="$emit('refresh')"><i class="el-icon-refresh mr-2"></i>刷新</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script setup> <script setup>
import { reactive, ref, computed, defineEmits, watch } from 'vue'; import { computed, defineEmits, defineProps, reactive, ref, watch } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const emit = defineEmits(['getDate']); defineProps({ showRefresh: Boolean });
const emit = defineEmits(['getDate', 'refresh']);
const router = useRouter(); const router = useRouter();
const searchDevice = reactive({ deviceId: '' }); const searchDevice = reactive({ deviceId: '' });

2
src/components/search-commands.vue
View File

@ -24,7 +24,7 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button> <el-button type="primary" @click="onSubmit"><i class="el-icon-search mr-2"></i>查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>

4
src/config/config.js
View File

@ -90,5 +90,5 @@ export const PEND_TYPE = {
}, },
}; };
// 实时查询数据的轮询时间 // 实时查询数据的轮询时间 1分钟
export const REALTIME_DATA_INTERVAL = 15000; export const REALTIME_DATA_INTERVAL = 60000;

35
src/views/data-history.vue
View File

@ -142,28 +142,19 @@ function formatTime(time) {
<template v-if="data"> <template v-if="data">
<el-table :data="data" border stripe style="width: 100%" :max-height="contentHeight"> <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" 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="太阳能电压(V)" min-width="120" prop="solarVoltage" />
<!-- <el-table-column align="center" label="IMEI" min-width="80" prop="imei" />--> <el-table-column align="center" label="蓄电池电压(V)" min-width="120" prop="batteryVoltage" />
<!-- <el-table-column align="center" label="信号强度" min-width="80" prop="signal" />--> <el-table-column align="center" label="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
<!-- <el-table-column align="center" label="基站编号" min-width="80" prop="stationNo" />--> <el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
<!-- <el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" />--> <el-table-column align="center" label="环境温度(℃)" min-width="110" prop="environmentTemperature" />
<!-- <el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" />--> <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
<el-table-column align="center" label="太阳能电压" min-width="94" prop="solarVoltage" /> <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
<el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" /> <el-table-column align="center" label="盐温(℃)" min-width="80" prop="salt" />
<!-- <el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" />--> <el-table-column align="center" label="盐阻(Ω)" min-width="80" prop="salt" />
<!-- <el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" />--> <el-table-column align="center" label="锌(nA)" min-width="80" prop="corrosion1" />
<!-- <el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" />--> <el-table-column align="center" label="铜(nA)" min-width="80" prop="corrosion2" />
<el-table-column align="center" label="铝(nA)" min-width="80" prop="corrosion3" />
<el-table-column align="center" label="机箱温度" min-width="80" prop="deviceTemperature" /> <el-table-column align="center" label="钢(nA)" min-width="80" prop="corrosion4" />
<el-table-column align="center" label="机箱湿度" min-width="80" prop="deviceHumidity" />
<el-table-column align="center" label="环境温度" min-width="80" prop="environmentTemperature" />
<el-table-column align="center" label="环境湿度" min-width="80" prop="environmentHumidity" />
<el-table-column align="center" label="SO2" min-width="50" prop="so2" />
<el-table-column align="center" label="盐分" min-width="50" prop="salt" />
<el-table-column align="center" label="腐流1" min-width="60" prop="corrosion1" />
<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"> <el-table-column align="center" label="采集时间" min-width="170">
<template #default="scope"> <template #default="scope">
{{ formatTime(+scope.row.time) }} {{ formatTime(+scope.row.time) }}

122
src/views/data-realtime.vue
View File

@ -1,3 +1,61 @@
<template>
<SearchBar @search="getData" @refresh="onRefresh" :show-refresh="true" />
<template v-if="data">
<el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
<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="130" 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="170">
<template #default="scope">
{{ formatTime(+scope.row.createdAt) }}
</template>
</el-table-column>
<el-table-column align="center" label="太阳能电压(V)" min-width="120" prop="solarVoltage" />
<el-table-column align="center" label="蓄电池电压(V)" min-width="120" 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="110" prop="deviceTemperature" />
<el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
<el-table-column align="center" label="环境温度(℃)" min-width="110" prop="environmentTemperature" />
<el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
<el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
<el-table-column align="center" label="盐温(℃)" min-width="80" prop="salt" />
<el-table-column align="center" label="盐阻(Ω)" min-width="80" prop="salt" />
<el-table-column align="center" label="锌(nA)" min-width="80" prop="corrosion1" />
<el-table-column align="center" label="铜(nA)" min-width="80" prop="corrosion2" />
<el-table-column align="center" label="铝(nA)" min-width="80" prop="corrosion3" />
<el-table-column align="center" label="钢(nA)" min-width="80" prop="corrosion4" />
</el-table>
<el-pagination
:current-page="page.page"
:default-page-size="50"
:page-count="page.count"
:page-size="page.size"
:page-sizes="[1, 10, 20, 50, 100]"
:total="page.total"
background
class="my-3 float-right"
layout="total, sizes, prev, pager, next, jumper"
@current-change="onCurrentPageChange"
@size-change="onSizeChange"
@prev-click="onPrev"
@next-click="onNext"
></el-pagination>
</template>
</template>
<script setup> <script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'; import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
@ -111,61 +169,11 @@ const onPrev = e => {
function formatTime(time) { function formatTime(time) {
return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss'); return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm:ss');
} }
</script>
<template>
<SearchBar @search="getData" />
<template v-if="data"> // 手动刷新 清除定时器 重新获取数据
<el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%"> function onRefresh() {
<el-table-column align="center" fixed label="设备编号" min-width="80" prop="deviceNo" /> apiTimer && clearInterval(apiTimer);
<el-table-column align="center" label="ICCID" min-width="190" prop="iccid" /> apiTimer = null;
<el-table-column align="center" label="IMEI" min-width="150" prop="imei" /> getData();
<el-table-column align="center" label="信号强度" min-width="80" prop="signal" /> }
<el-table-column align="center" label="基站编号" min-width="130" prop="stationNo" /> </script>
<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="170">
<template #default="scope">
{{ formatTime(+scope.row.createdAt) }}
</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" />
<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" />
<el-table-column align="center" label="环境湿度" min-width="80" prop="environmentHumidity" />
<el-table-column align="center" label="SO2" min-width="50" prop="so2" />
<el-table-column align="center" label="盐分" min-width="50" prop="salt" />
<el-table-column align="center" label="腐流1" min-width="60" prop="corrosion1" />
<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>
<el-pagination
:current-page="page.page"
:default-page-size="50"
:page-count="page.count"
:page-size="page.size"
:page-sizes="[1, 10, 20, 50, 100]"
:total="page.total"
background
class="my-3 float-right"
layout="total, sizes, prev, pager, next, jumper"
@current-change="onCurrentPageChange"
@size-change="onSizeChange"
@prev-click="onPrev"
@next-click="onNext"
></el-pagination>
</template>
</template>

25
src/views/data-report.vue
View File

@ -135,21 +135,22 @@ function formatTime(time) {
{{ formatTime(+scope.row.createdAt) }} {{ formatTime(+scope.row.createdAt) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="太阳能电压" min-width="94" prop="solarVoltage" /> <el-table-column align="center" label="太阳能电压(V)" min-width="120" prop="solarVoltage" />
<el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" /> <el-table-column align="center" label="蓄电池电压(V)" min-width="120" prop="batteryVoltage" />
<el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" /> <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="batteryVoltageRemain" />
<el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" /> <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="110" prop="deviceTemperature" />
<el-table-column align="center" label="机箱湿度" min-width="80" prop="deviceHumidity" /> <el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
<el-table-column align="center" label="环境温度" min-width="80" prop="environmentTemperature" /> <el-table-column align="center" label="环境温度(℃)" min-width="110" prop="environmentTemperature" />
<el-table-column align="center" label="环境湿度" min-width="80" prop="environmentHumidity" /> <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
<el-table-column align="center" label="SO2" min-width="50" prop="so2" /> <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
<el-table-column align="center" label="盐分" min-width="50" prop="salt" /> <el-table-column align="center" label="盐温(℃)" min-width="80" prop="salt" />
<el-table-column align="center" label="腐流1" min-width="60" prop="corrosion1" /> <el-table-column align="center" label="盐阻(Ω)" min-width="80" prop="salt" />
<el-table-column align="center" label="腐流2" min-width="60" prop="corrosion2" /> <el-table-column align="center" label="锌(nA)" min-width="80" prop="corrosion1" />
<el-table-column align="center" label="腐流3" min-width="60" prop="corrosion3" /> <el-table-column align="center" label="铜(nA)" min-width="80" prop="corrosion2" />
<el-table-column align="center" label="腐流4" min-width="60" prop="corrosion4" /> <el-table-column align="center" label="铝(nA)" min-width="80" prop="corrosion3" />
<el-table-column align="center" label="钢(nA)" min-width="80" prop="corrosion4" />
</el-table> </el-table>
<el-pagination <el-pagination

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

@ -2,7 +2,10 @@
<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> <el-button type="primary" @click="openPage(null, 'device-create')">
<i class="el-icon-plus mr-2"></i>
添加设备
</el-button>
</div> </div>
<template v-if="devicesAll && devicesAll.data"> <template v-if="devicesAll && devicesAll.data">
@ -141,7 +144,11 @@ onMounted(() => {
*/ */
function onSearch(page, size = 50) { function onSearch(page, size = 50) {
const deviceId = currentDeviceId.value; const deviceId = currentDeviceId.value;
const params = { deviceId, page, size }; const params = {
deviceId,
page,
size,
};
store.dispatch('device/getDevicesAll', params); store.dispatch('device/getDevicesAll', params);
} }

9
src/views/statistical-realtime.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<SearchBar @search="getData" /> <SearchBar @search="getData" @refresh="onRefresh" :show-refresh="true" />
<RealtimeData ref="childRef" class="mt-4" /> <RealtimeData ref="childRef" class="mt-4" />
</template> </template>
@ -59,4 +59,11 @@ onUnmounted(() => {
apiTimer && clearInterval(apiTimer); apiTimer && clearInterval(apiTimer);
apiTimer = null; apiTimer = null;
}); });
// 手动刷新 清除定时器 重新获取数据
function onRefresh() {
apiTimer && clearInterval(apiTimer);
apiTimer = null;
getData();
}
</script> </script>

Write Preview
Loading…
Cancel
Save