<template>
  <div class="main" ref="screen">
    <!-- 大屏头部 -->
    <div class="main-header">
      <div class="main-header-left">
        <div class="logo"></div>
        <!-- 下拉选择器 -->
        <div style="width: 110px" class="z_index">
          <el-select
            v-model="valueRoad"
            placeholder="请选择"
            :popper-append-to-body="false"
            @change="handleChangeRoadSelect"
          >
            <el-option
              v-for="item in roadData"
              :key="item.id"
              :label="item.name"
              :value="{
                value: item.id,
                label: item.name,
                companyId: item.companyId,
                companyName: item.companyName,
                roadSegmentId: item.roadSegmentId,
                roadSegmentName: item.roadSegmentName
              }"
            >
            </el-option>
          </el-select>
        </div>
        <div style="width: 110px; margin-left: 10px" class="z_index">
          <!-- <el-select
            v-model="valueRoad"
            placeholder="请选择"
            :popper-append-to-body="false"
            @change="handleChangeRoad"
          >
            <el-option
              v-for="item in roadData"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select> -->
        </div>
      </div>
      <div class="main-header-center">
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基础概况" name="first"></el-tab-pane>
            <el-tab-pane label="业务概况" name="second"></el-tab-pane>
            <el-tab-pane
              label="工作台"
              name="three"
              v-if="groupCodeArr.indexOf('noWorkbench') === -1"
            ></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="main-header-right">
        <div class="left z_index" v-show="isShow !== true">
          <el-date-picker
            value-format="yyyy-MM"
            v-model="value"
            type="month"
            placeholder="选择年份"
            @change="changeDate"
          >
            <!-- <el-date-picker
            value-format="yyyy-MM"
            v-model="value"
            type="month"
            placeholder="选择年份"
          >-->
          </el-date-picker>
        </div>
        <!-- 进入工作台 -->
        <!-- <div class="workpace z_index">
          <el-tooltip content="工作台" placement="bottom">
            <span>
              <i class="el-icon-monitor" @click="handleWorkpaceClick"></i>
            </span>
          </el-tooltip>
        </div> -->
        <div class="right z_index">
          <el-tooltip
            :content="isScreenFull ? '退出全屏' : '全屏'"
            placement="bottom"
          >
            <span class="navigator-btnI">
              <i
                v-if="!isScreenFull"
                @click="handleScreenFull"
                class="icon-fullscreen top-link-icon"
              ></i>
              <i
                v-if="isScreenFull"
                @click="handleScreenFull"
                class="icon-restore top-link-icon"
              ></i>
            </span>
          </el-tooltip>
        </div>
        <!-- 退出按钮 -->
        <div class="z_index logout" @click="handleLogout">
          <div class="logout-username">{{ username }}</div>
          <svg class="icon svg-icon-logout" aria-hidden="true">
            <use xlink:href="#icon-exit-full"></use>
          </svg>
        </div>
      </div>
    </div>
    <!-- 基础概况 -->
    <div class="continer" v-if="isShow" key="basic">
      <div class="continer-left">
        <div class="box-10">
          <model-title>
            <div slot="h1">基础设施统计(数量)</div>
            <!-- <div slot="span">
              Infrastructure Statistics (quantity)
            </div> -->
          </model-title>
          <div class="box-8">
            <div class="box-8-top">
              <div
                class="box-8-item"
                v-for="item in basicData_1"
                :key="item.id"
                @click="handleBasicDataClick(item)"
                :class="index == item.index ? 'active' : ''"
              >
                <div class="box-8-top-bgc">
                  <span>{{ item.name }}</span>
                  <span>{{ item.count }}</span>
                  <span v-if="item.id == 3" class="slop_side_basic">
                    <p>高危边坡: {{ item.hightCount }}</p>
                    <p>非高危边坡: {{ item.notHigthcount }}</p>
                  </span>
                  <!-- <span>{{ item.count }}</span> -->
                </div>
              </div>
            </div>
            <div class="box-8-bottom">
              <div
                class="box-8-items"
                v-for="item in basicData_2"
                :key="item.id"
                @click="handleBasicDataClick(item)"
                :class="index == item.index ? 'active' : ''"
              >
                <div class="box-8-items-span">
                  <span>{{ item.name }}</span>
                  <span v-for="(item1, index) in item.data" :key="index">
                    <p>{{ item1.name }}</p>
                    <p>{{ item1.count }}</p>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- <dv-loading v-else>Loading...</dv-loading> -->
        </div>
        <div class="box-9">
          <model-title>
            <div slot="h1">基础设施明细</div>
            <!-- <div slot="span">
              Infrastructure Statistics
            </div> -->
          </model-title>
          <!-- <div class="box-9-item" v-if="loadingBasic">
            <div style="width:95%;height:95%">
              <dv-scroll-board
                :config="config16"
                style="width:100%;height:100%"
              />
            </div>
          </div> -->
          <!-- <div class="box-9-item"> -->

          <ht-table
            @load="loadData"
            :data="BasicData"
            :pageResult="pageResult"
            :selection="true"
            :selectable="false"
            :show-custom-column="false"
            :show-export="false"
            ref="htTable"
            nopagination
            @row-dblclick="handleDetiles"
          >
            <template v-if="BasicType == 3">
              <ht-table-column
                prop="number"
                label="编号"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="roadSegmentName"
                label="所在路段"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="direction"
                label="方向"
                :show-overflow-tooltip="true"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('qlfx', row.direction) }}</div>
                </template>
              </ht-table-column>
              <ht-table-column
                prop="isHighRisk"
                label="是否高风险"
                :show-overflow-tooltip="true"
              >
                <template v-slot="{row}">
                  <span type="danger" v-if="row.isHighRisk == 0">否</span>
                  <span type="success" v-else-if="row.isHighRisk == 1">是</span>
                </template>
              </ht-table-column>
              <ht-table-column
                prop="isRamp"
                label="是否斜坡"
                :show-overflow-tooltip="true"
              >
                <template v-slot="{row}">
                  <span type="danger" v-if="row.isRamp == '0'">否</span>
                  <span type="success" v-if="row.isRamp == '1'">是</span>
                </template>
              </ht-table-column>
            </template>
            <!-- 服务区 -->
            <template v-else-if="BasicType == 1">
              <ht-table-column
                prop="name"
                label="名称"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
              <ht-table-column
                prop="typeValue"
                label="类型"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('yxss', row.type) }}</div>
                </template>
              </ht-table-column>
              <ht-table-column
                prop="directionValue"
                label="方向"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('fx', row.direction) }}</div>
                </template>
              </ht-table-column>
              <ht-table-column
                prop="pegK"
                label="桩号值"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
              <ht-table-column
                prop="roadSegmentName"
                label="所属路段"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
            </template>
            <!-- 收费站 -->
            <template v-else-if="BasicType == 2">
              <ht-table-column
                prop="number"
                label="编号"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
              </ht-table-column>
              <ht-table-column
                prop="name"
                label="名称"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
              <ht-table-column
                prop="typeValue"
                label="类型"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('yxss', row.type) }}</div>
                </template>
              </ht-table-column>
              <ht-table-column
                prop="roadSegmentName"
                label="所在路段"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
              </ht-table-column>
              <ht-table-column
                prop="direction"
                label="方向"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('fx', row.direction) }}</div>
                </template>
              </ht-table-column>
            </template>
            <!-- 桥梁 -->
            <template v-else-if="BasicType == 4">
              <ht-table-column
                prop="number"
                label="编号"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
              </ht-table-column>
              <ht-table-column
                prop="name"
                label="名称"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
              </ht-table-column>
              <ht-table-column
                prop="directionValue"
                label="方向"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
              </ht-table-column>
              <!-- <ht-table-column
                    prop="typeValue"
                    label="桥梁类型"
                    :filters="getDictData('qllx')"
                    :show-overflow-tooltip="true"
                    width='100'
                  >
                    <template v-slot="{row}">
                      <div>{{ getDictName('qllx', row.type) }}</div>
                    </template>
                  </ht-table-column> -->
              <ht-table-column
                prop="categoryValue"
                label="桥梁分类"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('qllb', row.category) }}</div>
                </template>
              </ht-table-column>
              <ht-table-column
                prop="length"
                label="长度(km)"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
              </ht-table-column>
            </template>
            <!-- 隧道 -->
            <template v-else-if="BasicType == 5">
              <ht-table-column
                prop="number"
                label="编码"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
              <ht-table-column
                prop="name"
                label="名称"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
              <ht-table-column
                prop="length"
                label="隧道长度(m)"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
              <ht-table-column
                prop="typeValue"
                label="隧道类型"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('sdfl', row.type) }}</div>
                </template>
              </ht-table-column>
              <ht-table-column
                prop="gradeValue"
                label="隧道等级"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('sddj', row.grade) }}</div>
                </template>
              </ht-table-column>
            </template>
            <!-- 涵洞 -->
            <template v-else-if="BasicType == 6">
              <ht-table-column
                prop="number"
                label="编号"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
              <ht-table-column
                prop="height"
                label="涵洞高度(m)"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
              <ht-table-column
                prop="length"
                label="涵洞长度(m)"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
              <ht-table-column
                prop="usesValue"
                label="用途"
                :show-overflow-tooltip="true"
                :key="BasicType"
              />
              <ht-table-column
                prop="typeValue"
                label="涵洞类型"
                :show-overflow-tooltip="true"
                :key="BasicType"
              >
                <template v-slot="{row}">
                  <div>{{ getDictName('hdlx', row.type) }}</div>
                </template>
              </ht-table-column>
            </template>
          </ht-table>

          <!-- </div> -->
          <!-- <dv-loading v-else>Loading...</dv-loading> -->
        </div>
      </div>
      <div class="continer_basic-right">
        <div class="continer_basic-right-left">
          <div class="map" id="map">
            <!-- 浮动在地图上的操作模块 -->
            <!-- <div class="operationMapBox">
              <div class="operationModular">
                <div
                  class="modular"
                  v-for="item in listData"
                  :key="item.key"
                  @click="handleModular(item)"
                  @mouseenter="enter(item)"
                  @mouseleave="leave(item)"
                >
                  <div class="modularImg">
                    <img
                      :src="
                        item.isActive || item.isHover ? item.active : item.url
                      "
                    />
                  </div>
                  <span :class="item.isActive ? 'activeModular' : ''">{{
                    item.name
                  }}</span>
                </div>
              </div>
            </div> -->
          </div>
          <!-- <iframe
            v-if="showVideo"
            id="videoIframe"
            class="videoWindow"
            scrolling="no"
            frameborder="0"
            allowtransparency="0"
            :src="iframeUrl"
          ></iframe> -->
          <video-player
            v-if="showVideoModel"
            id="videoIframe"
            class="videoWindow"
            @close="() => (showVideoModel = false)"
          >
          </video-player>
        </div>
        <div class="continer_basic-right-right">
          <div class="continer-right-right-top background">
            <dv-border-box-10>
              <model-title>
                <div slot="h1">构造物集</div>
              </model-title>
              <!-- 
              <div class="box-12">
                <dv-scroll-ranking-board
                  :config="config9"
                  style="width: 95%; height: 95%"
                />
              </div> -->
              <div class="operationMapBox" ref="operationMapBox">
                <div class="operationModular">
                  <div
                    class="modular"
                    v-for="item in listData"
                    :key="item.key"
                    @click="handleModular(item)"
                    @mouseenter="enter(item)"
                    @mouseleave="leave(item)"
                  >
                    <div class="modularImg">
                      <img
                        :src="
                          item.isActive || item.isHover ? item.active : item.url
                        "
                      />
                    </div>
                    <span :class="item.isActive ? 'activeModular' : ''">{{
                      item.name
                    }}</span>
                  </div>
                </div>
              </div>
            </dv-border-box-10>
          </div>
          <div class="continer-right-right-center background">
            <dv-border-box-10>
              <model-title>
                <div slot="h1">养护车辆统计(个)</div>
              </model-title>
              <div class="box-12">
                <dv-charts :option="option10" />
              </div>
            </dv-border-box-10>
          </div>
          <div class="continer-right-right-bottom background">
            <dv-border-box-10>
              <model-title>
                <div slot="h1">公司人员统计(人)</div>
              </model-title>
              <div class="box-12">
                <dv-charts :option="option11" />
              </div>
            </dv-border-box-10>
          </div>
        </div>
      </div>
    </div>
    <!-- 业务概况 -->
    <div class="continer_biz" v-else key="biz">
      <div class="continer_biz-top">
        <div class="continer_biz-top_1 background">
          <dv-border-box-10>
            <model-title>
              <div slot="h1">年度预算金额/已使用预算总额(万元)</div>
            </model-title>
            <div class="textCount">
              <dv-digital-flop
                :config="config1"
                style="width: 200px; height: 50px"
              />
              <span>/</span>
              <dv-digital-flop
                :config="config2"
                style="width: 200px; height: 50px"
              />
              <div class="text">万元</div>
            </div>
          </dv-border-box-10>
        </div>
        <div class="continer_biz-top_2 background">
          <dv-border-box-10>
            <model-title>
              <div slot="h1">日常养护项目计费金额(万元)</div>
            </model-title>
            <div class="textCount">
              <dv-digital-flop
                :config="config3"
                style="width: 200px; height: 50px"
              />
              <div class="text">万元</div>
            </div>
          </dv-border-box-10>
        </div>
        <div class="continer_biz-top_3 background">
          <dv-border-box-10>
            <model-title>
              <div slot="h1">专项养护项目计费金额(万元)</div>
            </model-title>
            <div class="textCount">
              <dv-digital-flop
                :config="config4"
                style="width: 200px; height: 50px"
              />
              <div class="text">万元</div>
            </div>
          </dv-border-box-10>
        </div>
        <div class="continer_biz-top_4 background">
          <dv-border-box-10>
            <model-title>
              <div slot="h1">抢险养护项目计费金额(万元)</div>
            </model-title>
            <div class="textCount">
              <dv-digital-flop
                :config="config5"
                style="width: 200px; height: 50px"
              />
              <div class="text">万元</div>
            </div>
          </dv-border-box-10>
        </div>
      </div>
      <div class="continer_biz-bottom">
        <div class="continer_biz-bottom-left">
          <div class="continer_biz-bottom-left-top">
            <dv-border-box-10>
              <model-title
                :show="true"
                value="site"
                :yearMouth="value"
                @BizChange="BizChange"
              >
                <div slot="h1">巡查巡检(个)</div>
              </model-title>
              <div class="countHeight flex-center">
                <div
                  class="back"
                  v-if="backIsShow"
                  @click="handleBack('backIsShow')"
                >
                  <img src="../../../assets/mapImg/返回.png" />
                </div>
                <div id="G2-continar1" style="width: 100%; height: 100%"></div>
              </div>
            </dv-border-box-10>
          </div>
          <div class="continer_biz-bottom-left-center">
            <dv-border-box-10>
              <model-title
                :show="true"
                value="daily"
                :yearMouth="value"
                @BizChange="BizChange"
              >
                <div slot="h1">日常巡检(个)</div>
              </model-title>
              <div class="countHeight flex-center">
                <div
                  class="back"
                  v-if="backIsShowDaily"
                  @click="handleBack('backIsShowDaily')"
                >
                  <img src="../../../assets/mapImg/返回.png" />
                </div>
                <div id="G2-continar2" style="width: 100%; height: 100%"></div>
              </div>
            </dv-border-box-10>
          </div>
          <div class="continer_biz-bottom-left-bottom">
            <dv-border-box-10>
              <model-title
                :show="true"
                value="check"
                :yearMouth="value"
                @BizChange="BizChange"
              >
                <div slot="h1">定期/经常检查(个)</div>
              </model-title>
              <div class="countHeight flex-center">
                <div id="G2-continar3" style="width: 100%; height: 100%"></div>
              </div>
            </dv-border-box-10>
          </div>
        </div>
        <div class="continer_biz-bottom-center">
          <div class="continer_biz-bottom-center-top">
            <dv-border-box-10>
              <model-title
                :show="true"
                :yearMouth="value"
                value="disease"
                @BizChange="BizChange"
              >
                <div slot="h1">病害数量(个)</div>
              </model-title>
              <div class="countHeight">
                <dv-charts :option="option19" />
              </div>
            </dv-border-box-10>
          </div>
          <div class="continer_biz-bottom-center-center">
            <dv-border-box-10>
              <model-title
                :show="true"
                :yearMouth="value"
                value="diseaseType"
                @BizChange="BizChange"
              >
                <div slot="h1">病害类型(个)</div>
              </model-title>
              <div class="countHeight flex-center">
                <div id="G2-continar5" style="width: 100%; height: 100%"></div>
              </div>
            </dv-border-box-10>
          </div>
          <div class="continer_biz-bottom-center-bottom">
            <dv-border-box-10>
              <model-title
                :isShowYear="true"
                :yearMouth="value"
                value="diseaseDay"
                @BizChange="BizChange"
              >
                <div slot="h1">病害平均处理天数(天)</div>
              </model-title>
              <div class="countHeight">
                <!-- <dv-scroll-ranking-board
                  :config="config10"
                  style="width:95%;height:95%"
                /> -->
                <div id="G2-continar6" style="width: 100%; height: 100%"></div>
              </div>
            </dv-border-box-10>
          </div>
        </div>
        <div class="continer_biz-bottom-right">
          <div class="continer_biz-bottom-right-top">
            <dv-border-box-10>
              <model-title
                :show="true"
                :yearMouth="value"
                value="work"
                @BizChange="BizChange"
              >
                <div slot="h1">养护工单(个)</div>
              </model-title>
              <div class="countHeight flex-center">
                <div
                  class="back"
                  v-if="backIsShowWork"
                  @click="handleBack('backIsShowWork')"
                >
                  <img src="../../../assets/mapImg/返回.png" />
                </div>
                <div id="G2-continar4" style="width: 100%; height: 100%"></div>
              </div>
            </dv-border-box-10>
          </div>
          <div class="continer_biz-bottom-right-center">
            <dv-border-box-10>
              <model-title
                :show="true"
                :yearMouth="value"
                value="task"
                @BizChange="BizChange"
              >
                <div slot="h1">任务执行情况</div>
              </model-title>
              <div class="countHeight">
                <dv-charts :option="option20" />
              </div>
            </dv-border-box-10>
          </div>
          <div class="continer_biz-bottom-right-bottom">
            <dv-border-box-10>
              <model-title
                :show="true"
                :yearMouth="value"
                value="amount"
                @BizChange="BizChange"
              >
                <div slot="h1">已支付养护金额(万元)</div>
              </model-title>
              <div class="countHeight">
                <dv-capsule-chart
                  v-if="config11.data.length"
                  :config="config11"
                  style="width: 100%; height: 100%"
                />
                <div class="NoData" v-else>
                  <img src="../../../assets/mapImg/无数据.png" alt="无数据" />
                  <span>暂无数据...</span>
                </div>
              </div>
            </dv-border-box-10>
          </div>
        </div>
      </div>
    </div>
    <!-- 基础设施明细详情弹层 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="false"
      top="28vh"
      v-if="dialogVisible"
      :before-close="handleClose"
    >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import basicData from '@/api/basicData.js'
import screenfull from 'screenfull'
import option from './js/option.js'
import config from './js/config.js'
import DataJson from './js/DataJson.js'
import ModelTitle from './components/ModelTitle.vue'
import videoPlayer from './components/videoPlayer.vue'
import utils from '@/hotent-ui-util.js'
import {Chart} from '@antv/g2'
import {bigDataMixin} from './js/bigDataMixin.js'
import {basicPagesMixin} from './js/basicPagesMixin.js'
import {accountMixin} from './js/accountMixin.js'
import './js/iconfont.js'
import DataSet from '@antv/data-set'
export default {
  inject: ['reload'],
  components: {
    ModelTitle,
    videoPlayer
  },
  mixins: [bigDataMixin, basicPagesMixin, accountMixin],
  data() {
    return {
      infoWindow: '', //地图弹层信息窗口
      dialogTitle: '',
      dialogVisible: false, //基础设施明细弹层控制
      mapLoading: false, //地图加载loading
      isNext: true, //是否可以下纂
      dataArrMap: [], //暂存地图切换数据
      activeName: 'first',
      activeNameMap: '桥梁',
      time1: '',
      clickIndex: 0, //轮播时记录索引
      isScreenFull: false,
      isShow: true, //切换页面显示
      map: '', //地图
      marker: '', //点标记
      markers: [[], [], [], [], [], [], [], [], []],
      cluster: [], //点聚合
      mapZoom: '', //缩放事件监听层级
      markerType: 'bridge',
      config_1: config[0], //基础设施数据
      config1: {
        number: [141109],
        content: '{nt}',
        toFixed: 2,
        // formatter: this.formatter,
        style: {
          fontSize: 35,
          fill: '#fff'
        }
      },
      config2: {
        number: [141109],
        content: '{nt}',
        toFixed: 2,
        // formatter: this.formatter,
        style: {
          fontSize: 35,
          fill: '#fff'
        }
      },
      config3: {
        number: [14457],
        content: '{nt}',
        toFixed: 2,
        // formatter: this.formatter,
        style: {
          fontSize: 35,
          fill: '#fff'
        }
      },
      config4: {
        number: [8005],
        content: '{nt}',
        toFixed: 2,
        // formatter: this.formatter,
        style: {
          fontSize: 35,
          fill: '#fff'
        }
      },
      config5: {
        number: [1361],
        content: '{nt}',
        toFixed: 2,
        // formatter: this.formatter,
        style: {
          fontSize: 35,
          fill: '#fff'
        }
      },
      AraryMapData: [],
      companyOptions: [{id: 1, name: '全部公司'}], //选择公司
      valueCompany: {value: 1, label: '全部公司'},
      valueRoad: {
        value: 1,
        label: '全部路段',
        companyId: 1,
        companyName: '全部公司',
        roadSegmentId: 1,
        roadSegmentName: '全部路段'
      },
      roadData: '',
      // valueRoad: '永泸高速', //路段名称
      value: '', //日期
      option5: option[11], //病害变化趋势
      option6: {
        title: {
          text: '养护任务完成情况统计',
          style: {
            fill: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            data: [
              {name: '建新公司', value: 93},
              {name: '双合公司', value: 32},
              {name: '遂渝公司', value: 65},
              {name: 'xx公司1', value: 44},
              {name: 'xx公司2', value: 52},
              {name: 'xx公司3', value: 53},
              {name: 'xx公司4', value: 58}
            ],
            radius: ['40%', '50%'],
            insideLabel: {
              show: true
            },
            label: {
              show: true,
              formatter: '{value}',
              style: {
                fill: '#fff'
              }
            }
          }
        ]
      },
      option7: {
        title: {
          text: '巡检任务完成情况',
          style: {
            fill: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            data: [
              {name: '建新公司', value: 103},
              {name: '双合公司', value: 72},
              {name: '遂渝公司', value: 45},
              {name: 'xx公司1', value: 34},
              {name: 'xx公司2', value: 52},
              {name: 'xx公司3', value: 73},
              {name: 'xx公司4', value: 58}
            ],
            radius: ['40%', '50%'],
            insideLabel: {
              show: true
            },
            label: {
              show: true,
              formatter: '{value}',
              style: {
                fill: '#fff'
              }
            }
          }
        ]
      },
      option8: option[9], //巡检填报
      option9: option[10], //巡检任务完成统计
      option11: option[13], //公司人员统计
      option12: option[14], //各路段养护费用统计
      option15: option[15], //巡检类统计
      // option16: option[16], //病害类型统计
      option17: option[17], //养护工单统计
      option18: option[18], //养护任务完成统计
      option19: option[19], //病害数量统计
      option20: option[20], //任务执行情况
      config6: config[5], //病害平均处理效率
      config7: config[6], //病害类型排行
      config9: config[8], //里程排行榜
      config10: config[9], //病害平均处理天数
      config11: config[10], //养护金额统计
      config16: {
        header: ['编号', '名称', '起点', '终点', '长度'],
        data: [],
        index: true,
        align: ['center', 'center', 'center', 'center', 'center', 'center'],
        // columnWidth: [50, 100, 100, 100, 100],
        columnWidth: [50],
        rowNum: 10,
        headerBGC: '#002e53',
        indexHeader: '序号'
      },
      bizValue: {
        //切换年月参数
        site: '1',
        two: '2',
        check: '3',
        four: '4'
      },
      // '/videoPlayer/videoPlayer.html',
      iframeUrl: window.context.front + '/h5Video/demo.html',
      // showVideo: false,
      showVideoModel: false,
      iframeWin: null,
      DataSite: [], //巡查巡检数组
      dailyData: [], //日常巡检数组
      mainData: [], //养护工单数组
      checkData: [], //定期/经常检查
      backIsShow: false, //返回按钮是否显示
      backIsShowDaily: false, //返回按钮是否显示
      backIsShowWork: false, //返回按钮是否显示
      G2chart: '', //chart实例
      G2chart5: '', //chart实例
      G2chart6: '', //chart实例
      querySite: {
        params: {}
      }, //巡查巡检个数统计请求参数
      queryRoadBasic: {
        params: {}
      },
      loadingBasic: false,
      BasicCompany: '', //基础选择公司,
      BizCompany: '', //业务选择公司,
      yongluLine: '',
      chenyusuiLine: '',
      tongrongLine: '',
      shimoLine: '',
      heanLine: '',
      xiusongLine: '',
      videoURL: ''
    }
  },
  created() {
    this.getSiteJson('site') //巡查巡检个数统计
    this.getSiteJson('daily')
    this.getWorkJson() //养护工单统计
    // this.getRoadBasic(this.BasicUrl) //基础概况基础设施
  },
  mounted() {
    setTimeout(() => {
      this.initMap()
      this.$http.post('${yhxt}' + this.urlMap, this.querysMap).then(res => {
        this.AraryMapData = res.data.rows
        this.pointAggregation()
      })
    }, 300)
    this.openMessage() //提示建议打开全屏模式
  },
  methods: {
    openMessage() {
      // this.$message('建议在全屏模式浏览!')
    },
    //基础设施-路段
    getRoadBasic(url) {
      this.$http.post('${yhxt}' + url, this.queryRoadBasic).then(res => {
        this.loadingBasic = true
        let arr = []
        let data = res.data.message
        let str1 = data.substr(1)
        let str2 = str1.substring(0, str1.length - 1)
        //console.log(str2.split('],['))
        str2.split('],[').forEach(item => {
          arr.push(item.split(','))
        })
        // console.log(arr, 'dddd')
        this.config16.data = arr
        this.config16 = {...this.config16}
      })
    },
    //获取任务执行情况
    getTaskImplementation() {
      this.$http
        .post(
          '${yhxt}/bizWorkStatistic/v1/countWorkOrder',
          this.queryChart.task
        )
        .then(res => {
          let data = res.data
          for (let i in data) {
            data[i] = Number(data[i])
          }
          this.option20.series[0].data = [
            data.backlogWorkOrder,
            data.constructionWorkOrder,
            data.debitWorkOrder,
            data.auditWorkOrder,
            data.finishWorkOrder,
            data.overdueWorkOrder
          ]
          this.option20 = {...this.option20}
        })
    },
    //养护车辆统计
    getMaintenanceStation() {
      this.$http
        .post('${yhxt}/baseDataStatistics/v1/countVehicle', this.queryMileage)
        .then(res => {
          // let arrName = []
          // let arrCount = []
          // console.log(res)
          // res.data.value.forEach(item => {
          //   arrName.push(item.roadSegmentName)
          //   arrCount.push(Number(item.countVehicle))
          // })
          // console.log(arrCount)
          // // arrCount=[0, 3, 0, 0, 3, 0, 0, 0]
          // // console.log(arrCount)
          // // console.log(this.option10)
          // this.option10.xAxis.data = arrName
          // // console.log(this.option10.xAxis)
          // this.option10.series[0].data = arrCount
          // // if (this.queryMileage.roadSegmentId) {
          // //   this.option10.series[0].type = 'bar'
          // // } else {
          // //   this.option10.series[0].type = 'line'
          // // }
          // this.option10 = {...this.option10}
        })
    },
    //获取病害平均处理天数
    getDiseaseAverDay(str) {
      this.$http
        .post(
          '${yhxt}/bizWorkStatistic/v1/countDayDisease',
          this.queryChart.diseaseDay
        )
        .then(res => {
          let data = []
          res.data.forEach(item => {
            data.push({
              name: item.roadName,
              value: Number(item.countDayAvg)
            })
          })
          if (str) {
            this.G2chart6.changeData(data)
          } else {
            this.initRowCharts(data)
          }
          // if (str) {
          //   this.G2chart5.changeData(data)
          // } else {
          //   this.initG2PieChart(data)
          // }
        })
    },
    //初始化横向条形图
    initRowCharts(data) {
      const chart = new Chart({
        container: 'G2-continar6',
        autoFit: true,
        height: 500,
        padding: [20, 20, 20, 80] // 上，右，下，左
      })
      chart.data(data)
      chart.scale({
        value: {
          min: 0,
          alias: '天数（天）'
        }
      })
      chart.axis('name', {
        // line: {
        //   style: {
        //     stroke: '#fff'
        //   }
        // },
        label: {
          style: {
            fill: '#fff'
          }
        },
        title: null,
        tickLine: null,
        line: null
      })
      chart.axis('value', {
        label: null,
        title: null
      })
      chart.legend(false)
      chart.coordinate().transpose()
      chart
        .interval()
        .position('name*value')
        .color('name')
        .size(26)
        .label('value', {
          style: {
            fill: '#fff'
          },
          offset: 10
        })
      chart.interaction('element-active')
      chart.render()
      this.G2chart6 = chart
    },
    //获取病害数量
    getDiseaseNumber() {
      this.$http
        .post(
          '${yhxt}/bizWorkStatistic/v1/countAmountDisease',
          this.queryChart.disease
        )
        .then(res => {
          this.option19.xAxis.data = []
          this.option19.series[0].data = []
          this.option19.series[1].data = []
          res.data.forEach(item => {
            this.option19.xAxis.data.push(item.roadName)
            this.option19.series[0].data.push(Number(item.countDisFinished))
            this.option19.series[1].data.push(Number(item.countDisUnFinished))
            this.option19 = {...this.option19}
          })
        })
    },
    //获取病害类型
    getDiseaseType(str) {
      this.$http
        .post(
          '${yhxt}/bizWorkStatistic/v1/countTypeDisease',
          this.queryChart.diseaseType
        )
        .then(res => {
          let data = []
          res.data.forEach(item => {
            data.push({
              name: item.subjectName,
              value: Number(item.countTypeDis)
            })
          })
          if (str) {
            this.G2chart5.changeData(data)
          } else {
            this.initG2PieChart(data)
          }
        })
    },
    //G2饼图初始化
    initG2PieChart(data) {
      const chart = new Chart({
        container: 'G2-continar5',
        autoFit: true,
        height: 500
        // padding: [50, 20, 50, 20] // 上，右，下，左
      })
      // 新建一个 view 用来单独渲染Annotation
      const innerView = chart.createView()
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.5
      })

      chart.data(data)

      chart.scale('value', {
        formatter: val => {
          // val = val * 100 + '%'
          return val
        }
      })

      chart.tooltip(false)

      // 声明需要进行自定义图例字段： 'name'
      chart.legend('name', {
        position: 'right', // 配置图例显示位置
        offsetX: -50,
        itemName: {
          style: {
            fill: '#fff'
          }
        },
        custom: true, // 关键字段，告诉 G2，要使用自定义的图例
        items: data.map((obj, index) => {
          return {
            name: obj.name, // 对应 itemName
            // value: obj.value, // 对应 itemValue
            marker: {
              symbol: 'square', // marker 的形状
              style: {
                r: 5, // marker 图形半径
                fill: chart.getTheme().colors10[index] // marker 颜色，使用默认颜色，同图形对应
              }
            } // marker 配置
          }
        }),
        itemValue: {
          style: {
            fill: '#fff'
          } // 配置 itemValue 样式
        }
      })

      chart
        .interval()
        .adjust('stack')
        .position('value')
        .color('name')
        .style({
          fillOpacity: 1
        })
        .state({
          active: {
            style: element => {
              const shape = element.shape
              return {
                lineWidth: 10,
                stroke: shape.attr('fill'),
                strokeOpacity: shape.attr('fillOpacity')
              }
            }
          }
        })

      // 移除图例点击过滤交互
      chart.removeInteraction('legend-filter')
      chart.interaction('element-active')
      chart.render()
      this.G2chart5 = chart
      // 监听 element 上状态的变化来动态更新 Annotation 信息
      chart.on('element:statechange', ev => {
        const {state, stateStatus, element} = ev.gEvent.originalEvent

        // 本示例只需要监听 active 的状态变化
        if (state === 'active') {
          const data = element.getData()
          if (stateStatus) {
            // 更新 Annotation
            updateAnnotation(data)
          } else {
            // 隐藏 Annotation
            clearAnnotation()
          }
        }
      })

      // 绘制 annotation
      let lastItem
      function updateAnnotation(data) {
        if (data.name !== lastItem) {
          innerView.annotation().clear(true)
          innerView
            .annotation()
            .text({
              position: ['50%', '50%'],
              content: data.name,
              style: {
                fontSize: 20,
                fill: '#fff',
                textAlign: 'center'
              },
              offsetY: -20
            })
            .text({
              position: ['50%', '50%'],
              content: data.value,
              style: {
                fontSize: 28,
                fill: '#fff',
                textAlign: 'center'
              },
              offsetX: -10,
              offsetY: 20
            })
            .text({
              position: ['50%', '50%'],
              content: '个',
              style: {
                fontSize: 20,
                fill: '#fff',
                textAlign: 'center'
              },
              offsetY: 20,
              offsetX: 20
            })
          innerView.render(true)
          lastItem = data.name
        }
      }

      // 清空 annotation
      function clearAnnotation() {
        innerView.annotation().clear(true)
        innerView.render(true)
        lastItem = null
      }
    },
    //养护工单
    getWorkJson(biz) {
      this.$http
        .post('${yhxt}/bizWorkStatistic/v1/getWorkJson', this.queryChart.work)
        .then(res => {
          let data = []
          res.data.forEach(item => {
            data.push({
              companyId: item.roadSegmentId,
              name: item.roadSegmentName,
              type: '完成',
              value: item.total
            })
            data.push({
              companyId: item.roadSegmentId,
              name: item.roadSegmentName,
              type: '未完成',
              value: item.totalNumsNo
            })
            // this.mainData = data
            // this.workChart.changeData(this.mainData)
          })
          this.mainData = data
          if (this.workChart) {
            this.workChart.changeData(this.mainData)
          }
        })
    },
    //业务概况顶部金额数据
    getBizTopData() {
      console.log(this.queryTopAmount, 'this.queryTopAmount')
      this.$http
        .post(
          '${yhxt}/bizWorkStatistic/v1/getYearBudgetJson',
          this.queryTopAmount
        )
        .then(res => {
          let data = res.data[0]
          if (res.data.length == 0) {
            data = {
              budgetSum: '0',
              alreadyCount: '0',
              conserveMoney: '0',
              specialMoney: '0',
              rushMoney: '0'
            }
          }
          this.config1.number = [JSON.parse(data.budgetSum)]
          this.config2.number = [JSON.parse(data.alreadyCount)]
          this.config3.number = [JSON.parse(data.conserveMoney)]
          this.config4.number = [JSON.parse(data.specialMoney)]
          this.config5.number = [JSON.parse(data.rushMoney)]
          this.config1 = {...this.config1}
          this.config2 = {...this.config2}
          this.config3 = {...this.config3}
          this.config4 = {...this.config4}
        })
    },
    //养护金额
    getMaintenanceAmount() {
      this.$http
        .post(
          '${yhxt}/bizWorkStatistic/v1/getMoneyJson',
          this.queryChart.amount
        )
        .then(res => {
          let data = []
          res.data.forEach(item => {
            let companyName = this.queryChart.work.params.companyId
              ? item.roadSegmentName
              : item.companyName
            let companyId = this.queryChart.work.params.companyId
              ? item.roadSegmentId
              : item.companyId
            data.push({
              id: item.companyId,
              name: item.roadSegmentName,
              value: item.totalMoney
            })
          })
          data.forEach(item => {
            item.value = (Number(item.value) / 10000).toFixed(3)
          })
          //数组对象排序
          data.sort(function(a, b) {
            if (a.id === b.id) {
              return b.value - a.value
            } else {
              return a.id - b.id
            }
          })
          this.config11.data = data
          this.config11 = {...this.config11}
        })
    },
    handleBack(str) {
      if (str == 'backIsShow') {
        this.G2chart.data(this.DataSite)
        this.G2chart.render()
        this.backIsShow = false
      } else if (str == 'backIsShowWork') {
        this.workChart.data(this.mainData)
        this.workChart.render()
        this.backIsShowWork = false
      } else if (str == 'backIsShowDaily') {
        this.dailyChart.data(this.dailyData)
        this.dailyChart.render()
        this.backIsShowDaily = false
      }
    },
    //获取巡查巡检完成与未完成的个数
    getSiteJson(type, biz) {
      this.$http
        .post('${yhxt}/bizWorkStatistic/v1/getSiteJson', this.queryChart[type])
        .then(res => {
          console.log(res)

          let data = []
          let dailyData = []
          res.data.forEach(item => {
            if (type == 'site') {
              data.push({
                companyId: item.roadSegmentId,
                name: item.roadSegmentName,
                type: '完成',
                value: item.completeTotal
              })
              data.push({
                companyId: item.roadSegmentId,
                name: item.roadSegmentName,
                type: '未完成',
                value: item.completeNoTotal
              })
            }
            if (type == 'daily') {
              //日常巡检
              dailyData.push({
                companyId: item.roadSegmentId,
                name: item.roadSegmentName,
                type: '日巡检已完成',
                value: item.dayCheckingFinish //日巡检
              })
              dailyData.push({
                companyId: item.roadSegmentId,
                name: item.roadSegmentName,
                type: '日巡检未完成',
                value: item.dayCheckingOnFinsh //日巡检
              })
              dailyData.push({
                companyId: item.roadSegmentId,
                name: item.roadSegmentName,
                type: '夜巡检已完成',
                value: item.nightCheckingFinish //夜巡检
              })
              dailyData.push({
                companyId: item.roadSegmentId,
                name: item.roadSegmentName,
                type: '夜巡检未完成',
                value: item.nightCheckingOnFinsh //夜巡检
              })
            }
          })
          if (type == 'site') {
            this.DataSite = data
          } else {
            this.dailyData = dailyData
          }
          if (type == 'daily' && this.dailyChart) {
            this.dailyChart.changeData(this.dailyData)
          }
          if (type == 'site' && this.G2chart) {
            this.G2chart.changeData(this.DataSite)
          }
        })
    },
    //获取定期/经常检查的个数
    initcheckChart(data) {
      this.checkChart = new Chart({
        container: 'G2-continar3',
        autoFit: true,
        height: 500,
        padding: [50, 20, 50, 50] // 上，右，下，左
      })

      this.checkChart.axis('siteName', {
        line: {
          style: {
            stroke: '#fff'
          }
        },
        label: {
          style: {
            fill: '#fff'
          }
        }
      })
      this.checkChart.axis('数量', {
        line: {
          style: {
            stroke: '#fff'
          }
        },
        label: {
          style: {
            fill: '#fff'
          }
        }
      })
      this.checkChart
        .interval()
        .position('siteName*数量')
        .color('siteName', '#348ee7')
        .label('数量', val => {
          if (val == 0) {
            return null
          }
          return {
            position: 'middle',
            offset: 0,
            content: originData => {
              return originData['数量']
            },
            style: {
              fill: '#fff'
            }
          }
        })
      this.checkChart.legend('siteName', false)
      this.checkChart.data(data)
      this.checkChart.scale('sales', {
        nice: true
      })

      this.checkChart.tooltip({
        showMarkers: false
      })
      this.checkChart.interaction('active-region')

      this.checkChart.render()
    },
    getCheckJson(init) {
      this.$http
        .post('${yhxt}/bizWorkStatistic/v1/getCheckJson', this.queryChart.check)
        .then(res => {
          let data = []
          res.data.forEach(item => {
            //简写名称
            let str = item.siteName
            if (str.indexOf('经常') != -1) {
              str = str.slice(0, 2) + str.slice(3, 4) + str.slice(4, 5)
            } else {
              str = str.slice(0, 2) + str.slice(2, 3) + str.slice(4, 5)
            }
            data.push({
              siteName: str,
              数量: item.siteCodeTotal
            })
          })
          this.checkData = data
          if (init) {
            this.initcheckChart(data)
          } else if (this.checkChart) {
            this.checkChart.changeData(data)
            // if (init) {
            //   this.initcheckChart(data)
            // } else {
            //   console.log(this.checkChart, 'this.checkChart')
            //   this.checkChart.changeData(data)
          }
        })
    },
    //antV数据可视化相关函数
    initColumn(idDom, data, type) {
      const chart = new Chart({
        container: idDom,
        autoFit: true, //宽高自适应
        height: 500,
        padding: [50, 20, 50, 50]
      })

      chart.data(data)
      chart.scale('value', {
        alias: '数量(个)'
      })
      chart.axis('name', {
        line: {
          style: {
            stroke: '#fff'
          }
        },
        label: {
          style: {
            fill: '#fff'
          }
        }
      })
      chart.axis('value', {
        line: {
          style: {
            stroke: '#fff'
          }
        },
        label: {
          style: {
            fill: '#fff'
          }
        }
      })

      chart.tooltip({
        shared: true,
        showMarkers: false
      })

      chart.legend('type', false)

      chart.interaction('active-region')

      chart
        .interval()
        .adjust('stack')
        .position('name*value')
        .color('type', ['#348ee7', '#e5645b'])
        .label('value', val => {
          if (val == 0) {
            return null
          }
          return {
            position: 'middle',
            offset: 0,
            content: originData => {
              return originData.value
            },
            style: {
              fill: '#fff'
            }
          }
        })

      chart.on('click', e => {
        let url
        if (e.data.data.companyId && this.isNext) {
          if (type == 'work') {
            this.backIsShowWork = true
            url = '/bizWorkStatistic/v1/getWorkJson'
          } else {
            this.backIsShow = true
            url = '/bizWorkStatistic/v1/getSiteJson'
          }
          this.querySite.params.companyId = e.data.data.companyId
          this.$http.post('${yhxt}' + url, this.querySite).then(res => {
            const newData = []
            res.data.forEach(item => {
              if (type == 'work') {
                newData.push({
                  name: item.roadSegmentName,
                  type: '完成',
                  value: item.total
                })
                newData.push({
                  name: item.roadSegmentName,
                  type: '未完成',
                  value: item.totalNumsNo
                })
              } else {
                newData.push({
                  name: item.roadSegmentName,
                  type: '完成',
                  value: item.completeTotal
                })
                newData.push({
                  name: item.roadSegmentName,
                  type: '未完成',
                  value: item.completeNoTotal
                })
              }
            })
            chart.data(newData)
            chart.render() // 更新图表
          })
        }
      })

      chart.render()
      if (type == 'work') {
        this.workChart = chart
      } else {
        this.G2chart = chart
      }
    },
    //日常巡检
    getDailyData(idDom, data) {
      this.dailyChart = new Chart({
        container: idDom,
        autoFit: true, //宽高自适应
        height: 500,
        padding: [50, 20, 50, 50]
      })

      this.dailyChart.data(data)
      this.dailyChart.scale('value', {
        alias: '数量(个)'
      })
      this.dailyChart.axis('name', {
        line: {
          style: {
            stroke: '#fff'
          }
        },
        label: {
          style: {
            fill: '#fff'
          }
        }
      })
      this.dailyChart.axis('value', {
        line: {
          style: {
            stroke: '#fff'
          }
        },
        label: {
          style: {
            fill: '#fff'
          }
        }
      })

      this.dailyChart.tooltip({
        shared: true,
        showMarkers: false
      })

      this.dailyChart.legend('type', false)

      this.dailyChart.interaction('active-region')

      this.dailyChart
        .interval()
        .adjust('dodge')
        .position('name*value')
        .color('type', ['#348ee7', '#e5645b'])
        .label('value', val => {
          if (val == 0) {
            return null
          }
          return {
            position: 'middle',
            offset: 0,
            content: originData => {
              return originData.value
            },
            style: {
              fill: '#fff'
            }
          }
        })

      this.dailyChart.on('click', e => {
        if (e.data.data.companyId && this.isNext) {
          this.backIsShowDaily = true
          this.querySite.params.companyId = e.data.data.companyId
          this.$http
            .post('${yhxt}/bizWorkStatistic/v1/getSiteJson', this.querySite)
            .then(res => {
              const newData = []
              res.data.forEach(item => {
                //日常巡检
                newData.push({
                  roadSegmentId: item.roadSegmentId,
                  name: item.roadSegmentName,
                  type: '日巡检已完成',
                  value: item.dayCheckingFinish //日巡检
                })
                newData.push({
                  roadSegmentId: item.roadSegmentId,
                  name: item.roadSegmentName,
                  type: '日巡检未完成',
                  value: item.dayCheckingOnFinsh //日巡检
                })
                newData.push({
                  roadSegmentId: item.roadSegmentId,
                  name: item.roadSegmentName,
                  type: '夜巡检已完成',
                  value: item.nightCheckingFinish //夜巡检
                })
                newData.push({
                  roadSegmentId: item.roadSegmentId,
                  name: item.roadSegmentName,
                  type: '夜巡检未完成',
                  value: item.nightCheckingOnFinsh //夜巡检
                })
              })
              this.dailyChart.data(newData)
              this.dailyChart.render() // 更新图表
            })
        }
      })

      this.dailyChart.render()
    },

    //监听切换年月事件
    BizChange(model, yearMonth, type) {
      if (type == 2) {
        this.queryChart[model].params.accDateMonth = ''
        this.queryChart[model].params.accDateYear = yearMonth
      } else {
        this.queryChart[model].params.accDateYear = ''
        this.queryChart[model].params.accDateMonth = yearMonth
      }
      if (model == 'check') {
        this.getCheckJson()
      } else if (model == 'site' || model == 'daily') {
        this.getSiteJson(model)
      } else if (model == 'work') {
        this.getWorkJson()
      } else if (model == 'amount') {
        //养护金额
        this.getMaintenanceAmount()
      } else if (model == 'disease') {
        this.getDiseaseNumber()
      } else if (model == 'diseaseType') {
        this.getDiseaseType('change')
      } else if (model == 'diseaseDay') {
        this.getDiseaseAverDay('change')
      } else if (model == 'task') {
        this.getTaskImplementation()
      }
    },
    getYear() {
      var dd = new Date()
      var year = dd.getFullYear() + Number(0)
      return year
    },
    //数字翻牌器DataV
    formatter(number) {
      const numbers = number
        .toString()
        .split('')
        .reverse()
      const segs = []

      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

      return segs
        .join(',')
        .split('')
        .reverse()
        .join('')
    },
    handleClick(tab, event) {
      this.valueRoad = {
        value: 1,
        label: '全部路段',
        companyId: 1,
        companyName: '全部公司',
        roadSegmentId: 1,
        roadSegmentName: '全部路段'
      }
      if (tab.name == 'second') {
        this.showVideoModel = false
        this.isShow = false
        this.config1.number = [0]
        this.config2.number = [0]
        this.config3.number = [0]
        this.config4.number = [0]
        this.config5.number = [0]
        /**  antV相关初始化函数 */
        this.queryChart.amount = {
          params: {
            accDateMonth: '',
            accDateYear: this.getYear()
          }
        } //养护金额
        this.queryChart.check = {
          params: {
            accDateMonth: '',
            accDateYear: this.getYear()
          }
        }
        this.queryChart.daily = {
          params: {
            accDateMonth: '',
            accDateYear: this.getYear()
          }
        }
        this.queryChart.work = {
          params: {
            accDateMonth: '',
            accDateYear: this.getYear()
          }
        }
        this.queryChart.site = {
          params: {
            accDateMonth: '',
            accDateYear: this.getYear()
          }
        }
        this.queryTopAmount.params = {
          accDateMonth: '',
          accDateYear: this.getYear()
        } //顶部数据
        this.getSiteJson('site') //巡查巡检个数统计
        this.getSiteJson('daily')
        this.getWorkJson() //养护工单
        this.getDiseaseNumber() //病害数量
        this.getDiseaseType() //病害类型个数
        this.getDiseaseAverDay() //病害平均处理天数
        this.getTaskImplementation() //任务执行情况
        setTimeout(() => {
          this.initColumn('G2-continar1', this.DataSite) //巡查巡检个数
          this.getDailyData('G2-continar2', this.dailyData) //日常巡检个数
          this.getCheckJson('init') //定期/经常检查的个数
          this.getMaintenanceAmount() //养护金额
          this.initColumn('G2-continar4', this.mainData, 'work') //养护工单
          this.getBizTopData() //业务概况顶部部数据
        }, 300)
        // this.$nextTick(() => {

        // })
      } else if (tab.name == 'three') {
        this.handleWorkpaceClick()
      } else {
        // this.markers = []
        setTimeout(() => {
          this.initMap()
          this.$http.post('${yhxt}' + this.urlMap, this.querysMap).then(res => {
            this.AraryMapData = res.data.rows
            this.markers = [[], [], [], [], [], [], [], [], [], []]
            this.pointAggregation()
          })
        }, 300)
        this.isShow = true
        this.query = {} //清空请求参数
        this.BasicUrl =
          '/bizRoadsideFacilities/bizRoadsideFacilitiesManager/v1/getJson' //初始化基础设施路段信息请求参数
        this.queryRoadBasic = {
          params: {}
        }
        // console.log(res)
        // this.queryMileage = {
        //   roadSegmentId: Data.roadSegmentId,
        // } //里程排行榜
        this.getAllStructureCount() //各个公司结构数量
        this.getMileageData() //获取里程排行榜
        // this.getRoadBasic(this.BasicUrl)
      }
    },

    destroy() {
      if (this.markers) {
        // this.markers = []
      }
      this.map.clearInfoWindow()
      // this.map.clearMap()
      //   清除地图上所有聚合
      if (this.cluster.length != '0') {
        this.cluster.clearMarkers()
      }
    },
    locationMark(x, y, name) {
      let icon
      if (this.markerType == 'culvert') {
        icon = new AMap.Icon({
          size: new AMap.Size(48, 48),
          image: require('../../../assets/img/hanong.png')
        })
      } else if ((this.markerType = 'bridge')) {
        icon = new AMap.Icon({
          size: new AMap.Size(48, 48),
          image: require('../../../assets/img/qiaoliang.png')
        })
      } else if ((this.markerType = 'tunnel')) {
        icon = new AMap.Icon({
          size: new AMap.Size(48, 48),
          image: require('../../../assets/img/suidao.png')
        })
      } else if ((this.markerType = 'sideSlope')) {
        icon = new AMap.Icon({
          size: new AMap.Size(48, 48),
          image: require('../../../assets/img/bianpo.png')
        })
      }

      // 创建一个 Marker 实例：
      this.marker = new AMap.Marker({
        map: this.map,
        position: [x, y], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        offset: new AMap.Pixel(-13, -30),
        title: name,
        icon: icon
      })
      // 将创建的点标记添加到已有的地图实例：
      this.map.add(this.marker)
      //定位导标记点
      //   this.map.setFitView()
    },
    getData() {
      let date = new Date()
      this.value = utils.formatDate(date, 'yearMonth')
    },
    handleScreenFull(type) {
      if (!screenfull.isEnabled) {
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(document.getElementsByTagName('body')[0])
      this.isScreenFull = !this.isScreenFull
      if (!this.isScreenFull) {
        this.reload()
      }
    },
    //进入工作台
    handleWorkpaceClick() {
      this.$store.dispatch('menu/actionFrontMenus').then(res => {
        this.$router.push({
          path: `/frontPlat/${res[0].alias}`
        })
      })
    },

    //获取公司信息
    getCompany() {
      basicData.getCompanyInfo_1('1419863231459102720').then(res => {
        res.forEach(item => {
          this.companyOptions.push({
            id: item.id,
            name: item.name
          })
        })
      })
      // this.$http.post('${yhxt}/Company/v1/getCompany').then(res => {
      //   res.data.forEach(item => {
      //     this.companyOptions.push({
      //       id: item.id,
      //       name: item.name
      //     })
      //   })
      // })
    },
    getroad() {
      let arr = [
        {
          id: 1,
          name: '全部路段',
          companyId: 1,
          companyName: '全部公司',
          roadSegmentId: 1
        }
      ]
      basicData.getRoadManagement().then(res => {
        res.rows.forEach(item => {
          arr.push({
            name: item.name,
            id: item.id,
            companyId: item.companyId,
            companyName: item.companyName,
            roadSegmentId: item.id,
            roadSegmentName: item.name
          })
        })
        // console.log(arr, '12')
      })
      return arr
    },
    //获取各个结构数量
    getAllStructureCount() {
      this.$http
        .post('${yhxt}/baseDataStatistics/v1/getAllStructureCount', this.query)
        .then(res => {
          console.log(res, '所有结构物，ddddddddd')
          this.loadingBasic = true
          let data = res.data
          //桥梁
          this.getCount(data.bridge[0], '0')
          //涵洞
          this.getCount(data.culvert[0], '2')
          //隧道
          this.getCount(data.tunnel[0], '1')
          //路段
          // this.getStructure(data.roadSection[0].roadSection, '0')
          //服务区
          this.getStructure(
            data.roadsideFacilitiesServiceArea[0].roadsideFacilitiesCount,
            '',
            '',
            '0'
          )
          //收费站
          this.getStructure(
            data.roadsideFacilitiesTollStation[0].roadsideFacilitiesCount,
            '',
            '',
            '1'
          )
          //边坡
          this.getStructure(
            data.sideSlop[0].sideSlopCount,
            data.sideSlop[0].highVoltageFalse,
            data.sideSlop[0].highVoltageTrue,
            '2'
          )
        })
    },
    //获取涵洞桥梁等数量
    getCount(data, key) {
      // let Data = []
      // data.forEach(item => {
      //   Data.push({
      //     name: item.TYPE_VALUE_,
      //     count: item.typeCount
      //   })
      // })
      this.basicData_2.forEach((item, index) => {
        if (key == index) {
          item.data[0].count = data.type1
          item.data[1].count = data.type2
          item.data[2].count = data.type3
          item.data[3].count = data.type4
          if (key == '2') {
            item.data[4].count = data.type5
          }
        }
      })
    },
    //获取路段等数量
    getStructure(count, count1, count2, key) {
      this.basicData_1.forEach((item, index) => {
        if (key == index) {
          item.count = count
          if (key == 2) {
            item.hightCount = count2
            item.notHigthcount = count1
          }
        }
      })
    },
    //获取各个公司路段数据
    getRoadData() {
      this.type = '1'
      this.$http
        .post('${yhxt}/road/roadmanage/v1/getJson', this.queryBasic)
        .then(res => {
          // this.BasicData = res.data.rows
          // this.config_1 = {...this.config_1}
          // let xAxis = []
          // let series = []
          // let data = res.data.roadSection
          // data.forEach(item => {
          //   xAxis.push(item.companyName)
          //   series.push(item.roadSection)
          // })
          // this.option1.xAxis.data = xAxis
          // this.option1.series[0].data = series
          // this.option1 = {...this.option1}
        })
    },
    //获取各个公司沿线设施数据
    getRoadsideData() {
      this.$http
        .post('${yhxt}/baseDataStatistics/v1/getRoadsideFacilitiesCompany')
        .then(res => {
          let xAxis = []
          let series = []
          let data = res.data.roadsideFacilities
          data.forEach(item => {
            xAxis.push(item.companyName)
            series.push(item.roadsideFacilitiesCount)
          })
          this.option_2.xAxis.data = xAxis
          this.option_2.series[0].data = series
          this.option1 = {...this.option_2}
        })
    },
    //获取各个公司边坡数据
    getSideSlopeData() {
      this.$http
        .post('${yhxt}/baseDataStatistics/v1/getSideSlopCompany')
        .then(res => {
          let xAxis = []
          let series = [[], []]
          let data = res.data.sideSlop
          data.forEach(item => {
            xAxis.push(item.companyName)
            series[0].push(item.highVoltageTrue)
            series[1].push(item.highVoltageFalse)
          })
          this.option1_2 = {...option[3]}
          this.option_3.xAxis.data = xAxis
          this.option_3.series[0].data = series[0]
          this.option_3.series[1].data = series[1]
          this.option1_2 = {...this.option_3}
        })
    },
    //获取桥梁数据
    getBridgeData() {
      this.$http
        .post('${yhxt}/baseDataStatistics/v1/getBridgeCompany')
        .then(res => {
          let xAxis = []
          let series = [[], [], [], []]
          let data = res.data.bridge
          data.forEach(item => {
            xAxis.push(item.companyName)
            series[0].push(item.type1)
            series[1].push(item.type2)
            series[2].push(item.type3)
            series[3].push(item.type4)
          })
          // this.option1_2 = {...option[3]}
          this.option_4.xAxis.data = xAxis
          this.option_4.series[0].data = series[0]
          this.option_4.series[1].data = series[1]
          this.option_4.series[2].data = series[2]
          this.option_4.series[3].data = series[3]
          this.option1_2 = {...this.option_4}
        })
    },
    //获取隧道数据
    getTunnelData() {
      this.$http
        .post('${yhxt}/baseDataStatistics/v1/getTunnelCompany')
        .then(res => {
          let xAxis = []
          let series = [[], [], [], []]
          let data = res.data.tunnel
          data.forEach(item => {
            xAxis.push(item.companyName)
            series[0].push(item.type1)
            series[1].push(item.type2)
            series[2].push(item.type3)
            series[3].push(item.type4)
          })
          // this.option1_2 = {...option[3]}
          this.option_5.xAxis.data = xAxis
          this.option_5.series[0].data = series[0]
          this.option_5.series[1].data = series[1]
          this.option_5.series[2].data = series[2]
          this.option_5.series[3].data = series[3]
          this.option1_2 = {...this.option_5}
        })
    },
    //获取涵洞数据
    getCulvertData() {
      this.$http
        .post('${yhxt}/baseDataStatistics/v1/getCulvertCompany')
        .then(res => {
          let xAxis = []
          let series = [[], [], [], [], []]
          let data = res.data.culvert
          data.forEach(item => {
            xAxis.push(item.companyName)
            series[0].push(item.type1)
            series[1].push(item.type2)
            series[2].push(item.type3)
            series[3].push(item.type4)
            series[4].push(item.type5)
          })
          // this.option1_2 = {...option[3]}
          this.option_6.xAxis.data = xAxis
          this.option_6.series[0].data = series[0]
          this.option_6.series[1].data = series[1]
          this.option_6.series[2].data = series[2]
          this.option_6.series[3].data = series[3]
          this.option_6.series[4].data = series[4]
          this.option1_2 = {...this.option_6}
        })
    },
    //桥梁类别统计数据
    getBridgeCategoryData() {
      this.$http
        .post('${yhxt}/baseDataStatistics/v1/getBridgeStatistics', this.query)
        .then(res => {
          let data = res.data.category
          let series = []
          data.forEach(item => {
            series.push({
              name: item.categoryValue,
              value: item.categoryCount
            })
          })
          this.option2.series[0].data = series
          this.option2 = {...this.option2}
        })
    },
    //隧道等级统计
    getTunnelGradeData() {
      this.$http
        .post('${yhxt}/baseDataStatistics/v1/getTunnelStatistics', this.qurery)
        .then(res => {
          let data = res.data.tunnelGrade
          let series = []
          data.forEach(item => {
            series.push({
              name: item.gradeValue,
              value: item.gradeTotal
            })
          })
          this.option3.series[0].data = series
          this.option3 = {...this.option3}
        })
    },
    //路段下拉点击事件
    // handleChangeRoad(data) {
    //   this.query.roadSegmentId = data
    //   this.getBridgeCategoryData() //桥梁类别统计数据
    //   // this.getTunnelGradeData() //隧道等级统计数据
    //   this.getAllStructureCount() //各个公司结构数量
    //   // console.log(this.query, 'dddddddddddddd')
    // },
    //路段下拉事件
    handleChangeRoadSelect(Data) {
      this.loadingBasic = false
      if (Data.roadSegmentId == 1) {
        this.queryMileage = {
          companyId: '',
          ompanyName: '',
          roadSegmentId: ''
        }
        this.queryRoadBasic.params = {}
        this.BasicUrl =
          '/bizRoadsideFacilities/bizRoadsideFacilitiesManager/v1/getJson'
      } else {
        this.queryMileage = {
          companyId: Data.companyId,
          companyName: Data.companyName,
          roadSegmentId: Data.roadSegmentId
        }
        this.queryRoadBasic.params.roadSegmentId = Data.roadSegmentId
      }
      let data = Data.value

      if (this.isShow) {
        // 基础概况
        // this.BasicCompany = {
        //   value: Data.companyId,
        //   label: Data.companyName
        // } //暂存
        // this.getRoadBasic(this.BasicUrl)
        this.$nextTick(() => {
          this.getMileageData() // 获取里程排行
          // this.getMaintenanceStation() //养护车辆统计
        })

        if (data == 1) {
          this.query = {}
          this.querysMap.querys[1].value = ''
        } else {
          this.query.roadSegmentId = Data.roadSegmentId
          this.querysMap.querys[1].value = Data.roadSegmentId
        }
        this.getBridgeCategoryData() //桥梁类别统计数据
        this.getAllStructureCount() //各个公司结构数量
        this.handleModular(this.listData[0])
        //根据路段id判断用户点击的具体路段
        if (this.roadLineArr.length !== 0) {
          this.roadLineArr.forEach(item => {
            if (data === item.id) {
              this.setFitView(item.line)
            } else if (data === 1) {
              this.map.setZoomAndCenter(7, this.mapCenter) //同时设置地图层级与中心点
            }
          })
        }
        this.$refs.htTable.load()
      } else {
        //业务概况
        if (data == '1') {
          this.isNext = true
          this.getCheckJson()
          this.getWorkJson()
          this.getDiseaseNumber()
          this.getTaskImplementation()
          this.getDiseaseAverDay('change')
          this.getDiseaseType('change')
          this.getSiteJson('site')
          this.getSiteJson('daily')
        } else {
          this.isNext = false
          this.getCheckJson()
          this.getWorkJson('biz')
          this.getSiteJson('site', 'biz')
          this.getSiteJson('daily', 'biz')
        }
        this.BizCompany = {
          value: Data.companyId,
          label: Data.companyName
        } //暂存
        let model = ['site', 'daily', 'check', 'work', 'amount']
        model.forEach(item => {
          this.queryChart[item].params.roadSegmentId = data == 1 ? '' : data
        })
        this.queryChart['disease'].params.roadSegmentId = data == 1 ? '' : data
        this.queryChart['diseaseType'].params.roadSegmentId =
          data == 1 ? '' : data
        this.getMaintenanceAmount() //养护金额
        this.getDiseaseNumber() //病害数量
        this.getDiseaseType('change') //病害类型
        this.getDiseaseAverDay() //病害平均处理天数
        this.getTaskImplementation() //任务执行情况
        this.queryTopAmount.params = {
          roadSegmentId: Data.companyId == 1 ? '' : Data.roadSegmentId,
          roadSegmentName:
            Data.companyName == '全部公司' ? '' : Data.roadSegmentName
        }
        this.getBizTopData() //业务概况顶部数据
      }
    },
    //地图上切换数据事件
    handleMapClick(tab) {
      // this.initRoadLine()
      this.map.destroy()
      let name = tab.name
      if (name == '桥梁') {
        this.clickIndex = 0
        this.markerType = 'bridge'
        this.urlMap = '/bizBridgeInformation/v1/getJson'
        this.getBridgeMapData() //获取桥梁地图数据
      } else if (name == '隧道') {
        this.clickIndex = 1
        this.markerType = 'tunnel'
        this.urlMap = '/bizTunnelInformation/v1/getJson'
        this.getBridgeMapData() //获取桥梁地图数据
      } else if (name == '边坡') {
        this.clickIndex = 2
        this.markerType = 'sideSlope'
        this.urlMap = '/bizSideSlopeInformation/v1/getJson'
        this.getBridgeMapData() //获取桥梁地图数据
      } else if (name == '涵洞') {
        this.clickIndex = 3
        this.markerType = 'culvert'
        this.urlMap =
          '/bizCulvertInformation/bizCulvertInformationmanager/v1/getList'
        this.getBridgeMapData() //获取桥梁地图数据
      } else if (name == '沿线设施') {
        this.clickIndex = 4
        this.markerType = 'roadSide'
        this.urlMap =
          '/bizRoadsideFacilities/bizRoadsideFacilitiesManager/v1/getList'
        this.getBridgeMapData() //获取桥梁地图数据
      }
    },
    //轮播地图数据
    move() {
      this.time = setInterval(this.handleMove, 3000)
    },
    handleMove() {
      this.clickIndex += 1
      if (this.clickIndex == 5) {
        this.clickIndex = 0
      }
      this.activeNameMap = this.listData[this.clickIndex].name
      this.handleMapClick({name: this.listData[this.clickIndex].name})
    },
    //获取桥梁地图数据
    getBridgeMapData(index) {
      this.$http.post('${yhxt}' + this.urlMap, this.querysMap).then(res => {
        this.AraryMapData = res.data.rows
        // this.map.setZoomAndCenter(8, this.mapCenter) //同时设置地图层级与中心点
        // this.pointAggregation()
        //清除地图之前的图层
        this.changeIcon()
        this.cluster.addMarkers(this.markers[index])
        this.setInfoWindow()
      })
    },
    //操作模块事件
    handleModular(data) {
      console.log(data, '点击')
      let index = data.key
      this.modularIndex = index
      let active = data.isActive
      this.listData[index].isActive = !active
      this.querysMap.querys = [
        {
          group: 'advance',
          operation: 'LIKE',
          property: 'road_segment_name_',
          relation: 'AND',
          value: '' //永泸高速
        },
        {
          group: 'advance',
          operation: 'LIKE',
          property: 'road_segment_id_',
          relation: 'AND',
          value: ''
        }
      ]
      // this.markers = []
      if (this.infoWindow) {
        this.infoWindow.close()
      }
      if (active) {
        this.cluster.removeMarkers(this.markers[index])
        this.markers[index] = []
      }
      this.showVideoModel = false
      console.log(index, 'key')
      if (index == 0 && !active) {
        this.markerType = 'bridge'
        this.urlMap = '/bizBridgeInformation/v1/getList'
        this.getBridgeMapData(index)
      } else if (index == 1 && !active) {
        this.markerType = 'tunnel'
        this.urlMap = '/bizTunnelInformation/v1/getJson'
        this.getBridgeMapData(index)
      } else if (index == 2 && !active) {
        this.markerType = 'culvert'
        this.urlMap =
          '/bizCulvertInformation/bizCulvertInformationmanager/v1/getList'
        this.getBridgeMapData(index)
      } else if (index == 3 && !active) {
        this.markerType = 'tollgate'
        this.urlMap =
          '/bizRoadsideFacilities/bizRoadsideFacilitiesManager/v1/getList'
        console.log(this.querysMap, 'map')
        this.querysMap.querys.push({
          group: 'advance',
          operation: 'LIKE',
          property: 'type',
          relation: 'AND',
          value: '3' //永泸高速
        })
        this.getBridgeMapData(index)
      } else if (index == 4 && !active) {
        this.markerType = 'sever'
        this.urlMap =
          '/bizRoadsideFacilities/bizRoadsideFacilitiesManager/v1/getList'
        this.querysMap.querys.push({
          group: 'advance',
          operation: 'LIKE',
          property: 'type',
          relation: 'AND',
          value: '4' //永泸高速
        })
        this.getBridgeMapData(index)
        // lj——监控视频
      } else if (index == 5 && !active) {
        this.markerType = 'car'
        this.AraryMapData = [
          {
            lng: '105.800554',
            lat: '29.256452',
            carNumber: '渝A9756D',
            carType: '-',
            carDriverName: '-',
            companyName: '-',
            carColour: '白色',
            createTime: '-',
            buyDate: '2020-07-15'
          }
        ]
        this.changeIcon()
        this.cluster.addMarkers(this.markers[index])
        this.setInfoWindow()
        // this.pointAggregation()
        // this.showVideo = true
      } else if (index == 6 && !active) {
        this.markerType = 'gongqu'
        this.AraryMapData = [
          {
            lng: '105.800554',
            lat: '30.256452',
            name: '养护工区',
            roadSegmentName: ''
          }
        ]
        this.changeIcon()
        this.cluster.addMarkers(this.markers[index])
        this.setInfoWindow()
      } else if (index == 7 && !active) {
        this.markerType = 'jiuyuan'
        this.AraryMapData = [
          {
            lng: '106.800554',
            lat: '29.256452',
            name: '救援点',
            roadSegmentName: ''
          }
        ]
        this.changeIcon()
        this.cluster.addMarkers(this.markers[index])
        this.setInfoWindow()
      } else if (index == 8 && !active) {
        this.markerType = 'yinji'
        this.AraryMapData = [
          {
            lng: '105.801554',
            lat: '29.256452',
            name: '应急物资库',
            roadSegmentName: ''
          }
        ]
        this.changeIcon()
        this.cluster.addMarkers(this.markers[index])
        this.setInfoWindow()
      }
      // lj——监控视频
    },
    //基础设施弹层显示详情回调事件
    handleDetiles(row) {
      console.log(row)
      this.dialogTitle = row.name ? row.name : row.number
      // this.dialogVisible = true
    },
    handleClose(done) {
      done()
    }
  }
}
</script>
<style lang="scss" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.logout {
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  color: #fff;
  display: flex;
  align-content: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  .logout-username {
    font-size: 16px;
  }
  .svg-icon-logout {
    margin-left: 5px;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
  }
  &:hover {
    color: #08b5fa;
    cursor: pointer;
  }
}
//去掉地图上起止点图标
/deep/.amap-lib-marker-to {
  background: none !important;
}
/deep/ .amap-lib-marker-from {
  background: none !important;
}
/deep/ .amap-info-close {
  right: 5px !important;
}
/deep/ .amap-info-contentContainer .amap-info-outer {
  background: #002352;
}
// httable
/deep/ .ht-quick__search[data-v-201fbfd4] {
  margin-bottom: 0 !important;
}
/deep/ .el-pagination--small span:not([class*='suffix']),
.el-pagination--small button {
  color: #fff;
}
/deep/ .el-pagination button:disabled {
  background-color: #002542;
}
/deep/ .el-pager .number {
  background-color: #002542 !important;
}
/deep/ .el-pagination {
  margin-right: 10px;
}
/deep/ [data-v-201fbfd4] .el-table thead tr,
[data-v-201fbfd4] .el-table thead tr th .is-center {
  background-color: #0676af !important;
}
/deep/ [data-v-201fbfd4] .el-table th > .cell {
  color: #0676af !important;
}
/deep/ .ht-table[data-v-201fbfd4] {
  background-color: #002352 !important;
  max-height: 610px;
  height: 610px;
}
/deep/.ht-table-panel {
  height: calc(100% - 40px) !important;
}
/deep/ .el-table tr {
  background-color: #0a2732 !important;
  &:nth-child(odd):hover td > .cell {
    // color: #000 !important;
  }
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #003b52 !important;
}
/deep/ [data-v-201fbfd4] .el-table td > .cell {
  color: #fff !important;
}
/deep/ .el-pagination {
  color: #fff !important;
}
/deep/ .el-pager li {
  background: #002352 !important;
}
/deep/ .el-pagination--small .more::before,
.el-pagination--small li.more::before {
  color: #fff;
}
/deep/ .el-pagination .btn-next {
  background-color: #002352;
}
/deep/ .el-pagination .btn-prev .el-icon,
.el-pagination .btn-next .el-icon {
  color: #a1bfcc;
}
/deep/ .el-table--scrollable-y .el-table__body-wrapper {
  height: 90%;
  /*滚动条样式*/
  &::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #0676af;
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: #033447;
  }
}
/deep/ .el-tabs__item.is-active {
  color: #409eff !important;
  background-color: #00203a;
}
/deep/ .dv-border-box-10 .border-box-content {
  background: #00223d;
}
/deep/ .el-table td.is-center {
  border: none;
}
.top-link-icon {
  font-size: 18px !important;
}
body {
  margin: 0;
}
.main {
  width: 100vw;
  height: 100vh;
  transform-origin: 0 0;
  position: absolute;
  transition: 0.3s;
  overflow-y: auto;
  background-color: #000;
  .main-header {
    width: 100%;
    height: 50px;
    background-color: #002e53;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .z_index {
      z-index: 99999;
    }
    .main-header-left {
      flex: 1;
      display: flex;
      align-items: center;
      .logo {
        width: 178px;
        height: 40px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('./images/whitelogo.png');
        border-radius: 0px;
        cursor: pointer;
        margin: 0 30px;
      }
    }
    .main-header-center {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .main-header-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      margin-right: 30px;
      align-items: center;
      .left {
        height: 30px;
        // background-color: #00203a;
      }
      .workpace {
        margin-left: 20px;
        i {
          cursor: pointer;
          color: #fff;
          font-size: 18px;
        }
      }
      .right {
        margin-left: 20px;
        .navigator-btnI {
          cursor: pointer;
          margin-right: 20px;
          i {
            color: #e1e4ec;
            cursor: pointer;
          }
        }
      }
    }
  }
  .active {
    background-color: rgba(6, 118, 175, 0.5) !important;
  }
  .continer {
    display: flex;
    height: calc(100% - 60px);
    margin: 5px 10px;
    .continer-left {
      flex: 1;
      // min-width: 500px;
      // width: 40rem;
      // width: 600px;
      margin-right: 5px;
      .box-10 {
        background-color: #003255;
        height: 255px;
        .box-8 {
          // width: 99%;
          // height: calc(100% - 3.75rem);
          // margin: 0.5%;
          display: flex;
          // align-items: center;
          justify-content: center;
          flex-direction: column;
          /deep/ .dv-border-box-8 .dv-border-svg-container {
            display: none;
          }
          .box-8-top {
            // height: 40%;
            flex: 0.4;
            display: flex;
            justify-content: space-around;
            // align-items: center;
            .box-8-item {
              // width: 33.33%;
              flex: 1;
              // height: 100%;
              cursor: pointer;
              border: 1px solid #0785c4;
              box-sizing: border-box;
              display: flex;
              justify-content: center;
              align-items: center;
              &:nth-child(2) {
                border-left: 0;
                border-right: 0;
              }
              &:hover {
                background-color: #0676af !important;
                z-index: 999;
              }
              &:nth-child(1) {
                .box-8-top-bgc {
                  display: flex;
                  align-items: center;
                  flex-wrap: wrap;
                  // border: 1px solid #0785c4;
                  // border-left: none;../../../assets/img/路段_.png
                  background: url('../../../assets/img/沿线设施_.png') no-repeat
                    center !important;
                  background-size: 70px 80px;
                  margin: 15px 0;
                }
              }
              &:nth-child(2) {
                .box-8-top-bgc {
                  display: flex;
                  align-items: center;
                  flex-wrap: wrap;
                  // border: 1px solid #0785c4;
                  border-left: none;
                  background: url('../../../assets/img/路段_.png') no-repeat
                    center !important;
                  background-size: 4.375rem 5rem;
                }
              }
              &:nth-child(3) {
                .box-8-top-bgc {
                  display: flex;
                  align-items: center;
                  flex-wrap: wrap;
                  // border: 1px solid #0785c4;
                  border-left: none;
                  background: url('../../../assets/img/边坡_.png') no-repeat
                    center !important;
                  background-size: 4.375rem 5rem;
                }
              }
              span {
                color: #fff;
                font-size: 18px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-content: center;
                &:nth-child(n + 3) {
                  font-size: 12px;
                }
              }
            }
          }
          .box-8-bottom {
            // height: 60%;
            flex: 0.6;
            display: flex;
            justify-content: space-around;
            // align-items: center;
            .box-8-items {
              // width: 33.33%;
              flex: 1;
              // height: 100%;
              cursor: pointer;
              border: 1px solid #0785c4;
              border-top: none;
              &:nth-child(2) {
                border-left: 0;
                border-right: 0;
              }
              .box-8-items-span {
                display: flex;
                flex-direction: column;
                align-items: center;
                span {
                  width: 100%;
                  color: #fff;
                  display: flex;
                  justify-content: space-around;
                  font-size: 18px;
                  margin-bottom: 5px;
                  p {
                    display: inline-block;
                    color: #fff;
                    margin: 0;
                  }
                }
              }
              &:hover {
                background-color: #0676af;
              }
              &:nth-child(1) {
                .box-8-items-span {
                  // display: flex;
                  align-items: center;
                  flex-wrap: wrap;
                  // border: 1px solid #0785c4;
                  // border-left: none;
                  background: url('../../../assets/img/桥梁_.png') no-repeat
                    center !important;
                  background-size: 70px 80px;
                }
              }
              &:nth-child(2) {
                .box-8-items-span {
                  // display: flex;
                  align-items: center;
                  flex-wrap: wrap;
                  // border: 1px solid #0785c4;
                  border-left: none;
                  background: url('../../../assets/img/隧道_.png') no-repeat
                    center !important;
                  background-size: 70px 80px;
                }
              }
              &:nth-child(3) {
                .box-8-items-span {
                  // display: flex;
                  align-items: center;
                  flex-wrap: wrap;
                  // border: 1px solid #0785c4;
                  border-left: none;
                  background: url('../../../assets/img/涵洞_.png') no-repeat
                    center !important;
                  background-size: 70px 80px;
                }
              }
              /deep/ .border-box-content {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                border: 1px solid #0785c4;
                span {
                  color: #fff;
                  margin: 0 5px;
                  &:nth-child(1) {
                    font-size: 1.325rem;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                  }
                  &:nth-child(n + 2) {
                    display: flex;
                    width: 100%;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    padding: 0 1.25rem;
                    p {
                      margin: 0;
                      font-size: 0.875rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .box-9 {
        height: calc(100% - 260px);
        // width: 100%;
        margin-top: 5px;
        background-color: #003255;
        .box-9-item {
          // height: calc(100% - 1.975rem);
          width: 100%;
          // display: flex;
          // justify-content: center;
          // align-items: center;
        }
      }
    }
    .continer_basic-right {
      height: 100%;
      // width: 100%;
      flex: 3;
      display: flex;
      .continer_basic-right-left {
        flex: 3;
        // min-width: 800px;
        position: relative;
        .videoWindow {
          width: 540px;
          height: 342px;
          position: absolute;
          top: 120px;
          left: 10px;
          z-index: 999;
        }
        .videoclose {
          width: 26px;
          height: 26px;
          position: absolute;
          top: 468px;
          left: 260px;
          border-radius: 26px;
          border: 2px solid #fff;
          z-index: 999;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .el-icon-close {
            cursor: pointer;
          }
        }
        .map {
          height: 100%;
          width: 100%;
          background-color: #103c5d;
          // left: 50%;
          // transform: translateX(-50%);
          // box-shadow: 0 0 50px 20px #033447;
          // z-index: 1;
          // .autoplay {
          //   position: absolute;
          //   z-index: 999;
          //   top: 0;
          //   left: 0;
          //   background-color: #012f50;
          //   padding: 0 10px;
          // }
          // .operationMapBox {
          //   // width: 23.125rem;
          //   height: 6.25rem;
          //   position: absolute;
          //   top: 0.625rem;
          //   left: 0.625rem;
          //   background: #00233f;
          //   &:hover {
          //     cursor: pointer;
          //   }
          //   z-index: 9999;
          //   .operationModular {
          //     height: 100%;
          //     width: 100%;
          //     display: flex;
          //     align-items: center;
          //     justify-content: center;
          //     .modular {
          //       flex: 1;
          //       // width: 3.5rem;
          //       height: 3.125rem;
          //       box-sizing: border-box;
          //       display: flex;
          //       flex-direction: column;
          //       align-items: center;
          //       margin: 0 8px;
          //       justify-content: center;
          //       text-align: center;
          //       span {
          //         font-size: 0.75rem;
          //         width: 48px;
          //       }
          //       &:nth-child(n + 7) {
          //         flex: 2;
          //       }
          //       &:hover {
          //         cursor: pointer;
          //         span {
          //           // color: #0676af;
          //           color: #fb0707;
          //         }
          //       }
          //       .modularImg {
          //         // width: 1.875rem;
          //         height: 1.875rem;
          //         img {
          //           height: 100%;
          //           width: 100%;
          //         }
          //       }
          //       .activeModular {
          //         color: #d24458;
          //       }
          //       span {
          //         display: block;
          //         font-weight: bold;
          //         color: #fff;
          //         margin-top: 5px;
          //       }
          //     }
          //   }
          // }

          .videoWindow {
            width: 600px;
            height: 300px;
            position: absolute;
            top: 120px;
            left: 10px;
          }
        }
      }
      .continer_basic-right-right {
        height: 100%;
        min-width: 300px;
        flex: 2;
        margin-left: 5px;
        .background {
          background: #002352;
        }
        .box-12 {
          width: 100%;
          height: calc(100% - 30px);
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .continer-right-right-top {
          height: calc(33.33% - 5px);
          width: 100%;
          margin-bottom: 5px;
          overflow-x: hidden;
          overflow-y: auto;
        }
        .continer-right-right-center {
          height: calc(33.33% - 5px);
          width: 100%;
          margin-bottom: 5px;
        }
        .continer-right-right-bottom {
          height: 33.33%;
          width: 100%;
        }
      }
    }
  }
  // 业务概况css样式
  .continer_biz {
    height: calc(100% - 60px);
    margin: 5px 10px;
    display: flex;
    flex-direction: column;
    .countHeight {
      width: 100%;
      height: calc(100% - 30px);
      position: relative;
      .back {
        width: 25px;
        height: 25px;
        position: absolute;
        top: 7px;
        // left: 558px;
        right: 5px;
        color: #fff;
        z-index: 999;
        img {
          width: 100%;
          height: 100%;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }
    .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .continer_biz-top {
      height: 100px;
      margin-bottom: 5px;
      display: flex;
      .textCount {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(100% - 30px);
        span {
          font-size: 30px;
          font-weight: bold;
          color: #fff;
        }
      }
      .text {
        color: #fff;
        font-size: 16px;
        margin-left: -30px;
      }
      .background {
        background: #00233f;
      }
      .continer_biz-top_1 {
        flex: 1.6;
      }
      .continer_biz-top_2 {
        flex: 1;
        margin: 0 5px;
      }
      .continer_biz-top_3 {
        flex: 1;
        margin-right: 5px;
      }
      .continer_biz-top_4 {
        flex: 1;
      }
    }
    .continer_biz-bottom {
      height: calc(100% - 70px);
      display: flex;
      .NoData {
        width: 100px;
        height: 100px;
        img {
          height: 100%;
          width: 100%;
        }
        span {
          display: block;
          width: 100%;
          color: #fff;
          text-align: center;
          font-size: 16px;
          font-weight: bold;
          font-family: monospace;
        }
      }
      .continer_biz-bottom-left {
        // height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        .continer_biz-bottom-left-top {
          flex: 1;
          width: 100%;
          background: #012f50;
          // max-height: 302px;
        }
        .continer_biz-bottom-left-center {
          flex: 1;
          width: 100%;
          background: #012f50;
          margin: 5px 0;
          // max-height: 302px;
        }
        .continer_biz-bottom-left-bottom {
          flex: 1;
          width: 100%;
          background: #012f50;
          // max-height: 302px;
        }
      }
      .continer_biz-bottom-center {
        margin: 0 5px;
        // height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        .continer_biz-bottom-center-top {
          flex: 1;
          width: 100%;
          background: #012f50;
          // max-height: 300px;
        }
        .continer_biz-bottom-center-center {
          flex: 1.3;
          width: 100%;
          background: #012f50;
          margin: 5px 0;
          // max-height: 310px;
        }
        .continer_biz-bottom-center-bottom {
          flex: 1;
          width: 100%;
          height: 100%;
          background: #012f50;
          // max-height: 300px;
        }
      }
      .continer_biz-bottom-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        .continer_biz-bottom-right-top {
          flex: 1;
          width: 100%;
          background: #012f50;
          // max-height: 302px;
        }
        .continer_biz-bottom-right-center {
          flex: 1;
          width: 100%;
          background: #012f50;
          margin: 5px 0;
          // max-height: 302px;
        }
        .continer_biz-bottom-right-bottom {
          flex: 1;
          width: 100%;
          height: 100%;
          background: #012f50;
          // max-height: 302px;
        }
      }
    }
  }
}
/deep/ .el-input__inner {
  background-color: #002542;
  border: 1px solid #000000;
  color: #fff;
}
/deep/ .el-scrollbar {
  background-color: #002542;
}
/deep/ .el-select-dropdown__item {
  color: #fff !important;
}
/deep/ .el-popper[x-placement^='bottom'] {
  border: none;
}
/deep/ .el-popper[x-placement^='bottom'] .popper__arrow {
  display: none;
}
/deep/ .el-tabs__nav-wrap {
  margin-bottom: -15px !important;
}
/deep/ .el-tabs__active-bar {
  height: 5px !important;
}
/deep/ .el-tabs__item {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  &:hover {
    color: #409eff;
  }
}
/deep/ #tab-first {
  width: 112px;
  padding-right: 0;
  text-align: center;
}
/deep/ #tab-second {
  width: 112px;
  // padding-left: 0;
  text-align: center;
}
/deep/ #tab-three {
  width: 112px;
  padding-left: 0;
  text-align: center;
}
/deep/ .el-tabs__active-bar {
  width: 112px !important;
}
/deep/ .el-tabs__item {
  padding: 0 !important;
}
/deep/ .el-tabs__nav-wrap::after {
  height: 0;
}
/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 115px !important;
}
/deep/ .el-picker-panel__content .el-month-table td .cell {
  color: #fff;
}

.slop_side_basic {
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    margin: 0;
  }
}

.operationMapBox {
  margin-top: 5px;
  &:hover {
    cursor: pointer;
  }
  z-index: 9999;
  .operationModular {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .modular {
      width: 25%;
      height: 6.5rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      span {
        font-size: 0.75rem;
      }
      &:hover {
        cursor: pointer;
        span {
          color: #f4e28b;
        }
      }
      .modularImg {
        height: 5.25rem;
        width: 5.25rem;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .activeModular {
        color: #f4e28b;
      }
      span {
        display: block;
        font-weight: bold;
        color: #fff;
        margin-top: 5px;
      }
    }
  }
}
</style>
