金林湾大屏页面修改
This commit is contained in:
parent
c4b23c5be3
commit
12840ac241
@ -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" + "/"
|
||||||
|
|||||||
@ -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/", //测试
|
"//" +
|
||||||
|
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/',
|
// 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: [
|
||||||
"系统管理员",
|
"系统管理员",
|
||||||
|
|||||||
@ -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 }}
|
||||||
|
|||||||
@ -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: '--',
|
||||||
|
|||||||
@ -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)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,15 +1,30 @@
|
|||||||
<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
|
||||||
|
class="list-item"
|
||||||
|
:class="item.deviceState == 1 ? 'online' : 'offline'"
|
||||||
|
v-for="(item, index) in videoCountList.videoList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
<div class="label">{{ item.videoName }}</div>
|
<div class="label">{{ item.videoName }}</div>
|
||||||
<div class="status">{{item.deviceState ==1 ? '在线' :'离线'}}</div>
|
<div class="status">
|
||||||
|
{{ item.deviceState == 1 ? '在线' : '离线' }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -65,13 +80,21 @@ export default {
|
|||||||
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 {
|
.status {
|
||||||
background-color: #3cabfd;
|
background-color: #3cabfd;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.offline {
|
&.offline {
|
||||||
background-image: linear-gradient(90deg, rgba(67, 42, 63, 1), rgba(67, 42, 63, 0.2));
|
background-image: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(67, 42, 63, 1),
|
||||||
|
rgba(67, 42, 63, 0.2)
|
||||||
|
);
|
||||||
.status {
|
.status {
|
||||||
background-color: #ff6c7f;
|
background-color: #ff6c7f;
|
||||||
}
|
}
|
||||||
@ -91,8 +114,5 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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>
|
</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>
|
||||||
|
<!-- </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;
|
||||||
|
|||||||
@ -122,6 +122,9 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
series() {
|
series() {
|
||||||
this.createChart()
|
this.createChart()
|
||||||
|
},
|
||||||
|
title() {
|
||||||
|
this.createChart()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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: 1, name: '安全生产' }
|
|
||||||
// ]
|
|
||||||
this.series[1].data = [
|
|
||||||
{
|
|
||||||
value: element.num,
|
value: element.num,
|
||||||
name: element.inspectTypeName
|
name: element.inspectTypeName
|
||||||
}
|
})
|
||||||
]
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user