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: "东", value: "东",
id:7, id:7,
unit:'风' unit:'风'
} },
{
name: "噪音",
value: "101",
id:9,
unit:'dB'
},
// , { // , {
// name: "气压", // name: "气压",
// value: "101", // value: "101",

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

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

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

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

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

File diff suppressed because it is too large Load Diff