From fc51e54c329ce7717dd08d15edcd165f4547888e Mon Sep 17 00:00:00 2001
From: "DESKTOP-VMMLSOQ\\wangzg" <1161909281@qq.com>
Date: Thu, 27 Jun 2024 00:52:06 +0800
Subject: [PATCH] 1

---
 components/smallCommon/Curd.vue        |  43 ++-
 components/smallCommon/CustomTable.vue |  46 +++
 layouts/manager.vue                    | 103 +++---
 layouts/user.vue                       |  16 +
 pages/cleanTravel/home.vue             | 438 +++++++++++++++++++++++++
 pages/cleanTravel/ledger.vue           | 140 ++++++++
 pages/cleanTravel/trend.vue            | 126 +++++++
 pages/manager/device.vue               |   2 +-
 pages/manager/user.vue                 |   7 +-
 postcss.config.js                      |   4 +
 10 files changed, 868 insertions(+), 57 deletions(-)
 create mode 100644 components/smallCommon/CustomTable.vue
 create mode 100644 layouts/user.vue
 create mode 100644 pages/cleanTravel/home.vue
 create mode 100644 pages/cleanTravel/ledger.vue
 create mode 100644 pages/cleanTravel/trend.vue

diff --git a/components/smallCommon/Curd.vue b/components/smallCommon/Curd.vue
index 4cdc972..390a9bc 100644
--- a/components/smallCommon/Curd.vue
+++ b/components/smallCommon/Curd.vue
@@ -2,7 +2,7 @@
 
 <template>
   <div style="text-align: left">
-    <div class="table-search">
+    <div class="table-search" v-if="searchItems.length > 0">
       <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch" layout="inline" @change="handleSearchFormChange">
         <a-form-item v-for="menuItem in searchItems" :key="menuItem.key" :label="menuItem.label">
           <a-input
@@ -21,18 +21,19 @@
             :placeholder="menuItem.placeholder || ''"  v-decorator="[menuItem.key]" v-else-if="menuItem.type === 'dateRange'" format="YYYY-MM-DD" />
         </a-form-item>
        <a-form-item>
-         <a-button type="primary" html-type="submit">查询</a-button>
-         <a-button :style="{ marginLeft: '8px' }" @click="reset">重置</a-button>
+         <a-button type="primary" html-type="submit" v-if="!hideSearch">查询</a-button>
+         <a-button :style="{ marginLeft: '8px' }" @click="reset" v-if="!hideSearch">重置</a-button>
+         <slot name="search-button" v-bind:search="form.getFieldsValue()"></slot>
        </a-form-item>
       </a-form>
     </div>
-    <a-divider />
-    <div class="table-operations">
+    <a-divider v-if="!hideButton && searchItems.length > 0" />
+    <div class="table-operations" v-if="!hideButton">
       <a-button @click="addRow" type="primary">
         添加
       </a-button>
     </div>
-    <a-table :row-key="primaryKey" :columns="realColumns" :data-source="tableDataSource" @change="handleChange" >
+    <a-table v-bind="tableProps" :pagination="page" :row-key="primaryKey" :columns="realColumns" :data-source="tableDataSource" @change="handleChange" >
       <span slot="action" slot-scope="text, record">
         <a-button type="danger" size="small" @click="deleteRow(record)">删除</a-button>
         <a-divider type="vertical" />
@@ -99,12 +100,29 @@ export default {
       selectRow: null,
       page: {
         pageSize: 10,
-        pageNo: 1
+        current: 1,
+        total: 0
       },
       searchFormModel: {}
     }
   },
   props: {
+    tableProps: {
+      type: Object,
+      default: () => ({})
+    },
+    hideSearch: {
+      type: Boolean,
+      default: false
+    },
+    hideAction: {
+      type: Boolean,
+      default: false
+    },
+    hideButton: {
+      type: Boolean,
+      default: false
+    },
     // 表单内容配置
     formItems: {
       type: Array,
@@ -130,6 +148,7 @@ export default {
       return this.formItems.filter(item => !!item.isSearch)
     },
     realColumns () {
+      if (this.hideAction) return [ ...this.columns ]
       return [
         ...this.columns,
         {
@@ -188,12 +207,14 @@ export default {
     },
     deleteRow(row) {
       const self = this
+      if (!self.apiConf.deleteApi) return
       this.$confirm({
         title: '确认要删除么?',
         okText: '确认',
         okType: 'danger',
         cancelText: '再想想',
         onOk() {
+
           const { api,deleteKey, paramsType, method  } = self.apiConf.deleteApi
           let params = {}
           if (paramsType === 'Array') {
@@ -210,9 +231,9 @@ export default {
 
 
     },
-    handleChange ({ pageSize, pageNo }) {
+    handleChange ({ pageSize, current }) {
       this.page.pageSize = pageSize
-      this.page.pageNo = pageNo
+      this.page.current = current
       this.handleSearch()
     },
     reset() {
@@ -225,11 +246,13 @@ export default {
       const { data } = await this[`$${method}`](api, {
         ...values,
         pageSize: this.page.pageSize,
-        current: this.page.pageNo,
+        current: this.page.current,
       })
       if (noPage) {
+        this.page = false
         this.tableDataSource = data
       } else {
+        this.page.total = data.total || 0
         this.tableDataSource = data.items
       }
     },
diff --git a/components/smallCommon/CustomTable.vue b/components/smallCommon/CustomTable.vue
new file mode 100644
index 0000000..66b7f82
--- /dev/null
+++ b/components/smallCommon/CustomTable.vue
@@ -0,0 +1,46 @@
+
+
+<template>
+  <div class="custom-table">
+    <Curd v-bind="$attrs" v-on="$listeners"></Curd>
+  </div>
+</template>
+<script>
+import Curd from "./Curd.vue";
+
+export default {
+  name: "CustomTable",
+  components: {Curd}
+}
+</script>
+<style scoped lang="less">
+  .custom-table {
+    /deep/ .ant-table-thead > tr > th {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
+      color: rgba(255, 255, 255, 1);
+    }
+
+    /deep/ .ant-table {
+      background: rgba(255, 255, 255, 0.01);
+      color: #FFFFFF;
+    }
+    /deep/ .ant-table-tbody > tr > td {
+      background-color: transparent;
+      border-bottom: 1px solid rgba(16, 40, 73, 0.3);
+      border-top: 1px solid rgba(16, 40, 73, 0.3);
+    }
+
+    /deep/ .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
+    /deep/ .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
+    /deep/ .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
+    /deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+      background: rgba(255, 255, 255, 0.01);
+      color: #FFFFFF;
+    }
+    /deep/ .selected {
+      background: linear-gradient(90deg, rgba(16, 40, 73, 0) 0%, rgba(16, 40, 73, 1) 51.3%, rgba(16, 40, 73, 0) 100%);
+      border-bottom: 1px solid rgba(18, 45, 79, 0.8);
+      border-top: 1px solid rgba(18, 45, 79, 0.8);
+    }
+  }
+</style>
diff --git a/layouts/manager.vue b/layouts/manager.vue
index c4773a6..2924572 100644
--- a/layouts/manager.vue
+++ b/layouts/manager.vue
@@ -1,62 +1,68 @@
 <template>
-  <a-layout id="components-layout-demo-fixed-sider">
-    <a-layout-sider :trigger="null" v-model="collapsed" collapsible>
-      <div class="logo">
-        欢迎
-      </div>
-      <a-menu theme="dark" mode="inline" v-model="selectedKeys">
-        <a-menu-item key="1" v-for="item in menus" :key="item.key">
-          <a-icon :type="item.icon"/>
-          <span class="nav-text">{{ item.title }}</span>
-        </a-menu-item>
-      </a-menu>
-    </a-layout-sider>
-    <a-layout>
-      <a-layout-header
-        style="background: #fff; padding: 0"
-        ref="header"
-        :title="pageTitle"
-        :breadcrumb="{ props: { routes } }"
-      >
-        <div class="header-con">
+  <a-locale-provider :locale="zh_CN">
+    <a-layout id="components-layout-demo-fixed-sider">
+      <a-layout-sider :trigger="null" v-model="collapsed" collapsible>
+        <div class="logo">
+          欢迎
+        </div>
+        <a-menu theme="dark" mode="inline" v-model="selectedKeys">
+          <a-menu-item key="1" v-for="item in menus" :key="item.key">
+            <a-icon :type="item.icon"/>
+            <span class="nav-text">{{ item.title }}</span>
+          </a-menu-item>
+        </a-menu>
+      </a-layout-sider>
+      <a-layout>
+        <a-layout-header
+          style="background: #fff; padding: 0"
+          ref="header"
+          :title="pageTitle"
+          :breadcrumb="{ props: { routes } }"
+        >
+          <div class="header-con">
 
-          <a-icon
-            class="trigger"
-            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
-            @click="() => (collapsed = !collapsed)"
-          />
-          <a-menu class="cus-menu">
-            <a-sub-menu>
+            <a-icon
+              class="trigger"
+              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
+              @click="() => (collapsed = !collapsed)"
+            />
+            <a-menu class="cus-menu">
+              <a-sub-menu>
               <span slot="title" class="submenu-title-wrapper">
                 <a-icon type="setting"/>
                 操作
               </span>
-              <a-menu-item key="setting:2">修改密码</a-menu-item>
-              <a-menu-item key="setting:1">退出</a-menu-item>
-            </a-sub-menu>
-          </a-menu>
+                <a-menu-item key="setting:2">修改密码</a-menu-item>
+                <a-menu-item key="setting:1">退出</a-menu-item>
+              </a-sub-menu>
+            </a-menu>
 
-        </div>
+          </div>
 
 
-      </a-layout-header>
-      <a-layout-content :style="contentStyle">
-        <div :style="containerStyle">
-          <nuxt/>
-        </div>
-      </a-layout-content>
-      <!--      <a-layout-footer :style="{ textAlign: 'center' }" ref="footer">
-              Ant Design ©2018 Created by Ant UED
-            </a-layout-footer>-->
+        </a-layout-header>
+        <a-layout-content :style="contentStyle">
+          <div :style="containerStyle">
+            <nuxt/>
+          </div>
+        </a-layout-content>
+        <!--      <a-layout-footer :style="{ textAlign: 'center' }" ref="footer">
+                Ant Design ©2018 Created by Ant UED
+              </a-layout-footer>-->
+      </a-layout>
     </a-layout>
-  </a-layout>
+  </a-locale-provider>
 </template>
 
 <script>
+import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
+import 'moment/locale/zh-cn';
+
 export default {
   name: "manager",
   data() {
     return {
+      zh_CN,
       collapsed: false,
       headerHeight: 0,
       footerHeight: 0,
@@ -85,6 +91,12 @@ export default {
           title: '菜单管理',
           icon: 'link',
           key: 'manager-menu'
+        },
+        {
+          link: '/manager/device',
+          title: '设备管理',
+          icon: 'video-camera',
+          key: 'manager-device'
         }
       ],
       selectedKeys: []
@@ -93,12 +105,12 @@ export default {
   watch: {
     '$route': {
       immediate: true,
-      handler (to) {
+      handler(to) {
         this.selectedKeys = [to.name]
       }
     },
-    selectedKeys ([key]) {
-      this.$router.push({ name: key })
+    selectedKeys([key]) {
+      this.$router.push({name: key})
     }
   },
   computed: {
@@ -136,6 +148,7 @@ export default {
     display: none;
   }
 }
+
 #components-layout-demo-fixed-sider {
   .header-con {
     width: 100%;
diff --git a/layouts/user.vue b/layouts/user.vue
new file mode 100644
index 0000000..5a061af
--- /dev/null
+++ b/layouts/user.vue
@@ -0,0 +1,16 @@
+
+
+<template>
+  <a-card :bordered="false" :bodyStyle="{ padding: '0px 16px' }">
+    <nuxt />
+  </a-card>
+
+</template>
+<script>
+export default {
+  name: "user"
+}
+</script>
+<style scoped lang="less">
+
+</style>
diff --git a/pages/cleanTravel/home.vue b/pages/cleanTravel/home.vue
new file mode 100644
index 0000000..985e7a3
--- /dev/null
+++ b/pages/cleanTravel/home.vue
@@ -0,0 +1,438 @@
+<!--峰煤监控系统-->
+<template>
+  <new-bg>
+    <flex-col>
+      <system-title/>
+      <ModuleContent padding="20px">
+        <flex-col>
+          <web2-title>清洁运输</web2-title>
+          <ModuleContent padding="0 20px 20px">
+            <BFC>
+              <div class="sou-suo-kuang" slot="right">
+                <ModuleContent2 bg padding="20px">
+                  <flex-col>
+                    <div class="search">
+                      <BFC>
+                        <span slot="left"> 车牌号:</span>
+                        <div slot="center" class="input">
+                          <a-input v-model="searchCarNum" placeholder="请输入"/>
+                        </div>
+                      </BFC>
+                    </div>
+                    <ModuleContent padding="0">
+                      <flex-col>
+                        <web3-title>门禁详情</web3-title>
+                        <ModuleContent padding="0">
+                          <flex-col>
+                            <img :src="selectedRecord.imgUrl" alt="" class="car-preview">
+                            <butgroup2>
+                              <cus-button2 flex>进出场抓拍图</cus-button2>
+                              <cus-button2>行驶证-正面</cus-button2>
+                              <cus-button2>行驶证-反面</cus-button2>
+                              <cus-button2>环保清单</cus-button2>
+                            </butgroup2>
+                            <ModuleContent padding="20px 27px" class="desc">
+                              <cus-desc :data="selectedRecord" :columns="descColumns"></cus-desc>
+                            </ModuleContent>
+                          </flex-col>
+
+                        </ModuleContent>
+                      </flex-col>
+
+                    </ModuleContent>
+                  </flex-col>
+                </ModuleContent2>
+              </div>
+              <div class="liebiao" slot="center">
+                <flex-col>
+                  <div style="height: 144px;width: 100%;">
+                    <ModuleContent2 bg bg-str :border="false">
+                      <butgroup2 style="height: 100%;">
+                        <ModuleContent2 bg bg-color border>
+                          <miaoshu title="进场车辆" :value="count.comeCount" color="rgba(42, 207, 255, 1)"></miaoshu>
+                        </ModuleContent2>
+
+                        <ModuleContent2 bg bg-color border style="margin-left: 16px;">
+                          <miaoshu title="出场车辆" :value="count.outCount" color="rgba(255, 171, 87, 1)"></miaoshu>
+                        </ModuleContent2>
+
+                        <ModuleContent2 bg bg-color border style="margin-left: 16px;">
+                          <miaoshu title="在场车辆" :value="count.inCount" color="rgba(122, 175, 255, 1)"></miaoshu>
+                        </ModuleContent2>
+
+                        <ModuleContent2 bg bg-color border style="margin-left: 16px;">
+                          <miaoshu title="新增车辆" :value="count.addCount" color="rgba(76, 243, 129, 1)"></miaoshu>
+                        </ModuleContent2>
+                      </butgroup2>
+                    </ModuleContent2>
+                  </div>
+                  <web3-title>门禁监控</web3-title>
+                  <ModuleContent padding="20px 0" ref="module">
+                    <div class="table-content">
+                      <PeakCustomTable
+                        hide-action
+                        hide-search
+                        hide-button
+                        :columns="columns"
+                        :api-conf="apiConf"
+                        :tableProps="tableProps"
+                      />
+
+                    </div>
+                  </ModuleContent>
+                </flex-col>
+
+
+              </div>
+            </BFC>
+          </ModuleContent>
+          <butgroup>
+            <cus-button>厂区车辆台账</cus-button>
+            <cus-button>清洁运输趋势</cus-button>
+            <cus-button>磅秤台账</cus-button>
+            <cus-button>门禁监控</cus-button>
+          </butgroup>
+        </flex-col>
+      </ModuleContent>
+    </flex-col>
+  </new-bg>
+</template>
+
+<script>
+import {mapActions, mapState} from "vuex";
+import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
+import FlexCol from "../../components/FlexCol.vue";
+import ModuleContent from "../../components/ModuleContent.vue";
+import Web2Title from "../../components/smallCommon/Web2Title.vue";
+import NewBg from "../../components/NewBg.vue";
+import BFC from "../../components/BFC.vue";
+import Butgroup from "../../components/smallCommon/butgroup.vue";
+import CusButton from "../../components/smallCommon/CusButton.vue";
+import Web3Title from "../../components/smallCommon/Web3Title.vue";
+import CusButton2 from "../../components/smallCommon/CusButton2.vue";
+import Butgroup2 from "../../components/smallCommon/butgroup2.vue";
+import CusDesc from "../../components/smallCommon/CusDesc.vue";
+import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
+import Miaoshu from "../../components/smallCommon/miaoshu.vue";
+import bgStr from '../../assets/images/new/矩形 17.png'
+import PeakCustomTable from "@/components/smallCommon/CustomTable";
+import Curd from "../../components/smallCommon/Curd.vue";
+
+export default {
+  name: "PeakCoalMonitoring",
+  components: {
+    Curd,
+    Miaoshu,
+    ModuleContent2,
+    CusDesc,
+    Butgroup2,
+    CusButton2,
+    Web3Title,
+    CusButton,
+    Butgroup,
+    BFC,
+    Web2Title,
+    NewBg,
+    ModuleContent,
+    FlexCol,
+    SystemTitle,
+    PeakCustomTable
+  },
+  data() {
+    const self = this
+    return {
+      tableProps: {
+        customRow (record) {
+          return {
+            on: {
+              click: (event) => {
+                self.selectedRecord = record
+              }
+            }
+          }
+        },
+        rowClassName (record, index) {
+          if (record.id === self.selectedRecord.id) return 'selected'
+          return ''
+        }
+      },
+      apiConf: {
+        listApi: { api: '/api/Transport/list', method: 'get' },
+      },
+      selectedRecord: {},
+      bgStr,
+      searchCarNum: '',
+      tableH: 513,
+      count: {
+        addCount: 0,
+        comeCount: 1,
+        inCount: 1,
+        outCount: 0,
+      },
+      dataSource: [],
+      descColumns: [
+        {
+          title: '设备掉线',
+          dataIndex: 'deviceName',
+          width: '33.333%'
+        },
+        {
+          title: '故障异常',
+          dataIndex: 'errorName',
+          width: '33.333%'
+        },
+        {
+          title: '异常报警',
+          dataIndex: 'errorImg',
+          width: '33.333%'
+        }
+      ],
+      columns: [
+        {
+          dataIndex: 'carNumber',
+          key: 'carNumber',
+          title: '车牌号'
+        },
+        {
+          dataIndex: 'transportType',
+          key: 'transportType',
+          title: '类型',
+          customRender(transportType) {
+            if (transportType === 1) return '进厂'
+            return '出厂'
+          }
+        },
+        {
+          dataIndex: 'address',
+          key: 'address',
+          title: '进出厂位置'
+        },
+        {
+          dataIndex: 'registered',
+          key: 'registered',
+          title: '出/入厂位置'
+        },
+        {
+          dataIndex: 'goods',
+          key: 'goods',
+          title: '物料类型'
+        },
+        {
+          dataIndex: 'effluent',
+          key: 'effluent',
+          title: '排放标准'
+        },
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      title: state => state.system.title,
+    })
+  },
+  mounted() {
+    this.getCount()
+    this.getDataSource()
+    this.$nextTick(() => {
+      const win = window.top
+      this.$http.get('http://101.43.201.20:5000/api/Home/view').then(({data}) => {
+        win.document.title = data.home.title
+        this.setTitle(data.home.title)
+        this.setInfo(data)
+      })
+
+      if (this.$refs.module) {
+        const offsetHeight = this.$refs.module.$el.offsetHeight - 40
+        this.tableH = offsetHeight
+      }
+    })
+  },
+  methods: {
+    ...mapActions('system', ['setTitle', 'setInfo']),
+    getCount() {
+      this.$get('/api/Transport/count').then(({data}) => {
+        this.count = data
+      })
+    },
+
+    getDataSource () {
+      this.$get('/api/Transport/list').then(({data}) => {
+        this.dataSource = data
+      })
+    },
+
+    /**
+     * 图层构造器
+     * @param { object } props
+     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪)  zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
+     * @param { object } props.data 图层类型
+     */
+    pointClick({layerType, data}) {
+      // todo
+      if (layerType == 'wz') {
+        this.$open(WZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'middle',
+          title: '微站',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'sdjcy') {
+        this.$open(SDJCYDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '深度检测仪',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'zkz') {
+        this.$open(ZKZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '质控站',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'gbz') {
+        this.$open(GBZDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '国标站',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'cems') {
+        this.$open(CEMSDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: 'CEMS',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      } else if (layerType === 'jkd') {
+        this.$open(pointDialog, {
+          type: 'middle'
+        }, {
+          screenType: 'custommiddle',
+          title: '监控点',
+          width: 1100,
+          onClose() {
+            console.log(1);
+          }
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style>
+body, html, #__nuxt, #__layout {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #09151F;
+}
+
+.list-enter-active, .list-leave-active {
+  transition: all 0.5s;
+}
+
+.list-enter, .list-leave-to
+  /* .list-leave-active for below version 2.1.8 */
+{
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>
+
+<style scoped lang="less">
+@import "../../assets/styles/mixin";
+
+.sou-suo-kuang {
+  height: 100%;
+  width: 580px;
+  box-sizing: border-box;
+  padding-left: 20px;
+  pointer-events: auto;
+
+
+  .search {
+    /deep/ .ant-input {
+      color: #fff;
+      background: rgba(5, 38, 93, 1);
+      border: 1.28px solid rgba(35, 209, 232, 1);
+
+      &:hover {
+        color: #fff;
+        background: rgba(5, 38, 93, 1);
+        border: 1.28px solid rgba(35, 209, 232, 1);
+
+      }
+    }
+
+    width: 100%;
+    height: 90px;
+    box-sizing: border-box;
+    padding: 28px 16px;
+
+    background: rgba(24, 131, 201, 0.2);
+
+
+    /** 文本1 */
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 23.17px;
+    color: rgba(255, 255, 255, 1);
+    text-align: left;
+    vertical-align: top;
+    line-height: 32px;
+
+    .input {
+      margin-left: 10px;
+      pointer-events: auto;
+    }
+
+  }
+
+}
+
+.liebiao {
+  height: 100%;
+
+}
+
+.car-preview {
+  width: 100%;
+  height: 260px;
+}
+
+.desc {
+  background: rgba(24, 131, 201, 0.2);
+  border: 1px solid rgba(15, 81, 122, 1);
+}
+
+.table-content {
+  padding-top: 20px;
+  flex: 1;
+  height: 100%;
+}
+
+</style>
+
diff --git a/pages/cleanTravel/ledger.vue b/pages/cleanTravel/ledger.vue
new file mode 100644
index 0000000..63a2b8d
--- /dev/null
+++ b/pages/cleanTravel/ledger.vue
@@ -0,0 +1,140 @@
+
+
+<template>
+  <div>
+    <a-page-header
+      :ghost="false"
+      style="border-bottom: 1px solid rgb(235, 237, 240)"
+      title="厂区车辆台账"
+      @back="() => $router.go(-1)"
+    />
+    <a-row :gutter="16">
+      <a-col :span="6">
+        <a-card title="运输车辆" size="small">
+          <p>card content</p>
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card title="国Ⅵ输车辆" size="small">
+          <p>card content</p>
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card title="非道路工程机械" size="small">
+          <p>card content</p>
+        </a-card>
+      </a-col>
+      <a-col :span="6">
+        <a-card title="燃油运输车辆"  size="small">
+          <p>card content</p>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-divider />
+    <Curd
+      hide-action
+      hide-search
+      hide-button
+      :columns="columns"
+      :api-conf="apiConf"
+      :form-items="formItems"
+      @edit="editHandler"
+    >
+      <template slot="search-button" slot-scope="{ search }">
+        <a-button type="primary" @click="exportList(search)">导出历史数据</a-button>
+      </template>
+    </Curd>
+  </div>
+</template>
+<script>
+import Curd from "../../components/smallCommon/Curd.vue";
+import moment from 'moment'
+export default {
+  name: "user",
+  layout: "user",
+  components: {
+    Curd
+  },
+  data () {
+    return {
+      isEdit: false,
+      roles: [],
+      columns: [
+        {
+          dataIndex: 'outTime',
+          key: 'outTime',
+          title: '日期'
+        },
+        {
+          dataIndex: 'carNum',
+          key: 'carNum',
+          title: '车牌号'
+        },
+        {
+          dataIndex: 'carModel',
+          key: 'carModel',
+          title: '车型'
+        },
+        {
+          dataIndex: 'newCar',
+          key: 'newCar',
+          title: '新能源',
+          customRender (text) {
+            if (text) return '是'
+            return '否'
+          }
+        },
+        {
+          dataIndex: 'emissions',
+          key: 'emissions',
+          title: '燃油车'
+        },
+        {
+          dataIndex: 'createDateTime',
+          key: 'createDateTime',
+          title: '出厂日期'
+        }
+      ],
+      apiConf: {
+        listApi: { api: '/api/Ledger/list', method: 'get' },
+      }
+    }
+  },
+
+  computed: {
+    formItems () {
+      return [
+        {
+          type: 'dateRange',
+          key: 'time',
+          label: '日期',
+          isSearch: true,
+          placeholder: ['请选择开始日期', '请选择结束日期'],
+          rules: [
+            { required: true, message: '请选择时间范围' }
+          ],
+          fields: ['startTime', 'endTime']
+        }
+      ]
+    }
+  },
+  created() {
+  },
+
+  methods: {
+    editHandler (isEdit) {
+      this.isEdit = isEdit
+    },
+    exportList ({ time }) {
+      const [ start, end ] = time
+      const fmt = 'YYYY-MM-DD'
+      window.open(`http://101.43.201.20:5000/api/Ledger/export?start=${moment(start).format(fmt)}&end=${moment(end).format(fmt)}`, '_blank')
+    }
+
+  }
+}
+</script>
+<style scoped lang="less">
+
+</style>
diff --git a/pages/cleanTravel/trend.vue b/pages/cleanTravel/trend.vue
new file mode 100644
index 0000000..86cbde8
--- /dev/null
+++ b/pages/cleanTravel/trend.vue
@@ -0,0 +1,126 @@
+
+
+<template>
+  <div>
+    <a-page-header
+      :ghost="false"
+      title="清洁运输+趋势"
+      @back="() => $router.go(-1)"
+    />
+    <a-divider style="margin-top: 0;" />
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-card>
+          <div slot="title">
+            运输总量: {{ yunshuzongliang }}
+          </div>
+
+          <Curd
+            hide-action
+            hide-search
+            hide-button
+            :columns="columns"
+            :api-conf="apiConf"
+            :form-items="formItems"
+          >
+          </Curd>
+        </a-card>
+
+      </a-col>
+      <a-col :span="12">
+        <a-card title="国Ⅵ输车辆" size="small">
+          <p>card content</p>
+        </a-card>
+      </a-col>
+    </a-row>
+
+
+  </div>
+</template>
+<script>
+import Curd from "../../components/smallCommon/Curd.vue";
+import moment from 'moment'
+export default {
+  name: "user",
+  layout: "user",
+  components: {
+    Curd
+  },
+  data () {
+    return {
+      yunshuzongliang: 0,
+      isEdit: false,
+      roles: [],
+      columns: [
+        {
+          dataIndex: 'outTime',
+          key: 'outTime',
+          title: '日期'
+        },
+        {
+          dataIndex: 'carNum',
+          key: 'carNum',
+          title: '车牌号'
+        },
+        {
+          dataIndex: 'carModel',
+          key: 'carModel',
+          title: '车型'
+        },
+        {
+          dataIndex: 'newCar',
+          key: 'newCar',
+          title: '新能源',
+          customRender (text) {
+            if (text) return '是'
+            return '否'
+          }
+        },
+        {
+          dataIndex: 'emissions',
+          key: 'emissions',
+          title: '燃油车'
+        },
+        {
+          dataIndex: 'createDateTime',
+          key: 'createDateTime',
+          title: '出厂日期'
+        }
+      ],
+      apiConf: {
+        listApi: { api: '/api/Transport/list', method: 'get' },
+      }
+    }
+  },
+
+  computed: {
+    formItems () {
+      return [
+      ]
+    }
+  },
+  created() {
+    this.getyunshuzongliang()
+  },
+
+  methods: {
+    getyunshuzongliang () {
+      /*this.$get('/api/Transport/count').then(({ data }) => {
+        this.yunshuzongliang = data
+      })*/
+    },
+    editHandler (isEdit) {
+      this.isEdit = isEdit
+    },
+    exportList ({ time }) {
+      const [ start, end ] = time
+      const fmt = 'YYYY-MM-DD'
+      window.open(`http://101.43.201.20:5000/api/Ledger/export?start=${moment(start).format(fmt)}&end=${moment(end).format(fmt)}`, '_blank')
+    }
+
+  }
+}
+</script>
+<style scoped lang="less">
+
+</style>
diff --git a/pages/manager/device.vue b/pages/manager/device.vue
index dde9c6f..72a4777 100644
--- a/pages/manager/device.vue
+++ b/pages/manager/device.vue
@@ -66,7 +66,7 @@ export default {
         {
           type: 'input',
           key: 'deviceMN',
-          label: '编码',
+          label: 'MN编码',
           isSearch: true,
           placeholder: '请输入编码',
           rules: [
diff --git a/pages/manager/user.vue b/pages/manager/user.vue
index 754997e..f976470 100644
--- a/pages/manager/user.vue
+++ b/pages/manager/user.vue
@@ -20,6 +20,7 @@ export default {
     Curd
   },
   data () {
+    const self = this
     return {
       isEdit: false,
       roles: [],
@@ -43,7 +44,11 @@ export default {
         {
           dataIndex: 'roleId',
           key: 'roleId',
-          title: '角色'
+          title: '角色',
+          customRender (text) {
+            const item = (self.roles || []).find(item => item.value === text)
+            return item && item.label || ''
+          }
         }
       ],
       apiConf: {
diff --git a/postcss.config.js b/postcss.config.js
index 2721153..e5e9eb8 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -5,6 +5,10 @@ module.exports = {
       scale: 0.5,
       ignore: [
         'manager',
+        'video',
+        'youzuzhi',
+        'wuzuzhi',
+        'cleanTravel',
         'node_modules',
         'peak-coal-monitoring',
         'web',