Skip to content

D
donkey
Commit 2c6c852b authored by caicaicai's avatar caicaicai
Browse files
Options

环境监测页面编写

parent 680934fc
Show whitespace changes
Inline Side-by-side
Showing with 388 additions and 80 deletions
src/views/carPositioning/alarm.vue
View file @ 2c6c852b
......@@ -2,7 +2,7 @@
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="font-size:20px;font-weight:600;">车辆定位报警记录查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
......
src/views/carPositioning/histroyData.vue
View file @ 2c6c852b
......@@ -2,7 +2,7 @@
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="font-size:20px;font-weight:600;">车辆定位历史数据查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
......
src/views/carPositioning/nowData.vue
View file @ 2c6c852b
......@@ -2,7 +2,7 @@
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="font-size:20px;font-weight:600;">车辆定位实时数据查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
......
src/views/environment/homepage.vue
View file @ 2c6c852b
<template>
<div>
<span>环境在线监测首页</span>
<div class="AutomationHomepageViews">
<div class="AutomationBrieflyMenuBar">
<div class="AutomationSpecificItems" v-for="(item,index) in brieflyMenuBarArray" :key="index">
<div style="display: flex;justify-content: space-between;padding: 33px 25px 0px;">
<div style="font-size:16px;"><span style="color:white;">{{item.name}}：</span><span style="color:rgb(9,199,204);">{{item.context}}</span></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
brieflyMenuBarArray:[
{name:"噪声监测",context:"200dB"},
{name:"温度监测",context:"32℃"},
{name:"风速监测",context:"10m/s"},
{name:"湿度监测",context:"100%RH"},
{name:"风向监测",context:"东北风"},
{name:"大气压监测",context:"200KPa"},
{name:"扬尘监测",context:"正常"},
],
}
}
}
</script>
<style>
<style scoped>
*{
margin: 0;
padding: 0;
}
.AutomationHomepageViews{
background-color: rgb(0,20,78);
width: 100%;
height: 100%;
position: relative;
}
.AutomationBrieflyMenuBar{
position: relative;
top: 8%;
left: 2%;
width: 350px;
}
.AutomationSpecificItems{
width: 100%;
height: 90px;
background-image: url('../../imgs/changkuang1.png');
background-size: 100% 100%;
}
</style>
\ No newline at end of file
src/views/environment/nowData.vue
View file @ 2c6c852b
<template>
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">环境监测实时数据查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<span>环境在线监测实时数据</span>
<template>
<el-select v-model="feijishebei.value" placeholder="请选择风机设备">
<el-option
v-for="item in feijishebei.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-select v-model="jiancexiang.value" placeholder="请选择监测项">
<el-option
v-for="item in jiancexiang.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-date-picker
v-model="selectDate1.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<div style="margin:0px 20px;">
<template>
<el-date-picker
v-model="selectDate2.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<el-button type="primary" icon="el-icon-upload2" @click="daochu()">导出</el-button>
<el-button icon="el-icon-printer" @click="dayin()">打印</el-button>
</div>
</div>
<div class="AuHiBottom">
<div style="margin-bottom:20px;display: flex;justify-content: space-between;">
<div style="font-size:20px;font-weight:600;">{{bottomTitle}}</div>
<el-button type="primary" round size="small" @click="switchBtn1()">{{switchBtn}}</el-button>
</div>
<div v-show="'趋势图' == switchBtn">
<template>
<el-table :data="automatedReportData" height="700" border style="width: 100%" :row-style="tableRowStyle">
<el-table-column prop="equipment" label="产品设备" align="center"></el-table-column>
<el-table-column prop="name" label="指标名称" align="center"></el-table-column>
<el-table-column prop="numerical" label="数值" align="center"></el-table-column>
<el-table-column prop="alarmLevel" label="报警级别" align="center"></el-table-column>
<el-table-column prop="time" label="时间" align="center"></el-table-column>
<el-table-column prop="status" label="处理状态" align="center"></el-table-column>
</el-table>
</template>
</div>
<div id="sensor1" v-show="'表格图' == switchBtn" style="width:1500px;height:700px;"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
bottomTitle:"实时数据列表",
switchBtn:"趋势图",
feijishebei:{
options: [{
value: '1号风机设备',
label: '1号风机设备'
}, {
value: '2号风机设备',
label: '2号风机设备'
}, {
value: '3号风机设备',
label: '3号风机设备'
}, {
value: '4号风机设备',
label: '4号风机设备'
}, {
value: '5号风机设备',
label: '5号风机设备'
}],
value: ''
},
jiancexiang:{
options: [{
value: '选项1',
label: '111'
}, {
value: '选项2',
label: '222'
}, {
value: '选项3',
label: '333'
}, {
value: '选项4',
label: '444'
}, {
value: '选项5',
label: '555'
}],
value: ''
},
selectDate1:{
value:""
},
selectDate2:{
value:""
},
automatedReportData:[{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
}],
}
},
mounted(){
const that = this;
var myChart1 = echarts.init(document.querySelector('#sensor1'));
var option1 = {
legend: {
data: ['温数据', '警戒线'],
y:'bottom',
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号',
'11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号',
'21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号', '29号', '30号', '31号'
],
},
yAxis: {
type: 'value',
min:0,
max:250,
splitNumber : 20,
splitLine:{
show:true,
},
name:"高度(米)",
},
series: [{
name:"温数据",
data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
52, 58, 78, 68, 58, 42, 10, 5, 28, 58,
200, 100, 150, 85, 153, 186, 196, 120, 36, 14, 100,
],
type: 'line',
areaStyle: {},
smooth: true
},{
name:"警戒线",
data: [240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
240, 240, 240, 240, 240, 240, 240, 240, 240, 240, 240,
],
type: 'line',
itemStyle: {
normal: {
color: "red", //折线点的颜色
lineStyle: {
color: "red" //折线的颜色
}
}
},
},]
};
option1 && myChart1.setOption(option1);
},
methods:{
switchBtn1(){
if(this.switchBtn == "趋势图"){
this.switchBtn = "表格图";
}else{
this.switchBtn = "趋势图";
}
},
tableRowStyle({row, rowIndex}) {
// if (row.name == "王小虎") {
// return 'background: rgb(255,232,232);';
// }
},
daochu(){
//获取表格
var exportFileContent = document.querySelector(".el-table").outerHTML;
//设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
//exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
//var link = "data:"+MIMEType+";base64," + exportFileContent;
//使用Blob
var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"}); //解决中文乱码问题
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
//设置链接
var link = window.URL.createObjectURL(blob);
var a = document.createElement("a"); //创建a标签
a.download = "生产自动化系统实时数据表.xls"; //设置被下载的超链接目标（文件名）
a.href = link; //设置a标签的链接
document.body.appendChild(a); //a标签添加到页面
a.click(); //设置a标签触发单击事件
document.body.removeChild(a); //移除a标签
},
dayin(){
var tableToPrint = document.querySelector(".el-table");//将要被打印的表格
var newWin= window.open("");//新打开一个空窗口
newWin.document.write(tableToPrint.outerHTML);//将表格添加进新的窗口
newWin.document.close();//在IE浏览器中使用必须添加这一句
newWin.focus();//在IE浏览器中使用必须添加这一句
newWin.print();//打印
newWin.close();//关闭窗口
},
}
}
</script>
<style>
<style scoped>
.AuHiViewBody{
width: 100%;
height:100%;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
height: 110px;
background-color: white;
border-radius: 10px;
padding: 18px 20px 0px ;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 810px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style>
\ No newline at end of file
src/views/personnelPositioning/alarm.vue
View file @ 2c6c852b
......@@ -2,7 +2,7 @@
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="font-size:20px;font-weight:600;">人员定位报警记录查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
......
src/views/personnelPositioning/histroyData.vue
View file @ 2c6c852b
......@@ -2,7 +2,7 @@
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="font-size:20px;font-weight:600;">人员定位历史数据查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
......
src/views/personnelPositioning/nowData.vue
View file @ 2c6c852b
......@@ -2,7 +2,7 @@
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="font-size:20px;font-weight:600;">人员定位实时数据查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
......
src/views/productionAutomation/AutomatedReport.vue
View file @ 2c6c852b
......@@ -2,7 +2,7 @@
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="font-size:20px;font-weight:600;">生产报表查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
......
src/views/slope/vertical.vue
View file @ 2c6c852b
......@@ -47,55 +47,36 @@ export default {
var myChart1 = echarts.init(document.querySelector('#sensor1'));
var option1 = {
title: {
text: '坝体表面位移0-7传感器位置变化量',
text: '传感器坝体表面位移0-7',
left:"center",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['坝体表面位移0-7(左右)', '坝体表面位移0-7(前后)', '橙色警戒线', '红色警戒线'],
data: ['坝体表面位移0-7(沉降大小0.01毫米)'],
y:'bottom',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitLine:{
show:true
}
data: ['', '', '', '', '', '', '','', '', '', '', '', '']
},
yAxis: {
type: 'value',
name:"毫米",
max:40,
min:-10,
min:0,
max:25,
splitNumber : 5,
splitLine:{
show:true,
}
},
series: [
{
name: '坝体表面位移0-7(左右)',
type: 'line',
data: [0, 0, 0, 0, 0, 0, 0]
},
{
name: '坝体表面位移0-7(前后)',
type: 'line',
data: [1, 1, 1, 1, 1, 1, 1]
name:"高度(米)",
},
{
name: '橙色警戒线',
type: 'line',
data: [25, 25, 25, 25, 25, 25, 25]
},
{
name: '红色警戒线',
type: 'line',
data: [30, 30, 30, 30, 30, 30, 30]
},
]
series: [{
name:"坝体表面位移0-7(沉降大小0.01毫米)",
data: [0, 0, 0, 0, 0, 5, 7, 9, 12, 15, 17, 19, 19],
type: 'line'
}]
};
option1 && myChart1.setOption(option1);
var myChart2 = echarts.init(document.querySelector('#sensor2'));
......@@ -155,55 +136,36 @@ export default {
var myChart3 = echarts.init(document.querySelector('#sensor3'));
var option3 = {
title: {
text: '坝体表面位移0-7传感器位置变化量',
text: '传感器坝体表面位移0-7',
left:"center",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['坝体表面位移0-7(左右)', '坝体表面位移0-7(前后)', '橙色警戒线', '红色警戒线'],
data: ['坝体表面位移0-7(沉降大小0.01毫米)'],
y:'bottom',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitLine:{
show:true
}
data: ['', '', '', '', '', '', '','', '', '', '', '', '']
},
yAxis: {
type: 'value',
name:"毫米",
max:40,
min:-10,
min:0,
max:25,
splitNumber : 5,
splitLine:{
show:true,
}
},
series: [
{
name: '坝体表面位移0-7(左右)',
type: 'line',
data: [0, 0, 0, 0, 0, 0, 0]
},
{
name: '坝体表面位移0-7(前后)',
type: 'line',
data: [1, 1, 1, 1, 1, 1, 1]
name:"高度(米)",
},
{
name: '橙色警戒线',
type: 'line',
data: [25, 25, 25, 25, 25, 25, 25]
},
{
name: '红色警戒线',
type: 'line',
data: [30, 30, 30, 30, 30, 30, 30]
},
]
series: [{
name:"坝体表面位移0-7(沉降大小0.01毫米)",
data: [0, 0, 0, 0, 0, 5, 7, 9, 12, 15, 17, 19, 19],
type: 'line'
}]
};
option3 && myChart3.setOption(option3);
var myChart4 = echarts.init(document.querySelector('#sensor4'));
......
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