feat: 大屏调整

buhuazhen

6 天以前 c530c5440d1474c69572f0331c9ffae207d12b17

  feat: 大屏调整

 src/views/index.vue

@@ -55,99 +55,49 @@
            </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 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 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 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>
                <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>
                <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>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ref, reactive, onMounted } from 'vue'
import Echarts from "@/components/Echarts/echarts.vue";
import * as echarts from 'echarts';
import useUserStore from "@/store/modules/user.js";
import {
  analysisSupplierContractAmounts, getAmountHalfYear,
  analysisSupplierContractAmounts,
    getBusiness,
    homeTodos,
    qualityStatistics,
    statisticsReceivablePayable
} from "@/api/viewIndex.js";

const userStore = useUserStore()
@@ -160,11 +110,6 @@
    monthSaleMoney: 0,
    todayInventoryNum: 0,
})
const qualityStatisticsObject = ref({
    supplierNum: 0,
    processNum: 0,
    factoryNum: 0,
})
const sum = ref(0)
const yny = ref(0)
const chain = ref(0)
@@ -172,106 +117,27 @@
const pieLegend = reactive({
    show: false,
})
const barSeries = ref([
    {
        type: 'bar',
        data: [],
        label: {
            show: true,
        }
    },
])
const barSeries1 = ref([
    {
        name: '原材料不合格数',
        type: 'bar',
        barGap: 0,
        emphasis: {
            focus: 'series'
        },
        data: []
    },
    {
        name: '过程不合格数',
        type: 'bar',
        emphasis: {
            focus: 'series'
        },
        data: []
    },
    {
        name: '出厂不合格数',
        type: 'bar',
        emphasis: {
            focus: 'series'
        },
        data: []
    },
])
const chartStyle = {
    width: '100%',
    height: '100%' // 设置图表容器的高度
}
const chartStylePie = {
    width: '140%',
    height: '140%' // 设置图表容器的高度
    height: '140%'
}
const grid = {
    left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
}
const barLegend = {
    show: true,
    data: ['原材料不合格数', '过程不合格数', '出厂不合格数']
}
const barLegend1 = {
    show: true,
    data: ['预付账款', '应付账款', '预收账款', '应收账款']
}
const lineLegend = {
    show: true,
    data: ['开票', '回款']
}
const tooltip = {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    }
}
const xAxis = [{
    type: 'value',
}]
const xAxis1 = ref([{
    type: 'category',
    axisTick: { show: false },
    data: []
}])
const yAxis = [{
    type: 'category',
    data: [ '应付账款', '应收账款',]
}]
const yAxis1 = [{
    type: 'value'
}]
const pieTooltip = reactive({
    trigger: 'item',
    formatter: function (params) {
        // 动态生成提示信息，基于数据项的 name 属性
        const description = params.name === '本月回款金额' ? '本月回款金额' : '应收款金额';
        return `${description} ${formatNumber(params.value)}元 ${params.percent}%`;
        return `<div style="color: #333">${description} ${params.value}元 ${params.percent}%</div>`;
    },
    position: 'right'
})

const materialPieSeries = ref([
    {
        type: 'pie',
        radius: ['66%', '90%'],
        radius: ['0%', '90%'],
        avoidLabelOverlap: false,
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 2
            borderWidth: 0
        },
        label: {
            show: false
@@ -279,267 +145,108 @@
        data: []
    }
])
const lineSeries = ref([
    {
        type: 'line',
        data: [],
        label: {
            show: true
        },
    showSymbol: true, // 显示圆点
    },
])
const tooltipLine = {
    trigger: 'axis',
}
const yAxis2 = ref([
    {
        type: 'value',
    }
])
const xAxis2 = ref([
    {
        type: 'category',
        data: [],
        axisLabel: {
            interval: 0,
            formatter: function(value) {
                return value.replace(/~/g, '\n');
            },
        }
    }
])

// 待办事项
const todoList = ref([])
const radio1 = ref(1)

// 图表引用
const barChart = ref(null)
const lineChart = ref(null)
const barColors2 = ['#5181DB', '#D369E0', '#F2CA6D', '#60CCA8']

// 随机颜色生成函数
const getRandomColor = () => {
  return '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
    const r = Math.floor(Math.random() * 106) + 150;
    const g = Math.floor(Math.random() * 106) + 150;
    const b = Math.floor(Math.random() * 106) + 150;
    return '#' + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');
}

onMounted(() => {
    getBusinessData()
    analysisCustomer()
    todoInfoS()
    statisticsReceivable()
    qualityStatisticsInfo()
    getAmountHalfYearNum()
})
// 数据统计
const getBusinessData = () => {
    getBusiness().then((res) => {
        businessInfo.value = {...res.data}
    })
}
// 合同金额
const analysisCustomer = () => {
  analysisSupplierContractAmounts().then((res) => {
    analysisSupplierContractAmounts().then((res) => {
        sum.value = res.data.sum
        yny.value = res.data.yny
        chain.value = res.data.chain
    // 为每个数据项分配随机颜色
    materialPieSeries.value[0].data = res.data.item.map(item => ({
      ...item,
      itemStyle: { color: getRandomColor() }
    }))
        materialPieSeries.value[0].data = res.data.item.map(item => ({
            ...item,
            itemStyle: { color: getRandomColor() }
        }))
    })
}
// 待办事项
const getNum = () => {
    getBusiness().then((res) => {
        businessInfo.value = res.data
    })
}
const todoInfoS = () => {
    homeTodos().then((res) => {
        todoList.value = res.data
    })
}
// 应付应收统计
const statisticsReceivable = (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[0] } },
            // { value: res.data.advanceMoney, itemStyle: { color: barColors2[2] } },
            { value: res.data.receivableMoney, itemStyle: { color: barColors2[1] } }
        ]
    })
}
// 质检统计
const qualityStatisticsInfo = () => {
    qualityStatistics().then((res) => {
        res.data.item.forEach(item => {
            xAxis1.value[0].data.push(item.date)
            barSeries1.value[0].data.push(item.supplierNum)
            barSeries1.value[1].data.push(item.processNum)
            barSeries1.value[2].data.push(item.factoryNum)
        })
        qualityStatisticsObject.value.supplierNum = res.data.supplierNum
        qualityStatisticsObject.value.processNum = res.data.processNum
        qualityStatisticsObject.value.factoryNum = res.data.factoryNum
    })
}
const getAmountHalfYearNum = async () => {
    const res = await getAmountHalfYear()
    console.log(res)
    const monthName = []
    const receiptAmount = []
    const invoiceAmount = []
    res.data.forEach(item => {
        monthName.push(item.month)
        receiptAmount.push(item.receiptAmount)
        invoiceAmount.push(item.invoiceAmount)
    })
    // 正确响应式赋值：创建新的 xAxis 和 series 对象
    xAxis2.value[0].data = monthName
    xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, '\n~'));
    lineSeries.value = [
        {
            name: '开票',
            type: 'line',
            data: receiptAmount,
            stack: 'Total',
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(131, 207, 255, 1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(186, 228, 255, 1)'
                    }
                ])
            },
            itemStyle: {
                color: '#2D99FF',
                borderColor: '#2D99FF'
            },
            emphasis: {
                focus: 'series'
            },
            lineStyle: {
                width: 0
            },
            showSymbol: true,
        },
        {
            name: '回款',
            type: 'line',
            data: invoiceAmount,
            stack: 'Total',
            lineStyle: {
                width: 0
            },
            itemStyle: {
                color: '#83CFFF',
                borderColor: '#83CFFF'
            },
            showSymbol: true,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(54, 153, 255, 1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(89, 169, 254, 1)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
        }
    ]
}

onMounted(() => {
    analysisCustomer()
    getNum()
    todoInfoS()
})
</script>

<style scoped>
.dashboard {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    min-height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-top {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.company-info {

.top-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    min-width: 0;
    background-color: #EFF2FB; /* 使用指定的背景颜色 */
    background-image: url("../assets/images/denglu.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    height: 138px;
    gap: 20px;
}
.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: contain;

.company-info {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #303133;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.company-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    padding-right: 15px;
    gap: 6px;
}

.company-card::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #C9C5C5;
    border-radius: 2px;
}
.company-name {
    font-weight: 400;
    font-size: 16px;
    color: #161A9A;
    font-weight: 600;
    color: #303133;
}

.company-meta {
    font-weight: 400;
    font-size: 12px;
    color: #818185;
    font-size: 13px;
    color: #909399;
}

.data-cards {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    gap: 20px;
}
.data-title {
    font-weight: 700;
    font-size: 26px;
    color: #FFFFFF;
}
.data-num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.data-card {
    background: #fff;
    border-radius: 12px;
@@ -557,161 +264,141 @@
    background-position: center;
    background-repeat: no-repeat;
}
.data-desc {

.data-title {
    font-size: 16px;
    font-weight: 500;
    font-size: 13px;
    color: #FFFFFF;
    color: #fff;
    margin-bottom: 10px;
}
.data-value {
    font-size: 18px;
    font-weight: 500;
    margin: 10px 0;
    color: #FFFFFF;
}
.top-left {

.data-num {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
    gap: 40px;
}

.data-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 6px;
}

.data-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.todo-panel {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 50%;
    display: flex;
    flex-direction: column;
}

.todo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
    flex: 1;
    overflow-y: auto;
    height: 260px;
}

.todo-list li {
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 8px 20px;
    height: 74px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(225,227,250,0.62);
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.todo-list li:last-child {
    border-bottom: none;
}

.todo-title {
    font-weight: 400;
    font-size: 12px;
    color: #000000;
    position: relative;
    font-weight: 500;
    color: #303133;
}
.todo-title::before {
    content: ''; /* 必需，表示这里有一个内容 */
    position: absolute;
    left: -10px; /* 定位到左侧 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 微调垂直居中 */
    width: 6px; /* 圆的直径 */
    height: 6px; /* 圆的直径 */
    background: #498CEB;
    border-radius: 50%; /* 让其变成圆形 */
}

.todo-division {
    font-weight: 400;
    font-size: 12px;
    color: #000000;
}
.todo-time {
    font-weight: 400;
    font-size: 12px;
    color: #000000;
}
.todo-meta {
    color: #888;
    font-size: 13px;
    color: #909399;
}
.dashboard-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;

.todo-time {
    font-size: 13px;
    color: #909399;
}

.main-panel {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.section-title {
    position: relative;
    font-size: 18px;
    color: #333;
    padding-left: 10px;
    margin-bottom: 10px;
    font-weight: 700;
}

.section-title::before {
    position: absolute;
    left: 0;
    top: 4px;
    content: '';
    width: 4px;
    height: 18px;
    background-color: #002FA7;
    border-radius: 2px;
.contract-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contract-info {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 90px;
    background: rgba(245,245,245,0.59);
    width: 100%;
    border-radius: 10px;
    padding: 10px 30px;
    gap: 12px;
}
.contract-summary {
    display: flex;
    align-items: center;
    gap: 30px;
}

.contract-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    gap: 4px;
}

.contract-name {
    font-weight: 400;
    font-size: 14px;
    color: #050505;
}
.contract-meta {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 80px;
}
.main-amount {
    font-size: 24px;
    color: rgba(51,50,50,0.85);
}
.up { color: #e57373; }
.contract-list {
    margin-top: 16px;
    font-size: 14px;
    color: #666;
    list-style: none;
}

.contract-meta {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: 13px;
    color: #909399;
}

.main-amount {
    font-size: 28px;
    font-weight: 700;
    color: #5053B5;
}

.up {
    color: #f56c6c;
}

.contract-list {
    margin: 0;
    padding: 0;
    height: 190px;
    overflow-y: auto;
    font-size: 14px;
    color: #333;
    list-style: none;
    width: 460px;
}

.contract-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.line {
    position: relative;
    width: 230px;
}

.line::after {
    content: '';
    position: absolute;
@@ -721,45 +408,5 @@
    width: 1px;
    background-color: #C9C5C5;
    border-radius: 2px;
}
.contract-list li {
    margin-top: 10px;
}
.quality-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.quality-card {
    border-radius: 8px;
    padding: 15px 10px 10px 50px;
    font-weight: 400;
    font-size: 12px;
    color: rgba(0,0,0,0.67);
    width: 236px;
    height: 49px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.quality-card.one {
    background-image: url("../assets/images/yuancailiao.png");
}
.quality-card.two {
    background-image: url("../assets/images/guocheng.png");
}
.quality-card.three {
    background-image: url("../assets/images/chuchang.png");

}
.quality-card span {
    color: #4fc3f7;
    font-weight: bold;
    margin-left: 6px;
}
.chart {
    width: 100%;
    height: 220px;
    margin-top: 10px;
}
</style>