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

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>
-                <el-row>
+                <div class="chejian-online on-status">{{ value.onLine }} <div class="mt10">在线</div>
-                    <el-col :span="7">
-                        <div class="chejian-online on-status">{{ value.onLine }} <div>在线</div>
                 </div>
-                    </el-col>
+                <div class="chejian-total on-status">{{ value.total }}<div class="mt10">总数</div>
-                    <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

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

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: ["40%", "70%"],
                 center: ["50%", "45%"],
                 avoidLabelOverlap: false,
                 itemStyle: {
-                    borderRadius: 5,
+                    borderRadius: 10,
                     // 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,8 +75,8 @@ const dvmouseleave = () => {
 
 .box-title {
     width: 100%;
-    padding: 10px;
     font-size: 20px;
+    margin: 5px 0 10px 0;
     color: #fff;
     text-align: center;
     font-weight: bold;
@@ -85,7 +84,7 @@ const dvmouseleave = () => {
 
 .box-body {
     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,12 +153,18 @@ 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.failure + '%'
       ]
@@ -183,34 +190,21 @@ 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)
@@ -220,6 +214,8 @@ onMounted(() => {
   getDeviceTotelStatusMF()
   //获取机械分厂设备列表
   reqDeviceTotelListMFfun()
+  //获取设备提醒 保养及故障
+  getDeviceRemind()
   connectWebsocket(null, null, getWebsocket, errWebsocket);
 });