lg_frontend/pages/wuzuzhi/xichejiguanli.vue

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

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

        <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="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>

      <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>
</template>
<script>
import Map from "../../components/Map.vue";
import Curd from "../../components/smallCommon/Curd.vue";
import moment from "moment/moment";

export default {
  name: "xichejiguanli",
  components: {
    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">
.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;
      }
    }

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