lg_frontend/pages/wuzuzhi/xichejiguanli.vue

<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>
          <a-col :span="5" style="height: 100%;">
            <FlexCol>
              <web3-title>洗车机视频</web3-title>
              <Split height="10"></Split>
              <ModuleContent2 height="300px">

              </ModuleContent2>
              <web3-title>洗车机运行信息</web3-title>
              <Split height="10"></Split>
              <ModuleContent2>

              </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
  },
  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>