Skip to content

Z
ZiBoYingJI
Commit 56099822 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

详情内页区分

parent b99aab8f
Show whitespace changes
Inline Side-by-side
Showing with 1120 additions and 124 deletions
public/datav/detail/daqi-monitor.html
View file @ 56099822
...@@ -26,9 +26,6 @@ ...@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;"> <body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<div id="app"> <div id="app">
<div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
v-show="!isReady"></div>
<div style="height: 80px;"> <div style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;"> <div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1" <div class="flex-1"
...@@ -49,7 +46,7 @@ ...@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</div> <div class="f20 color-theme ml10">返回</div>
</div> </div>
<div class="flex-text ml10 mr10 mt15"> <div class="flex-text ml10 mr10 mt15" style="margin-top:20px;">
<div style="width: 490px;height: calc(100vh - 110px);"> <div style="width: 490px;height: calc(100vh - 110px);">
<div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));"> <div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
...@@ -61,7 +58,7 @@ ...@@ -61,7 +58,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.natural.menuList" @click="changeMenu(item)" <li v-for="(item, index) in menuObj.ecosystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}"> :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
...@@ -85,8 +82,23 @@ ...@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh" <div class="flex-1 ml15 flex-text flex-column ovh"
style="height: calc(100vh - 110px); justify-content: space-between"> style="height: calc(100vh - 110px); justify-content: space-between">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;"> <!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div> </div>
</div> </div>
...@@ -118,38 +130,192 @@ ...@@ -118,38 +130,192 @@
currentSensorId: '', currentSensorId: '',
// 表格数据 // 表格数据
tableList: [], tableList: []
filePath: ''
} }
}, },
mounted() { mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
}, },
watch: { watch: {
createTime() { createTime() {
this.getChartsData()
} }
}, },
methods: { methods: {
getImage() { changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表 // 视频列表
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/data/sz/sensorList/feng', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
}); });
this.isReady = true this.isReady = true
}, },
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
}, },
}) })
</script> </script>
......
public/datav/detail/dev-use.html
View file @ 56099822
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/api/kdFile/natural', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测 type: '3' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.filePath = host + '/file' + res.data.body
......
public/datav/detail/dizhi-huanjing.html
View file @ 56099822
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/api/kdFile/natural', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测 type: '4' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.filePath = host + '/file' + res.data.body
......
public/datav/detail/green-mine.html
View file @ 56099822
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/api/kdFile/natural', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测 type: '5' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.filePath = host + '/file' + res.data.body
......
public/datav/detail/humidity-monitor.html
View file @ 56099822
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}"> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
</ul> </ul>
......
public/datav/detail/people-location.html
View file @ 56099822
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}"> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
</ul> </ul>
......
public/datav/detail/people-monitor.html
View file @ 56099822
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}"> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
</ul> </ul>
......
public/datav/detail/resource-storage.html
View file @ 56099822
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/api/kdFile/natural', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测 type: '2' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.filePath = host + '/file' + res.data.body
......
public/datav/detail/shape-monitor.html
View file @ 56099822
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}"> :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
...@@ -128,8 +128,8 @@ ...@@ -128,8 +128,8 @@
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
<div class="wp100"> <div class="wp100">
<div class="relative"> <div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange" <el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right"> end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </div>
......
public/datav/detail/shui-monitor.html
View file @ 56099822
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/api/kdFile/natural', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测 type: '6' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.filePath = host + '/file' + res.data.body
......
public/datav/detail/shuitu-monitor.html
View file @ 56099822
...@@ -26,9 +26,6 @@ ...@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;"> <body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<div id="app"> <div id="app">
<div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
v-show="!isReady"></div>
<div style="height: 80px;"> <div style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;"> <div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1" <div class="flex-1"
...@@ -49,7 +46,7 @@ ...@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</div> <div class="f20 color-theme ml10">返回</div>
</div> </div>
<div class="flex-text ml10 mr10 mt15"> <div class="flex-text ml10 mr10 mt15" style="margin-top:60px;">
<div style="width: 490px;height: calc(100vh - 110px);"> <div style="width: 490px;height: calc(100vh - 110px);">
<div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));"> <div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
...@@ -61,7 +58,7 @@ ...@@ -61,7 +58,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.natural.menuList" @click="changeMenu(item)" <li v-for="(item, index) in menuObj.watersystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}"> :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
...@@ -85,8 +82,23 @@ ...@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh" <div class="flex-1 ml15 flex-text flex-column ovh"
style="height: calc(100vh - 110px); justify-content: space-between"> style="height: calc(100vh - 110px); justify-content: space-between">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;"> <!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div> </div>
</div> </div>
...@@ -118,38 +130,192 @@ ...@@ -118,38 +130,192 @@
currentSensorId: '', currentSensorId: '',
// 表格数据 // 表格数据
tableList: [], tableList: []
filePath: ''
} }
}, },
mounted() { mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
}, },
watch: { watch: {
createTime() { createTime() {
this.getChartsData()
} }
}, },
methods: { methods: {
getImage() { changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表 // 视频列表
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/data/sz/sensorList/feng', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
}); });
this.isReady = true this.isReady = true
}, },
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
}, },
}) })
</script> </script>
......
public/datav/detail/shuizhi-monitor.html
View file @ 56099822
...@@ -26,9 +26,6 @@ ...@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;"> <body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<div id="app"> <div id="app">
<div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
v-show="!isReady"></div>
<div style="height: 80px;"> <div style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;"> <div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1" <div class="flex-1"
...@@ -49,7 +46,7 @@ ...@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</div> <div class="f20 color-theme ml10">返回</div>
</div> </div>
<div class="flex-text ml10 mr10 mt15"> <div class="flex-text ml10 mr10 mt15" style="margin-top:60px;">
<div style="width: 490px;height: calc(100vh - 110px);"> <div style="width: 490px;height: calc(100vh - 110px);">
<div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));"> <div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
...@@ -61,7 +58,7 @@ ...@@ -61,7 +58,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.natural.menuList" @click="changeMenu(item)" <li v-for="(item, index) in menuObj.ecosystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}"> :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
...@@ -85,8 +82,23 @@ ...@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh" <div class="flex-1 ml15 flex-text flex-column ovh"
style="height: calc(100vh - 110px); justify-content: space-between"> style="height: calc(100vh - 110px); justify-content: space-between">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;"> <!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div> </div>
</div> </div>
...@@ -118,38 +130,192 @@ ...@@ -118,38 +130,192 @@
currentSensorId: '', currentSensorId: '',
// 表格数据 // 表格数据
tableList: [], tableList: []
filePath: ''
} }
}, },
mounted() { mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
}, },
watch: { watch: {
createTime() { createTime() {
this.getChartsData()
} }
}, },
methods: { methods: {
getImage() { changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表 // 视频列表
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/data/sz/sensorList/feng', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
}); });
this.isReady = true this.isReady = true
}, },
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
}, },
}) })
</script> </script>
......
public/datav/detail/temperature-monitor.html
View file @ 56099822
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}"> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
</ul> </ul>
......
public/datav/detail/tu-monitor.html
View file @ 56099822
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/api/kdFile/natural', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测 type: '7' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.filePath = host + '/file' + res.data.body
......
public/datav/detail/turang-monitor.html
View file @ 56099822
...@@ -26,9 +26,6 @@ ...@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;"> <body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<div id="app"> <div id="app">
<div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
v-show="!isReady"></div>
<div style="height: 80px;"> <div style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;"> <div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1" <div class="flex-1"
...@@ -49,7 +46,7 @@ ...@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</div> <div class="f20 color-theme ml10">返回</div>
</div> </div>
<div class="flex-text ml10 mr10 mt15"> <div class="flex-text ml10 mr10 mt15" style="margin-top:60px;">
<div style="width: 490px;height: calc(100vh - 110px);"> <div style="width: 490px;height: calc(100vh - 110px);">
<div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));"> <div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
...@@ -61,7 +58,7 @@ ...@@ -61,7 +58,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.natural.menuList" @click="changeMenu(item)" <li v-for="(item, index) in menuObj.ecosystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}"> :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
...@@ -85,8 +82,23 @@ ...@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh" <div class="flex-1 ml15 flex-text flex-column ovh"
style="height: calc(100vh - 110px); justify-content: space-between"> style="height: calc(100vh - 110px); justify-content: space-between">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;"> <!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div> </div>
</div> </div>
...@@ -118,38 +130,192 @@ ...@@ -118,38 +130,192 @@
currentSensorId: '', currentSensorId: '',
// 表格数据 // 表格数据
tableList: [], tableList: []
filePath: ''
} }
}, },
mounted() { mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
}, },
watch: { watch: {
createTime() { createTime() {
this.getChartsData()
} }
}, },
methods: { methods: {
getImage() { changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表 // 视频列表
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/data/sz/sensorList/feng', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
}); });
this.isReady = true this.isReady = true
}, },
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
}, },
}) })
</script> </script>
......
public/datav/detail/video-monitor.html
View file @ 56099822
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}"> :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
......
public/datav/detail/water-monitor.html
View file @ 56099822
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}"> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
</ul> </ul>
......
public/datav/detail/wind-monitor.html
View file @ 56099822
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.emergency.menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}"> <li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
</ul> </ul>
......
public/datav/detail/yandao-monitor.html
View file @ 56099822
...@@ -26,9 +26,6 @@ ...@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;"> <body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<div id="app"> <div id="app">
<div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
v-show="!isReady"></div>
<div style="height: 80px;"> <div style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;"> <div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1" <div class="flex-1"
...@@ -49,7 +46,7 @@ ...@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</div> <div class="f20 color-theme ml10">返回</div>
</div> </div>
<div class="flex-text ml10 mr10 mt15"> <div class="flex-text ml10 mr10 mt15" style="margin-top:20px;">
<div style="width: 490px;height: calc(100vh - 110px);"> <div style="width: 490px;height: calc(100vh - 110px);">
<div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));"> <div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
...@@ -61,7 +58,7 @@ ...@@ -61,7 +58,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.natural.menuList" @click="changeMenu(item)" <li v-for="(item, index) in menuObj.ecosystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}"> :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
...@@ -85,8 +82,23 @@ ...@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh" <div class="flex-1 ml15 flex-text flex-column ovh"
style="height: calc(100vh - 110px); justify-content: space-between"> style="height: calc(100vh - 110px); justify-content: space-between">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;"> <!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div> </div>
</div> </div>
...@@ -118,38 +130,192 @@ ...@@ -118,38 +130,192 @@
currentSensorId: '', currentSensorId: '',
// 表格数据 // 表格数据
tableList: [], tableList: []
filePath: ''
} }
}, },
mounted() { mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
}, },
watch: { watch: {
createTime() { createTime() {
this.getChartsData()
} }
}, },
methods: { methods: {
getImage() { changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表 // 视频列表
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/data/sz/sensorList/feng', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
}); });
this.isReady = true this.isReady = true
}, },
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
}, },
}) })
</script> </script>
......
public/datav/detail/zaosheng-monitor.html
View file @ 56099822
...@@ -26,9 +26,6 @@ ...@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;"> <body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<div id="app"> <div id="app">
<div class="fixed wp100 hv100" style="background-color: #000000;left: 0;top: 0;z-index: 1999;"
v-show="!isReady"></div>
<div style="height: 80px;"> <div style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;"> <div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1" <div class="flex-1"
...@@ -49,7 +46,7 @@ ...@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</div> <div class="f20 color-theme ml10">返回</div>
</div> </div>
<div class="flex-text ml10 mr10 mt15"> <div class="flex-text ml10 mr10 mt15" style="margin-top:60px;">
<div style="width: 490px;height: calc(100vh - 110px);"> <div style="width: 490px;height: calc(100vh - 110px);">
<div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));"> <div style="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
...@@ -61,7 +58,7 @@ ...@@ -61,7 +58,7 @@
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
<li v-for="(item, index) in menuObj.natural.menuList" @click="changeMenu(item)" <li v-for="(item, index) in menuObj.ecosystem.menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.name}"> :class="{active: bigScreenDetailMenu===item.name}">
{{item.name}} {{item.name}}
</li> </li>
...@@ -85,8 +82,23 @@ ...@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh" <div class="flex-1 ml15 flex-text flex-column ovh"
style="height: calc(100vh - 110px); justify-content: space-between"> style="height: calc(100vh - 110px); justify-content: space-between">
<img :src="filePath" alt="" srcset="" style="width: 100%; height: 100%;"> <!-- 视频监控 -->
<div class="wp100 relative">
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="daterange"
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
<div class="mt5" style="width: 100%;height:740px;display:flex; align-items:center; justify-content:center;">
<p>暂无数据</p>
</div>
</div>
<!-- video end -->
</div>
</div> </div>
</div> </div>
...@@ -118,38 +130,192 @@ ...@@ -118,38 +130,192 @@
currentSensorId: '', currentSensorId: '',
// 表格数据 // 表格数据
tableList: [], tableList: []
filePath: ''
} }
}, },
mounted() { mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
}, },
watch: { watch: {
createTime() { createTime() {
this.getChartsData()
} }
}, },
methods: { methods: {
getImage() { changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表 // 视频列表
Axiosx.get(host + '/api/kdFile/natural', { Axiosx.get(host + '/data/sz/sensorList/feng', {
params: { params: {
enterpriseId: this.selectedMine.id, enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
} }
}).then(res => { }).then(res => {
this.filePath = host + '/file' + res.data.body this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
}); });
this.isReady = true this.isReady = true
}, },
getTableList() {
// 视频列表
Axiosx.get(host + '/data/sz/historyInside/feng', {
params: {
code: this.currentSensorId,
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
},
symbol: 'none' // 移除箭头
}
var chartsOption = {
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false }
},
yAxis: [{
type: 'value',
name: '单位(m/s)',
position: 'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
nameTextStyle: { color: '#fff' },
axisLabel: {
show: true, // 显示刻度标签
textStyle: { color: '#fff' }
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
title: {
text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}
}, {
type: 'value',
name: '单位(m/s)',
nameTextStyle: { color: '#fff' },
position: 'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
},
axisLine: { // 轴线
show: true
},
axisTick: { show: true },
min: 0,
max: 100,
}],
grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [
{
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/sz/imghistory/feng', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.markLine.data = item.alarm
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
}
});
loading && loading.close();
this.isReady = true
},
}, },
}) })
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment