lg_frontend/pages/cleanTravel/trend.vue

<template>
  <new-bg>
    <flex-col>
      <system-title show-back/>
      <ModuleContent padding="0px 20px 20px">
        <FlexCol>

          <web2-title>清洁运输+趋势</web2-title>
          <Split height="16"/>
          <ModuleContent2 :border="false" padding="0">
            <a-row :gutter="16" class="h100">
              <a-col :span="6" class="h100">
                <ModuleContent2 :border="false" padding="0">
                  <FlexCol>
                    <web3-title>运输车辆占比</web3-title>
                    <ModuleContent2 :border="false" padding="0" height="43%">
                      <Pie2 :data="cheliangData" title="运输车辆"></Pie2>
                    </ModuleContent2>
                    <web3-title>运输量占比</web3-title>
                    <ModuleContent2 :border="false" padding="0">
                      <Pie2 :data="yunshuliangData" title="运输量"></Pie2>
                    </ModuleContent2>
                  </FlexCol>

                </ModuleContent2>
              </a-col>
              <a-col :span="18" class="h100">
                <CustomTable
                    hide-action
                    hide-button
                    :columns="columns"
                    :api-conf="apiConf"
                    :form-items="formItems"
                >
                  <template slot="search-button" slot-scope="{ search }">
                    <a-button type="primary" @click="exportList(search)" style="margin-left: 10px;">导出</a-button>
                    <Split height="10"></Split>
                  </template>
                </CustomTable>
              </a-col>
            </a-row>
          </ModuleContent2>
        </FlexCol>
      </ModuleContent>
    </flex-col>
  </new-bg>

</template>
<script>
import Curd from "../../components/smallCommon/Curd.vue";
import moment from '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 CustomTable from "@/components/smallCommon/CustomTable.vue";
import Split from "@/components/smallCommon/Split.vue";
import Web2Title from "@/components/smallCommon/Web2Title.vue";
import ModuleContent2 from "@/components/smallCommon/ModuleContent2.vue";
import CustomDesc2 from "@/components/smallCommon/CusDesc2.vue";
import Web3Title from "@/components/smallCommon/Web3Title.vue";
import Pie2 from "@/components/smallCommon/Pie2.vue";

export default {
  name: "user",
  components: {
    Web3Title,
    CustomDesc2, ModuleContent2,
    Web2Title,
    Split,
    CustomTable,
    ModuleContent, FlexCol, NewBg, SystemTitle,
    Curd,
    Pie2
  },
  data() {
    const self = this
    return {
      cheliangData: [],
      yunshuliangData: [],
      yunshuzongliang: 0,
      isEdit: false,
      roles: [],
      columns: [
        {
          dataIndex: 'time',
          key: 'time',
          title: '日期'
        },
        {
          dataIndex: 'carNumber',
          key: 'carNumber',
          title: '车牌号'
        },
        {
          dataIndex: 'carType',
          key: 'carType',
          title: '车型'
        },
        {
          dataIndex: 'effluent',
          key: 'effluent',
          title: '燃油车'
        }
      ],
      apiConf: {
        listApi: {api: '/api/Transport/gettransport', method: 'get', renderKey: 'item.cleans', after (data) {
            self.cheliangData = [
              { name: '国五', value: data.item.v5Percent },
              { name: '国六', value: data.item.v6Percent },
              { name: '电动', value: data.item.electricPrecent },
              { name: '其他', value: data.item.otherPrecent },
            ]

            self.yunshuliangData = [
              { name: '国五', value: data.item.v5WeightPercent },
              { name: '国六', value: data.item.v6WeightPercent },
              { name: '电动', value: data.item.electricWeightPrecent },
              { name: '其他', value: data.item.otherWeightPrecent },
            ]
          }},
      }
    }
  },

  computed: {
    formItems() {
      return [
        {
          type: 'dateRange',
          key: 'time',
          label: '日期',
          isSearch: true,
          hide: true,
          placeholder: ['请选择开始日期', '请选择结束日期'],
          rules: [
            {required: true, message: '请选择时间范围'}
          ],
          fields: ['startTime', 'endTime']
        },
      ]
    }
  },
  created() {
    this.getyunshuzongliang()
  },

  methods: {
    getyunshuzongliang() {

    },
    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')
    },
    searchList (search) {
      const [startTime, endTime] = search.time
      this.$get('/api/Transport/gettransport', {
        startTime: moment(startTime).format('YYYY-MM-DD'),
        endTime: moment(endTime).format('YYYY-MM-DD'),
      })
    }

  }
}
</script>
<style scoped lang="less">

</style>