|
|
@@ -177,291 +177,291 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
- import { ref, defineComponent, watch, reactive, onMounted, watchEffect, inject } from 'vue';
|
|
|
- import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
- import dayjs from 'dayjs';
|
|
|
- import { defHttp } from '/@/utils/http/axios';
|
|
|
- import { Select, Pagination } from 'ant-design-vue';
|
|
|
+import { ref, defineComponent, watch, reactive, onMounted, watchEffect, inject } from 'vue';
|
|
|
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import { defHttp } from '/@/utils/http/axios';
|
|
|
+import { Select, Pagination } from 'ant-design-vue';
|
|
|
|
|
|
- export default defineComponent({
|
|
|
- name: 'DeviceEcharts',
|
|
|
- components: { BarAndLine, Select, Pagination },
|
|
|
- props: {
|
|
|
- fan1ChartsColumns: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
+export default defineComponent({
|
|
|
+ name: 'DeviceEcharts',
|
|
|
+ components: { BarAndLine, Select, Pagination },
|
|
|
+ props: {
|
|
|
+ fan1ChartsColumns: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ fan2ChartsColumns: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ chartsColumnsHistory: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ chartsColumnsType: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ dataSource: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ deviceListApi: {
|
|
|
+ type: Function,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ deviceType: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ option: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+ xAxisPropType: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const globalConfig = inject('globalConfig');
|
|
|
+ let historyList;
|
|
|
+ const chartsType = ref('history');
|
|
|
+ const deviceId = ref('');
|
|
|
+ const options = ref([]);
|
|
|
+ const historyParams = reactive({
|
|
|
+ ttime_begin: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ ttime_end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ skip: '8',
|
|
|
+ startTime: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ interval: '1h',
|
|
|
+ });
|
|
|
+ const resultXAxisPropType = ref('');
|
|
|
+ const resultDataSource = ref<any[]>([]);
|
|
|
+ const detailDataSource = ref<any[]>([]);
|
|
|
+ const currentPage = ref<number>(1);
|
|
|
+ const pageSize = ref<number>(20);
|
|
|
+ const total = ref(0);
|
|
|
+
|
|
|
+ const echartsOption = {
|
|
|
+ grid: {
|
|
|
+ top: '50px',
|
|
|
+ left: '10px',
|
|
|
+ right: props.fan1ChartsColumns.length * 15 + 'px',
|
|
|
+ bottom: '15px',
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- fan2ChartsColumns: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
+ toolbox: {
|
|
|
+ feature: {},
|
|
|
},
|
|
|
- chartsColumnsHistory: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
+ xAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ },
|
|
|
},
|
|
|
- chartsColumnsType: {
|
|
|
- type: String,
|
|
|
- required: true,
|
|
|
+ };
|
|
|
+ const echartsOption1 = {
|
|
|
+ grid: {
|
|
|
+ top: '60px',
|
|
|
+ left: '10px',
|
|
|
+ right: props.fan1ChartsColumns.length * 15 + 'px',
|
|
|
+ bottom: '35px',
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- dataSource: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
+ toolbox: {
|
|
|
+ feature: {},
|
|
|
},
|
|
|
- deviceListApi: {
|
|
|
- type: Function,
|
|
|
- required: true,
|
|
|
+ legend: {
|
|
|
+ top: 30,
|
|
|
},
|
|
|
- deviceType: {
|
|
|
- type: String,
|
|
|
- required: true,
|
|
|
+ xAxis: {
|
|
|
+ interval: 0,
|
|
|
},
|
|
|
- option: {
|
|
|
- type: Object,
|
|
|
- default: () => ({}),
|
|
|
+ };
|
|
|
+ const echartsOption2 = {
|
|
|
+ grid: {
|
|
|
+ top: '70px',
|
|
|
+ left: '10px',
|
|
|
+ right: props.fan1ChartsColumns.length * 15 + 'px',
|
|
|
+ bottom: '5px',
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- xAxisPropType: {
|
|
|
- type: String,
|
|
|
- required: true,
|
|
|
+ toolbox: {
|
|
|
+ feature: {},
|
|
|
},
|
|
|
- },
|
|
|
- setup(props) {
|
|
|
- const globalConfig = inject('globalConfig');
|
|
|
- let historyList;
|
|
|
- const chartsType = ref('history');
|
|
|
- const deviceId = ref('');
|
|
|
- const options = ref([]);
|
|
|
- const historyParams = reactive({
|
|
|
- ttime_begin: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- ttime_end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- skip: '8',
|
|
|
- startTime: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- interval: '1h',
|
|
|
- });
|
|
|
- const resultXAxisPropType = ref('');
|
|
|
- const resultDataSource = ref<any[]>([]);
|
|
|
- const detailDataSource = ref<any[]>([]);
|
|
|
- const currentPage = ref<number>(1);
|
|
|
- const pageSize = ref<number>(20);
|
|
|
- const total = ref(0);
|
|
|
-
|
|
|
- const echartsOption = {
|
|
|
- grid: {
|
|
|
- top: '50px',
|
|
|
- left: '10px',
|
|
|
- right: props.fan1ChartsColumns.length * 15 + 'px',
|
|
|
- bottom: '15px',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {},
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
- const echartsOption1 = {
|
|
|
- grid: {
|
|
|
- top: '60px',
|
|
|
- left: '10px',
|
|
|
- right: props.fan1ChartsColumns.length * 15 + 'px',
|
|
|
- bottom: '35px',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {},
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: 40,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- interval: 0,
|
|
|
- },
|
|
|
- };
|
|
|
- const echartsOption2 = {
|
|
|
- grid: {
|
|
|
- top: '70px',
|
|
|
- left: '10px',
|
|
|
- right: props.fan1ChartsColumns.length * 15 + 'px',
|
|
|
- bottom: '5px',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {},
|
|
|
- },
|
|
|
- };
|
|
|
+ };
|
|
|
|
|
|
- const onChange = (pageNumber: number) => {
|
|
|
- console.log('Page: ', pageNumber);
|
|
|
- };
|
|
|
+ const onChange = (pageNumber: number) => {
|
|
|
+ console.log('Page: ', pageNumber);
|
|
|
+ };
|
|
|
|
|
|
- watch(
|
|
|
- [chartsType, deviceId, historyParams, pageSize, currentPage],
|
|
|
- async (
|
|
|
- [newChartsType, newDeviceId, newHistoryParams, newPageSize, newCurrentPage],
|
|
|
- [oldChartsType, oldDeviceId, oldHistoryParams, oldPageSize, oldCurrentPage]
|
|
|
- ) => {
|
|
|
- console.log('[ historyParams ] >', historyParams.ttime, dayjs(historyParams.ttime).format('HH:mm:ss'));
|
|
|
- if (newChartsType === 'listMonitor') {
|
|
|
- // 实时监测所有
|
|
|
- resultDataSource.value = props.dataSource;
|
|
|
- } else if (newChartsType === 'history') {
|
|
|
- resultDataSource.value = [];
|
|
|
- // 历史
|
|
|
- if (newChartsType !== oldChartsType || newDeviceId !== oldDeviceId) {
|
|
|
- currentPage.value = 1;
|
|
|
- }
|
|
|
- const device = options.value.find((device) => device['deviceID'] === newDeviceId);
|
|
|
- if (device) {
|
|
|
- let res;
|
|
|
- if (props.dataSource['stationtype'] !== 'redis') {
|
|
|
- resultXAxisPropType.value = 'ttime';
|
|
|
- historyList = (params) => defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params });
|
|
|
- const datas = await historyList({
|
|
|
- ttime_begin: newHistoryParams.ttime_begin,
|
|
|
- ttime_end: newHistoryParams.ttime_end,
|
|
|
- strtype: device.deviceType,
|
|
|
- gdeviceid: newDeviceId,
|
|
|
- skip: historyParams.skip,
|
|
|
- pageSize: pageSize.value,
|
|
|
- pageNo: currentPage.value,
|
|
|
- column: 'createTime',
|
|
|
- });
|
|
|
- res = datas['datalist']['records'];
|
|
|
- if (res && res.length > 0) {
|
|
|
- resultDataSource.value = res.map((item) => Object.assign(item, item.readData));
|
|
|
- } else {
|
|
|
- resultDataSource.value = [];
|
|
|
- }
|
|
|
- total.value = datas['datalist'].total;
|
|
|
+ watch(
|
|
|
+ [chartsType, deviceId, historyParams, pageSize, currentPage],
|
|
|
+ async (
|
|
|
+ [newChartsType, newDeviceId, newHistoryParams, newPageSize, newCurrentPage],
|
|
|
+ [oldChartsType, oldDeviceId, oldHistoryParams, oldPageSize, oldCurrentPage]
|
|
|
+ ) => {
|
|
|
+ console.log('[ historyParams ] >', historyParams.ttime, dayjs(historyParams.ttime).format('HH:mm:ss'));
|
|
|
+ if (newChartsType === 'listMonitor') {
|
|
|
+ // 实时监测所有
|
|
|
+ resultDataSource.value = props.dataSource;
|
|
|
+ } else if (newChartsType === 'history') {
|
|
|
+ resultDataSource.value = [];
|
|
|
+ // 历史
|
|
|
+ if (newChartsType !== oldChartsType || newDeviceId !== oldDeviceId) {
|
|
|
+ currentPage.value = 1;
|
|
|
+ }
|
|
|
+ const device = options.value.find((device) => device['deviceID'] === newDeviceId);
|
|
|
+ if (device) {
|
|
|
+ let res;
|
|
|
+ if (props.dataSource['stationtype'] !== 'redis') {
|
|
|
+ resultXAxisPropType.value = 'ttime';
|
|
|
+ historyList = (params) => defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params });
|
|
|
+ const datas = await historyList({
|
|
|
+ ttime_begin: newHistoryParams.ttime_begin,
|
|
|
+ ttime_end: newHistoryParams.ttime_end,
|
|
|
+ strtype: device.deviceType,
|
|
|
+ gdeviceid: newDeviceId,
|
|
|
+ skip: historyParams.skip,
|
|
|
+ pageSize: pageSize.value,
|
|
|
+ pageNo: currentPage.value,
|
|
|
+ column: 'createTime',
|
|
|
+ });
|
|
|
+ res = datas['datalist']['records'];
|
|
|
+ if (res && res.length > 0) {
|
|
|
+ resultDataSource.value = res.map((item) => Object.assign(item, item.readData));
|
|
|
} else {
|
|
|
- historyList = (params) => defHttp.post({ url: '/monitor/history/getHistoryData', params });
|
|
|
- resultXAxisPropType.value = 'time';
|
|
|
- res = await historyList({
|
|
|
- pageSize: pageSize.value,
|
|
|
- pageNum: currentPage.value,
|
|
|
- startTime: newHistoryParams.ttime_begin,
|
|
|
- endTime: newHistoryParams.ttime_end,
|
|
|
- deviceId: newDeviceId,
|
|
|
- strtype: device.deviceType,
|
|
|
- interval: historyParams.interval,
|
|
|
- column: 'createTime',
|
|
|
- });
|
|
|
- if (res && res.records && res.records.length > 0) {
|
|
|
- resultDataSource.value = res.records.map((item) => Object.assign(item, item.readData));
|
|
|
- } else {
|
|
|
- resultDataSource.value = [];
|
|
|
- }
|
|
|
- total.value = res.total;
|
|
|
+ resultDataSource.value = [];
|
|
|
}
|
|
|
- }
|
|
|
- } else if (newChartsType === 'detail') {
|
|
|
- // 设备详情
|
|
|
- resultXAxisPropType.value = 'readTime';
|
|
|
- if (newDeviceId !== oldDeviceId) {
|
|
|
- detailDataSource.value = [];
|
|
|
+ total.value = datas['datalist'].total;
|
|
|
+ } else {
|
|
|
+ historyList = (params) => defHttp.post({ url: '/monitor/history/getHistoryData', params });
|
|
|
+ resultXAxisPropType.value = 'time';
|
|
|
+ res = await historyList({
|
|
|
+ pageSize: pageSize.value,
|
|
|
+ pageNum: currentPage.value,
|
|
|
+ startTime: newHistoryParams.ttime_begin,
|
|
|
+ endTime: newHistoryParams.ttime_end,
|
|
|
+ deviceId: newDeviceId,
|
|
|
+ strtype: device.deviceType,
|
|
|
+ interval: historyParams.interval,
|
|
|
+ column: 'createTime',
|
|
|
+ });
|
|
|
+ if (res && res.records && res.records.length > 0) {
|
|
|
+ resultDataSource.value = res.records.map((item) => Object.assign(item, item.readData));
|
|
|
+ } else {
|
|
|
+ resultDataSource.value = [];
|
|
|
+ }
|
|
|
+ total.value = res.total;
|
|
|
}
|
|
|
}
|
|
|
+ } else if (newChartsType === 'detail') {
|
|
|
+ // 设备详情
|
|
|
+ resultXAxisPropType.value = 'readTime';
|
|
|
+ if (newDeviceId !== oldDeviceId) {
|
|
|
+ detailDataSource.value = [];
|
|
|
+ }
|
|
|
}
|
|
|
- );
|
|
|
- watchEffect(() => {
|
|
|
- if (chartsType.value === 'detail') {
|
|
|
- const currentData = props.dataSource.find((item: any) => item.deviceID === deviceId.value);
|
|
|
- if (currentData) {
|
|
|
- const isHas = detailDataSource.value.find((item) => item[resultXAxisPropType.value] === currentData[resultXAxisPropType.value]);
|
|
|
- if (!isHas) {
|
|
|
- if (detailDataSource.value.length < 15) {
|
|
|
- detailDataSource.value.push(currentData);
|
|
|
- } else {
|
|
|
- detailDataSource.value.shift();
|
|
|
- detailDataSource.value.push(currentData);
|
|
|
- }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ watchEffect(() => {
|
|
|
+ if (chartsType.value === 'detail') {
|
|
|
+ const currentData = props.dataSource.find((item: any) => item.deviceID === deviceId.value);
|
|
|
+ if (currentData) {
|
|
|
+ const isHas = detailDataSource.value.find((item) => item[resultXAxisPropType.value] === currentData[resultXAxisPropType.value]);
|
|
|
+ if (!isHas) {
|
|
|
+ if (detailDataSource.value.length < 15) {
|
|
|
+ detailDataSource.value.push(currentData);
|
|
|
+ } else {
|
|
|
+ detailDataSource.value.shift();
|
|
|
+ detailDataSource.value.push(currentData);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- });
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- onMounted(async () => {
|
|
|
- const res = await props.deviceListApi();
|
|
|
- // debugger;
|
|
|
- if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
|
|
|
- options.value = res['msgTxt'][0]['datalist'];
|
|
|
- deviceId.value = options.value[0]['deviceID'];
|
|
|
- }
|
|
|
- });
|
|
|
+ onMounted(async () => {
|
|
|
+ const res = await props.deviceListApi();
|
|
|
+ // debugger;
|
|
|
+ if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
|
|
|
+ options.value = res['msgTxt'][0]['datalist'];
|
|
|
+ deviceId.value = options.value[0]['deviceID'];
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- return {
|
|
|
- chartsType,
|
|
|
- deviceId,
|
|
|
- resultDataSource,
|
|
|
- historyParams,
|
|
|
- options,
|
|
|
- resultXAxisPropType,
|
|
|
- detailDataSource,
|
|
|
- currentPage,
|
|
|
- pageSize,
|
|
|
- total,
|
|
|
- echartsOption,
|
|
|
- echartsOption1,
|
|
|
- echartsOption2,
|
|
|
- onChange,
|
|
|
- globalConfig,
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
+ return {
|
|
|
+ chartsType,
|
|
|
+ deviceId,
|
|
|
+ resultDataSource,
|
|
|
+ historyParams,
|
|
|
+ options,
|
|
|
+ resultXAxisPropType,
|
|
|
+ detailDataSource,
|
|
|
+ currentPage,
|
|
|
+ pageSize,
|
|
|
+ total,
|
|
|
+ echartsOption,
|
|
|
+ echartsOption1,
|
|
|
+ echartsOption2,
|
|
|
+ onChange,
|
|
|
+ globalConfig,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
- :deep(.vent-select-dropdown) {
|
|
|
+:deep(.vent-select-dropdown) {
|
|
|
+ color: #000 !important;
|
|
|
+ .vent-select-item {
|
|
|
color: #000 !important;
|
|
|
- .vent-select-item {
|
|
|
- color: #000 !important;
|
|
|
- }
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="less" scoped>
|
|
|
- @import '/@/design/theme.less';
|
|
|
- .charts-container {
|
|
|
- position: relative;
|
|
|
+@import '/@/design/theme.less';
|
|
|
+.charts-container {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ .charts-box {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- .charts-box {
|
|
|
- width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0px;
|
|
|
+ .echarts-group {
|
|
|
height: 100%;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- top: 0px;
|
|
|
- .echarts-group {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- :deep(div) {
|
|
|
- border-right: 1px solid #ffffff22 !important;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ :deep(div) {
|
|
|
+ border-right: 1px solid #ffffff22 !important;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .@{ventSpace}-picker,
|
|
|
- .@{ventSpace}-select-selector {
|
|
|
- background: #00000017 !important;
|
|
|
- border: 1px solid @vent-form-item-border !important;
|
|
|
- input,
|
|
|
- .@{ventSpace}-select-selection-item,
|
|
|
- .@{ventSpace}-picker-suffix {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- .@{ventSpace}-select-selection-placeholder {
|
|
|
- color: #b7b7b7 !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .@{ventSpace}-select-arrow,
|
|
|
- .@{ventSpace}-picker-separator {
|
|
|
+ .@{ventSpace}-picker,
|
|
|
+ .@{ventSpace}-select-selector {
|
|
|
+ background: #00000017 !important;
|
|
|
+ border: 1px solid @vent-form-item-border !important;
|
|
|
+ input,
|
|
|
+ .@{ventSpace}-select-selection-item,
|
|
|
+ .@{ventSpace}-picker-suffix {
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
+ .@{ventSpace}-select-selection-placeholder {
|
|
|
+ color: #b7b7b7 !important;
|
|
|
+ }
|
|
|
}
|
|
|
- :deep(.@{ventSpace}-select-dropdown) {
|
|
|
+ .@{ventSpace}-select-arrow,
|
|
|
+ .@{ventSpace}-picker-separator {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.@{ventSpace}-select-dropdown) {
|
|
|
+ color: #000 !important;
|
|
|
+ .@{ventSpace}-select-item {
|
|
|
color: #000 !important;
|
|
|
- .@{ventSpace}-select-item {
|
|
|
- color: #000 !important;
|
|
|
- }
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
hongrunxia