src/views/equipment/timing-diagram/output/index.vue

@@ -6,24 +6,182 @@
 -->
 
 <template>
-    <div class="app-container">
-        设备产量时序图
-    </div>
+	<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 {}
-},
-computed: {},
-methods: {},
-}
+	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>
+<style scoped lang="scss"></style>