858 lines
23 KiB
Vue
858 lines
23 KiB
Vue
|
<template>
|
|||
|
|
<div class="equipment-container">
|
|||
|
|
<div class="data-overview">
|
|||
|
|
<div class="data-left">
|
|||
|
|
<div class="equipment-name">设备名称（设备编码）</div>
|
|||
|
|
<el-button type="info" size="small">离线</el-button>
|
|||
|
|
<div style="margin-left:16px;color:#606266">时间显示</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="action-buttons">
|
|||
|
|
<div class="button-group">
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
link
|
|||
|
|
@click="handleShowImage()"
|
|||
|
|
>
|
|||
|
|
{{proxy.$t('equipment.imagePage')}}
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
:type="mode === 'fast' ? 'primary' : ''"
|
|||
|
|
@click="handleModeChange('fast')"
|
|||
|
|
>
|
|||
|
|
<el-icon><Timer /></el-icon>
|
|||
|
|
快速模式
|
|||
|
|
</el-button>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
:type="xRayStatus ? 'danger' : 'success'"
|
|||
|
|
@click="handleXRayToggle"
|
|||
|
|
>
|
|||
|
|
X{{proxy.$t('equipment.Ray')}}：{{ xRayStatus ? proxy.$t('common.open') : proxy.$t('common.close') }}
|
|||
|
|
</el-button>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
plain
|
|||
|
|
@click="handleGenerateReport"
|
|||
|
|
>
|
|||
|
|
{{proxy.$t('equipment.reporting')}}
|
|||
|
|
</el-button>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
type="success"
|
|||
|
|
plain
|
|||
|
|
@click="handleDeviceShare"
|
|||
|
|
>
|
|||
|
|
{{proxy.$t('equipment.deviceShare')}}
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-container">
|
|||
|
|
<div class="chart-box chart-box-left">
|
|||
|
|
<el-tabs
|
|||
|
|
v-model="activeName"
|
|||
|
|
type="card"
|
|||
|
|
class="demo-tabs"
|
|||
|
|
@tab-click="handleClick"
|
|||
|
|
>
|
|||
|
|
<el-tab-pane label="数据组1" name="first">
|
|||
|
|
<div class="card-container">
|
|||
|
|
<div class="card-list">
|
|||
|
|
<div class="eccentricity-card" v-for="(item, index) in cardList" :key="index">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span class="title">{{item.title}}</span>
|
|||
|
|
<el-icon class="close-icon"><Close /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-content">
|
|||
|
|
<div class="card-text">
|
|||
|
|
<div>
|
|||
|
|
<div class="difference">
|
|||
|
|
<span class="plus">收缩率</span>
|
|||
|
|
<span class="label">9%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="difference">
|
|||
|
|
<span class="plus">+</span>
|
|||
|
|
<span class="label">公差</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="value">
|
|||
|
|
21.15<span class="unit">%</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="tolerance-section">
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
plain
|
|||
|
|
class="switch-btn left"
|
|||
|
|
@click="handlePrevious"
|
|||
|
|
>
|
|||
|
|
<el-icon><ArrowLeft /></el-icon>
|
|||
|
|
</el-button>
|
|||
|
|
|
|||
|
|
<div class="tolerance-text">
|
|||
|
|
偏心度公差 {{ toleranceList[currentIndex] }}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
plain
|
|||
|
|
class="switch-btn right"
|
|||
|
|
@click="handleNext"
|
|||
|
|
>
|
|||
|
|
<el-icon><ArrowRight /></el-icon>
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="数据组2" name="second">数据组2</el-tab-pane>
|
|||
|
|
<el-tab-pane label="数据组3" name="third">数据组3</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
<div class="btn">
|
|||
|
|
<el-button type="primary">{{proxy.$t('button.add')}}</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-box chart-box-right">
|
|||
|
|
<el-tabs
|
|||
|
|
v-model="activeTwoName"
|
|||
|
|
type="card"
|
|||
|
|
class="demo-tabs"
|
|||
|
|
@tab-click="handleClick"
|
|||
|
|
>
|
|||
|
|
<el-tab-pane :label="proxy.$t('equipment.sketch')" name="first">
|
|||
|
|
<div class="detection-section">
|
|||
|
|
<CircleDetectionChart
|
|||
|
|
:inner-data="innerLayerData"
|
|||
|
|
:middle-data="middleLayerData"
|
|||
|
|
:outer-data="outerLayerData"
|
|||
|
|
/>
|
|||
|
|
<div class="history-content">
|
|||
|
|
<div>左边指南针</div>
|
|||
|
|
<div class="history-right">
|
|||
|
|
<div>
|
|||
|
|
<el-button v-if="showHistory" type="primary" @click="showHistoryDialog">选择历史数据</el-button>
|
|||
|
|
<el-switch
|
|||
|
|
v-model="showHistory"
|
|||
|
|
size="large"
|
|||
|
|
style="margin-left: 6px"
|
|||
|
|
:inactive-text="proxy.$t('equipment.historyData')"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="scanItem">扫描时间：2025/01/07 04:34:8</div>
|
|||
|
|
<div class="scanItem">2025-01-07_04_30_34_866_direction_1_device2.json</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane :label="proxy.$t('equipment.deviceInfo')" name="second">
|
|||
|
|
<div class="device-status">
|
|||
|
|
<DeviceStatus v-if="!showBtn" :status-data="deviceStatus" />
|
|||
|
|
<DeviceSetting v-if="showBtn" @update="handleSettingUpdate" />
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
<div class="btn" v-if="activeTwoName === 'second'">
|
|||
|
|
<el-button v-if="!showBtn" type="primary" @click="paramsHandle">{{proxy.$t('equipment.paramsSetting')}}</el-button>
|
|||
|
|
<el-button v-if="showBtn" type="primary" @click="paramsHandle">{{proxy.$t('button.return')}}</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-container" style="margin-top: 14px">
|
|||
|
|
<div class="chart-box chart-bottom-left">
|
|||
|
|
<el-tabs
|
|||
|
|
v-model="activeThreeName"
|
|||
|
|
type="card"
|
|||
|
|
class="demo-tabs"
|
|||
|
|
@tab-click="handleClick"
|
|||
|
|
>
|
|||
|
|
<el-tab-pane :label="proxy.$t('equipment.deviceTemperature')" name="first">
|
|||
|
|
<TemperatureChart :chart-data="temperatureData"></TemperatureChart>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane :label="proxy.$t('equipment.warningInfo')" name="second">
|
|||
|
|
<div class="warning-container">
|
|||
|
|
<div class="warning-item" v-for="(item, index) in warningList" :key="index">
|
|||
|
|
{{item.title}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane :label="proxy.$t('equipment.imageView')" name="third">
|
|||
|
|
<div class="controls">
|
|||
|
|
<el-button-group>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
plain
|
|||
|
|
class="switch-btn right"
|
|||
|
|
@click="handleImagePrev"
|
|||
|
|
>
|
|||
|
|
<el-icon><ArrowLeft /></el-icon>
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
plain
|
|||
|
|
class="switch-btn right switch"
|
|||
|
|
@click="handleImageNext"
|
|||
|
|
>
|
|||
|
|
<el-icon><ArrowRight /></el-icon>
|
|||
|
|
</el-button>
|
|||
|
|
</el-button-group>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex">
|
|||
|
|
<div v-if="showRed">
|
|||
|
|
<CurveChart ref="bowlCurveRef" :title="chartTitle.left" :color="colorRed"/>
|
|||
|
|
<CurveChart ref="bowlCurveRef" :title="chartTitle.right" :color="colorRed"/>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="showGreen">
|
|||
|
|
<CurveChart ref="bowlCurveRef" :title="chartTitle.left" :color="colorGreen"/>
|
|||
|
|
<CurveChart ref="bowlCurveRef" :title="chartTitle.right" :color="colorGreen"/>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="showRedGreen">
|
|||
|
|
<DualChannelChart
|
|||
|
|
title="扫描臂1"
|
|||
|
|
ref="dualChart1Ref"
|
|||
|
|
:chart-data="arm1ChartData"
|
|||
|
|
/>
|
|||
|
|
<DualChannelChart
|
|||
|
|
title="扫描臂2"
|
|||
|
|
ref="dualChart2Ref"
|
|||
|
|
:chart-data="arm2ChartData"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane :label="proxy.$t('equipment.trendChart')" name="four">
|
|||
|
|
<RealtimeChart ref="realtimeChartRef" />
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-box chart-bottom-right">
|
|||
|
|
<div class="header">
|
|||
|
|
<div>
|
|||
|
|
<span>{{proxy.$t('equipment.imagePage')}}</span>
|
|||
|
|
<span class="time">{{ currentTime }}</span>
|
|||
|
|
</div>
|
|||
|
|
<el-divider/>
|
|||
|
|
</div>
|
|||
|
|
<div class="imagePage-container">
|
|||
|
|
<div class="imagePage-left">
|
|||
|
|
<DataTable :table-data="tableData" />
|
|||
|
|
</div>
|
|||
|
|
<div class="charts">
|
|||
|
|
<div class="controls">
|
|||
|
|
<el-button-group>
|
|||
|
|
<el-button type="primary" plain class="switch-btn" @click="handleImagePagePrev"><el-icon><ArrowLeft /></el-icon></el-button>
|
|||
|
|
<el-button type="primary" plain class="switch-btn switch" @click="handleImagePageNext"><el-icon><ArrowRight /></el-icon></el-button>
|
|||
|
|
<el-button type="primary" plain class="switch-btn switch" @click="handleRefresh"><el-icon><Refresh /></el-icon></el-button>
|
|||
|
|
</el-button-group>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="showImagePageRed">
|
|||
|
|
<CurveChart ref="bowlCurvePageRef" :title="chartTitle.left" :color="colorRed"/>
|
|||
|
|
<CurveChart ref="bowlCurvePageRef" :title="chartTitle.right" :color="colorRed"/>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="showImagePageGreen">
|
|||
|
|
<CurveChart ref="bowlCurvePageRef" :title="chartTitle.left" :color="colorGreen"/>
|
|||
|
|
<CurveChart ref="bowlCurvePageRef" :title="chartTitle.right" :color="colorGreen"/>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="showImagePageRedGreen">
|
|||
|
|
<DualChannelChart
|
|||
|
|
title="扫描臂1"
|
|||
|
|
ref="dualChart1PageRef"
|
|||
|
|
:chart-data="arm1ChartData"
|
|||
|
|
/>
|
|||
|
|
<DualChannelChart
|
|||
|
|
title="扫描臂2"
|
|||
|
|
ref="dualChart2PageRef"
|
|||
|
|
:chart-data="arm2ChartData"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 历史数据弹框-->
|
|||
|
|
<HistoryDataDialog
|
|||
|
|
ref="historyDialogRef"
|
|||
|
|
@confirm="handleHistoryConfirm"
|
|||
|
|
@cancel="handleHistoryCancel"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted } from 'vue'
|
|||
|
|
import { Close, ArrowLeft, ArrowRight, Timer, Refresh } from '@element-plus/icons-vue'
|
|||
|
|
import TemperatureChart from './common/TemperatureChart.vue'
|
|||
|
|
import RealtimeChart from './common/RealtimeChart.vue';
|
|||
|
|
import DeviceStatus from './common/DeviceStatus.vue';
|
|||
|
|
import DeviceSetting from './common/DeviceSetting.vue';
|
|||
|
|
import DataTable from './common/DataTable.vue';
|
|||
|
|
import DualChannelChart from './common/DualChannelChart.vue';
|
|||
|
|
import CurveChart from './common/CurveChart.vue';
|
|||
|
|
import CircleDetectionChart from "./common/CircleDetectionChart.vue";
|
|||
|
|
import HistoryDataDialog from './common/HistoryDataDialog.vue';
|
|||
|
|
import {ElMessageBox} from "element-plus";
|
|||
|
|
const { proxy } = getCurrentInstance();
|
|||
|
|
const toleranceList = ['15%', '20%', '25%']
|
|||
|
|
const showRed = ref(true)
|
|||
|
|
const showGreen = ref(false)
|
|||
|
|
const showRedGreen = ref(false)
|
|||
|
|
const showImagePageRed = ref(true)
|
|||
|
|
const showImagePageGreen = ref(false)
|
|||
|
|
const showImagePageRedGreen = ref(false)
|
|||
|
|
const colorRed = ref('#ff4444')
|
|||
|
|
const colorGreen = ref('#67c23a')
|
|||
|
|
const currentIndex = ref(0)
|
|||
|
|
const showHistory = ref(false)
|
|||
|
|
const mode = ref('normal')
|
|||
|
|
const realtimeChartRef = ref(null)
|
|||
|
|
const dualChart1Ref = ref(null)
|
|||
|
|
const dualChart2Ref = ref(null)
|
|||
|
|
const dualChart1PageRef = ref(null)
|
|||
|
|
const dualChart2PageRef = ref(null)
|
|||
|
|
const bowlCurvePageRef = ref(null)
|
|||
|
|
const xRayStatus = ref(false)
|
|||
|
|
const activeName = ref('first')
|
|||
|
|
const activeTwoName = ref('first')
|
|||
|
|
const activeThreeName = ref('first')
|
|||
|
|
const bowlCurveRef = ref(null)
|
|||
|
|
const showBtn = ref(false)
|
|||
|
|
const historyDialogRef = ref(null)
|
|||
|
|
const currentTime = ref('2021-02-11 13:23:39')
|
|||
|
|
const chartTitle = ref({
|
|||
|
|
left: '扫描臂1 曲线',
|
|||
|
|
right: '扫描臂2 曲线'
|
|||
|
|
})
|
|||
|
|
const cardList = [
|
|||
|
|
{ title: '外屏层偏心度' },
|
|||
|
|
{ title: '内屏层偏心度' },
|
|||
|
|
{ title: '绝缘层偏心度' },
|
|||
|
|
{ title: '外屏层厚度' },
|
|||
|
|
{ title: '内屏层厚度' },
|
|||
|
|
{ title: '绝缘层厚度' }
|
|||
|
|
]
|
|||
|
|
const warningList = ref([
|
|||
|
|
{ title: '设备1离线', status: 'offline' },
|
|||
|
|
{ title: '设备2离线', status: 'offline' },
|
|||
|
|
{ title: '设备3离线', status: 'offline' }
|
|||
|
|
])
|
|||
|
|
// 示意图数据
|
|||
|
|
const innerLayerData = ref([0.68, 0.85, 1.07, 1.18, 1.13, 0.97, 0.67, 0.98])
|
|||
|
|
const middleLayerData = ref([9.52, 9.95, 10.53, 11.04, 11.34, 11.15, 9.66, 10.40])
|
|||
|
|
const outerLayerData = ref([1.15, 1.19, 1.21, 1.17, 1.05, 0.96, 1.06, 0.79])
|
|||
|
|
// 温度数据
|
|||
|
|
const temperatureData = ref({
|
|||
|
|
arm1: [33, 46, 57, 24, 48, 51, 33],
|
|||
|
|
arm2: [11, 24, 39, 13, 48, 41, 33],
|
|||
|
|
times: [
|
|||
|
|
'2023-01-01 09:00:00',
|
|||
|
|
'2023-01-01 10:00:00',
|
|||
|
|
'2023-01-01 11:00:00',
|
|||
|
|
'2023-01-01 12:00:00',
|
|||
|
|
'2023-01-01 13:00:00',
|
|||
|
|
'2023-01-01 14:00:00'
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
const deviceStatus = ref({
|
|||
|
|
arm1: {
|
|||
|
|
communication: '正常',
|
|||
|
|
fault: '正常',
|
|||
|
|
enable: '未使用',
|
|||
|
|
position: '下过渡段',
|
|||
|
|
speed: '0',
|
|||
|
|
powerSwitch: { value: '关闭', type: 'danger' },
|
|||
|
|
safetyLock: '打开',
|
|||
|
|
voltageSet: '55000',
|
|||
|
|
voltageFeedback: '15',
|
|||
|
|
currentFeedback: '2',
|
|||
|
|
currentSet: '1800'
|
|||
|
|
},
|
|||
|
|
arm2: {
|
|||
|
|
communication: '正常',
|
|||
|
|
fault: '正常',
|
|||
|
|
enable: '未使用',
|
|||
|
|
position: '下过渡段',
|
|||
|
|
speed: '0',
|
|||
|
|
powerSwitch: { value: '关闭', type: 'danger' },
|
|||
|
|
safetyLock: '打开',
|
|||
|
|
voltageSet: '55000',
|
|||
|
|
voltageFeedback: '0',
|
|||
|
|
currentFeedback: '2',
|
|||
|
|
currentSet: '1800'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 表格数据
|
|||
|
|
const tableData = ref([
|
|||
|
|
{ name: '射线电源反馈电压[V]', arm1: '15', arm2: '0' },
|
|||
|
|
{ name: '射线电源设定电压[V]', arm1: '55000', arm2: '55000' },
|
|||
|
|
// ... 其他数据
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 图表数据
|
|||
|
|
const arm1ChartData = ref({
|
|||
|
|
a: Array.from({ length: 100 }, () => Math.random() * 9000),
|
|||
|
|
b: Array.from({ length: 100 }, () => Math.random() * 9000)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const arm2ChartData = ref({
|
|||
|
|
a: Array.from({ length: 100 }, () => Math.random() * 9000),
|
|||
|
|
b: Array.from({ length: 100 }, () => Math.random() * 9000)
|
|||
|
|
})
|
|||
|
|
// 图像页展示
|
|||
|
|
const handleImagePageNext = () => {
|
|||
|
|
if (showImagePageRedGreen.value) {
|
|||
|
|
showImagePageRedGreen.value = false
|
|||
|
|
showImagePageRed.value = true
|
|||
|
|
showImagePageGreen.value = false
|
|||
|
|
} else if (showImagePageRed.value) {
|
|||
|
|
showImagePageRedGreen.value = false
|
|||
|
|
showImagePageRed.value = false
|
|||
|
|
showImagePageGreen.value = true
|
|||
|
|
} else if (showImagePageGreen.value) {
|
|||
|
|
showImagePageRedGreen.value = true
|
|||
|
|
showImagePageRed.value = false
|
|||
|
|
showImagePageGreen.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleImagePagePrev = () => {
|
|||
|
|
if (showImagePageRedGreen.value) {
|
|||
|
|
showImagePageRedGreen.value = false
|
|||
|
|
showImagePageRed.value = false
|
|||
|
|
showImagePageGreen.value = true
|
|||
|
|
} else if (showImagePageGreen.value) {
|
|||
|
|
showImagePageRedGreen.value = false
|
|||
|
|
showImagePageRed.value = true
|
|||
|
|
showImagePageGreen.value = false
|
|||
|
|
} else if (showImagePageRed.value) {
|
|||
|
|
showImagePageRedGreen.value = true
|
|||
|
|
showImagePageRed.value = false
|
|||
|
|
showImagePageGreen.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleRefresh = () => {
|
|||
|
|
// 刷新当前显示的图表
|
|||
|
|
if (showImagePageRedGreen.value) {
|
|||
|
|
dualChart1PageRef.value?.refresh()
|
|||
|
|
dualChart2PageRef.value?.refresh()
|
|||
|
|
} else {
|
|||
|
|
bowlCurvePageRef.value?.refresh()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 打开历史数据弹窗
|
|||
|
|
const showHistoryDialog = () => {
|
|||
|
|
historyDialogRef.value.show()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleHistoryConfirm = (data) => {
|
|||
|
|
console.log('选择的历史数据:', data)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleHistoryCancel = () => {
|
|||
|
|
console.log('取消选择')
|
|||
|
|
}
|
|||
|
|
// 图像预览
|
|||
|
|
const handleImageNext = () => {
|
|||
|
|
if (showRedGreen.value) {
|
|||
|
|
showRedGreen.value = false
|
|||
|
|
showRed.value = true
|
|||
|
|
showGreen.value = false
|
|||
|
|
} else if (showRed.value) {
|
|||
|
|
showRedGreen.value = false
|
|||
|
|
showRed.value = false
|
|||
|
|
showGreen.value = true
|
|||
|
|
} else if (showGreen.value) {
|
|||
|
|
showRedGreen.value = true
|
|||
|
|
showRed.value = false
|
|||
|
|
showGreen.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleImagePrev = () => {
|
|||
|
|
if (showRedGreen.value) {
|
|||
|
|
showRedGreen.value = false
|
|||
|
|
showRed.value = false
|
|||
|
|
showGreen.value = true
|
|||
|
|
} else if (showGreen.value) {
|
|||
|
|
showRedGreen.value = false
|
|||
|
|
showRed.value = true
|
|||
|
|
showGreen.value = false
|
|||
|
|
} else if (showRed.value) {
|
|||
|
|
showRedGreen.value = true
|
|||
|
|
showRed.value = false
|
|||
|
|
showGreen.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const generateData = (type) => {
|
|||
|
|
const data = []
|
|||
|
|
for (let i = 0; i <= 90; i++) {
|
|||
|
|
let value
|
|||
|
|
if (i < 45) {
|
|||
|
|
value = type === 'a' ? 8500 : 7500
|
|||
|
|
} else if (i >= 45 && i < 60) {
|
|||
|
|
value = 8500 - ((i - 45) * 500)
|
|||
|
|
} else if (i >= 60 && i < 75) {
|
|||
|
|
value = 1000 + ((i - 60) * 500)
|
|||
|
|
} else {
|
|||
|
|
value = type === 'a' ? 8500 : 7500
|
|||
|
|
}
|
|||
|
|
data.push([i, value])
|
|||
|
|
}
|
|||
|
|
arm1ChartData.value = data
|
|||
|
|
}
|
|||
|
|
// 标签页切换
|
|||
|
|
const handleClick = (tab, event) => {
|
|||
|
|
console.log(tab.props.label,'----')
|
|||
|
|
nextTick(() => {
|
|||
|
|
if(tab.props.label === '趋势图') {
|
|||
|
|
realtimeChartRef.value?.resize()
|
|||
|
|
}
|
|||
|
|
if(tab.props.label === '图像预览') {
|
|||
|
|
bowlCurveRef.value?.resize()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const handlePrevious = () => {
|
|||
|
|
if (currentIndex.value > 0) {
|
|||
|
|
currentIndex.value--
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleNext = () => {
|
|||
|
|
if (currentIndex.value < toleranceList.length - 1) {
|
|||
|
|
currentIndex.value++
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 设备信息
|
|||
|
|
const paramsHandle = () => {
|
|||
|
|
showBtn.value = !showBtn.value
|
|||
|
|
}
|
|||
|
|
// 参数设定按钮
|
|||
|
|
const handleSettingUpdate = ({ key, value }) => {
|
|||
|
|
console.log('更新设置:', key, value)
|
|||
|
|
// 调用接口更新设置
|
|||
|
|
}
|
|||
|
|
// 图像预览
|
|||
|
|
const handleDataUpdate = (data) => {
|
|||
|
|
console.log('数据更新:', data)
|
|||
|
|
}
|
|||
|
|
// 展示图像页
|
|||
|
|
const handleShowImage = () => {
|
|||
|
|
// router.push({ path: '/image-page' })
|
|||
|
|
// ElMessage.success('图像页已打开')
|
|||
|
|
}
|
|||
|
|
// 快速模式
|
|||
|
|
const handleModeChange = (newMode) => {
|
|||
|
|
mode.value = newMode
|
|||
|
|
}
|
|||
|
|
//x射线
|
|||
|
|
const handleXRayToggle = () => {
|
|||
|
|
ElMessageBox.confirm(
|
|||
|
|
'是否确认切换X射线状态？',
|
|||
|
|
'提示',
|
|||
|
|
{
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}
|
|||
|
|
).then(() => {
|
|||
|
|
// 这里可以调用接口来切换X射线状态
|
|||
|
|
xRayStatus.value = !xRayStatus.value
|
|||
|
|
}).catch(() => {
|
|||
|
|
// 用户取消操作
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 生成报告
|
|||
|
|
const handleGenerateReport = () => {
|
|||
|
|
}
|
|||
|
|
// 设备分享
|
|||
|
|
const handleDeviceShare = () => {
|
|||
|
|
}
|
|||
|
|
onMounted(() => {
|
|||
|
|
generateData()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.equipment-container {
|
|||
|
|
padding: 20px;
|
|||
|
|
|
|||
|
|
h3 {
|
|||
|
|
margin: 0 0 20px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data-overview {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
.data-left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.data-card {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
align-items: center;
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|||
|
|
.img-icon {
|
|||
|
|
border:1px dashed #ccc;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
.number {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
color:#333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-container {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
|
|||
|
|
.chart-box {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 14px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|||
|
|
.btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top:14px;
|
|||
|
|
right: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.chart-box-left {
|
|||
|
|
width:60%;
|
|||
|
|
}
|
|||
|
|
.chart-box-right {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.action-buttons {
|
|||
|
|
padding: 10px 0;
|
|||
|
|
|
|||
|
|
.button-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
|
|||
|
|
.el-button {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 5px;
|
|||
|
|
|
|||
|
|
&.el-button--danger {
|
|||
|
|
background-color: #f56c6c;
|
|||
|
|
border-color: #f56c6c;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: #f78989;
|
|||
|
|
border-color: #f78989;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.demo-tabs > .el-tabs__content {
|
|||
|
|
padding: 32px;
|
|||
|
|
color: #6b778c;
|
|||
|
|
font-size: 32px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.eccentricity-card {
|
|||
|
|
background-color: #F5F7FA;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 14px;
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
border-bottom:1px solid #ccc;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-icon {
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-content {
|
|||
|
|
.card-text {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
.difference {
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
|
|||
|
|
.plus {
|
|||
|
|
color: #f56c6c;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
color: #f56c6c;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
font-size: 32px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: red;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
|
|||
|
|
.unit {
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-left: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tolerance-section {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
background: #E5ECF6 ;
|
|||
|
|
padding: 8px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
|
|||
|
|
|
|||
|
|
.tolerance-text {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.card-container {
|
|||
|
|
|
|||
|
|
.card-list {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 15px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.chart-bottom-left {
|
|||
|
|
width:38%;
|
|||
|
|
}
|
|||
|
|
.chart-bottom-right {
|
|||
|
|
flex:1
|
|||
|
|
}
|
|||
|
|
.warning-container {
|
|||
|
|
padding-left:10px;
|
|||
|
|
.warning-item {
|
|||
|
|
color:red;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.device-status {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
height: 346px;
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
:deep(.el-table) {
|
|||
|
|
.el-tag {
|
|||
|
|
width: 100%;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
&.el-tag--danger {
|
|||
|
|
background-color: #fef0f0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cell {
|
|||
|
|
padding: 8px 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.header {
|
|||
|
|
//display: flex;
|
|||
|
|
//justify-content: space-between;
|
|||
|
|
//align-items: center;
|
|||
|
|
//margin-bottom: 14px;
|
|||
|
|
.time {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
margin-left: 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.imagePage-container {
|
|||
|
|
display: flex;
|
|||
|
|
.imagePage-left {
|
|||
|
|
width: 52%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.charts {
|
|||
|
|
//display: flex;
|
|||
|
|
//gap: 20px;
|
|||
|
|
padding: 0 6px;
|
|||
|
|
flex:1;
|
|||
|
|
//
|
|||
|
|
//> div {
|
|||
|
|
// flex: 1;
|
|||
|
|
//}
|
|||
|
|
}
|
|||
|
|
.controls {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
.switch {
|
|||
|
|
margin-left: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.switch-btn {
|
|||
|
|
padding: 5px;
|
|||
|
|
|
|||
|
|
//&:hover {
|
|||
|
|
// background: #f0f9eb;
|
|||
|
|
//}
|
|||
|
|
}
|
|||
|
|
.detection-section {
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.history-content {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
.history-right {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
.scanItem {
|
|||
|
|
color:#666;
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|