|
|
@@ -2,22 +2,28 @@
|
|
|
<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 ">
|
|
|
- <div>{{ v.num3 }}</div>
|
|
|
- <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
|
|
|
- <div class="flex-auto">
|
|
|
+ <div class="home-card-top-part">
|
|
|
+ <div class="top">
|
|
|
+ <img :src="'/imgs/' + v.icoimg" class="icoimg">
|
|
|
+ <div class="card-right">
|
|
|
<span class="font30">{{ v.allnum }}</span>
|
|
|
- </div>
|
|
|
- <div class="home-card-item-icon flex">
|
|
|
- <img :src="'/imgs/' + v.icoimg" class="icoimg">
|
|
|
+ <div class="label">{{ v.num3 }}</div>
|
|
|
</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 class="divider"></div>
|
|
|
+ <div class="card-bottom">
|
|
|
+ <div class="flex" style="gap:10px">
|
|
|
+ <img src="/@/assets/ok.svg" v-if="k < 2" alt="" class="icon">
|
|
|
+ <img src="/@/assets/date.svg" v-else alt="" class="icon">
|
|
|
+ <span class="info" :style="{ color: v.title1_bgcolor }">{{ v.title1 }}</span>
|
|
|
+ <div class="num"> {{ v.num1 }}</div>
|
|
|
</div>
|
|
|
- <div class="flex ml20 font14">
|
|
|
- <div class="title_status" :style="{ backgroundColor: v.title2_bgcolor }"></div>{{ v.title2 }} {{ v.num2 }}
|
|
|
+ <div class="split"></div>
|
|
|
+ <div class="flex" style="gap:10px">
|
|
|
+ <img src="/@/assets/stop.svg" v-if="k < 2" alt="" class="icon">
|
|
|
+ <img src="/@/assets/today.svg" v-else alt="" class="icon">
|
|
|
+ <span class="info" :style="{ color: v.title2_bgcolor }">{{ v.title2 }}</span>
|
|
|
+ <div class="num"> {{ v.num2 }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -155,11 +161,11 @@ export default defineComponent({
|
|
|
color1: '#6690F9',
|
|
|
color2: '--el-color-warning-lighter',
|
|
|
color3: '--el-color-warning',
|
|
|
- icoimg: 'index_product.svg',
|
|
|
+ icoimg: 'dashboard-icon1.svg',
|
|
|
title1: '启用',
|
|
|
title2: '停用',
|
|
|
title1_bgcolor: '#3cd357',
|
|
|
- title2_bgcolor: '#c1bbbb',
|
|
|
+ title2_bgcolor: '#FFBB73',
|
|
|
|
|
|
},
|
|
|
{
|
|
|
@@ -171,11 +177,11 @@ export default defineComponent({
|
|
|
color1: '#FF6462',
|
|
|
color2: '--next-color-primary-lighter',
|
|
|
color3: '--el-color-primary',
|
|
|
- icoimg: 'index_device.svg',
|
|
|
+ icoimg: 'dashboard-icon2.svg',
|
|
|
title1: '启用',
|
|
|
title2: '停用',
|
|
|
title1_bgcolor: '#3cd357',
|
|
|
- title2_bgcolor: '#c1bbbb',
|
|
|
+ title2_bgcolor: '#FFBB73',
|
|
|
},
|
|
|
{
|
|
|
allnum: 0,
|
|
|
@@ -186,11 +192,11 @@ export default defineComponent({
|
|
|
color1: '#6690F9',
|
|
|
color2: '--el-color-success-lighter',
|
|
|
color3: '--el-color-success',
|
|
|
- icoimg: 'index_sensor.svg',
|
|
|
+ icoimg: 'dashboard-icon3.svg',
|
|
|
title1: '本月',
|
|
|
title2: '今日',
|
|
|
- title1_bgcolor: '#c1bbbb',
|
|
|
- title2_bgcolor: '#18f3ff',
|
|
|
+ title1_bgcolor: '#5ECCFF',
|
|
|
+ title2_bgcolor: '#2441F9',
|
|
|
},
|
|
|
{
|
|
|
allnum: 0,
|
|
|
@@ -201,11 +207,11 @@ export default defineComponent({
|
|
|
color1: '#6690F9',
|
|
|
color2: '--el-color-warning-lighter',
|
|
|
color3: '--el-color-warning',
|
|
|
- icoimg: 'index_alarm.svg',
|
|
|
+ icoimg: 'dashboard-icon4.svg',
|
|
|
title1: '本月',
|
|
|
title2: '今日',
|
|
|
- title1_bgcolor: '#c1bbbb',
|
|
|
- title2_bgcolor: '#ff1818',
|
|
|
+ title1_bgcolor: '#5ECCFF',
|
|
|
+ title2_bgcolor: '#2441F9',
|
|
|
},
|
|
|
],
|
|
|
myCharts: [],
|
|
|
@@ -260,16 +266,16 @@ export default defineComponent({
|
|
|
{
|
|
|
name: '消息量',
|
|
|
type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
+ symbolSize: 0,
|
|
|
symbol: 'circle',
|
|
|
smooth: true,
|
|
|
data: state.lineChartMsgTotalData,
|
|
|
- lineStyle: { color: '#fe9a8b' },
|
|
|
- itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
|
|
|
+ lineStyle: { color: '#6AE4F8', width: 3 },
|
|
|
+ itemStyle: { color: '#6AE4F8', borderColor: '#6AE4F8' },
|
|
|
areaStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#fe9a8bb3' },
|
|
|
- { offset: 1, color: '#fe9a8b03' },
|
|
|
+ { offset: 0, color: 'rgba(106, 228, 248, 0.3)' },
|
|
|
+ { offset: 1, color: 'rgba(106, 228, 248, 0)' },
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
@@ -280,12 +286,12 @@ export default defineComponent({
|
|
|
symbol: 'circle',
|
|
|
smooth: true,
|
|
|
data: state.lineChartAlarmTotalData,
|
|
|
- lineStyle: { color: '#9E87FF' },
|
|
|
- itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
|
|
|
+ lineStyle: { color: '#3880F0', width: 3 },
|
|
|
+ itemStyle: { color: '#3880F0', borderColor: '#3880F0' },
|
|
|
areaStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#9E87FFb3' },
|
|
|
- { offset: 1, color: '#9E87FF03' },
|
|
|
+ { offset: 0, color: 'rgba(56, 128, 240, 0.3)' },
|
|
|
+ { offset: 1, color: 'rgba(56, 128, 240, 0)' },
|
|
|
]),
|
|
|
},
|
|
|
emphasis: {
|
|
|
@@ -384,12 +390,7 @@ export default defineComponent({
|
|
|
type: 'pie',
|
|
|
radius: ['70', '90'],
|
|
|
center: ['32%', '50%'],
|
|
|
- itemStyle: {
|
|
|
- // color: function (params: any) {
|
|
|
- // console.log(params)
|
|
|
- // return colorList[params.dataIndex];
|
|
|
- // },
|
|
|
- },
|
|
|
+ padAngle: 1,
|
|
|
label: { show: false },
|
|
|
labelLine: { show: false },
|
|
|
data: data,
|
|
|
@@ -619,6 +620,77 @@ export default defineComponent({
|
|
|
<style scoped lang="scss">
|
|
|
$homeNavLengh: 8;
|
|
|
|
|
|
+.home-card-top-part {
|
|
|
+ background-color: var(--el-color-white);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px 20px;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ overflow: hidden;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icoimg {
|
|
|
+ width: 54px !important;
|
|
|
+ height: 54px !important;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .divider {
|
|
|
+ border-top: 1px solid var(--el-border-color-light);
|
|
|
+ margin: 12px 0 15px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 1;
|
|
|
+ height: 54px;
|
|
|
+
|
|
|
+ .font30 {
|
|
|
+ color: #343EED;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-bottom {
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ gap: 12px;
|
|
|
+
|
|
|
+ .split {
|
|
|
+ border-right: 1px solid var(--el-border-color-light);
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 17px;
|
|
|
+ height: 17px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.home-container {
|
|
|
overflow: hidden;
|
|
|
|
|
|
@@ -626,8 +698,8 @@ $homeNavLengh: 8;
|
|
|
.home-card-two,
|
|
|
.home-card-three {
|
|
|
.icoimg {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
+ width: 75px;
|
|
|
+ height: 75px;
|
|
|
}
|
|
|
|
|
|
.title_status {
|
|
|
@@ -642,14 +714,14 @@ $homeNavLengh: 8;
|
|
|
.home-card-top {
|
|
|
width: 100%;
|
|
|
height: 130px;
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: 8px;
|
|
|
transition: all ease 0.3s;
|
|
|
padding: 10px 20px;
|
|
|
overflow: hidden;
|
|
|
background: var(--el-color-white);
|
|
|
color: var(--el-text-color-primary);
|
|
|
- border: 1px solid var(--next-border-color-light);
|
|
|
|
|
|
+ // border: 1px solid var(--next-border-color-light);
|
|
|
&:hover {
|
|
|
// box-shadow: 0 2px 12px var(--next-color-dark-hover);
|
|
|
transition: all ease 0.3s;
|
