mh_fire/src/views/comprehensive-disposal.vue

<template>
  <el-row class="contentBox">
    <transition name="el-fade-in-linear">
      <el-col class="leftBox" v-show="leftBtn">
        <el-col class="flexJ leftTop">
          <h4>警情时段分布</h4>
          <el-row class="leftTopContent">
            <!-- <el-row class="selectBar">
              <el-form :inline="true" size="mini" :model="barForm">
                <el-form-item label="场所分类">
                  
                  <el-select v-model="barForm.fireType" @change="getHouse()" filterable clearable placeholder="场所" >
                    <el-option :label="item" :value="item" v-for="(item,ind) in fireTypeList" :key="ind"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-row> -->
            <el-row class="fireBar">
              <line-smooth ref="lineSmooth" :dataMap="houseList"></line-smooth>
            </el-row>
          </el-row>
        </el-col>
        <el-col class="flexJ leftBot">
          <h4>历史警情趋势图</h4>
          <el-row class="leftBotContent">
            <el-row class="selectBar">
               <el-row>
                <el-button size="mini" @click="searchTime(1)" :class="{ btnClick: timeArea === 1 }">近一年</el-button>
                <el-button size="mini" @click="searchTime(3)" :class="{ btnClick: timeArea === 3 }">近三年</el-button>
                <el-button size="mini" @click="searchTime(5)" :class="{ btnClick: timeArea === 5 }">近五年</el-button>
              </el-row>
            </el-row>
            <el-row class="fireBar">
              <bar-chart ref="barChart" :dataMap="monthList"></bar-chart>
            </el-row>
          </el-row>
        </el-col>
        
      </el-col>
    </transition>
    <transition name="el-fade-in-linear">
      <el-col class="centerBox" :style="{'max-width':leftBtn && rightBtn ? '8rem' :!leftBtn &&  !rightBtn ? '100%' : leftBtn ||  rightBtn ? '16rem' : '8rem'}">
        <el-row class="leftBtn btnW" @click="leftBtnClick()">
          <i :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
        </el-row>
        <el-row class="centerContent" id="mapF"></el-row>
        
        <el-row class="rightBtn btnW" @click="rightBtnClick()">
          <i :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
        </el-row>
        <!-- <el-row class="mapTips">
          <el-checkbox-group v-model="checkList" class="yxj">
            <el-checkbox label="全选"></el-checkbox>
            <el-checkbox label="实时警情"></el-checkbox>
            <el-checkbox label="重点单位"></el-checkbox>
            <el-checkbox label="消防站"></el-checkbox>
            <el-checkbox label="消防车"></el-checkbox>
            <el-checkbox label="微型消防车"></el-checkbox>
            <el-checkbox label="实景监控视频"></el-checkbox>
          </el-checkbox-group>
        </el-row> -->
      </el-col>
    </transition>
    <transition name="el-fade-in-linear">
      <el-col class="rightBox" v-show="rightBtn">
        <el-col class="flexJ rightTop">
          <h4>警情处置情况</h4>
          <div class="rightBoxCon">
            <el-row>
              <el-row class="rightTopTitle"><span>火灾</span></el-row>
              <el-row class="rightTopChart">
                <gauge ref="gauge1" :dataMap="proptionList.find(val=>val.type === '火灾') && proptionList.find(val=>val.type === '火灾').number/(proptionList.find(val=>val.type === '火灾').number + proptionList.find(val=>val.type === '社会救助').number + proptionList.find(val=>val.type === '抢险救援').number) || 0" :dataNumber="proptionList.find(val=>val.type === '火灾') && proptionList.find(val=>val.type === '火灾').number || 0" color="#468EFD"></gauge>
              </el-row>
              <el-row class="rightTopNumber">
                <span>
                  同比：{{proptionList.find(val=>val.type === '火灾') && (proptionList.find(val=>val.type === '火灾').radio * 100).toFixed(1) || 0}}%
                  <span :style="{color: proptionList.find(val=>val.type === '火灾') && proptionList.find(val=>val.type === '火灾').sameStatus === 2 ? 'green' : 'red'}">
                    <i class="iconfont" v-if="proptionList.find(val=>val.type === '火灾')"
                    :class="proptionList.find(val=>val.type === '火灾').sameStatus === 1 ? 'icon-arrowTop-fill' : proptionList.find(val=>val.type === '火灾').sameStatus === 2 ? 'icon-xiajiantou-' : ''"></i>
                  </span>
                </span>
              </el-row>
            </el-row>
            <el-row>
              <el-row class="rightTopTitle"><span>社会救助</span></el-row>
              <el-row class="rightTopChart">
                <gauge ref="gauge2" :dataMap="proptionList.find(val=>val.type === '社会救助') && proptionList.find(val=>val.type === '社会救助').number/(proptionList.find(val=>val.type === '火灾').number + proptionList.find(val=>val.type === '社会救助').number + proptionList.find(val=>val.type === '抢险救援').number) || 0" :dataNumber="proptionList.find(val=>val.type === '社会救助') && proptionList.find(val=>val.type === '社会救助').number || 0" color="#06B1B9"></gauge>
              </el-row>
              <el-row class="rightTopNumber">
                <span>
                  同比：{{proptionList.find(val=>val.type === '社会救助') && (proptionList.find(val=>val.type === '社会救助').radio * 100).toFixed(1) || 0}}%
                  <span :style="{color: proptionList.find(val=>val.type === '社会救助') && proptionList.find(val=>val.type === '社会救助').sameStatus === 2 ? 'green' : 'red'}">
                    <i class="iconfont" v-if="proptionList.find(val=>val.type === '社会救助')"
                    :class="proptionList.find(val=>val.type === '社会救助').sameStatus === 1 ? 'icon-arrowTop-fill' : proptionList.find(val=>val.type === '社会救助').sameStatus === 2 ? 'icon-xiajiantou-' : ''"></i>
                  </span>
                </span>
              </el-row>
            </el-row>
            <el-row>
              <el-row class="rightTopTitle"><span>抢险救援</span></el-row>
              <el-row class="rightTopChart">
                <gauge ref="gauge3" :dataMap="proptionList.find(val=>val.type === '抢险救援') && proptionList.find(val=>val.type === '抢险救援').number/ (proptionList.find(val=>val.type === '火灾').number + proptionList.find(val=>val.type === '社会救助').number + proptionList.find(val=>val.type === '抢险救援').number) || 0" :dataNumber="proptionList.find(val=>val.type === '抢险救援') && proptionList.find(val=>val.type === '抢险救援').number || 0" color="#E4951E"></gauge>
              </el-row>
              <el-row class="rightTopNumber">
                <span>
                  同比：{{proptionList.find(val=>val.type === '抢险救援') && (proptionList.find(val=>val.type === '抢险救援').radio * 100).toFixed(1) || 0}}%
                  <span :style="{color: proptionList.find(val=>val.type === '抢险救援') && proptionList.find(val=>val.type === '抢险救援').sameStatus === 2 ? 'green' : 'red'}">
                    <i class="iconfont" v-if="proptionList.find(val=>val.type === '抢险救援')"
                    :class="proptionList.find(val=>val.type === '抢险救援').sameStatus === 1 ? 'icon-arrowTop-fill' : proptionList.find(val=>val.type === '抢险救援').sameStatus === 2 ? 'icon-xiajiantou-' : ''"></i>
                    </span>
                </span>
              </el-row>
            </el-row>
          </div>
        </el-col>
        <el-col class="flexJ rightBot">
          <h4>实时警情处理</h4>
         
          <p class="sp" @click="cellHandleclick">视频</p>
           <!-- @row-click="rowClickMap" -->
          <el-table
   
            :header-cell-style="height1"
            :data="tableData"
            class="transparentTableRow table1"
            height="100%"
            :row-style="height2"
            @cell-click="cellHandleclick"
            style="width: 100%; margin: 0 auto"
            :cell-style="cellStyle"
            
            
          >
          <!-- show-overflow-tooltip -->
            <el-table-column
              
              v-for="item in headerData"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              min-width="11%"
              :label="item.name"
            >
              <template  
              v-if="item.prop === 'type' || 
              item.prop === 'lasj'  || 
              item.prop === 'ajdj'  || 
              item.prop === 'afdz'  || 
              item.prop === 'cdcl'  || 
              item.prop === 'bcxx'  || 
              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">案件编号：{{scope.row.ajbh  ? scope.row.ajbh : "--"}}</el-col>
                        <el-col :span="24">案件描述：{{scope.row.bcxx  ? scope.row.bcxx : "--"}}</el-col>

                        <el-col :span="24">报警时间：{{scope.row.tzsj  ? scope.row.tzsj : "--"}}</el-col>
                        
                        <el-col :span="24">案件类型：{{scope.row.ajlx  ? scope.row.ajlx : "--"}}</el-col>
                        
                       
                        <el-col :span="24">发生地址：{{scope.row.afdz  ? scope.row.afdz : "--"}}</el-col>
                        
                        <el-col :span="12">主责中队：{{scope.row.zhongdui  ? scope.row.zhongdui : "--"}}</el-col>
                        
                        
                        <el-col :span="12">案件状态：{{scope.row.ajzt  ? scope.row.ajzt : "--"}}</el-col>
                        <el-col :span="24">到场时间：{{scope.row.dcsj  ? scope.row.dcsj : "--"}}</el-col>

                        <el-col :span="24">出水时间：{{scope.row.cssj ? scope.row.cssj :'--'}}</el-col>
                        <el-col :span="24">控制时间：{{scope.row.kzsj ? scope.row.kzsj : '--'}}</el-col>
                        <el-col :span="24">熄灭时间：{{scope.row.xmsj ? scope.row.xmsj: '--'}}</el-col>
                        <el-col :span="24">返队时间：{{scope.row.fdsj ? scope.row.fdsj : '--'}}</el-col>
                        <el-col :span="24">所属街道：{{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="{
                      'icon-icon-test' : scope.row['ajlxdm'] == 1,
                      'icon-jiuyuan': scope.row['ajlxdm'] == 2,
                      'icon-minzhengtubiao1-08':scope.row['ajlxdm'] == 3,
                    }"
                    :style="{color: scope.row['ajdj'] == '零级' ? 'green' : 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>
          <!-- <img src="~@a/img/test/car.png" alt=""> -->
          <!-- controls -->
          
          <!-- <video src="~@a/img/test/card.mp4" class="videoBox" autoplay height="auto"></video> -->
          <!-- <iframe src="http://32.0.0.7/play.html?serial=31011201002000000144&code34020100001310000036&aspect=fullscreen"  allowfullscreen allow="autoplay; fullscreen" class="iframe"></iframe> -->
          <!-- <video src="32.0.0.7/play.html?serial=31011201002000000144&code34020100001310000036" class="videoBox" autoplay height="auto"></video> -->
          <!-- <video-player class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions">
          </video-player> -->
          </el-card>
        </el-col>
        <el-col class="flexJ rightBot2">
          <h4>历史案件</h4>
          <!-- <el-col class="shui">
            <el-col class="title">
              水系统检测设备（300）
            </el-col>
            <el-col class="title1">
              上线率：99%
            </el-col>
            <el-col class="title2">
              接单率：99%
            </el-col>
            <el-col class="title3">
              处置率：99%
            </el-col>
          </el-col> -->
          <el-table
           :header-cell-style="height1"
            :data="tableData2"
            class="transparentTableRow table2"
            height="120%"
            :row-style="height2"
            :cell-style="cell1"
            style="width: 100%; margin: 0 auto"
            @row-click="rowClickMap"
          >
            <el-table-column
             
              v-for="item in headerData2"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              
              :label="item.name"
              
            >
            
              <template  #default="scope" >
                <transition name="el-fade-in-linear">
                <el-tooltip placement="top" :disabled="disabled" > 
                  <template >
                    <i class="iconfont" 
                    :class="{
                      'icon-icon-test' : scope.row['ajlxdm'] == 1,
                      'icon-jiuyuan': scope.row['ajlxdm'] == 2,
                      'icon-minzhengtubiao1-08':scope.row['ajlxdm'] == 3,
                    }"
                    :style="{color: scope.row['ajdj'] == '零级' ? 'green' : 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>
                </transition>
              </template>
    
            </el-table-column>
          </el-table>
          <el-card class="box-card" v-if="isVideo">
          <!-- <template #header>
            <div class="card-header">
              <span>实时视频</span>
              <i class="el-icon-close" @click="isVideo = false"></i>
            </div>
          </template> -->
          <!-- <img src="~@a/img/test/car.png" alt=""> -->
          <!-- controls -->
          <!-- <video src="~@a/img/test/card.mp4" class="videoBox" autoplay height="auto"></video> -->
          <!-- <video-player class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions">
          </video-player> -->
          </el-card>
        </el-col>
      </el-col>
    </transition>
    <transition name="el-fade-in-linear">
      <div class="tableTooltip anxqtk" v-show="ajxq" @mousedown="move">
        <div class="tableTitle">
          <div>案件详情</div>
        </div>
        <img src="~@a/img/icon/close.png" alt="" class="close2" @click="closeIsTooltip2"/>
        <el-row class="tableContent" >
          <el-col :span="20" id="cc">案件编号：{{ajxqnr.ajbh  ? ajxqnr.ajbh : "--"}}</el-col>
          <el-col :span="24">案件描述：{{ajxqnr.bcxx  ? ajxqnr.bcxx : "--"}}</el-col>

          <el-col :span="24">报警时间：{{ajxqnr.tzsj  ? ajxqnr.tzsj : "--"}}</el-col>
          
          <el-col :span="24">案件类型：{{ajxqnr.ajlx  ? ajxqnr.ajlx : "--"}}</el-col>
          
          
          <el-col :span="24">发生地址：{{ajxqnr.afdz  ? ajxqnr.afdz : "--"}}</el-col>
          
          <el-col :span="12">主责中队：{{ajxqnr.zhongdui  ? ajxqnr.zhongdui : "--"}}</el-col>
          
          
          <el-col :span="12">案件状态：{{ajxqnr.ajzt  ? ajxqnr.ajzt : "--"}}</el-col>
          <el-col :span="24">到场时间：{{ajxqnr.dcsj  ? ajxqnr.dcsj : "--"}}</el-col>

          <el-col :span="24">出水时间：{{ajxqnr.cssj ? ajxqnr.cssj :'--'}}</el-col>
          <el-col :span="24">控制时间：{{ajxqnr.kzsj ? ajxqnr.kzsj : '--'}}</el-col>
          <el-col :span="24">熄灭时间：{{ajxqnr.xmsj ? ajxqnr.xmsj: '--'}}</el-col>
          <el-col :span="24">返队时间：{{ajxqnr.fdsj ? ajxqnr.fdsj : '--'}}</el-col>
          <el-col :span="24">所属街道：{{ajxqnr.streettown  ? ajxqnr.streettown : "--"}}</el-col>
          
        </el-row>
      </div>
    </transition>
    <transition name="el-fade-in-linear">
      <div class="tableTooltip anxqtk2" v-show="ajxq2" >
        <div class="tableTitle">
          <div>案件详情</div>
        </div>
        <img src="~@a/img/icon/close.png" alt="" class="close2" @click="closeIsTooltip3"/>
        <el-row class="tableContent" >
          <el-col :span="20" id="cc">案件编号：{{ajxq2nr.ajbh  ? ajxq2nr.ajbh : "--"}}</el-col>
          <el-col :span="24">案件描述：{{ajxq2nr.bcxx  ? ajxq2nr.bcxx : "--"}}</el-col>

          <el-col :span="24">报警时间：{{ajxq2nr.tzsj  ? ajxq2nr.tzsj : "--"}}</el-col>
          
          <el-col :span="24">案件类型：{{ajxq2nr.ajlx  ? ajxq2nr.ajlx : "--"}}</el-col>
          
          
          <el-col :span="24">发生地址：{{ajxq2nr.afdz  ? ajxq2nr.afdz : "--"}}</el-col>
          
          <el-col :span="12">主责中队：{{ajxq2nr.zhongdui  ? ajxq2nr.zhongdui : "--"}}</el-col>
          
          
          <el-col :span="12">案件状态：{{ajxq2nr.ajzt  ? ajxq2nr.ajzt : "--"}}</el-col>
          <el-col :span="24">到场时间：{{ajxq2nr.dcsj  ? ajxq2nr.dcsj : "--"}}</el-col>

          <el-col :span="24">出水时间：{{ajxq2nr.cssj ? ajxq2nr.cssj :'--'}}</el-col>
          <el-col :span="24">控制时间：{{ajxq2nr.kzsj ? ajxq2nr.kzsj : '--'}}</el-col>
          <el-col :span="24">熄灭时间：{{ajxq2nr.xmsj ? ajxq2nr.xmsj: '--'}}</el-col>
          <el-col :span="24">返队时间：{{ajxq2nr.fdsj ? ajxq2nr.fdsj : '--'}}</el-col>
          <el-col :span="24">所属街道：{{ajxq2nr.streettown  ? ajxq2nr.streettown : "--"}}</el-col>
          
        </el-row>
      </div>
     </transition>
  </el-row>        
</template>

<script>
import { mapGetters } from 'vuex'
import barChart from "@c/bar";
import lineSmooth from "@c/line-smooth";
import gauge from "@c/gauge/indexcom";
import linstener from "@c/mixins/linstener";
// import map from "@c/mixins/map-data";
import map from "@c/mixins/map-gaodecom";
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-contrib-hls'
import "@videojs/http-streaming"
// import draggable from 'vuedraggable'
export default {
  data() {
    return {
      cell1:{
        height:'.25rem',
        
      },
      height1:{
        height:'0.2rem'
      },
      height2:{
        height:'0.25rem'
      },
      disabled:true,
      ajxqnr:{

      },
      ajxq2nr:{

      },
      ajxq:false,
      ajxq2:false,
      video:{
        videoId:undefined,
        videoUrl:undefined
      },
      checkList:[],
      tableData: [],
      headerData: [
        { prop: "type", name: "警情类别" },
        { prop: "lasj", 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: "" },
      ],
      tableData2: [],
      headerData2: [

        { prop: "type", name: "警情类别" },
        { prop: "lasj", name: "立案时间" },
        { prop: "ajdj", name: "警情等级" },
        { prop: "afdz", name: "案发地址" },
        { prop: "cdcl", name: "调动车辆" },
        { prop: "bcxx", name: "原因" },
        { prop: "czdx", name: "处置对象" },
        { prop: "zhongdui", name: "所属中队" },
        // { prop: "ajzt", name: "状况" },
      ],
      isVideo:false,
      // playerOptions: {
      //     playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
      //     autoplay: false, //如果true,浏览器准备好时开始回放。
      //     muted: false, // 默认情况下将会消除任何音频。
      //     loop: false, // 导致视频一结束就重新开始。
      //     preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      //     language: "zh-CN",
      //     aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      //     fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      //     sources: [{
      //         type: "video/mp4",
      //         src: "http://32.0.15.107:8080/mhvi/mh.m3u8", //视频url地址
      //         // src: require("../assets/img/test/card.mp4"), //视频url地址
      //     }, ],
      //     poster: require("../assets/img/test/car.png"), //你的封面地址
      //     // width: document.documentElement.clientWidth,
      //     notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      //     controlBar: {
      //         timeDivider: true,
      //         durationDisplay: true,
      //         remainingTimeDisplay: false,
      //         fullscreenToggle: true, //全屏按钮
      //     },
      // },
      barForm: {
        fireType: "",
        address: "",
      },
      monthList:[],
      houseList:[],
      proptionList:[],
      proptionMapList:[],
      timeArea: 1,
      isTooltip:false
    };
  },
  computed:{
      // ...mapGetters([
      //    "ajxq2nr"
      // ])
      isFollow () {
        return this.$store.state.ajxq2nr;　　//需要监听的数据
      }
  },

  watch:{
    isFollow(newVal){
      this.ajxq2nrData(newVal)
    },
  },
  mixins: [linstener,map],
  components: { barChart, lineSmooth, gauge},
  created() {
    this.getData();
    setInterval(this.getPage2,10000)
    // if(document.body.clientWidth >1940){
    //   this.widthd = true
    // }else{
    //   this.widthwx = true
    // }
    
  },
  mounted() {
    window.addEventListener(
      "resize",
      () =>
        this.resizeTimeActions([
          this.$refs.gauge1,
          this.$refs.gauge2,
          this.$refs.gauge3,
          this.$refs.lineSmooth,
          this.$refs.barChart,
        ]),
      true
    );
    this.initMap()
  },
  methods: {  
    move(e){
      let odiv = document.getElementsByClassName("anxqtk")[0];        //获取目标元素

      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e)=>{       //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX;    
          let top = e.clientY - disY;
          
          //绑定元素位置到positionX和positionY上面
          this.positionX = top;
          this.positionY = left;
          
          //移动当前元素
          odiv.style.left = left + 'px';
          odiv.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
      };
  },
    mousedown(event) {
      this.selectElement = document.getElementById("qw")
      var div1 = this.selectElement
      this.selectElement.style.cursor = 'move'
      this.isDowm = true
      var distanceX = event.clientX - this.selectElement.offsetLeft
      var distanceY = event.clientY - this.selectElement.offsetTop
      // alert(distanceX)
      // alert(distanceY)
      console.log(distanceX)
      console.log(distanceY)
      document.onmousemove = function (ev) {
      var oevent = ev || event
      div1.style.left = oevent.clientX - distanceX + 'px'
      div1.style.top = oevent.clientY - distanceY + 'px'
      }
      document.onmouseup = function () {
      document.onmousemove = null
      document.onmouseup = null
      div1.style.cursor = 'default'
      }
    },
    removePopup(){
      document.getElementsByClassName("ys-css3-container")[0].remove()
    },
    closeIsTooltip(){
      let y = document.getElementsByClassName("el-popper")
      for(let i=0;i<y.length;i++){
        y[i].style.display = "none"
        y[i].ariaHidden = true
      }
    },
    closeIsTooltip2(){
      this.ajxq = false
    },
    closeIsTooltip3(){
      this.ajxq2 = false
      this.ajxq2nr = {}
    },
    ajxq2nrData(newVal){
      this.ajxq2 = true
      this.ajxq2nr = newVal.ajxq2nr
    },
    cellClsNm({ column }) {
      console.log(column.property)
      if (column.property === 'sp') {
        return 'sp'
      }
    },
    rowClass({ row, rowIndex}) {
        console.log(rowIndex) //表头行下标
        return 'sp' 
    },
    videoPlay(){
        this.video.videoId = "video" + Date.now()
        this.$nextTick(() => {
            console.log(this.video.videoId)
            let list = videojs(this.video.videoId , {
            events: [],
            // playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
            autoplay: "true", // 如果true,浏览器准备好时开始回放。
            controls: true, //  控制条
            preload: 'auto', // 视频预加载
            muted: true, //  默认情况下将会消除任何音频。
            loop: false, // 导致视频一结束就重新开始。
            language: 'zh-CN',
            controlBar: {
              timeDivider: true,
              durationDisplay: true
            },
            aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            sources: [{
              type: 'application/x-mpegURL',
              src: 'http://32.0.15.107:8080/mhvi/mh.m3u8'
            }],
            hls: true, // 启用hls？
            poster: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638947006&t=9cd1ab4df990ba151fcd5f0378f6e8cf', // 你的封面地址
            width: document.documentElement.clientWidth,
            notSupportedMessage: '此视频暂无法播放，请稍后再试'
            // autoplay:true,
            // controls:false,
            // bigPlayButton: false,
            // textTrackDisplay: false,
            // posterImage: true,
            // errorDisplay: false,
            // controlBar: true,
            // muted: true //静音模式 、、 解决首次页面加载播放。
          }, function () {
            this.play() // 自动播放
          })
        })
    },
    cellStyle (row, column, rowIndex, columnIndex) {
    //列的label的名称
      if (row.column.label === "视频") {
        return 'color:#2280D9' //修改的样式
      }
    },
    // cellHandleclick(row,column,cell,event){
    //   console.log(row,column,cell,event)
    //  if(column.property == "sp"){
    //    this.isVideo =true
    //    this.videoPlay()
    //  }
      
    // },
    cellHandleclick(row,column,cell,event){
      if(row.path[0].className == "sp"){
       this.isVideo =true
       this.videoPlay()
      }
    },
    async getData() {
      let res = await this.$axios.all([
        this.$axios.get(this.$api.fire.fireType),
      ]);
      if (res[0]) this.fireTypeList = res[0].data;
      this.getPage();
      this.getPageMap();
      this.getHouse();
      // this.getProption();
      this.getMonth();
      this.getZhanbi()
      this.getXiangqingPage()
      this.getXiangqingOne()
    },
    // 实时警情处理
    async getPage2(){
       var myDate = new Date(); //实例一个时间对象；
      var year = myDate.getFullYear();   //获取系统的年；
      var month =  myDate.getMonth()+1;   //获取系统月份，由于月份是从0开始计算，所以要加1
      var day =  myDate.getDate(); // 获取系统日，
      // myDate.getHours(); //获取系统时，
      // myDate.getMinutes(); //分
      // myDate.getSeconds(); //秒
      if(month<10){
        month = "0" + month
      }
      if(day<10){
        day = "0" + day
      }
      var startTime = year + '-' + month + '-' + day + ' ' + '00:00:00'
      var endTime = year + '-' + month + '-' + day + ' ' + '23:59:59'

       var val = await this.$axios.get(this.$api.jqzhcz.page +
          "?" +
          this.$qs.stringify({
            current: 1,
            size: 150,
            // startTime: startTime,
            // endTime: endTime,
            startTime:"2000-01-01 00:00:00",
            endTime:"2021-12-31 23:59:59"
          })
      ).then(res =>{
       
        if (res) {
          var data1 =res.data.records;
          if(data1.length>0){
            for(let i =0;i<data1.length;i++){
              data1[i].lasj = data1[i].lasj.slice(11,20)
              // data1[i].sp = "播放"
            }
            var data2 = []
            for(let i =0; i<data1.length;i++){
              if(data1[i].fdsj){
                data2.push(data1[i])
              }
            }
            // console.log(data2)
            this.tableData = data2;
          }
        }
      })
    },
    async getPage() {
      var myDate = new Date(); //实例一个时间对象；
      var year = myDate.getFullYear();   //获取系统的年；
      var month =  myDate.getMonth()+1;   //获取系统月份，由于月份是从0开始计算，所以要加1
      var day =  myDate.getDate(); // 获取系统日，
      // myDate.getHours(); //获取系统时，
      // myDate.getMinutes(); //分
      // myDate.getSeconds(); //秒
      if(month<10){
        month = "0" + month
      }
      if(day<10){
        day = "0" + day
      }
      var startTime = year + '-' + month + '-' + day + ' ' + '00:00:00'
      var endTime = year + '-' + month + '-' + day + ' ' + '23:59:59'

       var val = await this.$axios.get(this.$api.jqzhcz.page +
          "?" +
          this.$qs.stringify({
            current: 1,
            size: 150,
            startTime: startTime,
            endTime: endTime,
            // startTime:"2000-01-01 00:00:00",
            // endTime:"2021-12-31 23:59:59"
          })
      ).then(res =>{
        if (res) {
          var data1 =res.data.records;
          if(data1.length>0){
            for(let i =0;i<data1.length;i++){
              data1[i].lasj = data1[i].lasj.slice(11,20)
              // data1[i].sp = "播放"
            }
            var data2 = []
            for(let i =0; i<data1.length;i++){
              if(!data1[i].fdsj){
                data2.push(data1[i])
              }
            }
            this.tableData = data2;
          }
        }
      })
      
      
      await this.$axios.get(this.$api.jqzhcz.page +
          "?" +
          this.$qs.stringify({
            current: 1,
            size: 150,
            startTime:this.$store.state.timeList[0] || '',
            endTime:this.$store.state.timeList[1] || ''
          })
      ).then(res =>{
        
        if(res){
          var data =res.data.records;
          for(let i =0;i<data.length;i++){
            data[i].lasj = data[i].lasj.slice(11,20)
          }
          var data2 =[]
          for(let i =0;i<data.length;i++){
            if(data[i].fdsj){
              data2[i] = data[i]
            }
          }
          this.tableData2 = data2;
        }
      })
      
      
    },
    // //撒点
    async getPageMap() { //撒点
      let res = await this.$axios.get(this.$api.jqzhcz.pageMap +
          "?" +
          this.$qs.stringify({
            startTime: '2020-11-01 00:00:00',
            endTime: '2021-12-31 23:59:59',
            // startTime: this.$store.state.timeList[0] || '',
            // endTime: this.$store.state.timeList[1] || '',
          })
      );

      if (res){
        // window.jMap.Locate.clearLocate()
        this.proptionMapList = res.data.records.slice(0,30)
        var arr =[]
        arr.push(res.data.records.slice(0,30))
        this.addMarker(arr,"selfManagement")
      }
    },
    async rowClickMap(row){
     
      this.closeIsTooltip()
      this.ajxq = true
      this.ajxqnr = row
      // if(this.proptionMapList.every(val=>val.id !== row.id)){
      //   this.addMarker([row])
      //   window.jMap.goTo({
      //       x: Number(row.gisX),
      //       y: Number(row.gisY),
      //       radius: 1000
      //   }, {
      //       duration: 3,
      //       offset: {
      //           heading: -4,
      //           pitch: -70,
      //           range: 0
      //       }
      //   })
      // }
        // this.addMarkerInfo(row)
    },
    // 创建标点和点击事件
    // addMarker(lnglats,type) {
    //   console.log(lnglats)
    //   var a = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg"
    //     let target = lnglats.map((val) => {
    //       if (type == 'selfManagement') {
    //           icon = val.waterAdministrative === '单位' ? this.icon1 : val.waterAdministrative === '市政' ? this.icon2 : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? this.icon3 : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640926840&t=3457fc1dea60f60f3cd55e48ca6c287c"
    //       }else{
    //           icon = val.waterAdministrative === '单位' ?  a : val.waterAdministrative === '市政' ? a : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? a : a
    //       }
    //       console.log(icon)
    //         let marker = {
    //             id: val.id,
    //             attrbutes: val,
    //             position: { x: val.gisX, y: val.gisY, z: 0 },
    //             image: { url: icon,width:29.5,height:48.5 },
    //         };
    //         return marker
    //     })
    //     window.jMap.Locate.pointLocate(target, {
    //         isZoom: false,
    //         scaleByDistance: { minScaling: 0, maxScaling: 1, minDistance: 1000, maxDistance: 30000 },
    //         click: async (val) => {
    //           console.log(val)
    //           let res = await this.$axios.get(this.$api.house.one +
    //                 "?" +
    //                 this.$qs.stringify({
    //                   id: val.attrbutes.id,
    //                 })
    //             );
    //             if (res){
    //               this.addMarkerInfo(res.data)
    //             }
    //         }
    //     })
    // },
    // 标点点击弹窗
    // addMarkerInfo(res) {
    //     if (this.oldPopupId && res.id === this.oldPopupId) {
    //         window.jMap.Popup.hide();
    //         return this.oldPopup = null
    //     }
    //     window.jMap.Popup.show({
    //         id: res.id,
    //         //使用自定义窗体
    //         position: { x: Number(res.gisX), y: Number(res.gisY), z: Number(0) }, //使用自定义窗体
    //         element: `<div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup">
    //                       <div class="tableTooltip mapTab">
    //                       <div class="tableTitle">
    //                           <div>${res.ajlx}</div>
    //                       </div>
    //                       <el-row class="tableContent">
    //                           <div class="max">案发地址：${res.afdz}</div>
    //                           <div class="max2">案件性质：${res.ajxz}</div>
    //                           <div class="max2">案件状态：${res.ajzt}</div>
    //                           <div class="max">立案时间：${res.lasj}</div>
    //                           <div class="max2">警情等级：${res.ajdj}</div>
    //                           <div class="max2">所属中队：${res.zhongdui}</div>
    //                           <div class="max2">调动车辆：${res.cdcl}</div>
    //                           <div class="max2">状况：${res.ajzt}</div>
    //                           <div class="max" :title="${res.bcxx}">报警原因：${res.bcxx}</div>
    //                           <div class="max2">死亡人数：${res.qrqk}</div>
    //                           <div class="max2">受伤人数：${res.qrqk}</div>
    //                           <div class="max2">经济损失：${res.qrqk}</div>
    //                       </el-row>
    //                       </div>
    //                   </div>`,
    //     }, { isZoom: false, offset: [-170, -310] });
    //     this.oldPopup = res.id
    // },
    // 警情时段分布 
    async getHouse() {
      // let res = await this.$axios.get(this.$api.house.alertStatisticsByMonth +
      //     "?" +
      //     this.$qs.stringify({
      //       fireType: this.barForm.fireType,
      //       startTime: this.$store.state.timeList[0] || "",
      //       endTime: this.$store.state.timeList[1] || "",
      //     }));
      // if (res){ 
      //   this.houseList = res.data
      //   this.$refs.lineSmooth.getData()
      // }
     
      let res = await this.$axios.get(this.$api.jqzhcz.house +
      "?" +
      this.$qs.stringify({
        // fireType: this.barForm.fireType,
        startTime: this.$store.state.timeList[0] || '',
        endTime: this.$store.state.timeList[1] || '',
        // startTime: '2000-12-01 00:00:00' ,
        // endTime: '2021-12-06 00:00:00' ,
      }));
     
     
      if(res?.data){
        this.houseList =res.data
        this.$refs.lineSmooth.getData()
      }
 
    
      
      // let res2 = await this.$axios.get(this.$api.jqzhcz.month +
      // "?" +
      // this.$qs.stringify({
      //   // fireType: this.barForm.fireType,
      //   startTime: "2021-01-01",
      //   endTime: "2021-12-31",
      // }));
      // console.log(res2)
      // if (res){ 
      //   this.houseList = res.data
      //   this.$refs.lineSmooth.getData()
      // }
      
    },
    // 警情处置情况
    async getProption() { //旧
      // let res = await this.$axios.get(this.$api.house.alertStatistics +
      //     "?" +
      //     this.$qs.stringify({
      //       startTime: this.$store.state.timeList[0] || "",
      //       endTime: this.$store.state.timeList[1] || "",
      //     }));
      // if (res){
		  // console.log(res.data)
      //   this.proptionList = res.data;
      //   this.proptionList[4] = res.data.reduce((data, rel) => {
      //     console.log(data + rel.number)
      //     return data + rel.number;
      //   }, 0);
      //   console.log(this.proptionList[4]);
      //   this.$refs.gauge1.getData();
      //   this.$refs.gauge2.getData();
      //   this.$refs.gauge3.getData();
      // }
    },
    // 历史警情趋势图
    async getMonth() {
      // let res = await this.$axios.get(
      //   this.$api.house.alertStatisticsByMonth +
      //     "?" +
      //     this.$qs.stringify({
      //       startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
      //       endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
      //     })
      // );
      // if (res) {
      //   this.monthList = res.data;
      //   this.$refs.barChart.getData();
      // }

      let res = await this.$axios.get(
        this.$api.jqzhcz.month +
          "?" +
          this.$qs.stringify({
            // startTime: "2020-01-01 00:00:00",
            // endTime: "2021-12-31 00:00:00",
            startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
            endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
          })
      );
      
      if (res) {
        this.monthList = res.data;
        this.$refs.barChart.getData();
      }
    },
    searchTime(val){
      this.timeArea = val
      this.getMonth()
    },


    // 警情占比 
    async getZhanbi() {
      let res = await this.$axios.get(this.$api.jqzhcz.alertStatistics +
      "?" +
      this.$qs.stringify({
        // fireType: this.barForm.fireType,
        // startTime: "2020-01-01 00:00:00",
        // endTime: "2021-12-31 00:00:00",
        startTime: this.$store.state.timeList[0] || "",
        endTime: this.$store.state.timeList[1] || "",
      }));
      
      this.proptionList = res.data
    },
    // 警情详情 
    async getXiangqingPage() {
      let res = await this.$axios.get(this.$api.jqzhcz.page +
      "?" +
      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",
      }));
     
      
    },
  },
};
</script>

<style lang="scss" scoped>
.videoBox{
  width: 100%;
  height: auto;
}
.iframe{
  width:95%;
  margin:0 2.5% 0;
  display: block;
}
.iframe2{
  width:90%;
  margin:0 5% 0;
  display: block;
  position: absolute;
  top:0.4rem;
}
.table1{margin-top:-0.15rem !important;height:108% !important}
.table2{margin-top:-0.15rem !important;height:145% !important}
.contentBox {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 0.125rem;
  color: #fff;
  // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
  & > .el-col {
    flex: 1;
    max-width: 8rem;
    height: 100%;
  }
  .leftBox {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;
    & > .el-col {
      flex: 1;
      max-height: 50%;
      background: url('~@a/img/enforce/bg1.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      h4 {
        font-size: 0.2125rem;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        text-align: center;
        color: #00ffff;
      }
    }
    .leftTop {
      padding: 0.375rem 0.475rem 0.1875rem;
      margin-bottom: 0.125rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .leftTopContent {
        width: 100%;
        height: 100%;
        display: block;
        .selectBar {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          height: 0.875rem;
          padding: 0.25rem 0;
        }
        // .fireBar {
        //   height: calc(100% - 0.875rem);
        // }
        .fireBar {
          height: 90%;
          margin-top:8%;
        }
      }
    }
    .leftBot {
      padding: 0.375rem 0.45rem 0.1875rem;
      box-sizing: border-box;
      .leftBotContent {
        width: 100%;
        height: 100%;
        display: block;
        .selectBar {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          height: 0.875rem;
          padding: 0.25rem 0;
          .el-row{
            display: flex;
            .el-button {
              // width: 0.375rem;
              height: 0.325rem;
              min-height: auto;
              padding: 0 .0625rem;
              margin-right: 0.075rem;
              margin-left: 0;
              background: #000707;
              color: #fff;
              border: 1px solid;
              box-sizing: border-box;
              border-radius: .0375rem;
              font-size: 0.15rem;
              border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
            }
            .btnClick {
              color: #fccf2a;
              border-image: linear-gradient(0deg, #ff6800 0%, #fccf2a 100%) 1 1;
            }
          }
        }
        .fireBar {
          height: calc(100% - 0.875rem);
          height: calc(100% - 0.875rem);
        }
        
      }
    }
  }
  .rightBox {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;
    & > .el-col {
      flex: 1;
      background: url(~@a/img/enforce/bg1.png) no-repeat;
      background-size: 100% 100%;
      position: relative;
      h4 {
        font-size: 0.2125rem;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        text-align: center;
        color: #00ffff;
      }
    }
    .rightTop {
      padding: 0.1rem 0.475rem 0.1875rem;
      margin-bottom: 0.125rem;
      max-height:30%;
      .rightBoxCon {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        & > .el-row {
          flex: none;
          width: 33.33%;
          display: flex;
          flex-direction: column;
        }
        .rightTopTitle {
          margin-top:0.1rem;
          span {
            font-size: 0.2125rem;
            text-align: center;
          }
          justify-content: center;
        }
        .rightTopNumber {
          width:80%;
          margin: 0 10%;
          justify-content: center;
          &>span {
            margin: 0 auto;
            padding: 0.1rem 0.2rem;
            font-size: 0.14rem;
            border-radius: 0.1875rem;
            display: flex;
            box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
          }
        }
        .rightTopChart {
          margin: 0.1rem 0 -0.1rem;
        }
      }
    }
    .rightBot {
      flex: 1;
      max-height: 35%;
      padding: 0.5rem 0.35rem 0.25rem;
      box-sizing: border-box;
      position: relative;
      /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: 50%;
        bottom:-100%;
        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;
        z-index: 10000;
        padding:0 0 60px;
        .el-card__header{
          padding: .125rem;
          border-color: #30cfff;
          span{
            margin-top:0
          }
          .card-header{
            
            height:400px;
            position: relative;
            .top{
              position: absolute;
              top:0px;
              width:100%;
              font-size: .2rem;
              justify-content: space-between;
              align-items: center;
              i{
                font-size: .275rem;
                float:right
              }
            }
            
          }
        }
        img{
          width: 100%;
          height: auto;
        }
      }
    }
    .rightBot2 {
      flex: 1;
      max-height: 34%;
      margin-top:1%;
      padding: 0.5rem 0.35rem 0.25rem;
      box-sizing: border-box;
      position: relative;
      .shui{
        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
        background: rgba(0, 44, 110, 0.5);
        
        margin:-10px 0px 10px 0;
        font-size: 14px;
        padding:6px;
        text-align: center;
        font-size: 14px;
        text-align: left;
        width:100%;
        .title{
          width:34%;
        }
        .title1{
          width:22%;
          
        }
        .title2{
          width:22%;
          color:red
        }
        .title3{
          width:22%;
          color:#00ffff
        }
      }
      /deep/ .cell {
        text-align: center !important;
      }
      /deep/ td{
        min-width: auto !important;
        width: auto !important;
        text-align: left !important;
        padding:0;
      }
      /deep/ .el-table__body-wrapper{
        height: 65% !important;;
      }
      /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: .125rem;
          border-color: #30cfff;
          .card-header{
            display: flex;
            font-size: .2rem;
            justify-content: space-between;
            align-items: center;
            i{
              font-size: .275rem;
            }
          }
        }
        img{
          width: 100%;
          height: auto;
        }
      }
    }
    
  }
}
.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;
}
.mapTips{
  border:1px solid #00ffff;
  border-radius: 4px;
  margin:0 8px 10px 0;
  box-shadow:0px 0px 10px #00ffff;
  .el-checkbox{
    color:#fff;
  }
}
/deep/  .el-checkbox__inner{
    background-color:transparent;
}


@media screen and (min-width: 1940px) and (max-width:4000px){
  .table1{margin-top:0rem !important;height:105% !important}
  .table2{margin-top:0rem !important;height:130% !important}
  .iconfont{
    font-size: 25px;
  }
  .videoBox{
  width: 100%;
  height: auto;
}
.contentBox {
  display: flex;
  width: 100%;
  height: 105%;
  box-sizing: border-box;
  padding-bottom: 0.125rem;
  color: #fff;
  // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
  & > .el-col {
    flex: 1;
    max-width: 8rem;
    height: 100%;
  }
  .leftBox {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;
    & > .el-col {
      flex: 1;
      max-height: 50%;
      // background: url('~@a/img/enforce/bg1.png') no-repeat;
      // background-size: 100% 100%;
      background: url("~@a/img/home/box-bg_02.png") no-repeat  0px 26px;
      background-size: 100% calc(100% - 60px);
      position: relative;
      h4 {
        background: url("~@a/img/home/box-bg_01.png") no-repeat 0px 1px;
        background-size: 100% 100%;
        font-size: 0.2125rem;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        text-align: center;
        color: #00ffff;
      }
    }
    .leftTop {
      padding: 0.375rem 0.475rem 0.1875rem;
      margin-bottom: 0.125rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .leftTopContent {
        width: 100%;
        height: 100%;
        display: block;
        .selectBar {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          height: 0 !important;
          padding:0 !important;
         
        }
        .fireBar {
          height: 90%;
          margin-top:1%;
        }
      }
    }
    .leftBot {
      padding: 0.375rem 0.45rem 0.1875rem;
      box-sizing: border-box;
      .leftBotContent {
        width: 100%;
        height: 100%;
        display: block;
        margin-top:-2% !important;
        .selectBar {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          height: 0 !important;
          padding:0 !important;
          .el-row{
            display: flex;
            .el-button {
              // width: 0.375rem;
              height: 0.12rem;
              min-height: auto;
              padding: 0 .03125rem;
              margin-right: 0.0375rem;
              margin-left: 0;
              background: #000707;
              color: #fff;
              border: 1px solid;
              box-sizing: border-box;
              border-radius: .0375rem;
              font-size: 0.08rem;
              border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
            }
            .btnClick {
              color: #fccf2a;
              border-image: linear-gradient(0deg, #ff6800 0%, #fccf2a 100%) 1 1;
            }
          }
        }
        .fireBar {
          height: 85%;
          margin-top:5%;
        }
      }
    }
  }
  .rightBox {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;
    & > .el-col {
      flex: 1;
      background: url("~@a/img/home/box-bg_02.png") no-repeat  0px 26px;
      background-size: 100% calc(100% - 60px);
      position: relative;
      min-height:33%;
      h4 {
        background: url("~@a/img/home/box-bg_01.png") no-repeat 0px 1px;
        background-size: 100% 100%;
        font-size: 0.2125rem;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        text-align: center;
        color: #00ffff;
      }
    }
    .rightTop {
      padding: 0.1rem 0.475rem 0.1875rem;
      margin-bottom: 0.125rem;
      max-height:34%;
      
      .rightBoxCon {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        & > .el-row {
          flex: none;
          width: 33.33%;
          display: flex;
          flex-direction: column;
        }
        .rightTopTitle {
          margin-top:-0.02rem;
          span {
            font-size: 0.12rem;
            text-align: center;
          }
          justify-content: center;
        }
        .rightTopNumber {
          width:80%;
          margin: 0 10%;
          justify-content: center;
          &>span {
            margin: 0 auto;
            padding: 6px 20px;
            font-size: 0.14rem;
            border-radius: 0.1875rem;
            display: flex;
            box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
          }
          .iconfont{
            font-size:0.18rem;
            font-weight: 700;
          }
        }
        .rightTopChart {
          margin: 0.05rem 0 -0.05rem ;
        }
      }
    }
    .rightBot {
      flex: 1;
      max-height: 35%;
      padding: 0.5rem 0.35rem 0.25rem;
      box-sizing: border-box;
      position: relative;
      margin:-0.3rem 0 0;
      /deep/ .el-table{
        margin-top:-0.2rem !important;
      }
      /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: fixed;
        bottom: 0;
        margin: auto;
        border-radius: 3%;
        width: 20%;
        left:50%;
        margin-left:15%;
        max-height: 100%;
        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
        background: rgba(0, 44, 110, 0.6);
        border: none;
        color: #FFF;
        z-index: 100;
        .el-card__header{
          padding: .125rem;
          border-color: #30cfff;
          .card-header{
            display: flex;
            font-size: .2rem;
            justify-content: space-between;
            align-items: center;
            i{
              font-size: .275rem;
            }
          }
        }
        img{
          width: 100%;
          height: auto;
        }
      }
    }
    .rightBot2 {
      flex: 1;
      max-height: 40%;
      // margin-top:1%;
      padding: 0.5rem 0.35rem 0.25rem;
      box-sizing: border-box;
      position: relative;
      margin-top:-0.2rem;
      /deep/ .el-table{
        margin-top:-0.2rem !important;
      }
      .shui{
        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
        background: rgba(0, 44, 110, 0.5);
        
        margin:-10px 0px 10px 0;
        font-size: 14px;
        padding:6px;
        text-align: center;
        font-size: 14px;
        text-align: left;
        width:100%;
        margin-top:-.28rem;
        font-size: 0.12rem;;
        .title{
          width:34%;
        }
        .title1{
          width:22%;
          
        }
        .title2{
          width:22%;
          color:red
        }
        .title3{
          width:22%;
          color:#00ffff
        }
      }
      /deep/ .cell {
        text-align: center !important;
      }
      /deep/ td{
        min-width: auto !important;
        width: auto !important;
        text-align: left !important;
        padding:0;
      }
      /deep/ .el-table__body-wrapper{
        height: 65% !important;;
      }
      /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;
        display: none;
        .el-card__header{
          padding: .125rem;
          border-color: #30cfff;
          .card-header{
            display: flex;
            font-size: .2rem;
            justify-content: space-between;
            align-items: center;
            i{
              font-size: .275rem;
            }
          }
        }
        img{
          width: 100%;
          height: auto;
        }
      }
    }
    
  }
}
// .tableTooltip{
//   width:800px;
// }
.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;
  font-size: 0.14rem !important;
  
}
.mapTips{
  border:1px solid #00ffff;
  border-radius: 4px;
  margin:0 8px 10px 0;
  box-shadow:0px 0px 10px #00ffff;
  .el-checkbox{
    color:#fff;
  }
}
/deep/ .el-form-item__label{
  font-size: 0.12rem;
}
/deep/ .el-table__header-wrapper{
  height:20px !important;
  padding:0 !important;
}
/deep/ .el-form .el-form-item .el-form-item__label{
  font-size: 0.12rem !important;
}
/deep/ .el-form .el-form-item .el-form-item__content{
  font-size: 0.12rem !important;
}
/deep/ .el-select .el-input--mini{
  font-size: 0.12rem !important;
}
/deep/ .el-select .el-input__inner{
  font-size: 0.12rem !important;
}
}
</style>
<style>
.el-checkbox{
  padding-bottom:6px;
  display: block;
  border-bottom:1px solid #00ffff;
  padding:2px 0 2px 8px;
  width:100%;
  box-sizing: border-box;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color:transparent;
      border-color:#00ffff;
      border-bottom:1px solid #00ffff;
      
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #00ffff;
      background-color:transparent;
     }
  .el-checkbox.is-bordered.is-checked{
      border-color: #00ffff;
      background-color:transparent;
     }
  .el-checkbox__input.is-focus .el-checkbox__inner{
      border-color:  #00ffff;
      background-color:transparent;
  }

  
</style>
<style>
.sp{
    font-size: 0.14rem;
    color:#fff;
    position: absolute;
    z-index: 2;
    right:41px;
    top:30px;
    border: 1px solid rgb(34, 128, 217);
    border-radius: 6px;
    padding:1px 6px;
    background-color: #409eff;
  }
  .close{ 
    width:20px;
    height:20px;
    position: absolute;
    right:10px;
    top:10px;
    z-index: 10000;
    display: block;}
  .close2{
    width:20px;
    height:20px;
    position: absolute;
    right:10px;
    top:10px;
    z-index: 10000;
    display: block;
  }
  .anxqtk{
    background: transparent;
    border-radius: 3%;
    box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
    background: rgba(0, 44, 110, 0.6);
    font-size: 0.2rem;
    padding: 0.1875rem;
    position: fixed;
    top:140px;
    right:150px;
    z-index:10000;

  }
  .anxqtk2{
    background: transparent;
    border-radius: 3%;
    box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
    background: rgba(0, 44, 110, 0.6);
    font-size: 0.2rem;
    padding: 0.1875rem;
    position: fixed;
    top:140px;
    right:300px;
    z-index:10000;

  }
@media screen and (min-width: 1940px) and (max-width:4000px){
  .sp{
    font-size: 0.12rem;
    color:#fff;
    position: absolute;
    z-index: 2;
    right:100px;
    top:54px;
    border: 1px solid rgb(34, 128, 217);
    border-radius: 6px;
    padding:2px 6px;
    background-color: #409eff;
  }
  /* tr{
    pointer-events: none
  } */
  .close2{
    width:40px;
    height:40px;
    position: absolute;
    right:30px;
    top:20px;
    z-index: 10000;
    display: block;
  }
  .close{
    width:40px;
    height:40px;
    position: absolute;
    right:30px;
    top:20px;
    z-index: 10000;
    display: block;
  }
  .anxqtk{
    background: transparent;
    border-radius: 3%;
    box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
    background: rgba(0, 44, 110, 0.6);
    font-size: 0.2rem;
    padding: 0.1875rem;
    position: fixed;
    top:80px;
    right:350px;
    z-index:1000;

  }
  .anxqtk2{
    background: transparent;
    border-radius: 3%;
    box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
    background: rgba(0, 44, 110, 0.6);
    font-size: 0.2rem;
    padding: 0.1875rem;
    position: fixed;
    top:180px;
    right:750px;
    z-index:1000;

  }
   /* .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: .125rem;
          border-color: #30cfff;
          .card-header{
            display: flex;
            font-size: .2rem;
            justify-content: space-between;
            align-items: center;
            i{
              font-size: .275rem;
            }
          }
        }
        img{
          width: 100%;
          height: auto;
        }
      } */
    
  
}
.el-card__body{
  display: none;
}
</style>