Skip to content

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

变形监测

parent 7433f5c6
Hide whitespace changes
Inline Side-by-side
Showing with 643 additions and 178 deletions
public/datav/detail/shape-monitor.html
View file @ da4dd73f
...@@ -66,10 +66,10 @@ ...@@ -66,10 +66,10 @@
</div> </div>
</div> --> </div> -->
<div class="mineInfo"> <div class="mineInfo">
<p>矿山名称： 淄博红圈石料厂</p> <p>矿山名称： {{selectedMine.name}}</p>
<p>矿山地质：谁看得见风离开世界的副卡时刻记得发</p> <p>矿山地址：{{selectedMine.address}}</p>
<p>联系人：开始对</p> <p>联系人：{{selectedMine.liablePerson}}</p>
<p>联系方式：xxx</p> <p>联系方式：{{selectedMine.liablePersonPhone}}</p>
</div> </div>
<div class="menuInfo"> <div class="menuInfo">
<ul> <ul>
...@@ -95,7 +95,8 @@ ...@@ -95,7 +95,8 @@
<span>边坡监测</span> <span>边坡监测</span>
</div> </div>
<div class="list-wrapper" v-show="showMenu4bianpo"> <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 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> </div>
</section> </section>
<section> <section>
...@@ -135,7 +136,8 @@ ...@@ -135,7 +136,8 @@
</div> </div>
<div class="flex-1 ml15 flex-text flex-column ovh" style="height: calc(100vh - 110px); justify-content: space-between"> <div class="flex-1 ml15 flex-text flex-column ovh"
style="height: calc(100vh - 110px); justify-content: space-between">
<!-- 视频监控 --> <!-- 视频监控 -->
<div class="wp100 relative"> <div class="wp100 relative">
<!-- 井下24小时人数变化趋势 --> <!-- 井下24小时人数变化趋势 -->
...@@ -145,20 +147,6 @@ ...@@ -145,20 +147,6 @@
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker> </el-date-picker>
</div> </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:400px;"></div> <div class="mt5" id="line" style="width: 100%;height:400px;"></div>
</div> </div>
<!-- video end --> <!-- video end -->
...@@ -176,9 +164,9 @@ ...@@ -176,9 +164,9 @@
<div class="text-center" style="width: 20%;">总变化量</div> <div class="text-center" style="width: 20%;">总变化量</div>
</div> </div>
<div class="" style="height: 300px;overflow-y: scroll;"> <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)" <div class="h44 color-theme flex-text f17 ovh bg-list-item"
:style="{ marginTop: index == 0 ? '' : '2px' }" v-for="(item,index) in tableList" :class="'bg-list-' + (index % 2)" :style="{ marginTop: index == 0 ? '' : '2px' }"
:key="index"> 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.time }}</div>
<div class="text-center" style="width: 20%;">{{ item.dispx }}</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.dispy }}</div>
...@@ -236,7 +224,7 @@ ...@@ -236,7 +224,7 @@
window.open(host + '/#/login', '_self') window.open(host + '/#/login', '_self')
return return
} }
if (code === 400 && message === '不允许访问') { if (code === 400) {
alert('您没有权限使用此功能，请联系管理员开通') alert('您没有权限使用此功能，请联系管理员开通')
return return
} }
...@@ -256,15 +244,18 @@ ...@@ -256,15 +244,18 @@
el: '#app', el: '#app',
data() { data() {
return { return {
// 公共信息
selectedMine: {},
// 菜单折叠显隐 // 菜单折叠显隐
showMenu4bianpo: true, showMenu4bianpo: true,
sensorLIst:[], sensorLIst: [],
currentSensorId:'', currentSensorId: '',
showMenu4weikuangku: true, showMenu4weikuangku: true,
showMenu4chenjiang: true, showMenu4chenjiang: true,
showMenu4diya: true, showMenu4diya: true,
// 菜单折叠显隐 - 结束 // 菜单折叠显隐 - 结束
createTime: '', createTime: ['2024-01-01', '2024-09-30'],
bigScreenDetailMenu: '', bigScreenDetailMenu: '',
selectedMine: {}, selectedMine: {},
isReady: false, // 页面是否准备好 请求完接口变为true isReady: false, // 页面是否准备好 请求完接口变为true
...@@ -275,9 +266,9 @@ ...@@ -275,9 +266,9 @@
} }
}, },
mounted() { mounted() {
for(var i=0; i<10; i++){ for (var i = 0; i < 10; i++) {
this.tableList.push({ this.tableList.push({
videoName:'sdfksdfxxxxx', videoName: 'sdfksdfxxxxx',
warnTypeName: '扣税的交流方', warnTypeName: '扣税的交流方',
warnDatetime: 'ksdlfsdf' warnDatetime: 'ksdlfsdf'
}) })
...@@ -310,22 +301,29 @@ ...@@ -310,22 +301,29 @@
window.history.go(-1) window.history.go(-1)
return return
} }
this.getCharts(); // this.getCharts();
// this.getChartsData()
this.getSensorList(()=>{ this.getSensorList(() => {
});
this.getTableList();
this.getChartsData(); });
this.getTableList();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
}, },
methods: { methods: {
changeSensor(item){ changeSensor(item) {
this.currentSensorId = item.equipNo this.currentSensorId = item.equipNo
this.getTableList() this.getTableList()
this.getChartsData();
}, },
getSensorList(fn){ getSensorList(fn) {
// 视频列表 // 视频列表
Axiosx.get(host + '/data/mp/sensorList', { Axiosx.get(host + '/data/mp/sensorList', {
params: { params: {
...@@ -333,15 +331,16 @@ ...@@ -333,15 +331,16 @@
} }
}).then(res => { }).then(res => {
this.sensorLIst = res.data.body || []; this.sensorLIst = res.data.body || [];
if(this.sensorLIst.length){ if (this.sensorLIst.length) {
this.currentSensorId = this.tableList[0].equipNo this.currentSensorId = this.sensorLIst[0].equipNo
} }
console.log('sdfsdf', res) console.log('sdfsdf', res)
// fn && fn() // fn && fn()
}); });
this.isReady = true
}, },
getTableList(){ getTableList() {
// 视频列表 // 视频列表
Axiosx.get(host + '/data/mp/historyInside', { Axiosx.get(host + '/data/mp/historyInside', {
params: { params: {
...@@ -363,153 +362,128 @@ ...@@ -363,153 +362,128 @@
}) })
}, },
getChartsData(){ getChartsData() {
const yAxisOption = {
}, name: "人数",
async getCharts(e) { type: "line",
var loading smooth: true,
if (!e) { data: [],
loading = this.$loading({ itemStyle: {
lock: true, color: '#6dd1b9'
text: '加载中', },
// spinner: 'el-icon-loading', markLine: {
background: 'rgba(0, 0, 0, 0.7)' silent: true,
}); data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'solid' // 警戒线样式
}
}
} }
var chartsOption = {
// 模拟请求 legend: {
setTimeout(() => { textStyle: {
setTimeout(() => this.getCharts('refesh'), 5000); color: '#fff', // 设置字体颜色
fontSize: 14 // 设置字体大小
// 曲线图 }
// 基于准备好的dom，初始化echarts实例 },
var myChart = echarts.init(document.getElementById("line")); tooltip: {
myChart.clear() // 定时刷新 实际不刷新 演示用 trigger: 'axis',
// 绘制图表 axisPointer: {
myChart.setOption({ type: 'cross',
tooltip: { crossStyle: {
trigger: 'axis', color: '#999'
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
} }
}, }
xAxis: { },
data: ["01时", "02时", "03时", "04时", "05时", "06时", "07时", "08时", "09时", "10时", xAxis: {
"11时", "12时", "13时", "14时", "15时", "16时", "17时", "18时", "19时", "20时", "21时", "22时", "23时", "24时"], data: [],
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: { yAxis: {
name: 'Precipitation', name: 'Precipitation',
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } } axisLabel: { textStyle: { color: '#a3e4f5' } }
}, },
yAxis22: [ grid: { right: 45, top: 10, left: 40, bottom: 25 },
dataZoom: [
{ {
type: 'value', type: "slider",
name: 'Precipitation', show: false,
interval: 40, startValue: 14,
splitLine: { show: false }, endValue: 23, // 一次性展示9个
axisLabel: { textStyle: { color: "#ffffff" },
textStyle: { color: '#a3e4f5' } height: 0,
}, zoomLock: true, // 是否只平移不缩放
nameTextStyle: {
color: '#a3e4f5', // 设置 Y 轴标题颜色为红色
fontSize: 16
},
}, },
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
], ],
grid: { right: 45, top: 10, left: 40, bottom: 25 }, series: [yAxisOption]
dataZoom: [ }
{ var loading = this.$loading({
type: "slider", lock: true,
show: false, text: '加载中',
startValue: 14, // spinner: 'el-icon-loading',
endValue: 23, // 一次性展示9个 background: 'rgba(0, 0, 0, 0.7)'
textStyle: { color: "#ffffff" }, });
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [
{
name: "人数",
type: "line",
smooth: true,
data: [180, 210, 150, 280, 235, 500, 390, 410, 150, 180, 210, 150, 280, 235, 500, 390, 410, 150, 180, 210, 150, 280, 235, 500],
itemStyle: {
color: '#6dd1b9'
},
markLine: {
silent: true,
data: [
{ name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 }
],
lineStyle: {
color: 'red', // 警戒线颜色
type: 'dashed' // 警戒线样式
}
}
},
{
name: "人数",
type: "line",
smooth: true,
data: [60, 90, 80, -100, 60, 65, 45, -50, 48, 60, 90, 80, -100, 60, 65, 45, 50, -48, 60, 90, -80, 100, 60, 65],
itemStyle: {
color: '#0a9fca'
}
},
{
name: "人数",
type: "line",
smooth: true,
data: [55, 48, 40, 60, 50, 55, 58, 63, 50, 55, 48, 40, 60, 50, 55, 58, 63, 50, 55, 48, 40, 60, 50, 55],
itemStyle: {
color: '#fca83b'
}
}
]
});
loading && loading.close();
this.isReady = true
}, 800);
}
},
changeMenu(menuName) {
localStorage.setItem('bigScreenDetailMenu', menuName)
this.bigScreenDetailMenu = menuName
},
getAccessToken(appKey, appSecret) {
var dataJson = 'appKey=' + appKey + '&appSecret=' + appSecret;
return request.post("/ys7com", dataJson).then(res => {
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
} else {
return null
}
}).catch(err => {
console.log(err);
return err
})
},
// 视频列表
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) {
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
},
changeMenu(menuName) {
create() { localStorage.setItem('bigScreenDetailMenu', menuName)
let options = {}; this.bigScreenDetailMenu = menuName
console.log("hasAudio " + this.hasAudio) },
getAccessToken(appKey, appSecret) {
var dataJson = 'appKey=' + appKey + '&appSecret=' + appSecret;
return request.post("/ys7com", dataJson).then(res => {
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
} else {
return null
}
}).catch(err => {
console.log(err);
return err
})
},
}, },
}) })
</script> </script>
......
public/datav/detail/temperature-monitor.html 0 → 100644
View file @ da4dd73f
<!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="history.back()">
<img style="width: 24px;height: 24px;" src="../static/backPage.png" alt="">
<div class="f20 color-theme ml10">返回</div>
</div>
<div class="fixed flex-text maxIndex pointer" style="right: 30px;top: 45px;" @click="gotoManagement()">
<img style="width: 24px;height: 24px;" src="../static/backstage.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="h50 flex-text pointer"
style="background: linear-gradient(to bottom, rgba(171,238,255,0), rgba(171,238,255,.2));border-bottom: 1px solid rgba(171,238,255,.5);">
<div class="flex-1" v-if="isReady">
<van-notice-bar background="none" left-icon="volume-o" color="#ffffff" :speed="80"
:text="notice.title" @click="noticeMask = true" />
</div>
</div> -->
<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 @click="changeMenu('video')" :class="{active: bigScreenDetailMenu==='video'}">视频监控</li>
<li @click="changeMenu('shape')" :class="{active: bigScreenDetailMenu==='shape'}">变形监测</li>
<li @click="changeMenu('temprate')" :class="{active: bigScreenDetailMenu==='temprate'}">温度监测
</li>
<li @click="changeMenu('wind')" :class="{active: bigScreenDetailMenu==='wind'}">风速监测</li>
<li @click="changeMenu('water')" :class="{active: bigScreenDetailMenu==='water'}">降水监测</li>
<li @click="changeMenu('people')" :class="{active: bigScreenDetailMenu==='people'}">人员定位
</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">
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
</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">
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
</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">
<div class="list-item"><i class="el-icon-caret-right"></i><span>xxxxx监测点</span></div>
</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="datetimerange"
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>
let jessibucaPlayer = {};
//const host = location.protocol + '//' + window.location.host;
const token = Cookies.get('ELADMIN-TOEKN');
const Axiosx = axios.create({
headers: { 'Authorization': token }
});
Axiosx.interceptors.response.use(
response => {
return response
}, error => {
console.error(error)
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
console.error('当前网络不佳')
return
}
}
if (!code) {
console.error('当前网络不佳')
return
}
if (code === 401) {
alert('登录信息失效，请重新登录')
window.open(host + '/#/login', '_self')
return
}
if (code === 400) {
alert('您没有权限使用此功能，请联系管理员开通')
return
}
}
);
const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.3.37' : '192.168.13.200') + ':8013';
const selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
// 请求 token 用
const request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var map; // 地图
new Vue({
el: '#app',
data() {
return {
// 公共信息
selectedMine: {},
// 菜单折叠显隐
showMenu4bianpo: true,
sensorLIst: [],
currentSensorId: '',
showMenu4weikuangku: true,
showMenu4chenjiang: true,
showMenu4diya: true,
// 菜单折叠显隐 - 结束
createTime: ['2024-01-01', '2024-09-30'],
bigScreenDetailMenu: '',
selectedMine: {},
isReady: false, // 页面是否准备好 请求完接口变为true
// 表格数据
tableList: []
}
},
mounted() {
for (var i = 0; i < 10; i++) {
this.tableList.push({
videoName: 'sdfksdfxxxxx',
warnTypeName: '扣税的交流方',
warnDatetime: 'ksdlfsdf'
})
}
if (!token) {
window.open(host + '/#/login', '_self')
return
}
this.bigScreenDetailMenu = window.localStorage.getItem('bigScreenDetailMenu')
// 当前矿山
const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
let noMine = false
if (!selectedMineJson) {
noMine = true
} else {
const selectedMine = JSON.parse(selectedMineJson)
// if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
// noMine = true
// } else {
this.selectedMine = selectedMine
// }
}
if (noMine) {
alert('您当前还未选择矿山，请先选择矿山再查看此大屏')
window.history.go(-1)
return
}
if (this.selectedMine.mineType != 2) {
alert('您当前选择的不是露天矿山，请先选择露天矿山，再查看此大屏')
window.history.go(-1)
return
}
// this.getCharts();
// this.getChartsData()
this.getSensorList(() => {
});
this.getTableList();
// this.getChartsData();
},
watch: {
createTime() {
this.getChartsData()
}
},
methods: {
changeSensor(item) {
this.currentSensorId = item.equipNo
this.getTableList()
this.getChartsData();
},
getSensorList(fn) {
// 视频列表
Axiosx.get(host + '/data/mp/sensorList', {
params: {
enterpriseId: this.selectedMine.id,
}
}).then(res => {
this.sensorLIst = res.data.body || [];
if (this.sensorLIst.length) {
this.currentSensorId = this.sensorLIst[0].equipNo
}
console.log('sdfsdf', res)
// fn && fn()
});
this.isReady = true
},
getTableList() {
// 视频列表
Axiosx.get(host + '/data/mp/historyInside', {
params: {
code: this.currentSensorId,
}
}).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() {
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' // 警戒线样式
}
}
}
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: {
name: 'Precipitation',
splitLine: { show: false },
axisLabel: { textStyle: { color: '#a3e4f5' } }
},
grid: { right: 45, top: 10, 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/mp/imghistory', {
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
},
changeMenu(menuName) {
localStorage.setItem('bigScreenDetailMenu', menuName)
this.bigScreenDetailMenu = menuName
},
getAccessToken(appKey, appSecret) {
var dataJson = 'appKey=' + appKey + '&appSecret=' + appSecret;
return request.post("/ys7com", dataJson).then(res => {
var data = res.data || {};
if (data['code'] == '200') {
return data['data']['accessToken']
} else {
return null
}
}).catch(err => {
console.log(err);
return err
})
},
},
})
</script>
</html>
\ No newline at end of file
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