fix: BUG修改
This commit is contained in:
kun
parent
effd1877ca
commit
76fca2dd09
@ -91,13 +91,17 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow-y: scroll;
|
||||
.echarts-option {
|
||||
padding: 10px;
|
||||
border: 1px solid #216876;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
.top-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid white;
|
||||
padding-bottom: 10px;
|
||||
> span {
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
@ -106,7 +110,7 @@
|
||||
}
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: 500px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,40 +31,47 @@
|
||||
<div class="search-select">
|
||||
<el-card shadow="never" class="topCard">
|
||||
<span style="margin: 0 20px 2px 0px; font-size: 18px">分组</span>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="温度"></el-checkbox>
|
||||
<el-checkbox label="风速"></el-checkbox>
|
||||
<el-checkbox label="PM2.5"></el-checkbox>
|
||||
<el-checkbox label="噪音"></el-checkbox>
|
||||
<el-checkbox label="PM10"></el-checkbox>
|
||||
<el-checkbox label="TSP"></el-checkbox>
|
||||
<el-checkbox label="湿度"></el-checkbox>
|
||||
<el-checkbox label="风向"></el-checkbox>
|
||||
<el-checkbox-group v-model="checkList" @change="optionChange">
|
||||
<el-checkbox :label="item.label" v-for="item in optionList">{{ item.label }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="echarts-content">
|
||||
<div class="echarts-option">
|
||||
<div class="echarts-option" v-for="(item, index) in echartsList" :key="index">
|
||||
<div class="top-search">
|
||||
<span>温度</span>
|
||||
<el-date-picker
|
||||
style="width: 260px; margin-right: 10px"
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
></el-date-picker>
|
||||
<el-date-picker
|
||||
style="width: 260px; margin-right: 10px"
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
></el-date-picker>
|
||||
<el-select style="width: 200px; margin-right: 10px" v-model="value2" clearable placeholder="请选择">
|
||||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<span>{{ item.title }}</span>
|
||||
<el-select style="width: 200px; margin-right: 10px" v-model="item.code" clearable placeholder="请选择">
|
||||
<el-option v-for="item1 in deviceList" :key="item1.code" :label="item1.name" :value="item1.code" />
|
||||
</el-select>
|
||||
<el-button type="primary" style="margin-left: 10px">查询</el-button>
|
||||
<el-date-picker
|
||||
style="width: 260px; margin-right: 10px"
|
||||
v-model="item.startTime"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="datetime"
|
||||
placeholder="选择开始时间"
|
||||
></el-date-picker>
|
||||
<el-date-picker
|
||||
style="width: 260px; margin-right: 10px"
|
||||
v-model="item.endTime"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="datetime"
|
||||
placeholder="选择结束时间"
|
||||
></el-date-picker>
|
||||
<el-select
|
||||
style="width: 200px; margin-right: 10px"
|
||||
v-model="item.rangeTime"
|
||||
value-key="label"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
@change="val => rangeChange(val, index)"
|
||||
>
|
||||
<el-option v-for="item2 in statusList" :key="item2.label" :label="item2.label" :value="item2" />
|
||||
</el-select>
|
||||
<el-button type="primary" style="margin-left: 10px" @click="searchData(item)">查询</el-button>
|
||||
</div>
|
||||
<div id="echarts1" class="card content-box"></div>
|
||||
<div :id="'echarts' + item.key" class="card content-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -73,25 +80,37 @@
|
||||
|
||||
<script lang="tsx" setup name="historyDataAnalysis">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { getDustprojectPage, getDustengineeringPage, getAIQuestionPage } from "@/api/modules/goverment";
|
||||
import { getDustprojectPage, getDustengineeringPage, getAIQuestionPage, getDustMonitorDev } from "@/api/modules/goverment";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
|
||||
import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
|
||||
import { sendIframeMessage } from "@/utils/util";
|
||||
import { getRealTimePage } from "@/api/modules/project";
|
||||
import * as echarts from "echarts";
|
||||
const statusList = ref([
|
||||
{ label: "半小时", value: 0.5 },
|
||||
{ label: "一小时", value: 1 },
|
||||
{ label: "一天", value: 24 },
|
||||
{ label: "七天", value: 24 * 7 },
|
||||
{ label: "十五天", value: 24 * 15 },
|
||||
{ label: "一个月", value: 24 * 31 },
|
||||
{ label: "半年", value: 24 * 31 * 6 },
|
||||
{ label: "一年", value: 24 * 31 * 12 }
|
||||
import dayjs from "dayjs";
|
||||
const deviceList = ref([]);
|
||||
const optionList = ref([
|
||||
{ label: "温度", value: 0 },
|
||||
{ label: "风速", value: 1 },
|
||||
{ label: "PM2.5", value: 2 },
|
||||
{ label: "噪音", value: 3 },
|
||||
{ label: "PM10", value: 4 },
|
||||
{ label: "TSP", value: 5 },
|
||||
{ label: "湿度", value: 6 },
|
||||
{ label: "风向", value: 7 }
|
||||
]);
|
||||
const statusList = ref([
|
||||
{ label: "半小时", value: 0.5, type: "hour" },
|
||||
{ label: "一小时", value: 1, type: "hour" },
|
||||
{ label: "一天", value: 1, type: "day" },
|
||||
{ label: "七天", value: 7, type: "day" },
|
||||
{ label: "十五天", value: 15, type: "day" },
|
||||
{ label: "一个月", value: 1, type: "month" },
|
||||
{ label: "半年", value: 6, type: "month" },
|
||||
{ label: "一年", value: 1, type: "year" }
|
||||
]);
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(null);
|
||||
const checkList = ref([]);
|
||||
const echartsList = ref<any>([]);
|
||||
const pages = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 7,
|
||||
@ -120,12 +139,92 @@ const pageable = ref({
|
||||
});
|
||||
// 搜索用的项目sn或者工程sn
|
||||
const searchSn = ref("");
|
||||
|
||||
const resApiData = ref([]);
|
||||
// 项目或者工程名字
|
||||
const searchName = ref<string>("");
|
||||
// 获取设备列表
|
||||
const getDeviceList = async () => {
|
||||
const res = await getDustMonitorDev({});
|
||||
deviceList.value = res.result;
|
||||
console.log(res, "-------设备列表");
|
||||
};
|
||||
const rangeChange = (item: any, index: any) => {
|
||||
console.log(item, index);
|
||||
if (item) {
|
||||
echartsList.value[index].startTime = dayjs().subtract(item.value, item.type).format("YYYY-MM-DD HH:mm:ss");
|
||||
echartsList.value[index].endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
|
||||
} else {
|
||||
echartsList.value[index].startTime = dayjs().hour(0).minute(0).second(0).format("YYYY-MM-DD HH:mm:ss");
|
||||
echartsList.value[index].endTime = dayjs().hour(23).minute(59).second(59).format("YYYY-MM-DD HH:mm:ss");
|
||||
}
|
||||
};
|
||||
const searchData = async (item: any) => {
|
||||
let findItem = echartsList.value.find(item => {
|
||||
return item.key == item.key;
|
||||
});
|
||||
let requestData = {
|
||||
code: findItem.code,
|
||||
startTime: findItem.startTime,
|
||||
endTime: findItem.endTime,
|
||||
pageSize: -1
|
||||
};
|
||||
const res = await getRealTimePage(requestData);
|
||||
resApiData.value = res.result.records;
|
||||
drawEcharts(item);
|
||||
};
|
||||
// 菜单选项改变
|
||||
const optionChange = () => {
|
||||
echartsList.value = [];
|
||||
if (checkList.value.length > 0) {
|
||||
let matchLastItem = optionList.value.find(item => {
|
||||
return item.label == checkList.value[checkList.value.length - 1];
|
||||
});
|
||||
checkList.value.map(item => {
|
||||
let matchItem = optionList.value.find(item2 => {
|
||||
return item2.label == item;
|
||||
});
|
||||
echartsList.value.push({
|
||||
title: item,
|
||||
code: deviceList.value.length > 0 ? deviceList.value[0].code : "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
rangeTime: "",
|
||||
key: matchItem?.value
|
||||
});
|
||||
});
|
||||
setTimeout(function () {
|
||||
searchData(echartsList.value[echartsList.value.length - 1]);
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
// 绘制折线图
|
||||
const drawEcharts = () => {
|
||||
let chartDom = document.getElementById("echarts1");
|
||||
const drawEcharts = (item: any) => {
|
||||
console.log(item, "--------1111");
|
||||
let xData = [] as any;
|
||||
let yData = [] as any;
|
||||
let number = item.key;
|
||||
console.log(number);
|
||||
resApiData.value.map(item => {
|
||||
xData.push(item.createTime);
|
||||
if (number == 0) {
|
||||
yData.push(item.temperature);
|
||||
} else if (number == 1) {
|
||||
yData.push(item.windspeed);
|
||||
} else if (number == 2) {
|
||||
yData.push(item.pm25);
|
||||
} else if (number == 3) {
|
||||
yData.push(item.noise);
|
||||
} else if (number == 4) {
|
||||
yData.push(item.pm10);
|
||||
} else if (number == 5) {
|
||||
yData.push(item.tsp);
|
||||
} else if (number == 6) {
|
||||
yData.push(item.humidity);
|
||||
} else if (number == 7) {
|
||||
yData.push(item.winddirection);
|
||||
}
|
||||
});
|
||||
let chartDom = document.getElementById(`echarts${number}`);
|
||||
let myChart: echarts.ECharts = echarts.init(chartDom);
|
||||
let option;
|
||||
option = {
|
||||
@ -134,14 +233,18 @@ const drawEcharts = () => {
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "fff"
|
||||
color: "#fff"
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 60,
|
||||
top: 60,
|
||||
width: "95%"
|
||||
left: 80,
|
||||
top: 50,
|
||||
width: "92%",
|
||||
height: "75%"
|
||||
},
|
||||
// legend: {
|
||||
// right: 0,
|
||||
@ -152,23 +255,53 @@ const drawEcharts = () => {
|
||||
// },
|
||||
// data: ["出勤总数(人)", "在职总数(人)", "出勤率(%)"]
|
||||
// },
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
show: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
data: xData,
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "white"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 14
|
||||
// rotate: 30,
|
||||
// interval: 50
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位(人)",
|
||||
name: `单位(${
|
||||
number == 0
|
||||
? "℃"
|
||||
: number == 1
|
||||
? "m/s"
|
||||
: number == 2
|
||||
? "μg/m³"
|
||||
: number == 3
|
||||
? "db"
|
||||
: number == 4
|
||||
? "μg/m³"
|
||||
: number == 5
|
||||
? "μg/m³"
|
||||
: number == 6
|
||||
? ""
|
||||
: number == 7
|
||||
? ""
|
||||
: ""
|
||||
})`,
|
||||
nameTextStyle: {
|
||||
align: "right",
|
||||
color: "#fff",
|
||||
@ -178,6 +311,18 @@ const drawEcharts = () => {
|
||||
color: "#fff",
|
||||
fontSize: 16
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "white"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#216876"]
|
||||
}
|
||||
},
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50
|
||||
@ -185,7 +330,25 @@ const drawEcharts = () => {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "出勤总数(人)",
|
||||
name: `${item.title}(${
|
||||
number == 0
|
||||
? "℃"
|
||||
: number == 1
|
||||
? "m/s"
|
||||
: number == 2
|
||||
? "μg/m³"
|
||||
: number == 3
|
||||
? "db"
|
||||
: number == 4
|
||||
? "μg/m³"
|
||||
: number == 5
|
||||
? "μg/m³"
|
||||
: number == 6
|
||||
? ""
|
||||
: number == 7
|
||||
? ""
|
||||
: ""
|
||||
})`,
|
||||
type: "line",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
@ -193,10 +356,31 @@ const drawEcharts = () => {
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + " ml";
|
||||
return (
|
||||
value +
|
||||
` ${
|
||||
number == 0
|
||||
? "℃"
|
||||
: number == 1
|
||||
? "m/s"
|
||||
: number == 2
|
||||
? "μg/m³"
|
||||
: number == 3
|
||||
? "db"
|
||||
: number == 4
|
||||
? "μg/m³"
|
||||
: number == 5
|
||||
? "μg/m³"
|
||||
: number == 6
|
||||
? ""
|
||||
: number == 7
|
||||
? ""
|
||||
: ""
|
||||
}`
|
||||
);
|
||||
}
|
||||
},
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
||||
data: yData
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -284,7 +468,7 @@ watch(
|
||||
}
|
||||
);
|
||||
onMounted(async () => {
|
||||
drawEcharts();
|
||||
getDeviceList();
|
||||
await getProPage();
|
||||
onSearch(records.value[0]);
|
||||
searchSn.value = (records.value as ResAiProjectPage[])[0].projectSn;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user