<template>
  <div class="monitorData">
    <vue-scroll>
      <div class="monitorData-content">
        <div class="left">
          <div class="monitor-info">
            <div class="monitor-title">
              <!-- 基坑 -->
              <span>{{$t('message.deepFoundConfig.deepFound')}}</span>
              <el-select
                size="medium"
                v-model="deepExcavation"
                :placeholder="$t('message.deepFoundConfig.placeholderText2')"
                @change="changeDeepExcavationId"
              >
                <el-option
                  v-for="item in deepExcavationList"
                  :key="item.id"
                  :label="item.engineeringName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="info-detail">
              <div class="wrap">
                <div class="info-item">
                  <!-- 安全等级 -->
                  <p>{{$t('message.deepFoundConfig.saveLv')}}：{{$t('message.deepFoundConfig.safeList')[deepExcavationDetail.safetyLevel-1]}}</p>
                  <!-- 支护形式 -->
                  <p>{{$t('message.deepFoundConfig.shoringType')}}：{{deepExcavationDetail.supportPattern}}</p>
                  <!-- 当前开挖深度 -->
                  <p>{{$t('message.deepFoundConfig.currentDepth')}}(m)：{{deepExcavationDetail.excavationDepth}}</p>
                </div>
                <div class="info-item">
                  <!-- 基坑深度 -->
                  <p>{{$t('message.deepFoundConfig.deepFoundDepth')}}(m)：{{deepExcavationDetail.foundationDitchDepth}}</p>
                  <!-- 监测负责人 -->
                  <p>{{$t('message.deepFoundConfig.monitorDutyPeople')}}：{{deepExcavationDetail.surveyDirector}}</p>
                  <!-- 底板浇策时间 -->
                  <p>{{$t('message.deepFoundConfig.floorBuildTime')}}：{{deepExcavationDetail.floorPourTime}}</p>
                </div>
                <div class="info-item">
                  <!-- 基坑周长 -->
                  <p>{{$t('message.deepFoundConfig.deepFoundPerimeter')}}(m)：{{deepExcavationDetail.foundationDitchGirth}}</p>
                  <!-- 监测人员 -->
                  <p>{{$t('message.deepFoundConfig.monitorPeople')}}：{{deepExcavationDetail.surveyPersonnel}}</p>
                </div>
              </div>
            </div>
            <div class="info-file">
              <vue-scroll style="height: 100px">
                <div class="file-box">
                  <div class="file-item">
                    <!-- 监测方案 -->
                    {{$t('message.deepFoundConfig.monitorPlan')}}：
                    <p
                      v-for="(item,index) in deepExcavationDetail.surveyScheme"
                      @click="openUrl(item)"
                      :title="item.name"
                      :key="index"
                      style="margin-right: 8px"
                    >{{item.name}}</p>
                  </div>
                  <div class="file-item">
                    <!-- 地勘报告 -->
                    {{$t('message.deepFoundConfig.geologicalReport')}}：
                    <p
                      v-for="(item,index) in deepExcavationDetail.prospectingReport"
                      @click="openUrl(item)"
                      :key="index"
                      :title="item.name"
                      style="margin-right: 8px"
                    >{{item.name}}</p>
                  </div>
                  <div class="file-item">
                    <!-- 基坑设计图纸 -->
                    {{$t('message.deepFoundConfig.deepFoundImg')}}：
                    <p
                      v-for="(item,index) in deepExcavationDetail.deviseDrawing"
                      @click="openUrl(item)"
                      :key="index"
                      :title="item.name"
                      style="margin-right: 8px"
                    >{{item.name}}</p>
                  </div>
                </div>
              </vue-scroll>
            </div>
          </div>

          <div class="monitor-map">
            <div class="monitor-title">
              <!-- 项目监测列表 -->
              <span>{{$t('message.deepFoundConfig.projectMonitorList')}}</span>
              <el-select
                size="medium"
                v-model="mapId"
                :placeholder="$t('message.deepFoundConfig.placeholderText2')"
                @change="changeMapId"
              >
                <el-option
                  v-for="item in mapList"
                  :key="item.id"
                  :label="item.planeFigureName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="map-wrap" ref="mapbox">
              <div class="tag-box" v-if="mapUrl">
                <div class="tag-item">
                  <span style="background: #44D7B6"></span>
                  <!-- 正常 -->
                  {{$t('message.deepFoundConfig.normal')}}
                </div>
                <div class="tag-item">
                  <span style="background: #F67F52"></span>
                  <!-- 超出报警值 -->
                  {{$t('message.deepFoundConfig.overAlarmNum')}}
                </div>
                <div class="tag-item" style="margin: 0">
                  <span style="background: #FF0000"></span>
                  <!-- 超出控制值 -->
                  {{$t('message.deepFoundConfig.overControlNum')}}
                </div>
              </div>
              <div class="img-box" v-if="mapUrl">
                <img
                  ref="map"
                  :style="{'width': mapDate.width + 'px','height': mapDate.height + 'px'}"
                  :src="mapUrl"
                />
                <div class="point-list">
                  <div
                    class="point-item"
                    v-for="(item, index) in pointList"
                    :key="index"
                    :style="{'left': item.mapX*mapZoom +'px','top': item.mapY*mapZoom + 'px'}"
                  >
                    <span
                      @click="checkMapItem(item)"
                      :style="{'background': colorList[item.status]}"
                    ></span>
                    <div
                      class="point-info"
                      :class="{'left': item.left, 'bottom': item.bottom}"
                      v-show="item.isShow"
                    >
                      <div class="point-title">
                        <p>测点编号：{{item.measurePointName }}</p>
                        <p>测点名称：{{ item.monitorTypeName}}</p>
                      </div>
                      <vue-scroll style="height: 200px">
                        <div class="point-content">
                          <div v-for="(item2,index2) in item.sensorlist" :key="index2">
                            <p>传感器编号：{{item2.sensorSn}}</p>
                            <p>传感器类型：{{item2.sensorTypeName == null ? '无' : item2.sensorTypeName }}</p>
                            <p>采集时间：{{item2.receiveTime == null ? '无' : item2.receiveTime}}</p>
                          </div>
                          <!-- 检测类型 -->
                          <!-- <p>{{$t('message.deepFoundConfig.detectionType')}}：{{item.monitorTypeName}}</p>
                          <p
                            v-for="(item2,index2) in item.pointData"
                            :key="index2"
                          >{{item2.label}}：{{item2.value}}</p>-->
                        </div>
                      </vue-scroll>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else style="text-align: center;padding-top: 80px">
                <img src="@/assets/images/noData2.png" />
                <!-- 暂无数据 -->
                <span
                  style="display: block;margin-top: 20px"
                >{{$t('message.deepFoundConfig.noData')}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="swiper-box">
            <el-carousel
              class="swiper-wrap"
              trigger="click"
              indicator-position="none"
              arrow="always"
              :autoplay="false"
              height="321px"
            >
              <el-carousel-item>
                <div class="monitor-title">
                  <!-- 告警信息 -->
                  <span>{{$t('message.deepFoundConfig.alarmInfo')}}</span>
                  <div class="nav-list">
                    <div
                      class="nav-item"
                      :class="{'active': searchDate == 1}"
                      @click="checkDate(1)"
                    >
                      <!-- 近7天 -->
                      {{$t('message.deepFoundConfig.near7Day')}}
                    </div>
                    <div
                      class="nav-item"
                      :class="{'active': searchDate == 2}"
                      @click="checkDate(2)"
                    >
                      <!-- 30天 -->
                      {{$t('message.deepFoundConfig.near30Day')}}
                    </div>
                  </div>
                </div>
                <div class="echart-wrap">
                  <div id="echart" ref="echart"></div>
                  <div class="echart-legend">
                    <div class="legend-item" v-for="(item,index) in echartData" :key="index">
                      <span :style="{'background': colorList2[index]}"></span>
                      {{item.name}}: {{item.value}}{{$t('message.deepFoundConfig.unit')}}
                    </div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="monitor-title">
                  <!-- 监测情况统计 -->
                  <span>{{$t('message.deepFoundConfig.monitorCaseStatistics')}}</span>
                </div>
                <div class="echart-statistics">
                  <div class="echart-wrap">
                    <div id="echart3" ref="echart3"></div>
                  </div>
                  <!-- <div class="echart-wrap">
                                    <div id="echart4" ref="echart4"></div>
                  </div>-->
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="monitor-title">
                  <!-- 监测项目数 -->
                  <span>{{$t('message.deepFoundConfig.monitorProjectNum')}}</span>
                </div>
                <div class="echart-wrap">
                  <div id="echart2" ref="echart2"></div>
                  <div class="echart-legend" :class="{'flex-w': echartData2.length>7}">
                    <div class="legend-item" v-for="(item,index) in echartData2" :key="index">
                      <span :style="{'background': colorList4[index]}"></span>
                      {{item.name}}: {{item.value}}{{$t('message.deepFoundConfig.unit')}}
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="monitor-table">
            <div class="monitor-title">
              <!-- 项目监测列表 -->
              {{$t('message.deepFoundConfig.projectMonitorList')}}
            </div>
            <div class="table-box">
              <el-table class="tables" height="496" :data="tableData">
                <!-- 监测项目 -->
                <el-table-column :label="$t('message.deepFoundConfig.monitorProject')">
                  <template slot-scope="scope">
                    <span class="name" @click="showDetail(scope.row)">{{scope.row.monitorTypeName}}</span>
                  </template>
                </el-table-column>
                <!-- 警情 -->
                <el-table-column
                  :label="$t('message.deepFoundConfig.sirens')"
                  align="center"
                  width="80"
                >
                  <template slot-scope="scope">
                    <!-- '报警':'正常' -->
                    <span>{{scope.row.alarmType == 1? $t('message.deepFoundConfig.alarm'):$t('message.deepFoundConfig.normal')}}</span>
                  </template>
                </el-table-column>
                <!-- 测点总数 -->
                <el-table-column
                  prop="measurePointNum"
                  :label="$t('message.deepFoundConfig.pointCount')"
                  align="center"
                  width="120"
                ></el-table-column>
                <!-- 近七天超控制数 -->
                <!-- <el-table-column
                  prop="superControlNumber"
                  width="130"
                  label="近七天超控制数"
                  align="center"
                ></el-table-column> -->
                <!-- 近七天超报警数 -->
                <el-table-column prop="superAlarmNumber" label="近七天超报警数" width="140" align="center"></el-table-column>
                <!-- 近7天超速率数 -->
                <el-table-column prop="rateAlarmNumber" width="140" align="center" label="近7天超速率数"></el-table-column>
              </el-table>
              <!-- <el-pagination
                            class="pagerBox"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNo"
                            :page-sizes="$store.state.PAGESIZRS"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="total"
                            background
              ></el-pagination>-->
            </div>
          </div>
        </div>
      </div>
      <!-- 项目监测详情 -->
      <el-dialog
        width="95%"
        class="dialog-box"
        :title="$t('message.deepFoundConfig.projectMonitorDetail')"
        :modal-append-to-body="false"
        :visible.sync="visibleDialog"
      >
        <div class="dialog_content">
          <div class="top">
            <div class="detail_box">
              <div class="detail-info">
                <!-- 监测项目 -->
                <span>{{$t('message.deepFoundConfig.monitorProject')}}：{{detailData.name}}</span>
                <!-- 测点 -->
                <span>{{$t('message.deepFoundConfig.point')}}：{{detailData.point ? detailData.point:'- -'}}</span>
                <!-- 是否达标 -->
                <span>{{$t('message.deepFoundConfig.isStandards')}}：{{detailData.status}}</span>
                <!-- 监测频率要求：1次/1天 -->
                <span>{{$t('message.deepFoundConfig.monitorFrequency')}}</span>
              </div>
              <!-- <div class="detail-grid">
                            <div class="grid-title">监测控制标：</div>
                            <div class="detail-table">
                                <div class="grid-item">
                                    <div class="grid-header">变化速率</div>
                                    <div class="grid-conetent">
                                        <div class="content">
                                            <span>预警值</span>
                                            <span>23</span>
                                        </div>
                                        <div class="content">
                                            <span>报警值</span>
                                            <span>32</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="grid-item">
                                    <div class="grid-header">累计绝对值</div>
                                    <div class="grid-conetent">
                                        <div class="content">
                                            <span>预警值</span>
                                            <span>23</span>
                                        </div>
                                        <div class="content">
                                            <span>报警值</span>
                                            <span>32</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
              </div>-->
            </div>
            <!-- <div class="detail-meter">
                        <div class="meter-item">
                            <div class="meter-label">
                                最新测点累计变化最大值：
                                <p>AD光电式引张线仪</p>
                            </div>
                            <div id="echart5" ref="echart5"></div>
                        </div>
                        <div class="meter-item">
                            <div class="meter-label">
                                最新测点累计变化速率最大值：
                                <p>ZD水位计</p>
                            </div>
                            <div id="echart6" ref="echart6"></div>
                        </div>
            </div>-->
          </div>
          <div class="bottom">
            <vue-scroll>
              <div class="bottom-wrap">
                <div class="search-box">
                  <div class="left-nav">
                    <!-- <div class="nav-item"
                                        :class="{'active': type == item.id}"
                                        v-for="(item,index) in navList"
                                        :key="index"
                                        @click="checkType(item)">
                                        {{item.name}}
                    </div>-->
                  </div>
                  <div class="right-form">
                    <div class="form-item">
                      <!-- 测点名称 -->
                      <span>{{$t('message.deepFoundConfig.pointName')}}：</span>
                      <el-select
                        v-model="checkList"
                        size="small"
                        @change="checkNum"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.measurePointName"
                          :value="item.measurePointNumber"
                        ></el-option>
                      </el-select>
                      <span style="margin-left:15px">传感器编号：</span>
                      <el-select
                        v-model="checkList2"
                        size="small"
                        @change="getEchartsData"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in getSensorList"
                          :key="item.id"
                          :label="item.sensorSn"
                          :value="item.sensorSn"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="form-item">
                      <!-- 选择日期 -->
                      <span>{{$t('message.deepFoundConfig.changeTime')}}：</span>
                      <el-date-picker
                        size="small"
                        v-model="dateTime"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :range-separator="$t('message.deepFoundConfig.to')"
                        :start-placeholder="$t('message.deepFoundConfig.startTime')"
                        :end-placeholder="$t('message.deepFoundConfig.endTime')"
                        @change="checkDateTime"
                      ></el-date-picker>
                    </div>
                  </div>
                </div>
                <div v-if="tableData2.length != 0" class="echart-box">
                  <div class="echart-title">
                    <!-- 曲线分析(累计变化) -->
                    {{$t('message.deepFoundConfig.echartTitle')}}
                  </div>
                  <div id="echart7" ref="echart7"></div>
                </div>
                <div v-else style="text-align: center;padding-top: 80px">
                  <img src="@/assets/images/noData2.png" />
                  <!-- 暂无数据 -->
                  <span
                    style="display: block;margin-top: 20px"
                  >{{$t('message.deepFoundConfig.noData')}}</span>
                </div>
                <div class="table-box">
                  <div class="table-title">
                    <!-- 数据列表 -->
                    {{$t('message.deepFoundConfig.tableList')}}
                  </div>
                  <el-table class="tables" height="330" :data="tableData2">
                    <!-- 测点编号 -->
                    <el-table-column
                      prop="measurePointNumber"
                      :label="$t('message.deepFoundConfig.pointNo')"
                    ></el-table-column>
                    <el-table-column prop="sensorSn" label="传感器编号"></el-table-column>
                    <el-table-column prop="fiducialValue" label="初始值" align="center" width="100"></el-table-column>
                     <!-- 采集时间 -->
                     <el-table-column
                      width="220"
                      align="center"
                      prop="receiveTime"
                      :label="$t('message.deepFoundConfig.gatherTime')"
                    ></el-table-column>
                    <el-table-column prop="lastTimeData" label="上次值"></el-table-column>
                    <el-table-column prop="data" label="本次值">
                      <template slot-scope="scope">{{scope.row.data + scope.row.unit}}</template>
                    </el-table-column>
                    <el-table-column prop="dataThis" label="本次变化量">
                      <template slot-scope="scope">{{scope.row.dataThis + scope.row.unit}}</template>
                    </el-table-column>
                    <el-table-column prop="dataTotal" label="累计值">
                      <template slot-scope="scope">{{scope.row.dataTotal + scope.row.unit}}</template>
                    </el-table-column>
                    <el-table-column prop="alarmValue" label="累计预警值" align="center"></el-table-column>
                    <el-table-column prop="dataRate" label="变化速率" align="center"></el-table-column>
                    <el-table-column prop="rateAlarmValue" label="变化速率预警值" align="center"></el-table-column>
                    <!-- <el-table-column prop="data" label="值">
                      <template slot-scope="scope">{{scope.row.data + scope.row.unit}}</template>
                    </el-table-column>
                    <el-table-column
                      prop="measurePointName"
                      :label="$t('message.deepFoundConfig.pointName')"
                    ></el-table-column>
                    <el-table-column
                      v-for="(item,index) in detailData.tableHeader"
                      :key="index"
                      :prop="item.key"
                      :label="item.keyName"
                    ></el-table-column> -->
                    <!-- 报警状态 -->
                    <el-table-column :label="$t('message.deepFoundConfig.alarmStatus')">
                      <template slot-scope="scope">
                        <!-- <span :class="{'alarm_status1': scope.row.alarmState == '0',
                                            'alarm_status2': scope.row.alarmState == 1,
                                            'alarm_status3': scope.row.alarmState == 2,
                                            'alarm_status4': scope.row.alarmState == 3}">
                                            "正常" "报警" "预警" "控制"
                                            {{ scope.row.alarmState == '0' ? $t('message.deepFoundConfig.normal'): scope.row.alarmState == 2
                                            ? $t('message.deepFoundConfig.alarm'):scope.row.alarmState == 1
                                            ? $t('message.deepFoundConfig.warning'):scope.row.alarmState == 3
                        ? $t('message.deepFoundConfig.control'):""}}</span>-->
                        <span
                          :class="{'alarm_status1': scope.row.alarmState == 1,
                            'alarm_status2': scope.row.alarmState == 2,
                            'alarm_status3': scope.row.alarmState == 3,
                            'alarm_status4': scope.row.alarmState == 4}"
                        >
                          {{scope.row.alarmState == 1 ? '正常': scope.row.alarmState == 2
                          ? '超报警' :scope.row.alarmState == 3
                          ? '超控制':scope.row.alarmState == 4
                          ? '变化速率报警':""}}
                        </span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-pagination
                  class="pager"
                  @size-change="handleSizeChange1"
                  @current-change="handleCurrentChange1"
                  :current-page="pageNo1"
                  :page-sizes="$store.state.PAGESIZRS"
                  :page-size="pageSize1"
                  layout="total, sizes, prev, pager, next"
                  :total="total1"
                  background
                ></el-pagination>
              </div>
            </vue-scroll>
          </div>
        </div>
      </el-dialog>
    </vue-scroll>
  </div>
</template>

<script>
import echarts from "echarts4";
import {
  queryByIdDeepExcavationEngineeringApi,
  selectDeepExcavationListApi,
  selectMonitorTypeAlarmCountListApi,
  getDefaultMonitorTypeListApi,
  selectDeepExcavationMonitorTypeListApi,
  selectMeasurePointListApi,
  selectMonitorTypeCountApi,
  selectDeepExcavationSensorTypeListApi,
  selectDeepExcavationCurrentDataListApi,
  selectDeepExcavationCurrentDataApi,
  selectDeepExcavationPlaneFigureListApi,
  selectDeepExcavationPlaneFigureCoordinateApi,
  selectDeepExcavationAllMeasurePointListApi,
  queryByIdDeepExcavationMonitorTypeApi,
  selectMonitorTypeListApi,
  getSensorListApi
} from "@/assets/js/api/deepFoundationPitManage.js";
export default {
  data() {
    return {
      detailData: {
        name: "",
        point: "",
        status: "",
        tableHeader: []
      },
      mapUrl: "",
      mapList: [],
      mapId: "",
      safeList: ["一级", "二级", "三级", "四级", "五级", "六级"],
      deepExcavation: "", //基坑id
      monitorTypeId: "", //监测内容id
      relaId: "",
      colorList: ["#44D7B6", "#44D7B6", "#F67F52", "#FF0000"],
      colorList2: ["#7953F6", "#F67F52",'#61a0a8'],
      colorList3: ["#44D7B6", "#5484F6"],
      colorList4: [
        "#44D7B6",
        "#F67F52",
        "#FF0000",
        "#7953F6",
        "#5484F6",
        "#FFB6C1",
        "#DC143C",
        "#9400D3",
        "#7B68EE",
        "#4169E1",
        "#1E90FF",
        "#FFD700",
        "#FF4500"
      ],
      deepExcavationList: [],
      chart1: Object,
      option1: {},
      echartData: [
        { value: 0, name: "超出报警值" },
        { value: 0, name: "超出速率值" }
      ],
      chart2: Object,
      option2: {},
      echartData2: [{ value: 0, name: "监测项" }],
      chart3: Object,
      option3: {},
      echartData3: [
        { value: 0, name: "监测项目总数" }
        // {value: 6, name: '无监测'},
      ],
      chart4: Object,
      option4: {},
      echartData4: [
        { value: 0, name: "自动" },
        { value: 0, name: "人工" }
      ],
      tableData: [],
      chart5: Object,
      option5: {},
      chart6: Object,
      option6: {},
      chart7: Object,
      option7: {},
      pageNo1: 1,
      pageSize1: 10,
      total1: 0,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      visibleDialog: false,
      navList: [
        {
          name: "全部",
          id: 1
        },
        {
          name: "预报警测点",
          id: 2
        },
        {
          name: "最大值测点",
          id: 3
        },
        {
          name: "人工",
          id: 4
        },
        {
          name: "自动",
          id: 5
        }
      ],
      options: [],
      getSensorList: [], // 传感器列表
      checkList: "",
      checkList2: "",
      firstSelect: "",
      dateTime: [],
      searchDate: 1,
      pointList: [],
      mapDate: {
        width: "",
        height: ""
      },
      type: 1,
      projectSn: "",
      deepExcavationDetail: {},
      mapZoom: 1,
      echartDataTotal: 0,
      echartData3Total: 0,
      echart2Total: 0,
      tableData2: [],
      echartData7: {
        xAxis: [],
        data: [],
        unit: 'mm'
      }
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.selectDeepExcavationList();
  },
  mounted() {
    this.createdEchart1();
    // this.createdEchart2()
    // this.createdEchart3()
    // this.createdEchart4()
    // this.getNaturalSize()
    console.dir(this.$refs["map"]);
    // console.log(this.getNaturalSize())
    // this.createdEchart5()
  },
  methods: {
    // 查询实时数据
    selectDeepExcavationCurrentDataList(val) {
      console.log('默认第一次带sn了吗',this.checkList2)
      selectDeepExcavationCurrentDataListApi({
        measurePointNumber: this.checkList,
        relaId: this.relaId,
        projectSn: this.projectSn,
        sensorSn:  val ,
        startTime: this.dateTime != null ? this.dateTime[0] : "",
        endTime: this.dateTime != null ? this.dateTime[1] : "",
        pageNo:this.pageNo1,
        pageSize:this.pageSize1,
      }).then(res => {
        this.echartData7.unit = res.result.unit;
        console.log("默认第一次进来的时候单位", res.result)
        if (res.code == 200 && res.result) {
          this.total1 = res.result.data.total
          this.tableData2 = res.result.data.records;
          this.echartData7 = {
            xAxis: [],
            data: []
          };
          res.result.data.records.forEach(item => {
            this.echartData7.xAxis.unshift(item.receiveTime);
            this.echartData7.data.unshift(item.data);
          });
          this.$nextTick(() => {
            this.createdEchart7();
          });
        }
      });
    },
    // 列表查询测点
    selectDeepExcavationAllMeasurePointList() {
      selectDeepExcavationAllMeasurePointListApi({
        deepExcavationId: this.deepExcavation,
        relaId: this.relaId
      }).then(res => {
        console.log("查询到测点名称", res);
        if (res.code == 200 && res.result) {
          this.options = res.result;
          let arr = [];
          res.result.forEach(item => {
            arr.push(item.measurePointName);
          });
          this.detailData.point = arr.join("，");
          console.log("this.detailData.point", this.detailData.point);
          //   第一次进入默认选择第一个
          if (res.result.length > 0) {
            this.checkList = res.result[0].measurePointNumber;
            this.checkNum(this.checkList);
          }
        }
      });
    },
    // 查询传感器编号列表
    selectDeepExcavationAllgetSensorList() {
      let data = {};
      getSensorListApi(data).then(res => {
        console.log("0000000", res);
      });
    },

    // 根据id查询基坑内容详情
    queryByIdDeepExcavationMonitorType(val) {
      console.log(val);
      queryByIdDeepExcavationMonitorTypeApi({
        id: val
      }).then(res => {
        console.log(res);
      });
    },
    //查询监测内容近七天报警 预警数
    selectMonitorTypeList() {
      selectMonitorTypeListApi({
        deepExcavationId: this.deepExcavation,
        projectSn: this.projectSn
      }).then(res => {
        console.log(res, "查询监测内容近七天报警 预警数");
        if (res.code == 200 && res.result) {
          this.tableData = res.result;
        }
      });
    },
    // 查询测点统计
    selectMonitorTypeCount() {
      if (!this.deepExcavation) {
        this.createdEchart2();
        return;
      }
      selectMonitorTypeCountApi({
        deepExcavationId: this.deepExcavation,
        projectSn: this.projectSn
      }).then(res => {
        console.log(res);
        res.result.list.forEach(item => {
          item.name = item.monitorTypeName;
          item.value = item.measurePointNum;
        });
        this.echartData2 = res.result.list;
        this.echart2Total = res.result.totalPointNum;
        this.createdEchart2();
      });
    },
    // 查询监测内容
    selectDeepExcavationMonitorTypeList() {
      if (!this.deepExcavation) {
        this.echartData3Total = 0;
        this.createdEchart3();
        return;
      }
      selectDeepExcavationMonitorTypeListApi({
        deepExcavationId: this.deepExcavation,
        projectSn: this.projectSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }).then(res => {
        console.log(res.result, "监测内容");
        if (res.code == 200 && res.result) {
          this.echartData3Total = res.result.total;
          // this.tableData = res.result.records
          this.createdEchart3();
        }
      });
    },
    // 查询告警数
    selectMonitorTypeAlarmCountList() {
      selectMonitorTypeAlarmCountListApi({
        deepExcavationId: this.deepExcavation,
        projectSn: this.projectSn,
        searchType: this.searchDate
      }).then(res => {
        console.log("告警数统计222222222",res);
        if (res.code == 200 && res.result) {
          this.echartData[0].value = 0;
          this.echartData[1].value = 0;
          res.result.forEach(item => {
            this.echartData[0].value += item.superAlarmNumber; // 超报警
            this.echartData[1].value += item.rateAlarmNumber; // 超速率
          });
          this.echartDataTotal =
            this.echartData[0].value +
            this.echartData[1].value;
        }
        this.createdEchart1();
      });
    },
    // 查询点位信息
    selectDeepExcavationPlaneFigureCoordinate() {
      selectDeepExcavationPlaneFigureCoordinateApi({
        deepExcavationId: this.deepExcavation,
        planeFigureId: this.mapId
      }).then(res => {
        console.log(res.result, "点位配置信息");
        if (res.code == 200 && res.result) {
          res.result.forEach(item => {
            item.isShow = false;
            // item.status = item.currentdata.alarmState
            //   ? item.currentdata.alarmState
            //   : 0;
            item.pointName = item.measurePointName;
            // item.dataCreateTime = item.currentdata.receiveTime;
            // let obj = JSON.parse(item.dataField);
            let arr = [];
            // for (let key in obj) {
            //   arr.push({
            //     value: item.currentdata[key],
            //     label: obj[key]
            //   });
            // }
            item.pointData = arr;
          });
          this.pointList = res.result;
          // console.log('左边的下面',this.pointList)
        }
      });
    },
    // 查询平面图点位
    changeMapId(val) {
      this.mapId = val;
      this.mapList.forEach(item => {
        if (item.id == val) {
          this.mapUrl = item.imageUrl;
          this.getNaturalSize();
        }
      });
      this.selectDeepExcavationPlaneFigureCoordinate();
    },
    // 查询平面图列表
    selectDeepExcavationPlaneFigureList() {
      selectDeepExcavationPlaneFigureListApi({
        deepExcavationId: this.deepExcavation,
        projectSn: this.projectSn
      }).then(res => {
        console.log("平面图列表", res.result);
        if (res.code == 200 && res.result) {
          this.mapList = res.result;
          this.mapId = "";
          this.mapUrl = "";
          if (res.result.length > 0) {
            this.mapId = res.result[0].id;
            this.mapUrl = res.result[0].imageUrl;
            this.getNaturalSize();
            this.selectDeepExcavationPlaneFigureCoordinate();
          } else {
            this.pointList = [];
          }
        }
      });
    },
    // 下载文件
    openUrl(val) {
      console.log(val);
      if (val.url) {
        window.open(val.url);
      }
    },
    // 查询基坑详情
    queryByIdDeepExcavationEngineering() {
      if (!this.deepExcavation) {
        return;
      }
      queryByIdDeepExcavationEngineeringApi({ id: this.deepExcavation }).then(
        res => {
          console.log(res.result, "基坑工程详情");
          if (res.result && res.code == 200) {
            this.deepExcavationDetail = res.result;
            if (this.deepExcavationDetail.surveyScheme) {
              this.deepExcavationDetail.surveyScheme = JSON.parse(
                this.deepExcavationDetail.surveyScheme
              );
            } else {
              this.deepExcavationDetail.surveyScheme = [];
            }
            if (this.deepExcavationDetail.prospectingReport) {
              this.deepExcavationDetail.prospectingReport = JSON.parse(
                this.deepExcavationDetail.prospectingReport
              );
            } else {
              this.deepExcavationDetail.prospectingReport = [];
            }
            if (this.deepExcavationDetail.deviseDrawing) {
              this.deepExcavationDetail.deviseDrawing = JSON.parse(
                this.deepExcavationDetail.deviseDrawing
              );
            } else {
              this.deepExcavationDetail.deviseDrawing = [];
            }
          }
        }
      );
    },
    // 初始化数据
    initData() {
      this.queryByIdDeepExcavationEngineering();
      this.selectDeepExcavationPlaneFigureList();
      this.selectMonitorTypeAlarmCountList();
      this.selectDeepExcavationMonitorTypeList();
      this.selectMonitorTypeCount();
      this.selectMonitorTypeList();
    },
    // 切换基坑
    changeDeepExcavationId(val) {
      console.log(val);
      this.deepExcavation = val;
      this.initData();
    },
    // 查询所有基坑
    selectDeepExcavationList() {
      selectDeepExcavationListApi({ projectSn: this.projectSn }).then(res => {
        console.log(res.result, "基坑工程列表");
        if (res.code == 200 && res.result) {
          this.deepExcavationList = res.result;
          if (res.result.length > 0) {
            this.deepExcavation = res.result[0].id;
          }
          this.initData();
        }
      });
    },
    createdEchart1() {
      // console.log(this.$refs['echart'])
      let chart1 = echarts.init(this.$refs["echart"]);
      this.chart1 = chart1;
      chart1.clear();
      this.option1 = {
        grid: {
          // top: 0,
          right: 0
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          show: false,
          orient: "vertical",
          top: "center",
          right: "0",
          itemGap: 30,
          selectedMode: false,
          textStyle: {
            fontSize: 16
          },
          data: [
            // {
            //   // 超出控制值
            //   name: this.$t("message.deepFoundConfig.overControlNum"),
            //   icon: "circle"
            // },
            {
              // 超出报警值
              name: this.$t("message.deepFoundConfig.overAlarmNum"),
              icon: "circle"
            },
            {
              // 超出速率值
              name: "超出速率值",
              icon: "circle"
            }
          ],
          formatter: name => {
            let value = 0;
            this.echartData.forEach(item => {
              if (name == item.name) {
                value = item.value;
              }
            });
            // 个
            return (
              name + "：" + value + this.$t("message.deepFoundConfig.unit")
            );
          }
          // show: false
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "40%",
            style: {
              text: this.echartDataTotal,
              textAlign: "center",
              fill: "#000",
              fontSize: 36
            }
          },
          {
            type: "text",
            left: "center",
            top: "60%",
            style: {
              // 风险总数
              text: this.$t("message.deepFoundConfig.alarmCount"),
              textAlign: "center",
              fill: "#999",
              fontSize: 16
            }
          }
        ],
        color: this.colorList2,
        series: [
          {
            type: "pie",
            radius: ["55%", "70%"],
            // center:['100','50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "16",
                color: "#fff"
              }
            },
            labelLine: {
              show: false
            },
            data: this.echartData
          }
        ]
      };
      chart1.setOption(this.option1);
    },
    createdEchart2() {
      // console.log(this.$refs['echart2'])
      let chart2 = echarts.init(this.$refs["echart2"]);
      this.chart2 = chart2;
      chart2.clear();
      this.option2 = {
        grid: {
          top: "0px",
          left: "0px",
          right: "0px",
          bottom: "0px"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          show: false,
          orient: "vertical",
          top: "center",
          right: "0",
          itemGap: 30,
          selectedMode: false,
          textStyle: {
            fontSize: 16
          },
          data: [
            {
              // 水位监测
              name: this.$t("message.deepFoundConfig.waterMonitor"),
              icon: "circle"
            },
            {
              // '沉降监测'
              name: this.$t("message.deepFoundConfig.settlingMonitor"),
              icon: "circle"
            }
          ],
          formatter: name => {
            let value = 0;
            this.echartData2.forEach(item => {
              if (name == item.name) {
                value = item.value;
              }
            });
            return name + "：" + value;
          }
          // show: false
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "38%",
            style: {
              text: this.echart2Total,
              textAlign: "center",
              fill: "#000",
              fontSize: 40
            }
          },
          {
            type: "text",
            left: "center",
            top: "60%",
            style: {
              // 测点总数
              text: this.$t("message.deepFoundConfig.pointCount"),
              textAlign: "center",
              fill: "#999",
              fontSize: 16
            }
          }
        ],
        color: this.colorList4,
        series: [
          {
            type: "pie",
            radius: ["55%", "70%"],
            // center:['100','50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "16",
                color: "#fff"
              }
            },
            labelLine: {
              show: false
            },
            data: this.echartData2
          }
        ]
      };
      chart2.setOption(this.option2);
    },
    createdEchart3() {
      // console.log(this.$refs['echart3'])
      let chart3 = echarts.init(this.$refs["echart3"]);
      this.chart3 = chart3;
      chart3.clear();
      this.option3 = {
        grid: {
          top: "0px",
          left: "0px",
          right: "0px",
          bottom: "0px"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          show: false,
          orient: "horizontal",
          bottom: "0",
          left: "center",
          itemGap: 30,
          selectedMode: false,
          textStyle: {
            fontSize: 16
          },
          data: [
            // {
            //     name: '测点数',
            //     icon: 'circle'
            // },
            {
              // '监测项目总数'
              name: this.$t("message.deepFoundConfig.monitorProjectCount"),
              icon: "circle"
            }
          ]
          // show: false
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "70",
            style: {
              text: this.echartData3Total,
              textAlign: "center",
              fill: "#000",
              fontSize: 40
            }
          },
          {
            type: "text",
            left: "center",
            top: "120",
            style: {
              // '监测项目总数'
              text: this.$t("message.deepFoundConfig.monitorProjectCount"),
              textAlign: "center",
              fill: "#999",
              fontSize: 16
            }
          }
        ],
        color: this.colorList3,
        series: [
          {
            type: "pie",
            radius: ["55%", "70%"],
            center: ["50%", "100"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "16",
                color: "#fff"
              }
            },
            labelLine: {
              show: false
            },
            data: this.echartData3
          }
        ]
      };
      chart3.setOption(this.option3);
    },
    createdEchart4() {
      // console.log(this.$refs['echart4'])
      let chart4 = echarts.init(this.$refs["echart4"]);
      this.chart4 = chart4;
      chart4.clear();
      this.option4 = {
        grid: {
          top: "0px",
          left: "0px",
          right: "0px",
          bottom: "0px"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "horizontal",
          bottom: "0",
          left: "center",
          itemGap: 30,
          selectedMode: false,
          textStyle: {
            fontSize: 16
          },
          data: [
            {
              // '自动'
              name: this.$t("message.deepFoundConfig.auto"),
              icon: "circle"
            },
            {
              // '人工'
              name: this.$t("message.deepFoundConfig.labour"),
              icon: "circle"
            }
          ]
          // show: false
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "70",
            style: {
              text: "16",
              textAlign: "center",
              fill: "#000",
              fontSize: 40
            }
          },
          {
            type: "text",
            left: "center",
            top: "120",
            style: {
              // 自动监测点
              text: this.$t("message.deepFoundConfig.autoMonitorPoint"),
              textAlign: "center",
              fill: "#999",
              fontSize: 16
            }
          }
        ],
        color: this.colorList2,
        series: [
          {
            type: "pie",
            radius: ["55%", "70%"],
            center: ["50%", "100"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "16",
                color: "#fff"
              }
            },
            labelLine: {
              show: false
            },
            data: this.echartData4
          }
        ]
      };
      chart4.setOption(this.option4);
    },
    // handleSizeChange(val) {
    //   this.pageSize = val;
    //   this.selectDeepExcavationMonitorTypeList()
    //   console.log(val);
    // },
    // handleCurrentChange(val) {
    //   this.pageNo = val;
    //   this.selectDeepExcavationMonitorTypeList()
    //   console.log(val);
    // },
    handleSizeChange1(val) {
      this.pageSize1 = val;
      console.log('分页',val);
      this.selectDeepExcavationCurrentDataList(this.checkList2);
    },
    handleCurrentChange1(val) {
      this.pageNo1 = val;
      console.log('分页分页',val);
      this.selectDeepExcavationCurrentDataList(this.checkList2);
    },
    createdEchart5() {
      // console.log(this.$refs['echart5'])
      let chart5 = echarts.init(this.$refs["echart5"]);
      this.chart5 = chart5;
      chart5.clear();
      this.option5 = {
        grid: {
          top: "0px",
          left: "0px",
          right: "0px",
          bottom: "0px"
        },
        series: [
          {
            center: ["50%", "50%"],
            radius: "100%",
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 12,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"]
                ]
              }
            },
            pointer: {
              width: 3,
              length: "58%",
              itemStyle: {
                color: "auto"
              }
            },
            axisTick: {
              distance: -30,
              length: 4,
              lineStyle: {
                color: "#fff",
                width: 1
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 2
              }
            },
            axisLabel: {
              color: "auto",
              distance: -12,
              fontSize: 10
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ["0", "55%"],
              // 累计绝对值
              formatter:
                "{value}\n{a|" +
                this.$t("message.deepFoundConfig.addUpAbsoluteValue") +
                "}\n{a|(mm)}",
              color: "auto",
              rich: {
                a: {
                  color: "#000",
                  fontSize: 14
                }
              },
              lineHeight: 22
            },
            data: [
              {
                value: 70
              }
            ]
          }
        ]
      };
      chart5.setOption(this.option5);
    },
    createdEchart6() {
      // console.log(this.$refs['echart6'])
      let chart6 = echarts.init(this.$refs["echart6"]);
      this.chart6 = chart6;
      chart6.clear();
      this.option6 = {
        grid: {
          top: "0px",
          left: "0px",
          right: "0px",
          bottom: "0px"
        },
        series: [
          {
            center: ["50%", "50%"],
            radius: "100%",
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 12,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"]
                ]
              }
            },
            pointer: {
              width: 3,
              length: "58%",
              itemStyle: {
                color: "auto"
              }
            },
            axisTick: {
              distance: -30,
              length: 4,
              lineStyle: {
                color: "#fff",
                width: 1
              }
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 2
              }
            },
            axisLabel: {
              color: "auto",
              distance: -12,
              fontSize: 10
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ["0", "55%"],
              formatter: "{value}\n{a|变化速率}\n{a|(mm/d)}",
              color: "auto",
              rich: {
                a: {
                  color: "#000",
                  fontSize: 14
                }
              },
              lineHeight: 22
            },
            data: [
              {
                value: 70
              }
            ]
          }
        ]
      };
      chart6.setOption(this.option6);
    },
    createdEchart7() {
      if (this.tableData2.length != 0) {
        let chart7 = echarts.init(this.$refs["echart7"]);
        this.chart7 = chart7;
        chart7.clear();
        this.option7 = {
          tooltip: {
            trigger: "axis",
            position: function (pt) {
            return [pt[0], '10%'];
            }
          },
          toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
           }
         },
          legend: {
            show: false
          },
          grid: {
            top: "30px",
            left: "60px",
            right: "35px",
            bottom: "50px"
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.echartData7.xAxis,
            axisLine: {
              lineStyle: {
                color: "#F4F5F8",
                type: "solid"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#7F8694"
            }
          },
          yAxis: {
            type: "value",
            // name:'单位/mm',
            name:`${'单位/'} ${this.echartData7.unit }`,
            boundaryGap: [0, '100%'],
            splitLine: {
              lineStyle: {
                color: "#F4F5F8",
                type: "solid"
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: "#7F8694"
            }
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 20
            },
            {
             start: 0,
             end: 20,
             top:"90%",
            }
          ],
          axisPointer: {
            lineStyle: {
              color: "#F4F5F8",
              type: "solid",
              width: "0"
            }
          },
          series: [
            {
              // '报警值'
              // name: this.$t("message.deepFoundConfig.alarmNum"),
              name: '测点值',
              type: "line",
              smooth: true,
              symbol: "circle",
              showSymbol: false,
              data: this.echartData7.data,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(58, 123, 255, 0.5)"
                  },
                  {
                    offset: 1,
                    color: "rgba(58, 123, 255, 0.1)"
                  }
                ])
              },
              lineStyle: {
                color: "#3A7BFF"
              },
              itemStyle: {
                color: "#3A7BFF"
              }
              // markLine:{
              //     data:[{
              //         symbol: 'none',
              //         yAxis: 100,
              //     }],
              //     lineStyle:{
              //         color: '#F92A08'
              //     },
              //     label:{
              //         position: 'insideStartTop',
              //         formatter: '{f|报警值: 100}',
              //         rich:{
              //             f:{
              //                 backgroundColor: 'rgba(249, 42, 8, 0.7)',
              //                 color: '#fff',
              //                 padding: [4, 60, 8, 8],
              //             }
              //         }
              //     },
              // }
            }
          ]
        };
        chart7.setOption(this.option7);
      }
    },
    // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
    selectNowDate() {
      var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hours = date.getHours(), //获取当前小时数(0-23)
        minutes = date.getMinutes(), //获取当前分钟数(0-59)
        seconds = date.getSeconds();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
      minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
      seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
      var timer =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      console.log(timer);
      return timer;
    },
    showDetail(val) {
      // console.log('当前点击的详情',val)
      this.dateTime = []
      this.pageSize1= 10,
      this.pageNo= 1,
      this.visibleDialog = true;
      this.relaId = val.id;
      this.selectDeepExcavationAllMeasurePointList();  // 获取测点名称
      // this.$nextTick(() => {
      //   // this.createdEchart5()
      //   // this.createdEchart6()
      //   this.createdEchart7();
      // });
    },
    checkDate(val) {
      this.searchDate = val;
      this.selectMonitorTypeAlarmCountList();
    },
    getNaturalSize(callback) {
      // console.dir(Domlement)
      let Domlement = this.$refs["map"];
      var natureSize = {};
      if (window.naturalWidth && window.naturalHeight) {
        natureSize.width = Domlement.naturalWidth;
        natureSize.height = Domlement.naturalHeight;
        // let heightRatio = natureSize.height / 569
        // this.mapDate.width = natureSize.width*heightRatio
      } else {
        console.log(213, this.mapUrl);
        let _this = this;
        var img = new Image();
        // img.src = Domlement.src;
        img.src = this.mapUrl;
        img.onload = function() {
          natureSize.width = img.width;
          natureSize.height = img.height;
          console.log("------", natureSize);
          console.dir(_this.$refs["mapbox"].clientWidth);
          let heightRatio = 519 / natureSize.height;
          let widthRatio = _this.$refs["mapbox"].clientWidth / natureSize.width;
          if (heightRatio < widthRatio) {
            _this.mapDate.width = natureSize.width * heightRatio;
            _this.mapDate.height = natureSize.height * heightRatio;
            _this.mapZoom = heightRatio;
          } else {
            _this.mapDate.width = natureSize.width * widthRatio;
            _this.mapDate.height = natureSize.height * widthRatio;
            _this.mapZoom = widthRatio;
          }
          // _this.mapDate.width = natureSize.width*heightRatio
          if (callback) {
            return callback(natureSize);
          }
        };
      }
      console.log(natureSize);
      // return natureSize;
    },
    checkMapItem(val) {
      this.pointList.forEach(item => {
        if (item.id != val.id) {
          item.isShow = false;
        }
      });
      console.log(this.mapDate, val);
      // console.dir(this.$refs['info'+val.id][0].clientHeight)
      if (val.mapX * this.mapZoom < this.mapDate.width * 0.5) {
        val.left = true;
      }
      if (val.mapY * this.mapZoom > this.mapDate.height * 0.5) {
        val.bottom = true;
      }
      val.isShow = !val.isShow;
    },
    checkType(val) {
      this.type = val.id;
      // this.createdEchart7()
    },
    // 第一个选择
    checkNum(val) {
      this.firstSelect = val;
      // console.log("第一个选择", val);
      getSensorListApi({ measurePointNumber: this.firstSelect }).then(res => {
        if (res.code == 200 && res.result) {
          // console.log('第二个选择的列表',res.result)
          this.getSensorList = res.result;
          if (this.getSensorList.length != 0) {
            this.checkList2 = this.getSensorList[0].sensorSn;
            // console.log('传感器编号',this.checkList2)
            this.selectDeepExcavationCurrentDataList(this.checkList2)  //默认第一次进来时带传感器编号获取实时数据
            this.getEchartsData()
            this.$nextTick(()=>{
              this.createdEchart7()
            })            
          }
        }
      });
    },
    // 第二个选择
    getEchartsData() {
      selectDeepExcavationCurrentDataListApi({
        measurePointNumber: this.checkList,
        relaId: this.relaId,
        sensorSn: this.checkList2 ,
        projectSn: this.projectSn,
        startTime: this.dateTime != null ? this.dateTime[0] : "",
        endTime: this.dateTime != null ? this.dateTime[1] : "",
        pageNo:this.pageNo1,
        pageSize:this.pageSize1,
      }).then(res => {
        this.echartData7.unit = res.result.unit
        console.log('第二个选择时的单位',res.result)
        if (res.code == 200 && res.result) {
          this.total1 = res.result.data.total
          this.tableData2 = res.result.data.records;
          this.echartData7 = {
            xAxis: [],
            data: []
          };
          res.result.data.records.forEach(item => {
            this.echartData7.xAxis.unshift(item.receiveTime);
            this.echartData7.data.unshift(item.data);
          });
          console.log('===========', this.echartData7.xAxis[0].split(' ')[0])
          this.$nextTick(() => {
            this.createdEchart7();
          });
        }
      });
    },
    checkDateTime() {
      if (this.checkList == "" || this.checkList2 == "") {
        this.$message({
          message: "请先选择传感器名称和编号哦！",
          type: "warning"
        });
      }
      this.selectDeepExcavationCurrentDataList(this.checkList2);
    }
  },
  watch: {
    firstSelect: {
      handler(newval, oldval) {
        if (newval != oldval) {
          this.getEchartsData();
        }
      },
      immediate: true
    }
  }
};
</script>

<style lang="less" scoped>
.monitorData {
  height: 100%;
  width: 100%;
  .monitorData-content {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .monitor-title {
      font-weight: bold;
      font-size: 16px;
      padding-left: 12px;
      position: relative;
      margin-bottom: 6px;
    }
    .monitor-title::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 14px;
      background: #409eff;
    }
    .left {
      // float: left;
      width: 60%;
      .monitor-info {
        background: #fff;
        padding: 20px;
        margin-bottom: 14px;
        .monitor-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .info-detail {
          padding: 0 36px;
          padding-top: 24px;
          .wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-bottom: 14px;
            border-bottom: 1px dashed #979797;
          }
          .info-item {
            width: 30%;
            line-height: 26px;
          }
        }
        .info-file {
          // padding: 0 36px;
          // padding-top: 22px;
          .file-box {
            display: flex;
            padding: 0 36px;
            padding-top: 16px;
          }
          .file-item {
            flex: 1;
            line-height: 26px;
            padding: 0 10px;
            p {
              display: block;
              width: 280px;
              color: #409eff;
              cursor: pointer;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
      .monitor-map {
        background: #fff;
        padding: 20px;
        .monitor-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .map-wrap {
          height: 536px;
          width: 100%;
          position: relative;
          // text-align: center;
          .tag-box {
            // position: absolute;
            // top: 0;
            // right: 0;
            margin-top: 3px;
            margin-bottom: 6px;
            display: flex;
            justify-content: flex-end;
            .tag-item {
              display: flex;
              align-items: center;
              margin-right: 76px;
              span {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 6px;
              }
            }
          }
          .img-box {
            // width: 100%;
            // height: 100%;
            display: inline-block;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            img {
              // width: 100%;
              // height: 100%;
              display: block;
              margin: 0 auto;
            }
          }
          .point-list {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            .point-item {
              background-image: url("~@/assets/images/pointl.png");
              position: absolute;
              span {
                width: 16px;
                height: 16px;
                display: block;
                border-radius: 50%;
                cursor: pointer;
              }
              .point-info {
                width: 268px;
                // height: 248px;
                position: absolute;
                z-index: 1;
                left: -276px;
                top: 0;
                background: rgba(0, 0, 0, 0.8);
                color: #fff;
                padding: 10px;
                box-sizing: border-box;
                .point-title {
                  // height: 30px;
                  line-height: 20px;
                  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                  padding: 10px 0;
                  word-break: break-all;
                }
                .point-content {
                  padding: 12px 0;
                  padding-bottom: 5px;
                  p {
                    line-height: 30px;
                  }
                }
              }
              .left {
                left: auto;
                right: -276px;
              }
              .bottom {
                top: -228px;
              }
            }
          }
        }
      }
    }
    .right {
      margin-left: 14px;
      width: 40%;
      .swiper-box {
        background: #fff;
        margin-bottom: 14px;
        .swiper-wrap {
          padding: 18px;
          .echart-wrap {
            display: flex;
            height: calc(100% - 50px);
            #echart {
              width: 240px;
              height: 240px;
              margin: 0 auto;
              margin-top: 20px;
            }
            #echart2 {
              width: 240px;
              height: 240px;
              margin: 0 auto;
              margin-top: 20px;
            }
            .echart-legend {
              width: 50%;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;
              .legend-item {
                margin-bottom: 10px;
                span {
                  display: inline-block;
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                }
              }
            }
            .flex-w {
              width: 60%;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: flex-start;
              align-items: center;
              .legend-item {
                width: 50%;
              }
            }
          }
          .echart-statistics {
            display: flex;
            width: 100%;
            height: calc(100% - 50px);
            .echart-wrap {
              flex: 1;
              height: 100%;
              #echart3 {
                width: 240px;
                height: 240px;
                margin: 0 auto;
                margin-top: 20px;
              }
              #echart4 {
                width: 240px;
                height: 240px;
                margin: 0 auto;
                margin-top: 20px;
              }
            }
          }
        }
        .monitor-title {
          height: 30px;
          .nav-list {
            float: right;
            display: flex;
            align-items: center;
            height: 30px;
            background: rgba(#5181f6, 0.1);
            font-weight: normal;
            border-radius: 3px;
            overflow: hidden;
            .nav-item {
              height: 100%;
              width: 56px;
              line-height: 30px;
              cursor: pointer;
              text-align: center;
            }
            .active {
              background: #5181f6;
              color: #fff;
            }
          }
        }
        .monitor-title::before {
          top: 2px;
          transform: translateY(0);
        }
      }
      .monitor-table {
        background: #fff;
        padding: 18px;
        .tables {
          min-height: 400px;
        }
        .pagerBox {
          margin-top: 16px;
        }
        .name {
          color: #5181f6;
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
  }
  .dialog-box {
    /deep/.el-dialog {
      height: 920px;
      box-sizing: border-box;
      margin-top: 0 !important;
      margin-bottom: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    .dialog_content {
      border: 1px solid #f3f3f3;
      padding: 0;
      .top {
        width: 100%;
        // height: 205px;
        display: flex;
        border-bottom: 1px solid #f3f3f3;
        .detail_box {
          // width: 723px;
          width: 100%;
          height: 100%;
          // border-right: 1px solid #f3f3f3;
          padding: 16px;
          box-sizing: border-box;
          display: flex;
          .detail-info {
            // width: 50%;
            width: 100%;
            line-height: 26px;
            span {
              margin-right: 20px;
            }
          }
          .detail-grid {
            flex: 1;
            .grid-title {
              line-height: 26px;
            }
          }
          .detail-table {
            display: flex;
            border-left: 1px solid #b1b1b1;
            .grid-item {
              width: 158px;
              text-align: center;
              .grid-header {
                background: rgba(#979797, 0.1);
                height: 30px;
                line-height: 30px;
                border-right: 1px solid #b1b1b1;
                border-bottom: 1px solid #b1b1b1;
                border-top: 1px solid #b1b1b1;
              }
              .grid-conetent {
                display: flex;
                .content {
                  width: 50%;
                  span {
                    display: block;
                    height: 30px;
                    line-height: 30px;
                    border-right: 1px solid #b1b1b1;
                    border-bottom: 1px solid #b1b1b1;
                  }
                }
              }
            }
          }
        }
        .detail-meter {
          display: flex;
          flex: 1;
          .meter-item {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            .meter-label {
              line-height: 24px;
              font-size: 16px;
              margin-right: 30px;
            }
            #echart5 {
              width: 185px;
              height: 185px;
              margin-top: 8px;
            }
            #echart6 {
              width: 185px;
              height: 185px;
              margin-top: 8px;
            }
          }
        }
      }
      .bottom {
        width: 100%;
        height: 750px;
        .bottom-wrap {
          height: 100%;
          width: 100%;
          border: 1px solid #f3f3f3;
          border-top: 0;
          padding: 16px;
          box-sizing: border-box;
          .search-box {
            display: flex;
            justify-content: space-between;
            .left-nav {
              display: flex;
              align-items: center;
              .nav-item {
                padding: 6px 12px;
                background: rgba(#5181f6, 0.1);
                margin-right: 10px;
                border-radius: 3px;
                cursor: pointer;
              }
              .active {
                background: #5181f6;
                color: #fff;
              }
            }
            .right-form {
              display: flex;
              align-items: center;
              .form-item {
                margin-right: 16px;
              }
            }
          }
          .echart-box {
            margin-bottom: 20px;
            .echart-title {
              font-weight: bold;
              margin-bottom: 12px;
            }
            #echart7 {
              width: 100%;
              height: 235px;
            }
          }
          .table-box {
            .table-title {
              font-weight: bold;
              margin-bottom: 12px;
            }
            .tables {
              min-height: 0;
            }
          }
        }
      }
    }
  }
  .alarm_status1 {
    padding: 4px 6px;
    // background: #44d7b6;
    color: #44d7b6;
    border-radius: 3px;
  }
  .alarm_status2 {
    padding: 4px 6px;
    // background: #7953f6;
    color: #f76462;
    border-radius: 3px;
  }
  .alarm_status3 {
    padding: 4px 6px;
    // background: #f67f52;
    color: #f76462;
    border-radius: 3px;
  }
  .alarm_status4 {
    padding: 4px 6px;
    // background: #5484f6;
    color: #f76462;
    border-radius: 3px;
  }
}
/deep/.el-dialog__title {
  font-weight: bold;
}
.pager {
  margin-top: 5px;
  text-align: center;
  .el-pager li.active {
    background-color: @--bg-color-primary!important;
  }
  button:disabled,
  .btn-next,
  .btn-prev {
    background-color: transparent !important;
  }
}
</style>