1

app/src/views/PoliceSituation/components/Alarm.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="maintenance-supervision">
 		<div class="maintenance-supervision_header">
-			<el-input v-model="search" placeholder="请输入建筑名"></el-input>
-			<el-select   v-model="value" placeholder="选择警情类型">
+			<el-input v-model="search"  placeholder="请输入建筑名"></el-input>
+			<el-select style="width: 140px;" v-model="value" placeholder="选择警情类型">
 				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
 				</el-option>
 			</el-select>
-			<el-select  v-model="value" placeholder="处置状态">
+			<el-select  style="width: 100px;" v-model="value" placeholder="处置状态">
 				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
 				</el-option>
 			</el-select>
-			<el-button style="margin-left: 5px; width: 100px;">搜索</el-button>
+			<el-button style="width: 100px; margin: 0;">搜索</el-button>
 		</div>
 		<div>
 			<div class="row header">
@@ -22,7 +22,7 @@
 			</div>
 			<VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
 				<ul class="item">
-					<li class="row" v-for="(item, index) in list" :key="index">
+					<li class="row" v-for="(item, index) in list"  :key="index">
 						<span class="time">{{ item[0] }}</span>
 						<span class="person">{{ item[1] }}</span>
 						<span class="result">{{ item[2] }}</span>
@@ -95,6 +95,9 @@
 </script>
 
 <style scoped lang="less">
+	.el-input{
+		width: 120px !important;
+	}
 	.maintenance-supervision {
 
 		// padding: 10px 10px 0px 20px;
@@ -165,7 +168,7 @@
 
 	/deep/.el-input__inner {
 		background-color: #184254;
-		width: 150px;
+		// width: 10px;
 		height: 30px;
 		margin-bottom: 5px;
 	}

app/src/views/PoliceSituation/components/MobilizeStrength.vue

@@ -31,24 +31,24 @@
 		<div class="writ">
 			<div class="writTab">
 				<div class="wenshuTxt">最新文书</div>
-				<div class="wenshuImg">图标</div>
+				<img src="../../../assets/images/img14.png" />
 			</div>
 			<div class="content">
-				<black v-for="(item,index) in 1" :key="index">
+				<div v-for="(item,index) in 1" :key="index">
 					<div style="">
 						<div class="contFlex">
 							<div class="contType">警情状态</div>
 							<div class="conTime">2023 5/13 15:21:01</a></div>
 						</div>
 						<div class="contTxt">归档</div>
-						<div class="contBox" style="margin: 6px 0;">15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
+						<div class="contBox">15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
 						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
 						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
 						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
 						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119</div>
 						<div class="contText">秀山土家族苗族自治县消防救援大队</div>
 					</div>
-				</black>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -114,7 +114,7 @@
 		font-family: 'PingFang SC';
 		font-style: normal;
 		font-weight: 500;
-		font-size: 12px;
+		font-size: 14px;
 	}
 
 	.content {
@@ -135,7 +135,7 @@
 		font-family: 'PingFang SC';
 		font-style: normal;
 		font-weight: 500;
-		font-size: 12px;
+		font-size: 14px;
 	}
 
 	.conTime {
@@ -153,6 +153,7 @@
 		margin-top: 4px;
 	}
 	.contBox{
+		margin: 6px 0;
 		height: 100px;
 		overflow: auto;
 		line-height: 20px;
@@ -168,6 +169,7 @@
 	}
 
 	.btn {
+		font-size: 14px;
 		margin-bottom: 3px;
 		text-align: center;
 		line-height: 28px;
@@ -178,6 +180,7 @@
 	}
 
 	.plate {
+		text-indent: 20px;
 		line-height: 18px;
 		font-size: 12px;
 		height: 79px;
@@ -186,8 +189,6 @@
 		background: linear-gradient(180deg, rgba(49, 121, 173, 0.5) 0%, rgba(43, 101, 142, 0.245) 100%);
 	}
 
-	.tab {}
-
 	.maintenance-supervision {
 		padding: 10px 10px 0px 10px;
 
@@ -215,7 +216,7 @@
 			line-height: 33px !important;
 			background-color: rgba(0, 163, 255, 0.3) !important;
 			color: #61DBFF;
-			margin-top: 15px;
+			margin-top: 3px;
 			margin-bottom: 6px;
 		}
 

app/src/views/PoliceSituation/components/UnitInfo.vue

@@ -1,36 +1,39 @@
 <template>
-	<black>
+	<div>
 		<div class="title">
-			<black style="display: flex;align-items: center;">
-				<div class="tText">警情等级:</div>
-				<div class="tNumb">1</div>
-			</black>
-			<black style="display: flex;align-items: center;">
-				<div class="tText">隐患数量:</div>
-				<div class="tNumb">32</div>
-			</black>
-		</div>
-		<div class="paet">隐患部位</div>
-		<div class="paetBox">
-			<div class="" style="display: flex;">
-				<div class="wier">1</div>
-				<div class="hidTxt">隐患部位:</div>
-				<div class="hidTxt">XX楼梯口</div>
+			<div style="display: flex;align-items: flex-end;height: 30px;">
+				<div class="tText">警情等级：</div>
+				<div class="tNumb on">1</div>
 			</div>
-			<div class="" style="display: flex;">
-				<div class="hidTxt">隐患原因:</div>
-				<div class="hidTxt">消防水箱无水</div>
+			<div style="display: flex;align-items: flex-end;height: 30px;">
+				<div class="tText">隐患数量：</div>
+				<div class="tNumb">32<div style="font-size: 18px;margin-bottom: 3px;">个</div>
+				</div>
 			</div>
 		</div>
-		<div class="paetBox">
-			<div class="" style="display: flex;">
-				<div class="wier">2</div>
-				<div class="hidTxt">隐患部位:</div>
-				<div class="hidTxt">XX楼梯口</div>
+		<div class="paet">隐患部位</div>
+		<div class="paetCont">
+			<div class="paetBox">
+				<div class="pael">
+					<div class="wier">1</div>
+					<div class="hidTxt">隐患部位：</div>
+					<div class="hidTxt on">XX楼梯口</div>
+				</div>
+				<div class="paer">
+					<div class="hidTxt">隐患原因：</div>
+					<div class="hidTxt on">消防水箱无水</div>
+				</div>
 			</div>
-			<div class="" style="display: flex;">
-				<div class="hidTxt">隐患原因:</div>
-				<div class="hidTxt">消防水箱无水</div>
+			<div class="paetBox">
+				<div class="paer">
+					<div class="wier">2</div>
+					<div class="hidTxt">位置：</div>
+					<div class="hidTxt on">XX楼梯口</div>
+				</div>
+				<div class="paer">
+					<div class="hidTxt">隐患原因：</div>
+					<div class="hidTxt on">消防水箱无水</div>
+				</div>
 			</div>
 		</div>
 		<div class="paet">历史火灾处置情况:</div>
@@ -54,7 +57,7 @@
 				</VueSeamlessScroll>
 			</div>
 		</div>
-	</black>
+	</div>
 </template>
 <script>
 	import VueSeamlessScroll from "vue-seamless-scroll";
@@ -119,6 +122,12 @@
 		font-weight: 400;
 		font-size: 16px;
 	}
+	// .hidTxt.on{
+	// 	width: 100px;
+	// 	overflow: hidden;
+	// 	text-overflow:ellipsis;
+	// 	white-space: nowrap;
+	// }
 
 	.title {
 		width: 309px;
@@ -138,7 +147,12 @@
 		font-size: 18px;
 		margin: 0 15px;
 		margin-top: 16px;
-		margin-bottom: 10px;
+		margin-bottom: 16px;
+	}
+
+	.paetCont {
+		height: 60px;
+		overflow: auto;
 	}
 
 	.paetBox {
@@ -149,19 +163,37 @@
 		margin-bottom: 10px;
 	}
 
+	.pael {
+		display: flex;
+		align-items: center;
+		width: 250px;
+	}
+
+	.paer {
+		display: flex;
+		align-items: center;
+		width: 210px;
+	}
+
 	.tText {
 		font-family: 'Abel';
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
+		margin-bottom: 4px;
 	}
 
 	.tNumb {
+		display: flex;
+		align-items: flex-end;
 		font-family: 'Abel';
 		font-style: normal;
 		font-weight: 400;
 		font-size: 30px;
 	}
+	.tNumb.on{
+		color: #36F6F6;
+	}
 
 	.maintenance-supervision {
 

app/src/views/PoliceSituation/components/UnitInformation.vue

@@ -1,112 +1,279 @@
 <template>
-	<black>
-		<black style="display: flex;justify-content: flex-end;margin-right: 22px;margin-top: 8px;margin-bottom: 3px;">
+	<div>
+		<div style="display: flex;justify-content: flex-end;margin-right: 22px;margin-top: 8px;margin-bottom: 3px;">
 			<div class="tab">
-				<div class="tabTxt">建筑信息</div>
-				<div class="tabTxt on">案件信息</div>
-				<div class="tabTxt on">物联网设备</div>
-			</div>
-		</black>
-		<div class="plate">地矿大厦A座</div>
-		<div class="pCont">
-			<div class="pCOntent">
-				<div class="PTxt">建筑年代:</div>
-				<div class="Ptext">2000年</div>
-			</div>
-			<div class="pCOntent">
-				<div class="PTxt">建筑类型:</div>
-				<div class="Ptext">二类高层住宅建筑</div>
-			</div>
-		</div>
-		<div class="pCont">
-			<div class="pCOntent">
-				<div class="PTxt">建筑地址:</div>
-				<div class="Ptext">这里是建筑地址</div>
-			</div>
-			<div class="pCOntent">
-				<div class="PTxt">总楼层:</div>
-				<div class="Ptext">地上22层、地下2层</div>
+				<div class="tabTxt" :class="activeTab == 1 ? 'tabTxt':'on'" @click="changeTab('1')">建筑信息</div>
+				<div class="tabTxt" :class="activeTab == 2 ? 'tabTxt':'on'" @click="changeTab('2')">案件信息</div>
+				<div class="tabTxt" :class="activeTab == 3 ? 'tabTxt':'on'" @click="changeTab('3')">物联网设备</div>
 			</div>
 		</div>
-		<div class="pCont">
-			<div class="pCOntent">
-				<div class="PTxt">建筑结构:</div>
-				<div class="Ptext">混泥土</div>
+		<div v-if="activeTab == 1">
+			<div class="plate">地矿大厦A座</div>
+			<div style="height: 235px; margin: 0 20px;">
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">建筑年代：</div>
+						<div class="Ptext">2000年</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">建筑类型：</div>
+						<div class="Ptext">二类高层住宅建筑</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">建筑地址：</div>
+						<div class="Ptext">这里是建筑地址</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">总楼层：</div>
+						<div class="Ptext">地上22层、地下2层</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">建筑结构：</div>
+						<div class="Ptext">混泥土</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">建筑用途：</div>
+						<div class="Ptext">住宅</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">占地面积：</div>
+						<div class="Ptext">2000平方米</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">建筑面积：</div>
+						<div class="Ptext">90129平方米</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">管理单位：</div>
+						<div class="Ptext">XXX公司</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">消防控制室：</div>
+						<div class="Ptext">一楼XX</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">消防安全责任人：</div>
+						<div class="Ptext">张三</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">联系方式：</div>
+						<div class="Ptext">13198887373</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">消防安全责任人：</div>
+						<div class="Ptext">张三</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">联系方式：</div>
+						<div class="Ptext">13198887373</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">消防安全责任人：</div>
+						<div class="Ptext">张三</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">联系方式：</div>
+						<div class="Ptext">13198887373</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">消防安全责任人：</div>
+						<div class="Ptext">张三</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">联系方式：</div>
+						<div class="Ptext">13198887373</div>
+					</div>
+				</div>
 			</div>
-			<div class="pCOntent">
-				<div class="PTxt">建筑用途:</div>
-				<div class="Ptext">住宅</div>
+			<div class="att">建筑附件：</div>
+			<div style="display: flex;margin: 0 20px;margin-top: 10px;">
+				<el-image style="width: 75px; height: 51px;margin-right: 29px;" :src="url" :preview-src-list="srcList">
+				</el-image>
+				<el-image style="width: 75px; height: 51px;margin-right: 29px;" :src="url1" :preview-src-list="srcList">
+				</el-image>
+				<el-image style="width: 75px; height: 51px;margin-right: 29px;" :src="url2" :preview-src-list="srcList">
+				</el-image>
+				<el-image style="width: 75px; height: 51px;margin-right: 29px;" :src="url3" :preview-src-list="srcList">
+				</el-image>
+				<el-image style="width: 75px; height: 51px;margin-right: 29px;" :src="url4" :preview-src-list="srcList">
+				</el-image>
 			</div>
 		</div>
-		<div class="pCont">
-			<div class="pCOntent">
-				<div class="PTxt">占地面积:</div>
-				<div class="Ptext">2000平方米</div>
-			</div>
-			<div class="pCOntent">
-				<div class="PTxt">建筑面积:</div>
-				<div class="Ptext">90129平方米</div>
+		<div v-if="activeTab == 2">
+			<div class="plate">地矿大厦A座</div>
+			<div style="height: 235px; margin: 0 20px;">
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">报警电话：</div>
+						<div class="Ptext">1300000000</div>
+					</div>
+					<!-- <div class="pCOntent">
+						<div class="PTxt">建筑类型：</div>
+						<div class="Ptext">二类高层住宅建筑</div>
+					</div> -->
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">案件类型：</div>
+						<div class="Ptext">火灾扑救</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">案件等级：</div>
+						<div class="Ptext">3+级</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">案发时间：</div>
+						<div class="Ptext">2022-12-12 12:00:00</a></div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">失踪人数：</div>
+						<div class="Ptext">2</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">案发地址：</div>
+						<div class="Ptext">重庆市渝北区</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">被困人数：</div>
+						<div class="Ptext">2</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">主管机构：</div>
+						<div class="Ptext">渝北区消防救援支队</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">死亡人数：</div>
+						<div class="Ptext">2</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">案件描述：</div>
+						<div class="Ptext">-</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">受伤人数：</div>
+						<div class="Ptext">2</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">建筑结构：</div>
+						<div class="Ptext">木结构</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">烟雾情况：</div>
+						<div class="Ptext">-</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">楼房层数：</div>
+						<div class="Ptext">32</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">燃烧楼层：</div>
+						<div class="Ptext">32</div>
+					</div>
+				</div>
+				<div class="pCont">
+					<div class="pCOntent on">
+						<div class="PTxt">燃烧对象：</div>
+						<div class="Ptext">易燃液体</div>
+					</div>
+					<div class="pCOntent">
+						<div class="PTxt">燃烧面积：</div>
+						<div class="Ptext">200m2</div>
+					</div>
+				</div>
 			</div>
 		</div>
-		<div class="pCont">
-			<div class="pCOntent">
-				<div class="PTxt">管理单位:</div>
-				<div class="Ptext">XXX公司</div>
-			</div>
-			<div class="pCOntent">
-				<div class="PTxt">消防控制室:</div>
-				<div class="Ptext">一楼XX</div>
-			</div>
+		<div v-if="activeTab == 3">
+			<el-tabs :tab-position="tabPosition" style="height: 200px;">
+				<el-tab-pane label="水压检测">
+					<div style="display: flex;">
+						<div style="flex-grow: 1;">位置</div>
+						<div style="flex-grow: 1;">监控值</div>
+						<div style="flex-grow: 1;">业务状态</div>
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="电气火灾监测">
+					<div style="display: flex;">
+						<div style="flex-grow: 1;">位置</div>
+						<div style="flex-grow: 1;">监控值</div>
+						<div style="flex-grow: 1;">业务状态</div>
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="火灾报警">
+					<div style="display: flex;">
+						<div style="flex-grow: 1;">位置</div>
+						<div style="flex-grow: 1;">业务状态</div>
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="生命通道监控">
+					<div style="display: flex;">
+						<div style="flex-grow: 1;">位置</div>
+						<div style="flex-grow: 1;">状态</div>
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="消防控制室人员离岗监控">
+					<div style="display: flex;">
+						<div style="flex-grow: 1;">位置</div>
+						<div style="flex-grow: 1;">状态</div>
+					</div>
+				</el-tab-pane>
+			</el-tabs>
 		</div>
-		<div class="pCont">
-			<div class="pCOntent">
-				<div class="PTxt">消防安全责任人:</div>
-				<div class="Ptext">张三</div>
-			</div>
-			<div class="pCOntent">
-				<div class="PTxt">联系方式:</div>
-				<div class="Ptext">13198887373</div>
-			</div>
-		</div>
-		<div class="pCont">
-			<div class="pCOntent">
-				<div class="PTxt">消防安全责任人:</div>
-				<div class="Ptext">张三</div>
-			</div>
-			<div class="pCOntent">
-				<div class="PTxt">联系方式:</div>
-				<div class="Ptext">13198887373</div>
-			</div>
-		</div>
-		<div class="pCont">
-			<div class="pCOntent">
-				<div class="PTxt">消防安全责任人:</div>
-				<div class="Ptext">张三</div>
-			</div>
-			<div class="pCOntent">
-				<div class="PTxt">联系方式:</div>
-				<div class="Ptext">13198887373</div>
-			</div>
-		</div>
-		<div class="pCont">
-			<div class="pCOntent">
-				<div class="PTxt">消防安全责任人:</div>
-				<div class="Ptext">张三</div>
-			</div>
-			<div class="pCOntent">
-				<div class="PTxt">联系方式:</div>
-				<div class="Ptext">13198887373</div>
-			</div>
-		</div>
-		<div class="att">建筑附件:</div>
-		<div style="display: flex;justify-content: space-between;margin: 0 20px;margin-top: 10px;">
-			<black v-for="(item,inde) in 5"><img class="img" src="../../../assets/images/image 13.png" /></black>
-		</div>
-	</black>
+	</div>
 </template>
 <script>
-
-
+	export default {
+		data() {
+			return {
+				activeTab: 1,
+				tabPosition: 'left',
+				url: 'https://img0.baidu.com/it/u=988823497,734255397&fm=253&fmt=auto&app=138&f=JPEG?w=688&h=500',
+				url1: 'https://img1.baidu.com/it/u=3726015803,2240351800&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
+				url2:'https://img2.baidu.com/it/u=2766330502,587579046&fm=253&fmt=auto&app=138&f=JPG?w=500&h=250',
+				url3:'https://img1.baidu.com/it/u=3977100742,3894425847&fm=253&fmt=auto&app=138&f=JPEG?w=726&h=425',
+				url4:'https://img2.baidu.com/it/u=30603488,670353766&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500',
+				srcList: [
+					'https://img0.baidu.com/it/u=988823497,734255397&fm=253&fmt=auto&app=138&f=JPEG?w=688&h=500',
+					'https://img1.baidu.com/it/u=3726015803,2240351800&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
+					'https://img2.baidu.com/it/u=2766330502,587579046&fm=253&fmt=auto&app=138&f=JPG?w=500&h=250',
+					'https://img1.baidu.com/it/u=3977100742,3894425847&fm=253&fmt=auto&app=138&f=JPEG?w=726&h=425',
+					'https://img2.baidu.com/it/u=30603488,670353766&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500'
+				],
+			};
+		},
+		methods: {
+			changeTab(tab) {
+				this.activeTab = tab;
+			}
+		},
+	};
 </script>
 
 <style scoped lang='less'>
@@ -137,6 +304,7 @@
 
 	.plate {
 		margin: 0 20px;
+		margin-bottom: 6px;
 		background: rgba(0, 213, 255, 0.14);
 		padding: 6px 12px;
 		box-sizing: border-box;
@@ -148,8 +316,7 @@
 
 	.pCont {
 		display: flex;
-		justify-content: space-between;
-		margin: 0 20px;
+		justify-content: start;
 
 		.pCOntent {
 			display: flex;
@@ -161,19 +328,29 @@
 			font-weight: 400;
 			font-size: 12px;
 		}
+
+		.pCOntent.on {
+			width: 60%;
+		}
 	}
-	.PTxt{
+
+	.PTxt {
 		font-family: 'Abel';
 		font-style: normal;
 		font-weight: 400;
 		font-size: 12px;
 		color: #78C3CD;
 	}
-	.Ptext{
+
+	.Ptext {
 		font-family: 'Abel';
 		font-style: normal;
 		font-weight: 400;
 		font-size: 12px;
+		width: 110px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
 	.att {
@@ -185,6 +362,7 @@
 		font-size: 12px;
 		color: #78C3CD;
 		margin: 0 20px;
+		margin-top: 5px;
 	}
 
 	.attImg {

app/src/views/PoliceSituation/index.vue

@@ -1,18 +1,18 @@
 <template>
 	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
 		<div>
-			<border-panel height="350px" width="540px" style="margin-bottom: 6px" title="报警信息">
+			<border-panel height="350px" width="540px" style="margin-bottom: 6px" :headerType="3" title="报警信息">
 				<Alaem />
 			</border-panel>
-			<border-panel height="593px" width="540px" style="margin-bottom: 6px" title="出动力量">
+			<border-panel height="593px" width="540px" style="margin-bottom: 6px" :headerType="3"  title="出动力量">
 				<MobilizeStrength />
 			</border-panel>
-		</div>
+		</div> 
 		<div>
-			<border-panel height="469px" width="540px" style="margin-bottom: 6px" title="事故单位信息">
+			<border-panel height="469px" width="540px" style="margin-bottom: 6px" :headerType="3" title="事故单位信息">
 				<UnitInformation />
 			</border-panel>
-			<border-panel height="475px" width="540px" style="margin-bottom: 6px" title="风险隐患信息">
+			<border-panel height="475px" width="540px" style="margin-bottom: 6px" :headerType="3" title="风险隐患信息">
 				<UnitInfo />
 			</border-panel>
 		</div>