修改折线图

zxl

2026-03-25 d29d77e91951e30abba6596359b138bc4c6ac108

 src/views/dataAnalysis/components/DataReGasStation.vue

@@ -9,6 +9,7 @@
        <a-radio-button :value="3"> 通过率 </a-radio-button>
        <a-radio-button :value="4"> 客户 </a-radio-button>
        <a-radio-button :value="5"> 流失率 </a-radio-button>
        <a-radio-button :value="6"> 销售金额 </a-radio-button>
      </a-radio-group>
    </div>
    <div>
@@ -66,7 +67,7 @@
        <a-range-picker style="width: 300px; margin: 0 12px" v-if="isContrast" @change="contrastTimeChange" />
      </div>
      <div class="fueling-overview-block">
        <div class="fueling-overview-item">
        <div class="fueling-overview-item" id="traffic-flow-card">
          <div class="fueling-overview-name">车流量</div>
          <div class="fueling-overview-num">
            <span style="margin-right: 24px">{{ statisTotalObj.carCount }}</span>
@@ -80,7 +81,7 @@
            <span style="color: #16b777" v-if="isContrast">{{ contrastObj.appearCount }}</span>
          </div>
        </div>
        <div class="fueling-overview-item">
        <div class="fueling-overview-item" id="oil-count-card">
          <div class="fueling-overview-name">加油数</div>
          <div class="fueling-overview-num">
            <span style="margin-right: 24px">{{ statisTotalObj.oilCount }}</span>
@@ -120,6 +121,13 @@
          <div class="fueling-overview-num">
            <span style="margin-right: 24px">{{ statisTotalObj.rebackRate }}%</span>
            <span style="color: #16b777" v-if="isContrast">{{ contrastObj.rebackRate }}%</span>
          </div>
        </div>
        <div class="fueling-overview-item">
          <div class="fueling-overview-name">销售金额(元)</div>
          <div class="fueling-overview-num">
            <span style="margin-right: 24px">{{ statisTotalObj.totalAmount }}</span>
            <span style="color: #16b777" v-if="isContrast">{{ contrastObj.totalAmount }}</span>
          </div>
        </div>
      </div>
@@ -207,6 +215,29 @@
        </div>
      </div>
    </div>
    <div>
      <div class="block-title">油品类型分析</div>
      <div style="display: flex">
        <DataReLineChart
          style="width: 70%"
          domId="oilTypeLine"
          ref="oilTypeLineRef"
          :chartData="oilTypeLineData"
        ></DataReLineChart>
        <div style="width: 30%">
          <a-radio-group v-model="oilTypeSpecies" size="small" @change="oilTypeSpeciesChange">
            <a-radio-button :value="5"> 油品销量 </a-radio-button>
            <a-radio-button :value="6"> 销售金额 </a-radio-button>
          </a-radio-group>
          <DataRePieChart
            style="width: 100%"
            domId="oilTypePie"
            ref="oilTypePieRef"
            :chartData="oilTypePieData"
          ></DataRePieChart>
        </div>
      </div>
    </div>
    <TopTenCustomers
      :customerData="customerObj"
      :typeOneTotal="customerOneTotal"
@@ -274,6 +305,7 @@
      description: '数据报表（加油站）',
      vehicleTypeSpecies: 1,
      fuelingStationSpecies: 2,
      oilTypeSpecies: 5,
      searchWay: '1',
      isContrast: false,
      activeTime: '',
@@ -288,6 +320,8 @@
      vehicleTypePieData: {}, //车型分析饼图数据
      fuelLevelLineData: {}, //加油位分析折线图数据
      fuelLevelPieData: {}, //加油位分析饼图数据
      oilTypeLineData: {}, //油品类型分析折线图数据
      oilTypePieData: {}, //油品类型分析饼图数据
      vehicleTypeLineData: {}, //车型分析折线图数据
      trendAnalysisType: 0, //趋势分析选择类型
      trendAnalysisUnit: 'DAYS', //趋势分析选择时间
@@ -375,6 +409,18 @@
          { title: '客户类型', align: 'center', dataIndex: 'clientName' },
          { title: '累计加油次数', align: 'center', dataIndex: 'oilCount' },
          { title: '累计油品销量', align: 'center', dataIndex: 'oilSum' },
        ]
      }
      if (this.trendAnalysisType == 6) {
        return [
          commonIndexColumn,
          { title: '进站时间', align: 'center', dataIndex: 'startTime' },
          { title: '车牌号', align: 'center', dataIndex: 'licenseNum' },
          { title: '行为类型', align: 'center', dataIndex: 'behaviorText' },
          { title: '加油位', align: 'center', dataIndex: 'oilPosition' },
          { title: '油品销量', align: 'center', dataIndex: 'oilVolume' },
          { title: '销售金额(元)', align: 'center', dataIndex: 'totalAmount' },
          { title: '通过率(分)', align: 'center', dataIndex: 'spandTime' },
        ]
      }
      return [
@@ -473,10 +519,46 @@
      this.fuelingStationSpecies = e.target.value
      this.getFuelingStationPieData()
    },
    //获取油品类型饼图数据
    getOilTypePieData() {
      postAction('/jyz/dataTable/statFan', {
        orgCode: this.selectTreeObj.orgCode,
        startTime: this.startTime,
        endTime: this.endTime,
        type: this.oilTypeSpecies,
      }).then((res) => {
        console.log(res)
        this.oilTypePieData = res.result
        this.$nextTick(() => {
          this.$refs.oilTypePieRef.setChart()
        })
      })
    },
    //获取油品类型柱状图数据
    getOilTypeLineData() {
      const barType = this.oilTypeSpecies == 5 ? 3 : 4
      postAction('/jyz/dataTable/statBar', {
        orgCode: this.selectTreeObj.orgCode,
        startTime: this.startTime,
        endTime: this.endTime,
        type: barType,
      }).then((res) => {
        console.log(res)
        this.oilTypeLineData = res.result
        this.$nextTick(() => {
          this.$refs.oilTypeLineRef.setChart()
        })
      })
    },
    oilTypeSpeciesChange(e) {
      this.oilTypeSpecies = e.target.value
      this.getOilTypePieData()
      this.getOilTypeLineData()
    },
    //趋势分析类型切换
    trendAnalysisTypeChange(e) {
      let val = e.target.value
      if (val == 0 || val == 2 || val == 3 || val == 5) {
      if (val == 0 || val == 2 || val == 3 || val == 5 || val == 6) {
        this.trendAnalysisChartShowPercent = true
      } else {
        this.trendAnalysisChartShowPercent = false
@@ -630,6 +712,8 @@
      this.getVehicleTypeLineData()
      this.getVehicleStationPieData()
      this.getFuelingStationPieData()
      this.getOilTypePieData()
      this.getOilTypeLineData()
      this.getTrendAnalysis()
      this.getOilFreqCompareData()
    },
@@ -640,6 +724,8 @@
      this.getVehicleTypeLineData()
      this.getVehicleStationPieData()
      this.getFuelingStationPieData()
      this.getOilTypePieData()
      this.getOilTypeLineData()
      this.getTrendAnalysis()
    },
  },
@@ -647,6 +733,26 @@
  created() {
    this.initData()
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        const scrollTarget = localStorage.getItem('scrollToTarget')
        if (scrollTarget) {
          const element = document.getElementById(scrollTarget)
          if (element) {
            element.scrollIntoView({ behavior: 'smooth', block: 'center' })
            localStorage.removeItem('scrollToTarget')
          }
        }
        const trendType = localStorage.getItem('trendAnalysisType')
        if (trendType) {
          this.trendAnalysisType = parseInt(trendType)
          localStorage.removeItem('trendAnalysisType')
          this.getTrendAnalysis()
        }
      }, 500)
    })
  },
}
</script>
<style scoped lang="less">