fix

virgo.wzfrontend/console/src/components/common/noticeBoard/device.vue

@@ -0,0 +1,688 @@
+<template>
+	<div class="notice-board-device">
+		<div class="left">
+			<div class="left-top">
+				<box label="设备信息">
+					<div class="organization-information-list">
+						<div class="item">
+							<div class="key">设备名称</div>
+							<div class="value">1号水泵</div>
+						</div>
+						<div class="item">
+							<div class="key">设备编码</div>
+							<div class="value">YX20250108001</div>
+						</div>
+						<div class="item">
+							<div class="key">所属部门</div>
+							<div class="value">运维部</div>
+						</div>
+						<div class="item">
+							<div class="key">主营业务</div>
+							<div class="value">人工智能技术服务</div>
+						</div>
+						<div class="item">
+							<div class="key">生产厂家</div>
+							<div class="value">上海水泵生产厂家</div>
+						</div>
+						<div class="item">
+							<div class="key">联系方式</div>
+							<div class="value">李工-17601274604</div>
+						</div>
+						<div class="item">
+							<div class="key">进场时间</div>
+							<div class="value">2023-03-15</div>
+						</div>
+					</div>
+				</box>
+			</div>
+			<div class="left-bottom">
+				<box label="告警记录">
+					<div class="alarm-record">
+						<div class="alarm-test">
+							<div class="test-item alarm">
+								<div class="label">告警数</div>
+								<div class="value">12</div>
+							</div>
+							<div class="test-item">
+								<div class="label">修复数</div>
+								<div class="value">11</div>
+							</div>
+						</div>
+
+						<div class="record-list">
+							<div class="record-item">
+								<div class="number">
+									01
+								</div>
+								<div class="value">
+									<div class="hui-ellipsis">xxx设备在xxx时间发生报警，请尽快查看并处理。</div>
+								</div>
+								<div class="state color-red">
+									报警中
+								</div>
+							</div>
+							<div class="record-item">
+								<div class="number">
+									02
+								</div>
+								<div class="value">
+									<div class="hui-ellipsis">xxx设备在xxx时间发生报警，请尽快查看并处理。</div>
+								</div>
+								<div class="state color-blue">
+									已处理
+								</div>
+							</div>
+							<div class="record-item">
+								<div class="number">
+									03
+								</div>
+								<div class="value">
+									<div class="hui-ellipsis">xxx设备在xxx时间发生报警，请尽快查看并处理。</div>
+								</div>
+								<div class="state color-red">
+									报警中
+								</div>
+							</div>
+							<div class="record-item">
+								<div class="number">
+									04
+								</div>
+								<div class="value">
+									<div class="hui-ellipsis">xxx设备在xxx时间发生报警，请尽快查看并处理。</div>
+								</div>
+								<div class="state color-blue">
+									已处理
+								</div>
+							</div>
+							<div class="record-item">
+								<div class="number">
+									05
+								</div>
+								<div class="value">
+									<div class="hui-ellipsis">xxx设备在xxx时间发生报警，请尽快查看并处理。</div>
+								</div>
+								<div class="state color-blue">
+									已处理
+								</div>
+							</div>
+						</div>
+					</div>
+				</box>
+			</div>
+		</div>
+		<div class="top">
+			<div class="top-boxs">
+				<box label="运维工单">
+					<div class="top-box">
+						<div class="line"></div>
+						<div class="top-item item-top">
+							<div class="item-box">
+								<div class="dages"></div>
+								<div class="contents">
+									<div class="num alibaba">1</div>
+									<div class="values">
+										<div class="titles">采购</div>
+										<div class="key"><span>1</span>次</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="top-item item-bottom">
+							<div class="item-box">
+								<div class="dages"></div>
+								<div class="contents">
+									<div class="num alibaba">2</div>
+									<div class="values">
+										<div class="titles">入场</div>
+										<div class="key"><span>1</span>次</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="top-item item-top">
+							<div class="item-box">
+								<div class="dages"></div>
+								<div class="contents">
+									<div class="num alibaba">3</div>
+									<div class="values">
+										<div class="titles">安装</div>
+										<div class="key"><span>1</span>次</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="top-item item-bottom">
+							<div class="item-box">
+								<div class="dages"></div>
+								<div class="contents">
+									<div class="num alibaba">4</div>
+									<div class="values">
+										<div class="titles">保养</div>
+										<div class="key"><span>1</span>次</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="top-item item-top">
+							<div class="item-box">
+								<div class="dages"></div>
+								<div class="contents">
+									<div class="num alibaba">5</div>
+									<div class="values">
+										<div class="titles">维修</div>
+										<div class="key"><span>1</span>次</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</box>
+			</div>
+		</div>
+		<div class="right">
+			<div class="now-data-box">
+				<box label="实时数据">
+					<div class="now-data">
+						<div class="now-data-label">
+							<div class="label">实时排放量</div>
+							<div class="unit">单位：m³/s</div>
+						</div>
+						<div class="number youshe">7.68</div>
+					</div>
+				</box>
+			</div>
+			<div class="right-bottom">
+				<box label="历史数据">
+					<div ref="chart" style="width: 100%;height: 100%;"></div>
+				</box>
+			</div>
+		</div>
+		<!-- <model style="width: 100%;height: 100%;" ref="model" fileId="10000892771892"></model> -->
+	</div>
+</template>
+
+<script>
+	import box from '@/components/common/noticeBoard/box'
+	import model from '@/components/work/common/model'
+	const color = ['#aaaaaa', '#fb9f34', '#2482fe'];
+	import {
+		getPie3D,
+		getParametricEquation
+	} from '@/uitls/charts.js' //工具类js，页面路径自己修改
+	export default {
+		data() {
+			return {
+				optionData: [{
+					name: '专利产权',
+					value: 3
+				}, {
+					name: '商标产权',
+					value: 6
+				}, {
+					name: '著作权产权',
+					value: 22
+				}]
+			}
+		},
+		created() {},
+		mounted() {
+			this.$nextTick(() => {
+				this.init()
+			})
+		},
+		methods: {
+			init() {
+				let myChart = echarts.init(this.$refs.chart);
+				// option
+				let option = {
+					grid: {
+						left: '10',
+						top: '30',
+						right: '20',
+						bottom: '10',
+						containLabel: true
+					},
+					color: 'rgba(33,104,206,1)',
+					xAxis: {
+						data: ['01', '02', '03', '04', '05', '06'],
+						axisLabel: {
+							lineStyle: {
+								color: 'rgba(255,255,255,.1)'
+							},
+							textStyle: {
+								color: "rgba(255,255,255,.6)",
+								fontSize: 12,
+							},
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgba(255,255,255,.2)'
+							}
+						},
+						splitLine: {
+							lineStyle: {
+								color: 'rgba(255,255,255,.1)'
+							}
+						}
+					},
+					yAxis: {
+						axisTick: {
+							show: false
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgba(255,255,255,.1)'
+							}
+						},
+						axisLabel: {
+							textStyle: {
+								color: "rgba(255,255,255,.6)",
+								fontSize: 12,
+							},
+						},
+						splitLine: {
+							lineStyle: {
+								color: 'rgba(255,255,255,.1)'
+							}
+						}
+					},
+					series: [{
+							name: 'line',
+							type: 'line',
+							smooth: true,
+							showAllSymbol: true,
+							symbol: 'emptyCircle',
+							symbolSize: 15,
+							data: [3, 2, 3, 4, 7, 6]
+						},
+						{
+							name: 'bar',
+							type: 'bar',
+							barWidth: 10,
+							itemStyle: {
+								borderRadius: 5,
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: '#14c8d4'
+									},
+									{
+										offset: 1,
+										color: '#43eec6'
+									}
+								])
+							},
+							data: [3, 2, 3, 4, 7, 6]
+						},
+						{
+							name: 'line',
+							type: 'bar',
+							barGap: '-100%',
+							barWidth: 10,
+							itemStyle: {
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: 'rgba(20,200,212,0.5)'
+									},
+									{
+										offset: 0.2,
+										color: 'rgba(20,200,212,0.2)'
+									},
+									{
+										offset: 1,
+										color: 'rgba(20,200,212,0)'
+									}
+								])
+							},
+							z: -12,
+							data: [7, 7, 7, 7, 7, 7]
+						},
+						{
+							name: 'dotted',
+							type: 'pictorialBar',
+							symbol: 'rect',
+							itemStyle: {
+								color: '#0f375f'
+							},
+							symbolRepeat: true,
+							symbolSize: [12, 4],
+							symbolMargin: 1,
+							z: -10,
+							data: [7, 7, 7, 7, 7, 7]
+						}
+					]
+				};
+				myChart.setOption(option);
+			}
+		},
+		components: {
+			box,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.notice-board-device {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		background: url(https://lanhu-oss.lanhuapp.com/pssojb3tye7vubv2ftf1nd9qqpjjolr8a16bce648-d855-43dd-bd70-e26ed58b5c42) 100% no-repeat;
+		background-size: 100% 100%;
+
+		.now-data-box {
+			margin-bottom: 15px;
+		}
+
+		.right-bottom {
+			flex: 1;
+			height: 0;
+		}
+
+		.now-data {
+			width: 100%;
+			height: 52px;
+			display: flex;
+			align-items: center;
+			background: linear-gradient(0deg, rgba(9, 39, 64, 0) 0%, rgba(53, 172, 255, 0.42) 51%, rgba(9, 39, 64, 0.83) 100%);
+			padding: 0 15px;
+			justify-content: space-between;
+
+			.label {
+				color: #2FC6DC;
+				font-weight: 600;
+			}
+
+			.unit {
+				font-size: 12px;
+				color: #fff;
+				font-weight: 600;
+				margin-top: 2px;
+			}
+
+			.number {
+				font-size: 26px;
+				color: #2FC6DC;
+			}
+		}
+
+		.right {
+			position: absolute;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			width: 350px;
+			background: linear-gradient(90deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 20%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
+			z-index: 97;
+			display: flex;
+			flex-direction: column;
+			padding: 220px 10px 10px 40px;
+		}
+
+		.left {
+			position: absolute;
+			left: 0;
+			top: 0;
+			bottom: 0;
+			width: 350px;
+			background: linear-gradient(270deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 20%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
+			z-index: 99;
+			display: flex;
+			flex-direction: column;
+			padding: 10px 40px 10px 10px;
+
+			.left-bottom {
+				flex: 1;
+				height: 0;
+				margin-top: 20px;
+			}
+		}
+
+		.alarm-record {
+			font-size: 14px;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.alarm-test {
+			display: flex;
+			align-items: center;
+		}
+
+		.test-item {
+			width: 146px;
+			height: 50px;
+			font-size: 12px;
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			position: relative;
+			background-image: url('../../../assets/img/device/2.png');
+			position: relative;
+
+			.label {
+				position: absolute;
+				left: 35px;
+				top: 2px;
+				color: RGBA(26, 236, 104, 0.7);
+			}
+
+			.value {
+				position: absolute;
+				top: 21px;
+				left: 42px;
+				font-size: 15px;
+				color: #fff;
+			}
+		}
+
+		.alarm {
+			background-image: url('../../../assets/img/device/4.png');
+
+			.label {
+				color: RGBA(254, 61, 52, 0.7);
+			}
+		}
+
+		.record-list {
+			margin-top: 16px;
+			flex: 1;
+			height: 0;
+			overflow-y: auto;
+			font-size: 13px;
+		}
+
+		.record-item {
+			height: 30px;
+			display: flex;
+			align-items: center;
+			background: rgba(39, 54, 83, 0.3);
+			width: 100%;
+			margin-bottom: 4px;
+		}
+
+		.record-item .number {
+			width: 38px;
+			border-left: 2px solid #6EA3FF;
+			overflow: hidden;
+			height: 30px;
+			line-height: 30px;
+			text-align: center;
+			background: rgba(207, 218, 230, 0.15);
+		}
+
+		.record-item .value {
+			flex: 1;
+			width: 0;
+			padding: 0 16px;
+		}
+
+		.record-item .hui-no-nowrap {
+			width: 100%;
+		}
+
+		.record-item .state {
+			padding: 0 14px 0 14px;
+		}
+
+		.top {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			background: linear-gradient(0deg, rgba(12, 15, 22, 0) 0%, rgba(12, 15, 22, 0.12) 13%, rgba(12, 15, 22, 0.65) 45%, rgba(12, 15, 22, 0.86) 64%, #0C0F16 100%);
+			height: 200px;
+			z-index: 98;
+			padding-left: 320px;
+			box-sizing: border-box;
+			padding-top: 10px;
+			padding-right: 10px;
+
+			.top-boxs {
+				width: 100%;
+				height: 100%;
+			}
+
+			.top-box {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				position: relative;
+			}
+
+			.line {
+				width: 90%;
+				height: 1px;
+				background: #A5B2C8;
+				position: absolute;
+			}
+
+			.top-item {
+				position: relative;
+				width: 126px;
+
+
+				.item-box {
+					position: absolute;
+				}
+			}
+
+			.contents {
+				width: 126px;
+				height: 46px;
+				padding-left: 15px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.dages {
+				width: 8px;
+				height: 8px;
+				background: #1A437C;
+				border-radius: 50%;
+				border: 1px solid #03F3F6;
+				position: absolute;
+				left: 50%;
+				margin-left: -4px;
+			}
+
+			.num {
+				font-weight: 500;
+				font-size: 26px;
+				color: #03F3F6;
+				line-height: 35px;
+				font-style: italic;
+			}
+
+			.values {
+				font-size: 12px;
+				font-style: italic;
+				margin-left: 15px;
+
+				.titles {
+					color: #03F3F6;
+					font-weight: 500;
+
+				}
+
+				.key {
+					font-size: 10px;
+
+					span {
+						font-size: 14px;
+						color: #03F3F6;
+					}
+				}
+			}
+
+			.item-top {
+
+				.item-box {
+					top: 50%;
+					margin-top: -65px;
+				}
+
+				.contents {
+					background: url('../../../assets/img/device/ju3.png') 100% no-repeat;
+					background-size: 100% 100%;
+				}
+
+				.dages {
+					bottom: -23px;
+				}
+			}
+
+			.item-bottom {
+
+				.item-box {
+					bottom: 50%;
+					margin-bottom: -65px;
+				}
+
+				.contents {
+					background: url('../../../assets/img/device/ju2.png') 100% no-repeat;
+					background-size: 100% 100%;
+				}
+
+				.dages {
+					top: -23px;
+				}
+			}
+		}
+	}
+
+	.organization-information-list {
+		font-weight: 400;
+		font-size: 13px;
+		color: #FFFFFF;
+
+		.item {
+			display: flex;
+			margin-bottom: 5px;
+
+			&:last-child {
+				margin-bottom: 0px;
+			}
+		}
+
+		.key,
+		.value {
+			background: rgba(185, 223, 250, 0.1);
+			padding: 7px;
+		}
+
+		.key {
+			width: 80px;
+			text-align: center;
+			color: rgba(255, 255, 255, 0.8);
+		}
+
+		.value {
+			margin-left: 5px;
+			flex: 1;
+			width: 0;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/components/common/noticeBoard/organization.vue

@@ -0,0 +1,529 @@
+<template>
+	<div class="notice-board">
+		<div class="left">
+			<div class="left-top">
+				<box label="企业信息">
+					<div class="organization-information-list">
+						<div class="item">
+							<div class="key">企业名称</div>
+							<div class="value">智慧科技创新有限公司</div>
+						</div>
+						<div class="item">
+							<div class="key">信用代码</div>
+							<div class="value">91440300MA5F6XYH2N</div>
+						</div>
+						<div class="item">
+							<div class="key">法人代表</div>
+							<div class="value">陈志远</div>
+						</div>
+						<div class="item">
+							<div class="key">主营业务</div>
+							<div class="value">人工智能技术服务</div>
+						</div>
+						<div class="item">
+							<div class="key">联系人</div>
+							<div class="value">林美玲（商务总监）</div>
+						</div>
+						<div class="item">
+							<div class="key">入驻时间</div>
+							<div class="value">2023-03-15</div>
+						</div>
+						<div class="item">
+							<div class="key">合同期限</div>
+							<div class="value">2023-03-15 至 2026-03-14</div>
+						</div>
+						<div class="item">
+							<div class="key">企业编码</div>
+							<div class="value">QY202502080001</div>
+						</div>
+						<div class="item">
+							<div class="key">房间号码</div>
+							<div class="value">1#-1F-1101、1#-1F-1102</div>
+						</div>
+					</div>
+				</box>
+			</div>
+			<div class="left-bottom">
+				<box label="知识产权">
+					<div ref="chart" class="echarts-box" style="width: 100%;height: 100%;"></div>
+				</box>
+			</div>
+		</div>
+		<div class="top">
+			<div class="top-box">
+				<div class="top-item">
+					<div class="title">
+						<i class="iconfont huifont-louceng"></i>
+						<div class="label">房租</div>
+					</div>
+					<div class="value">
+						<span class="alibaba color-cyan">75</span>
+						<span class="unit">元</span>
+					</div>
+				</div>
+				<div class="top-item">
+					<div class="title">
+						<i class="iconfont huifont-qiandao"></i>
+						<div class="label">水电费</div>
+					</div>
+					<div class="value">
+						<span class="alibaba color-cyan">75</span>
+						<span class="unit">元</span>
+					</div>
+				</div>
+				<div class="top-item">
+					<div class="title">
+						<i class="iconfont huifont-yichuli1"></i>
+						<div class="label">物业费</div>
+					</div>
+					<div class="value">
+						<span class="alibaba color-cyan">75</span>
+						<span class="unit">元</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="right-chart">
+				<box label="企业产值">
+					<div ref="chart1" class="echarts-box"></div>
+				</box>
+			</div>
+			<div class="right-bottom">
+				<box label="企业里程碑">
+					<div class="process-box">
+						<div class="process-item">
+							<div class="line"></div>
+							<div class="icon">
+								<div class="icon1">
+									<div class="icon2"></div>
+								</div>
+							</div>
+							<div class="article">
+								<div class="date youshe">2023.06.24</div>
+								<div class="article-title youshe">时间轴大标题</div>
+								<div class="article-content">我是内容我是内容我是内容</div>
+							</div>
+						</div>
+						<div class="process-item">
+							<div class="line"></div>
+							<div class="icon">
+								<div class="icon1">
+									<div class="icon2"></div>
+								</div>
+							</div>
+							<div class="article">
+								<div class="date youshe">2023.06.24</div>
+								<div class="article-title youshe">时间轴大标题</div>
+								<div class="article-content">我是内容我是内容我是内容</div>
+							</div>
+						</div>
+						<div class="process-item">
+							<div class="line"></div>
+							<div class="icon">
+								<div class="icon1">
+									<div class="icon2"></div>
+								</div>
+							</div>
+							<div class="article">
+								<div class="date youshe">2023.06.24</div>
+								<div class="article-title youshe">时间轴大标题</div>
+								<div class="article-content">我是内容我是内容我是内容</div>
+							</div>
+						</div>
+					</div>
+				</box>
+			</div>
+		</div>
+		<!-- <model style="width: 100%;height: 100%;" ref="model" fileId="10000892771892"></model> -->
+	</div>
+</template>
+
+<script>
+	import box from '@/components/common/noticeBoard/box'
+	import model from '@/components/work/common/model'
+	export default {
+		data() {
+			return {
+				optionData: [{
+					name: '专利产权',
+					value: 3
+				}, {
+					name: '商标产权',
+					value: 6
+				}, {
+					name: '著作权产权',
+					value: 5
+				}]
+			}
+		},
+		created() {
+			this.setLabel()
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.initChart();
+				this.chart(this.$refs.chart1, [1200, 1340, 1580, 1600, 1640, 1640, 1700])
+			})
+		},
+		methods: {
+			initChart() {
+				var chartDom = this.$refs.chart;
+				var myChart = echarts.init(chartDom);
+				var option;
+				option = {
+					color: ['rgba(0, 184, 200, 1.0)', 'rgba(0, 212, 151, 1.0)', 'rgba(219, 128, 15, 1.0)'],
+					title: {
+						show: false
+					},
+					tooltip: {
+						trigger: 'item'
+					},
+					legend: {
+						show: false
+					},
+					series: [{
+						type: 'pie',
+						radius: '90%',
+						data: this.optionData,
+						label: {
+							position: 'inner',
+							color: '#fff',
+							formatter: '{b}\n{c}'
+						}
+					}]
+				};
+
+				option && myChart.setOption(option);
+
+			},
+			chart(elem, data) {
+				let chart = echarts.init(elem);
+				let option = {
+					tooltip: {
+						show: true,
+						trigger: 'axis',
+						formatter: function() {
+							return ''
+						},
+						backgroundColor: 'rgba(255,255,255,0)',
+						borderWidth: 0,
+						padding: 0,
+						axisPointer: {
+							lineStyle: {
+								type: 'solid',
+								color: '#4E5561',
+							}
+						}
+					},
+					grid: {
+						left: '15',
+						top: '30',
+						right: '15',
+						bottom: '0',
+						containLabel: true
+					},
+					color: ['#1978E5'],
+					xAxis: {
+						type: 'category',
+						data: ['01', '02', '03', '04', '05', '06', '07'],
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						axisLine: {
+							lineStyle: {
+								color: '#6C8097'
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						name: '万元',
+						type: 'value',
+						minInterval: 1,
+						splitNumber: 3,
+						nameTextStyle: {
+							color: '#D0DEEE',
+							fontSize: 10,
+							align: 'right',
+						},
+						axisLabel: {
+							margin: 10,
+							color: '#D0DEEE',
+							fontSize: 10
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(108,128,151,0.3)',
+								type: 'dashed'
+							}
+						}
+					},
+					series: [{
+						data: data,
+						type: 'bar',
+						barWidth: 10,
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: 'rgba(73, 223, 214, 0.67)'
+						}, {
+							offset: 1,
+							color: 'rgba(0, 58, 255, 0)'
+						}, ]),
+					}]
+				};
+				chart.setOption(option);
+			},
+		},
+		components: {
+			box,
+			model
+		}
+	}
+</script>
+
+<style lang="scss">
+	.notice-board {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		background: url(https://lanhu-oss.lanhuapp.com/pssojb3tye7vubv2ftf1nd9qqpjjolr8a16bce648-d855-43dd-bd70-e26ed58b5c42) 100% no-repeat;
+		background-size: 100% 100%;
+
+		.left {
+			position: absolute;
+			left: 0;
+			top: 0;
+			bottom: 0;
+			width: 350px;
+			background: linear-gradient(270deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 20%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
+			z-index: 99;
+			display: flex;
+			flex-direction: column;
+			padding: 10px 40px 10px 10px;
+
+			.left-bottom {
+				flex: 1;
+				height: 0;
+				margin-top: 20px;
+			}
+		}
+
+		.right {
+			position: absolute;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			width: 350px;
+			background: linear-gradient(90deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 20%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
+			z-index: 99;
+			display: flex;
+			flex-direction: column;
+			padding: 10px 10px 10px 40px;
+
+			.right-chart {
+				margin-bottom: 10px;
+			}
+
+			.echarts-box {
+				height: 160px;
+			}
+
+			.right-bottom {
+				flex: 1;
+				height: 0;
+				margin-top: 20px;
+
+				.process-box {
+					width: 100%;
+					height: 100%;
+					position: relative;
+
+					.line {
+						position: absolute;
+						width: 3px;
+						background: rgba(0, 78, 126, 0.6);
+						left: 9px;
+						top: 0;
+						bottom: -15px;
+
+					}
+
+					.process-item {
+						position: relative;
+						z-index: 9;
+						padding-left: 30px;
+						margin-bottom: 15px;
+
+						&:nth-child(2n) {
+							.article {
+								border-color: rgba(1, 255, 180, 0.6);
+							}
+
+						}
+
+						&:nth-child(3n) {
+							.article {
+								border-color: rgba(255, 147, 6, 0.6);
+							}
+						}
+					}
+
+					.icon {
+						width: 20px;
+						height: 20px;
+						background: rgba(0, 159, 255, 0.39);
+						border-radius: 50%;
+						border: 1px solid rgba(73, 223, 214, 0.67);
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						position: absolute;
+						top: 20px;
+						left: 0;
+					}
+
+					.icon1 {
+						width: 10px;
+						height: 10px;
+						background: #009FFF;
+						border-radius: 50%;
+						border: 2px solid rgba(73, 223, 214, 1);
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+
+					.icon2 {
+						width: 5px;
+						height: 5px;
+						background: linear-gradient(0deg, #FFFFFF 0%, rgba(1, 126, 201, 0) 100%);
+						border-radius: 50%;
+					}
+
+					.article {
+						border-top: 2px solid rgba(0, 234, 255, 0.6);
+						background: rgba(0, 148, 238, 0.1);
+						padding: 10px;
+
+
+
+						.article-title {
+							font-size: 14px;
+							margin: 8px 0 6px 0;
+						}
+
+						.date {
+							font-size: 16px;
+							color: #fff;
+						}
+
+						.article-content {
+							font-weight: 400;
+							font-size: 12px;
+							color: #FFFFFF;
+							line-height: 12px;
+							opacity: 0.6;
+						}
+					}
+				}
+			}
+		}
+
+		.top {
+			position: absolute;
+			top: 10px;
+			left: 310px;
+			right: 310px;
+
+			.top-box {
+				width: 100%;
+				display: flex;
+				justify-content: space-evenly;
+			}
+
+			.top-item {
+				width: 130px;
+			}
+
+			.value {
+				height: 32px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border: 1px solid rgba(9, 81, 137, 0.3);
+
+				.color-cyan {
+					font-size: 16px;
+					margin-right: 3px;
+				}
+
+				.unit {
+					font-size: 12px;
+				}
+			}
+
+			.title {
+				background: linear-gradient(-90deg, rgba(0, 187, 255, 0) 0%, rgba(0, 230, 255, 0.09) 50%, rgba(0, 187, 255, 0) 100%);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 32px;
+
+				.label {
+					font-weight: 400;
+					font-size: 13px;
+					color: #FFFFFF;
+					margin-left: 6px;
+				}
+			}
+
+			.iconfont {
+				font-size: 20px;
+				display: inline-block; //使元素成为行内块元素
+				line-height: 1; //设置宽度和高度
+				background: linear-gradient(0deg, #0080FF, #FFFFFF);
+				-webkit-background-clip: text; //指定背景只在文本内部显示
+				-webkit-text-fill-color: transparent; //使文本颜色透明
+			}
+		}
+	}
+
+	.organization-information-list {
+		font-weight: 400;
+		font-size: 13px;
+		color: #FFFFFF;
+
+		.item {
+			display: flex;
+			margin-bottom: 5px;
+
+			&:last-child {
+				margin-bottom: 0px;
+			}
+		}
+
+		.key,
+		.value {
+			background: rgba(185, 223, 250, 0.1);
+			padding: 7px;
+		}
+
+		.key {
+			width: 80px;
+			text-align: center;
+			color: rgba(255, 255, 255, 0.8);
+		}
+
+		.value {
+			margin-left: 5px;
+			flex: 1;
+			width: 0;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/components/work/common/noticeBoard.vue

@@ -1,568 +1,28 @@
 <template>
-	<div class="notice-board">
-		<div class="left">
-			<div class="left-top">
-				<box label="企业信息">
-					<div class="organization-information-list">
-						<div class="item">
-							<div class="key">企业名称</div>
-							<div class="value">智慧科技创新有限公司</div>
-						</div>
-						<div class="item">
-							<div class="key">信用代码</div>
-							<div class="value">91440300MA5F6XYH2N</div>
-						</div>
-						<div class="item">
-							<div class="key">法人代表</div>
-							<div class="value">陈志远</div>
-						</div>
-						<div class="item">
-							<div class="key">主营业务</div>
-							<div class="value">人工智能技术服务</div>
-						</div>
-						<div class="item">
-							<div class="key">联系人</div>
-							<div class="value">林美玲（商务总监）</div>
-						</div>
-						<div class="item">
-							<div class="key">入驻时间</div>
-							<div class="value">2023-03-15</div>
-						</div>
-						<div class="item">
-							<div class="key">合同期限</div>
-							<div class="value">2023-03-15 至 2026-03-14</div>
-						</div>
-					</div>
-				</box>
-			</div>
-			<div class="left-bottom">
-				<box label="知识产权">
-					<div ref="chart" class="echarts-box" style="width: 100%;height: 100%;"></div>
-				</box>
-			</div>
-		</div>
-		<div class="top">
-			<div class="top-box">
-				<div class="top-item">
-					<div class="title">
-						<i class="iconfont huifont-louceng"></i>
-						<div class="label">房租</div>
-					</div>
-					<div class="value">
-						<span class="alibaba color-cyan">75</span>
-						<span class="unit">元</span>
-					</div>
-				</div>
-				<div class="top-item">
-					<div class="title">
-						<i class="iconfont huifont-qiandao"></i>
-						<div class="label">水电费</div>
-					</div>
-					<div class="value">
-						<span class="alibaba color-cyan">75</span>
-						<span class="unit">元</span>
-					</div>
-				</div>
-				<div class="top-item">
-					<div class="title">
-						<i class="iconfont huifont-yichuli1"></i>
-						<div class="label">物业费</div>
-					</div>
-					<div class="value">
-						<span class="alibaba color-cyan">75</span>
-						<span class="unit">元</span>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="right">
-			<div class="right-chart">
-				<box label="企业产值">
-					<div ref="chart1" class="echarts-box"></div>
-				</box>
-			</div>
-			<div class="right-bottom">
-				<box label="发展历程">
-					<div class="process-box">
-						<div class="process-item">
-							<div class="line"></div>
-							<div class="icon">
-								<div class="icon1">
-									<div class="icon2"></div>
-								</div>
-							</div>
-							<div class="article">
-								<div class="date youshe">2023.06.24</div>
-								<div class="article-title youshe">时间轴大标题</div>
-								<div class="article-content">我是内容我是内容我是内容</div>
-							</div>
-						</div>
-						<div class="process-item">
-							<div class="line"></div>
-							<div class="icon">
-								<div class="icon1">
-									<div class="icon2"></div>
-								</div>
-							</div>
-							<div class="article">
-								<div class="date youshe">2023.06.24</div>
-								<div class="article-title youshe">时间轴大标题</div>
-								<div class="article-content">我是内容我是内容我是内容</div>
-							</div>
-						</div>
-						<div class="process-item">
-							<div class="line"></div>
-							<div class="icon">
-								<div class="icon1">
-									<div class="icon2"></div>
-								</div>
-							</div>
-							<div class="article">
-								<div class="date youshe">2023.06.24</div>
-								<div class="article-title youshe">时间轴大标题</div>
-								<div class="article-content">我是内容我是内容我是内容</div>
-							</div>
-						</div>
-					</div>
-				</box>
-			</div>
-		</div>
-		<!-- <model style="width: 100%;height: 100%;" ref="model" fileId="10000892771892"></model> -->
+	<div class="notice-board-box">
+		<organization v-if="type === '1'"></organization>
+		<device v-else></device>
 	</div>
 </template>
-
 <script>
-	import box from '@/components/common/noticeBoard/box'
-	import model from '@/components/work/common/model'
-	const color = ['#aaaaaa', '#fb9f34', '#2482fe'];
-	import {
-		getPie3D,
-		getParametricEquation
-	} from '@/uitls/charts.js' //工具类js，页面路径自己修改
+	import organization from '@/components/common/noticeBoard/organization'
+	import device from '@/components/common/noticeBoard/device'
 	export default {
+		props: ['type'],
 		data() {
 			return {
-				optionData: [{
-					name: '专利产权',
-					value: 3
-				}, {
-					name: '商标产权',
-					value: 6
-				}, {
-					name: '著作权产权',
-					value: 22
-				}]
+
 			}
 		},
-		created() {
-			this.setLabel()
-		},
-		mounted() {
-			this.$nextTick(() => {
-				this.initChart();
-				this.chart(this.$refs.chart1, [1200, 1340, 1580, 1600, 1640, 1640, 1700])
-			})
-		},
-		methods: {
-			// 初始化label样式
-			setLabel() {
-				this.optionData.forEach((item, index) => {
-					item.itemStyle = {
-						color: color[index]
-					}
-					item.label = {
-						normal: {
-							show: true,
-							color: color[index],
-							formatter: [
-								'{b|{b}}',
-								'{c|{c}}{b|个}'
-							].join('\n'), // 用\n来换行
-							rich: {
-								b: {
-									fontSize: 12,
-									color: '#fff',
-									lineHeight: 18,
-									align: 'left'
-								},
-								c: {
-									fontSize: 16,
-									color: '#fff',
-									textShadowColor: '#1c90a6',
-									textShadowOffsetX: 0,
-									textShadowOffsetY: 2,
-									textShadowBlur: 5
-								},
-								d: {
-									color: color[index],
-									align: 'left'
-								}
-							}
-						}
-					}
-					item.labelLine = {
-						normal: {
-							lineStyle: {
-								width: 1,
-								color: 'rgba(255,255,255,0.7)'
-							}
-						}
-					}
-				})
-			},
-			initChart() {
-				this.statusChart = echarts.init(this.$refs.chart)
-				// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
-				this.option = getPie3D(this.optionData, 0.8, 240, 28, 26, 0.5)
-				this.statusChart.setOption(this.option)
-				// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
-				this.option.series.push({
-					name: '电梯状态', //自己根据场景修改
-					backgroundColor: 'transparent',
-					type: 'pie',
-					label: {
-						opacity: 1,
-						fontSize: 13,
-						lineHeight: 20
-					},
-					startAngle: -40, // 起始角度，支持范围[0, 360]。
-					clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-					radius: ['20%', '50%'],
-					center: ['50%', '50%'],
-					data: this.optionData,
-					itemStyle: {
-						opacity: 0 //这里必须是0，不然2d的图会覆盖在表面
-					}
-				})
-				this.statusChart.setOption(this.option)
-			},
-			chart(elem, data) {
-				let chart = echarts.init(elem);
-				let option = {
-					tooltip: {
-						show: true,
-						trigger: 'axis',
-						formatter: function() {
-							return ''
-						},
-						backgroundColor: 'rgba(255,255,255,0)',
-						borderWidth: 0,
-						padding: 0,
-						axisPointer: {
-							lineStyle: {
-								type: 'solid',
-								color: '#4E5561',
-							}
-						}
-					},
-					grid: {
-						left: '15',
-						top: '30',
-						right: '15',
-						bottom: '0',
-						containLabel: true
-					},
-					color: ['#1978E5'],
-					xAxis: {
-						type: 'category',
-						data: ['01', '02', '03', '04', '05', '06', '07'],
-						axisLabel: {
-							margin: 10,
-							color: '#D0DEEE',
-							fontSize: 10
-						},
-						axisLine: {
-							lineStyle: {
-								color: '#6C8097'
-							}
-						},
-						axisTick: {
-							show: false
-						}
-					},
-					yAxis: {
-						name: '万元',
-						type: 'value',
-						minInterval: 1,
-						splitNumber: 3,
-						nameTextStyle: {
-							color: '#D0DEEE',
-							fontSize: 10,
-							align: 'right',
-						},
-						axisLabel: {
-							margin: 10,
-							color: '#D0DEEE',
-							fontSize: 10
-						},
-						splitLine: {
-							show: true,
-							lineStyle: {
-								color: 'rgba(108,128,151,0.3)',
-								type: 'dashed'
-							}
-						}
-					},
-					series: [{
-						data: data,
-						type: 'bar',
-						barWidth: 10,
-						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-							offset: 0,
-							color: 'rgba(73, 223, 214, 0.67)'
-						}, {
-							offset: 1,
-							color: 'rgba(0, 58, 255, 0)'
-						}, ]),
-					}]
-				};
-				chart.setOption(option);
-			},
-		},
 		components: {
-			box,
-			model
+			organization,
+			device
 		}
 	}
 </script>
-
 <style lang="scss">
-	.notice-board {
-		position: relative;
+	.notice-board-box {
 		width: 100%;
 		height: 100%;
-		background: url(https://lanhu-oss.lanhuapp.com/pssojb3tye7vubv2ftf1nd9qqpjjolr8a16bce648-d855-43dd-bd70-e26ed58b5c42) 100% no-repeat;
-		background-size: 100% 100%;
-
-		.left {
-			position: absolute;
-			left: 0;
-			top: 0;
-			bottom: 0;
-			width: 350px;
-			background: linear-gradient(270deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 20%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
-			z-index: 99;
-			display: flex;
-			flex-direction: column;
-			padding: 10px 40px 10px 10px;
-
-			.left-bottom {
-				flex: 1;
-				height: 0;
-				margin-top: 20px;
-			}
-		}
-
-		.right {
-			position: absolute;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			width: 350px;
-			background: linear-gradient(90deg, rgba(3, 4, 7, 0) 0%, rgba(6, 8, 12, 0.35) 15%, rgba(9, 12, 17, 0.45) 20%, rgba(9, 12, 17, 0.69) 50%, #0C0F16 100%);
-			z-index: 99;
-			display: flex;
-			flex-direction: column;
-			padding: 10px 10px 10px 40px;
-
-			.right-chart {
-				margin-bottom: 10px;
-			}
-
-			.echarts-box {
-				height: 160px;
-			}
-
-			.right-bottom {
-				flex: 1;
-				height: 0;
-				margin-top: 20px;
-
-				.process-box {
-					width: 100%;
-					height: 100%;
-					position: relative;
-
-					.line {
-						position: absolute;
-						width: 3px;
-						background: rgba(0, 78, 126, 0.6);
-						left: 9px;
-						top: 0;
-						bottom: -15px;
-
-					}
-
-					.process-item {
-						position: relative;
-						z-index: 9;
-						padding-left: 30px;
-						margin-bottom: 15px;
-
-						&:nth-child(2n) {
-							.article {
-								border-color: rgba(1, 255, 180, 0.6);
-							}
-
-						}
-
-						&:nth-child(3n) {
-							.article {
-								border-color: rgba(255, 147, 6, 0.6);
-							}
-						}
-					}
-
-					.icon {
-						width: 20px;
-						height: 20px;
-						background: rgba(0, 159, 255, 0.39);
-						border-radius: 50%;
-						border: 1px solid rgba(73, 223, 214, 0.67);
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						position: absolute;
-						top: 20px;
-						left: 0;
-					}
-
-					.icon1 {
-						width: 10px;
-						height: 10px;
-						background: #009FFF;
-						border-radius: 50%;
-						border: 2px solid rgba(73, 223, 214, 1);
-						display: flex;
-						align-items: center;
-						justify-content: center;
-					}
-
-					.icon2 {
-						width: 5px;
-						height: 5px;
-						background: linear-gradient(0deg, #FFFFFF 0%, rgba(1, 126, 201, 0) 100%);
-						border-radius: 50%;
-					}
-
-					.article {
-						border-top: 2px solid rgba(0, 234, 255, 0.6);
-						background: rgba(0, 148, 238, 0.1);
-						padding: 10px;
-
-
-
-						.article-title {
-							font-size: 14px;
-							margin: 8px 0 6px 0;
-						}
-
-						.date {
-							font-size: 16px;
-							color: #fff;
-						}
-
-						.article-content {
-							font-weight: 400;
-							font-size: 12px;
-							color: #FFFFFF;
-							line-height: 12px;
-							opacity: 0.6;
-						}
-					}
-				}
-			}
-		}
-
-		.top {
-			position: absolute;
-			top: 10px;
-			left: 310px;
-			right: 310px;
-
-			.top-box {
-				width: 100%;
-				display: flex;
-				justify-content: space-evenly;
-			}
-
-			.top-item {
-				width: 130px;
-			}
-
-			.value {
-				height: 32px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				border: 1px solid rgba(9, 81, 137, 0.3);
-
-				.color-cyan {
-					font-size: 16px;
-					margin-right: 3px;
-				}
-
-				.unit {
-					font-size: 12px;
-				}
-			}
-
-			.title {
-				background: linear-gradient(-90deg, rgba(0, 187, 255, 0) 0%, rgba(0, 230, 255, 0.09) 50%, rgba(0, 187, 255, 0) 100%);
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				height: 32px;
-
-				.label {
-					font-weight: 400;
-					font-size: 13px;
-					color: #FFFFFF;
-					margin-left: 6px;
-				}
-			}
-
-			.iconfont {
-				font-size: 20px;
-				display: inline-block; //使元素成为行内块元素
-				line-height: 1; //设置宽度和高度
-				background: linear-gradient(0deg, #0080FF, #FFFFFF);
-				-webkit-background-clip: text; //指定背景只在文本内部显示
-				-webkit-text-fill-color: transparent; //使文本颜色透明
-			}
-		}
-	}
-
-	.organization-information-list {
-		font-weight: 400;
-		font-size: 13px;
-		color: #FFFFFF;
-
-		.item {
-			display: flex;
-			margin-bottom: 5px;
-
-			&:last-child {
-				margin-bottom: 0px;
-			}
-		}
-
-		.key,
-		.value {
-			background: rgba(185, 223, 250, 0.1);
-			padding: 7px;
-		}
-
-		.key {
-			width: 80px;
-			text-align: center;
-			color: rgba(255, 255, 255, 0.8);
-		}
-
-		.value {
-			margin-left: 5px;
-			flex: 1;
-			width: 0;
-		}
 	}
 </style>

virgo.wzfrontend/console/src/views/work/index.vue

@@ -12,11 +12,11 @@
 					<div class="user-list">
 						<div class="user-item">
 							<div class="user-key">岗位名称</div>
-							<div class="user-value" @click="modelVisible = true">物业经理</div>
+							<div class="user-value" @click="open('1')">物业经理</div>
 						</div>
 						<div class="user-item">
 							<div class="user-key">公司部门</div>
-							<div class="user-value">智慧城市事业部</div>
+							<div class="user-value" @click="open('2')">智慧城市事业部</div>
 						</div>
 						<div class="user-item">
 							<div class="user-key">联系方式</div>
@@ -214,9 +214,9 @@
 			<detail v-if="drawer" :type="item.messageType" :detail="item" @close="drawer = false">
 			</detail>
 		</el-drawer>
-		<el-dialog :close-on-click-modal="false" title="企业看板" :visible.sync="modelVisible" width="1100px"
-			:append-to-body="true">
-			<notice-board></notice-board>
+		<el-dialog :close-on-click-modal="false" :title="type === '1' ? '企业看板':'设备看板'" :visible.sync="modelVisible"
+			width="1100px" :append-to-body="true">
+			<notice-board :type="type"></notice-board>
 		</el-dialog>
 
 	</div>
@@ -264,7 +264,8 @@
 					value: 26,
 					name: "其他",
 					color: '#6DC8EC'
-				}]
+				}],
+				type: '1'
 			}
 		},
 		created() {
@@ -280,6 +281,10 @@
 			noticeBoard
 		},
 		methods: {
+			open(type) {
+				this.type = type;
+				this.modelVisible = true;
+			},
 			initLog() {
 				let data = {
 					projectId: this.$store.getters.project.id,