From 4810476e7227892c68d305adbcc2e854609ecbfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Thu, 25 Aug 2022 14:01:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=B1=E5=9F=BA=E5=9D=91(=E6=B5=8B=E7=82=B9?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7):=E9=A1=B9=E7=9B=AE=E7=9B=91=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=9F=A5=E8=AF=A2=E4=BB=A5=E5=8F=8A=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/js/api/deepFoundationPitManage.js  |    2 +-
 .../deepFoundationPitManage/dataConfig.vue    |    2 +-
 .../deepFoundationPitManage/monitorData.vue   | 4051 +++++++++--------
 3 files changed, 2123 insertions(+), 1932 deletions(-)

diff --git a/src/assets/js/api/deepFoundationPitManage.js b/src/assets/js/api/deepFoundationPitManage.js
index 35421554..1d8d867a 100644
--- a/src/assets/js/api/deepFoundationPitManage.js
+++ b/src/assets/js/api/deepFoundationPitManage.js
@@ -14,7 +14,7 @@ export const selectMeasurePointListApi = data => post('xmgl/deepExcavationMeasur
 export const addDeepExcavationMeasurePointApi = data => post('xmgl/deepExcavationMeasurePoint/add', data);   //添加深基坑-测点信息
 export const deleteDeepExcavationMeasurePointApi = data => post('xmgl/deepExcavationMeasurePoint/delete', data);   //删除深基坑-测点信息
 export const getDetailDeepExcavationApi = data => get('/xmgl/deepExcavationMeasurePoint/getDetailsByMeasurePointNumber', data);   //测点信息-测点管理-详情
-export const getSensorListApi = data => post('/xmgl/deepExcavationSensor/getSensorListByMeasurePointNumber', data);   //通过测点编号查询传感器列表
+export const getSensorListApi = data => get('/xmgl/deepExcavationSensor/getSensorListByMeasurePointNumber', data);   //通过测点编号查询传感器列表
 
 
 export const selectDeepExcavationSensorTypeListApi = data => post('xmgl/deepExcavationSensorType/selectDeepExcavationSensorTypeList', data);   //列表查询深基坑-传感器类型信息
diff --git a/src/views/projectFront/deepFoundationPitManage/dataConfig.vue b/src/views/projectFront/deepFoundationPitManage/dataConfig.vue
index 84b3de72..063aadb6 100644
--- a/src/views/projectFront/deepFoundationPitManage/dataConfig.vue
+++ b/src/views/projectFront/deepFoundationPitManage/dataConfig.vue
@@ -2124,7 +2124,7 @@ export default {
           }
           console.log(this.currentTableData);
         }
-        let nowTime = this.selectNowDate();
+        // let nowTime = this.selectNowDate();
         // this.acquisitionTime = [nowTime.split(' ')[0] + ' ' + '00:00:00',nowTime]
         this.selectDeepExcavationCurrentData();
         this.showActiveDetail = true;
diff --git a/src/views/projectFront/deepFoundationPitManage/monitorData.vue b/src/views/projectFront/deepFoundationPitManage/monitorData.vue
index 2eac6f7b..bbe0fcde 100644
--- a/src/views/projectFront/deepFoundationPitManage/monitorData.vue
+++ b/src/views/projectFront/deepFoundationPitManage/monitorData.vue
@@ -1,239 +1,286 @@
 <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">
-                                           {{item.measurePointName}}
-                                        </div>
-                                        <vue-scroll style="height: 200px">
-                                        <div class="point-content">
-                                            <!-- 检测类型 -->
-                                            <p>{{$t('message.deepFoundConfig.detectionType')}}：{{item.monitorTypeName}}</p>
-                                            <p v-for="(item2,index2) in item.pointData" :key="index2">
-                                                {{item2.label}}：{{item2.value}}
-                                            </p>
-                                            <!-- 采集时间 -->
-                                            <p>{{$t('message.deepFoundConfig.gatherTime')}}：{{item.dataCreateTime}}</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 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="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 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="monitor-table">
-                    <div class="monitor-title">
-                        <!-- 项目监测列表 -->
-                        {{$t('message.deepFoundConfig.projectMonitorList')}}
+                <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">{{item.measurePointName}}</div>
+                      <vue-scroll style="height: 200px">
+                        <div class="point-content">
+                          <!-- 检测类型 -->
+                          <p>{{$t('message.deepFoundConfig.detectionType')}}：{{item.monitorTypeName}}</p>
+                          <p
+                            v-for="(item2,index2) in item.pointData"
+                            :key="index2"
+                          >{{item2.label}}：{{item2.value}}</p>
+                          <!-- 采集时间 -->
+                          <p>{{$t('message.deepFoundConfig.gatherTime')}}：{{item.dataCreateTime}}</p>
+                        </div>
+                      </vue-scroll>
                     </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')">
-                                <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')"></el-table-column>
-                            <!-- 近7天预警数 -->
-                            <el-table-column prop="warningNum" :label="$t('message.deepFoundConfig.warningNum7')"></el-table-column>
-                            <!-- 近7天报警数 -->
-                            <el-table-column prop="alarmNum" :label="$t('message.deepFoundConfig.alarmNum7')"></el-table-column>
-                        </el-table>
-                        <!-- <el-pagination
+                  </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')">
+                  <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')"
+                ></el-table-column>
+                <!-- 近7天预警数 -->
+                <el-table-column
+                  prop="warningNum"
+                  :label="$t('message.deepFoundConfig.warningNum7')"
+                ></el-table-column>
+                <!-- 近7天报警数 -->
+                <el-table-column prop="alarmNum" :label="$t('message.deepFoundConfig.alarmNum7')"></el-table-column>
+              </el-table>
+              <!-- <el-pagination
                             class="pagerBox"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
@@ -243,27 +290,33 @@
                             layout="total, sizes, prev, pager, next"
                             :total="total"
                             background
-                        ></el-pagination> -->
-                    </div>
-                </div>
+              ></el-pagination>-->
             </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>
+      <!-- 项目监测详情 -->
+      <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">
@@ -293,9 +346,9 @@
                                     </div>
                                 </div>
                             </div>
-                        </div> -->
-                    </div>
-                    <!-- <div class="detail-meter">
+              </div>-->
+            </div>
+            <!-- <div class="detail-meter">
                         <div class="meter-item">
                             <div class="meter-label">
                                 最新测点累计变化最大值：
@@ -310,109 +363,146 @@
                             </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"
+            </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>传感器编号：</span>
-                                        <!-- <el-select v-model="checkList" size="small" @change="checkNum" placeholder="请选择">
-                                            <el-option
-                                                v-for="item in getSensorList"
-                                                :key="item.id"
-                                                :label="item.sensorTypeName"
-                                                :value="item.measurePointNumber">
-                                            </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 class="echart-box">
-                                <div class="echart-title">
-                                    <!-- 曲线分析(累计变化) -->
-                                    {{$t('message.deepFoundConfig.echartTitle')}}
-                                </div>
-                                <div id="echart7" ref="echart7"></div>
-                            </div>
-                            <div class="table-box">
-                                <div class="table-title">
-                                    <!-- 数据列表 -->
-                                    {{$t('message.deepFoundConfig.tableList')}}
-                                </div>
-                                <el-table class="tables" height="264" :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="sensorTypeName" label="传感器类型"></el-table-column>
-                                    <el-table-column prop="data" label="值"></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 prop="receiveTime" :label="$t('message.deepFoundConfig.gatherTime')"></el-table-column>
-                                    <!-- 报警状态 -->
-                                    <el-table-column :label="$t('message.deepFoundConfig.alarmStatus')">
-                                        <template slot-scope="scope">
-                                            <span :class="{'alarm_status1': scope.row.alarmState == '0',
+                    </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>传感器编号：</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 class="echart-box">
+                  <div class="echart-title">
+                    <!-- 曲线分析(累计变化) -->
+                    {{$t('message.deepFoundConfig.echartTitle')}}
+                  </div>
+                  <div id="echart7" ref="echart7"></div>
+                </div>
+                <div class="table-box">
+                  <div class="table-title">
+                    <!-- 数据列表 -->
+                    {{$t('message.deepFoundConfig.tableList')}}
+                  </div>
+                  <el-table class="tables" height="264" :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="sensorTypeName" 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="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
+                      prop="receiveTime"
+                      :label="$t('message.deepFoundConfig.gatherTime')"
+                    ></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>
-                                        </template>
-                                        </el-table-column>
-                                </el-table>
-                            </div>
-                        </div>
-                    </vue-scroll>
+                        ? $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>
-            </div>
-        </el-dialog>
-        </vue-scroll>
-    </div>
+              </div>
+            </vue-scroll>
+          </div>
+        </div>
+      </el-dialog>
+    </vue-scroll>
+  </div>
 </template>
 
 <script>
-import echarts from 'echarts4';;
+import echarts from "echarts4";
 import {
   queryByIdDeepExcavationEngineeringApi,
   selectDeepExcavationListApi,
@@ -430,1631 +520,1732 @@ import {
   queryByIdDeepExcavationMonitorTypeApi,
   selectMonitorTypeListApi,
   getSensorListApi
-} from "@/assets/js/api/deepFoundationPitManage.js"
+} 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'],
-            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:{},
-            pageNo: 1,
-            pageSize: 10,
-            total: 6,
-            visibleDialog: false,
-            navList:[{
-                name: '全部',
-                id: 1,
-            },{
-                name: '预报警测点',
-                id: 2,
-            },{
-                name: '最大值测点',
-                id: 3,
-            },{
-                name: '人工',
-                id: 4,
-            },{
-                name: '自动',
-                id: 5,
-            }],
-            options:[],
-            getSensorList:[], // 传感器列表
-            checkList:"",
-            dateTime: [],
-            searchDate: 1,
-            pointList:[],
-            mapDate:{
-                width: "",
-                height: ""
-            },
-            type: 1,
-            projectSn: "",
-            deepExcavationDetail:{},
-            mapZoom: 1,
-            echartDataTotal: 0,
-            echartData3Total: 0,
-            echart2Total: 0,
-            tableData2: [],
-            echartData7: {
-                xAxis: [],
-                data: [],
-                unit: ''
-            }
+  data() {
+    return {
+      detailData: {
+        name: "",
+        point: "",
+        status: "",
+        tableHeader: []
+      },
+      mapUrl: "",
+      mapList: [],
+      mapId: "",
+      safeList: ["一级", "二级", "三级", "四级", "五级", "六级"],
+      deepExcavation: "", //基坑id
+      monitorTypeId: "", //监测内容id
+      relaId: "",
+      colorList: ["#44D7B6", "#44D7B6", "#F67F52", "#FF0000"],
+      colorList2: ["#7953F6", "#F67F52"],
+      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: {},
+      pageNo: 1,
+      pageSize: 10,
+      total: 6,
+      visibleDialog: false,
+      navList: [
+        {
+          name: "全部",
+          id: 1
+        },
+        {
+          name: "预报警测点",
+          id: 2
+        },
+        {
+          name: "最大值测点",
+          id: 3
+        },
+        {
+          name: "人工",
+          id: 4
+        },
+        {
+          name: "自动",
+          id: 5
         }
+      ],
+      options: [],
+      getSensorList: [], // 传感器列表
+      checkList: "",
+      checkList2: "",
+      dateTime: [],
+      searchDate: 1,
+      pointList: [],
+      mapDate: {
+        width: "",
+        height: ""
+      },
+      type: 1,
+      projectSn: "",
+      deepExcavationDetail: {},
+      mapZoom: 1,
+      echartDataTotal: 0,
+      echartData3Total: 0,
+      echart2Total: 0,
+      tableData2: [],
+      echartData7: {
+        xAxis: [],
+        data: [],
+        unit: ""
+      }
+    };
+  },
+  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() {
+      selectDeepExcavationCurrentDataListApi({
+        measurePointNumber: this.checkList,
+        relaId: this.relaId,
+        projectSn: this.projectSn,
+        startTime: this.dateTime != null ? this.dateTime[0] : "",
+        endTime: this.dateTime != null ? this.dateTime[1] : "",
+      }).then(res => {
+        console.log("有数据吗", res);
+        if (res.code == 200 && res.result) {
+          // console.log('下面的数据',res)
+          this.tableData2 = res.result.data.records;
+          this.echartData7 = {
+            xAxis: [],
+            data: []
+          };
+          this.detailData.tableHeader.forEach(item => {
+            if (item.key == "data") {
+              this.echartData7.unit = "(" + item.keyName.split("(")[1];
+            }
+          });
+          res.result.data.records.forEach(item => {
+            // this.echartData7.xAxis.push(item.receiveTime.split(' ')[1])
+            this.echartData7.xAxis.push(item.receiveTime.split(" ")[0]);
+            this.echartData7.data.push(item.data);
+          });
+          // console.log('图标的值',this.echartData7)
+          this.createdEchart7();
+        }
+      });
     },
-    created(){
-        this.projectSn = this.$store.state.projectSn;
-        this.selectDeepExcavationList()
+    // 列表查询测点
+    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.selectDeepExcavationCurrentDataList();
+        }
+      });
     },
-    mounted() {
-        this.createdEchart1()
-        // this.createdEchart2()
-        // this.createdEchart3()
-        // this.createdEchart4()
-        // this.getNaturalSize()
-        console.dir(this.$refs['map'])
-        // console.log(this.getNaturalSize())
-        // this.createdEchart5()
+    // 查询传感器编号列表
+    selectDeepExcavationAllgetSensorList() {
+      let data = {};
+      getSensorListApi(data).then(res => {
+        console.log("0000000", res);
+      });
     },
-    methods:{
-        // 查询实时数据
-        selectDeepExcavationCurrentDataList(){
-            selectDeepExcavationCurrentDataListApi({
-                measurePointNumber: this.checkList,
-                relaId: this.relaId,
-                projectSn: this.projectSn,
-                startTime: this.dateTime[0],
-                endTime: this.dateTime[1]
-            }).then(res=>{
-                console.log(res)
-                if(res.code == 200 && res.result){
-                    // console.log('下面的数据',res)
-                    this.tableData2 = res.result.records
-                    this.echartData7={
-                        xAxis: [],
-                        data: []
-                    }
-                    this.detailData.tableHeader.forEach(item=>{
-                        if(item.key == 'data'){
-                            this.echartData7.unit = '('+item.keyName.split('(')[1]
-                        }
-                    })
-                    res.result.data.records.forEach(item=>{
-                        // this.echartData7.xAxis.push(item.receiveTime.split(' ')[1])
-                         this.echartData7.xAxis.push(item.receiveTime.split(' ')[0])
-                        this.echartData7.data.push(item.data)
-                    })
-                    // console.log('图标的值',this.echartData7)
-                    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.selectDeepExcavationCurrentDataList()
-                }
-            })
-        },
-        // 查询传感器编号列表
-        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
+    // 根据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(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.controlNum;
+            this.echartData[1].value += item.alarmNum;
+          });
+          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.currentdata.measuringPointName;
+            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]
+              });
             }
-            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
+            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 = [];
             }
-            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(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.controlNum
-                        this.echartData[1].value += item.alarmNum
-                    })
-                    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.currentdata.measuringPointName
-                        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)
+            if (this.deepExcavationDetail.prospectingReport) {
+              this.deepExcavationDetail.prospectingReport = JSON.parse(
+                this.deepExcavationDetail.prospectingReport
+              );
+            } else {
+              this.deepExcavationDetail.prospectingReport = [];
             }
-        },
-        // 查询基坑详情
-        queryByIdDeepExcavationEngineering(){
-            if(!this.deepExcavation){
-                return
+            if (this.deepExcavationDetail.deviseDrawing) {
+              this.deepExcavationDetail.deviseDrawing = JSON.parse(
+                this.deepExcavationDetail.deviseDrawing
+              );
+            } else {
+              this.deepExcavationDetail.deviseDrawing = [];
             }
-            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"
+            }
+          ],
+          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);
+    },
+    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"
         },
-        // 初始化数据
-        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()
+        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() {
+      let chart7 = echarts.init(this.$refs["echart7"]);
+      this.chart7 = chart7;
+      chart7.clear();
+      this.option7 = {
+        tooltip: {
+          trigger: "axis"
         },
-        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'
-                    }],
-                    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
-                    }
+        legend: {
+          show: false
+        },
+        grid: {
+          top: "30px",
+          left: "60px",
+          right: "35px",
+          bottom: "30px"
+        },
+        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: this.echartData7.unit,
+          splitLine: {
+            lineStyle: {
+              color: "#F4F5F8",
+              type: "solid"
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            color: "#7F8694"
+          }
+        },
+        axisPointer: {
+          lineStyle: {
+            color: "#F4F5F8",
+            type: "solid",
+            width: "0"
+          }
+        },
+        series: [
+          {
+            // '报警值'
+            name: this.$t("message.deepFoundConfig.alarmNum"),
+            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)"
                 },
                 {
-                    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
-                    }
-                ]
+                  offset: 1,
+                  color: "rgba(58, 123, 255, 0.1)"
+                }
+              ])
+            },
+            lineStyle: {
+              color: "#3A7BFF"
+            },
+            itemStyle: {
+              color: "#3A7BFF"
             }
-            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)
-        },
-        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(){
-            let chart7 = echarts.init(this.$refs['echart7']);
-            this.chart7 = chart7;
-            chart7.clear();
-            this.option7={
-                tooltip: {
-                    trigger: 'axis'
-                },
-                legend: {
-                   show: false
-                },
-                grid:{
-                      top:"30px",
-                      left:"60px",
-                      right:"35px",
-                      bottom:"30px"
-                },
-                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: this.echartData7.unit,
-                    splitLine:{
-                        lineStyle:{
-                            color: "#F4F5F8",
-                            type: "solid"
-                        }
-                    },
-                    axisTick:{
-                        show: false
-                    },
-                    axisLine:{
-                        show: false
-                    },
-                    axisLabel:{
-                        color: '#7F8694'
-                    }
-                },
-                axisPointer:{
-                    lineStyle:{
-                        color: "#F4F5F8",
-                        type: "solid",
-                        width: '0'
-                    },
-                },
-                series: [
-                    {
-                        // '报警值'
-                        name: this.$t('message.deepFoundConfig.alarmNum'),
-                        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){
-            this.visibleDialog = true
-            console.log('当前点击行的值',val)
-            this.relaId = val.id
-            this.checkList = ""
-            // let arr = []
-            // for(let key in JSON.parse(val.dataField)){
-            //     arr.push({
-            //         key,
-            //         keyName: JSON.parse(val.dataField)[key]
-            //     })
+            // 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],
+            //             }
+            //         }
+            //     },
             // }
-            // this.detailData = {
-            //     name: val.monitorTypeName,
-            //     // '否':'是'
-            //     status: val.alarmType == 1 ? this.$t('message.deepFoundConfig.no'):this.$t('message.deepFoundConfig.yes'),
-            //     tableHeader: arr
-            // }
-            // 默认时间 
-            // let nowTime = this.selectNowDate()
-            // this.dateTime = [nowTime.split(' ')[0] + ' ' + '00:00:00',nowTime]
-            // this.queryByIdDeepExcavationMonitorType(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){
-            console.log('当前选择',val)
-            this.selectDeepExcavationCurrentDataList()
-            // measurePointNumber = val
-            // 查询传感器编号列表
-      
-            getSensorListApi({measurePointNumber:val}).then((res)=>{
-                console.log('0000000',res)
-                if(res.code == 200 && res.result){
-                    this.getSensorList = res.result.data.records
-                    console.log('------------',this.getSensorList)
-                }
-                
-            })
-
-
-            
-        },
-        checkDateTime(val){
-            console.log(val)
-            this.selectDeepExcavationCurrentDataList()
+          }
+        ]
+      };
+      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) {
+      this.visibleDialog = true;
+      console.log("当前点击行的值", val);
+      this.relaId = val.id;
+      this.checkList = "";
+      // let arr = []
+      // for(let key in JSON.parse(val.dataField)){
+      //     arr.push({
+      //         key,
+      //         keyName: JSON.parse(val.dataField)[key]
+      //     })
+      // }
+      // this.detailData = {
+      //     name: val.monitorTypeName,
+      //     // '否':'是'
+      //     status: val.alarmType == 1 ? this.$t('message.deepFoundConfig.no'):this.$t('message.deepFoundConfig.yes'),
+      //     tableHeader: arr
+      // }
+      // 默认时间
+      // let nowTime = this.selectNowDate()
+      // this.dateTime = [nowTime.split(' ')[0] + ' ' + '00:00:00',nowTime]
+      // this.queryByIdDeepExcavationMonitorType(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) {
+      console.log("当前选择", val);
+      getSensorListApi({ measurePointNumber: val }).then(res => {
+        if (res.code == 200 && res.result) {
+          this.getSensorList = res.result;
+        }
+      });
+    },
+    getEchartsData(val) {
+      console.log("第二个选择", val);
+      selectDeepExcavationCurrentDataListApi({
+        measurePointNumber: this.checkList,
+        relaId: this.relaId,
+        sensorSn : val,
+        projectSn: this.projectSn,
+        startTime: this.dateTime != null ? this.dateTime[0] : "",
+        endTime: this.dateTime != null ? this.dateTime[1] : "",
+      }).then(res => {
+        // console.log("有数据吗", res);
+        if (res.code == 200 && res.result) {
+          // console.log('下面的数据',res)
+          this.tableData2 = res.result.data.records;
+          this.echartData7 = {
+            xAxis: [],
+            data: []
+          };
+          this.detailData.tableHeader.forEach(item => {
+            if (item.key == "data") {
+              this.echartData7.unit = "(" + item.keyName.split("(")[1];
+            }
+          });
+          res.result.data.records.forEach(item => {
+            this.echartData7.xAxis.push(item.receiveTime.split(" ")[0]);
+            this.echartData7.data.push(item.data);
+          });
+          this.createdEchart7();
+        }
+      });
+    },
+    checkDateTime(val) {
+        if(this.checkList == '' || this.checkList2 == '' ){
+            this.$message({
+          message: '请先选择传感器名称和编号哦！',
+          type: 'warning'
+        });
+        }
+      console.log(val);
+      this.selectDeepExcavationCurrentDataList();
     }
-}
+  }
+};
 </script>
 
 <style lang="less" scoped>
-.monitorData{
+.monitorData {
+  height: 100%;
+  width: 100%;
+  .monitorData-content {
     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;
+    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;
-        }
-        .monitor-title::before{
-            content: "";
+            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;
-            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{
-                            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;
-                }
-            }
+            .point-item {
+              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;
+              }
+            }
+          }
         }
+      }
     }
-    .dialog-box{
-        /deep/.el-dialog{
-            height: 826px;
-            box-sizing: border-box;
-            margin-top: 0 !important;
-            margin-bottom: 0;
-            top: 50%;
-            transform: translateY(-50%);
+    .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;
+              }
+            }
+          }
         }
-        .dialog_content{
-            border: 1px solid #f3f3f3;
-            padding: 0;
-            .top{
-                width: 100%;
-                // height: 205px;
+        .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: 826px;
+      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;
-                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: 653px;
-                .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;
-                        margin-bottom: 20px;
-                        .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: 230px;
-                        }
-                    }
-                    .table-box{
-                        .table-title{
-                            font-weight: bold;
-                            margin-bottom: 12px;
-                        }
-                        .tables{
-                            min-height: 0;
-                        }
-                    }
+                .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: 653px;
+        .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;
+            margin-bottom: 20px;
+            .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: 230px;
+            }
+          }
+          .table-box {
+            .table-title {
+              font-weight: bold;
+              margin-bottom: 12px;
+            }
+            .tables {
+              min-height: 0;
+            }
+          }
+        }
+      }
     }
-    .alarm_status1{
-  padding: 4px 6px;
-  background: #44D7B6;
-  color: #fefefe;
-  border-radius: 3px;
+  }
+  .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;
+  }
 }
-.alarm_status2{
-  padding: 4px 6px;
-  background: #7953F6;
-  color: #fefefe;
-  border-radius: 3px;
-}
-.alarm_status3{
-  padding: 4px 6px;
-  background: #F67F52;
-  color: #fefefe;
-  border-radius: 3px;
-}
-.alarm_status4{
-  padding: 4px 6px;
-  background: #5484F6;
-  color: #fefefe;
-  border-radius: 3px;
-}
-}
-/deep/.el-dialog__title{
+/deep/.el-dialog__title {
   font-weight: bold;
 }
 </style>
\ No newline at end of file