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/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,245 @@
+<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'
+
+const CategoryList = {
+	name: 'Category List',
+	props: {
+		options: {
+			type: Array,
+			default: () => []
+		}
+	},
+	methods: {
+		handleChange(id) {
+			this.$emit('emit-data', { id })
+		}
+	},
+	render: function(h) {
+		const childOptions = []
+		this.options.forEach(item => {
+			childOptions.push(h('el-option', { props: { label: item.label, value: item.value } }, null))
+		})
+		return h('el-select', { on: { change: this.handleChange } }, childOptions)
+	}
+}
+
+const tableConfigs = [
+	{ 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: '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.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/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>