screenFront/src/views/MechanicalView_jingshi/content/statusBar.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\AerialView\content\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="back" v-if="isBack">
        <Back/>
      </div>
       <div class="iconTip">
         <ul>
           <li v-for="item in 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 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>
         </ul>
       </div>
     </div>
   </div>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue"
import { useMechanicalViewStore } from "@/store/module/MechanicalView";
import Back from "@/components/back/index.vue";
import {useRoute} from "vue-router"
const route = useRoute()
const isBack = route.query.isBack||false
const store = useMechanicalViewStore();
const afterDisplay = ref("none")
const beforeDisplay = ref("block")
const show = ref(true)
let numkey=ref(0)
let statusbarref=ref()
let props = defineProps<{
 width: number;
 height: number;
}>();
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(
 () => props,
 (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
 //重置盒子尺寸
}

watch(
 () => store.iconList,
 (newVal, oldVal) => {
   
   
   iconList= reactive(newVal)
   numkey.value++
 },
 { deep: true, flush: "post" }
);
watch(
 () => store.devList,
 (newVal, oldVal) => {
   
   
   devList= reactive(newVal)
   numkey.value++
 },
 { deep: true, flush: "post" }
);
let iconList = reactive([])
let devList = reactive([])
</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;
} 
.tip-box-border .back{
  position: absolute;
  top: 20px;
  right: 0;
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
  color: #fff;
  z-index: 999;
  cursor: pointer;
}
.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;
  cursor: pointer;
}
.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;
  cursor: pointer;
}
.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>