当前位置： 首页 > article >正文

vue-echarts使用

article 2024/12/26 1:42:46

vue-echarts使用

  • 排名柱状图
    • 示例
    • 代码
  • 汇总
    • 示例
    • 代码
  • 平均时效
    • 示例
    • 代码
  • 全图

排名柱状图

示例

在这里插入图片描述

代码

// 排名趋势
      <!-- 排名数据趋势图 -->
        <div class="rank">
          <div class="rank_title">
            <div class="rank_title_left">
              <span v-if="rankType === 1">{{ $lang('代理区排名') }}</span>
              <span v-else>{{ $lang('中心排名') }}</span>
            </div>
            <div class="rank_title_right">
              <el-button size="small" type="info" :class="rankType === 1 ? 'btnBgc' : ''" @click="rankChange(1)">{{ $lang('代理区') }} </el-button>
              <el-button size="small" type="info" :class="rankType !== 1 ? 'btnBgc' : ''" @click="rankChange(2)">{{ $lang('中心') }} </el-button>
            </div>
          </div>
          <div class="rank_table">
            <el-table ref="table" :data="tableData" :border="false">
              <el-table-column prop="rank" type="index" :label="$lang('排名')" width="90" header-align="right" align="right">
                <template slot-scope="{ row }">
                  <div v-if="row.rank < 4">
                    <span class="btnBgc top">Top</span> <span>{{ row.rank }}</span>
                  </div>
                  <div v-else>{{ row.rank }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="netWorkName" :label="rankType === 1 ? $lang('代理区名称') : $lang('中心名称')" width="140" header-align="center" align="center">
                <template slot-scope="{ row }">{{ row.netWorkName }} </template>
              </el-table-column>
              <el-table-column :label="$lang('总主单号数量')" header-align="left" align="left"> </el-table-column>
            </el-table>

            <v-chart ref="RankChart" class="rank_chart" :options="rankOptions" :style="{ height: rankHeight,width: rankWidth}" v-if="rankNum" />
          </div>
          data({
           return {
		      // --------------  1 排名数据趋势图表数据 ------------
      	      // 1 图表数据
            tableData: [], // table数据
            rankNum: [], // 图表数据
            // rank图表
            rankType: 1, // 排行类型 1-代理区 2-中心
            rankPage: {
             size: 10,
             current: 1,
             total: 0
            }, // 翻页信息
		  }
        })
          <!-- 分页 -->
          <div class="rank_pages b('pagination')">
            <el-pagination
              :page-size="rankPage.size"
              :current-page="rankPage.current"
              layout="prev, pager, next"
              :total="rankPage.total"
              @size-change="sizeChangeRank"
              @current-change="currentChangeRank"
            >
            </el-pagination>
           </div>
        </div>
 // 排名数据趋势图
    rankOptions() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 5,
          left: 0,
          bottom: 0,
          backgroundColor: 'transparent'
        },
        xAxis: {
          show: false,
          splitNumber: 15,
          interval: 25
        },
        yAxis: {
          type: 'category',
          show: false
        },
        series: [
          {
            type: 'bar',
            data: this.rankNum,
            showBackground: true,
            backgroundStyle: {
              color: '#ccc'
            },
            label: {
              show: true,
              position: 'right'
            },
            itemStyle: {
              barBorderRadius: 30 // 设置圆角
            },
            barWidth: 12
          }
        ],
        direction: 'horizontal'
      }
    },
    rankHeight() {
      this.$nextTick(() => {
        // 高度变化echars图表的高度也要发生变化
        this.$refs['RankChart'].resize()
      })
      return this.rankNum && this.rankNum.length > 0 ? 38 * this.rankNum.length + 'px' : '0px'
    }

汇总

示例

在这里插入图片描述

代码

        <!-- 汇总数据趋势图 -->
        <div class="collect">
          <div class="collect_btn">
            <el-button size="small" type="info" :class="charType === 1 ? 'btnBgc' : ''" @click="collectChange(1)"> {{ $lang('总包号数量') }}</el-button>
            <el-button size="small" type="info" :class="charType === 3 ? 'btnBgc' : ''" @click="collectChange(3)">{{ $lang('总主单重量') }}</el-button>
            <el-button size="small" type="info" :class="charType === 2 ? 'btnBgc' : ''" @click="collectChange(2)">{{ $lang('总交运重量') }}</el-button>
          </div>
          <v-chart ref="CollectChart" class="collect_chart"  :options="collectOptions" />
        </div>
	
	data(){
	  return {
	  	 // --------------  2 汇总数据趋势图表数据 ------------
        collectColumnars: [], // 柱状图数据
        collectBrokenLines: [], // 折线图数据
        xAxisDataCollect: [], // x轴数据 = 日期
        collectMax: null, // 最大值
        collectMin: null, // 最小值
        lineMinValue: null, // 折线最小
        lineMaxValue: null, // 折线最大
        charType: 1, // 重量类型 1-总包号数量 2-总机场交运重量 3-总主单发运
        collectData: ['', this.$lang('总包号数量'), this.$lang('总交运重量'), this.$lang('总主单重量')],
	  }
	}
	    // 汇总数据趋势图
    collectOptions() {
      const $this = this
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: `{b0} <br> {a0}: {c0}.toLocaleString() <br> {a1}: {c1}%`
          formatter: function (params) {
            let value1 = ''
            let value2 = ''
            let axisValue = ''
            params.map((item) => {
              if (item.componentSubType === 'bar') {
                axisValue = item.axisValue
                value1 = item.value.toLocaleString()
              }
              if (item.componentSubType === 'line') {
                value2 = item.value
              }
            })
            return axisValue + '<br>' + $this.collectData[$this.charType] + ' : ' + value1 + '<br>' + $this.$lang('环比') + ' : ' + value2 + '%'
          }
        },
        legend: {
          data: [$this.collectData[$this.charType], this.$lang('环比')]
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxisDataCollect
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: this.collectMax
          },
          {
            type: 'value',
            min: this.lineMinValue,
            max: this.lineMaxValue,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: $this.collectData[$this.charType],
            type: 'bar',
            data: this.collectColumnars,
            label: {
              show: true,
              position: 'top',
              fontSize: 15
            }
          },
          {
            name: $this.$lang('环比'),
            type: 'line',
            yAxisIndex: 1,
            data: this.collectBrokenLines
          }
        ]
      }
    },

平均时效

示例

在这里插入图片描述

代码

      <!-- 平均时效趋势图 -->
      <div class="average_aging" v-if="isShowAverageAgingChart">
        <div class="average_aging_title">{{$lang('平均时效(分钟)')}}</div>
        <v-chart ref="AverageAgingChart" class="average_aging_chart" :options="averageAgingOption" />
      </div>
      data(){
		return {
		 // --------------  3 平均时效趋势图表数据 ------------
         averageAgingColumnars: [], // 柱状图数据
         averageAgingBrokenLines: [], // 柱状图数据
         xAxisDataAverageAging: [], // x轴数据 = 日期
         agingMax: null, // 最大值
         agingMin: null, // 最小值
         agingLineMin: null, // 折线最大值
         agingLineMax: null // 折线最小值
		}
	  }
    // 平均时效趋势图
    averageAgingOption() {
      const $this = this
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: `{b0} <br> {a0}: {c0}(分钟) <br> {a1}: {c1}%`
          formatter: function (params) {
            let value1 = ''
            let value2 = ''
            let axisValue = ''
            params.map((item) => {
              if (item.componentSubType === 'bar') {
                axisValue = item.axisValue
                value1 = item.value.toLocaleString()
              }
              if (item.componentSubType === 'line') {
                value2 = item.value
              }
            })
            return axisValue + '<br>' + $this.$lang('平均时效') + ' : ' + value1 + $this.$lang('(分钟)') + ' <br>' + $this.$lang('环比') + ' : ' + value2 + '%'
          }
        },
        legend: {
          data: [this.$lang('平均时效'), this.$lang('环比')]
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxisDataAverageAging
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: this.agingMin,
            max: this.agingMax
          },
          {
            type: 'value',
            min: this.agingLineMin,
            max: this.agingLineMax,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: $this.$lang('平均时效'),
            type: 'bar',
            data: this.averageAgingColumnars,
            label: {
              show: true,
              position: 'top',
              fontSize: 15
            }
          },
          {
            name: $this.$lang('环比'),
            type: 'line',
            yAxisIndex: 1,
            data: this.averageAgingBrokenLines
          }
        ]
      }
    },

全图

在这里插入图片描述

<template>
  <div class="flight-transit-timeAbnormal-all">
    <avue-crud
      ref="params"
      :data="tableList"
      :option="listOpt"
      :page="page"
      :table-loading="loading"
      @size-change="sizeChange"
      @current-change="currentChange"
      @search-reset="resetList"
      @search-change="searchChange"
      :summary-method="summaryMethod"
      @cell-click="cellClick"
      :cell-class-name="cellClassName"
    >
      <template slot="menuLeft">
        <el-button size="small" type="info" @click="handleExportExcel()" v-if="hasPower('OUTEXCELALL')">
          <i class="icon-iconfont iconfont icondaochu1"></i><span>{{ $lang('导出') }}</span>
        </el-button>
        <el-button size="small" v-if="hasPower('EXPORTLOGALL')" type="info" @click="exportLogDisplay = true">
          <i class="iconfont icon-iconfont icondaochurizhi1"></i><span>{{ $lang('导出日志') }}</span>
        </el-button>
        <!-- 列表模式 + 图表模式 -->
        <el-button size="small" type="info" @click="listModel" v-if="listAndChartShow">
          <i class="iconfont icon-iconfont iconanniu-shujushuaxin"></i><span>{{ $lang('列表模式') }}</span>
        </el-button>
        <el-button size="small" type="info" @click="chartModel" v-else>
          <i class="iconfont icon-iconfont iconanniu-shujushuaxin"></i><span>{{ $lang('图表模式') }}</span>
        </el-button>
      </template>
      <template slot="timeSearch">
        <div style="width: 416px">
          <el-row>
            <el-radio-group v-model="searchForm.queryTimeType">
              <el-radio :label="1">{{ $lang('实际起飞时间') }}</el-radio>
              <el-radio :label="2">{{ $lang('实际起飞时间(WIB)') }}</el-radio>
            </el-radio-group>
          </el-row>
          <el-date-picker
            v-model="searchForm.operateDate"
            type="daterange"
            range-separator="—"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :clearable="false"
            :start-placeholder="$lang('开始时间')"
            :end-placeholder="$lang('结束时间')"
          >
          </el-date-picker>
        </div>
      </template>
      <!-- 始发代理区 登录账号非总部禁用始发代理区-->
      <template slot="startRegionCodeNameSearch">
        <BaseNetWorkNew
          style="width: 250px"
          :query="{ current: 1, size: 100, typeIds: organLevelObj.NT_AGENT_AREA }"
          :dicUrl="'/transportation/tmsSysNetwork/permissionControlQueryNet'"
          :multiple="true"
          :disabled="user.institutionalLevelId !== 22"
          :propObj="searchForm"
          v-on:update:propObj="searchForm = $event"
          :code="networkKeyValues[0].code"
          :name="networkKeyValues[0].name"
        />
      </template>
      <!-- 始发转运中心 登录账号是中心禁用始发转运中心-->
      <template slot="startNetworkNameSearch">
        <BaseNetWorkNew
          style="width: 250px"
          :query="{ current: 1, size: 100, typeIds: organLevelObj.NT_CENTER }"
          :dicUrl="'/transportation/tmsSysNetwork/permissionControlQueryNet'"
          :multiple="true"
          :disabled="user.institutionalLevelId === 335"
          :propObj="searchForm"
          v-on:update:propObj="searchForm = $event"
          :code="networkKeyValues[1].code"
          :name="networkKeyValues[1].name"
        />
      </template>
      <!-- 异常类型 -->
      <template slot="exFlagsSearch">
        <el-select v-model="searchForm.exFlags" :placeholder="$lang('请选择')" :multiple="true" style="width:250px" collapse-tags clearable>
          <el-option v-for="temp in DICT.exceptionRegistrationType" :label="temp.label" :value="temp.value" :key="temp.value"></el-option>
        </el-select>
      </template>
      <template slot="searchExtend">
        <div class="ibank-total-right">
          <div class="ibank-total-con" v-if="!chartModelShow">
            <span>{{$lang('汇总项')}}：</span>
            <el-checkbox v-model="searchForm.regionCount">{{$lang('始发代理区')}}</el-checkbox>
            <el-checkbox v-model="searchForm.networkCount">{{$lang('始发中心')}}</el-checkbox>
            <el-checkbox v-model="searchForm.exCount">{{$lang('异常类型')}}</el-checkbox>
          </div>
        </div>
      </template>
    </avue-crud>
    <!-- 导出日志 -->
    <DownloadCenter :dialogVisible.sync="exportLogDisplay" :moduleType="313"></DownloadCenter>
    <!-- 图表模式 -->
    <div class="chartBox" v-if="chartModelShow">
      <!-- 汇总数据展示 -->
      <div class="collect_data">
        <div class="collect_data_item">
          <div class="collect_data_text">{{ $lang('平均时效(分钟)') }}</div>
          <div class="collect_data_num">{{ isShowAverageAgingChart ? total.averageTimeLimit : '-' }}</div>
        </div>
        <div class="collect_data_item">
          <div class="collect_data_text">{{ $lang('总包号') }}</div>
          <div class="collect_data_num">{{ total.pkgNumber }}</div>
        </div>
        <div class="collect_data_item">
          <div class="collect_data_text">{{ $lang('总主单重量') }}</div>
          <div class="collect_data_num">{{ total.sentWeightNumber }}</div>
        </div>
        <div class="collect_data_item">
          <div class="collect_data_text">{{ $lang('总交运重量') }}</div>
          <div class="collect_data_num">{{ total.airportSentWeightNumber }}</div>
        </div>
      </div>
      <!-- 排名和汇总数据趋势图 -->
      <div class="middle">
        <!-- 排名数据趋势图 -->
        <div class="rank">
          <div class="rank_title">
            <div class="rank_title_left">
              <span v-if="rankType === 1">{{ $lang('代理区排名') }}</span>
              <span v-else>{{ $lang('中心排名') }}</span>
            </div>
            <div class="rank_title_right">
              <el-button size="small" type="info" :class="rankType === 1 ? 'btnBgc' : ''" @click="rankChange(1)">{{ $lang('代理区') }} </el-button>
              <el-button size="small" type="info" :class="rankType !== 1 ? 'btnBgc' : ''" @click="rankChange(2)">{{ $lang('中心') }} </el-button>
            </div>
          </div>
          <div class="rank_table">
            <el-table ref="table" :data="tableData" :border="false">
              <el-table-column prop="rank" type="index" :label="$lang('排名')" width="90" header-align="right" align="right">
                <template slot-scope="{ row }">
                  <div v-if="row.rank < 4">
                    <span class="btnBgc top">Top</span> <span>{{ row.rank }}</span>
                  </div>
                  <div v-else>{{ row.rank }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="netWorkName" :label="rankType === 1 ? $lang('代理区名称') : $lang('中心名称')" width="140" header-align="center" align="center">
                <template slot-scope="{ row }">{{ row.netWorkName }} </template>
              </el-table-column>
              <el-table-column :label="$lang('总主单号数量')" header-align="left" align="left"> </el-table-column>
            </el-table>

            <v-chart ref="RankChart" class="rank_chart" :options="rankOptions" :style="{ height: rankHeight,width: rankWidth}" v-if="rankNum" />
          </div>
          <!-- 分页 -->
          <div class="rank_pages b('pagination')">
            <el-pagination
              :page-size="rankPage.size"
              :current-page="rankPage.current"
              layout="prev, pager, next"
              :total="rankPage.total"
              @size-change="sizeChangeRank"
              @current-change="currentChangeRank"
            >
            </el-pagination>
           </div>
        </div>
        <!-- 汇总数据趋势图 -->
        <div class="collect">
          <div class="collect_btn">
            <el-button size="small" type="info" :class="charType === 1 ? 'btnBgc' : ''" @click="collectChange(1)"> {{ $lang('总包号数量') }}</el-button>
            <el-button size="small" type="info" :class="charType === 3 ? 'btnBgc' : ''" @click="collectChange(3)">{{ $lang('总主单重量') }}</el-button>
            <el-button size="small" type="info" :class="charType === 2 ? 'btnBgc' : ''" @click="collectChange(2)">{{ $lang('总交运重量') }}</el-button>
          </div>
          <v-chart ref="CollectChart" class="collect_chart"  :options="collectOptions" />
        </div>
      </div>
      <!-- 平均时效趋势图 -->
      <div class="average_aging" v-if="isShowAverageAgingChart">
        <div class="average_aging_title">{{$lang('平均时效(分钟)')}}</div>
        <v-chart ref="AverageAgingChart" class="average_aging_chart" :options="averageAgingOption" />
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '@mixins/mixin'
import { FlightTransitTimeAbnormalAll } from './pool.js'
import { RESPONSE_CODE } from '@public/http/config'
import { DICT } from '@/common/utils/dict'
import { TIMEOUT_TIMES } from '@public/utils/const'
import ExportMixin from '@/common/mixin/exportMixin'
import VChart from '@components/base/echarts/index' // 图表
import 'echarts'
import { commonFun } from '@public/utils/common'
import { mapGetters } from 'vuex'
import getNetworkInfo from '@/common/mixin/getNetworkInfo'
const START = ' 00:00:00'
const END = ' 23:59:59'
import debounce from 'lodash/debounce'

export default {
  name: 'FlightTransitTimeAbnormalAll',
  mixins: [mixin, ExportMixin, getNetworkInfo],
  components: { VChart },
  props: {},
  data() {
    return {
      DICT,
      COM_HTTP: FlightTransitTimeAbnormalAll,
      tableList: [], // 列表数据
      page: {
        sizes: [10, 20, 30, 40, 50, 100, 150, 200]
      }, // 翻页重写
      // 查询条件
      searchForm: {
        queryCyclical: 1, // 时间维度 按日期/按周期
        queryTimeType: 1, // 时间类型
        operateDate: [commonFun.getBeforeDate(6), commonFun.getBeforeDate(0)],
        startTime: '',
        endTime: '',
        exceptionTag: '', // 异常标识
        exFlags: [], // 异常类型
        timeType: null, // 时效类型
        regionCount: true, // 是否展示始发代理区
        networkCount: true, // 是否展示始发中心
        exCount: true, // 是否展示异常类型
        startRegionCode: [],
        startRegionCodeName: [],
        startNetworkCode: [],
        startNetworkName: []
      },
      // 分页的显示隐藏
      paginationShow: true,
      // 图表的显示隐藏
      chartModelShow: false,
      // 按钮的显示隐藏
      listAndChartShow: false,
      // 汇总数据
      total: {},
      networkKeyValues: [
        // 网点编码与名称字段对应值
        { name: 'startRegionCodeName', code: 'startRegionCode' },
        { name: 'startNetworkName', code: 'startNetworkCode' }
      ],
      queryCyclicalType: 1, // 周期和日期
      isShowFirst: false,
      // *************************************** 图表模式 *************************************** //
      // --------------  1 排名数据趋势图表数据 ------------
      // 1 图表数据
      tableData: [], // table数据
      rankNum: [], // 图表数据
      // rank图表
      rankType: 1, // 排行类型 1-代理区 2-中心
      rankPage: {
        size: 10,
        current: 1,
        total: 0
      }, // 翻页信息
      // --------------  2 汇总数据趋势图表数据 ------------
      collectColumnars: [], // 柱状图数据
      collectBrokenLines: [], // 折线图数据
      xAxisDataCollect: [], // x轴数据 = 日期
      collectMax: null, // 最大值
      collectMin: null, // 最小值
      lineMinValue: null, // 折线最小
      lineMaxValue: null, // 折线最大
      charType: 1, // 重量类型 1-总包号数量 2-总机场交运重量 3-总主单发运
      collectData: ['', this.$lang('总包号数量'), this.$lang('总交运重量'), this.$lang('总主单重量')],
      // --------------  3 平均时效趋势图表数据 ------------
      averageAgingColumnars: [], // 柱状图数据
      averageAgingBrokenLines: [], // 柱状图数据
      xAxisDataAverageAging: [], // x轴数据 = 日期
      agingMax: null, // 最大值
      agingMin: null, // 最小值
      agingLineMin: null, // 折线最大值
      agingLineMax: null // 折线最小值
    }
  },
  computed: {
    // 用户信息
    ...mapGetters({ token: 'token', lang: 'lang', user: 'user' }),
    listOpt() {
      const $this = this
      return {
        menu: false,
        header: true,
        showSummary: true,
        fixHeight: 50,
        pagination: this.paginationShow,
        column: [
          // 查询
          {
            prop: 'queryCyclical',
            label: '时间维度',
            search: true,
            hide: true,
            type: 'select',
            dicData: DICT.airTimeDimension,
            editable: false,
            searchClearable: false,
            searchDefault: 1,
            hasAll: false,
            change(val) {
              $this.$refs.params.searchForm.queryCyclical = val.value
            }
          },
          {
            prop: 'dayTime',
            label: '日期',
            hide: $this.searchForm.queryCyclical === 2
          },
          {
            prop: 'dayTimeWeek',
            label: '日期',
            hide: $this.searchForm.queryCyclical === 1
          },
          {
            prop: 'time',
            label: '',
            search: true,
            hide: true,
            searchslot: true,
            editable: false
          },
          {
            label: '始发代理区',
            prop: 'startRegionCodeName',
            hide: !$this.searchForm.regionCount,
            search: true,
            remote: true,
            searchslot: true
          },
          {
            label: '始发转运中心',
            prop: 'startNetworkName',
            search: true,
            hide: !$this.searchForm.networkCount,
            searchslot: true
          },
          {
            prop: 'exceptionTag',
            label: '异常标识',
            search: true,
            hide: true,
            type: 'select',
            dicData: DICT.exceptionTagList,
            change(val) {
              if (val.value) {
                $this.searchForm.exceptionTag = val.value
              } else {
                $this.searchForm.exceptionTag = ''
              }
              $this.$refs.params.searchForm.exFlags = []
              $this.searchForm.exFlags = []
            }
          },
          {
            prop: 'exFlags',
            label: '异常类型',
            search: $this.searchForm.exceptionTag === 'Y',
            searchslot: true,
            hide: true
          },
          {
            prop: 'exFlags',
            label: '异常类型',
            hide: !$this.searchForm.exCount,
            type: 'select',
            dicData: DICT.exceptionRegistrationType,
            formatter: (row, value, label, column) => {
              if (row.exFlags) {
                return row.exFlags
                  .map((item) => {
                    return $this._dictFilter(item, DICT.exceptionRegistrationType)
                  })
                  .join(',')
              }
            }
          },
          {
            prop: 'timeType',
            label: '时效类型',
            search: true,
            hide: true,
            type: 'select',
            dicData: DICT.airTimeTypeList,
            change(val) {
              $this.searchForm.timeType = val.value
              $this.$refs.params.searchForm.timeType = val.value
            }
          },
          {
            label: '总主单号数量',
            prop: 'mainShipmentNumber'
          },
          {
            label: '总包号数量',
            prop: 'pkgNumber'
          },
          {
            label: '总主单发运重量',
            prop: 'sentWeightNumber'
          },
          {
            label: '总机场交运重量',
            prop: 'airportSentWeightNumber'
          },
          {
            label: '平均时效（分钟）',
            prop: 'averageTimeLimit',
            hide: !$this.searchForm.timeType
          }
        ]
      }
    },
    // 排名数据趋势图
    rankOptions() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 5,
          left: 0,
          bottom: 0,
          backgroundColor: 'transparent'
        },
        xAxis: {
          show: false,
          splitNumber: 15,
          interval: 25
        },
        yAxis: {
          type: 'category',
          show: false
        },
        series: [
          {
            type: 'bar',
            data: this.rankNum,
            showBackground: true,
            backgroundStyle: {
              color: '#ccc'
            },
            label: {
              show: true,
              position: 'right'
            },
            itemStyle: {
              barBorderRadius: 30 // 设置圆角
            },
            barWidth: 12
          }
        ],
        direction: 'horizontal'
      }
    },
    // 汇总数据趋势图
    collectOptions() {
      const $this = this
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: `{b0} <br> {a0}: {c0}.toLocaleString() <br> {a1}: {c1}%`
          formatter: function (params) {
            let value1 = ''
            let value2 = ''
            let axisValue = ''
            params.map((item) => {
              if (item.componentSubType === 'bar') {
                axisValue = item.axisValue
                value1 = item.value.toLocaleString()
              }
              if (item.componentSubType === 'line') {
                value2 = item.value
              }
            })
            return axisValue + '<br>' + $this.collectData[$this.charType] + ' : ' + value1 + '<br>' + $this.$lang('环比') + ' : ' + value2 + '%'
          }
        },
        legend: {
          data: [$this.collectData[$this.charType], this.$lang('环比')]
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxisDataCollect
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: this.collectMax
          },
          {
            type: 'value',
            min: this.lineMinValue,
            max: this.lineMaxValue,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: $this.collectData[$this.charType],
            type: 'bar',
            data: this.collectColumnars,
            label: {
              show: true,
              position: 'top',
              fontSize: 15
            }
          },
          {
            name: $this.$lang('环比'),
            type: 'line',
            yAxisIndex: 1,
            data: this.collectBrokenLines
          }
        ]
      }
    },
    // 平均时效趋势图
    averageAgingOption() {
      const $this = this
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: `{b0} <br> {a0}: {c0}(分钟) <br> {a1}: {c1}%`
          formatter: function (params) {
            let value1 = ''
            let value2 = ''
            let axisValue = ''
            params.map((item) => {
              if (item.componentSubType === 'bar') {
                axisValue = item.axisValue
                value1 = item.value.toLocaleString()
              }
              if (item.componentSubType === 'line') {
                value2 = item.value
              }
            })
            return axisValue + '<br>' + $this.$lang('平均时效') + ' : ' + value1 + $this.$lang('(分钟)') + ' <br>' + $this.$lang('环比') + ' : ' + value2 + '%'
          }
        },
        legend: {
          data: [this.$lang('平均时效'), this.$lang('环比')]
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxisDataAverageAging
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: this.agingMin,
            max: this.agingMax
          },
          {
            type: 'value',
            min: this.agingLineMin,
            max: this.agingLineMax,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: $this.$lang('平均时效'),
            type: 'bar',
            data: this.averageAgingColumnars,
            label: {
              show: true,
              position: 'top',
              fontSize: 15
            }
          },
          {
            name: $this.$lang('环比'),
            type: 'line',
            yAxisIndex: 1,
            data: this.averageAgingBrokenLines
          }
        ]
      }
    },
    // 平均时效趋势图是否展示
    isShowAverageAgingChart() {
      return !!this.searchForm.timeType
    },
    rankHeight() {
      this.$nextTick(() => {
        // 高度变化echars图表的高度也要发生变化
        this.$refs['RankChart'].resize()
      })
      return this.rankNum && this.rankNum.length > 0 ? 38 * this.rankNum.length + 'px' : '0px'
    }
  },
  created() {
  },
  mounted() {
    this.init()
    window.addEventListener('resize', debounce(this.resizeChart, 100));
  },
  methods: {
    /** ******************************* 列表按钮请求 ***************************************** */
    async init() {
      console.log('init', this.user)
      let obj = {}
      // 账号信息 22=总部 334=代理区 335=中心 336=网点 institutionalLevelId
      const { networkCode, networkName, institutionalLevelId } = this.user
      // 总部无默认值，支持编辑代理区以及中心
      if (institutionalLevelId === 22) {
        obj = { startNetworkCode: [], startNetworkName: [], startRegionCode: [], startRegionCodeName: [] }
      } else {
        // 登录级别为代理区 默认代理区的值禁止编辑代理区
        if (institutionalLevelId === 334) {
          obj = { startNetworkCode: [], startNetworkName: [], startRegionCode: [networkCode], startRegionCodeName: [networkName] }
        } else {
          // 登录级别为中心/网点 默认代理区和中心的值禁止编辑代理区和中心 networkCode
          const { agentNetwork, centNetwork } = await this._getAgentInfoByNetworkCode(networkCode)
          if (agentNetwork || centNetwork) {
            obj = { startNetworkCode: centNetwork ? [centNetwork.code] : [], startNetworkName: centNetwork ? [centNetwork.name] : [],
              startRegionCode: agentNetwork ? [agentNetwork.code] : [], startRegionCodeName: agentNetwork ? [agentNetwork.name] : [] }
          }
        }
      }
      Object.assign(this.searchForm, obj)
      this.searchFun()
    },
    // 新增参数
    setSearchParams(params) {
      const obj = {}
      const { queryTimeType, operateDate, regionCount, networkCount, exCount, exFlags, exceptionTag } = this.searchForm
      const { queryCyclical } = this.$refs.params.searchForm
      const startTime = operateDate[0] + START
      const endTime = operateDate[1] + END
      Object.assign(this.$refs.params.searchForm, { queryTimeType, startTime, endTime, operateDate, regionCount, networkCount, exCount, exFlags, exceptionTag, queryCyclical })
      const nParams = {}
      this.networkKeyValues.forEach((item) => {
        const { name, code } = item
        const valCode = this.searchForm[code]
        const valName = this.searchForm[name]
        nParams[code] = valCode || ''
        nParams[name] = valName || ''
        obj[code] = undefined
        if (valCode || (Array.isArray(valCode) && valCode.length > 0)) {
          obj[code] = valCode
        }
      })
      Object.assign(obj, { queryTimeType, startTime, endTime, operateDate, regionCount, networkCount, exCount, exFlags, exceptionTag, ...nParams })
      return obj
    },
    // 清空
    resetList() {
      const searchForm = {
        queryCyclical: 1, // 时间维度 按日期/按周期
        queryTimeType: 1, // 时间类型
        operateDate: [commonFun.getBeforeDate(6), commonFun.getBeforeDate(0)],
        startTime: '',
        endTime: '',
        exceptionTag: '', // 异常标识
        exFlags: [], // 异常类型
        timeType: null, // 时效类型
        regionCount: true, // 是否展示始发代理区
        networkCount: true, // 是否展示始发中心
        exCount: true, // 是否展示异常类型
        startRegionCode: [],
        startRegionCodeName: [],
        startNetworkCode: [],
        startNetworkName: []
      }
      Object.assign(this.searchForm, searchForm)
      this.init()
    },
    // 查询方法
    async searchFun(params, current) {
      console.log('searchFun')
      this.loading = true
      if (typeof this.searchFunBefore === 'function') {
        const state = this.searchFunBefore()
        if (!state) {
          this.loading = false
          return
        }
      }
      // avue-crud的ref名称是params
      if (!params && this.$refs.hasOwnProperty('params')) {
        params = this.rangHandle(this.$refs.params.searchForm)
      }
      // 传入参数有current
      if (current) {
        this.page.current = current
      }
      const param = JSON.parse(JSON.stringify(this.searchFunParamsHandle(params)))
      if (param === false) {
        this.loading = false
        return
      }
      // 添加超时清除loading状态的定时器
      const timeState = setTimeout(() => {
        if (this.loading) this.loading = false
      }, TIMEOUT_TIMES)

      setTimeout(() => {
        this.getSummaryData(param) // 合计请求
      }, 30)
      setTimeout(() => {
        this.getRankData(param) // 排行图表请求
      }, 30)
      setTimeout(() => {
        this.getCollectData(param) // 汇总数据趋势图请求
      }, 30)
      setTimeout(() => {
        param.timeType && this.getAverageAging(param) // 平均时效趋势图请求
      }, 30)
      try {
        console.log('util/mixin.searchFun::params', param)
        const res = await this.COM_HTTP.reqList(param)
        // 清除超时定时器
        clearTimeout(timeState)
        this.loading = false
        this.pageLoading = false
        if (res.code === RESPONSE_CODE.SUCCESS) {
          if (this.usePagination) {
            this.tableList = res.data.records ? (this.formatList ? this.formatList(res.data) : res.data.records) : []
            this.page.total = res.data.total || 0
            this.page.current = res.data.current || 1
          } else {
            this.tableList = this.formatList ? this.formatList(res.data) : res.data || []
          }
          this.searchAfterFun()
        } else {
          this.$message.error(res.msg)
          this.tableList = []
        }
      } catch (error) {
        console.error('searchFun::error', error)
        // 清除超时定时器
        clearTimeout(timeState)
        this.loading = false
        this.pageLoading = false
      }
    },
    searchAfterFun() {
      console.log('searchAfterFun', this.$refs.params.searchForm.queryCyclical)
      this.searchForm.queryCyclical = this.$refs.params.searchForm.queryCyclical
    },
    // 合计
    summaryMethod({ columns, data }) {
      const sums = []
      const arr = ['startRegionCodeName', 'startNetworkName', 'exFlags', 'dayTime', 'dayTimeWeek']
      columns.forEach((column, index) => {
        // 1 合计
        if (index === 0) {
          sums[index] = this.$lang('合计')
          return
        }
        // 3 有值
        if (arr.includes(column.property)) {
          sums[index] = '--'
        } else {
          sums[index] = this.total && this.total[column['property']]
        }
      })
      return sums
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'mainShipmentNumber') {
        return 'cell-blue-gao view-link'
      }
    },
    cellClick(row, column, cell, event) {
      if (column.property === 'mainShipmentNumber') {
        const { queryTimeType, queryCyclical } = this.$refs.params.searchForm
        const { startNetworkCode: startNetworkCodeSearch, startNetworkName: startNetworkNameSearch, startRegionCode: startRegionCodeSearch, startRegionCodeName: startRegionCodeNameSearch, exFlags: exFlagsSearch, exceptionTag: exceptionTagSearch } = this.searchForm
        const { startNetworkCode, startNetworkName, startRegionCode, startRegionCodeName, exFlags, dayTime, dayTimeWeek } = row
        const operateDate = queryCyclical === 1 ? [dayTime, dayTime] : [dayTimeWeek.slice(0, 10), dayTimeWeek.slice(-10)]
        const params = { queryTimeType, operateDate }
        if (startRegionCode && startRegionCodeName) {
          Object.assign(params, { startRegionCode: [startRegionCode], startRegionCodeName: [startRegionCodeName] })
        } else {
          Object.assign(params, { startRegionCode: startRegionCodeSearch || [], startRegionCodeName: startRegionCodeNameSearch || [] })
        }
        if (startNetworkCode && startNetworkName) {
          Object.assign(params, { startNetworkCode: [startNetworkCode], startNetworkName: [startNetworkName] })
        } else {
          Object.assign(params, { startNetworkCode: startNetworkCodeSearch || [], startNetworkName: startNetworkNameSearch || [] })
        }
        //  如果汇总勾选了异常类型,点击数据异常类型有值'Y';无值'N'
        if (this.searchForm.exCount) {
          Object.assign(params, { exceptionTag: (exFlags ? 'Y' : 'N'), exFlags: exFlags || exFlagsSearch || [] })
        } else {
          Object.assign(params, { exceptionTag: exceptionTagSearch || '', exFlags: exFlags || exFlagsSearch || [] })
        }

        this.$emit('toMainBillAll', params)
      }
    },
    // 1 列表模式
    listModel() {
      document.querySelector('.flight-transit-timeAbnormal-all .el-table').style.display = 'block'
      this.paginationShow = true
      this.chartModelShow = false
      this.listAndChartShow = false
      this.searchForm.regionCount = true
      this.searchForm.networkCount = true
      this.searchForm.exCount = true
    },
    // 2 图表模式
    chartModel() {
      document.querySelector('.flight-transit-timeAbnormal-all .el-table').style.display = 'none'
      this.paginationShow = false
      this.chartModelShow = true
      this.listAndChartShow = true
      console.log(this.collectData[this.charType])
    },
    _dictFilter(v, dict) {
      return (dict.find((item) => item.value + '' === v + '') || {}).label
    },
    /** ******************************* 图标请求 ***************************************** */
    // 3  图表数据
    // 3.1  图表以及列表汇总数据
    async getSummaryData(params) {
      console.log('getSummaryData', params)
      try {
        const { code, data, msg } = await this.COM_HTTP.reqSummary(params)
        if (code === RESPONSE_CODE.SUCCESS) {
          if (data) {
            Object.entries(data).forEach(([key, value]) => {
              data[key] = value ? Number(value).toLocaleString() : value
            })
            this.total = data || {}
          } else {
            this.total = {}
          }
        } else {
          this.$message.error(this.$lang(msg))
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 3.2  排名数据趋势数据
    async getRankData(params) {
      console.log('getRankData11111', this.$refs.params.searchForm)
      try {
        const param = params
          ? { ...params, ...this.rankPage, ...{ rankType: this.rankType }}
          : { ...this.$refs.params.searchForm, ...this.rankPage, ...{ rankType: this.rankType }}
        delete param.regionCount
        delete param.networkCount
        delete param.exCount
        console.log('getRankData222', param)
        const { code, data, msg } = await this.COM_HTTP.reqRankChart(param)
        if (code === RESPONSE_CODE.SUCCESS) {
          this.rankNum = []
          this.tableData = data.records || []
          this.rankPage.total = data.total || 0
          this.rankPage.current = data.current || 1
          this.tableData &&
            this.tableData.length > 0 &&
            this.tableData.map((item) => {
              this.rankNum.unshift(item.mainShipmentNumber)
            })

          console.log(this.rankNum)
        } else {
          this.$message.error(this.$lang(msg))
        }
      } catch (e) {
        console.log(e)
      }
    },
    resizeChart() {
      this.$refs['RankChart'].resize()
    },
    // 3.3  汇总趋势数据
    async getCollectData(params) {
      try {
        const param = params ? { ...params, ...{ charType: this.charType }} : { ...this.$refs.params.searchForm, ...{ charType: this.charType }}
        delete param.regionCount
        delete param.networkCount
        delete param.exCount
        const { code, data, msg } = await this.COM_HTTP.reqCollectChart(param)
        if (code === RESPONSE_CODE.SUCCESS) {
          this.xAxisDataCollect = []
          this.collectColumnars = []
          this.collectBrokenLines = []
          if (data) {
            // 柱状图
            data.columnars &&
              data.columnars.forEach((v) => {
                this.collectColumnars.push(v.countNumber)
                this.xAxisDataCollect.push(v.dayTime)
              })
            // 折线图
            data.brokenLines &&
              data.brokenLines.forEach((v) => {
                this.collectBrokenLines.push(v.ratio)
              })
            this.collectMax = data.maxValue
            this.collectMin = data.minValue
            this.lineMinValue = data.lineMinValue
            this.lineMaxValue = data.lineMaxValue
          }
        } else {
          this.$message.error(this.$lang(msg))
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 3.4  平均时效趋势数据
    async getAverageAging(params) {
      try {
        const param = { ...params }
        delete param.regionCount
        delete param.networkCount
        delete param.exCount
        const { code, data, msg } = await this.COM_HTTP.reqTimeChart(param)
        if (code === RESPONSE_CODE.SUCCESS) {
          this.xAxisDataAverageAging = []
          this.averageAgingColumnars = []
          this.averageAgingBrokenLines = []
          if (data) {
            // 柱状图
            data.columnars &&
              data.columnars.forEach((v) => {
                this.averageAgingColumnars.push(v.countNumber)
                this.xAxisDataAverageAging.push(v.dayTime)
              })
            // 折线图
            data.brokenLines &&
              data.brokenLines.forEach((v) => {
                this.averageAgingBrokenLines.push(v.ratio)
              })
            this.agingMax = data.maxValue
            this.agingMin = data.minValue
            this.agingLineMin = data.lineMinValue
            this.agingLineMax = data.lineMaxValue
          }
        } else {
          this.$message.error(this.$lang(msg))
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 页码修改
    sizeChangeRank(val) {
      this.rankPage.current = 1
      this.rankPage.size = val
      this.getRankData()
    },
    // 跳转到当前页
    currentChangeRank(val) {
      this.rankPage.current = val
      this.getRankData()
    },
    // 排行类型 1-代理区 2-中心
    rankChange(val) {
      this.rankType = val
      this.getRankData()
    },
    // 汇总数据趋势图 重量类型 1-总包号数量 2-总机场交运重量 3-总主单发运
    collectChange(val) {
      this.charType = val
      this.getCollectData()
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
  }
}
</script>

<style lang="scss">
.flight-transit-timeAbnormal-all {
  width: 100%;
  height: 100%;
  padding-left: 0px;
  padding-top: 0px;
  // 图标模式
  .chartBox {
    width: 99%;
    // height: 500px;
    margin: 0 auto;
    // margin-top: 20px;
    padding-top: 20px;
    // 汇总
    .collect_data {
      display: flex;
      align-items: center;
      justify-items: center;
      font-weight: 600;
      color: #e60012;
      width: 100%;
      border: 1px solid #ccc;
      height: 160px;
      .collect_data_item {
        flex: 1;
        height: 160px;
        line-height: 70px;
        text-align: center;
        border-right: 1px solid #ccc;
        // padding-left: 60px;
        &:nth-last-child(1) {
          border-right: none;
        }
        .collect_data_text {
          font-size: 20px;
        }
        .collect_data_num {
          font-size: 45px;
        }
      }
    }
    // 中间2个图标
    .middle {
      width: 100%;
      // height: 400px;
      margin-top: 20px;
      display: flex;
      // 排名
      .rank {
        width: 35%;
        border: 1px solid #ccc;
        position: relative;
        .rank_title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #ccc;
          padding: 10px;
          .rank_title_right {
            .el-button {
              margin-left: 0 !important;
            }
          }
        }
        .rank_table {
          width: 100%;
          max-height: 420px;
          position: relative;
          .el-table__header {
            th {
              background-color: #fff;
            }
          }
          td,
          th.is-leaf {
            border-bottom: none !important;
          }
          .rank_chart {
            width: 40%;
            min-width: 150px;
            position: absolute;
            top: 33px;
            left: 240px;
          }
        }
        .rank_pages {
          height: 30px;
          display: flex;
          justify-content: center;
          margin-top: 10px;
          position: absolute;
          bottom: 10px;
          left: 38%;
        }
      }
      .collect {
        width: 65%;
        height: 525px;
        margin-left: 15px;
        border: 1px solid #ccc;
        .collect_btn {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          border-bottom: 1px solid #ccc;
          padding: 10px;
          .el-button {
            margin-left: 0 !important;
          }
        }
        .collect_chart {
          width: 100%;
          margin: 0 auto;
          margin-top: 30px;
        }
      }
    }
    .average_aging {
      border: 1px solid #ccc;
      margin-top: 20px;
      .average_aging_title {
        border-bottom: 1px solid #ccc;
        padding: 10px;
      }
      .average_aging_chart {
        width: 90%;
        height: 500px;
        margin: 0 auto;
        margin-top: 30px;
      }
    }
  }
  .cell-pointer {
    cursor: pointer;
  }
  .avue-crud__search{
    .el-form-item:first-of-type{
      width: 110px!important;
      // height: 10px !important;
    }
  }
}
.cell-blue-gao {
  cursor: pointer;
  .cell span {
    @include text-color('brand');
  }
}
.btnBgc {
  background-color: #e60012 !important;
  color: #fff !important;
}
.el-pager li.active {
  color: #e60012 !important;
}
.el-pager li:hover {
  color: #e60012 !important;
}
.top {
  border-radius: 24px;
  padding: 1px 4px;
  margin-right: 3px;
  display: inline-block;
  width: 26px;
  font-size: 11px;
  text-align: center;
}
.ibank-total-right{
  margin-bottom: 8px;
  line-height: 32px;
}
</style>

http://www.kler.cn/a/375348.html

相关文章：

  • Scala_【1】概述
  • 【C++】模板与泛型编程（一）：定义模板，成员模板
  • Naive UI 多选框自定义tag和label
  • Linux的mmap
  • windows下安装配置anaconda及常用的conda命令
  • C++设计模式：享元模式 （附文字处理系统中的字符对象案例）
  • Mysql 5.7 grant 授权异常
  • 基于SpringBoot的助农商超管理系统
  • Java-重试机制怎么实现，自定义注解+AOP
  • Redis后台任务有哪些
  • Docker：存储原理
  • XtraBackup开源热备工具
  • vite5 打包项目兼容ie和低版本chrome
  • 卡尔曼滤波-应用白话
  • 文件上传漏洞-通过.htaccess文件绕过
  • Python-数据爬取（爬虫）
  • Web大型网站的性能测试要求和工具方法
  • Python数据分析入门知识基础和案例（万字长文）
  • Linux通过ifconfig命令ens33没有显示ip地址解决方式
  • select函数、I/O复用、并发服务器
  • 奥数与C++小学四年级（第十八题 小球重量）
  • 微服务基础-Ribbon
  • UE4安卓打aab包时，同时存在“gradle”、“arm64/gradle”两个Gradle工程的原因
  • Excel 单元格小数点精确位数机制
  • java随记
  • 基于深度学习的社交网络中的社区检测