更新

2024-05-24 15:59:49 +08:00
parent cf2a5a7861
commit dcba6962f2
19 changed files with 1508 additions and 286 deletions
--- a/src/views/asrs/heavenlyEyeLog/index-2.vue
+++ b/src/views/asrs/heavenlyEyeLog/index-2.vue
@@ -0,0 +1,169 @@
+<!--
+ * @Author: zwq
+ * @Date: 2024-05-15 16:18:19
+ * @LastEditors: zwq
+ * @LastEditTime: 2024-05-16 09:57:13
+ * @Description:
+-->
+<template>
+	<div class="app-container">
+		<el-table
+			:data="tableData"
+			:header-cell-style="{
+				background: '#F2F4F9',
+				color: '#606266',
+			}"
+			border
+			:cell-style="cellStyle"
+			:span-method="objectSpanMethod"
+			empty-text="暂无数据"
+			style="width: 100%"
+			ref="dataList">
+			<el-table-column type="index" fixed="left" label="#" align="center" />
+			<el-table-column prop="name" label="仓库名"></el-table-column>
+			<el-table-column prop="code" label="仓库编码"></el-table-column>
+			<el-table-column
+				v-for="item in columns"
+				:key="item.label"
+				align="center"
+				:label="item.label">
+				<el-table-column
+					v-for="it in item.children"
+					:key="it.prop"
+					:prop="it.prop"
+					align="center"
+					header-align="left"
+					:label="it.label">
+					<template slot-scope="scope">
+						{{ scope.row[it.prop] }}
+					</template>
+				</el-table-column>
+			</el-table-column>
+		</el-table>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			tableData: [
+				{
+					name: 1,
+					code: '1',
+					prop1: '1',
+					prop2: '2',
+					prop3: '3',
+					prop4: '4',
+					prop5: '5',
+					prop6: '6',
+					span: [2, 4],
+				},
+				{
+					name: 2,
+					code: '2',
+					prop1: '7',
+					prop2: '8',
+					prop3: '9',
+					prop4: '10',
+					prop5: '11',
+					prop6: '12',
+					span: [1, 5],
+				},
+			],
+			columns: [
+				{
+					label: '2023/1',
+					children: [
+						{
+							label: '1',
+							prop: 'prop1',
+						},
+						{
+							label: '15',
+							prop: 'prop2',
+						},
+						{
+							label: '30',
+							prop: 'prop3',
+						},
+					],
+				},
+				{
+					label: '2023/2',
+					children: [
+						{
+							label: '1',
+							prop: 'prop4',
+						},
+						{
+							label: '15',
+							prop: 'prop5',
+						},
+						{
+							label: '30',
+							prop: 'prop6',
+						},
+					],
+				},
+			],
+			color: [
+				'#5470c6',
+				'#91cc75',
+				'#fac858',
+				'#ee6666',
+				'#73c0de',
+				'#3ba272',
+				'#fc8452',
+				'#9a60b4',
+				'#ea7ccc',
+			],
+		};
+	},
+	components: {},
+	created() {},
+	methods: {
+		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+			let i = 0;
+			if (columnIndex === 3) {
+				return [1, row.span[0]];
+			} else if (columnIndex === 3 + row.span[i]) {
+				i += 1;
+				return [1, row.span[i]];
+			} else if (columnIndex > 3) {
+				return [0, 0];
+			}
+		},
+		cellStyle({ row, column, rowIndex, columnIndex }) {
+			let i = 0;
+			if (columnIndex === 3) {
+				return {
+					color: 'white',
+					borderRadius: '15px',
+					background: this.color[0],
+				};
+			} else if (columnIndex === 3 + row.span[i]) {
+				i += 1;
+				return {
+					color: 'white',
+					borderRadius: '15px',
+					background: i < 9 ? this.color[i] : 'none',
+				};
+			}
+		},
+	},
+};
+</script>
+<style>
+.app-container .el-table .el-table__cell {
+	padding: 0;
+	height: 35px;
+}
+.el-table .warning-row {
+	background: oldlace;
+}
+
+.el-table .success-row {
+	background: #f0f9eb;
+}
+</style>