排名柱状图
示例
代码
<!-- 排名数据趋势图 --><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 {tableData: [], rankNum: [], rankType: 1, 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(() => {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 {collectColumnars: [], collectBrokenLines: [], xAxisDataCollect: [], collectMax: null, collectMin: null, lineMinValue: null, lineMaxValue: null, charType: 1, collectData: ['', this.$lang('总包号数量'), this.$lang('总交运重量'), this.$lang('总主单重量')],}}collectOptions() {const $this = thisreturn {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: function (params) {let value1 = ''let value2 = ''let axisValue = ''params.map((item) => {if (item.componentSubType === 'bar') {axisValue = item.axisValuevalue1 = 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 {averageAgingColumnars: [], averageAgingBrokenLines: [], xAxisDataAverageAging: [], agingMax: null, agingMin: null, agingLineMin: null, agingLineMax: null }}averageAgingOption() {const $this = thisreturn {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: function (params) {let value1 = ''let value2 = ''let axisValue = ''params.map((item) => {if (item.componentSubType === 'bar') {axisValue = item.axisValuevalue1 = 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-crudref="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-pickerv-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"><BaseNetWorkNewstyle="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"><BaseNetWorkNewstyle="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,tableData: [], rankNum: [], rankType: 1, rankPage: {size: 10,current: 1,total: 0}, collectColumnars: [], collectBrokenLines: [], xAxisDataCollect: [], collectMax: null, collectMin: null, lineMinValue: null, lineMaxValue: null, charType: 1, collectData: ['', this.$lang('总包号数量'), this.$lang('总交运重量'), this.$lang('总主单重量')],averageAgingColumnars: [], averageAgingBrokenLines: [], xAxisDataAverageAging: [], agingMax: null, agingMin: null, agingLineMin: null, agingLineMax: null }},computed: {...mapGetters({ token: 'token', lang: 'lang', user: 'user' }),listOpt() {const $this = thisreturn {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 = thisreturn {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: function (params) {let value1 = ''let value2 = ''let axisValue = ''params.map((item) => {if (item.componentSubType === 'bar') {axisValue = item.axisValuevalue1 = 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 = thisreturn {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: function (params) {let value1 = ''let value2 = ''let axisValue = ''params.map((item) => {if (item.componentSubType === 'bar') {axisValue = item.axisValuevalue1 = 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(() => {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 = {}const { networkCode, networkName, institutionalLevelId } = this.userif (institutionalLevelId === 22) {obj = { startNetworkCode: [], startNetworkName: [], startRegionCode: [], startRegionCodeName: [] }} else {if (institutionalLevelId === 334) {obj = { startNetworkCode: [], startNetworkName: [], startRegionCode: [networkCode], startRegionCodeName: [networkName] }} else {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.searchFormconst { queryCyclical } = this.$refs.params.searchFormconst startTime = operateDate[0] + STARTconst endTime = operateDate[1] + ENDObject.assign(this.$refs.params.searchForm, { queryTimeType, startTime, endTime, operateDate, regionCount, networkCount, exCount, exFlags, exceptionTag, queryCyclical })const nParams = {}this.networkKeyValues.forEach((item) => {const { name, code } = itemconst valCode = this.searchForm[code]const valName = this.searchForm[name]nParams[code] = valCode || ''nParams[name] = valName || ''obj[code] = undefinedif (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 = trueif (typeof this.searchFunBefore === 'function') {const state = this.searchFunBefore()if (!state) {this.loading = falsereturn}}if (!params && this.$refs.hasOwnProperty('params')) {params = this.rangHandle(this.$refs.params.searchForm)}if (current) {this.page.current = current}const param = JSON.parse(JSON.stringify(this.searchFunParamsHandle(params)))if (param === false) {this.loading = falsereturn}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 = falsethis.pageLoading = falseif (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 || 0this.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 = falsethis.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) => {if (index === 0) {sums[index] = this.$lang('合计')return}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.searchFormconst { startNetworkCode: startNetworkCodeSearch, startNetworkName: startNetworkNameSearch, startRegionCode: startRegionCodeSearch, startRegionCodeName: startRegionCodeNameSearch, exFlags: exFlagsSearch, exceptionTag: exceptionTagSearch } = this.searchFormconst { startNetworkCode, startNetworkName, startRegionCode, startRegionCodeName, exFlags, dayTime, dayTimeWeek } = rowconst 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 || [] })}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)}},listModel() {document.querySelector('.flight-transit-timeAbnormal-all .el-table').style.display = 'block'this.paginationShow = truethis.chartModelShow = falsethis.listAndChartShow = falsethis.searchForm.regionCount = truethis.searchForm.networkCount = truethis.searchForm.exCount = true},chartModel() {document.querySelector('.flight-transit-timeAbnormal-all .el-table').style.display = 'none'this.paginationShow = falsethis.chartModelShow = truethis.listAndChartShow = trueconsole.log(this.collectData[this.charType])},_dictFilter(v, dict) {return (dict.find((item) => item.value + '' === v + '') || {}).label},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)}},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.regionCountdelete param.networkCountdelete param.exCountconsole.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 || 0this.rankPage.current = data.current || 1this.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()},async getCollectData(params) {try {const param = params ? { ...params, ...{ charType: this.charType }} : { ...this.$refs.params.searchForm, ...{ charType: this.charType }}delete param.regionCountdelete param.networkCountdelete param.exCountconst { 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.maxValuethis.collectMin = data.minValuethis.lineMinValue = data.lineMinValuethis.lineMaxValue = data.lineMaxValue}} else {this.$message.error(this.$lang(msg))}} catch (e) {console.log(e)}},async getAverageAging(params) {try {const param = { ...params }delete param.regionCountdelete param.networkCountdelete param.exCountconst { 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.maxValuethis.agingMin = data.minValuethis.agingLineMin = data.lineMinValuethis.agingLineMax = data.lineMaxValue}} else {this.$message.error(this.$lang(msg))}} catch (e) {console.log(e)}},sizeChangeRank(val) {this.rankPage.current = 1this.rankPage.size = valthis.getRankData()},currentChangeRank(val) {this.rankPage.current = valthis.getRankData()},rankChange(val) {this.rankType = valthis.getRankData()},collectChange(val) {this.charType = valthis.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%;margin: 0 auto;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;&:nth-last-child(1) {border-right: none;}.collect_data_text {font-size: 20px;}.collect_data_num {font-size: 45px;}}}.middle {width: 100%;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;}}
}
.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>
![[含文档+PPT+源码等]精品基于PHP实现的培训机构信息管理系统的设计与实现](https://img-blog.csdnimg.cn/img_convert/227e09cc8c57df5696bf5fa3e151696c.png)
