<template>
<!-- 综合分析右侧列表 -->
<div class="equipRightMonitor">
<!-- 基本信息 -->
<div class="basePart">
<p :title="baseInfo.stName">
<span>站点名称</span><span class="value">{{ baseInfo.stName || '--' }}</span>
</p>
<p>
<span>站点编号</span><span class="value">{{ baseInfo.stCode || '--' }}</span>
</p>
<p :title="baseInfo.address">
<span>安装地址</span><span class="value">{{ baseInfo.address || '--' }}</span>
</p>
<p>
<span>站点类型</span>
<span class="value">
{{
baseInfo.siteType == 'water_level'
? '水位'
: baseInfo.siteType == 'flow'
? '流量'
: baseInfo.siteType == 'rain'
? '降雨'
: baseInfo.siteType == 'quality'
? '水质'
: '--'
}}
</span>
</p>
<p>
<span>安装时间</span><span class="value">{{ baseInfo.installDate || '--' }}</span>
</p>
<p>
<span>建设方式</span>
<span class="value">
{{
baseInfo.buildType == 'owner'
? '自建'
: baseInfo.buildType == 'share'
? '共享'
: baseInfo.buildType == 'official'
? '市局'
: '--'
}}
</span>
</p>
<p :title="baseInfo.lonLat">
<span>定位</span><span class="value">{{ baseInfo.lonLat || '--' }}</span>
</p>
<p>
<span>高程</span>
<span class="value">
{{
baseInfo.elevationSystem == 'yellow_sea'
? '黄海'
: baseInfo.elevationSystem == '85'
? '85国标'
: baseInfo.elevationSystem == 'wusong'
? '吴淞'
: '--'
}}
</span>
</p>
<p>
<span>关联对象</span><span class="value">{{ baseInfo.belongName || '--' }}</span>
</p>
<p><span class="check" @click="checkMore(baseInfo)">查看更多</span><span class="value"> </span></p>
<!-- 最新一条数据 -->
<el-table v-loading="tableLoading" :data="tableData" border height="80">
<el-table-column prop="stCode" label="站点编号" width="130"></el-table-column>
<el-table-column prop="tt" label="观测时间" width="160"></el-table-column>
<!-- 动态因子表头列 -->
<el-table-column
v-if="!!tableData[0]"
v-for="(item, index) in tableData[0].monitorPropertyList"
:key="index"
:prop="item.monitorCode"
:label="item.monitorName + item.unit"
show-overflow-tooltip
width="200"
>
</el-table-column>
<el-table-column prop="installHeight" label="安装高度(m)" width="120"></el-table-column>
<el-table-column prop="faultStatus" label="故障状态">
<template #default="scope">
<span :class="scope.row.faultStatus == 'normal' ? 'success' : 'fail'">
{{
scope.row.faultStatus == 'normal'
? '正常'
: scope.row.faultStatus == 'low_battery'
? '低电压'
: scope.row.faultStatus == 'low_signal'
? '低信号'
: scope.row.faultStatus == 'exception'
? '异常值'
: scope.row.faultStatus == 'offline'
? '离线'
: '--'
}}
</span>
</template>
</el-table-column>
<el-table-column prop="onlineStatus" label="在线状态">
<template #default="scope">
<span :class="scope.row.onlineStatus == 'online' ? 'success' : 'fail'">
{{ scope.row.onlineStatus == 'online' ? '在线' : scope.row.faultStatus == 'offline' ? '离线' : '--' }}
</span>
</template>
</el-table-column>
<el-table-column label="对比分析" width="110" fixed="right">
<template #default="scope">
<img src="@/assets/icons/monitor/dbfx_btn.png" alt="对比分析" class="dbfxImg" @click="checkAnalysis(scope.row)" />
</template>
</el-table-column>
</el-table>
</div>
<!-- 统计分析 -->
<div class="contAnaly">
<!-- 日期搜索 -->
<div class="search">
<el-date-picker
v-model="dateRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:clearable="false"
></el-date-picker>
<el-button type="primary" @click="searchData">查询</el-button>
</div>
<!-- tab内容切换 -->
<div class="tabsBtn">
<el-button
:type="tabIndex == item.key ? 'primary' : ''"
v-for="item in tabsArr"
:key="item.key"
@click="changeTab(item.key)"
>
{{ item.name }}
</el-button>
<div class="tabsCont">
<!-- 数据统计 -->
<DataStats
v-if="tabIndex == '1'"
:searchDate="dateRange"
:stationCode="stationCode"
@changeOneData="changeOneData"
ref="dataStatus"
></DataStats>
<!-- 报表分析 -->
<ReportAnaly
v-if="tabIndex == '2'"
:searchDate="dateRange"
:stationCode="stationCode"
ref="reportAnaly"
@changeOneData="changeOneData"
></ReportAnaly>
<!-- 趋势统计 -->
<TrendAnaly v-if="tabIndex == '3'" :searchDate="dateRange" :stationCode="stationCode" ref="trendAnaly"></TrendAnaly>
<!-- 报警分析 -->
<AlarmAnaly v-if="tabIndex == '4'" :searchDate="dateRange" :stationCode="stationCode" ref="alarmAnaly"></AlarmAnaly>
<!-- 运维分析 -->
<OperationAnaly
v-if="tabIndex == '5'"
:searchDate="dateRange"
:stationCode="stationCode"
ref="operationAnaly"
></OperationAnaly>
<!-- 数据分析 -->
<DataAnaly v-if="tabIndex == '6'" :searchDate="dateRange" :stationCode="stationCode" ref="dataAnaly"></DataAnaly>
</div>
</div>
</div>
<!-- 查看更多弹窗 -->
<el-dialog v-model="dialogShow" title="站点基本信息" width="1200px" append-to-body class="equipMonitorDialog">
<StationBase v-if="dialogShow" :stationInfo="baseInfo"></StationBase>
</el-dialog>
<!-- 站点对比分析弹窗 -->
<el-dialog v-model="dialogShowDB" title="站点对比分析" width="1500px" append-to-body class="equipMonitorDialog">
<StationDialog v-if="dialogShowDB" :stationDBInfo="stationDBInfo"></StationDialog>
</el-dialog>
</div>
</template>
<script setup name="equipRightMonitor">
import { getStationDetail, realtimeDataLatest } from '@/api/dataAnalysis/syntherticData';
import bus from '@/utils/mitt';
import DataStats from './dataStats.vue'; //数据统计
import ReportAnaly from './reportAnaly.vue'; //报表分析
import TrendAnaly from './trendAnaly.vue'; //趋势统计
import AlarmAnaly from './alarmAnaly.vue'; //报警分析
import OperationAnaly from './operationAnaly.vue'; //运维分析
import DataAnaly from './dataAnaly.vue'; //数据分析
import StationBase from './stationBase.vue'; //基本信息查看更多
import StationDialog from './stationDialog.vue'; //站点对比分析
const props = defineProps({
monitorTargetType: String,
});
const { proxy } = getCurrentInstance();
// 变量声明
const baseInfo = ref({});
const stationCode = ref('');
const tabsArr = ref([
{ name: '数据统计', key: '1' },
{ name: '报表分析', key: '2' },
{ name: '趋势统计', key: '3' },
{ name: '报警分析', key: '4' },
{ name: '运维分析', key: '5' },
{ name: '数据分析', key: '6' },
]);
const tabIndex = ref('1'); //默认选中
const tableLoading = ref(false);
const tableData = ref([{ monitorPropertyList: [] }]);
const dialogShow = ref(false);
const dialogShowDB = ref(false);
const stationDBInfo = ref({});
const dateRange = ref([proxy.moment().subtract(15, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
const dataStatus = ref(null);
const reportAnaly = ref(null);
const alarmAnaly = ref(null);
const trendAnaly = ref(null);
const operationAnaly = ref(null);
const dataAnaly = ref(null);
// 方法定义
// 搜索数据
function searchData() {
changeTab(tabIndex.value);
switch (tabIndex.value) {
case '1':
setTimeout(() => {
dataStatus.value.getList(stationCode.value);
});
break;
case '2':
setTimeout(() => {
reportAnaly.value.getList(stationCode.value);
});
break;
case '3':
setTimeout(() => {
trendAnaly.value.getList(stationCode.value);
});
break;
case '4':
setTimeout(() => {
alarmAnaly.value.getList(stationCode.value);
});
break;
case '5':
setTimeout(() => {
operationAnaly.value.getList(stationCode.value);
});
break;
case '6':
setTimeout(() => {
dataAnaly.value.getList(stationCode.value);
});
break;
}
}
// tab切换
function changeTab(key) {
tabIndex.value = key;
}
// 数据统计和报表分析右上角切换事件
function changeOneData(key) {
tabIndex.value = key;
changeTab(tabIndex.value);
}
// 对比分析点击
function checkAnalysis(row) {
stationDBInfo.value = row;
dialogShowDB.value = true;
}
// 查看更多
function checkMore(obj) {
dialogShow.value = true;
console.log(obj);
}
// 获取详情数据
const getDetailData = id => {
getStationDetail(id).then(res => {
baseInfo.value = res.data;
});
};
// 获取最新一条数据
function getLatestData() {
tableLoading.value = true;
tableData.value = [];
realtimeDataLatest(stationCode.value).then(res => {
tableData.value.push(res.data);
tableLoading.value = false;
});
}
watch(
() => dateRange.value,
val => {
localStorage.setItem('searchDateRangeEquip', dateRange.value);
}
);
// 初始化
onMounted(() => {
localStorage.setItem('searchDateRangeEquip', dateRange.value);
bus.on('leftStationClick', e => {
// console.log('获取左侧站点值---', e);
stationCode.value = e.stCode;
if (!!e.id) {
getDetailData(e.id); //获取详情数据
getLatestData(); //获取最新一条数据
searchData(); //默认加载数据统计
}
});
});
// 页面销毁
onBeforeUnmount(() => {
bus.off('leftStationClick');
});
</script>
<style lang="scss">
.equipRightMonitor {
width: 100%;
.basePart {
display: flex;
flex-wrap: wrap;
background: #ffffff;
box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
overflow: auto;
p {
width: 20%;
display: flex;
justify-content: space-between;
align-items: center;
color: #666;
margin-bottom: -2px;
span:nth-of-type(1) {
display: inline-block;
width: 80px;
padding-left: 10px;
}
.value {
flex: 1;
font-weight: bold;
color: #333333;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.check {
color: #3782ff;
cursor: pointer;
}
}
.el-table {
margin: 10px;
.dbfxImg {
cursor: pointer;
}
.success {
color: #24de8d;
font-weight: bold;
}
.fail {
color: #f85050;
font-weight: bold;
}
}
}
.contAnaly {
background: #ffffff;
box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
border-radius: 6px;
padding: 10px;
margin-top: 5px;
.search {
.el-button {
margin-left: 15px;
margin-top: -6px;
}
}
.tabsBtn {
margin-top: 10px;
.el-button {
border-radius: 15px;
margin-right: 15px;
}
.tabsCont {
margin-top: 10px;
height: calc(100vh - 450px);
overflow: auto;
}
}
}
}
</style>
