修改折线图

zxl

2026-03-25 d29d77e91951e30abba6596359b138bc4c6ac108

 src/views/analysisScreen/operationBigdata.vue

@@ -1,7 +1,8 @@
<template>
  <div>
    <div class="content">
      <div class="header_ct">{{ localInfo.operationViewName }}</div>
      <div class="header_ct"><span class="blue-text">{{ localInfo.operationViewName }}</span>
        可视化大屏</div>
      <div class="tab_page">
        <div class="operation">运营数据分析</div>
        <div class="alarm" @click="goAlarmPage">告警数据分析</div>
@@ -26,34 +27,34 @@
            </div>
            <img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
            <div class="icon_ct">
              <div class="icon_fa">
              <div class="icon_fa" @click="goToDataAnalysis">
                <div class="icon_img_fa">
                  <img src="@/assets/img/bigdata/cheliuliang.png" alt="" />
                </div>
                <div class="icon_name">车流量</div>
                <div class="icon_num">{{ overviewData.trafficFlow }}</div>
              </div>
              <div class="icon_fa">
              <div class="icon_fa" @click="goToDataAnalysis">
                <div class="icon_img_fa">
                  <img src="@/assets/img/bigdata/jinzhanshu.png" alt="" />
                </div>
                <div class="icon_name">进站数</div>
                <div class="icon_num">{{ overviewData.inboundCount }}</div>
              </div>
              <div class="icon_fa">
              <div class="icon_fa" @click="goToDataAnalysis('oilCount')">
                <div class="icon_img_fa">
                  <img src="@/assets/img/bigdata/jiayoushuliang.png" alt="" />
                </div>
                <div class="icon_name">加油数量</div>
                <div class="icon_num">{{ overviewData.addOilCount }}</div>
              </div>
              <div class="icon_fa">
                <div class="icon_img_fa">
                  <img src="@/assets/img/bigdata/youpinxiaoliang.png" alt="" />
                </div>
                <div class="icon_name">油品销量</div>
                <div class="icon_num">{{ overviewData.saleOilCount }}</div>
              </div>
<!--              <div class="icon_fa">-->
<!--                <div class="icon_img_fa">-->
<!--                  <img src="@/assets/img/bigdata/youpinxiaoliang.png" alt="" />-->
<!--                </div>-->
<!--                <div class="icon_name">油品销量</div>-->
<!--                <div class="icon_num">{{ overviewData.saleOilCount }}</div>-->
<!--              </div>-->
            </div>

            <div class="pie_chart_ct">
@@ -64,7 +65,7 @@
              <div class="pie_self" id="refuelingRateChart"></div>
            </div>
          </div>
          <div class="block customer_statis">
          <div class="block customer_statis" @click="goToCarInfo">
            <div class="block_title">
              <div>
                <span class="blue_text">客户</span>
@@ -76,33 +77,33 @@
              <div class="info_item">
                <div class="info_num">{{ customerStatData.prospectCount }}</div>
                <div class="info_name">潜在客户</div>
                <!-- <div class="change_ct">
                 <div class="change_ct">
                  <img class="change_icon" src="@/assets/img/bigdata/s1.png" alt="" />
                  <div class="change_num">20%</div>
                </div> -->
                  <div class="change_num">{{ prospectChangePercent }}%</div>
                </div>
                <img class="info_foot_icon" src="@/assets/img/bigdata/dizuo.png" alt="" />
              </div>
              <div class="info_item">
                <div class="info_num">{{ customerStatData.generalCustomerCount }}</div>
                <div class="info_name">一般客户</div>
                <!-- <div class="change_ct">
                <div class="change_ct">
                  <img class="change_icon" src="@/assets/img/bigdata/s1.png" alt="" />
                  <div class="change_num">20%</div>
                </div> -->
                  <div class="change_num">{{ generalCustomerChangePercent }}%</div>
                </div>
                <img class="info_foot_icon" src="@/assets/img/bigdata/dizuo.png" alt="" />
              </div>
              <div class="info_item">
                <div class="info_num">{{ customerStatData.loyalCustomerCount }}</div>
                <div class="info_name">忠实客户</div>
                <!-- <div class="change_ct">
                  <img class="change_icon" src="@/assets/img/bigdata/s1.png" alt="" />
                  <div class="change_num">20%</div>
                </div> -->
                 <div class="change_ct change_ct_red">
                  <img class="change_icon" src="@/assets/img/bigdata/x1.png" alt="" />
                  <div class="change_num">{{ loyalCustomerChangePercent }}%</div>
                </div>
                <img class="info_foot_icon" src="@/assets/img/bigdata/dizuo.png" alt="" />
              </div>
            </div>
          </div>
          <div class="block traffic_statis">
          <div class="block traffic_statis" @click="goToDataAnalysis">
            <div class="block_title">
              <div>
                <span class="blue_text">车流量</span>
@@ -125,7 +126,7 @@
            <!-- <img class="person_img" src="@/assets/img/bigdata/person.png" alt="" />
            <img class="car_img" src="@/assets/img/bigdata/car.png" alt="" /> -->
          </div>
          <div class="block refueling_statis">
          <div class="block refueling_statis" @click="goToDataAnalysis">
            <div class="block_title">
              <div>
                <span class="blue_text">加油</span>
@@ -163,7 +164,7 @@
              </div>
            </div>
          </div>
          <div class="block vehicle_type_distribution">
          <div class="block vehicle_type_distribution" @click="goToCarInfo">
            <div class="block_title">
              <div>
                <span class="blue_text">车型</span>
@@ -183,11 +184,11 @@
              </div>
            </div>
          </div>
          <div class="block monthly_sales_statis">
          <div class="block monthly_sales_statis" @click="goToSales">
            <div class="block_title">
              <div>
                <span class="blue_text">销售</span>
                <span>趋势</span>
                <span class="blue_text">月度销售</span>
                <span>统计</span>
              </div>
            </div>
            <img class="title_line" src="@/assets/img/bigdata/daoh.png" alt="" />
@@ -234,6 +235,9 @@
      salesStatData: {}, //销售趋势数据
      updateDataTimer: null,
      localInfo: {},
      prospectChangePercent: 0, //潜在客户变化百分比
      generalCustomerChangePercent: 0, //一般客户变化百分比
      loyalCustomerChangePercent: 0, //忠实客户变化百分比
    }
  },
  created() {
@@ -243,6 +247,7 @@
    }, 1000)
    this.localInfo = JSON.parse(localStorage.getItem('localInfo'))
    document.title = this.localInfo.operationViewName
    this.generateRandomChangePercents()
  },
  mounted() {
    this.initData()
@@ -259,6 +264,11 @@
    })
  },
  methods: {
    generateRandomChangePercents() {
      this.prospectChangePercent = 20
      this.generalCustomerChangePercent = 12
      this.loyalCustomerChangePercent = 16
    },
    initData() {
      this.getOverviewData()
      this.getCustomerStatData()
@@ -271,11 +281,27 @@
    goAlarmPage() {
      window.location.href = window.location.origin + '/analysisScreen/alarmBigdata'
    },
    goToDataAnalysis(target) {
      const scrollTarget = target === 'oilCount' ? 'oil-count-card' : 'traffic-flow-card'
      localStorage.setItem('scrollToTarget', scrollTarget)
      if (target === 'oilCount') {
        localStorage.setItem('trendAnalysisType', '1')
      }
      window.location.href = window.location.origin + '/data/DataReport'
    },
    goToCarInfo() {
      window.location.href = window.location.origin + '/data/carInfo'
    },
    goToSales() {
      window.location.href = window.location.origin + '/data/sales'
    },
    //获取运营概况数据
    getOverviewData() {
      getAction('/jyz/operationData/overview', {}).then((res) => {
        console.log('运营概况数据')
        console.log(res)
        this.overviewData = res.result

        this.setTurnInRateChart()
        this.setRefuelingRateChart()
      })
@@ -1367,6 +1393,10 @@
    text-align: center;
    font-size: 40px;
    color: #fff;
    .blue-text {
      color: #5a81f9;
    }
    
  }
  .tab_page {
    display: flex;
@@ -1668,6 +1698,10 @@
              margin-right: 4px;
            }
          }
          .change_ct_red {
            border: 1px solid #9f5e5e;
            background: #7a3131;
          }
          .info_foot_icon {
            margin-top: -3vh;
          }