新疆马铃薯 1.首页模块修改

gaoluyang

2026-04-13 2a6b4ac9ddef9e87789d5b3946b4972ea66752b4

 src/views/index.vue

@@ -39,10 +39,10 @@
              <div class="data-desc">本月销售额/元</div>
              <div class="data-value">{{ businessInfo.monthSaleMoney }}</div>
            </div>
            <div>
              <div class="data-desc">未开票金额/元</div>
              <div class="data-value">{{ businessInfo.monthSaleHaveMoney }}</div>
            </div>
<!--            <div>-->
<!--              <div class="data-desc">未开票金额/元</div>-->
<!--              <div class="data-value">{{ businessInfo.monthSaleHaveMoney }}</div>-->
<!--            </div>-->
          </div>

        </div>
@@ -53,10 +53,10 @@
              <div class="data-desc">本月采购额/元</div>
              <div class="data-value">{{ businessInfo.monthPurchaseMoney }}</div>
            </div>
            <div>
              <div class="data-desc">待付款金额/元</div>
              <div class="data-value">{{ businessInfo.monthPurchaseHaveMoney }}</div>
            </div>
<!--            <div>-->
<!--              <div class="data-desc">待付款金额/元</div>-->
<!--              <div class="data-value">{{ businessInfo.monthPurchaseHaveMoney }}</div>-->
<!--            </div>-->
          </div>
        </div>
        <div class="data-card inventory">
@@ -93,62 +93,62 @@
        </div>
      </div>
    </div>
    <div class="dashboard-row">
      <div class="main-panel process-panel">
        <div class="process-panel__header">
          <div class="section-title">工序数据生产统计明细</div>
          <div style="display: flex; gap: 10px; align-items: center;">
            <el-button type="primary" size="small" plain icon="Filter" @click="openProcessDialog">选择工序</el-button>
            <el-button type="info" size="small" plain icon="Refresh" @click="resetProcessFilter">重置</el-button>
            <el-radio-group v-model="processRange" size="small" @change="refreshProcessStats">
              <el-radio-button :value="1">日</el-radio-button>
              <el-radio-button :value="2">周</el-radio-button>
              <el-radio-button :value="3">月</el-radio-button>
            </el-radio-group>
          </div>
        </div>
<!--    <div class="dashboard-row">-->
<!--      <div class="main-panel process-panel">-->
<!--        <div class="process-panel__header">-->
<!--          <div class="section-title">工序数据生产统计明细</div>-->
<!--          <div style="display: flex; gap: 10px; align-items: center;">-->
<!--            <el-button type="primary" size="small" plain icon="Filter" @click="openProcessDialog">选择工序</el-button>-->
<!--            <el-button type="info" size="small" plain icon="Refresh" @click="resetProcessFilter">重置</el-button>-->
<!--            <el-radio-group v-model="processRange" size="small" @change="refreshProcessStats">-->
<!--              <el-radio-button :value="1">日</el-radio-button>-->
<!--              <el-radio-button :value="2">周</el-radio-button>-->
<!--              <el-radio-button :value="3">月</el-radio-button>-->
<!--            </el-radio-group>-->
<!--          </div>-->
<!--        </div>-->

        <div class="process-panel__body">
          <div class="process-panel__chart">
            <Echarts :chartStyle="{ width: '100%', height: '100%' }" :grid="processGrid" :series="processSeries"
              :tooltip="processTooltip" :xAxis="processXAxis" :yAxis="processYAxis" style="height: 100%"
              @click="handleChartClick" />
          </div>
<!--        <div class="process-panel__body">-->
<!--          <div class="process-panel__chart">-->
<!--            <Echarts :chartStyle="{ width: '100%', height: '100%' }" :grid="processGrid" :series="processSeries"-->
<!--              :tooltip="processTooltip" :xAxis="processXAxis" :yAxis="processYAxis" style="height: 100%"-->
<!--              @click="handleChartClick" />-->
<!--          </div>-->

          <div class="process-panel__aside">
            <div class="process-legend">
              <div class="process-legend__item">
                <span class="dot dot-blue"></span><span>投入量</span>
              </div>
              <div class="process-legend__item">
                <span class="dot dot-yellow"></span><span>报废量</span>
              </div>
              <div class="process-legend__item">
                <span class="dot dot-teal"></span><span>产出量</span>
              </div>
            </div>
<!--          <div class="process-panel__aside">-->
<!--            <div class="process-legend">-->
<!--              <div class="process-legend__item">-->
<!--                <span class="dot dot-blue"></span><span>投入量</span>-->
<!--              </div>-->
<!--              <div class="process-legend__item">-->
<!--                <span class="dot dot-yellow"></span><span>报废量</span>-->
<!--              </div>-->
<!--              <div class="process-legend__item">-->
<!--                <span class="dot dot-teal"></span><span>产出量</span>-->
<!--              </div>-->
<!--            </div>-->

            <div class="process-card process-card--name">{{ processAside.processName }}</div>
<!--            <div class="process-card process-card&#45;&#45;name">{{ processAside.processName }}</div>-->

            <div class="process-card">
              <div class="process-card__label">累计总投入</div>
              <div class="process-card__value">{{ formatAmount(processAside.totalInput) }}<span class="unit">元</span>
              </div>
            </div>
            <div class="process-card">
              <div class="process-card__label">累计总报废</div>
              <div class="process-card__value">{{ formatAmount(processAside.totalScrap) }}<span class="unit">元</span>
              </div>
            </div>
            <div class="process-card">
              <div class="process-card__label">累计总产出</div>
              <div class="process-card__value">{{ formatAmount(processAside.totalOutput) }}<span class="unit">元</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--            <div class="process-card">-->
<!--              <div class="process-card__label">累计总投入</div>-->
<!--              <div class="process-card__value">{{ formatAmount(processAside.totalInput) }}-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="process-card">-->
<!--              <div class="process-card__label">累计总报废</div>-->
<!--              <div class="process-card__value">{{ formatAmount(processAside.totalScrap) }}-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="process-card">-->
<!--              <div class="process-card__label">累计总产出</div>-->
<!--              <div class="process-card__value">{{ formatAmount(processAside.totalOutput) }}-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <!-- 工序选择弹窗 -->
    <el-dialog v-model="processDialogVisible" title="选择工序" width="500px" append-to-body>
@@ -201,45 +201,46 @@
          </ul>
        </div>
      </div>
      <div class="main-panel">
        <div style="display: flex;justify-content: space-between;">
          <div class="section-title">应收应付统计</div>
          <!--               <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable">-->
          <!--                  <el-radio-button label="按周" :value="1" />-->
          <!--                  <el-radio-button label="按月" :value="2" />-->
          <!--                  <el-radio-button label="按季度" :value="3" />-->
          <!--               </el-radio-group>-->
        </div>
        <Echarts ref="chart" :color="barColors2" :chartStyle="chartStyle" :grid="grid" :series="barSeries"
          :tooltip="tooltip" :xAxis="xAxis" :yAxis="yAxis" style="height: 260px"></Echarts>
      </div>
         <div class="main-panel">
            <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
               <div class="section-title" style="margin-bottom: 0;">质量统计</div>
               <el-radio-group v-model="qualityRange" size="small" @change="qualityStatisticsInfo">
                  <el-radio-button :value="1">周</el-radio-button>
                  <el-radio-button :value="2">月</el-radio-button>
                  <el-radio-button :value="3">季度</el-radio-button>
               </el-radio-group>
            </div>
            <div class="quality-cards">
               <div class="quality-card one">原材料已检测数 <span>{{ qualityStatisticsObject.supplierNum }}件</span></div>
               <div class="quality-card two">过程检验数量 <span>{{ qualityStatisticsObject.processNum }}件</span></div>
               <div class="quality-card three">出厂已检数量 <span>{{ qualityStatisticsObject.factoryNum }}件</span></div>
            </div>
            <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="barLegend" :series="barSeries1"
                   :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 260px"></Echarts>
         </div>
<!--      <div class="main-panel">-->
<!--        <div style="display: flex;justify-content: space-between;">-->
<!--          <div class="section-title">应收应付统计</div>-->
<!--          &lt;!&ndash;               <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable">&ndash;&gt;-->
<!--          &lt;!&ndash;                  <el-radio-button label="按周" :value="1" />&ndash;&gt;-->
<!--          &lt;!&ndash;                  <el-radio-button label="按月" :value="2" />&ndash;&gt;-->
<!--          &lt;!&ndash;                  <el-radio-button label="按季度" :value="3" />&ndash;&gt;-->
<!--          &lt;!&ndash;               </el-radio-group>&ndash;&gt;-->
<!--        </div>-->
<!--        <Echarts ref="chart" :color="barColors2" :chartStyle="chartStyle" :grid="grid" :series="barSeries"-->
<!--          :tooltip="tooltip" :xAxis="xAxis" :yAxis="yAxis" style="height: 260px"></Echarts>-->
<!--      </div>-->
    </div>

    <!-- 底部横向两栏 -->
    <div class="dashboard-row">
      <div class="main-panel">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
          <div class="section-title" style="margin-bottom: 0;">质量统计</div>
          <el-radio-group v-model="qualityRange" size="small" @change="qualityStatisticsInfo">
            <el-radio-button :value="1">周</el-radio-button>
            <el-radio-button :value="2">月</el-radio-button>
            <el-radio-button :value="3">季度</el-radio-button>
          </el-radio-group>
        </div>
        <div class="quality-cards">
          <div class="quality-card one">原材料已检测数 <span>{{ qualityStatisticsObject.supplierNum }}件</span></div>
          <div class="quality-card two">过程检验数量 <span>{{ qualityStatisticsObject.processNum }}件</span></div>
          <div class="quality-card three">出厂已检数量 <span>{{ qualityStatisticsObject.factoryNum }}件</span></div>
        </div>
        <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="barLegend" :series="barSeries1"
          :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 260px"></Echarts>
      </div>
    

      <div class="main-panel">
        <div class="section-title">回款与开票分析</div>
        <Echarts ref="invoiceChart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"
          :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;" />
      </div>
<!--      <div class="main-panel">-->
<!--        <div class="section-title">回款与开票分析</div>-->
<!--        <Echarts ref="invoiceChart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"-->
<!--          :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;" />-->
<!--      </div>-->
    </div>
  </div>
</template>
@@ -552,7 +553,7 @@
    {
      name: '开票',
      type: 'line',
      data: receiptAmount,
      data: invoiceAmount,
      stack: 'Total',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -581,7 +582,7 @@
    {
      name: '回款',
      type: 'line',
      data: invoiceAmount,
      data: receiptAmount,
      stack: 'Total',
      lineStyle: {
        width: 0
@@ -728,7 +729,6 @@

<style scoped>
.dashboard {
  background: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;