zouyu
2 天以前 8bc17a9ea84a6af0b7d01e451c702f404a3ff895
src/views/index.vue
@@ -18,148 +18,148 @@
                  </div>
               </div>
            </div>
            <div class="data-cards">
               <div class="data-card sales">
                  <div class="data-title">销售数据</div>
                  <div class="data-num">
                     <div>
                        <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>
               <div class="data-card purchase">
                  <div class="data-title">采购数据</div>
                  <div class="data-num">
                     <div>
                        <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>
               <div class="data-card inventory">
                  <div class="data-title">库存数据</div>
                  <div class="data-num">
                     <div>
                        <div class="data-desc">当前库存总量/件</div>
                        <div class="data-value">{{businessInfo.inventoryNum}}</div>
                     </div>
                     <div>
                        <div class="data-desc">今日入库/件</div>
                        <div class="data-value">{{businessInfo.todayInventoryNum}}</div>
                     </div>
                  </div>
               </div>
            </div>
<!--            <div class="data-cards">-->
<!--               <div class="data-card sales">-->
<!--                  <div class="data-title">销售数据</div>-->
<!--                  <div class="data-num">-->
<!--                     <div>-->
<!--                        <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>-->
<!--               <div class="data-card purchase">-->
<!--                  <div class="data-title">采购数据</div>-->
<!--                  <div class="data-num">-->
<!--                     <div>-->
<!--                        <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>-->
<!--               <div class="data-card inventory">-->
<!--                  <div class="data-title">库存数据</div>-->
<!--                  <div class="data-num">-->
<!--                     <div>-->
<!--                        <div class="data-desc">当前库存总量/件</div>-->
<!--                        <div class="data-value">{{businessInfo.inventoryNum}}</div>-->
<!--                     </div>-->
<!--                     <div>-->
<!--                        <div class="data-desc">今日入库/件</div>-->
<!--                        <div class="data-value">{{businessInfo.todayInventoryNum}}</div>-->
<!--                     </div>-->
<!--                  </div>-->
<!--               </div>-->
<!--            </div>-->
         </div>
         <!-- 右:待办事项 -->
         <div class="todo-panel">
            <div class="section-title">待办事项</div>
            <ul class="todo-list" v-if="todoList.length > 0">
               <li v-for="item in todoList" :key="item.id">
                  <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px">
                     <div style="display: flex;justify-content: space-between;align-items: center;">
                        <div class="todo-title">流程编号:{{item.approveId}}</div>
                        <div class="todo-division">申请部门:{{item.approveDeptName}}</div>
                        <div class="todo-time">{{item.approveTime}}</div>
                     </div>
                     <div class="todo-division">审批事由:{{item.approveReason}}</div>
                  </div>
               </li>
            </ul>
            <div v-else style="text-align: center">
               暂无数据
            </div>
         </div>
      </div>
      <!-- 中部横向两栏 -->
      <div class="dashboard-row">
         <div class="main-panel">
            <div class="section-title">客户合同金额分析</div>
            <div class="contract-summary">
               <div class="contract-info">
                  <img src="../assets/images/khtitle.png" alt="" style="width: 42px"/>
                  <div class="contract-card">
                     <div class="contract-name">总合同金额(元)</div>
                     <div class="contract-meta">
                        <div class="main-amount">{{sum}}</div>
                        <div>周同比: <span class="up">{{yny}}% </span> 日环比: <span class="up">{{chain}}% </span></div>
                     </div>
                  </div>
               </div>
            </div>
            <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 180px;margin-top: 20px">
               <div>
                  <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie"
                               :series="materialPieSeries"
                               :tooltip="pieTooltip"></Echarts>
               </div>
               <ul class="contract-list">
                  <li v-for="item in materialPieSeries[0].data" :key="item.name">
                     <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
                        <div class="line" :style="{color: item.itemStyle.color}">●{{item.name}}</div>
                        <div style="width: 70px">{{item.rate}}%</div>
                        <div>¥{{item.value}}</div>
                     </div>
                  </li>
               </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>
<!--         <div class="todo-panel">-->
<!--            <div class="section-title">待办事项</div>-->
<!--            <ul class="todo-list" v-if="todoList.length > 0">-->
<!--               <li v-for="item in todoList" :key="item.id">-->
<!--                  <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px">-->
<!--                     <div style="display: flex;justify-content: space-between;align-items: center;">-->
<!--                        <div class="todo-title">流程编号:{{item.approveId}}</div>-->
<!--                        <div class="todo-division">申请部门:{{item.approveDeptName}}</div>-->
<!--                        <div class="todo-time">{{item.approveTime}}</div>-->
<!--                     </div>-->
<!--                     <div class="todo-division">审批事由:{{item.approveReason}}</div>-->
<!--                  </div>-->
<!--               </li>-->
<!--            </ul>-->
<!--            <div v-else style="text-align: center">-->
<!--               暂无数据-->
<!--            </div>-->
<!--         </div>-->
<!--      </div>-->
<!--      -->
<!--      &lt;!&ndash; 中部横向两栏 &ndash;&gt;-->
<!--      <div class="dashboard-row">-->
<!--         <div class="main-panel">-->
<!--            <div class="section-title">客户合同金额分析</div>-->
<!--            <div class="contract-summary">-->
<!--               <div class="contract-info">-->
<!--                  <img src="../assets/images/khtitle.png" alt="" style="width: 42px"/>-->
<!--                  <div class="contract-card">-->
<!--                     <div class="contract-name">总合同金额(元)</div>-->
<!--                     <div class="contract-meta">-->
<!--                        <div class="main-amount">{{sum}}</div>-->
<!--                        <div>周同比: <span class="up">{{yny}}% </span> 日环比: <span class="up">{{chain}}% </span></div>-->
<!--                     </div>-->
<!--                  </div>-->
<!--               </div>-->
<!--            </div>-->
<!--            <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 180px;margin-top: 20px">-->
<!--               <div>-->
<!--                  <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie"-->
<!--                               :series="materialPieSeries"-->
<!--                               :tooltip="pieTooltip"></Echarts>-->
<!--               </div>-->
<!--               <ul class="contract-list">-->
<!--                  <li v-for="item in materialPieSeries[0].data" :key="item.name">-->
<!--                     <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">-->
<!--                        <div class="line" :style="{color: item.itemStyle.color}">●{{item.name}}</div>-->
<!--                        <div style="width: 70px">{{item.rate}}%</div>-->
<!--                        <div>¥{{item.value}}</div>-->
<!--                     </div>-->
<!--                  </li>-->
<!--               </ul>-->
<!--            </div>-->
<!--         </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 class="section-title">质量统计</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="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"
                         :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;"></Echarts>
         </div>
<!--      <div class="dashboard-row">-->
<!--         <div class="main-panel">-->
<!--            <div class="section-title">质量统计</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="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"-->
<!--                         :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;"></Echarts>-->
<!--         </div>-->
      </div>
   </div>
</template>
@@ -277,7 +277,7 @@
}])
const yAxis = [{
   type: 'category',
   data: ['预付账款', '应付账款', '预收账款', '应收账款',]
   data: [ '应付账款', '应收账款',]
}]
const yAxis1 = [{
   type: 'value'
@@ -389,10 +389,10 @@
   console.log(type)
   statisticsReceivablePayable({type: radio1.value}).then((res) => {
      barSeries.value[0].data = [
         { value: res.data.prepayMoney, itemStyle: { color: barColors2[0] } },
         { value: res.data.payableMoney, itemStyle: { color: barColors2[1] } },
         { value: res.data.advanceMoney, itemStyle: { color: barColors2[2] } },
         { value: res.data.receivableMoney, itemStyle: { color: barColors2[3] } }
         // { value: res.data.prepayMoney, itemStyle: { color: barColors2[0] } },
         { value: res.data.payableMoney, itemStyle: { color: barColors2[0] } },
         // { value: res.data.advanceMoney, itemStyle: { color: barColors2[2] } },
         { value: res.data.receivableMoney, itemStyle: { color: barColors2[1] } }
      ]
   })
}
@@ -507,7 +507,7 @@
   min-width: 0;
   background-color: #EFF2FB; /* 使用指定的背景颜色 */
   background-image: url("../assets/images/denglu.png");
   background-size: cover;
   background-size: 100% 260%;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 12px;
@@ -744,15 +744,18 @@
   color: #666;
   list-style: none;
   padding: 0;
   height: 190px;
   overflow-y: auto;
   width: 460px;
}
.line {
   position: relative;
   width: 250px;
   width: 230px;
}
.line::after {
   content: '';
   position: absolute;
   right: 12px;
   right: 2px;
   top: 0;
   bottom: 0;
   width: 1px;