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 1 year ago
parent
54c4bdc8ac
commit
3c9c0336f7
5 changed files with 506 additions and 19 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. 8
      src/api/device/types.ts
  2. 4
      src/types/auto-imports.d.ts
  3. 6
      src/views/details/index.scss
  4. 505
      src/views/details/index.vue
  5. 2
      vite.config.ts

8
src/api/device/types.ts
View File

@ -73,3 +73,11 @@ export interface parameterVo {
updateTime: null; updateTime: null;
version: null; version: null;
} }
export interface seriesVo {
name: string;
type: string;
smooth: boolean;
symbol: string;
paramUnit: string;
data: Array<string | number>;
}

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

@ -5,6 +5,8 @@ declare global {
const ElForm: typeof import('element-plus/es')['ElForm'] const ElForm: typeof import('element-plus/es')['ElForm']
const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] 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 asyncComputed: typeof import('@vueuse/core')['asyncComputed']
const autoResetRef: typeof import('@vueuse/core')['autoResetRef'] const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
const computed: typeof import('vue')['computed'] const computed: typeof import('vue')['computed']
@ -274,6 +276,8 @@ declare module 'vue' {
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']> readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> 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 asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']> readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
readonly computed: UnwrapRef<typeof import('vue')['computed']> readonly computed: UnwrapRef<typeof import('vue')['computed']>

6
src/views/details/index.scss
View File

@ -12,7 +12,11 @@
.comparisonInfo { .comparisonInfo {
.stackedLine { .stackedLine {
width: 100%; width: 100%;
height: 80vh; height: 82vh;
font-size: 1.4rem;
text-align: center;
color: #606266;
line-height: 82vh;
} }
} }
} }

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

@ -1,7 +1,7 @@
<template> <template>
<div class="details"> <div class="details">
<el-card class="search" shadow="always"> <el-card class="search" shadow="always">
<el-form class="searchForm" ref="searchRef" :inline="true" :model="searchForm" label-width="100px"> <el-form class="searchForm" ref="searchRef" :rules="rules" :inline="true" :model="searchForm" label-width="100px">
<el-form-item class="item" label="时间" prop="time"> <el-form-item class="item" label="时间" prop="time">
<el-date-picker <el-date-picker
v-model="searchForm.time" v-model="searchForm.time"
@ -15,7 +15,16 @@
/> />
</el-form-item> </el-form-item>
<el-form-item class="item" label="设备" prop="device"> <el-form-item class="item" label="设备" prop="device">
<el-select v-model="searchForm.device" multiple filterable placeholder="请选择设备" @change="deviceChange"> <el-select
v-model="searchForm.device"
multiple
filterable
clearable
collapse-tags
collapse-tags-tooltip
placeholder="请选择设备"
@change="deviceChange"
>
<el-option <el-option
v-for="item in deviceData" v-for="item in deviceData"
:key="item.centerDeviceCode" :key="item.centerDeviceCode"
@ -30,6 +39,9 @@
multiple multiple
:multiple-limit="multipleLimit" :multiple-limit="multipleLimit"
filterable filterable
clearable
collapse-tags
collapse-tags-tooltip
placeholder="请选择参数" placeholder="请选择参数"
@change="parameterChange" @change="parameterChange"
> >
@ -42,7 +54,15 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item class="item" label="分区" prop="partition"> <el-form-item class="item" label="分区" prop="partition">
<el-select v-model="searchForm.partition" filterable placeholder="请选择分区" @change="partitionChange"> <el-select
v-model="searchForm.partition"
filterable
clearable
collapse-tags
collapse-tags-tooltip
placeholder="请选择分区"
@change="partitionChange"
>
<el-option <el-option
v-for="item in partitionData" v-for="item in partitionData"
:key="item.dictValue" :key="item.dictValue"
@ -51,7 +71,7 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item class="item">
<el-button type="primary" @click="submitForm(searchRef)">确认</el-button> <el-button type="primary" @click="submitForm(searchRef)">确认</el-button>
<el-button @click="resetForm(searchRef)">重置</el-button> <el-button @click="resetForm(searchRef)">重置</el-button>
</el-form-item> </el-form-item>
@ -59,7 +79,7 @@
</el-card> </el-card>
<el-card class="echart" shadow="always"> <el-card class="echart" shadow="always">
<div class="comparisonInfo"> <div class="comparisonInfo">
<div ref="stackedRef" class="stackedLine" /> <div ref="stackedRef" class="stackedLine">暂无数据</div>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -68,14 +88,16 @@
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { Ref } from 'vue'; import { Ref } from 'vue';
const stackedRef: Ref<HTMLElement | any> = ref(null); const stackedRef: Ref<HTMLElement | any> = ref(null);
import type { FormInstance } from 'element-plus'; import type { FormInstance, FormRules } from 'element-plus';
import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index'; import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
import { deetsVo, partitionVo, parameterVo } from '@/api/device/types'; import { deetsVo, partitionVo, parameterVo, seriesVo } from '@/api/device/types';
const searchRef = ref<FormInstance>(); const searchRef = ref<FormInstance>();
const defaultTime = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00' const defaultTime = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
const multipleLimit = ref(0); const multipleLimit = ref(0);
const parameterLimit = ref(0);
// const seriesData = ref<seriesVo[]>();
const searchForm = reactive({ const searchForm = reactive({
time: '', time: '',
device: [], device: [],
@ -89,6 +111,34 @@ const filterForm = reactive({
paramCode: '', paramCode: '',
partion: '' partion: ''
}); });
const rules = reactive<FormRules>({
time: [
{
required: true,
message: '请选择时间区间',
trigger: 'change'
}
],
device: [
{
required: true,
message: '请选择设备',
trigger: 'change'
}
],
parameter: [
{
required: true,
message: '请选择参数',
trigger: 'change'
}
]
});
const resetInit = {
mainInfos: [],
additionalInfo: null
};
const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23']; const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
const deviceData = ref<deetsVo[]>(); const deviceData = ref<deetsVo[]>();
const parameterData = ref<parameterVo[]>(); const parameterData = ref<parameterVo[]>();
@ -102,7 +152,318 @@ const partitionData = ref<partitionVo[]>();
// console.log('now--', now); // console.log('now--', now);
// data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]); // data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
// } // }
const options = {
color: colors,
title: {
text: '',
x: 'center',
y: 'center',
textStyle: {
fontSize: 14,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['']
},
grid: {
top: '80',
left: '100',
right: '150',
bottom: '50',
containLabel: true
},
// toolbox: {
// feature: {
// restore: {}
// }
// },
dataZoom: [
{
type: 'inside',
startValue: '0'
},
{
startValue: '0'
}
],
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [{}],
// yAxis: [
// {
// type: 'value',
// name: '瞬时流量(m³/h)',
// position: 'left',
// alignTicks: true,
// scale: true, //自适应
// minInterval: 1, //最小间距
// nameTextStyle: {
// fontSize: 12,
// padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
// },
// axisTick: {
// // 轴刻度
// show: false
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// }
// },
// {
// type: 'value',
// name: '瞬时热量(JG/h)',
// position: 'right',
// alignTicks: true,
// scale: true, //自适应
// minInterval: 1, //最小间距
// nameTextStyle: {
// fontSize: 12,
// padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
// },
// axisTick: {
// // 轴刻度
// show: false
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[1]
// }
// }
// },
// {
// type: 'value',
// name: '累计热量(JG)',
// position: 'right',
// alignTicks: true,
// offset: 100,
// scale: true, //自适应
// minInterval: 1, //最小间距
// nameTextStyle: {
// fontSize: 12,
// padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
// },
// axisTick: {
// // 轴刻度
// show: false
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[2]
// }
// }
// }
// ],
series: [{}]
// series: [
// {
// name: '华尔街3号站',
// type: 'line',
// smooth: true,
// symbol: 'none',
// data: [
// ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
// ]
// },
// {
// name: '颐和城',
// type: 'line',
// smooth: true,
// symbol: 'none',
// data: [
// ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
// ]
// },
// {
// name: '李相',
// type: 'line',
// smooth: true,
// symbol: 'none',
// data: [
// ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
// ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
// ]
// }
// ]
};
const options1 = { const options1 = {
color: colors,
title: { title: {
text: '多设备单参数' text: '多设备单参数'
}, },
@ -392,6 +753,7 @@ const options2 = {
name: '瞬时流量(m³/h)', name: '瞬时流量(m³/h)',
position: 'left', position: 'left',
alignTicks: true, alignTicks: true,
offset: 0,
scale: true, //自适应 scale: true, //自适应
minInterval: 1, //最小间距 minInterval: 1, //最小间距
nameTextStyle: { nameTextStyle: {
@ -414,6 +776,7 @@ const options2 = {
name: '瞬时热量(JG/h)', name: '瞬时热量(JG/h)',
position: 'right', position: 'right',
alignTicks: true, alignTicks: true,
offset: 0,
scale: true, //自适应 scale: true, //自适应
minInterval: 1, //最小间距 minInterval: 1, //最小间距
nameTextStyle: { nameTextStyle: {
@ -489,6 +852,7 @@ const options2 = {
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: 'none', symbol: 'none',
yAxisIndex: 0,
data: [ data: [
['2023-10-01 08:00:00', Math.round(Math.random() * 500)], ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
['2023-10-01 09:00:00', Math.round(Math.random() * 500)], ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
@ -682,19 +1046,11 @@ const options2 = {
}; };
onMounted(() => { onMounted(() => {
// 图表初始化
const chart = echarts.init(stackedRef.value);
chart.setOption(options1);
getDevice(); getDevice();
getParam(); getParam();
getPortion(); getPortion();
getDeviceInfo(); // const chart = echarts.init(stackedRef.value);
// chart.setOption(options2);
// 大小自适应
window.addEventListener('resize', () => {
chart.resize();
});
}); });
function getDevice() { function getDevice() {
@ -729,8 +1085,121 @@ function getDeviceInfo() {
const params = filterForm; const params = filterForm;
getDeviceInfos(params).then((res: any) => { getDeviceInfos(params).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
init(res.data);
}
});
}
function init(data: any) {
//折线图实例化
options.yAxis = [];
options.legend.data = [];
options.series = [];
if (data.mainInfos.length === 0) {
options.title.text = '暂无数据';
} else {
options.title.text = data.additionalInfo.name;
options.title.x = 'top';
options.title.y = 'left';
if (multipleLimit.value === 0 && parameterLimit.value === 1) {
console.log('单设备多参数');
data.mainInfos.map((item: seriesVo, index: number) => {
const offsetData = index === 0 ? 0 : index === 1 ? 0 : (index - 1) * 100;
console.log('offsetData--', offsetData);
options.legend.data.push(item.name);
options.yAxis.push({
type: 'value',
name: `${item.name}(${item.paramUnit})`,
position: `${index === 0 ? 'left' : 'right'}`,
alignTicks: true,
offset: offsetData,
scale: true, //自适应
// minInterval: 1, //最小间距
nameTextStyle: {
fontSize: 12,
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
},
axisTick: {
// 轴刻度
show: false
},
axisLine: {
show: true,
lineStyle: {
color: colors[index]
}
} }
}); });
options.series.push({
name: item.name,
type: 'line',
smooth: true,
symbol: 'none',
yAxisIndex: index,
data: item.data
});
});
} else {
console.log('多设备单参数');
options.yAxis.push({
type: 'value',
scale: true, //自适应
minInterval: 1, //最小间距
name: `${data.additionalInfo.name}(${data.additionalInfo.unit})`,
nameTextStyle: {
fontSize: 12,
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
},
axisTick: {
// 轴刻度
show: false
}
});
data.mainInfos.map((item: seriesVo) => {
options.legend.data.push(item.name);
options.series.push({
name: item.name,
type: 'line',
smooth: true,
symbol: 'none',
data: item.data
});
});
}
}
const chart = echarts.init(stackedRef.value);
chart.clear();
chart.resize();
console.log('options--', options);
chart.setOption(options);
// this.option.title.text = this.title;
// this.option.xAxis.data = this.data.xaxis;
// this.option.series = [];
// this.option.legend.data = [];
// this.data.data.forEach((item, index) => {
// this.option.legend.data.push(item.text);
// this.option.series.push({
// name: item.text,
// data: item.data,
// symbolSize: 9,
// itemStyle: {
// normal: {
// color: this.color[index % this.color.length], //折线点的颜色
// lineStyle: {
// color: this.color[index % this.color.length], //折线的颜色
// width: 1 //设置线条粗细
// }
// }
// },
// type: 'line'
// });
// });
// this.option && this.myChart.setOption(this.option);
// 自适应
// window.addEventListener('resize', () => {
// chart.resize();
// });
} }
function timeChange(res: any) { function timeChange(res: any) {
@ -747,6 +1216,7 @@ function deviceChange(res: any) {
} }
function parameterChange(res: any) { function parameterChange(res: any) {
//参数选择确认 //参数选择确认
parameterLimit.value = res.length <= 1 ? 0 : 1;
filterForm.paramCode = res.toString(); filterForm.paramCode = res.toString();
} }
function partitionChange(res: string) { function partitionChange(res: string) {
@ -775,6 +1245,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
filterForm.deviceUuid = ''; filterForm.deviceUuid = '';
filterForm.paramCode = ''; filterForm.paramCode = '';
filterForm.partion = ''; filterForm.partion = '';
init(resetInit);
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

2
vite.config.ts
View File

@ -46,7 +46,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
proxy: { proxy: {
[env.VITE_APP_BASE_API]: { [env.VITE_APP_BASE_API]: {
// target: 'http://172.1.2.196:9010/', //本地接口地址 // target: 'http://172.1.2.196:9010/', //本地接口地址
target: 'http://172.1.2.93:9010/', //本地接口地址 target: 'http://172.1.2.139:9010/', //本地接口地址
// target: 'http://10.10.10.56:9010/', //线上测试接口地址 // target: 'http://10.10.10.56:9010/', //线上测试接口地址
changeOrigin: true, changeOrigin: true,
rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '') rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')

Write Preview
Loading…
Cancel
Save