修改机械分厂五个车间环境的用电量和生产额图表显示 修改传感器报警显示

src/components/borderBox/border6.vue

@@ -1,5 +1,5 @@
 <template>
-  <dv-border-box-13 ref="boder">
+  <dv-border-box-13 ref="boder" :color="color">
     <div class="slot">
       <slot></slot>
     </div>
@@ -8,6 +8,12 @@
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
+const prop = defineProps({
+  color: {
+    type: Array,
+    default: () => [],
+  },
+});
 let boder = ref();
 const resetWH = () => {
   boder ? boder.value.initWH() : "";

src/views/Mechanics/child/index.vue

@@ -33,11 +33,12 @@ import { onBeforeMount, onMounted, onUnmounted, ref } from "vue";
 // import { Swiper, SwiperSlide } from 'swiper/vue';
 import { register } from "swiper/element/bundle";
 import index from "./main/index.vue";
-import { useRoute } from "vue-router";
+import { useRoute,useRouter } from "vue-router";
 import { gatDeviceStatusOfMF } from "@/http/Mechanics";
 import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { useMechanicsStore } from "@/store/module/Mechanics";
 const route=useRoute()
+const router=useRouter()
 const store = useMechanicsStore();
 register();
 let page = ref();
@@ -49,9 +50,12 @@ const onProgress = (e) => {
 
 const onSlideChange = (e) => {
   // console.log(e.detail[0].activeIndex
-
+  // console.log(e, "e");
+  
   store.changePage(e.detail[0].activeIndex + 1);
+  router.replace(`/Mechanics/${e.detail[0].activeIndex+1}`);
 };
+
 async function gatDeviceStatusOfMFfun() {
   let result: any = await gatDeviceStatusOfMF();
   store.changeloading(true);

src/views/PaintShopView/View1/bottom.vue

@@ -110,13 +110,13 @@ let powerOption = reactive({
       containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      data: [
-      ],
+      type: 'value',
 
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: [
+      ],
     },
     series: [
     ],
@@ -153,13 +153,13 @@ let ProductionOption = reactive({
       containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      data: [
-      ],
+      type: 'value',
 
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: [
+      ],
     },
     series: [
     ],
@@ -189,9 +189,9 @@ function setcontentData(val) {
     monthData.push(key)
     powerMonth.push(val.power[key])
   }
-  powerOption.option.xAxis.data = []
+  powerOption.option.yAxis.data = []
   powerOption.option.series = []
-  powerOption.option.xAxis.data = monthData.reverse()
+  powerOption.option.yAxis.data = monthData.reverse()
   powerOption.option.series.push({
     data: powerMonth.reverse(),
     type: 'bar',
@@ -233,9 +233,9 @@ function setcontentData(val) {
     monthData2.push(key)
     powerMonth2.push(val.rate[key])
   }
-  ProductionOption.option.xAxis.data = []
+  ProductionOption.option.yAxis.data = []
   ProductionOption.option.series = []
-  ProductionOption.option.xAxis.data = monthData2.reverse()
+  ProductionOption.option.yAxis.data = monthData2.reverse()
   ProductionOption.option.series.push({
     data: powerMonth2.reverse(),
     type: 'bar',

src/views/PaintShopView/finishView/bottom.vue

@@ -110,13 +110,13 @@ let powerOption = reactive({
       containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      data: [
-      ],
+      type: 'value',
 
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: [
+      ],
     },
     series: [
     ],
@@ -153,13 +153,13 @@ let ProductionOption = reactive({
       containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      data: [
-      ],
+      type: 'value',
 
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: [
+      ],
     },
     series: [
     ],
@@ -186,9 +186,9 @@ function setcontentData(val) {
     monthData.push(key)
     powerMonth.push(val.power[key])
   }
-  powerOption.option.xAxis.data = []
+  powerOption.option.yAxis.data = []
   powerOption.option.series = []
-  powerOption.option.xAxis.data = monthData.reverse()
+  powerOption.option.yAxis.data = monthData.reverse()
   powerOption.option.series.push({
     data: powerMonth.reverse(),
     type: 'bar',
@@ -229,9 +229,9 @@ function setcontentData(val) {
     monthData2.push(key)
     powerMonth2.push(val.rate[key])
   }
-  ProductionOption.option.xAxis.data = []
+  ProductionOption.option.yAxis.data = []
   ProductionOption.option.series = []
-  ProductionOption.option.xAxis.data = monthData2.reverse()
+  ProductionOption.option.yAxis.data = monthData2.reverse()
   ProductionOption.option.series.push({
     data: powerMonth2.reverse(),
     type: 'bar',

src/views/PaintShopView/machiningView/bottom.vue

@@ -110,13 +110,13 @@ let powerOption = reactive({
       containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      data: [
-      ],
+      type: 'value',
 
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: [
+      ],
     },
     series: [
     ],
@@ -153,13 +153,13 @@ let ProductionOption = reactive({
       containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      data: [
-      ],
+      type: 'value',
 
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: [
+      ],
     },
     series: [
     ],
@@ -187,9 +187,9 @@ function setcontentData(val) {
     monthData.push(key)
     powerMonth.push(val.power[key])
   }
-  powerOption.option.xAxis.data = []
+  powerOption.option.yAxis.data = []
   powerOption.option.series = []
-  powerOption.option.xAxis.data = monthData.reverse()
+  powerOption.option.yAxis.data = monthData.reverse()
   powerOption.option.series.push({
     data: powerMonth.reverse(),
     type: 'bar',
@@ -230,9 +230,9 @@ function setcontentData(val) {
     monthData2.push(key)
     powerMonth2.push(val.rate[key])
   }
-  ProductionOption.option.xAxis.data = []
+  ProductionOption.option.yAxis.data = []
   ProductionOption.option.series = []
-  ProductionOption.option.xAxis.data = monthData2.reverse()
+  ProductionOption.option.yAxis.data = monthData2.reverse()
   ProductionOption.option.series.push({
     data: powerMonth2.reverse(),
     type: 'bar',

src/views/PaintShopView/stuffView/bottom.vue

@@ -110,13 +110,13 @@ let powerOption = reactive({
       containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      data: [
-      ],
+      type: 'value',
 
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: [
+      ],
     },
     series: [
     ],
@@ -153,13 +153,13 @@ let ProductionOption = reactive({
       containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      data: [
-      ],
+      type: 'value',
 
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: [
+      ],
     },
     series: [
     ],
@@ -187,9 +187,9 @@ function setcontentData(val) {
     monthData.push(key)
     powerMonth.push(val.power[key])
   }
-  powerOption.option.xAxis.data = []
+  powerOption.option.yAxis.data = []
   powerOption.option.series = []
-  powerOption.option.xAxis.data = monthData.reverse()
+  powerOption.option.yAxis.data = monthData.reverse()
   powerOption.option.series.push({
     data: powerMonth.reverse(),
     type: 'bar',
@@ -231,9 +231,9 @@ function setcontentData(val) {
     monthData2.push(key)
     powerMonth2.push(val.rate[key])
   }
-  ProductionOption.option.xAxis.data = []
+  ProductionOption.option.yAxis.data = []
   ProductionOption.option.series = []
-  ProductionOption.option.xAxis.data = monthData2.reverse()
+  ProductionOption.option.yAxis.data = monthData2.reverse()
   ProductionOption.option.series.push({
     data: powerMonth2.reverse(),
     type: 'bar',

src/views/PaintShopView/weldView/bottom.vue

@@ -110,13 +110,13 @@ let powerOption = reactive({
       containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      data: [
-      ],
+      type: 'value',
 
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: [
+      ],
     },
     series: [
     ],
@@ -153,13 +153,13 @@ let ProductionOption = reactive({
       containLabel: true,
     },
     xAxis: {
-      type: 'category',
-      data: [
-      ],
+      type: 'value',
 
     },
     yAxis: {
-      type: 'value',
+      type: 'category',
+      data: [
+      ],
     },
     series: [
     ],
@@ -187,9 +187,9 @@ function setcontentData(val) {
     monthData.push(key)
     powerMonth.push(val.power[key])
   }
-  powerOption.option.xAxis.data = []
+  powerOption.option.yAxis.data = []
   powerOption.option.series = []
-  powerOption.option.xAxis.data = monthData.reverse()
+  powerOption.option.yAxis.data = monthData.reverse()
   powerOption.option.series.push({
     data: powerMonth.reverse(),
     type: 'bar',
@@ -231,9 +231,9 @@ function setcontentData(val) {
     monthData2.push(key)
     powerMonth2.push(val.rate[key])
   }
-  ProductionOption.option.xAxis.data = []
+  ProductionOption.option.yAxis.data = []
   ProductionOption.option.series = []
-  ProductionOption.option.xAxis.data = monthData2.reverse()
+  ProductionOption.option.yAxis.data = monthData2.reverse()
   ProductionOption.option.series.push({
     data: powerMonth2.reverse(),
     type: 'bar',

src/views/realtimeSecurity/content/chart/verticalNumLoop.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="numBox1" :key="keynum" :style="{ height: '100%', width: '97%' }">
-    <border6 ref="refborder3" >
+    <border6 ref="refborder3" :color="borderColor">
       <template v-slot>
         <div class="box" ref="classBox1">
           <div class="icontip">
@@ -69,6 +69,15 @@ let item:any = computed(() => {
 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;

src/views/realtimeSecurityJixiefenchang/content/chart/verticalNum.vue

@@ -9,9 +9,10 @@
 -->
 <template>
   <div ref="numBox1" :style="{height:boxSize.height,width:boxSize.width,marginBottom:'10px'}">
-    <border6 ref="refborder3">
+    <border6 ref="refborder3" :color="borderColor">
       <template v-slot>
-        <div class="box" ref="classBox1">
+        <div class="container">
+          <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)&&items.status">
               <el-popover placement="bottom" :width="250" trigger="hover" effect="dark"
@@ -54,7 +55,7 @@
               <p class="num">{{item.val}}</p>
               <span>{{ value.unit }}</span>
             </p>
-
+        </div>
         </div>
       </template>
     </border6>
@@ -73,10 +74,18 @@ let props = defineProps<{
   title: string;
 }>();
 let i =ref(0)
-let item = computed(() => {
-  
+let item = computed(() => {  
   return value.data[i.value]||{"name":"","val":"0","type":"","field":"","ts":0,"status":false};
 });
+let borderColor = computed(() => {
+  let type = value.data.find((items: any) => {
+    if (+items.val > +value.quota&&items.status) {
+      return true;
+    }
+  });
+
+  return type ? ["#E43961","#E43961"] : [];
+});
 let iconcolor = computed(() => {
   //开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空
   if (value.data[i.value]) {
@@ -145,6 +154,15 @@ defineExpose({
 
 <style scoped>
 @import "@/assets/css/iconfont.css";
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  overflow: hidden;
+}
 .box {
   height: 50%;
   width: 100%;