修改机械分厂设备大屏页面

src/http/Mechanics/index.ts

@@ -41,3 +41,8 @@ export function reqDeviceTotelListMF(){
 export function reqDeviceTotelStatusMF() {
     return get('/device/deviceTotelStatusMF')
 }
+
+//提醒
+export function reqDeviceRemind() {
+    return get('/device/deviceRemind')
+}

src/locales/lang/en.ts

@@ -273,5 +273,7 @@ export default {
         '历史数据':'Historical Data',
         '环境 实时监测系统':'环境 实时监测系统',
         '传感器监测走势图':'传感器监测走势图',
+        '机械分厂设备列表':'机械分厂设备列表',        
+        '设备状态总览':'设备状态总览',
       }
   }

src/locales/lang/zh.ts

@@ -273,5 +273,7 @@ export default {
         '历史数据':'历史数据',
         '环境 实时监测系统':'环境 实时监测系统',
         '传感器监测走势图':'传感器监测走势图',
+        '机械分厂设备列表':'机械分厂设备列表',
+        '设备状态总览':'设备状态总览',
       }
   }

src/views/Mechanics/components/DevOverview.vue

@@ -9,26 +9,16 @@
 -->
 <template>
     <div class="devItem-box">
-        <h2>{{ props.title }}</h2>
+        <h2 class="title">{{ props.title }}</h2>
         <div class="devItem-content">
-            <div class="content-value" v-if="props.title == '设备总数'">
+            <div class="content-cheijan" v-if="props.title == '设备总数'">
-                <h2>{{ value.total }}台</h2>
+                <h3>{{ value.total }}台</h3>
             </div>
-            <div class="content-value-cheijan " v-else>
+            <div class="content-value-cheijan" v-else>
-                <el-row>
+                <div class="chejian-online on-status">{{ value.onLine }} <div class="mt10">在线</div>
-                    <el-col :span="7">
+                </div>
-                        <div class="chejian-online on-status">{{ value.onLine }} <div>在线</div>
+                <div class="chejian-total on-status">{{ value.total }}<div class="mt10">总数</div>
-                        </div>
+                </div>
-                    </el-col>
-                    <el-col :span="17"></el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="17"></el-col>
-                    <el-col :span="7">
-                        <div class="chejian-offline on-status">{{ value.total - value.onLine }}<div>离线</div>
-                        </div>
-                    </el-col>
-                </el-row>
             </div>
         </div>
     </div>
@@ -52,8 +42,9 @@ const props = defineProps({
 <style scoped>
 .devItem-box h2 {
     color: #fff;
-    font-size: 18px;
+    font-size: 20px;
     padding-left: 20px;
+    font-weight: bold;
     text-align: left;
 }
 
@@ -76,41 +67,70 @@ const props = defineProps({
     justify-content: center;
     align-items: center;
     border-bottom: 2px solid;
-    border-image: linear-gradient(to right, #00D0FE, #2969E8) 1;
+    border-image: linear-gradient(to right, #01617A, #173C85) 1;
 
 }
 
 .on-status {
     width: 50px;
-    font-size: 25px;
+    font-size: 24px;
 }
 
 .chejian-online {
-    color: #7CFFB2;
+    position: relative;
+    left: 15%;
+    color: #77FDAB;
 }
 
-.chejian-offline {
+.chejian-total {
-    color: #4992FF;
+    position: relative;
+    left: 55%;
+    bottom: 15%;
+    color: #20AEC5;
 }
 
+.content-cheijan {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 70%;
+    height: 100%;
+    border-bottom: 2px solid;
+    border-image: linear-gradient(to right, #01617A, #173C85) 1;
+}
 .content-value-cheijan {
     width: 70%;
     height: 100%;
     border-bottom: 2px solid;
-    border-image: linear-gradient(to right, #00D0FE, #2969E8) 1;
+    border-image: linear-gradient(to right, #01617A, #173C85) 1;
 }
 
 .content-value-cheijan::after {
     content: '';
     display: block;
-    border-bottom: 2px dashed #2969E8;
+    border-bottom: 2px dashed #20AEC5;
     transform: rotate(-45deg);
-    margin-top: -40%;
+    margin-top: -47%;
 }
 
-.content-value>h2 {
+.content-cheijan>h3 {
+    text-align: center;
     display: block;
-    margin-top: 20px;
+    font-weight: bold;
     font-size: 50px;
-    color: #64A1FC;
+    color: #20AEC5;
-}</style>
+}
+
+.content-cheijan>div {
+    position: relative;
+    top: 30%;
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    color: #fff;
+}
+
+.mt10 {
+    margin-top: 10px;
+}
+</style>

src/views/Mechanics/components/devStatusTip.vue

@@ -8,129 +8,122 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-    <div style="height: 100%; width: 100%">
+  <div style="height: 100%; width: 100%">
-      <h2 class="components-header">{{title}}</h2>
+    <h2 class="components-header">{{ title }}</h2>
-      <div class="components-content" :key="keynum">
+    <div class="components-content" :key="keynum">
-        <swiper-container
+      <swiper-container :slidesPerView="props.per_view" :loop="true" :spaceBetween="0" direction="vertical" :autoplay="{
-          :slidesPerView="per_view"
+        delay: 3000,
-          :loop="true"
+        disableOnInteraction: false,
-          :spaceBetween="0"
+      }" autoHeight=true observer=true observeParents=true @progress="onProgress" :loopAdditionalSlides="1" @slidechange="onSlideChange">
-          direction="vertical"
+        <swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
-          :autoplay="{
+          <div class="itemclass">
-            delay: 3000,
+            <el-row :gutter="5" class="row-flex">
-            disableOnInteraction: false,
+              <el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
-          }"
+                {{ index + 1 }}
-          autoHeight=true
+              </el-col>
-          observer=true
+              <el-col :span="18" class="col-flex"
-          observeParents=true
+                style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
-          @progress="onProgress"
+                <p><span>{{ label.name }} ：</span><span>{{ res.name }}</span></p>
-          @slidechange="onSlideChange"
+                <p style="margin-top: 10px 0;">
-        >
+                  <span>{{ label.date }}：</span><span>{{ res.date }}</span> &nbsp;
-          <swiper-slide v-for="(res, index) in props.tipList" :key="index">
+                  <span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
-            <div class="itemclass">
+                </p>
-                <el-row :gutter="5" class="row-flex">
+              </el-col>
-                  <el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
+              <el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;" :style="{color:compare[res.status]?compare[res.status]:'red'}"> {{res.status}} </el-col>
-                    {{ index + 1 }}
+            </el-row>
-                  </el-col>
+          </div>
-                  <el-col :span="18"  class="col-flex" style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;"> 
+        </swiper-slide>
-                  <p><span>设备名称：</span><span>{{ res.label }}</span></p>
+      </swiper-container>
-                  <p><span>保养日期：</span><span>{{ res.on }}</span> &nbsp; <span>保养时长：</span><span>{{ res.on }}</span> </p>
-                  </el-col>
-                  <el-col :span="4" class="col-flex" style="font-size: 25px; color: red;"> 未进行 </el-col>
-                </el-row>
-            </div>
-          </swiper-slide>
-        </swiper-container>
-      </div>
     </div>
-  </template>
+  </div>
+</template>
   
-  <script setup lang="ts">
+<script setup lang="ts">
-  import { reactive, ref, watch } from "vue";
+import { reactive, ref, watch } from "vue";
-  import { register } from "swiper/element/bundle";
+import { register } from "swiper/element/bundle";
-  import { useI18n } from "vue-i18n";
+import { useI18n } from "vue-i18n";
-  let { t } = useI18n();
+let { t } = useI18n();
-  register();
+register();
-  const props = defineProps({
+const props:any = defineProps({
-    title: {
+  title: {
-      type: String,
+    type: String,
-      default: "",
+    default: "",
-    },
+  },
-    tipList: {
+  tipList: {
-      type: Array,
+    type: Array,
-      default: [],
+    default: [{name:'',date:'',duration:'',status:''}],
-    },
+  },
-  });
+  label: {
-  let per_view = ref(5);
+    type: Object,
-  let useSwiper: any = ref(null);
+    default: { name: "设备名称", date: "保养日期", duration: "保养时长"}
-  let swiperRef = ref(null);
+  },
-  let listVal = ref([]);
+  per_view: {
-  let keynum = ref(0);
+    type: Number,
-  // space-between:幻灯片间距
+    default: 5,
-  //             slides-per-view:每个视图幻灯片数量
+  },
-  //             initialSlide：初始幻灯片索引
+});
-  //             height:框高,
+let compare = {
-  //             direction:滑动方向
+  '进行中':'#83C710',
-  //             autoplay：{
+  '未开始':'#E44610',
-  //                 delay：时间
+  '未进行':'#E54711',
-  //                 disableOnInteraction：禁止交互
+  '故障':'#DA0F10',
-  //             }
+  '维修中':'#83C710',
+}
+let useSwiper: any = ref(null);
+let swiperRef = ref(null);
+let listVal = ref([]);
+let keynum = ref(0);
+watch(
+  () => props.tipList,
+  (val) => {
+    keynum.value++;
+  },
+  { deep: true }
+);
+
+const onProgress = (e) => { };
+
+const onSlideChange = (e) => { };
+</script>
   
-  // let swiperConfig= reactive({
+<style scoped>
-  //     perView:3,
+.components-header {
-  //     initialSlide:1,
+  width: 100%;
-  //     loop:true,
+  text-align: center;
-  //     spaceBetween:0,
+  color: #fff;
-  //     swiperHeight:200,
+  font-size: 20px;
-  //     direction:'vertical',
+  margin-bottom: 10px;
-  //     autoplay:{ delay: 3000,disableOnInteraction: false,height:200}
+}
-  // })
+
-  
+.components-content {
-  watch(
+  height: 90%;
-    () => props.tipList,
+  width: 100%;
-    (val) => {
+}
-      keynum.value++;
+
-    },
+.itemclass {
-    { deep: true }
+  display: flex;
-  );
+  height: 100%;
-  
+  width: 100%;
-  const onProgress = (e) => {};
+  align-items: center;
-  
+  border-bottom: #0545a1 1px solid;
-  const onSlideChange = (e) => {};
+}
-  </script>
+
-  
+.row-flex {
-  <style scoped>
+  width: 100%;
-  .components-header {
+  height: 100%;
-    width: 100%;
+}
-    text-align: center;
+
-    color: #fff;
+.col-flex {
-    font-size: 20px;
+  display: flex;
-    margin-bottom: 10px;
+  justify-content: center;
-  }
+  align-items: center;
-  .components-content {
+}
-    height: 90%;
+
-    width: 100%;
+.swiper,
-  }
+swiper-container {
-  .itemclass {
+  width: 100%;
-    display: flex;
+  height: 100%;
-    height: 100%;
+  display: inline-block !important;
-    width: 100%;
+}
-    align-items: center;
+</style>
-    border-bottom: #0545a1 1px solid;
-  }
-  .row-flex{
-      width: 100%;
-      height: 100%;
-  }
-  .col-flex{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-  }
-  .swiper,swiper-container {
-    width: 100%;
-    height: 100%;
-    display: inline-block !important;
-  }
-  </style>
   

src/views/Mechanics/components/ringChart.vue

@@ -19,13 +19,14 @@ let {t} = useI18n();
 let ringRef = ref();
 let ringChart = null;
 const prop = defineProps({
-    data: []
+    data: [],
+    total: Number
 })
 const init = () => {
     ringChart = proxy.$echarts.init(ringRef.value, 'dark')
     let option = {
         title: {
-            text: t('messages.DevType'),
+            text: t('messages.设备状态总览'),
             show: true,
             textStyle: {
                 color: "#fff",
@@ -38,28 +39,37 @@ const init = () => {
         },
         legend: {
             type: "scroll",
-            bottom: "5%",
+            top: "10%",
             left: "center",
+            textStyle: {
+                color: "#fff",
+                fontSize: 16,
+            },
         },
         series: [
             {
                 name: "",
                 type: "pie",
-                radius: ["20%", "50%"],
+                radius: ["20%", "70%"],
                 center: ["50%", "45%"],
                 avoidLabelOverlap: false,
                 itemStyle: {
                     borderRadius: 5,
                     // borderColor: '#fff',
                     borderWidth: 2,
+                    
                 },
                 label: {
                     show: true,
-                    formatter: "{b}: {c}",
+                    formatter(params) {
+                        return `${params.name} \n${(params.value / prop.total * 100).toFixed(2)}%`
+                    },
+                    fontSize:20
                 },
                 labelLine: {
                     show: true,
                 },
+                top:'20%',
                 data: prop.data,
             },
         ],

src/views/Mechanics/components/scrollBoard.vue

@@ -9,7 +9,7 @@
 -->
 <template>
     <div class="box">
-        <div class="box-title">{{t('messages.LegionDevList')}}</div>
+        <div class="box-title">{{t('messages.机械分厂设备列表')}}</div>
         <div class="box-body">
             <dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave" :style="{
                         width: '100%',
@@ -37,7 +37,6 @@ let tipcontent = ref(null)
 let visible = ref(false)
 //存储弹窗dom
 let triggerRef = ref(null)
-
 /**
  * @函数功能: 鼠标移入组件方法
  * @param {*} value 
@@ -76,16 +75,16 @@ const dvmouseleave = () => {
 
 .box-title {
     width: 100%;
-    padding: 10px;
     font-size: 20px;
+    margin: 5px 0 10px 0;
     color: #fff;
     text-align: center;
     font-weight: bold;
 }
 
 .box-body {
-    width: 100%;
+    width: 100%;    
-    height: 90%;
+    flex: 1;
     display: flex;
     justify-content: space-around;
     align-items: center;

src/views/Mechanics/indexNew.vue

@@ -26,7 +26,8 @@
           <div style="width: 100%; height: 28%;">
             <border13>
               <div style="width: 98%;height: 100%;">
-                <devFaultTip :title="'设备故障提醒'" :tipList="devFaultTipData"></devFaultTip>
+                <devStatusTip :title="'设备故障提醒'" :tipList="faultList"
+                  :label='{ name: "设备名称", date: "维修日期", duration: "维修时长" }' :per_view="3"></devStatusTip>
               </div>
             </border13>
           </div>
@@ -44,13 +45,14 @@
         <el-col :span="7" class="flex-left">
           <div style="width: 100%; height: 48%;">
             <border13>
-              <ringChart :data="ringData"></ringChart>
+              <ringChart :data="ringData" :total="facTotal.total"></ringChart>
             </border13>
           </div>
           <div style="width: 100%; height: 48%;">
             <border13>
               <div style="width: 100%;height: 100%;">
-                <devStatusTip :title="'设备保养提醒'" :tipList="devStatusTipData"></devStatusTip>
+                <devStatusTip :title="'设备保养提醒'" :tipList="upkeepList"
+                  :label='{ name: "设备名称", date: "保养日期", duration: "保养时长" }' :per_view="5"></devStatusTip>
               </div>
             </border13>
           </div>
@@ -65,7 +67,6 @@ import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
 import header2 from "@/components/headerBox/header2.vue";
 import border13 from '@/components/border/Border13.vue'
 import DevOverview from "./components/DevOverview.vue";
-import devFaultTip from "./components/devFaultTip.vue";
 import devStatusTip from "./components/devStatusTip.vue";
 import ringChart from "./components/ringChart.vue";
 import scrollBoard from "./components/scrollBoard.vue";
@@ -73,7 +74,7 @@ import gateway from "./components/gateway.vue";
 import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { ElRow, ElCol } from "element-plus";
 import { useMechanicsStore } from "@/store/module/Mechanics";
-import { gatewayOfMachineryFactory, gatcountsOfMachineryFactory, reqDeviceTotelListMF, reqDeviceTotelStatusMF } from "@/http/Mechanics";
+import { gatewayOfMachineryFactory, gatcountsOfMachineryFactory, reqDeviceTotelListMF, reqDeviceTotelStatusMF, reqDeviceRemind } from "@/http/Mechanics";
 import { useI18n } from "vue-i18n";
 let { t } = useI18n();
 const store = useMechanicsStore();
@@ -152,14 +153,20 @@ async function reqDeviceTotelListMFfun() {
   let result: any = await reqDeviceTotelListMF()
 
   if (result.code == 200) {
+    let compare = {
+      H_OFF: '待机',
+      H_ON: '工作',
+      H_IDLE: '停机',
+      H_STOP: '急停',
+    }
     scrollBoardConfig.data = result.data.map((item, index) => {
       return [
         index + 1,
         item.name,
         item.dept,
-        item.status == 'false' ? '离线' : '在线',
+        compare[item.status]? compare[item.status] : '停机',
-        item.activation+'%',
+        item.activation + '%',
-        item.failure+'%'
+        item.failure + '%'
       ]
     })
   }
@@ -183,43 +190,32 @@ async function getDeviceTotelStatusMF() {
     ]
   }
 }
+let faultList = ref([]); //故障列表
+let upkeepList = ref([]); //保养列表
+//获取设备提醒 保养及故障
+async function getDeviceRemind() {
+  let result: any = await reqDeviceRemind()
+  if (result.code == 200) {
+    faultList.value = result.data.fault
+    upkeepList.value = result.data.upkeep
+  }
+}
 
 
 onMounted(() => {
   // let Timedombox=Timedom.value
   window.document.title = t("messages.Mechanics");
-  setTimeout(() => {
-    devFaultTipData.value = [
-      { label: '111111', devName: '富怡精密绣花机', status: '故障' },
-      { label: '222222', devName: '富怡精密绣花机', status: '故障' },
-      { label: '333333', devName: '富怡精密绣花机', status: '故障' },
-      { label: '444444', devName: '富怡精密绣花机', status: '故障' },
-      { label: '555555', devName: '富怡精密绣花机', status: '故障' },
-      { label: '666666', devName: '富怡精密绣花机', status: '故障' },
-      { label: '777777', devName: '富怡精密绣花机', status: '故障' }]
-    devStatusTipData.value = [{ label: '111111', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '222222', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '333333', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '444444', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '555555', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '666666', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '777777', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 }, { label: '111111', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '222222', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '333333', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '444444', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '555555', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '666666', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
-    { label: '777777', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 }]
-  }, 1000)
   devNumTimer = setInterval(() => {
     getDeviceTotelStatusMF()
-  }, 1000*60)
+  }, 1000 * 60)
   gatewayOfMachineryFactoryfun()
   // gatcountsOfMachineryFactoryfun()
   //获取机械分厂设备总数
   getDeviceTotelStatusMF()
   //获取机械分厂设备列表
   reqDeviceTotelListMFfun()
+  //获取设备提醒 保养及故障
+  getDeviceRemind()
   connectWebsocket(null, null, getWebsocket, errWebsocket);
 });