1、终端程序呼叫页面呼叫原因组件由输入框改为多行文本域 2、设备管理页面新增设备图片字段同时在新增和编辑设备时添加设备图片 3、设备监控以及设备看板页...

zhaowei

2025-06-18 3432c3100ccb4c3b78dc0a5f7f242bdcda503a63

 src/views/mdc/base/modules/DeviceBaseInfo/EquipmentLayout.vue

@@ -2,13 +2,14 @@
  <a-card :bordered="false">
    <div class="containerequip">
      <div class="container_content">
        <div class="contnet" v-for="(item,index) in dataList" :key="index" :class="node == item.equipmentId ? 'addclass' : '' ">
        <div class="contnet" v-for="(item,index) in dataList" :key="index"
             :class="node == item.equipmentId ? 'addClass' : '' ">

          <div class="content_equipment" @click="openDetail(item)">
          <div style="cursor: pointer" @click="openDetail(item)">
            <div class="equipment_box">
              <div>
                <img style="width: 11%;" :src="getStatusImgUrl(item.oporation)" alt="">
                <img  class="orange" :src="getImgUrl(item.equipmentTypePictures)">
                <img class="deviceImage" :src="getImgUrl(item.equipmentTypePictures)">
              </div>
            </div>
          </div>
@@ -24,7 +25,7 @@

<script>
  import EquipmentDetailModal from './EquipmentDetailModal'
  import {getFileAccessHttpUrl} from '@/api/manage';
  import { getFileAccessHttpUrl } from '@/api/manage'
  import {
    getAction
  } from '@/api/manage'
@@ -32,128 +33,95 @@
  export default {
    name: 'EquipmentLayout',
    components: { EquipmentDetailModal },
    props: { dataList: {
    props: {
      dataList: {
        type: Array,
        required: true,
        default: []
      }, equipmentId: '' ,
    node:''},
    data() {
      return {
        equipMessageTimer:''
      }
    },
    created() {
    },
    mounted() {

      },
      node: ''
    },
    methods: {
      getImgUrl(img){
        if(img == null || img ==''){
          return require("../../../../../assets/default.png");
      getImgUrl(img) {
        if (img == null || img == '') {
          return require('../../../../../assets/default.png')
        }
        return getFileAccessHttpUrl(img)
      },
      getStatusImgUrl(imgStaus){
        if(imgStaus == 1){
          return require("../../../../../assets/yellow.png");
        }else if(imgStaus == 2){
          return require("../../../../../assets/yellow.png");
        }else if(imgStaus == 3){
          return require("../../../../../assets/green.png");
        }else if(imgStaus ==22){
          return require("../../../../../assets/red.png");
        }else if(imgStaus ==0){
          return require("../../../../../assets/gray.png");
        }else{
          return require("../../../../../assets/gray.png");
      getStatusImgUrl(imgStatus) {
        switch (imgStatus) {
          case 1:
          case 2:
            return require('@/assets/yellow.png')
          case 3:
            return require('@/assets/green.png')
          case 22:
            return require('@/assets/red.png')
          case 5:
            return require('@/assets/orange.png')
          default:
            return require('@/assets/gray.png')
        }
      },
      getBackgroundUrl(imgurl){
        return require("../../../../../assets/"+imgurl+".gif");
      },
      openDetail(item) {
        if(item.oporation == 0){
          // this.$message.warn("设备处于关机状态！");
        if (item.oporation == 0) {
          this.$notification.warning({
            message:'消息',
            description:"设备处于关机状态！"
          });
          return false;
            message: '消息',
            description: '设备处于关机状态！'
          })
          return false
        }
        console.log(item);
        this.$refs.equipmentDetailModal.initData(item.id);
        this.$refs.equipmentDetailModal.timerModel(item.id);
        // this.equipMessageTimer = setInterval(() => {
        //   setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
        // },1000*10)
        this.$refs.equipmentDetailModal.initData(item.id)
        this.$refs.equipmentDetailModal.timerModel(item.id)
      }
    },
    beforeDestroy(){
      // clearInterval(this.equipMessageTimer);
      // this.equipMessageTimer = null
    }
  }
</script>
<style scoped>
  .gray{
    background-image: url("../../../../../assets/gray.gif");
  .deviceImage {
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .green{
    background-image: url("../../../../../assets/green.gif");
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .red{
    background-image: url("../../../../../assets/red.gif");
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .orange{
    /*background-image: url("../../../../../assets/orange.gif");*/
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .equipment_box img{

  .equipment_box img {
    width: 45%;
  }

  .containerequip{
  .containerequip {
    overflow: auto;
  }

  @media screen and (min-width: 1920px){
    .containerequip{
      height: 640px!important;
  @media screen and (min-width: 1920px) {
    .containerequip {
      height: 640px !important;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .containerequip{
      height: 640px!important;

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .containerequip {
      height: 640px !important;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .containerequip{
      height: 493px!important;

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .containerequip {
      height: 493px !important;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .containerequip{
      height: 493px!important;

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .containerequip {
      height: 493px !important;
    }
  }
  @media screen and (max-width: 1280px){
    .containerequip{
      height: 394px!important;

  @media screen and (max-width: 1280px) {
    .containerequip {
      height: 394px !important;
    }
  }

  .container_content {
    width: 100%;
    position: relative;
@@ -170,7 +138,7 @@
    padding-top: 5%;
  }

  .addclass p {
  .addClass p {
    border-bottom: 2px solid #e957ff;
  }
</style>