动易网站中添加邮箱,wordpress搬家方法,住建设部官方网站,如何建设公司企业安全文化vue-echarts使用 排名柱状图示例代码 汇总示例代码 平均时效示例代码 全图 排名柱状图
示例 代码
// 排名趋势!-- 排名数据趋势图 --div classrankdiv classrank_titlediv classrank_title_leftspa… vue-echarts使用 排名柱状图示例代码 汇总示例代码 平均时效示例代码 全图 排名柱状图
示例 代码
// 排名趋势!-- 排名数据趋势图 --div classrankdiv classrank_titlediv classrank_title_leftspan v-ifrankType 1{{ $lang(代理区排名) }}/spanspan v-else{{ $lang(中心排名) }}/span/divdiv classrank_title_rightel-button sizesmall typeinfo :classrankType 1 ? btnBgc : clickrankChange(1){{ $lang(代理区) }} /el-buttonel-button sizesmall typeinfo :classrankType ! 1 ? btnBgc : clickrankChange(2){{ $lang(中心) }} /el-button/div/divdiv classrank_tableel-table reftable :datatableData :borderfalseel-table-column proprank typeindex :label$lang(排名) width90 header-alignright alignrighttemplate slot-scope{ row }div v-ifrow.rank 4span classbtnBgc topTop/span span{{ row.rank }}/span/divdiv v-else{{ row.rank }}/div/template/el-table-columnel-table-column propnetWorkName :labelrankType 1 ? $lang(代理区名称) : $lang(中心名称) width140 header-aligncenter aligncentertemplate slot-scope{ row }{{ row.netWorkName }} /template/el-table-columnel-table-column :label$lang(总主单号数量) header-alignleft alignleft /el-table-column/el-tablev-chart refRankChart classrank_chart :optionsrankOptions :style{ height: rankHeight,width: rankWidth} v-ifrankNum //divdata({return {// -------------- 1 排名数据趋势图表数据 ------------// 1 图表数据tableData: [], // table数据rankNum: [], // 图表数据// rank图表rankType: 1, // 排行类型 1-代理区 2-中心rankPage: {size: 10,current: 1,total: 0}, // 翻页信息}})!-- 分页 --div classrank_pages b(pagination)el-pagination:page-sizerankPage.size:current-pagerankPage.currentlayoutprev, pager, next:totalrankPage.totalsize-changesizeChangeRankcurrent-changecurrentChangeRank/el-pagination/div/div// 排名数据趋势图rankOptions() {return {tooltip: {trigger: axis,axisPointer: {type: shadow}},grid: {top: 5,left: 0,bottom: 0,backgroundColor: transparent},xAxis: {show: false,splitNumber: 15,interval: 25},yAxis: {type: category,show: false},series: [{type: bar,data: this.rankNum,showBackground: true,backgroundStyle: {color: #ccc},label: {show: true,position: right},itemStyle: {barBorderRadius: 30 // 设置圆角},barWidth: 12}],direction: horizontal}},rankHeight() {this.$nextTick(() {// 高度变化echars图表的高度也要发生变化this.$refs[RankChart].resize()})return this.rankNum this.rankNum.length 0 ? 38 * this.rankNum.length px : 0px}汇总
示例 代码 !-- 汇总数据趋势图 --div classcollectdiv classcollect_btnel-button sizesmall typeinfo :classcharType 1 ? btnBgc : clickcollectChange(1) {{ $lang(总包号数量) }}/el-buttonel-button sizesmall typeinfo :classcharType 3 ? btnBgc : clickcollectChange(3){{ $lang(总主单重量) }}/el-buttonel-button sizesmall typeinfo :classcharType 2 ? btnBgc : clickcollectChange(2){{ $lang(总交运重量) }}/el-button/divv-chart refCollectChart classcollect_chart :optionscollectOptions //divdata(){return {// -------------- 2 汇总数据趋势图表数据 ------------collectColumnars: [], // 柱状图数据collectBrokenLines: [], // 折线图数据xAxisDataCollect: [], // x轴数据 日期collectMax: null, // 最大值collectMin: null, // 最小值lineMinValue: null, // 折线最小lineMaxValue: null, // 折线最大charType: 1, // 重量类型 1-总包号数量 2-总机场交运重量 3-总主单发运collectData: [, this.$lang(总包号数量), this.$lang(总交运重量), this.$lang(总主单重量)],}}// 汇总数据趋势图collectOptions() {const $this thisreturn {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.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 classaverage_aging v-ifisShowAverageAgingChartdiv classaverage_aging_title{{$lang(平均时效(分钟))}}/divv-chart refAverageAgingChart classaverage_aging_chart :optionsaverageAgingOption //divdata(){return {// -------------- 3 平均时效趋势图表数据 ------------averageAgingColumnars: [], // 柱状图数据averageAgingBrokenLines: [], // 柱状图数据xAxisDataAverageAging: [], // x轴数据 日期agingMax: null, // 最大值agingMin: null, // 最小值agingLineMin: null, // 折线最大值agingLineMax: null // 折线最小值}}// 平均时效趋势图averageAgingOption() {const $this thisreturn {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.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}]}},
全图 templatediv classflight-transit-timeAbnormal-allavue-crudrefparams:datatableList:optionlistOpt:pagepage:table-loadingloadingsize-changesizeChangecurrent-changecurrentChangesearch-resetresetListsearch-changesearchChange:summary-methodsummaryMethodcell-clickcellClick:cell-class-namecellClassNametemplate slotmenuLeftel-button sizesmall typeinfo clickhandleExportExcel() v-ifhasPower(OUTEXCELALL)i classicon-iconfont iconfont icondaochu1/ispan{{ $lang(导出) }}/span/el-buttonel-button sizesmall v-ifhasPower(EXPORTLOGALL) typeinfo clickexportLogDisplay truei classiconfont icon-iconfont icondaochurizhi1/ispan{{ $lang(导出日志) }}/span/el-button!-- 列表模式 图表模式 --el-button sizesmall typeinfo clicklistModel v-iflistAndChartShowi classiconfont icon-iconfont iconanniu-shujushuaxin/ispan{{ $lang(列表模式) }}/span/el-buttonel-button sizesmall typeinfo clickchartModel v-elsei classiconfont icon-iconfont iconanniu-shujushuaxin/ispan{{ $lang(图表模式) }}/span/el-button/templatetemplate slottimeSearchdiv stylewidth: 416pxel-rowel-radio-group v-modelsearchForm.queryTimeTypeel-radio :label1{{ $lang(实际起飞时间) }}/el-radioel-radio :label2{{ $lang(实际起飞时间(WIB)) }}/el-radio/el-radio-group/el-rowel-date-pickerv-modelsearchForm.operateDatetypedaterangerange-separator—formatyyyy-MM-ddvalue-formatyyyy-MM-dd:clearablefalse:start-placeholder$lang(开始时间):end-placeholder$lang(结束时间)/el-date-picker/div/template!-- 始发代理区 登录账号非总部禁用始发代理区--template slotstartRegionCodeNameSearchBaseNetWorkNewstylewidth: 250px:query{ current: 1, size: 100, typeIds: organLevelObj.NT_AGENT_AREA }:dicUrl/transportation/tmsSysNetwork/permissionControlQueryNet:multipletrue:disableduser.institutionalLevelId ! 22:propObjsearchFormv-on:update:propObjsearchForm $event:codenetworkKeyValues[0].code:namenetworkKeyValues[0].name//template!-- 始发转运中心 登录账号是中心禁用始发转运中心--template slotstartNetworkNameSearchBaseNetWorkNewstylewidth: 250px:query{ current: 1, size: 100, typeIds: organLevelObj.NT_CENTER }:dicUrl/transportation/tmsSysNetwork/permissionControlQueryNet:multipletrue:disableduser.institutionalLevelId 335:propObjsearchFormv-on:update:propObjsearchForm $event:codenetworkKeyValues[1].code:namenetworkKeyValues[1].name//template!-- 异常类型 --template slotexFlagsSearchel-select v-modelsearchForm.exFlags :placeholder$lang(请选择) :multipletrue stylewidth:250px collapse-tags clearableel-option v-fortemp in DICT.exceptionRegistrationType :labeltemp.label :valuetemp.value :keytemp.value/el-option/el-select/templatetemplate slotsearchExtenddiv classibank-total-rightdiv classibank-total-con v-if!chartModelShowspan{{$lang(汇总项)}}/spanel-checkbox v-modelsearchForm.regionCount{{$lang(始发代理区)}}/el-checkboxel-checkbox v-modelsearchForm.networkCount{{$lang(始发中心)}}/el-checkboxel-checkbox v-modelsearchForm.exCount{{$lang(异常类型)}}/el-checkbox/div/div/template/avue-crud!-- 导出日志 --DownloadCenter :dialogVisible.syncexportLogDisplay :moduleType313/DownloadCenter!-- 图表模式 --div classchartBox v-ifchartModelShow!-- 汇总数据展示 --div classcollect_datadiv classcollect_data_itemdiv classcollect_data_text{{ $lang(平均时效(分钟)) }}/divdiv classcollect_data_num{{ isShowAverageAgingChart ? total.averageTimeLimit : - }}/div/divdiv classcollect_data_itemdiv classcollect_data_text{{ $lang(总包号) }}/divdiv classcollect_data_num{{ total.pkgNumber }}/div/divdiv classcollect_data_itemdiv classcollect_data_text{{ $lang(总主单重量) }}/divdiv classcollect_data_num{{ total.sentWeightNumber }}/div/divdiv classcollect_data_itemdiv classcollect_data_text{{ $lang(总交运重量) }}/divdiv classcollect_data_num{{ total.airportSentWeightNumber }}/div/div/div!-- 排名和汇总数据趋势图 --div classmiddle!-- 排名数据趋势图 --div classrankdiv classrank_titlediv classrank_title_leftspan v-ifrankType 1{{ $lang(代理区排名) }}/spanspan v-else{{ $lang(中心排名) }}/span/divdiv classrank_title_rightel-button sizesmall typeinfo :classrankType 1 ? btnBgc : clickrankChange(1){{ $lang(代理区) }} /el-buttonel-button sizesmall typeinfo :classrankType ! 1 ? btnBgc : clickrankChange(2){{ $lang(中心) }} /el-button/div/divdiv classrank_tableel-table reftable :datatableData :borderfalseel-table-column proprank typeindex :label$lang(排名) width90 header-alignright alignrighttemplate slot-scope{ row }div v-ifrow.rank 4span classbtnBgc topTop/span span{{ row.rank }}/span/divdiv v-else{{ row.rank }}/div/template/el-table-columnel-table-column propnetWorkName :labelrankType 1 ? $lang(代理区名称) : $lang(中心名称) width140 header-aligncenter aligncentertemplate slot-scope{ row }{{ row.netWorkName }} /template/el-table-columnel-table-column :label$lang(总主单号数量) header-alignleft alignleft /el-table-column/el-tablev-chart refRankChart classrank_chart :optionsrankOptions :style{ height: rankHeight,width: rankWidth} v-ifrankNum //div!-- 分页 --div classrank_pages b(pagination)el-pagination:page-sizerankPage.size:current-pagerankPage.currentlayoutprev, pager, next:totalrankPage.totalsize-changesizeChangeRankcurrent-changecurrentChangeRank/el-pagination/div/div!-- 汇总数据趋势图 --div classcollectdiv classcollect_btnel-button sizesmall typeinfo :classcharType 1 ? btnBgc : clickcollectChange(1) {{ $lang(总包号数量) }}/el-buttonel-button sizesmall typeinfo :classcharType 3 ? btnBgc : clickcollectChange(3){{ $lang(总主单重量) }}/el-buttonel-button sizesmall typeinfo :classcharType 2 ? btnBgc : clickcollectChange(2){{ $lang(总交运重量) }}/el-button/divv-chart refCollectChart classcollect_chart :optionscollectOptions //div/div!-- 平均时效趋势图 --div classaverage_aging v-ifisShowAverageAgingChartdiv classaverage_aging_title{{$lang(平均时效(分钟))}}/divv-chart refAverageAgingChart classaverage_aging_chart :optionsaverageAgingOption //div/div/div
/templatescript
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/debounceexport 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 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: {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.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: {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.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(() {// 高度变化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网点 institutionalLevelIdconst { 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 {// 登录级别为中心/网点 默认代理区和中心的值禁止编辑代理区和中心 networkCodeconst { 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}}// avue-crud的ref名称是paramsif (!params this.$refs.hasOwnProperty(params)) {params this.rangHandle(this.$refs.params.searchForm)}// 传入参数有currentif (current) {this.page.current current}const param JSON.parse(JSON.stringify(this.searchFunParamsHandle(params)))if (param false) {this.loading falsereturn}// 添加超时清除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 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) {// 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.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 || [] })}// 如果汇总勾选了异常类型,点击数据异常类型有值Y;无值Nif (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 blockthis.paginationShow truethis.chartModelShow falsethis.listAndChartShow falsethis.searchForm.regionCount truethis.searchForm.networkCount truethis.searchForm.exCount true},// 2 图表模式chartModel() {document.querySelector(.flight-transit-timeAbnormal-all .el-table).style.display nonethis.paginationShow falsethis.chartModelShow truethis.listAndChartShow trueconsole.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.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()},// 3.3 汇总趋势数据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)}},// 3.4 平均时效趋势数据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()},// 排行类型 1-代理区 2-中心rankChange(val) {this.rankType valthis.getRankData()},// 汇总数据趋势图 重量类型 1-总包号数量 2-总机场交运重量 3-总主单发运collectChange(val) {this.charType valthis.getCollectData()}},beforeDestroy() {window.removeEventListener(resize, this.resizeChart);}
}
/scriptstyle langscss
.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
