yanghongwei
/
lg_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

111

This commit is contained in:
DESKTOP-VMMLSOQ\wangzg 2024-08-19 07:14:54 +08:00
parent 7da697bdc2
commit 432199be72
15 changed files with 536 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
assets/styles/global.less
View File

@ -42,3 +42,44 @@
} }
} }
} }
.event-none {
pointer-events: none;
}
.event-auto {
pointer-events: auto;
}
.bottom-btn {
position: absolute;
.event-auto;
width: 100%;
bottom: 0;
left: 0;
}
.custom-tab {
.ant-tabs-ink-bar {
background: rgba(120, 240, 253, 1);
}
.ant-tabs-nav .ant-tabs-tab-active {
color: #fff;
}
.ant-tabs-bar {
margin: 0;
}
.ant-tabs-nav {
color: #fff;
}
.ant-tabs-nav-wrap {
background: linear-gradient(90deg, rgba(0, 107, 207, 0.4) 0%, rgba(0, 128, 247, 0.08) 100%) !important;
}
.ant-tabs-nav-scroll {
background: linear-gradient(90deg, rgba(0, 107, 207, 0.4) 0%, rgba(0, 128, 247, 0.08) 100%) !important;
}
}

25
components/Map.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<div class="map-container" ref="mapRef" id="mars3dContainer"></div> <div class="map-wrapper">
<div class="bg event-none"></div>
<div class="map-container" ref="mapRef" id="mars3dContainer"></div>
</div>
</template> </template>
<script> <script>
@ -18,7 +21,6 @@ const mapLayerTypeToPointIcon = {
export default { export default {
async asyncData({ $axios }) { async asyncData({ $axios }) {
console.log('axios:', 1)
const { data } = await $axios.$get('http://101.43.201.20:5000/api/Home/view'); const { data } = await $axios.$get('http://101.43.201.20:5000/api/Home/view');
return { pageTitle: data.home.title }; // 假设接口返回格式为 { data: '标题内容' } return { pageTitle: data.home.title }; // 假设接口返回格式为 { data: '标题内容' }
}, },
@ -208,6 +210,23 @@ export default {
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
.map-wrapper {
width: 100%;
height: 100%;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 0;
z-index: 1;
.bg {
background: radial-gradient(transparent, rgba(3, 5, 51, 0.19), rgba(3, 5, 51, 0.68), #020433);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.map-container { .map-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -217,4 +236,6 @@ export default {
top: 0; top: 0;
z-index: 1; z-index: 1;
} }
}
</style> </style>

1
components/ModuleContent.vue
View File

@ -79,6 +79,7 @@ import {getSize} from "@/utils/tools";
overflow: hidden; overflow: hidden;
position: relative; position: relative;
pointer-events: none; pointer-events: none;
z-index: 111;
.content-border { .content-border {
} }

60
components/smallCommon/CusButton5.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="cusbutton" @click="$emit('click')" :class="{ flex, selected }">
<slot></slot>
</div>
</template>
<script>
export default {
name: "CusButton5",
props: {
flex: {
type: Boolean,
default: false
},
selected: {
type: Boolean,
default: false
}
}
}
</script>
<style scoped lang="less">
.cusbutton {
display: inline-block;
border-radius: 2.56px;
padding: 10px 13px;
/** 文本1 */
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
color: #fff;
text-align: center;
vertical-align: top;
cursor: pointer;
background: rgba(0, 128, 247, 0.2);
&.flex {
flex: 1;
}
&.selected {
background: rgba(0, 128, 247, 0.5);
}
&:hover {
background: rgba(0, 128, 247, 0.5);
}
}
</style>

61
components/smallCommon/CusDesc2.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div class="cusdesc">
<div class="desc" v-for="(col, index) in columns" :key="index">
<div class="desc-title">{{ col.title }}</div>
<div class="desc-value">{{ data[col.key || col.dataIndex] || defaultValue }}</div>
</div>
</div>
</template>
<script>
export default {
name: "CusDesc2",
props: {
columns: {
type: Array,
default: () => []
},
data: {
type: Object,
default: () => ({})
},
defaultValue: {
type: String,
default: ''
}
}
}
</script>
<style scoped lang="less">
.cusdesc {
width: 100%;
/** 文本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;
.desc {
width: 100%;
margin-top: 16px;
display: flex;
justify-content: space-between;
align-items: center;
height: 36px;
line-height: 36px;
background: rgba(1, 105, 216, 0.2);
border: 1px solid rgba(212, 230, 255, 0.1);
padding: 0 16px;
box-sizing: border-box;
&:first-child {
margin-top: 0;
}
}
}
</style>

24
components/smallCommon/Faguang.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="faguiang event-auto">
<slot></slot>
</div>
</template>
<script>
export default {
name: "Faguang"
}
</script>
<style scoped lang="less">
.faguiang {
padding: 28px 24px;
opacity: 1;
background: linear-gradient(180deg, rgba(0, 196, 255, 0) 0%, rgba(16, 134, 173, 0.2) 100%);
border: 1px solid rgba(224, 254, 255, 1);
box-shadow:inset 1px 1px 13px rgba(0, 191, 255, 0.96), 0px 0px 17px rgba(0, 170, 255, 0.69);
border-radius: 10px;
}
</style>

15
components/smallCommon/SystemTitle.vue
View File

@ -7,7 +7,9 @@
<div class="tq">{{ tq }}</div> <div class="tq">{{ tq }}</div>
<p class="_title" v-if="customTitle">{{ customTitle }}</p> <p class="_title" v-if="customTitle">{{ customTitle }}</p>
<p class="_title" v-else>{{ customTitle || title }}一体化平台</p> <p class="_title" v-else>{{ customTitle || title }}一体化平台</p>
<div class="back" v-if="showBack" @click="() => $router.go(-1)">返回</div> <div class="back" v-if="showBack" @click="() => $router.go(-1)">
<a-icon type="arrow-left" /> 返回</div>
<div class="btn-box"> <div class="btn-box">
<div class="btn" :key="btn.key" v-for="btn in btns" @click="$emit('click', btn)"> <div class="btn" :key="btn.key" v-for="btn in btns" @click="$emit('click', btn)">
{{ btn.title }} {{ btn.title }}
@ -105,10 +107,13 @@ export default {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 40px; top: 40px;
border-radius: 10px; opacity: 1;
padding: 5px 20px; font-size: 20px;
color: #fff; font-weight: 400;
background-color: #1890ff; letter-spacing: 0px;
line-height: 28.96px;
color: rgba(35, 209, 232, 1);
vertical-align: top;
cursor: pointer; cursor: pointer;
} }
.time { .time {

45
components/smallCommon/Web5Title.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div class="web2tit">
<slot></slot>
</div>
</template>
<script>
export default {
name: "Web5Title"
}
</script>
<style scoped lang="less">
.web2tit {
width: 100%;
height: 48px;
line-height: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
/** 文本1 */
font-size: 14px;
font-weight: 500;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: top;
background-size: 10px 16px;
box-sizing: border-box;
padding-left: 20px;
position: relative;
&::after {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: table;
content: ' ';
width: 10px;
height: 10px;
opacity: 1;
border: 2px solid rgba(255, 255, 255, 1);
border-radius: 50%;
}
}
</style>

7
pages/cleanTravel/ledger.vue
View File

@ -3,9 +3,10 @@
<template> <template>
<new-bg> <new-bg>
<flex-col> <flex-col>
<system-title show-back custom-title="厂区车辆台账" /> <system-title show-back/>
<ModuleContent padding="0px 20px 20px"> <ModuleContent padding="0px 20px 20px">
<web2-title>厂区车辆台账</web2-title>
<Split :height="16"></Split>
<div style="height: 144px;width: 100%;"> <div style="height: 144px;width: 100%;">
<ModuleContent2 bg bg-str :border="false"> <ModuleContent2 bg bg-str :border="false">
<butgroup2 style="height: 100%;"> <butgroup2 style="height: 100%;">
@ -59,9 +60,11 @@ import Miaoshu from "../../components/smallCommon/miaoshu.vue";
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue"; import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
import Butgroup2 from "../../components/smallCommon/butgroup2.vue"; import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
import Split from "../../components/smallCommon/Split.vue"; import Split from "../../components/smallCommon/Split.vue";
import Web2Title from "../../components/smallCommon/Web2Title.vue";
export default { export default {
name: "user", name: "user",
components: { components: {
Web2Title,
Split, Split,
Butgroup2, ModuleContent2, Miaoshu, Butgroup2, ModuleContent2, Miaoshu,
CustomTable, CustomTable,

77
pages/cleanTravel/trend.vue
View File

@ -1,31 +1,34 @@
<template> <template>
<new-bg> <new-bg>
<flex-col> <flex-col>
<system-title show-back custom-title="清洁运输+趋势" /> <system-title show-back/>
<ModuleContent padding="0px 20px 20px"> <ModuleContent padding="0px 20px 20px">
<a-row :gutter="16"> <web2-title>清洁运输+趋势</web2-title>
<a-col :span="6"> <Split height="16"/>
<a-row :gutter="16">
</a-col> <a-col :span="6">
<a-col :span="18"> <ModuleContent2 :border="false" padding="0">
<CustomTable <web3-title>运输车辆占比</web3-title>
hide-action <web3-title>运输量占比</web3-title>
hide-search </ModuleContent2>
hide-button </a-col>
:columns="columns" <a-col :span="18">
:api-conf="apiConf" <CustomTable
:form-items="formItems" hide-action
> hide-search
<template slot="search-button" slot-scope="{ search }"> hide-button
<a-button type="primary" @click="exportList(search)">查询</a-button> :columns="columns"
<a-button type="primary" @click="exportList(search)" style="margin-left: 10px;">导出</a-button> :api-conf="apiConf"
<Split height="10"></Split> :form-items="formItems"
</template> >
</CustomTable> <template slot="search-button" slot-scope="{ search }">
</a-col> <a-button type="primary" @click="exportList(search)">查询</a-button>
</a-row> <a-button type="primary" @click="exportList(search)" style="margin-left: 10px;">导出</a-button>
<Split height="10"></Split>
</template>
</CustomTable>
</a-col>
</a-row>
</ModuleContent> </ModuleContent>
</flex-col> </flex-col>
@ -41,15 +44,23 @@ import FlexCol from "../../components/FlexCol.vue";
import ModuleContent from "../../components/ModuleContent.vue"; import ModuleContent from "../../components/ModuleContent.vue";
import CustomTable from "../../components/smallCommon/CustomTable.vue"; import CustomTable from "../../components/smallCommon/CustomTable.vue";
import Split from "../../components/smallCommon/Split.vue"; import Split from "../../components/smallCommon/Split.vue";
import Web2Title from "../../components/smallCommon/Web2Title.vue";
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
import CustomDesc2 from "../../components/smallCommon/CusDesc2.vue";
import Web3Title from "../../components/smallCommon/Web3Title.vue";
export default { export default {
name: "user", name: "user",
components: { components: {
Web3Title,
CustomDesc2, ModuleContent2,
Web2Title,
Split, Split,
CustomTable, CustomTable,
ModuleContent, FlexCol, NewBg, SystemTitle, ModuleContent, FlexCol, NewBg, SystemTitle,
Curd Curd
}, },
data () { data() {
return { return {
yunshuzongliang: 0, yunshuzongliang: 0,
isEdit: false, isEdit: false,
@ -74,7 +85,7 @@ export default {
dataIndex: 'newCar', dataIndex: 'newCar',
key: 'newCar', key: 'newCar',
title: '新能源', title: '新能源',
customRender (text) { customRender(text) {
if (text) return '是' if (text) return '是'
return '否' return '否'
} }
@ -91,13 +102,13 @@ export default {
} }
], ],
apiConf: { apiConf: {
listApi: { api: '/api/Transport/list', method: 'get' }, listApi: {api: '/api/Transport/list', method: 'get'},
} }
} }
}, },
computed: { computed: {
formItems () { formItems() {
return [ return [
{ {
type: 'dateRange', type: 'dateRange',
@ -107,7 +118,7 @@ export default {
hide: true, hide: true,
placeholder: ['请选择开始日期', '请选择结束日期'], placeholder: ['请选择开始日期', '请选择结束日期'],
rules: [ rules: [
{ required: true, message: '请选择时间范围' } {required: true, message: '请选择时间范围'}
], ],
fields: ['startTime', 'endTime'] fields: ['startTime', 'endTime']
}, },
@ -119,16 +130,16 @@ export default {
}, },
methods: { methods: {
getyunshuzongliang () { getyunshuzongliang() {
/*this.$get('/api/Transport/count').then(({ data }) => { /*this.$get('/api/Transport/count').then(({ data }) => {
this.yunshuzongliang = data this.yunshuzongliang = data
})*/ })*/
}, },
editHandler (isEdit) { editHandler(isEdit) {
this.isEdit = isEdit this.isEdit = isEdit
}, },
exportList ({ time }) { exportList({time}) {
const [ start, end ] = time const [start, end] = time
const fmt = 'YYYY-MM-DD' 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') window.open(`http://101.43.201.20:5000/api/Ledger/export?start=${moment(start).format(fmt)}&end=${moment(end).format(fmt)}`, '_blank')
} }

2
pages/wuzuzhi/huanjingzhili.vue
View File

@ -6,7 +6,7 @@
</div> </div>
<flex-col class="main"> <flex-col class="main">
<system-title show-back custom-title="环境治理"/> <system-title show-back custom-title="环境治理"/>
<ModuleContent none-event padding="0 20px 20px"> <ModuleContent none-event padding="0 50px 20px">
<BFC> <BFC>
<flex-col slot="left" width="412"> <flex-col slot="left" width="412">
<ModuleContent padding="20px 0" height="218"> <ModuleContent padding="20px 0" height="218">

81
pages/wuzuzhi/paifang.vue
View File

@ -1,51 +1,64 @@
<template> <template>
<new-bg> <new-bg>
<flex-col> <flex-col>
<system-title show-back custom-title="无组织排放" :btns="btns"/> <system-title show-back/>
<ModuleContent padding="0px 20px 20px"> <Map></Map>
<ModuleContent padding="0px 50px 20px" class="event-none" none-event>
<a-row :gutter="16" style="height: 100%;margin-top: 16px;"> <web2-title>无组织排放</web2-title>
<a-col :span="4" style="height: 100%;"> <a-row :gutter="16" style="height: calc(100% - 62px);margin-top: 16px;">
<a-col :span="5" style="height: 100%;">
<div class="con" style="height: 100%;display: flex;flex-direction: column; width: 100%;"> <div class="con" style="height: 100%;display: flex;flex-direction: column; width: 100%;">
<web3-title>设备数量统计</web3-title> <web3-title>设备数量统计</web3-title>
<Split height="10"></Split> <Split height="10"></Split>
<ModuleContent2 height="30%"> <ModuleContent2 :border="false" height="30%" padding="0">
<cus-desc :data="tongji" :columns="descColumns"></cus-desc> <custom-desc2 default-value="0" :data="tongji" :columns="descColumns"></custom-desc2>
</ModuleContent2> </ModuleContent2>
<web3-title>报警类型数据分析</web3-title> <web3-title>报警类型数据分析</web3-title>
<Split height="10"></Split> <Split height="10"></Split>
<ModuleContent2 > <ModuleContent2 :border="false" padding="0">
</ModuleContent2> </ModuleContent2>
</div> </div>
</a-col> </a-col>
<a-col :span="16" style="height: 100%;"> <a-col span="14">
<div style="height: 100%;position: relative"> <butgroup :bg="false">
<div class="map-cv" style="height: calc(100% - 80px);position: relative"> <cus-button5>干雾点位置</cus-button5>
<Map></Map> <cus-button5>TSP点位</cus-button5>
</div> <cus-button5>微站点位</cus-button5>
<butgroup> <cus-button5>雾炮点位</cus-button5>
<cus-button> <cus-button5>雾桩点位</cus-button5>
<nuxt-link to="/wuzuzhi/xichejiguanli">洗车机管理</nuxt-link> <cus-button5>洗车机点位</cus-button5>
</cus-button>
<cus-button>
<nuxt-link to="/wuzuzhi/huanjingzhili">环境治理</nuxt-link>
</cus-button>
<cus-button>
<nuxt-link to="/wuzuzhi/huanweixunhang">环卫巡航</nuxt-link>
</cus-button>
</butgroup> </butgroup>
</div>
</a-col> </a-col>
<a-col :span="4"> <a-col :span="5" class="event-auto" style="height: 100%;">
<a-card title="国Ⅵ输车辆" size="small"> <FlexCol>
<p>card content</p> <ModuleContent2 :border="false" padding="0">
</a-card>
</ModuleContent2>
<web3-title>项目介绍</web3-title>
<Split height="10"></Split>
<ModuleContent2 :border="false" padding="0">
</ModuleContent2>
</FlexCol>
</a-col> </a-col>
</a-row> </a-row>
<butgroup class="bottom-btn">
<cus-button>
<nuxt-link to="/wuzuzhi/xichejiguanli">洗车机管理</nuxt-link>
</cus-button>
<cus-button>
<nuxt-link to="/wuzuzhi/huanjingzhili">环境治理</nuxt-link>
</cus-button>
<cus-button>
<nuxt-link to="/wuzuzhi/huanweixunhang">环卫巡航</nuxt-link>
</cus-button>
</butgroup>
</ModuleContent> </ModuleContent>
>
</flex-col> </flex-col>
</new-bg> </new-bg>
</template> </template>
@ -62,10 +75,18 @@ import Web3Title from "../../components/smallCommon/Web3Title.vue";
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue"; import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
import Split from "../../components/smallCommon/Split.vue"; import Split from "../../components/smallCommon/Split.vue";
import CusDesc from "../../components/smallCommon/CusDesc.vue"; import CusDesc from "../../components/smallCommon/CusDesc.vue";
import Web2Title from "../../components/smallCommon/Web2Title.vue";
import CustomDesc2 from "../../components/smallCommon/CusDesc2.vue";
import CusButton3 from "../../components/smallCommon/CusButton3.vue";
import CusButton5 from "../../components/smallCommon/CusButton5.vue";
export default { export default {
name: "paifang", name: "paifang",
components: { components: {
CusButton5,
CusButton3,
CustomDesc2,
Web2Title,
CusDesc, CusDesc,
Split, Split,
ModuleContent2, ModuleContent2,

117
pages/wuzuzhi/xichejiguanli.vue
View File

@ -1,62 +1,73 @@
<template> <template>
<new-bg> <new-bg>
<flex-col> <flex-col>
<system-title show-back custom-title="洗车机管理" /> <system-title show-back/>
<ModuleContent padding="0px 20px 20px"> <Map></Map>
<a-row :gutter="16" style="height: 100%;"> <ModuleContent padding="0px 50px 20px" class="event-none" none-event>
<a-col :span="4" style="height: 100%;"> <web2-title>洗车机管理</web2-title>
<FlexCol> <Split height="16"></Split>
<web3-title>洗车机列表</web3-title> <a-row :gutter="16" style="height: calc(100% - 62px);">
<Split height="10"></Split>
<ModuleContent2 >
<div :class="['car-washing-machine-tabs',activeCarTabs ==1?'active-car-washing-machine-tabs':'']"
@click="carChange(1)">
<div class="rank-num">1</div>
<div class="car-washing-machine-name">西门洗车</div>
<div class="state-icon">
正常
</div>
</div>
</ModuleContent2>
</FlexCol>
</a-col>
<a-col :span="15" style="height: 100%;">
<FlexCol>
<div class="map-content">
<Map></Map>
</div>
<Split height="10"></Split>
<ModuleContent2 >
<CustomTable
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>
<Split height="10"></Split>
</template>
</CustomTable>
</ModuleContent2>
</FlexCol>
</a-col>
<a-col :span="5" style="height: 100%;"> <a-col :span="5" style="height: 100%;">
<FlexCol> <FlexCol>
<web3-title>洗车机视频</web3-title> <ModuleContent2 bg height="490">
<Split height="10"></Split> <FlexCol>
<ModuleContent2 height="300px"> <web3-title>洗车机列表</web3-title>
<Split height="10"></Split>
<ModuleContent2 :border="false" padding="0">
<div :class="['car-washing-machine-tabs',activeCarTabs ==1?'active-car-washing-machine-tabs':'']"
@click="carChange(1)">
<div class="rank-num">1</div>
<div class="car-washing-machine-name">西门洗车</div>
<div class="state-icon">
正常
</div>
</div>
</ModuleContent2>
</FlexCol>
</ModuleContent2> </ModuleContent2>
<web3-title>洗车机运行信息</web3-title> <ModuleContent2 bg>
<Split height="10"></Split> <FlexCol>
<ModuleContent2> <web3-title>历史记录</web3-title>
<Split height="10"></Split>
<ModuleContent2 :border="false" padding="0">
<CustomTable
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>
<Split height="10"></Split>
</template>
</CustomTable>
</ModuleContent2>
</FlexCol>
</ModuleContent2>
</FlexCol>
</a-col>
<a-col :span="5" :offset="14" style="height: 100%;">
<FlexCol>
<ModuleContent2 bg>
<FlexCol>
<web3-title>洗车机视频</web3-title>
<Split height="10"></Split>
<ModuleContent2 padding="0" :border="false" height="300px" >
</ModuleContent2>
<web3-title>洗车机运行信息</web3-title>
<Split height="10"></Split>
<ModuleContent2 padding="0" :border="false">
</ModuleContent2>
</FlexCol>
</ModuleContent2> </ModuleContent2>
</FlexCol> </FlexCol>
@ -78,10 +89,12 @@ import Web3Title from "../../components/smallCommon/Web3Title.vue";
import Split from "../../components/smallCommon/Split.vue"; import Split from "../../components/smallCommon/Split.vue";
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue"; import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
import CustomTable from "../../components/smallCommon/CustomTable.vue"; import CustomTable from "../../components/smallCommon/CustomTable.vue";
import Web2Title from "../../components/smallCommon/Web2Title.vue";
export default { export default {
name: "xichejiguanli", name: "xichejiguanli",
components: { components: {
Web2Title,
CustomTable, CustomTable,
ModuleContent2, ModuleContent2,
Split, Split,

133
pages/youzuzhi/paifang.vue
View File

@ -1,59 +1,64 @@
<template> <template>
<new-bg> <new-bg>
<flex-col> <flex-col>
<system-title @click="changeTab" show-back custom-title="有组织排放" :btns="btns"/> <system-title @click="changeTab" show-back/>
<Map></Map>
<ModuleContent padding="0px 50px 20px" class="event-none" none-event>
<web2-title>有组织排放</web2-title>
<a-row style="margin-top: 16px;" :gutter="16" class="event-none">
<a-col :span="17">
<div style="height: 112px;width: 100%;" class="event-auto">
<ModuleContent2 :border="false" padding="0">
<butgroup2 style="height: 100%;">
<ModuleContent2 bg bg-color border>
<miaoshu title="全厂有组织排放源" :value="count.comeCount" color="rgba(42, 207, 255, 1)"></miaoshu>
</ModuleContent2>
<ModuleContent padding="0px 20px 20px"> <ModuleContent2 bg bg-color border style="margin-left: 16px;">
<div style="height: 144px;width: 100%;"> <miaoshu title="全厂重要排放源" :value="count.outCount" color="rgba(255, 171, 87, 1)"></miaoshu>
<ModuleContent2 bg bg-str :border="false"> </ModuleContent2>
<butgroup2 style="height: 100%;">
<ModuleContent2 bg bg-color border> <ModuleContent2 bg bg-color border style="margin-left: 16px;">
<miaoshu title="全厂有组织排放源" :value="count.comeCount" color="rgba(42, 207, 255, 1)"></miaoshu> <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> </ModuleContent2>
<div class="gongxu-wrapper event-auto">
<ModuleContent2 bg bg-color border style="margin-left: 16px;"> <web3-title>工序步骤</web3-title>
<miaoshu title="全厂重要排放源" :value="count.outCount" color="rgba(255, 171, 87, 1)"></miaoshu> <div class="gongxu-box">
</ModuleContent2> <div class="gongxu-item" v-for="item in gongxu" :key="item.id">
{{ item.name }}
<ModuleContent2 bg bg-color border style="margin-left: 16px;"> </div>
<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>
<div class="paifang" style="height: calc(100% - 144px);overflow: hidden">
<a-row style="height: 100%;margin-top: 16px;" :gutter="16">
<a-col :span="3" style="height: 100%;">
<web3-title>工序步骤</web3-title>
<div class="gongxu-box">
<div class="gongxu-item" v-for="item in gongxu" :key="item.id">
{{ item.name }}
</div> </div>
</div> </div>
</a-col>
<a-col :span="17" style="height: 100%;"> </div>
<div style="height: 100%;position: relative"> </a-col>
<div class="map-cv" style="height: calc(100% - 80px);position: relative"> <a-col :span="7">
<Map></Map> <faguang class="custom-tab">
</div> <a-tabs default-active-key="1" class="custom-tab">
<butgroup> <a-tab-pane key="1" tab="VOC">
<cus-button> <web3-title>排放源清单</web3-title>
<nuxt-link to="/youzuzhi/paifangtongji">环保排放统计</nuxt-link> <a-table :columns="columns" :data-source="data"/>
</cus-button> </a-tab-pane>
</butgroup> <a-tab-pane key="2" tab="CEMS" force-render>
</div> <web3-title>排放源清单</web3-title>
</a-col> <a-table :columns="columns" :data-source="data"/>
<a-col :span="4" style="height: 100%;"> </a-tab-pane>
<web3-title>排放源清单</web3-title> </a-tabs>
<a-table :columns="columns" :data-source="data"/> </faguang>
</a-col> </a-col>
</a-row> </a-row>
</div>
<butgroup class="bottom-btn">
<cus-button>
<nuxt-link to="/youzuzhi/paifangtongji">环保排放统计</nuxt-link>
</cus-button>
</butgroup>
</ModuleContent> </ModuleContent>
</flex-col> </flex-col>
</new-bg> </new-bg>
@ -71,10 +76,14 @@ import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
import Web3Title from "../../components/smallCommon/Web3Title.vue"; import Web3Title from "../../components/smallCommon/Web3Title.vue";
import CusButton from "../../components/smallCommon/CusButton.vue"; import CusButton from "../../components/smallCommon/CusButton.vue";
import Butgroup from "../../components/smallCommon/butgroup.vue"; import Butgroup from "../../components/smallCommon/butgroup.vue";
import Web2Title from "../../components/smallCommon/Web2Title.vue";
import Faguang from "../../components/smallCommon/Faguang.vue";
export default { export default {
name: "paifang", name: "paifang",
components: { components: {
Faguang,
Web2Title,
Butgroup, CusButton, Butgroup, CusButton,
Web3Title, Web3Title,
ModuleContent2, Miaoshu, Butgroup2, ModuleContent2, Miaoshu, Butgroup2,
@ -124,15 +133,37 @@ export default {
.mt16 { .mt16 {
margin-top: 16px; margin-top: 16px;
} }
.gongxu-wrapper {
width: 132px;
max-height: 500px;
margin-top: 16px;
}
.gongxu-box { .gongxu-box {
height: calc(100% - 48px); height: calc(100% - 48px);
overflow-y: auto; overflow-y: auto;
.gongxu-item { .gongxu-item {
cursor: pointer; cursor: pointer;
padding: 16px 0;
color: #fff; color: #fff;
font-size: 18px;
border-bottom: 1px solid rgba(238, 238, 238, 0.54); border-bottom: 1px solid rgba(238, 238, 238, 0.54);
width: 132px;
height: 48px;
opacity: 1;
background: rgba(0, 128, 247, 0.5);
box-sizing: border-box;
margin-top: 16px;
line-height: 48px;
/** 文本1 */
font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
text-align: center;
vertical-align: top;
&.selected, &:hover {
background: rgba(7, 65, 119, 0.98);
font-weight: 500;
color: rgba(45, 205, 255, 1);
}
} }
} }
</style> </style>

42
pages/youzuzhi/paifangtongji.vue
View File

@ -1,20 +1,21 @@
<template> <template>
<new-bg> <new-bg>
<flex-col> <flex-col>
<system-title show-back custom-title="有组织排放统计"/> <system-title show-back />
<ModuleContent padding="0px 20px 20px"> <ModuleContent padding="0px 20px 20px">
<div class="paifangtongji" style="height: 100vh;overflow: hidden"> <web2-title>有组织排放统计</web2-title>
<a-row :gutter="16"> <split num="16"></split>
<a-col :span="18"> <a-tabs default-active-key="1" class="custom-tab">
<a-tab-pane key="1" tab="总体排放">
</a-col> <a-table :columns="columns" :data-source="data"/>
<a-col :span="6"> </a-tab-pane>
<a-table :columns="columns" :data-source="data" /> <a-tab-pane key="2" tab="VOC">
</a-col> <a-table :columns="columns" :data-source="data"/>
</a-row> </a-tab-pane>
</div> <a-tab-pane key="3" tab="CEMS" force-render>
<a-table :columns="columns" :data-source="data"/>
</a-tab-pane>
</a-tabs>
</ModuleContent> </ModuleContent>
</flex-col> </flex-col>
</new-bg> </new-bg>
@ -25,18 +26,21 @@ import FlexCol from "../../components/FlexCol.vue";
import SystemTitle from "../../components/smallCommon/SystemTitle.vue"; import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
import NewBg from "../../components/NewBg.vue"; import NewBg from "../../components/NewBg.vue";
import ModuleContent from "../../components/ModuleContent.vue"; import ModuleContent from "../../components/ModuleContent.vue";
import Web2Title from "../../components/smallCommon/Web2Title.vue";
import Web3Title from "../../components/smallCommon/Web3Title.vue";
import Split from "../../components/Split.vue";
export default { export default {
name: "paifangtongji", name: "paifangtongji",
components: {ModuleContent, NewBg, SystemTitle, FlexCol}, components: {Split, Web3Title, Web2Title, ModuleContent, NewBg, SystemTitle, FlexCol},
data () { data() {
return { return {
data: [], data: [],
columns: [ columns: [
{ title: '名词', key: 'name' }, {title: '名词', key: 'name'},
{ title: 'NO', key: 'NO' }, {title: 'NO', key: 'NO'},
{ title: 'SO2', key: 'SO2' }, {title: 'SO2', key: 'SO2'},
{ title: 'TSP', key: 'TSP' }, {title: 'TSP', key: 'TSP'},
] ]
} }
} }