Skip to content

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

详情内页区分

parent b99aab8f
Hide 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 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<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 class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1"
......@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</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="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
......@@ -61,7 +58,7 @@
</div>
<div class="menuInfo">
<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}">
{{item.name}}
</li>
......@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh"
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>
......@@ -118,38 +130,192 @@
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
tableList: []
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
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: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).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
},
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>
......
public/datav/detail/dev-use.html
View file @ 56099822
......@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', {
params: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
type: '3' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).then(res => {
this.filePath = host + '/file' + res.data.body
......
public/datav/detail/dizhi-huanjing.html
View file @ 56099822
......@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', {
params: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
type: '4' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).then(res => {
this.filePath = host + '/file' + res.data.body
......
public/datav/detail/green-mine.html
View file @ 56099822
......@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', {
params: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
type: '5' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).then(res => {
this.filePath = host + '/file' + res.data.body
......
public/datav/detail/humidity-monitor.html
View file @ 56099822
......@@ -66,7 +66,7 @@
</div>
<div class="menuInfo">
<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}}
</li>
</ul>
......
public/datav/detail/people-location.html
View file @ 56099822
......@@ -63,7 +63,7 @@
</div>
<div class="menuInfo">
<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}}
</li>
</ul>
......
public/datav/detail/people-monitor.html
View file @ 56099822
......@@ -66,7 +66,7 @@
</div>
<div class="menuInfo">
<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}}
</li>
</ul>
......
public/datav/detail/resource-storage.html
View file @ 56099822
......@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', {
params: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
type: '2' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).then(res => {
this.filePath = host + '/file' + res.data.body
......
public/datav/detail/shape-monitor.html
View file @ 56099822
......@@ -62,7 +62,7 @@
</div>
<div class="menuInfo">
<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}">
{{item.name}}
</li>
......@@ -128,8 +128,8 @@
<!-- 井下24小时人数变化趋势 -->
<div class="wp100">
<div class="relative">
<el-date-picker style="width: 350px !important;" v-model="createTime" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
<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>
......
public/datav/detail/shui-monitor.html
View file @ 56099822
......@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', {
params: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
type: '6' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).then(res => {
this.filePath = host + '/file' + res.data.body
......
public/datav/detail/shuitu-monitor.html
View file @ 56099822
......@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<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 class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1"
......@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</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="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
......@@ -61,7 +58,7 @@
</div>
<div class="menuInfo">
<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}">
{{item.name}}
</li>
......@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh"
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>
......@@ -118,38 +130,192 @@
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
tableList: []
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
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: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).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
},
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>
......
public/datav/detail/shuizhi-monitor.html
View file @ 56099822
......@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<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 class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1"
......@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</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="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
......@@ -61,7 +58,7 @@
</div>
<div class="menuInfo">
<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}">
{{item.name}}
</li>
......@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh"
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>
......@@ -118,38 +130,192 @@
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
tableList: []
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
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: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).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
},
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>
......
public/datav/detail/temperature-monitor.html
View file @ 56099822
......@@ -61,7 +61,7 @@
</div>
<div class="menuInfo">
<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}}
</li>
</ul>
......
public/datav/detail/tu-monitor.html
View file @ 56099822
......@@ -142,7 +142,7 @@
Axiosx.get(host + '/api/kdFile/natural', {
params: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
type: '7' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).then(res => {
this.filePath = host + '/file' + res.data.body
......
public/datav/detail/turang-monitor.html
View file @ 56099822
......@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<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 class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1"
......@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</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="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
......@@ -61,7 +58,7 @@
</div>
<div class="menuInfo">
<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}">
{{item.name}}
</li>
......@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh"
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>
......@@ -118,38 +130,192 @@
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
tableList: []
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
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: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).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
},
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>
......
public/datav/detail/video-monitor.html
View file @ 56099822
......@@ -100,7 +100,7 @@
</div>
<div class="menuInfo">
<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}">
{{item.name}}
</li>
......
public/datav/detail/water-monitor.html
View file @ 56099822
......@@ -59,7 +59,7 @@
</div>
<div class="menuInfo">
<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}}
</li>
</ul>
......
public/datav/detail/wind-monitor.html
View file @ 56099822
......@@ -61,7 +61,7 @@
</div>
<div class="menuInfo">
<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}}
</li>
</ul>
......
public/datav/detail/yandao-monitor.html
View file @ 56099822
......@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<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 class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1"
......@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</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="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
......@@ -61,7 +58,7 @@
</div>
<div class="menuInfo">
<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}">
{{item.name}}
</li>
......@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh"
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>
......@@ -118,38 +130,192 @@
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
tableList: []
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
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: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).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
},
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>
......
public/datav/detail/zaosheng-monitor.html
View file @ 56099822
......@@ -26,9 +26,6 @@
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<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 class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1"
......@@ -49,7 +46,7 @@
<div class="f20 color-theme ml10">返回</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="background: linear-gradient(to bottom, rgba(13,27,48,.7), rgba(13,27,48,0));">
......@@ -61,7 +58,7 @@
</div>
<div class="menuInfo">
<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}">
{{item.name}}
</li>
......@@ -85,8 +82,23 @@
<div class="flex-1 ml15 flex-text flex-column ovh"
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>
......@@ -118,38 +130,192 @@
currentSensorId: '',
// 表格数据
tableList: [],
filePath: ''
tableList: []
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getImage();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
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: {
enterpriseId: this.selectedMine.id,
type: '1' // 1:矿山全景2:资源储量3:开发利用4:地质环境5:绿色矿山6:水监测 7:土监测
}
}).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
},
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>
......
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