vue-echarts使用

news/2024/11/2 10:10:02/

vue-echarts使用

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

排名柱状图

示例

在这里插入图片描述

代码

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

汇总

示例

在这里插入图片描述

代码

        <!-- 汇总数据趋势图 --><div class="collect"><div class="collect_btn"><el-button size="small" type="info" :class="charType === 1 ? 'btnBgc' : ''" @click="collectChange(1)"> {{ $lang('总包号数量') }}</el-button><el-button size="small" type="info" :class="charType === 3 ? 'btnBgc' : ''" @click="collectChange(3)">{{ $lang('总主单重量') }}</el-button><el-button size="small" type="info" :class="charType === 2 ? 'btnBgc' : ''" @click="collectChange(2)">{{ $lang('总交运重量') }}</el-button></div><v-chart ref="CollectChart" class="collect_chart"  :options="collectOptions" /></div>data(){return {// --------------  2 汇总数据趋势图表数据 ------------collectColumnars: [], // 柱状图数据collectBrokenLines: [], // 折线图数据xAxisDataCollect: [], // x轴数据 = 日期collectMax: null, // 最大值collectMin: null, // 最小值lineMinValue: null, // 折线最小lineMaxValue: null, // 折线最大charType: 1, // 重量类型 1-总包号数量 2-总机场交运重量 3-总主单发运collectData: ['', this.$lang('总包号数量'), this.$lang('总交运重量'), this.$lang('总主单重量')],}}// 汇总数据趋势图collectOptions() {const $this = 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 class="average_aging" v-if="isShowAverageAgingChart"><div class="average_aging_title">{{$lang('平均时效(分钟)')}}</div><v-chart ref="AverageAgingChart" class="average_aging_chart" :options="averageAgingOption" /></div>data(){return {// --------------  3 平均时效趋势图表数据 ------------averageAgingColumnars: [], // 柱状图数据averageAgingBrokenLines: [], // 柱状图数据xAxisDataAverageAging: [], // x轴数据 = 日期agingMax: null, // 最大值agingMin: null, // 最小值agingLineMin: null, // 折线最大值agingLineMax: null // 折线最小值}}// 平均时效趋势图averageAgingOption() {const $this = 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}]}},

全图

在这里插入图片描述

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

http://www.ppmy.cn/news/1543840.html

相关文章

第十讲 MySQL为什么有时候会选错索引?

第十讲 MySQL为什么有时候会选错索引&#xff1f; 一、问题引入 在 MySQL 中&#xff0c;索引选择由优化器负责&#xff0c;其目标是以最小代价执行语句&#xff0c;但有时会选错索引&#xff0c;导致执行速度变慢。 二、案例分析 案例一 建表与数据插入 创建表t&#xff…

边缘计算网关在机床数据采集中的应用-天拓四方

随着工业4.0和智能制造的快速发展&#xff0c;机床作为制造业的核心设备&#xff0c;其数据采集与分析对于提升生产效率、保证产品质量、优化加工过程具有重要意义。传统的数据采集方式存在数据传输速度慢、实时性差、数据处理能力有限等问题。为了解决这些问题&#xff0c;边缘…

java控制台打印除法口诀

直接代码&#xff1a; public class DivisionTable {public static void main(String[] args) {for(int i 1; i < 10;i){for(int j 1;j<i;j){String format String.format("%-8s",(i*j)""j""i);System.out.print(format);}System.out.…

二百七十二、Kettle——ClickHouse中增量导入数据重复性统计表数据(1天1次)

一、目的 在数据质量模块&#xff0c;需要对原始数据的重复性进行统计 Hive中原有SQL语句和ClickHouse现有SQL语句很大不同 二、Hive中原有代码 2.1 表结构 --41、八大类基础数据重复性统计表 事件事件资源不需要重复 create table if not exists hurys_db.dwd_data_d…

Chrome与夸克谁更节省系统资源

在当今数字化时代&#xff0c;浏览器已经成为我们日常生活中不可或缺的一部分。无论是工作、学习还是娱乐&#xff0c;我们都依赖于浏览器来访问互联网。然而&#xff0c;不同的浏览器在性能和资源消耗方面存在差异。本文将探讨Chrome和夸克两款浏览器在系统资源消耗方面的表现…

来康生命科技有限公司心率监测解决方案在健身房与康养机构的应用探索

引言 随着科技的日新月异&#xff0c;智能健康服务正逐步成为现代健康管理不可或缺的一环。来康生命科技有限公司&#xff0c;凭借其在智能物联集成交互领域的自主创新能力&#xff0c;推出了一款集蓝牙物联网、蓝牙手环、数据云与管理终端于一体的心率监测解决方案。此方案专…

修改HarmonyOS鸿蒙图标和名字,打包后安装到真机,应用图标丢失变成透明,修改名字也不生效,还是默认的labeL解决方案教程

HarmonyOS鸿蒙打包hap 安装应用到桌面没有图标&#xff0c;用hdc安装到真机&#xff0c;打包后应用图标丢失变成透明&#xff0c;名字也还是默认的label的bug&#xff0c;以下是解决方案 以下是修改方案&#xff1a; 1、修改应用名字&#xff1a; 2、修改应用图标&#xff1a…

C++音视频04:音视频编码、生成图片

视频编码 #include <libavutil/log.h> #include <libavutil/opt.h> #include <libavcodec/avcodec.h>static int encode(AVCodecContext *ctx, AVFrame *frame, AVPacket *pkt, FILE *out) {int ret -1;ret avcodec_send_frame(ctx, frame);if (ret < …