机械分厂设备新接口调试

2023-06-14 15:52:17 +08:00 · 2023-06-14 15:52:17 +08:00 · 8884e04ff8
commit 8884e04ff8
parent 3f5189d292
6 changed files with 264 additions and 211 deletions
--- a/src/http/Mechanics/index.ts
+++ b/src/http/Mechanics/index.ts
@ -29,3 +29,15 @@ export function gatcountsOfMachineryFactoryInStatusTime(){
 export function gatdeviceStatusInfoMF(data:any){
    return get('/device/deviceStatusInfoMF',data)
 }
+
+
+/**newIndex */
+//设备列表
+export function reqDeviceTotelListMF(){
+    return get('/device/deviceTotelListMF')
+}
+
+//状态数量
+export function reqDeviceTotelStatusMF() {
+    return get('/device/deviceTotelStatusMF')
+}
--- a/src/views/Mechanics/components/DevOverview.vue
+++ b/src/views/Mechanics/components/DevOverview.vue
@ -8,59 +8,68 @@
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-  <div class="devItem-box">
-    <h2>{{props.title}}</h2>
-    <div class="devItem-content">
-        <div class="content-value" v-if="props.title=='设备总数'">
-                <h2>112台</h2>
-        </div>
-        <div class="content-value-cheijan " v-else>
-                <el-row style="margin-top: 20px;">
-                <el-col :span="7"> <div class="chejian-online on-status">15在线</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">15离线</div></el-col>
-            </el-row>
+    <div class="devItem-box">
+        <h2>{{ props.title }}</h2>
+        <div class="devItem-content">
+            <div class="content-value" v-if="props.title == '设备总数'">
+                <h2>{{ value.total }}台</h2>
+            </div>
+            <div class="content-value-cheijan " v-else>
+                <el-row>
+                    <el-col :span="7">
+                        <div class="chejian-online on-status">{{ value.onLine }} <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>
-  </div>
 </template>

 <script setup lang="ts">
-import {ref} from "vue"
+import { ref } from "vue"
 // props.value数组中下标：0为全部，1为在线，2为离线
-const props=defineProps({
-    title:{
-        type:String,
-        default:''
+const props = defineProps({
+    title: {
+        type: String,
+        default: ''
    },
-    value:{
-        type:Array,
-        default:[]
+    value: {
+        type: Object,
+        default: { onLine: 0, total: 0 }
    }
 })
 </script>

 <style scoped>
-.devItem-box h2{
-color: #fff;
-font-size: 18px;
-padding-left: 20px;
-text-align: left;
+.devItem-box h2 {
+    color: #fff;
+    font-size: 18px;
+    padding-left: 20px;
+    text-align: left;
 }
-.devItem-box{
+
+.devItem-box {
    width: 48%;
    height: 30%;
 }
-.devItem-content{
+
+.devItem-content {
    width: 100%;
-    height: 90%;
+    height: 75%;
    display: flex;
    justify-content: flex-end;
 }
-.content-value{
+
+.content-value {
    width: 70%;
    height: 100%;
    display: flex;
@ -70,33 +79,38 @@ text-align: left;
    border-image: linear-gradient(to right, #00D0FE, #2969E8) 1;

 }
-.on-status{
+
+.on-status {
    width: 50px;
    font-size: 25px;
 }
-.chejian-online{
-color: #7CFFB2;
+
+.chejian-online {
+    color: #7CFFB2;
 }
-.chejian-offline{
-color: #4992FF;
+
+.chejian-offline {
+    color: #4992FF;
 }
-.content-value-cheijan{
+
+.content-value-cheijan {
    width: 70%;
    height: 100%;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #00D0FE, #2969E8) 1;
 }
-.content-value-cheijan::after{
-content: '';
-display: block;
-border-bottom: 2px dashed #2969E8;
-transform: rotate(-45deg);
-margin-top: -40%;
+
+.content-value-cheijan::after {
+    content: '';
+    display: block;
+    border-bottom: 2px dashed #2969E8;
+    transform: rotate(-45deg);
+    margin-top: -40%;
 }
-.content-value>h2{
+
+.content-value>h2 {
    display: block;
    margin-top: 20px;
    font-size: 50px;
    color: #64A1FC;
-}
-</style>
+}</style>
--- a/src/views/Mechanics/components/scrollBoard.vue
+++ b/src/views/Mechanics/components/scrollBoard.vue
@ -96,6 +96,9 @@ const dvmouseleave = () => {
    white-space: pre-wrap;
    text-overflow: none
 }
+:deep(.dv-scroll-board .rows .row-item) {
+    font-size: 16px;
+}
 </style>
 <style>
 .el-popper.tooltip-class{
--- a/src/views/Mechanics/indexNew.vue
+++ b/src/views/Mechanics/indexNew.vue
@ -2,15 +2,8 @@
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
-        <header2
-          ref="headerref"
-          :width="'100%'"
-          :height="'100px'"
-          :title="t('messages.Mechanics')"
-          :titleTip="[]"
-          :typeFun="['AbnormalData', 'time']"
-          :alarmType="['machinefactory']"
-        >
+        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.Mechanics')" :titleTip="[]"
+          :typeFun="['AbnormalData', 'time']" :alarmType="['machinefactory']">
        </header2>
      </div>
    </div>
@ -18,52 +11,49 @@
    <div class="content" ref="Acontent">
      <el-row class="layout" :gutter="20">
        <el-col :span="7" class="flex-left">
-        <div style="width: 100%; height: 68%;">
-          <border13>
-                <div style="width: 100%;height: 100%;">
-                  <h2 class="module-header">设备总览</h2> 
-                  <div class="module-content">
-                    <DevOverview :title="'设备总数'" :value="[112]"></DevOverview>
-                    <DevOverview :title="'车间1'" :value="[null,12,12]"></DevOverview>
-                    <DevOverview :title="'车间2'" :value="[null,12,12]"></DevOverview>
-                    <DevOverview :title="'车间3'" :value="[null,12,12]"></DevOverview>
-                    <DevOverview :title="'车间4'" :value="[null,12,12]"></DevOverview>
-                    <DevOverview :title="'车间5'" :value="[null,12,12]"></DevOverview>
-                  </div>
+          <div style="width: 100%; height: 68%;">
+            <border13>
+              <div style="width: 100%;height: 100%;">
+                <h2 class="module-header">设备总览</h2>
+                <div class="module-content">
+                  <DevOverview :title="'设备总数'" :value="{ onLine: facTotal.onLine, total: facTotal.total }"></DevOverview>
+                  <DevOverview :title="item.name" :value="{ onLine: item.onLine, total: item.total }"
+                    v-for="(item) in facList"></DevOverview>
                </div>
-          </border13>
-        </div>
-        <div style="width: 100%; height: 28%;">
-          <border13>
-            <div  style="width: 98%;height: 100%;">
-              <devFaultTip :title="'设备故障提醒'" :tipList="devFaultTipData"></devFaultTip>
-            </div>
-          </border13>
-        </div>
-      </el-col>
-        <el-col :span="10"  class="flex-left">
-        <div style="width: 100%; height: 18%;">
-          <gateway :title="'物联网关状态'" :data="gatewayData"></gateway>
-        </div>
-        <div style="width: 100%; height: 78%;">
-          <border13>
-            <scrollBoard :config="scrollBoardConfig"></scrollBoard>
-          </border13>
-        </div>
+              </div>
+            </border13>
+          </div>
+          <div style="width: 100%; height: 28%;">
+            <border13>
+              <div style="width: 98%;height: 100%;">
+                <devFaultTip :title="'设备故障提醒'" :tipList="devFaultTipData"></devFaultTip>
+              </div>
+            </border13>
+          </div>
+        </el-col>
+        <el-col :span="10" class="flex-left">
+          <div style="width: 100%; height: 18%;">
+            <gateway :title="'物联网关状态'" :data="gatewayData"></gateway>
+          </div>
+          <div style="width: 100%; height: 78%;">
+            <border13>
+              <scrollBoard :config="scrollBoardConfig"></scrollBoard>
+            </border13>
+          </div>
        </el-col>
        <el-col :span="7" class="flex-left">
          <div style="width: 100%; height: 48%;">
            <border13>
              <ringChart :data="ringData"></ringChart>
            </border13>
-        </div>
+          </div>
          <div style="width: 100%; height: 48%;">
-          <border13>
-            <div  style="width: 100%;height: 100%;">
-              <devStatusTip :title="'设备保养提醒'" :tipList="devStatusTipData"></devStatusTip>
-            </div>
-          </border13>
-        </div>
+            <border13>
+              <div style="width: 100%;height: 100%;">
+                <devStatusTip :title="'设备保养提醒'" :tipList="devStatusTipData"></devStatusTip>
+              </div>
+            </border13>
+          </div>
        </el-col>
      </el-row>
    </div>
@ -82,9 +72,8 @@ import scrollBoard from "./components/scrollBoard.vue";
 import gateway from "./components/gateway.vue";
 import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
 import { ElRow, ElCol } from "element-plus";
-import { gatcountsOfMachineryFactoryInStatusTime } from "@/http/Mechanics";
 import { useMechanicsStore } from "@/store/module/Mechanics";
-import { gatewayOfMachineryFactory,gatcountsOfMachineryFactory } from "@/http/Mechanics";
+import { gatewayOfMachineryFactory, gatcountsOfMachineryFactory, reqDeviceTotelListMF, reqDeviceTotelStatusMF } from "@/http/Mechanics";
 import { useI18n } from "vue-i18n";
 let { t } = useI18n();
 const store = useMechanicsStore();
@ -92,21 +81,29 @@ const store = useMechanicsStore();
 let Acontent = ref();
 let headerref = ref();

-let DevOverviewData=ref([])
-let devFaultTipData=ref([])
-let devStatusTipData=ref([])
-let ringData=ref([])
+let DevOverviewData = ref([])
+let devFaultTipData = ref([])
+let devStatusTipData = ref([])
+let ringData = ref([])
 let scrollBoardConfig = reactive({
-    header: ['序号', '机架号', '设备名称', '所属车间','设备状态','稼动率', '故障率'],
-    headerBGC: 'rgb(52, 105, 243)',
-    oddRowBGC: '#100c2a',
-    evenRowBGC: '#100c2a',
-    rowNum: 10,
-    columnWidth: [80, 170, 120, 120, 120, 120, 120],
-    align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'],
-    data: []
+  header: ['序号', '设备名称', '所属车间', '设备状态', '稼动率', '故障率'],
+  headerBGC: 'rgb(52, 105, 243)',
+  oddRowBGC: '#100c2a',
+  evenRowBGC: '#100c2a',
+  rowNum: 10,
+  columnWidth: [80, 290, 120, 120, 120, 120],
+  align: ['center', 'center', 'center', 'center', 'center', 'center'],
+  data: []
+})
+let gatewayData = ref([])
+//车间列表
+let facList = ref([])
+//机械分厂总数
+let facTotal = reactive({
+  total: 0,
+  onLine: 0,
+  offLine: 0
 })
-let gatewayData=ref([])


 function getWebsocket(val) {
@ -119,7 +116,7 @@ function getWebsocket(val) {
    }
    if (data.type == "gatewayMF") {
      store.changegateway(data.msg);
-      gatewayData.value=store.getmechanicsData
+      gatewayData.value = store.getmechanicsData
      store.changegatewaynum(data.msg);
      // store.changePM(data.msg)
    }
@ -131,93 +128,96 @@ function errWebsocket(val) {
  headerref.value ? headerref.value.HeadererrWebsocket(val) : "";
  // console.log(val);
 }
-async function gatewayOfMachineryFactoryfun(){
-    let result:any = await gatewayOfMachineryFactory()
+//获取机械分厂网关状态
+async function gatewayOfMachineryFactoryfun() {
+  let result: any = await gatewayOfMachineryFactory()

-    if(result.code==200){
-      store.changegateway(result.data)
-      gatewayData.value=store.getmechanicsData
+  if (result.code == 200) {
+    store.changegateway(result.data)
+    gatewayData.value = store.getmechanicsData

-    }
  }
-  async function gatcountsOfMachineryFactoryfun(){
-    let result:any = await gatcountsOfMachineryFactory()
+}
+// async function gatcountsOfMachineryFactoryfun() {
+//   let result: any = await gatcountsOfMachineryFactory()

-    if(result.code==200){
-      store.changegatewaynum(result.data)
-    }
+//   if (result.code == 200) {
+//     store.changegatewaynum(result.data)
+//   }
+// }
+
+//获取机械分厂设备列表
+async function reqDeviceTotelListMFfun() {
+  let result: any = await reqDeviceTotelListMF()
+
+  if (result.code == 200) {
+    scrollBoardConfig.data = result.data.map((item, index) => {
+      return [
+        index + 1,
+        item.name,
+        item.dept,
+        item.status == 'false' ? '离线' : '在线',
+        item.activation+'%',
+        item.failure+'%'
+      ]
+    })
  }
+}
+
+//获取机械分厂设备总数
+async function getDeviceTotelStatusMF() {
+  let result: any = await reqDeviceTotelStatusMF()
+
+  if (result.code == 200) {
+    facList.value = result.data.list
+
+    facTotal.total = result.data.total
+    facTotal.onLine = result.data.list.reduce((total, item) => {
+      return total + item.onLine
+    }, 0)
+    facTotal.offLine = facTotal.total - facTotal.onLine
+    ringData.value = [
+      { name: '在线', value: facTotal.onLine },
+      { name: '离线', value: facTotal.offLine }
+    ]
+  }
+}
+
+
 onMounted(() => {
  // let Timedombox=Timedom.value
  window.document.title = t("messages.Mechanics");
-  setTimeout(()=>{
-    DevOverviewData.value=[{title:'车间',value:[1,2,3]}]
-    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}]
-    ringData.value=[{
-      value:120,
-      name:'在线',
-    },
-    {
-      value:120,
-      name:'离线',
-    }]
-    
-    scrollBoardConfig.data=[[1,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [2,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [3,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [4,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [5,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [6,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [7,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [8,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [9,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [10,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [11,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [12,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [13,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [14,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [15,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [16,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
-    [17,111111,'富怡绣花机123145','机加车间','在线','95%','1%']]
-    // gatewayData.value=[{
-    //   name:'机加车间',
-    //   status:'false'
-    // },{
-    //   name:'焊接车间',
-    //   status:'false'
-    // },{
-    //   name:'大件车间',
-    //   status:'false'
-    // },{
-    //   name:'精饰车间',
-    //   status:'false'
-    // },{
-    //   name:'精加车间',
-    //   status:'false'
-    // },]
-  },1000)
+  setTimeout(() => {
+    DevOverviewData.value = [{ title: '车间', value: [1, 2, 3] }]
+    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)

  gatewayOfMachineryFactoryfun()
-  gatcountsOfMachineryFactoryfun()
+  // gatcountsOfMachineryFactoryfun()
+  //获取机械分厂设备总数
+  getDeviceTotelStatusMF()
+  //获取机械分厂设备列表
+  reqDeviceTotelListMFfun()
  connectWebsocket(null, null, getWebsocket, errWebsocket);
 });

@ -243,42 +243,50 @@ onUnmounted(() => {
  align-items: center;
  position: relative;
 }
-.title > h1 {
+
+.title>h1 {
  font-size: 30px;
  position: absolute;
  top: 10px;
 }
+
 .header {
  position: relative;
 }
+
 .header p {
  position: absolute;
  right: 50px;
  bottom: 20px;
  font-size: 20px;
 }
-.module-header{
- width: 100%;
- text-align: center;
- color: #fff;
- font-size: 20px;
- margin-bottom: 10px;
+
+.module-header {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 20px;
+  margin-bottom: 10px;
 }
-.module-content{
-display: flex;
-flex-wrap: wrap;
-height: 98%;
-width: 100%;
+
+.module-content {
+  display: flex;
+  flex-wrap: wrap;
+  height: 98%;
+  width: 100%;
 }
- .layout {
-    height: 100%;
+
+.layout {
+  height: 100%;
 }
-.flex-left{
+
+.flex-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
 }
+
 .content {
  width: 100%;
  --header: 100px;
@ -290,9 +298,12 @@ width: 100%;
 body {
  /* --content:calc(100vh - var(--header)) */
  overflow: hidden !important;
-  -ms-overflow-style: none; /* IE + Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  /* IE + Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
+
 ::-webkit-scrollbar {
  display: none;
 }
--- a/src/views/generalEnvironmentMechanical/components/humidity.vue
+++ b/src/views/generalEnvironmentMechanical/components/humidity.vue
@ -44,7 +44,7 @@ function init() {
      show: true,
      textStyle: {
        color: "#fff",
-        fontSize: 20,
+        fontSize: 18,
      },
      top: 5
    },
--- a/src/views/generalEnvironmentMechanical/components/pm.vue
+++ b/src/views/generalEnvironmentMechanical/components/pm.vue
@ -38,6 +38,19 @@ let errList = computed(() => {
    item.name = item.name.split('车间')[0]
    return item
  })
+  if (arr.length>0) {
+    //name去重
+    let nameArr = []
+    arr = arr.filter(item=>{
+      if (nameArr.indexOf(item.name)===-1) {
+        nameArr.push(item.name)
+        return true
+      }else{
+        return false
+      }
+    })
+
+  }
  return arr;
 })
 const borderColor = ["#E43961","#E43961"]