fuguobin
10 months ago
23 changed files with 3277 additions and 1444 deletions
@ -0,0 +1,76 @@ |
|||
import request from '@/utils/request'; |
|||
import { AxiosPromise } from 'axios'; |
|||
import { weatherVo } from './types'; |
|||
|
|||
/** |
|||
* 获取热源列表 |
|||
*/ |
|||
export function getDeptList(data: any) { |
|||
return request({ |
|||
url: '/system/dept/selectList', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
/** |
|||
* 获取图表数据 |
|||
*/ |
|||
export function getrealTime(queryParams: any) { |
|||
return request({ |
|||
url: 'dc/heatSourceScreen/heatSource/realTime/data', |
|||
method: 'get', |
|||
params: queryParams |
|||
}); |
|||
} |
|||
/** |
|||
* 温度曲线 |
|||
*/ |
|||
export function getTempChart(queryParams: any) { |
|||
return request({ |
|||
url: '/dc/heatSourceScreen/heatExchangeStation/temperature/history/Data', |
|||
method: 'get', |
|||
params: queryParams |
|||
}); |
|||
} |
|||
/** |
|||
* 温度曲线 |
|||
*/ |
|||
export function getTempChartPolling(queryParams: any) { |
|||
return request({ |
|||
url: '/dc/heatSourceScreen/heatExchangeStation/temperature/realTime/data', |
|||
method: 'get', |
|||
params: queryParams |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 压力曲线 |
|||
*/ |
|||
export function getPressChart(queryParams: any) { |
|||
return request({ |
|||
url: '/dc/heatSourceScreen/heatExchangeStation/stress/history/data', |
|||
method: 'get', |
|||
params: queryParams |
|||
}); |
|||
} |
|||
/** |
|||
* 压力曲线 |
|||
*/ |
|||
export function getPressChartPolling(queryParams: any) { |
|||
return request({ |
|||
url: '/dc/heatSourceScreen/heatExchangeStation/stress/realTime/data', |
|||
method: 'get', |
|||
params: queryParams |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 获取换热站Table列表 |
|||
*/ |
|||
export function getTableData(data: any) { |
|||
return request({ |
|||
url: '/dc/heatSourceScreen/heatSource/table/data', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
/** |
|||
* 天气参数 |
|||
*/ |
|||
export interface weatherVo { |
|||
date: string; |
|||
tem_day: string; |
|||
tem_night: string; |
|||
wea: string; |
|||
wea_img: string; |
|||
win: string; |
|||
win_speed: string; |
|||
} |
|||
|
|||
/** |
|||
* 水消耗参数 |
|||
*/ |
|||
export interface waterVo { |
|||
field1: number; |
|||
field2: number; |
|||
field3: number; |
|||
name: string; |
|||
} |
|||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 15 KiB |
File diff suppressed because it is too large
@ -0,0 +1,708 @@ |
|||
<template> |
|||
<div class="hxTempInfo"> |
|||
<div ref="hxTempRef" id="hxTempEchart" class="hxTempEchart">暂无数据</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import * as echarts from 'echarts'; |
|||
import { Ref } from 'vue'; |
|||
import useCounter from '@/store/modules/date'; |
|||
import { useDateFormat } from '@vueuse/core'; |
|||
import { getTempChart, getTempChartPolling } from '@/api/dataVisual/index'; |
|||
import { debounce } from '@/utils/index'; |
|||
import { seriesVo, mainInfoVo } from '@/api/device/types'; |
|||
const counterStore = useCounter(); |
|||
const yearMonthDay = ref(); |
|||
const hxTempRef: Ref<HTMLElement | any> = ref(null); |
|||
const mapEcharts = ref(); |
|||
const currentEndTime = ref(); |
|||
const timer = ref(); |
|||
const isCurrentRoute = ref(true); |
|||
const mainInfoList = ref<mainInfoVo[]>(); |
|||
const deviceUuid = ref(); |
|||
|
|||
// const dataData = { |
|||
// mainInfos: [ |
|||
// { |
|||
// name: '一次网回温(低区)', |
|||
// paramUnit: '°C', |
|||
// index: 0, |
|||
// average: 33.43, |
|||
// data: [ |
|||
// ['2024-02-07 00:00:01', 30.88], |
|||
// ['2024-02-07 00:05:01', 30.69], |
|||
// ['2024-02-07 00:10:01', 30.51], |
|||
// ['2024-02-07 00:15:01', 30.31], |
|||
// ['2024-02-07 00:20:01', 30.12], |
|||
// ['2024-02-07 00:25:01', 29.96], |
|||
// ['2024-02-07 00:30:01', 29.81], |
|||
// ['2024-02-07 00:35:01', 29.66], |
|||
// ['2024-02-07 00:40:01', 29.51], |
|||
// ['2024-02-07 00:45:01', 29.38], |
|||
// ['2024-02-07 00:50:01', 29.28], |
|||
// ['2024-02-07 00:55:01', 29.18], |
|||
// ['2024-02-07 01:00:01', 29.07], |
|||
// ['2024-02-07 01:05:01', 28.99], |
|||
// ['2024-02-07 01:10:01', 28.89], |
|||
// ['2024-02-07 01:15:01', 28.8], |
|||
// ['2024-02-07 01:20:01', 28.68], |
|||
// ['2024-02-07 01:25:01', 28.54], |
|||
// ['2024-02-07 01:30:01', 28.41], |
|||
// ['2024-02-07 01:35:01', 28.26], |
|||
// ['2024-02-07 01:40:01', 28.09], |
|||
// ['2024-02-07 01:45:01', 27.89], |
|||
// ['2024-02-07 01:50:01', 27.68], |
|||
// ['2024-02-07 01:55:01', 27.38], |
|||
// ['2024-02-07 02:00:01', 27.19], |
|||
// ['2024-02-07 02:05:01', 27.13], |
|||
// ['2024-02-07 02:10:01', 27.16], |
|||
// ['2024-02-07 02:15:01', 27.24], |
|||
// ['2024-02-07 02:20:01', 27.33], |
|||
// ['2024-02-07 02:25:01', 27.41], |
|||
// ['2024-02-07 02:30:01', 27.48], |
|||
// ['2024-02-07 02:35:01', 27.53], |
|||
// ['2024-02-07 02:40:01', 27.52], |
|||
// ['2024-02-07 02:45:01', 27.52], |
|||
// ['2024-02-07 02:50:01', 27.47], |
|||
// ['2024-02-07 02:55:01', 27.45], |
|||
// ['2024-02-07 03:00:01', 27.38], |
|||
// ['2024-02-07 03:05:01', 27.28], |
|||
// ['2024-02-07 03:10:01', 27.2], |
|||
// ['2024-02-07 03:15:01', 27.11], |
|||
// ['2024-02-07 03:20:01', 27.01], |
|||
// ['2024-02-07 03:25:01', 26.98], |
|||
// ['2024-02-07 03:30:01', 27.02], |
|||
// ['2024-02-07 03:35:01', 27.28], |
|||
// ['2024-02-07 03:40:01', 28.03], |
|||
// ['2024-02-07 03:45:01', 37.96], |
|||
// ['2024-02-07 03:50:01', 31.84], |
|||
// ['2024-02-07 03:55:01', 30.32], |
|||
// ['2024-02-07 04:00:01', 30.46], |
|||
// ['2024-02-07 04:05:01', 31.73], |
|||
// ['2024-02-07 04:10:01', 32.63], |
|||
// ['2024-02-07 04:15:01', 33.05], |
|||
// ['2024-02-07 04:20:01', 33.5], |
|||
// ['2024-02-07 04:25:01', 34.03], |
|||
// ['2024-02-07 04:30:01', 34.43], |
|||
// ['2024-02-07 04:35:01', 34.55], |
|||
// ['2024-02-07 04:40:01', 34.89], |
|||
// ['2024-02-07 04:45:01', 35.51], |
|||
// ['2024-02-07 04:50:01', 36.1], |
|||
// ['2024-02-07 04:55:01', 36.53], |
|||
// ['2024-02-07 05:00:01', 36.99], |
|||
// ['2024-02-07 05:05:01', 37.41], |
|||
// ['2024-02-07 05:10:01', 37.8], |
|||
// ['2024-02-07 05:15:01', 37.98], |
|||
// ['2024-02-07 05:20:01', 37.94], |
|||
// ['2024-02-07 05:25:01', 38.17], |
|||
// ['2024-02-07 05:30:01', 38.65], |
|||
// ['2024-02-07 05:35:01', 39.09], |
|||
// ['2024-02-07 05:40:01', 39.35], |
|||
// ['2024-02-07 05:45:01', 39.67], |
|||
// ['2024-02-07 05:50:01', 40.06], |
|||
// ['2024-02-07 05:55:01', 40.41], |
|||
// ['2024-02-07 06:00:01', 40.62], |
|||
// ['2024-02-07 06:05:01', 40.73], |
|||
// ['2024-02-07 06:10:01', 40.89], |
|||
// ['2024-02-07 06:15:01', 41.15], |
|||
// ['2024-02-07 06:20:01', 41.58], |
|||
// ['2024-02-07 06:25:01', 41.74], |
|||
// ['2024-02-07 06:30:01', 41.78], |
|||
// ['2024-02-07 06:35:01', 41.82], |
|||
// ['2024-02-07 06:40:01', 41.76], |
|||
// ['2024-02-07 06:45:01', 41.63], |
|||
// ['2024-02-07 06:50:01', 41.69], |
|||
// ['2024-02-07 06:55:01', 41.96], |
|||
// ['2024-02-07 07:00:01', 42.44], |
|||
// ['2024-02-07 07:05:01', 42.81], |
|||
// ['2024-02-07 07:10:01', 43.06], |
|||
// ['2024-02-07 07:15:01', 43.34], |
|||
// ['2024-02-07 07:20:01', 43.66], |
|||
// ['2024-02-07 07:25:01', 43.86], |
|||
// ['2024-02-07 07:30:01', 43.95], |
|||
// ['2024-02-07 07:35:01', 43.95], |
|||
// ['2024-02-07 07:40:01', 43.84], |
|||
// ['2024-02-07 07:45:01', 44.03], |
|||
// ['2024-02-07 07:50:01', 44.24], |
|||
// ['2024-02-07 07:55:01', 44.45], |
|||
// ['2024-02-07 08:00:01', 44.64], |
|||
// ['2024-02-07 08:05:01', 44.81], |
|||
// ['2024-02-07 08:10:01', 44.94], |
|||
// ['2024-02-07 08:15:01', 44.97], |
|||
// ['2024-02-07 08:20:01', 44.76], |
|||
// ['2024-02-07 08:25:01', 44.87], |
|||
// ['2024-02-07 08:30:01', 45.21], |
|||
// ['2024-02-07 08:35:01', 45.33], |
|||
// ['2024-02-07 08:40:01', 44.92], |
|||
// ['2024-02-07 08:45:01', 44.8], |
|||
// ['2024-02-07 08:50:01', 44.18], |
|||
// ['2024-02-07 08:55:01', 43.08], |
|||
// ['2024-02-07 09:00:01', 42.06], |
|||
// ['2024-02-07 09:05:01', 41.12], |
|||
// ['2024-02-07 09:10:01', 40.26], |
|||
// ['2024-02-07 09:15:01', 39.5], |
|||
// ['2024-02-07 09:20:01', 38.81], |
|||
// ['2024-02-07 09:25:01', 38.1], |
|||
// ['2024-02-07 09:30:01', 37.25], |
|||
// ['2024-02-07 09:35:01', 36.81], |
|||
// ['2024-02-07 09:40:01', 36.45], |
|||
// ['2024-02-07 09:45:01', 0], |
|||
// ['2024-02-07 09:50:01', 0], |
|||
// ['2024-02-07 09:55:01', 36.34], |
|||
// ['2024-02-07 10:00:01', 36.17], |
|||
// ['2024-02-07 10:05:01', 35.85], |
|||
// ['2024-02-07 10:10:01', 35.25], |
|||
// ['2024-02-07 10:15:01', 34.91], |
|||
// ['2024-02-07 10:20:01', 34.23], |
|||
// ['2024-02-07 10:25:01', 33.33], |
|||
// ['2024-02-07 10:30:01', 32.84], |
|||
// ['2024-02-07 10:35:01', 32.55], |
|||
// ['2024-02-07 10:40:01', 32.33], |
|||
// ['2024-02-07 10:45:01', 32.15], |
|||
// ['2024-02-07 10:50:01', 32], |
|||
// ['2024-02-07 10:55:01', 31.87], |
|||
// ['2024-02-07 11:00:01', 31.76], |
|||
// ['2024-02-07 11:05:01', 31.66], |
|||
// ['2024-02-07 11:10:01', 31.55], |
|||
// ['2024-02-07 11:15:01', 31.43], |
|||
// ['2024-02-07 11:20:01', 31.29], |
|||
// ['2024-02-07 11:25:01', 31.14], |
|||
// ['2024-02-07 11:30:01', 30.98], |
|||
// ['2024-02-07 11:35:01', 30.8], |
|||
// ['2024-02-07 11:40:01', 30.63], |
|||
// ['2024-02-07 11:45:01', 30.46], |
|||
// ['2024-02-07 11:50:01', 30.3], |
|||
// ['2024-02-07 11:55:01', 30.16], |
|||
// ['2024-02-07 12:00:01', 30.02], |
|||
// ['2024-02-07 12:05:01', 29.91], |
|||
// ['2024-02-07 12:10:01', 29.81], |
|||
// ['2024-02-07 12:15:01', 29.75], |
|||
// ['2024-02-07 12:20:01', 29.65], |
|||
// ['2024-02-07 12:25:01', 29.54], |
|||
// ['2024-02-07 12:30:01', 29.43], |
|||
// ['2024-02-07 12:35:01', 29.33], |
|||
// ['2024-02-07 12:40:01', 29.18], |
|||
// ['2024-02-07 12:45:01', 29.03], |
|||
// ['2024-02-07 12:50:01', 28.88], |
|||
// ['2024-02-07 12:55:01', 28.78], |
|||
// ['2024-02-07 13:00:01', 28.74], |
|||
// ['2024-02-07 13:05:01', 28.75], |
|||
// ['2024-02-07 13:10:01', 28.8], |
|||
// ['2024-02-07 13:15:01', 28.89], |
|||
// ['2024-02-07 13:20:01', 28.97], |
|||
// ['2024-02-07 13:25:01', 29.07], |
|||
// ['2024-02-07 13:30:01', 29.11], |
|||
// ['2024-02-07 13:35:01', 29.15], |
|||
// ['2024-02-07 13:40:01', 29.15], |
|||
// ['2024-02-07 13:45:01', 29.13], |
|||
// ['2024-02-07 13:50:01', 29.09], |
|||
// ['2024-02-07 13:55:01', 28.99], |
|||
// ['2024-02-07 14:00:01', 28.92], |
|||
// ['2024-02-07 14:05:01', 28.84], |
|||
// ['2024-02-07 14:10:01', 28.73], |
|||
// ['2024-02-07 14:15:01', 28.6], |
|||
// ['2024-02-07 14:20:01', 28.52], |
|||
// ['2024-02-07 14:25:01', 28.42], |
|||
// ['2024-02-07 14:30:01', 28.35], |
|||
// ['2024-02-07 14:35:01', 28.27], |
|||
// ['2024-02-07 14:40:01', 28.19], |
|||
// ['2024-02-07 14:45:01', 28.14], |
|||
// ['2024-02-07 14:50:01', 28.08], |
|||
// ['2024-02-07 14:55:01', 28.03], |
|||
// ['2024-02-07 15:00:01', 27.96], |
|||
// ['2024-02-07 15:05:01', 27.92], |
|||
// ['2024-02-07 15:10:01', 27.89], |
|||
// ['2024-02-07 15:15:01', 27.85], |
|||
// ['2024-02-07 15:20:01', 27.92], |
|||
// ['2024-02-07 15:25:01', 28.38], |
|||
// ['2024-02-07 15:30:01', 29.35], |
|||
// ['2024-02-07 15:35:01', 35.52], |
|||
// ['2024-02-07 15:40:01', 30.86], |
|||
// ['2024-02-07 15:45:01', 29.91], |
|||
// ['2024-02-07 15:50:01', 30.42], |
|||
// ['2024-02-07 15:55:01', 31.63], |
|||
// ['2024-02-07 16:00:01', 32.6], |
|||
// ['2024-02-07 16:05:01', 33.18], |
|||
// ['2024-02-07 16:10:01', 33.6], |
|||
// ['2024-02-07 16:15:01', 34.23], |
|||
// ['2024-02-07 16:20:01', 34.53], |
|||
// ['2024-02-07 16:25:01', 34.66], |
|||
// ['2024-02-07 16:30:01', 35.01], |
|||
// ['2024-02-07 16:35:01', 35.65], |
|||
// ['2024-02-07 16:40:01', 36.22], |
|||
// ['2024-02-07 16:45:01', 36.62], |
|||
// ['2024-02-07 16:50:01', 37], |
|||
// ['2024-02-07 16:55:01', 37.48], |
|||
// ['2024-02-07 17:00:01', 38.03], |
|||
// ['2024-02-07 17:05:01', 38.24], |
|||
// ['2024-02-07 17:10:01', 38.43], |
|||
// ['2024-02-07 17:15:01', 38.62], |
|||
// ['2024-02-07 17:20:01', 38.91], |
|||
// ['2024-02-07 17:25:01', 39.38], |
|||
// ['2024-02-07 17:30:01', 39.82] |
|||
// ], |
|||
// min: 0, |
|||
// max: 0 |
|||
// }, |
|||
// { |
|||
// name: '一次网供温(低区)', |
|||
// paramUnit: '°C', |
|||
// index: 0, |
|||
// average: 47.31, |
|||
// data: [ |
|||
// ['2024-02-07 00:00:01', 41.87], |
|||
// ['2024-02-07 00:05:01', 42.12], |
|||
// ['2024-02-07 00:10:01', 42.35], |
|||
// ['2024-02-07 00:15:01', 42.6], |
|||
// ['2024-02-07 00:20:01', 42.83], |
|||
// ['2024-02-07 00:25:01', 43.06], |
|||
// ['2024-02-07 00:30:01', 43.23], |
|||
// ['2024-02-07 00:35:01', 43.42], |
|||
// ['2024-02-07 00:40:01', 43.57], |
|||
// ['2024-02-07 00:45:01', 43.74], |
|||
// ['2024-02-07 00:50:01', 43.83], |
|||
// ['2024-02-07 00:55:01', 43.91], |
|||
// ['2024-02-07 01:00:01', 43.95], |
|||
// ['2024-02-07 01:05:01', 43.95], |
|||
// ['2024-02-07 01:10:01', 43.93], |
|||
// ['2024-02-07 01:15:01', 43.93], |
|||
// ['2024-02-07 01:20:01', 43.95], |
|||
// ['2024-02-07 01:25:01', 43.97], |
|||
// ['2024-02-07 01:30:01', 44.03], |
|||
// ['2024-02-07 01:35:01', 44.11], |
|||
// ['2024-02-07 01:40:01', 44.21], |
|||
// ['2024-02-07 01:45:01', 44.33], |
|||
// ['2024-02-07 01:50:01', 44.45], |
|||
// ['2024-02-07 01:55:01', 44.61], |
|||
// ['2024-02-07 02:00:01', 44.83], |
|||
// ['2024-02-07 02:05:01', 45.09], |
|||
// ['2024-02-07 02:10:01', 45.38], |
|||
// ['2024-02-07 02:15:01', 45.64], |
|||
// ['2024-02-07 02:20:01', 45.89], |
|||
// ['2024-02-07 02:25:01', 46.12], |
|||
// ['2024-02-07 02:30:01', 46.32], |
|||
// ['2024-02-07 02:35:01', 46.44], |
|||
// ['2024-02-07 02:40:01', 46.56], |
|||
// ['2024-02-07 02:45:01', 46.65], |
|||
// ['2024-02-07 02:50:01', 46.73], |
|||
// ['2024-02-07 02:55:01', 46.8], |
|||
// ['2024-02-07 03:00:01', 46.86], |
|||
// ['2024-02-07 03:05:01', 46.92], |
|||
// ['2024-02-07 03:10:01', 46.98], |
|||
// ['2024-02-07 03:15:01', 47.05], |
|||
// ['2024-02-07 03:20:01', 47.12], |
|||
// ['2024-02-07 03:25:01', 47.3], |
|||
// ['2024-02-07 03:30:01', 47.63], |
|||
// ['2024-02-07 03:35:01', 48.32], |
|||
// ['2024-02-07 03:40:01', 50.01], |
|||
// ['2024-02-07 03:45:01', 73.31], |
|||
// ['2024-02-07 03:50:01', 57.99], |
|||
// ['2024-02-07 03:55:01', 50.02], |
|||
// ['2024-02-07 04:00:01', 46.41], |
|||
// ['2024-02-07 04:05:01', 46.07], |
|||
// ['2024-02-07 04:10:01', 46.73], |
|||
// ['2024-02-07 04:15:01', 47.35], |
|||
// ['2024-02-07 04:20:01', 48.13], |
|||
// ['2024-02-07 04:25:01', 48.77], |
|||
// ['2024-02-07 04:30:01', 48.97], |
|||
// ['2024-02-07 04:35:01', 48.23], |
|||
// ['2024-02-07 04:40:01', 48.39], |
|||
// ['2024-02-07 04:45:01', 49.43], |
|||
// ['2024-02-07 04:50:01', 50.55], |
|||
// ['2024-02-07 04:55:01', 51.29], |
|||
// ['2024-02-07 05:00:01', 52.12], |
|||
// ['2024-02-07 05:05:01', 52.75], |
|||
// ['2024-02-07 05:10:01', 53.02], |
|||
// ['2024-02-07 05:15:01', 52.67], |
|||
// ['2024-02-07 05:20:01', 51.66], |
|||
// ['2024-02-07 05:25:01', 51.62], |
|||
// ['2024-02-07 05:30:01', 52.61], |
|||
// ['2024-02-07 05:35:01', 53.66], |
|||
// ['2024-02-07 05:40:01', 54.17], |
|||
// ['2024-02-07 05:45:01', 54.78], |
|||
// ['2024-02-07 05:50:01', 55.47], |
|||
// ['2024-02-07 05:55:01', 56.04], |
|||
// ['2024-02-07 06:00:01', 56.04], |
|||
// ['2024-02-07 06:05:01', 55.81], |
|||
// ['2024-02-07 06:10:01', 55.78], |
|||
// ['2024-02-07 06:15:01', 56.34], |
|||
// ['2024-02-07 06:20:01', 57.14], |
|||
// ['2024-02-07 06:25:01', 57.24], |
|||
// ['2024-02-07 06:30:01', 56.98], |
|||
// ['2024-02-07 06:35:01', 56.53], |
|||
// ['2024-02-07 06:40:01', 55.69], |
|||
// ['2024-02-07 06:45:01', 54.94], |
|||
// ['2024-02-07 06:50:01', 54.82], |
|||
// ['2024-02-07 06:55:01', 55.8], |
|||
// ['2024-02-07 07:00:01', 57.38], |
|||
// ['2024-02-07 07:05:01', 58.26], |
|||
// ['2024-02-07 07:10:01', 58.62], |
|||
// ['2024-02-07 07:15:01', 58.93], |
|||
// ['2024-02-07 07:20:01', 59.36], |
|||
// ['2024-02-07 07:25:01', 59.55], |
|||
// ['2024-02-07 07:30:01', 59.54], |
|||
// ['2024-02-07 07:35:01', 58.86], |
|||
// ['2024-02-07 07:40:01', 58.13], |
|||
// ['2024-02-07 07:45:01', 58.37], |
|||
// ['2024-02-07 07:50:01', 59.1], |
|||
// ['2024-02-07 07:55:01', 59.76], |
|||
// ['2024-02-07 08:00:01', 60.38], |
|||
// ['2024-02-07 08:05:01', 60.74], |
|||
// ['2024-02-07 08:10:01', 60.88], |
|||
// ['2024-02-07 08:15:01', 60.41], |
|||
// ['2024-02-07 08:20:01', 59.4], |
|||
// ['2024-02-07 08:25:01', 59.4], |
|||
// ['2024-02-07 08:30:01', 60.32], |
|||
// ['2024-02-07 08:35:01', 60.36], |
|||
// ['2024-02-07 08:40:01', 59.48], |
|||
// ['2024-02-07 08:45:01', 58.28], |
|||
// ['2024-02-07 08:50:01', 55.9], |
|||
// ['2024-02-07 08:55:01', 52.56], |
|||
// ['2024-02-07 09:00:01', 49.62], |
|||
// ['2024-02-07 09:05:01', 46.37], |
|||
// ['2024-02-07 09:10:01', 44.31], |
|||
// ['2024-02-07 09:15:01', 42.89], |
|||
// ['2024-02-07 09:20:01', 41.79], |
|||
// ['2024-02-07 09:25:01', 40.76], |
|||
// ['2024-02-07 09:30:01', 39.84], |
|||
// ['2024-02-07 09:35:01', 39], |
|||
// ['2024-02-07 09:40:01', 38.54], |
|||
// ['2024-02-07 09:45:01', 0], |
|||
// ['2024-02-07 09:50:01', 0], |
|||
// ['2024-02-07 09:55:01', 38.36], |
|||
// ['2024-02-07 10:00:01', 38.28], |
|||
// ['2024-02-07 10:05:01', 38.14], |
|||
// ['2024-02-07 10:10:01', 37.96], |
|||
// ['2024-02-07 10:15:01', 37.86], |
|||
// ['2024-02-07 10:20:01', 37.83], |
|||
// ['2024-02-07 10:25:01', 37.75], |
|||
// ['2024-02-07 10:30:01', 37.71], |
|||
// ['2024-02-07 10:35:01', 37.86], |
|||
// ['2024-02-07 10:40:01', 38.23], |
|||
// ['2024-02-07 10:45:01', 38.51], |
|||
// ['2024-02-07 10:50:01', 38.81], |
|||
// ['2024-02-07 10:55:01', 39.11], |
|||
// ['2024-02-07 11:00:01', 39.36], |
|||
// ['2024-02-07 11:05:01', 39.57], |
|||
// ['2024-02-07 11:10:01', 39.75], |
|||
// ['2024-02-07 11:15:01', 39.92], |
|||
// ['2024-02-07 11:20:01', 40.09], |
|||
// ['2024-02-07 11:25:01', 40.26], |
|||
// ['2024-02-07 11:30:01', 40.42], |
|||
// ['2024-02-07 11:35:01', 40.62], |
|||
// ['2024-02-07 11:40:01', 40.81], |
|||
// ['2024-02-07 11:45:01', 40.98], |
|||
// ['2024-02-07 11:50:01', 41.19], |
|||
// ['2024-02-07 11:55:01', 41.34], |
|||
// ['2024-02-07 12:00:01', 41.47], |
|||
// ['2024-02-07 12:05:01', 41.6], |
|||
// ['2024-02-07 12:10:01', 41.71], |
|||
// ['2024-02-07 12:15:01', 41.74], |
|||
// ['2024-02-07 12:20:01', 41.77], |
|||
// ['2024-02-07 12:25:01', 41.8], |
|||
// ['2024-02-07 12:30:01', 41.88], |
|||
// ['2024-02-07 12:35:01', 41.95], |
|||
// ['2024-02-07 12:40:01', 42.03], |
|||
// ['2024-02-07 12:45:01', 42.13], |
|||
// ['2024-02-07 12:50:01', 42.23], |
|||
// ['2024-02-07 12:55:01', 42.35], |
|||
// ['2024-02-07 13:00:01', 42.5], |
|||
// ['2024-02-07 13:05:01', 42.72], |
|||
// ['2024-02-07 13:10:01', 42.97], |
|||
// ['2024-02-07 13:15:01', 43.23], |
|||
// ['2024-02-07 13:20:01', 43.45], |
|||
// ['2024-02-07 13:25:01', 43.68], |
|||
// ['2024-02-07 13:30:01', 43.86], |
|||
// ['2024-02-07 13:35:01', 44.02], |
|||
// ['2024-02-07 13:40:01', 44.16], |
|||
// ['2024-02-07 13:45:01', 44.29], |
|||
// ['2024-02-07 13:50:01', 44.37], |
|||
// ['2024-02-07 13:55:01', 44.44], |
|||
// ['2024-02-07 14:00:01', 44.52], |
|||
// ['2024-02-07 14:05:01', 44.58], |
|||
// ['2024-02-07 14:10:01', 44.65], |
|||
// ['2024-02-07 14:15:01', 44.68], |
|||
// ['2024-02-07 14:20:01', 44.75], |
|||
// ['2024-02-07 14:25:01', 44.79], |
|||
// ['2024-02-07 14:30:01', 44.85], |
|||
// ['2024-02-07 14:35:01', 44.89], |
|||
// ['2024-02-07 14:40:01', 44.98], |
|||
// ['2024-02-07 14:45:01', 45.05], |
|||
// ['2024-02-07 14:50:01', 45.14], |
|||
// ['2024-02-07 14:55:01', 45.23], |
|||
// ['2024-02-07 15:00:01', 45.31], |
|||
// ['2024-02-07 15:05:01', 45.41], |
|||
// ['2024-02-07 15:10:01', 45.51], |
|||
// ['2024-02-07 15:15:01', 45.61], |
|||
// ['2024-02-07 15:20:01', 46.04], |
|||
// ['2024-02-07 15:25:01', 47.34], |
|||
// ['2024-02-07 15:30:01', 49.23], |
|||
// ['2024-02-07 15:35:01', 66.1], |
|||
// ['2024-02-07 15:40:01', 52.83], |
|||
// ['2024-02-07 15:45:01', 46.31], |
|||
// ['2024-02-07 15:50:01', 44.12], |
|||
// ['2024-02-07 15:55:01', 44.51], |
|||
// ['2024-02-07 16:00:01', 45.88], |
|||
// ['2024-02-07 16:05:01', 47.28], |
|||
// ['2024-02-07 16:10:01', 48.15], |
|||
// ['2024-02-07 16:15:01', 48.88], |
|||
// ['2024-02-07 16:20:01', 48.65], |
|||
// ['2024-02-07 16:25:01', 47.9], |
|||
// ['2024-02-07 16:30:01', 47.92], |
|||
// ['2024-02-07 16:35:01', 49.09], |
|||
// ['2024-02-07 16:40:01', 50.25], |
|||
// ['2024-02-07 16:45:01', 50.84], |
|||
// ['2024-02-07 16:50:01', 51.22], |
|||
// ['2024-02-07 16:55:01', 51.97], |
|||
// ['2024-02-07 17:00:01', 52.86], |
|||
// ['2024-02-07 17:05:01', 53.03], |
|||
// ['2024-02-07 17:10:01', 52.5], |
|||
// ['2024-02-07 17:15:01', 52.37], |
|||
// ['2024-02-07 17:20:01', 52.65], |
|||
// ['2024-02-07 17:25:01', 53.68], |
|||
// ['2024-02-07 17:30:01', 54.6] |
|||
// ], |
|||
// min: 0, |
|||
// max: 0 |
|||
// } |
|||
// ], |
|||
// additionalInfo: { |
|||
// name: '望滨锅炉房', |
|||
// unit: null, |
|||
// endTime: '2024-02-07 17:30:01' |
|||
// }, |
|||
// units: [ |
|||
// { |
|||
// index: 0, |
|||
// name: '摄氏度', |
|||
// unit: '°C', |
|||
// unitMin: 0, |
|||
// unitMax: 100 |
|||
// } |
|||
// ] |
|||
// }; |
|||
|
|||
const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23']; |
|||
const options = { |
|||
color: colors, |
|||
title: { |
|||
text: '', |
|||
top: 10, |
|||
left: 20, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
fontWeight: 'normal', |
|||
color: '#D1E1FF' |
|||
} |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
} |
|||
}, |
|||
legend: { |
|||
data: [''], |
|||
top: 10, |
|||
right: 10, |
|||
itemWidth: 11, |
|||
itemHeight: 2, |
|||
textStyle: { |
|||
color: '#D1E1FF', |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
grid: { |
|||
top: '20%', |
|||
left: '2%', |
|||
right: '2%', |
|||
bottom: '15%', |
|||
containLabel: true |
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: 'inside', |
|||
startValue: '0' |
|||
}, |
|||
{ |
|||
startValue: '0' |
|||
} |
|||
], |
|||
xAxis: { |
|||
type: 'time', |
|||
boundaryGap: false, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#D1E1FF' |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#904FC5' |
|||
} |
|||
} |
|||
}, |
|||
yAxis: [{}], |
|||
series: [{}] |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
console.log('起始时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value); |
|||
// init(dataData); |
|||
}); |
|||
watchEffect(() => { |
|||
const dataStr = counterStore.orgStr; |
|||
if (dataStr != '') { |
|||
deviceUuid.value = dataStr; |
|||
getDeviceInfo(); |
|||
} |
|||
}); |
|||
function getDeviceInfo() { |
|||
//获取折线图数据 |
|||
const params = { |
|||
deviceUuid: deviceUuid.value |
|||
}; |
|||
getTempChart(params).then((res: any) => { |
|||
if (res.code === 200) { |
|||
mainInfoList.value = res.data.mainInfos; |
|||
if (res.data.additionalInfo != null) { |
|||
currentEndTime.value = res.data.additionalInfo.endTime; |
|||
// debounceClick(); |
|||
} |
|||
init(res.data); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
const debounceClick = debounce(() => { |
|||
getDevicePolling(); |
|||
}, 360000); |
|||
|
|||
function getDevicePolling() { |
|||
//轮询获取折线图数据 |
|||
const params = { |
|||
deviceUuid: deviceUuid.value |
|||
}; |
|||
getTempChartPolling(params).then((res: any) => { |
|||
if (res.code === 200) { |
|||
if (isCurrentRoute.value) { |
|||
timer.value = setTimeout(async () => { |
|||
await (timer.value && clearTimeout(timer.value)); |
|||
await getDevicePolling(); |
|||
}, 360000); |
|||
} |
|||
if (res.data.additionalInfo != null) { |
|||
currentEndTime.value = res.data.additionalInfo.endTime; |
|||
console.log(currentEndTime.value, res.data.mainInfos); |
|||
} |
|||
options.series.forEach((originalObj: any) => { |
|||
res.data.mainInfos.forEach((newObj: any) => { |
|||
if (originalObj.name === newObj.name) { |
|||
newObj.data.map((item: any) => { |
|||
originalObj.data.push(item); |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
console.log(options.series); |
|||
const chart = echarts.init(hxTempRef.value); |
|||
chart.setOption(options); |
|||
// mainInfoList.value = res.data.mainInfos; |
|||
// init(res.data); |
|||
} else { |
|||
clearTimeout(timer.value); |
|||
} |
|||
}); |
|||
} |
|||
function init(data: any) { |
|||
//折线图实例化 |
|||
options.yAxis = []; |
|||
options.legend.data = []; |
|||
options.series = []; |
|||
if (data.mainInfos.length === 0) { |
|||
// options.title.text = '暂无数据'; |
|||
const chart = echarts.init(hxTempRef.value); |
|||
mapEcharts.value = chart; |
|||
chart.clear(); |
|||
chart.resize(); |
|||
console.log('options--', options); |
|||
chart.setOption(options); |
|||
return; |
|||
} |
|||
options.title.text = data.additionalInfo.name; |
|||
data.units.map((item: seriesVo, index: number) => { |
|||
const offsetData = index === 0 ? 0 : index === 1 ? 0 : (index - 1) * 100; |
|||
console.log('offsetData--', offsetData); |
|||
options.yAxis.push({ |
|||
type: 'value', |
|||
name: `${item.name}(${item.unit})`, |
|||
position: `${index === 0 ? 'left' : 'right'}`, |
|||
alignTicks: true, |
|||
offset: offsetData, |
|||
scale: true, //自适应 |
|||
// minInterval: 1, //最小间距 |
|||
min: item.unitMin, //最小值 |
|||
max: item.unitMax, //最大值 |
|||
// interval: 10, //刻度间隔 |
|||
nameTextStyle: { |
|||
color: '#D1E1FF', |
|||
fontSize: 12, |
|||
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|||
}, |
|||
axisTick: { |
|||
// 轴刻度 |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#D1E1FF' |
|||
}, |
|||
splitLine: { |
|||
// 网格线 |
|||
show: true, |
|||
lineStyle: { |
|||
//分割线 |
|||
color: '#D1E1FF', |
|||
width: 1, |
|||
opacity: 0.2 |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
data.mainInfos.map((item: seriesVo, index: number) => { |
|||
options.legend.data.push(item.name); |
|||
options.series.push({ |
|||
name: item.name, |
|||
type: 'line', |
|||
smooth: true, |
|||
symbol: 'none', |
|||
yAxisIndex: item.index, |
|||
data: item.data |
|||
}); |
|||
}); |
|||
const chart = echarts.init(hxTempRef.value); |
|||
chart.clear(); |
|||
window.addEventListener('resize', function () { |
|||
chart.resize(); |
|||
}); |
|||
mapEcharts.value = chart; |
|||
chart.resize(); |
|||
console.log('options--', options); |
|||
chart.setOption(options); |
|||
console.log('结束时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.hxTempInfo { |
|||
width: 100%; |
|||
height: 318px; |
|||
.hxTempEchart { |
|||
width: 100%; |
|||
height: 318px; |
|||
line-height: 318px; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
color: #d2def6; |
|||
z-index: 99999; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,208 @@ |
|||
<template> |
|||
<div class="priPressInfo"> |
|||
<div ref="priPressRef" class="priPressechart" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import * as echarts from 'echarts'; |
|||
import { Ref } from 'vue'; |
|||
import { getrealTime } from '@/api/dataVisual/index'; |
|||
import useCounter from '@/store/modules/date'; |
|||
const counterStore = useCounter(); |
|||
const yearMonthDay = ref(); |
|||
const priPressRef: Ref<HTMLElement | any> = ref(null); |
|||
const deptId = ref('208'); |
|||
|
|||
const options = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
} |
|||
}, |
|||
legend: { |
|||
top: 10, |
|||
right: 10, |
|||
itemWidth: 11, |
|||
itemHeight: 2, |
|||
textStyle: { |
|||
color: '#D1E1FF', |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
grid: { |
|||
top: '20%', |
|||
left: '0', |
|||
right: '0', |
|||
bottom: '0', |
|||
containLabel: true |
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: 'inside', |
|||
show: false, |
|||
startValue: 0, |
|||
endValue: 10, |
|||
height: '10', |
|||
bottom: '0' |
|||
} |
|||
], |
|||
dataset: { |
|||
source: [ |
|||
// ['name', '换热站11', '换热站22', '换热站33', '换热站4', '换热站5', '换热站6', '换热站7'], |
|||
// ['回压-低', 50, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], |
|||
// ['供压-低', 10, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], |
|||
// ['回压-中', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], |
|||
// ['供压-中', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], |
|||
// ['回压-高', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], |
|||
// ['供压-高', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] |
|||
] |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#D1E1FF' |
|||
} |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '', |
|||
scale: true, //自适应 |
|||
nameTextStyle: { |
|||
color: '#D1E1FF', |
|||
fontSize: 12, |
|||
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|||
}, |
|||
axisTick: { |
|||
// 轴刻度 |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#D1E1FF' |
|||
}, |
|||
splitLine: { |
|||
// 网格线 |
|||
show: true, |
|||
lineStyle: { |
|||
//分割线 |
|||
color: '#306269', |
|||
width: 1, |
|||
opacity: 0.2 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
stack: 'Ad', |
|||
barWidth: 15, |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
stack: 'Ad', |
|||
barWidth: 15, |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'Low Zone', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'Low Zone', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'High Area', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'High Area', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 图表初始化 |
|||
const chart = echarts.init(priPressRef.value); |
|||
chart.setOption(options); |
|||
// getCompany(); |
|||
|
|||
// 大小自适应 |
|||
window.addEventListener('resize', () => { |
|||
chart.resize(); |
|||
}); |
|||
}); |
|||
watchEffect(() => { |
|||
const dataStr = counterStore.deptIdStr; |
|||
if (dataStr != '') { |
|||
deptId.value = dataStr; |
|||
getCompany(); |
|||
} |
|||
}); |
|||
function getCompany() { |
|||
//获取图表数据 |
|||
const params = { |
|||
orgCode: deptId.value, |
|||
viewType: 'heatSourceC' |
|||
}; |
|||
getrealTime(params).then((res: any) => { |
|||
const chart = echarts.init(priPressRef.value); |
|||
if (res.code === 200 && Object.keys(res.data).length != 0) { |
|||
options.dataset.source = res.data.source; |
|||
options.yAxis[0].name = `Mpa`; |
|||
chart.setOption(options); |
|||
} else { |
|||
chart.showLoading({ |
|||
text: '暂无数据', |
|||
color: '#1A2537', |
|||
textColor: '#d2def6', |
|||
maskColor: '#1A2537', |
|||
fontSize: 16, |
|||
zlevel: 0 |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.priPressInfo { |
|||
width: 100%; |
|||
height: 318px; |
|||
.priPressechart { |
|||
width: 100%; |
|||
height: 318px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,188 @@ |
|||
<template> |
|||
<div class="priTempInfo"> |
|||
<div ref="priTempRef" class="priTempEchart" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import * as echarts from 'echarts'; |
|||
import { Ref } from 'vue'; |
|||
import { getrealTime } from '@/api/dataVisual/index'; |
|||
import useCounter from '@/store/modules/date'; |
|||
const counterStore = useCounter(); |
|||
const priTempRef: Ref<HTMLElement | any> = ref(null); |
|||
const deptId = ref('208'); |
|||
|
|||
const options = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
} |
|||
}, |
|||
legend: { |
|||
top: 10, |
|||
right: 10, |
|||
itemWidth: 11, |
|||
itemHeight: 2, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
grid: { |
|||
top: '20%', |
|||
left: '0', |
|||
right: '0', |
|||
bottom: '0', |
|||
containLabel: true |
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: 'inside', |
|||
show: false, |
|||
startValue: 0, |
|||
endValue: 10, |
|||
height: '10', |
|||
bottom: '0' |
|||
} |
|||
], |
|||
dataset: { |
|||
source: [ |
|||
// ['name', '换热站11', '换热站22', '换热站33', '换热站4', '换热站5', '换热站6', '换热站7'], |
|||
// ['一网回水(低区)', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], |
|||
// ['一网回水(中区)', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], |
|||
// ['一网回水(高区)', 3.2, 15, 8.0, 22.5, 30, 65, 182.8, 198.2, 50.2, 12.2, 8.0, 2.2], |
|||
// ['一网供温(低区)', 2.0, 18, 12, 70.1, 30.9, 50.7, 80.2, 23.4, 23.0, 16.5, 12.0, 6.2] |
|||
] |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#D1E1FF' |
|||
} |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '', |
|||
scale: true, //自适应 |
|||
nameTextStyle: { |
|||
color: '#D1E1FF', |
|||
fontSize: 12, |
|||
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|||
}, |
|||
axisTick: { |
|||
// 轴刻度 |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#D1E1FF' |
|||
}, |
|||
splitLine: { |
|||
// 网格线 |
|||
show: true, |
|||
lineStyle: { |
|||
//分割线 |
|||
color: '#306269', |
|||
width: 1, |
|||
opacity: 0.2 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
tooltip: { |
|||
valueFormatter: function (value: any) { |
|||
return value + ' ℃'; |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
tooltip: { |
|||
valueFormatter: function (value: any) { |
|||
return value + ' ℃'; |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
tooltip: { |
|||
valueFormatter: function (value: any) { |
|||
return value + ' ℃'; |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
type: 'line', |
|||
seriesLayoutBy: 'row', |
|||
tooltip: { |
|||
valueFormatter: function (value: any) { |
|||
return value + ' °C'; |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 图表初始化 |
|||
const chart = echarts.init(priTempRef.value); |
|||
chart.setOption(options); |
|||
// getElect(); |
|||
|
|||
// 大小自适应 |
|||
window.addEventListener('resize', () => { |
|||
chart.resize(); |
|||
}); |
|||
}); |
|||
watchEffect(() => { |
|||
const dataStr = counterStore.deptIdStr; |
|||
if (dataStr != '') { |
|||
deptId.value = dataStr; |
|||
getElect(); |
|||
} |
|||
}); |
|||
function getElect() { |
|||
//获取图表数据 |
|||
const params = { |
|||
orgCode: deptId.value, |
|||
viewType: 'heatSourceA' |
|||
}; |
|||
getrealTime(params).then((res: any) => { |
|||
const chart = echarts.init(priTempRef.value); |
|||
if (res.code === 200 && Object.keys(res.data).length != 0) { |
|||
options.dataset.source = res.data.source; |
|||
options.yAxis[0].name = `℃`; |
|||
chart.setOption(options); |
|||
} else { |
|||
chart.showLoading({ |
|||
text: '暂无数据', |
|||
color: '#1A2537', |
|||
textColor: '#d2def6', |
|||
maskColor: '#1A2537', |
|||
fontSize: 16, |
|||
zlevel: 0 |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.priTempInfo { |
|||
width: 100%; |
|||
height: 318px; |
|||
|
|||
.priTempEchart { |
|||
width: 100%; |
|||
height: 318px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,208 @@ |
|||
<template> |
|||
<div class="secPressInfo"> |
|||
<div ref="secPressRef" class="secPressEchart" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import * as echarts from 'echarts'; |
|||
import { Ref } from 'vue'; |
|||
import { getrealTime } from '@/api/dataVisual/index'; |
|||
import useCounter from '@/store/modules/date'; |
|||
const counterStore = useCounter(); |
|||
const yearMonthDay = ref(); |
|||
const secPressRef: Ref<HTMLElement | any> = ref(null); |
|||
const deptId = ref('208'); |
|||
|
|||
const options = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
} |
|||
}, |
|||
legend: { |
|||
top: 10, |
|||
right: 10, |
|||
itemWidth: 11, |
|||
itemHeight: 2, |
|||
textStyle: { |
|||
color: '#D1E1FF', |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
grid: { |
|||
top: '20%', |
|||
left: '0', |
|||
right: '0', |
|||
bottom: '0', |
|||
containLabel: true |
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: 'inside', |
|||
show: false, |
|||
startValue: 0, |
|||
endValue: 10, |
|||
height: '10', |
|||
bottom: '0' |
|||
} |
|||
], |
|||
dataset: { |
|||
source: [ |
|||
// ['name', '换热站11', '换热站22', '换热站33', '换热站4', '换热站5', '换热站6', '换热站7'], |
|||
// ['回压-低', 50, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], |
|||
// ['供压-低', 10, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], |
|||
// ['回压-中', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], |
|||
// ['供压-中', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], |
|||
// ['回压-高', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], |
|||
// ['供压-高', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] |
|||
] |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#D1E1FF' |
|||
} |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '', |
|||
scale: true, //自适应 |
|||
nameTextStyle: { |
|||
color: '#D1E1FF', |
|||
fontSize: 12, |
|||
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|||
}, |
|||
axisTick: { |
|||
// 轴刻度 |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#D1E1FF' |
|||
}, |
|||
splitLine: { |
|||
// 网格线 |
|||
show: true, |
|||
lineStyle: { |
|||
//分割线 |
|||
color: '#306269', |
|||
width: 1, |
|||
opacity: 0.2 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
stack: 'Ad', |
|||
barWidth: 15, |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
stack: 'Ad', |
|||
barWidth: 15, |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'Low Zone', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'Low Zone', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'High Area', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'High Area', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 图表初始化 |
|||
const chart = echarts.init(secPressRef.value); |
|||
chart.setOption(options); |
|||
// getCompany(); |
|||
|
|||
// 大小自适应 |
|||
window.addEventListener('resize', () => { |
|||
chart.resize(); |
|||
}); |
|||
}); |
|||
watchEffect(() => { |
|||
const dataStr = counterStore.deptIdStr; |
|||
if (dataStr != '') { |
|||
deptId.value = dataStr; |
|||
getCompany(); |
|||
} |
|||
}); |
|||
function getCompany() { |
|||
//获取图表数据 |
|||
const params = { |
|||
orgCode: deptId.value, |
|||
viewType: 'heatSourceD' |
|||
}; |
|||
getrealTime(params).then((res: any) => { |
|||
const chart = echarts.init(secPressRef.value); |
|||
if (res.code === 200 && Object.keys(res.data).length != 0) { |
|||
options.dataset.source = res.data.source; |
|||
options.yAxis[0].name = `Mpa`; |
|||
chart.setOption(options); |
|||
} else { |
|||
chart.showLoading({ |
|||
text: '暂无数据', |
|||
color: '#1A2537', |
|||
textColor: '#d2def6', |
|||
maskColor: '#1A2537', |
|||
fontSize: 16, |
|||
zlevel: 0 |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.secPressInfo { |
|||
width: 100%; |
|||
height: 318px; |
|||
.secPressEchart { |
|||
width: 100%; |
|||
height: 318px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,208 @@ |
|||
<template> |
|||
<div class="secTempInfo"> |
|||
<div ref="secTempRef" class="secTempEchart" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import * as echarts from 'echarts'; |
|||
import { Ref } from 'vue'; |
|||
import { getrealTime } from '@/api/dataVisual/index'; |
|||
import useCounter from '@/store/modules/date'; |
|||
const counterStore = useCounter(); |
|||
const yearMonthDay = ref(); |
|||
const secTempRef: Ref<HTMLElement | any> = ref(null); |
|||
const deptId = ref('208'); |
|||
|
|||
const options = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
} |
|||
}, |
|||
legend: { |
|||
top: 10, |
|||
right: 10, |
|||
itemWidth: 11, |
|||
itemHeight: 2, |
|||
textStyle: { |
|||
color: '#D1E1FF', |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
grid: { |
|||
top: '20%', |
|||
left: '0', |
|||
right: '0', |
|||
bottom: '0', |
|||
containLabel: true |
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: 'inside', |
|||
show: false, |
|||
startValue: 0, |
|||
endValue: 10, |
|||
height: '10', |
|||
bottom: '0' |
|||
} |
|||
], |
|||
dataset: { |
|||
source: [ |
|||
// ['name', '换热站11', '换热站22', '换热站33', '换热站4', '换热站5', '换热站6', '换热站7'], |
|||
// ['回温-低', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], |
|||
// ['供温-低', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], |
|||
// ['回温-中', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], |
|||
// ['供温-中', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], |
|||
// ['回温-高', 2.0, 22, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], |
|||
// ['供温-高', 2.6, 19, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] |
|||
] |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#D1E1FF' |
|||
} |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '', |
|||
scale: true, //自适应 |
|||
nameTextStyle: { |
|||
color: '#D1E1FF', |
|||
fontSize: 12, |
|||
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|||
}, |
|||
axisTick: { |
|||
// 轴刻度 |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#D1E1FF' |
|||
}, |
|||
splitLine: { |
|||
// 网格线 |
|||
show: true, |
|||
lineStyle: { |
|||
//分割线 |
|||
color: '#306269', |
|||
width: 1, |
|||
opacity: 0.2 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
stack: 'Ad', |
|||
barWidth: 15, |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
stack: 'Ad', |
|||
barWidth: 15, |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'Low Zone', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'Low Zone', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'High Area', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, |
|||
stack: 'High Area', |
|||
emphasis: { |
|||
focus: 'series' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 图表初始化 |
|||
const chart = echarts.init(secTempRef.value); |
|||
chart.setOption(options); |
|||
// getCompany(); |
|||
|
|||
// 大小自适应 |
|||
window.addEventListener('resize', () => { |
|||
chart.resize(); |
|||
}); |
|||
}); |
|||
watchEffect(() => { |
|||
const dataStr = counterStore.deptIdStr; |
|||
if (dataStr != '') { |
|||
deptId.value = dataStr; |
|||
getCompany(); |
|||
} |
|||
}); |
|||
function getCompany() { |
|||
//获取图表数据 |
|||
const params = { |
|||
orgCode: deptId.value, |
|||
viewType: 'heatSourceB' |
|||
}; |
|||
getrealTime(params).then((res: any) => { |
|||
const chart = echarts.init(secTempRef.value); |
|||
if (res.code === 200 && Object.keys(res.data).length != 0) { |
|||
options.dataset.source = res.data.source; |
|||
options.yAxis[0].name = `℃`; |
|||
chart.setOption(options); |
|||
} else { |
|||
chart.showLoading({ |
|||
text: '暂无数据', |
|||
color: '#1A2537', |
|||
textColor: '#d2def6', |
|||
maskColor: '#1A2537', |
|||
fontSize: 16, |
|||
zlevel: 0 |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.secTempInfo { |
|||
width: 100%; |
|||
height: 318px; |
|||
.secTempEchart { |
|||
width: 100%; |
|||
height: 318px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<div class="tableInfo"> |
|||
<el-table |
|||
class="tableClass" |
|||
:data="tableData" |
|||
header-row-class-name="headerRow" |
|||
header-cell-class-name="headerCell" |
|||
row-class-name="rowClass" |
|||
cell-class-name="cellClass" |
|||
stripe |
|||
> |
|||
<el-table-column prop="id" label="序号" align="center" width="80" /> |
|||
<el-table-column prop="name" label="换热站" align="center" width="180" show-overflow-tooltip /> |
|||
<el-table-column prop="date" label="Date" align="center" /> |
|||
<el-table-column prop="name" label="Name" align="center" /> |
|||
<el-table-column prop="address" label="Address" align="center" /> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
const tableData = [ |
|||
{ |
|||
id: '1', |
|||
date: '2016-05-03', |
|||
name: '大唐管井', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '11', |
|||
date: '2016-05-02', |
|||
name: '汪家鑫城二期', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '12', |
|||
date: '2016-05-04', |
|||
name: '东湖紫东苑（兆城紫东苑）', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '22', |
|||
date: '2016-05-01', |
|||
name: '汪家鑫城一期B区A区C区', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '1', |
|||
date: '2016-05-03', |
|||
name: '大唐管井', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '11', |
|||
date: '2016-05-02', |
|||
name: '汪家鑫城二期', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '12', |
|||
date: '2016-05-04', |
|||
name: '东湖紫东苑（兆城紫东苑）', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '22', |
|||
date: '2016-05-01', |
|||
name: '汪家鑫城一期B区A区C区', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '1', |
|||
date: '2016-05-03', |
|||
name: '大唐管井', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '11', |
|||
date: '2016-05-02', |
|||
name: '汪家鑫城二期', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '12', |
|||
date: '2016-05-04', |
|||
name: '东湖紫东苑（兆城紫东苑）', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '22', |
|||
date: '2016-05-01', |
|||
name: '汪家鑫城一期B区A区C区', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
} |
|||
]; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.tableInfo { |
|||
height: 378px; |
|||
margin-top: 20px; |
|||
overflow: hidden; |
|||
:deep(.tableClass) { |
|||
height: 376px; |
|||
font-size: 18px; |
|||
--el-table-border: none; |
|||
--el-table-text-color: #d2def6; |
|||
--el-table-header-text-color: #d2def6; |
|||
--el-table-row-hover-bg-color: none; |
|||
--el-table-header-bg-color: #0d1015; |
|||
--el-table-tr-bg-color: #0d1b35; |
|||
--el-fill-color-lighter: #0d1015; |
|||
.headerCell,.cellClass{ |
|||
padding: 12px 0; |
|||
} |
|||
.el-table__inner-wrapper::before { |
|||
content: none; |
|||
} |
|||
.el-table__inner-wrapper { |
|||
.cellClass:hover { |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
// .headerRow { |
|||
// .headerCell { |
|||
// border-bottom: none; |
|||
// background-color: #0d1015; |
|||
// } |
|||
// } |
|||
// .rowClass { |
|||
// background-color: #0d1b35; |
|||
// .cellClass { |
|||
// border-bottom: none; |
|||
// background-color: #0d1b35; |
|||
// } |
|||
// } |
|||
// .rowClass.el-table__row--striped { |
|||
// .cellClass { |
|||
// background-color: #0d1015; |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,143 +1,258 @@ |
|||
<template> |
|||
<div class="tableInfo"> |
|||
<el-table |
|||
class="tableClass" |
|||
<vxe-grid |
|||
ref="tableRef" |
|||
class="tableGrid" |
|||
align="center" |
|||
auto-resize |
|||
keep-source |
|||
header-row-class-name="headerRowClass" |
|||
header-cell-class-name="headerCellClass" |
|||
row-class-name="tableRowClass" |
|||
cell-class-name="tableCellClass" |
|||
:height="390" |
|||
:sort-config="{ multiple: true, trigger: 'cell' }" |
|||
:stripe="!tableBorder" |
|||
:border="tableBorder" |
|||
:column-config="{ resizable: true, useKey: true }" |
|||
:row-config="{ useKey: true }" |
|||
:columns="tableColumn" |
|||
:data="tableData" |
|||
header-row-class-name="headerRow" |
|||
header-cell-class-name="headerCell" |
|||
row-class-name="rowClass" |
|||
cell-class-name="cellClass" |
|||
stripe |
|||
:loading="loadingShow" |
|||
show-overflow |
|||
@cell-dblclick="cellDBLClickEvent" |
|||
> |
|||
<el-table-column prop="id" label="序号" align="center" width="80" /> |
|||
<el-table-column prop="name" label="换热站" align="center" width="180" show-overflow-tooltip /> |
|||
<el-table-column prop="date" label="Date" align="center" /> |
|||
<el-table-column prop="name" label="Name" align="center" /> |
|||
<el-table-column prop="address" label="Address" align="center" /> |
|||
</el-table> |
|||
<template #deviceuuid_default="{ row }"> |
|||
<div class="title"> |
|||
<svg-icon |
|||
icon-class="warning_lights" |
|||
style="fill: currentColor; width: 15px; height: 15px; color: green" |
|||
v-if="row.deviceuuid.deviceStatus === 0" |
|||
/> |
|||
<svg-icon |
|||
icon-class="warning_lights" |
|||
style="fill: currentColor; width: 15px; height: 15px; color: red" |
|||
v-if="row.deviceuuid.deviceStatus === 2" |
|||
/> |
|||
<span class="name">{{ row.gTitle }}</span> |
|||
</div> |
|||
</template> |
|||
<template #pager> |
|||
<!--使用 pager 插槽--> |
|||
<vxe-pager |
|||
class="tablePage" |
|||
:layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']" |
|||
v-model:current-page="tablePage.currentPage" |
|||
v-model:page-size="tablePage.pageSize" |
|||
auto-hidden |
|||
size="mini" |
|||
:total="tablePage.total" |
|||
@page-change="handlePageChange" |
|||
> |
|||
</vxe-pager> |
|||
</template> |
|||
</vxe-grid> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
const tableData = [ |
|||
{ |
|||
id: '1', |
|||
date: '2016-05-03', |
|||
name: '大唐管井', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '11', |
|||
date: '2016-05-02', |
|||
name: '汪家鑫城二期', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '12', |
|||
date: '2016-05-04', |
|||
name: '东湖紫东苑（兆城紫东苑）', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '22', |
|||
date: '2016-05-01', |
|||
name: '汪家鑫城一期B区A区C区', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '1', |
|||
date: '2016-05-03', |
|||
name: '大唐管井', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '11', |
|||
date: '2016-05-02', |
|||
name: '汪家鑫城二期', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '12', |
|||
date: '2016-05-04', |
|||
name: '东湖紫东苑（兆城紫东苑）', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '22', |
|||
date: '2016-05-01', |
|||
name: '汪家鑫城一期B区A区C区', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '1', |
|||
date: '2016-05-03', |
|||
name: '大唐管井', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '11', |
|||
date: '2016-05-02', |
|||
name: '汪家鑫城二期', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '12', |
|||
date: '2016-05-04', |
|||
name: '东湖紫东苑（兆城紫东苑）', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
import { |
|||
VxeGridProps, |
|||
VxeGridInstance, |
|||
VxeTableEvents, |
|||
VxeColumnPropTypes, |
|||
VXETable, |
|||
VxeFormInstance, |
|||
VxeFormPropTypes, |
|||
VxeFormEvents, |
|||
VxeTablePropTypes, |
|||
VxePagerEvents |
|||
} from 'vxe-table'; |
|||
import { getTableHeader } from '@/api/table/list'; |
|||
import { getTableData } from '@/api/dataVisual/index'; |
|||
import { TableVo } from '@/api/table/types'; |
|||
import { tableStore } from '@/store/modules/table'; |
|||
import useStorage from '@/utils/useStorage'; |
|||
import useCounter from '@/store/modules/date'; |
|||
const counterStore = useCounter(); |
|||
const sessionStorageIns = useStorage('sessionStorage'); |
|||
const tableStoreCounter = tableStore(); |
|||
const loadingShow = ref(false); |
|||
const tableColumn = ref([]); |
|||
const tableData = ref<TableVo[]>(); |
|||
const deptId = ref('208'); |
|||
const tableBorder = ref(false); |
|||
const tablePage = reactive({ |
|||
total: 0, |
|||
currentPage: 1, |
|||
pageSize: 10 |
|||
}); |
|||
|
|||
interface HeaderVo { |
|||
code: string; |
|||
name: string; |
|||
value: string; |
|||
} |
|||
const headerData = ref<HeaderVo[]>(); |
|||
|
|||
onMounted(() => { |
|||
tableHeader(); |
|||
// tableDatas(); |
|||
}); |
|||
watchEffect(() => { |
|||
const dataStr = counterStore.deptIdStr; |
|||
if (dataStr != '') { |
|||
deptId.value = dataStr; |
|||
tableDatas(); |
|||
} |
|||
}); |
|||
|
|||
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => { |
|||
//分页 |
|||
tablePage.currentPage = currentPage; |
|||
tablePage.pageSize = pageSize; |
|||
sessionStorageIns.setUseStorage('currentPage', currentPage); |
|||
sessionStorageIns.setUseStorage('pageSize', pageSize); |
|||
tableDatas(); |
|||
}; |
|||
|
|||
function tableHeader() { |
|||
//获取表格header |
|||
getTableHeader().then((res: any) => { |
|||
console.log(res); |
|||
// 列配置 |
|||
const tableCessText = [ |
|||
{ |
|||
id: '22', |
|||
date: '2016-05-01', |
|||
name: '汪家鑫城一期B区A区C区', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
id: 0, |
|||
title: 'ID', |
|||
field: 'id', |
|||
type: 'html', |
|||
formatter: formatRole, |
|||
visible: false |
|||
} |
|||
]; |
|||
console.log(tableCessText); |
|||
res.data.map((item: any) => { |
|||
if (item.formatter != undefined || item.children != undefined) { |
|||
item.formatter = eval(item.formatter); |
|||
if (item.children && item.children.length) { |
|||
item.children.map((res: any) => { |
|||
res.formatter = eval(res.formatter); |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
nextTick(() => { |
|||
tableColumn.value = res.data; |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function tableDatas() { |
|||
//获取表格数据 |
|||
// const params = menuKey.value; |
|||
console.log('接口开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value); |
|||
const params = { |
|||
pageNum: tablePage.currentPage, |
|||
pageSize: tablePage.pageSize, |
|||
orgCode: deptId.value |
|||
}; |
|||
loadingShow.value = true; |
|||
getTableData(params).then((res: any) => { |
|||
if (res.code === 200) { |
|||
// tableData.value=oldData |
|||
tableData.value = res.rows; |
|||
if (res.rows.length != 0) { |
|||
counterStore.orgStore(res.rows[0].deviceuuid.uuid); |
|||
} else { |
|||
counterStore.orgStore('0'); |
|||
} |
|||
tableStoreCounter.tableDataAction(res.rows); |
|||
tablePage.total = res.total; |
|||
// gridOptions.data = res.data; |
|||
loadingShow.value = false; |
|||
console.log('接口结束:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value); |
|||
} |
|||
]; |
|||
}); |
|||
} |
|||
|
|||
const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }) => { |
|||
//双击单元格 |
|||
console.log('cellData--', row, column); |
|||
counterStore.orgStore(row.deviceuuid.uuid); |
|||
}; |
|||
const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => { |
|||
//渲染表格字段 |
|||
console.log('渲染开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value); |
|||
const cellData = ` |
|||
<span class="cellClass ${cellValue.alertProp === 1 ? 'warning' : ''}"> |
|||
${cellValue.ctrlPro.valueType != 'bool' ? cellValue.val : cellValue.val === 'true' ? '启' : '停'} |
|||
</span>`; |
|||
console.log('渲染完成:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value); |
|||
return cellData; |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.tableInfo { |
|||
height: 378px; |
|||
height: 390px; |
|||
margin-top: 20px; |
|||
border: 1px solid #3776b8; |
|||
background-color: #1a2537; |
|||
overflow: hidden; |
|||
:deep(.tableClass) { |
|||
height: 376px; |
|||
font-size: 18px; |
|||
--el-table-border: none; |
|||
--el-table-text-color: #d2def6; |
|||
--el-table-header-text-color: #d2def6; |
|||
--el-table-row-hover-bg-color: none; |
|||
--el-table-header-bg-color: #0d1015; |
|||
--el-table-tr-bg-color: #0d1b35; |
|||
--el-fill-color-lighter: #0d1015; |
|||
.headerCell,.cellClass{ |
|||
padding: 12px 0; |
|||
|
|||
.tableGrid { |
|||
--vxe-table-header-background-color: #151e2c; |
|||
--vxe-table-header-font-color: #d2def6; |
|||
--vxe-table-body-background-color: #1a2537; |
|||
--vxe-table-row-striped-background-color: #151e2c; |
|||
--vxe-table-border-color: #1a2537; |
|||
--vxe-table-resizable-line-color: #151e2c; |
|||
--vxe-font-size: 18px; |
|||
--vxe-font-color: #d2def6; |
|||
--vxe-loading-background-color: #1a2537; |
|||
--vxe-pager-background-color: #1a2537; |
|||
--vxe-input-background-color: #151e2c; |
|||
--vxe-select-panel-background-color: #151e2c; |
|||
--vxe-select-option-hover-background-color: #1a2537; |
|||
|
|||
:deep(.vxe-table) { |
|||
.vxe-loading { |
|||
background-color: #1a2537; |
|||
} |
|||
} |
|||
} |
|||
.el-table__inner-wrapper::before { |
|||
content: none; |
|||
|
|||
/*滚动条整体部分*/ |
|||
.tableGrid ::-webkit-scrollbar { |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
.el-table__inner-wrapper { |
|||
.cellClass:hover { |
|||
|
|||
/*滚动条的轨道*/ |
|||
.tableGrid ::-webkit-scrollbar-track { |
|||
background-color: transparent; |
|||
-webkit-border-radius: 8px; |
|||
-moz-border-radius: 8px; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
/*滚动条里面的小方块，能向上向下移动*/ |
|||
.tableGrid ::-webkit-scrollbar-thumb { |
|||
background-color: rgb(147, 147, 153, 0.5); |
|||
-webkit-border-radius: 8px; |
|||
-moz-border-radius: 8px; |
|||
border-radius: 8px; |
|||
} |
|||
// .headerRow { |
|||
// .headerCell { |
|||
// border-bottom: none; |
|||
// background-color: #0d1015; |
|||
// } |
|||
// } |
|||
// .rowClass { |
|||
// background-color: #0d1b35; |
|||
// .cellClass { |
|||
// border-bottom: none; |
|||
// background-color: #0d1b35; |
|||
// } |
|||
// } |
|||
// .rowClass.el-table__row--striped { |
|||
// .cellClass { |
|||
// background-color: #0d1015; |
|||
// } |
|||
// } |
|||
|
|||
.tableGrid ::-webkit-scrollbar-thumb:hover { |
|||
background-color: #a8a8a8; |
|||
} |
|||
|
|||
.tableGrid ::-webkit-scrollbar-thumb:active { |
|||
background-color: #787878; |
|||
} |
|||
|
|||
/*边角，即两个滚动条的交汇处*/ |
|||
.tableGrid ::-webkit-scrollbar-corner { |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
File diff suppressed because it is too large
Loading…
Reference in new issue