From 432199be726566d2daa6b6b417a6f5aaf83bb1e9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-VMMLSOQ\\wangzg" <1161909281@qq.com>
Date: Mon, 19 Aug 2024 07:14:54 +0800
Subject: [PATCH] 111

---
 assets/styles/global.less              |  41 ++++++++
 components/Map.vue                     |  25 ++++-
 components/ModuleContent.vue           |   1 +
 components/smallCommon/CusButton5.vue  |  60 +++++++++++
 components/smallCommon/CusDesc2.vue    |  61 ++++++++++++
 components/smallCommon/Faguang.vue     |  24 +++++
 components/smallCommon/SystemTitle.vue |  15 ++-
 components/smallCommon/Web5Title.vue   |  45 +++++++++
 pages/cleanTravel/ledger.vue           |   7 +-
 pages/cleanTravel/trend.vue            |  77 ++++++++------
 pages/wuzuzhi/huanjingzhili.vue        |   2 +-
 pages/wuzuzhi/paifang.vue              |  81 +++++++++------
 pages/wuzuzhi/xichejiguanli.vue        | 117 ++++++++++++----------
 pages/youzuzhi/paifang.vue             | 133 +++++++++++++++----------
 pages/youzuzhi/paifangtongji.vue       |  42 ++++----
 15 files changed, 536 insertions(+), 195 deletions(-)
 create mode 100644 components/smallCommon/CusButton5.vue
 create mode 100644 components/smallCommon/CusDesc2.vue
 create mode 100644 components/smallCommon/Faguang.vue
 create mode 100644 components/smallCommon/Web5Title.vue

diff --git a/assets/styles/global.less b/assets/styles/global.less
index d5feb91..ff1a65b 100644
--- a/assets/styles/global.less
+++ b/assets/styles/global.less
@@ -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;
+  }
+}
diff --git a/components/Map.vue b/components/Map.vue
index 65c0439..4150bd1 100644
--- a/components/Map.vue
+++ b/components/Map.vue
@@ -1,5 +1,8 @@
 <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>
 
 <script>
@@ -18,7 +21,6 @@ const mapLayerTypeToPointIcon = {
 
 export default {
   async asyncData({ $axios }) {
-    console.log('axios:', 1)
     const { data } = await $axios.$get('http://101.43.201.20:5000/api/Home/view');
     return { pageTitle: data.home.title }; // 假设接口返回格式为 { data: '标题内容' }
   },
@@ -208,6 +210,23 @@ export default {
 </style>
 
 <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 {
     width: 100%;
     height: 100%;
@@ -217,4 +236,6 @@ export default {
     top: 0;
     z-index: 1;
   }
+}
+
 </style>
diff --git a/components/ModuleContent.vue b/components/ModuleContent.vue
index e76b587..5b4b66c 100644
--- a/components/ModuleContent.vue
+++ b/components/ModuleContent.vue
@@ -79,6 +79,7 @@ import {getSize} from "@/utils/tools";
     overflow: hidden;
     position: relative;
     pointer-events: none;
+    z-index: 111;
     .content-border {
 
     }
diff --git a/components/smallCommon/CusButton5.vue b/components/smallCommon/CusButton5.vue
new file mode 100644
index 0000000..76369c0
--- /dev/null
+++ b/components/smallCommon/CusButton5.vue
@@ -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>
diff --git a/components/smallCommon/CusDesc2.vue b/components/smallCommon/CusDesc2.vue
new file mode 100644
index 0000000..ddc922e
--- /dev/null
+++ b/components/smallCommon/CusDesc2.vue
@@ -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>
diff --git a/components/smallCommon/Faguang.vue b/components/smallCommon/Faguang.vue
new file mode 100644
index 0000000..600fa73
--- /dev/null
+++ b/components/smallCommon/Faguang.vue
@@ -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>
diff --git a/components/smallCommon/SystemTitle.vue b/components/smallCommon/SystemTitle.vue
index 7f8abc3..48195f2 100644
--- a/components/smallCommon/SystemTitle.vue
+++ b/components/smallCommon/SystemTitle.vue
@@ -7,7 +7,9 @@
       <div class="tq">{{ tq }}</div>
       <p class="_title" v-if="customTitle">{{ customTitle }}</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" :key="btn.key" v-for="btn in btns" @click="$emit('click', btn)">
           {{ btn.title }}
@@ -105,10 +107,13 @@ export default {
         position: absolute;
         right: 10px;
         top: 40px;
-        border-radius: 10px;
-        padding: 5px 20px;
-        color: #fff;
-        background-color: #1890ff;
+        opacity: 1;
+        font-size: 20px;
+        font-weight: 400;
+        letter-spacing: 0px;
+        line-height: 28.96px;
+        color: rgba(35, 209, 232, 1);
+        vertical-align: top;
         cursor: pointer;
       }
       .time {
diff --git a/components/smallCommon/Web5Title.vue b/components/smallCommon/Web5Title.vue
new file mode 100644
index 0000000..90ba0a7
--- /dev/null
+++ b/components/smallCommon/Web5Title.vue
@@ -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>
diff --git a/pages/cleanTravel/ledger.vue b/pages/cleanTravel/ledger.vue
index 2d55630..38fdd29 100644
--- a/pages/cleanTravel/ledger.vue
+++ b/pages/cleanTravel/ledger.vue
@@ -3,9 +3,10 @@
 <template>
   <new-bg>
     <flex-col>
-      <system-title show-back custom-title="厂区车辆台账" />
+      <system-title show-back/>
       <ModuleContent padding="0px 20px 20px">
-
+        <web2-title>厂区车辆台账</web2-title>
+        <Split :height="16"></Split>
         <div style="height: 144px;width: 100%;">
           <ModuleContent2 bg bg-str :border="false">
             <butgroup2 style="height: 100%;">
@@ -59,9 +60,11 @@ import Miaoshu from "../../components/smallCommon/miaoshu.vue";
 import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
 import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
 import Split from "../../components/smallCommon/Split.vue";
+import Web2Title from "../../components/smallCommon/Web2Title.vue";
 export default {
   name: "user",
   components: {
+    Web2Title,
     Split,
     Butgroup2, ModuleContent2, Miaoshu,
     CustomTable,
diff --git a/pages/cleanTravel/trend.vue b/pages/cleanTravel/trend.vue
index 683b357..1604ee2 100644
--- a/pages/cleanTravel/trend.vue
+++ b/pages/cleanTravel/trend.vue
@@ -1,31 +1,34 @@
-
-
 <template>
   <new-bg>
     <flex-col>
-      <system-title show-back custom-title="清洁运输+趋势" />
+      <system-title show-back/>
       <ModuleContent padding="0px 20px 20px">
-    <a-row :gutter="16">
-      <a-col :span="6">
-
-      </a-col>
-      <a-col :span="18">
-        <CustomTable
-          hide-action
-          hide-search
-          hide-button
-          :columns="columns"
-          :api-conf="apiConf"
-          :form-items="formItems"
-        >
-          <template slot="search-button" slot-scope="{ search }">
-            <a-button type="primary" @click="exportList(search)">查询</a-button>
-            <a-button type="primary" @click="exportList(search)" style="margin-left: 10px;">导出</a-button>
-            <Split height="10"></Split>
-          </template>
-        </CustomTable>
-      </a-col>
-    </a-row>
+        <web2-title>清洁运输+趋势</web2-title>
+        <Split height="16"/>
+        <a-row :gutter="16">
+          <a-col :span="6">
+            <ModuleContent2 :border="false" padding="0">
+              <web3-title>运输车辆占比</web3-title>
+              <web3-title>运输量占比</web3-title>
+            </ModuleContent2>
+          </a-col>
+          <a-col :span="18">
+            <CustomTable
+              hide-action
+              hide-search
+              hide-button
+              :columns="columns"
+              :api-conf="apiConf"
+              :form-items="formItems"
+            >
+              <template slot="search-button" slot-scope="{ search }">
+                <a-button type="primary" @click="exportList(search)">查询</a-button>
+                <a-button type="primary" @click="exportList(search)" style="margin-left: 10px;">导出</a-button>
+                <Split height="10"></Split>
+              </template>
+            </CustomTable>
+          </a-col>
+        </a-row>
 
       </ModuleContent>
     </flex-col>
@@ -41,15 +44,23 @@ import FlexCol from "../../components/FlexCol.vue";
 import ModuleContent from "../../components/ModuleContent.vue";
 import CustomTable from "../../components/smallCommon/CustomTable.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 {
   name: "user",
   components: {
+    Web3Title,
+    CustomDesc2, ModuleContent2,
+    Web2Title,
     Split,
     CustomTable,
     ModuleContent, FlexCol, NewBg, SystemTitle,
     Curd
   },
-  data () {
+  data() {
     return {
       yunshuzongliang: 0,
       isEdit: false,
@@ -74,7 +85,7 @@ export default {
           dataIndex: 'newCar',
           key: 'newCar',
           title: '新能源',
-          customRender (text) {
+          customRender(text) {
             if (text) return '是'
             return '否'
           }
@@ -91,13 +102,13 @@ export default {
         }
       ],
       apiConf: {
-        listApi: { api: '/api/Transport/list', method: 'get' },
+        listApi: {api: '/api/Transport/list', method: 'get'},
       }
     }
   },
 
   computed: {
-    formItems () {
+    formItems() {
       return [
         {
           type: 'dateRange',
@@ -107,7 +118,7 @@ export default {
           hide: true,
           placeholder: ['请选择开始日期', '请选择结束日期'],
           rules: [
-            { required: true, message: '请选择时间范围' }
+            {required: true, message: '请选择时间范围'}
           ],
           fields: ['startTime', 'endTime']
         },
@@ -119,16 +130,16 @@ export default {
   },
 
   methods: {
-    getyunshuzongliang () {
+    getyunshuzongliang() {
       /*this.$get('/api/Transport/count').then(({ data }) => {
         this.yunshuzongliang = data
       })*/
     },
-    editHandler (isEdit) {
+    editHandler(isEdit) {
       this.isEdit = isEdit
     },
-    exportList ({ time }) {
-      const [ start, end ] = time
+    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')
     }
diff --git a/pages/wuzuzhi/huanjingzhili.vue b/pages/wuzuzhi/huanjingzhili.vue
index 0e1efab..44a5ad1 100644
--- a/pages/wuzuzhi/huanjingzhili.vue
+++ b/pages/wuzuzhi/huanjingzhili.vue
@@ -6,7 +6,7 @@
     </div>
     <flex-col class="main">
       <system-title show-back custom-title="环境治理"/>
-      <ModuleContent none-event padding="0 20px 20px">
+      <ModuleContent none-event padding="0 50px 20px">
         <BFC>
           <flex-col slot="left" width="412">
             <ModuleContent padding="20px 0" height="218">
diff --git a/pages/wuzuzhi/paifang.vue b/pages/wuzuzhi/paifang.vue
index 761bc8c..e5c07fa 100644
--- a/pages/wuzuzhi/paifang.vue
+++ b/pages/wuzuzhi/paifang.vue
@@ -1,51 +1,64 @@
 <template>
   <new-bg>
     <flex-col>
-      <system-title show-back custom-title="无组织排放" :btns="btns"/>
-      <ModuleContent padding="0px 20px 20px">
-
-        <a-row :gutter="16" style="height: 100%;margin-top: 16px;">
-          <a-col :span="4" style="height: 100%;">
+      <system-title show-back/>
+      <Map></Map>
+      <ModuleContent padding="0px 50px 20px" class="event-none" none-event>
+        <web2-title>无组织排放</web2-title>
+        <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%;">
-
               <web3-title>设备数量统计</web3-title>
               <Split height="10"></Split>
-              <ModuleContent2  height="30%">
-                <cus-desc :data="tongji" :columns="descColumns"></cus-desc>
+              <ModuleContent2 :border="false"  height="30%" padding="0">
+                <custom-desc2 default-value="0" :data="tongji" :columns="descColumns"></custom-desc2>
               </ModuleContent2>
               <web3-title>报警类型数据分析</web3-title>
               <Split height="10"></Split>
-              <ModuleContent2 >
+              <ModuleContent2 :border="false" padding="0">
               </ModuleContent2>
             </div>
 
           </a-col>
-          <a-col :span="16" style="height: 100%;">
-            <div style="height: 100%;position: relative">
-            <div class="map-cv" style="height: calc(100% - 80px);position: relative">
-              <Map></Map>
-            </div>
-            <butgroup>
-              <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>
+          <a-col span="14">
+            <butgroup :bg="false">
+              <cus-button5>干雾点位置</cus-button5>
+              <cus-button5>TSP点位</cus-button5>
+              <cus-button5>微站点位</cus-button5>
+              <cus-button5>雾炮点位</cus-button5>
+              <cus-button5>雾桩点位</cus-button5>
+              <cus-button5>洗车机点位</cus-button5>
             </butgroup>
-            </div>
           </a-col>
-          <a-col :span="4">
-            <a-card title="国Ⅵ输车辆" size="small">
-              <p>card content</p>
-            </a-card>
+          <a-col :span="5" class="event-auto" style="height: 100%;">
+            <FlexCol>
+              <ModuleContent2  :border="false" padding="0">
+
+              </ModuleContent2>
+              <web3-title>项目介绍</web3-title>
+              <Split height="10"></Split>
+              <ModuleContent2  :border="false" padding="0">
+              </ModuleContent2>
+
+            </FlexCol>
           </a-col>
         </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>
-      >
+
+
+
     </flex-col>
   </new-bg>
 </template>
@@ -62,10 +75,18 @@ import Web3Title from "../../components/smallCommon/Web3Title.vue";
 import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
 import Split from "../../components/smallCommon/Split.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 {
   name: "paifang",
   components: {
+    CusButton5,
+    CusButton3,
+    CustomDesc2,
+    Web2Title,
     CusDesc,
     Split,
     ModuleContent2,
diff --git a/pages/wuzuzhi/xichejiguanli.vue b/pages/wuzuzhi/xichejiguanli.vue
index 259c4ba..426a94e 100644
--- a/pages/wuzuzhi/xichejiguanli.vue
+++ b/pages/wuzuzhi/xichejiguanli.vue
@@ -1,62 +1,73 @@
 <template>
   <new-bg>
     <flex-col>
-      <system-title show-back custom-title="洗车机管理" />
-      <ModuleContent padding="0px 20px 20px">
-        <a-row :gutter="16" style="height: 100%;">
-          <a-col :span="4" style="height: 100%;">
-            <FlexCol>
-              <web3-title>洗车机列表</web3-title>
-              <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>
+      <system-title show-back/>
+      <Map></Map>
+      <ModuleContent padding="0px 50px 20px" class="event-none" none-event>
+        <web2-title>洗车机管理</web2-title>
+        <Split height="16"></Split>
+        <a-row :gutter="16" style="height: calc(100% - 62px);">
           <a-col :span="5" style="height: 100%;">
             <FlexCol>
-              <web3-title>洗车机视频</web3-title>
-              <Split height="10"></Split>
-              <ModuleContent2 height="300px">
+              <ModuleContent2 bg height="490">
+                <FlexCol>
+                  <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>
-              <web3-title>洗车机运行信息</web3-title>
-              <Split height="10"></Split>
-              <ModuleContent2>
+              <ModuleContent2 bg>
+                <FlexCol>
+                  <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>
             </FlexCol>
@@ -78,10 +89,12 @@ import Web3Title from "../../components/smallCommon/Web3Title.vue";
 import Split from "../../components/smallCommon/Split.vue";
 import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
 import CustomTable from "../../components/smallCommon/CustomTable.vue";
+import Web2Title from "../../components/smallCommon/Web2Title.vue";
 
 export default {
   name: "xichejiguanli",
   components: {
+    Web2Title,
     CustomTable,
     ModuleContent2,
     Split,
diff --git a/pages/youzuzhi/paifang.vue b/pages/youzuzhi/paifang.vue
index 86931fc..a7d997e 100644
--- a/pages/youzuzhi/paifang.vue
+++ b/pages/youzuzhi/paifang.vue
@@ -1,59 +1,64 @@
 <template>
   <new-bg>
     <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">
-        <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 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>
-
-              <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>
-
-        <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 class="gongxu-wrapper event-auto">
+                <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>
-            </a-col>
-            <a-col :span="17" style="height: 100%;">
-              <div style="height: 100%;position: relative">
-                <div class="map-cv" style="height: calc(100% - 80px);position: relative">
-                  <Map></Map>
-                </div>
-                <butgroup>
-                  <cus-button>
-                    <nuxt-link to="/youzuzhi/paifangtongji">环保排放统计</nuxt-link>
-                  </cus-button>
-                </butgroup>
-              </div>
-            </a-col>
-            <a-col :span="4" style="height: 100%;">
-              <web3-title>排放源清单</web3-title>
-              <a-table :columns="columns" :data-source="data"/>
-            </a-col>
-          </a-row>
-        </div>
+
+            </div>
+          </a-col>
+          <a-col :span="7">
+            <faguang class="custom-tab">
+              <a-tabs default-active-key="1" class="custom-tab">
+                <a-tab-pane key="1" tab="VOC">
+                  <web3-title>排放源清单</web3-title>
+                  <a-table :columns="columns" :data-source="data"/>
+                </a-tab-pane>
+                <a-tab-pane key="2" tab="CEMS" force-render>
+                  <web3-title>排放源清单</web3-title>
+                  <a-table :columns="columns" :data-source="data"/>
+                </a-tab-pane>
+              </a-tabs>
+            </faguang>
+          </a-col>
+        </a-row>
+
+        <butgroup class="bottom-btn">
+          <cus-button>
+            <nuxt-link to="/youzuzhi/paifangtongji">环保排放统计</nuxt-link>
+          </cus-button>
+        </butgroup>
       </ModuleContent>
     </flex-col>
   </new-bg>
@@ -71,10 +76,14 @@ import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
 import Web3Title from "../../components/smallCommon/Web3Title.vue";
 import CusButton from "../../components/smallCommon/CusButton.vue";
 import Butgroup from "../../components/smallCommon/butgroup.vue";
+import Web2Title from "../../components/smallCommon/Web2Title.vue";
+import Faguang from "../../components/smallCommon/Faguang.vue";
 
 export default {
   name: "paifang",
   components: {
+    Faguang,
+    Web2Title,
     Butgroup, CusButton,
     Web3Title,
     ModuleContent2, Miaoshu, Butgroup2,
@@ -124,15 +133,37 @@ export default {
 .mt16 {
   margin-top: 16px;
 }
+.gongxu-wrapper {
+  width: 132px;
+  max-height: 500px;
+  margin-top: 16px;
+}
 .gongxu-box {
   height: calc(100% - 48px);
   overflow-y: auto;
   .gongxu-item {
     cursor: pointer;
-    padding: 16px 0;
     color: #fff;
-    font-size: 18px;
     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>
diff --git a/pages/youzuzhi/paifangtongji.vue b/pages/youzuzhi/paifangtongji.vue
index 345a36f..34602fb 100644
--- a/pages/youzuzhi/paifangtongji.vue
+++ b/pages/youzuzhi/paifangtongji.vue
@@ -1,20 +1,21 @@
-
-
 <template>
   <new-bg>
     <flex-col>
-      <system-title show-back custom-title="有组织排放统计"/>
+      <system-title show-back />
       <ModuleContent padding="0px 20px 20px">
-  <div class="paifangtongji" style="height: 100vh;overflow: hidden">
-    <a-row :gutter="16">
-      <a-col :span="18">
-
-      </a-col>
-      <a-col :span="6">
-        <a-table :columns="columns" :data-source="data" />
-      </a-col>
-    </a-row>
-  </div>
+        <web2-title>有组织排放统计</web2-title>
+        <split num="16"></split>
+        <a-tabs default-active-key="1" class="custom-tab">
+          <a-tab-pane key="1" tab="总体排放">
+            <a-table :columns="columns" :data-source="data"/>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="VOC">
+            <a-table :columns="columns" :data-source="data"/>
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="CEMS" force-render>
+            <a-table :columns="columns" :data-source="data"/>
+          </a-tab-pane>
+        </a-tabs>
       </ModuleContent>
     </flex-col>
   </new-bg>
@@ -25,18 +26,21 @@ import FlexCol from "../../components/FlexCol.vue";
 import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
 import NewBg from "../../components/NewBg.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 {
   name: "paifangtongji",
-  components: {ModuleContent, NewBg, SystemTitle, FlexCol},
-  data () {
+  components: {Split, Web3Title, Web2Title, ModuleContent, NewBg, SystemTitle, FlexCol},
+  data() {
     return {
       data: [],
       columns: [
-        { title: '名词', key: 'name' },
-        { title: 'NO', key: 'NO' },
-        { title: 'SO2', key: 'SO2' },
-        { title: 'TSP', key: 'TSP' },
+        {title: '名词', key: 'name'},
+        {title: 'NO', key: 'NO'},
+        {title: 'SO2', key: 'SO2'},
+        {title: 'TSP', key: 'TSP'},
       ]
     }
   }