1

app/src/views/Fire/index.vue

@@ -1,45 +1,38 @@
 <template>
-  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
-    <div>
-      <border-panel
-        height="443px"
-        style="margin-bottom: 6px"
-        title="高层建筑管理"
-      >
-        <Construction />
-      </border-panel>
-      <border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
-        <ManagementContent />
-      </border-panel>
-    </div>
+	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
+		<div>
+			<border-panel height="443px" style="margin-bottom: 6px" title="高层建筑管理">
+				<Construction />
+			</border-panel>
+			<border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
+				<ManagementContent />
+			</border-panel>
+		</div>
 
-    <div>
-      <border-panel
-        height="521px"
-        style="margin-bottom: 6px"
-        title="建筑管理单位分布"
-      >
-        <Management />
-      </border-panel>
-      <border-panel
-        height="421px"
-        style="margin-bottom: 6px"
-        title="建筑管理单位信息"
-      >
-        <UnitInfo />
-      </border-panel>
-    </div>
-  </div>
+		<div>
+			<border-panel height="521px" style="margin-bottom: 6px" title="建筑管理单位分布">
+				<Management />
+			</border-panel>
+			<border-panel height="421px" style="margin-bottom: 6px" title="建筑管理单位信息">
+				<UnitInfo />
+			</border-panel>
+		</div>
+	</div>
 </template>
 <script>
-import Management from "./components/Management.vue";
-import UnitInfo from "./components/UnitInfo.vue";
-import Construction from "./components/Construction.vue";
-import ManagementContent from "./components/ManagementContent.vue";
-export default {
-  name: "Fire",
-  components: { Management, UnitInfo, Construction, ManagementContent },
-};
+	import Management from "./components/Management.vue";
+	import UnitInfo from "./components/UnitInfo.vue";
+	import Construction from "./components/Construction.vue";
+	import ManagementContent from "./components/ManagementContent.vue";
+	export default {
+		name: "Fire",
+		components: {
+			Management,
+			UnitInfo,
+			Construction,
+			ManagementContent
+		},
+	};
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less"></style>

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

@@ -0,0 +1,255 @@
+<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-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-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>
+		</div>
+		<div>
+			<div class="row header">
+				<span class="time">警情类型</span>
+				<span class="person">地址</span>
+				<span class="result">主站单位</span>
+				<span class="result1">处置状态</span>
+				<span class="result2">报警时间</span>
+			</div>
+			<VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+				<ul class="item">
+					<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>
+						<span class="result1">{{ item[3] }}</span>
+						<span class="result2">{{ item[4] }}</span>
+					</li>
+				</ul>
+			</VueSeamlessScroll>
+		</div>
+	</div>
+</template>
+<script>
+	import VueSeamlessScroll from "vue-seamless-scroll";
+
+	export default {
+		name: "MaintenanceSupervision",
+		data() {
+			return {
+				search: "",
+				options: [{
+						value: '1',
+						label: '1111'
+					},
+					{
+						value: '2',
+						label: '2222'
+					},
+					{
+						value: '3',
+						label: '3333'
+					}
+				],
+				list: [
+					["火灾扑救", "金融大厦", "渝北支队", "处置状态", "12:30:01 5/11"],
+					["火灾扑救", "金融大厦", "渝北支队", "处置状态", "12:30:01 5/11"],
+					["火灾扑救", "金融大厦", "渝北支队", "处置状态", "12:30:01 5/11"],
+					["火灾扑救", "金融大厦", "渝北支队", "处置状态", "12:30:01 5/11"],
+					["火灾扑救", "金融大厦", "渝北支队", "处置状态", "12:30:01 5/11"],
+				],
+				value: "",
+
+				checked: 0,
+			};
+		},
+		components: {
+			VueSeamlessScroll,
+		},
+		computed: {
+			classOption() {
+				return {
+					singleHeight: 43,
+				};
+			},
+		},
+		methods: {
+			change(idx) {
+				this.checked = idx;
+				console.log("切换索引", idx);
+			},
+			resultType(text) {
+				return {
+					合格: "#23f59d",
+					不合格: "#df575b",
+					是: "#23f59d",
+					否: "#df575b",
+				} [text];
+			},
+		},
+	};
+</script>
+
+<style scoped lang="less">
+	.maintenance-supervision {
+
+		// padding: 10px 10px 0px 20px;
+		::v-deep(.el-input__inner) {
+			border: none;
+			background: linear-gradient(360deg, rgba(0, 148, 255, .5) 0%, rgba(0, 148, 255, .31) 100%);
+			color: #fff;
+		}
+
+		::v-deep(.el-button) {
+			border: none;
+			background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
+			color: #fff;
+		}
+
+		.maintenance-supervision_header {
+			display: flex;
+			justify-content: space-around;
+			border-bottom: 1px solid #154956;
+			padding-bottom: 2px;
+			margin-top: 15px;
+			font-size: 12px;
+			color: rgb(79, 149, 186);
+		}
+
+		.warp {
+			margin: 0 auto;
+			overflow: hidden;
+
+			.item {
+				list-style: none;
+				padding: 0;
+				margin: 0 auto;
+				cursor: pointer;
+			}
+		}
+
+		.header {
+			color: #fff;
+			height: 33px !important;
+			line-height: 33px !important;
+			background-color: rgba(0, 163, 255, 0.3) !important;
+			color: #61dbff;
+			margin-top: 15px;
+			margin-bottom: 6px;
+		}
+
+		.row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding-left: 12px;
+			padding-right: 70px;
+			box-sizing: border-box;
+		}
+
+		li,
+		a {
+			height: 39px;
+			line-height: 39px;
+			margin-bottom: 4px;
+			display: flex;
+			font-size: 12px;
+			background-color: rgba(0, 0, 0, 0.2);
+		}
+	}
+
+
+	/deep/.el-input__inner {
+		background-color: #184254;
+		width: 150px;
+		height: 30px;
+		margin-bottom: 5px;
+	}
+
+	/deep/.el-button {
+		width: 160px;
+		height: 32px;
+		font-size: 14px;
+		line-height: 2px;
+		background: #184254;
+		margin: 0 20px 0 30px;
+		color: #fff;
+		border-radius: 5px;
+		border: none;
+	}
+
+	// /deep/.el-select-dropdown{
+
+	//     background-color:#184254 !important;
+	//     position: fixed;
+
+	//   }
+	/deep/.select_btn {
+		position: absolute;
+		top: 225px;
+		right: 320px;
+		//下拉框
+	}
+
+	// /deep/.el-select-dropdown{
+	//      border: none;
+	//      background-color: #184254 ;
+	//  }
+	//输入框
+	//  /deep/.el-input__inner{
+	//      color:#eee;
+	//      border-color: #00fff6;
+	//      background-color: rgba(1, 28, 82, 0.8);
+	//  }
+	//  //聚焦时的样式
+	//  /deep/.el-select .el-input.is-focus .el-input__inner{
+	//      border-color: #0B61AA;
+	//      background-color: rgba(1, 28, 82, 0.8);
+	//      color:#00D3E9;
+	//  }
+	//  //下拉框选中
+	//  /deep/.el-select-dropdown__item{
+	//      color: #eee;
+	//  }
+	//  //鼠标经过下拉框
+	//  /deep/.el-select-dropdown__item.hover,
+	//  /deep/.el-select-dropdown__item:hover{
+	//      color:#00D3E9;
+	//      background-color: #0F3360;
+	//  }
+</style>
+
+
+<style>
+	.el-select-dropdown.el-popper {
+		background-color: #4167a0;
+	}
+
+	.el-popper[x-placement^=bottom] .popper__arrow::after {
+		border-bottom-color: #4167a0 !important;
+	}
+
+	.el-select-dropdown.el-popper {
+		border: 1px solid rgba(0, 213, 255, 0.6) !important;
+	}
+
+	.el-select-dropdown.el-popper li.el-select-dropdown__item span {
+		color: #fff;
+	}
+
+	.el-select-dropdown.el-popper li.el-select-dropdown__item.selected span {
+		color: #2f7df2;
+	}
+
+	.el-select-dropdown.el-popper .el-select-dropdown__item.hover {
+		background-color: #2f7df2;
+	}
+
+	.el-select-dropdown.el-popper li.el-select-dropdown__item.hover.selected span {
+		color: #fff !important;
+	}
+</style>

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

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div class="unit-echats">
+      <div class="unit-g">
+        管理形式
+        <unit3D />
+      </div>
+    </div>
+    <div class="unit maintenance">
+      <span class="unit-c">管理主体</span>
+      <div class="unit-num">
+        <div>
+          <LinearText
+            style="display: inline-block"
+            text="1223"
+            fontSize="32px"
+          ></LinearText>
+          <span>家</span>
+        </div>
+        <div>一般单位</div>
+      </div>
+      <div class="unit-num">
+        <div>
+          <LinearText
+            style="display: inline-block"
+            text="1223"
+            fontSize="32px"
+          ></LinearText>
+          <span>家</span>
+        </div>
+        <div>一般单位</div>
+      </div>
+    </div>
+    <div class="unit">
+      <span class="unit-w">维保形式</span>
+      <div class="unit-num">
+        <div>
+          <LinearText
+            style="display: inline-block"
+            text="123"
+            fontSize="32px"
+          ></LinearText>
+          <span>家</span>
+        </div>
+        <div>专业维保</div>
+      </div>
+      <div class="unit-num">
+        <div>
+          <LinearText
+            style="display: inline-block"
+            text="323"
+            fontSize="32px"
+          ></LinearText>
+          <span>家</span>
+        </div>
+        <div>自主维护</div>
+      </div>
+      <div class="unit-num">
+        <div>
+          <LinearText
+            style="display: inline-block"
+            text="323"
+            fontSize="32px"
+          ></LinearText>
+          <span>家</span>
+        </div>
+        <div>无维保</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import unit3D from "@/components/unit3D.vue";
+export default {
+  components: { unit3D },
+};
+</script>
+
+<style lang="less" scoped>
+.unit {
+  display: flex;
+  margin: 5px 0 10px 10px;
+  font-size: 18px;
+  .unit-c {
+    display: inline-block;
+    margin: 25px 18px 0 0;
+  }
+  .unit-num {
+    width: 146px;
+    height: 72px;
+    margin: 10px 10px;
+    letter-spacing: 1px;
+    padding: 5px 0 0 0;
+    background-color: rgba(0, 163, 255, 0.3);
+    color: #fff;
+    text-align: center;
+    font-size: 16px;
+    line-height: 30px;
+    padding-top: 10px;
+    // 渐变
+    .num {
+      font-size: 32px;
+      font-weight: 600;
+      color: rgb(105, 193, 208);
+    }
+  }
+}
+.unit-echats {
+  height: 150px;
+}
+.unit-w {
+  width: 136px;
+}
+.unit-g {
+  font-size: 18px;
+  margin-left: 10px;
+  padding-top: 10px;
+}
+.maintenance {
+  margin-top: 30px;
+}
+</style>

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

@@ -0,0 +1,243 @@
+<template>
+  <div class="maintenance-supervision">
+    <div class="maintenance-supervision_header">
+      <button-group @change="change">
+        <button-group-item style="width: 152px; padding: 7px 1px">
+          管理单位管理建筑排名
+        </button-group-item>
+        <button-group-item style="width: 152px; padding: 7px 1px">
+          维保单位管理建筑排名
+        </button-group-item>
+        <button-group-item style="width: 147px; padding: 7px 1px">
+          建筑入住单位数排名
+        </button-group-item>
+      </button-group>
+    </div>
+    <div v-if="checked === 0">
+      <div class="row header">
+        <span class="num">序号</span>
+        <span class="time">管理单位名称</span>
+        <span class="result">管理建筑数</span>
+      </div>
+      <VueSeamlessScroll :data="list1" :class-option="classOption" class="warp">
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list1" :key="index">
+            <span class="num">{{ index + 1 }}</span>
+            <span class="time">{{ item[0] }}</span>
+            <span class="person">{{ item[1] }}</span>
+            <!-- <span class="result"
+                  :style="{
+                    color: resultType(item[2])
+                  }"
+                  >{{ item[2] }}</span
+                > -->
+          </li>
+        </ul>
+      </VueSeamlessScroll>
+    </div>
+
+    <div v-if="checked === 1">
+      <div class="row header">
+        <span class="num">序号</span>
+        <span class="time">维保单位名称</span>
+        <span class="person">维保建筑数</span>
+      </div>
+      <VueSeamlessScroll :data="list2" :class-option="classOption" class="warp">
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list1" :key="index">
+            <span class="num">{{ index + 1 }}</span>
+            <span class="time">{{ item[0] }}</span>
+            <span class="person">{{ item[1] }}</span>
+            <!-- <span class="result"
+                  :style="{
+                    color: resultType(item[2])
+                  }"
+                  >{{ item[2] }}</span
+                > -->
+          </li>
+        </ul>
+      </VueSeamlessScroll>
+    </div>
+    <div v-if="checked === 2">
+      <div class="row header">
+        <span class="num">序号</span>
+        <span class="time">登记事件</span>
+        <span class="person">排查人员</span>
+        <!-- <span class="result">是否存在隐患</span> -->
+      </div>
+      <VueSeamlessScroll :data="list3" :class-option="classOption" class="warp">
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list3" :key="index">
+            <span class="num">{{ index + 1 }}</span>
+            <span class="time">{{ item[0] }}</span>
+            <span
+              class="person"
+              :style="{
+                color: resultType(item[1]),
+              }"
+              >{{ item[1] }}</span
+            >
+          </li>
+        </ul>
+      </VueSeamlessScroll>
+    </div>
+    <!-- <div v-if="checked === 3">
+        <div class="row header">
+          <span class="time">序号</span>
+          <span class="person">建筑名称</span>
+          <span class="result">入住单位数</span>
+        </div>
+        <VueSeamlessScroll
+          :data="list3"
+          :class-option="classOption"
+          class="warp"
+        >
+        <ul class="item">
+            <li class="row" v-for="(item, index) in list1" :key="index">
+                <span class="num">{{ index+1 }}</span>
+                <span class="time">{{ item[0] }}</span>
+                <span class="person">{{ item[1] }}</span>
+                 <span class="result"
+                  :style="{
+                    color: resultType(item[2])
+                  }"
+                  >{{ item[2] }}</span
+                > -->
+    <!-- </li>
+            </ul>
+          </VueSeamlessScroll>
+      </div> -->
+  </div>
+</template>
+<script>
+import VueSeamlessScroll from "vue-seamless-scroll";
+
+export default {
+  name: "MaintenanceSupervision",
+  data() {
+    return {
+      list1: [
+        ["环球金融大厦", "40"],
+        ["天祥广场", "35"],
+        ["经济科技大厦", "23"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+      ],
+      list2: [
+        ["沙坪坝支队", "合格"],
+        ["两江支队", "不合格"],
+        ["城口大队", "合格"],
+        ["永川支队", "不合格"],
+        ["城口大队", "合格"],
+        ["永川支队", "合格"],
+        ["永川支队", "不合格"],
+        ["永川支队", "不合格"],
+      ],
+      list3: [
+        ["环球金融大厦", "40"],
+        ["天祥广场", "35"],
+        ["经济科技大厦", "23"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+        ["环球金融大厦", "40"],
+      ],
+      checked: 0,
+    };
+  },
+  components: {
+    VueSeamlessScroll,
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 43,
+      };
+    },
+  },
+  methods: {
+    change(idx) {
+      this.checked = idx;
+      console.log("切换索引", idx);
+    },
+    resultType(text) {
+      return {
+        合格: "#23f59d",
+        不合格: "#df575b",
+        是: "#23f59d",
+        否: "#df575b",
+      }[text];
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.maintenance-supervision {
+  // padding: 10px 10px 0px 20px;
+  .maintenance-supervision_header {
+    border-bottom: 1px solid #154956;
+    padding-bottom: 2px;
+    margin-top: 15px;
+    font-size: 12px;
+    color: rgb(79, 149, 186);
+  }
+  .warp {
+    height: 520px;
+    margin: 0 auto;
+    overflow: hidden;
+    .item {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+  }
+
+  .header {
+    color: #fff;
+    height: 33px !important;
+    line-height: 33px !important;
+    background-color: rgba(0, 163, 255, 0.3) !important;
+    color: #61dbff;
+    margin-top: 15px;
+    margin-bottom: 6px;
+  }
+
+  .row,
+  li,
+  a {
+    display: block;
+    height: 39px;
+    line-height: 39px;
+    margin-bottom: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+    background-color: rgba(0, 0, 0, 0.2);
+    .time,
+    .num,
+    .person,
+    .result {
+      flex: 0.33;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .num {
+      flex: 0.15;
+    }
+    .time {
+      flex: 1;
+    }
+    .result {
+      flex: 0.35;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="dle">
+    <div v-for="(item, index) in list" :key="index" class="dle-ve">
+      <rate3D :data="item.val" :text="item.text" :title="item.title"></rate3D>
+    </div>
+  </div>
+</template>
+
+<script>
+import rate3D from "../../../components/rate3D.vue";
+export default {
+  components: { rate3D },
+  data() {
+    return {
+      list: [
+        {
+          title: "交接班记录/日",
+          text: "55%",
+          val: 55,
+        },
+        {
+          title: "巡查记录/日",
+          text: "75%",
+          val: 75,
+        },
+        {
+          title: "安全培训/年",
+          text: "55%",
+          val: 55,
+        },
+        {
+          title: "消防预案",
+          text: "87%",
+          val: 87,
+        },
+        {
+          title: "演练记录/年",
+          text: "55%",
+          val: 55,
+        },
+        {
+          title: "评估报告/年",
+          text: "100%",
+          val: 100,
+        },
+        {
+          title: "维保记录/月",
+          text: "15%",
+          val: 15,
+        },
+        {
+          title: "安全制度",
+          text: "35%",
+          val: 35,
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.dle {
+  display: flex;
+  flex-wrap: wrap;
+  //   justify-content: space-between;
+  // margin: 20px 0px 20px 20px;
+  margin: 0px 40px;
+  row-gap: 5px;
+  column-gap: 35px;
+
+  .dle-ve {
+    // margin-right: 30px;
+  }
+}
+.dle::after {
+  content: "";
+  flex: auto;
+}
+</style>

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

@@ -0,0 +1,266 @@
+<template>
+	<div class="maintenance-supervision">
+		<div class="plate">
+			出动3个支队（渝中、北碚、大渡口），带队领导章三（渝中支队，185232323233，副支
+			队长）李四（九龙坡支队，1852323223，副支队长），王五（大渡口支队，1852323223，副
+			支队长）出动20位作战人员，4辆【泡沫车、3辆水罐车、2辆登高作业车。
+		</div>
+		<div>
+			<div class="row header">
+				<span class="time">车牌号</span>
+				<span class="person">车辆类型</span>
+				<span class="result">车速</span>
+				<span class="result1">状态</span>
+				<span class="result2">预计到场时间</span>
+				<span class="result3">实际到时间</span>
+			</div>
+			<VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+				<ul class="item">
+					<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>
+						<span class="result1">{{ item[3] }}</span>
+						<span class="result2">{{ item[4] }}</span>
+						<span class="result3">{{ item[5] }}</span>
+					</li>
+				</ul>
+			</VueSeamlessScroll>
+		</div>
+		<div class="btn">火场文书</div>
+		<div class="writ">
+			<div class="writTab">
+				<div class="wenshuTxt">最新文书</div>
+				<div class="wenshuImg">图标</div>
+			</div>
+			<div class="content">
+				<black 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
+						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
+						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
+						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119
+						15时05分全勤指挥部到指挥中心远程指挥。 姓名：袁荣     电话：18602303119</div>
+						<div class="contText">秀山土家族苗族自治县消防救援大队</div>
+					</div>
+				</black>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	import VueSeamlessScroll from "vue-seamless-scroll";
+
+	export default {
+		name: 'MaintenanceSupervision',
+		data() {
+			return {
+				list: [
+					["渝X12345", "水泡车", "78km/h", "12分钟", "12:30", "12:31"],
+					["渝X12345", "水泡车", "78km/h", "12分钟", "12:30", "12:31"],
+					["渝X12345", "水泡车", "78km/h", "12分钟", "12:30", "12:31"],
+					["渝X12345", "水泡车", "78km/h", "12分钟", "12:30", "12:31"],
+					["渝X12345", "水泡车", "78km/h", "12分钟", "12:30", "12:31"],
+				],
+				checked: 0,
+			}
+		},
+		components: {
+			VueSeamlessScroll
+		},
+		computed: {
+			classOption() {
+				return {
+					singleHeight: 43,
+				};
+			},
+		},
+		methods: {
+			change(idx) {
+				this.checked = idx
+				console.log("切换索引", idx)
+			},
+			resultType(text) {
+				return {
+					"合格": "#23f59d",
+					"不合格": "#df575b",
+					"是": "#23f59d",
+					"否": "#df575b"
+				} [text]
+			}
+		}
+	}
+</script>
+
+<style scoped lang='less'>
+	.writ {
+		width: 521px;
+	}
+
+	.writTab {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: rgba(14, 90, 105, 0.6);
+		padding: 10px 12px;
+		box-sizing: border-box;
+	}
+	.wenshuTxt{
+		font-family: 'PingFang SC';
+		font-style: normal;
+		font-weight: 500;
+		font-size: 12px;
+	}
+
+	.content {
+		padding: 6px 12px;
+		box-sizing: border-box;
+		background: linear-gradient(180deg, rgba(49, 121, 173, 0.5) 0%, rgba(43, 101, 142, 0.245) 100%);
+		height: 200px;
+	}
+
+	.contFlex {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin: 10px 0;
+	}
+
+	.contType {
+		font-family: 'PingFang SC';
+		font-style: normal;
+		font-weight: 500;
+		font-size: 12px;
+	}
+
+	.conTime {
+		font-family: 'PingFang SC';
+		font-style: normal;
+		font-weight: 500;
+		font-size: 12px;
+	}
+
+	.contTxt {
+		font-family: 'PingFang SC';
+		font-style: normal;
+		font-weight: 500;
+		font-size: 14px;
+		margin-top: 4px;
+	}
+	.contBox{
+		height: 100px;
+		overflow: auto;
+		line-height: 20px;
+	}
+
+	.contText {
+		text-align: right;
+		font-family: 'PingFang SC';
+		font-style: normal;
+		font-weight: 500;
+		font-size: 12px;
+		line-height: 20px;
+	}
+
+	.btn {
+		margin-bottom: 3px;
+		text-align: center;
+		line-height: 28px;
+		width: 101px;
+		height: 28px;
+		border-radius: 4px;
+		background: linear-gradient(180deg, rgba(0, 148, 255, 0.5) 0%, rgba(0, 148, 255, 0) 100%);
+	}
+
+	.plate {
+		line-height: 18px;
+		font-size: 12px;
+		height: 79px;
+		padding: 12px 15px;
+		box-sizing: border-box;
+		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;
+
+		.maintenance-supervision_header {
+			border-bottom: 1px solid #154956;
+			padding-bottom: 2px;
+		}
+
+		.warp {
+			height: 140px;
+			margin: 0 auto;
+			overflow: hidden;
+
+			.item {
+				list-style: none;
+				padding: 0;
+				margin: 0 auto;
+				cursor: pointer;
+			}
+		}
+
+		.header {
+			color: #fff;
+			height: 33px !important;
+			line-height: 33px !important;
+			background-color: rgba(0, 163, 255, 0.3) !important;
+			color: #61DBFF;
+			margin-top: 15px;
+			margin-bottom: 6px;
+		}
+
+		.row,
+		li,
+		a {
+			display: block;
+			height: 39px;
+			line-height: 39px;
+			margin-bottom: 4px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 12px;
+			background-color: rgba(0, 0, 0, 0.2);
+
+			.time,
+			.person,
+			.result {
+				flex: 0.33;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.result1 {
+				flex: 0.33;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.result2 {
+				flex: 0.33;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.result3 {
+				flex: 0.33;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,292 @@
+<template>
+	<black>
+		<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>
+			<div class="" style="display: flex;">
+				<div class="hidTxt">隐患原因:</div>
+				<div class="hidTxt">消防水箱无水</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>
+			<div class="" style="display: flex;">
+				<div class="hidTxt">隐患原因:</div>
+				<div class="hidTxt">消防水箱无水</div>
+			</div>
+		</div>
+		<div class="paet">历史火灾处置情况:</div>
+		<div class="maintenance-supervision" style="margin: 0 15px;">
+			<div>
+				<div class="row header">
+					<span class="time">起火时间</span>
+					<span class="person">人员伤亡数量</span>
+					<span class="result">财产损失</span>
+					<span class="result1">火灾原因</span>
+				</div>
+				<VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+					<ul class="item">
+						<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>
+							<span class="result1">{{ item[3] }}</span>
+						</li>
+					</ul>
+				</VueSeamlessScroll>
+			</div>
+		</div>
+	</black>
+</template>
+<script>
+	import VueSeamlessScroll from "vue-seamless-scroll";
+
+	export default {
+		name: "MaintenanceSupervision",
+		data() {
+			return {
+				list: [
+					["20:23 04-24", "25", "9万元", "吸烟"],
+					["20:23 04-24", "25", "9万元", "吸烟"],
+					["20:23 04-24", "25", "9万元", "吸烟"],
+					["20:23 04-24", "25", "9万元", "吸烟"],
+					["20:23 04-24", "25", "9万元", "吸烟"],
+				],
+				value: "",
+
+				checked: 0,
+			};
+		},
+		components: {
+			VueSeamlessScroll,
+		},
+		computed: {
+			classOption() {
+				return {
+					singleHeight: 43,
+				};
+			},
+		},
+		methods: {
+			change(idx) {
+				this.checked = idx;
+				console.log("切换索引", idx);
+			},
+			resultType(text) {
+				return {
+					合格: "#23f59d",
+					不合格: "#df575b",
+					是: "#23f59d",
+					否: "#df575b",
+				} [text];
+			},
+		},
+	};
+</script>
+
+<style scoped lang="less">
+	.wier {
+		width: 20px;
+		height: 20px;
+		border-radius: 100%;
+		background: #0085FF;
+		text-align: center;
+		line-height: 20px;
+		margin-right: 6px;
+	}
+
+	.hidTxt {
+		font-family: 'Abel';
+		font-style: normal;
+		font-weight: 400;
+		font-size: 16px;
+	}
+
+	.title {
+		width: 309px;
+		display: flex;
+		justify-content: space-between;
+		margin: 0 15px;
+		margin-top: 17px;
+	}
+
+	.paet {
+		background: rgba(0, 213, 255, 0.16);
+		padding: 6px 14px;
+		box-sizing: border-box;
+		font-family: 'Abel';
+		font-style: normal;
+		font-weight: 400;
+		font-size: 18px;
+		margin: 0 15px;
+		margin-top: 16px;
+		margin-bottom: 10px;
+	}
+
+	.paetBox {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin: 0 15px;
+		margin-bottom: 10px;
+	}
+
+	.tText {
+		font-family: 'Abel';
+		font-style: normal;
+		font-weight: 400;
+		font-size: 18px;
+	}
+
+	.tNumb {
+		font-family: 'Abel';
+		font-style: normal;
+		font-weight: 400;
+		font-size: 30px;
+	}
+
+	.maintenance-supervision {
+
+		// padding: 10px 10px 0px 20px;
+		::v-deep(.el-input__inner) {
+			border: none;
+			background: linear-gradient(360deg, rgba(0, 148, 255, .5) 0%, rgba(0, 148, 255, .31) 100%);
+			color: #fff;
+		}
+
+		::v-deep(.el-button) {
+			border: none;
+			background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
+			color: #fff;
+		}
+
+		.maintenance-supervision_header {
+			display: flex;
+			justify-content: space-around;
+			border-bottom: 1px solid #154956;
+			padding-bottom: 2px;
+			margin-top: 15px;
+			font-size: 12px;
+			color: rgb(79, 149, 186);
+		}
+
+		.warp {
+			margin: 0 auto;
+			overflow: hidden;
+
+			.item {
+				list-style: none;
+				padding: 0;
+				margin: 0 auto;
+				cursor: pointer;
+			}
+		}
+
+		.header {
+			color: #fff;
+			height: 33px !important;
+			line-height: 33px !important;
+			background-color: rgba(0, 163, 255, 0.3) !important;
+			color: #61dbff;
+			margin-top: 15px;
+			margin-bottom: 6px;
+		}
+
+		.row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding-left: 12px;
+			padding-right: 70px;
+			box-sizing: border-box;
+		}
+
+		li,
+		a {
+			height: 39px;
+			line-height: 39px;
+			margin-bottom: 4px;
+			display: flex;
+			font-size: 12px;
+			background-color: rgba(0, 0, 0, 0.2);
+		}
+	}
+
+
+	/deep/.el-input__inner {
+		background-color: #184254;
+		width: 150px;
+		height: 30px;
+		margin-bottom: 5px;
+	}
+
+	/deep/.el-button {
+		width: 160px;
+		height: 32px;
+		font-size: 14px;
+		line-height: 2px;
+		background: #184254;
+		margin: 0 20px 0 30px;
+		color: #fff;
+		border-radius: 5px;
+		border: none;
+	}
+
+	// /deep/.el-select-dropdown{
+
+	//     background-color:#184254 !important;
+	//     position: fixed;
+
+	//   }
+	/deep/.select_btn {
+		position: absolute;
+		top: 225px;
+		right: 320px;
+		//下拉框
+	}
+
+	// /deep/.el-select-dropdown{
+	//      border: none;
+	//      background-color: #184254 ;
+	//  }
+	//输入框
+	//  /deep/.el-input__inner{
+	//      color:#eee;
+	//      border-color: #00fff6;
+	//      background-color: rgba(1, 28, 82, 0.8);
+	//  }
+	//  //聚焦时的样式
+	//  /deep/.el-select .el-input.is-focus .el-input__inner{
+	//      border-color: #0B61AA;
+	//      background-color: rgba(1, 28, 82, 0.8);
+	//      color:#00D3E9;
+	//  }
+	//  //下拉框选中
+	//  /deep/.el-select-dropdown__item{
+	//      color: #eee;
+	//  }
+	//  //鼠标经过下拉框
+	//  /deep/.el-select-dropdown__item.hover,
+	//  /deep/.el-select-dropdown__item:hover{
+	//      color:#00D3E9;
+	//      background-color: #0F3360;
+	//  }
+</style>

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

@@ -0,0 +1,194 @@
+<template>
+	<black>
+		<black 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>
+		</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">住宅</div>
+			</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>
+		</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>
+		<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>
+</template>
+<script>
+
+
+</script>
+
+<style scoped lang='less'>
+	.img {
+		width: 75px;
+		height: 51px;
+	}
+
+	.tab {
+		padding: 0 14px;
+		box-sizing: border-box;
+		line-height: 24px;
+		display: flex;
+		justify-content: space-between;
+		width: 226px;
+		height: 26px;
+		background: linear-gradient(180deg, rgba(0, 148, 255, 0.5) 0%, rgba(0, 148, 255, 0.155) 100%);
+		border-radius: 5px;
+	}
+
+	.tabTxt.on {
+		font-family: 'Abel';
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+		color: #95CCFF
+	}
+
+	.plate {
+		margin: 0 20px;
+		background: rgba(0, 213, 255, 0.14);
+		padding: 6px 12px;
+		box-sizing: border-box;
+		font-family: 'PingFang SC';
+		font-style: normal;
+		font-weight: 500;
+		font-size: 16px;
+	}
+
+	.pCont {
+		display: flex;
+		justify-content: space-between;
+		margin: 0 20px;
+
+		.pCOntent {
+			display: flex;
+			height: 24px;
+			line-height: 24px;
+			margin-bottom: 2px;
+			font-family: 'Abel';
+			font-style: normal;
+			font-weight: 400;
+			font-size: 12px;
+		}
+	}
+	.PTxt{
+		font-family: 'Abel';
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+		color: #78C3CD;
+	}
+	.Ptext{
+		font-family: 'Abel';
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+	}
+
+	.att {
+		line-height: 24px;
+		height: 24px;
+		font-family: 'Abel';
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+		color: #78C3CD;
+		margin: 0 20px;
+	}
+
+	.attImg {
+		display: flex;
+		align-items: center;
+	}
+</style>

app/src/views/PoliceSituation/index.vue

@@ -1,13 +1,37 @@
 <template>
-    <div>
-        警情动态
-    </div>
+	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
+		<div>
+			<border-panel height="350px" width="540px" style="margin-bottom: 6px" title="报警信息">
+				<Alaem />
+			</border-panel>
+			<border-panel height="593px" width="540px" style="margin-bottom: 6px" title="出动力量">
+				<MobilizeStrength />
+			</border-panel>
+		</div>
+		<div>
+			<border-panel height="469px" width="540px" style="margin-bottom: 6px" title="事故单位信息">
+				<UnitInformation />
+			</border-panel>
+			<border-panel height="475px" width="540px" style="margin-bottom: 6px" title="风险隐患信息">
+				<UnitInfo />
+			</border-panel>
+		</div>
+	</div>
 </template>
-
-<script >
-
+<script>
+	import MobilizeStrength from "./components/MobilizeStrength.vue";
+	import Alaem from './components/Alarm.vue';
+	import UnitInformation from './components/UnitInformation.vue';
+	import UnitInfo from './components/UnitInfo.vue';
+	export default {
+		name: "Fire",
+		components: {
+			Alaem,
+			MobilizeStrength,
+			UnitInformation,
+			UnitInfo,
+		},
+	};
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style scoped lang="less"></style>