国检大屏update
This commit is contained in:
hzz
parent
da21cf149d
commit
4eaac3e4b6
@ -4,3 +4,8 @@ import {get,post} from "@/utils/http"
|
||||
export function getGuoJian24Trend(){
|
||||
return get('/guoJian/getGuoJian24Trend')
|
||||
}
|
||||
|
||||
export function getAirWind(data:any){
|
||||
return get('/guoJian/getAirWind',data)
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<div class="title">
|
||||
<div class="title" :class="{ 'red-color':prop.config.value>=prop.config.limit }">
|
||||
{{ porptitle }}
|
||||
</div>
|
||||
<div class="content" :class="{ noborder }">
|
||||
<div class="card-content" :class="{ noborder,'red-bg':prop.config.value>=prop.config.limit }">
|
||||
<div v-if="prop.config.type == 1" class="type1">
|
||||
<div class="img">
|
||||
<img :src="prop.config.image">
|
||||
@ -23,7 +23,7 @@
|
||||
</div>
|
||||
<div v-if="prop.config.type == 3" class="type3">
|
||||
<div class="img3">
|
||||
<img :src="prop.config.image" v-if="prop.config.value<1">
|
||||
<img :src="prop.config.image" v-if="prop.config.value<prop.config.limit">
|
||||
<img :src="prop.config.image1" v-else>
|
||||
</div>
|
||||
</div>
|
||||
@ -80,13 +80,21 @@ const porptitle = computed(() => {
|
||||
font-weight: 700;
|
||||
color: #66ffff;
|
||||
}
|
||||
.red-color {
|
||||
color: #E43961;
|
||||
}
|
||||
|
||||
.content {
|
||||
.card-content {
|
||||
width: 100%;
|
||||
height: 65%;
|
||||
border-right: 2px solid #53FFC3;
|
||||
font-size: 14px;
|
||||
color: #53FFC3;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.red-bg {
|
||||
background-color: #2C273A;
|
||||
}
|
||||
|
||||
.noborder {
|
||||
|
||||
215
src/views/Hazardous/components/HDialog.vue
Normal file
215
src/views/Hazardous/components/HDialog.vue
Normal file
@ -0,0 +1,215 @@
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\components\headerBox\dialog\headerDialog.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-06-06 09:23:12
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="props.title" v-model="is_Show" ref="" destroy-on-close>
|
||||
<div style="margin-bottom: 20px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="15">
|
||||
<span style="margin-right: 10px; font-size: 18px;">日期：</span>
|
||||
<el-date-picker v-model="selectTime" type="datetimerange" :shortcuts="shortcuts" range-separator="至"
|
||||
format="YYYY/MM/DD HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" size="large"
|
||||
style="font-size: 18px;" />
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<span style="margin-right: 10px; font-size: 18px;">状态：</span>
|
||||
<el-select v-model="searchConfig.status" clearable placeholder="请选择状态" style="font-size: 18px;" size="large">
|
||||
<el-option v-for="item in alarmTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="18"> </el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="primary" plain @click="searchpartData" size="large">搜索</el-button>
|
||||
<el-button type="primary" plain @click="searchpartReset" size="large">重置</el-button>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" v-loading="dialogLoading" size="large" max-height="650px" stripe
|
||||
style="font-size: 18px;">
|
||||
<el-table-column type="index" :index="(searchConfig.pageNum - 1) * searchConfig.pageSize + 1" label="序号"
|
||||
min-width="10px" header-align="center" width="100" align="center" />
|
||||
<el-table-column property="name" label="名称" header-align="center" align="center" />
|
||||
<el-table-column property="time" label="时间" header-align="center" align="center" />
|
||||
<el-table-column label="状态" header-align="center" align="center" width="120">
|
||||
<template #default="scope">
|
||||
<text> {{ scope.row.status == '0'?'离线':'在线' }}</text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-class">
|
||||
<el-pagination v-model:current-page="searchConfig.pageNum" v-model:page-size="searchConfig.pageSize"
|
||||
:page-sizes="[5, 10, 50, 100]" :small="small" :disabled="disabled" :background="background"
|
||||
layout=" prev, pager, next, jumper,sizes" :total="props.total" size="large" style="font-size: 18px;"
|
||||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from "vue";
|
||||
import { gettime } from "@/utils/time";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
dialogTableVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
dialogLoading: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
//总页数、每页数量、当前页
|
||||
const searchConfig = reactive({
|
||||
type: props.type,
|
||||
status: '',
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
});
|
||||
const selectTime = ref("");
|
||||
let small = ref(false);
|
||||
let disabled = ref(false);
|
||||
let background = ref(false);
|
||||
//类型选项
|
||||
const alarmTypeOptions = [
|
||||
{
|
||||
value: '0',
|
||||
label: '离线',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '在线',
|
||||
},
|
||||
]
|
||||
const emits = defineEmits(["update:dialogTableVisible", "getDialogdatafun"]);
|
||||
const is_Show = computed({
|
||||
get: () => props.dialogTableVisible,
|
||||
set: (val) => {
|
||||
emits("update:dialogTableVisible", val);
|
||||
},
|
||||
});
|
||||
|
||||
computed({
|
||||
get: () => props.type,
|
||||
set: (val) => {
|
||||
searchConfig.type = val;
|
||||
},
|
||||
});
|
||||
watch(() => props.type,
|
||||
(newVal, oldVal) => {
|
||||
searchConfig.type = newVal
|
||||
}, { immediate: true, deep: true })
|
||||
watch(
|
||||
() => selectTime,
|
||||
(newVal, oldVal) => {
|
||||
//监听日期数据
|
||||
if (newVal.value) {
|
||||
searchConfig.startTime = gettime(newVal.value[0], 2);
|
||||
searchConfig.endTime = gettime(newVal.value[1], 2);
|
||||
} else {
|
||||
searchConfig.startTime = null;
|
||||
searchConfig.endTime = null;
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
const handleSizeChange = (val: number) => {
|
||||
searchConfig.pageSize = val;
|
||||
|
||||
emits("getDialogdatafun", searchConfig);
|
||||
};
|
||||
const handleCurrentChange = (val: number) => {
|
||||
searchConfig.pageNum = val;
|
||||
emits("getDialogdatafun", searchConfig);
|
||||
};
|
||||
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "最近一周",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
},
|
||||
},
|
||||
];
|
||||
//搜索
|
||||
function searchpartData() {
|
||||
emits("getDialogdatafun", searchConfig);
|
||||
}
|
||||
//重置
|
||||
function searchpartReset() {
|
||||
|
||||
searchConfig.status = ''
|
||||
selectTime.value = ''
|
||||
//需要重置startTime、endTime，因监听重置有延迟
|
||||
searchConfig.startTime = null;
|
||||
searchConfig.endTime = null;
|
||||
emits("getDialogdatafun", searchConfig);
|
||||
}
|
||||
onMounted(() => { });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination-class {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__title) {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -49,34 +49,6 @@ const dvMouseover = (value) => {
|
||||
}
|
||||
|
||||
};
|
||||
/**
|
||||
* 点击表格事件
|
||||
*/
|
||||
const dvClick = (value) => {
|
||||
if (value.row) {
|
||||
let id = {
|
||||
'精加车间': 1,
|
||||
'机加车间': 2,
|
||||
'大件车间': 3,
|
||||
'精饰车间': 4,
|
||||
'焊接车间': 5,
|
||||
}
|
||||
|
||||
prop.config.rawData.forEach((res, index) => {
|
||||
|
||||
if (index == value.row[0] - 1) {
|
||||
router.push({
|
||||
name: "Mechanicsson",
|
||||
params: {
|
||||
id: id[value.row[2]],
|
||||
dev: res.id
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* @函数功能: 鼠标移出组件方法
|
||||
* @出口参数:
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
<div class="card" style="width: 200px;">
|
||||
<Card :title="'温度'" :config="config.wendu"></Card>
|
||||
</div>
|
||||
<div class="card" style="width: 400px;">
|
||||
<Card :title="'空调状态'" :type="2" :config="config.kongtiao"></Card>
|
||||
<div class="card" style="width: 400px;cursor: pointer;">
|
||||
<Card :title="'空调状态'" :type="2" :config="config.kongtiao" @click="showDialog('kongtiao')"></Card>
|
||||
</div>
|
||||
<div class="card" style="width: 400px;">
|
||||
<Card :title="'排风状态'" :type="2" :config="config.paifeng"></Card>
|
||||
<div class="card" style="width: 400px;cursor: pointer;">
|
||||
<Card :title="'排风状态'" :type="2" :config="config.paifeng" @click="showDialog('paifeng')"></Card>
|
||||
</div>
|
||||
<div class="card" style="width: 240px;">
|
||||
<Card :title="'泄露监测'" :type="3" :config="config.xielou"></Card>
|
||||
@ -38,24 +38,30 @@
|
||||
</Border>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<Border :title="'报警记录'"></Border>
|
||||
<Border :title="'报警记录'">
|
||||
<scrollBoard ref="scrollBoardRef" :config="board_config"></scrollBoard>
|
||||
</Border>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<HDialog :tableData="dialogdata" :title="DialogTitle" v-model:dialogTableVisible="dialogTableVisible" :dialogLoading="dialogLoading"
|
||||
@getDialogdatafun="getDialogdatafun" :total="dialogtotal" :type="dialogType"></HDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
||||
import { ref, reactive, onMounted, onUnmounted,computed } from 'vue';
|
||||
|
||||
|
||||
import header2 from '@/components/headerBox/header2.vue'
|
||||
import Border from './components/Border.vue';
|
||||
import Card from './components/Card.vue';
|
||||
import LineChart from './components/LineChart.vue';
|
||||
import scrollBoard from './components/scrollBoard.vue';
|
||||
import HDialog from './components/HDialog.vue';
|
||||
|
||||
import { getGuoJian24Trend } from '@/http/guojian/index'
|
||||
import { getGuoJian24Trend, getAirWind } from '@/http/guojian/index'
|
||||
|
||||
let timer = null
|
||||
let titleTip = [
|
||||
@ -79,6 +85,7 @@ const config = reactive({
|
||||
type: 1,
|
||||
classArr: [],
|
||||
value: 0,
|
||||
limit: 70,
|
||||
unit: '%RH'
|
||||
},
|
||||
wendu: {
|
||||
@ -87,6 +94,7 @@ const config = reactive({
|
||||
type: 1,
|
||||
classArr: [],
|
||||
value: 0,
|
||||
limit: 30,
|
||||
unit: '℃'
|
||||
},
|
||||
kongtiao: {
|
||||
@ -95,6 +103,7 @@ const config = reactive({
|
||||
type: 2,
|
||||
classArr: ['kongtiao'],
|
||||
value: 0,
|
||||
limit: 2,
|
||||
unit: ''
|
||||
},
|
||||
paifeng: {
|
||||
@ -103,6 +112,7 @@ const config = reactive({
|
||||
type: 2,
|
||||
classArr: ['paifeng'],
|
||||
value: 0,
|
||||
limit: 2,
|
||||
unit: ''
|
||||
},
|
||||
xielou: {
|
||||
@ -111,6 +121,7 @@ const config = reactive({
|
||||
type: 3,
|
||||
classArr: [],
|
||||
value: 0,
|
||||
limit: 1,
|
||||
unit: ''
|
||||
},
|
||||
yanwu: {
|
||||
@ -119,6 +130,7 @@ const config = reactive({
|
||||
type: 3,
|
||||
classArr: [],
|
||||
value: 0,
|
||||
limit: 1,
|
||||
unit: ''
|
||||
},
|
||||
ranqi: {
|
||||
@ -127,6 +139,7 @@ const config = reactive({
|
||||
type: 3,
|
||||
classArr: [],
|
||||
value: 0,
|
||||
limit: 1,
|
||||
unit: ''
|
||||
},
|
||||
})
|
||||
@ -136,6 +149,18 @@ const calc = reactive({
|
||||
data: [],
|
||||
xAxis: [],
|
||||
})
|
||||
let scrollBoardRef = ref()
|
||||
let board_config = reactive({
|
||||
header: ['报警时间', '名称', '状态', '持续时长'],
|
||||
headerBGC: '#081B56',
|
||||
oddRowBGC: '#000F1D',
|
||||
evenRowBGC: '#000F1D',
|
||||
wrap: [true, true, true, true],
|
||||
columnWidth: [131, 175, 120, 140],
|
||||
align: ['center', 'center', 'center', 'center'],
|
||||
rowNum: 8,
|
||||
waitTime: 3000,
|
||||
})
|
||||
const getGuoJian24TrendData = async () => {
|
||||
const res: any = await getGuoJian24Trend()
|
||||
if (res.code == 200) {
|
||||
@ -185,6 +210,50 @@ const getGuoJian24TrendData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
//历史报警数据弹窗显示
|
||||
let Abnormalpopovervisible = ref(false);
|
||||
let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
|
||||
//dialog
|
||||
let dialogdata = ref([]);
|
||||
let dialogTableVisible = ref(false);
|
||||
let dialogLoading = ref(true);
|
||||
let dialogtotal = ref(0)
|
||||
let dialogType = ref("");
|
||||
let DialogTitle = computed(() => {
|
||||
if (dialogType.value == "kongtiao") {
|
||||
return "空调状态历史记录";
|
||||
} else if (dialogType.value == "paifeng") {
|
||||
return "排风状态历史记录";
|
||||
}
|
||||
});
|
||||
function showDialog(type) {
|
||||
if (dialogTableVisible.value == false) {
|
||||
dialogType.value = type;
|
||||
getDialogdatafun({
|
||||
type: type,
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
});
|
||||
}
|
||||
Abnormalpopovervisible.value = false;
|
||||
dialogTableVisible.value = true;
|
||||
}
|
||||
async function getDialogdatafun(config) {
|
||||
dialogLoading.value = true;
|
||||
let result: any = await getAirWind(config);
|
||||
|
||||
if (result.code == 200) {
|
||||
dialogtotal.value = result.total
|
||||
dialogdata.value = result.rows
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
if (dialogLoading.value) {
|
||||
dialogLoading.value = false;
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
onMounted((() => {
|
||||
getGuoJian24TrendData()
|
||||
timer = setInterval(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user