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

flx：对接完善雨量监测接口

Browse Source
This commit is contained in:
X_Rian 2024-07-01 17:36:16 +08:00
parent abfca52c18
commit 7074de9ad7
12 changed files with 279 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/modules/headNoise.ts
View File

@ -18,7 +18,6 @@ export const selectDustNoiseDataApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/dustNoiseData/queryTodayTrendGroupByHour`, params);
};
//查询环境设备最新一条实时数据
export const getRealTimeDustNoiseDataApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/dustNoiseData/getRealTimeDustNoiseData`, params);
@ -63,4 +62,16 @@ export const getRealTimeRainRecordApi = (params: {}) => {
// 晴雨表
export const getRainWeatherDataApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/rainBigScreen/getWeatherData`, params);
};
};
//查询空气质量统计
export const getRainAirQualityStatisticsApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/rainBigScreen/getAirQualityStatistics`, params);
};
//今日报警统计
export const getRainAlarmCountTotalApi = (params: {}) => {
return http.post(BASEURL + `/xmgl/rainBigScreen/selectRainAlarmCountTotal`, params);
};
//分页列表查询雨量监测报警记录信息
export const getRainAlarmPage = (params: {}) => {
return http.get(BASEURL + `/xmgl/rainAlarm/page`, params);
};

4
src/views/commandScreen/commandCenter/rightAll.vue
View File

@ -394,7 +394,7 @@ const getSpecialTrend = async (showLoading: boolean, val: number, isRight?: bool
console.log("特殊作业风险预测趋势", res.result);
randerInfo2.dataList = [
{
name: activeInfo.rightCount == 1 ? "恶劣天气影响风险概率预测" : "隐患未消项影响风险概率预测",
name: activeInfo.rightCount == 1 ? "恶劣天气影响风险概率预测" : "隐患未销项影响风险概率预测",
value: [
res.result.specialOperationFireSafety,
res.result.highJobSafe,
@ -1681,7 +1681,7 @@ let dataList2 = ref([
// emits("openDialog", {
// index: 7,
// title: params.name + "未消项目",
// title: params.name + "未销项目",
// majorInfo: {
// isOverdueRectification: 0,
// isNotQualified: 1,

35
src/views/sevenLargeScreen/headNoise/centerTop.vue
View File

@ -76,24 +76,23 @@ const getRealTimeDustNoiseData = async () => {
});
if (res.result) {
plantCap.value = res.result;
}
// else {
// plantCap.value = {
// crc: "--",
// humidity: "--",
// noise: "--",
// plateHumidity: "--",
// plateTemperature: "--",
// pm10: "--",
// pm25: "--",
// pressure: "--",
// temperature: "--",
// tsp: "--",
// voltage: "--",
// winddirectionName: "--",
// windspeed: "--"
// };
// }
} else {
plantCap.value = {
crc: "--",
humidity: "--",
noise: "--",
plateHumidity: "--",
plateTemperature: "--",
pm10: "--",
pm25: "--",
pressure: "--",
temperature: "--",
tsp: "--",
voltage: "--",
winddirectionName: "--",
windspeed: "--"
};
}
//发送编号
mitts.emit("currentDevDetail", currentDevDetail);
};

2
src/views/sevenLargeScreen/headNoise/leftBottom.vue
View File

@ -16,7 +16,7 @@
v-for="(item, index) in noiseList"
:key="index"
:label="item.label"
:value="item.value"
:value="item.label"
@click="checkChange(item.label)"
/>
</el-select>

4
src/views/sevenLargeScreen/headNoise/leftCenter.vue
View File

@ -10,7 +10,7 @@
<div class="num">{{ offlineDevNum }}</div>
</div>
</div>
<div class="decivList">
<el-scrollbar class="decivList">
<div class="menuDev" v-for="item in deciData" :class="item.devOnline == 1 ? 'online' : 'offline'">
<div class="decName">
<span v-show="item.devOnline == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
@ -23,7 +23,7 @@
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</div>
</el-scrollbar>
</Card>
</template>

8
src/views/sevenLargeScreen/indexL.vue
View File

@ -377,10 +377,10 @@ let menuList = ref([
companyPath: "/sewageMonitor",
menuName: "污水监测"
},
// {
// companyPath: "/rainfallMonitoring",
// menuName: "雨量监测"
// }
{
companyPath: "/rainfallMonitoring",
menuName: "雨量监测"
}
]
},
{

94
src/views/sevenLargeScreen/rainfallMonitoring/centerTop.vue
View File

@ -16,13 +16,23 @@
<div class="gifImg">
<img src="@/assets/images/dustNoise/centerGif.gif" alt="" />
</div>
<div class="menListWd menu">温度:{{ plantCap.temperature || plantCap.temperature == '0' ? plantCap.temperature : "--" }}℃</div>
<div class="menListSd menu">湿度:{{ plantCap.humidity || plantCap.humidity == '0' ? plantCap.humidity : "--" }}%RH</div>
<div class="menListPm2 menu">PM2.5:{{ plantCap.pm25 || plantCap.pm25 == '0' ? plantCap.pm25 : "--" }}ug/m³</div>
<div class="menListTs menu">TSP:{{ plantCap.tsp || plantCap.tsp == '0' ? plantCap.tsp : "--" }}ug/m³</div>
<div class="menListPm10 menu">PM10:{{ plantCap.pm10 || plantCap.pm10 == '0' ? plantCap.pm10 : "--" }}ug/m³</div>
<div class="menListZs menu">噪声:{{ plantCap.noise || plantCap.noise == '0' ? plantCap.noise : "--" }}dB</div>
<div class="menListFs menu">风速:{{ plantCap.windspeed || plantCap.windspeed == '0' ? plantCap.windspeed : "--" }}m/s</div>
<div class="menListWd menu">
空气温度:{{ plantCap.airTemperature || plantCap.airTemperature == "0" ? plantCap.airTemperature : "--" }}℃
</div>
<div class="menListSd menu">
空气湿度:{{ plantCap.airHumidity || plantCap.airHumidity == "0" ? plantCap.airHumidity : "--" }}%RH
</div>
<div class="menListPm2 menu">
大气压:{{ plantCap.atmosphericPressure || plantCap.atmosphericPressure == "0" ? plantCap.atmosphericPressure : "--" }}Kpa
</div>
<div class="menListTs menu">
今日雨量:{{ plantCap.currentRainfall || plantCap.currentRainfall == "0" ? plantCap.currentRainfall : "--" }}mm
</div>
<div class="menListPm10 menu">
昨日雨量:{{ plantCap.dailyRainfall || plantCap.dailyRainfall == "0" ? plantCap.dailyRainfall : "--" }}mm
</div>
<div class="menListZs menu">风力:{{ plantCap.windForce || plantCap.windForce == "0" ? plantCap.windForce : "--" }}级</div>
<div class="menListFs menu">风速:{{ plantCap.windSpeed || plantCap.windSpeed == "0" ? plantCap.windSpeed : "--" }}m/s</div>
</div>
</div>
</template>
@ -34,37 +44,37 @@ import mitts from "@/utils/bus"; //兄弟组件传值
import { ref, reactive, onMounted } from "vue";
const store = GlobalStore();
let deviceName = ref("");
let noiseList = ref([]);
let noiseList = ref([] as any[]);
let plantCap = ref({
crc: "--",
humidity: "--",
noise: "--",
airHumidity: "--",
windForce: "--",
plateHumidity: "--",
plateTemperature: "--",
pm10: "--",
pm25: "--",
dailyRainfall: "--",
atmosphericPressure: "--",
pressure: "--",
temperature: "--",
tsp: "--",
airTemperature: "--",
currentRainfall: "--",
voltage: "--",
winddirectionName: "--",
windspeed: "--"
});
let currentDevDetail = reactive({});
windSpeed: "--"
} as any);
let currentDevDetail = reactive({} as any);
//切换设备
const realTimeMonitor = val => {
const realTimeMonitor = (val: any) => {
currentDevDetail = val;
getRealTimeDustNoiseData();
};
//获取设备下拉
const getList = async () => {
const res = await getRainDevlApi({ projectSn: store.sn });
const res: any = await getRainDevlApi({ projectSn: store.sn });
console.log("获取设备下拉", res);
if (res.result.length > 0) {
noiseList.value = res.result;
deviceName.value = res.result[0].devName;
currentDevDetail = res.result[0];
getRealTimeDustNoiseData();
}
};
@ -76,27 +86,29 @@ const getRealTimeDustNoiseData = async () => {
});
if (res.result) {
plantCap.value = res.result;
}
// else {
// plantCap.value = {
// crc: "--",
// humidity: "--",
// noise: "--",
// plateHumidity: "--",
// plateTemperature: "--",
// pm10: "--",
// pm25: "--",
// pressure: "--",
// temperature: "--",
// tsp: "--",
// voltage: "--",
// winddirectionName: "--",
// windspeed: "--"
// };
// }
} else {
plantCap.value = {
crc: "--",
airHumidity: "--",
windForce: "--",
plateHumidity: "--",
plateTemperature: "--",
dailyRainfall: "--",
atmosphericPressure: "--",
pressure: "--",
airTemperature: "--",
currentRainfall: "--",
voltage: "--",
winddirectionName: "--",
windSpeed: "--"
};
}
//发送编号
mitts.emit("currentDevDetail", currentDevDetail);
};
onMounted(() => {
getList();
});
@ -122,10 +134,10 @@ onMounted(() => {
font-family: OPPOSansH;
}
}
.content{
.content {
position: relative;
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.selectRight {

126
src/views/sevenLargeScreen/rainfallMonitoring/leftBottom.vue
View File

@ -2,7 +2,7 @@
<Card title="趋势图">
<div class="box">
<div class="selectRight">
<!-- <el-date-picker
<!-- <el-date-picker
style="width:100%"
v-model="value1"
type="daterange"
@ -11,20 +11,19 @@
end-placeholder="结束日期"
>
</el-date-picker> -->
<el-select class="m-2" placeholder="Select" size="small" v-model="selectValue">
<el-option
v-for="(item, index) in noiseList"
:key="index"
:label="item.label"
:value="item.value"
@click="checkChange(item.label)"
/>
</el-select>
</div>
<el-select class="m-2" placeholder="Select" size="small" v-model="selectValue">
<el-option
v-for="(item, index) in noiseList"
:key="index"
:label="item.label"
:value="item.label"
@click="checkChange(item.label)"
/>
</el-select>
</div>
<div id="myEcharts" ref="myEcharts" style="width: 100%; height: 100%"></div>
<div id="myEcharts" ref="myEcharts" style="width: 100%; height: 100%"></div>
</div>
</Card>
</template>
@ -36,23 +35,23 @@ import * as echarts from "echarts";
import Card from "@/components/card.vue";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
let dustData_24 = ref([]);
let xData = ref([]);
let yData = ref([]);
let dustData_24 = ref([] as any[]);
let xData = ref([] as any[]);
let yData = ref([] as any[]);
let chart = ref();
let yUnit = ref("单位:ug/m³") as any;
let yUnit = ref("Kpa") as any;
const noiseList = [
{
value: 0,
label: "PM2.5"
label: "大气压"
},
{
value: 1,
label: "PM10"
label: "今日雨量"
},
{
value: 2,
label: "噪声"
label: "昨日雨量"
},
// {
// value: 3,
@ -64,19 +63,19 @@ const noiseList = [
},
{
value: 5,
label: "TSP"
label: "风力"
},
{
value: 6,
label: "温度"
label: "空气温度"
},
{
value: 7,
label: "湿度"
label: "空气湿度"
}
];
let receive = ref("" as any);
let selectValue = ref("PM2.5" as any);
let selectValue = ref("大气压" as any);
function drawChart() {
let myEchart = echarts.init(document.getElementById("myEcharts"));
let option = {
@ -267,7 +266,7 @@ function drawChart() {
// }
}
//获取趋势图数据
const getList = async type => {
const getList = async (type: any) => {
//当前日期
// let now = new Date();
// let yy = now.getFullYear(); //年
@ -278,47 +277,45 @@ const getList = async type => {
// time += mm + "-";
// if (dd < 10) time += "0";
// time += dd;
const res = await selectRainDustNoiseDataApi({
const res: any = await selectRainDustNoiseDataApi({
// searchDate: time,
deviceId: type,
devSn: type,
projectSn: store.sn
});
console.log("左下角趋势图", res.result);
dustData_24.value = res.result;
xData.value = [];
yData.value = [];
res.result.forEach(item => {
res.result.forEach((item: any) => {
xData.value.push(item.time);
yData.value.push(item.pm25);
yData.value.push(item.atmosphericPressure);
});
drawChart();
checkChange(selectValue.value);
};
const checkChange = (val: any) => {
yData.value = [];
dustData_24.value.forEach(item => {
if (val == "PM2.5") {
yData.value.push(item.pm25);
yUnit.value = "ug/m³";
} else if (val == "PM10") {
yData.value.push(item.pm10);
yUnit.value = "ug/m³";
} else if (val == "噪声") {
yData.value.push(item.noise);
yUnit.value = "dB";
} else if (val == "夜晚噪音") {
yData.value.push(item.nightNoise);
yUnit.value = "dB";
dustData_24.value.forEach((item: any) => {
if (val == "大气压") {
yData.value.push(item.atmosphericPressure);
yUnit.value = "Kpa";
} else if (val == "今日雨量") {
yData.value.push(item.currentRainfall);
yUnit.value = "mm";
} else if (val == "昨日雨量") {
yData.value.push(item.dailyRainfall);
yUnit.value = "mm";
} else if (val == "风力") {
yData.value.push(item.windForce);
yUnit.value = "级";
} else if (val == "风速") {
yData.value.push(item.windspeed);
yData.value.push(item.windSpeed);
yUnit.value = "m/s";
} else if (val == "TSP") {
yData.value.push(item.tsp);
yUnit.value = "ug/m³";
} else if (val == "温度") {
yData.value.push(item.temperature);
} else if (val == "空气温度") {
yData.value.push(item.airTemperature);
yUnit.value = "℃";
} else if (val == "湿度") {
yData.value.push(item.humidity);
} else if (val == "空气湿度") {
yData.value.push(item.airHumidity);
yUnit.value = "%RH";
}
});
@ -335,14 +332,13 @@ onMounted(async () => {
// },
// false
// );
checkChange(selectValue.value);
mitts.on("currentDevDetail", e => {
receive.value = e.deviceId;
getList(e.deviceId);
mitts.on("currentDevDetail", (e: any) => {
console.log(11111, e);
receive.value = e.devSn;
getList(e.devSn);
});
});
//
//
onBeforeUnmount(async () => {
mitts.off("currentDevDetail");
echarts.dispose;
@ -350,17 +346,17 @@ onBeforeUnmount(async () => {
</script>
<style lang="scss" scoped>
.box{
width: 100%;
height: 100%;
position: relative;
}
.box {
width: 100%;
height: 100%;
position: relative;
}
.selectRight {
position: absolute;
left: 75%;
width: 20%;
top: 6%;
z-index: 9;
left: 75%;
width: 20%;
top: 6%;
z-index: 9;
}
::v-deep .el-input__wrapper {

5
src/views/sevenLargeScreen/rainfallMonitoring/leftCenter.vue
View File

@ -10,7 +10,7 @@
<div class="num">{{ offlineDevNum }}</div>
</div>
</div>
<div class="decivList">
<el-scrollbar class="decivList">
<div class="menuDev" v-for="item in deciData" :class="item.online == 1 ? 'online' : 'offline'">
<div class="decName">
<span v-show="item.online == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
@ -23,7 +23,7 @@
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</div>
</el-scrollbar>
</Card>
</template>
@ -90,6 +90,7 @@ onMounted(() => {
.decivList {
width: 100%;
height: 70%;
// overflow-y: scroll;
.menuDev {
height: 20%;
background: url("@/assets/images/dustNoise/listImg.png") no-repeat;

92
src/views/sevenLargeScreen/rainfallMonitoring/rightBottom.vue
View File

@ -7,12 +7,19 @@
<div>报警类型</div>
</div>
<div class="listBox" ref="scrollRef">
<el-scrollbar style="height: 80%">
<div v-for="item in list" class="listStyle">
<!-- <vue3-seamless-scroll :speed="1" :list="list" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll">
<div v-for="item in list" :key="item.id" class="listStyle">
<div style="margin-left: 10px" class="dev">{{ item.deviceName }}</div>
<div>{{ item.tempAlarmTime }}</div>
<div>{{ item.alarmTypeName }}</div>
</div>
</vue3-seamless-scroll> -->
<el-scrollbar ref="refScrollbar" style="height: 80%">
<div v-for="item in list" :key="item.id" class="listStyle">
<div style="margin-left: 10px" class="dev">{{ item.devName }}</div>
<div>{{ item.alarmTime }}</div>
<div>{{ alarmListType[item.alarmType - 1] }}</div>
</div>
</el-scrollbar>
<div class="notoDta" v-if="list.length == 0">
<img src="@/assets/images/noData.png" alt="" />
@ -25,20 +32,66 @@
<script lang="ts" setup>
import Card from "@/components/card.vue";
import { selectNewEnvironmentAlarmListApi } from "@/api/modules/headNoise";
import { getRainAlarmPage } from "@/api/modules/headNoise";
import { GlobalStore } from "@/stores";
import { ref, onMounted } from "vue";
const store = GlobalStore();
const list = ref([]);
const alarmListType = ref([
"风力",
"风速",
"风向",
"累计雨量",
"瞬时雨量",
"今日雨量",
"昨日雨量",
"空气温度",
"空气湿度",
"大气压"
] as any[]);
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
const moreScroll = ref(true as any);
const pageNo = ref(1 as any);
const list = ref([] as any[]);
//获取报警记录
const getList = async () => {
const res = await selectNewEnvironmentAlarmListApi({ projectSn: store.sn });
const getList = async (tip: any) => {
const res: any = await getRainAlarmPage({
projectSn: store.sn,
pageNo: tip == "search" ? 1 : pageNo.value,
pageSize: 10
});
console.log("获取报警记录", res);
list.value = res.result;
if (tip == "more") {
const newResult = res.result.records.map((item: any) => {
return {
...item,
whiteSpace: false
};
});
list.value = list.value.concat(newResult);
} else {
list.value = res.result.records;
}
if (res.result.pages == pageNo.value) {
moreScroll.value = false;
} else {
pageNo.value = pageNo.value + 1;
}
// list.value = res.result;
};
onMounted(() => {
getList();
getList("search");
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
const scrollTop = e.target.scrollTop;
const scrollHeight = e.target.scrollHeight;
const clientHeight = e.target.clientHeight;
// 向上加载更多
if (scrollTop >= scrollHeight - clientHeight - 1) {
if (moreScroll.value) {
getList("more");
}
}
});
});
</script>
@ -46,6 +99,7 @@ onMounted(() => {
.tableBox {
width: 100%;
height: 100%;
position: relative;
.tabList {
display: flex;
@ -63,13 +117,14 @@ onMounted(() => {
div {
text-align: center;
width: 30%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.listBox {
height: 91%;
position: relative;
.listStyle {
display: flex;
justify-content: space-around;
@ -78,7 +133,7 @@ onMounted(() => {
line-height: 25px;
font-size: calc(100vw * 12 / 1920);
div {
text-align: center;
text-align: center;
width: 30%;
white-space: nowrap;
@ -91,11 +146,11 @@ onMounted(() => {
}
}
.notoDta {
top: 75%;
width: 12%;
margin: 5% -40%;
left: 120%;
top: 50%;
width: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
img {
width: 40%;
margin: 5% 30%;
@ -103,7 +158,8 @@ onMounted(() => {
p {
color: #fff;
font-size: calc(100vw * 14 / 1920);
margin: -6% 37%;
margin: -6% 0;
text-align: center;
}
}
}

48
src/views/sevenLargeScreen/rainfallMonitoring/rightCenter.vue
View File

@ -9,10 +9,10 @@
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
import { getAlarmCountTotalApi } from "@/api/modules/headNoise";
import { getRainAlarmCountTotalApi } from "@/api/modules/headNoise";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
// let timer = ref(null);
@ -23,22 +23,22 @@ const totalAlarm = ref(0);
//图形右侧数据
let totalData = ref([
{
name: "噪声报警",
name: "大气压报警",
value: 0,
radio: 0
},
{
name: "PM2.5超标报警",
name: "今日雨量报警",
value: 0,
radio: 0
},
{
name: "PM10超标报警",
name: "昨日雨量报警",
value: 0,
radio: 0
},
{
name: "TSP报警",
name: "风力报警",
value: 0,
radio: 0
},
@ -61,19 +61,19 @@ let totalData = ref([
//控制图形数据比例
let trafficWay = reactive([
{
name: "噪声报警",
name: "大气压报警",
value: 10
},
{
name: "PM2.5超标报警",
name: "今日雨量报警",
value: 10
},
{
name: "PM10超标报警",
name: "昨日雨量报警",
value: 10
},
{
name: "TSP报警",
name: "风力报警",
value: 10
},
{
@ -373,7 +373,7 @@ let option = ref({
}
return num;
},
data: ["噪声报警", "PM2.5超标报警", "PM10超标报警", "TSP报警", "温度报警", "湿度报警", "风速报警"],
data: ["大气压报警", "今日雨量报警", "昨日雨量报警", "风力报警", "温度报警", "湿度报警", "风速报警"],
top: 20,
right: 300,
left: 280,
@ -438,28 +438,28 @@ function getCirlPoint(x0, y0, r, angle) {
// }
//获取今日报警统计
const getList = async () => {
const res = await getAlarmCountTotalApi({
sn: store.sn,
const res: any = await getRainAlarmCountTotalApi({
projectSn: store.sn,
selectType: 1
});
// console.log("获取今日报警统计", res);
if (res.result) {
totalAlarm.value = res.result.totalAlarm;
for (let i = 0; i < totalData.value.length; i++) {
if (totalData.value[i].name == "噪声报警") {
totalData.value[i].value = res.result.noiseNum;
} else if (totalData.value[i].name == "PM2.5超标报警") {
totalData.value[i].value = res.result.pm25Num;
} else if (totalData.value[i].name == "PM10超标报警") {
totalData.value[i].value = res.result.pm10Num;
} else if (totalData.value[i].name == "TSP报警") {
totalData.value[i].value = res.result.tspNum;
if (totalData.value[i].name == "大气压报警") {
totalData.value[i].value = res.result.atmosphericPressureNum;
} else if (totalData.value[i].name == "今日雨量报警") {
totalData.value[i].value = res.result.currentRainfallNum;
} else if (totalData.value[i].name == "昨日雨量报警") {
totalData.value[i].value = res.result.dailyRainfallNum;
} else if (totalData.value[i].name == "风力报警") {
totalData.value[i].value = res.result.windForceNum;
} else if (totalData.value[i].name == "温度报警") {
totalData.value[i].value = res.result.temperatureNum;
totalData.value[i].value = res.result.airTemperatureNum;
} else if (totalData.value[i].name == "湿度报警") {
totalData.value[i].value = res.result.humidityNum;
totalData.value[i].value = res.result.airHumidityNum;
} else if (totalData.value[i].name == "风速报警") {
totalData.value[i].value = res.result.windspeedNum;
totalData.value[i].value = res.result.windSpeedNum;
}
}
console.log("获取今日报警统计", totalData.value);

53
src/views/sevenLargeScreen/rainfallMonitoring/rightTop.vue
View File

@ -2,36 +2,35 @@
<Card title="空气分析">
<div class="box">
<div class="rightHeader">
<div
class="day"
:class="airType == 1 ? 'active' : ''"
@click="
airType = 1;
getAirQualityStatistics();
"
>
最近30天
</div>
<div
class="year"
:class="airType == 2 ? 'active' : ''"
@click="
airType = 2;
getAirQualityStatistics();
"
>
最近一年
<div
class="day"
:class="airType == 1 ? 'active' : ''"
@click="
airType = 1;
getAirQualityStatistics();
"
>
最近30天
</div>
<div
class="year"
:class="airType == 2 ? 'active' : ''"
@click="
airType = 2;
getAirQualityStatistics();
"
>
最近一年
</div>
</div>
<div id="rightEcharts" ref="rightEcharts" style="width: 100%; height: 100%"></div>
</div>
<div id="rightEcharts" ref="rightEcharts" style="width: 100%; height: 100%"></div>
</div>
</Card>
</template>
<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
import { getRainAirQualityStatisticsApi } from "@/api/modules/headNoise";
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import Card from "@/components/card.vue";
@ -183,7 +182,7 @@ function rightChart() {
//获取空气分析
const getAirQualityStatistics = async () => {
const res = await getAirQualityStatisticsApi({
const res = await getRainAirQualityStatisticsApi({
type: airType.value,
projectSn: store.sn
});
@ -231,14 +230,12 @@ onMounted(async () => {
.day {
width: 80%;
margin-right: 5%;
z-index:99;
z-index: 99;
}
.year {
width: 80%;
margin-right: 8%;
z-index:99;
z-index: 99;
}
}
</style>