From 4b1898aa7f82e400b5958293c6c0a5dce5da6d6c Mon Sep 17 00:00:00 2001
From: zss <zss@example.com>
Date: 星期二, 18 二月 2025 14:44:26 +0800
Subject: [PATCH] 在线预览调整
---
src/components/do/a6-device/operation-overview.vue | 259 ++++++++++++++++++++++++++++++---------------------
1 files changed, 154 insertions(+), 105 deletions(-)
diff --git a/src/components/do/a6-device/operation-overview.vue b/src/components/do/a6-device/operation-overview.vue
index a1084da..c0c809d 100644
--- a/src/components/do/a6-device/operation-overview.vue
+++ b/src/components/do/a6-device/operation-overview.vue
@@ -1,100 +1,65 @@
+<!-- 璁惧杩愯鎬昏 -->
<template>
- <div class="page">
- <echart-module :id="'page-left'" :config="chartConfig" :datas="chartData" class="page-left"></echart-module>
- <div class="page-right">
- <div class="form-item">
- <label>鏁呴殰娆℃暟</label>
- <span>0</span>
- </div>
- <div class="form-item">
- <label>鏈�杩戞晠闅滄棩鏈�</label>
- <el-date-picker
- v-model="form.value1"
- type="date"
- size="small"
- placeholder="閫夋嫨鏃ユ湡" style="width: calc(100% - 200px);" readonly>
- </el-date-picker>
- </div>
- <div class="form-item">
- <label>鏈�杩戞牎鍑嗘棩鏈�</label>
- <el-date-picker
- v-model="form.value1"
- type="date"
- size="small"
- placeholder="閫夋嫨鏃ユ湡" style="width: calc(100% - 200px);" readonly>
- </el-date-picker>
- </div>
- <div class="form-item">
- <label>涓嬫鏍″噯鏃ユ湡</label>
- <el-date-picker
- v-model="form.value1"
- type="date"
- size="small"
- placeholder="閫夋嫨鏃ユ湡" style="width: calc(100% - 200px);" readonly>
- </el-date-picker>
- </div>
- <div class="form-item">
- <label>鏍″噯鎬荤粨璁�</label>
- <el-radio-group v-model="form.value1" disabled>
- <el-radio :label="0">鍚堟牸</el-radio>
- <el-radio :label="1">涓嶅悎鏍�</el-radio>
- <el-radio :label="2">鍏朵粬</el-radio>
- </el-radio-group>
- </div>
- <div class="form-item">
- <label>鏈�杩戞牳鏌ユ棩鏈�</label>
- <el-date-picker
- v-model="form.value1"
- type="date"
- size="small"
- placeholder="閫夋嫨鏃ユ湡" style="width: calc(100% - 200px);" readonly>
- </el-date-picker>
- </div>
- <div class="form-item">
- <label>涓嬫鏍告煡鏃ユ湡</label>
- <el-date-picker
- v-model="form.value1"
- type="date"
- size="small"
- placeholder="閫夋嫨鏃ユ湡" style="width: calc(100% - 200px);" readonly>
- </el-date-picker>
- </div>
- <div class="form-item">
- <label>鏍告煡鎬荤粨璁�</label>
- <el-radio-group v-model="form.value1" disabled>
- <el-radio :label="0">鍚堟牸</el-radio>
- <el-radio :label="1">涓嶅悎鏍�</el-radio>
- <el-radio :label="2">鍏朵粬</el-radio>
- </el-radio-group>
- </div>
- <div class="form-item">
- <label>鏈�杩戠淮鎶ゆ棩鏈�</label>
- <el-date-picker
- v-model="form.value1"
- type="date"
- size="small"
- placeholder="閫夋嫨鏃ユ湡" style="width: calc(100% - 200px);" readonly>
- </el-date-picker>
- </div>
- <div class="form-item">
- <label>涓嬫缁存姢鏃ユ湡</label>
- <el-date-picker
- v-model="form.value1"
- type="date"
- size="small"
- placeholder="閫夋嫨鏃ユ湡" style="width: calc(100% - 200px);" readonly>
- </el-date-picker>
- </div>
- <div class="form-item">
- <label>缁存姢绫诲瀷</label>
- <el-radio-group v-model="form.value1" disabled>
- <el-radio :label="0">浣跨敤鍓嶅悗缁存姢</el-radio>
- <el-radio :label="1">璁″垝涓淮鎶�</el-radio>
- </el-radio-group>
- </div>
- <div class="form-item">
- <label>娴嬮噺椤圭洰</label>
- <span>1111111</span>
+ <div>
+ <div class="page">
+ <echart-module id="'page-left'" :config="chartConfig" :datas="chartData" class="page-left"></echart-module>
+ <div class="page-right">
+ <div class="form-item">
+ <label>鍚敤鏃堕暱(骞�)</label>
+ <span>{{deviceData.usedYears}}</span>
+ </div>
+ <div class="form-item">
+ <label>鏁呴殰娆℃暟</label>
+ <span>{{deviceData.faultCount}}</span>
+ </div>
+ <div class="form-item">
+ <label>鏈�杩戞晠闅滄棩鏈�</label>
+ <span>{{ deviceData.faultDate }}</span>
+ </div>
+ <div class="form-item">
+ <label>鏈�杩戞牎鍑嗘棩鏈�</label>
+ <span>{{deviceData.lastCalibrationDate }}</span>
+ </div>
+ <div class="form-item">
+ <label>涓嬫鏍″噯鏃ユ湡</label>
+ <span>{{deviceData.nextCalibrationDate}}</span>
+ </div>
+ <div class="form-item">
+ <label>鏍″噯鎬荤粨璁�</label>
+ <span :class="formatColorStyle(deviceData.calibrateStatus)">{{ deviceData.calibrateStatus }}</span>
+ </div>
+ <div class="form-item">
+ <label>鏈�杩戞牳鏌ユ棩鏈�</label>
+ <span>{{deviceData.lastExamineDate}}</span>
+ </div>
+ <div class="form-item">
+ <label>涓嬫鏍告煡鏃ユ湡</label>
+ <span>{{deviceData.nextExamineDate}}</span>
+ </div>
+ <div class="form-item">
+ <label>鏍告煡鎬荤粨璁�</label>
+ <span :class="formatColorStyle(deviceData.examineStatus)">{{deviceData.examineStatus}}</span>
+ </div>
+ <div class="form-item">
+ <label>璁惧杩愯鐘舵��</label>
+ <span :class="formatColorStyle(deviceData.deviceStatus)">{{deviceData.deviceStatus}}</span>
+ </div>
+ <div class="form-item">
+ <label>鏈�杩戠淮鎶ゆ棩鏈�</label>
+ <span>{{ deviceData.maintenanceDate }}</span>
+ </div>
+ <div class="form-item">
+ <label>涓嬫缁存姢鏃ユ湡</label>
+ <span>{{ deviceData.nextMaintenanceDate }}</span>
+ </div>
+ <div class="form-item">
+ <label>缁存姢绫诲瀷</label>
+ <span>{{ deviceData.maintenanceType }}</span>
+ </div>
+ <div class="form-item">
+ <label>娴嬮噺椤圭洰</label>
+ <span>{{ deviceData.insProduct }}</span>
+ </div>
</div>
</div>
</div>
@@ -102,8 +67,17 @@
<script>
import EchartModule from '../../tool/echart.vue'
+
export default {
components: {EchartModule},
+ props: {
+ clickNodeVal: {
+ type: Object,
+ default: () => {
+ return {};
+ }
+ }
+ },
data(){
return {
chartConfig:{
@@ -112,16 +86,77 @@
type:'gauge'
},
chartData:{
- xData:[],
- yData:[
- {
- title:'浠诲姟鎺ユ敹閲�',
- data:[]
- }
- ]
+ formatter: "宸茶繃鏍″噯鏃ユ湡鐧惧垎姣�: {c}%",
+ color:[
+ [0.3, '#21a700'],
+ [0.7, '#0066ff'],
+ [1, '#d80000']
+ ],
+ value: 0,
},
form:{
value1:''
+ },
+ formData:{
+ usedAge:12
+ },
+ //璁惧鏁版嵁鏀堕泦
+ deviceData:{
+
+ }
+ }
+ },
+ mounted(){
+ //鑾峰彇璁惧鏁呴殰鐨勪俊鎭�
+ this.getDeviceInfo(this.clickNodeVal.value);
+ },
+ methods:{
+ formatColorStyle(status){
+ if(status==null || status=="" || status==undefined){
+ return ""
+ }
+ let styleStr = ''
+ switch(status){
+ case"鍚堟牸":
+ styleStr = 'success'
+ break;
+ case"涓嶅悎鏍�":
+ styleStr = 'failed'
+ break;
+ case"鍏朵粬":
+ styleStr = 'other'
+ break;
+ case"姝ｅ父":
+ styleStr = 'success'
+ break;
+ case"缁翠慨":
+ styleStr = 'other'
+ break;
+ case"鍋滅敤":
+ styleStr = 'stop'
+ break;
+ case"鎶ュ簾":
+ styleStr = 'failed'
+ break;
+ }
+ return styleStr;
+ },
+ //鑾峰彇璁惧杩愯鎬昏淇℃伅
+ getDeviceInfo(deviceId){
+ this.$axios.get(this.$api.deviceFault.getDevice+"/"+deviceId).then(res=>{
+ if(res.code==200){
+ this.deviceData=res.data
+ this.chartData.value = res.data.progress
+ }
+ })
+ },
+ },
+ watch: {
+ // 鐩戝惉鐐瑰嚮el-tree鐨勬暟鎹紝杩涜鏁版嵁鍒锋柊
+ clickNodeVal(newVal) {
+ // 鏄惁瀛樺湪value锛屽瓨鍦╲alue浠ｈ〃涓轰笁绾�
+ if (this.clickNodeVal.value) {
+ this.getDeviceInfo(newVal.value)
}
}
}
@@ -131,7 +166,7 @@
<style scoped>
.page{
width: 100%;
- height: 100%;
+ height: 100vh;
display: flex;
}
.page-left{
@@ -142,6 +177,8 @@
}
.page-right{
flex: 1;
+ height:calc(100% - 200px);
+ overflow: scroll;
/* background: red; */
}
.form-item{
@@ -155,7 +192,19 @@
text-align: right;
margin-right: 20px;
}
->>>.el-radio__input.is-disabled+span.el-radio__label{
+.el-radio__input.is-disabled+span.el-radio__label{
color: #606266 !important;
}
+.success{
+ color:#21a700
+}
+.failed{
+ color:#d80000
+}
+.other{
+ color: #e8a849;
+}
+.stop{
+ color: #909399;
+}
</style>
--
Gitblit v1.9.3