Merge branch 'master' of https://codeup.aliyun.com/645deca397d94d909e439238/iotplatform_sourcecode/screenFront into dismap

2023-05-22 10:22:03 +08:00 · 2023-05-22 10:22:03 +08:00 · 8c49fc4a37
commit 8c49fc4a37
parent a97344ca66 9e1b84f941
3 changed files with 199 additions and 188 deletions
--- a/src/views/PaintShopView/components/verticalNum.vue
+++ b/src/views/PaintShopView/components/verticalNum.vue
@ -1,5 +1,5 @@
 <!--
- * @FilePath: \gitscreenFront\src\views\PaintShopView\components\verticalNum.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\components\verticalNum.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 08:22:35
@ -20,8 +20,8 @@
            ? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
            : 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
            "></i> -->
-            <i :class="['iconfont','iconbig-size',icon,iconcolor]"></i>
-          <p class="unit" v-if="value.unit&&item.status">
+          <i :class="['iconfont', 'iconbig-size', icon, iconcolor]"></i>
+          <p class="unit" v-if="value.unit && item.status">
          <p class="num">{{ item.val }}&nbsp;</p>
          <span>{{ value.unit }}</span>
          </p>
@ -51,7 +51,7 @@ let i = ref(0)
 let item = computed(() => {
  console.log(value.data[i.value]);

-  return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0,"status":false};
+  return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0, "status": false };
 });
 let icon = computed(() => {
  return value.iconname
@ -59,9 +59,9 @@ let icon = computed(() => {
 let iconcolor = computed(() => {
  console.log(value.data[i.value]);
  //开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空
-  if(value.data[i.value]){
-    return value.data[i.value].status? +value.data[i.value].val > +value.quota ? "icon-red" : "icon-blue":"icon-grey";
-  }else{
+  if (value.data[i.value]) {
+    return value.data[i.value].status ? +value.data[i.value].val > +value.quota ? "icon-red" : "icon-blue" : "icon-grey";
+  } else {
    return "icon-grey"
  }

@ -106,7 +106,7 @@ const setData = (
    return {
      name: item.name.split("车间")[1] || item.name,
      val: item.val,
-      status:item.status
+      status: item.status
    };
  });
  value.data = temp_data;
@ -142,15 +142,15 @@ defineExpose({
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
-  }
+}

-  .box>h5 {
+.box>h5 {
  font-size: 15px;
  /* margin-bottom: 20px; */
  margin-top: 20px;
-  }
+}

-  /* .contentbox{
+/* .contentbox{
    height: 100%;
    width: 100%;
    display: flex;
@ -158,43 +158,45 @@ defineExpose({
    justify-content: space-around;
    align-items: center;
  } */
-  h2 {
+h2 {
  color: #fff;
-  }
+}

-  p {
+p {
  color: #fff;
-  }
+}

-  .icon-red {
+.icon-red {
  font-size: 100px;
  color: #E43961;
  animation: redstart 2s infinite;
  /* position: relative; */
  /* top: -15px; */
-  }
+}

-  .icon-blue {
+.icon-blue {
  font-size: 100px;
  color: #20AEC5;
  /* position: relative; */
  /* top: -15px; */
-  }
-  .icon-grey {
+}
+
+.icon-grey {
  color: rgb(167, 166, 189);
  font-size: 100px;
  /* position: relative; */
  /* top: -15px; */
 }
-  .iconsmall-size {
+
+.iconsmall-size {
  font-size: 20px;
-  }
+}

-  .num {
+.num {
  font-size: 16px;
-  }
+}

-  .unit {
+.unit {
  display: flex;
  justify-content: center;
  align-items: center;
@ -202,17 +204,17 @@ defineExpose({
  font-size: 16px;
  height: 5;
  width: 100px;
-  }
+}

-  .box>h2 {
+.box>h2 {
  font-size: 20px;
  position: absolute;
  top: 15px;
-  left:20px;
-  }
+  left: 20px;
+}


-  .icontip {
+.icontip {
  display: flex;
  margin-top: -60px;
  width: 100px;
@ -220,23 +222,23 @@ defineExpose({
  align-items: center;
  justify-content: center;
  height: 60px;
-  }
+}

-  .icontipBox li {
+.icontipBox li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 5px;
-  }
+}

-  .icontipBox li p:nth-child(1) {
+.icontipBox li p:nth-child(1) {
  width: 40%;
  text-align: left;
-  }
+}

-  .icontipBox li p:nth-child(2) {
+.icontipBox li p:nth-child(2) {
  flex: 1;
-  }
+}

@keyframes redstart {
  0% {}
--- a/src/views/electronicControlAmbient/top.vue
+++ b/src/views/electronicControlAmbient/top.vue
@ -27,11 +27,7 @@
              </template>
            </border3>
          </div>
-          <chart
-            :title="ductOption.title"
-            :option="ductOption.option"
-            ref="ductref"
-          ></chart>
+          <chart :title="ductOption.title" :option="ductOption.option" ref="ductref"></chart>
        </div>
      </el-col>
    </el-row>
@ -44,14 +40,14 @@ import border6 from "@/components/borderBox/border6.vue";
 import border3 from "@/components/borderBox/border3.vue";
 import { calcWH } from "@/components/ts/selfAdaption";
 // import {getPowerData} from '@/http/environment'
-import { getSensorByDept} from "@/http/PaintShopView/index";
+import { getSensorByDept } from "@/http/PaintShopView/index";
 import humidity from "./chart/humidity.vue";
 import chart from "@/components/assembly/chart2.vue";
 import verticalNum from "./chart/verticalNum.vue";
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 const store = useEnergyConsumeStore();
 const router = useRouter();

@ -60,9 +56,9 @@ let verticalNum4 = ref();
 // let verticalNum5 = ref();
 // let verticalNum6 = ref();
 // let verticalNum7 = ref();
-let borderref=ref()
-let humidityref=ref()
-let ductref=ref()
+let borderref = ref()
+let humidityref = ref()
+let ductref = ref()
 let temp_humi_timer = null

 let props = defineProps<{
@ -91,12 +87,12 @@ const powerBox = (width: any, height: any) => {
  let a = calcWH(height, width, 1, 24, 0);
  //修改高度
  // verticalNum3.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
-  verticalNum4.value.setchartWH(a.oWidth*8-20,a.oHeight-20)
+  verticalNum4.value.setchartWH(a.oWidth * 8 - 20, a.oHeight - 20)
  // verticalNum5.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
  // verticalNum6.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
  // verticalNum7.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
-  humidityref.value.setchartWH(a.oWidth*8-40,a.oHeight-40)
-  ductref.value.setchartWH(a.oWidth*8-20, a.oHeight-20);
+  humidityref.value.setchartWH(a.oWidth * 8 - 40, a.oHeight - 40)
+  ductref.value.setchartWH(a.oWidth * 8 - 20, a.oHeight - 20);
 };
 let ductOption = reactive({
  title: "",
@ -259,14 +255,14 @@ let ductOption = reactive({
 //     }
 //   }
 let temp_humi_index = 0
-  function setcontentData(val){
+function setcontentData(val) {
  let noise = val.noise.map((item) => {
-    return { name: item.name, val: item.data,status:item.status||false };
+    return { name: item.name, val: item.data, status: item.status || false };
  });
  console.log(noise);

  // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
-    verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")
+  verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")
  // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
  // verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',5,"mg/m3")
  // verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM")
@ -282,15 +278,15 @@ let temp_humi_index = 0
    }, 3000)
  }

-    let type=[]
-    let valueduct=[]
-    for(let key in val.water_pressure){
-      if(key=='精加车间水暖管道压力43（进水）'){
+  let type = []
+  let valueduct = []
+  for (let key in val.water_pressure) {
+    if (key == '电控水暖管道压力(进水)24') {
      // type.push('进水')
-        ductOption.option.series[0].data[0].value=val.water_pressure[key]
-      }else{
+      ductOption.option.series[0].data[0].value = val.water_pressure[key]
+    } else {
      // type.push('回水')
-        ductOption.option.series[1].data[0].value=val.water_pressure[key]
+      ductOption.option.series[1].data[0].value = val.water_pressure[key]
    }

    // valueduct.push(val.water_pressure[key])
@ -328,13 +324,13 @@ let temp_humi_index = 0
  // })

  ductref.value.changeData(ductOption.option)
-  }
-let Data={power:{"管道1":11,"管道2":22}}
+}
+let Data = { power: { "管道1": 11, "管道2": 22 } }
 onMounted(() => {


 });
-onUnmounted(()=>{
+onUnmounted(() => {
  clearInterval(temp_humi_timer)
 })
 defineExpose({
--- a/src/views/realtimeSecurityJixiefenchang/content/chart/verticalNum.vue
+++ b/src/views/realtimeSecurityJixiefenchang/content/chart/verticalNum.vue
@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront-branches\src\views\realtimeSecurity\content\chart\verticalNum.vue
+ * @FilePath: \screenFront\src\views\realtimeSecurityJixiefenchang\content\chart\verticalNum.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 08:22:35
@ -13,7 +13,7 @@
      <template v-slot>
        <div class="box" ref="classBox1">
          <div class="icontip">
-            <div v-for="items in value.data" style="margin: auto 5px;" v-show="+items.val > +value.quota">
+            <div v-for="items in value.data" style="margin: auto 5px;" v-show="(+items.val > +value.quota)&&item.status">
              <el-popover placement="bottom" :width="250" trigger="hover" effect="dark"
                :popper-style="{ 'background-color': 'rgba(0,0,0,.8)' }">
                <ul class="icontipBox">
@ -49,11 +49,8 @@
          </div>
          <!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
          <h2>{{ item.name}}</h2>
-            <i :class="+item.val > +value.quota
-                ? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
-                : 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
-              "></i>
-            <p class="unit" v-if="value.unit">
+            <i :class="['iconfont', 'iconbig-size', value.iconname, iconcolor]"></i>
+            <p class="unit" v-if="value.unit&&item.status">
              <p class="num">{{item.val}}</p>
              <span>{{ value.unit }}</span>
            </p>
@ -78,7 +75,17 @@ let props = defineProps<{
 let i =ref(0)
 let item = computed(() => {
  
-  return value.data[i.value]||{"name":"","val":"0","type":"","field":"","ts":0};
+  return value.data[i.value]||{"name":"","val":"0","type":"","field":"","ts":0,"status":false};
+});
+let iconcolor = computed(() => {
+  console.log(value.data[i.value]);
+  //开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空
+  if (value.data[i.value]) {
+    return value.data[i.value].status ? +value.data[i.value].val > +value.quota ? "icon-red" : "icon-blue" : "icon-grey";
+  } else {
+    return "icon-grey"
+  }
+
 });
 let keynum = ref(0);
 const value = reactive<any>({
@ -169,6 +176,12 @@ p {
  /* position: relative; */
  /* top: -15px; */
 }
+.icon-grey {
+  color: rgb(167, 166, 189);
+  font-size: 140px;
+  /* position: relative; */
+  /* top: -15px; */
+}
 .icon-blue {
  font-size: 140px;
  color: #20AEC5;