javascript
复制代码
<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>
