lg_frontend/pages/wuzuzhi/xichejiguanli.vue

<template>
  <new-bg>
    <flex-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>
              <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>
              <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>
          </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";
import Web2Title from "../../components/smallCommon/Web2Title.vue";

export default {
  name: "xichejiguanli",
  components: {
    Web2Title,
    CustomTable,
    ModuleContent2,
    Split,
    Web3Title,
    ModuleContent,
    FlexCol, NewBg, SystemTitle,
    Map,
    Curd
  },
  data() {
    return {
      activeCarTabs: 1,
      columns: [
        {
          dataIndex: 'outTime',
          key: 'outTime',
          title: '进场日期'
        },
        {
          dataIndex: 'carNum',
          key: 'carNum',
          title: '车牌号'
        },
        {
          dataIndex: 'carModel',
          key: 'carModel',
          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']
        }
      ]
    }
  },
  methods: {
    carChange(value) {
      this.activeCarTabs = value
    },
    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">
.map-content {
  height: 400px;
  width: 100%;
  position: relative;
}

.table-content {
  flex: 1;
  padding-top: 10px;
}


.xichejiguanli {
  height: 100vh;
  display: flex;
  flex-flow: column;

  ._body {
    flex: 1;
    display: flex;
    flex-flow: row;
    padding: 20px;

    .left-list {
      width: 240px;
      height: 100%;
      border: 1px solid #e8e8e8;
      border-radius: 10px;

      .car-washing-machine-tabs {
        height: 40px;
        display: flex;
        flex-flow: row;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        border: 1px solid #e8e8e8;
        margin-top: 10px;

        &:first-child {
          margin-top: 0;
        }

        border-radius: 10px;

        .rank-num {

        }

        .car-washing-machine-name {
          padding-left: 10px;
          flex: 1;
        }
      }

      .active-car-washing-machine-tabs {
        background: #0088ff;
        color: #FFFFFF;
      }
    }



    .right-content {
      width: 300px;
      border: 1px solid #e8e8e8;
      border-radius: 10px;
      padding: 10px;

      ._title {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        font-weight: 700;
      }

      .car-wash-video {
        margin: 20px 0;
        height: 400px;
        border: 1px solid #e8e8e8;
      }

      .car-run-info {
        margin-top: 20px;
        border: 1px solid #e8e8e8;
        height: 260px;
        padding: 10px;
        display: flex;
        flex-flow: column;

        .details-info {
          width: 100%;
          flex: 1;
          display: flex;
          flex-flow: column;
          justify-content: space-around;
          align-items: flex-start;

          .details-info-item {
            display: flex;
            flex-flow: row;
          }

        }
      }
    }
  }
}
</style>