< ! -- 排名数据趋势图 -- > < 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 = this return { 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 = this return { 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 = 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 : 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 = this return { 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 ] + 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 } = itemconst 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 } } 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 = false return } 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 ) => { 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 = true this . chartModelShow = false this . listAndChartShow = false this . searchForm. regionCount = true this . searchForm. networkCount = true this . searchForm. exCount = true } , 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} , 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 || 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 ( ) } , 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 = 1 this . 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: 0 px; padding- top: 0 px; . chartBox { width: 99 % ; margin: 0 auto; padding- top: 20 px; . collect_data { display: flex; align- items: center; justify- items: center; font- weight: 600 ; color: #e60012; width: 100 % ; border: 1 px solid #ccc; height: 160 px; . collect_data_item { flex: 1 ; height: 160 px; line- height: 70 px; text- align: center; border- right: 1 px solid #ccc; & : nth- last- child ( 1 ) { border- right: none; } . collect_data_text { font- size: 20 px; } . collect_data_num { font- size: 45 px; } } } . middle { width: 100 % ; margin- top: 20 px; display: flex; . rank { width: 35 % ; border: 1 px solid #ccc; position: relative; . rank_title { display: flex; justify- content: space- between; align- items: center; border- bottom: 1 px solid #ccc; padding: 10 px; . rank_title_right { . el- button { margin- left: 0 ! important; } } } . rank_table { width: 100 % ; max- height: 420 px; position: relative; . el- table__header { th { background- color: #fff; } } td, th. is- leaf { border- bottom: none ! important; } . rank_chart { width: 40 % ; min- width: 150 px; position: absolute; top: 33 px; left: 240 px; } } . rank_pages { height: 30 px; display: flex; justify- content: center; margin- top: 10 px; position: absolute; bottom: 10 px; left: 38 % ; } } . collect { width: 65 % ; height: 525 px; margin- left: 15 px; border: 1 px solid #ccc; . collect_btn { display: flex; justify- content: flex- end; align- items: center; border- bottom: 1 px solid #ccc; padding: 10 px; . el- button { margin- left: 0 ! important; } } . collect_chart { width: 100 % ; margin: 0 auto; margin- top: 30 px; } } } . average_aging { border: 1 px solid #ccc; margin- top: 20 px; . average_aging_title { border- bottom: 1 px solid #ccc; padding: 10 px; } . average_aging_chart { width: 90 % ; height: 500 px; margin: 0 auto; margin- top: 30 px; } } } . cell- pointer { cursor: pointer; } . avue- crud__search{ . el- form- item: first- of - type{ width: 110 px! 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: 24 px; padding: 1 px 4 px; margin- right: 3 px; display: inline- block; width: 26 px; font- size: 11 px; text- align: center;
}
. ibank- total- right{ margin- bottom: 8 px; line- height: 32 px;
}
< / style> 
