Jcdm041-Mes.git

jiang

2024-01-22 fbed8eb7f2fb5a51e72c8560f4d48247b92f14b7

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