439 lines
12 KiB
Vue
439 lines
12 KiB
Vue
|
<!--峰煤监控系统-->
|
|||
|
|
<template>
|
|||
|
|
<new-bg>
|
|||
|
|
<flex-col>
|
|||
|
|
<system-title/>
|
|||
|
|
<ModuleContent padding="20px">
|
|||
|
|
<flex-col>
|
|||
|
|
<web2-title>清洁运输</web2-title>
|
|||
|
|
<ModuleContent padding="0 20px 20px">
|
|||
|
|
<BFC>
|
|||
|
|
<div class="sou-suo-kuang" slot="right">
|
|||
|
|
<ModuleContent2 bg padding="20px">
|
|||
|
|
<flex-col>
|
|||
|
|
<div class="search">
|
|||
|
|
<BFC>
|
|||
|
|
<span slot="left"> 车牌号:</span>
|
|||
|
|
<div slot="center" class="input">
|
|||
|
|
<a-input v-model="searchCarNum" placeholder="请输入"/>
|
|||
|
|
</div>
|
|||
|
|
</BFC>
|
|||
|
|
</div>
|
|||
|
|
<ModuleContent padding="0">
|
|||
|
|
<flex-col>
|
|||
|
|
<web3-title>门禁详情</web3-title>
|
|||
|
|
<ModuleContent padding="0">
|
|||
|
|
<flex-col>
|
|||
|
|
<img :src="selectedRecord.imgUrl" alt="" class="car-preview">
|
|||
|
|
<butgroup2>
|
|||
|
|
<cus-button2 flex>进出场抓拍图</cus-button2>
|
|||
|
|
<cus-button2>行驶证-正面</cus-button2>
|
|||
|
|
<cus-button2>行驶证-反面</cus-button2>
|
|||
|
|
<cus-button2>环保清单</cus-button2>
|
|||
|
|
</butgroup2>
|
|||
|
|
<ModuleContent padding="20px 27px" class="desc">
|
|||
|
|
<cus-desc :data="selectedRecord" :columns="descColumns"></cus-desc>
|
|||
|
|
</ModuleContent>
|
|||
|
|
</flex-col>
|
|||
|
|
|
|||
|
|
</ModuleContent>
|
|||
|
|
</flex-col>
|
|||
|
|
|
|||
|
|
</ModuleContent>
|
|||
|
|
</flex-col>
|
|||
|
|
</ModuleContent2>
|
|||
|
|
</div>
|
|||
|
|
<div class="liebiao" slot="center">
|
|||
|
|
<flex-col>
|
|||
|
|
<div style="height: 144px;width: 100%;">
|
|||
|
|
<ModuleContent2 bg bg-str :border="false">
|
|||
|
|
<butgroup2 style="height: 100%;">
|
|||
|
|
<ModuleContent2 bg bg-color border>
|
|||
|
|
<miaoshu title="进场车辆" :value="count.comeCount" color="rgba(42, 207, 255, 1)"></miaoshu>
|
|||
|
|
</ModuleContent2>
|
|||
|
|
|
|||
|
|
<ModuleContent2 bg bg-color border style="margin-left: 16px;">
|
|||
|
|
<miaoshu title="出场车辆" :value="count.outCount" color="rgba(255, 171, 87, 1)"></miaoshu>
|
|||
|
|
</ModuleContent2>
|
|||
|
|
|
|||
|
|
<ModuleContent2 bg bg-color border style="margin-left: 16px;">
|
|||
|
|
<miaoshu title="在场车辆" :value="count.inCount" color="rgba(122, 175, 255, 1)"></miaoshu>
|
|||
|
|
</ModuleContent2>
|
|||
|
|
|
|||
|
|
<ModuleContent2 bg bg-color border style="margin-left: 16px;">
|
|||
|
|
<miaoshu title="新增车辆" :value="count.addCount" color="rgba(76, 243, 129, 1)"></miaoshu>
|
|||
|
|
</ModuleContent2>
|
|||
|
|
</butgroup2>
|
|||
|
|
</ModuleContent2>
|
|||
|
|
</div>
|
|||
|
|
<web3-title>门禁监控</web3-title>
|
|||
|
|
<ModuleContent padding="20px 0" ref="module">
|
|||
|
|
<div class="table-content">
|
|||
|
|
<PeakCustomTable
|
|||
|
|
hide-action
|
|||
|
|
hide-search
|
|||
|
|
hide-button
|
|||
|
|
:columns="columns"
|
|||
|
|
:api-conf="apiConf"
|
|||
|
|
:tableProps="tableProps"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</ModuleContent>
|
|||
|
|
</flex-col>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</BFC>
|
|||
|
|
</ModuleContent>
|
|||
|
|
<butgroup>
|
|||
|
|
<cus-button>厂区车辆台账</cus-button>
|
|||
|
|
<cus-button>清洁运输趋势</cus-button>
|
|||
|
|
<cus-button>磅秤台账</cus-button>
|
|||
|
|
<cus-button>门禁监控</cus-button>
|
|||
|
|
</butgroup>
|
|||
|
|
</flex-col>
|
|||
|
|
</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/smallCommon/CustomTable";
|
|||
|
|
import Curd from "../../components/smallCommon/Curd.vue";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "PeakCoalMonitoring",
|
|||
|
|
components: {
|
|||
|
|
Curd,
|
|||
|
|
Miaoshu,
|
|||
|
|
ModuleContent2,
|
|||
|
|
CusDesc,
|
|||
|
|
Butgroup2,
|
|||
|
|
CusButton2,
|
|||
|
|
Web3Title,
|
|||
|
|
CusButton,
|
|||
|
|
Butgroup,
|
|||
|
|
BFC,
|
|||
|
|
Web2Title,
|
|||
|
|
NewBg,
|
|||
|
|
ModuleContent,
|
|||
|
|
FlexCol,
|
|||
|
|
SystemTitle,
|
|||
|
|
PeakCustomTable
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
const self = this
|
|||
|
|
return {
|
|||
|
|
tableProps: {
|
|||
|
|
customRow (record) {
|
|||
|
|
return {
|
|||
|
|
on: {
|
|||
|
|
click: (event) => {
|
|||
|
|
self.selectedRecord = record
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
rowClassName (record, index) {
|
|||
|
|
if (record.id === self.selectedRecord.id) return 'selected'
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
apiConf: {
|
|||
|
|
listApi: { api: '/api/Transport/list', method: 'get' },
|
|||
|
|
},
|
|||
|
|
selectedRecord: {},
|
|||
|
|
bgStr,
|
|||
|
|
searchCarNum: '',
|
|||
|
|
tableH: 513,
|
|||
|
|
count: {
|
|||
|
|
addCount: 0,
|
|||
|
|
comeCount: 1,
|
|||
|
|
inCount: 1,
|
|||
|
|
outCount: 0,
|
|||
|
|
},
|
|||
|
|
dataSource: [],
|
|||
|
|
descColumns: [
|
|||
|
|
{
|
|||
|
|
title: '设备掉线',
|
|||
|
|
dataIndex: 'deviceName',
|
|||
|
|
width: '33.333%'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '故障异常',
|
|||
|
|
dataIndex: 'errorName',
|
|||
|
|
width: '33.333%'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '异常报警',
|
|||
|
|
dataIndex: 'errorImg',
|
|||
|
|
width: '33.333%'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
columns: [
|
|||
|
|
{
|
|||
|
|
dataIndex: 'carNumber',
|
|||
|
|
key: 'carNumber',
|
|||
|
|
title: '车牌号'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dataIndex: 'transportType',
|
|||
|
|
key: 'transportType',
|
|||
|
|
title: '类型',
|
|||
|
|
customRender(transportType) {
|
|||
|
|
if (transportType === 1) return '进厂'
|
|||
|
|
return '出厂'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dataIndex: 'address',
|
|||
|
|
key: 'address',
|
|||
|
|
title: '进出厂位置'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dataIndex: 'registered',
|
|||
|
|
key: 'registered',
|
|||
|
|
title: '出/入厂位置'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dataIndex: 'goods',
|
|||
|
|
key: 'goods',
|
|||
|
|
title: '物料类型'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dataIndex: 'effluent',
|
|||
|
|
key: 'effluent',
|
|||
|
|
title: '排放标准'
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState({
|
|||
|
|
title: state => state.system.title,
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getCount()
|
|||
|
|
this.getDataSource()
|
|||
|
|
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']),
|
|||
|
|
getCount() {
|
|||
|
|
this.$get('/api/Transport/count').then(({data}) => {
|
|||
|
|
this.count = data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getDataSource () {
|
|||
|
|
this.$get('/api/Transport/list').then(({data}) => {
|
|||
|
|
this.dataSource = data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 图层构造器
|
|||
|
|
* @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;
|
|||
|
|
background: #09151F;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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";
|
|||
|
|
|
|||
|
|
.sou-suo-kuang {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 580px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-left: 20px;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
|