2411 lines
76 KiB
Vue
2411 lines
76 KiB
Vue
<template>
|
||
<div class="monitorData">
|
||
<vue-scroll>
|
||
<div class="monitorData-content">
|
||
<div class="left">
|
||
<div class="monitor-info">
|
||
<div class="monitor-title">
|
||
<!-- 基坑 -->
|
||
<span>{{$t('message.deepFoundConfig.deepFound')}}</span>
|
||
<el-select
|
||
size="medium"
|
||
v-model="deepExcavation"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText2')"
|
||
@change="changeDeepExcavationId"
|
||
>
|
||
<el-option
|
||
v-for="item in deepExcavationList"
|
||
:key="item.id"
|
||
:label="item.engineeringName"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="info-detail">
|
||
<div class="wrap">
|
||
<div class="info-item">
|
||
<!-- 安全等级 -->
|
||
<p>{{$t('message.deepFoundConfig.saveLv')}}：{{$t('message.deepFoundConfig.safeList')[deepExcavationDetail.safetyLevel-1]}}</p>
|
||
<!-- 支护形式 -->
|
||
<p>{{$t('message.deepFoundConfig.shoringType')}}：{{deepExcavationDetail.supportPattern}}</p>
|
||
<!-- 当前开挖深度 -->
|
||
<p>{{$t('message.deepFoundConfig.currentDepth')}}(m)：{{deepExcavationDetail.excavationDepth}}</p>
|
||
</div>
|
||
<div class="info-item">
|
||
<!-- 基坑深度 -->
|
||
<p>{{$t('message.deepFoundConfig.deepFoundDepth')}}(m)：{{deepExcavationDetail.foundationDitchDepth}}</p>
|
||
<!-- 监测负责人 -->
|
||
<p>{{$t('message.deepFoundConfig.monitorDutyPeople')}}：{{deepExcavationDetail.surveyDirector}}</p>
|
||
<!-- 底板浇策时间 -->
|
||
<p>{{$t('message.deepFoundConfig.floorBuildTime')}}：{{deepExcavationDetail.floorPourTime}}</p>
|
||
</div>
|
||
<div class="info-item">
|
||
<!-- 基坑周长 -->
|
||
<p>{{$t('message.deepFoundConfig.deepFoundPerimeter')}}(m)：{{deepExcavationDetail.foundationDitchGirth}}</p>
|
||
<!-- 监测人员 -->
|
||
<p>{{$t('message.deepFoundConfig.monitorPeople')}}：{{deepExcavationDetail.surveyPersonnel}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="info-file">
|
||
<vue-scroll style="height: 100px">
|
||
<div class="file-box">
|
||
<div class="file-item">
|
||
<!-- 监测方案 -->
|
||
{{$t('message.deepFoundConfig.monitorPlan')}}：
|
||
<p
|
||
v-for="(item,index) in deepExcavationDetail.surveyScheme"
|
||
@click="openUrl(item)"
|
||
:title="item.name"
|
||
:key="index"
|
||
style="margin-right: 8px"
|
||
>{{item.name}}</p>
|
||
</div>
|
||
<div class="file-item">
|
||
<!-- 地勘报告 -->
|
||
{{$t('message.deepFoundConfig.geologicalReport')}}：
|
||
<p
|
||
v-for="(item,index) in deepExcavationDetail.prospectingReport"
|
||
@click="openUrl(item)"
|
||
:key="index"
|
||
:title="item.name"
|
||
style="margin-right: 8px"
|
||
>{{item.name}}</p>
|
||
</div>
|
||
<div class="file-item">
|
||
<!-- 基坑设计图纸 -->
|
||
{{$t('message.deepFoundConfig.deepFoundImg')}}：
|
||
<p
|
||
v-for="(item,index) in deepExcavationDetail.deviseDrawing"
|
||
@click="openUrl(item)"
|
||
:key="index"
|
||
:title="item.name"
|
||
style="margin-right: 8px"
|
||
>{{item.name}}</p>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="monitor-map">
|
||
<div class="monitor-title">
|
||
<!-- 项目监测列表 -->
|
||
<span>{{$t('message.deepFoundConfig.projectMonitorList')}}</span>
|
||
<el-select
|
||
size="medium"
|
||
v-model="mapId"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText2')"
|
||
@change="changeMapId"
|
||
>
|
||
<el-option
|
||
v-for="item in mapList"
|
||
:key="item.id"
|
||
:label="item.planeFigureName"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="map-wrap" ref="mapbox">
|
||
<div class="tag-box" v-if="mapUrl">
|
||
<div class="tag-item">
|
||
<span style="background: #44D7B6"></span>
|
||
<!-- 正常 -->
|
||
{{$t('message.deepFoundConfig.normal')}}
|
||
</div>
|
||
<div class="tag-item">
|
||
<span style="background: #F67F52"></span>
|
||
<!-- 超出报警值 -->
|
||
{{$t('message.deepFoundConfig.overAlarmNum')}}
|
||
</div>
|
||
<div class="tag-item" style="margin: 0">
|
||
<span style="background: #FF0000"></span>
|
||
<!-- 超出控制值 -->
|
||
{{$t('message.deepFoundConfig.overControlNum')}}
|
||
</div>
|
||
</div>
|
||
<div class="img-box" v-if="mapUrl">
|
||
<img
|
||
ref="map"
|
||
:style="{'width': mapDate.width + 'px','height': mapDate.height + 'px'}"
|
||
:src="mapUrl"
|
||
/>
|
||
<div class="point-list">
|
||
<div
|
||
class="point-item"
|
||
v-for="(item, index) in pointList"
|
||
:key="index"
|
||
:style="{'left': item.mapX*mapZoom +'px','top': item.mapY*mapZoom + 'px'}"
|
||
>
|
||
<span
|
||
@click="checkMapItem(item)"
|
||
:style="{'background': colorList[item.status]}"
|
||
></span>
|
||
<div
|
||
class="point-info"
|
||
:class="{'left': item.left, 'bottom': item.bottom}"
|
||
v-show="item.isShow"
|
||
>
|
||
<div class="point-title">
|
||
<p>测点编号：{{item.measurePointName }}</p>
|
||
<p>测点名称：{{ item.monitorTypeName}}</p>
|
||
</div>
|
||
<vue-scroll style="height: 200px">
|
||
<div class="point-content">
|
||
<div v-for="(item2,index2) in item.sensorlist" :key="index2">
|
||
<p>传感器编号：{{item2.sensorSn}}</p>
|
||
<p>传感器类型：{{item2.sensorTypeName == null ? '无' : item2.sensorTypeName }}</p>
|
||
<p>采集时间：{{item2.receiveTime == null ? '无' : item2.receiveTime}}</p>
|
||
</div>
|
||
<!-- 检测类型 -->
|
||
<!-- <p>{{$t('message.deepFoundConfig.detectionType')}}：{{item.monitorTypeName}}</p>
|
||
<p
|
||
v-for="(item2,index2) in item.pointData"
|
||
:key="index2"
|
||
>{{item2.label}}：{{item2.value}}</p>-->
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else style="text-align: center;padding-top: 80px">
|
||
<img src="@/assets/images/noData2.png" />
|
||
<!-- 暂无数据 -->
|
||
<span
|
||
style="display: block;margin-top: 20px"
|
||
>{{$t('message.deepFoundConfig.noData')}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="swiper-box">
|
||
<el-carousel
|
||
class="swiper-wrap"
|
||
trigger="click"
|
||
indicator-position="none"
|
||
arrow="always"
|
||
:autoplay="false"
|
||
height="321px"
|
||
>
|
||
<el-carousel-item>
|
||
<div class="monitor-title">
|
||
<!-- 告警信息 -->
|
||
<span>{{$t('message.deepFoundConfig.alarmInfo')}}</span>
|
||
<div class="nav-list">
|
||
<div
|
||
class="nav-item"
|
||
:class="{'active': searchDate == 1}"
|
||
@click="checkDate(1)"
|
||
>
|
||
<!-- 近7天 -->
|
||
{{$t('message.deepFoundConfig.near7Day')}}
|
||
</div>
|
||
<div
|
||
class="nav-item"
|
||
:class="{'active': searchDate == 2}"
|
||
@click="checkDate(2)"
|
||
>
|
||
<!-- 30天 -->
|
||
{{$t('message.deepFoundConfig.near30Day')}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="echart-wrap">
|
||
<div id="echart" ref="echart"></div>
|
||
<div class="echart-legend">
|
||
<div class="legend-item" v-for="(item,index) in echartData" :key="index">
|
||
<span :style="{'background': colorList2[index]}"></span>
|
||
{{item.name}}: {{item.value}}{{$t('message.deepFoundConfig.unit')}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
<el-carousel-item>
|
||
<div class="monitor-title">
|
||
<!-- 监测情况统计 -->
|
||
<span>{{$t('message.deepFoundConfig.monitorCaseStatistics')}}</span>
|
||
</div>
|
||
<div class="echart-statistics">
|
||
<div class="echart-wrap">
|
||
<div id="echart3" ref="echart3"></div>
|
||
</div>
|
||
<!-- <div class="echart-wrap">
|
||
<div id="echart4" ref="echart4"></div>
|
||
</div>-->
|
||
</div>
|
||
</el-carousel-item>
|
||
<el-carousel-item>
|
||
<div class="monitor-title">
|
||
<!-- 监测项目数 -->
|
||
<span>{{$t('message.deepFoundConfig.monitorProjectNum')}}</span>
|
||
</div>
|
||
<div class="echart-wrap">
|
||
<div id="echart2" ref="echart2"></div>
|
||
<div class="echart-legend" :class="{'flex-w': echartData2.length>7}">
|
||
<div class="legend-item" v-for="(item,index) in echartData2" :key="index">
|
||
<span :style="{'background': colorList4[index]}"></span>
|
||
{{item.name}}: {{item.value}}{{$t('message.deepFoundConfig.unit')}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
<div class="monitor-table">
|
||
<div class="monitor-title">
|
||
<!-- 项目监测列表 -->
|
||
{{$t('message.deepFoundConfig.projectMonitorList')}}
|
||
</div>
|
||
<div class="table-box">
|
||
<el-table class="tables" height="496" :data="tableData">
|
||
<!-- 监测项目 -->
|
||
<el-table-column :label="$t('message.deepFoundConfig.monitorProject')">
|
||
<template slot-scope="scope">
|
||
<span class="name" @click="showDetail(scope.row)">{{scope.row.monitorTypeName}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 警情 -->
|
||
<el-table-column
|
||
:label="$t('message.deepFoundConfig.sirens')"
|
||
align="center"
|
||
width="80"
|
||
>
|
||
<template slot-scope="scope">
|
||
<!-- '报警':'正常' -->
|
||
<span>{{scope.row.alarmType == 1? $t('message.deepFoundConfig.alarm'):$t('message.deepFoundConfig.normal')}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 测点总数 -->
|
||
<el-table-column
|
||
prop="measurePointNum"
|
||
:label="$t('message.deepFoundConfig.pointCount')"
|
||
align="center"
|
||
width="120"
|
||
></el-table-column>
|
||
<!-- 近七天超控制数 -->
|
||
<!-- <el-table-column
|
||
prop="superControlNumber"
|
||
width="130"
|
||
label="近七天超控制数"
|
||
align="center"
|
||
></el-table-column> -->
|
||
<!-- 近七天超报警数 -->
|
||
<el-table-column prop="superAlarmNumber" label="近七天超报警数" width="140" align="center"></el-table-column>
|
||
<!-- 近7天超速率数 -->
|
||
<el-table-column prop="rateAlarmNumber" width="140" align="center" label="近7天超速率数"></el-table-column>
|
||
</el-table>
|
||
<!-- <el-pagination
|
||
class="pagerBox"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="total"
|
||
background
|
||
></el-pagination>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 项目监测详情 -->
|
||
<el-dialog
|
||
width="95%"
|
||
class="dialog-box"
|
||
:title="$t('message.deepFoundConfig.projectMonitorDetail')"
|
||
:modal-append-to-body="false"
|
||
:visible.sync="visibleDialog"
|
||
>
|
||
<div class="dialog_content">
|
||
<div class="top">
|
||
<div class="detail_box">
|
||
<div class="detail-info">
|
||
<!-- 监测项目 -->
|
||
<span>{{$t('message.deepFoundConfig.monitorProject')}}：{{detailData.name}}</span>
|
||
<!-- 测点 -->
|
||
<span>{{$t('message.deepFoundConfig.point')}}：{{detailData.point ? detailData.point:'- -'}}</span>
|
||
<!-- 是否达标 -->
|
||
<span>{{$t('message.deepFoundConfig.isStandards')}}：{{detailData.status}}</span>
|
||
<!-- 监测频率要求：1次/1天 -->
|
||
<span>{{$t('message.deepFoundConfig.monitorFrequency')}}</span>
|
||
</div>
|
||
<!-- <div class="detail-grid">
|
||
<div class="grid-title">监测控制标：</div>
|
||
<div class="detail-table">
|
||
<div class="grid-item">
|
||
<div class="grid-header">变化速率</div>
|
||
<div class="grid-conetent">
|
||
<div class="content">
|
||
<span>预警值</span>
|
||
<span>23</span>
|
||
</div>
|
||
<div class="content">
|
||
<span>报警值</span>
|
||
<span>32</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid-item">
|
||
<div class="grid-header">累计绝对值</div>
|
||
<div class="grid-conetent">
|
||
<div class="content">
|
||
<span>预警值</span>
|
||
<span>23</span>
|
||
</div>
|
||
<div class="content">
|
||
<span>报警值</span>
|
||
<span>32</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>-->
|
||
</div>
|
||
<!-- <div class="detail-meter">
|
||
<div class="meter-item">
|
||
<div class="meter-label">
|
||
最新测点累计变化最大值：
|
||
<p>AD光电式引张线仪</p>
|
||
</div>
|
||
<div id="echart5" ref="echart5"></div>
|
||
</div>
|
||
<div class="meter-item">
|
||
<div class="meter-label">
|
||
最新测点累计变化速率最大值：
|
||
<p>ZD水位计</p>
|
||
</div>
|
||
<div id="echart6" ref="echart6"></div>
|
||
</div>
|
||
</div>-->
|
||
</div>
|
||
<div class="bottom">
|
||
<vue-scroll>
|
||
<div class="bottom-wrap">
|
||
<div class="search-box">
|
||
<div class="left-nav">
|
||
<!-- <div class="nav-item"
|
||
:class="{'active': type == item.id}"
|
||
v-for="(item,index) in navList"
|
||
:key="index"
|
||
@click="checkType(item)">
|
||
{{item.name}}
|
||
</div>-->
|
||
</div>
|
||
<div class="right-form">
|
||
<div class="form-item">
|
||
<!-- 测点名称 -->
|
||
<span>{{$t('message.deepFoundConfig.pointName')}}：</span>
|
||
<el-select
|
||
v-model="checkList"
|
||
size="small"
|
||
@change="checkNum"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.id"
|
||
:label="item.measurePointName"
|
||
:value="item.measurePointNumber"
|
||
></el-option>
|
||
</el-select>
|
||
<span style="margin-left:15px">传感器编号：</span>
|
||
<el-select
|
||
v-model="checkList2"
|
||
size="small"
|
||
@change="getEchartsData"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in getSensorList"
|
||
:key="item.id"
|
||
:label="item.sensorSn"
|
||
:value="item.sensorSn"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="form-item">
|
||
<!-- 选择日期 -->
|
||
<span>{{$t('message.deepFoundConfig.changeTime')}}：</span>
|
||
<el-date-picker
|
||
size="small"
|
||
v-model="dateTime"
|
||
type="datetimerange"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
:range-separator="$t('message.deepFoundConfig.to')"
|
||
:start-placeholder="$t('message.deepFoundConfig.startTime')"
|
||
:end-placeholder="$t('message.deepFoundConfig.endTime')"
|
||
@change="checkDateTime"
|
||
></el-date-picker>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="tableData2.length != 0" class="echart-box">
|
||
<div class="echart-title">
|
||
<!-- 曲线分析(累计变化) -->
|
||
{{$t('message.deepFoundConfig.echartTitle')}}
|
||
</div>
|
||
<div id="echart7" ref="echart7"></div>
|
||
</div>
|
||
<div v-else style="text-align: center;padding-top: 80px">
|
||
<img src="@/assets/images/noData2.png" />
|
||
<!-- 暂无数据 -->
|
||
<span
|
||
style="display: block;margin-top: 20px"
|
||
>{{$t('message.deepFoundConfig.noData')}}</span>
|
||
</div>
|
||
<div class="table-box">
|
||
<div class="table-title">
|
||
<!-- 数据列表 -->
|
||
{{$t('message.deepFoundConfig.tableList')}}
|
||
</div>
|
||
<el-table class="tables" height="330" :data="tableData2">
|
||
<!-- 测点编号 -->
|
||
<el-table-column
|
||
prop="measurePointNumber"
|
||
:label="$t('message.deepFoundConfig.pointNo')"
|
||
></el-table-column>
|
||
<el-table-column prop="sensorSn" label="传感器编号"></el-table-column>
|
||
<el-table-column prop="fiducialValue" label="初始值" align="center" width="100"></el-table-column>
|
||
<!-- 采集时间 -->
|
||
<el-table-column
|
||
width="220"
|
||
align="center"
|
||
prop="receiveTime"
|
||
:label="$t('message.deepFoundConfig.gatherTime')"
|
||
></el-table-column>
|
||
<el-table-column prop="lastTimeData" label="上次值"></el-table-column>
|
||
<el-table-column prop="data" label="本次值">
|
||
<template slot-scope="scope">{{scope.row.data + scope.row.unit}}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="dataThis" label="本次变化量">
|
||
<template slot-scope="scope">{{scope.row.dataThis + scope.row.unit}}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="dataTotal" label="累计值">
|
||
<template slot-scope="scope">{{scope.row.dataTotal + scope.row.unit}}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="alarmValue" label="累计预警值" align="center"></el-table-column>
|
||
<el-table-column prop="dataRate" label="变化速率" align="center"></el-table-column>
|
||
<el-table-column prop="rateAlarmValue" label="变化速率预警值" align="center"></el-table-column>
|
||
<!-- <el-table-column prop="data" label="值">
|
||
<template slot-scope="scope">{{scope.row.data + scope.row.unit}}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="measurePointName"
|
||
:label="$t('message.deepFoundConfig.pointName')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
v-for="(item,index) in detailData.tableHeader"
|
||
:key="index"
|
||
:prop="item.key"
|
||
:label="item.keyName"
|
||
></el-table-column> -->
|
||
<!-- 报警状态 -->
|
||
<el-table-column :label="$t('message.deepFoundConfig.alarmStatus')">
|
||
<template slot-scope="scope">
|
||
<!-- <span :class="{'alarm_status1': scope.row.alarmState == '0',
|
||
'alarm_status2': scope.row.alarmState == 1,
|
||
'alarm_status3': scope.row.alarmState == 2,
|
||
'alarm_status4': scope.row.alarmState == 3}">
|
||
"正常" "报警" "预警" "控制"
|
||
{{ scope.row.alarmState == '0' ? $t('message.deepFoundConfig.normal'): scope.row.alarmState == 2
|
||
? $t('message.deepFoundConfig.alarm'):scope.row.alarmState == 1
|
||
? $t('message.deepFoundConfig.warning'):scope.row.alarmState == 3
|
||
? $t('message.deepFoundConfig.control'):""}}</span>-->
|
||
<span
|
||
:class="{'alarm_status1': scope.row.alarmState == 1,
|
||
'alarm_status2': scope.row.alarmState == 2,
|
||
'alarm_status3': scope.row.alarmState == 3,
|
||
'alarm_status4': scope.row.alarmState == 4}"
|
||
>
|
||
{{scope.row.alarmState == 1 ? '正常': scope.row.alarmState == 2
|
||
? '超报警' :scope.row.alarmState == 3
|
||
? '超控制':scope.row.alarmState == 4
|
||
? '变化速率报警':""}}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<el-pagination
|
||
class="pager"
|
||
@size-change="handleSizeChange1"
|
||
@current-change="handleCurrentChange1"
|
||
:current-page="pageNo1"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageSize1"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="total1"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</vue-scroll>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from "echarts4";
|
||
import {
|
||
queryByIdDeepExcavationEngineeringApi,
|
||
selectDeepExcavationListApi,
|
||
selectMonitorTypeAlarmCountListApi,
|
||
getDefaultMonitorTypeListApi,
|
||
selectDeepExcavationMonitorTypeListApi,
|
||
selectMeasurePointListApi,
|
||
selectMonitorTypeCountApi,
|
||
selectDeepExcavationSensorTypeListApi,
|
||
selectDeepExcavationCurrentDataListApi,
|
||
selectDeepExcavationCurrentDataApi,
|
||
selectDeepExcavationPlaneFigureListApi,
|
||
selectDeepExcavationPlaneFigureCoordinateApi,
|
||
selectDeepExcavationAllMeasurePointListApi,
|
||
queryByIdDeepExcavationMonitorTypeApi,
|
||
selectMonitorTypeListApi,
|
||
getSensorListApi
|
||
} from "@/assets/js/api/deepFoundationPitManage.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
detailData: {
|
||
name: "",
|
||
point: "",
|
||
status: "",
|
||
tableHeader: []
|
||
},
|
||
mapUrl: "",
|
||
mapList: [],
|
||
mapId: "",
|
||
safeList: ["一级", "二级", "三级", "四级", "五级", "六级"],
|
||
deepExcavation: "", //基坑id
|
||
monitorTypeId: "", //监测内容id
|
||
relaId: "",
|
||
colorList: ["#44D7B6", "#44D7B6", "#F67F52", "#FF0000"],
|
||
colorList2: ["#7953F6", "#F67F52",'#61a0a8'],
|
||
colorList3: ["#44D7B6", "#5484F6"],
|
||
colorList4: [
|
||
"#44D7B6",
|
||
"#F67F52",
|
||
"#FF0000",
|
||
"#7953F6",
|
||
"#5484F6",
|
||
"#FFB6C1",
|
||
"#DC143C",
|
||
"#9400D3",
|
||
"#7B68EE",
|
||
"#4169E1",
|
||
"#1E90FF",
|
||
"#FFD700",
|
||
"#FF4500"
|
||
],
|
||
deepExcavationList: [],
|
||
chart1: Object,
|
||
option1: {},
|
||
echartData: [
|
||
{ value: 0, name: "超出报警值" },
|
||
{ value: 0, name: "超出速率值" }
|
||
],
|
||
chart2: Object,
|
||
option2: {},
|
||
echartData2: [{ value: 0, name: "监测项" }],
|
||
chart3: Object,
|
||
option3: {},
|
||
echartData3: [
|
||
{ value: 0, name: "监测项目总数" }
|
||
// {value: 6, name: '无监测'},
|
||
],
|
||
chart4: Object,
|
||
option4: {},
|
||
echartData4: [
|
||
{ value: 0, name: "自动" },
|
||
{ value: 0, name: "人工" }
|
||
],
|
||
tableData: [],
|
||
chart5: Object,
|
||
option5: {},
|
||
chart6: Object,
|
||
option6: {},
|
||
chart7: Object,
|
||
option7: {},
|
||
pageNo1: 1,
|
||
pageSize1: 10,
|
||
total1: 0,
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
visibleDialog: false,
|
||
navList: [
|
||
{
|
||
name: "全部",
|
||
id: 1
|
||
},
|
||
{
|
||
name: "预报警测点",
|
||
id: 2
|
||
},
|
||
{
|
||
name: "最大值测点",
|
||
id: 3
|
||
},
|
||
{
|
||
name: "人工",
|
||
id: 4
|
||
},
|
||
{
|
||
name: "自动",
|
||
id: 5
|
||
}
|
||
],
|
||
options: [],
|
||
getSensorList: [], // 传感器列表
|
||
checkList: "",
|
||
checkList2: "",
|
||
firstSelect: "",
|
||
dateTime: [],
|
||
searchDate: 1,
|
||
pointList: [],
|
||
mapDate: {
|
||
width: "",
|
||
height: ""
|
||
},
|
||
type: 1,
|
||
projectSn: "",
|
||
deepExcavationDetail: {},
|
||
mapZoom: 1,
|
||
echartDataTotal: 0,
|
||
echartData3Total: 0,
|
||
echart2Total: 0,
|
||
tableData2: [],
|
||
echartData7: {
|
||
xAxis: [],
|
||
data: [],
|
||
},
|
||
unit:'mm',//单位
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.selectDeepExcavationList();
|
||
},
|
||
mounted() {
|
||
this.createdEchart1();
|
||
// this.createdEchart2()
|
||
// this.createdEchart3()
|
||
// this.createdEchart4()
|
||
// this.getNaturalSize()
|
||
console.dir(this.$refs["map"]);
|
||
// console.log(this.getNaturalSize())
|
||
// this.createdEchart5()
|
||
},
|
||
methods: {
|
||
// 查询实时数据
|
||
selectDeepExcavationCurrentDataList(val) {
|
||
console.log('默认第一次带sn了吗',this.checkList2)
|
||
selectDeepExcavationCurrentDataListApi({
|
||
measurePointNumber: this.checkList,
|
||
relaId: this.relaId,
|
||
projectSn: this.projectSn,
|
||
sensorSn: val ,
|
||
startTime: this.dateTime != null ? this.dateTime[0] : "",
|
||
endTime: this.dateTime != null ? this.dateTime[1] : "",
|
||
pageNo:this.pageNo1,
|
||
pageSize:this.pageSize1,
|
||
}).then(res => {
|
||
this.unit = res.result.unit;
|
||
console.log("默认第一次进来的时候单位", this.unit)
|
||
if (res.code == 200 && res.result) {
|
||
this.total1 = res.result.data.total
|
||
this.tableData2 = res.result.data.records;
|
||
this.echartData7 = {
|
||
xAxis: [],
|
||
data: []
|
||
};
|
||
res.result.data.records.forEach(item => {
|
||
this.echartData7.xAxis.unshift(item.receiveTime);
|
||
this.echartData7.data.unshift(item.data);
|
||
});
|
||
this.$nextTick(() => {
|
||
this.createdEchart7();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 列表查询测点
|
||
selectDeepExcavationAllMeasurePointList() {
|
||
selectDeepExcavationAllMeasurePointListApi({
|
||
deepExcavationId: this.deepExcavation,
|
||
relaId: this.relaId
|
||
}).then(res => {
|
||
console.log("查询到测点名称", res);
|
||
if (res.code == 200 && res.result) {
|
||
this.options = res.result;
|
||
let arr = [];
|
||
res.result.forEach(item => {
|
||
arr.push(item.measurePointName);
|
||
});
|
||
this.detailData.point = arr.join("，");
|
||
console.log("this.detailData.point", this.detailData.point);
|
||
// 第一次进入默认选择第一个
|
||
if (res.result.length > 0) {
|
||
this.checkList = res.result[0].measurePointNumber;
|
||
this.checkNum(this.checkList);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 查询传感器编号列表
|
||
selectDeepExcavationAllgetSensorList() {
|
||
let data = {};
|
||
getSensorListApi(data).then(res => {
|
||
console.log("0000000", res);
|
||
});
|
||
},
|
||
|
||
// 根据id查询基坑内容详情
|
||
queryByIdDeepExcavationMonitorType(val) {
|
||
console.log(val);
|
||
queryByIdDeepExcavationMonitorTypeApi({
|
||
id: val
|
||
}).then(res => {
|
||
console.log(res);
|
||
});
|
||
},
|
||
//查询监测内容近七天报警 预警数
|
||
selectMonitorTypeList() {
|
||
selectMonitorTypeListApi({
|
||
deepExcavationId: this.deepExcavation,
|
||
projectSn: this.projectSn
|
||
}).then(res => {
|
||
console.log(res, "查询监测内容近七天报警 预警数");
|
||
if (res.code == 200 && res.result) {
|
||
this.tableData = res.result;
|
||
}
|
||
});
|
||
},
|
||
// 查询测点统计
|
||
selectMonitorTypeCount() {
|
||
if (!this.deepExcavation) {
|
||
this.createdEchart2();
|
||
return;
|
||
}
|
||
selectMonitorTypeCountApi({
|
||
deepExcavationId: this.deepExcavation,
|
||
projectSn: this.projectSn
|
||
}).then(res => {
|
||
console.log(res);
|
||
res.result.list.forEach(item => {
|
||
item.name = item.monitorTypeName;
|
||
item.value = item.measurePointNum;
|
||
});
|
||
this.echartData2 = res.result.list;
|
||
this.echart2Total = res.result.totalPointNum;
|
||
this.createdEchart2();
|
||
});
|
||
},
|
||
// 查询监测内容
|
||
selectDeepExcavationMonitorTypeList() {
|
||
if (!this.deepExcavation) {
|
||
this.echartData3Total = 0;
|
||
this.createdEchart3();
|
||
return;
|
||
}
|
||
selectDeepExcavationMonitorTypeListApi({
|
||
deepExcavationId: this.deepExcavation,
|
||
projectSn: this.projectSn,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize
|
||
}).then(res => {
|
||
console.log(res.result, "监测内容");
|
||
if (res.code == 200 && res.result) {
|
||
this.echartData3Total = res.result.total;
|
||
// this.tableData = res.result.records
|
||
this.createdEchart3();
|
||
}
|
||
});
|
||
},
|
||
// 查询告警数
|
||
selectMonitorTypeAlarmCountList() {
|
||
selectMonitorTypeAlarmCountListApi({
|
||
deepExcavationId: this.deepExcavation,
|
||
projectSn: this.projectSn,
|
||
searchType: this.searchDate
|
||
}).then(res => {
|
||
console.log("告警数统计222222222",res);
|
||
if (res.code == 200 && res.result) {
|
||
this.echartData[0].value = 0;
|
||
this.echartData[1].value = 0;
|
||
res.result.forEach(item => {
|
||
this.echartData[0].value += item.superAlarmNumber; // 超报警
|
||
this.echartData[1].value += item.rateAlarmNumber; // 超速率
|
||
});
|
||
this.echartDataTotal =
|
||
this.echartData[0].value +
|
||
this.echartData[1].value;
|
||
}
|
||
this.createdEchart1();
|
||
});
|
||
},
|
||
// 查询点位信息
|
||
selectDeepExcavationPlaneFigureCoordinate() {
|
||
selectDeepExcavationPlaneFigureCoordinateApi({
|
||
deepExcavationId: this.deepExcavation,
|
||
planeFigureId: this.mapId
|
||
}).then(res => {
|
||
console.log(res.result, "点位配置信息");
|
||
if (res.code == 200 && res.result) {
|
||
res.result.forEach(item => {
|
||
item.isShow = false;
|
||
// item.status = item.currentdata.alarmState
|
||
// ? item.currentdata.alarmState
|
||
// : 0;
|
||
item.pointName = item.measurePointName;
|
||
// item.dataCreateTime = item.currentdata.receiveTime;
|
||
// let obj = JSON.parse(item.dataField);
|
||
let arr = [];
|
||
// for (let key in obj) {
|
||
// arr.push({
|
||
// value: item.currentdata[key],
|
||
// label: obj[key]
|
||
// });
|
||
// }
|
||
item.pointData = arr;
|
||
});
|
||
this.pointList = res.result;
|
||
// console.log('左边的下面',this.pointList)
|
||
}
|
||
});
|
||
},
|
||
// 查询平面图点位
|
||
changeMapId(val) {
|
||
this.mapId = val;
|
||
this.mapList.forEach(item => {
|
||
if (item.id == val) {
|
||
this.mapUrl = item.imageUrl;
|
||
this.getNaturalSize();
|
||
}
|
||
});
|
||
this.selectDeepExcavationPlaneFigureCoordinate();
|
||
},
|
||
// 查询平面图列表
|
||
selectDeepExcavationPlaneFigureList() {
|
||
selectDeepExcavationPlaneFigureListApi({
|
||
deepExcavationId: this.deepExcavation,
|
||
projectSn: this.projectSn
|
||
}).then(res => {
|
||
console.log("平面图列表", res.result);
|
||
if (res.code == 200 && res.result) {
|
||
this.mapList = res.result;
|
||
this.mapId = "";
|
||
this.mapUrl = "";
|
||
if (res.result.length > 0) {
|
||
this.mapId = res.result[0].id;
|
||
this.mapUrl = res.result[0].imageUrl;
|
||
this.getNaturalSize();
|
||
this.selectDeepExcavationPlaneFigureCoordinate();
|
||
} else {
|
||
this.pointList = [];
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 下载文件
|
||
openUrl(val) {
|
||
console.log(val);
|
||
if (val.url) {
|
||
window.open(val.url);
|
||
}
|
||
},
|
||
// 查询基坑详情
|
||
queryByIdDeepExcavationEngineering() {
|
||
if (!this.deepExcavation) {
|
||
return;
|
||
}
|
||
queryByIdDeepExcavationEngineeringApi({ id: this.deepExcavation }).then(
|
||
res => {
|
||
console.log(res.result, "基坑工程详情");
|
||
if (res.result && res.code == 200) {
|
||
this.deepExcavationDetail = res.result;
|
||
if (this.deepExcavationDetail.surveyScheme) {
|
||
this.deepExcavationDetail.surveyScheme = JSON.parse(
|
||
this.deepExcavationDetail.surveyScheme
|
||
);
|
||
} else {
|
||
this.deepExcavationDetail.surveyScheme = [];
|
||
}
|
||
if (this.deepExcavationDetail.prospectingReport) {
|
||
this.deepExcavationDetail.prospectingReport = JSON.parse(
|
||
this.deepExcavationDetail.prospectingReport
|
||
);
|
||
} else {
|
||
this.deepExcavationDetail.prospectingReport = [];
|
||
}
|
||
if (this.deepExcavationDetail.deviseDrawing) {
|
||
this.deepExcavationDetail.deviseDrawing = JSON.parse(
|
||
this.deepExcavationDetail.deviseDrawing
|
||
);
|
||
} else {
|
||
this.deepExcavationDetail.deviseDrawing = [];
|
||
}
|
||
}
|
||
}
|
||
);
|
||
},
|
||
// 初始化数据
|
||
initData() {
|
||
this.queryByIdDeepExcavationEngineering();
|
||
this.selectDeepExcavationPlaneFigureList();
|
||
this.selectMonitorTypeAlarmCountList();
|
||
this.selectDeepExcavationMonitorTypeList();
|
||
this.selectMonitorTypeCount();
|
||
this.selectMonitorTypeList();
|
||
},
|
||
// 切换基坑
|
||
changeDeepExcavationId(val) {
|
||
console.log(val);
|
||
this.deepExcavation = val;
|
||
this.initData();
|
||
},
|
||
// 查询所有基坑
|
||
selectDeepExcavationList() {
|
||
selectDeepExcavationListApi({ projectSn: this.projectSn }).then(res => {
|
||
console.log(res.result, "基坑工程列表");
|
||
if (res.code == 200 && res.result) {
|
||
this.deepExcavationList = res.result;
|
||
if (res.result.length > 0) {
|
||
this.deepExcavation = res.result[0].id;
|
||
}
|
||
this.initData();
|
||
}
|
||
});
|
||
},
|
||
createdEchart1() {
|
||
// console.log(this.$refs['echart'])
|
||
let chart1 = echarts.init(this.$refs["echart"]);
|
||
this.chart1 = chart1;
|
||
chart1.clear();
|
||
this.option1 = {
|
||
grid: {
|
||
// top: 0,
|
||
right: 0
|
||
},
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
legend: {
|
||
show: false,
|
||
orient: "vertical",
|
||
top: "center",
|
||
right: "0",
|
||
itemGap: 30,
|
||
selectedMode: false,
|
||
textStyle: {
|
||
fontSize: 16
|
||
},
|
||
data: [
|
||
// {
|
||
// // 超出控制值
|
||
// name: this.$t("message.deepFoundConfig.overControlNum"),
|
||
// icon: "circle"
|
||
// },
|
||
{
|
||
// 超出报警值
|
||
name: this.$t("message.deepFoundConfig.overAlarmNum"),
|
||
icon: "circle"
|
||
},
|
||
{
|
||
// 超出速率值
|
||
name: "超出速率值",
|
||
icon: "circle"
|
||
}
|
||
],
|
||
formatter: name => {
|
||
let value = 0;
|
||
this.echartData.forEach(item => {
|
||
if (name == item.name) {
|
||
value = item.value;
|
||
}
|
||
});
|
||
// 个
|
||
return (
|
||
name + "：" + value + this.$t("message.deepFoundConfig.unit")
|
||
);
|
||
}
|
||
// show: false
|
||
},
|
||
graphic: [
|
||
{
|
||
type: "text",
|
||
left: "center",
|
||
top: "40%",
|
||
style: {
|
||
text: this.echartDataTotal,
|
||
textAlign: "center",
|
||
fill: "#000",
|
||
fontSize: 36
|
||
}
|
||
},
|
||
{
|
||
type: "text",
|
||
left: "center",
|
||
top: "60%",
|
||
style: {
|
||
// 风险总数
|
||
text: this.$t("message.deepFoundConfig.alarmCount"),
|
||
textAlign: "center",
|
||
fill: "#999",
|
||
fontSize: 16
|
||
}
|
||
}
|
||
],
|
||
color: this.colorList2,
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["55%", "70%"],
|
||
// center:['100','50%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: "16",
|
||
color: "#fff"
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.echartData
|
||
}
|
||
]
|
||
};
|
||
chart1.setOption(this.option1);
|
||
},
|
||
createdEchart2() {
|
||
// console.log(this.$refs['echart2'])
|
||
let chart2 = echarts.init(this.$refs["echart2"]);
|
||
this.chart2 = chart2;
|
||
chart2.clear();
|
||
this.option2 = {
|
||
grid: {
|
||
top: "0px",
|
||
left: "0px",
|
||
right: "0px",
|
||
bottom: "0px"
|
||
},
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
legend: {
|
||
show: false,
|
||
orient: "vertical",
|
||
top: "center",
|
||
right: "0",
|
||
itemGap: 30,
|
||
selectedMode: false,
|
||
textStyle: {
|
||
fontSize: 16
|
||
},
|
||
data: [
|
||
{
|
||
// 水位监测
|
||
name: this.$t("message.deepFoundConfig.waterMonitor"),
|
||
icon: "circle"
|
||
},
|
||
{
|
||
// '沉降监测'
|
||
name: this.$t("message.deepFoundConfig.settlingMonitor"),
|
||
icon: "circle"
|
||
}
|
||
],
|
||
formatter: name => {
|
||
let value = 0;
|
||
this.echartData2.forEach(item => {
|
||
if (name == item.name) {
|
||
value = item.value;
|
||
}
|
||
});
|
||
return name + "：" + value;
|
||
}
|
||
// show: false
|
||
},
|
||
graphic: [
|
||
{
|
||
type: "text",
|
||
left: "center",
|
||
top: "38%",
|
||
style: {
|
||
text: this.echart2Total,
|
||
textAlign: "center",
|
||
fill: "#000",
|
||
fontSize: 40
|
||
}
|
||
},
|
||
{
|
||
type: "text",
|
||
left: "center",
|
||
top: "60%",
|
||
style: {
|
||
// 测点总数
|
||
text: this.$t("message.deepFoundConfig.pointCount"),
|
||
textAlign: "center",
|
||
fill: "#999",
|
||
fontSize: 16
|
||
}
|
||
}
|
||
],
|
||
color: this.colorList4,
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["55%", "70%"],
|
||
// center:['100','50%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: "16",
|
||
color: "#fff"
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.echartData2
|
||
}
|
||
]
|
||
};
|
||
chart2.setOption(this.option2);
|
||
},
|
||
createdEchart3() {
|
||
// console.log(this.$refs['echart3'])
|
||
let chart3 = echarts.init(this.$refs["echart3"]);
|
||
this.chart3 = chart3;
|
||
chart3.clear();
|
||
this.option3 = {
|
||
grid: {
|
||
top: "0px",
|
||
left: "0px",
|
||
right: "0px",
|
||
bottom: "0px"
|
||
},
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
legend: {
|
||
show: false,
|
||
orient: "horizontal",
|
||
bottom: "0",
|
||
left: "center",
|
||
itemGap: 30,
|
||
selectedMode: false,
|
||
textStyle: {
|
||
fontSize: 16
|
||
},
|
||
data: [
|
||
// {
|
||
// name: '测点数',
|
||
// icon: 'circle'
|
||
// },
|
||
{
|
||
// '监测项目总数'
|
||
name: this.$t("message.deepFoundConfig.monitorProjectCount"),
|
||
icon: "circle"
|
||
}
|
||
]
|
||
// show: false
|
||
},
|
||
graphic: [
|
||
{
|
||
type: "text",
|
||
left: "center",
|
||
top: "70",
|
||
style: {
|
||
text: this.echartData3Total,
|
||
textAlign: "center",
|
||
fill: "#000",
|
||
fontSize: 40
|
||
}
|
||
},
|
||
{
|
||
type: "text",
|
||
left: "center",
|
||
top: "120",
|
||
style: {
|
||
// '监测项目总数'
|
||
text: this.$t("message.deepFoundConfig.monitorProjectCount"),
|
||
textAlign: "center",
|
||
fill: "#999",
|
||
fontSize: 16
|
||
}
|
||
}
|
||
],
|
||
color: this.colorList3,
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["55%", "70%"],
|
||
center: ["50%", "100"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: "16",
|
||
color: "#fff"
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.echartData3
|
||
}
|
||
]
|
||
};
|
||
chart3.setOption(this.option3);
|
||
},
|
||
createdEchart4() {
|
||
// console.log(this.$refs['echart4'])
|
||
let chart4 = echarts.init(this.$refs["echart4"]);
|
||
this.chart4 = chart4;
|
||
chart4.clear();
|
||
this.option4 = {
|
||
grid: {
|
||
top: "0px",
|
||
left: "0px",
|
||
right: "0px",
|
||
bottom: "0px"
|
||
},
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
legend: {
|
||
orient: "horizontal",
|
||
bottom: "0",
|
||
left: "center",
|
||
itemGap: 30,
|
||
selectedMode: false,
|
||
textStyle: {
|
||
fontSize: 16
|
||
},
|
||
data: [
|
||
{
|
||
// '自动'
|
||
name: this.$t("message.deepFoundConfig.auto"),
|
||
icon: "circle"
|
||
},
|
||
{
|
||
// '人工'
|
||
name: this.$t("message.deepFoundConfig.labour"),
|
||
icon: "circle"
|
||
}
|
||
]
|
||
// show: false
|
||
},
|
||
graphic: [
|
||
{
|
||
type: "text",
|
||
left: "center",
|
||
top: "70",
|
||
style: {
|
||
text: "16",
|
||
textAlign: "center",
|
||
fill: "#000",
|
||
fontSize: 40
|
||
}
|
||
},
|
||
{
|
||
type: "text",
|
||
left: "center",
|
||
top: "120",
|
||
style: {
|
||
// 自动监测点
|
||
text: this.$t("message.deepFoundConfig.autoMonitorPoint"),
|
||
textAlign: "center",
|
||
fill: "#999",
|
||
fontSize: 16
|
||
}
|
||
}
|
||
],
|
||
color: this.colorList2,
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["55%", "70%"],
|
||
center: ["50%", "100"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: "16",
|
||
color: "#fff"
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.echartData4
|
||
}
|
||
]
|
||
};
|
||
chart4.setOption(this.option4);
|
||
},
|
||
// handleSizeChange(val) {
|
||
// this.pageSize = val;
|
||
// this.selectDeepExcavationMonitorTypeList()
|
||
// console.log(val);
|
||
// },
|
||
// handleCurrentChange(val) {
|
||
// this.pageNo = val;
|
||
// this.selectDeepExcavationMonitorTypeList()
|
||
// console.log(val);
|
||
// },
|
||
handleSizeChange1(val) {
|
||
this.pageSize1 = val;
|
||
console.log('分页',val);
|
||
this.selectDeepExcavationCurrentDataList(this.checkList2);
|
||
},
|
||
handleCurrentChange1(val) {
|
||
this.pageNo1 = val;
|
||
console.log('分页分页',val);
|
||
this.selectDeepExcavationCurrentDataList(this.checkList2);
|
||
},
|
||
createdEchart5() {
|
||
// console.log(this.$refs['echart5'])
|
||
let chart5 = echarts.init(this.$refs["echart5"]);
|
||
this.chart5 = chart5;
|
||
chart5.clear();
|
||
this.option5 = {
|
||
grid: {
|
||
top: "0px",
|
||
left: "0px",
|
||
right: "0px",
|
||
bottom: "0px"
|
||
},
|
||
series: [
|
||
{
|
||
center: ["50%", "50%"],
|
||
radius: "100%",
|
||
type: "gauge",
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 12,
|
||
color: [
|
||
[0.3, "#67e0e3"],
|
||
[0.7, "#37a2da"],
|
||
[1, "#fd666d"]
|
||
]
|
||
}
|
||
},
|
||
pointer: {
|
||
width: 3,
|
||
length: "58%",
|
||
itemStyle: {
|
||
color: "auto"
|
||
}
|
||
},
|
||
axisTick: {
|
||
distance: -30,
|
||
length: 4,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
width: 1
|
||
}
|
||
},
|
||
splitLine: {
|
||
distance: -30,
|
||
length: 30,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
width: 2
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: "auto",
|
||
distance: -12,
|
||
fontSize: 10
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
offsetCenter: ["0", "55%"],
|
||
// 累计绝对值
|
||
formatter:
|
||
"{value}\n{a|" +
|
||
this.$t("message.deepFoundConfig.addUpAbsoluteValue") +
|
||
"}\n{a|(mm)}",
|
||
color: "auto",
|
||
rich: {
|
||
a: {
|
||
color: "#000",
|
||
fontSize: 14
|
||
}
|
||
},
|
||
lineHeight: 22
|
||
},
|
||
data: [
|
||
{
|
||
value: 70
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
chart5.setOption(this.option5);
|
||
},
|
||
createdEchart6() {
|
||
// console.log(this.$refs['echart6'])
|
||
let chart6 = echarts.init(this.$refs["echart6"]);
|
||
this.chart6 = chart6;
|
||
chart6.clear();
|
||
this.option6 = {
|
||
grid: {
|
||
top: "0px",
|
||
left: "0px",
|
||
right: "0px",
|
||
bottom: "0px"
|
||
},
|
||
series: [
|
||
{
|
||
center: ["50%", "50%"],
|
||
radius: "100%",
|
||
type: "gauge",
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 12,
|
||
color: [
|
||
[0.3, "#67e0e3"],
|
||
[0.7, "#37a2da"],
|
||
[1, "#fd666d"]
|
||
]
|
||
}
|
||
},
|
||
pointer: {
|
||
width: 3,
|
||
length: "58%",
|
||
itemStyle: {
|
||
color: "auto"
|
||
}
|
||
},
|
||
axisTick: {
|
||
distance: -30,
|
||
length: 4,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
width: 1
|
||
}
|
||
},
|
||
splitLine: {
|
||
distance: -30,
|
||
length: 30,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
width: 2
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: "auto",
|
||
distance: -12,
|
||
fontSize: 10
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
offsetCenter: ["0", "55%"],
|
||
formatter: "{value}\n{a|变化速率}\n{a|(mm/d)}",
|
||
color: "auto",
|
||
rich: {
|
||
a: {
|
||
color: "#000",
|
||
fontSize: 14
|
||
}
|
||
},
|
||
lineHeight: 22
|
||
},
|
||
data: [
|
||
{
|
||
value: 70
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
chart6.setOption(this.option6);
|
||
},
|
||
createdEchart7() {
|
||
if (this.tableData2.length != 0) {
|
||
let chart7 = echarts.init(this.$refs["echart7"]);
|
||
this.chart7 = chart7;
|
||
chart7.clear();
|
||
this.option7 = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
position: function (pt) {
|
||
return [pt[0], '10%'];
|
||
}
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
dataZoom: {
|
||
yAxisIndex: 'none'
|
||
},
|
||
restore: {},
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
grid: {
|
||
top: "30px",
|
||
left: "60px",
|
||
right: "35px",
|
||
bottom: "50px"
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: this.echartData7.xAxis,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#F4F5F8",
|
||
type: "solid"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: "#7F8694"
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
max:function(obj){//解决因数据值范围相差太大或是太小曲线显示不美观问题
|
||
var ma=obj.max;
|
||
var mi=obj.min;
|
||
var val=Math.ceil((ma+(ma-mi)/2))
|
||
return val
|
||
},
|
||
min:function(obj){
|
||
var ma=obj.max;
|
||
var mi=obj.min;
|
||
var val=Math.ceil((mi-(ma-mi)/2))
|
||
return mi==0?0:val
|
||
},
|
||
name:`单位/${ this.unit }`,
|
||
boundaryGap: [0, '100%'],
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#F4F5F8",
|
||
type: "solid"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: "#7F8694"
|
||
}
|
||
},
|
||
dataZoom:[
|
||
{
|
||
type: 'inside', // 放大和缩小
|
||
orient: 'vertical',
|
||
},
|
||
// {
|
||
// type: 'inside',
|
||
// }
|
||
],
|
||
// dataZoom: [
|
||
// // {
|
||
// // type: 'inside',
|
||
// // start: 0,
|
||
// // end: 20
|
||
// // },
|
||
// // {
|
||
// // start: 0,
|
||
// // end: 20,
|
||
// // top:"90%",
|
||
// // }
|
||
// // {
|
||
// // orient: 'vertical',
|
||
// // }
|
||
// ],
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "#F4F5F8",
|
||
type: "solid",
|
||
width: "0"
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
// '报警值'
|
||
// name: this.$t("message.deepFoundConfig.alarmNum"),
|
||
name: '测点值',
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "circle",
|
||
showSymbol: false,
|
||
data: this.echartData7.data,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(58, 123, 255, 0.5)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(58, 123, 255, 0.1)"
|
||
}
|
||
])
|
||
},
|
||
lineStyle: {
|
||
color: "#3A7BFF"
|
||
},
|
||
itemStyle: {
|
||
color: "#3A7BFF"
|
||
},
|
||
markLine:{
|
||
symbol:"none",
|
||
label:{
|
||
position:"end",
|
||
},
|
||
data:[{
|
||
silent:false,
|
||
// 警告线的样式
|
||
lineStyle:{
|
||
type:"solid",
|
||
color:"#f76462",
|
||
},
|
||
label:{
|
||
position:'end',
|
||
formatter:'报警值(3)'
|
||
},
|
||
yAxis:3
|
||
}]
|
||
}
|
||
// markLine:{
|
||
// data:[{
|
||
// symbol: 'none',
|
||
// yAxis: 100,
|
||
// }],
|
||
// lineStyle:{
|
||
// color: '#F92A08'
|
||
// },
|
||
// label:{
|
||
// position: 'insideStartTop',
|
||
// formatter: '{f|报警值: 100}',
|
||
// rich:{
|
||
// f:{
|
||
// backgroundColor: 'rgba(249, 42, 8, 0.7)',
|
||
// color: '#fff',
|
||
// padding: [4, 60, 8, 8],
|
||
// }
|
||
// }
|
||
// },
|
||
// }
|
||
}
|
||
]
|
||
};
|
||
chart7.setOption(this.option7);
|
||
}
|
||
},
|
||
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
|
||
selectNowDate() {
|
||
var date = new Date(),
|
||
year = date.getFullYear(),
|
||
month = date.getMonth() + 1,
|
||
day = date.getDate(),
|
||
hours = date.getHours(), //获取当前小时数(0-23)
|
||
minutes = date.getMinutes(), //获取当前分钟数(0-59)
|
||
seconds = date.getSeconds();
|
||
month >= 1 && month <= 9 ? (month = "0" + month) : "";
|
||
day >= 0 && day <= 9 ? (day = "0" + day) : "";
|
||
hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
|
||
minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
|
||
seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
|
||
var timer =
|
||
year +
|
||
"-" +
|
||
month +
|
||
"-" +
|
||
day +
|
||
" " +
|
||
hours +
|
||
":" +
|
||
minutes +
|
||
":" +
|
||
seconds;
|
||
console.log(timer);
|
||
return timer;
|
||
},
|
||
showDetail(val) {
|
||
console.log('unit',this.unit)
|
||
// console.log('当前点击的详情',val)
|
||
this.dateTime = []
|
||
this.pageSize1= 10,
|
||
this.pageNo= 1,
|
||
this.visibleDialog = true;
|
||
this.relaId = val.id;
|
||
this.selectDeepExcavationAllMeasurePointList(); // 获取测点名称
|
||
this.$nextTick(() => {
|
||
// this.createdEchart5()
|
||
// this.createdEchart6()
|
||
this.createdEchart7();
|
||
});
|
||
},
|
||
checkDate(val) {
|
||
this.searchDate = val;
|
||
this.selectMonitorTypeAlarmCountList();
|
||
},
|
||
getNaturalSize(callback) {
|
||
// console.dir(Domlement)
|
||
let Domlement = this.$refs["map"];
|
||
var natureSize = {};
|
||
if (window.naturalWidth && window.naturalHeight) {
|
||
natureSize.width = Domlement.naturalWidth;
|
||
natureSize.height = Domlement.naturalHeight;
|
||
// let heightRatio = natureSize.height / 569
|
||
// this.mapDate.width = natureSize.width*heightRatio
|
||
} else {
|
||
console.log(213, this.mapUrl);
|
||
let _this = this;
|
||
var img = new Image();
|
||
// img.src = Domlement.src;
|
||
img.src = this.mapUrl;
|
||
img.onload = function() {
|
||
natureSize.width = img.width;
|
||
natureSize.height = img.height;
|
||
console.log("------", natureSize);
|
||
console.dir(_this.$refs["mapbox"].clientWidth);
|
||
let heightRatio = 519 / natureSize.height;
|
||
let widthRatio = _this.$refs["mapbox"].clientWidth / natureSize.width;
|
||
if (heightRatio < widthRatio) {
|
||
_this.mapDate.width = natureSize.width * heightRatio;
|
||
_this.mapDate.height = natureSize.height * heightRatio;
|
||
_this.mapZoom = heightRatio;
|
||
} else {
|
||
_this.mapDate.width = natureSize.width * widthRatio;
|
||
_this.mapDate.height = natureSize.height * widthRatio;
|
||
_this.mapZoom = widthRatio;
|
||
}
|
||
// _this.mapDate.width = natureSize.width*heightRatio
|
||
if (callback) {
|
||
return callback(natureSize);
|
||
}
|
||
};
|
||
}
|
||
console.log(natureSize);
|
||
// return natureSize;
|
||
},
|
||
checkMapItem(val) {
|
||
this.pointList.forEach(item => {
|
||
if (item.id != val.id) {
|
||
item.isShow = false;
|
||
}
|
||
});
|
||
console.log(this.mapDate, val);
|
||
// console.dir(this.$refs['info'+val.id][0].clientHeight)
|
||
if (val.mapX * this.mapZoom < this.mapDate.width * 0.5) {
|
||
val.left = true;
|
||
}
|
||
if (val.mapY * this.mapZoom > this.mapDate.height * 0.5) {
|
||
val.bottom = true;
|
||
}
|
||
val.isShow = !val.isShow;
|
||
},
|
||
checkType(val) {
|
||
this.type = val.id;
|
||
// this.createdEchart7()
|
||
},
|
||
// 第一个选择
|
||
checkNum(val) {
|
||
this.firstSelect = val;
|
||
// console.log("第一个选择", val);
|
||
getSensorListApi({ measurePointNumber: this.firstSelect }).then(res => {
|
||
if (res.code == 200 && res.result) {
|
||
// console.log('第二个选择的列表',res.result)
|
||
this.getSensorList = res.result;
|
||
if (this.getSensorList.length != 0) {
|
||
this.checkList2 = this.getSensorList[0].sensorSn;
|
||
// console.log('传感器编号',this.checkList2)
|
||
this.selectDeepExcavationCurrentDataList(this.checkList2) //默认第一次进来时带传感器编号获取实时数据
|
||
this.getEchartsData()
|
||
this.$nextTick(()=>{
|
||
this.createdEchart7()
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 第二个选择
|
||
getEchartsData() {
|
||
selectDeepExcavationCurrentDataListApi({
|
||
measurePointNumber: this.checkList,
|
||
relaId: this.relaId,
|
||
sensorSn: this.checkList2 ,
|
||
projectSn: this.projectSn,
|
||
startTime: this.dateTime != null ? this.dateTime[0] : "",
|
||
endTime: this.dateTime != null ? this.dateTime[1] : "",
|
||
pageNo:this.pageNo1,
|
||
pageSize:this.pageSize1,
|
||
}).then(res => {
|
||
this.unit = res.result.unit
|
||
// console.log('第二个选择时的单位',this.unit)
|
||
if (res.code == 200 && res.result) {
|
||
this.total1 = res.result.data.total
|
||
this.tableData2 = res.result.data.records;
|
||
this.echartData7 = {
|
||
xAxis: [],
|
||
data: []
|
||
};
|
||
res.result.data.records.forEach(item => {
|
||
this.echartData7.xAxis.unshift(item.receiveTime);
|
||
this.echartData7.data.unshift(item.data);
|
||
});
|
||
console.log('===========', this.echartData7.xAxis[0].split(' ')[0])
|
||
this.$nextTick(() => {
|
||
this.createdEchart7();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
checkDateTime() {
|
||
if (this.checkList == "" || this.checkList2 == "") {
|
||
this.$message({
|
||
message: "请先选择传感器名称和编号哦！",
|
||
type: "warning"
|
||
});
|
||
}
|
||
this.selectDeepExcavationCurrentDataList(this.checkList2);
|
||
}
|
||
},
|
||
watch: {
|
||
firstSelect: {
|
||
handler(newval, oldval) {
|
||
if (newval != oldval) {
|
||
this.getEchartsData();
|
||
}
|
||
},
|
||
immediate: true
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.monitorData {
|
||
height: 100%;
|
||
width: 100%;
|
||
.monitorData-content {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.monitor-title {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
padding-left: 12px;
|
||
position: relative;
|
||
margin-bottom: 6px;
|
||
}
|
||
.monitor-title::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 2px;
|
||
height: 14px;
|
||
background: #409eff;
|
||
}
|
||
.left {
|
||
// float: left;
|
||
width: 60%;
|
||
.monitor-info {
|
||
background: #fff;
|
||
padding: 20px;
|
||
margin-bottom: 14px;
|
||
.monitor-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.info-detail {
|
||
padding: 0 36px;
|
||
padding-top: 24px;
|
||
.wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding-bottom: 14px;
|
||
border-bottom: 1px dashed #979797;
|
||
}
|
||
.info-item {
|
||
width: 30%;
|
||
line-height: 26px;
|
||
}
|
||
}
|
||
.info-file {
|
||
// padding: 0 36px;
|
||
// padding-top: 22px;
|
||
.file-box {
|
||
display: flex;
|
||
padding: 0 36px;
|
||
padding-top: 16px;
|
||
}
|
||
.file-item {
|
||
flex: 1;
|
||
line-height: 26px;
|
||
padding: 0 10px;
|
||
p {
|
||
display: block;
|
||
width: 280px;
|
||
color: #409eff;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.monitor-map {
|
||
background: #fff;
|
||
padding: 20px;
|
||
.monitor-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.map-wrap {
|
||
height: 536px;
|
||
width: 100%;
|
||
position: relative;
|
||
// text-align: center;
|
||
.tag-box {
|
||
// position: absolute;
|
||
// top: 0;
|
||
// right: 0;
|
||
margin-top: 3px;
|
||
margin-bottom: 6px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
.tag-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 76px;
|
||
span {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
}
|
||
.img-box {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
display: inline-block;
|
||
position: relative;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
img {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
.point-list {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
.point-item {
|
||
background-image: url("~@/assets/images/pointl.png");
|
||
position: absolute;
|
||
span {
|
||
width: 16px;
|
||
height: 16px;
|
||
display: block;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
.point-info {
|
||
width: 268px;
|
||
// height: 248px;
|
||
position: absolute;
|
||
z-index: 1;
|
||
left: -276px;
|
||
top: 0;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: #fff;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
.point-title {
|
||
// height: 30px;
|
||
line-height: 20px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||
padding: 10px 0;
|
||
word-break: break-all;
|
||
}
|
||
.point-content {
|
||
padding: 12px 0;
|
||
padding-bottom: 5px;
|
||
p {
|
||
line-height: 30px;
|
||
}
|
||
}
|
||
}
|
||
.left {
|
||
left: auto;
|
||
right: -276px;
|
||
}
|
||
.bottom {
|
||
top: -228px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
margin-left: 14px;
|
||
width: 40%;
|
||
.swiper-box {
|
||
background: #fff;
|
||
margin-bottom: 14px;
|
||
.swiper-wrap {
|
||
padding: 18px;
|
||
.echart-wrap {
|
||
display: flex;
|
||
height: calc(100% - 50px);
|
||
#echart {
|
||
width: 240px;
|
||
height: 240px;
|
||
margin: 0 auto;
|
||
margin-top: 20px;
|
||
}
|
||
#echart2 {
|
||
width: 240px;
|
||
height: 240px;
|
||
margin: 0 auto;
|
||
margin-top: 20px;
|
||
}
|
||
.echart-legend {
|
||
width: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
.legend-item {
|
||
margin-bottom: 10px;
|
||
span {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
.flex-w {
|
||
width: 60%;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.legend-item {
|
||
width: 50%;
|
||
}
|
||
}
|
||
}
|
||
.echart-statistics {
|
||
display: flex;
|
||
width: 100%;
|
||
height: calc(100% - 50px);
|
||
.echart-wrap {
|
||
flex: 1;
|
||
height: 100%;
|
||
#echart3 {
|
||
width: 240px;
|
||
height: 240px;
|
||
margin: 0 auto;
|
||
margin-top: 20px;
|
||
}
|
||
#echart4 {
|
||
width: 240px;
|
||
height: 240px;
|
||
margin: 0 auto;
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.monitor-title {
|
||
height: 30px;
|
||
.nav-list {
|
||
float: right;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 30px;
|
||
background: rgba(#5181f6, 0.1);
|
||
font-weight: normal;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
.nav-item {
|
||
height: 100%;
|
||
width: 56px;
|
||
line-height: 30px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
}
|
||
.active {
|
||
background: #5181f6;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.monitor-title::before {
|
||
top: 2px;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
.monitor-table {
|
||
background: #fff;
|
||
padding: 18px;
|
||
.tables {
|
||
min-height: 400px;
|
||
}
|
||
.pagerBox {
|
||
margin-top: 16px;
|
||
}
|
||
.name {
|
||
color: #5181f6;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dialog-box {
|
||
/deep/.el-dialog {
|
||
height: 920px;
|
||
box-sizing: border-box;
|
||
margin-top: 0 !important;
|
||
margin-bottom: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.dialog_content {
|
||
border: 1px solid #f3f3f3;
|
||
padding: 0;
|
||
.top {
|
||
width: 100%;
|
||
// height: 205px;
|
||
display: flex;
|
||
border-bottom: 1px solid #f3f3f3;
|
||
.detail_box {
|
||
// width: 723px;
|
||
width: 100%;
|
||
height: 100%;
|
||
// border-right: 1px solid #f3f3f3;
|
||
padding: 16px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
.detail-info {
|
||
// width: 50%;
|
||
width: 100%;
|
||
line-height: 26px;
|
||
span {
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
.detail-grid {
|
||
flex: 1;
|
||
.grid-title {
|
||
line-height: 26px;
|
||
}
|
||
}
|
||
.detail-table {
|
||
display: flex;
|
||
border-left: 1px solid #b1b1b1;
|
||
.grid-item {
|
||
width: 158px;
|
||
text-align: center;
|
||
.grid-header {
|
||
background: rgba(#979797, 0.1);
|
||
height: 30px;
|
||
line-height: 30px;
|
||
border-right: 1px solid #b1b1b1;
|
||
border-bottom: 1px solid #b1b1b1;
|
||
border-top: 1px solid #b1b1b1;
|
||
}
|
||
.grid-conetent {
|
||
display: flex;
|
||
.content {
|
||
width: 50%;
|
||
span {
|
||
display: block;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
border-right: 1px solid #b1b1b1;
|
||
border-bottom: 1px solid #b1b1b1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.detail-meter {
|
||
display: flex;
|
||
flex: 1;
|
||
.meter-item {
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.meter-label {
|
||
line-height: 24px;
|
||
font-size: 16px;
|
||
margin-right: 30px;
|
||
}
|
||
#echart5 {
|
||
width: 185px;
|
||
height: 185px;
|
||
margin-top: 8px;
|
||
}
|
||
#echart6 {
|
||
width: 185px;
|
||
height: 185px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
width: 100%;
|
||
height: 750px;
|
||
.bottom-wrap {
|
||
height: 100%;
|
||
width: 100%;
|
||
border: 1px solid #f3f3f3;
|
||
border-top: 0;
|
||
padding: 16px;
|
||
box-sizing: border-box;
|
||
.search-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
.nav-item {
|
||
padding: 6px 12px;
|
||
background: rgba(#5181f6, 0.1);
|
||
margin-right: 10px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
}
|
||
.active {
|
||
background: #5181f6;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.right-form {
|
||
display: flex;
|
||
align-items: center;
|
||
.form-item {
|
||
margin-right: 16px;
|
||
}
|
||
}
|
||
}
|
||
.echart-box {
|
||
margin-bottom: 20px;
|
||
.echart-title {
|
||
font-weight: bold;
|
||
margin-bottom: 12px;
|
||
}
|
||
#echart7 {
|
||
width: 100%;
|
||
height: 235px;
|
||
}
|
||
}
|
||
.table-box {
|
||
.table-title {
|
||
font-weight: bold;
|
||
margin-bottom: 12px;
|
||
}
|
||
.tables {
|
||
min-height: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.alarm_status1 {
|
||
padding: 4px 6px;
|
||
// background: #44d7b6;
|
||
color: #44d7b6;
|
||
border-radius: 3px;
|
||
}
|
||
.alarm_status2 {
|
||
padding: 4px 6px;
|
||
// background: #7953f6;
|
||
color: #f76462;
|
||
border-radius: 3px;
|
||
}
|
||
.alarm_status3 {
|
||
padding: 4px 6px;
|
||
// background: #f67f52;
|
||
color: #f76462;
|
||
border-radius: 3px;
|
||
}
|
||
.alarm_status4 {
|
||
padding: 4px 6px;
|
||
// background: #5484f6;
|
||
color: #f76462;
|
||
border-radius: 3px;
|
||
}
|
||
}
|
||
/deep/.el-dialog__title {
|
||
font-weight: bold;
|
||
}
|
||
.pager {
|
||
margin-top: 5px;
|
||
text-align: center;
|
||
.el-pager li.active {
|
||
background-color: @--bg-color-primary!important;
|
||
}
|
||
button:disabled,
|
||
.btn-next,
|
||
.btn-prev {
|
||
background-color: transparent !important;
|
||
}
|
||
}
|
||
</style> |