From 2bb095eddc853d903c68a6f0975e07b1a42ea9ae Mon Sep 17 00:00:00 2001 From: fuguobin Date: Mon, 4 Mar 2024 16:59:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9B=91=E6=8E=A7=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3=E6=9B=B4=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/dashboard/index.ts | 54 ++++++++++++++++++++++++++++ src/api/dashboard/types.ts | 49 ++++++++++++++++++++++++++ src/api/data/index.ts | 6 ++-- src/api/device/index.ts | 9 +++-- src/api/table/list.ts | 6 ++-- src/types/components.d.ts | 1 + src/utils/countTo.ts | 5 +++ src/views/dashboard/index.vue | 63 +++++++++++++++++++++++++-------- src/views/details/index.vue | 66 +++++++++++++++++------------------ 9 files changed, 204 insertions(+), 55 deletions(-) create mode 100644 src/api/dashboard/index.ts create mode 100644 src/api/dashboard/types.ts diff --git a/src/api/dashboard/index.ts b/src/api/dashboard/index.ts new file mode 100644 index 0000000..9494752 --- /dev/null +++ b/src/api/dashboard/index.ts @@ -0,0 +1,54 @@ +import request from '@/utils/request'; +import { AxiosPromise } from 'axios'; +import { CaptchaResult, LoginData, LoginResult } from './types'; + +/** + * 登录API + * + * @param data {LoginData} + * @returns + */ +// export function loginApi(data: LoginData): AxiosPromise { +// return request({ +// url: '/login', +// method: 'post', +// data: data +// }); +// } + +/** + * 供热面积 + */ +export function getHeatSupplyAreaApi() { + return request({ + url: '/home/heatSupplyArea', + method: 'get' + }); +} +/** + * 报警数量 + */ +export function getAlertCountApi() { + return request({ + url: '/home/alertCount', + method: 'get' + }); +} +/** + * 换热站数量 + */ +export function getHeatExchangeStationCount() { + return request({ + url: '/home/heatExchangeStationCount', + method: 'get' + }); +} +/** + * 设备数量 + */ +export function getDeviceCountApi() { + return request({ + url: '/home/deviceCount', + method: 'get' + }); +} diff --git a/src/api/dashboard/types.ts b/src/api/dashboard/types.ts new file mode 100644 index 0000000..2e103a8 --- /dev/null +++ b/src/api/dashboard/types.ts @@ -0,0 +1,49 @@ +/** + * 登录请求参数 + */ +export interface LoginData { + /** + * 用户名 + */ + username: string; + /** + * 密码 + */ + password: string; +} + +/** + * 登录响应 + */ +export interface LoginResult { + /** + * 访问token + */ + token?: string; + /** + * 过期时间(单位：毫秒) + */ + expires?: number; + /** + * 刷新token + */ + refreshToken?: string; + /** + * token 类型 + */ + tokenType?: string; +} + +/** + * 验证码响应 + */ +export interface CaptchaResult { + /** + * 验证码缓存key + */ + verifyCodeKey: string; + /** + * 验证码图片Base64字符串 + */ + verifyCodeBase64: string; +} diff --git a/src/api/data/index.ts b/src/api/data/index.ts index 6b14b76..9b0f645 100644 --- a/src/api/data/index.ts +++ b/src/api/data/index.ts @@ -17,7 +17,7 @@ export function companyList() { */ export function getWeather(): AxiosPromise<[]> { return request({ - url: 'assetData/dataScreenMain/weather/0', + url: '/assetData/dataScreenMain/weather/0', method: 'get' }); } @@ -104,7 +104,7 @@ export function mapInfo(data: any) { */ export function heatRateRange(data: any) { return request({ - url: 'assetData/dataScreenMain/heatRateRange', + url: '/assetData/dataScreenMain/heatRateRange', method: 'post', data: data }); @@ -115,7 +115,7 @@ export function heatRateRange(data: any) { */ export function coalConsumptionRange(data: any) { return request({ - url: 'assetData/dataScreenMain/coalConsumptionRange', + url: '/assetData/dataScreenMain/coalConsumptionRange', method: 'post', data: data }); diff --git a/src/api/device/index.ts b/src/api/device/index.ts index 24bf71b..3ab946a 100644 --- a/src/api/device/index.ts +++ b/src/api/device/index.ts @@ -64,7 +64,8 @@ export function editConfig(data: any) { */ export function getDevices(params: number): AxiosPromise<[]> { return request({ - url: '/dc/dcDeviceEcharts/getDevices/' + params, + // url: '/dc/dcDeviceEcharts/getDevices/' + params, + url: '/dc/data/monitor/asset/list/' + params, method: 'get' }); } @@ -111,7 +112,8 @@ export function getPortions(): AxiosPromise<[]> { */ export function getDeviceInfos(data: any) { return request({ - url: '/dc/dcDeviceEcharts/getDeviceInfos', + // url: '/dc/dcDeviceEcharts/getDeviceInfos', + url: '/dc/data/monitor/history/data', method: 'post', data: data }); @@ -124,7 +126,8 @@ export function getDeviceInfos(data: any) { */ export function getDeviceInfosPolling(data: any) { return request({ - url: '/dc/dcDeviceEcharts/device/realtime/data', + // url: '/dc/dcDeviceEcharts/device/realtime/data', + url: '/dc/data/monitor/realtime/data', method: 'post', data: data }); diff --git a/src/api/table/list.ts b/src/api/table/list.ts index fdafc60..98151bd 100644 --- a/src/api/table/list.ts +++ b/src/api/table/list.ts @@ -27,7 +27,8 @@ export function getStationInfo(): AxiosPromise<[]> { */ export function getTableHeader(): AxiosPromise<[]> { return request({ - url: '/bi/opt/getTableHeader', + // url: '/bi/opt/getTableHeader', + url: '/dc/data/monitor/table/header', method: 'get' }); } @@ -51,7 +52,8 @@ export function getTableHeader(): AxiosPromise<[]> { */ export function getTableData(data: any) { return request({ - url: '/bi/opt/getTableDataPage', + // url: '/bi/opt/getTableDataPage', + url: '/dc/data/monitor/table/data', method: 'post', data: data }); diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 12b6d56..6fa5559 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -57,6 +57,7 @@ declare module '@vue/runtime-core' { NInputNumber: typeof import('naive-ui')['NInputNumber'] NMenu: typeof import('naive-ui')['NMenu'] NModal: typeof import('naive-ui')['NModal'] + NNumberAnimation: typeof import('naive-ui')['NNumberAnimation'] NScrollbar: typeof import('naive-ui')['NScrollbar'] NSpin: typeof import('naive-ui')['NSpin'] NSwitch: typeof import('naive-ui')['NSwitch'] diff --git a/src/utils/countTo.ts b/src/utils/countTo.ts index 7893e05..f0a07f4 100644 --- a/src/utils/countTo.ts +++ b/src/utils/countTo.ts @@ -29,26 +29,31 @@ const props = { } }, decimal: { + //十进制 type: String, required: false, default: '.' }, separator: { + //分割器 type: String, required: false, default: ',' }, prefix: { + //前缀 type: String, required: false, default: '' }, suffix: { + //后缀 type: String, required: false, default: '' }, useEasing: { + //使用缓和 type: Boolean, required: false, default: true diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index dfb7eeb..3a7e8c3 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -41,7 +41,7 @@
- +
- - /{{ item.total }} + + + / + +
@@ -88,6 +91,12 @@ import { useDateFormat, useNow, useTransition, TransitionPresets } from '@vueuse/core'; import { useUserStore } from '@/store/modules/user'; import { getWeather, userVersionRelation } from '@/api/user/index'; +import { + getHeatSupplyAreaApi, + getAlertCountApi, + getHeatExchangeStationCount, + getDeviceCountApi +} from '@/api/dashboard/index'; // import { transitionNum } from '@/utils/index'; import calendar from '@/utils/lunar'; import countTo from '@/utils/countTo'; @@ -128,11 +137,11 @@ interface CardData { total: number; } -const cardData: CardData[] = [ +const cardData = ref([ { id: '1', - title: '正在报警数量/报警总数量', - value: 50000, + title: '供热面积', + value: 0, time: 5000, colors: ['#ec4786', '#b955a4'], icon: 'icon-area-chart', @@ -140,17 +149,17 @@ const cardData: CardData[] = [ }, { id: '2', - title: '产热数量', - value: 200, + title: '报警数量/设备数量', + value: 0, time: 5000, colors: ['#865ec0', '#5144b4'], icon: 'icon-HP', - total: 8000 + total: 0 }, { id: '3', title: '换热站', - value: 2000, + value: 0, time: 5000, colors: ['#56cdf3', '#719de3'], icon: 'icon-heat-exchange-station', @@ -158,14 +167,14 @@ const cardData: CardData[] = [ }, { id: '4', - title: '设备', - value: 9000, + title: '设备在线数/设备总数', + value: 0, time: 5000, colors: ['#fcbc25', '#f68057'], icon: 'icon-device', - total: 100000 + total: 0 } -]; +]); const timePeriod = computed(() => { if (hoursNow >= 3 && hoursNow < 8) { @@ -185,6 +194,7 @@ const timePeriod = computed(() => { onMounted(() => { getWeatherData(); + getCardData(); // socket.initialize(wsUrl); // const webVersion = sessionStorage.getItem('webVersion'); // if (webVersion != '' && webVersion != null) { @@ -212,6 +222,31 @@ onMounted(() => { // } // }); // } +function getCardData() { + //卡片数据 + getHeatSupplyAreaApi().then((res: any) => { + if (res.code === 200) { + cardData.value[0].value = res.data; + } + }); + getAlertCountApi().then((res: any) => { + if (res.code === 200) { + cardData.value[1].value = res.data.alertCount; + cardData.value[1].total = res.data.deviceCount; + } + }); + getHeatExchangeStationCount().then((res: any) => { + if (res.code === 200) { + cardData.value[2].value = res.data; + } + }); + getDeviceCountApi().then((res: any) => { + if (res.code === 200) { + cardData.value[3].value = res.data.enabledCount; + cardData.value[3].total = res.data.total; + } + }); +} function getWeatherData() { //获取天气 getWeather().then((res: any) => { diff --git a/src/views/details/index.vue b/src/views/details/index.vue index 6784391..85ea35c 100644 --- a/src/views/details/index.vue +++ b/src/views/details/index.vue @@ -183,17 +183,17 @@

换热站

- + - - {{ item.deviceName }} + + {{ item.assetName }} @@ -206,10 +206,10 @@
{{ item.name }}
平均值 : {{ item.average }} {{ item.paramUnit }}
-
+
最大温度 : {{ item.max }} {{ item.paramUnit }}
-
+
最小温度 : {{ item.min }} {{ item.paramUnit }}
@@ -294,7 +294,7 @@ const filterForm = reactive({ startTime: '', step: 1, stepType: '1', - deviceUuid: '', + assetCode: '', paramCode: '', partion: '', showZero: true, @@ -322,8 +322,8 @@ const resetInit = { additionalInfo: null }; export interface deviceVo { - centerDeviceCode: string; - deviceName: string; + assetCode: string; + assetName: string; sign: string; } const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23']; @@ -722,7 +722,7 @@ onUnmounted(() => { const deviceSelect = (key: string, keyPath: string[], item: object) => { //点击换热站列表 console.log(key, keyPath, item); - filterForm.deviceUuid = key; + filterForm.assetCode = key; if (key === 'weatherDataChart') { getweatherHoursList(); } else { @@ -731,7 +731,7 @@ const deviceSelect = (key: string, keyPath: string[], item: object) => { }; const deviceOpen = (key: string, keyPath: string[]) => { console.log(key, keyPath); - filterForm.deviceUuid = key; + filterForm.assetCode = key; }; function lineClick() { @@ -766,26 +766,26 @@ function keyClick(res: string) { type: 'warning' }); } else { - const device = filterForm.deviceUuid; + const device = filterForm.assetCode; const deviceDataValue = deviceData.value; - // console.log('已选设备:', filterForm.deviceUuid); + // console.log('已选设备:', filterForm.assetCode); if (deviceDataValue?.length != 0) { deviceDataValue?.map((item: deviceVo, index: number) => { // console.log('遍历设备:', item, index); if (res === 'ArrowUp') { //上一个 - if (device === item.centerDeviceCode && index != 0) { - filterForm.deviceUuid = deviceDataValue[index - 1].centerDeviceCode; - // filterForm.deviceUuid = filterForm.deviceUuid; - // console.log('当前设备:', filterForm.deviceUuid); + if (device === item.assetCode && index != 0) { + filterForm.assetCode = deviceDataValue[index - 1].assetCode; + // filterForm.assetCode = filterForm.assetCode; + // console.log('当前设备:', filterForm.assetCode); } } else if (res === 'ArrowDown') { //下一个 - if (device === item.centerDeviceCode && index + 1 != deviceDataValue?.length) { - // console.log('当前设备:', item.deviceName, index); - filterForm.deviceUuid = deviceDataValue[index + 1].centerDeviceCode; - // filterForm.deviceUuid = filterForm.deviceUuid; - // console.log('当前设备:', filterForm.deviceUuid); + if (device === item.assetCode && index + 1 != deviceDataValue?.length) { + // console.log('当前设备:', item.assetName, index); + filterForm.assetCode = deviceDataValue[index + 1].assetCode; + // filterForm.assetCode = filterForm.assetCode; + // console.log('当前设备:', filterForm.assetCode); } } }); @@ -797,7 +797,7 @@ function keyClick(res: string) { function showZeroChange() { //是否显示0值 filterForm.showZero = !filterForm.showZero; - if (filterForm.deviceUuid === 'weatherDataChart') { + if (filterForm.assetCode === 'weatherDataChart') { getweatherHoursList(); } else { verifyInfo(); @@ -852,7 +852,7 @@ function getDeviceInfo() { function getweatherHoursList() { //获取天气数据图表折线图数据 - if (filterForm.deviceUuid === '') { + if (filterForm.assetCode === '') { ElMessage({ message: '请选择换热站', type: 'warning' @@ -1021,7 +1021,7 @@ function init(data: any) { // //设备选择确认 // // searchForm.parameter = []; // // multipleLimit.value = res.length <= 1 ? 0 : 1; -// filterForm.deviceUuid = res; +// filterForm.assetCode = res; // } function dateChange(res: any) { //日期选择 @@ -1032,12 +1032,12 @@ function dateChange(res: any) { } else { searchForm.startTime = res + ' ' + searchForm.time; filterForm.startTime = res + ' ' + searchForm.time; - if (filterForm.deviceUuid === 'weatherDataChart') { + if (filterForm.assetCode === 'weatherDataChart') { getweatherHoursList(); } else { verifyInfo(); } - // console.log('date--', filterForm.deviceUuid); + // console.log('date--', filterForm.assetCode); } } function timeChange(res: any) { @@ -1049,12 +1049,12 @@ function timeChange(res: any) { // console.log('time--', res, searchForm.time); searchForm.startTime = searchForm.date + ' ' + res; filterForm.startTime = searchForm.date + ' ' + res; - if (filterForm.deviceUuid === 'weatherDataChart') { + if (filterForm.assetCode === 'weatherDataChart') { getweatherHoursList(); } else { verifyInfo(); } - // console.log('time--', filterForm.deviceUuid); + // console.log('time--', filterForm.assetCode); } } function stepChange(num: any) { @@ -1105,7 +1105,7 @@ const stepClickDebounce = debounce(() => { }, 800); function verifyInfo() { - if (filterForm.deviceUuid === '') { + if (filterForm.assetCode === '') { ElMessage({ message: '请选择换热站', type: 'warning' @@ -1132,7 +1132,7 @@ function verifyInfo() { function searchClick(type: string) { //显示/隐藏筛选栏 searchShow.value = type === 'hide' ? false : true; - if (filterForm.deviceUuid === '') { + if (filterForm.assetCode === '') { } else if (filterForm.startTime === '') { } else if (filterForm.step === null) { } else if (filterForm.paramCode === '') { @@ -1158,7 +1158,7 @@ function searchClick(type: string) { // if (!formEl) return; // formEl.resetFields(); // filterForm.startTime = ''; -// filterForm.deviceUuid = ''; +// filterForm.assetCode = ''; // filterForm.paramCode = ''; // filterForm.partion = ''; // init(resetInit);