lg_frontend/pages/cleanTravel/home.vue

<!--峰煤监控系统-->
<template>
  <new-bg>
    <flex-col>
      <system-title custom-title="清洁运输" show-back  />
      <ModuleContent padding="20px">
        <flex-col>
          <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"
                        :table-props="tableProps"
                        :custom-search="customSearch"
                        ref="cusTable"
                      />

                    </div>
                  </ModuleContent>
                </flex-col>


              </div>
            </BFC>
          </ModuleContent>
          <butgroup>
            <cus-button>
              <nuxt-link to="/cleanTravel/ledger">厂区车辆台账</nuxt-link>
            </cus-button>
            <cus-button>
              <nuxt-link to="/cleanTravel/trend">清洁运输趋势</nuxt-link>
              </cus-button>
            <cus-button>
              <nuxt-link to="/cleanTravel/bangcheng">磅秤台账</nuxt-link>
            </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: {
        scroll: {y: 500},
        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', noPage: true },
      },
      selectedRecord: {},
      bgStr,
      searchCarNum: '',
      tableH: 513,
      count: {
        addCount: 0,
        comeCount: 1,
        inCount: 1,
        outCount: 0,
      },
      dataSource: [],
      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%'
        }
      ],
      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,
    })
  },
  watch : {
    searchCarNum () {
      this.$nextTick(() => {
        if (this.$refs.cusTable) {
          this.$refs.cusTable.doSearch()
        }
      })
    }
  },
  mounted() {
    this.getCount()
    this.getDataSource()
    this.$nextTick(() => {
      const win = window.top
      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)
      })

      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);
          }
        })
      }
    },

    customSearch (data = []) {
      if (!this.searchCarNum) return data
      return data.filter(item => item.carNumber.indexOf(this.searchCarNum) >= 0)
    }
  }
}
</script>

<style>
body, html, #__nuxt, #__layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.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>