<!--
    filename: index.vue
    author: liubin
    date: 2023-09-04 09:34:52
    description: 设备效率分析
-->

<template>
  <div class="app-container allow-overflow">
    <!-- 搜索工作栏 -->
    <SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick" />

    <el-row>
      <el-col class="custom-tabs">
        <el-tabs v-model="activeName" :stretch="true" @tab-click="handleTabClick">
          <el-tab-pane :label="'\u2002数据列表\u2002'" name="table">
            <!-- 列表 -->
            <base-table class="base-table__margin" :table-props="tableProps" :page="1" :limit="10" :max-height="tableH"
              :table-data="list" @emitFun="handleEmitFun"></base-table>
          </el-tab-pane>
          <el-tab-pane :label="'\u3000可视化\u3000'" name="graph" style="overflow: inherit">
            <div v-if="activeName == 'graph'" class="graph" style="
								overflow: inherit;
								display: flex;
								flex-direction: column;
								position: relative;
							">
              <div class="blue-title">各设备加工数量</div>
              <div class="legend">
                <div class="legend-item">
                  <span class="icon blue"></span>
                  <span class="text">工作时长</span>
                </div>
                <div class="legend-item">
                  <span class="icon green"></span>
                  <span class="text">停机时长</span>
                </div>
                <div class="legend-item">
                  <span class="icon purple"></span>
                  <span class="text">故障时长</span>
                </div>
                <div class="legend-item">
                  <span class="icon yellow"></span>
                  <span class="text">速度开动率</span>
                </div>
              </div>
              <div class="graph-grid">
                <div class="bg-grid grid-line">
                  <div class="grid-item" v-for="item in list.length" :key="item"></div>
                </div>

                <div class="bg-grid grid-charts">
                  <pie-chart v-for="item in list" :key="item.id" :value="item" />
                  <!-- <pie-chart v-for="item in 5" :key="item" :value="item" /> -->
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import PieChart from './components/pieChart.vue';
import {
  exportEquipmentTraceabilityExcel
} from '@/api/quality/deviceParameters';
export default {
	name: 'EfficiencyAnalysis',
	mixins: [basicPageMixin],
	components: { PieChart },
	props: {},
	data() {
		return {
			activeName: 'table',
			open: false,
			visualizationOpen: false,
			trendOpen: false,
			// tableBtn: [
			// 	this.$auth.hasPermi('base:equipment-group:update')
			// 		? {
			// 				type: 'edit',
			// 				btnName: '修改',
			// 		  }
			// 		: undefined,
			// 	this.$auth.hasPermi('base:equipment-group:delete')
			// 		? {
			// 				type: 'delete',
			// 				btnName: '删除',
			// 		  }
			// 		: undefined,
      // ].filter((v) => v),
      tableH: this.tableHeight(260),
			tableProps: [
				{ prop: 'factoryName', label: '工厂' },
				{ prop: 'lineName', label: '产线' },
				{ prop: 'sectionName', label: '工段' },
				{ prop: 'equipmentName', label: '设备' },
				{
					label: '有效时间',
					children: [
						{
							width: 128,
							prop: 'workTime',
							label: '工作时长[h]',
						},
						{
							width: 128,
							prop: 'workRate',
							label: '百分比[%]',
							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
						},
					],
				},
				{
					label: '关机时间',
					children: [
						{
							width: 128,
							prop: 'stopTime',
							label: '停机时长[h]',
						},
						{ width: 128, prop: 'stopRate', label: '百分比[%]' },
					],
				},
				{
					label: '中断损失',
					children: [
						{
							width: 128,
							prop: 'downTime',
							label: '故障时长[h]',
							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
						},
						{ width: 128, prop: 'downRate', label: '百分比[%]' },
						{
							width: 128,
							prop: 'timeEfficiency',
							label: '时间开动率',
							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
						},
					],
				},
				{
					label: '速度损失',
					children: [
						{
							width: 128,
							prop: 'realProcSpeed',
							label: '实际加工速度',
						},
						{
							width: 128,
							prop: 'designProcSpeed',
							label: '理论加工速度',
						},
						{
							width: 128,
							prop: 'peEfficiency',
							label: '速度开动率',
							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
						},
					],
				},
				{
					prop: 'oee',
					label: 'OEE',
					filter: (val) => (val != null ? +val.toFixed(3) : '-'),
				},
				{
					prop: 'teep',
					label: 'TEEP',
					filter: (val) => (val != null ? +val.toFixed(3) : '-'),
				},
				// {
				// 	_action: 'view-trend',
				// 	label: '趋势',
				// 	,
				// 	subcomponent: {
				// 		props: ['injectData'],
				// 		render: function (h) {
				// 			const _this = this;
				// 			return h(
				// 				'el-button',
				// 				{
				// 					props: { type: 'text' },
				// 					on: {
				// 						click: function () {
				// 							console.log('inejctdata', _this.injectData);
				// 							_this.$emit('emitData', {
				// 								action: _this.injectData._action,
				// 								// value: _this.injectData.id,
				// 								value: _this.injectData,
				// 							});
				// 						},
				// 					},
				// 				},
				// 				'查看趋势'
				// 			);
				// 		},
				// 	},
				// },
			],
			searchBarFormConfig: [
				{
					type: 'select',
					label: '工单',
					placeholder: '请选择工单',
          param: 'workOrderId',
					selectOptions: [],
				},
				// {
				// 	type: 'select',
				// 	label: '产线',
				// 	placeholder: '请选择产线',
				// 	param: 'lineId',
				// 	selectOptions: [],
				// },
				// 选项切换
				// {
				// 	type: 'select',
				// 	label: '时间类型',
				// 	param: 'dateFilterType',
				// 	defaultSelect: 0,
				// 	selectOptions: [
				// 		{ id: 0, name: '按时间段' },
				// 		{ id: 1, name: '按日期' },
				// 	],
				// 	index: 2,
				// 	extraOptions: [
						{
							// parent: 'dateFilterType',
							// 时间段选择
							type: 'datePicker',
							label: '时间段',
							dateType: 'daterange',
							format: 'yyyy-MM-dd',
							valueFormat: 'yyyy-MM-dd HH:mm:ss',
							defaultTime: ['00:00:00', '00:00:00'],
							rangeSeparator: '-',
							startPlaceholder: '开始时间',
							endPlaceholder: '结束时间',
              param: 'recordTime',
						},
				// 		{
				// 			parent: 'dateFilterType',
				// 			// 日期选择
				// 			type: 'datePicker',
				// 			// label: '日期',
				// 			dateType: 'date',
				// 			placeholder: '选择日期',
				// 			format: 'yyyy-MM-dd',
				// 			valueFormat: 'yyyy-MM-dd',
				// 			param: 'timeday',
				// 		},
				// 	],
				// },
				{
          type: this.$auth.hasPermi(
            'monitoring:equipment-traceability:query'
          )
            ? 'button'
            : '',
					btnName: '查询',
					name: 'search',
					color: 'primary',
        },
        {
          type: this.$auth.hasPermi(
            'monitoring:equipment-traceability:export'
          )
            ? 'separate'
            : '',
        },
        {
          type: this.$auth.hasPermi(
            'monitoring:equipment-traceability:export'
          )
            ? 'button'
            : '',
        	btnName: '导出',
        	name: 'export',
        	color: 'warning',
        },
				// {
				// 	type: 'separate',
				// },
				// {
				// 	type: 'button',
				// 	btnName: '设备可视化',
				// 	name: 'visualization',
				// 	plain: true,
				// 	color: 'success',
				// },
				// {
				// 	type: 'button',
				// 	btnName: 'OEE',
				// 	name: 'add',
				// 	plain: true,
				// 	color: 'success',
				// },
				// {
				// 	type: 'button',
				// 	btnName: 'TEEP',
				// 	name: 'add',
				// 	plain: true,
				// 	color: 'warning',
				// },
			],
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				// lineId: null,
        workOrderId: null,
				recordTime: [],
			},
			// 表单参数
			form: {},
			list: [],
		};
	},
  created() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
    })
		this.getWorkOrder()
		// this.getLine();
		this.getList();
	},
	methods: {
		/** 准备工厂数据 */
    async getWorkOrder() {
      console.log(1111);
			const { code, data } = await this.$axios({
        url: '/base/core-work-order/listbyfilter',
				method: 'get',
			});
      if (code == 0) {
        console.log('1111', data);
				this.searchBarFormConfig[0].selectOptions = data.map((item) => {
					return {
						name: item.name,
						id: item.id,
					};
				});
			}
		},

		// /** 准备产线数据 */
		// async getLine() {
		// 	const { code, data } = await this.$axios({
		// 		url: '/base/production-line/listAll',
		// 		method: 'get',
		// 	});
		// 	if (code == 0) {
		// 		this.searchBarFormConfig[1].selectOptions = data.map((item) => {
		// 			return {
		// 				name: item.name,
		// 				id: item.id,
		// 			};
		// 		});
		// 	}
		// },

		/** 覆盖 handleEmitFun 的默认实现 */
		handleEmitFun({ action, value }) {
			switch (action) {
				case 'view-trend':
					const { id } = value;
					this.open = true;
					this.trendOpen = true;
					break;
			}
    },
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams };
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal
        .confirm('是否确认导出设备状态追溯?')
        .then(() => {
          this.exportLoading = true;
          return exportEquipmentTraceabilityExcel(params);
        })
        .then((response) => {
          this.$download.excel(response, '设备状态追溯.xls');
          this.exportLoading = false;
        })
        .catch(() => { });
    },
		/** 查询列表 */
		async getList() {
      this.loading = true
			const { code, data } = await this.$axios({
				url: '/analysis/equipment-analysis/efficiency',
				method: 'get',
				params: this.queryParams,
			});
			if (code == 0) {
				this.list = data;
			}
		},

		handleSearchBarBtnClick({ btnName, ...payload }) {
			console.log('handleSearchBarBtnClick', btnName, payload);
			if (btnName == 'visualization') {
				// 可视化
				this.visualizationOpen = true;
				this.open = true;
			}
			if (btnName == 'search') {
        this.queryParams.workOrderId = payload.workOrderId || null;
				// this.queryParams.lineId = payload.lineId || null;
				// if (0 == payload.dateFilterType) {
          this.queryParams.recordTime = payload.recordTime;
				// } else if (1 == payload.dateFilterType) {
					this.queryParams.recordTime = [
              payload.recordTime[0],
              payload.recordTime[1],
					];
				// }
      } else {
        this.handleExport()
				this.queryParams.recordTime = null;
			}
			this.getList();
		},

		cancel() {
			this.open = false;
		},

		closed() {
			this.visualizationOpen = false;
			this.trendOpen = false;
		},

		submitForm() {},

		handleTabClick() {},
	},
};
</script>

<style scoped lang="scss">
.visualization {
	display: grid;
	grid-template-columns: repeat(3, minmax(240px, 1fr));
}

:deep(.custom-tabs) {
	.el-tabs__header {
		margin-bottom: 8px;
		display: inline-block;
		transform: translateY(-12px);
	}

	.el-tabs__content {
		overflow: visible;
	}

	.el-tabs__item {
		padding-left: 0 !important;
		padding-right: 0 !important;
		line-height: 36px !important;
		height: 36px;
	}
}

.blue-title {
	position: relative;
	padding: 4px 0;
	padding-left: 12px;
	font-size: 14px;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 6px;
		height: 16px;
		width: 4px;
		border-radius: 1px;
		background: #0b58ff;
	}
}

.graph-grid {
	margin-top: 8px;
	padding: 12px;
	position: relative;
	border-radius: 12px;
	border: 1px solid #ccc;
	// background: #0003;
	overflow: inherit;
}
.bg-grid {
	display: grid;
	place-content: center;
	grid-template-columns: repeat(4, minmax(280px, 1fr));
	grid-auto-columns: 280px;
	grid-auto-rows: 290px;
	overflow: inherit;
	position: relative;
}

.grid-line::after {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	display: inline-block;
	border: 8px solid #fff;
}

.grid-charts {
	position: absolute;
	width: calc(100% - 24px);
	top: 12px;
	left: 12px;
}

.grid-item {
	border: 1px solid #ccc;
}

.grid-item:not(:first-child) {
	border-left: 0;
	border-top: 0;
}

.legend {
	position: absolute;
	top: 8px;
	right: 12px;
	display: flex;
}

.legend .legend-item {
	display: flex;
	align-items: center;
	margin-left: 12px;
}

.legend .legend-item .icon {
	width: 10px;
	height: 10px;
	border-radius: 1px;
	margin-right: 4px;
	margin-top: 1px;
}

.legend .legend-item .text {
	color: #8c8c8c;
}

.blue {
	background-color: #3da8fd;
}

.green {
	background-color: #8ef0ab;
}

.purple {
	background-color: #6b5cfd;
}

.yellow {
	background-color: #ffc72a;
}

@media screen and (max-width: 1390px) {
	.bg-grid {
		grid-template-columns: repeat(3, minmax(280px, 1fr));
	}
}

@media screen and (max-width: 1190px) {
	.bg-grid {
		grid-template-columns: repeat(2, minmax(280px, 1fr));
	}
}

@media screen and (max-width: 640px) {
	.bg-grid {
		grid-template-columns: repeat(1, minmax(280px, 1fr));
	}
}
</style>
