update

src/components/base-dialog/AttrForm/index.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="attr-form">
-		<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" @click="showAddAttr = true">添加</el-button></h3>
+		<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" v-if="!isDetail && !showAddAttr" @click="showAddAttr = true">添加</el-button></h3>
 		<div v-if="!showAddAttr">
 			<component
 				key="sub-table"
 				:is="require('../../base-table/index.vue').default"
-				:table-head-configs="tableConfigs"
+				:table-head-configs="filterTableConfigs()"
 				:data="dataList"
 				:max-height="500"
 				@operate-event="handleOperations"
@@ -23,16 +23,23 @@
 		</div>
 		<div v-else style="background: #eee; border-radius: 8px; padding: 12px;">
 			<el-row>
-				<el-col :span="10" :offset="7">
-					<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules" :inline="true">
-						<el-form-item v-for="field in attrFormFields" :key="field.prop" :prop="field.prop" :label="field.name">
-							<el-input v-model="AttrForm[field.prop]" clearable />
-							<!-- add more...  -->
-						</el-form-item>
+				<el-col>
+					<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules" :inline="true" label-position="top">
+						<el-row :gutter="20" style="padding: 0 24px;">
+							<el-col :span="attrFormFields.length > 6 ? 6 : 12" v-for="field in attrFormFields" :key="field.prop + 'col'">
+								<el-form-item :key="field.prop" :prop="field.prop" :label="field.name" style="width: 100%">
+									<el-input v-if="field.formType === 'input' || !field.formType" v-model="AttrForm[field.prop]" placeholder="请填写" clearable />
+									<el-select v-if="field.formType === 'select'" v-model="AttrForm[field.prop]" clearable>
+										<el-option v-for="opt in field.formOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+									</el-select>
+									<!-- add more...  -->
+								</el-form-item>
+							</el-col>
+						</el-row>
 					</el-form>
 				</el-col>
 			</el-row>
-			<el-row style="text-align: center;">
+			<el-row style="text-align: right;">
 				<el-button size="small" @click="handleCloseAttrForm">取消</el-button>
 				<el-button type="success" size="small" @click="handleSaveAttrForm">保存</el-button>
 			</el-row>
@@ -48,6 +55,10 @@ export default {
 	name: 'AttrForm',
 	components: { BaseTable },
 	props: {
+		isDetail: {
+			type: Boolean,
+			default: false
+		},
 		visible: {
 			type: Boolean,
 			default: false
@@ -110,6 +121,20 @@ export default {
 		}
 	},
 	methods: {
+		/** filter tableConfigs */
+		filterTableConfigs() {
+			// return this.tableConfigs.map(item => {
+			// 	const {prop, name, filter} = item
+			// 	const newConfigs = {prop,name,filter}
+			// 	if (item.type) newConfigs.type = item.type
+			// 	if (item.fixed) newConfigs.fixed = item.fixed
+			// 	if (item.width) newConfigs.width = item.width
+			// 	if (item.subcomponent) newConfigs.subcomponent = item.subcomponent
+			// 	if (item.options) newConfigs.options = item.options
+			// 	return newConfigs
+			// })
+			return this.tableConfigs
+		},
 		/** init dataform */
 		initAttrForm() {
 			Object.entries(this.AttrForm).forEach(([key, value]) => {
@@ -251,3 +276,9 @@ export default {
 	}
 }
 </script>
+
+<style scoped>
+.attr-form >>> .el-form .el-form-item__label {
+	padding: 0;
+}
+</style>

src/components/base-dialog/addOrUpdate/index.vue

@@ -19,32 +19,36 @@
 								:placeholder="getPlaceholder(n, c)"
 								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
 								clearable
+								:disabled="isDetail"
 							/>
-							<el-radio v-if="getType(n, c) === 'radio'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-radio>
-							<el-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-checkbox>
+							<el-radio v-if="getType(n, c) === 'radio'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
+							<el-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
 							<el-select
 								v-if="getType(n, c) === 'select'"
 								:placeholder="getPlaceholder(n, c)"
 								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
 								clearable
+								:disabled="isDetail"
 								@change="emitSelectChange(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name, $event)"
 							>
 								<el-option v-for="opt in configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options" :key="opt.label" :label="opt.label" :value="opt.value" />
 							</el-select>
-							<el-switch v-if="getType(n, c) === 'switch'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-switch>
+							<el-switch v-if="getType(n, c) === 'switch'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
 							<el-cascader
 								v-if="getType(n, c) === 'cascader'"
 								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
 								:options="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options"
 								:props="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
-							></el-cascader>
-							<el-time-select v-if="getType(n, c) === 'time'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-time-select>
+								:disabled="isDetail"
+							/>
+							<el-time-select v-if="getType(n, c) === 'time'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]" :disabled="isDetail" />
 							<el-date-picker
 								v-if="getType(n, c) === 'date'"
 								v-bind="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
 								:placeholder="getPlaceholder(n, c)"
 								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
-							></el-date-picker>
+								:disabled="isDetail"
+							/>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -52,7 +56,15 @@
 				<!-- extra components , like Markdown or RichEdit -->
 				<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
 					<el-form-item v-for="(ec, index) in configs.extraComponents" :key="ec.name + index" :label="ec.label" class="extra-components">
-						<component style="margin-top: 40px;" v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" @ready="handleEditorReady" />
+						<component
+							style="margin-top: 40px;"
+							v-if="ec.hasModel"
+							:is="ec.component"
+							v-bind="ec.props"
+							v-model="dataForm[ec.name]"
+							@ready="handleEditorReady"
+							:read-only="isDetail"
+						/>
 						<!-- <component v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" /> -->
 						<component
 							v-else
@@ -60,13 +72,14 @@
 							v-bind="ec.props"
 							@uploader-update-filelist="handleUploadListUpdate($event, ec.props.extraParams.typeCode)"
 							:uploader-inject-file-list="/*用于设备分流的*/ fileList[ec.props.extraParams.typeCode]"
+							:read-only="isDetail"
 						/>
 					</el-form-item>
 				</template>
 			</el-form>
 
 			<template v-if="dataForm.id && configs.subtable">
-				<attr-form :related-id="dataForm.id" v-bind="configs.subtable" />
+				<attr-form :related-id="dataForm.id" v-bind="configs.subtable" :is-detail="isDetail" />
 			</template>
 		</div>
 		<span slot="footer" class="dialog-footer">
@@ -74,8 +87,9 @@
 				<!-- {{ operate.name | btnNameFilter }} -->
 				<el-button
 					v-if="
-						operate.showAlways ||
-							(((dataForm.id && operate.showOnEdit) || (!dataForm.id && !operate.showOnEdit)) && (operate.permission ? $hasPermission(operate.permission) : true))
+						!isDetail &&
+							(operate.showAlways ||
+								(((dataForm.id && operate.showOnEdit) || (!dataForm.id && !operate.showOnEdit)) && (operate.permission ? $hasPermission(operate.permission) : true)))
 					"
 					:key="`operate-${index}`"
 					:type="btnType[operate.name]"
@@ -83,6 +97,7 @@
 					>{{ btnName[operate.name] }}</el-button
 				>
 			</template>
+			<el-button v-if="isDetail" @click="handleClick({ name: 'cancel' })">返回</el-button>
 		</span>
 	</el-dialog>
 </template>
@@ -347,7 +362,8 @@ export default {
 			}
 		},
 
-		init(id) {
+		init(id, isdetail = false) {
+			this.isDetail = isdetail
 			this.visible = true
 			this.$nextTick(() => {
 				this.$refs['dataForm'].resetFields()

src/components/base-table/index.vue

@@ -17,7 +17,7 @@
 				<!-- 普通的表头 -->
 				<el-table-column
 					v-else
-					:key="idx"
+					:key="idx+'else'"
 					:label="head.label ? head.label : head.name"
 					:prop="head.prop"
 					:width="head.width"

src/components/base-upload/index.vue

@@ -13,7 +13,7 @@
 			<!-- :before-remove="beforeRemove" -->
 			<!-- accept="image/*" -->
 			<!-- <el-upload class="yd-upload" :action="$http.adornUrl(url)" multiple name="files" :data="extraParams" :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove"> -->
-			<el-button size="small" type="primary">{{ buttonContent }}</el-button>
+			<el-button :disabled="readOnly" size="small" type="primary">{{ buttonContent }}</el-button>
 			<div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
 		</el-upload>
 	</div>
@@ -39,6 +39,10 @@ export default {
 			// 从外部传进来 fileList，用于展示文件列表用
 			type: Array,
 			default: () => []
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
 		}
 	},
 	// inject: {

src/views/modules/monitoring/equipment.vue

@@ -6,8 +6,8 @@
 			</el-form-item>
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
-				<el-button @click="test()">test</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+				<el-button @click="exportHandle()">导出</el-button>
 			</el-form-item>
 		</el-form>
 
@@ -163,7 +163,7 @@ const addOrUpdateConfigs = {
 			{ prop: 'createTime', name: '创建时间' },
 			{ prop: 'attrName', name: '属性名称', formField: true },
 			{ prop: 'attrValue', name: '属性值', formField: true },
-			{ prop: 'operate', name: '操作', options: ['edit', 'delete'] }
+			{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 		]
 	},
 	operations: [
@@ -272,31 +272,54 @@ export default {
 			switch (type) {
 				case 'view-detail':
 					// const { name, code } = this.dataList.find(item => item.id === id)
-					this.$router.push({
-						name: 'monitoring-equipmentAdd',
-						params: {
-							isdetail: true,
-							equipmentId: id
-						}
-					})
-					break
+					// this.$router.push({
+					// 	name: 'monitoring-equipmentAdd',
+					// 	params: {
+					// 		isdetail: true,
+					// 		equipmentId: id
+					// 	}
+					// })
+					// break
+					return this.addOrUpdateHandle(id, true)
 				case 'edit':
 					return this.addOrUpdateHandle(id)
 				case 'delete':
 					return this.deleteHandle(id)
 			}
 		},
-		test() {
-			this.addOrUpdateVisible = true
-			this.$nextTick(() => {
-				this.$refs.addOrUpdate.init()
+		exportHandle() {
+			// this.$http.get(this.$http.adornUrl('/monitoring/equipment/export')).then(({ data: res }) => {
+			this.$http({ url: this.$http.adornUrl('/monitoring/equipment/export'), method: 'get', responseType: 'blob' }).then(res => {
+				let fileName = 'equipment-list.xls'
+				if (res.headers['content-disposition']) {
+					const contentDisposition = res.headers['content-disposition']
+					fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
+				}
+				
+				fileName = decodeURIComponent(fileName)
+
+				const blob = new Blob([res.data])
+
+				if ('download' in document.createElement('a')) {
+					const alink = document.createElement('a')
+					alink.download = fileName
+					alink.style.display = 'none'
+					alink.target = '_blank'
+					alink.href = URL.createObjectURL(blob)
+					document.body.appendChild(alink)
+					alink.click()
+					URL.revokeObjectURL(alink.href)
+					document.body.removeChild(alink)
+				} else {
+					navigator.msSaveBlob(blob, fileName)
+				}
 			})
 		},
 		// 新增 / 修改
-		addOrUpdateHandle(id) {
+		addOrUpdateHandle(id, isdetail = false) {
 			this.addOrUpdateVisible = true
 			this.$nextTick(() => {
-				this.$refs.addOrUpdate.init(id)
+				this.$refs.addOrUpdate.init(id, isdetail)
 			})
 			// this.$router.push({
 			// 	name: 'monitoring-equipmentAdd',

src/views/modules/monitoring/equipmentPlc.vue

@@ -6,42 +6,11 @@
 			</el-form-item>
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
-				<el-button v-if="$hasPermission('monitoring:equipmenplc:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-				
+				<el-button v-if="$hasPermission('monitoring:equipmentplc:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
 			</el-form-item>
 		</el-form>
-		<!-- <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
-			<el-table-column type="selection" header-align="center" align="center" width="50"> </el-table-column>
-			<el-table-column prop="id" header-align="center" align="center" label="id"> </el-table-column>
-			<el-table-column prop="plcType" header-align="center" align="center" label="plc类型"> </el-table-column>
-			<el-table-column prop="code" header-align="center" align="center" label="编码"> </el-table-column>
-			<el-table-column prop="name" header-align="center" align="center" label="plc名称（ip+名称对应实时数据库表名）"> </el-table-column>
-			<el-table-column prop="enName" header-align="center" align="center" label="英文名称"> </el-table-column>
-			<el-table-column prop="description" header-align="center" align="center" label="描述"> </el-table-column>
-			<el-table-column prop="barcode" header-align="center" align="center" label="plc条码"> </el-table-column>
-			<el-table-column prop="controlType" header-align="center" align="center" label="链接方式，0 tcp，1 udp等"> </el-table-column>
-			<el-table-column prop="monitor" header-align="center" align="center" label="是否监控 0 代表不监控, 1 代表监控"> </el-table-column>
-			<el-table-column prop="collection" header-align="center" align="center" label="是否采集 0 代表不采集, 1 代表采集"> </el-table-column>
-			<el-table-column prop="ip" header-align="center" align="center" label="IP"> </el-table-column>
-			<el-table-column prop="port" header-align="center" align="center" label="端口号"> </el-table-column>
-			<el-table-column prop="enabled" header-align="center" align="center" label="启用状态:0 、停用，1、启用"> </el-table-column>
-			<el-table-column prop="remark" header-align="center" align="center" label="备注"> </el-table-column>
-			<el-table-column prop="valid" header-align="center" align="center" label="删除标志，是否有效:1 可用 0不可用"> </el-table-column>
-			<el-table-column prop="creatorId" header-align="center" align="center" label="创建人"> </el-table-column>
-			<el-table-column prop="creatorName" header-align="center" align="center" label="创建人姓名"> </el-table-column>
-			<el-table-column prop="createTime" header-align="center" align="center" label="创建时间"> </el-table-column>
-			<el-table-column prop="updaterId" header-align="center" align="center" label="更新人"> </el-table-column>
-			<el-table-column prop="updaterName" header-align="center" align="center" label="更新人姓名"> </el-table-column>
-			<el-table-column prop="updateTime" header-align="center" align="center" label="更新时间"> </el-table-column>
-			<el-table-column prop="version" header-align="center" align="center" label="版本号"> </el-table-column>
-			<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-				<template slot-scope="scope">
-					<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
-					<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
-				</template>
-			</el-table-column>
-		</el-table> -->
-			<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" />
+
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -53,46 +22,79 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
 	</div>
 </template>
 
 <script>
-import AddOrUpdate from './equipmentPlc-add-or-update'
-
+// import AddOrUpdate from './equipmentPlc-add-or-update'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
 import BaseTable from '@/components/base-table'
 import TableOperateComponent from '@/components/base-table/components/operationComponent'
 import TableTextComponent from '@/components/base-table/components/detailComponent'
 
 const tableConfigs = [
-  { "prop": "id", "name": "id" },
-  { "prop": "plcType", "name": "plc类型" },
-  { "prop": "code", "name": "编码" },
-  { "prop": "name", "name": "plc名称（ip+名称对应实时数据库表名）" },
-  { "prop": "enName", "name": "英文名称" },
-  { "prop": "description", "name": "描述" },
-  { "prop": "barcode", "name": "plc条码" },
-  { "prop": "controlType", "name": "链接方式，0 tcp，1 udp等" },
-  { "prop": "monitor", "name": "是否监控 0 代表不监控, 1 代表监控" },
-  { "prop": "collection", "name": "是否采集 0 代表不采集, 1 代表采集" },
-  { "prop": "ip", "name": "IP" },
-  { "prop": "port", "name": "端口号" },
-  { "prop": "enabled", "name": "启用状态:0 、停用，1、启用" },
-  { "prop": "remark", "name": "备注" },
-  { "prop": "valid", "name": "删除标志，是否有效:1 可用 0不可用" },
-  { "prop": "creatorId", "name": "创建人" },
-  { "prop": "creatorName", "name": "创建人姓名" },
-  { "prop": "createTime", "name": "添加时间" },
-  { "prop": "updaterId", "name": "更新人" },
-  { "prop": "updaterName", "name": "更新人姓名" },
-  { "prop": "updateTime", "name": "更新时间" },
-  { "prop": "version", "name": "版本号" },		{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+	{ type: 'index', name: '序号' },
+	{ prop: 'code', name: '编码' },
+	{ prop: 'name', name: '名称' },
+	{ prop: 'enName', name: '英文名称' },
+	{ prop: 'description', name: '描述' },
+	{ prop: 'barcode', name: 'plc条码' },
+	{ prop: 'collection', name: '是否采集', filter: val => ({ 0: '不采集', 1: '采集' }[val]) },
+	{ prop: 'ip', name: 'IP' },
+	{ prop: 'port', name: '端口号' },
+	{ prop: 'remark', name: '备注' },
+	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
 
+const addOrUpdateConfigs = {
+	type: 'dialog', // dialog | drawer | page
+	infoUrl: '/monitoring/equipmentPlc',
+	fields: [
+		{ name: 'name', required: true },
+		{ name: 'code', required: true },
+		{ name: 'enName', label: '英文名称' },
+		{
+			name: 'collection',
+			label: '是否采集',
+			required: true,
+			type: 'select',
+			options: [
+				{ label: '采集', value: 1 },
+				{ label: '不采集', value: 0 }
+			]
+		},
+		{ name: 'ip', label: 'IP', required: true, placeholder: '0.0.0.0' },
+		{ name: 'port', label: '端口', placeholder: '443' },
+		'description',
+		'remark',
+		{ name: 'barcode', label: 'plc条码', span: 24 }
+	],
+	operations: [
+		{ name: 'cancel', url: true, showAlways: true },
+		{ name: 'save', url: '/monitoring/equipmentPlc', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentPlc', permission: '', showOnEdit: true }
+	]
+	// subtable: {
+	// 	// for i18n
+	// 	title: '动态属性',
+	// 	url: '/monitoring/productArrt',
+	// 	relatedField: 'productId',
+	// 	tableConfigs: [
+	// 		{ type: 'index', name: '序号' },
+	// 		{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
+	// 		{ prop: 'name', name: '属性名', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
+	// 		{ prop: 'code', name: '属性值', formField: true },
+	// 		{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+	// 	]
+	// }
+}
 
 export default {
 	data() {
-		return {tableConfigs,
+		return {
+			tableConfigs,
+			addOrUpdateConfigs,
 			dataForm: {
 				key: ''
 			},
@@ -106,12 +108,22 @@ export default {
 		}
 	},
 	components: {
-		AddOrUpdate,BaseTable
+		AddOrUpdate,
+		BaseTable
 	},
 	activated() {
 		this.getDataList()
 	},
 	methods: {
+		//handleOperations
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'edit': 
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/equipmentPlcConnect.vue

@@ -6,32 +6,12 @@
 			</el-form-item>
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
-				<el-button v-if="$hasPermission('monitoring:equipmenplcconnect:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+				<el-button v-if="$hasPermission('monitoring:equipmentplcconnect:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
 			</el-form-item>
 		</el-form>
-		<!-- <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
-			<el-table-column type="selection" header-align="center" align="center" width="50"> </el-table-column>
-			<el-table-column prop="id" header-align="center" align="center" label="id"> </el-table-column>
-			<el-table-column prop="plcId" header-align="center" align="center" label="plc表iD"> </el-table-column>
-			<el-table-column prop="equipmentId" header-align="center" align="center" label="设备表id"> </el-table-column>
-			<el-table-column prop="enabled" header-align="center" align="center" label="启用状态:0 、停用，1、启用"> </el-table-column>
-			<el-table-column prop="remark" header-align="center" align="center" label="备注"> </el-table-column>
-			<el-table-column prop="valid" header-align="center" align="center" label="删除标志，是否有效:1 可用 0不可用"> </el-table-column>
-			<el-table-column prop="creatorId" header-align="center" align="center" label="创建人"> </el-table-column>
-			<el-table-column prop="creatorName" header-align="center" align="center" label="创建人姓名"> </el-table-column>
-			<el-table-column prop="createTime" header-align="center" align="center" label="创建时间"> </el-table-column>
-			<el-table-column prop="updaterId" header-align="center" align="center" label="更新人"> </el-table-column>
-			<el-table-column prop="updaterName" header-align="center" align="center" label="更新人姓名"> </el-table-column>
-			<el-table-column prop="updateTime" header-align="center" align="center" label="更新时间"> </el-table-column>
-			<el-table-column prop="version" header-align="center" align="center" label="版本号"> </el-table-column>
-			<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-				<template slot-scope="scope">
-					<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
-					<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
-				</template>
-			</el-table-column>
-		</el-table> -->
-			<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" />
+
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
+
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -43,36 +23,104 @@
 		>
 		</el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
 	</div>
 </template>
 
 <script>
-import AddOrUpdate from './equipmentPlcConnect-add-or-update'
+// import AddOrUpdate from './equipmentPlcConnect-add-or-update'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
 import BaseTable from '@/components/base-table'
 import TableOperateComponent from '@/components/base-table/components/operationComponent'
-import TableTextComponent from '@/components/base-table/components/detailComponent'
+// import TableTextComponent from '@/components/base-table/components/detailComponent'
+import { dictFilter } from '@/utils/filters'
+// import axios from '@/utils/request.js'
 
 const tableConfigs = [
-  { "prop": "id", "name": "id" },
-  { "prop": "plcId", "name": "plc表iD" },
-  { "prop": "equipmentId", "name": "设备表id" },
-  { "prop": "enabled", "name": "启用状态:0 、停用，1、启用" },
-  { "prop": "remark", "name": "备注" },
-  { "prop": "valid", "name": "删除标志，是否有效:1 可用 0不可用" },
-  { "prop": "creatorId", "name": "创建人" },
-  { "prop": "creatorName", "name": "创建人姓名" },
-  { "prop": "createTime", "name": "添加时间" },
-  { "prop": "updaterId", "name": "更新人" },
-  { "prop": "updaterName", "name": "更新人姓名" },
-  { "prop": "updateTime", "name": "更新时间" },
-  { "prop": "version", "name": "版本号" },		{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+	{ type: 'index', name: '序号' },
+	{ prop: 'lineName', name: '产线' },
+	{ prop: 'sectionName', name: '工段' },
+	{ prop: 'equName', name: '设备' },
+	{ prop: 'equCode', name: '设备编码' },
+	{ prop: 'plcCode', name: 'PLC编码' },
+	{ prop: 'plcName', name: 'PLC名称' },
+	{ prop: 'plcIp', name: 'PLC IP' },
+	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
 
+const UnitDictTypeId = '1557173812109242370'
+const getUnitList = function() {
+	const dl = JSON.parse(localStorage.getItem('dictList'))[UnitDictTypeId] || []
+	return dl.map(item => ({ label: item.dictLabel, value: item.dictValue }))
+}
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/equipmentPlcConnect',
+	fields: [
+		{ name: 'equipmentId', label: '设备', required: true, type: 'select', options: [] },
+		{ name: 'plcId', label: 'PLC名称', required: true, type: 'select', options: [] }
+	],
+	operations: [
+		{ name: 'cancel', url: true, showAlways: true },
+		{ name: 'save', url: '/monitoring/equipmentPlcConnect', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentPlcConnect', permission: '', showOnEdit: true }
+	],
+	subtable: {
+		title: 'PLC采集参数',
+		url: '/monitoring/equipmentPlcParam',
+		relatedField: 'plcConId',
+		tableConfigs: [
+			{ type: 'index', name: '序号' },
+			// { prop: 'plcConId', name: 'plc连接表ID' },
+			{ prop: 'paramCode', name: '参数编码', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
+			{ prop: 'paramName', name: '参数名称', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
+			{ prop: 'paramAddress', name: '参数地址', formField: true },
+			{ prop: 'unitDictValue', name: '单位', filter: dictFilter(UnitDictTypeId), formField: true, formType: 'select', formOptions: getUnitList() },
+			{ prop: 'minValue', name: '最小值', formField: true },
+			{ prop: 'maxValue', name: '最大值', formField: true },
+			{ prop: 'defaultValue', name: '参数设定标准值', formField: true },
+			{ prop: 'description', name: '描述', formField: true },
+			{
+				prop: 'enabled',
+				name: '启用状态',
+				filter: val => ['停用', '启用'][+val],
+				// filter: val => ({0:'停用', 1:'启用'}[+val]),
+				rules: [{ required: true, message: '必填', trigger: 'blur' }],
+				formField: true,
+				formType: 'select',
+				formOptions: [
+					{ value: 0, label: '停用' },
+					{ value: 1, label: '启用' }
+				]
+			},
+			{ prop: 'remark', name: '备注', formField: true },
+			// { prop: 'createTime', name: '添加时间' },
+			{
+				prop: 'collection',
+				name: '是否采集',
+				filter: val => ['不采集', '采集'][+val],
+				rules: [{ required: true, message: '必填', trigger: 'blur' }],
+				formField: true,
+				formType: 'select',
+				formOptions: [
+					{ value: 0, label: '不采集' },
+					{ value: 1, label: '采集' }
+				]
+			},
+			// { prop: 'collectionCycle', name: '采集周期（s） 暂不使用' },
+			// { prop: 'reportingCycle', name: '上报周期（s） 暂不使用' },
+			// { prop: 'reportingMethod', name: '上报方式 暂不使用' },
+			// { prop: 'reportingCode', name: '上报编码 暂不使用' },
+			{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+		]
+	}
+}
 
 export default {
 	data() {
-		return {tableConfigs,
+		return {
+			addOrUpdateConfigs,
+			tableConfigs,
 			dataForm: {
 				key: ''
 			},
@@ -86,12 +134,53 @@ export default {
 		}
 	},
 	components: {
-		AddOrUpdate,BaseTable
+		AddOrUpdate,
+		BaseTable
 	},
 	activated() {
+		this.getEqList()
+		this.getPlcList()
 		this.getDataList()
 	},
 	methods: {
+		// 设备列表
+		getEqList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipment/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					// page: this.pageIndex,
+					// limit: this.pageSize,
+					// key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				const eqConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'equipmentId')
+				eqConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || []
+			})
+		},
+		// plc 列表
+		getPlcList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentPlc/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					// page: this.pageIndex,
+					// limit: this.pageSize,
+					// key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				const plcConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'plcId')
+				plcConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || []
+			})
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true

src/views/modules/monitoring/equipmentPlcParam.vue

@@ -7,7 +7,6 @@
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipmenplcparam:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-				
 			</el-form-item>
 		</el-form>
 		<!-- <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
@@ -46,7 +45,7 @@
 				</template>
 			</el-table-column>
 		</el-table> -->
-			<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" />
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" />
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -69,42 +68,31 @@ import TableOperateComponent from '@/components/base-table/components/operationC
 import TableTextComponent from '@/components/base-table/components/detailComponent'
 
 const tableConfigs = [
-  { "prop": "id", "name": "ID" },
-  { "prop": "plcConId", "name": "plc连接表ID" },
-  { "prop": "type", "name": "类型：status、data、constant" },
-  { "prop": "paramCode", "name": "参数编码" },
-  { "prop": "paramName", "name": "参数名称" },
-  { "prop": "paramAddress", "name": "参数地址，对应实时数据库表的列名" },
-  {
-    "prop": "valueType",
-    "name": "参数值类型：int、long、boolean、string、list 暂不使用"
-  },
-  { "prop": "unitDictValue", "name": "单位 关联数据字典表label_value" },
-  { "prop": "minValue", "name": "最小值" },
-  { "prop": "maxValue", "name": "最大值" },
-  { "prop": "defaultValue", "name": "参数设定标准值" },
-  { "prop": "description", "name": "描述" },
-  { "prop": "enabled", "name": "启用状态:0 、停用，1、启用" },
-  { "prop": "remark", "name": "备注" },
-  { "prop": "valid", "name": "删除标志，是否有效:1 可用 0不可用" },
-  { "prop": "creatorId", "name": "创建人" },
-  { "prop": "creatorName", "name": "创建人姓名" },
-  { "prop": "createTime", "name": "添加时间" },
-  { "prop": "updaterId", "name": "更新人" },
-  { "prop": "updaterName", "name": "更新人姓名" },
-  { "prop": "updateTime", "name": "更新时间" },
-  { "prop": "version", "name": "版本号" },
-  { "prop": "collection", "name": "0 代表不采集, 1 代表采集" },
-  { "prop": "collectionCycle", "name": "采集周期（s） 暂不使用" },
-  { "prop": "reportingCycle", "name": "上报周期（s） 暂不使用" },
-  { "prop": "reportingMethod", "name": "上报方式 暂不使用" },
-  { "prop": "reportingCode", "name": "上报编码 暂不使用" },		{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+	{ type: 'index', name: '序号' },
+	{ prop: 'plcConId', name: 'plc连接表ID' },
+	{ prop: 'paramCode', name: '参数编码' },
+	{ prop: 'paramName', name: '参数名称' },
+	{ prop: 'paramAddress', name: '参数地址' },
+	{ prop: 'unitDictValue', name: '单位' },
+	{ prop: 'minValue', name: '最小值' },
+	{ prop: 'maxValue', name: '最大值' },
+	{ prop: 'defaultValue', name: '参数设定标准值' },
+	{ prop: 'description', name: '描述' },
+	{ prop: 'enabled', name: '启用状态:0 、停用，1、启用' },
+	{ prop: 'remark', name: '备注' },
+	// { prop: 'createTime', name: '添加时间' },
+	{ prop: 'collection', name: '0 代表不采集, 1 代表采集' },
+	// { prop: 'collectionCycle', name: '采集周期（s） 暂不使用' },
+	// { prop: 'reportingCycle', name: '上报周期（s） 暂不使用' },
+	// { prop: 'reportingMethod', name: '上报方式 暂不使用' },
+	// { prop: 'reportingCode', name: '上报编码 暂不使用' },
+	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
 
-
 export default {
 	data() {
-		return {tableConfigs,
+		return {
+			tableConfigs,
 			dataForm: {
 				key: ''
 			},
@@ -118,7 +106,8 @@ export default {
 		}
 	},
 	components: {
-		AddOrUpdate,BaseTable
+		AddOrUpdate,
+		BaseTable
 	},
 	activated() {
 		this.getDataList()

src/views/modules/monitoring/qualityInspectionRecord.vue

@@ -173,10 +173,12 @@ export default {
 					  })
 					: {}
 			}).then(({ data: res }) => {
-				if (res.data.total === 0) {
-					this.$message.error('该产线没有工段')
-				} else {
-					this.$message.success(`该产线有 ${res.data.total} 条工段`)
+				if (this.addOrUpdateVisible) {
+					if (res.data.total === 0) {
+						this.$message.error('该产线没有工段')
+					} else {
+						this.$message.success(`该产线有 ${res.data.total} 条工段`)
+					}
 				}
 				const wsOpt = this.addOrUpdateConfigs.fields.find(item => item.name === 'sectionId')
 				if (wsOpt) {

src/views/modules/monitoring/reportCategory.vue

@@ -0,0 +1,173 @@
+<template>
+	<div class="mod-config">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+			<el-form-item>
+				<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<el-button @click="getDataList()">查询</el-button>
+				<el-button v-if="$hasPermission('monitoring:reportsheetcategory:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+			</el-form-item>
+		</el-form>
+
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
+
+		<el-pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			:current-page="pageIndex"
+			:page-sizes="[10, 20, 50, 100]"
+			:page-size="pageSize"
+			:total="totalPage"
+			layout="total, sizes, prev, pager, next, jumper"
+		>
+		</el-pagination>
+		<!-- 弹窗, 新增 / 修改 -->
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+	</div>
+</template>
+
+<script>
+// import AddOrUpdate from './reportSheetCategory-add-or-update'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+import BaseTable from '@/components/base-table'
+import TableOperateComponent from '@/components/base-table/components/operationComponent'
+// import TableTextComponent from '@/components/base-table/components/detailComponent'
+
+const tableConfigs = [
+	{ prop: 'createTime', name: '添加时间' },
+	{ prop: 'name', name: '分类名称' },
+	// { prop: 'code', name: '分类编码' },
+	// 'description',
+	// 'remark',
+	{ prop: 'operations', name: '操作', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+]
+
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/reportSheetCategory',
+	fields: [
+		{ name: 'name', label: '分类名称', required: true, span: 24 },
+		// { name: 'code', label: '分类编码', required: true },
+		// { name: 'description', label: '描述' },
+		// { name: 'remark', label: '备注' }
+	],
+	operations: [
+		{ name: 'cancel', url: true, showAlways: true },
+		{ name: 'save', url: '/monitoring/reportSheetCategory', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/reportSheetCategory', permission: '', showOnEdit: true }
+	]
+}
+
+export default {
+	data() {
+		return {
+			tableConfigs,
+			addOrUpdateConfigs,
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		this.getDataList()
+	},
+	methods: {
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		// 获取数据列表
+		getDataList() {
+			this.dataListLoading = true
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/reportSheetCategory/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					page: this.pageIndex,
+					limit: this.pageSize,
+					key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.dataList = data.data.list
+					this.totalPage = data.data.total
+				} else {
+					this.dataList = []
+					this.totalPage = 0
+				}
+				this.dataListLoading = false
+			})
+		},
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		},
+		// 多选
+		selectionChangeHandle(val) {
+			this.dataListSelections = val
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(id)
+			})
+		},
+		// 删除
+		deleteHandle(id) {
+			var ids = id
+				? [id]
+				: this.dataListSelections.map(item => {
+						return item.id
+				  })
+			this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(() => {
+				this.$http({
+					url: this.$http.adornUrl('/monitoring/reportSheetCategory'),
+					method: 'delete',
+					data: this.$http.adornData(ids, false, 'raw')
+				}).then(({ data }) => {
+					if (data && data.code === 0) {
+						this.$message({
+							message: '操作成功',
+							type: 'success',
+							duration: 1500,
+							onClose: () => {
+								this.getDataList()
+							}
+						})
+					} else {
+						this.$message.error(data.msg)
+					}
+				})
+			})
+		}
+	}
+}
+</script>

src/views/modules/monitoring/reportDesign.vue

@@ -0,0 +1,44 @@
+<template>
+	<div v-loading="loading" :class="$style.container">
+		<iframe id="zgboke" :class="$style.mainIframe" name="mainIframe" :src="url" frameborder="0" scrolling="auto" />
+	</div>
+</template>
+<script>
+export default {
+	components: {},
+	props: {},
+	data() {
+		return {
+			loading: true,
+			// url: process.env.VUE_APP_REPORT_DESIGN_URL
+			url: window.SITE_CONFIG['apiURL'] + '/yd-monitor/ureport/designer'
+			// url: this.$http.adornUrl('/ureport/designer')
+		}
+	},
+	mounted() {
+		const vm = this
+		console.log(this.$route.query)
+		const { name } = this.$route.query
+		this.url += name ? '?_u=db:' + this.$route.query.name : ''
+		const ifream = document.getElementById('zgboke')
+
+    console.log('url: ', this.url)
+		ifream.onload = function() {
+			console.log('加载完成')
+			vm.loading = false
+		}
+	},
+	methods: {}
+}
+</script>
+<style lang="scss" module>
+.container {
+	margin: 0px 16px 0 8px;
+	width: 98.5%;
+	height: calc(100vh - 180px);
+	.mainIframe {
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

src/views/modules/monitoring/reportDetail.vue

@@ -0,0 +1,259 @@
+<template>
+	<div class="mod-config">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+			<el-form-item>
+				<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
+			</el-form-item>
+			<el-form-item>
+				<el-button @click="getDataList()">查询</el-button>
+				<el-button v-if="$hasPermission('')" type="primary" @click="addOrUpdateHandle()">新增(跳到设计)</el-button>
+			</el-form-item>
+		</el-form>
+
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
+
+		<el-pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			:current-page="pageIndex"
+			:page-sizes="[10, 20, 50, 100]"
+			:page-size="pageSize"
+			:total="totalPage"
+			layout="total, sizes, prev, pager, next, jumper"
+		>
+		</el-pagination>
+		<!-- 弹窗, 新增 / 修改 -->
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+	</div>
+</template>
+
+<script>
+// import AddOrUpdate from './equipmentPlcConnect-add-or-update'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+import BaseTable from '@/components/base-table'
+import TableOperateComponent from '@/components/base-table/components/operationComponent'
+import axios from '@/utils/request'
+
+const CategoryList = {
+	name: 'CategoryList',
+	props: {
+		injectData: {
+			type: Object,
+			required: true,
+			default: () => ({})
+		}
+	},
+	data() {
+		return {
+			pickedId: null
+		}
+	},
+	mounted() {
+		this.pickedId = this.injectData[this.injectData.head.prop]
+		console.log('picked id : ', this.pickedId)
+	},
+	methods: {
+		handleChange(id) {
+			this.pickedId = id
+			this.$emit('emit-data', { id })
+		}
+	},
+	render: function(h) {
+		const childOptions = []
+		this.injectData.head.options?.forEach(item => {
+      console.log('item', item)
+			childOptions.push(h('el-option', { props: { label: item.label, value: item.value } }, null)) // TODO：<=== 去他妈的
+		})
+		return h('el-select', { on: { change: this.handleChange } }, childOptions)
+	}
+}
+
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/equipmentPlcConnect',
+	fields: [
+		{ name: 'equipmentId', label: '设备', required: true, type: 'select', options: [] },
+		{ name: 'plcId', label: 'PLC名称', required: true, type: 'select', options: [] }
+	],
+	operations: [
+		{ name: 'cancel', url: true, showAlways: true },
+		{ name: 'save', url: '/monitoring/equipmentPlcConnect', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentPlcConnect', permission: '', showOnEdit: true }
+	],
+	subtable: {
+		title: 'PLC采集参数',
+		url: '/monitoring/equipmentPlcParam',
+		relatedField: 'plcConId',
+		tableConfigs: [
+			{ type: 'index', name: '序号' },
+			// { prop: 'plcConId', name: 'plc连接表ID' },
+			{ prop: 'paramCode', name: '参数编码', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
+			{ prop: 'paramName', name: '参数名称', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
+			{ prop: 'paramAddress', name: '参数地址', formField: true },
+			{ prop: 'description', name: '描述', formField: true },
+			{
+				prop: 'enabled',
+				name: '启用状态',
+				filter: val => ['停用', '启用'][+val],
+				// filter: val => ({0:'停用', 1:'启用'}[+val]),
+				rules: [{ required: true, message: '必填', trigger: 'blur' }],
+				formField: true,
+				formType: 'select',
+				formOptions: [
+					{ value: 0, label: '停用' },
+					{ value: 1, label: '启用' }
+				]
+			},
+			{ prop: 'remark', name: '备注', formField: true },
+			// { prop: 'createTime', name: '添加时间' },
+			{
+				prop: 'collection',
+				name: '是否采集',
+				filter: val => ['不采集', '采集'][+val],
+				rules: [{ required: true, message: '必填', trigger: 'blur' }],
+				formField: true,
+				formType: 'select',
+				formOptions: [
+					{ value: 0, label: '不采集' },
+					{ value: 1, label: '采集' }
+				]
+			},
+			// { prop: 'collectionCycle', name: '采集周期（s） 暂不使用' },
+			// { prop: 'reportingCycle', name: '上报周期（s） 暂不使用' },
+			// { prop: 'reportingMethod', name: '上报方式 暂不使用' },
+			// { prop: 'reportingCode', name: '上报编码 暂不使用' },
+			{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+		]
+	}
+}
+
+export default {
+	data() {
+		return {
+			addOrUpdateConfigs,
+			tableConfigs: [],
+			dataForm: {
+				key: ''
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			dataListSelections: [],
+			addOrUpdateVisible: false
+		}
+	},
+	components: {
+		AddOrUpdate,
+		BaseTable
+	},
+	activated() {
+		this.getAllCategories()
+		this.getDataList()
+	},
+	computed: {
+		trueTableConfigs() {}
+	},
+	methods: {
+		getAllCategories() {
+			axios.get(axios.adornUrl('/monitoring/reportSheetCategory/page')).then(({ data: res }) => {
+				if (res.data && res.data.list) {
+					const categories = res.data.list.map(item => ({ label: item.name, value: item.id }))
+					console.log('categories', categories)
+					this.tableConfigs = [
+						{ type: 'index', name: '序号' },
+						{ prop: 'fileName', name: '报表名称' },
+						{ prop: 'category', name: '报表分类', subcomponent: CategoryList, options: categories },
+						{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+					]
+				}
+			})
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		// 获取数据列表
+		getDataList() {
+			this.dataListLoading = true
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/reportSheet/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					page: this.pageIndex,
+					limit: this.pageSize,
+					key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.dataList = data.data.list
+					this.totalPage = data.data.total
+				} else {
+					this.dataList = []
+					this.totalPage = 0
+				}
+				this.dataListLoading = false
+			})
+		},
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		},
+		// 多选
+		selectionChangeHandle(val) {
+			this.dataListSelections = val
+		},
+		// 新增 / 修改
+		addOrUpdateHandle(id) {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init(id)
+			})
+		},
+		// 删除
+		deleteHandle(id) {
+			var ids = id
+				? [id]
+				: this.dataListSelections.map(item => {
+						return item.id
+				  })
+			this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(() => {
+				this.$http({
+					url: this.$http.adornUrl('/monitoring/equipmentPlcConnect'),
+					method: 'delete',
+					data: this.$http.adornData(ids, false, 'raw')
+				}).then(({ data }) => {
+					if (data && data.code === 0) {
+						this.$message({
+							message: '操作成功',
+							type: 'success',
+							duration: 1500,
+							onClose: () => {
+								this.getDataList()
+							}
+						})
+					} else {
+						this.$message.error(data.msg)
+					}
+				})
+			})
+		}
+	}
+}
+</script>

src/views/modules/monitoring/reportList.vue

@@ -0,0 +1,141 @@
+<template>
+	<div class="container">
+		<el-row class="sort-box" :gutter="20">
+			<el-col class="sort-item" :span="4" @click.native="handleClick('')">
+				<div class="sort-item-box">
+					<div class="sort-item-box-top">
+						<!-- <p>{{ $t('module.report.reportSort.all') }}</p> -->
+						<p>全部</p>
+					</div>
+					<div class="sort-item-box-bottom">{{ allNum }} {{ allNum > 1 ? 'Reports' : 'Report' }}</div>
+				</div>
+			</el-col>
+			<el-col v-for="item in dataList" :key="item.id" class="sort-item" @click.native="handleClick(item.id)">
+				<div class="sort-item-box">
+					<div class="sort-item-box-top">
+						<p>{{ item.name }}</p>
+					</div>
+					<div class="sort-item-box-bottom">{{ item.quantity }} {{ item.quantity > 1 ? 'Reports' : 'Report' }}</div>
+				</div>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			allNum: 0
+		}
+	},
+	created() {
+		this.getDataList()
+	},
+	methods: {
+		// get list
+		getDataList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/reportSheetCategory/list'),
+				method: 'get',
+				params: {}
+			}).then(({ data: res }) => {
+        this.allNum = 0
+				if (res.data) {
+					this.dataList = res.data
+          res.data.forEach(item => {
+            this.allNum += item.quantity 
+          })
+				} else this.dataList.splice(0)
+			})
+		},
+
+		handleClick(id) {
+			this.$router.push({
+				name: 'monitoring-reportDetail',
+				query: {
+					sortId: id
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.container {
+	padding: 20px;
+	.sort-box {
+		.sort-item {
+			height: 400px;
+			width: 280px;
+			margin-bottom: 20px;
+			.sort-item-box {
+				width: 100%;
+				height: 400px;
+				background: #faefc2;
+				border-radius: 10px;
+				box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
+				cursor: pointer;
+				position: relative;
+				overflow: hidden;
+				.sort-item-box-top {
+					margin: 0 10%;
+					width: 80%;
+					height: 199px;
+					border-bottom: 1px solid #e3d47d;
+					color: #b3a995;
+					position: relative;
+					p {
+						width: 100%;
+						position: absolute;
+						bottom: 0px;
+						line-height: 50px;
+						font-size: 24px;
+						letter-spacing: 5px;
+						text-align: center;
+					}
+				}
+				.sort-item-box-bottom {
+					width: 100%;
+					height: 200px;
+					line-height: 200px;
+					font-size: 24px;
+					font-weight: bold;
+					text-align: center;
+					letter-spacing: 5px;
+					color: #6e7680;
+				}
+			}
+			.sort-item-box::before {
+				content: '';
+				position: absolute;
+				right: 0;
+				width: 4px;
+				height: 400px;
+				background: #f8e69b;
+			}
+			.sort-item-box::after {
+				content: '';
+				position: absolute;
+				right: 0;
+				top: 70px;
+				width: 18px;
+				height: 60px;
+				background: #f8e69b;
+				border-radius: 5px;
+			}
+			.sort-item-box:hover {
+				transition: border linear 0.2s, box-shadow linear 0.2s;
+				border-color: rgba(141, 39, 142, 0.75);
+				box-shadow: 0 0 5px rgba(111, 1, 32, 3);
+				// border: 2px solid #fff;
+			}
+		}
+	}
+}
+</style>

src/views/modules/monitoring/reportPreview.vue

@@ -0,0 +1,70 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-03-07 18:39:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-02-24 16:35:51
+ * @Description: file content
+-->
+<template>
+	<div v-loading="loading" :class="$style.container">
+		<h1 >{{ $route.query.name }}</h1>
+
+		<iframe id="reportView" :class="$style.mainIframe" name="mainIframe" :src="url" frameborder="0" scrolling="auto" />
+	</div>
+</template>
+<script>
+export default {
+	components: {},
+	props: {},
+	data() {
+		return {
+			loading: true,
+			// url: process.env.VUE_APP_REPORT_VIEW_URL
+			url: window.SITE_CONFIG['apiURL'] + '/yd-monitor/ureport/preview'
+		}
+	},
+	mounted() {
+		const vm = this
+		console.log(this.$route.query)
+		this.url += '?_u=db:' + this.$route.query.name + '.ureport.xml'
+		// if (this.$route.query.params) {
+		//   const params = JSON.parse(this.$route.query.params)
+		//   params.map(item => {
+		//     this.url += '&' + item.key + '=' + item.value
+		//   })
+		// }
+		if (this.$route.query.substrateId) {
+			this.url += '&substrateId=' + this.$route.query.substrateId
+		}
+		if (this.$route.query.equipmentId) {
+			this.url += '&equipmentId=' + this.$route.query.equipmentId
+		}
+		if (this.$route.query.dataId) {
+			this.url += '&dataId=' + this.$route.query.dataId
+		}
+		if (this.$route.query.workOrderNo) {
+			this.url += '&workOrderNo=' + this.$route.query.workOrderNo
+		}
+		if (this.$route.query.id) {
+			this.url += '&id=' + this.$route.query.id
+		}
+		const ifream = document.getElementById('reportView')
+		ifream.onload = function() {
+			console.log('加载完成')
+			vm.loading = false
+		}
+	},
+	methods: {}
+}
+</script>
+<style lang="scss" module>
+.container {
+	margin: 0px 16px 0 8px;
+	width: 98.5%;
+	height: calc(100vh - 180px);
+	.mainIframe {
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>