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

湖里大屏(环境管理):趋势图模块 接口对接

Browse Source
This commit is contained in:
骆乐 2022-08-10 16:51:14 +08:00
parent 5d9e24ae9b
commit 2c0873c6b5
1 changed files with 189 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

312
src/views/projectAdmin/jlw/envirManage/leftBottom.vue
View File

@ -3,71 +3,64 @@
<div class="contentBox"> <div class="contentBox">
<div class="titleTxt">{{ title }}</div> <div class="titleTxt">{{ title }}</div>
<div class="operateBar"> <div class="operateBar">
<span <span class="greenBtn" @click="switchingData(1)" :class="checked == 1 ? 'active' : ''">
class="greenBtn" <img
@click="switchingData(1)" v-for="item in 4"
:class="checked == 1 ? 'active' : ''" :key="item"
> :class="'arrow' + item"
<img class="arrow"
v-for="item in 4" src="@/assets/images/greenOverview/arrow.png"
:key="item" />
:class="'arrow' + item" {{ $t("message.environmentalOverview.e6SelectArr")[0].title }}
class="arrow" </span>
src="@/assets/images/greenOverview/arrow.png" <span class="greenBtn" @click="switchingData(2)" :class="checked == 2 ? 'active' : ''">
/> <img
{{ $t("message.environmentalOverview.e6SelectArr")[0].title }} v-for="item in 4"
</span> :key="item"
<span :class="'arrow' + item"
class="greenBtn" class="arrow"
@click="switchingData(2)" src="@/assets/images/greenOverview/arrow.png"
:class="checked == 2 ? 'active' : ''" />
> {{ $t("message.environmentalOverview.e6SelectArr")[1].title }}
<img </span>
v-for="item in 4" <span class="greenBtn" @click="switchingData(3)" :class="checked == 3 ? 'active' : ''">
:key="item" <img
:class="'arrow' + item" v-for="item in 4"
class="arrow" :key="item"
src="@/assets/images/greenOverview/arrow.png" :class="'arrow' + item"
/> class="arrow"
{{ $t("message.environmentalOverview.e6SelectArr")[1].title }} src="@/assets/images/greenOverview/arrow.png"
</span> />
<span {{ $t("message.environmentalOverview.e6SelectArr")[2].title }}
class="greenBtn" </span>
@click="switchingData(3)" <span class="greenBtn" @click="switchingData(4)" :class="checked == 4 ? 'active' : ''">
:class="checked == 3 ? 'active' : ''" <img
> v-for="item in 4"
<img :key="item"
v-for="item in 4" :class="'arrow' + item"
:key="item" class="arrow"
:class="'arrow' + item" src="@/assets/images/greenOverview/arrow.png"
class="arrow" />
src="@/assets/images/greenOverview/arrow.png" {{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
/> </span>
{{ $t("message.environmentalOverview.e6SelectArr")[2].title }} </div>
</span>
<span <div class="noData" v-if="dustData_24.length == 0">
class="greenBtn" <img src="@/assets/images/noData3.png" alt srcset />
@click="switchingData(4)" <p>
:class="checked == 4 ? 'active' : ''" <!-- 暂无数据 -->
> {{$t('message.dataBoard.nodata')}}
<img </p>
v-for="item in 4" </div>
:key="item" <!-- <div class="myChart" ref="myChart" /> -->
:class="'arrow' + item"
class="arrow"
src="@/assets/images/greenOverview/arrow.png"
/>
{{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
</span>
</div>
<div class="myChart" ref="myChart" />
</div> </div>
</template> </template>
<script> <script>
import echarts from "echarts4"; import echarts from "echarts4";
import { import {
getEnvironmentWarningInfo getEnvironmentWarningInfo,
selectDustNoiseDataApi
} from "@/assets/js/api/environmentManage"; } from "@/assets/js/api/environmentManage";
export default { export default {
props: { props: {
@ -78,95 +71,161 @@ export default {
}, },
data() { data() {
return { return {
data : [90, 85, 100, 96, 100, 150, 190, 125 ], checked: 1,
checked:1, dustData_24: [],
dustData_24:[], currentDevDetail: {},
pm10Warning:'',
pm25Warning:'',
noiseWarning:'',
windSpeedWarning:''
}; };
}, },
mounted() { mounted() {
this.initMyChart(); this.initMyChart();
this.selectDustNoiseData();
}, },
methods: { methods: {
getEnvironmentWarningInfoApi(){ getEnvironmentWarningInfoApi() {
// console.log('执行'); // console.log('执行');
getEnvironmentWarningInfo({ getEnvironmentWarningInfo({
deviceId: this.currentDevDetail.deviceId, deviceId: this.currentDevDetail.deviceId,
projectSn: this.projectSn, projectSn: this.projectSn,
warningType: 1 warningType: 1
}).then(res => { }).then(res => {
console.log(res.result); // console.log('---打印看一下',res.result);
this.pm10Warning = res.result.pm10Warning if (res.result != null) {
this.pm25Warning = res.result.pm25Warning this.pm10Warning = res.result.pm10Warning;
this.noiseWarning = res.result.noiseWarning this.pm25Warning = res.result.pm25Warning;
this.windSpeedWarning = res.result.windSpeed this.noiseWarning = res.result.noiseWarning;
this.createdEcharts2(); this.windSpeedWarning = res.result.windSpeed;
}) this.initMyChart();
}
});
}, },
//近24小时数据
selectDustNoiseData() {
var now = new Date();
var yy = now.getFullYear(); //年
var mm = now.getMonth() + 1; //月
var dd = now.getDate(); //日
var time = yy + "-";
if (mm < 10) time += "0";
time += mm + "-";
if (dd < 10) time += "0";
time += dd;
let data = {
searchDate: time,
projectSn: this.projectSn,
deviceId: this.currentDevDetail.deviceId
};
selectDustNoiseDataApi(data).then(res => {
console.log(res.result);
this.getEnvironmentWarningInfoApi();
console.log("最近24小时", res);
this.dustData_24 = res.result;
});
},
//切换 24小时数据 //切换 24小时数据
switchingData(value) { switchingData(value) {
this.checked = value; this.checked = value;
this.selectDustNoiseData();
this.initMyChart(); this.initMyChart();
}, },
initMyChart() { initMyChart() {
var xdata = [],
ydata = [];
const myChart = echarts.init(this.$refs.myChart); const myChart = echarts.init(this.$refs.myChart);
// this.dustData_24.forEach((element) => { let Alert;
// // let AlertNumber;
// xdata.push(element.uploadDate.split(" ")[1]); myChart.clear();
// switch (this.checked) { this.dustData_24.forEach(element => {
// case 1: xdata.push(element.uploadDate.split(" ")[1]);
// ydata.push(element.pm25); switch (this.checked) {
// Alert = 'pm25'+this.$t('message.dataBoard.guard') + '(' + this.pm25Warning + ')' case 1:
// AlertNumber = this.pm25Warning ydata.push(element.pm25);
// break; Alert =
// case 2: "pm25" +
// ydata.push(element.pm10); this.$t("message.dataBoard.guard") +
// Alert = 'pm10'+this.$t('message.dataBoard.guard')+ '(' + this.pm10Warning + ')' "(" +
// AlertNumber = this.pm10Warning this.pm25Warning +
// break; ")";
// case 3: AlertNumber = this.pm25Warning;
// ydata.push(element.windspeed); break;
// Alert = this.$t('message.dataBoard.windSpeed')+this.$t('message.dataBoard.guard')+ '(' + this.windSpeedWarning + ')' case 2:
// AlertNumber = this.windSpeedWarning ydata.push(element.pm10);
// break; Alert =
// case 4: "pm10" +
// ydata.push(element.noise); this.$t("message.dataBoard.guard") +
// Alert = this.$t('message.dataBoard.noise')+this.$t('message.dataBoard.guard')+ '(' + this.noiseWarning + ')' "(" +
// AlertNumber = this.noiseWarning this.pm10Warning +
// break; ")";
// } AlertNumber = this.pm10Warning;
// }); break;
switch (this.checked) { case 3:
case 1: ydata.push(element.windspeed);
this.data = [90, 85, 100, 96, 100, 150, 190, 125 ] Alert =
break; this.$t("message.dataBoard.windSpeed") +
case 2: this.$t("message.dataBoard.guard") +
this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ] "(" +
break; this.windSpeedWarning +
case 3: ")";
this.data = [100, 96, 100, 150,90, 85, 190, 125 ] AlertNumber = this.windSpeedWarning;
break; break;
case 4: case 4:
this.data = [90, 96, 100, 85, 100,150, 190, 125 ] ydata.push(element.noise);
break; Alert =
} this.$t("message.dataBoard.noise") +
this.$t("message.dataBoard.guard") +
"(" +
this.noiseWarning +
")";
AlertNumber = this.noiseWarning;
break;
}
});
// switch (this.checked) {
// case 1:
// this.data = [90, 85, 100, 96, 100, 150, 190, 125 ]
// break;
// case 2:
// this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]
// break;
// case 3:
// this.data = [100, 96, 100, 150,90, 85, 190, 125 ]
// break;
// case 4:
// this.data = [90, 96, 100, 85, 100,150, 190, 125 ]
// break;
// }
const option = { const option = {
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: [ // data: [
"01:00", // "01:00",
"02:00", // "02:00",
"03:00", // "03:00",
"04:00", // "04:00",
"05:00", // "05:00",
"06:00", // "06:00",
"07:00", // "07:00",
"08:00" // "08:00"
] // ]
data: xdata
}, },
yAxis: { yAxis: {
type: "value", type: "value",
max: 300, max: 300,
// max: function() {
// let maxArr = ydata;
// let maxNum = Math.max.apply(null, maxArr);
// if (AlertNumber > maxNum) {
// return AlertNumber;
// }
// },
splitNumber: 4, splitNumber: 4,
axisLabel: { axisLabel: {
// y轴文字的配置 // y轴文字的配置
@ -192,8 +251,8 @@ export default {
} }
} }
}, },
showSymbol:false, showSymbol: false,
data: this.data, data: ydata,
type: "line", type: "line",
smooth: true, smooth: true,
areaStyle: { areaStyle: {
@ -224,9 +283,16 @@ export default {
width: 100%; width: 100%;
height: 90%; height: 90%;
} }
.operateBar{ .operateBar {
margin: 20px 0px 0px 20px; margin: 20px 0px 0px 20px;
} }
.noData{
margin-left: 40%;
margin-top: 10%;
p{
margin-left: 5%;
}
}
} }
</style> </style>