|
|
@@ -1,13 +1,6 @@
|
|
|
<template>
|
|
|
+ <div class="title-text">{{ selectData.strinstallpos || selectData.strname }} </div>
|
|
|
<div class="pressure-monitor">
|
|
|
- <!-- <div class="device-selector">
|
|
|
- <a-select style="width: 220px" v-model:value="selectedDeviceId" allowClear placeholder="请选择" class="code-mode-select" @change="changeSelect">
|
|
|
- <a-select-option v-for="item in IdList" :key="item.deviceId" :value="item.strname" />
|
|
|
- </a-select>
|
|
|
- </div> -->
|
|
|
- <div class="chart-container">
|
|
|
- <div ref="chartEl" class="chart"></div>
|
|
|
- </div>
|
|
|
<div class="table-container">
|
|
|
<MonitorTable
|
|
|
ref="MonitorDataTable"
|
|
|
@@ -19,26 +12,31 @@
|
|
|
design-scope="gate-monitor"
|
|
|
title="支架监测"
|
|
|
:isShowPagination="false"
|
|
|
- >
|
|
|
- </MonitorTable>
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="info-panel">
|
|
|
- <div class="legend-section">
|
|
|
- <h3>状态说明</h3>
|
|
|
- <div class="legend-grid">
|
|
|
- <div v-for="(item, index) in legendData" :key="index" class="legend-item">
|
|
|
- <span class="color-indicator" :style="{ backgroundColor: item.color }"></span>
|
|
|
- <span class="legend-text">{{ item.label }}</span>
|
|
|
+ <div class="chart-box">
|
|
|
+ <DoubleLeftOutlined class="icon" />
|
|
|
+ <div class="chart-container">
|
|
|
+ <div ref="chartEl" class="chart"></div>
|
|
|
+ </div>
|
|
|
+ <div class="info-panel">
|
|
|
+ <div class="legend-section">
|
|
|
+ <h3>状态说明</h3>
|
|
|
+ <div class="legend-grid">
|
|
|
+ <div v-for="(item, index) in legendData" :key="index" class="legend-item">
|
|
|
+ <span class="color-indicator" :style="{ backgroundColor: item.color }"></span>
|
|
|
+ <span class="legend-text">{{ item.label }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="range-section">
|
|
|
- <h3>数据范围</h3>
|
|
|
- <div class="range-grid">
|
|
|
- <div v-for="(item, idx) in dataRanges" :key="idx" class="range-item">
|
|
|
- <span class="color-indicator" :style="{ backgroundColor: item.color }"></span>
|
|
|
- <span class="legend-text">{{ item.label }}</span>
|
|
|
+ <div class="range-section">
|
|
|
+ <h3>数据范围</h3>
|
|
|
+ <div class="range-grid">
|
|
|
+ <div v-for="(item, idx) in dataRanges" :key="idx" class="range-item">
|
|
|
+ <span class="color-indicator" :style="{ backgroundColor: item.color }"></span>
|
|
|
+ <span class="legend-text">{{ item.label }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -47,229 +45,758 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted, computed, reactive } from 'vue';
|
|
|
-import * as echarts from 'echarts';
|
|
|
-import { list } from './main.api';
|
|
|
-import MonitorTable from '../comment/MonitorTable.vue';
|
|
|
-import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
|
|
|
-const chartEl = ref<HTMLElement>();
|
|
|
-const currentTime = computed(() => new Date().toLocaleString());
|
|
|
-const scroll = reactive({
|
|
|
- y: 230,
|
|
|
-});
|
|
|
-const deviceType = ref('Minepressure');
|
|
|
-const dataSource = ref<Array<any>>([]);
|
|
|
-const IdList = ref<Array<{ deviceId: string; strname: string }>>([]);
|
|
|
-const chartData = ref<Array<any>>([]);
|
|
|
-const chartDataShow = ref<Array<any>>([]);
|
|
|
-const selectRowIndex = ref(-1); // 选中行
|
|
|
-const colorRanges = [
|
|
|
- { min: -Infinity, max: 0, color: '#999999', label: '异常数据' },
|
|
|
- { min: 0, max: 252, color: '#5470c6', label: '初撑力不足' },
|
|
|
- { min: 252, max: 375, color: '#91cc75', label: '正常' },
|
|
|
- { min: 375, max: 425, color: '#fac858', label: '轻微来压' },
|
|
|
- { min: 425, max: 475, color: '#ee6666', label: '强来压' },
|
|
|
- { min: 475, max: Infinity, color: '#fc8452', label: '剧烈来压' },
|
|
|
-];
|
|
|
-const dataRanges = [
|
|
|
- { min: -Infinity, max: 0, color: '#999', label: '<0' },
|
|
|
- { min: 0, max: 252, color: '#5470c6', label: '0-252' },
|
|
|
- { min: 252, max: 375, color: '#91cc75', label: '252-375' },
|
|
|
- { min: 375, max: 425, color: '#fac858', label: '375-425' },
|
|
|
- { min: 425, max: 475, color: '#ee6666', label: '425-475' },
|
|
|
- { min: 475, max: Infinity, color: '#fc8452', label: '>475' },
|
|
|
-];
|
|
|
+ import { ref, onMounted, computed, reactive, onUnmounted } from 'vue';
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import { list } from './main.api';
|
|
|
+ import MonitorTable from '../comment/MonitorTable.vue';
|
|
|
+ import { DoubleLeftOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
|
-const legendData = colorRanges.map((item) => ({
|
|
|
- color: item.color,
|
|
|
- label: item.label,
|
|
|
-}));
|
|
|
-async function getDataSource() {
|
|
|
- const res = await list({ devicetype: 'Minepressure', pagetype: 'normal' });
|
|
|
- const dataArr = res.msgTxt[0].datalist || [];
|
|
|
- dataSource.value = [];
|
|
|
- IdList.value = [];
|
|
|
- dataArr.forEach((data) => {
|
|
|
- const readData = data.readData;
|
|
|
- chartData.value.push(Object.values(readData));
|
|
|
- chartDataShow.value = chartData.value[0];
|
|
|
- data = Object.assign(data, readData);
|
|
|
- dataSource.value.push(data);
|
|
|
- IdList.value.push({
|
|
|
- deviceId: data.deviceID,
|
|
|
- strname: data.strname,
|
|
|
- });
|
|
|
+ const chartEl = ref<HTMLElement>();
|
|
|
+ const currentTime = computed(() => new Date().toLocaleString());
|
|
|
+ const scroll = reactive({
|
|
|
+ y: 230,
|
|
|
});
|
|
|
-}
|
|
|
-// 切换检测数据
|
|
|
-async function getSelectRow(selectRow, index) {
|
|
|
- if (!selectRow) return;
|
|
|
- selectRowIndex.value = index;
|
|
|
- chartDataShow.value = chartData.value[index];
|
|
|
- initChart();
|
|
|
-}
|
|
|
-function initChart() {
|
|
|
- if (!chartEl.value) return;
|
|
|
- const chart = echarts.init(chartEl.value);
|
|
|
- const data = chartDataShow.value;
|
|
|
+ const deviceType = ref('Minepressure');
|
|
|
+ const dataSource = ref<Array<any>>([]);
|
|
|
+ const IdList = ref<Array<{ deviceId: string; strname: string }>>([]);
|
|
|
+ const chartData = ref<Array<any>>([]);
|
|
|
+ const chartDataShow = ref<Array<any>>([]);
|
|
|
+ const selectRowIndex = ref(-1); // 选中行
|
|
|
+ const selectData = ref<any>({});
|
|
|
+ const colorRanges = [
|
|
|
+ { min: -Infinity, max: 0, color: '#999999', label: '异常数据' },
|
|
|
+ { min: 0, max: 252, color: '#5470c6', label: '初撑力不足' },
|
|
|
+ { min: 252, max: 375, color: '#91cc75', label: '正常' },
|
|
|
+ { min: 375, max: 425, color: '#fac858', label: '轻微来压' },
|
|
|
+ { min: 425, max: 475, color: '#ee6666', label: '强来压' },
|
|
|
+ { min: 475, max: Infinity, color: '#fc8452', label: '剧烈来压' },
|
|
|
+ ];
|
|
|
+ const dataRanges = [
|
|
|
+ { min: -Infinity, max: 0, color: '#999', label: '<0' },
|
|
|
+ { min: 0, max: 252, color: '#5470c6', label: '0-252' },
|
|
|
+ { min: 252, max: 375, color: '#91cc75', label: '252-375' },
|
|
|
+ { min: 375, max: 425, color: '#fac858', label: '375-425' },
|
|
|
+ { min: 425, max: 475, color: '#ee6666', label: '425-475' },
|
|
|
+ { min: 475, max: Infinity, color: '#fc8452', label: '>475' },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const legendData = colorRanges.map((item) => ({
|
|
|
+ color: item.color,
|
|
|
+ label: item.label,
|
|
|
+ }));
|
|
|
+
|
|
|
+ let timer: null | NodeJS.Timeout = undefined;
|
|
|
|
|
|
- const option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- formatter: (params: any) => {
|
|
|
- const value = params[0].value;
|
|
|
- const range = colorRanges.find((r) => value >= r.min && value < r.max);
|
|
|
- return `${params[0].dataIndex + 1}#<br/>
|
|
|
+ async function getDataSource(flag?) {
|
|
|
+ if (timer) timer = null;
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ let res = await list({ devicetype: 'Minepressure', pagetype: 'normal' });
|
|
|
+ res = {
|
|
|
+ cmd: 'monitordata',
|
|
|
+ msgTxt: [
|
|
|
+ {
|
|
|
+ datalist: [
|
|
|
+ {
|
|
|
+ msgType: null,
|
|
|
+ deviceID: '1978977608402197565',
|
|
|
+ strname: '22524支架',
|
|
|
+ strinstallpos: '22524支架',
|
|
|
+ fsectarea: 'null',
|
|
|
+ planedVa: null,
|
|
|
+ regulation: null,
|
|
|
+ stationname: '22524支架',
|
|
|
+ stationtype: 'redis',
|
|
|
+ deviceType: 'Minepressure_Support',
|
|
|
+ typeName: '22524支架',
|
|
|
+ netStatus: 1,
|
|
|
+ warnFlag: 0,
|
|
|
+ warnLevel: 0,
|
|
|
+ warnLevel_str: '正常',
|
|
|
+ syswarnLevel: null,
|
|
|
+ syswarnLevel_str: null,
|
|
|
+ syswarnLevel_des: null,
|
|
|
+ warnTime: null,
|
|
|
+ readTime: '2025-09-20 11:14:59',
|
|
|
+ warnDes: '',
|
|
|
+ frontGateOpenCtrl: null,
|
|
|
+ rearGateOpenCtrl: null,
|
|
|
+ readData: {
|
|
|
+ SLD158_RightPressure: '290',
|
|
|
+ SLD116_RightPressure: '419',
|
|
|
+ SLD50_RightPressure: '310',
|
|
|
+ SLD174_RightPressure: '278',
|
|
|
+ SLD132_RightPressure: '322',
|
|
|
+ SLD137_RightPressure: '329',
|
|
|
+ SLD153_RightPressure: '320',
|
|
|
+ SLD18_RightPressure: '291',
|
|
|
+ SLD111_RightPressure: '390',
|
|
|
+ SLD92_RightPressure: '343',
|
|
|
+ SLD39_RightPressure: '333',
|
|
|
+ SLD71_RightPressure: '305',
|
|
|
+ SLD8_RightPressure: '292',
|
|
|
+ SLD80_RightPressure: '381',
|
|
|
+ SLD97_RightPressure: '386',
|
|
|
+ SLD13_RightPressure: '307',
|
|
|
+ SLD3_RightPressure: '279',
|
|
|
+ SLD162_RightPressure: '288',
|
|
|
+ SLD34_RightPressure: '328',
|
|
|
+ SLD141_RightPressure: '297',
|
|
|
+ SLD55_RightPressure: '306',
|
|
|
+ SLD76_RightPressure: '348',
|
|
|
+ SLD120_RightPressure: '396',
|
|
|
+ SLD123_RightPressure: '379',
|
|
|
+ SLD160_RightPressure: '298',
|
|
|
+ SLD144_RightPressure: '285',
|
|
|
+ SLD6_RightPressure: '282',
|
|
|
+ SLD102_RightPressure: '373',
|
|
|
+ SLD150_RightPressure: '286',
|
|
|
+ SLD171_RightPressure: '282',
|
|
|
+ SLD25_RightPressure: '294',
|
|
|
+ SLD165_RightPressure: '296',
|
|
|
+ SLD113_RightPressure: '400',
|
|
|
+ SLD134_RightPressure: '320',
|
|
|
+ SLD176_RightPressure: '274',
|
|
|
+ SLD155_RightPressure: '289',
|
|
|
+ SLD46_RightPressure: '279',
|
|
|
+ SLD67_RightPressure: '339',
|
|
|
+ SLD88_RightPressure: '378',
|
|
|
+ SLD94_RightPressure: '352',
|
|
|
+ SLD149_RightPressure: '281',
|
|
|
+ SLD83_RightPressure: '356',
|
|
|
+ SLD41_RightPressure: '315',
|
|
|
+ SLD107_RightPressure: '391',
|
|
|
+ SLD128_RightPressure: '346',
|
|
|
+ SLD62_RightPressure: '281',
|
|
|
+ SLD20_RightPressure: '302',
|
|
|
+ SLD99_RightPressure: '349',
|
|
|
+ SLD57_RightPressure: '275',
|
|
|
+ SLD78_RightPressure: '382',
|
|
|
+ SLD23_RightPressure: '327',
|
|
|
+ SLD44_RightPressure: '307',
|
|
|
+ SLD143_RightPressure: '292',
|
|
|
+ SLD65_RightPressure: '325',
|
|
|
+ SLD164_RightPressure: '292',
|
|
|
+ SLD86_RightPressure: '322',
|
|
|
+ SLD87_RightPressure: '365',
|
|
|
+ SLD90_RightPressure: '377',
|
|
|
+ SLD1_RightPressure: '281',
|
|
|
+ SLD101_RightPressure: '399',
|
|
|
+ SLD122_RightPressure: '345',
|
|
|
+ SLD156_RightPressure: '285',
|
|
|
+ SLD15_RightPressure: '306',
|
|
|
+ SLD36_RightPressure: '307',
|
|
|
+ SLD114_RightPressure: '449',
|
|
|
+ SLD135_RightPressure: '324',
|
|
|
+ SLD85_RightPressure: '357',
|
|
|
+ SLD64_RightPressure: '299',
|
|
|
+ SLD157_RightPressure: '284',
|
|
|
+ SLD22_RightPressure: '317',
|
|
|
+ SLD43_RightPressure: '314',
|
|
|
+ SLD91_RightPressure: '389',
|
|
|
+ SLD79_RightPressure: '386',
|
|
|
+ SLD9_RightPressure: '304',
|
|
|
+ SLD70_RightPressure: '336',
|
|
|
+ SLD121_RightPressure: '385',
|
|
|
+ SLD142_RightPressure: '291',
|
|
|
+ SLD58_RightPressure: '279',
|
|
|
+ SLD16_RightPressure: '301',
|
|
|
+ SLD163_RightPressure: '286',
|
|
|
+ SLD37_RightPressure: '304',
|
|
|
+ SLD136_RightPressure: '313',
|
|
|
+ SLD115_RightPressure: '408',
|
|
|
+ SLD100_RightPressure: '414',
|
|
|
+ SLD109_RightPressure: '428',
|
|
|
+ SLD108_RightPressure: '454',
|
|
|
+ SLD21_RightPressure: '317',
|
|
|
+ SLD103_RightPressure: '328',
|
|
|
+ SLD63_RightPressure: '285',
|
|
|
+ SLD84_RightPressure: '355',
|
|
|
+ SLD42_RightPressure: '334',
|
|
|
+ sign: '0',
|
|
|
+ SLD47_RightPressure: '313',
|
|
|
+ SLD26_RightPressure: '292',
|
|
|
+ SLD7_RightPressure: '287',
|
|
|
+ SLD124_RightPressure: '364',
|
|
|
+ SLD166_RightPressure: '282',
|
|
|
+ SLD145_RightPressure: '295',
|
|
|
+ SLD59_RightPressure: '284',
|
|
|
+ SLD17_RightPressure: '308',
|
|
|
+ SLD170_RightPressure: '280',
|
|
|
+ SLD38_RightPressure: '315',
|
|
|
+ SLD133_RightPressure: '321',
|
|
|
+ SLD112_RightPressure: '372',
|
|
|
+ SLD68_RightPressure: '332',
|
|
|
+ SLD89_RightPressure: '362',
|
|
|
+ SLD175_RightPressure: '277',
|
|
|
+ SLD154_RightPressure: '285',
|
|
|
+ SLD129_RightPressure: '336',
|
|
|
+ SLD56_RightPressure: '304',
|
|
|
+ SLD35_RightPressure: '304',
|
|
|
+ SLD14_RightPressure: '305',
|
|
|
+ SLD98_RightPressure: '334',
|
|
|
+ SLD77_RightPressure: '365',
|
|
|
+ SLD93_RightPressure: '365',
|
|
|
+ SLD117_RightPressure: '363',
|
|
|
+ SLD159_RightPressure: '307',
|
|
|
+ SLD138_RightPressure: '294',
|
|
|
+ SLD30_RightPressure: '290',
|
|
|
+ SLD72_RightPressure: '311',
|
|
|
+ SLD19_RightPressure: '280',
|
|
|
+ SLD51_RightPressure: '298',
|
|
|
+ SLD24_RightPressure: '301',
|
|
|
+ SLD66_RightPressure: '302',
|
|
|
+ SLD45_RightPressure: '319',
|
|
|
+ SLD2_RightPressure: '280',
|
|
|
+ SLD140_RightPressure: '300',
|
|
|
+ SLD161_RightPressure: '294',
|
|
|
+ SLD29_RightPressure: '340',
|
|
|
+ SLD5_RightPressure: '285',
|
|
|
+ SLD73_RightPressure: '343',
|
|
|
+ SLD31_RightPressure: '330',
|
|
|
+ SLD172_RightPressure: '289',
|
|
|
+ SLD52_RightPressure: '295',
|
|
|
+ SLD139_RightPressure: '308',
|
|
|
+ SLD118_RightPressure: '346',
|
|
|
+ SLD10_RightPressure: '297',
|
|
|
+ SLD130_RightPressure: '339',
|
|
|
+ SLD119_RightPressure: '361',
|
|
|
+ SLD151_RightPressure: '289',
|
|
|
+ SLD11_RightPressure: '283',
|
|
|
+ SLD40_RightPressure: '268',
|
|
|
+ SLD32_RightPressure: '294',
|
|
|
+ SLD74_RightPressure: '353',
|
|
|
+ SLD82_RightPressure: '387',
|
|
|
+ SLD95_RightPressure: '402',
|
|
|
+ SLD148_RightPressure: '283',
|
|
|
+ SLD127_RightPressure: '319',
|
|
|
+ SLD106_RightPressure: '417',
|
|
|
+ SLD53_RightPressure: '274',
|
|
|
+ SLD169_RightPressure: '277',
|
|
|
+ SLD28_RightPressure: '302',
|
|
|
+ SLD49_RightPressure: '320',
|
|
|
+ SLD61_RightPressure: '286',
|
|
|
+ SLD110_RightPressure: '404',
|
|
|
+ SLD173_RightPressure: '277',
|
|
|
+ SLD131_RightPressure: '333',
|
|
|
+ SLD48_RightPressure: '308',
|
|
|
+ SLD69_RightPressure: '324',
|
|
|
+ SLD152_RightPressure: '293',
|
|
|
+ SLD27_RightPressure: '309',
|
|
|
+ SLD167_RightPressure: '267',
|
|
|
+ SLD125_RightPressure: '343',
|
|
|
+ tTime: '2025-09-20 11:14:58',
|
|
|
+ SLD146_RightPressure: '286',
|
|
|
+ SLD104_RightPressure: '375',
|
|
|
+ SLD105_RightPressure: '421',
|
|
|
+ SLD126_RightPressure: '324',
|
|
|
+ SLD33_RightPressure: '337',
|
|
|
+ SLD168_RightPressure: '281',
|
|
|
+ SLD147_RightPressure: '304',
|
|
|
+ SLD12_RightPressure: '318',
|
|
|
+ SLD4_RightPressure: '313',
|
|
|
+ SLD54_RightPressure: '295',
|
|
|
+ isRun: '-2',
|
|
|
+ SLD60_RightPressure: '273',
|
|
|
+ SLD81_RightPressure: '371',
|
|
|
+ SLD75_RightPressure: '376',
|
|
|
+ SLD96_RightPressure: '387',
|
|
|
+ },
|
|
|
+ readDataDes: null,
|
|
|
+ limits: null,
|
|
|
+ summaryHour: [],
|
|
|
+ summaryDay: [],
|
|
|
+ history: [],
|
|
|
+ dayhistory: [],
|
|
|
+ totalInfo: null,
|
|
|
+ sign: null,
|
|
|
+ cameras: [],
|
|
|
+ links: [],
|
|
|
+ avgParam: {},
|
|
|
+ other1: null,
|
|
|
+ other2: null,
|
|
|
+ other3: null,
|
|
|
+ remarkInfo: null,
|
|
|
+ linkInfo: null,
|
|
|
+ addrIndex: null,
|
|
|
+ warnLogNotOkCount: 0,
|
|
|
+ otherInfo: null,
|
|
|
+ orderNum: 0,
|
|
|
+ testFlag: null,
|
|
|
+ strRemark: null,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ msgType: null,
|
|
|
+ deviceID: '1978977608402197564',
|
|
|
+ strname: '31202支架',
|
|
|
+ strinstallpos: '31202支架',
|
|
|
+ fsectarea: 'null',
|
|
|
+ planedVa: null,
|
|
|
+ regulation: null,
|
|
|
+ stationname: '31202支架',
|
|
|
+ stationtype: 'redis',
|
|
|
+ deviceType: 'Minepressure_Support1',
|
|
|
+ typeName: '31202支架',
|
|
|
+ netStatus: 1,
|
|
|
+ warnFlag: 0,
|
|
|
+ warnLevel: 0,
|
|
|
+ warnLevel_str: '正常',
|
|
|
+ syswarnLevel: null,
|
|
|
+ syswarnLevel_str: null,
|
|
|
+ syswarnLevel_des: null,
|
|
|
+ warnTime: null,
|
|
|
+ readTime: '2025-09-20 11:14:59',
|
|
|
+ warnDes: '',
|
|
|
+ frontGateOpenCtrl: null,
|
|
|
+ rearGateOpenCtrl: null,
|
|
|
+ readData: {
|
|
|
+ SLD158_RightPressure: '306',
|
|
|
+ SLD116_RightPressure: '280',
|
|
|
+ SLD50_RightPressure: '276',
|
|
|
+ SLD174_RightPressure: '286',
|
|
|
+ SLD132_RightPressure: '317',
|
|
|
+ SLD153_RightPressure: '340',
|
|
|
+ SLD137_RightPressure: '286',
|
|
|
+ SLD18_RightPressure: '283',
|
|
|
+ SLD111_RightPressure: '354',
|
|
|
+ SLD71_RightPressure: '301',
|
|
|
+ SLD39_RightPressure: '253',
|
|
|
+ SLD92_RightPressure: '302',
|
|
|
+ SLD8_RightPressure: '281',
|
|
|
+ SLD80_RightPressure: '292',
|
|
|
+ SLD97_RightPressure: '297',
|
|
|
+ SLD13_RightPressure: '320',
|
|
|
+ SLD162_RightPressure: '324',
|
|
|
+ SLD3_RightPressure: '263',
|
|
|
+ SLD141_RightPressure: '287',
|
|
|
+ SLD34_RightPressure: '321',
|
|
|
+ SLD55_RightPressure: '284',
|
|
|
+ SLD76_RightPressure: '290',
|
|
|
+ SLD120_RightPressure: '292',
|
|
|
+ SLD123_RightPressure: '268',
|
|
|
+ SLD144_RightPressure: '341',
|
|
|
+ SLD160_RightPressure: '310',
|
|
|
+ SLD6_RightPressure: '275',
|
|
|
+ SLD102_RightPressure: '289',
|
|
|
+ SLD150_RightPressure: '280',
|
|
|
+ SLD171_RightPressure: '292',
|
|
|
+ SLD25_RightPressure: '292',
|
|
|
+ SLD165_RightPressure: '326',
|
|
|
+ SLD113_RightPressure: '298',
|
|
|
+ SLD134_RightPressure: '284',
|
|
|
+ SLD155_RightPressure: '328',
|
|
|
+ SLD46_RightPressure: '274',
|
|
|
+ SLD67_RightPressure: '329',
|
|
|
+ SLD94_RightPressure: '319',
|
|
|
+ SLD88_RightPressure: '276',
|
|
|
+ SLD83_RightPressure: '321',
|
|
|
+ SLD41_RightPressure: '309',
|
|
|
+ SLD149_RightPressure: '309',
|
|
|
+ SLD107_RightPressure: '280',
|
|
|
+ SLD128_RightPressure: '361',
|
|
|
+ SLD62_RightPressure: '268',
|
|
|
+ SLD20_RightPressure: '269',
|
|
|
+ SLD99_RightPressure: '298',
|
|
|
+ SLD57_RightPressure: '362',
|
|
|
+ SLD78_RightPressure: '278',
|
|
|
+ SLD143_RightPressure: '302',
|
|
|
+ SLD65_RightPressure: '291',
|
|
|
+ SLD23_RightPressure: '296',
|
|
|
+ SLD44_RightPressure: '331',
|
|
|
+ SLD164_RightPressure: '304',
|
|
|
+ SLD86_RightPressure: '305',
|
|
|
+ SLD87_RightPressure: '294',
|
|
|
+ SLD90_RightPressure: '283',
|
|
|
+ SLD1_RightPressure: '65',
|
|
|
+ SLD122_RightPressure: '301',
|
|
|
+ SLD101_RightPressure: '330',
|
|
|
+ SLD15_RightPressure: '294',
|
|
|
+ SLD156_RightPressure: '304',
|
|
|
+ SLD36_RightPressure: '297',
|
|
|
+ SLD114_RightPressure: '274',
|
|
|
+ SLD135_RightPressure: '292',
|
|
|
+ SLD64_RightPressure: '330',
|
|
|
+ SLD85_RightPressure: '309',
|
|
|
+ SLD157_RightPressure: '299',
|
|
|
+ SLD43_RightPressure: '305',
|
|
|
+ SLD22_RightPressure: '310',
|
|
|
+ SLD91_RightPressure: '281',
|
|
|
+ SLD79_RightPressure: '302',
|
|
|
+ SLD70_RightPressure: '342',
|
|
|
+ SLD9_RightPressure: '270',
|
|
|
+ SLD142_RightPressure: '294',
|
|
|
+ SLD121_RightPressure: '286',
|
|
|
+ SLD16_RightPressure: '297',
|
|
|
+ SLD58_RightPressure: '273',
|
|
|
+ SLD163_RightPressure: '317',
|
|
|
+ SLD37_RightPressure: '286',
|
|
|
+ SLD136_RightPressure: '288',
|
|
|
+ SLD115_RightPressure: '268',
|
|
|
+ SLD109_RightPressure: '296',
|
|
|
+ SLD100_RightPressure: '358',
|
|
|
+ SLD108_RightPressure: '278',
|
|
|
+ SLD103_RightPressure: '269',
|
|
|
+ SLD21_RightPressure: '288',
|
|
|
+ SLD63_RightPressure: '312',
|
|
|
+ SLD84_RightPressure: '325',
|
|
|
+ SLD42_RightPressure: '316',
|
|
|
+ sign: '0',
|
|
|
+ SLD47_RightPressure: '270',
|
|
|
+ SLD26_RightPressure: '326',
|
|
|
+ SLD7_RightPressure: '308',
|
|
|
+ SLD124_RightPressure: '269',
|
|
|
+ SLD166_RightPressure: '332',
|
|
|
+ SLD145_RightPressure: '267',
|
|
|
+ SLD17_RightPressure: '306',
|
|
|
+ SLD59_RightPressure: '279',
|
|
|
+ SLD170_RightPressure: '306',
|
|
|
+ SLD38_RightPressure: '286',
|
|
|
+ SLD133_RightPressure: '309',
|
|
|
+ SLD112_RightPressure: '342',
|
|
|
+ SLD68_RightPressure: '289',
|
|
|
+ SLD89_RightPressure: '318',
|
|
|
+ SLD175_RightPressure: '285',
|
|
|
+ SLD154_RightPressure: '327',
|
|
|
+ SLD129_RightPressure: '363',
|
|
|
+ SLD14_RightPressure: '327',
|
|
|
+ SLD98_RightPressure: '332',
|
|
|
+ SLD35_RightPressure: '319',
|
|
|
+ SLD77_RightPressure: '271',
|
|
|
+ SLD56_RightPressure: '351',
|
|
|
+ SLD93_RightPressure: '302',
|
|
|
+ SLD117_RightPressure: '284',
|
|
|
+ SLD159_RightPressure: '301',
|
|
|
+ SLD138_RightPressure: '317',
|
|
|
+ SLD51_RightPressure: '282',
|
|
|
+ SLD30_RightPressure: '291',
|
|
|
+ SLD19_RightPressure: '292',
|
|
|
+ SLD72_RightPressure: '272',
|
|
|
+ SLD24_RightPressure: '303',
|
|
|
+ SLD66_RightPressure: '287',
|
|
|
+ SLD45_RightPressure: '265',
|
|
|
+ SLD2_RightPressure: '285',
|
|
|
+ SLD140_RightPressure: '288',
|
|
|
+ SLD29_RightPressure: '286',
|
|
|
+ SLD161_RightPressure: '319',
|
|
|
+ SLD5_RightPressure: '295',
|
|
|
+ SLD73_RightPressure: '275',
|
|
|
+ SLD31_RightPressure: '276',
|
|
|
+ SLD172_RightPressure: '283',
|
|
|
+ SLD52_RightPressure: '270',
|
|
|
+ SLD118_RightPressure: '281',
|
|
|
+ SLD139_RightPressure: '328',
|
|
|
+ SLD10_RightPressure: '262',
|
|
|
+ SLD130_RightPressure: '358',
|
|
|
+ SLD151_RightPressure: '275',
|
|
|
+ SLD119_RightPressure: '285',
|
|
|
+ SLD11_RightPressure: '286',
|
|
|
+ SLD40_RightPressure: '301',
|
|
|
+ SLD74_RightPressure: '272',
|
|
|
+ SLD32_RightPressure: '280',
|
|
|
+ SLD82_RightPressure: '317',
|
|
|
+ SLD95_RightPressure: '281',
|
|
|
+ SLD106_RightPressure: '283',
|
|
|
+ SLD148_RightPressure: '296',
|
|
|
+ SLD127_RightPressure: '297',
|
|
|
+ SLD53_RightPressure: '257',
|
|
|
+ SLD28_RightPressure: '299',
|
|
|
+ SLD49_RightPressure: '284',
|
|
|
+ SLD169_RightPressure: '319',
|
|
|
+ SLD61_RightPressure: '287',
|
|
|
+ SLD110_RightPressure: '347',
|
|
|
+ SLD173_RightPressure: '254',
|
|
|
+ SLD131_RightPressure: '358',
|
|
|
+ SLD69_RightPressure: '332',
|
|
|
+ SLD48_RightPressure: '275',
|
|
|
+ SLD152_RightPressure: '304',
|
|
|
+ SLD27_RightPressure: '294',
|
|
|
+ SLD167_RightPressure: '370',
|
|
|
+ SLD125_RightPressure: '337',
|
|
|
+ tTime: '2025-09-20 11:14:57',
|
|
|
+ SLD146_RightPressure: '274',
|
|
|
+ SLD104_RightPressure: '257',
|
|
|
+ SLD105_RightPressure: '275',
|
|
|
+ SLD126_RightPressure: '350',
|
|
|
+ SLD33_RightPressure: '272',
|
|
|
+ SLD168_RightPressure: '316',
|
|
|
+ SLD147_RightPressure: '312',
|
|
|
+ SLD12_RightPressure: '267',
|
|
|
+ SLD4_RightPressure: '0',
|
|
|
+ SLD54_RightPressure: '255',
|
|
|
+ isRun: '-2',
|
|
|
+ SLD60_RightPressure: '279',
|
|
|
+ SLD81_RightPressure: '288',
|
|
|
+ SLD75_RightPressure: '281',
|
|
|
+ SLD96_RightPressure: '289',
|
|
|
+ },
|
|
|
+ readDataDes: null,
|
|
|
+ limits: null,
|
|
|
+ summaryHour: [],
|
|
|
+ summaryDay: [],
|
|
|
+ history: [],
|
|
|
+ dayhistory: [],
|
|
|
+ totalInfo: null,
|
|
|
+ sign: null,
|
|
|
+ cameras: [],
|
|
|
+ links: [],
|
|
|
+ avgParam: {},
|
|
|
+ other1: null,
|
|
|
+ other2: null,
|
|
|
+ other3: null,
|
|
|
+ remarkInfo: null,
|
|
|
+ linkInfo: null,
|
|
|
+ addrIndex: null,
|
|
|
+ warnLogNotOkCount: 0,
|
|
|
+ otherInfo: null,
|
|
|
+ orderNum: 0,
|
|
|
+ testFlag: null,
|
|
|
+ strRemark: null,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ avginfo: {
|
|
|
+ warnFlag: {
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ typeName: '矿压',
|
|
|
+ type: 'Minepressure',
|
|
|
+ locallist: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ const dataArr = res.msgTxt[0].datalist || [];
|
|
|
+ dataSource.value = [];
|
|
|
+ IdList.value = [];
|
|
|
+ dataArr.forEach((data) => {
|
|
|
+ const readData = data.readData;
|
|
|
+ chartData.value.push(Object.values(readData));
|
|
|
+ chartDataShow.value = chartData.value[0];
|
|
|
+ data = Object.assign(data, readData);
|
|
|
+
|
|
|
+ dataSource.value.push(data);
|
|
|
+ IdList.value.push({
|
|
|
+ deviceId: data.deviceID,
|
|
|
+ strname: data.strname,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ selectData.value = selectRowIndex.value > -1 ? dataSource.value[selectRowIndex.value] : dataSource.value[0];
|
|
|
+ if (timer) {
|
|
|
+ getDataSource();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 切换检测数据
|
|
|
+ async function getSelectRow(selectRow, index) {
|
|
|
+ if (!selectRow) return;
|
|
|
+ selectRowIndex.value = index;
|
|
|
+ chartDataShow.value = chartData.value[index];
|
|
|
+ initChart();
|
|
|
+ }
|
|
|
+ function initChart() {
|
|
|
+ if (!chartEl.value) return;
|
|
|
+ const chart = echarts.init(chartEl.value);
|
|
|
+ const data = chartDataShow.value;
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: (params: any) => {
|
|
|
+ const value = params[0].value;
|
|
|
+ const range = colorRanges.find((r) => value >= r.min && value < r.max);
|
|
|
+ return `${params[0].dataIndex + 1}#<br/>
|
|
|
值: ${value}kPa<br/>
|
|
|
状态: ${range?.label || '未知'}`;
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: 20,
|
|
|
- xAxisIndex: [0],
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'slider',
|
|
|
- start: 0,
|
|
|
- end: 20,
|
|
|
- xAxisIndex: [0],
|
|
|
- bottom: 10,
|
|
|
- height: 20,
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ xAxisIndex: [0],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ start: 0,
|
|
|
+ end: 20,
|
|
|
+ xAxisIndex: [0],
|
|
|
+ bottom: 10,
|
|
|
+ height: 20,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data.map((_, i) => `${i + 1}#`),
|
|
|
+ axisLabel: {
|
|
|
+ interval: 1,
|
|
|
+ rotate: 45,
|
|
|
+ },
|
|
|
},
|
|
|
- ],
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: data.map((_, i) => `${i + 1}#`),
|
|
|
- axisLabel: {
|
|
|
- interval: 1,
|
|
|
- rotate: 45,
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '矿压值(kPa)',
|
|
|
+ min: -50,
|
|
|
+ max: 600,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#eeeeee55', // 设置Y轴颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: '矿压值(kPa)',
|
|
|
- min: -50,
|
|
|
- max: 600,
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: data.map((value) => ({
|
|
|
- value,
|
|
|
- itemStyle: {
|
|
|
- color: colorRanges.find((r) => value >= r.min && value < r.max)?.color,
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: data.map((value) => ({
|
|
|
+ value,
|
|
|
+ itemStyle: {
|
|
|
+ color: colorRanges.find((r) => value >= r.min && value < r.max)?.color,
|
|
|
+ },
|
|
|
+ })),
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '60%',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ formatter: '{c}',
|
|
|
},
|
|
|
- })),
|
|
|
- type: 'bar',
|
|
|
- barWidth: '60%',
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- formatter: '{c}',
|
|
|
},
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ left: '10',
|
|
|
+ right: '10',
|
|
|
+ bottom: '10',
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '15%',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- };
|
|
|
- chart.setOption(option);
|
|
|
- window.addEventListener('resize', () => chart.resize());
|
|
|
-}
|
|
|
+ };
|
|
|
+ chart.setOption(option);
|
|
|
+ window.addEventListener('resize', () => chart.resize());
|
|
|
+ }
|
|
|
|
|
|
-onMounted(async () => {
|
|
|
- await getDataSource();
|
|
|
- initChart();
|
|
|
-});
|
|
|
+ onMounted(async () => {
|
|
|
+ timer = null;
|
|
|
+ await getDataSource(1);
|
|
|
+ initChart();
|
|
|
+ });
|
|
|
+ onUnmounted(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearInterval(timer);
|
|
|
+ }
|
|
|
+ timer = undefined;
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-.pressure-monitor {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 10px 10px 15px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.time-display {
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
+<style lang="less" scoped>
|
|
|
+ .title-text {
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ top: 52px;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+ .pressure-monitor {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 10px 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
|
|
|
-.chart-container {
|
|
|
- width: 100%;
|
|
|
- height: 350px;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 15px;
|
|
|
-}
|
|
|
+ .time-display {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
|
|
|
-.table-container {
|
|
|
- width: 100%;
|
|
|
- height: 300px;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 15px;
|
|
|
-}
|
|
|
-.chart {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
+ .table-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 270px;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 15px 20px;
|
|
|
+ margin-top: 80px;
|
|
|
+ border-bottom: 1px solid var(--vent-table-thead-border);
|
|
|
+ background-color: #ffffff08;
|
|
|
+ }
|
|
|
|
|
|
-.info-panel {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 20px;
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
+ .chart-box {
|
|
|
+ margin-top: 10px;
|
|
|
+ border: 1px solid var(--vent-btn-primary-border-color);
|
|
|
+ position: relative;
|
|
|
+ .icon {
|
|
|
+ width: 100%;
|
|
|
+ color: var(--vent-table-thead-border);
|
|
|
+ font-size: 12px;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ position: absolute;
|
|
|
+ top: -12px;
|
|
|
+ }
|
|
|
+ .chart-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 380px;
|
|
|
+ border-radius: 8px;
|
|
|
+ // padding: 5px;
|
|
|
+ }
|
|
|
+ .info-panel {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 20px;
|
|
|
+ padding: 20px 20px 10px 20px;
|
|
|
+ }
|
|
|
+ background-color: #ffffff08;
|
|
|
+ }
|
|
|
+ .chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
|
|
|
-.legend-section,
|
|
|
-.range-section {
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
-}
|
|
|
+ .legend-section,
|
|
|
+ .range-section {
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
|
|
|
-h3 {
|
|
|
- color: #fff;
|
|
|
- margin-top: 0;
|
|
|
- margin-bottom: 15px;
|
|
|
- font-size: 16px;
|
|
|
- padding-bottom: 8px;
|
|
|
- border-bottom: 1px solid #303efd;
|
|
|
-}
|
|
|
+ h3 {
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-bottom: 1px solid var(--vent-btn-primary-border-color);
|
|
|
+ }
|
|
|
|
|
|
-.legend-grid,
|
|
|
-.range-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 12px;
|
|
|
-}
|
|
|
+ .legend-grid,
|
|
|
+ .range-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ padding-left: 40px;
|
|
|
+ }
|
|
|
|
|
|
-.legend-item,
|
|
|
-.range-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
+ .legend-item,
|
|
|
+ .range-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
-.color-indicator {
|
|
|
- display: inline-block;
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- border-radius: 4px;
|
|
|
- margin-right: 8px;
|
|
|
-}
|
|
|
+ .color-indicator {
|
|
|
+ display: inline-block;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
|
|
|
-.legend-text,
|
|
|
-.range-text {
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
+ .legend-text,
|
|
|
+ .range-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
-.range-text {
|
|
|
- font-family: monospace;
|
|
|
-}
|
|
|
+ .range-text {
|
|
|
+ font-family: monospace;
|
|
|
+ }
|
|
|
</style>
|
hongrunxia