|
|
@@ -1,19 +1,18 @@
|
|
|
<template>
|
|
|
<div style="padding: 0px 35px; display: flex; justify-content: space-between">
|
|
|
<div>
|
|
|
- <border-panel height="301px" style="margin-bottom: 2px" title="关键指标" header-cursor="pointer" @click-header="openBasicModal(1)">
|
|
|
- <FireIndex :type="fireIndexType" :qx="qx" @open="openBasicModal(1)" />
|
|
|
+ <border-panel height="301px" style="margin-bottom: 2px" title="关键指标" @click-header="openBasicModal(1)">
|
|
|
+ <FireIndex />
|
|
|
<template #ext-header>
|
|
|
- <button-block :items="['月', '年']" @select-item="selectFireIndexItemHandler" />
|
|
|
+ <button-block :items="['月', '年']" @select-item="selectItemHandler" />
|
|
|
</template>
|
|
|
</border-panel>
|
|
|
- <border-panel height="337px" style="margin-bottom: 2px" title="起火原因" @click="openBasicModal(2)">
|
|
|
+ <border-panel height="337px" style="margin-bottom: 2px" title="起火原因" @click-header="openBasicModal(2)">
|
|
|
<FireReason :qx="qx" />
|
|
|
</border-panel>
|
|
|
- <border-panel height="313px" title="起火场所（类型）">
|
|
|
+ <border-panel height="313px" title="起火场所（类型）" @click-header="openBasicModal(3)">
|
|
|
<FireAddressType :qx="qx" />
|
|
|
<template>
|
|
|
- <div class="tabCak" @click="openBasicModal(3)"></div>
|
|
|
</template>
|
|
|
</border-panel>
|
|
|
</div>
|
|
|
@@ -28,7 +27,7 @@
|
|
|
</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="openFire">
|
|
|
+ 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" />
|
|
|
@@ -47,7 +46,7 @@
|
|
|
<basic-modal top="120px" ref="basicInfoModal" name="火灾分析">
|
|
|
<hzfxCont :qx="qx" :idx="valNum" @callback="callback" />
|
|
|
</basic-modal>
|
|
|
- <basic-modal top="120px" ref="historyModal" name="历史火灾查询">
|
|
|
+ <basic-modal top="120px" ref="HistoryModal" name="历史火灾查询">
|
|
|
<hzfbCont :qy="qx" />
|
|
|
</basic-modal>
|
|
|
</div>
|
|
|
@@ -67,8 +66,7 @@
|
|
|
fireDistribution
|
|
|
} from '@/api/hzfx'
|
|
|
import {
|
|
|
- formatCityData,
|
|
|
- createMapChartWindowInfo
|
|
|
+ formatCityData
|
|
|
} from '../../utils'
|
|
|
export default {
|
|
|
name: "FireCondition",
|
|
|
@@ -83,14 +81,14 @@
|
|
|
MapCharts,
|
|
|
hzfxCont,
|
|
|
hzfbCont,
|
|
|
+ fireIndexType: 0,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
valNum: 1,
|
|
|
qx: '重庆市',
|
|
|
type: 1,
|
|
|
- heatMap: [],
|
|
|
- fireIndexType: 0,
|
|
|
+ heatMap: []
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -100,8 +98,13 @@
|
|
|
callback(val) {
|
|
|
this.valNum = val
|
|
|
},
|
|
|
+ selectItemHandler(idx) {
|
|
|
+ this.fireIndexType = idx
|
|
|
+ },
|
|
|
showLabel(params) {
|
|
|
- return createMapChartWindowInfo({ title: params.name }, () => `本年火灾起数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>起`);
|
|
|
+ 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
|
|
|
@@ -109,9 +112,6 @@
|
|
|
selectItemHandler(idx) {
|
|
|
this.type = (idx + 1)
|
|
|
},
|
|
|
- selectFireIndexItemHandler(idx) {
|
|
|
- this.fireIndexType = idx
|
|
|
- },
|
|
|
openBasicModal(val) {
|
|
|
this.valNum = val;
|
|
|
this.showModal("basicInfoModal");
|
|
|
@@ -128,23 +128,15 @@
|
|
|
})))
|
|
|
})
|
|
|
},
|
|
|
- openFire() {
|
|
|
- this.showModal('historyModal')
|
|
|
+ opemFries() {
|
|
|
+ this.showModal('HistoryModal')
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- .tabCak {
|
|
|
- width: 350px;
|
|
|
- height: 45px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
-
|
|
|
.center-box {
|
|
|
// margin-top: 602px;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
