From bd6a2dd4b551fadef55c54958489907fe1835f92 Mon Sep 17 00:00:00 2001
From: 15133876896-BGG25 <2233720980@qq.com>
Date: Tue, 13 Jun 2023 18:07:18 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=9C=BA=E6=A2=B0=E5=88=86=E5=8E=82=E5=A4=A7?=
 =?UTF-8?q?=E5=B1=8F=E5=8E=9F=E5=9E=8B=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/module/Mechanics.ts                 |   8 +-
 src/views/Mechanics/components/gateway.vue    | 163 ++++++++++
 .../Mechanics/components/scrollBoard.vue      | 104 ++++++
 src/views/Mechanics/indexNew.vue              | 299 ++++++++++++++++++
 4 files changed, 572 insertions(+), 2 deletions(-)
 create mode 100644 src/views/Mechanics/components/gateway.vue
 create mode 100644 src/views/Mechanics/components/scrollBoard.vue
 create mode 100644 src/views/Mechanics/indexNew.vue

diff --git a/src/store/module/Mechanics.ts b/src/store/module/Mechanics.ts
index e25c4f7..1ff3c54 100644
--- a/src/store/module/Mechanics.ts
+++ b/src/store/module/Mechanics.ts
@@ -1,5 +1,5 @@
 /*
- * @FilePath: \wwwd:\code\screenFront\src\store\module\Mechanics.ts
+ * @FilePath: \code\gitscreenFront\src\store\module\Mechanics.ts
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-06 15:58:13
@@ -102,7 +102,11 @@ export const useMechanicsStore = defineStore(Names.Mechanics, {
   //需要使用return将数据抛出
   //getters内可相互使用计算结果
   //使用时可直接放入标签内<div>Index.方法()</div>
-  getters: {},
+  getters: {
+    getmechanicsData(state){
+      return state.mechanicsData
+    }
+  },
   //methods 可同步/异步，提交state
   //actions内获取state数据使用this
   // 使用方式
diff --git a/src/views/Mechanics/components/gateway.vue b/src/views/Mechanics/components/gateway.vue
new file mode 100644
index 0000000..a85d868
--- /dev/null
+++ b/src/views/Mechanics/components/gateway.vue
@@ -0,0 +1,163 @@
+<!--
+ * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\gateway.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-16 11:51:32
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+  <div class="box" :style="{ width: '100%', height: '100%' }">
+
+    <div class="title-box" >
+      <h2>{{ props.title }}</h2>
+      <div class="colorTip">
+        <div><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i> {{t('messages.onLine')}}</div>
+        <div style="color:#e43961"><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-red"></i>
+          {{t('messages.offline')}}</div>
+      </div>
+    </div>
+    <ul class="gatewaystatus">
+      <li v-for="item in props.data" @click="clickBotton(item)">
+        <i :class="JSON.parse(item.gateway)
+            ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online'
+            : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline'
+          "></i>
+        <h2 class="titlesize-name">{{ item.title+'车间' }}</h2>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance, onMounted, reactive, ref } from "vue";
+import border13 from "@/components/border/Border13.vue";
+import { useI18n } from 'vue-i18n'
+import { useMechanicsStore } from "@/store/module/Mechanics";
+import { useRouter } from "vue-router";
+const router=useRouter()
+const store = useMechanicsStore();
+let {t} = useI18n();
+let props = defineProps<{
+  title: string;
+  data: any
+}>();
+const clickBotton=(item:any)=>{
+    store.changePage(item.index)
+    router.push({
+    name:'Mechanicschild',
+    params:{
+      id:item.index
+    }
+})
+  }
+onMounted(() => { });
+</script>
+
+<style scoped>
+h2 {
+  color: #fff;
+  font-size: 20px;
+  flex: 1;
+}
+
+p {
+  margin: 0 10px 0 10px;
+  color: #fff;
+  font-weight: 800;
+  font-size: 2rem;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0;
+}
+
+.gatewaystatus {
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gatewaystatus>li {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.gatewaystatus>li {
+  flex-direction: column;
+}
+
+.noonline {
+  font-size: 5rem;
+  color: rgb(228, 57, 97);
+  position: relative;
+  /* top: -20px; */
+}
+
+.online {
+  font-size: 5rem;
+  color: rgb(32, 174, 197);
+  position: relative;
+  /* top: -20px; */
+}
+
+.colorTip {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 0;
+}
+
+.colorTip span {
+  margin-right: 1rem;
+}
+
+.colorTip>div {
+  margin-right: 1rem;
+  font-size: 1rem;
+}
+
+.colorTip .icon-red {
+  display: inline-block;
+  /* background-color: #e43961; */
+  /* border-radius: 1rem; */
+  color: #e43961;
+  width: 1rem;
+  height: 1rem;
+}
+
+.colorTip .icon-blue {
+  display: inline-block;
+  /* background-color: #20aec5; */
+  /* border-radius: 1rem; */
+  color: #20aec5;
+  width: 1rem;
+  height: 1rem;
+}
+
+.titlesize-name {
+  font-size: 1.5rem;
+}
+
+.title-box {
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+</style>
diff --git a/src/views/Mechanics/components/scrollBoard.vue b/src/views/Mechanics/components/scrollBoard.vue
new file mode 100644
index 0000000..0677eb0
--- /dev/null
+++ b/src/views/Mechanics/components/scrollBoard.vue
@@ -0,0 +1,104 @@
+<!--
+ * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\scrollBoard.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-06-13 08:33:37
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+    <div class="box">
+        <div class="box-title">{{t('messages.LegionDevList')}}</div>
+        <div class="box-body">
+            <dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave" :style="{
+                        width: '100%',
+                        height: '100%',
+                    }" />
+            <el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click" popper-class="tooltip-class"
+                virtual-triggering :virtual-ref="triggerRef" />
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { getCurrentInstance, onMounted, reactive, ref } from "vue";
+import { devListType } from "@/type/InPlantProducts";
+import { useRouter } from "vue-router"
+import { useI18n } from 'vue-i18n'
+let {t} = useI18n();
+const prop = defineProps({
+    config: Object,
+})
+const router = useRouter()
+//弹窗文本
+let tipcontent = ref(null)
+//弹窗显示与隐藏
+let visible = ref(false)
+//存储弹窗dom
+let triggerRef = ref(null)
+
+/**
+ * @函数功能: 鼠标移入组件方法
+ * @param {*} value 
+ * @出口参数: 
+ * @函数备注: 
+ */
+const dvMouseover = (value) => {
+    if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
+        triggerRef.value = value.toElement
+        tipcontent.value = value.toElement.innerText
+        visible.value = true
+    }
+
+};
+/**
+ * @函数功能:  鼠标移出组件方法
+ * @出口参数: 
+ * @函数备注: 
+ */
+const dvmouseleave = () => {
+    triggerRef.value = null
+    tipcontent.value = null
+    visible.value = false
+};
+
+</script>
+
+<style scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.box-title {
+    width: 100%;
+    padding: 10px;
+    font-size: 20px;
+    color: #fff;
+    text-align: center;
+    font-weight: bold;
+}
+
+.box-body {
+    width: 100%;
+    height: 90%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+:deep(.dv-scroll-board .rows .ceil) {
+    overflow: auto;
+    white-space: pre-wrap;
+    text-overflow: none
+}
+</style>
+<style>
+.el-popper.tooltip-class{
+    color: #fff !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Mechanics/indexNew.vue b/src/views/Mechanics/indexNew.vue
new file mode 100644
index 0000000..507a3a6
--- /dev/null
+++ b/src/views/Mechanics/indexNew.vue
@@ -0,0 +1,299 @@
+<template>
+  <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>
+      </div>
+    </div>
+
+    <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>             
+          </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 style="width: 100%; height: 48%;">
+          <border13>
+            <div  style="width: 100%;height: 100%;">
+              <devStatusTip :title="'设备状态累积时长'" :tipList="devStatusTipData"></devStatusTip>
+            </div>
+          </border13>
+        </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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";
+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 { useI18n } from "vue-i18n";
+let { t } = useI18n();
+const store = useMechanicsStore();
+
+let Acontent = ref();
+let headerref = 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: []
+})
+let gatewayData=ref([])
+
+
+function getWebsocket(val) {
+  headerref.value.HeadergetWebsocket(val);
+  try {
+    let data = JSON.parse(val);
+
+    if (data.type == "CountsOfMachineryFactoryInStatusTime") {
+      store.changedevstatus(data.msg);
+    }
+    if (data.type == "gatewayMF") {
+      store.changegateway(data.msg);
+      gatewayData.value=store.getmechanicsData
+      store.changegatewaynum(data.msg);
+      // store.changePM(data.msg)
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+function errWebsocket(val) {
+  headerref.value ? headerref.value.HeadererrWebsocket(val) : "";
+  // console.log(val);
+}
+async function gatewayOfMachineryFactoryfun(){
+    let result:any = await gatewayOfMachineryFactory()
+   
+    if(result.code==200){
+      store.changegateway(result.data)
+      gatewayData.value=store.getmechanicsData
+      
+    }
+  }
+  async function gatcountsOfMachineryFactoryfun(){
+    let result:any = await gatcountsOfMachineryFactory()
+   
+    if(result.code==200){
+      store.changegatewaynum(result.data)
+    }
+  }
+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)
+
+  gatewayOfMachineryFactoryfun()
+  gatcountsOfMachineryFactoryfun()
+  connectWebsocket(null, null, getWebsocket, errWebsocket);
+});
+
+onUnmounted(() => {
+  closeWebsocket();
+});
+</script>
+
+<style module>
+.container {
+  height: 1080px;
+  width: 1920px;
+  color: #20aec5;
+  background-color: #100c2a;
+}
+</style>
+
+<style scoped>
+.title {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.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-content{
+display: flex;
+flex-wrap: wrap;
+height: 98%;
+width: 100%;
+}
+ .layout {
+    height: 100%;
+}
+.flex-left{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+.content {
+  width: 100%;
+  --header: 100px;
+  height: calc(1080px - var(--header));
+}
+</style>
+
+<style>
+body {
+  /* --content:calc(100vh - var(--header)) */
+  overflow: hidden !important;
+  -ms-overflow-style: none; /* IE + Edge */
+  scrollbar-width: none; /* Firefox */
+}
+::-webkit-scrollbar {
+  display: none;
+}
+</style>