admin-fiveFollowing/src/views/electricFire/components/list.vue

<template>
    <div class="listWrap">
      <div class="listItem" v-for="(item, index) in deviceData" :key="index">
        <div class="header">
          <div class="name">
            {{ item.name }}
          </div>
          <div class="data" @click="() => {emit('change', { type:'list',name: item.name, id: item.devicedId } )}">
            <el-icon :size="14"> 
              <Operation />        
            </el-icon>
            <span>历史数据</span>
          </div>
        </div>
        <div class="content">
          <div class="content_wrap">
            <div class="content_top" >
              <p>剩余电流</p>
              <img :src="ok" alt="">
            </div>
            <div class="content_middle">
              <div class="item" v-if="item.temperature" :style="{width:item.electricCurrent ? 'calc(50% - 5px)' : '100%'}">
                <p>线缆温度</p>
                <div class="list">
                  <div class="data" v-for="(item2, index2) in item.temperature" :key="index2">
                    <span class="name">{{ item2.name }}</span>
                    <div>
                      <span class="value">{{ item2.value }}{{ item2.unit }}</span>
                      <img :src="ok" alt="">
                    </div>
                  </div>
                </div>
              </div>
              <div class="item" v-if="item.electricCurrent" :style="{width:item.temperature ? 'calc(50% - 5px)' : '100%'}">
                <p>电流</p>
                <div class="list">
                  <div class="data" v-for="(item2, index2) in item.electricCurrent" :key="index2">
                    <span class="name">{{ item2.name }}</span>
                    <div>
                      <span class="value">{{ item2.value }}{{ item2.unit }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="content_bottom">
              安装位置：{{ item.installPosition }}
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script setup>
/*----------------------------------组件引入-----------------------------------*/
import { Operation } from '@element-plus/icons-vue'
import ok from '@/assets/images/value-normal.png'
/*----------------------------------接口引入-----------------------------------*/
import {  defineComponent, onMounted, ref, watch } from 'vue'
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
const emit = defineEmits(['dialogChange']);
/*----------------------------------常量声明-----------------------------------*/
/*----------------------------------变量声明-----------------------------------*/
const props = defineProps({
  data: {
    type: Object,
    default: null,
  },
});
const deviceData = ref(props.data)
/*----------------------------------方法声明-----------------------------------*/
</script>
<style lang="scss" scoped>
.listWrap{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .listItem{
    border: 1px solid #00a854;
    width: 267px;
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    margin-right: 8px;
    .header{
      height: 32px;
      line-height: 32px;
      color: #fff;
      padding: 0 12px;
      background: linear-gradient(180deg, rgba(0, 168, 84, 0.7) 0, #00a854 100%);
      .name{
        display: inline-block;
      }
      .data{
        float: right;
        font-size: 12px;
        color: #fff;
        margin-top:-2px;
        cursor: pointer;
        i{
          margin-right:6px;
          vertical-align: middle;
        }
        span{
          vertical-align: middle;
          text-decoration: underline;
        }
      }
    }
    .content{
      padding:10px;
      color:#333;
      .content_wrap{
        .content_top{
          padding: 0 6px 0 10px;
          background-color: rgba(245,245,245,0.4);
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 20px;
          font-size: 12px;
          p{
            margin-top:10px;
          }
        }
        .content_middle{
          .item{
            width:calc(50% - 5px);
            display: inline-block;
            color:#333;
            font-size: 12px;
            margin-top:10px;
            .list{
              background: rgba(245,245,245,0.4);
              margin-top:-10px;
              .data{
                vertical-align: middle;
                padding:4px 6px;
                cursor: pointer;
                >span{
                  width:30%;
                  display: inline-block;
                }
                >div{
                  width:70%;
                  text-align: right;
                  display: inline-block;
                  img{
                    margin:-2px 0 0 4px;
                  }
                  
                }
                
              }
            }
          }
          >div:nth-child(2){
            margin-left:10px;
          }
        }
        .content_bottom{
          font-size: 12px;
          margin-top:10px;
        }
      }
      
    }
  }
}
</style>