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

2023-06-15 14:57:40 +08:00 · 2023-06-15 14:57:40 +08:00 · 2483f21a97
commit 2483f21a97
parent c0b8b10db0
8 changed files with 222 additions and 195 deletions
--- a/src/http/Mechanics/index.ts
+++ b/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')
+}
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@ -273,5 +273,7 @@ export default {
        '历史数据':'Historical Data',
        '环境 实时监测系统':'环境 实时监测系统',
        '传感器监测走势图':'传感器监测走势图',
+        '机械分厂设备列表':'机械分厂设备列表',        
+        '设备状态总览':'设备状态总览',
      }
  }
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@ -273,5 +273,7 @@ export default {
        '历史数据':'历史数据',
        '环境 实时监测系统':'环境 实时监测系统',
        '传感器监测走势图':'传感器监测走势图',
+        '机械分厂设备列表':'机械分厂设备列表',
+        '设备状态总览':'设备状态总览',
      }
  }
--- a/src/views/Mechanics/components/DevOverview.vue
+++ b/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 == '设备总数'">
-                <h2>{{ value.total }}台</h2>
+            <div class="content-cheijan" v-if="props.title == '设备总数'">
+                <h3>{{ value.total }}台</h3>
            </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 class="content-value-cheijan" v-else>
+                <div class="chejian-online on-status">{{ value.onLine }} <div class="mt10">在线</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 class="chejian-total on-status">{{ value.total }}<div class="mt10">总数</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 {
-    color: #4992FF;
+.chejian-total {
+    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;
-}</style>
+    color: #20AEC5;
+}
+
+.content-cheijan>div {
+    position: relative;
+    top: 30%;
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    color: #fff;
+}
+
+.mt10 {
+    margin-top: 10px;
+}
+</style>
--- a/src/views/Mechanics/components/devStatusTip.vue
+++ b/src/views/Mechanics/components/devStatusTip.vue
@ -9,128 +9,121 @@
 -->
 <template>
  <div style="height: 100%; width: 100%">
-      <h2 class="components-header">{{title}}</h2>
+    <h2 class="components-header">{{ title }}</h2>
    <div class="components-content" :key="keynum">
-        <swiper-container
-          :slidesPerView="per_view"
-          :loop="true"
-          :spaceBetween="0"
-          direction="vertical"
-          :autoplay="{
+      <swiper-container :slidesPerView="props.per_view" :loop="true" :spaceBetween="0" direction="vertical" :autoplay="{
        delay: 3000,
        disableOnInteraction: false,
-          }"
-          autoHeight=true
-          observer=true
-          observeParents=true
-          @progress="onProgress"
-          @slidechange="onSlideChange"
-        >
-          <swiper-slide v-for="(res, index) in props.tipList" :key="index">
+      }" autoHeight=true observer=true observeParents=true @progress="onProgress" :loopAdditionalSlides="1" @slidechange="onSlideChange">
+        <swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
          <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;"> 
-                  <p><span>设备名称：</span><span>{{ res.label }}</span></p>
-                  <p><span>保养日期：</span><span>{{ res.on }}</span> &nbsp; <span>保养时长：</span><span>{{ res.on }}</span> </p>
+              <el-col :span="18" class="col-flex"
+                style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
+                <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>
      </swiper-container>
    </div>
  </div>
-  </template>
+</template>
  
-  <script setup lang="ts">
-  import { reactive, ref, watch } from "vue";
-  import { register } from "swiper/element/bundle";
-  import { useI18n } from "vue-i18n";
-  let { t } = useI18n();
-  register();
-  const props = defineProps({
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import { register } from "swiper/element/bundle";
+import { useI18n } from "vue-i18n";
+let { t } = useI18n();
+register();
+const props:any = defineProps({
  title: {
    type: String,
    default: "",
  },
  tipList: {
    type: Array,
-      default: [],
+    default: [{name:'',date:'',duration:'',status:''}],
  },
-  });
-  let per_view = ref(5);
-  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(
+  label: {
+    type: Object,
+    default: { name: "设备名称", date: "保养日期", duration: "保养时长"}
+  },
+  per_view: {
+    type: Number,
+    default: 5,
+  },
+});
+let compare = {
+  '进行中':'#83C710',
+  '未开始':'#E44610',
+  '未进行':'#E54711',
+  '故障':'#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 onProgress = (e) => { };

-  const onSlideChange = (e) => {};
-  </script>
+const onSlideChange = (e) => { };
+</script>
  
-  <style scoped>
-  .components-header {
+<style scoped>
+.components-header {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
-  }
-  .components-content {
+}
+
+.components-content {
  height: 90%;
  width: 100%;
-  }
-  .itemclass {
+}
+
+.itemclass {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  border-bottom: #0545a1 1px solid;
-  }
-  .row-flex{
+}
+
+.row-flex {
  width: 100%;
  height: 100%;
-  }
-  .col-flex{
+}
+
+.col-flex {
  display: flex;
  justify-content: center;
  align-items: center;
-  }
-  .swiper,swiper-container {
+}
+
+.swiper,
+swiper-container {
  width: 100%;
  height: 100%;
  display: inline-block !important;
-  }
-  </style>
+}
+</style>
  
--- a/src/views/Mechanics/components/ringChart.vue
+++ b/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,
            },
        ],
--- a/src/views/Mechanics/components/scrollBoard.vue
+++ b/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;
--- a/src/views/Mechanics/indexNew.vue
+++ b/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' ? '离线' : '在线',
-        item.activation+'%',
-        item.failure+'%'
+        compare[item.status]? compare[item.status] : '停机',
+        item.activation + '%',
+        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);
 });