冲突

src/views/base/equipmentAttr/index.vue

@@ -3,8 +3,8 @@
 
     <!-- 搜索工作栏 -->
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="上班日期" prop="startDay">
-        <el-input v-model="queryParams.startDay" placeholder="请输入上班日期" clearable @keyup.enter.native="handleQuery"/>
+      <el-form-item label="设备id" prop="equipmentId">
+        <el-input v-model="queryParams.equipmentId" placeholder="请输入设备id" clearable @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
@@ -16,11 +16,11 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['base:group-team-scheduling:create']">新增</el-button>
+                   v-hasPermi="['base:equipment-attr:create']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['base:group-team-scheduling:export']">导出</el-button>
+                   v-hasPermi="['base:equipment-attr:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -28,19 +28,9 @@
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
       <el-table-column label="ID" align="center" prop="id" />
-      <el-table-column label="班组ID" align="center" prop="teamId" />
-      <el-table-column label="班次id" align="center" prop="classesId" />
-      <el-table-column label="上班日期" align="center" prop="startDay" />
-      <el-table-column label="上班时间" align="center" prop="startTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.startTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="下班时间" align="center" prop="endTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.endTime) }}</span>
-        </template>
-      </el-table-column>
+      <el-table-column label="设备id" align="center" prop="equipmentId" />
+      <el-table-column label="属性名称" align="center" prop="name" />
+      <el-table-column label="属性值" align="center" prop="value" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -49,9 +39,9 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['base:group-team-scheduling:update']">修改</el-button>
+                     v-hasPermi="['base:equipment-attr:update']">修改</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['base:group-team-scheduling:delete']">删除</el-button>
+                     v-hasPermi="['base:equipment-attr:delete']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -62,20 +52,14 @@
     <!-- 对话框(添加 / 修改) -->
     <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="班组ID" prop="teamId">
-          <el-input v-model="form.teamId" placeholder="请输入班组ID" />
+        <el-form-item label="设备id" prop="equipmentId">
+          <el-input v-model="form.equipmentId" placeholder="请输入设备id" />
         </el-form-item>
-        <el-form-item label="班次id" prop="classesId">
-          <el-input v-model="form.classesId" placeholder="请输入班次id" />
+        <el-form-item label="属性名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入属性名称" />
         </el-form-item>
-        <el-form-item label="上班日期" prop="startDay">
-          <el-input v-model="form.startDay" placeholder="请输入上班日期" />
-        </el-form-item>
-        <el-form-item label="上班时间" prop="startTime">
-          <el-date-picker clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择上班时间" />
-        </el-form-item>
-        <el-form-item label="下班时间" prop="endTime">
-          <el-date-picker clearable v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择下班时间" />
+        <el-form-item label="属性值" prop="value">
+          <el-input v-model="form.value" placeholder="请输入属性值" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -87,10 +71,10 @@
 </template>
 
 <script>
-import { createGroupTeamScheduling, updateGroupTeamScheduling, deleteGroupTeamScheduling, getGroupTeamScheduling, getGroupTeamSchedulingPage, exportGroupTeamSchedulingExcel } from "@/api/base/groupTeamScheduling";
+import { createEquipmentAttr, updateEquipmentAttr, deleteEquipmentAttr, getEquipmentAttr, getEquipmentAttrPage, exportEquipmentAttrExcel } from "@/api/base/equipmentAttr";
 
 export default {
-  name: "GroupTeamScheduling",
+  name: "EquipmentAttr",
   components: {
   },
   data() {
@@ -103,7 +87,7 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
-      // 排班信息列表
+      // 设备属性列表
       list: [],
       // 弹出层标题
       title: "",
@@ -113,14 +97,13 @@ export default {
       queryParams: {
         pageNo: 1,
         pageSize: 10,
-        startDay: [],
+        equipmentId: null,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
-        teamId: [{ required: true, message: "班组ID不能为空", trigger: "blur" }],
-        classesId: [{ required: true, message: "班次id不能为空", trigger: "blur" }],
+        equipmentId: [{ required: true, message: "设备id不能为空", trigger: "blur" }],
       }
     };
   },
@@ -132,7 +115,7 @@ export default {
     getList() {
       this.loading = true;
       // 执行查询
-      getGroupTeamSchedulingPage(this.queryParams).then(response => {
+      getEquipmentAttrPage(this.queryParams).then(response => {
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;
@@ -147,11 +130,9 @@ export default {
     reset() {
       this.form = {
         id: undefined,
-        teamId: undefined,
-        classesId: undefined,
-        startDay: undefined,
-        startTime: undefined,
-        endTime: undefined,
+        equipmentId: undefined,
+        name: undefined,
+        value: undefined,
       };
       this.resetForm("form");
     },
@@ -169,16 +150,16 @@ export default {
     handleAdd() {
       this.reset();
       this.open = true;
-      this.title = "添加排班信息";
+      this.title = "添加设备属性";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const id = row.id;
-      getGroupTeamScheduling(id).then(response => {
+      getEquipmentAttr(id).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "修改排班信息";
+        this.title = "修改设备属性";
       });
     },
     /** 提交按钮 */
@@ -189,7 +170,7 @@ export default {
         }
         // 修改的提交
         if (this.form.id != null) {
-          updateGroupTeamScheduling(this.form).then(response => {
+          updateEquipmentAttr(this.form).then(response => {
             this.$modal.msgSuccess("修改成功");
             this.open = false;
             this.getList();
@@ -197,7 +178,7 @@ export default {
           return;
         }
         // 添加的提交
-        createGroupTeamScheduling(this.form).then(response => {
+        createEquipmentAttr(this.form).then(response => {
           this.$modal.msgSuccess("新增成功");
           this.open = false;
           this.getList();
@@ -207,8 +188,8 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const id = row.id;
-      this.$modal.confirm('是否确认删除排班信息编号为"' + id + '"的数据项?').then(function() {
-          return deleteGroupTeamScheduling(id);
+      this.$modal.confirm('是否确认删除设备属性编号为"' + id + '"的数据项?').then(function() {
+          return deleteEquipmentAttr(id);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
@@ -220,11 +201,11 @@ export default {
       let params = {...this.queryParams};
       params.pageNo = undefined;
       params.pageSize = undefined;
-      this.$modal.confirm('是否确认导出所有排班信息数据项?').then(() => {
+      this.$modal.confirm('是否确认导出所有设备属性数据项?').then(() => {
           this.exportLoading = true;
-          return exportGroupTeamSchedulingExcel(params);
+          return exportEquipmentAttrExcel(params);
         }).then(response => {
-          this.$download.excel(response, '排班信息.xls');
+          this.$download.excel(response, '设备属性.xls');
           this.exportLoading = false;
         }).catch(() => {});
     }

src/views/base/equipmentBindGroup/index.vue

@@ -0,0 +1,330 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				: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"
+			width="700px"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import {
+	createEquipmentBindGroup,
+	updateEquipmentBindGroup,
+	deleteEquipmentBindGroup,
+	getEquipmentBindGroup,
+	getEquipmentBindGroupPage,
+	exportEquipmentBindGroupExcel,
+} from '@/api/base/equipmentBindGroup';
+
+import { getEquipmentGroupPage } from '@/api/base/equipmentGroup';
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+
+export default {
+	name: 'EquipmentBindGroup',
+	components: {},
+	mixins: [basicPageMixin],
+	data() {
+		return {
+			searchBarKeys: ['groupId', 'equipmentName'],
+			tableBtn: [
+				this.$auth.hasPermi('base:equipment-bind-group:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment-bind-group:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'equipmentName', label: '设备', align: 'center' },
+				{ prop: 'groupName', label: '分组', align: 'center' },
+				{
+					_action: 'equipment-bind-group-show-alert',
+					label: '分组报警',
+					align: 'center',
+					subcomponent: {
+						props: ['injectData'],
+						render: function (h) {
+							const _this = this;
+							return h(
+								'el-button',
+								{
+									props: { type: 'text', size: 'mini' },
+									on: {
+										click: function () {
+											console.log('inejctdata', _this.injectData);
+											_this.$emit('emitData', {
+												action: _this.injectData._action,
+												value: _this.injectData,
+											});
+										},
+									},
+								},
+								'查看报警'
+							);
+						},
+					},
+				},
+			],
+			searchBarFormConfig: [
+				{
+					type: 'select',
+					label: '分组',
+					placeholder: '请选择分组',
+					param: 'groupId',
+					filterable: true,
+					selectOptions: [],
+				},
+				{
+					type: 'input',
+					label: '设备',
+					placeholder: '请输入设备',
+					param: 'equipmentName',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:equipment-bind-group:create')
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+			rows: [
+				[
+					{
+						select: true,
+						label: '设备',
+						url: '/base/equipment/page?pageNo=1&pageSize=100',
+						prop: 'equipmentId',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[
+					{
+						select: true,
+						label: '报警分组',
+						url: '/base/equipment-group/listAll', // 根据产线获取
+						// depends: '__product_line', // 依赖产线获取数据
+						// depends: 'productionLineId',
+						prop: 'groupId',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+			],
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				equipmentName: null,
+				groupId: null,
+			},
+			// 表单参数
+			form: {},
+			// 表单校验
+			rules: {},
+		};
+	},
+	created() {
+		this.getList();
+		getEquipmentGroupPage({ pageNo: 1, pageSize: 100 }).then((res) => {
+			this.searchBarFormConfig[0].selectOptions = res.data.list;
+		});
+	},
+	methods: {
+		/** 覆盖 handleEmitFun 的默认实现 */
+		handleEmitFun({ action, value }) {
+			const {
+				groupId: equipmentGroupId,
+				groupName: equipmentGroupName,
+				groupCode: equipmentGroupCode,
+			} = value;
+			switch (action) {
+				case 'equipment-bind-group-show-alert':
+					// this.$router.push({ path: '/equipment/base/equipment-group-alarm' });
+					this.$router.push({
+						name: 'EquipmentGroupAlarm',
+						params: {
+							equipmentGroupId,
+							equipmentGroupCode,
+							equipmentGroupName,
+						},
+					});
+					break;
+			}
+		},
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			_// 执行查询
+			getEquipmentBindGroupPage(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 = {
+				id: undefined,
+				equipmentId: undefined,
+				groupId: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加设备与分组绑定';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipmentBindGroup(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) {
+					updateEquipmentBindGroup(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipmentBindGroup(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除设备与分组绑定编号为"' + id + '"的数据项?')
+				.then(function () {
+					return deleteEquipmentBindGroup(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有设备与分组绑定数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentBindGroupExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '设备与分组绑定.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>

src/views/base/equipmentBindSection/index.vue

@@ -0,0 +1,357 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				: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"
+			width="700px"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import {
+	createEquipmentBindSection,
+	updateEquipmentBindSection,
+	deleteEquipmentBindSection,
+	getEquipmentBindSection,
+	getEquipmentBindSectionPage,
+	exportEquipmentBindSectionExcel,
+} from '@/api/base/equipmentBindSection';
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+
+export default {
+	name: 'EquipmentBindSection',
+	components: {},
+	mixins: [basicPageMixin],
+	data() {
+		return {
+			searchBarKeys: ['workshopSectionId', 'equipmentName'],
+			tableBtn: [
+				this.$auth.hasPermi('base:equipment-bind-section:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment-bind-section:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'productionLine', label: '产线名称', align: 'center' },
+				{ prop: 'workshopSection', label: '工段名称', align: 'center' },
+				{ prop: 'equipment', label: '设备名称', align: 'center' },
+				{ prop: 'sort', label: '工段中排序', align: 'center' },
+				{
+					prop: 'lineDataType',
+					label: '产线数据类型',
+					align: 'center',
+					filter: (val) =>
+						val != null ? ['无类型', '进口计数', '出口计数'][val] : '-',
+				},
+				{
+					prop: 'sectionDataType',
+					label: '工段数据类型',
+					align: 'center',
+					filter: (val) =>
+						val != null ? ['无类型', '进口计数', '出口计数'][val] : '-',
+				},
+				// {
+				// 	action: 'show-alert',
+				// 	label: '报警',
+				// 	align: 'center',
+				// 	subcomponent: {
+				// 		props: ['injectData'],
+				// 		render: function (h) {
+				// 			const _this = this;
+				// 			return h(
+				// 				'el-button',
+				// 				{
+				// 					props: { type: 'text', size: 'mini' },
+				// 					on: {
+				// 						click: function () {
+				// 							console.log('inejctdata', _this.injectData);
+				// 							_this.$emit('emitData', {
+				// 								action: _this.injectData.action,
+				// 								value: _this.injectData.id,
+				// 							});
+				// 						},
+				// 					},
+				// 				},
+				// 				'查看报警'
+				// 			);
+				// 		},
+				// 	},
+				// },
+			],
+			searchBarFormConfig: [
+				{
+					type: 'select',
+					label: '工段',
+					placeholder: '请选择工段',
+					param: 'workshopSectionId',
+				},
+				{
+					type: 'input',
+					label: '设备',
+					placeholder: '请输入设备',
+					param: 'equipmentName',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:equipment-bind-section:create')
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+			rows: [
+				[
+					{
+						select: true,
+						label: '产线',
+						url: '/base/production-line/listAll',
+						// prop: '__product_line', // __开头代表不传递给服务器
+						prop: 'productionLineId', // 编辑接口返回的产线id，所以不能使用上面那种形式
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+					{
+						select: true,
+						label: '工段',
+						url: '/base/workshop-section/listByParentId', // 根据产线获取
+            // depends: '__product_line', // 依赖产线获取数据
+            depends: 'productionLineId',
+						prop: 'workshopSectionId',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[
+					{
+						select: true,
+						label: '设备',
+						url: '/base/equipment/page?pageNo=1&pageSize=100',
+						prop: 'equipmentId',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+					{
+						input: true,
+						label: '工段排序',
+						prop: 'sort',
+						// url: '/base/equipment-group/getCode',
+					},
+				],
+				[
+					{
+						select: true,
+						label: '产线数据类型',
+						options: [
+							{ label: '无类型', value: 0 },
+							{ label: '进口统计', value: 1 },
+							{ label: '出口统计', value: 2 },
+						],
+						prop: 'lineDataType',
+					},
+					{
+						select: true,
+						label: '工段数据类型',
+						options: [
+							{ label: '无类型', value: 0 },
+							{ label: '进口统计', value: 1 },
+							{ label: '出口统计', value: 2 },
+						],
+						prop: 'sectionDataType',
+					},
+				],
+			],
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				workshopSectionId: null,
+				equipmentId: null,
+			},
+			// 表单参数
+			form: {},
+		};
+	},
+	created() {
+		this.getList();
+	},
+	methods: {
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			getEquipmentBindSectionPage(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 = {
+				id: undefined,
+				workshopSectionId: undefined,
+				equipmentId: undefined,
+				sort: undefined,
+				lineDataType: undefined,
+				sectionDataType: undefined,
+				remark: undefined,
+				version: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加工段设备绑定';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipmentBindSection(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) {
+					updateEquipmentBindSection(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipmentBindSection(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除工段设备绑定编号为"' + id + '"的数据项?')
+				.then(function () {
+					return deleteEquipmentBindSection(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有工段设备绑定数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentBindSectionExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '工段设备绑定.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>

src/views/base/equipmentFile/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="设备ID" prop="equipmentId">
+        <el-input v-model="queryParams.equipmentId" placeholder="请输入设备ID" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['base:equipment-file:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['base:equipment-file:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="id" align="center" prop="id" />
+      <el-table-column label="设备ID" align="center" prop="equipmentId" />
+      <el-table-column label="文件类型 1.图片 2.设备资料" align="center" prop="fileType">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.EQU_FILE_TYPE" :value="scope.row.fileType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="原始文件名" align="center" prop="fileName" />
+      <el-table-column label="文件url" align="center" prop="fileUrl" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['base:equipment-file:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['base:equipment-file:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="设备ID" prop="equipmentId">
+          <el-input v-model="form.equipmentId" placeholder="请输入设备ID" />
+        </el-form-item>
+        <el-form-item label="文件类型 1.图片 2.设备资料" prop="fileType">
+          <el-select v-model="form.fileType" placeholder="请选择文件类型 1.图片 2.设备资料">
+            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.EQU_FILE_TYPE)"
+                       :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="原始文件名" prop="fileName">
+          <el-input v-model="form.fileName" placeholder="请输入原始文件名" />
+        </el-form-item>
+        <el-form-item label="文件url" prop="fileUrl">
+          <el-input v-model="form.fileUrl" placeholder="请输入文件url" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createEquipmentFile, updateEquipmentFile, deleteEquipmentFile, getEquipmentFile, getEquipmentFilePage, exportEquipmentFileExcel } from "@/api/base/equipmentFile";
+
+export default {
+  name: "EquipmentFile",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 设备文件对应列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        equipmentId: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getEquipmentFilePage(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 = {
+        id: undefined,
+        equipmentId: undefined,
+        fileType: undefined,
+        fileName: undefined,
+        fileUrl: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加设备文件对应";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getEquipmentFile(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) {
+          updateEquipmentFile(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createEquipmentFile(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除设备文件对应编号为"' + id + '"的数据项?').then(function() {
+          return deleteEquipmentFile(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有设备文件对应数据项?').then(() => {
+          this.exportLoading = true;
+          return exportEquipmentFileExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '设备文件对应.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/base/equipmentGroup/index.vue

@@ -0,0 +1,344 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				: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"
+			width="500px"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import {
+	createEquipmentGroup,
+	updateEquipmentGroup,
+	deleteEquipmentGroup,
+	getEquipmentGroup,
+	getEquipmentGroupPage,
+	exportEquipmentGroupExcel,
+} from '@/api/base/equipmentGroup';
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import { getAccessToken } from '@/utils/auth';
+
+export default {
+	name: 'EquipmentGroup',
+	mixins: [basicPageMixin],
+	components: {},
+	data() {
+		return {
+			searchBarKeys: ['name', 'code'],
+			tableBtn: [
+				this.$auth.hasPermi('base:equipment-group:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment-group:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'name', label: '设备分组名称', align: 'center' },
+				{ prop: 'code', label: '检测分组编码', align: 'center' },
+				{ prop: 'remark', label: '备注', align: 'center' },
+				{
+					_action: 'equipment-group-show-alert',
+					label: '报警',
+					align: 'center',
+					subcomponent: {
+						props: ['injectData'],
+						render: function (h) {
+							const _this = this;
+							return h(
+								'el-button',
+								{
+									props: { type: 'text', size: 'mini' },
+									on: {
+										click: function () {
+											console.log('inejctdata', _this.injectData);
+											_this.$emit('emitData', {
+												action: _this.injectData._action,
+												// value: _this.injectData.id,
+												value: _this.injectData,
+											});
+										},
+									},
+								},
+								'查看报警'
+							);
+						},
+					},
+				},
+			],
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '分组名称',
+					placeholder: '请输入设备分组名称',
+					param: 'name',
+				},
+				{
+					type: 'input',
+					label: '分组编码',
+					placeholder: '请输入设备分组编码',
+					param: 'codes',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:equipment-group:create')
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+			rows: [
+				[
+					{
+						input: true,
+						label: '分组名称',
+						prop: 'name',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// bind: {
+						// 	disabled: true, // some condition, like detail mode...
+						// }
+					},
+				],
+				[
+					{
+						input: true,
+						label: '分组编码',
+						prop: 'code',
+						url: '/base/equipment-group/getCode',
+					},
+				],
+				[
+					{
+						input: true,
+						label: '备注',
+						prop: 'remark',
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						bind: {
+							placeholder: '请输入备注',
+						},
+					},
+				],
+			],
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				code: null,
+				name: null,
+			},
+			// 表单参数
+			form: {},
+		};
+	},
+	created() {
+		this.getList();
+	},
+	methods: {
+		/** 覆盖 handleEmitFun 的默认实现 */
+		handleEmitFun({ action, value }) {
+			const {
+				id: equipmentGroupId,
+				name: equipmentGroupName,
+				code: equipmentGroupCode,
+			} = value;
+			switch (action) {
+				case 'equipment-group-show-alert':
+					// this.$router.push({ path: '/equipment/base/equipment-group-alarm' });
+					this.$router.push({
+						name: 'EquipmentGroupAlarm',
+						params: {
+							equipmentGroupId,
+							equipmentGroupCode,
+							equipmentGroupName,
+						},
+					});
+					break;
+			}
+		},
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			getEquipmentGroupPage(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 = {
+				id: undefined,
+				code: undefined,
+				name: undefined,
+				remark: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加设备分组（用于同类型不同厂家的设备区分）';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipmentGroup(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) {
+					updateEquipmentGroup(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipmentGroup(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm(
+					'是否确认删除设备分组（用于同类型不同厂家的设备区分）编号为"' +
+						id +
+						'"的数据项?'
+				)
+				.then(function () {
+					return deleteEquipmentGroup(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm(
+					'是否确认导出所有设备分组（用于同类型不同厂家的设备区分）数据项?'
+				)
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentGroupExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(
+						response,
+						'设备分组（用于同类型不同厂家的设备区分）.xls'
+					);
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>

src/views/base/equipmentGroupAlarm/index.vue

@@ -0,0 +1,354 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				: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"
+			width="736px"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import {
+	createEquipmentGroupAlarm,
+	updateEquipmentGroupAlarm,
+	deleteEquipmentGroupAlarm,
+	getEquipmentGroupAlarm,
+	getEquipmentGroupAlarmPage,
+	exportEquipmentGroupAlarmExcel,
+} from '@/api/base/equipmentGroupAlarm';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import moment from 'moment';
+import { publicFormatter } from '@/utils/dict';
+
+export default {
+	name: 'EquipmentGroupAlarm',
+	components: {},
+	mixins: [basicPageMixin],
+	data() {
+		return {
+			searchBarKeys: [''],
+			tableBtn: [
+				this.$auth.hasPermi('base:equipment-group-alarm:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment-group-alarm:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'code', label: '报警编码', align: 'center' },
+				{ prop: 'type', label: '报警类型', align: 'center' },
+				{
+					prop: 'grade',
+					label: '报警级别',
+					align: 'center',
+					filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
+				},
+				{ prop: 'alarmCode', label: '设备报警编码', align: 'center' },
+				{ prop: 'plcParamName', label: '参数列名', align: 'center' },
+				{ prop: 'alarmContent', label: '报警内容', align: 'center' },
+			],
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '设备分组编码',
+					placeholder: '/',
+					param: 'equipmentGroupCode',
+					defaultSelect: null,
+					disabled: true,
+				},
+				{
+					type: 'input',
+					label: '设备分组名称',
+					placeholder: '/',
+					param: 'equipmentGroupName',
+					defaultSelect: null,
+					disabled: true,
+				},
+				{
+					type: this.$auth.hasPermi('base:equipment-group-alarm:create')
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+			],
+			rows: [
+				[
+					{
+						input: true,
+						label: '报警编码', // 自动生成
+						prop: 'code',
+						url: '/base/equipment-group-alarm/getCode',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+					{
+						select: true,
+						label: '报警类型', // 固定选项
+						prop: 'type',
+						options: [
+							{ label: '布尔型', value: 2 },
+							{ label: '字符型', value: 1 },
+						],
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[
+					{
+						select: true,
+						label: '报警级别', // 字典
+						prop: 'grade',
+						options: this.getDictDatas(this.DICT_TYPE.EQU_ALARM_LEVEL),
+					},
+					{
+						input: true,
+						label: '设备报警编码', // 对应到设备实际的报警编码
+						prop: 'alarmCode',
+					},
+				],
+				[
+					{
+						input: true,
+						label: '参数列名', // 在实时数据库的列名
+						prop: 'plcParamName',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+					{
+						input: true,
+						label: '报警内容',
+						prop: 'alarmContent',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+			],
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				equipmentGroupId: null,
+			},
+			// 表单参数
+			form: {
+				id: undefined,
+				equipmentGroupId: undefined,
+				code: undefined,
+				type: undefined,
+				grade: undefined,
+				alarmCode: undefined,
+				alarmContent: undefined,
+				plcParamName: undefined,
+			},
+			// // 表单校验
+			// rules: {
+			//   equipmentGroupId: [{ required: true, message: "设备分组ID，关联base_equipment_group不能为空", trigger: "blur" }],
+			//   type: [{ required: true, message: "报警类型:1.字符型，2.布尔型不能为空", trigger: "change" }],
+			//   alarmContent: [{ required: true, message: "报警内容 该条报警具体的解释不能为空", trigger: "blur" }],
+			//   plcParamName: [{ required: true, message: "关联编码，对应到plc_param_name的编码，用于链接数采不能为空", trigger: "blur" }],
+			// }
+		};
+	},
+	// watch: {
+	//   $route(value) {
+	//     console.log('new route info', value)
+	//   }
+	// },
+	// created() {
+	// 	this.getList();
+	// },
+	activated() {
+		// 设置顶部搜索栏信息
+		const { equipmentGroupName, equipmentGroupCode, equipmentGroupId } =
+			this.$route.params;
+		this.setSearchBarFormValue('equipmentGroupName', equipmentGroupName);
+		this.setSearchBarFormValue('equipmentGroupCode', equipmentGroupCode);
+		this.queryParams.equipmentGroupId = equipmentGroupId;
+		// if (!equipmentGroupId) this.getList(); // 拦截
+		this.getList();
+	},
+	deactivated() {
+		this.setSearchBarFormValue('equipmentGroupName', null);
+		this.setSearchBarFormValue('equipmentGroupCode', null);
+		this.queryParams.equipmentGroupId = null;
+	},
+	methods: {
+		/** 设置 searchBarForm 的默认值 - 用得比较少 */
+		setSearchBarFormValue(param, value) {
+			this.searchBarFormConfig.forEach((config) => {
+				if (config.param == param) {
+					config.defaultSelect = value;
+				}
+			});
+		},
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			getEquipmentGroupAlarmPage(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 = {
+				id: undefined,
+				equipmentGroupId: undefined,
+				code: undefined,
+				type: undefined,
+				grade: undefined,
+				alarmCode: undefined,
+				alarmContent: undefined,
+				plcParamName: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			if (this.queryParams.equipmentGroupId == null)
+				return this.$message.error('没有检测到设备分组信息');
+			this.reset();
+			this.open = true;
+			this.title = '添加设备分组报警明细';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipmentGroupAlarm(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) {
+					updateEquipmentGroupAlarm({
+						...this.form,
+						equipmentGroupId: this.queryParams.equipmentGroupId,
+					}).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipmentGroupAlarm({
+					...this.form,
+					equipmentGroupId: this.queryParams.equipmentGroupId,
+				}).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除设备分组报警明细编号为"' + id + '"的数据项?')
+				.then(function () {
+					return deleteEquipmentGroupAlarm(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有设备分组报警明细数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentGroupAlarmExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '设备分组报警明细.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>

src/views/base/equipmentPlc/index.vue

@@ -0,0 +1,373 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				: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"
+			width="700px"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import {
+	createEquipmentPlc,
+	updateEquipmentPlc,
+	deleteEquipmentPlc,
+	getEquipmentPlc,
+	getEquipmentPlcPage,
+	exportEquipmentPlcExcel,
+} from '@/api/base/equipmentPlc';
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+
+const switchBtn = {
+	name: 'SwitchBtn',
+	props: ['injectData'],
+	data() {
+		return {
+			active: +this.injectData[this.injectData.prop] == 1 ? true : false,
+		};
+	},
+	methods: {},
+	render: function (h) {
+		return h(
+			'el-switch',
+			{
+				props: {
+					value: this.active,
+				},
+				on: {
+					change: (newVal) => {
+						this.active = !this.active;
+						console.log('changed emit', newVal);
+						this.$emit('emitData', {
+							action: 'update-collect',
+							payload: {
+								...this.injectData,
+								collection: newVal ? 1 : 0,
+							},
+						});
+					},
+				},
+			},
+			null
+		);
+	},
+};
+
+export default {
+	name: 'EquipmentPlc',
+	mixins: [basicPageMixin],
+	components: {},
+	data() {
+		return {
+			searchBarKeys: ['name', 'plcTableName'],
+			tableBtn: [
+				this.$auth.hasPermi('base:equipment-plc:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment-plc:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				// {
+				// 	prop: 'createTime',
+				// 	label: '添加时间',
+				// 	fixed: true,
+				// 	width: 180,
+				// 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				// },
+				{ prop: 'code', label: '编码', align: 'center' },
+				{ prop: 'plcTableName', label: '关联表名', align: 'center' },
+				{ prop: 'name', label: '标识名称', align: 'center' },
+				{ prop: 'enName', label: '英文名称', align: 'center' },
+				{
+					prop: 'collection',
+					label: '是否采集',
+					align: 'center',
+					subcomponent: switchBtn,
+				},
+				{ prop: 'description', label: '描述', align: 'center' },
+			],
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '表名',
+					placeholder: '请输入表名',
+					param: 'plcTableName',
+				},
+				{
+					type: 'input',
+					label: '标识',
+					placeholder: '请输入标识',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					// type: this.$auth.hasPermi('base:equipment-plc:create')
+					// 	? 'button'
+					// 	: '',
+					type: 'button',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:equipment-plc:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+			rows: [
+				[
+					{
+						input: true,
+						label: '关联表名',
+						prop: 'plcTableName',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// bind: {
+						// 	disabled: true, // some condition, like detail mode...
+						// }
+					},
+					{
+						input: true,
+						label: '编码',
+						prop: 'code',
+						url: '/base/equipment-group/getCode',
+					},
+				],
+				[
+					{
+						input: true,
+						label: '标识',
+						prop: 'name',
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// bind: {
+						// 	disabled: true, // some condition, like detail mode...
+						// }
+					},
+					{
+						input: true,
+						label: '英文名',
+						prop: 'enName',
+					},
+				],
+				[
+					{
+						switch: true,
+						label: '是否采集', // 是否采集 0 代表不采集, 1 代表采集
+						prop: 'collection',
+						bind: {
+							'active-value': 1,
+							'inactive-value': 0,
+						},
+					},
+				],
+				[
+					{
+						textarea: true,
+						label: '描述',
+						prop: 'description',
+						bind: {
+							placeholder: '请输入备注',
+						},
+					},
+				],
+			],
+			// 是否显示弹出
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				plcTableName: null,
+				name: null,
+			},
+			// 表单参数
+			form: {},
+		};
+	},
+	created() {
+		this.getList();
+	},
+	methods: {
+		/** 覆盖 handleEmitFun 的默认实现 */
+		handleEmitFun({ action, payload }) {
+			switch (action) {
+				case 'update-collect':
+          this.reset();
+					const tempForm = {};
+					Object.keys(this.form).forEach((key) => {
+						tempForm[key] = payload[key];
+					});
+					updateEquipmentPlc(tempForm).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					break;
+			}
+		},
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			getEquipmentPlcPage(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 = {
+				id: undefined,
+				plcTableName: undefined,
+				code: undefined,
+				name: undefined,
+				enName: undefined,
+				description: undefined,
+				collection: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加实时数据采集配置';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipmentPlc(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) {
+					updateEquipmentPlc(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipmentPlc(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除实时数据采集配置编号为"' + id + '"的数据项?')
+				.then(function () {
+					return deleteEquipmentPlc(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有实时数据采集配置数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentPlcExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '实时数据采集配置.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>

src/views/base/equipmentPlcConnect/http.js

@@ -0,0 +1,78 @@
+import Mock from 'mockjs';
+
+const baseURL = 'http://192.168.1.49:48080/admin-api';
+
+Mock.setup({
+	timeout: 200,
+});
+
+// @database
+const list = Mock.mock({
+	'data|1-10': [
+		{
+			'id|+1': 1,
+			productionLine: (options) => {
+				// console.log('otpsion', options.context.currentContext);
+				return `EQ${options.context.currentContext.id}`;
+			},
+			workshopSection: ({ context: { currentContext } }) =>
+				`EQ${currentContext.id}_WS${Mock.Random.integer(1, 10)}`,
+			equipmentName: ({ context: { currentContext } }) =>
+				`设备${currentContext.id}`,
+			equipmentCode: ({ context: { currentContext } }) =>
+				`${currentContext.equipmentName}_Code`,
+			plcCode: ({ context: { currentContext } }) =>
+				`PLC_TABLE_CODE_${currentContext.id}`,
+			plcTableName: ({ context: { currentContext } }) =>
+				`PLC_TABLE_${currentContext.id}`,
+			plcName: ({ context: { currentContext } }) => `PLC_${currentContext.id}`,
+			'bindingParameters|1-10': 1,
+		},
+	],
+});
+
+// @page
+Mock.mock(
+	RegExp(baseURL + '/base/equipment-plc-connect/page' + '.*'),
+	'get',
+	(options) => {
+		console.log('[Mock url]', options.url, list);
+		return {
+			code: 0,
+			data: {
+				list: list.data,
+				total: list.data.length,
+			},
+		};
+	}
+);
+
+// @create
+Mock.mock(baseURL + '/base/equipment-plc-connect/create', 'post', (options) => {
+	console.log('options', options);
+	const { url, type, body } = options;
+	const newItem = JSON.parse(body);
+	list.data.push(newItem);
+	return {
+		code: 0,
+		data: null,
+		msg: 'success',
+	};
+});
+
+// @update
+Mock.mock(
+	baseURL + '/admin-api/base/equipment-plc-connect/update',
+	'put',
+	(options) => {
+		const { url, type, body } = options;
+		const { id } = JSON.parse(body);
+		const newItem = list.data.find((item) => item.id == id);
+		newItem = { ...newItem, ...JSON.parse(body) };
+		return {
+			code: 0,
+			msg: 'success',
+			data: null,
+		};
+	}
+);

src/views/base/equipmentPlcConnect/index.vue

@@ -0,0 +1,349 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				: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"
+			width="700px"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import {
+	createEquipmentPlcConnect,
+	updateEquipmentPlcConnect,
+	deleteEquipmentPlcConnect,
+	getEquipmentPlcConnect,
+	getEquipmentPlcConnectPage,
+	exportEquipmentPlcConnectExcel,
+} from '@/api/base/equipmentPlcConnect';
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+// import './http';
+
+export default {
+	name: 'EquipmentPlcConnect',
+	mixins: [basicPageMixin],
+	components: {},
+	data() {
+		return {
+			searchBarKeys: ['name', 'plcTableName'],
+			// tableBtn: [
+			// 	this.$auth.hasPermi('base:equipment-plc:update')
+			// 		? {
+			// 				type: 'edit',
+			// 				btnName: '修改',
+			// 		  }
+			// 		: undefined,
+			// 	this.$auth.hasPermi('base:equipment-plc:delete')
+			// 		? {
+			// 				type: 'delete',
+			// 				btnName: '删除',
+			// 		  }
+			// 		: undefined,
+			// ].filter((v) => v),
+			tableBtn: [
+				{
+					type: 'edit',
+					btnName: '修改',
+				},
+				// {
+				// 	type: 'params-bind',
+				// 	btnName: '参数绑定',
+				// },
+				{
+					type: 'delete',
+					btnName: '删除',
+				},
+			],
+			tableProps: [
+				// {
+				// 	prop: 'createTime',
+				// 	label: '添加时间',
+				// 	fixed: true,
+				// 	width: 180,
+				// 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				// },
+				{ prop: 'productionLine', label: '产线', align: 'center' },
+				{ prop: 'workshopSection', label: '工段', align: 'center' },
+				{ prop: 'equipmentName', label: '设备名', align: 'center' },
+				{ prop: 'equipmentCode', label: '设备编码', align: 'center' },
+				{ prop: 'plcCode', label: '关联表编码', align: 'center' },
+				{ prop: 'plcTableName', label: '关联表名', align: 'center' },
+				{ prop: 'plcName', label: '标识名称', align: 'center' },
+				{ prop: 'bindingParameters', label: '绑定参数数量', align: 'center' },
+				{
+					_action: 'params-bind',
+					label: '查看绑定',
+					align: 'center',
+					subcomponent: {
+						props: ['injectData'],
+						render: function (h) {
+							const _this = this;
+							return h(
+								'el-button',
+								{
+									props: { type: 'text' },
+									on: {
+										click: function () {
+											console.log('inejctdata', _this.injectData);
+											_this.$emit('emitData', {
+												action: _this.injectData._action,
+												payload: _this.injectData,
+											});
+										},
+									},
+								},
+								'查看绑定'
+							);
+						},
+					},
+				},
+			],
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '设备名',
+					placeholder: '请输入设备名',
+					param: 'equipmentId',
+				},
+				{
+					type: 'input',
+					label: '编码',
+					placeholder: '请输入编码',
+					param: 'plcId',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					// type: this.$auth.hasPermi('base:equipment-plc:create')
+					// 	? 'button'
+					// 	: '',
+					type: 'button',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:equipment-plc:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+			rows: [
+				[
+					{
+						select: true,
+						label: '关联表名',
+						prop: 'plcId',
+						url: '/base/equipment-plc/listAll',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[
+					{
+						select: true,
+						label: '设备',
+						prop: 'equipmentId',
+						url: '/base/equipment/page?pageNo=1&pageSize=99',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+			],
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				plcId: null,
+				equipmentId: null,
+			},
+			// 表单参数
+			form: {},
+		};
+	},
+	created() {
+		this.getList();
+	},
+	methods: {
+		/** 覆盖 handleEmitFun 的默认实现 */
+		handleEmitFun({ action, payload }) {
+			switch (action) {
+				case 'params-bind':
+					this.reset();
+					const {
+						id,
+						equipmentName,
+						equipmentId,
+						plcId,
+						plcName,
+						plcTableName,
+					} = payload;
+					// console.log('Cha看绑定参数弹窗', id, equipmentName, plcTableName);
+					this.$router.push({
+						name: 'EquipmentPlcParam',
+						params: {
+							id,
+							equipmentName,
+							plcTableName,
+						},
+					});
+					break;
+			}
+		},
+
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			getEquipmentPlcConnectPage(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 = {
+				id: undefined,
+				plcId: undefined,
+				equipmentId: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加设备与实时采集关系表（一对多）';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipmentPlcConnect(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) {
+					updateEquipmentPlcConnect(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipmentPlcConnect(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm(
+					'是否确认删除设备与实时采集关系表（一对多）编号为"' +
+						id +
+						'"的数据项?'
+				)
+				.then(function () {
+					return deleteEquipmentPlcConnect(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有设备与实时采集关系表（一对多）数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentPlcConnectExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '设备与实时采集关系表（一对多）.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>

src/views/base/equipmentPlcParam/index.vue

@@ -0,0 +1,450 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				: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"
+			width="700px"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import {
+	createEquipmentPlcParam,
+	updateEquipmentPlcParam,
+	deleteEquipmentPlcParam,
+	getEquipmentPlcParam,
+	getEquipmentPlcParamPage,
+	exportEquipmentPlcParamExcel,
+} from '@/api/base/equipmentPlcParam';
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import { publicFormatter } from '@/utils/dict';
+
+export default {
+	name: 'EquipmentPlcParam',
+	mixins: [basicPageMixin],
+	data() {
+		return {
+			tableProps: [
+				// {
+				// 	prop: 'createTime',
+				// 	label: '添加时间',
+				// 	fixed: true,
+				// 	width: 180,
+				// 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				// },
+				{ prop: 'plcParamName', label: '参数列名', align: 'center' },
+				{ prop: 'name', label: '参数名称', align: 'center' },
+				{
+					prop: 'unit',
+					label: '单位',
+					align: 'center',
+					filter: publicFormatter('unit_dict'),
+				},
+				{
+					prop: 'collection',
+					label: '是否采集',
+					align: 'center',
+					filter: (val) => (val != null ? ['否', '是'][val] : '-'),
+				},
+				{ prop: 'minValue', label: '最小值', align: 'center' },
+				{ prop: 'maxValue', label: '最大值', align: 'center' },
+				{ prop: 'defaultValue', label: '标准值', align: 'center' },
+				{ prop: 'description', label: '描述', align: 'center' },
+				{ prop: 'remark', label: '备注', align: 'center' },
+				// {
+				// 	_action: 'params-bind',
+				// 	label: '查看绑定',
+				// 	align: 'center',
+				// 	subcomponent: {
+				// 		props: ['injectData'],
+				// 		render: function (h) {
+				// 			const _this = this;
+				// 			return h(
+				// 				'el-button',
+				// 				{
+				// 					props: { type: 'text' },
+				// 					on: {
+				// 						click: function () {
+				// 							console.log('inejctdata', _this.injectData);
+				// 							_this.$emit('emitData', {
+				// 								action: _this.injectData._action,
+				// 								payload: _this.injectData,
+				// 							});
+				// 						},
+				// 					},
+				// 				},
+				// 				'查看绑定'
+				// 			);
+				// 		},
+				// 	},
+				// },
+			],
+			rows: [
+				[
+					{
+						input: true,
+						label: '参数列名',
+						prop: 'plcParamName',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+					{
+						input: true,
+						label: '参数名称',
+						prop: 'name',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[
+					{
+						select: true,
+						label: '单位',
+						prop: 'unit',
+						options: this.getDictDatas(this.DICT_TYPE.UNIT_DICT),
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+					{
+						switch: true,
+						label: '是否采集',
+						prop: 'collection',
+						bind: {
+							'active-value': 1,
+							'inactive-value': 0,
+						},
+					},
+				],
+				[
+					{
+						input: true,
+						label: '最小值',
+						prop: 'minValue',
+						rules: [
+							{
+								type: 'number',
+								message: '请输入正确的数字',
+								trigger: 'blur',
+								transform: (val) => Number(val),
+							},
+						],
+					},
+					{
+						input: true,
+						label: '最大值',
+						prop: 'maxValue',
+						rules: [
+							{
+								type: 'number',
+								message: '请输入正确的数字',
+								trigger: 'blur',
+								transform: (val) => Number(val),
+							},
+						],
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[
+					{
+						input: true,
+						label: '标准值',
+						prop: 'defaultValue',
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+					{
+						input: true,
+						label: '描述',
+						prop: 'description',
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[
+					{
+						input: true,
+						label: '备注',
+						prop: 'remark',
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+			],
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				connectId: null,
+			},
+			// 表单参数
+			form: {},
+			connectId: null,
+			equipmentName: '',
+			plcTableName: '',
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '设备名',
+					disabled: true,
+					param: 'equipmentName',
+					defaultSelect: '',
+				},
+				{
+					type: 'input',
+					label: '关联表名',
+					disabled: true,
+					param: 'plcName',
+					defaultSelect: '',
+				},
+				{
+					type:
+						this.$auth.hasPermi('base:equipment-plc-param:create') &&
+						!this.isDetailPage
+							? 'button'
+							: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+			],
+		};
+	},
+	computed: {
+		isDetailPage() {
+			return this.$route.params.detail === true;
+		},
+		tableBtn() {
+			return [
+				this.$auth.hasPermi('base:equipment-plc-param:update') &&
+				!this.isDetailPage
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment-plc-param:delete') &&
+				!this.isDetailPage
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v);
+		},
+		// searchBarFormConfig() {
+		// 	console.log(
+		// 		'ers',
+		// 		JSON.stringify({ eid: this.equipmentName, plc: this.plcTableName })
+		// 	);
+		// 	return [
+		// 		{
+		// 			type: 'input',
+		// 			label: '设备名',
+		// 			disabled: true,
+		// 			param: 'equipmentName',
+		// 			defaultSelect: this.equipmentName,
+		// 		},
+		// 		{
+		// 			type: 'input',
+		// 			label: '关联表名',
+		// 			disabled: true,
+		// 			param: 'plcName',
+		// 			defaultSelect: this.plcTableName,
+		// 		},
+		// 		{
+		// 			type:
+		// 				this.$auth.hasPermi('base:equipment-plc-param:create') &&
+		// 				!this.isDetailPage
+		// 					? 'button'
+		// 					: '',
+		// 			btnName: '新增',
+		// 			name: 'add',
+		// 			plain: true,
+		// 			color: 'success',
+		// 		},
+		// 	];
+		// },
+	},
+	activated() {
+		console.log('activated,,,');
+		// 设置顶部搜索栏信息
+		const { equipmentName, id: connectId, plcTableName } = this.$route.params;
+		// this.equipmentName = equipmentName;
+		// this.plcTableName = plcTableName;
+		this.setSearchBarFormValue('equipmentName', equipmentName);
+		this.setSearchBarFormValue('plcName', plcTableName);
+		this.queryParams.connectId = connectId;
+		// if (!equipmentGroupId) this.getList(); // 拦截
+		this.getList();
+	},
+	deactivated() {
+		console.log('deactivated,,,');
+		this.setSearchBarFormValue('equipmentName', '');
+		this.setSearchBarFormValue('plcName', '');
+		// this.equipmentName = null;
+		// this.plcTableName = null;
+		this.queryParams.connectId = null;
+	},
+	methods: {
+		/** 设置 searchBarForm 的默认值 - 用得比较少 */
+		setSearchBarFormValue(param, value) {
+			this.searchBarFormConfig.forEach((config) => {
+				if (config.param == param) {
+					config.defaultSelect = value;
+				}
+			});
+		},
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			getEquipmentPlcParamPage(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 = {
+				id: undefined,
+				connectId: undefined,
+				plcParamName: undefined,
+				name: undefined,
+				unit: undefined,
+				minValue: undefined,
+				maxValue: undefined,
+				defaultValue: undefined,
+				collection: undefined,
+				description: undefined,
+				remark: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加设备数采详情';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipmentPlcParam(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) {
+					updateEquipmentPlcParam({
+						...this.form,
+						connectId: this.queryParams.connectId,
+					}).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipmentPlcParam({
+					...this.form,
+					connectId: this.queryParams.connectId,
+				}).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除设备数采详情编号为"' + id + '"的数据项?')
+				.then(function () {
+					return deleteEquipmentPlcParam(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有设备数采详情数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentPlcParamExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '设备数采详情.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>

src/views/base/equipmentQuantityLog/index.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="设备id" prop="equipmentId">
+        <el-input v-model="queryParams.equipmentId" placeholder="请输入设备id" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="设备名称" prop="equipmentName">
+        <el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="进入设备的数量" prop="inQuantity">
+        <el-input v-model="queryParams.inQuantity" placeholder="请输入进入设备的数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="离开设备的数量，若plc只记录一个生产数量，也写入该字段" prop="outQuantity">
+        <el-input v-model="queryParams.outQuantity" placeholder="请输入离开设备的数量，若plc只记录一个生产数量，也写入该字段" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="正常生产量" prop="okQuantity">
+        <el-input v-model="queryParams.okQuantity" placeholder="请输入正常生产量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="设备上报的报废数量" prop="nokQuantity">
+        <el-input v-model="queryParams.nokQuantity" placeholder="请输入设备上报的报废数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="生产数量的记录时间" prop="recordTime">
+        <el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="版本号" prop="version">
+        <el-input v-model="queryParams.version" placeholder="请输入版本号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['base:equipment-quantity-log:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['base:equipment-quantity-log:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="id" align="center" prop="id" />
+      <el-table-column label="设备id" align="center" prop="equipmentId" />
+      <el-table-column label="设备名称" align="center" prop="equipmentName" />
+      <el-table-column label="进入设备的数量" align="center" prop="inQuantity" />
+      <el-table-column label="离开设备的数量，若plc只记录一个生产数量，也写入该字段" align="center" prop="outQuantity" />
+      <el-table-column label="正常生产量" align="center" prop="okQuantity" />
+      <el-table-column label="设备上报的报废数量" align="center" prop="nokQuantity" />
+      <el-table-column label="生产数量的记录时间" align="center" prop="recordTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.recordTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="版本号" align="center" prop="version" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['base:equipment-quantity-log:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['base:equipment-quantity-log:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="设备id" prop="equipmentId">
+          <el-input v-model="form.equipmentId" placeholder="请输入设备id" />
+        </el-form-item>
+        <el-form-item label="设备名称" prop="equipmentName">
+          <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
+        </el-form-item>
+        <el-form-item label="进入设备的数量" prop="inQuantity">
+          <el-input v-model="form.inQuantity" placeholder="请输入进入设备的数量" />
+        </el-form-item>
+        <el-form-item label="离开设备的数量，若plc只记录一个生产数量，也写入该字段" prop="outQuantity">
+          <el-input v-model="form.outQuantity" placeholder="请输入离开设备的数量，若plc只记录一个生产数量，也写入该字段" />
+        </el-form-item>
+        <el-form-item label="正常生产量" prop="okQuantity">
+          <el-input v-model="form.okQuantity" placeholder="请输入正常生产量" />
+        </el-form-item>
+        <el-form-item label="设备上报的报废数量" prop="nokQuantity">
+          <el-input v-model="form.nokQuantity" placeholder="请输入设备上报的报废数量" />
+        </el-form-item>
+        <el-form-item label="生产数量的记录时间" prop="recordTime">
+          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择生产数量的记录时间" />
+        </el-form-item>
+        <el-form-item label="版本号" prop="version">
+          <el-input v-model="form.version" placeholder="请输入版本号" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createEquipmentQuantityLog, updateEquipmentQuantityLog, deleteEquipmentQuantityLog, getEquipmentQuantityLog, getEquipmentQuantityLogPage, exportEquipmentQuantityLogExcel } from "@/api/base/equipmentQuantityLog";
+
+export default {
+  name: "EquipmentQuantityLog",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 后端用 设备生产数量统计表（按一定时间段写入）列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        equipmentId: null,
+        equipmentName: null,
+        inQuantity: null,
+        outQuantity: null,
+        okQuantity: null,
+        nokQuantity: null,
+        recordTime: [],
+        version: null,
+        createTime: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        equipmentName: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getEquipmentQuantityLogPage(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 = {
+        id: undefined,
+        equipmentId: undefined,
+        equipmentName: undefined,
+        inQuantity: undefined,
+        outQuantity: undefined,
+        okQuantity: undefined,
+        nokQuantity: undefined,
+        recordTime: undefined,
+        version: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加后端用 设备生产数量统计表（按一定时间段写入）";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getEquipmentQuantityLog(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) {
+          updateEquipmentQuantityLog(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createEquipmentQuantityLog(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除后端用 设备生产数量统计表（按一定时间段写入）编号为"' + id + '"的数据项?').then(function() {
+          return deleteEquipmentQuantityLog(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有后端用 设备生产数量统计表（按一定时间段写入）数据项?').then(() => {
+          this.exportLoading = true;
+          return exportEquipmentQuantityLogExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '后端用 设备生产数量统计表（按一定时间段写入）.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/base/equipmentQuantityRealtime/index.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="设备id" prop="equipmentId">
+        <el-input v-model="queryParams.equipmentId" placeholder="请输入设备id" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="设备名称" prop="equipmentName">
+        <el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="进入设备的基板数量" prop="inQuantity">
+        <el-input v-model="queryParams.inQuantity" placeholder="请输入进入设备的基板数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="离开设备的基板数量，若plc只记录一个生产数量，也写入该字段" prop="outQuantity">
+        <el-input v-model="queryParams.outQuantity" placeholder="请输入离开设备的基板数量，若plc只记录一个生产数量，也写入该字段" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="正常生产量" prop="okQuantity">
+        <el-input v-model="queryParams.okQuantity" placeholder="请输入正常生产量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="设备上报的报废数量" prop="nokQuantity">
+        <el-input v-model="queryParams.nokQuantity" placeholder="请输入设备上报的报废数量" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="记录时间" prop="recordTime">
+        <el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="版本号" prop="version">
+        <el-input v-model="queryParams.version" placeholder="请输入版本号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['base:equipment-quantity-realtime:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['base:equipment-quantity-realtime:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="id" align="center" prop="id" />
+      <el-table-column label="设备id" align="center" prop="equipmentId" />
+      <el-table-column label="设备名称" align="center" prop="equipmentName" />
+      <el-table-column label="进入设备的基板数量" align="center" prop="inQuantity" />
+      <el-table-column label="离开设备的基板数量，若plc只记录一个生产数量，也写入该字段" align="center" prop="outQuantity" />
+      <el-table-column label="正常生产量" align="center" prop="okQuantity" />
+      <el-table-column label="设备上报的报废数量" align="center" prop="nokQuantity" />
+      <el-table-column label="记录时间" align="center" prop="recordTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.recordTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="版本号" align="center" prop="version" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['base:equipment-quantity-realtime:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['base:equipment-quantity-realtime:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="设备id" prop="equipmentId">
+          <el-input v-model="form.equipmentId" placeholder="请输入设备id" />
+        </el-form-item>
+        <el-form-item label="设备名称" prop="equipmentName">
+          <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
+        </el-form-item>
+        <el-form-item label="进入设备的基板数量" prop="inQuantity">
+          <el-input v-model="form.inQuantity" placeholder="请输入进入设备的基板数量" />
+        </el-form-item>
+        <el-form-item label="离开设备的基板数量，若plc只记录一个生产数量，也写入该字段" prop="outQuantity">
+          <el-input v-model="form.outQuantity" placeholder="请输入离开设备的基板数量，若plc只记录一个生产数量，也写入该字段" />
+        </el-form-item>
+        <el-form-item label="正常生产量" prop="okQuantity">
+          <el-input v-model="form.okQuantity" placeholder="请输入正常生产量" />
+        </el-form-item>
+        <el-form-item label="设备上报的报废数量" prop="nokQuantity">
+          <el-input v-model="form.nokQuantity" placeholder="请输入设备上报的报废数量" />
+        </el-form-item>
+        <el-form-item label="记录时间" prop="recordTime">
+          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择记录时间" />
+        </el-form-item>
+        <el-form-item label="版本号" prop="version">
+          <el-input v-model="form.version" placeholder="请输入版本号" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createEquipmentQuantityRealtime, updateEquipmentQuantityRealtime, deleteEquipmentQuantityRealtime, getEquipmentQuantityRealtime, getEquipmentQuantityRealtimePage, exportEquipmentQuantityRealtimeExcel } from "@/api/base/equipmentQuantityRealtime";
+
+export default {
+  name: "EquipmentQuantityRealtime",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 后端用 设备生产数量实时列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        equipmentId: null,
+        equipmentName: null,
+        inQuantity: null,
+        outQuantity: null,
+        okQuantity: null,
+        nokQuantity: null,
+        recordTime: [],
+        version: null,
+        createTime: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getEquipmentQuantityRealtimePage(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 = {
+        id: undefined,
+        equipmentId: undefined,
+        equipmentName: undefined,
+        inQuantity: undefined,
+        outQuantity: undefined,
+        okQuantity: undefined,
+        nokQuantity: undefined,
+        recordTime: undefined,
+        version: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加后端用 设备生产数量实时";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getEquipmentQuantityRealtime(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) {
+          updateEquipmentQuantityRealtime(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createEquipmentQuantityRealtime(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除后端用 设备生产数量实时编号为"' + id + '"的数据项?').then(function() {
+          return deleteEquipmentQuantityRealtime(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有后端用 设备生产数量实时数据项?').then(() => {
+          this.exportLoading = true;
+          return exportEquipmentQuantityRealtimeExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '后端用 设备生产数量实时.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/base/equipmentStatusLog/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="设备id" prop="equipmentId">
+        <el-input v-model="queryParams.equipmentId" placeholder="请输入设备id" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="设备名称" prop="equipmentName">
+        <el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="plc id" prop="plcId">
+        <el-input v-model="queryParams.plcId" placeholder="请输入plc id" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="plc" prop="plc">
+        <el-input v-model="queryParams.plc" placeholder="请输入plc" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态，0正常 1计划停机 2故障" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态，0正常 1计划停机 2故障" clearable size="small">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="记录时间" prop="recordTime">
+        <el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="持续时间（分钟），状态变动时记录并更新" prop="duration">
+        <el-input v-model="queryParams.duration" placeholder="请输入持续时间（分钟），状态变动时记录并更新" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="版本号" prop="version">
+        <el-input v-model="queryParams.version" placeholder="请输入版本号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['base:equipment-status-log:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['base:equipment-status-log:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="id" align="center" prop="id" />
+      <el-table-column label="设备id" align="center" prop="equipmentId" />
+      <el-table-column label="设备名称" align="center" prop="equipmentName" />
+      <el-table-column label="plc id" align="center" prop="plcId" />
+      <el-table-column label="plc" align="center" prop="plc" />
+      <el-table-column label="状态，0正常 1计划停机 2故障" align="center" prop="status" />
+      <el-table-column label="记录时间" align="center" prop="recordTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.recordTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="持续时间（分钟），状态变动时记录并更新" align="center" prop="duration" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="版本号" align="center" prop="version" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['base:equipment-status-log:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['base:equipment-status-log:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="设备id" prop="equipmentId">
+          <el-input v-model="form.equipmentId" placeholder="请输入设备id" />
+        </el-form-item>
+        <el-form-item label="设备名称" prop="equipmentName">
+          <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
+        </el-form-item>
+        <el-form-item label="plc id" prop="plcId">
+          <el-input v-model="form.plcId" placeholder="请输入plc id" />
+        </el-form-item>
+        <el-form-item label="plc" prop="plc">
+          <el-input v-model="form.plc" placeholder="请输入plc" />
+        </el-form-item>
+        <el-form-item label="状态，0正常 1计划停机 2故障" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio label="1">请选择字典生成</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="记录时间" prop="recordTime">
+          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择记录时间" />
+        </el-form-item>
+        <el-form-item label="持续时间（分钟），状态变动时记录并更新" prop="duration">
+          <el-input v-model="form.duration" placeholder="请输入持续时间（分钟），状态变动时记录并更新" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+        <el-form-item label="版本号" prop="version">
+          <el-input v-model="form.version" placeholder="请输入版本号" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createEquipmentStatusLog, updateEquipmentStatusLog, deleteEquipmentStatusLog, getEquipmentStatusLog, getEquipmentStatusLogPage, exportEquipmentStatusLogExcel } from "@/api/base/equipmentStatusLog";
+
+export default {
+  name: "EquipmentStatusLog",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 后端用 设备工作状态列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        equipmentId: null,
+        equipmentName: null,
+        plcId: null,
+        plc: null,
+        status: null,
+        recordTime: [],
+        duration: null,
+        remark: null,
+        version: null,
+        createTime: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getEquipmentStatusLogPage(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 = {
+        id: undefined,
+        equipmentId: undefined,
+        equipmentName: undefined,
+        plcId: undefined,
+        plc: undefined,
+        status: undefined,
+        recordTime: undefined,
+        duration: undefined,
+        remark: undefined,
+        version: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加后端用 设备工作状态";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getEquipmentStatusLog(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) {
+          updateEquipmentStatusLog(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createEquipmentStatusLog(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除后端用 设备工作状态编号为"' + id + '"的数据项?').then(function() {
+          return deleteEquipmentStatusLog(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有后端用 设备工作状态数据项?').then(() => {
+          this.exportLoading = true;
+          return exportEquipmentStatusLogExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '后端用 设备工作状态.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/base/equipmentStatusRealtime/index.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="设备id" prop="equipmentId">
+        <el-input v-model="queryParams.equipmentId" placeholder="请输入设备id" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="设备名称" prop="equipmentName">
+        <el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态，0正常 1计划停机 2故障" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态，0正常 1计划停机 2故障" clearable size="small">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否运行中" prop="run">
+        <el-select v-model="queryParams.run" placeholder="请选择是否运行中" clearable size="small">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否发生运行错误" prop="error">
+        <el-select v-model="queryParams.error" placeholder="请选择是否发生运行错误" clearable size="small">
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="记录时间" prop="recordTime">
+        <el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="版本号" prop="version">
+        <el-input v-model="queryParams.version" placeholder="请输入版本号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['base:equipment-status-realtime:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['base:equipment-status-realtime:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="id" align="center" prop="id" />
+      <el-table-column label="设备id" align="center" prop="equipmentId" />
+      <el-table-column label="设备名称" align="center" prop="equipmentName" />
+      <el-table-column label="状态，0正常 1计划停机 2故障" align="center" prop="status" />
+      <el-table-column label="是否运行中" align="center" prop="run" />
+      <el-table-column label="是否发生运行错误" align="center" prop="error" />
+      <el-table-column label="描述" align="center" prop="description" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="记录时间" align="center" prop="recordTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.recordTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="版本号" align="center" prop="version" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['base:equipment-status-realtime:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['base:equipment-status-realtime:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="设备id" prop="equipmentId">
+          <el-input v-model="form.equipmentId" placeholder="请输入设备id" />
+        </el-form-item>
+        <el-form-item label="设备名称" prop="equipmentName">
+          <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
+        </el-form-item>
+        <el-form-item label="状态，0正常 1计划停机 2故障" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio label="1">请选择字典生成</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否运行中" prop="run">
+          <el-radio-group v-model="form.run">
+            <el-radio label="1">请选择字典生成</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否发生运行错误" prop="error">
+          <el-radio-group v-model="form.error">
+            <el-radio label="1">请选择字典生成</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="描述">
+          <editor v-model="form.description" :min-height="192"/>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+        <el-form-item label="记录时间" prop="recordTime">
+          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择记录时间" />
+        </el-form-item>
+        <el-form-item label="版本号" prop="version">
+          <el-input v-model="form.version" placeholder="请输入版本号" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createEquipmentStatusRealtime, updateEquipmentStatusRealtime, deleteEquipmentStatusRealtime, getEquipmentStatusRealtime, getEquipmentStatusRealtimePage, exportEquipmentStatusRealtimeExcel } from "@/api/base/equipmentStatusRealtime";
+import Editor from '@/components/Editor';
+
+export default {
+  name: "EquipmentStatusRealtime",
+  components: {
+    Editor
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 后端用 设备状态实时列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        equipmentId: null,
+        equipmentName: null,
+        status: null,
+        run: null,
+        error: null,
+        description: null,
+        remark: null,
+        recordTime: [],
+        version: null,
+        createTime: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getEquipmentStatusRealtimePage(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 = {
+        id: undefined,
+        equipmentId: undefined,
+        equipmentName: undefined,
+        status: undefined,
+        run: undefined,
+        error: undefined,
+        description: undefined,
+        remark: undefined,
+        recordTime: undefined,
+        version: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加后端用 设备状态实时";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getEquipmentStatusRealtime(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) {
+          updateEquipmentStatusRealtime(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createEquipmentStatusRealtime(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除后端用 设备状态实时编号为"' + id + '"的数据项?').then(function() {
+          return deleteEquipmentStatusRealtime(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有后端用 设备状态实时数据项?').then(() => {
+          this.exportLoading = true;
+          return exportEquipmentStatusRealtimeExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '后端用 设备状态实时.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/base/equipmentTypeFile/index.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="设备类型ID" prop="equipmentTypeId">
+        <el-input v-model="queryParams.equipmentTypeId" placeholder="请输入设备类型ID" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="原始名称" prop="fileName">
+        <el-input v-model="queryParams.fileName" placeholder="请输入原始名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="下载地址" prop="fileUrl">
+        <el-input v-model="queryParams.fileUrl" placeholder="请输入下载地址" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['base:equipment-type-file:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['base:equipment-type-file:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="ID" align="center" prop="id" />
+      <el-table-column label="设备类型ID" align="center" prop="equipmentTypeId" />
+      <el-table-column label="原始名称" align="center" prop="fileName" />
+      <el-table-column label="下载地址" align="center" prop="fileUrl" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['base:equipment-type-file:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['base:equipment-type-file:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="设备类型ID" prop="equipmentTypeId">
+          <el-input v-model="form.equipmentTypeId" placeholder="请输入设备类型ID" />
+        </el-form-item>
+        <el-form-item label="原始名称" prop="fileName">
+          <el-input v-model="form.fileName" placeholder="请输入原始名称" />
+        </el-form-item>
+        <el-form-item label="下载地址" prop="fileUrl">
+          <el-input v-model="form.fileUrl" placeholder="请输入下载地址" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createEquipmentTypeFile, updateEquipmentTypeFile, deleteEquipmentTypeFile, getEquipmentTypeFile, getEquipmentTypeFilePage, exportEquipmentTypeFileExcel } from "@/api/base/equipmentTypeFile";
+
+export default {
+  name: "EquipmentTypeFile",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 设备类型文件关联列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        equipmentTypeId: null,
+        fileName: null,
+        fileUrl: null,
+        createTime: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        equipmentTypeId: [{ required: true, message: "设备类型ID不能为空", trigger: "blur" }],
+        fileName: [{ required: true, message: "原始名称不能为空", trigger: "blur" }],
+        fileUrl: [{ required: true, message: "下载地址不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getEquipmentTypeFilePage(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 = {
+        id: undefined,
+        equipmentTypeId: undefined,
+        fileName: undefined,
+        fileUrl: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加设备类型文件关联";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getEquipmentTypeFile(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) {
+          updateEquipmentTypeFile(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createEquipmentTypeFile(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除设备类型文件关联编号为"' + id + '"的数据项?').then(function() {
+          return deleteEquipmentTypeFile(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有设备类型文件关联数据项?').then(() => {
+          this.exportLoading = true;
+          return exportEquipmentTypeFileExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '设备类型文件关联.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/core/base/equipment/components/EquipmentAssets.vue

@@ -0,0 +1,32 @@
+<!-- 
+    filename: EquipmentAssets.vue
+    author: liubin
+    date: 2023-08-22 11:11:18
+    description: 设备资产
+-->
+
+<template>
+    <div class="equipment-assets"></div>
+</template>
+
+<script>
+export default {
+    name: "EquipmentAssets",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.equipment-assets {
+    background: #f1f1f1;
+    padding: 12px;
+    min-height: 128px;
+    margin-top: 8px;
+}
+</style>

src/views/core/base/equipment/components/EquipmentDrawer.vue

@@ -0,0 +1,444 @@
+<!-- 
+    filename: EquipmentDrawer.vue
+    author: liubin
+    date: 2023-08-22 14:38:56
+    description: 
+-->
+
+<template>
+	<el-drawer
+		:visible="visible"
+		:show-close="false"
+		:wrapper-closable="false"
+		class="drawer"
+		custom-class="mes-drawer"
+		size="60%"
+		@closed="$emit('destroy')">
+		<SmallTitle slot="title">
+			{{
+				mode.includes('detail')
+					? '详情'
+					: mode.includes('edit')
+					? '编辑'
+					: '新增'
+			}}
+		</SmallTitle>
+
+		<div class="drawer-body flex">
+			<div class="drawer-body__content">
+				<section v-for="(section, index) in sections" :key="section.key">
+					<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
+
+					<div class="form-part" v-if="section.key == 'base'">
+						<el-skeleton v-if="!showForm" animated />
+						<DialogForm
+							key="drawer-dialog-form"
+							v-if="showForm"
+							ref="form"
+							:dataForm="form"
+							:rows="formRows" />
+					</div>
+
+					<div v-if="section.key == 'attrs'" style="margin-top: 12px">
+						<base-table
+							v-loading="attrListLoading"
+							:table-props="section.props"
+							:page="section.pageNo || 1"
+							:limit="section.pageSize || 10"
+							:table-data="list"
+							@emitFun="handleEmitFun">
+							<method-btn
+								v-if="section.tableBtn"
+								slot="handleBtn"
+								label="操作"
+								:method-list="tableBtn"
+								@clickBtn="handleTableBtnClick" />
+						</base-table>
+					</div>
+				</section>
+			</div>
+
+			<div class="drawer-body__footer">
+				<el-button style="margin-right: 10px" @click="handleCancel">
+					返回
+				</el-button>
+				<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
+					编辑
+				</el-button>
+				<span v-else>
+					<el-button type="primary" @click="handleSave">保存</el-button>
+					<!-- sections的第二项必须是 属性列表  -->
+					<el-button
+						v-if="sections[1].allowAdd"
+						type="primary"
+						@click="handleAddAttr">
+						添加属性
+					</el-button>
+				</span>
+			</div>
+		</div>
+
+		<!-- 属性对话框 -->
+		<base-dialog
+			v-if="sections[1].allowAdd"
+			:dialogTitle="attrTitle"
+			:dialogVisible="attrFormVisible"
+			width="35%"
+			:append-to-body="true"
+			custom-class="baseDialog"
+			@close="closeAttrForm"
+			@cancel="closeAttrForm"
+			@confirm="submitAttrForm">
+			<DialogForm
+				v-if="attrFormVisible"
+				ref="attrForm"
+				:dataForm="attrForm"
+				:rows="attrRows" />
+		</base-dialog>
+	</el-drawer>
+</template>
+
+<script>
+import DialogForm from '@/components/DialogForm';
+
+const SmallTitle = {
+	name: 'SmallTitle',
+	props: ['size'],
+	data() {
+		return {};
+	},
+	methods: {},
+	render: function (h) {
+		return h(
+			'span',
+			{
+				class: 'small-title',
+				style: {
+					fontSize: '18px',
+					lineHeight:
+						this.size == 'lg' ? '24px' : this.size == 'sm' ? '18px' : '20px',
+					fontWeight: 500,
+					fontFamily: '微软雅黑, Microsoft YaHei, Arial, Helvetica, sans-serif',
+				},
+			},
+			this.$slots.default
+		);
+	},
+};
+
+export default {
+	components: { SmallTitle, DialogForm },
+	props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段
+	data() {
+		return {
+			visible: false,
+			showForm: false,
+			total: 0,
+			form: {},
+			list: [],
+			attrTitle: '',
+			attrForm: {
+				id: null,
+				equipmentId: null,
+				name: '',
+				value: '',
+			},
+			attrFormVisible: false,
+			attrRows: [
+				[
+					{
+						input: true,
+						label: '属性名称',
+						prop: 'name',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[
+					{
+						input: true,
+						label: '属性值',
+						prop: 'value',
+					},
+				],
+			],
+			attrQuery: null, // 属性列表的请求
+			infoQuery: null, // 基本信息的请求
+			attrFormSubmitting: false,
+			attrListLoading: false,
+		};
+	},
+	computed: {
+		formRows() {
+			return this.sections[0].rows.map((row) => {
+				return row.map((col) => {
+					if (col.key == 'eq-pics') {
+						// 重置图片的位置
+						return {
+							...col,
+							style: {
+								left: 0,
+								right: 'unset'
+							}
+						}
+					}
+					return {
+						...col,
+						bind: {
+							// 详情 模式下，禁用各种输入
+							disabled: this.mode == 'detail',
+						},
+					};
+				});
+			});
+		},
+		tableBtn() {
+			return this.mode == 'detail' ? [] : this.sections[1].tableBtn;
+		},
+	},
+	mounted() {
+		for (const section of this.sections) {
+			// 请求具体信息
+			if ('url' in section) {
+				const query = {
+					url: section.url,
+					method: section.method || 'get',
+					params: section.queryParams || null,
+					data: section.data || null,
+				};
+				this.$axios(query).then(({ data }) => {
+					if (section.key == 'base') {
+						this.form = data;
+						this.showForm = true;
+						this.infoQuery = query;
+						console.log('setting form: ', this.form, data);
+					} else if (section.key == 'attrs') {
+						this.attrQuery = query;
+						this.list = data.list;
+						this.total = data.total;
+					}
+				});
+			}
+		}
+	},
+	methods: {
+		handleTableBtnClick({ type, data }) {
+			switch (type) {
+				case 'edit':
+					this.handleEditAttr(data.id);
+					break;
+				case 'delete':
+					this.handleDeleteAttr(data.id);
+					break;
+			}
+		},
+
+		handleEmitFun(val) {
+			console.log('handleEmitFun', val);
+		},
+
+		init() {
+			this.visible = true;
+		},
+
+		async getAttrList() {
+			this.attrListLoading = true;
+			const res = await this.$axios(this.attrQuery);
+			if (res.code == 0) {
+				this.list = res.data.list;
+				this.total = res.data.total;
+			}
+			this.attrListLoading = false;
+		},
+
+		// 保存表单
+		handleSave() {
+			this.$refs['form'][0].validate(async (valid) => {
+				if (valid) {
+					const isEdit = this.mode == 'edit';
+					await this.$axios({
+						url: this.sections[0][isEdit ? 'urlUpdate' : 'urlCreate'],
+						method: isEdit ? 'put' : 'post',
+						data: this.form,
+					});
+					this.$modal.msgSuccess(`${isEdit ? '更新' : '创建'}成功`);
+					this.visible = false;
+					this.$emit('refreshDataList');
+				}
+			});
+		},
+
+		handleCancel() {
+			this.visible = false;
+		},
+
+		// 开启编辑
+		toggleEdit() {
+			this.mode = 'edit';
+		},
+
+		// 新增属性
+		handleAddAttr() {
+			if (!this.dataId) return this.$message.error('请先创建设备信息');
+			this.attrForm = {
+				id: null,
+				equipmentId: this.dataId,
+				name: '',
+				value: '',
+			};
+			this.attrTitle = '添加设备属性';
+			this.attrFormVisible = true;
+		},
+
+		// 编辑属性
+		async handleEditAttr(attrId) {
+			const res = await this.$axios({
+				url: this.sections[1].urlDetail,
+				method: 'get',
+				params: { id: attrId },
+			});
+			if (res.code == 0) {
+				this.attrForm = res.data;
+				this.attrTitle = '编辑设备属性';
+				this.attrFormVisible = true;
+			}
+		},
+
+		// 删除属性
+		handleDeleteAttr(attrId) {
+			this.$confirm('确定删除该属性?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(async () => {
+					const res = await this.$axios({
+						url: this.sections[1].urlDelete,
+						method: 'delete',
+						params: { id: attrId },
+					});
+					if (res.code == 0) {
+						this.$message({
+							message: '删除成功',
+							type: 'success',
+							duration: 1500,
+							onClose: () => {
+								this.getAttrList();
+							},
+						});
+					}
+				})
+				.catch(() => {});
+		},
+
+		// 提交属性表
+		async submitAttrForm() {
+			this.$refs['attrForm'].validate((valid) => {
+				if (!valid) {
+					return;
+				}
+			});
+			console.log('this.attrform', this.attrForm);
+			const isEdit = this.attrForm.id != null;
+			this.attrFormSubmitting = true;
+			const res = await this.$axios({
+				url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
+				method: isEdit ? 'put' : 'post',
+				data: this.attrForm,
+			});
+
+			if (res.code == 0) {
+				this.closeAttrForm();
+				this.$message({
+					message: `${isEdit ? '更新' : '创建'}成功`,
+					type: 'success',
+					duration: 1500,
+					onClose: () => {
+						this.getAttrList();
+					},
+				});
+			}
+			this.attrFormSubmitting = false;
+		},
+
+		closeAttrForm() {
+			this.attrFormVisible = false;
+		},
+
+		handleClick(raw) {
+			if (raw.type === 'delete') {
+				this.$confirm(
+					`确定对${
+						raw.data.name
+							? '[名称=' + raw.data.name + ']'
+							: '[序号=' + raw.data._pageIndex + ']'
+					}进行删除操作?`,
+					'提示',
+					{
+						confirmButtonText: '确定',
+						cancelButtonText: '取消',
+						type: 'warning',
+					}
+				)
+					.then(() => {
+						deleteProductAttr(raw.data.id).then(({ data }) => {
+							this.$message({
+								message: '操作成功',
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.getList();
+								},
+							});
+						});
+					})
+					.catch(() => {});
+			} else {
+				this.addNew(raw.data.id);
+			}
+		},
+	},
+};
+</script>
+
+<style scoped>
+.drawer >>> .el-drawer {
+	border-radius: 8px 0 0 8px;
+}
+
+.drawer >>> .el-drawer__header {
+	margin: 0;
+	padding: 32px 32px 24px;
+	border-bottom: 1px solid #dcdfe6;
+	margin-bottom: 0px;
+}
+
+.small-title::before {
+	content: '';
+	display: inline-block;
+	vertical-align: top;
+	width: 4px;
+	height: 22px;
+	border-radius: 1px;
+	margin-right: 8px;
+	background-color: #0b58ff;
+}
+
+.drawer-body {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.drawer-body__content {
+	flex: 1;
+	/* background: #eee; */
+	padding: 20px 30px;
+	overflow-y: auto;
+}
+
+.drawer-body__footer {
+	display: flex;
+	justify-content: flex-end;
+	padding: 18px;
+}
+</style>

src/views/core/base/equipment/components/EquipmentPics.vue

@@ -0,0 +1,111 @@
+<!-- 
+    filename: EquipmentPics.vue
+    author: liubin
+    date: 2023-08-18 16:29:39
+    description: 
+-->
+
+<template>
+	<div class="equipment-pics">
+		<div v-for="(url, idx) in images" :key="url">
+			<img :src="url" :alt="url" />
+			<figure class="big-img" :style="inlineStyle">
+				<img :src="url" :alt="url" />
+				<figcaption>{{ desc[idx] }}</figcaption>
+			</figure>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'EquipmentPics',
+	components: {},
+	props: {
+		inlineStyle: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			desc: [
+				'车间设备 - 1',
+				'车间设备 - 2',
+				'车间设备 - 3',
+				'车间设备 - 4',
+				'车间设备 - 5',
+				'车间设备 - 6',
+				'车间设备 - 7',
+				'车间设备 - 8',
+				'车间设备 - 9',
+				'车间设备 - 10',
+				'车间设备 - 11',
+				'车间设备 - 12',
+			],
+			images: Array(10)
+				.fill(1)
+				.map((_, index) => require(`../assets/eq${index + 1}.jpg`)),
+		};
+	},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.equipment-pics {
+	// background: #cfcfcf;
+	padding: 12px;
+	// margin: 8px;
+	display: flex;
+	overflow-x: auto;
+}
+
+.equipment-pics > div {
+	height: 100px;
+	position: relative;
+	cursor: pointer;
+}
+
+.equipment-pics > div:not(:last-child) {
+	margin-right: 12px;
+}
+
+.equipment-pics > div > img {
+	height: 95%;
+}
+
+.equipment-pics > div > figure {
+	display: none;
+	position: fixed;
+	// inset: 0;
+	// margin: auto;
+	top: 0;
+	right: 0;
+	// width: 640px;
+	// height: 480px;
+	background: #000;
+	overflow: hidden;
+	padding: 8px 8px 0;
+}
+
+.equipment-pics > div:hover > figure {
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.equipment-pics > div > figure > img {
+	flex: 1;
+}
+
+.equipment-pics > div > figure > figcaption {
+	height: 24px;
+	margin-top: 8px;
+	font-size: 18px;
+	line-height: 1;
+	color: #fff;
+}
+</style>

src/views/core/base/equipment/index.vue

@@ -0,0 +1,539 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				: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"
+				key="index-dialog-form"
+				ref="form"
+				:dataForm="form"
+				:rows="rows" />
+		</base-dialog>
+
+		<!-- 设备 详情 - 编辑 -->
+		<EquipmentDrawer
+			v-if="editVisible"
+			ref="drawer"
+			:mode="editMode"
+			:data-id="form.id"
+			:sections="[
+				{
+					name: '基本信息',
+					key: 'base',
+					rows: rows,
+					url: '/base/equipment/get',
+					urlUpdate: '/base/equipment/update',
+					urlCreate: '/base/equipment/create',
+					queryParams: { id: form.id },
+				},
+				{
+					name: '属性列表',
+					key: 'attrs',
+					props: drawerListProps,
+					url: '/base/equipment-attr/page',
+					urlCreate: '/base/equipment-attr/create',
+					urlUpdate: '/base/equipment-attr/update',
+					urlDelete: '/base/equipment-attr/delete',
+					urlDetail: '/base/equipment-attr/get',
+					queryParams: {
+						equipmentId: form.id,
+						pageNo: 1,
+						pageSize: 10,
+					},
+					tableBtn: [
+						this.$auth.hasPermi('base:equipment-attr:update')
+							? {
+									type: 'edit',
+									btnName: '修改',
+							  }
+							: undefined,
+						this.$auth.hasPermi('base:equipment-attr:delete')
+							? {
+									type: 'delete',
+									btnName: '删除',
+							  }
+							: undefined,
+					].filter((v) => v),
+					allowAdd: true,
+				},
+			]"
+			@refreshDataList="getList"
+			@cancel="editVisible = false"
+			@destroy="editVisible = false" />
+	</div>
+</template>
+
+<script>
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import { getAccessToken } from '@/utils/auth';
+import EquipmentPics from './components/EquipmentPics';
+import EquipmentAssets from './components/EquipmentAssets';
+import EquipmentDrawer from './components/EquipmentDrawer';
+
+import {
+	createEquipment,
+	updateEquipment,
+	deleteEquipment,
+	getEquipment,
+	getEquipmentPage,
+	exportEquipmentExcel,
+} from '@/api/base/equipment';
+import Editor from '@/components/Editor';
+
+export default {
+	name: 'Equipment',
+	components: {
+		Editor,
+		EquipmentDrawer,
+	},
+	mixins: [basicPageMixin],
+	data() {
+		return {
+			searchBarKeys: ['name', 'code'],
+			tableBtn: [
+				this.$auth.hasPermi('base:equipment:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'name', label: '设备名称', align: 'center' },
+				{ prop: 'code', label: '检测编码', align: 'center' },
+				{ prop: 'equipmentType', label: '设备类型', align: 'center' },
+				{ prop: 'enName', label: '英文名称', align: 'center' },
+				{ prop: 'abbr', label: '缩写', align: 'center' },
+				{
+					action: 'show-detail',
+					label: '详情',
+					align: 'center',
+					subcomponent: {
+						props: ['injectData'],
+						render: function (h) {
+							const _this = this;
+							return h(
+								'el-button',
+								{
+									props: { type: 'text', size: 'mini' },
+									on: {
+										click: function () {
+											console.log('inejctdata', _this.injectData);
+											_this.$emit('emitData', {
+												action: _this.injectData.action,
+												value: _this.injectData.id,
+											});
+										},
+									},
+								},
+								'查看详情'
+							);
+						},
+					},
+				},
+			],
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '名称',
+					placeholder: '请输入设备名称',
+					param: 'name',
+				},
+				{
+					type: 'input',
+					label: '编码',
+					placeholder: '请输入设备编码',
+					param: 'code',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:equipment:create') ? 'button' : '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+				{
+					type: this.$auth.hasPermi('base:equipment:export') ? 'button' : '',
+					btnName: '导出',
+					name: 'export',
+					color: 'warning',
+				},
+			],
+			rows: [
+				[
+					{
+						input: true,
+						label: '设备名称',
+						prop: 'name',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// bind: {
+						// 	disabled: this.editMode == 'detail', // some condition, like detail mode...
+						// }
+					},
+					{
+						input: true,
+						label: '设备编码',
+						prop: 'code',
+						url: '/base/equipment/getCode',
+					},
+				],
+				[
+					{
+						input: true,
+						label: '英文名称',
+						prop: 'enName',
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// bind: {
+						// 	disabled: true, // some condition, like detail mode...
+						// }
+					},
+					{
+						input: true,
+						label: '缩写',
+						prop: 'abbr',
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// bind: {
+						// 	disabled: true, // some condition, like detail mode...
+						// }
+					},
+				],
+				[
+					{
+						select: true,
+						label: '设备类型',
+						prop: 'equipmentTypeId',
+						url: '/base/equipment-type/page?pageNo=1&pageSize=100',
+					},
+					// {
+					// 	select: true,
+					// 	label: '设备分组',
+					// 	prop: 'groupId',
+					// 	url: '/base/equipment-group/page?pageNo=1&pageSize=100',
+					// },
+					{ input: true, label: '备注', prop: 'remark' },
+				],
+				[
+					{
+						datetime: true,
+						label: '生产日期',
+						prop: 'productionTime',
+					},
+					{
+						datetime: true,
+						label: '进厂日期',
+						prop: 'enterTime',
+					},
+				],
+				[
+					{
+						input: true,
+						prop: 'tvalue',
+						label: '设备TT值',
+						rules: [
+							{ required: true, message: '不能为空', trigger: 'blur' },
+							{
+								type: 'number',
+								message: '请输入正确的数字值',
+								trigger: 'blur',
+								transform: (val) => Number(val),
+							},
+						],
+					},
+					{
+						input: true,
+						label: '产品加工时间',
+						prop: 'processingTime',
+						rules: [
+							{
+								type: 'number',
+								message: '请输入正确的数字值',
+								trigger: 'blur',
+								transform: (val) => Number(val),
+							},
+						],
+					},
+				],
+				[
+					{
+						input: true,
+						label: '制造商',
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						prop: 'manufacturer',
+					},
+					{
+						input: true,
+						label: '设备规格',
+						prop: 'spec',
+					},
+				],
+				[
+					{
+						textarea: true,
+						label: '功能描述',
+						// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						prop: 'description',
+					},
+				],
+				[
+					{
+						upload: true,
+						label: '上传资料',
+						prop: 'uploadFiles',
+						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
+						bind: {
+							headers: { Authorization: 'Bearer ' + getAccessToken() },
+							'show-file-list': false,
+						},
+					},
+				],
+				[
+					{
+						diy: true,
+						key: 'eq-assets',
+						label: '设备资料',
+						prop: 'fileNames',
+						subcomponent: EquipmentAssets,
+					},
+				],
+				[
+					{
+						diy: true,
+						key: 'eq-pics',
+						label: '设备图片',
+						prop: 'fileUrls',
+						subcomponent: EquipmentPics,
+						pictures: async () => {
+							// some async request
+							return [];
+						},
+					},
+				],
+			],
+			editVisible: false,
+			editMode: 'edit', // 'edit', 'detail'
+			// drawer 里的设备属性列表配置项
+			drawerListProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'name', label: '属性名称', align: 'center' },
+				{ prop: 'value', label: '属性值', align: 'center' },
+			],
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				code: '',
+				name: '',
+			},
+			// 表单参数
+			form: {
+				id: null,
+			},
+		};
+	},
+	created() {
+		this.getList();
+	},
+	methods: {
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			getEquipmentPage(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 = {
+				id: undefined,
+				code: undefined,
+				name: undefined,
+				enName: undefined,
+				abbr: undefined,
+				enterTime: undefined,
+				productionTime: undefined,
+				equipmentTypeId: undefined,
+				groupId: undefined,
+				tvalue: undefined,
+				processingTime: undefined,
+				manufacturer: undefined,
+				spec: undefined,
+				description: undefined,
+				remark: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加设备';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipment(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) {
+					updateEquipment(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipment(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除设备编号为"' + id + '"的数据项?')
+				.then(function () {
+					return deleteEquipment(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有设备数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '设备.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+		// 查看详情
+		viewDetail(id) {
+			this.reset();
+			this.editMode = 'detail';
+			this.form.id = id;
+			this.editVisible = true;
+			this.$nextTick(() => {
+				this.$refs['drawer'].init();
+			});
+		},
+		// overwrite basicPageMixin 里的 处理表格按钮 方法
+		handleTableBtnClick({ data, type }) {
+			console.log('[handleTableBtnClick]', data, type);
+			switch (type) {
+				case 'edit':
+					this.reset();
+					this.editMode = 'edit';
+					this.form.id = data.id;
+					this.editVisible = true;
+					this.$nextTick(() => {
+						this.$refs['drawer'].init();
+					});
+					break;
+				case 'delete':
+					this.handleDelete(data);
+					break;
+			}
+		},
+	},
+};
+</script>

src/views/core/base/equipmentType/index.vue

@@ -0,0 +1,299 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				: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" :dataForm="form" :rows="rows" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+
+import {
+	createEquipmentType,
+	updateEquipmentType,
+	deleteEquipmentType,
+	getEquipmentType,
+	getEquipmentTypePage,
+	exportEquipmentTypeExcel,
+} from '@/api/base/equipmentType';
+
+import { getAccessToken } from '@/utils/auth';
+
+export default {
+	name: 'EquipmentType',
+	components: {},
+	mixins: [basicPageMixin],
+	data() {
+		return {
+			searchBarKeys: ['name'],
+			tableBtn: [
+				this.$auth.hasPermi('base:equipment-type:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment-type:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'name', label: '设备类型名称', align: 'center' },
+				{ prop: 'code', label: '检测类型编码', align: 'center' },
+				{ prop: 'remark', label: '备注', align: 'center' },
+			],
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '设备类型',
+					placeholder: '请输入设备类型名称',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:equipment-type:create')
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:quality-inspection-type:export')
+				// 		? 'button'
+				// 		: '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+			rows: [
+				[
+					{
+						input: true,
+						label: '设备类型名称',
+						prop: 'name',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// bind: {
+						// 	disabled: true, // some condition, like detail mode...
+						// }
+					},
+					{
+						input: true,
+						label: '设备类型编码',
+						prop: 'code',
+						url: '/base/equipment-type/getCode',
+					},
+				],
+				[
+					{
+						select: true,
+						label: '父类',
+						prop: 'parentId',
+						url: '/base/equipment-type/page?pageNo=1&pageSize=100',
+					},
+					{
+						upload: true,
+						label: '上传资料',
+						prop: 'uploadFiles',
+						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
+						bind: {
+							headers: { Authorization: 'Bearer ' + getAccessToken() },
+							'show-file-list': false,
+						},
+					},
+				],
+				[{ input: true, label: '备注', prop: 'remark' }],
+			],
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				name: '',
+			},
+			// 表单参数
+			form: {},
+		};
+	},
+	watch: {
+		// form: {
+		// 	handler: function (val, oldVal) {
+		// 		console.log('[watch:form]', val, oldVal);
+		// 	},
+		// 	deep: true,
+		// },
+	},
+	created() {
+		this.getList();
+	},
+	methods: {
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			getEquipmentTypePage(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 = {
+				id: undefined,
+				code: undefined,
+				name: undefined,
+				parentId: undefined,
+				remark: undefined,
+				fileNames: [],
+				fileUrls: [],
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加设备类型';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipmentType(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) {
+					updateEquipmentType(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipmentType(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?')
+				.then(function () {
+					return deleteEquipmentType(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有设备类型数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentTypeExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '设备类型.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>

src/views/energy/analysis/contrastAnalysis/components/barChart.vue

@@ -0,0 +1,98 @@
+<template>
+  <div 
+    id="analysischartBar"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "BarChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartBar')
+      this.chart = echarts.init(this.chartDom)
+      let tempArr = []
+      let xData = []
+      let yData = []
+      let legendData = []
+      if (this.chartData.length === 0) {
+        return false
+      } else {
+        tempArr = this.chartData[0].trendRespVOList
+      }
+      for (let k = 0; k < tempArr.length; k++) {
+        xData.push(tempArr[k].time)
+      }
+      for (let i = 0; i < this.chartData.length; i++) {
+        let obj = {
+          name: this.chartData[i].objName + this.chartData[i].objCode,
+          type: 'bar',
+          data: []
+        }
+        legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
+        let temp = this.chartData[i].trendRespVOList
+        for (let j = 0; j < temp.length; j++) {
+          let num = temp[j].useNum ? temp[j].useNum : 0
+          obj.data.push(num)
+        }
+        yData.push(obj)
+      }
+      var option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: legendData
+        },
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: yData
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/contrastAnalysis/components/lineChart.vue

@@ -0,0 +1,100 @@
+<template>
+  <div 
+    id="analysischartLine"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "LineChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartLine')
+      this.chart = echarts.init(this.chartDom)
+      let tempArr = []
+      let xData = []
+      let yData = []
+      let legendData = []
+      if (this.chartData.length === 0) {
+        return false
+      } else {
+        tempArr = this.chartData[0].trendRespVOList
+      }
+      for (let k = 0; k < tempArr.length; k++) {
+        xData.push(tempArr[k].time)
+      }
+      for (let i = 0; i < this.chartData.length; i++) {
+        let obj = {
+          name: this.chartData[i].objName + this.chartData[i].objCode,
+          type: 'line',
+          stack: 'Total',
+          data: []
+        }
+        legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
+        let temp = this.chartData[i].trendRespVOList
+        for (let j = 0; j < temp.length; j++) {
+          let num = temp[j].useNum ? temp[j].useNum : 0
+          obj.data.push(num)
+        }
+        yData.push(obj)
+      }
+
+      var option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: legendData
+        },
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: yData
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/contrastAnalysis/components/searchArea.vue

@@ -0,0 +1,403 @@
+<template>
+  <el-form :inline="true" class="demo-form-inline">
+    <el-form-item label="能源类型">
+      <el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
+        <el-option
+          v-for="item in energyTypeList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间维度">
+      <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
+        <el-option
+          v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间范围">
+      <div v-show="queryParams.timeDim === '1'">
+        <el-date-picker
+          v-model="timeValue"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd HH:mm"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          popper-class="noneMinute"
+          @change="timeSelect"
+          :clearable="false"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '2'">
+        <el-date-picker
+          v-model="dateValue"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '3'">
+        <el-date-picker
+          v-model="weekValue1"
+          type="week"
+          format="yyyy 第 WW 周"
+          style='width:150px;'
+          :picker-options="pickerOptionsWeek"
+          @change="startWeek"
+          :clearable="false"
+          placeholder="选择周">
+        </el-date-picker>-
+        <el-date-picker
+          v-model="weekValue2"
+          type="week"
+          format="yyyy 第 WW 周"
+          :picker-options="pickerOptionsWeek"
+          style='width:150px;'
+          @change="endWeek"
+          :clearable="false"
+          placeholder="选择周">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '4'">
+        <el-date-picker
+          v-model="monthValue"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="timestamp"
+          :clearable="false"
+          :picker-options="pickerOptions"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '5'">
+        <el-date-picker
+          style='width:100px;'
+          v-model="yearValue1"
+          type="year"
+          :picker-options="pickerOptions"
+          value-format="timestamp"
+          placeholder="选择年"
+          @change="startYear"
+          :clearable="false"
+        >
+        </el-date-picker>-
+        <el-date-picker
+          style='width:100px;'
+          v-model="yearValue2"
+          type="year"
+          :picker-options="pickerOptions"
+          value-format="timestamp"
+          placeholder="选择年"
+          @change="endYear"
+          :clearable="false"
+        >
+        </el-date-picker>
+      </div>
+    </el-form-item>
+    <el-form-item label="对象维度">
+      <el-select v-model="queryParams.objType" placeholder="请选择" style="width: 80px;" @change="selectObjs">
+        <el-option
+          v-for="item in getDictDatas(this.DICT_TYPE.OBJECT_TYPE)"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="对象选择">
+      <el-select v-model="queryParams.objIds" placeholder="请选择" multiple collapse-tags style="width: 200px;">
+        <el-option
+          v-for="item in objectList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+          <span style="float: left">{{ item.name }}</span>
+          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="search">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getEnergyTypeListAll } from "@/api/base/energyType"
+import { getLineAll } from "@/api/base/productionLine"
+import { getWorkShopAll } from "@/api/base/workshopSection"
+import { getEquipmentAll } from "@/api/base/equipment"
+import moment from 'moment'
+export default {
+  name: 'searchArea',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        energyTypeId: null,
+        objIds: [],
+        objType: '',
+        timeDim: null,
+        startTime: null,
+        endTime: null
+      },
+      timeValue: [],// 最大7天只能整点
+      dateValue: [],// 最大30天
+      weekValue1: null,//最多24周
+      weekValue2: null,
+      monthValue: [],//最多24月
+      yearValue1: null,//最多10年
+      yearValue2: null,
+      energyTypeList: [],
+      objectList: [],
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now()
+        }
+      },
+      pickerOptionsWeek: {
+        disabledDate(time) {
+          let day = Date.now()
+          let limitTime = moment(day).day(-1)
+          return time.getTime() > new Date(limitTime).getTime()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getTypeList()
+    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
+  },
+  methods: {
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.energyTypeList = res.data || []
+      })
+    },
+    // 范围选择器
+    timeSelect() {
+      switch (this.queryParams.timeDim) {
+        case '1':
+          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
+            this.$modal.msgError('最大时间范围为7天，请重新选择')
+            this.timeValue = []
+          }
+          break
+        case '2':
+          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
+            this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
+            this.dateValue = []
+          }
+          break
+        case '4':
+          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
+            this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
+            this.monthValue = []
+          }
+          break
+          default:
+      }
+    },
+    // 年选择器
+    startYear() {
+      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
+        this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
+        this.yearValue1 = null
+        return false
+      }
+      if (this.yearValue1 && this.yearValue2) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
+          this.yearValue1 = null
+          return false
+        }
+      }
+    },
+    endYear() {
+      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
+        this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
+        this.yearValue2 = null
+        return false
+      }
+      if (this.yearValue1 && this.yearValue2) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
+          this.yearValue2 = null
+          return false
+        }
+      }
+    },
+    // 周选择器
+    startWeek() {
+      if (this.weekValue1 && this.weekValue2) {
+        let a = new Date(this.weekValue1).getTime()
+        let b = new Date(this.weekValue2).getTime()
+        if (a > b) {
+          this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
+          this.weekValue1 = null
+          return false
+        }
+        if (b - a > 167*24*3600000) {
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
+          this.weekValue1 = null
+          return false
+        }
+      }
+    },
+    endWeek() {
+      if (this.weekValue1 && this.weekValue2) {
+        let a = new Date(this.weekValue1).getTime()
+        let b = new Date(this.weekValue2).getTime()
+        if (a > b) {
+          this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
+          this.weekValue2 = null
+          return false
+        }
+        if (b - a > 167*24*3600000) {
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
+          this.weekValue2 = null
+          return false
+        }
+      }
+    },
+    // 对象维度
+    selectObjs(val) {
+      console.log(val)
+      switch (val) {
+        case '1':
+          getLineAll().then(res => {
+            this.objectList = res.data || []
+            this.queryParams.objIds = []
+          })
+          break;
+        case '2':
+          getWorkShopAll().then(res => {
+            this.objectList = res.data || []
+            this.queryParams.objIds = []
+          })
+          break;
+        default:
+          getEquipmentAll().then(res => {
+            this.objectList = res.data || []
+            this.queryParams.objIds = []
+          })
+      }
+    },
+    // 查询
+    search() {
+      if (!this.queryParams.energyTypeId) {
+        this.$modal.msgError('请选择能源类型')
+        return false
+      }
+      if (!this.queryParams.timeDim) {
+        this.$modal.msgError('请选择时间维度')
+        return false
+      }
+      switch (this.queryParams.timeDim) {
+        case '1':
+          if (this.timeValue.length > 0) {
+            this.queryParams.startTime = this.timeValue[0]
+            this.queryParams.endTime = this.timeValue[1] // 不用转
+          } else {
+            this.$modal.msgError('时间范围不能为空')
+            return false
+          }
+          break
+        case '2':
+          if (this.dateValue.length > 0) {
+            this.queryParams.startTime = this.dateValue[0]
+            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
+          } else {
+            this.$modal.msgError('日范围不能为空')
+            return false
+          }
+          break
+        case '3':
+          if (this.weekValue1 && this.weekValue2) {
+            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
+            let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
+            this.queryParams.startTime = new Date(a).getTime()
+            this.queryParams.endTime = new Date(b).getTime()
+          } else {
+            this.$modal.msgError('周范围不能为空')
+            return false
+          }
+          break
+        case '4':// 转为本月最后一天的最后一秒
+          if (this.monthValue.length > 0) {
+            this.queryParams.startTime = this.monthValue[0]
+            this.queryParams.endTime = this.transformTime(this.monthValue[1])
+          } else {
+            this.$modal.msgError('月范围不能为空')
+            return false
+          }
+          break
+        default://本年最后一天
+          if (this.yearValue1 && this.yearValue2) {
+            if (this.yearValue2 < this.yearValue1) {
+              this.$modal.msgError('结束时间不能早于开始时间')
+              return false
+            } else {
+              this.queryParams.startTime = this.yearValue1
+              this.queryParams.endTime = this.transformYear(this.yearValue2)
+            }
+          } else {
+            this.$modal.msgError('年范围不能为空')
+            return false
+          }
+      }
+      if (!this.queryParams.objType) {
+        this.$modal.msgError('请选择对象维度')
+        return false
+      }
+      if (this.queryParams.objIds.length === 0) {
+        this.$modal.msgError('请选择对象')
+        return false
+      }
+      this.queryParams.startTime = this.queryParams.startTime + ''
+      this.queryParams.endTime = this.queryParams.endTime + ''
+      console.log(this.queryParams)
+      this.$emit('submit', this.queryParams)
+    },
+    transformTime(timeStamp) {// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let month = moment(timeStamp).format('MM')
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    },
+    transformYear(timeStamp) {// 本年最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let newData = year+'-12-31 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    }
+  }
+}
+</script>
+<style>
+/* 时间整点 */
+.noneMinute .el-time-spinner__wrapper {
+  width: 100%;
+}
+.noneMinute .el-scrollbar:nth-of-type(2) {
+  display: none;
+}
+</style>

src/views/energy/analysis/contrastAnalysis/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <search-area @submit="getList"/>
+    <el-tabs v-model="activeName" @tab-click="switchChart">
+      <el-tab-pane label="柱状图" name="bar">
+        <bar-chart ref="analysisBarChart" :chartData="chartData" />
+      </el-tab-pane>
+      <el-tab-pane label="折线图" name="line">
+        <line-chart ref="analysisLineChart" :chartData="chartData"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import { getCompare } from "@/api/analysis/energyAnalysis"
+import SearchArea from "./components/searchArea"
+import BarChart from "./components/barChart"
+import LineChart from "./components/lineChart"
+// import moment from 'moment'
+export default {
+  name: 'ContrastAnalysis',
+  components: { SearchArea, BarChart, LineChart },
+  data() {
+    return {
+      activeName: 'bar',
+      chartData: []
+    }
+  },
+  mounted() {},
+  methods: {
+    getList(params) {
+      getCompare({ ...params }).then((res) => {
+        console.log(res)
+        if (res.code === 0) {
+          this.chartData = res.data || []
+        } else {
+          this.chartData = []
+        }
+      })
+    },
+    switchChart() {
+      if (this.activeName === 'bar') {
+        this.$nextTick((res) => {
+          this.$refs.analysisBarChart.getChart()
+        })
+      } else {
+        this.$nextTick((res) => {
+          this.$refs.analysisLineChart.getChart()
+        })
+      }
+    }
+  }
+}
+</script>

src/views/energy/analysis/qoqAnalysis/components/lineChart.vue

@@ -0,0 +1,109 @@
+<template>
+  <div 
+    id="analysischartLine"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "LineChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(350)
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(350)
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartLine')
+      this.chart = echarts.init(this.chartDom)
+      if (this.chartData.length === 0) {
+        return false
+      }
+      let arr = this.chartData[0].type // [水，电，煤]
+      let keys = Object.keys(this.chartData[0])
+      let yData = [
+        {
+          name: '本期',
+          type: 'bar',
+          data: []
+        },
+        {
+          name: '上期',
+          type: 'bar',
+          data: []
+        }
+      ]
+      for (let j = 0; j < arr.length; j++) {
+        for (let k = 0; k < keys.length; k++) {
+          if (keys[k].indexOf(arr[j]+'_上期') > -1) {
+            yData[1].data.push(this.chartData[0][keys[k]])
+          }
+          if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
+            yData[0].data.push(this.chartData[0][keys[k]])
+          }
+        }
+      }
+      var option = {
+        // title: {
+        //   text: 'World Population'
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        xAxis: {
+          type: 'category',
+          data: arr
+        },
+        series: yData
+      }
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/qoqAnalysis/components/searchArea.vue

@@ -0,0 +1,181 @@
+<template>
+  <el-form :inline="true" class="demo-form-inline">
+    <el-form-item label="对象选择">
+      <el-cascader
+        v-model="objArr"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        clearable></el-cascader>
+    </el-form-item>
+    <el-form-item label="时间维度">
+      <el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;">
+        <el-option
+          v-for="item in timeType"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+          :clearable="false">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间">
+      <div v-show="queryParams.type === 1">
+        <el-date-picker
+          v-model="monthValue"
+          type="month"
+          :picker-options="pickerOptions"
+          @change="selectTime"
+          :clearable="false"
+          placeholder="选择月">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.type === 2">
+        <el-date-picker
+          v-model="weekValue"
+          type="week"
+          format="yyyy 第 WW 周"
+          :picker-options="pickerOptionsWeek"
+          @change="selectTime"
+          :clearable="false"
+          placeholder="选择周">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.type === 3">
+        <el-date-picker
+          v-model="dateValue"
+          type="date"
+          :picker-options="pickerOptions"
+          @change="selectTime"
+          :clearable="false"
+          placeholder="选择日">
+        </el-date-picker>
+      </div>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="search">查询</el-button>
+    </el-form-item>
+    <el-form-item>
+      <span class="separateStyle"></span>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="exportData" plain>导出</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getTree } from '@/api/base/factory'
+import moment from 'moment'
+export default {
+  name: 'searchArea',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        type: 1,
+        searchTime: null,
+        objId: null
+      },
+      timeType: [
+        {id: 1, name: '月'},
+        {id: 2, name: '周'},
+        {id: 3, name: '日'}
+      ],
+      monthValue: '',
+      weekValue: '',
+      dateValue: '',
+      objArr: [],
+      objList: [],
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now()
+        }
+      },
+      pickerOptionsWeek: {
+        disabledDate(time) {
+          let day = Date.now()
+          let limitTime = moment(day).day(-1)
+          return time.getTime() > new Date(limitTime).getTime()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getObjTree()
+  },
+  methods: {
+    getObjTree() {
+      getTree().then(res => {
+        this.objList = res.data || []
+      })
+    },
+    selectTime() {
+      switch (this.queryParams.type) {
+        case 1:
+          this.queryParams.searchTime = this.monthValue
+          break;
+        case 2:
+          this.queryParams.searchTime = this.weekValue
+          break;
+        default:
+          this.queryParams.searchTime = this.dateValue
+      }
+    },
+    // 查询
+    search() {
+      if (!this.objArr.length === 0) {
+        this.$modal.msgError('请选择对象')
+        return false
+      } else {
+        this.queryParams.objId = this.objArr[this.objArr.length-1]
+      }
+      if (!this.queryParams.type) {
+        this.$modal.msgError('请选择时间维度')
+        return false
+      }
+      if (!this.queryParams.searchTime) {
+        this.$modal.msgError('请选择时间')
+        return false
+      }
+      switch (this.queryParams.type) {
+        case 1:
+          this.queryParams.searchTime = this.transformTime(this.monthValue)
+          break;
+        case 2:
+          let value = moment(this.weekValue).day(6).format('YYYY-MM-DD') + ' 23:59:59'
+          this.queryParams.searchTime = new Date(value).getTime()
+          break;
+        default:
+           let value2 = moment(this.dateValue).format('YYYY-MM-DD') + ' 23:59:59'
+           this.queryParams.searchTime = new Date(value2).getTime()
+      }
+      this.$emit('submit', this.queryParams)
+    },
+    exportData() {
+      this.$emit('exportD')
+    },
+    transformTime(timeStamp) {// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let month = moment(timeStamp).format('MM')
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    }
+  }
+}
+</script>
+<style>
+/* 级联选择器 */
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+</style>
+<style scoped>
+.separateStyle {
+  display: inline-block;
+  width: 1px;
+  height: 24px;
+  background: #E8E8E8;
+  vertical-align: middle;
+}
+</style>

src/views/energy/analysis/qoqAnalysis/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <search-area @submit="getList" @exportD="exportData"/>
+    <!-- 表格 -->
+    <base-table
+      :table-props="tableProps"
+      :table-data="list"
+      class="qoq-out-table"
+    />
+    <div style='width: 100%;height: 300px;padding-top: 30px;'>
+      <line-chart ref="analysisLineChart" :chartData="chartData"/>
+    </div>
+  </div>
+</template>
+<script>
+import { getQoq } from "@/api/analysis/energyAnalysis"
+import SearchArea from "./components/searchArea"
+import LineChart from "./components/lineChart"
+import FileSaver from "file-saver"
+import * as XLSX from 'xlsx/xlsx.mjs'
+export default {
+  name: 'QoqAnalysis',
+  components: { SearchArea, LineChart },
+  data() {
+    return {
+      chartData: [],
+      tableProps: [],
+      list: []
+    }
+  },
+  methods: {
+    getList(params) {
+      getQoq({ ...params }).then((res) => {
+        if (res.code === 0 && res.data) {
+          this.getTableList(res.data)
+        } else {
+          this.chartData = []
+          this.list = []
+        }
+      })
+    },
+    getTableList(arr) {
+      let data = arr.data
+      let nameData = arr.nameData
+      let tempX = []
+      data[0].data.map((item) => {
+        let obj = {}
+        obj.prop = item.dynamicName
+        obj.label = item.dynamicName
+        obj.id = item.id
+        obj.children = []
+        tempX.push(obj)
+      })
+      for (let i = 0; i < nameData.length; i++) {
+        for (let j = 0; j < tempX.length; j++) {
+          if (tempX[j].id === nameData[i].parentId) {
+            let obj = {}
+            obj.prop = tempX[j].prop + '_' + nameData[i].name
+            obj.label = nameData[i].name
+            tempX[j].children.push(obj)
+          }
+        }
+      }
+      this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
+      // 数据
+      this.list = []
+      for (let k = 0; k < data.length; k++) {
+        let obj = {}
+        obj.time = data[k].time
+        let arr1 = data[k].data
+        obj.type = []
+        for (let q = 0; q < arr1.length; q++) {
+          let name = arr1[q].dynamicName
+          obj.type.push(name)
+          let arr2 = arr1[q].children
+          for (let p = 0; p < arr2.length; p++) {
+            let prop = name + '_' + arr2[p].dynamicName
+            obj[prop] = arr2[p].dynamicValue
+          }
+        }
+        this.list.push(obj)
+      }
+      this.chartData = this.list
+    },
+    exportData() {
+      if (this.list.length > 0) {
+        var wb = XLSX.utils.table_to_book(document.querySelector(".qoq-out-table"))
+        var wbout = XLSX.write(wb, {
+            bookType: "xlsx",
+            bookSST: true,
+            type: "array"
+        })
+        try {
+            FileSaver.saveAs(
+            new Blob([wbout], { type: "application/octet-stream" }),
+            "环比分析.xlsx"
+            )
+        } catch (e) {
+            if (typeof console !== "undefined") console.log(e, wbout);
+        }
+        return wbout
+      } else {
+        this.$modal.msgWarning("暂无数据导出")
+      }
+    }
+  }
+}
+</script>

src/views/energy/analysis/trendAnalysis/components/barChart.vue

@@ -0,0 +1,77 @@
+<template>
+  <div 
+    id="analysischartBar"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "BarChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartBar')
+      this.chart = echarts.init(this.chartDom)
+      let xData = []
+      let yData = []
+      for (let i = 0; i < this.chartData.length; i++) {
+        xData.push(this.chartData[i].time)
+        yData.push(this.chartData[i].useNum)
+      }
+      var option = {
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yData,
+            type: 'bar'
+          }
+        ]
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/trendAnalysis/components/lineChart.vue

@@ -0,0 +1,78 @@
+<template>
+  <div 
+    id="analysischartLine"
+    style="width: 100%"
+    :style="{ height: chartHeight + 'px' }"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "LineChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartLine')
+      this.chart = echarts.init(this.chartDom)
+      let xData = []
+      let yData = []
+      for (let i = 0; i < this.chartData.length; i++) {
+        xData.push(this.chartData[i].time)
+        yData.push(this.chartData[i].useNum)
+      }
+
+      var option = {
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: yData,
+            type: 'line'
+          }
+        ]
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/trendAnalysis/components/searchArea.vue

@@ -0,0 +1,364 @@
+<template>
+  <el-form :inline="true" class="demo-form-inline">
+    <el-form-item label="能源类型">
+      <el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
+        <el-option
+          v-for="item in energyTypeList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="对象选择">
+      <el-cascader
+        v-model="objArr"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        clearable></el-cascader>
+    </el-form-item>
+    <el-form-item label="时间维度">
+      <el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
+        <el-option
+          v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间范围">
+      <div v-show="queryParams.timeDim === '1'">
+        <el-date-picker
+          v-model="timeValue"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd HH:mm"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          popper-class="noneMinute"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '2'">
+        <el-date-picker
+          v-model="dateValue"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '3'">
+        <el-date-picker
+          v-model="weekValue1"
+          type="week"
+          format="yyyy 第 WW 周"
+          style='width:150px;'
+          :picker-options="pickerOptionsWeek"
+          @change="startWeek"
+          placeholder="选择周">
+        </el-date-picker>-
+        <el-date-picker
+          v-model="weekValue2"
+          type="week"
+          format="yyyy 第 WW 周"
+          :picker-options="pickerOptionsWeek"
+          style='width:150px;'
+          @change="endWeek"
+          placeholder="选择周">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '4'">
+        <el-date-picker
+          v-model="monthValue"
+          type="monthrange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="timestamp"
+          :picker-options="pickerOptions"
+          @change="timeSelect"
+          >
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.timeDim === '5'">
+        <el-date-picker
+          style='width:100px;'
+          v-model="yearValue1"
+          type="year"
+          :picker-options="pickerOptions"
+          value-format="timestamp"
+          placeholder="选择年"
+          @change="startYear"
+        >
+        </el-date-picker>-
+        <el-date-picker
+          style='width:100px;'
+          v-model="yearValue2"
+          type="year"
+          :picker-options="pickerOptions"
+          value-format="timestamp"
+          placeholder="选择年"
+          @change="endYear"
+        >
+        </el-date-picker>
+      </div>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="search">查询</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getEnergyTypeListAll } from "@/api/base/energyType"
+import { getTree } from '@/api/base/factory'
+import moment from 'moment'
+export default {
+  name: 'searchArea',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        energyTypeId: null,
+        objId: null,
+        timeDim: null,
+        startTime: null,
+        endTime: null
+      },
+      objArr: [],
+      timeValue: [],// 最大7天只能整点
+      dateValue: [],// 最大30天
+      weekValue1: null,//最多24周
+      weekValue2: null,
+      monthValue: [],//最多24月
+      yearValue1: null,//最多10年
+      yearValue2: null,
+      energyTypeList: [],
+      objList: [],
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now()
+        }
+      },
+      pickerOptionsWeek: {
+        disabledDate(time) {
+          let day = Date.now()
+          let limitTime = moment(day).day(-1)
+          return time.getTime() > new Date(limitTime).getTime()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getTypeList()
+    this.getObjTree()
+    this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
+  },
+  methods: {
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.energyTypeList = res.data || []
+      })
+    },
+    getObjTree() {
+      getTree().then(res => {
+        this.objList = res.data || []
+      })
+    },
+    // 范围选择器
+    timeSelect() {
+      switch (this.queryParams.timeDim) {
+        case '1':
+          if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
+            this.$modal.msgError('最大时间范围为7天，请重新选择')
+            this.timeValue = []
+          }
+          break
+        case '2':
+          if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
+            this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
+            this.dateValue = []
+          }
+          break
+        case '4':
+          if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
+            this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
+            this.monthValue = []
+          }
+          break
+          default:
+      }
+    },
+    // 年选择器
+    startYear() {
+      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
+        this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
+        this.yearValue1 = null
+        return false
+      }
+      if (this.yearValue1 && this.yearValue2) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
+          this.yearValue1 = null
+          return false
+        }
+      }
+    },
+    endYear() {
+      if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
+        this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
+        this.yearValue2 = null
+        return false
+      }
+      if (this.yearValue1 && this.yearValue2) {
+        if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
+          this.$modal.msgError('最大时间范围为10年，请重新选择')
+          this.yearValue2 = null
+          return false
+        }
+      }
+    },
+    // 周选择器
+    startWeek() {
+      if (this.weekValue1 && this.weekValue2) {
+        let a = new Date(this.weekValue1).getTime()
+        let b = new Date(this.weekValue2).getTime()
+        if (a > b) {
+          this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
+          this.weekValue1 = null
+          return false
+        }
+        if (b - a > 167*24*3600000) {
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
+          this.weekValue1 = null
+          return false
+        }
+      }
+    },
+    endWeek() {
+      if (this.weekValue1 && this.weekValue2) {
+        let a = new Date(this.weekValue1).getTime()
+        let b = new Date(this.weekValue2).getTime()
+        if (a > b) {
+          this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
+          this.weekValue2 = null
+          return false
+        }
+        if (b - a > 167*24*3600000) {
+          this.$modal.msgError('最大时间范围为24周，请重新选择')
+          this.weekValue2 = null
+          return false
+        }
+      }
+    },
+    // 查询
+    search() {
+      if (!this.queryParams.energyTypeId) {
+        this.$modal.msgError('请选择能源类型')
+        return false
+      }
+      if (!this.objArr.length === 0) {
+        this.$modal.msgError('请选择对象')
+        return false
+      } else {
+        this.queryParams.objId = this.objArr[this.objArr.length-1]
+      }
+      if (!this.queryParams.timeDim) {
+        this.$modal.msgError('请选择时间维度')
+        return false
+      }
+      switch (this.queryParams.timeDim) {
+        case '1':
+          if (this.timeValue.length > 0) {
+            this.queryParams.startTime = this.timeValue[0]
+            this.queryParams.endTime = this.timeValue[1] // 不用转
+          } else {
+            this.$modal.msgError('时间范围不能为空')
+            return false
+          }
+          break
+        case '2':
+          if (this.dateValue.length > 0) {
+            this.queryParams.startTime = this.dateValue[0]
+            this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
+          } else {
+            this.$modal.msgError('日范围不能为空')
+            return false
+          }
+          break
+        case '3':
+          if (this.weekValue1 && this.weekValue2) {
+            let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
+            let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
+            this.queryParams.startTime = new Date(a).getTime()
+            this.queryParams.endTime = new Date(b).getTime()
+          } else {
+            this.$modal.msgError('周范围不能为空')
+            return false
+          }
+          break
+        case '4':// 转为本月最后一天的最后一秒
+          if (this.monthValue.length > 0) {
+            this.queryParams.startTime = this.monthValue[0]
+            this.queryParams.endTime = this.transformTime(this.monthValue[1])
+          } else {
+            this.$modal.msgError('月范围不能为空')
+            return false
+          }
+          break
+        default://本年最后一天
+          if (this.yearValue1 && this.yearValue2) {
+            if (this.yearValue2 < this.yearValue1) {
+              this.$modal.msgError('结束时间不能早于开始时间')
+              return false
+            } else {
+              this.queryParams.startTime = this.yearValue1
+              this.queryParams.endTime = this.transformYear(this.yearValue2)
+            }
+          } else {
+            this.$modal.msgError('年范围不能为空')
+            return false
+          }
+      }
+      this.queryParams.startTime = this.queryParams.startTime + ''
+      this.queryParams.endTime = this.queryParams.endTime + ''
+      this.$emit('submit', this.queryParams)
+    },
+    transformTime(timeStamp) {// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let month = moment(timeStamp).format('MM')
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    },
+    transformYear(timeStamp) {// 本年最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let newData = year+'-12-31 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    }
+  }
+}
+</script>
+<style>
+/* 级联选择器 */
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+/* 时间整点 */
+.noneMinute .el-time-spinner__wrapper {
+  width: 100%;
+}
+.noneMinute .el-scrollbar:nth-of-type(2) {
+  display: none;
+}
+</style>

src/views/energy/analysis/trendAnalysis/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <search-area @submit="getList"/>
+    <el-tabs v-model="activeName" @tab-click="switchChart">
+      <el-tab-pane label="柱状图" name="bar">
+        <bar-chart ref="analysisBarChart" :chartData="chartData" />
+      </el-tab-pane>
+      <el-tab-pane label="折线图" name="line">
+        <line-chart ref="analysisLineChart" :chartData="chartData"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import { getEnergyTrend } from "@/api/analysis/energyAnalysis"
+import SearchArea from "./components/searchArea"
+import BarChart from "./components/barChart"
+import LineChart from "./components/lineChart"
+// import moment from 'moment'
+export default {
+  name: 'TrendAnalysis',
+  components: { SearchArea, BarChart, LineChart },
+  data() {
+    return {
+      activeName: 'bar',
+      chartData: []
+    }
+  },
+  mounted() {},
+  methods: {
+    getList(params) {
+      getEnergyTrend({ ...params }).then((res) => {
+        if (res.code === 0) {
+          this.chartData = res.data
+        } else {
+          this.chartData = []
+        }
+      })
+      // getEnergyTrend({
+      //   energyTypeId: "1681183397517406210",
+      //   objId: "1679031282510532610",
+      //   timeDim: "2",
+      //   startTime: "1690732800000",
+      //   endTime: "1690992000000"
+      // }).then((res) => {
+      //   console.log(res)
+      //   this.chartData = res.data
+      // })
+    },
+    switchChart() {
+      if (this.activeName === 'bar') {
+        this.$nextTick((res) => {
+          this.$refs.analysisBarChart.getChart()
+        })
+      } else {
+        this.$nextTick((res) => {
+          this.$refs.analysisLineChart.getChart()
+        })
+      }
+    }
+  }
+}
+</script>

src/views/energy/analysis/yoyAnalysis/components/lineChart.vue

@@ -0,0 +1,104 @@
+<template>
+  <div 
+    id="analysischartLine"
+    style="width: 100%;height: 100%;"
+  ></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/chartMixins/resize'
+export default {
+  name: "LineChart",
+  mixins: [resize],
+  data() {
+    return {
+      chartDom: '',
+      chart: '',
+      chartHeight: this.tableHeight(214) - 70
+    }
+  },
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.getChart()
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.chartHeight = this.tableHeight(214) - 70
+    })
+  },
+  methods: {
+    getChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+      this.chartDom = document.getElementById('analysischartLine')
+      this.chart = echarts.init(this.chartDom)
+      if (this.chartData.length === 0) {
+        return false
+      }
+      let xData = []
+      let arr = this.chartData[0].type
+      let keys = Object.keys(this.chartData[0])
+      let yData = []
+      for (let j = 0; j < arr.length; j++) {
+        for (let k = 0; k < keys.length; k++) {
+          if (keys[k].indexOf(arr[j]+'_上年同期') > -1 || keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
+            let obj = {
+              name: '',
+              type: 'line',
+              stack: 'Total',
+              data: []
+            }
+            obj.name = keys[k]
+            yData.push(obj)
+          }
+        }
+      }
+      for (let i = 0; i < this.chartData.length; i++) {
+        xData.push(this.chartData[i].time)
+        for (let p = 0; p < yData.length; p++) {
+          yData[p].data.push(this.chartData[i][ yData[p].name])
+        }
+      }
+      var option = {
+        legend: {
+          data: keys
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: yData
+      };
+
+      option && this.chart.setOption(option);
+    }
+  }
+}
+</script>

src/views/energy/analysis/yoyAnalysis/components/searchArea.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-form :inline="true" class="demo-form-inline">
+    <el-form-item label="对象选择">
+      <el-cascader
+        v-model="objArr"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        clearable></el-cascader>
+    </el-form-item>
+    <el-form-item label="时间维度">
+      <el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;">
+        <el-option
+          v-for="item in timeType"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+          :clearable="false">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时间">
+      <div v-show="queryParams.type === 1 || queryParams.type === 2">
+        <el-date-picker
+          v-model="yearValue"
+          type="year"
+          :picker-options="pickerOptions"
+          @change="selectTime"
+          :clearable="false"
+          placeholder="选择年">
+        </el-date-picker>
+      </div>
+      <div v-show="queryParams.type === 3">
+        <el-date-picker
+          v-model="yearMonth"
+          type="month"
+          :picker-options="pickerOptions"
+          @change="selectTime"
+          :clearable="false"
+          placeholder="选择月">
+        </el-date-picker>
+      </div>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="search">查询</el-button>
+    </el-form-item>
+    <el-form-item>
+      <span class="separateStyle"></span>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="exportData" plain>导出</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import { getTree } from '@/api/base/factory'
+import moment from 'moment'
+export default {
+  name: 'searchArea',
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        type: 1, // 1季度2月3日
+        searchTime: null,
+        objId: null
+      },
+      timeType: [
+        {id: 1, name: '季度'},
+        {id: 2, name: '月'},
+        {id: 3, name: '日'}
+      ],
+      yearValue: '',
+      yearMonth: '',
+      objArr: [],
+      objList: [],
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getObjTree()
+  },
+  methods: {
+    getObjTree() {
+      getTree().then(res => {
+        this.objList = res.data || []
+      })
+    },
+    selectTime() {
+      if (this.queryParams.type === 3) {
+        this.queryParams.searchTime = this.yearMonth
+      } else {
+        this.queryParams.searchTime = this.yearValue
+      }
+    },
+    // 查询
+    search() {
+      if (!this.objArr.length === 0) {
+        this.$modal.msgError('请选择对象')
+        return false
+      } else {
+        this.queryParams.objId = this.objArr[this.objArr.length-1]
+      }
+      if (!this.queryParams.type) {
+        this.$modal.msgError('请选择时间维度')
+        return false
+      }
+      if (!this.queryParams.searchTime) {
+        this.$modal.msgError('请选择时间')
+        return false
+      }
+      if (this.queryParams.type === 3) {
+        this.queryParams.searchTime = this.transformTime(this.yearMonth) + ''
+      } else {
+        this.queryParams.searchTime = this.transformYear(this.yearValue) + ''
+      }
+      this.$emit('submit', this.queryParams)
+    },
+    exportData() {
+      this.$emit('exportD')
+    },
+    transformTime(timeStamp) {// 本月最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let month = moment(timeStamp).format('MM')
+      let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    },
+    transformYear(timeStamp) {// 本年最后一天
+      let year = moment(timeStamp).format('YYYY')
+      let newData = year+'-12-31 23:59:59'
+      let value = new Date(newData).getTime()
+      return value
+    }
+  }
+}
+</script>
+<style>
+/* 级联选择器 */
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+</style>
+<style scoped>
+.separateStyle {
+  display: inline-block;
+  width: 1px;
+  height: 24px;
+  background: #E8E8E8;
+  vertical-align: middle;
+}
+</style>

src/views/energy/analysis/yoyAnalysis/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索工作栏 -->
+    <search-area @submit="getList" @exportD="exportData"/>
+    <div style='width: 100%;height: 300px;'>
+      <line-chart ref="analysisLineChart" :chartData="chartData"/>
+    </div>
+    <!-- 表格 -->
+    <base-table
+      :table-props="tableProps"
+      :table-data="list"
+      :max-height="tableH"
+      class="yoy-out-table"
+    />
+  </div>
+</template>
+<script>
+import { getYoy } from "@/api/analysis/energyAnalysis"
+import SearchArea from "./components/searchArea"
+import LineChart from "./components/lineChart"
+import FileSaver from "file-saver"
+import * as XLSX from 'xlsx/xlsx.mjs'
+export default {
+  name: 'YoyAnalysis',
+  components: { SearchArea, LineChart },
+  data() {
+    return {
+      chartData: [],
+      tableProps: [],
+      list: [],
+      tableH: this.tableHeight(500)
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(500)
+    })
+  },
+  methods: {
+    getList(params) {
+      getYoy({ ...params }).then((res) => {
+        if (res.code === 0 && res.data) {
+          this.getTableList(res.data)
+        } else {
+          this.chartData = []
+          this.list = []
+        }
+      })
+    },
+    getTableList(arr) {
+      let data = arr.data
+      let nameData = arr.nameData
+      let tempX = []
+      data[0].data.map((item) => {
+        let obj = {}
+        obj.prop = item.dynamicName
+        obj.label = item.dynamicName
+        obj.id = item.id
+        obj.children = []
+        tempX.push(obj)
+      })
+      for (let i = 0; i < nameData.length; i++) {
+        for (let j = 0; j < tempX.length; j++) {
+          if (tempX[j].id === nameData[i].parentId) {
+            let obj = {}
+            obj.prop = tempX[j].prop + '_' + nameData[i].name
+            obj.label = nameData[i].name
+            tempX[j].children.push(obj)
+          }
+        }
+      }
+      this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
+      // 数据
+      this.list = []
+      for (let k = 0; k < data.length; k++) {
+        let obj = {}
+        obj.time = data[k].time
+        let arr1 = data[k].data
+        obj.type = []
+        for (let q = 0; q < arr1.length; q++) {
+          let name = arr1[q].dynamicName
+          obj.type.push(name)
+          let arr2 = arr1[q].children
+          for (let p = 0; p < arr2.length; p++) {
+            let prop = name + '_' + arr2[p].dynamicName
+            obj[prop] = arr2[p].dynamicValue
+          }
+        }
+        this.list.push(obj)
+      }
+      this.chartData = this.list
+    },
+    exportData() {
+      if (this.list.length > 0) {
+        var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table"))
+        var wbout = XLSX.write(wb, {
+            bookType: "xlsx",
+            bookSST: true,
+            type: "array"
+        })
+        try {
+            FileSaver.saveAs(
+            new Blob([wbout], { type: "application/octet-stream" }),
+            "同比分析.xlsx"
+            )
+        } catch (e) {
+            if (typeof console !== "undefined") console.log(e, wbout);
+        }
+        return wbout
+      } else {
+        this.$modal.msgWarning("暂无数据导出")
+      }
+    }
+  }
+}
+</script>

src/views/energy/base/energyPlcConnect/index.vue

@@ -50,7 +50,7 @@ import { getEnergyPlcConnectPage, deleteEnergyPlcConnect } from "@/api/base/ener
 // import { publicFormatter } from '@/utils/dict'
 import { getTree } from '@/api/base/factory'
 import { getEnergyTypeListAll } from '@/api/base/energyType'
-import EnergyPlcConnectAdd from './components/energyPlcConnectAdd.vue'
+import EnergyPlcConnectAdd from './components/energyPlcConnectAdd'
 import EnergyPlcParam from './components/energyPlcParam'
 const tableProps = [
   {
@@ -61,6 +61,10 @@ const tableProps = [
     prop: 'objCode',
     label: '对象编码'
   },
+  {
+    prop: 'remark',
+    label: '对象备注'
+  },
   {
     prop: 'plcTableName', 
     label: '关联表名'
@@ -76,10 +80,6 @@ const tableProps = [
   {
     prop: 'varNum',
     label: '绑定参数数量'
-  },
-  {
-    prop: 'remark',
-    label: '备注'
   }
 ]
 export default {

src/views/energy/base/energyQuantityRealtime/index.vue

@@ -137,6 +137,7 @@ export default {
           this.$modal.confirm('是否确认导出').then(() => {
               return exportEnergyQuantityRealtimeExcel({...this.queryParams});
             }).then(response => {
+              console.log(response)
               this.$download.excel(response, '能源抄表.xls');
             }).catch(() => {})
       }

src/views/energy/monitoring/energyLimit/components/energyLimitAdd.vue

@@ -27,12 +27,12 @@
       </el-select>
     </el-form-item>
     <el-form-item label="监控详细参数" prop="plcParamId" v-if="form.type === 2">
-      <el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;">
+      <el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;" @change="selectDetail">
         <el-option
-          v-for="item in getDictDatas(DICT_TYPE.ENERGY_UNIT)"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
+          v-for="item in detailList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
         </el-option>
       </el-select>
     </el-form-item>
@@ -52,7 +52,7 @@
   </el-form>
 </template>
 <script>
-import { getEnergyLimit, updateEnergyLimit, createEnergyLimit } from '@/api/monitoring/energyLimit'
+import { getEnergyLimit, updateEnergyLimit, createEnergyLimit, getEnergyParamList } from '@/api/monitoring/energyLimit'
 export default {
   name: 'energyLimitAdd',
   props: {
@@ -73,6 +73,8 @@ export default {
       form: {
         id: '',
         objectId: '',
+        objectType: '',
+        energyTypeId: '',
         type: '',
         plcParamId: '',
         limitType: '',
@@ -84,7 +86,8 @@ export default {
         objectId: [{ required: true, message: '对象不能为空', trigger: 'change' }],
         energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
         type: [{ required: true, message: '监控模式不能为空', trigger: 'change' }]
-      }
+      },
+      detailList: []
     }
   },
   methods: {
@@ -95,10 +98,12 @@ export default {
         getEnergyLimit( id ).then((res) => {
           if (res.code === 0) {
             this.form = res.data
+            this.form.plcParamId = res.data.plcParamId || ''
             this.form.limitType = this.form.limitType + ''
-            console.log(this.objList)
             this.objIds = this.changeDetSelect(this.form.objectId, this.objList)
-            console.log(this.objIds)
+            if (this.form.type === 2) {
+              this.getDetailList()
+            }
           }
         })
       } else {
@@ -106,8 +111,25 @@ export default {
         this.form.id = ''
       }
     },
-    typeChange() {
+    // 监控详细参数
+    getDetailList() {
+      getEnergyParamList({
+        objId: this.form.objectId,
+        energyTypeId: this.form.energyTypeId
+      }).then((res) => {
+        if (res.code === 0) {
+          this.detailList = res.data
+        } else {
+          this.detailList = []
+        }
+      })
+    },
+    typeChange(val) {
+      console.log(this.form)
       this.form.plcParamId = ''
+      if (val === 2) {
+        this.getDetailList()
+      }
     },
     // 递归处理分类回显问题
     changeDetSelect(key, treeData) {
@@ -137,9 +159,16 @@ export default {
       this.form.objectId = val[val.length-1]
       this.form.objectType = val.length-1
     },
+    selectDetail() {
+      this.$forceUpdate()
+    },
     submitForm() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
+          if (this.form.type === 2 && !this.form.plcParamId) {
+            this.$modal.msgError("监控模式为详细时，详细参数为必填");
+            return false
+          }
           // this.form.limitType = Number(this.form.limitType)
           if (this.isEdit) {
             // 编辑
@@ -164,6 +193,8 @@ export default {
     },
     formClear() {
       this.$refs.form.resetFields()
+      this.objIds = ''
+      this.detailList = []
       this.isEdit = false
     }
   }

src/views/energy/monitoring/energyLimit/index.vue

@@ -231,7 +231,7 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除监控参数为"' + row.plcParamName + '"的数据项?').then(function() {
+      this.$modal.confirm('是否确认删除监控对象为"' + row.objName + '"的数据项?').then(function() {
           return deleteEnergyLimit(row.id);
         }).then(() => {
           this.queryParams.pageNo = 1;

src/views/energy/monitoring/energyReport/index.vue

@@ -25,11 +25,10 @@
 </template>
 
 <script>
-import { energyReportPageAuto, energyReportPageExportAuto } from "@/api/monitoring/energyReport";
-import { parseTime } from '@/utils/ruoyi'
+import { energyReportPageAuto, energyReportPageExportAuto } from "@/api/monitoring/energyReport"
 import { getEnergyTypeListAll } from "@/api/base/energyType";
-// import { getTree } from '@/api/base/factory'
 import { publicFormatter } from '@/utils/dict'
+import { parseTime } from '@/utils/ruoyi'
 const tableProps = [
   {
     prop: 'statisticType',
@@ -70,7 +69,7 @@ const tableProps = [
   }
 ]
 export default {
-  name: "EnergyReportSearch",
+  name: "EnergyLimit",
   data() {
     return {
       formConfig: [
@@ -78,7 +77,8 @@ export default {
           type: 'select',
           label: '能源类型',
           selectOptions: [],
-          param: 'energyTypeId'
+          param: 'energyTypeId',
+          filterable: true
         },
         {
           type: 'select',
@@ -93,7 +93,7 @@ export default {
           label: '时间',
           dateType: 'datetimerange',
           format: 'yyyy-MM-dd HH:mm:ss',
-          valueFormat: "yyyy-MM-ddTHH:mm:ss",
+          valueFormat: "timestamp",
           rangeSeparator: '-',
           startPlaceholder: '开始时间',
           endPlaceholder: '结束时间',
@@ -111,7 +111,7 @@ export default {
           type: 'separate'
         },
         {
-          type: this.$auth.hasPermi('monitoring:energy-limit:create') ? 'button' : '',
+          type: this.$auth.hasPermi('monitoring:energy-report:export') ? 'button' : '',
           btnName: '导出',
           name: 'add',
           color: 'primary',
@@ -129,23 +129,17 @@ export default {
         pageNo: 1,
         pageSize: 20,
         energyTypeId: null,
+        statisticType: null,
         startTime: null,
-        endTime: null,
-        statisticType: null
-      },
-      energyTypeList: [],
-      typeList: [
-        {label: '合并', value: '1'},
-        {label: '详细', value: '2'}
-      ],
-      objList: []
+        endTime: null
+      }
     };
   },
   created() {
     window.addEventListener('resize', () => {
       this.tableH = this.tableHeight(260)
     })
-    this.getList();
+    this.getList()
     this.getTypeList()
   },
   methods: {
@@ -158,33 +152,25 @@ export default {
     buttonClick(val) {
       switch (val.btnName) {
         case 'search':
-          this.queryParams.pageNo = 1;
+          this.queryParams.pageNo = 1
           this.queryParams.energyTypeId = val.energyTypeId
           this.queryParams.statisticType = val.statisticType
-          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : nul
-          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : nul
+          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
+          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
           this.getList()
           break
         default:
-          this.addOrEditTitle = '新增'
-          this.centervisible = true
-          this.$nextTick(() => {
-            this.$refs.energyLimit.init()
-          })
+          this.$modal.confirm('是否确认导出').then(() => {
+              return energyReportPageExportAuto({...this.queryParams});
+            }).then(response => {
+              this.$download.excel(response, '能源统计报表.xls');
+            }).catch(() => {})
       }
     },
     /** 查询列表 */
     getList() {
-      energyReportPageAuto({...this.queryParams}).then(response => {
-        let arr = response.data.list || [];
-        // arr&&arr.map(item => {
-        //   this.typeList.map(i => {
-        //     if (item.type === i.value) {
-        //       item.type = i.label
-        //     }
-        //   })
-        // })
-        this.list = arr
+      energyReportPageAuto(this.queryParams).then(response => {
+        this.list = response.data.list || [];
         this.total = response.data.total;
       });
     }

src/views/energy/monitoring/energyReportSearch/index.vue

@@ -26,7 +26,7 @@
 
 <script>
 import { energyReportPage, energyReportPageExport } from "@/api/monitoring/energyReport";
-// import { publicFormatter } from '@/utils/dict'
+import { getEnergyTypeListAll } from "@/api/base/energyType"
 const tableProps = [
   {
     prop: 'statisticName',
@@ -59,18 +59,26 @@ export default {
           label: '统计方案',
           param: 'statisticName'
         },
+        {
+          type: 'select',
+          label: '能源类型',
+          selectOptions: [],
+          param: 'energyTypeId',
+          filterable: true
+        },
         {
           type: 'datePicker',
-          label: '时间',
+          label: '时间(必填)',
           dateType: 'datetimerange',
           format: 'yyyy-MM-dd HH:mm:ss',
-          valueFormat: "yyyy-MM-ddTHH:mm:ss",
+          valueFormat: "timestamp",
           rangeSeparator: '-',
           startPlaceholder: '开始时间',
           endPlaceholder: '结束时间',
           param: 'timeVal',
           defaultSelect: [],
-          width: 350
+          width: 350,
+          clearable: false
         },
         {
           type: 'button',
@@ -82,7 +90,7 @@ export default {
           type: 'separate'
         },
         {
-          type: this.$auth.hasPermi('monitoring:energy-limit:create') ? 'button' : '',
+          type: this.$auth.hasPermi('monitoring:energy-report-search:export') ? 'button' : '',
           btnName: '导出',
           name: 'add',
           color: 'primary',
@@ -103,65 +111,49 @@ export default {
         startTime: null,
         endTime: null
       },
-      energyTypeList: [],
-      typeList: [
-        {label: '合并', value: '1'},
-        {label: '详细', value: '2'}
-      ],
-      objList: []
+      energyTypeList: []
     };
   },
   created() {
     window.addEventListener('resize', () => {
       this.tableH = this.tableHeight(260)
     })
-    this.getList();
+    this.formConfig[2].defaultSelect = [Date.now() - 7*24*3600000, Date.now()]
+    this.queryParams.startTime = this.formConfig[2].defaultSelect[0]
+    this.queryParams.endTime = this.formConfig[2].defaultSelect[1]
+    this.getList()
+    this.getTypeList()
   },
   methods: {
+    getTypeList() {
+      getEnergyTypeListAll().then((res) => {
+        this.formConfig[1].selectOptions = res.data || []
+      })
+    },
     buttonClick(val) {
       switch (val.btnName) {
         case 'search':
-          this.queryParams.pageNo = 1;
+          this.queryParams.pageNo = 1
           this.queryParams.statisticName = val.statisticName
-          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : nul
-          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : nul
+          this.queryParams.energyTypeId = val.energyTypeId
+          this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
+          this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
           this.getList()
           break
         default:
-          this.addOrEditTitle = '新增'
-          this.centervisible = true
-          this.$nextTick(() => {
-            this.$refs.energyLimit.init()
-          })
+          this.$modal.confirm('是否确认导出').then(() => {
+                return energyReportPageExport({...this.queryParams});
+              }).then(response => {
+                this.$download.excel(response, '能源统计查询报表.xls');
+              }).catch(() => {})
       }
     },
     /** 查询列表 */
     getList() {
       energyReportPage({...this.queryParams}).then(response => {
-        let arr = response.data.list || [];
-        // arr&&arr.map(item => {
-        //   this.typeList.map(i => {
-        //     if (item.type === i.value) {
-        //       item.type = i.label
-        //     }
-        //   })
-        // })
-        this.list = arr
+        this.list = response.data.list || [];
         this.total = response.data.total;
       });
-    },
-    handleClick(val) {
-      switch (val.type) {
-        case 'edit':
-          this.addOrEditTitle = '编辑'
-          this.$nextTick(() => {
-            this.$refs.energyLimit.init(val.data.id)
-          })
-          this.centervisible = true
-          break
-        default:
-        this.handleDelete(val.data)
-      }
     }
   }
 };

src/views/energy/monitoring/energyStatistics/components/energyStatisticsDet.vue

@@ -53,6 +53,10 @@ const tableProps = [
     prop: 'objName',
     label: '所属对象'
   },
+  {
+    prop: 'objRemark',
+    label: '对象备注'
+  },
   {
     prop: 'paramName',
     label: '参数名称'

src/views/energy/monitoring/energyStatistics/components/energyStatisticsDetAdd.vue

@@ -40,6 +40,10 @@ const tableProps = [
     prop: 'objName',
     label: '所属对象'
   },
+  {
+    prop: 'objRemark',
+    label: '对象备注'
+  },
   {
     prop: 'paramName',
     label: '参数名称'

src/views/equipment/analysis/efficiency/components/pieChart.vue

@@ -0,0 +1,98 @@
+<!-- 
+    filename: pieChart.vue
+    author: liubin
+    date: 2023-09-06 15:02:49
+    description: 饼图
+-->
+
+<template>
+	<div class="pie-chart" :data-eqname="value.equipmentName || 'Default'"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'pieChart',
+	components: {},
+	props: ['value'],
+	data() {
+		return {
+			chart: null,
+			config: {
+				grid: {
+					top: 0,
+					left: 0,
+					right: 0,
+					bottom: 0,
+				},
+				tooltip: {
+					trigger: 'item',
+				},
+				legend: {
+					top: '0%',
+					left: 'center',
+					textStyle: {
+						fontSize: 10,
+					},
+					itemWidth: 10,
+					itemHeight: 10,
+				},
+				series: [
+					{
+						name: this.value.equipmentName || 'Default',
+						type: 'pie',
+						radius: ['40%', '75%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center',
+						},
+						data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({
+							name: ['工作时长', '停机时长', '故障时长'][index],
+							value: this.value[v],
+						})),
+						// data: [
+						// 	{ value: 1048, name: 'Search Engine' },
+						// 	{ value: 735, name: 'Direct' },
+						// 	{ value: 580, name: 'Email' },
+						// 	{ value: 484, name: 'Union Ads' },
+						// 	{ value: 300, name: 'Video Ads' },
+						// ],
+					},
+				],
+			},
+		};
+	},
+	mounted() {
+		if (!this.chart) {
+			this.chart = echarts.init(this.$el);
+			this.$nextTick(() => {
+				this.chart.setOption(this.config);
+			});
+		}
+	},
+	beforeDestroy() {
+		if (this.chart) this.chart.dispose();
+	},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.pie-chart {
+	padding: 12px;
+	min-height: 320px;
+	background: #f1f1f1;
+	position: relative;
+}
+
+.pie-chart::before {
+	content: attr(data-eqname);
+	font-size: 16px;
+	line-height: 1;
+	position: absolute;
+	top: -16px;
+	left: 0;
+}
+</style>

src/views/equipment/analysis/efficiency/index.vue

@@ -0,0 +1,419 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-04 09:34:52
+    description: 设备效率分析
+-->
+
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
+
+		<!-- 列表 -->
+		<base-table
+			class="base-table__margin"
+			:table-props="tableProps"
+			:table-data="list"
+			@emitFun="handleEmitFun">
+			<!-- :page="queryParams.pageNo"
+			:limit="queryParams.pageSize" -->
+			<!-- <method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				label="操作"
+				: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="visualizationOpen ? '设备可视化' : '查看趋势'"
+			:dialogVisible="open"
+			:width="visualizationOpen ? '80%' : '700px'"
+			@closed="closed"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<div class="visualization" v-if="visualizationOpen">
+				<pie-chart v-for="item in list" :key="item.id" :value="item" />
+			</div>
+			<div v-if="trendOpen">
+				<h1>查看趋势</h1>
+			</div>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+// import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import PieChart from './components/pieChart.vue';
+
+export default {
+	name: 'EfficiencyAnalysis',
+	mixins: [basicPageMixin],
+	components: { PieChart },
+	props: {},
+	data() {
+		return {
+			open: false,
+			visualizationOpen: false,
+			trendOpen: false,
+			// tableBtn: [
+			// 	this.$auth.hasPermi('base:equipment-group:update')
+			// 		? {
+			// 				type: 'edit',
+			// 				btnName: '修改',
+			// 		  }
+			// 		: undefined,
+			// 	this.$auth.hasPermi('base:equipment-group:delete')
+			// 		? {
+			// 				type: 'delete',
+			// 				btnName: '删除',
+			// 		  }
+			// 		: undefined,
+			// ].filter((v) => v),
+			tableProps: [
+				{ prop: 'factoryName', label: '工厂', align: 'center' },
+				{ prop: 'lineName', label: '产线', align: 'center' },
+				{ prop: 'sectionName', label: '工段', align: 'center' },
+				{ prop: 'equipmentName', label: '设备', align: 'center' },
+				{
+					label: '有效时间',
+					align: 'center',
+					children: [
+						{
+							width: 128,
+							prop: 'workTime',
+							label: '工作时长',
+							align: 'center',
+						},
+						{
+							width: 128,
+							prop: 'workRate',
+							label: '百分比',
+							align: 'center',
+							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+						},
+					],
+				},
+				{
+					label: '关机时间',
+					align: 'center',
+					children: [
+						{
+							width: 128,
+							prop: 'stopTime',
+							label: '停机时长',
+							align: 'center',
+						},
+						{ width: 128, prop: 'stopRate', label: '百分比', align: 'center' },
+					],
+				},
+				{
+					label: '中断损失',
+					align: 'center',
+					children: [
+						{
+							width: 128,
+							prop: 'downTime',
+							label: '故障时长',
+							align: 'center',
+							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+						},
+						{ width: 128, prop: 'downRate', label: '百分比', align: 'center' },
+						{
+							width: 128,
+							prop: 'timeEfficiency',
+							label: '时间开动率',
+							align: 'center',
+							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+						},
+					],
+				},
+				{
+					label: '速度损失',
+					align: 'center',
+					children: [
+						{
+							width: 128,
+							prop: 'realProcSpeed',
+							label: '实际加工速度',
+							align: 'center',
+						},
+						{
+							width: 128,
+							prop: 'designProcSpeed',
+							label: '理论加工速度',
+							align: 'center',
+						},
+						{
+							width: 128,
+							prop: 'peEfficiency',
+							label: '速度开动率',
+							align: 'center',
+							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+						},
+					],
+				},
+				{
+					prop: 'oee',
+					label: 'OEE',
+					align: 'center',
+					filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+				},
+				{
+					prop: 'teep',
+					label: 'TEEP',
+					align: 'center',
+					filter: (val) => (val != null ? +val.toFixed(3) : '-'),
+				},
+				// {
+				// 	_action: 'view-trend',
+				// 	label: '趋势',
+				// 	align: 'center',
+				// 	subcomponent: {
+				// 		props: ['injectData'],
+				// 		render: function (h) {
+				// 			const _this = this;
+				// 			return h(
+				// 				'el-button',
+				// 				{
+				// 					props: { type: 'text' },
+				// 					on: {
+				// 						click: function () {
+				// 							console.log('inejctdata', _this.injectData);
+				// 							_this.$emit('emitData', {
+				// 								action: _this.injectData._action,
+				// 								// value: _this.injectData.id,
+				// 								value: _this.injectData,
+				// 							});
+				// 						},
+				// 					},
+				// 				},
+				// 				'查看趋势'
+				// 			);
+				// 		},
+				// 	},
+				// },
+			],
+			searchBarFormConfig: [
+				{
+					type: 'select',
+					label: '工厂',
+					placeholder: '请选择工厂',
+					param: 'factoryId',
+					selectOptions: [],
+				},
+				{
+					type: 'select',
+					label: '产线',
+					placeholder: '请选择产线',
+					param: 'lineId',
+					selectOptions: [],
+				},
+				// 选项切换
+				{
+					type: 'select',
+					label: '时间类型',
+					param: 'dateFilterType',
+					defaultSelect: 0,
+					selectOptions: [
+						{ id: 0, name: '按时间段' },
+						{ id: 1, name: '按日期' },
+					],
+					index: 2,
+					extraOptions: [
+						{
+							parent: 'dateFilterType',
+							// 时间段选择
+							type: 'datePicker',
+							label: '时间段',
+							dateType: 'daterange',
+							format: 'yyyy-MM-dd',
+							valueFormat: 'yyyy-MM-dd HH:mm:ss',
+							defaultTime: ['00:00:00', '00:00:00'],
+							rangeSeparator: '-',
+							startPlaceholder: '开始时间',
+							endPlaceholder: '结束时间',
+							param: 'recordTime',
+						},
+						{
+							parent: 'dateFilterType',
+							// 日期选择
+							type: 'datePicker',
+							label: '日期',
+							dateType: 'date',
+							placeholder: '选择日期',
+							format: 'yyyy-MM-dd',
+							valueFormat: 'yyyy-MM-dd',
+							param: 'recordTime',
+						},
+					],
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '设备可视化',
+					name: 'visualization',
+					plain: true,
+					color: 'success',
+				},
+				// {
+				// 	type: 'button',
+				// 	btnName: 'OEE',
+				// 	name: 'add',
+				// 	plain: true,
+				// 	color: 'success',
+				// },
+				// {
+				// 	type: 'button',
+				// 	btnName: 'TEEP',
+				// 	name: 'add',
+				// 	plain: true,
+				// 	color: 'warning',
+				// },
+			],
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				lineId: null,
+				factoryId: null,
+				recordTime: [],
+			},
+			// 表单参数
+			form: {},
+			list: [],
+		};
+	},
+	created() {
+		this.getFactory();
+		this.getLine();
+		this.getList();
+	},
+	methods: {
+		/** 准备工厂数据 */
+		async getFactory() {
+			const { code, data } = await this.$axios({
+				url: '/base/factory/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.searchBarFormConfig[0].selectOptions = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
+		/** 准备产线数据 */
+		async getLine() {
+			const { code, data } = await this.$axios({
+				url: '/base/production-line/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.searchBarFormConfig[1].selectOptions = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
+		/** 覆盖 handleEmitFun 的默认实现 */
+		handleEmitFun({ action, value }) {
+			switch (action) {
+				case 'view-trend':
+					const { id } = value;
+					this.open = true;
+					this.trendOpen = true;
+					break;
+			}
+		},
+		/** 查询列表 */
+		async getList() {
+			this.loading = true;
+			const { code, data } = await this.$axios({
+				url: '/analysis/equipment-analysis/efficiency',
+				method: 'get',
+				params: this.queryParams,
+			});
+			if (code == 0) {
+				console.log('data', data);
+				this.list = data;
+			}
+		},
+
+		handleSearchBarBtnClick({ btnName, ...payload }) {
+			console.log('handleSearchBarBtnClick', btnName, payload);
+			if (btnName == 'visualization') {
+				// 可视化
+				this.visualizationOpen = true;
+				this.open = true;
+			}
+			if (btnName == 'search') {
+				this.queryParams.factoryId = payload.factoryId || null;
+				this.queryParams.lineId = payload.lineId || null;
+				if (payload.recordTime != null) {
+					if (typeof payload.recordTime == 'string') {
+						if (payload.recordTime.trim() !== '') {
+							this.queryParams.recordTime = [
+								`${payload.recordTime} 00:00:00`,
+								`${payload.recordTime} 23:59:59`,
+							];
+						}
+					} else {
+						this.queryParams.recordTime = payload.recordTime;
+					}
+				} else {
+					this.queryParams.recordTime = null;
+				}
+				this.getList();
+			}
+		},
+
+		cancel() {
+			this.open = false;
+		},
+
+		closed() {
+			this.visualizationOpen = false;
+			this.trendOpen = false;
+		},
+
+		submitForm() {},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.visualization {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(240px, 1fr));
+}
+</style>

src/views/equipment/analysis/exception/index.vue

@@ -0,0 +1,194 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-04 09:34:52
+    description: 设备异常分析
+-->
+
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				:method-list="tableBtn"
+				@clickBtn="handleTableBtnClick" /> -->
+		</base-table>
+
+		<!-- 分页组件 -->
+		<pagination
+			v-show="total > 0"
+			:total="total"
+			:page.sync="queryParams.pageNo"
+			:limit.sync="queryParams.pageSize"
+			@pagination="getList" />
+	</div>
+</template>
+
+<script>
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+
+export default {
+	name: 'ExceptionAnalysis',
+	mixins: [basicPageMixin],
+	components: {},
+	props: {},
+	data() {
+		return {
+			searchBarKeys: ['name', 'code'],
+			tableBtn: [
+				this.$auth.hasPermi('base:equipment-group:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment-group:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{ prop: 'lineName', label: '产线', align: 'center' },
+				{ prop: 'sectionName', label: '工段', align: 'center' },
+				{ prop: 'equipmentName', label: '设备', align: 'center' },
+				{
+					width: 188,
+					prop: 'mtbf',
+					label: '平均故障间隔时间[MTBF](h)',
+					align: 'center',
+				},
+				{
+					width: 180,
+					prop: 'mttr',
+					label: '平均维修时间[MTTR](h)',
+					align: 'center',
+				},
+				{ prop: 'workTime', label: '工作时长(h)', align: 'center' },
+				{ prop: 'downTime', label: '故障时长(h)', align: 'center' },
+				{ prop: 'downCount', label: '故障次数', align: 'center' },
+			],
+			searchBarFormConfig: [
+				{
+					type: 'select',
+					label: '请选择月份',
+					placeholder: '请选择月份',
+					param: 'month',
+					selectOptions: Array(12)
+						.fill(0)
+						.map((v, i) => ({
+							id: i + 1,
+							name: `${i + 1}月`,
+						})),
+				},
+				{
+					__index: 'line',
+					type: 'select',
+					label: '产线',
+					placeholder: '请选择产线',
+					param: 'lineId',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+			// 查询参数
+			queryParams: {
+				lineId: null,
+				factoryId: null,
+				recordTime: null,
+			},
+		};
+	},
+	computed: {},
+	created() {
+		this.fillLineOptions();
+	},
+	methods: {
+		async fillLineOptions() {
+			const { data } = await this.$axios({
+				url: '/base/production-line/listAll',
+				method: 'get',
+			});
+			const cfg = this.searchBarFormConfig.find(
+				(item) => item.__index == 'line'
+			);
+			this.$set(
+				cfg,
+				'selectOptions',
+				data.map((item) => ({
+					id: item.id,
+					name: item.name,
+				}))
+			);
+		},
+
+		async getList() {
+			this.loading = true;
+			// 执行查询
+			const { data } = await this.$axios({
+				url: '/analysis/equipment-analysis/efficiency',
+				method: 'get',
+				params: {
+					lineId: this.queryParams.lineId || null,
+					recordTime: this.queryParams.recordTime || null,
+				},
+			});
+		},
+
+		handleSearchBarBtnClick(btn) {
+			switch (btn.btnName) {
+				case 'search':
+					if (btn.month) {
+						this.queryParams.recordTime = [
+							moment()
+								.month(btn.month - 1)
+								.format('YYYY-MM')+'-01 00:00:00',
+							moment()
+								.month(btn.month)
+								.format('YYYY-MM')+'-01 00:00:00',
+						];
+					} else {
+						this.queryParams.recordTime = null;
+					}
+                    this.queryParams.lineId = btn.lineId || null;
+					this.handleQuery();
+					break;
+			}
+		},
+
+		/** 搜索按钮操作 */
+		handleQuery() {
+			// this.queryParams.pageNo = 1;
+			this.getList();
+		},
+
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/equipment/analysis/quality/components/lineChart.vue

@@ -0,0 +1,49 @@
+<!-- 
+    filename: lineChart.vue
+    author: liubin
+    date: 2023-09-04 13:45:00
+    description: 
+-->
+
+<template>
+	<div class="line-chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'LineChart',
+	components: {},
+	props: ['config'],
+	data() {
+		return {
+			chart: null,
+		};
+	},
+	computed: {},
+	mounted() {
+		this.init();
+	},
+	beforeDestroy() {
+		if (this.chart) {
+			this.chart.dispose();
+		}
+	},
+	methods: {
+		init() {
+			console.log('thsi el', this.$el);
+			if (!this.chart) this.chart = echarts.init(this.$el);
+			this.chart.setOption(this.config);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.line-chart {
+	padding: 0 12px;
+	background: #e1e1e1;
+	min-height: 320px;
+}
+</style>

src/views/equipment/analysis/quality/index.vue

@@ -0,0 +1,343 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-04 09:34:52
+    description: 设备质量分析
+-->
+
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
+
+		<!-- 列表 -->
+		<base-table
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
+			@emitFun="handleEmitFun"></base-table>
+
+		<!-- 图形分析 dialog -->
+		<!-- <base-dialog
+			dialogTitle="图形视角"
+			:dialogVisible="dialogVisible"
+			width="60%"
+			@close="dialogClose"
+			@cancel="dialogClose"
+			@confirm="dialogClose">
+			<LineChart v-if="dialogVisible" :config="lineChartConfig" />
+		</base-dialog> -->
+	</div>
+</template>
+
+<script>
+import LineChart from './components/lineChart.vue';
+
+export default {
+	name: 'QualityAnalysis',
+	components: { LineChart },
+	props: {},
+	data() {
+		return {
+			dialogVisible: false,
+			urls: {
+				page: '/analysis/equipment-analysis/quality',
+			},
+			mode: 'table', // defaults to 'table'
+			searchBarFormConfig: [
+				// 产品
+				{
+					__index: 'product',
+					type: 'select',
+					label: '产品',
+					placeholder: '请选择产品',
+					param: 'productId',
+				},
+				// 产线
+				{
+					__index: 'line',
+					type: 'select',
+					label: '产线',
+					placeholder: '请选择产线',
+					param: 'lineId',
+				},
+				// 时间段
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					// format: 'yyyy-MM-dd HH:mm:ss',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					// valueFormat: 'timestamp',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'recordTime',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				// {
+				// 	type: 'button',
+				// 	btnName: '列表数据',
+				// 	name: 'tableVersion',
+				// 	color: 'text btn-table',
+				// },
+				// {
+				// 	type: 'separate',
+				// },
+				// {
+				// 	type: 'button',
+				// 	btnName: '图形分析',
+				// 	name: 'graphVersion',
+				// 	color: 'text btn-graph',
+				// },
+			],
+			// 动态的 props
+			tableProps: [
+				{
+					// width: 160,
+					prop: 'sectionName',
+					label: '工段',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'equipmentName',
+					label: '设备名称',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'products',
+					label: '产品名称',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'inQuantity',
+					label: '进片数量',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'outQuantity',
+					label: '出片数量',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'nokQuantity',
+					label: '破损/不合格数',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'passRate',
+					label: '合格率',
+					align: 'center',
+				},
+			],
+			lineChartConfig: {
+				grid: {
+					top: 88,
+					left: 56,
+					right: 56,
+					bottom: 56,
+				},
+				legend: {
+					top: 0,
+					left: 0,
+					padding: 5,
+                    icon: 'roundRect',
+                    itemWidth: 12,
+                    itemHeight: 12,
+                    itemGap: 20,
+					textStyle: {
+                        fontSize: 14,
+                        lineHeight: 14
+                    },
+				},
+				xAxis: {
+					type: 'category',
+					data: ['设备1', '设备2', '设备3', '设备4', '设备5'],
+				},
+				yAxis: {
+					type: 'value',
+                    name: '合格率',
+                    nameLocation: 'end',
+                    nameTextStyle: {
+                        fontSize: 14,
+                        align: 'right'
+                    },
+                    nameGap: 26
+				},
+				series: [
+					{
+						name: '产线1',
+						data: [150, 230, 224, 218, 135],
+						type: 'line',
+						smooth: true,
+					},
+					{
+						name: '产线2',
+						data: [111, 224, 42, 11, 24],
+						type: 'line',
+						smooth: true,
+					},
+					{
+						name: '产线3',
+						data: [218, 112, 331, 44, 99],
+						type: 'line',
+						smooth: true,
+					},
+					{
+						name: '产线4',
+						data: [3, 221, 42, 553, 311],
+						type: 'line',
+						smooth: true,
+					},
+				],
+			},
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				lineId: null,
+				productId: null,
+				recordTime: [],
+			},
+			list: [],
+		};
+	},
+	computed: {},
+	created() {
+		this.fillLineOptions();
+		this.fillProductOptions();
+		this.getList();
+	},
+	methods: {
+		async fillLineOptions() {
+			const { data } = await this.$axios({
+				url: '/base/production-line/listAll',
+				method: 'get',
+			});
+			const cfg = this.searchBarFormConfig.find(
+				(item) => item.__index == 'line'
+			);
+			this.$set(
+				cfg,
+				'selectOptions',
+				data.map((item) => ({
+					id: item.id,
+					name: item.name,
+				}))
+			);
+		},
+
+		async fillProductOptions() {
+			const { data } = await this.$axios({
+				url: '/base/product/listAll',
+				method: 'get',
+			});
+			const cfg = this.searchBarFormConfig.find(
+				(item) => item.__index == 'product'
+			);
+			this.$set(
+				cfg,
+				'selectOptions',
+				data.map((item) => ({
+					id: item.id,
+					name: item.name,
+				}))
+			);
+		},
+
+		async getList() {
+			const { data } = await this.$axios({
+				url: '/analysis/equipment-analysis/quality',
+				method: 'get',
+				params: {
+					lineId: this.queryParams.lineId || null,
+					productId: this.queryParams.productId || null,
+					recordTime: this.queryParams.recordTime || null,
+				},
+			});
+			this.list = data.map((item) => ({
+				...item,
+				products: item.products.join(','),
+			}));
+		},
+
+		handleSearchBarBtnClick(btn) {
+			console.log('handleSearchBarBtnClick', btn);
+			switch (btn.btnName) {
+				case 'search':
+					this.queryParams.lineId = btn.lineId;
+					this.queryParams.productId = btn.productId;
+					this.queryParams.recordTime = btn.recordTime;
+					this.$nextTick(() => {
+						this.getList();
+					});
+					break;
+				case 'tableVersion':
+					this.dialogClose();
+					break;
+				case 'graphVersion':
+					this.dialogShow();
+					break;
+			}
+		},
+
+		handleEmitFun({ action, payload }) {},
+
+		dialogShow() {
+			this.dialogVisible = true;
+		},
+
+		dialogClose() {
+			this.dialogVisible = false;
+		},
+	},
+};
+</script>
+<style scoped lang="scss">
+:deep(.searchBar) {
+	.el-button.btn-table {
+		color: rgb(0, 130, 130);
+		border: 1px solid rgb(0, 130, 130);
+		padding: 8px 10px;
+		border: 1px solid rgb(0, 130, 130);
+		padding: 8px 10px;
+
+		&:hover {
+			border-color: #fff;
+			color: #fff;
+			background: rgb(0, 130, 130);
+		}
+	}
+	.el-button.btn-graph {
+		color: rgb(130, 0, 130);
+		border: 1px solid rgb(130, 0, 130);
+		padding: 8px 10px;
+
+		&:hover {
+			border-color: #fff;
+			color: #fff;
+			background: rgb(130, 0, 130);
+		}
+	}
+}
+</style>

src/views/equipment/timing-diagram/output/components/lineChart.vue

@@ -0,0 +1,49 @@
+<!-- 
+    filename: lineChart.vue
+    author: liubin
+    date: 2023-09-04 13:45:00
+    description: 
+-->
+
+<template>
+	<div class="line-chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'LineChart',
+	components: {},
+	props: ['config'],
+	data() {
+		return {
+			chart: null,
+		};
+	},
+	computed: {},
+	mounted() {
+		this.init();
+	},
+	beforeDestroy() {
+		if (this.chart) {
+			this.chart.dispose();
+		}
+	},
+	methods: {
+		init() {
+			console.log('thsi el', this.$el);
+			if (!this.chart) this.chart = echarts.init(this.$el);
+			this.chart.setOption(this.config);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.line-chart {
+	padding: 0 12px;
+	// background: #e1e1e1;
+	min-height: 320px;
+}
+</style>

src/views/equipment/timing-diagram/output/index.vue

@@ -0,0 +1,330 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-04 09:34:52
+    description: 设备产量时序图
+-->
+
+<template>
+	<div class="app-container">
+		<h1>设备产量时序图</h1>
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
+
+		<div class="main-area">
+			<div class="graphs" v-if="graphList.length">
+				<div class="graph" v-for="(eq, index) in graphList" :key="eq.key">
+					<h2 class="graph-title">{{ eq.key }}</h2>
+					<LineChart
+						:key="eq.key + '__linechart'"
+						:config="getRealConfig(index)" />
+				</div>
+			</div>
+			<h2 v-else>请添加设备</h2>
+		</div>
+
+		<!-- 对话框(添加 / 修改) -->
+		<base-dialog
+			dialogTitle="添加设备"
+			:dialogVisible="open"
+			width="500px"
+			@close="open = false"
+			@cancel="open = false"
+			@confirm="submitForm">
+			<el-select
+				v-if="open"
+				style="width: 100%"
+				v-model="queryParams.equipmentId"
+				placeholder="请选择一个设备">
+				<el-option
+					v-for="eq in eqList"
+					:key="eq.id"
+					:value="eq.id"
+					:label="eq.name"></el-option>
+			</el-select>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import LineChart from './components/lineChart.vue';
+
+export default {
+	name: 'SGProduction',
+	components: { LineChart },
+	props: {},
+	data() {
+		return {
+			searchBarFormConfig: [
+				{
+					type: 'select',
+					label: '产线',
+					placeholder: '请选择产线',
+					selectOptions: [],
+					param: 'lineId',
+				},
+				{
+					type: 'select',
+					label: '工段',
+					placeholder: '请选择工段',
+					selectOptions: [],
+					param: 'sectionId',
+				},
+				// 时间段
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					// format: 'yyyy-MM-dd HH:mm:ss',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					// valueFormat: 'timestamp',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'recordTime',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '设备对比',
+					name: 'compare',
+					color: 'warning',
+					plain: true,
+				},
+			],
+			queryParams: {
+				lineId: null,
+				sectionId: null,
+				equipmentId: null,
+				recordTime: [],
+			},
+			open: false,
+			eqList: [],
+			graphList: [],
+			templateConfig: {
+				grid: {
+					top: 88,
+					left: 56,
+					right: 56,
+					bottom: 56,
+				},
+				legend: {
+					top: 0,
+					left: 0,
+					padding: 5,
+					icon: 'roundRect',
+					itemWidth: 12,
+					itemHeight: 12,
+					itemGap: 20,
+					textStyle: {
+						fontSize: 14,
+						lineHeight: 14,
+					},
+				},
+				xAxis: {
+					type: 'category',
+					data: Array(24)
+						.fill(1)
+						.map((item, index) => `${index}:00`),
+				},
+				yAxis: {
+					type: 'value',
+					name: '产量',
+					nameLocation: 'end',
+					nameTextStyle: {
+						fontSize: 14,
+						align: 'right',
+					},
+					nameGap: 26,
+				},
+				series: [
+					{
+						name: '产线1',
+						data: Array(24)
+							.fill(1)
+							.map(() => Math.random() * 100),
+						type: 'line',
+						smooth: true,
+					},
+				],
+			},
+		};
+	},
+	created() {
+		this.initProductline();
+		this.initWorksection();
+		this.initEquipment();
+		this.getList();
+	},
+	methods: {
+		handleSearchBarBtnClick({ btnName, ...payload }) {
+			switch (btnName) {
+				case 'search':
+					this.queryParams.lineId = payload.lineId || null;
+					this.queryParams.sectionId = payload.sectionId || null;
+					this.queryParams.equipmentId = payload.equipmentId || null;
+					this.queryParams.recordTime = payload.recordTime || null;
+					this.getList();
+					break;
+				case 'compare':
+					this.open = true;
+					break;
+			}
+		},
+
+		/** 重置查询条件 */
+		initQuery() {
+			this.queryParams.lineId = null;
+			this.queryParams.sectionId = null;
+			this.queryParams.equipmentId = null;
+			this.queryParams.recordTime = [];
+		},
+
+		/** 对象到数组的转换 */
+		objectToArray(obj) {
+			return Object.keys(obj).map((key) => {
+				obj[key].sort((a, b) => a.startTime - b.startTime);
+				obj[key].key = key;
+				return obj[key];
+			});
+		},
+
+		async getList() {
+			const { code, data } = await this.$axios({
+				url: '/analysis/equipment-analysis/quantity',
+				method: 'get',
+				params: this.queryParams,
+			});
+			if (code == 0) {
+				this.graphList = this.objectToArray(data);
+				// const eq1 = [
+				// 	{ totalQuantity: 20, startTime: 1693964578000 },
+				// 	{ totalQuantity: 43, startTime: 1693964678000 },
+				// 	{ totalQuantity: 12, startTime: 1693964778000 },
+				// 	{ totalQuantity: 11, startTime: 1693964878000 },
+				// 	{ totalQuantity: 98, startTime: 1693965478000 },
+				// 	{ totalQuantity: 87, startTime: 1693965578000 },
+				// ];
+				// eq1.key = 'SS1';
+				// const eq2 = [
+				// 	{ totalQuantity: 23, startTime: 1693961578000 },
+				// 	{ totalQuantity: 42, startTime: 1693964578000 },
+				// 	{ totalQuantity: 51, startTime: 1693965578000 },
+				// 	{ totalQuantity: 18, startTime: 1693966578000 },
+				// 	{ totalQuantity: 77, startTime: 1693966778000 },
+				// 	{ totalQuantity: 38, startTime: 1693967578000 },
+				// 	{ totalQuantity: 57, startTime: 1693969578000 },
+				// ];
+				// eq2.key = 'SS2';
+				// this.graphList = [eq1, eq2];
+				console.log('graph list', this.graphList);
+			}
+		},
+
+		/** 获得设备产量 */
+		getEquipmentQuantity(equipmentArr) {
+			return equipmentArr.map((item) => item.totalQuantity);
+		},
+
+		/** 获得设备产量的时间 */
+		getTimeinfo(equipmentArr) {
+			return equipmentArr.map((item) =>
+				new Date(item.startTime).toLocaleTimeString()
+			);
+		},
+
+		getRealConfig(index) {
+			// if (!this.graphList || this.graphList.length == 0) return;
+			const config = JSON.parse(JSON.stringify(this.templateConfig));
+			// config.legend.data = this.graphList[index].key;
+			config.series[0].name = this.graphList[index]?.key;
+			// console.log("this.graphList?.[index]", this.graphList?.[index]);
+			config.series[0].data = this.getEquipmentQuantity(
+				this.graphList?.[index] || []
+			);
+			config.xAxis.data = this.getTimeinfo(this.graphList?.[index] || []);
+			return config;
+		},
+
+		/** 准备设备数据 */
+		async initEquipment() {
+			const { code, data } = await this.$axios({
+				url: '/base/equipment/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.eqList = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
+		/** 准备产线数据 */
+		async initProductline() {
+			const { code, data } = await this.$axios({
+				url: '/base/production-line/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.searchBarFormConfig[0].selectOptions = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
+		/** 准备工段数据 */
+		async initWorksection() {
+			const { code, data } = await this.$axios({
+				url: '/base/workshop-section/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.searchBarFormConfig[1].selectOptions = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
+		async submitForm() {
+			const { code, data } = await this.$axios({
+				url: '/analysis/equipment-analysis/quantity',
+				method: 'get',
+				params: this.queryParams,
+			});
+			if (code == 0) {
+				const newEqlist = this.objectToArray(data);
+				if (!newEqlist || newEqlist.length == 0) {
+					this.$message.error('该设备没有产量数据');
+					return;
+				}
+				this.graphList.push(newEqlist[0]);
+			}
+			this.open = false;
+		}
+	},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/equipment/timing-diagram/status/index.vue

@@ -0,0 +1,449 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-09-04 09:34:52
+    description: 设备状态时序图
+-->
+
+<template>
+	<div class="app-container">
+		<h1>设备状态时序图</h1>
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
+
+		<div class="main-area">
+			<div class="legend-row">
+				<div class="legend">
+					<div class="icon running"></div>
+					<div>运行中</div>
+				</div>
+				<!-- <div class="legend">
+					<div class="icon waiting"></div>
+					<div>待机</div>
+				</div> -->
+				<div class="legend">
+					<div class="icon fault"></div>
+					<div>故障</div>
+				</div>
+				<!-- <div class="legend">
+					<div class="icon lack"></div>
+					<div>缺料</div>
+				</div>
+				<div class="legend">
+					<div class="icon full"></div>
+					<div>满料</div>
+				</div> -->
+				<div class="legend">
+					<div class="icon stop"></div>
+					<div>计划停机</div>
+				</div>
+			</div>
+			<div class="graphs" v-if="graphList.length">
+				<!-- <div class="graph">
+					<h2 class="graph-title">设备1</h2>
+					<div class="graph-item running tick" data-time="00:00"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item lack tick" data-time="03:00"></div>
+					<div class="graph-item full tick" data-time="04:00"></div>
+					<div class="graph-item waiting tick" data-time="05:00"></div>
+					<div class="graph-item running tick" data-time="06:00"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item fault tick" data-time="08:00"></div>
+					<div class="graph-item waiting tick" data-time="09:00"></div>
+					<div class="graph-item running tick" data-time="10:00"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item lack tick" data-time="13:00"></div>
+					<div class="graph-item full tick" data-time="14:00"></div>
+					<div class="graph-item running tick" data-time="15:00"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item fault tick" data-time="18:00"></div>
+					<div class="graph-item running tick" data-time="19:00"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item running"></div>
+					<div class="graph-item stop tick" data-time="23:00"></div>
+				</div> -->
+				<div class="graph" v-for="eq in graphList" :key="eq.key">
+					<h2 class="graph-title">{{ eq.key }}</h2>
+					<div
+						v-for="blc in eq"
+						:key="blc.startTime"
+						class="graph-item-fixed tick"
+						:class="{
+							running: blc.status == 0,
+							fault: blc.status == 2,
+							stop: blc.status == 1,
+						}"
+						:style="{ width: blc.duration * 2 + 'px' }"
+						:data-time="new Date(blc.startTime).toLocaleTimeString()"></div>
+				</div>
+				<!-- <div class="graph">
+					<h2 class="graph-title">设备3</h2>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+					<div class="graph-item"></div>
+				</div> -->
+			</div>
+			<h2 v-else>请添加设备</h2>
+		</div>
+
+		<!-- 对话框(添加 / 修改) -->
+		<base-dialog
+			dialogTitle="添加设备"
+			:dialogVisible="open"
+			width="500px"
+			@close="open = false"
+			@cancel="open = false"
+			@confirm="submitForm">
+			<el-select
+				v-if="open"
+				style="width: 100%"
+				v-model="queryParams.equipmentId"
+				placeholder="请选择一个设备">
+				<el-option
+					v-for="eq in eqList"
+					:key="eq.id"
+					:value="eq.id"
+					:label="eq.name"></el-option>
+			</el-select>
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'SGStatus',
+	components: {},
+	props: {},
+	data() {
+		return {
+			searchBarFormConfig: [
+				{
+					type: 'select',
+					label: '产线',
+					placeholder: '请选择产线',
+					selectOptions: [],
+					param: 'lineId',
+				},
+				{
+					type: 'select',
+					label: '工段',
+					placeholder: '请选择工段',
+					selectOptions: [],
+					param: 'sectionId',
+				},
+				// 时间段
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					// format: 'yyyy-MM-dd HH:mm:ss',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					// valueFormat: 'timestamp',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'recordTime',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '设备对比',
+					name: 'compare',
+					color: 'warning',
+					plain: true,
+				},
+			],
+			queryParams: {
+				lineId: null,
+				sectionId: null,
+				equipmentId: null,
+				recordTime: [],
+			},
+			graphList: [],
+			open: false,
+			eqList: [],
+			// demo: [
+			// 	[
+			// 		{
+			// 			equipmentName: '下片机',
+			// 			duration: 30,
+			// 			relativeDuration: 0.6,
+			// 			status: 0,
+			// 			startPos: 0,
+			//             startTime: 1691568181000,
+			// 		},
+			// 		{
+			// 			equipmentName: '下片机',
+			// 			duration: 20,
+			// 			relativeDuration: 0.4,
+			// 			status: 2,
+			// 			startPos: 30,
+			//             startTime: 1691569981000
+			// 		},
+			// 	],
+			// ],
+		};
+	},
+	computed: {},
+	created() {
+		this.initProductline();
+		this.initWorksection();
+		this.initEquipment();
+		this.getList();
+	},
+	methods: {
+		/** 重置查询条件 */
+		initQuery() {
+			this.queryParams.lineId = null;
+			this.queryParams.equipmentId = null;
+			this.queryParams.sectionId = null;
+			this.queryParams.recordTime = [];
+		},
+
+		/** 对象到数组的转换 */
+		objectToArray(obj) {
+			return Object.keys(obj).map((key) => {
+				obj[key].sort((a, b) => a.startTime - b.startTime);
+				obj[key].key = key;
+				return obj[key];
+			});
+		},
+
+		async getList() {
+			const { code, data } = await this.$axios({
+				url: '/analysis/equipment-analysis/status',
+				method: 'get',
+				params: this.queryParams,
+			});
+			if (code == 0) {
+				this.graphList = this.objectToArray(data);
+				console.log('graph list', this.graphList);
+			}
+		},
+
+		/** 准备设备数据 */
+		async initEquipment() {
+			const { code, data } = await this.$axios({
+				url: '/base/equipment/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.eqList = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
+		/** 准备产线数据 */
+		async initProductline() {
+			const { code, data } = await this.$axios({
+				url: '/base/production-line/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.searchBarFormConfig[0].selectOptions = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
+		/** 准备工段数据 */
+		async initWorksection() {
+			const { code, data } = await this.$axios({
+				url: '/base/workshop-section/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.searchBarFormConfig[1].selectOptions = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
+		handleSearchBarBtnClick({ btnName, ...payload }) {
+			switch (btnName) {
+				case 'search':
+					this.queryParams.lineId = payload.lineId || null;
+					this.queryParams.sectionId = payload.sectionId || null;
+					this.queryParams.equipmentId = payload.equipmentId || null;
+					this.queryParams.recordTime = payload.recordTime || null;
+					this.getList();
+					break;
+				case 'compare':
+					this.open = true;
+					break;
+			}
+		},
+
+		async submitForm() {
+			const { code, data } = await this.$axios({
+				url: '/analysis/equipment-analysis/status',
+				method: 'get',
+				params: this.queryParams,
+			});
+			if (code == 0) {
+				const newEqlist = this.objectToArray(data);
+				if (!newEqlist || newEqlist.length == 0) {
+					this.$message.error('该设备没有状态数据');
+					return;
+				}
+				this.graphList.push(newEqlist[0]);
+			}
+			this.open = false;
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.graph {
+	border: 1px solid #ccc;
+	padding: 12px 12px 28px 12px;
+	margin: 64px 0;
+	position: relative;
+	display: flex;
+}
+
+.graph-title {
+	position: absolute;
+	top: -64px;
+	left: -1px;
+	padding: 8px 18px;
+	background: #ccc;
+	font-size: 18px;
+	line-height: 1;
+}
+
+.graph-item,
+.graph-item-fixed {
+	height: 88px;
+	// width: 24px;
+	flex: 1;
+	// border: 1px solid #ccc;
+	position: relative;
+}
+
+.graph-item-fixed {
+	flex: unset;
+}
+
+.graph-item::before,
+.graph-item-fixed::before {
+	position: absolute;
+	bottom: -16px;
+	left: 0;
+	content: attr(data-time);
+	// font-size - js
+	// rotate - js
+	// color - js, default:
+	color: #777;
+	transform-origin: left top;
+	transform: rotate(12deg);
+}
+
+.graph-item-fixed::after,
+.graph-item::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	bottom: -3px;
+	display: inline-block;
+}
+
+.graph-item.tick::after,
+.graph-item-fixed.tick::after {
+	width: 1px;
+	height: 6px;
+	border-left: 1px solid #777;
+}
+
+.running {
+	background-color: #84f04e;
+}
+
+.waiting {
+	background-color: #409eff;
+}
+
+.fault {
+	background-color: #ea5b5b;
+}
+
+.full {
+	background-color: #e6a23c;
+}
+
+.lack {
+	background-color: #a69c8d;
+}
+
+.stop {
+	background-color: #000c;
+}
+
+.legend-row {
+	margin: 12px 0;
+	display: flex;
+	> .legend:not(:last-child) {
+		margin-right: 12px;
+	}
+
+	.legend {
+		display: flex;
+		align-items: center;
+	}
+
+	.icon {
+		width: 16px;
+		height: 16px;
+		margin-right: 8px;
+	}
+}
+</style>

src/views/group/base/groupTeam/index.vue

@@ -87,14 +87,14 @@ export default {
       formConfig: [
         {
           type: 'input',
-          label: '班次名称',
-          placeholder: '班次名称',
+          label: '班组名称',
+          placeholder: '班组名称',
           param: 'name'
         },
         {
           type: 'input',
-          label: '班次编码',
-          placeholder: '班次编码',
+          label: '班组编码',
+          placeholder: '班组编码',
           param: 'code'
         },
         {

src/views/group/base/groupTeamScheduling/components/groupUpperLower.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <el-drawer title="班组上下片" :visible.sync="visible" size="80%" @close='closeD'>
+      <div class="box">
+        <!-- 搜索工作栏 -->
+        <search-bar
+          :formConfigs="formConfig"
+          ref="searchBarForm"
+          @headBtnClick="buttonClick"
+        />
+        <!-- 列表 -->
+        <base-table
+          :page="queryParams.pageNo"
+          :limit="queryParams.pageSize"
+          :table-props="tableProps"
+          :table-data="list"
+          :max-height="tableH"
+        />
+        <pagination
+          :page.sync="queryParams.pageNo"
+          :limit.sync="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<script>
+const tableProps = [
+  {
+    prop: 'name',
+    label: '产线名称'
+  },
+  {
+    prop: 'code',
+    label: '投入数量/片'
+  },
+  {
+    prop: 'code1',
+    label: '产出数量/片'
+  },
+  {
+    prop: 'num2',
+    label: '产出面积/㎡'
+  },
+  {
+    prop: 'num3',
+    label: '损耗数量/片'
+  },
+  {
+    prop: 'num4',
+    label: '损耗面积/㎡'
+  },
+  {
+    prop: 'num5',
+    label: '损耗比例/%'
+  }
+]
+export default {
+  name: 'GroupUpperLower',
+  data() {
+    return {
+      visible: false,
+      formConfig: [
+        {
+          type: 'select',
+          label: '产线',
+          selectOptions: [],
+          param: 'xb2',
+          width: 120,
+          defaultSelect: 2 // 默认值
+        },
+        {
+          type: 'datePicker',
+          label: '时间范围',
+          dateType: 'daterange',
+          format: 'yyyy-MM-dd',
+          valueFormat: 'yyyy-MM-dd',
+          rangeSeparator: '-',
+          startPlaceholder: '开始时间',
+          endPlaceholder: '结束时间',
+          param: 'searchTime2'
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: this.$auth.hasPermi('base:group-team:create') ? 'button' : '',
+          btnName: '导出',
+          name: 'export',
+          color: 'success',
+          plain: true
+        }
+      ],
+      tableProps,
+      list: [],
+      tableH: this.tableHeight(260),
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20
+      },
+      total: 0
+    }
+  },
+  methods: {
+    init() {
+      window.addEventListener('resize', () => {
+        this.tableH = this.tableHeight(260)
+      })
+      this.visible = true
+    },
+    getList() {},
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.queryParams.pageNo = 1
+          this.queryParams.name = val.name
+          this.queryParams.code = val.code
+          this.getList()
+          break
+        default:
+          this.addOrEditTitle = '新增'
+          this.centervisible = true
+          this.$nextTick(() => {
+            this.$refs.groupList.init()
+          })
+      }
+    },
+    closeD() {
+      // this.$emit('closeDrawer')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.box {
+  padding: 0 32px;
+}
+</style>

src/views/group/base/groupTeamScheduling/index.vue

@@ -1,232 +1,66 @@
 <template>
   <div class="app-container">
-
-    <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="上班日期" prop="startDay">
-        <el-input v-model="queryParams.startDay" placeholder="请输入上班日期" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 操作工具栏 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['base:group-team-scheduling:create']">新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                   v-hasPermi="['base:group-team-scheduling:export']">导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <!-- 列表 -->
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="ID" align="center" prop="id" />
-      <el-table-column label="班组ID" align="center" prop="teamId" />
-      <el-table-column label="班次id" align="center" prop="classesId" />
-      <el-table-column label="上班日期" align="center" prop="startDay" />
-      <el-table-column label="上班时间" align="center" prop="startTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.startTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="下班时间" align="center" prop="endTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.endTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template v-slot="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['base:group-team-scheduling:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['base:group-team-scheduling:delete']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页组件 -->
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
-
-    <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="班组ID" prop="teamId">
-          <el-input v-model="form.teamId" placeholder="请输入班组ID" />
+    <div>
+      <el-form :inline="true" class="demo-form-inline">
+        <el-form-item label="月份选择">
+          <el-date-picker
+            v-model="queryParams.startDay"
+            type="month"
+            placeholder="选择月">
+          </el-date-picker>
         </el-form-item>
-        <el-form-item label="班次id" prop="classesId">
-          <el-input v-model="form.classesId" placeholder="请输入班次id" />
+        <el-form-item>
+          <el-button type="primary">自动排班</el-button>
         </el-form-item>
-        <el-form-item label="上班日期" prop="startDay">
-          <el-input v-model="form.startDay" placeholder="请输入上班日期" />
+        <el-form-item>
+          <el-button type="primary">编辑</el-button>
         </el-form-item>
-        <el-form-item label="上班时间" prop="startTime">
-          <el-date-picker clearable v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择上班时间" />
+        <el-form-item>
+          <el-button type="primary" plain @click="toUpperLower">班组上下片查询</el-button>
         </el-form-item>
-        <el-form-item label="下班时间" prop="endTime">
-          <el-date-picker clearable v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择下班时间" />
+        <el-form-item>
+          <el-button type="primary" plain>班组能源查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" plain>班组检测查询</el-button>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+    </div>
+    <!-- 班组上下片查询 -->
+    <group-upper-lower v-if="upperLowerVisible" ref="upperLowerParam"></group-upper-lower>
   </div>
 </template>
 
 <script>
-import { createGroupTeamScheduling, updateGroupTeamScheduling, deleteGroupTeamScheduling, getGroupTeamScheduling, getGroupTeamSchedulingPage, exportGroupTeamSchedulingExcel } from "@/api/base/groupTeamScheduling";
+import { createGroupTeamScheduling } from "@/api/base/groupTeamScheduling";
+import GroupUpperLower from "./components/groupUpperLower.vue"
 
 export default {
   name: "GroupTeamScheduling",
-  components: {
-  },
+  components: { GroupUpperLower },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 排班信息列表
-      list: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
+      monthList: [
+        {id: ''}
+      ],
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 10,
-        startDay: [],
+        pageSize: 10
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        teamId: [{ required: true, message: "班组ID不能为空", trigger: "blur" }],
-        classesId: [{ required: true, message: "班次id不能为空", trigger: "blur" }],
-      }
+      upperLowerVisible: false
     };
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
-    /** 查询列表 */
-    getList() {
-      this.loading = true;
-      // 执行查询
-      getGroupTeamSchedulingPage(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 = {
-        id: undefined,
-        teamId: undefined,
-        classesId: undefined,
-        startDay: undefined,
-        startTime: undefined,
-        endTime: undefined,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加排班信息";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id;
-      getGroupTeamScheduling(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) {
-          updateGroupTeamScheduling(this.form).then(response => {
-            this.$modal.msgSuccess("修改成功");
-            this.open = false;
-            this.getList();
-          });
-          return;
-        }
-        // 添加的提交
-        createGroupTeamScheduling(this.form).then(response => {
-          this.$modal.msgSuccess("新增成功");
-          this.open = false;
-          this.getList();
-        });
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const id = row.id;
-      this.$modal.confirm('是否确认删除排班信息编号为"' + id + '"的数据项?').then(function() {
-          return deleteGroupTeamScheduling(id);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      // 处理查询参数
-      let params = {...this.queryParams};
-      params.pageNo = undefined;
-      params.pageSize = undefined;
-      this.$modal.confirm('是否确认导出所有排班信息数据项?').then(() => {
-          this.exportLoading = true;
-          return exportGroupTeamSchedulingExcel(params);
-        }).then(response => {
-          this.$download.excel(response, '排班信息.xls');
-          this.exportLoading = false;
-        }).catch(() => {});
+    getList() {},
+    toUpperLower() {
+      this.upperLowerVisible = true
+      this.$nextTick(() => {
+        this.$refs.upperLowerParam.init()
+      })
     }
   }
 };

src/views/monitoring/equipmentAlarmLog/index.vue

@@ -0,0 +1,285 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@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="操作"
+				: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"
+			width="500px"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+		</base-dialog> -->
+	</div>
+</template>
+
+<script>
+import {
+	createEquipmentAlarmLog,
+	updateEquipmentAlarmLog,
+	deleteEquipmentAlarmLog,
+	getEquipmentAlarmLog,
+	getEquipmentAlarmLogPage,
+	exportEquipmentAlarmLogExcel,
+} from '@/api/monitoring/equipmentAlarmLog';
+import Editor from '@/components/Editor';
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import { getAccessToken } from '@/utils/auth';
+import { publicFormatter } from '@/utils/dict';
+
+export default {
+	name: 'EquipmentAlarmLog',
+	components: {
+		Editor,
+	},
+	mixins: [basicPageMixin],
+	data() {
+		return {
+			searchBarKeys: ['checkTime'],
+			tableBtn: [
+				this.$auth.hasPermi('base:equipment-alarm-log:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment-alarm-log:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{ width: 128, prop: 'productionLine', label: '产线', align: 'center' },
+				{ width: 128, prop: 'workshopSection', label: '工段', align: 'center' },
+				{ width: 128, prop: 'equipment', label: '设备名称', align: 'center' },
+				{
+					prop: 'alarmGrade',
+					label: '报警级别',
+					align: 'center',
+					filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
+				},
+				{
+					prop: 'createTime',
+					label: '报警时间',
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'alarmContent', label: '报警内容', align: 'center' },
+				// {
+				// 	_action: 'equipment-group-show-alert',
+				// 	label: '报警',
+				// 	align: 'center',
+				// 	subcomponent: {
+				// 		props: ['injectData'],
+				// 		render: function (h) {
+				// 			const _this = this;
+				// 			return h(
+				// 				'el-button',
+				// 				{
+				// 					props: { type: 'text', size: 'mini' },
+				// 					on: {
+				// 						click: function () {
+				// 							console.log('inejctdata', _this.injectData);
+				// 							_this.$emit('emitData', {
+				// 								action: _this.injectData._action,
+				// 								// value: _this.injectData.id,
+				// 								value: _this.injectData,
+				// 							});
+				// 						},
+				// 					},
+				// 				},
+				// 				'查看报警'
+				// 			);
+				// 		},
+				// 	},
+				// },
+			],
+			searchBarFormConfig: [
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					// format: 'yyyy-MM-dd HH:mm:ss',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'createTime',
+					// width: 350,
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				createTime: [],
+			},
+			// 表单参数
+			form: {},
+			// 表单校验
+			rules: {},
+		};
+	},
+	created() {
+		this.getList();
+	},
+	methods: {
+    /** 重写 basicPageMixin 里的 handleSearchBarBtnClick */
+		handleSearchBarBtnClick(btn) {
+			// 仅查询一种情况
+			this.queryParams.createTime = btn.createTime;
+			this.handleQuery();
+		},
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			getEquipmentAlarmLogPage(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 = {
+				id: undefined,
+				alarmId: undefined,
+				alarmContent: undefined,
+				alarmValue: undefined,
+				alarmEquipmentId: undefined,
+				remark: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加设备报警日志';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipmentAlarmLog(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) {
+					updateEquipmentAlarmLog(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipmentAlarmLog(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除设备报警日志编号为"' + id + '"的数据项?')
+				.then(function () {
+					return deleteEquipmentAlarmLog(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有设备报警日志数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentAlarmLogExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '设备报警日志.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>

src/views/monitoring/equipmentAlarmRealtime/index.vue

@@ -0,0 +1,326 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<el-form
+			:model="queryParams"
+			ref="queryForm"
+			size="small"
+			:inline="true"
+			v-show="showSearch"
+			label-width="68px">
+			<el-form-item label="创建时间" prop="createTime">
+				<el-date-picker
+					v-model="queryParams.createTime"
+					style="width: 240px"
+					value-format="yyyy-MM-dd HH:mm:ss"
+					type="daterange"
+					range-separator="-"
+					start-placeholder="开始日期"
+					end-placeholder="结束日期"
+					:default-time="['00:00:00', '23:59:59']" />
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" icon="el-icon-search" @click="handleQuery">
+					搜索
+				</el-button>
+				<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+			</el-form-item>
+		</el-form>
+
+		<!-- 操作工具栏 -->
+		<el-row :gutter="10" class="mb8">
+			<el-col :span="1.5">
+				<el-button
+					type="primary"
+					plain
+					icon="el-icon-plus"
+					size="mini"
+					@click="handleAdd"
+					v-hasPermi="['monitoring:equipment-alarm-realtime:create']">
+					新增
+				</el-button>
+			</el-col>
+			<el-col :span="1.5">
+				<el-button
+					type="warning"
+					plain
+					icon="el-icon-download"
+					size="mini"
+					@click="handleExport"
+					:loading="exportLoading"
+					v-hasPermi="['monitoring:equipment-alarm-realtime:export']">
+					导出
+				</el-button>
+			</el-col>
+			<right-toolbar
+				:showSearch.sync="showSearch"
+				@queryTable="getList"></right-toolbar>
+		</el-row>
+
+		<!-- 列表 -->
+		<el-table v-loading="loading" :data="list">
+			<el-table-column label="id" align="center" prop="id" />
+			<el-table-column
+				label="报警信息ID，关联base_equipment_group_alarm表"
+				align="center"
+				prop="alarmId" />
+			<el-table-column
+				label="字符型报警编码"
+				align="center"
+				prop="alarmContent" />
+			<el-table-column label="报警详细描述" align="center" prop="description" />
+			<el-table-column
+				label="报警设备id 关联equipment表"
+				align="center"
+				prop="alarmEquipmentId" />
+			<el-table-column label="实时报警值" align="center" prop="alarmValue" />
+			<el-table-column
+				label="状态，0 正常 1 报警中"
+				align="center"
+				prop="alarmStatus" />
+			<el-table-column
+				label="创建时间"
+				align="center"
+				prop="createTime"
+				width="180">
+				<template v-slot="scope">
+					<span>{{ parseTime(scope.row.createTime) }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+				label="操作"
+				align="center"
+				class-name="small-padding fixed-width">
+				<template v-slot="scope">
+					<el-button
+						size="mini"
+						type="text"
+						icon="el-icon-edit"
+						@click="handleUpdate(scope.row)"
+						v-hasPermi="['monitoring:equipment-alarm-realtime:update']">
+						修改
+					</el-button>
+					<el-button
+						size="mini"
+						type="text"
+						icon="el-icon-delete"
+						@click="handleDelete(scope.row)"
+						v-hasPermi="['monitoring:equipment-alarm-realtime:delete']">
+						删除
+					</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		<!-- 分页组件 -->
+		<pagination
+			v-show="total > 0"
+			:total="total"
+			:page.sync="queryParams.pageNo"
+			:limit.sync="queryParams.pageSize"
+			@pagination="getList" />
+
+		<!-- 对话框(添加 / 修改) -->
+		<el-dialog
+			:title="title"
+			:visible.sync="open"
+			width="500px"
+			v-dialogDrag
+			append-to-body>
+			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
+				<el-form-item
+					label="报警信息ID，关联base_equipment_group_alarm表"
+					prop="alarmId">
+					<el-input
+						v-model="form.alarmId"
+						placeholder="请输入报警信息ID，关联base_equipment_group_alarm表" />
+				</el-form-item>
+				<el-form-item label="字符型报警编码">
+					<editor v-model="form.alarmContent" :min-height="192" />
+				</el-form-item>
+				<el-form-item label="报警详细描述">
+					<editor v-model="form.description" :min-height="192" />
+				</el-form-item>
+				<el-form-item
+					label="报警设备id 关联equipment表"
+					prop="alarmEquipmentId">
+					<el-input
+						v-model="form.alarmEquipmentId"
+						placeholder="请输入报警设备id 关联equipment表" />
+				</el-form-item>
+				<el-form-item label="实时报警值" prop="alarmValue">
+					<el-input v-model="form.alarmValue" placeholder="请输入实时报警值" />
+				</el-form-item>
+				<el-form-item label="状态，0 正常 1 报警中" prop="alarmStatus">
+					<el-radio-group v-model="form.alarmStatus">
+						<el-radio label="1">请选择字典生成</el-radio>
+					</el-radio-group>
+				</el-form-item>
+			</el-form>
+			<div slot="footer" class="dialog-footer">
+				<el-button type="primary" @click="submitForm">确 定</el-button>
+				<el-button @click="cancel">取 消</el-button>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import {
+	createEquipmentAlarmRealtime,
+	updateEquipmentAlarmRealtime,
+	deleteEquipmentAlarmRealtime,
+	getEquipmentAlarmRealtime,
+	getEquipmentAlarmRealtimePage,
+	exportEquipmentAlarmRealtimeExcel,
+} from '@/api/monitoring/equipmentAlarmRealtime';
+import Editor from '@/components/Editor';
+
+export default {
+	name: 'EquipmentAlarmRealtime',
+	components: {
+		Editor,
+	},
+	data() {
+		return {
+			// 遮罩层
+			loading: true,
+			// 导出遮罩层
+			exportLoading: false,
+			// 显示搜索条件
+			showSearch: true,
+			// 总条数
+			total: 0,
+			// 设备报警实时信息列表
+			list: [],
+			// 弹出层标题
+			title: '',
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				createTime: [],
+			},
+			// 表单参数
+			form: {},
+			// 表单校验
+			rules: {},
+		};
+	},
+	created() {
+		this.getList();
+	},
+	methods: {
+		/** 查询列表 */
+		getList() {
+			this.loading = true;
+			// 执行查询
+			getEquipmentAlarmRealtimePage(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 = {
+				id: undefined,
+				alarmId: undefined,
+				alarmContent: undefined,
+				description: undefined,
+				alarmEquipmentId: undefined,
+				alarmValue: undefined,
+				alarmStatus: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加设备报警实时信息';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getEquipmentAlarmRealtime(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) {
+					updateEquipmentAlarmRealtime(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createEquipmentAlarmRealtime(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除设备报警实时信息编号为"' + id + '"的数据项?')
+				.then(function () {
+					return deleteEquipmentAlarmRealtime(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有设备报警实时信息数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportEquipmentAlarmRealtimeExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '设备报警实时信息.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>

src/views/monitoring/equipmentFullParams/index.vue

@@ -0,0 +1,307 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-08-31 09:14:19
+    description: 设备全参数查询
+-->
+
+<template>
+	<div class="app-container full-param-page">
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
+
+		<!-- <base-table
+			:table-props="[
+				{ type: 'index', label: '序号' },
+				{ prop: 'name', label: '设备名称', align: 'center' },
+				{ prop: 'code', label: '设备代码', align: 'center' },
+				{ prop: 'time', label: '时间', align: 'center' },
+			]"
+			:table-data="[
+				{ index: 1, name: '1', code: 'c1', time: '2021-08-31 09:14:19' },
+				{ index: 2, name: '2', code: 'c2', time: '2021-08-31 09:14:19' },
+				{ index: 3, name: '3', code: 'c3', time: '2021-08-31 09:14:19' },
+				{ index: 4, name: '4', code: 'c4', time: '2021-08-31 09:14:19' },
+				{ index: 5, name: '5', code: 'c5', time: '2021-08-31 09:14:19' },
+			]"
+			:span-method="
+				({ rowIndex, columnIndex }) => {
+					if (rowIndex == 1 && columnIndex == 0) {
+						return [1, 3];
+					}
+					return [1, 1];
+				}
+			"
+			@emitFun="(val) => handleEmitFun(table, val)"></base-table> -->
+
+		<div class="tables">
+			<div class="custom-table" v-for="table in tableList" :key="table.key">
+				<!-- {{ JSON.stringify(spanMethod) }} -->
+				<base-table
+					:key="table.key + '__basetable'"
+					:table-props="table.tableProps"
+					:table-data="table.dataManager?.dataList ?? []"
+					:span-method="spanMethod"
+					@emitFun="(val) => handleEmitFun(table, val)"></base-table>
+				<pagination
+					:key="table.key + '__pagination'"
+					v-show="table.total > 0"
+					:total="table.total"
+					:page.sync="table.pageNo"
+					:limit.sync="table.pageSize"
+					:page-size="table.pageSize"
+					:page-sizes="[1, 3, 5, 10, 20]"
+					@pagination="
+						({ page, limit, current }) =>
+							getListFor(table, { page, limit, current })
+					" />
+			</div>
+			<!-- v-show="table.dataManager?.total > 0"
+				:total="table.dataManager?.total || 0" -->
+			<!-- @size-change="($event) => handleSizeChange(table, $event)" -->
+		</div>
+	</div>
+</template>
+
+<script>
+import LocalDataManager from './utils/local-data-manager';
+import response from './response';
+import moment from 'moment';
+
+export default {
+	name: 'EquipmentFullParams',
+	components: {},
+	props: {},
+	data() {
+		const now = new Date();
+		const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
+		const today = new Date(y, m, d, 0, 0, 0, 0).getTime();
+		const aWeekAgo = today - 3600 * 1000 * 24 * 7;
+		return {
+			tableList: [],
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '设备名称',
+					placeholder: '请输入设备名称',
+					param: 'name',
+					disabled: true,
+				},
+				{
+					type: 'input',
+					label: '设备编码',
+					placeholder: '请输入设备编码',
+					param: 'code',
+					disabled: true,
+				},
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					format: 'yyyy-MM-dd HH:mm:ss',
+					// valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					valueFormat: 'timestamp',
+					rangeSeparator: '-',
+					startPlaceholder: '开始时间',
+					endPlaceholder: '结束时间',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'timeVal',
+					width: 350,
+					// defaultSelect: [new Date(aWeekAgo), new Date(today)],
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+			queryParams: {
+				id: null,
+				time: [new Date(aWeekAgo), new Date(today)],
+			},
+			tableList: [
+				{
+					key: 'base-table__key__1',
+					tableProps: [],
+					list: [],
+					pageNo: 1,
+					pageSize: 3,
+					total: 0,
+				},
+			],
+		};
+	},
+	computed: {
+		id() {
+			return this.$route.params.equipmentId;
+		},
+		code() {
+			return this.$route.params.equipmentCode;
+		},
+		name() {
+			return this.$route.params.equipmentName;
+		},
+	},
+	mounted() {
+		if (this.id) this.$set(this.queryParams, 'id', this.id);
+		if (this.code)
+			this.$set(this.searchBarFormConfig[0], 'defaultSelect', this.code);
+		if (this.name)
+			this.$set(this.searchBarFormConfig[1], 'defaultSelect', this.name);
+
+		this.handleResponse();
+	},
+	methods: {
+		buildProps(table) {
+			console.log('building props', table);
+			// 通过 otherList 来构建 props
+			const { otherList } = table;
+			const props = [
+				{
+					// type: 'index',
+					width: 48,
+					prop: 'index',
+					label: '序号',
+					align: 'center',
+				},
+				{
+					width: 160,
+					prop: 'time',
+					label: '时间',
+					align: 'center',
+				},
+				{
+					width: 200,
+					prop: 'plcCode',
+					label: 'PLC编码',
+					align: 'center',
+				},
+			];
+			const firstLineData = {
+				index: '参考值： [最小]-[最大][/标准]',
+				time: null, // 此处必须是空白
+				plcCode: null, // 此处必须是空白
+			};
+			otherList.forEach((item) => {
+				props.push({
+					label: item.name,
+					align: 'center',
+					prop: item.name,
+					width: 128,
+				});
+				firstLineData[item.name] = `${item.minValue ?? ''}-${
+					item.maxValue ?? ''
+				}${item.defaultValue != null ? '/' + item.defaultValue : ''}`;
+			});
+			return { props, firstLineData };
+		},
+
+		handleResponse() {
+			const { code, data } = response;
+			if (code == 0) {
+				console.log('response', code, data);
+
+				// 处理一个表格
+				data.forEach((table, index) => {
+					console.log('handle index:', index, table);
+					const { props: tableProps, firstLineData } = this.buildProps(table);
+					this.$set(this.tableList, index, {
+						key: 'base-table__key__' + index,
+						tableProps,
+						list: [firstLineData],
+						dataManager: null,
+						pageNo: 1,
+						pageSize: 5,
+						total: 0,
+					});
+
+					// 处理某一表格的各个行
+					const { data } = table;
+					data.forEach((row, idx) => {
+						const listItem = {
+							index: idx + 1,
+							time: moment(+row.time).format('YYYY-MM-DD HH:mm:ss'),
+							plcCode: row.plcCode,
+						};
+						row.data.forEach((column) => {
+							listItem[column.dynamicName] = column.dynamicValue;
+						});
+						this.tableList[index].list.push(listItem);
+						this.tableList[index].total++;
+					});
+
+					// 处理分页
+					const { pageNo, pageSize, list } = this.tableList[index];
+					this.tableList[index].dataManager = new LocalDataManager(
+						list,
+						pageNo,
+						pageSize
+					);
+				});
+			}
+		},
+
+		spanMethod({ row, column, rowIndex, columnIndex }) {
+			if (rowIndex == 0 && columnIndex == 0) {
+				return [1, 3];
+			} else if (rowIndex == 0 && (columnIndex == 1 || columnIndex == 2)) {
+				return [0, 0];
+			}
+			return [1, 1];
+		},
+
+		/** 查询 */
+		async handleQuery() {
+			const { data } = this.$axios({
+				url: '/monitoring/equipment-monitor/runLog',
+				method: 'get',
+				params: this.queryParams,
+			});
+			console.log('data', data);
+		},
+
+		async handleSearchBarBtnClick({ btnName, timeVal }) {
+			if (timeVal && timeVal.length > 0) {
+				this.queryParams.time = timeVal;
+			} else {
+				this.queryParams.time = [];
+			}
+			await this.handleQuery();
+		},
+
+		handleEmitFun(table, val) {
+			console.log('table val', table, val);
+		},
+
+		/** 为某个 table 获取 list 数据 */
+		getListFor(table, { page, limit, current }) {
+			console.log('get list for', table, { page, limit, current });
+			table.dataManager.pageNo = page ?? current;
+			table.dataManager.pageSize = limit;
+		},
+	},
+};
+</script>
+
+<style scoped>
+.full-param-page {
+	position: relative;
+}
+
+.tables {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 18px;
+}
+
+.tables >>> .baseTable {
+	overflow-x: hidden;
+}
+
+.custom-table {
+	overflow-x: hidden;
+}
+</style>

src/views/monitoring/equipmentFullParams/response.js

@@ -0,0 +1,247 @@
+export default {
+	"code": 0,
+	"data": [
+		// 一个表格
+		{
+			"data": [
+				// 一行参数
+				{
+					"time": "1694056192800",
+					"plcCode": "PLC_CODE_1",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+						{ "id": 'param-4', "parentId": 0, "dynamicName": "P1V4", "dynamicValue": 15 },
+						{ "id": 'param-5', "parentId": 0, "dynamicName": "P1V5", "dynamicValue": 15 },
+						{ "id": 'param-6', "parentId": 0, "dynamicName": "P1V6", "dynamicValue": 15 },
+					]
+				}
+			],
+			"otherList": [
+				// 一个参数的属性
+				{
+					"id": "attr-1",
+					"plcParamName": "P1V1",
+					"name": "P1V1", // 和 dynamicName 对应
+					"minValue": 1,
+					"maxValue": 100
+				},
+				{
+					"id": "attr-2",
+					"plcParamName": "P1V2",
+					"name": "P1V2",
+					"minValue": 10,
+					"maxValue": 90,
+					"defaultValue": 24
+				},
+				{
+					"id": "attr-3",
+					"plcParamName": "P1V3",
+					"name": "P1V3",
+					"minValue": 10,
+					"maxValue": 98
+				},
+				{
+					"id": "attr-4",
+					"plcParamName": "P1V4",
+					"name": "P1V4",
+					"minValue": 10,
+					"maxValue": 90
+				},
+				{
+					"id": "attr-5",
+					"plcParamName": "P1V5",
+					"name": "P1V5",
+					"minValue": null,
+					"maxValue": null
+				},
+				{
+					"id": "attr-6",
+					"plcParamName": "P1V6",
+					"name": "P1V6",
+					"minValue": null,
+					"maxValue": null,
+					"defaultValue": false
+				},
+			],
+			"nameData": [],
+			"otherMap": []
+		},
+		// 一个表格
+		{
+			"data": [
+				// 一行参数
+				{
+					"time": "1694056100800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694056102800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				}
+			],
+			"otherList": [
+				// 一个参数的属性
+				{
+					"id": "attr-1",
+					"plcParamName": "P1V1",
+					"name": "P1V1", // 和 dynamicName 对应
+					"minValue": 1,
+					"maxValue": 100
+				},
+				{
+					"id": "attr-2",
+					"plcParamName": "P1V2",
+					"name": "P1V2",
+					"minValue": 10,
+					"maxValue": 90
+				},
+				{
+					"id": "attr-3",
+					"plcParamName": "P1V3",
+					"name": "P1V3",
+					"minValue": 10,
+					"maxValue": 98
+				},
+			],
+			"nameData": [],
+			"otherMap": []
+		},
+		// 一个表格
+		{
+			"data": [
+				// 一行参数
+				{
+					"time": "1694056100800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694056102800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694056109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694066109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694067109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694068109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694069109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694071109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				}
+			],
+			"otherList": [
+				// 一个参数的属性
+				{
+					"id": "attr-1",
+					"plcParamName": "P1V1",
+					"name": "P1V1", // 和 dynamicName 对应
+					"minValue": 1,
+					"maxValue": 100
+				},
+				{
+					"id": "attr-2",
+					"plcParamName": "P1V2",
+					"name": "P1V2",
+					"minValue": 10,
+					"maxValue": 90
+				},
+				{
+					"id": "attr-3",
+					"plcParamName": "P1V3",
+					"name": "P1V3",
+					"minValue": 10,
+					"maxValue": 98
+				}
+			],
+			"nameData": [],
+			"otherMap": []
+		}
+	]
+}

src/views/monitoring/equipmentFullParams/utils/local-data-manager.js

@@ -0,0 +1,36 @@
+export default class LocalDataManager {
+    constructor(dataList, pageNo, pageSize) {
+        this._dataListStore = dataList;
+        this._pageNo = pageNo;
+        this._pageSize = pageSize;
+    }
+
+    set pageNo(pageNo) {
+        console.log('set pageNo', pageNo);
+        this._pageNo = pageNo;
+    }
+
+    set pageSize(pageSize) {
+        console.log('set pageSize', pageSize);
+        this._pageSize = pageSize;
+    }
+
+    get dataList() {
+        const firstLine = this._dataListStore[0];
+        const realDataList = this._dataListStore.slice(1);
+        return [
+            firstLine,
+            ...realDataList.slice((this._pageNo - 1) * this._pageSize, this._pageNo * this._pageSize)
+        ]
+    }
+
+    get total() {
+        return this._dataListStore.length;
+    }
+
+    deleteData(id) {
+        const idx = this._dataListStore.findIndex(item => item.id == id);
+        this._dataListStore.splice(idx, 1);
+        // send http request
+    }
+}

src/views/monitoring/equipmentProcessAmount/graph.vue

@@ -0,0 +1,126 @@
+<!-- 
+    filename: graph.vue
+    author: liubin
+    date: 2023-08-31 14:00:02
+    description: 
+-->
+
+<template>
+	<div class="chart-wrapper">
+		<div class="chart" ref="chart"></div>
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'LineChartInEquipmentProcessAmount',
+	components: {},
+	props: ['equipmentList'],
+	data() {
+		return {
+			chart: null,
+			option: {
+				grid: {
+					top: 64,
+					left: 56,
+					right: 24,
+					bottom: 56,
+				},
+				title: {
+					show: true,
+					text: '各设备加工数量',
+					textStyle: {
+						color: '#232323',
+						fontSize: 16,
+					},
+					left: 'center',
+					top: 24,
+				},
+				yAxis: {
+					type: 'category',
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: '#ccc',
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+					data: [],
+					name: '设备名',
+					nameTextStyle: {
+						fontSize: 14,
+					},
+				},
+				xAxis: {
+					type: 'value',
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: '#ccc',
+						},
+					},
+				},
+				series: [
+					{
+						// data: [120, 200, 150, 80, 70, 110, 130],
+						data: [],
+						type: 'bar',
+						barWidth: 20,
+						label: {
+							show: true,
+							distance: 50,
+							formatter: '{c}',
+						},
+						showBackground: true,
+						backgroundStyle: {
+							color: 'rgba(180, 180, 180, 0.2)',
+						},
+					},
+				],
+			},
+		};
+	},
+	mounted() {
+		// console.log('this.eq list', this.equipmentList);
+		if (!this.chart) this.chart = echarts.init(this.$refs.chart);
+
+		this.$nextTick(() => {
+			this.chart.setOption(this.updateConfig(this.option));
+		});
+	},
+	beforeDestroy() {
+		this.chart.dispose();
+	},
+	methods: {
+		updateConfig(config) {
+			let nameData = [];
+			let valueData = [];
+			this.equipmentList.map((eq) => {
+				nameData.push(eq.equipmentName);
+				valueData.push(eq.totalQuantity);
+			});
+			config.yAxis.data = nameData;
+			config.series[0].data = valueData;
+			return config;
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.chart-wrapper {
+	height: 100%;
+	flex: 1;
+	// background: #f9f9f9;
+}
+
+.chart {
+	height: 100%;
+	width: 100%;
+}
+</style>

src/views/monitoring/equipmentProcessAmount/index.vue

@@ -0,0 +1,341 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-08-30 14:02:49
+    description: 设备加工数量
+-->
+
+<template>
+	<div style="flex: 1; display: flex; background: #f2f4f9">
+		<div
+			class="app-container"
+			style="margin-right: 12px; border-radius: 8px; background: #fff">
+			<!-- side bar  -->
+			<div
+				class="side-bar__left"
+				style="width: 240px; padding: 12px; height: 100%">
+				<el-tree
+					:data="sidebarContent"
+					:props="treeProps"
+					@node-click="handleSidebarItemClick" />
+			</div>
+		</div>
+		<div
+			class="app-container equipment-process-amount"
+			style="flex: 1; border-radius: 8px; background: #fff">
+			<!-- main area  -->
+			<div class="main-content" style="display: flex; flex-direction: column">
+				<SearchBar
+					:formConfigs="searchBarFormConfig"
+					ref="search-bar"
+					@headBtnClick="handleSearchBarBtnClick" />
+
+				<transition appear name="vvv" mode="out-in">
+					<base-table
+						v-if="mode == 'table'"
+						:table-props="tableProps"
+						:page="1"
+						:limit="999"
+						:table-data="list"
+						@emitFun="handleEmitFun">
+						<!-- <method-btn
+							v-if="tableBtn.length"
+						slot="handleBtn"
+						label="操作"
+						:method-list="tableBtn"
+						@clickBtn="handleTableBtnClick" /> -->
+					</base-table>
+
+					<div class="graph" style="height: 56vh;" v-else>
+						<!-- graph  -->
+						<Graph v-if="list.length" :equipment-list="list" />
+						<div v-else style="color: #c7c7c7; text-align: center; margin-top: 20px;">没有设备</div>
+					</div>
+				</transition>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import Graph from './graph.vue';
+
+export default {
+	name: 'EquipmentProcessAmount',
+	components: { Graph },
+	props: {},
+	data() {
+		return {
+			sidebarContent: [
+				// {
+				// 	id: 'fc1',
+				// 	name: '工厂',
+				// 	lines: [
+				// 		{
+				// 			name: '产线1',
+				// 			id: 'pl1',
+				// 			sections: [
+				// 				{
+				// 					name: '工段1',
+				// 					id: 'pl1ws1',
+				// 					equipments: [
+				// 						{
+				// 							name: '设备1',
+				// 							id: 'pl1ws1--eq1',
+				// 						},
+				// 						{
+				// 							name: '设备2',
+				// 							id: 'pl1ws1--eq2',
+				// 						},
+				// 						{
+				// 							name: '设备3',
+				// 							id: 'pl1ws1--eq3',
+				// 						},
+				// 					],
+				// 				},
+				// 				{
+				// 					name: '工段2',
+				// 					id: 'pl1ws2',
+				// 					equipments: [
+				// 						{
+				// 							name: '设备1',
+				// 							id: 'pl2ws1--eq1',
+				// 						},
+				// 						{
+				// 							name: '设备2',
+				// 							id: 'pl2ws1--eq2',
+				// 						},
+				// 						{
+				// 							name: '设备3',
+				// 							id: 'pl2ws1--eq3',
+				// 						},
+				// 					],
+				// 				},
+				// 				{
+				// 					name: '工段3',
+				// 					id: 'pl1ws3',
+				// 					equipments: [
+				// 						{
+				// 							name: '设备1',
+				// 							id: 'pl3ws1--eq1',
+				// 						},
+				// 						{
+				// 							name: '设备2',
+				// 							id: 'pl3ws1--eq2',
+				// 						},
+				// 						{
+				// 							name: '设备3',
+				// 							id: 'pl3ws1--eq3',
+				// 						},
+				// 					],
+				// 				},
+				// 			],
+				// 		},
+				// 		{
+				// 			name: '产线2',
+				// 			id: 'pl2',
+				// 			sections: [
+				// 				{
+				// 					name: '工段1',
+				// 					id: 'pl2ws1',
+				// 				},
+				// 				{
+				// 					name: '工段2',
+				// 					id: 'pl2ws2',
+				// 				},
+				// 				{
+				// 					name: '工段3',
+				// 					id: 'pl2ws3',
+				// 				},
+				// 			],
+				// 		},
+				// 	],
+				// },
+			],
+			searchBarFormConfig: [
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'timeVal',
+					width: 350,
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '表格',
+					name: 'table',
+					plain: true,
+					color: 'success',
+				},
+				{
+					type: 'button',
+					btnName: '图表',
+					name: 'graph',
+					plain: true,
+					color: 'warning',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+			tableProps: [
+				{ prop: 'lineName', label: '产线', align: 'center' },
+				{ prop: 'sectionName', label: '工段', align: 'center' },
+				{ prop: 'externalCode', label: '设备编码', align: 'center' },
+				{ prop: 'equipmentName', label: '设备名称', align: 'center' },
+				{ prop: 'totalQuantity', label: '加工数量', align: 'center' },
+			],
+			mode: 'table', // table | graph
+			queryParams: {
+				// pageNo: 1,
+				// pageSize: 999,
+				recordTime: [],
+				equipmentId: null,
+				lineId: null,
+				sectionId: null,
+				productId: null,
+			},
+			list: [],
+			treeProps: {
+				children: 'children',
+				label: 'label',
+			},
+		};
+	},
+	mounted() {
+		this.getTree();
+	},
+	methods: {
+		/** build side bar tree */
+		buildTree(data) {
+			data.forEach((factory) => {
+				this.$set(factory, 'label', factory.name);
+				this.$set(factory, 'type', '工厂');
+				delete factory.name;
+				factory.children = factory.lines;
+				delete factory.lines;
+				factory.children?.forEach((line) => {
+					this.$set(line, 'label', line.name);
+					this.$set(line, 'type', '产线');
+					delete line.name;
+					line.children = line.sections;
+					delete line.sections;
+					line.children?.forEach((ws) => {
+						this.$set(ws, 'label', ws.name);
+						this.$set(ws, 'type', '工段');
+						delete ws.name;
+						ws.children = ws.equipments;
+						delete ws.equipments;
+						ws.children?.forEach((eq) => {
+							this.$set(eq, 'label', eq.name);
+							this.$set(eq, 'type', '设备');
+							delete eq.name;
+						});
+					});
+				});
+			});
+		},
+
+		async getTree() {
+			const { data } = await this.$axios('/base/factory/getTree');
+			this.sidebarContent = data;
+			this.buildTree(data);
+		},
+
+		handleSidebarItemClick({ label, id, type }) {
+			console.log('lable clicked!', label, id, type);
+			switch (type) {
+				case '设备':
+					this.queryParams.equipmentId = id;
+					break;
+				case '工段':
+					this.queryParams.equipmentId = null;
+					this.queryParams.sectionId = id;
+					break;
+				case '产线':
+					this.queryParams.equipmentId = null;
+					this.queryParams.sectionId = null;
+					this.queryParams.lineId = id;
+					break;
+				case '工厂':
+					this.queryParams.equipmentId = null;
+					this.queryParams.sectionId = null;
+					this.queryParams.lineId = null;
+					break;
+			}
+		},
+
+		handleEmitFun() {},
+
+		handleSearchBarBtnClick(btn) {
+			switch (btn.btnName) {
+				case 'table':
+					this.mode = 'table';
+					break;
+				case 'graph':
+					this.mode = 'graph';
+					break;
+				case 'search':
+					if (btn.timeVal != null && btn.timeVal.length > 0)
+						this.queryParams.recordTime = btn.timeVal;
+					else this.queryParams.recordTime = null;
+					this.handleQuery();
+					break;
+			}
+		},
+
+		async handleQuery() {
+			console.log('queryParams', this.queryParams);
+			const { data } = await this.$axios({
+				url: '/monitoring/equipment-monitor/quantity-det-list',
+				method: 'get',
+				params: this.queryParams,
+			});
+			this.list = data;
+		},
+	},
+};
+</script>
+
+<style scoped>
+.side-bar__left >>> .is-current {
+	color: #111;
+	background: #f2f4f7;
+}
+
+.vvv-enter,
+.vvv-leave-to {
+	/* transform: translateY(24px) scaleY(0); */
+	transform: translateY(24px);
+	opacity: 0;
+}
+
+.vvv-enter-active,
+.vvv-leave-active {
+	transition: all 0.3s ease-out;
+}
+
+.vvv-enter-to,
+.vvv-leave {
+	/* transform: translateY(0) scaleY(1); */
+	transform: translateY(0);
+}
+</style>

src/views/monitoring/equipmentRecentHours/index.vue

@@ -0,0 +1,181 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-08-04 14:44:58
+    description: 设备24小时生产记录
+-->
+
+<template>
+	<div class="app-container">
+		<SearchBar
+			:formConfigs="[{ label: '设备近24小时生产记录', type: 'title' }]"
+			ref="search-bar" />
+		<el-skeleton v-if="initing" :rows="6" animated />
+		<base-table
+			v-else
+			:span-method="mergeColumnHandler"
+			:table-props="tableProps"
+			:table-data="list"
+			@emitFun="handleEmitFun"></base-table>
+		<!-- :page="queryParams.pageNo"
+			:limit="queryParams.pageSize" -->
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'QualityRecentHours',
+	components: {},
+	props: {},
+	data() {
+		return {
+			initing: false,
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
+			list: [],
+			tableProps: [],
+			spanInfo: {},
+		};
+	},
+	computed: {},
+	mounted() {
+		this.getList();
+	},
+	methods: {
+		/** 构建tableProps - 依据第一个元素所提供的信息 */
+		buildProps(item) {
+			const {
+				data: [{ hourData }],
+			} = item;
+
+			const props = [
+				{ prop: 'productLine', label: '产线', align: 'center' },
+				{ prop: 'specification', label: '规格', align: 'center' },
+				{ prop: 'equipmentName', label: '设备', align: 'center' },
+				{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
+			];
+
+			for (const key of Object.keys(hourData).sort()) {
+				const subprop = {
+					label: key,
+					align: 'center',
+					children: [
+						{ prop: key + '__in', label: '进数据', align: 'center' },
+						{ prop: key + '__out', label: '出数据', align: 'center' },
+						{ prop: key + '__nok', label: '报废数据', align: 'center' },
+						{
+							prop: key + '__ratio',
+							label: '报废率',
+							align: 'center',
+							filter: (val) => (val != null ? val + ' %' : '-'),
+						},
+					],
+				};
+				props.push(subprop);
+			}
+
+			this.tableProps = props;
+		},
+
+		/** 把 list 里的数据转换成 tableProps 对应的格式 */
+		convertList(list) {
+			this.list.splice(0);
+			let rowIndex = 0;
+			for (const line of list) {
+				const { productLine, specification, data } = line;
+
+				// 设置span的行数
+				this.spanInfo[rowIndex] = data.length;
+				for (const equipment of data) {
+					const { equipmentName, totalQuantity } = equipment;
+					let row = {
+						productLine,
+						specification: specification.join('、'),
+						equipmentName,
+						totalQuantity,
+					};
+					rowIndex += 1;
+					for (const [key, hourData] of Object.entries(equipment.hourData)) {
+						const { inQuantity, outQuantity, nokQuantity, scrapRatio } =
+							hourData;
+						row[key + '__in'] = inQuantity;
+						row[key + '__out'] = outQuantity;
+						row[key + '__nok'] = nokQuantity;
+						row[key + '__ratio'] = scrapRatio;
+					}
+					this.list.push(row);
+				}
+			}
+		},
+
+		buildData(data) {
+			this.convertList(data);
+		},
+
+		/** 合并table列的规则 */
+		mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
+			if (columnIndex == 0 || columnIndex == 1) {
+				if (this.spanInfo[rowIndex]) {
+					return [
+						this.spanInfo[rowIndex], // row span
+						1, // col span
+					];
+				} else {
+					return [0, 0];
+				}
+			}
+		},
+
+		async getList() {
+			const { data } = await this.$axios({
+				url: '/monitoring/equipment-monitor/recent-24-hours',
+				method: 'get',
+			});
+
+			// const data = this.res.data;
+			// console.log('recent-24', data);
+
+			this.initing = true;
+			this.buildProps(data[0]);
+			this.buildData(data);
+			this.queryParams.pageSize = this.list.length;
+
+			setTimeout(() => {
+				this.initing = false;
+			}, 1000);
+		},
+
+		handleEmitFun(payload) {
+			console.log('payload', payload);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+::-webkit-scrollbar {
+	display: none;
+}
+
+pre {
+	margin: 10px;
+	background: #f6f8faf6;
+	border: 1px solid #e1e4e8;
+	padding: 12px;
+	border-radius: 12px;
+	position: fixed;
+	// top: 15vh;
+	top: 10vh;
+	left: 0;
+	max-height: 80vh;
+	overflow-y: auto;
+	z-index: 100000;
+	box-shadow: 0 0 32px 12px #0001;
+}
+
+code {
+	font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
+}
+</style>

src/views/monitoring/equipmentStatusAndParams/index.vue

@@ -0,0 +1,283 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick"
+			@select-changed="handleSearchBarItemChange" />
+
+		<!-- 列表 -->
+		<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="操作"
+				: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"
+			width="500px"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+		</base-dialog> -->
+	</div>
+</template>
+
+<script>
+import moment from 'moment';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+import { publicFormatter } from '@/utils/dict';
+
+export default {
+	name: 'EquipmentStatusAndParams',
+
+	mixins: [basicPageMixin],
+	data() {
+		return {
+			searchBarKeys: ['equipmentId', 'productionLineId'],
+			tableBtn: [
+				this.$auth.hasPermi('base:equipment-alarm-log:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:equipment-alarm-log:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{
+					width: 128,
+					prop: 'equipmentName',
+					label: '设备名称',
+					align: 'center',
+				},
+				{
+					width: 128,
+					prop: 'equipmentCode',
+					label: '设备编码',
+					align: 'center',
+				},
+				{ width: 128, prop: 'inQuantity', label: '投入数', align: 'center' },
+				{ width: 128, prop: 'outQuantity', label: '产出数', align: 'center' },
+				{
+					width: 128,
+					prop: 'run',
+					label: '是否运行',
+					align: 'center',
+					filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
+				},
+				{
+					width: 128,
+					prop: 'status',
+					label: '状态',
+					align: 'center',
+					filter: (val) =>
+						val != null ? ['正常', '计划停机', '故障'][val] : '-',
+				},
+				{
+					width: 128,
+					prop: 'error',
+					label: '是否故障',
+					align: 'center',
+					filter: (val) => (val != null ? (val ? '是' : '否') : '-'),
+				},
+				{
+					prop: 'quantityRecordTime',
+					label: '生产量记录时间',
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{
+					prop: 'statusRecordTime',
+					label: '状态量记录时间',
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{
+					_action: 'params-monitor',
+					label: '参数监控',
+					align: 'center',
+					subcomponent: {
+						props: ['injectData'],
+						render: function (h) {
+							const _this = this;
+							return h(
+								'el-button',
+								{
+									props: { type: 'text', size: 'mini' },
+									on: {
+										click: function () {
+											console.log('inejctdata', _this.injectData);
+											_this.$emit('emitData', {
+												action: _this.injectData._action,
+												// value: _this.injectData.id,
+												value: _this.injectData,
+											});
+										},
+									},
+								},
+								'查看监控'
+							);
+						},
+					},
+				},
+			],
+			searchBarFormConfig: [
+				// {
+				// 	type: 'datePicker',
+				// 	label: '时间段',
+				// 	dateType: 'daterange', // datetimerange
+				// 	// format: 'yyyy-MM-dd HH:mm:ss',
+				// 	format: 'yyyy-MM-dd',
+				// 	valueFormat: 'yyyy-MM-dd HH:mm:ss',
+				// 	rangeSeparator: '-',
+				// 	startPlaceholder: '开始日期',
+				// 	endPlaceholder: '结束日期',
+				// 	defaultTime: ['00:00:00', '23:59:59'],
+				// 	param: 'createTime',
+				// 	// width: 350,
+				// },
+				{
+					type: 'select',
+					label: '产线',
+					onchange: true,
+					placeholder: '请选择产线',
+					selectOptions: [],
+					param: 'productionLineId',
+				},
+				{
+					type: 'select',
+					label: '设备',
+					placeholder: '请选择设备',
+					param: 'equipmentId',
+					selectOptions: [],
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				productionLineId: null,
+				equipmentId: null,
+			},
+			total: 0,
+			// 表单参数
+			form: {},
+			// 表单校验
+			rules: {},
+		};
+	},
+	created() {
+		this.getLineList();
+		this.getList();
+	},
+	methods: {
+		/** 获取产线 */
+		async getLineList() {
+			const { data } = await this.$axios({
+				url: '/base/production-line/listAll',
+				method: 'get',
+			});
+			this.searchBarFormConfig[0].selectOptions = data.map((line) => ({
+				name: line.name,
+				id: line.id,
+			}));
+		},
+
+		/** 根据产线获取设备 */
+		async getEquipmentList(id) {
+			const { data } = await this.$axios({
+				url: '/base/equipment/listByLine',
+				method: 'get',
+				query: { id },
+			});
+			return data;
+		},
+
+		/** 监听 search bar 的产线下拉框改变 */
+		async handleSearchBarItemChange({ param, value: id }) {
+			if (param == 'productionLineId') {
+				if (id == '') {
+					// 清除设备选框里的选项
+					this.searchBarFormConfig[1].selectOptions = [];
+					return;
+				}
+				const list = await this.getEquipmentList(id);
+				this.searchBarFormConfig[1].selectOptions = list.map((eq) => ({
+					name: eq.name,
+					id: eq.id,
+				}));
+			}
+		},
+
+		handleSearchBarBtnClick(btn) {
+			const { equipmentId, productionLineId } = btn;
+			if (equipmentId) this.queryParams.equipmentId = equipmentId;
+			else this.queryParams.equipmentId = null;
+			if (productionLineId)
+				this.queryParams.productionLineId = productionLineId;
+			else this.queryParams.productionLineId = null;
+			this.getList();
+		},
+
+		/** 查询列表 */
+		async getList() {
+			this.loading = true;
+			const { data } = await this.$axios({
+				url: '/monitoring/equipment-monitor/realtime-page',
+				method: 'get',
+				params: this.queryParams,
+			});
+			this.list = data.list;
+			this.total = data.total;
+		},
+
+		handleEmitFun({ action, value }) {
+			if (action == 'params-monitor') {
+				const { equipmentId, equipmentName, equipmentCode } = value;
+				this.$router.push({
+					name: 'equipmentFullParams',
+					params: {
+						equipmentId,
+						equipmentCode,
+						equipmentName,
+					},
+				});
+			}
+		},
+	},
+};
+</script>

src/views/quality/base/qualityInspectionBoxBtn/index.vue

@@ -12,7 +12,7 @@
 			:page="queryParams.pageNo"
 			:limit="queryParams.pageSize"
 			:table-data="list"
-			@emit-fun="handleEmitFun">
+			@emitFun="handleEmitFun">
 			<method-btn
 				v-if="tableBtn.length"
 				slot="handleBtn"
@@ -52,7 +52,7 @@ import {
 	getQualityInspectionBoxBtnPage,
 	exportQualityInspectionBoxBtnExcel,
 } from '@/api/base/qualityInspectionBoxBtn';
-import basicPageMixin from '../../mixin/basicPageMixin';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
 import moment from 'moment';
 
 export default {

src/views/quality/base/qualityInspectionDet/index.vue

@@ -12,7 +12,7 @@
 			:page="queryParams.pageNo"
 			:limit="queryParams.pageSize"
 			:table-data="list"
-			@emit-fun="handleEmitFun">
+			@emitFun="handleEmitFun">
 			<method-btn
 				v-if="tableBtn.length"
 				slot="handleBtn"
@@ -89,7 +89,7 @@ import {
 
 import moment from 'moment';
 
-import basicPageMixin from '../../mixin/basicPageMixin';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
 
 export default {
 	name: 'QualityInspectionDet',

src/views/quality/base/qualityInspectionType/index.vue

@@ -12,7 +12,7 @@
 			:page="queryParams.pageNo"
 			:limit="queryParams.pageSize"
 			:table-data="list"
-			@emit-fun="handleEmitFun">
+			@emitFun="handleEmitFun">
 			<method-btn
 				v-if="tableBtn.length"
 				slot="handleBtn"
@@ -77,7 +77,7 @@ import {
 	getQualityInspectionTypePage,
 	exportQualityInspectionTypeExcel,
 } from '@/api/base/qualityInspectionType';
-import basicPageMixin from '../../mixin/basicPageMixin';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
 
 export default {
 	name: 'QualityInspectionType',

src/views/quality/components/dialogForm.vue

@@ -1,208 +0,0 @@
-<!-- 
-    filename: dialogForm.vue
-    author: liubin
-    date: 2023-08-02 10:32:36
-    description: 弹窗的表单组件
--->
-
-<template>
-	<el-form
-		ref="form"
-		:model="form"
-		:label-width="`${labelWidth}px`"
-		v-loading="formLoading">
-		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
-			<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
-				<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
-					<el-input
-						v-if="col.input"
-						v-model="form[col.prop]"
-						@change="$emit('update', form)"
-						:placeholder="`请输入${col.label}`"
-						v-bind="col.bind" />
-					<el-input
-						v-if="col.textarea"
-						type="textarea"
-						v-model="form[col.prop]"
-						@change="$emit('update', form)"
-						:placeholder="`请输入${col.label}`"
-						v-bind="col.bind" />
-					<el-select
-						v-if="col.select"
-						v-model="form[col.prop]"
-						:placeholder="`请选择${col.label}`"
-						@change="$emit('update', form)"
-						v-bind="col.bind">
-						<el-option
-							v-for="opt in optionListOf[col.prop]"
-							:key="opt.value"
-							:label="opt.label"
-							:value="opt.value" />
-					</el-select>
-					<el-date-picker
-						v-if="col.datetime"
-						v-model="form[col.prop]"
-						type="datetime"
-						:placeholder="`请选择${col.label}`"
-						v-bind="col.bind"></el-date-picker>
-				</el-form-item>
-			</el-col>
-		</el-row>
-	</el-form>
-</template>
-
-<script>
-/**
- * 找到最长的label
- * @param {*} options
- */
-function findMaxLabelWidth(rows) {
-	let max = 0;
-	rows.forEach((row) => {
-		row.forEach((opt) => {
-			if (opt.label.length > max) {
-				max = opt.label.length;
-			}
-		});
-	});
-	return max;
-}
-
-export default {
-	name: 'DialogForm',
-	model: {
-		prop: 'dataForm',
-		event: 'update',
-	},
-	emits: ['update'],
-	components: {},
-	props: {
-		rows: {
-			type: Array,
-			default: () => [],
-		},
-		dataForm: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-	data() {
-		return {
-			formLoading: true,
-			optionListOf: {},
-		};
-	},
-	computed: {
-		labelWidth() {
-			let max = findMaxLabelWidth(this.rows);
-			// 每个汉字占20px
-			return max * 20;
-			// return max * 20 + 'px';
-		},
-		form: {
-			get() {
-				return this.dataForm;
-			},
-			set(val) {
-				console.log('set form', val);
-			},
-		},
-	},
-	watch: {
-		rows: {
-			handler() {
-				console.log('watch triggered!');
-				this.$nextTick(() => {
-					this.handleOptions('watch');
-				});
-			},
-			deep: true,
-			immediate: false,
-		},
-	},
-	mounted() {
-		// 处理 options
-		this.handleOptions();
-	},
-	methods: {
-		/** 模拟透传 ref  */
-		validate(cb) {
-			return this.$refs.form.validate(cb);
-		},
-		resetFields(args) {
-			return this.$refs.form.resetFields(args);
-		},
-		// getCode
-		async getCode(url) {
-			const response = await this.$axios(url);
-			return response.data;
-		},
-		async handleOptions(trigger = 'monuted') {
-			// console.log("[dialogForm:handleOptions]")
-			const promiseList = [];
-			this.rows.forEach((cols) => {
-				cols.forEach((opt) => {
-					if (opt.value && !this.form[opt.prop]) {
-						// 默认值
-						this.form[opt.prop] = opt.value;
-					}
-
-					if (opt.options) {
-						this.$set(this.optionListOf, opt.prop, opt.options);
-					} else if (opt.url) {
-						// 如果是下拉框，或者新增模式下的输入框，才去请求
-						if (opt.select || (opt.input && !this.form?.id)) {
-							promiseList.push(async () => {
-								const response = await this.$axios(opt.url, {
-									method: opt.method ?? 'get',
-								});
-								console.log('[dialogForm:handleOptions:response]', response);
-								if (opt.select) {
-									// 处理下拉框选项
-									const list =
-										'list' in response.data
-											? response.data.list
-											: response.data;
-									this.$set(
-										this.optionListOf,
-										opt.prop,
-										list.map((item) => ({
-											label: item[opt.labelKey ?? 'name'],
-											value: item[opt.valueKey ?? 'id'],
-										}))
-									);
-								} else if (opt.input) {
-									// 处理输入框数据
-									this.form[opt.prop] = response.data;
-								}
-							});
-						}
-					}
-				});
-			});
-
-			// 如果是 watch 触发的，不需要执行进一步的请求
-			if (trigger == 'watch') {
-				this.formLoading = false;
-				return;
-			}
-			try {
-				await Promise.all(promiseList.map((fn) => fn()));
-				this.formLoading = false;
-				// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
-			} catch (error) {
-				console.log('[dialogForm:handleOptions:error]', error);
-				this.formLoading = false;
-			}
-			if (!promiseList.length) this.formLoading = false;
-		},
-	},
-};
-</script>
-
-<style scoped lang="scss">
-.el-date-editor,
-.el-select {
-	width: 100%;
-}
-</style>

src/views/quality/mixin/basicPageMixin.js

@@ -1,109 +0,0 @@
-import DialogForm from '../components/dialogForm.vue';
-
-export default {
-	components: { DialogForm },
-	data() {
-		return {
-			// 遮罩层
-			loading: true,
-			// 导出遮罩层
-			exportLoading: false,
-			// 显示搜索条件
-			showSearch: true,
-			// 总条数
-			total: 0,
-			// 质量检测信息基础列表
-			list: [],
-			// 弹出层标题
-			title: '',
-			// 是否显示弹出层
-			open: false,
-			// 列表数据
-			tableData: [],
-			// 弹窗的表单
-			// form: {}, // 占位
-			// 搜索框需要的 keys
-			// searchBarKeys: [], // 占位
-			// tableProps: [], // 占位
-			// tableBtn: [], // 占位
-			// searchBarFormConfig: [], // 占位
-			// // 弹窗表单配置
-			// dialogFormConfig: [], // 占位
-		};
-	},
-	mounted() {},
-	methods: {
-		// 过滤后端传回的详情数据
-		filterData(data, keys) {
-			const obj = {};
-			keys.forEach((key) => {
-				if (/time/i.test(key)) {
-					obj[key] = new Date(data[key]);
-				} else {
-					obj[key] = data[key];
-				}
-			});
-			return obj;
-		},
-		// 处理搜索条件
-		handleSearchBarBtnClick() {},
-		// 处理表格按钮
-		handleTableBtnClick({ data, type }) {
-			switch (type) {
-				case 'edit':
-					this.handleUpdate(data);
-					break;
-				case 'delete':
-					this.handleDelete(data);
-					break;
-			}
-		},
-		// 处理搜索栏按钮
-		handleSearchBarBtnClick(btn) {
-			// const keys = ['name', 'createTime']; // timeVal // 已被 searchBarKeys 替代
-			switch (btn.btnName) {
-				case 'search':
-					this.searchBarKeys.forEach((key) => {
-						if (key == 'timeVal') {
-							this.queryParams['startTime'] = btn.timeVal[0];
-							this.queryParams['endTime'] = btn.timeVal[1];
-							return;
-						}
-						this.queryParams[key] = btn[key] || null;
-					});
-					this.handleQuery();
-					break;
-				case 'add':
-					this.handleAdd();
-					break;
-				case 'export':
-					this.handleExport();
-					break;
-				case 'reset':
-					this.$refs['search-bar'].resetForm();
-					this.resetQuery();
-					break;
-			}
-		},
-		handleEmitFun(val) {
-			console.log('emit unf', val);
-		},
-		// 获取列表数据
-		getList() {},
-		/** 搜索按钮操作 */
-		handleQuery() {
-			this.queryParams.pageNo = 1;
-			this.getList();
-		},
-		/** 重置按钮操作 */
-		resetQuery() {
-			this.resetForm('queryForm');
-			this.handleQuery();
-		},
-		/** 取消按钮 */
-		cancel() {
-			this.open = false;
-			this.reset();
-		},
-	},
-};

src/views/quality/monitoring/qualityInspectionRecord/index.vue

@@ -12,7 +12,7 @@
 			:page="queryParams.pageNo"
 			:limit="queryParams.pageSize"
 			:table-data="list"
-			@emit-fun="handleEmitFun">
+			@emitFun="handleEmitFun">
 			<method-btn
 				v-if="tableBtn.length"
 				slot="handleBtn"
@@ -55,7 +55,7 @@ import {
 import Editor from '@/components/Editor';
 import moment from 'moment';
 
-import basicPageMixin from '../../mixin/basicPageMixin';
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
 export default {
 	name: 'QualityInspectionRecord',
 	components: {

src/views/quality/monitoring/qualityRecentHours/index.vue

@@ -0,0 +1,131 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-08-04 14:44:58
+    description: 
+-->
+
+<template>
+	<div class="app-container">
+		<SearchBar
+			:formConfigs="[{ label: '近24小时检测记录', type: 'title' }]"
+			ref="search-bar" />
+		<!-- <pre><code v-html="jsondemo"></code></pre> -->
+
+		<el-skeleton v-if="initing" :rows="6" animated />
+		<base-table
+			v-else
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
+			@emitFun="handleEmitFun"></base-table>
+	</div>
+</template>
+
+<script>
+import response from './response.json';
+import { handleNameData, handleDynamicData } from '@/utils/dynamicProps';
+// import hljs from 'highlight.js/lib/highlight';
+// import json from 'highlight.js/lib/languages/json';
+// import 'highlight.js/styles/github-gist.css';
+
+// hljs.registerLanguage('json', json);
+
+export default {
+	name: 'QualityRecentHours',
+	components: {},
+	props: {},
+	data() {
+		return {
+			initing: false,
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
+			// jsondemo: '',
+			list: [
+				// {
+				// 	inspectionContent: '检测内容1',
+				// 	'2023-03-18T00:00:00-产线1': '产线1-asdf',
+				// 	'2023-03-18T01:00:00-产线2': '产线2-kldf',
+				// 	'2023-03-18T02:00:00-产线1': '产线1-vasdkj',
+				// },
+			],
+			tableProps: [
+				{
+					prop: 'inspectionContent',
+					label: '检测内容',
+					align: 'center',
+				},
+			],
+		};
+	},
+	computed: {},
+	mounted() {
+		this.getList();
+	},
+	methods: {
+		async getList() {
+			// const response = await this.$axios({
+			// 	url: '/monitoring/record-in-one-day/get',
+			// 	method: 'get',
+			// });
+			console.log(response);
+			// const {
+			// 	// data: { nameData },
+			// 	code,
+			// } = response;
+			// this.jsondemo = hljs.highlight(
+			// 	'json',
+			// 	JSON.stringify(response, null, 2),
+			// 	true
+			// ).value;
+			const {
+				data: { data: dyanmicData, nameData },
+			} = response;
+
+			this.initing = true;
+			const dynamicProps = handleNameData(nameData);
+			this.tableProps.push(...dynamicProps);
+			const dataList = handleDynamicData(dyanmicData);
+			this.list = dataList;
+			this.queryParams.pageSize = dataList.length;
+
+			setTimeout(() => {
+				this.initing = false;
+			}, 1000);
+		},
+
+		handleEmitFun(payload) {
+			console.log('payload', payload);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+::-webkit-scrollbar {
+	display: none;
+}
+
+pre {
+	margin: 10px;
+	background: #f6f8faf6;
+	border: 1px solid #e1e4e8;
+	padding: 12px;
+	border-radius: 12px;
+	position: fixed;
+	// top: 15vh;
+	top: 10vh;
+	left: 0;
+	max-height: 80vh;
+	overflow-y: auto;
+	z-index: 100000;
+	box-shadow: 0 0 32px 12px #0001;
+}
+
+code {
+	font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
+}
+</style>

src/views/quality/monitoring/qualityRecentHours/props.json

@@ -0,0 +1,80 @@
+{
+	"tableProps": [
+		{
+			"prop": "inspectionContent",
+			"label": "检测内容",
+			"align": "center"
+		},
+		{
+			"prop": "2023-03-18T00:00:00",
+			"label": "2023-03-18T00:00:00",
+			"align": "center",
+			"children": [
+				{
+					"prop": "2023-03-18T00:00:00-产线1",
+					"label": "产线1",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T00:00:00-产线2",
+					"label": "产线2",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T00:00:00-产线3",
+					"label": "产线3",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T00:00:00-产线4",
+					"label": "产线4",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T00:00:00-产线5",
+					"label": "产线5",
+					"align": "center"
+				}
+			]
+		},
+		{
+			"prop": "2023-03-18T01:00:00",
+			"label": "2023-03-18T01:00:00",
+			"align": "center",
+			"children": [
+				{
+					"prop": "2023-03-18T01:00:00-产线1",
+					"label": "产线1",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T01:00:00-产线2",
+					"label": "产线2",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T01:00:00-产线3",
+					"label": "产线3",
+					"align": "center"
+				}
+			]
+		},
+		{
+			"prop": "2023-03-18T02:00:00",
+			"label": "2023-03-18T02:00:00",
+			"align": "center",
+			"children": [
+				{
+					"prop": "2023-03-18T02:00:00-产线1",
+					"label": "产线1",
+					"align": "center"
+				},
+				{
+					"prop": "2023-03-18T02:00:00-产线2",
+					"label": "产线2",
+					"align": "center"
+				}
+			]
+		}
+	]
+}

src/views/quality/monitoring/qualityRecentHours/response.json

@@ -0,0 +1,176 @@
+{
+	"code": 0,
+	"data": {
+		"data": [
+			{
+				"data": [
+					{
+						"id": "测试222023-08-09T02:00",
+						"parentId": "测试22",
+						"dynamicName": "2023-08-09T02:00",
+						"dynamicValue": 1691517600000,
+						"children": [
+							{
+								"id": "1672847052717821953",
+								"parentId": "测试222023-08-09T02:00",
+								"dynamicName": "产线1",
+								"dynamicValue": 1
+							}
+						]
+					},
+					{
+						"id": "测试222023-08-09T08:00",
+						"parentId": "测试22",
+						"dynamicName": "2023-08-09T08:00",
+						"dynamicValue": 1691539200000,
+						"children": [
+							{
+								"id": "1672847052717821953",
+								"parentId": "测试222023-08-09T08:00",
+								"dynamicName": "产线1",
+								"dynamicValue": 1
+							}
+						]
+					},
+					{
+						"id": "测试222023-08-09T11:00",
+						"parentId": "测试22",
+						"dynamicName": "2023-08-09T11:00",
+						"dynamicValue": 1691550000000,
+						"children": [
+							{
+								"id": "1672847052717821953",
+								"parentId": "测试222023-08-09T11:00",
+								"dynamicName": "产线1",
+								"dynamicValue": 1
+							}
+						]
+					}
+				],
+				"inspectionDetContent": "测试22"
+			},
+			{
+				"data": [
+					{
+						"id": "测试112023-08-09T02:00",
+						"parentId": "测试11",
+						"dynamicName": "2023-08-09T02:00",
+						"dynamicValue": 1691517600000,
+						"children": [
+							{
+								"id": "1672847052717821954",
+								"parentId": "测试112023-08-09T02:00",
+								"dynamicName": "产线22",
+								"dynamicValue": 1
+							}
+						]
+					},
+					{
+						"id": "测试112023-08-09T08:00",
+						"parentId": "测试11",
+						"dynamicName": "2023-08-09T08:00",
+						"dynamicValue": 1691539200000,
+						"children": [
+							{
+								"id": "1672847052717821953",
+								"parentId": "测试112023-08-09T08:00",
+								"dynamicName": "产线1",
+								"dynamicValue": 1
+							}
+						]
+					},
+					{
+						"id": "测试112023-08-09T09:00",
+						"parentId": "测试11",
+						"dynamicName": "2023-08-09T09:00",
+						"dynamicValue": 1691542800000,
+						"children": [
+							{
+								"id": "1672847052717821954",
+								"parentId": "测试112023-08-09T09:00",
+								"dynamicName": "产线22",
+								"dynamicValue": 2
+							}
+						]
+					}
+				],
+				"inspectionDetContent": "测试11"
+			}
+		],
+		"nameData": [
+			{
+				"name": "2023-08-09T02:00",
+				"tree": 1,
+				"id": "测试222023-08-09T02:00",
+				"parentId": "测试22"
+			},
+			{
+				"name": "产线1",
+				"tree": 2,
+				"id": "1672847052717821953",
+				"parentId": "测试222023-08-09T02:00"
+			},
+			{
+				"name": "2023-08-09T08:00",
+				"tree": 1,
+				"id": "测试222023-08-09T08:00",
+				"parentId": "测试22"
+			},
+			{
+				"name": "产线1",
+				"tree": 2,
+				"id": "1672847052717821953",
+				"parentId": "测试222023-08-09T08:00"
+			},
+			{
+				"name": "2023-08-09T11:00",
+				"tree": 1,
+				"id": "测试222023-08-09T11:00",
+				"parentId": "测试22"
+			},
+			{
+				"name": "产线1",
+				"tree": 2,
+				"id": "1672847052717821953",
+				"parentId": "测试222023-08-09T11:00"
+			},
+			{
+				"name": "2023-08-09T02:00",
+				"tree": 1,
+				"id": "测试112023-08-09T02:00",
+				"parentId": "测试11"
+			},
+			{
+				"name": "产线22",
+				"tree": 2,
+				"id": "1672847052717821954",
+				"parentId": "测试112023-08-09T02:00"
+			},
+			{
+				"name": "2023-08-09T08:00",
+				"tree": 1,
+				"id": "测试112023-08-09T08:00",
+				"parentId": "测试11"
+			},
+			{
+				"name": "产线1",
+				"tree": 2,
+				"id": "1672847052717821953",
+				"parentId": "测试112023-08-09T08:00"
+			},
+			{
+				"name": "2023-08-09T09:00",
+				"tree": 1,
+				"id": "测试112023-08-09T09:00",
+				"parentId": "测试11"
+			},
+			{
+				"name": "产线22",
+				"tree": 2,
+				"id": "1672847052717821954",
+				"parentId": "测试112023-08-09T09:00"
+			}
+		]
+	},
+	"msg": ""
+}

src/views/quality/monitoring/qualityStatistics/components/detailGraph.vue

@@ -0,0 +1,55 @@
+<!-- 
+    filename: detailGraph.vue
+    author: liubin
+    date: 2023-08-04 16:36:21
+    description: 图表
+-->
+
+<template>
+	<div class="cell">
+		<div class="title">
+			<span>
+				{{ title }}
+			</span>
+		</div>
+		<div class="content">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'DetailGraph',
+	components: {},
+	props: {
+		title: {
+			type: String,
+			default: 'detail graph (echarts)',
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.cell {
+	// background: #cfcfcf;
+	border: 1px solid #cfcfcf;
+	border-radius: 8px;
+	padding: 8px;
+	display: flex;
+	flex-direction: column;
+}
+
+.title > span {
+	display: inline-block;
+	padding: 4px 8px 4px 6px;
+	background: rgba(20, 145, 210, 0.155);
+	border-left: 4px solid rgba(20, 145, 210);
+}
+
+.content {
+    flex: 1; 
+    // background-color: aquamarine;
+}
+</style>

src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue

@@ -0,0 +1,150 @@
+<!-- 
+    filename: line.vue
+    author: liubin
+    date: 2023-08-07 16:14:11
+    description: 
+-->
+
+<template>
+	<div ref="line-chart" class="line-chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'LineDataChart',
+	components: {},
+	props: {
+		xProps: {
+			type: Array,
+			default: () => [],
+		},
+		legend: {
+			type: Array,
+			default: () => [],
+		},
+		series: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			chart: null,
+			// inspectionContents: [
+			// 	'检测内容1',
+			// 	'检测内容2',
+			// 	'检测内容3',
+			// 	'检测内容4',
+			// 	'检测内容5',
+			// 	'检测内容6',
+			// 	'检测内容7',
+			// 	'检测内容8',
+			// 	'检测总数',
+			// 	'比例%',
+			// ],
+			// xProps: [
+			// 	'产线1',
+			// 	'产线2',
+			// 	'产线3',
+			// 	'产线4',
+			// 	'产线5',
+			// 	'产线6',
+			// 	'产线7',
+			// 	'产线8',
+			// 	'产线9',
+			// ],
+			// series: [
+			// 	{
+			// 		name: 'a',
+			// 		type: 'line',
+			// 		data: [120, 132, 101, 134, 90, 230, 210, 120, 132],
+			// 	},
+			// 	{
+			// 		name: 'lkj',
+			// 		type: 'line',
+			// 		data: [220, 182, 191, 234, 290, 330, 310, 220, 182],
+			// 	},
+			// 	{
+			// 		name: '测试11',
+			// 		type: 'line',
+			// 		data: [150, 232, 201, 154, 190, 330, 410, 150, 232],
+			// 	},
+			// 	{
+			// 		name: '测试22',
+			// 		type: 'line',
+			// 		data: [320, 332, 301, 334, 390, 330, 320, 332, 301],
+			// 	},
+			// ],
+		};
+	},
+	computed: {
+		config() {
+			return {
+				// title: {
+				// 	text: '折线图',
+				// },
+				grid: {
+					top: '24%',
+					left: '3%',
+					right: '5%',
+					bottom: '5%',
+					containLabel: true,
+				},
+				tooltip: {
+					trigger: 'axis',
+				},
+				legend: {
+					data: this.legend,
+					top: '5%',
+					icon: 'circle',
+				},
+				// toolbox: {
+				// 	feature: {
+				// 		saveAsImage: {},
+				// 	},
+				// },
+				xAxis: {
+					type: 'category',
+					boundaryGap: false,
+					data: this.xProps,
+				},
+				yAxis: {
+					type: 'value',
+				},
+				series: this.series,
+			};
+		},
+	},
+	mounted() {
+		this.init();
+	},
+	watch: {
+		config(val) {
+			this.$nextTick(() => {
+				this.init();
+			});
+		},
+	},
+	methods: {
+		init() {
+			if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);
+
+			this.$nextTick(() => {
+				this.setOption();
+			});
+		},
+		setOption() {
+			this.chart.setOption(this.config);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.line-chart {
+	// background: #f3f3f3;
+	height: 100%;
+}
+</style>

src/views/quality/monitoring/qualityStatistics/components/graphs/total.vue

@@ -0,0 +1,185 @@
+<!-- 
+    filename: total.vue
+    author: liubin
+    date: 2023-08-07 15:04:31
+    description: 
+-->
+
+<template>
+	<div class="total-graph" id="total-graph">
+		<div id="updata" class="updata"></div>
+		<div id="downdata" class="downdata"></div>
+		<div id="checktotal" class="checktotal"></div>
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'TotalGraph',
+	components: {},
+	props: {
+		summaryList: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			config: {},
+            updata: [],
+            downdata: [],
+            checktotal: [],
+			upChart: null,
+			downChart: null,
+			totalChart: null,
+		};
+	},
+	computed: {},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			this.handleSummaryList();
+			this.initUpdata();
+			this.initDowndata();
+			this.initChecktotal();
+		},
+
+		handleSummaryList() {
+			this.summaryList.map((item) => {
+				this.updata.push({ name: item.lineName, value: item.sumUp });
+				this.downdata.push({ name: item.lineName, value: item.sumDown });
+				this.checktotal.push({ name: item.lineName, value: item.sumCheck });
+			});
+		},
+
+		initUpdata() {
+			if (!this.upChart)
+				this.upChart = echarts.init(document.getElementById('updata'));
+			this.upChart.setOption(
+				this.handleOption({
+					title: '上片总数',
+					name: '上片数据',
+					data: this.updata
+				})
+			);
+		},
+
+		initDowndata() {
+			if (!this.downChart)
+				this.downChart = echarts.init(document.getElementById('downdata'));
+			this.downChart.setOption(
+				this.handleOption({
+					title: '下片总数',
+					name: '下片数据',
+					data: this.downdata
+				})
+			);
+		},
+
+		initChecktotal() {
+			if (!this.totalChart)
+				this.totalChart = echarts.init(document.getElementById('checktotal'));
+			this.totalChart.setOption(
+				this.handleOption({
+					title: '检测总数',
+					name: '检测数据',
+					data: this.checktotal
+				})
+			);
+		},
+
+		handleOption({ title, name, data }) {
+			const defaultOption = {
+				title: {
+					text: title,
+					left: '42%',
+					top: 'center',
+					textAlign: 'right',
+					textStyle: {
+						fontSize: 14,
+					},
+				},
+				tooltip: {
+					trigger: 'item',
+				},
+				legend: {
+					top: 'center',
+					right: '10%',
+					orient: 'vertical',
+					itemWidth: 12,
+					itemHeight: 12,
+					icon: 'circle',
+				},
+				series: [
+					{
+						name: name,
+						type: 'pie',
+						radius: ['40%', '70%'],
+						center: ['35%', '50%'],
+						avoidLabelOverlap: true,
+						label: {
+							show: false,
+							position: 'center',
+						},
+						// emphasis: {
+						// 	label: {
+						// 		show: true,
+						// 		fontSize: 40,
+						// 		fontWeight: 'bold',
+						// 	},
+						// },
+						labelLine: {
+							show: false,
+						},
+						data: data ?? [
+							{ value: 1048, name: 'Search Engine' },
+							{ value: 735, name: 'Direct' },
+							{ value: 580, name: 'Email' },
+							{ value: 484, name: 'Union Ads' },
+							{ value: 300, name: 'Video Ads' },
+						],
+					},
+				],
+			};
+
+			return defaultOption;
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+#total-graph {
+	margin-top: 8px;
+	width: 100%;
+	// height: 400px;
+	// background: #ccc;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-template-rows: repeat(2, 240px);
+	// row-gap: 20px;
+}
+
+.updata {
+	// width: 320px;
+	// justify-self: center;
+	// background: rgba($color: #f00, $alpha: 0.3);
+}
+
+.downdata {
+	// width: 240px;
+	// justify-self: center;
+	// background: rgba($color: #0f0, $alpha: 0.3);
+}
+
+.checktotal {
+	width: 320px;
+	justify-self: center;
+	// background: rgba($color: #00f, $alpha: 0.3);
+	grid-column: span 2;
+}
+</style>

src/views/quality/monitoring/qualityStatistics/components/summaryTable.vue

@@ -0,0 +1,68 @@
+<!-- 
+    filename: summaryDialog.vue
+    author: liubin
+    date: 2023-08-04 16:25:49
+    description: 
+-->
+
+<template>
+	<!-- 列表 -->
+	<base-table
+		:table-props="tableProps"
+		height="35vh"
+		:page="queryParams.pageNo"
+		:limit="queryParams.pageSize"
+		:table-data="list"></base-table>
+</template>
+
+<script>
+export default {
+	name: 'SummaryTable',
+	components: {},
+	props: {
+		list: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
+			tableProps: [
+				{
+					prop: 'lineName',
+					label: '产线',
+					align: 'center',
+				},
+				{
+					prop: 'sumUp',
+					label: '上片总数',
+					align: 'center',
+				},
+				{
+					prop: 'sumDown',
+					label: '下片总数',
+					align: 'center',
+				},
+				{
+					prop: 'sumCheck',
+					label: '检测总数',
+					align: 'center',
+				},
+				{
+					prop: 'scrapRatio',
+					label: '比例(%)',
+					align: 'center',
+				},
+			],
+		};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/quality/monitoring/qualityStatistics/graphPage.vue

@@ -0,0 +1,107 @@
+<!-- 
+    filename: graphPage.vue
+    author: liubin
+    date: 2023-08-07 13:46:59
+    description: 
+-->
+
+<template>
+	<div class="graph-page">
+		<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
+			<TotalGraph :summary-list="summaryList" />
+		</DetailGraph>
+		<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
+			<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
+		</DetailGraph>
+		<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
+		<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
+	</div>
+</template>
+
+<script>
+import DetailGraph from './components/detailGraph.vue';
+import TotalGraph from './components/graphs/total.vue';
+import LineGraph from './components/graphs/line.vue';
+
+export default {
+	name: 'GraphPage',
+	components: { DetailGraph, TotalGraph, LineGraph },
+	props: {
+		summaryList: {
+			type: Array,
+			default: () => [],
+		},
+		lineData: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			legend: [],
+			series: [],
+		};
+	},
+	mounted() {
+		this.buildLegend();
+
+		this.$nextTick(() => {
+			this.series = this.lineData.list.map(this.buildSeries);
+			console.log('this.series', this.series);
+		});
+	},
+	methods: {
+		buildSeries(item) {
+			console.log('this.list', this.lineData.list, this.lineData.xProps);
+			const seriesItem = {
+				name: item.inspectionContent,
+				type: 'line',
+				data: [],
+			};
+
+			this.lineData.xProps.forEach((prop) => {
+				if (prop in item) {
+					seriesItem.data.push(item[prop]);
+				} else {
+					seriesItem.data.push(null);
+				}
+			});
+
+			return seriesItem;
+		},
+		buildLegend() {
+			this.legend = this.lineData.list
+				.map((item) => item.inspectionContent)
+				.sort();
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.graph-page {
+	height: 100%;
+	display: grid;
+	// grid-template-columns: ;
+	// grid-template-columns: 1fr 1fr;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	grid-auto-rows: minmax(300px, max-content);
+	gap: 12px;
+}
+
+#dg1 {
+	grid-column: 1 / 3;
+}
+
+#dg2 {
+	grid-column: 3 / 5;
+}
+
+#dg3 {
+	grid-column: span 2;
+}
+
+#dg4 {
+	grid-column: span 2;
+}
+</style>

src/views/quality/monitoring/qualityStatistics/index.vue

@@ -0,0 +1,427 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-08-04 14:44:58
+    description: 检测统计数据
+-->
+
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
+
+		<transition mode="out-in" name="fade-down">
+			<template v-if="mode == 'table'">
+				<!-- 列表 -->
+				<base-table
+					v-if="mode == 'table'"
+					:table-props="tableProps"
+					:page="queryParams.pageNo"
+					:limit="queryParams.pageSize"
+					:table-data="list"
+					@emitFun="handleEmitFun"></base-table>
+			</template>
+
+			<GraphPage
+				v-else
+				:summary-list="summaryList"
+				:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
+		</transition>
+
+		<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
+		<base-dialog
+			dialogTitle="数据总览"
+			:dialogVisible="summaryOpen"
+			width="50%"
+			@close="handleSummaryClose"
+			@cancel="handleSummaryClose"
+			@confirm="handleSummaryClose">
+			<summaryTable :list="summaryList" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import GraphPage from './graphPage.vue';
+import summaryTable from './components/summaryTable.vue';
+
+export default {
+	name: 'QualityStatistics',
+	components: { GraphPage, summaryTable },
+	props: {},
+	data() {
+		return {
+			mode: 'table', // defaults to 'table'
+			searchBarFormConfig: [
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					// format: 'yyyy-MM-dd HH:mm:ss',
+					format: 'yyyy-MM-dd',
+					// valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					valueFormat: 'timestamp',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'timerange',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '数据总览',
+					name: 'summary',
+					color: 'text',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '表格版',
+					name: 'tableVersion',
+					color: 'text btn-table',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: 'button',
+					btnName: '图形版',
+					name: 'graphVersion',
+					color: 'text btn-graph',
+				},
+			],
+			// 动态的 props
+			dynamicProps: [],
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				param: null,
+			},
+			summaryList: [],
+			summaryOpen: false,
+			list: [
+				/** mock data */
+				// {
+				// 	content: 'asdfasdf',
+				// 	line1: '',
+				// 	line2: '',
+				// 	line3: '',
+				// 	line4: '',
+				// 	line5: '',
+				// 	line6: '',
+				// 	line7: '',
+				// 	line8: '',
+				// 	line9: '',
+				// 	line10: '',
+				// 	typeTotal: 100,
+				// 	ratio: '93%',
+				// },
+				// {
+				// 	content: 'fdasfs',
+				// 	line1: '',
+				// 	line2: '',
+				// 	line3: '',
+				// 	line4: '',
+				// 	line5: '',
+				// 	line6: '',
+				// 	line7: '',
+				// 	line8: '',
+				// 	line9: '',
+				// 	line10: '',
+				// 	typeTotal: 100,
+				// 	ratio: '93%',
+				// },
+				// {
+				// 	content: 'asdfdfffffff',
+				// 	line1: '',
+				// 	line2: '',
+				// 	line3: '',
+				// 	line4: '',
+				// 	line5: '',
+				// 	line6: '',
+				// 	line7: '',
+				// 	line8: '',
+				// 	line9: '',
+				// 	line10: '',
+				// 	typeTotal: 100,
+				// 	ratio: '93%',
+				// },
+			],
+		};
+	},
+	computed: {
+		tableProps() {
+			return [
+				{
+					// width: 160,
+					prop: 'inspectionContent',
+					label: '检测内容',
+					align: 'center',
+				},
+				...this.dynamicProps,
+				{
+					// width: 128,
+					prop: 'sumInput',
+					label: '检测类型总数',
+					align: 'center',
+				},
+				{
+					// width: 128,
+					prop: 'ratio',
+					label: '比例',
+					align: 'center',
+					// subcomponent: {
+					// 	name: 'TextOnly',
+					// 	props: {
+					// 		injectData: {
+					// 			type: Object,
+					// 			default: () => ({}),
+					// 		},
+					// 	},
+					// 	data() {
+					// 		return {
+					// 			text: '比例',
+					// 		};
+					// 	},
+					// 	methods: {
+					// 		handleEmit(payload) {
+					// 			console.log('handleEmit', payload);
+					// 		},
+					// 	},
+					// 	render(h) {
+					// 		return h('el-button', { props: { type: 'text' } }, this.text);
+					// 	},
+					// },
+				},
+			];
+		},
+	},
+	mounted() {
+		this.getList();
+	},
+	methods: {
+		getList() {
+			this.getSummaryList();
+			this.getDetailedList();
+		},
+		/** 获取 检测总数 列表 */
+		async getSummaryList() {
+			const response = await this.$axios({
+				url: '/monitoring/statistical-data/getUpPart',
+				method: 'get',
+				params: this.queryParams.param
+					? {
+							param: {
+								// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), //  '2023-07-01 00:00:00',
+								// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00',
+								startTime: this.queryParams.param.startTime,
+								endTime: this.queryParams.param.endTime,
+							},
+					  }
+					: null,
+			});
+			this.summaryList = response.data;
+			console.log('summaryList', this.summaryList);
+		},
+		/** 获取 检测内容和产线关联 列表 */
+		async getDetailedList() {
+			const {
+				data: { data, otherList, otherMap, nameData },
+			} = await this.$axios({
+				url: '/monitoring/statistical-data/getDownPart',
+				params: this.queryParams.param
+					? {
+							param: {
+								// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00',
+								// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00',
+								startTime: this.queryParams.param.startTime,
+								endTime: this.queryParams.param.endTime,
+							},
+					  }
+					: null,
+			});
+			// this.list = response.data;
+			console.log('data', data);
+			console.log('otherList', otherList);
+			console.log('otherMap', otherMap);
+			console.log('nameData', nameData);
+
+			this.dynamicProps = this.filterNameData(nameData);
+			this.list = this.filterData(data);
+		},
+		filterNameData(nameData) {
+			const ndSet = new Set();
+			nameData.forEach((nd) => {
+				ndSet.add(nd.name);
+			});
+			return Array.from(ndSet.values())
+				.sort()
+				.map((name) => ({
+					prop: name,
+					label: name,
+				}));
+		},
+		filterData(data) {
+			return data.map((item) => {
+				const { data: innerData } = item;
+				const keyValuePairs = {};
+				innerData.map((d) => {
+					keyValuePairs[d.dynamicName] = d.dynamicValue;
+				});
+				return {
+					inspectionContent: item.inspectionContent,
+					...keyValuePairs,
+					sumInput: item.sumInput,
+				};
+			});
+		},
+		/** 总览关闭 */
+		handleSummaryClose() {
+			this.summaryOpen = false;
+		},
+		/** 搜索按钮 */
+		handleSearchBarBtnClick(btn) {
+			console.log('bnt, ', btn);
+			switch (btn.btnName) {
+				case 'search':
+					if (btn.timerange && typeof btn.timerange === 'object') {
+						this.queryParams.param = {};
+						this.$set(this.queryParams.param, 'startTime', btn.timerange[0]);
+						this.$set(this.queryParams.param, 'endTime', btn.timerange[1]);
+					}
+					this.handleQuery();
+					break;
+				case 'summary':
+					this.summaryOpen = true;
+					break;
+				case 'tableVersion':
+					this.mode = 'table';
+					break;
+				case 'graphVersion':
+					this.mode = 'graph';
+					break;
+				case 'reset':
+					this.$refs['search-bar'].resetForm();
+					// this.resetQuery();
+					break;
+			}
+		},
+		handleQuery() {
+			this.getSummaryList();
+			this.getDetailedList();
+		},
+		/** 处理表格事件 */
+		handleEmitFun() {},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+:deep(.searchBar) {
+	.el-button.btn-table {
+		color: rgb(0, 130, 130);
+		border: 1px solid rgb(0, 130, 130);
+		padding: 8px 10px;
+		border: 1px solid rgb(0, 130, 130);
+		padding: 8px 10px;
+
+		&:hover {
+			border-color: #fff;
+			color: #fff;
+			background: rgb(0, 130, 130);
+		}
+	}
+	.el-button.btn-graph {
+		color: rgb(130, 0, 130);
+		border: 1px solid rgb(130, 0, 130);
+		padding: 8px 10px;
+
+		&:hover {
+			border-color: #fff;
+			color: #fff;
+			background: rgb(130, 0, 130);
+		}
+	}
+}
+
+.fade-down-enter-active,
+.fade-down-leave-active {
+	transition: all 0.3s;
+}
+
+.fade-down-enter,
+.fade-down-leave-to {
+	transform: translateY(20%);
+	opacity: 0;
+}
+
+.fade-down-enter-to,
+.fade-down-leave {
+	transform: translateY(0);
+}
+</style>
+
+<!-- 
+// {
+	// 	width: 128,
+	// 	prop: 'line1',
+	// 	label: '产线1',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line2',
+	// 	label: '产线2',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line3',
+	// 	label: '产线3',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line4',
+	// 	label: '产线4',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line5',
+	// 	label: '产线5',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line6',
+	// 	label: '产线6',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line7',
+	// 	label: '产线7',
+	// 	align: 'center',
+	// },
+	// {
+	// 	width: 128,
+	// 	prop: 'line8',
+	// 	label: '产线8',
+	// 	align: 'center',
+	// }, -->