546 lines
18 KiB
Vue
546 lines
18 KiB
Vue
<script lang="ts">
|
|
export default {
|
|
name: "equipment",
|
|
};
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, nextTick } from "vue";
|
|
import { Search } from '@element-plus/icons-vue';
|
|
import { getDeviceSignalTree, querySignalDataById, workpage, getHistoricalCurve } from "@/api/datasurvey/index";
|
|
import { useUserStore } from '@/store/modules/user';
|
|
import Page from '@/components/Pagination/page.vue'
|
|
import * as echarts from 'echarts'
|
|
const userStore = useUserStore();
|
|
//左侧树形控件
|
|
interface Tree {
|
|
[x: string]: any;
|
|
label: string;
|
|
children?: Tree[];
|
|
}
|
|
const signaform = ref({
|
|
signalName: '',
|
|
stationCode: userStore.stationCode,
|
|
|
|
})
|
|
const defaultProps = {
|
|
children: "children",
|
|
label: "name"
|
|
};
|
|
const treedata: any = ref([]);
|
|
const treeRef = ref();
|
|
const treeloading = ref(true)
|
|
const currentNodeKey = ref("")
|
|
const signaId = ref('')
|
|
//获取左侧树
|
|
const signName = ref('')
|
|
function getTreeData() {
|
|
treeloading.value = true
|
|
getDeviceSignalTree(signaform.value).then((res: any) => {
|
|
if (res.code == 0) {
|
|
treedata.value = res.data
|
|
signaId.value = res.data[0].children[0].children[0].children[0].children[0].id
|
|
signName.value = res.data[0].children[0].children[0].children[0].children[0].name
|
|
nextTick(() => {
|
|
treeRef.value?.setCurrentKey(signaId.value);
|
|
});
|
|
getsignadata()
|
|
gettabledata()
|
|
getechartdata()
|
|
}
|
|
treeloading.value = false
|
|
})
|
|
}
|
|
function handleNodeClick(data: any, node: any) {
|
|
if (data.children.length > 0) {
|
|
node.isCurrent = false
|
|
currentNodeKey.value = ""
|
|
nextTick(() => {
|
|
currentNodeKey.value = signaId.value
|
|
})
|
|
} else {
|
|
console.log(data)
|
|
signaId.value = data.id
|
|
signName.value = data.name
|
|
getsignadata()
|
|
gettabledata()
|
|
getechartdata()
|
|
}
|
|
}
|
|
const loading = ref(false)
|
|
const tableData = ref([])
|
|
const total = ref(0)
|
|
const detaall: any = ref([])
|
|
const tableform = ref({
|
|
size: 10,
|
|
current: 1,
|
|
startDate: '',
|
|
endDate: '',
|
|
signalId: '',
|
|
})
|
|
const tableRowClassName = ({
|
|
row,
|
|
rowIndex,
|
|
}: {
|
|
row: any
|
|
rowIndex: number
|
|
}) => {
|
|
if (rowIndex % 2 === 0) {
|
|
return 'warning-row'
|
|
} else if (rowIndex % 2 === 1) {
|
|
return 'success-row'
|
|
}
|
|
return ''
|
|
}
|
|
const signaldata: any = ref({})
|
|
const dignaloading = ref(false)
|
|
function getsignadata() {
|
|
dignaloading.value = true
|
|
querySignalDataById({ signalId: signaId.value }).then((res: any) => {
|
|
if (res.data) {
|
|
signaldata.value = res.data
|
|
} else {
|
|
signaldata.value = {}
|
|
}
|
|
dignaloading.value = false
|
|
})
|
|
}
|
|
function gettabledata() {
|
|
if (detaall.value.length > 0) {
|
|
tableform.value.startDate = formatDate(detaall.value[0])
|
|
tableform.value.endDate = formatDate(detaall.value[1])
|
|
} else {
|
|
tableform.value.startDate = ''
|
|
tableform.value.endDate = ''
|
|
}
|
|
tableform.value.signalId = signaId.value
|
|
loading.value = true
|
|
workpage(tableform.value).then((res: any) => {
|
|
tableData.value = res.data.records
|
|
tableform.value.size = res.data.size
|
|
tableform.value.current = res.data.current
|
|
total.value = res.data.total
|
|
loading.value = false
|
|
|
|
})
|
|
}
|
|
function formatDate(isoString: any) {
|
|
const date = new Date(isoString);
|
|
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
}
|
|
//折线图数据
|
|
const echartdata: any = ref({})
|
|
function getechartdata() {
|
|
getHistoricalCurve({ signalId: signaId.value }).then((res: any) => {
|
|
echartdata.value = res.data
|
|
drawEchart()
|
|
})
|
|
}
|
|
//绘制折线图
|
|
function drawEchart() {
|
|
let myChart = echarts.init(document.getElementById("deviceEachers") as HTMLDivElement);
|
|
myChart.setOption({
|
|
title: {
|
|
text: ''
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['Step Start', 'Step Middle', 'Step End']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: echartdata.value.xAxis,
|
|
yAxis: echartdata.value.yAxis,
|
|
series: echartdata.value.series
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
getTreeData()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="faulttemplate-box">
|
|
<aside id="silderLeft">
|
|
<div class="displayflex" style="margin: 10px 0px 5px 0px;padding-left: 8px;height: 30px;">
|
|
<img src="@/assets/navigation/ty_bq.png" />
|
|
<div class="title">数据列表</div>
|
|
</div>
|
|
<el-input v-model="signaform.signalName" style="width: 240px" placeholder="请输入信号名称" :suffix-icon="Search"
|
|
@change="getTreeData()" />
|
|
<el-scrollbar height="calc(80vh)" style="width:99%;">
|
|
<el-tree-v2 v-loading="treeloading" style="width: 100%;" :data="treedata" :props="defaultProps"
|
|
:height="800" ref="treeRef" node-key="id" :current-node-key="currentNodeKey"
|
|
:highlight-current="true" @node-click="handleNodeClick" />
|
|
</el-scrollbar>
|
|
</aside>
|
|
<section class="silderRight1">
|
|
<div class="right_top">
|
|
<div class="top_left">
|
|
<div class="title_right">
|
|
<img src="@/assets/navigation/ty_bq.png" alt="">
|
|
<div>信号信息</div>
|
|
</div>
|
|
<div class="text_top">
|
|
<div class="text_top_title">
|
|
<div></div>所属网关机信息
|
|
</div>
|
|
<div class="text_top_content" v-loading="dignaloading">
|
|
<div class="content_one">
|
|
<div class="content_one_title">设备类型</div>
|
|
<div class="content_one_text">{{ signaldata.deviceType }}</div>
|
|
</div>
|
|
<div class="content_one">
|
|
<div class="content_one_title">设备名称</div>
|
|
<div class="content_one_text">{{ signaldata.deviceName }}</div>
|
|
</div>
|
|
<div class="content_one">
|
|
<div class="content_one_title">设备型号</div>
|
|
<div class="content_one_text">{{ signaldata.deviceModel }}</div>
|
|
</div>
|
|
<div class="content_one">
|
|
<div class="content_one_title">ip地址</div>
|
|
<div class="content_one_text">{{ signaldata.ipAddr }}</div>
|
|
</div>
|
|
<div class="content_one">
|
|
<div class="content_one_title">协议类型</div>
|
|
<div class="content_one_text">{{ signaldata.protocol }}</div>
|
|
</div>
|
|
<div class="content_one">
|
|
<div class="content_one_title">采集频率</div>
|
|
<div class="content_one_text">{{ signaldata.frequency }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text_top">
|
|
<div class="text_top_title">
|
|
<div></div>型号信息
|
|
</div>
|
|
<div class="text_top_content" v-loading="dignaloading">
|
|
<div class="content_one">
|
|
<div class="content_one_title">信号编号</div>
|
|
<div class="content_one_text">{{ signaldata.signalCode }}</div>
|
|
</div>
|
|
<div class="content_one">
|
|
<div class="content_one_title">信号名称</div>
|
|
<div class="content_one_text">{{ signaldata.signalName }}</div>
|
|
</div>
|
|
<div class="content_one">
|
|
<div class="content_one_title">信号类型</div>
|
|
<div class="content_one_text">{{ signaldata.signalType }}</div>
|
|
</div>
|
|
<div class="content_one">
|
|
<div class="content_one_title">信号单位</div>
|
|
<div class="content_one_text">{{ signaldata.signalUnit }}</div>
|
|
</div>
|
|
<div class="content_one">
|
|
<div class="content_one_title">正常范围</div>
|
|
<div class="content_one_text">{{ signaldata.normalRange }}</div>
|
|
</div>
|
|
<div class="content_one">
|
|
<div class="content_one_title">遥控遥调类型</div>
|
|
<div class="content_one_text">{{ signaldata.ykytType }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top_left">
|
|
<div class="title_right">
|
|
<img src="@/assets/navigation/ty_bq.png" alt="">
|
|
<div>监测数据</div>
|
|
</div>
|
|
<div class="cont_top">
|
|
<div class="cont_top_left">
|
|
<el-date-picker v-model="detaall" type="datetimerange" start-placeholder="开始时间"
|
|
end-placeholder="结束时间" @change="gettabledata" />
|
|
<el-button style="margin-left: 10px;" @click="gettabledata"
|
|
value-format="YYYY-MM-DD HH:mm:ss" class="searchButton">搜索</el-button>
|
|
</div>
|
|
<div class="cont_top_right"> <el-button class="searchButton">导出</el-button></div>
|
|
</div>
|
|
<div class="cont_bottom">
|
|
<el-table v-loading="loading" :data="tableData" style="width: 100%;height: calc(30vh);
|
|
overflow: auto;;margin-bottom: 15px;" row-key="id" default-expand-all
|
|
:row-class-name="tableRowClassName"
|
|
:header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
|
|
<el-table-column type="index" label="序号" width="50px" align="center" />
|
|
<el-table-column label="监测数值" prop="value"></el-table-column>
|
|
<el-table-column label="单位" prop="unit"></el-table-column>
|
|
<el-table-column label="采集时间" prop="startTime" width="120"></el-table-column>
|
|
</el-table>
|
|
<Page :total="total" v-model:size="tableform.size" v-model:current="tableform.current"
|
|
@pagination="gettabledata()">
|
|
</Page>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right_bottom">
|
|
<div class="title_right">
|
|
<img src="@/assets/navigation/ty_bq.png" alt="">
|
|
<div>历史曲线</div>
|
|
</div>
|
|
<div id="deviceEachers" :style="{ width: '100%', height: '90%' }"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.faulttemplate-box {
|
|
height: 100%;
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
padding: 5px 20px;
|
|
|
|
// background-color: #f2f4f9;
|
|
.silderRight1 {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: calc(90vh);
|
|
overflow: auto;
|
|
background-color: rgba(255, 255, 255, 0);
|
|
border-radius: 3px;
|
|
padding: 0px 15px 15px 15px;
|
|
padding-bottom: 0px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
|
|
// margin-left: 15px;
|
|
// background: #17212e;
|
|
.right_top {
|
|
width: 100%;
|
|
height: 487px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.top_left {
|
|
width: 787px;
|
|
height: 488px;
|
|
background: url(@/assets/navigation/sbjc_488.png);
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
|
|
.text_top {
|
|
width: 100%;
|
|
|
|
.text_top_title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #00CCFF;
|
|
padding: 20px 0px;
|
|
|
|
div {
|
|
width: 3px;
|
|
height: 12px;
|
|
background: #00ffff;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
}
|
|
|
|
.text_top_content {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
border-bottom: 1px solid #00397c;
|
|
border-right: 1px solid #00397c;
|
|
|
|
.content_one {
|
|
width: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.content_one_title {
|
|
width: 114px;
|
|
height: 50px;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
border-top: 1px solid #00397c;
|
|
border-left: 1px solid #00397c;
|
|
background-color: #002562;
|
|
font-size: 14px;
|
|
color: #B5D7FF;
|
|
}
|
|
|
|
.content_one_text {
|
|
width: 267px;
|
|
height: 50px;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
border-top: 1px solid #00397c;
|
|
border-left: 1px solid #00397c;
|
|
font-size: 14px;
|
|
color: #B5D7FF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cont_top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 20px 0px;
|
|
|
|
.cont_top_left {
|
|
width: 60%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.right_bottom {
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
margin-top: 15px;
|
|
width: 100%;
|
|
height: calc(36vh);
|
|
background: url(@/assets/navigation/sbjc_485.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.title_right {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
// padding-bottom: 10px;
|
|
div {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
:deep(.el-tree-node.is-current>.el-tree-node__content) {
|
|
width: 100%;
|
|
height: 40px;
|
|
// color: #fff !important;
|
|
}
|
|
|
|
:deep(.el-tree-node__content) {
|
|
width: 100% !important;
|
|
height: 40px !important;
|
|
margin: auto !important;
|
|
}
|
|
|
|
.el-message-box {
|
|
width: 300px !important;
|
|
}
|
|
|
|
:deep(.el-form-item__label) {
|
|
width: 105px !important;
|
|
}
|
|
|
|
:deep(.el-tooltip__trigger) {
|
|
width: 100%;
|
|
}
|
|
|
|
.displayflex {
|
|
display: flex;
|
|
align-items: center;
|
|
// margin-top:15px;
|
|
|
|
.title {
|
|
margin-left: 5px;
|
|
text-decoration: none !important;
|
|
font-family: "阿里妈妈数黑体 Bold";
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-size: 16px !important;
|
|
color: rgb(255, 255, 255);
|
|
line-height: 12px;
|
|
}
|
|
|
|
}
|
|
|
|
:deep(.el-tree) {
|
|
background-color: #ffffff00 !important;
|
|
--el-tree-node-hover-bg-color: #0099ff09;
|
|
}
|
|
|
|
#silderLeft {
|
|
width: 260px;
|
|
box-sizing: border-box;
|
|
// background: #ffffff00;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
background: url(@/assets/navigation/ty_260x988.png);
|
|
background-size: 100% 100%;
|
|
padding: 0px 10px;
|
|
|
|
&:hover {
|
|
.moveBtn {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-table__inner-wrapper::before) {
|
|
background-color: #0099ff00;
|
|
}
|
|
|
|
:deep(.el-table:not(.el-table--border) .el-table__cell) {
|
|
border: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-input__wrapper) {
|
|
background-color: rgba(19, 26, 37, 0);
|
|
}
|
|
|
|
:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
|
|
box-shadow: 0 0 0 1px #009bff inset;
|
|
}
|
|
|
|
:deep(.el-select) {
|
|
--el-select-input-focus-border-color: #009bff !important;
|
|
}
|
|
|
|
:deep(.el-tree-node__label) {
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|