修改机械分厂环境传感器状态显示，电控分厂管道压力显示

2023-05-22 08:19:15 +08:00 · 2023-05-22 08:19:15 +08:00 · 9e1b84f941
commit 9e1b84f941
parent 5e71dbdbce
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,14 +20,14 @@
            ? '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">
-            <p class="num">{{ item.val }}&nbsp;</p>
-            <span>{{ value.unit }}</span>
+          <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>
          <p class="unit" v-else>
-            <p class="num">&nbsp;</p>
-            <span>&nbsp;</span>
+          <p class="num">&nbsp;</p>
+          <span>&nbsp;</span>
          </p>

        </div>
@ -50,8 +50,8 @@ let props = defineProps<{
 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,12 +59,12 @@ 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"
  }
-  
+
 });
 let keynum = ref(0);
 const value = reactive<any>({
@ -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;
@ -135,22 +135,22 @@ defineExpose({


 .box {
-    height: 50%;
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    align-items: center;
-  }
-  
-  .box>h5 {
-    font-size: 15px;
-    /* margin-bottom: 20px; */
-    margin-top: 20px;
-  }
-  
-  /* .contentbox{
+  height: 50%;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.box>h5 {
+  font-size: 15px;
+  /* margin-bottom: 20px; */
+  margin-top: 20px;
+}
+
+/* .contentbox{
    height: 100%;
    width: 100%;
    display: flex;
@ -158,85 +158,87 @@ defineExpose({
    justify-content: space-around;
    align-items: center;
  } */
-  h2 {
-    color: #fff;
-  }
-  
-  p {
-    color: #fff;
-  }
-  
-  .icon-red {
-    font-size: 100px;
-    color: #E43961;
-    animation: redstart 2s infinite;
-    /* position: relative; */
-    /* top: -15px; */
-  }
-  
-  .icon-blue {
-    font-size: 100px;
-    color: #20AEC5;
-    /* position: relative; */
-    /* top: -15px; */
-  }
-  .icon-grey {
+h2 {
+  color: #fff;
+}
+
+p {
+  color: #fff;
+}
+
+.icon-red {
+  font-size: 100px;
+  color: #E43961;
+  animation: redstart 2s infinite;
+  /* position: relative; */
+  /* top: -15px; */
+}
+
+.icon-blue {
+  font-size: 100px;
+  color: #20AEC5;
+  /* position: relative; */
+  /* top: -15px; */
+}
+
+.icon-grey {
  color: rgb(167, 166, 189);
  font-size: 100px;
  /* position: relative; */
  /* top: -15px; */
 }
-  .iconsmall-size {
-    font-size: 20px;
-  }
-  
-  .num {
-    font-size: 16px;
-  }
-  
-  .unit {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    vertical-align: top;
-    font-size: 16px;
-    height: 5;
-    width: 100px;
-  }
-  
-  .box>h2 {
-    font-size: 20px;
-    position: absolute;
+
+.iconsmall-size {
+  font-size: 20px;
+}
+
+.num {
+  font-size: 16px;
+}
+
+.unit {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: top;
+  font-size: 16px;
+  height: 5;
+  width: 100px;
+}
+
+.box>h2 {
+  font-size: 20px;
+  position: absolute;
  top: 15px;
-  left:20px;
-  }
-  
-  
-  .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;
-  }
+  left: 20px;
+}
+
+
+.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;
+}

@keyframes redstart {
  0% {}
--- a/src/views/electronicControlAmbient/top.vue
+++ b/src/views/electronicControlAmbient/top.vue
@ -22,16 +22,12 @@
          <verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum> -->
          <div>
            <border3 ref="borderref">
-                  <template v-slot>
-                      <humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
-                  </template>
-              </border3>
+              <template v-slot>
+                <humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
+              </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: "",
@ -255,23 +251,23 @@ let ductOption = reactive({
 //     let result: any = await getSensorByDept({ depts: 6 });

 //     if (result.code == 200) {
-    
+
 //     }
 //   }
 let temp_humi_index = 0
-  function setcontentData(val){
-    let noise = val.noise.map((item) => {
-    return { name: item.name, val: item.data,status:item.status||false };
+function setcontentData(val) {
+  let noise = val.noise.map((item) => {
+    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")
-    // 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")
-    // console.log(pmref.value);
-    humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
+
+  // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
+  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")
+  // console.log(pmref.value);
+  humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
  if (val.temp_humi.length > 1) {
    temp_humi_timer = setInterval(() => {
      humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
@ -282,59 +278,59 @@ let temp_humi_index = 0
    }, 3000)
  }

-    let type=[]
-    let valueduct=[]
-    for(let key in val.water_pressure){
-      if(key=='精加车间水暖管道压力43（进水）'){
-        // type.push('进水')
-        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]
-      }
-      
-        // valueduct.push(val.water_pressure[key])
+  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 {
+      // type.push('回水')
+      ductOption.option.series[1].data[0].value = val.water_pressure[key]
    }
-    // ductOption.option.yAxis.data=[]
-    // ductOption.option.series=[]
-    // ductOption.option.yAxis.data=type
-    // ductOption.option.series.push({
-    //   data: valueduct,
-    //   type: 'bar',
-    //   showBackground: true,
-    //   backgroundStyle: {
-    //     color: 'rgba(180, 180, 180, 0.2)'
-    //   },
-    //   itemStyle: {
-    //         color: function(params) {
-    //             // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
-    //             // console.log(params)
-    //             let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-    //             // return colors[params.dataIndex];
-    //             return color[params.dataIndex];
-    //         }
-    //     },
-    // barWidth:'50%',
-    // label: {
-    //         show: true,
-    //         color:'#fff',
-    //         formatter: "{c}",
-    //         position: "right",
-    //         textStyle: {
-    //           color: "#fff",
-    //           fontSize: 14,
-    //         },
-    //     },
-    // })
-    
-    ductref.value.changeData(ductOption.option)
+
+    // valueduct.push(val.water_pressure[key])
  }
-let Data={power:{"管道1":11,"管道2":22}}
+  // ductOption.option.yAxis.data=[]
+  // ductOption.option.series=[]
+  // ductOption.option.yAxis.data=type
+  // ductOption.option.series.push({
+  //   data: valueduct,
+  //   type: 'bar',
+  //   showBackground: true,
+  //   backgroundStyle: {
+  //     color: 'rgba(180, 180, 180, 0.2)'
+  //   },
+  //   itemStyle: {
+  //         color: function(params) {
+  //             // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+  //             // console.log(params)
+  //             let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+  //             // return colors[params.dataIndex];
+  //             return color[params.dataIndex];
+  //         }
+  //     },
+  // barWidth:'50%',
+  // label: {
+  //         show: true,
+  //         color:'#fff',
+  //         formatter: "{c}",
+  //         position: "right",
+  //         textStyle: {
+  //           color: "#fff",
+  //           fontSize: 14,
+  //         },
+  //     },
+  // })
+
+  ductref.value.changeData(ductOption.option)
+}
+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;