diff --git a/src/views/specialEquipment/maintain/Monitor.vue b/src/views/specialEquipment/maintain/Monitor.vue
index 20b8f123..78a60dea 100644
--- a/src/views/specialEquipment/maintain/Monitor.vue
+++ b/src/views/specialEquipment/maintain/Monitor.vue
@@ -6,19 +6,452 @@
 -->
 
 <template>
-	<div class="SpecialEquipmentMaintainMonitor"></div>
+	<div class="app-container SpecialEquipmentMaintainMonitor">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@select-changed="handleSearchBarChange"
+			@headBtnClick="handleSearchBarBtnClick" />
+
+		<!-- 列表 -->
+		<base-table
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
+			@emitFun="handleEmitFun">
+			<!-- <method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				label="操作"
+				:width="120"
+				:method-list="tableBtn"
+				@clickBtn="handleTableBtnClick" /> -->
+		</base-table>
+
+		<!-- 分页组件 -->
+		<pagination
+			v-show="total > 0"
+			:total="total"
+			:page.sync="queryParams.pageNo"
+			:limit.sync="queryParams.pageSize"
+			@pagination="getList" />
+
+		<!-- 对话框(添加 / 修改) -->
+		<base-dialog
+			:dialogTitle="title"
+			:dialogVisible="open"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm
+				v-if="open"
+				ref="form"
+				v-model="form"
+				:has-files="false"
+				:rows="rows" />
+		</base-dialog>
+	</div>
 </template>
 
 <script>
-export default {
-	name: 'SpecialEquipmentMaintainMonitor',
-	components: {},
-	props: {},
+import { publicFormatter } from '@/utils/dict';
+// import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import { exportMaintainMonitorExcel } from '@/api/equipment/base/maintain/record';
+import { parseTime } from '@/utils/ruoyi';
+
+const remainBox = {
+	name: 'RemainBox',
+	props: ['injectData'],
 	data() {
 		return {};
 	},
-	computed: {},
-	methods: {},
+	computed: {
+		value() {
+			return this.injectData[this.injectData.prop] || null;
+		},
+		color() {
+			if (this.value) {
+				const v = +this.value;
+				return v < 0 ? '#FF5454' : v >= 0 && v < 2 ? '#FFD767' : '#37D97F';
+			}
+			return 'unset';
+		},
+	},
+	render: function (h) {
+		return (
+			<div
+				style={`background: ${
+					this.color
+				}; position:absolute; inset: 0; padding: 0 10px; display: flex; align-items: center; color: ${
+					// this.color == 'red' ? '#fff' : 'unset'
+					'#fff'
+				}`}>
+				{this.injectData[this.injectData.prop]?.toFixed(0) || ''}
+			</div>
+		);
+	},
+};
+
+const btn = {
+	name: 'tableBtn',
+	props: ['injectData'],
+	data() {
+		return {};
+	},
+	methods: {
+		handleClick() {
+			this.$emit('emitData', {
+				action: this.injectData.label,
+				value: this.injectData,
+			});
+		},
+	},
+	render: function (h) {
+		return (
+			<el-button type="text" onClick={this.handleClick}>
+				{this.injectData.name}
+			</el-button>
+		);
+	},
+};
+
+export default {
+	name: 'SpecialEquipmentMaintainMonitor',
+	components: {},
+	mixins: [basicPageMixin],
+	data() {
+		return {
+			searchBarKeys: ['planId', 'specialType', 'equipmentId'],
+			tableProps: [
+				// {
+				// 	prop: 'createTime',
+				// 	label: '添加时间',
+				// 	fixed: true,
+				// 	width: 180,
+				// 	filter: parseTime(createTime),
+				// },
+				{
+					prop: 'name',
+					label: '保养计划',
+					minWidth: 100,
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'lineName',
+					label: '产线名',
+					minWidth: 100,
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'equipmentCategory',
+					label: '设备大类',
+					minWidth: 100,
+					showOverflowtooltip: true,
+					filter: (val) =>
+						val != null ? ['-', '安全设备', '消防设备', '特种设备'][val] : '-',
+				},
+				{
+					prop: 'equipmentName',
+					label: '设备名称',
+					minWidth: 100,
+					showOverflowtooltip: true,
+				},
+				{ prop: 'maintenancePeriod', label: '保养频率' },
+				{
+					prop: 'maintainType',
+					label: '保养类型',
+					showOverflowtooltip: true,
+					filter: publicFormatter(this.DICT_TYPE.MAINTAIN_TYPE),
+				},
+				{
+					prop: 'lastMaintainTime',
+					label: '上次保养时间',
+					filter: parseTime,
+					minWidth: 150,
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'nextMaintainTime',
+					label: '计划下次保养时间',
+					filter: parseTime,
+					minWidth: 150,
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'remainDays',
+					label: '距离保养时间(天)',
+					subcomponent: remainBox,
+					minWidth: 150,
+					// showOverflowtooltip: true
+				},
+				{
+					prop: 'opt1',
+					label: '设备保养',
+					name: '操作',
+					subcomponent: btn,
+					width: 100,
+				},
+				{
+					prop: 'opt2',
+					label: '保养记录',
+					name: '查看详情',
+					subcomponent: btn,
+					width: 100,
+				},
+			],
+			searchBarFormConfig: [
+				{
+					type: 'select',
+					label: '保养计划',
+					placeholder: '请选择保养计划',
+					param: 'planId',
+					filterable: true,
+				},
+				{
+					type: 'select',
+					label: '设备大类',
+					placeholder: '请选择设备大类',
+					param: 'specialType',
+					onchange: true,
+					selectOptions: [
+						{ id: 1, name: '安全设备' },
+						{ id: 2, name: '消防设备' },
+						{ id: 3, name: '特种设备' },
+					],
+					filterable: true,
+				},
+				{
+					type: 'select',
+					label: '设备名',
+					placeholder: '请选择设备',
+					param: 'equipmentId',
+					filterable: true,
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:quality-inspection-type:export')
+						? 'button'
+						: '',
+					btnName: '导出',
+					name: 'export',
+					plain: true,
+					color: 'primary',
+				},
+			],
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				equipmentName: null,
+				createTime: null,
+				special: true,
+				specialType: null,
+			},
+			// 表单参数
+			form: {},
+			allSpecialEquipments: [],
+		};
+	},
+	created() {
+		this.initSearchBar();
+		this.getList();
+	},
+	methods: {
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有设备保养监控数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportMaintainMonitorExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '设备保养监控.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+		handleSearchBarChange({ param, value }) {
+			if ('specialType' === param) {
+				this.setSearchBarEquipmentList(
+					this.allSpecialEquipments.filter((item) => item.specialType == value)
+				);
+			}
+		},
+		setSearchBarEquipmentList(eqList) {
+			this.$set(
+				this.searchBarFormConfig[2],
+				'selectOptions',
+				eqList.map((item) => ({
+					name: item.name,
+					id: item.id,
+				}))
+			);
+		},
+		initSearchBar() {
+			this.$watch('current', {});
+			this.http('/base/core-equipment/listAll', 'get').then(({ data }) => {
+				this.allSpecialEquipments = data.filter((item) => item.special);
+				this.setSearchBarEquipmentList(data.filter((item) => item.special));
+			});
+			this.http('/base/equipment-maintain-plan/page', 'get', {
+				pageNo: 1,
+				pageSize: 100,
+				special: true
+			}).then(({ data }) => {
+				this.$set(
+					this.searchBarFormConfig[0],
+					'selectOptions',
+					(data?.list || []).map((item) => ({
+						name: item.name,
+						id: item.id,
+					}))
+				);
+			});
+		},
+		handleEmitFun({ action, value }) {
+			switch (action) {
+				// 查看详情
+				case '设备保养':
+					this.$router.push({
+						path: '/equipment/base/maintain/record',
+						query: {
+							addRecord: 1,
+							row: value,
+						},
+					});
+					break;
+				case '保养记录':
+					const queryData = {
+						equipmentId: value.equipmentId,
+						maintainPlanId: value.id,
+						relatePlan: value.lastMaintainTime ? 1 : 2,
+					};
+					this.$router.push({
+						path: '/equipment/base/maintain/record',
+						query: queryData,
+					});
+					break;
+			}
+		},
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			this.http(
+				'/base/equipment-maintain-plan/monitor',
+				'get',
+				this.queryParams
+			).then((response) => {
+				this.list = response.data.list;
+				this.total = response.data.total;
+				this.loading = false;
+			});
+		},
+		/** 取消按钮 */
+		cancel() {
+			this.open = false;
+			this.reset();
+		},
+		/** 表单重置 */
+		reset() {
+			this.form = {
+				code: null,
+				name: null,
+				equipmentId: null,
+				enabled: null,
+				maintenancePeriod: null,
+				maintainDuration: null,
+				maintainType: null,
+				remark: null,
+				enabled: 1,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加保养计划';
+		},
+		handleDetail(id) {
+			alert('跳转到 保养记录');
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			this.info({ id }).then((response) => {
+				this.form = response.data;
+				this.open = true;
+				this.title = '修改保养计划';
+			});
+		},
+		/** 提交按钮 */
+		submitForm() {
+			this.$refs['form'].validate((valid) => {
+				if (!valid) {
+					return;
+				}
+				// 修改的提交
+				if (this.form.id != null) {
+					this.put(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				this.post(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除设备类型"' + row.name + '"?')
+				.then(function () {
+					return this.del(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+	},
 };
 </script>