diff --git a/src/components/data-view/index.vue b/src/components/data-view/index.vue
index dc3ce28..9e8850b 100644
--- a/src/components/data-view/index.vue
+++ b/src/components/data-view/index.vue
@@ -14,7 +14,7 @@
             height: ${heights[ri]}px; line-height: ${heights[ri]}px;
             background-color: ${mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};`">
                 <div class="ceil" :class="{'ceil-wrap':wraps[ci]}" v-for="(ceil, ci) in row.ceils" :key="`${ceil}${ri}${ci}`"
-                    :style="`width: ${widths[ci]}px;`" :align="aligns[ci]" v-html="ceil"
+                    :style="`width: ${widths[ci]}px;justify-content:${wraps[ci]?align_hash[aligns[ci]]:''}`" :align="aligns[ci]" v-html="ceil"
                     @click="emitEvent('click', ri, ci, row, ceil)" @mouseenter="handleHover(true, ri, ci, row, ceil)"
                     @mouseleave="handleHover(false)" />
 
@@ -42,7 +42,12 @@ export default {
     data() {
         return {
             ref: 'scroll-board',
-
+            align_hash: {
+                left: 'flex-start',
+                center: 'center',
+                right: 'flex-end',
+                justify: 'space-between'
+            },
             defaultConfig: {
                 /**
                  * @description Board header
@@ -466,7 +471,6 @@ export default {
     white-space: normal;
     flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
 }
 
 .zd-scroll-board .rows .index {
diff --git a/src/router/index.ts b/src/router/index.ts
index 5d5a7fd..082f10d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -290,6 +290,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "CHICExhibition",
         component: () => import("../views/Exhibition/CHIC/index.vue"),
       },
+      {
+        path: "/SCISMAExhibition",
+        name: "SCISMAExhibition",
+        component: () => import("../views/Exhibition/SCISMA/index.vue"),
+      },
       {
         path: "/ExhibitionTable_:id",
         name: "ExhibitionTable",
diff --git a/src/views/Exhibition/SCISMA/components/BarChart.vue b/src/views/Exhibition/SCISMA/components/BarChart.vue
new file mode 100644
index 0000000..b3d6e27
--- /dev/null
+++ b/src/views/Exhibition/SCISMA/components/BarChart.vue
@@ -0,0 +1,98 @@
+<template>
+    <div ref="LChartRef" class="cc"></div>
+</template>
+
+<script setup lang='ts'>
+import { ref, getCurrentInstance, onMounted, watch } from 'vue'
+
+
+const prop = defineProps({
+    xData: {
+        type: Array,
+        default: ['1050910', '1050269']
+    },
+    seriesData: {
+        type: Array,
+        default: []
+    }
+})
+
+let LChartRef = ref(null);
+const { proxy } = getCurrentInstance() as any;
+let charts = null;
+const setCharts = () => {
+    charts = proxy.$echarts.init(LChartRef.value, 'dark')
+    let option = {
+        // title: {
+        //     text: '工作时间'
+        // },
+        backgroundColor: 'transparent',
+        legend: {
+            data: ['计划完成', '实际完成'],
+            textStyle: {
+                fontSize: 14
+            },
+
+        },
+        textStyle: {
+            fontSize:14
+
+        },
+        grid:{
+            left:'80',
+            right:'0',
+            bottom:'40',
+        },
+        color:['#2FC5D4','#FEDA81'],
+        xAxis: {
+            type: 'category',
+            data: prop.xData,
+            axisLabel: {
+                interval: 0, //控制X轴刻度全部显示
+                // rotate: 45, //倾斜角度
+            },
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '产量',
+                axisLabel:{
+                    fontSize:14
+                }
+            }
+        ],
+        series: prop.seriesData
+    };
+
+    charts.setOption(option);
+}
+
+watch(() => prop.seriesData, (newVal, oldVal) => {
+    charts.setOption({
+        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()
+})
+</script>
+
+<style scoped>
+.cc {
+    width: 100%;
+    height: 100%;
+}
+</style>
diff --git a/src/views/Exhibition/SCISMA/components/BoardBar.vue b/src/views/Exhibition/SCISMA/components/BoardBar.vue
new file mode 100644
index 0000000..49d08ac
--- /dev/null
+++ b/src/views/Exhibition/SCISMA/components/BoardBar.vue
@@ -0,0 +1,143 @@
+<template>
+    <div class="board-bar">
+        <div class="bb-top">
+            <div class="dev-title">
+                <div class="title-item" v-for="(item, index) in header" :style="{ width: computedWidth(columnWidth[index]) }">
+                    <text>{{ item }}</text></div>
+            </div>
+            <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
+        </div>
+        <div class="bb-bottom">
+            <BarChart style="width: 100%;height: 100%;" :xData="prop.xData"
+                                :seriesData="prop.seriesData"></BarChart>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import ZdScrollBoard from "@/components/data-view/index.vue";
+import BarChart from './BarChart.vue'
+
+import { getCurrentInstance, onMounted, reactive, ref, computed, watch } from "vue";
+
+
+const devList = ref(null);
+const prop = defineProps({
+    data: {
+        type: Array,
+        default: []
+    },
+    xData: {
+        type: Array,
+        default: ['1050910', '1050269']
+    },
+    seriesData: {
+        type: Array,
+        default: [        ]
+    },
+    rowNum: {
+        type: Number,
+        default: 2
+    }
+})
+let header = ['序号', '设备名称', '设备编码','完成率', '稼动率', '状态']
+let columnWidth = [90, 295, 145, 110, 110,85];
+let sum = 850;
+
+let computedWidth = (width: number) => {
+    return width / sum * 100 + '%'
+}
+let config = reactive({
+    // header: ['序号', '设备名称', '设备编码', '稼动率', '状态'],//, '故障率'
+    headerBGC: '#0E0E0E',
+    oddRowBGC: 'transparent',
+    evenRowBGC: 'transparent',
+    wrap: [false, true, false, false, false],
+    columnWidth: [80, 295, 145, 110, 110,85],
+    align: ['center', 'left', 'center', 'center', 'center', 'center'],
+    rowNum: prop.rowNum,
+    waitTime: 3000,
+})
+const handleData = () => {
+
+    let updateList =  prop.data.map((items: any) => {
+        return items.map((item: any, index: number) => {
+            if (index == (items.length - 1)) {
+                return statusHtml(status_color[item])
+            }
+            return item
+        })
+    })
+    devList.value.updateRows(updateList,config)
+}
+watch(()=>prop.data, (newVal, oldVal) => {
+    handleData()
+},{deep:true}
+)
+
+const status_color = {
+    '0': '#FF6E76',
+    '1': '#FDDD60',
+    '2': '#7CFFB2',
+    '3': '#FDDD60',
+}
+
+let statusHtml = (color) => {
+    return `<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"><div style="width:24px;height:24px;border-radius: 50%;background-color:${color}"></div></div>`
+    // return `<div style="display: inline-block;width:20px;height:20px;border-radius: 50%;background-color:${color}"></div>`
+}
+
+
+onMounted(() => {
+    handleData()
+})
+</script>
+
+<style scoped>
+.board-bar {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+
+}
+
+.dev-title {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.title-item {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.title-item text {
+    line-height: 50px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #fff;
+    padding: 5px 10px;
+    background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
+}
+
+.bb-top {
+    width: 100%;
+    height: 40%;
+}
+
+.dev-list {
+    width: 100%;
+    height: calc(100% - 50px);
+}
+
+.bb-bottom {
+    width: 100%;
+    height: 60%;
+
+}</style>
diff --git a/src/views/Exhibition/SCISMA/components/DevCard.vue b/src/views/Exhibition/SCISMA/components/DevCard.vue
new file mode 100644
index 0000000..816e005
--- /dev/null
+++ b/src/views/Exhibition/SCISMA/components/DevCard.vue
@@ -0,0 +1,114 @@
+<template>
+    <div class="dev-card">
+        <div class="dev-left">
+            <slot></slot>
+        </div>
+        <div class="dev-right">
+            <div class="dev-box">
+                <div class="dev-content dev-title">
+                    <div class="key" v-for="item in dev_title">{{ item }}</div>
+                </div>
+                <div class="dev-content" v-for="(items, index) in (dev_value as any)">
+                    <div v-for="(item, index) in items" class="dev_value">
+                        <div :class="{ status: index == (items.length - 1) }"
+                            :style="{ background: index == (items.length - 1) ? status_color[item] : '' }">{{ index ==
+                                (items.length - 1) ? '' : item }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { defineProps, ref } from 'vue'
+const prop = defineProps({
+    dev_title: {
+        type: Array,
+        default: ['机架号', '状态', '布料层数', '裁片数量']
+    },
+    dev_value: {
+        type: Array,
+        default: [
+            [102014422, '待机', '40层', '0']
+        ]
+    },
+})
+const status_color = {
+    '0': '#FF6E76',
+    '1': '#FDDD60',
+    '2': '#7CFFB2',
+    '3': '#FDDD60',
+}
+</script>
+
+<style scoped>
+.dev-card {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+}
+
+.dev-left {
+    width: 45%;
+    height: 100%;
+    box-sizing: border-box;
+}
+.dev-right {
+    width: 55%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.dev-title {
+    color: #FFF;
+}
+
+.dev-box {
+    height: 100%;
+    width: 100%;
+    font-size: 16px;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+
+.dev-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    font-weight: bold;
+}
+.dev_value {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.key {
+    width: 75px;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #02C1D7;
+    /* background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%; */
+}
+
+.status {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+}
+</style>
diff --git a/src/views/Exhibition/SCISMA/components/NewBoder.vue b/src/views/Exhibition/SCISMA/components/NewBoder.vue
new file mode 100644
index 0000000..ba4646a
--- /dev/null
+++ b/src/views/Exhibition/SCISMA/components/NewBoder.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="newboder">
+    <img class="u305" src="./../images/u305.svg" alt="">
+    <img class="u290" src="./../images/u290.svg" alt="">
+    <div class="title">
+        <text class="title-text">{{ newTitle }}</text>
+    </div>
+    <div class="newboder-content">
+        <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { computed} from 'vue'
+let prop = defineProps({
+    title: {
+        type: String,
+        default: '裁剪设备'
+    }
+})
+
+let newTitle = computed(() => {
+    return prop.title.split('').join(' ')
+})
+
+</script>
+
+<style scoped>
+.newboder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.u305 {
+    width: 73px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.5;
+}
+.u290 {
+    width: 61px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    transform: rotate(180deg);
+    opacity: 0.5;
+    z-index: 2;
+}
+.title {
+    width: 100%;
+    height: 50px;
+    text-align: left;
+    font-size: 20px;
+    color: #02C1D7;
+    display: flex;
+    align-items: center;
+}
+.title-text {
+    margin-left: 30px;
+    padding-left: 20px;
+    border-left: #02C1D7 solid 5px;
+    font-weight: bold;
+}
+
+.newboder-content {
+    flex: 1;
+}
+</style>
diff --git a/src/views/Exhibition/SCISMA/components/StepItem.vue b/src/views/Exhibition/SCISMA/components/StepItem.vue
new file mode 100644
index 0000000..5b8a926
--- /dev/null
+++ b/src/views/Exhibition/SCISMA/components/StepItem.vue
@@ -0,0 +1,76 @@
+<!--
+ * @Author: hzz hzz
+ * @Date: 2023-12-06 08:05:31
+ * @LastEditors: hzz hzz
+ * @LastEditTime: 2023-12-06 08:28:40
+ * @FilePath: \screenFront\src\views\MicroExhibition\component\StepItem.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${hzz}, All Rights Reserved. 
+-->
+<template>
+  <div class="stepContainer">
+    <div class="step-top" :style="{'font-size':lang!='简体中文'?'24px':'22px'}">{{ prop.data.name }}</div>
+    <div class="step-bottom">
+        <div class="step-total">{{t("default.总数")}}：{{ prop.data.total +' '+ t("default.台") }}</div>
+        <div class="step-online">{{t("default.在线")}}：{{ prop.data.online +' '+ t("default.台") }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import {computed,ref } from 'vue'
+import { getStoredLanguage, saveStoredLanguage } from "@/utils/languageStorage";
+import { useI18n } from 'vue-i18n'
+let lang = ref(getStoredLanguage());
+let { t } = useI18n();
+const prop = defineProps({
+  data: {
+    type: Object,
+    default: {
+        name: '裁剪',
+        total: 0,
+        online: 0,
+    }
+  }
+})
+</script>
+
+<style scoped>
+.stepContainer {
+    width: 170px;
+    height: 88px;
+    background: url('./../images/step_item.png') no-repeat;
+    background-size: 100% 100%;
+    font-family: "华文新魏", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.step-top {
+    width: 100%;
+    height: 36px;
+    text-align: center;
+    font-size: 28px;
+    color: #00FFFF;
+    padding-left: 20px;
+}
+.step-bottom {
+    width: 100%;
+    height: 51px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    padding-left: 20px;
+}
+.step-online {
+    color: #7CFfB2FE;
+}
+</style>
diff --git a/src/views/Exhibition/SCISMA/components/header2.vue b/src/views/Exhibition/SCISMA/components/header2.vue
new file mode 100644
index 0000000..76da9c5
--- /dev/null
+++ b/src/views/Exhibition/SCISMA/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: 3rem;
+}
+.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>
diff --git a/src/views/Exhibition/SCISMA/components/ringChart.vue b/src/views/Exhibition/SCISMA/components/ringChart.vue
new file mode 100644
index 0000000..555a74f
--- /dev/null
+++ b/src/views/Exhibition/SCISMA/components/ringChart.vue
@@ -0,0 +1,89 @@
+<!--
+ * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\ringChart.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-04-28 08:01:55
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+        <div ref="ringRef" class="ring" ></div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
+const { proxy } = getCurrentInstance() as any;
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
+let ringRef = ref();
+let ringChart = null;
+const prop = defineProps({
+    data: {
+        type: Array,
+        default: []
+    }
+})
+const init = () => {
+    ringChart = proxy.$echarts.init(ringRef.value, 'dark')
+    let option = {
+        tooltip: {
+            trigger: "item",
+        },
+        color:['#7CFFB2','#FF6E76','#FDDD60'],
+        backgroundColor: 'transparent',
+        legend: {
+            type: "scroll",
+            bottom: "0",
+            left: "center",
+            textStyle: {
+                color: "#fff",
+                fontSize: 16,
+            },
+        },
+        series: [
+            {
+                name: "",
+                type: "pie",
+                radius: ["40%", "70%"],
+                center: ["50%", "45%"],
+                label: {
+                    show: true,
+                    formatter(params) {
+                        return `${params.name}:${params.value}台`
+                    },
+                    fontSize: 18,
+                    fontWeight: 500,
+                },
+                labelLine: {
+                    show: true,
+                },
+                top: '5%',
+                data: prop.data,
+            },
+        ],
+    }
+    ringChart.setOption(option)
+}
+
+onUpdated(() => {
+    ringChart.setOption({
+        series: [
+            {
+                data: prop.data
+            }
+        ]
+    })
+})
+onMounted(() => {
+    init()
+})
+</script>
+
+<style scoped>
+
+.ring {
+    width: 100%;
+    height: 100%;
+}
+</style>
diff --git a/src/views/Exhibition/SCISMA/images/bg.jpg b/src/views/Exhibition/SCISMA/images/bg.jpg
new file mode 100644
index 0000000..dc06edc
Binary files /dev/null and b/src/views/Exhibition/SCISMA/images/bg.jpg differ
diff --git a/src/views/Exhibition/SCISMA/images/step_item.png b/src/views/Exhibition/SCISMA/images/step_item.png
new file mode 100644
index 0000000..ee6317e
Binary files /dev/null and b/src/views/Exhibition/SCISMA/images/step_item.png differ
diff --git a/src/views/Exhibition/SCISMA/images/u290.svg b/src/views/Exhibition/SCISMA/images/u290.svg
new file mode 100644
index 0000000..94f8184
--- /dev/null
+++ b/src/views/Exhibition/SCISMA/images/u290.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="61px" height="87px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="42" x2="58" y2="42" id="LinearGradient191">
+      <stop id="Stop192" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
+      <stop id="Stop193" stop-color="#00ffff" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1847 -1012 )">
+    <path d="M 57.58803112269304 0.15649613942387075  L 26.45614035087719 1.6000000000000454  L 1 30.799999999999955  L 1 83.20000000000005  " stroke-width="2" stroke="url(#LinearGradient191)" fill="none" transform="matrix(1 0 0 1 1848 1013 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/Exhibition/SCISMA/images/u305.svg b/src/views/Exhibition/SCISMA/images/u305.svg
new file mode 100644
index 0000000..e68182a
--- /dev/null
+++ b/src/views/Exhibition/SCISMA/images/u305.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="73px" height="88px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="42.5" x2="70" y2="42.5" id="LinearGradient194">
+      <stop id="Stop195" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
+      <stop id="Stop196" stop-color="#00ffff" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -666 -592 )">
+    <path d="M 69.58823529411764 1  L 30.88235294117647 1  L 0 35.19718310049065  L 0 85  " stroke-width="2" stroke="url(#LinearGradient194)" fill="none" transform="matrix(1 0 0 1 667 593 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/Exhibition/SCISMA/index.vue b/src/views/Exhibition/SCISMA/index.vue
new file mode 100644
index 0000000..bd8cd1d
--- /dev/null
+++ b/src/views/Exhibition/SCISMA/index.vue
@@ -0,0 +1,377 @@
+<template>
+    <div class="container">
+        <div class="header">
+            <div class="title">
+                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
+                    :typeFun="['time']" :alarmType="[]"></header2>
+            </div>
+        </div>
+        <div class="content">
+            <div class="left">
+                <NewBoder :title="'缝纫设备'">
+                    <BoardBar :data="fengren.value" :xData="fengren.chart.xData" :seriesData="fengren.chart.series"
+                        :rowNum="4"></BoardBar>
+                </NewBoder>
+            </div>
+            <div class="center">
+                <div class="ct">
+                    <StepItem v-for="i in stepList" :data="i"></StepItem>
+                </div>
+                <div class="cc">
+                    <NewBoder :title="'设备状态总览'">
+                        <ringChart :data="ringData"></ringChart>
+                    </NewBoder>
+                </div>
+                <div class="cb">
+                    <NewBoder :title="'裁剪设备'">
+                        <BoardBar :data="caijian.value" :xData="caijian.chart.xData" :seriesData="caijian.chart.series">
+                        </BoardBar>
+                    </NewBoder>
+                </div>
+            </div>
+            <div class="right">
+                <NewBoder :title="'板房设备'">
+                    <BoardBar :data="banfang.value" :xData="banfang.chart.xData" :seriesData="banfang.chart.series"
+                        :rowNum="4"></BoardBar>
+                </NewBoder>
+            </div>
+        </div>
+        <div class="left-tip-type">
+            <div class="left-tip-type-item">
+                <div class="yuan green"></div>
+                <div class="left-tip-type-item-text">工作</div>
+            </div>
+            <div class="left-tip-type-item">
+                <div class="yuan yello"></div>
+                <div class="left-tip-type-item-text">待机</div>
+            </div>
+            <div class="left-tip-type-item">
+                <div class="yuan red"></div>
+                <div class="left-tip-type-item-text">停机</div>
+            </div>
+        </div>
+        <div class="wrap"></div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
+import header2 from './components/header2.vue'
+import NewBoder from './components/NewBoder.vue';
+import BoardBar from "./components/BoardBar.vue";
+import ringChart from "./components/ringChart.vue";
+import StepItem from './components/StepItem.vue'
+
+import { getTopDevice, getCismaList } from '@/http/cisma'
+import {chicDeviceList} from '@/http/Exhibition/CHIC'
+
+import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
+let timer = null
+let devnum = reactive({
+    on: 0,
+    off: 0,
+    wait: 0
+})
+let stepList = reactive([
+    {
+        name: '缝纫设备',
+        total: 0,
+        online: 0,
+    },
+    {
+        name: '裁剪设备',
+        total: 0,
+        online: 0,
+    },
+    {
+        name: '版房设备',
+        total: 0,
+        online: 0,
+    }
+])
+let fengren = ref({
+    value: [],
+    chart: {
+        xData: [],
+        series: []
+    }
+})
+let caijian = ref({
+    value: [],
+    chart: {
+        xData: [],
+        series: []
+    }
+})
+let banfang = ref({
+    value: [],
+    chart: {
+        xData: [],
+        series: []
+    }
+})
+
+watch(() => fengren.value, (newVal, oldVal) => {
+    stepList[0].total = newVal.value.length
+    stepList[0].online = newVal.value.filter((item) => item[5] !== '0').length
+}, { deep: true })
+
+watch(() => caijian.value, (newVal, oldVal) => {
+    stepList[1].total = newVal.value.length
+    stepList[1].online = newVal.value.filter((item) => item[5] !== '0').length
+}, { deep: true })
+
+watch(() => banfang.value, (newVal, oldVal) => {
+    stepList[2].total = newVal.value.length
+    stepList[2].online = newVal.value.filter((item) => item[5] !== '0').length
+}, { deep: true })
+
+let ringData = computed(() => {
+    return [
+        { name: '工作', value: devnum.on },
+        { name: '停机', value: devnum.off },
+        { name: '待机', value: devnum.wait },
+    ]
+})
+
+function setData(data:any) {
+    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
+        item.label = {
+            show: true,
+            position: 'top',
+        }
+        return item
+    })
+    return data
+}
+
+
+let labelList = ref()
+async function getTopDeviceData() {
+    let res = await chicDeviceList() as any
+    if (res.code === 200) {
+        // setfengren(res.data.缝纫设备)
+        // setbanfang(res.data.版房设备)
+        // setcaijian(res.data.裁剪设备)
+        fengren.value = setData(res.data.缝纫设备)
+        banfang.value = setData(res.data.版房设备)
+        caijian.value = setData(res.data.裁剪设备)
+        labelList.value = [];
+        labelList.value.push(...fengren.value.value.map((item,i) => {
+            return { label: item[2],index:i,name:'fengren',status:item[5]}
+        }))
+        labelList.value.push(...banfang.value.value.map((item,i) => {
+            return { label: item[2],index:i,name:'banfang',status:item[5]}
+        }))
+        labelList.value.push(...caijian.value.value.map((item,i) => {
+            return { label: item[2],index:i,name:'caijian',status:item[5]}
+        }))
+    }
+}
+
+async function getCismaListData() {
+    let res = await getCismaList({s:'CHIC'}) as any
+    if (res.code === 200) {
+        devnum.on = res.data.devnum.on
+        devnum.off = res.data.devnum.off
+        devnum.wait = res.data.devnum.wait
+    }
+}
+
+
+//socket
+function getWebsocket(val) {
+    try {
+        let data = JSON.parse(val)
+
+
+        if (data.type == 'WorkingState') {
+            let { RackNumber, WorkingState } = data.msg
+            let index = labelList.value.findIndex((item, index) => {
+                return item['label'] == RackNumber
+            })
+            
+            if (index !== -1) {
+                let name = labelList.value[index].name
+                let i = labelList.value[index].index
+                labelList.value[index].status = WorkingState
+                if (name == 'fengren') {
+                    fengren.value.value[i][5] = WorkingState
+                } else if (name == 'banfang') {
+                    banfang.value.value[i][5] = WorkingState
+                } else if (name == 'caijian') {
+                    caijian.value.value[i][5] = WorkingState
+                }
+                
+                devnum.on = labelList.value.filter((item) => item.status == '2').length
+                devnum.wait = labelList.value.filter((item) => item.status == '1'||item.status == '3').length
+                devnum.off = labelList.value.filter((item) => item.status == '0').length
+                
+            }
+        }
+
+    } catch (err) {
+        console.log(err);
+    }
+
+}
+function errWebsocket(val) {
+    // console.log(val);
+}
+
+onMounted(() => {
+    getTopDeviceData()
+    getCismaListData()
+    timer = setInterval(()=>{
+        getTopDeviceData()
+    },1000*30)
+    connectWebsocket(null, null, getWebsocket, errWebsocket)
+    document.getElementById('app').style.backgroundColor = '#0E0E0E'
+})
+
+onUnmounted(() => {
+    clearInterval(timer)
+
+    // closeWebsocket()
+    document.getElementById('app').style.backgroundColor = '#100c2a'
+})
+</script>
+
+<style scoped>
+.container {
+    height: 1080px;
+    width: 1920px;
+    color: #FFFFFF;
+    background: url('./images/bg.jpg') no-repeat center center / 100% 100%;
+    background-color: #0E0E0E;
+    position: relative;
+
+}
+
+.header {
+    height: 100px;
+    width: 1920px;
+}
+
+.content {
+    height: 980px;
+    width: 1920px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 5px;
+    box-sizing: border-box;
+}
+
+.left,
+.right {
+    height: 980px;
+    width: 600px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.center {
+    width: 670px;
+    height: 980px;
+    margin: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+
+.ct {
+    width: 100%;
+    height: 110px;
+    margin: 10px 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+.cc {
+    width: 100%;
+    height: 330px;
+}
+
+.cb {
+    width: 100%;
+    height: 500px;
+}
+
+
+h2 {
+    /* color: #fff; */
+    font-size: 18px;
+    line-height: 1.5rem;
+    color: #02C1D7;
+}
+
+.on {
+    color: #20AEC5;
+    font-size: 3.5rem;
+}
+
+.off {
+    color: #797979;
+    font-size: 3.5rem;
+}
+
+.left-tip-type {
+    position: absolute;
+    top: 69px;
+    left: 462px;
+    width: 160px;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.left-tip-type-item {
+    width: 33%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.yuan {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+}
+
+.green {
+    background-color: #7CFFB2;
+}
+
+.yello {
+    background-color: #FDDD60;
+}
+
+.red {
+    background-color: #FF6E76;
+}
+
+.blue {
+    color: #20AEC5;
+}
+
+.err {
+    color: #FF6E76;
+}
+</style>