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
a24a3d2aab
commit
54c4bdc8ac
9 changed files with 1273 additions and 179 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. 44
      src/api/device/index.ts
  2. 33
      src/api/device/types.ts
  3. 4
      src/types/auto-imports.d.ts
  4. 202
      src/views/details/index - 副本 (2).vue
  5. 187
      src/views/details/index - 副本.vue
  6. 7
      src/views/details/index.scss
  7. 781
      src/views/details/index.vue
  8. 152
      src/views/monitoring/screen/components/main.vue
  9. 6
      vite.config.ts

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

@ -29,7 +29,7 @@ export function getDept(): AxiosPromise<[]> {
*/
export function getDeviceList(params: number): AxiosPromise<deviceVo> {
return request({
url: '/bi/configuration/getDeviceListByDept/'+params,
url: '/bi/configuration/getDeviceListByDept/' + params,
method: 'get'
});
}
@ -41,7 +41,7 @@ export function getDeviceList(params: number): AxiosPromise<deviceVo> {
*/
export function getViewInfo(params: number): AxiosPromise<deviceVo> {
return request({
url: '/bi/configuration/getViewInfoById/'+params,
url: '/bi/configuration/getViewInfoById/' + params,
method: 'get'
});
}
@ -58,3 +58,43 @@ export function editConfig(data: any) {
data: data
});
}
/**
* 获取图表详情设备筛选项
*/
export function getDevices(): AxiosPromise<[]> {
return request({
url: '/dc/dcDeviceEcharts/getDevices',
method: 'get'
});
}
/**
* 获取图表详情参数筛选项
*/
export function getParams(): AxiosPromise<[]> {
return request({
url: '/dc/dcDeviceEcharts/getParams',
method: 'get'
});
}
/**
* 获取图表详情分区筛选项
*/
export function getPortions(): AxiosPromise<[]> {
return request({
url: '/dc/dcDeviceEcharts/getPortions',
method: 'get'
});
}
/**
* 获取折线图数据
*
* @param data
*/
export function getDeviceInfos(data: any) {
return request({
url: '/dc/dcDeviceEcharts/getDeviceInfos',
method: 'post',
data: data
});
}

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

@ -40,3 +40,36 @@ export interface headerVo {
ctrlFlag: string;
paramUnit: string;
}
export interface deetsVo {
centerDeviceCode: string;
deviceName: string;
}
export interface partitionVo {
createBy: string;
createTime: string;
cssClass: null;
default: boolean;
dictCode: number;
dictLabel: string;
dictSort: number;
dictType: string;
dictValue: string;
isDefault: null;
listClass: string;
remark: null;
status: string;
updateBy: null;
updateTime: null;
}
export interface parameterVo {
classType: string;
createTime: null;
deleteTime: null;
id: number;
note: null;
paramClassCode: string;
paramClassName: string;
paramUnit: string;
updateTime: null;
version: null;
}

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

@ -5,8 +5,6 @@ declare global {
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']
@ -276,8 +274,6 @@ declare module 'vue' {
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']>

202
src/views/details/index - 副本 (2).vue
View File

@ -0,0 +1,202 @@
<template>
<div class="details">
<el-card class="search" shadow="always">
<el-form ref="searchRef" :inline="true" :model="searchForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="时间" prop="time">
<el-date-picker
v-model="searchForm.time"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="defaultTime1"
/>
</el-form-item>
<el-form-item label="颗粒度" prop="particle">
<el-select v-model="searchForm.particle" placeholder="请选择">
<el-option v-for="item in particleData" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="设备" prop="device">
<el-select v-model="searchForm.device" placeholder="请选择">
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="参数" prop="parameter">
<el-select v-model="searchForm.parameter" placeholder="请选择">
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(searchRef)">确认</el-button>
<el-button @click="resetForm(searchRef)">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="echart" shadow="always">
<div class="comparisonInfo">
<div ref="stackedRef" class="stackedLine" />
</div>
</el-card>
</div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { Ref } from 'vue';
const stackedRef: Ref<HTMLElement | any> = ref(null);
import type { FormInstance } from 'element-plus';
const searchRef = ref<FormInstance>();
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
const searchForm = reactive({
time: '',
particle: '',
device: '',
parameter: ''
});
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(valid => {
if (valid) {
console.log('submit!');
} else {
console.log('error submit!');
return false;
}
});
};
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
const particleData = [
{ label: '分钟', value: 1 },
{ label: '小时', value: 2 }
];
const optionss = [
{
value: 'Option1',
label: 'Option1'
},
{
value: 'Option2',
label: 'Option2'
}
];
const colors = ['#EE6666', '#91CC75', '#5470C6'];
const options = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['回温', '供压', '回压']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: ['2021', '2022', '2023', '2024', '2025', '2026', '2027', '2028', '2029', '2030', '2031', '2032']
}
],
yAxis: [
{
type: 'value',
name: '回温',
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '供压',
position: 'right',
alignTicks: true,
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '回压',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '回温',
type: 'line',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '供压',
type: 'line',
yAxisIndex: 2,
data: [5.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
},
{
name: '回压',
type: 'line',
yAxisIndex: 1,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
};
onMounted(() => {
// 图表初始化
const chart = echarts.init(stackedRef.value);
chart.setOption(options);
// 大小自适应
window.addEventListener('resize', () => {
chart.resize();
});
});
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>

187
src/views/details/index - 副本.vue
View File

@ -0,0 +1,187 @@
<template>
<div class="details">
<el-card class="search" shadow="always">
<el-form ref="searchRef" :inline="true" :model="searchForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="时间" prop="time">
<el-date-picker
v-model="searchForm.time"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="defaultTime1"
/>
</el-form-item>
<!-- <el-form-item label="颗粒度" prop="particle">
<el-select v-model="searchForm.particle" placeholder="请选择">
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item> -->
<el-form-item label="设备" prop="device">
<el-select v-model="searchForm.device" placeholder="请选择">
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="参数" prop="parameter">
<el-select v-model="searchForm.parameter" placeholder="请选择">
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(searchRef)">确认</el-button>
<el-button @click="resetForm(searchRef)">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="echart" shadow="always">
<div class="comparisonInfo">
<div ref="stackedRef" class="stackedLine" />
</div>
</el-card>
</div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { Ref } from 'vue';
const stackedRef: Ref<HTMLElement | any> = ref(null);
import type { FormInstance } from 'element-plus';
const searchRef = ref<FormInstance>();
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
const searchForm = reactive({
time: '',
particle: '',
device: '',
parameter: ''
});
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(valid => {
if (valid) {
console.log('submit!');
} else {
console.log('error submit!');
return false;
}
});
};
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
const optionss = [
{
value: 'Option1',
label: 'Option1'
},
{
value: 'Option2',
label: 'Option2'
},
{
value: 'Option3',
label: 'Option3'
},
{
value: 'Option4',
label: 'Option4'
},
{
value: 'Option5',
label: 'Option5'
}
];
const options = {
title: {
text: 'Temperature Change in the Coming Week'
},
tooltip: {
trigger: 'axis'
},
legend: {},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: 'Highest',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
},
{
name: 'Lowest',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
};
onMounted(() => {
// 图表初始化
const chart = echarts.init(stackedRef.value);
chart.setOption(options);
// 大小自适应
window.addEventListener('resize', () => {
chart.resize();
});
});
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>

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

@ -2,12 +2,17 @@
padding: 1.5rem;
.search {
margin-bottom: 1.5rem;
.searchForm {
.item {
margin-bottom: 0;
}
}
}
.echart {
.comparisonInfo {
.stackedLine {
width: 100%;
height: 500px;
height: 80vh;
}
}
}

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

@ -1,29 +1,54 @@
<template>
<div class="details">
<el-card class="search" shadow="always">
<el-form ref="searchRef" :inline="true" :model="searchForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="时间" prop="time">
<el-form class="searchForm" ref="searchRef" :inline="true" :model="searchForm" label-width="100px">
<el-form-item class="item" label="时间" prop="time">
<el-date-picker
v-model="searchForm.time"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="defaultTime1"
format="YYYY/MM/DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
:default-time="defaultTime"
@change="timeChange"
/>
</el-form-item>
<el-form-item label="颗粒度" prop="particle">
<el-select v-model="searchForm.particle" placeholder="请选择">
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
<el-form-item class="item" label="设备" prop="device">
<el-select v-model="searchForm.device" multiple filterable placeholder="请选择设备" @change="deviceChange">
<el-option
v-for="item in deviceData"
:key="item.centerDeviceCode"
:label="item.deviceName"
:value="item.centerDeviceCode"
/>
</el-select>
</el-form-item>
<el-form-item label="设备" prop="device">
<el-select v-model="searchForm.device" placeholder="请选择">
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
<el-form-item class="item" label="参数" prop="parameter">
<el-select
v-model="searchForm.parameter"
multiple
:multiple-limit="multipleLimit"
filterable
placeholder="请选择参数"
@change="parameterChange"
>
<el-option
v-for="item in parameterData"
:key="item.paramClassCode"
:label="item.paramClassName"
:value="item.paramClassCode"
/>
</el-select>
</el-form-item>
<el-form-item label="参数" prop="parameter">
<el-select v-model="searchForm.parameter" placeholder="请选择">
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
<el-form-item class="item" label="分区" prop="partition">
<el-select v-model="searchForm.partition" filterable placeholder="请选择分区" @change="partitionChange">
<el-option
v-for="item in partitionData"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item>
@ -45,142 +70,712 @@ import { Ref } from 'vue';
const stackedRef: Ref<HTMLElement | any> = ref(null);
import type { FormInstance } from 'element-plus';
import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
import { deetsVo, partitionVo, parameterVo } from '@/api/device/types';
const searchRef = ref<FormInstance>();
const defaultTime1 = 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 searchForm = reactive({
time: '',
particle: '',
device: '',
parameter: ''
device: [],
parameter: [],
partition: ''
});
const filterForm = reactive({
startTime: '',
endTime: '',
deviceUuid: '',
paramCode: '',
partion: ''
});
const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
const deviceData = ref<deetsVo[]>();
const parameterData = ref<parameterVo[]>();
const partitionData = ref<partitionVo[]>();
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(valid => {
if (valid) {
console.log('submit!');
} else {
console.log('error submit!');
return false;
// let base = +new Date();
// let oneDay = 24 * 3600 * 1000;
// let data = [[base, Math.random() * 300]];
// for (let i = 1; i < 200; i++) {
// let now = new Date((base += oneDay));
// console.log('now--', now);
// data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
// }
const options1 = {
title: {
text: '多设备单参数'
},
tooltip: {
trigger: 'axis'
// position: function (pt: any) {
// return [pt[0], '10%'];
// }
},
legend: {
data: ['华尔街3号站', '颐和城', '李相', '汪家新村', '白沙岛']
},
grid: {
top: '80',
left: '100',
right: '150',
bottom: '50',
containLabel: true
},
toolbox: {
feature: {
restore: {}
}
});
};
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
};
const optionss = [
{
value: 'Option1',
label: 'Option1'
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
scale: true, //自适应
minInterval: 1, //最小间距
name: '单位()',
nameTextStyle: {
color: '#000',
fontSize: 12,
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
},
axisTick: {
// 轴刻度
show: false
}
// boundaryGap: [0, '100%']
},
dataZoom: [
{
value: 'Option2',
label: 'Option2'
type: 'inside',
startValue: '0'
// start: 0,
// end: 20
},
{
value: 'Option3',
label: 'Option3'
startValue: '0'
// start: 0,
// end: 20
}
],
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)]
]
},
{
value: 'Option4',
label: 'Option4'
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)]
]
},
{
value: 'Option5',
label: 'Option5'
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 options = {
const options2 = {
color: colors,
title: {
text: 'Temperature Change in the Coming Week'
text: '单设备多参数'
},
tooltip: {
trigger: 'axis'
// position: function (pt: any) {
// return [pt[0], '10%'];
// }
},
legend: {
data: ['瞬时流量', '瞬时热量', '累计热量']
},
grid: {
top: '80',
left: '100',
right: '150',
bottom: '50',
containLabel: true
},
legend: {},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
restore: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
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',
axisLabel: {
formatter: '{value} °C'
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]
}
}
},
series: [
{
name: 'Highest',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
type: 'value',
name: '累计热量(JG)',
position: 'right',
alignTicks: true,
offset: 100,
scale: true, //自适应
minInterval: 1, //最小间距
nameTextStyle: {
fontSize: 12,
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
axisTick: {
// 轴刻度
show: false
},
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
}
}
],
// yAxis: {
// type: 'value',
// scale: true, //自适应
// minInterval: 1, //最小间距
// name: '单位()',
// nameTextStyle: {
// color: '#000',
// fontSize: 12,
// padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
// },
// axisTick: {
// // 轴刻度
// show: false
// }
// },
dataZoom: [
{
type: 'inside',
startValue: '0'
// start: 0,
// end: 20
},
{
name: 'Lowest',
startValue: '0'
// start: 0,
// end: 20
}
],
series: [
{
name: '瞬时流量',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
},
markLine: {
smooth: true,
symbol: 'none',
data: [
{ type: 'average', name: 'Avg' },
[
['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',
x: '90%',
yAxis: 'max'
yAxisIndex: 1,
data: [
['2023-10-01 08:00:00', Math.round(Math.random() * 100)],
['2023-10-01 09:00:00', Math.round(Math.random() * 100)],
['2023-10-01 10:00:00', Math.round(Math.random() * 100)],
['2023-10-01 11:00:00', Math.round(Math.random() * 100)],
['2023-10-01 12:00:00', Math.round(Math.random() * 100)],
['2023-10-01 13:00:00', Math.round(Math.random() * 100)],
['2023-10-01 14:00:00', Math.round(Math.random() * 100)],
['2023-10-01 15:00:00', Math.round(Math.random() * 100)],
['2023-10-02 08:00:00', Math.round(Math.random() * 100)],
['2023-10-02 09:00:00', Math.round(Math.random() * 100)],
['2023-10-02 10:00:00', Math.round(Math.random() * 100)],
['2023-10-02 11:00:00', Math.round(Math.random() * 100)],
['2023-10-02 12:00:00', Math.round(Math.random() * 100)],
['2023-10-02 13:00:00', Math.round(Math.random() * 100)],
['2023-10-02 14:00:00', Math.round(Math.random() * 100)],
['2023-10-02 15:00:00', Math.round(Math.random() * 100)],
['2023-10-03 08:00:00', Math.round(Math.random() * 100)],
['2023-10-03 09:00:00', Math.round(Math.random() * 100)],
['2023-10-03 10:00:00', Math.round(Math.random() * 100)],
['2023-10-03 11:00:00', Math.round(Math.random() * 100)],
['2023-10-03 12:00:00', Math.round(Math.random() * 100)],
['2023-10-03 13:00:00', Math.round(Math.random() * 100)],
['2023-10-03 14:00:00', Math.round(Math.random() * 100)],
['2023-10-03 15:00:00', Math.round(Math.random() * 100)],
['2023-10-04 08:00:00', Math.round(Math.random() * 100)],
['2023-10-04 09:00:00', Math.round(Math.random() * 100)],
['2023-10-04 10:00:00', Math.round(Math.random() * 100)],
['2023-10-04 11:00:00', Math.round(Math.random() * 100)],
['2023-10-04 12:00:00', Math.round(Math.random() * 100)],
['2023-10-04 13:00:00', Math.round(Math.random() * 100)],
['2023-10-04 14:00:00', Math.round(Math.random() * 100)],
['2023-10-04 15:00:00', Math.round(Math.random() * 100)],
['2023-10-05 08:00:00', Math.round(Math.random() * 100)],
['2023-10-05 09:00:00', Math.round(Math.random() * 100)],
['2023-10-05 10:00:00', Math.round(Math.random() * 100)],
['2023-10-05 11:00:00', Math.round(Math.random() * 100)],
['2023-10-05 12:00:00', Math.round(Math.random() * 100)],
['2023-10-05 13:00:00', Math.round(Math.random() * 100)],
['2023-10-05 14:00:00', Math.round(Math.random() * 100)],
['2023-10-05 15:00:00', Math.round(Math.random() * 100)],
['2023-10-06 08:00:00', Math.round(Math.random() * 100)],
['2023-10-06 09:00:00', Math.round(Math.random() * 100)],
['2023-10-06 10:00:00', Math.round(Math.random() * 100)],
['2023-10-06 11:00:00', Math.round(Math.random() * 100)],
['2023-10-06 12:00:00', Math.round(Math.random() * 100)],
['2023-10-06 13:00:00', Math.round(Math.random() * 100)],
['2023-10-06 14:00:00', Math.round(Math.random() * 100)],
['2023-10-06 15:00:00', Math.round(Math.random() * 100)],
['2023-10-07 08:00:00', Math.round(Math.random() * 100)],
['2023-10-07 09:00:00', Math.round(Math.random() * 100)],
['2023-10-07 10:00:00', Math.round(Math.random() * 100)],
['2023-10-07 11:00:00', Math.round(Math.random() * 100)],
['2023-10-07 12:00:00', Math.round(Math.random() * 100)],
['2023-10-07 13:00:00', Math.round(Math.random() * 100)],
['2023-10-07 14:00:00', Math.round(Math.random() * 100)],
['2023-10-07 15:00:00', Math.round(Math.random() * 100)]
]
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
name: '累计热量',
type: 'line',
smooth: true,
symbol: 'none',
yAxisIndex: 2,
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)]
]
}
}
]
};
onMounted(() => {
// 图表初始化
const chart = echarts.init(stackedRef.value);
chart.setOption(options);
chart.setOption(options1);
getDevice();
getParam();
getPortion();
getDeviceInfo();
// 大小自适应
window.addEventListener('resize', () => {
chart.resize();
});
});
function getDevice() {
//获取设备
const params = {};
getDevices().then((res: any) => {
if (res.code === 200) {
deviceData.value = res.data;
}
});
}
function getParam() {
//获取参数
const params = {};
getParams().then((res: any) => {
if (res.code === 200) {
parameterData.value = res.data;
}
});
}
function getPortion() {
//获取分区
const params = {};
getPortions().then((res: any) => {
if (res.code === 200) {
partitionData.value = res.data;
}
});
}
function getDeviceInfo() {
//获取折线图数据
const params = filterForm;
getDeviceInfos(params).then((res: any) => {
if (res.code === 200) {
}
});
}
function timeChange(res: any) {
//时间区间确认
filterForm.startTime = res[0];
filterForm.endTime = res[1];
}
function deviceChange(res: any) {
//设备选择确认
searchForm.parameter = [];
multipleLimit.value = res.length <= 1 ? 0 : 1;
filterForm.deviceUuid = res.toString();
}
function parameterChange(res: any) {
//参数选择确认
filterForm.paramCode = res.toString();
}
function partitionChange(res: string) {
//分区确认
filterForm.partion = res;
}
const submitForm = (formEl: FormInstance | undefined) => {
//筛选确认
if (!formEl) return;
formEl.validate(valid => {
if (valid) {
getDeviceInfo();
console.log('submit:', filterForm);
} else {
console.log('error submit!');
return false;
}
});
};
const resetForm = (formEl: FormInstance | undefined) => {
//筛选重置
if (!formEl) return;
formEl.resetFields();
filterForm.startTime = '';
filterForm.endTime = '';
filterForm.deviceUuid = '';
filterForm.paramCode = '';
filterForm.partion = '';
};
</script>
<style lang="scss" scoped>
@import './index.scss';

152
src/views/monitoring/screen/components/main.vue
View File

@ -13,17 +13,39 @@
> -->
<div class="mainTable" :style="{ height: `${sidebarHeight}px` }">
<n-spin :show="loadingShow">
<vxe-grid ref="tableRef" class="tableGrid" align="center" auto-resize keep-source :height="sidebarHeight - 4"
header-row-class-name="headerRowClass" header-cell-class-name="headerCellClass" row-class-name="tableRowClass"
cell-class-name="tableCellClass" :sort-config="{ multiple: true, trigger: 'cell' }" :stripe="!tableBorder" :border="tableBorder"
:column-config="{ resizable: true, useKey: true }" :row-config="{ useKey: true }" :span-method="mergeRowMethod"
:columns="tableColumn" :data="tableData" @cell-dblclick="cellDBLClickEvent">
<vxe-grid
ref="tableRef"
class="tableGrid"
align="center"
auto-resize
keep-source
:height="sidebarHeight - 4"
header-row-class-name="headerRowClass"
header-cell-class-name="headerCellClass"
row-class-name="tableRowClass"
cell-class-name="tableCellClass"
:sort-config="{ multiple: true, trigger: 'cell' }"
:stripe="!tableBorder"
:border="tableBorder"
:column-config="{ resizable: true, useKey: true }"
:row-config="{ useKey: true }"
:span-method="mergeRowMethod"
:columns="tableColumn"
:data="tableData"
@cell-dblclick="cellDBLClickEvent"
>
<template #deviceuuid_default="{ row }">
<div class="title">
<svg-icon icon-class="warning_lights" style="fill:currentColor;width: 15px;height: 15px;color: green;"
v-if="row.deviceuuid.deviceStatus === 0" />
<svg-icon icon-class="warning_lights" style="fill:currentColor;width: 15px;height: 15px;color: red;"
v-if="row.deviceuuid.deviceStatus === 2" />
<svg-icon
icon-class="warning_lights"
style="fill: currentColor; width: 15px; height: 15px; color: green"
v-if="row.deviceuuid.deviceStatus === 0"
/>
<svg-icon
icon-class="warning_lights"
style="fill: currentColor; width: 15px; height: 15px; color: red"
v-if="row.deviceuuid.deviceStatus === 2"
/>
<span class="name" @click.native="nameClick(row.deviceuuid)">{{ row.gTitle }}</span>
</div>
</template>
@ -33,8 +55,17 @@
</div>
<vxe-modal :title="modalTitle" v-model="editModal">
<template #default>
<vxe-form title-colon ref="formRef" title-align="right" title-width="100" :data="formData" :rules="formRules"
:loading="formLoading" @submit="submitEvent" @reset="resetEvent">
<vxe-form
title-colon
ref="formRef"
title-align="right"
title-width="100"
:data="formData"
:rules="formRules"
:loading="formLoading"
@submit="submitEvent"
@reset="resetEvent"
>
<vxe-form-item field="value" span="24" :item-render="{}" title-overflow>
<template #default="params">
<vxe-input v-model="params.data.value" placeholder="请输入数值" clearable></vxe-input>
@ -63,12 +94,12 @@ import {
VxeFormEvents,
VxeTablePropTypes
} from 'vxe-table';
import { getTableHeader, getStationInfo, getTableData, editConfig,sendCtrl } from '@/api/table/list';
import { getTableHeader, getStationInfo, getTableData, editConfig, sendCtrl } from '@/api/table/list';
import { TableVo } from '@/api/table/types';
import { tableStore } from '@/store/modules/table';
import mitt from '@/plugins/bus';
import socket from '@/utils/socket';
import useStorage from '@/utils/useStorage'
import useStorage from '@/utils/useStorage';
const sessionStorageIns = useStorage('sessionStorage');
const tableStoreCounter = tableStore();
@ -83,17 +114,17 @@ const menuKey = ref(0);
const tableColumn = ref([]);
const tableData = ref<TableVo[]>([]);
const tableRef = ref<VxeGridInstance<TableVo>>();
const cellRow = ref({})
const cellColumn = ref()
const cellField = ref()
const tableBorder=ref(true)
const cellRow = ref({});
const cellColumn = ref();
const cellField = ref();
const tableBorder = ref(true);
// const fields = ref(['deviceuuid']) //需要合并的列数据字段
// const waringArrow = ref([])
interface FormDataVO {
//url: string;
deviceName: string;
paramCode :string;
paramCode: string;
value: string;
}
const formRef = ref<VxeFormInstance>();
@ -102,7 +133,7 @@ const formData = ref<FormDataVO>({
//url: '',
deviceName: '',
paramCode: '',
value: '',
value: ''
});
const formRules = ref<VxeFormPropTypes.Rules>({
value: [
@ -115,12 +146,12 @@ const formRules = ref<VxeFormPropTypes.Rules>({
if (!reg.test(itemValue)) {
return new Error('请输入正确数值！');
}
},
},
],
}
}
]
});
const userStorageInfo = sessionStorage.getItem('userInfo')
const userStorageInfo = sessionStorage.getItem('userInfo');
const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
//const apiUrl = import.meta.env.VITE_APP_WS_API
//const wsUrl = `${apiUrl}websocket/${userInfo.userName}`; //websocket地址
@ -130,7 +161,8 @@ const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
// const baseApi = "http://board.heatiot.cn:8001/prod-api"//websocket链接地址，与项目接口地址一致。
//const baseApi = import.meta.env.VITE_APP_BASE_API
//const apiUrl = baseApi.replace(/https?:/, '');
const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
// const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
const emit = defineEmits(['tableHeaderData']);
// const listData = ref([
@ -143,12 +175,12 @@ const emit = defineEmits(['tableHeaderData']);
defineProps({
tapsShow: {
type: Boolean,
default: true,
default: true
},
sidebarHeight: {
type: Number,
default: 0,
},
default: 0
}
});
// watch(
@ -205,18 +237,18 @@ mitt.on('treeData', (res: any) => {
mitt.on('tableMessage', (res: any) => {
//监听表格数据变化
console.log("tableMessage--", res.data);
console.log('tableMessage--', res.data);
const $table = tableRef.value;
const tableArray = tableData.value
const tableArray = tableData.value;
if ($table) {
console.log("tableRef--", tableRef.value)
console.log('tableRef--', tableRef.value);
res.data.map((item: any) => {
const index = tableArray.findIndex((obj) => obj.id === item.id);
const index = tableArray.findIndex(obj => obj.id === item.id);
if (index !== -1) {
tableArray.splice(index, 1, item);
}
})
console.log("tableData--", tableArray)
});
console.log('tableData--', tableArray);
$table.loadData(tableArray);
// if (res.code === 'datareal') {
// const index = tableData.value.findIndex((obj) => obj.id === res.data.id);
@ -262,9 +294,9 @@ function tableHeader() {
type: 'html',
formatter: formatRole,
visible: false
},
}
];
console.log(tableCessText)
console.log(tableCessText);
res.data.map((item: any) => {
if (item.formatter != undefined || item.children != undefined) {
item.formatter = eval(item.formatter);
@ -327,19 +359,19 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
//edit ty zhousq 2023-10-12 修改控制方式为接口方式，修改formdata提交的属性值
// ctrlPro.centeruuid 设备UUID cellField.ctrlPro.paramcode 设备参数编码 cellField.val 设备值
//ctrlPro 为新增的单元格属性，控制参数回传
console.log("cellData--", row, column);
console.log('cellData--', row, column);
const cellField = row[column.field];
//const data = row.data;
cellRow.value = row
cellColumn.value = column
cellField.value = cellField
cellRow.value = row;
cellColumn.value = column;
cellField.value = cellField;
if (cellField.canBeControl === '1') {
modalTitle.value = column.title;
///formData.value.url = data.url;
//formData.value.deviceName = cellField.deviceName;
formData.value.value = cellField.val;
formData.value.deviceName=cellField.ctrlPro.centeruuid
formData.value.paramCode=cellField.ctrlPro.paramcode
formData.value.deviceName = cellField.ctrlPro.centeruuid;
formData.value.paramCode = cellField.ctrlPro.paramcode;
editModal.value = true;
}
console.log(row[column.field]);
@ -349,30 +381,34 @@ const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
//表单参数为object时处理
// const iconFont=cellValue.changeProp===-1?'<i class="iconfont icon-decline" />':(cellValue.changeProp===1?'<i class="iconfont icon-rise" />':'<i/>')
// const cellData = `<span class="cellClass ${cellValue.alertProp===1?'warning':''}">${cellValue.val}</span>${iconFont}`;
const cellData = `<span class="cellClass ${cellValue.alertProp === 1 ? 'warning' : (cellValue.canBeControl === '1' ? 'cellEdit' : '')}">${cellValue.val}</span><i class="iconfont ${cellValue.changeProp === -1 ? 'icon-decline' : (cellValue.changeProp === 1 ? 'icon-rise' : '')}" ></i>${cellValue.canBeControl === '1' ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
const cellData = `<span class="cellClass ${
cellValue.alertProp === 1 ? 'warning' : cellValue.canBeControl === '1' ? 'cellEdit' : ''
}">${cellValue.val}</span><i class="iconfont ${
cellValue.changeProp === -1 ? 'icon-decline' : cellValue.changeProp === 1 ? 'icon-rise' : ''
}" ></i>${cellValue.canBeControl === '1' ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
return cellData;
};
// 通用行合并函数（将相同多列数据合并为一行）
const mergeRowMethod: VxeTablePropTypes.SpanMethod<TableVo> = ({ row, _rowIndex, column, visibleData }) => {
const fields = ['gTitle']
const cellValue = row[column.field]
const fields = ['gTitle'];
const cellValue = row[column.field];
if (cellValue && fields.includes(column.field)) {
const prevRow = visibleData[_rowIndex - 1]
let nextRow = visibleData[_rowIndex + 1]
const prevRow = visibleData[_rowIndex - 1];
let nextRow = visibleData[_rowIndex + 1];
if (prevRow && prevRow[column.field] === cellValue) {
return { rowspan: 0, colspan: 0 }
return { rowspan: 0, colspan: 0 };
} else {
let countRowspan = 1
let countRowspan = 1;
while (nextRow && nextRow[column.field] === cellValue) {
nextRow = visibleData[++countRowspan + _rowIndex]
nextRow = visibleData[++countRowspan + _rowIndex];
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 }
return { rowspan: countRowspan, colspan: 1 };
}
}
}
}
};
const submitEvent: VxeFormEvents.Submit = () => {
//修改数据之后通过websocket传给后端
@ -384,10 +420,10 @@ const submitEvent: VxeFormEvents.Submit = () => {
//url: formData.value.url,
//deviceName: formData.value.deviceName,
//value: formData.value.value,
deviceUUID:formData.value.deviceName,
deviceUUID: formData.value.deviceName,
paramCode: formData.value.paramCode,
valueType: "",
value:formData.value.value
valueType: '',
value: formData.value.value
//},
};
console.log(submitData);
@ -402,10 +438,10 @@ const submitEvent: VxeFormEvents.Submit = () => {
editModal.value = false;
if ($table) {
const row = cellRow.value
const row = cellRow.value;
const field = cellColumn.value.field;
row[field].val = formData.value.value
$table.reloadRow(row, null, field)
row[field].val = formData.value.value;
$table.reloadRow(row, null, field);
}
// VXETable.modal.message({ content: '保存成功', status: 'success' });
@ -413,7 +449,7 @@ const submitEvent: VxeFormEvents.Submit = () => {
function nameClick(row: any) {
//点击设备名称跳转设备管理
console.log(row)
console.log(row);
sessionStorageIns.setUseStorage('id', row.id);
router.push({ path: '/devicemanage', query: { id: row.id } });
}

6
vite.config.ts
View File

@ -45,9 +45,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
hmr: true, //配置HMR
proxy: {
[env.VITE_APP_BASE_API]: {
target: 'http://172.1.2.196:9010/',//本地接口地址
// target: 'http://172.1.2.48:9000/',//本地接口地址
// target: 'http://board.heatiot.cn:8001/prod-api/', //线上接口地址
// target: 'http://172.1.2.196:9010/', //本地接口地址
target: 'http://172.1.2.93:9010/', //本地接口地址
// target: 'http://10.10.10.56:9010/', //线上测试接口地址
changeOrigin: true,
rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
}

Write Preview
Loading…
Cancel
Save