screenFront/src/views/FactoryView/statusBar.vue

<!--
 * @FilePath: \screenFront\src\views\FactoryView\statusBar.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-04-04 08:11:07
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
   <div ref="statusbarref" :key="numkey">
      <div class="tip-box-border" :class="{show}" @click="rtract" :style="{width: mapSize.width+'px',height:mapSize.height+'px'}" >
        <!-- <div class="DirectionalSign">
          
        </div> -->
        <div class="iconTip">
          <ul>
            <li v-for="item in prop.iconList" :key="item.id" >
              <i :class="'iconfont ' + item.name + ' icon-logo'"></i
              >{{ "&nbsp&nbsp&nbsp" + item.value }}
              <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
            </li>
            <li v-for="item in prop.devList" :key="item.id" >
              <i :class="'iconfont ' + item.name + ' icon-logo SSCBar'"></i
              >{{ "&nbsp&nbsp&nbsp" + item.value }}
              <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
            </li>
            <li>
              <i class="iconfont icon-WIFI icon-logo"></i> &nbsp;&nbsp;&nbsp;
              WIFI
              <div> &nbsp; 16/16</div>
            </li>
            <li>
              <i class="iconfont icon-tuoputu_jiaohuanjizu icon-logo"></i> &nbsp;&nbsp;&nbsp;
              交换机
              <div> &nbsp; 10/10</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { number } from "echarts/core";
import {reactive, ref, watch,defineProps} from "vue"
const prop = defineProps({
  iconList: {
    type: Object,
    default: {},
  },
  devList: {
    type: Object,
    default: {},
  },  
  width: {
    type: Number,
    default: 0,
  },
  height: {
    type: Number,
    default: 0,
  },
});


const afterDisplay = ref("none")
const beforeDisplay = ref("block")
const show = ref(true)
let numkey=ref(0)
let statusbarref=ref()
let mapSize = reactive({
  width: 0,
  height: 0,
});


function rtract() {
  show.value = !show.value;
  if (show.value) {
    afterDisplay.value = "none";
    beforeDisplay.value = "block";
  } else {
    afterDisplay.value = "block";
    beforeDisplay.value = "none";
  }
}
watch(
  () => prop,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
    
  },
  { immediate: true, deep: true, flush: "post" }
);
function reset(val: any) {
  //宽高为0时跳出该方法

  if (!val.width && !val.height) return;
  mapSize.width=val.width
  mapSize.height=val.height
  numkey.value++
//   statusbarref.value.style.width=val.width
//   statusbarref.value.style.height=val.height
  //重置盒子尺寸
}
</script>

<style scoped>
@import url("@/assets/css/iconfont.css");
@import url("@/assets/css/newicon/iconfont.css");
.tip-box-border{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 97%;
  width: 99%;
  padding-top: 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 999;
  background-color:rgba(0,0,0,0.5);
  transition: transform 0.5s;
} 
.show {
  transform: translateX(-90%);
}
.tip-box-border::after{
  content: "\e84f";
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 24px;
  font-family: 'iconfont' !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: v-bind(afterDisplay);
  color: #fff;
  box-sizing: border-box;
}
.tip-box-border::before{
  content: '\e84e';
  /* content: "\e84e"; */
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 24px;
  font-family: 'iconfont' !important;
  font-style: normal;
  display: v-bind(beforeDisplay);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  box-sizing: border-box;
}
.DirectionalSign{
  width: 60%;
  height: 20%;
  background-image: url(@/assets/img/AerialView/direction.png);
  background-size: 100% 100%;
}
.iconTip{
  width: 100%;
  height: 80%;
  }
.iconTip>ul>li{
  padding-left: 10%;
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.5rem;
  color: #fff;
}
.iconTip>ul>li>i{
  font-size: 1.5rem;
}
</style>