fix-总览-警情动态-火灾指数

app/src/views/Home/components/AlarmingSituationDynamics/AlaemList.vue

@@ -1,9 +1,19 @@
 <template>
-	<div class="maintenance-supervision">
-		<div class="maintenance-supervision_header">
-			<div class="item__top">
-        <el-select clearable style="width: 160px;" v-model="value" placeholder="选择警情类型">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+  <div class="maintenance-supervision">
+    <div class="maintenance-supervision_header">
+      <div class="item__top">
+        <el-select
+          clearable
+          style="width: 160px"
+          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-date-picker
@@ -12,329 +22,375 @@
           size="size"
           range-separator="至"
           start-placeholder="开始日期"
-          end-placeholder="结束日期">
+          end-placeholder="结束日期"
+        >
         </el-date-picker>
       </div>
       <div class="item__bottom">
-        <el-input v-model="search"  placeholder="请输入建筑名"></el-input>
-        <el-button style="width: 100px; margin: 0;" @click="searchTab">搜索</el-button>
-        <el-button style="width: 100px; margin: 0;" @click="resetData">重置</el-button>
+        <el-input v-model="search" placeholder="请输入建筑名"></el-input>
+        <el-button style="width: 100px; margin: 0" @click="searchTab"
+          >搜索</el-button
+        >
+        <el-button style="width: 100px; margin: 0" @click="resetData"
+          >重置</el-button
+        >
       </div>
-		</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>
-			<div class="" style="height: 152px;overflow: auto;">
-				<ul class="item">
-					<div v-for="(item, index) in czztList" :key="index">
-						<li class="row" @click="tab(item.id)" :class="item.id === id ? 'selected' : ''">
-							<span class="time" style="width: 110px;overflow: hidden;height: 40px;">{{item.zqlx}}</span>
-							<span class="person"
-								style="width: 110px;overflow: hidden;height: 40px;">{{item.ddmc}}</span>
-							<span class="result"
-								style="width: 110px;overflow: hidden;height: 40px;">{{item.sszhid }}</span>
-							<span class="result1"
-								style="width: 110px;overflow: hidden;height: 40px;text-align: center;">{{item.ajzt}}</span>
-							<span class="result2"
-								style="width: 110px;overflow: hidden;height: 40px;text-align: center;">{{item.lasj}}</span>
-								<span class="resImg" v-if="item.bjrsfbk && item.bjrsfbk!='无人员被困'"></span>
-						</li>
-						<div class="bjxxBack" v-if="item.id === id ">
-							<div class="bjTetx">报警电话：{{item.bjrlxdh || '-'}}</div>
-							<div class="bjTetx">人员被困情况：{{item.bjrsfbk ||'-'}}</div>
-							<div class="bjTetx">有无明火：{{item.jqJyqk || '-'}}</div>
-						</div>
-					</div>
-				</ul>
-			</div>
-		</div>
-	</div>
+    </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>
+      <div class="" style="height: 152px; overflow: auto">
+        <ul class="item">
+          <div v-for="(item, index) in czztList" :key="index">
+            <li
+              class="row"
+              @click="tab(item.id)"
+              :class="item.id === id ? 'selected' : ''"
+            >
+              <span
+                class="time"
+                style="width: 110px; overflow: hidden; height: 40px"
+                >{{ item.zqlx }}</span
+              >
+              <span
+                class="person"
+                style="width: 110px; overflow: hidden; height: 40px"
+                >{{ item.ddmc }}</span
+              >
+              <span
+                class="result"
+                style="width: 110px; overflow: hidden; height: 40px"
+                >{{ item.sszhid }}</span
+              >
+              <span
+                class="result1"
+                style="
+                  width: 110px;
+                  overflow: hidden;
+                  height: 40px;
+                  text-align: center;
+                "
+                >{{ item.ajzt }}</span
+              >
+              <span
+                class="result2"
+                style="
+                  width: 110px;
+                  overflow: hidden;
+                  height: 40px;
+                  text-align: center;
+                "
+                >{{ item.lasj }}</span
+              >
+              <span
+                class="resImg"
+                v-if="item.bjrsfbk && item.bjrsfbk != '无人员被困'"
+              ></span>
+            </li>
+            <div class="bjxxBack" v-if="item.id === id">
+              <div class="bjTetx">报警电话：{{ item.bjrlxdh || "-" }}</div>
+              <div class="bjTetx">人员被困情况：{{ item.bjrsfbk || "-" }}</div>
+              <div class="bjTetx">有无明火：{{ item.jqJyqk || "-" }}</div>
+            </div>
+          </div>
+        </ul>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-	import {
-		getJumpList
-	} from '@/api/index.js'
-  import moment from 'moment';
-	export default {
-		name: "MaintenanceSupervision",
-		data() {
-			return {
-				value: "",
-				times: "",
-				type: "",
-				search: '',
-				id: null,
-				options: [{
-						value: '火灾扑救',
-						label: '火灾扑救'
-					},
-					{
-						value: '抢险救援',
-						label: '抢险救援'
-					},
-					{
-						value: '反恐排爆',
-						label: '反恐排爆'
-					},
-					{
-						value: '公务执勤',
-						label: '公务执勤'
-					},
-					{
-						value: '社会救助',
-						label: '社会救助'
-					},
-					{
-						value: '其他出动',
-						label: '其他出动'
-					},
-					{
-						value: '拉动演练',
-						label: '拉动演练'
-					}
-				],
-				checked: 0,
-				newList: "",
-				czztList: []
-			};
-		},
-		components: {
-		},
-		computed: {
-			classOption() {
-				return {
-					singleHeight: 43,
-				};
-			},
-		},
-		props: {
-      list: Array,
-      pId: [String, Number],
-      selectTimes: Array
-    },
-    watch: {
-      list: {
-        handler(data) {
-          this.czztList = data
+import { getJumpList } from "@/api/index.js";
+import moment from "moment";
+export default {
+  name: "MaintenanceSupervision",
+  data() {
+    return {
+      value: "",
+      times: "",
+      type: "",
+      search: "",
+      id: null,
+      options: [
+        {
+          value: "火灾扑救",
+          label: "火灾扑救",
+        },
+        {
+          value: "抢险救援",
+          label: "抢险救援",
+        },
+        {
+          value: "反恐排爆",
+          label: "反恐排爆",
+        },
+        {
+          value: "公务执勤",
+          label: "公务执勤",
         },
-        deep: true
+        {
+          value: "社会救助",
+          label: "社会救助",
+        },
+        {
+          value: "其他出动",
+          label: "其他出动",
+        },
+        {
+          value: "拉动演练",
+          label: "拉动演练",
+        },
+      ],
+      checked: 0,
+      newList: "",
+      czztList: [],
+    };
+  },
+  components: {},
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 43,
+      };
+    },
+  },
+  props: {
+	flag: String,
+    list: Array,
+    pId: [String, Number],
+    selectTimes: Array,
+  },
+  watch: {
+    list: {
+      handler(data) {
+        this.czztList = data;
       },
-      selectTimes: {
-        handler(data) {
-          this.resetData()
-          if (data.length === 1) {
-            this.times = [new Date(data[0]), new Date(data[0])]
-          } else if (data.length === 2) {
-            this.times = [new Date(data[0]), new Date(data[1])]
-          }
-          this.searchTab()
-        }
-      }
+      // immediate:true,
+      deep: true,
     },
-		methods: {
-			searchTab() {
-        let tempTimes = []
-        if (this.times.length > 0 && this.times[0] === this.times[1]) {
-          tempTimes = [moment(this.times[0]).format('YYYY-MM-DD')]
-        } else if (this.times.length > 0) {
-          tempTimes = this.times.map(item => moment(item).format('YYYY-MM-DD'))
+    selectTimes: {
+      handler(data) {
+        this.resetData();
+        if (data.length === 1) {
+          this.times = [new Date(data[0]), new Date(data[0])];
+        } else if (data.length === 2) {
+          this.times = [new Date(data[0]), new Date(data[1])];
         }
-				const params = {
-					pageSize: 100,
-					pageNum: 1,
-					ddmc: this.search,
-					zqlx: this.value,
-          times: tempTimes
-				}
-				getJumpList(params).then(res => {
-					console.log(res, '报警信息');
-					this.czztList = res.data.rows
-          if (this.czztList.length > 0) {
-            this.tab(this.czztList[0].id)
-          } else {
-            this.tab(null)
-          }
-				})
-			},
-      resetData() {
-        this.times = []
-        this.value = ""
-        this.search = ""
+        this.searchTab();
       },
-			tab(id) {
-				this.id = id;
-				this.$emit('callback', id);
-			},
-		},
-		created() {
-			if (this.$route.query.type) {
-				this.type = Number(this.$route.query.type)
-			}
-
-      if (this.selectTimes.length === 1) {
-        this.times = [new Date(this.selectTimes[0]), new Date(this.selectTimes[0])]
-      } else if (this.selectTimes.length === 2) {
-        this.times = [new Date(this.selectTimes[0]), new Date(this.selectTimes[1])]
+    },
+  },
+  methods: {
+    searchTab() {
+      let tempTimes = [];
+      if (this.times.length > 0 && this.times[0] === this.times[1]) {
+        tempTimes = [moment(this.times[0]).format("YYYY-MM-DD")];
+      } else if (this.times.length > 0) {
+        tempTimes = this.times.map((item) => moment(item).format("YYYY-MM-DD"));
       }
-			this.searchTab()
-		}
-	};
+      const params = {
+        pageSize: 100,
+        pageNum: 1,
+        ddmc: this.search,
+        zqlx: this.value,
+        times: tempTimes,
+		type: this.flag
+      };
+      getJumpList(params).then((res) => {
+        this.czztList = res.data.rows;
+        if (this.czztList.length > 0) {
+          this.tab(this.czztList[0].id);
+        } else {
+          this.tab(null);
+        }
+      });
+    },
+    resetData() {
+      this.times = [];
+      this.value = "";
+      this.search = "";
+	  this.searchTab()
+    },
+    tab(id) {
+      this.id = id;
+      this.$emit("callback", id);
+    },
+  },
+  created() {
+    if (this.$route.query.type) {
+      this.type = Number(this.$route.query.type);
+    }
+
+    if (this.selectTimes.length === 1) {
+      this.times = [
+        new Date(this.selectTimes[0]),
+        new Date(this.selectTimes[0]),
+      ];
+    } else if (this.selectTimes.length === 2) {
+      this.times = [
+        new Date(this.selectTimes[0]),
+        new Date(this.selectTimes[1]),
+      ];
+    }
+    this.searchTab();
+  },
+};
 </script>
 
 <style scoped lang="less">
-	.resImg {
-		width: 30px;
-		height: 30px;
-		position: relative;
-		right: -50px;
-		background: url(../../../../assets/images/bkry.png) center no-repeat;
-		background-size: 30px;
-	}
-	::-webkit-scrollbar {
-		border-radius: 3px;
-		width: 8px;
-		height: 8px;
-		background: rgba(0, 213, 255, 0.3);
-	}
-	::-webkit-scrollbar-thumb {
-	    background: rgba(0, 213, 255, 0.3);
-	}
-	.selected {
-		width: 100%;
-		height: 40px;
-		background: rgba(0, 194, 255, 0.14) !important;
-		box-shadow: 0px 0px 2px 0px #44f1ff !important;
-	}
-
-	.el-input {
-		width: 120px !important;
-	}
-
-	.maintenance-supervision {
+.resImg {
+  width: 30px;
+  height: 30px;
+  position: relative;
+  right: -50px;
+  background: url(../../../../assets/images/bkry.png) center no-repeat;
+  background-size: 30px;
+}
+::-webkit-scrollbar {
+  border-radius: 3px;
+  width: 8px;
+  height: 8px;
+  background: rgba(0, 213, 255, 0.3);
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 213, 255, 0.3);
+}
+.selected {
+  width: 100%;
+  height: 40px;
+  background: rgba(0, 194, 255, 0.14) !important;
+  box-shadow: 0px 0px 2px 0px #44f1ff !important;
+}
 
-		// 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;
-		}
+.el-input {
+  width: 120px !important;
+}
 
+.maintenance-supervision {
+  // padding: 10px 10px 0px 20px;
+  ::v-deep(.el-input__inner) {
+    border: none;
+    background: linear-gradient(
+      360deg,
+      rgba(0, 148, 255, 0.5) 0%,
+      rgba(0, 148, 255, 0.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;
-      flex-direction: column;
-			justify-content: space-around;
-			border-bottom: 1px solid #154956;
-			padding-bottom: 2px;
-			margin-top: 15px;
-			font-size: 12px;
-			color: rgb(79, 149, 186);
-      .item__top {
-        display: flex;
-        gap: 20px;
-      }
-      .item__bottom {
-        display: flex;
-        gap: 20px;
-      }
-		}
+  ::v-deep(.el-button) {
+    border: none;
+    background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
+    color: #fff;
+  }
 
-		.warp {
-			margin: 0 auto;
-			overflow: hidden;
+  .maintenance-supervision_header {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    border-bottom: 1px solid #154956;
+    padding-bottom: 2px;
+    margin-top: 15px;
+    font-size: 12px;
+    color: rgb(79, 149, 186);
+    .item__top {
+      display: flex;
+      gap: 20px;
+    }
+    .item__bottom {
+      display: flex;
+      gap: 20px;
+    }
+  }
 
-			.item {
-				list-style: none;
-				padding: 0;
-				margin: 0 auto;
-				cursor: pointer;
-			}   
-			&:hover {
-				overflow: auto;
-			}
-		}
+  .warp {
+    margin: 0 auto;
+    overflow: hidden;
 
-		.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;
-		}
+    .item {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+    &:hover {
+      overflow: auto;
+    }
+  }
 
-		.row {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding-left: 12px;
-			padding-right: 70px;
-			box-sizing: border-box;
-		}
+  .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;
+  }
 
-		.bjxxBack {
-			padding: 8px 13px;
-			box-sizing: border-box;
-			display: flex;
-			align-items: center;
-			width: 100%;
-			height: 50px;
-			background: url(@/assets/images/bjxxImg.png) center no-repeat;
-			background-size: 100% 50px;
-			margin-top: -10px;
+  .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 12px;
+    padding-right: 70px;
+    box-sizing: border-box;
+  }
 
-			.bjTetx {
-				flex-grow: 1;
-			}
-		}
+  .bjxxBack {
+    padding: 8px 13px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 50px;
+    background: url(@/assets/images/bjxxImg.png) center no-repeat;
+    background-size: 100% 50px;
+    margin-top: -10px;
 
-		li,
-		a {
-			height: 39px;
-			line-height: 39px;
-			margin-bottom: 4px;
-			display: flex;
-			font-size: 12px;
-			background-color: rgba(0, 0, 0, 0.2);
-		}
-	}
+    .bjTetx {
+      flex-grow: 1;
+    }
+  }
 
+  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: 10px;
-		height: 30px;
-		margin-bottom: 5px;
-	}
+/deep/.el-input__inner {
+  background-color: #184254;
+  // width: 10px;
+  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-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/.select_btn {
-		position: absolute;
-		top: 225px;
-		right: 320px;
-		//下拉框
-	}
+/deep/.select_btn {
+  position: absolute;
+  top: 225px;
+  right: 320px;
+  //下拉框
+}
 </style>

app/src/views/Home/components/AlarmingSituationDynamics/ModalContent.vue

@@ -1,246 +1,299 @@
 <template>
-	<div style="padding: 0px; display: flex; justify-content: space-between;">
-		<div>
-			<border-panel height="350px" width="540px" style="margin-bottom: 6px" :headerType="3" title="警情列表">
-				<AlaemList :selectTimes="selectTimes" :list="bjxxList" v-if="bjxxList && bjxxList.length > 0" @callback="callback" :pId="pId" />
-			</border-panel>
-			<border-panel height="593px" width="540px" style="margin-bottom: 6px" :headerType="3" title="出动力量">
-				<MobilizeStrength style="width: 518px;" :list="cdxxList" 
-        :hcws1="hcws1"
-        :zlxx="zlxx" :hcws="hcws" />
-			</border-panel>
-		</div>
-		<div style="width: 1000px">
-			<Map :data="mapData" v-if="mapData" />
-		</div>
-		<div>
-			<border-panel height="469px" width="540px" style="margin-bottom: 6px" :headerType="3" title="事故单位信息">
-				<UnitInformation :ajxxList="ajxxList" :jzxxList="jzxxList" :wlwsb="wlwsb" :jzImg="jzImg" />
-			</border-panel>
-			<border-panel height="480px" width="540px" style="margin-bottom: 6px" :headerType="3" title="风险隐患信息">
-				<UnitInfo :fxxxList="fxxxList" :lshzList="lshzList" />
-			</border-panel>
-		</div>
-	</div>
+  <div style="padding: 0px; display: flex; justify-content: space-between">
+    <div>
+      <border-panel
+        height="350px"
+        width="540px"
+        style="margin-bottom: 6px"
+        :headerType="3"
+        title="警情列表"
+      >
+        <AlaemList
+          :flag="type"
+          :selectTimes="selectTimes"
+          :list="bjxxList"
+          v-if="bjxxList && bjxxList.length > 0"
+          @callback="callback"
+          :pId="pId"
+        />
+      </border-panel>
+      <border-panel
+        height="593px"
+        width="540px"
+        style="margin-bottom: 6px"
+        :headerType="3"
+        title="出动力量"
+      >
+        <MobilizeStrength
+          style="width: 518px"
+          :list="cdxxList"
+          :hcws1="hcws1"
+          :zlxx="zlxx"
+          :hcws="hcws"
+        />
+      </border-panel>
+    </div>
+    <div style="width: 1000px">
+      <Map :data="mapData" v-if="mapData" />
+    </div>
+    <div>
+      <border-panel
+        height="469px"
+        width="540px"
+        style="margin-bottom: 6px"
+        :headerType="3"
+        title="事故单位信息"
+      >
+        <UnitInformation
+          :ajxxList="ajxxList"
+          :jzxxList="jzxxList"
+          :wlwsb="wlwsb"
+          :jzImg="jzImg"
+        />
+      </border-panel>
+      <border-panel
+        height="480px"
+        width="540px"
+        style="margin-bottom: 6px"
+        :headerType="3"
+        title="风险隐患信息"
+      >
+        <UnitInfo :fxxxList="fxxxList" :lshzList="lshzList" />
+      </border-panel>
+    </div>
+  </div>
 </template>
 <script>
-	import MobilizeStrength from "@/views/PoliceSituation/components/MobilizeStrength.vue";
-	import AlaemList from "./AlaemList.vue";
-	import UnitInformation from "@/views/PoliceSituation/components/UnitInformation.vue";
-	import UnitInfo from "@/views/PoliceSituation/components/UnitInfo.vue";
-	import Map from "@/components/Map.vue";
-    import moment from "moment";
-	import {
-		geTzl,
-		getCdllxx,
-		getHcws,
-		getAjxx,
-		getJzxx,
-		getWlwsb,
-		getFxyhxx,
-		getZhd,
-	} from "@/api/jqdt.js";
-  import {
-		getJumpList
-	} from '@/api/index.js'
-	export default {
-		name: "ModalContent",
-    props: {
-      selectTimes: {
-        type: Array,
-        default: () => []
+import MobilizeStrength from "@/views/PoliceSituation/components/MobilizeStrength.vue";
+import AlaemList from "./AlaemList.vue";
+import UnitInformation from "@/views/PoliceSituation/components/UnitInformation.vue";
+import UnitInfo from "@/views/PoliceSituation/components/UnitInfo.vue";
+import Map from "@/components/Map.vue";
+import moment from "moment";
+import {
+  geTzl,
+  getCdllxx,
+  getHcws,
+  getAjxx,
+  getJzxx,
+  getWlwsb,
+  getFxyhxx,
+  getZhd,
+} from "@/api/jqdt.js";
+import { getJumpList } from "@/api/index.js";
+export default {
+  name: "ModalContent",
+  props: {
+    selectTimes: {
+      type: Array,
+      default: () => [],
+    },
+    type: String,
+  },
+  watch: {
+    type: {
+      handler(val) {
+        this.flag = val;
+        this.getList();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  components: {
+    Map,
+    AlaemList,
+    MobilizeStrength,
+    UnitInformation,
+    UnitInfo,
+  },
+  data() {
+    return {
+      jzImg: "",
+      gxsj1: null,
+      pId: null,
+      params: {
+        pageSize: 100,
+        pageNum: 1,
+        qy: null,
+        id: null,
+      },
+      ajid: "",
+      bjxxList: [], //报警信息
+      cdxxList: [], //出动信息列表
+      zlxx: [], //出动信息总览
+      hcws: [], //火场文书
+      hcws1: [],
+      ajxxList: [],
+      jzxxList: {},
+      fxxxList: {},
+      lshzList: [],
+      wlwsb: [],
+      mapData: null,
+      middleType: "map",
+      flag: "",
+    };
+  },
+  methods: {
+    changeMiddleType() {
+      if (this.middleType === "720") {
+        this.getMapData();
+        this.middleType = "map";
+      } else {
+        this.middleType = "720";
       }
     },
-		components: {
-			Map,
-			AlaemList,
-			MobilizeStrength,
-			UnitInformation,
-			UnitInfo,
-		},
-		data() {
-			return {
-				jzImg:'',
-				gxsj1: null,
-				pId: null,
-				params: {
-					pageSize: 100,
-					pageNum: 1,
-					qy: null,
-					id: null,
-				},
-				ajid: "",
-				bjxxList: [], //报警信息
-				cdxxList: [], //出动信息列表
-				zlxx: [], //出动信息总览
-				hcws: [], //火场文书
-        hcws1: [],
-				ajxxList: [],
-				jzxxList: {},
-				fxxxList: {},
-				lshzList: [],
-				wlwsb: [],
-				mapData: null,
-				middleType: "map",
-			};
-		},
-		methods: {
-			changeMiddleType() {
-				if (this.middleType === "720") {
-					this.getMapData();
-					this.middleType = "map";
-				} else {
-					this.middleType = "720";
-				}
-			},
-			getMapData() {
-				// console.log(this.params.id);
-				this.mapData = null;
-				getZhd({
-					id: this.params.id
-				}).then((res) => {
-					console.log(res);
-					if (res.data && res.data.data) {
-						this.mapData = {
-							jd: res.data.data.dqjd1,
-							wd: res.data.data.dqwd1,
-							zl: res.data.data.总览信息1,
-							jzmc: res.data.data.ddmc,
-							showzhd: true
-						};
-					}
-				});
-			},
-			getQueryString(name) {
-				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
-				var r = window.location.search.substr(1).match(reg);
-				if (r != null) {
-					return unescape(r[2]);
-				}
-				return null;
-			},
-			callback(id) {
-        if (id) {
-          this.params.id = id;
-          this.getMapData();
-          this.getOtherData();
-        } else {
-          this.ajid = ""
-          this.cdxxList = []//出动信息列表
-          this.zlxx =  "" //出动信息总览
-          this.hcws = [] //火场文书
-          this.hcws1 = []
-          this.ajxxList = []
-          this.jzxxList = {}
-          this.fxxxList = {}
-          this.lshzList = []
-          this.wlwsb = []
-          this.mapData = null
+    getMapData() {
+      // console.log(this.params.id);
+      this.mapData = null;
+      getZhd({
+        id: this.params.id,
+      }).then((res) => {
+        console.log(res);
+        if (res.data && res.data.data) {
+          this.mapData = {
+            jd: res.data.data.dqjd1,
+            wd: res.data.data.dqwd1,
+            zl: res.data.data.总览信息1,
+            jzmc: res.data.data.ddmc,
+            showzhd: true,
+          };
         }
-			},
-			openBasicModal() {
-				this.showModal("basicInfoModal");
-			},
-			getOtherData() {
-				// 出警力量
-				const cdxxId = {
-					ajid: this.params.id,
-				};
-				getCdllxx(cdxxId).then((res) => {
-					this.cdxxList = res.data.rows;
-				});
-				// 出动力量-总览
-				geTzl(this.params).then((res) => {
-					this.zlxx = res.data.rows ? res.data.rows[0].zl : "";
-				});
-				// 火场文书
-				const hcwsId = {
-					jqTywysbm: this.params.id,
-				};
-				getHcws(hcwsId).then((res) => {
-					this.hcws1 = res.data.rows[0];
-					let i = res.data.rows;
-					let i2 = i.filter((item, index) => {
-						return index;
-					});
-					this.hcws = i2.map((i) => {
-						return {
-							...i,
-							gxsj: moment(i.gxsj).format("yyyy-MM-DD"),
-						};
-					});
-					this.hcws1.gxsj = moment(this.hcws1.gxsj).format("yyyy-MM-DD");
-				});
-				// 事故单位信息-案件信息列表
-				getAjxx(this.params).then((res) => {
-					this.ajxxList = res.data.rows[0];
-				});
-				// 事故单位建筑信息
-				const jzxxid = {
-					ajid: this.params.id,
-				};
-				getJzxx(jzxxid).then((res) => {
-					this.jzxxList = res.data.rows[0];
-					this.jzImg = this.jzxxList.jzzp1
-				});
-				// 风险隐患信息
-				const fxyhId = {
-					ajid: this.params.id,
-				};
-				getFxyhxx(fxyhId).then((res) => {
-					this.fxxxList =
-						res.data.rows && res.data.rows.length > 0 ? res.data.rows[0] : null;
-					this.lshzList = res.data.rows;
-				});
-				// 物联网设备信息
-				const wlwId = {
-					ajid: this.params.id,
-				};
-				getWlwsb(wlwId).then((res) => {
-					this.wlwsb = res.data.rows;
-				});
-			},
-			getList() {
-				const params1 = {
-					pageSize: 10000,
-					pageNum: 1
-				};
-				getJumpList(params1).then((res) => {
-					let list = res.data.rows;
-					if (this.pId) {
-						list = list.filter((p) => p.id !== this.pId);
-						list.unshift(res.data.rows.find((p) => p.id === this.pId));
-					}
-					this.bjxxList = list;
-				});
-			},
-		},
-		created() {
-			const id = this.getQueryString("id");
-			this.pId = id;
-			this.getList();
-		},
-	};
+      });
+    },
+    getQueryString(name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) {
+        return unescape(r[2]);
+      }
+      return null;
+    },
+    callback(id) {
+      if (id) {
+        this.params.id = id;
+        this.getMapData();
+        this.getOtherData();
+      } else {
+        this.ajid = "";
+        this.cdxxList = []; //出动信息列表
+        this.zlxx = ""; //出动信息总览
+        this.hcws = []; //火场文书
+        this.hcws1 = [];
+        this.ajxxList = [];
+        this.jzxxList = {};
+        this.fxxxList = {};
+        this.lshzList = [];
+        this.wlwsb = [];
+        this.mapData = null;
+      }
+    },
+    openBasicModal() {
+      this.showModal("basicInfoModal");
+    },
+    getOtherData() {
+      // 出警力量
+      const cdxxId = {
+        ajid: this.params.id,
+      };
+      getCdllxx(cdxxId).then((res) => {
+        this.cdxxList = res.data.rows;
+      });
+      // 出动力量-总览
+      geTzl(this.params).then((res) => {
+        this.zlxx = res.data.rows ? res.data.rows[0].zl : "";
+      });
+      // 火场文书
+      const hcwsId = {
+        jqTywysbm: this.params.id,
+      };
+      getHcws(hcwsId).then((res) => {
+        this.hcws1 = res.data.rows[0];
+        let i = res.data.rows;
+        let i2 = i.filter((item, index) => {
+          return index;
+        });
+        this.hcws = i2.map((i) => {
+          return {
+            ...i,
+            gxsj: moment(i.gxsj).format("yyyy-MM-DD"),
+          };
+        });
+        this.hcws1.gxsj = moment(this.hcws1.gxsj).format("yyyy-MM-DD");
+      });
+      // 事故单位信息-案件信息列表
+      getAjxx(this.params).then((res) => {
+        this.ajxxList = res.data.rows[0];
+      });
+      // 事故单位建筑信息
+      const jzxxid = {
+        ajid: this.params.id,
+      };
+      getJzxx(jzxxid).then((res) => {
+        this.jzxxList = res.data.rows[0];
+        this.jzImg = this.jzxxList.jzzp1;
+      });
+      // 风险隐患信息
+      const fxyhId = {
+        ajid: this.params.id,
+      };
+      getFxyhxx(fxyhId).then((res) => {
+        this.fxxxList =
+          res.data.rows && res.data.rows.length > 0 ? res.data.rows[0] : null;
+        this.lshzList = res.data.rows;
+      });
+      // 物联网设备信息
+      const wlwId = {
+        ajid: this.params.id,
+      };
+      getWlwsb(wlwId).then((res) => {
+        this.wlwsb = res.data.rows;
+      });
+    },
+    getList() {
+      const params1 = {
+        pageSize: 10000,
+        pageNum: 1,
+        type: this.flag,
+      };
+      getJumpList(params1).then((res) => {
+        let list = res.data.rows;
+        if (this.pId) {
+          list = list.filter((p) => p.id !== this.pId);
+          list.unshift(res.data.rows.find((p) => p.id === this.pId));
+        }
+        this.bjxxList = list;
+      });
+    },
+  },
+  created() {
+    const id = this.getQueryString("id");
+    this.pId = id;
+    this.getList();
+  },
+};
 </script>
 
 <style scoped lang="less">
-	.m-btn {
-		width: 78px;
-		height: 72px;
-		position: absolute;
-		right: 20px;
-		top: 30px;
-		z-index: 99;
-		cursor: pointer;
-	}
+.m-btn {
+  width: 78px;
+  height: 72px;
+  position: absolute;
+  right: 20px;
+  top: 30px;
+  z-index: 99;
+  cursor: pointer;
+}
 
-	.m-btn.d {
-		background: url("../../assets/images/dd-change-720.png") center center no-repeat;
-		background-size: 78px 72px;
-	}
+.m-btn.d {
+  background: url("../../assets/images/dd-change-720.png") center center
+    no-repeat;
+  background-size: 78px 72px;
+}
 
-	.m-btn.map {
-		background: url("../../assets/images/dd-change-map.png") center center no-repeat;
-		background-size: 78px 72px;
-	}
+.m-btn.map {
+  background: url("../../assets/images/dd-change-map.png") center center
+    no-repeat;
+  background-size: 78px 72px;
+}
 </style>

app/src/views/Home/components/AlarmingSituationDynamics/index.vue

@@ -1,281 +1,429 @@
 <template>
-	<div class="alarming-situation-dynamics"
-		v-if="PoliceList.length > 0"
-		style="padding: 6px 19px 0px 19px; overflow: hidden">
-		<!-- 隐患处理排行榜 -->
-		<div class="row header">
-			<span class="time">发生时间</span>
-			<span class="address">所在辖区</span>
-			<span class="name">建筑名称</span>
-			<span class="type">警情类型</span>
-			<span class="org">主管机构</span>
-			<span class="state">处置状态</span>
-			<span class="level">风险等级</span>
-		</div>
-		<VueSeamlessScroll :data="PoliceList" :class-option="classOption" class="warp" hoverStop>
-			<ul class="item">
-				<li class="row" v-for="(item, index) in PoliceList" :key="index" @click="rowClickHandler(item.ajid)"> 
-					<span class="time">{{ item.fssj }}</span>
-					<span class="address">{{ item.szxq }}</span>
-					<span class="name" style="overflow: hidden; text-overflow: ellipsis">{{ item.gcjzmc }}</span>
-					<span class="type">{{ item.jqlx }}</span>
-					<span class="org">{{ item.zgjg }}</span>
-					<span class="state">{{ item.czzt }}</span>
-					<span class="level" :style="{
+  <!-- <div
+    class="alarming-situation-dynamics"
+    v-if="PoliceList.length > 0"
+    style="padding: 6px 19px 0px 19px; overflow: hidden"
+  >
+    <div class="row header">
+      <span class="time">发生时间</span>
+      <span class="address">所在辖区</span>
+      <span class="name">建筑名称</span>
+      <span class="type">警情类型</span>
+      <span class="org">主管机构</span>
+      <span class="state">处置状态</span>
+      <span class="level">风险等级</span>
+    </div>
+    <VueSeamlessScroll
+      :data="PoliceList"
+      :class-option="classOption"
+      class="warp"
+      hoverStop
+    >
+      <ul class="item">
+        <li
+          class="row"
+          v-for="(item, index) in PoliceList"
+          :key="index"
+          @click="rowClickHandler(item.ajid)"
+        >
+          <span class="time">{{ item.fssj }}</span>
+          <span class="address">{{ item.szxq }}</span>
+          <span
+            class="name"
+            style="overflow: hidden; text-overflow: ellipsis"
+            >{{ item.gcjzmc }}</span
+          >
+          <span class="type">{{ item.jqlx }}</span>
+          <span class="org">{{ item.zgjg }}</span>
+          <span class="state">{{ item.czzt }}</span>
+          <span
+            class="level"
+            :style="{
               color: levelText(item.fxdj),
-            }">{{ item.fxdj }}</span>
-				</li>
-			</ul>
-		</VueSeamlessScroll>
-	</div>
-	<div class="jqdt-panel" v-else>
-		<div class="item" v-for="(item,index) in totalData" :key="index">
-			<div><span class="value" @click="onClickHandler(index)">{{ item.con }}</span><span class="unit">起</span></div>
-			<div>{{ item.type }}</div>
-		</div>
-    <basic-modal top="0px" width="100%"  name="历史警情查询" ref="alarmingSituationDynamics">
-      <ModalContent  :selectTimes="times"></ModalContent>
-    </basic-modal>
-	</div>
+            }"
+            >{{ item.fxdj }}</span
+          >
+        </li>
+      </ul>
+    </VueSeamlessScroll>
+  </div> -->
+  <div>
+    <div class="gg-wap" @click="onClickHandler(5)">
+      <ul class="text-goubt" v-show="list.length > 0">
+        <li v-for="(item, index) in list" :key="index">
+          <span style="margin-right: 6px">{{ item.fssj }}</span>
+          <span>{{ item.zgjg }}</span>
+          <span>正在</span>
+          <span> {{ item.jqfsdd }}</span>
+          <span>进行</span>
+          <span> {{ item.jqlx }}</span>
+        </li>
+      </ul>
+      <li class="text-none" v-show="list.length === 0">当前：无警情</li>
+    </div>
+    <div class="jqdt-panel">
+      <div class="item">
+        <div>
+          <span class="value" @click="onClickHandler(5)">{{ list.length }}</span
+          ><span class="unit">起</span>
+        </div>
+        <div>当前</div>
+      </div>
+      <div class="item" v-for="(item, index) in totalData" :key="index">
+        <div>
+          <span class="value" @click="onClickHandler(index)">{{
+            item.con
+          }}</span
+          ><span class="unit">起</span>
+        </div>
+        <div>{{ item.type }}</div>
+      </div>
+      <basic-modal
+        top="0px"
+        width="100%"
+        name="历史警情查询"
+        ref="alarmingSituationDynamics"
+      >
+        <ModalContent :selectTimes="times" :type="flag"></ModalContent>
+      </basic-modal>
+    </div>
+  </div>
 </template>
 
 <script>
-	// 接警 下达 出动 到场 展开 出水 控制 熄灭 停水 清理 返回 #归队
-	import VueSeamlessScroll from "vue-seamless-scroll";
-	import { getJqdtListWithZero } from '@/api/index'
-	import ModalContent from './ModalContent.vue'
-  import moment from "moment";
-	export default {
-		props: {
-			PoliceList: {
-				type: Array,
-				default: () => []
-			},
-			qx: String
-		},
-		name: "AlarmingSituationDynamics",
-		components: {
-			VueSeamlessScroll,
-      ModalContent
-		},
-		data() {
-			return {
-				id: null,
-				totalData: [
-					{
-						type: '今日',
-						con: 0
-					},
-					{
-						type: '本周',
-						con: 0
-					},
-					{
-						type: '本月',
-						con: 0
-					}
-				],
-        times: []
-			};
-		},
-		watch: {
-			qx: {
-				handler(){
-					this.loadData()
-				},
-				immediate: true
-			}
-		},
-		computed: {
-			classOption() {
-				return {
-					singleHeight: 46,
-				};
-			},
-		},
-		methods: {
-			rowClickHandler(id) {
-				this.id = id
-				this.$router.push(`/police?id=${id}`);
-			},
-			levelText(text) {
-				return {
-					高风险: "#FF0B0B",
-					较高风险: "#ff833d",
-					一般风险: "#fbff3d",
-					低风险: "#35c2ff",
-				} [text];
-			},
-			loadData() {
-				getJqdtListWithZero({
-					qx: this.qx
-				}).then(res => {
-					this.totalData = res.data.data
-				})
-			},
-			onClickHandler(idx) {
-        const date = new Date()
-        if (idx === 0) {
-          this.times = [moment(date).format("YYYY-MM-DD")]
-        } else if(idx === 1) {
-					let weekOfDay = parseInt(moment().format('E'))
-          this.times = [
-					moment(date).startOf('day').subtract(weekOfDay - 1, 'days').format("YYYY-MM-DD"),
-          moment(date).startOf('day').subtract(weekOfDay - 7, 'days').format("YYYY-MM-DD")
-        ]
-        } else if(idx === 2) {
-          this.times = [
+// 接警 下达 出动 到场 展开 出水 控制 熄灭 停水 清理 返回 #归队
+import VueSeamlessScroll from "vue-seamless-scroll";
+import { getJqdtListWithZero } from "@/api/index";
+import ModalContent from "./ModalContent.vue";
+import moment from "moment";
+export default {
+  props: {
+    PoliceList: {
+      type: Array,
+      default: () => [],
+    },
+    qx: String,
+  },
+  name: "AlarmingSituationDynamics",
+  components: {
+    VueSeamlessScroll,
+    ModalContent,
+  },
+  data() {
+    return {
+      id: null,
+      totalData: [
+        // {
+        //   type: "当前",
+        //   con: 0,
+        // },
+        {
+          type: "今日",
+          con: 0,
+        },
+        {
+          type: "本周",
+          con: 0,
+        },
+      ],
+      times: [],
+      list: [],
+      flag: "",
+    };
+  },
+  watch: {
+    qx: {
+      handler() {
+        this.loadData();
+      },
+      immediate: true,
+    },
+    PoliceList: {
+      handler(val) {
+        this.list = val;
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 46,
+      };
+    },
+  },
+  methods: {
+    rowClickHandler(id) {
+      this.id = id;
+      this.$router.push(`/police?id=${id}`);
+    },
+    levelText(text) {
+      return {
+        高风险: "#FF0B0B",
+        较高风险: "#ff833d",
+        一般风险: "#fbff3d",
+        低风险: "#35c2ff",
+      }[text];
+    },
+    loadData() {
+      getJqdtListWithZero({
+        qx: this.qx,
+      }).then((res) => {
+        this.totalData = res.data.data.slice(0, 2);
+      });
+    },
+    onClickHandler(idx) {
+      if (idx == 5) {
+		this.times = []
+        this.flag = "text";
+      }else{
+		this.times = []
+		this.flag = null;
+	  }
+      const date = new Date();
+      if (idx === 0) {
+        this.times = [moment(date).format("YYYY-MM-DD")];
+      } else if (idx === 1) {
+        let weekOfDay = parseInt(moment().format("E"));
+        this.times = [
+          moment(date)
+            .startOf("day")
+            .subtract(weekOfDay - 1, "days")
+            .format("YYYY-MM-DD"),
+          moment(date)
+            .startOf("day")
+            .subtract(weekOfDay - 7, "days")
+            .format("YYYY-MM-DD"),
+        ];
+      } else if (idx === 2) {
+        this.times = [
           moment(date).startOf("month").format("YYYY-MM-DD"),
-          moment(date).endOf('month').format("YYYY-MM-DD")]
-        }
-        this.showModal("alarmingSituationDynamics")
-			}
-		},
-	};
+          moment(date).endOf("month").format("YYYY-MM-DD"),
+        ];
+      }
+      this.showModal("alarmingSituationDynamics");
+    },
+    // 当前跳转警情动态
+    toFrie() {
+      this.$router.push(`/police?type=1`);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-  ::v-deep(.el-dialog) {
-    margin: 0px;
-		
+::v-deep(.el-dialog) {
+  margin: 0px;
+}
+::v-deep(.el-dialog__wrapper) {
+  overflow: hidden;
+}
+.alarming-situation-dynamics li.row:hover {
+  background: rgba(0, 194, 255, 0.14) !important;
+}
+.jqdt-panel {
+  display: flex;
+  justify-content: space-around;
+  align-items: centers;
+  //   padding: 54px 0px;
+  margin-top: 20px;
+
+  .item {
+    width: 142px;
+    height: 166px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    background-color: rgba(0, 213, 255, 0.12);
+    background-image: url("../../../../assets/images/border-jqdt.png");
+    background-repeat: no-repeat;
+    background-position: center center;
+    font-size: 16px;
+    .value {
+      font-size: 30px;
+      color: #ffd749;
+      cursor: pointer;
+    }
+    .unit {
+      font-size: 12px;
+      display: inline-block;
+      margin-left: 5px;
+    }
   }
-	::v-deep(.el-dialog__wrapper) {
-			overflow:hidden;
-		}
-	.alarming-situation-dynamics li.row:hover {
-		background: rgba(0, 194, 255, 0.14) !important;
-	}
-	.jqdt-panel {
-		display: flex;
-		justify-content: space-around;
-		align-items: centers;
-		padding: 54px 0px;
-		.item {
-			width: 244px;
-			height: 166px;
-			display: flex;
-			justify-content: center;
-			flex-direction: column;
-			align-items: center;
-			background-color: rgba(0, 213, 255, 0.12);
-			background-image: url('../../../../assets/images/border-jqdt.png');
-			background-repeat: no-repeat;
-			background-position: center center;
-			font-size: 16px;
-			.value {
-				font-size: 30px;
-				color: #FFD749;
-				cursor: pointer;
-			}
-			.unit {
-				font-size: 12px;
-				display: inline-block;
-				margin-left: 5px;
-			}
-		}
-	}
+}
 </style>
 
 <style scoped lang="less">
-	.warp {
-		height: 230px;
-		margin: 0 auto;
-		overflow: hidden;
+.warp {
+  height: 230px;
+  margin: 0 auto;
+  overflow: hidden;
 
-		.item {
-			list-style: none;
-			padding: 0;
-			margin: 0 auto;
-			cursor: pointer;
-		}
-		&:hover {
-				overflow: auto;
-			}
-	}
+  .item {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    cursor: pointer;
+  }
+  &:hover {
+    overflow: auto;
+  }
+}
 
-	.header {
-		color: #fff;
-		height: 38px !important;
-		line-height: 38px !important;
-		background-color: rgba(68, 241, 255, 0.1) !important;
-	}
+.header {
+  color: #fff;
+  height: 38px !important;
+  line-height: 38px !important;
+  background-color: rgba(68, 241, 255, 0.1) !important;
+}
 
-	li.row>span {
-		text-align: center;
-		font-size: 16px;
-		position: relative;
-		display: inline-block;
+li.row > span {
+  text-align: center;
+  font-size: 16px;
+  position: relative;
+  display: inline-block;
 
-		&::before {
-			position: absolute;
-			content: "";
-			left: 0;
-			top: 50%;
-			transform: translateY(-50%);
-			background-color: #1d525f;
-			height: 14px;
-			width: 1px;
-		}
+  &::before {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: #1d525f;
+    height: 14px;
+    width: 1px;
+  }
 
-		&:nth-child(1) {
-			&::before {
-				background-color: #44f1ff;
-				box-shadow: 0px 0px 2px 0px #44f1ff;
-			}
-		}
-	}
+  &:nth-child(1) {
+    &::before {
+      background-color: #44f1ff;
+      box-shadow: 0px 0px 2px 0px #44f1ff;
+    }
+  }
+}
 
-	li.row {
-		.address {
-			color: #99e0ff;
-		}
+li.row {
+  .address {
+    color: #99e0ff;
+  }
 
-		.name,
-		.type,
-		.org,
-		.state,
-		.level {
-			color: #44f1ff;
-		}
+  .name,
+  .type,
+  .org,
+  .state,
+  .level {
+    color: #44f1ff;
+  }
 
-		border-bottom: 1px dashed #1d525f;
-		box-sizing: border-box;
-	}
+  border-bottom: 1px dashed #1d525f;
+  box-sizing: border-box;
+}
 
-	.row,
-	li,
-	a {
-		display: block;
-		height: 46px;
-		line-height: 46px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		font-size: 16px;
-		background-color: rgba(0, 0, 0, 0.2);
+.row,
+li,
+a {
+  display: block;
+  height: 46px;
+  line-height: 46px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  background-color: rgba(0, 0, 0, 0.2);
 
-		.time,
-		.address,
-		.name,
-		.type,
-		.org,
-		.state,
-		.level {
-			flex: 0.15;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
+  .time,
+  .address,
+  .name,
+  .type,
+  .org,
+  .state,
+  .level {
+    flex: 0.15;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .org {
+    flex: 0.4;
+    overflow: hidden;
+    text-overflow: ellipsis !important; // 超出隐藏
+    white-space: nowrap;
+  }
 
-		.org {
-			flex: 0.4;
-			overflow: hidden;
-			text-overflow: ellipsis !important; // 超出隐藏
-			white-space: nowrap;
-		}
+  .name {
+    flex: 0.3;
+  }
+}
+.gg-wap {
+  width: 99%;
+  height: 36px;
+  margin-top: 10px;
+  background: rgba(210, 206, 93, 0.25);
+  cursor: pointer;
+  border: 4px solid;
+  border-image: linear-gradient(
+      90deg,
+      rgba(26, 33, 41, 0.1) 1%,
+      rgba(210, 206, 93, 0.25) 49%,
+      rgba(26, 33, 41, 0.1) 98%
+    )
+    30 30;
+  //   margin: auto;
+  overflow: hidden;
+  background: linear-gradient(
+    90deg,
+    rgba(26, 33, 41, 0.1) 1%,
+    rgba(210, 206, 93, 0.25) 49%,
+    rgba(26, 33, 41, 0.1) 98%
+  );
+}
+
+@keyframes anis {
+  100% {
+    transform: translateX(-120%);
+  }
+}
+.text-goubt {
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  font-size: 0;
+  animation: anis 40s linear infinite;
+  animation-delay: 10s;
+  white-space: nowrap;
+}
+.text-none {
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  color: #44f1ff;
+}
+.text-goubt > li {
+  margin-right: 20px;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  text-shadow: 0px 4px 0px rgba(91, 75, 26, 0.35);
+  background: linear-gradient(
+    180deg,
+    #ffffff 1.8310546875%,
+    #ffe56a 50.244140625%,
+    #fffcf3 53.0029296875%,
+    #fff1bb 99.365234375%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  box-sizing: border-box;
+  padding-bottom: 0.4vh;
+}
 
-		.name {
-			flex: 0.3;
-		}
-	}
+.text-goubt:hover {
+  animation-play-state: paused;
+}
 </style>

app/src/views/Home/components/FireIndex/Chart.vue

@@ -1,85 +1,88 @@
-<template >
-  <div  v-if="items && items.length > 0">
-    <div ref="chart" style="height: 200px;" ></div>
+<template>
+  <div v-if="items && items.length > 0" style="width: 100%; margin: auto">
+    <div ref="chart" style="height: 230px"></div>
   </div>
-  <div
-    style="margin-top: 0px; margin-left: 140px"
-    v-else
-  >
+  <div style="margin-top: 0px; margin-left: 360px" v-else>
     <img
       src="../../../../assets/images/null2.png"
       alt=""
-      style="width: 150px; height: 150px"
+      style="width: 210px; height: 190px"
     />
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
 export default {
-  name: 'ChartComponent',
+  name: "ChartComponent",
   props: {
     items: Array,
+    type: Number,
+    show:Number,
     label: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     return {
-      chart: null
-    }
+      chart: null,
+    };
   },
   mounted() {
     if (this.$refs.chart) {
-      this.chart = echarts.init(this.$refs.chart)
+      this.chart = echarts.init(this.$refs.chart);
       // 初始化表格
-      this.init()
+      this.init();
     }
   },
   watch: {
     items: {
       handler() {
         this.$nextTick(() => {
-          this.chart = echarts.init(this.$refs.chart)
-          this.init()
-        })
+          if (this.chart) {
+            this.chart.dispose();
+          }
+          this.chart = echarts.init(this.$refs.chart);
+          this.init();   
+          this.reload()
+        });
       },
-      deep: true
+      deep: true,
     },
     label: {
       handler() {
         this.$nextTick(() => {
-        this.chart?.setOption({
-          xAxis: {
-            data: this.label
-          }
+          this.chart?.setOption({
+            xAxis: {
+              data: this.label,
+            },
+          });
         });
-      })
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   methods: {
     init() {
       this.chart?.setOption({
-          tooltip: {
-            trigger: "axis",
-            formatter: "{b} : {c}",
-            axisPointer: {
-              // 坐标轴指示器，坐标轴触发有效
-              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-            },
-            confine: true,
-            extraCssText: "z-index: 1000;",
-            backgroundColor: "#02809a",
-            borderColor: "rgba(0,213,255, .6)",
-            textStyle: {
-              color: "#fff",
-            },
+        tooltip: {
+          trigger: "axis",
+          formatter: "{b} : {c}",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
           },
+          confine: true,
+          extraCssText: "z-index: 1000;",
+          backgroundColor: "#02809a",
+          borderColor: "rgba(0,213,255, .6)",
+          textStyle: {
+            color: "#fff",
+          },
+        },
         xAxis: {
-          type: 'category',
+          type: "category",
           axisLine: {
             show: false,
           },
@@ -88,19 +91,19 @@ export default {
             show: false,
           },
           axisLabel: {
-            color: '#fff',
-            fontSize: 8
+            color: "#fff",
+            fontSize: 12,
           },
-          data: this.label
+          data: this.label,
         },
         yAxis: {
-          type: 'value',
+          type: "value",
           //坐标轴
           axisLine: {
             show: false,
           },
           axisLabel: {
-            color: '#fff'
+            color: "#fff",
           },
           axisTick: {
             //y轴刻度线
@@ -110,70 +113,84 @@ export default {
           splitLine: {
             lineStyle: {
               color: "#4784e8",
-              type: 'dashed'
+              type: "dashed",
             },
           },
-      },
+        },
         grid: {
-          right: '8px',
-          top: '20px'
+          right: "8px",
+          top: "20px",
         },
         series: [
           {
             data: this.items,
-            type: 'bar',
-            barWidth: 10,
+            type: "bar",
+            barWidth: 15,
             barGap: 20,
             showBackground: true,
             backgroundStyle: {
-              color: 'rgba(180, 180, 180, 0.2)'
+              color: "rgba(180, 180, 180, 0.2)",
             },
             label: {
               show: true,
-              color: '#fff',
-              position: 'top'
+              color: "#fff",
+              position: "top",
             },
             itemStyle: {
               normal: {
-                color: '#0085FF'
+                color: "#0085FF",
               },
               emphasis: {
-                color: '#00E0FF',
+                color: "#00E0FF",
                 borderWidth: 0,
-              }
-            }
-          }
-        ]
-      })
+              },
+            },
+          },
+        ],
+      });
       // if (this.chart && this.chart.clearLoop) {
       //   this.chart.clearLoop();
       // }
       // this.chart = loopShowTooltip(this.chart);
-  
-      this.chart
+
+      this.chart;
     },
     reload() {
       // 重载数据
       if (this.chart) {
-        const max = this.items.map(item => parseInt(item.value || 0)).sort((a,b) => b - a)
+        const max = this.items
+          .map((item) => parseInt(item.value || 0))
+          .sort((a, b) => b - a);
         this.chart?.setOption({
           yAxis: {
             min: 0,
             max: function (value) {
-                return max[0] === 0 ? 8 : Math.ceil(value.max) ;
-            }
+              return max[0] === 0 ? 8 : Math.ceil(value.max);
+            },
           },
-          series: [
-            {
-              data: this.items
-            }
-          ]
+          series:
+            this.type === 0&&this.show!=1
+              ? [
+                  {
+                    data: this.items,
+                  },
+                  {
+                    type: "line",
+                    // yAxisIndex: 1,
+                    data: this.items,
+                    smooth: true,
+                  },
+                ]
+              : [
+                  {
+                    data: this.items,
+                  }
+                ],
         });
       }
     },
-  }
-}
+  },
+};
 </script>
 
-<style scoped lang='less'>
-</style>
+<style scoped lang="less"></style>

app/src/views/Home/components/FireIndex/index.vue

@@ -87,7 +87,7 @@
         </ul>
       </div>
       <div>
-        <Chart :items="chartData" :label="chartLabel" />
+        <Chart :items="chartData" :label="chartLabel"  :type="activeIndex" :show="type" />
       </div>
     </div>
     <basic-modal top="120px" ref="basicInfoModal1" name="历史火灾查询">
@@ -213,7 +213,7 @@ export default {
           year.map(item => item.qhyy)
         ]
         this.fireIndexData = [
-          month.map(item => ({ name: item.qhyy, value: item.hzqs })),
+          month.map((item, index) => ({ name: item.qhyy, value: item.hzqs })),
           year.map(item => ({ name: item.qhyy, value: item.hzqs }))
         ]
       })
@@ -229,7 +229,9 @@ export default {
         this.monthLabel = month.map(item => item.y)
         this.yearLabel = year.map(item => item.n)
         this.monthData = [
-          month.map(item => ({ name: item.y, value: item.hzqs })),
+          month.map((item,index) =>  month.length - 1 === index ? ({ name: item.qhyy, value: item.hzqs, itemStyle: {
+            color: "#cccccc89",
+          } }) : ({ name: item.y, value: item.hzqs })),
           month.map(item => ({ name: item.y, value: item.wrs })),
           month.map(item => ({ name: item.y, value: item.srs })),
           month.map(item => ({ name: item.y, value: parseInt(item.zzjjss / 10000) })),
@@ -344,7 +346,7 @@ export default {
     list-style: none;
     display: flex;
     gap: 13px;
-    padding: 2px 4px;
+    padding: 2px 29px;
     justify-content: end;
     .item {
       color: #828a93;
@@ -364,7 +366,7 @@ export default {
 }
 // 渐变
 .fire {
-  width: 105px;
+  width: 165px;
   height: 40px;
   background: #2b3739;
   font-size: 12px;

app/src/views/Home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="padding: 0px 35px; display: flex; justify-content: space-between; ">
+  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
     <div>
       <border-panel
         height="302px"
@@ -12,8 +12,16 @@
       <border-panel height="346px" style="margin-bottom: 6px" title="隐患排查">
         <HiddenDangerDetection :qy="qy" />
       </border-panel>
-      <border-panel height="296px" header-cursor="pointer" title="自主管理" @click-header="openAutoManageModal">
-        <AutonomousManagement @click-item="onClickAutonomousManagementItemHandler" :qy="qy" />
+      <border-panel
+        height="293px"
+        header-cursor="pointer"
+        title="自主管理"
+        @click-header="openAutoManageModal"
+      >
+        <AutonomousManagement
+          @click-item="onClickAutonomousManagementItemHandler"
+          :qy="qy"
+        />
       </border-panel>
     </div>
     <div class="display: flex;">
@@ -27,16 +35,17 @@
         <div style="position: absolute; top: 10px; width: 500px">
           <SearchBox :area.sync="qy" />
         </div>
-        <div class="tips"  @click="getShoeInfo('smsMsgModal')" >提示</div>
+        <div class="tips" @click="getShoeInfo('smsMsgModal')">提示</div>
       </div>
       <div>
-        <border-panel
-          title="警情动态"
-          width="938px"
-          height="321px"
-          :header-type="1"
-        >
-          <AlarmingSituationDynamics :qx="qy" :PoliceList="PoliceList" />
+        <border-panel height="321px" width="938px" title="火灾指数" :header-type="1">
+          <FireIndex :type="fireIndexType" :qx="qy" />
+          <template #ext-header>
+            <button-block
+              :items="['月', '年']"
+              @select-item="selectItemHandler"
+            />
+          </template>
         </border-panel>
       </div>
     </div>
@@ -50,7 +59,11 @@
       >
         <RiskWarning :riskList="riskList" @showFxyj="showFxyj" :qy="qy" />
         <template #ext-header>
-          <img src="../../assets/images/dd_wh.png" alt="" @click="getShoeInfo('whFxModal')">
+          <img
+            src="../../assets/images/dd_wh.png"
+            alt=""
+            @click="getShoeInfo('whFxModal')"
+          />
         </template>
       </border-panel>
       <border-panel
@@ -59,34 +72,33 @@
         title="物联感知"
       >
         <WisdomFire :frieList="frieList" :iotList="iotList" :qy="qy" />
-      <ZhxfModalHeader slot="title" />
+        <ZhxfModalHeader slot="title" />
       </border-panel>
-      <border-panel height="298px" title="火灾指数">
-        <FireIndex :type="fireIndexType" :qx="qy" />
-        <template #ext-header>
-          <button-block
-            :items="['月', '年']"
-            @select-item="selectItemHandler"
-          />
-        </template>
+      <border-panel title="警情动态" height="298px" :header-type="1">
+        <AlarmingSituationDynamics :qx="qy" :PoliceList="PoliceList" />
       </border-panel>
     </div>
     <basic-modal top="120px" ref="basicInfoModal" name="基础信息">
       <BasicInfoModalContent :qy="qy" :default="defaultModel" />
     </basic-modal>
-    <basic-modal top="120px" ref="autoManageModal"  name="自主管理">
-      <zzglModul ref="zzglModul" 
-      :queryParams="queryParams"
-      :qy="qy" />
+    <basic-modal top="120px" ref="autoManageModal" name="自主管理">
+      <zzglModul ref="zzglModul" :queryParams="queryParams" :qy="qy" />
     </basic-modal>
-      <!-- 风险问号弹窗 -->
-      <basic-modal top="30px" ref="whFxModal" name="高层建筑消防安全风险分级分色判定标准" width="90%">
-      <div style="display: flex; flex-direction: column; justify-content: center">
+    <!-- 风险问号弹窗 -->
+    <basic-modal
+      top="30px"
+      ref="whFxModal"
+      name="高层建筑消防安全风险分级分色判定标准"
+      width="90%"
+    >
+      <div
+        style="display: flex; flex-direction: column; justify-content: center"
+      >
         <img class="imgs" src="../../assets/images/zl-fxyj.png" />
       </div>
     </basic-modal>
-      <!-- 短信提示弹窗 -->
-    <basic-modal top="120px"  ref="smsMsgModal" name="信息提示" width="800px">
+    <!-- 短信提示弹窗 -->
+    <basic-modal top="120px" ref="smsMsgModal" name="信息提示" width="800px">
       <MessageTipModalContent :qy="qy" @close="onCloseModal" />
     </basic-modal>
   </div>
@@ -103,10 +115,16 @@ import FireIndex from "./components/FireIndex/index.vue";
 import BasicInfoModalContent from "./components/BasicInfoModalContent.vue";
 import SearchBox from "@/components/SearchBox.vue";
 import zzglModul from "./components/zzglModul.vue";
-import { totaldata, getJqdt, getZxgjtj, getJrjzsbs, getDtskgzList } from "@/api/index.js";
+import {
+  totaldata,
+  getJqdt,
+  getZxgjtj,
+  getJrjzsbs,
+  getDtskgzList,
+} from "@/api/index.js";
 import { fxfb } from "@/api/risk";
 import { formatCityData, createMapChartWindowInfo } from "@/utils";
-import MessageTipModalContent from '@/components/MessageTipModalContent.vue'
+import MessageTipModalContent from "@/components/MessageTipModalContent.vue";
 
 export default {
   name: "HomePage",
@@ -122,7 +140,7 @@ export default {
     BasicInfoModalContent,
     SearchBox,
     zzglModul,
-    MessageTipModalContent
+    MessageTipModalContent,
   },
   data() {
     return {
@@ -140,492 +158,18 @@ export default {
       heatMap: [],
       defaultModel: {},
       mapType: {
-        "红色": 90,
-        "橙色": 70,
-        "黄色": 50,
-        "蓝色": 30,
-        "绿色": 10
+        红色: 90,
+        橙色: 70,
+        黄色: 50,
+        蓝色: 30,
+        绿色: 10,
       },
       queryParams: {
         glxs: "", //管理形式
         wbxs: "", //维保形式
-        dxjj: "" //大修基金
+        dxjj: "", //大修基金
       },
-      textInfo:`<div style="color: #fff;">
-    <p style="text-indent: 31.6pt;">
-        <br/>
-    </p>
-    <h1 style="text-align: center;">
-        高层建筑消防安全风险分级分色判定标准
-    </h1>
-    <h1 style="text-align: center;">
-        （试行）
-    </h1>
-    <p style="text-indent: 31.6pt;">
-        <br/>
-    </p>
-    <p style="text-indent: 31.6pt;">
-        <span>一、高层建筑消防安全风险分级分色定义</span>
-    </p>
-    <p style="text-indent: 31.6pt;">
-        依据《中共中央办公厅国务院办公厅关于推进城市安全发展的意见》、《国务院安委会办公室关于实施遏制重特大事故工作指南构建双重预防机制的意见》，将高层建筑消防安全风险等级从高到低划分为重大风险、较大风险、一般风险和低风险，分别用红、橙、黄、蓝四种颜色标示。
-    </p>
-    <p style="text-indent: 31.6pt;">
-        （一）重大风险（红）：指该高层建筑火灾危险、致灾因素多，管控难度大，具有发生重大及以上火灾事故的可能性；
-    </p>
-    <p style="text-indent: 31.6pt;">
-        （二）较大风险（橙）。指该高层建筑火灾危险、致灾因素较多，管控难度较大，具有发生较大火灾事故的可能性；
-    </p>
-    <p style="text-indent: 31.6pt;">
-        （三）一般风险（黄）。指该高层建筑火灾危险、致灾因素较少，具有发生一般火灾事故的可能性；
-    </p>
-    <p style="text-indent: 31.6pt;">
-        （四）低风险（蓝）。指该高层建筑火灾危险、致灾因素在受控范围内，发生火灾事故的可能性较小。
-    </p>
-    <p style="text-indent: 31.6pt;">
-        <span>二、高层建筑火灾隐患分类</span>
-    </p>
-    <p style="text-indent: 31.6pt;">
-        参考《重大火灾隐患判定标准》（GB35151-2017），将此次排查隐患状态，根据发生火灾概率、后果严重性、扑救难度从高到低分为A、B、C类。其中住宅建筑隐患分类：A类3个，B类8个，C类11个；公共建筑隐患分类：A类4个，B类10个，C类10个。
-    </p>
-    <table width="100%" style="color: #fff; padding: 0 40px;" border="1">
-        <colgroup>
-            <col width="91"/>
-            <col width="189"/>
-            <col width="307"/>
-            <col width="160"/>
-            <col width="173"/>
-        </colgroup>
-        <tbody style="text-align: center; line-height: 30px; border: #fff 1px solid;">
-            <tr>
-                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;"></th>
-                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;">
-                    二级指标
-                </th>
-                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;">
-                    排查结果
-                </th>
-                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;">
-                    住宅建筑 隐患分类
-                </th>
-                <th colspan="1" rowspan="1" style="border-right-width: 3px;">
-                    公共建筑 隐患分类
-                </th>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="10">
-                    消防设施
-                </td>
-                <td colspan="1" rowspan="2">
-                    室内消火栓系统
-                </td>
-                <td colspan="1" rowspan="1">
-                    无水
-                </td>
-                <td colspan="1" rowspan="1">
-                    A
-                </td>
-                <td colspan="1" rowspan="1">
-                    A
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    压力不足、其他故障
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="2">
-                    室外消火栓系统
-                </td>
-                <td colspan="1" rowspan="1">
-                    无水
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    压力不足、其他故障
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="2">
-                    自动喷水灭火系统
-                </td>
-                <td colspan="1" rowspan="1">
-                    无水
-                </td>
-                <td colspan="1" rowspan="1">
-                    A
-                </td>
-                <td colspan="1" rowspan="1">
-                    A
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    压力不足、其他故障
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    火灾自动报警系统
-                </td>
-                <td colspan="1" rowspan="1">
-                    设施故障，不具备 防灭火功能
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    机械防、排烟系统
-                </td>
-                <td colspan="1" rowspan="1">
-                    设施故障，不具备 防灭火功能
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    防火卷帘
-                </td>
-                <td colspan="1" rowspan="1">
-                    设施故障，不具备 防灭火功能
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    气体灭火系统
-                </td>
-                <td colspan="1" rowspan="1">
-                    设施故障，不具备 防灭火功能
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="2">
-                    生命通道
-                </td>
-                <td colspan="1" rowspan="1">
-                    消防车通道
-                </td>
-                <td colspan="1" rowspan="1">
-                    存在堵塞、占用情况
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    建筑内疏散通道、 安全出口
-                </td>
-                <td colspan="1" rowspan="1">
-                    被堵塞、占用或封闭
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="3">
-                    用电用气
-                </td>
-                <td colspan="1" rowspan="1">
-                    电动自行车
-                </td>
-                <td colspan="1" rowspan="1">
-                    存在违规停放充电现象
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    电气线路
-                </td>
-                <td colspan="1" rowspan="1">
-                    存在私接乱拉
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    电缆井内防火封堵
-                </td>
-                <td colspan="1" rowspan="1">
-                    防火封堵被破坏
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="9">
-                    日常管理
-                </td>
-                <td colspan="1" rowspan="1">
-                    可燃雨棚
-                </td>
-                <td colspan="1" rowspan="1">
-                    存在违规设置现象
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    突出外墙防护网
-                </td>
-                <td colspan="1" rowspan="1">
-                    存在违规设置现象
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    人员密集场所 室内装修
-                </td>
-                <td colspan="1" rowspan="1">
-                    违规采用 易燃可燃材料装修
-                </td>
-                <td colspan="1" rowspan="1">
-                    /
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    易燃可燃彩钢板房
-                </td>
-                <td colspan="1" rowspan="1">
-                    违规搭建 易燃可燃彩钢板房
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    避难层（间）
-                </td>
-                <td colspan="1" rowspan="1">
-                    被占用或擅自改变用途
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-                <td colspan="1" rowspan="1">
-                    B
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    易燃易爆危险品
-                </td>
-                <td colspan="1" rowspan="1">
-                    存在违规 储存、经营、使用
-                </td>
-                <td colspan="1" rowspan="1">
-                    A
-                </td>
-                <td colspan="1" rowspan="1">
-                    A
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    住宅部分与 非住宅部分楼梯
-                </td>
-                <td colspan="1" rowspan="1">
-                    存在共用疏散楼梯
-                </td>
-                <td colspan="1" rowspan="1">
-                    /
-                </td>
-                <td colspan="1" rowspan="1">
-                    A
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    消防控制室值班人员
-                </td>
-                <td colspan="1" rowspan="1">
-                    配备不到位
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    外墙装饰、广告牌
-                </td>
-                <td colspan="1" rowspan="1">
-                    存在影响灭火救援的 装饰、广告牌
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-                <td colspan="1" rowspan="1">
-                    C
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <p style="text-indent: 31.6pt;">
-        <span>三、高层建筑消防安全风险分级分色判定规则</span>
-    </p>
-    <p style="text-indent: 31.6pt;">
-        按照A类隐患赋30分、B类隐患赋5分、C类隐患赋1分计算消防安全风险值
-    </p>
-    <table width="100%" style="color: #fff; padding: 0 40px;" border="1">
-        <colgroup>
-            <col width="228"/>
-            <col width="377"/>
-        </colgroup>
-        <tbody style="text-align: center; line-height: 30px; border: #fff 1px solid;">
-            <tr>
-                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto; ">
-                    消防安全风险分色
-                </th>
-                <th colspan="1" rowspan="1" style="border-right-width: 3px; cursor: auto;">
-                    消防安全风险值n
-                </th>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    重大风险（红色）
-                </td>
-                <td colspan="1" rowspan="1">
-                    ≥60
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    较大风险（橙色）
-                </td>
-                <td colspan="1" rowspan="1">
-                    60＞n≥30
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    一般风险（黄色）
-                </td>
-                <td colspan="1" rowspan="1">
-                    30＞n≥6
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    低风险（蓝色）
-                </td>
-                <td colspan="1" rowspan="1">
-                    6＞n＞0
-                </td>
-            </tr>
-            <tr>
-                <td colspan="1" rowspan="1">
-                    无风险（绿色）
-                </td>
-                <td colspan="1" rowspan="1">
-                    n=0
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <p>
-        <br/>
-    </p>
-    <p>
-        <br/>
-    </p>
-    <p>
-        <br/>
-    </p>
-</div>`
-    }
+    };
   },
   watch: {
     qy() {
@@ -636,27 +180,27 @@ export default {
   },
   methods: {
     onCloseModal() {
-      this.closeModal("smsMsgModal")
+      this.closeModal("smsMsgModal");
     },
     onClickAutonomousManagementItemHandler(data) {
       const temp = {
         glxs: "",
         wbxs: "",
         dxjj: "",
-      }
+      };
       switch (data.index) {
         case 0:
-          temp.glxs = data.value
+          temp.glxs = data.value;
           break;
         case 1:
-          temp.wbxs = data.value
+          temp.wbxs = data.value;
           break;
         case 2:
-        temp.dxjj = data.value
+          temp.dxjj = data.value;
           break;
       }
-      this.queryParams = temp
-      this.showModal("autoManageModal")
+      this.queryParams = temp;
+      this.showModal("autoManageModal");
     },
     showLabel(params) {
       return createMapChartWindowInfo(
@@ -664,31 +208,49 @@ export default {
           title: params.name,
         },
         () => {
-          const item = params.data.meta
-          let res =`
+          const item = params.data.meta;
+          let res = `
           <table>
             <tr >
-              <td style="padding-bottom:8px;">${item.区域} 第<span style="font-size: 24px;color:red;font-weight:bold;">${item.区域排名 || 0}</span>名</td>
+              <td style="padding-bottom:8px;">${
+                item.区域
+              } 第<span style="font-size: 24px;color:red;font-weight:bold;">${
+            item.区域排名 || 0
+          }</span>名</td>
               <td></td>
             </tr>
             <tr>
-              <td>直接财产损失 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${Math.ceil((item.直接财产损失 || 0) / 10000)}</span>万元</td>
+              <td>直接财产损失 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${Math.ceil(
+                (item.直接财产损失 || 0) / 10000
+              )}</span>万元</td>
               <td></td>
             </tr>
             <tr>
-              <td>火灾起数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.火灾起数 || 0}</span>起</td>
-              <td>亡人数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.亡人数 || 0}</span>人</td>
+              <td>火灾起数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
+                item.火灾起数 || 0
+              }</span>起</td>
+              <td>亡人数 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
+                item.亡人数 || 0
+              }</span>人</td>
             </tr>
             <tr>
-              <td>重大风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.重大风险 || 0}</span>栋</td>
-              <td>较大风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.较大风险 || 0}</span>栋</td>
+              <td>重大风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
+                item.重大风险 || 0
+              }</span>栋</td>
+              <td>较大风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
+                item.较大风险 || 0
+              }</span>栋</td>
             </tr>
             <tr>
-              <td>一般风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.一般风险 || 0}</span>栋</td>
-              <td>低风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${item.低风险 || 0}</span>栋</td>
+              <td>一般风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
+                item.一般风险 || 0
+              }</span>栋</td>
+              <td>低风险 <span style="font-size: 24px;color:#ffb800;font-weight:400;">${
+                item.低风险 || 0
+              }</span>栋</td>
             </tr>
           </table>
-          `
+          `;
           return res;
         }
       );
@@ -697,26 +259,26 @@ export default {
       if (val) {
         this.defaultModel = {
           qy: this.qy,
-          dl: val
-        }
+          dl: val,
+        };
         this.showModal("basicInfoModal");
       }
     },
-    showFxyj(val){
+    showFxyj(val) {
       this.defaultModel = {
         qy: this.qy,
-        fxdjYs: val
-      }
+        fxdjYs: val,
+      };
       this.showModal("basicInfoModal");
     },
     openBasicModal() {
       this.showModal("basicInfoModal");
     },
-    UnitType(name){
-      const params={
-        qy:this.qy,
-      }
-        if (name == "超高层建筑总数（栋）") {
+    UnitType(name) {
+      const params = {
+        qy: this.qy,
+      };
+      if (name == "超高层建筑总数（栋）") {
         params.gd = "100米以上";
       }
       if (name == "2000年底前老旧住宅建筑总数（栋）") {
@@ -727,24 +289,26 @@ export default {
         params.jcnd = "2000年前";
         params.dl = "公共建筑";
       }
-      this.defaultModel = params
+      this.defaultModel = params;
       this.showModal("basicInfoModal");
     },
-    getShoeInfo(name){
+    getShoeInfo(name) {
       this.showModal(name);
     },
     // 风险预警
-    getList(){
-      totaldata({...this.params,qy:this.qy==="重庆市"?"":this.qy}).then(res=>{
-        if(res.data.code==200){
-        this.riskList=res.data.rows
-        }
-      }).catch(error=>{
-        this.$message({
-          message: res.data.msg,
-          type: "error"
+    getList() {
+      totaldata({ ...this.params, qy: this.qy === "重庆市" ? "" : this.qy })
+        .then((res) => {
+          if (res.data.code == 200) {
+            this.riskList = res.data.rows;
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: res.data.msg,
+            type: "error",
+          });
         });
-      })
     },
     selectItemHandler(idx) {
       this.fireIndexType = idx;
@@ -786,7 +350,7 @@ export default {
           tempData.map((item) => ({
             name: item.qx,
             value: this.mapType[item.分区颜色],
-            meta: item
+            meta: item,
           }))
         );
       });
@@ -799,21 +363,32 @@ export default {
     this.getIotList();
     this.loadMapData();
   },
+  mounted(){
+    setInterval(() => {
+      // 获取通知
+      getJqdt(this.params).then((res) => {
+        // console.log("通知", res);
+        this.PoliceList = res.data.rows;
+      });
+    }, 6000 );
+
+  }
+  
 };
 </script>
 <style scoped>
 .map {
   flex: 1;
 }
-.imgs{
+.imgs {
   display: inline-block;
   /* width: 100%;
   height: 700px; */
 }
 
 .tips {
-  color: #9BC3FF;
-  background: url('../../assets/images/border.png') no-repeat;
+  color: #9bc3ff;
+  background: url("../../assets/images/border.png") no-repeat;
   background-size: 100% 100%;
   background-color: transparent;
   position: absolute;

app/src/views/PoliceSituation/index.vue

@@ -82,6 +82,7 @@
 				wlwsb: [],
 				mapData: null,
 				middleType: "map",
+				flag:''
 			};
 		},
 		methods: {