This commit is contained in:
parent
ccd5595032
commit
fc51e54c32
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div style="text-align: left">
|
<div style="text-align: left">
|
||||||
<div class="table-search">
|
<div class="table-search" v-if="searchItems.length > 0">
|
||||||
<a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch" layout="inline" @change="handleSearchFormChange">
|
<a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch" layout="inline" @change="handleSearchFormChange">
|
||||||
<a-form-item v-for="menuItem in searchItems" :key="menuItem.key" :label="menuItem.label">
|
<a-form-item v-for="menuItem in searchItems" :key="menuItem.key" :label="menuItem.label">
|
||||||
<a-input
|
<a-input
|
||||||
|
|
@ -21,18 +21,19 @@
|
||||||
:placeholder="menuItem.placeholder || ''" v-decorator="[menuItem.key]" v-else-if="menuItem.type === 'dateRange'" format="YYYY-MM-DD" />
|
:placeholder="menuItem.placeholder || ''" v-decorator="[menuItem.key]" v-else-if="menuItem.type === 'dateRange'" format="YYYY-MM-DD" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-button type="primary" html-type="submit">查询</a-button>
|
<a-button type="primary" html-type="submit" v-if="!hideSearch">查询</a-button>
|
||||||
<a-button :style="{ marginLeft: '8px' }" @click="reset">重置</a-button>
|
<a-button :style="{ marginLeft: '8px' }" @click="reset" v-if="!hideSearch">重置</a-button>
|
||||||
|
<slot name="search-button" v-bind:search="form.getFieldsValue()"></slot>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</div>
|
</div>
|
||||||
<a-divider />
|
<a-divider v-if="!hideButton && searchItems.length > 0" />
|
||||||
<div class="table-operations">
|
<div class="table-operations" v-if="!hideButton">
|
||||||
<a-button @click="addRow" type="primary">
|
<a-button @click="addRow" type="primary">
|
||||||
添加
|
添加
|
||||||
</a-button>
|
</a-button>
|
||||||
</div>
|
</div>
|
||||||
<a-table :row-key="primaryKey" :columns="realColumns" :data-source="tableDataSource" @change="handleChange" >
|
<a-table v-bind="tableProps" :pagination="page" :row-key="primaryKey" :columns="realColumns" :data-source="tableDataSource" @change="handleChange" >
|
||||||
<span slot="action" slot-scope="text, record">
|
<span slot="action" slot-scope="text, record">
|
||||||
<a-button type="danger" size="small" @click="deleteRow(record)">删除</a-button>
|
<a-button type="danger" size="small" @click="deleteRow(record)">删除</a-button>
|
||||||
<a-divider type="vertical" />
|
<a-divider type="vertical" />
|
||||||
|
|
@ -99,12 +100,29 @@ export default {
|
||||||
selectRow: null,
|
selectRow: null,
|
||||||
page: {
|
page: {
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
pageNo: 1
|
current: 1,
|
||||||
|
total: 0
|
||||||
},
|
},
|
||||||
searchFormModel: {}
|
searchFormModel: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
tableProps: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
hideSearch: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideAction: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hideButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
// 表单内容配置
|
// 表单内容配置
|
||||||
formItems: {
|
formItems: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
|
@ -130,6 +148,7 @@ export default {
|
||||||
return this.formItems.filter(item => !!item.isSearch)
|
return this.formItems.filter(item => !!item.isSearch)
|
||||||
},
|
},
|
||||||
realColumns () {
|
realColumns () {
|
||||||
|
if (this.hideAction) return [ ...this.columns ]
|
||||||
return [
|
return [
|
||||||
...this.columns,
|
...this.columns,
|
||||||
{
|
{
|
||||||
|
|
@ -188,12 +207,14 @@ export default {
|
||||||
},
|
},
|
||||||
deleteRow(row) {
|
deleteRow(row) {
|
||||||
const self = this
|
const self = this
|
||||||
|
if (!self.apiConf.deleteApi) return
|
||||||
this.$confirm({
|
this.$confirm({
|
||||||
title: '确认要删除么?',
|
title: '确认要删除么?',
|
||||||
okText: '确认',
|
okText: '确认',
|
||||||
okType: 'danger',
|
okType: 'danger',
|
||||||
cancelText: '再想想',
|
cancelText: '再想想',
|
||||||
onOk() {
|
onOk() {
|
||||||
|
|
||||||
const { api,deleteKey, paramsType, method } = self.apiConf.deleteApi
|
const { api,deleteKey, paramsType, method } = self.apiConf.deleteApi
|
||||||
let params = {}
|
let params = {}
|
||||||
if (paramsType === 'Array') {
|
if (paramsType === 'Array') {
|
||||||
|
|
@ -210,9 +231,9 @@ export default {
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
handleChange ({ pageSize, pageNo }) {
|
handleChange ({ pageSize, current }) {
|
||||||
this.page.pageSize = pageSize
|
this.page.pageSize = pageSize
|
||||||
this.page.pageNo = pageNo
|
this.page.current = current
|
||||||
this.handleSearch()
|
this.handleSearch()
|
||||||
},
|
},
|
||||||
reset() {
|
reset() {
|
||||||
|
|
@ -225,11 +246,13 @@ export default {
|
||||||
const { data } = await this[`$${method}`](api, {
|
const { data } = await this[`$${method}`](api, {
|
||||||
...values,
|
...values,
|
||||||
pageSize: this.page.pageSize,
|
pageSize: this.page.pageSize,
|
||||||
current: this.page.pageNo,
|
current: this.page.current,
|
||||||
})
|
})
|
||||||
if (noPage) {
|
if (noPage) {
|
||||||
|
this.page = false
|
||||||
this.tableDataSource = data
|
this.tableDataSource = data
|
||||||
} else {
|
} else {
|
||||||
|
this.page.total = data.total || 0
|
||||||
this.tableDataSource = data.items
|
this.tableDataSource = data.items
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="custom-table">
|
||||||
|
<Curd v-bind="$attrs" v-on="$listeners"></Curd>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Curd from "./Curd.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CustomTable",
|
||||||
|
components: {Curd}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.custom-table {
|
||||||
|
/deep/ .ant-table-thead > tr > th {
|
||||||
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-table {
|
||||||
|
background: rgba(255, 255, 255, 0.01);
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
/deep/ .ant-table-tbody > tr > td {
|
||||||
|
background-color: transparent;
|
||||||
|
border-bottom: 1px solid rgba(16, 40, 73, 0.3);
|
||||||
|
border-top: 1px solid rgba(16, 40, 73, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
|
||||||
|
/deep/ .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
|
||||||
|
/deep/ .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
|
||||||
|
/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
|
||||||
|
background: rgba(255, 255, 255, 0.01);
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
/deep/ .selected {
|
||||||
|
background: linear-gradient(90deg, rgba(16, 40, 73, 0) 0%, rgba(16, 40, 73, 1) 51.3%, rgba(16, 40, 73, 0) 100%);
|
||||||
|
border-bottom: 1px solid rgba(18, 45, 79, 0.8);
|
||||||
|
border-top: 1px solid rgba(18, 45, 79, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<a-locale-provider :locale="zh_CN">
|
||||||
<a-layout id="components-layout-demo-fixed-sider">
|
<a-layout id="components-layout-demo-fixed-sider">
|
||||||
<a-layout-sider :trigger="null" v-model="collapsed" collapsible>
|
<a-layout-sider :trigger="null" v-model="collapsed" collapsible>
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
|
|
@ -50,13 +51,18 @@
|
||||||
</a-layout-footer>-->
|
</a-layout-footer>-->
|
||||||
</a-layout>
|
</a-layout>
|
||||||
</a-layout>
|
</a-layout>
|
||||||
|
</a-locale-provider>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
|
||||||
|
import 'moment/locale/zh-cn';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "manager",
|
name: "manager",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
zh_CN,
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
headerHeight: 0,
|
headerHeight: 0,
|
||||||
footerHeight: 0,
|
footerHeight: 0,
|
||||||
|
|
@ -85,6 +91,12 @@ export default {
|
||||||
title: '菜单管理',
|
title: '菜单管理',
|
||||||
icon: 'link',
|
icon: 'link',
|
||||||
key: 'manager-menu'
|
key: 'manager-menu'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: '/manager/device',
|
||||||
|
title: '设备管理',
|
||||||
|
icon: 'video-camera',
|
||||||
|
key: 'manager-device'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
selectedKeys: []
|
selectedKeys: []
|
||||||
|
|
@ -136,6 +148,7 @@ export default {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#components-layout-demo-fixed-sider {
|
#components-layout-demo-fixed-sider {
|
||||||
.header-con {
|
.header-con {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-card :bordered="false" :bodyStyle="{ padding: '0px 16px' }">
|
||||||
|
<nuxt />
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "user"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,438 @@
|
||||||
|
<!--峰煤监控系统-->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-page-header
|
||||||
|
:ghost="false"
|
||||||
|
style="border-bottom: 1px solid rgb(235, 237, 240)"
|
||||||
|
title="厂区车辆台账"
|
||||||
|
@back="() => $router.go(-1)"
|
||||||
|
/>
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-card title="运输车辆" size="small">
|
||||||
|
<p>card content</p>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-card title="国Ⅵ输车辆" size="small">
|
||||||
|
<p>card content</p>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-card title="非道路工程机械" size="small">
|
||||||
|
<p>card content</p>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-card title="燃油运输车辆" size="small">
|
||||||
|
<p>card content</p>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
<a-divider />
|
||||||
|
<Curd
|
||||||
|
hide-action
|
||||||
|
hide-search
|
||||||
|
hide-button
|
||||||
|
:columns="columns"
|
||||||
|
:api-conf="apiConf"
|
||||||
|
:form-items="formItems"
|
||||||
|
@edit="editHandler"
|
||||||
|
>
|
||||||
|
<template slot="search-button" slot-scope="{ search }">
|
||||||
|
<a-button type="primary" @click="exportList(search)">导出历史数据</a-button>
|
||||||
|
</template>
|
||||||
|
</Curd>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Curd from "../../components/smallCommon/Curd.vue";
|
||||||
|
import moment from 'moment'
|
||||||
|
export default {
|
||||||
|
name: "user",
|
||||||
|
layout: "user",
|
||||||
|
components: {
|
||||||
|
Curd
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
isEdit: false,
|
||||||
|
roles: [],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
dataIndex: 'outTime',
|
||||||
|
key: 'outTime',
|
||||||
|
title: '日期'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'carNum',
|
||||||
|
key: 'carNum',
|
||||||
|
title: '车牌号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'carModel',
|
||||||
|
key: 'carModel',
|
||||||
|
title: '车型'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'newCar',
|
||||||
|
key: 'newCar',
|
||||||
|
title: '新能源',
|
||||||
|
customRender (text) {
|
||||||
|
if (text) return '是'
|
||||||
|
return '否'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'emissions',
|
||||||
|
key: 'emissions',
|
||||||
|
title: '燃油车'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'createDateTime',
|
||||||
|
key: 'createDateTime',
|
||||||
|
title: '出厂日期'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
apiConf: {
|
||||||
|
listApi: { api: '/api/Ledger/list', method: 'get' },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
formItems () {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: 'dateRange',
|
||||||
|
key: 'time',
|
||||||
|
label: '日期',
|
||||||
|
isSearch: true,
|
||||||
|
placeholder: ['请选择开始日期', '请选择结束日期'],
|
||||||
|
rules: [
|
||||||
|
{ required: true, message: '请选择时间范围' }
|
||||||
|
],
|
||||||
|
fields: ['startTime', 'endTime']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
editHandler (isEdit) {
|
||||||
|
this.isEdit = isEdit
|
||||||
|
},
|
||||||
|
exportList ({ time }) {
|
||||||
|
const [ start, end ] = time
|
||||||
|
const fmt = 'YYYY-MM-DD'
|
||||||
|
window.open(`http://101.43.201.20:5000/api/Ledger/export?start=${moment(start).format(fmt)}&end=${moment(end).format(fmt)}`, '_blank')
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-page-header
|
||||||
|
:ghost="false"
|
||||||
|
title="清洁运输+趋势"
|
||||||
|
@back="() => $router.go(-1)"
|
||||||
|
/>
|
||||||
|
<a-divider style="margin-top: 0;" />
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-card>
|
||||||
|
<div slot="title">
|
||||||
|
运输总量: {{ yunshuzongliang }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Curd
|
||||||
|
hide-action
|
||||||
|
hide-search
|
||||||
|
hide-button
|
||||||
|
:columns="columns"
|
||||||
|
:api-conf="apiConf"
|
||||||
|
:form-items="formItems"
|
||||||
|
>
|
||||||
|
</Curd>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-card title="国Ⅵ输车辆" size="small">
|
||||||
|
<p>card content</p>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Curd from "../../components/smallCommon/Curd.vue";
|
||||||
|
import moment from 'moment'
|
||||||
|
export default {
|
||||||
|
name: "user",
|
||||||
|
layout: "user",
|
||||||
|
components: {
|
||||||
|
Curd
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
yunshuzongliang: 0,
|
||||||
|
isEdit: false,
|
||||||
|
roles: [],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
dataIndex: 'outTime',
|
||||||
|
key: 'outTime',
|
||||||
|
title: '日期'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'carNum',
|
||||||
|
key: 'carNum',
|
||||||
|
title: '车牌号'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'carModel',
|
||||||
|
key: 'carModel',
|
||||||
|
title: '车型'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'newCar',
|
||||||
|
key: 'newCar',
|
||||||
|
title: '新能源',
|
||||||
|
customRender (text) {
|
||||||
|
if (text) return '是'
|
||||||
|
return '否'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'emissions',
|
||||||
|
key: 'emissions',
|
||||||
|
title: '燃油车'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: 'createDateTime',
|
||||||
|
key: 'createDateTime',
|
||||||
|
title: '出厂日期'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
apiConf: {
|
||||||
|
listApi: { api: '/api/Transport/list', method: 'get' },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
formItems () {
|
||||||
|
return [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getyunshuzongliang()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getyunshuzongliang () {
|
||||||
|
/*this.$get('/api/Transport/count').then(({ data }) => {
|
||||||
|
this.yunshuzongliang = data
|
||||||
|
})*/
|
||||||
|
},
|
||||||
|
editHandler (isEdit) {
|
||||||
|
this.isEdit = isEdit
|
||||||
|
},
|
||||||
|
exportList ({ time }) {
|
||||||
|
const [ start, end ] = time
|
||||||
|
const fmt = 'YYYY-MM-DD'
|
||||||
|
window.open(`http://101.43.201.20:5000/api/Ledger/export?start=${moment(start).format(fmt)}&end=${moment(end).format(fmt)}`, '_blank')
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -66,7 +66,7 @@ export default {
|
||||||
{
|
{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
key: 'deviceMN',
|
key: 'deviceMN',
|
||||||
label: '编码',
|
label: 'MN编码',
|
||||||
isSearch: true,
|
isSearch: true,
|
||||||
placeholder: '请输入编码',
|
placeholder: '请输入编码',
|
||||||
rules: [
|
rules: [
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@ export default {
|
||||||
Curd
|
Curd
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
const self = this
|
||||||
return {
|
return {
|
||||||
isEdit: false,
|
isEdit: false,
|
||||||
roles: [],
|
roles: [],
|
||||||
|
|
@ -43,7 +44,11 @@ export default {
|
||||||
{
|
{
|
||||||
dataIndex: 'roleId',
|
dataIndex: 'roleId',
|
||||||
key: 'roleId',
|
key: 'roleId',
|
||||||
title: '角色'
|
title: '角色',
|
||||||
|
customRender (text) {
|
||||||
|
const item = (self.roles || []).find(item => item.value === text)
|
||||||
|
return item && item.label || ''
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
apiConf: {
|
apiConf: {
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,10 @@ module.exports = {
|
||||||
scale: 0.5,
|
scale: 0.5,
|
||||||
ignore: [
|
ignore: [
|
||||||
'manager',
|
'manager',
|
||||||
|
'video',
|
||||||
|
'youzuzhi',
|
||||||
|
'wuzuzhi',
|
||||||
|
'cleanTravel',
|
||||||
'node_modules',
|
'node_modules',
|
||||||
'peak-coal-monitoring',
|
'peak-coal-monitoring',
|
||||||
'web',
|
'web',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue