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

金林湾大屏-环境监测增加噪音字段

Browse Source
This commit is contained in:
yjl 2023-03-30 13:40:11 +08:00
parent 4856d020e2
commit a99094632a
5 changed files with 786 additions and 678 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/i18n/langs/cn/environmentalMonitor/overview.js
View File

@ -73,7 +73,13 @@ export default {
value: "东",
id:7,
unit:'风'
}
},
{
name: "噪音",
value: "101",
id:9,
unit:'dB'
},
// , {
// name: "气压",
// value: "101",

9
src/assets/i18n/langs/en/environmentalMonitor/overview.js
View File

@ -73,12 +73,19 @@ export default {
value: "东",
id:7,
unit:'风'
}, {
},
{
name: "气压",
value: "101",
id:8,
unit:'kPa'
},
{
name: "噪音",
value: "101",
id:9,
unit:'dB'
},
],
//演示模拟数据

349
src/views/projectAdmin/jlw/envirManage/centerTop.vue
View File

@ -2,14 +2,21 @@
<!-- 实时数据 -->
<Card :title="title" showRefresh @query="handleQuery">
<div class="containerBox">
<el-popover style="margin-left:900px" placement="bottom" width="70" trigger="click">
<el-popover
style="margin-left: 900px"
placement="bottom"
width="70"
trigger="click"
>
<ul class="devList">
<li
v-for="(item, index) in devList"
:class="{ active: item.deviceId == currentDevDetail.deviceId }"
:key="index"
@click="realTimeMonitor(item)"
>{{ item.deviceName }}</li>
>
{{ item.deviceName }}
</li>
</ul>
<p class="greenBtn selectDev" slot="reference">
<img
@ -29,16 +36,16 @@
</template>
<script>
import Card from "../components/Card";
import echarts from "echarts4";
import { environmentDevList } from "@/assets/js/api/environmentManage";
import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage";
import Card from '../components/Card'
import echarts from 'echarts4'
import { environmentDevList } from '@/assets/js/api/environmentManage'
import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
export default {
components: { Card },
props: {
title: {
type: String,
default: "default title"
default: 'default title'
}
},
data() {
@ -49,50 +56,51 @@ export default {
offlineDevNum: 0,
realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
plantCap: {
crc: "--",
humidity: "--",
noise: "--",
plateHumidity: "--",
plateTemperature: "--",
pm10: "--",
pm25: "--",
pressure: "--",
temperature: "--",
tsp: "--",
voltage: "--",
winddirectionName: "--",
windspeed: "--"
crc: '--',
humidity: '--',
noise: '--',
plateHumidity: '--',
plateTemperature: '--',
pm10: '--',
pm25: '--',
pressure: '--',
temperature: '--',
tsp: '--',
voltage: '--',
winddirectionName: '--',
windspeed: '--',
noise: '--'
}
};
}
},
mounted() {
// this.createCenterChart();
this.$nextTick(() => {
this.getDevList();
});
this.getDevList()
})
},
methods: {
getDevList() {
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
result => {
console.log("列表", result);
this.devList = result.result;
console.log(this.devList);
(result) => {
console.log('列表', result)
this.devList = result.result
console.log(this.devList)
if (result.result.length > 0) {
this.currentDevDetail = result.result[0];
this.currentDevDetail = result.result[0]
this.$emit('custClick',this.currentDevDetail)
this.$emit('custClick', this.currentDevDetail)
this.offlineDevNum = 0;
this.onlineDevNum = 0;
this.devList.forEach(element => {
this.offlineDevNum = 0
this.onlineDevNum = 0
this.devList.forEach((element) => {
if (element.isClosed == 2) {
this.offlineDevNum++;
this.offlineDevNum++
} else {
this.onlineDevNum++;
this.onlineDevNum++
}
});
this.getRealTimeDustNoiseData();
})
this.getRealTimeDustNoiseData()
// this.realTimeDustNoiseDataTime = setInterval( () => {
// this.getRealTimeDustNoiseData();
// },5000)
@ -101,7 +109,7 @@ export default {
// this.createCenterChart();
}
}
);
)
},
/** 查询 */
handleQuery() {
@ -112,12 +120,12 @@ export default {
// // 切换设备
realTimeMonitor(value) {
if (this.realTimeDustNoiseDataTime) {
clearInterval(this.realTimeDustNoiseDataTime);
clearInterval(this.realTimeDustNoiseDataTime)
}
console.log("id换了吗", value);
this.currentDevDetail = value;
console.log('id换了吗', value)
this.currentDevDetail = value
this.getRealTimeDustNoiseData();
this.getRealTimeDustNoiseData()
// this.realTimeDustNoiseDataTime = setInterval( () => {
// this.getRealTimeDustNoiseData();
// },5000)
@ -130,179 +138,198 @@ export default {
let data = {
deviceId: this.currentDevDetail.deviceId,
projectSn: this.$store.state.projectSn
};
console.log(data);
getRealTimeDustNoiseDataApi(data).then(res => {
}
console.log(data)
getRealTimeDustNoiseDataApi(data).then((res) => {
if (res.code == 200) {
console.log(res.result);
console.log(res.result)
if (res.result != null) {
this.plantCap = res.result;
this.plantCap = res.result
console.log('this.plantCap===========', this.plantCap)
} else {
this.plantCap = {
crc: "--",
humidity: "--",
noise: "--",
plateHumidity: "--",
plateTemperature: "--",
pm10: "--",
pm25: "--",
pressure: "--",
temperature: "--",
tsp: "--",
voltage: "--",
winddirectionName: "--",
windspeed: "--"
};
crc: '--',
humidity: '--',
noise: '--',
plateHumidity: '--',
plateTemperature: '--',
pm10: '--',
pm25: '--',
pressure: '--',
temperature: '--',
tsp: '--',
voltage: '--',
winddirectionName: '--',
windspeed: '--',
noise: '--'
}
}
this.createCenterChart();
this.createCenterChart()
}
});
})
},
//环境监测实时数据--图表
createCenterChart() {
let centerChart = echarts.init(this.$refs.centerChart);
console.log("this.$refs.centerChart");
console.log(this.$refs.centerChart.offsetHeight);
centerChart.clear();
let detailData = this.$t("message.environmentalOverview.plantCap");
let centerChart = echarts.init(this.$refs.centerChart)
console.log('this.$refs.centerChart')
console.log(this.$refs.centerChart.offsetHeight)
centerChart.clear()
let detailData = this.$t('message.environmentalOverview.plantCap')
for (let i = 0; i < detailData.length; i++) {
if (detailData[i].id == 1) {
detailData[i].value = this.plantCap.humidity; //湿度
detailData[i].value = this.plantCap.humidity //湿度
} else if (detailData[i].id == 2) {
detailData[i].value = this.plantCap.pm25; //pm2.5
detailData[i].value = this.plantCap.pm25 //pm2.5
} else if (detailData[i].id == 3) {
detailData[i].value = this.plantCap.temperature; //温度
detailData[i].value = this.plantCap.temperature //温度
} else if (detailData[i].id == 4) {
detailData[i].value = this.plantCap.tsp; //tsp
detailData[i].value = this.plantCap.tsp //tsp
} else if (detailData[i].id == 5) {
detailData[i].value = this.plantCap.windspeed; //风速
detailData[i].value = this.plantCap.windspeed //风速
} else if (detailData[i].id == 6) {
detailData[i].value = this.plantCap.pm10; // pm10
detailData[i].value = this.plantCap.pm10 // pm10
} else if (detailData[i].id == 7) {
detailData[i].value = this.plantCap.winddirectionName;
detailData[i].value = this.plantCap.winddirectionName
} else if (detailData[i].id == 8) {
detailData[i].value = this.plantCap.pressure
? this.plantCap.pressure
: "--";
: '--'
} else if (detailData[i].id == 9) {
detailData[i].value = this.plantCap.noise
}
detailData[i].value += detailData[i].unit;
detailData[i].value += detailData[i].unit
}
var plantCap = detailData;
var plantCap = detailData
var datalist = [
{
offset: [50, 55],
symbolSize: 100,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#29c0fb"
},
{
offset: 1,
color: "#2dc5b9"
}
])
},
{
offset: [30, 85],
offset: [60, 50],
symbolSize: 70,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#35d17e"
color: '#29c0fb'
},
{
offset: 1,
color: "#49ddb2"
color: '#2dc5b9'
}
])
},
{
offset: [15, 50],
symbolSize: 80,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#e5d273"
},
{
offset: 1,
color: "#e4a37f"
}
])
},
{
offset: [40, 20],
symbolSize: 70,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#277aec"
},
{
offset: 1,
color: "#57c5ec"
}
])
},
{
offset: [85, 58],
offset: [45, 80],
symbolSize: 65,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#e54948"
color: '#35d17e'
},
{
offset: 1,
color: "#f08456"
color: '#49ddb2'
}
])
},
{
offset: [20, 35],
symbolSize: 65,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#e5d273'
},
{
offset: 1,
color: '#e4a37f'
}
])
},
{
offset: [45, 20],
symbolSize: 65,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#277aec'
},
{
offset: 1,
color: '#57c5ec'
}
])
},
{
offset: [95, 45],
symbolSize: 65,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#e54948'
},
{
offset: 1,
color: '#f08456'
}
])
},
{
offset: [76, 20],
symbolSize: 70,
symbolSize: 65,
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#11c46e"
color: '#11c46e'
},
{
offset: 1,
color: "#f08456"
color: '#f08456'
}
])
},
{
offset: [68, 82],
offset: [78, 82],
symbolSize: 65,
opacity: 0.68,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#6367E0"
color: '#6367E0'
},
{
offset: 1,
color: "#B667F0"
color: '#B667F0'
}
])
},
{
offset: [25, 65],
symbolSize: 65,
opacity: 0.68,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#6367E0'
},
{
offset: 1,
color: '#fe6c7f'
}
])
}
];
var datas = [];
]
var datas = []
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
var item = plantCap[i]
var itemToStyle = datalist[i]
datas.push({
name: item.value + "\n" + item.name,
name: item.value + '\n' + item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
@ -320,7 +347,7 @@ export default {
opacity: itemToStyle.opacity
}
}
});
})
}
let option1 = {
grid: {
@ -331,11 +358,11 @@ export default {
xAxis: [
{
gridIndex: 0,
type: "value",
type: 'value',
show: false,
min: 0,
max: 100,
nameLocation: "middle",
nameLocation: 'middle',
nameGap: 5
}
],
@ -345,13 +372,13 @@ export default {
min: 0,
show: false,
max: 100,
nameLocation: "middle",
nameLocation: 'middle',
nameGap: 30
}
],
series: [
{
type: "effectScatter",
type: 'effectScatter',
// symbol: 'circle',
// symbolSize: 120,
@ -359,36 +386,36 @@ export default {
label: {
normal: {
show: true,
formatter: "{b}",
color: "#fff",
formatter: '{b}',
color: '#fff',
textStyle: {
fontSize: "20"
fontSize: '20'
}
}
},
itemStyle: {
normal: {
color: "#00acea"
color: '#00acea'
}
},
data: datas
}
]
};
centerChart.setOption(option1);
window.onresize = centerChart.resize;
}
centerChart.setOption(option1)
window.onresize = centerChart.resize
}
},
watch:{
'plantCap':{
handler(newVal, oldVal) {
if (newVal != oldVal) {
this.createCenterChart();
}
watch: {
plantCap: {
handler(newVal, oldVal) {
if (newVal != oldVal) {
this.createCenterChart()
}
}
},
};
}
}
}
</script>
<style lang="less" scoped>
@ -410,7 +437,7 @@ export default {
::v-deep.el-popover {
min-width: auto;
}
.centerChart {
width: 100%;
height: calc(100% - 22px);

73
src/views/projectAdmin/jlw/envirManage/leftCenter.vue
View File

@ -8,36 +8,39 @@
<div class="item">
<img src="@/assets/images/dataBoard/online.jpg" alt />
<div>
<p class="num" style="color:#5181F6">{{onlineDevNum}}</p>
<p class="num" style="color: #5181f6">{{ onlineDevNum }}</p>
<p>
<!-- 在线设备 -->
{{$t('message.dataBoard.onlineDev')}}
{{ $t('message.dataBoard.onlineDev') }}
</p>
</div>
</div>
<div class="item">
<img src="@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-offline.png" alt />
<img
src="@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-offline.png"
alt
/>
<div>
<p class="num" style="color:#fe6c7f">{{offlineDevNum}}</p>
<p class="num" style="color: #fe6c7f">{{ offlineDevNum }}</p>
<p>
<!-- 离线设备 -->
{{$t('message.dataBoard.notOnlineDev')}}
{{ $t('message.dataBoard.notOnlineDev') }}
</p>
</div>
</div>
</div>
<div class="devListBox">
<ul>
<li v-for="(item,index) in devList" :key="index">
<li v-for="(item, index) in devList" :key="index">
<p>{{ item.deviceName }}</p>
<span class="offline" v-if="item.isClosed==2">
<span class="offline" v-if="item.isClosed == 2">
<!-- 离线 -->
{{$t('message.dataBoard.notOnline')}}
{{ $t('message.dataBoard.notOnline') }}
</span>
<span class="online" v-else>
<!-- 在线 -->
{{$t('message.dataBoard.online')}}
{{ $t('message.dataBoard.online') }}
</span>
</li>
</ul>
@ -53,59 +56,59 @@
</template>
<script>
import Card from "../components/Card";
import Card from '../components/Card'
import { environmentDevList } from "@/assets/js/api/environmentManage";
import { environmentDevList } from '@/assets/js/api/environmentManage'
export default {
components: { Card },
props: {
title: {
type: String,
default: "default title"
default: 'default title'
}
},
data() {
return {
devList: [],
onlineDevNum: 0,
offlineDevNum: 0,
};
offlineDevNum: 0
}
},
mounted() {
this.getDevList();
this.getDevList()
},
methods: {
//获取环境设备列表--环境监测实时数据--下拉
getDevList() {
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
result => {
(result) => {
// console.log('列表', result)
this.devList = result.result;
console.log(this.devList);
this.devList = result.result
console.log(this.devList)
if (result.result.length > 0) {
this.currentDevDetail = result.result[0];
this.offlineDevNum = 0;
this.onlineDevNum = 0;
this.devList.forEach(element => {
this.currentDevDetail = result.result[0]
this.offlineDevNum = 0
this.onlineDevNum = 0
this.devList.forEach((element) => {
if (element.isClosed == 2) {
this.offlineDevNum++;
this.offlineDevNum++
} else {
this.onlineDevNum++;
this.onlineDevNum++
}
});
}
})
}
}
);
)
}
}
};
}
</script>
<style lang="less" scoped>
.containerBox {
width: 100%;
height: 100%;
overflow:auto;
overflow: auto;
.devInfoBox {
display: flex;
@ -148,7 +151,7 @@ export default {
p {
font-size: 16px;
opacity: 0.8;
padding-left: 32px;
padding-left: 10px;
}
.online {
background-color: rgba(68, 215, 182, 0.54);
@ -157,17 +160,17 @@ export default {
background-color: #442b40;
}
}
.noData{
.noData {
margin-top: 5%;
margin-left: 35%;
p{
p {
margin-left: 5%;
}
}
}
::-webkit-scrollbar {
width: 3px;
color: #636364;
width: 3px;
color: #636364;
}
</style>

1025
src/views/projectFront/environmentalMonitor/overview.vue
View File

File diff suppressed because it is too large Load Diff