Skip to content

Z
ZiBoYingJI
Commit cffce88f authored by Kimber's avatar Kimber
Browse files
Options

'up'

parent 5d5c7818
Hide whitespace changes
Inline Side-by-side
Showing with 508 additions and 550 deletions
public/datav/index.html
View file @ cffce88f
......@@ -215,7 +215,7 @@
<div class="f20 color-theme ml10">后台管理</div>
</div> -->
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top: 45px;"
<div class="fixed flex-text maxIndex pointer" style="left: 30px;top:3px;"
@click="gotoManagement1()"
:class="isFullScreen?'tr-top':'tr-top-re'">
<img style="width: 24px;height: 24px;" src="static/backstage.png" alt="">
......@@ -238,7 +238,7 @@
<!-- <div class="fixed wp100 hv100" style="z-index: 199;" @click="showMask = aiShowMask = false"
v-show="showMask || aiShowMask"></div> -->
<div class="flex-text" style="margin-top: -20px;">
<div class="flex-text" style="margin-top:70px;">
<div :class="isFullScreen?'tr-left':'tr-left-re'"
class="flex flex-column space-between relative" :style="{ height: 980 / heightScale + 'px', width: 514 * heightScale + 'px' }">
<!-- 物联网主机 -->
......@@ -617,12 +617,13 @@
<div class="ml20 mr20 ellipsis">{{ item.mineName }}</div>
</div>
<div class="flex-1 ovh">
<div class="ml20 mr20 ellipsis">{{ item.name }}</div>
<div class="ml20 mr20 ellipsis">{{ item.dangerWorkName }}</div>
</div>
<div class="" style="width: 200px;">{{ item.workDate }}</div>
<div class="" style="width: 200px;">{{ item.dangerWorkTime }}</div>
<div class="" style="width: 150px;"
:class="item.auditState == 1?'color-yellow':item.auditState == 3?'color-red':'color-blue'">{{
item.auditState == 1?'审核中':item.auditState == 3?'未通过':'已通过' }}</div>
:class="item.auditState == 1?'color-yellow':item.auditState == 3?'color-red':'color-blue'">
{{['未通过', '审批中；', '已通过'][~~item.state]}}
</div>
<div class="flex-text" style="width: 220px;">
<!-- <div class="color-white pointer flex-text"
style="border-bottom: 1px solid #ffffff;height: 28px;box-sizing: border-box;">查看</div> -->
......@@ -943,7 +944,7 @@
// 在线监测实时报警 list
alarm: [],
// 在线监测报警统计
tabs: ['地下矿山人员定位', '地下矿山环境监测', '尾矿库在线监测'],
tabs: ['尾矿库在线监测', '地下矿山环境监测', '地下矿山人员定位'],
TabCur: 0,
timeSelect: ['近一月', '近半年', '近一年'],
active: 0,
......@@ -957,7 +958,7 @@
aiAlarm: [],
// 重点在线监测总览
overviewTabs: ['地下矿山人员定位', '地下矿山环境监测', '尾矿库在线监测'],
overviewTabs: ['尾矿库在线监测', '地下矿山环境监测', '地下矿山人员定位'],
overviewTabCur: 0,
overview: [],
......@@ -970,7 +971,7 @@
// 饼图弹窗
isMaskShow: false,
maskTabs: ['全部', '审核中', '已通过', '未通过'],
maskTabs: ['全部'/* , '审核中', '已通过', '未通过' */],
maskActive: 0,
pieList: [],
......@@ -1068,10 +1069,6 @@
var selectCompany = document.getElementById("selectCompany");
selectCompany.onchange = function(e){
var value = this.selectedOptions[0].value;
//window.location.reload()
self.reqMines(this.enterpriseId = value);
};
},
......@@ -1083,7 +1080,6 @@
this.reqEnterprise(res.body[0].id);
});
},
reqEnterprise(value){
var req = {
params: {
......@@ -1093,7 +1089,6 @@
axios.get(host + '/api/yingji/deptandenterprise/enterprise', req).then(res => {
res = res.data;
var body = res.body || [];
console.log('enterprise ________________ ', body);
this.selectUnit = body;
body[0] && this.reqMines(this.enterpriseId = body[0].id);
......@@ -1445,18 +1440,38 @@
dat.addLayer(pulseLink);
},
left3() {
// 基于准备好的dom，初始化echarts实例
left3(type) {
var req = {
params: {
enterpriseId:this.enterpriseId,
type:(this.active+1) || 1,
}
};
axios.get(host + '/api/yingji/keynoteadmin/opencast-alert', req).then(res => {
res = res.data;
this.left3Charts(res.body)
});
},
left3Charts(body){
var list = body.list;
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
myChart.clear() // 定时刷新 实际不刷新 演示用
let xData = []
let yData1 = []
let yData2 = []
if (this.active === 0) {
xData = ['3/27', '3/28', '3/29', '3/30', '3/31', '4/1', '4/2', '4/3', '4/4', '4/5', '4/6', '4/7', '4/8', '4/9', '4/10', '4/11', '4/12', '4/13', '4/14', '4/15', '4/16', '4/17', '4/18', '4/19', '4/20', '4/21', '4/22', '4/23', '4/24', '4/25']
if(this.TabCur === 0){
for(var item of list){
xData.push(item.date);
yData1.push(item.values.alarmCount);
};
};
/* if (this.active === 0) {
xData = ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月']
for (const i in xData) {
yData1.push(Math.round(Math.random() * 10))
yData2.push(Math.round(Math.random() * 10))
yData1.push(Math.round(Math.random() * 40))
yData2.push(Math.round(Math.random() * 40))
}
}
if (this.active === 1) {
......@@ -1467,12 +1482,12 @@
}
}
if (this.active === 2) {
xData = ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月']
xData = ['3/27', '3/28', '3/29', '3/30', '3/31', '4/1', '4/2', '4/3', '4/4', '4/5', '4/6', '4/7', '4/8', '4/9', '4/10', '4/11', '4/12', '4/13', '4/14', '4/15', '4/16', '4/17', '4/18', '4/19', '4/20', '4/21', '4/22', '4/23', '4/24', '4/25']
for (const i in xData) {
yData1.push(Math.round(Math.random() * 40))
yData2.push(Math.round(Math.random() * 40))
yData1.push(Math.round(Math.random() * 10))
yData2.push(Math.round(Math.random() * 10))
}
}
} */
// 绘制图表
const bars = [{
name: this.TabCur === 0 ? '区域报警' : this.TabCur === 1 ? '环境监测报警' : this.TabCur === 2 ? '在线监测报警' : '',
......@@ -1497,7 +1512,7 @@
}];
const lines = [];
if (this.TabCur === 0) {
lines.push({
/* lines.push({
name: '人员报警',
type: 'line',
smooth: true,
......@@ -1505,7 +1520,7 @@
itemStyle: {
color: '#ffa900'
}
});
}); */
}
myChart.setOption({
xAxis: {
......@@ -1541,7 +1556,7 @@
],
series: [...bars,...lines]
});
},
},
right1(){
let params = {
......@@ -1568,11 +1583,17 @@
});
},
right2() {
const pie = (body, data) => {
var list = body.state, workList = body.dangerWorkList;
var seriesData = [];
for(var item of list){
seriesData.push({
value: item.value,
name: item.name + item.value,
label: { color: '#ffffff' }
})
};
const pie = (data) => {
// 基于准备好的dom，初始化echarts实例
pieChart = echarts.init(document.getElementById("pie"));
pieChart.clear() // 定时刷新 实际不刷新 演示用
......@@ -1584,11 +1605,7 @@
startAngle: 0,
center: ['35%', '50%'],
radius: '70%',
data: [
{ value: data.pass, name: '已通过：' + data.pass, label: { color: '#ffffff' } },
{ value: data.unpass, name: '未通过：' + data.unpass, label: { color: '#ffffff' } },
{ value: data.none, name: '审核中：' + data.none, label: { color: '#ffffff' } }
],
data: seriesData,
itemStyle: {
// normal: {
// borderWidth: 2,
......@@ -1601,68 +1618,44 @@
// 饼图点击事件
pieChart.on("click", () => {
this.maskActive = 0
this.getPieList()
this.getPieList(workList)
this.isMaskShow = true
});
}
console.log('right2 ________________ ', this.enterpriseId);
var req = {
params: {
enterpriseId:this.enterpriseId,
auditStatus:'0',
}
};
axios.get(host + '/api/yingji/dangerousworkaudit/dangerwork-list', req).then(res => {
return ;
if (res && res.data) {
pie(res.data)
}
});
return ;
axios.get(host + '/api/datav/dangerous-work/audit-state').then(res => {
if (res && res.data) {
pie(res.data)
res = res.data;
if (res && res.body) {
pie(res.body)
}
});
},
right3() {
if (this.overviewTabCur === 0) {
console.log('right3 ________________ ', this.overviewTabCur);
var req = {
params: {
enterpriseId:this.enterpriseId,
}
};
axios.get(host + '/api/yingji/keynoteadmin/opencast-admin', req).then(res => {
res = res.data;
var body = res.body || {}, list = body.list || [];
this.overview = [
{ text: list[0].name, percent: list[0].num, legend: list[0].num + '个' },
{ text: list[1].name, percent: list[1].num, legend: list[1].num + '个' },
{ text: list[2].name, percent: list[2].num, legend: list[2].num + '个' },
{ text: list[3].name, percent: list[3].num, legend: list[3].num + '个' },
{ text: list[4].name, percent: list[4].num, legend: list[4].num + '%' },
{ text: list[5].name, percent: list[5].num, legend: list[5].num + '%' }
]
});
const rn1 = Math.round(Math.random() * 60)
const rn2 = Math.round(Math.random() * rn1)
const rn3 = Math.round(Math.random() * 10)
const rn4 = Math.round(Math.random() * 10)
const rn5 = Math.round(Math.random() * 100)
const rn6 = Math.round(Math.random() * 100)
this.overview = [
{ text: '井下作业人数', percent: rn1, legend: rn1 + '人' },
{ text: '带班领导下井数', percent: rn2, legend: rn2 + '人' },
{ text: '人员报警数量', percent: rn3, legend: rn3 + '个' },
{ text: '区域报警数量', percent: rn4, legend: rn4 + '个' },
{ text: '人员报警处置率', percent: rn5, legend: rn5 + '%' },
{ text: '区域报警处置率', percent: rn6, legend: rn6 + '%' }
]
}
if(this.overviewTabCur === 1){
const rn1 = Math.round(Math.random() * 20)
/* const rn1 = Math.round(Math.random() * 20)
const rn2 = Math.round(Math.random() * rn1)
const rn3 = rn1 - rn2
const rn4 = Math.floor(rn3 * 100 / rn1)
......@@ -1675,9 +1668,9 @@
{ text: '设备在线率', percent: rn4, legend: rn4 + '%' },
{ text: '当月报警数量', percent: rn5, legend: rn5 + '个' },
{ text: '报警处理率', percent: rn6, legend: rn6 + '%' }
]
] */
}
if(this.overviewTabCur === 2){
if(this.overviewTabCur === 1){
const rn1 = Math.round(Math.random() * 20)
const rn2 = Math.round(Math.random() * rn1)
const rn3 = rn1 - rn2
......@@ -1693,6 +1686,22 @@
{ text: '报警处理率', percent: rn6, legend: rn6 + '%' }
]
}
if(this.overviewTabCur === 2){
const rn1 = Math.round(Math.random() * 60)
const rn2 = Math.round(Math.random() * rn1)
const rn3 = Math.round(Math.random() * 10)
const rn4 = Math.round(Math.random() * 10)
const rn5 = Math.round(Math.random() * 100)
const rn6 = Math.round(Math.random() * 100)
this.overview = [
{ text: '井下作业人数', percent: rn1, legend: rn1 + '人' },
{ text: '带班领导下井数', percent: rn2, legend: rn2 + '人' },
{ text: '人员报警数量', percent: rn3, legend: rn3 + '个' },
{ text: '区域报警数量', percent: rn4, legend: rn4 + '个' },
{ text: '人员报警处置率', percent: rn5, legend: rn5 + '%' },
{ text: '区域报警处置率', percent: rn6, legend: rn6 + '%' }
]
}
},
async getData(refesh) {
......@@ -1724,7 +1733,7 @@
this.right2();
this.right3();
if(this.marker[0]){
if(this.marker && this.marker[0]){
// 在线实时报警
this.alarm = [
{ id: 1, name: this.marker[1].name, equipment: '氧气浓度', day: '2023-05-25', time: '00:49:48', statusTxt: '已处理', status: 1 },
......@@ -1746,12 +1755,16 @@
_5minus();
setTimeout(() => this.getData('refesh'), 15 * 1000);// 10秒一个刷新周期
setTimeout(() => this.getData('refesh'), 60 * 1000);// 10秒一个刷新周期
},
// 危险作业列表
getPieList() {
this.pieList = []
getPieList(workList) {
this.pieList = workList;
console.log('workList ________________ ', workList);
return ;
this.pieList = [];
// 0~3 '全部', '审批中', '已通过', '未通过'
const state = this.maskActive
axios.get(host + '/api/datav/dangerous-work', {
......@@ -1761,8 +1774,7 @@
count: 6
}
}).then(res => {
this.pieList = res && res.data && res.data.results
console.log(this.pieList)
this.pieList = res && res.data && res.data.results;
})
},
......@@ -1790,7 +1802,7 @@
clickActive(index){
this.active = index;
this.showMask = false;
this.left3()
this.left3(index)
},
// 切换重点在线监测总览
......
public/datav/natural.html
View file @ cffce88f
......@@ -778,24 +778,11 @@
<select style="margin:0 20px;">
<option value="1">淄博市</option>
</select>
<select style="margin:0 20px;">
<option value="370305">临淄区</option>
<option value="370306">周村区</option>
<option value="370302">淄川区</option>
<option value="370303">张店区</option>
<option value="370304">博山区</option>
<option value="370321">桓台县</option>
<option value="370322">高青县</option>
<option value="370323">沂源县</option>
<select style="margin:0 20px;" id="selectArea">
<option v-for="(item, i) in selectArea" :value="item.id">{{item.name}}</option>
</select>
<select style="margin:0 20px;width:120px;" id="selectCompany">
<option value="1">请选择矿山企业</option>
<option value="2">淄博卓正新材料科技有限公司</option>
<option value="3">淄博凯运达运贸有限公司石厂</option>
<option value="4">淄博博望矿业有限责任公司</option>
<option value="5">淄博洪泉石料厂</option>
<option value="6">淄博市淄川区岭子镇杨家村石料厂</option>
<option value="7">山东宝山科技有限公司水泥用灰岩矿</option>
<option v-for="(item, i) in selectUnit" :value="item.id">{{item.name}}</option>
</select>
</div>
</header>
......@@ -1024,6 +1011,9 @@
dm1:{},
dm3:{},
dm4:{},
selectArea:[],
selectUnit:[],
}
},
watch: {
......@@ -1053,250 +1043,232 @@
var value = this.selectedOptions[0].value;
m.alarmTrend(value);
};
// 位移监测
m.requst('get', '/data/mp/countStatistics', {}).then(function(res){
self.dm1 = res
});
// 位移报警趋势
(m.alarmTrend = function(dateRange){
m.requst('get', '/data/mp/alarmTrend', {'dateRange':dateRange}).then(function(res){
var seriesDataFormat = function(data, opts){
var names = data.names || [], list = data.list || data.lists, series = [], categories = [],
maxVal = 0;
if(names[0] && list){
var colors = opts.colors || ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"];
var len = names.length;
for(var i=0; i<len; i++){
var item = names[i];
var serie = Object.assign({}, opts.serie) || {};
serie.name = item.name;
!serie.data && (serie.data = []);
serie.key = item.key;
!serie.type && (serie.type = data.chartType || opts.type);
serie.color = colors[i];
series.push(serie);
};
for(var item of list){
var values = item.values;
//var datetime = item[opts.datekey || 'dateUnit'];
//var time = datetime.indexOf(' ') > 0 ? datetime.split(' ')[1] : datetime;
var timestamp = item['date'];
categories.push(timestamp);
for(var serie of series){
var value = values[serie.key] * 1;
Math.abs(value) > maxVal && (maxVal = Math.abs(value));
serie.data.push([timestamp, value]);
// 加载数据
self.loadData = function(enterpriseId){
enterpriseId = enterpriseId || this.enterpriseId;
// 位移监测
var param = {
enterpriseId:enterpriseId,
};
(m.wyjc = function(){
m.requst('get', '/data/mp/countStatistics', param).then(function(res){
self.dm1 = res;
})
})();
// 位移报警趋势
(m.alarmTrend = function(dateRange){
m.requst('get', '/data/mp/alarmTrend', {'dateRange':dateRange, enterpriseId:enterpriseId}).then(function(res){
var seriesDataFormat = function(data, opts){
var names = data.names || [], list = data.list || data.lists, series = [], categories = [],
maxVal = 0;
if(names[0] && list){
var colors = opts.colors || ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"];
var len = names.length;
for(var i=0; i<len; i++){
var item = names[i];
var serie = Object.assign({}, opts.serie) || {};
serie.name = item.name;
!serie.data && (serie.data = []);
serie.key = item.key;
!serie.type && (serie.type = data.chartType || opts.type);
serie.color = colors[i];
series.push(serie);
};
for(var item of list){
var values = item.values;
//var datetime = item[opts.datekey || 'dateUnit'];
//var time = datetime.indexOf(' ') > 0 ? datetime.split(' ')[1] : datetime;
var timestamp = item['date'];
categories.push(timestamp);
for(var serie of series){
var value = values[serie.key] * 1;
Math.abs(value) > maxVal && (maxVal = Math.abs(value));
serie.data.push([timestamp, value]);
};
};
};
return {series:series, categories:categories, maxVal:maxVal}
};
return {series:series, categories:categories, maxVal:maxVal}
};
var formatSeries = seriesDataFormat(res, {datekey:'date', serie:{
type: 'column',
marker: {
enabled: false
},
}, colors:["#fcaa00", "#20ef03", "#38f1f3"]});
var formatSeries = seriesDataFormat(res, {datekey:'date', serie:{
type: 'column',
marker: {
enabled: false
},
}, colors:["#fcaa00", "#20ef03", "#38f1f3"]});
var series = formatSeries.series;
var series = formatSeries.series;
var option = {
chart: {
type: 'column',
backgroundColor:'transparent',
//marginTop:30,
marginBottom:50,
marginLeft:30,
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime' || 'category',
labels: {
//rotation:0, // 设置轴标签旋转角度
style:{
color:'#fff'
},
y:15,
var option = {
chart: {
type: 'column',
backgroundColor:'transparent',
//marginTop:30,
marginBottom:50,
marginLeft:30,
},
categories: formatSeries.categories,
lineWidth:0,
//lineColor:'#ff0000',
gridLineColor:'#aaa',
tickLength:0, // 刻度线
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: {
title: {
text: ''
},
labels:{
style:{
color:'#fff'
subtitle: {
text: ''
},
xAxis: {
type: 'datetime' || 'category',
labels: {
//rotation:0, // 设置轴标签旋转角度
style:{
color:'#fff'
},
y:15,
},
x:-6,
categories: formatSeries.categories,
lineWidth:0,
//lineColor:'#ff0000',
gridLineColor:'#aaa',
tickLength:0, // 刻度线
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
gridLineColor:'#0F5680',
//minorGridLineWidth: 5,
//gridLineWidth: 5,
//max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
},
plotOptions: {
column: {
borderWidth: 0,
//y:50,
//itemMarginTop:50,
yAxis: {
title: {
text: ''
},
labels:{
style:{
color:'#fff'
},
x:-6,
},
gridLineColor:'#0F5680',
//minorGridLineWidth: 5,
//gridLineWidth: 5,
//max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
},
bar:{
borderWidth: 0,
plotOptions: {
column: {
borderWidth: 0,
//y:50,
//itemMarginTop:50,
},
bar:{
borderWidth: 0,
},
},
},
legend: {
enabled: series.length > 1 ? true : false,
// 图例定位
layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical”
floating: false, // 图列是否浮动
align: 'right',
// 图例容器
//width:'100%', // number || String
padding:2, // 内边距
margin:2,
borderRadius:5,
//borderWidth:1,
verticalAlign: 'top',
// 图例项
//itemWidth:120, // 宽度
itemDistance:10, // 间距 20
y:-10,
itemMarginTop:2,
itemStyle:{color:'#fff',},
itemHoverStyle:{color:'#fff',},
},
credits: {
enabled: false
},
tooltip: {
/* formatter: function (e) {
return this.series.name + "："+ this.key +'<br/>'+ this.y.toFixed(3)+' ' + data.unit;
}, */
pointFormat: '{series.name}：{point.y} ' + 'mm',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%m-%d %H:%M',
hour: '%m-%d %H:%M',
day: '%m-%d %H:%M',
week: '%m-%d %H:%M',
month: '%Y-%m',
year: '%Y'
}
},
series: formatSeries.series,
};
new Highcharts.chart(wrap33, option);
});
})('month');
legend: {
enabled: series.length > 1 ? true : false,
// 图例定位
layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical”
floating: false, // 图列是否浮动
align: 'right',
// 图例容器
//width:'100%', // number || String
padding:2, // 内边距
margin:2,
borderRadius:5,
//borderWidth:1,
verticalAlign: 'top',
// 图例项
//itemWidth:120, // 宽度
itemDistance:10, // 间距 20
y:-10,
itemMarginTop:2,
itemStyle:{color:'#fff',},
itemHoverStyle:{color:'#fff',},
},
credits: {
enabled: false
},
tooltip: {
/* formatter: function (e) {
return this.series.name + "："+ this.key +'<br/>'+ this.y.toFixed(3)+' ' + data.unit;
}, */
pointFormat: '{series.name}：{point.y} ' + 'mm',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%m-%d %H:%M',
hour: '%m-%d %H:%M',
day: '%m-%d %H:%M',
week: '%m-%d %H:%M',
month: '%Y-%m',
year: '%Y'
}
},
series: formatSeries.series,
};
new Highcharts.chart(wrap33, option);
});
})('month');
// 温度监测
(m.wendu = function(dateRange){
m.requst('get', '/data/sz/countStatistics/wen', {}).then(function(res){
self.dm3 = res;
});
})();
// 温度监测
(m.wendu = function(dateRange){
m.requst('get', '/data/sz/countStatistics/wen', param).then(function(res){
self.dm3 = res;
});
})();
// 风速监测
(m.fengsu = function(dateRange){
m.requst('get', '/data/sz/countStatistics/feng', {}).then(function(res){
self.dm4 = res;
});
})();
// 风速监测
(m.fengsu = function(dateRange){
m.requst('get', '/data/sz/countStatistics/feng', param).then(function(res){
self.dm4 = res;
});
})();
};
// 区域列表
this.reqSelectArea();
var selectArea = document.getElementById("selectArea");
selectArea.onchange = function(e){
var value = this.selectedOptions[0].value;
self.reqEnterprise(value);
};
// 企业选择列表
var selectCompany = document.getElementById("selectCompany");
selectCompany.onchange = function(e){
var tag = e.target || e.srcElement;
window.location.reload()
}
return ;
if (!token) {
window.open(host + '/#/login', '_self')
return
}
// 当前矿山
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.getData()
// 视频列表
axios.get('/api/video/link-mine', {
params: {
mineType: this.selectedMine.mineType,
mineId: this.selectedMine.id,
}
}).then(resopnse => {
this.videos = []
let firstVideo = null
resopnse.data.results.forEach(vm => {
let video = {
'id': vm.id,
'videoUrl': null,
'name': vm.name,
'videoId': vm.videoId,
'deviceId': vm.deviceId
}
firstVideo = firstVideo || video
this.videos.push(video)
})
if (firstVideo) {
this.chickVideo(firstVideo, 0)
}
})
var value = this.selectedOptions[0].value;
self.loadData(self.enterpriseId = value);
};
},
methods: {
reqSelectArea(){
axios.get(LOCAL_API + '/api/yingji/deptandenterprise/dept').then(res => {
this.selectArea = res.body;
this.reqEnterprise(res.body[0].id);
});
},
reqEnterprise(value){
var req = {
params: {
deptId:value
}
};
axios.get(LOCAL_API + '/api/yingji/deptandenterprise/enterprise', req).then(res => {
var body = res.body || [];
this.selectUnit = body;
body[0] && (this.enterpriseId = body[0].id);
this.loadData();
});
},
// video
updatePlayerDomSize() {
let dom = this.$refs.container;
......
public/datav/watersource.html
View file @ cffce88f
......@@ -805,24 +805,11 @@
<select style="margin:0 20px;">
<option value="1">淄博市</option>
</select>
<select style="margin:0 20px;">
<option value="370305">临淄区</option>
<option value="370306">周村区</option>
<option value="370302">淄川区</option>
<option value="370303">张店区</option>
<option value="370304">博山区</option>
<option value="370321">桓台县</option>
<option value="370322">高青县</option>
<option value="370323">沂源县</option>
<select style="margin:0 20px;" id="selectArea">
<option v-for="(item, i) in selectArea" :value="item.id">{{item.name}}</option>
</select>
<select style="margin:0 20px;width:120px;" id="selectCompany">
<option value="1">请选择矿山企业</option>
<option value="2">淄博卓正新材料科技有限公司</option>
<option value="3">淄博凯运达运贸有限公司石厂</option>
<option value="4">淄博博望矿业有限责任公司</option>
<option value="5">淄博洪泉石料厂</option>
<option value="6">淄博市淄川区岭子镇杨家村石料厂</option>
<option value="7">山东宝山科技有限公司水泥用灰岩矿</option>
<option v-for="(item, i) in selectUnit" :value="item.id">{{item.name}}</option>
</select>
</div>
</header>
......@@ -996,6 +983,9 @@
return {
dm1:{},
dm3:{},
selectArea:[],
selectUnit:[],
}
},
watch: {
......@@ -1016,236 +1006,219 @@
return res
})
};
var amd33 = self.$el.querySelector("#amd33");
var wrap33 = amd33.querySelector(".wrap");
// 年度降水总量
m.requst('get', '/data/rg/rainfall-year', {}).then(function(res){
self.dm1 = res
});
// 24小时各监测点降水量
(m.alarmTrend = function(){
m.requst('get', '/data/rg/rainfallDay', {}).then(function(res){
var seriesDataFormat = function(data, opts){
var names = data.names || [], list = data.list || data.lists, series = [], categories = [], maxVal = 0;
if(names[0] && list){
var colors = opts.colors || ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"];
var len = names.length;
for(var i=0; i<len; i++){
var item = names[i];
var serie = Object.assign({}, opts.serie) || {};
serie.name = item.name;
!serie.data && (serie.data = []);
serie.key = item.key;
!serie.type && (serie.type = data.chartType || opts.type);
serie.color = colors[i];
series.push(serie);
};
for(var item of list){
var values = item.values;
var timestamp = item['date'];
categories.push(timestamp);
for(var serie of series){
var value = values[serie.key] * 1;
Math.abs(value) > maxVal && (maxVal = Math.abs(value));
serie.data.push([timestamp, value]);
// 加载数据
self.loadData = function(enterpriseId){
enterpriseId = enterpriseId || this.enterpriseId;
// 位移监测
var param = {
enterpriseId:enterpriseId,
};
// 年度降水总量
m.requst('get', '/data/rg/rainfall-year', param).then(function(res){
self.dm1 = res
});
// 24小时各监测点降水量
(m.alarmTrend = function(){
m.requst('get', '/data/rg/rainfallDay', param).then(function(res){
var seriesDataFormat = function(data, opts){
var names = data.names || [], list = data.list || data.lists, series = [], categories = [], maxVal = 0;
if(names[0] && list){
var colors = opts.colors || ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"];
var len = names.length;
for(var i=0; i<len; i++){
var item = names[i];
var serie = Object.assign({}, opts.serie) || {};
serie.name = item.name;
!serie.data && (serie.data = []);
serie.key = item.key;
!serie.type && (serie.type = data.chartType || opts.type);
serie.color = colors[i];
series.push(serie);
};
for(var item of list){
var values = item.values;
var timestamp = item['date'];
categories.push(timestamp);
for(var serie of series){
var value = values[serie.key] * 1;
Math.abs(value) > maxVal && (maxVal = Math.abs(value));
serie.data.push([timestamp, value]);
};
};
};
return {series:series, categories:categories, maxVal:maxVal}
};
return {series:series, categories:categories, maxVal:maxVal}
};
var formatSeries = seriesDataFormat(res, {datekey:'date', serie:{
type: 'column',
marker: {
enabled: false
},
}, colors:["#fcaa00", "#20ef03", "#38f1f3"]});
var formatSeries = seriesDataFormat(res, {datekey:'date', serie:{
type: 'column',
marker: {
enabled: false
},
}, colors:["#fcaa00", "#20ef03", "#38f1f3"]});
var series = formatSeries.series;
var series = formatSeries.series;
var option = {
chart: {
type: 'column',
backgroundColor:'transparent',
//marginTop:30,
marginBottom:55,
marginLeft:30,
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime' || 'category',
labels: {
//rotation:0, // 设置轴标签旋转角度
style:{
color:'#fff'
},
y:15,
var option = {
chart: {
type: 'column',
backgroundColor:'transparent',
//marginTop:30,
marginBottom:55,
marginLeft:30,
},
categories: formatSeries.categories,
lineWidth:0,
//lineColor:'#ff0000',
gridLineColor:'#aaa',
tickLength:0, // 刻度线
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: {
title: {
text: ''
},
labels:{
style:{
color:'#fff'
subtitle: {
text: ''
},
xAxis: {
type: 'datetime' || 'category',
labels: {
//rotation:0, // 设置轴标签旋转角度
style:{
color:'#fff'
},
y:15,
},
x:-6,
categories: formatSeries.categories,
lineWidth:0,
//lineColor:'#ff0000',
gridLineColor:'#aaa',
tickLength:0, // 刻度线
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
gridLineColor:'#0F5680',
//minorGridLineWidth: 5,
//gridLineWidth: 5,
//max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
},
plotOptions: {
column: {
borderWidth: 0,
//y:50,
//itemMarginTop:50,
yAxis: {
title: {
text: ''
},
labels:{
style:{
color:'#fff'
},
x:-6,
},
gridLineColor:'#0F5680',
//minorGridLineWidth: 5,
//gridLineWidth: 5,
//max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
},
bar:{
borderWidth: 0,
plotOptions: {
column: {
borderWidth: 0,
//y:50,
//itemMarginTop:50,
},
bar:{
borderWidth: 0,
},
},
},
legend: {
enabled: series.length > 1 ? true : false,
// 图例定位
layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical”
floating: false, // 图列是否浮动
align: 'right',
// 图例容器
//width:'100%', // number || String
padding:2, // 内边距
margin:2,
borderRadius:5,
//borderWidth:1,
verticalAlign: 'top',
// 图例项
//itemWidth:120, // 宽度
itemDistance:10, // 间距 20
y:-10,
itemMarginTop:2,
itemStyle:{color:'#fff',},
itemHoverStyle:{color:'#fff',},
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}：{point.y} ' + 'mm',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%m-%d %H:%M',
hour: '%m-%d %H:%M',
day: '%m-%d %H:%M',
week: '%m-%d %H:%M',
month: '%Y-%m',
year: '%Y'
}
},
series: formatSeries.series,
};
new Highcharts.chart(wrap33, option);
});
})();
legend: {
enabled: series.length > 1 ? true : false,
// 图例定位
layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical”
floating: false, // 图列是否浮动
align: 'right',
// 图例容器
//width:'100%', // number || String
padding:2, // 内边距
margin:2,
borderRadius:5,
//borderWidth:1,
verticalAlign: 'top',
// 图例项
//itemWidth:120, // 宽度
itemDistance:10, // 间距 20
y:-10,
itemMarginTop:2,
itemStyle:{color:'#fff',},
itemHoverStyle:{color:'#fff',},
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}：{point.y} ' + 'mm',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%m-%d %H:%M',
hour: '%m-%d %H:%M',
day: '%m-%d %H:%M',
week: '%m-%d %H:%M',
month: '%Y-%m',
year: '%Y'
}
},
series: formatSeries.series,
};
new Highcharts.chart(wrap33, option);
});
})();
// 降水监测
(m.jiangshui = function(dateRange){
m.requst('get', '/data/rg/countStatistics', {}).then(function(res){
self.dm3 = res;
});
})();
// 降水监测
(m.jiangshui = function(dateRange){
m.requst('get', '/data/rg/countStatistics', param).then(function(res){
self.dm3 = res;
});
})();
};
// 区域列表
this.reqSelectArea();
var selectArea = document.getElementById("selectArea");
selectArea.onchange = function(e){
var value = this.selectedOptions[0].value;
self.reqEnterprise(value);
};
// 企业选择列表
var selectCompany = document.getElementById("selectCompany");
selectCompany.onchange = function(e){
var tag = e.target || e.srcElement;
window.location.reload()
}
var value = this.selectedOptions[0].value;
self.loadData(self.enterpriseId = value);
};
},
methods: {
reqSelectArea(){
axios.get(LOCAL_API + '/api/yingji/deptandenterprise/dept').then(res => {
this.selectArea = res.body;
this.reqEnterprise(res.body[0].id);
});
},
reqEnterprise(value){
var req = {
params: {
deptId:value
}
};
axios.get(LOCAL_API + '/api/yingji/deptandenterprise/enterprise', req).then(res => {
var body = res.body || [];
this.selectUnit = body;
body[0] && this.loadData(this.enterpriseId = body[0].id);
});
},
return ;
if (!token) {
window.open(host + '/#/login', '_self')
return
}
// 当前矿山
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.getData()
// ------------------------------------------
// 视频列表
axios.get('/api/video/link-mine', {
params: {
mineType: this.selectedMine.mineType,
mineId: this.selectedMine.id,
}
}).then(resopnse => {
this.videos = []
let firstVideo = null
resopnse.data.results.forEach(vm => {
let video = {
'id': vm.id,
'videoUrl': null,
'name': vm.name,
'videoId': vm.videoId,
'deviceId': vm.deviceId
}
firstVideo = firstVideo || video
this.videos.push(video)
})
if (firstVideo) {
this.chickVideo(firstVideo, 0)
}
})
},
methods: {
// video
updatePlayerDomSize() {
let dom = this.$refs.container;
......
vue.config.js
View file @ cffce88f
......@@ -64,12 +64,13 @@ module.exports = {
},
plugins: [
// https://www.ydyno.com/archives/1260.html 使用gzip解压缩静态文件
new CompressionPlugin({
/* new CompressionPlugin({
test: /\.(js|css|html)?$/i, // 压缩文件格式
filename: '[path].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
minRatio: 0.8 // 压缩率小于1才会压缩
})
}) */
]
},
chainWebpack(config) {
......
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