数据监控接口更换

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<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'
+  });
+}

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

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

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

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

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']

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

src/views/dashboard/index.vue

@@ -41,7 +41,7 @@
     <section class="dataCard">
       <el-card shadow="always">
         <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
               class="item"
               :style="{ backgroundImage: `linear-gradient(to bottom right, ${item.colors[0]}, ${item.colors[1]})` }"
@@ -50,8 +50,11 @@
               <div class="data">
                 <i class="iconfont" :class="item.icon"></i>
                 <span>
-                  <countTo :start="1" :end="item.value" :duration="item.time"></countTo>
-                  <span v-if="item.total != 0"><i>/</i>{{ item.total }}</span>
+                  <countTo :start="1" :end="item.value" :duration="item.time" :decimals="index != 0 ? 0 : 2"></countTo>
+                  <span v-if="item.total != 0">
+                    <i>/</i>
+                    <countTo :start="1" :end="item.total" :duration="2000" :decimals="index != 0 ? 0 : 2"></countTo>
+                  </span>
                 </span>
               </div>
             </div>
@@ -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<CardData[]>([
   {
     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) => {

src/views/details/index.vue

@@ -183,17 +183,17 @@
     <el-card class="echart" :class="{ echartHide: !searchShow }" shadow="always">
       <div class="sidebar">
         <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
             :class="{ weather: item.sign === 'weather' }"
-            :index="item.centerDeviceCode"
+            :index="item.assetCode"
             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-station" v-else />
-            <el-tooltip class="box-item" effect="dark" :content="item.deviceName" placement="right-start">
-              {{ item.deviceName }}
+            <el-tooltip class="box-item" effect="dark" :content="item.assetName" placement="right-start">
+              {{ item.assetName }}
             </el-tooltip>
           </el-menu-item>
         </el-menu>
@@ -206,10 +206,10 @@
           <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="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 }}
             </div>
-            <div class="average" v-if="filterForm.deviceUuid === 'weatherDataChart'">
+            <div class="average" v-if="filterForm.assetCode === 'weatherDataChart'">
               最小温度 : {{ item.min }} {{ item.paramUnit }}
             </div>
           </div>
@@ -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);