展会设备 update

src/http/cisma/index.ts

@@ -8,3 +8,6 @@ export function getCismaList(){
 export function getFiveList(){
     return get('/cisma/getFiveList')
 }
+export function getTopDevice(){
+    return get('/cisma/getTopDevice')
+}

src/store/module/MicroExhibition.ts

@@ -22,50 +22,40 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
       devlist: [],
       devnum: { all: 17, wait: 7, off: 3, on: 7 },
       caijian: {
-        'value': [				//'设备名称', '设备编码', '稼动率', '状态'   //0:停机 1:待机 2:工作 3:待机
+        'value': [],
-          ['全自动针梭两用铺布机', '1050910', '95%', '0'],
-          ['全自动9公分电脑裁床', '1190269', '80%', '1'],
-        ],
         'chart': {
-          xData: ['1050910', '1050269'],
+          xData: [],
-          series: [
+          series: []
-            {
-              name: '计划完成',
-              data: [120, 200],
-              type: 'bar',
-              barMaxWidth: 30,
-            },
-            {
-              name: '实际完成',
-              data: [130, 180],
-              type: 'bar',
-              barMaxWidth: 30,
-            }
-          ]
         }
       },
       tuoxie: {
-        'value': [				//'设备名称', '设备编码', '稼动率', '状态'   //0:停机 1:待机 2:工作 3:待机
+        'value': [ ],
-          ['1050910', '95%', '2'],
-        ],
         'chart': {
-          xData: ['1050910'],
+          xData: [],
-          series: [
+          series: []
-            {
-              name: '计划完成',
-              data: [120],
-              type: 'bar',
-              barMaxWidth: 45,
-            },
-            {
-              name: '实际完成',
-              data: [130],
-              type: 'bar',
-              barMaxWidth: 45,
-            }
-          ]
         }
-      }
+      },
+      "zuoyi": {
+        "value": [ ],
+        "chart": {
+          "series": [],
+          "xData": []
+        }
+      },
+      "fengzhong": {
+        "value": [ ],
+        "chart": {
+          "series": [],
+          "xData": []
+        }
+      },
+      "banfang": {
+        "value": [],
+        "chart": {
+          "series": [],
+          "xData": []
+        }
+      },
     };
   },
   //computed 修改一些值
@@ -79,6 +69,61 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
     },
     setDevnum(data) {
       this.devnum = data;
-    }
+    },
+    setcaijian(data) {
+
+      data.chart.series = data.chart.series.map((item) => {
+        item.type = 'bar'
+        item.barMaxWidth = 30
+        return item
+      })
+      this.caijian = data;
+    },
+    settuoxie(data) {
+
+      data.chart.series = data.chart.series.map((item) => {
+        item.type = 'bar'
+        item.barMaxWidth = 45
+        return item
+      })
+      this.tuoxie = data;
+    },
+    setfengzhong(data) {
+      data.value = data.value.map((item,index) => {
+        item.unshift(index+1)
+        return item
+      })
+      data.chart.series = data.chart.series.map((item) => {
+        item.type = 'bar'
+        item.barMaxWidth = 30
+        return item
+      })
+      this.fengzhong = data;
+    },
+    setbanfang(data) {
+      data.value = data.value.map((item,index) => {
+        item.unshift(index+1)
+        return item
+      })
+      data.chart.series = data.chart.series.map((item) => {
+        item.type = 'bar'
+        item.barMaxWidth = 30
+        return item
+      })
+      this.banfang = data;
+    },
+    setzuoyi(data) {
+      data.value = data.value.map((item,index) => {
+        item.unshift(index+1)
+        
+        return item
+      })
+      data.chart.series = data.chart.series.map((item) => {
+        item.type = 'bar'
+        item.barMaxWidth = 30
+        return item
+      })
+      this.zuoyi = data;
+    },
   },
 });

src/views/MicroExhibition/components/BarChart.vue

@@ -13,20 +13,7 @@ const prop = defineProps({
     },
     seriesData: {
         type: Array,
-        default: [
+        default: [        ]
-            {
-                name:'计划完成',
-                data: [120, 200],
-                type: 'bar',
-                barMaxWidth: 30,
-            },
-            {
-                name:'实际完成',
-                data: [130, 180],
-                type: 'bar',
-                barMaxWidth: 30,
-            }
-        ]
     }
 })
 
@@ -66,6 +53,19 @@ watch(()=>prop.seriesData, (newVal, oldVal) => {
         series: newVal
     });
 },{deep:true})
+watch(()=>prop.xData, (newVal, oldVal) => {
+    charts.setOption({
+        
+        xAxis: {
+            type: 'category',
+            data: prop.xData,
+            // axisLabel: {
+            //     interval: 0, //控制X轴刻度全部显示
+            //     rotate: 45, //倾斜角度
+            // },
+        },
+    });
+},{deep:true})
 onMounted(() => {
     setCharts()
 })

src/views/MicroExhibition/components/BoardBar.vue

@@ -8,7 +8,8 @@
             <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
         </div>
         <div class="bb-bottom">
-            <BarChart style="width: 100%;height: 100%;"></BarChart>
+            <BarChart style="width: 100%;height: 100%;" :xData="prop.xData"
+                                :seriesData="prop.seriesData"></BarChart>
         </div>
     </div>
 </template>
@@ -24,16 +25,15 @@ const devList = ref(null);
 const prop = defineProps({
     data: {
         type: Array,
-        default: [[1, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '0'],
+        default: []
-        [2, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
+    },
-        [3, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '2'],
+    xData: {
-        [4, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
+        type: Array,
-        [5, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '3'],
+        default: ['1050910', '1050269']
-        [6, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
+    },
-        [7, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '2'],
+    seriesData: {
-        [8, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
+        type: Array,
-        [9, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '0'],
+        default: [        ]
-        [10, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '3'],]
     }
 })
 let header = ['序号', '设备名称', '设备编码', '稼动率', '状态']
@@ -52,7 +52,7 @@ let config = reactive({
     columnWidth: [80, 290, 120, 120, 120, 120],
     align: ['center', 'center', 'center', 'center', 'center', 'center'],
     rowNum: 2,
-    waitTime: 300000,
+    waitTime: 3000,
     data: [
     ]
 })
@@ -67,7 +67,10 @@ const handleData = () => {
         })
     })
 }
-
+watch(()=>prop.data, (newVal, oldVal) => {
+    handleData()
+},{deep:true}
+)
 
 const status_color = {
     '0': '#FF6E76',

src/views/MicroExhibition/components/header2.vue

@@ -0,0 +1,554 @@
+<!--
+ * @FilePath: \code\gitscreenFront\src\components\headerBox\header2.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-16 11:04:06
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+
+<template>
+  <div class="header2" :style="{ width: props.width, height: props.height }">
+    <h1 :class="langJudge() == '简体中文' ? 'zh-title' : 'en-title'">
+      {{ props.title }}
+    </h1>
+    <div class="slot">
+      <div class="tip" style="display: flex">
+        <span class="tipspan" v-for="item in props.titleTip">
+          <div class="colortip" :style="{ backgroundColor: item.color }"></div>
+          <span class="tipstring">{{ item.name }}</span></span
+        >
+        <slot></slot>
+      </div>
+      <div v-show="typeObj.comback" class="comeBack" @click="comeBackFun">
+        <i class="iconfont icon-back"></i>
+      </div>
+      <div
+        v-show="typeObj.AbnormalData"
+        ref="AbnormalDataRef"
+        class="AbnormalData"
+        @click="AbnormalDataFun"
+      >
+        <dv-scroll-board
+          class="dv-scroll-boardclass"
+          ref="tipList"
+          :config="listdata"
+          style="width: 30rem; height: 50px"
+        />
+        <el-badge
+          :value="AbnormalNum"
+          class="i-badge"
+          :hidden="AbnormalNum == 0"
+        >
+          <i
+            :class="
+              AbnormalNum > 0
+                ? 'iconfont icon-baojingxinxi Abnormal-icon-yellow'
+                : 'iconfont icon-baojingxinxi'
+            "
+          ></i>
+        </el-badge>
+      </div>
+      <div v-show="typeObj.time" class="time">
+        <p ref="Timedom">{{ timeHtml }}</p>
+      </div>
+    </div>
+    <el-popover
+      ref="popoverRef"
+      :virtual-ref="AbnormalDataRef"
+      :visible="Abnormalpopovervisible"
+      trigger="click"
+      width="600px"
+      placement="bottom-start"
+      virtual-triggering
+    >
+      <ul
+        class="popoverBOX"
+        ref="popoverliDom"
+        v-click-outside="noClickAbnormalDataFun"
+      >
+        <li class="popoverHeader">
+          <!-- <span><i class="iconfont icon-lishijilu lishijilu"></i>历史记录</span> -->
+        </li>
+        <li v-for="item in powerlist" :key="item.deviceId">
+          {{ item.context }}
+        </li>
+        <li class="lookdown" v-show="onloadlist">
+          <span @click="clickNextPageAlarmList">{{
+            t("messages.加载更多")
+          }}</span>
+        </li>
+      </ul>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useNowTime from "@/hook/nowTime";
+import { ClickOutside as vClickOutside } from "element-plus";
+import { useRoute, useRouter } from "vue-router";
+import { devListType } from "@/type/InPlantProducts";
+import { getAlarmListData,getAlarmListHistoryData } from "@/http/index";
+import {
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  unref,
+  watch,
+  computed,
+} from "vue";
+import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
+import { useHeaderStore } from "@/store/components/header";
+import { getStoredLanguage } from "@/utils/languageStorage";
+import { useI18n } from "vue-i18n";
+import { Clock } from "@element-plus/icons-vue";
+let { t } = useI18n();
+const storeheader = useHeaderStore();
+let { timeHtml } = useNowTime();
+const router = useRouter();
+//刷新数据
+let numkey = ref(0);
+let popoverkey = ref(0);
+//历史数据dom
+let AbnormalDataRef = ref();
+let popoverRef = ref();
+let tipList = ref();
+let popoverliDom = ref();
+//历史报警数据弹窗显示
+let Abnormalpopovervisible = ref(false);
+let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
+//dialog
+let dialogdata = ref([]);
+let onloadlist = computed(() => {
+  return storeheader.num > powerlist.length;
+});
+const listdata = reactive<devListType>({
+  data: [],
+  rowNum: 2,
+  oddRowBGC: "#100C2A",
+  evenRowBGC: "#100C2A",
+  hoverPause: true,
+  carousel: "page",
+  waitTime: 3000,
+  align: ["left"],
+});
+let AbnormalNum = ref(0);
+//弹窗历史数据
+let powerlist = reactive([]);
+let props = defineProps<{
+  width: string;
+  height: string;
+  title: string;
+  titleTip: any;
+  typeFun: any[];
+  alarmType: any[];
+}>();
+const typeObj = reactive({
+  comback: false,
+  AbnormalData: false,
+  time: false,
+});
+const AbnormalType = reactive({
+  pageSize: 5,
+  pageNum: 1,
+  type: "",
+});
+let comeBackFun = () => {
+  router.go(-1);
+};
+const changeAbnormalData = (val: any) => {
+  tipList.value.updateRows(val.data, { ...val });
+};
+let AbnormalDataFun = () => {
+  //该函数执行优先级低于noClickAbnormalDataFun
+  //Abnormalpopovervisibled代表弹窗是否已经显示
+  // 判断弹窗是否打开如果打开就关闭 关闭就打开
+  if (Abnormalpopovervisible.value) {
+    Abnormalpopovervisible.value = false;
+  } else {
+    //关闭情况下判断是否点击了非弹窗位置如果是则仍然关闭 否则打开
+    if (AbnormalpopovervisibleCtrl.value) {
+      Abnormalpopovervisible.value = false;
+    } else {
+      Abnormalpopovervisible.value = true;
+    }
+  }
+};
+let noClickAbnormalDataFun = () => {
+  //该函数执行优先级高于AbnormalDataFun
+  // 判断弹窗是否打开如果打开并且我点击了非弹窗位置则ctrl为true否则为false
+  if (Abnormalpopovervisible.value) {
+    AbnormalpopovervisibleCtrl.value = true;
+  } else {
+    AbnormalpopovervisibleCtrl.value = false;
+  }
+
+  Abnormalpopovervisible.value ? (Abnormalpopovervisible.value = false) : "";
+};
+function typeStatus() {
+  if (props.typeFun.length == 0) {
+    return;
+  }
+  props.typeFun.forEach((res) => {
+    for (let key in typeObj) {
+      if (res == key) {
+        typeObj[key] = true;
+      }
+    }
+  });
+}
+function langJudge() {
+  let lang = getStoredLanguage();
+  if (lang) {
+    return lang;
+  } else {
+    return "简体中文";
+  }
+}
+
+
+//判断是否显示对应组件后所做操作
+watch(
+  () => typeObj,
+  (newVal, oldVal) => {
+    if (newVal.AbnormalData) {
+      AbnormalType.type = props.alarmType.join(",");
+      getAlarmListDatafun();
+      // connectWebsocket(null, null, getWebsocket, errWebsocket);
+      setAlarmscrollBoardList();
+    }
+  },
+  { deep: true, flush: "post" }
+);
+//获取异常信息接口数据
+async function getAlarmListDatafun() {
+  let result: any = await getAlarmListData(AbnormalType);
+
+  if (result.code == 200) {
+    storeheader.setDataList(result);
+  }
+}
+//单机显示更多历史报警数据
+function clickNextPageAlarmList() {
+  // if(storeheader.num<=powerlist.length){
+  //   onloadlist.value=false
+  //   return
+  // }
+  AbnormalType.pageNum++;
+  getAlarmListDatafun();
+}
+//接受历史报警数据
+watch(
+  () => storeheader.AlarmpopoverList,
+  (newVal, oldVal) => {
+    newVal.forEach((res) => {
+      powerlist.push(res);
+    });
+  },
+  { deep: true, flush: "post" }
+);
+//接受历史报警数据滚动效果栏
+watch(
+  () => storeheader.AlarmscrollBoardList,
+  (newVal, oldVal) => {
+    // newVal.forEach(res=>{
+    //   let e=res.context.split('，')
+    //   listdata.data.push([e[0]])
+    //   listdata.data.push([e[1]])
+    // })
+    // changeAbnormalData(listdata)
+    // numkey.value++
+  },
+  { deep: true, flush: "post" }
+);
+let AlarmscrollTime = null;
+//每隔15秒钟替换一次组件数据进行轮播
+function setAlarmscrollBoardList() {
+  let start = 0;
+  let end = 4;
+
+  let i = 0;
+  setTimeout(() => {
+    storeheader.AlarmscrollBoardList.slice(0, 5).forEach((element) => {
+      let e = element.context.split("，");
+      listdata.data.push(...[[e[0]], [e[1]]]);
+      i++;
+    });
+
+    end = end + 5;
+    start = i >= 5 ? 5 : storeheader.AlarmscrollBoardList.length - 1;
+    start <= 0 ? (start = 0) : "";
+  }, 1000);
+
+  AlarmscrollTime = setInterval(() => {
+    if (i == 0) {
+      listdata.data = [];
+    }
+    i = 0;
+    if (storeheader.AlarmscrollBoardList.length == 0) {
+      return;
+    }
+
+    if (storeheader.AlarmscrollBoardList.length - 1 < end) {
+      end = storeheader.AlarmscrollBoardList.length - 1;
+    }
+    for (start; start <= end; start++) {
+      // console.log(storeheader.AlarmscrollBoardList[start],start,end);
+      // console.log(storeheader.AlarmscrollBoardList.length-1);
+      let listcontent =
+        storeheader.AlarmscrollBoardList[start]?.context.split("，");
+
+      listdata.data.push(...[[listcontent[0]], [listcontent[1]]]);
+    }
+    changeAbnormalData(listdata);
+    numkey.value++;
+    end = end + 5;
+    //如果下次数据剩一个则只拿一条数据
+    if (start == storeheader.AlarmscrollBoardList.length - 1) {
+      // console.log('进入了2');
+      start = storeheader.AlarmscrollBoardList.length - 1;
+      end = storeheader.AlarmscrollBoardList.length - 1;
+    }
+    //如果剩余数据不足5个则拿出剩余数据
+    if (
+      end > storeheader.AlarmscrollBoardList.length - 1 &&
+      start <= storeheader.AlarmscrollBoardList.length - 1
+    ) {
+      // console.log('进入了3');
+      end = storeheader.AlarmscrollBoardList.length - 1;
+    }
+    // 如果全部超出则从头拿
+    if (
+      start > storeheader.AlarmscrollBoardList.length - 1 &&
+      end > storeheader.AlarmscrollBoardList.length - 1
+    ) {
+      // console.log('进入了4',start,end,storeheader.AlarmscrollBoardList.length-1,storeheader.AlarmscrollBoardList);
+      start = 0;
+      end = 4;
+    }
+  }, 15000);
+}
+//接受历史报警数据量
+watch(
+  () => storeheader.num,
+  (newVal, oldVal) => {
+    AbnormalNum.value = newVal;
+    numkey.value++;
+  },
+  { deep: true, flush: "post" }
+);
+function HeadergetWebsocket(val) {
+  let data = null;
+  try {
+    data = JSON.parse(val);
+  } catch (e) {
+    console.log(e);
+    return;
+  }
+
+  if (
+    props.alarmType.some((e) => {
+      return e == data.type;
+    })
+  ) {
+    // console.log(props.alarmType);
+    // console.log(props.alarmType.some(e=>{return e==data.type}));
+    storeheader.changeDataList(data);
+  }
+}
+function HeadererrWebsocket(val) {
+  // console.log(val);
+}
+onMounted(() => {
+  //判断需要显示出来的数据
+  typeStatus();
+});
+onUnmounted(() => {
+  // closeWebsocket();
+  storeheader.resetData();
+  AlarmscrollTime ? clearInterval(AlarmscrollTime) : "";
+});
+defineExpose({
+  changeAbnormalData,
+  HeadergetWebsocket,
+  HeadererrWebsocket,
+});
+</script>
+
+<style scoped>
+@import "@/assets/css/iconfont.css";
+.header2 {
+  width: 100%;
+  background-image: url(@/assets/header/header1.png);
+  background-size: 100% 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.header2-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  /* height: 100%; */
+  width: 100%;
+}
+h1 {
+  position: absolute;
+  top: 10px;
+  z-index: 2;
+}
+.zh-title {
+  margin-top: 6px;
+  font-size: 2.5rem;
+}
+.en-title {
+  font-size: 2rem;
+  max-width: 600px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  /* line-height: 80px; */
+}
+/* .header2 p {
+  position: absolute;
+  right: 50px;
+  bottom: 20px;
+  font-size: 20px;
+} */
+.slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 50px 10px 10px 10px;
+}
+
+/* .red {
+  background-color: rgb(228, 57, 97);
+}
+.blue {
+  background-color: rgb(32, 174, 197);
+} */
+.colortip {
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+}
+.tipstring {
+  font-size: 20px;
+  color: #fff;
+}
+.tip {
+  margin-top: 15px;
+}
+.tipspan {
+  display: flex;
+  margin-left: 10px;
+  align-items: center;
+}
+.comeBack {
+  position: absolute;
+  /* width: 2rem;
+  height: 2rem; */
+  bottom: 10%;
+  left: 1.5rem;
+  font-size: 3rem;
+  color: #fff;
+  cursor: pointer;
+}
+.comeBack > i {
+  font-size: 3rem;
+}
+.AbnormalData {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  /* width: 2rem;
+  height: 2rem; */
+  bottom: 20%;
+  right: 1%;
+  font-size: 3rem;
+  color: #fff;
+}
+.AbnormalData:hover {
+  cursor: pointer;
+}
+.AbnormalData > span {
+  font-size: 1rem;
+}
+.popoverBOX {
+  max-height: 15rem;
+  font-size: 18px;
+  overflow-y: auto;
+}
+.popoverBOX li {
+  padding: 10px 0 10px 0;
+}
+.lookdown {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1c78c2;
+}
+.lookdown:hover {
+  cursor: pointer;
+}
+.time {
+  position: absolute;
+  width: 20rem;
+  height: 2rem;
+  bottom: 30%;
+  left: 4.2rem;
+  font-size: 25px;
+}
+.i-badge {
+  width: 3rem;
+  height: 3rem;
+}
+.i-badge > i {
+  font-size: 3rem;
+  position: relative;
+  top: -5px;
+}
+/* .dv-scroll-board /deep/ .ceil {
+    font-size: 1.2rem;
+} */
+.dv-scroll-boardclass :deep(.ceil) {
+  font-size: 20px;
+}
+.el-popper.is-dark:deep() {
+  background: #14274b !important;
+}
+.el-popover.el-popper:deep() {
+  background: #14274b !important;
+}
+.Abnormal-icon-yellow {
+  color: #ddb14f;
+}
+.lishijilu {
+  font-size: 2rem;
+  color: #fff;
+}
+.popoverHeader {
+  padding: 0 !important;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  line-height: 1.5rem;
+}
+.popoverHeader span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  /* border-radius: 50px;
+  background: linear-gradient(315deg, #404040, #4c4c4c); */
+  /* box-shadow: -20px -20px 60px #3c3c3c, 20px 20px 60px #525252; */
+}
+</style>

src/views/MicroExhibition/index.vue

@@ -2,7 +2,7 @@
     <div class="container">
         <div class="header">
             <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备大屏展示系统'" :titleTip="[]"
+                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
                     :typeFun="['time']" :alarmType="[]"></header2>
             </div>
         </div>
@@ -18,7 +18,8 @@
                 </div>
                 <div class="lb">
                     <NewBoder :title="'缝中设备'">
-                        <BoardBar></BoardBar>
+                        <BoardBar :data="store.fengzhong.value" :xData="store.fengzhong.chart.xData"
+                            :seriesData="store.fengzhong.chart.series"></BoardBar>
                     </NewBoder>
                 </div>
             </div>
@@ -48,7 +49,8 @@
                 </div>
                 <div class="cb">
                     <NewBoder :title="'板房设备'">
-                        <BoardBar></BoardBar>
+                        <BoardBar :data="store.banfang.value" :xData="store.banfang.chart.xData"
+                            :seriesData="store.banfang.chart.series"></BoardBar>
                     </NewBoder>
                 </div>
             </div>
@@ -63,7 +65,8 @@
                 </div>
                 <div class="rb">
                     <NewBoder :title="'座椅面套生产线'">
-                        <BoardBar></BoardBar>
+                        <BoardBar :data="store.zuoyi.value" :xData="store.zuoyi.chart.xData"
+                            :seriesData="store.zuoyi.chart.series"></BoardBar>
                     </NewBoder>
                 </div>
             </div>
@@ -92,31 +95,33 @@
                 <div class="left-tip-type-item-text">离线</div>
             </div>
         </div>
+        <div class="wrap"></div>
     </div>
 </template>
 
 <script setup lang='ts'>
-import header2 from '@/components/headerBox/header2.vue'
+import header2 from './components/header2.vue'
 import NewBoder from './components/NewBoder.vue';
 import DevCard from "./components/DevCard.vue";
 import BarChart from './components/BarChart.vue'
 import ringChart from "./components/ringChart.vue";
 import BoardBar from "./components/BoardBar.vue";
 
+import { getTopDevice, getCismaList } from '@/http/cisma'
 import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
 import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
+import {connectWebsocket,closeWebsocket} from "@/utils/websocket"
 
 import { useI18n } from 'vue-i18n'
 let { t } = useI18n();
 const store = useMicroExhibitionStore()
 let ringData = computed(() => {
     return [
-        { name: '工作', value: store.devnum.on },
+    { name: '工作', value: store.devnum.on },
-        { name: '停机', value: store.devnum.off },
+    { name: '停机', value: store.devnum.off },
-        { name: '待机', value: store.devnum.wait },
+    { name: '待机', value: store.devnum.wait },
-    ]
+]
 })
-
 let dev_caijian_title = ['设备名称', '设备编码', '稼动率', '状态']
 let dev_tuoxie_title = ['设备编码', '稼动率', '状态']
 let dev_value = [
@@ -124,7 +129,50 @@ let dev_value = [
     ['全自动9公分电脑裁床', '待机', '40层', '0'],
 ]
 
+async function getTopDeviceData() {
+    let res = await getTopDevice() as any
+    if (res.code === 200) {
+        store.setbanfang(res.data.板房设备)
+        store.setcaijian(res.data.裁剪设备)
+        store.setfengzhong(res.data.缝中设备)
+        store.settuoxie(res.data.拖鞋自动生产线)
+        store.setzuoyi(res.data.座椅面套生产线)
+
+    }
+}
+
+async function getCismaListData() {
+    let res = await getCismaList() as any
+    if (res.code === 200) {
+        store.setDevnum(res.data.devnum)
+    }
+}
+
+function getWebsocket(val){
+    try{
+      let data=JSON.parse(val)
+      
+      
+      if(data.type=='StateChart'){     
+        store.setDevnum(data.msg)
+      }
+      if(data.type=='WorkingState'){     
+        store.setDevnum(data.msg)
+      }
+
+    }catch(err){
+      console.log(err);
+    }
+
+  }
+  function errWebsocket(val){
+    // console.log(val);
+}
+
 onMounted(() => {
+    getTopDeviceData()
+    getCismaListData()
+    connectWebsocket(null,null,getWebsocket,errWebsocket)
     document.getElementById('app').style.backgroundColor = '#0E0E0E'
 })
 
@@ -317,4 +365,16 @@ h2 {
 
 .gatway {
     font-size: 36px;
+}
+
+
+.wrap {
+    position: absolute;
+    top: 2px;
+    left: 582px;
+    width: 537px;
+    border-bottom: 0px solid transparent;
+    border-top: 92px solid #0E1D2F;
+    border-left: 109px solid transparent;
+    border-right: 110px solid transparent;
 }</style>