src/components/small-title/index.vue

@@ -55,7 +55,8 @@ $mgr: 6px;
 			height: $height + 2px;
 			border-radius: 1px;
 			margin-right: $mgr;
-			background-color: #0b58ff;
+			// background-color: #0b58ff;
+			background-color: #409EFF;
 		}
 	}
 }

src/views/modules/monitoring/qualityInspectionCurrent.vue

@@ -1,23 +1,156 @@
 <template>
-	<div class="quality-inspection-current base-container">
-		<small-title>hhh</small-title>
+	<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 = {}
-const tableConfigDynamic = {}
+const tableConfigStatic = [
+	{ type: 'index', name: '序号' },
+	{ name: '上片总数', prop: '' },
+	{ name: '下片总数', prop: '' },
+	{ name: '检测总数', prop: '' },
+	{ name: '比例', prop: '' }
+]
+const tableConfigDynamic = []
 
+const dict = ['表格', '图形']
 export default {
 	name: 'QualityInspectionCurrent',
-	components: { BaseTable, SmallTitle },
+	components: { BaseTable, SmallTitle, FakeChart: { render: h => h('span', null, 'fake-chart') } },
 	data() {
-		return {}
+		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])
+						}
+					}
+				]
+			}
+		}
 	},
-	methods: {}
+	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>
 
@@ -25,6 +158,6 @@ export default {
 .base-container {
 	min-height: 60vh;
 	background: #fff;
-	padding: 8px;
+	padding: 12px;
 }
 </style>