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> -->
                        <el-row>
                            <el-col
                                :span="5"
                                style="border: 1px solid rgba(48, 207, 255, 0.6); margin: 4px .125rem; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box"
                                v-for="(item, index) in diversionArea"
                                :key="index"
                            >
                                <div style="padding: 0.03rem 0; text-align: center">
                                    <span style="display: block">
                                        <Strong
                                            :style="{
                                                color: item.color,
                                                fontWeight: 600,
                                                fontSize: '0.3rem',
                                            }"
                                        >
                                            <CountTo :startVal="0" :endVal="item.value || 0" :duration="3000" v-if="!isNaN(item.value)">{{ item.value || 0 }}</CountTo>
                                            <span v-if="isNaN(item.value)" style="fontsize: 0.2rem">{{ item.value || 0 }}</span>
                                        </Strong>
                                        {{ item.unit }}
                                    </span>
                                    <span>{{ item.name }}</span>
                                </div>
                            </el-col>
                        </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">
                    <div style="display: flex;">
                        <h4>疏导区社会单位情况</h4>
                        <div style="display: flex; border-bottom: 0.0125rem solid rgba(115, 251, 253, 0.5);">
                            <el-form class="titleElForm" :inline="true" size="mini" :model="barForm" style="height: 0">
                                <el-form-item>
                                    <!-- <el-select v-model="barForm.fireType" @change="getHouse()" filterable clearable placeholder="场所">
                                        <el-option v-for="(item, ind) in fireTypeList" :key="ind" :label="item" :value="item"></el-option>
                                    </el-select> -->
                                    <!-- <el-select v-model="units" filterable clearable placeholder="场所">
                                        <el-option v-for="(item, ind) in diversionArea" :key="ind" :label="item.name" :value="item.value"></el-option>
                                    </el-select> -->
                                    

                                    <el-select v-model="value" class="m-2" placeholder="请选择"  style="width:200px">
                                        <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    
                    <unit-box :typeValue="value"></unit-box>
                    <!-- <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>

                


                <!-- <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 style="display: flex">疏导区社会面风险评估情况</h4>
                        <div style="display: flex;float:right;margin-top:-36px;">
                            <el-button size="mini" @click="tabsArea = 'fx'" :class="{ btnClick: tabsArea == 'fx' }"> 风险情况 </el-button>
                            <el-button size="mini" @click="tabsArea = 'jc'" :class="{ btnClick: tabsArea == 'jc' }"> 检查情况 </el-button>
                        </div>
                    <div class="rightTopContent" v-if="tabsArea == 'fx'">
                        <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 class="leftTopContent" v-if="tabsArea == 'jc'">
                        <el-row>
                            <el-col :span="12">
                                <div>
                                    <div class="title">
                                        <div>检查单位数（家次）</div>
                                    </div>
                                    <div class="content">
                                        <span>6276</span>
                                        <span>同比</span>
                                        <span style="color: #fe0505">+29.48%</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div>
                                    <div class="title">
                                        <div>发现隐患数（处）</div>
                                    </div>
                                    <div class="content">
                                        <span>1340</span>
                                        <span>同比</span>
                                        <span style="color: #fe0505">+14.18%</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div>
                                    <div class="title">
                                        <div>督改隐患数（处）</div>
                                    </div>
                                    <div class="content">
                                        <span>1090</span>
                                        <span>同比</span>
                                        <span style="color: #fe0505">+7.34%</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div style="width: 80%">
                                    <div class="title">
                                        <div>签约承诺书（份）</div>
                                    </div>
                                    <div class="content">
                                        <span>5410</span>
                                    </div>
                                </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> -->
                    <h4>执法记录仪</h4>
                    <el-row class="monitor-list" >
                        <div class="list">
                            <el-select
                                v-model="zfjly1"
                                placeholder="请选择执法记录仪"
                                class="videoSelect"
                            >
                                <el-option
                                    v-for="item in selectVideoData"
                                    :key="item.url"
                                    :label="item.name"
                                    :value="item.url"
                                >
                                </el-option>
                            </el-select>
                            <img src="@/assets/img/home/video.jpg" alt="" v-if="!zfjly1">
                            
                            <iframe
                                class="hlsVideo monitor-height"
                                :src="zfjly1"
                                allowfullscreen="true"
                            ></iframe>
                        </div>
                        <div class="list" :offset="2">
                            <el-select
                                v-model="zfjly2"
                                placeholder="请选择执法记录仪"
                                class="videoSelect"
                            >
                                <el-option
                                    v-for="item in selectVideoData"
                                    :key="item.url"
                                    :label="item.name"
                                    :value="item.url"
                                >
                                </el-option>
                            </el-select>
                             <img src="@/assets/img/home/video.jpg" alt="" v-if="!zfjly2">
                            <iframe
                                class="hlsVideo monitor-height"
                                :src="zfjly2"
                                allowfullscreen="true"
                            ></iframe>
                        </div>
                    </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="dataNo2"
                            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="left" 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>

        <!-- 普通弹框 -->
        <div class="tableTooltipwt sadianTankang" v-show="stores.$state.arrayList.length > 0">
            <img src="~@a/img/icon/close.png" alt="" class="close" @click="close" />
            <el-row class="tableContent">
                <el-col class="mk" v-for="li in stores.$state.arrayList" :key="li" v-show="li.title[1]">
                    <p v-show="li.title[1]">{{ li.title[0] }}</p>
                    <el-row>
                        <el-col v-for="ch in li.children" :key="ch" :span="ch[2]" v-show="li.title[1] && ch[1]">
                            <span class="color1">{{ ch[0] }}</span>
                            <span class="color2">{{ ch[1] }}</span>
                        </el-col>
                        <el-row style="margin-top: 10px" v-if="li.type">
                            <iframe :src="li.url" allowfullscreen="true" style="width: 100%"></iframe>
                        </el-row>
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </el-row>
</template>

<script>
import axios from "axios";
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 unitBox from "@c/unitBox/index";
import CountTo from "@/components/count-to/index.js";
export default {
    mixins: [linstener, map],
    components: { category, gauge, CountTo,unitBox },
    data() {
        return {
        value:'1',
        options: [
        {
            value: '1',
            label: '电动自行车现状模排报告',
        },
        {
            value: '2',
            label: '宾馆酒店信息统计',
        },
        {
            value: '3',
            label: '大型商业综合体统计',
        },{
            value: '4',
            label: '街镇小区数量统计',
        },
        {
            value: '5',
            label: '规模租赁公寓统计',
        },
        {
            value: '6',
            label: '三合一场所信息统计',
        },{
            value: '7',
            label: '养老机构安全隐患清单',
        },
        {
            value: '8',
            label: '医疗机构安全隐患清单',
        },
        {
            value: '9',
            label: '重大火灾隐患单位清单',
        },{
            value: '10',
            label: '重点单位信息统计',
        },
        ],
        zfjly1:undefined,
        zfjly2:undefined,
        selectVideoData: [],
            tabsArea: "fx", //切换
            diversionArea: [
                { name: "疏导区总面积", value: 61.46, unit: "km²", color: "#7DD807" },
                { name: "华漕镇", value: 28.2, unit: "km²", color: "#01C3B4" },
                { name: "新虹街道", value: 19.26, unit: "km²", color: "#01C3B4" },
                { name: "七宝镇", value: 7, unit: "㎡", color: "#01C3B4" },
                { name: "虹桥镇", value: 7, unit: "km²", color: "#01C3B4" },
                { name: "大网格", value: 4, unit: "个", color: "#FC0609 " },
                { name: "中网格", value: 14, unit: "个", color: "#FD843A" },
                { name: "小网格", value: 103, unit: "个", color: "#7DD807" },
                { name: "分管领导", value: 20, unit: "人", color: "#058DFE" },
                { name: "增援干部", value: 11, unit: "人", color: "#058DD1" },
                // {name:"人员力量",value:41,unit:"人",color:"#058DD1"},
            ], //疏导区基本情况
            gridStatus: 15,
            dataNo: "加载中...",
            dataNo2: "加载中...",
            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(15);
        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.selectVideo(); //视频在线
        // this.sadianSelect(this.checkedArray.checkedData[0]); //撒点
    },
    methods: {
        beforeDestroy() {
            this.autoScroll(true);
        },
        /**
         * 在线视频
         */
         async selectVideo(id) {
           await  axios({
                headers: {
                    "Content-Type": "application/json;charset=UTF-8",
                },
                method: "get",
                // url: "http://32.0.15.107:8080/video-api/kiop-gateway-core/4G/device/ext?apikey=643e6591-a489-4648-ba35-c15c39c64022",
                url: "http://32.0.15.107:8080/video-api/kiop-gateway-core/tysbs/device/ext?apikey=643e6591-a489-4648-ba35-c15c39c64022&f_in_civilCode=31021019,31020414&pageNo=0&pageSize=10000",
            }).then((res) => {
                let arr = [];
                let zfjly = [];
                if (res.data.length > 0) {
                    let data = res.data;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].otherNames?.status_name == "在线") {
                            var num = {
                                id: data[i].id,
                                name: data[i]?.deviceName,
                                groupName: data[i]?.groupName,
                                gisX: data[i]?.longitude
                                    ? data[i]?.longitude
                                    : 0,
                                gisY: data[i]?.latitude ? data[i]?.latitude : 0,
                                type: "执法记录仪",
                                gbid: data[i].gbid,
                                url:
                                    "http://10.107.31.215:50080/dispatch-ms/#/conference/single_url?ipc_live=1&key=643e6591-a489-4648-ba35-c15c39c64022&gbids=" +
                                    data[i].gbid,
                            };
                            console.log(1111,num.name,data[i].gbid)
                            arr.push(num);
                        }
                    }
                    for (let i = 0; i < arr.length; i++) {
                        if (
                            arr[i].name.indexOf("单兵") == "-1" &&
                            arr[i].name.indexOf("无人机") == "-1" &&
                            arr[i].name.indexOf("布控球") == "-1"
                        ) {
                            zfjly.push(arr[i]);
                        }
                    }
                    this.selectVideoData = zfjly;
                    if (arr.length > 0 && id) {
                        this.addMarker(arr, "enforcement-dynamic","执法记录仪");
                    }
                }
            });

            // 测试

            // let arr =
            // [{
            //       id: "5708ad6382517cd68ea2d2f8cd01bb58",
            //       name: "上海闵行闵行消防站4G布控球",
            //       groupName: "009闵行支队",
            //       gisX: 121.386128,
            //       gisY:31.139253 ,
            //       type:"video",
            //       gbid:31.01411,
            //       type:"执法记录仪",
            //       url:"http://10.107.31.215:50080/dispatch-ms/#/conference/single_url?ipc_live=1&key=643e6591-a489-4648-ba35-c15c39c64022&gbids=31000000001320003271&nmediaid=121"
            //   }
            // ]
            // if(id){
            //   this.addMarker(arr, "enforcement-dynamic");
            // }
        },
        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(id);
            } else if (id == 16) {
                this.gridStatus = id;
                this.grid(16, null, null, 1);
                this.anbao(1, 2);
            } 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 15中网格
         * area 区域名称
         * position 坐标
         * query 查询居委会名称
         */
        grid(id, area, position, query) {
            let querySearch = {};
            let hzzx =[{
                gisX: 121.302183,
                gisY: 31.189991,
                type: "国家会展中心",
                }];
                // this.sadian(hzzx, "security-plan", "国家会展中心");
            if (id == 15) {
                this.rightArray.headerData2 = [
                    { prop: "gridArea", name: "网格区域" },
                    { prop: "streetTown", name: "街道" },
                    { prop: "type1", name: "安监所人员" },
                    { prop: "type2", name: "城运中心人员" },
                    { prop: "type3", name: "消防助理员" },
                ];
                querySearch = {
                    gridArea: area,
                    gridGrade: 2,
                };
            }
            if (id == 16) {
                this.rightArray.headerData2 = [
                    { prop: "gridArea", name: "网格区域" },
                    { prop: "streetTown", name: "街道" },
                    { prop: "type1", name: "小网格人员" },
                    { prop: "type2", name: "小网格长" },
                ];
                querySearch = {
                    mapGridName: area,
                    gridGrade: 3,
                };
            }
            this.$axios.get(this.$api.fireSite.gridMemberScatter + "?" + this.$qs.stringify(querySearch)).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,
                                mapGridName: data[i].mapGridName,
                                seniorGrid: data[i].seniorGrid,
                                type1: undefined,
                                type2: undefined,
                                type3: undefined,
                            };
                            if (data[i].gridMemderViceList) {
                                for (let ii = 0; ii < data[i].gridMemderViceList.length; ii++) {
                                    if (id == 15) {
                                        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 == 16) {
                                        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}`;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    if (position) {
                        let arr = {};
                        arr.type = id;
                        arr.name = area;
                        arr.position = position;
                        arr.content = gridData;
                        this.anbaoPopup(arr);
                        this.superiorGrid(gridData[0].seniorGrid, id == 15 ? 1 : id == 16 ? 2 : "");
                    } else {
                    }
                    this.rightArray.tableData = gridData;
                } else {
                    this.dataNo2 = "暂无数据";
                }
                //用于地图居委会区块查询
                if (query && id == 16) {
                    var queryData = [];
                    for (let i = 0; i < gridData.length; i++) {
                        if (gridData[i].mapGridName) {
                            queryData.push(gridData[i]);
                        }
                    }
                    this.anbao(1, 2, queryData);
                }
            });
        },
        /**
         * 上级网格
         * @param {*网格上级id} id
         * @param {*等级} type   1镇级 2片区
         */
        superiorGrid(id, type) {
            this.$axios
                .get(
                    this.$api.fireSite.gridMemberScatter +
                        "?" +
                        this.$qs.stringify({
                            seniorGrid: id,
                        })
                )
                .then((res) => {
                    this.diversionArea = [];
                    if (res.data.length > 0) {
                        let data = res.data[0];
                        console.log(111, data, type);
                        if (type == 1) {
                            //镇级
                            this.diversionArea[0] = {
                                name: `${data.gridArea}面积`,
                                value: data.gridArea == "华漕镇" ? 61.46 : data.gridArea == "新虹街道" ? "19.26" : data.gridArea == "七宝镇" ? "7" : data.gridArea == "虹桥镇" ? "17" : "",
                                unit: "km²",
                                color: "#7DD807",
                            };
                            this.diversionArea[1] = {
                                name: "分管领导",
                                value: 0,
                                unit: "人",
                                color: "#01C3B4",
                            };
                            this.diversionArea[2] = {
                                name: "城运中心主任",
                                value: 0,
                                unit: "人",
                                color: "#FD843A",
                            };
                            this.diversionArea[3] = {
                                name: "安监所所长",
                                value: 0,
                                unit: "人",
                                color: "#7DD807",
                            };
                            this.diversionArea[4] = {
                                name: "支队外勤参谋",
                                value: 0,
                                unit: "人",
                                color: "#058DFE",
                            };
                            this.diversionArea[5] = {
                                name: "中网格",
                                value: data.gridArea == "华漕镇" ? 5 : data.gridArea == "新虹街道" ? "4" : data.gridArea == "七宝镇" ? "3" : data.gridArea == "虹桥镇" ? "2" : "",
                                unit: "个",
                                color: "#058DFE",
                            };
                            this.diversionArea[6] = {
                                name: "小网格",
                                value: data.gridArea == "华漕镇" ? 36 : data.gridArea == "新虹街道" ? "22" : data.gridArea == "七宝镇" ? "34" : data.gridArea == "虹桥镇" ? "11" : "",
                                unit: "个",
                                color: "#058DFE",
                            };

                            for (let i = 0; i < data.gridMemderViceList.length; i++) {
                                if (data.gridMemderViceList[i].personnelType == 3) {
                                    //分管领导
                                    this.diversionArea[1].value++;
                                }
                                if (data.gridMemderViceList[i].personnelType == 4) {
                                    //城运中心主任
                                    this.diversionArea[2].value++;
                                }
                                if (data.gridMemderViceList[i].personnelType == 5) {
                                    //安监所所长
                                    this.diversionArea[3].value++;
                                }
                                if (data.gridMemderViceList[i].personnelType == 6) {
                                    //支队外勤参谋
                                    this.diversionArea[4].value++;
                                }
                            }
                        }
                        if (type == 2) {
                            //片区
                            console.log(11, data);
                            this.diversionArea[0] = {
                                name: "",
                                value: data.gridArea,
                                unit: "",
                                color: "#7DD807",
                            };
                            this.diversionArea[1] = {
                                name: "安监所人员",
                                value: 0,
                                unit: "人",
                                color: "#01C3B4",
                            };
                            this.diversionArea[2] = {
                                name: "城运中心人员",
                                value: 0,
                                unit: "人",
                                color: "#FD843A",
                            };
                            this.diversionArea[3] = {
                                name: "消防助理员",
                                value: 0,
                                unit: "人",
                                color: "#7DD807",
                            };
                            this.diversionArea[4] = {
                                name: "小网格",
                                value:
                                    data.gridArea == "闵S1-1（纪王西网格）"
                                        ? "4"
                                        : data.gridArea == "闵S1-2（纪王东网格）"
                                        ? "6"
                                        : data.gridArea == "闵S1-3（诸翟北网格）"
                                        ? "12"
                                        : data.gridArea == "闵S1-4（诸翟南网格）"
                                        ? "8"
                                        : data.gridArea == "闵S1-5（老华漕网格）"
                                        ? "6"
                                        : data.gridArea == "闵S2-1（爱博网格）"
                                        ? "4"
                                        : data.gridArea == "闵S2-2（华美网格）"
                                        ? "6"
                                        : data.gridArea == "闵S2-3（枢纽网格）"
                                        ? "6"
                                        : data.gridArea == "闵S2-4（航华网格）"
                                        ? "6"
                                        : data.gridArea == "闵S3-1（七宝北片网格）"
                                        ? "10"
                                        : data.gridArea == "闵S3-2（七宝吴宝路网格）"
                                        ? "9"
                                        : data.gridArea == "闵S3-3（七宝航华网格）"
                                        ? "15"
                                        : data.gridArea == "闵S4-1（紫藤红松网格）"
                                        ? "6"
                                        : data.gridArea == "闵S4-2（虹梅网格）"
                                        ? "5"
                                        : "0",
                                unit: "个",
                                color: "#7DD807",
                            };

                            for (let i = 0; i < data.gridMemderViceList.length; i++) {
                                if (data.gridMemderViceList[i].personnelType == 7) {
                                    //安监所人员
                                    this.diversionArea[1].value++;
                                }
                                if (data.gridMemderViceList[i].personnelType == 8) {
                                    //城运中心人员
                                    this.diversionArea[2].value++;
                                }
                                if (data.gridMemderViceList[i].personnelType == 9) {
                                    //消防助理员
                                    this.diversionArea[3].value++;
                                }
                            }
                        }
                    }

                    //         diversionArea:[
                    //         {name:"疏导区总面积",value:61.46,unit:"km²",color:"#7DD807"},
                    //         {name:"华漕镇",value:28.2,unit:"km²",color:"#01C3B4"},
                    //         {name:"新虹街道",value:19.26,unit:"km²",color:"#01C3B4"},
                    //         {name:"七宝镇",value:7,unit:"㎡",color:"#01C3B4"},
                    //         {name:"虹桥镇",value:7,unit:"km²",color:"#01C3B4"},
                    //         {name:"大网格",value:4,unit:"个",color:"#FC0609 "},
                    //         {name:"中网格",value:14,unit:"个",color:"#FD843A"},
                    //         {name:"小网格",value:103,unit:"个",color:"#7DD807"},
                    //         {name:"分管领导",value:20,unit:"人",color:"#058DFE"},
                    //         {name:"增援干部",value:11,unit:"人",color:"#058DD1"},
                    // ],//疏导区基本情况
                });
        },
    },
    watch: {
        "stores.$state.gridData": function (newValue, oldValue) {
            if (this.gridStatus == 15) {
                this.grid(15, newValue.name, newValue.position);
            }
            if (this.gridStatus == 16) {
                this.grid(16, newValue.name, newValue.position);
            }
        },
    },
};
</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;
                                }
                            }
                        }
                    }
                }
            }
        }
        .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;
                            }
                        }
                    }
                }
            }
        }

        .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: 0.075rem;
                border-radius: 0.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;
                }
            }
        }
    }
}
.monitor-list {
        overflow: hidden;
        margin-top:0.25rem;
        > .list {
            border: 1px solid #3a7e8e;
            position: relative;
            width:48%;
            height:21vh;
            box-sizing: border-box;
            .videoSelect {
                position: absolute;
                width: 100%;
            }
            img{
                width:100%;
                height:192px;
                overflow: hidden;
            }
        }
        .list:nth-child(2){
                margin-left:4%;
        }
    }
    iframe {
        border: none;
        width:100%;
    }
</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>