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