后台首页完善中

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "echarts": "^5.3.3",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",

src/views/index/index.vue

@@ -36,30 +36,60 @@
 			<el-col :span="8">
 				<div class="cell">
 					<el-card class="box-card">
-					  <div slot="header" class="clearfix">
-					    <span>卡片名称</span>
-					  </div>
-					  <div v-for="o in 4" :key="o" class="text item">
-					    {{'列表内容 ' + o }}
-					  </div>
+						<div slot="header" class="clearfix">
+							<img src="../../icons/images/index/zoushi.png" alt="">
+							<span>用电消费走势图</span>
+						</div>
+						<div id="main-line" class="line-echart"></div>
 					</el-card>
 				</div>
 			</el-col>
 			<el-col :span="16">
 				<div class="cell">
-					11111111
+					<el-card class="box-card">
+						<div slot="header" class="clearfix">
+							<img src="../../icons/images/index/yujing.png" alt="">
+							<span>超时预警</span>
+						</div>
+						<div v-for="o in 4" :key="o" class="text item">
+							{{'列表内容 ' + o }}
+						</div>
+					</el-card>
 				</div>
 			</el-col>
 		</el-row>
 		<el-row>
 			<el-col :span="8">
 				<div class="cell">
-					11111111
+					<el-card class="box-card">
+						<div slot="header" class="clearfix">
+							<img src="../../icons/images/index/yewu.png" alt="">
+							<span>实时业务信息</span>
+						</div>
+						<div v-for="o in 4" :key="o" class="text item">
+							{{'列表内容 ' + o }}
+						</div>
+					</el-card>
 				</div>
 			</el-col>
 			<el-col :span="16">
 				<div class="cell">
-					11111111
+					<el-card class="box-card">
+						<div slot="header" class="clearfix">
+							<div class="card-header-between">
+								<div class="card-title-left">
+									<img src="../../icons/images/index/zhuangtai.png" alt="">
+									<span>空调实时状态</span>
+									<div class="card-desc">设备总计：5895台</div>
+									<div class="card-desc">已开机：256台</div>
+								</div>
+								<div class="card-desc">A/B=已开机/总设备</div>
+							</div>
+						</div>
+						<div v-for="o in 4" :key="o" class="text item">
+							{{'列表内容 ' + o }}
+						</div>
+					</el-card>
 				</div>
 			</el-col>
 		</el-row>
@@ -67,8 +97,111 @@
 </template>
 
 <script>
-	export default {
+	import * as echarts from 'echarts/core';
+	import {
+		TitleComponent,
+		ToolboxComponent,
+		TooltipComponent,
+		GridComponent,
+		LegendComponent
+	} from 'echarts/components';
 
+	import {
+		LineChart
+	} from 'echarts/charts';
+
+	import {
+		UniversalTransition
+	} from 'echarts/features';
+
+	import {
+		CanvasRenderer
+	} from 'echarts/renderers';
+
+	echarts.use([
+		TitleComponent,
+		ToolboxComponent,
+		TooltipComponent,
+		GridComponent,
+		LegendComponent,
+		LineChart,
+		CanvasRenderer,
+		UniversalTransition
+	]);
+
+	export default {
+		mounted() {
+			this.initCharts();
+		},
+		methods: {
+			initCharts() {
+				// 基于准备好的dom，初始化echarts实例
+				var myChart = echarts.init(document.getElementById('main-line'));
+				// 绘制图表
+				this.setOption(myChart)
+			},
+			setOption(myChart) {
+				myChart.setOption({
+					tooltip: {
+						trigger: 'axis'
+					},
+					legend: {
+						y: 'bottom',
+						x: 'center',
+						data: ['Email', 'Union Ads', 'Video Ads', 'Direct']
+					},
+					grid: {
+						top: '10%',
+						left: '3%',
+						right: '4%',
+						bottom: '6%',
+						containLabel: true
+					},
+					toolbox: {
+						feature: {
+							saveAsImage: {
+								show: false,
+								title: '下载'
+							}
+						}
+					},
+					xAxis: {
+						type: 'category',
+						boundaryGap: false,
+						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+					},
+					yAxis: {
+						name: '元',
+						type: 'value'
+					},
+					series: [{
+							name: 'Email',
+							type: 'line',
+							stack: 'Total',
+							data: [120, 132, 101, 134, 90, 230, 210]
+						},
+						{
+							name: 'Union Ads',
+							type: 'line',
+							stack: 'Total',
+							data: [220, 182, 191, 234, 290, 330, 310]
+						},
+						{
+							name: 'Video Ads',
+							type: 'line',
+							stack: 'Total',
+							data: [150, 232, 201, 154, 190, 330, 410]
+						},
+						{
+							name: 'Search Engine',
+							type: 'line',
+							stack: 'Total',
+							data: [820, 932, 901, 934, 1290, 1330, 1320]
+						}
+					]
+				});
+			}
+		}
 	}
 </script>
 
@@ -155,10 +288,47 @@
 						box-shadow: 0 0 8px #3660FF;
 					}
 				}
-				
+
 				.box-card {
 					border: none;
 					box-shadow: none;
+					color: #292B34;
+
+					.clearfix {
+						display: flex;
+						align-items: center;
+						font-size: 20px;
+						font-family: Microsoft YaHei-3970(82674968);
+
+						img {
+							width: 24px;
+							height: 24px;
+							margin-right: 8px;
+						}
+
+						.card-header-between {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							width: 100%;
+
+							.card-title-left {
+								display: flex;
+								align-items: center;
+							}
+
+							.card-desc {
+								font-family: Microsoft YaHei-3970(82674968);
+								font-size: 16px;
+								margin-left: 20px;
+							}
+						}
+					}
+
+					.line-echart {
+						width: 450px;
+						height: 350px;
+					}
 				}
 			}