|
|
@@ -5,22 +5,32 @@
|
|
|
height="302px"
|
|
|
style="margin-bottom: 6px; cursor: pointer"
|
|
|
title="基础信息"
|
|
|
- @click="openBasicModal"
|
|
|
+ @click="openBasicModal"
|
|
|
>
|
|
|
- <BasicInfo :qy="qy" />
|
|
|
+ <BasicInfo :qy="qy" @showTc="showTc" />
|
|
|
</border-panel>
|
|
|
<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">
|
|
|
+ <border-panel
|
|
|
+ height="296px"
|
|
|
+ header-cursor="pointer"
|
|
|
+ title="自主管理"
|
|
|
+ @click-header="openAutoManageModal"
|
|
|
+ >
|
|
|
<AutonomousManagement :qy="qy" />
|
|
|
</border-panel>
|
|
|
</div>
|
|
|
<div class="display: flex;">
|
|
|
- <div class="map" style="position: relative;">
|
|
|
- <MapCharts :mapHeatData="heatMap" :formatter="showLabel" :qx="qy" @selectArea="area => qy = area" />
|
|
|
- <div style="position: absolute; top:10px; width: 500px;">
|
|
|
- <SearchBox :area.sync="qy"/>
|
|
|
+ <div class="map" style="position: relative">
|
|
|
+ <MapCharts
|
|
|
+ :mapHeatData="heatMap"
|
|
|
+ :formatter="showLabel"
|
|
|
+ :qx="qy"
|
|
|
+ @selectArea="(area) => (qy = area)"
|
|
|
+ />
|
|
|
+ <div style="position: absolute; top: 10px; width: 500px">
|
|
|
+ <SearchBox :area.sync="qy" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
@@ -35,24 +45,37 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <border-panel height="311px" style="margin-bottom: 6px; cursor: pointer; " header-cursor="pointer" title="风险预警" @click-header="openBasicModal">
|
|
|
- <RiskWarning :riskList="riskList" />
|
|
|
+ <border-panel
|
|
|
+ height="311px"
|
|
|
+ style="margin-bottom: 6px; cursor: pointer"
|
|
|
+ header-cursor="pointer"
|
|
|
+ title="风险预警"
|
|
|
+ @click-header="openBasicModal"
|
|
|
+ >
|
|
|
+ <RiskWarning :riskList="riskList" @showFxyj="showFxyj" />
|
|
|
</border-panel>
|
|
|
- <border-panel height="331px" style="margin-bottom: 6px; cursor: pointer;" title="智慧消防" >
|
|
|
+ <border-panel
|
|
|
+ height="331px"
|
|
|
+ style="margin-bottom: 6px; cursor: pointer"
|
|
|
+ title="智慧消防"
|
|
|
+ >
|
|
|
<WisdomFire :frieList="frieList" :iotList="iotList" :qy="qy" />
|
|
|
</border-panel>
|
|
|
<border-panel height="298px" title="火灾指标">
|
|
|
<FireIndex :type="fireIndexType" :qx="qy" />
|
|
|
<template #ext-header>
|
|
|
- <button-block :items="['月', '年']" @select-item="selectItemHandler" />
|
|
|
+ <button-block
|
|
|
+ :items="['月', '年']"
|
|
|
+ @select-item="selectItemHandler"
|
|
|
+ />
|
|
|
</template>
|
|
|
</border-panel>
|
|
|
</div>
|
|
|
<basic-modal top="120px" ref="basicInfoModal" name="基础信息">
|
|
|
- <BasicInfoModalContent :qy="qy" />
|
|
|
+ <BasicInfoModalContent :qy="qy" :typeName="typeName" :fxdjs="fxdjs" />
|
|
|
</basic-modal>
|
|
|
-
|
|
|
- <basic-modal top="120px" ref="autoManageModal" name="自主管理">
|
|
|
+
|
|
|
+ <basic-modal top="120px" ref="autoManageModal" name="自主管理">
|
|
|
<zzglModul :qy="qy" />
|
|
|
</basic-modal>
|
|
|
</div>
|
|
|
@@ -67,14 +90,11 @@ import RiskWarning from "./components/RiskWarning.vue";
|
|
|
import WisdomFire from "./components/WisdomFire.vue";
|
|
|
import FireIndex from "./components/FireIndex/index.vue";
|
|
|
import BasicInfoModalContent from "./components/BasicInfoModalContent.vue";
|
|
|
-import SearchBox from '@/components/SearchBox.vue';
|
|
|
+import SearchBox from "@/components/SearchBox.vue";
|
|
|
import zzglModul from "./components/zzglModul.vue";
|
|
|
-import { totaldata,getJqdt,getZxgjtj ,getJrjzsbs} from "@/api/index.js";
|
|
|
+import { totaldata, getJqdt, getZxgjtj, getJrjzsbs } from "@/api/index.js";
|
|
|
import { fxfb } from "@/api/risk";
|
|
|
-import {
|
|
|
- formatCityData,
|
|
|
- createMapChartWindowInfo
|
|
|
- } from '@/utils'
|
|
|
+import { formatCityData, createMapChartWindowInfo } from "@/utils";
|
|
|
|
|
|
export default {
|
|
|
name: "HomePage",
|
|
|
@@ -89,75 +109,98 @@ export default {
|
|
|
FireIndex,
|
|
|
BasicInfoModalContent,
|
|
|
SearchBox,
|
|
|
- zzglModul
|
|
|
+ zzglModul,
|
|
|
},
|
|
|
- data(){
|
|
|
- return{
|
|
|
- riskList:[],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ riskList: [],
|
|
|
// 传参
|
|
|
- qy:'重庆市',
|
|
|
- params:{
|
|
|
- pageSize:100,
|
|
|
- pageNum:1,
|
|
|
+ qy: "重庆市",
|
|
|
+ params: {
|
|
|
+ pageSize: 100,
|
|
|
+ pageNum: 1,
|
|
|
},
|
|
|
- PoliceList:[],
|
|
|
- frieList:{},
|
|
|
- iotList:{},
|
|
|
+ PoliceList: [],
|
|
|
+ frieList: {},
|
|
|
+ iotList: {},
|
|
|
fireIndexType: 0,
|
|
|
- heatMap:[]
|
|
|
- }
|
|
|
+ heatMap: [],
|
|
|
+ typeName: "",
|
|
|
+ fxdjs:''
|
|
|
+ };
|
|
|
},
|
|
|
- watch:{
|
|
|
- qy(){
|
|
|
- this.getList()
|
|
|
- this.getFireList()
|
|
|
- this.getIotList()
|
|
|
- }
|
|
|
+ watch: {
|
|
|
+ qy() {
|
|
|
+ this.getList();
|
|
|
+ this.getFireList();
|
|
|
+ this.getIotList();
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
showLabel(params) {
|
|
|
- return createMapChartWindowInfo({
|
|
|
- title: params.name
|
|
|
- }, () => {
|
|
|
- let res = `风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`;
|
|
|
- return res;
|
|
|
- });
|
|
|
+ return createMapChartWindowInfo(
|
|
|
+ {
|
|
|
+ title: params.name,
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ let res = `风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`;
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ showTc(val) {
|
|
|
+ if (val) {
|
|
|
+ this.typeName = val;
|
|
|
+ this.showModal("basicInfoModal");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showFxyj(val){
|
|
|
+ this.fxdjs=val
|
|
|
+ this.showModal("basicInfoModal");
|
|
|
},
|
|
|
openBasicModal() {
|
|
|
this.showModal("basicInfoModal");
|
|
|
},
|
|
|
// 风险预警
|
|
|
- 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({
|
|
|
+ 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"
|
|
|
+ type: "error",
|
|
|
});
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
selectItemHandler(idx) {
|
|
|
- this.fireIndexType = idx
|
|
|
+ this.fireIndexType = idx;
|
|
|
},
|
|
|
- getStaic(){
|
|
|
- getJqdt(this.params).then(res=>{
|
|
|
- this.PoliceList=res.data.rows
|
|
|
- })
|
|
|
+ getStaic() {
|
|
|
+ getJqdt(this.params).then((res) => {
|
|
|
+ this.PoliceList = res.data.rows;
|
|
|
+ });
|
|
|
},
|
|
|
//智慧消防
|
|
|
- getFireList(){
|
|
|
- getZxgjtj({...this.params,name:this.qy==="重庆市"?"":this.qy}).then(res=>{
|
|
|
- this.frieList=res.data.rows[0]
|
|
|
- })
|
|
|
+ getFireList() {
|
|
|
+ getZxgjtj({
|
|
|
+ ...this.params,
|
|
|
+ name: this.qy === "重庆市" ? "" : this.qy,
|
|
|
+ }).then((res) => {
|
|
|
+ this.frieList = res.data.rows[0];
|
|
|
+ });
|
|
|
},
|
|
|
// 物联网栋数
|
|
|
- getIotList(){
|
|
|
- getJrjzsbs({...this.params,name:this.qy==="重庆市"?"":this.qy}).then(res=>{
|
|
|
- this.iotList=res.data.rows[0]
|
|
|
- })
|
|
|
+ getIotList() {
|
|
|
+ getJrjzsbs({
|
|
|
+ ...this.params,
|
|
|
+ name: this.qy === "重庆市" ? "" : this.qy,
|
|
|
+ }).then((res) => {
|
|
|
+ this.iotList = res.data.rows[0];
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
openAutoManageModal() {
|
|
|
@@ -168,24 +211,24 @@ export default {
|
|
|
pageNum: 1,
|
|
|
pageSize: 100,
|
|
|
}).then((res) => {
|
|
|
- let tempData = res.data.rows.filter(
|
|
|
- (item) => item.fxdj === '较大风险'
|
|
|
+ let tempData = res.data.rows.filter((item) => item.fxdj === "较大风险");
|
|
|
+ console.log(tempData);
|
|
|
+ this.heatMap = formatCityData(
|
|
|
+ tempData.map((item) => ({
|
|
|
+ name: item.qy,
|
|
|
+ value: item.sl,
|
|
|
+ }))
|
|
|
);
|
|
|
- console.log(tempData)
|
|
|
- this.heatMap = formatCityData(tempData.map(item => ({
|
|
|
- name: item.qy,
|
|
|
- value: item.sl
|
|
|
- })))
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
- created(){
|
|
|
- this.getList()
|
|
|
- this.getStaic()
|
|
|
- this.getFireList()
|
|
|
- this.getIotList()
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ this.getStaic();
|
|
|
+ this.getFireList();
|
|
|
+ this.getIotList();
|
|
|
this.loadMapData();
|
|
|
- }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
