392 lines
9.4 KiB
Vue
392 lines
9.4 KiB
Vue
<!--峰煤监控系统-->
|
||
<template>
|
||
<new-bg>
|
||
<div class="center-panel">
|
||
<Map type="middle" @pointClick="pointClick" />
|
||
</div>
|
||
<flex-col class="main">
|
||
<system-title/>
|
||
<ModuleContent none-event padding="0 20px 20px">
|
||
<BFC>
|
||
<flex-col slot="left" width="412">
|
||
<web2-title>环境治理</web2-title>
|
||
<ModuleContent padding="20px 0" height="218">
|
||
<div class="video"></div>
|
||
</ModuleContent>
|
||
<ModuleContent2 border bg bg-color padding="0 20px 20px">
|
||
<flex-col>
|
||
<web3-title>视频列表</web3-title>
|
||
<ModuleContent padding="0" height="160"></ModuleContent>
|
||
<web3-title>日志信息</web3-title>
|
||
<ModuleContent padding="0"></ModuleContent>
|
||
</flex-col>
|
||
</ModuleContent2>
|
||
</flex-col>
|
||
<flex-col slot="right" width="412">
|
||
<ModuleContent2 border bg bg-color padding="0 20px 20px">
|
||
<web3-title>雾炮</web3-title>
|
||
</ModuleContent2>
|
||
<split height="20px"></split>
|
||
<ModuleContent2 border bg bg-color padding="0 20px 20px">
|
||
<web3-title>雾帘</web3-title>
|
||
</ModuleContent2>
|
||
<split height="20px"></split>
|
||
<ModuleContent2 border bg bg-color padding="0 20px 20px">
|
||
<web3-title>天雾</web3-title>
|
||
</ModuleContent2>
|
||
</flex-col>
|
||
<div class="center" slot="center">
|
||
<butgroup :bg="false">
|
||
<cus-button3>一号焦炭料棚</cus-button3>
|
||
<cus-button3>二号焦炭料棚</cus-button3>
|
||
<cus-button3>三号焦炭料棚</cus-button3>
|
||
<cus-button3>四号焦炭料棚</cus-button3>
|
||
<cus-button3>五号焦炭料棚</cus-button3>
|
||
</butgroup>
|
||
<ModuleContent2 border bg bg-color padding="0 20px 20px" height="301" class="real-data">
|
||
<web3-title>实时数据</web3-title>
|
||
</ModuleContent2>
|
||
</div>
|
||
</BFC>
|
||
</ModuleContent>
|
||
</flex-col>
|
||
</new-bg>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapActions, mapState} from "vuex";
|
||
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
|
||
import FlexCol from "../../components/FlexCol.vue";
|
||
import ModuleContent from "../../components/ModuleContent.vue";
|
||
import Web2Title from "../../components/smallCommon/Web2Title.vue";
|
||
import NewBg from "../../components/NewBg.vue";
|
||
import BFC from "../../components/BFC.vue";
|
||
import Butgroup from "../../components/smallCommon/butgroup.vue";
|
||
import CusButton from "../../components/smallCommon/CusButton.vue";
|
||
import Web3Title from "../../components/smallCommon/Web3Title.vue";
|
||
import CusButton2 from "../../components/smallCommon/CusButton2.vue";
|
||
import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
|
||
import CusDesc from "../../components/smallCommon/CusDesc.vue";
|
||
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
|
||
import Miaoshu from "../../components/smallCommon/miaoshu.vue";
|
||
import bgStr from '../../assets/images/new/矩形 17.png'
|
||
import PeakCustomTable from "@/components/peak-coal-monitoring/PeakCustomTable2";
|
||
import Split from "../../components/smallCommon/Split.vue";
|
||
import CusButton3 from "../../components/smallCommon/CusButton3.vue";
|
||
|
||
export default {
|
||
name: "PeakCoalMonitoring",
|
||
components: {
|
||
CusButton3,
|
||
Split,
|
||
Miaoshu,
|
||
ModuleContent2,
|
||
CusDesc,
|
||
Butgroup2,
|
||
CusButton2,
|
||
Web3Title,
|
||
CusButton,
|
||
Butgroup,
|
||
BFC,
|
||
Web2Title,
|
||
NewBg,
|
||
ModuleContent,
|
||
FlexCol,
|
||
SystemTitle,
|
||
PeakCustomTable
|
||
},
|
||
data() {
|
||
return {
|
||
bgStr,
|
||
tableH: 513,
|
||
|
||
dataSource: [
|
||
{
|
||
deviceName: '高炉',
|
||
errorName: '异常',
|
||
errorImg: '红灯'
|
||
},
|
||
{
|
||
deviceName: '高炉',
|
||
errorName: '异常',
|
||
errorImg: '红灯'
|
||
},
|
||
{
|
||
deviceName: '高炉',
|
||
errorName: '异常',
|
||
errorImg: '红灯'
|
||
},
|
||
{
|
||
deviceName: '高炉',
|
||
errorName: '异常',
|
||
errorImg: '红灯'
|
||
},
|
||
{
|
||
deviceName: '高炉',
|
||
errorName: '异常',
|
||
errorImg: '红灯'
|
||
},
|
||
{
|
||
deviceName: '高炉',
|
||
errorName: '异常',
|
||
errorImg: '红灯'
|
||
}
|
||
],
|
||
columnsForTable: [
|
||
{
|
||
title: '设备掉线',
|
||
dataIndex: 'deviceName',
|
||
width: '33.333%'
|
||
},
|
||
{
|
||
title: '故障异常',
|
||
dataIndex: 'errorName',
|
||
width: '33.333%'
|
||
},
|
||
{
|
||
title: '异常报警',
|
||
dataIndex: 'errorImg',
|
||
width: '33.333%'
|
||
}
|
||
],
|
||
columns: [
|
||
{
|
||
title: '排放标准',
|
||
key: 'bz',
|
||
},
|
||
{
|
||
title: 'VIN',
|
||
key: 'vin',
|
||
},
|
||
{
|
||
title: '发动机号',
|
||
key: 'fdjh',
|
||
},
|
||
{
|
||
title: '注册日期',
|
||
key: 'zcr',
|
||
}
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
title: state => state.system.title,
|
||
})
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
const win = window.top
|
||
this.$http.get('http://101.43.201.20:5000/api/Home/view').then(({data}) => {
|
||
win.document.title = data.home.title
|
||
this.setTitle(data.home.title)
|
||
this.setInfo(data)
|
||
})
|
||
|
||
if (this.$refs.module) {
|
||
const offsetHeight = this.$refs.module.$el.offsetHeight - 40
|
||
this.tableH = offsetHeight
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
...mapActions('system', ['setTitle', 'setInfo']),
|
||
/**
|
||
* 图层构造器
|
||
* @param { object } props
|
||
* @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪) zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
|
||
* @param { object } props.data 图层类型
|
||
*/
|
||
pointClick({layerType, data}) {
|
||
// todo
|
||
if (layerType == 'wz') {
|
||
this.$open(WZDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'middle',
|
||
title: '微站',
|
||
width: 1100,
|
||
onClose() {
|
||
console.log(1);
|
||
}
|
||
})
|
||
} else if (layerType === 'sdjcy') {
|
||
this.$open(SDJCYDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'custommiddle',
|
||
title: '深度检测仪',
|
||
width: 1100,
|
||
onClose() {
|
||
console.log(1);
|
||
}
|
||
})
|
||
} else if (layerType === 'zkz') {
|
||
this.$open(ZKZDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'custommiddle',
|
||
title: '质控站',
|
||
width: 1100,
|
||
onClose() {
|
||
console.log(1);
|
||
}
|
||
})
|
||
} else if (layerType === 'gbz') {
|
||
this.$open(GBZDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'custommiddle',
|
||
title: '国标站',
|
||
width: 1100,
|
||
onClose() {
|
||
console.log(1);
|
||
}
|
||
})
|
||
} else if (layerType === 'cems') {
|
||
this.$open(CEMSDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'custommiddle',
|
||
title: 'CEMS',
|
||
width: 1100,
|
||
onClose() {
|
||
console.log(1);
|
||
}
|
||
})
|
||
} else if (layerType === 'jkd') {
|
||
this.$open(pointDialog, {
|
||
type: 'middle'
|
||
}, {
|
||
screenType: 'custommiddle',
|
||
title: '监控点',
|
||
width: 1100,
|
||
onClose() {
|
||
console.log(1);
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
body, html, #__nuxt, #__layout {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list-enter-active, .list-leave-active {
|
||
transition: all 0.5s;
|
||
}
|
||
|
||
.list-enter, .list-leave-to
|
||
/* .list-leave-active for below version 2.1.8 */
|
||
{
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="less">
|
||
@import "../../assets/styles/mixin";
|
||
.center {
|
||
padding: 0 20px;
|
||
position: relative;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
.real-data {
|
||
pointer-events: auto;
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: calc(100% - 40px);
|
||
}
|
||
}
|
||
.center-panel{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
.main {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
}
|
||
.sou-suo-kuang {
|
||
height: 100%;
|
||
width: 580px;
|
||
box-sizing: border-box;
|
||
padding: 0 32px 0;
|
||
|
||
|
||
.search {
|
||
/deep/ .ant-input {
|
||
color: #fff;
|
||
background: rgba(5, 38, 93, 1);
|
||
border: 1.28px solid rgba(35, 209, 232, 1);
|
||
&:hover {
|
||
color: #fff;
|
||
background: rgba(5, 38, 93, 1);
|
||
border: 1.28px solid rgba(35, 209, 232, 1);
|
||
|
||
}
|
||
}
|
||
width: 100%;
|
||
height: 90px;
|
||
box-sizing: border-box;
|
||
padding: 28px 16px;
|
||
|
||
background: rgba(24, 131, 201, 0.2);
|
||
|
||
|
||
/** 文本1 */
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 23.17px;
|
||
color: rgba(255, 255, 255, 1);
|
||
text-align: left;
|
||
vertical-align: top;
|
||
line-height: 32px;
|
||
|
||
.input {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.liebiao {
|
||
height: 100%;
|
||
|
||
}
|
||
|
||
.car-preview {
|
||
width: 100%;
|
||
height: 260px;
|
||
}
|
||
|
||
.desc {
|
||
background: rgba(24, 131, 201, 0.2);
|
||
border: 1px solid rgba(15, 81, 122, 1);
|
||
}
|
||
.table-content{
|
||
padding-top: 20px;
|
||
flex: 1;
|
||
height: 100%;
|
||
}
|
||
|
||
.video {
|
||
height: 178px;
|
||
}
|
||
|
||
</style>
|
||
|