在线预览调整

zss

2025-02-18 4b1898aa7f82e400b5958293c6c0a5dce5da6d6c

 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，存在value代表为三级
      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>