diff --git a/.env.prod b/.env.prod
index 1c1f7a14..94c37a72 100644
--- a/.env.prod
+++ b/.env.prod
@@ -21,7 +21,7 @@ VUE_APP_BASE_API = ''
 PUBLIC_PATH = ''
 
 # ws地址
-WSURL = '100.64.0.45:48080'
+VUE_APP_WS_API = 'ws://100.64.0.45:48080'
 
 # 二级部署路径
 VUE_APP_APP_NAME ='yudao-admin'
diff --git a/src/assets/font/font.css b/src/assets/font/font.css
new file mode 100644
index 00000000..b99e18ec
--- /dev/null
+++ b/src/assets/font/font.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: '站酷庆科黄油体';
+  src: url('./站酷庆科黄油体.ttf') format('truetype');;
+}
diff --git a/src/assets/font/站酷庆科黄油体.ttf b/src/assets/font/站酷庆科黄油体.ttf
new file mode 100644
index 00000000..f8f46eed
Binary files /dev/null and b/src/assets/font/站酷庆科黄油体.ttf differ
diff --git a/src/assets/img/cold-data-board-msg1.png b/src/assets/img/cold-data-board-msg1.png
new file mode 100644
index 00000000..ad6eae83
Binary files /dev/null and b/src/assets/img/cold-data-board-msg1.png differ
diff --git a/src/assets/img/cold-data-board-msg2.png b/src/assets/img/cold-data-board-msg2.png
new file mode 100644
index 00000000..9c09c1ee
Binary files /dev/null and b/src/assets/img/cold-data-board-msg2.png differ
diff --git a/src/main.js b/src/main.js
index eb160008..895eddc0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import Element from 'element-ui';
 import './assets/styles/element-variables.scss';
 import '@/assets/styles/index.scss'; // global css
 import '@/assets/styles/ruoyi.scss'; // ruoyi css
+import '@/assets/font/font.css'
 import App from './App';
 import store from './store';
 import router from './router';
@@ -34,7 +35,6 @@ import {
 	getDictDatas,
 	getDictDatas2,
 } from '@/utils/dict';
-
 import './theme/index.css'; // 自定义主题包 - code-brick-zj
 
 // 全局方法挂载
diff --git a/src/views/dashboard/coldDashboard/components/dataBox.vue b/src/views/dashboard/coldDashboard/components/dataBox.vue
new file mode 100644
index 00000000..d582de3f
--- /dev/null
+++ b/src/views/dashboard/coldDashboard/components/dataBox.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="dataBox">
+    <div class="side1"></div>
+    <div class="side2"></div>
+    <div class='titleBox'>
+      <svg-icon icon-class="energy" />
+      {{title}}
+      <span class='line1' style='left: 0px'></span>
+      <span class='line2' style='left: 0px'></span>
+      <span class='line2' style='right: 0px'></span>
+      <span class='line1' style='right: 0px'></span>
+    </div>
+    <span class='lt' v-if='position == "lt"'></span>
+    <span class='rt' v-if='position == "rt"'></span>
+    <span class='lb' v-if='position == "lb"'></span>
+    <span class='rb' v-if='position == "rb"'></span>
+    <div class="centerBox">
+      <div class="centerBoxItem1">
+        <span class='num'>{{msgData?.cut || '-'}}片</span>
+        <span class='name'>- 预计切割片数 -</span>
+      </div>
+      <div class="centerBoxItem1">
+        <span class='num'>{{msgData?.allRatio ? msgData?.allRatio*100:'-'}}%</span>
+        <span class='name'>- 综合面积良品率 -</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>掰边后片数：</span>
+        <span class='num'>{{msgData?.bai || '-'}}片</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>掰边后良品率：</span>
+        <span class='num'>{{msgData?.baiRatio ? msgData?.baiRatio*100 : '-'}}%</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>顶板后片数：</span>
+        <span class='num'>{{msgData?.ding || '-'}}片</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>顶板后良品率：</span>
+        <span class='num'>{{msgData?.dingRatio ? msgData?.dingRatio*100 : '-'}}%</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>下片片数：</span>
+        <span class='num'>{{msgData?.xia || '-'}}片</span>
+      </div>
+      <div class="centerBoxItem2">
+        <span class='name'>下片良品率：</span>
+        <span class='num'>{{msgData?.xiaRatio ? msgData?.xiaRatio*100 : '-'}}%</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'DataBox',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    position:{
+      type: String,
+      default: ''
+    },
+    msgData: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {}
+}
+</script>
+<style lang="scss" scoped>
+.dataBox {
+  width: 909px;
+  height: 430px;
+  position: relative;
+  overflow: hidden;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    z-index: 0;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 909px;
+    height: 2px;
+    border-radius: 2px;
+    left: 0;
+    bottom: 0;
+    background: radial-gradient(circle at center,
+      rgba(88, 194, 255, 1) 10%,
+      rgba(0, 176, 243, 0) 90%,
+        transparent);
+  }
+  .side1 {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 400px;
+    width: 2px;
+    border-radius: 2px;
+    top: 40px;
+    left: 0;
+    background: radial-gradient(circle at center,
+      rgba(88, 194, 255, 1) 10%,
+      rgba(0, 176, 243, 0) 80%,
+        transparent);
+  }
+  .side2 {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    height: 400px;
+    width: 2px;
+    border-radius: 2px;
+    top: 40px;
+    right: 0;
+    background: radial-gradient(circle at center,
+      rgba(88, 194, 255, 1) 10%,
+      rgba(0, 176, 243, 0) 80%,
+        transparent);
+  }
+    
+  .titleBox {
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    padding-left: 23px;
+    background-color: rgba(0, 106, 205, 0.22);
+    font-size: 22px;
+    color: #fff;
+    .line1 {
+      display: inline-block;
+      width: 2px;
+      height: 16px;
+      background-color: #0078E4;
+      position: absolute;
+      top: 0px;
+    }
+    .line2 {
+      display: inline-block;
+      width: 16px;
+      height: 2px;
+      background-color: #0078E4;
+      position: absolute;
+      top: 0px;
+    }
+  }
+  .lt {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent; 
+    border-left-color: #1F8FFF;
+    border-top-color: #1F8FFF;
+  }
+  .rt {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent; 
+    border-right-color: #1F8FFF;
+    border-top-color: #1F8FFF;
+  }
+  .lb {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent; 
+    border-left-color: #1F8FFF;
+    border-bottom-color: #1F8FFF;
+  }
+  .rb {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 10px solid transparent; 
+    border-right-color: #1F8FFF;
+    border-bottom-color: #1F8FFF;
+  }
+  .centerBox {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: space-between;
+    padding: 20px 24px 35px 24px;
+    .centerBoxItem1 {
+      width: 426px;
+      height: 106px;
+      background: url(../../../../assets/img/cold-data-board-msg1.png) no-repeat;
+      background-size: 100% 100%;
+      margin-bottom: 16px;
+      box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
+      text-align: center;
+      .num {
+        font-family: '站酷庆科黄油体';
+        font-size: 32px;
+        font-weight: bold;
+        display: block;
+        margin-top:15px;
+        margin-bottom: 3px;
+        color: #48D6FF;
+        letter-spacing: 6px;
+        text-shadow: 1px 4px 2px #000000;
+      }
+      .name {
+        display: block;
+        font-size: 20px;
+        letter-spacing: 1px;
+        color: rgba(255,255,255,0.9);
+      }
+    }
+    .centerBoxItem2 {
+      width: 426px;
+      height: 56px;
+      line-height: 56px;
+      background: url(../../../../assets/img/cold-data-board-msg2.png) no-repeat;
+      background-size: 100% 100%;
+      margin-bottom: 16px;
+      font-size: 20px;
+      letter-spacing: 1px;
+      .name {
+        display: inline-block;
+        text-align: right;
+        width: 213px;
+        color: rgba(255,255,255,0.9);
+      }
+      .num {
+        display: inline-block;
+        text-align: left;
+        width: 213px;
+        color: #15C1F2;
+      }
+    }
+  }
+}
+.dataBox > * {
+  position: relative;
+  z-index: 1;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/coldDashboard/index.vue b/src/views/dashboard/coldDashboard/index.vue
new file mode 100644
index 00000000..2a8cd01a
--- /dev/null
+++ b/src/views/dashboard/coldDashboard/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <div id="coldContainerB" ref="coldContainerB" style="width: 100%; height: 100%">
+    <div id="coldContainer" class="coldContainer" style="width: 1920px; height: 1080px" :style="{ transform: 'scale(' + scaleNum + ')' }">
+      <KHeader
+				:isFullScreen="isFullScreen"
+				@screenfullChange="screenfullChange"
+				topTitle="自贡冷端数据看板" />
+        <DataBox title='原片产线1' position='lt' :msgData='line1' class="box1"/>
+        <DataBox title='原片产线2' position='rt' :msgData='line2' class="box2"/>
+        <DataBox title='原片产线3' position='lb' :msgData='line3' class="box3"/>
+        <DataBox title='原片产线4' position='rb' :msgData='line4' class="box4"/>
+    </div>
+  </div>
+</template>
+<script>
+import KHeader from '../components/Header';
+import DataBox from './components/dataBox';
+import screenfull from 'screenfull';
+import { debounce } from '@/utils/debounce';
+import { getUserProfile } from '@/api/system/user';
+export default {
+  name: 'ColdDashboard',
+  components: {
+		KHeader,
+    DataBox
+	},
+  data() {
+    return {
+      isFullScreen: false,
+      scaleNum:1,
+			permission: false,
+			url: process.env.VUE_APP_WS_API,
+			websock: '',
+			line1:{},
+			line2:{},
+			line3:{},
+			line4:{}
+    }
+  },
+	created() {
+		this.init();
+		this.permission = false;
+		getUserProfile().then((response) => {
+			const user = response.data;
+			if (user.roles[0].name !== 'dashborad') {
+				this.permission = true;
+			} else {
+				this.permission = false;
+			}
+      this.initWebSocket();
+		});
+	},
+  mounted() {
+		this.boxReset();
+		window.addEventListener('resize', this.boxReset);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.boxReset);
+		this.websocketclose();
+	},
+  methods: {
+    boxReset() {
+			debounce(() => {
+				this.resetSize();
+			}, 300)();
+		},
+    change() {
+			this.isFullScreen = screenfull.isFullscreen;
+		},
+		init() {
+			if (screenfull.isEnabled) {
+				screenfull.on('change', this.change);
+			}
+		},
+		destroy() {
+			if (screenfull.isEnabled) {
+				screenfull.off('change', this.change);
+			}
+		},
+    // 全屏
+		screenfullChange() {
+			if (!screenfull.isEnabled) {
+				this.$message({
+					message: 'you browser can not work',
+					type: 'warning',
+				});
+				return false;
+			}
+			screenfull.toggle(this.$refs.coldContainerB);
+		},
+    resetSize() {
+			let coldContainerBox = document.getElementById(
+				'coldContainer'
+			);
+			let rw = parseFloat(window.innerWidth);
+			let rh = parseFloat(window.innerHeight);
+			let bw = parseFloat(coldContainerBox.style.width);
+			let bh = parseFloat(coldContainerBox.style.height);
+			let wx = 0;
+			let hx = 0;
+			if (screenfull.isFullscreen) {
+				wx = rw / bw;
+				hx = rh / bh;
+			} else {
+				if (this.$store.state.app.sidebar.opened) {
+					wx = (rw - 280) / bw;
+					hx = (rh - 116) / bh;
+				} else {
+					wx = (rw - 85) / bw;
+					hx = (rh - 116) / bh;
+				}
+			}
+			this.scaleNum = wx;
+		},
+		initWebSocket() {
+			// 初始化weosocket
+			const path = `${this.url}/websocket/message?userId=4`;
+			this.websock = new WebSocket(path);
+			this.websock.onmessage = this.websocketonmessage;
+			this.websock.onopen = this.websocketonopen;
+			this.websock.onerror = this.websocketonerror;
+			this.websock.onclose = this.websocketclose;
+		},
+
+		websocketonopen() {
+			// 连接建立之后执行send方法发送数据
+			this.websocketsend();
+		},
+		websocketonerror() {
+			// 连接建立失败重连
+			this.initWebSocket();
+		},
+		websocketonmessage(e) {
+			let msgData = e.data
+			try {
+				msgData = JSON.parse(e.data);
+			} catch (error) {
+				console.log("websocket: [unable to msgData] :  ", e.data);
+			}
+			if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+			if (!this.permission) return
+			msgData.originRatioTables && msgData.originRatioTables.forEach((item) => {
+			  item.lineName.includes('1') && (this.line1 = item);
+			  item.lineName.includes('2') && (this.line2 = item);
+			  item.lineName.includes('3') && (this.line3 = item);
+			  item.lineName.includes('4') && (this.line4 = item);
+			})
+		},
+		websocketsend() {
+			// 数据发送
+			this.websock.send('');
+		},
+		websocketsend(val) {
+			// 数据发送
+			this.websock.send(val);
+		},
+		websocketclose(e) {
+			// 关闭
+			this.websock.close();
+			console.log('断开连接', e);
+		},
+  }
+}
+</script>
+<style lang='scss' scoped>
+.coldContainer {
+  position: absolute;
+  transform-origin: 16px 8px;
+  font-size: 16px;
+  top: 0px;
+  left: 0px;
+  width: 1920px;
+  height: 1080px;
+  background: url(../assets/bg1.png) no-repeat;
+	background-size: cover;
+	background-position: 0 0;
+	overflow: auto;
+  .box1 {
+    position: absolute;
+    top: 141px;
+    left: 40px;
+  }
+  .box2 {
+    position: absolute;
+    top: 141px;
+    right: 40px;
+  }
+  .box3 {
+    position: absolute;
+    bottom: 66px;
+    left: 40px;
+  }
+  .box4 {
+    position: absolute;
+    bottom: 66px;
+    right: 40px;
+  }
+}
+</style>
\ No newline at end of file