优化物联概览页面

src/assets/img/index_alarm.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694756324250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10141" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M902.4 825.6h-96V518.4c0-153.6-121.6-275.2-275.2-275.2S249.6 364.8 249.6 518.4v307.2H153.6c-6.4 0-12.8 6.4-12.8 12.8v57.6c0 6.4 6.4 12.8 12.8 12.8h748.8c6.4 0 12.8-6.4 12.8-12.8v-57.6c0-6.4-6.4-12.8-12.8-12.8z" fill="#FE6D68" p-id="10142"></path><path d="M486.4 76.8h83.2v108.8H486.4V76.8zM268.8 160l70.4-38.4 57.6 96L320 256l-51.2-96zM121.6 332.8l44.8-70.4L256 320l-38.4 70.4-96-57.6zM793.6 320l96-57.6 38.4 70.4-96 57.6-38.4-70.4zM652.8 211.2l57.6-96 70.4 38.4-51.2 102.4-76.8-44.8zM633.6 505.6H544l19.2-115.2c0-6.4 0-6.4-6.4-6.4h-6.4L409.6 550.4v12.8h96l-19.2 115.2c0 6.4 0 6.4 6.4 6.4h6.4L640 518.4s0-6.4-6.4-12.8c6.4 0 0 0 0 0z" fill="#F9D65D" p-id="10143"></path></svg>

src/views/iot/iotmanager/dashboard.vue

@@ -2,17 +2,23 @@
 	<div class="home-container">
 		<el-row :gutter="15" class="home-card-one mb15">
 			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in homeOne" :key="k" :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
-				<div class="home-card-item flex">
+				
+				<div class="home-card-item ">
+					<div class="">{{ v.num3 }}</div>
 					<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
 						<div class="flex-auto">
-							<span class="font30">{{ v.num1 }}</span>
-							<span class="ml5 font16" :style="{ color: v.color1 }"> {{ v.num2 }}</span>
-							<div class="mt10">{{ v.num3 }}</div>
+
+							<span class="font30">{{ v.allnum }}</span>
 						</div>
-						<div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
-							<i class="iconfont flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>
+						<div class="home-card-item-icon flex" >
+							<img :src="'/src/assets/img/'+v.icoimg" class="icoimg">
+
 						</div>
 					</div>
+					<div class="flex" style="font-weight: bold;">
+						<div class="flex font14"><div class="title_status"  :style="{ backgroundColor: v.title1_bgcolor }"></div> {{ v.title1 }} {{ v.num1 }}</div>
+						<div class="flex ml10 font14"><div class="title_status"  :style="{  backgroundColor: v.title2_bgcolor}"></div>{{ v.title2 }} {{ v.num2 }}</div>
+					</div>
 				</div>
 			</el-col>
 		</el-row>
@@ -119,40 +125,65 @@ export default defineComponent({
 			},
 			homeOne: [
 				{
+					allnum: '0',
 					num1: '0',
 					num2: '0',
-					num3: '产品数',
+					num3: '产品',
 					num4: 'icon-zidingyibuju',
 					color1: '#6690F9',
 					color2: '--el-color-warning-lighter',
 					color3: '--el-color-warning',
+					icoimg: 'index_product.svg',
+					title1: '启用',
+					title2: '停用',
+					title1_bgcolor: '#3cd357',
+					title2_bgcolor: '#c1bbbb',
+					
 				},
 				{
+					allnum: '0',
 					num1: '0',
-					num2: '离线 0',
-					num3: '设备数',
+					num2: '0',
+					num3: '设备',
 					num4: 'icon-putong',
 					color1: '#FF6462',
 					color2: '--next-color-primary-lighter',
 					color3: '--el-color-primary',
+					icoimg: 'index_sensor.svg',
+					title1: '在线',
+					title2: '离线',
+					title1_bgcolor: '#3cd357',
+					title2_bgcolor: '#c1bbbb',
 				},
 				{
+					allnum: '0',
 					num1: '0',
 					num2: '0',
-					num3: '今日设备消息量',
+					num3: '设备消息',
 					num4: 'icon-shidu',
 					color1: '#6690F9',
 					color2: '--el-color-success-lighter',
 					color3: '--el-color-success',
+					icoimg: 'index_device.svg',
+					title1: '总量',
+					title2: '今日',
+					title1_bgcolor: '#c1bbbb',
+					title2_bgcolor: '#18f3ff',
 				},
 				{
+					allnum: '0',
 					num1: '0',
 					num2: '0',
-					num3: '设备报警量',
+					num3: '设备告警',
 					num4: 'icon-zaosheng',
 					color1: '#6690F9',
 					color2: '--el-color-warning-lighter',
 					color3: '--el-color-warning',
+					icoimg: 'index_alarm.svg',
+					title1: '总量',
+					title2: '新增',
+					title1_bgcolor: '#c1bbbb',
+					title2_bgcolor: '#ff1818',
 				},
 			],
 			myCharts: [],
@@ -371,12 +402,16 @@ export default defineComponent({
 				// "msgAdded": 7391, //今日设备消息增量
 				// "alarmTotal": 43, //设备报警总量
 				// "alarmAdded": 0 //今日设备报警增量
-				state.homeOne[0].num1 = overview.productTotal;
-				state.homeOne[0].num2 = `+${overview.productAdded}`;
+				state.homeOne[0].allnum = overview.productTotal;
+				state.homeOne[0].num1 = `${overview.productActivation}`;
+				state.homeOne[0].num2 = `${overview.productDeactivation}`;
+				state.homeOne[1].allnum = overview.deviceTotal;
 				state.homeOne[1].num1 = overview.deviceTotal;
-				state.homeOne[1].num2 = `离线 ${overview.deviceOffline}`;
+				state.homeOne[1].num2 = `${overview.deviceOffline}`;
+				state.homeOne[2].allnum = overview.msgTotal;
 				state.homeOne[2].num1 = overview.msgTotal;
-				state.homeOne[2].num2 = `+${overview.msgAdded}`;
+				state.homeOne[2].num2 = `${overview.msgAdded}`;
+				state.homeOne[3].allnum = overview.alarmTotal;
 				state.homeOne[3].num1 = overview.alarmTotal;
 				state.homeOne[3].num2 = `${overview.alarmAdded}`;
 
@@ -485,14 +520,24 @@ $homeNavLengh: 8;
 	.home-card-one,
 	.home-card-two,
 	.home-card-three {
-
+		.icoimg{
+			width: 50px;
+			height: 50px;
+		}
+		.title_status{
+			width: 10px;
+			height: 10px;
+			background: #c1bbbb;
+			border-radius: 50px;
+			margin-right: 5px;
+		}
 		.home-card-item,
 		.home-card-top {
 			width: 100%;
 			height: 130px;
 			border-radius: 4px;
 			transition: all ease 0.3s;
-			padding: 20px;
+			padding: 10px 20px;
 			overflow: hidden;
 			background: var(--el-color-white);
 			color: var(--el-text-color-primary);