123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323 |
- <template>
- <div style="padding: 0px 35px; display: flex; justify-content: space-between">
- <div>
- <border-panel
- height="302px"
- style="margin-bottom: 6px; cursor: pointer"
- title="基础信息"
- @click="openBasicModal"
- >
- <BasicInfo :qy="qy" @showTc="showTc" @UnitType="UnitType" />
- </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">
- <AutonomousManagement @click-item="onClickAutonomousManagementItemHandler" :qy="qy" />
- </border-panel>
- </div>
- <div class="display: flex;">
- <div class="map" style="position: relative">
- <MapChartsCategory
- :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>
- <border-panel
- title="警情动态"
- width="938px"
- height="321px"
- :header-type="1"
- >
- <AlarmingSituationDynamics :qx="qy" :PoliceList="PoliceList" />
- </border-panel>
- </div>
- </div>
- <div>
- <border-panel
- height="311px"
- style="margin-bottom: 6px; cursor: pointer"
- header-cursor="pointer"
- title="风险预警"
- @click-header="openBasicModal"
- >
- <RiskWarning :riskList="riskList" @showFxyj="showFxyj" :qy="qy" />
- <template #ext-header>
- <img src="../../assets/images/dd_wh.png" alt="" @click="getShoeInfo('whFxModal')">
- </template>
- </border-panel>
- <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"
- />
- </template>
- </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>
- <!-- 风险问号弹窗 -->
- <basic-modal top="30px" ref="whFxModal" name="安全风险分级规则" width="90%">
- <div style="display: flex; justify-content: center">
- <img src="../../assets/images/dd-exp-fx.png" />
- </div>
- </basic-modal>
- </div>
- </template>
- <script>
- import BasicInfo from "./components/BasicInfo.vue";
- import AlarmingSituationDynamics from "./components/AlarmingSituationDynamics/index.vue";
- import AutonomousManagement from "./components/AutonomousManagement/index.vue";
- import HiddenDangerDetection from "./components/HiddenDangerDetection/index.vue";
- import MapChartsCategory from "./components/MapChartsCategory.vue";
- 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 zzglModul from "./components/zzglModul.vue";
- import { totaldata, getJqdt, getZxgjtj, getJrjzsbs, getDtskgzList } from "@/api/index.js";
- import { fxfb } from "@/api/risk";
- import { formatCityData, createMapChartWindowInfo } from "@/utils";
- export default {
- name: "HomePage",
- components: {
- BasicInfo,
- WisdomFire,
- AlarmingSituationDynamics,
- MapChartsCategory,
- RiskWarning,
- AutonomousManagement,
- HiddenDangerDetection,
- FireIndex,
- BasicInfoModalContent,
- SearchBox,
- zzglModul,
- },
- data() {
- return {
- riskList: [],
- // 传参
- qy: "重庆市",
- params: {
- pageSize: 100,
- pageNum: 1,
- },
- PoliceList: [],
- frieList: {},
- iotList: {},
- fireIndexType: 0,
- heatMap: [],
- defaultModel: {},
- mapType: {
- "红色": 90,
- "橙色": 70,
- "黄色": 50,
- "蓝色": 30,
- "绿色": 10
- },
- queryParams: {
- glxs: "", //管理形式
- wbxs: "", //维保形式
- dxjj: "" //大修基金
- }
- }
- },
- watch: {
- qy() {
- this.getList();
- this.getFireList();
- this.getIotList();
- },
- },
- methods: {
- onClickAutonomousManagementItemHandler(data) {
- const temp = {
- glxs: "",
- wbxs: "",
- dxjj: "",
- }
- switch (data.index) {
- case 0:
- temp.glxs = data.value
- break;
- case 1:
- temp.wbxs = data.value
- break;
- case 2:
- temp.dxjj = data.value
- break;
- }
- this.queryParams = temp
- this.showModal("autoManageModal")
- },
- showLabel(params) {
- return createMapChartWindowInfo(
- {
- title: params.name,
- },
- () => {
- 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></td>
- </tr>
- <tr>
- <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>
- </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>
- </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>
- </tr>
- </table>
- `
- return res;
- }
- );
- },
- showTc(val) {
- if (val) {
- this.defaultModel = {
- qy: this.qy,
- dl: val
- }
- this.showModal("basicInfoModal");
- }
- },
- showFxyj(val){
- this.defaultModel = {
- qy: this.qy,
- fxdjYs: val
- }
- this.showModal("basicInfoModal");
- },
- openBasicModal() {
- this.showModal("basicInfoModal");
- },
- UnitType(name){
- const params={
- qy:this.qy,
- }
- if (name == "超高层建筑总数(栋)") {
- params.gd = "100米以上";
- }
- if (name == "2000年底前老旧住宅建筑总数(栋)") {
- params.jcnd = "2000年前";
- params.dl = "住宅建筑";
- }
- if (name == "2000年底前老旧商业混合体建筑总数(栋)") {
- params.jcnd = "2000年前";
- params.dl = "公共建筑";
- }
- this.defaultModel = params
- this.showModal("basicInfoModal");
- },
- 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"
- });
- })
- },
- selectItemHandler(idx) {
- this.fireIndexType = idx;
- },
- 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];
- });
- },
- // 物联网栋数
- getIotList() {
- getJrjzsbs({
- ...this.params,
- name: this.qy === "重庆市" ? "" : this.qy,
- }).then((res) => {
- this.iotList = res.data.rows[0];
- });
- },
- openAutoManageModal() {
- this.showModal("autoManageModal");
- },
- loadMapData() {
- getDtskgzList({
- pageNum: 1,
- pageSize: 42,
- }).then((res) => {
- let tempData = res.data.rows;
- this.heatMap = formatCityData(
- tempData.map((item) => ({
- name: item.qx,
- value: this.mapType[item.分区颜色],
- meta: item
- }))
- );
- });
- },
- },
- created() {
- this.getList();
- this.getStaic();
- this.getFireList();
- this.getIotList();
- this.loadMapData();
- },
- };
- </script>
- <style scoped>
- .map {
- flex: 1;
- }
- </style>
|