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

<!--
 * @FilePath: \daping\src\views\InPlantProducts\child\component\bottomtip.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 }"
    :key="keynum"
  >
    <ul class="ulheader">
      <li @click="clickfun(0)">错误</li>
      <li @click="clickfun(1)">报警</li>
    </ul>
    <div class="infobox" v-show="show == 0">
      <p class="infoP">
        <span>设备机架号：</span> <span>{{ data.name }}</span>
      </p>
      <p class="infoP">
        <span>创建时间：</span> <span>{{ data.Timestamp }}</span>
      </p>
      <p class="infoP">
        <span>错误内容：</span>
        <span>{{ data.severror ? data.severror : "无错误内容" }}</span>
      </p>
    </div>
    <div class="infobox" v-show="show == 1">
      <p class="infoP">
        <span>设备机架号：</span> <span>{{ data.name }}</span>
      </p>
      <p class="infoP">
        <span>创建时间：</span> <span>{{ data.Timestamp }}</span>
      </p>
      <p class="infoP">
        <span>报警内容：</span>
        <span>{{
          data.Alarlmnformation ? data.Alarlmnformation : "无报警内容"
        }}</span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
import border1 from "@/components/borderBox/border1.vue";
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
const store = useInPlantProductsStore();
let show = ref(0);
let keynum = ref(0);
let data = reactive({
  name: "",
  severror: "",
  Timestamp: "",
  Alarlmnformation: "",
});
const itemSize = reactive({
  height: "0px",
  width: "0px",
});
onMounted(() => {
  // setData()
});
watch(
  () => store.PublicData,
  (newVal, oldVal) => {
    //动态更新echarts
    data.name=newVal.rackNumber
    console.log(newVal);
    
    keynum.value++;
  },
  { deep: true, flush: "post" }
);
function clickfun(value: any) {
  show.value = value;
}
function setchartWH(width: any, height: any) {
  itemSize.height = height + "px";
  itemSize.width = width + "px";
  // refborder1.value.resetWH()
}

const setData = (value: any) => {
  console.log(data);
  
  data = value;
  keynum.value++;
};

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

<style scoped>
@import "@/assets/css/iconfont.css";

.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.ulheader {
  width: 100%;
  height: 40px;
  display: flex;
}
.ulheader li {
  width: 100px;
  height: 40px;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  line-height: 40px;
  margin-left: 1rem;
}
.ulheader li:nth-child(1) {
  background-color: #5454fe;
}
.ulheader li:nth-child(2) {
  background-color: #fea97e;
}
.ulheader li:hover {
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.152),
    0px 0px 80px rgba(255, 255, 255, 0.38);
}
.infoP {
  font-size: 25px;
  color: #fff;
  text-align: left;
  margin-top: 1rem;
}
.infobox {
  width: 100%;
  padding: 10px;
}
</style>