传感器监测

src/views/generalEnvironmentMechanical/components/verticalNumLoop.vue

@@ -0,0 +1,231 @@
+<template>
+  <div ref="numBox1" :key="keynum" :style="{ height: '100%', width: '97%' }">
+    <border6 ref="refborder3" :color="borderColor">
+      <template v-slot>
+        <div class="box" ref="classBox1">
+          <div class="icontip">
+            <div v-for="items in value" style="margin: auto 5px;" v-show="(+items.val > +limit)&&items.status">
+              <el-popover placement="bottom" :width="250" trigger="hover" 
+                :popper-style="{ 'background-color': 'rgba(0,0,0,.8)' }">
+                <ul class="icontipBox">
+                  <li>
+                    <p class="t-right">{{t('messages.position')}}：</p>
+                    <p>{{ items.name }}</p>
+                  </li>
+                  <li>
+                    <p class="t-right">{{t('messages.NormalRange')}}：</p>
+                    <p>{{ limit }} {{unit}}</p>
+                  </li>
+                  <li>
+                    <p class="t-right">{{t('messages.CurrentValue')}}：</p>
+                    <p>{{ items.val }} {{unit}}</p>
+                  </li>
+                  <li>
+                    <p class="t-right">{{t('messages.AlarmTime')}}：</p>
+                    <p>{{ items.date }}</p>
+                  </li>
+                  <li>
+                    <p class="t-right">{{t('messages.duration')}}：</p>
+                    <p>{{ items.continuous }}</p>
+                  </li>
+                </ul>
+                <template #reference>
+                  <i :class="+items.val > +limit
+                      ? 'iconfont ' + icon + ' icon-red iconsmall-size'
+                      : 'iconfont ' + icon + ' icon-blue iconsmall-size'
+                    "></i>
+                </template>
+              </el-popover>
+            </div>
+          </div>
+          <!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
+          <h2>{{ item.name}}</h2>
+            <i :class="['iconfont',icon,iconcolor,'iconbig-size']"></i>
+            <p class="unit" v-if="unit&&item.status">
+              <p class="num">{{item.val}}</p>
+              <span>{{ unit }}</span>
+            </p>
+
+            
+          <!-- <p  class="unit"><p v-show="value.data&&value.unit"  :class="'num'">{{value.data}}</p><span>{{value.unit}}</span></p> -->
+          <!-- </div> -->
+        </div>
+      </template>
+    </border6>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch,onUnmounted } from "vue";
+// import border3 from "@/components/borderBox/border3.vue";
+import border6 from "@/components/borderBox/border6.vue";
+import { useI18n } from 'vue-i18n'
+let {t} = useI18n();
+let i =ref(0)
+let timer = null;
+let item:any = computed(() => {
+  return props.value[i.value];
+});
+let iconcolor = computed(() => {  
+  return props.value[i.value].status?props.value[i.value].val > props.limit ? "icon-red" : "icon-blue":"icon-grey";
+});
+let borderColor = computed(() => {
+  let type = props.value.find((items: any) => {
+    if (+items.val > +props.limit&&items.status) {
+      return true;
+    }
+  });
+
+  return type ? ["#E43961","#E43961"] : [];
+});
+let props = defineProps<{
+  title: string;
+  icon: string;
+  limit: string | number;
+  unit: string|null;
+  value: Array<any>;
+}>();
+let keynum = ref(0);
+
+let refborder3 = ref();
+let numBox1 = ref();
+const classBox1 = ref();
+onMounted(() => {
+  timer = setInterval(() => {
+    i.value++;
+    if (i.value >= props.value.length) {
+      i.value = 0;
+    }
+  }, 5000);
+ });
+ onUnmounted(() => {
+  clearInterval(timer);
+ })
+const boxSize = reactive({
+  height: "",
+  width: "",
+});
+</script>
+
+<style scoped>
+@import "@/assets/css/iconfont.css";
+
+.box {
+  height: 50%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+/* .contentbox{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+} */
+h2 {
+  color: #fff;
+}
+
+p {
+  color: #fff;
+}
+
+.iconbig-size {
+  font-size: 70px;
+}
+
+.iconsmall-size {
+  font-size: 20px;
+}
+
+.icon-red {
+  color: #e43961;
+  animation: redstart 2s infinite;
+  /* position: relative; */
+  /* top: -15px; */
+}
+
+.icon-grey {
+  color: rgb(167, 166, 189);
+  /* position: relative; */
+  /* top: -15px; */
+}
+.icon-blue {
+  color: #20aec5;
+  /* position: relative; */
+  /* top: -15px; */
+}
+
+/* .icon-red, .icon-blue { */
+/* margin-bottom: 20%; */
+/* } */
+.num {
+  font-size: 16px;
+}
+
+.unit {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: top;
+  font-size: 16px;
+  height: 0;
+  width: 100px;
+}
+
+.icontip {
+  display: flex;
+  margin-top: -60px;
+  width: 100px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+}
+
+.icontipBox li {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 5px;
+}
+
+.icontipBox li p:nth-child(1) {
+  width: 40%;
+  text-align: left;
+}
+.icontipBox li p:nth-child(2) {
+  flex: 1;
+}
+
+
+.t-center {
+  text-align: center;
+}
+
+.t-left {
+  text-align: left;
+}
+
+/* .icontipBox li p:nth-child(1) {
+  min-width:80px;
+  display: flex;
+  font-size: 18px;
+}
+.icontipBox li:nth-child(2) {
+} */
+@keyframes redstart {
+  0% {}
+
+  50% {
+    text-shadow: #fff 1px 0 10px;
+  }
+
+  100% {}
+}
+</style>