金林湾大屏页面修改

This commit is contained in:
yjl 2023-04-01 14:26:45 +08:00
parent c4b23c5be3
commit 12840ac241
10 changed files with 278 additions and 135 deletions

View File

@ -78,17 +78,17 @@ if (process.env.NODE_ENV == 'development') {
// axios.defaults.baseURL = 'http://192.168.34.221:8188' //郭圣雄本地 // axios.defaults.baseURL = 'http://192.168.34.221:8188' //郭圣雄本地
// axios.defaults.baseURL = 'http://192.168.34.221:8210' //郭圣雄本地 // axios.defaults.baseURL = 'http://192.168.34.221:8210' //郭圣雄本地
// axios.defaults.baseURL = 'http://192.168.34.221:12346' //郭圣雄本地 // axios.defaults.baseURL = 'http://192.168.34.221:12346' //郭圣雄本地
axios.defaults.baseURL = 'http://192.168.34.221:12350' //金林湾本地 // axios.defaults.baseURL = 'http://192.168.34.221:12350' //金林湾本地
// axios.defaults.baseURL = 'http://192.168.34.122:8070' //彭洁本地 // axios.defaults.baseURL = 'http://192.168.34.122:8070' //彭洁本地
// axios.defaults.baseURL = 'http://101.43.164.214:11111' //百色线上 // axios.defaults.baseURL = 'http://101.43.164.214:11111' //百色线上
// axios.defaults.baseURL = 'http://101.43.164.214:12345/#/'//内蒙古线上 // axios.defaults.baseURL = 'http://101.43.164.214:12345/#/'//内蒙古线上
// axios.defaults.baseURL = 'http://121.196.214.246/api'//金林湾线上新 axios.defaults.baseURL = 'http://121.196.214.246/api/'//金林湾线上新
} else if (process.env.NODE_ENV == 'debug') { } else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'https://www.ceshi.com' axios.defaults.baseURL = 'https://www.ceshi.com'
} else if (process.env.NODE_ENV == 'production') { } else if (process.env.NODE_ENV == 'production') {
let host = window.location.host let host = window.location.host
axios.defaults.baseURL = window.location.protocol + '//' + host + '/api'//金林湾地址 axios.defaults.baseURL = window.location.protocol + '//' + host + '/api/'//金林湾地址
// axios.defaults.baseURL = window.location.protocol + '//' + host + '/' // axios.defaults.baseURL = window.location.protocol + '//' + host + '/'
// axios.defaults.baseURL ='http://192.168.34.216:6023/' // axios.defaults.baseURL ='http://192.168.34.216:6023/'
// axios.defaults.baseURL = window.location.protocol + "//" + host.split(":")[0] + ":6023" + "/" // axios.defaults.baseURL = window.location.protocol + "//" + host.split(":")[0] + ":6023" + "/"

View File

@ -45,21 +45,29 @@ export default new Vuex.Store({
PAGESIZRS: [10, 20, 30, 50], PAGESIZRS: [10, 20, 30, 50],
// UPLOADURL:'http://10.0.1.43:6023/upload/image',//测试 // UPLOADURL:'http://10.0.1.43:6023/upload/image',//测试
// FILEURL:'http://10.0.1.43:6023/image/',//测试 // FILEURL:'http://10.0.1.43:6023/image/',//测试
// BASEURL: baseUrl
// ? baseUrl
// : window.location.protocol + "//" + window.location.host + "/", //正式部署地址
// UPLOADURL:
// window.location.protocol + "//" + window.location.host + "/upload/image", //正式部署地址
// FILEURL: window.location.protocol + "//" + window.location.host + "/image/", //正式部署地址
//----------------
BASEURL: baseUrl BASEURL: baseUrl
? baseUrl ? baseUrl
: window.location.protocol + "//" + window.location.host + "/api", // : window.location.protocol + "//" + window.location.host + "/api/", //金林湾部署地址 // UPLOADURL: 'http://182.90.224.237:7000/upload/image',
// UPLOADURL: UPLOADURL:
// window.location.protocol + "//" + window.location.host + "/api/upload/image", // window.location.protocol +
// FILEURL: window.location.protocol + "//" + window.location.host + "/image/", //测试 "//" +
// tag: 本地测试接口 // BASEURL:'http://192.168.34.174:6023/', window.location.host +
"/api/upload/image", //金林湾部署地址
FILEURL: window.location.protocol + "//" + window.location.host + "/image/", //金林湾部署地址 // FILEURL: 'http://182.90.224.237:7000/image/',
// tag: 本地测试接口 // BASEURL:'http://192.168.34.174:6023/',
/* 2022-05-16 */ /* 2022-05-16 */
// tag: 部署河南项目时,需要打开这两行代码 // tag: 部署河南项目时,需要打开这两行代码
// UPLOADURL: 'http://139.9.66.234:6324/`upload/image', // UPLOADURL: 'http://139.9.66.234:6324/`upload/image',
// FILEURL: 'http://139.9.66.234:6324/image/', // FILEURL: 'http://139.9.66.234:6324/image/',
/* 2022-06-06 广西本地的*/ // UPLOADURL: 'http://182.90.224.237:7000/upload/image', /* 2022-06-06 广西本地的*/ // 邱平毅的
// FILEURL: 'http://182.90.224.237:7000/image/',
// 邱平毅的
// BASEURL:'http://192.168.34.116:6023/', // BASEURL:'http://192.168.34.116:6023/',
// UPLOADURL: 'http://192.168.34.116:6023/upload/image', // UPLOADURL: 'http://192.168.34.116:6023/upload/image',
// FILEURL: 'http://192.168.34.116:6023/image/', // FILEURL: 'http://192.168.34.116:6023/image/',
@ -78,8 +86,8 @@ export default new Vuex.Store({
// FILEURL: 'http://139.9.66.234:7072/image/',//三江集团 // FILEURL: 'http://139.9.66.234:7072/image/',//三江集团
// UPLOADURL: 'http://182.90.224.147:18170/upload/image',//瑞士恒通 // UPLOADURL: 'http://182.90.224.147:18170/upload/image',//瑞士恒通
// FILEURL: 'http://182.90.224.147:18170/image/',//瑞士恒通 // FILEURL: 'http://182.90.224.147:18170/image/',//瑞士恒通
UPLOADURL: 'http://121.196.214.246/api/upload/image',//金林湾新地址 UPLOADURL: "http://121.196.214.246/api/upload/image", //金林湾新地址
FILEURL: 'http://121.196.214.246/image/',//金林湾新地址 FILEURL: "http://121.196.214.246/image/", //金林湾新地址
ACCOUNTTYPE: [ ACCOUNTTYPE: [
"系统管理员", "系统管理员",

View File

@ -23,11 +23,11 @@
<div class="list"> <div class="list">
<div <div
class="list-item" class="list-item"
:class="item.devonline == '0' ? 'online' : 'offline'" :class="item.devonline == '0' ? 'offline' : 'online'"
v-for="(item, i) in list" v-for="(item, i) in list"
:key="i" :key="i"
> >
<div class="status">{{ item.devonline == '0' ? '在线' : '离线' }}</div> <div class="status">{{ item.devonline == '0' ? '离线' : '在线' }}</div>
<div class="label">{{ item.devName || item.deviceName }}</div> <div class="label">{{ item.devName || item.deviceName }}</div>
<div class="num" v-if="type === 'waring'"> <div class="num" v-if="type === 'waring'">
今日报警{{ item.alarmNum }} 今日报警{{ item.alarmNum }}

View File

@ -2833,14 +2833,14 @@ export default {
clearInterval(this.towerInterval) clearInterval(this.towerInterval)
} }
// //
clearInterval(this.plantCapInterval) // clearInterval(this.plantCapInterval)
if (this.lifterInterval) { // if (this.lifterInterval) {
clearInterval(this.lifterInterval) // clearInterval(this.lifterInterval)
} // }
if (this.videoAlarmTimer) { // if (this.videoAlarmTimer) {
clearInterval(this.videoAlarmTimer) // clearInterval(this.videoAlarmTimer)
} // }
clearInterval(this.timer1) // clearInterval(this.timer1)
}, },
methods: { methods: {
// //
@ -3058,7 +3058,7 @@ export default {
}, },
closeInterval() { closeInterval() {
this.showEnvironDialog = false this.showEnvironDialog = false
clearInterval(this.plantCapInterval) // clearInterval(this.plantCapInterval)
}, },
closeBoltDetails() { closeBoltDetails() {
this.showBoltDetails = false this.showBoltDetails = false
@ -3591,9 +3591,9 @@ export default {
} }
}) })
this.getRealTimeDustNoiseData() this.getRealTimeDustNoiseData()
this.realTimeDustNoiseDataTime = setInterval(() => { // this.realTimeDustNoiseDataTime = setInterval(() => {
this.getRealTimeDustNoiseData() // this.getRealTimeDustNoiseData()
}, 5000) // }, 5000)
this.selectDustNoiseData() this.selectDustNoiseData()
} else { } else {
// this.createCenterChart(); // this.createCenterChart();
@ -3640,9 +3640,9 @@ export default {
if (res.code == 200) { if (res.code == 200) {
if (res.result) { if (res.result) {
this.plantCap = res.result this.plantCap = res.result
this.plantCapInterval = setTimeout(() => { // this.plantCapInterval = setTimeout(() => {
this.getRealTimeDustNoiseData(deviceId) // this.getRealTimeDustNoiseData(deviceId)
}, 5000) // }, 5000)
} else { } else {
this.plantCap = { this.plantCap = {
crc: '--', crc: '--',

View File

@ -200,6 +200,8 @@ export default {
// //
selectVideoCountList(data).then((res) => { selectVideoCountList(data).then((res) => {
if (res.code === 200) { if (res.code === 200) {
console.log('获取视频设备信息: ', res)
this.videoCountList = res.result this.videoCountList = res.result
} }
}) })
@ -217,6 +219,8 @@ export default {
// //
selectEnvironmentDevAlaramCountList(data).then((res) => { selectEnvironmentDevAlaramCountList(data).then((res) => {
if (res.code === 200) { if (res.code === 200) {
console.log('获取环境监测信息', res)
this.$set(this.environment, 'list', res.result.devList) this.$set(this.environment, 'list', res.result.devList)
} }
}) })

View File

@ -1,16 +1,31 @@
<template> <template>
<Card :title="title"> <Card :title="title">
<DeviceCard <DeviceCard
:leftCount="{ value: videoCountList.onlineNum, label: '在线设备', img: 'online' }" :leftCount="{
:rightCount="{ value: videoCountList.totalDevNum, label: '离线设备', img: 'offline' }" value: videoCountList.onlineNum,
label: '在线设备',
img: 'online'
}"
:rightCount="{
value: videoCountList.totalDevNum,
label: '离线设备',
img: 'offline'
}"
> >
<div class="list"> <div class="list">
<div class="list-head">设备名称</div> <div class="list-head">设备名称</div>
<div class="listBox"> <div class="listBox">
<div class="list-item" :class="item.deviceState ==1 ? 'offline' : 'online'" v-for="(item,index) in videoCountList.videoList" :key="index"> <div
<div class="label">{{item.videoName}}</div> class="list-item"
<div class="status">{{item.deviceState ==1 ? '在线' :'离线'}}</div> :class="item.deviceState == 1 ? 'online' : 'offline'"
</div> v-for="(item, index) in videoCountList.videoList"
:key="index"
>
<div class="label">{{ item.videoName }}</div>
<div class="status">
{{ item.deviceState == 1 ? '在线' : '离线' }}
</div>
</div>
</div> </div>
</div> </div>
</DeviceCard> </DeviceCard>
@ -27,15 +42,15 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
videoCountList:{ videoCountList: {
type:Object, type: Object,
default:[] default: []
} }
}, },
data() { data() {
return {} return {}
}, },
mounted(){ mounted() {
// console.log('--------------',this.videoCountList) // console.log('--------------',this.videoCountList)
} }
} }
@ -47,7 +62,7 @@ export default {
color: #636364; color: #636364;
} }
.list { .list {
padding: 0 10px; padding: 0 10px;
color: #fff; color: #fff;
.list-head { .list-head {
@ -55,44 +70,49 @@ export default {
padding-left: 16px; padding-left: 16px;
font-size: 12px; font-size: 12px;
} }
.listBox{ .listBox {
height:120px; height: 120px;
overflow: auto; overflow: auto;
.list-item { .list-item {
margin-bottom: 6px; margin-bottom: 6px;
padding: 0 16px; padding: 0 16px;
height: 22px; height: 22px;
display: flex; display: flex;
align-items: center; align-items: center;
&.online { &.online {
background-image: linear-gradient(90deg, rgba(23, 54, 74, 1), rgba(23, 54, 74, 0.2)); background-image: linear-gradient(
90deg,
rgba(23, 54, 74, 1),
rgba(23, 54, 74, 0.2)
);
.status {
background-color: #3cabfd;
}
}
&.offline {
background-image: linear-gradient(
90deg,
rgba(67, 42, 63, 1),
rgba(67, 42, 63, 0.2)
);
.status {
background-color: #ff6c7f;
}
}
.status { .status {
background-color: #3cabfd; margin-right: 6px;
width: 36px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 12px;
border-radius: 9px;
}
.label {
margin-right: auto;
font-size: 14px;
} }
} }
&.offline {
background-image: linear-gradient(90deg, rgba(67, 42, 63, 1), rgba(67, 42, 63, 0.2));
.status {
background-color: #ff6c7f;
}
}
.status {
margin-right: 6px;
width: 36px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 12px;
border-radius: 9px;
}
.label {
margin-right: auto;
font-size: 14px;
}
} }
}
} }
</style> </style>

View File

@ -1,8 +1,16 @@
<template> <template>
<Card :title="title"> <Card :title="title">
<DeviceCard <DeviceCard
:leftCount="{ value: offlineNum, label: '在线设备', img: 'online' }" :leftCount="{
:rightCount="{ value: onlineNum, label: '离线设备', img: 'warring2' }" value: ufaceList.totalDevOnlineNum,
label: '在线设备',
img: 'online'
}"
:rightCount="{
value: ufaceList.totalDevNum - ufaceList.totalDevOnlineNum,
label: '离线设备',
img: 'warring2'
}"
> >
<div class="list"> <div class="list">
<div class="list-head"> <div class="list-head">
@ -13,7 +21,7 @@
<div class="listBox"> <div class="listBox">
<div <div
class="list-item" class="list-item"
:class="item.deviceState == 1 ? 'offline' : 'online'" :class="item.deviceState == 1 ? 'online' : 'offline'"
v-for="(item, index) in ufaceList.devList" v-for="(item, index) in ufaceList.devList"
:key="index" :key="index"
> >
@ -21,8 +29,10 @@
{{ item.deviceState == 1 ? '在线' : '离线' }} {{ item.deviceState == 1 ? '在线' : '离线' }}
</div> </div>
<div class="label">{{ item.devName }}</div> <div class="label">{{ item.devName }}</div>
<div class="enter">{{ item.isEnter }}</div> <div class="enter">{{ item.inTotalNum }}</div>
<div class="outer">{{ item.outTotalNum }}</div> <div class="outer" style="margin-right: 20px">
{{ item.outTotalNum }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -95,7 +105,7 @@ export default {
margin-right: auto; margin-right: auto;
} }
.enter { .enter {
width: 70px; width: 120px;
} }
.outer { .outer {
width: 70px; width: 70px;
@ -145,7 +155,7 @@ export default {
font-size: 14px; font-size: 14px;
} }
.enter { .enter {
width: 70px; width: 80px;
} }
.outer { .outer {
width: 70px; width: 70px;

View File

@ -3,16 +3,67 @@
<Card :title="title"> <Card :title="title">
<div class="contentBox"> <div class="contentBox">
<div class="myChart" ref="myChart" /> <div class="myChart" ref="myChart" />
<!-- <vue-scorll style="height: 100px"> -->
<div class="count"> <div class="count">
<div class="count-item"> <!-- <div class="count-item">
<div class="label">扬尘噪声报警</div> <div class="label">扬尘噪声报警</div>
<div class="num">{{ alarmData.noiseNum }}</div> <div class="num">{{ alarmData.noiseNum }}</div>
</div> </div> -->
<div class="count-item"> <!-- <div class="count-item">
<div class="label">PM2.5超标报警</div> <div class="label">PM2.5超标报警</div>
<div class="num">{{ alarmData.pm25Num }}</div> <div class="num">{{ alarmData.pm25Num }}</div>
</div> -->
<div class="left">
<div class="count-item">
<span class="color1"></span>
<div class="label">pm2.5 ug/m3</div>
<div class="num">{{ alarmData.pm25Num }}</div>
</div>
<div class="count-item">
<span class="color2"></span>
<div class="label">pm10 ug/m3</div>
<div class="num">{{ alarmData.pm10Num }}</div>
</div>
<div class="count-item">
<span class="color3"></span>
<div class="label">噪音 dB</div>
<div class="num">{{ alarmData.noiseNum }}</div>
</div>
<!-- <div class="count-item">
<div class="label">夜晚噪音 db</div>
<div class="num">4</div>
</div> -->
<div class="count-item">
<span class="color4"></span>
<div class="label">风速 m/s</div>
<div class="num">{{ alarmData.windspeedNum }}</div>
</div>
</div>
<div class="right">
<div class="count-item">
<span class="color5"></span>
<div class="label">TSP ug/m3</div>
<div class="num">{{ alarmData.tspNum }}</div>
</div>
<div class="count-item">
<span class="color6"></span>
<div class="label">温度 </div>
<div class="num">{{ alarmData.temperatureNum }}</div>
</div>
<div class="count-item">
<span class="color7"></span>
<div class="label">湿度 %RH</div>
<div class="num">{{ alarmData.humidityNum }}</div>
</div>
</div> </div>
</div> </div>
<!-- </vue-scorll> -->
</div> </div>
</Card> </Card>
</template> </template>
@ -33,9 +84,14 @@ export default {
data() { data() {
return { return {
alarmData: { alarmData: {
totalAlarm: '', totalAlarm: '', //
noiseNum: '', noiseNum: '', //
pm25Num: '' pm25Num: '', //PM2.5
pm10Num: 0, //PM10
temperatureNum: 0, //
tspNum: 0, //tsp
windspeedNum: 0, //
humidityNum: 0 //湿
} }
} }
}, },
@ -46,9 +102,9 @@ export default {
countTotal() { countTotal() {
selectEnvironmentAlarmCountTotalApi({ selectEnvironmentAlarmCountTotalApi({
sn: this.$store.state.projectSn sn: this.$store.state.projectSn
}).then(res => { }).then((res) => {
this.alarmData = res.result this.alarmData = res.result
console.log('报警统计',res.result); console.log('报警统计', res.result)
this.initMyChart() this.initMyChart()
}) })
}, },
@ -90,7 +146,24 @@ export default {
// fontSize: 16, // fontSize: 16,
// } // }
// }, // },
color: ['#ff6c7f', '#567cf6'], // color: [
// '#ff6c7f',
// '#567cf6',
// '#35d17e',
// '#e54948',
// '#49ddb2',
// '#f08456',
// '#3cabfd'
// ],
color: [
'#3cabfd',
'#f08456',
'#49ddb2',
'#e54948',
'#35d17e',
'#567cf6',
'#ff6c7f'
],
series: [ series: [
{ {
type: 'pie', type: 'pie',
@ -119,8 +192,13 @@ export default {
show: false show: false
}, },
data: [ data: [
{ value: this.alarmData.noiseNum, name: `扬尘噪声报警` }, { value: this.alarmData.humidityNum, name: `湿度 %RH` },
{ value: this.alarmData.pm25Num, name: `PM2.5超标报警` } { value: this.alarmData.temperatureNum, name: `温度 ℃` },
{ value: this.alarmData.tspNum, name: `TSP ug/m3` },
{ value: this.alarmData.windspeedNum, name: `风速 m/s` },
{ value: this.alarmData.noiseNum, name: `噪音 db` },
{ value: this.alarmData.pm10Num, name: `pm10 ug/m3` },
{ value: this.alarmData.pm25Num, name: `pm2.5 ug/m3` }
] ]
} }
] ]
@ -148,13 +226,45 @@ export default {
flex: 1; flex: 1;
height: 100%; height: 100%;
display: flex; display: flex;
box-sizing: border-box; // box-sizing: border-box;
padding-left: 10%; // padding-left: 10%;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
align-items: flex-start; // align-items: flex-start;
.count-item { .count-item {
position: relative; position: relative;
margin-bottom: 5px;
span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
top: 6px;
left: -18px;
position: absolute;
}
.color1 {
background-color: #ff6c7f;
}
.color2 {
background-color: #567cf6;
}
.color3 {
background-color: #35d17e;
}
.color4 {
background-color: #e54948;
}
.color5 {
background-color: #49ddb2;
}
.color6 {
background-color: #f08456;
}
.color7 {
background-color: #3cabfd;
}
&::before { &::before {
position: absolute; position: absolute;
left: -16px; left: -16px;
@ -164,17 +274,18 @@ export default {
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
} }
&:first-child { // &:first-child {
margin-bottom: 20px; // margin-bottom: 20px;
} // }
&:first-child::before {
background-color: #ff768b; // &:first-child::before {
transform: translateY(-6px); // background-color: #ff768b;
} // transform: translateY(-6px);
&:last-child::before { // }
background-color: #3cabfd; // &:last-child::before {
transform: translateY(-6px); // background-color: #3cabfd;
} // transform: translateY(-6px);
// }
.label { .label {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;

View File

@ -122,6 +122,9 @@ export default {
watch: { watch: {
series() { series() {
this.createChart() this.createChart()
},
title() {
this.createChart()
} }
} }
} }

View File

@ -25,9 +25,7 @@ export default {
data() { data() {
return { return {
totals: { totals: {
total: 0, total: 0
num: 0,
inspectTypeName: ''
}, },
series: [ series: [
{ {
@ -35,19 +33,13 @@ export default {
startAngle: 90, startAngle: 90,
radius: ['58%', '54%'], radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'], color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40], data: [],
hoverAnimation: false hoverAnimation: false
}, },
{ {
color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0'], color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0'],
startAngle: 90, startAngle: 90,
data: [ data: [],
{ value: 45, name: '文明施工' },
{ value: 5, name: '未分类' },
{ value: 15, name: '安全管理' },
{ value: 10, name: '施工安全' },
{ value: 45, name: '基础工程' }
],
hoverAnimation: false hoverAnimation: false
} }
] ]
@ -56,7 +48,7 @@ export default {
mounted() {}, mounted() {},
created() { created() {
this.getData() this.getData()
this.totals.total = JSON.parse(localStorage.getItem('safeTotal')) // this.totals.total = JSON.parse(localStorage.getItem('safeTotal'))
}, },
methods: { methods: {
getData() { getData() {
@ -65,22 +57,17 @@ export default {
projectSn: this.$store.state.projectSn projectSn: this.$store.state.projectSn
}).then((res) => { }).then((res) => {
console.log('问题占比数据', res) console.log('问题占比数据', res)
if (res.result.length >= 1) {
that.totals.total = res.result[0].total
}
res.result.forEach((element) => { res.result.forEach((element) => {
that.totals.total = element.total // that.totals.total = element.total
// that.totals.num = element.num
// that.totals.inspectTypeName = element.inspectTypeName
localStorage.setItem('safeTotal', element.total) localStorage.setItem('safeTotal', element.total)
// console.log('bbb', that.series[1].data) // console.log('bbb', that.series[1].data)
// that.series[index].data = [ that.series[1].data.push({
// { value: element.num, name: element.inspectTypeName } value: element.num,
// // { value: 1, name: '' } name: element.inspectTypeName
// ] })
this.series[1].data = [
{
value: element.num,
name: element.inspectTypeName
}
]
}) })
}) })
} }