screenFront/src/views/Temp/Large_Format/component/axle.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Temp\Large_Format\component\axle.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:51:32
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div :style="{width:itemSize.width,height:itemSize.height}">
  <border1 ref="refborder1" :title="t('messages.DevMotor')">
      <template v-slot>
        <div class="box" :key="keynum" :style="{width:boxSize.width,height:boxSize.height,position:'relative' }">
                    <div class="type">
                        <ul>
                            <li class="on">已安装</li>
                            <li class="off">未安装</li>
                        </ul>
                    </div>
            <div v-for="(res,index) in data" :style="{width:'150px',height:'150px'}" >
            <span>
                <i :class="res.value=='1'?'iconfont icon-dianji green':'iconfont icon-dianji red'"></i>
            </span>
            <p>{{res.name}}</p>
            </div> 
            
        </div>
        
      </template>
  </border1>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
import border1 from "@/components/borderBox/border1.vue"
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
    let refborder1=ref()
    let data=reactive([])
    let keynum=ref(0)
    const itemSize=reactive({
    height:'0px',
    width:'0px'
    })
    const boxSize=reactive({
    height:'0px',
    width:'0px'
    })
    onMounted(() => {
        // setData()
    })

    function setchartWH(width:any,height:any){
        itemSize.height=height-20+'px'
        itemSize.width=width-80+'px'
        boxSize.height=height-80+'px'
        boxSize.width=width-30+'px'
    refborder1.value.resetWH()
    }

    
    const setData=(value:any)=>{
        data=value
        //更新key用来更新组件数据
        keynum.value++
        refborder1.value.resetWH()
    }

    defineExpose({
    setchartWH,
    setData
})
</script>

<style scoped>
@import '@/assets/css/iconfont.css';
p{
    margin: 0 5px 0 5px;
    color: #fff;
    font-size: 20px;
}
.box{
    width:100%;
    height:80%;
    display: flex;
    align-items: center;
    justify-content:center;
    flex-wrap: wrap;
    overflow: auto;
}
.green{
    color: green;
    font-size: 30px;
}
.red{
    color:#aaa;
    font-size:30px;
}

.type {
    position: absolute;
    top: 10px;
    width: 100%;
    left: 0;
    font-size: 20px;
    color: #fff;
}
.type ul {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.type ul li {
    position: relative;
    margin: 0 20px;
}
.type ul .on::before {
    content: '';
    position: absolute;
    background-color: green;
    top: 05px;
    left: -30px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
}
.type ul .off::before {
    content: '';
    position: absolute;
    background-color: #aaa;
    top: 05px;
    left: -30px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
}
</style>