<template>
	<div class="widgets-home" ref="main">
		<div class="widgets-content">
			<div class="retangleWrap retangleWrapTop">
				<div class="retangle retangleImg">
					<div class="companyName">中建材光子科技有限公司</div>
					<div class="companyDesc">公司秉承“善用资源，服务建设”的核心理念，践行“材料创造美</div>
					<div class="companyDesc">好世界”的企业使命，坚持“创新、绩效、和谐、责任”的核心价</div>
					<div class="companyDesc">值观，努力成长为具有创新精神和全球视野的光子材料领先企业。</div>
					<img class="topCardImg" src="img/topCard.png">
				</div>
			</div>
			<div class="retangleWrap">
				<div class="retangle countRetangle">
					<div style="display: flex;justify-content: space-between;padding: 0 24px;">
						<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">昨日核心指标</div>
						<!-- <div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">时间</div> -->
					</div>
					<div style="padding-top: 20px;display: flex;">
						<div class="countItem">
							<div class="countname">预制棒合格数</div>
							<p class="countnum">6700</p>
							<p class="countrate">同比前天<span class="redColor"> 8.63%▲</span></p>
						</div>
						<div class="countItem">
							<div class="countname">预制管合格数</div>
							<p class="countnum">6700</p>
							<p class="countrate">同比前天<span class="redColor"> 8.63%▲</span></p>
						</div>
						<div class="countItem">
							<div class="countname">AVG合格数</div>
							<p class="countnum">6700</p>
							<p class="countrate">同比前天<span class="greenColor"> 8.63%▼</span></p>
						</div>
						<div class="countItem">
							<div class="countname">预制棒管交付数</div>
							<p class="countnum">6700</p>
							<p class="countrate">同比前天<span class="redColor"> 8.63%▲</span></p>
						</div>
						<div class="countItem">
							<div class="countname">AVG交付数</div>
							<p class="countnum">6700</p>
							<p class="countrate">同比前天<span class="redColor"> 8.63%▲</span></p>
						</div>
					</div>
				</div>
			</div>
			<div class="retangleWrap retangleWrapmiddle">
				<div class="retangle middleRetangle">
					<div style="padding: 20px 0;display: flex;">
						<div class="middleItem">
							<div class="countname">本月累积交付数</div>
							<div style="display: flex;justify-content: space-around;padding-top: 25px;font-size: 20px;">
								<div>
									<div>预制棒管</div>
									<p class="countnum">6700</p>
								</div>
								<div>
									<div>AVG</div>
									<p class="countnum">6700</p>
								</div>
							</div>
						</div>
						<div class="middleItem" style="display: flex;">
							<el-progress type="circle" :stroke-width="15" :show-text="false" :percentage="25" />
							<div style="margin-left: 20px;">
								<div class="countname">预制棒合格率</div>
								<p class="countnum">80%</p>
							</div>
						</div>
						<div class="middleItem" style="display: flex;">
							<el-progress type="circle" :stroke-width="15" :show-text="false" :percentage="25" />
							<div style="margin-left: 20px;">
								<div class="countname">预制管合格率</div>
								<p class="countnum">80%</p>
								<p class="countrate">同比上周 8.63%</p>
							</div>
						</div>
						<div class="middleItem" style="display: flex;">
							<el-progress type="circle" :stroke-width="15" :show-text="false" :percentage="25" />
							<div style="margin-left: 20px;">
								<div class="countname">AVG合格率</div>
								<p class="countnum">80%</p>
								<p class="countrate">同比上周 8.63%</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<el-row>
				<el-col :span="14">
					<div class="retangleWrap" style="padding-right: 0;">
						<div class="retangle bottomRetangle">
							<div style="display: flex;justify-content: space-between;padding: 0 24px;">
								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">
									本月生产合格趋势</div>
								<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...
								</div>
							</div>
							<div style="padding: 20px 24px 0 24px;background: #ffffff;">
								<div class="bottomItem">
									<div class="countname">本月计划完成度</div>
									<p class="countnum">99%</p>
									<!-- <p class="countrate">同比上周<span class="redColor"> 8.63%▲</span> 月同比6.47%</p> -->
									<div id="barCharts" style="width: 100%;height: 218px;"></div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="10">
					<div class="retangleWrap retangleWrapTable">
						<div class="retangle tableRetangle">
							<div style="display: flex;justify-content: space-between;padding: 0 24px;">
								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">库存情况
								</div>
							</div>
							<div style="padding: 20px 24px 24px 24px;">
								<el-table :data="tableData" style="width: 100%;height: 285px;">
									<el-table-column prop="index" label="序号" width="60" />
									<el-table-column prop="name" label="名称" />
									<el-table-column prop="specification" label="规格" />
									<el-table-column prop="specification" label="型号" />
									<el-table-column prop="unit" label="单位" />
									<el-table-column prop="count" label="库存" />
								</el-table>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row style="margin-bottom: 20px;">
				<el-col :span="7">
					<div class="retangleWrap" style="padding-right: 0;">
						<!-- <div class="retangle bottomRetangle">
							<div style="display: flex;justify-content: space-between;padding: 0 24px;"> 
								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">月度趋势</div>
								<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...</div>
							</div>
							<div style="padding: 20px 24px 24px 24px;">
								<div style="display: flex;">
									<el-icon style="color: #409EFF;font-size: 35px;"><WarningFilled/></el-icon>
									<div>
										<p>设备检验</p>
										<p>提醒日期</p>
									</div>
								</div>
								<div style="display: flex;margin-top: 20px;">
									<el-icon style="color: #409EFF;font-size: 35px;"><WarningFilled/></el-icon>
									<div>
										<p>设备检验</p>
										<p>提醒日期</p>
									</div>
								</div>
							</div>
						</div> -->
						<div class="retangle bottomRetangle" style="background: rgb(20,141,255);color:#ffffff;">
							<div style="display: flex;justify-content: space-between;padding: 0 24px;">
								<div style="font-size: 16px;font-weight: 400;line-height: 24px;">预警提示</div>
							</div>
							<div style="padding: 20px 24px 24px 24px;height: 311px;">
								<div>
									<p>延期任务数量上月同比增加 <span style="font-size: 24px;">10.23%</span></p>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="10">
					<div class="retangleWrap retangleWrapTable" style="padding-right: 0;">
						<div class="retangle tableRetangle">
							<div style="display: flex;justify-content: space-between;padding: 0 24px;">
								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">生产设备
								</div>
							</div>
							<div style="padding: 20px 24px 24px 24px;">
								<el-table :data="equipList" style="width: 100%;height: 285px;">
									<el-table-column prop="number" label="设备编号" />
									<el-table-column prop="name" label="设备名称" />
									<el-table-column prop="belong_dept_name" label="所在车间" />
									<el-table-column prop="state" label="设备状态">
										<template #default="scope">
											{{ eqState_[scope.row.state] }}
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="7">
					<div class="retangleWrap retangleWrapTable">
						<div class="retangle tableRetangle">
							<div style="display: flex;justify-content: space-between;padding: 0 24px;">
								<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">日历
								</div>
							</div>
							<div style="">
								<el-calendar v-model="calendarValue" />
								<!-- <el-table :data="tableData" style="width: 100%;height: 285px;">
									<el-table-column prop="index" label="序号"/>
									<el-table-column prop="number" label="设备编号"/>
									<el-table-column prop="name" label="设备名称"/>
									<el-table-column prop="state" label="设备状态"/>
								</el-table> -->
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
	data() {
		return {
			time: '',
			day: '',
			year_s: '',
			month_s: '',
			yearData: [],
			monthData: [],
			warningNum: 0,
			warningNum2: 0,
			tableData: [
				{ index: 1, name: 'GZKJ-01', specification: '500*30', unit: '个', count: 100 },
				{ index: 2, name: 'GZKJ-02', specification: '500*30', unit: '个', count: 100 },
				{ index: 3, name: 'GZKJ-03', specification: '500*30', unit: '个', count: 100 },
				{ index: 4, name: 'GZKJ-04', specification: '500*30', unit: '个', count: 100 },
			],
			equipList: [],
			calendarValue: '',
			eqState_: {
				10: '完好',
				20: '限用',
				30: '在修',
				40: '禁用',
			},
		}
	},
	mounted() {
		this.$emit('on-mounted');
		let that = this;
		var myDate = new Date();
		let year = myDate.getFullYear();
		let month = myDate.getMonth() + 1;
		that.year_s = year;
		that.month_s = month;
		that.initChart();
		this.calendarValue = new Date();
		this.getEquipList()
	},
	methods: {
		getEquipList() {
			this.$API.em.equipment.list.req({ page: 0, type: 10 }).then(res => {
				this.equipList = res
			})
		},
		// 动态绑定Class
		bindClass(type) {
			let classInfo = {
				socketDom: true, redColor: false,
				orangeColor: false, yellowColor: false, blueColor: true
			}
			if (type == '') {
				classInfo.redColor = true
			}
			return classInfo
		},
		getMessage(msg) {
			console.log(msg);
		},
		close() {
			if (this.ws) {
				this.ws.close();
				this.ws = null;
				console.log("socket已经关闭");
			}
		},
		showTime() {
			this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
			this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
		},
		interEvent() {
			this.$router.replace({ path: '/events' })
		},
		interEquipment() {
			this.$router.replace({ path: '/em/equipmentc' })
		},
		initChart() {
			//柱状图
			var dom = document.getElementById("barCharts");
			var myChart = echarts.init(dom);
			let option = {
				grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
					top: '5%',
					left: '1%',
					right: '1%',
					bottom: '5%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					axisLabel: {
						// show: false, // X 轴标签文字旋转角度  
					},
					data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号']
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						show: false, // X 轴标签文字旋转角度  
					},
				},
				series: [{
					data: [10, 9, 8, 11, 12, 10, 9, 10, 8, 9, 10],
					type: 'bar',
					barMaxWidth: 50,
					itemStyle: {
						normal: { color: 'rgb(20, 141, 255)' }
					}
				}]
			};
			myChart.setOption(option, true);
		},

	}
}
</script>

<style scoped lang="scss">
.retangleWrap {
	width: 100%;
	padding: 20px 20px 0 20px;
	box-sizing: border-box;
}

.retangle {
	width: 100%;
	border-radius: 15px;
	box-sizing: border-box;
	position: relative;
	background: #ffffff;
}

.retangleImg {
	height: 188px;
	color: #ffffff;
	padding-left: 43px;
	background: linear-gradient(180.00deg, rgb(58, 149, 255), rgb(27, 92, 255) 100%);
}

.companyName {
	padding-top: 28px;
	font-size: 24px;
	line-height: 28px;
	padding-bottom: 23px;
}

.companyDesc {
	padding-left: 4px;
	font-size: 14px;
	line-height: 20px;
}

.topCardImg {
	height: 188px;
	position: absolute;
	right: 10px;
	top: 0;
}

.countRetangle {
	height: 180px;
	padding-top: 20px;
	box-sizing: border-box;
}

.countItem {
	width: 20%;
	padding-left: 24px;
	display: inline-block;
	box-sizing: border-box;
	border-right: 1px solid #eeeeee;
}

.countItem:last-child {
	border-right: 0;
}

.countname {
	font-size: 14px;
	line-height: 22px;
	color: rgba(94, 94, 94);
}

.countnum {
	font-size: 30px;
	padding-bottom: 11px;
	line-height: 38px;
}

.countrate {
	line-height: 20px;
	color: rgba(0, 0, 0, .45);
}

.redColor {
	color: rgb(255, 73, 87);
}

.greenColor {
	color: rgb(71, 201, 58);
}

.middleRetangle {
	border-radius: 2px;
	position: relative;
	box-sizing: border-box;
}

.middleItem {
	width: 25%;
	padding-left: 34px;
	display: inline-block;
	box-sizing: border-box;
}

.middleItem:first-child {
	border-right: 1px solid #eeeeee;
}

.tableRetangle {
	height: auto;
	padding-top: 20px;
}

.bottomRetangle {
	padding: 20px 0;
	box-sizing: border-box;
	background: #ffffff;
}
</style>
