Skip to content

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

大屏详情页，图表缩放功能处理

parent 6c9e4708
Show whitespace changes
Inline Side-by-side
Showing with 1107 additions and 217 deletions
public/datav/detail/humidity-monitor.html
View file @ 2d860405
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
yAxis: [{ yAxis: [{
type:'value', type:'value',
name: '单位(%RH)', name: '单位(%RH)',
position:'right', position:'left',
show: true, // 显示 Y 轴 show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
nameTextStyle: { color: '#fff' }, nameTextStyle: { color: '#fff' },
...@@ -266,49 +266,46 @@ ...@@ -266,49 +266,46 @@
show: true show: true
}, },
axisTick: { show: true }, axisTick: { show: true },
min: 0, // min: 0,
max: 100, // max: 100,
title: { title: {
text: 'Precipitation', // 这是你的 Y 轴标题 text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等 color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
} }
}, {
type:'value',
name: '单位(%RH)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
} }
}, // , {
axisLine: { // 轴线 // type:'value',
show: true // name: '单位(%RH)',
}, // nameTextStyle: { color: '#fff' },
axisTick: { show: true }, // position:'right',
min: 0, // show: true, // 显示 Y 轴
max: 100, // 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 }, grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: 'inside',
show: false, //orient: 'vertical',
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
}, },
{ {
type: "inside", //内置型数据区域缩放组件 start: 0,
moveOnMouseMove: true // 开启鼠标移动窗口平移 end: 100,
} show: false,
], }], // 区域缩放
series: [yAxisOption] series: [yAxisOption]
} }
var loading = this.$loading({ var loading = this.$loading({
...@@ -329,15 +326,15 @@ console.log('this.createTime', this.createTime.join(',')) ...@@ -329,15 +326,15 @@ console.log('this.createTime', this.createTime.join(','))
}).then(res => { }).then(res => {
const result = res.data.body; const result = res.data.body;
if (result) { if (result) {
const max = result.max // const max = result.max
const min = result.min // const min = result.min
if(max){ // if(max){
chartsOption.yAxis[0].max = max // chartsOption.yAxis[0].max = max
chartsOption.yAxis[0].min = min || 0 // chartsOption.yAxis[0].min = min || 0
chartsOption.yAxis[1].max = max // chartsOption.yAxis[1].max = max
chartsOption.yAxis[1].min = min || 0 // chartsOption.yAxis[1].min = min || 0
} // }
chartsOption.xAxis.data = result.xData.data chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => { chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption)); var tempObj = JSON.parse(JSON.stringify(yAxisOption));
...@@ -347,7 +344,7 @@ console.log('this.createTime', this.createTime.join(',')) ...@@ -347,7 +344,7 @@ console.log('this.createTime', this.createTime.join(','))
return tempObj return tempObj
}) })
console.log('chartsOption', chartsOption) // console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line")); var myChart = echarts.init(document.getElementById("line"));
......
public/datav/detail/shape-monitor copy.html 0 → 100644
View file @ 2d860405
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<title>露天矿山数据总览</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/index.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="../css/element-ui.css">
<!-- 引入样式文件 -->
<link rel="stylesheet" href="../css/vant@4.css" />
<!-- 引入大屏内页公共样式 -->
<link rel="stylesheet" href="./static/css/public-detail.css" />
<!-- 先引入 Vue -->
<script src="../js/vue.min.js"></script>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../js/vue@2.6.14"></script>
<script src="../js/vant.min.js"></script>
<style>
</style>
</head>
<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"
style="background-image: url('../static/title-bg-left.png');background-size: 100% 100%;height: 80px;">
</div>
<div class="flex-text"
style="background-image: url('../static/title-bg-center.png');background-size: 100% 100%;height: 80px;">
<div style="margin-top: -10px;">{{selectedMine.name || ''}}</div>
</div>
<div class="flex-1"
style="background-image: url('../static/title-bg-right.png');background-size: 100% 100%;height: 80px;">
</div>
</div>
</div>
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<div class="f20 color-theme ml10">返回</div>
</div>
<div class="flex-text ml10 mr10 mt15">
<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 class="mineInfo">
<p>矿山名称： {{selectedMine.name}}</p>
<p>矿山地址：{{selectedMine.address}}</p>
<p>联系人：{{selectedMine.liablePerson}}</p>
<p>联系方式：{{selectedMine.liablePersonPhone}}</p>
</div>
<div class="menuInfo">
<ul>
<li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)"
:class="{active: bigScreenDetailMenu===item.url}">
{{item.name}}
</li>
</ul>
</div>
</div>
<!-- 视频监控列表 -->
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<section>
<div class="header" @click="menuChange('showMenu4bianpo')">
<i class="el-icon-caret-bottom" v-show="showMenu4bianpo"></i>
<i class="el-icon-caret-right" v-show="!showMenu4bianpo"></i>
<span>边坡监测</span>
</div>
<div class="list-wrapper" v-show="showMenu4bianpo">
<div class="list-item" v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</span></div>
</div>
</section>
<section>
<div class="header" @click="menuChange('showMenu4weikuangku')">
<i class="el-icon-caret-bottom" v-show="showMenu4weikuangku"></i>
<i class="el-icon-caret-right" v-show="!showMenu4weikuangku"></i>
<span>尾矿库监测</span>
</div>
<div class="list-wrapper" v-show="showMenu4weikuangku">
<p class="ml40">暂无数据</p>
</div>
</section>
<section>
<div class="header" @click="menuChange('showMenu4chenjiang')">
<i class="el-icon-caret-bottom" v-show="showMenu4chenjiang"></i>
<i class="el-icon-caret-right" v-show="!showMenu4chenjiang"></i>
<span>沉降监测</span>
</div>
<div class="list-wrapper" v-show="showMenu4chenjiang">
<p class="ml40">暂无数据</p>
</div>
</section>
<section>
<div class="header" @click="menuChange('showMenu4diya')">
<i class="el-icon-caret-bottom" v-show="showMenu4diya"></i>
<i class="el-icon-caret-right" v-show="!showMenu4diya"></i>
<span>地压监测</span>
</div>
<div class="list-wrapper" v-show="showMenu4diya">
<p class="ml40">暂无数据</p>
</div>
</section>
</div>
</div>
<div class="flex-1 ml15 flex-text flex-column ovh"
style="height: calc(100vh - 110px); justify-content: space-between">
<!-- 视频监控 -->
<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" id="line" style="width: 100%;height:400px;"></div>
</div>
<!-- video end -->
</div>
<div class="flex-text wp100">
<!-- 视频ai报警 列表 -->
<div class="flex-1 ml15 ovh tableList">
<div class="h44 f18 flex-text"
style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
<div class="text-center" style="width: 20%;">监测时间</div>
<div class="text-center" style="width: 20%;">X位移</div>
<div class="text-center" style="width: 20%;">Y位移</div>
<div class="text-center" style="width: 20%;">Z位移</div>
<div class="text-center" style="width: 20%;">总变化量</div>
</div>
<div class="" style="height: 300px;overflow-y: scroll;">
<div class="h44 color-theme flex-text f17 ovh bg-list-item"
:class="'bg-list-' + (index % 2)" :style="{ marginTop: index == 0 ? '' : '2px' }"
v-for="(item,index) in tableList" :key="index">
<div class="text-center" style="width: 20%;">{{ item.time }}</div>
<div class="text-center" style="width: 20%;">{{ item.dispx }}</div>
<div class="text-center" style="width: 20%;">{{ item.dispy }}</div>
<div class="text-center" style="width: 20%;">{{ item.disph }}</div>
<div class="text-center" style="width: 20%;">{{ item.value }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 引入echarts -->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 -->
<script src="../js/element-ui.js"></script>
<!-- axios -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<script src="../js/js.cookie.js"></script>
<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>
<script>
var map; // 地图
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
showMenu4weikuangku: true,
showMenu4chenjiang: true,
showMenu4diya: true,
// 菜单折叠显隐 - 结束
// 表格数据
tableList: []
}
},
mounted() {
// this.getCharts();
// this.getChartsData()
this.getSensorList(() => {
});
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
this.getTableList()
}
},
methods: {
changeSensor(item) {
console.log('changeSensor ________________ ', item);
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/data/mp/sensorList', {
params: {
enterpriseId: this.selectedMine.id,
}
}).then(res => {
this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
console.log('sdfsdf', res)
// fn && fn()
});
this.isReady = true
},
getTableList() {
// 视频列表
Axiosx.get(host + '/data/mp/historyInside', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
menuChange(type) {
['showMenu4bianpo', 'showMenu4weikuangku', 'showMenu4chenjiang', 'showMenu4diya'].forEach((item) => {
if (item === type) {
this[type] = !this[type]
} else {
this[item] = false
}
})
},
getChartsData() {
console.log('getChartsData ________________ ', 1111111111);
const yAxisOption = {
name: "人数",
type: "line",
smooth: true,
data: [],
itemStyle: {
color: '#6dd1b9'
},
emphasis: {
focus: 'series'
},
label: {
show: true,
position: 'top'
},
markLine: {
//silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
},
symbol: 'none' // 移除箭头
}
}
var chartsOption = {
dataZoom: [
{
type: 'inside',
//orient: 'vertical',
},
{
start: 0,
end: 100,
}], // 区域缩放
// toolbox: {
// feature: {
// dataZoom: {
// // yAxisIndex: 'none'
// },
// restore: {}
// }
// },
legend: {
textStyle: {
color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
type: 'category',
data: [],
show: true, // 显示 X 轴
axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: true },
},
yAxis: [{
type:'value',
name: '单位(mm)',
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,
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'right',
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: 60, bottom: 25 },
/* dataZoom: [
{
// moveOnMouseMove: false, // 开启鼠标移动窗口平移
// type: 'inside', // 内置型数据区域缩放组件
// orient: 'vertical',
type: "slider",
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
//type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: false, // 开启鼠标移动窗口平移
type: 'inside', // 内置型数据区域缩放组件
orient: 'vertical',
}
],*/
series: [yAxisOption, yAxisOption]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 视频列表
Axiosx.get(host + '/data/mp/imghistory', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
// const max = result.max
// const min = result.min
// if(max){
// chartsOption.yAxis[0].max = max
// chartsOption.yAxis[0].min = min || -5
// chartsOption.yAxis[1].max = max
// chartsOption.yAxis[1].min = min || -5
// }
chartsOption.xAxis.data = result.xData.data
var colors = ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9'];
var marklineColors = ['red','orange', 'yellow', 'blue'];
chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
tempObj.itemStyle.color = colors[index];
tempObj.markLine.data = item.alarm.map((item1, index1)=>{
item1.lineStyle = {
color: marklineColors[index1]
}
return item1
})
delete tempObj['markLine']
return tempObj
})
console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line"));
myChart.setOption(chartsOption)
// this.legendChange(myChart, (res)=>{
// this.getTableList(res)
// })
}
});
loading && loading.close();
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/shape-monitor.html
View file @ 2d860405
...@@ -267,29 +267,16 @@ ...@@ -267,29 +267,16 @@
}, },
getChartsData() { getChartsData() {
// console.log('getChartsData ________________ ', 1111111111);
console.log('getChartsData ________________ ', 1111111111);
const yAxisOption = { const yAxisOption = {
name: "人数", name: "人数",
type: "line", type: "line",
smooth: true,
data: [], data: [],
itemStyle: { itemStyle: {
color: '#6dd1b9' color: '#6dd1b9'
}, },
emphasis: {
focus: 'series'
},
label: {
show: true,
position: 'top'
},
markLine: { markLine: {
//silent: true,
data: [ data: [
{ name: '最高值', yAxis: 400 }, { name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 } { name: '最低值', yAxis: -50 }
...@@ -301,8 +288,8 @@ ...@@ -301,8 +288,8 @@
symbol: 'none' // 移除箭头 symbol: 'none' // 移除箭头
} }
} }
var chartsOption = { var chartsOption = {
legend: { legend: {
textStyle: { textStyle: {
color: '#fff', // 设置字体颜色 color: '#fff', // 设置字体颜色
...@@ -340,45 +327,42 @@ ...@@ -340,45 +327,42 @@
show: true show: true
}, },
axisTick: { show: true }, axisTick: { show: true },
min: 0, // min: 0,
max: 100, // max: 100,
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
}, },
axisLine: { // 轴线 // {
show: true // type:'value',
}, // name: '单位(mm)',
axisTick: { show: true }, // nameTextStyle: { color: '#fff' },
min: 0, // position:'right',
max: 100, // show: true, // 显示 Y 轴
}], // splitLine: { show: false },
grid: { right: 45, top: 40, left: 40, bottom: 25 }, // axisLabel: {
// show: true, // 显示刻度标签
// textStyle: {
// color: '#fff'
// }
// },
// axisLine: { // 轴线
// show: true
// },
// axisTick: { show: true },
// // min: 0,
// // max: 100,
// }
],
grid: { right: 45, top: 40, left: 60, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: 'inside',
show: false, //orient: 'vertical',
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
}, },
{ {
type: "inside", //内置型数据区域缩放组件 start: 0,
moveOnMouseMove: true // 开启鼠标移动窗口平移 end: 100,
} show: false,
], }], // 区域缩放
series: [yAxisOption] series: [yAxisOption]
} }
var loading = this.$loading({ var loading = this.$loading({
...@@ -398,15 +382,15 @@ ...@@ -398,15 +382,15 @@
}).then(res => { }).then(res => {
const result = res.data.body; const result = res.data.body;
if (result) { if (result) {
const max = result.max // const max = result.max
const min = result.min // const min = result.min
if(max){ // if(max){
chartsOption.yAxis[0].max = max // chartsOption.yAxis[0].max = max
chartsOption.yAxis[0].min = min || -5 // chartsOption.yAxis[0].min = min || -5
chartsOption.yAxis[1].max = max // chartsOption.yAxis[1].max = max
chartsOption.yAxis[1].min = min || -5 // chartsOption.yAxis[1].min = min || -5
} // }
chartsOption.xAxis.data = result.xData.data chartsOption.xAxis.data = result.xData.data
var colors = ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9']; var colors = ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9'];
...@@ -429,7 +413,7 @@ ...@@ -429,7 +413,7 @@
return tempObj return tempObj
}) })
console.log('chartsOption', chartsOption) // console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line")); var myChart = echarts.init(document.getElementById("line"));
......
public/datav/detail/static/js/public-detail.js
View file @ 2d860405
...@@ -55,8 +55,10 @@ var gemhoUtil = { ...@@ -55,8 +55,10 @@ var gemhoUtil = {
const today = new Date(); const today = new Date();
// 获取前七天的日期 // 获取前七天的日期
const sevenDaysAgo = new Date(); const sevenDaysAgo = new Date()
sevenDaysAgo.setDate(today.getDate()); // const sevenDaysAgo = new Date('2019-12-17')// new Date('2019-01-01');
sevenDaysAgo.setDate(sevenDaysAgo.getDate());
// 格式化日期为 YYYY-MM-DD HH:mm:ss // 格式化日期为 YYYY-MM-DD HH:mm:ss
const formatDate = (date) => { const formatDate = (date) => {
...@@ -129,6 +131,28 @@ var gemhoUtil = { ...@@ -129,6 +131,28 @@ var gemhoUtil = {
// window.open(item.url) // window.open(item.url)
location.href = item.url location.href = item.url
}, },
// legendChange(chartEle, fn){
// // 添加图例点击事件监听
// chartEle.on('legendselectchanged', (params) => {
// // this.getTableList(JSON.stringify(params.selected))
// fn && fn(JSON.stringify(params.selected))
// // alert('ssss')
// // console.log('被点击的图例:', params.name);
// console.log('图例的选择状态:', params.selected); // {实时雨量: true, 累计雨量: false}
// const max = Math.floor(Math.random() * 90)
// const min = -Math.floor(Math.random() * 70)
// console.log(max, '->', min)
// chartEle.setOption({
// yAxis: {
// max,
// min
// }
// });
// });
// // this.getTableList(JSON.stringify(params.selected))
// }
} }
} }
} }
......
public/datav/detail/temperature-monitor.html
View file @ 2d860405
...@@ -251,28 +251,30 @@ ...@@ -251,28 +251,30 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: [{ yAxis: [
type:'value', // {
name: '单位(mm)', // type:'value',
position:'right', // name: '单位(mm)',
show: true, // 显示 Y 轴 // position:'right',
splitLine: { show: false }, // show: true, // 显示 Y 轴
nameTextStyle: { color: '#fff' }, // splitLine: { show: false },
axisLabel: { // nameTextStyle: { color: '#fff' },
show: true, // 显示刻度标签 // axisLabel: {
textStyle: { color: '#fff' } // show: true, // 显示刻度标签
}, // textStyle: { color: '#fff' }
axisLine: { // 轴线 // },
show: true // axisLine: { // 轴线
}, // show: true
axisTick: { show: true }, // },
// min: -20, // axisTick: { show: true },
max: 50, // // min: -20,
title: { // max: 50,
text: 'Precipitation', // 这是你的 Y 轴标题 // title: {
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等 // text: 'Precipitation', // 这是你的 Y 轴标题
} // color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}, { // }
// },
{
type:'value', type:'value',
name: '单位(mm)', name: '单位(mm)',
nameTextStyle: { color: '#fff' }, nameTextStyle: { color: '#fff' },
...@@ -291,24 +293,18 @@ ...@@ -291,24 +293,18 @@
}, },
axisTick: { show: true }, axisTick: { show: true },
// min: -20, // min: -20,
max: 50, // max: 50,
}], }],
grid: { right: 45, top: 10, left: 40, bottom: 25 }, grid: { right: 45, top: 10, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [{
{ type: 'inside',
type: "slider", //orient: 'vertical',
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
}, },
{ {
type: "inside", //内置型数据区域缩放组件 start: 0,
moveOnMouseMove: true // 开启鼠标移动窗口平移 end: 100,
} show: false,
], }], // 区域缩放
series: [yAxisOption] series: [yAxisOption]
} }
var loading = this.$loading({ var loading = this.$loading({
...@@ -330,14 +326,14 @@ ...@@ -330,14 +326,14 @@
const result = res.data.body; const result = res.data.body;
if (result) { if (result) {
const max = result.max // 必返 // const max = result.max // 必返
const min = result.min // 必返 // const min = result.min // 必返
if(max){ // if(max){
chartsOption.yAxis[0].max = max // chartsOption.yAxis[0].max = max
chartsOption.yAxis[0].min = min || -5 // chartsOption.yAxis[0].min = min || -5
chartsOption.yAxis[1].max = max // chartsOption.yAxis[1].max = max
chartsOption.yAxis[1].min = min || -5 // chartsOption.yAxis[1].min = min || -5
} // }
chartsOption.xAxis.data = result.xData.data chartsOption.xAxis.data = result.xData.data
...@@ -357,7 +353,7 @@ ...@@ -357,7 +353,7 @@
return tempObj return tempObj
}) })
console.log('chartsOption', chartsOption) // console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line")); var myChart = echarts.init(document.getElementById("line"));
......
public/datav/detail/water-monitor copy.html 0 → 100644
View file @ 2d860405
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<title>露天矿山数据总览</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/index.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="../css/element-ui.css">
<!-- 引入样式文件 -->
<link rel="stylesheet" href="../css/vant@4.css" />
<!-- 引入大屏内页公共样式 -->
<link rel="stylesheet" href="./static/css/public-detail.css" />
<!-- 先引入 Vue -->
<script src="../js/vue.min.js"></script>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../js/vue@2.6.14"></script>
<script src="../js/vant.min.js"></script>
<style>
</style>
</head>
<body style="background-image: url('../static/bg-img.png');background-size: 100% 100%;">
<div id="app">
<div style="height: 80px;">
<div class="flex-text color-theme f30 wp100 relative maxIndex fixed" style="height: 80px;">
<div class="flex-1"
style="background-image: url('../static/title-bg-left.png');background-size: 100% 100%;height: 80px;">
</div>
<div class="flex-text"
style="background-image: url('../static/title-bg-center.png');background-size: 100% 100%;height: 80px;">
<div style="margin-top: -10px;">{{selectedMine.name || ''}}</div>
</div>
<div class="flex-1"
style="background-image: url('../static/title-bg-right.png');background-size: 100% 100%;height: 80px;">
</div>
</div>
</div>
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;" @click="goPrePage('emergency')">
<img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<div class="f20 color-theme ml10">返回</div>
</div>
<div class="flex-text ml10 mr10 mt15">
<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 class="mineInfo">
<p>矿山名称： {{selectedMine.name}}</p>
<p>矿山地址：{{selectedMine.address}}</p>
<p>联系人：{{selectedMine.liablePerson}}</p>
<p>联系方式：{{selectedMine.liablePersonPhone}}</p>
</div>
<div class="menuInfo">
<ul>
<li v-for="(item, index) in menuObj[bigScreenDetailMenuModel].menuList" @click="changeMenu(item)" :class="{active: bigScreenDetailMenu===item.url}">
{{item.name}}
</li>
</ul>
</div>
</div>
<!-- 视频监控列表 -->
<div class="relative mt20" style="width: 490px;height: calc(100vh - 170px);">
<section>
<div class="list-wrapper" v-show="showMenu4bianpo">
<div class="list-item" :class="{active: item.equipNo===currentSensorId}" v-for="(item, index) in sensorLIst" @click="changeSensor(item)"><i
class="el-icon-caret-right"></i><span>{{item.equipName}}</span></div>
</div>
</section>
</div>
</div>
<div class="flex-1 ml15 flex-text flex-column ovh" style="height: calc(100vh - 110px);">
<!-- 视频监控 -->
<div class="wp100 relative" style="margin-bottom: 25px;">
<!-- 井下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="flex-text" style="height: 0px;">
<div class="flex-text">
<div class="round" style="width: 10px;height: 10px;background-color: #6dd1b9;"></div>
<div class="color-theme ml10 f14">井下人数</div>
</div>
<div class="flex-text ml20">
<div class="round" style="width: 10px;height: 10px;background-color: #fca83b;"></div>
<div class="color-theme ml10 f14">入井</div>
</div>
<div class="flex-text ml20 mr15">
<div class="round" style="width: 10px;height: 10px;background-color: #0a9fca;"></div>
<div class="color-theme ml10 f14">出井</div>
</div>
</div> -->
<div class="mt5" id="line" style="width: 100%;height:380px;"></div>
</div>
<!-- video end -->
</div>
<div class="flex-text wp100">
<div class="flex-1 ml15 ovh tableList">
<div class="h44 f18 flex-text"
style="background: linear-gradient(to bottom, rgba(171,238,255,.15), rgba(171,238,255,.3));border-bottom: 1px solid #abeeff;">
<div class="text-center" style="width: 33%;">监测时间</div>
<div class="text-center" style="width: 33%;">实时雨量(mm)</div>
<div class="text-center" style="width: 33%;">累计雨量(mm)</div>
</div>
<div class="" style="height: 300px;overflow-y: scroll;">
<div class="h44 color-theme flex-text f17 ovh bg-list-item"
:class="'bg-list-' + (index % 2)" :style="{ marginTop: index == 0 ? '' : '2px' }"
v-for="(item,index) in tableList" :key="index">
<div class="text-center" style="width: 33%;">{{ item.time }}</div>
<div class="text-center" style="width: 33%;">{{ item.rainfall }}</div>
<div class="text-center" style="width: 33%;">{{ item.zongliang }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 引入echarts -->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-gl.js"></script>
<!-- 引入组件库 -->
<script src="../js/element-ui.js"></script>
<!-- axios -->
<script src="../js/axios.min.js"></script>
<!-- cookie -->
<script src="../js/js.cookie.js"></script>
<!-- 详情内页公用js -->
<script src="./static/js/public-detail.js"></script>
<script>
var map; // 地图
new Vue({
el: '#app',
mixins: [gemhoUtil.detailPageMixin],
data() {
return {
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
// 表格数据
tableList: []
}
},
watch: {
createTime() {
this.getChartsData()
this.getTableList()
}
},
mounted() {
this.getSensorList(() => {});
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo || 'test'
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/data/rg/sensorList', {
params: {
enterpriseId: this.selectedMine.id,
}
}).then(res => {
this.sensorLIst = res.data.body || [];
this.changeSensor({
equipNo: this.sensorLIst.length ? this.sensorLIst[0].equipNo : ''
})
// fn && fn()
});
this.isReady = true
},
getTableList(legendType) {
// 视频列表
Axiosx.get(host + '/data/rg/historyInside', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : '',
legendType: legendType ? legendType : null
}
}).then(res => {
this.tableList = res.data.body || [];
console.log('sdfsdf', res)
});
},
getChartsData() {
const yAxisOption = {
name: 'Temperature',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
itemStyle: {
color: '#6dc8e1' // 柱状图颜色
},
data: []
}
const yAxisOption1 = {
name: "累计雨量",
type: 'bar',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
itemStyle: {
color: '#3f95c2' // 柱状图颜色
},
data: []
}
var chartsOption = {
dataZoom: [
{
type: 'inside',
//orient: 'vertical',
},
{
start: 0,
end: 100,
}], // 区域缩放
// toolbox: {
// feature: {
// dataZoom: {
// // yAxisIndex: 'none'
// },
// restore: {}
// }
// },
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: '单位(mm)',
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: '单位(mm)',
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, yAxisOption1]
}
var loading = this.$loading({
lock: true,
text: '加载中',
// spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
Axiosx.get(host + '/data/rg/imghistory', {
params: {
code: this.currentSensorId,
daterange: this.createTime ? this.createTime.join(',') : ''
}
}).then(res => {
const result = res.data.body;
if (result) {
// const max = result.max // 必返
// const min = result.min // 必返
// if(max){
// chartsOption.yAxis[0].max = max
// chartsOption.yAxis[1].max = max
// }
chartsOption.xAxis.data = result.xData.data
// result.yData[1].data = []
chartsOption.series = result.yData.map((item, index) => {
if(index===0){
var tempObj = JSON.parse(JSON.stringify(yAxisOption));
tempObj.data = item.data
tempObj.name = item.name
// tempObj.markLine.data = item.alarm
return tempObj
}else{
var tempObj = JSON.parse(JSON.stringify(yAxisOption1));
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)
// // 添加图例点击事件监听
// myChart.on('legendselectchanged', (params) => {
// this.getTableList(JSON.stringify(params.selected))
// });
}
});
loading && loading.close();
this.isReady = true
},
},
})
</script>
</html>
\ No newline at end of file
public/datav/detail/water-monitor.html
View file @ 2d860405
...@@ -238,6 +238,24 @@ ...@@ -238,6 +238,24 @@
data: [] data: []
} }
var chartsOption = { var chartsOption = {
dataZoom: [
{
type: 'inside',
//orient: 'vertical',
},
{
start: 0,
end: 100,
show: false,
}], // 区域缩放
// toolbox: {
// feature: {
// dataZoom: {
// // yAxisIndex: 'none'
// },
// restore: {}
// }
// },
legend: { legend: {
textStyle: { textStyle: {
color: '#fff', // 设置字体颜色 color: '#fff', // 设置字体颜色
...@@ -273,8 +291,8 @@ ...@@ -273,8 +291,8 @@
show: true show: true
}, },
axisTick: { show: true }, axisTick: { show: true },
min: 0, // min: 0,
max: 100, // max: 100,
title: { title: {
text: 'Precipitation', // 这是你的 Y 轴标题 text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等 color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
...@@ -297,25 +315,25 @@ ...@@ -297,25 +315,25 @@
show: true show: true
}, },
axisTick: { show: true }, axisTick: { show: true },
min: 0, // min: 0,
max: 100, // max: 100,
}], }],
grid: { right: 45, top: 40, left: 40, bottom: 25 }, grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ // dataZoom: [
{ // {
type: "slider", // type: "slider",
show: false, // show: false,
startValue: 14, // startValue: 14,
endValue: 23, // 一次性展示9个 // endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" }, // textStyle: { color: "#ffffff" },
height: 0, // height: 0,
zoomLock: true, // 是否只平移不缩放 // zoomLock: true, // 是否只平移不缩放
}, // },
{ // {
type: "inside", //内置型数据区域缩放组件 // type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移 // moveOnMouseMove: true // 开启鼠标移动窗口平移
} // }
], // ],
series: [yAxisOption, yAxisOption1] series: [yAxisOption, yAxisOption1]
} }
var loading = this.$loading({ var loading = this.$loading({
...@@ -334,12 +352,12 @@ ...@@ -334,12 +352,12 @@
const result = res.data.body; const result = res.data.body;
if (result) { if (result) {
const max = result.max // 必返 // const max = result.max // 必返
const min = result.min // 必返 // const min = result.min // 必返
if(max){ // if(max){
chartsOption.yAxis[0].max = max // chartsOption.yAxis[0].max = max
chartsOption.yAxis[1].max = max // chartsOption.yAxis[1].max = max
} // }
chartsOption.xAxis.data = result.xData.data chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => { chartsOption.series = result.yData.map((item, index) => {
......
public/datav/detail/wind-monitor.html
View file @ 2d860405
...@@ -245,26 +245,28 @@ ...@@ -245,26 +245,28 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: [{ yAxis: [
type:'value', // {
name: '单位(m/s)', // type:'value',
position:'right', // name: '单位(m/s)',
show: true, // 显示 Y 轴 // position:'right',
splitLine: { show: false }, // show: true, // 显示 Y 轴
nameTextStyle: { color: '#fff' }, // splitLine: { show: false },
axisLabel: { // nameTextStyle: { color: '#fff' },
show: true, // 显示刻度标签 // axisLabel: {
textStyle: { color: '#fff' } // show: true, // 显示刻度标签
}, // textStyle: { color: '#fff' }
axisLine: { // 轴线 // },
show: true // axisLine: { // 轴线
}, // show: true
axisTick: { show: true }, // },
title: { // axisTick: { show: true },
text: 'Precipitation', // 这是你的 Y 轴标题 // title: {
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等 // text: 'Precipitation', // 这是你的 Y 轴标题
} // color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}, { // }
// },
{
type:'value', type:'value',
name: '单位(m/s)', name: '单位(m/s)',
nameTextStyle: { color: '#fff' }, nameTextStyle: { color: '#fff' },
...@@ -286,19 +288,14 @@ ...@@ -286,19 +288,14 @@
grid: { right: 45, top: 40, left: 40, bottom: 25 }, grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: 'inside',
show: false, //orient: 'vertical',
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
}, },
{ {
type: "inside", //内置型数据区域缩放组件 start: 0,
moveOnMouseMove: true // 开启鼠标移动窗口平移 end: 100,
} show: false,
], }], // 区域缩放
series: [yAxisOption] series: [yAxisOption]
} }
var loading = this.$loading({ var loading = this.$loading({
...@@ -320,13 +317,13 @@ ...@@ -320,13 +317,13 @@
const result = res.data.body; const result = res.data.body;
if (result) { if (result) {
const max = result.max // const max = result.max
if(max){ // if(max){
chartsOption.yAxis[0].max = max // chartsOption.yAxis[0].max = max
chartsOption.yAxis[0].min = 0 // chartsOption.yAxis[0].min = 0
chartsOption.yAxis[1].max = max // chartsOption.yAxis[1].max = max
chartsOption.yAxis[1].min = 0 // chartsOption.yAxis[1].min = 0
} // }
chartsOption.xAxis.data = result.xData.data chartsOption.xAxis.data = result.xData.data
...@@ -348,7 +345,7 @@ ...@@ -348,7 +345,7 @@
return tempObj return tempObj
}) })
console.log('chartsOption', chartsOption) // console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line")); var myChart = echarts.init(document.getElementById("line"));
......
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