Skip to content

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

'update'

parent f34edae9
Show whitespace changes
Inline Side-by-side
Showing with 289 additions and 177 deletions
public/datav/index.html
View file @ 5ea66232
......@@ -1264,7 +1264,12 @@
loading.close();
this.isReady = true;
this.mineList = res && res.data && res.data.results;
console.log('mineList ________________ ', this.mineList);
this.mineNumber1 = this.mineList.filter(x => x.mineType == 1).length;
this.mineNumber2 = this.mineList.filter(x => x.mineType == 2).length;
this.mineNumber3 = this.mineList.filter(x => x.mineType == 3).length;
......
public/datav/watersource.html
View file @ 5ea66232
......@@ -297,7 +297,16 @@
}
.md9{
.md1b{
div.chartbox{
height:200px;
}
.md1-wrap{padding:0;}
ul{height:auto;}
.icon{width:80px;height:80px;}
}
}
}
</style>
......@@ -434,9 +443,8 @@
style="background-color: rgba(13,27,48,.7);width: 120px;pointer-events:auto;"
@click="isRoad = !isRoad">
<div class="h50 round flex-text map-icon" style="width: 120px;">
<div class="round flex-text" style="width: 16px;height: 16px;border: 2px solid #ffffff;">
<div class="round" style="width: 8px;height: 8px;background-color: #ffffff;"
v-if="isRoad"></div>
<div class="round flex-text" style="width: 16px;height: 16px;border:2px solid #ffffff;">
<div class="round" style="width: 8px;height: 8px;background-color:#ffffff;" v-if="isRoad"></div>
</div>
<div class="f20 ml10">路网</div>
</div>
......@@ -479,38 +487,38 @@
</div>
</div>
<div class="absolute flex-text" style="bottom: 10px;left: 50%;transform: translateX(-50%);">
<div class="absolute flex-text footer" style="bottom: 10px;left: 50%;transform: translateX(-50%);">
<div class="flex-text" :style="{ transform: 'scale(' + (widthScale > 1 ? 1 : widthScale) + ')' }">
<div class="flex-text" :class="isFullScreen?'tr-bottom':'tr-bottom-re'">
<div class="relative mine-0">
<div class="relative" @click="mineTypeEvent(1)" :class="{actv:mineType===1}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-0.png" alt="">
<div class="poa-cover flex-text flex-column">
<div class="color-theme f30" style="margin-top: -24px;">{{mineNumber1 || '0'}}</div>
<div class="f18" style="margin-top: 3px;">地下矿山</div>
</div>
</div>
<div class="relative ml40 mine-1">
<div class="relative ml40" @click="mineTypeEvent(2)" :class="{actv:mineType===2}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-1.png" alt="">
<div class="poa-cover flex-text flex-column">
<div class="color-theme f30" style="margin-top: -24px;">{{mineNumber2 || '0'}}</div>
<div class="f18" style="margin-top: 3px;">露天矿山</div>
</div>
</div>
<div class="relative ml40 mine-2">
<div class="relative ml40" @click="mineTypeEvent(3)" :class="{actv:mineType===3}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-2.png" alt="">
<div class="poa-cover flex-text flex-column">
<div class="color-theme f30" style="margin-top: -24px;">{{mineNumber3 || '0'}}</div>
<div class="f18" style="margin-top: 3px;">尾矿库</div>
</div>
</div>
<div class="relative ml40 mine-3">
<div class="relative ml40" @click="mineTypeEvent(4)" :class="{actv:mineType===4}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-3.png" alt="">
<div class="poa-cover flex-text flex-column">
<div class="color-theme f30" style="margin-top: -24px;">{{mineNumber4 || '0'}}</div>
<div class="f18" style="margin-top: 3px;">停产矿山</div>
</div>
</div>
<div class="relative ml40 mine-3">
<div class="relative ml40" @click="mineTypeEvent(5)" :class="{actv:mineType===5}">
<img style="width: 134px;height: 146px;" src="static/mine-bg-4.png" alt="">
<div class="poa-cover flex-text flex-column">
<div class="color-theme f30" style="margin-top: -24px;">{{mineNumber5 || '0'}}</div>
......@@ -525,8 +533,6 @@
<!-- right -->
<div style="transform-origin:right center;right:0;" class="absolute" :style="{transform: 'scale(' + (heightScale) + ')'}" id="rightbar">
<!-- 变形监测报警统计 -->
<!-- <div style="width:514px;background:rgba(0,0,0,.25);padding:10px 0;" class="l-md3">
<div class="ml10 flex align-center f20 color-theme wp100"
......@@ -546,7 +552,7 @@
</div> -->
<!-- 风速监测 -->
<div class="md9" style="width:514px;margin-bottom:260px;padding:10px 0 10px 15px;background:rgba(0,0,0,.3);">
<div class="md9" style="width:514px;padding:10px 0 10px 15px;background:rgba(0,0,0,.3);">
<div class="ml10 flex align-center f20 color-theme wp100"
style="background-image:url('static/sub-title.png');background-size:100% 100%;height: 48px;">
<div class="ml40">风速监测</div>
......@@ -554,22 +560,48 @@
<div class="relative md1b" style="width:480px;">
<div class="m-tt3">
</div>
<div class="md1-wrap">
<ul style="height:220px;">
<ul style="height:110px;">
<li v-for="item in deviceL1">
<div class="icon"><font>{{item.num}}</font></div>
<span>{{item.name}}</span>
<div class="icon"><font>{{item.value}}</font></div>
<span>{{item.key}}</span>
</li>
</ul>
</div>
<div class="chartbox">
<div class="charts"></div>
</div>
</div>
</div>
<!-- 温湿度监测 -->
<div class="md9" style="width:514px;padding:10px 0 10px 15px;background:rgba(0,0,0,.3);">
<div class="ml10 flex align-center f20 color-theme wp100"
style="background-image:url('static/sub-title.png');background-size:100% 100%;height: 48px;">
<div class="ml40">温湿度监测</div>
</div>
<div class="relative md1b" style="width:480px;">
<div class="m-tt3">
</div>
<div class="md1-wrap">
<ul style="height:110px;">
<li v-for="item in deviceL1">
<div class="icon"><font>{{item.value}}</font></div>
<span>{{item.key}}</span>
</li>
</ul>
</div>
<div class="chartbox">
<div class="charts"></div>
</div>
<div class="chartbox">
<div class="charts"></div>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -973,6 +1005,8 @@
city:[],
area:[],
scompany:[],
mineType:void 0,
}
},
watch: {
......@@ -1000,10 +1034,7 @@
this.md31charts = md31.querySelector(".charts");
var md9 = this.$el.querySelector(".md9");
//var md9chart1 = this.$el.querySelector(".md9");
this.md9chart = md9.querySelector(".charts");
this.heightScale = (this.clientHeight - 100) / 1080
......@@ -1078,7 +1109,7 @@
})();
// md9 选择列表事件
// right1 选择列表事件
(function(){
self.m9tt3 = md9.querySelector(".m-tt3");
var select = document.createElement("select");
......@@ -1093,7 +1124,7 @@
qf.UI.selectRender(select, slist1, {
onchange: function(val){
self.md9param2 = ~~val;
self.reqMd9();
self.right1Data();
},
});
self.m9tt3.appendChild(self.m9select2);
......@@ -1166,6 +1197,13 @@
if(i < 3){
reqiust(list[0].id, i);
}else{
var item = {
name: "全部",
label: "全部",
id: 24,
};
list.unshift(item);
that.reqEnterprise(list[0] && list[0].id || 0, selects[i], callback);
};
});
......@@ -1178,8 +1216,8 @@
}
};
axios.get(host + '/api/yingji/deptandenterprise/enterprise', req).then(res => {
res = res.data;
var list = res.body || [];
var res = res.data, list = res.body;
this[select.id] = list;
this.isReady = true;
if(list[0]){
......@@ -1206,6 +1244,7 @@
that.reqDispense(that.enterpriseId);
});
},
reqDeviceStatus(){
var req = {
params: {
......@@ -1237,9 +1276,12 @@
var req = {
params: {
enterpriseId:id
enterpriseId:this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
}
};
axios.get(host + '/api/datav/mine', req).then(res => {
loading.close();
this.isReady = true;
......@@ -1248,8 +1290,8 @@
this.mineNumber1 = this.mineList.filter(x => x.mineType == 1).length;
this.mineNumber2 = this.mineList.filter(x => x.mineType == 2).length;
this.mineNumber3 = this.mineList.filter(x => x.mineType == 3).length;
this.mineNumber4 = this.mineList.filter(x => x.hasEnable == false).length;
this.mineNumber5 = this.mineList.filter(x => x.mineType == 4).length;
this.mineNumber4 = this.mineList.filter(x => x.mineType == 4).length;
this.mineNumber5 = this.mineList.filter(x => x.mineType == 5).length;
const markerUpdater = this.mineList.filter(mine => {
if (!mine.longitude || !mine.latitude) {
......@@ -1275,10 +1317,6 @@
drill: mine.emergencyDrillNumber || 0
};
});
/* this.marker = [
{ id: 0, longitude: '117.855635', latitude: '37.065754', mineType: 0, mineId: 0, type: 0, name: '应急管理局', number: '0', address: '平度市东阁街道', userName: '某某某', mobile: '18888888888', team: 0, supplies: 0, plan: 0, drill: 0 }
, ...markerUpdater
]; */
this.marker = [...markerUpdater];
......@@ -1287,7 +1325,6 @@
// 初始化
//_5minus();
//this.getData();
// 获取数据
this.getData();
});
......@@ -1298,6 +1335,7 @@
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
}
};
axios.get(host + '/api/shuili/rainNum', req).then(res => {
......@@ -1314,15 +1352,17 @@
Md3_1bSelect(){
var that = this;
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
}
};
axios.get(host + '/data/rg/sensorList', req).then(res => {
var res = res.data, list = res.body || [];
qf.UI.selectRender(that.select2, list, {
'name':'equipName',
'value':'equipNo',
......@@ -1344,6 +1384,7 @@
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
equipNo: this.md31equipNo,
timeUtil: this.md3_1param2,
}
......@@ -1473,122 +1514,204 @@
},
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.TabCur === 0){
for(var item of list){
xData.push(item.date);
yData1.push(item.values.alarmCount);
};
reqMd3_3(){
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
mineType:this.mineType,
}
};
// 绘制图表
const bars = [{
name: '报警数据',
type: 'bar',
data: yData1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
offset: 0,
color: '#0ee3f9'
}, {
offset: 1,
color: '#09f1f6'
}]),
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
barBorderRadius: [100, 100, 0, 0]
}
},
barWidth: '40%'
}];
const lines = [];
if (this.TabCur === 0) {
/* lines.push({
name: '人员报警',
type: 'line',
smooth: true,
data: yData2,
itemStyle: {
color: '#ffa900'
}
}); */
}
myChart.setOption({
xAxis: {
data: xData,
axisLine: { lineStyle: { color: '#ffffff' } },
axisTick: { show: false }
},
yAxis: {
splitLine: { show: false },
axisLabel: { textStyle: { color: '#ffffff' } }
axios.get(host + '/api/shuili/rainAllData', req).then(res => {
res = res.data;
var list = res.body || [];
this.alarmlist = list;
});
},
grid: { bottom: 40, top: 20 },
legend: {
show: true,
textStyle: {
color: '#FFF'
right1Select(){
var that = this;
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
}
};
axios.get(host + '/data/sz/sensorList/feng', req).then(res => {
var res = res.data, list = res.body || [];
qf.UI.selectRender(that.m9select2, list, {
'name':'equipName',
'value':'equipNo',
onchange: function(val){
that.right1equipNo = val;
that.right1Data();
},
dataZoom: [
{
type: "slider",
show: false,
start: 0,
endValue: 30, // 一次性展示31个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
},
{
type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移
}
],
series: [...bars,...lines]
});
that.right1Data();
});
},
reqMd8(){
right1Data(){
var that = this;
var req = {
params: {
enterpriseId: this.enterpriseId,
deptId: this.deptId,
equipNo: this.right1equipNo,
timeUtil: this.md9param2,
}
};
axios.get(host + '/api/shuili/rainAllData', req).then(res => {
res = res.data;
var list = res.body || [];
this.alarmlist = list;
axios.get(host + '/api/shuili/windNum', req).then(res => {
var res = res.data, body = res.body || [];
that.deviceL1 = body.list;
});
},
reqMd3() {
return ;
// 曲线
var req = {
params: {
enterpriseId:this.enterpriseId,
enterpriseId: this.enterpriseId,
deptId: this.deptId,
dateRange: this.daterange3.timeSpace.toString()
equipNo: this.right1equipNo,
timeUtil: this.md9param2,
}
};
axios.get(host + '/api/yingji/keynoteadmin/opencastAlertNature', req).then(res => {
res = res.data;
this.left3Charts(res.body)
axios.get(host + '/api/shuili/windDate', req).then(res => {
var res = res.data, body = res.body || [];
this.right1Chart(body);
});
},
right1Chart(body){
var formatSeries = this.seriesDataFormat(body, {datekey:'date', serie:{
type: 'spline',
marker: {
enabled: false
},
}, colors:["#fcaa00", "#20ef03", "#38f1f3"]});
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,
},
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'
},
x:-6,
},
gridLineColor:'#0F5680',
//minorGridLineWidth: 5,
//gridLineWidth: 5,
//max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
},
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(this.md9chart, option);
},
// 矿山类型
mineTypeEvent(value){
if(this.mineType === value){
this.mineType = void 0
}else{
this.mineType = value;
};
// 矿山数据
this.reqMines();
},
// -------------------------------------------------------------------
......@@ -1651,9 +1774,7 @@
});
let _this = this
AMap.plugin([
'AMap.ControlBar',
], function () {
AMap.plugin(['AMap.ControlBar',], function () {
// 添加 3D 罗盘控制
map.addControl(new AMap.ControlBar({
position: {
......@@ -1664,7 +1785,14 @@
}));
});
var icon = ['https://s3.bmp.ovh/imgs/2023/02/28/7c5a7440766955ea.png', 'https://s3.bmp.ovh/imgs/2023/02/28/a3be161800e3f011.png', 'https://s3.bmp.ovh/imgs/2023/02/28/9e2393a29da416fd.png', 'https://s3.bmp.ovh/imgs/2023/02/28/cd177c08c6052267.png']
var icon = [
'static/center-icon.png',
'static/mine-icon-0.png',
'static/mine-icon-1.png',
'https://s3.bmp.ovh/imgs/2023/02/28/cd177c08c6052267.png',
'static/mine-icon-3.png',
'static/mine-icon-4.png',
]
// 循环绘制marker
for (var i = 0; i < this.marker.length; i++) {
var marker = new AMap.Marker({
......@@ -1783,7 +1911,13 @@
window.gotoDataView = (mineType, mineId) => {
const mine = this.mineList.filter(x => x.mineType == mineType && x.id == mineId)[0]
window.localStorage.setItem('kd.selected.mine', JSON.stringify(mine))
window.localStorage.setItem('bigScreenDetailMenuModel', 'emergency');
window.open(selfHost + '/datav/detail/video-monitor.html', '_self')
return ;
if(mineType == 1){
window.open(selfHost + '/datav/underground.html', '_self')
}
......@@ -1898,8 +2032,9 @@
});
this.reqMd3_1();
this.reqMd8();
this.reqMd3();
this.reqMd3_3();
this.right1Select();
this.reqDeviceStatus(); // 设备状态
}
......@@ -1959,17 +2094,10 @@
},
// 切换重点在线监测总览
changeoverviewTab(index) {
if (index == this.overviewTabCur) return
changeoverviewTab(index) {0
this.overviewTabCur = index
},
clickAiActive(index){
this.md3_1b1 = index;
this.md3_1bMask = false;
this.right1()
},
// 切换危险作业审批
changeMaskTab(index) {
if (index == this.maskActive) return
......
vue.config.js
View file @ 5ea66232
......@@ -22,24 +22,6 @@ module.exports = {
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
pages:{
index: {
// 页面的入口文件
entry: Mode+'/main.js',
// 页面的模板文件
//template: './public/edge.html',
//chunks:["edge"],
},
plus: {
// 页面的入口文件
entry: Mode+'/plus.js',
// 页面的模板文件
template: './public/plus.html',
// build 生成的文件名称 例： dist/index.html
filename: 'plus.html',
chunks:["plus", "runtime", "chunk-libs", "chunk-elementUI"],
}
},
devServer: {
port: port,
host: VUE_APP_BASE_API && VUE_APP_BASE_API.split(/\/\/|:/).slice(-2)[0],
......@@ -83,18 +65,15 @@ module.exports = {
}
},
plugins: [
new CopyWebpackPlugin([{
from: "./static",
to: 'static'
}]),
],
name: name,
resolve: {
alias: {
'@': resolve(Mode+''),
'@crud': resolve(Mode+'/components/Crud')
}
}
// https://www.ydyno.com/archives/1260.html 使用gzip解压缩静态文件
/* new CompressionPlugin({
test: /\.(js|css|html)?$/i, // 压缩文件格式
filename: '[path].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
minRatio: 0.8 // 压缩率小于1才会压缩
}) */
]
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
......
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