- <template>
- <!-- 综合分析左侧列表 -->
- <div class="equipLeftPage">
- <div class="equipTotal">
- <div class="title"><img src="@/assets/images/monitor/jcsb_icon.png" alt="监测设备" />监测状态统计</div>
- <template v-if="statusData.length > 0">
- <div class="total" v-for="(item, index) in statusData" :key="index">
- <p>
- {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
- </p>
- <p><img src="@/assets/images/monitor/online_icon.png" alt="在线" title="在线" />{{ item.onlineCount }}</p>
- <p><img src="@/assets/images/monitor/outline_icon.png" alt="离线" title="离线" />{{ item.offlineCount }}</p>
- <p><img src="@/assets/images/monitor/error_icon.png" alt="故障" title="故障" />{{ item.faultCount }}</p>
- </div>
- </template>
- <!-- 暂无数据 -->
- <el-empty :image-size="30" v-if="statusData.length == 0" style="padding: 5px" />
- </div>
-
- <!-- 搜索 -->
- <div class="search">
- <el-select v-model="stationCode" filterable clearable placeholder="选择监测站点" @change="searchData">
- <el-option v-for="item in stationList" :key="item.value" :label="item.stName" :value="item.stCode" />
- </el-select>
- </div>
- <!-- 站点列表 -->
- <div class="station" v-if="stationList.length > 0" v-loading="loadingList">
- <div
- :class="['part', checkedCode == item.stCode ? 'checkedActive' : '']"
- v-for="(item, index) in stationList"
- :key="index"
- @click="checkStation(item)"
- >
- <div class="title" :title="item.stName">
- <span>{{ item.stName }}</span>
- </div>
- <div class="cont">
- <p>
- <span class="status">站点状态</span>
- <span class="success" v-if="item.onlineStatus == 'online'">在线</span>
- <span class="fail" v-if="item.onlineStatus == 'offline'">离线</span>
- <img
- src="@/assets/images/monitor/yw_btn.png"
- title="运维派单"
- @click.stop="checkOrder(item)"
- v-if="item.onlineStatus == 'offline'"
- />
- </p>
- <p>
- <span class="status">数据状态</span>
- <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
- {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
- </span>
- <img
- src="@/assets/images/monitor/sj_btn.png"
- title="故障及离线设备分析"
- @click.stop="checkFault(item)"
- v-if="item.faultStatus == 'offline'"
- />
- <img
- src="@/assets/images/monitor/sj_btn.png"
- title="数据异常分析"
- @click.stop="checkError(item)"
- v-if="item.faultStatus == 'exception'"
- />
- </p>
- <p>
- <span style="margin-right: 15px">建设方式</span>
- <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
- {{ item.buildType == 'owner' ? '新建' : '共享' }}
- </span>
- </p>
- <p>
- <span style="margin-right: 15px">监测类型</span>
- <span>
- {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
- </span>
- </p>
- <p>
- <span style="margin-right: 15px">最后通讯</span>
- <span style="font-weight: bold">{{ item.tt }}</span>
- <!-- videoFlag 0否 1是-->
- <img src="@/assets/images/monitor/video_btn.png" title="站点视频" @click.stop="checkVideo(item)" v-if="item.videoFlag == 1" />
- </p>
- </div>
- </div>
- </div>
- <!-- 暂无数据 -->
- <el-empty :image-size="100" v-if="stationList.length == 0" />
- </div>
- </template>
- <script setup name="equipLeftPage">
- import { getStationList, rtuSiteTypeStatusCount } from '@/api/dataAnalysis/syntherticData';
- import bus from '@/utils/mitt';
-
- const { proxy } = getCurrentInstance();
- const emit = defineEmits(['getDialogData']);
- const props = defineProps({
- monitorTargetType: String,
- });
- // 变量声明
- const stationCode = ref('');
- const stationList = ref([]);
- const faultList = ref([
- { value: 'normal', label: '正常' },
- { value: 'low_battery', label: '低电压' },
- { value: 'low_signal', label: '低信号' },
- { value: 'exception', label: '异常值' },
- { value: 'offline', label: '离线' },
- ]);
- const loadingList = ref(true);
- const checkedCode = ref('');
- const statusData = ref([]);
-
- //获取站点数据
- const getStationData = async stCode => {
- loadingList.value = true;
- let params = {
- monitorTargetType: props.monitorTargetType == 'total' ? '' : props.monitorTargetType,
- stCode: stCode,
- orderBy: 'tt desc',
- };
- let res = await getStationList(params);
- if (res && res.code == 200) {
- let datas = res.data;
- stationList.value = datas || [];
- if (datas.length > 0) {
- checkStation(datas[0]); //有数据时默认点击第一个
- } else {
- bus.emit('leftStationClick', { id: '', stCode: '' }); //给右侧传相应值
- }
- }
- loadingList.value = false;
- };
- // 按名称搜索
- function searchData() {
- getStationData(stationCode.value);
- }
- // 点击站点
- function checkStation(row) {
- checkedCode.value = row.stCode;
- bus.emit('leftStationClick', { id: row.id, stCode: row.stCode }); //给右侧传相应值
- }
- // 获取状态统计
- function getStatusType() {
- let types = props.monitorTargetType == 'total' ? '' : props.monitorTargetType;
- rtuSiteTypeStatusCount({ monitorTargetType: types }).then(res => {
- statusData.value = res.data;
- });
- }
- // 故障及离线设备分析
- function checkFault(row) {
- emit('getDialogData', {
- name: '故障及离线设备分析',
- type: 'dialogFault',
- obj: row,
- });
- }
- // 数据异常分析
- function checkError(row) {
- emit('getDialogData', {
- name: '数据异常分析',
- type: 'dialogSjyc',
- obj: row,
- });
- }
- // 站点视频
- function checkVideo(row) {
- emit('getDialogData', {
- name: '视频监控点',
- type: 'dialogVideo',
- obj: row,
- });
- }
- // 运维派单
- function checkOrder(row) {
- emit('getDialogData', {
- name: '运维派单',
- type: 'dialogOrder',
- obj: row,
- });
- }
- // 初始化
- onMounted(() => {
- getStatusType(); //获取状态数据
- getStationData(''); //获取列表
- });
- watch(
- () => props.monitorTargetType,
- value => {
- // console.log('左侧站点列表--', value);
- getStationData('');
- }
- );
- // 页面销毁
- onBeforeUnmount(() => {});
- </script>
- <style lang="scss" scoped>
- @import '@/assets/styles/variables.module.scss';
- .equipLeftPage {
- padding: 10px;
- position: relative;
- .equipTotal {
- background: $mainColor1;
- box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
- border-radius: 6px;
- padding: 10px;
- height: 123px;
- overflow: auto;
- .title {
- display: flex;
- align-items: center;
- font-size: 15px;
- margin-bottom: 5px;
- img {
- margin-right: 10px;
- }
- }
- .total {
- display: flex;
- align-items: center;
- justify-content: space-around;
- font-size: 14px;
- height: 26px;
- p {
- width: 32%;
- padding-left: 8px;
- img {
- position: relative;
- top: 2px;
- margin-right: 4px;
- }
- }
- }
- }
- .search {
- margin: 0px auto 10px auto;
- .el-select {
- width: 100%;
- }
- }
- .station {
- height: calc(100vh - 340px);
- overflow: auto;
-
- .part {
- background: $mainBg;
- box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
- border-radius: 6px;
- padding: 10px;
- margin-bottom: 5px;
- cursor: pointer;
- img {
- float: right;
- cursor: pointer;
- width: 22px;
- height: 22px;
- }
- .title {
- font-weight: bold;
- color: #00d1ff;
- font-size: 16px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .cont {
- margin-bottom: 0px;
- padding-bottom: 5px;
- p {
- font-weight: 500;
- color: #c6c6c6;
- font-size: 15px;
- margin-bottom: 0px;
- height: 13px;
- .status {
- margin-right: 15px;
- }
- .success {
- color: #24de8d;
- font-weight: bold;
- }
- .fail {
- color: #f85050;
- font-weight: bold;
- }
- .outline {
- color: #999999;
- font-weight: bold;
- }
- .yellow {
- color: #faff00;
- }
- }
- }
- }
- .checkedActive {
- border: 1px solid $mainColor2;
- background: $mainColor2;
- }
- }
- }
- </style>