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  class="sdqBasicInfo sdline1">
                            <div
                                class="basicItem"
                                v-for="(item, index) in diversionArea.slice(0,5)"
                                :key="index"
                            >
                                <div style="padding: 0.03rem 0; text-align: center">
                                    <span style="display: block">
                                        <Strong
                                            style="color: #01E0FF;font-weight: 600;font-size: 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 !important">{{ item.value || 0 }}</span>
                                        </Strong>
                                        {{ item.unit }}
                                    </span>
                                    <span class="nameBox" style="">{{ item.name }}</span>
                                </div>
                            </div>
                        </el-row>

                        <el-row  class="sdqBasicInfo sdline2">
                            <div
                                class="basicItem"
                                v-for="(item, index) in diversionArea.slice(7,10)"
                                :key="index"
                            >
                                <div style="padding: 0.03rem 0; text-align: center">
                                    <span style="display: block">
                                        <Strong
                                            style="color: #F48354;font-weight: 600;font-size: 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 !important">{{ item.value || 0 }}</span>
                                        </Strong>
                                        {{ item.unit }}
                                    </span>
                                    <span class="nameBox" style="">{{ item.name }}</span>
                                </div>
                            </div>
                        </el-row>

                        <el-row  class="sdline3">
                            <div
                                class="basicItem"
                                v-for="(item, index) in line3Array"
                                :key="index"
                            >
                                <div style="padding: 0.03rem 0; text-align: center">
                                    <span style="display: block">
                                        <Strong
                                            style="color: #4FE261;font-weight: 600;font-size: .225rem"
                                        >
                                            <CountTo :startVal="0" :endVal="item.count || 0" :duration="3000" v-if="!isNaN(item.count)">{{ item.count || 0 }}</CountTo>
                                            <span v-if="isNaN(item.count)" style="fontSize: 0.2rem !important">{{ item.count || 0 }}</span>
                                        </Strong>
                                        {{ item.unit }}
                                    </span>
                                    <span class="nameBox" style="font-size:12px">{{ item.name }}</span>
                                </div>
                            </div>
                        </el-row>
                    </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="value111" @change="getOneUnit" 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="value111" :arrayData="arrayData" :staticData="staticData" v-if="staticData.total" ></unit-box>
                    <div v-else>暂无数据</div>

                    <!-- <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="rightCenter">
                    <h4>执勤战备力量部署</h4>
                    <div class="rightTopContent">
                        <div style="width:95%;margin:0 auto;border: 1px solid rgba(48, 207, 255, 0.6); box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box;display: flex;
                            justify-content: space-between;padding: .15rem .125rem .15rem">
                            <span>闵行支队安保分指挥所</span>    <span>淮虹路151弄9号</span>    <span>电台：闵101</span>    <span>值班电话：33281293</span>
                        </div>

                        <el-row>
                            <el-col :span="5"  style="border: 1px solid rgba(48, 207, 255, 0.6); margin: .25rem .08rem .125rem .16rem; box-shadow: inset 0 0 0.07rem 0.04rem rgb(115 251 253 / 40%); box-sizing: border-box"
                              v-for="(item,index) in staticData.array1" :key="index">
                                <div style="padding: 0.2rem 0; text-align: center">
                                    <span style="display: block">
                                        <Strong :style="{ color: item.color, fontSize: '0.3rem'}" >
                                            <CountTo :startVal='0' :endVal='item.count || 0' :duration='3000'>{{ item.count || 0 }}</CountTo>
                                        </Strong>
                                        家
                                    </span>
                                    <span style="font-size:.1375rem">{{item.streetTown}}</span>
                                </div>
                            </el-col>

                        </el-row>


                        <!-- <el-table :data="tableData2" class="transparentTableRow" height="100%" :empty-text="dataNo">
                            <el-table-column type="expand">
                                <template #default="props">
                                    <template v-if="props.row.children">
                                        <template v-for="(item, ind) in props.row.children" :key="ind">
                                            <el-row class="tableExpendTitle" style="margin-top: 10px">
                                                状态：{{ item.carStatus }}（{{ item.equipTypeName ? item.equipTypeName + "，" : "" }}{{ item.renyuanNum }}人）
                                            </el-row>
                                            <el-row class="tableExpendcontent">
                                                <el-col>
                                                    <div>
                                                        车牌号：<span style="color: #6ff3f6">{{ item.cphm }}</span>
                                                    </div>
                                                </el-col>
                                                <el-col v-if="item.zhy" :span="12">
                                                    <div>
                                                        指挥员：<span style="color: #6ff3f6">{{ item.zhy }}</span>
                                                    </div>
                                                </el-col>
                                                <el-col v-if="item.txy" :span="12">
                                                    <div>
                                                        通讯员：<span style="color: #6ff3f6">{{ item.txy }}</span>
                                                    </div>
                                                </el-col>
                                                <el-col v-if="item.jsy" :span="12">
                                                    <div>
                                                        驾驶员：<span style="color: #6ff3f6">{{ item.jsy }}</span>
                                                    </div>
                                                </el-col>
                                                <el-col v-if="item.zsry" :span="24">
                                                    <div>
                                                        战士人员：<span style="color: #6ff3f6">{{ item.zsry }}</span>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </template>
                                    </template>
                                </template>
                            </el-table-column>
                            <el-table-column show-overflow-tooltip v-for="item in headerData2" :key="item.prop" :prop="item.prop" align="center" min-width="20" :label="item.name">
                                <template v-if="item.prop === 'car'" #default="scope">
                                    <span style="color: #6ff3f6">{{ scope.row.car }}</span>
                                </template>
                                <template v-if="item.prop === 'personnel'" #default="scope">
                                    <span style="color: #6ff3f6">{{ scope.row.personnel }}</span>
                                </template>
                            </el-table-column>
                        </el-table> -->
                    </div>
                </div>

                


                <!-- <div class="leftCenter">
                    <h4 class="h4Top">接警处置情况</h4>
                    <category
                        ref="category"
                        v-show="category"
                        :dataMap="reportComplaintList.map((val, ind) => val.value)"
                        :xData="reportComplaintList.map((val, ind) => val.name)"
                        :isSlice="10"
                        :width="40"
                        color="#73FBFD"
                        @echartsClick="categoryClick"
                    ></category>
                    <div @click="goBack" class="return" v-if="!category">
                        <div class="returnText">返回</div>
                    </div>
                </div> -->


                <div class="leftBotContent2">
                    <el-table v-if="!category" :data="tableData" class="transparentTableRow" height="100%" ref="reportTable" @mouseenter="autoScroll(true)" @mouseleave="autoScroll()">
                        <el-table-column v-for="item in headerData" show-overflow-tooltip :key="item.prop" :prop="item.prop" align="center" min-width="20" :label="item.name">
                            <template #default="scope">
                                {{ item.prop === "type" ? "" : item.prop === "status" ? (scope.row[item.prop] == 1 ? "可用" : "不可用") : scope.row[item.prop] }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </transition>
        <transition name="el-fade-in-linear">
            <el-col class="centerBox" style="width: 100%">
                <div :class="stroes.$state.leftBtn ? 'leftBtn btnW' : 'leftBtn0 btnW'" @click="stroes.leftBtnClick()">
                    <img src="@/assets/img/svg/left.svg" alt="" class="img" />
                </div>
                <el-col class="centerContent" id="mapF"></el-col>

                <div :class="stroes.$state.rightBtn ? 'rightBtn btnW' : 'rightBtn0 btnW'" @click="stroes.rightBtnClick()">
                    <img src="@/assets/img/svg/left.svg" alt="" class="img" />
                </div>

                <div class="mapTips_type">
                    <img src="@/assets/img/svg/danweitop.svg" alt="" class="img" />
                    <div class="content">
                        <p>类型筛选</p>
                        <div class="selectType">
                            <!-- <div @click="checkboxChange(0)" :class="checkedArray.checkedData[0] == 0 ? 'checkTypeSelect' : ''">
                                <img :src="stores.sadianIcon.xfc" alt="" />
                                <span>车辆</span>
                            </div> -->
                            <!-- <div @click="checkboxChange(1)" :class="checkedArray.checkedData[0] == 1 ? 'checkTypeSelect' : ''">
                                <img :src="stores.sadianIcon.lsjq" alt="" />
                                <span>历史警情</span>
                            </div>
                            <div @click="checkboxChange(2)" :class="checkedArray.checkedData[0] == 2 ? 'checkTypeSelect' : ''">
                                <img :src="stores.sadianIcon.lshz" alt="" />
                                <span>历史火灾</span>
                            </div> -->
                            <!-- <div @click="checkboxChange(3)" :class="checkedArray.checkedData[0] == 3 ? 'checkTypeSelect' : ''">
                                <img :src="stores.sadianIcon.zddw" alt="" />
                                <span>重点单位</span>
                            </div> -->

                            <div
                                :class="
                                    checkedArray.checkedData[0] == 4
                                        ? 'checkTypeSelect'
                                        : checkedArray.checkedData[0] == 40
                                        ? 'checkTypeSelect'
                                        : checkedArray.checkedData[0] == 41
                                        ? 'checkTypeSelect'
                                        : checkedArray.checkedData[0] == 42
                                        ? 'checkTypeSelect'
                                        : checkedArray.checkedData[0] == 43
                                        ? 'checkTypeSelect'
                                        : checkedArray.checkedData[0] == 44
                                        ? 'checkTypeSelect'
                                        : checkedArray.checkedData[0] == 45
                                        ? 'checkTypeSelect'
                                        : checkedSelectValue == '46'
                                        ? stores.sadianIcon.yjxfz
                                        : checkedSelectValue == '47'
                                        ? stores.sadianIcon.jzzzxfd
                                        : ' '
                                "
                            >
                                <img
                                    :src="
                                        checkedSelectValue == '40'
                                            ? stores.sadianIcon.xfz
                                            : checkedSelectValue == '41'
                                            ? stores.sadianIcon.zzd
                                            : checkedSelectValue == '42'
                                            ? stores.sadianIcon.jzwxxfz
                                            : checkedSelectValue == '43'
                                            ? stores.sadianIcon.csxfz
                                            : checkedSelectValue == '44'
                                            ? stores.sadianIcon.qyxfd
                                            : checkedSelectValue == '45'
                                            ? stores.sadianIcon.sqwxxfz
                                            : checkedSelectValue == '46'
                                            ? stores.sadianIcon.sqwxxfz
                                            : checkedSelectValue == '47'
                                            ? stores.sadianIcon.sqwxxfz
                                            : stores.sadianIcon.xfz
                                    "
                                    alt=""
                                />

                                <span>{{ checkedSelectLabel }}</span>
                                <el-select
                                    v-model="checkedSelectValue"
                                    placeholder="消防站"
                                    class="selectTypeIcon"
                                    style="display: inline-block; width: 100%; position: absolute; right: 0"
                                    @change="selectArray"
                                >
                                    <el-option v-for="item in checkedSelectArray" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                                </el-select>
                            </div>
                            <div @click="checkboxChange(19)" :class="checkedArray.checkedData[0] == 19 ? 'checkTypeSelect' : ''">
                                <img :src="stores.sadianIcon.zddw" alt="" />
                                <span>大网格</span>
                            </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 @click="checkboxChange(17)" :class="checkedArray.checkedData[0] == 17 ? 'checkTypeSelect' : ''">
                                <img :src="stores.sadianIcon.ssjq" alt="" />
                                <span>监控视频</span>
                            </div>
                            <div @click="checkboxChange(18)" :class="checkedArray.checkedData[0] == 18 ? 'checkTypeSelect' : ''">
                                <img :src="stores.sadianIcon.jdjc" 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">
                <!-- 疏导区网格检查情况 start -->
                <div class="rightTop1">
                    <h4 style="display: flex">疏导区网格检查情况</h4>
                    <div class="girdCheckItem">
                        <p>大网格<span>&nbsp;&nbsp;&nbsp;街镇分营领导：10&nbsp;&nbsp;城运中心主任：10&nbsp;&nbsp;安监所所长：10&nbsp;&nbsp;支队外参谋：10</span></p>
                        <div class="row_g">
                            <div >累计:</div>
                            <div >检查家数<br>100（家/次）</div>
                            <div >发现隐患数<br>20（处）</div>
                            <div >整改隐患<br>20（处）</div>
                            <div >处罚金额<br>20（万元）</div>
                            <div >三停<br>20（万元）</div>
                            <div >查封<br>4（处）</div>
                        </div>
                    
                        <div class="row_g">
                            <div >今日:</div>
                            <div >100（家/次）</div>
                            <div >20（处）</div>
                            <div >20（处）</div>
                            <div >20（万元）</div>
                            <div >20（万元）</div>
                            <div >4（处）</div>
                        </div>
                        <div class="row_g2">
                            <div >消防安全重点单位四色分级情况</div>
                            <div style="color:red">高风险<br>100（家）</div>
                            <div style="color:orange">较高风险<br>20（家）</div>
                            <div style="color:yellow">一般风险<br>20（家）</div>
                            <div style="color:green">低风险<br>20（家）</div>
                        </div>
                    </div>
                    <div class="girdCheckItem">
                        <p>中网格<span>&nbsp;&nbsp;&nbsp;安监所人员: 10&nbsp;&nbsp;城运中心人员：10&nbsp;&nbsp;消防助理员：10</span></p>
                        <div class="row_g3">
                            <div >累计:</div>
                            <div >检查家数<br>100（家/次）</div>
                            <div >发现隐患数<br>20（处）</div>
                            <div >整改隐患<br>20（处）</div>
                            <div >签约承诺书<br>20（份）</div>
                            <div >检查覆盖率<br>100%</div>
                        </div>
                        <div class="row_g3">
                            <div >今日:</div>
                            <div >100（家/次）</div>
                            <div >20（处）</div>
                            <div >20（处）</div>
                        </div>
                    
                        <div class="row_g2">
                            <div >九小场所四色分级情况</div>
                            <div style="color:red">高风险<br>100（家）</div>
                            <div style="color:orange">较高风险<br>20（家）</div>
                            <div style="color:yellow">一般风险<br>20（家）</div>
                            <div style="color:green">低风险<br>20（家）</div>
                        </div>

                    </div>
                    <div class="girdCheckItem">
                        <p>小网格<span>&nbsp;&nbsp;&nbsp;安网格长: 10&nbsp;&nbsp;网格人员：10</span></p>
                        <div class="row_g">
                            <div >累计:</div>
                            <div >主动发现<br>100（起）</div>
                            <div >被动处置<br>100（起）</div>
                            <div >隐患整改<br>100（起）</div>
                            <div >派发<br>20（起）</div>
                            <div >完成<br>20（起）</div>
                            <div >处置率<br>100%</div>
                        </div>
                        <div class="row_g">
                            <div >累计:</div>
                            <div >100（起）</div>
                            <div >20（起）</div>
                            <div >20（起）</div>
                        </div>

                    </div>
                    <br>
                </div>
                <!-- <div class="rightTop1">
                    <h4 style="display: flex">疏导区网格检查情况</h4>
                    <div class="girdCheckItem">
                        <p>大网格<span>&nbsp;&nbsp;&nbsp;街镇分营领导：10&nbsp;&nbsp;城运中心主任：10&nbsp;&nbsp;安监所所长：10&nbsp;&nbsp;支队外参谋：10</span></p>
                        <el-row>
                            <el-col :span="6">检查家数: 100</el-col>
                            <el-col :span="6">发现隐患数: 20</el-col>
                            <el-col :span="6">督改隐患数: 20</el-col>
                            <el-col :span="6">签约承诺数: 20</el-col>
                        </el-row>
                    </div>
                    <div class="girdCheckItem">
                        <p>中网格</p>
                        <el-row>
                            <el-col :span="6">检查家数: 100</el-col>
                            <el-col :span="6">发现隐患数: 20</el-col>
                            <el-col :span="6">督改隐患数: 20</el-col>
                            <el-col :span="6">签约承诺数: 20</el-col>
                        </el-row>
                    </div>
                    <div class="girdCheckItem">
                        <p>小网格</p>
                        <el-row>
                            <el-col :span="6">检查家数: 100</el-col>
                            <el-col :span="6">发现隐患数: 20</el-col>
                            <el-col :span="6">督改隐患数: 20</el-col>
                            <el-col :span="6">签约承诺数: 20</el-col>
                        </el-row>
                    </div>
                    <br>
                </div> -->
                <!-- 疏导区网格检查情况 end -->

                <!-- <div class="rightTop3">
                        <h4 style="display: flex">处置网格</h4>
                        
                    <div class="rightTopContent">
                        <el-row v-if="gridStatisticsStatus">
                            <el-col :span="12" @click="gridStatistics(1)">
                                <div>
                                    <div class="left">
                                        <img src="@a/img/sadian/sbs.png" alt="" />
                                        <div>上报数</div>
                                    </div>
                                    <el-row class="right">
                                        <el-col :span="24" style="color: #ff0000">{{ gridStatisticsNum.total || 0 }}</el-col>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="12" @click="gridStatistics(3)">  
                                <div>
                                    <div class="left">
                                        <img src="@a/img/sadian/yhs.png" alt="" />
                                        <div>隐患数</div>
                                    </div>
                                    <el-row class="right">
                                        <el-col :span="24" style="color: #ff5a00">{{ gridStatisticsNum.yinhuan || 0 }}</el-col>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="12" @click="gridStatistics(2)">
                                <div>
                                    <div class="left">
                                        <img src="@a/img/sadian/czs.png" alt="" />
                                        <div>处置数</div>
                                    </div>
                                    <el-row class="right">
                                        <el-col :span="24" style="color: #ffd800">{{ gridStatisticsNum.over || 0 }}</el-col>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div>
                                    <div class="left">
                                        <img src="@a/img/sadian/czl.png" alt="" />
                                        <div>处置率</div>
                                    </div>
                                    <el-row class="right">
                                        <el-col :span="24" style="color: #0084ff">{{  gridStatisticsNum.rate || 0  }}%</el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                        
                        <el-row v-if="!gridStatisticsStatus">
                            <el-table
                                :data="gridStatisticsTableType"
                                class="transparentTableRow"
                                height="100%"
                                :empty-text="dataNo3"
                                ref="reportTable"
                                @mouseenter="autoScroll1(true)"
                                @mouseleave="autoScroll1()"
                            >
                                <el-table-column v-for="item in gridStatisticsHeader" show-overflow-tooltip :key="item.prop" :prop="item.prop" align="left" min-width="20" :label="item.name">
                                    <template v-if="item.prop =='案件状态' || item.prop =='街镇' || item.prop =='自治网格' || item.prop =='案件子类' || item.prop =='发现时间'" #default="scope">
                                        <el-tooltip placement="left"  >
                                            <template #content >
                                                <div class="tableTooltip" ref="ff">
                                                <div class="tableTitle">
                                                    <div>案件详情</div>
                                                </div>
                                                <img src="~@a/img/icon/close.png" alt="" class="close" @click="closeIsTooltip"  />
                                                <el-row class="tableContent">
                                                    <el-col :span="20"  v-if="scope.row['案件状态']">案件状态：{{scope.row["案件状态"]}}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['任务号'] ">任务号：{{scope.row["任务号"] }}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['发现时间']">发现时间：{{scope.row["发现时间"]}}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['案件来源']">案件来源：{{scope.row["案件来源"]}}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['案件属性']">案件属性：{{scope.row["案件属性"]}}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['街镇']">街镇：{{scope.row["街镇"]}}</el-col>
                                                    <el-col :span="12"  v-if="scope.row['自治网格类型']">自治网格类型：{{scope.row["自治网格类型"]}}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['责任块']">责任块：{{scope.row["责任块"]}}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['案件大类']">案件大类：{{scope.row["案件大类"]}}</el-col>
                                                    
                                                
                                                    <el-col :span="24"  v-if="scope.row['案件小类']">案件小类：{{scope.row["案件小类"]}}</el-col>
                                                   
                                                    <el-col :span="24"  v-if="scope.row['自治网格']">自治网格：{{scope.row["自治网格"]}}</el-col>
                                                    
                                                    
                                                    
                                                    
                                                    <el-col :span="24"  v-if="scope.row['处置网格']">处置网格：{{scope.row["处置网格"]}}</el-col>
                                                   

                                                    <el-col :span="24"  v-if="scope.row['发生地址']">发生地址：{{scope.row["发生地址"]}}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['诉求联系人']">诉求联系人：{{scope.row["诉求联系人"]}}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['流转方向']">流转方向：{{scope.row["流转方向"]}}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['派遣时间'] ">派遣时间：{{scope.row["派遣时间"] }}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['主责部门']">主责部门：{{scope.row["主责部门"] }}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['三级主责部门']">三级主责部门：{{scope.row["三级主责部门"] }}</el-col>
                                                    <el-col :span="24"  v-if="scope.row['处理时间']">处理时间：{{scope.row["处理时间"] }}</el-col>
                                                </el-row>
                                                </div>
                                            </template>
                                            <template>
                                                <div class="name-wrapper" >{{ scope.row[item.prop] }}</div>
                                            </template>
                                        </el-tooltip>
                                    </template>
                                        <template v-else #default="scope">
                                        {{  scope.row[item.prop] }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </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 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 && !jkspStatus">
            <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> -->
         <!-- 普通弹框 -->
         <div class="tableTooltipwt sadianTankang " v-if="jkspStatus">
            <img src="~@a/img/icon/close.png" alt="" class="close" @click="closeJkspStatus" />
            <el-row class="tableContent">
                <el-col class="mk">
                    <p style="font-size:0.2rem">监控视频</p>
                    <el-row>
                        <el-col v-for="ch in stores.$state.jkspData.children" :key="ch" :span="24" >
                            <span class="color1">{{ ch[0] }}</span>
                            <span class="color2">{{ ch[1] }}</span>
                        </el-col>
                    </el-row>
                </el-col>
                <div class="video">
                    <video  :id="Message.videoId" preload="true" autoplay="autoplay"
                    class="hlsVideo monitor-height" ref="hlsVideo" style="width: 100%" controls muted></video>
                </div>
                
            </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";
import Hls from "hls.js";
export default {
    mixins: [linstener, map],
    components: { category, gauge, CountTo,unitBox },
    data() {
        return {
            gridStatisticsNum:{
                total:0,
                over:0,
                rate:0,
                yinhuan:0,
            },
            hls: "",
            Message: {
                "name": undefined,
                "videoId": undefined,
                "videoUrl": false,
            },
            jkspStatus:false,//监控视频弹框状态
            gridStatisticsStatus:true,//处置网格统计状态
            dataNo3:"加载中...",
            gridStatisticsTable:[
                // {
                //     "案件状态": "待申请核查",
                //     "任务号": "2310M2253844",
                //     "发现时间": "2023-10-13 09:18",
                //     "案件来源": "12345上报",
                //     "案件属性": "部件",
                //     "案件大类": "其他设施",
                //     "案件小类": "充电站（桩）",
                //     "案件子类": "其他充电桩相关问题",
                //     "街镇": "华漕镇",
                //     "自治网格": "诸新路居委会",
                //     "自治网格类型": "居委",
                //     "处置网格": "华漕镇处置网格五（诸翟南片区）",
                //     "责任块": "九方家园",
                //     "发生地址": "闵行区华漕镇保乐路168弄九方家园",
                //     "诉求联系人": "臧婷婷",
                //     "流转方向": "平台流转",
                //     "派遣时间": "2023-10-13 09:20",
                //     "主责部门": "华漕镇",
                //     "三级主责部门": "诸新路居委会",
                //     "处理时间": null,
                //     "处理备注": null,
                //     "结案时间": null,
                //     "结案评判": null,
                //     "结案意见": null,
                //     "X坐标": -17369.89850242,
                //     "Y坐标": -2808.9159114,
                //     "问题描述": "市民来电反映:其是上述地址小区居民，要申请安装充电站，物业不肯给其敲章，市民为此不满，故来来电投诉上述小区物业。"
                // }
            ],//处置网格table数据
            gridStatisticsTableType:[],
            gridStatisticsHeader:[
                { prop: "发现时间", name: "发现时间" },
                { prop: "街镇", name: "街镇" },
                { prop: "自治网格", name: "自治网格" },
                { prop: "案件子类", name: "案件子类" },
                { prop: "案件状态", name: "案件状态" },
                
            ],//处置网格header

        value111:'23',   
        //24、厂房仓库?? 25、大型商业综合体??  27、批发市场?? 
        // 23、宾馆酒店  26、规模租赁公寓 28、三合一场所 29、养老机构 30、医疗机构
        options: [
        {
            value: '23',
            label: '宾馆酒店',
        },
        {
            value: '1',
            label: '大型商业综合体',
        },   
        {
            value: '2',
            label: '消防安全重点单位',
        },
        {
            value: '30',
            label: '医疗机构',
        },
        {
            value: '29',
            label: '养老机构',
        },
        
        {
            value: '3',
            label: '厂房仓库',
        },
        {
            value: '4',
            label: '批发市场',
        },
        {
            value: '5',
            label: '居民小区',
        },
       
        {
            value: '26',
            label: '规模租赁公寓',
        },
        {
            value: '28',
            label: '三合一场所',
        },
       
        {
            value: '6',
            label: '电动自行车领域',
        },
       
        ],
        arrayData:[],
        line3Array:[
                {
                    "name": "大型综合体",
                    "count": 4,
                },
                {
                    "name": "重点单位",
                    "count": 14,
                },
                {
                    "name": "酒店/宾馆",
                    "count": 11,
                },
                {
                    "name": "高层建筑",
                    "count": 14,
                },{
                    "name": "厂房/仓库",
                    "count": 11,
                },
                {
                    "name": "商市场",
                    "count": 11,
                },
                {
                    "name": "公共娱乐场所",
                    "count": 11,
                },
                {
                    "name": "医疗机构",
                    "count": 103,
                },{
                    "name": "养老机构",
                    "count": 11,
                },
                
                {
                    "name": "规模租赁",
                    "count": 103,
                },
                {
                    "name": "办公楼宇",
                    "count": 103,
                },
                {
                    "name": "在建工地",
                    "count": 11,
                },
                {
                    "name": "居民小区",
                    "count": 4,
                },{
                    "name": "沿街门面",
                    "count": 20,
                },
                {
                    "name": "宗教场所",
                    "count": 4,
                },
                {
                    "name": "学校",
                    "count": 20,
                },
                {
                    "name": "加油（汽）站",
                    "count": 20,
                },{
                    "name": "地铁站",
                    "count": 11,
                },{
                    "name": "社会消费组织（微站/专职队）",
                    "count": 11,
                }
            ],
        staticData:{
            array:[],
            total:0,
            array1:[
                {
                    "streetTown": "消防站",
                    "count": 21,
                    "color": "#FF0709"
                },
                {
                    "streetTown": "流动消防站（一级）",
                    "count": 27,
                    "color": "#F48354"
                },
                {
                    "streetTown": "流动消防站（二级",
                    "count": 26,
                    "color": "#73FBFD"
                },
                {
                    "streetTown": "微型消防站",
                    "count": 11,
                    "color": "#4FE261"
                }
            ]

        },
        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: 20, unit: "人", color: "#058DFE" },
                { name: "增援干部", value: 11, unit: "人", color: "#058DD1" },
                { name: "大网格", value: 4, unit: "个", color: "#FC0609 " },
                { name: "中网格", value: 14, unit: "个", color: "#FD843A" },
                { name: "小网格", value: 103, unit: "个", color: "#7DD807" },
                // {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: [19],
                checkedList: [
                    { value: 0, label: "车辆" },
                    { value: 1, label: "历史警情" },
                    { value: 2, label: "历史火灾" },
                    { value: 3, label: "重点单位" },
                    { value: 4, label: "消防站" },
                    { value: 19, label: "大网格" },
                    { value: 15, label: "中网格" },
                    { value: 16, label: "小网格" },
                    { value: 17, label: "监控视频" },
                    { value: 18, 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.gridStatisticsData()//处置网格数据
        this.surveillance()//监控视频
        this.grid(15);
        setTimeout(() => {
            this.autoScroll();
        });
        window.addEventListener("resize", () => this.resizeTimeActions([this.$refs.category, this.$refs.gauge1]), true);
        this.initMap("anbao"); //地图初始化
        this.anbao(null, 3);
        this.anbaoMap()
        this.getFireSiteDuty(); //各站点执勤实力
        this.selectVideo(); //视频在线
        // this.sadianSelect(this.checkedArray.checkedData[0]); //撒点
        this.getStaticData(this.value111)
    },
    methods: {

        getStaticData(type){
            // this.$axios.post(
            //         this.$api.water.baseGgpFacilityStatistic +
            //         "?" +
            //         this.$qs.stringify({
            //             facilityType: type, 
            //         })
            //     ).then(res=>{
                this.$axios.post(this.$api.water.baseGgpFacilityStatistic,{
                                "facilityType": [type ] 
                        }).then((res) => {
                    this.staticData.array=res.data;
                    var colorArr=['#00C8B8','#068DFF','#FF843A','#7DD807'];
                    this.staticData.array.forEach((item, index) => {
                        item.color = colorArr[index]
                    })
                    console.log(this.staticData.array)

                    var totalCount=0
                    res.data.forEach(function(item){
                        totalCount+=Number(item.count)

                    })
                    this.staticData.total=totalCount
                })

        },
        getOneUnit(val){
            if(val=='29'||val=='30'){  //表格及撒点
                this.$axios.post(this.$api.water.baseGgpFacilityList,{
                                "facilityType": [val ] 
                        }).then((res) => {
                            console.log(res)
                                let arr = []
                                if(res.data.length>0){
                                        arr = res.data;
                                        this.arrayData= res.data;
                                        if(val=='29'){
                                            this.addMarker(arr, "security-plan", "养老机构安全隐患清单")
                                        }else{
                                            this.addMarker(arr, "security-plan", "医疗机构安全隐患清单")
                                        }
                                }  
                        });

            }else if(val=='23'||val=='26'||val=='28'){ //统计
                this.getStaticData(val)
            }
        },
        beforeDestroy() {
            this.autoScroll(true);
        },
        closeJkspStatus(){
            this.jkspStatus = false
            this.destroyHls()
        },
        //播放按钮
        play() {
            this.destroyHls()
            this.loadVideoFn(this.Message.videoUrl)
        },
        destroyHls: function () {//关闭视频拉取
            if (this.hls) {
                this.$refs.hlsVideo.pause();
                this.hls.destroy();
                this.hls = null;
            }
        },
        loadVideoFn(url) {//视频播放
            setTimeout(() => {
                if (Hls.isSupported()) {
                    this.hls = new Hls();
                    this.hls.loadSource(url);
                    this.hls.attachMedia(this.$refs.hlsVideo);
                    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
                        // console.log("加载成功");
                        this.$refs.hlsVideo.play();
                    });

                    this.hls.on(Hls.Events.ERROR, (event, data) => {
                        // console.log(event, data);
                        // 监听出错事件
                        //console.log("加载失败");
                    });
                }
            }, 1000)
        },
        /**
         * 监控视频
         */
        surveillance(){
            axios({
                method: "get",
                url: "http://32.1.7.96:8086/fireMajorSecurityProcess/selectSecurityViewUrl",
                params:{
                    "pageNum":"1",
                    "pageSize":"500",
                }
            }).then((res) => {
                this.sadian(res.data.data, "security-plan", "监控视频");
            })
        },
        /**
         * 网格统计状态切换
         */
        gridStatisticsGoBack(){
            this.gridStatisticsStatus = true
        },
        /**
         * 网格数据统计
         */
         gridStatisticsData(){
            let formData = new FormData()
            formData.append('grant_type', "client_credentials")
            formData.append('client_id', "12016")
            formData.append('client_secret', "956DD43944464DCeB262cED7d351AAA4")
            formData.append('scope', "api.read")
            axios({
                headers: {
                'Content-Type': 'multipart/form-data'
                },
                method: "post",
                url: "http://32.1.8.124:5001/connect/token",
                data:formData
            }).then((res) => {
                axios({
                        headers: {
                            'Content-Type': 'multipart/form-data',
                            "AppId": "12016",
                            "ResourceId": "1884",
                            "Authorization":'Bearer ' +  res.access_token
                        },
                        
                    method: "get",
                    url: "http://32.1.8.124:5002/api/data-share/1884/json",
                    params:{
                        "STARTTIME":dayjs().subtract(0, "day").format("YYYY-MM-DD"),
                        "ENDTIME":dayjs().subtract(0, "day").format("YYYY-MM-DD"),
                        "STREETCODE":"",
                        "INFOTYPEID":"",
                        "INFOBCCODE":"",
                        "INFOSCCODE":"",
                        "INFOZCCODE":"",
                        // "ENDTIME":"2023-12-01",
                    }
                }).then((res2) => {
                    console.table(res2.values)
                    this.gridStatisticsTable.total = []
                    this.gridStatisticsTable.over = []
                    this.gridStatisticsTable.yinhuan = []
                    this.gridStatisticsTable.total = res2.values
                    this.gridStatisticsTableType = this.gridStatisticsTable.total
                    this.gridStatisticsNum.total = res2.values.length
                    let num = 0;
                    let yinhuan = 0
                    for(let i =0;i<res2.values.length;i++){
                        if(res2.values[i]["案件状态"] == "已结案"){
                            num ++
                            this.gridStatisticsTable.over.push(res2.values[i])
                        }
                        if(res2.values[i]["案件子类"].indexOf("部件") > -1 || 
                        res2.values[i]["案件子类"].indexOf("三违") > -1 || 
                        res2.values[i]["案件子类"].indexOf("扰乱火灾") > -1 || 
                        res2.values[i]["案件子类"].indexOf("焚烧") > -1 || 
                        res2.values[i]["案件子类"].indexOf("森林火灾") > -1 ){
                            
                        }else{
                            yinhuan ++ 
                            this.gridStatisticsTable.yinhuan.push(res2.values[i])
                        }

                    }
                    setTimeout(()=>{
                        this.gridStatisticsNum.over = num
                        this.gridStatisticsNum.yinhuan = yinhuan
                        if(num){
                            this.gridStatisticsNum.rate = ((num / this.gridStatisticsNum.total) * 100).toFixed(2)
                        }else{
                            this.gridStatisticsNum.rate = 0
                        }
                    },50)
                })
            })
         },
        /**
         * 网格统计
         * @param {} id 1上报数，2隐患数，3处置数
         */
        gridStatistics(id){
            this.gridStatisticsStatus = false 
            if(id == 1){
                this.gridStatisticsTableType =  this.gridStatisticsTable.total  
            }
            if(id == 2){
                this.gridStatisticsTableType =  this.gridStatisticsTable.over  
            }
            if(id == 3){
                this.gridStatisticsTableType =  this.gridStatisticsTable.yinhuan  
            }
            
        },

        /**
         * 在线视频
         */
         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,
                            };
                            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.anbaoMap()
                this.grid(id);
            } else if (id == 16) {
                this.gridStatus = id;
                this.grid(16, null, null, 1);
                this.anbaoMap()
                this.anbao(1, 2);
            } else if (id == 17) {
                this.surveillance()
            } else if (id == 18) {
                this.gridStatus = id;
                this.anbao(1, 3);
                this.anbaoMap()
            } 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 = undefined
            for(let i =0;i<this.checkedArray.checkedList.length;i++){
                if(id ==this.checkedArray.checkedList[i].value ){
                        type = this.checkedArray.checkedList[i].label
                        // this.checkedSelectLabel = type
                }
            }
            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", "街镇专职消防队");
                        });
                }
                if (id == 18) {
                        this.$axios
                        .get(this.$api.fire.fireSafetyInspectionScatter)
                        .then((res) => {
                            console.log(123,res)
                            for(let i =0;i<res.data.length;i++){
                                res.data[i].type = "监督检查"
                                arr.push(res.data[i])
                            }
                            let data = {
                                gisX: 121.302183,
                                gisY: 31.189991,
                                type: "国家会展中心",
                            };
                            arr.push(data);
                            this.addMarker(arr, "security-plan", "监督检查");
                        });
                }
            }
        },
        /**
         * 撒点
         */
        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 = [];
                    let qw = []
                    for (let i = 0; i < gridData.length; i++) {
                        if (gridData[i].mapGridName) {
                            queryData.push(gridData[i]);
                        }else{
                            qw.push(gridData[i])
                        }
                        
                    }
                    console.log(queryData)
                    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];
                        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) {
                            //片区
                            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);
            }
        },
        "stores.$state.jkspData": function (newValue, oldValue) {
            this.jkspStatus = true
            this.Message.name = newValue.children[0][1]
            this.Message.videoId = newValue.id
            this.Message.videoUrl = newValue.url
            // "http://videocdn.didano.com/school765class0channelId2761namedingdangm/playlist.m3u8"
            this.play()
        },
     

    },
    // watch: {
    //     "stores.$state.jkspData": function (newValue, oldValue) {
    //         console.log(123,newValue,this.stores.$state.jkspData)
    //         this.jkspStatus = true
    //         console.log(this.jkspStatus)
    //         this.Message.name = newValue.children[0][1]
    //         this.Message.videoId = newValue.id
    //         this.Message.videoUrl = "http://videocdn.didano.com/school765class0channelId2761namedingdangm/playlist.m3u8"
    //         // this.Message.videoUrl = newValue.url
            
    //         this.play()
    //     },
    // },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/color.scss";
.contentBox {
    .leftBox {
        .leftTop {
            height: 43%;
            max-height: 43%;
            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;
                .sdqBasicInfo{
                    .basicItem{
                        width:19%; margin: 4px 0;  box-sizing: border-box;
                        .nameBox{
                            background-image: url(~@a/img/securityPlan/sdTextBg.png);
                            background-size: contain;
                            width: 100%;
                            display: inline-block
                        }
                    }
                    .basicItem:not(:last-child){
                        margin-right:.07rem

                    }
                    
                   

                }
                .sdqBasicInfo.sdline2{
                    .basicItem{
                        margin:0 .4rem;
                    }

                }
                .sdline3 {
                    margin-top:.25rem;
                   
                    .basicItem{
                    width:14.28%; margin: 0px 0;  box-sizing: border-box;
                    position:relative;
                    }
                    // .basicItem::after {
                    //     position: absolute; /*绝对定位*/
                    //     top: 50%; /*Y轴方向偏移自身高度的50%*/
                    //     transform: translatey(-40%); /*Y轴方向偏移微调*/
                    //     right: 0; /*紧靠容器左边缘*/
                    //     content: ''; /*伪元素需要有内容才能显示*/
                    //     width: 1px; /*伪元素宽度*/
                    //     height: 40px; /*伪元素高度*/
                    //     background-color: rgba(168, 164, 164,.4); /*伪元素颜色*/
                    // }



               

                }
                .sdline3 .basicItem:last-child{
                    width:auto
                }

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

                        p:nth-child(2) {
                            // text-align: center;
                            strong {
                                font-size: 0.2rem;
                            }
                        }
                    }
                }
            }
        }

        .leftCenter {
            height: 32%;
            max-height: 32%;
            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;
                                }
                            }
                        }
                    }
                }
            }
        }
        .rightTop3 {
            height: 30%;
            max-height: 30%;
            position:relative;
            .return{
                position: absolute;
                top:0px;
                right:0px;
                .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;
                }
            }

            .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) {
                                    font-size: 0.3rem;
                                    margin-top:14px;
                                    vertical-align: bottom;
                                }

                                // .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%;
            }
        }
        .rightTop1{
            height:70.5%;
            .girdCheckItem{
                p{
                    font-size:0.225rem;
                    margin:.1875rem 0 .125rem;
                    color:rgb(234, 183, 147);
                    font-weight:700;
                    span{
                        font-size: 0.175rem;
                        color:#fff;
                        
                    }
                }
                .row_g{
                    margin-top:-10px;
                    width:100%;
                    div{
                        width:14% !important;
                        display: inline-block;
                        font-size:.155rem;
                        margin:.125rem 0;
                        text-align: left;
                        vertical-align: top;
                    }
                }
                .row_g2{
                    margin-top:-10px;
                    width:100%;
                    div{
                        width:20% !important;
                        display: inline-block;
                        font-size:.155rem;
                        margin:.125rem 0;
                        text-align: left;
                        vertical-align: top;
                        text-align: center;
                    }
                }
                .row_g3{
                    margin-top:-10px;
                    width:100%;
                    div{
                        width:16% !important;
                        display: inline-block;
                        font-size:.155rem;
                        margin:.125rem 0;
                        text-align: left;
                        vertical-align: top;
                        text-align: center;
                    }
                }
                    
                
                    
                
                


            }
        }

        
    }
}



.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%;
    }
    .tableTooltipwt {
        position: fixed;
        top:120px;left:39%;
        max-height:500px;
        overflow-y: scroll;
        background:none;
        width:400px;
        bottom:auto;
         padding:10px 10px 5px 10px !important;
          border-radius: 0.05rem;
          border:1px solid rgba(115, 251, 253, 1);
          box-shadow: inset 0 0 1px 0.0125rem rgba(115, 251, 253, 1);
           background:rgba(0, 0, 0, 0.6);
        z-index: 10000;
  .close {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10000;
    display: block;
  }
  .tableContent {
    p {
      @include color_primary($color-primary1);
      font-size: 0.2rem;
    }

    .el-col {
      margin-top: 0.05rem;
      line-height: 0.3rem;
      text-overflow: ellipsis !important;
      white-space: normal !important;
      font-size: 0.18rem;
    }
    .mk {
      margin-top: 0px;

      .color1 {
        @include color_primary($color-primary3);
      }
      .color2 {
        @include color_primary($color-primary1);
      }
    }
    .video{
        width:100%;
        margin:10px 0;
    }
  }
}
</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>