2653 lines
82 KiB
Vue
2653 lines
82 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">
|
||
<!-- ${item.alarmState} -->
|
||
<div
|
||
class="point-item"
|
||
v-for="(item, index) in pointList"
|
||
:key="index"
|
||
:class="
|
||
item.alarmState == 1
|
||
? 'changeColor1'
|
||
: item.alarmState == 2
|
||
? 'changeColor2'
|
||
: item.alarmState == 3
|
||
? 'changeColor3'
|
||
: item.alarmState == 4
|
||
? 'changeColor4'
|
||
: ''
|
||
"
|
||
:style="{
|
||
left: item.mapX * mapZoom - '10' + 'px',
|
||
top: item.mapY * mapZoom - '15' + '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.measurePointNumber }}</p>
|
||
<p>
|
||
测点名称：<span
|
||
style="
|
||
color: #77e8b0;
|
||
display: inline-block;
|
||
width: max-content;
|
||
height: 25px;
|
||
"
|
||
>{{ item.measurePointName }}</span
|
||
>
|
||
</p>
|
||
<p>
|
||
测点状态:
|
||
<span
|
||
style="
|
||
display: inline-block;
|
||
width: 150px;
|
||
height: 30px;
|
||
"
|
||
:class="{
|
||
alarm_status1: item.alarmState == 1,
|
||
alarm_status2: item.alarmState == 2,
|
||
alarm_status3: item.alarmState == 3,
|
||
alarm_status4: item.alarmState == 4
|
||
}"
|
||
>
|
||
{{
|
||
item.alarmState == 1
|
||
? '正常'
|
||
: item.alarmState == 2
|
||
? '超控制'
|
||
: item.alarmState == 3
|
||
? '累计值报警'
|
||
: item.alarmState == 4
|
||
? '变化速率报警'
|
||
: ''
|
||
}}</span
|
||
>
|
||
</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.status == 1
|
||
? '正常'
|
||
: item2.status == 2
|
||
? '超控制'
|
||
: item2.status == 3
|
||
? '累计值报警'
|
||
: item2.status == 4
|
||
? '变化速率报警'
|
||
: ''
|
||
}}
|
||
</p>
|
||
<p>
|
||
当前值：{{
|
||
item2.data == null ? '无' : item2.data
|
||
}}
|
||
</p>
|
||
<p>
|
||
变化速率：{{
|
||
item2.dataRate == null ? '无' : item2.dataRate
|
||
}}
|
||
</p>
|
||
<p>
|
||
累计值：{{
|
||
item2.dataTotal == null ? '无' : item2.dataTotal
|
||
}}
|
||
</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"
|
||
>
|
||
<template slot-scope="scope">{{
|
||
scope.row.fiducialValue + scope.row.unit
|
||
}}</template>
|
||
</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="上次值">
|
||
<template slot-scope="scope">{{
|
||
scope.row.lastTimeData + scope.row.unit
|
||
}}</template>
|
||
</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"
|
||
>
|
||
<template slot-scope="scope">{{
|
||
'±' + scope.row.alarmValue + scope.row.unit
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="dataRate"
|
||
label="变化速率"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">{{
|
||
scope.row.dataRate + scope.row.unit + '/d'
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="rateAlarmValue"
|
||
label="变化速率预警值"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">{{
|
||
'±' + scope.row.rateAlarmValue + scope.row.unit + '/d'
|
||
}}</template>
|
||
</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="Number(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 {
|
||
changecolors: 2,
|
||
unit: 'mm',
|
||
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: 1, 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: []
|
||
},
|
||
max: -999999,
|
||
min: 999999,
|
||
max1: -999999,
|
||
min1: 999999
|
||
}
|
||
},
|
||
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: {
|
||
// 获取测点名称
|
||
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
|
||
// console.log('默认的第一个选择',this.checkList)
|
||
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) {
|
||
let url = this.$http.defaults.baseURL + 'xmgl/upload/getRenameFile?fileUrl='+ val.url + '&fileName=' + val.name
|
||
window.location.href = 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: [
|
||
{ value: this.echartData3Total, name: '监测项目总数' }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
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);
|
||
// },
|
||
// 点击进来
|
||
showDetail(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();
|
||
// });
|
||
},
|
||
handleSizeChange1(val) {
|
||
this.pageSize1 = val
|
||
this.getEchartsData(this.checkList2)
|
||
},
|
||
handleCurrentChange1(val) {
|
||
this.pageNo1 = val
|
||
this.getEchartsData(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()
|
||
let that = this
|
||
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: '65px',
|
||
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",
|
||
scale: true,
|
||
max: function (obj) {
|
||
//解决因数据值范围相差太大或是太小曲线显示不美观问题
|
||
return that.max + 1
|
||
},
|
||
min: function (obj) {
|
||
return that.min - 1
|
||
},
|
||
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: true,
|
||
// 警告线的样式
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#f76462'
|
||
},
|
||
label: {
|
||
position: 'end',
|
||
formatter: '警戒线'
|
||
},
|
||
yAxis: this.max1
|
||
},
|
||
{
|
||
silent: true,
|
||
// 警告线的样式
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#f76462'
|
||
},
|
||
label: {
|
||
position: 'end',
|
||
formatter: '警戒线'
|
||
},
|
||
yAxis: this.min1
|
||
}
|
||
]
|
||
}
|
||
}
|
||
]
|
||
}
|
||
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
|
||
},
|
||
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.checkList2 = ''
|
||
this.firstSelect = val
|
||
getSensorListApi({ measurePointNumber: this.firstSelect }).then((res) => {
|
||
if (res.code == 200 && res.result) {
|
||
this.getSensorList = res.result
|
||
if (this.getSensorList.length != 0) {
|
||
this.checkList2 = this.getSensorList[0].sensorSn
|
||
console.log('默认的传感器编号', this.checkList2)
|
||
this.getEchartsData(this.checkList2)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 第二个选择
|
||
async getEchartsData(val) {
|
||
await 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] : '',
|
||
pageNo: this.pageNo1,
|
||
pageSize: this.pageSize1
|
||
}).then((res) => {
|
||
console.log('返回值', res)
|
||
this.unit = res.result.unit
|
||
this.max = res.result.positiveAlarmValue
|
||
this.min = res.result.positiveAlarmValue * '-1'
|
||
this.max1 = res.result.positiveAlarmValue
|
||
this.min1 = res.result.negativeAlarmValue
|
||
// debugger
|
||
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) => {
|
||
if (this.max < item.data) {
|
||
this.max = item.data
|
||
}
|
||
if (this.min > item.data) {
|
||
this.min = item.data
|
||
}
|
||
this.echartData7.xAxis.unshift(item.receiveTime)
|
||
this.echartData7.data.unshift(item.data)
|
||
})
|
||
this.$nextTick(() => {
|
||
this.createdEchart7()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 添加时间之后的查询
|
||
checkDateTime() {
|
||
if (this.checkList == '' || this.checkList2 == '') {
|
||
this.$message({
|
||
message: '请先选择传感器名称和编号哦！',
|
||
type: 'warning'
|
||
})
|
||
}
|
||
this.getEchartsData(this.checkList2)
|
||
}
|
||
},
|
||
watch: {
|
||
checkList: {
|
||
handler(newval, oldval) {
|
||
if (newval != oldval) {
|
||
console.log('新旧', newval, oldval)
|
||
this.checkList2 = ''
|
||
}
|
||
},
|
||
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");
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
position: absolute;
|
||
span {
|
||
width: 70px;
|
||
height: 70px;
|
||
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;
|
||
}
|
||
}
|
||
.changeColor1 {
|
||
background-image: url('~@/assets/images/deepFoundationPitManage/zc.png');
|
||
}
|
||
.changeColor2 {
|
||
background-image: url('~@/assets/images/deepFoundationPitManage/ckz.png');
|
||
}
|
||
.changeColor3 {
|
||
background-image: url('~@/assets/images/deepFoundationPitManage/ljbj.png');
|
||
}
|
||
.changeColor4 {
|
||
background-image: url('~@/assets/images/deepFoundationPitManage/bhsl.png');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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> |