lianmei
/
iot-ui-plus
mirror of https://gitee.com/lmlz_0/dc-ui-plus.git
3
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

数据监控接口更换

develop
fuguobin 9 months ago
parent
09b1a238b2
commit
2bb095eddc
9 changed files with 204 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      src/api/dashboard/index.ts
  2. 49
      src/api/dashboard/types.ts
  3. 6
      src/api/data/index.ts
  4. 9
      src/api/device/index.ts
  5. 6
      src/api/table/list.ts
  6. 1
      src/types/components.d.ts
  7. 5
      src/utils/countTo.ts
  8. 63
      src/views/dashboard/index.vue
  9. 66
      src/views/details/index.vue

54
src/api/dashboard/index.ts
View File

@ -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<LoginResult> {
// 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'
});
}

49
src/api/dashboard/types.ts
View File

@ -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;
}

6
src/api/data/index.ts
View File

@ -17,7 +17,7 @@ export function companyList() {
*/ */
export function getWeather(): AxiosPromise<[]> { export function getWeather(): AxiosPromise<[]> {
return request({ return request({
url: 'assetData/dataScreenMain/weather/0', url: '/assetData/dataScreenMain/weather/0',
method: 'get' method: 'get'
}); });
} }
@ -104,7 +104,7 @@ export function mapInfo(data: any) {
*/ */
export function heatRateRange(data: any) { export function heatRateRange(data: any) {
return request({ return request({
url: 'assetData/dataScreenMain/heatRateRange', url: '/assetData/dataScreenMain/heatRateRange',
method: 'post', method: 'post',
data: data data: data
}); });
@ -115,7 +115,7 @@ export function heatRateRange(data: any) {
*/ */
export function coalConsumptionRange(data: any) { export function coalConsumptionRange(data: any) {
return request({ return request({
url: 'assetData/dataScreenMain/coalConsumptionRange', url: '/assetData/dataScreenMain/coalConsumptionRange',
method: 'post', method: 'post',
data: data data: data
}); });

9
src/api/device/index.ts
View File

@ -64,7 +64,8 @@ export function editConfig(data: any) {
*/ */
export function getDevices(params: number): AxiosPromise<[]> { export function getDevices(params: number): AxiosPromise<[]> {
return request({ return request({
url: '/dc/dcDeviceEcharts/getDevices/' + params, // url: '/dc/dcDeviceEcharts/getDevices/' + params,
url: '/dc/data/monitor/asset/list/' + params,
method: 'get' method: 'get'
}); });
} }
@ -111,7 +112,8 @@ export function getPortions(): AxiosPromise<[]> {
*/ */
export function getDeviceInfos(data: any) { export function getDeviceInfos(data: any) {
return request({ return request({
url: '/dc/dcDeviceEcharts/getDeviceInfos', // url: '/dc/dcDeviceEcharts/getDeviceInfos',
url: '/dc/data/monitor/history/data',
method: 'post', method: 'post',
data: data data: data
}); });
@ -124,7 +126,8 @@ export function getDeviceInfos(data: any) {
*/ */
export function getDeviceInfosPolling(data: any) { export function getDeviceInfosPolling(data: any) {
return request({ return request({
url: '/dc/dcDeviceEcharts/device/realtime/data', // url: '/dc/dcDeviceEcharts/device/realtime/data',
url: '/dc/data/monitor/realtime/data',
method: 'post', method: 'post',
data: data data: data
}); });

6
src/api/table/list.ts
View File

@ -27,7 +27,8 @@ export function getStationInfo(): AxiosPromise<[]> {
*/ */
export function getTableHeader(): AxiosPromise<[]> { export function getTableHeader(): AxiosPromise<[]> {
return request({ return request({
url: '/bi/opt/getTableHeader', // url: '/bi/opt/getTableHeader',
url: '/dc/data/monitor/table/header',
method: 'get' method: 'get'
}); });
} }
@ -51,7 +52,8 @@ export function getTableHeader(): AxiosPromise<[]> {
*/ */
export function getTableData(data: any) { export function getTableData(data: any) {
return request({ return request({
url: '/bi/opt/getTableDataPage', // url: '/bi/opt/getTableDataPage',
url: '/dc/data/monitor/table/data',
method: 'post', method: 'post',
data: data data: data
}); });

1
src/types/components.d.ts
View File

@ -57,6 +57,7 @@ declare module '@vue/runtime-core' {
NInputNumber: typeof import('naive-ui')['NInputNumber'] NInputNumber: typeof import('naive-ui')['NInputNumber']
NMenu: typeof import('naive-ui')['NMenu'] NMenu: typeof import('naive-ui')['NMenu']
NModal: typeof import('naive-ui')['NModal'] NModal: typeof import('naive-ui')['NModal']
NNumberAnimation: typeof import('naive-ui')['NNumberAnimation']
NScrollbar: typeof import('naive-ui')['NScrollbar'] NScrollbar: typeof import('naive-ui')['NScrollbar']
NSpin: typeof import('naive-ui')['NSpin'] NSpin: typeof import('naive-ui')['NSpin']
NSwitch: typeof import('naive-ui')['NSwitch'] NSwitch: typeof import('naive-ui')['NSwitch']

5
src/utils/countTo.ts
View File

@ -29,26 +29,31 @@ const props = {
} }
}, },
decimal: { decimal: {
//十进制
type: String, type: String,
required: false, required: false,
default: '.' default: '.'
}, },
separator: { separator: {
//分割器
type: String, type: String,
required: false, required: false,
default: ',' default: ','
}, },
prefix: { prefix: {
//前缀
type: String, type: String,
required: false, required: false,
default: '' default: ''
}, },
suffix: { suffix: {
//后缀
type: String, type: String,
required: false, required: false,
default: '' default: ''
}, },
useEasing: { useEasing: {
//使用缓和
type: Boolean, type: Boolean,
required: false, required: false,
default: true default: true

63
src/views/dashboard/index.vue
View File

@ -41,7 +41,7 @@
<section class="dataCard"> <section class="dataCard">
<el-card shadow="always"> <el-card shadow="always">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6" v-for="item in cardData" :key="item.value"> <el-col :span="6" v-for="(item, index) in cardData" :key="item.value">
<div <div
class="item" class="item"
:style="{ backgroundImage: `linear-gradient(to bottom right, ${item.colors[0]}, ${item.colors[1]})` }" :style="{ backgroundImage: `linear-gradient(to bottom right, ${item.colors[0]}, ${item.colors[1]})` }"
@ -50,8 +50,11 @@
<div class="data"> <div class="data">
<i class="iconfont" :class="item.icon"></i> <i class="iconfont" :class="item.icon"></i>
<span> <span>
<countTo :start="1" :end="item.value" :duration="item.time"></countTo> <countTo :start="1" :end="item.value" :duration="item.time" :decimals="index != 0 ? 0 : 2"></countTo>
<span v-if="item.total != 0"><i>/</i>{{ item.total }}</span> <span v-if="item.total != 0">
<i>/</i>
<countTo :start="1" :end="item.total" :duration="2000" :decimals="index != 0 ? 0 : 2"></countTo>
</span>
</span> </span>
</div> </div>
</div> </div>
@ -88,6 +91,12 @@
import { useDateFormat, useNow, useTransition, TransitionPresets } from '@vueuse/core'; import { useDateFormat, useNow, useTransition, TransitionPresets } from '@vueuse/core';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { getWeather, userVersionRelation } from '@/api/user/index'; import { getWeather, userVersionRelation } from '@/api/user/index';
import {
getHeatSupplyAreaApi,
getAlertCountApi,
getHeatExchangeStationCount,
getDeviceCountApi
} from '@/api/dashboard/index';
// import { transitionNum } from '@/utils/index'; // import { transitionNum } from '@/utils/index';
import calendar from '@/utils/lunar'; import calendar from '@/utils/lunar';
import countTo from '@/utils/countTo'; import countTo from '@/utils/countTo';
@ -128,11 +137,11 @@ interface CardData {
total: number; total: number;
} }
const cardData: CardData[] = [ const cardData = ref<CardData[]>([
{ {
id: '1', id: '1',
title: '正在报警数量/报警总数量', title: '供热面积',
value: 50000, value: 0,
time: 5000, time: 5000,
colors: ['#ec4786', '#b955a4'], colors: ['#ec4786', '#b955a4'],
icon: 'icon-area-chart', icon: 'icon-area-chart',
@ -140,17 +149,17 @@ const cardData: CardData[] = [
}, },
{ {
id: '2', id: '2',
title: '产热数量', title: '报警数量/设备数量',
value: 200, value: 0,
time: 5000, time: 5000,
colors: ['#865ec0', '#5144b4'], colors: ['#865ec0', '#5144b4'],
icon: 'icon-HP', icon: 'icon-HP',
total: 8000 total: 0
}, },
{ {
id: '3', id: '3',
title: '换热站', title: '换热站',
value: 2000, value: 0,
time: 5000, time: 5000,
colors: ['#56cdf3', '#719de3'], colors: ['#56cdf3', '#719de3'],
icon: 'icon-heat-exchange-station', icon: 'icon-heat-exchange-station',
@ -158,14 +167,14 @@ const cardData: CardData[] = [
}, },
{ {
id: '4', id: '4',
title: '设备', title: '设备在线数/设备总数',
value: 9000, value: 0,
time: 5000, time: 5000,
colors: ['#fcbc25', '#f68057'], colors: ['#fcbc25', '#f68057'],
icon: 'icon-device', icon: 'icon-device',
total: 100000 total: 0
} }
]; ]);
const timePeriod = computed(() => { const timePeriod = computed(() => {
if (hoursNow >= 3 && hoursNow < 8) { if (hoursNow >= 3 && hoursNow < 8) {
@ -185,6 +194,7 @@ const timePeriod = computed(() => {
onMounted(() => { onMounted(() => {
getWeatherData(); getWeatherData();
getCardData();
// socket.initialize(wsUrl); // socket.initialize(wsUrl);
// const webVersion = sessionStorage.getItem('webVersion'); // const webVersion = sessionStorage.getItem('webVersion');
// if (webVersion != '' && webVersion != null) { // 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() { function getWeatherData() {
//获取天气 //获取天气
getWeather().then((res: any) => { getWeather().then((res: any) => {

66
src/views/details/index.vue
View File

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

Write Preview
Loading…
Cancel
Save