<!-- 
    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" 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>
			<h2 v-else>请添加设备</h2>
		</div>
	</div>
</template>

<script>
export default {
	name: 'SGProduction',
	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,
				recordTime: [],
			},
			graphList: [],
		};
	},
	created() {
		this.initProductline();
		this.initWorksection();
		this.getList();
	},
	methods: {
		/** 重置查询条件 */
		initQuery() {
			this.queryParams.lineId = null;
			this.queryParams.sectionId = null;
			this.queryParams.recordTime = [];
		},

		async getList() {
			const { code, data } = await this.$axios({
				url: '/analysis/equipment-analysis/status',
				method: 'get',
				params: this.queryParams,
			});
			if (code == 0) {
				this.graphList = data;
				console.log('graph list', this.graphList);
			}
		},

		/** 准备产线数据 */
		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,
					};
				});
			}
		},
	},
};
</script>

<style scoped lang="scss"></style>
