mt-yd-ui/src/views/modules/monitoring/qualityInspectionCurrent.vue

<template>
	<div class="mod-config">
		<el-form :inline="true" @keyup.enter.native="getDataList()">
			<el-form-item>
				<!-- type="datetimerange" -->
				<el-date-picker
					type="daterange"
					v-model="datetime"
					value-format="yyyy-MM-ddTHH:mm:ss"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					range-separator="至"
					:default-time="['00:00:00', '23:59:59']"
					:picker-options="quickOptions"
					clearable
				/>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
				<el-button v-if="$hasPermission('monitoring:qualityinspectionrecord:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-form-item>
		</el-form>

		<div class="quality-inspection-current base-container">
			<el-row>
				<el-col>
					<small-title :size="'md'">上下片及检测总数统计</small-title>
					<el-row style="margin-top: 12px;">
						<base-table :data="dataListStatic" :table-head-configs="tableConfigStatic" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
					</el-row>
				</el-col>
			</el-row>

			<el-row style="margin-top: 28px;">
				<el-col>
					<el-row>
						<small-title :size="'md'">各产线检测类型统计</small-title>
					</el-row>
					<el-row style="margin-top: 8px;">
						<el-radio-group v-model="dataType" size="medium" @change="handleDataTypeChange">
							<el-radio-button label="表格"></el-radio-button>
							<el-radio-button label="图形"></el-radio-button>
						</el-radio-group>
					</el-row>
					<el-row style="margin-top: 12px;">
						<base-table v-if="!showGraph"></base-table>
						<fake-chart v-else></fake-chart>
					</el-row>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import moment from 'moment'
import BaseTable from '@/components/base-table'
import SmallTitle from '@/components/small-title'

const tableConfigStatic = [
	{ type: 'index', name: '序号' },
	{ name: '上片总数', prop: '' },
	{ name: '下片总数', prop: '' },
	{ name: '检测总数', prop: '' },
	{ name: '比例', prop: '' }
]
const tableConfigDynamic = []

const dict = ['表格', '图形']
export default {
	name: 'QualityInspectionCurrent',
	components: { BaseTable, SmallTitle, FakeChart: { render: h => h('span', null, 'fake-chart') } },
	data() {
		return {
			tableConfigStatic,
			dataListStatic: [],
			dataListDynamic: [],
			dict,
			dataType: dict[0], // 表格 | 图形
			showGraph: false,
			datetime: [],
			quickOptions: {
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							const baseTime = moment().set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
							const startTime = baseTime.format('yyyy-MM-DDTHH:mm:ss')
							const endTime = baseTime.set({ hour: 23, minute: 59, second: 59, millisecond: 999 }).format('yyyy-MM-DDTHH:mm:ss')
							picker.$emit('pick', [startTime, endTime])
						}
					}
				]
			}
		}
	},
	mounted() {
		this.getDataList()
	},
	methods: {
		handleOperations() {},
		handleDataTypeChange(value) {
			this.showGraph = value === dict[0] ? false : true
		},
		getDataList() {
			/** 设置默认日期 */
			const startTime =
				this.datetime[0] ||
				moment()
					.set({ hour: 0, minute: 0, second: 0 })
					.format('yyyy-MM-DDTHH:mm:ss')
			const endTime =
				this.datetime[1] ||
				moment()
					.set({ hour: 23, minute: 59, second: 59 })
					.format('yyyy-MM-DDTHH:mm:ss')

			/** [1] 获取上下片数据 */
			this.fetchList('sx', startTime, endTime).then(({ data: res }) => {
				console.log('sx: ', res)
			})
			/** [2] 获取产线检测类型 */
			this.fetchList('pl', startTime, endTime).then(({ data: res }) => {
				console.log('pl: ', res)
			})
		},
		fetchList(type, startTime, endTime) {
			switch (type) {
				case 'sx':
					return this.$http({
						url: this.$http.adornUrl('/monitoring/qualityInspectionRecord/pageCountRecordNow'),
						method: 'POST',
						data: {
							startTime,
							endTime
						}
					}).catch(err => {
						console.error(err)
					})
				case 'pl':
					return this.$http({
						url: this.$http.adornUrl('/monitoring/qualityInspectionRecord/qualityInspectionRecordsDet'),
						method: 'POST',
						data: {
							startTime,
							endTime
						}
					}).catch(err => {
						console.error(err)
					})
			}
		}
	}
}
</script>

<style scoped>
.base-container {
	min-height: 60vh;
	background: #fff;
	padding: 12px;
}
</style>