Merge pull request '更新' (#439) from projects/zg-zwq into projects/zg-test

Reviewed-on: #439

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: Do not edit
  # @Date: 2023-08-29 09:40:39
- # @LastEditTime: 2024-12-18 09:02:56
+ # @LastEditTime: 2025-03-05 16:46:35
  # @LastEditors: zwq
  # @Description:
 ###
@@ -17,6 +17,9 @@ VUE_APP_TITLE = 成本管理系统
 VUE_APP_BASE_API = 'http://100.64.0.45:48080'
 # VUE_APP_BASE_API = 'http://172.16.33.10:48080'
 
+# ws地址
+VUE_APP_WS_API = 'ws://100.64.0.45:48080'
+
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
 

.env.prod

@@ -2,7 +2,7 @@
  # @Author: zwq
  # @Date: 2024-03-27 15:49:55
  # @LastEditors: zwq
- # @LastEditTime: 2024-09-10 15:19:19
+ # @LastEditTime: 2025-03-05 16:30:45
  # @Description:
 ###
 # 生产环境配置
@@ -20,6 +20,9 @@ VUE_APP_BASE_API = ''
 # PUBLIC_PATH = 'http://192.168.0.33:8888/'
 PUBLIC_PATH = ''
 
+# ws地址
+VUE_APP_WS_API = 'ws://10.1.17.10:48080'
+
 # 二级部署路径
 VUE_APP_APP_NAME ='yudao-admin'
 

.gitignore

@@ -21,3 +21,5 @@ selenium-debug.log
 
 package-lock.json
 echarts.js
+sync_line_sczg_prod.bat
+sync_line_sczg_aliyun.bat

src/api/cost/costOriginRatioHis.js

@@ -15,7 +15,7 @@ export function updatecostOriginRatioHis(data) {
     data: data
   })
 }
-// 获得原片良品率
+// 获得原片产线良品率
 export function getcostOriginRatioHisPage(query) {
   return request({
     url: '/monitoring/cost-origin-ratio-his/page',
@@ -24,6 +24,15 @@ export function getcostOriginRatioHisPage(query) {
   })
 }
 
+// 获得原片工段良品率
+export function getcostOriginWSRatioHisPage(query) {
+  return request({
+    url: '/monitoring/cost-origin-ratio-his/page-ws',
+    method: 'get',
+    params: query
+  })
+}
+
 // 导出原片良品率 Excel
 export function exportcostOriginRatioHisExcel(query) {
   return request({
@@ -34,3 +43,14 @@ export function exportcostOriginRatioHisExcel(query) {
   })
 }
 
+
+// 导出原片良品率 工段Excel
+export function exportcostOriginWSRatioHisExcel(query) {
+  return request({
+    url: '/monitoring/cost-origin-ratio-his/export-excel-ws',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}
+

src/assets/font/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: '站酷庆科黄油体';
+  src: url('./站酷庆科黄油体.ttf') format('truetype');;
+}

src/layout/components/Sidebar/Logo.vue

@@ -67,7 +67,7 @@ export default {
 	},
 	data() {
 		return {
-			title: '中建材智能化院',
+			title: '中建材自贡新能源',
 			logo: logoImg,
 		};
 	},

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
 
 // 全局方法挂载

src/router/index.js

@@ -69,6 +69,26 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/print/design'], resolve),
     hidden: true
   },
+  {
+    path: '/allDashboard-model',
+    component: (resolve) => require(['@/views/dashboard/allDashboard/index-model'], resolve),
+    hidden: true
+  },
+  {
+    path: '/rawDashboard-model',
+    component: (resolve) => require(['@/views/dashboard/rawDashboard/index-model'], resolve),
+    hidden: true
+  },
+  {
+    path: '/deepDashboard-model',
+    component: (resolve) => require(['@/views/dashboard/deepDashboard/index-model'], resolve),
+    hidden: true
+  },
+  {
+    path: '/coldDashboard-model',
+    component: (resolve) => require(['@/views/dashboard/coldDashboard/index-model'], resolve),
+    hidden: true
+  },
   {
     path: "",
     component: Layout,

src/views/cost/raw/costOriginRatioHis/add-or-updata.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
  * @LastEditors: zwq
- * @LastEditTime: 2024-09-05 15:33:16
+ * @LastEditTime: 2025-06-13 10:59:54
  * @Description:
 -->
 <template>
@@ -15,7 +15,9 @@
 		label-width="80px">
 		<el-row :gutter="20">
 			<el-col :span="12">
-				<el-form-item label="产线" prop="bindObjectName">
+				<el-form-item
+					:label="activeName === 'his' ? '产线' : '工段'"
+					prop="bindObjectName">
 					<el-input
 						style="width: 100%"
 						v-model="dataForm.bindObjectName"
@@ -33,7 +35,7 @@
 						placeholder="选择所属日期"></el-date-picker>
 				</el-form-item>
 			</el-col>
-			<el-col :span="12">
+			<el-col :span="12" v-if="activeName === 'his'">
 				<el-form-item label="厚度" prop="thick">
 					<el-input-number
 						:min="0"
@@ -43,7 +45,7 @@
 						placeholder="请输入厚度" />
 				</el-form-item>
 			</el-col>
-			<el-col :span="12">
+			<el-col :span="12" v-if="activeName === 'his'">
 				<el-form-item label="在线速度" prop="speed">
 					<el-input-number
 						:min="0"
@@ -53,7 +55,7 @@
 						placeholder="请输入在线速度" />
 				</el-form-item>
 			</el-col>
-			<el-col :span="12">
+			<el-col :span="12" v-if="activeName === 'his'">
 				<el-form-item label="掰边宽度" prop="width">
 					<el-input-number
 						:min="0"
@@ -64,25 +66,27 @@
 				</el-form-item>
 			</el-col>
 			<el-col :span="12">
-				<el-form-item label="拉引量" prop="inArea">
+				<el-form-item
+					:label="activeName === 'his' ? '拉引量' : '进片数'"
+					prop="inArea">
 					<el-input-number
 						:min="0"
 						style="width: 85%"
 						v-model="dataForm.inArea"
-						clearable
+						clearable />
-						placeholder="请输入拉引量" />
+					{{ activeName === 'his' ? '(m²)' : '片' }}
-					(m²)
 				</el-form-item>
 			</el-col>
 			<el-col :span="12">
-				<el-form-item label="下片面积" prop="outArea">
+				<el-form-item
+					:label="activeName === 'his' ? '下片面积' : '出片数'"
+					prop="outArea">
 					<el-input-number
 						:min="0"
 						style="width: 85%"
 						v-model="dataForm.outArea"
-						clearable
+						clearable />
-						placeholder="请输入下片面积" />
+					{{ activeName === 'his' ? '(m²)' : '片' }}
-					(m²)
 				</el-form-item>
 			</el-col>
 			<el-col :span="12">
@@ -129,10 +133,12 @@ export default {
 				recTime: undefined,
 			},
 			dataRule: {},
+			activeName: 'his',
 		};
 	},
 	methods: {
-		init(val, statisticType) {
+		init(val, statisticType, activeName) {
+			this.activeName = activeName;
 			this.visible = true;
 			this.$nextTick(() => {
 				this.$refs['dataForm'].resetFields();
@@ -148,17 +154,22 @@ export default {
 				if (!valid) {
 					return false;
 				}
-				const udata = {
+				let udata = {
 					id: this.dataForm.id,
 					statisticType: this.dataForm.statisticType,
-					modifyThick: this.dataForm.thick,
-					modifySpeed: this.dataForm.speed,
-					modifyWidth: this.dataForm.width,
 					modifyInArea: this.dataForm.inArea,
 					modifyOutArea: this.dataForm.outArea,
 					modifyRatio:
 						this.dataForm.ratio >= 0 ? this.dataForm.ratio / 100 : '',
 				};
+				if (this.activeName === 'his') {
+					udata = {
+						...udata,
+						modifyThick: this.dataForm.thick,
+						modifySpeed: this.dataForm.speed,
+						modifyWidth: this.dataForm.width,
+					};
+				}
 				// 修改的提交
 				this.urlOptions.updateURL(udata).then((response) => {
 					this.$modal.msgSuccess('修改成功');

src/views/cost/raw/costOriginRatioHis/index.vue

@@ -1,42 +1,71 @@
 <template>
-	<div class="app-container energyOverlimitLog">
+	<div>
-		<!-- 搜索工作栏 -->
+		<div style="background: #f2f4f9; height: 40px; width: 100%">
-		<search-bar
+			<ButtonNav :menus="['产线良品率', '工段良品率']" @change="currentMenu">
-			:formConfigs="formConfig"
+				<template v-slot:tab1>
-			ref="searchBarForm"
+					<div>产线良品率</div>
-			@headBtnClick="buttonClick" />
+				</template>
-		<!-- 列表 -->
+				<template v-slot:tab2>
-		<base-table
+					<div>工段良品率</div>
-			:page="listQuery.pageNo"
+				</template>
-			:limit="listQuery.pageSize"
+			</ButtonNav>
-			:table-props="tableProps"
+		</div>
-			:table-data="tableData"
+		<div class="app-container energyOverlimitLog">
-			:max-height="tableH">
+			<search-bar
-			<method-btn
+				:formConfigs="formConfig"
-				v-if="tableBtn.length"
+				ref="searchBarForm"
-				slot="handleBtn"
+				@headBtnClick="buttonClick" />
-				:width="80"
+			<!-- 列表 -->
-				label="操作"
+			<div v-if="activeName === 'his'">
-				:method-list="tableBtn"
+				<base-table
-				@clickBtn="handleClick" />
+					:page="listQuery.pageNo"
-		</base-table>
+					:limit="listQuery.pageSize"
-		<pagination
+					:table-props="tableProps"
-			:page.sync="listQuery.pageNo"
+					:table-data="tableData"
-			:limit.sync="listQuery.pageSize"
+					:max-height="tableH">
-			:total="listQuery.total"
+					<method-btn
-			@pagination="getDataList" />
+						v-if="tableBtn.length"
-		<base-dialog
+						slot="handleBtn"
-			:dialogTitle="addOrEditTitle"
+						:width="80"
-			:dialogVisible="addOrUpdateVisible"
+						label="操作"
-			@cancel="handleCancel"
+						:method-list="tableBtn"
-			@confirm="handleConfirm"
+						@clickBtn="handleClick" />
-			:before-close="handleCancel"
+				</base-table>
-			width="50%">
+			</div>
-			<add-or-update
+			<div v-if="activeName === 'now'">
-				ref="addOrUpdate"
+				<base-table
-				:name-arr="formConfig[1].selectOptions"
+					:page="listQuery.pageNo"
-				@refreshDataList="successSubmit"></add-or-update>
+					:limit="listQuery.pageSize"
-		</base-dialog>
+					:table-props="tableProps2"
+					:table-data="tableData2"
+					:max-height="tableH">
+					<method-btn
+						v-if="tableBtn.length"
+						slot="handleBtn"
+						:width="80"
+						label="操作"
+						:method-list="tableBtn"
+						@clickBtn="handleClick" />
+				</base-table>
+			</div>
+			<pagination
+				:page.sync="listQuery.pageNo"
+				:limit.sync="listQuery.pageSize"
+				:total="listQuery.total"
+				@pagination="getNavDataList" />
+			<base-dialog
+				:dialogTitle="addOrEditTitle"
+				:dialogVisible="addOrUpdateVisible"
+				@cancel="handleCancel"
+				@confirm="handleConfirm"
+				:before-close="handleCancel"
+				width="50%">
+				<add-or-update
+					ref="addOrUpdate"
+					:name-arr="formConfig[1].selectOptions"
+					@refreshDataList="successSubmit"></add-or-update>
+			</base-dialog>
+		</div>
 	</div>
 </template>
 
@@ -44,9 +73,17 @@
 import AddOrUpdate from './add-or-updata';
 import basicPage from '@/mixins/basic-page';
 import { getLinePage } from '@/api/base/productionLine';
-import { getcostOriginRatioHisPage,exportcostOriginRatioHisExcel } from '@/api/cost/costOriginRatioHis';
+import {
+	getcostOriginRatioHisPage,
+	getcostOriginWSRatioHisPage,
+	exportcostOriginWSRatioHisExcel,
+	exportcostOriginRatioHisExcel,
+} from '@/api/cost/costOriginRatioHis';
 import { parseTime } from '@/filter/code-filter';
 import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
+import ButtonNav from '@/components/ButtonNav';
+
+
 const tableProps = [
 	{
 		prop: 'time',
@@ -93,6 +130,41 @@ const tableProps = [
 		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
 	},
 ];
+const tableProps2  = [
+	{
+		prop: 'time',
+		label: '日期',
+    width:130,
+	},
+	{
+		prop: 'remark',
+		label: '备注',
+	},
+	{
+		prop: 'bindObjectName',
+		label: '工段',
+    width:145,
+	},
+	{
+		prop: 'spec',
+		label: '规格',
+	},
+	{
+		prop: 'inArea',
+		label: '进片数',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
+	},
+	{
+		prop: 'outArea',
+		label: '出片数',
+    filter: (val) => (val != null ? Number(val).toFixed(2) : '-'),
+	},
+	{
+		prop: 'ratio',
+		label: '良品率',
+		filter: (val) => (val ? Number(val * 100).toFixed(2) + '%' : '-'),
+	},
+];
 export default {
 	name: 'costOriginRatioHis',
 	mixins: [basicPage, tableHeightMixin],
@@ -124,13 +196,15 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间范围',
-					dateType: 'daterange',
+					dateType: 'datetimerange',
-					format: 'yyyy-MM-dd',
+					format: 'yyyy-MM-dd HH:mm:ss',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
+					defaultTime: ['08:30:00', '08:30:00'],
 					param: 'searchTime',
+					width: 350,
 				},
 				{
 					type: 'button',
@@ -151,23 +225,27 @@ export default {
 			listQuery: {
 				statisticType: 1,
 			},
+			activeName: 'his',
 			tableProps,
+			tableProps2,
 			tableBtn: [{
 							type: 'edit',
 							btnName: '编辑',
 					  }
 			].filter((v) => v),
 			tableData: [],
+			tableData2: [],
 		};
 	},
 	components: {
 		AddOrUpdate,
+		ButtonNav,
 	},
 	created() {
     const params ={
       pageNo: 1,
       pageSize: 100,
-      pdType: 1
+      pdType: 0
     }
 		getLinePage(params).then((response) => {
 			this.formConfig[1].selectOptions = response.data.list;
@@ -183,9 +261,13 @@ export default {
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
-					this.getDataList();
+					if (this.activeName === 'his') {
+						this.getDataList();
+					} else {
+						this.getDataList2();
+					}
 					break;
 				case 'add':
 					this.addOrUpdateHandle();
@@ -197,7 +279,7 @@ export default {
 					this.listQuery.statisticType = val.statisticType || 1;
 					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : null;
 					this.listQuery.endTime = val.searchTime
-						? val.searchTime[1].substr(0, 10) + ' 23:59:59'
+						? val.searchTime[1]
 						: null;
 					this.handleExport();
 					break;
@@ -205,23 +287,74 @@ export default {
 					console.log(val);
 			}
 		},
+		currentMenu(val) {
+			this.activeName = val === '产线良品率' ? 'his' : 'now';
+			if (this.activeName === 'his') {
+				this.$refs.searchBarForm.resetForm();
+				this.listQuery.bindObjectId = null;
+				this.listQuery.startTime = null;
+				this.listQuery.endTime = null;
+				this.listQuery.statisticType = 1;
+				this.listQuery.pageNo = 1;
+				this.getDataList();
+			} else {
+				this.$refs.searchBarForm.resetForm();
+				this.listQuery.bindObjectId = null;
+				this.listQuery.startTime = null;
+				this.listQuery.endTime = null;
+				this.listQuery.statisticType = 1;
+				this.listQuery.pageNo = 1;
+				this.getDataList2();
+			}
+		},
+		// 获取数据2列表
+		getDataList2() {
+			getcostOriginWSRatioHisPage(this.listQuery).then((response) => {
+				this.tableData2 = response.data.list;
+				this.listQuery.total = response.data.total;
+			});
+		},
 		//tableBtn点击
 		handleClick(val) {
 			if (val.type === 'edit') {
 				this.addOrUpdateVisible = true;
 				this.addOrEditTitle = '编辑';
 				this.$nextTick(() => {
-					this.$refs.addOrUpdate.init(val.data, this.listQuery.statisticType);
+					this.$refs.addOrUpdate.init(
+						val.data,
+						this.listQuery.statisticType,
+						this.activeName
+					);
 				});
 			} else {
 				this.otherMethods(val);
 			}
 		},
+    getNavDataList(){
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+    },
+		successSubmit() {
+			this.handleCancel();
+			if (this.activeName === 'his') {
+				this.getDataList();
+			} else {
+				this.getDataList2();
+			}
+		},
 		/** 导出按钮操作 */
 		handleExport() {
 			let exportURL, title;
+			if (this.activeName === 'his') {
 				exportURL = exportcostOriginRatioHisExcel;
-        title = '原片成本-原片良品率';
+				title = '原片-产线良品率';
+			} else {
+				exportURL = exportcostOriginWSRatioHisExcel;
+				title = '原片-工段良品率';
+			}
 			// 处理查询参数
 			let params = { ...this.listQuery };
 			params.pageNo = undefined;

src/views/dashboard/allDashboard/index-model.vue

@@ -0,0 +1,558 @@
+<template>
+	<div
+		id="wholePlantContainerB"
+		ref="wholePlantContainerB"
+		style="width: 100%; height: 100%">
+		<div
+			id="wholePlantContainer"
+			ref="wholePlantContainer"
+			class="wholePlantBoard"
+			style="
+				position: absolute;
+				transform-origin: 16px 8px;
+				font-size: 16px;
+				top: 0px;
+				left: 0px;
+				width: 1920px;
+				height: 1080px;
+				display: flex;
+				flex-direction: column;
+				gap: 24px;
+			"
+			:style="{ transform: 'scale(' + scaleNum + ')' }">
+			<KHeader
+				:isFullScreen="isFullScreen"
+				@screenfullChange="screenfullChange" />
+			<div class="main-body">
+				<div style="flex: 3" class="bz25-1"></div>
+				<div style="flex: 5" class="bz25-2 bz-top">
+					<div class="topNum">
+						{{
+							topData.yestodaySum ? Number(topData.yestodaySum).toFixed(1) : '-'
+						}}
+					</div>
+					<div class="topText">昨日总成本/万元</div>
+				</div>
+				<div style="flex: 5" class="bz25-3 bz-top">
+					<div class="topNum" style="margin-left: 50px">
+						{{
+							topData.yestodayRatio
+								? Number(topData.yestodayRatio).toFixed(1)
+								: '-'
+						}}%
+					</div>
+					<div class="topText">昨日良品率</div>
+				</div>
+				<div style="flex: 5" class="bz25-4 bz-top">
+					<div class="topNum">
+						{{ topData.monthSum ? Number(topData.monthSum).toFixed(1) : '-' }}
+					</div>
+					<div class="topText">本月总成本/万元</div>
+				</div>
+				<div style="flex: 5" class="bz25-5 bz-top">
+					<div class="topNum">
+						{{
+							topData.monthAreaCost
+								? Number(topData.monthAreaCost).toFixed(1)
+								: '-'
+						}}
+					</div>
+					<div class="topText">本月每平米总成本/元</div>
+				</div>
+				<div style="flex: 3" class="bz25-6"></div>
+			</div>
+			<div class="main-body">
+				<div style="flex: 2" class="middle middle1">
+					<div class="title">
+						<svg-icon icon-class="cost" />
+						成本统计
+						<span style="float: right">成本单位:万元 | 产量单位:万平方米</span>
+					</div>
+					<base-table
+						:id="'table1'"
+						style="margin: 5px 12px 12px 12px"
+						:table-props="tableProps1"
+						:table-data="tableData1"
+						:height="230"></base-table>
+				</div>
+				<div style="flex: 1" class="middle middle2">
+					<div class="title">
+						<svg-icon icon-class="yanqi" />
+						烟气处理
+					</div>
+					<div
+						style="
+							display: flex;
+							flex-wrap: wrap;
+							margin: 10px 30px;
+							gap: 12px;
+						">
+						<div class="yanqi" style="width: 566px">
+							<div
+								class="content middle2-left"
+								style="margin-left: 50px; width: 210px">
+								<el-image class="imageClass" :src="imgUrl.so2"></el-image>
+								二氧化硫 排放浓度
+							</div>
+							<div class="content middle2-right">
+								{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
+								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
+							</div>
+						</div>
+						<div class="yanqi">
+							<div class="content middle2-left">
+								<el-image class="imageClass" :src="imgUrl.fc"></el-image>
+								粉尘排放
+							</div>
+							<div class="content middle2-right">
+								{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
+								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
+							</div>
+						</div>
+						<div class="yanqi">
+							<div class="content middle2-left">
+								<el-image class="imageClass" :src="imgUrl.no"></el-image>
+								氮氧化物 排放浓度
+							</div>
+							<div class="content middle2-right">
+								{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
+								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="main-body">
+				<div style="flex: 2" class="footer footer1">
+					<div class="title">
+						<svg-icon icon-class="costchart" />
+						近12个月成本 · 产量趋势
+					</div>
+					<bar-chart
+						ref="chartRef"
+						style="margin-top: -50px"
+						:echart-data="echartData"></bar-chart>
+				</div>
+				<div style="flex: 1" class="footer footer2">
+					<div class="title">
+						<svg-icon icon-class="energy" />
+						能源统计
+					</div>
+					<base-table
+						:id="'table2'"
+						style="margin: 5px 12px 12px 12px"
+						:table-props="tableProps2"
+						:table-data="tableData2"
+						:height="310"></base-table>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import KHeader from '../components/Header';
+import screenfull from 'screenfull';
+import { debounce } from '@/utils/debounce';
+import baseTable from '../components/baseTable.vue';
+import BarChart from './BarChart.vue';
+import { getUserProfile } from '@/api/system/user';
+
+const tableProps1 = [
+	{
+		prop: 'title',
+		label: '',
+		align: 'center',
+	},
+	{
+		prop: 'priceS',
+		label: '总成本',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'outO',
+		label: '原片产量',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'ratioO',
+		label: '原片良品率',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'outD',
+		label: '深加工产量',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'ratioD',
+		label: '深加工良品率',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'matPriceS',
+		label: '原料成本',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'energyPriceS',
+		label: '能源成本',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'otherPriceS',
+		label: '其他成本',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'areaPriceS',
+		label: '每平米成本/元',
+		width: 140,
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+];
+
+const tableProps2 = [
+	{
+		prop: 'title',
+		label: '',
+		align: 'center',
+	},
+	{
+		prop: 'elec',
+		label: '电消耗量/kwh',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'gas',
+		label: '气消耗量/m³',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'price',
+		label: '总价/万元',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+];
+export default {
+	name: '',
+	components: {
+		KHeader,
+		baseTable,
+		BarChart,
+	},
+	// provide() {
+	// 	return {
+	// 		resizeChart: null,
+	// 	};
+	// },
+	data() {
+		return {
+			isFullScreen: false,
+			url: process.env.VUE_APP_WS_API,
+			websock: '',
+			scaleNum: 0.8,
+			topData: {},
+			imgUrl: {
+				fc: require('@/views/dashboard/assets/fc.png'),
+				no: require('@/views/dashboard/assets/NO.png'),
+				so2: require('@/views/dashboard/assets/SO2.png'),
+			},
+			tableProps1,
+			tableData1: [],
+			tableProps2,
+			tableData2: [],
+			echartData: [],
+			permission: false,
+		};
+	},
+	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();
+		});
+	},
+	destroy() {
+		this.destroy();
+	},
+	mounted() {
+		this.boxReset();
+		window.addEventListener('resize', this.boxReset);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.boxReset);
+	},
+	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.wholePlantContainerB);
+		},
+		resetSize() {
+			let wholePlantContainerBox = document.getElementById(
+				'wholePlantContainer'
+			);
+			let rw = parseFloat(window.innerWidth);
+			let rh = parseFloat(window.innerHeight);
+			let bw = parseFloat(wholePlantContainerBox.style.width);
+			let bh = parseFloat(wholePlantContainerBox.style.height);
+			let wx = 0;
+			let hx = 0;
+			wx = rw / bw;
+			hx = rh / bh;
+			this.scaleNum = wx;
+		},
+
+		initWebSocket() {
+			// 初始化weosocket
+			const path = `${this.url}/websocket/message?userId=1`;
+			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 dataJson = JSON.parse(e.data);
+			console.log(dataJson);
+			// 数据接收
+			if ('factoryState' in dataJson) {
+				this.topData = dataJson.factoryState;
+				if (!this.permission) {
+					this.topData.monthAreaCost = '***';
+					this.topData.monthSum = '***';
+					this.topData.yestodaySum = '***';
+				}
+			}
+			if ('factoryCostTableList' in dataJson) {
+				this.tableData1 = dataJson.factoryCostTableList;
+				if (!this.permission) {
+					this.tableData1.forEach((item) => {
+						item.priceS = null;
+						item.matPriceS = null;
+						item.energyPriceS = null;
+						item.otherPriceS = null;
+						item.areaPriceS = null;
+					});
+				}
+			}
+			if ('factoryEnergyTableList' in dataJson) {
+				this.tableData2 = dataJson.factoryEnergyTableList;
+				if (!this.permission) {
+					this.tableData2.forEach((item) => {
+						item.price = null;
+					});
+				}
+			}
+			if ('factoryCostTrendList' in dataJson) {
+				this.echartData = dataJson.factoryCostTrendList;
+				this.$nextTick(() => {
+					this.$refs.chartRef.initChart(!this.permission);
+				});
+			}
+		},
+		websocketsend(val) {
+			// 数据发送
+			this.websock.send(val);
+		},
+		websocketclose(e) {
+			// 关闭
+			console.log('断开连接', e);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.wholePlantBoard {
+	background: url(../assets/bg.png) no-repeat;
+	background-size: cover;
+	background-position: 0 0;
+	overflow: auto;
+}
+.main-body {
+	display: flex;
+	gap: 20px;
+	padding: 0px 16px;
+}
+.bz-top {
+	text-align: center;
+}
+.bz25-1 {
+	background: url(../assets/bz25-1.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 130px;
+}
+.bz25-2 {
+	background: url(../assets/bz25-2.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-3 {
+	background: url(../assets/bz25-3.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-4 {
+	background: url(../assets/bz25-4.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-5 {
+	background: url(../assets/bz25-5.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-6 {
+	background: url(../assets/bz25-6.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 130px;
+}
+.topNum {
+	font-weight: 600;
+	font-size: 44px;
+	color: #ffffff;
+	line-height: 43px;
+	font-style: normal;
+	margin-top: 50px;
+	margin-left: 40px;
+}
+.topText {
+	font-weight: 400;
+	font-size: 18px;
+	color: #95caff;
+	line-height: 20px;
+	font-style: normal;
+	margin-top: 3px;
+	margin-left: 40px;
+}
+.title {
+	height: 50px;
+	line-height: 50px;
+	font-weight: 400;
+	font-size: 22px;
+	color: #ffffff;
+	padding: 0 20px;
+}
+.middle {
+	height: 322px;
+}
+.middle1 {
+	background: url(../assets/1.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.middle2 {
+	background: url(../assets/2.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.yanqi {
+	width: 275px;
+	height: 108px;
+	background: url(../assets/yanqi.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.content {
+	height: 108px;
+}
+.imageClass {
+	width: 40px;
+	height: 30px;
+	display: block;
+	margin: 8px auto;
+}
+.middle2-left {
+	font-size: 18px;
+	color: rgba(255, 255, 255, 0.9);
+	line-height: 17px;
+	letter-spacing: 5px;
+	width: 110px;
+	padding-top: 12px;
+	padding-left: 12px;
+	float: left;
+	margin-right: 10px;
+}
+.middle2-right {
+	font-weight: 600;
+	font-size: 35px;
+	color: #ffffff;
+	line-height: 106px;
+}
+.footer {
+	height: 410px;
+}
+.footer1 {
+	background: url(../assets/3.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.footer2 {
+	background: url(../assets/4.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 402px;
+}
+</style>

src/views/dashboard/allDashboard/index.vue

@@ -26,22 +26,36 @@
 			<div class="main-body">
 				<div style="flex: 3" class="bz25-1"></div>
 				<div style="flex: 5" class="bz25-2 bz-top">
-					<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
+					<div class="topNum">
+						{{
+							topData.yestodaySum ? Number(topData.yestodaySum).toFixed(1) : '-'
+						}}
+					</div>
 					<div class="topText">昨日总成本/万元</div>
 				</div>
 				<div style="flex: 5" class="bz25-3 bz-top">
 					<div class="topNum" style="margin-left: 50px">
-						{{ Number(topData.yestodayRatio).toFixed(1) }}%
+						{{
+							topData.yestodayRatio
+								? Number(topData.yestodayRatio).toFixed(1)
+								: '-'
+						}}%
 					</div>
 					<div class="topText">昨日良品率</div>
 				</div>
 				<div style="flex: 5" class="bz25-4 bz-top">
-					<div class="topNum">{{ Number(topData.monthSum).toFixed(1) }}</div>
+					<div class="topNum">
+						{{ topData.monthSum ? Number(topData.monthSum).toFixed(1) : '-' }}
+					</div>
 					<div class="topText">本月总成本/万元</div>
 				</div>
 				<div style="flex: 5" class="bz25-5 bz-top">
 					<div class="topNum">
-						{{ Number(topData.monthAreaCost).toFixed(1) }}
+						{{
+							topData.monthAreaCost
+								? Number(topData.monthAreaCost).toFixed(1)
+								: '-'
+						}}
 					</div>
 					<div class="topText">本月每平米总成本/元</div>
 				</div>
@@ -73,13 +87,15 @@
 							margin: 10px 30px;
 							gap: 12px;
 						">
-						<div class="yanqi" style="width: 566px;">
+						<div class="yanqi" style="width: 566px">
-							<div class="content middle2-left" style="margin-left: 50px;width: 210px;">
+							<div
+								class="content middle2-left"
+								style="margin-left: 50px; width: 210px">
 								<el-image class="imageClass" :src="imgUrl.so2"></el-image>
 								二氧化硫 排放浓度
 							</div>
 							<div class="content middle2-right">
-								{{ Number(topData.so2).toFixed(1) }}
+								{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
 								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 							</div>
 						</div>
@@ -89,7 +105,7 @@
 								粉尘排放
 							</div>
 							<div class="content middle2-right">
-								{{ Number(topData.fc).toFixed(1) }}
+								{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
 								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 							</div>
 						</div>
@@ -99,7 +115,7 @@
 								氮氧化物 排放浓度
 							</div>
 							<div class="content middle2-right">
-								{{ Number(topData.no).toFixed(1) }}
+								{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
 								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 							</div>
 						</div>
@@ -260,7 +276,7 @@ export default {
 			} else {
 				this.permission = false;
 			}
-      this.initWebSocket();
+			this.initWebSocket();
 		});
 	},
 	destroy() {
@@ -352,37 +368,37 @@ export default {
 			// 数据接收
 			if ('factoryState' in dataJson) {
 				this.topData = dataJson.factoryState;
-        if(!this.permission){
+				if (!this.permission) {
-          this.topData.monthAreaCost = '***'
+					this.topData.monthAreaCost = '***';
-          this.topData.monthSum = '***'
+					this.topData.monthSum = '***';
-          this.topData.yestodaySum = '***'
+					this.topData.yestodaySum = '***';
-        }
+				}
 			}
 			if ('factoryCostTableList' in dataJson) {
 				this.tableData1 = dataJson.factoryCostTableList;
-        if(!this.permission){
+				if (!this.permission) {
-          this.tableData1.forEach(item=>{
+					this.tableData1.forEach((item) => {
-            item.priceS = null
+						item.priceS = null;
-            item.matPriceS = null
+						item.matPriceS = null;
-            item.energyPriceS = null
+						item.energyPriceS = null;
-            item.otherPriceS = null
+						item.otherPriceS = null;
-            item.areaPriceS = null
+						item.areaPriceS = null;
-          })
+					});
-        }
+				}
 			}
 			if ('factoryEnergyTableList' in dataJson) {
 				this.tableData2 = dataJson.factoryEnergyTableList;
-        if(!this.permission){
+				if (!this.permission) {
-          this.tableData2.forEach(item=>{
+					this.tableData2.forEach((item) => {
-            item.price = null
+						item.price = null;
-          })
+					});
-        }
+				}
 			}
 			if ('factoryCostTrendList' in dataJson) {
 				this.echartData = dataJson.factoryCostTrendList;
-        this.$nextTick(()=>{
+				this.$nextTick(() => {
-          this.$refs.chartRef.initChart(!this.permission);
+					this.$refs.chartRef.initChart(!this.permission);
-        })
+				});
 			}
 		},
 		websocketsend(val) {
@@ -525,7 +541,7 @@ export default {
 	padding-top: 12px;
 	padding-left: 12px;
 	float: left;
-  margin-right: 10px;
+	margin-right: 10px;
 }
 .middle2-right {
 	font-weight: 600;

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>

src/views/dashboard/coldDashboard/index-model.vue

@@ -0,0 +1,184 @@
+<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,
+			url: process.env.VUE_APP_WS_API,
+			websock: '',
+			line1: {},
+			line2: {},
+			line3: {},
+			line4: {},
+		};
+	},
+	created() {
+		this.init();
+		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;
+			wx = rw / bw;
+			hx = rh / 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;
+			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>

src/views/dashboard/coldDashboard/index.vue

@@ -0,0 +1,194 @@
+<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,
+			url: process.env.VUE_APP_WS_API,
+			websock: '',
+			line1: {},
+			line2: {},
+			line3: {},
+			line4: {},
+		};
+	},
+	created() {
+		this.init();
+		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;
+			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>

src/views/dashboard/deepDashboard/index-model.vue

@@ -0,0 +1,515 @@
+<template>
+	<div
+		id="wholePlantContainerB"
+		ref="wholePlantContainerB"
+		style="width: 100%; height: 100%">
+		<div
+			id="wholePlantContainer"
+			ref="wholePlantContainer"
+			class="wholePlantBoard"
+			style="
+				position: absolute;
+				transform-origin: 16px 8px;
+				font-size: 16px;
+				top: 0px;
+				left: 0px;
+				width: 1920px;
+				height: 1080px;
+				display: flex;
+				flex-direction: column;
+				gap: 24px;
+			"
+			:style="{ transform: 'scale(' + scaleNum + ')' }">
+			<KHeader
+				:isFullScreen="isFullScreen"
+				@screenfullChange="screenfullChange"
+				topTitle="自贡深加工成本看板" />
+			<div class="main-body">
+				<div style="flex: 1" class="bz25-2 bz-top">
+					<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
+					<div class="topText">昨日总成本/万元</div>
+				</div>
+				<div style="flex: 1" class="bz25-3 bz-top">
+					<div class="topNum" style="margin-left: 50px">
+						{{ Number(topData.yestodayRatio).toFixed(1) }}%
+					</div>
+					<div class="topText">昨日良品率</div>
+				</div>
+				<div style="flex: 1" class="bz25-4 bz-top">
+					<div class="topNum">{{ Number(topData.yestodayOut).toFixed(1) }}</div>
+					<div class="topText">昨日深加工产量/万m²</div>
+				</div>
+				<div style="flex: 1" class="bz25-7 bz-top">
+					<div class="topNum">{{ Number(topData.monthSum).toFixed(1) }}</div>
+					<div class="topText">本月深加工成本/万元</div>
+				</div>
+				<div style="flex: 1" class="bz25-8 bz-top">
+					<div class="topNum">
+						{{ Number(topData.monthAreaCost).toFixed(1) }}
+					</div>
+					<div class="topText">本月每平米总成本/元</div>
+				</div>
+			</div>
+			<div class="main-body">
+				<div style="flex: 2" class="middle middle1">
+					<div class="title">
+						<svg-icon icon-class="line" />
+						各产线产量及良品率
+						<span style="float: right">产量单位:万平方米</span>
+					</div>
+					<base-table
+						:id="'table3'"
+						style="margin: 5px 12px 12px 12px"
+						:table-props="tableProps3"
+						:table-data="tableData3"
+						:height="230"></base-table>
+				</div>
+				<div style="flex: 1" class="middle middle2">
+					<div class="title">
+						<svg-icon icon-class="energy" />
+						能源统计
+					</div>
+					<base-table
+						:id="'table1'"
+						style="margin: 5px 12px 12px 12px"
+						:table-props="tableProps1"
+						:table-data="tableData1"
+						:height="230"></base-table>
+				</div>
+			</div>
+			<div class="main-body">
+				<div style="flex: 2" class="footer footer1">
+					<div class="title">
+						<svg-icon icon-class="costchart" />
+						近12个月成本 · 产量趋势
+					</div>
+					<bar-chart
+						ref="chartRef"
+						style="margin-top: -50px"
+						:echart-data="echartData"></bar-chart>
+				</div>
+				<div style="flex: 1" class="footer footer2">
+					<div class="title">
+						<svg-icon icon-class="cost" />
+						成本及产量统计
+					</div>
+					<base-table
+						:id="'table2'"
+						style="margin: 5px 12px 12px 12px"
+						:table-props="tableProps2"
+						:table-data="tableData2"
+						:height="310"></base-table>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import KHeader from '../components/Header';
+import screenfull from 'screenfull';
+import { debounce } from '@/utils/debounce';
+import baseTable from '../components/baseTable.vue';
+import BarChart from './BarChart.vue';
+import interval from './interval.vue';
+import { getUserProfile } from '@/api/system/user';
+
+const tableProps1 = [
+	{
+		prop: 'title',
+		label: '',
+		align: 'center',
+	},
+	{
+		prop: 'elec',
+		label: '电消耗量/kwh',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'yure',
+		label: '余热发电量/kwh',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'elecPrice',
+		label: '总价/万元',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+];
+
+const tableProps2 = [
+	{
+		prop: 'title',
+		label: '',
+		align: 'center',
+	},
+	{
+		prop: 'priceD',
+		label: '成本/万元',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'outD',
+		label: '产量/万m²',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'ratioD',
+		label: '良品率',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+];
+const tableProps3 = [
+	{
+		prop: 'title',
+		label: '',
+		align: 'center',
+	},
+	{
+		prop: '1',
+		label: '产线1',
+		subcomponent: interval,
+		align: 'center',
+	},
+	{
+		prop: '2',
+		label: '产线2',
+		subcomponent: interval,
+		align: 'center',
+	},
+	{
+		prop: '3',
+		label: '产线3',
+		subcomponent: interval,
+		align: 'center',
+	},
+	{
+		prop: '4',
+		label: '产线4',
+		subcomponent: interval,
+		align: 'center',
+	},
+	{
+		prop: '5',
+		label: '产线5',
+		subcomponent: interval,
+		align: 'center',
+	},
+];
+export default {
+	name: '',
+	components: {
+		KHeader,
+		baseTable,
+		BarChart,
+	},
+	// provide() {
+	// 	return {
+	// 		resizeChart: null,
+	// 	};
+	// },
+	data() {
+		return {
+			isFullScreen: false,
+			scaleNum: 0.8,
+			url: process.env.VUE_APP_WS_API,
+			websock: '',
+			topData: {},
+			imgUrl: {
+				o2: require('@/views/dashboard/assets/O2.png'),
+				no: require('@/views/dashboard/assets/NO.png'),
+				so2: require('@/views/dashboard/assets/SO2.png'),
+				no2: require('@/views/dashboard/assets/NO2.png'),
+			},
+			tableProps1,
+			tableData1: [],
+			tableProps2,
+			tableData2: [],
+			tableProps3,
+			tableData3: [],
+			echartData: [],
+			permission: false,
+		};
+	},
+	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();
+		});
+	},
+	destroy() {
+		this.destroy();
+	},
+	mounted() {
+		this.boxReset();
+		window.addEventListener('resize', this.boxReset);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.boxReset);
+	},
+	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.wholePlantContainerB);
+		},
+		resetSize() {
+			let wholePlantContainerBox = document.getElementById(
+				'wholePlantContainer'
+			);
+			let rw = parseFloat(window.innerWidth);
+			let rh = parseFloat(window.innerHeight);
+			let bw = parseFloat(wholePlantContainerBox.style.width);
+			let bh = parseFloat(wholePlantContainerBox.style.height);
+			let wx = 0;
+			let hx = 0;
+			wx = rw / bw;
+			hx = rh / bh;
+			this.scaleNum = wx;
+		},
+		initWebSocket() {
+			// 初始化weosocket
+			const path = `${this.url}/websocket/message?userId=3`;
+			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 dataJson = JSON.parse(e.data);
+			console.log(dataJson);
+			// 数据接收
+			if ('DeepState' in dataJson) {
+				this.topData = dataJson.DeepState;
+				if (!this.permission) {
+					this.topData.yestodaySum = '***';
+					this.topData.monthSum = '***';
+					this.topData.monthAreaCost = '***';
+				}
+			}
+			if ('DeepEnergyTableList' in dataJson) {
+				this.tableData1 = dataJson.DeepEnergyTableList;
+				if (!this.permission) {
+					this.tableData1.forEach((item) => {
+						item.elecPrice = null;
+					});
+				}
+			}
+			if ('DeepCostTableList' in dataJson) {
+				this.tableData2 = dataJson.DeepCostTableList;
+				if (!this.permission) {
+					this.tableData2.forEach((item) => {
+						item.priceD = null;
+					});
+				}
+			}
+			if ('DeepPdTables' in dataJson) {
+				this.tableData3 = dataJson.DeepPdTables;
+			}
+			if ('DeepCostTrendList' in dataJson) {
+				this.echartData = dataJson.DeepCostTrendList;
+				this.$nextTick(() => {
+					this.$refs.chartRef.initChart(!this.permission);
+				});
+			}
+		},
+		websocketsend(val) {
+			// 数据发送
+			this.websock.send(val);
+		},
+		websocketclose(e) {
+			// 关闭
+			console.log('断开连接', e);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.wholePlantBoard {
+	background: url(../assets/bg1.png) no-repeat;
+	background-size: cover;
+	background-position: 0 0;
+	overflow: auto;
+}
+.main-body {
+	display: flex;
+	gap: 20px;
+	padding: 0px 16px;
+}
+.bz-top {
+	text-align: center;
+}
+.bz25-2 {
+	background: url(../assets/bz25-d-1.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-3 {
+	background: url(../assets/bz25-d-2.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-4 {
+	background: url(../assets/bz25-d-3.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-7 {
+	background: url(../assets/bz25-d-4.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-8 {
+	background: url(../assets/bz25-d-5.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.topNum {
+	font-weight: 600;
+	font-size: 44px;
+	color: #ffffff;
+	line-height: 43px;
+	font-style: normal;
+	margin-top: 50px;
+	margin-left: 40px;
+}
+.topText {
+	font-weight: 400;
+	font-size: 18px;
+	color: #95caff;
+	line-height: 20px;
+	font-style: normal;
+	margin-top: 3px;
+	margin-left: 40px;
+}
+.title {
+	height: 50px;
+	line-height: 50px;
+	font-weight: 400;
+	font-size: 22px;
+	color: #ffffff;
+	padding: 0 20px;
+}
+.middle {
+	height: 322px;
+}
+.middle1 {
+	background: url(../assets/1.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.middle2 {
+	background: url(../assets/2.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.yanqi {
+	width: 275px;
+	height: 108px;
+	background: url(../assets/yanqi.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	text-align: center;
+}
+.content {
+	height: 108px;
+}
+.imageClass {
+	width: 40px;
+	height: 30px;
+	display: block;
+	margin: 8px auto;
+}
+.middle2-left {
+	font-size: 18px;
+	color: rgba(255, 255, 255, 0.9);
+	line-height: 17px;
+	letter-spacing: 5px;
+	width: 110px;
+	padding-top: 12px;
+	padding-left: 12px;
+	float: left;
+}
+.middle2-right {
+	font-weight: 600;
+	font-size: 38px;
+	color: #ffffff;
+	line-height: 106px;
+}
+.footer {
+	height: 410px;
+}
+.footer1 {
+	background: url(../assets/3.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.footer2 {
+	background: url(../assets/4.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 402px;
+}
+</style>

src/views/dashboard/rawDashboard/index-model.vue

@@ -0,0 +1,532 @@
+<template>
+	<div
+		id="wholePlantContainerB"
+		ref="wholePlantContainerB"
+		style="width: 100%; height: 100%">
+		<div
+			id="wholePlantContainer"
+			ref="wholePlantContainer"
+			class="wholePlantBoard"
+			style="
+				position: absolute;
+				transform-origin: 16px 8px;
+				font-size: 16px;
+				top: 0px;
+				left: 0px;
+				width: 1920px;
+				height: 1080px;
+				display: flex;
+				flex-direction: column;
+				gap: 24px;
+			"
+			:style="{ transform: 'scale(' + scaleNum + ')' }">
+			<KHeader
+				:isFullScreen="isFullScreen"
+				@screenfullChange="screenfullChange"
+				topTitle="自贡原片成本看板" />
+			<div class="main-body">
+				<div style="flex: 1" class="bz25-2 bz-top">
+					<div class="topNum">{{ Number(topData.yestodaySum).toFixed(1) }}</div>
+					<div class="topText">昨日总成本/万元</div>
+				</div>
+				<div style="flex: 1" class="bz25-3 bz-top">
+					<div class="topNum" style="margin-left: 50px">
+						{{ Number(topData.yestodayRatio).toFixed(1) }}%
+					</div>
+					<div class="topText">昨日良品率</div>
+				</div>
+				<div style="flex: 1" class="bz25-5 bz-top">
+					<div class="topNum">{{ Number(topData.yestodayMat).toFixed(1) }}</div>
+					<div class="topText">昨日原料成本/万元</div>
+				</div>
+
+				<div style="flex: 1" class="bz25-4 bz-top">
+					<div class="topNum">{{ Number(topData.monthOut).toFixed(1) }}</div>
+					<div class="topText">本月原片产量/万m²</div>
+				</div>
+				<div style="flex: 1" class="bz25-7 bz-top">
+					<div class="topNum">{{ Number(topData.monthMat).toFixed(1) }}</div>
+					<div class="topText">本月原料成本/万元</div>
+				</div>
+
+				<div style="flex: 1" class="bz25-8 bz-top">
+					<div class="topNum">
+						{{ Number(topData.monthAreaCost).toFixed(1) }}
+					</div>
+					<div class="topText">本月每平米总成本/元</div>
+				</div>
+			</div>
+			<div class="main-body">
+				<div style="flex: 2" class="middle middle1">
+					<div class="title">
+						<svg-icon icon-class="energy" />
+						能源统计
+					</div>
+					<base-table
+						:id="'table1'"
+						style="margin: 5px 12px 12px 12px"
+						:table-props="tableProps1"
+						:table-data="tableData1"
+						:height="230"></base-table>
+				</div>
+				<div style="flex: 1" class="middle middle2">
+					<div class="title">
+						<svg-icon icon-class="yanqi" />
+						烟气处理
+					</div>
+					<div
+						style="
+							display: flex;
+							flex-wrap: wrap;
+							margin: 10px 30px;
+							gap: 12px;
+						">
+						<div class="yanqi" style="width: 566px">
+							<div
+								class="content middle2-left"
+								style="margin-left: 50px; width: 210px">
+								<el-image class="imageClass" :src="imgUrl.so2"></el-image>
+								二氧化硫 排放浓度
+							</div>
+							<div class="content middle2-right">
+								{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
+								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
+							</div>
+						</div>
+						<div class="yanqi">
+							<div class="content middle2-left">
+								<el-image class="imageClass" :src="imgUrl.fc"></el-image>
+								粉尘排放
+							</div>
+							<div class="content middle2-right">
+								{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
+								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
+							</div>
+						</div>
+						<div class="yanqi">
+							<div class="content middle2-left">
+								<el-image class="imageClass" :src="imgUrl.no"></el-image>
+								氮氧化物 排放浓度
+							</div>
+							<div class="content middle2-right">
+								{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
+								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="main-body">
+				<div style="flex: 2" class="footer footer1">
+					<div class="title">
+						<svg-icon icon-class="costchart" />
+						近12个月成本 · 产量趋势
+					</div>
+					<bar-chart
+						ref="chartRef"
+						style="margin-top: -50px"
+						:echart-data="echartData"></bar-chart>
+				</div>
+				<div style="flex: 1" class="footer footer2">
+					<div class="title">
+						<svg-icon icon-class="cost" />
+						成本及产量统计
+					</div>
+					<base-table
+						:id="'table2'"
+						style="margin: 5px 12px 12px 12px"
+						:table-props="tableProps2"
+						:table-data="tableData2"
+						:height="310"></base-table>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import KHeader from '../components/Header';
+import screenfull from 'screenfull';
+import { debounce } from '@/utils/debounce';
+import baseTable from '../components/baseTable.vue';
+import BarChart from './BarChart.vue';
+import { getUserProfile } from '@/api/system/user';
+
+const tableProps1 = [
+	{
+		prop: 'title',
+		label: '',
+		align: 'center',
+	},
+	{
+		prop: 'elec',
+		label: '电消耗量',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'elecPrice',
+		label: '电总价',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'gas',
+		label: '气消耗量',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'gasPrice',
+		label: '气总价',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'price',
+		label: '能源总价',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+];
+
+const tableProps2 = [
+	{
+		prop: 'title',
+		label: '',
+		align: 'center',
+	},
+	{
+		prop: 'priceO',
+		label: '成本/万元',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'outO',
+		label: '产量/万m²',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+	{
+		prop: 'ratioO',
+		label: '良品率',
+		filter: (val) => (val != null ? Number(val).toFixed(1) : '-'),
+	},
+];
+export default {
+	name: '',
+	components: {
+		KHeader,
+		baseTable,
+		BarChart,
+	},
+	// provide() {
+	// 	return {
+	// 		resizeChart: null,
+	// 	};
+	// },
+	data() {
+		return {
+			isFullScreen: false,
+			scaleNum: 0.8,
+			url: process.env.VUE_APP_WS_API,
+			websock: '',
+			topData: {},
+			imgUrl: {
+				fc: require('@/views/dashboard/assets/fc.png'),
+				no: require('@/views/dashboard/assets/NO.png'),
+				so2: require('@/views/dashboard/assets/SO2.png'),
+			},
+			tableProps1,
+			tableData1: [],
+			tableProps2,
+			tableData2: [],
+			echartData: [],
+			permission: false,
+		};
+	},
+	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();
+		});
+	},
+	destroy() {
+		this.destroy();
+	},
+	mounted() {
+		this.boxReset();
+		window.addEventListener('resize', this.boxReset);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.boxReset);
+	},
+	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.wholePlantContainerB);
+		},
+		resetSize() {
+			let wholePlantContainerBox = document.getElementById(
+				'wholePlantContainer'
+			);
+			let rw = parseFloat(window.innerWidth);
+			let rh = parseFloat(window.innerHeight);
+			let bw = parseFloat(wholePlantContainerBox.style.width);
+			let bh = parseFloat(wholePlantContainerBox.style.height);
+			let wx = 0;
+			let hx = 0;
+			wx = rw / bw;
+			hx = rh / bh;
+			this.scaleNum = wx;
+		},
+
+		initWebSocket() {
+			// 初始化weosocket
+			const path = `${this.url}/websocket/message?userId=2`;
+			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 dataJson = JSON.parse(e.data);
+			console.log(dataJson);
+			// 数据接收
+			if ('OriginState' in dataJson) {
+				this.topData = dataJson.OriginState;
+				if (!this.permission) {
+					this.topData.monthAreaCost = '***';
+					this.topData.monthMat = '***';
+					this.topData.yestodaySum = '***';
+					this.topData.yestodayMat = '***';
+				}
+			}
+			if ('OriginEnergyTableList' in dataJson) {
+				this.tableData1 = dataJson.OriginEnergyTableList;
+				if (!this.permission) {
+					this.tableData1.forEach((item) => {
+						item.elecPrice = null;
+						item.gasPrice = null;
+						item.price = null;
+					});
+				}
+			}
+			if ('OriginCostTableList' in dataJson) {
+				this.tableData2 = dataJson.OriginCostTableList;
+				if (!this.permission) {
+					this.tableData2.forEach((item) => {
+						item.priceO = null;
+					});
+				}
+			}
+			if ('OriginCostTrendList' in dataJson) {
+				this.echartData = dataJson.OriginCostTrendList;
+				this.$nextTick(() => {
+					this.$refs.chartRef.initChart(!this.permission);
+				});
+			}
+		},
+		websocketsend(val) {
+			// 数据发送
+			this.websock.send(val);
+		},
+		websocketclose(e) {
+			// 关闭
+			console.log('断开连接', e);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.wholePlantBoard {
+	background: url(../assets/bg1.png) no-repeat;
+	background-size: cover;
+	background-position: 0 0;
+	overflow: auto;
+}
+.main-body {
+	display: flex;
+	gap: 20px;
+	padding: 0px 16px;
+}
+.bz-top {
+	text-align: center;
+}
+.bz25-2 {
+	background: url(../assets/bz25-2.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-3 {
+	background: url(../assets/bz25-3.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-4 {
+	background: url(../assets/bz25-4.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-5 {
+	background: url(../assets/bz25-5.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-7 {
+	background: url(../assets/bz25-7.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.bz25-8 {
+	background: url(../assets/bz25-8.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 147px;
+	margin-top: -17px;
+}
+.topNum {
+	font-weight: 600;
+	font-size: 44px;
+	color: #ffffff;
+	line-height: 43px;
+	font-style: normal;
+	margin-top: 50px;
+	margin-left: 40px;
+}
+.topText {
+	font-weight: 400;
+	font-size: 18px;
+	color: #95caff;
+	line-height: 20px;
+	font-style: normal;
+	margin-top: 3px;
+	margin-left: 40px;
+}
+.title {
+	height: 50px;
+	line-height: 50px;
+	font-weight: 400;
+	font-size: 22px;
+	color: #ffffff;
+	padding: 0 20px;
+}
+.middle {
+	height: 322px;
+}
+.middle1 {
+	background: url(../assets/1.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.middle2 {
+	background: url(../assets/2.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.yanqi {
+	width: 275px;
+	height: 108px;
+	background: url(../assets/yanqi.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.content {
+	height: 108px;
+}
+.imageClass {
+	width: 40px;
+	height: 30px;
+	display: block;
+	margin: 8px auto;
+}
+.middle2-left {
+	font-size: 18px;
+	color: rgba(255, 255, 255, 0.9);
+	line-height: 17px;
+	letter-spacing: 5px;
+	width: 110px;
+	padding-top: 12px;
+	padding-left: 12px;
+	float: left;
+	margin-right: 10px;
+}
+.middle2-right {
+	font-weight: 600;
+	font-size: 35px;
+	color: #ffffff;
+	line-height: 106px;
+}
+.footer {
+	height: 410px;
+}
+.footer1 {
+	background: url(../assets/3.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+}
+.footer2 {
+	background: url(../assets/4.png) no-repeat;
+	background-size: 100% 100%;
+	border-radius: 5px;
+	overflow: auto;
+	height: 402px;
+}
+</style>

src/views/dashboard/rawDashboard/index.vue

@@ -83,7 +83,7 @@
 								二氧化硫 排放浓度
 							</div>
 							<div class="content middle2-right">
-								{{ Number(topData.so2).toFixed(1) }}
+								{{ topData.so2 ? Number(topData.so2).toFixed(1) : '-' }}
 								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 							</div>
 						</div>
@@ -93,7 +93,7 @@
 								粉尘排放
 							</div>
 							<div class="content middle2-right">
-								{{ Number(topData.fc).toFixed(1) }}
+								{{ topData.fc ? Number(topData.fc).toFixed(1) : '-' }}
 								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 							</div>
 						</div>
@@ -103,7 +103,7 @@
 								氮氧化物 排放浓度
 							</div>
 							<div class="content middle2-right">
-								{{ Number(topData.no).toFixed(1) }}
+								{{ topData.no ? Number(topData.no).toFixed(1) : '-' }}
 								<span style="font-size: 14px; line-height: 43px">mg/m³</span>
 							</div>
 						</div>

src/views/login.vue

@@ -64,7 +64,7 @@
 			<div class="field">
 				<!-- [移动端]标题 -->
 				<h2 class="mobile-title">
-					<h3 class="title">中建材智能自动化研究院有限公司</h3>
+					<h3 class="title">中建材自贡新能源有限公司</h3>
 				</h2>
 				<h2 class="pc-title" style="">
 					<h3
@@ -89,7 +89,7 @@
 								top: 12px;
 								right: 8px;
 							" />
-						<span>中建材智能自动化研究院有限公司</span>
+						<span>中建材自贡新能源有限公司</span>
 					</h3>
 					<h3
 						class="sub-title"
@@ -108,13 +108,13 @@
 				</h2>
 
 				<!-- 表单 -->
-				<div class="form-cont" style="margin-top: 60px;">
+				<div class="form-cont" style="margin-top: 60px">
 					<!-- <el-tabs
 						class="form"
 						v-model="loginForm.loginType"
 						style="float: none">
 						<el-tab-pane label="账号密码登录" name="uname"></el-tab-pane> -->
-						<!-- <el-tab-pane label="短信验证码登录" name="sms"></el-tab-pane> -->
+					<!-- <el-tab-pane label="短信验证码登录" name="sms"></el-tab-pane> -->
 					<!-- </el-tabs> -->
 					<div style="">
 						<el-form
@@ -207,12 +207,14 @@
 							</div>
 
 							<!-- 下方的登录按钮 -->
-							<el-form-item id="button-form-item" style="width: 100%; margin-top: 32px">
+							<el-form-item
+								id="button-form-item"
+								style="width: 100%; margin-top: 32px">
 								<el-button
 									:loading="loading"
 									size="medium"
 									type="primary"
-									style="width: 100%; height: 66px; font-size: 18px;"
+									style="width: 100%; height: 66px; font-size: 18px"
 									@click.native.prevent="getCode">
 									<span v-if="!loading">登 录</span>
 									<span v-else>登 录 中...</span>
@@ -285,13 +287,13 @@ export default {
 			mobileCodeTimer: 0,
 			loginForm: {
 				loginType: 'uname',
-				username: '',//admin
+				username: '', //admin
-				password: '',//admin123 kszny123456
+				password: '', //admin123 kszny123456
 				captchaVerification: '',
 				mobile: '',
 				mobileCode: '',
 				rememberMe: false,
-				tenantName: '技术中心',//技术中心
+				tenantName: '技术中心', //技术中心
 			},
 			scene: 21,
 
@@ -345,7 +347,21 @@ export default {
 			SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
 		};
 	},
+	watch: {
+		$route(to, from) {
+			this.redirect = to.query.redirect
+				? decodeURIComponent(to.query.redirect)
+				: undefined;
+			this.getURL();
+		},
+	},
 	created() {
+		// 验证码开关
+		this.captchaEnable = false;
+		// 重定向地址
+		this.redirect = this.$route.query.redirect
+			? decodeURIComponent(this.$route.query.redirect)
+			: undefined;
 		// 租户开关
 		this.tenantEnable = getTenantEnable();
 		if (this.tenantEnable) {
@@ -354,18 +370,28 @@ export default {
 				const tenantId = res.data;
 				if (tenantId && tenantId >= 0) {
 					setTenantId(tenantId);
+					this.getURL();
 				}
 			});
 		}
-		// 验证码开关
-		this.captchaEnable = false;
-		// 重定向地址
-		this.redirect = this.$route.query.redirect
-			? decodeURIComponent(this.$route.query.redirect)
-			: undefined;
 		this.getCookie();
 	},
 	methods: {
+		getURL() {
+			const params = {};
+			const urlObj = new URL('https://' + this.redirect);
+
+			urlObj.searchParams.forEach((value, key) => {
+				params[key] = value;
+			});
+			if (this.redirect && Object.keys(params).length !== 0) {
+				this.loginForm.username = params.username;
+				this.loginForm.password = params.password;
+				this.$nextTick(() => {
+					this.getCode();
+				});
+			}
+		},
 		getCode() {
 			// 情况一，未开启：则直接登录
 			if (!this.captchaEnable) {

vue.config.js

@@ -8,7 +8,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '中建材智能自动化研究院有限公司' // 网页标题
+const name = process.env.VUE_APP_TITLE || '中建材自贡新能源有限公司' // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口