tj

src/pages/alarms/untreated/index.vue

 <template lang="pug">
     el-container(style="height:77vh")
-        el-aside( width="18vw" v-loading="leftLoading" style="z-index:1000;")
+        el-aside( width="350px" v-loading="leftLoading" style="z-index:1000;")
             div.left_aside(style="height:auto")
                 el-header.left_header 报警统计
                 el-main.left_main
@@ -31,9 +31,10 @@
             div.left_aside(style="height:auto;margin-bottom:10px;")
                 el-header.left_header 等级分布
                 div(id="myCharts" style="height:227px;background:#ffffff")
+
             div.left_aside(style="height:auto;margin-bottom:0px;")
                 el-header.left_header 报警分布
-                div(id="xx" style="height:175px;background:#ffffff")
+                div(id="alarms" style="height:175px;background:#ffffff")
         el-main(style="padding:0px;z-index:1001;height:78vh" class="alarms-untreated-main")
             el-tabs(v-model="activeName" type="border-card" @tab-click="handleClick")
                 el-tab-pane(label="报警列表" name="0")
@@ -61,7 +62,69 @@ export default {
 		})
 		this.getGroupList()
 	},
+	mounted() {
+		this.alarmsInit()
+	},
 	methods: {
+		alarmsInit() {
+			let dom = document.getElementById('alarms')
+			if (!dom) return
+			let myCharts = this.$echarts.init(dom)
+			let option = {
+				color: ['#1D82D0'],
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						// 坐标轴指示器，坐标轴触发有效
+						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+					}
+				},
+				grid: {
+					left: '3%',
+					right: '4%',
+					bottom: '3%',
+					containLabel: true
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: ['CO', 'C02', '烟雾浓度', '温度', '音视频'],
+						axisTick: {
+							alignWithLabel: true
+						},
+						axisLabel: { interval: 0 }
+					}
+				],
+				yAxis: [
+					{
+						type: 'value'
+					}
+				],
+				series: [
+					{
+						name: '直接访问',
+						type: 'bar',
+						barWidth: '60%',
+						data: [7, 4, 3, 5, 6],
+
+						itemStyle: {
+							normal: {
+								label: {
+									show: true, //开启显示
+									position: 'top', //在上方显示
+									textStyle: {
+										//数值样式
+										color: 'black',
+										fontSize: 16
+									}
+								}
+							}
+						}
+					}
+				]
+			}
+			myCharts.setOption(option)
+		},
 		groupInit() {
 			let dom = document.getElementById('myCharts')
 			if (!dom) return
@@ -93,7 +156,11 @@ export default {
 							normal: {
 								color: function(params) {
 									//自定义颜色
-                  let colorList = ['#F56C6C', '#E6A23C', '#409EFF']
+									let colorList = [
+										'#F56C6C',
+										'#E6A23C',
+										'#409EFF'
+									]
 									return colorList[params.dataIndex]
 								}
 							}
@@ -111,7 +178,9 @@ export default {
 		getGroupList() {
 			this.leftLoading = true
 			this.$http({
-        url: this.$http.adornUrlAlarm(`/alarmsInfo/queryGroupUntreated`),
+				url: this.$http.adornUrlAlarm(
+					`/alarmsInfo/queryGroupUntreated`
+				),
 				method: 'get',
 				params: this.$http.adornParams({
 					stationId: localStorage.getItem('stationId')
@@ -158,9 +227,10 @@ export default {
 }
 
 .left_main {
-  padding: 0rem 1rem 1rem 1rem;
+	// padding: 0rem 1rem 1rem 1rem;
 	overflow: hidden;
 	background: #ffffff;
+    padding: 15px !important;
 }
 
 .left_main_char {
@@ -176,7 +246,7 @@ export default {
 }
 
 .left_main_body {
-  margin-top: 1rem;
+	margin-top: 5px;
 	border: 1px #d1d1d1 solid;
 	/*height:120px;*/
 	background: #fff;