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

Merge branch 'master' of dd.tall.wiki:ccsens_fe/corrosion

master
wally 4 years ago
parent
d698306599 2a4f36733d
commit
536a68fab4
12 changed files with 604 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/apis/index.js
  2. 62
      src/components/data-search-bar.vue
  3. 115
      src/components/history-data.vue
  4. 72
      src/components/integral-electric.vue
  5. 53
      src/components/moist-time.vue
  6. 115
      src/components/realtime-data.vue
  7. 52
      src/components/total-corrosion.vue
  8. 18
      src/routers/index.js
  9. 40
      src/store/statistics.js
  10. 47
      src/views/month-data.vue
  11. 41
      src/views/statistical-history.vue
  12. 41
      src/views/statistical-realtime.vue

15
src/apis/index.js
View File

@ -13,14 +13,11 @@ export const getDevices = () => http.get(`${corrosion}/devices`);
// 获取设备列表 完整信息
export const getDevicesAll = () => http.get(`${corrosion}/devices/all`);
// 获取数据统计 积分电量
export const getIntegralElectric = () => http.get(`${corrosion}/months/integralElectric`);
// 获取数据统计 月累计腐蚀
export const getTotalCorrosion = () => http.get(`${corrosion}/months/totalCorrosion`);
// 获取数据统计 月累计湿润时间图
export const getMoistTime = () => http.get(`${corrosion}/months/moistTime`);
// 查历史数据
export const getHistories = params => http.get(`${corrosion}/histories`, { params });
// 获取月累计数据分析
export const getMonthesDate = params => http.get(`${corrosion}/statistics/monthes`, { params });
// 获取实时数据统计
export const getRealtimeData = params => http.get(`${corrosion}/statistics/realtime`, { params });

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

@ -0,0 +1,62 @@
<template>
<el-form :inline="true" :model="searchDevice" ref="searchDeviceForm">
<el-form-item label="选择站点">
<el-select v-model="searchDevice.device" placeholder="请选择站点">
<el-option label="全部" value=""></el-option>
<el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option>
</el-select>
</el-form-item>
<el-form-item label="选择日期" class="ml-6">
<el-date-picker
v-model="searchDevice.value1"
type="monthrange"
range-separator="~"
start-placeholder="开始月份"
end-placeholder="结束月份"
>
</el-date-picker>
</el-form-item>
<el-form-item class="ml-6">
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, computed, defineEmits } from 'vue';
import { useStore } from 'vuex';
const emit = defineEmits(['getDate']);
const searchDevice = reactive({ device: '', value1: '' });
const searchDeviceForm = ref(null); // form
const store = useStore();
const devices = computed(() => store.state.device.devices);
// 日期格式转换
const timeChange = time => {
const d = new Date(time);
const y = d.getFullYear();
let m = d.getMonth() + 1;
m = m < 10 ? `0${m}` : m;
return `${y}-${m}`;
};
const onSubmit = () => {
searchDeviceForm.value.validate(valid => {
if (valid) {
const options = { ...searchDevice };
let date = [];
if (options.value1) {
const start = timeChange([...options.value1][0]);
const end = timeChange([...options.value1][1]);
date = [start, end];
}
const params = { deviceId: options.device, date };
emit('getDate', params);
}
});
};
</script>

115
src/components/history-data.vue
View File

@ -0,0 +1,115 @@
<template>
<el-card class="box-card">
<el-empty description="暂无数据" v-if="noData"></el-empty>
<div id="realtimeContainer"></div>
</el-card>
</template>
<script setup>
import { onMounted, ref, defineExpose } from 'vue';
import { Line } from '@antv/g2plot';
const show = ref(false);
const noData = ref(true);
let bar = null;
// 设置图表
onMounted(() => {
show.value = true;
noData.value = false;
});
// 设置图表
const setDate = data => {
noData.value = false;
if (bar) {
bar.destroy();
}
bar = new Line('realtimeContainer', {
data,
padding: 'auto',
xField: 'time',
yField: 'value',
seriesField: 'category',
slider: {
start: 0.1,
end: 0.2,
},
height: 700,
// smooth: true,
point: {
size: 2,
shape: 'circular',
style: {
fill: 'white',
lineWidth: 2,
},
},
});
bar.render();
};
// 处理数据
const changeDate = value => {
if (!value.length) return;
const arr = [];
value.forEach(element => {
const item = { ...element };
const so2Item = { category: 'SO2' };
const saltItem = { category: '盐分' };
const environmentTemperatureItem = { category: '环温' };
const environmentHumidityItem = { category: '环湿' };
const deviceTemperatureItem = { category: '机温' };
const deviceHumidityItem = { category: '机湿' };
const corrosion1Item = { category: '腐流1' };
const corrosion2Item = { category: '腐流2' };
const corrosion3Item = { category: '腐流3' };
const corrosion4Item = { category: '腐流4' };
so2Item.time = item.time;
so2Item.value = item.so2;
arr.push(so2Item);
saltItem.time = item.time;
saltItem.value = item.salt;
arr.push(saltItem);
environmentTemperatureItem.time = item.time;
environmentTemperatureItem.value = item.environmentTemperature;
arr.push(environmentTemperatureItem);
environmentHumidityItem.time = item.time;
environmentHumidityItem.value = item.environmentHumidity;
arr.push(environmentHumidityItem);
deviceTemperatureItem.time = item.time;
deviceTemperatureItem.value = item.deviceTemperature;
arr.push(deviceTemperatureItem);
deviceHumidityItem.time = item.time;
deviceHumidityItem.value = item.deviceHumidity;
arr.push(deviceHumidityItem);
corrosion1Item.time = item.time;
corrosion1Item.value = item.corrosion1;
arr.push(corrosion1Item);
corrosion2Item.time = item.time;
corrosion2Item.value = item.corrosion2;
arr.push(corrosion2Item);
corrosion3Item.time = item.time;
corrosion3Item.value = item.corrosion3;
arr.push(corrosion3Item);
corrosion4Item.time = item.time;
corrosion4Item.value = item.corrosion4;
arr.push(corrosion4Item);
});
setDate(arr);
};
defineExpose({ changeDate });
</script>

72
src/components/integral-electric.vue
View File

@ -1,51 +1,51 @@
<template>
<el-card class="box-card">
<div class="text-sm">积分电量(C)</div>
<el-empty description="暂无数据" v-if="noData"></el-empty>
<div id="container"></div>
</el-card>
</template>
<script setup>
import { onMounted, computed } from 'vue';
import { Bar } from '@antv/g2plot';
import { useStore } from 'vuex';
import { onMounted, ref, defineExpose } from 'vue';
import { Column } from '@antv/g2plot';
let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const electricData = computed(() => store.state.statistics.electricData);
const show = ref(false);
const noData = ref(true);
let bar = null;
// 获取积分电量数据
const getElectricData = async () => {
if (token) {
await store.dispatch('statistics/getElectricData');
timer && clearTimeout(timer);
timer = null;
} else {
timer = setTimeout(() => {
getElectricData();
});
}
};
// 设置图表
onMounted(() => {
show.value = true;
});
// 设置表格高度
onMounted(async () => {
await getElectricData();
const bar = new Bar('container', {
title: '积分电量',
data: electricData.value,
xField: 'value',
yField: 'year',
// legend: {
// position: 'top-left',
// },
const setDate = data => {
noData.value = false;
if (bar) {
bar.destroy();
}
bar = new Column('container', {
data,
layout: 'vertical',
xField: 'time',
yField: 'value',
padding: [30, 16, 60, 50],
columnWidthRatio: 0.6, // 宽度占比
yAxis: {
title: {
text: '积分电量',
spacing: 20,
},
},
slider: {
start: 0.1,
end: 0.2,
},
meta: {
value: { alias: '积分电量' },
year: { alias: '年月' },
end: 0.5,
},
meta: { value: { alias: '积分电量(C)' } },
});
bar.render();
});
};
defineExpose({ setDate });
</script>

53
src/components/moist-time.vue
View File

@ -0,0 +1,53 @@
<template>
<el-card class="box-card">
<div class="text-sm">月累计湿润时间（h）</div>
<el-empty description="暂无数据" v-if="noData"></el-empty>
<div id="moistTimeDataContainer"></div>
</el-card>
</template>
<script setup>
import { onMounted, ref, defineExpose } from 'vue';
import { Column } from '@antv/g2plot';
const show = ref(false);
const noData = ref(true);
let bar = null;
// 设置图表
onMounted(() => {
show.value = true;
});
const setDate = data => {
noData.value = false;
if (bar) {
bar.destroy();
}
bar = new Column('moistTimeDataContainer', {
data,
layout: 'vertical',
xField: 'time',
yField: 'value',
// height: 200,
padding: [30, 16, 60, 50],
color: '#C280FF',
columnWidthRatio: 0.6, // 宽度占比
yAxis: {
title: {
text: '月累计湿润时间',
spacing: 20,
},
},
slider: {
start: 0.1,
end: 0.5,
},
meta: { value: { alias: '月累计湿润时间（h）' } },
});
bar.render();
};
defineExpose({ setDate });
</script>

115
src/components/realtime-data.vue
View File

@ -0,0 +1,115 @@
<template>
<el-card class="box-card">
<el-empty description="暂无数据" v-if="noData"></el-empty>
<div id="realtimeContainer"></div>
</el-card>
</template>
<script setup>
import { onMounted, ref, defineExpose } from 'vue';
import { Line } from '@antv/g2plot';
const show = ref(false);
const noData = ref(true);
let bar = null;
// 设置图表
onMounted(() => {
show.value = true;
noData.value = false;
});
// 设置图表
const setDate = data => {
noData.value = false;
if (bar) {
bar.destroy();
}
bar = new Line('realtimeContainer', {
data,
padding: 'auto',
xField: 'time',
yField: 'value',
seriesField: 'category',
slider: {
start: 0.1,
end: 0.2,
},
height: 700,
// smooth: true,
point: {
size: 2,
shape: 'circular',
style: {
fill: 'white',
lineWidth: 2,
},
},
});
bar.render();
};
// 处理数据
const changeDate = value => {
if (!value.length) return;
const arr = [];
value.forEach(element => {
const item = { ...element };
const so2Item = { category: 'SO2' };
const saltItem = { category: '盐分' };
const environmentTemperatureItem = { category: '环温' };
const environmentHumidityItem = { category: '环湿' };
const deviceTemperatureItem = { category: '机温' };
const deviceHumidityItem = { category: '机湿' };
const corrosion1Item = { category: '腐流1' };
const corrosion2Item = { category: '腐流2' };
const corrosion3Item = { category: '腐流3' };
const corrosion4Item = { category: '腐流4' };
so2Item.time = item.time;
so2Item.value = item.so2;
arr.push(so2Item);
saltItem.time = item.time;
saltItem.value = item.salt;
arr.push(saltItem);
environmentTemperatureItem.time = item.time;
environmentTemperatureItem.value = item.environmentTemperature;
arr.push(environmentTemperatureItem);
environmentHumidityItem.time = item.time;
environmentHumidityItem.value = item.environmentHumidity;
arr.push(environmentHumidityItem);
deviceTemperatureItem.time = item.time;
deviceTemperatureItem.value = item.deviceTemperature;
arr.push(deviceTemperatureItem);
deviceHumidityItem.time = item.time;
deviceHumidityItem.value = item.deviceHumidity;
arr.push(deviceHumidityItem);
corrosion1Item.time = item.time;
corrosion1Item.value = item.corrosion1;
arr.push(corrosion1Item);
corrosion2Item.time = item.time;
corrosion2Item.value = item.corrosion2;
arr.push(corrosion2Item);
corrosion3Item.time = item.time;
corrosion3Item.value = item.corrosion3;
arr.push(corrosion3Item);
corrosion4Item.time = item.time;
corrosion4Item.value = item.corrosion4;
arr.push(corrosion4Item);
});
setDate(arr);
};
defineExpose({ changeDate });
</script>

52
src/components/total-corrosion.vue
View File

@ -0,0 +1,52 @@
<template>
<el-card class="box-card">
<div class="text-sm">月累计腐蚀（g/m²）</div>
<el-empty description="暂无数据" v-if="noData"></el-empty>
<div id="corrosionContainer"></div>
</el-card>
</template>
<script setup>
import { onMounted, ref, defineExpose } from 'vue';
import { Column } from '@antv/g2plot';
const show = ref(false);
const noData = ref(true);
let bar = null;
// 设置图表
onMounted(() => {
show.value = true;
});
const setDate = data => {
noData.value = false;
if (bar) {
bar.destroy();
}
bar = new Column('corrosionContainer', {
data,
layout: 'vertical',
xField: 'time',
yField: 'value',
padding: [30, 16, 60, 50],
color: '#70B603',
columnWidthRatio: 0.6, // 宽度占比
yAxis: {
title: {
text: '月累计腐蚀',
spacing: 20,
},
},
slider: {
start: 0.1,
end: 0.5,
},
meta: { value: { alias: '月累计腐蚀（g/m²）' } },
});
bar.render();
};
defineExpose({ setDate });
</script>

18
src/routers/index.js
View File

@ -32,12 +32,30 @@ export const routes = [
meta: { title: '历史数据查看', icon: 'el-icon-data-line' },
component: () => import('@/views/data-history.vue'),
},
{
path: '/statistical-realtime',
name: 'statistical-realtime',
meta: { title: '实时数据统计' },
component: () => import('@/views/statistical-realtime.vue'),
},
{
path: '/statistical-history',
name: 'statistical-history',
meta: { title: '历史数据统计' },
component: () => import('@/views/statistical-history.vue'),
},
{
path: '/months',
name: 'months',
meta: { title: '月累计数据分析', icon: 'el-icon-data-analysis' },
component: () => import('@/views/month-data.vue'),
},
{
path: '/test',
name: 'test',
meta: { title: '测试' },
component: () => import('@/views/test.vue'),
},
];
const router = createRouter({

40
src/store/statistics.js
View File

@ -1,4 +1,4 @@
import { getIntegralElectric, getTotalCorrosion, getMoistTime } from 'apis/index';
import { getMonthesDate, getRealtimeData } from 'apis/index';
export default {
namespaced: true,
@ -7,6 +7,7 @@ export default {
electricData: null,
corrosionData: null,
moistTimeData: null,
realtimeData: null,
},
getters: {},
@ -18,7 +19,6 @@ export default {
* @param {array} data
*/
setElectricData(state, data) {
console.log('data: ', data);
state.electricData = data;
},
@ -39,36 +39,36 @@ export default {
setMoistTimeData(state, data) {
state.moistTimeData = data;
},
/**
* 设置实时数据统计的数据
* @param {*} state
* @param {*} data
*/
setRealtimeData(state, data) {
state.realtimeData = data;
},
},
actions: {
// 获取积分电量数据
async getElectricData({ commit }) {
try {
const data = await getIntegralElectric();
commit('setElectricData', data || null);
return data;
} catch (error) {
throw new Error(error);
}
},
// 获取月累计腐蚀数据
async getCorrosionData({ commit }) {
async getMonthesDate({ commit }, params) {
try {
const data = await getTotalCorrosion();
commit('setCorrosionData', data || null);
const data = await getMonthesDate(params);
commit('setElectricData', data.powers || null);
commit('setCorrosionData', data.corrosions || null);
commit('setMoistTimeData', data.humids || null);
return data;
} catch (error) {
throw new Error(error);
}
},
// 获取月累计湿润时间图数据
async getMoistTimeData({ commit }) {
// 获取实时数据统计数据
async getRealtimeData({ commit }, params) {
try {
const data = await getMoistTime();
commit('setMoistTimeData', data || null);
const data = await getRealtimeData(params);
commit('setRealtimeData', data || null);
return data;
} catch (error) {
throw new Error(error);

47
src/views/month-data.vue
View File

@ -1,9 +1,50 @@
<template>
<SearchBar />
<IntegralElectric />
<DataSearchBar @getDate="getDate" />
<IntegralElectric ref="child1" class="mt-4" />
<TotalCorrosion ref="child2" class="mt-4" />
<MoistTime ref="child3" class="mt-4" />
</template>
<script setup>
import SearchBar from 'components/search-bar.vue';
import DataSearchBar from 'components/data-search-bar.vue';
import IntegralElectric from 'components/integral-electric.vue';
import TotalCorrosion from 'components/total-corrosion.vue';
import MoistTime from 'components/moist-time.vue';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
const child1 = ref(null);
const child2 = ref(null);
const child3 = ref(null);
let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const electricData = computed(() => store.state.statistics.electricData);
const corrosionData = computed(() => store.state.statistics.corrosionData);
const moistTimeData = computed(() => store.state.statistics.moistTimeData);
// 获取月累计数据
const getDate = async options => {
if (token) {
const params = {
deviceId: options && options.deviceId ? options.deviceId : '', // 站点 设备id
date: options && options.date && options.date.length ? options.date : [], // 年月时间段
sort: 1, // 1 -> 按时间正序 -1->按时间倒序
};
await store.dispatch('statistics/getMonthesDate', params);
timer && clearTimeout(timer);
timer = null;
// 渲染图表
child1.value.setDate(electricData.value);
child2.value.setDate(corrosionData.value);
child3.value.setDate(moistTimeData.value);
} else {
timer = setTimeout(() => {
getDate();
});
}
};
getDate();
</script>

41
src/views/statistical-history.vue
View File

@ -0,0 +1,41 @@
<template>
<DataSearchBar @getDate="getDate" />
<HistoryData ref="childRef" class="mt-4" />
</template>
<script setup>
import DataSearchBar from 'components/data-search-bar.vue';
import HistoryData from 'components/history-data.vue';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
const childRef = ref(null);
let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const realtimeData = computed(() => store.state.statistics.realtimeData);
// 实时数据统计
const getDate = async options => {
if (token) {
const params = {
deviceId: options && options.deviceId ? options.deviceId : '', // 站点 设备id
date: options && options.date && options.date.length ? options.date : [], // 年月时间段
sort: 1, // 1 -> 按时间正序 -1->按时间倒序
page: 1, // 第几页
size: 10, // 每页多少条
};
await store.dispatch('statistics/getRealtimeData', params);
timer && clearTimeout(timer);
timer = null;
childRef.value.changeDate(realtimeData.value);
} else {
timer = setTimeout(() => {
getDate();
});
}
};
getDate();
</script>

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

@ -0,0 +1,41 @@
<template>
<DataSearchBar @getDate="getDate" />
<RealtimeData ref="childRef" class="mt-4" />
</template>
<script setup>
import DataSearchBar from 'components/data-search-bar.vue';
import RealtimeData from 'components/realtime-data.vue';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
const childRef = ref(null);
let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const realtimeData = computed(() => store.state.statistics.realtimeData);
// 实时数据统计
const getDate = async options => {
if (token) {
const params = {
deviceId: options && options.deviceId ? options.deviceId : '', // 站点 设备id
date: options && options.date && options.date.length ? options.date : [], // 年月时间段
sort: 1, // 1 -> 按时间正序 -1->按时间倒序
page: 1, // 第几页
size: 10, // 每页多少条
};
await store.dispatch('statistics/getRealtimeData', params);
timer && clearTimeout(timer);
timer = null;
childRef.value.changeDate(realtimeData.value);
} else {
timer = setTimeout(() => {
getDate();
});
}
};
getDate();
</script>
Write Preview
Loading…
Cancel
Save