diff --git a/public/img/a_danger.png b/public/img/a_danger.png
new file mode 100644
index 00000000..872e95ef
Binary files /dev/null and b/public/img/a_danger.png differ
diff --git a/public/img/a_safe.png b/public/img/a_safe.png
new file mode 100644
index 00000000..995cee61
Binary files /dev/null and b/public/img/a_safe.png differ
diff --git a/public/img/bell.png b/public/img/bell.png
new file mode 100644
index 00000000..9abf38f1
Binary files /dev/null and b/public/img/bell.png differ
diff --git a/public/img/check.png b/public/img/check.png
new file mode 100644
index 00000000..4403f0e6
Binary files /dev/null and b/public/img/check.png differ
diff --git a/public/img/clock.png b/public/img/clock.png
new file mode 100644
index 00000000..08b5a2fa
Binary files /dev/null and b/public/img/clock.png differ
diff --git a/public/img/down.png b/public/img/down.png
new file mode 100644
index 00000000..9a302f22
Binary files /dev/null and b/public/img/down.png differ
diff --git a/public/img/icon_cbs.png b/public/img/icon_cbs.png
new file mode 100644
index 00000000..20eb9978
Binary files /dev/null and b/public/img/icon_cbs.png differ
diff --git a/public/img/icon_nbcl.png b/public/img/icon_nbcl.png
new file mode 100644
index 00000000..b7c1fc14
Binary files /dev/null and b/public/img/icon_nbcl.png differ
diff --git a/public/img/icon_nbyg.png b/public/img/icon_nbyg.png
new file mode 100644
index 00000000..f7f820bb
Binary files /dev/null and b/public/img/icon_nbyg.png differ
diff --git a/public/img/icon_wbcl.png b/public/img/icon_wbcl.png
new file mode 100644
index 00000000..56f9aefd
Binary files /dev/null and b/public/img/icon_wbcl.png differ
diff --git a/public/img/icon_wlry.png b/public/img/icon_wlry.png
new file mode 100644
index 00000000..55df1c3b
Binary files /dev/null and b/public/img/icon_wlry.png differ
diff --git a/public/img/pause.png b/public/img/pause.png
new file mode 100644
index 00000000..0e5f1578
Binary files /dev/null and b/public/img/pause.png differ
diff --git a/public/img/play.png b/public/img/play.png
new file mode 100644
index 00000000..bde61a03
Binary files /dev/null and b/public/img/play.png differ
diff --git a/public/img/r_danger.png b/public/img/r_danger.png
new file mode 100644
index 00000000..aca89ddb
Binary files /dev/null and b/public/img/r_danger.png differ
diff --git a/public/img/r_safe.png b/public/img/r_safe.png
new file mode 100644
index 00000000..b5e8d824
Binary files /dev/null and b/public/img/r_safe.png differ
diff --git a/public/img/search.png b/public/img/search.png
new file mode 100644
index 00000000..3ca19b4e
Binary files /dev/null and b/public/img/search.png differ
diff --git a/public/img/shrink.png b/public/img/shrink.png
new file mode 100644
index 00000000..392c4ec2
Binary files /dev/null and b/public/img/shrink.png differ
diff --git a/public/img/uncheck.png b/public/img/uncheck.png
new file mode 100644
index 00000000..89b21551
Binary files /dev/null and b/public/img/uncheck.png differ
diff --git a/public/img/up.png b/public/img/up.png
new file mode 100644
index 00000000..e553ba66
Binary files /dev/null and b/public/img/up.png differ
diff --git a/src/main.js b/src/main.js
index 87cb0b68..0753801e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,7 @@ import router from './router'
 import store from './store'
 import { createApp } from 'vue'
 import App from './App.vue'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const app = createApp(App);
 
@@ -18,3 +19,6 @@ app.use(scui);
 
 //挂载app
 app.mount('#app');
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+	app.component(key, component)
+}
diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue
index c894d6ff..0a0a0d93 100644
--- a/src/views/bigScreen/index.vue
+++ b/src/views/bigScreen/index.vue
@@ -1,58 +1,77 @@
 <template>
 	<div class="screen-main">
+		<!--头部展示-->
 		<div class="screen-header">
 			<div class="header-left-bg">驾驶舱</div>
 			<div class="header-right-action">
-				<div class="right-action-clock"><span class="action-time">2022-06-22</span><span class="action-time">周三下午 </span><span
-					class="action-time">17:59:52</span></div>
-				<div class="right-action-full"></div>
+				<div class="right-action-clock">
+					<span class="action-time">2022-06-22</span>
+					<span class="action-time">周三下午 </span>
+					<span class="action-time">17:59:52</span>
+				</div>
 			</div>
 		</div>
+		<!--图层控制-->
 		<div class="screen-ctrl">
 			<div class="screen-filter">
 				<div class="filter-content">
-					<div class="filter-ctrl filter-ctrl-focus">
-						<div class="screen-check-content hoverPointer">
-							<span class="box-btn box-uncheck"></span>
+					<div class="filter-ctrl" v-show="filterCtrlFocus">
+						<div class="screen-check-content hoverPointer" @click="markerClick(0)">
+							<span class="box-btn box-uncheck" :class="{'box-check':markList[0]}"></span>
 							<span class="box-text">全部</span>
 						</div>
-						<div class="screen-check-content hoverPointer">
-							<span class="box-btn box-uncheck box-check"></span>
+						<div class="screen-check-content hoverPointer" @click="markerClick(1)">
+							<span class="box-btn box-uncheck" :class="{'box-check':markList[1]}"></span>
 							<span class="box-text">车间名称</span>
 						</div>
-						<div class="screen-check-content hoverPointer">
-							<span class="box-btn box-uncheck"></span>
+						<div class="screen-check-content hoverPointer" @click="markerClick(2)">
+							<span class="box-btn box-uncheck" :class="{'box-check':markList[2]}"></span>
 							<span class="box-text">摄像头</span>
 						</div>
-						<div class="screen-check-content hoverPointer">
-							<span class="box-btn box-uncheck"></span>
+						<div class="screen-check-content hoverPointer" @click="markerClick(3)">
+							<span class="box-btn box-uncheck" :class="{'box-check':markList[3]}"></span>
 							<span class="box-text">消防物资</span>
 						</div>
-						<div class="screen-check-content hoverPointer">
-							<span class="box-btn box-uncheck"></span>
+						<div class="screen-check-content hoverPointer" @click="markerClick(4)">
+							<span class="box-btn box-uncheck" :class="{'box-check':markList[4]}"></span>
 							<span class="box-text">危险作业</span>
 						</div>
-						<div class="screen-check-content hoverPointer">
-							<span class="box-btn box-uncheck"></span>
+						<div class="screen-check-content hoverPointer" @click="markerClick(5)">
+							<span class="box-btn box-uncheck" :class="{'box-check':markList[5]}"></span>
 							<span class="box-text">风险区域</span>
 						</div>
-						<div class="screen-check-content hoverPointer">
-							<span class="box-btn box-uncheck box-check"></span>
+						<div class="screen-check-content hoverPointer" @click="markerClick(6)">
+							<span class="box-btn box-uncheck" :class="{'box-check':markList[6]}"></span>
 							<span class="box-text">车辆</span>
 						</div>
-						<div class="screen-check-content hoverPointer">
-							<span class="box-btn box-uncheck box-check"></span>
+						<div class="screen-check-content hoverPointer" @click="markerClick(7)">
+							<span class="box-btn box-uncheck" :class="{'box-check':markList[7]}"></span>
 							<span class="box-text">人员</span>
 						</div>
 						<div class="caret-dropdown">
-							<span class="el-icon-arrow-down"></span>
-						</div><!----></div>
-					<!--<div class="filter-action showroam">
-						<div class="action-shrink"></div>
-						<div class="action-roam roam-play"></div>
-					</div>-->
+							<el-icon @click="userSelect" v-if="showUserSelect" :size="14">
+								<ArrowUpBold/>
+							</el-icon>
+							<el-icon @click="userSelect" v-else :size="14">
+								<ArrowDownBold/>
+							</el-icon>
+						</div>
+					</div>
+					<div class="drop-content" v-if="showUserSelect">
+						<div @click="changeDropIndex('1')" class="drop-content-item" :class="{'active':dropIndex==='1'}">全部</div>
+						<div @click="changeDropIndex('2')" class="drop-content-item" :class="{'active':dropIndex==='2'}">内部人员</div>
+						<div @click="changeDropIndex('3')" class="drop-content-item" :class="{'active':dropIndex==='3'}">承包商</div>
+						<div @click="changeDropIndex('4')" class="drop-content-item" :class="{'active':dropIndex==='4'}">访客</div>
+					</div>
+					<div class="filter-action showroam">
+						<div v-if="filterCtrlFocus" class="action-shrink" @click="filterCtrlFocusChange"></div>
+						<div v-else class="action-shrink shrink-hidden" @click="filterCtrlFocusChange"></div>
+						<div v-if="autoRun" class="action-roam roam-pause" @click="autoRunChange"></div>
+						<div v-else class="action-roam roam-play" @click="autoRunChange"></div>
+					</div>
 				</div>
 			</div>
+			<!--搜索-->
 			<div class="screen-search">
 				<div class="search-content"><input type="text" placeholder="输入姓名/定位卡号/车牌号进行查找" class="input-focus"><span
 					class="close-btn el-icon-circle-close" style="display: none;"></span>
@@ -63,6 +82,7 @@
 				</div>
 			</div>
 		</div>
+		<!--人员统计-->
 		<div class="screen-cockpit">
 			<div class="cockpit-count">
 				<div class="divider"></div>
@@ -155,6 +175,7 @@
 
 			</div>
 		</div>
+		<!--切换-->
 		<div class="screen-tab">
 			<div class="screen-tab-content">
 				<div class="tab-menu tab-menu-item tab-menu-active"><span class="tab-menu-text">驾驶舱</span></div>
@@ -164,13 +185,22 @@
 				<div class="tab-menu tab-menu-item"><span class="tab-menu-text">疏散演练</span></div>
 			</div>
 		</div>
+		<!--地图-->
 		<div id='mapContainer'></div>
 	</div>
 </template>
 <script>
 	export default {
 		data() {
-			return {}
+			return {
+				boxMarkerLayer:null,
+				flyManager:null,
+				dropIndex:'1',
+				markList: [false, false, false, false, false, false, false, false],
+				autoRun: false,
+				showUserSelect: false,
+				filterCtrlFocus: true,
+			}
 		},
 		mounted() {
 			debugger;
@@ -180,8 +210,8 @@
 				mapType: jsmap.JSMapType.MAP_3D,
 				container: 'mapContainer',
 				mapServerURL: 'data/map',
-				enableShadows: true, //是否开启阴影 默认false
-				enableLighting: true, //是否开发光照 默认false
+				enableShadows: false, //是否开启阴影 默认false
+				enableLighting: false, //是否开发光照 默认false
 				luminanceAtZenith: 0.54, //纹理亮度
 				scatteringIntensity: 1.0, //镜面强度
 				specularIntensity: 0, //散射强度
@@ -196,8 +226,8 @@
 				},
 				imageryProvider: jsmap.JSImageryProviderType.VECTOR_OSM,
 				backgroundColor: '#3798ff',  //背景颜色
-				//defaultTiltAngle: 60, //默认倾斜角设置，动态效果请参看地图演示平台
-				//defaultRotateAngle: 140, //默认旋转角设置，动态效果请参看地图演示平台
+				defaultTiltAngle: 30, //默认倾斜角设置，动态效果请参看地图演示平台
+				defaultRotateAngle: 60, //默认旋转角设置，动态效果请参看地图演示平台
 			});
 			window.map.openMapById('0000');
 			window.map.on('loadComplete', e => {
@@ -213,10 +243,7 @@
 					show: true,  //是否显示
 					allowPicking: true,  //是否允许点击
 					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
-					nearFarScale: new jsmap.JSNearFarScale(0.0,10.0,500,0.5),  //比例缩放
-					properties: {
-						type: 0
-					},//属性设置
+					nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5),  //比例缩放
 					callback: (node) => {
 						console.log(node);
 					}//回调事件
@@ -225,18 +252,20 @@
 				//window.map.setSkyBox(jsmap.JSSkyBox.STARRY_SKY);//加载时的图
 				//window.map.weather = jsmap.JSWeather.SNOW;//天气DEFAULT、RAIN、SNOW、FOG、RAIN_SNOW
 				//window.map.mapStyle = jsmap.JSMapStyle.DEFAULT;//地图风格
-				var drawTool = new jsmap.JSDrawToolControl({
+				/*var drawTool = new jsmap.JSDrawToolControl({
 					position: jsmap.JSControlPosition.RIGHT_TOP,  //画图工具在容器中的相对位置，当前为右上
 					offset: {
 						x: 20,
 						y: 180
 					},  //偏移量
-					drawMode:jsmap.JSDrawMode.POINT,  //画图类型POINT:画点  POLYLINE:画线  POLYGON:画面
+					drawMode: jsmap.JSDrawMode.POINT,  //画图类型POINT:画点  POLYLINE:画线  POLYGON:画面
 
 					//画图结束的回调，返回所画的点的信息
 					callback: (feature) => {
 						debugger;
 						console.log('add', feature);
+						console.log(feature.properties);//type:POINT;id:"";name:"";floorNo:"";floorId:""
+						console.log(feature.geometry);//type:POINT;coordinates:[114.63028499839209,38.81195080123784,0]
 					},
 					//移除相应点的回调，返回相应点信息
 					removeCallback: (feature) => {
@@ -251,8 +280,7 @@
 						console.log('locate..', feature);
 					}
 				});
-				window.map.addControl(drawTool);
-
+				window.map.addControl(drawTool);*/
 				/*var drawTool1 = new jsmap.JSDrawToolControl({
 					position: jsmap.JSControlPosition.RIGHT_TOP,  //画图工具在容器中的相对位置，当前为右上
 					offset: {
@@ -279,55 +307,36 @@
 					}
 				});
 				window.map.addControl(drawTool1);*/
-				/*var drawTool2 = new jsmap.JSDrawToolControl({
+				var drawTool2 = new jsmap.JSDrawToolControl({
 					position: jsmap.JSControlPosition.RIGHT_TOP,  //画图工具在容器中的相对位置，当前为右上
 					offset: {
 						x: 80,
-						y: 80
+						y: 180
 					},  //偏移量
 					drawMode: jsmap.JSDrawMode.POLYGON,  //画图类型POINT:画点  POLYLINE:画线  POLYGON:画面
 
 					//画图结束的回调，返回所画的面信息
 					callback: (feature) => {
 						console.log('add', feature);
+						console.log(feature.properties);//type:POLYGON;id:"";name:"";floorNo:"";floorId:""
+						console.log(feature.geometry);//feature.geometry.coordinates:[[],[]]面数组
+						debugger;
 					},
 					//移除相应面的回调，返回相应面信息
 					removeCallback: (feature) => {
-						console.log('remove', feature);
+						// console.log('remove', feature);
 					},
 					//编辑相应面的回调，返回相应面信息
 					editCallback: (feature) => {
-						console.log('editCallback', feature);
+						// console.log('editCallback', feature);
 					},
 					//定位到相应面的回调，返回相应面信息
 					locateCallback: (feature) => {
-						console.log('locate..', feature);
+						// console.log('locate..', feature);
 					}
 				});
-				window.map.addControl(drawTool2);*/
-				var groundBoxMarker = new jsmap.JSGroundBoxMarker({
-					id: 'groundBoxMarker', //id
-					position: [
-						{x: 118.98685124786441, y: 33.366841579948435, z: 0},
-						{x: 118.98687856566384, y: 33.36681266702633, z: 0},
-						{x: 118.98688279498322, y: 33.36677528095493, z: 0},
-						{x: 118.98689021364218, y: 33.36666812932802, z: 0},
-						{x: 118.98688139754182, y: 33.366638063823146, z: 0},
-					], //坐标集合
-					floorId: 1, //楼层id
-					color: 'rgba(31,15,221,0.44)', //颜色
-					show: true,  //是否显示
-					//material: new jsmap.JSWaterMaterial(),  //材质，改属性一旦设置，color属性将失效
-					allowPicking: true,  //是否允许点击
-					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
-					properties: {
-						test: 'boxTest'
-					}, //属性设置
-					callback: (marker) => {
-						console.log(marker);
-					} //回调
-				});
-				window.map.addMarker(groundBoxMarker);
+				window.map.addControl(drawTool2);
+				this.boxMaskerLayer();
 			});
 			window.map.on('mapClickNode', event => {
 				debugger;
@@ -338,6 +347,110 @@
 			window.map.on('mapScaleLevelChanged', (last, current) => {
 				console.log(last + ',' + current);
 			});
+
+		},
+		methods: {
+			boxMaskerLayer(){
+				this.boxMarkerLayer = new jsmap.JSBoxMarkerLayer({
+					minimumLevel:3,
+					maxmumLevel:22,
+					show:false
+				});
+				window.map.addLayer(this.boxMarkerLayer);
+				this.showBoxMarkers();
+			},
+			showBoxMarkers(){
+				var boxMarker = new jsmap.JSBoxMarker({
+					id: 'box',
+					position: [
+						{x: 114.63059258861512, y: 38.81407163905287, z: 0},
+						{x: 114.63044857916901, y: 38.81396178326786, z: 0},
+						{x: 114.63060812029352, y: 38.81386267832651, z: 0},
+						{x: 114.63073035356713, y: 38.81395745716681, z: 0},
+					],
+					floorId: 1,//楼层id
+					color: 'rgba(31,15,221,0.44)',//颜色
+					height: 0,//基底高度
+					stretchHeight: 10,//拉伸高度
+					strokeColor: '#081210',//边线颜色
+					show: true, //是否显示
+					depthTest:Boolean,
+					allowPicking: false, //是否允许点击
+					displayCondition:  new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
+					callback: (marker) => {
+						console.log(marker);
+					}
+				});
+				this.boxMarkerLayer.addMarker(boxMarker);
+			},
+			userSelect() {
+				this.showUserSelect = !this.showUserSelect
+			},
+			autoRunChange() {
+				this.autoRun = !this.autoRun;
+				if(this.autoRun){
+					this.mapRun();
+				}else{
+					this.mapPause();
+				}
+			},
+			mapRun(){
+				if(this.flyManager!==null){
+					this.flyManager.restartFly();
+				}else{
+					//地图旋转展示
+					this.flyManager = new jsmap.JSFlyManager(window.map);
+					this.flyManager.flyByCircle({
+						center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
+						distance: 500,
+						duration: 100000,
+						tilt: 30
+					});
+				}
+
+			},
+			mapPause(){
+				// this.flyManager.destroy();
+				this.flyManager.pauseFly();
+			},
+			filterCtrlFocusChange() {
+				this.filterCtrlFocus = !this.filterCtrlFocus
+			},
+			markerClick(index) {
+				let arr = [];
+				this.markList[index] = !this.markList[index];
+				if (index === 0) {
+					if (this.markList[0]) {
+						arr = this.markList.map(value => {return true})
+					} else {
+						arr = this.markList.map(value => {return false})
+					}
+					this.markList = arr;
+				} else {
+					// this.markList[index] = !this.markList[index];
+					let list = this.markList.slice(1,8);
+					if(list.indexOf(true)>-1&&list.indexOf(false)<0){
+						this.markList[0]=true;
+					}else {
+						this.markList[0]=false;
+					}
+				}
+				debugger;
+				if(index === 0&&this.markList[5]||index === 5&&this.markList[5]){
+
+					this.boxMarkerLayer.show=true;
+				}else{
+					// this.layer.setMarkerVisibleByFilter(false, 'show >= true');
+					this.boxMarkerLayer.show=false;
+				}
+			},
+			changeDropIndex(index){
+				let that = this;
+				that.dropIndex = index;
+				setTimeout(function () {
+					that.showUserSelect = false;
+				},300)
+			},
 		},
 		unmounted() {
 			window.map.destroy();
@@ -346,473 +459,593 @@
 	}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 	.hoverPointer:hover {
 		cursor: pointer;
 	}
 
-	.screen-header {
-		width: 100% !important;
-		height: 84px !important;
-		position: absolute !important;
-		left: 0 !important;
-		top: 0 !important;
-		background: linear-gradient(0deg, rgba(0, 113, 155, 0) 0, #00455f) !important;
-		z-index: 2 !important;
-		transition: all .5s linear !important;
+	.screen-main {
+		.screen-header {
+			width: 100% !important;
+			height: 84px !important;
+			position: absolute !important;
+			left: 0 !important;
+			top: 0 !important;
+			background: linear-gradient(0deg, rgba(0, 113, 155, 0) 0, #00455f) !important;
+			z-index: 2 !important;
+			transition: all .5s linear !important;
+
+			.header-left-bg {
+				height: 60px;
+				position: absolute;
+				left: 18px;
+				top: 12px;
+				font-size: 40px;
+				font-weight: 700;
+				color: #fff;
+			}
+
+			.header-right-action {
+				position: absolute;
+				top: 10px;
+				right: 18px;
+				display: flex;
+				align-items: center;
+
+				.right-action-clock {
+					:before {
+						content: " ";
+						display: inline;
+						position: absolute;
+						left: -24px;
+						top: 9px;
+						width: 16px;
+						height: 16px;
+						/*background: url(/img/screen5/clock.png) no-repeat;*/
+						background-size: 100% 100%;
+					}
+
+					.action-time {
+						width: 56px;
+						height: 19px;
+						font-size: 14px;
+						font-weight: 400;
+						color: #fff;
+						position: relative;
+						margin-right: 20px;
+					}
+				}
+
+			}
+		}
+
+		.screen-cockpit {
+			width: 430px;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 1;
+			background: linear-gradient(90deg, #00455f, rgba(0, 113, 155, 0));
+			transition: all .5s linear;
+
+			.cockpit-count {
+				position: absolute;
+				top: 84px;
+				left: 0;
+				height: 20%;
+				width: 100%;
+				padding: 0 10px 0 18px;
+			}
+
+			.cockpit-alarm {
+				position: absolute;
+				top: calc(20% + 84px);
+				left: 0;
+				height: 20%;
+				width: 100%;
+				padding: 0 10px 0 18px;
+			}
+
+			.cockpit-info {
+				position: absolute;
+				top: calc(40% + 84px);
+				left: 0;
+				height: calc(60% - 84px);
+				width: 100%;
+				padding: 0 10px 0 18px;
+			}
+
+			.divider {
+				display: block;
+				height: 1px;
+				width: 100%;
+				background: hsla(0, 0%, 100%, .5);
+				z-index: 2;
+			}
+
+			.simple-title {
+				line-height: 22px;
+				font-size: 16px;
+				font-weight: 700;
+				color: #fff;
+				position: relative;
+				padding-left: 8px;
+				height: 44px;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+		}
+
+		.screen-ctrl {
+			position: absolute;
+			top: 60px;
+			right: 18px;
+			z-index: 2;
+			transition: all .5s linear;
+		}
+
+		.screen-tab {
+			position: absolute;
+			bottom: 0;
+			left: 50%;
+			z-index: 9;
+			transform: translate(-50%);
+			transition: all .5s linear;
+		}
 	}
 
-	.header-left-bg {
-		height: 60px;
-		position: absolute;
-		left: 18px;
-		top: 12px;
-		font-size: 40px;
-		font-weight: 700;
-		color: #fff;
+	.screen-cockpit {
+		.cockpit-count {
+			.count-list {
+				display: flex;
+				flex-wrap: wrap;
+				height: calc(100% - 50px);
+
+				.count-list-item {
+					width: 33.3333%;
+					height: 50%;
+					display: flex;
+
+					.item-img {
+						width: 50px;
+						height: 50px;
+						position: relative;
+						margin-right: 6px;
+						flex-shrink: 0;
+					}
+
+					item-img1 {
+						background: url(/public/img/icon_wlry.png) no-repeat;
+						background-size: 100% 100%;
+					}
+
+					.item-info {
+						.normal {
+							font-size: 12px;
+							font-weight: 400;
+							color: #fff;
+						}
+
+						.large {
+							font-size: 36px;
+							font-weight: 400;
+							color: #fff;
+						}
+					}
+				}
+			}
+		}
+
+		.cockpit-alarm {
+			.alarm-bell {
+				padding: 0 18px 0 32px;
+				position: relative;
+				color: #fff;
+			}
+
+			.alarm-bell.danger {
+				border: 1px solid #ffc679;
+				background: #dd8000;
+				box-shadow: inset 0 0 8px #fda732;
+			}
+
+			.alarm-bell.danger:hover {
+				box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
+			}
+
+			.alarm-content {
+				display: flex;
+				justify-content: space-between;
+				height: calc(100% - 50px);
+
+				.content-left {
+					width: 160px;
+					height: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+
+				.content-right {
+					width: calc(100% - 170px);
+					height: 100%;
+					display: flex;
+					flex-wrap: wrap;
+					align-items: center;
+					justify-content: center;
+
+					.alarm-item {
+						width: 50%;
+						height: 25%;
+						font-size: 14px;
+						font-weight: 700;
+						padding-left: 8px;
+						position: relative;
+						display: flex;
+						align-items: center;
+
+						.item-name {
+							margin-right: 4px;
+							flex-shrink: 0;
+						}
+
+						.item-number {
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+						}
+					}
+
+					.alarm-item-danger {
+						color: #fda732;
+					}
+
+					.alarm-item-safe {
+						color: #fff;
+					}
+				}
+			}
+		}
+
+		.cockpit-info {
+			.header-tab {
+				width: 210px;
+			}
+		}
 	}
 
-	.screen-main .screen-header .header-right-action {
-		position: absolute;
-		top: 10px;
-		right: 18px;
-		display: flex;
-		align-items: center;
+	.screen-ctrl {
+		.screen-filter {
+			position: absolute;
+			top: 0;
+			right: 0;
+
+			.filter-content {
+				display: flex;
+				align-items: center;
+				background: rgba(24, 36, 51, .5);
+				border-radius: 20px;
+
+				.filter-ctrl {
+					width: 710px;
+					height: 40px;
+					display: flex;
+					align-items: center;
+					background: transparent;
+					overflow: hidden;
+					padding: 0 20px;
+					z-index: 8;
+					transition: all .5s linear;
+
+					.screen-check-content {
+						margin-right: 16px;
+					}
+				}
+
+				.caret-dropdown {
+					color: #fff;
+				}
+
+				.drop-content {
+					position: absolute;
+					right: 50px;
+					top: 44px;
+					padding: 4px;
+					box-shadow: inset 0 0 4px #2cedff;
+					background: rgba(24, 36, 51, .8);
+					border-radius: 4px;
+					transition: .5s;
+
+					.drop-content-item {
+						color: #fff;
+						position: relative;
+						width: 110px;
+						font-size: 13px;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						height: 34px;
+						line-height: 34px;
+						box-sizing: border-box;
+						text-align: center;
+						cursor: pointer;
+					}
+
+					.drop-content-item.active {
+						color: rgba(44, 237, 255, .8);
+						background-color: rgba(24, 36, 51, .3);
+					}
+
+					.drop-content-item:hover {
+						color: rgba(44, 237, 255, .8);
+						background-color: rgba(24, 36, 51, .3);
+					}
+
+				}
+
+				.filter-action {
+					width: 56px;
+					height: 40px;
+					padding: 0 18px;
+					background: rgba(24, 36, 51, .7);
+					border-radius: 20px;
+					flex-shrink: 0;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					z-index: 2;
+
+					.action-shrink {
+						width: 20px;
+						height: 20px;
+						background: url(/public/img/shrink.png) no-repeat;
+						background-size: 100% 100%;
+						cursor: pointer;
+						transition: all .5s linear;
+						transform: rotate(180deg);
+					}
+					.action-shrink.shrink-hidden{
+						transform: rotate(0deg);
+						background: url(/public/img/shrink.png) no-repeat;
+					}
+					.roam-play {
+						background: url(/public/img/play.png) no-repeat;
+						background-size: 100% 100%;
+					}
+
+					.roam-pause {
+						background: url(/public/img/pause.png) no-repeat;
+						background-size: 100% 100%;
+					}
+
+					.action-roam {
+						width: 20px;
+						height: 20px;
+						cursor: pointer;
+					}
+				}
+
+				.filter-action.showroam {
+					width: 96px;
+				}
+			}
+		}
+
+		.screen-search {
+			position: absolute;
+			top: 54px;
+			right: 0;
+
+			.search-content {
+				padding: 5px;
+				background: rgba(24, 36, 51, .5);
+				border-radius: 20px;
+				display: flex;
+				align-items: center;
+				position: relative;
+			}
+
+			input {
+				width: 0;
+				height: 30px;
+				font-size: 13px;
+				outline: none;
+				border: none;
+				padding: 0;
+				margin: 0;
+				background: transparent;
+				color: #fff;
+				transition: all .5s linear;
+				opacity: 0;
+			}
+
+			.input-focus {
+				width: 250px;
+				opacity: 1;
+				padding: 0 20px 0 12px;
+			}
+
+			.close-btn {
+				position: absolute;
+				top: 12px;
+				right: 50px;
+				width: 8px;
+				height: 8px;
+				cursor: pointer;
+				color: #fff;
+			}
+
+			.search {
+				margin: auto;
+				width: 30px;
+				height: 30px;
+				background: #5bde0b;
+				border-radius: 50%;
+				transition: all 1s;
+				position: relative;
+			}
+
+			.search:after {
+				content: "";
+				display: inline-block;
+				position: absolute;
+				top: 8px;
+				left: 8px;
+				width: 13px;
+				height: 13px;
+				background: url(/public/img/search.png) no-repeat;
+				background-size: 100% 100%;
+				cursor: pointer;
+			}
+
+			.auto-suggestion {
+				position: absolute;
+				left: 10px;
+				top: 46px;
+				background: rgba(24, 36, 51, .8);
+
+				.suggestion-select-ul {
+					padding: 4px;
+					max-height: 350px;
+					overflow-y: auto;
+				}
+			}
+		}
 	}
 
-	.screen-main .screen-header .header-right-action .right-action-clock:before {
-		content: " ";
-		display: inline;
-		position: absolute;
-		left: -24px;
-		top: 9px;
-		width: 16px;
-		height: 16px;
-		/*background: url(/img/screen5/clock.png) no-repeat;*/
-		background-size: 100% 100%;
+	.screen-tab {
+		.screen-tab-content {
+			display: flex;
+			align-items: center;
+		}
+
+		.tab-menu-item {
+			width: 150px;
+			height: 80px;
+			text-align: center;
+			margin: 0 10px;
+			cursor: pointer;
+		}
+
+		.tab-menu-text {
+			height: 80px;
+			line-height: 80px;
+			font-size: 14px;
+			font-weight: 400;
+			color: #2cedff;
+		}
+
+		.tab-menu {
+			background: url(/public/img/menu.png) no-repeat;
+			background-size: 100% 100%;
+		}
+
+		.tab-menu-active {
+			background: url(/public/img/menu_active.png) no-repeat;
+			background-size: 100% 100%;
+
+			.tab-menu-text {
+				font-weight: 700;
+				color: #fff;
+			}
+		}
 	}
 
-	.screen-main .screen-header .header-right-action .right-action-clock .action-time {
-		width: 56px;
-		height: 19px;
-		font-size: 14px;
+	.screen-main {
+		.header-tab {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.tab-item {
+				padding: 0 4px;
+				text-align: center;
+				font-size: 15px;
+				font-weight: 400;
+				color: #fff;
+				position: relative;
+				cursor: pointer;
+			}
+
+			.tab-item-active {
+				font-weight: 700;
+			}
+
+			.tab-item-active:after {
+				content: "";
+				position: absolute;
+				left: 0;
+				bottom: -2px;
+				height: 8px;
+				width: 100%;
+				background: linear-gradient(90deg, rgba(48, 255, 221, 0), rgba(48, 255, 221, .8) 50%, rgba(48, 255, 221, 0));
+			}
+		}
+	}
+
+	.screen-main {
+		.simple-btn-bg {
+			display: inline-block;
+			height: 32px;
+			line-height: 32px;
+			border-radius: 16px;
+			color: #fff;
+			font-size: 14px;
+			padding: 0 18px;
+			border: 1px solid #32fde3;
+			background: #007767;
+			box-shadow: inset 0 0 8px #5aecf0;
+			cursor: pointer;
+		}
+
+		.simple-btn-bg:hover {
+			box-shadow: 0 0 8px #5aecf0, inset 0 0 8px #5aecf0;
+		}
+
+		.screen-check-content {
+			display: flex;
+			align-items: center;
+			height: 40px;
+
+			.box-btn {
+				width: 16px;
+				height: 16px;
+				margin-right: 6px;
+				cursor: pointer;
+			}
+
+			.box-uncheck {
+				background: url(/public/img/uncheck.png) no-repeat 100% 100%;
+			}
+
+			.box-text {
+				font-size: 14px;
+				font-weight: 400;
+				line-height: 40px;
+				color: #fff;
+				white-space: nowrap;
+			}
+
+			.box-check {
+				background: url(/public/img/check.png) no-repeat 100% 100% !important;
+			}
+		}
+
+	}
+
+	[class*=" el-icon-"], [class^=el-icon-] {
+		font-family: element-icons !important;
+		speak: none;
+		font-style: normal;
 		font-weight: 400;
-		color: #fff;
-		position: relative;
-		margin-right: 20px;
-	}
-
-	.screen-main .screen-cockpit {
-		width: 430px;
-		height: 100%;
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: 1;
-
-		background: linear-gradient(90deg, #00455f, rgba(0, 113, 155, 0));
-		transition: all .5s linear;
-	}
-
-	.screen-main .screen-cockpit .cockpit-count {
-		position: absolute;
-		top: 84px;
-		left: 0;
-		height: 20%;
-		width: 100%;
-		padding: 0 10px 0 18px;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm {
-		position: absolute;
-		top: calc(20% + 84px);
-		left: 0;
-		height: 20%;
-		width: 100%;
-		padding: 0 10px 0 18px;
-	}
-
-	.screen-main .screen-cockpit .cockpit-info {
-		position: absolute;
-		top: calc(40% + 84px);
-		left: 0;
-		height: calc(60% - 84px);
-		width: 100%;
-		padding: 0 10px 0 18px;
-	}
-
-	.screen-main .divider {
-		display: block;
-		height: 1px;
-		width: 100%;
-		background: hsla(0, 0%, 100%, .5);
-		z-index: 2;
-	}
-
-	.screen-main .simple-title {
-		line-height: 22px;
-		font-size: 16px;
-		font-weight: 700;
-		color: #fff;
-		position: relative;
-		padding-left: 8px;
-		height: 44px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.screen-main .header-tab {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.screen-main .header-tab .tab-item {
-		padding: 0 4px;
-		text-align: center;
-		font-size: 15px;
-		font-weight: 400;
-		color: #fff;
-		position: relative;
-		cursor: pointer;
-	}
-
-	.screen-main .header-tab .tab-item-active {
-		font-weight: 700;
-	}
-
-	.screen-main .header-tab .tab-item-active:after {
-		content: "";
-		position: absolute;
-		left: 0;
-		bottom: -2px;
-		height: 8px;
-		width: 100%;
-		background: linear-gradient(90deg, rgba(48, 255, 221, 0), rgba(48, 255, 221, .8) 50%, rgba(48, 255, 221, 0));
-	}
-
-	.screen-main .screen-cockpit .cockpit-info .header-tab {
-		width: 210px;
-	}
-
-	.screen-main .screen-cockpit .cockpit-count .count-list {
-		display: flex;
-		flex-wrap: wrap;
-		height: calc(100% - 50px);
-	}
-
-	.screen-main .screen-cockpit .cockpit-count .count-list .count-list-item {
-		width: 33.3333%;
-		height: 50%;
-		display: flex;
-	}
-
-	.screen-main .screen-cockpit .cockpit-count .count-list .count-list-item .item-img1 {
-		/*background: url(/img/screen5/icon_wlry.png) no-repeat;*/
-		background-size: 100% 100%;
-	}
-
-	.screen-main .screen-cockpit .cockpit-count .count-list .count-list-item .item-img {
-		width: 50px;
-		height: 50px;
-		position: relative;
-		margin-right: 6px;
-		flex-shrink: 0;
-	}
-
-	.screen-main .screen-cockpit .cockpit-count .count-list .count-list-item .item-info .normal {
-		font-size: 12px;
-		font-weight: 400;
-		color: #fff;
-	}
-
-	.screen-main .screen-cockpit .cockpit-count .count-list .count-list-item .item-info .large {
-		font-size: 36px;
-		font-weight: 400;
-		color: #fff;
-	}
-
-	.screen-main .simple-btn-bg {
+		font-variant: normal;
+		text-transform: none;
+		line-height: 1;
+		vertical-align: baseline;
 		display: inline-block;
-		height: 32px;
-		line-height: 32px;
-		border-radius: 16px;
-		color: #fff;
-		font-size: 14px;
-		padding: 0 18px;
-		border: 1px solid #32fde3;
-		background: #007767;
-		box-shadow: inset 0 0 8px #5aecf0;
-		cursor: pointer;
-	}
-
-	.screen-main .simple-btn-bg:hover {
-		box-shadow: 0 0 8px #5aecf0, inset 0 0 8px #5aecf0;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-bell {
-		padding: 0 18px 0 32px;
-		position: relative;
-		color: #fff;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-bell.danger {
-		border: 1px solid #ffc679;
-		background: #dd8000;
-		box-shadow: inset 0 0 8px #fda732;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-bell.danger:hover {
-		box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-content {
-		display: flex;
-		justify-content: space-between;
-		height: calc(100% - 50px);
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-content .content-left {
-		width: 160px;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-content .content-right {
-		width: calc(100% - 170px);
-		height: 100%;
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-content .content-right .alarm-item {
-		width: 50%;
-		height: 25%;
-		font-size: 14px;
-		font-weight: 700;
-		padding-left: 8px;
-		position: relative;
-		display: flex;
-		align-items: center;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-content .content-right .alarm-item-danger {
-		color: #fda732;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-content .content-right .alarm-item-safe {
-		color: #fff;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-content .content-right .alarm-item .item-name {
-		margin-right: 4px;
-		flex-shrink: 0;
-	}
-
-	.screen-main .screen-cockpit .cockpit-alarm .alarm-content .content-right .alarm-item .item-number {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	.screen-main .screen-ctrl {
-		position: absolute;
-		top: 60px;
-		right: 18px;
-		z-index: 2;
-		transition: all .5s linear;
-	}
-
-	.screen-main .screen-ctrl .screen-filter {
-		position: absolute;
-		top: 0;
-		right: 0;
-	}
-
-	.screen-main .screen-ctrl .screen-filter .filter-content {
-		display: flex;
-		align-items: center;
-		background: rgba(24, 36, 51, .5);
-		border-radius: 20px;
-	}
-
-	.screen-main .screen-ctrl .screen-filter .filter-content .filter-ctrl {
-		width: 0;
-		height: 40px;
-		opacity: 0;
-		display: flex;
-		align-items: center;
-		background: transparent;
-		overflow: hidden;
-		padding: 0;
-		z-index: 8;
-		transition: all .5s linear;
-	}
-
-	.screen-main .screen-ctrl .screen-filter .filter-content .filter-ctrl-focus {
-		width: 710px;
-		opacity: 1;
-		padding: 0 20px;
-	}
-
-	.screen-main .screen-check-content {
-		display: flex;
-		align-items: center;
-		height: 40px;
-	}
-
-	.screen-main .screen-ctrl .screen-filter .filter-content .filter-ctrl .screen-check-content {
-		margin-right: 16px;
-	}
-
-	.screen-main .screen-check-content .box-btn {
-		width: 16px;
-		height: 16px;
-		margin-right: 6px;
-		cursor: pointer;
-	}
-
-	.screen-main .screen-check-content .box-uncheck {
-		width: 16px;
-		height: 16px;
-		-webkit-border-radius: 3px;
-		-moz-border-radius: 3px;
-		border-radius: 3px;
-		border: 1px solid #5bde0b;
-
-		/*background: url(/img/screen5/uncheck.png) no-repeat 100% 100%;*/
-	}
-
-	.screen-main .screen-check-content .box-text {
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 40px;
-		color: #fff;
-		white-space: nowrap;
-	}
-
-	.screen-main .screen-check-content .box-check {
-		width: 16px;
-		height: 16px;
-		border: 0.01rem solid #5bde0b;
-		background: #5bde0b;
-		-webkit-border-radius: 3px;
-		-moz-border-radius: 3px;
-		border-radius: 3px;
-		/*background: url(/img/screen5/check.png) no-repeat 100% 100%!important;*/
-	}
-
-
-	.screen-main .screen-ctrl .screen-search {
-		position: absolute;
-		top: 54px;
-		right: 0;
-	}
-
-	.screen-main .screen-ctrl .screen-search .search-content {
-		padding: 5px;
-		background: rgba(24, 36, 51, .5);
-		border-radius: 20px;
-		display: flex;
-		align-items: center;
-		position: relative;
-	}
-
-	.screen-main .screen-ctrl .screen-search input {
-		width: 0;
-		height: 30px;
-		font-size: 13px;
-		outline: none;
-		border: none;
-		padding: 0;
-		margin: 0;
-		background: transparent;
-		color: #fff;
-		transition: all .5s linear;
-		opacity: 0;
-	}
-
-	.screen-main .screen-ctrl .screen-search .input-focus {
-		width: 250px;
-		opacity: 1;
-		padding: 0 20px 0 12px;
-	}
-
-	.screen-main .screen-ctrl .screen-search .close-btn {
-		position: absolute;
-		top: 12px;
-		right: 50px;
-		width: 8px;
-		height: 8px;
-		cursor: pointer;
-		color: #fff;
-	}
-
-	.screen-main .screen-ctrl .screen-search .search {
-		margin: auto;
-		width: 30px;
-		height: 30px;
-		background: #5bde0b;
-		border-radius: 50%;
-		transition: all 1s;
-		position: relative;
-	}
-
-	.screen-main .screen-ctrl .screen-search .auto-suggestion {
-		position: absolute;
-		left: 10px;
-		top: 46px;
-		background: rgba(24, 36, 51, .8);
-	}
-
-	.screen-main .screen-ctrl .screen-search .auto-suggestion .suggestion-select-ul {
-		padding: 4px;
-		max-height: 350px;
-		overflow-y: auto;
-	}
-	.screen-main .screen-tab {
-		position: absolute;
-		bottom: 0;
-		left: 50%;
-		z-index: 9;
-		transform: translate(-50%);
-		transition: all .5s linear;
-	}
-	.screen-main .screen-tab .screen-tab-content {
-		display: flex;
-		align-items: center;
-	}
-	.screen-main .screen-tab .tab-menu-item {
-		width: 150px;
-		height: 80px;
-		text-align: center;
-		margin: 0 10px;
-		cursor: pointer;
-	}
-	.screen-main .screen-tab .tab-menu-active .tab-menu-text {
-		font-weight: 700;
-		color: #fff;
-	}
-
-	.screen-main .screen-tab .tab-menu-text {
-		height: 80px;
-		line-height: 80px;
-		font-size: 14px;
-		font-weight: 400;
-		color: #2cedff;
-	}
-
-	.screen-main .screen-tab .tab-menu {
-		background: url(/public/img/menu.png) no-repeat;
-		background-size: 100% 100%;
-	}
-	.screen-main .screen-tab .tab-menu-active {
-		background: url(/public/img/menu_active.png) no-repeat;
-		background-size: 100% 100%;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
 	}
 </style>
diff --git a/src/views/sys/user_form.vue b/src/views/sys/user_form.vue
index 18b93ae4..a9cadd0d 100644
--- a/src/views/sys/user_form.vue
+++ b/src/views/sys/user_form.vue
@@ -48,7 +48,7 @@
 					</el-table-column>
 					<el-table-column prop="time" label="部门" min-width="150">
 						<template #default="scope">
-							<span v-if="scope.row.id">{{scope.row.dept_.name}}</span>
+							<span v-if="scope.row.id&&scope.row.dept_">{{scope.row.dept_.name}}</span>
 							<el-cascader
 								v-else
 								v-model="scope.row.dept"
@@ -102,23 +102,7 @@
 				},
 				userPostForm: {
 					title: "用户/岗位关系",
-					list: [
-						{
-							id:'1001',
-							name: "关系1",
-							sort: "1",
-							user: "石静",
-							post: "岗位",
-							dept: "部门",
-						},
-						{
-							name: '',
-							sort: '',
-							user: '',
-							post: "",
-							dept: "",
-						}
-					]
+					list: []
 				},
 				loading: false,
 				job_states: { true: "在职",false: "离职"},
@@ -215,7 +199,9 @@
 					if(res.err_msg){
 						this.$message.error(res.err_msg)
 					}else{
-						this.userPostForm.list=res.results;
+						this.getUserPostList();
+						this.$message.success("操作成功");
+						// this.userPostForm.list=res.results;
 					}
 				})
 			},
@@ -230,6 +216,7 @@
 						if(res.err_msg){
 							this.$message.error(res.err_msg)
 						}else{
+							this.getUserPostList();
 							this.$message.success("操作成功");
 						}
 					})
diff --git a/vue.config.js b/vue.config.js
index 952d42f6..1caaf88d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -72,5 +72,11 @@ module.exports = defineConfig({
 				}
 			}
 		}
-	}
+	},
+	pluginOptions: {
+		'style-resources-loader': {
+			preProcessor: 'sass',
+			patterns: []
+		}
+	},
 })