Skip to content

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

边坡监测系统各页面编写

parent 8f8316a8
Hide whitespace changes
Inline Side-by-side
Showing with 2573 additions and 63 deletions
src/router/index.js
View file @ 2d41d44f
......@@ -7,7 +7,8 @@ import homepage from "../views/homepage.vue";
//矿区监控
import mineMonitoring from '../views/mineMonitoring.vue'
//视频监控
import videoSurveillance from '../views/videoSurveillance.vue'
import videoShow from '../views/videoSurveillance/videoShow.vue'
import videoSetting from '../views/videoSurveillance/videoSetting.vue'
//生产自动化系统
import AutomationHomepage from '../views/productionAutomation/AutomationHomepage.vue'
import AutomatedReport from '../views/productionAutomation/AutomatedReport.vue'
......@@ -27,6 +28,7 @@ import carPositioningHistroyData from '../views/carPositioning/histroyData.vue'
import carPositioningAlarm from '../views/carPositioning/alarm.vue'
import carPositioningEnclosure from '../views/carPositioning/enclosure.vue'
import carPositioningRegister from '../views/carPositioning/register.vue'
import carPositioningEquipment from '../views/carPositioning/equipment.vue'
//边坡在线监测
import SlopeHomePage from '../views/slope/homePage.vue'
import SlopeHorizontal from '../views/slope/horizontal.vue'
......@@ -78,8 +80,12 @@ const routes = [
},
//视频监控
{
path: '/homepage/videoSurveillance',
component: videoSurveillance
path: '/homepage/videoShow',
component: videoShow
},
{
path: '/homepage/videoSetting',
component: videoSetting
},
//生产自动化系统
{
......@@ -148,6 +154,10 @@ const routes = [
path: '/homepage/carPositioningRegister',
component: carPositioningRegister
},
{
path: '/homepage/carPositioningEquipment',
component: carPositioningEquipment
},
//边坡在线监测
{
path: '/homepage/SlopeHomePage',
......
src/views/carPositioning/alarm.vue
View file @ 2d41d44f
<template>
<div>
<span>
车辆定位系统报警历史
</span>
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<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">
<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>
</template>
<script>
export default {
data() {
return {
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 弄'
}],
}
},
methods:{
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: 750px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style>
\ No newline at end of file
src/views/carPositioning/equipment.vue 0 → 100644
View file @ 2d41d44f
<template>
<div class="AuHiViewBody">
<span style="margin-right:50px;font-size:20px;font-family: '微软雅黑';font-weight:600;">车辆设备信息表</span>
<el-button type="primary" @click="formOpen('add')">增加设备</el-button>
<div class="AuHiBottom">
<template>
<el-table :data="equipmentData" height="700" border style="width: 100%">
<el-table-column prop="gnss_id" label="出厂编号" align="center"></el-table-column>
<el-table-column prop="type" label="类别" align="center"></el-table-column>
<el-table-column prop="model" label="型号" align="center"></el-table-column>
<el-table-column prop="solution" label="解算频率" align="center"></el-table-column>
<el-table-column prop="level" label="水平位移" align="center"></el-table-column>
<el-table-column prop="vertical" label="竖向位移" align="center"></el-table-column>
<el-table-column prop="manufacturer" label="生产厂家" align="center"></el-table-column>
<el-table-column prop="antenna" label="设备天线" align="center"></el-table-column>
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button @click="formOpen('change',scope.row)" type="text">编辑</el-button>
<el-button type="text" @click="deleteFormOpen(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<el-dialog :title="formTitle" :visible.sync="formVisible" width="30%">
<el-form ref="form" :model="formData" label-width="80px">
<el-form-item label="出厂编号">
<el-input v-model="formData.gnss_id" :disabled="inpDisable"></el-input>
</el-form-item>
<el-form-item label="类别">
<template>
<el-radio v-model="formData.type" label="移动站">移动站</el-radio>
<el-radio v-model="formData.type" label="基准站">基准站</el-radio>
</template>
</el-form-item>
<el-form-item label="型号">
<el-input v-model="formData.model"></el-input>
</el-form-item>
<el-form-item label="解算频率">
<el-input v-model="formData.solution"></el-input>
</el-form-item>
<el-form-item label="水平位移">
<el-input v-model="formData.level"></el-input>
</el-form-item>
<el-form-item label="竖向位移">
<el-input v-model="formData.vertical"></el-input>
</el-form-item>
<el-form-item label="生产厂家">
<el-input v-model="formData.manufacturer"></el-input>
</el-form-item>
<el-form-item label="设备天线">
<el-input v-model="formData.antenna"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="formSave()">确 定</el-button>
<el-button @click="formcancel()">取 消</el-button>
</span>
</el-dialog>
<el-dialog title="你确定删除吗？" :visible.sync="deleteVisible" width="30%">
<el-button type="danger" @click="agreeDelete()">删除</el-button>
<el-button @click="cancelDelete()">取消</el-button>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
formTitle:"",
formType:"",
equipmentData:[{
gnss_id: '111111111',
type: '移动站',
model: '11',
solution: '454545',
level: '22米',
vertical: '33米',
manufacturer: '晶合',
antenna: '511111'
},{
gnss_id: '22222222',
type: '基准站',
model: '11',
solution: '454545',
level: '22米',
vertical: '33米',
manufacturer: '晶合',
antenna: '511111'
},{
gnss_id: '33333333',
type: '移动站',
model: '11',
solution: '454545',
level: '22米',
vertical: '33米',
manufacturer: '晶合',
antenna: '511111'
},{
gnss_id: '4444444',
type: '基准站',
model: '11',
solution: '454545',
level: '22米',
vertical: '33米',
manufacturer: '晶合',
antenna: '511111'
},{
gnss_id: '55555555',
type: '移动站',
model: '11',
solution: '454545',
level: '22米',
vertical: '33米',
manufacturer: '晶合',
antenna: '511111'
},{
gnss_id: '66666666',
type: '基准站',
model: '11',
solution: '454545',
level: '22米',
vertical: '33米',
manufacturer: '晶合',
antenna: '511111'
},{
gnss_id: '7777777',
type: '移动站',
model: '11',
solution: '454545',
level: '22米',
vertical: '33米',
manufacturer: '晶合',
antenna: '511111'
},{
gnss_id: '8888888',
type: '基准站',
model: '11',
solution: '454545',
level: '22米',
vertical: '33米',
manufacturer: '晶合',
antenna: '511111'
},{
gnss_id: '9999',
type: '移动站',
model: '11',
solution: '454545',
level: '22米',
vertical: '33米',
manufacturer: '晶合',
antenna: '511111'
},],
formVisible:false,
formData: {
gnss_id: '',
type: '移动站',
model: '',
solution: '',
level: '',
vertical: '',
manufacturer: '',
antenna:''
},
inpDisable:false,
deleteVisible:false,
}
},
methods:{
formOpen(type,row){
this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
this.formVisible = true;
this.formType = type;
if(this.formType === "add"){
this.formTitle = "增加车辆设备";
this.inpDisable = false;
}else if(this.formType === "change"){
this.formTitle = "修改车辆设备";
this.inpDisable = true;
this.formData = {...row};
}
},
formSave(){
if(this.formType === "add"){
if(this.formData.gnss_id === ""){
alert("出厂编号不得为空！");
return;
}
this.equipmentData.unshift(this.formData);
this.formVisible = false;
this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
}else if(this.formType === "change"){
const that = this;
const newData = [];
this.equipmentData.forEach(function(item){
if(item.gnss_id === that.formData.gnss_id){
newData.push(that.formData);
}else{
newData.push(item);
}
})
this.equipmentData = newData;
this.formVisible = false;
this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
}
},
formcancel(){
this.formVisible = false;
this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
},
deleteFormOpen(row){
console.log(row);
this.deleteVisible = true;
this.formData = {...row};
},
agreeDelete(){
const that = this;
const newData = [];
this.equipmentData = that.equipmentData.forEach(function(item){
if(item.gnss_id === that.formData.gnss_id){
return;
}else{
newData.push(item);
}
})
this.equipmentData = newData;
this.deleteVisible = false;
this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
},
cancelDelete(){
this.deleteVisible = false;
this.formData = {gnss_id: '',type: '移动站',model: '',solution: '',level: '',vertical: '',manufacturer: '',antenna:''};
}
}
}
</script>
<style scoped>
.AuHiViewBody{
width: 100%;
height: 100%;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
background-color: white;
border-radius: 10px;
padding: 18px 20px;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 750px;
margin-top: 20px;
}
.el-input{
width: 80%;
}
</style>
\ No newline at end of file
src/views/carPositioning/histroyData.vue
View file @ 2d41d44f
<template>
<div>
<span>
车辆定位系统历史数据
</span>
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<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">
<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>
</template>
<script>
export default {
data() {
return {
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 弄'
}],
}
},
methods:{
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: 750px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style>
\ No newline at end of file
src/views/carPositioning/nowData.vue
View file @ 2d41d44f
<template>
<div>
<span>
车辆定位系统实时数据
</span>
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<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">
<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>
</template>
<script>
export default {
data() {
return {
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 弄'
}],
}
},
methods:{
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: 750px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style>
\ No newline at end of file
src/views/carPositioning/register.vue
View file @ 2d41d44f
<template>
<div>
<span>车辆定位系统人员等级</span>
<div class="AuHiViewBody">
<span style="margin-right:50px;font-size:20px;font-family: '微软雅黑';font-weight:600;">车辆登记信息表</span>
<el-button type="primary" @click="formOpen('add')">增加车辆</el-button>
<div class="AuHiBottom">
<template>
<el-table :data="carRegistrationData" height="700" border style="width: 100%">
<el-table-column prop="car_id" label="车牌号" align="center"></el-table-column>
<el-table-column prop="type" label="车类型" align="center"></el-table-column>
<el-table-column prop="name" label="负责人" align="center"></el-table-column>
<el-table-column prop="gnss_id" label="gnss编号" align="center"></el-table-column>
<el-table-column prop="note" label="备注" align="center"></el-table-column>
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button @click="formOpen('change',scope.row)" type="text">编辑</el-button>
<el-button type="text" @click="deleteFormOpen(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<el-dialog :title="formTitle" :visible.sync="formVisible" width="30%">
<el-form ref="form" :model="formData" label-width="80px">
<el-form-item label="车牌号">
<el-input v-model="formData.car_id" :disabled="inpDisable"></el-input>
</el-form-item>
<el-form-item label="车类型">
<el-input v-model="formData.type"></el-input>
</el-form-item>
<el-form-item label="负责人">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="gnss编号">
<el-input v-model="formData.gnss_id"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="formData.note"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="formSave()">确 定</el-button>
<el-button @click="formcancel()">取 消</el-button>
</span>
</el-dialog>
<el-dialog title="你确定删除吗？" :visible.sync="deleteVisible" width="30%">
<el-button type="danger" @click="agreeDelete()">删除</el-button>
<el-button @click="cancelDelete()">取消</el-button>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
formTitle:"",
formType:"",
carRegistrationData:[{
car_id: '鲁A45454',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '无',
},{
car_id: '鲁A48888',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '无',
},{
car_id: '鲁A66666',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '无',
},{
car_id: '鲁A11111',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '无',
},{
car_id: '鲁A77777',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '无',
},{
car_id: '鲁A0000',
type: '马自达',
name: '王一',
gnss_id: '19919191919',
note: '无',
},],
formVisible:false,
formData: {
car_id: '',
type: '',
name: '',
gnss_id: '',
note: '',
},
inpDisable:false,
deleteVisible:false,
}
},
methods:{
formOpen(type,row){
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
this.formVisible = true;
this.formType = type;
if(this.formType === "add"){
this.formTitle = "增加车辆";
this.inpDisable = false;
}else if(this.formType === "change"){
this.formTitle = "修改车辆";
this.inpDisable = true;
this.formData = {...row};
}
},
formSave(){
if(this.formType === "add"){
if(this.formData.name === ""){
alert("车牌号不得为空！");
return;
}
this.carRegistrationData.unshift(this.formData);
this.formVisible = false;
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
}else if(this.formType === "change"){
const that = this;
const newData = [];
this.carRegistrationData.forEach(function(item){
if(item.car_id === that.formData.car_id){
newData.push(that.formData);
}else{
newData.push(item);
}
})
this.carRegistrationData = newData;
this.formVisible = false;
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
}
},
formcancel(){
this.formVisible = false;
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
},
deleteFormOpen(row){
console.log(row);
this.deleteVisible = true;
this.formData = {...row};
},
agreeDelete(){
const that = this;
const newData = [];
this.carRegistrationData = that.carRegistrationData.forEach(function(item){
if(item.car_id === that.formData.car_id){
return;
}else{
newData.push(item);
}
})
this.carRegistrationData = newData;
this.deleteVisible = false;
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
},
cancelDelete(){
this.deleteVisible = false;
this.formData = {car_id: '',type: '',name: '',gnss_id: '',note: '',};
}
}
}
</script>
<style>
<style scoped>
.AuHiViewBody{
width: 100%;
height: 100%;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
background-color: white;
border-radius: 10px;
padding: 18px 20px;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 750px;
margin-top: 20px;
}
.el-input{
width: 80%;
}
</style>
\ No newline at end of file
src/views/homepage.vue
View file @ 2d41d44f
......@@ -23,10 +23,14 @@
<i class="iconfont icon-zhuye" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span slot="title">矿区监控</span>
</el-menu-item>
<el-menu-item index="/homepage/videoSurveillance">
<el-submenu index="shipinjiankong">
<template slot="title">
<i class="iconfont icon-diannao" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span slot="title">视频监控</span>
</el-menu-item>
<span>视频监控</span>
</template>
<el-menu-item index="/homepage/videoShow">监控展示</el-menu-item>
<el-menu-item index="/homepage/videoSetting">监控设置</el-menu-item>
</el-submenu>
<el-submenu index="shengchanzidonghua">
<template slot="title">
<i class="iconfont icon-wenjianjia" style="margin-right:10px;color:rgb(3,156,205);"></i>
......@@ -60,6 +64,7 @@
<el-menu-item index="/homepage/carPositioningAlarm">报警历史</el-menu-item>
<el-menu-item index="/homepage/carPositioningEnclosure">围栏设定</el-menu-item>
<el-menu-item index="/homepage/carPositioningRegister">车辆登记</el-menu-item>
<el-menu-item index="/homepage/carPositioningEquipment">车辆设备</el-menu-item>
</el-submenu>
<el-submenu index="bianpo">
<template slot="title">
......
src/views/mineMonitoring.vue
View file @ 2d41d44f
<template>
<div class="allBox">
<!-- 中间球 -->
<div></div>
<!-- 智能派单系统 -->
<div class="intelligentDispatch">
......@@ -131,7 +133,7 @@ export default {
padding: 0;
}
.allBox{
background-image: url("../imgs/5dd5481bb9102.png");
background-image: url("../imgs/BK1.png");
width: 100%;
height: 100%;
position: relative;
......
src/views/personnelPositioning/register.vue
View file @ 2d41d44f
<template>
<div class="AuHiViewBody">
<span style="margin-right:50px;font-size:20px;font-family: '微软雅黑';font-weight:600;">人员登记信息表</span>
<el-button type="primary" @click="formOpen('add')">增加人员</el-button>
<div class="AuHiBottom">
......@@ -151,6 +152,7 @@ export default {
},
methods:{
formOpen(type,row){
this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
this.formVisible = true;
this.formType = type;
if(this.formType === "add"){
......
src/views/slope/alarm.vue
View file @ 2d41d44f
<template>
<div>
<span>边坡在线监测报警记录</span>
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">边坡监测报警记录查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<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">
<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>
</template>
<script>
export default {
data() {
return {
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 弄'
}],
}
},
methods:{
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: 750px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style>
\ No newline at end of file
src/views/slope/earlyWarning.vue
View file @ 2d41d44f
<template>
<div>
<span>边坡在线监测预警级别设置</span>
<div class="AuHiViewBody">
<span style="margin-right:50px;font-size:20px;font-family: '微软雅黑';font-weight:600;">预警级别设置</span>
<el-button type="primary" @click="formOpen('add')">增加预警</el-button>
<div class="AuHiBottom">
<template>
<el-table :data="warningData" height="700" border style="width: 100%">
<el-table-column prop="type" label="类型" align="center"></el-table-column>
<el-table-column prop="yellow" label="黄色预警" align="center"></el-table-column>
<el-table-column prop="orange" label="橙色预警" align="center"></el-table-column>
<el-table-column prop="red" label="红色预警" align="center"></el-table-column>
<el-table-column label="操作" width="250" align="center">
<template slot-scope="scope">
<el-button @click="formOpen('change',scope.row)" type="text">更改设置</el-button>
<el-button type="text" @click="deleteFormOpen(scope.row)">解除警报</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<el-dialog :title="formTitle" :visible.sync="formVisible" width="30%">
<el-form ref="form" :model="formData" label-width="80px">
<el-form-item label="类型">
<el-input v-model="formData.type" :disabled="inpDisable"></el-input>
</el-form-item>
<el-form-item label="黄色预警">
<el-input v-model="formData.yellow"></el-input>
</el-form-item>
<el-form-item label="橙色预警">
<el-input v-model="formData.orange"></el-input>
</el-form-item>
<el-form-item label="红色预警">
<el-input v-model="formData.red"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="formSave()">确 定</el-button>
<el-button @click="formcancel()">取 消</el-button>
</span>
</el-dialog>
<el-dialog title="你确定解除预警吗？" :visible.sync="deleteVisible" width="30%">
<el-button type="danger" @click="agreeDelete()">解除</el-button>
<el-button @click="cancelDelete()">取消</el-button>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
formTitle:"",
formType:"",
warningData:[{
type: '雨量计',
yellow: '20',
orange: '20',
red: '20',
}],
formVisible:false,
formData: {
type: '',
yellow: '',
orange: '',
red: '',
},
inpDisable:false,
deleteVisible:false,
}
},
methods:{
formOpen(type,row){
this.formData = {type: '',yellow: '',orange: '',red: ''};
this.formVisible = true;
this.formType = type;
if(this.formType === "add"){
this.formTitle = "增加预警信息";
this.inpDisable = false;
}else if(this.formType === "change"){
this.formTitle = "修改预警信息";
this.inpDisable = true;
this.formData = {...row};
}
},
formSave(){
if(this.formType === "add"){
if(this.formData.type === ""){
alert("类型不得为空！");
return;
}
this.warningData.unshift(this.formData);
this.formVisible = false;
this.formData = {type: '',yellow: '',orange: '',red: ''};
}else if(this.formType === "change"){
const that = this;
const newData = [];
this.warningData.forEach(function(item){
if(item.type === that.formData.type){
newData.push(that.formData);
}else{
newData.push(item);
}
})
this.warningData = newData;
this.formVisible = false;
this.formData = {type: '',yellow: '',orange: '',red: ''};
}
},
formcancel(){
this.formVisible = false;
this.formData = {type: '',yellow: '',orange: '',red: ''};
},
deleteFormOpen(row){
console.log(row);
this.deleteVisible = true;
this.formData = {...row};
},
agreeDelete(){
const that = this;
const newData = [];
this.warningData = that.warningData.forEach(function(item){
if(item.type === that.formData.type){
return;
}else{
newData.push(item);
}
})
this.warningData = newData;
this.deleteVisible = false;
this.formData = {type: '',yellow: '',orange: '',red: ''};
},
cancelDelete(){
this.deleteVisible = false;
this.formData = {type: '',yellow: '',orange: '',red: ''};
}
}
}
</script>
<style>
<style scoped>
.AuHiViewBody{
width: 100%;
height: 100%;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
background-color: white;
border-radius: 10px;
padding: 18px 20px;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 750px;
margin-top: 20px;
}
.el-input{
width: 80%;
}
</style>
\ No newline at end of file
src/views/slope/historyData.vue
View file @ 2d41d44f
<template>
<div>
<span>边坡在线监测历史数据</span>
<div class="AuHiViewBody">
<div class="AuHiTop">
<div style="font-size:20px;font-weight:600;">边坡监测历史数据查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<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">
<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>
</template>
<script>
export default {
data() {
return {
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 弄'
}],
}
},
methods:{
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: 750px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style>
\ No newline at end of file
src/views/slope/homePage.vue
View file @ 2d41d44f
<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:"正常"},
{name:"坝体表面竖向位移监测",context:"正常"},
{name:"降雨量监测",context:"正常"},
{name:"报警值",context:"100"},
],
}
}
}
</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/slope/horizontal.vue
View file @ 2d41d44f
<template>
<div>
<span>边坡在线监测坝体表面水平位移</span>
<div class="viewBody">
<div class="topBox">
<div style="color:#00164D;font-weight:600;">|坝体表面水平位移鸟瞰图</div>
<div style="display:flex;justify-content: space-between;">
<img src="../../imgs/batitu.png" width="50%">
<div style="width:40%;">
<div v-for="(item,index) in aerialViewData" :key="index" style="margin-bottom:20px;color:#1B3D5D;">
<span class="iconfont icon-dian"></span>
<span>{{item.name}}：{{item.about}}</span>
<div style="margin-left:17px;">{{item.coordinate}}</div>
</div>
</div>
</div>
</div>
<div class="bottomBox">
<div style="color:#00164D;font-weight:600;">|{{sensorID}}</div>
<div style="display:flex;justify-content: space-between;margin-top:20px;">
<div id="sensor1"></div>
<div id="sensor2"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
aerialViewData:[{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
},{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
},{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
},{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
}],
sensorID:"传感器编号--坝体表面位移0-7",
}
},
mounted(){
const that = this;
var myChart1 = echarts.init(document.querySelector('#sensor1'));
var option1 = {
title: {
text: '坝体表面位移0-7传感器位置变化量',
left:"center",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['坝体表面位移0-7(左右)', '坝体表面位移0-7(前后)', '橙色警戒线', '红色警戒线'],
y:'bottom',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitLine:{
show:true
}
},
yAxis: {
type: 'value',
name:"毫米",
max:40,
min:-10,
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: '橙色警戒线',
type: 'line',
data: [25, 25, 25, 25, 25, 25, 25]
},
{
name: '红色警戒线',
type: 'line',
data: [30, 30, 30, 30, 30, 30, 30]
},
]
};
option1 && myChart1.setOption(option1);
var myChart2 = echarts.init(document.querySelector('#sensor2'));
var option2 = {
title: {
text: '坝体表面位移0-8传感器位置变化量',
left:"center",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['坝体表面位移0-7(左右)', '坝体表面位移0-7(前后)', '橙色警戒线', '红色警戒线'],
y:'bottom',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitLine:{
show:true
}
},
yAxis: {
type: 'value',
name:"毫米",
max:40,
min:-10,
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: '橙色警戒线',
type: 'line',
data: [25, 25, 25, 25, 25, 25, 25]
},
{
name: '红色警戒线',
type: 'line',
data: [30, 30, 30, 30, 30, 30, 30]
},
]
};
option2 && myChart2.setOption(option2);
}
}
</script>
<style>
</script>
<style scoped>
*{
margin: 0;
padding: 0;
}
.viewBody{
overflow: auto;
height: 100%;
width: 100%;
background-color: rgb(245,246,251);
padding: 20px;
box-sizing: border-box;
}
.viewBody::-webkit-scrollbar {
display: none;
}
.topBox{
width: 100%;
height: 450px;
background-color: white;
padding: 5px 15px 0px;
box-sizing: border-box;
margin-bottom: 30px;
}
.bottomBox{
width: 100%;
height: 450px;
background-color: white;
padding: 5px 15px 0px;
box-sizing: border-box;
}
#sensor1{
width: 750px;
height: 370px;
}
#sensor2{
width: 750px;
height: 370px;
}
</style>
\ No newline at end of file
src/views/slope/rainfall.vue
View file @ 2d41d44f
<template>
<div>
<span>边坡在线监测降雨量</span>
<div class="viewBody">
<div class="topBox">
<div style="color:#00164D;font-weight:600;">|降雨量监测</div>
<div style="display:flex;justify-content: space-between;">
<div style="margin-left:50px;">
<img src="../../imgs/jiangyuliang.png" width="300">
<div style="padding: 10px;border: 1px solid #0C1D4A;font-size:20px;color:#0E2256;font-weight: 600;border-radius: 5px;text-align: center;">当前降雨量：{{rainfallNum}}</div>
</div>
<div id="sensor1"></div>
</div>
</div>
<div class="bottomBox">
<div style="display:flex;justify-content: space-between;margin-top:20px;">
<div id="sensor2"></div>
<div>
<div style="color:#00164D;font-weight:600;margin-bottom:10px;width: 800px;text-align: center;">降雨量详细记录</div>
<template>
<el-table :data="rainfallDetailsData" border style="width: 801px" height="300">
<el-table-column prop="time" label="时间" width="400" align="center"></el-table-column>
<el-table-column prop="rainfall" label="降雨量" width="400" align="center"></el-table-column>
</el-table>
</template>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
aerialViewData:[{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
},{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
},{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
},{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
}],
sensorID:"传感器编号--坝体表面位移0-7",
rainfallNum:"100mm",
rainfallDetailsData:[{
time: '2016-05-02',
rainfall: 'dddd'
}, {
time: '2016-05-04',
rainfall: '王小虎',
}, {
time: '2016-05-01',
rainfall: '王小虎',
}, {
time: '2016-05-03',
rainfall: '王小虎',
}]
}
},
mounted(){
const that = this;
var myChart1 = echarts.init(document.querySelector('#sensor1'));
var option1 = {
title: {
text: '降雨量过去24小时',
left:"center",
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00','14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
},
yAxis: {
type: 'value',
min:0,
max:100,
splitNumber : 10,
splitLine:{
show:true,
},
name:"高度(米)",
},
series: [{
data: [50, 23, 24, 21, 13, 14, 26, 50, 23, 24, 21, 13, 14],
type: 'line'
}]
};
option1 && myChart1.setOption(option1);
var myChart2 = echarts.init(document.querySelector('#sensor2'));
var option2 = {
title: {
text: '降雨量当月累计',
left:"center",
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
name:"单位(mm)",
min:0,
max:8,
splitNumber : 4,
},
series: [{
data: [1, 2, 1, 8, 7, 5, 3],
type: 'bar',
barWidth: 20, // 柱图宽度
barMaxWidth: 20, // 最大宽度
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#1268f3" // 0% 处的颜色
}, {
offset: 0.6,
color: "#08a4fa" // 60% 处的颜色
}, {
offset: 1,
color: "#01ccfe" // 100% 处的颜色
}], false)
}
},
}]
};
option2 && myChart2.setOption(option2);
}
}
</script>
<style>
</script>
<style scoped>
*{
margin: 0;
padding: 0;
}
.viewBody{
overflow: auto;
height: 100%;
width: 100%;
background-color: rgb(245,246,251);
padding: 20px;
box-sizing: border-box;
}
.viewBody::-webkit-scrollbar {
display: none;
}
.topBox{
width: 100%;
height: 420px;
background-color: white;
padding: 5px 15px 0px;
box-sizing: border-box;
margin-bottom: 30px;
}
.bottomBox{
width: 100%;
height: 420px;
background-color: white;
padding: 5px 15px 0px;
box-sizing: border-box;
}
#sensor1{
width: 1200px;
height: 400px;
}
#sensor2{
width: 750px;
height: 370px;
}
</style>
\ No newline at end of file
src/views/slope/vertical.vue
View file @ 2d41d44f
<template>
<div>
<span>边坡在线监测坝体表面竖向位移</span>
<div class="viewBody">
<div class="topBox">
<div style="color:#00164D;font-weight:600;margin-bottom:20px;">|{{sensorID}}</div>
<div style="display:flex;justify-content: space-between;">
<div id="sensor1"></div>
<div id="sensor2"></div>
</div>
</div>
<div class="bottomBox">
<div style="color:#00164D;font-weight:600;margin-bottom:20px;">|{{sensorID}}</div>
<div style="display:flex;justify-content: space-between;margin-top:20px;">
<div id="sensor3"></div>
<div id="sensor4"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
aerialViewData:[{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
},{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
},{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
},{
name:"坝体表面位移10-4",
about:"左右(-0.00398) 前后(-0.0069)",
coordinate:"X:3330231654.799 Y:1254684586 Z:254687",
}],
sensorID:"传感器编号--坝体表面位移0-7",
}
},
mounted(){
const that = this;
var myChart1 = echarts.init(document.querySelector('#sensor1'));
var option1 = {
title: {
text: '坝体表面位移0-7传感器位置变化量',
left:"center",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['坝体表面位移0-7(左右)', '坝体表面位移0-7(前后)', '橙色警戒线', '红色警戒线'],
y:'bottom',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitLine:{
show:true
}
},
yAxis: {
type: 'value',
name:"毫米",
max:40,
min:-10,
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: '橙色警戒线',
type: 'line',
data: [25, 25, 25, 25, 25, 25, 25]
},
{
name: '红色警戒线',
type: 'line',
data: [30, 30, 30, 30, 30, 30, 30]
},
]
};
option1 && myChart1.setOption(option1);
var myChart2 = echarts.init(document.querySelector('#sensor2'));
var option2 = {
title: {
text: '坝体表面位移0-8传感器位置变化量',
left:"center",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['坝体表面位移0-7(左右)', '坝体表面位移0-7(前后)', '橙色警戒线', '红色警戒线'],
y:'bottom',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitLine:{
show:true
}
},
yAxis: {
type: 'value',
name:"毫米",
max:40,
min:-10,
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: '橙色警戒线',
type: 'line',
data: [25, 25, 25, 25, 25, 25, 25]
},
{
name: '红色警戒线',
type: 'line',
data: [30, 30, 30, 30, 30, 30, 30]
},
]
};
option2 && myChart2.setOption(option2);
var myChart3 = echarts.init(document.querySelector('#sensor3'));
var option3 = {
title: {
text: '坝体表面位移0-7传感器位置变化量',
left:"center",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['坝体表面位移0-7(左右)', '坝体表面位移0-7(前后)', '橙色警戒线', '红色警戒线'],
y:'bottom',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitLine:{
show:true
}
},
yAxis: {
type: 'value',
name:"毫米",
max:40,
min:-10,
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: '橙色警戒线',
type: 'line',
data: [25, 25, 25, 25, 25, 25, 25]
},
{
name: '红色警戒线',
type: 'line',
data: [30, 30, 30, 30, 30, 30, 30]
},
]
};
option3 && myChart3.setOption(option3);
var myChart4 = echarts.init(document.querySelector('#sensor4'));
var option4 = {
title: {
text: '坝体表面位移0-8传感器位置变化量',
left:"center",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['坝体表面位移0-7(左右)', '坝体表面位移0-7(前后)', '橙色警戒线', '红色警戒线'],
y:'bottom',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitLine:{
show:true
}
},
yAxis: {
type: 'value',
name:"毫米",
max:40,
min:-10,
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: '橙色警戒线',
type: 'line',
data: [25, 25, 25, 25, 25, 25, 25]
},
{
name: '红色警戒线',
type: 'line',
data: [30, 30, 30, 30, 30, 30, 30]
},
]
};
option4 && myChart4.setOption(option4);
}
}
</script>
<style>
</script>
<style scoped>
*{
margin: 0;
padding: 0;
}
.viewBody{
overflow: auto;
height: 100%;
width: 100%;
background-color: rgb(245,246,251);
padding: 20px;
box-sizing: border-box;
}
.viewBody::-webkit-scrollbar {
display: none;
}
.topBox{
width: 100%;
height: 450px;
background-color: white;
padding: 5px 15px 0px;
box-sizing: border-box;
margin-bottom: 30px;
}
.bottomBox{
width: 100%;
height: 450px;
background-color: white;
padding: 5px 15px 0px;
box-sizing: border-box;
}
#sensor1{
width: 750px;
height: 370px;
}
#sensor2{
width: 750px;
height: 370px;
}
#sensor3{
width: 750px;
height: 370px;
}
#sensor4{
width: 750px;
height: 370px;
}
</style>
\ No newline at end of file
src/views/videoSurveillance/videoSetting.vue 0 → 100644
View file @ 2d41d44f
<template>
<div>
<span>监控设置</span>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment