fix: BUG修改
This commit is contained in:
parent
e5c5c53904
commit
69404eb005
@ -72,6 +72,10 @@ export const concreteMaterialDataList = (params: {}) => {
|
||||
export const countUseStatus = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/concreteMixStationData/countUseStatus`, params);
|
||||
};
|
||||
// 设备列表
|
||||
export const concreteMaterialEquipList = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/concreteMixStationDev/list`, params);
|
||||
};
|
||||
|
||||
// 沥青拌合站
|
||||
// 1.各设备产量
|
||||
@ -101,7 +105,10 @@ export const concreteMaterialDataList2 = (params: {}) => {
|
||||
export const countUseStatus2 = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/pitchMixStationProdData/countUseStatus`, params);
|
||||
};
|
||||
|
||||
// 设备列表
|
||||
export const concreteMaterialEquipList2 = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/pitchMixStationDev/list`, params);
|
||||
};
|
||||
// 水稳拌合站
|
||||
// 1.各设备产量
|
||||
export const countConcreteMixStationDataTrend3 = (params: {}) => {
|
||||
@ -129,6 +136,9 @@ export const concreteMaterialDataList3 = (params: {}) => {
|
||||
export const countUseStatus3 = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/stableWaterMixStationData/countUseStatus`, params);
|
||||
};
|
||||
export const concreteMaterialEquipList3 = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/stableWaterMixStationDev/list`, params);
|
||||
};
|
||||
|
||||
// 压力试验机
|
||||
// 统计试验合格率 试验次数统计
|
||||
|
||||
@ -2,6 +2,11 @@
|
||||
<Card title="原材料用量统计">
|
||||
<div class="load-top-right">
|
||||
<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="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
|
||||
@ -21,14 +26,21 @@
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import { countMaterialName2 } from "@/api/modules/largeMachinery";
|
||||
import { countMaterialName2, concreteMaterialEquipList2 } from "@/api/modules/largeMachinery";
|
||||
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { noop } from "@vueuse/core";
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
// 选中的设备
|
||||
const selectEquipSn = ref();
|
||||
const equipList = ref([]);
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
// 设备选择改变
|
||||
const equipChange = () => {
|
||||
getMemberCareList();
|
||||
};
|
||||
function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
@ -300,9 +312,22 @@ function drawEchart() {
|
||||
};
|
||||
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);
|
||||
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);
|
||||
if (res.result.data.length > 0) {
|
||||
let dataArr = res.result.data;
|
||||
@ -335,6 +360,7 @@ const getMemberCareList = async () => {
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
getEquipList();
|
||||
getMemberCareList();
|
||||
});
|
||||
</script>
|
||||
@ -360,6 +386,51 @@ onMounted(async () => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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 {
|
||||
width: 66px;
|
||||
@ -381,48 +452,19 @@ onMounted(async () => {
|
||||
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
// 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 {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 37%;
|
||||
margin-top: -18%;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
|
||||
@ -2,6 +2,11 @@
|
||||
<Card title="原材料用量统计">
|
||||
<div class="load-top-right">
|
||||
<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="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
|
||||
@ -21,14 +26,21 @@
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import { countMaterialName } from "@/api/modules/largeMachinery";
|
||||
import { countMaterialName, concreteMaterialEquipList } from "@/api/modules/largeMachinery";
|
||||
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { noop } from "@vueuse/core";
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
// 选中的设备
|
||||
const selectEquipSn = ref();
|
||||
const equipList = ref([]);
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
// 设备选择改变
|
||||
const equipChange = () => {
|
||||
getMemberCareList();
|
||||
};
|
||||
function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
@ -108,7 +120,7 @@ function drawEchart() {
|
||||
color: "#ccc",
|
||||
fontSize: 14,
|
||||
lineHeight: 40,
|
||||
fontWeight: "normal",
|
||||
fontWeight: "normal"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
@ -300,9 +312,22 @@ function drawEchart() {
|
||||
};
|
||||
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);
|
||||
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);
|
||||
if (res.result.data.length > 0) {
|
||||
let dataArr = res.result.data;
|
||||
@ -335,6 +360,7 @@ const getMemberCareList = async () => {
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
getEquipList();
|
||||
getMemberCareList();
|
||||
});
|
||||
</script>
|
||||
@ -360,6 +386,50 @@ onMounted(async () => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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 {
|
||||
width: 66px;
|
||||
@ -381,48 +451,18 @@ onMounted(async () => {
|
||||
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
// 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 {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 37%;
|
||||
margin-top: -18%;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
|
||||
@ -8,35 +8,35 @@
|
||||
</div> -->
|
||||
<div class="install-common">
|
||||
<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 class="install-common">
|
||||
<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 class="install-common">
|
||||
<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 class="install-common">
|
||||
<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 class="install-common">
|
||||
<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 class="install-common">
|
||||
<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 class="install-common">
|
||||
<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 class="install-common">
|
||||
<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 class="install-unconnect">
|
||||
<div class="dev-name">8#</div>
|
||||
|
||||
@ -2,6 +2,11 @@
|
||||
<Card title="原材料用量统计">
|
||||
<div class="load-top-right">
|
||||
<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="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
|
||||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7天</div>
|
||||
@ -21,14 +26,21 @@
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import { countMaterialName3 } from "@/api/modules/largeMachinery";
|
||||
import { countMaterialName3, concreteMaterialEquipList3 } from "@/api/modules/largeMachinery";
|
||||
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { noop } from "@vueuse/core";
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
// 选中的设备
|
||||
const selectEquipSn = ref();
|
||||
const equipList = ref([]);
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
// 设备选择改变
|
||||
const equipChange = () => {
|
||||
getMemberCareList();
|
||||
};
|
||||
function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
@ -300,9 +312,22 @@ function drawEchart() {
|
||||
};
|
||||
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);
|
||||
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);
|
||||
if (res.result.data.length > 0) {
|
||||
let dataArr = res.result.data;
|
||||
@ -335,6 +360,7 @@ const getMemberCareList = async () => {
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
getEquipList();
|
||||
getMemberCareList();
|
||||
});
|
||||
</script>
|
||||
@ -360,6 +386,52 @@ onMounted(async () => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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 {
|
||||
width: 66px;
|
||||
@ -381,48 +453,18 @@ onMounted(async () => {
|
||||
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
// 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 {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 37%;
|
||||
margin-top: -18%;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
|
||||
@ -7,18 +7,26 @@
|
||||
</el-select>
|
||||
</div>
|
||||
<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="background"></div>
|
||||
<div class="state-text">正常</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 class="point-map" v-if="list.length > 0">
|
||||
<img :src="imgUrl" alt="" />
|
||||
@ -26,13 +34,15 @@
|
||||
<div
|
||||
class="point-item"
|
||||
:class="
|
||||
item.alarmState == 1
|
||||
item.currentData.alarmLevel == 1
|
||||
? 'changeColor1'
|
||||
: item.alarmState == 2
|
||||
: item.currentData.alarmLevel == 2
|
||||
? 'changeColor2'
|
||||
: item.alarmState == 3
|
||||
: item.currentData.alarmLevel == 3
|
||||
? 'changeColor3'
|
||||
: 'changeColor1'
|
||||
: item.currentData.alarmLevel == 4
|
||||
? 'changeColor4'
|
||||
: 'changeColor5'
|
||||
"
|
||||
:title="item.measurePointName"
|
||||
:style="{
|
||||
@ -44,14 +54,15 @@
|
||||
<div
|
||||
class="item-dialog"
|
||||
:style="{
|
||||
left: item.mapX + 20 + 'px',
|
||||
top: item.mapY - 10 + 'px'
|
||||
left: +item.mapX + 30 + 'px',
|
||||
top: +item.mapY - 5 + 'px'
|
||||
}"
|
||||
v-if="item.id === currentIndex && showDialog"
|
||||
>
|
||||
<div class="triangle"></div>
|
||||
<div class="dialog-title">{{ item.pointName }}</div>
|
||||
<div class="dialog-text" style="color: #ec6266; display: flex">
|
||||
<div class="dialog-title">监测点名称:{{ item.pointName }}</div>
|
||||
<div class="dialog-text">温度:{{ item.currentData.temperature || 0 }}°C</div>
|
||||
<!-- <div class="dialog-text" style="color: #ec6266; display: flex">
|
||||
<div class="text-icon">
|
||||
<el-icon><Warning /></el-icon>
|
||||
</div>
|
||||
@ -61,16 +72,16 @@
|
||||
<div class="dialog-text">中上层温度:43°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="close-icon" @click="closeDialog">
|
||||
<el-icon><Close /></el-icon>
|
||||
</div>
|
||||
<div class="open-history" @click="openHistoryDialog">
|
||||
<!-- <div class="open-history" @click="openHistoryDialog">
|
||||
<div class="history-text">历史数据</div>
|
||||
<div class="history-icon">
|
||||
<el-icon><CaretRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -103,7 +114,8 @@ const BASEURL = import.meta.env.VITE_API_URL;
|
||||
// 打开点位详情弹窗
|
||||
// const historyRef = ref();
|
||||
const openHistoryDialog = () => {
|
||||
closeDialog();
|
||||
// closeDialog();
|
||||
// showDialog.value = true;
|
||||
// historyRef.value.openDialog();
|
||||
// console.log(historyRef.value);
|
||||
};
|
||||
@ -158,8 +170,9 @@ const getPointList = async () => {
|
||||
let currentIndex = ref(1 as any);
|
||||
let showDialog = ref(false as any);
|
||||
function openDialog(item: any) {
|
||||
// currentIndex.value = item.id;
|
||||
// showDialog.value = true;
|
||||
console.log(item)
|
||||
currentIndex.value = item.id;
|
||||
showDialog.value = true;
|
||||
}
|
||||
function closeDialog() {
|
||||
showDialog.value = false;
|
||||
@ -170,39 +183,25 @@ onMounted(async () => {
|
||||
getMemberCareList();
|
||||
});
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
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"
|
||||
}
|
||||
]);
|
||||
const list = ref([] as any);
|
||||
</script>
|
||||
|
||||
<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) {
|
||||
background: #112d59;
|
||||
}
|
||||
@ -277,14 +276,20 @@ const list = ref([
|
||||
}
|
||||
}
|
||||
.changeColor1 {
|
||||
background: #48da39;
|
||||
}
|
||||
.changeColor2 {
|
||||
background: #eea959;
|
||||
}
|
||||
.changeColor3 {
|
||||
.changeColor2 {
|
||||
background: #ec6266;
|
||||
}
|
||||
.changeColor3 {
|
||||
background: #BC753D;
|
||||
}
|
||||
.changeColor4 {
|
||||
background: #6B6E59;
|
||||
}
|
||||
.changeColor5 {
|
||||
background: #48da39;
|
||||
}
|
||||
.pit-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -316,28 +321,13 @@ const list = ref([
|
||||
}
|
||||
}
|
||||
.point-state-top {
|
||||
width: 6%;
|
||||
width: 7%;
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
right: 1%;
|
||||
top: 5%;
|
||||
.common {
|
||||
.emergency-warn {
|
||||
display: flex;
|
||||
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 {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@ -349,19 +339,28 @@ const list = ref([
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 30%;
|
||||
.importance-warn {
|
||||
@include commonStyle;
|
||||
.background {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 20%;
|
||||
background: #ec6266;
|
||||
}
|
||||
.state-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.secondary-warn{
|
||||
@include commonStyle;
|
||||
.background {
|
||||
background: #BC753D;
|
||||
}
|
||||
}
|
||||
.tip-warn{
|
||||
@include commonStyle;
|
||||
.background {
|
||||
background: #6B6E59;
|
||||
}
|
||||
}
|
||||
.common {
|
||||
@include commonStyle;
|
||||
.background {
|
||||
background: #48da39;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<Card title="实时告警">
|
||||
<div class="concrete-right-bottom">
|
||||
<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>
|
||||
<div class="monitor-list">
|
||||
|
||||
@ -43,20 +43,20 @@
|
||||
<div
|
||||
class="item-dialog"
|
||||
:style="{
|
||||
left: item.mapX - 130 + 'px',
|
||||
top: item.mapY - 80 + 'px'
|
||||
left: ((+item.mapX + 50)*100/706.276) + '%',
|
||||
top: ((+item.mapY - 20)*100/706.276) + '%',
|
||||
}"
|
||||
v-if="item.id === currentIndex && showDialog"
|
||||
>
|
||||
<div class="triangle"></div>
|
||||
<div class="dialog-title">{{ item.pointName }}</div>
|
||||
<div class="dialog-text">监测类型:地下水位</div>
|
||||
<div class="dialog-text">单次变化值:0.56mm</div>
|
||||
<div class="dialog-text">累计变化值:2.04mm</div>
|
||||
<div class="dialog-text">变化速率:0.96mm/d</div>
|
||||
<div class="dialog-text">采集时间:2023-01-01 15:00:00</div>
|
||||
<div class="dialog-title">{{ item.measurePointName }}</div>
|
||||
<div class="dialog-text">监测类型:{{item.monitorTypeName}}</div>
|
||||
<div class="dialog-text">单次变化值:{{ item.sensorlist[0].data}}</div>
|
||||
<div class="dialog-text">累计变化值:{{ item.sensorlist[0].dataTotal}}</div>
|
||||
<div class="dialog-text">变化速率:{{ item.sensorlist[0].dataRate}}</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 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">
|
||||
<el-icon><Close /></el-icon>
|
||||
</div>
|
||||
@ -83,8 +83,8 @@ const BASEURL = import.meta.env.VITE_API_URL;
|
||||
let currentIndex = ref(1 as any);
|
||||
// let showDialog = ref(false as any);
|
||||
function openDialog(item: any) {
|
||||
// currentIndex.value = item.id;
|
||||
// showDialog.value = true;
|
||||
currentIndex.value = item.id;
|
||||
showDialog.value = true;
|
||||
}
|
||||
function closeDialog() {
|
||||
showDialog.value = false;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user