372 lines
13 KiB
Vue
372 lines
13 KiB
Vue
<script lang="ts">
|
|
export default {
|
|
name: "selfcheck",//系统主机自检
|
|
};
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount, } from 'vue'
|
|
import Page from '@/components/Pagination/page.vue'
|
|
import { useUserStore } from '@/store/modules/user';
|
|
import { getWeatherLogList } from "@/api/home";
|
|
import { getWeatherLogPage} from "@/api/environmentalMonitoring";
|
|
import { getDeviceByType } from "@/api/device";
|
|
const userStore = useUserStore();
|
|
const tableData = ref([])
|
|
const treeloading = ref(false)
|
|
const total = ref()
|
|
//控制行变色
|
|
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 environment_params = ref({
|
|
current:1,
|
|
size:10,
|
|
startDate:'',
|
|
endDate:'',
|
|
patroldeviceName:'',
|
|
stationId:userStore.stationId,
|
|
})
|
|
const hutotal:any = ref('')
|
|
const environment_data = ref([])
|
|
// const treeloading = ref(false)
|
|
function getEnvironment() {
|
|
|
|
if(tableData.value){
|
|
environment_params.value.startDate = tableData.value[0]
|
|
environment_params.value.endDate = tableData.value[1]
|
|
}else{
|
|
environment_params.value.startDate = ''
|
|
environment_params.value.endDate = ''
|
|
}
|
|
getWeatherLogPage(environment_params.value).then((res: any) => {
|
|
environment_data.value = res.data.records
|
|
environment_params.value.size = res.data.size
|
|
environment_params.value.current = res.data.current
|
|
hutotal.value = res.data.total
|
|
})
|
|
}
|
|
function environmentReset(){
|
|
if( tableData.value){
|
|
tableData.value.length = 0
|
|
}
|
|
environment_params.value.patroldeviceName = ''
|
|
getEnvironment()
|
|
}
|
|
|
|
// 环境WebSocket
|
|
const environment = ref()
|
|
const environmentInfo:any = ref({
|
|
temperature: "",
|
|
humidity: "",
|
|
rainfall: "",
|
|
windSpeed: "",
|
|
windDirection: "",
|
|
pressure: ""
|
|
})
|
|
const ws1 = new WebSocket(userStore.wsApiBaseUrl + '/websocket/vibe_run_data_' + userStore.userId);
|
|
function setupWebSocket() {
|
|
|
|
ws1.onopen = () => {
|
|
|
|
};
|
|
ws1.onerror = (error: any) => {
|
|
};
|
|
ws1.onmessage = (e: any) => {
|
|
|
|
if (e.data != 0) {
|
|
environment.value = JSON.parse(e.data)
|
|
if (environment.value.type == 1) {
|
|
environmentInfo.value.temperature = environment.value.value
|
|
}
|
|
if (environment.value.type == 2) {
|
|
environmentInfo.value.humidity = environment.value.value
|
|
}
|
|
if (environment.value.type == 3) {
|
|
environmentInfo.value.windSpeed = environment.value.value
|
|
}
|
|
if (environment.value.type == 4) {
|
|
environmentInfo.value.rainfall = environment.value.value
|
|
}
|
|
if (environment.value.type == 5) {
|
|
environmentInfo.value.windDirection = environment.value.value
|
|
}
|
|
if (environment.value.type == 6) {
|
|
environmentInfo.value.pressure = environment.value.value
|
|
}
|
|
if (environment.value.type == 7) {
|
|
environmentInfo.value.oxygen = environment.value.value
|
|
}
|
|
if (environment.value.type == 8) {
|
|
environmentInfo.value.sf6 = environment.value.value
|
|
}
|
|
}
|
|
}
|
|
ws1.onclose = () => {
|
|
};
|
|
|
|
}
|
|
function getInit() {
|
|
let params = {
|
|
stationId: userStore.stationId
|
|
}
|
|
getWeatherLogList(params).then((res: any) => {
|
|
|
|
environmentInfo.value = res.data
|
|
if (!res.data.temperature ) {
|
|
environmentInfo.value.temperature = "无"
|
|
}
|
|
if (!res.data.humidity ) {
|
|
environmentInfo.value.humidity = "无"
|
|
}
|
|
if (!res.data.rainfall ) {
|
|
environmentInfo.value.rainfall = "无"
|
|
}
|
|
if (!res.data.windSpeed ) {
|
|
environmentInfo.value.windSpeed = "无"
|
|
}
|
|
if (!res.data.windDirection ) {
|
|
environmentInfo.value.windDirection = "无"
|
|
}
|
|
if (!res.data.pressure) {
|
|
environmentInfo.value.pressure = "无"
|
|
}
|
|
if (!res.data.oxygen) {
|
|
environmentInfo.value.oxygen = "无"
|
|
}
|
|
if (!res.data.sf6) {
|
|
environmentInfo.value.sf6 = "无"
|
|
}
|
|
})
|
|
|
|
}
|
|
onMounted(() => {
|
|
getInit()
|
|
setupWebSocket()
|
|
getEnvironment()
|
|
gettype()
|
|
});
|
|
onBeforeUnmount(() => {
|
|
if (ws1 != null) {
|
|
ws1.close()
|
|
}
|
|
})
|
|
function currency(list: any, itemcode: any) {
|
|
let dictname = ''
|
|
list.forEach((element: any) => {
|
|
if (element.itemcode == itemcode) {
|
|
dictname = element.dictname
|
|
}
|
|
})
|
|
return dictname
|
|
}
|
|
const EquipmentType= ref([])
|
|
function gettype(){
|
|
getDeviceByType({ dictcode: 'EnvironmentType' }).then((res: any) => {
|
|
EquipmentType.value = res.data
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="all_box">
|
|
<div class="img_box">
|
|
<div class="img_box_one">
|
|
<div><img src="@/assets/navigation/hjjc_sj1.png" alt=""></div>
|
|
<div class="img_box_nei">
|
|
<div class="img_text1">空气温度</div>
|
|
<div class="img_text2">{{ environmentInfo.temperature }}<span class="img_unit"> ℃</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="img_box_one">
|
|
<div><img src="@/assets/navigation/hjjc_sj2.png" alt=""></div>
|
|
<div class="img_box_nei">
|
|
<div class="img_text1">空气湿度</div>
|
|
<div class="img_text2">{{ environmentInfo.humidity }} <span class="img_unit"> RH</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="img_box_one">
|
|
<div><img src="@/assets/navigation/hjjc_sj3.png" alt=""></div>
|
|
<div class="img_box_nei">
|
|
<div class="img_text1">降雨量</div>
|
|
<div class="img_text2">{{ environmentInfo.rainfall }} <span class="img_unit"> mm</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="img_box_one">
|
|
<div><img src="@/assets/navigation/hjjc_sj4.png" alt=""></div>
|
|
<div class="img_box_nei">
|
|
<div class="img_text1">风速</div>
|
|
<div class="img_text2">{{ environmentInfo.windSpeed }} <span class="img_unit"> 级</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="img_box_one">
|
|
<div><img src="@/assets/navigation/hjjc_sj5.png" alt=""></div>
|
|
<div class="img_box_nei">
|
|
<div class="img_text1">风向</div>
|
|
<div class="img_text2">{{ environmentInfo.windDirection }} </div>
|
|
</div>
|
|
</div>
|
|
<div class="img_box_one">
|
|
<div><img src="@/assets/navigation/hjjc_sj6.png" alt=""></div>
|
|
<div class="img_box_nei">
|
|
<div class="img_text1">气压</div>
|
|
<div class="img_text2">{{ environmentInfo.pressure }} <span class="img_unit"> hpa</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="img_box_one">
|
|
<div><img src="@/assets/navigation/hjjc_sj7.png" alt=""></div>
|
|
<div class="img_box_nei">
|
|
<div class="img_text1">氧气</div>
|
|
<div class="img_text2">{{ environmentInfo.oxygen }} <span class="img_unit"> %</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="img_box_one">
|
|
<div><img src="@/assets/navigation/hjjc_sj8.png" alt=""></div>
|
|
<div class="img_box_nei">
|
|
<div class="img_text1">SF6</div>
|
|
<div class="img_text2">{{ environmentInfo.sf6 }} <span class="img_unit"> %</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="environment_table">
|
|
<div class="table-title">
|
|
<div class="table_left">
|
|
<div class="screenHomepage">
|
|
<el-input v-model="environment_params.patroldeviceName" placeholder="请输入设备名称" clearable @change="getEnvironment()"
|
|
style="margin-right:15px ;width: 200px;" />
|
|
<el-date-picker class="screenHomepage" popper-class="elDatePicker" @change="getEnvironment()"
|
|
style="width: 300px; margin-right: 10px;" v-model="tableData" type="daterange"
|
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
|
|
</div>
|
|
<el-button class="searchButton" @click="getEnvironment()">搜索</el-button>
|
|
<el-button class="searchButton" @click="environmentReset()">重置</el-button>
|
|
</div>
|
|
</div>
|
|
<el-table :data="environment_data" :row-class-name="tableRowClassName" class="PatrolMonitoring"
|
|
v-loading="treeloading" element-loading-background="rgb(11, 40, 34)" highlight-current-row
|
|
style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(56vh); overflow: auto "
|
|
:header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
|
|
<el-table-column type="index" label="序号" width="80px" align="center" />
|
|
<el-table-column property="patroldeviceCode" label="设备编号" align="center" />
|
|
<el-table-column property="patroldeviceName" label="设备名称" align="center" />
|
|
<el-table-column property="type" label="环境 类型" align="center">
|
|
<template #default="scope">
|
|
<span>{{ currency(EquipmentType, scope.row.type) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="taskName" label="监测数值" align="center">
|
|
<template #default="scope">
|
|
<div v-if="scope.row.value">{{ scope.row.value }}{{scope.row.unit}}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="time" label="监测时间" align="center" />
|
|
</el-table>
|
|
<div style="width:100%;display:flex;align-items:center;margin-top:10px;">
|
|
<Page style="margin:0 auto ;" :total="hutotal" v-model:size="environment_params.size" :jumper="'hide'"
|
|
v-model:current="environment_params.current" @pagination="getEnvironment()"></Page>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.all_box {
|
|
width: 100%;
|
|
padding: 15px;
|
|
height: calc(91vh);
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.img_box {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 20px 0px;
|
|
|
|
.img_box_one {
|
|
width: 220px;
|
|
height: 150px;
|
|
background: url(@/assets/navigation/hjjc_sjbj.png) ;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
.img_box_nei {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin-top: 10px;
|
|
|
|
.img_text1 {
|
|
font-family: '微软雅黑';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.img_text2 {
|
|
font-family: '钉钉进步体 Bold', '钉钉进步体';
|
|
font-weight: 700;
|
|
font-size: 36px;
|
|
color: #00ffff;
|
|
|
|
.img_unit {
|
|
font-family: '钉钉进步体 Bold', '钉钉进步体';
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: rgba(255, 255, 255, 0.298039215686275);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.environment_table {
|
|
width: 1881px;
|
|
height: calc(69vh);
|
|
background: url(@/assets/navigation/hjjc_BK.png) ;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
|
|
.table-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.table_left {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
}
|
|
}
|
|
.environment_table1{
|
|
height: calc(83vh);
|
|
background: url(@/assets/station_2/hjjc_9.png) no-repeat;
|
|
margin-top:20px;
|
|
}
|
|
|
|
</style>
|