From 6d2ae6196bf43290b5f534e9fe0c6e8abda5ec71 Mon Sep 17 00:00:00 2001
From: "DESKTOP-VMMLSOQ\\wangzg" <1161909281@qq.com>
Date: Tue, 6 Aug 2024 22:30:41 +0800
Subject: [PATCH] 111

---
 components/smallCommon/CustomTable.vue |   9 +-
 pages/cleanTravel/bangcheng.vue        | 225 +++++++++++++++----------
 pages/cleanTravel/home.vue             |  10 +-
 pages/cleanTravel/ledger.vue           |  82 +++++----
 pages/cleanTravel/trend.vue            |  73 ++++----
 pages/video/list.vue                   |  16 +-
 pages/wuzuzhi/huanjingzhili.vue        |   5 +-
 pages/wuzuzhi/huanweixunhang.vue       |  36 ++--
 pages/wuzuzhi/paifang.vue              |  94 ++++++++---
 pages/wuzuzhi/xichejiguanli.vue        | 192 ++++++++++-----------
 pages/youzuzhi/paifang.vue             |  10 +-
 11 files changed, 437 insertions(+), 315 deletions(-)

diff --git a/components/smallCommon/CustomTable.vue b/components/smallCommon/CustomTable.vue
index 7126181..36cc9f2 100644
--- a/components/smallCommon/CustomTable.vue
+++ b/components/smallCommon/CustomTable.vue
@@ -2,7 +2,11 @@
 
 <template>
   <div class="custom-table">
-    <Curd v-bind="$attrs" v-on="$listeners" ref="curd"></Curd>
+    <Curd v-bind="$attrs" v-on="$listeners" ref="curd">
+      <template slot="search-button" slot-scope="{ search }">
+        <slot name="search-button" v-bind:search="search"></slot>
+      </template>
+    </Curd>
   </div>
 </template>
 <script>
@@ -20,6 +24,9 @@ export default {
 </script>
 <style scoped lang="less">
   .custom-table {
+    /deep/ .ant-form-item-label > label {
+      color: #fff !important;
+    }
     /deep/ .ant-table-header {
       background-color: transparent !important;
       border-bottom: 0px ;
diff --git a/pages/cleanTravel/bangcheng.vue b/pages/cleanTravel/bangcheng.vue
index c9cd189..b42b931 100644
--- a/pages/cleanTravel/bangcheng.vue
+++ b/pages/cleanTravel/bangcheng.vue
@@ -1,98 +1,144 @@
 <template>
-  <div>
-    <a-page-header
-      :ghost="false"
-      style="border-bottom: 1px solid rgb(235, 237, 240)"
-      title="磅秤台账"
-      @back="() => $router.go(-1)"
-    />
-    <div class="type-button">
-      <div :class="['tabs-button',activeTabsButton == null?'active-tabs-button':'']" @click="tabsChange(null)">
-        全部
-      </div>
-      <div :class="['tabs-button',activeTabsButton == 1?'active-tabs-button':'']" @click="tabsChange(1)">
-        东门
-      </div>
-      <div :class="['tabs-button',activeTabsButton == 2?'active-tabs-button':'']" @click="tabsChange(2)">
-        东门
-      </div>
-      <div :class="['tabs-button',activeTabsButton == 3?'active-tabs-button':'']" @click="tabsChange(3)">
-        东门
-      </div>
-      <div :class="['tabs-button',activeTabsButton == 4?'active-tabs-button':'']" @click="tabsChange(4)">
-        东门
-      </div>
-    </div>
+  <new-bg>
+    <flex-col>
+      <system-title show-back custom-title="磅秤台账"/>
+      <ModuleContent padding="0px 20px 20px">
+        <flex-col>
+          <Butgroup2 class="type-button">
+            <cus-button :class="['tabs-button',activeTabsButton == null?'active-tabs-button':'']"
+                        @click="tabsChange(null)">
+              全部
+            </cus-button>
+            <cus-button :class="['tabs-button',activeTabsButton == 1?'active-tabs-button':'']" @click="tabsChange(1)">
+              东门
+            </cus-button>
+            <cus-button :class="['tabs-button',activeTabsButton == 2?'active-tabs-button':'']" @click="tabsChange(2)">
+              东门
+            </cus-button>
+            <cus-button :class="['tabs-button',activeTabsButton == 3?'active-tabs-button':'']" @click="tabsChange(3)">
+              东门
+            </cus-button>
+            <cus-button :class="['tabs-button',activeTabsButton == 4?'active-tabs-button':'']" @click="tabsChange(4)">
+              东门
+            </cus-button>
+          </Butgroup2>
+          <Split num="10"></Split>
+          <ModuleContent2 bg padding="20px">
+            <a-row :gutter="16">
+              <a-col :span="18">
 
-    <div class="data-info">
-      <div class="left-table">
-        <Curd
-          hide-action
-          hide-search
-          hide-button
-          :columns="columns"
-          :api-conf="apiConf"
-          :form-items="formItems"
-          @edit="editHandler"
-          @viewDetails="viewDetails"
-        >
-          <template slot="search-button" slot-scope="{ search }">
-            <a-button type="primary" @click="exportList(search)">导出历史数据</a-button>
-          </template>
-        </Curd>
-      </div>
-      <div class="right-details" v-if="isShowInfoDetails">
-        <div class="header-title">驾驶人详情</div>
+                <CustomTable
+                  hide-action
+                  hide-search
+                  hide-button
+                  :columns="columns"
+                  :api-conf="apiConf"
+                  :form-items="formItems"
+                  @edit="editHandler"
+                  @viewDetails="viewDetails"
+                >
+                  <template slot="search-button" slot-scope="{ search }">
+                    <a-button type="primary" @click="exportList(search)">导出历史数据</a-button>
+                    <Split num="10"></Split>
+                  </template>
+                </CustomTable>
+              </a-col>
+              <a-col :span="6">
+                <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>
 
-        <img src=""/>
+                  </ModuleContent>
+                </flex-col>
 
-        <div class="group-button">
-          <div :class="['_button',activeButton == 1?'active_button':'']" @click="viewImgByType(1)">出入场抓拍图</div>
-          <div :class="['_button',activeButton == 2?'active_button':'']" @click="viewImgByType(2)">行驶证-正面</div>
-          <div :class="['_button',activeButton == 3?'active_button':'']" @click="viewImgByType(3)">行驶证-反面</div>
-          <div :class="['_button',activeButton == 4?'active_button':'']" @click="viewImgByType(4)">环保清单</div>
-        </div>
-
-        <div class="details-info">
-          <div class="details-info-item">
-            <div class="_title">排放标准：</div>
-            <div class="_title">国0</div>
-          </div>
-          <div class="details-info-item">
-            <div class="_title">VIN：</div>
-            <div class="_title">国0</div>
-          </div>
-          <div class="details-info-item">
-            <div class="_title">发动机号：</div>
-            <div class="_title">国0</div>
-          </div>
-          <div class="details-info-item">
-            <div class="_title">注册日期：</div>
-            <div class="_title">国0</div>
-          </div>
-        </div>
-
-        <div class="footer-button">
-          <Button type="primary" @click="closeDetails">关闭详情</Button>
-        </div>
-      </div>
-    </div>
-  </div>
+              </a-col>
+            </a-row>
+          </ModuleContent2>
+        </flex-col>
+      </ModuleContent>
+    </flex-col>
+  </new-bg>
 </template>
 <script>
 import Curd from "../../components/smallCommon/Curd.vue";
 import moment from 'moment'
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import NewBg from "../../components/NewBg.vue";
+import FlexCol from "../../components/FlexCol.vue";
+import ModuleContent from "../../components/ModuleContent.vue";
+import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
+import CustomTable from "../../components/smallCommon/CustomTable.vue";
+import Split from "../../components/Split.vue";
+import Web3Title from "../../components/smallCommon/Web3Title.vue";
+import CusDesc from "../../components/smallCommon/CusDesc.vue";
+import CusButton2 from "../../components/smallCommon/CusButton2.vue";
+import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
+import CusButton from "../../components/smallCommon/CusButton4.vue";
 
 export default {
   name: "user",
-  layout: "user",
   components: {
+    CusButton,
+    Butgroup2, CusButton2, CusDesc,
+    Web3Title,
+    Split,
+    CustomTable,
+    ModuleContent2,
+    ModuleContent, FlexCol, NewBg, SystemTitle,
     Curd
   },
   data() {
     return {
       isEdit: false,
       roles: [],
+      descColumns: [
+        {
+          title: '车牌号',
+          dataIndex: 'carNumber',
+          width: '100%'
+        }, {
+          title: '车牌颜色',
+          dataIndex: 'carColorString',
+          width: '100%'
+        }, {
+          title: '车辆类型',
+          dataIndex: 'carType',
+          width: '100%'
+        }, {
+          title: '车辆类型',
+          dataIndex: 'carType',
+          width: '100%'
+        }, {
+          title: '排放等级',
+          dataIndex: 'effluent',
+          width: '100%'
+        }, {
+          title: 'VIN',
+          dataIndex: 'vin',
+          width: '100%'
+        }, {
+          title: '发动机号',
+          dataIndex: 'entryExitPictureUrl',
+          width: '100%'
+        }, {
+          title: '注册日期',
+          dataIndex: 'registrationDate',
+          width: '100%'
+        }
+      ],
+      selectedRecord: {},
       columns: [
         {
           dataIndex: 'outTime',
@@ -127,14 +173,7 @@ export default {
           dataIndex: 'createDateTime',
           key: 'createDateTime',
           title: '出厂日期'
-        },
-        {
-          title: '操作',
-          key: 'operation',
-          scopedSlots: {customRender: 'details'},
-          fixed: 'right',
-          width: 100
-        },
+        }
       ],
       apiConf: {
         listApi: {api: '/api/Ledger/list', method: 'get'},
@@ -188,7 +227,7 @@ export default {
     },
 
     //方位改变
-    tabsChange(value){
+    tabsChange(value) {
       this.activeTabsButton = value
     }
 
@@ -196,12 +235,18 @@ export default {
 }
 </script>
 <style scoped lang="less">
+.car-preview {
+  width: 100%;
+  height: 260px;
+}
+
+.desc {
+  background: rgba(24, 131, 201, 0.2);
+  border: 1px solid rgba(15, 81, 122, 1);
+}
 
 .type-button {
-  margin: 20px 300px;
-  display: flex;
-  flex-flow: row;
-  justify-content: space-between;
+  max-width: 70%;
 
   .tabs-button {
     height: 40px;
diff --git a/pages/cleanTravel/home.vue b/pages/cleanTravel/home.vue
index bcf2175..a60e5fc 100644
--- a/pages/cleanTravel/home.vue
+++ b/pages/cleanTravel/home.vue
@@ -2,10 +2,9 @@
 <template>
   <new-bg>
     <flex-col>
-      <system-title  />
+      <system-title custom-title="清洁运输" show-back  />
       <ModuleContent padding="20px">
         <flex-col>
-          <web2-title>清洁运输</web2-title>
           <ModuleContent padding="0 20px 20px">
             <BFC>
               <div class="sou-suo-kuang" slot="right">
@@ -95,10 +94,9 @@
             <cus-button>
               <nuxt-link to="/cleanTravel/trend">清洁运输趋势</nuxt-link>
               </cus-button>
-<!--            <cus-button>
+            <cus-button>
               <nuxt-link to="/cleanTravel/bangcheng">磅秤台账</nuxt-link>
-              </cus-button>
-            <cus-button>门禁监控</cus-button>-->
+            </cus-button>
           </butgroup>
         </flex-col>
       </ModuleContent>
@@ -271,7 +269,7 @@ export default {
     this.getDataSource()
     this.$nextTick(() => {
       const win = window.top
-      this.$http.get('http://101.43.201.20:5000/api/Home/view').then(({data}) => {
+      this.$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)
diff --git a/pages/cleanTravel/ledger.vue b/pages/cleanTravel/ledger.vue
index 31232ea..2d55630 100644
--- a/pages/cleanTravel/ledger.vue
+++ b/pages/cleanTravel/ledger.vue
@@ -1,38 +1,35 @@
 
 
 <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>{{ headCount.t1 || 0 }}</p>
-        </a-card>
-      </a-col>
-      <a-col :span="6">
-        <a-card title="国Ⅵ输车辆" size="small">
-          <p>{{ headCount.t2 || 0 }}</p>
-        </a-card>
-      </a-col>
-      <a-col :span="6">
-        <a-card title="非道路工程机械" size="small">
-          <p>{{ headCount.t3 || 0 }}</p>
-        </a-card>
-      </a-col>
-      <a-col :span="6">
-        <a-card title="燃油运输车辆"  size="small">
-          <p>{{ headCount.t4 || 0 }}</p>
-        </a-card>
-      </a-col>
-    </a-row>
+  <new-bg>
+    <flex-col>
+      <system-title show-back custom-title="厂区车辆台账" />
+      <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="headCount.t1" color="rgba(42, 207, 255, 1)"></miaoshu>
+              </ModuleContent2>
+
+              <ModuleContent2 bg bg-color border style="margin-left: 16px;">
+                <miaoshu title="国Ⅵ输车辆" :value="headCount.t2" color="rgba(255, 171, 87, 1)"></miaoshu>
+              </ModuleContent2>
+
+              <ModuleContent2 bg bg-color border style="margin-left: 16px;">
+                <miaoshu title="非道路工程机械" :value="headCount.t3" color="rgba(122, 175, 255, 1)"></miaoshu>
+              </ModuleContent2>
+
+              <ModuleContent2 bg bg-color border style="margin-left: 16px;">
+                <miaoshu title="燃油运输车辆" :value="headCount.t4" color="rgba(76, 243, 129, 1)"></miaoshu>
+              </ModuleContent2>
+            </butgroup2>
+          </ModuleContent2>
+        </div>
 
     <a-divider />
-    <Curd
+    <CustomTable
       hide-search
       hide-action
       :columns="columns"
@@ -42,17 +39,34 @@
     >
       <template slot="search-button" slot-scope="{ search }">
         <a-button type="primary" @click="exportList(search)">导出历史数据</a-button>
+        <Split height="10"></Split>
       </template>
-    </Curd>
-  </div>
+    </CustomTable>
+      </ModuleContent>
+    </flex-col>
+  </new-bg>
+
 </template>
 <script>
 import Curd from "../../components/smallCommon/Curd.vue";
 import moment from 'moment'
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import NewBg from "../../components/NewBg.vue";
+import FlexCol from "../../components/FlexCol.vue";
+import ModuleContent from "../../components/ModuleContent.vue";
+import CustomTable from "../../components/smallCommon/CustomTable.vue";
+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";
 export default {
   name: "user",
-  layout: "user",
   components: {
+    Split,
+    Butgroup2, ModuleContent2, Miaoshu,
+    CustomTable,
+    ModuleContent,
+    FlexCol, NewBg, SystemTitle,
     Curd
   },
   data () {
@@ -162,7 +176,7 @@ export default {
     }
   },
   created() {
-    this.$http.get('/api/Ledger/HeaderCount').then(({data}) => {
+    this.$get('/api/Ledger/HeaderCount').then(({data}) => {
       this.headCount = data || {}
     })
 
diff --git a/pages/cleanTravel/trend.vue b/pages/cleanTravel/trend.vue
index 86cbde8..683b357 100644
--- a/pages/cleanTravel/trend.vue
+++ b/pages/cleanTravel/trend.vue
@@ -1,49 +1,52 @@
 
 
 <template>
-  <div>
-    <a-page-header
-      :ghost="false"
-      title="清洁运输+趋势"
-      @back="() => $router.go(-1)"
-    />
-    <a-divider style="margin-top: 0;" />
+  <new-bg>
+    <flex-col>
+      <system-title show-back custom-title="清洁运输+趋势" />
+      <ModuleContent padding="0px 20px 20px">
     <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 :span="6">
 
       </a-col>
-      <a-col :span="12">
-        <a-card title="国Ⅵ输车辆" size="small">
-          <p>card content</p>
-        </a-card>
+      <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>
+  </new-bg>
 
-  </div>
 </template>
 <script>
 import Curd from "../../components/smallCommon/Curd.vue";
 import moment from 'moment'
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import NewBg from "../../components/NewBg.vue";
+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";
 export default {
   name: "user",
-  layout: "user",
   components: {
+    Split,
+    CustomTable,
+    ModuleContent, FlexCol, NewBg, SystemTitle,
     Curd
   },
   data () {
@@ -96,6 +99,18 @@ export default {
   computed: {
     formItems () {
       return [
+        {
+          type: 'dateRange',
+          key: 'time',
+          label: '日期',
+          isSearch: true,
+          hide: true,
+          placeholder: ['请选择开始日期', '请选择结束日期'],
+          rules: [
+            { required: true, message: '请选择时间范围' }
+          ],
+          fields: ['startTime', 'endTime']
+        },
       ]
     }
   },
diff --git a/pages/video/list.vue b/pages/video/list.vue
index e5a049a..0c22147 100644
--- a/pages/video/list.vue
+++ b/pages/video/list.vue
@@ -1,11 +1,23 @@
 <script>
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import NewBg from "../../components/NewBg.vue";
+import FlexCol from "../../components/FlexCol.vue";
+import ModuleContent from "../../components/ModuleContent.vue";
+
 export default {
-  name: "list"
+  name: "list",
+  components: {ModuleContent, FlexCol, NewBg, SystemTitle}
 }
 </script>
 
 <template>
-  <div class="list"></div>
+  <new-bg>
+    <flex-col>
+      <system-title show-back custom-title="视频广场" />
+      <ModuleContent padding="0px 20px 20px">
+      </ModuleContent>
+    </flex-col>
+  </new-bg>
 </template>
 
 <style scoped lang="less">
diff --git a/pages/wuzuzhi/huanjingzhili.vue b/pages/wuzuzhi/huanjingzhili.vue
index be40c69..0e1efab 100644
--- a/pages/wuzuzhi/huanjingzhili.vue
+++ b/pages/wuzuzhi/huanjingzhili.vue
@@ -5,11 +5,10 @@
       <Map type="middle" @pointClick="pointClick" />
     </div>
     <flex-col class="main">
-      <system-title/>
+      <system-title show-back custom-title="环境治理"/>
       <ModuleContent none-event padding="0 20px 20px">
         <BFC>
           <flex-col slot="left" width="412">
-            <web2-title>环境治理</web2-title>
             <ModuleContent padding="20px 0" height="218">
               <div class="video"></div>
             </ModuleContent>
@@ -177,7 +176,7 @@ export default {
   mounted() {
     this.$nextTick(() => {
       const win = window.top
-      this.$http.get('http://101.43.201.20:5000/api/Home/view').then(({data}) => {
+      this.$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)
diff --git a/pages/wuzuzhi/huanweixunhang.vue b/pages/wuzuzhi/huanweixunhang.vue
index 0b35553..96aa6dc 100644
--- a/pages/wuzuzhi/huanweixunhang.vue
+++ b/pages/wuzuzhi/huanweixunhang.vue
@@ -1,38 +1,36 @@
-<template>
-  <div class="huanweixunhang">
-    <a-page-header
-      :ghost="false"
-      style="border-bottom: 1px solid rgb(235, 237, 240)"
-      title="环卫巡航"
-      @back="() => $router.go(-1)"
-    />
+<template><new-bg>
+  <flex-col>
+    <system-title  show-back custom-title="环卫巡航" />
+    <ModuleContent padding="0px 20px 20px">
     <div class="_map">
       <Map></Map>
     </div>
-  </div>
+    </ModuleContent>
+  </flex-col>
+</new-bg>
 </template>
 
 <script>
 import Map from "../../components/Map.vue";
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import NewBg from "../../components/NewBg.vue";
+import FlexCol from "../../components/FlexCol.vue";
+import ModuleContent from "../../components/ModuleContent.vue";
 
 export default {
   name: "huanweixunhang",
   components: {
+    ModuleContent,
+    FlexCol, NewBg, SystemTitle,
     Map
   }
 }
 </script>
 
 <style scoped lang="less">
-.huanweixunhang {
-  height: 100vh;
-  display: flex;
-  flex-flow: column;
-
-  ._map {
-    height: 0;
-    flex: 1;
-    position: relative;
-  }
+._map {
+  width: 100%;
+  height: 100%;
+  position: relative;
 }
 </style>
diff --git a/pages/wuzuzhi/paifang.vue b/pages/wuzuzhi/paifang.vue
index 7e1923d..761bc8c 100644
--- a/pages/wuzuzhi/paifang.vue
+++ b/pages/wuzuzhi/paifang.vue
@@ -1,34 +1,90 @@
-
 <template>
-  <div class="paifang">
-    <a-page-header
-      :ghost="false"
-      style="border-bottom: 1px solid rgb(235, 237, 240)"
-      title="无组织排放"
-      @back="() => $router.go(-1)"
-    />
+  <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%;">
+            <div class="con" style="height: 100%;display: flex;flex-direction: column; width: 100%;">
 
-    <a-row :gutter="16">
-      <a-col :span="18">
-        <Map></Map>
-      </a-col>
-      <a-col :span="6">
-        <a-card title="国Ⅵ输车辆" size="small">
-          <p>card content</p>
-        </a-card>
-      </a-col>
-    </a-row>
+              <web3-title>设备数量统计</web3-title>
+              <Split height="10"></Split>
+              <ModuleContent2  height="30%">
+                <cus-desc :data="tongji" :columns="descColumns"></cus-desc>
+              </ModuleContent2>
+              <web3-title>报警类型数据分析</web3-title>
+              <Split height="10"></Split>
+              <ModuleContent2 >
+              </ModuleContent2>
+            </div>
 
-  </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>
+            </butgroup>
+            </div>
+          </a-col>
+          <a-col :span="4">
+            <a-card title="国Ⅵ输车辆" size="small">
+              <p>card content</p>
+            </a-card>
+          </a-col>
+        </a-row>
+      </ModuleContent>
+      >
+    </flex-col>
+  </new-bg>
 </template>
 
 <script>
 import Map from "../../components/Map.vue";
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import NewBg from "../../components/NewBg.vue";
+import FlexCol from "../../components/FlexCol.vue";
+import ModuleContent from "../../components/ModuleContent.vue";
+import Butgroup from "../../components/smallCommon/butgroup.vue";
+import CusButton from "../../components/smallCommon/CusButton.vue";
+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";
+
 export default {
   name: "paifang",
   components: {
+    CusDesc,
+    Split,
+    ModuleContent2,
+    Web3Title,
+    CusButton, Butgroup,
+    ModuleContent,
+    FlexCol, NewBg, SystemTitle,
     Map
+  },
+  data () {
+    return {
+      tongji: {},
+      descColumns: [
+        { title: '设备数量', key: 'total' },
+        { title: '运行设备数量', key: 'total' },
+        { title: '设备异常数量', key: 'total' },
+        { title: '关闭设备数量', key: 'total' },
+      ]
+    }
   }
 }
 </script>
diff --git a/pages/wuzuzhi/xichejiguanli.vue b/pages/wuzuzhi/xichejiguanli.vue
index a441bb9..259c4ba 100644
--- a/pages/wuzuzhi/xichejiguanli.vue
+++ b/pages/wuzuzhi/xichejiguanli.vue
@@ -1,105 +1,93 @@
 <template>
-  <div class="xichejiguanli">
-    <a-page-header
-      :ghost="false"
-      style="border-bottom: 1px solid rgb(235, 237, 240)"
-      title="洗车机管理"
-      @back="() => $router.go(-1)"
-    />
-    <div class="_body">
-      <div class="left-list">
+  <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 :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>
+                  </div>
+                </div>
+              </ModuleContent2>
+            </FlexCol>
 
-        <div :class="['car-washing-machine-tabs',activeCarTabs ==2?'active-car-washing-machine-tabs':'']"
-             @click="carChange(2)">
-          <div class="rank-num">1</div>
-          <div class="car-washing-machine-name">西门洗车</div>
-          <div class="state-icon">
-            正常
-          </div>
-        </div>
+          </a-col>
+          <a-col :span="15" style="height: 100%;">
+            <FlexCol>
 
-        <div :class="['car-washing-machine-tabs',activeCarTabs ==3?'active-car-washing-machine-tabs':'']"
-             @click="carChange(3)">
-          <div class="rank-num">1</div>
-          <div class="car-washing-machine-name">西门洗车</div>
-          <div class="state-icon">
-            正常
-          </div>
-        </div>
-      </div>
+              <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%;">
+            <FlexCol>
+              <web3-title>洗车机视频</web3-title>
+              <Split height="10"></Split>
+              <ModuleContent2 height="300px">
 
-      <div class="center-content">
-        <div class="map-content">
-          <Map></Map>
-        </div>
-        <div class="table-content">
-          <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>
-      </div>
+              </ModuleContent2>
+              <web3-title>洗车机运行信息</web3-title>
+              <Split height="10"></Split>
+              <ModuleContent2>
 
-      <div class="right-content">
-        <div class="_title">洗车机视频</div>
-        <div class="car-wash-video">
-        </div>
-
-        <div class="_title">洗车机运行信息</div>
-        <div class="car-run-info">
-          <div class="_title" style="text-align: center;">xxx洗车机</div>
-
-          <div class="details-info">
-            <div class="details-info-item">
-              <div class="_title">运行状态：</div>
-              <div class="_title">正常</div>
-            </div>
-            <div class="details-info-item">
-              <div class="_title">冲洗压力：</div>
-              <div class="_title">500KPA</div>
-            </div>
-            <div class="details-info-item">
-              <div class="_title">冲洗电流：</div>
-              <div class="_title">50A</div>
-            </div>
-            <div class="details-info-item">
-              <div class="_title">冲洗电压：</div>
-              <div class="_title">500KV</div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-    </div>
-  </div>
+              </ModuleContent2>
+            </FlexCol>
+          </a-col>
+        </a-row>
+      </ModuleContent>
+    </flex-col>
+  </new-bg>
 </template>
 <script>
 import Map from "../../components/Map.vue";
 import Curd from "../../components/smallCommon/Curd.vue";
 import moment from "moment/moment";
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import NewBg from "../../components/NewBg.vue";
+import FlexCol from "../../components/FlexCol.vue";
+import ModuleContent from "../../components/ModuleContent.vue";
+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";
 
 export default {
   name: "xichejiguanli",
   components: {
+    CustomTable,
+    ModuleContent2,
+    Split,
+    Web3Title,
+    ModuleContent,
+    FlexCol, NewBg, SystemTitle,
     Map,
     Curd
   },
@@ -166,6 +154,18 @@ export default {
 }
 </script>
 <style scoped lang="less">
+.map-content {
+  height: 400px;
+  width: 100%;
+  position: relative;
+}
+
+.table-content {
+  flex: 1;
+  padding-top: 10px;
+}
+
+
 .xichejiguanli {
   height: 100vh;
   display: flex;
@@ -215,25 +215,7 @@ export default {
       }
     }
 
-    .center-content {
-      flex: 1;
-      margin: 0 10px;
-      border: 1px solid #e8e8e8;
-      border-radius: 10px;
-      display: flex;
-      flex-flow: column;
 
-      .map-content {
-        height: 400px;
-        width: 100%;
-        position: relative;
-      }
-
-      .table-content {
-        flex: 1;
-        padding-top: 10px;
-      }
-    }
 
     .right-content {
       width: 300px;
diff --git a/pages/youzuzhi/paifang.vue b/pages/youzuzhi/paifang.vue
index 5197f0c..86931fc 100644
--- a/pages/youzuzhi/paifang.vue
+++ b/pages/youzuzhi/paifang.vue
@@ -45,10 +45,6 @@
                   <cus-button>
                     <nuxt-link to="/youzuzhi/paifangtongji">环保排放统计</nuxt-link>
                   </cus-button>
-                  <!--            <cus-button>
-                                <nuxt-link to="/cleanTravel/bangcheng">磅秤台账</nuxt-link>
-                                </cus-button>
-                              <cus-button>门禁监控</cus-button>-->
                 </butgroup>
               </div>
             </a-col>
@@ -109,11 +105,11 @@ export default {
     this.getData(1)
   },
   methods: {
-    changeTab (tab) {
-      this.getData(tab)
+    changeTab ({ key }) {
+      this.getData(key)
     },
     getData (deviceType) {
-      this.$http.get('/api/Organized/listanddevice', {
+      this.$get('/api/Organized/listanddevice', {
         organizedType: 1,
         deviceType: deviceType
       }).then(({data}) => {