diff --git a/src/assets/css/iconfont/iconfont.css b/src/assets/css/iconfont/iconfont.css
index 82bcd92..7b53da9 100644
--- a/src/assets/css/iconfont/iconfont.css
+++ b/src/assets/css/iconfont/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4404806 */
-  src: url('iconfont.woff2?t=1719991936473') format('woff2'),
-       url('iconfont.woff?t=1719991936473') format('woff'),
-       url('iconfont.ttf?t=1719991936473') format('truetype');
+  src: url('iconfont.woff2?t=1721977017018') format('woff2'),
+       url('iconfont.woff?t=1721977017018') format('woff'),
+       url('iconfont.ttf?t=1721977017018') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-caijishebeixinxichaxun:before {
+  content: "\e611";
+}
+
 .icon-yuyin:before {
   content: "\e905";
 }
diff --git a/src/assets/css/iconfont/iconfont.ttf b/src/assets/css/iconfont/iconfont.ttf
index 8a61c43..abc9ddc 100644
Binary files a/src/assets/css/iconfont/iconfont.ttf and b/src/assets/css/iconfont/iconfont.ttf differ
diff --git a/src/assets/css/iconfont/iconfont.woff b/src/assets/css/iconfont/iconfont.woff
index 7238eb6..3f1beee 100644
Binary files a/src/assets/css/iconfont/iconfont.woff and b/src/assets/css/iconfont/iconfont.woff differ
diff --git a/src/assets/css/iconfont/iconfont.woff2 b/src/assets/css/iconfont/iconfont.woff2
index 27b575d..c658771 100644
Binary files a/src/assets/css/iconfont/iconfont.woff2 and b/src/assets/css/iconfont/iconfont.woff2 differ
diff --git a/src/assets/header/CHT.png b/src/assets/header/CHT.png
new file mode 100644
index 0000000..4c36d66
Binary files /dev/null and b/src/assets/header/CHT.png differ
diff --git a/src/assets/img/CHBJ.png b/src/assets/img/CHBJ.png
new file mode 100644
index 0000000..d49165f
Binary files /dev/null and b/src/assets/img/CHBJ.png differ
diff --git a/src/components/headerBox/header3.vue b/src/components/headerBox/header3.vue
new file mode 100644
index 0000000..c106771
--- /dev/null
+++ b/src/components/headerBox/header3.vue
@@ -0,0 +1,584 @@
+<!--
+ * @FilePath: header3.vue
+ * @Author: zz
+ * @Date: 2024-07-19 08:16:33
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-19 09:14:40
+ * @Descripttion: 
+-->
+<!--
+ * @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> -->
+          <el-button type="primary" :icon="Clock" text @click="showDialog"
+            >历史记录</el-button
+          >
+        </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>
+    <HDialog
+      :tableData="dialogdata"
+      v-model:dialogTableVisible="dialogTableVisible"
+      :dialogLoading="dialogLoading"
+      @getDialogdatafun="getDialogdatafun"
+      :type="AbnormalType.type"
+      :total="dialogtotal"
+    ></HDialog>
+  </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";
+import HDialog from "./dialog/headerDialog.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 dialogTableVisible = ref(false);
+let dialogLoading = ref(true);
+let dialogtotal = ref(0);
+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[];
+}>();
+
+window.document.title = props.title;
+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 "简体中文";
+  }
+}
+function showDialog() {
+  if (dialogTableVisible.value == false) {
+    getDialogdatafun({
+      type: AbnormalType.type,
+      pageSize: 10,
+      pageNum: 1,
+    });
+  }
+  Abnormalpopovervisible.value = false;
+  dialogTableVisible.value = true;
+}
+async function getDialogdatafun(config) {
+  dialogLoading.value = true;
+  let result: any = await getAlarmListHistoryData(config);
+
+  if (result.code == 200) {
+    dialogtotal.value = result.total;
+    dialogdata.value = result.rows;
+    dialogLoading.value = false;
+  } else {
+    setTimeout(() => {
+      if (dialogLoading.value) {
+        dialogLoading.value = false;
+      }
+    }, 0);
+  }
+}
+//判断是否显示对应组件后所做操作
+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/CHT.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;
+}
+.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: 350px;
+  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/http/changHao/index.ts b/src/http/changHao/index.ts
new file mode 100644
index 0000000..46e2f6b
--- /dev/null
+++ b/src/http/changHao/index.ts
@@ -0,0 +1,39 @@
+/*
+ * @FilePath: index.ts
+ * @Author: zz
+ * @Date: 2024-07-29 08:13:59
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-29 16:15:35
+ * @Descripttion: 
+ */
+import {get,post} from "@/utils/http"
+
+// 设备信息
+ export function reqdevicebyid(data:any){
+  return get('/socket/getdevicebyid/'+ data.id)
+ }
+ 
+// 耗电量
+ export function  reqtelectricity(data:any){
+  return get('/socket/getelectricity/' + data.id)
+ }
+
+ // 生产情况列表
+ export function  reqproinfo(data:any){
+  return get('/socket/getproinfo/' + data.id)
+ }
+
+  // 故障时长
+  export function  reqfaultinfo(data:any){
+    return get('/socket/getfaultinfo/' + data.id)
+   }
+
+     // 急停时长
+  export function  reqstopinfo(data:any){
+    return get('/socket/getstopinfo/' + data.id)
+   }
+
+// 设备告警
+  export function reqtalarm(data:any){
+    return get('/socket/getalarm/' + data.id)
+   }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 07fdd78..0ac77cc 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -378,6 +378,13 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import("../views/Exhibition/Germany/loop.vue"),
       },
 
+      // 昌昊大屏
+      {
+        path:"/ChangHaoView_:id",
+        name:"ChangHaoView",
+        component: () => import("../views/ChangHaoView/index.vue"),
+
+      },
 
 
 
diff --git a/src/views/ChangHaoView/components/Border.vue b/src/views/ChangHaoView/components/Border.vue
new file mode 100644
index 0000000..06f892d
--- /dev/null
+++ b/src/views/ChangHaoView/components/Border.vue
@@ -0,0 +1,28 @@
+<!--
+ * @FilePath: Border.vue
+ * @Author: zz
+ * @Date: 2024-07-19 10:10:26
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-20 17:20:58
+ * @Descripttion: 
+-->
+<template>
+  <div class="box" style="text-align: center">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style scoped>
+.box {
+  background: linear-gradient(to top, #2667ab, #2667ab) left top no-repeat,
+    /*上左*/ linear-gradient(to right, #2667ab, #2667ab) left top no-repeat,
+    /*左上*/ linear-gradient(to left, #2667ab, #2667ab) right top no-repeat,
+    /*上右*/ linear-gradient(to bottom, #2667ab, #2667ab) right top no-repeat,
+    /*上右*/ linear-gradient(to left, #2667ab, #2667ab) left bottom no-repeat,
+    /*下左*/ linear-gradient(to bottom, #2667ab, #2667ab) left bottom no-repeat,
+    /*左下*/ linear-gradient(to top, #2667ab, #2667ab) right bottom no-repeat,
+    /*下右*/ linear-gradient(to left, #2667ab, #2667ab) right bottom no-repeat; /*右下*/
+  background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;
+  background-color: rgba(36, 56, 128, 0.04);
+}
+</style>
diff --git a/src/views/ChangHaoView/components/Center.vue b/src/views/ChangHaoView/components/Center.vue
new file mode 100644
index 0000000..5ca47fb
--- /dev/null
+++ b/src/views/ChangHaoView/components/Center.vue
@@ -0,0 +1,105 @@
+<!--
+ * @FilePath: Center.vue
+ * @Author: zz
+ * @Date: 2024-07-19 11:04:25
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-19 11:11:38
+ * @Descripttion: 
+-->
+<template>
+  <Border class="center">
+    <v-chart :option="options" class="line"></v-chart>
+  </Border>
+</template>
+<script setup lang="ts">
+import Border from "./Border.vue";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onUpdated,
+  defineProps,
+  computed,
+} from "vue";
+const { proxy } = getCurrentInstance() as any;
+
+let lineRef = ref();
+let lineChart = null;
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: [],
+  },
+});
+// 折线图配置
+
+let options = computed(() => {
+  return {
+    tooltip: {
+      trigger: "axis",
+    },
+    backgroundColor: "transparent",
+    legend: {
+      data: ["日耗电曲线"],
+      icon: "none",
+      right: "10px",
+      textStyle: {
+        color: "#ff7b12",
+        fontSize: 20,
+        fontWeight: "bold",
+      },
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      // data: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
+      data: props.data.x,
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        formatter: "{value} ",
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: "dashed",
+        },
+      },
+    },
+    series: [
+      {
+        name: "日耗电曲线",
+        type: "line",
+        stack: "Total",
+        lineStyle: {
+          color: "#ff7b12",
+        },
+        // data: [120, 135, 101, 134, 90, 230, 210],
+        data: props.data.y,
+        symbol: "none",
+        smooth: true,
+      },
+    ],
+  };
+});
+</script>
+<style scoped>
+.center {
+  height: 30%;
+  width: 94%;
+  margin: 2% 3%;
+}
+.line {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/ChangHaoView/components/CenterBottom.vue b/src/views/ChangHaoView/components/CenterBottom.vue
new file mode 100644
index 0000000..4518114
--- /dev/null
+++ b/src/views/ChangHaoView/components/CenterBottom.vue
@@ -0,0 +1,129 @@
+<!--
+ * @FilePath: CenterBottom.vue
+ * @Author: zz
+ * @Date: 2024-07-19 11:04:25
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-19 11:08:37
+ * @Descripttion: 
+-->
+<template>
+  <Border class="centerbottom">
+    <h2 class="components-header">
+      <DecorationFadeOut> &nbsp;{{ title }}&nbsp; </DecorationFadeOut>
+    </h2>
+    <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
+  </Border>
+</template>
+<script setup lang="ts">
+import Border from "./Border.vue";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onUpdated,
+  defineProps,
+  computed,
+  reactive,
+  watch,
+} from "vue";
+const { proxy } = getCurrentInstance() as any;
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
+import ZdScrollBoard from "@/components/data-view/index.vue";
+const prop = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  data: {
+    type: Object,
+    default: () => ({
+      list: [],
+    }),
+  },
+});
+
+const devList = ref(null);
+let config = reactive({
+  header: [
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "程序名称" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "刀具号" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "加工数量" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "操作模式" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "运行模式" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "实际加工周期 " + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "轴状态" + "</span>",
+    '<span style="color:#AEEEFAFE;font-size:18px;">' + "实际加工时间" + "</span>",
+  ],
+
+  headerBGC: "rgba(0, 11, 18, 1)",
+  oddRowBGC: "#0d1625",
+  evenRowBGC: "#000F1D",
+  wrap: [false, false, false, false, false],
+  columnWidth: [130, 120, 130, 120, 130, 160, 130, 160],
+  align: ["center", "center", "center", "center", "center", "center", "center", "center"],
+  rowNum: 3,
+  fontsize: "18px",
+  waitTime: 3000,
+  // data: computed(() => prop.data),
+});
+
+const handleData = () => {
+  let config_data = prop.data.map((item: any) => {
+    let statusString;
+    if (item.axisstatus === 0) {
+      statusString = "***";
+    } else if (item.axisstatus === 1) {
+      statusString = "移动";
+    } else if (item.axisstatus === 2) {
+      statusString = "暂停";
+    } else {
+      // 可选：如果axisstatus不是0、1或2，你可以设置一个默认值或抛出错误
+      statusString = "未知状态";
+    }
+    return [
+      item.procedurename,
+      item.knifenum,
+      item.pronum,
+      item.operate,
+      item.run,
+      item.machining + "min",
+      statusString,
+      item.processingtime + "s",
+    ];
+  });
+  console.log(config_data, "-------------");
+  if (devList.value) {
+    devList.value.updateRows(config_data, config);
+  }
+};
+watch(
+  () => prop.data,
+  (newVal, oldVal) => {
+    handleData();
+  },
+  { deep: true }
+);
+onMounted(() => {
+  // console.log(config_data);
+});
+</script>
+<style scoped>
+.centerbottom {
+  height: 30%;
+  width: 94%;
+  margin: 2% 3%;
+}
+.components-header {
+  font-size: 20px;
+  margin-bottom: 20px;
+  color: #00c7ebfc;
+}
+.dev-list {
+  width: 100%;
+  height: 75%;
+}
+:deep(.zd-scroll-board .rows .row-item) {
+  font-size: 18px;
+}
+</style>
diff --git a/src/views/ChangHaoView/components/CenterTop.vue b/src/views/ChangHaoView/components/CenterTop.vue
new file mode 100644
index 0000000..d90ca3b
--- /dev/null
+++ b/src/views/ChangHaoView/components/CenterTop.vue
@@ -0,0 +1,270 @@
+<template>
+  <Border class="centertop">
+    <!-- <div ref="gaugeRef" id="gauge" style="width: 800px; height: 300px"></div> -->
+    <v-chart class="chart" :option="option" style="width: 800px; height: 300px" />
+  </Border>
+</template>
+<script setup lang="ts">
+import Border from "./Border.vue";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onUpdated,
+  defineProps,
+  computed,
+} from "vue";
+const { proxy } = getCurrentInstance() as any;
+let gaugeRef = ref();
+let gaugeChart = null;
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: [],
+  },
+});
+const option = computed(() => {
+  return {
+    tooltip: {
+      formatter: "{a} <br/>{c} {b}",
+    },
+    backgroundColor: "transparent",
+    series: [
+      {
+        name: "稼动率",
+        type: "gauge",
+        z: 3,
+        min: 0,
+        max: 100,
+        radius: "85%",
+        axisLine: {
+          lineStyle: {
+            width: 4,
+            color: [
+              [0.9, "#00b2b9"],
+              [1, "#e60007"],
+            ],
+          },
+        },
+        //指针
+        pointer: {
+          itemStyle: {
+            color: "auto",
+          },
+        },
+        axisTick: {
+          distance: 1,
+          length: 5, //长度
+          splitNumber: 5, //数量
+          lineStyle: { color: "#464646" }, //小刻度
+        },
+        //分隔线
+        splitLine: {
+          distance: -3,
+          length: 14,
+          lineStyle: {
+            color: "auto",
+          },
+        },
+        axisLabel: {
+          color: "#fbffff",
+          distance: 10,
+          fontSize: 16,
+          fontWeight: "bolder",
+        },
+        title: {
+          offsetCenter: ["0", "90%"],
+          textStyle: {
+            fontWeight: "bolder",
+            fontSize: 20,
+            color: "#fbffff",
+          },
+        },
+        detail: {
+          formatter: "{value} %",
+          // formatter(params) {
+          //   return `${params.name}${params.value}h`;
+          // },
+          color: "inherit",
+          fontSize: 40,
+          textStyle: {
+            fontWeight: "bolder",
+          },
+        },
+        // data: [
+        //   {
+        //     value: 45.9,
+        //     name: "稼动率",
+        //   },
+        // ],
+        data: [
+          props.data.find((item) => item.name === "稼动率") || {
+            value: 0,
+            name: "稼动率",
+          },
+        ],
+      },
+      {
+        name: "主轴转速",
+        type: "gauge",
+        center: ["20%", "55%"],
+        radius: "55%",
+        min: 0,
+        max: 100,
+        endAngle: 45,
+        splitNumber: 10,
+        axisLine: {
+          lineStyle: {
+            width: 3,
+            color: [
+              [0.9, "#00b2b9"],
+              [1, "#e60007"],
+            ],
+          },
+        },
+        axisTick: {
+          distance: 1,
+          length: 5, //长度
+          splitNumber: 5, //数量
+          lineStyle: { color: "#464646" }, //小刻度
+        },
+        //分隔线
+        splitLine: {
+          distance: -2,
+          length: 10,
+          lineStyle: {
+            color: "auto",
+          },
+        },
+        axisLabel: {
+          show: false,
+        },
+        title: {
+          offsetCenter: ["0", "115%"],
+          textStyle: {
+            fontWeight: "bolder",
+            fontSize: 20,
+            color: "#fbffff",
+          },
+        },
+        detail: {
+          formatter: "{value}R/Min ",
+          color: "inherit",
+          fontSize: 20,
+          textStyle: {
+            fontWeight: "bolder",
+          },
+        },
+        // data: [
+        //   {
+        //     value: 99.1,
+        //     name: "主轴转速",
+        //   },
+        // ],
+        data: [
+          props.data.find((item) => item.name === "主轴转速") || {
+            value: 0,
+            name: "主轴转速",
+          },
+        ],
+        //指针
+        pointer: {
+          width: 5,
+          itemStyle: {
+            color: "auto",
+          },
+        },
+      },
+      {
+        name: "进给速度",
+        type: "gauge",
+        center: ["80%", "55%"],
+        radius: "55%",
+        min: 0,
+        max: 100,
+        startAngle: 135,
+        endAngle: -45,
+        splitNumber: 7,
+        axisLine: { lineStyle: { width: 8 } },
+        axisLine: {
+          lineStyle: {
+            width: 3,
+            color: [
+              [0.9, "#00b2b9"],
+              [1, "#e60007"],
+            ],
+          },
+        },
+        axisTick: {
+          distance: 1,
+          length: 5, //长度
+          splitNumber: 5, //数量
+          lineStyle: { color: "#464646" }, //小刻度
+        },
+        //分隔线
+        splitLine: {
+          distance: -2,
+          length: 10,
+          lineStyle: {
+            color: "auto",
+          },
+        },
+        axisLabel: {
+          show: false,
+        },
+        title: {
+          offsetCenter: ["0", "115%"],
+          textStyle: {
+            fontWeight: "bolder",
+            fontSize: 20,
+            color: "#fbffff",
+          },
+        },
+        detail: {
+          formatter: "{value}MM/Min",
+          color: "inherit",
+          fontSize: 20,
+          textStyle: {
+            fontWeight: "bolder",
+          },
+        },
+        // data: [
+        //   {
+        //     value: 45.5,
+        //     name: "进给速度",
+        //   },
+        // ],
+        data: [
+          props.data.find((item) => item.name === "进给速度") || {
+            value: 0,
+            name: "进给速度",
+          },
+        ],
+        //指针
+        pointer: {
+          width: 5,
+          itemStyle: {
+            color: "auto",
+          },
+        },
+      },
+    ],
+  };
+});
+</script>
+<style scoped>
+.centertop {
+  height: 30%;
+  width: 94%;
+  margin: 2% 3%;
+}
+.gauge {
+  width: 800px;
+  height: 600px;
+}
+.chart {
+  padding-left: 50px;
+}
+</style>
diff --git a/src/views/ChangHaoView/components/LeftBottom.vue b/src/views/ChangHaoView/components/LeftBottom.vue
new file mode 100644
index 0000000..d0e4672
--- /dev/null
+++ b/src/views/ChangHaoView/components/LeftBottom.vue
@@ -0,0 +1,29 @@
+<template>
+  <Border class="leftbottom">
+    <devStatusTip
+      :title="'设备告警'"
+      :tipList="tipList"
+      :label="{ name: '设备名称', alarmcode: '告警代码', alarminfo: '提示' }"
+      :per_view="4"
+    ></devStatusTip>
+  </Border>
+</template>
+<script setup lang="ts">
+import { ref, defineProps } from "vue";
+import Border from "./Border.vue";
+import devStatusTip from "./devStatusTip.vue";
+
+const props = defineProps({
+  tipList: {
+    type: Array as () => Array<{ name: string; alarmcode: string; alarminfo: string }>,
+    required: true,
+  },
+});
+</script>
+<style scoped>
+.leftbottom {
+  margin: 4%;
+  height: 41%;
+  /* width: 480px; */
+}
+</style>
diff --git a/src/views/ChangHaoView/components/LeftTop.vue b/src/views/ChangHaoView/components/LeftTop.vue
new file mode 100644
index 0000000..f9e1f0b
--- /dev/null
+++ b/src/views/ChangHaoView/components/LeftTop.vue
@@ -0,0 +1,198 @@
+<template>
+  <Border class="lefttop">
+    <h2 class="components-header">
+      <DecorationFadeOut> &nbsp;{{ title }}&nbsp; </DecorationFadeOut>
+    </h2>
+    <div class="chart-and-status">
+      <div ref="ringRef" class="ring"></div>
+      <!-- 新增的运行时间显示区域 -->
+      <div class="status-display">
+        <ul>
+          <li v-for="(item, index) in data" :key="item.key" class="status-item">
+            <span class="color-bar" :style="{ backgroundColor: colors[index] }"></span>
+            <span class="label">{{ item.name }}:</span>
+            <span class="value" :style="{ color: colors[index] }"
+              >{{ item.value }}min</span
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+  </Border>
+</template>
+
+<script setup lang="ts">
+import Border from "./Border.vue";
+import * as echarts from "echarts";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onUpdated,
+  defineProps,
+  computed,
+} from "vue";
+const { proxy } = getCurrentInstance() as any;
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
+let ringRef = ref();
+let ringChart = null;
+
+const prop = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  data: {
+    type: Array,
+    default: [],
+  },
+  statusList: {
+    type: Array as any,
+    default: () => [],
+  },
+});
+// 生成颜色数组的计算属性
+const colors = computed(() => {
+  const baseColors = ["#44ce81", "#ff4f4e", "#a3a2a7", "#e9ac53", "#ff0700"]; // 示例颜色
+  return prop.data.map((_, index) => {
+    return baseColors[index % baseColors.length]; // 循环使用颜色数组
+  });
+});
+// 环形图配置
+const init = () => {
+  ringChart = proxy.$echarts.init(ringRef.value, "dark");
+  let option = {
+    tooltip: {
+      trigger: "item",
+    },
+    color: ["#44ce81", "#ff4f4e", "#a3a2a7", "#e9ac53", "#ff0700"],
+    backgroundColor: "transparent",
+    legend: {
+      show: false,
+      // 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}min`;
+          },
+          fontSize: 18,
+          fontWeight: 500,
+        },
+        labelLine: {
+          show: true,
+        },
+        top: "5%",
+        data: prop.data,
+      },
+    ],
+  };
+  ringChart.setOption(option);
+};
+onUpdated(() => {
+  ringChart.setOption({
+    series: [
+      {
+        data: prop.data,
+      },
+    ],
+  });
+});
+
+// 初始化 ECharts 实例
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped>
+.lefttop {
+  margin: 4%;
+  height: 50%;
+  /* width: 480px; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  align-content: space-around;
+}
+.components-header {
+  font-size: 20px;
+  margin-bottom: 20px;
+  color: #00c7ebfc;
+}
+.chart-and-status {
+  width: 100%;
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.ring {
+  width: 100%;
+  height: 100%;
+}
+
+.status-display {
+  width: 90%;
+  color: #f4f4f4;
+  border-radius: 8px;
+  max-width: 600px;
+  margin: 10px auto;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+.color-bar {
+  display: inline-block;
+  width: 5px;
+  height: 20px;
+  margin-right: 1px;
+  vertical-align: middle;
+}
+
+.status-item {
+  display: flex;
+  /* justify-content: space-between; */
+  align-items: center;
+  padding: 5px 0;
+  border-bottom: 1px solid #88beed33;
+  list-style-type: none;
+}
+
+.label {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  display: block;
+  text-align: left !important; /* 使用!important确保左对齐设置被优先考虑 */
+  padding-left: 20px;
+}
+
+.value {
+  font-size: 20px;
+  margin-left: 40%;
+  font-weight: 800;
+}
+
+.status-item:last-child {
+  border-bottom: none;
+}
+</style>
diff --git a/src/views/ChangHaoView/components/Right.vue b/src/views/ChangHaoView/components/Right.vue
new file mode 100644
index 0000000..912217a
--- /dev/null
+++ b/src/views/ChangHaoView/components/Right.vue
@@ -0,0 +1,229 @@
+<!--
+ * @FilePath: Right.vue
+ * @Author: zz
+ * @Date: 2024-07-23 10:17:14
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-29 11:28:49
+ * @Descripttion: 
+-->
+<template>
+  <Border class="righttop">
+    <div class="box-left">
+      <!-- <el-image style="width: 100%; height: 60%" :src="imgSrc" fit="contain"></el-image> -->
+      <div class="iconfont icon-caijishebeixinxichaxun"></div>
+      <div class="device-status">
+        <div
+          class="status-indicator"
+          :style="{ background: status_color[prop.deviceStatus] }"
+        ></div>
+        <span style="margin-left: 10px" :style="{ color: statusTextColor }">{{
+          statusText
+        }}</span>
+      </div>
+    </div>
+    <div class="box-right">
+      <ul style="margin-bottom: 30px">
+        <li v-for="(item, index) in deviceList" :key="item.key" class="device-item">
+          <span class="label">{{ item.label }}&nbsp </span>
+          <span class="value">{{ item.value }}</span>
+        </li>
+      </ul>
+    </div>
+  </Border>
+
+  <Border class="rightcenter">
+    <div class="box-item" style="width: 40%; padding-top: 30px;}">
+      <span class="label">通讯状态:&nbsp&nbsp</span
+      ><span class="value" :style="{ color: comTextColor }">{{ comvalue }}</span>
+    </div>
+    <div class="combox">
+      <div class="top-item1" v-for="(item, index) in comList" :key="item.key">
+        <span class="label">{{ item.label }}:&nbsp&nbsp </span>
+        <span class="value">{{ item.value + item.unit }}</span>
+      </div>
+    </div>
+  </Border>
+
+  <Border class="rightbottom">
+    <div class="box-item" style="width: 40%; padding-top: 30px;}">
+      <span class="label">实时电压、电流</span>
+    </div>
+    <div class="combox">
+      <div class="top-item" v-for="(item, index) in CurList" :key="item.key">
+        <span class="label">{{ item.label }}:&nbsp&nbsp </span>
+        <span class="value">{{ item.value + item.unit }}</span>
+      </div>
+    </div>
+  </Border>
+</template>
+<script setup lang="ts">
+import Border from "./Border.vue";
+import { defineComponent, ref, onMounted, computed } from "vue";
+const prop = defineProps({
+  imgSrc: {
+    type: String,
+    default: "",
+  },
+  deviceList: {
+    type: Array,
+    default: [],
+  },
+  comList: {
+    type: Array,
+    default: [],
+  },
+  CurList: {
+    type: Array,
+    default: [],
+  },
+  communication: {
+    type: Number,
+    default: null,
+  },
+  deviceStatus: {
+    type: Number,
+    default: null,
+  },
+});
+
+// const deviceStatus = ref(1);
+// const communicationValue = ref(5);
+
+const comvalue = computed(() => {
+  switch (prop.communication) {
+    case 5:
+      return "正常";
+    case 15:
+      return "断线";
+    default:
+      return "未知状态";
+  }
+});
+
+const com_color = {
+  "5": "#44ce81",
+  "15": "#c1c1c1",
+};
+const comTextColor = computed(() => {
+  return com_color[prop.communication] || "#000000";
+});
+
+const status_color = {
+  "0": "#FF6E76",
+  "1": "#44ce81",
+};
+
+const statusText = computed(() => {
+  switch (prop.deviceStatus) {
+    case 0:
+      return "停止";
+    case 1:
+      return "运行";
+    default:
+      return "未知状态";
+  }
+});
+const statusTextColor = computed(() => {
+  return status_color[prop.deviceStatus] || "#000000";
+});
+
+// onMounted(() => {
+//   console.log( devStatus.value);
+// }
+</script>
+<style scoped>
+@import url("@/assets/css/iconfont/iconfont.css");
+.righttop {
+  margin: 4%;
+  height: 22%;
+  width: 440px;
+  display: flex; /* 启用 Flexbox 布局 */
+  align-items: center; /* 如果需要，可以在垂直方向上居中对齐子元素 */
+  /* 其他样式，如高度、宽度、边距等 */
+}
+.rightcenter {
+  margin: 4%;
+  height: 40%;
+  width: 440px;
+}
+.rightbottom {
+  margin: 4%;
+  height: 27%;
+  width: 440px;
+}
+.box-left {
+  width: 30%;
+  height: 100%;
+  /* background-color: red; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  align-content: space-around;
+}
+.status-indicator {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: red;
+}
+
+.device-status {
+  width: 80%;
+  font-size: 18px;
+  font-weight: 600;
+  color: #aeeefafe;
+  box-sizing: border-box;
+  padding-left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+}
+.box-right {
+  width: 70%;
+  font-size: 20px;
+}
+.device-item {
+  display: flex;
+  padding: 8px 8px 8px 30px;
+  list-style-type: none;
+}
+.value {
+  color: #5abcfa;
+  font-weight: 700;
+  font-size: 18px;
+}
+.label {
+  font-weight: 800;
+  font-size: 18px;
+}
+/* .comvalue {
+  color: #5abcfa;
+  font-weight: 700;
+  font-size: 20px;
+} */
+.combox {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-top: 10px;
+  vertical-align: middle;
+  .top-item {
+    padding: 10px 10px 10px 20px;
+    width: 40%;
+    display: flex;
+  }
+}
+.top-item1 {
+  padding: 10px 0px 10px 0px;
+  width: 50%;
+  display: flex;
+}
+.iconfont {
+  font-size: 80px;
+  /* color: #00b2b9; */
+}
+</style>
diff --git a/src/views/ChangHaoView/components/devStatusTip.vue b/src/views/ChangHaoView/components/devStatusTip.vue
new file mode 100644
index 0000000..38333ed
--- /dev/null
+++ b/src/views/ChangHaoView/components/devStatusTip.vue
@@ -0,0 +1,241 @@
+<!--
+ * @FilePath: devStatusTip.vue
+ * @Author: zz
+ * @Date: 2024-07-20 17:06:42
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-20 17:57:53
+ * @Descripttion: 
+-->
+<!--
+ * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\devStatusTip.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-06-12 08:52:40
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+  <div style="height: 100%; width: 100%">
+    <h2 class="components-header">
+      <DecorationFadeOut> &nbsp;{{ title }}&nbsp; </DecorationFadeOut>
+    </h2>
+    <div class="components-content" :key="keynum">
+      <swiper-container
+        :slidesPerView="props.per_view"
+        :loop="true"
+        :initialSlide="0"
+        :spaceBetween="0"
+        direction="vertical"
+        :autoplay="{
+          delay: 3000,
+          disableOnInteraction: false,
+        }"
+        autoHeight="true"
+        observer="true"
+        observeParents="true"
+        @progress="onProgress"
+        :loopAdditionalSlides="1"
+        @slidechange="onSlideChange"
+        v-if="props.tipList.length > 0"
+      >
+        <swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
+          <div class="itemclass">
+            <el-row :gutter="5" class="row-flex">
+              <el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px">
+                {{ index + 1 }}
+              </el-col>
+              <el-col
+                :span="18"
+                class="col-flex"
+                style="
+                  flex-direction: column;
+                  font-size: 18px;
+                  color: #fff;
+                  align-items: flex-start;
+                "
+              >
+                <p class="item-name">
+                  <span class="item-name-key">{{ label.name }}：</span
+                  ><span class="item-name-value">{{ res.name }}</span>
+                </p>
+                <p style="margin-top: 10px 0">
+                  <span>{{ label.alarmcode }}：</span
+                  ><span>{{ res.alarmcode }}</span> &nbsp;
+                  <span>{{ label.alarminfo }}：</span><span>{{ res.alarminfo }}</span>
+                </p>
+              </el-col>
+              <el-col
+                :span="4"
+                class="col-flex"
+                style="font-size: 25px; font-weight: bold"
+                :style="{ color: compare[res.status] ? compare[res.status] : 'red' }"
+              >
+                {{ res.status }}
+              </el-col>
+            </el-row>
+          </div>
+        </swiper-slide>
+        <template
+          v-if="
+            props.tipList.length >= props.per_view &&
+            props.tipList.length < props.per_view * 2
+          "
+        >
+          <swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
+            <div class="itemclass">
+              <el-row :gutter="5" class="row-flex">
+                <el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px">
+                  {{ index + 1 }}
+                </el-col>
+                <el-col
+                  :span="18"
+                  class="col-flex"
+                  style="
+                    flex-direction: column;
+                    font-size: 18px;
+                    color: #fff;
+                    align-items: flex-start;
+                  "
+                >
+                  <p class="item-name">
+                    <span class="item-name-key">{{ label.name }}：</span
+                    ><span class="item-name-value">{{ res.name }}</span>
+                  </p>
+                  <p style="margin-top: 10px 0">
+                    <span>{{ label.alarmcode }}：</span
+                    ><span>{{ res.alarmcode }}</span> &nbsp;
+                    <span>{{ label.alarminfo }}：</span><span>{{ res.alarminfo }}</span>
+                  </p>
+                </el-col>
+                <el-col
+                  :span="4"
+                  class="col-flex"
+                  style="font-size: 25px; font-weight: bold"
+                  :style="{ color: compare[res.status] ? compare[res.status] : 'red' }"
+                >
+                  {{ res.status }}
+                </el-col>
+              </el-row>
+            </div>
+          </swiper-slide>
+        </template>
+      </swiper-container>
+      <div
+        v-else
+        style="
+          display: flex;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+          justify-content: center;
+        "
+      >
+        <el-empty :image-size="120" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
+import { register } from "swiper/element/bundle";
+import { useI18n } from "vue-i18n";
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
+let { t } = useI18n();
+register();
+const props: any = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  tipList: {
+    type: Array,
+    default: [{ name: "", alarmcode: "", alarminfo: "" }],
+  },
+  label: {
+    type: Object,
+    default: { name: "设备名称", alarmcode: "告警代码", alarminfo: "提示" },
+  },
+  per_view: {
+    type: Number,
+    default: 5,
+  },
+});
+let compare = {
+  进行中: "#83C710",
+  未开始: "#E44610",
+  未进行: "#E54711",
+  故障: "#DA0F10",
+  维修中: "#83C710",
+};
+let useSwiper: any = ref(null);
+let swiperRef = ref(null);
+let listVal = ref([]);
+let keynum = ref(0);
+watch(
+  () => props.tipList,
+  (val) => {
+    keynum.value++;
+  },
+  { deep: true }
+);
+
+const onProgress = (e) => {};
+
+const onSlideChange = (e) => {};
+</script>
+
+<style scoped>
+.components-header {
+  width: 100%;
+  text-align: center;
+  color: #00c7ebfc;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.components-content {
+  height: 90%;
+  width: 100%;
+}
+
+.itemclass {
+  display: flex;
+  height: 100%;
+  width: 120%;
+  align-items: center;
+  /* border-bottom: #0545a1 1px solid; */
+}
+
+.row-flex {
+  width: 100%;
+  height: 100%;
+}
+
+.col-flex {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.swiper,
+swiper-container {
+  width: 100%;
+  height: 100%;
+  display: inline-block !important;
+}
+
+.item-name {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.item-name-key {
+  width: 92px;
+}
+.item-name-value {
+  flex: 1;
+  text-align: left;
+}
+</style>
diff --git a/src/views/ChangHaoView/config.js b/src/views/ChangHaoView/config.js
new file mode 100644
index 0000000..de5084a
--- /dev/null
+++ b/src/views/ChangHaoView/config.js
@@ -0,0 +1,22 @@
+export const caozuomoshi = {
+  '0': 'MDI',
+  '1':'MEM',
+  '2':'***',
+  '3':'EDIT',
+  '4':'HND',
+  '5':'JOG',
+  '6':'Teach in JOG',
+  '7':'Teaxh in HaNDle ' ,
+  '8':'INC',
+  '9':'REF',
+  '10':'RMF',
+}
+
+export const yunxingmoshi ={
+  '0': '****',
+  '1':'STOP ',
+  '2':'***',
+  '3':'HOLD',
+  '4':'START',
+  '5':'MSTR',
+}
\ No newline at end of file
diff --git a/src/views/ChangHaoView/index.vue b/src/views/ChangHaoView/index.vue
new file mode 100644
index 0000000..41835ec
--- /dev/null
+++ b/src/views/ChangHaoView/index.vue
@@ -0,0 +1,330 @@
+<!--
+ * @FilePath: index.vue
+ * @Author: zz
+ * @Date: 2024-07-18 17:18:08
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-20 17:23:36
+ * @Descripttion: 
+-->
+<template>
+  <div class="container">
+    <div class="header">
+      <div class="title">
+        <header3
+          ref="headerref"
+          :width="'100%'"
+          :height="'100px'"
+          :title="title"
+          :titleTip="[]"
+          :typeFun="['time', 'comback']"
+          :alarmType="[]"
+        ></header3>
+      </div>
+    </div>
+    <div class="border-box">
+      <dv-border-box-1 class="box-left" style="width: 30%"
+        ><h2 class="title2">设备运行</h2>
+        <LeftTop :data="ringData" :title="'设备实时状态'"></LeftTop>
+        <LeftBottom :tipList="tipList"></LeftBottom>
+      </dv-border-box-1>
+
+      <dv-border-box-1 class="box-center" style="width: 50%"
+        ><h2 class="title2">设备绩效</h2>
+        <CenterTop :data="gaugeData"></CenterTop>
+        <Center :data="lineData"></Center>
+        <CenterBottom :data="prodData" :title="'当日生产情况'"></CenterBottom>
+      </dv-border-box-1>
+
+      <dv-border-box-1 class="box-right" style="width: 30%"
+        ><h2 class="title2">设备信息</h2>
+        <Right
+          :deviceList="deviceList"
+          :comList="comList"
+          :CurList="CurList"
+          :communication="communication"
+          :deviceStatus="deviceStatus"
+        ></Right>
+      </dv-border-box-1>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  ref,
+  reactive,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  watch,
+  onUpdated,
+  computed,
+} from "vue";
+import header3 from "./../../components/headerBox/header3.vue";
+import LeftTop from "./components/LeftTop.vue";
+import LeftBottom from "./components/LeftBottom.vue";
+import CenterTop from "./components/CenterTop.vue";
+import { useRoute } from "vue-router";
+import Center from "./components/Center.vue";
+import CenterBottom from "./components/CenterBottom.vue";
+import Right from "./components/Right.vue";
+import {
+  reqdevicebyid,
+  reqtelectricity,
+  reqproinfo,
+  reqfaultinfo,
+  reqstopinfo,
+  reqtalarm,
+} from "@/http/changHao";
+import { caozuomoshi, yunxingmoshi } from "./config.js";
+import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
+let route = useRoute();
+let device_id = route.params.id;
+// console.log(device_id, "device_id");
+let timer = null;
+let devnum = reactive({
+  on: 0,
+  off: 0,
+  wait: 0,
+});
+let title = ref("设备云眼");
+let ringData = ref([
+  { key: "a046", name: "运行时长", value: "5" },
+  { key: "a036", name: "故障时长", value: "5" },
+  { key: "a044", name: "停机时长", value: "5" },
+  { key: "idletime", name: "空闲时长", value: "5" },
+  { key: "stoptime", name: "急停时长", value: "5" },
+]);
+
+// let deviceList = ref([]);
+// let comList = ref([]);
+// let CurList = ref([]);
+let communication = ref(5);
+let deviceStatus = ref(0);
+
+let deviceList = ref([
+  { key: "devicenum", label: "设备编号", value: " F-20240723456111" },
+  { key: "serialnumber", label: "设备序列号", value: "iFc023456789154" },
+  { key: "description", label: "设备描述", value: "1600立车" },
+  { key: "modelnumber", label: "设备型号", value: "Series" },
+]);
+function getData() {
+  setTimeout(() => {
+    prodData.value = [
+      {
+        procedurename: "0",
+        knifenum: "0",
+        pronum: "0",
+        operate: "0",
+        run: "0",
+        machining: "1.0",
+        axisstatus: 0,
+        processingtime: "0",
+      },
+    ];
+  }, 0);
+}
+const comList = ref([
+  { key: "a017", label: "主轴伺服温度", unit: "℃", value: "E-2" },
+  { key: "a082", label: "累计待机时长", unit: "分钟", value: "iF" },
+  { key: "a021", label: "X轴DC电压", unit: "V", value: "16" },
+  { key: "a085", label: "累计上电时长", unit: "分钟", value: "Ser" },
+  { key: "a022", label: "Y轴DC电压", unit: "V", value: "E-2" },
+  { key: "a006", label: "主轴转速", unit: "R/min", value: "iF" },
+  { key: "a023", label: "Z轴DC电压", unit: "V", value: "16" },
+  { key: "a007", label: "进给速度", unit: "mm/min", value: "589" },
+  { key: "a083", label: "累计故障时长", unit: "秒", value: "789" },
+  { key: "a084", label: "累计运行时长", unit: "分钟", value: "524" },
+]);
+const CurList = ref([
+  { key: "aphasev", label: "A相电压", unit: "V", value: "6.0" },
+  { key: "aphasea", label: "A相电流", unit: "A", value: "8" },
+  { key: "bphasev", label: "B相电压", unit: "V", value: "2" },
+  { key: "bphasea", label: "B相电流", unit: "A", value: "3" },
+  { key: "cphasev", label: "C相电压", unit: "V", value: "5" },
+  { key: "cphasea", label: "C相电流", unit: "A", value: "4" },
+]);
+// }
+
+// 模设备告警数据
+const tipList = ref([{ name: "设备A", alarmcode: "001", alarminfo: "温度过高" }]);
+// 仪表盘数据
+let gaugeData = ref([
+  { key: "utilizationRate", name: "稼动率", value: "46.9" },
+  { key: "a006", name: "主轴转速", value: "91.1" },
+  { key: "a007", name: "进给速度", value: "31.5" },
+]);
+
+// 折线图数据日耗电曲线
+let lineData = ref({
+  y: [120, 135, 101, 134, 90, 230, 210],
+  x: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
+});
+// 生产情况数据
+let prodData = ref([]);
+let deviceinfo = ref({});
+
+// 设备信息接口数据
+function getdevicebyid() {
+  reqdevicebyid({ id: device_id }).then((res: any) => {
+    if (res.code == 0) {
+      title.value = res.data.name;
+      deviceList.value = [
+        { key: "devicenum", label: "设备编号", value: res.data.devicenum },
+        { key: "serialnumber", label: "设备序列号", value: res.data.serialnumber },
+        { key: "description", label: "设备描述", value: res.data.description },
+        { key: "modelnumber", label: "设备型号", value: res.data.modelnumber },
+      ];
+    }
+  });
+}
+
+//耗电量接口
+function getelectricity() {
+  reqtelectricity({ id: device_id }).then((res: any) => {
+    if (res.code == 0) {
+      lineData.value.x = res.data.x;
+      lineData.value.y = res.data.y;
+    }
+  });
+}
+
+// 生产情况接口
+// function getproinfo() {
+//   reqproinfo({ id: device_id }).then((res: any) => {
+//     if (res.code == 0) {
+//       prodData.value = res.data;
+//     }
+//   });
+// }
+// 设备告警接口
+function getalarm() {
+  reqtalarm({ id: device_id }).then((res: any) => {
+    if (res.code == 0) {
+      tipList.value = res.data;
+    }
+  });
+}
+// 故障时长接口
+function getstopinfo() {
+  reqstopinfo({ id: device_id }).then((res: any) => {
+    if (res.code == 0) {
+      ringData.value = ringData.value.map((item) => {
+        if (item.key == "a036") {
+          item.value = res.data.alltime;
+        }
+        if (item.key == "stoptime") {
+          item.value = res.data.allstoptime;
+        }
+        return item;
+      });
+    }
+  });
+}
+
+let a036 = 0;
+//socket
+function getWebsocket(val) {
+  try {
+    let data = JSON.parse(val);
+    if (data.type == "deviceinfo" && data.msg.id == device_id) {
+      let obj = data.msg;
+      if (obj.a036 != a036) {
+        getalarm();
+        a036 = obj.a036;
+      }
+      // 运行状态
+      ringData.value = ringData.value.map((item) => {
+        item.value = obj[item.key];
+        // item.key
+        return item;
+      });
+      // 仪表盘
+      gaugeData.value = gaugeData.value.map((item) => {
+        item.value = obj[item.key];
+        return item;
+      });
+      // 当日生产情况
+      prodData.value = [
+        {
+          procedurename: obj.a039,
+          knifenum: obj.a008,
+          pronum: obj.a005,
+          operate: caozuomoshi[obj.a032] || "未知状态",
+          run: yunxingmoshi[obj.a033] || "未知状态",
+          machining: obj.cycletimeInMinutes,
+          axisstatus: obj.a034,
+          processingtime: obj.a048,
+        },
+      ];
+      // 通讯状态
+      communication.value = obj.a041;
+
+      let tempcomList = comList.value.map((item) => {
+        item.value = obj[item.key];
+        return item;
+      });
+      comList.value = tempcomList;
+
+      // 设备状态
+      deviceStatus.value = obj.a038;
+      // 电压电流
+    }
+    if (data.type == "electinfo" && data.msg.id == device_id) {
+      let obj = data.msg;
+
+      CurList.value = CurList.value.map((item) => {
+        item.value = obj[item.key];
+        return item;
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+function errWebsocket(val) {
+  // console.log(val);
+}
+onMounted(() => {
+  getdevicebyid();
+  getelectricity();
+  // getData();
+  // getproinfo();
+  getalarm();
+  getstopinfo();
+  timer = setInterval(() => {
+    getstopinfo();
+    getalarm();
+  }, 1800000);
+  connectWebsocket(null, null, getWebsocket, errWebsocket);
+});
+onUnmounted(() => {
+  clearInterval(timer);
+});
+</script>
+
+<style scoped>
+.container {
+  height: 1080px;
+  width: 1920px;
+  color: #ffffff;
+  background: url("./../../assets/img/CHBJ.png") no-repeat center center / 100% 100%;
+  background-color: #0e0e0e;
+  position: relative;
+}
+.header {
+  height: 100px;
+  width: 1920px;
+}
+.border-box {
+  width: 100%;
+  height: 90%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.title2 {
+  font-size: 20px;
+  font-weight: 600;
+}
+</style>