Jcdm041-Mes.git

hdy

2024-01-23 84b3331ec60367869a3546aff2df2e0ec4462ab1

提交 \| 用户 \| 时间
fd2207	1	<template>
84b333	2
H	3	<el-card class="box-card">
8adcec	4	<div slot="header" class="clearfix">
J	5	<span class="top2">单日累计产量</span>
	6	</div>
84b333	7	<el-row :gutter="40" class="panel-group">
H	8	<el-col :lg="4" class="card-panel-col">
fd2207	9	<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
懒	10	<div class="card-panel-icon-wrapper icon-people">
	11	<svg-icon icon-class="peoples" class-name="card-panel-icon" />
	12	</div>
	13	<div class="card-panel-description">
	14	<div class="card-panel-text">
e211c9	15	合箱上线
fd2207	16	</div>
8adcec	17	<count-to :start-val="0" :end-val="10200" :duration="2600" class="card-panel-num" />
fd2207	18	</div>
懒	19	</div>
	20	</el-col>
84b333	21	<el-col :lg="4" class="card-panel-col">
fd2207	22	<div class="card-panel" @click="handleSetLineChartData('messages')">
懒	23	<div class="card-panel-icon-wrapper icon-message">
	24	<svg-icon icon-class="message" class-name="card-panel-icon" />
	25	</div>
	26	<div class="card-panel-description">
	27	<div class="card-panel-text">
e211c9	28	合箱下线
fd2207	29	</div>
懒	30	<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
	31	</div>
	32	</div>
	33	</el-col>
84b333	34	<el-col :lg="4" class="card-panel-col">
fd2207	35	<div class="card-panel" @click="handleSetLineChartData('purchases')">
懒	36	<div class="card-panel-icon-wrapper icon-money">
	37	<svg-icon icon-class="money" class-name="card-panel-icon" />
	38	</div>
	39	<div class="card-panel-description">
	40	<div class="card-panel-text">
e211c9	41	总装上线
fd2207	42	</div>
懒	43	<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
	44	</div>
	45	</div>
	46	</el-col>
84b333	47	<el-col :lg="4" class="card-panel-col">
fd2207	48	<div class="card-panel" @click="handleSetLineChartData('shoppings')">
懒	49	<div class="card-panel-icon-wrapper icon-shopping">
	50	<svg-icon icon-class="shopping" class-name="card-panel-icon" />
	51	</div>
	52	<div class="card-panel-description">
	53	<div class="card-panel-text">
e211c9	54	总装下线
fd2207	55	</div>
懒	56	<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
	57	</div>
	58	</div>
	59	</el-col>
fbed8e	60
84b333	61	<el-col :lg="4" class="card-panel-col">
fbed8e	62	<div class="card-panel" @click="handleSetLineChartData('shoppings')">
J	63	<div class="card-panel-icon-wrapper icon-shopping">
	64	<svg-icon icon-class="shopping" class-name="card-panel-icon" />
	65	</div>
	66	<div class="card-panel-description">
	67	<div class="card-panel-text">
	68	CVT上线
	69	</div>
	70	<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
	71	</div>
	72	</div>
	73	</el-col>
84b333	74	<el-col :lg="4" class="card-panel-col">
fbed8e	75	<div class="card-panel" @click="handleSetLineChartData('shoppings')">
J	76	<div class="card-panel-icon-wrapper icon-shopping">
	77	<svg-icon icon-class="shopping" class-name="card-panel-icon" />
	78	</div>
	79	<div class="card-panel-description">
	80	<div class="card-panel-text">
	81	CVT下线
	82	</div>
	83	<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
	84	</div>
	85	</div>
	86	</el-col>
84b333	87	</el-row>
8adcec	88	</el-card>
84b333	89
fbed8e	90
fd2207	91	</template>
懒	92
	93	<script>
	94	import CountTo from 'vue-count-to'
	95
	96	export default {
	97	components: {
	98	CountTo
	99	},
	100	methods: {
	101	handleSetLineChartData(type) {
	102	this.$emit('handleSetLineChartData', type)
	103	}
	104	}
	105	}
	106	</script>
	107
	108	<style lang="scss" scoped>
84b333	109	//.bottom-card{
H	110	// padding: 15px 20px 20px 20px;
	111	// height: auto;
	112	// width: 1272px;
	113	// margin-left: 20px;
	114	// justify-content: center;
	115	// column-width: max-content;
	116	//}
8adcec	117
fbed8e	118	.top2{
8adcec	119	font-size: 18px;
fbed8e	120	font-weight: bold;
8adcec	121	margin-bottom: 0px;
fbed8e	122	}
J	123
fd2207	124	.panel-group {
懒	125
8adcec	126	width: 1272px;
J	127	margin-left: 20px;
fd2207	128	.card-panel-col {
懒	129	margin-bottom: 32px;
	130	}
	131
	132	.card-panel {
	133	height: 108px;
	134	cursor: pointer;
	135	font-size: 12px;
	136	position: relative;
	137	overflow: hidden;
	138	color: #666;
	139	background: #fff;
	140	box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
	141	border-color: rgba(0, 0, 0, .05);
	142
	143	&:hover {
	144	.card-panel-icon-wrapper {
	145	color: #fff;
	146	}
	147
	148	.icon-people {
	149	background: #40c9c6;
	150	}
	151
	152	.icon-message {
	153	background: #36a3f7;
	154	}
	155
	156	.icon-money {
	157	background: #f4516c;
	158	}
	159
	160	.icon-shopping {
	161	background: #34bfa3
	162	}
	163	}
	164
	165	.icon-people {
	166	color: #40c9c6;
	167	}
	168
	169	.icon-message {
	170	color: #36a3f7;
	171	}
	172
	173	.icon-money {
	174	color: #f4516c;
	175	}
	176
	177	.icon-shopping {
	178	color: #34bfa3
	179	}
	180
	181	.card-panel-icon-wrapper {
	182	float: left;
	183	margin: 14px 0 0 14px;
	184	padding: 16px;
	185	transition: all 0.38s ease-out;
	186	border-radius: 6px;
	187	}
	188
	189	.card-panel-icon {
	190	float: left;
	191	font-size: 48px;
	192	}
	193
	194	.card-panel-description {
	195	float: right;
	196	font-weight: bold;
	197	margin: 26px;
	198	margin-left: 0px;
8adcec	199	padding: 20px 20px;
fd2207	200
懒	201	.card-panel-text {
8adcec	202	line-height: 14px;
fd2207	203	color: rgba(0, 0, 0, 0.45);
8adcec	204	font-size: 12px;
J	205	margin-bottom: 9px;
fd2207	206	}
懒	207
	208	.card-panel-num {
8adcec	209	font-size: 18px;
fd2207	210	}
懒	211	}
	212	}
	213	}
	214
	215	@media (max-width:550px) {
	216	.card-panel-description {
	217	display: none;
	218	}
	219
	220	.card-panel-icon-wrapper {
	221	float: none !important;
	222	width: 100%;
	223	height: 100%;
	224	margin: 0 !important;
	225
	226	.svg-icon {
	227	display: block;
	228	margin: 14px auto !important;
	229	float: none !important;
	230	}
	231	}
	232	}
	233	</style>