Merge branch 'dev-yjl' into 'shenzhen-dev'
金林湾大屏-环境监测增加噪音字段 See merge request !131
This commit is contained in:
袁晶琳
commit
2adac09d38
@ -73,7 +73,13 @@ export default {
|
||||
value: "东",
|
||||
id:7,
|
||||
unit:'风'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "噪音",
|
||||
value: "101",
|
||||
id:9,
|
||||
unit:'dB'
|
||||
},
|
||||
// , {
|
||||
// name: "气压",
|
||||
// value: "101",
|
||||
|
||||
@ -73,12 +73,19 @@ export default {
|
||||
value: "东",
|
||||
id:7,
|
||||
unit:'风'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: "气压",
|
||||
value: "101",
|
||||
id:8,
|
||||
unit:'kPa'
|
||||
},
|
||||
{
|
||||
name: "噪音",
|
||||
value: "101",
|
||||
id:9,
|
||||
unit:'dB'
|
||||
},
|
||||
],
|
||||
|
||||
//演示模拟数据
|
||||
|
||||
@ -44,7 +44,7 @@ if (process.env.NODE_ENV == 'development') {
|
||||
// axios.defaults.baseURL ='http://124.71.67.160:8088/' //中建四局线上
|
||||
// axios.defaults.baseURL ='http://182.90.224.147:100/' //演示平台/
|
||||
// axios.defaults.baseURL = 'http://192.168.34.125:6023/' //杨意本地 http/1.1
|
||||
// axios.defaults.baseURL ='http://47.97.202.104:6023/' //金林湾线上
|
||||
// axios.defaults.baseURL ='http://47.97.202.104:6023/' //金林湾线上旧
|
||||
// axios.defaults.baseURL = 'http://192.168.34.231:6023/'; //杨思瑞本地
|
||||
// axios.defaults.baseURL = 'http://47.97.202.104:6023/';
|
||||
// axios.defaults.baseURL = 'http://139.9.66.234:8/';
|
||||
@ -78,16 +78,16 @@ if (process.env.NODE_ENV == 'development') {
|
||||
// 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:12346' //郭圣雄本地
|
||||
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:12345/#/'//内蒙古线上
|
||||
|
||||
axios.defaults.baseURL = 'http://121.196.214.246/api'//金林湾线上新
|
||||
|
||||
} else if (process.env.NODE_ENV == 'debug') {
|
||||
axios.defaults.baseURL = 'https://www.ceshi.com'
|
||||
} else if (process.env.NODE_ENV == 'production') {
|
||||
let host = window.location.host
|
||||
axios.defaults.baseURL = window.location.protocol + '//' + host + '/'
|
||||
axios.defaults.baseURL = window.location.protocol + '//' + host + '/api'
|
||||
// axios.defaults.baseURL ='http://192.168.34.216:6023/'
|
||||
// axios.defaults.baseURL = window.location.protocol + "//" + host.split(":")[0] + ":6023" + "/"
|
||||
// axios.defaults.baseURL = 'http://zhgd.loganwy.com/'
|
||||
|
||||
@ -72,12 +72,14 @@ export default new Vuex.Store({
|
||||
// UPLOADURL:'http://'+"61.190.32.219:9050"+'/upload/image',//正式
|
||||
// FILEURL:'http://'+"61.190.32.219:9050"+'/image/',//正式
|
||||
// FILEURL:'http://'+"47.97.202.104:6023"+'/image/',//正式
|
||||
UPLOADURL: 'http://182.90.224.147:100/upload/image',//演示平台
|
||||
FILEURL: 'http://182.90.224.147:100/image/',//演示平台
|
||||
// UPLOADURL: 'http://182.90.224.147:100/upload/image',//演示平台
|
||||
// FILEURL: 'http://182.90.224.147:100/image/',//演示平台
|
||||
// UPLOADURL: 'http://139.9.66.234:7072/upload/image',//三江集团
|
||||
// FILEURL: 'http://139.9.66.234:7072/image/',//三江集团
|
||||
// UPLOADURL: 'http://182.90.224.147:18170/upload/image',//瑞士恒通
|
||||
// FILEURL: 'http://182.90.224.147:18170/image/',//瑞士恒通
|
||||
UPLOADURL: 'http://121.196.214.246/api/upload/image',//金林湾新地址
|
||||
FILEURL: 'http://121.196.214.246/image/',//金林湾新地址
|
||||
|
||||
ACCOUNTTYPE: [
|
||||
"系统管理员",
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 质量问题 -->
|
||||
<Card :title="title" style="position: relative;">
|
||||
<Card :title="title" style="position: relative">
|
||||
<!-- <el-date-picker
|
||||
v-model="dateRange"
|
||||
size="mini"
|
||||
@ -14,13 +14,22 @@
|
||||
<div class="wrap">
|
||||
<div class="charts">
|
||||
<div class="chart">
|
||||
<JRingChart :title="{ text: total.totalNum, subTitle: '问题总数' }" :color="['#3CABFD']" />
|
||||
<JRingChart
|
||||
:title="{ text: total.totalNum, subTitle: '问题总数' }"
|
||||
:color="['#3CABFD']"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<JRingChart :title="{ text: total.notCloseNum, subTitle: '未闭合问题' }" :color="['#557DEE']" />
|
||||
<JRingChart
|
||||
:title="{ text: total.notCloseNum, subTitle: '未闭合问题' }"
|
||||
:color="['#557DEE']"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<JRingChart :title="{ text: total.rectificationNum, subTitle: '未整改问题' }" :color="['#FE6C7F']" />
|
||||
<JRingChart
|
||||
:title="{ text: total.rectificationNum, subTitle: '未整改问题' }"
|
||||
:color="['#FE6C7F']"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<JRingChart
|
||||
@ -72,9 +81,12 @@ export default {
|
||||
let data = {
|
||||
projectSn: this.$store.state.projectSn
|
||||
}
|
||||
selectQualityStatisticsApi(data).then(res => {
|
||||
selectQualityStatisticsApi(data).then((res) => {
|
||||
console.log('res====', res)
|
||||
this.total = res.result.total
|
||||
let ratio = this.total.totalNum ? ((this.total.closeNum / this.total.totalNum) * 100).toFixed(2) : 0
|
||||
let ratio = this.total.totalNum
|
||||
? ((this.total.closeNum / this.total.totalNum) * 100).toFixed(2)
|
||||
: 0
|
||||
this.total.ratioNum = ratio + '%'
|
||||
})
|
||||
}
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
<div class="rate">
|
||||
<div class="chart">
|
||||
<JRingChart
|
||||
:title="{ text: completeRatio + '%', y: '40%' }"
|
||||
:data="[{ value: totalNum }, { value: closeNum }]"
|
||||
:title="{ text: closeRatio + '%', y: '40%' }"
|
||||
:data="[{ value: closeNum }, { value: totalNum }]"
|
||||
:color="['#5BE2F6', '#193F54']"
|
||||
/>
|
||||
</div>
|
||||
@ -23,9 +23,12 @@
|
||||
</div>
|
||||
<div class="rate">
|
||||
<div class="chart">
|
||||
<!-- title="{ text: 60 + '%', y: '40%' }"
|
||||
:data="[100, 60]" -->
|
||||
|
||||
<JRingChart
|
||||
:title="{ text: closeRatio + '%', y: '40%' }"
|
||||
:data="[{ value: totalNum }, { value: closeNum }]"
|
||||
:data="[{ value: closeNum }, { value: totalNum }]"
|
||||
:color="['#FF6C7F', '#39273D']"
|
||||
/>
|
||||
</div>
|
||||
@ -69,6 +72,7 @@ export default {
|
||||
this.closeRatio = res.result.closeRatio
|
||||
this.closeNum = res.result.closeNum
|
||||
this.closeRatio = res.result.closeRatio
|
||||
this.rectifyCompleteNum = res.result.rectifyCompleteNum
|
||||
})
|
||||
// selectRectifiedSecurityManageList2Api({ projectSn: this.$store.state.projectSn }).then(res => {
|
||||
// console.log('------',res)
|
||||
|
||||
@ -31,9 +31,9 @@
|
||||
</div>
|
||||
<div class="chart">
|
||||
<JRingChart
|
||||
:title="{ text: completeRatio + '%', subTitle: '及时整改率' }"
|
||||
:title="{ text: closeRatio + '%', subTitle: '及时整改率' }"
|
||||
:color="['#ff5e66', '#5084d4']"
|
||||
:data="[{ value: totalNum }, { value: closeNum }]"
|
||||
:data="[{ value: closeNum }, { value: totalNum }]"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="count">
|
||||
@ -74,7 +74,8 @@ export default {
|
||||
completeRatio: 0, //项目及时整改率
|
||||
reviewNum: 0, //待复查数
|
||||
rectificationNum: 0, //待整改数
|
||||
closeNum: 0
|
||||
closeNum: 0,
|
||||
closeRatio: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -88,6 +89,7 @@ export default {
|
||||
this.reviewNum = res.result.reviewNum
|
||||
this.rectificationNum = res.result.rectificationNum
|
||||
this.closeNum = res.result.closeNum
|
||||
this.closeRatio = res.result.closeRatio
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -18,13 +18,13 @@
|
||||
:class="select == 1 ? 'width' : select == 2 ? 'width2' : 'width3'"
|
||||
style="position: relative"
|
||||
>
|
||||
<!-- <div
|
||||
<div
|
||||
:id="'video-cover' + item"
|
||||
class="video-cover"
|
||||
:class="{
|
||||
'video-active': selectVideo == item
|
||||
}"
|
||||
></div> -->
|
||||
></div>
|
||||
<div :id="'video-container' + item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user