火灾分析 警情动态

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

@@ -0,0 +1,158 @@
+<template >
+  <div ref="chart" style="height: 200px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'ChartComponent',
+  props: {
+    items: Array,
+    label: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    // 初始化表格
+    this.init()
+  },
+  watch: {
+    items: {
+      handler() {
+        this.reload()
+      },
+      deep: true
+    },
+    label: {
+      handler() {
+        this.chart.setOption({
+          xAxis: {
+            data: this.label
+          }
+        });
+      },
+      deep: true
+    }
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+          tooltip: {
+            trigger: "axis",
+            formatter: "{b} : {c}",
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+            },
+            backgroundColor: "rgba(0,224,255,0.46)",
+            borderColor: "rgba(0,213,255, .6)",
+            textStyle: {
+              color: '#fff',
+            }
+          },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          axisLabel: {
+            color: '#fff',
+            fontSize: 8
+          },
+          data: this.label
+        },
+        yAxis: {
+          type: 'value',
+          //坐标轴
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          //分格线
+          splitLine: {
+            lineStyle: {
+              color: "#4784e8",
+              type: 'dashed'
+            },
+          },
+      },
+        grid: {
+          right: '8px',
+          top: '20px'
+        },
+        series: [
+          {
+            data: this.items,
+            type: 'bar',
+            barWidth: 10,
+            barGap: 20,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            label: {
+              show: true,
+              color: '#fff',
+              position: 'top'
+            },
+            itemStyle: {
+              normal: {
+                color: '#0085FF'
+              },
+              emphasis: {
+                color: '#00E0FF',
+                borderWidth: 0,
+              }
+            }
+          }
+        ]
+      })
+      // if (this.chart && this.chart.clearLoop) {
+      //   this.chart.clearLoop();
+      // }
+      // this.chart = loopShowTooltip(this.chart);
+  
+      this.chart
+    },
+    reload() {
+      // 重载数据
+      if (this.chart) {
+        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) ;
+            }
+          },
+          series: [
+            {
+              data: this.items
+            }
+          ]
+        });
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang='less'>
+</style>

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

@@ -0,0 +1,396 @@
+<template>
+  <div>
+    <div class="fire-list">
+    <!-- 火灾总数 -->
+    <div class="fire" @click="openFire">
+      <div>
+        <div>
+          <span class="fire-num">{{ tbData.hzqs }}</span>
+          <span>起</span>
+        </div>
+        <div>火灾总数</div>
+      </div>
+      <div>
+        <img v-if="tbData.hzqstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
+        <img v-if="tbData.hzqstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
+        <span class="num" :class="{
+          up: tbData.hzqstb > 0,
+          down: tbData.hzqstb < 0,
+        }" >{{ tbData.hzqstb === 0 ? '-' : tbData.hzqsp }}</span>
+      </div>
+    </div>
+    <!--亡人  -->
+    <div class="fire" @click="openFire">
+      <div>
+        <div>
+          <span class="fire-num">{{ tbData.wrs  }}</span>
+          <span>人</span>
+        </div>
+        <div>亡人</div>
+      </div>
+      <div>
+        <img v-if="tbData.wrstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
+        <img v-if="tbData.wrstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
+        <span class="num" :class="{
+           up: tbData.wrstb > 0,
+          down: tbData.wrstb < 0,
+        }">{{ tbData.wrstb === 0 ? '-' : tbData.wrsp }}</span>
+      </div>
+    </div>
+    <!-- 伤人 -->
+    <div class="fire" @click="openFire">
+      <div>
+        <div>
+          <span class="fire-num">{{ tbData.srs  }}</span>
+          <span>人</span>
+        </div>
+        <div>伤人</div>
+      </div>
+      <div>
+        <img v-if="tbData.srstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
+        <img v-if="tbData.srstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
+        <span class="num " :class="{
+           up: tbData.srstb > 0,
+          down: tbData.srstb < 0,
+        }"  >{{ tbData.srstb === 0 ? '-' : tbData.srsp }}</span>
+      </div>
+    </div>
+    <!-- 直接经济损失 -->
+    <div class="fire" @click="openFire">
+      <div>
+        <div>
+          <span class="fire-num">{{ tbData.zzjjss }}</span>
+          <span class="money">万元</span>
+          <img v-if="tbData.zzjjsstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
+          <img v-if="tbData.zzjjsstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
+          <span class="num" :class="{
+          up: tbData.zzjjsstb > 0,
+          down: tbData.zzjjsstb < 0,
+        }" >{{ tbData.zzjjsstb === 0 ? '-' : tbData.zzjjssp }}</span>
+        </div>
+        <div class="manoue">直接经济损失</div>
+      </div>
+      <!-- <div>
+        <img src="../../../assets/images/Vector (1).png" alt="">
+        <span class="num">15%</span>
+      </div> -->
+    </div>
+    </div>
+    <div class="charts">
+      <div class="top_title">
+        <div>{{ unitLabel }}</div>
+        <ul class="options">
+          <li :class="{
+            item: true,
+            active: activeIndexState(index)
+          }"  @click="activeIndex = index" v-for="(item, index) in activeItems" :key="index">{{ item.name }}</li>
+        </ul>
+      </div>
+      <div>
+        <Chart :items="chartData" :label="chartLabel" />
+      </div>
+    </div>
+    <basic-modal top="120px" ref="basicInfoModal1" name="历史火灾查询">
+			<hzfbCont :qy="qx" />
+		</basic-modal>
+  </div>
+</template>
+
+<script>
+import Chart from './Chart.vue'
+import { getSxzbListToatl, getQhyyListToatl, getHzzbSxzbYoy } from "@/api/index.js";
+import hzfbCont from '../../../FireCondition/components/hzfbCont.vue';
+export default {
+  name: 'FireIndex',
+  components: {
+    Chart,
+    hzfbCont
+  },
+  props: {
+    qx: String,
+    type: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      activeItems: [
+        {name: '火灾总数'},
+        {name: '亡人'},
+        {name: '伤人'},
+        {name: '直接经济损失'},
+        {name: '起火原因'}
+      ],
+      activeIndex: 0,
+      unitLabels: ["起", "人", "人", "万元", "起"],
+      data: [
+        [],
+        [],
+        [],
+        [],
+        []
+      ],
+      params:{
+        pageSize:100,
+        pageNum:1
+      },
+      // 年份横坐标轴标签
+      yearLabel: [],
+      // 年份数据
+      yearData: [],
+      // 月份纵坐标轴标签
+      monthLabel: [],
+      // 月份数据
+      monthData: [],
+      modeType: 0,
+      fireIndexLabel: [],
+      fireIndexData: [],
+      monthTbData: {},
+      yearTbData: {}
+    }
+  },
+  watch: {
+    type: {
+      handler(idx){
+        this.modeType = idx
+      },
+      immediate: true
+    },
+    qx() {
+      this.getFrieList()
+    }
+  },
+  computed: {
+    unitLabel() {
+      return this.unitLabels[this.activeIndex]
+    },
+    chartLabel() {
+      if (this.activeIndex === 4) {
+        return this.fireIndexLabel[this.type]
+      }
+      if (this.type === 0) {
+        return this.monthLabel;
+      } else {
+        return this.yearLabel
+      }
+    },
+    chartData() {
+      if (this.activeIndex === 4) {
+        return this.fireIndexData[this.type]
+      }
+      if (this.type === 0) {
+        return this.monthData[this.activeIndex]
+      } else {
+        return this.yearData[this.activeIndex];
+      }
+    },
+    tbData() {
+      return [this.yearTbData , this.monthTbData][this.modeType]
+    }
+  },
+  methods: {
+    activeIndexState(index) {
+      return this.activeIndex === index
+    },
+    getFrieList(){
+      this.loadQhyyListToatl()
+      this.loadSxzbChartData()
+      this.loadHzzbSxzbYoy()
+    },
+    loadQhyyListToatl() {
+      getQhyyListToatl({
+        ...this.params,
+        qy: this.qx === '重庆市' ? "" : this.qx
+      }).then(res=>{
+        const temp = res.data.data
+        const year =temp.qhyyListByYear
+        const month = temp.qhyyListByMonth
+        this.fireIndexLabel = [
+          month.map(item => item.qhyy),
+          year.map(item => item.qhyy)
+        ]
+        this.fireIndexData = [
+          month.map(item => ({ name: item.qhyy, value: item.hzqs })),
+          year.map(item => ({ name: item.qhyy, value: item.hzqs }))
+        ]
+      })
+    },
+    loadSxzbChartData() {
+      getSxzbListToatl({
+      ...this.params,
+        qy: this.qx === '重庆市' ? "" : this.qx
+      }).then(res => {
+        const temp = res.data.data
+        const year =temp.sxzbYear
+        const month = temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12)
+        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 => ({ name: item.y, value: item.wrs })),
+          month.map(item => ({ name: item.y, value: item.sss })),
+          month.map(item => ({ name: item.y, value: (item.zzjjss / 10000).toFixed(0) })),
+          []
+        ]
+        this.yearData = [
+          year.map(item => ({ name: item.y, value: item.hzqs })),
+          year.map(item => ({ name: item.y, value: item.wrs })),
+          year.map(item => ({ name: item.y, value: item.sss })),
+          year.map(item => ({ name: item.y, value: (item.zzjjss / 10000).toFixed(0) })),
+          []
+        ]
+      })
+    },
+    loadHzzbSxzbYoy() {
+      getHzzbSxzbYoy({
+        qy: this.qx === '重庆市' ? "" : this.qx
+      }).then(res => {
+        const temp = res.data.data
+        if (temp['年同比'].length === 1) {
+          let tempData = temp['年同比'][0]
+          this.monthTbData = {
+            wrs: tempData.wrs,
+            srs: tempData.srs,
+            zzjjss: parseInt(tempData.zzjjss / 10000),
+            hzqs: tempData.hzqs,
+            wrstb: tempData.wrstb,
+            srstb: tempData.srstb,
+            zzjjsstb: tempData.zzjjsstb,
+            hzqstb: tempData.hzqstb,
+            wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
+            srsp:  `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
+            zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
+            hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
+          }
+        } else {
+          this.monthTbData = {
+            wrs: 0,
+            srs: 0,
+            zzjjss: 0,
+            hzqs: 0,
+            wrstb: 0,
+            srstb: 0,
+            zzjjsstb: 0,
+            hzqstb: 0,
+            wrsp: `-`,
+            srsp:  `-`,
+            zzjjssp: `-`,
+            hzqsp: `-`
+          }
+        }
+        if (temp['月同比'].length === 1) {
+          let tempData = temp['月同比'][0]
+          this.yearTbData = {
+            wrs: tempData.wrs,
+            srs: tempData.srs,
+            zzjjss: parseInt(tempData.zzjjss / 10000),
+            hzqs: tempData.hzqs,
+            wrstb: tempData.wrstb,
+            srstb: tempData.srstb,
+            zzjjsstb: tempData.zzjjsstb,
+            hzqstb: tempData.hzqstb,
+            wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
+            srsp:  `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
+            zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
+            hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
+          }
+        } else {
+          this.yearTbData = {
+            wrs: 0,
+            srs: 0,
+            zzjjss: 0,
+            hzqs: 0,
+            wrstb: 0,
+            srstb: 0,
+            zzjjsstb: 0,
+            hzqstb: 0,
+            wrsp: `-`,
+            srsp:  `-`,
+            zzjjssp: `-`,
+            hzqsp: `-`
+          }
+        }
+      })
+    },
+    openFire(){
+      this.showModal("basicInfoModal1");
+    }
+  },
+  created() {
+    setInterval(() => {
+      this.activeIndex = this.activeIndex + 1 >= this.activeItems.length ? 0 : this.activeIndex + 1
+    }, 30 * 1000),
+    this.getFrieList()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.charts {
+  .top_title {
+    display: flex;
+    justify-content: space-between;
+    margin-left: 30px;
+  }
+  .options {
+    list-style: none;
+    display: flex;
+    gap: 13px;
+    padding: 2px 4px;
+    justify-content: end;
+    .item {
+      color: #828a93;
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .active {
+      color: #00E0FF;
+    }
+  }
+}
+.fire-list {
+  display: flex;
+  justify-content: space-around;
+  margin: 14px 2px 10px 5px;
+  letter-spacing: 1px;
+}
+// 渐变
+.fire {
+  width: 105px;
+  height: 40px;
+  background: #2b3739;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  cursor: pointer;
+  padding: 3px 0;
+  border-radius: 2px;
+  .fire-num {
+    color: #ffbf1a;
+    font-size: 20px;
+  }
+  .num {
+    font-size: 16px;
+  }
+  .num.up {
+    color: #fb3636;
+  }
+  .num.down {
+    color: #19f34b;
+  }
+}
+img {
+  display: inline-block;
+  width: 10px;
+  height: 20px;
+}
+.manoue {
+  font-size: 12px !important;
+  margin-right: 10px;
+}
+.money {
+  margin-right: 5px;
+}
+</style>

app/src/views/FireCondition/components/hzfxCont.vue

@@ -43,8 +43,16 @@
 		},
 		props: {
 			qy: String,
+			 idx: Number,
 		},
 		watch: {
+			idx: {
+			  handler(val) {
+			    this.showFlag = val;
+			  },
+			  immediate: true,
+			  deep:true
+			},
 			qy: {
 				handler(val) {
 					this.value = val;
@@ -107,6 +115,7 @@
 			},
 			changeList(val) {
 				this.showFlag = val
+				this.$emit('callback', val);
 			},
 			addClass(i) {
 				return this.showFlag === i ? 'active' : 'tab-item'

app/src/views/FireCondition/index.vue

@@ -1,28 +1,31 @@
 <template>
 	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
 		<div>
-			<border-panel height="301px" style="margin-bottom: 2px" title="关键指标" @click="openBasicModal">
-				<KeyIndex :qx="qx" />
+			<border-panel height="301px" style="margin-bottom: 2px"  title="关键指标" @click="openBasicModal(1)">
+				<FireIndex  />
+				<template #ext-header>
+					<button-block :items="['月', '年']" @select-item="selectItemHandler" />
+				</template>
 			</border-panel>
-			<border-panel height="337px" style="margin-bottom: 2px" title="起火原因">
+			<border-panel height="337px" style="margin-bottom: 2px" title="起火原因"  @click="openBasicModal(2)">
 				<FireReason :qx="qx" />
 			</border-panel>
-			<border-panel height="313px" title="起火场所（类型）">
+			<border-panel height="313px" title="起火场所（类型）"  @click="openBasicModal(3)">
 				<FireAddressType :qx="qx" />
 			</border-panel>
 		</div>
 		<div>
 			<div>
 				<div style="width: 910px; display: flex; position: relative;">
-					<MapCharts :mapHeatData="heatMap" :formatter="showLabel"  :qx="qx" @selectArea="area => qx = area" />
+					<MapCharts :mapHeatData="heatMap" :formatter="showLabel" :qx="qx" @selectArea="area => qx = area" />
 					<div style="position: absolute;width: 500px; left: 10px;top: 10px;">
 						<search-box :area.sync="qx" />
 					</div>
 				</div>
 			</div>
 			<div class="center-box">
-				<border-panel class="fire-time" header-cursor="pointer" :header-type="3" height="313px" width="955px" style="margin: 7px;cursor: pointer;"
-					title="火灾时段（24时）" @click-header="opemFries">
+				<border-panel class="fire-time" header-cursor="pointer" :header-type="3" height="313px" width="955px"
+					style="margin: 7px;cursor: pointer;" title="火灾时段（24时）" @click-header="opemFries">
 					<FireTime :qx="qx" :type="type" />
 					<template #ext-header>
 						<button-block :items="['本年', '近5年', '季节']" @select-item="selectItemHandler" />
@@ -31,7 +34,7 @@
 			</div>
 		</div>
 		<div>
-			<border-panel height="486px" style="margin-bottom: 7px" title="火灾分布" >
+			<border-panel height="486px" style="margin-bottom: 7px" title="火灾分布">
 				<FireDistribution :qx="qx" />
 			</border-panel>
 			<border-panel height="460px" title="历史火灾">
@@ -39,17 +42,17 @@
 			</border-panel>
 		</div>
 		<basic-modal top="120px" ref="basicInfoModal" name="火灾分析">
-			<hzfxCont :qx="qx" /> 
+          <hzfxCont :qx="qx" :idx="valNum"  @callback="callback" /> 
 		</basic-modal>
 		<basic-modal top="120px" ref="HistoryModal" name="历史火灾查询">
-      <hzfbCont :qy="qx" />
-    </basic-modal>
+			<hzfbCont :qy="qx" />
+		</basic-modal>
 	</div>
 </template>
 <script>
 	import FireReason from "./components/FireReason.vue";
 	import FireAddressType from "./components/FireAddressType.vue";
-	import KeyIndex from './components/KeyIndex/index.vue'
+	import FireIndex from './components/FireIndex/index.vue'
 	import FireDistribution from './components/FireDistribution.vue'
 	import FireHistory from './components/FireHistory.vue'
 	import FireTime from './components/FireTime.vue'
@@ -57,7 +60,9 @@
 	import MapCharts from "../Home/components/MapCharts.vue";
 	import hzfxCont from "./components/hzfxCont.vue";
 	import hzfbCont from "./components/hzfbCont.vue";
-	import { fireDistribution } from '@/api/hzfx'
+	import {
+		fireDistribution
+	} from '@/api/hzfx'
 	import {
 		formatCityData
 	} from '../../utils'
@@ -66,17 +71,19 @@
 		components: {
 			FireReason,
 			FireAddressType,
-			KeyIndex,
+			FireIndex,
 			FireDistribution,
 			FireHistory,
 			FireTime,
 			SearchBox,
 			MapCharts,
-			hzfxCont,	
-			hzfbCont
+			hzfxCont,
+			hzfbCont,
+			fireIndexType: 0,
 		},
 		data() {
 			return {
+				valNum:1,
 				qx: '重庆市',
 				type: 1,
 				heatMap: []
@@ -86,18 +93,25 @@
 			this.loadData()
 		},
 		methods: {
+			callback(val){
+				this.valNum = val
+			},
+			selectItemHandler(idx) {
+				this.fireIndexType = idx
+			},
 			showLabel(params) {
-        let res = params.name + "<br/>";
-        res += `本年火灾起数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
-        return res;
-      },
+				let res = params.name + "<br/>";
+				res += `本年火灾起数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
+				return res;
+			},
 			change(e) {
 				this.qx = e.target.value
 			},
 			selectItemHandler(idx) {
 				this.type = (idx + 1)
 			},
-			openBasicModal() {
+			openBasicModal(val) {
+				this.valNum = val;
 				this.showModal("basicInfoModal");
 			},
 			loadData() {
@@ -112,7 +126,7 @@
 					})))
 				})
 			},
-			opemFries(){
+			opemFries() {
 				this.showModal('HistoryModal')
 			}
 		}
@@ -123,4 +137,4 @@
 	.center-box {
 		// margin-top: 602px;
 	}
-</style>
+</style>

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

@@ -21,7 +21,7 @@
 				<span class="result2">报警时间</span>
 			</div>
 			<!-- <VueSeamlessScroll :data="list" :class-option="classOption" class="warp" hoverStop> -->
-			<div class="" style="height: 100vh;overflow: auto;">
+			<div class="" style="height: 190px;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' : ''">

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

@@ -35,15 +35,33 @@ white-space: nowrap;">{{ item.yjddsj || '-'}}</span>
 				<div class="wenshuTxt">最新文书</div>
 				<img src="../../../assets/images/img14.png" />
 			</div>
-			<div class="content" v-if="hcws">
+			<div class="content" v-if="hcws1">
 				<div>
 					<div style="">
 						<div class="contFlex">
-							<div class="contType">{{hcws.jqzt}}</div>
-							<div class="conTime">{{hcws.gxsj}}</div>
+							<div class="contType">{{hcws1.jqzt}}</div>
+							<div class="conTime">{{hcws1.gxsj}}</div>
 						</div>
-						<div class="contBox">{{hcws.wsnrJyqk}}</div>
-						<div class="contText">{{hcws.fkjgDwmc}}</div>
+						<div class="contBox">{{hcws1.wsnrJyqk}}</div>
+						<div class="contText">{{hcws1.fkjgDwmc}}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="writ on">
+			<div class="writTab">
+				<div class="wenshuTxt">历史文书</div>
+				<img src="../../../assets/images/img14.png" />
+			</div>
+			<div class="content on" >
+				<div v-for="(item,index) in hcws" :key="index">
+					<div style="">
+						<div class="contFlex">
+							<div class="contType">{{item.jqzt}}</div>
+							<div class="conTime">{{item.gxsj}}</div>
+						</div>
+						<div class="contBox">{{item.wsnrJyqk}}</div>
+						<div class="contText">{{item.fkjgDwmc}}</div>
 					</div>
 				</div>
 			</div>
@@ -60,7 +78,7 @@ white-space: nowrap;">{{ item.yjddsj || '-'}}</span>
 				checked: 0,
 			}
 		},
-		props: ['list', 'zlxx', 'hcws'],
+		props: ['list', 'zlxx', 'hcws','hcws1'],
 		// props: {
 		// 	list: {
 		// 		type: Array,
@@ -103,6 +121,15 @@ white-space: nowrap;">{{ item.yjddsj || '-'}}</span>
 </script>
 
 <style scoped lang='less'>
+	::-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);
+	}
 	.writ {
 		width: 521px;
 	}
@@ -112,7 +139,7 @@ white-space: nowrap;">{{ item.yjddsj || '-'}}</span>
 		align-items: center;
 		justify-content: space-between;
 		background: rgba(14, 90, 105, 0.6);
-		padding: 10px 12px;
+		padding: 2px 12px;
 		box-sizing: border-box;
 	}
 
@@ -127,7 +154,10 @@ white-space: nowrap;">{{ item.yjddsj || '-'}}</span>
 		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;
+	}
+	.content.on{
+		height: 100px;
+		overflow: auto;
 	}
 
 	.contFlex {
@@ -161,7 +191,6 @@ white-space: nowrap;">{{ item.yjddsj || '-'}}</span>
 
 	.contBox {
 		margin: 6px 0;
-		height: 100px;
 		overflow: auto;
 		line-height: 20px;
 	}

app/src/views/PoliceSituation/index.vue

@@ -4,7 +4,7 @@
 			<border-panel height="350px" width="540px" style="margin-bottom: 6px" :headerType="3" title="报警信息">
 				<Alaem :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="出动力量">
+			<border-panel height="620px" width="540px" style="margin-bottom: 6px" :headerType="3" title="出动力量">
 				<MobilizeStrength :list="cdxxList" :zlxx="zlxx" :hcws="hcws" />
 			</border-panel>
 		</div>
@@ -15,7 +15,7 @@
 			<border-panel height="469px" width="540px" style="margin-bottom: 6px" :headerType="3" title="事故单位信息">
 				<UnitInformation :ajxxList="ajxxList" :jzxxList="jzxxList" :wlwsb="wlwsb" />
 			</border-panel>
-			<border-panel height="475px" width="540px" style="margin-bottom: 6px" :headerType="3" title="风险隐患信息">
+			<border-panel height="495px" width="540px" style="margin-bottom: 6px" :headerType="3" title="风险隐患信息">
 				<UnitInfo :fxxxList="fxxxList" :lshzList="lshzList" />
 			</border-panel>
 		</div>
@@ -61,6 +61,7 @@
 				cdxxList: [], //出动信息列表
 				zlxx: [], //出动信息总览
 				hcws: [], //火场文书
+				hcws1: [],
 				ajxxList: [],
 				jzxxList: {},
 				fxxxList: {},
@@ -121,7 +122,12 @@
 					jqTywysbm: this.params.id,
 				};
 				getHcws(hcwsId).then((res) => {
-					this.hcws = res.data.rows[0];
+					this.hcws1 = res.data.rows[0]
+					let i = res.data.rows
+					let i2 = i.filter((item, index) => {
+						return index
+					})
+					this.hcws = i2;
 				});
 				// 事故单位信息-案件信息列表
 				getAjxx(this.params).then((res) => {

app/src/views/Risk/index.vue

@@ -1,105 +1,94 @@
 <template>
-  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
-    <div>
-      <border-panel
-        height="310px"
-        style="margin-bottom: 6px; cursor: pointer"
-        title="总体展示"
-        @click="openBasicModal(1)"
-      >
-        <Totality :qx="qx" />
-      </border-panel>
-      <border-panel height="320px" style="margin-bottom: 6px" title="排查统计">
-        <Investigation :qx="qx" @open="openBasicModal" />
-      </border-panel>
-      <border-panel
-        height="310px"
-        title="整改统计"
-        @click="openBasicModal(6)"
-        style="cursor: pointer"
-      >
-        <Rectification :qx="qx" />
-      </border-panel>
-    </div>
-    <div>
-      <div
-        style="
+	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
+		<div>
+			<border-panel height="310px" style="margin-bottom: 6px; cursor: pointer" title="总体展示"
+				@click="openBasicModal(1)">
+				<Totality :qx="qx" />
+			</border-panel>
+			<border-panel height="320px" style="margin-bottom: 6px" title="排查统计">
+				<Investigation :qx="qx" @open="openBasicModal" />
+			</border-panel>
+			<border-panel height="310px" title="整改统计" @click="openBasicModal(6)" style="cursor: pointer">
+				<Rectification :qx="qx" />
+			</border-panel>
+		</div>
+		<div>
+			<div style="
           width: 950px;
           height: 1000px;
           display: flex;
           padding-top: 150px;
           position: relative;
-        "
-      >
-        <MapCharts :mapHeatData="heatMap" :formatter="showLabel"  :qx="qx" @selectArea="(area) => (qx = area)" />
-        <div style="position: absolute; width: 500px; left: 0px; top: 10px">
-          <search-box :area.sync="qx" />
-        </div>
-      </div>
-    </div>
-    <div>
-      <border-panel height="521px" style="margin-bottom: 6px" title="风险分布">
-        <Riskdistribution :qx="qx" @selectData="loadData" />
-      </border-panel>
-      <border-panel height="421px" style="margin-bottom: 6px" title="风险隐患">
-        <RiskDanger :qx="qx" />
-      </border-panel>
-    </div>
-    <basic-modal top="120px" ref="basicInfoModal" name="风险隐患信息">
-      <fxyjCont :qx="qx" :idx="fxyjIdex" />
-    </basic-modal>
-  </div>
+        ">
+				<MapCharts :mapHeatData="heatMap" :formatter="showLabel" :qx="qx" @selectArea="(area) => (qx = area)" />
+				<div style="position: absolute; width: 500px; left: 0px; top: 10px">
+					<search-box :area.sync="qx" />
+				</div>
+			</div>
+		</div>
+		<div>
+			<border-panel height="521px" style="margin-bottom: 6px" title="风险分布">
+				<Riskdistribution :qx="qx" @selectData="loadData" />
+			</border-panel>
+			<border-panel height="421px" style="margin-bottom: 6px" title="风险隐患">
+				<RiskDanger :qx="qx" />
+			</border-panel>
+		</div>
+		<basic-modal top="120px" ref="basicInfoModal" name="风险隐患信息">
+			<fxyjCont :qx="qx" :idx="fxyjIdex" />
+		</basic-modal>
+	</div>
 </template>
 <script>
-import Totality from "./components/Totality.vue";
-import Investigation from "./components/Investigation.vue";
-import Rectification from "./components/Rectification.vue";
-import Riskdistribution from "./components/Riskdistribution.vue";
-import RiskDanger from "./components/RiskDanger.vue";
-import SearchBox from "@/components/SearchBox.vue";
-import MapCharts from "../Home/components/MapCharts.vue";
-import fxyjCont from "./components/fxyjCont.vue";
-import {
+	import Totality from "./components/Totality.vue";
+	import Investigation from "./components/Investigation.vue";
+	import Rectification from "./components/Rectification.vue";
+	import Riskdistribution from "./components/Riskdistribution.vue";
+	import RiskDanger from "./components/RiskDanger.vue";
+	import SearchBox from "@/components/SearchBox.vue";
+	import MapCharts from "../Home/components/MapCharts.vue";
+	import fxyjCont from "./components/fxyjCont.vue";
+	import {
 		formatCityData
 	} from '../../utils'
 
-export default {
-  name: "RiskPage",
-  components: {
-    Totality,
-    Investigation,
-    Rectification,
-    Riskdistribution,
-    RiskDanger,
-    SearchBox,
-    MapCharts,
-    fxyjCont,
-  },
-  data() {
-    return {
-      qx: "重庆市",
-      fxyjIdex: 1,
-      heatMap:[]
-    };
-  },
-  methods: {
+	export default {
+		name: "RiskPage",
+		components: {
+			Totality,
+			Investigation,
+			Rectification,
+			Riskdistribution,
+			RiskDanger,
+			SearchBox,
+			MapCharts,
+			fxyjCont,
+		},
+		data() {
+			return {
+				qx: "重庆市",
+				fxyjIdex: 1,
+				heatMap: []
+			};
+		},
+		methods: {
 			showLabel(params) {
-        let res = params.name + "<br/>";
-        res += `风险栋数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
-        return res;
-      },
-    openBasicModal(val) {
-      this.fxyjIdex = val;
-      this.showModal("basicInfoModal");
-    },
-    loadData(val) {
-      this.heatMap = formatCityData(val.map(item => ({
-        name: item.qy,
-        value: item.sl
-      })))
-    }
-  },
-};
+				let res = params.name + "<br/>";
+				res += `风险栋数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
+				return res;
+			},
+			openBasicModal(val) {
+				this.fxyjIdex = val;
+				this.showModal("basicInfoModal");
+			},
+			loadData(val) {
+				this.heatMap = formatCityData(val.map(item => ({
+					name: item.qy,
+					value: item.sl
+				})))
+			}
+		},
+	};
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less"></style>