fire-mh/src/views/security-plan.vue

<template>
    <el-row class="contentBox">
        <transition name="el-fade-in-linear">
            <el-col class="leftBox" v-show="stroes.$state.leftBtn">
                <div class="leftTop">
                    <h4>疏导区基本情况</h4>
                    <div class="leftTopContent2">
                        <el-row>
                            <div v-for="(item,index) in diversionArea" :key="index">
                                <p>{{ item.name }}</p>
                                <p><strong><CountTo :startVal='0' :endVal='item.value' :duration='5000'> {{   item.value || 0 }}</CountTo></strong>{{ item.unit }}</p>
                            </div>
                        </el-row>
                    </div>
                </div>
                <div class="rightCenter">
                    <h4>执勤战备力量部署</h4>
                    <div class="rightTopContent">
                        <el-table :data="tableData2" class="transparentTableRow" height="100%" :empty-text="dataNo">
                            <el-table-column type="expand">
                                <template #default="props">
                                    <template v-if="props.row.children">
                                        <template v-for="(item, ind) in props.row.children" :key="ind">
                                            <el-row class="tableExpendTitle" style="margin-top: 10px">
                                                状态：{{ item.carStatus }}（{{
                                                    item.equipTypeName
                                                    ? item.equipTypeName +
                                                    "，"
                                                    : ""
                                                }}{{ item.renyuanNum }}人）
                                            </el-row>
                                            <el-row class="tableExpendcontent">
                                                <el-col>
                                                    <div>
                                                        车牌号：<span style="
                                                                color: #6ff3f6;
                                                            ">{{
                                                                item.cphm
                                                            }}</span>
                                                    </div>
                                                </el-col>
                                                <el-col v-if="item.zhy" :span="12">
                                                    <div>
                                                        指挥员：<span style="
                                                                color: #6ff3f6;
                                                            ">{{
                                                                item.zhy
                                                            }}</span>
                                                    </div>
                                                </el-col>
                                                <el-col v-if="item.txy" :span="12">

                                                    <div>
                                                        通讯员：<span style="
                                                                color: #6ff3f6;
                                                            ">{{
                                                                item.txy
                                                            }}</span>
                                                    </div>
                                                </el-col>
                                                <el-col v-if="item.jsy" :span="12">

                                                    <div>
                                                        驾驶员：<span style="
                                                                color: #6ff3f6;
                                                            ">{{
                                                                item.jsy
                                                            }}</span>
                                                    </div>
                                                </el-col>
                                                <el-col v-if="item.zsry" :span="24">

                                                    <div>
                                                        战士人员：<span style="
                                                                color: #6ff3f6;
                                                            ">{{
                                                                item.zsry
                                                            }}</span>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </template>
                                    </template>
                                </template>
                            </el-table-column>
                            <el-table-column show-overflow-tooltip v-for="item in headerData2" :key="item.prop"
                                :prop="item.prop" align="center" min-width="20" :label="item.name">
                                <template v-if="item.prop === 'car'" #default="scope">
                                    <span style="color: #6ff3f6">{{
                                        scope.row.car
                                    }}</span>
                                </template>
                                <template v-if="item.prop === 'personnel'" #default="scope">
                                    <span style="color: #6ff3f6">{{
                                        scope.row.personnel
                                    }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="leftCenter">
                    <h4 class="h4Top">接警处置情况</h4>
                    <category ref="category" v-show="category" :dataMap="reportComplaintList.map((val, ind) => val.value)"
                        :xData="reportComplaintList.map((val, ind) => val.name)" :isSlice="10" :width="40" color="#73FBFD"
                        @echartsClick="categoryClick"></category>
                    <div @click="goBack" class="return" v-if="!category">
                        <div class="returnText">返回</div>
                    </div>
                </div>
                <div class="leftBotContent2">
                    <el-table v-if="!category" :data="tableData" class="transparentTableRow" height="100%" ref="reportTable"
                        @mouseenter="autoScroll(true)" @mouseleave="autoScroll()">
                        <el-table-column v-for="item in headerData" show-overflow-tooltip :key="item.prop" :prop="item.prop"
                            align="center" min-width="20" :label="item.name">
                            <template #default="scope">
                                {{
                                    item.prop === "type"
                                    ? ""
                                    : item.prop === "status"
                                        ? scope.row[item.prop] == 1
                                            ? "可用"
                                            : "不可用"
                                        : scope.row[item.prop]
                                }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </transition>
        <transition name="el-fade-in-linear">
            <el-col class="centerBox" style="width: 100%">
                <div :class="stroes.$state.leftBtn ? 'leftBtn btnW' : 'leftBtn0 btnW'
                    " @click="stroes.leftBtnClick()">
                    <img src="@/assets/img/svg/left.svg" alt="" class="img" />
                </div>
                <el-col class="centerContent" id="mapF"></el-col>

                <div :class="stroes.$state.rightBtn
                        ? 'rightBtn btnW'
                        : 'rightBtn0 btnW'
                    " @click="stroes.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>
                        <div class="selectType">
                            <div @click="checkboxChange(0)" :class="checkedArray.checkedData[0] == 0
                                    ? 'checkTypeSelect'
                                    : ''
                                ">
                                <img :src="stores.sadianIcon.xfc" alt="" />
                                <span>车辆</span>
                            </div>
                            <div @click="checkboxChange(1)" :class="checkedArray.checkedData[0] == 1
                                    ? 'checkTypeSelect'
                                    : ''
                                ">
                                <img :src="stores.sadianIcon.lsjq" alt="" />
                                <span>历史警情</span>
                            </div>
                            <div @click="checkboxChange(2)" :class="checkedArray.checkedData[0] == 2
                                    ? 'checkTypeSelect'
                                    : ''
                                ">
                                <img :src="stores.sadianIcon.lshz" alt="" />
                                <span>历史火灾</span>
                            </div>
                            <div @click="checkboxChange(3)" :class="checkedArray.checkedData[0] == 3
                                    ? 'checkTypeSelect'
                                    : ''
                                ">
                                <img :src="stores.sadianIcon.zddw" alt="" />
                                <span>重点单位</span>
                            </div>
                            <div :class="checkedArray.checkedData[0] == 4 ? 'checkTypeSelect' :
                                    checkedArray.checkedData[0] == 40 ? 'checkTypeSelect' :
                                        checkedArray.checkedData[0] == 41 ? 'checkTypeSelect' :
                                            checkedArray.checkedData[0] == 42 ? 'checkTypeSelect' :
                                                checkedArray.checkedData[0] == 43 ? 'checkTypeSelect' :
                                                    checkedArray.checkedData[0] == 44 ? 'checkTypeSelect' :
                                                        checkedArray.checkedData[0] == 45 ? 'checkTypeSelect' :
                                                            checkedSelectValue == '46' ? stores.sadianIcon.yjxfz :
                                                                checkedSelectValue == '47' ? stores.sadianIcon.jzzzxfd :
                                                                    ' '
                                ">
                                <img :src="checkedSelectValue == '40' ? stores.sadianIcon.xfz :
                                        checkedSelectValue == '41' ? stores.sadianIcon.zzd :
                                            checkedSelectValue == '42' ? stores.sadianIcon.jzwxxfz :
                                                checkedSelectValue == '43' ? stores.sadianIcon.csxfz :
                                                    checkedSelectValue == '44' ? stores.sadianIcon.qyxfd :
                                                        checkedSelectValue == '45' ? stores.sadianIcon.sqwxxfz :
                                                            checkedSelectValue == '46' ? stores.sadianIcon.sqwxxfz :
                                                                checkedSelectValue == '47' ? stores.sadianIcon.sqwxxfz :
                                                                    stores.sadianIcon.xfz
                                    " alt="" />

                                <span>{{ checkedSelectLabel }}</span>
                                <el-select v-model="checkedSelectValue" placeholder="消防站" class="selectTypeIcon"
                                    style="display: inline-block;  width:100%;position:absolute;right:0"
                                    @change="selectArray">
                                    <el-option v-for="item in checkedSelectArray" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div @click="checkboxChange(15)" :class="checkedArray.checkedData[0] == 15
                                    ? 'checkTypeSelect'
                                    : ''
                                ">
                                <img :src="stores.sadianIcon.zddw" alt="" />
                                <span>中网格</span>
                            </div>
                            <div @click="checkboxChange(16)" :class="checkedArray.checkedData[0] == 16
                                    ? 'checkTypeSelect'
                                    : ''
                                ">
                                <img :src="stores.sadianIcon.zddw" alt="" />
                                <span>小网格</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </transition>
        <transition name="el-fade-in-linear">
            <el-col class="rightBox" v-show="stroes.$state.rightBtn">
                <div class="rightTop">
                    <h4>疏导区社会面风险评估情况</h4>
                    <div class="rightTopContent">
                        <el-row>
                            <el-col :span="12">
                                <div>
                                    <div class="left">
                                        <img src="@a/img/securityPlan/right1.png" alt="" />
                                        <div>高风险场所</div>
                                    </div>
                                    <el-row class="right">
                                        <el-col :span="24">单位总数(家)</el-col>
                                        <el-col :span="24" style="color: #ff0000">8</el-col>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div>
                                    <div class="left">
                                        <img src="@a/img/securityPlan/right2.png" alt="" />
                                        <div>较高风险场所</div>
                                    </div>
                                    <el-row class="right">
                                        <el-col :span="24">单位总数(家)</el-col>
                                        <el-col :span="24" style="color: #ff5a00">0</el-col>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div>
                                    <div class="left">
                                        <img src="@a/img/securityPlan/right3.png" alt="" />
                                        <div>一般风险场所</div>
                                    </div>
                                    <el-row class="right">
                                        <el-col :span="24">单位总数(家)</el-col>
                                        <el-col :span="24" style="color: #ffd800">6</el-col>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div>
                                    <div class="left">
                                        <img src="@a/img/securityPlan/right4.png" alt="" />
                                        <div>低风险场所</div>
                                    </div>
                                    <el-row class="right">
                                        <el-col :span="24">单位总数(家)</el-col>
                                        <el-col :span="24" style="color: #0084ff">18</el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="rightTop" >
                    <h4>安保推送情况</h4>
                    <el-row class="rightTop2">
                        <el-col :span="8" v-for="(item, index) in proptionList" :key="index">
                            <div>
                                <div style="text-align: center;font-size:0.18rem">
                                    {{ item.type }}
                                </div>
                                <div style="height: 1.5rem">
                                    <gauge ref="gauge1" :data="item"></gauge>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div class="rightBot">
                    <h4>网格人员信息</h4>
                    <div class="rightBotContent" v-if="erpData.length > 0">
                        <el-table :data="rightArray.tableData" class="transparentTableRow" height="100%" :empty-text="dataNo" ref="reportTable" @mouseenter="autoScroll(true)"
                        @mouseleave="autoScroll()">
                            <el-table-column v-for="item in rightArray.headerData2" show-overflow-tooltip :key="item.prop" 
                                :prop="item.prop" align="center" min-width="20" :label="item.name">
                                <template #default="scope">
                                    {{
                                        item.prop === "type"
                                        ? ""
                                        : item.prop === "status"
                                            ? scope.row[item.prop] == 1
                                                ? "可用"
                                                : "不可用"
                                            : scope.row[item.prop]
                                    }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </transition>

    </el-row>
</template>

<script>
import linstener from "@c/mixins/linstener";
import map from "@c/mixins/map-data1";
import gauge from "@c/gauge/index6";
// import map from "@c/mixins/map-gaode-public";
import category from "@c/category/index22";
import CountTo from '@/components/count-to/index.js'
export default {
    mixins: [linstener, map],
    components: { category, gauge, CountTo },
    data() {
        return {
            diversionArea:[
                {
                    name:"华漕镇",
                    value:28.2,
                    unit:"km²",
                },
                {
                    name:"新虹街道",
                    value:19.26,
                    unit:"km²",
                },
                {
                    name:"七宝镇",
                    value:7.51,
                    unit:"km²",
                },
                {
                    name:"虹桥镇",
                    value:4.03,
                    unit:"km²",
                },
                {
                    name:"大网格",
                    value:4,
                    unit:"个",
                },
                {
                    name:"中网格",
                    value:14,
                    unit:"个",
                },
                {
                    name:"小网格",
                    value:103,
                    unit:"个",
                },
                {
                    name:"分管领导",
                    value:20,
                    unit:"位",
                },
                {
                    name:"增援干部",
                    value:11,
                    unit:"位",
                },
            ],//疏导区
            gridStatus:2,
            dataNo: "加载中...",
            stores: this.$useStore(),
            proptionList: [
                {
                    "type": "已推送单位",
                    "number": 306,
                    "month": null,
                    "radio": "1",
                    "sameStatus": 2,
                    "avg": null,
                    "color": [
                        "#BF4216 ",
                        "#F68E6A"
                    ]
                },
                {
                    "type": "已接收单位",
                    "number": 303,
                    "month": null,
                    "radio": "1",
                    "sameStatus": 2,
                    "avg": null,
                    "color": [
                        "#06B1B9  ",
                        "#14E1EA"
                    ]
                },
                {
                    "type": "推送接收率",
                    "number": 99,
                    "month": null,
                    "radio": "0.99",
                    "sameStatus": 2,
                    "avg": null,
                    "color": [
                        "#E4951E ",
                        "#F8ED41"
                    ]
                }
            ],
            category: true,
            tableData2: [],
            headerData2: [
                { prop: "name", name: "站点名称" },
                { prop: "car", name: "站点车辆" },
                { prop: "personnel", name: "人员" },
            ],
            reportComplaintList: [
                { name: "火灾扑救", value: 100 },
                { name: "社会救助", value: 90 },
                { name: "抢险救援", value: 60 },
            ], //接处警情况
            checkedArray: {
                checkedData: [15],
                checkedList: [
                    { value: 0, label: "车辆" },
                    { value: 1, label: "历史警情" },
                    { value: 2, label: "历史火灾" },
                    { value: 3, label: "重点单位" },
                    { value: 4, label: "消防站" },
                    { value: 15, label: "中网格" },
                    { value: 16, label: "小网格" },
                ],
            }, //类型筛选
            checkedSelectValue: "40",
            checkedSelectLabel: "消防站",
            checkedSelectArray: [
                { value: 40, label: "消防站" },
                { value: 41, label: "专职队" },
                //     { value: 43, label: "城市消防站" },
                { value: 44, label: "企业消防队" },
                { value: 42, label: "街镇微型消防站" },
                { value: 45, label: "社区微型消防站" },
                { value: 46, label: "一级微型消防站" },
                { value: 47, label: "街镇专职消防队" },
            ],
            tableData: [
                {
                    type: "火灾",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
                {
                    type: "火灾",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
                {
                    type: "火灾",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
                {
                    type: "社会救援",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
                {
                    type: "社会救援",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
                {
                    type: "社会救援",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
                {
                    type: "抢险救援",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
                {
                    type: "抢险救援",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
                {
                    type: "抢险救援",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
                {
                    type: "抢险救援",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
                {
                    type: "火灾",
                    policeTime: "23:00:00",
                    alertLevel: "二级",
                    address: "闵行区",
                    car: "2辆",
                    policeCause: "电器火灾",
                    department: "吴泾支队",
                    status: "1",
                    callingUp: "1号",
                    equipName: "一七",
                    carNumber: "沪X5477应急",
                    carStatus: "出动",
                    disposeTime: "1:00：00",
                    correspondent: "张三",
                    commander: "李四",
                    firemen: "王五",
                    driver: "赵六",
                },
            ],
            headerData: [
                { prop: "policeTime", name: "立案时间" },
                { prop: "alertLevel", name: "警情等级" },
                { prop: "address", name: "案发地址" },
                { prop: "car", name: "调动车辆" },
                // { prop: "type", name: "类型" },
                { prop: "policeCause", name: "原因" },
                { prop: "department", name: "所属中队" },
                { prop: "status", name: "状况" },
            ],

            erpData: [
                {
                    linkPhone: "13917453877",
                    address:
                        "上海市闵行区新虹街道申滨南路1156号龙湖天街A栋112、115室",
                    employeeNum: "",
                    registrar: "市场监督管理局",
                    companyType: "9",
                    fireDutyName: "魏良满",
                    delegateName: "魏静",
                    completedTime: null,
                    companyName: "龙湖虹桥天街",
                    fireManageName: "魏良满",
                    businessStatus: "开业",
                    buildArea: "0.0",
                    paidCapital: "500",
                    companyId: "2DB679350A0F4023B74C4261539AA031",
                    foundTime: null,
                    buildingStructure: "钢筋混凝土",
                    registeredCapital: "500",
                    organization: "91310112MA1GEKG30K",
                    companyNature: 9,
                    buildingHeight: "25",
                    fireRating: "一级",
                    construction: null,
                    id: 1415,
                },
            ],
            rightArray: {
                tableData: [

                ],
                headerData2: [
                    { prop: "gridArea", name: "网格区域" },
                    { prop: "streetTown", name: "街道" },
                    { prop: "gridPeople", name: "网格人员" },
                    { prop: "recruiting", name: "增援干部" },
                    { prop: "responsibilities", name: "分管领导" },
                ],
            },
        };
    },
    mounted() {
        this.grid(2)
        setTimeout(()=>{
            this.autoScroll()
        })
        window.addEventListener(
            "resize",
            () => this.resizeTimeActions([this.$refs.category, this.$refs.gauge1,]),
            true
        );
        this.initMap("anbao"); //地图初始化
        this.anbao(null, 1)
        this.getFireSiteDuty(); //各站点执勤实力
        // this.sadianSelect(this.checkedArray.checkedData[0]); //撒点

    },
    methods: {
        beforeDestroy() {
            this.autoScroll(true)
        },
        selectArray(id) {
            this.checkedArray.checkedData[0] = 4
            let data = this.checkedSelectArray.filter((val) => {
                if (val.value == id) {
                    return val.label
                }
            })
            this.checkedSelectLabel = data[0].label
            this.sadianSelect(data[0].value)
        },
        /**
         * 
         */
        goBack() {
            this.category = true
        },
        /**
         * categoryClick echarts 点击事件
         */
        categoryClick() {
            this.category = false
        },
        /* 各站点执勤实力分页 */
        async getFireSiteDuty() {
            await this.$axios
                .get(
                    this.$api.fireSite.page +
                    "?" +
                    this.$qs.stringify({
                        current: 1,
                        size: 100,
                    })
                )
                .then((res) => {
                    if (res.data.records.length > 0) {
                        let arr = res.data.records;
                        let data = arr.filter((item) => {
                            let data = []
                            if (item.name == "华漕站" || item.name == "新虹站" || item.name == "七宝站" || item.name == "申虹站") {
                                data.push(item)
                                return data
                            }

                        })
                        for (let i = 0; i < data.length; i++) {
                            data[i].cheliang = {};
                            data[i].personnel = undefined;
                            data[i].car = undefined;
                            this.$axios
                                .get(
                                    this.$api.fireSite.list +
                                    "?" +
                                    this.$qs.stringify({
                                        zdCode: data[i].xfjgId,
                                    })
                                )
                                .then((Response) => {
                                    if (Response.data.length > 0) {
                                        let children = Response.data;
                                        data[i].cheliang = children;
                                        data[i].car = children.length;
                                        data[i].children = [];
                                        data[i].personnel = 0;

                                        for (
                                            let a = 0;
                                            a < children.length;
                                            a++
                                        ) {
                                            children[a].renyuan = "";
                                            children[a].renyuanNum = 0;
                                            if (children[a].zhy) {
                                                children[a].renyuan =
                                                    children[a].zhy + ",";
                                            }
                                            if (children[a].jsy) {
                                                children[a].renyuan +=
                                                    children[a].jsy + ",";
                                            }
                                            if (children[a].txy) {
                                                children[a].renyuan +=
                                                    children[a].txy + ",";
                                            }
                                            if (children[a].zsry) {
                                                children[a].renyuan +=
                                                    children[a].zsry + ",";
                                            }
                                            data[i].children.push(children[a]);
                                            if (
                                                children[a].renyuan.indexOf(
                                                    ","
                                                ) > -1
                                            ) {
                                                children[a].renyuanNum +=
                                                    children[a].renyuan.match(
                                                        /,/g
                                                    ).length;
                                            }
                                            data[i].personnel +=
                                                children[a].renyuanNum;
                                        }

                                        for (let i = 0; i < data.length; i++) {
                                            if (data[i].name == "闵行支队") {
                                                data[i].name = "支队";
                                            } else {
                                                data[i].name = data[
                                                    i
                                                ].name.slice(0, 2);
                                            }
                                        }

                                        setTimeout(() => {
                                            this.cldt = data;
                                        }, 1500);
                                    }
                                });
                        }
                        setTimeout(() => {
                            this.tableData2 = data;
                        }, 1000);
                    } else {
                        this.dataNo = "暂未数据"
                    }
                });
        },
        /**
         * 撒点类型选择
         */
        checkboxChange(id) {
            this.checkedArray.checkedData[0] = id;
            if (id == 15) {
                this.gridStatus = id
                this.anbao(1, 1)
                this.grid(2)
            } else if (id == 16) {
                this.gridStatus = id
                this.anbao(1, 2)
                this.grid(3)
            } else {
                this.sadianSelect(id);
            }

        },
        /* 历史警情 */
        async historicalWarning() {
            let monthDay = dayjs()
                .subtract(30, "day")
                .format("YYYY-MM-DD HH:mm:ss");
            let today = dayjs()
                .subtract(0, "day")
                .format("YYYY-MM-DD HH:mm:ss");
            return await this.$axios.get(
                this.$api.jqzhcz.page2 +
                "?" +
                this.$qs.stringify({
                    // streetTown: this.stroes.$state.streetTown, //街镇
                    current: 1,
                    size: 150,
                    startTime: monthDay,
                    endTime: today,
                })
            );
        },

        /**
         * 撒点测绘院、高德
         */
        sadianSelect(id) {
            let type =
                this.checkedArray.checkedList[this.checkedArray.checkedData[0]]
                    .label;
            let that = this;
            let arr = [];
            if (this.stroes.$state.mapBool == 1) {
                if (id == 0) {
                    this.initMarkers(arr.slice(0, 500), "security-plan", type);
                } else if (id == 1 || id == 2) {
                    this.historicalWarning()
                        .then((res) => {
                            if (res) {
                                let data = res.data.records;
                                arr = data
                                arr = data.filter(
                                    (item) =>
                                        item.zhongdui === "华漕" ||
                                        item.zhongdui === "新虹" ||
                                        item.zhongdui === "七宝" ||
                                        item.zhongdui === "虹桥"
                                );
                                if (id == 2) {
                                    arr = arr.filter((item) => {
                                        return item.ajlxdm == 1;
                                    });
                                }
                            }
                        })
                        .then((res) => {
                            this.initMarkers(arr.slice(0, 500), "security-plan", type);
                        });
                } else {
                    this.initMarkers([], "security-plan", type);
                }
            } else {
                if (id == 0) {
                    let data = {
                        gisX: 121.302183,
                        gisY: 31.189991,
                        type: "国家会展中心",
                    }
                    arr.push(data)
                    this.sadian(arr, "security-plan", type);
                }
                if (id == 1 || id == 2) {
                    this.historicalWarning()
                        .then((res) => {
                            if (res) {
                                let data = res.data.records;
                                arr = data
                                arr = data.filter(
                                    (item) =>
                                        item.zhongdui === "华漕" ||
                                        item.zhongdui === "新虹" ||
                                        item.zhongdui === "七宝" ||
                                        item.zhongdui === "虹桥"
                                );
                                if (id == 2) {
                                    arr = arr.filter((item) => {
                                        return item.ajlxdm == 1;
                                    });
                                }
                            }
                        })
                        .then((res) => {
                            let data = {
                                gisX: 121.302183,
                                gisY: 31.189991,
                                type: "国家会展中心",
                            }
                            arr.push(data)
                            this.sadian(arr, "security-plan", type);
                        });
                }
                if (this.checkedArray.checkedData[0] == 40) {
                    this.$axios.post(this.$api.fireSite.demFireStationList,
                        {
                            stationType: [1, 2, 3, 4]
                        }
                    ).then((res) => {
                        for (let i = 0; i < res.data.length; i++) {
                            if (res.data[i].streetTown.indexOf("华漕") > -1 || res.data[i].streetTown.indexOf("新虹") > -1 || res.data[i].streetTown.indexOf("七宝") > -1 || res.data[i].streetTown.indexOf("虹桥") > -1) {
                                res.data[i].type = "消防站"
                                arr.push(res.data[i])
                            }
                        }
                        let data = {
                            gisX: 121.302183,
                            gisY: 31.189991,
                            type: "国家会展中心",
                        }
                        arr.push(data)
                        this.addMarker(arr, "rescue-station", "消防站");
                    });
                }
                if (id == 41) {
                    this.$axios.post(this.$api.fireSite.demFireStationList,
                        {
                            stationType: [4]
                        }
                    ).then((res) => {
                        for (let i = 0; i < res.data.length; i++) {
                            if (res.data[i].streetTown.indexOf("华漕") > -1 || res.data[i].streetTown.indexOf("新虹") > -1 || res.data[i].streetTown.indexOf("七宝") > -1 || res.data[i].streetTown.indexOf("虹桥") > -1) {
                                res.data[i].type = "专职队"
                                arr.push(res.data[i])
                            }

                        }
                        let data = {
                            gisX: 121.302183,
                            gisY: 31.189991,
                            type: "国家会展中心",
                        }
                        arr.push(data)
                        this.addMarker(arr, "rescue-station", "专职队");
                    });
                }
                if (id == 42) {
                    this.$axios.get(this.$api.fireSite.demStreetMicroStationList + "?" +
                        this.$qs.stringify({
                        })).then((res) => {
                            for (let i = 0; i < res.data.length; i++) {
                                if (res.data[i].streetTown.indexOf("华漕") > -1 || res.data[i].streetTown.indexOf("新虹") > -1 || res.data[i].streetTown.indexOf("七宝") > -1 || res.data[i].streetTown.indexOf("虹桥") > -1) {
                                    res.data[i].stationType = 5
                                    arr.push(res.data[i])
                                }
                            }
                            let data = {
                                gisX: 121.302183,
                                gisY: 31.189991,
                                type: "国家会展中心",
                            }
                            arr.push(data)
                            this.addMarker(arr, "rescue-station", "微型消防站");

                        });
                }
                if (id == 44) {
                    this.$axios.post(this.$api.water.baseGgpFacilityList, {
                        "facilityType": [
                            13, 14
                        ],
                    }).then((res) => {
                        for (let i = 0; i < res.data.length; i++) {
                            if (res.data[i].streetTown.indexOf("华漕") > -1 || res.data[i].streetTown.indexOf("新虹") > -1 || res.data[i].streetTown.indexOf("七宝") > -1 || res.data[i].streetTown.indexOf("虹桥") > -1) {
                                res.data[i].stationType = 112
                                arr.push(res.data[i])
                            }
                        }
                        let data = {
                            gisX: 121.302183,
                            gisY: 31.189991,
                            type: "国家会展中心",
                        }
                        arr.push(data)
                        this.addMarker(arr, "rescue-station", "企业消防");
                    });
                }
                if (id == 45) {
                    this.$axios.post(this.$api.water.baseGgpFacilityList, {
                        "facilityType": [
                            15, 16
                        ],
                    }).then((res) => {
                        for (let i = 0; i < res.data.length; i++) {
                            if (res.data[i].streetTown.indexOf("华漕") > -1 || res.data[i].streetTown.indexOf("新虹") > -1 || res.data[i].streetTown.indexOf("七宝") > -1 || res.data[i].streetTown.indexOf("虹桥") > -1) {
                                res.data[i].stationType = 112
                                arr.push(res.data[i])
                            }
                        }
                        let data = {
                            gisX: 121.302183,
                            gisY: 31.189991,
                            type: "国家会展中心",
                        }
                        arr.push(data)
                        this.addMarker(arr, "rescue-station", "社区消防");
                    });
                }
                if (id == 46) {
                    this.$axios.post(this.$api.water.baseGgpFacilityList, {
                        "facilityType": [
                            17
                        ],
                    }).then((res) => {
                        for (let i = 0; i < res.data.length; i++) {
                            if (res.data[i].streetTown.indexOf("华漕") > -1 || res.data[i].streetTown.indexOf("新虹") > -1 || res.data[i].streetTown.indexOf("七宝") > -1 || res.data[i].streetTown.indexOf("虹桥") > -1) {
                                res.data[i].stationType = 17
                                arr.push(res.data[i])
                            }
                        }
                        let data = {
                            gisX: 121.302183,
                            gisY: 31.189991,
                            type: "国家会展中心",
                        }
                        arr.push(data)
                        this.addMarker(arr, "rescue-station", "一级微型消防站");
                    });
                }
                if (id == 47) {
                    this.$axios.post(this.$api.water.baseGgpFacilityList, {
                        "facilityType": [
                            18
                        ],
                    }).then((res) => {
                        for (let i = 0; i < res.data.length; i++) {
                            if (res.data[i].streetTown.indexOf("华漕") > -1 || res.data[i].streetTown.indexOf("新虹") > -1 || res.data[i].streetTown.indexOf("七宝") > -1 || res.data[i].streetTown.indexOf("虹桥") > -1) {
                                res.data[i].stationType = 18
                                arr.push(res.data[i])
                            }
                        }
                        let data = {
                            gisX: 121.302183,
                            gisY: 31.189991,
                            type: "国家会展中心",
                        }
                        arr.push(data)
                        this.addMarker(arr, "rescue-station", "街镇专职消防队");
                    });
                }
            }

        },
        /**
         * 撒点
         */
        sadian(data, pageType, type) {
            if (this.stroes.$state.mapBool == 1) {
                if (data.length > 0) {
                    this.initMarkers(data.slice(0, 500), pageType, type);
                } else {
                    this.initMarkers([], pageType, type);
                }
            } else {
                // this.anbaoMapNew(); //安保区域
                if (data.length > 0) {
                    this.addMarker(data.slice(0, 500), pageType, type);
                } else {
                    this.addMarker([], pageType, type);
                }
            }
        },

        /**
         * 网格人员
         * id 2中网格 3小网格
         */
        grid(id,area) {
            if(id == 2){
                this.rightArray.headerData2 =  [
                    { prop: "gridArea", name: "网格区域" },
                    { prop: "streetTown", name: "街道" },
                    { prop: "type1", name: "安监所人员" },
                    { prop: "type2", name: "城运中心人员" },
                    { prop: "type3", name: "消防助理员" },
                ]
            }
            if(id == 3){
                this.rightArray.headerData2 =  [
                    { prop: "gridArea", name: "网格区域" },
                    { prop: "streetTown", name: "街道" },
                    { prop: "type1", name: "小网格人员" },
                    { prop: "type2", name: "小网格长" },
                ]
            }
            this.$axios.get(this.$api.fireSite.gridMemberScatter +
                "?" +
                this.$qs.stringify({
                    gridArea: area,
                    gridGrade: id,
                })).then(res => {
                    let data = res.data
                    let gridData = []
                    if (data.length > 0) {
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].gridMemderViceList && data[i].gridMemderViceList.length > 0) {
                                gridData[i] = {
                                    gridArea: data[i].gridArea,
                                    streetTown: data[i].streetTown,
                                    type1: undefined,
                                    type2: undefined,
                                    type3: undefined
                                }
                                if(data[i].gridMemderViceList){
                                    for (let ii = 0; ii < data[i].gridMemderViceList.length; ii++) {
                                        if(id == 2){
                                            if (data[i].gridMemderViceList[ii].personnelType == 7) {
                                                if (gridData[i].type1) {
                                                    gridData[i].type1 = `${gridData[i].type1}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
                                                } else {
                                                    gridData[i].type1 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
                                                }
                                            }
                                            if (data[i].gridMemderViceList[ii].personnelType == 8) {
                                                if (gridData[i].type2) {
                                                    gridData[i].type2 = `${gridData[i].type2}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
                                                } else {
                                                    gridData[i].type2 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
                                                }
                                            }
                                            if (data[i].gridMemderViceList[ii].personnelType == 9) {
                                                if (gridData[i].type3) {
                                                    gridData[i].type3 = `${gridData[i].type3}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
                                                } else {
                                                    gridData[i].type3 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
                                                }
                                            }
                                        }
                                        if(id == 3){
                                            if (data[i].gridMemderViceList[ii].personnelType == 10) {
                                                if (gridData[i].type1) {
                                                    gridData[i].type1 = `${gridData[i].type1}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
                                                } else {
                                                    gridData[i].type1 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
                                                }
                                            }
                                            if (data[i].gridMemderViceList[ii].personnelType == 11) {
                                                if (gridData[i].type2) {
                                                    gridData[i].type2 = `${gridData[i].type2}</br>${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
                                                } else {
                                                    gridData[i].type2 = `${data[i].gridMemderViceList[ii].personnelName} ${data[i].gridMemderViceList[ii].phone}`
                                                }
                                            }
                                        }
                                            
                                    }
                                }
                               
                            }
                        }
                    }
                    this.rightArray.tableData = gridData
                })
        }
    },
    watch:{
        "stores.$state.gridName": function(newValue, oldValue) {
            if(this.gridStatus == 2){
                this.grid(2,newValue)
            }
            if(this.gridStatus == 3){
                this.grid(2,newValue)
            }
            
        }
    }
};
</script>

<style lang="scss" scoped>
.contentBox {
    .leftBox {
        .leftTop {
            height: 30%;
            max-height: 30%;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;

            .leftTopContent {
                color: #ffffff;
                height: calc(100% - 0.4375rem);
                display: flex;

                >.el-row {
                    width: 100%;

                    >.el-col {
                        display: flex;

                        >div {
                            margin: auto;

                            >.title {
                                width: 1.075rem;
                                height: 0.225rem;
                                font-size: 0.175rem;
                                padding-left: 0.1625rem;
                                margin: 0.0625rem 0 0.0625rem 0;
                                position: relative;
                                background-image: url(~@a/img/securityPlan/fhxcqk.png);
                                background-size: 100% 100%;

                                >div {
                                    position: absolute;
                                    bottom: 0.0625rem;
                                    width: 150%;
                                }
                            }

                            >.content {
                                >span:nth-child(1) {
                                    font-size: 0.3rem;
                                    padding: 0 0.5625rem 0 0.1625rem;
                                    color: #73fbfd;
                                }

                                >span:nth-child(2) {
                                    font-size: 0.175rem;
                                    margin-right: 0.125rem;
                                }

                                >span:nth-child(3) {
                                    font-size: 0.175rem;
                                }
                            }
                        }
                    }
                }
            }

            .leftTopContent2 {
                color: #fff;
                font-size: 0.175rem;

                .el-row {
                    >div {
                        width: 20%;
                        margin-top: 40px;

                        p:nth-child(2) {

                            // text-align: center;
                            strong {
                                font-size: 0.2rem;
                            }
                        }
                    }
                }
            }
        }

        .leftCenter {
            height: calc(30% - 0.125rem);
            max-height: calc(30% - 0.125rem);
            margin-top: 0.125rem;
            width: 100%;
            justify-content: center;
            align-items: center;
            // box-sizing: border-box;
            color: #ffffff;

            .leftCenterContent {
                width: 100%;
                height: calc(100% - 0.4375rem);
                display: flex;

                .content1,
                .content2,
                .content3 {
                    width: 33.33%;
                    overflow: hidden;
                    margin: auto 0;

                    >div:nth-child(1) {
                        display: flex;

                        >img {
                            width: 1.17rem; //大屏
                            height: 1.08rem; //大屏
                            margin: auto;
                        }
                    }

                    >div:nth-child(2) {
                        font-size: 0.2rem;
                        text-align: center;

                        &>span {
                            b {
                                margin-right: 0.0625rem;
                                font-size: 0.3rem;
                                line-height: 0.5rem;
                            }
                        }

                        p {
                            margin-top: 0.1rem;
                            color: #fff;
                        }
                    }
                }
            }
        }

        .rightCenter {
            color: #ffffff;
            height: calc(35% - 0.125rem);
            max-height: calc(35% - 0.125rem);
            margin-top: 0.125rem;

            .rightTopContent {
                width: 100%;
                padding: 0.25rem 0 10px 0;
                height: calc(100% - 0.8125rem);

                .content {
                    height: 100%;
                    overflow: scroll;
                    position: relative;

                    &>.el-row {
                        overflow: hidden;
                        width: 100%;
                        height: auto;

                        &>.title {
                            width: 100%;
                            height: 0.4375rem;
                            line-height: 0.4375rem;
                            font-size: 0.175rem;
                            padding: 0 0.125rem;
                            background: rgba(115, 251, 253, 0.3) !important;
                            margin-bottom: 0.025rem;
                        }

                        &>.data {
                            width: 100%;
                            font-size: 0.175rem;
                            padding: 0 0.125rem;
                            background: rgba(115, 251, 253, 0.1) !important;
                            margin-bottom: 0.025rem;
                            white-space: initial;

                            .el-col {
                                line-height: 0.35rem;

                                span {
                                    color: #73fbfd;
                                }
                            }
                        }
                    }

                    &::-webkit-scrollbar {
                        display: none;
                    }
                }
            }
        }
    }

    .rightBox {
        color: #ffffff;

        .rightTop {
            height: 30%;
            max-height: 30%;

            .rightTopContent {
                width: 100%;
                height: calc(100% - 0.4375rem);
                display: flex;

                >.el-row {
                    >.el-col {
                        display: flex;
                        margin: auto 0;

                        >div {
                            display: flex;

                            .left {
                                width: 1.375rem;
                                margin-right: 0.25rem;

                                div {
                                    text-align: center;
                                    font-size: 0.175rem;
                                    overflow: hidden !important;
                                    white-space: nowrap !important;
                                    text-overflow: ellipsis !important;
                                }

                                img {
                                    width: 0.675rem;
                                    height: 0.675rem;
                                    display: flex;
                                    margin: auto auto 0.0625rem auto;
                                }
                            }

                            .right {
                                overflow: hidden !important;
                                white-space: nowrap !important;
                                text-overflow: ellipsis !important;

                                .el-col:nth-child(1) {
                                    display: flex;
                                    margin: auto 0 0 0;
                                    font-size: 0.175rem;
                                }

                                .el-col:nth-child(2) {
                                    display: flex;
                                    margin: auto 0 0 0;
                                    font-size: 0.3rem;
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }
            }
        }

        .leftBot {
            height: calc(35% - 0.125rem);
            max-height: calc(35% - 0.125rem);
            margin-top: 0.125rem;
            width: 100%;

            .leftBotContent {
                padding: 0.25rem 0 0 0;
                height: calc(100% - 0.6875rem);
            }
        }

        .rightBot {
            height: calc(39% - 0.125rem);
            max-height: calc(35% - 0.125rem);
            margin-top: 0.125rem;

            .rightBotContent {
                padding: 0.25rem 0 0 0;
                height: 100%;
            }
        }
    }
}

.returnText {
    width: 0.5rem;
    text-align: center;
    height: 0.3rem;
    line-height: 0.3rem;
    box-shadow: inset 0 0 0.05rem 0.05rem #1b4f90;
    background: rgba(19, 42, 90, 0.2) !important;
    color: #fff;
    float: right;
    margin-top: 0.1rem;
}

.leftBotContent2 {
    height: 23%;
    margin-top: -35%;
}

.rightTop2 {
    >.el-col {
        >div {
            >div:nth-child(1) {
                margin: 0.3rem 0;
            }

            >div:nth-child(3) {
                width: 50%;
                margin: 0.2rem auto;
                padding: .075rem;
                border-radius: .25rem;
                box-shadow: inset 0 0 0.05rem 0.05rem rgba(27, 79, 144, 1);
                background: rgba(#132A5A, 0.2) !important;

                span {
                    margin-left: 0.075rem
                }
            }
        }
    }
}
</style>
<style>
.el-tooltip__popper{ width:200px }
.table-tooltip{
    max-width: 200px;
}
.table-style .cell{
    width:200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.el-popper {
    max-width: 30%;
    padding-bottom: 5px !important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;
 
}
</style>