diff --git a/src/router/index.ts b/src/router/index.ts
index c7c0ce0..21357f1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -361,6 +361,12 @@ const routes: Array<RouteRecordRaw> = [
         name: "Station",
         component: () => import("../views/Mechanics/child/station/index.vue"),
       },
+        // 德国展会
+      {
+        path: "/GermanyExhibition",
+        name: "GermanyExhibition",
+        component: () => import("../views/Exhibition/Germany/child.vue"),
+      },
 
 
 
diff --git a/src/views/Exhibition/Germany/child.vue b/src/views/Exhibition/Germany/child.vue
new file mode 100644
index 0000000..a690db6
--- /dev/null
+++ b/src/views/Exhibition/Germany/child.vue
@@ -0,0 +1,316 @@
+<!--
+ * @FilePath: child.vue
+ * @Author: zz
+ * @Date: 2024-04-11 15:03:16
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-04-11 17:24:07
+ * @Descripttion: 
+-->
+<template>
+  <div class="container">
+    <div class="header">
+      <div class="title">
+        <header2
+          ref="headerref"
+          :width="'100%'"
+          :height="'100px'"
+          :title="'再登工况物联管理系统'"
+          :titleTip="[]"
+          :typeFun="['time', 'comback']"
+          :alarmType="[]"
+        ></header2>
+      </div>
+    </div>
+    <div class="content">
+      <div class="left">
+        <div class="detail">
+          <BorderView :title="'设备信息'">
+            <DevInfo :data="device_data" :imgSrc="getImgSrc"></DevInfo>
+          </BorderView>
+        </div>
+        <div class="yield">
+          <BorderView :title="'产出进度'">
+            <DynamicChart
+              style="width: 100%; height: 100%"
+              :xData="xData"
+              :seriesData="seriesData"
+            ></DynamicChart>
+          </BorderView>
+        </div>
+      </div>
+      <div class="right">
+        <div class="speed">
+          <BorderView :title="'工作速度'">
+            <div class="box-lt">
+              <div class="pie">
+                <span>{{ speed }}</span>
+                <span>rpm/min</span>
+              </div>
+            </div>
+          </BorderView>
+        </div>
+        <div class="percent">
+          <BorderView :title="'产品合格率'">
+            <PercentChart style="width: 100%; height: 100%"></PercentChart>
+          </BorderView>
+        </div>
+        <div class="history">
+          <BorderView :title="'维保信息'">
+            <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
+          </BorderView>
+        </div>
+      </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>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  reactive,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  watch,
+  onUpdated,
+  computed,
+} from "vue";
+import header2 from "./components/header2.vue";
+import BorderView from "./components/Border.vue";
+import DevInfo from "./components/devinfo.vue";
+import DynamicChart from "./components/DynamicChart.vue";
+import PercentChart from "./components/PercentChart.vue";
+import ZdScrollBoard from "@/components/data-view/index.vue";
+import { useMicroExhibitionStore } from "@/store/module/MicroExhibition";
+
+// 设备信息
+let device_data = ref([
+  { key: "设备名称", value: "冲缝一体机", value_style: { fontSize: "20px" } },
+  { key: "机架号", value: "1171210#" },
+  { key: "工作人员", value: "张--" },
+  { key: "设备状态", value: "1" },
+  { key: "稼动率", value: "30%" },
+  { key: "花样名称", value: "0.7盾牌" },
+  { key: "加工时长", value: "23min" },
+  { key: "花样总针数", value: "300针" },
+  { key: "断线次数", value: "0次" },
+  { key: "当前针数", value: "100针" },
+]);
+let getImgSrc = computed(() => {
+  // let name: string = Array.isArray(route.params.name)
+  //   ? route.params.name[0]
+  //   : route.params.name;
+  let imgSrc = {
+    冲缝一体机: require("./images/cfytj.png"),
+    工业缝纫机: require("./images/cfytj.png"),
+  };
+  return imgSrc[name];
+});
+
+// 获取产出进度echarts数据
+let xData = ref([
+  "2024-04-15",
+  "2024-04-16",
+  "2024-04-17",
+  "2024-04-18",
+  "2024-04-19",
+  "2024-04-20",
+  "2024-04-21",
+]);
+let seriesData = ref([
+  {
+    name: "实际产量",
+    type: "bar",
+    tooltip: {
+      valueFormatter: function (value) {
+        return value + " 件";
+      },
+    },
+    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
+  },
+  {
+    name: "产出进度",
+    type: "line",
+    yAxisIndex: 1,
+    tooltip: {
+      valueFormatter: function (value) {
+        return value + " %";
+      },
+    },
+    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
+  },
+]);
+
+// 转速
+let speed = ref(2000);
+
+let config = ref({
+  header: ["序号", "类型", "日期", "状态", "操作员编号"], //, '故障率'
+  headerBGC: "transparent",
+  oddRowBGC: "transparent",
+  evenRowBGC: "transparent",
+  wrap: [false, false, false, false, false],
+  columnWidth: [80, 150, 145, 110, 110, 185],
+  align: ["center", "center", "center", "center", "center", "center"],
+  rowNum: 5,
+  waitTime: 3000,
+  data: [
+    [1, "保养", "2024-02-10", "完成", "1001"],
+    [2, "机头保养", "2024-03-14", "完成", "1002"],
+    [3, "电机保养", "2024-03-25", "完成", "1003"],
+    [4, "保养", "2024-04-05", "完成", "1001"],
+    [5, "机头保养", "2024-04-08", "完成", "1002"],
+    [6, "维护", "2024-04-15", "完成", "1001"],
+  ],
+});
+</script>
+
+<style scoped>
+.container {
+  height: 1080px;
+  width: 1920px;
+  color: #ffffff;
+  background: url("./../../../assets/img/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 {
+  height: 980px;
+  width: 1200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.right {
+  height: 980px;
+  width: 710px;
+  /* margin-left: 5px; */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.detail {
+  width: 100%;
+  height: 500px;
+}
+.yield {
+  width: 100%;
+  height: 480px;
+}
+.speed {
+  width: 100%;
+  height: 250px;
+}
+.box-lt {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pie {
+  width: 160px;
+  height: 160px;
+  border: #0bc0c4 15px solid;
+  border-radius: 50%;
+  color: #c6e4e2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 25px;
+  margin-bottom: 22px;
+}
+.percent {
+  width: 100%;
+  height: 420px;
+}
+
+.history {
+  width: 100%;
+  height: 320px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.left-tip-type {
+  position: absolute;
+  top: 50px;
+  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;
+}
+.dev-list {
+  width: 100%;
+  height: 100%;
+  margin-left: 6%;
+}
+</style>
diff --git a/src/views/Exhibition/Germany/components/Border.vue b/src/views/Exhibition/Germany/components/Border.vue
new file mode 100644
index 0000000..0490e50
--- /dev/null
+++ b/src/views/Exhibition/Germany/components/Border.vue
@@ -0,0 +1,95 @@
+<!--
+ * @FilePath: Border.vue
+ * @Author: zz
+ * @Date: 2024-04-11 16:16:57
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-04-11 16:25:02
+ * @Descripttion: 
+-->
+<template>
+  <div class="newboder">
+    <!-- <img class="borderpng" src="" alt=""> -->
+    <div class="title">
+      <text class="title-text">{{ title }}</text>
+      <div class="hr" v-if="hr_show"></div>
+    </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: "设备信息",
+  },
+  hr_show: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 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;
+  align-items: center;
+  background: url(./../images/border.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.borderpng {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.title {
+  position: relative;
+  width: 100%;
+  height: 16%;
+  padding-left: 10%;
+  text-align: left;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 30px;
+  color: rgba(0, 255, 255, 0.996078431372549);
+  display: flex;
+  align-items: center;
+  /* justify-content: center; */
+}
+.hr {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  height: 4px;
+  background: url(./../images/hr.png) no-repeat;
+  background-position: 50%;
+}
+
+.title-text {
+  font-weight: bold;
+}
+
+.newboder-content {
+  width: 100%;
+  height: 84%;
+  flex: 1;
+}
+</style>
diff --git a/src/views/Exhibition/Germany/components/DynamicChart.vue b/src/views/Exhibition/Germany/components/DynamicChart.vue
new file mode 100644
index 0000000..7470da5
--- /dev/null
+++ b/src/views/Exhibition/Germany/components/DynamicChart.vue
@@ -0,0 +1,146 @@
+<!--
+ * @FilePath: DynamicChart.vue
+ * @Author: zz
+ * @Date: 2024-04-12 16:42:47
+ * @LastEditors: 
+ * @LastEditTime: 2024-04-12 16:42:47
+ * @Descripttion: 
+-->
+<template>
+  <div ref="LChartRef" class="cc"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, getCurrentInstance, onMounted, watch } from "vue";
+import { useI18n } from "vue-i18n";
+let { t } = useI18n();
+
+const prop = defineProps({
+  xData: {
+    type: Array,
+    default: [],
+  },
+  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 = {
+    backgroundColor: "transparent",
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        crossStyle: {
+          color: "#999",
+        },
+      },
+    },
+    legend: {
+      data: ["实际产量", "产出进度"],
+      textStyle: {
+        color: "#AEEEFA",
+      },
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: prop.xData,
+        axisPointer: {
+          type: "shadow",
+        },
+        axisLabel: {
+          fontSize: 12,
+          color: "#AEEEFA",
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "实际产量",
+        nameTextStyle: {
+          color: "#AEEEFA",
+          fontSize: 12,
+        },
+        interval: 50,
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "#032E4E",
+          },
+        },
+        axisLabel: {
+          formatter: "{value} ",
+          fontSize: 12,
+          color: "#AEEEFA",
+        },
+      },
+      {
+        type: "value",
+        name: "产出进度",
+        nameTextStyle: {
+          color: "#AEEEFA",
+          fontSize: 12,
+        },
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "#032E4E",
+          },
+        },
+        min: 0,
+        max: 25,
+        interval: 5,
+        axisLabel: {
+          formatter: "{value} %",
+          fontSize: 12,
+          color: "#AEEEFA",
+        },
+      },
+    ],
+    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,
+      },
+    });
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  setCharts();
+});
+</script>
+
+<style>
+.cc {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/Exhibition/Germany/components/PercentChart.vue b/src/views/Exhibition/Germany/components/PercentChart.vue
new file mode 100644
index 0000000..cee7d86
--- /dev/null
+++ b/src/views/Exhibition/Germany/components/PercentChart.vue
@@ -0,0 +1,72 @@
+<!--
+ * @FilePath: PdScrollBoard.vue
+ * @Author: zz
+ * @Date: 2024-04-13 09:00:26
+ * @LastEditors: 
+ * @LastEditTime: 2024-04-13 09:00:26
+ * @Descripttion: 
+-->
+<template>
+  <div ref="PChartRef" class="cc"></div>
+</template>
+<script setup lang="ts">
+import { ref, getCurrentInstance, onMounted, watch } from "vue";
+let PChartRef = ref(null);
+const { proxy } = getCurrentInstance() as any;
+let charts = null;
+const setCharts = () => {
+  charts = proxy.$echarts.init(PChartRef.value, "dark");
+  let option = {
+    backgroundColor: "transparent",
+    xAxis: {
+      type: "category",
+      data: ["03-05", "03-06", "03-07", " 03-08", "03-09", "03-10", "03-10"],
+      axisLabel: {
+        fontSize: 12,
+        color: "#AEEEFA",
+      },
+    },
+
+    yAxis: {
+      type: "value",
+      name: "合格率",
+      nameTextStyle: {
+        color: "#AEEEFA",
+        fontSize: 12,
+      },
+      axisLabel: {
+        formatter: "{value} %",
+        fontSize: 12,
+        color: "#AEEEFA",
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "#032E4E",
+        },
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    series: [
+      {
+        name: "合格率",
+        data: [50, 98, 80, 60, 95, 70, 85, 86, 78, 85, 75],
+        type: "line",
+        smooth: true,
+      },
+    ],
+  };
+  charts.setOption(option);
+};
+onMounted(() => {
+  setCharts();
+});
+</script>
+<style>
+.cc {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/Exhibition/Germany/components/devinfo.vue b/src/views/Exhibition/Germany/components/devinfo.vue
new file mode 100644
index 0000000..9ce1f3e
--- /dev/null
+++ b/src/views/Exhibition/Germany/components/devinfo.vue
@@ -0,0 +1,125 @@
+<!--
+ * @FilePath: devinfo.vue
+ * @Author: zz
+ * @Date: 2024-04-12 11:25:44
+ * @LastEditors: 
+ * @LastEditTime: 2024-04-12 11:25:44
+ * @Descripttion: 
+-->
+<template>
+  <div class="item-card-container">
+    <div class="box-left">
+      <div class="top-item" v-for="(item, index) in data" :style="{ width }">
+        <span class="key-text">{{ item.key }}:</span>
+        <span class="value-text" :style="item?.value_style">
+          <div
+            class="status"
+            v-if="index == 3"
+            :style="{ background: status_color[item.value] }"
+          ></div>
+          <span v-else>{{ item.value }}</span>
+        </span>
+      </div>
+    </div>
+    <div class="box-right">
+      <img :src="imgSrc" alt="" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+const imgSrc =
+  "https://www.richpeace.cn/uploadfile/thumb/0b94ce08688c6389ce7b68c52ce3f8c7/880x580_auto.jpg";
+const prop = defineProps({
+  data: {
+    type: Array as any,
+    default: () => [],
+  },
+  imgSrc: {
+    type: String,
+    default: "",
+  },
+  rowNum: {
+    type: Number,
+    default: 2,
+  },
+});
+let width = computed(() => {
+  return 100 / prop.rowNum + "%";
+});
+const status_color = {
+  "0": "#FF6E76",
+  "1": "#FDDD60",
+  "2": "#7CFFB2",
+  "3": "#FDDD60",
+};
+</script>
+<style scoped>
+.item-card-container {
+  width: 100%;
+}
+.box-left {
+  width: 600px;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  float: left;
+}
+.box-right {
+  width: 500px;
+  height: 100%;
+  /* background-color: red; */
+  margin-left: 55%;
+}
+.box-right img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.key-text {
+  width: 60%;
+  font-size: 22px;
+  color: #02c1d7;
+  font-weight: 700;
+}
+.top-item {
+  height: 50%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 20px 10px;
+}
+.value-text {
+  width: 40%;
+  font-size: 20px;
+  font-weight: 600;
+  color: #aeeefafe;
+  font-family: "华文新魏", sans-serif;
+  box-sizing: border-box;
+  padding-left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.status {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  animation: blink 1s infinite; /* 添加动画效果 */
+}
+
+@keyframes blink {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+  }
+  90% {
+    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+  }
+}
+</style>
diff --git a/src/views/Exhibition/Germany/components/header2.vue b/src/views/Exhibition/Germany/components/header2.vue
new file mode 100644
index 0000000..6826050
--- /dev/null
+++ b/src/views/Exhibition/Germany/components/header2.vue
@@ -0,0 +1,534 @@
+<!--
+ * @FilePath: 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/Germany/images/border.png b/src/views/Exhibition/Germany/images/border.png
new file mode 100644
index 0000000..65830e5
Binary files /dev/null and b/src/views/Exhibition/Germany/images/border.png differ
diff --git a/src/views/Exhibition/Germany/images/cfytj.png b/src/views/Exhibition/Germany/images/cfytj.png
new file mode 100644
index 0000000..0d89e57
Binary files /dev/null and b/src/views/Exhibition/Germany/images/cfytj.png differ
diff --git a/src/views/Exhibition/Germany/images/gyfrj.png b/src/views/Exhibition/Germany/images/gyfrj.png
new file mode 100644
index 0000000..55f57f0
Binary files /dev/null and b/src/views/Exhibition/Germany/images/gyfrj.png differ
diff --git a/src/views/Exhibition/Germany/images/hr.png b/src/views/Exhibition/Germany/images/hr.png
new file mode 100644
index 0000000..f64a4d7
Binary files /dev/null and b/src/views/Exhibition/Germany/images/hr.png differ
diff --git a/src/views/Exhibition/Germany/images/u290.svg b/src/views/Exhibition/Germany/images/u290.svg
new file mode 100644
index 0000000..94f8184
--- /dev/null
+++ b/src/views/Exhibition/Germany/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/Germany/images/u305.svg b/src/views/Exhibition/Germany/images/u305.svg
new file mode 100644
index 0000000..e68182a
--- /dev/null
+++ b/src/views/Exhibition/Germany/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