大屏开发

13404089107

2025-03-27 da0929566acb613a425e2233d6855a151a21b658

大屏开发

 src/assets/arrears.png

 src/assets/totalArrears.png

 src/components/BottomCharts.vue

@@ -2,7 +2,7 @@
  <div class="bottom-charts">
    <div class="chart-container">
      <div class="chart-group">
        <div class="chart-title">租金收入趋势图</div>
        <div class="chart-title">租金收入趋势图 <span style="font-size: 12px;">（万元）</span></div>
        <div class="income-chart" ref="incomeChart"></div>
      </div>
      <div class="chart-group">
@@ -12,7 +12,7 @@
    </div>
    <div class="map-container">
      <div class="map-marker-item" @click="handleMapMarkerClick('已出租')" :class="{ active: activeStatus === '已出租' }">
         <img :src="require('@/assets/blue.png')" width="30" height="30">
        <img :src="require('@/assets/blue.png')" width="30" height="30">
        <div class="map-marker-item-text">已出租</div>
      </div>
      <div class="map-marker-item" @click="handleMapMarkerClick('待出租')" :class="{ active: activeStatus === '待出租' }">
@@ -73,6 +73,8 @@
    initCharts() {
      // 租金收入趋势图表
      if (Object.keys(this.rentIncomeTrend).length > 0) {
        console.log(this.rentIncomeTrend);
        
        this.charts.income = echarts.init(this.$refs.incomeChart)
        this.charts.income.setOption({
          grid: {
@@ -84,7 +86,16 @@
          },
          tooltip: {
            trigger: 'axis',
            confine: true
            confine: true,
            formatter: function(params) {
              let result = params[0].axisValue + '<br/>';
              params.forEach(param => {
                const prefix = param.seriesIndex === 0 ? '租金收入：' : '欠费：';
                const color = param.seriesIndex === 0 ? '#ffd700' : '#F65456';
                result += `<span style="display:inline-block;margin-right:8px;border-radius:10px;width:10px;height:10px;background-color:${color}"></span>${prefix}${param.value}<br/>`;
              });
              return result;
            }
          },
          xAxis: {
            type: 'category',
@@ -100,21 +111,38 @@
              rotate: 30
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
          yAxis: [
            {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff'
            {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#fff'
                }
              },
              axisLabel: {
                color: '#fff'
              }
            }
          },
          ],
          series: [{
            data: this.rentIncomeTrend.incomeData,
            type: 'line',
@@ -144,7 +172,38 @@
                }]
              }
            }
          }]
          },{
            data: this.rentIncomeTrend.outstandingData,
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              color: '#F65456',
              width: 2
            },
            itemStyle: {
              color: '#F65456'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(246, 82, 82, 0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(246, 82, 82, 0.3)'
                }]
              }
            }
          }
        ]
        })
      }
      // 租户数量趋势图表
@@ -160,7 +219,15 @@
          },
          tooltip: {
            trigger: 'axis',
            confine: true
            confine: true,
            formatter: function(params) {
              let result = params[0].axisValue + '<br/>';
              params.forEach(param => {
                const color = '#87F7C7';
                result += `<span style="display:inline-block;margin-right:8px;border-radius:10px;width:10px;height:10px;background-color:${color}"></span>租户数量：${param.value}<br/>`;
              });
              return result;
            }
          },
          xAxis: {
            type: 'category',
@@ -312,6 +379,7 @@

  &.active {
    .map-marker-item-icon {

      &::before,
      &::after {
        animation: ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
@@ -325,6 +393,7 @@

  &:nth-child(1) {
    .map-marker-item-icon {

      // background-color: #4fsdsad9ff;
      &::before,
      &::after {
@@ -335,6 +404,7 @@

  &:nth-child(2) {
    .map-marker-item-icon {

      // background-color: #faad14;
      &::before,
      &::after {
@@ -345,6 +415,7 @@

  &:nth-child(3) {
    .map-marker-item-icon {

      // background-color: #ff4d4f;
      &::before,
      &::after {
@@ -355,6 +426,7 @@

  &:nth-child(4) {
    .map-marker-item-icon {

      // background-color: #39c5bb;
      &::before,
      &::after {
@@ -369,6 +441,7 @@
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;

 src/components/LeftPanel.vue

@@ -39,7 +39,22 @@
          </div>
        </div>
      </div>
      
       <div class="stat-group mt-10">
        <div class="stat-item">
          <img :src="require('@/assets/arrears.png')" width="40" height="40" />
          <div class="stat-info">
            <div class="stat-label"> <i class="icon-area"></i> 本季度欠费</div>
            <div class="stat-value">{{ staticsData.totalRentOwe }}<span class="unit">万元</span></div>
          </div>
        </div>
        <div class="stat-item">
          <img :src="require('@/assets/totalArrears.png')" width="40" height="40" />
          <div class="stat-info">
            <div class="stat-label"> <i class="icon-area"></i>总计欠费</div>
            <div class="stat-value">{{ staticsData.totalRentOweAll }}<span class="unit">万元</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-card" style="width: 350px;">
      <div class="chart-title">区域租金排名</div>

 src/views/DataScreen.vue

@@ -88,7 +88,7 @@
}

.footer {
  height: 200px;
  height: 300px;
  position: absolute;
  bottom: 0;
  left: 0;