|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<!-- 顶部设备信息栏 -->
|
|
|
<el-card class="top-card" shadow="never">
|
|
|
<el-page-header :content="pageTitle" @back="goBack" />
|
|
|
|
|
|
<el-descriptions class="device-info" :column="5" border>
|
|
|
<el-descriptions-item label="设备名称">{{ deviceData.name }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="设备编码">{{ deviceData.code }}</el-descriptions-item>
|
|
|
<!-- <el-descriptions-item label="设备类型">{{ deviceData.type }}</el-descriptions-item>-->
|
|
|
<el-descriptions-item label="所属产线">{{ deviceData.productionLine }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="最新采集时间">{{ deviceData.lastCollectTime }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
|
|
|
<div class="action-buttons">
|
|
|
<el-button type="primary" @click="handleSaveAnalysis">
|
|
|
<Icon icon="ep:document-checked" />
|
|
|
保存分析方案
|
|
|
</el-button>
|
|
|
<!-- <el-button @click="handleExport">
|
|
|
<Icon icon="ep:download" />
|
|
|
导出分析结果
|
|
|
</el-button>-->
|
|
|
<el-button @click="handleRefresh">
|
|
|
<Icon icon="ep:refresh" />
|
|
|
刷新
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
|
|
|
<!-- 分析条件 -->
|
|
|
<el-card class="filter-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="card-title">分析条件</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<!-- <el-row :gutter="20">-->
|
|
|
<!-- <el-col :span="6">
|
|
|
<el-card class="device-info-card">
|
|
|
<h3>当前设备</h3>
|
|
|
<el-descriptions :column="1" size="small">
|
|
|
<el-descriptions-item label="设备名称">{{ deviceData.name }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="设备编码">{{ deviceData.code }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="设备类型">{{ deviceData.type }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="所属产线">{{ deviceData.productionLine }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="采集状态">
|
|
|
<el-tag type="success" size="small">在线</el-tag>
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</el-card>
|
|
|
</el-col>-->
|
|
|
|
|
|
<!-- <el-col :span="18">-->
|
|
|
<el-form ref="queryFormRef" :model="queryParams" label-width="100px">
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="6">
|
|
|
<el-form-item label="开始时间">
|
|
|
<el-date-picker
|
|
|
v-model="queryParams.startTime"
|
|
|
type="datetime"
|
|
|
placeholder="选择开始时间"
|
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
style="width: 100%"
|
|
|
@change="handleStartTimeChange"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
<el-form-item label="结束时间">
|
|
|
<el-date-picker
|
|
|
v-model="queryParams.endTime"
|
|
|
type="datetime"
|
|
|
placeholder="选择结束时间"
|
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
style="width: 100%"
|
|
|
@change="handleEndTimeChange"
|
|
|
:picker-options="endTimeOptions"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
<!-- <el-form-item label="时间粒度">
|
|
|
<el-radio-group v-model="queryParams.granularity">
|
|
|
<el-radio-button label="original">原始值</el-radio-button>
|
|
|
<el-radio-button label="1min">1分钟</el-radio-button>
|
|
|
<el-radio-button label="5min">5分钟</el-radio-button>
|
|
|
<el-radio-button label="1hour">1小时</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>-->
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<el-form-item label="点位选择">
|
|
|
<div class="point-selector-card">
|
|
|
<div class="selector-header">
|
|
|
<el-input
|
|
|
v-model="pointKeyword"
|
|
|
placeholder="搜索点位名称或编码"
|
|
|
clearable
|
|
|
style="width: 200px; margin-right: 10px"
|
|
|
@input="handlePointSearch"
|
|
|
/>
|
|
|
<el-button @click="selectAllTemperature">选择工艺参数</el-button>
|
|
|
<el-button @click="clearAllPoints">清空</el-button>
|
|
|
</div>
|
|
|
|
|
|
<div class="selected-tags">
|
|
|
<el-tag
|
|
|
v-for="point in selectedPoints"
|
|
|
:key="point.code"
|
|
|
closable
|
|
|
@close="removePoint(point.code)"
|
|
|
>
|
|
|
{{ point.name }}
|
|
|
</el-tag>
|
|
|
<span v-if="selectedPoints.length === 0" style="color: #98a2b3">
|
|
|
未选择点位
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="point-list">
|
|
|
<el-collapse v-model="activePointGroup">
|
|
|
<el-collapse-item
|
|
|
v-for="group in filteredPointGroups"
|
|
|
:key="group.group"
|
|
|
:title="`${group.group} (${group.points.length})`"
|
|
|
:name="group.group"
|
|
|
>
|
|
|
<el-checkbox-group v-model="selectedPointCodes">
|
|
|
<el-space wrap>
|
|
|
<el-checkbox
|
|
|
v-for="point in group.points"
|
|
|
:key="point.code"
|
|
|
:label="point.code"
|
|
|
>
|
|
|
<div class="point-info">
|
|
|
<div class="point-name">{{ point.name }}</div>
|
|
|
<div class="point-detail">
|
|
|
<span class="point-code">{{ point.code }}</span>
|
|
|
<span class="point-unit">{{ point.unit }}</span>
|
|
|
<span class="point-range">({{ point.lower }} ~ {{ point.upper }})</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-checkbox>
|
|
|
</el-space>
|
|
|
</el-checkbox-group>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- <el-form-item label="分析规则">
|
|
|
<el-checkbox-group v-model="queryParams.rules">
|
|
|
<el-checkbox label="max">最大值</el-checkbox>
|
|
|
<el-checkbox label="min">最小值</el-checkbox>
|
|
|
<el-checkbox label="avg">平均值</el-checkbox>
|
|
|
<el-checkbox label="range">波动值</el-checkbox>
|
|
|
<!– <el-checkbox label="upperCount">超上限次数</el-checkbox>
|
|
|
<el-checkbox label="lowerCount">超下限次数</el-checkbox>
|
|
|
<el-checkbox label="continuousAbnormal">连续异常时长</el-checkbox>–>
|
|
|
</el-checkbox-group>
|
|
|
</el-form-item>-->
|
|
|
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="handleAnalyze">
|
|
|
<Icon icon="ep:search" />
|
|
|
开始分析
|
|
|
</el-button>
|
|
|
<el-button @click="resetQuery">
|
|
|
<Icon icon="ep:refresh" />
|
|
|
重置条件
|
|
|
</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<!-- </el-col>
|
|
|
</el-row>-->
|
|
|
</el-card>
|
|
|
|
|
|
<!-- 概览卡片 -->
|
|
|
<el-row :gutter="20" class="summary-row">
|
|
|
<el-col v-for="item in summaryData" :key="item.title" :span="4">
|
|
|
<el-card :class="['summary-card', item.warn ? 'summary-warn' : '']">
|
|
|
<div class="summary-title">{{ item.title }}</div>
|
|
|
<div class="summary-value">{{ item.value }}</div>
|
|
|
<div class="summary-desc">{{ item.desc }}</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 多点位历史趋势分析 -->
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="card-title">多点位历史趋势分析</span>
|
|
|
<div class="chart-toolbar">
|
|
|
<el-radio-group v-model="chartMode" size="small">
|
|
|
<!-- <el-radio-button label="all">全部显示</el-radio-button>-->
|
|
|
<!-- <el-radio-button label="abnormal">仅异常点位</el-radio-button>-->
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div id="historyTrendChart" class="chart-container"></div>
|
|
|
<!-- <el-descriptions :column="4" border class="chart-note">
|
|
|
<el-descriptions-item label="当前展示点位">
|
|
|
{{ chartNote.currentPoints }}
|
|
|
</el-descriptions-item>
|
|
|
<el-descriptions-item label="是否有异常">
|
|
|
<el-tag :type="chartNote.hasAbnormal ? 'warning' : 'success'">
|
|
|
{{ chartNote.hasAbnormal ? `发现 ${chartNote.abnormalCount} 个异常点位` : '未发现明显异常' }}
|
|
|
</el-tag>
|
|
|
</el-descriptions-item>
|
|
|
<el-descriptions-item label="最高值出现时间">
|
|
|
{{ chartNote.maxTime }}
|
|
|
</el-descriptions-item>
|
|
|
<el-descriptions-item label="最大波动区间">
|
|
|
{{ chartNote.maxRange }}
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>-->
|
|
|
</el-card>
|
|
|
<div class="table-container">
|
|
|
<!-- 分析结果表格 -->
|
|
|
<el-card class="result-card" shadow="never" style="width: 44%; margin-right: 0.6%; display: inline-block; vertical-align: top;">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="card-title">分析结果</span>
|
|
|
<span style="color: #667085; font-size: 13px">
|
|
|
按点位聚合统计，异常结果已高亮
|
|
|
</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<el-table :data="resultData" style="width: 100%">
|
|
|
<el-table-column prop="name" label="点位名称" width="120" />
|
|
|
<el-table-column prop="code" label="点位编码" width="140" />
|
|
|
<el-table-column prop="unit" label="单位" width="70" />
|
|
|
<el-table-column prop="max" label="最大值" width="110">
|
|
|
<template #default="{ row }">
|
|
|
<span :class="row.maxClass">{{ formatValue(row.max, row.unit) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="min" label="最小值" width="110">
|
|
|
<template #default="{ row }">
|
|
|
<span :class="row.minClass">{{ formatValue(row.min, row.unit) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="avg" label="平均值" width="110">
|
|
|
<template #default="{ row }">
|
|
|
{{ formatValue(row.avg, row.unit) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="range" label="波动值" width="110">
|
|
|
<template #default="{ row }">
|
|
|
<span :class="row.rangeClass">{{ formatValue(row.range, row.unit) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- <el-table-column prop="upperCount" label="超上限次数" width="100">
|
|
|
<template #default="{ row }">
|
|
|
<span :class="row.upperCount > 0 ? 'text-danger' : ''">
|
|
|
{{ row.upperCount }}
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>-->
|
|
|
<!-- <el-table-column prop="lowerCount" label="超下限次数" width="100">
|
|
|
<template #default="{ row }">
|
|
|
<span :class="row.lowerCount > 0 ? 'text-warning' : ''">
|
|
|
{{ row.lowerCount }}
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>-->
|
|
|
<!-- <el-table-column prop="continuousAbnormal" label="连续异常时长" width="120">
|
|
|
<template #default="{ row }">
|
|
|
{{ row.continuousAbnormal }}分钟
|
|
|
</template>
|
|
|
</el-table-column>-->
|
|
|
<!-- <el-table-column prop="conclusion" label="分析结论" width="120">
|
|
|
<template #default="{ row }">
|
|
|
<el-tag :type="row.statusType" size="small">
|
|
|
{{ row.conclusion }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>-->
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
|
|
|
<!-- 历史明细 -->
|
|
|
<el-card class="detail-card" shadow="never" style="width: 55.4%; display: inline-block; vertical-align: top;">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="card-title">历史明细</span>
|
|
|
<span style="color: #667085; font-size: 13px">
|
|
|
展示部分原始采集数据
|
|
|
</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<el-table :data="historyData" style="width: 100%" height="360">
|
|
|
<el-table-column prop="time" label="采集时间" width="150" />
|
|
|
<el-table-column
|
|
|
v-for="point in displayPoints"
|
|
|
:key="point.code.toLowerCase()"
|
|
|
:prop="point.code.toLowerCase()"
|
|
|
:label="point.name"
|
|
|
:min-width="100"
|
|
|
>
|
|
|
<template #default="{ row }">
|
|
|
<span :class="getValueClass(row[point.code.toLowerCase()], point)">
|
|
|
{{ formatValue(row[point.code.toLowerCase()], point.unit) }} {{ point.unit }}
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<!-- 侧边栏 -->
|
|
|
<!-- <el-aside width="320px" class="suggest-aside">
|
|
|
<el-card class="suggest-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="card-title">分析说明/建议</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<div class="health-score">
|
|
|
<div class="score-ring">
|
|
|
<strong>{{ healthScore }}</strong>
|
|
|
<span>稳定性评分</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="suggest-list">
|
|
|
<el-alert
|
|
|
v-for="(suggest, index) in suggestions"
|
|
|
:key="index"
|
|
|
:title="suggest.content"
|
|
|
:type="suggest.type"
|
|
|
:closable="false"
|
|
|
show-icon
|
|
|
class="suggest-item"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div class="event-list">
|
|
|
<h4>关键事件记录</h4>
|
|
|
<el-timeline>
|
|
|
<el-timeline-item
|
|
|
v-for="event in keyEvents"
|
|
|
:key="event.time"
|
|
|
:timestamp="event.time"
|
|
|
>
|
|
|
{{ event.text }}
|
|
|
</el-timeline-item>
|
|
|
</el-timeline>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-aside>-->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
|
|
|
import {useRoute, useRouter} from 'vue-router'
|
|
|
import * as echarts from 'echarts'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
|
import {DeviceApi, DeviceVO} from "@/api/iot/device";
|
|
|
const router = useRouter()
|
|
|
const route = useRoute();
|
|
|
let query = route.query;
|
|
|
|
|
|
// 页面数据
|
|
|
const pageTitle = '单设备多点位历史数据分析'
|
|
|
|
|
|
// 设备信息
|
|
|
const deviceData = reactive({
|
|
|
name: query.name as string,
|
|
|
code: query.deviceCode as string,
|
|
|
productionLine: query.lineName as string,
|
|
|
lastCollectTime: query.collectionTime as string,
|
|
|
})
|
|
|
|
|
|
// 查询参数
|
|
|
const queryParams = reactive({
|
|
|
startTime: '2026-04-22 08:00:00',
|
|
|
endTime: '2026-04-22 11:30:00',
|
|
|
granularity: 'original',
|
|
|
rules: ['max', 'min', 'avg', 'range', 'upperCount', 'lowerCount', 'continuousAbnormal']
|
|
|
})
|
|
|
|
|
|
// 点位数据
|
|
|
const pointGroups = ref([
|
|
|
{
|
|
|
group: '温度类',
|
|
|
points: [
|
|
|
{ name: '上层温度', code: 'UpperTemp', unit: '℃', upper: 86, lower: 72 },
|
|
|
{ name: '中层温度', code: 'MiddleTemp', unit: '℃', upper: 86, lower: 72 },
|
|
|
{ name: '下层温度', code: 'LowerTemp', unit: '℃', upper: 84, lower: 70 },
|
|
|
{ name: '回风温度', code: 'ReturnAirTemp', unit: '℃', upper: 78, lower: 62 },
|
|
|
{ name: '实际温度', code: 'ActualTemp', unit: '℃', upper: 86, lower: 72 },
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
group: '工艺类',
|
|
|
points: [
|
|
|
{ name: '输送速度', code: 'ConveyorSpeed', unit: 'm/min', upper: 18, lower: 10 },
|
|
|
{ name: '主缸水位', code: 'MainTankLevel', unit: 'mm', upper: 680, lower: 520 }
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
group: '能耗类',
|
|
|
points: [
|
|
|
{ name: '干燥柜用电量', code: 'DryerPower', unit: 'kWh', upper: 48, lower: 20 }
|
|
|
]
|
|
|
}
|
|
|
])
|
|
|
|
|
|
const filteredPointGroups = computed(() => {
|
|
|
if (!pointKeyword.value.trim()) return pointGroups.value
|
|
|
|
|
|
const keyword = pointKeyword.value.toLowerCase()
|
|
|
return pointGroups.value
|
|
|
.map(group => {
|
|
|
const matchedPoints = group.points.filter(point =>
|
|
|
String(point.name || '').toLowerCase().includes(keyword) ||
|
|
|
String(point.code || '').toLowerCase().includes(keyword)
|
|
|
)
|
|
|
return matchedPoints.length > 0 ? { ...group, points: matchedPoints } : null
|
|
|
})
|
|
|
.filter((group): group is { group: string; points: any[] } => group !== null)
|
|
|
})
|
|
|
|
|
|
function handlePointSearch() {
|
|
|
// 搜索时自动展开所有分组
|
|
|
activePointGroup.value = filteredPointGroups.value.map(g => g.group)
|
|
|
}
|
|
|
// 图表相关
|
|
|
const chartRef = ref()
|
|
|
const chartInstance = ref<echarts.ECharts>()
|
|
|
const chartMode = ref('all')
|
|
|
const pointKeyword = ref('')
|
|
|
const activePointGroup = ref([])
|
|
|
const selectedPointCodes = ref([])
|
|
|
|
|
|
// 计算属性
|
|
|
const selectedPoints = computed(() => {
|
|
|
const allPoints = pointGroups.value.flatMap(g => g.points)
|
|
|
return allPoints.filter(p => selectedPointCodes.value.includes(p.code))
|
|
|
})
|
|
|
|
|
|
const displayPoints = computed(() => {
|
|
|
return selectedPoints.value
|
|
|
})
|
|
|
|
|
|
// 历史数据
|
|
|
const historyData = ref([
|
|
|
/*
|
|
|
{time:"2026-04-22 08:00",UpperTemp:78.2,MiddleTemp:79.1,LowerTemp:76.8,ReturnAirTemp:68.4,ActualTemp:78.7,SetTemp:80,ConveyorSpeed:14.1,MainTankLevel:612,DryerPower:31.2},
|
|
|
{time:"2026-04-22 08:12",UpperTemp:78.8,MiddleTemp:80.3,LowerTemp:77.2,ReturnAirTemp:69,ActualTemp:79.4,SetTemp:80,ConveyorSpeed:14.3,MainTankLevel:615,DryerPower:32},
|
|
|
{time:"2026-04-22 08:24",UpperTemp:79.5,MiddleTemp:81.4,LowerTemp:77.9,ReturnAirTemp:69.5,ActualTemp:80.2,SetTemp:80,ConveyorSpeed:14.5,MainTankLevel:618,DryerPower:32.7},
|
|
|
{time:"2026-04-22 08:36",UpperTemp:80.1,MiddleTemp:82.6,LowerTemp:78.4,ReturnAirTemp:70.3,ActualTemp:81,SetTemp:80,ConveyorSpeed:14.2,MainTankLevel:621,DryerPower:33.3},
|
|
|
{time:"2026-04-22 08:48",UpperTemp:80.8,MiddleTemp:83.2,LowerTemp:79,ReturnAirTemp:70.8,ActualTemp:81.8,SetTemp:80,ConveyorSpeed:13.8,MainTankLevel:624,DryerPower:34.1},
|
|
|
{time:"2026-04-22 09:00",UpperTemp:81.4,MiddleTemp:84.5,LowerTemp:79.7,ReturnAirTemp:71.6,ActualTemp:82.5,SetTemp:80,ConveyorSpeed:13.4,MainTankLevel:628,DryerPower:35.8},
|
|
|
{time:"2026-04-22 09:12",UpperTemp:82.1,MiddleTemp:85.8,LowerTemp:80.2,ReturnAirTemp:72.4,ActualTemp:83.2,SetTemp:80,ConveyorSpeed:13.2,MainTankLevel:631,DryerPower:37.4},
|
|
|
{time:"2026-04-22 09:24",UpperTemp:82.8,MiddleTemp:87.4,LowerTemp:80.8,ReturnAirTemp:73.2,ActualTemp:84.7,SetTemp:80,ConveyorSpeed:12.8,MainTankLevel:636,DryerPower:39.1},
|
|
|
{time:"2026-04-22 09:36",UpperTemp:83,MiddleTemp:86.9,LowerTemp:81.2,ReturnAirTemp:74.1,ActualTemp:85.6,SetTemp:80,ConveyorSpeed:12.5,MainTankLevel:640,DryerPower:40.5},
|
|
|
{time:"2026-04-22 09:48",UpperTemp:82.4,MiddleTemp:85.6,LowerTemp:80.5,ReturnAirTemp:73.6,ActualTemp:84.9,SetTemp:80,ConveyorSpeed:12.9,MainTankLevel:637,DryerPower:39.3},
|
|
|
{time:"2026-04-22 10:00",UpperTemp:81.7,MiddleTemp:84.4,LowerTemp:79.8,ReturnAirTemp:72.8,ActualTemp:83.8,SetTemp:80,ConveyorSpeed:13.5,MainTankLevel:633,DryerPower:37.8},
|
|
|
{time:"2026-04-22 10:12",UpperTemp:80.9,MiddleTemp:83.5,LowerTemp:79.1,ReturnAirTemp:72,ActualTemp:82.4,SetTemp:80,ConveyorSpeed:14,MainTankLevel:629,DryerPower:36.2},
|
|
|
{time:"2026-04-22 10:24",UpperTemp:80.2,MiddleTemp:82.6,LowerTemp:78.3,ReturnAirTemp:71.4,ActualTemp:81.3,SetTemp:80,ConveyorSpeed:14.6,MainTankLevel:625,DryerPower:34.9},
|
|
|
{time:"2026-04-22 10:36",UpperTemp:79.8,MiddleTemp:81.8,LowerTemp:77.8,ReturnAirTemp:70.7,ActualTemp:80.6,SetTemp:80,ConveyorSpeed:15.2,MainTankLevel:620,DryerPower:33.5},
|
|
|
{time:"2026-04-22 10:48",UpperTemp:79.3,MiddleTemp:81,LowerTemp:77.4,ReturnAirTemp:70,ActualTemp:79.8,SetTemp:80,ConveyorSpeed:15.7,MainTankLevel:616,DryerPower:32.6},
|
|
|
{time:"2026-04-22 11:00",UpperTemp:78.7,MiddleTemp:80.2,LowerTemp:76.9,ReturnAirTemp:69.2,ActualTemp:79.1,SetTemp:80,ConveyorSpeed:16.1,MainTankLevel:611,DryerPower:31.9},
|
|
|
{time:"2026-04-22 11:12",UpperTemp:78.4,MiddleTemp:79.8,LowerTemp:76.4,ReturnAirTemp:68.7,ActualTemp:78.5,SetTemp:80,ConveyorSpeed:16.4,MainTankLevel:608,DryerPower:31.1},
|
|
|
{time:"2026-04-22 11:24",UpperTemp:78,MiddleTemp:79.2,LowerTemp:76.1,ReturnAirTemp:68.3,ActualTemp:78.1,SetTemp:80,ConveyorSpeed:16.2,MainTankLevel:605,DryerPower:30.8}
|
|
|
*/
|
|
|
|
|
|
// ... 其他数据
|
|
|
])
|
|
|
|
|
|
// 分析结果
|
|
|
const resultData = ref([])
|
|
|
const summaryData = ref([])
|
|
|
const chartNote = ref({})
|
|
|
const healthScore = ref(86)
|
|
|
const suggestions = ref([])
|
|
|
const keyEvents = ref([
|
|
|
{ time: '09:26', text: '中层温度出现短时偏高' },
|
|
|
{ time: '10:14', text: '实际温度与设定温度偏差扩大' },
|
|
|
{ time: '10:58', text: '回风温度与输送速度联动变化明显' }
|
|
|
])
|
|
|
const tagsViewStore = useTagsViewStore()
|
|
|
|
|
|
// 方法
|
|
|
function goBack() {
|
|
|
tagsViewStore.delView(router.currentRoute.value)
|
|
|
router.push('/iot/historyData')
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
function selectAllTemperature() {
|
|
|
const tempPoints = pointGroups.value.find(g => g.group === '工艺参数')?.points || []
|
|
|
selectedPointCodes.value = tempPoints.map(p => p.code)
|
|
|
}
|
|
|
|
|
|
function clearAllPoints() {
|
|
|
selectedPointCodes.value = []
|
|
|
}
|
|
|
|
|
|
function removePoint(code) {
|
|
|
selectedPointCodes.value = selectedPointCodes.value.filter(c => c !== code)
|
|
|
}
|
|
|
|
|
|
function formatValue(value, unit) {
|
|
|
if (unit === 'mm') {
|
|
|
return Math.round(value)
|
|
|
} else if (unit === 'kWh') {
|
|
|
return value.toFixed(1)
|
|
|
} else {
|
|
|
return Number(value).toFixed(1)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function getValueClass(value, point) {
|
|
|
if (value > point.upper) {
|
|
|
return 'text-danger'
|
|
|
} else if (value < point.lower) {
|
|
|
return 'text-warning'
|
|
|
}
|
|
|
return ''
|
|
|
}
|
|
|
const analyzing = ref(false)
|
|
|
async function handleAnalyze() {
|
|
|
if (selectedPointCodes.value.length === 0) {
|
|
|
ElMessage.warning('请至少选择一个点位')
|
|
|
return
|
|
|
}
|
|
|
// 验证时间范围
|
|
|
if (!validateTimeRange(queryParams.startTime, queryParams.endTime)) {
|
|
|
ElMessage.warning('时间范围不能超过24小时，且结束时间必须晚于开始时间')
|
|
|
return
|
|
|
}
|
|
|
analyzing.value = true
|
|
|
try {
|
|
|
const params: any = {
|
|
|
deviceId: query.id,
|
|
|
pageNo: 1,
|
|
|
pageSize: 10
|
|
|
}
|
|
|
params.collectionStartTime = queryParams.startTime
|
|
|
params.collectionEndTime = queryParams.endTime
|
|
|
if (Array.isArray(selectedPointCodes.value) && selectedPointCodes.value.length) {
|
|
|
params.attributeCodes = selectedPointCodes.value
|
|
|
}
|
|
|
const res: any = await DeviceApi.getHistoryAnalyse(params)
|
|
|
//oneHistoryData.value = res;
|
|
|
//historyData.value = res.data;
|
|
|
if (res && res.analyseData) {
|
|
|
resultData.value = res.analyseData;
|
|
|
// 2. 重要：转换API返回数据的格式，适配图表
|
|
|
if (res && res.data) {
|
|
|
// 转换数据格式
|
|
|
transformApiDataToChartFormat(res.data)
|
|
|
}
|
|
|
// 模拟异步分析
|
|
|
//setTimeout(() => {
|
|
|
updateChart()
|
|
|
calculateAnalysis()
|
|
|
|
|
|
ElMessage.success('已重新分析，图表与统计结果已更新')
|
|
|
} else {
|
|
|
// 如果接口返回空数据
|
|
|
ElMessage.warning('未查询到相关数据')
|
|
|
initializeEmptyCharts()
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('分析失败:', error)
|
|
|
ElMessage.error('分析失败，请检查网络连接或参数设置')
|
|
|
// 出错时显示空状态
|
|
|
initializeEmptyCharts()
|
|
|
} finally {
|
|
|
analyzing.value = false
|
|
|
}
|
|
|
//analyzing.value = false
|
|
|
//}, 800)
|
|
|
}
|
|
|
|
|
|
|
|
|
// 新增函数：转换API返回数据为图表需要的格式
|
|
|
function transformApiDataToChartFormat(apiData) {
|
|
|
if (!apiData || apiData.length === 0) {
|
|
|
historyData.value = []
|
|
|
oneHistoryData.value = {
|
|
|
time: [],
|
|
|
series: []
|
|
|
}
|
|
|
return
|
|
|
}
|
|
|
historyData.value = apiData;
|
|
|
|
|
|
// 假设API返回的数据格式：[{time: '08:00', point1: 78.2, point2: 79.1, ...}, ...]
|
|
|
const timeArray = apiData.map(item => item.time || '')
|
|
|
|
|
|
// 获取所有点位名称（排除time字段）
|
|
|
const pointNames = []
|
|
|
if (apiData.length > 0) {
|
|
|
const firstItem = apiData[0]
|
|
|
Object.keys(firstItem).forEach(key => {
|
|
|
if (key !== 'time' && key !== 'timestamp') {
|
|
|
pointNames.push(key)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 为每个点位创建数据序列
|
|
|
const seriesArray = pointNames.map(pointName => {
|
|
|
const pointData = apiData.map(item => item[pointName] || 0)
|
|
|
|
|
|
// 查找对应的点位信息获取颜色
|
|
|
const pointInfo = pointGroups.value
|
|
|
.flatMap(g => g.points)
|
|
|
.find(p => p.code.toLowerCase() === pointName.toLowerCase())
|
|
|
|
|
|
// 颜色分配逻辑
|
|
|
const colors = ['#4888FF', '#00C853', '#FF6B6B', '#FFD93D', '#9C27B0', '#00BCD4', '#FF9800', '#795548']
|
|
|
const colorIndex = pointNames.indexOf(pointName) % colors.length
|
|
|
|
|
|
return {
|
|
|
name: pointInfo?.name || pointName,
|
|
|
type: 'line',
|
|
|
data: pointData,
|
|
|
color: pointInfo?.color || colors[colorIndex]
|
|
|
}
|
|
|
})
|
|
|
|
|
|
// 更新oneHistoryData
|
|
|
oneHistoryData.value = {
|
|
|
time: timeArray,
|
|
|
series: seriesArray
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function calculateAnalysis() {
|
|
|
|
|
|
/* const params: any = {
|
|
|
deviceId: query.id,
|
|
|
pageNo: 1,
|
|
|
pageSize: 10
|
|
|
}
|
|
|
params.collectionStartTime = queryParams.startTime
|
|
|
params.collectionEndTime = queryParams.endTime
|
|
|
//const keyword = pointKeyword.value.toLowerCase()
|
|
|
if (Array.isArray(selectedPointCodes.value) && selectedPointCodes.value.length) {
|
|
|
params.attributeCodes = selectedPointCodes.value
|
|
|
|
|
|
}
|
|
|
const res: any = await DeviceApi.getHistoryAnalyse(params)
|
|
|
oneHistoryData.value = res;
|
|
|
historyData.value = res.data;*/
|
|
|
// 计算时间间隔
|
|
|
const timeInterval = calculateTimeInterval(queryParams.startTime, queryParams.endTime)
|
|
|
const intervalText = timeInterval > 0 ? `${timeInterval}小时` : '未设置'
|
|
|
|
|
|
// 查找最大和最小波动点位
|
|
|
let maxRangePoint = null
|
|
|
let minRangePoint = null
|
|
|
let maxValuePoint = null
|
|
|
let minValuePoint = null
|
|
|
if (resultData.value && resultData.value.length > 0) {
|
|
|
// 遍历所有点位，找出波动值和数值的极值
|
|
|
resultData.value.forEach(point => {
|
|
|
// 波动值比较
|
|
|
if (maxRangePoint === null || point.range > maxRangePoint.range) {
|
|
|
maxRangePoint = point
|
|
|
}
|
|
|
if (minRangePoint === null || point.range < minRangePoint.range) {
|
|
|
minRangePoint = point
|
|
|
}
|
|
|
|
|
|
// 数值比较
|
|
|
if (maxValuePoint === null || point.max > maxValuePoint.max) {
|
|
|
maxValuePoint = point
|
|
|
}
|
|
|
if (minValuePoint === null || point.min < minValuePoint.min) {
|
|
|
minValuePoint = point
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
// 这里实现分析计算逻辑
|
|
|
// 模拟计算...
|
|
|
summaryData.value = [
|
|
|
{title: '已选点位数', value: selectedPoints.value.length, desc: '当前参与趋势与统计分析'},
|
|
|
{title: '分析时间跨度', value: intervalText, desc: queryParams.startTime && queryParams.endTime
|
|
|
? `${queryParams.startTime.substring(0, 16)} 至 ${queryParams.endTime.substring(0, 16)}`
|
|
|
: '未设置时间范围' },
|
|
|
/* { title: '异常点位数', value: 1, desc: '存在超限或波动异常', warn: true },*/
|
|
|
/*{title: '最大波动点位', value: '中层温度', desc: '波动 8.3℃'},*/
|
|
|
{
|
|
|
title: '最大波动点位',
|
|
|
value: maxRangePoint ? maxRangePoint.name : '-',
|
|
|
desc: maxRangePoint ? `波动 ${formatValue(maxRangePoint.range, maxRangePoint.unit)}` : '-',
|
|
|
warn: maxRangePoint && maxRangePoint.range > 0
|
|
|
},
|
|
|
/*{title: '最小波动点位', value: '中层温度', desc: '波动 8.3℃'},*/
|
|
|
{
|
|
|
title: '最小波动点位',
|
|
|
value: minRangePoint ? minRangePoint.name : '-',
|
|
|
desc: minRangePoint ? `波动 ${formatValue(minRangePoint.range, minRangePoint.unit)}` : '-'
|
|
|
},
|
|
|
/*{title: '最高值点位', value: '中层温度', desc: '最高 87.4℃'},
|
|
|
/!* { title: '平均稳定性评分', value: 86, desc: '基于超限次数和波动幅度' }*!/*/
|
|
|
{
|
|
|
title: '最高值点位',
|
|
|
value: maxValuePoint ? maxValuePoint.name : '-',
|
|
|
desc: maxValuePoint ? `最高 ${formatValue(maxValuePoint.max, maxValuePoint.unit)}` : '-',
|
|
|
warn: maxValuePoint && maxValuePoint.max > 85 // 示例：超过85显示警告
|
|
|
},
|
|
|
]
|
|
|
|
|
|
healthScore.value = 86
|
|
|
suggestions.value = [
|
|
|
{content: '当前设备温度整体波动处于可控范围，建议保持现有采集频率。', type: 'info'},
|
|
|
{content: '中层温度存在短时偏高，建议检查热风分布与风门开度。', type: 'warning'},
|
|
|
{content: '实际温度与设定温度偏差较大，建议复核 PID 参数或温控探头校准状态。', type: 'error'},
|
|
|
{content: '建议重点关注回风温度与输送速度联动关系，用于判断干燥效率变化。', type: 'warning'}
|
|
|
]
|
|
|
}
|
|
|
// 图表实例
|
|
|
let oneChartInstance = null
|
|
|
// 模拟历史数据（实际项目中从后端接口获取）
|
|
|
const oneHistoryData = ref({})
|
|
|
function updateChart() {
|
|
|
const chartDom = document.getElementById('historyTrendChart')
|
|
|
// 1. 如果图表实例已存在，先销毁
|
|
|
if (oneChartInstance) {
|
|
|
oneChartInstance.dispose()
|
|
|
}
|
|
|
// 3. 检查是否有数据
|
|
|
if (!oneHistoryData.value || !oneHistoryData.value.series || oneHistoryData.value.series.length === 0) {
|
|
|
// 显示无数据提示
|
|
|
/* oneChartInstance.setOption({
|
|
|
title: {
|
|
|
text: '暂无数据',
|
|
|
left: 'center',
|
|
|
top: 'center',
|
|
|
textStyle: { color: '#999', fontSize: 16 }
|
|
|
},
|
|
|
xAxis: { show: false },
|
|
|
yAxis: { show: false },
|
|
|
series: []
|
|
|
})*/
|
|
|
return
|
|
|
}
|
|
|
oneChartInstance = echarts.init(chartDom)
|
|
|
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis', // 触发类型：坐标轴触发（支持多系列）
|
|
|
axisPointer: { type: 'cross' }, // 十字准星指示器
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)', // 深色背景
|
|
|
textStyle: { color: '#fff' }, // 文字白色
|
|
|
formatter: (params) => {
|
|
|
// 自定义 tooltip 内容，模仿截图样式
|
|
|
let html = `<div style="font-weight: bold; margin-bottom: 8px;">${params[0].name}</div>`
|
|
|
params.forEach(item => {
|
|
|
html += `
|
|
|
<div style="display: flex; align-items: center; margin: 4px 0;">
|
|
|
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}; margin-right: 6px;"></span>
|
|
|
<span style="flex: 1;">${item.seriesName}</span>
|
|
|
<span style="margin-left: 10px;">${item.value}</span>
|
|
|
</div>
|
|
|
`
|
|
|
})
|
|
|
return html
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
data: oneHistoryData.value.series.map(s => s.name),
|
|
|
top: 30,
|
|
|
right: 20,
|
|
|
textStyle: { fontSize: 12 }
|
|
|
},
|
|
|
grid: { left: '3%', right: '4%', bottom: '3%', top: '60px', containLabel: true },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
data: oneHistoryData.value.time,
|
|
|
axisLine: { lineStyle: { color: '#ccc' } },
|
|
|
axisLabel: { color: '#666' }
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
axisLine: { show: false },
|
|
|
axisTick: { show: false },
|
|
|
splitLine: { lineStyle: { color: '#eee' } },
|
|
|
axisLabel: { color: '#666' }
|
|
|
},
|
|
|
series: oneHistoryData.value.series.map(s => ({
|
|
|
name: s.name,
|
|
|
type: 'line',
|
|
|
data: s.data,
|
|
|
smooth: true, // 平滑曲线
|
|
|
symbol: 'circle', // 标记点样式
|
|
|
symbolSize: 6, // 标记点大小
|
|
|
itemStyle: { color: s.color },
|
|
|
lineStyle: { color: s.color, width: 2 },
|
|
|
emphasis: { // 高亮时的样式
|
|
|
itemStyle: { color: s.color, borderColor: '#fff', borderWidth: 2 },
|
|
|
lineStyle: { width: 3 }
|
|
|
}
|
|
|
}))
|
|
|
}
|
|
|
|
|
|
oneChartInstance.setOption(option)
|
|
|
|
|
|
// 窗口resize时自适应
|
|
|
window.addEventListener('resize', () => {
|
|
|
oneChartInstance && oneChartInstance.resize()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
function resetQuery() {
|
|
|
selectedPointCodes.value = []
|
|
|
pointKeyword.value = ''
|
|
|
chartMode.value = 'all'
|
|
|
}
|
|
|
const formLoading = ref(false)
|
|
|
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
|
const message = useMessage() // 消息弹窗
|
|
|
const { t } = useI18n()
|
|
|
async function handleSaveAnalysis() {
|
|
|
// 提交请求
|
|
|
formLoading.value = true
|
|
|
try {
|
|
|
const contactInfo={
|
|
|
startTime: queryParams.startTime,
|
|
|
endTime: queryParams.endTime,
|
|
|
codes: selectedPointCodes.value
|
|
|
}
|
|
|
const jsonString = JSON.stringify(contactInfo);
|
|
|
const data: any = {
|
|
|
id: route.query.id,
|
|
|
deviceCode:route.query.deviceCode,
|
|
|
deviceName:route.query.name,
|
|
|
isEnable: true,
|
|
|
contactInfo:jsonString.valueOf()
|
|
|
}
|
|
|
await DeviceApi.updateDevice(data)
|
|
|
message.success(t('common.updateSuccess'))
|
|
|
// 发送操作成功的事件
|
|
|
emit('success')
|
|
|
} finally {
|
|
|
formLoading.value = false
|
|
|
}
|
|
|
//ElMessage.success('分析方案已保存')
|
|
|
}
|
|
|
|
|
|
function handleExport() {
|
|
|
ElMessage.success('分析结果已生成导出任务')
|
|
|
}
|
|
|
|
|
|
function handleRefresh() {
|
|
|
handleAnalyze()
|
|
|
}
|
|
|
const loading = ref(true) // 列表的加载中
|
|
|
/** 查询列表 */
|
|
|
const getDiviceList = async () => {
|
|
|
loading.value = true
|
|
|
try {
|
|
|
const data = await DeviceApi.getDeviceAttributeGroupList({deviceId: route.query.id})
|
|
|
pointGroups.value = data;
|
|
|
activePointGroup.value = data[0]?.typeNames;
|
|
|
|
|
|
let deviceDO = data[0]?.deviceDO;
|
|
|
if (deviceDO && deviceDO.contactInfo) {
|
|
|
selectedPointCodes.value = data[0]?.codes;
|
|
|
const contactInfo = JSON.parse(deviceDO.contactInfo)
|
|
|
|
|
|
// 设置查询参数
|
|
|
if (contactInfo.startTime) {
|
|
|
queryParams.startTime = contactInfo.startTime
|
|
|
}
|
|
|
if (contactInfo.endTime) {
|
|
|
queryParams.endTime = contactInfo.endTime
|
|
|
}
|
|
|
if (contactInfo.codes && Array.isArray(contactInfo.codes)) {
|
|
|
selectedPointCodes.value = contactInfo.codes
|
|
|
await handleAnalyze() // 自动调用分析
|
|
|
}
|
|
|
}
|
|
|
} finally {
|
|
|
loading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 验证时间范围是否在1天内
|
|
|
function validateTimeRange(startTime, endTime) {
|
|
|
if (!startTime || !endTime) return true // 允许为空
|
|
|
|
|
|
const start = new Date(startTime)
|
|
|
const end = new Date(endTime)
|
|
|
const diffInHours = (end - start) / (1000 * 60 * 60)
|
|
|
|
|
|
// 检查是否超过24小时
|
|
|
if (diffInHours > 24) {
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
// 检查结束时间是否晚于开始时间
|
|
|
if (end < start) {
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
return true
|
|
|
}
|
|
|
|
|
|
// 计算时间间隔（小时）
|
|
|
function calculateTimeInterval(startTime, endTime) {
|
|
|
if (!startTime || !endTime) return 0
|
|
|
|
|
|
const start = new Date(startTime)
|
|
|
const end = new Date(endTime)
|
|
|
const diffInMilliseconds = Math.abs(end - start)
|
|
|
const diffInHours = diffInMilliseconds / (1000 * 60 * 60)
|
|
|
|
|
|
return parseFloat(diffInHours.toFixed(1))
|
|
|
}
|
|
|
|
|
|
// 格式化日期时间
|
|
|
function formatDateTime(date) {
|
|
|
const year = date.getFullYear()
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
|
}
|
|
|
|
|
|
// 开始时间变化处理
|
|
|
function handleStartTimeChange(value) {
|
|
|
if (value && queryParams.endTime) {
|
|
|
if (!validateTimeRange(value, queryParams.endTime)) {
|
|
|
const start = new Date(value)
|
|
|
const end = new Date(start.getTime() + 24 * 60 * 60 * 1000 - 1000) // 23:59:59
|
|
|
queryParams.endTime = formatDateTime(end)
|
|
|
ElMessage.warning('时间范围超过24小时，已自动调整结束时间')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 结束时间变化处理
|
|
|
function handleEndTimeChange(value) {
|
|
|
if (queryParams.startTime && value) {
|
|
|
if (!validateTimeRange(queryParams.startTime, value)) {
|
|
|
const end = new Date(value)
|
|
|
const start = new Date(end.getTime() - 24 * 60 * 60 * 1000 + 1000) // 00:00:00
|
|
|
queryParams.startTime = formatDateTime(start)
|
|
|
ElMessage.warning('时间范围超过24小时，已自动调整开始时间')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 新增：页面加载标志
|
|
|
const pageLoaded = ref(false)
|
|
|
|
|
|
// 结束时间选择器选项
|
|
|
const endTimeOptions = computed(() => {
|
|
|
if (!queryParams.startTime) return {}
|
|
|
|
|
|
const start = new Date(queryParams.startTime)
|
|
|
const maxEndTime = new Date(start.getTime() + 24 * 60 * 60 * 1000 - 1000) // 23:59:59
|
|
|
|
|
|
return {
|
|
|
disabledDate: (date) => {
|
|
|
return date.getTime() < start.getTime() || date.getTime() > maxEndTime.getTime()
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
// 新增：初始化空图表
|
|
|
function initializeEmptyCharts() {
|
|
|
const chartDom = document.getElementById('historyTrendChart')
|
|
|
if (chartDom && !oneChartInstance) {
|
|
|
oneChartInstance = echarts.init(chartDom)
|
|
|
}
|
|
|
|
|
|
// 显示无数据提示
|
|
|
if (oneChartInstance) {
|
|
|
oneChartInstance.setOption({
|
|
|
title: {
|
|
|
text: '请选择分析条件后点击"开始分析"',
|
|
|
left: 'center',
|
|
|
top: 'center',
|
|
|
textStyle: {
|
|
|
color: '#909399',
|
|
|
fontSize: 16,
|
|
|
fontWeight: 'normal'
|
|
|
}
|
|
|
},
|
|
|
xAxis: { show: false },
|
|
|
yAxis: { show: false },
|
|
|
series: []
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 清空表格数据
|
|
|
resultData.value = []
|
|
|
historyData.value = []
|
|
|
summaryData.value = [
|
|
|
{
|
|
|
title: '已选点位数',
|
|
|
value: 0,
|
|
|
desc: '请先选择点位'
|
|
|
},
|
|
|
{
|
|
|
title: '分析时间跨度',
|
|
|
value: '未设置',
|
|
|
desc: '请设置开始和结束时间'
|
|
|
},
|
|
|
{
|
|
|
title: '最大波动点位',
|
|
|
value: '-',
|
|
|
desc: '无数据'
|
|
|
},
|
|
|
{
|
|
|
title: '最小波动点位',
|
|
|
value: '-',
|
|
|
desc: '无数据'
|
|
|
},
|
|
|
{
|
|
|
title: '最高值点位',
|
|
|
value: '-',
|
|
|
desc: '无数据'
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
|
|
|
// 生命周期
|
|
|
onMounted(async () => {
|
|
|
getDiviceList()
|
|
|
// 2. 检查是否有保存的查询参数
|
|
|
const hasContactInfo = selectedPointCodes.value && selectedPointCodes.value.length > 0
|
|
|
|
|
|
if (hasContactInfo) {
|
|
|
// 3. 如果有保存的参数，自动调用接口
|
|
|
console.log('检测到保存的分析条件，自动查询...')
|
|
|
await handleAnalyze() // 自动调用分析
|
|
|
} else {
|
|
|
// 4. 如果没有保存的参数，只初始化图表（显示无数据状态）
|
|
|
console.log('无保存的分析条件，显示空状态')
|
|
|
initializeEmptyCharts()
|
|
|
calculateAnalysis() // 计算空的统计结果
|
|
|
}
|
|
|
|
|
|
// 设置页面加载完成标志
|
|
|
pageLoaded.value = true
|
|
|
/* calculateAnalysis()
|
|
|
nextTick(() => {
|
|
|
updateChart()
|
|
|
})*/
|
|
|
})
|
|
|
|
|
|
// 监听窗口变化
|
|
|
window.addEventListener('resize', () => {
|
|
|
if (chartInstance.value) {
|
|
|
chartInstance.value.resize()
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.app-container {
|
|
|
min-width: 1180px;
|
|
|
}
|
|
|
|
|
|
.top-card {
|
|
|
margin-bottom: 10px;
|
|
|
background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
|
|
|
border: 1px solid var(--el-border-color);
|
|
|
border-radius: 8px;
|
|
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
|
|
|
|
|
|
.device-info {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
.action-buttons {
|
|
|
margin-top: 20px;
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.filter-card {
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 9px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 700;
|
|
|
color: #1d2939;
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
width: 4px;
|
|
|
height: 16px;
|
|
|
border-radius: 2px;
|
|
|
background: var(--el-color-primary);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.device-info-card {
|
|
|
height: 100%;
|
|
|
padding: 14px;
|
|
|
background: #f8fbff;
|
|
|
border: 1px solid #e0e9f6;
|
|
|
border-radius: 8px;
|
|
|
|
|
|
h3 {
|
|
|
margin: 0 0 12px;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.point-selector-card {
|
|
|
border: 1px solid var(--el-border-color);
|
|
|
border-radius: 8px;
|
|
|
background: #fff;
|
|
|
overflow: hidden;
|
|
|
width: 100%;
|
|
|
.selector-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
padding: 10px;
|
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|
|
background: #fbfcfe;
|
|
|
}
|
|
|
|
|
|
.selected-tags {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 8px;
|
|
|
min-height: 30px;
|
|
|
padding: 10px;
|
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|
|
}
|
|
|
|
|
|
.point-list {
|
|
|
max-height: 230px;
|
|
|
overflow: auto;
|
|
|
padding: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.summary-row {
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
.summary-card {
|
|
|
padding: 16px;
|
|
|
border: 1px solid var(--el-border-color);
|
|
|
border-radius: 8px;
|
|
|
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
|
|
|
transition: all 0.18s ease;
|
|
|
|
|
|
&:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
|
|
}
|
|
|
|
|
|
&.summary-warn {
|
|
|
border-color: #ffd89b;
|
|
|
background: linear-gradient(180deg, #fff 0%, #fff9ef 100%);
|
|
|
}
|
|
|
|
|
|
.summary-title {
|
|
|
color: var(--el-text-color-secondary);
|
|
|
font-size: 13px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.summary-value {
|
|
|
margin-top: 9px;
|
|
|
color: #142033;
|
|
|
font-size: 25px;
|
|
|
font-weight: 800;
|
|
|
line-height: 1.1;
|
|
|
}
|
|
|
|
|
|
.summary-desc {
|
|
|
margin-top: 8px;
|
|
|
color: var(--el-text-color-placeholder);
|
|
|
font-size: 12px;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chart-card {
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.chart-container {
|
|
|
width: 100%;
|
|
|
height: 430px;
|
|
|
}
|
|
|
|
|
|
.chart-note {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.result-card, .detail-card {
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.suggest-aside {
|
|
|
position: sticky;
|
|
|
top: 20px;
|
|
|
height: fit-content;
|
|
|
|
|
|
.suggest-card {
|
|
|
.health-score {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
height: 148px;
|
|
|
margin-bottom: 16px;
|
|
|
background: radial-gradient(circle at center, #fff 0%, #eef6ff 100%);
|
|
|
border: 1px solid #dce9fb;
|
|
|
border-radius: 8px;
|
|
|
|
|
|
.score-ring {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 112px;
|
|
|
height: 112px;
|
|
|
border-radius: 50%;
|
|
|
background: radial-gradient(circle at center, #fff 58%, transparent 59%),
|
|
|
conic-gradient(var(--el-color-primary) 0 86%, #dbe7f6 86% 100%);
|
|
|
color: #15375f;
|
|
|
|
|
|
strong {
|
|
|
font-size: 30px;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
margin-top: 5px;
|
|
|
color: var(--el-text-color-secondary);
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.suggest-list {
|
|
|
display: grid;
|
|
|
gap: 10px;
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
.suggest-item {
|
|
|
padding: 12px;
|
|
|
border-left: 4px solid var(--el-color-primary);
|
|
|
border-radius: 7px;
|
|
|
background: #fbfdff;
|
|
|
font-size: 13px;
|
|
|
line-height: 1.55;
|
|
|
|
|
|
&.el-alert--warning {
|
|
|
border-left-color: var(--el-color-warning);
|
|
|
background: #fffaf0;
|
|
|
}
|
|
|
|
|
|
&.el-alert--error {
|
|
|
border-left-color: var(--el-color-error);
|
|
|
background: #fff5f5;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.event-list {
|
|
|
h4 {
|
|
|
margin: 0 0 15px;
|
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.text-danger {
|
|
|
color: var(--el-color-danger);
|
|
|
font-weight: 700;
|
|
|
background: var(--el-color-danger-light-9);
|
|
|
padding: 2px 4px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.text-warning {
|
|
|
color: var(--el-color-warning);
|
|
|
font-weight: 700;
|
|
|
background: var(--el-color-warning-light-9);
|
|
|
padding: 2px 4px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
</style>
|