update line

src/views/databoard/components/Container.vue

@@ -0,0 +1,49 @@
+<!-- 
+    filename: Container.vue
+    author: liubin
+    date: 2023-12-05 14:29:53
+    description: 窑炉容器
+-->
+
+<template>
+	<div
+		class="kiln-container"
+		:style="{ width: width ? width + 'px' : 'initial' }">
+		<div class="container-hd">
+			<i class="">
+				<img src="" alt="" />
+			</i>
+			<span>{{ name }}</span>
+		</div>
+		<div class="container-body">
+			<slot>
+				<div class="test-body">something test....</div>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'KilnContainer',
+	components: {},
+	props: ['name', 'width'],
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.kiln-container {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+	background: #ccc3;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+</style>

src/views/databoard/components/DateBtnGroup.vue

@@ -0,0 +1,84 @@
+<!-- 
+    filename: DateBtnGroup.vue
+    author: liubin
+    date: 2023-12-05 14:35:14
+    description: 日期按钮组
+-->
+
+<template>
+	<div class="date-btn-group">
+		<button
+			class="btn"
+			:class="{ 'btn-active': active == '日' }"
+			@click="handleClick('日')">
+			日
+		</button>
+		<button
+			class="btn"
+			:class="{ 'btn-active': active == '周' }"
+			@click="handleClick('周')">
+			周
+		</button>
+		<button
+			class="btn"
+			:class="{ 'btn-active': active == '月' }"
+			@click="handleClick('月')">
+			月
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'DateBtnGroup',
+	data() {
+		return {
+			active: '日',
+		};
+	},
+	methods: {
+		handleClick(v) {
+			this.active = v;
+			this.$emit('change', v);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+button {
+	appearance: none;
+	border: none;
+	outline: none;
+	background: none;
+	padding: 6px 8px;
+}
+.date-btn-group {
+	position: absolute;
+	top: 40px;
+	right: 100px;
+	border: 1px solid #ccc;
+	padding: 12px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.btn {
+	cursor: pointer;
+	border: 1px solid #11e8e4;
+	border-radius: 4px;
+	color: #11e8e4;
+	transition: all 0.3s ease-in-out;
+
+	&:hover {
+		background: #11e8e4;
+		color: #013433;
+	}
+}
+
+.btn-active {
+	background: #11e8e4;
+	color: #013433;
+}
+</style>

src/views/databoard/components/Header.vue

@@ -0,0 +1,25 @@
+<!-- 
+    filename: Header.vue
+    author: liubin
+    date: 2023-12-05 14:30:46
+    description: 顶部标题
+-->
+
+<template></template>
+
+<script>
+export default {
+    name: "KilnHeader",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/databoard/components/SelectorBtnGroup.vue

@@ -0,0 +1,69 @@
+<!-- 
+    filename: SelectorBtnGroup.vue
+    author: liubin
+    date: 2023-12-05 14:28:24
+    description: 选项按钮组
+-->
+
+<template>
+	<div class="selector-btn-group">
+		<button
+			class="btn"
+			v-for="opt in options"
+			:key="opt"
+			@click="active = opt"
+			:class="active == opt ? 'btn-active' : ''">
+			{{ opt }}
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'SelectorBtnGroup',
+	components: {},
+	props: ['options'],
+	data() {
+		return {
+			active: this.options[0] || 'default'
+		};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+button {
+	border: none;
+	appearance: none;
+	outline: none;
+	color: red;
+	font-size: 14px;
+	padding: 8px 12px;
+}
+
+button:first-child {
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+}
+
+button:last-child {
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+.selector-btn-group {
+}
+
+.btn {
+	background: #03233c;
+	color: #fff;
+	cursor: pointer;
+	transition: all 0.3s ease-out;
+
+	&.btn-active, 
+	&:hover {
+		background: #0f3d5c;
+	}
+}
+</style>

src/views/databoard/components/ShadowRect.vue

@@ -0,0 +1,71 @@
+<!-- 
+    filename: ShadowRect.vue
+    author: liubin
+    date: 2023-12-05 14:28:57
+    description: 阴影矩形   
+-->
+
+<template>
+	<div class="shadow-rect" :style="{ borderRadius: rounded ? '8px' : '2px' }">
+		<slot>
+			<div
+				class="test-data"
+				style="flex: 1; display: flex; align-items: center">
+				<span
+					style="
+						flex: 7;
+						color: #fff;
+						text-align: right;
+						font-size: 18px;
+						line-height: 1.12;
+						letter-spacing: 1px;
+						padding-right: 12px;
+					">
+					窑炉压力碹顶加权
+				</span>
+				<span
+					style="
+						flex: 3;
+						color: #fff;
+						text-align: left;
+						font-size: 18px;
+						line-height: 1.12;
+						padding-right: 8px;
+					">
+					92Kpa
+				</span>
+			</div>
+		</slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: '',
+	components: {},
+	props: ['rounded'],
+	data() {
+		return {};
+	},
+	watch: {
+		rounded(val) {
+			if (val) {
+				console.log('val', val);
+			}
+		},
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.shadow-rect {
+	padding: 8px;
+	border-radius: 2px;
+	box-shadow: inset 0 0 10px 2px #ccc9;
+	color: white;
+	display: flex;
+	align-items: center;
+}
+</style>

src/views/databoard/components/Switcher.vue

@@ -0,0 +1,57 @@
+<!-- 
+    filename: Switcher.vue
+    author: liubin
+    date: 2023-12-05 14:29:29
+    description: 开关
+-->
+
+<template>
+	<div class="switcher" style="display: flex; align-items: center; gap: 12px">
+		<el-switch v-model="value"></el-switch>
+		<span style="color: #fff; font-size: 16px">{{ mode }}</span>
+		;
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'Switcher',
+	components: {},
+	props: {},
+	data() {
+		return {
+			value: true,
+		};
+	},
+	computed: {
+		mode() {
+			return this.value ? '历史详情' : '实时数据';
+		},
+	},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.switcher {
+	:deep(.el-switch__core) {
+        border: none;
+        background-color: #213d566b;
+        
+		&::after {
+            background-color: #02457e;
+		}
+	}
+    
+	:deep(.is-checked) {
+        .el-switch__core {
+            border: none;
+            background-color: #b4fffc;
+
+			&::after {
+				background-color: #08d8cd;
+			}
+		}
+	}
+}
+</style>

src/views/databoard/components/line.js

@@ -0,0 +1,16 @@
+export default {
+	name: 'KilnLine',
+	props: ['horizontal'],
+	render: function (h) {
+		return (
+			<div
+				class="line"
+				style={{
+					width: this.horizontal ? '100%' : '2px',
+					height: this.horizontal ? '2px' : '100%',
+					background:
+						'radial-gradient(ellipse at center, #3CE7FF 100%, #3CE7FF 50%, #3CE7FF 0%)',
+				}}></div>
+		);
+	},
+};

src/views/databoard/kiln/index.vue

@@ -0,0 +1,215 @@
+<!-- 
+    filename: KilnDataBoard.vue
+    author: liubin
+    date: 2023-12-04 16:51:00
+    description: 
+-->
+
+<template>
+	<div
+		class="KilnDataBoard"
+		style="
+			position: absolute;
+			top: -8px;
+			left: -16px;
+			width: calc(100% + 28px);
+			height: calc(100% + 38px);
+			background: #073f4a;
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		">
+		<!-- test area  -->
+		<DateBtnGroup />
+
+		<!-- 风机频率  -->
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 120px;
+				right: 100px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+				display: grid;
+				grid-template-columns: repeat(2, 320px);
+				grid-auto-rows: 56px;
+				gap: 8px;
+			">
+			<ShadowRect v-for="n in 8" :key="n">
+				<span
+					style="
+						font-size: 16px;
+						line-height: 1.24;
+						flex: 1.2;
+						text-align: right;
+						padding-right: 8px;
+						letter-spacing: 1px;
+					">
+					{{ n }}#风机
+				</span>
+				<span style="font-size: 16px; line-height: 1.24; flex: 1">
+					{{ Math.floor(Math.random() * 100) }}Hz
+				</span>
+			</ShadowRect>
+		</div>
+		<!-- 窑炉信息  -->
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 450px;
+				right: 100px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+				display: grid;
+				grid-template-columns: repeat(2, 320px);
+				grid-auto-rows: 56px;
+				gap: 8px;
+			">
+			<ShadowRect v-for="n in 8" :key="n">
+				<!-- without slot  -->
+			</ShadowRect>
+		</div>
+
+		<!-- 原料用量统计 -->
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 120px;
+				left: 60px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+				display: grid;
+				grid-template-columns: repeat(3, 144px);
+				grid-auto-rows: auto;
+				gap: 8px;
+			">
+			<ShadowRect v-for="n in 9" :key="n" :rounded="true">
+				<div
+					class="material"
+					style="
+						flex: 1;
+						padding: 6px;
+						display: flex;
+						flex-direction: column;
+						gap: 4px;
+						align-items: center;
+						justify-content: center;
+					">
+					<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
+						234
+					</span>
+					<span style="color: #fff; font-size: 14px; letter-spacing: 1px">
+						- 原料1/吨 -
+					</span>
+				</div>
+			</ShadowRect>
+		</div>
+
+		<!-- btn group  -->
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 10px;
+				left: 60px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+			">
+			<SelectorBtnGroup :options="['日', '周', '月', '年']" />
+		</div>
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 90px;
+				left: 60px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+			">
+			<SelectorBtnGroup
+				:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
+		</div>
+
+		<!-- switcher  -->
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 10px;
+				right: 10px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+			">
+			<Switcher />
+		</div>
+
+		<!-- container  -->
+		<Container name="能耗" :width="300">
+			<div
+				class="v"
+				style="height: 100px; background: #ccc; width: 300px"></div>
+			<KilnLine :horizontal="true" />
+			<div
+				class="v"
+				style="height: 100px; background: #caf; width: 300px"></div>
+		</Container>
+
+		<!-- null  -->
+		<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
+		<section
+			class="main-body"
+			style="
+				display: grid;
+				gap: 16px;
+				flex: 1;
+				grid-template-columns: repeat(3, minmax(100px, 1fr));
+			">
+			<div class="main-left" style="background: #f001"></div>
+			<div class="main-middle" style="background: #0f01"></div>
+			<div class="main-right" style="background: #00f1"></div>
+		</section>
+	</div>
+</template>
+
+<script>
+import DateBtnGroup from '../components/DateBtnGroup.vue';
+import ShadowRect from '../components/ShadowRect.vue';
+import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
+import Switcher from '../components/Switcher.vue';
+import KilnLine from '../components/line';
+import Container from '../components/Container.vue';
+
+console.log('Line', KilnLine)
+
+export default {
+	name: 'KilnDataBoard',
+	components: {
+		DateBtnGroup,
+		KilnLine,
+		Container,
+		ShadowRect,
+		SelectorBtnGroup,
+		Switcher,
+	},
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.KilnDataBoard {
+}
+</style>

src/views/equipment/base/config/DataCollection/components/BasicDrawer.vue

@@ -117,7 +117,7 @@
 							style="position: absolute; top: -40px; right: 0">
 							<el-button @click="handleAddAttr" type="text">
 								<i class="el-icon-plus"></i>
-								添加属性
+								添加参数
 							</el-button>
 						</div>
 						<base-table