fire-mh/src/views/comprehensive-disposal.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: wt
 * @Date: 2023-01-29 13:14:08
 * @LastEditors: wt
 * @LastEditTime: 2023-03-24 22:52:09
-->
<template>
  <el-row class="contentBox">
    <transition name="el-fade-in-linear">
      <el-col class="leftBox" v-show="stroes.$state.leftBtn">
        <div class="leftTop">
          <div style="display: flex">
            <h4>警情时段分布</h4>

            <div style="display: flex; border-bottom: 0.0125rem solid rgba(115, 251, 253, 0.5);margin-right:50px;">
              <el-form class="titleElForm" :inline="true" size="mini" :model="barForm" style="height: 0">
                <el-form-item label="场所分类：">
                  <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-form-item>
              </el-form>
            </div>
          </div>

          <div class="leftTopContent">
            <el-row class="fireBar">
              <line-smooth ref="lineSmooth" :dataMap="houseList"></line-smooth>
            </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-button size="mini" @click="searchTabs('历史警情趋势图', 1)" :class="{ btnClick: timeArea === 1 }">近一年</el-button>
              <el-button size="mini" @click="searchTabs('历史警情趋势图', 3)" :class="{ btnClick: timeArea === 3 }">近三年</el-button>
              <el-button size="mini" @click="searchTabs('历史警情趋势图', 5)" :class="{ btnClick: timeArea === 5 }">近五年</el-button>
            </div>
          </div>

          <div class="leftCenterContent">
            <div class="contentEcharts">
              <bar-chart ref="barChart" :dataMap="monthList"></bar-chart>
            </div>
          </div>
        </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>
            <el-select class="mtb-12" v-model="stroes.$state.streetTown" placeholder="请选择街镇" @change="checkStreetTown">
              <el-option v-for="item in stroes.$state.streetTownList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <p>类型筛选</p>
            <el-checkbox-group v-model="checkedArray.checkedData" size="medium">
              <el-checkbox v-for="(item, index) in checkedArray.checkedList" :label="item.value" :key="index" @change="checkboxChange(item.value)">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </div> -->
        </div>

        <div class="mapTips_type">
          <img src="@/assets/img/svg/danweitop.svg" alt="" class="img" />
          <div class="content">
            <p>街镇筛选</p>
            <el-select class="mtb-12" v-model="stroes.$state.streetTown" placeholder="请选择街镇" @change="checkStreetTown">
              <el-option v-for="item in stroes.$state.streetTownList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <p>类型筛选</p>
            <div class="selectType">
              <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' : 
                                    checkedArray.checkedData[0] == 46  ? 'checkTypeSelect' : 
                                    checkedArray.checkedData[0] == 47  ? 'checkTypeSelect' : 
                                     ' '
                                "
                            >
                                 <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.yjxfz : 
                                checkedSelectValue=='47' ? stores.sadianIcon.jzzzxfd : 
                                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(0)"
                                :class="
                                    checkedArray.checkedData[0] == 0
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.xfc" alt="" />
                                <span>消防车</span>
                            </div>
                            <div
                                @click="checkboxChange(6)"
                                :class="
                                    checkedArray.checkedData[0] == 6
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.jk" alt="" />
                                <span>监控</span>
                            </div>
                            <div
                                @click="checkboxChange(111)"
                                :class="
                                    checkedArray.checkedData[0] == 111
                                        ? 'checkTypeSelect'
                                        : ''
                                "
                            >
                                <img :src="stores.sadianIcon.ssjq" alt="" />
                                <span>实时警情</span>
                            </div>
             
            </div>
          </div>
        </div>
      </el-col>
    </transition>
    <transition name="el-fade-in-linear">
      <el-col class="rightBox" v-show="stroes.$state.rightBtn">
        <div class="rightTop" v-if="!(checkedArray.checkedData[0] == 1 && stores.$state.mapSpotId)">
          <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 style="text-align: center" v-if="item.radio">
                  同比<span :style="{'color':item.sameStatus ==2 ? '#C2020D' : '#00C31B'}">{{ item.sameStatus ==2 ? '+' + item.radio :  '-' + item.radio}}%</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="rightCenter" v-if="!(checkedArray.checkedData[0] == 1 && stores.$state.mapSpotId)">
          <h4>实时警情处理</h4>

          <div class="rightCenterContent">
            <el-table
            :data="tableData"
            class="transparentTableRow table1"
            height="100%"
            style="width: 100%; margin: 0 auto"
            
          >
            <el-table-column
              
              v-for="item in headerData"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              style="margin: 0 auto"
              min-width="20"
              :label="item.name"
            >
              <template  
             v-if="item.prop === 'type' || 
              item.prop === 'lasj2'  || 
              item.prop === 'ajzt'  || 
              item.prop === 'afdz'  || 
              item.prop === 'czdx'  ||
              item.prop ==='zhongdui' " #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.ajbh">案件编号：{{scope.row.ajbh}}</el-col>
                        <el-col :span="24"  v-if="scope.row.bcxx ">案件描述：{{scope.row.bcxx }}</el-col>
                        <el-col :span="24"  v-if="scope.row.tzsj">报警时间：{{scope.row.tzsj}}</el-col>
                        <el-col :span="24"  v-if="scope.row.ajlx">案件类型：{{scope.row.ajlx}}</el-col>
                        <el-col :span="24"  v-if="scope.row.type">警情类别：{{scope.row.type}}</el-col>
                        <el-col :span="24"  v-if="scope.row.ajdj">警情等级：{{scope.row.ajdj}}</el-col>
                        
                       
                        <el-col :span="24"  v-if="scope.row.afdz">案发地址：{{scope.row.afdz}}</el-col>
                        <el-col :span="24"  v-if="scope.row.cdcl">调动车辆：{{scope.row.cdcl}}</el-col>
                        <el-col :span="24"  v-if="scope.row.czdx">处置对象：{{scope.row.czdx}}</el-col>
                        
                        <el-col :span="12"  v-if="scope.row.zhongdui">主责中队：{{scope.row.zhongdui}}</el-col>
                        
                        
                        <el-col :span="12"  v-if="scope.row.ajzt">案件状态：{{scope.row.ajzt}}</el-col>
                        <el-col :span="24"  v-if="scope.row.dcsj">到场时间：{{scope.row.dcsj}}</el-col>

                        <el-col :span="24"  v-if="scope.row.cssj">出水时间：{{scope.row.cssj}}</el-col>
                        <el-col :span="24"  v-if="scope.row.kzsj">控制时间：{{scope.row.kzsj}}</el-col>
                        <el-col :span="24"  v-if="scope.row.xmsj">熄灭时间：{{scope.row.xmsj}}</el-col>
                        <el-col :span="24"  v-if="scope.row.fdsj ">返队时间：{{scope.row.fdsj }}</el-col>
                        <el-col :span="24"  v-if="scope.row.streettown">所属街道：{{scope.row.streettown }}</el-col>
                      </el-row>
                      <el-row class="tablePersonnel">
                        <el-col :span="7">
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                  <template>
                    <i class="iconfont" 
                    :class="scope.row['ajlxdm'] == '1' ? 'icon-huozai' : scope.row['ajlxdm'] == '2' ? 'icon-jiuyuan' : scope.row['ajlxdm'] == '3' ? 'icon-shehuijiuzhu' : 'icon-pbaj'"
                    :style="{color: scope.row['ajdj'] == '零级' ? '#49b8ff' : scope.row['ajdj'] == '一级' ? '#eec10d' : scope.row['ajdj'] == '二级' ? '#ff730c' : scope.row['ajdj'] == '三级' ? '#ff0012' : '#2e98f2'}"
                     v-if="item.prop === 'type'"></i>
                    <div class="name-wrapper" v-else>{{ scope.row[item.prop] }}</div>
                  </template>
                </el-tooltip>
              </template>
              <template v-else #default="scope">
                  {{ item.prop === 'type' ? '' : item.prop === 'lasj' ? scope.row[item.prop] && scope.row[item.prop].slice(5) :  item.prop === 'afdz' ? scope.row[item.prop].replace(new RegExp("闵行区 ",""),"") : item.prop === 'status' ? (scope.row[item.prop] == 1 ? '可用' : '不可用') : scope.row[item.prop]}}
              </template>
            </el-table-column>
            
          </el-table>
          <el-card class="box-card" v-if="isVideo">
          <template #header>
            <div class="card-header">
              <div class="top">
                <span>实时视频</span>
                <i class="el-icon-close" @click="isVideo = false"></i>
              </div>
              
              <div class="iframe2">
                <video 
                    :id="video.videoId"  
                    class=" video-js vjs-default-skin videoPaly" 
                    preload="auto" 
                    autoplay="autoplay" 
                    src="http://32.0.15.107:80/mhvi" type="application/x-mpegURL">
                </video>
              </div>
              
            </div>
          </template>
          </el-card>
          </div>
        </div>

        <div class="rightBottom" v-if="!(checkedArray.checkedData[0] == 1 && stores.$state.mapSpotId)">
          <h4>4G图传</h4>
          <el-row class="monitor-list">
            <el-col :span="11" class="list">
              <el-select v-model="zfjly1" placeholder="请选择4G图传" class="videoSelect">
                <el-option v-for="item in selectVideoData" :key="item.url" :label="item.name" :value="item.url"> </el-option>
              </el-select>
              <iframe class="hlsVideo monitor-height" :src="zfjly1" allowfullscreen="true"></iframe>
            </el-col>
            <el-col :span="11" class="list" :offset="2">
              <el-select v-model="zfjly2" placeholder="请选择4G图传" class="videoSelect">
                <el-option v-for="item in selectVideoData" :key="item.url" :label="item.name" :value="item.url"> </el-option>
              </el-select>
              <iframe class="hlsVideo monitor-height" :src="zfjly2" allowfullscreen="true"></iframe>
            </el-col>
          </el-row>
        </div>

        <div class="rightTop1" v-if="checkedArray.checkedData[0] == 1 && stores.$state.mapSpotId">
          <div style="display: flex">
            <h4>消防站值班人员</h4>
            <div style="display: flex; border-bottom: 0.0125rem solid rgba(115, 251, 253, 0.5)">
              <el-button size="mini" @click="searchTabs('消防站值班人员', 'day')" :class="{ btnClick: timeArea1 === 'day' }">日</el-button>
              <el-button size="mini" @click="searchTabs('消防站值班人员', 'month')" :class="{ btnClick: timeArea1 === 'month' }">月</el-button>
            </div>
          </div>

          <div class="rightTopContent">
            <template v-if="timeArea1 === 'day'">
              <el-col v-for="item in unitBeOnDutyList" :key="item.name" class="day">
                <el-col class="rank">{{ item.postName }}</el-col>
                <el-col><img src="~@a/img/test/bg2.png" alt="" /></el-col>
                <el-col class="propName">{{ item.name }}</el-col>
              </el-col>
            </template>
            <div v-else style="margin-top: 0.1rem; height: calc(100% - 0.1rem)">
              <se-table ref="seTable" :dataMap="unitBeOnDutyListData" :headerData="unitBeOnDutyHeaderList" :key="windowWidth"></se-table>
            </div>
          </div>
        </div>

        <div class="rightCenter1" v-if="checkedArray.checkedData[0] == 1 && stores.$state.mapSpotId">
          <h4>战备力量</h4>

          <div class="rightCenterContent">
            <el-row>
              <el-row class="title">备勤（1辆车，6人）</el-row>
              <el-row class="data">
                <el-col :span="24">车牌号：沪X6565</el-col>
                <el-col :span="8">指挥员：张三1</el-col>
                <el-col :span="8">通讯员：王五1</el-col>
                <el-col :span="8">消防员：李四1</el-col>
                <el-col :span="8">驾驶员：张三2</el-col>
                <el-col :span="8">消防员：王五2</el-col>
                <el-col :span="8">消防员：王五3</el-col>
              </el-row>
              <el-row class="title">备勤（1辆车，6人）</el-row>
              <el-row class="data">
                <el-col :span="24">车牌号：沪X6565</el-col>
                <el-col :span="8">指挥员：张三1</el-col>
                <el-col :span="8">通讯员：王五1</el-col>
                <el-col :span="8">消防员：李四1</el-col>
                <el-col :span="8">驾驶员：张三2</el-col>
                <el-col :span="8">消防员：王五2</el-col>
                <el-col :span="8">消防员：王五3</el-col>
              </el-row>
              <el-row class="title">备勤（1辆车，6人）</el-row>
              <el-row class="data">
                <el-col :span="24">车牌号：沪X6565</el-col>
                <el-col :span="8">指挥员：张三1</el-col>
                <el-col :span="8">通讯员：王五1</el-col>
                <el-col :span="8">消防员：李四1</el-col>
                <el-col :span="8">驾驶员：张三2</el-col>
                <el-col :span="8">消防员：王五2</el-col>
                <el-col :span="8">消防员：王五3</el-col>
              </el-row>
              <el-row class="title">备勤（1辆车，6人）</el-row>
              <el-row class="data">
                <el-col :span="24">车牌号：沪X6565</el-col>
                <el-col :span="8">指挥员：张三1</el-col>
                <el-col :span="8">通讯员：王五1</el-col>
                <el-col :span="8">消防员：李四1</el-col>
                <el-col :span="8">驾驶员：张三2</el-col>
                <el-col :span="8">消防员：王五2</el-col>
                <el-col :span="8">消防员：王五3</el-col>
              </el-row>
            </el-row>
          </div>
        </div>
      </el-col>
    </transition>
  </el-row>
</template>
<script>
import axios from "axios";
import seTable from "@c/se-table/index2";
import barChart from "@c/bar";
import lineSmooth from "@c/line-smooth";
import linstener from "@c/mixins/linstener";
import map from "@c/mixins/map-data1";
import gauge from "@c/gauge/index3";
// import map from "@c/mixins/map-gaode-public";
import {
  getYearMonthDateSFN,
  getMonthStartAndEnd,
  getMonthStartDate,
  getMonthEndDate,
} from "../assets/js/dataFormate";
import { includes } from 'lodash';
export default {
  data() {
    return {
      stores: this.$useStore(),
      zfjly1: undefined,
      zfjly2: undefined,
      zfjly3: undefined,
      zfjly4: undefined,

      left1: false,
      left2: false,
      left3: false,
      right1: false,
      right2: false,
      spStatus: false,
      spData: {},
      selectVideoData: [],

      tableData: [],
      headerData: [
        { prop: "type", name: "警情类别" },
        { prop: "lasj2", name: "立案时间" },
        // { prop: "ajdj", name: "警情等级" },
        { prop: "afdz", name: "案发地址" },
        // { prop: "cdcl", name: "调动车辆" },
        // { prop: "bcxx", name: "原因" },
        // { prop: "czdx", name: "处置对象" },
        { prop: "zhongdui", name: "所属中队" },
        { prop: "ajzt", name: "状态" },
        // { prop: "sp", name: "" },
      ],
      // headerData: [
      //   { prop: "type", name: "类型" },
      //   { prop: "filingTime", name: "立案时间" },
      //   { prop: "caseLevel", name: "警情等级" },
      //   { prop: "address", name: "案发地址" },
      //   { prop: "dispatchVehicle", name: "调动车辆" },
      //   { prop: "supplement", name: "原因" },
      //   { prop: "handleObject", name: "处置对象" },
      //   { prop: "squadron", name: "所属中队" },
      //   { prop: "caseStatus", name: "状况" },
      // ],

      isVideo: false,
      barForm: {
        fireType: "",
        address: "",
      },
      time:null,//实时告警计时器

      houseList: [], //警情时段分布-echarts图表数据存储
      fireTypeList: [], //警情时段分布-下拉选择框数据存储
      monthList: [], //历史警情趋势图-echarts图表数据存储
      timeArea: 1, //历史警情趋势图-时间tabs切换数据存储
      proptionList: [
              [],
              [],
              [],
      ], //警情处置情况-数据存储

      timeArea1: "day",
      unitBeOnDutyList: [],
      unitBeOnDutyListData: [],
      unitBeOnDutyHeaderList: [
        { prop: "date", name: "日期" },
        { prop: "attribute1", name: "指挥长" },
        { prop: "attribute2", name: "防火宣传" },
        { prop: "attribute3", name: "值班领导" },
        { prop: "attribute4", name: "带班领导" },
        { prop: "attribute5", name: "调度指挥员" },
        { prop: "attribute6", name: "作战助理" },
        { prop: "attribute7", name: "行政" },
        { prop: "attribute8", name: "政工战保" },
      ],

      checkedArray: {
                checkedData: [111],
                checkedList: [
                    { value: 4, label: "消防站" },
                    { value: 5, label: "消防车" },
                    { value: 6, label: "监控" },
                    { value: 111, 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: "街镇专职消防队" },
            ],
    };
  },
  mixins: [linstener, map],
  components: {  barChart,lineSmooth, seTable,gauge },
  created() {
    this.getData();
  },
  mounted() {
    window.addEventListener("resize", () => this.resizeTimeActions([
            this.$refs.gauge1, 
            this.$refs.lineSmooth, 
            this.$refs.barChart,
            ]), true);
    this.initMap();
    this.time = setInterval(()=>{
      this.getPageApi()
    },1000 * 60)
  },
  unmounted(){
        clearInterval(this.time)
        this.time = null
        
  },
  methods: {
    /**
     * 在线视频
     */
    async selectVideo(id) {
        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",
      }).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 + "&nmediaid=121",
                };
                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, "comprehensive-disposal");
            }
          }
      })

      // 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",
      // }).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 + "&nmediaid=121",
      //         };
      //         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, "comprehensive-disposal");
      //     }
      //   }
      // });
    },
    /**
     * @初始化
     */
    async getData() {
      this.sadianSelect(111); //撒点
      
//       this.checkboxChange(41)
      this.alertStatisticsByHouseApi(); //警情时段分布接口请求
      this.alertStatisticsByMonthApi(); //历史警情趋势图接口请求
      this.getPageApi(); //实时警情处理接口请求
      this.proptionApi(); //警情处置情况接口请求
      this.selectVideo(); //视频在线
      this.getXiangqingPage();
      this.getXiangqingOne();
    },

    /**
     * @点击街镇事件
     */
    async getStreetTownClick() {
//       this.sadianSelect(this.checkedArray.checkedData[0]); //撒点
      this.alertStatisticsByHouseApi(); //警情时段分布接口请求
      this.alertStatisticsByMonthApi(); //历史警情趋势图接口请求
      this.getPageApi(); //实时警情处理接口请求
      this.proptionApi(); //警情处置情况接口请求
    },


    /**
     * @历史警情趋势图
     * @消防站值班人员
     * @tabs切换
     * @param {传入值Bool} type
     * @param {传入值Sting} val
     */
    searchTabs(type, val) {
      if (type === "历史警情趋势图") {
        this.timeArea = val;
        this.alertStatisticsByMonthApi();
      } else if (type === "消防站值班人员") {
        this.timeArea1 = val;
        this.getSiAeAllCollect();
      }
    },

    /**
     * @街镇复选事件
     */
    checkboxChange(value) {
      if (this.stores.$state.mapSpotId) {
        this.stores.$state.mapSpotId = ""; //地图撒点id
      }
      this.checkedArray.checkedData[0] = value;
      this.sadianSelect(value);
    },

    /**
     * 撒点测绘院、高德
     */
    sadianSelect(id) {
        console.log(id)
      if (this.stroes.$state.mapBool == 1) {
        this.mapCluster();
        // this.warningInstanceScattererApi();
      } else {
        this.sadian(id);
      }
    },

    /**
     * @实时警情处理
     * @click事件
     */
    async rowClickMap(row) {
      row.longitude = row.gisX;
      row.latitude = row.gisY;

      // this.addMarker([row]);
      this.initMarkers([row], "警情综合处置", this.checkedArray.checkedData[0]);

      this.addMarkerInfo([row.longitude, row.latitude], row);
    },

    /**
     * @警情时段分布
     * @api接口请求
     */
    async alertStatisticsByHouseApi() {
      //下拉框接口请求
      let res = await this.$axios.get(this.$api.fire.fireType + "?" + this.$qs.stringify({}));
      if (res.data.length > 0) {
        this.fireTypeList = res.data;
      }
      //echarts图表接口请求
      let day = new Date().getDate().length>1 ?  new Date().getDate() : '0' + new Date().getDate() 
      let res1 = await this.$axios.get(
        this.$api.jqzhcz.alertStatisticsByHouse2 +
          "?" +
          this.$qs.stringify({
            // startTime: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" +  day + " 00:00:00",

        //     endTime: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + day + " 23:59:59",
        //     startTime:  (dayjs().subtract(90, 'day').format('YYYY-MM-DD HH:mm:ss')).slice(0,10)   + " 00:00:00",
            endTime: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + day + " 23:59:59",
            startTime:  (dayjs().subtract(30, 'day').format('YYYY-MM-DD HH:mm:ss')).slice(0,10)   + " 00:00:00",
            // startTime:  "2022-11-01 00:00:00",

            // endTime:"2022-11-31 23:59:59",
            streetTown: this.stroes.$state.streetTown, //街镇
          })
      );

      if (res1.status === "SUCCESS") {
        let data1 = []
        let data2 = []
        let data3 = []
        data1["抢险救援"] = res1.data["抢险救援"]
        data2["火灾"] = res1.data["火灾"]
        data3["社会救助"] = res1.data["社会救助"]

        // data1["抢险救援"][0].avg = data1["抢险救援"][0].avg + data1["抢险救援"][1].avg + data1["抢险救援"][2].avg
        // data1["抢险救援"][1].avg = data1["抢险救援"][3].avg + data1["抢险救援"][4].avg + data1["抢险救援"][5].avg
        // data1["抢险救援"][2].avg = data1["抢险救援"][6].avg + data1["抢险救援"][7].avg + data1["抢险救援"][8].avg
        // data1["抢险救援"][3].avg = data1["抢险救援"][9].avg + data1["抢险救援"][10].avg + data1["抢险救援"][11].avg
        // data1["抢险救援"][4].avg = data1["抢险救援"][12].avg + data1["抢险救援"][13].avg + data1["抢险救援"][14].avg
        // data1["抢险救援"][5].avg = data1["抢险救援"][15].avg + data1["抢险救援"][16].avg + data1["抢险救援"][17].avg
        // data1["抢险救援"][6].avg = data1["抢险救援"][18].avg + data1["抢险救援"][19].avg + data1["抢险救援"][20].avg
        // data1["抢险救援"][7].avg = data1["抢险救援"][21].avg + data1["抢险救援"][22].avg + data1["抢险救援"][23].avg

        // data1["抢险救援"][0].number = data1["抢险救援"][0].number + data1["抢险救援"][1].number + data1["抢险救援"][2].number
        // data1["抢险救援"][1].number = data1["抢险救援"][3].number + data1["抢险救援"][4].number + data1["抢险救援"][5].number
        // data1["抢险救援"][2].number = data1["抢险救援"][6].number + data1["抢险救援"][7].number + data1["抢险救援"][8].number
        // data1["抢险救援"][3].number = data1["抢险救援"][9].number + data1["抢险救援"][10].number + data1["抢险救援"][11].number
        // data1["抢险救援"][4].number = data1["抢险救援"][12].number + data1["抢险救援"][13].number + data1["抢险救援"][14].number
        // data1["抢险救援"][5].number = data1["抢险救援"][15].number + data1["抢险救援"][16].number + data1["抢险救援"][17].number
        // data1["抢险救援"][6].number = data1["抢险救援"][18].number + data1["抢险救援"][19].number + data1["抢险救援"][20].number
        // data1["抢险救援"][7].number = data1["抢险救援"][21].number + data1["抢险救援"][22].number + data1["抢险救援"][23].number

        // data1["抢险救援"][0].radio = data1["抢险救援"][0].radio + data1["抢险救援"][1].radio + data1["抢险救援"][2].radio
        // data1["抢险救援"][1].radio = data1["抢险救援"][3].radio + data1["抢险救援"][4].radio + data1["抢险救援"][5].radio
        // data1["抢险救援"][2].radio = data1["抢险救援"][6].radio + data1["抢险救援"][7].radio + data1["抢险救援"][8].radio
        // data1["抢险救援"][3].radio = data1["抢险救援"][9].radio + data1["抢险救援"][10].radio + data1["抢险救援"][11].radio
        // data1["抢险救援"][4].radio = data1["抢险救援"][12].radio + data1["抢险救援"][13].radio + data1["抢险救援"][14].radio
        // data1["抢险救援"][5].radio = data1["抢险救援"][15].radio + data1["抢险救援"][16].radio + data1["抢险救援"][17].radio
        // data1["抢险救援"][6].radio = data1["抢险救援"][18].radio + data1["抢险救援"][19].radio + data1["抢险救援"][20].radio
        // data1["抢险救援"][7].radio = data1["抢险救援"][21].radio + data1["抢险救援"][22].radio + data1["抢险救援"][23].radio

        // data2["火灾"][0].number = data2["火灾"][0].number + data2["火灾"][1].number + data2["火灾"][2].number
        // data2["火灾"][1].number = data2["火灾"][3].number + data2["火灾"][4].number + data2["火灾"][5].number
        // data2["火灾"][2].number = data2["火灾"][6].number + data2["火灾"][7].number + data2["火灾"][8].number
        // data2["火灾"][3].number = data2["火灾"][9].number + data2["火灾"][10].number + data2["火灾"][11].number
        // data2["火灾"][4].number = data2["火灾"][12].number + data2["火灾"][13].number + data2["火灾"][14].number
        // data2["火灾"][5].number = data2["火灾"][15].number + data2["火灾"][16].number + data2["火灾"][17].number
        // data2["火灾"][6].number = data2["火灾"][18].number + data2["火灾"][19].number + data2["火灾"][20].number
        // data2["火灾"][7].number = data2["火灾"][21].number + data2["火灾"][22].number + data2["火灾"][23].number

        // data2["火灾"][0].avg = data2["火灾"][0].avg + data2["火灾"][1].avg + data2["火灾"][2].avg
        // data2["火灾"][1].avg = data2["火灾"][3].avg + data2["火灾"][4].avg + data2["火灾"][5].avg
        // data2["火灾"][2].avg = data2["火灾"][6].avg + data2["火灾"][7].avg + data2["火灾"][8].avg
        // data2["火灾"][3].avg = data2["火灾"][9].avg + data2["火灾"][10].avg + data2["火灾"][11].avg
        // data2["火灾"][4].avg = data2["火灾"][12].avg + data2["火灾"][13].avg + data2["火灾"][14].avg
        // data2["火灾"][5].avg = data2["火灾"][15].avg + data2["火灾"][16].avg + data2["火灾"][17].avg
        // data2["火灾"][6].avg = data2["火灾"][18].avg + data2["火灾"][19].avg + data2["火灾"][20].avg
        // data2["火灾"][7].avg = data2["火灾"][21].avg + data2["火灾"][22].avg + data2["火灾"][23].avg

        // data2["火灾"][0].radio = data2["火灾"][0].radio + data2["火灾"][1].radio + data2["火灾"][2].radio
        // data2["火灾"][1].radio = data2["火灾"][3].radio + data2["火灾"][4].radio + data2["火灾"][5].radio
        // data2["火灾"][2].radio = data2["火灾"][6].radio + data2["火灾"][7].radio + data2["火灾"][8].radio
        // data2["火灾"][3].radio = data2["火灾"][9].radio + data2["火灾"][10].radio + data2["火灾"][11].radio
        // data2["火灾"][4].radio = data2["火灾"][12].radio + data2["火灾"][13].radio + data2["火灾"][14].radio
        // data2["火灾"][5].radio = data2["火灾"][15].radio + data2["火灾"][16].radio + data2["火灾"][17].radio
        // data2["火灾"][6].radio = data2["火灾"][18].radio + data2["火灾"][19].radio + data2["火灾"][20].radio
        // data2["火灾"][7].radio = data2["火灾"][21].radio + data2["火灾"][22].radio + data2["火灾"][23].radio

        // data3["社会救助"][1].avg = data3["社会救助"][3].avg + data3["社会救助"][4].avg + data3["社会救助"][5].avg
        // data3["社会救助"][2].avg = data3["社会救助"][6].avg + data3["社会救助"][7].avg + data3["社会救助"][8].avg
        // data3["社会救助"][3].avg = data3["社会救助"][9].avg + data3["社会救助"][10].avg + data3["社会救助"][11].avg
        // data3["社会救助"][4].avg = data3["社会救助"][12].avg + data3["社会救助"][13].avg + data3["社会救助"][14].avg
        // data3["社会救助"][5].avg = data3["社会救助"][15].avg + data3["社会救助"][16].avg + data3["社会救助"][17].avg
        // data3["社会救助"][6].avg = data3["社会救助"][18].avg + data3["社会救助"][19].avg + data3["社会救助"][20].avg
        // data3["社会救助"][7].avg = data3["社会救助"][21].avg + data3["社会救助"][22].avg + data3["社会救助"][23].avg

        // data3["社会救助"][1].number = data3["社会救助"][3].number + data3["社会救助"][4].number + data3["社会救助"][5].number
        // data3["社会救助"][2].number = data3["社会救助"][6].number + data3["社会救助"][7].number + data3["社会救助"][8].number
        // data3["社会救助"][3].number = data3["社会救助"][9].number + data3["社会救助"][10].number + data3["社会救助"][11].number
        // data3["社会救助"][4].number = data3["社会救助"][12].number + data3["社会救助"][13].number + data3["社会救助"][14].number
        // data3["社会救助"][5].number = data3["社会救助"][15].number + data3["社会救助"][16].number + data3["社会救助"][17].number
        // data3["社会救助"][6].number = data3["社会救助"][18].number + data3["社会救助"][19].number + data3["社会救助"][20].number
        // data3["社会救助"][7].number = data3["社会救助"][21].number + data3["社会救助"][22].number + data3["社会救助"][23].number


        // data3["社会救助"][1].radio = data3["社会救助"][3].radio + data3["社会救助"][4].radio + data3["社会救助"][5].radio
        // data3["社会救助"][2].radio = data3["社会救助"][6].radio + data3["社会救助"][7].radio + data3["社会救助"][8].radio
        // data3["社会救助"][3].radio = data3["社会救助"][9].radio + data3["社会救助"][10].radio + data3["社会救助"][11].radio
        // data3["社会救助"][4].radio = data3["社会救助"][12].radio + data3["社会救助"][13].radio + data3["社会救助"][14].radio
        // data3["社会救助"][5].radio = data3["社会救助"][15].radio + data3["社会救助"][16].radio + data3["社会救助"][17].radio
        // data3["社会救助"][6].radio = data3["社会救助"][18].radio + data3["社会救助"][19].radio + data3["社会救助"][20].radio
        // data3["社会救助"][7].radio = data3["社会救助"][21].radio + data3["社会救助"][22].radio + data3["社会救助"][23].radio



        
        
        data1["抢险救援"] =  data1["抢险救援"].splice(0,8)
        data2["火灾"] =  data2["火灾"].splice(0,8)
        data3["社会救助"]=  data3["社会救助"].splice(0,8)
        let dataarr = []
        dataarr["抢险救援"] = data1["抢险救援"] 
        dataarr["火灾"] = data2["火灾"] 
        dataarr["社会救助"] = data3["社会救助"] 
        this.houseList =dataarr
        
      }

      this.$refs.lineSmooth.getData();
    },

    /**
     * @历史警情趋势图
     * @api接口请求
     */
    async alertStatisticsByMonthApi() {
      let day = new Date().getDate().length>1 ?  new Date().getDate() : '0' + new Date().getDate() 
       let a = getYearMonthDateSFN().split(" ")[0].slice(5,7)
      let b =Math.abs(a)
      let c = getMonthStartAndEnd(b)[1].slice(-2)
      let res = await this.$axios.get(
        this.$api.jqzhcz.alertStatisticsByMonth2 +
          "?" +
          this.$qs.stringify({
            streetTown: this.stroes.$state.streetTown, //街镇
            startTime: new Date().getFullYear() - this.timeArea + "-" + (new Date().getMonth() + 1) + "-" + day + " 00:00:00",
            endTime: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + c + " 00:00:00",
          })
      );
      if (res) {
        this.monthList = res.data;
        // this.$refs.barChart.getData();
      }
    },

    /**
     * @警情处置情况
     * @api接口请求
     */
    async proptionApi() {
      //旧
      let res = await this.$axios.get(this.$api.jqzhcz.alertStatisticsByMonth3 +
          "?" +
          this.$qs.stringify({
            // startTime: this.stores.$state.timeList[0] || "",
            // endTime: this.stores.$state.timeList[1] || "",
            startTime: getMonthStartDate(),
            endTime: getMonthEndDate(),
        //      startTime:  (dayjs().subtract(30, 'day').format('YYYY-MM-DD HH:mm:ss')).slice(0,10) + " 00:00:00" ,
        //       endTime:  (dayjs().subtract(0, 'day').format('YYYY-MM-DD HH:mm:ss')).slice(0,10) + " 00:00:00" ,
          }));
      if (res){
        // this.proptionList = res.data;
        // this.proptionList[4] = res.data.reduce((data, rel) => {
        //   return data + rel.number;
        // }, 0);
        let total = 0
        let data = res.data
        for(let i =0;i<data.length -1;i++){
                data[i].radio = data[i].radio.toFixed(2)
                total += data.number
                data.total = total
                data[0].color = ["#BF4216 ","#F68E6A"]
                data[1].color = ["#06B1B9  ","#14E1EA"]
                data[2].color = ["#E4951E ","#F8ED41"]
        }
        this.proptionList = data.slice(0,3)
      }

      // let res1 = await this.$axios.get(
      //   this.$api.jqzhcz.alertStatistics +
      //     "?" +
      //     this.$qs.stringify({
      //       streetTown: this.stroes.$state.streetTown, //街镇
      //       startTime: "2021-01-01",
      //       endTime: "2021-12-31",
      //     })
      // );

      // if (res1.data.length > 0) {
      //   this.proptionList = res1.data;
      // }
    },

    /**
     * @实时警情处理
     * @api接口请求
     */
    getPageApi() {
      let a = getYearMonthDateSFN().split(" ")[0].slice(5,7)
      let b =Math.abs(a-1)
      let c = getMonthStartAndEnd(b)[1].slice(-2)
      let startTime = undefined
      let endTime = undefined
      startTime = getYearMonthDateSFN().split(" ")[0] + " 00:00:00"
      endTime = getYearMonthDateSFN().split(" ")[0]+ " 23:59:59"
      this.$axios.get(
        this.$api.jqzhcz.page2 +
          "?" +
          this.$qs.stringify({
            streetTown: this.stroes.$state.streetTown, //街镇
            current: 1,
            size: 150,
            startTime:startTime,
            // startTime:"2022-12-01 00:00:00",
            endTime:endTime,
          })
      ).then(res=>{
                let data = res.data.records
                for(let i =0;i<data.length;i++){
                        data[i].lasj2 = data[i].lasj.slice(0,10)
                }
                this.tableData = data
                if(this.checkedArray.checkedData[0] == 111){
                        this.sadian(111,data,1)
                }
                
      })
       
    },

    // 警情详情
    async getXiangqingPage() {
      let res = await this.$axios.get(
        this.$api.jqzhcz.page2 +
          "?" +
          this.$qs.stringify({
            // fireType: this.barForm.fireType,
            current: 1,
            size: 10,
          })
      );
    },

    async getXiangqingOne() {
      let res = await this.$axios.get(
        this.$api.jqzhcz.one +
          "?" +
          this.$qs.stringify({
            id: "00021f6556c34d44a75ea287f40bed42",
          })
      );
    },

    /**
     * @实时告警撒点
     * @api接口请求
     */
    async warningInstanceScattererApi() {
      let res = await this.$axios.get(
        this.$api.jqzhcz.warningInstanceScatterer +
          "?" +
          this.$qs.stringify({
            streetTown: this.stroes.$state.streetTown, //街镇
          })
      );

      if (res.data.length > 0) {
        this.initMarkers(res.data, "警情综合处置", 6);
      } else {
        this.initMarkers([], "警情综合处置", 6);
      }
    },

    /**
     * @高德地图聚合撒点
     */
    async mapCluster() {
      var label = "";
      this.checkedArray.checkedList.forEach((val) => {
        if (val.value == this.checkedArray.checkedData[0]) {
          label = val.label;
        }
      });
      let res = await this.$axios.get(
        this.$api.jqzhcz.pageMap +
          "?" +
          this.$qs.stringify({
            streetTown: this.stroes.$state.streetTown, //街镇
            scattererType: label,
          })
      );

      if (res.data.length > 0) {
        this.initMarkers(res.data, "警情综合处置", this.checkedArray.checkedData[0]);
      } else {
        this.initMarkers([], "警情综合处置", this.checkedArray.checkedData[0]);
      }
    },
    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.checkboxChange(id)
            },
    /**
     * 测绘院撒点
     */
    async sadian(id,data,T111) {
        let arr = []
        if(id == 40 ){
                        this.$axios.post(this.$api.fireSite.demFireStationList,
                                {
                                        streetTown:this.stroes.$state.streetTown,
                                        stationType:[1,2,3,4]
                                }
                        ).then((res) => {
                                for(let i=0;i<res.data.length;i++){
                                        arr[i] = {}
                                        arr[i].id = res.data[i].id
                                        arr[i].stationName = res.data[i].stationName
                                        arr[i].stationAddress = res.data[i].stationAddress
                                        arr[i].stationType = res.data[i].stationType
                                        arr[i].longitude = res.data[i].longitude
                                        arr[i].latitude = res.data[i].latitude
                                        arr[i].type = "消防站"
                                }
                                console.log(arr)
                                this.addMarker(arr, "rescue-station","消防站");
                        });   
                }
                if(id == 41 ){
                        this.$axios.post(this.$api.fireSite.demFireStationList,
                        {
                                streetTown:this.stroes.$state.streetTown,
                                stationType:[4]
                        }
                       ).then((res) => {
                                
                                for(let i=0;i<res.data.length;i++){
                                        arr[i] = {}
                                        arr[i].id = res.data[i].id
                                        arr[i].stationName = res.data[i].stationName
                                        arr[i].stationAddress = res.data[i].stationAddress
                                        arr[i].stationType = res.data[i].stationType
                                        arr[i].longitude = res.data[i].longitude
                                        arr[i].latitude = res.data[i].latitude
                                        arr[i].type = "专职队"
                                }
                                this.addMarker(arr, "rescue-station","专职队");
                        });   
                }
                if(id == 42 ){
                        this.$axios.get(this.$api.fireSite.demStreetMicroStationList  + "?" +
                                this.$qs.stringify({
                                        streetTown:this.stroes.$state.streetTown,
                                })).then((res) => {
                                        for(let i=0;i<res.data.length;i++){
                                                res.data[i].stationType = 5
                                                arr.push(res.data[i])
                                        }
                                        this.addMarker(arr, "rescue-station","微型消防站");
                                        
                                });
                }
                if(id==44){
                        this.$axios.post(this.$api.water.baseGgpFacilityList,{
                                "facilityType": [
                                       13,14
                                ] ,
                                streetTown:this.stroes.$state.streetTown,
                        }).then((res) => {
                                console.log(res)
                                for(let i=0;i<res.data.length;i++){
                                        res.data[i].stationType = 112
                                        arr.push(res.data[i])
                                }
                                this.addMarker(arr, "rescue-station","企业消防");
                        });
                }
                if(id==45){
                        this.$axios.post(this.$api.water.baseGgpFacilityList,{
                                "facilityType": [
                                       15,16
                                ] ,
                                streetTown:this.stroes.$state.streetTown,
                        }).then((res) => {
                                console.log(res)
                                for(let i=0;i<res.data.length;i++){
                                        res.data[i].stationType = 112
                                        arr.push(res.data[i])
                                }
                                this.addMarker(arr, "rescue-station","社区消防");
                        });
                }
                if(id == 46 ){
                        this.$axios.post(this.$api.water.baseGgpFacilityList,{
                                "facilityType": [
                                      17
                                ] ,
                                streetTown:this.stroes.$state.streetTown,
                        }).then((res) => {
                                console.log(res)
                                for(let i=0;i<res.data.length;i++){
                                        res.data[i].stationType = 17
                                        arr.push(res.data[i])
                                }
                                this.addMarker(arr, "rescue-station","一级微型消防站");
                        });
                }
                if(id == 47 ){
                        this.$axios.post(this.$api.water.baseGgpFacilityList,{
                                "facilityType": [
                                      18
                                ] ,
                                streetTown:this.stroes.$state.streetTown,
                        }).then((res) => {
                                for(let i=0;i<res.data.length;i++){
                                        res.data[i].stationType = 18
                                        arr.push(res.data[i])
                                }
                                this.addMarker(arr, "rescue-station","街镇专职消防队");
                        });
                }
                if(id == 111 ){
                        if(T111){
                                if(data){
                                        for(let i =0;i<data.length;i++){
                                                if(!data[i].fdsj){
                                                        arr.push(data[i])
                                                }
                                        }
                                        this.addMarker(arr, "comprehensive-disposal","实时警情");
                                }else{
                                        this.addMarker([], "comprehensive-disposal","实时警情");
                                } 
                        }else{
                                this.getPageApi()
                        }
                       
                        
                }
                if(id == 5 || id == 6 ){
                        this.addMarker([], "comprehensive-disposal","监控");
                }
//       await this.$axios
//         .get(
//           this.$api.jqzhcz.pageMap +
//             "?" +
//             this.$qs.stringify({
//               streetTown: this.stroes.$state.streetTown,
//               scattererType: this.checkedArray.checkedList[this.checkedArray.checkedData[0]].label,
//             })
//         )
//         .then((res) => {
//           if (res.data.length > 0) {
//             //点分布
//             let data = res.data;
//             let arr = [];
//             for (let i = 0; i < data.length; i++) {
//                     if(data[i].stationName.includes("消防站")){
//                         arr.push(data[i])
//                         for(let i =0;i<arr.length;i++){
//                                 arr[i].gisX = arr[i].longitude
//                                 arr[i].gisY = arr[i].latitude
//                         }
//                     }
//             }
//             setTimeout(()=>{
//               this.addMarker(arr.splice(0, 500), "comprehensive-disposal",this.checkedArray.checkedList[this.checkedArray.checkedData[0]].label);
//             },1000)
            
//           } else {
//             this.addMarker([], "comprehensive-disposal",this.checkedArray.checkedList[this.checkedArray.checkedData[0]].label);
//           }
//         });
    },
    /**
     * 撒点测绘院、高德
     */

    /**
     * 撒点街镇选择
     */
    checkStreetTown(value) {
      let data = undefined;
      for (let i = 0; i < this.stroes.$state.mhjz.length; i++) {
        if (this.stroes.$state.streetTown == this.stroes.$state.mhjz[i].streetTown) {
          data = this.stroes.$state.mhjz[i];
          break;
        }
      }
       if(!this.stroes.$state.streetTown){
          data = this.stroes.$state.mhjz[0]
        }
      if (this.stroes.$state.mapBool == 2) {
        this.streetTownSwitch(data);
        this.sadianSelect();
      } else {
        this.getStreetTownClick();
      }
    },


  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  .leftBox {
    .leftTop {
      height: 50%;
      max-height: 50%;
      justify-content: center;
      align-items: center;
      .leftTopContent {
        width: 100%;
        height: calc(100% - 0.4375rem);
        .fireBar {
          padding-top: 0.125rem;
          height: calc(100% - 0.125rem);
        }
      }
    }
    .leftCenter {
      height: 50%;
      max-height: 50%;
      padding-top: 0.125rem;
      box-sizing: border-box;
      .leftCenterContent {
        width: 100%;
        height: calc(100% - 0.4375rem);
        .contentEcharts {
          height: calc(100% - 0.25rem);
          padding: 0.125rem 0;
        }
      }
    }
  }

  .rightBox {
    .rightTop {
      height: 35%;
      max-height: 35%;
      color: #ffffff;
      .rightTop2{
                >.el-col{
                        >div{
                                >div:nth-child(1){
                                        margin:0.3rem 0;
                                }
                                >div:nth-child(3){
                                        width:50%;
                                        margin:0.2rem auto;
                                        padding:.075rem;
                                        border-radius: .25rem;
                                        box-shadow: inset 0 0 0.05rem 0.05rem rgba(27, 79, 144, 1);
                                        background: rgba(#132A5A, 0.2) !important;
                                        span{
                                                margin-left:0.075rem
                                        }
                                }
                        }
                }
        }
//       .rightTopContent {
//         width: 100%;
//         height: calc(100% - 0.4375rem);
//         display: flex;
//         align-items: center;
//         & > .el-row {
//           flex: 1;
//           display: flex;
//           flex-direction: column;

//           .type {
//             margin-top: 0.2rem;
//             font-size: 0.2rem;
//             text-align: center;
//             justify-content: center;
//           }
//           .param {
//             width: 100%;
//             margin: 0.125rem auto;
//             text-align: center;
//             justify-content: center;
//             span {
//               font-size: 0.2rem;
//             }
//             .number {
//               color: #66ffff;
//               text-align: center;
//               font-size: 0.3rem !important;
//               display: block;
//               top: -0.4rem;
//             }
//           }
//           .img {
//             img {
//               width: 60%;
//               margin: 0.1rem 20% 0;
//             }
//           }
//         }
//       }
    }

    .rightCenter {
      height: calc(35% - 0.125rem);
      max-height: calc(35% - 0.125rem);
      margin-top: 0.125rem;
      .rightCenterContent {
        height: calc(100% - 0.4375rem);
      }

      :deep(.cell) {
        text-align: center !important;
      }
      :deep(td) {
        min-width: auto !important;
        width: auto !important;
        text-align: left !important;
        padding: 0;
      }
      :deep(.box-card) {
        position: absolute;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 3%;
        width: 80%;
        max-height: 100%;
        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
        background: rgba(0, 44, 110, 0.6);
        border: none;
        color: #fff;
        .el-card__header {
          padding: 0.125rem;
          border-color: #30cfff;
          .card-header {
            display: flex;
            font-size: 0.2rem;
            justify-content: space-between;
            align-items: center;
            i {
              font-size: 0.275rem;
            }
          }
        }
        img {
          width: 100%;
          height: auto;
        }
      }
    }

    .rightBottom {
      height: calc(30% - 0.125rem);
      max-height: calc(30% - 0.125rem);
      margin-top: 0.125rem;
      .monitor-list {
        height: calc(100% - 0.4375rem);
        overflow: hidden;
        > .list {
          border: 1px solid #3a7e8e;
          margin-top: 0.2rem;
          position: relative;
          .videoSelect {
            position: absolute;
            width: 100%;
            border: none !important;
          }
        }
        .hlsVideo {
          width: 100%;
        }
      }
      iframe {
        border: none;
      }
    }

    .rightTop1 {
      height: 50%;
      max-height: 50%;

      .rightTopContent {
        flex: 1;
        width: 100%;
        height: calc(100% - 0.4375rem);
        align-items: center;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: none;

        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
          display: none;
          // opacity: 0;
          /* Chrome Safari */
        }
        & > .el-col {
          width: 28%;
          height: 45%;
          border-radius: 0.0625rem;
          margin: 0.1rem;
          flex: none;
          box-shadow: inset 0 0 0.05rem 0.05rem rgba(27, 79, 144, 1);
          background: rgba(#132a5a, 0.8) !important;
          display: flex;
          flex-direction: column;
          font-size: 0.2rem;
          color: #dbe9ea;
          font-weight: 400;

          // font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
          .el-col {
            flex: none;
            overflow: hidden;
          }
          .rank {
            padding: 0.125rem 0;
            text-align: center;
            box-sizing: border-box;
          }
          .propName {
            padding: 0.125rem 0;
            text-align: center;
            box-sizing: border-box;
          }
          & .el-col:nth-child(2) {
            flex: 1;
            img {
              // width: 100%;
              height: 100%;
              // objec-fit: cover;
              margin: 0 auto;
              display: block;
            }
          }
        }
        .day:nth-child(3n - 2) {
          margin-left: 5%;
        }
      }
    }

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

      .rightCenterContent {
        width: 100%;
        height: calc(100% - 0.4375rem);
        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;
            }
          }
        }

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

.tableTooltip {
  width: 400px;
}

.liucheng {
  width: 100%;
  position: relative;
  padding: 20px;
  img {
    width: 100%;
  }
  .jz {
    font-size: 14px;
    color: #fff;
    list-style: 50%;
    text-align: center;
    position: absolute;
    top: 35%;
    width: 23%;
    text-align: center;
  }
}
.tipdan {
  background: url("~@a/img/qyzz/baogao.png") no-repeat;
  background-size: 100% 100%;
  margin: 10px 10px 0 0;
  font-size: 14px;
  padding: 4px;
  text-align: center;
}
::v-deep .monitor-list .el-input__inner{
        border-radius: 0 !important;
        border:none;
        border-bottom:1px solid #3a7e8e;
}
</style>