fire-mh/src/views/index.vue

<template>
    <div class="page">
        <div class="noHas" v-if="!has">
            暂无数据权限
        </div>
        <div class="contentBox" v-if="has">
            <div class="leftBox" v-if="leftBtn">
                <div class="box">
                    <basicInfo />
                    <complaintInfo />
                    <matterInfo />
                </div>
                <div class="box">
                    <zhiFaInfo />
                    <personnelInfo />
                    <xinZhengInfo />
                </div>
            </div>
            <div class="centerBox" style="width: 100%">
                <div :class="leftBtn ? 'leftBtn btnW' : 'leftBtn0 btnW'" @click="leftBtnClick()">
                    <img src="@/assets/img/svg/left.svg" alt="" class="img" />
                </div>
                <el-col class="centerContent" id="mapF"></el-col>
    
                <div :class="rightBtn ? 'rightBtn btnW' : 'rightBtn0 btnW'" @click="rightBtnClick()">
                    <img src="@/assets/img/svg/left.svg" alt="" class="img" />
                </div>
    
                <div class="mapTips_type">
                    <img src="@/assets/img/svg/danweitop.svg" alt="" class="img" />
                    <div class="content">
                        <p>街镇筛选</p>
                        <el-select class="mtb-12" v-model="stroes.$state.streetTown" placeholder="请选择街镇" @change="checkStreetTown">
                            <el-option v-for="item in stroes.$state.streetTownList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                        <p>类型筛选</p>
                        <div class="setstyle" style="padding: 4px 0 !important;">
                            <el-tree
                                :data="treeData"
                                show-checkbox
                                node-key="id"
                                :default-expanded-keys="[0, 1]"
                                :default-checked-keys="[1]"
                                :props="defaultProps"
                                ref="tree"
                                class="custom-tree-style"
                                @check-change="handleCheckChange"
                                >
                            </el-tree>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rightBox" v-if="rightBtn">
                <div class="box" style="margin-left:5px;">
                    <riskInfo />
                    <xunJianInfo />
                    <listingInfo />
                </div>
                <div class="box">
                    <fireInfo />
                    <IOTInfo />
                    <videoInfo />
                </div>
            </div>
            <!-- 消防安全重点单位弹框 -->
            <transition name="el-fade-in-linear">
                <div class="tableTooltipwt2" v-if="tk">
                    <img src="~@a/img/icon/close.png" alt="" class="close" @click="closeTk" />
                    <el-col class="mk">
                        <el-row>
                            <el-col>
                                <span class="color2">单位名称：</span>
                                <span class="color1">{{ tkData.companyName }}</span>
                            </el-col>
                            <el-col>
                                <span class="color2">单位类型：</span>
                                <span class="color1">重点单位</span>
                            </el-col>
                            <el-col>
                                <span class="color2">地址：</span>
                                <span class="color1">{{ tkData.address }}</span>
                            </el-col>
                            <el-col v-if="tkData.person3">
                                <span class="color2">单位联系人：</span>
                                <span class="color1">{{ tkData.person3 }}</span>
                            </el-col>
                            <el-col v-if="tkData.phone3" >
                                <span class="color2">单位联系人电话：</span>
                                <span class="color1">{{ tkData.phone3 }}</span>
                            </el-col>
                            <el-col v-if="tkData.person1">
                                <span class="color2">消防安全责任人：</span>
                                <span class="color1">{{ tkData.person1 }}</span>
                            </el-col>
                            <el-col v-if="tkData.phone1">
                                <span class="color2">消防安全责任人电话：</span>
                                <span class="color1">{{ tkData.phone1 }}</span>
                            </el-col>
                            <el-col v-if="tkData.person2">
                                <span class="color2">消防安全管理人：</span>
                                <span class="color1">{{ tkData.person2 }}</span>
                            </el-col>
                            <el-col v-if="tkData.phone2" style="border-bottom: 1px solid #fff; padding-bottom: 10px">
                                <span class="color2">消防安全管理人电话：</span>
                                <span class="color1">{{ tkData.phone2 }}</span>
                            </el-col>
                            
                            <el-col style="margin-top: 6px">
                                <span class="color1" style="margin-left: 0">企业消防综合评估</span>
                                <span class="color1" style="float: right"
                                    >综合得分：{{
                                        tkData.fireRisk + tkData.buildIntegrity + tkData.lawEnforce + tkData.selfManage + tkData.facilityStatus
                                            ? (tkData.fireRisk + tkData.buildIntegrity + tkData.lawEnforce + tkData.selfManage + tkData.facilityStatus).toFixed(2)
                                            : 0
                                    }}
                                    分</span
                                >
                            </el-col>
                            <table border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <th>指数</th>
                                        <th>建筑整体指数</th>
                                        <th>火灾风险指数</th>
                                        <th>监督执法指数</th>
                                        <th>自主管理指数</th>
                                        <th>设施状况指数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>得分</td>
                                        <td>{{ tkData.fireRisk }}</td>
                                        <td>{{ tkData.buildIntegrity }}</td>
                                        <td>{{ tkData.lawEnforce }}</td>
                                        <td>{{ tkData.selfManage }}</td>
                                        <td>{{ tkData.facilityStatus }}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <el-col style="margin-top: 6px" v-if="tkData.reformPart">
                                <span class="color1" style="margin-left: 0">消防整改情况</span>
                            </el-col>
                            <el-col v-if="tkData.reformPart">
                                <span class="color1" style="margin-left: 0">编号：{{ tkData.reformCode }}</span>
                                <span class="color1" style="float: right">整改期限：{{ tkData.limitTime ? tkData.limitTime.split("T")[0] + " " + tkData.limitTime.split("T")[1] : "" }}</span>
                            </el-col>
                            <table border="0" cellspacing="0" cellpadding="0" v-if="tkData.reformPart">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>整改项</th>
                                        <th>原因</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in tkData.reformPart.data" :key="index">
                                        <td>{{ index + 1 }}</td>
                                        <td>{{ item.item }}</td>
                                        <td>{{ item.reason }}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div style="margin-top: 40px" v-if="tkData.reformStatus != 0">
                                <el-steps
                                    :active="tkData.reformStatus == 1 ? 1 : tkData.reformStatus == 2 || tkData.reformStatus == 3 ? 1 : tkData.reformStatus == 4 || tkData.reformStatus == 5 ? 2 : 0"
                                    align-center
                                >
                                    <el-step title="已接收" :description="tkData.receivedTime.replace('T', ' ')"></el-step>
                                    <el-step
                                        :title="tkData.reformStatus == 2 ? '整改中' : tkData.reformStatus == 3 || tkData.reformStatus == 4 || tkData.reformStatus == 5 ? '整改完成' : '整改中'"
                                        :description="tkData.reformTime.replace('T', ' ')"
                                    ></el-step>
                                    <el-step
                                        :title="
                                            tkData.reformStatus == 1 || tkData.reformStatus == 2 || tkData.reformStatus == 3
                                                ? '待审核'
                                                : tkData.reformStatus == 4
                                                ? '审核不通过'
                                                : tkData.reformStatus == 5
                                                ? '审核通过'
                                                : ''
                                        "
                                        :description="tkData.reviewTime.replace('T', ' ')"
                                    ></el-step>
                                </el-steps>
                            </div>
                            <div style="margin: 10px auto" v-if="tkData.companyName == '上海虹桥国际特商物流港'">
                                <el-button type="primary" size="small" style="background: none; border-radius: 4px; border: 1px solid #73fbfd; height: 30px; padding: 0 6px !important; margin: 10px 0 0"
                                    ><a href="http://file.usky.cn/statics/202303/20232D91E7B3D14C346BC9F009FA0B76FA5BF.pdf" target="_blank" style="color: #fff; text-decoration: none"
                                        >&nbsp;&nbsp;查看报告&nbsp;&nbsp;</a
                                    ></el-button
                                >
                            </div>
                        </el-row>
                    </el-col>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
import basicInfo from "@c/basicInfo/index"; //基础信息
import complaintInfo from "@c/complaintInfo/index"; //投诉类型排名
import matterInfo from "@c/matterInfo/index"; //本年度重点事项推进情况

import zhiFaInfo from "@c/zhiFaInfo/index"; //执法情况
import personnelInfo from "@c/personnelInfo/index"; //人员统计
import xinZhengInfo from "@c/xinZhengInfo/index"; //行政许可


import riskInfo from "@c/riskInfo/index"; //街镇消防风险评估情况
import xunJianInfo from "@c/xunJianInfo/index"; //企业自主巡检情况
import listingInfo from "@c/listingInfo/index"; //挂牌督改情况

import fireInfo from "@c/fireInfo/index"; //消防情况
import IOTInfo from "@c/IOTInfo/index"; //街镇物联设备情况
import videoInfo from "@c/videoInfo/index"; //执法记录仪情况

import linstener from "@c/mixins/linstener";
import map from "@c/mixins/map-data32_9";

import { encrypt, decrypt } from "@/utils/jsencrypt"; //加密解密
export default {
    components: { 
        basicInfo, complaintInfo, matterInfo,
        zhiFaInfo, personnelInfo, xinZhengInfo,
        riskInfo, xunJianInfo, listingInfo,
        fireInfo, IOTInfo, videoInfo
    },
    mixins: [linstener, map],
    data() {
        return {
            selectTreeArr: [],
            selectTreeValue: [],
            treeData: [
                {
                    id: 0,
                    label: '单位信息',
                    children: [
                        { id: 1, label: "重点单位" },
                        { id: 2, label: "一般单位" },
                        { id: 3, label: "九小场所" },
                        { id: 10, label: "大型综合体" },
                    ]
                },
                {
                    id: 101,
                    label: '厂房、仓库',
                },
                // {
                //     id: 101,
                //     label: '执法记录仪',
                // },
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            axiosNum:0,
            leftBtn:true,
            rightBtn:true,
            

            tk:false,//消防安全重点单位弹框
            tkData:[],//消防安全重点单位数据
            has:false,//是否有权限
            
        };
    },
    created() {

    },
    mounted() {
        this.initMap();
        setTimeout(() => {
            this.sadian([1]);
        },3000)
        if(decrypt(this.$route.query?.token) == "mhToken"){
            this.has = true;
        }
    },
    methods: {

        // 地图区域操作
            leftBtnClick() {
                this.leftBtn = !this.leftBtn;
            },
            rightBtnClick() {
                this.rightBtn = !this.rightBtn
            },
            /**
             * 撒点街镇选择测绘院
             */
            checkStreetTown() {
                let data = undefined;
                for (let i = 0; i < this.stroes.$state.mhjz.length; i++) {
                    if (
                        this.stroes.$state.streetTown == this.stroes.$state.mhjz[i].streetTown
                    ) {
                        data = this.stroes.$state.mhjz[i];
                        break;
                    }
                }
                if (!this.stroes.$state.streetTown) {
                    data = this.stroes.$state.mhjz[0];
                }
                this.streetTownSwitch(data);
            },
            /**
             * 撒点类型选择
             */
            handleCheckChange(){
                this.sadian(this.$refs.tree.getCheckedKeys())
            },
        /**
         * 撒点信息
         * @param id 
         * @param code 
         */
        async sadian(params,code) {
            if(JSON.stringify(params) == '[]' || JSON.stringify(params) == '[0]'){
                this.addMarker([], "index");    
            }else{
                let arr = [];
                this.axiosNum= 0
                for(let i=0;i<params.length;i++){
                    if(params[i]>0){
                        this.axiosNum ++
                    }
                }
                var axiosSub = 0
                for(let i=0;i<params.length;i++){
                    if(params[i]>0){
                        if(params[i] < 10){//单位信息
                            await this.$axios
                            .get(
                                this.$api.selfManagement.mapList +
                                    "?" +
                                    this.$qs.stringify({
                                        streetTown: this.stroes.$state.streetTown,
                                        companyType: params[i],
                                    })
                            )
                            .then((res) => {
                                if (res.data.length > 0) {
                                    //点分布
                                    let data = res.data;
                                    for (let i = 0; i < data.length; i++) {
                                        arr.push({
                                            id: data[i].id ? data[i].id : null,
                                            type: data[i].companyTypeName ? data[i].companyTypeName : null,
                                            type1: data[i].companyTypeName ? data[i].companyTypeName : null,
                                            address: data[i].address ? data[i].address : null,
                                            companyName: data[i].companyName ? data[i].companyName : null,
                                            streetTown: data[i].streetTown ? data[i].streetTown : null,
                                            longitude: data[i].longitude,
                                            latitude: data[i].latitude,
                                            companyId: data[i].companyId,
                                            linkPhone: data[i].linkPhone ? data[i].linkPhone : null,
                                        });
                                    }
                                } 
                                axiosSub ++
                                if(axiosSub == this.axiosNum){
                                    this.addMarker(arr, "index");
                                }
                            });
                        }
                        if(params[i] == 10){//大型综合体
                            this.$axios
                            .post(this.$api.water.baseGgpFacilityList, {
                                facilityType: [2, 3],
                            })
                            .then((res) => {
                                // 2 五万
                                // 3 三至五万
                                for (let i = 0; i < res.data.length; i++) {
                                    arr[i] = {};
                                    arr[i].address = res.data[i].address;
                                    arr[i].facilityName = res.data[i].facilityName;
                                    arr[i].extendData = res.data[i].extendData;
                                    arr[i].latitude = res.data[i].latitude;
                                    arr[i].longitude = res.data[i].longitude;
                                    arr[i].type = "大型综合体";
                                    arr[i].type1 = "大型综合体";
                                    if (res.data[i].id == 48) {
                                        //龙湖天街试点
                                        arr[i].facilityType = "lhtj";
                                    } else {
                                        arr[i].facilityType = res.data[i].facilityType;
                                    }
                                }
                                axiosSub ++
                                if(axiosSub == this.axiosNum){
                                    this.addMarker(arr, "index");
                                }
                            });
                        }
                        if(params[i] == 101){//厂房、仓库
                            this.$axios
                            .get(
                                this.$api.water.getWarehouse +
                                    "?" +
                                    this.$qs.stringify({
                                        type: 1,
                                pageNum:1,
                                pageSize:1000,
                                    })
                            )
                            .then((res) => {
                                for (let i = 0; i < res.data.records.length; i++) {
                                    arr[i] = {};
                                    arr[i].address = res.data.records[i].mhBuild.address;
                                    arr[i].facilityName = res.data.records[i].mhCompany.companyName;
                                    arr[i].facilityType = res.data.records[i].mhCompany.companyStatus;
                                    arr[i].qrcode = res.data.records[i].mhCompany.qrcode;
                                    arr[i].creditCode = res.data.records[i].mhCompany.creditCode;
                                    arr[i].companyLegal = res.data.records[i].mhCompany.companyLegal;
                                    arr[i].safetyManager = res.data.records[i].mhCompany.safetyManager;
                                    arr[i].phone = res.data.records[i].mhCompany.phone;
                                    arr[i].safetyManager = res.data.records[i].mhCompany.safetyManager;
                                    arr[i].companyArea = res.data.records[i].mhCompany.companyArea;
                                    arr[i].street = res.data.records[i].mhCompany.street;
                                    arr[i].state = res.data.records[i].mhCompany.state;
                                    arr[i].isExamine = res.data.records[i].mhCompany.isExamine;
                                    arr[i].status = res.data.records[i].mhCompany.status;
                                    arr[i].height = res.data.records[i].mhBuild.height;
                                    arr[i].buildNature = res.data.records[i].mhBuild.buildNature;
                                    arr[i].latitude = res.data.records[i].mhBuild.lat;
                                    arr[i].longitude = res.data.records[i].mhBuild.lon;
                                    arr[i].type = "厂房、仓库";
                                    arr[i].type1 = "厂房、仓库";
                                }
                                axiosSub ++
                                if(axiosSub == this.axiosNum){
                                    this.addMarker(arr, "index");
                                }
                            });
                        }
                        
                        
                    }
                }
            }

        },
        
        //重点单位弹框
            /**
             * @消防安全重点单位撒点详情
             * @api接口请求
             */
            async zddwSd(val) {
                console.log(val)
                let res = await this.$axios.get(
                    this.$api.selfManagement.scatterData +
                        "?" +
                        this.$qs.stringify({
                            companyId: val,
                        })
                );
                if (res.data) {
                    this.tkData = res.data[0];
                    this.tkData.person1 = val.person1
                    this.tkData.person2 = val.person2
                    this.tkData.person3 = val.person3
                    this.tkData.phone1 = val.phone1
                    this.tkData.phone2 = val.phone2
                    this.tkData.phone3 = val.phone3
                    this.tk = true;
                }
            },
            /**
             * 消防安全重点单位关闭
             */
            closeTk() {
                this.tk = false;
            },
    },
    watch: {
        // "stores.$state.gridData": function (newValue, oldValue) {
        //     if (this.gridStatus == 19) {
        //         this.grid(19, newValue.name, newValue.position);
        //     }
        //     if (this.gridStatus == 15) {

        //         this.grid(15, newValue.name, newValue.position);
        //         this.staticsSd(newValue.name,2,'')
        //         setTimeout(()=>{
        //             this.diversionArea2State = false
        //         },1000)
        //     }
        //     if (this.gridStatus == 16) {
        //         this.grid(16, newValue.name, newValue.position,null,3);
        //     }
        // },

        // "stores.$state.jkspData": function (newValue, oldValue) {
        //     this.jkspStatus = true
        //     this.Message.name = newValue.children[0][1]
        //     this.Message.videoId = newValue.id
        //     this.Message.videoUrl = newValue.url
        //     // "http://videocdn.didano.com/school765class0channelId2761namedingdangm/playlist.m3u8"
        //     this.play()
        // },
        "stores.$state.zddwId": function (newValue, oldValue) {
            this.zddwSd(newValue); //重点单位
        },
     

    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/color.scss";
.contentBox {
    .box {
        width:calc(50% - 15px);
        float:left;
        >div{
            width:100%;
            height:calc(89vh / 3 );
            overflow: auto;
            margin:5px 0 18px;
        }
    }
    .box:nth-child(2){
        margin-left:25px !important;
    }
    .centerBox{
        .mapTips_type {
            width: 10%;
            height: auto;
            background: $background-color-theme4;
            position: fixed;
            bottom: 1.48vh;
            right: 7.2rem;
            color: #fff !important;
            font-size: 0.18rem;
            p {
                color: #019fb7;
            }
            .content {
                padding: 1.388vh 0.25rem;
                color: #fff !important;
            }
            .img {
                width: 100%;
                height: 0.37vh;
                margin-top: -0.37vh;
                position: absolute;
            }
        }
    
    }
}

.tableTooltipwt2 {
    width: 6rem;
    background: transparent;
    border-radius: 0.05rem;
    box-shadow: inset 0 0 1px 0.0125rem rgba(115, 251, 253, 1);
    background: rgba(0, 29, 49, 0.5);
    font-size: 0.2rem;
    padding: 0.1875rem;
    position: fixed;
    top: 140px;
    right: 600px;
    z-index: 10000;
    .close {
        width: 40px;
        height: 40px;
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 10000;
        display: block;
    }
    .tableContent {
        p {
            @include color_primary($color-primary1);
        }

        .el-col {
            margin-top: 0.05rem;
            line-height: 0.3rem;
            text-overflow: ellipsis !important;
            white-space: normal !important;
        }
        .mk {
            margin-top: 0px;
        }
    }
}
.color1 {
    @include color_primary($color-primary3);
    margin-left: 10px;
}
.color2 {
    @include color_primary($color-primary1);
}
table {
    width: 100%;
    text-align: center;
    color: #fff;
    border: 1px solid #fff;
    font-size: 20px;
}

table thead tr th {
    padding: 5px 0px;
    font-weight: 400;
    border: 1px solid #fff;
}

table tbody tr td {
    padding: 5px 0px;
}

table tbody tr:nth-child(2n) td {
    //     background-color: lightblue;
}

td {
    border: 0.5px solid #fff;
}
.checkRate{
    position: absolute;
    color:#fff;
    right:50px;
    top:80px;
    font-size: 0.25rem;
    img{
        position: absolute;
        width:80px;
        top:-24px;
        right:-14px;
        animation: rotoImg 4s linear infinite;
        // transform:skew(70deg)
    }
}
@keyframes rotoImg{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    } 
}
.noHas{
    position: absolute;
    width:20%;
    left:40%;
    top:40%;
    height:80px;
    line-height: 80px;
    border-radius: 10px;
    background: $background-color-theme4;
    color:#fff;
    font-size: 24px;
    text-align: center;
}
</style>
<style lang="scss">
.el-input__suffix{
    top:5px !important;
}
.setstyle {
  height: 300px !important;
  padding: 4px 0 !important;
  .el-tree{
    background: rgba(0, 66, 97, 0.9);
    color:#fff;
    font-size: 26px;
  }
  .el-checkbox__inner:after {
    width:8px;
    height:8px;
    margin:4px 0 0 2px;
  }
  .el-checkbox__inner:before {
    width:20px;
    margin:4px 0 0 0px;
  }
  .el-tree .el-tree-node:hover {
    background-color: rgba(0, 66, 97, 1); /* 自定义的背景颜色 */
  }
  .el-tree-node__content{
    margin-top:20px;
    .el-checkbox__inner{
        
        width:24px;
        height:24px;
    }
    .el-tree-node__label{
        font-size: 24px !important;
    }
  }


}
.el-tree-node__content:hover,.el-tree-node__content:focus{
    background-color: rgba(0, 66, 97, 1) !important; /* 自定义的背景颜色 */
}
.el-tree-node:focus{
    background-color: rgba(0, 66, 97, 1) !important; /* 自定义的背景颜色 */
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    background-color: rgba(0, 66, 97, 1) !important; /* 自定义的背景颜色 */
}
</style>