湖库图表基础页面
This commit is contained in:
庞东林
659
src/views/water/lake/trend/index.vue
Normal file
659
src/views/water/lake/trend/index.vue
Normal file
@@ -0,0 +1,659 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<!-- 搜索表单 -->
|
||||
<a-form
|
||||
:model="queryParams"
|
||||
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="年度:">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-model:value="queryParams.yearList"
|
||||
:options="yearOptions"
|
||||
placeholder="请选择年度"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="月份:">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-model:value="queryParams.monthList"
|
||||
:options="monthOptions"
|
||||
placeholder="请选择月份"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="湖库类型:">
|
||||
<a-select
|
||||
v-model:value="queryParams.lakeType"
|
||||
@change="handleLakeTypeChange"
|
||||
allowClear
|
||||
placeholder="请选择类型"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in regionLevelOptions"
|
||||
:key="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="断面名称:">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-model:value="queryParams.placeList"
|
||||
:options="sectionOptions"
|
||||
placeholder="请选择断面名称"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="监测指标:">
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-model:value="queryParams.monitorIndexList"
|
||||
:options="indicatorOptions"
|
||||
placeholder="请选择监测指标"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="横坐标:">
|
||||
<a-select
|
||||
v-model:value="queryParams.xco"
|
||||
:options="xOptions"
|
||||
allowClear
|
||||
placeholder="请选择横坐标"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="纵坐标:">
|
||||
<a-select
|
||||
v-model:value="queryParams.yco"
|
||||
:options="yOptions"
|
||||
allowClear
|
||||
placeholder="请选择纵坐标"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24" style="text-align: center">
|
||||
<a-space>
|
||||
<a-button type="primary" class="mb-20" @click="drawTrend"
|
||||
>开始统计</a-button
|
||||
>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-card :bordered="false">
|
||||
<div id="chartColumn" style="width: 100%; height: 500px"></div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
let trendChart;
|
||||
import { getColumnOptions } from "@/api/ecology/noise/function-sound";
|
||||
|
||||
import { getSpecialLakeDropdown } from "@/api/ecology/new-lake";
|
||||
import { getLakeDropdown } from "@/api/ecology/new-lake";
|
||||
|
||||
import {
|
||||
lakeLibrary,
|
||||
} from "@/api/ecology/new-lake";
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
queryParams: {
|
||||
yearList: ["2020", "2021"],
|
||||
placeList: [],
|
||||
xco: "Xco_1", // 横坐标
|
||||
ycoList: [],
|
||||
monitorIndexList: [], // 监测指标
|
||||
},
|
||||
trendData: [],
|
||||
regionLevelOptions: [
|
||||
{ label: "城市内湖", value: "city" },
|
||||
{ label: "专项湖库", value: "special" },
|
||||
],
|
||||
placeOptions: [],
|
||||
sectionOptions: [],
|
||||
yearOptions: [],
|
||||
indicatorOptions: [],
|
||||
|
||||
innerSection: [], // 内湖断面
|
||||
specialSection: [], // 专湖断面
|
||||
innerIndex: [
|
||||
{ label: "pH值", value: "ph" },
|
||||
{ label: "透明度（cm）", value: "transparency" },
|
||||
{ label: "溶解氧饱和度（﹪）", value: "dissolvedOxygenSaturation" },
|
||||
{ label: "溶解氧", value: "dissolvedOxygen" },
|
||||
{ label: "高锰酸盐指数", value: "permanganateIndex" },
|
||||
{ label: "五日生化需氧量", value: "fiveDayBod" },
|
||||
{ label: "总氮 ", value: "totalNitrogen" },
|
||||
{ label: "氨氮", value: "ammonia" },
|
||||
{ label: "挥发酚", value: "volatilePhenol" },
|
||||
{ label: "砷(mg/L)", value: "as" },
|
||||
{ label: "汞 (mg/L)", value: "hg" },
|
||||
{ label: "六价铬 (mg/L)", value: "cr6" },
|
||||
{ label: "铅 (mg/L)", value: "pb" },
|
||||
{ label: "镉 (mg/L)", value: "cd" },
|
||||
{ label: "总磷", value: "totalPhosphorus" },
|
||||
{ label: "石油类", value: "petro" },
|
||||
{ label: "粪大肠菌群（MPN/L）", value: "fecalColiforms" },
|
||||
{ label: "化学需氧量", value: "cod" },
|
||||
{ label: "叶绿素a (mg/m3)", value: "chlA" },
|
||||
{ label: "阴离子表面活性剂(mg/L)", value: "anSaa" },
|
||||
{ label: "硫化物(mg/L) ", value: "s" },
|
||||
{ label: "氧化还原电位（mV）", value: "oxidationReductionPotential" },
|
||||
], // 内湖监测指标
|
||||
specialIndex: [
|
||||
{ label: "浊度(NTU)", value: "turbidity" },
|
||||
{ label: "水温(℃)", value: "wTemp" },
|
||||
{ label: "水位(m)", value: "wd" },
|
||||
{ label: "pH值", value: "ph" },
|
||||
{ label: "电导率(ms/m)", value: "wCond" },
|
||||
{ label: "透明度（cm）", value: "transp" },
|
||||
{ label: "溶解氧 (mg/L)", value: "dissolvedOxygen" },
|
||||
{ label: "高锰酸盐指数 (mg/L)", value: "codmn" },
|
||||
{ label: "五日生化需氧量", value: "bod5" },
|
||||
{ label: "氨氮 (mg/L)", value: "nh4N" },
|
||||
{ label: "石油类 (mg/L)", value: "oils" },
|
||||
{ label: "总氮 (mg/L)", value: "nTotal" },
|
||||
{ label: "总磷 (mg/L)", value: "pTotal" },
|
||||
{ label: "叶绿素 (mg/L)", value: "chlA" },
|
||||
{ label: "挥发酚 (mg/L)", value: "vPhen" },
|
||||
{ label: "汞 (mg/L)", value: "wHg" },
|
||||
{ label: "铅 (mg/L)", value: "wPb" },
|
||||
{ label: "化学需氧量 (mg/L)", value: "codcr" },
|
||||
{ label: "铜 (mg/L)", value: "wCu" },
|
||||
{ label: "锌 (mg/L)", value: "wZn" },
|
||||
{ label: "氟化物 (mg/L)", value: "f" },
|
||||
{ label: "硒 (mg/L)", value: "se" },
|
||||
{ label: "砷 (mg/L)", value: "as" },
|
||||
{ label: "镉 (mg/L)", value: "cd" },
|
||||
{ label: "六价铬 (mg/L)", value: "cr6" },
|
||||
{ label: "氰化物 (mg/L)", value: "cnTotal" },
|
||||
{ label: "阴离子表面活性剂 (mg/L)", value: "anSaa" },
|
||||
{ label: "硫化物 (mg/L)", value: "s" },
|
||||
{ label: "粪大肠菌群 (mg/L)", value: "coloOrg" },
|
||||
{ label: "硫酸盐 (mg/L)", value: "so4" },
|
||||
{ label: "氯化物 (mg/L)", value: "cl" },
|
||||
{ label: "硝酸盐 (mg/L)", value: "no3N" },
|
||||
{ label: "铁 (mg/L)", value: "wFe" },
|
||||
{ label: "锰 (mg/L)", value: "wMn" },
|
||||
], //专湖监测指标
|
||||
|
||||
monthOptions: [
|
||||
{
|
||||
label: "全部",
|
||||
value: "全部",
|
||||
},
|
||||
],
|
||||
xOptions: [
|
||||
{
|
||||
label: "年度",
|
||||
value: "Xco_1",
|
||||
},
|
||||
{
|
||||
label: "年月",
|
||||
value: "Xco_2",
|
||||
},
|
||||
{
|
||||
label: "区域/测点名称",
|
||||
value: "Xco_3",
|
||||
},
|
||||
],
|
||||
yOptions: [
|
||||
{
|
||||
label: "浓度",
|
||||
value: "Yco_1",
|
||||
},
|
||||
{
|
||||
label: "综合营养指数（无量纲）",
|
||||
value: "Yco_2",
|
||||
},
|
||||
{
|
||||
label: "水质类别",
|
||||
value: "Yco_3",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loadOptionData();
|
||||
this.buildChart();
|
||||
},
|
||||
methods: {
|
||||
// 下拉列表
|
||||
loadOptionData() {
|
||||
getColumnOptions("monitor_year").then((res) => {
|
||||
this.yearOptions = res.data.data.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
};
|
||||
});
|
||||
});
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
this.monthOptions.push({ label: i + "月", value: i });
|
||||
}
|
||||
// 内湖
|
||||
this.getInnerList();
|
||||
// 专湖
|
||||
this.getSpecialList();
|
||||
},
|
||||
|
||||
|
||||
handleLakeTypeChange(value) {
|
||||
this.queryParams.placeList = [];
|
||||
this.queryParams.monitorIndexList = [];
|
||||
if (value == "city") {
|
||||
// 内湖
|
||||
this.sectionOptions = [...this.innerSection];
|
||||
this.indicatorOptions = [...this.innerIndex];
|
||||
} else if (value == "special") {
|
||||
// 专湖
|
||||
this.sectionOptions = [...this.specialSection];
|
||||
this.indicatorOptions = [...this.specialIndex];
|
||||
}
|
||||
},
|
||||
// 趋势图
|
||||
drawTrend() {
|
||||
lakeLibrary(this.queryParams).then((res) => {
|
||||
console.log("res", res);
|
||||
if (res.data.code == 0) {
|
||||
this.trendData = res.data.data;
|
||||
this.initChart();
|
||||
} else {
|
||||
console.log('res.data.msg',res.data.msg)
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 获取内湖断面
|
||||
getInnerList() {
|
||||
getLakeDropdown().then((res) => {
|
||||
this.innerSection = this.buildSectionSelect(res);
|
||||
});
|
||||
},
|
||||
// 获取专湖断面
|
||||
getSpecialList() {
|
||||
getSpecialLakeDropdown().then((res) => {
|
||||
this.specialSection = this.buildSectionSelect(res);
|
||||
});
|
||||
},
|
||||
// 生成断面数据
|
||||
buildSectionSelect(res) {
|
||||
let palceOptions = {};
|
||||
let newPlace = [];
|
||||
res.data.data.forEach((item) => {
|
||||
palceOptions[item.regionName] = item.regionName;
|
||||
});
|
||||
for (let i in palceOptions) {
|
||||
newPlace.push({
|
||||
label: palceOptions[i],
|
||||
value: palceOptions[i],
|
||||
});
|
||||
}
|
||||
this.palceOptions = [...newPlace];
|
||||
return res.data.data.map((item) => {
|
||||
return {
|
||||
label: item.sectionName,
|
||||
value: item.sectionName,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
initChart() {
|
||||
|
||||
if (trendChart != null && trendChart != "" && trendChart != undefined) {
|
||||
trendChart.dispose(); // 销毁
|
||||
}
|
||||
trendChart = echarts.init(document.getElementById("chartColumn"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
legend:{show:true},
|
||||
xAxis: this.buildxAxis(),
|
||||
yAxis: {
|
||||
type: "value",
|
||||
max:200
|
||||
},
|
||||
series: this.buildSeries(),
|
||||
};
|
||||
console.log('option',option)
|
||||
trendChart.setOption(option);
|
||||
},
|
||||
|
||||
// 生成x轴标签
|
||||
buildxAxis(){
|
||||
let xAxis = []
|
||||
this.trendData.forEach(item=>{
|
||||
xAxis.push(item.place)
|
||||
})
|
||||
return {
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
interval:0,
|
||||
rotate:10
|
||||
},
|
||||
data: xAxis,
|
||||
}
|
||||
},
|
||||
// 生成y数值标签
|
||||
buildyAxisData(){
|
||||
let yAxisData = []
|
||||
this.trendData.forEach(item=>{
|
||||
yAxisData.push(item.value)
|
||||
})
|
||||
return yAxisData
|
||||
},
|
||||
// 生成营养度三根线
|
||||
buildLine(){
|
||||
return [
|
||||
[
|
||||
{
|
||||
name: "中度富营养↓",
|
||||
yAxis: 70,
|
||||
xAxis: 0,
|
||||
label: {
|
||||
color:'red',
|
||||
borderColor: "red",
|
||||
},
|
||||
lineStyle:{
|
||||
color: "red",
|
||||
}
|
||||
},
|
||||
{
|
||||
yAxis: 70,
|
||||
xAxis: this.buildxAxis().length-5 || 2,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: "轻度富营养↓",
|
||||
yAxis: 60,
|
||||
xAxis: 0,
|
||||
label: {
|
||||
color:'#fbfb00',
|
||||
borderColor: "#fbfb00",
|
||||
},
|
||||
lineStyle:{
|
||||
color: "#fbfb00",
|
||||
}
|
||||
},
|
||||
{
|
||||
yAxis: 60,
|
||||
xAxis: this.buildxAxis().length-4 || 2,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: "中营养↓",
|
||||
yAxis: 50,
|
||||
xAxis: 0,
|
||||
label: {
|
||||
color:'#99ff00',
|
||||
borderColor: "#99ff00",
|
||||
},
|
||||
lineStyle:{
|
||||
color: "#99ff00",
|
||||
}
|
||||
},
|
||||
{
|
||||
yAxis: 50,
|
||||
xAxis: this.buildxAxis().length-2,
|
||||
},
|
||||
],
|
||||
]
|
||||
},
|
||||
// 生成图表数据
|
||||
buildSeries(){
|
||||
let series = [
|
||||
{
|
||||
markLine: {
|
||||
lineStyle: {
|
||||
normal: {
|
||||
type: "line",
|
||||
width: 3,
|
||||
opacity: 0.9,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
padding: [1, 10],
|
||||
lineHeight: 30,
|
||||
show: true,
|
||||
position: "end",
|
||||
borderType: "dashed",
|
||||
borderWidth: 1,
|
||||
},
|
||||
data: [...this.buildLine()],
|
||||
symbol: ["none", "none"],
|
||||
},
|
||||
|
||||
data: this.buildyAxisData(),
|
||||
type: "bar", // line
|
||||
},
|
||||
]
|
||||
return series
|
||||
},
|
||||
|
||||
//生成柱状图
|
||||
buildChart() {
|
||||
trendChart = echarts.init(document.getElementById("chartColumn"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show:true,
|
||||
// orient: "vertical",
|
||||
// x: "right", //可设定图例在左、右、居中
|
||||
// y: "center", //可设定图例在上、下、居中
|
||||
padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
interval:0,
|
||||
rotate:10
|
||||
},
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
// markLine: {
|
||||
// data: [
|
||||
// {
|
||||
// type: "average",
|
||||
// name: "平均值",
|
||||
// lineStyle: {
|
||||
// type: "dashed", // dotted,solid,dashed
|
||||
// color: "blue",
|
||||
// width: 3,
|
||||
// opacity: 0.9,
|
||||
// },
|
||||
// label: {
|
||||
// borderColor: "blue",
|
||||
// formatter: "平均值",
|
||||
// },
|
||||
// },{
|
||||
// name: "标志",
|
||||
// yAxis: 100,
|
||||
// lineStyle: {
|
||||
// type: "dashed", // dotted,solid,dashed
|
||||
// color: "blue",
|
||||
// width: 3,
|
||||
// opacity: 0.9,
|
||||
// },
|
||||
// label: {
|
||||
// color: "blue",
|
||||
// formatter: "溶解氧Ⅱ类标准",
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// symbol: ["none", "none"],
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "insideEndBottom",
|
||||
// },
|
||||
// },
|
||||
|
||||
markLine: {
|
||||
lineStyle: {
|
||||
normal: {
|
||||
type: "line",
|
||||
width: 3,
|
||||
opacity: 0.9,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
padding: [1, 10],
|
||||
lineHeight: 30,
|
||||
show: true,
|
||||
position: "end",
|
||||
borderType: "dashed",
|
||||
borderWidth: 1,
|
||||
},
|
||||
data: [
|
||||
[
|
||||
{
|
||||
name: "中度富营养↓",
|
||||
yAxis: 180,
|
||||
xAxis: 0,
|
||||
label: {
|
||||
color:'red',
|
||||
borderColor: "red",
|
||||
},
|
||||
lineStyle:{
|
||||
color: "red",
|
||||
}
|
||||
},
|
||||
{
|
||||
yAxis: 180,
|
||||
xAxis: 3,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: "轻度富营养↓",
|
||||
yAxis: 150,
|
||||
xAxis: 0,
|
||||
label: {
|
||||
color:'#fbfb00',
|
||||
borderColor: "#fbfb00",
|
||||
},
|
||||
lineStyle:{
|
||||
color: "#fbfb00",
|
||||
}
|
||||
},
|
||||
{
|
||||
yAxis: 150,
|
||||
xAxis: "Thu",
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: "中营养↓",
|
||||
yAxis: 100,
|
||||
xAxis: 0,
|
||||
label: {
|
||||
color:'#99ff00',
|
||||
borderColor: "#99ff00",
|
||||
},
|
||||
lineStyle:{
|
||||
color: "#99ff00",
|
||||
}
|
||||
},
|
||||
{
|
||||
yAxis: 100,
|
||||
xAxis: "Thu",
|
||||
},
|
||||
],
|
||||
],
|
||||
symbol: ["none", "none"],
|
||||
},
|
||||
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: "bar", // line
|
||||
},
|
||||
],
|
||||
|
||||
// 堆叠
|
||||
// series: [{
|
||||
// name: '可用',
|
||||
// type: 'bar', // 换成bar则是堆叠
|
||||
// // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
|
||||
// data: [5, 20, 36, 10, 10, 20, 60],
|
||||
// itemStyle:{
|
||||
// normal:{color:"#FF8849"},
|
||||
// }
|
||||
// },{
|
||||
// name: '不可用',
|
||||
// type: 'bar', // 换成bar则是堆叠
|
||||
// // stack:'使用情况', // 堆叠标识，无标识或者不相同则是柱状图对比
|
||||
// data: [40, 22, 18, 35, 42, 40, 80],
|
||||
// itemStyle:{
|
||||
// normal:{color:"#3FBB49"},
|
||||
// }
|
||||
// }]
|
||||
};
|
||||
trendChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user