UI

src/assets/styles/base.scss

@@ -56,6 +56,11 @@ $eventStateColor-xsb:#11b57e;
 $eventStateColor-yqr:#f18425;
 $eventStateColor-ywc:#9179f1;
 
+//日历状态
+$date-state1:#2abc65;
+$date-state2:#e68d3f;
+$date-state3:#d6333b;
+
 
 //公共
 body {
@@ -227,6 +232,9 @@ div::-webkit-scrollbar {
 .h-22{
 	height: 22vh;
 }
+.h-23{
+	height: 23vh;
+}
 .h-25{
 	height: 25vh;
 }
@@ -519,7 +527,7 @@ div::-webkit-scrollbar {
 			.leftbar,.rightbar {
 				position: absolute;
 				font-size: 14px;				
-				top: 10vh;
+				top: 11vh;
 				height: auto;
 				display: flex;
 				z-index: 1000;
@@ -543,7 +551,7 @@ div::-webkit-scrollbar {
 				transform: translateX(0);
 				transition: all 0.5s ease-in-out;
 			    .right-item1{
-					width: 19rem;
+					width: 18rem;
 				}
 				.right-item2{
 					width: 18rem;
@@ -551,9 +559,10 @@ div::-webkit-scrollbar {
 				
 			}
 			.rightbar-index{
-				width: 34.5rem !important;
+				width: 36rem !important;
 				display: flex;
 				flex-direction: row;
+				overflow-x:hidden;
 			}
 		}
 }

src/views/forest.vue

@@ -116,7 +116,7 @@
 									<el-col :span="9">
 										<div class="weather-img">
 											<img src="../assets/images/integrated/weather/yin.png">
-											<span>阴</span>
+											<span>阿斯顿发生的发生</span>
 										</div>
 									</el-col>
 									<el-col :span="15">
@@ -222,14 +222,16 @@
 					</div>
 				</div>
 				<div class="right-item2">
-					<!-- 事件分类 -->
+					<!-- 日历 -->
 					<div class="forthis">
 						<dv-border-box-13>
 							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
 							<div class="i-list-con small-bottom-margin h-28">
+								<dateChoose></dateChoose>
 							</div>
 						</dv-border-box-13>
 					</div>
+					<!-- 事件分类 -->
 					<div class="forthis">
 						<dv-border-box-13>
 							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
@@ -237,10 +239,12 @@
 								<span>事件分类</span>
 								<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
 							</div>
-							<div class="i-list-con small-bottom-margin h-25">
+							<div class="i-list-con small-bottom-margin h-23">
+								<dv-capsule-chart :config="eventKind" style="width: 90%;height: 21vh; padding:.5rem 1rem" />
 							</div>
 						</dv-border-box-13>
 					</div>
+					<!-- 上报排行 -->
 					<div class="forthis">
 						<dv-border-box-13>
 							<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
@@ -248,7 +252,8 @@
 								<span>上报排行</span>
 								<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
 							</div>
-							<div class="i-list-con small-bottom-margin h-25">
+							<div class="i-list-con small-bottom-margin h-23">
+								<dv-scroll-ranking-board :config="reportList" style="width: 100%;height: 20vh; padding:.5rem 1rem" />
 							</div>
 						</dv-border-box-13>
 					</div>
@@ -570,6 +575,7 @@
 </template>
 
 <script>
+	import dateChoose from '@/views/date.vue'//日历
 	/** ----------------------------------weosocket开始------------------------------------- */
 	import Cookies from 'js-cookie'
 	/** ----------------------------------weosocket结束------------------------------------- */
@@ -594,7 +600,6 @@
 		selectchannelCodeByCameraId,
 		selectFjsxt
 	} from '@/api/forest'
-
 	import supermap from '@/components/supermap' //超图
 	import supermapNotProcessed from '@/components/supermap' //超图
 	import supermapProcessed from '@/components/supermap' //超图
@@ -602,6 +607,8 @@
 	import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
 	import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
 	import TVWall from '@/components/TVWall.vue' //电视墙弹窗
+	
+	
 
 	/** ----------------------------------摄像头预览开始------------------------------------- */
 	import {
@@ -621,7 +628,8 @@
 			vheader,
 			vBottomMenu,
 			eventLocation,
-			TVWall
+			TVWall,
+			dateChoose
 		},
 		created() {
 			/** ----------------------------------摄像头预览开始------------------------------------- */
@@ -653,6 +661,67 @@
 				listCurrentIndex: '',
 				listCurrentIndex1: '',
 				showChild: false,
+				 // ----------------------------------事件分类柱状----------------------------------------
+				 eventKind:{
+					data: [
+					   {
+					     name: '森林防火',
+					     value: 167
+					   },
+					   {
+					     name: '病虫灾害',
+					     value: 123
+					   },
+					   {
+					     name: '乱砍乱伐',
+					     value: 98
+					   },
+					   {
+					     name: '动物保护',
+					     value: 75
+					   },
+					   {
+					     name: '偷盗偷猎',
+					     value: 66
+					   },
+					 ],
+					 colors: ['#1ce0a9', '#d6333b', '#e68d3f', '#32c5e9', '#2abc65'],
+					 unit: '',
+					 showValue: true, 
+				 },
+				// ----------------------------------上报排行----------------------------------------
+				reportList:{
+					 data: [
+					    {
+					      name: '周口',
+					      value: 55
+					    },
+					    {
+					      name: '南阳',
+					      value: 120
+					    },
+					    {
+					      name: '西峡',
+					      value: 78
+					    },
+					    {
+					      name: '驻马店',
+					      value: 66
+					    },
+					    {
+					      name: '新乡',
+					      value: 80
+					    },
+					    {
+					      name: '信阳',
+					      value: 45
+					    },
+					    {
+					      name: '漯河',
+					      value: 29
+					    }
+					  ]
+				},
 
 				/** ----------------------------------weosocket开始------------------------------------- */
 				weosocket: false,