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

Reviewed-on: #438

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/dashboard/allDashboard/index-model.vue

@@ -0,0 +1,544 @@
+<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">{{ 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) }}%
+					</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="topText">本月总成本/万元</div>
+				</div>
+				<div style="flex: 5" class="bz25-5 bz-top">
+					<div class="topNum">
+						{{ 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">
+								{{ 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">
+								{{ 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">
+								{{ 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/coldDashboard/index-model.vue

@@ -0,0 +1,195 @@
+<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;
+			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;
+			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>

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">
+								{{ 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">
+								{{ 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">
+								{{ 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/login.vue

@@ -108,7 +108,7 @@
 				</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"
@@ -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>
@@ -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) {