admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: BUG修改

Browse Source
This commit is contained in:
kun 2024-02-22 17:35:57 +08:00
parent e5c5c53904
commit 69404eb005
8 changed files with 354 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/modules/largeMachinery.ts
View File

@ -72,6 +72,10 @@ export const concreteMaterialDataList = (params: {}) => {
export const countUseStatus = (params: {}) => { export const countUseStatus = (params: {}) => {
return http.post(BASEURL + `/xmgl/concreteMixStationData/countUseStatus`, params); return http.post(BASEURL + `/xmgl/concreteMixStationData/countUseStatus`, params);
}; };
// 设备列表
export const concreteMaterialEquipList = (params: {}) => {
return http.get(BASEURL + `/xmgl/concreteMixStationDev/list`, params);
};
// 沥青拌合站 // 沥青拌合站
// 1.各设备产量 // 1.各设备产量
@ -101,7 +105,10 @@ export const concreteMaterialDataList2 = (params: {}) => {
export const countUseStatus2 = (params: {}) => { export const countUseStatus2 = (params: {}) => {
return http.post(BASEURL + `/xmgl/pitchMixStationProdData/countUseStatus`, params); return http.post(BASEURL + `/xmgl/pitchMixStationProdData/countUseStatus`, params);
}; };
// 设备列表
export const concreteMaterialEquipList2 = (params: {}) => {
return http.get(BASEURL + `/xmgl/pitchMixStationDev/list`, params);
};
// 水稳拌合站 // 水稳拌合站
// 1.各设备产量 // 1.各设备产量
export const countConcreteMixStationDataTrend3 = (params: {}) => { export const countConcreteMixStationDataTrend3 = (params: {}) => {
@ -129,6 +136,9 @@ export const concreteMaterialDataList3 = (params: {}) => {
export const countUseStatus3 = (params: {}) => { export const countUseStatus3 = (params: {}) => {
return http.post(BASEURL + `/xmgl/stableWaterMixStationData/countUseStatus`, params); return http.post(BASEURL + `/xmgl/stableWaterMixStationData/countUseStatus`, params);
}; };
export const concreteMaterialEquipList3 = (params: {}) => {
return http.get(BASEURL + `/xmgl/stableWaterMixStationDev/list`, params);
};
// 压力试验机 // 压力试验机
// 统计试验合格率 试验次数统计 // 统计试验合格率 试验次数统计

118
src/views/sevenLargeScreen/largeMachinery/asphaltMixer/topRight.vue
View File

@ -2,6 +2,11 @@
<Card title="原材料用量统计"> <Card title="原材料用量统计">
<div class="load-top-right"> <div class="load-top-right">
<div> <div>
<div class="select-left">
<el-select v-model="selectEquipSn" style="width: 100%" size="small" clearable @change="equipChange">
<el-option v-for="(item, index) in equipList" :key="index" :label="item.devName" :value="item.devSn" />
</el-select>
</div>
<div class="select-right"> <div class="select-right">
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div> <div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div> <div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
@ -21,14 +26,21 @@
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import { countMaterialName2 } from "@/api/modules/largeMachinery"; import { countMaterialName2, concreteMaterialEquipList2 } from "@/api/modules/largeMachinery";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import { noop } from "@vueuse/core"; import { noop } from "@vueuse/core";
const store = GlobalStore(); const store = GlobalStore();
const airType = ref(1); const airType = ref(1);
// 选中的设备
const selectEquipSn = ref();
const equipList = ref([]);
// 选中 // 选中
let checked = ref(1); let checked = ref(1);
// 设备选择改变
const equipChange = () => {
getMemberCareList();
};
function getNowData(type: any) { function getNowData(type: any) {
checked.value = type; checked.value = type;
// 初始化option // 初始化option
@ -300,9 +312,22 @@ function drawEchart() {
}; };
echartsTest.setOption(option, true); echartsTest.setOption(option, true);
} }
// 查设备列表
const getEquipList = async () => {
const res: any = await concreteMaterialEquipList2({});
console.log("查设备列表", res);
equipList.value = res.result;
};
// let noData = ref(false as any); // let noData = ref(false as any);
const getMemberCareList = async () => { const getMemberCareList = async () => {
const res: any = await countMaterialName2({ projectSn: store.sn, type: checked.value }); let requestData:any = {
projectSn: store.sn,
type: checked.value
};
if (selectEquipSn.value) {
requestData.devSn = selectEquipSn.value;
}
const res: any = await countMaterialName2(requestData);
console.log("原材料用量统计", res); console.log("原材料用量统计", res);
if (res.result.data.length > 0) { if (res.result.data.length > 0) {
let dataArr = res.result.data; let dataArr = res.result.data;
@ -335,6 +360,7 @@ const getMemberCareList = async () => {
}; };
onMounted(async () => { onMounted(async () => {
getEquipList();
getMemberCareList(); getMemberCareList();
}); });
</script> </script>
@ -360,6 +386,51 @@ onMounted(async () => {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
.select-left {
width: 30%;
position: absolute;
z-index: 10;
left: 5%;
top: 4.5%;
color: #fff;
}
.select-right {
width: 40%;
display: flex;
position: absolute;
z-index: 10;
color: #fff;
font-size: 10px;
text-align: center;
line-height: 20px;
right: -1%;
top: 5%;
.selected {
height: 5%;
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.day {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.week {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.month {
padding: 0 6%;
z-index: 99;
}
.active {
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
background-size: 100% 100%;
}
}
} }
.num { .num {
width: 66px; width: 66px;
@ -381,48 +452,19 @@ onMounted(async () => {
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat; // background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
// background-size: cover; // background-size: cover;
// } // }
.select-right {
width: 40%;
display: flex;
position: absolute;
z-index: 10;
color: #fff;
font-size: 10px;
text-align: center;
line-height: 20px;
right: -1%;
top: 5%;
.selected {
height: 5%;
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.day {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.week {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.month {
padding: 0 6%;
z-index: 99;
}
.active {
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
background-size: 100% 100%;
}
}
.time { .time {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
left: 37%; left: 37%;
margin-top: -18%; margin-top: -18%;
} }
:deep(.el-input__inner) {
color: #fff;
}
:deep(.el-select .el-input .el-select__caret) {
color: #fff;
}
::v-deep .el-input__wrapper { ::v-deep .el-input__wrapper {
width: 85%; width: 85%;
height: 0%; height: 0%;

118
src/views/sevenLargeScreen/largeMachinery/concreteMixingPlant/topRight.vue
View File

@ -2,6 +2,11 @@
<Card title="原材料用量统计"> <Card title="原材料用量统计">
<div class="load-top-right"> <div class="load-top-right">
<div> <div>
<div class="select-left">
<el-select v-model="selectEquipSn" style="width: 100%" size="small" clearable @change="equipChange">
<el-option v-for="(item, index) in equipList" :key="index" :label="item.devName" :value="item.devSn" />
</el-select>
</div>
<div class="select-right"> <div class="select-right">
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div> <div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div> <div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
@ -21,14 +26,21 @@
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import { countMaterialName } from "@/api/modules/largeMachinery"; import { countMaterialName, concreteMaterialEquipList } from "@/api/modules/largeMachinery";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import { noop } from "@vueuse/core"; import { noop } from "@vueuse/core";
const store = GlobalStore(); const store = GlobalStore();
const airType = ref(1); const airType = ref(1);
// 选中的设备
const selectEquipSn = ref();
const equipList = ref([]);
// 选中 // 选中
let checked = ref(1); let checked = ref(1);
// 设备选择改变
const equipChange = () => {
getMemberCareList();
};
function getNowData(type: any) { function getNowData(type: any) {
checked.value = type; checked.value = type;
// 初始化option // 初始化option
@ -108,7 +120,7 @@ function drawEchart() {
color: "#ccc", color: "#ccc",
fontSize: 14, fontSize: 14,
lineHeight: 40, lineHeight: 40,
fontWeight: "normal", fontWeight: "normal"
} }
}, },
legend: { legend: {
@ -300,9 +312,22 @@ function drawEchart() {
}; };
echartsTest.setOption(option, true); echartsTest.setOption(option, true);
} }
// 查设备列表
const getEquipList = async () => {
const res: any = await concreteMaterialEquipList({});
console.log("查设备列表", res);
equipList.value = res.result;
};
// let noData = ref(false as any); // let noData = ref(false as any);
const getMemberCareList = async () => { const getMemberCareList = async () => {
const res: any = await countMaterialName({ projectSn: store.sn, type: checked.value }); let requestData:any = {
projectSn: store.sn,
type: checked.value
};
if (selectEquipSn.value) {
requestData.devSn = selectEquipSn.value;
}
const res: any = await countMaterialName(requestData);
console.log("原材料用量统计", res); console.log("原材料用量统计", res);
if (res.result.data.length > 0) { if (res.result.data.length > 0) {
let dataArr = res.result.data; let dataArr = res.result.data;
@ -335,6 +360,7 @@ const getMemberCareList = async () => {
}; };
onMounted(async () => { onMounted(async () => {
getEquipList();
getMemberCareList(); getMemberCareList();
}); });
</script> </script>
@ -360,6 +386,50 @@ onMounted(async () => {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
.select-left {
width: 30%;
position: absolute;
z-index: 10;
left: 5%;
top: 4.5%;
color: #fff;
}
.select-right {
width: 40%;
display: flex;
position: absolute;
z-index: 10;
color: #fff;
font-size: 10px;
text-align: center;
line-height: 20px;
right: -1%;
top: 5%;
.selected {
height: 5%;
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.day {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.week {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.month {
padding: 0 6%;
z-index: 99;
}
.active {
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
background-size: 100% 100%;
}
}
} }
.num { .num {
width: 66px; width: 66px;
@ -381,48 +451,18 @@ onMounted(async () => {
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat; // background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
// background-size: cover; // background-size: cover;
// } // }
.select-right {
width: 40%;
display: flex;
position: absolute;
z-index: 10;
color: #fff;
font-size: 10px;
text-align: center;
line-height: 20px;
right: -1%;
top: 5%;
.selected {
height: 5%;
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.day {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.week {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.month {
padding: 0 6%;
z-index: 99;
}
.active {
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
background-size: 100% 100%;
}
}
.time { .time {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
left: 37%; left: 37%;
margin-top: -18%; margin-top: -18%;
} }
:deep(.el-input__inner) {
color: #fff;
}
:deep(.el-select .el-input .el-select__caret) {
color: #fff;
}
::v-deep .el-input__wrapper { ::v-deep .el-input__wrapper {
width: 85%; width: 85%;
height: 0%; height: 0%;

16
src/views/sevenLargeScreen/largeMachinery/hangBasket/topLeft.vue
View File

@ -8,35 +8,35 @@
</div> --> </div> -->
<div class="install-common"> <div class="install-common">
<div class="dev-name">{{ 1 }}#</div> <div class="dev-name">{{ 1 }}#</div>
<div class="warn-text" style="{ color: warnType[realTimeData.rearBeamFixedAnchor1].color }">{{ warnType[realTimeData.rearBeamFixedAnchor1].name || "-" }}</div> <div class="warn-text" :style="{ color: warnType[realTimeData.rearBeamFixedAnchor1].color }">{{ warnType[realTimeData.rearBeamFixedAnchor1].name || "-" }}</div>
</div> </div>
<div class="install-common"> <div class="install-common">
<div class="dev-name">{{ 2 }}#</div> <div class="dev-name">{{ 2 }}#</div>
<div class="warn-text" style="{ color: warnType[realTimeData.rearBeamFixedAnchor2].color }">{{ warnType[realTimeData.rearBeamFixedAnchor2].name || "-" }}</div> <div class="warn-text" :style="{ color: warnType[realTimeData.rearBeamFixedAnchor2].color }">{{ warnType[realTimeData.rearBeamFixedAnchor2].name || "-" }}</div>
</div> </div>
<div class="install-common"> <div class="install-common">
<div class="dev-name">{{ 3 }}#</div> <div class="dev-name">{{ 3 }}#</div>
<div class="warn-text" style="{ color: warnType[realTimeData.rearBeamFixedAnchor3].color }">{{ warnType[realTimeData.rearBeamFixedAnchor3].name || "-" }}</div> <div class="warn-text" :style="{ color: warnType[realTimeData.rearBeamFixedAnchor3].color }">{{ warnType[realTimeData.rearBeamFixedAnchor3].name || "-" }}</div>
</div> </div>
<div class="install-common"> <div class="install-common">
<div class="dev-name">{{ 4 }}#</div> <div class="dev-name">{{ 4 }}#</div>
<div class="warn-text" style="{ color: warnType[realTimeData.rearBeamFixedAnchor4].color }">{{ warnType[realTimeData.rearBeamFixedAnchor4].name || "-" }}</div> <div class="warn-text" :style="{ color: warnType[realTimeData.rearBeamFixedAnchor4].color }">{{ warnType[realTimeData.rearBeamFixedAnchor4].name || "-" }}</div>
</div> </div>
<div class="install-common"> <div class="install-common">
<div class="dev-name">{{ 5 }}#</div> <div class="dev-name">{{ 5 }}#</div>
<div class="warn-text" style="{ color: warnType[realTimeData.rearBeamFixedAnchor5].color }">{{ warnType[realTimeData.rearBeamFixedAnchor5].name || "-" }}</div> <div class="warn-text" :style="{ color: warnType[realTimeData.rearBeamFixedAnchor5].color }">{{ warnType[realTimeData.rearBeamFixedAnchor5].name || "-" }}</div>
</div> </div>
<div class="install-common"> <div class="install-common">
<div class="dev-name">{{ 6 }}#</div> <div class="dev-name">{{ 6 }}#</div>
<div class="warn-text" style="{ color: warnType[realTimeData.rearBeamFixedAnchor6].color }">{{ warnType[realTimeData.rearBeamFixedAnchor6].name || "-" }}</div> <div class="warn-text" :style="{ color: warnType[realTimeData.rearBeamFixedAnchor6].color }">{{ warnType[realTimeData.rearBeamFixedAnchor6].name || "-" }}</div>
</div> </div>
<div class="install-common"> <div class="install-common">
<div class="dev-name">{{ 7 }}#</div> <div class="dev-name">{{ 7 }}#</div>
<div class="warn-text" style="{ color: warnType[realTimeData.rearBeamFixedAnchor7].color }">{{ warnType[realTimeData.rearBeamFixedAnchor7].name || "-" }}</div> <div class="warn-text" :style="{ color: warnType[realTimeData.rearBeamFixedAnchor7].color }">{{ warnType[realTimeData.rearBeamFixedAnchor7].name || "-" }}</div>
</div> </div>
<div class="install-common"> <div class="install-common">
<div class="dev-name">{{ 8 }}#</div> <div class="dev-name">{{ 8 }}#</div>
<div class="warn-text" style="{ color: warnType[realTimeData.rearBeamFixedAnchor8].color }">{{ warnType[realTimeData.rearBeamFixedAnchor8].name || "-" }}</div> <div class="warn-text" :style="{ color: warnType[realTimeData.rearBeamFixedAnchor8].color }">{{ warnType[realTimeData.rearBeamFixedAnchor8].name || "-" }}</div>
</div> </div>
<!-- <div class="install-unconnect"> <!-- <div class="install-unconnect">
<div class="dev-name">8#</div> <div class="dev-name">8#</div>

118
src/views/sevenLargeScreen/largeMachinery/waterStabilizedMixer/topRight.vue
View File

@ -2,6 +2,11 @@
<Card title="原材料用量统计"> <Card title="原材料用量统计">
<div class="load-top-right"> <div class="load-top-right">
<div> <div>
<div class="select-left">
<el-select v-model="selectEquipSn" style="width: 100%" size="small" clearable @change="equipChange">
<el-option v-for="(item, index) in equipList" :key="index" :label="item.devName" :value="item.devSn" />
</el-select>
</div>
<div class="select-right"> <div class="select-right">
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div> <div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div> <div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
@ -21,14 +26,21 @@
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import { countMaterialName3 } from "@/api/modules/largeMachinery"; import { countMaterialName3, concreteMaterialEquipList3 } from "@/api/modules/largeMachinery";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import { noop } from "@vueuse/core"; import { noop } from "@vueuse/core";
const store = GlobalStore(); const store = GlobalStore();
const airType = ref(1); const airType = ref(1);
// 选中的设备
const selectEquipSn = ref();
const equipList = ref([]);
// 选中 // 选中
let checked = ref(1); let checked = ref(1);
// 设备选择改变
const equipChange = () => {
getMemberCareList();
};
function getNowData(type: any) { function getNowData(type: any) {
checked.value = type; checked.value = type;
// 初始化option // 初始化option
@ -300,9 +312,22 @@ function drawEchart() {
}; };
echartsTest.setOption(option, true); echartsTest.setOption(option, true);
} }
// 查设备列表
const getEquipList = async () => {
const res: any = await concreteMaterialEquipList3({});
console.log("查设备列表", res);
equipList.value = res.result;
};
// let noData = ref(false as any); // let noData = ref(false as any);
const getMemberCareList = async () => { const getMemberCareList = async () => {
const res: any = await countMaterialName3({ projectSn: store.sn, type: checked.value }); let requestData:any = {
projectSn: store.sn,
type: checked.value
};
if (selectEquipSn.value) {
requestData.devSn = selectEquipSn.value;
}
const res: any = await countMaterialName3(requestData);
console.log("原材料用量统计", res); console.log("原材料用量统计", res);
if (res.result.data.length > 0) { if (res.result.data.length > 0) {
let dataArr = res.result.data; let dataArr = res.result.data;
@ -335,6 +360,7 @@ const getMemberCareList = async () => {
}; };
onMounted(async () => { onMounted(async () => {
getEquipList();
getMemberCareList(); getMemberCareList();
}); });
</script> </script>
@ -360,6 +386,52 @@ onMounted(async () => {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
.select-left {
width: 30%;
position: absolute;
z-index: 10;
left: 5%;
top: 4.5%;
color: #fff;
}
.select-right {
width: 40%;
display: flex;
position: absolute;
z-index: 10;
color: #fff;
font-size: 10px;
text-align: center;
line-height: 20px;
right: -1%;
top: 5%;
.selected {
height: 5%;
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.day {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.week {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.month {
padding: 0 6%;
z-index: 99;
}
.active {
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
background-size: 100% 100%;
}
}
} }
.num { .num {
width: 66px; width: 66px;
@ -381,48 +453,18 @@ onMounted(async () => {
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat; // background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
// background-size: cover; // background-size: cover;
// } // }
.select-right {
width: 40%;
display: flex;
position: absolute;
z-index: 10;
color: #fff;
font-size: 10px;
text-align: center;
line-height: 20px;
right: -1%;
top: 5%;
.selected {
height: 5%;
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.day {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.week {
padding: 0 6%;
margin-right: 5%;
z-index: 99;
}
.month {
padding: 0 6%;
z-index: 99;
}
.active {
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
background-size: 100% 100%;
}
}
.time { .time {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
left: 37%; left: 37%;
margin-top: -18%; margin-top: -18%;
} }
:deep(.el-input__inner) {
color: #fff;
}
:deep(.el-select .el-input .el-select__caret) {
color: #fff;
}
::v-deep .el-input__wrapper { ::v-deep .el-input__wrapper {
width: 85%; width: 85%;
height: 0%; height: 0%;

167
src/views/sevenLargeScreen/qualityControl/concreteMonitor/leftTop.vue
View File

@ -7,18 +7,26 @@
</el-select> </el-select>
</div> </div>
<div class="point-state-top"> <div class="point-state-top">
<div class="emergency-warn">
<div class="background"></div>
<div class="state-text">紧急告警</div>
</div>
<div class="importance-warn">
<div class="background"></div>
<div class="state-text">重要告警</div>
</div>
<div class="secondary-warn">
<div class="background"></div>
<div class="state-text">次要告警</div>
</div>
<div class="tip-warn">
<div class="background"></div>
<div class="state-text">提示告警</div>
</div>
<div class="common"> <div class="common">
<div class="background"></div> <div class="background"></div>
<div class="state-text">正常</div> <div class="state-text">正常</div>
</div> </div>
<div class="warn">
<div class="background"></div>
<div class="state-text">预警</div>
</div>
<div class="control">
<div class="background"></div>
<div class="state-text">报警</div>
</div>
</div> </div>
<div class="point-map" v-if="list.length > 0"> <div class="point-map" v-if="list.length > 0">
<img :src="imgUrl" alt="" /> <img :src="imgUrl" alt="" />
@ -26,13 +34,15 @@
<div <div
class="point-item" class="point-item"
:class=" :class="
item.alarmState == 1 item.currentData.alarmLevel == 1
? 'changeColor1' ? 'changeColor1'
: item.alarmState == 2 : item.currentData.alarmLevel == 2
? 'changeColor2' ? 'changeColor2'
: item.alarmState == 3 : item.currentData.alarmLevel == 3
? 'changeColor3' ? 'changeColor3'
: 'changeColor1' : item.currentData.alarmLevel == 4
? 'changeColor4'
: 'changeColor5'
" "
:title="item.measurePointName" :title="item.measurePointName"
:style="{ :style="{
@ -44,14 +54,15 @@
<div <div
class="item-dialog" class="item-dialog"
:style="{ :style="{
left: item.mapX + 20 + 'px', left: +item.mapX + 30 + 'px',
top: item.mapY - 10 + 'px' top: +item.mapY - 5 + 'px'
}" }"
v-if="item.id === currentIndex && showDialog" v-if="item.id === currentIndex && showDialog"
> >
<div class="triangle"></div> <div class="triangle"></div>
<div class="dialog-title">{{ item.pointName }}</div> <div class="dialog-title">监测点名称：{{ item.pointName }}</div>
<div class="dialog-text" style="color: #ec6266; display: flex"> <div class="dialog-text">温度：{{ item.currentData.temperature || 0 }}°C</div>
<!-- <div class="dialog-text" style="color: #ec6266; display: flex">
<div class="text-icon"> <div class="text-icon">
<el-icon><Warning /></el-icon> <el-icon><Warning /></el-icon>
</div> </div>
@ -61,16 +72,16 @@
<div class="dialog-text">中上层温度：43°C</div> <div class="dialog-text">中上层温度：43°C</div>
<div class="dialog-text">中层温度：12.88°C</div> <div class="dialog-text">中层温度：12.88°C</div>
<div class="dialog-text">中下层温度：20°C</div> <div class="dialog-text">中下层温度：20°C</div>
<div class="dialog-text">底层温度：20°C</div> <div class="dialog-text">底层温度：20°C</div> -->
<div class="close-icon" @click="closeDialog"> <div class="close-icon" @click="closeDialog">
<el-icon><Close /></el-icon> <el-icon><Close /></el-icon>
</div> </div>
<div class="open-history" @click="openHistoryDialog"> <!-- <div class="open-history" @click="openHistoryDialog">
<div class="history-text">历史数据</div> <div class="history-text">历史数据</div>
<div class="history-icon"> <div class="history-icon">
<el-icon><CaretRight /></el-icon> <el-icon><CaretRight /></el-icon>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
@ -103,7 +114,8 @@ const BASEURL = import.meta.env.VITE_API_URL;
// 打开点位详情弹窗 // 打开点位详情弹窗
// const historyRef = ref(); // const historyRef = ref();
const openHistoryDialog = () => { const openHistoryDialog = () => {
closeDialog(); // closeDialog();
// showDialog.value = true;
// historyRef.value.openDialog(); // historyRef.value.openDialog();
// console.log(historyRef.value); // console.log(historyRef.value);
}; };
@ -158,8 +170,9 @@ const getPointList = async () => {
let currentIndex = ref(1 as any); let currentIndex = ref(1 as any);
let showDialog = ref(false as any); let showDialog = ref(false as any);
function openDialog(item: any) { function openDialog(item: any) {
// currentIndex.value = item.id; console.log(item)
// showDialog.value = true; currentIndex.value = item.id;
showDialog.value = true;
} }
function closeDialog() { function closeDialog() {
showDialog.value = false; showDialog.value = false;
@ -170,39 +183,25 @@ onMounted(async () => {
getMemberCareList(); getMemberCareList();
}); });
const list = ref([ const list = ref([] as any);
{
id: 1,
alarmState: 1,
xMap: 150,
yMap: 70,
pointName: "测温-大波浪1"
},
{
id: 2,
alarmState: 2,
xMap: 120,
yMap: 70,
pointName: "测温-大波浪2"
},
{
id: 3,
alarmState: 1,
xMap: 180,
yMap: 90,
pointName: "测温-大波浪3"
},
{
id: 4,
alarmState: 3,
xMap: 80,
yMap: 100,
pointName: "测温-大波浪4"
}
]);
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@mixin commonStyle{
display: flex;
align-items: center;
margin-top: 30%;
.background {
width: 10px;
height: 10px;
margin-right: 20%;
background: #eea959;
}
.state-text {
color: #ffffff;
font-size: 14px;
}
}
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
background: #112d59; background: #112d59;
} }
@ -277,14 +276,20 @@ const list = ref([
} }
} }
.changeColor1 { .changeColor1 {
background: #48da39;
}
.changeColor2 {
background: #eea959; background: #eea959;
} }
.changeColor3 { .changeColor2 {
background: #ec6266; background: #ec6266;
} }
.changeColor3 {
background: #BC753D;
}
.changeColor4 {
background: #6B6E59;
}
.changeColor5 {
background: #48da39;
}
.pit-top-left { .pit-top-left {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -316,28 +321,13 @@ const list = ref([
} }
} }
.point-state-top { .point-state-top {
width: 6%; width: 7%;
position: absolute; position: absolute;
right: 0%; right: 1%;
top: 5%; top: 5%;
.common { .emergency-warn {
display: flex; display: flex;
align-items: center; align-items: center;
.background {
width: 10px;
height: 10px;
margin-right: 20%;
background: #48da39;
}
.state-text {
color: #ffffff;
font-size: 14px;
}
}
.warn {
display: flex;
align-items: center;
margin-top: 30%;
.background { .background {
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -349,19 +339,28 @@ const list = ref([
font-size: 14px; font-size: 14px;
} }
} }
.control { .importance-warn {
display: flex; @include commonStyle;
align-items: center;
margin-top: 30%;
.background { .background {
width: 10px;
height: 10px;
margin-right: 20%;
background: #ec6266; background: #ec6266;
} }
.state-text { }
color: #ffffff; .secondary-warn{
font-size: 14px; @include commonStyle;
.background {
background: #BC753D;
}
}
.tip-warn{
@include commonStyle;
.background {
background: #6B6E59;
}
}
.common {
@include commonStyle;
.background {
background: #48da39;
} }
} }
} }

3
src/views/sevenLargeScreen/qualityControl/concreteMonitor/rightBottom.vue
View File

@ -2,7 +2,8 @@
<Card title="实时告警"> <Card title="实时告警">
<div class="concrete-right-bottom"> <div class="concrete-right-bottom">
<div class="top-data"> <div class="top-data">
<div class="data-left">告警: <span class="num">{{ meterRead.alarmNum || 0 }}</span>次</div> <div class="data-left">告警: <span class="num">{{ list.length }}</span>次</div>
<!-- <div class="data-left">告警: <span class="num">{{ meterRead.alarmNum || 0 }}</span>次</div> -->
<!-- <div class="data-right">预警: <span class="num">3</span>次</div> --> <!-- <div class="data-right">预警: <span class="num">3</span>次</div> -->
</div> </div>
<div class="monitor-list"> <div class="monitor-list">

22
src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topLeft.vue
View File

@ -43,20 +43,20 @@
<div <div
class="item-dialog" class="item-dialog"
:style="{ :style="{
left: item.mapX - 130 + 'px', left: ((+item.mapX + 50)*100/706.276) + '%',
top: item.mapY - 80 + 'px' top: ((+item.mapY - 20)*100/706.276) + '%',
}" }"
v-if="item.id === currentIndex && showDialog" v-if="item.id === currentIndex && showDialog"
> >
<div class="triangle"></div> <div class="triangle"></div>
<div class="dialog-title">{{ item.pointName }}</div> <div class="dialog-title">{{ item.measurePointName }}</div>
<div class="dialog-text">监测类型:地下水位</div> <div class="dialog-text">监测类型:{{item.monitorTypeName}}</div>
<div class="dialog-text">单次变化值:0.56mm</div> <div class="dialog-text">单次变化值:{{ item.sensorlist[0].data}}</div>
<div class="dialog-text">累计变化值:2.04mm</div> <div class="dialog-text">累计变化值:{{ item.sensorlist[0].dataTotal}}</div>
<div class="dialog-text">变化速率:0.96mm/d</div> <div class="dialog-text">变化速率:{{ item.sensorlist[0].dataRate}}</div>
<div class="dialog-text">采集时间:2023-01-01 15:00:00</div> <div class="dialog-text">采集时间:{{ item.sensorlist[0].receiveTime}}</div>
<div style="border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-top: 5%"></div> <div style="border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-top: 5%"></div>
<div class="dialog-text">当前累计变化值为2.04mm,超过报警值10mm,偏差为39.1mm</div> <div class="dialog-text">当前累计变化值为{{ item.sensorlist[0].dataTotal}},超过报警值{{ item.sensorlist[0].dataTotal - item.sensorlist[0].alarmValue}}</div>
<div class="close-icon" @click="closeDialog"> <div class="close-icon" @click="closeDialog">
<el-icon><Close /></el-icon> <el-icon><Close /></el-icon>
</div> </div>
@ -83,8 +83,8 @@ const BASEURL = import.meta.env.VITE_API_URL;
let currentIndex = ref(1 as any); let currentIndex = ref(1 as any);
// let showDialog = ref(false as any); // let showDialog = ref(false as any);
function openDialog(item: any) { function openDialog(item: any) {
// currentIndex.value = item.id; currentIndex.value = item.id;
// showDialog.value = true; showDialog.value = true;
} }
function closeDialog() { function closeDialog() {
showDialog.value = false; showDialog.value = false;