Jcdm041-Mes.git

jiang

2024-01-24 2df134deae4601dd7182c1b95a6663ce03785854

提交 \| 用户 \| 时间
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">
b6145e	8	<el-col :span="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>
b6145e	21	<el-col :span="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>
b6145e	34	<el-col :span="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>
b6145e	47	<el-col :span="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
b6145e	61	<el-col :span="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>
b6145e	74	<el-col :span="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
b6145e	126	width: 1442px;
fd2207	127	.card-panel-col {
懒	128
b6145e	129	margin-bottom: 15px;
懒	130	}
fd2207	131	.card-panel {
b6145e	132	margin-left: -13px;
懒	133	width: 220px;
fd2207	134	height: 108px;
懒	135	cursor: pointer;
	136	font-size: 12px;
	137	position: relative;
	138	overflow: hidden;
	139	color: #666;
	140	background: #fff;
	141	box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
	142	border-color: rgba(0, 0, 0, .05);
	143
	144	&:hover {
	145	.card-panel-icon-wrapper {
	146	color: #fff;
	147	}
	148
	149	.icon-people {
	150	background: #40c9c6;
	151	}
	152
	153	.icon-message {
	154	background: #36a3f7;
	155	}
	156
	157	.icon-money {
	158	background: #f4516c;
	159	}
	160
	161	.icon-shopping {
	162	background: #34bfa3
	163	}
	164	}
	165
	166	.icon-people {
	167	color: #40c9c6;
	168	}
	169
	170	.icon-message {
	171	color: #36a3f7;
	172	}
	173
	174	.icon-money {
	175	color: #f4516c;
	176	}
	177
	178	.icon-shopping {
	179	color: #34bfa3
	180	}
	181
	182	.card-panel-icon-wrapper {
	183	float: left;
b6145e	184	margin: 14px 0 0 10px;
fd2207	185	padding: 16px;
懒	186	transition: all 0.38s ease-out;
	187	border-radius: 6px;
	188	}
	189
	190	.card-panel-icon {
	191	float: left;
	192	font-size: 48px;
	193	}
	194
	195	.card-panel-description {
	196	float: right;
	197	font-weight: bold;
b6145e	198	margin: 15px 30px 0 0;
懒	199	//margin-left: 0px;
	200	padding: 15px 15px;
fd2207	201
懒	202	.card-panel-text {
8adcec	203	line-height: 14px;
fd2207	204	color: rgba(0, 0, 0, 0.45);
8adcec	205	font-size: 12px;
J	206	margin-bottom: 9px;
fd2207	207	}
懒	208
	209	.card-panel-num {
8adcec	210	font-size: 18px;
fd2207	211	}
懒	212	}
	213	}
	214	}
	215
	216	@media (max-width:550px) {
	217	.card-panel-description {
	218	display: none;
	219	}
	220
	221	.card-panel-icon-wrapper {
	222	float: none !important;
	223	width: 100%;
	224	height: 100%;
	225	margin: 0 !important;
	226
	227	.svg-icon {
	228	display: block;
	229	margin: 14px auto !important;
	230	float: none !important;
	231	}
	232	}
	233	}
	234	</style>