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
1d0824607d
commit
56283890c2
8 changed files with 63 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/api/dataVisual/index.ts
  2. 1
      src/assets/icons/icon_curve.svg
  3. 10
      src/types/auto-imports.d.ts
  4. 2
      src/utils/request.ts
  5. 9
      src/views/data-visual/components/header.vue
  6. 14
      src/views/data-visual/components/hxPress.vue
  7. 14
      src/views/data-visual/components/hxTemp.vue
  8. 26
      src/views/data-visual/components/table.vue

10
src/api/dataVisual/index.ts
View File

@ -64,6 +64,16 @@ export function getPressChartPolling(queryParams: any) {
});
}
/**
* 获取表格header
*/
export function getTableHeader(): AxiosPromise<[]> {
return request({
url: '/dc/heatSourceScreen/heatSource/table/header',
method: 'get'
});
}
/**
* 获取换热站Table列表
*/

1
src/assets/icons/icon_curve.svg
View File

@ -0,0 +1 @@
<svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version 1.2.6" ><path fill="rgb(220,143,60)" stroke="rgb(220,143,60)" stroke-width="1" opacity="0.2" d="M 14.5 8 L 15.5 10 Q 12.7 10.7 14.5 8 Z " /><path fill="rgb(220,143,60)" stroke="rgb(220,143,60)" stroke-width="1" opacity="0.2" d="M 26.5 9 L 27.5 11 L 26.5 9 Z " /><path fill="rgb(220,143,60)" stroke="rgb(220,143,60)" stroke-width="1" opacity="0.2" d="M 23.5 11 L 22.5 13 L 23.5 11 Z " /><path fill="rgb(220,143,60)" stroke="rgb(220,143,60)" stroke-width="1" opacity="0.2" d="M 22.5 14 Q 24.8 13.3 24 15.5 L 22.5 14 Z " /><path fill="rgb(220,143,60)" stroke="rgb(220,143,60)" stroke-width="1" opacity="0.2" d="M 21.5 16 L 22.5 18 L 21.5 16 Z " /><path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0.01568627450980392" d="M 0 0 L 30 0 L 30 24.5 L 29 24.5 Q 30.3 17.8 26 16.5 L 29 16 Q 29.8 11 26.5 9 L 21.5 13 L 19 10.5 L 17 3 L 13 3 L 13 4.5 L 8.5 12 Q 4.1 10.5 5 13.5 L 5.5 15 L 4 14.5 L 3.5 17 L 3 4 L 1 4.5 L 1 27 L 5 29.5 L 0 30 L 0 0 Z " /><path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0.03529411764705882" d="M 14.5 11 L 17 12.5 L 21.5 23 Q 24.8 24.1 24 21.5 L 26.5 17 Q 30.5 18.7 29 25 L 3.5 25 L 3 24.5 L 3 17.5 L 4.5 14 L 6.5 14 Q 13.5 15.5 13 12.5 L 14.5 11 Z " /><path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0.03529411764705882" d="M 20.5 12 L 23 16.5 L 21 15.5 L 20.5 12 Z " /><path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0.03529411764705882" d="M 3.5 27 L 29.5 27 L 30 30 L 5.5 30 L 3.5 27 Z " /><path fill="rgb(251,166,72)" stroke="rgb(251,166,72)" stroke-width="1" opacity="0.9254901960784314" d="M 14.5 3 Q 16.8 2.3 16 4.5 L 22.5 18 L 24 14 L 22 13.5 L 26.5 10 L 29 16 L 26.5 15 L 22.5 23 Q 20.3 23.8 21 21.5 L 14.5 8 L 11.5 14 Q 3.9 15.5 5 12 Q 9.6 13.3 11 10.5 L 14.5 3 Z " /><path fill="rgb(251,166,72)" stroke="rgb(251,166,72)" stroke-width="1" opacity="0.9254901960784314" d="M 1 4 L 3 4.5 L 3 25 L 29.5 25 L 30 27 L 1 27 L 1 4 Z " /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

10
src/types/auto-imports.d.ts
View File

@ -2,6 +2,11 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElForm: typeof import('element-plus/es')['ElForm']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const ElNotification: typeof import('element-plus/es')['ElNotification']
const NEllipsis: typeof import('naive-ui')['NEllipsis']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
const computed: typeof import('vue')['computed']
@ -268,6 +273,11 @@ import { UnwrapRef } from 'vue'
declare module 'vue' {
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
readonly NEllipsis: UnwrapRef<typeof import('naive-ui')['NEllipsis']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
readonly computed: UnwrapRef<typeof import('vue')['computed']>

2
src/utils/request.ts
View File

@ -9,6 +9,7 @@
import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
import { useUserStoreHook } from '@/store/modules/user';
import { getUrlRouter } from '@/utils/index';
import { useDateFormat } from '@vueuse/core';
// 创建 axios 实例
const service = axios.create({
@ -55,6 +56,7 @@ service.interceptors.response.use(
});
} else if (code === 500) {
ElMessage({ message: msg || '未知错误', type: 'error' });
console.log(msg || '未知错误', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
return Promise.reject(new Error(msg));
} else if (code === 601) {
ElMessage({ message: msg || '未知错误', type: 'warning' });

9
src/views/data-visual/components/header.vue
View File

@ -45,7 +45,7 @@
<span class="tooltip">返回</span>
</div>
<div class="menuTabs">
<el-tabs v-model="activeTabs" class="tabs">
<el-tabs v-model="activeTabs" class="tabs" @tab-change="menuTabs">
<el-tab-pane label="能源站概览" name="0"></el-tab-pane>
<el-tab-pane label="全网平衡" name="1"></el-tab-pane>
<el-tab-pane label="负荷预测" name="2"></el-tab-pane>
@ -90,7 +90,7 @@ const defaultProps = {
label: 'deptName',
value: 'deptId'
};
const activeTabs = ref('1');
const activeTabs = ref('0');
onMounted(() => {
getWeatherData();
@ -136,6 +136,11 @@ function getDeptData() {
}
});
}
function menuTabs(name: any) {
if (name != '0') {
ElMessage('敬请期待！');
}
}
</script>
<style lang="scss" scoped>
.headerInfo {

14
src/views/data-visual/components/hxPress.vue
View File

@ -1052,7 +1052,7 @@ const options = {
};
onMounted(() => {
console.log('起始时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
// console.log('起始时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
// init(dataData);
});
watchEffect(() => {
@ -1098,7 +1098,7 @@ function getDevicePolling() {
}
if (res.data.additionalInfo != null) {
currentEndTime.value = res.data.additionalInfo.endTime;
console.log(currentEndTime.value, res.data.mainInfos);
// console.log(currentEndTime.value, res.data.mainInfos);
}
options.series.forEach((originalObj: any) => {
res.data.mainInfos.forEach((newObj: any) => {
@ -1109,7 +1109,7 @@ function getDevicePolling() {
}
});
});
console.log(options.series);
// console.log(options.series);
const chart = echarts.init(hxPressRef.value);
chart.setOption(options);
// mainInfoList.value = res.data.mainInfos;
@ -1130,14 +1130,14 @@ function init(data: any) {
mapEcharts.value = chart;
chart.clear();
chart.resize();
console.log('options--', options);
// 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);
// console.log('offsetData--', offsetData);
options.yAxis.push({
type: 'value',
name: `${item.name}(${item.unit})`,
@ -1197,9 +1197,9 @@ function init(data: any) {
});
mapEcharts.value = chart;
chart.resize();
console.log('options--', options);
// console.log('options--', options);
chart.setOption(options);
console.log('结束时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
// console.log('结束时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
}
onUnmounted(() => {
//组件注销前清除setTimeout

14
src/views/data-visual/components/hxTemp.vue
View File

@ -546,7 +546,7 @@ const options = {
};
onMounted(() => {
console.log('起始时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
// console.log('起始时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
// init(dataData);
});
watchEffect(() => {
@ -592,7 +592,7 @@ function getDevicePolling() {
}
if (res.data.additionalInfo != null) {
currentEndTime.value = res.data.additionalInfo.endTime;
console.log(currentEndTime.value, res.data.mainInfos);
// console.log(currentEndTime.value, res.data.mainInfos);
}
options.series.forEach((originalObj: any) => {
res.data.mainInfos.forEach((newObj: any) => {
@ -603,7 +603,7 @@ function getDevicePolling() {
}
});
});
console.log(options.series);
// console.log(options.series);
const chart = echarts.init(hxTempRef.value);
chart.setOption(options);
// mainInfoList.value = res.data.mainInfos;
@ -624,14 +624,14 @@ function init(data: any) {
mapEcharts.value = chart;
chart.clear();
chart.resize();
console.log('options--', options);
// 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);
// console.log('offsetData--', offsetData);
options.yAxis.push({
type: 'value',
name: `${item.name}(${item.unit})`,
@ -691,9 +691,9 @@ function init(data: any) {
});
mapEcharts.value = chart;
chart.resize();
console.log('options--', options);
// console.log('options--', options);
chart.setOption(options);
console.log('结束时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
// console.log('结束时间:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
}
onUnmounted(() => {
//组件注销前清除setTimeout

26
src/views/data-visual/components/table.vue
View File

@ -34,7 +34,15 @@
style="fill: currentColor; width: 15px; height: 15px; color: red"
v-if="row.deviceuuid.deviceStatus === 2"
/>
<span class="name">{{ row.gTitle }}</span>
</div>
</template>
<template #historicalCurves_default="{ row }">
<div class="title">
<svg-icon
icon-class="icon_curve"
style="fill: currentColor; width: 15px; height: 15px; cursor: pointer"
@click="urvesClick(row)"
/>
</div>
</template>
<template #pager>
@ -56,8 +64,8 @@
</template>
<script lang="ts" setup>
import { VxeTableEvents, VxeColumnPropTypes, VxePagerEvents } from 'vxe-table';
import { getTableHeader } from '@/api/table/list';
import { getTableData } from '@/api/dataVisual/index';
// import { getTableHeader } from '@/api/table/list';
import { getTableHeader, getTableData } from '@/api/dataVisual/index';
import { TableVo } from '@/api/table/types';
import { tableStore } from '@/store/modules/table';
import { debounce } from '@/utils/index';
@ -142,7 +150,7 @@ function tableHeader() {
function tableDatas() {
//获取表格数据
// const params = menuKey.value;
console.log('接口开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
// console.log('接口开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
const params = {
pageNum: tablePage.currentPage,
pageSize: tablePage.pageSize,
@ -166,7 +174,7 @@ function tableDatas() {
// gridOptions.data = res.data;
loadingShow.value = false;
tableDataClick();
console.log('接口结束:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
// console.log('接口结束:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
}
});
}
@ -204,14 +212,18 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
};
const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
//渲染表格字段
console.log('渲染开始:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
// 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);
// console.log('渲染完成:', useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
return cellData;
};
function urvesClick(row: any) {
//点击历史曲线
counterStore.orgStore(row.deviceuuid);
}
onUnmounted(() => {
//组件注销前清除setTimeout

Write Preview
Loading…
Cancel
Save